/* METRONOME */
#title-metronome {
    margin-top : 70px;
}
#metronome-controllers-containers {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#metronome-controllers {
    display : flex;
    flex-direction: column;
    align-items: center;
    margin: 0px auto 0 auto;
    padding : 10px 10px 0px 10px;
    font-size : 1.5em;
    background-color: var(--metronome-bg);
    border-radius : 5px;
}

#metronome-controllers li{
    flex: 0 0 100%;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: start;
    display : flex;
    margin : 0px 0px 20px 0px;
}
#metronome-controllers td{
    padding-bottom : 10px;
    vertical-align: middle;
}
#metronome-controllers-toptr td{
    padding-bottom : 20px;
}
#metronome-controllers .actionbutton {
    padding : 5px;
    border : 1px solid var(--metronome-actionbutton-hover-bg);
    border-radius : 5px;
    background-color: var(--metronome-actionbutton-bg);
}
#metronome-controllers .actionbutton .icon{
    height : 1.6em;
}
#metronome-controllers .actionbutton:hover {
    background-color: var(--metronome-actionbutton-hover-bg);
}
#metronomeBox {
    font-size : 0.9em;
}
#metronome-controllers input {
    display: block;
    width : 100%;
    height : 100%;
    position : relative;
    top : 0px;
    left : 0px;
    margin: 0;
    box-sizing: border-box;
    border : 1px solid var(--metronome-actionbutton-hover-bg);
    border-radius : 5px;
    background-color: var(--metronome-actionbutton-bg);
    padding : 9px 0px;
}
#metronome-controllers input:focus {
    background-color: var(--metronome-actionbutton-hover-bg);
}
#metronome-controllers .span {
    flex : 1;
    height : 1em;
    display : flex;
}
#metronome-controllers-label-beats, #metronome-controllers-label-bar {
    flex : 2;
}