@font-face {
  font-family: SFPRO;
  src: url(fonts/inter-latin-400-normal.woff2) format("woff2"); /* 2026 : Inter (OFL) remplace SF Pro, non redistribuable */
}

.sortEl{
  width:fit-content;
  float:left;
}

:root {
    /* 2026 : unité de taille plafonnée. Vaut 1vw jusqu'à un format 2,2:1
       (16:9 / 16:10, barres du navigateur comprises) ; au-delà (écrans
       21:9, 32:9) elle suit la hauteur pour garder des proportions correctes. */
    --u: min(1vw, 2.2vh);
    --main-height: 100vh;
    --main-width: 100vw;
    --main-left-height: 80vh;
    --main-left-inner-height: 95%;
    --main-left-width: 100vw;
    --main-right-height:  80vh;
    --main-right-width: 0vw;
    --primary-color-one:#84C259;
    --primary-color-two:#b7b7b7;
  }

body{
  font-family: 'SFPRO', sans-serif;
  
}


input[type=submit]{
  background-color: var(--primary-color-one);
  border: none;
  color: white;
  border-radius:5px;
  cursor:pointer;
}


#main{
    display: inline-flex;
    flex-flow: row wrap;
    justify-content:space-evenly;
    width:var(--main-width);
    height:var(--main-height);
    /*background-color:bisque;*/
    font-family: 'SFPRO', sans-serif;
    overflow: hidden;
}

#main_left{
    display: inline-flex;
    flex-flow: row wrap;
    /*justify-content:space-evenly;*/
    width:var(--main-left-width);
    height:var(--main-left-height);
    background-color:rgb(255, 255, 255);
}

#main_right{
  
  /*display: flex;
  flex-flow: row wrap;
  align-items: center;  
  width: var(--main-right-width);
  height: var(--main-right-height);
  background-color: rgb(255, 255, 255);
  font-size: 12px;
  align-content: flex-start;
  justify-content: center;*/
  display:none;
}

#top{

    display:flex;
    flex-flow: row nowrap;
    justify-content:space-evenly;
    width:100vw;
    height:6vh;
    /*background-color: cornflowerblue;*/
    border-bottom:1px solid  rgb(226, 226, 226);
    margin-bottom: 1vh;
}

#top_left{

    display:flex;
    flex-flow: row nowrap;
    /*justify-content:space-evenly;*/
    width:40%;
    height:100%;
    background-color: rgb(255, 255, 255);
}

#top_center{

    display:flex;
    flex-flow: row nowrap;
    justify-content:space-evenly;
    width:50%;
    height:100%;
    background-color: rgb(255, 255, 255);
}

#top_right{

    display:flex;
    flex-flow: row nowrap;
    justify-content:end;
    align-items: center;
    width:50%;
    height:100%;
    background-color: rgb(255, 255, 255);
}


#left{

    display:flex;
    flex-flow: column wrap;
    justify-content:start;
    
    width:7vw;
    height:var(--main-left-inner-height);
    background-color: rgb(255, 255, 255);
    border-bottom: 1px solid rgb(230, 230, 230);
    box-sizing: border-box;
}



#center{
 
    display:flex;  
    flex-flow: row wrap;
    justify-content:flex-start;  
    width:75vw;
    height:var(--main-left-inner-height);
    background-color: rgb(252, 252, 252);
    /*border-top-left-radius: 5px 5px;
    
    border: 1px solid rgb(226, 226, 226);
    border-width: 1px 1px 0 1px;
    box-sizing: border-box;*/
    position:relative;
    
}

#center_left{
    
    display:flex;   
    flex-flow: column; 
    width:70%;
    height:95%;
    
    overflow: hidden;
    
}

#center_right{

    display:flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: space-between;
    width:30%;
    height:95%;
    background-color: rgb(255, 255, 255);}

