body {
font-family: Arial, sans-serif;
}


  .navbar-nav {
      justify-content: flex-end;
      align-items: flex-end;
  }
  .dropdown-menu {
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      text-align: center;

  }
  /* .dropdown-menu li {
      text-align: center;
      justify-content: center;
      align-items: center;

  } */



.form-control.keyboardInput {
    
    margin-bottom: 10px;
}
.col-md-12.form-group.custom-file-input-container {
        padding-right: 150px; /* Adjust this value based on your layout's spacing */
        padding-left: 150px; /* Adjust this value based on your layout's spacing */
    }

#preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #fff;
    }	
    
.loader {
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #3498db;
        width: 50px;
        height: 50px;
        -webkit-animation: spin 2s linear infinite; /* Safari */
        animation: spin 2s linear infinite;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Safari */
@-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    #progressBarContainer {
        margin-bottom: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: #ffffff;
        padding: 10px;
        /* ou absolute selon le besoin */
        width: 100%;
        top: 0;
        left: 0;
        z-index: 100;
    }
    @media (max-width: 767px) {
    #progressBarContainer {
        display: none;
    }
    }
    .progressBarContainer {
    width: 100%;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 20px;
    margin: 20px 0;
    position: relative;
    }
    .progress-bar {
    width: 0%;
    height: 100%;
    background-color: #4caf50;
    border-radius: 20px;
    transition: width 0.5s ease;
    }
    .progressStep {
        flex-grow: 1;
        text-align: center;
        padding: 10px;
        border-bottom: 2px solid transparent; /* visuellement neutre lorsqu'il n'est pas actif */
    }       
       
    .active {
        border-bottom: 4px solid #3498db; /* marqueur pour l'étape active */
        font-weight: bold;
    }
    .active:hover{
        background-color: #cbdee7;
    }

    input[type=text] {
        appearance: none;
        border: none;
        outline: none;
        border-bottom: .2em solid #314d58;
        background: rgba(#3498db, .2);
        border-radius: .2em .2em 0 0;
        padding: .4em;
        color: #3498db;
    }
    input[type=number] {
        appearance: none;
        border: none;
        outline: none;
        border-bottom: .2em solid #60aed3;
        background: rgba(#3498db, .2);
        border-radius: .2em .2em 0 0;
        padding: .4em;
        color: #3498db;
    }
    input[type=date] {
        appearance: none;
        border: none;
        outline: none;
        border-bottom: .2em solid #2b805f;
        background: rgba(#3498db, .2);
        border-radius: .2em .2em 0 0;
        padding: .4em;
        color: #2b805f;
    }
    input[type=email] {
        appearance: none;
        border: none;
        outline: none;
        border-bottom: .2em solid #314d58;
        background: rgba(#3498db, .2);
        border-radius: .2em .2em 0 0;
        padding: .4em;
        color: #2b805f;
    }
    input[type=password] {
        appearance: none;
        border: none;
        outline: none;
        border-bottom: .2em solid #314d58;
        background: rgba(#3498db, .2);
        border-radius: .2em .2em 0 0;
        padding: .4em;
        color: #2b805f;
    }

    hr {
        border: none;
        height: 3px;
        background-color: #353b48; 
        background-image: -webkit-linear-gradient(left, rgba(66,133,244,.8), rgba(66, 133, 244,.6), rgba(0,0,0,0));
    }


    .verify-form{
        width: 550px;
        min-height: 500px;
        height: auto;
        border-radius: 5px;
        margin: 2% auto;
        box-shadow: 0 9px 50px hsla(20, 67%, 75%, 0.31);
        padding: 2%;
    }

    .login-form{
        width: 450px;
        min-height: 500px;
        height: auto;
        border-radius: 5px;
        margin: 2% auto;
        box-shadow: 0 9px 50px hsla(20, 67%, 75%, 0.31);
        padding: 2%;
    }
    /* form Container */
    form .con {
        display: -webkit-flex;
        display: flex;
      
        -webkit-justify-content: space-around;
        justify-content: space-around;
      
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        
          margin: 0 auto;
    }
    
    /* the header form form */
    header {
        margin: 2% auto 10% auto;
        text-align: center;
    }
    /* Login title form form */
    header h2 {
        font-size: 250%;
        font-family: 'Playfair Display', serif;
        color: #3e403f;
    }
    /*  A welcome message or an explanation of the login form */
    header p {letter-spacing: 0.05em;}
    
    
    
    /* //////////////////////////////////////////// */
    /* //////////////////////////////////////////// */
    
    
    .input-item {
        background: #c5eaf3;
        color: #333;
        padding: 14.5px 0px 15px 9px;
        border-radius: 5px 0px 0px 5px;
    }
    
    
    
    /* Show/hide password Font Icon */
    #eye {
        background: #fff;
        color: #333;
      
        margin: 5.9px 0 0 0;
        margin-left: -20px;
        padding: 15px 9px 19px 0px;
        border-radius: 0px 5px 5px 0px;
      
        float: right;
        position: relative;
        right: 1%;
        top: -.2%;
        z-index: 5;
        
        cursor: pointer;
    }
    /* inputs form  */
    input[class="form-input"]{
        width: 240px;
        height: 50px;
        margin-top: 2%;
        padding: 15px;
        font-size: 16px;
        font-family: 'Abel', sans-serif;
        color: #264d58;
        outline: none;
        border: 1 solid  264d58;
        border-radius: 0px 5px 5px 0px;
        transition: 0.2s linear;
        
    }
    input[id="txt-input"] {width: 250px;}
    /* focus  */
    input:focus {
        transform: translateX(-2px);
        border-radius: 5px;
    }
    
    /* //////////////////////////////////////////// */
    /* //////////////////////////////////////////// */
    
    /* input[type="text"] {min-width: 250px;} */
    /* buttons  */
    button {
        display: inline-block;
        color: #252537;
      
        width: 280px;
        height: 50px;
      
        padding: 0 20px;
        background: #c5eaf3;
        border-radius: 5px;
        
        outline: none;
        border: none;
      
        cursor: pointer;
        text-align: center;
        transition: all 0.2s linear;
        
        margin: 7% auto;
        letter-spacing: 0.05em;
    }
         #addFiliereBtn{
             color: red;
             display: inline-block;
             color: #000000;
    
    
             width: 150px;
             height: 50px;
    
             padding: 0 20px;
             background: #06b2dd;
             border-radius: 5px;
    
             outline: none;
             border: none;
    
             cursor: pointer;
             text-align: center;
             transition: all 0.2s linear;
    
             margin: 7% auto;
             letter-spacing: 0.05em;
         }
    
         #addFiliereBtn1 {
             color: red;
             display: inline-block;
             color: #252537;
    
             width: 100px;
             height: 50px;
    
             padding: 0 0px;
             background: #06b2dd;
             border-radius: 5px;
    
             outline: none;
             border: none;
             cursor: pointer;
             text-align: center;
             transition: all 0.2s linear;
    
             margin: 2px;
             letter-spacing: 0.05em;
         }
    /* Submits */
    .submits {
        width: 48%;
        display: inline-block;
        float: left;
        margin-left: 2%;
    }
    .submits:hover{
        background: #2b5570;
    }
    
    /*       Forgot Password button FAF3DD  */
    .frgt-pass {
        background: #7ebacf;
    }
    .frgt-pass a{
        color: black;
        text-decoration: none;

    }
    
    /*     Sign Up button  */
    .sign-up {background: #B8F2E6;}
    .sign-up a {
        color: black;
        text-decoration: none;

    }
    
    /* buttons hover */
    button:hover {
        transform: translatey(3px);
        box-shadow: none;
        border: 2px solid #252537;
    }
    
    /* buttons hover Animation */
    button:hover {
        animation: ani9 0.4s ease-in-out infinite alternate;
    }

    @media (max-width: 460px) {
        /* Small Device Styles (max-width: 460px) */
      
        .verify-form,
        .login-form {
          width: 100%;
          min-height: 400px;
          height: auto;
          border-radius: 5px;
          margin: 2% auto;
          box-shadow: 0 9px 50px hsla(20, 67%, 75%, 0.31);
          padding: 4%;
        }
        
      
        /* Form Container */
        form .con {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 auto;
        }
      
        /* Header Form */
        header {
          margin: 2% auto 10% auto;
          text-align: center;
        }
      
        /* Login Title Form */
        header h2 {
          font-size: 24px;
          font-family: 'Playfair Display', serif;
          color: #3e403f;
        }
      
        /* Welcome Message or Explanation of the Login Form */
        header p {
          letter-spacing: 0.05em;
        }
      
        /* Input Item */
        .input-item {
          background: #c5eaf3;
          color: #333;
          padding: 14.5px 0px 15px 9px;
          border-radius: 5px 0px 0px 5px;
          margin: 0 auto;
          width: 240px;
        }
      
        /* Show/Hide Password Font Icon */
        #eye {
          background: #fff;
          color: #333;
          margin: 5.9px 0 0 0;
          margin-left: -20px;
          padding: 15px 9px 19px 0px;
          border-radius: 0px 5px 5px 0px;
          float: right;
          position: relative;
          right: 1%;
          top: -.2%;
          z-index: 5;
          cursor: pointer;
        }
      
        /* Inputs Form */
        input[class="form-input"] {
          width: 80%;
          height: 50px;
          margin-top: 2%;
          padding: 15px;
          font-size: 16px;
          font-family: 'Abel', sans-serif;
          color: #264d58;
          outline: none;
          border: 1 solid #264d58;
          border-radius: 0px 5px 5px 0px;
          transition: 0.2s linear;
        }
      
        /* Focus */
        input:focus {
          transform: translateX(-2px);
          border-radius: 5px;
        }
      
        /* Buttons */
        button {
          display: block;
          color: #252537;
          width: 100%;
          height: 50px;
          padding: 0 20px;
          background: #c5eaf3;
          border-radius: 5px;
          outline: none;
          border: none;
          cursor: pointer;
          text-align: center;
          transition: all 0.2s linear;
          margin: 7% auto;
          letter-spacing: 0.05em;
        }

        .submits {
          width: 100%;
          display: block;
          margin-left: 0;
      }
      .frgt-pass, .sign-up {
          width: 100%;
          display: block;
          margin-left: 0;
      }            
        /* Submits */
        /* .submits {
          width: 100%;
          display: block;
          margin-left: 0;
        } */
      
        .submits:hover {
          background: #2b5570;
        }
      
        /* Forgot Password Button */
        .frgt-pass {
          background: #7ebacf;
        }
      
        .frgt-pass a {
          color: black;
          text-decoration: none;
        }
      
        /* Sign Up Button */
        .sign-up {
          background: #B8F2E6;
        }
      
        .sign-up a {
          color: black;
          text-decoration: none;
        }
      
        /* Buttons Hover */
        button:hover {
          transform: translatey(3px);
          box-shadow: none;
          border: 2px solid #252537;
        }
      
        /* Buttons Hover Animation */
        button:hover {
          animation: ani9 0.4s ease-in-out infinite alternate;
        }
      
      
      }

      @media (max-width: 460px) {
        .d-flex {
          flex-wrap: wrap;
        }
        
        .btn {
          margin-right: 10px;
        }
        
  
        .btn {
          margin-right: 0;
          justify-content: center;
        }
      }