@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");


/*-- ------------------------------------------------------------------------------------- --
| 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/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("components.css");
@import url("user.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("../js/signature-pad/signature-pad.css");

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




@import url("style-header.css");
@import url('formulaires.css');
@import url("style-boutons.css");
@import url('modalForms.css');
@import url('style-feuille.css');
@import url('specials-checkbox.css');



/* Variables CSS Files. Uncomment your preferred color scheme
@import url('menus-profil.css'); */
@import url("variables.css");
/* @import url("variables-blue.css");   */
/* @import url("variables-green.css");  */
/* @import url("variables-orange.css"); */
/* @import url("variables-purple.css"); */
/* @import url("variables-red.css");    */
/* @import url("variables-pink.css");   */

@import url('styles-mdiaquery.css');

@import url('dividers.css');
@import url('bg-themes.css');
@import url('style-tables.css');
@import url('style-chrono.css');
@import url('style-chat.css');
@import url('footer.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; }                        /*
|*--------------------------------------------------------------------------/*
|*--------------------------------------------------------------------------*/

/*
body {
  font-family: "Open Sans", sans-serif;
  background: #f6f9ff;
  color: #444444;
}
*/

body {

  font-size: 15px;
  font-family: var(--font-default);
  color: var(--color-text);
  scrollbar-width: none;
    
}

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;

}



.effet-ouvrier {

  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;
}


.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 {
  background-color: rgba(46, 44, 44, 0.9) !important;
}

.overlays .textOverlays,
.overlays_blocked .textOverlays {
  width: fit-content; !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;

}




.fasiri {
  font-weight: 700 !important;
  color: var(--css-primary) !important;
  display: none;
  margin-inline: 7px !important;
}



@media (max-width: 575.98px) {

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

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

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


}


@media (max-width: 767.98px) {

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

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

}

@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);

  }

}


@media (min-width: 991.98px) {

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

  }

}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
  border-radius: 4px;
  padding: 10px 0;
  animation-name: dropdown-animate;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
  text-align: center;
  font-size: 15px;
  padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
  color: #444444;
  text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
  text-decoration: none;
}

.dropdown-menu .dropdown-divider {
  color: #a5c5fe;
  margin: 0;
}

.dropdown-menu .dropdown-item {
  font-size: 14px;
  padding: 10px 15px;
  transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
  margin-right: 10px;
  font-size: 18px;
  line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f6f9ff;
}

@media (min-width: 768px) {
  
  .dropdown-menu-arrow::before {
    content: "";
    width: 13px;
    height: 13px;
    background: #fff;
    position: absolute;
    top: -7px;
    right: 20px;
    transform: rotate(45deg);
    border-top: 1px solid #eaedf1;
    border-left: 1px solid #eaedf1;
  }

}

@keyframes dropdown-animate {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }

  0% {
    opacity: 0;
  }
}




/*/ Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

  .min-width-truncate {
    width: 300px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}


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


.content__draggable {

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






/*-----------------------------------------------
|   STYLE ETIQUETTE OU BADGE
|-----------------------------------------------*/
.etiquette {
  width: 3.125rem;
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  font-family: var(--css-font-sans-serif);
  border-radius: 0.375rem;
}

.etiquette .etiquette-titre {
  background-color: var(--css-danger);
  color: #fff;
  border-radius: 0.375rem 0.375rem 0 0;
  padding: 0.25rem;
  font-weight: 600;
}

.etiquette .etiquette-objet {
  font-size: 1.728rem;
  padding: 0.25rem;
  border: 0.125rem solid rgba(var(--css-danger-rgb), 0.3);
  border-top: 0;
  border-radius: 0 0 0.375rem 0.375rem;
  color: #9da9bb;
  font-weight: 700;
}







/* -----------------------------------------------------------------
| STYLE DES PAGES A CODE SPECIAL (400, 40..., )
| ----------------------------------------------------------------- */
.bloc-carousel {
  width: 100%;
  height: 90vh;
  background: #000;
  overflow: hidden;
  position: relative;
}

@media (max-height: 500px) {
  .bloc-carousel {
    height: 150vh;
  }
}

.bloc-carousel .carousel,
.bloc-carousel .carousel-inner,
.bloc-carousel .carousel-item,
.bloc-carousel .carousel-item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.bloc-carousel .carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bloc-carousel .carousel-item::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
}

