/* — PLAYER-SLIDER: seekSlider — */

.audio-player .outer .player-seekSlider {
    padding-left: .25em;
    padding-right: .5em;
}
input[type=range].player-seekSlider {
    width: 100%;
    line-height: 2.1; 
    height: 2.1em;     /* line-height & hight statt Firefox:  margin: 7.5px 0; || Chrome  margin: .9em 0; */
    background-color: transparent;
    -webkit-appearance: none;
}
input[type=range].player-seekSlider:focus {
    outline: none;
}
input[type="range"].player-seekSlider::-webkit-slider-runnable-track {	
    /*background: #1a1816; 81, 73, 66*/
    background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, rgb(255, 102, 51) 0%, rgb(255, 102, 51) var(--pos, 0),
        rgb(26, 24, 22) var(--pos, 0)) repeat scroll 0% 0% !important;
    /*    background: hsla(var(--black), 0) -webkit-linear-gradient(left, var(--hsl-primary) 0%, var(--hsl-primary) var(--pos, 0),
            var(--hsl-brown-7) var(--pos, 0)) repeat scroll 0% 0%;*/
    /* background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, rgb(255, 102, 51) 0%, rgb(255, 102, 51) var(--pos, 0),
            rgb(26, 24, 22) var(--pos, 0)) repeat scroll 0% 0%; */
    /*border: 0.4px solid var(--hsl-brown-7)*/ /* #010101 */;
    /*border-style: solid;*/
    border-style: none;
    border-width: .4px;
    border-color: var(--hsl-brown-7);
   /*border-color:yellow;*/
    /*border-color: hsla(var(--primary), 0) -webkit-linear-gradient(left, var(--hsl-primary) 0%, var(--hsl-primary) var(--pos, 0),
        var(--hsl-brown-7) var(--pos, 0)) repeat scroll 0% 0%;*/
    /*    border-color: hsla(var(--black), 0) -webkit-linear-gradient(left, var(--hsl-primary) 0%, var(--hsl-primary) var(--pos, 0),
            var(--hsl-brown-7) var(--pos, 0)) repeat scroll 0% 0%;*/
    border-radius: 25px;
    width: 100%;
    height: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    /*background-color: var(--hsl-brown-7)!important;*/
    /* border-color: var(--hsl-brown-7)!important;    */      /* OK */
}
input[type=range].player-seekSlider::-webkit-slider-thumb {
    /*margin-top: -7.9px;*/
    margin-top: -6px;
    width: 20px;
    height: 20px;
    background: var(--hsl-white);
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    -webkit-appearance: none;
}
input[type=range].player-seekSlider::-webkit-slider-thumb:active,
input[type=range].player-seekSlider::-webkit-slider-thumb:focus {
    background-color: var(--hsl-primary);
    -webkit-box-shadow: 0 0 4px 1px hsla(var(--brown-7), .76); 
    /*-webkit-box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.76);*/ 
    box-shadow: 0 0 4px 1px hsla(var(--brown-7), .76);
    /*box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.76);*/
}
/*input[type=range].player-seekSlider:focus::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px 4px rgba(51, 153, 204, 0.49);
}
input[type=range].player-seekSlider:active::-webkit-slider-thumb {
    box-shadow: 0px 0px 0px 4px rgba(51, 153, 204, 0.49);
}*/
input[type=range].player-seekSlider:focus::-webkit-slider-runnable-track {
    /*background: var(--hsl-brown-7);*/ /* #282522; */
}
input[type=range].player-seekSlider:active::-webkit-slider-runnable-track {
    /*    background: var(--hsl-secondary);*/
}
input[type=range].player-seekSlider::-moz-range-track {
    background: var(--hsl-brown-7);
    border: 0.4px solid var(--hsl-brown-7);
    /*border: 0.4px solid #010101;*/
    border-radius: 25px;
    width: 100%;
    height: 5px;
    cursor: pointer;
}
input.player-seekSlider[type=range]::-moz-range-progress {
    background: var(--hsl-primary);
    border: 0.4px solid var(--hsl-primary);
    border-radius: 25px;
    height: 5px;
}
input[type=range].player-seekSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--hsl-white);
    border: 0;
    border-radius: 20px;
    cursor: pointer;
}
input[type=range].player-seekSlider::-moz-range-thumb:active,
input[type=range].player-seekSlider::-moz-range-thumb:focus {
    background-color: var(--hsl-primary);
    -webkit-box-shadow: 0 0 4px 1px hsla(var(--brown-7), .76); 
    /*-webkit-box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.76);*/ 
    box-shadow: 0 0 4px 1px hsla(var(--brown-7), .76);
    /*box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.76);*/
}
input[type=range].player-seekSlider::-ms-track {
    /*    background: transparent;*/
    /*    background: #1A1816!important;*/
    /*    border-color: transparent;*/
    border-color: red!important;        
    border-width: 8.5px 0;
    color: transparent;
    width: 100%;
    height: 5px;
    cursor: pointer;
}
input[type=range].player-seekSlider::-ms-fill-lower {
    background: #ff6633!important;
    /* background: #0c0b0a; */
    border: .4px solid #ff6633;
    /*    border: 0.4px solid #010101;*/
    border-radius: 50px;
}
input[type=range].player-seekSlider::-ms-fill-upper {
    background: #1A1816!important;
    border: .4px solid #1A1816;
    /*    border: 0.4px solid #010101;*/
    border-radius: 50px;
}
input[type=range].player-seekSlider::-ms-thumb {
    width: 20px;
    height: 20px;
    background: white!important;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}
