@supports (--css: variables) {
    input[type="range"].multirange {
        padding: 0;
        margin: 0;
        display: inline-block;
        vertical-align: top;
    }

    input[type="range"].multirange.original {
        position: absolute;
    }

    input[type="range"].multirange.original::-webkit-slider-thumb {
        position: relative;
        z-index: 2;
    }

    input[type="range"].multirange.original::-moz-range-thumb {
        transform: scale(1); /* FF doesn't apply position it seems */
        z-index: 1;
    }

    input[type="range"].multirange::-moz-range-track {
        border-color: transparent; /* needed to switch FF to "styleable" control */
    }

    input[type="range"].multirange.ghost {
        position: relative;
        background: var(--track-background);
        --track-background: linear-gradient(to right,
        transparent var(--low), var(--range-color) 0,
        var(--range-color) var(--high), transparent 0
        ) no-repeat 0 45% / 100% 40%;
        --range-color: hsl(190, 80%, 40%);
    }

    input[type="range"].multirange.ghost::-webkit-slider-runnable-track {
        background: var(--track-background);
    }

    input[type="range"].multirange.ghost::-moz-range-track {
        background: var(--track-background);
    }

}


.main-header {
    position: fixed;
    max-height: 100px;
    z-index: 1030;
    right: 0px;
    left: 0px;
}

.main-sidebar {
	position:fixed;
}

.content-wrapper > .content {
	padding-top: 50px;
    padding-left:25px;
}

.card {
    background: white;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 4px;
    height: 90px;
}

.card ul {
    padding-left: 18px;
}

canvas {
    width: 100px;
    height: 50px;
}

.tune-library .row:hover {
    background-color: #e6e9ee;
}

#tune-editor {
    text-align: left;
    font-size:14px;
}

.form-control {
    display: inline-block;
    clear: none;
    width: auto;
    min-width: 100px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
}


#tune-editor input[type=number] {
    width:45px;
    padding: 0;
}


.activeplayer .btn {
    transition: all 0.2s ease-in;
}