/* 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(--topnavBg);
    border : 1px solid #555;
    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 #555;
    border-radius : 5px;
    background-color: var(--topSubmenuBg);
    color : var(--topbuttonColor);
}

#metronome-controllers .actionbutton .icon{
    height : 1.6em;
}

#metronome-controllers .actionbutton:hover {
    background-color: var(--topSubmenubuttonHoverBg);
}

#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 #555;
    border-radius : 5px;
    background-color: var(--topSubmenuBg);
    color : var(--topbuttonColor);
    padding : 9px 0px;

}

#metronome-controllers .span {
    flex : 1;
    height : 1em;
    display : flex;

}

#metronome-controllers-label-beats, #metronome-controllers-label-bar {
    flex : 2;
}