input[type=range].player-seekSlider::-ms-thumb:active,
input[type=range].player-seekSlider::-ms-thumb:focus {
    background-color: #ff6633!important;
    /*-webkit-box-shadow: 0 0 4px 1px hsla(var(--brown-7), .76);*/ 
    -webkit-box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.76); 
    /*box-shadow: 0 0 4px 1px hsla(var(--brown-7), .76);*/
    box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.76);
}
input[type=range].player-seekSlider:focus::-ms-fill-lower {
    background: #ff6633!important;
}
input[type=range].player-seekSlider:focus::-ms-fill-upper {
    background: #1A1816!important;  /* #282522; */
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range].player-seekSlider {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}



:root {
    --base-primary: 15;
    --base-secondary: 225;

    --base-brown: 30, 10%;
    --base-gray: 0, 0%;

    --base-saturation: 100%;
    --base-lightness: 60%;
    --base-opacity: 1;

    --opacity-80: .8;
    --opacity-0: 0;


    --hsla-primary:   hsla(var(--base-primary),   var(--base-saturation), var(--base-lightness), var(--base-opacity));  /* #f63; */
    --hsla-secondary: hsla(var(--base-secondary), var(--base-saturation), var(--base-lightness), var(--base-opacity));  /* #36f; */

    --hsla-primary-light:    
        hsla(   calc(var(--base-primary) + 2), 
        var(--base-saturation), 
        calc(var(--base-lightness) + 13.9%), 
        var(--base-opacity));  
    /* #ffa07a; */
    --hsla-secondary-light:  
        hsla(   var(--base-secondary), 
        var(--base-saturation), 
        calc(var(--base-lightness) + 6.1%), 
        var(--base-opacity));  
    /* #527dff; */
    --hsla-secondary-lighter:  
        hsla(   calc(var(--base-secondary) - 6.5), 
        calc(var(--base-saturation) - 20.8%), 
        calc(var(--base-lightness) + 6.1%), 
        var(--base-opacity));  
    /* #6495ed; */


    --hsl-primary:   hsl(var(--base-primary),   var(--base-saturation), var(--base-lightness));  /* #f63; */
    --hsl-secondary: hsl(var(--base-secondary), var(--base-saturation), var(--base-lightness));  /* #36f; */
    --hsl-primary-light: hsl(calc(var(--base-primary) + 2), var(--base-saturation), calc(var(--base-lightness) + 13.9%));  /* #ffa07a; */
    --hsl-secondary-light: hsl(var(--base-secondary), var(--base-saturation), calc(var(--base-lightness) + 6.1%));  /* #527dff; */
    --hsl-secondary-lighter: hsl(calc(var(--base-secondary) - 6.5), calc(var(--base-saturation) - 20.8%), calc(var(--base-lightness) + 6.1%)); /* #6495ed; */

    --primary:      var(--base-primary),   var(--base-saturation), var(--base-lightness);  /* #f63; */
    --secondary:    var(--base-secondary), var(--base-saturation), var(--base-lightness);  /* #36f; */
    --primary-light: calc(var(--base-primary) + 2), var(--base-saturation), calc(var(--base-lightness) + 13.9%);  /* #ffa07a; */
    --secondary-light: var(--base-secondary), var(--base-saturation), calc(var(--base-lightness) + 6.1%);  /* #527dff; */
    --secondary-lighter: calc(var(--base-secondary) - 6.5), calc(var(--base-saturation) - 20.8%), calc(var(--base-lightness) + 6.1%); /* #6495ed; */


    --brown-1: var(--base-brown), 85%;   /* #ddd9d5 */
    --brown-2: var(--base-brown), 77%;   /* #cac4bf */
    --brown-3: var(--base-brown), 66%;   /* #b2a9a0 */
    --brown-4: var(--base-brown), 51%;   /* #908376 */
    --brown-5: var(--base-brown), 29%;   /* #514942 */
    --brown-6: var(--base-brown), 21%;   /* #3B3530 */
    --brown-7: var(--base-brown),  9%;   /* #1A1816 */

    --hsla-brown-1: hsla(var(--base-brown), 85%, var(--base-opacity));   /* #ddd9d5 */
    --hsla-brown-2: hsla(var(--base-brown), 77%, var(--base-opacity));   /* #cac4bf */
    --hsla-brown-3: hsla(var(--base-brown), 66%, var(--base-opacity));   /* #b2a9a0 */
    --hsla-brown-4: hsla(var(--base-brown), 51%, var(--base-opacity));   /* #908376 */
    --hsla-brown-5: hsla(var(--base-brown), 29%, var(--base-opacity));   /* #514942 */
    --hsla-brown-6: hsla(var(--base-brown), 21%, var(--base-opacity));   /* #3B3530 */
    --hsla-brown-7: hsla(var(--base-brown),  9%, var(--base-opacity));   /* #1A1816 */

    --hsl-brown-1: hsl(var(--base-brown), 85%);   /* #ddd9d5 */
    --hsl-brown-2: hsl(var(--base-brown), 77%);   /* #cac4bf */
    --hsl-brown-3: hsl(var(--base-brown), 66%);   /* #b2a9a0 */
    --hsl-brown-4: hsl(var(--base-brown), 51%);   /* #908376 */
    --hsl-brown-5: hsl(var(--base-brown), 29%);   /* #514942 */
    --hsl-brown-6: hsl(var(--base-brown), 21%);   /* #3B3530 */
    --hsl-brown-7: hsl(var(--base-brown),  9%);   /* #1A1816 */



    --white:   var(--base-gray),100%;    /* #fff */
    --gray-1:  var(--base-gray), 96%;    /* #f5f5f5 */
    --gray-2:  var(--base-gray), 95%;    /* #f3f2f2 */
    --gray-3:  var(--base-gray), 93%;    /* #eee */
    --gray-4:  var(--base-gray), 92%;    /* #EAEAEA */
    --gray-5:  var(--base-gray), 87%;    /* #ddd */  
    --gray-6:  var(--base-gray), 86%;    /* #dcdcdc */
    --gray-7:  var(--base-gray), 83%;    /* #d3d3d3 lightgrey */
    --gray-8:  var(--base-gray), 80%;    /* #ccc */
    --gray-9:  var(--base-gray), 75%;    /* #c0c0c0 */
    --gray-10: var(--base-gray), 73%;    /* #bbb */
    --gray-11: var(--base-gray), 67%;    /* #aaa */
    --gray-12: var(--base-gray), 66%;    /* #a9a9a9 */
    --gray-13: var(--base-gray), 60%;    /* #999 */
    --gray-14: var(--base-gray), 50%;    /* #808080 */
    --gray-15: var(--base-gray), 47%;    /* #777 */
    --gray-16: var(--base-gray), 20%;    /* #333 */
    --gray-17: var(--base-gray), 13%;    /* #222 */
    --black:   var(--base-gray),  0%;    /* #000 */


    --hsla-white:   hsla(var(--base-gray),100%, var(--base-opacity));    /* #fff */
    --hsla-gray-1:  hsla(var(--base-gray), 96%, var(--base-opacity));    /* #f5f5f5 */
    --hsla-gray-2:  hsla(var(--base-gray), 95%, var(--base-opacity));    /* #f3f2f2 */
    --hsla-gray-3:  hsla(var(--base-gray), 93%, var(--base-opacity));    /* #eee */
    --hsla-gray-4:  hsla(var(--base-gray), 92%, var(--base-opacity));    /* #EAEAEA */
    --hsla-gray-5:  hsla(var(--base-gray), 87%, var(--base-opacity));    /* #ddd */  
    --hsla-gray-6:  hsla(var(--base-gray), 86%, var(--base-opacity));    /* #dcdcdc */
    --hsla-gray-7:  hsla(var(--base-gray), 83%, var(--base-opacity));    /* #d3d3d3 lightgrey */
    --hsla-gray-8:  hsla(var(--base-gray), 80%, var(--base-opacity));    /* #ccc */
    --hsla-gray-9:  hsla(var(--base-gray), 75%, var(--base-opacity));    /* #c0c0c0 */
    --hsla-gray-10: hsla(var(--base-gray), 73%, var(--base-opacity));    /* #bbb */
    --hsla-gray-11: hsla(var(--base-gray), 67%, var(--base-opacity));    /* #aaa */
    --hsla-gray-12: hsla(var(--base-gray), 66%, var(--base-opacity));    /* #a9a9a9 */
    --hsla-gray-13: hsla(var(--base-gray), 60%, var(--base-opacity));    /* #999 */
    --hsla-gray-14: hsla(var(--base-gray), 50%, var(--base-opacity));    /* #808080 */
    --hsla-gray-15: hsla(var(--base-gray), 47%, var(--base-opacity));    /* #777 */
    --hsla-gray-16: hsla(var(--base-gray), 20%, var(--base-opacity));    /* #333 */
    --hsla-gray-17: hsla(var(--base-gray), 13%, var(--base-opacity));    /* #222 */
    --hsla-black:   hsla(var(--base-gray),  0%, var(--base-opacity));    /* #000 */

    --hsl-white:   hsl(var(--base-gray),100%);    /* #fff */
    --hsl-gray-1:  hsl(var(--base-gray), 96%);    /* #f5f5f5 */
    --hsl-gray-2:  hsl(var(--base-gray), 95%);    /* #f3f2f2 */
    --hsl-gray-3:  hsl(var(--base-gray), 93%);    /* #eee */
    --hsl-gray-4:  hsl(var(--base-gray), 92%);    /* #EAEAEA */
    --hsl-gray-5:  hsl(var(--base-gray), 87%);    /* #ddd */  
    --hsl-gray-6:  hsl(var(--base-gray), 86%);    /* #dcdcdc */
    --hsl-gray-7:  hsl(var(--base-gray), 83%);    /* #d3d3d3 lightgrey */
    --hsl-gray-8:  hsl(var(--base-gray), 80%);    /* #ccc */
    --hsl-gray-9:  hsl(var(--base-gray), 75%);    /* #c0c0c0 */
    --hsl-gray-10: hsl(var(--base-gray), 73%);    /* #bbb */
    --hsl-gray-11: hsl(var(--base-gray), 67%);    /* #aaa */
    --hsl-gray-12: hsl(var(--base-gray), 66%);    /* #a9a9a9 */
    --hsl-gray-13: hsl(var(--base-gray), 60%);    /* #999 */
    --hsl-gray-14: hsl(var(--base-gray), 50%);    /* #808080 */
    --hsl-gray-15: hsl(var(--base-gray), 47%);    /* #777 */
    --hsl-gray-16: hsl(var(--base-gray), 20%);    /* #333 */
    --hsl-gray-17: hsl(var(--base-gray), 13%);    /* #222 */
    --hsl-black:   hsl(var(--base-gray),  0%);    /* #000 */
}


