@font-face {
    font-family: 'Bootstrap Icons';
    src: url('../libraries/bootstrap-icons-1.11.3/font/fonts/bootstrap-icons.woff2') format('woff2'),
         url('../libraries/bootstrap-icons-1.11.3/font/fonts/bootstrap-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../fonts/IBMPlexSansArabic-Regular.ttf') format('opentype');
   
    font-style: normal;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic Medium';
    src: url('../fonts/IBMPlexSansArabic-Medium.ttf') format('opentype');
   
    font-style: normal;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic bold';
    src: url('../fonts/IBMPlexSansArabic-Bold.ttf') format('opentype');
   
    font-style: normal;
}
@font-face {
    font-family: 'PublicSans';
    src: url('../fonts/PublicSans-Regular.ttf') format('opentype');
   
    font-style: normal;
}

@font-face {
    font-family: 'PublicSans bold';
    src: url('../fonts/PublicSans-Bold.ttf') format('opentype');
   
    font-style: normal;
}
*{
    font-family: "IBM Plex Sans Arabic" ;
}
.disabled{
    display: none  !important;
}
.navbar{
    --bs-navbar-padding-y:0px !important;
    padding: 0;
    margin: 0 auto;
    width: 100%;
}

li.nav-item{
    font-size: 16px;
    font-weight: bold;
}
header nav .main-nav {
    display: flex
;
    flex-grow: 1;
}

.gaca-dropdown-item {
    
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-family: 'IBM Plex Sans Arabic Medium';
    color: rgb(0, 0, 0);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;

    border: 0;
}


.gaca-dropdown-item:hover {
    background-color: #198754;
    color: #fff;

}
.nav-link{
    color: black !important; 
    font-size: 16px;
    color: var(--text-default);
    font-family: 'IBM Plex Sans Arabic Medium' ;
 
    display: flex;
    align-items: center;
    padding: 1.5rem 1rem;
    position: relative;
    transition: all 0.3s ease-in-out;
    line-height: 1.5rem;
    border-radius: 5px;
    margin: 2px;
    border: 2px solid transparent;
   font-weight: 500;
    text-transform: capitalize;
}

#navbarNavDepartmentMenuLink {
  background-color: white !important;
  border: 2px solid green !important;
  color: black !important;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#navbarNavDepartmentMenuLink:hover {
  background-color: #f0f0f0 !important; /* light grey */
  color: green !important;
}

.nav-link:hover{
    background-color: #f3f4f6 !important;
     transition: transform 0.3s ease;
    border-radius: 4px !important;
    color: #161616 !important;
}
.nav-link:focus{
    border-color: black;
}
.nav-link:hover::before {
    content: "";
    background-color: #94969c !important;
    position: absolute;
    inset: auto 8px 0;
    height: 6px;
    background-color: transparent;
    border-radius: 12px;
    width: calc(100% - 16px);
    transition: transform 0.3s ease; 
}
header nav .navbar-nav{
    padding-inline-start: 0px;
}
.btn{
    color: black;
    background-color: transparent;
}
.hero {
    width: 100%;
    height: 65%;
    color: white;
    padding: 0px 95px 0px ;
    text-align: start;
    background-size: cover;
    background-repeat: no-repeat;
    
    animation: backgroundCycle 7s infinite;
}

@keyframes backgroundCycle {
    0% { background-image: url('../images/Layer_1e.svg'); }
    25% { background-image: url('../images/Layer_2e.svg'); }
    50% { background-image: url('../images/Layer_3e.svg'); }
    75% { background-image: url('../images/Layer_4e.svg'); }
    100% { background-image: url('../images/Layer_1e.svg'); } /* Retour au début */
}
.hero .hero-description .hero-btn:focus {
    border: 2px solid black;
}
.hero .hero-description .hero-btn:hover {
    background: #E5E7EB;
    border: none ;
    transition: all .4s ease-in-out;
}
.feature-title{
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
}
.container .description-feautres-service{
    
    width: 90%;
    font-size: 16px;
    line-height: 24px;
  
}

.slick-next {
    left: 0;
    transition: 0.4s;
}
.slick-prev , .slick-next {
    top: 108% !important;

}

.slick-dots{
    right: 0 ;
    width: 14% !important;
}
.btn-outline-light {
    background: transparent;
    border: 1px solid #d2d6db;
    color: black;
    font-size: 16px;
    font-weight: 600;
    height: 40px;
}
.btn-outline-light:hover{
   
    background-color: #E5E7EB;
    border-color: #E5E7EB;
}
.btn-outline-light:focus{
   
   
    border-color: #000000;
}


.button.navbar-toggler{
    background: #1b8354;

}
.hero .hero-description .hero-btn{
    background: white;
    font-size: 16px;
    font-weight: 700;
    border: none;
} 

.list-group-item:hover {
    background-color: #f0f0f0; /* Change la couleur de fond au survol */
    cursor: pointer;
    transition: all .4s ease-in-out;
}
.sub-category .list-group-item:hover {
    background-color: white !important;
    transition: all .4s ease-in-out; /* Empêche le changement de fond au survol */
}
.card-title{
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;

}
.carousel-control-prev{
    top: 40%;
    left: -7%;
    background-color: #014526;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
       

}

.carousel-control-next{
    top: 40%;
    right: -5%;
    background-color: #014526;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
}
.carousel-control-prev:hover,.carousel-control-next:hover{
    background-color: #1b8354;
      transition: transform 0.3s ease;
}

.slick-next, .slick-prev{
    z-index: 5;
}
  .slick-next{
    right: 15px;
  }
  .slick-prev{
    left: 15px;
  }
  .slick-next:before, .slick-prev:before{
    color: #000 !important;
    font-size: 26px;
  }
 .feature-slider .slick-slide {
    height: auto !important;
    margin: 0px 10px;
}
.feature-slider .slick-dots{
    bottom: -50px !important;
}
.feautres-service{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

}
.description-feautres-service{
    width: 80%;
    font-size: 15px;
}
.icons{
    color: #1b8354;
}
.card-text{
    text-align: justify;
    font-size: 16px;
    line-height: 24px;
}

