body {
    font-family: sans-serif;
    background: none transparent;
    margin: 0;
    font-size: 10pt;
}

* {
    box-sizing: border-box;
}

canvas {
    transform: rotate(180deg) scaleX(-1);
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

.embedding-option {
    width: 128px;
    height: 100%;
    display: inline-block;
    text-align: center;
    background-color: hsl(212, 10%, 90%);
    color: hsl(212, 10%, 40%);
    cursor: pointer;
}

.embedding-option:hover {
    background-color: hsl(212, 31%, 90%);
    color: hsl(212, 31%, 40%);
}

.embedding-option.selected, .embedding-option.selected:hover {
    background-color: hsl(212, 62%, 80%);
    color: hsl(212, 62%, 20%);
}

#container {
    position: relative;
    width: 900px;
    height: 310px;
    margin: auto;
}

#loading {
    position: absolute;
    left: 0;
    top: 0;
    background: hsl(0, 0%, 90%);
    line-height: 310px;
    width: 900px;
    text-align: center;
    cursor: progress;
}

#playing-marker {
    display: none;
    position: absolute;
    left: 128px;
    top: 128px;
    text-align: center;
    line-height: 20px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background-image: url('play.svg');  
    cursor: crosshair;  
}


#content {
    display: none;
}

#main-row {
    height: 256px;
}

#embedding {
    display: inline-block;
    cursor: crosshair;
}

#mel-canvas {
    width: 625px;
    height: 256px;
}

.hspace {
    display: inline-block;
    width: 19px;
}

.vspace {
    height: 14px;
}

#helper-row {
    height: 40px;
    line-height: 40px;
    vertical-align: top;
}

.mejs__audio {
    display: inline-block;
}

.mejs__controls:not([style*="display: none"]) {
    background: hsl(212, 50%, 30%) !important;
}