/*
 === AUDIO-PLAYER new ===
*/
.audio-player {
    background-color: #514942; /* needed for IE */
    background-color: var(--hsl-brown-5);
    border: solid .2em #393333;
    border-radius: .25em;
    margin: auto !important;

    max-width: 350px;     /*max-width: 284px;*/
}
@media (min-width: 768px){
    .audio-player {
        max-width: 560px;         /* max-width: 600px; */
    }
}

/* — PLAYER: Button — */
.audio-player .glyphicon {
    top: 4px;
}
.btn-play, .btn-volume, .btn-speed, .btn-loop, .btn-mixer {
    padding-left: 0;
    padding-right: 0;
}
.btn-play, .btn-volume, .btn-speed, .btn-loop, .btn-mixer, .player-seekSlider {
    display: block;
    margin: auto;
    background-color: #514942; /* needed for IE */
    background-color: var(--hsl-brown-5);
    color: white; /* needed for IE */
    color: var(--hsl-white);
    font-size: larger;
}
.player-properties .btn-loop .glyphicon-refresh,
.player-properties .btn-volume .glyphicon-volume-off {
    color: #6495ed; /* needed for IE */
    color: var(--hsl-secondary-lighter); /* color: var(--primary); */
}
.btn.btn-play:hover, .btn.btn-play:focus, .btn.btn-play.focus,
.btn.btn-volume:hover, .btn.btn-volume:focus, .btn.btn-volume.focus,
.btn.btn-speed:hover, .btn.btn-speed:focus, .btn.btn-speed.focus,
.btn.btn-loop:hover, .btn.btn-loop:focus, .btn.btn-loop.focus,
.btn.btn-mixer:hover, .btn.btn-mixer:focus, .btn.btn-mixer.focus {
    color: #f63; /* needed for IE */
    color: var(--hsl-primary); /* var(--secondary-light); hsl(225, 100%, 66%);  = #527dff  color:#36f; color: #6495ed; color: #3353ff;*/
}
.btn.btn-play:focus, 
.btn.btn-play:active:focus,
.btn.btn-play.active:focus,
.btn.btn-play.focus,
.btn.btn-play:active.focus,
.btn.btn-play.active.focus,

