/* CSS Document */


@media (orientation: portrait) {
		/* Styles pour les écrans en mode portrait */
		body {
				background-size: auto 100%;
		}
}

@media (orientation: landscape) {
		/* Styles pour les écrans en mode paysage */
		body {
				background-size: 100% 100%;
		}
}


    body {
        font-family: sans-serif;
        font-size: 100%;
        background-image: url("../slideshow/1.jpg");
        background-repeat: no-repeat;
        color:white;
        background-color:#110d0f;
        background-attachment: fixed; 
      
    }
    
    body, body * {
        padding:0;
        margin:0;
    }
    
    #sub_body {
        max-width: 100vmin;
        padding: 0;
    }
	
	button, h1, h2, h3, h4, h5, div, p, label {
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			outline: none;
	}
	
    
    #header {
width: 100vw;

  background-color: white;
    box-shadow: 0vmin 1vmin 1vmin #fff;
	  opacity: 90%;
	


  padding: 3vmin 2vmin 0vmin 3vmin;
  position: absolute;
height: 15vmin;
    }
	
	#header span.warning {
		color:red;
		font-size: 2vmin;
		font-weight:	bold;
		
	}
	
	div#brandWrapper {
display: grid;
  grid-template: auto auto / auto auto;
  grid-gap: 0;
  justify-content: left;
	}
	
	#h1Wrapper {
display: grid;
  grid-template: auto / auto auto auto auto auto;
  justify-content: left;
  line-height: 9vmin;
  color:black;
  opacity: 100%;
	}

     
    #content {
        margin-top: 17vmin;
        position: absolute;
    }
    
	#logo {
			font-size: 10vmin;
			line-height: 14vmin;
			color: #38739e;
			background-color: black;
			border-radius: 2vmin;
			font-family: sans-serif;
			width: 14vmin;
			display: inline-block;
			height: 14vmin;
			text-align: center;
			margin-right:2vmin;
			box-shadow: 0.2vmin 0.2vmin 1vmin #000;
			grid-row: 1 / span 2;
			font-weight: bold;
			opacity: 100%;
	}
	
	.other {
		font-size: 7vmin;
line-height: 9vmin;
font-variant-caps: small-caps;
font-weight: normal;
	}

	.mhz {
		font-size: 9vmin;
line-height: 8vmin;
	}

    
    h1 {
        color: black;
       padding:0;
       text-shadow: 0.2vmin 0.2vmin 1vmin #000;
       font-size: 8vmin;
    }
    
     
    
    h2 {
padding: 0;
  font-size: 4vmin;
  color: #074c8f;
text-shadow: 0.2vmin 0.2vmin 1vmin #666;
  padding-left: 0.7vmin;
    }
    

	
    h3, #file_title, span.col2 {
		color: #278add;
    }
	
   
    h3 {
        font-size: 3.5vmin;
		margin-bottom: 0.5vmin;
    }
    
    h5 {
margin: 3vmin 0 0 0;
  font-size: 3.5vmin;
  font-weight: normal;
  color: black;
  text-shadow: 0.2vmin 0.2vmin 0.7vmin #777;
      }
	  
	  h5::first-letter {
color: #000;
  text-shadow: 0.2vmin 0.2vmin 0.5vmin #000;

}
	  
	  
	  hr {
		  
box-shadow: 0vmin 0.2vmin 0.5vmin #aaa;
  margin: 0 0 2vmin 0;
  border-width:0.2vmin;
	  }
	  
	  select {
		  height: 4vmin;
		  
	  }
	
	p.warning {
			color:red;
			font-size: 2.7vmin;
			margin-top:6vmin !important;
			display:block;
			text-align:center !important;
	}
	
	span.warning {
			color:red;
			font-size: 2.7vmin;
	}
	

    
    #displayMenuBtn {
			
    }
	
	    #displayInfosBtn {
			
    }
	
	
    #displayMenu {
