.metronome {
    background-color: #d3d3d3;
    border: darkgray solid .25em;
}

.metronome h1 {
    padding-bottom: 0;
}

.metronome .bpm-display {
    font-size: 1.3em;
    font-weight: 800;
    background-color: white;
    border-radius: .3em;
}

.metronome#metroBpmDisplay {
    font-size: 1.5em;
}

.metronome#metroStartStopB {
    border-radius: 50%;
    display: block;
    height: 2em;
    width: 2.01em;
    margin-top: .2em;
    padding-top: 4px; 
    padding-left: 9px;
}

.metronome .bpm-option {
    border-spacing: .15em;
}

.metronome .bpm-option,
.metronome .time-signature,
.metronome .volume {
    background-color: whitesmoke;
    border-radius: .15em;
}

.metronome .misc-option {
    border-radius: .15em;
}

.metronome .time-signature {
    padding-top: 0.6em;
    padding-bottom: 0.4em;
}

.metronome .volume {
    padding-top: .3em;
    padding-right: .6em; 
    padding-bottom: .3em; 
}

.metronome .icons {
    color: #393333;
    line-height: 1.2em;
    font-size: 1.15em;
    margin-top: .2em;
}

/*.metronome button.glyphicon-play, */
.metronome button.glyphicon-pause {
    margin-top: .15em !important;
}

.metronome .time-signature .icons {
    font-size: 1.1em;
    margin-top: .1em;
    margin-left: .35em;
}

.metronome .five-btns {
    padding-top: .2em
}

.metronome#metroMinusFive,
.metronome#metroPlusFive {
    border-radius: 50%;
    height: 1.75em;
    width: 1.75em;
    border: 1px solid #393333;
    margin-right: .1em;
    background-color: #eaeaea;
}

.metronome#metroMinusFive.span,
.metronome#metroPlusFive.span {
    color: #393333;
    line-height: 1.2em;
    font-size: .9em;
    top: 1px;
}
.metronome#metroMinusFive.span {
    right: 1px;
}
.metronome#metroPlusFive.span {
    right: -1px;
}