.bloc-carousel .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 70px;
  left: 50px;
  right: 50px;
}

.bloc-carousel .container {
  text-align: center;
}

.bloc-carousel h2 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .bloc-carousel h2 {
    font-size: 28px;
  }
}

.bloc-carousel p {
  width: 80%;
  margin: 0 auto 30px auto;
  color: #fff;
}

@media (min-width: 1024px) {
  .bloc-carousel p {
    width: 60%;
  }
}

.bloc-carousel .carousel-fade {
  overflow: hidden;
}

.bloc-carousel .carousel-fade .carousel-inner .carousel-item {
  transition-property: opacity;
}

.bloc-carousel .carousel-fade .carousel-inner .carousel-item,
.bloc-carousel .carousel-fade .carousel-inner .active.carousel-item-start,
.bloc-carousel .carousel-fade .carousel-inner .active.carousel-item-end {
  opacity: 0;
}

.bloc-carousel .carousel-fade .carousel-inner .active,
.bloc-carousel .carousel-fade .carousel-inner .carousel-item-next.carousel-item-start,
.bloc-carousel .carousel-fade .carousel-inner .carousel-item-prev.carousel-item-end {
  opacity: 1;
  transition: 0.5s;
}

.bloc-carousel .carousel-fade .carousel-inner .carousel-item-next,
.bloc-carousel .carousel-fade .carousel-inner .carousel-item-prev,
.bloc-carousel .carousel-fade .carousel-inner .active.carousel-item-start,
.bloc-carousel .carousel-fade .carousel-inner .active.carousel-item-end {
  left: 0;
  transform: translate3d(0, 0, 0);
}

.bloc-carousel .carousel-control-prev,
.bloc-carousel .carousel-control-next {
  width: 10%;
}

@media (min-width: 1024px) {

  .bloc-carousel .carousel-control-prev,
  .bloc-carousel .carousel-control-next {
    width: 5%;
  }
}

.bloc-carousel .carousel-control-next-icon,
.bloc-carousel .carousel-control-prev-icon {
  background: none;
  font-size: 32px;
  line-height: 1;
}

.bloc-carousel .carousel-indicators li {
  cursor: pointer;
}

.bloc-carousel .btn-get-started,
.textOverlays .btn-get-started {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 20px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  color: #fff;
  background: #ef6603;
}

.bloc-carousel .btn-get-started:hover,
.textOverlays .btn-get-started:hover {
  background: #fff;
  color: #ef6603;
  border: 2px solid #ef6603;
}





.isTop-fixed, .onScroll-fixed {
  position: fixed !important;
  top: 60px;
  left: 0;
  right: 0;
  transition: all 0.5s;
  height: 60px;
  background-color: rgba(16, 12, 76, 0.8);
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
  padding: 10px;
  z-index: 99997;
}

.isTop-fixed .form-fixed,
.onScroll-fixed .form-fixed {
  width: calc(100%) !important;
  margin: 0 auto !important;
}


.target-onTop-fixed {
  
  top: 121px;
  right: 0;
  bottom: 0;
  left: 0;
  transition: all 0.5s;
  /*background-color: rgba(16, 12, 76, 0.5);*/
  background-color: var(--css-body-bg);
  box-shadow: none;
  padding: 10px 10px 40px;
  z-index: 99997;
  
}

.target-onTop-fixed .target-footer {
  position: absolute;
  left: 0;
  bottom: calc(5%);
  width: calc(100%);

}



/*/ Small devices (landscape phones, 576px and up)*/
@media (max-width: 576) {

  .carousel-part-text {
    padding-top: 20px;
    align-items: center;
  }

  .carousel-part-img {
    
  }

  

}


/*/ Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {


}

/*/ Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

  .isTop-fixed .form-fixed {
    width: calc(50%) !important;
  }

  .carousel-part-text {
    padding-top: 60px;
    align-items: center;
  }

  .carousel-part-img {
    
  }

  

}

/*/ Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
  
  .isTop-fixed .form-fixed {
    width: calc(50%) !important;
  }
  .carousel-part-text {
    padding-top: 60px;
    align-items: center;
  }

  .carousel-part-img {
    
  }



}