/* Layout */
.container{
    width:1100px;
    margin:auto;
    overflow: auto;
}

.container-fluid{
    width:100%;
    margin:auto;
    overflow: auto;
}

.d-block{
  display: block;
}

.flex,
.flex-v {
    display:flex;
    justify-content:center;
    align-items: center;
    height:100%;
    gap:15px; 
}

.flex-v {
    flex-direction: column;
    gap:5px;
}

.flex-wrap{
  flex-wrap: wrap;
} 

.flex-start{
  justify-content: flex-start;
}

.flex-end{
  justify-content: flex-end;
}

.flex-between{
  justify-content: space-between;
}

.flex-around{
  justify-content: space-around;
}

.flex-align-center{
  align-items: center !important;
  justify-items: flex-start;
}

.align-items-start{
  align-items: flex-start !important;
}

.align-items-center{
  align-items: center !important;
}




.flex-grow-1{
  flex-grow: 1;
}

.flex-grow-2{
  flex-grow: 2;
}

.flex-grow-3{
  flex-grow: 3;
}

.flex-grow-4{
  flex-grow: 4;
}

.flex-grow-5{
  flex-grow: 5;
}

.flex-grow-6{
  flex-grow: 6;
}

.justify-content-end{
  justify-content: end;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gap-0{
  gap:0px ! important;
}

.gap-5{
  gap:5px ! important;
}

.gap-10{
  gap:10px ! important;
}

.gap-20{
  gap:20px
}

.gap-30{
  gap:30px
}

.gap-40{
  gap:40px
}

.gap-50{
  gap:50px
}

/*Decoration*/

.pointer{
    cursor: pointer;
} 

/* Button */
.btn, 
.btn-outline{
    border-radius:5px;
    padding:10px;
    font-size:16px;
    text-align:center;
    cursor:pointer;
    border:none;
    margin: 0 3px;
}


.btn-small{
  width:140px
}

.btn-medium{
  width:240px
}

.btn-large{
  width:340px
}

.rounded{
  border-radius: 50rem !important;
}

.small-btn{
  border-radius:5px;
  padding:7px;
  font-size:14px;
  text-align:center;
  cursor:pointer;
  border:none;
  margin: 0 3px;
}

.btn-outline{
    outline:none;
    background: transparent;
}


.btn-primary{
    background-color: var(--primary-color);
    border:1px solid var(--primary-color);
    color:#fff;
}

.btn-secondary{
    background-color: var(--secondary-color);
    border:1px solid var(--secondary-color);
    color:#fff;
}

.btn-success{
  background-color: var(--success-color);
  border:1px solid var(--success-color);
  color:#fff;
}

.btn-warning{
  background-color: var(--warning-color);
  border:1px solid var(--warning-color);
  color:#fff;
}

.btn-transparent{
  background-color: transparent;
}

.btn-danger{
  background-color: var(--error-color);
  border:1px solid var(--error-color);
  color:#fff;
}

.btn-outline-primary{
  border: 1px solid var(--primary-color);
  background: #fff;
  color:var(--primary-color);
}

.btn-outline-primary-light{
  border: 1px solid var(--primary-light-color);
  background: #fff;
  color:var(--primary-color);
}



.btn-outline-secondary{
  border: 1px solid var(--secondary-color);
  background: #fff;
  color:var(--secondary-color);
}

.btn-outline-success{
  border: 1px solid var(--success-color);
  background: #fff;
  color:var(--success-color);
}

.btn-outline-black{
  border: 1px solid var(--black-color);
  background: #fff;
  color:var(--black-color);
}

.btn-outline-warning{
  border: 1px solid var(--warning-color);
  background: #fff;
  color:var(--warning-color);
}

.btn-outline-error{
  border: 1px solid var(--error-color);
  background: #fff;
  color:var(--error-color);
}

.btn-outline-light{
  border: 1px solid var(--light-color);
  background: #fff;
  color:var(--light-color);
}




.btn-group{ /*RAK*/
    display: flex; 
    flex-grow: 1;  
    justify-content:center;
    align-items: center;
    gap:0px;
    background-color: #fff;
    overflow: hidden;    
}

.btn-group .btn:nth-child(1){
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.btn-group .btn:nth-last-child(1){
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    
}

.btn-group .btn:not(:last-child),
.btn-group .btn:not(:first-child){
    border:0px;
    border-radius: 0px;
}

.btn-group .btn{
    margin:0px;
    font-size:16px;
}

.btn-group .btn.selected{
    background-color: #cec3ed;
    color: #fff;
    border:none;
}



/* font size 7 colors*/
.fs-10{
  font-size: 10px;
}

.fs-12{
  font-size: 12px;
}

.fs-14{
  font-size: 14px;
}
.fs-16{
  font-size: 16px;
}
.fs-18{
    font-size: 18px;
}
.fs-24{
    font-size: 24px;
}

.fs-30{
    font-size: 30px;
}

.fs-36{
    font-size: 36px;
}


.fw-3{
    font-weight: 300;
}

.fw-5{
    font-weight: 500;
}

.fw-7{
    font-weight: 700;
}

.bold{
    font-weight: bold;
}

.sm {
    font-size: 1rem;
}

.md {
font-size: 2rem;
}

.lg {
font-size: 3rem;
}

.xl {
font-size: 4rem;
}

.primary-text{
    color: var(--primary-color);
}

.primary-light-text{
    color: var(--primary-light-color);
}

.secondary-text{
    color: var(--secondary-color);
}

.light-text{
  color:#9B9B9B;
}

.dark-blue-text{
  color: var(--dark-blue-color);
}


.dark-text{
  color:#333;
}

.white-text{
  color:#fff;
}

.yellow-text{
  color:#ffe968;
}

.warning-text{
    color: var(--warning-color);
}


.lead{
  font-size: 1.5rem;
  font-weight: 300;
}


.text-center{
    text-align: center;
}
.text-left{
    text-align: left;
}
.text-right{
    text-align: right;
}

.text-ellipsis {
  white-space: nowrap;    /* Prevents text from wrapping to a new line */
  overflow: hidden;       /* Hides the text that overflows the container */
  text-overflow: ellipsis;
}


/* Heights */

.h-20{
  height:20px !important;
}
.h-25{
  height:25px !important;
}
.h-30{
  height:30px !important;
}
.h-40{
  height:40px !important;
}
.h-50{
  height:50px !important;
}
.h-60{
  height:60px !important;
}
.h-100{
  height:100px !important;
}
.h-150{
  height:150px !important;
}
.h-200{
  height:200px !important;
}
.h-225{
  height:225px !important;
}
.h-250{
  height:250px !important;
}
.h-275{
  height:275px;
}
.h-300{
  height:300px !important;
}
.h-325{
  height:325px !important;
}
.h-350{
  height:350px !important;
}
.h-375{
  height:375px !important;
}
.h-400{
  height:400px !important;
}
.h-450{
  height:450px !important;
}
.h-500{
  height:500px !important;
}

.h-auto{
  height: auto !important;
}

.min-h-auto{
  min-height: auto !important;
}


/* Widths */
.w-20{
  width:20%;
}
.w-25{
  width:25%;
}
.w-30{
  width: 30%;
}
.w-35{
  width:35%;
}
.w-40{
  width: 40%;
}
.w-50{
  width: 50%;
}
.w-60{
  width: 60%;
}
.w-70{
  width: 70%;
}
.w-75{
  width: 75%;
}
.w-80{
  width: 80%;
}
.w-90{
  width: 90%;
}
.w-100{
  width: 100%;
}

.w-150{
  width: 150px;
}
.w-200{
  width: 200px;
}
.w-250{
  width: 250px;
}
.w-300{
  width: 300px;
}
.w-350{
  width: 350px;
}
.w-375{
  width: 375px;
}

.mw-500{
  max-width: 500px;
}


/* Margin */
.mr-small{
  margin-right:5px;
}

.mx-1 {
  margin:0 1rem;
}
.mx-2 {
  margin:0 2rem;
}




 .my-1 {
    margin: 1rem 0;
  }
  
  .my-2 {
    margin: 1.5rem 0;
  }
  
  .my-3 {
    margin: 2rem 0;
  }
  
  .my-4 {
    margin: 3rem 0;
  }
  
  .my-5 {
    margin: 4rem 0;
  }
  
  .m-sm{
    margin:5px
  }

  .m-0 {
    margin: 0 !important;
  }

  .m-1 {
    margin: 1rem;
  }
  
  .m-2 {
    margin: 1.5rem;
  }
  
  .m-3 {
    margin: 2rem;
  }
  
  .m-4 {
    margin: 3rem;
  }
  
  .m-5 {
    margin: 4rem;
  }


  .ml-1 {
    margin-left: 3px;
  }
  
  .ml-2 {
    margin-left: 5px;
  }

  .ml-3 {
    margin-left: 7px;
  }

  .ml-4 {
    margin-left: 9px;
  }

  .ml-5 {
    margin-left: 11px;
  }

  .mr-1 {
    margin-right: 7px;
  }

  .mr-2 {
    margin-right: 1em;
  }
  
  .mt-1{
    margin-top: 1rem;
  }

  .mt-2{
    margin-top: 1.5rem;
  }

  .mt-3{
    margin-top: 2rem;
  }

   .mt-10{
    margin-top: 10px;
  }
  
  .mb-1{
    margin-bottom: 1rem;
  }

  .mb-2{
    margin-bottom: 1.5rem;
  }

  .mb-3{
    margin-bottom: 2rem;
  }

  .mt-4{
    margin-top: 3rem;
  }

  .mb-4{
    margin-bottom: 3rem;
  }

  .mt-5{
    margin-top: 4rem;
  }

  .mb-5{
    margin-bottom: 4rem;
  }
  
  /* Padding */
  .p-sm{
    padding:5px;
  }
  .p-md{
    padding:7px;
  }

  .p-0{
     padding:0rem;
  }

  .p-1 {
    padding:1rem;
  }

  .p-2 {
    padding:1.5rem;
  }

  .pt-1 {
    padding-top: 1rem;
  }
  
  .pt-2 {
    padding-top: 1.5rem;
  }
  
  .pt-3 {
    padding-top: 2rem;
  }
  
  .pt-4 {
    padding-top: 3rem;
  }

   .pt-5 {
    padding-top: 4rem;
  }

   .pt-6 {
    padding-top: 5rem;
  }

   .pt-7 {
    padding-top: 6rem;
  }

 


  .pb-1 {
    padding-bottom: 1rem;
  }
  
  .pb-2 {
    padding-bottom: 1.5rem;
  }
  
  .pb-3 {
    padding-bottom: 2rem;
  }
  
  .pb-4 {
    padding-bottom: 3rem;
  }

  

  .px-1 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .px-2 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

   .px-3 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

   .px-4 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .pr-1{
    padding-right: 1rem;
  }

  .pr-2{
    padding-right: 1.5rem;
  }

  .pr-3{
    padding-right: 2rem;
  }
  .pr-4{
    padding-right: 3rem;
  }

  .pr-5{
    padding-right: 5rem;
  }


  .pl-1{
    padding-right: 1rem;
  }
  .pl-2{
    padding-left: 1.5rem;
  }

  .pl-3{
    padding-left: 2rem;
  }
  .pl-4{
    padding-left: 3rem;
  }

  .pl-5{
    padding-left: 5rem;
  }

  
  
  .pb-5 {
    padding-bottom: 4rem;
  }

  
  .py-1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  
  .py-2 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  .py-3 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  .py-4 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .py-5 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  
  .py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .py-7 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  

  .p-1 {
    padding: 1rem;
  }
  
  .p-2 {
    padding: 1.5rem;
  }
  
  .p-3 {
    padding: 2rem;
  }
  
  .p-4 {
    padding: 3rem;
  }
  
  .p-5 {
    padding: 4rem;
  }

  /* Backgound*/
  .bg-light{
    background-color: #fbfafa;
  }

  .bg-strict-light{
    background-color: #fcfcfc;
  }

  .bg-white{
    background-color: #fff;
  }

  .bg-primary{
    background-color: var(--primary-color);
  }

  .bg-primary-light{
    background-color: var(--primary-light-color);
  }

  .bg-secondary{
    background-color: var(--secondary-color);
  }

  .bg-secondary-light{
    background-color: var(--secondary-light-color);
  }

  .bg-warning{
    background-color: var(--warning-color);
  }

   .bg-success{
    background-color: var(--success-color);
  }

  .bg-dark{
    background-color: var(--dark-color);
  }

  .bg-google {
    color: #fff;
    background-color: #4687f2;
  }

  .bg-facebook {
    color: #fff;
    background-color: #3b5998;
  }

  .bg-transparent{
    background: transparent;
  }

  .bg-blue-light{
    background-color: var(--blue-light-color);
  } 

  .bg-blue{
    background-color: var(--blue-color);
  } 

   .bg-danger{
    background-color:  var(--error-color);
  } 

  /* Color */

  .white-color{
    color: #fff;
  }

  .primary-color{
    color: var(--primary-color);
  }

  .secondary-color{
    color: var(--secondary-color);
  }

  .secondary-light-color{
    background-color: var(--secondary-light-color);
  }

  .warning-color{
    color: var(--warning-color);
  }

   .success-color{
    color: var(--success-color);
  }

  .blue-light-color{
    color: var(--blue-light-color);
  } 

  .blue-color{
    color: var(--blue-color);
  } 

  .danger-color{
    color: var(--error-color);
  } 

  /*border*/

.border-primary{
    border: 1px solid var(--primary-color);
}

.border-secondary{
    border: 1px solid var(--secondary-color);
}



  .border-bottom-light{
    border-bottom: 1px solid #eee
  }

  .border-bottom-light-dashed{
    border-bottom: 1px dashed #eee
  }

  .border-bottom-primary{
    border-bottom: 1px solid #e3d9ff
  }

  .border-top-primary{
    border-top: 1px solid #e3d9ff
  }

  .border-primary-light{
    border: 1px solid #e3d9ff
  }
  
    .border-light{
    border: 1px solid #eee
  }

  .border-light-dashed{
    border: 1px dashed #eee
  }

  .border-left-light{
    border-left: 1px solid #eee
  }

  .border-top-light{
    border-top: 1px solid #eee
  }

  .border-right-light{
    border-right: 1px solid #eee
  }

  .border-white{
    border: 1px solid #fff
  }

  .border-left-white{
    border-left: 1px solid #fff
  }

  .border-top-white{
    border-top: 1px solid #fff
  }

  .border-right-white{
    border-right: 1px solid #fff
  }


  .border-0{
    border: none;
  }



  /* Messages feedback */
  .invalid-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
  }

/*navbar*/
.navbar{ 
    overflow: visible;
    /*box-shadow: 0 0 .5rem #0000000a, 0 .125rem 1.125rem #0000001a;*/ /*RAK*/
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    top: 0;   
}

.navbar .flex{    
    height: 100%;
    overflow: visible;
}

.navbar-brand{
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1.5rem;
    white-space: nowrap;
    gap:0
}

/*
.navbar-brand img{
    margin-right: 7px;
}*/

.navbar  a.navbar-brand span{
    color: var(--primary-color);
    display: inline-block;
    text-transform: capitalize;
    font-weight: 300;
}

.navbar   a.navbar-brand span:last-child {
    color: var(--secondary-color);
    /*margin-left:3px;*/
}

.navbar .nav-menu{
    overflow: visible;
}

 .nav-menu .mobile-menu-header {
        display: none;
  }

.navbar .nav-menu,
.navbar .nav-list {
    display:flex;
    column-gap:15px;
    z-index: 999;
}

.navbar .nav-list{
    margin-top:10px;
    margin-right:20px;
}

.navbar .nav-toggle,
.navbar .nav-close {
    display: none;
}

.navbar .nav-item{
   position:relative;
   padding-top:20px;
   padding-bottom:30px;
   font-weight: 300;
}

.navbar .nav-options{
   padding-top:25px;
   padding-bottom:25px;
}


.navbar .nav-link{
 color:var(--primary-color);
 font-size: 16px;
}

.navbar .nav-link.active{
    color:var(--secondary-color)
   }

.navbar .dropdown-menu{
    position: absolute;
    background-color: var(--primary-color);
        left:0px;
    top:6rem;
    width:150px;
    z-index:1000;
    border-radius:10px;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.3s, opacity .3s, top .1s; 
}

.navbar .dropdown-menu li{
    padding: 10px;
    border-bottom:1px solid #2f325c;
    
}

.navbar .dropdown-menu li:first-child{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.navbar .dropdown-menu li:last-child{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.navbar .dropdown-menu a{
    color:#fff;
}

.navbar .dropdown-item:hover{
    color:#fff;
    background-color: var(--secondary-color);
}


.navbar .nav-item:hover .dropdown-menu,
.navbar .dropdown-menu:hover{
    opacity:1; 
    top: 55px;
    visibility: visible;
    border: 1px solid var(--secondary-color);
}

  /* Tabs */

.nav-tab {
    overflow: hidden;
    margin-top: 30px;
    display: flex;
    gap:15px;
    width:100%;
    border-bottom: 1px solid #ccc;
}

.nav-tab .tab-link {
    cursor:pointer;
    padding:5px;
    font-size: 18px;
    color:var(--primary-color);
}

.nav-tab .tab-link.active,
.nav-tab .tab-link:hover {
    color:var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color)
}

.tab-content{
    padding:20px 5px;
    
}

.tab-pane{
    display: none;
    transition: display 0.5s;
}
.tab-pane.default,
.tab-pane.active{
    display:block;
}


/* card */

.card{
    box-shadow: 0 0px 5px #ccc;
    min-width:160px;
    min-height:150px;
}

.card-header{
  border-bottom:1px solid #eaeaea;
}

.card-title{
  font-size: 0.9em;
}

.card-body{
  min-height:200px;
}



.image-card {
    margin: 1em;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.image-card img {
    width: 100%;
    height:200px;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

.image-card .details {
    width: 100%;
    height:150px;
}

.image-card .round-icon{
  position:absolute;
  top:-10px;
}


/* radius */
.radius-5{
  border-radius: 5px;
}
.radius-10{
  border-radius: 10px;
}
.radius-20{
  border-radius: 20px;
}
.radius-30{
  border-radius: 30px;
}

.radius-left-10{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.radius-right-10{
   border-top-right-radius: 10px;
   border-bottom-right-radius: 10px;
}

.radius-top-left-10{
  border-top-left-radius: 10px;
}
.radius-bottom-left-10{
  border-bottom-left-radius: 10px;
}
.radius-top-right-10{
   border-top-right-radius: 10px;
}

.radius-bottom-right-10{
   border-bottom-right-radius: 10px;
}

.rounded{
  border-radius: 50%;
}

.round-icon {
  width: 50px !important;
  height: 50px;
  border-radius: 50%; /* Rend le div parfaitement rond */
  display: flex;
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
}

/* Style de l'icône */
.round-icon i {
  font-size: 24px;
}

/* Slider */

.swiper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 60px;
}

.swiper-slide {
  text-align: center;  
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Parallalax*/

.parallax {
  height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* ui dropdown */

  .ui-dropdown {
      position: relative;
      display: inline-block;

    }

      .ui-dropdown .ui-dropdown-trigger {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
      }

      /* Menu */
      .ui-dropdown ul.ui-dropdown-menu {        
        left: 0px;
        position: absolute;
        top: 46px;
        width: 220px;
        background: #ffffff;
        border-radius: 5px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        display: none;
        flex-direction: column;
        z-index: 1000;
      }

      .ui-dropdown ul.show {
        display: flex;
      }

      /* Items */
      .ui-dropdown ul.ui-dropdown-menu li {
        padding: 12px 16px;
        text-decoration: none;
        color: #111827;
        font-size: 14px;
        cursor: pointer;
        transition: background 0.2s ease;
      }

      .ui-dropdown ul.ui-dropdown-menu li.active::before {
        content: '\2713';
        color: #111827;
        margin-right: 5px;
      }

      .ui-dropdown ul.ui-dropdown-menu li.active{
        color: var(--dark-blue-color)
      }
      

      .ui-dropdown ul.ui-dropdown-menu li:hover {
        background: #f3f4f6;
      }

      /* Séparateur */
      .ui-dropdown ul.ui-dropdown-menu li.separator {
        height: 1px;
        padding:0px;
        background: #e5e7eb;
        margin: 0;
      }


/* User Dropdown */


      .ui-dropdown  img.user-img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      /* Header */
      .ui-dropdown .dropdown-user-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
      }

      .ui-dropdown .user-info {
        display: flex;
        flex-direction: column;
      }

      .ui-dropdown .user-info .role {
        font-size: 12px;
        color: #6b7280;
      }  


/*text*/


.text-primary{
  color: var(--primary-color);
}

.text-secondary{
  color: var(--secondary-color);
}

.text-success{
  color: var(--success-color);
}

.text-warning{
  color: var(--warning-color);
}

.text-error{
  color: var(--error-color);
}

.text-black{
  color: var(--black-color);
}

.text-blue{
    color: var(--blue-color);
}

.chip {
    padding: px 8px;
    border-radius: 10px;
    font-size: 14px;
    background: rgba(126, 62, 255, 0.08);
    color: var(--violet);
}

.chip-outline {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 14px;
    border:1px solid #6c757d;
    background: #fff;
    color: #6c757d;
}


.chip-primary {
    padding: 2px 8px;
    font-size: 14px;
    background: var(--primary-light-color);
    border-radius: 10px;
    color: var(--primary-color);
    font-weight: bold;
}

.chip-secondary {
    padding: 2px 8px;
    font-size: 14px;
    background: rgba(255, 78, 184, 0.08);
    border-radius: 10px;
    color: #9d174d;
    font-weight: bold;
}

.chip-success {
    padding: 2px 8px;
    font-size: 14px;
    background:  rgb(247, 250, 243);
    border-radius: 10px;
    color: var(--success-color);
    font-weight: bold;
}


.chip-outline:has(input[type="checkbox"]:checked) {
  /* CSS styles to apply to the parent */
  background-color: var(--secondary-color);
  color: #fff;
  border:1px solid #fff
}



/*.chip-primary:before{
  content : "\002022";
  color: var(--primary-color);
  margin-right: 3px;
}

.chip-secondary:before{
  content : "\002022";
  color: var(--secondary-color);
  margin-right: 3px;
}*/

.text-muted {
  color: #6c757d !important;
}



/* Sepearator */

.text-line{
  width:400px;
  position:relative;
  z-index:99;
  text-align: center;
}

.text-line span{
  background: #fff !important;
  padding:3px 10px;
}

.text-line::before{
  content:"";
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  position:absolute;
  border-bottom: 1px solid #dee2e6;
  width:100%;
  height:1px;
  z-index:-1;
}

hr.separator {
  border-left: 0px;
  border-top: 1px solid #fbfbfb !important;
  margin: 2px 0px 20px 0px;
}

hr.separator-sm{
  border-left: 0px;
  border-top: 1px solid #fbfbfb !important;
  margin: 2px 0px 3px 0px;
}


.liner {
  display: flex;
  margin: 15px auto;
  font-weight: bold;
}

 .liner:after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: #ccc;
    margin: auto;
    margin-left: 10px;
  }

  .pill {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(126, 62, 255, .18);
    background: rgba(126, 62, 255, .08);
    color: var(--primary-color);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: #f59e0b;;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.dot.ok{ background: var(--ok); box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.dot.err{ background: var(--err); box-shadow: 0 0 0 3px rgba(239,68,68,.18); }



.section-title{
    position: relative;
    display: inline-block; /* adapte la largeur au texte */
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    padding-bottom:15px;
}

.section-title::after{
    content:"";
    position:absolute;
    width:60px;          /* longueur de la ligne */
    height:4px;          /* épaisseur */
    background: var(--secondary-color);  /* rose */
    border-radius:50px;  /* arrondi */
    bottom:0;
    left:50%;
    transform:translateX(-50%);
}

/***** Forms *****/

.form-control {
  display: inline-block;
  width: 100%;
  padding: 0.475rem 0.75rem;
  font-size: 0.941rem;
  font-weight: 400;
  line-height: 1.5;
  color: #5A5657;
  background-color: #ffffff;
  background-clip: padding-box;
  border: 1px solid #E5E5E5;
  appearance: none;
  border-radius: 8px;
  margin: 10px 0;
  /*transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
}

.form-select {
  display: inline-block;
  width: 100%;
  padding: 0.475rem 0.75rem;
  font-size: 0.941rem;
  font-weight: 400;
  line-height: 1.5;
  color: #5A5657;
  background-color: #ffffff;
  background-clip: padding-box;
  appearance: none;
  border-radius: 8px;
  margin: 10px 0;
  /*transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;*/
}


.input-group, 
.input-group-right{
  /*padding:0px 10px;  */
  width:350px;
  position:relative;
  border-radius:5px;
  border:1px solid #E5E5E5;
  display:inline-block
}

.input-group span ,
.input-group-right span{    
  margin:0 auto;
  padding:3px;
  width:40px;
  height:100%;
  background:#E5E5E5;
  position:absolute;
}

.input-group span{  
  left: 0px;
}

.input-group input{  
  margin-left: 35px !important;
  border:0px;
  margin: 0px;
}



.input-group-right span{  
  right: 0px;
  text-align: center;
}

.input-group-right:has(.input-amount) {
  width:140px
}

.input-group .form-control,
.input-group-right .form-control:focus{
  border: none;
  outline: none;
}


.input-group:has(.form-control),
.input-group-right:has(.form-control){
  margin: 0px !important;
}

.input-group .form-control,
.input-group-right .form-control{
  margin: 0px !important;
  border: 0px;
}



input[type="text"],
input[type="password"]{
  outline:0px;
  /*border:0px;*/
  height:40px;
  padding:10px;
  color:#999;
  font-size:16px;
}

.form-check-label{
  display: inline-block;
  min-width: 70px;
}


.form-check-input {
  width: 1.3em;
  height: 1.3em;
  vertical-align: middle;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 1px solid rgba(0, 0, 0, 0.25);
  appearance: none;
  print-color-adjust: exact;
}

.form-check-input[type=checkbox] {
  border-radius: 0.25em;
  margin-right:5px;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #93C4F6;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(219, 47, 105, 0.25);
}
.form-check-input:checked {
  background-color: #DB2F69;
  border-color: #DB2F69;
}
.form-check-input:checked[type=checkbox] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #DB2F69;
  border-color: #DB2F69;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}

.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  width: 2em;
  margin-left: -2.5em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2393C4F6'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}

.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}




.logo-upload-container {
  width: 160px !important;
  height: 160px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 5px;
  text-align: center;
  background-color: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.logo-preview {
  width: 160px;
  height: 160px;
  object-fit: cover;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.logo-upload-icon {
  font-size: 50px;
  color: #6c757d;
  margin-top: 20px;
}

.upload-text {
  font-size: 15px;
  color: #6c757d;
  margin-top: 5px;
}

.logo-dimensions {
  font-size: 12px;
  color: #6c757d;
  margin-top: 2px;
}

#fileInput, #fileInfo {
  display: none;
}

.selected-file-info {
  margin-top: 10px;
  font-size: 12px;
}

/*choices librairy */

.choices__list--single {
  padding: 0px 16px 0px 4px ;
}

.choices__list--multiple .choices__item {
  background-color: var(--secondary-color);
  border-color: #fff;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--primary-color);
  border-color: #fff;
}

.choices__inner {
  background-color: #fff;
  border-radius: 7px;
}

.choices__input {
  background-color: #fff;
}

.choices[data-type*="select-multiple"] .choices__button,
.choices[data-type*="text"] .choices__button {
  border-left: 1px solid #fff;
}


/* RAK*/

.input-wrapper {
  border: 1px solid var(--primary-color);
  background : #fff;
  padding: 7px 10px; 
}

.input-wrapper label {
  color: var(--primary-color);
}

.input-wrapper select {
  /*outline: none;
  appearance: none;*/
  background:transparent;
  /*border: 1px solid  var(--primary-color);*/
  border:none;
  border-bottom: 1ps solid #666;
  border-radius: 5px;
  color: var(--primary-color);
  padding:2px;
  text-align: center;
}

.input-wrapper select::after{
  content: "\\25BC";
  position: absolute;
  color:#b45151;
  right: 10px;
}


/* utilities */

.pos-fixed{
  position: fixed;
}

.centered{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.d-block{
  display: block;
}



.d-none{
  display: none;
}


.d-inline{
  display: inline;
}

.d-inline-block{
  display: inline-block;
}

.p-relative{
  position: absolute;
}

.p-absolute{
  position: absolute;
}

.full-width{
  width: 100%;
}

.width-100{
  width: 100%;
}

.width-60{
  width: 60%;
}

.width-50{
  width: 50%;
}

.width-40{
  width: 40%;
}

.width-25{
  width: 25%;
}

/*steps*/

.steps-wrapper {
max-width: 1100px;
margin: 0 auto;
background: var(--bg);
padding: 30px 20px;
border-radius: 18px;
}

.steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
position: relative;
gap: 16px;
}

.steps-4 {
grid-template-columns: repeat(4, 1fr);
}

.steps-3 {
grid-template-columns: repeat(3, 1fr);
}

.steps::before {
content: "";
position: absolute;
top: 32px;
left: 10%;
right: 10%;
border-top: 3px dashed var(--light-color);
z-index: 0;
}

.step {
position: relative;
z-index: 1;
text-align: center;
}

.step-icon {
width: 66px;
height: 66px;
margin: 0 auto 10px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
font-size: 26px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}



.step-number {
font-size: 20px;
font-weight: 800;
/*color: var(--pink);*/
line-height: 1;
margin-bottom: 4px;
}



.step-title {
font-size: 14px;
font-weight: 800;
margin-bottom: 5px;
}

.step-text {
font-size: 12px;
line-height: 1.35;
max-width: 160px;
margin: 0 auto;
}

@media (max-width: 850px) {
    .steps {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .steps::before {
        top: 35px;
        bottom: 35px;
        left: 33px;
        right: auto;
        border-top: none;
        border-left: 3px dashed var(--light-color);
    }

    .step {
        display: grid;
        grid-template-columns: 70px 1fr;
        text-align: left;
        align-items: center;
        gap: 14px;
    }

    .step-icon {
        margin: 0;
    }

    .step-content {
        padding-right: 8px;
    }

    .step-text {
        margin: 0;
        max-width: none;

    }
}



/************* Form-wizard ***************/

.form-wizard{
  position:relative;
  overflow: visible;
}

.wizard-header{
  display: flex;
  flex-direction: column;
  width:220px;
}

.wizard-header-row{
  display: flex;
  flex-direction: row;
  width:220px;
}



.form-wizard .wizard-wrapper {
  align-items: start;
}

.form-wizard .wizard-step{
  position: relative;
  margin-bottom:40px;

}

.form-wizard .wizard-body{
  flex-grow: 1;
}

.form-wizard .wizard-body .card{
  vertical-align: baseline;
}

.form-wizard .wizard-step:not(:last-child) .step-number::after{
  content: "";
  height:70px;
  width:1px;
  position:absolute;
  bottom:-70px;  
  left:15px;
  background-color: #999;
}

.form-wizard .wizard-header .step-number{
  border-radius: 50%;
  padding:5px 10px;
  background-color: var(--primary-color);
  color:#fff;
  position: relative;
  height: 30px;
  width: 30px;
}

.form-wizard .wizard-step.active .step-number{
  background-color: var(--secondary-color);
}
.form-wizard .wizard-step.active .step-title{
  color: var(--secondary-color);
}

.form-wizard .step-details{
  width:200px;
}

.form-wizard .step-title{
  margin:0px; padding: 0px;
  line-height: 1.2;
  color: #191818
  /*border: 1px solid #f30;*/
}

.form-wizard .step-description{
  margin:0px; padding: 0px;
  line-height: 1.2;
  color: #4e4848;
  font-size:12px;
  /*border: 1px solid #f30;*/
}


.form-wizard .step-description{
  margin:0px; padding: 0px;
}

.form-step{
  width:600px;
  padding:3px 50px;
  background-color: #fff;

}
.form-header{}
.form-header .flex{ justify-content: start;}
.form-header img { border-radius: 50%; padding:3px;  background-color: #fff; border: 1px solid #eaeaea;}
.form-details p{margin: 0px; padding: 0px;}




.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  background-color: #0d6efd;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
}

.range {
    width: 100%;
    height: 15px;
    appearance: none;
    -webkit-appearance: none;
    background: #d3d3d3;
    outline: none;
    margin:10px 0;
    border-radius: 15px;
    flex-grow: 1;
  }

/* Styles for WebKit browsers (Chrome, Safari, Edge, etc.) */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Required for overriding default look */
  appearance: none;
  height: 25px;            /* Set a specific height */
  width: 25px;             /* Set a specific width */
  background: var(--secondary-color);     /* Set your desired color (e.g., green) */
  cursor: pointer;         /* Change cursor on hover */
  border-radius: 50%;      /* Optional: Make it a circle */
}

/* form-search */

 .search-wrapper{
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid var(--light-color);
  padding-left: 7px;
  margin-right: 10px;
}

.search-wrapper input{
  background-color:transparent;
  outline: none;
  border: none;
  color: #999;
  width:300px
}

.search-wrapper .btn{
  padding:11px;
  margin:1px
}
/*input file*/

      input[type="file"] {
        background-color: #fff;
        border-radius: 10px;
        border: 1px solid var(--primary-light-color);
        width: 100%;
        padding: 3px;
        color:#999;
        font-size: 14px;
      }
      input[type="file"]::file-selector-button {
        background-color: var(--primary-light-color);
        color: var(--primary-color);
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
      }

      input[type="file"]::file-selector-button:hover {
        background-color: var(--secondary-color);
        color:#fff;
      }

      input[type="file"]:hover {
        border: 1px solid var(--secondary-color);
        color:#fff;
      }

    


/*Mutiple select */

select {
  appearance: none;
}

.multiple-select{
  border:1px solid var(--primary-color);;
  outline: none;
  padding:15px 0px;
  height:300px;
  width:300px;
}

.multiple-select option{
  padding: 5px 15px;
  appearance: none;
}

.multiple-select option:enable,
.multiple-select option:active,
.multiple-select option:focus{
  background-color: var(--primary-color);
}

/*** Map ***/

/*.card.custom-card {
  background-color: transparent;
}

.card.custom-card .card-header {
  background-color: var(--white-color) !important;
  border-block-end: 1px solid #f5f5f5
}

.card-footer {
  
  padding: 0px;
  margin: 0px !important;
  padding: 1rem 0rem !important;
}
*/

.map-container {

  /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  background-color: transparent;
  border-radius: 10px;*/
  /*padding: 10px;

  margin: 5px auto 10px auto;*/
  /*height: 400px;*/
  width: 100%;
  position: relative;
}

#map,
#agent-map,
#agency-map,
#customer-map {
  position: relative;
  width: 100%;
  height: 300px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: #f8f8f8;
  /*margin-top: 20px;*/
  z-index: 1;
  /*position: absolute;*/
}

.radius-info {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: 20;
  padding: 8px 15px;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  font-weight: 700;
  color: #E7501F
}

.range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #666;
}

.map-wrapper {
  position: relative;
}

.suggestions {
  position: absolute;
  z-index: 1000;
  background: white;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  display: none;
}

.suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f8f9fa;
}


#detailProfileMap{
  position: relative;
  width: 100%;
  height: 300px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background: #f8f8f8;
  /*margin-top: 20px;*/
  z-index: 1;
  /*position: absolute;*/
}


/*** Table ***/


table {
  width: 100%;
  background-color: #fbfafa;
  /*padding: 1rem;*/
  border: 1px solid #eee;
  border-collapse: collapse;
}

caption,
th,
td {
  padding: 0.5rem;
  border: 1px solid #eee;
}

caption,
th {
  padding: 0.5em;
  text-align: left;
  font-size: 10px;
}

caption {
  padding: 0.7em;
  background: #eee;
  color: #d9534f;
  font-size: 1.1em;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #eee;
  display: none;
}

th {
  background-color:  #f0f2f8; /* #cec3ed; */ /* #393d72;*/
  border: none;
  color: #666;
  text-transform: uppercase;
  font-size: 13px;
}

tr:nth-of-type(2n) {
  background-color: #f2f2f2;
}

td{
  font-weight: 300;
}

@media (max-width: 650px) {


  .nav-menu-wrapper {
    width: 200px ;
  }
 
 /*response pour les tables excepté les tables de fullcalendar ayant la class fc-list-table (list view adapte deja au mobile*/
  table:not(.fc-list-table)  th {
    display: none;
  }

  table:not(.fc-list-table)td:first-child {
    padding-top: 2rem;
  }

  table:not(.fc-list-table) td:last-child {
    padding-bottom: 2rem;
  }

  table:not(.fc-list-table) td:not(.check-item) {
    display: block;
    padding: 0.5rem, 1rem;
    border: 0;
  }

  table:not(.fc-list-table)  td:not(.check-item):before {
    content: attr(data-cell) ": ";
    font-weight: 700;
    text-transform: capitalize;
  }
}

.table-size select {
  width: 60px
}
    
/* Table pagination */

.table-pagination ul{
  border-radius: 10px;
  
  border: 1px solid #a09a9a;
  gap: 0px;
}


.table-pagination ul li{
  line-height: 15px;
 /* padding: 2px 15px 2px 0px */
 /*padding: 2px 10px 2px 0px;*/
 min-width:25px;
 padding: 10px;
 text-align: center;
 cursor:pointer;

 /*color:var(--primary-color);
 background-color:var(--secondary-color)*/

}

.table-pagination ul li.active{
  background-color: var(--primary-color);
  color:#fff
}

.table-pagination ul li:not(:last-child){
  border-right:1px solid #666
}



/*pagination*/
.pagination li a {
  display: block; /* let links fill the list item */
  padding: 8px 15px;
  text-decoration: none;
  border: 1px solid var(--primary-color);
  color: -var(--primary-color);
  margin: 0 4px;
  background-color: #fff;
  border-radius: 5px; /* add rounded borders */
}

.pagination li a:hover {
  background-color: var(--primary-color);
  color: #fff;
} 

.pagination li a.active {
  background-color: var(--secondary-color);
  color: #fff;
  border: none;
}


/* box-shadow*/

.box-shadow-gray{
     box-shadow: 0px 6px 16px 2px rgba(0, 0, 0, 0.05);
}

/*Progress bars*/

@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
.progress {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.75rem;
  --bs-progress-bg: #e9ecef;
  --bs-progress-border-radius: 10px;
  --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-progress-bar-color: #fff;
  /*--bs-progress-bar-bg: #DB2F69;*/
  --bs-progress-bar-bg: #5cb85c;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  border:1px solid #ccc;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}

.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  /*white-space: nowrap;*/
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
  border:1px solide red;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}


.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}