.image-digital{
    width: 100%;
  
    object-fit: contain;
    transition: all .3s ease-in-out;
   
}
.card-eservices:hover img{
    transform: scale(1.1);
    transition: all .4s ease-in-out;
}
.card-eservices:hover .card-title {
    text-decoration: underline;
    transition: all .4s ease-in-out;
}
.section-detail-feautres{
    margin-bottom: 10rem;
}
.digital-portal{
    display: flex;
    flex-wrap: wrap;
}
.btn-tag1{
    background: #ecfdf3;
    border: 1px solid #abefc6;
    color: #085d3a;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 4px;
    font-size: 12px;
}
.btn-tag2{
    background: #eff8ff;
    border: 1px solid #b2ddff;
    color: #1849a9;
    font-weight: 600;
    padding: 5px 13px;
    border-radius: 4px;
    font-size: 12px;
}
.btn-tag3{
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #1f2a37;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 4px;
    font-size: 12px;
}
.btn-action{
    background: #FFFFFF;
    border: 1px solid #d2d6db;
    color: #161616;
    font-weight: 700;
}
.btn-action:hover {
    background: #d2d6db;
    border: 1px solid #d2d6db;
    color: #161616;
    font-weight: 700;
    transition: all .4s ease-in-out;
}
.btn-view{
    background: #198754;
    border:2px solid #198754;
    color: white;
    font-weight: 600;
    transition: all .4s ease-in-out;
}
.btn-view:hover{
    background:rgb(19, 105, 65);
    border-color:rgb(19, 105, 65);
    color: white;
    font-weight: 600;
}
.btn-view:focus{
    border-color:black;
    transition: all .4s ease-in-out; 

}
.btn-view:active{
    background:rgb(19, 105, 65) !important;
 	transition: all .4s ease-in-out;
    color: white !important;

}
.slick-dots{
    bottom: -34px !important;
}
.section-service{
    
    background: #f9fafb;
    padding: 1rem 1rem 3rem 1rem;
}
.card-eservice:hover img {
    transform: scale(1.1);
    transition: all .4s ease-in-out;
}
.card-eservice:hover  {
   border-color: black;
   transition: all .4s ease-in-out;

}
.card-eservices:hover {
    border-color: black;
    transition: all .4s ease-in-out;

}


.slick-dots li.slick-active button:before {
  
    color: #1b8354 !important;
    font-size: 10px;
}
.slick-dots li button:before{
    font-size: 13px !important;
}
.eservice-slider .slick-slide {
    height: auto  !important;
    margin: 0px 10px;
}
.card-eservices {
    min-height: 555px !important;
    /* width: 370px !important; */
    /* margin: 1rem; */
    border: 2px solid transparent;
    box-shadow: 0 4px 8px 0 rgba(16, 24, 40, .1);
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    padding: .6875rem .6875rem 1.75rem;
    border-radius: 16px;
    min-height: 19.5625rem;
}
.eservice-slider.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: 130px;
}
.eservice-slider .slick-dots{
    bottom: -50px !important;
}


.footer {
    background-color: #074D31 !important; /* Couleur verte foncée */
    color: #ffffff !important;
    padding: 0px 0 24px 0;
    background-color: #074D31;
    min-height: 400px;
}
.container-xl, .container-lg, .container-md, .container-sm, .container-fluid{
    margin-left: auto;
  margin-right: auto;
  padding-left: calc(65px * 0.5);
  padding-right: calc(65px * 0.5);
  width: 100%;
}

.footer h3 {
    font-size: 15px;
    font-weight: bold;
    line-height: 24px;
    margin-bottom: 6px !important;
    display: block;
 
    border-bottom: 1px solid rgba(225, 255, 255, 0.3);
    padding-bottom: 10px;
}

.footer a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.footer a:hover {
    color: #b2c8ba;
    text-decoration: underline;
      transition: transform 0.3s ease; 
}

.social-icons a, .accessibility-icons a {
    color: #b2c8ba;
    margin-right: 15px;
}

.social-icons{
    display: flex;
}
.social-icons .box{
    display: flex;
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.30);
}
.social-icons svg{
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1.874px 2.764px 1.873px 2.653px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.scrollspy-example-2 h4 {
    font-weight: 600;
}

.accessibility-icons{
    display: flex;
}
.accessibility-icons .box{
    display: flex;
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.30);
}
.accessibility-icons svg{
    display: flex;
    width: 20px;
    height: 20px;
    padding: 1.874px 2.764px 1.873px 2.653px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.rotated{
    transform: rotate(180deg);
    transition: transform 0.3s ease; 
}
.bbi{
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

.footer-subscribtion{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}
.subscribtion-title{
    font-size: .75rem;
    text-decoration: underline;
  
}
#EServiceSearchInput:focus{
    border-color: #030404;
    outline: 0;
    box-shadow: none;
    border: 2px solid;
}
#EServiceSearchInput{
    width: 95%;
}
.footer-copyright p
{
    font-size: .875rem;
    color: var(--color-white);
    line-height: 20px;
    font-weight: 500;
}
.feauture-card{
 max-width:540px !important;   
    display: flex !important;
    box-shadow: 0 4px 8px 0 rgba(16, 24, 40, .1);
    border-radius: 10px;
    min-height: 324px;

}
.feauture-card:hover{
    border-color: black;
    transition: transform 0.3s ease; 
}
.feauture-card-body{
    flex-direction:column;
    display:flex;
}

/* Service Page */
.eservice-body{
    display:flex;
    flex-direction:column
}
.card-eservice{
    box-shadow: 0 4px 8px 0 rgba(16, 24, 40, .1);
    min-height: 557px !important;
    max-width: 530px !important;
    
}
.service-card {
    box-shadow: 0 4px 8px 0 rgba(16, 24, 40, .1);
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: left;
    background: #fff;
    height: 100%;
    display:flex;
    min-height: 344px;
    flex-direction:column
}
.service-card:hover{
    border-color: #000;
    transition: transform 0.3s ease; 
}
.service-card h5 {
    font-size: 1.1rem;
    font-weight: bold;
}
.star-rating {
    text-align: start;
    color: gold;
    font-size: 20px;
}
.nombre-view{
    font-size: 14px;
}
.read{
    border-color: #ffffff;
}
.apply-btn {
    background-color: #28a745;
    color: white;
}
.category-list {
    
    overflow-y: auto;
}
.list-group-item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: none;
    border-right: none;
}
.list-group-item.active {
    background-color: #fff;
    color: black;
    border-color: #000 !important;
    border-radius: 0;
    border: 1px solid black !important;
}
.sub-category {
    display: none;
    
}
.chevron {
    float: right;
}
.item-valeur{
    border: 1px solid #cfeadd;
    font-size: 12px;
    width: 13%;
    padding: 2px;
    border-radius: 12px;
    background: #ecfdf3;
    color: #085d3a;
    display: flex;
        justify-content: center;
        align-items: center;
}
       