.btn.btn-volume:focus,
.btn.btn-volume:active:focus,
.btn.btn-volume.active:focus,
.btn.btn-volume.focus,
.btn.btn-volume:active.focus,
.btn.btn-volume.active.focus,

.btn.btn-speed:focus,
.btn.btn-speed:active:focus,
.btn.btn-speed.active:focus,
.btn.btn-speed.focus,
.btn.btn-speed:active.focus,
.btn.btn-speed.active.focus,

.btn.btn-loop:focus,
.btn.btn-loop:active:focus,
.btn.btn-loop.active:focus,
.btn.btn-loop.focus,
.btn.btn-loop:active.focus,
.btn.btn-loop.active.focus,

.btn.btn-mixer:focus,
.btn.btn-mixer:active:focus,
.btn.btn-mixer.active:focus,
.btn.btn-mixer.focus,
.btn.btn-mixer:active.focus,
.btn.btn-mixer.active.focus{
    outline: none;
    box-shadow: none;
}


/* — PLAYER: Duration — */
.player-duration {
    margin: 1em auto; /*11.5px*/
    /*padding-left: 0.4em;*/
    font-family: rubik;
    font-size: .8em;
}
@media (max-width: 767px){
    .player-duration {
        float: right;
        margin-right: 1em;
        /* display:none; */
    }
}
@media (min-width: 768px) and (max-width: 835px) {
    .player-duration {
        /*display: none;*/
    }
}
/*.player-duration #currentTime,*/
.player-duration .light {
    color: white; /* needed for IE */
    color: var(--hsl-white);
}
/*.player-duration #seperator,
.player-duration #duration,*/
.player-duration .dark {
    color: #b2a9a0; /* needed for IE */
    color: var(--hsl-brown-3);
}

