header{
    display: block;
    width: 100%;
    background-color: white;
    height: 90px;
    position: fixed;
    z-index: 4;
    box-shadow: 0 3px 3px rgba(182, 182, 182, 0.75);
}


#reverse{
  width: 100px;
  height: 30px;
}
.reverse_p{
  display: inline-block;
  width: 45%;
  height: 25px;
  cursor: pointer;
}


.reverse_icon{
  height: 18px;
  width: 18px;
  fill: rgb(115, 115, 115);
}

#font-container{
  width: 100%;
  height: 24px;
}

.comCol{
  background-color: rgb(220, 220, 220) ;
}

.comCol:hover{
  background-color: rgb(195, 198, 199);
}
#ft_family{
  width: 100px;
  background-color: lightgray;
  height: 25px;
  cursor: pointer;
}

#chosen_ft{
  left: 5%;
  color: black;
  font-size: 14px;
}
.d-arrow {
  width: 17px;
  height: 25px;
  right: 5%;
}


#font-size{
  margin-right: 25px;
}

#font-input{
    width: 45px;
    height: 23px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: none ;
    border-left: none;
    padding: 0 1px;
    text-align: center;
    border-radius: 0;
}


#font-input:focus{
  outline: none !important;
}
#incr, #decr{
  background-color: white;
  color: black;
  border: none;
  width: 24px;
  height: 25px;
  border: 1px solid black;
}

#incr:hover, #decr:hover{
  background-color: whitesmoke;
  cursor: pointer;
}

.s_tool{
  display:inline-block;
  width: 25px;
  height: 25px;
}


.s_tool:hover{
  cursor: pointer;
  background-color: rgb(122, 121, 121);
}


.p_icon {
  border-radius: 5%;
  width: 18px;
  height: 18px;
  fill: rgb(82, 79, 79);
}


#text_icon{
  width: 18px;
  height: 75%;
  top: 0%;
  transform: translateY(0%);
}

#textColor_bar{
  display: inline-block;
  width: 18px;
  height: 20%;
  position: absolute;
  bottom: 0;
  background-color: black;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#undo,#redo{
  width: 45px;
  height: 100%;
  background-color: lightgray;
  cursor: pointer;
}

#upload-image{
  display: inline-block;
  width: 30px;
  height: 100%;
}

#upload-img-icon{
  width: 18px;
}

#insert_link{
  width: 70px;
  height: 25px;
  font-size: 0;
  cursor: pointer;
  left:18.75%;
}
#link-options{
  background-color: rgb(219, 218, 218);
}
#link-options *{
  display:inline-block;
  margin : 0 1px;

}

#link_fc{
  width: 20px;
  height: 20px;
  top : 15%;
  left: 5%;
}

#lk-icon-dis{
  bottom: 18%;
}

.rt45{
  transform-origin: center;
  transform: rotate(45deg);
}

#link_prop{
  height: 15px;
}

#link-options:hover{
  background-color: rgb(195, 198, 199);
}

#insert_image{
  height: 20px;
  width: 20px;
  right: 0%;
  cursor: pointer;
  right: 18.75%;
}
#link-options, #insert_image{
  display: inline-block;
}
#insert_image svg:hover{
  background-color: rgb(219, 219, 219);
}

#insert_image svg{
  height:90%;
  width: 100%;
}

#insert-link-co{
  display: inline-block;
  width: 50px;
  height: 100%;
  background-color: lightgray;
}

.color:hover{
  cursor: pointer;
}


#colors_container{
  position:absolute;
  display:inline-block;
  width: 90%;
  height: 100%;
  left: 5%;
}

.col_line{
  margin: 12px 0;
}


#fontsListContainer{
  position:absolute;
  width: 90%;
  left: 5%;
  top: 10px;
}

.ft_param{
  display: inline-block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
}


.ft_param:hover{
  cursor: pointer;
  background-color:whitesmoke;
}

#redo_icon{
  transform-origin: center;
  transform: rotateY(180deg) translate(-50%,-50%);
  left: 10%;
}

.lpp1, .lpp2{
  position :absolute;
  display: inline-block;
}

.lpp1{
  left: 5px;
  width: 18px;
  height: 18px;
}
.lpp2{
  color:black;
  left: 35px;
}

#link_options{
  background-color: rgb(185, 184, 184);
  z-index: 4;
}

.lkcc{
  display: inline-block;
  width: 100%;
  height: 30px;
  cursor: pointer;
}
.lkcc:hover{
  background-color: rgb(240, 240, 240);
  border-radius: 5%;
}

#lk-confirm{
  width: 120px;
  height: 150px;
  position:absolute;
  z-index: 4;
  position:fixed;
  background-color: rgb(180, 180, 180);

}

#lk-close{
  display: inline-block;
  width: 30px;
  height: 25px;
  position:absolute;
  right: 5%;
  cursor: pointer;
}
.lk-bar{
  display: inline-block;
  position:absolute;
  width: 3px;
  height: 20px;
  background-color: gray;
  transform-origin: center;
  bottom: 15px;
}
.lk-bar *{
  font-size: 0;
}
#lk-left-bar{
  transform: rotate(45deg) translateY(-50%);
  left: 20%;
}
#lk-right-bar{
  transform: rotate(-45deg) translateY(-50%);
  right: 20%;
}

#lk-form{
  position: absolute;
  bottom: 5%;
  display: inline-block;
  width: 90%;
  height: 110px;

}
#lk-form input{
  width: 100px;
}

#lk-submit{
  background-color: indigo;
  color: white;
  border: 0;
  width: 70px;
  height: 25px;
  cursor: pointer;
}

#lk-submit:hover{
  background-color: rgb(114, 6, 190);
}

#lk-hand-form{
  width: 100%;
  height: 100%;
}

.lkop{
  margin: 5px 0;
}

#tlk-conf{
  display: inline-block;
  height: 18px;
  transform: translate(-50%,-50%);
}

#upload-img{
  background-image: url("../../public/images/edition/image.svg");
}

#logo-con{
  cursor: pointer;
  height: 90%;
  width: 250px;
  left: 20px;
}
#img-logo{
  width: 100%;
  height: 100%;
}
#insert-link-co,#upload-image{
  cursor: pointer;
}


#adi-container{
  height: 30px;
}

#add-page{
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: rebeccapurple;
  left: 15px;
  cursor: pointer;
}

#add-page-icon{
  fill: white;
}

#export{
  display: inline-block;
  width: 115px;
  height: 30px;
  background-color: lightseagreen;
  right: 0px;
  color: white;
  cursor: pointer;
}

#export img{
  width: 15px;
  left: 5px;
}
#download-des{
  right: 5px;
}
@media screen and (max-width: 1529px){
  #h-bottom-con{
    left: 0%;
    width: 100%;
  }

  .s_tool{
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }

  #text_icon{
    width: 100%;
    height: 13.5px;
    top: 42%;
    transform: translateY(-50%);
  }
  #textColor_bar{
    width: 18px;
    height: 3px;
    bottom: 20%;
  }
}