.category-list {
   
    overflow-y: auto;
    scrollbar-width: none; /* Pour Firefox */
    scrollbar-color: #9e9e9e #f8f9fa; /* Couleur du scroll et du fond */
    border-radius: 0 ;
}
.border-highlight {
    background: #f0f0f0;
    border: 1px solid #000000;
    
}
/* Pour les navigateurs basés sur WebKit (Chrome, Edge, Safari) */
.category-list::-webkit-scrollbar {
    width: 8px;
}

.category-list::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 10px;
}

.category-list::-webkit-scrollbar-thumb {
    background-color: #414643;
    border-radius: 10px;
    border: 2px solid #c4c4c4;
}

.category-list::-webkit-scrollbar-thumb:hover {
    background: #414643;
}

.sub-category .list-group-item {
    border: none;
}


/* Page Details*/
.breadcrumb-link{
    color: black;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
}
.breadcrumb-item {
    color: black;
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
}
.btn-apply{
    background: #e7dddd;
    border-color: #e7dddd;
    font-weight: bold;
}
.text-login  {
    text-decoration: underline;
    font-size: 16px;
    font-weight: 600;
}
.tags{
    border-radius: 7px;
    border: 1px solid #B2DDFF;
    background: #EFF8FF;
    padding: 3px 8px;
    align-items: center;
    color: #1849A9;
    text-align: center;
    /* Text 2xs/SemiBold */
    font-family: "IBM Plex Sans Arabic" !important;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
}
.description-details{
    font-family: "IBM Plex Sans Arabic" !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin-top: 1rem;
}
.link-details{
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1B8354;
    font-family: "IBM Plex Sans Arabic" !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;   
}
.link-details a{
    color: #1B8354;
    font-family: "IBM Plex Sans Arabic" !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none;
}
.container{
    font-family: "IBM Plex Sans Arabic" !important;
}
.nav-pills .nav-link{
    border-radius: 0 !important;
    font-size: 14px;
    font-weight: 500;
}
.nav-pills .nav-link.active{
    border-bottom: 2px solid green;  
    background-color: transparent !important;
    font-weight: 600;
    color: #000;
}
.class-target .list-group-item {
    cursor: none;
}
.list-group-numbered .list-group-item {
display: block;
border: none !important;
font-size: 14px;
}
.sub-category .list-group-item:hover {
    background-color: #f0f0f0 !important;
    cursor: pointer;
}
.sub-category .list-group-item{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.sub-category{
    
    padding-left: 0;
    padding-right: 0;
}

.procedure .list-group-item {
    font-size: 14px;
    display: block;
    border: none !important;
    }
.image-foms{
    width: 50% !important;
}
.description-help{
 
     margin: 0; 
    padding-left: 2rem;
    font-size: 14px;
    font-family: 'IBM Plex Sans Arabic';
    gap: 5px;
    }
.link-help{
    gap: 8px;
    color: #1B8354;
    font-family: "IBM Plex Sans Arabic" !important;
    font-size: 14px;
text-decoration: none;
    font-weight: 500;
}
.titre-details{
    font-weight: 700;
    margin-bottom: 10px;
}
.image-payment{
    border-radius: 6.511px;
    border: 1.085px solid #D2D6DB;
    background: #FFF;
    padding: 0.5rem;
    width: 62.937px;
    height: 43.405px;
    padding: 15px 7.582px 14.405px 7.739px;
}
.form-control:hover{
    border-color: #c4c4c4 !important;
    
}
.form-control{
    border:2px solid #f3f2f2  !important;
}
.form-control:focus {
   
    background-color: white !important;
    border-color: #c4c4c4 !important;
    outline: 0;
    box-shadow: none !important;
    border-bottom: 2px solid black !important;
}

.btn-download{
    border-radius:4px;
    background: #F3F4F6;
    border-color: #F3F4F6;  
}
.btn-download:hover{
    background: #a4a4a5;
}
.border-footer{
    border-top: 2px solid green;
}

/* Login page*/

.login-container {
    background: white;
    border: 1px solid #D2D6DB;
    padding: 16px;
    border-radius: 16px;
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); */
    width: 100%;
    max-width: 486px;
}
.login-container .logo {
    text-align: center;
    margin-bottom: 20px;
}
.login-container .logo h2 {
    color: #198754;
    font-weight: bold;
}
.login-container button {
    background-color: #1B8354;
    color: white;
}
.forgot-password {
    text-decoration: none;
    color: #198754;
}
/* forget password*/

.forget-container {
    background: white;
    border: 1px solid #D2D6DB;
    font-family: 'PublicSans';
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 486px;
    margin-bottom: 30px;
}

.forget-container .logo {
    text-align: center;
    margin-bottom: 20px;
}
.forget-container button {
    background-color: #1B8354;
    color: white;
}

.not-found{
    display: flex ;
        flex-direction: column;
        align-items: center;
}
 
.otp-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 1.2rem;
    border: 2px solid #dee2e6;
    border-radius: 10px;
    margin: 0 5px;
}
.otp-input:focus{
    border-color: rgb(52, 215, 141);
    box-shadow: 0 0 0 .25rem rgba(52, 215, 141);
}
.titre-details-contact{
    font-weight: 700;
    margin-bottom: 0;
    border-top: 2px solid #D2D6DB;
    padding-top: 2rem;
 
}
.back-retour {
    color: black;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
}
.back-retour:hover {
    color: #1b8754;
   
    text-decoration: underline;
  
}
.description-airline{
    color: #161616;
    font-size: 16px;
    line-height: 30px;
    font-weight: 400;
    text-align: justify;
}

.titre-steps{
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;

}
.upload-box {
          
    padding: 20px;
    text-align: center;
    border: 2px dashed #ccc;
    border-radius: 10px;
    background: white;
}
.upload-box.dragover {
    border-color: #007bff;
    background-color: #e9f5ff;
}


.table td {
    padding: 1rem;
    border-left: none;
    border-right: none; /* Ajustez la valeur selon vos besoins */
    }

.table thead th {
    padding: 1rem;
    background-color: #f2f2f2; /* Exemple pour définir la couleur de fond des th */
    color: rgb(0, 0, 0); /* Pour changer la couleur du texte */
}

.table input[type="checkbox"] {
    width: 25px;
    height: 25px;
    appearance: none; /* Supprime le style par défaut */
    border: 2px solid #ccc; /* Bordure par défaut */
    border-radius: 4px; /* Coins arrondis */
    background-color: white; /* Fond par défaut */
    position: relative;
}

