.itemProgressBar {
    background: #333;
    background: rgba(51, 51, 51, .8);
    position: relative;
    height: .28em
}

.itemProgressBarForeground {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}

.indicator {
    -webkit-border-radius: 100em;
    border-radius: 100em;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 500;
    width: 2em;
    height: 2em
}

.countIndicator,
.playedIndicator {
    -webkit-border-radius: 100em;
    display: -webkit-flex;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2)
}

.timerIndicator {
    color: #CB272A
}

.timerIndicator-inactive {
    color: #888
}

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

.indicatorIcon {
    width: auto;
    height: auto;
    font-size: 1.6em
}

.countIndicator {
    border-radius: 100em;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    font-size: 88%
}

.playedIndicator {
    border-radius: 100em;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    font-size: 80%
}

.videoIndicator {
    background: #444;
    -webkit-border-radius: 100em;
    border-radius: 100em;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    color: #fff;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12), 0 3px 1px -2px rgba(0, 0, 0, .2);
    font-size: 88%
}

.syncIndicator {
    -webkit-border-radius: 100em;
    border-radius: 100em
}

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

.missingIndicator,
.unairedIndicator {
    background: #c33;
    padding: .25em .5em;
    -webkit-border-radius: 100em;
    border-radius: 100em;
    color: #fff;
    font-size: 84%;
    font-weight: 500;
    margin: 0 .25em
}