.timer-pane {
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    width: 100%;
    margin-bottom: 1rem !important;
}

.timer-title {
    display: block;
    white-space: normal;
    word-wrap: break-word;
}

.timer-pane span.lead {
    display: block;
    float: left;
}

.progress {
    background-color: #fff;
    border: 1px #007bff solid;
    width: 100%;
}

.progress-container {
    display: block;
    width: 100%;
}

.timer-info {
    height: 1.5rem;
}

.timer-controls {
    float: right;
    height: 1.5rem;
}

.timer-icon {
    cursor: pointer;
    display: inline-block;
    height: 1.00rem;
    margin: 0;
    width: 1.00rem;
}

.timer-controls .timer-icon {
    margin-left: 0.25rem;
    margin-top: 0.50rem;
}

.timer-back {
    background-image: url('../img/icons/back.svg');
}

.timer-dismiss {
    background-image: url('../img/icons/cancel.svg');
}

.timer-pause {
    background-image: url('../img/icons/pause.svg');
}

.timer-play {
    background-image: url('../img/icons/play.svg');
}

.timer-play.disabled {
    background-image: url('../img/icons/play-disabled.svg');
}

.timer-stop {
    background-image: url('../img/icons/stop.svg');
}

#activeBars .timer-play,
#activeBars .timer-dismiss,
#pausedBars .timer-pause,
#pausedBars .timer-dismiss,
#finishedBars .timer-back,
#finishedBars .timer-pause,
#finishedBars .timer-stop {
    display: none;
}

#pausedBars .progress-bar {
    background-color: #ffc107 !important;
}

#pausedBars .progress {
    border: 1px #ffc107 solid !important;
}

#finishedBars .progress-bar {
    background-color: #28a745 !important;
}

#finishedBars .progress {
    border: 1px #28a745 solid !important;
}

.progress-bar {
    transition: width .1s ease;
}

.btn-outline-input-group {
    background-color: #e9ecef;
    border: 1px solid #ced4da;
}

.btn.play-disabled {
    pointer-events: none;
}