#center_bottom{

    display:block; 
    /*position:relative;   */
    width:100%;
    height:20vh;
    
    overflow-x:scroll;
    overflow-y:hidden;
    /*background-color: rgb(183, 255, 183);*/
}

#right{

    display:flex;
    flex-flow: column wrap;
    justify-content:flex-start;
    width:16vw;
    height:var(--main-left-inner-height);
    /*background-color:rgb(250, 250, 250);
    border-top-right-radius: 10px 10px;
    border: 1px solid rgb(226, 226, 226);
    border-width: 1px 1px 1px 0;
    box-sizing: border-box;*/
    overflow-y:auto;
    overflow-x:hidden;
    position:relative;
    
}

.rightParameters{
    display: flex;
    flex-flow: column wrap;
    align-content: center;
    text-align: center;
    padding-top: 2%;
    width:16vw;
    border-radius:5px;
    border: 1px solid rgb(226, 226, 226);
    border-width: 1px 1px 1px 1px;
    box-sizing: border-box;
    margin-bottom:1vh;
    background-color: rgb(252, 252, 252);
    
}

#silence{

    /*width:50%;*/

}


#bottom{

    display:flex;
    flex-flow: row nowrap;
    justify-content:space-evenly;
    width:100vw;
    height:3vh;
    background-color: rgb(255, 255, 255);
    border-top: 1px solid rgb(226, 226, 226);
    z-index:2;
    vertical-align:bottom;
    text-align:center;
    font-size:10px;
    padding-top: 1vh

}

#timer{
    display:flex;
    align-items: center;
    flex-flow: row nowrap;
    justify-content:space-evenly;
    width:100%;
    /*margin-right: 2vw;*/
    font-size: calc(1.25 * var(--u));
    font-family: 'SFPRO', sans-serif;
    font-weight: bold;
}



#player_controls{
    display:flex;
    align-items: center;
    flex-flow: row wrap;
    justify-content:space-evenly;
    width:17vw;
    height:15vh;
    /*margin-top:15vh;*/
    border-radius:5px;
    border: 1px solid rgb(226, 226, 226);
    border-width: 1px 1px 1px 1px;
    box-sizing: border-box;
    background-color: rgb(252, 252, 252);
    

}

#videoSize{

  display:flex;
    align-items: start;
    flex-flow: row wrap;
    justify-content:space-evenly;
    width:12vw;
    height:13vh;
    /*margin-bottom:5vh;*/
    border-radius:5px;
    border: 1px solid rgb(226, 226, 226);
    border-width: 1px 1px 1px 1px;
    box-sizing: border-box;
    background-color: rgb(252, 252, 252);
}

/*.control_btn{
   display:flex;
   align-items: center;
   height:100%;
   justify-content:space-evenly;

}*/

.control_btn img{

    height: 4vh;

}


#leftTools{

   display:none;
    display:flex;
    align-items: center;
   
    height:5vh;
    width:100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;    
  border: 1px solid rgb(226, 226, 226); 
  border-width:1 1 0 1; 
  box-sizing: border-box;
  background-color: inherit; 
  padding-bottom: 1vh; 

    

}


#leftTools .sectionTitle{
  width:75%;
  font-size: 2.5vh;
}


.left_btn{
    margin:calc(0 * var(--u)) calc(0.5 * var(--u)) calc(0 * var(--u)) calc(0.5 * var(--u));
    cursor:pointer;
}
.left_btn img{

  height: calc(1 * var(--u));
    user-select: none;
    margin-top: 0.75vh;

}

#logo{
    display:flex;
    align-items: center;
    height:100%;
    
 
 }


#logo img{

    height: calc(3 * var(--u));

}



#timeline{

    height:16vh;
    width:5000px;
    /*background-color:rgb(237, 237, 237);*/
    overflow:hidden;
    /*position:relative;*/
    margin-top:3vh;
}