/* Apparence lorsque la case est cochée */
.table input[type="checkbox"]:checked {
    background-color: green; /* Fond vert lorsque la case est cochée */
    border-color: green; /* Changer la bordure */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.41 1.41L9 19l10.59-10.59-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); /* Ajoute le checkmark en fond */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/* Deuxième ligne de tr (ligne 2) : fond gris */
table.table tbody tr:nth-child(odd) td {
    background-color: white !important;  /* Fond blanc pour les lignes impaires */
}

table.table tbody tr:nth-child(even) td {
    background-color: #f2f2f2 !important;  /* Fond gris clair pour les lignes paires */
}

.filter input[type="checkbox"] {
    width: 20px;
    height: 20px;
    appearance: none; /* Supprime le style par défaut */
    border: 2px solid #ccc; /* Bordure par défaut */
    border-radius: 4px; /* Coins arrondis */
    background-color: white; /* Fond par défaut */
    position: relative;
}

/* Apparence lorsque la case est cochée */
.filter input[type="checkbox"]:checked {
    background-color: green; /* Fond vert lorsque la case est cochée */
    border-color: green; /* Changer la bordure */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.41 1.41L9 19l10.59-10.59-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); /* Ajoute le checkmark en fond */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.filter input[type="radio"] {
    width: 20px;
    height: 20px;
    border-radius: 50% !important;
    appearance: none; /* Supprime le style par défaut */
    border: 2px solid #ccc; /* Bordure par défaut */
    border-radius: 4px; /* Coins arrondis */
    background-color: white; /* Fond par défaut */
    position: relative;
    
}
.filter label:hover {
    border: 2px solid #000000;
    border-radius: 7px;
}
.filter label {
    display: flex
;
    gap: 10px;
    padding: 0.25rem;
}
/* Apparence lorsque la case est cochée */
.filter input[type="radio"]:checked {
    background-color: green; /* Fond vert lorsque la case est cochée */
    border-color: green; /* Changer la bordure */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.41 1.41L9 19l10.59-10.59-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); /* Ajoute le checkmark en fond */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
}
.file-list {
    margin-top: 10px;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.file-list .file-name {
    display: flex;
    align-items: center;
}
.file-list .file-name::before {
    content: "✔";
    color: green;
    font-size: 18px;
    margin-right: 10px;
}
.remove-btn {
    background: none;
    border: none;
    font-size: 18px;
    color: red;
    cursor: pointer;
}

.step.check .circle::before {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M9 16.17l-4.17-4.17-1.41 1.41L9 19l10.59-10.59-1.41-1.41L9 16.17z"/></svg>');    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/*Steps*/
.progress-bar{
    position: absolute;
    width: 2px;
    height: 80%;
    background-color: #ccc;
    left: 18px;
    top: 40px;

}

.stepper {
    position: relative;
    width: 100%;
    max-width: 250px;
}

.step-2 .progress {
    position: absolute;
    width: 2px;
    height: 30%;
    background-color: #2f6d52;
    left: 18px;
    top: 38px;
    transition: height 0.4s ease-in-out;
}
.step-3 .progress {
    position: absolute;
    width: 2px;
    height: 55%;
    background-color: #2f6d52;
    left: 18px;
    top: 38px;
    transition: height 0.4s ease-in-out;
}
.step-4 .progress {
    position: absolute;
    width: 2px;
    height: 80%;
    background-color: #2f6d52;
    left: 18px;
    top: 38px;
    transition: height 0.4s ease-in-out;
}

.progress {
    position: absolute;
    width: 2px;
    height: 0%;
    background-color: #2f6d52;
    left: 15px;
    top: 20px;
    transition: height 0.4s ease-in-out;
}

.step {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 30px;
}

.step:last-child {
    margin-bottom: 0;
}

.circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-weight: bold;
    position: relative;
    z-index: 1;
    border: 2px solid #ccc;
}

.step.check .circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #1b8354 !important; /* Couleur du cercle complété */
    position: relative;
    font-size: 0; /* Cache le numéro */

    border: 2px solid #1b8354;
}

