/* -------------------------------------------------------------------------- */
/*              INSERTION DES FEUILLES DE STYLE                               */
/* -------------------------------------------------------------------------- */

@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i");
@import url("https://fonts.googleapis.com/css?family=Rubik:400,400i,500,500i,600,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700%7cPoppins:300,400,500,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");


/*-- ------------------------------------------------------------------------------------- --
| TRAITEMENT DES FONT-FAMILY
| ---------------------------------------------------------------------------------------- --
|
|*/ @import url("materialdesignicons.css.map");                       /*
|*/ @import url("materialdesignicons.min.css");                       /*
|*/ @import url("materialdesignicons.min.css.map");                   /*
|*/ @import url("bootstrap.min.css");                                 /*
|*/ @import url("bootstrap-grid.min.css");                            /*
|*/ @import url("bootstrap-5-grid.min.css");                          /*
|*/ @import url("fonts/font-awesome/css/all.min.css");                /*
|*/ @import url("fonts/font-awesome-pro/css/all.min.css");            /*
|*/ @import url("fonts/boxicons/css/animations.css");                 /*
|*/ @import url("fonts/boxicons/css/boxicons.min.css");               /*
|*/ @import url("fonts/boxicons/css/transformations.css");            /*
|*/ @import url("fonts/bootstrap/bootstrap-icons.min.css");           /*
|/*                                                                   /*
|
| ---------------------------------------------------------------------------------------- --*/




@import url("theme.css");
@import url("colors.css");
@import url("variables.css");
@import url("style-header.css");
@import url("combinaison-css.css");
@import url("user.css");
@import url("style-editor-code.css");
@import url("styles-mediaquery.css");


/*
*
*/


@import url("../js/vendors/animate.css/animate.min.css");
@import url("../js/vendors/aos/aos.css");
@import url("../js/vendors/glightbox/css/glightbox.min.css");
@import url("../js/vendors/swiper/swiper-bundle.min.css");


/*
* -----------------------------------------------------------------------
*/


@import url("../js/vendors/choices/choices.min.css");
@import url("../js/vendors/nouislider/nouislider.min.css");
@import url("../js/vendors/prism/prism-okaidia.css");
@import url("../js/vendors/fullcalendar/main.min.css");
@import url("../js/vendors/simplebar/simplebar.min.css");


/*
* -----------------------------------------------------------------------
*/


@import url("../js/vendors/flatpickr/flatpickr.min.css");
@import url("../js/vendors/plyr/plyr.css");
@import url("../js/vendors/dropzone/dropzone.min.css");
@import url("../js/vendors/leaflet/leaflet.css");
@import url("../js/vendors/leaflet.markercluster/MarkerCluster.css");
@import url("../js/vendors/leaflet.markercluster/MarkerCluster.Default.css");

/*
* -----------------------------------------------------------------------
*/

@import url("../js/vendors/select2/select2.min.css");
@import url("../js/vendors/select2-bootstrap-5-theme/select2-bootstrap-5-theme.min.css");

@import url("../js/vendors/datatables.net-bs5/dataTables.bootstrap5.min.css");


/*
* -----------------------------------------------------------------------

*/

@import url("style-carousel.css");
@import url("perfect-scrollbar.css");
@import url("styles-etiquettes-badges.css");
@import url("formulaires.css");
@import url("modalForms.css");
@import url("style-feuille.css");
@import url("style-boutons.css");
@import url("dividers.css");
@import url("specials-checkbox.css");
@import url("style-chrono.css");
@import url("style-pave-signature.css");
/*@import url("style-todo-accordion.css");*/
@import url("style-themes-tables.css");
@import url("footer.css");
@import url('app-chat.css');















/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
 
  --accent-color: #e84545;
  --accent-color-rgb: 232, 69, 69;
  --heading-color: #32353a;
  --heading-color-rgb: 50, 53, 58;
  --contrast-color: #ffffff;
  --contrast-color-rgb: 255, 255, 255;
  --color-size: 200px;
}