.timeScale{
    /*padding-left:3vw;*/
    height:20px;
    /*width:100%;*/
   /* max-width: 20000;*/
    background-color:white;
   
    

}

#timeScaleContainer{
    /*padding-left:3vw;*/
    height:24px;
    background-color:white;
    border-bottom:4px solid rgb(237, 237, 237);
    margin-bottom:1vh;
}

#timeline_content{
    /*position:relative;*/ /*SURTOUT PAS DE POSITION RELATIVE SINON GROS BUG!!!*/
    /*padding-left:3vw;*/
    height: calc(16vh - 24px);
    width:100%;
    

}

#timelineTools{
  position:fixed;
  height:3vh;
  background-color: white;
  border: 1px solid var(--primary-color-one);
  border-width: 1 0 1 0;
  width: 100vw;
  z-index:10;
  padding-right: calc(1 * var(--u));
}

.timelineToolsBtn{
  float:right;
  margin-left: calc(1 * var(--u));
    margin-right: calc(0.5 * var(--u));
  width:2vh;
  height:2vh;
  
}

#zoomIn{
  height: 100%;
  
  background: no-repeat center/150% url("../img/zoomIn.svg");
  background-size: contain;

}

#zoomOut{
  height: 100%;
  background: no-repeat center/150% url("../img/zoomOut.svg");
  background-size: contain;
}

#muteAll{
  height: 100%;
  background: no-repeat center/150% url("../img/mute.svg");
  background-size: contain;
}

#undo{
  height: 100%;
  background: no-repeat center/150% url("../img/undo.png");
  background-size: contain;
}


#redo{
  height: 100%;
  background: no-repeat center/150% url("../img/redo.png");
  background-size: contain;
}


#timeline_delimiter{
    /*padding-left:3vw;*/
    position:relative;
    height:0%;
    width:100%;
    background-color:rgb(160, 160, 160);

}


/*#zoomview-container {
    width: 100%;
    height: 50%;
  }

  
#overview-container {
    width: 100%;
    height: 50%;
  }*/


.timelineElement{

    float:left;
    height: calc(15vh - 24px);
    background-color: azure;
    /*border-top-left-radius: 10px 10px;
    border-top-right-radius: 10px 10px;*/
    
    user-select: none;
    overflow:hidden;

}

.timelineElement:hover{

   /* box-shadow: 0px 0px 15px #000000;
    z-index: 2;
    -webkit-transition: all 100ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 100ms ease-in;
    -ms-transform: scale(1.1);    
    -moz-transition: all 100ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 100ms ease-in;
    transform: scale(1.1);*/
    background-color: rgb(194, 207, 207);
    cursor: pointer;

}

.timelineElementText{

    
    text-align: center;
    border-radius:inherit;
    -webkit-box-shadow:inset 0px 0px 0px 1px rgb(226, 226, 226);
    -moz-box-shadow:inset 0px 0px 0px 1px rgb(226, 226, 226);
    box-shadow:inset 0px 0px 0px 1px rgb(226, 226, 226);
    height:2vh;
    overflow:hidden;
    font-size: calc(0.8 * var(--u));

}


.timelineElementImage{

    height:4vh;
    margin: 0.5vh 0 0.5vh 0;
    text-align: center;

}

.timelineElementImage img{

    height:100%;
    padding:5px;

}


#sortable { list-style-type: none; margin: 0; padding: 0;}

#videoPlayer{

    width:20vw;
    display:none;
    border-radius: 5px;
    background:black;
    
}

#textTools{
    
   display:flex;
   position: absolute;
    z-index: 2;
   align-items: center;
   height:3vh;
   width:fit-content;
   left:-1000;
   justify-content:center;
   background-color: rgb(255, 255, 255);
    border-radius: 4px;
    opacity:0;
    border:1px solid rgb(0, 0, 0);
    
}

.text_btn {
  margin: 0 calc(0.5 * var(--u)) 0 calc(0.5 * var(--u));
}