/* Remplace le texte par une icône SVG */
.step.check .circle::before {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17l-4.17-4.17-1.41 1.41L9 19l10.59-10.59-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
/* Masquer le texte original */

.step.completed .circle {
    background-color: white;
    color: #1b8354;
    border: 2px solid #1b8354;
}
.step.current .circle {
    border: 2px solid #2f6d52;
    background-color: white;
    color: #2f6d52;
}
.first-cotent{
    color: #ccc; 
}

.content {
    margin-left: 15px;
}

.title {
    font-weight: bold;
}

.description {
    font-size: 12px;
    color: gray;
}

.buttons {
    margin-top: 20px;
}


/* Conditions and terms page */

.accept-terms{
    input[type="checkbox"] {
        margin-inline-end: 15px;
        width: 25px;
        height: 25px;
        appearance: none;
        -webkit-appearance: none;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 3px;
        cursor: pointer;
        position: relative;
    }

    input[type="checkbox"]:checked {
        background-color: #198754;
        border: 1px solid #198754;
    }

    input[type="checkbox"]:checked::after {
        position: absolute;
        left: 5px;
        top: 1px;
        width: 6px;
        height: 12px;
        color: #fff;
        border-width: 0 3px 3px 0;
    }
}

.green-line-under{
    text-decoration: underline;
    color:#198754;
    text-decoration-color: #198754;
    font-weight: bold;
}

/* Airline Complaint Page */

.topic{
    display: inline-flex;
    border-bottom: 1px solid #D2D6DB;
    width: 100%;
    padding: 15px;
    h1{
        margin-bottom: 0;
        margin-inline-start: 20px;
        line-height: 1.5;
    }
}
.notification-airline{
    font-size: 13px; 
    border: 2px solid #DbA102;
    border-radius: 9px;
    font-weight: 600;
    color: #1F2A37;
}
.img-icon{
    background: #f3fcf6;
    width: 70px;
    height: 70px;
    border-radius: 4px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    img{
        width: 40px;
    }
}
.section{
    place-items: center;
    padding: 40px;
}
.star-rating {

    place-items: center;
    display: inline-flex;
    width: 100%;
  
    unicode-bidi: bidi-override;
    margin-top:auto;
}
.star-rating input {
    display: none;
}
.star-rating label {
    font-size: 1.5em;
    padding: 0;
    cursor: pointer;
    color: gold;
}
.star-rating label::before {
    content: "\2606"; /* Empty star Unicode */
    color: gray;
}
.star-rating input:checked ~ label::before,
.star-rating input:hover ~ label::before {
    content: "\2605"; /* Filled star Unicode */
    color: gold;
}
.question {
    margin: 20px auto;
    border-bottom: 1px solid #D2D6DB;
    place-items: center;
}
.big-star label{
    font-size: 2.5em;
}

.container-text {
    margin-top: 50px;
    width: 100%;
}
.textarea-container {
    margin-bottom: 20px;
}
.textarea-container textarea {
    width: 100%;
    height: 100px;
}
.button-container {
    margin-bottom: 20px;
    text-align: center;
}
.button-container button {
    padding: 10px;
    background-color: 198754;
    border-radius: 4px;
    color: white;
    border: none;
    cursor: pointer;
}
.confirmation {
    margin-top: 50px;
    border: 1px solid #ccc;
    padding: 20px;
    display: inline-block;
}
.confirmation p {
    margin: 10px 0;
}
.back-button {
    padding: 10px 20px;
    background-color: 198754;
    color: white;
    border: none;
    cursor: pointer;
}
.box{
    width: max-content;
    place-self: center;
    padding: 20px;
    .topic{
        align-items: center;
    }
    .img-icon{
        width:60px;
        height: 60px;
        img{
            width: 20px;
        }
    }
    h3{
        margin-bottom: 0;
        margin-inline-start: 20px;
    }
}

/* Applicant Information Page */
.applicant-form{
    .form-group {
        margin: 30px 0;
    }
    .form-group label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 8px;
        border: none;
        border-radius: 5px;
        background-color: #f3f4f6;
    }
    .form-group textarea {
        border: 1px solid #ccc;
        resize: vertical;
    }
    .form-group .help-text {
        font-size: 0.9em;
        color: #666;
    }
    .file-upload {
        display: flex;
        align-items: center;
    }
    .file-upload input {
        flex: 1;
    }
    .file-upload .file-name {
        margin-left: 10px;
    }
    .question-mark {
        display: inline-block;
        border: 1px solid;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        font-weight: bold;
        margin-inline-end: 5px;
        margin-top: 7px;
        margin-right: 10px;
        margin-left: 10px;
    }
}
.titre-page{
    font-size: 2.125rem;
    font-family: 'IBM Plex Sans Arabic bold';
}
.main-header {
  border-top: 1px solid #d2d6db;
  border-bottom: 1px solid #d2d6db;
  background-color: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
  position: sticky; 
  top: 0;         
  z-index: 1020;   
}

.bs-stepper-header {
    flex-direction: column;
}
.bs-stepper .step-trigger:focus{
    color:#198754 !important;
    .bs-stepper-circle {
        background-color: #198754 !important;
    }
}

/* MyApplication*/
.titre-myApplication{
    padding-bottom: 24px;
    border-bottom: 1px solid #D2D6DB;
}
.filter{
    width: 20% ;
}
.tables{
    width: 80%;
}
.filter-option{
    padding-bottom: 0.5rem;
    border-bottom: 1px solid;
    margin-bottom: 2rem;
}
.hidden { display: none; }
.status-approved {
    color: #FFF !important;
    font-weight: bold;
    height: 11%;
    border: 1px solid #c7e8db;
    padding: 0.25rem;
    border-radius: 5px;
    background: #318160;
}
.status-info {
    color: #FFF !important;
    font-weight: bold;
    height: 11%;
    border: 1px solid #3c919c;
    padding: 0.25rem;
    border-radius: 5px;
    background: #3c919c;
}
.status-rejected {
     color: #FFF !important;
      font-weight: bold;
    height: 11%;
    border: 1px solid #ffc7c7;
    padding: 0.25rem 0.8rem;
    border-radius: 5px;
    background: #b6433b;
}
.status-pending { color: #FFF !important; 
    font-weight: bold; 
  
    height: 11%;
    border: 1px solid #e6f1ff;
    padding: 0.25rem 0.8rem;
    border-radius: 5px;
    background: #4a76ce;
}
.status-review { 
    color: #FFF !important;
    font-weight: bold;
    height: 11%;
    border: 1px solid #444f5c;
    padding: 0.25rem 1rem;
    border-radius: 5px;
    background: #1F2A37; 
}
.status-filter:checked {
accent-color: green; /* Applique une couleur verte */
}
.titre-table{
    font-size: 16px !important;
}
#tableBody{
    font-size: 14px !important;  
}
.pagination {
    display: flex;
    list-style: none;
    padding: 0;
}

.pagination li {
    margin: 0 5px;
}

.pagination .page-link {
    text-decoration: none;
    padding: 8px 12px;
    border: none; /* Supprime les bordures */
  
    background-color: #f0f0f000;
    color: #161616;
    font-size: 16px;/* Taille du texte */
    transition: all 0.3s ease-in-out;
}

.pagination .page-link:hover {
    background-color: #ddd; /* Effet au survol */
}

.pagination .active .page-link {
    background-color: #007bff00; /* Couleur active */
    color: rgb(0, 0, 0);
    font-weight: bold;
    border-bottom: 2px solid green;
}
.first-item{
    border-bottom: 1px solid #DBDADE   
}
/* Shared */

/* Required Forms */
.link-block {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    a {
      color: #1b8354 !important;
      line-height: 4rem;
    }
    img {
      margin-top: 1.5rem;
    }
  }
  
  /* Shared */
  .content {
    padding: 24px;
  }
  
  .btm-brd-section {
    border-bottom: 1px solid #d2d6db;
    padding: 15px 0;
  }
  
  .topic-block {
    width: 100%;
    color: #fff;
    background: #1b8354;
    height: 48px;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 16px;
  }
  .formGACA {
    label {
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 400;
    }
    .form-group {
      margin-bottom: 28px;
    }
  }
  
  .out-line-btn-green {
    border: 1px solid #1b8354;
    color: #1b8354;
    padding: 8px 16px;
    background: #fff;
  }
  .help-text {
    font-size: 14px;
    color: #666;
  }
  .question-mark {
    display: inline-block;
    border: 1px solid;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
    font-weight: bold;
    margin-inline-end: 5px;
    margin-top: 8px;
  }
  .upload-btn {
    padding: 6px 13px;
    border-radius: 4px;
    background: #0d121c;
    color: #fff;
    width: fit-content;
  }
  
  /* Contact us */
  .info-block{
      display: inline-flex;
      .img-container{
          margin-inline-end: 24px;
      }
      p,.bold{
          font-weight: bold;
      }
  }
  /* About E-Service */
  
  .side-bar{    
      display: flex;
      flex-direction: column;
      width: 100%;
      
      a{
          text-decoration: none;
          color: #384250;
          padding-left: 20px;
      }
     
      .sub{
          padding-left: 40px;
      }
  }
  .border-raduis{
    border-radius: 5px 5px 5px 5px !important;
    }
  /* Aircraft Registration */
  .status-succces-badge{
      color: #fff;
      background: #1b8354;
      padding: 2px 10px;
      display: inline-flex;
      border-radius: 15px;
      align-items: center;
      justify-content: center;
      align-content: center;
  }
  .status-circle{
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      margin-inline-end: 4px;
  }
  
  .attachment {
    width: 100%;
    padding: 22px 18px;
    background: rgba(236, 253, 243, 1);
    border-bottom: 1px solid #1b8354;
    display: inline-flex;
    align-content: center;
    align-items: center;
    margin-bottom: 24px;
}

