/** --------  GENERAL BLOCK STYLES --------- **/

* {
  box-sizing: border-box;
}

#main {
    width: 94%;
    margin-left: 3%;
    margin-right: 3%;
    position: fixed;
    z-index: 120;
    overflow: hidden;
    background-color: white;
    top: 0px;
    left: 0px;
    display: none;
}

.conteneur {
    height: auto;
}

.resp {
    float: left;
    position: relative;
}

.notMobile {
    color: white;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}



/** -------- HEADER SECTION  --------- **/

#header h1, h3 {
    text-align: center;
}

#header {
    float: left;
    height: auto;
    overflow-y: visible;
}

.composer{
    height: 50px;
}

.headerBar {
    margin: 10px 0px 0px 0px;
    padding: 3px;
}

#barContener{
    margin: auto; 
    overflow:hidden;
    cursor: pointer;
}

#progressBar {
    width: 55%;
    margin: auto;
    height: 100px;
    border: grey solid 1px;
}

#work_composer_name{
    font-size: 20px;
    margin-top:0px;
}

.progress {
    height: 30px;
}

#bar{
    background-color: #FF8F8F;
}

.time{
    padding: 0px 20px;
    font-size: 18px;
    margin: 0px;
    overflow: visible;
}

.time:first-of-type{
    text-align: right;
}

.time:last-of-type{
    text-align: left;
}

.hide{
    display:none;
}

#markersOptionsBox{
    display:flex; 
    flex-direction: row-reverse; 
    float:right; 
}

.measureIndicator{
    width:1px; 
    height: 100%; 
    cursor: pointer;
    position: inherit; 
    float: left;
    border-left-style: solid; 
    border-left-color: rgba(105, 105, 105, 0.3);
    border-left-width: 3px;
    display:none;
}

.measureInterval{
    height: 100%; 
    position: inherit; 
    float: left;
    display:none;
}

.measureInterval:nth-of-type(1) {
    margin-left: 0%;
    width: 0%;
    background-color:#8D8787; 
    border-radius: 5px 0px 0px 5px;
}

.measureInterval:nth-of-type(2) {
    margin-left: 100%;
    width: 0%;
    background-color:#8D8787; 
    border-radius: 0px 5px 5px 0px;

}

.blocksInterval{
    position: relative;
    display: none;
}

.blocksInterval:nth-of-type(1){
    float:left; 
}
.blocksInterval:nth-of-type(2){
    float:right; 
}

#measureMarkerContainer{
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 0px; 
    bottom: 0px;
}

.measureIndicator:hover{
    border-left-width: 6px;
    border-left-color: rgba(165, 81, 81, 0.671);
}

.measureIndicator .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .measureIndicator .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  
  .measureIndicator:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }


.measureNumber{
    background-color: rgba(165, 81, 81, 0.671);
    transition: 0.25s;
    color: white;     
    cursor: pointer;
    border-radius: 5px;
    font-size: 14px;
    padding: 1px 4px;
}



/** -------- slider style -----------------**/

.slidecontainer {
  width: 86%;
  margin: 8%;
  position: relative;
  float: left;
  padding: 5px 0px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
 /** background: #4CAF50;**/
  cursor: pointer;
  border: 4px solid white;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  /**background: #4CAF50;**/
  cursor: pointer;
  border: 4px solid white;
}

/** -------- SCORE SECTION STYLING --------- **/

#score {
    overflow-x: hidden;
    overflow-y: hidden;
    margin: 1%;
    display: block;
    width: 81.33%;
    box-shadow: 0 4px 8px 0 rgba(255, 124, 124, 0.2), 0 6px 20px 0 rgba(255, 124, 124, 0.19);
}

/**      Interactive score bar styling        **/


#draggingBar{
    cursor: -webkit-grabbing; cursor: grabbing;
    display:none;
}

#mainBAR{
    cursor: -webkit-grab; cursor: grab;
}


.rotated {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari 3-8 */
    transform: rotate(90deg);
  }

#range1{
    position: absolute;
    width: 100%;
    height: auto;
    top: 15px;
    right: 15px;
    z-index: 300;
}



/** -------- RIGHT SECTION STYLING --------- **/

#audio {
    /** relative to the complete right bar **/
    position: relative;
    float: right;
    background-image: linear-gradient(#ff4d4d, #FF8F8F);
    padding-top: 15px;
    z-index: 5;
} 

#tabPistes {
    /** ul contener **/
    float:left;
    position: relative;
    list-style-type:none;
    padding: 0px;
    margin: 0;
}