#player_mot_anim{

  height: 100%;
  width: 100%;
  border-bottom-left-radius: 5px;  
  border-bottom-right-radius: 5px;  
  border: 1px solid rgb(226, 226, 226); 
  border-width:0 1 1 1; 
  box-sizing: border-box;
  background-color: inherit;  
  resize: none;
  padding: calc(0.2 * var(--u));
  /*margin-left: 2vw;*/
  font-family: 'SFPRO', sans-serif;
  overflow-y: auto;
  /*padding-top: 2vh;*/
  position: relative;
  font-size: calc(0.8 * var(--u));
}

/*.text_btn{
    display:flex;
    align-items: center;
    height:100%;
    justify-content:space-evenly;
 
 }*/
 
 .text_btn img{
  
    position:relative;
    height: calc(1 * var(--u));
 
 }
 


.subtree{
    margin-left:0px !important; 
}

.inactive{
    opacity:0.25;
}

.hoverHand{

    cursor: pointer;
}

#playerHead{
    position:absolute;
    top: 0px;
    left: calc(-3 * var(--u));
    width:2px;
    background-color:rgb(0, 0, 0);
    z-index:1;

}

#playerHead:before{
  content:'▼';
  position: relative;
    left: -5.5px;
    top: -13px;
    cursor:pointer;
}

#element_details {
    display: flex;
    visibility: hidden;
    flex-flow: column wrap;
    align-content: center;
    text-align: left;
    line-height: 0px;
    margin-top: 1vh;
    width:70%;
    float:left;
    font-size:12;
    
}

#element_details p {
  margin: 1vh;
}

.muted{

opacity:0.5;

}

.deleted{

    opacity:0;
    
}

.tree{
    height:25%;
}


.medialist{
    height: 60vh;
    width: 100%;
    direction: rtl; 
    scrollbar-width: thin;   
}




.medialistControls{
    height: 0vh;
    width: 100%;
    display:none;
    /*background-color: rgb(255, 255, 255);*/
    
}

.medialistContent{
  
    display: flex;
    flex-flow: wrap;
    justify-content: space-evenly ;
    align-items:baseline;
    align-content:flex-start;
    gap: 2%;
    flex-grow: 1;
    height:95%;
    width:100%;
    overflow-y: auto;
    padding-top: 1vh;
    padding-bottom: 1vh;
    
    
}

.projectElementImage{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
}

.projectElement{
  direction: ltr;    
  position:relative;
    width:calc(5 * var(--u));
    /*background-color:rgb(124, 8, 8);*/
    border:1px solid rgb(160, 160, 160);
    border-radius: 5px;
    transition: box-shadow .1s;
    cursor: pointer;
}

#downloadListPreview{
  
  position:relative;
    width:calc(5 * var(--u));
    /*background-color:rgb(124, 8, 8);*/
    border:1px solid rgb(160, 160, 160);
    border-radius: 5px;
    transition: box-shadow .1s;
    margin-left: calc(0.5 * var(--u));
    margin-bottom:2vh;
    margin-top: 2vh;
}

.projectElement:hover {
  box-shadow: 0 0 0 3px var(--primary-color-one);
  }

.projectElementTitle {
    display: block;
    font-size: calc(0.7 * var(--u));
    /* width: inherit; */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    padding: 0 calc(0.5 * var(--u));
}


.medialistControlsImg{
  height: 130%;
    width: auto;
    cursor: pointer;
    /*border: 1px solid rgb(228, 226, 226);
    border-width: 0 1 1 0;*/
    padding: 2;
    float: left;
}

#mediaListEl{

}

#downloadListEl{
  display:none;
  height: 53vh;
}

#medialistExpand{

    /*transform: rotate(-0.25turn);*/
    height:100%;width:auto;
    cursor: pointer;
    -webkit-transition: .1s ;
    -moz-transition: .1s ;
    -o-transition: .1s ;
    transition: .1s ;
}



