@font-face{
  font-family:"Joanne-Regular";
  src: url("../font/Joanne-Regular.woff") format("woff"),
       url("../font/Joanne-Regular.ttf") format("truetype");
}

@font-face{
  font-family:"Joanne-Italic";
  src: url("../font/Joanne-Italic.woff") format("woff"),
       url("../font/Joanne-Italic.ttf") format("truetype");
}

body{
  font-size: 0.9vw;  
  /* font-weight: bold; */
  font: 0em/100% "Joanne-Regular", sans-serif;
    /* font-size: min(max(12px, .9vw), 20px); */
    font-size: 12px;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    line-height: 1.3em;
}

:root{
  --gaping:20px;
  --background:white;
  --color:black;
  --element-margin: 20px 0px;
  --border : 1px solid lightgray;
}

.material-icons{
  cursor: pointer;
  font-size: 20px !important;
}

.active{
  color:blue;
}

.disactive{
  color:grey;
}

body{  
  margin:0;
  padding: 0;
  overflow: hidden;}

#container{
  box-sizing: border-box;
  flex:1;
  display: flex;
  row-gap: var(--gaping);
  overflow: hidden;
  width: calc(100vw - 20px);
  height: calc(100vh - 10px);
  margin: 5px 10px;
}

.container-horizontal{
  display:flex;
  column-gap: var(--gaping);
  /* border: 1px solid red; */
}


.container-vertical{
  /* flex:1; */
  overflow: hidden;
  position: relative;
  flex-direction: column;
}

#container-loader{
  flex:0 0 250px;
  padding: 5px 10px 10px 0px;
  border-right: var(--border);
    display: flex;
  flex-direction: column;
  justify-content: space-between;
}


#container-display{
  flex:1;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  margin-left:10px;
  overflow:hidden
}

.headlines-child{
  white-space: nowrap; width: 100%;display: flex;align-items: center;column-gap: 10px;
}

#container-display > div:not(.header):not(.gutter){
  box-sizing: border-box;
  padding:0px 0px 10px 0px;
}

#loader > .container-vertical > div:not(.informations){
  display: flex;
  flex-direction: column;
}

#preview-container{  
  position: relative;
  width: 100%;
  overflow:hidden;
}

#mise-en-page{
  flex:1;
  position: relative;
  overflow:hidden;
  width:100%;
  display: flex;
  height: 1000px;
}

#mise-en-page span{
  line-height: 1;
  display: inline-block;
  margin-bottom: 0px;
}.big{
  font-size: 37.5px;
  width: 150%;
}.small{
  width: 100%;
}

.mise-en-page_details{
  position: absolute;
  bottom:10px;
  right:10px;
  background-color: var(--background);
  box-sizing: border-box;
  padding:5px 5px;
}

.informations{
  display: flex;
  row-gap: 10px;
  justify-content: space-between;
  /* align-items: center; */
} 

svg{
  position:absolute;
  width: 100%;
  height: 100%;
  padding:10px 500px 00px 0px;
}

.svg-container{
width: 100%;
height: 50%;
position: absolute;
overflow-x: auto;
overflow-y:hidden;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

.svg-container::-webkit-scrollbar {
  display: none;
}

#sliders{
  flex-direction: column;
  align-items: flex-end !important;
}
#slide-timeline, #preview-options > div:first-child{
  display: flex;
align-items: center;
column-gap: 5px;
margin: 5px 0px;
}
#sliders > div {
  display: flex;
  align-items: center;
  justify-content: end;
  column-gap: 5px;
  margin: 5px 0px;
}

#preview-options{
  display: flex;
  flex:1;
  align-items: start;
  justify-content: space-between;
  z-index: 10;
  width: 100%;
  position: absolute
}

#preview-options > *:not(.svg-container){
flex:1;
display: flex;
align-items: center;
}

#global-inputfile-wrapper{
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
}

.inputfile-wrapper{
  border-bottom: var(--border);
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.inputfile-wrapper > input {
  padding: 5px 0px;
}

form > div{
  padding: var(--element-margin);
}

#addMore-share{
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

form{
  display: flex;
  flex-direction: column;
}

canvas{
  position: absolute;
}

#preview01{opacity: 100%;};
#preview02{opacity: 50%;}

.inputfile-infos{
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  column-gap: 7px;
  /* font-weight: bold; */
}


.header{
  border-bottom: var(--border);
  display: flex;
  height: 20px;
  width: 100%;
  margin-top: 5px;
}
div.header:nth-child(1){margin-top: 20px;}

.inputfile-params{
  display: flex;
  column-gap: 10px;
}
.inputfile-params > span:nth-child(1){
  line-height: 1.3;
}
.inputfile-params > div{
  display: flex;
  flex-direction: column;
  justify-content: end;
  row-gap: 2px;
}

.inputfile-params > div > label{
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.mask{
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: left; 
  display: flex;
  overflow: scroll;
}
.mask_overlay{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: white;
}
.mask_handle{
  cursor: grab;
  position: relative;
  top: 0px;
  left: 0px;
  bottom: 0;
  height: 100%;
  border: none;
  background-color: transparent;
  width: 80px;
  text-align: center;
  background: linear-gradient(to right, 
      transparent 0%, 
      transparent calc(50% - 3px), 
      black calc(50% - 3px), 
      black calc(50% + 2px), 
      transparent calc(50% + 2px), 
      transparent 100%);
}

.mask_handle:hover{
  background: linear-gradient(to right, 
  transparent 0%, 
  transparent calc(50% - 3px), 
  blue calc(50% - 3px), 
  blue calc(50% + 2px), 
  transparent calc(50% + 2px), 
  transparent 100%);
}

.mask_handle span{
background-color: #000000;
color: #ffffff;
height:100% !important}

.mask_handle span:before{
  margin: 0 0 0 0;
}

#headlines01, #headlines02{
  position:absolute;
  width:500px;
}
  
#wrapper_info{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  padding: 60px 60px 70px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#wrapper_info_background{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.21);
}
  
#wrapper_info_text{
  background-color: white;
  z-index: 3;
  max-width: 400px;
  padding: 10px;
  font-size: 14px;
  line-height: 1.4;
}

#button_info{
  cursor: pointer;
}