.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}

/*Status*/
.status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.status-success {
  background-color: var(--success-color); 
}

.status-error {
  background-color: var(--error-color);
}


/* Images choices */

.imgChoices{
    display: flex;
    justify-content: center;
    gap:30
}

/*.imgChoice-input{
    position:absolute;    
    opacity:0;
    pointer-events:none;
}*/

.imgChoice-input{
    position:absolute;    
    opacity:0;
    pointer-events:none;
}

.imgChoice{
     display: block;
     margin:0px 10px;
     position: relative;
     border: 1px solid  #d7d5d5;
     border-radius: 50%;/*border-radius: 10px;*/
     /*overflow:hidden;*/
     background: #fff;
     cursor:pointer;
     transition: transform .5s ease, border-color .12s 

}

.imgChoice-check{
    position:absolute;
    top:-1px;
    right:-1px;
    /*top:-10px;
    right:-10px;*/
    background: var(--light-color);
    border-radius:50%;
    padding:0px 4px;
    border:1px solid #d7d5d5;
}
.imgChoice-check i{
    opacity:.5;
    color:#ccc
}

.imgChoice:hover{
    transform: translateY(-5px);
    border-color: var(--secondary-color);
}

.imgChoice:hover .imgChoice-check{
    border-color: var(--secondary-color);
}