.medialistClosed{

    transform: rotate(-0.25turn);

}


::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--primary-color-one);
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #9eba8a;
  }

  .currentProject{
    box-shadow: 0 0 0 3px var(--primary-color-one);
  }


.selectedSize{
  border-radius:5px;
  box-shadow: 0 0 0 3px var(--primary-color-one);
}


  .currentProject:hover{
    box-shadow: 0 0 0 3px var(--primary-color-one);
  }


 .loader,.overlay{
    
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    position:absolute;  
    width:100%;
    max-width:100vw;
    height:100%;
    top:0;
    left:0;
    background: #fff;
    border:inherit;  
    border-radius:inherit;  
    z-index: 2;
    
 } 
 .loader{
  flex-flow: column;
 }
 .loader img{
  filter: invert(71%) sepia(74%) saturate(321%) hue-rotate(48deg) brightness(87%) contrast(85%);
  

 }


 /*css laoder*/
 .wave-menu {
    border: 4px solid var(--primary-color-one);
    border-radius: 50px;
    width: 200px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: ease 0.2s;
    position: relative;
    background: #fff;
  }
  
  .wave-menu li {
    list-style: none;
    height: 30px;
    width: 4px;
    border-radius: 10px;
    background: var(--primary-color-one);
    margin: 0 6px;
    padding: 0;
    animation-name: wave1;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: ease 0.2s;
  }
  
  .wave-menu:hover > li {
    background: #fff;
  }
  
  .wave-menu:hover {
    background: var(--primary-color-one);
  }
  
  .wave-menu li:nth-child(2) {
    animation-name: wave2;
    animation-delay: 0.2s;
  }
  
  .wave-menu li:nth-child(3) {
    animation-name: wave3;
    animation-delay: 0.23s;
    animation-duration: 0.4s;
  }
  
  .wave-menu li:nth-child(4) {
    animation-name: wave4;
    animation-delay: 0.1s;
    animation-duration: 0.3s;
  }
  
  .wave-menu li:nth-child(5) {
    animation-delay: 0.5s;
  }
  
  .wave-menu li:nth-child(6) {
    animation-name: wave2;
    animation-duration: 0.5s;
  }
  
  .wave-menu li:nth-child(8) {
    animation-name: wave4;
    animation-delay: 0.4s;
    animation-duration: 0.25s;
  }
  
  .wave-menu li:nth-child(9) {
    animation-name: wave3;
    animation-delay: 0.15s;
  }
  
  @keyframes wave1 {
    from {
      transform: scaleY(1);
    }
  
    to {
      transform: scaleY(0.5);
    }
  }
  
  @keyframes wave2 {
    from {
      transform: scaleY(0.3);
    }
  
    to {
      transform: scaleY(0.6);
    }
  }
  
  @keyframes wave3 {
    from {
      transform: scaleY(0.6);
    }
  
    to {
      transform: scaleY(0.8);
    }
  }
  
  @keyframes wave4 {
    from {
      transform: scaleY(0.2);
    }
  
    to {
      transform: scaleY(0.5);
    }
  }
  



#player_chapitre_anim{

  max-height:24.5vh;
    width:100%;
    overflow-y:auto;
    position:relative;
    user-select:none;
}  

.action{

  pointer-events: visible;
  }


.right_action_context{
  display:none;
}

#logout{
  
  background: no-repeat center url("../img/logout.svg");
  background-size: contain;

}

#logout a{
  display:block;
  width:100%;
  height:100%;

}

#save{
  
  
  background: no-repeat center url("../img/save.svg");
  background-size: contain;

}

.speakerListTool{
  height: 2vh;
    width: 2vh;
    margin-left:calc(0.25 * var(--u));
  background: no-repeat center url("../img/clear.svg");
  background-size: contain;
}

#export{
  
  
  background: no-repeat center url("../img/export.svg");
  background-size: contain;

}

