.canvasContainer {
    max-width: 900px;
    min-width: 300px;
    width:auto;
    height: auto;
    max-height: 300px;
    position: relative;

    min-height:100px;   
    display:inline-grid;

}


.fileDropBox {
    /*float:left;*/
    max-width: 900px;
    min-width: 300px;
    width: 100%;
    max-height: 300px;
    min-height: 100px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0px;
    margin: 0px;
    border: 1px dashed gray;
    color: gray;
    border-radius: 7px;
    flex:1;
    /* display:inline-block; */
}

.canvasEQ {
    /*float:left;*/
    max-width: 900px;
    min-width: 300px;
    width: 100%;
    max-height: 100px;
    min-height: 50px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0px;
    margin: 0px;
    color: gray;
    border-radius: 7px;
    flex: 1;
    /* display:inline-block; */
}

.seek-control {
    max-width: 840px;
    width: 100%;
    /* float:left; */
    margin-left: auto;
    margin-right: auto;
    /*clear:left;*/
}

.zoom-control {
    width:30px;
    max-height: 300px;
    height: 100%;
}

.nav-button{
    width:50px;
    height:25px;
    /* float:left; */
    margin-right:10px;
    margin-top: 10px;
}

.controls {
    list-style: none;
    padding: 0px;
    margin:0px;
    max-width: 890px;
    width: 100%;
    /*position:absolute;
    bottom:-100px;*/
    left:0px;
}
.controls li {
    margin-bottom:20px;
}

.scrollVertical {
    display: inline-block;
    background: rgba(145, 170, 218, 0.4);
    position: absolute;
    right: 0px;
    top: 0px;
    max-height: 285px;
    height: calc(100% - 15px);
    /* height: 100%; */
    width: 15px;
}
.rangeslider__fill {
    background: rgba(145, 170, 218, 0.8);
}
.rangeslider__handle {
    background: rgba(145, 170, 218, 1);
}
.rangeslider__handle:active {
    background: rgba(129, 171, 248, 1);
}

.buttonScroll {
    position: absolute;
    width: 15px;
    height: 15px;
    z-index: 2;
    text-align: center;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    border-width: 0px;
    background: rgba(189, 29, 29, 0.0);
    color:rgba(255, 255, 255, 0.5);
    outline: none;
}
.buttonScroll:focus{
    color:rgba(255, 255, 255, 0.5);
}

.buttonScroll:hover{
    color:rgba(255, 255, 255, 1);
}

.cursorMove{
    cursor:e-resize;
}



.buttonZoomIn {
    top: 0px;
    right: 0px;
}

.buttonZoomOut {
    bottom: 0px;
    right: 0px;
}

.scrollHorizontal {
    display: inline-block;
    background: rgba(145, 170, 218, 0.4);
    position: absolute;
    left: 0px;
    bottom: 0px;
    max-width: 900px;
    width: calc(100% - 15px);
    /* width: 100%; */
    height: 15px;
    padding: 0px;
    border: 0px;
}
.buttonSeekRight {
    bottom: 0px;
    right: 0px;
}
.buttonSeekLeft {
    bottom: 0px;
    left:0px;
}

.container > * {
    float: left;
}

.middleHorizontal {
    width: calc(100% - 30px);
    left: 15px;
}

.middleVertical {
    height: calc(100% - 30px);
    top: 15px;
}

.spinner {
    margin-left: 5px;
    margin-right: 5px;
    border: 0px;
    width:20px;
    height:20px;
}
.hidden{
    visibility:hidden;
}