#stepSequencer {

    font-family: sans-serif;
    table-layout: fixed;
    width: 100%;
    padding: 10px;

}

#saveValue{
    width: 330px;
    padding: 5px 5px;
}

#controls{
    padding: 10px;
}

input[type="button"]{
    border:1px solid #000000;
    border-radius:5px;
    padding:5px 15px;
}

input[type="number"]{
    padding: 3px 5px;
    font-size: large;
}

.controls{
    font-size: larger;
    display: inline;
}


html{
    font-family: sans-serif;
    padding: 1;
}

.cell{
    height: 40px;
    

}

.cell{
    background-color: gray;
}

.cell[data-enabled="true"]{
    background-color: green;
}

.cell[data-quarter="true"]{
    background-color: dimgray;
}

.cell[data-enabled="true"][data-quarter="true"]{
    background-color: darkgreen;
}

.cell[data-playing="true"][data-enabled="false"] {
    background-color: slategray;
}

.cell[data-playing="true"][data-enabled="true"] {
    background-color: greenyellow;
}