color: black;
  position: absolute;
left: 75vmin;
  top: 5vmin;
  cursor: pointer;
  /*text-shadow: 0.2vmin 0.2vmin 1vmin #000;*/
  display: grid;
  grid-template: auto auto / auto auto;
  grid-gap:2vmin;
}


   #displayMenu button {
color: black;
  text-decoration: none;
  background-color: #38739e;
  text-align: center;
  font-size: 2.5vmin;
  width: 10vmin;
  height: 5vmin;
 /* line-height: 4vmin;*/
  /*box-shadow: 0.2vmin 0.2vmin 1vmin #000;*/
  border-radius: 1vmin;
  font-weight: bold;
  user-select: none;
  opacity: 100%;
/*margin: 0 0 1.6vmin 1.1vmin;*/
display: block;
   }
   

   

    
	
    
    input, button, select {
    cursor: pointer;
    }
	
	
    div#content label {
      display: block;
      font-weight: bold;
      color: white;
    }
	
    
    #ui_player, #ui_file, #ui_harmonics{
        /* box-shadow: 1vmin 1vmin 1vmin 0vmin #333; */
        padding: 2vmin;
        border-radius: 2vmin;
        margin: 4vmin 4vmin 4vmin 3vmin;
        background-color: black;  
        opacity:80%;     
width:	90vmin;		
    
    }
    
    
    #ui_player {
        display: grid;
        grid-template: auto / auto ;
        grid-gap: 0;
        justify-content: stretch;
 
    }
	
	 #ui_master_wrapper {
        display: grid;
        grid-template: auto /auto auto auto;
        grid-gap: 2vmin;
        justify-content: space-between;
 
    }
	
    #ui_player label {
        font-size:3vmin;
 
    }
	
	#ui_harmonics_wrapper .div_labels {
		font-size : 3vmin;
		font-weight: bold;
		text-align:left;
		margin-bottom: 1vmin;

	}
	
		#ui_harmonics_container label {
		font-size : 2.3vmin;
		font-weight: bold;
		margin-top: 1vmin;
	}
	
	#ui_harmonics_wrapper span {
		font-size : 2vmin;
		font-weight: normal;
		display: block;

	}
	
    
    
     #controls {
        display: grid;
        grid-template: auto auto/auto auto;
        justify-content: left;
        grid-gap: 2vmin;
    }
    
    
       #controls button {
        font-size: 7vmin;
        width: 12vmin;
        background-color: steelblue;
        color: white;
        border-radius: 2vmin;
        height: 12vmin;
    }
	
    #playBtn, #pauseBtn , #stopBtn , #rewindBtn , #forwardBtn {
			background-image: url("../img/buttons.png");
			background-repeat: no-repeat;
			background-blend-mode: multiply;
    }
	
    
    #pauseBtn {

			background-position-x: -26vmin;
			background-size: 46vmin;
			background-position-y: -18vmin;
    }
	
	
	#playBtn {
			background-position-x: -22vmin;
			background-size: 54vmin;
			background-position-y: -22vmin;
    }
	
    #stopBtn {
			background-position-x: -9vmin;
			background-size: 45vmin;
			background-position-y: -17.5vmin;
    }
	
    #rewindBtn {
			background-position-x: 1vmin;
			background-position-y: -17.5vmin;
			background-size: 45vmin;
    }
	
    #forwardBtn {
			background-position-x: -35vmin;
			background-position-y: -17.5vmin;
			background-size: 45vmin;

	}
    
    #master_bus {
        display: grid;
        grid-template-rows: 3vmin auto 3vmin auto auto;
        justify-items: left;
        padding: 0;

    }
    
    #master_bus input[type=range] {
        width: 100%;

    }
    
    #master_bus_loop {
			display: grid;
			grid-template-columns: auto auto;
			justify-items: center;
			align-content: center;
			width: 100%;
    }
    
    #master_bus_loop label {
        

    }
    
    #master_bus_eq  {
        display:grid;
        grid-template: auto auto/ auto;
        grid-gap:1vmin;
    }
    
    #master_bus_eq .div_labels {
		font-weight: bold;
        text-align:center;
		font-size:3vmin;
    }
    
    #master_bus_eq_bands {
        display: grid;
        grid-template: auto auto / auto auto auto auto auto;
        justify-items: center;
        grid-gap: 2vmin;
    }

    #master_bus_eq_bands label {
        font-size: 2.3vmin;
        text-align:center;
    }
 
    #master_bus_eq_bands input, #ui_harmonics_container input {
        /*transform: rotate(270deg);*/
        writing-mode: vertical-lr;
        direction: rtl;
        vertical-align: middle;
        height: 17vmin;
    }
	
	