#download{
  
  
  background: no-repeat center url("../img/downloads.png");
  background-size: contain;

}

#clean{
  
  
  background: no-repeat center url("../img/clean.png");
  background-size: contain;

}

#searchTools{
  display:none;
  margin-left: -5%;
}


.right_action{
  height: 2vh;
    width: 2vh;
    margin: 0 calc(0.5 * var(--u)) 0 calc(0.5 * var(--u));
  cursor:pointer;
}

#userName{
  width:auto;
  text-align: center; 
  font-size: 1.5vh;
}

#userPicto{
  width:1.5vh;
}

.separator{
  height:2vh;
  margin: 0 calc(1 * var(--u)) 0 calc(1 * var(--u));
}

#exportBtn{
  display: flex;
    flex-flow: row nowrap;
    justify-content: end;
    align-items: center;
    border-radius: 5px;  
  border: 1px solid rgb(226, 226, 226);  
  box-sizing: border-box;
  cursor:pointer;
  padding: 0.5vh;
  font-size: 1.5vh;
  text-overflow: ellipsis;
white-space: nowrap;
}
.elementThumb{

  height:4vh;
  background-image: url(../img/processing.png);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: left;
}


#player_chapitre_anim_list li{

  margin-top:1vh;
  margin-bottom:1vh;
  font-size: calc(0.8 * var(--u));

}

.sectionTitle{

  font-weight:bold;
  /*font-style:italic;
  text-align:center;*/
  text-align: left;  
  height:2vh;
  margin:0.5vh 0 0.5vh 0;
  padding-left:1vh;  
  font-size: calc(0.75 * var(--u));
  font-weight:bold;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select:none;

}

#player_chapitre_anim_list{
  text-align:left;
  margin-left: calc(-1 * var(--u));
}

.canvasChap{
  display:none;
}
.parameter{
  padding-top:1vh;
  padding-bottom:1vh;
  border: 1px solid rgb(226, 226, 226);
  border-width: 0px 0px 0px 0px;
  box-sizing: border-box;
  font-size: 1.5vh;
}

#debugMot{
  margin-top:1vh;
  border-radius: 5px;  
  border: 1px solid rgb(226, 226, 226);  
  box-sizing: border-box;
  background-color: inherit;
  height:15vh;
  display:none;
}

#debugMot .sectionTitle{
  float:left;
  margin-top:1vh;
}


.mot{
  user-select:text !important;
  white-space: nowrap;
  width: fit-content;
  margin:auto !important;
  padding-right:5px;
}

.silcence{
  user-select:text !important;
  color:aqua !important;
}
.newProject {
  position: absolute;
  height: 3vh; 
  right: -1px;
  top: 0;
}
.notNewProject {
  display:none;
}

.highlight{
  color:rgb(0, 0, 0) !important;
  background-color: #84C259  !important;
  border-radius: 4px  !important;
  /*transform: scale(1.5);*/
}

#handle {
  /*margin-right: 1.5vw;*/
  cursor:move;
}

.color{
  border:1px solid black;
  width:calc(1 * var(--u));
  height:calc(1 * var(--u));
  float:right;
  cursor: pointer;
  margin:0.5vh;
}

#speakerColor{
  border:1px solid black;
  width:calc(1 * var(--u));
  height:calc(1 * var(--u));    
}

/*#projet_speakers {
  height: 30vh;
  overflow-y: scroll;
}*/


#projet_speakers {
    display: flex;
    flex-flow: row wrap;
    /* flex-direction: row; */
    justify-content: center;
    align-items:center;
    max-height: 25vh;
    
}

#inputSpeakerList {
  display: flex;
  flex-flow: row wrap;
  /* flex-direction: row; */
  justify-content: center;
  align-items:center;
  max-height: 20vh;
  overflow-y: auto;
}

