.progressUI
{
    padding: 10px;
    position: absolute;
    border-radius: 10px;
    background-color: rgba(0,0,0,0.45);
    margin: 20px;
    bottom: 10px;
    height:30px;
    margin-left:50%;
    transform: translate(-50%);
    display: flex;
    align-items: center;
}

.progressUI .buttonContainer {
    display: flex;
    align-content: center;
    height: 100%;
}

.progressUI .progress
{
    font-family: Monospace;
    float:left;
    color:white;
    width: auto;
    margin-left:15px;
    margin-right: 10px;
}

.progressUI .progressContainer
{
    width:200px;
    overflow: hidden;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    float:left;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100%;
}

.progressUI .button
{
    cursor: pointer;
    box-sizing: border-box;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-content: center;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-right: 5px;
    border-radius: 5px;
    float:left;
    display: flex;
    align-items: center;
}

.progressUIIcon
{
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    background-color: white;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-size: 100% !important;
}

.progressUI .progressContainer .progressbar {
    height: 100%;
    width: 97%;
}

.progressUI_icon-play {
    -webkit-mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpath d='M5 3l14 9-14 9V3z'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpath d='M5 3l14 9-14 9V3z'/%3E%3C/svg%3E");
}

.progressUI_icon-pause {
    -webkit-mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-pause'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-pause'%3E%3Cpath d='M6 4h4v16H6zM14 4h4v16h-4z'/%3E%3C/svg%3E");
}

.progressUI_icon-rewind {
    -webkit-mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-rewind'%3E%3Cpath d='M11 19l-9-7 9-7v14zM22 19l-9-7 9-7v14z'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-rewind'%3E%3Cpath d='M11 19l-9-7 9-7v14zM22 19l-9-7 9-7v14z'/%3E%3C/svg%3E");
}

.progressUI_icon-fast-forward {
    -webkit-mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-fast-forward'%3E%3Cpath d='M13 19l9-7-9-7v14zM2 19l9-7-9-7v14z'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-fast-forward'%3E%3Cpath d='M13 19l9-7-9-7v14zM2 19l9-7-9-7v14z'/%3E%3C/svg%3E");
}

.progressUI_icon-skip-back {
    -webkit-mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3E%3Cpath d='M19 20L9 12l10-8v16zM5 19V5'/%3E%3C/svg%3E");
    mask: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-skip-back'%3E%3Cpath d='M19 20L9 12l10-8v16zM5 19V5'/%3E%3C/svg%3E");
}