/* — PLAYER: Popover — */
.popover {
    font-family: raleway;
}

/* — PLAYER: Speed Control — */
.speed-bpm {
    margin-bottom: .2em;
    /*font-weight: bold;*/
}
.speed-bpm span {
    font-weight: 600;
    font-family: rubik;
}
.step-controls {
    margin-top: .75em;
}
.step-controls .btn-plus {
    float: right;
}
.audio-player .btn-minus .glyphicon {
    top: 2px;
}
.audio-player .btn-plus .glyphicon {
    top: 2px;
    left: 1px;
}

/* — PLAYER: Mixing Layers — */
#trackSlider_0_0, #trackSlider_0_1 {
    margin-right: .35em;
}

/* — PLAYER: Properties — */
@media (max-width: 767px){
    .player-properties {
        margin-left: .2em;
        margin-right: .2em;
    }
}


/* — PLAYER-SLIDER: seekSlider — */
/* ################################ Slider einfügen ##################################################### */


/* — PLAYER-SLIDER: propertiesSlider — */
input[type=range].player-propertiesSlider {
    width: 100%;
    line-height: 2.1; 
    height: 2.1em;     /* line-height & hight statt margin */ /* v2 margin: 8.15px 0;*/ /* v1 margin: 5px 0;*/
    background-color: transparent;
    -webkit-appearance: none;
}
input[type=range].player-propertiesSlider:focus {
    outline: none;
}
input[type=range].player-propertiesSlider::-webkit-slider-runnable-track {
    background: var(--hsl-white);
    border: 0.4px solid var(--hsl-brown-4);
    border-radius: 2px;
    width: 100%;
    height: 11.7px;     /*height: 18px;*/
    cursor: pointer;
}
input[type=range].player-propertiesSlider::-webkit-slider-thumb {
    margin-top: -8.55px;     /*margin-top: -5.4px;*/
    width: 13px;
    height: 28px;
    background: var(--hsl-brown-6);      /*background: #514942;*/
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    -webkit-appearance: none;
}
input[type=range].player-propertiesSlider::-webkit-slider-thumb:active,
input[type=range].player-propertiesSlider::-webkit-slider-thumb:focus {
    -webkit-box-shadow: 0 0 4px 1px hsla(var(--brown-7), .36); 
    /*-webkit-box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.36);*/ 
    box-shadow: 0 0 4px 1px hsla(var(--brown-7), .36);
    /*box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.36);*/
    background: var(--hsl-secondary);
}
input[type=range].player-propertiesSlider:focus::-webkit-slider-runnable-track {
    /*    background: var(--hsl-white);*/
}
input[type=range].player-propertiesSlider::-moz-range-track {
    background: var(--hsl-white);
    border: 0.4px solid var(--hsl-brown-4);
    border-radius: 2px;
    width: 100%;
    height: 11.7px;     /*height: 18px;*/
    cursor: pointer;
}
input[type=range].player-propertiesSlider::-moz-range-thumb {
    width: 13px;
    height: 28px;
    background: var(--hsl-brown-6);     /*background: #514942;*/
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
input[type=range].player-propertiesSlider::-moz-range-thumb:active,
input[type=range].player-propertiesSlider::-moz-range-thumb:focus {
    -webkit-box-shadow: 0 0 4px 1px hsla(var(--brown-7), .36); 
    /*-webkit-box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.36);*/ 
    box-shadow: 0 0 4px 1px hsla(var(--brown-7), .36);
    /*box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.36);*/
    background: var(--hsl-secondary);
}
input[type=range].player-propertiesSlider::-ms-track {
    background: transparent;
    border-color: transparent;
    border-width: 9.15px 0;     /*border-width: 6px 0;*/
    color: transparent;
    width: 100%;
    height: 11.7px;
    cursor: pointer;
}
input[type=range].player-propertiesSlider::-ms-fill-lower {
    background: #f3f2f2; /* #f2f2f2; */
    border: 0.4px solid #908376;
    border-radius: 4px;
}
input[type=range].player-propertiesSlider::-ms-fill-upper {
    background: #ffffff;
    border: 0.4px solid #908376;
    border-radius: 4px;
}
input[type=range].player-propertiesSlider::-ms-thumb {
    width: 13px;
    height: 28px;
    background: #3B3530;     /*background: #514942;*/
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 0px;
    /*Needed to keep the Edge thumb centred*/
}
input[type=range].player-propertiesSlider::-ms-thumb:active,
input[type=range].player-propertiesSlider::-ms-thumb:focus {
    /*-webkit-box-shadow: 0 0 4px 1px hsla(var(--brown-7), .36);*/ 
    -webkit-box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.36); 
    /*box-shadow: 0 0 4px 1px hsla(var(--brown-7), .36);*/
    box-shadow: 0px 0px 4px 1px rgba(26,24,22,0.36);
    background: #3366ff;
}
input[type=range].player-propertiesSlider:focus::-ms-fill-lower {
    background: #fffff;
}
input[type=range].player-propertiesSlider:focus::-ms-fill-upper {
    background: #fffff;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
    /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
    input[type=range].player-propertiesSlider {
        margin: 0;
        /*Edge starts the margin from the thumb, not the track as other browsers do*/
    }
}