#projet_speakers input {
  width: calc(8 * var(--u));
  height:3.5vh;
  font-size: 1.5vh;
  border-radius: 5px;
  outline: none;
}
#projet_speakers span {
  
  font-size: 1.5vh;
  margin-right: calc(0.5 * var(--u));
  /*margin-top:1vh;
  margin-bottom:0.5vh;*/
}

.speakerListElement {
  display: flex;
  
  align-items: center;
  margin-top: 1vh;
  
}

#projet_speakers input[type=submit]{
  width: calc(4 * var(--u));
  height:3.5vh;
  font-size: 1.5vh;
  margin:calc(0.5 * var(--u));
}

#whites input[type=range] {
  width: calc(10 * var(--u));
  height: 1.5vh;
  margin: 0.5vh 0 0.5vh 0;
} 

#searchWordInput {
  opacity: 1;
  width: calc(12 * var(--u));
  height: 4vh;
  margin-top: 1vh;
  border-radius: 5px;
  padding-left: calc(1.5 * var(--u));
  outline: none;
}

#searchWord{
  display:flex;
  position: absolute;
    margin-left: 39.5vw;
}


.found{

  color:red !important;
}

.wf{
  height:4vh;
  width:100%;
/* colorisation de la waveform -- https://angel-rs.github.io/css-color-filter-generator/*/
  /*filter: brightness(0) saturate(100%) invert(100%) sepia(29%) saturate(5637%) hue-rotate(36deg) brightness(115%) contrast(52%);*/

  filter: brightness(0) saturate(100%) invert(78%) sepia(3%) saturate(19%) hue-rotate(30deg) brightness(93%) contrast(95%);


}

#zoomTimeline {
  width: calc(9 * var(--u));
  display: flex;
  align-items: center;
}
#zoomSlider {
  width: calc(7 * var(--u));
  margin-left:calc(0.5 * var(--u));
}
#zoomValue {
  width: calc(1 * var(--u));
  margin-left:calc(0.5 * var(--u));
}

#silence {
  width: calc(15 * var(--u));
  margin-top: 1vh;
}

#silence input[type=submit] {
  width: calc(4 * var(--u));
  height: 3.5vh;
  font-size: 1.5vh;
  margin: calc(0.5 * var(--u));
}

#silenceSlider {
  width: calc(14 * var(--u));
  border-radius: 5px;
  margin-left: auto;
    margin-right: auto;
    height: 1vh;
    background-color: rgb(226, 226, 226);
}

#silenceSlider .ui-slider-handle{

  background: no-repeat center url(../img/silenceHandle.svg);
    background-size: cover;
    height: 2.5vh;
    width: 2.5vh;
    margin-top: -0.3vh;
    border-radius: 5px;
}

#silenceControls {
  display: flex;
  flex-flow: row;
  justify-content: space-evenly;
  /* align-content: center; */
  align-items: center;
  padding: 0 calc(2 * var(--u)) 0 calc(2 * var(--u));
  /* height: 2vh; */
  /* width: 10vw; */
}

#silence img{

  width:1.5vh;
}



#silenceValue {
  width: calc(3 * var(--u));
  /*margin-left: auto;
    margin-right: auto;*/
  
}

#player_mot_anim ::selection {
 
  background: #84c259;
}

#player_mot_anim [contenteditable="true"]:focus{
  /*border:none;
  outline:none;*/
  background-color:white !important;
  text-decoration: none !important;
  padding:0 3 0 3;
  outline: 2px solid black;
  
  color:black !important; 
}

.paragraphSpeaker{
  padding:0 5 0 5;
}

.ui-resizable-ghost { opacity:0.8 !important; border:1px solid white; }


.context-menu-root{

  z-index:1000 !important;
}

#upload {
  
  text-align: center;
  padding: 5;
  font-size:calc(0.7 * var(--u));
  height: 16vh;
  width:98%;
  overflow-y: scroll;
  overflow-x: hidden;
  
}