.attachment p {
    margin-bottom: 0;
    margin-inline: 8px;
}

.attachment span {
    color: rgba(6, 118, 71, 1);
}

/* Page Admin */
#dropdownMenuButton{
    background: #0d121c;
    color: white !important;
    border-radius: 10px;
}
.modal-header , .modal-footer{
    border: 0 !important;
}
.image-uas,.image-medical{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease-in-out;
}
.digital-image{
 
    overflow: hidden;
    border-radius: 8px;  
}

/*Responsive*/

@media (min-width: 1800px){
    .container{
        max-width: 1700px;
    }
}
@media(max-width: 1600px){
    .card-eservice {
        min-height: 580px !important;
    
        max-width: 395px !important;
      
    }
}

@media(max-width: 1199px){
	.card-eservice {  
        max-width: 430px !important;      
    }
nav .navbar-collapse{
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    padding: 16px 0px;
   
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
header nav .main-nav{
    width: 100%;
    flex-direction: column;
}
nav .navbar-nav{
    padding: 0px 16px;
}
nav .navbar-nav  .nav-item{
    position: static;
    border-bottom: 1px solid rgb(210, 214, 219);
}
nav .navbar-nav  .nav-item .nav-link{
    background: transparent;
    padding: 8px 0px !important;
}
nav .navbar-nav  .nav-item .nav-link:hover {
    background-color: #f3f4f6;
    color: #092a1e !important;
}
      
}
@media(max-width: 991px){
    .logo-HR{
        width: 170px !important;
        padding: 1rem;
    }
    .style-mobile{
        padding-left:0.5rem;
        padding-right:0.5rem
    }
    .navbar{
        width: 100%;
    }
    .hero-description{
     
        width: 100%;
    }

    .hero .pos-img {
        position: relative;
        left: 0%;
        top: 7%;
    }
    .hero {
       
        padding: 148px 25px;
    
    }
    .img-hero{
        width: 100%;
    }
    .description-feautres-service{
        width: 100%;
    }
    .slick-slide{
        height: 50% !important;
    }
   
    .navbar-toggler:focus{
        box-shadow:none
    }
    .slick-initialized .slick-slide{
        display: flex !important;
            justify-content: center;
    }
    .slick-dots{
        margin-bottom: 0rem !important;
        width: 50% !important;
    }
}
@media(max-width: 765px){
    .slick-initialized .slick-slide{
        display: flex !important;
            justify-content: center;
    }
    .slick-dots{
        margin-bottom: 0rem !important;
        width: 50% !important;
    }
    .logo-HR{
        width: 150px !important;
    }
    .footer{
        text-align: center;
    }  
  
    .hero .pos-img {
        position: relative;
        left: 0%;
        top: 0%;
    }
    .hero {
        padding: 172px 31px 89px;
    }
    .hero-description {
        width: 100%;
       
    }
    .footer-subscribtion{
        justify-content: center;
    }
    .responsive-view{
        flex-direction: column;
    }
    
}
@media (max-width: 567px){
    .container-fluid{
        padding: 2px;
    }
    .logo-HR{
        width: 120px !important;
    }
    .slick-initialized .slick-slide{
        display: flex !important;
            justify-content: center;
    }
    .nav-link{
        padding: 1rem;
    }
    #brand-text{
        width: 130px;
    }
    .eservice-slider .slick-dots {
        bottom: -67px !important;
    }
    [dir='rtl'] .slick-next {
        right: auto;
        left: 0px !important ;
        transition: 0.4s;
    }
    [dir='rtl'] .slick-prev {
        left: auto;
        right: 0px  ;
        transition: 0.4s;
    }
    .slick-prev, .slick-next{
        top: 108% !important ;
    }
    .slick-next {
        right: 0px ;
        left: auto;
    }
    .slick-prev {
        left: -7px ;
        right: auto;
    }
    .feauture-card{
        width: 100% !important;
    }
    .slick-dots{
        margin-bottom: 0rem !important;
        width: 60% !important;
    }
    .slick-slide{
        height: 44% !important;
    }
    
}
@media(max-width:420px){
    .container-fluid{
        padding: 0;
    }
    .feautres-service{
        display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    }
    .card-eservice{
        width: 100% !important;
        margin:0;

    }

}


.feedback-conatiner{
    margin-top: 1.5rem;
}
#YesOptions .feedback-title,
#NoOptions .feedback-title{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1.5rem;
    line-height: 1.75rem;
}
#YesOptions .feedback-title h2,
#YesOptions .feedback-title .h2,
#NoOptions .feedback-title h2,
#NoOptions .feedback-title .h2 {
    margin: 0;
    font-family: "IBMPlexSansArabic-Bold";
    font-size: 1.125rem;
    line-height: 1.75rem;
}
#YesOptions .feedback-title p,#NoOptions .feedback-title p {
    line-height: 1.75rem;
    margin: 0;
    margin-left: .75rem;
}
@media(max-width: 769px) {
    #YesOptions .feedback-title,#NoOptions .feedback-title {
        flex-direction:column;
        align-items: flex-start;
    }
 
    #YesOptions .feedback-title p,#NoOptions .feedback-title p {
        margin: 0;
    }
}
 
#YesOptions .form-check,#NoOptions .form-check {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    margin-bottom: 1rem;
    height: initial;
    padding-left: 2.1875rem;
    width: fit-content;
}
 
#YesOptions .form-check.customed-checkbox-btn:before,#NoOptions .form-check.customed-checkbox-btn:before {
    left: 1%;
    transform: translate(-38%,-50%);
}
 