/* IE needs track colors defined for both before and after the thumb passes */
input[type="range"].player-propertiesSlider::-ms-fill-upper {background: purple;}
input[type="range"].player-propertiesSlider::-ms-fill-lower {background: yellowgreen;}

/* IE has it's own special default track w/tick marks that need to be hidden */
input[type="range"].player-propertiesSlider::-ms-track {
    border: none;
    color: red; /*transparent*/
}



/*
 === PLAYER-STUFEN ===
*/

/* — PLAYER-STUFE: Audio — */
.playerstyle-audio {
    max-width: 475px;
    margin: 1.75em auto;
}
@media (min-width: 467px) {
    .panel-hr .playerstyle-audio {
        background-color: var(--hsl-white);
    }
}
@media (min-width: 467px) and (max-width: 767px) {
    .playerstyle-audio {
        max-width: 484px;
    }
    .playerstyle-audio .audio-player {
        max-width: 415px;
    }
}
@media (min-width: 768px) {
    .playerstyle-audio {
        max-width: 685px;
    }
}
/* — PLAYER-STUFE: Audio + Text — */
.playerstyle-audio.audio-text {
    padding: 1em .75em 1.5em;

    margin-top: 2.25em;
    margin-bottom: 2.25em;

    background: #fafad2;
    border: dashed .12em #f5deb3;
    border-radius: .75em;
}