#ui_harmonics_container  {
        display: grid;
		grid-template: auto / auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
        justify-content: stretch;
		text-align: center;
    }
	
#ui_harmonics_container  sup {
		font-size: 1.3vmin;
		font-style: italic;
    }
	
#ui_harmonics_container  sub {
		font-size: 1.5vmin;
		font-style: italic;
    }
	
#ui_harmonics_container  small {
		font-size: 1.5vmin;
		vertical-align: bottom;
    }
	
#ui_harmonics_container input {

    }
    
#ui_harmonics_header_wrapper {
		display: grid;
		grid-template: auto / auto auto;
	
}

#harmonicsAmplitudesBtn {
	justify-self: right;
	margin: 0 1vmin 2.3vmin 0;
}
    
     #ui_file {
        display:none;
        padding-bottom:5vmin;
    }
    

    
    
    

    
    
    
    
    
    #file_title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }  
    
     #file_title:first-letter {
        text-transform: capitalize;
    }    
	
    #file_infos {
        margin: 0 0 2vmin 0;
		font-size:3vmin;
     
    }  
    

    
    div#tracks div, div#col_headers {
        display: grid;
		grid-template: auto / 2.5vmin 27vmin 6vmin 6vmin 5vmin 12vmin 12vmin 5.5vmin;
        grid-gap:2vmin;
        justify-content: left;
        border-bottom: solid #ccc 0.2vmin;
    }
    
    div#tracks div *, div#col_headers label {

    }
    
    div#tracks {
        margin-bottom:3vmin;
    }
    
    div.channel, div#col_headers {
        width: fit-content;
        font-size: 2.4vmin;
        height: 6vmin;
        line-height: 6vmin;

    }
	
    div#col_headers  {
        display:none;
    }
    
    div#col_headers div {
		font-weight: bold;
		text-align:left;
		font-size: 2.4vmin;
    }
	
    div#col_headers  .head_octave, .head_mute, .head_solo {
        text-align:center;
    }
	
    div#col_headers  .head_notes {
        text-align:right;
		        font-size: 4vmin ;
    }
    
	
 .channel  {
			font-weight: bold;
    }
	
   .channel  .col1{
			font-size:2.8vmin;
    }
    
    .channel .col2 {
        white-space: nowrap;        
        overflow: hidden;           
        text-overflow: ellipsis; 
        margin-right:0 !important;
		font-size:2.7vmin;
    }
    
    .channel .col2:first-letter { 
        text-transform: capitalize; 
    }
    
	    .channel .ui_track_instrument_buttons {
			height: 4vmin;
			margin-top: 1vmin;
	}
	
	    .channel .ui_track_octave_buttons {
			height: 4vmin;
			margin-top: 1vmin;
	}
    
       .channel  .ui_track_mute_buttons, .ui_track_solo_buttons {
        align-self: center;
        border:none !important;
    }
    
        .channel .ui_track_mute_buttons {

        text-align:center;
    }
    
       .channel  .ui_track_solo_buttons {


    }
    
  
    
       .channel  .ui_track_volume_buttons, .ui_track_pan_buttons, .ui_track_tone_buttons
    {

    }
    
      .channel   input.ui_track_volume_buttons, input.ui_track_pan_buttons, input.ui_track_tone_buttons
    {
        padding: 0 1vmin;
    }
    
       .channel  .col2 {
        font-weight:normal;
		text-shadow: 0vmin 0vmin 0vmin white;
    }
	
       .channel  .col8 {
        font-weight:normal;
        color: white;
    }
    
     .channel .col8 {
        text-align:right !important;
    }

    
    
    
    
   
    
    