#upload-btn {
  display: block;
  height: 3vh;
  width: 100%;
  background: no-repeat center url(../img/upload.svg);
  background-size: contain;
  cursor:pointer;
}

.upload-progress-tracker{

  width:90%;
  
}

.upload-progress-tracker .maximize-btn {

  width:2vh;
  height:2vh;
  background-size: 100% auto;
}

.upload-progress-tracker .maximize-btn.expanded {

  width:2vh;
  height:2vh;
  background-size: 100% auto;
}

.upload-progress-tracker .file-progress .file-details p .status.completed{
  display:none;
}

.upload-progress-tracker .file-progress .file-actions button {
  height: calc(1 * var(--u));
  text-align: center;
  padding: 2vh 0 0 0;
  font-size: 0.7em;
  color: #607D8B;
  /*width: 0.7vw;*/
  /* min-width: 40px; */
  /* margin-left: 5px; */
}

.upload-progress-tracker h3 {
  display:none;
}

#uploadFileElement {
  margin-left: 1vh;
  width: calc(6 * var(--u));
}
#uploadProgress {
  display:none;
  margin-left: 1vh;
  width: calc(6 * var(--u));
}

.upload-progress-tracker .status{
  display:none;
}

.upload-progress-tracker .file-progress .file-actions {
  /* min-width: 45px; */
  display: flex;
  justify-content: center;
  position: absolute;
  right: 0;
}

.upload-progress-tracker .file-progress .file-details .progress-bar {
  height: 0.75vh;
}

.upload-progress-tracker .file-progress .file-details::after {
  height: 0.75vh;
}

.upload-progress-tracker .file-progress .file-actions button {
 
  width: calc(1 * var(--u));
}

#uploadPercent{
  width:25%;
  height:1vh;
  font-size: calc(0.5 * var(--u));
  margin-top: -1vh;
  /*margin-left: -0.5vh;*/
}

img#toggle {
  display:none;
  position: absolute;
  width: 2vh;
 
 top:50%;
 left:2px;
  /* margin-top: 20vh; */
  z-index: 2;
  transform: rotate(180deg);
  cursor:pointer;
}

#exportList,#projectList{
  display:none;
}

#downloadListContent{
  direction: ltr;
  overflow-x:hidden;
  padding: 0 calc(0.5 * var(--u));    
}

#restoreTextTools{
  /*display:none;*/
}

img#searchCross {
  display:none;
  height: 1.5vh;
  margin-left: calc(-1 * var(--u));
  margin-top: 1vh;
  cursor: pointer;
}

.projectElementCSS {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-around;
  width: calc(6 * var(--u));
}

.projectElementCSS label{
  font-size:1.5vh;
  font-weight:bold;
}

div#exportsTitle {
  padding: 0 calc(0.25 * var(--u));
  margin: 1vh 0;
}

#returnToList {
  
  width: calc(5 * var(--u));
  height: 3.5vh;
  margin: 0 calc(1 * var(--u));
  font-size: calc(0.7 * var(--u));
}

#sizeSelection {
  display: flex;
  width: 75%;
  align-items: start;
  flex-flow: row wrap;
  justify-content: space-between;
}


#sizeSelection img {
  width: 5vh;
}

p.slides {
  position:absolute;
  font-size: calc(1.5 * var(--u));
  font-family: 'SFPRO';
}

.tips{
  width:50%;
  margin:0 25%;
  font-style: italic;
  color: #b7b7b7;
}

div#welcome {
  display: flex;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
}



#message {
 display:none;
  position: static;
  width: calc(10 * var(--u));
  margin: auto;
  font-size: 1.5vh;
  align-items: center;
  height:3vh;
}

#message img{

  height:3vh;
  float:left;
}

#messageContent{
  height:3vh;
  float:right;
  line-height:3vh;
}

#editorvideoTitleText {
  width: max-content;
  cursor: pointer;
}