section .playerstyle-audio.audio-text,
.panel-hr .playerstyle-audio.audio-text {
    background: none;
    border: none;
}
section .playerstyle-audio.audio-text {
    padding-left: 0;
    padding-right: 0;
}
.panel-hr .playerstyle-audio.audio-text {
    padding-left: 0.25em;
    padding-right: 0.25em;
}

/* — PLAYER-STUFE: Tab-Scroll / Material = Playerstyle-Tab — */
.playerstyle-tab {
    border: solid 0.17em var(--hsl-gray-2);
    background: white;
}
@media (min-width: 768px) {
    .tab-content {
        margin-top: 2.5em;
    }
}
.playerstyle-tab ul > li {
    background-image: none;
}
.playerstyle-tab nav {
    border: none;
}
.playerstyle-tab .navbar-inverse .navbar-collapse {
    border-color: transparent;
}
.playerstyle-tab .navbar-inverse .navbar-toggle {
    border-color: var(--hsl-gray-7);
}
.playerstyle-tab .navbar-inverse .navbar-toggle:hover,
.playerstyle-tab .navbar-inverse .navbar-toggle:focus {
    background-color: var(--hsl-gray-1);
}
.playerstyle-tab .navbar-toggle.small {
    color: var(--hsl-secondary-light)
}
.playerstyle-tab .nav > li, ul.navbar-right.nav.navbar-nav.nav-sp li {
    margin-bottom: .35em;
}