.imgChoice:hover .imgChoice-check i{
   color: var(--secondary-color);
}

.imgChoice-media{
   display:flex;
   justify-content: center;
   padding:5px;
}

.imgChoice-media img{
   width:80px; 
    height:80px;
    object-fit: cover;
}

.imgChoice-img{
    width:64px; 
    height:64px;
    border-radius:10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));   
}

.imgChoice-detail{
    background:var(--light-color);
    /*padding: 10px 12px 2px;*/
    text-align:center;
    padding:10px;
    border-radius: 0px 0px 10px 10px;

}

.imgChoice-title{
    font-weight:900px;
    font-size:13px;
    margin:0;
}

.imgChoice-desc{
    margin: 4px 0 0;
    font-size: 12px;
    opacity: 0.7; 
}

.imgChoice-input:checked + .imgChoice{
    border-color: var(--primary-color)
}

.imgChoice-input:checked + .imgChoice .imgChoice-check{
    border-color: var(--primary-color)
}

.imgChoice-input:checked + .imgChoice .imgChoice-check i{
    color: var(--primary-color)
}


.object-fit-cover{
    object-fit: cover;
}

/*** Mediaqueries ***/


@media (max-width:768px){

  

  /* General Reponsive*/
  .flex-grow-1{
    width:100%
  }

  .btn-text{
    display: none;
  }

  .text-left, .text-right{
    text-align: center
  }

  .search-header, .profile-header, .profile-summary {
    height:auto;
  }

  .flex{
        flex-direction: column;
        flex-wrap: wrap;
        height: auto;
        /*text-align: center;*/
  }

   .title-flex.flex{
    flex-direction: row;
   }
   .title-flex.flex *{
    width:auto;
   }

   .flex > *{
        justify-self: center;
        width:100%
        
  }

  .nav-menu-wrapper {
    width: 300px ;
  }

 

  .grid{
    grid-template-columns: 1fr;
    grid-column: 1;
    grid-row: 1;
  }

 
  /*form*/
  .form-control{display: inline-block;}

  .profile-agent-edit .flex-grow-1 {
    width:100%;
  }

  /*Index page*/

  .hero-banner .flex {
    flex-direction: column-reverse;
  }

   .hero-banner .banner-img img, .hero-banner .banner-img {
    height:275px
   }

   /*Logo*/
   .logo{
    width: 150px;
    height: 40px;
  
   }

  /* Wizard */

  .wizard-header{
    flex-direction: row;
    width: 100%;
    margin-top:40px;
    justify-content: center;
    
  }
  .wizard-step{
    flex-direction: column;
  }
  .step-details{
    text-align:center;
  }
  .step-description{
    display: none;
  }
  .form-wizard .wizard-step:not(:last-child) .step-number::after{
    content: "";
    height:1px;
    width:80px;
    position:absolute;
    top:15px;
    margin-left: 25px;
    padding-left: 15px;
    bottom:0px; 
    background-color: #999;
  }

  .form-wizard .wizard-step{
    width:120px;
    
  }

  .form-wizard .wizard-header .step-number{
    text-align: center;
    /*padding: 8px 8px;*/
    width: 40px;
  }


 .form-wizard .step-details {
  display: none;
 }

  

  .wizard-wrapper{
    display: flex ;
    flex-direction: row;
    justify-content: space-between;
  }

  .wizard-body{
    min-height:800px;
    /*margin-top: 100px;*/
  }
}

