/* Modules */
.module{
    background: #2C2D2F;
    position:relative;
    text-align:center;
    padding:0.5em;
    margin:0.5em 0.5em;
    border-radius:0.125em;
    align-self: end;
}
.module span{
    display:block;
}
.mdlName{
    font-weight:300;
}

/* Buttons */
input, button{
    cursor:pointer;    
}
input[type=button], button{
    background: #2C2D2F;
    padding:0.25em 0.75em;
    border: 3px solid #181B1C;
    color: inherit;
    font-family: inherit;
    margin: 0.5em;
    position:relative;
    border-radius:0.5em;
    display:inline-block;
}
input:hover, button:hover{
    top:-1px;
    left:-1px;
    background:#23F376;
    color: #2C2D2F;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.125);
}
input[type=button]:active, button:active{
    top:1px;
    left:1px;
    box-shadow: 0;
}
input:hover:after, button:hover:after{
    content:attr(data-title);
    position:absolute;
    top:2.5em;
    left:0; 
    z-index:100;   
    background:#181B1C;
    border-radius:0.5em;
    padding:0.5em 0.75em;
    color:#23F376;
}
button.choice.active{
    background: #181B1C;
}
.choiceSwitch button{
    margin:0.25em 0;
}
.choiceSwitch button:not(:first-child){
    border-left:none;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.choiceSwitch button:not(:last-child){
    border-right:none;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.choiceSwitch button:hover{
    background:#23F376;
    color: #2C2D2F;
}

/* Sequencer */
.sequencer{
    display: grid;
    grid-template-columns: repeat(8,12.5%);
    padding: 0.75em 0;
}
.sequencer .step{
    text-align:center;
    margin: 0.5em;
}
.sequencer .toggle {
    display:none;
}
.toggleSwitch{
    display:block;
    padding:0.5em;
    cursor: pointer;
}
.niceToggle {
    display:block;
    background: #181B1C;
    width:0.75em;
    height:0.75em;
    margin:0.25em auto;
    border-radius:50%;
    box-shadow: inset -2px -2px 0 rgba(0,0,0,0.25);
}
.sequencer .step input:checked + .niceToggle {
    opacity:0.3;
    background-color: #23F376;
}
.sequencer .step:hover .niceToggle{
    background:#888;
    opacity: 0.6;
}
.sequencer .step.active .niceToggle{
    background:#888;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.125);
}
.sequencer .step:hover input:checked + .niceToggle{
    opacity:0.6;
}
.sequencer .step.active input:checked + .niceToggle {
    opacity: 1;
}
.step canvas{
    opacity:0.3;
    cursor:grab;
}
.step canvas:focus{
    cursor:grabbing;
}
.step.active canvas{
    opacity:1;
}