.itemProgressBar {
    background: rgba(0,0,0,.5);
    position: relative;
    height: .75vh;
}

.itemProgressBarForeground {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #52B54B;
}

.indicator {
    border-radius: 500px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.timerIndicator {
    color: #CB272A;
}

.indicator + .indicator {
    margin-left: .25em;
}

.countIndicator {
    background: rgba(82,181,75,1);
    border-radius: 500px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #fff;
}

.playedIndicator {
    background: rgba(82,181,75,1);
    border-radius: 500px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.countIndicator, .playedIndicator {
    width: 28px;
    height: 28px;
}

.syncIndicator {
    color: #fff;
    border-radius: 500px;
    padding: 3px;
}

.emptySyncIndicator {
    background: #ccc;
    color: #333;
}

.indicatorIcon {
    width: 22px;
    height: 22px;
    font-size: 22px;
}

.fullSyncIndicator {
    color: #673AB7;
    padding: 0;
    border: 4px solid #673AB7;
    background: #fff;
}

.fullSyncIndicatorIcon {
    margin: -3px;
    font-size: 26px;
    height: 26px;
    width: 26px;
}

.layout-tv .countIndicator, .layout-tv .playedIndicator {
    width: 3.8vh;
    height: 3.8vh;
}

.layout-tv .countIndicator {
    font-size: 80%;
}

.layout-tv .playedIndicatorIcon {
    width: 2.6vh;
    height: 2.6vh;
    font-size: 2.6vh;
}