#quitterConteneur{
    /** leaving button container **/
    bottom: 0px;
    height: auto;
    width: 100%;
    position: absolute;
    right: 0px;
    padding-bottom: 15px;
}

/** Buttons **/

.button {
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    border: white solid 2px;
    background-color: white;
}

.buttonMesure{
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    background-color: rgba(165, 81, 81, 0.671);
    color: white;
    padding: 1px 4px;
    font-size: 13px;
    position: relative; 
 /*   float: right;    */
    height: auto;
 /*   width: auto;   */
    transition: 0.5s;
    border-width: 1px;
    border-style: solid;
    border-color: white;
}

#buttonMesure { 
    margin-right:16.66%;
    float: right;
}

.buttonMesure:hover {
    color: rgb(165, 81, 81);
    background-color: white;
    border-color: rgba(165, 81, 81, 0.671);
}

.selectionMesure{
    display:none;
    position:relative;
    float:right;

    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    background-color: white;
    color: rgba(165, 81, 81, 0.904);
    padding: 1px 4px;
    font-size: 13px;
    height: auto;
    width: auto;
    transition: 0.5s;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(165, 81, 81, 0.671);
}

.infoMesure{
    text-align: center;
    border-radius: 5px 0px 0px 5px;
    border-width: 1px 0px 1px 1px;
    border-color: rgba(165, 81, 81, 0.671);
    border-style: solid;
}

.imgMenuCont:hover {
    color: #ff4d4d;
    background-color: rgb(255, 218, 219);
    transition: 0.3s;
}

#jouer {
    width: 86%;
    margin: auto;
    padding: 10px;
    min-width: 60px;
    font-weight: 700;
    font-size: 15px;
    background-color: white;
}

#quitter {
    width: 86%;
    margin: auto;
    padding: 10px;
    min-width: 60px;
    font-weight: 700;
    font-size: 15px;
    background-color: white;
}

.threeButtons {
    /** Fastforward, restard, etc **/
    width: 100%;
    padding: 2% 7% 2% 7%;
}

/** Tracks buttons section **/
#tabPistes{
    overflow-y: auto;
    overflow-x: hidden;
}

.piste {
    width: 45%;
    margin: 1% 0% 1% 2.5%;
    font-size: 18px;
    height: 30px;
    overflow: hidden;
    transition: 0.4s;
}

.piste:hover{
    background-color: rgb(255, 223, 223);
}
.piste:last-of-type{
    margin: 1% 2.5% 1% 2.5%;
}

.piste > img{
    height: auto;
    max-width: 100%;
    width: auto;
    max-height: 100%;
    margin: auto;
    position: relative;
    padding: 2px;
}

#pistesConteneur{
    height: auto;
}

.pisteConteneur{
    width: 86%;
    margin: 1% 7% 0% 7%;
    padding: 10px;
    min-width: 60px;
    height: auto;
    border-radius: 5px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    transition: 0.4s;
}

.pisteConteneur:hover{
    background-color: rgba(160, 83, 83, 0.486);
}

.pisteConteneur > div:first-of-type{
  /*  border-bottom: solid white 1.5px;
    border-top: solid white 1.5px;   */
    
    margin-bottom: 2px;
    color: white;
    font-size: 15px;
    text-align: center;
}

/** --------------------  scroling bar style ----------------------  **/
/** Scroll bar audio options **/

#tabPistes::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
    border-radius: 13px;
    width: 7px;
}

#tabPistes::-webkit-scrollbar
{
    width: 6px;
    border-radius: 13px;
    background-color: #F5F5F5;
    width: 7px;

}

#tabPistes::-webkit-scrollbar-thumb
{
    background-color: #b89795;
    border-radius: 13px;
    width: 7px;
}

/** Scroll bar score **/

#score::-webkit-scrollbar-track
{
    background-color: #F5F5F5;

    width: 7px;
}

#score::-webkit-scrollbar
{
    width: 6px;
    background-color: #F5F5F5;
    width: 7px;

}

#score::-webkit-scrollbar-thumb
{
    background-color: #b89795;
    width: 7px;
}



/** -------- IMAGES STYLE --------- **/


#main img{
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

.scoreButtons {
    cursor: pointer;
    height: 45px; 
    width: auto; 
    position: relative;
    border-radius: 13px;
    padding: 8px;
}

.scoreButtons:hover{
    background-color: #FFEFEF;
}

.IMGbuttonConteneur {
    text-align: center;
    opacity: 0.7;
}

.imgMenu {
    height: auto;
    width: 40%;
    position: relative;
}

.imgMenuCont{
    width:31.5%;
}

.imgMenuCont:nth-of-type(2) {
    margin: 0px 2% 0px 2%;
}