/* Nav Menu Colors */
:root {
  --nav-color: #3a3939;
  --nav-hover-color: #e84545;
  --nav-dropdown-color: #3a3939;
  --nav-dropdown-hover-color: #e84545;
  --nav-dropdown-background-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------------------/*
/* Class des couleur du logo Hafani, vert(green), bleu(blue), marron(brown) /*
/*--------------------------------------------------------------------------/*
|*/     .bg_green     { background-color: #25bd27 !important; }             /*
|*/     .bg_blue      { background-color: #27324b !important; }             /*
|*/     .bg_brown     { background-color: #a32c2c !important; }             /*
|*/                                                                         /*
|*/     .color_green  { color: #25bd27 !important; }                        /*
|*/     .color_blue   { color: #27324b !important; }                        /*
|*/     .color_brown  { color: #a32c2c !important; }                        /*
|*--------------------------------------------------------------------------/*
|*--------------------------------------------------------------------------*/


a {
  color: #ef6603;
  transition: 0.5s;
  text-decoration: none;
}

a:hover,
a:active,
a:focus {
  color: #fc8129;
  outline: none;
  text-decoration: none;
}

/*
p {
  padding: 0;
  margin: 0 0 30px 0;
}

  

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(#d8e2ef, inherit);
  font-family: "Raleway", "Montserrat", sans-serif;

}

h1, .h1 {
  font-size: calc(1.373832rem + 1.485984vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.48832rem;
  }
}

h2, .h2 {
  font-size: calc(1.33236rem + 0.98832vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2.0736rem;
  }
}

h3, .h3 {
  font-size: calc(1.2978rem + 0.5736vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.728rem;
  }
}

h4, .h4 {
  font-size: calc(1.269rem + 0.228vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.44rem;
  }
}

h5, .h5 {
  font-size: 1.2rem;
}

h6, .h6 {
  font-size: 0.8333333333rem;
}
*/



i.livicon-evo,
span.livicon-evo {
  display: inline-block;
}

.mdi {
  font-size: 1.5rem !important;  
}

.overlays {
  position: fixed;
  top: 0; 
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 19923;
  padding: 58px 20px 50px;
  overflow-x: hidden;
  scrollbar-width: none;

  background-color: rgba(46, 44, 44, 0.7);
  background-image: url("../../dos-params/images/icons/e_securite.gif");
  background-repeat: no-repeat;
  background-size: calc(20%);
  background-position: center center;
  transition: opacity 500ms;
  visibility: hidden; 
  opacity: 0;
  -webkit-overflow-scrolling: touch;

}

.card.overflow-hidden .scrollbar-overlay {
  scrollbar-width: none !important;
}

.effet-ouvrier {

  background-image: url("../../dos-params/images/icons/e_securite.gif");
  background-repeat: no-repeat;
  background-position: center center;
  transition: opacity 500ms;
}

.progress-chargement {

  background-image: url("../../dos-params/images/icons/3Dcharge.gif");
  background-repeat: no-repeat;
  background-position: center center;
  transition: opacity 500ms;
}


.overlays_blocked {

  position: fixed;
  top: 0; 
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 19930;
  padding: 58px 20px 50px;
  overflow-x: hidden;
  scrollbar-width: none;

  background-color: rgba(46, 44, 44, 0.3);
  transition: opacity 500ms;
  visibility: hidden; 
  opacity: 0;
  -webkit-overflow-scrolling: touch;

}


.overlays.darker,
.overlays_blocked.darker,
.modal.darker {
  background-color: rgba(46, 44, 44, 0.9) !important;
}

.overlays .textOverlays,
.overlays_blocked .textOverlays {
  width: calc(100% - 10px) !important;
  padding: 20px 25px;
  margin: 20px auto !important;
  min-height: 20vh !important;
  overflow: hidden;
  position: relative;
  top: 60%;
  text-align: center;
  text-justify: auto;
  font-size: 130%;
  color: #ffffff;
  font-weight: 700;
  text-shadow:  #FFF 0px 0px 5px,
                #FFF 0px 0px 10px,
                #FFF 0px 0px 15px,
                #FF2D95 0px 0px 50px,
                2px 2px 2px rgba(206,89,55,0);
  
  animation: clignotant 2s linear infinite;

}

.overlays.darker .textOverlays,
.overlays_blocked.darker .textOverlays {
  animation: animate 6s linear infinite !important;
  text-shadow:  #FFF 0px 0px 5px,
                #FFF 0px 0px 10px,
                #FFF 0px 0px 15px,
                #FF2D95 0px 0px 50px,
                2px 2px 2px rgba(206,89,55,0);
  color: #FFFFFF;

}


.overlays .textOverlays p,
.overlays_blocked .textOverlays p {
  font-size: 15px;
  text-shadow: none;
  color: #ef6603;
  display: none;
}

.overlays .textOverlays .btn_single,
.overlays_blocked .textOverlays .btn_single {
  display: none;
}


.overlays.darker .textOverlays p,
.overlays_blocked.darker .textOverlays p {
  display: block;
}

.overlays.darker .textOverlays .btn_single,
.overlays_blocked.darker .textOverlays .btn_single {
  display: inline-block;
}


.overlays .progression {

  top: calc(50% - 80px);
  left: calc(50% - 50px);
  position: absolute;

  height: 90px;
  width: 90px;
  border-radius: 50%;
  text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  align-content: center;
  align-items: center;
  line-height: 90px;
  font-size: calc(120%);

}

.overlays .progression > a {

  text-decoration: none;
  outline: none;
  animation: animate 1s linear infinite;
  text-shadow:  #FFF 0px 0px 5px,
                #FFF 0px 0px 10px,
                #FFF 0px 0px 15px,
                #FF2D95 0px 0px 50px,
                2px 2px 2px rgba(206,89,55,0);
  color: #FFFFFF;

}



.overlays.active,
.overlays_blocked.active {
  visibility: visible;
  opacity: 1;
}



.blockerForms {

  background-color: rgba(250, 250, 250, 0.7);
  transition: opacity 500ms;
  transition: all .3s ease-in-out, background 0s;
  cursor: wait;
  z-index: 19999 !important;
  height: calc(100%);
  width: calc(100%);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 10px;
  align-content: center;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  position: fixed;
  display: none;

}

.blockerForms.active { display: block; }

.blockerForms .blockerForms-contenaire {

  background-color: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  align-self: center;
  height: calc(100%);
  margin: 0 auto;

}





@media (max-width: 575.98px) {

  .overlays .textOverlays {
    max-width: 95vw;
  }

  .overlays_blocked .textOverlays {
    max-width: 95vw;
    bottom: 30px;
  }

  .overlays .progression {
    top: calc(50% - 65px);
    left: calc(50% - 45px);
  }


  .effet-ouvrier {
    background-size: calc(30%) !important;
  }

  .progress-chargement {
    background-size: calc(30%) !important;
  }
  


}


@media (max-width: 767.98px) {

  .overlays {
    background-size: calc(50%);
  }

  .overlays .progression {
    top: calc(50% - 65px);
    left: calc(50% - 45px);
  }

  .effet-ouvrier {
    background-size: calc(25%) !important;
  }

  .progress-chargement {
    background-size: calc(25%) !important;
  }

}

@media (min-width: 767.98px) and (max-width: 991.98px) {

  .overlays .textOverlays {
    max-width: 90vw;
  }

  .overlays .progression {
    top: calc(50% - 70px);
    left: calc(50% - 50px);

  }

  .effet-ouvrier {
    background-size: calc(25%) !important;
  }

  .progress-chargement {
    background-size: calc(25%) !important;
  }

}


@media (min-width: 991.98px) {

  .overlays .textOverlays {
    max-width: 70vw;
  }
  
  .overlays .progression {
    top: calc(50% - 80px);
    left: calc(50% - 45px);

  }

  .effet-ouvrier {
    background-size: calc(10%) !important;
  }

  .progress-chargement {
    background-size: calc(10%) !important;
  }

}




.invalid {
  color: var(--css-danger);
}


.content__draggable {

  max-height: 50vh !important;
  overflow: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overflow-y: auto;
}