.playerstyle-tab .navbar-nav li a,
.playerstyle-tab .navbar-nav li.active a {
    border-top: none;
}
.playerstyle-tab .navbar-nav li a {
    background-color: var(--hsl-gray-2);

    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.playerstyle-tab .navbar-nav .glyphicon {
    padding-right: .5em;
    float: left;
}
@media (min-width: 768px) {
    .playerstyle-tab .navbar-nav .glyphicon {
        padding-left: .5em;
        float: right;
    }
}



.playerstyle-tab .audio-player {
    max-width: 96%;
    margin-top: .75em !important;
    margin-bottom: 1.25em !important;
}
@media (min-width: 768px) {
    .playerstyle-tab .audio-player {
        margin-top: 1.5em !important;
    }
}

.panel-hr .playerstyle-tab .tab-content p img
 {
   /* .panel-hr.panel-song .playerstyle-tab .tab-content .tab-pane p img */
  margin: auto;
}


/* - Tab-Scroll / Material: material-course only - */
.playerstyle-tab.tab-course {
    margin-top: 3em;
    margin-bottom: 3em;
    border-radius: .75em;
    border: solid .15em var(--hsl-gray-7);
    background-color: var(--hsl-gray-3);
}
.playerstyle-tab.tab-course .tab-content {
    border-color: var(--hsl-gray-3);
    margin-left: .75em;
    margin-right: .75em;
}

.playerstyle-tab.tab-course .navbar-nav li a {
    background-color: var(--hsl-gray-1);
}
.playerstyle-tab.tab-course .navbar-nav > a:hover,
.playerstyle-tab.tab-course .navbar-nav > a:focus,
.playerstyle-tab.tab-course .navbar-nav li a:focus,
.playerstyle-tab.tab-course .navbar-nav li a:hover {
    background-color: var(--hsl-primary);
    color: var(--hsl-white);
}
.playerstyle-tab.tab-course .navbar-nav > .active > a, 
.playerstyle-tab.tab-course .navbar-inverse .navbar-nav > .active > a:hover, 
.playerstyle-tab.tab-course .navbar-inverse .navbar-nav > .active > a:focus {
    background-color: var(--hsl-secondary);
}

.playerstyle-tab.tab-course .audio-player {
    max-width: 100%;
}
.playerstyle-tab.tab-course .tabscroll,
.playerstyle-tab.tab-course img {
  border-radius: .25em;
}
.tabscroll,
.playerstyle-tab.tab-course .tab-content p {
    margin-bottom: .85em;
}

.playerstyle-tab-fs {
  padding: 0;
  overflow-y: scroll;  
}

.playerstyle-tab-fs-iphone {
  position:absolute;
  top: 0;
  left: 0;
  right:0;
  /* bottom:0; */
  z-index: 9999;
  margin: 0 !important;  
  visibility: visible;
}

/*
=== TAB-PLAYER ===
*/
.tabscroll {
    padding: 1em 1em 1.75em;
    background: white;
}
.tabPlayer {
    height: 405px;
    width: 100%;
}
.harpClef {
    float: left;
    margin-top: 20px;
    display: inline-block; 
    vertical-align: middle;
}
.tabbox {
    /* background-color: var(--hsl-white); */
    /* background-color: var(--hsl-red); */
    /* border: 1px solid var(--hsl-gray-17); */               
    vertical-align: middle; 
    border-left: .45em solid var(--hsl-secondary);		
    overflow: hidden;
    width: auto;   
}
.tabbox img {
    max-width: inherit;
}

.tabcanvas {
	width: inherit;
	height: inherit;
	max-width: inherit;
}

/* — Mobile: Groesse Tab-Player — */
@media (max-width: 500px) {
    .tabbox, 
    .harpClef {
        height: 57vh;
    }
    .tabscroll {
        height: 66vh;
    }
}
@media (min-width: 501px) and (max-width: 767px) {
    .tabbox,
    .harpClef {
        height: 65vh;
    }
    .tabscroll {
        height: 74vh;
    }
}
@media (max-width: 767px) {
    .tabbox,
    .harpClef {
        display: flex;
    }
    .harpClef {
        margin-top: 1vh;
    }
}
@media (min-width: 768px) {
    .harpClef {
        height: 400px;
        margin-top: 0.5em;
    }
    
    
}

.audio-player input:focus-visible,
button:focus-visible {
  outline: 4px dashed darkorange !important;
}