/* main Menu */

@media (max-width: 460px) {

 
     
      /*Index-page*/

      .hero-banner .banner-img img, .hero-banner .banner-img {
        height:250px
      }

       /*wizard header*/
      .form-wizard .wizard-step:not(:last-child) .step-number::after{
        content: "";
        width:45px;
        margin-left: 25px;
      }

      .form-wizard .wizard-step{
        width:45px;
        margin:10px
      }

      .form-wizard .step-details {
        display: none;
      }


   /* Navbar */


        .navbar a.navbar-brand span {
          font-size: 14px !important;
        }
      }

      @media (max-width: 1100px) {
        .navbar .nav-toggle {
          display: block;
        }

        .navbar .nav-close {
          display: block;
          text-align: right;
        }

        /*.top-header-options {
          display: none !important;
        }*/

        .navbar .nav-menu {
          display: none;
          position: absolute;
          top: -40px;
          right: -10000px;
          width: 280px;
          height: 100vh;
          z-index: 2000;
          background-color: #fff;
          border: 1px solid #eee;
          box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
          transition: right 0.25s ease;

          flex-wrap: nowrap;
          overflow: hidden;
        }

        .navbar .nav-menu.active {
          right: 0;
          display: flex;
          flex-direction: column;
          transform: translateX(0) !important;
        }

        .nav-menu.active .nav-list {
          flex-direction: column;
          gap: 5px;
        }

        .nav-menu.active .nav-list .nav-item {
          width: 100%;
          padding-top: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
        }

        .container {
          width: 100% !important;
          padding: 5px 20px;
        }
        .nav-menu.active .mobile-menu-header {
          display: flex;
          justify-content: space-between;
          padding: 20px;
          border-bottom: 1px solid #eee;
          height: auto;
        }

        .nav-menu.active .nav-list {
          padding: 10px 20px;
          height: auto;
        }

        /*.nav-menu.active .nav-list .nav-item {
          width: 100%;
          position: relative;
          margin-bottom: 10px;
          background-color: #5cb85c;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
        }*/

        .navbar .dropdown-user ul.ui-dropdown-menu {
          left: -160px;
        }

        .navbar #username {
          display: none;
        }

        .navbar a.navbar-brand span {
          font-size: 20px;
        }

        .navbar .flex{
          flex-direction: row;
          flex-wrap: nowrap;
         

        }

        .language {
          display: none;
        }

        .dropdown-language {
          display: block;
        }
      }