#YesOptions .form-check:hover,#NoOptions .form-check:hover {
    cursor: pointer;
}


#YesOptions .form-check:not(:last-of-type),#NoOptions .form-check:not(:last-of-type) {
    margin-bottom: 1.5rem;
}
 
#YesOptions .form-check .form-check-input[type=checkbox],#NoOptions .form-check .form-check-input[type=checkbox] {
    border-radius: .125rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
    margin-top: 0;
    border: 1px solid #6c737f;
}
#YesOptions .form-check .form-check-input[type=checkbox]:checked,#NoOptions .form-check .form-check-input[type=checkbox]:checked {
    background-color: #1b8354;
    border: 1px solid #1b8354;
}
 
#YesOptions .form-check .form-check-input[type=checkbox]:focus,#NoOptions .form-check .form-check-input[type=checkbox]:focus {
    box-shadow: none;
}
 
#YesOptions .form-check labelhover,#NoOptions .form-check labelhover {
    cursor: pointer;
}
 
.gender-wrapper {
    margin-top: 1.5rem;
    padding: .875rem 0;
    margin-bottom:1.5rem;
}
 .close-feedback:hover{
    background-color:#e5e7eb;
    color:black;
 }
.gender-wrapper .form-label-container {
    display: flex;
    gap: 24px;
}
 
@media screen and (max-width: 768px) {
    .gender-wrapper .form-label-container .form-check.customed-checkbox-btn:before {
        left:2%;
        transform: translate(-34%,-50%);
    }
}
 
.gender-wrapper .form-label-container .form-check.customed-radio-btn:before {
    left: 21%;
}
 
@media screen and (max-width: 768px) {
    .gender-wrapper .form-label-container .form-check.customed-radio-btn:before {
        left:6%;
    }
}
 
@media screen and (max-width: 767px) {
    .gender-wrapper .form-label-container .form-check.customed-radio-btn:before {
        left:4%;
    }
}
 
@media screen and (max-width: 480px) {
    .gender-wrapper .form-label-container .form-check.customed-radio-btn:before {
        left:5%;
    }
}
 
@media screen and (max-width: 320px) {
    .gender-wrapper .form-label-container .form-check.customed-radio-btn:before {
        left:8%;
    }
}
 
@media(max-width: 769px) {
    .gender-wrapper .form-label-container {
        flex-direction:column;
    }
}
 
.gender-wrapper .gender-text {
    line-height: 1.5rem;
    margin-right: 1rem;
}
 
.gender-wrapper .input-wrapper {
    line-height: 1.5rem;
    margin: 0!important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    width: initial;
}
 
@media(max-width: 769px) {
    .gender-wrapper .input-wrapper {
        margin-bottom:.5rem!important;
    }
}
 
.gender-wrapper .input-wrapper:hover {
    cursor: pointer;
}
 
.gender-wrapper .input-wrapper .radio-input {
    width: 24px;
    height: 24px;
    margin-right: .875rem;
   
    z-index: 2;
    opacity: 1;
}
 
.feedback-textarea {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
 
@media(max-width: 769px) {
    .feedback-textarea {
        margin-top:1.5rem;
    }
}
 
#feedback-yes-form-rating label,#feedback-no-form-rating label {
    line-height: 1.5rem;
    margin-bottom: .5rem;
}
 
#feedback-yes-form-rating textarea,#feedback-no-form-rating textarea {
    padding: .75rem 1rem;
}
 
.rating-body-footer,.rating-body-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.5rem;
    margin-bottom:1.5rem;
}
.custom-control-indicator-radio{
    border-radius:50%
}
.custom-control-indicator-radio:before {
    transition: all .3sease-in-out;
    position: absolute;
    content: "";
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    z-index: 0;
    left: -8px;
    top: -8px;
    background-color: transparent;
    pointer-events: none;
}

.optional_label::after {
    content: ' (Optional)';
    color: #00a886;
    font-family: 'GR';
    font-size: 14px;
}

.required_label::before {
    content: '* ';
    color: red;
    
}

.dga_header{
display: flex;
justify-content: space-between;
align-items: center;
background-color:#F3F4F6;
flex-wrap: wrap; 
}

.dga_container{
 	display: flex;
    align-items: center;
    justify-content: space-between;
}

.dga_item{
 	display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dga_dropdown_item{
	display: flex;
    align-items: center;
margin-left: 0.75rem !important;
}

.weather_box{
	display: flex;
    align-items: center;
    margin-left: 0.75rem !important;
}
.green-text{
color:#1B8354;
}

#btn-digital-stamp-card {
  cursor: pointer;
}

#digital-stamp-body {
display: none !important;
}

#digital-stamp-body.open {
display: block !important;
}
#pre-nav-real-time-date-span,#location-span {
  white-space: nowrap;
}
.weather_icon{
	margin-right: 0.75rem !important;
}
#pre-nav-real-time-clock-span {
  display: inline;    /* make sure it's inline */
  white-space: nowrap; /* prevent wrapping at the space before AM/PM */
}

#weather-info {
  display: inline;    /* make sure it's inline */
  white-space: nowrap; /* prevent wrapping at the space before AM/PM */
}

.inline-text{
 display: inline;    /* make sure it's inline */
  white-space: nowrap;
}
/* Medium screens (tablets) */
@media (max-width: 1200px) and (min-width: 992px) {
    .dga_header {
        padding: 0.5rem !important;
    }
    
    .weather_box {
        margin-left: 0.5rem !important;
    }
    
    .weather_icon {
        margin-right: 0.5rem !important;
    }
    
    /* Reduce font sizes for weather info */
    #weather-info, 
    #pre-nav-real-time-date-span,
    #pre-nav-real-time-clock-span,
    #location-span {
        font-size: 0.8rem !important; /* Reduced from 0.875rem */
    }
    
    /* Also reduce font sizes for the header text elements */
    h6.fw-bold.mb-0.inline-text {
        font-size: 0.9rem !important;
    }
    
      #digital-stamp-body h6.fw-bold.fs-5 {
        font-size: 1.15rem !important;
    }
    
    #digital-stamp-body p.fs-5 {
        font-size: 1.05rem !important;
    }
    
    
    .green-text {
        font-size: 0.9rem !important;
    }
    
    .dga_dropdown_item span {
        font-size: 0.9rem !important;
    }
    
    /* Reduce icon sizes if needed */
    .dga_item img {
        width: 18px !important;
        height: 18px !important;
    }
    
    .weather_icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Hide weather/date/time on small screens */