div#windowPopup {
  display: none;
  position: fixed;
  z-index: 99;
   left: 0;
  top: 0;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
}    
    
    
    
    
div#popupContent {
padding: 3vmin 4vmin 8vmin 4vmin;
  border-width: 1vmin;
  border-style: solid;
  overflow: auto;
  word-break: break-word;
  border-radius: 3vmin;
  font-size: 2.8vmin;
  background-color: #f0f0ff;
  color: black;
  width: 79vmin;
  box-shadow: 0.5vmin 0.5vmin 1.3vmin #555;
  max-width: 80vmin;
  left: 5vmin;
  position: relative;
  top: 21vmin;
  margin-bottom:30vmin;

}

div#popupContent h6 {

    font-size: 2.8vmin;
}

div#popupContent p {

   
}

div#popupContent label {
    color:black;
    font-weight: normal;
}


#infosContainer, #listContainer {
	display:none;
}

#listContainerWrapper .list_header_row {
	color: #074c8f;
	
}

#listContainerWrapper .list_header_row,
#listContainerWrapper .list_row_impair, 
#listContainerWrapper .list_row_pair{
			display:grid;
			grid-template: auto / 50vmin 25vmin auto;
			justify-content: space-between;
			border-bottom: 0.1vmin solid #ccc;
			padding: 0 0.5vmin;
}

#listContainerWrapper .list_row_impair {
	background-color: #eee;
}

#listContainerWrapper .list_row_pair{
	background-color: #abe4f1;
}

#listContainerWrapper .list_dates {
	font-size:2.6vmin;
}

#listContainerWrapper  *{
  line-height: 5vmin;
}

.ui_list_title_buttons, .ui_list_delete_buttons {
	cursor:pointer;
}

.ui_list_title_buttons {
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



#infosContainer p {
	margin: 1vmin 0 0 0;
	text-align:justify;
}

#infosContainer strong {

	color: #074c8f;
}


input#fileBtn {
		font-size:2.9vmin;
		margin: 1vmin 0 0 0;
		width: 100%;
}

select#demoBtn {
	width:45vmin;
}


.menu_wrapper {
    display: grid;
    grid-template: auto auto / auto auto ;
    justify-content: space-between;
    grid-gap: 1vmin;
}

.menu_wrapper select, .menu_wrapper input  {
font-size:2.9vmin;
    
}

div#intervals_label, div#frequencies_label {
    margin-top: 1vmin;
    margin-bottom: 1vmin;
	
}

div#intervals, div#notes_frequencies {
	white-space: normal;
	  word-wrap: break-word;
	  overflow-wrap: break-word;
	  width: 98%;
	  background-color: white;
	  border: 0.2vmin inset black;
	  padding:0.7vmin;

}

div#notes_frequencies_section {
		display:none;
}

div#notes_frequencies {
		column-count: 4; 
}

div#notes_frequencies div {
			overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  div#comments, div#temperament_infos {
        margin: 4vmin 0 0 0;
        display:none;
        
  }  
  
    div#comments .div_labels {
			font-size: 3vmin;
			font-weight: bold;
			text-align: left;
			margin-bottom: 1vmin;
       
  }  
    
p#comments_text {
	font-size:2.6vmin;
	
}


#copyrights {
      font-size: 2vmin;
      margin: 5vmin 3vmin;
}