@media (max-width: 991px) {
  /* entire right-hand column with weather stuff */
  #pre-nav-weather-section,
  #pre-nav-date-section,
  #pre-nav-time-section,
  #location-span,
  #weather-icon,
  #weather-info,
  .col-md-6.col-12.dga_item {
    display: none !important;
  }

  /* make sure dga_container spans full width */
  .dga_container {
    width: 100%  !important;
    justify-content: center  !important; /* optional: center items */
  }
  
  .inline-text{
 	white-space: normal  !important; /* allow wrapping */
    display: inline  !important;      
}
.dga_dropdown_item {
        margin-left: 0.5rem !important;
    }
    
    #digital-stamp-body .bg-white a span {
        font-size: 1rem !important;
        word-break: break-all; /* Allow breaking anywhere */
        white-space: normal; /* Allow wrapping */
    }
    
     #digital-stamp-body h6.fw-bold.fs-5 {
        font-size: 1.15rem !important;
    }
    
    #digital-stamp-body p.fs-5 {
        font-size: 1.05rem !important;
    }
    
}

@media (max-width: 991px) and (min-width: 577px) {
    #digital-stamp-body h6.fw-bold.fs-5 {
        font-size: 1rem !important;
    }
    
    #digital-stamp-body p.fs-5 {
        font-size: 0.9rem !important;
    }
}

/* Extra small adjustments for very narrow screens */
@media (max-width: 576px) {
    .dga_item {
        gap: 0.25rem;
    }
    
    .dga_dropdown_item {
        margin-left: 0.25rem !important;
    }
    
    h6.fw-bold.mb-0.inline-text {
        font-size: 0.875rem;
    }
    
    .green-text {
        font-size: 0.875rem;
    }
    
    /* For the digital stamp body content */
    #digital-stamp-body h6.fw-bold.fs-5 {
        font-size: 1rem !important; /* Smaller than fs-5 */
    }
    
    #digital-stamp-body p.fs-5 {
        font-size: 0.875rem !important; /* Smaller than fs-5 */
    }
    
    /* Specific targeting for the registered number section */
    #digital-stamp-body .bg-white p.mb-0.fs-5 {
        font-size: 0.875rem !important;
    }
    
    #digital-stamp-body .bg-white a span {
        font-size: 0.875rem !important;
    }
    
    #digital-stamp-body .bg-white a span {
        font-size: 1rem !important;
        word-break: break-all; 
        white-space: normal; 
    }
    
}

.div-buttons{
	  direction: rtl;
}

.nav-link.active {
  background-color: #aae6aa !important;
  color: black !important;
  border-radius: 5px;
}

.invalid-feedback {
    display: block !important;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #dc3545;
}

.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4'/%3e%3cpath d='M6 7v1'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}


.dropdown-scroll {
    max-height: 250px;  
    overflow-y: auto;
    overflow-x: hidden;
}


.dropdown-scroll::-webkit-scrollbar {
    width: 6px;
}

.dropdown-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-scroll::-webkit-scrollbar-thumb {
    background-color: #274479;
    border-radius: 3px;
}


.dropdown-scroll {
    scrollbar-width: thin;
    scrollbar-color: #274479 #e9ecef;
}

.navbar-nav .dropdown-menu-item {
    padding-right: 1.3rem ;
    padding-left: 1.3rem ;
    color: black ;
    background-color: transparent ;
    padding-top: 7.5px ;
    padding-bottom: 7.5px ;
    font-size: 19px;
    transition: 0.4s ease-in;
}

.dropdown-menu-item:hover {
    background-color: #c0c0c0 ;
    transition: 0.4s ease-in;
    color: black ;
}

.active-department {
    background-color: #aae6aa !important;
    color: black !important;
    font-weight: bold;
}


.dropdown-menu-item,
.active-department {
    transition: all 0.3s ease-in-out;
}

.dropdown-item.active, .dropdown-item:active {
background-color:#aae6aa !important;
color : black !important;

	}
.search-icon {
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  color: #888;
  font-size: 14px;
  pointer-events: none; 
}


.dropdown-menu input.form-control {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  color: #333;
  padding-right: 30px; 
}

.dropdown-menu input.form-control:focus {
  border-color: #408080;
  box-shadow: none;
}

.btn-registration{
	color:black;
	background-color:transparant;
	border-color:#1b8354;
}

.btn-registration:hover{
	color:white !important;
	background-color:#1b8354 !important;
	border-color:#1b8354 !important;
}

/* Need More Information */
.status-need-info {
    background-color: #fff3cd ;  
    color:  #856404;             
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Closed */
.status-closed {
    background-color: #d4edda;  
    color: #155724;             
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
}

/* In Progress */
.status-in-progress {
    background-color: #cce5ff;  
    color:#004085;             
    font-style: italic;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Unknown / fallback */
.status-unknown {
    background-color: #e2e3e5;  
    color: #6c757d;             
    font-style: italic;
    padding: 4px 8px;
    border-radius: 4px;
}


.status-closed::before {
    content: "✔ ";
}
.status-need-info::before {
    content: "ℹ️ ";
}
.status-in-progress::before {
    content: "⏳ ";
}

.return-btn{
	 background-color: white; 
        border-style: solid !important;   
    border-width: 2px !important;     
    border-color: #198754  !important;  
        color: #000;
        border: none;
        padding: 10px 20px;
        border-radius: 5px !important;
        font-weight: 500;
        min-width: 150px;
        margin-right: 10px;
        cursor: pointer;
}

.cancel-btn-yes{
	  background-color: #dc3545;  /* red */
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px !important;
        font-weight: 500;
        min-width: 150px;
        cursor: pointer;
}

/* Cancel Modal Styles */
#cancelModal .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

#cancelModal .modal-header {
    padding: 1.5rem 1.5rem 0.5rem;
}

#cancelModal .modal-body {
    padding: 1.5rem;
}

#cancelModal .btn-danger {

    border: none;
    transition: all 0.3s ease;
}

#cancelModal .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px #19875461;
}

#cancelModal .btn-outline-primary {
    border-width: 2px;
    transition: all 0.3s ease;
}

#cancelModal .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
    transform: translateY(-2px);
}

#cancelModal .alert-light {
    background-color: #fff9e6;
    border-bottom-width: 3px;
    border-bottom-color: #ffc107;
}

/* Animation for modal */
@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal.fade .modal-dialog {
    animation: modalFadeIn 0.3s ease-out;
}

.title-text{
font-size: xx-large;
}