/* General Styles */
body {
  font-family: Arial, sans-serif;
  height: 100%; 

  
}

/* Form Control Styles */
.form-control.keyboardInput {
  margin-bottom: 10px;
}

.col-md-12.form-group.custom-file-input-container {
  padding-right: 150px;
  padding-left: 150px;
}

/* Preloader Styles */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}

.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #3498db;
  animation: spin 2s linear infinite;
}
.is-invalid {
  border-color: red; 
}
 
h3 {
  text-align: center;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  padding: 0 10px;
  font-size: 24px; /* Default font size for larger screens */
}

/* Responsive adjustments for mobile devices */
@media (max-width: 600px) {
  h3 {
      font-size: 16px; /* Smaller font size for screens less than 600px wide */
  }
}
.is-invalid + .error {
  color: red;
  display: block;
  font-size: 0.8em; 
  margin-top: 2px;
}
.is-invalid + .arError{
  color: red;
  display: block;
  font-size: 0.8em; 
  margin-top: 2px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.error {
  display: block; /* make it visible when there's an error */
  color: red; /* error color */
  font-size: 0.9em; /* slightly smaller font size */
  margin-top: 5px; /* spacing from the input field */
}

input.is-invalid {
  border-color: red; /* Red border for invalid inputs */
}
/* Progress Bar Styles */
#progressBarContainer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #ffffff;
  padding: 10px;
  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;
}

.active {
  border-bottom: 4px solid #3498db;
  font-weight: bold;
}

.active:hover {
  background-color: #cbdee7;
}

/* Input Styles */
 

/* Header Styles */
header {
  margin: 2% auto 10% auto;
  text-align: center;
}

header h2 {
  font-size: 250%;
  font-family: 'Playfair Display', serif;
  color: #3e403f;
}
.position-relative {
  position: relative;
}
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  outline: none;
  color: #333; /* Adjust color as per your design */
  cursor: pointer;
}
.form-control {
  padding-right: 40px; /* Ensure there's space for the icon */
}

header p {
  letter-spacing: 0.05em;
}

/* Input Container Styles */
.form-label-group {
  position: relative;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: all 0.1s ease-in-out;
}

.form-label-group input::placeholder {
  color: transparent;
}

/* Footer Styles */
footer.sticky-footer {
  display: flex;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 80px;
  background-color: #e9ecef;
}

footer.sticky-footer .copyright {
  line-height: 1;
  font-size: 0.8rem;
}

/* Media Query Styles */
@media (min-width: 768px) {
  footer.sticky-footer {
      width: calc(100% - 225px);
  }
}
 
    
.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;
}
/* 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;
}

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

@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 */
  .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;
  }


}
.text-end {
  font-family: "Tajawal", sans-serif;
  font-weight: 700;
  font-style: normal;
}
label {
  font-family: 'Open Sans', sans-serif;
}
@media (max-width: 576px) {
  /* Ensures the row acts as a flex container */
  .row.mb-3 {
      display: flex;
      flex-wrap: wrap; /* Allows wrapping of items */
      margin-top: 30px; 
  }

  /* Style for the first label to ensure it stays on the left */
  .row.mb-3 > label.col-sm-2.col-form-label {
      flex: 1 0 50%; /* Takes up half of the space */
      text-align: left; /* Ensures text is left-aligned */
      padding-right: 0; /* Removes any right padding */
  }

  /* Style for the second label to ensure it stays on the right */
  .row.mb-3 > label.col-sm-2.col-form-label.text-end {
      flex: 1 0 50%; /* Takes up half of the space */
      text-align: right; /* Ensures text is right-aligned */
      
  }
  .row.mb-3 > label.col-sm-2.col-form-label.text-end.arinput {
    flex: 1 0 50%; /* Takes up half of the space */
    text-align: right; /* Ensures text is right-aligned */
    margin-top: 30px;
}

  /* Ensures select dropdown takes full width on small devices */
  .row.mb-3 > div.col-sm {
      flex: 0 0 100%; /* Takes full width of its container */
      order: 2; /* Makes sure it appears below the labels */
 
  }
  /* Label for 'الإسم العائلي بالعربية' */
  .row.mb-3 > .col-sm-2:last-of-type {
    order: 3; /* Moves the Arabic label below the French input and above the Arabic input */
    flex: 0 0 100%;
    max-width: 100%;
    text-align: right; /* Ensures text is aligned to the right */
}

/* Input for 'NomAR' */
.row.mb-3 > .col-sm:last-of-type {
    order: 4;
    flex: 0 0 100%;
    max-width: 100%;
}
}
 
/* General styles */
.navbar {
  background-color: #E1F7F7;
}

.navbar .navbar-text {
  color: #3342FF;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  flex-grow: 1;
}

/* Toggler button */
.navbar-toggler {
  border: none;
}

.navbar-toggler-icon {
  font-size: 1.5rem;
}

/* Mobile view adjustments */
@media (max-width: 767.98px) {
  .navbar .container {
      flex-direction: column;
      align-items: center;
  }

  .navbar .navbar-brand {
      order: 1;
      margin-top: 10px;
  }

  .navbar .navbar-text {
      order: 2;
      margin-top: 10px;
  }

  .navbar .navbar-toggler {
      order: 3;
      border: 2px solid #000; /* Add border to the toggle button */
      margin-top: 10px;
  }

  .navbar .collapse {
      width: 100%;
      order: 4;
      display: none; /* Initially hide the collapse content */
  }

  .navbar-toggler.collapsed + .collapse {
      display: block; /* Show collapse content when the button is collapsed */
  }
 
  .navbar .navbar-nav {
      flex-direction: column;
      align-items: center;
      width: 100%;
  }

  .navbar .navbar-nav .nav-item {
      text-align: center;
      width: 100%;
  }

  .navbar .navbar-nav .dropdown-menu {
      right: 0;
      left: auto;
      text-align: center;
  }
}

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

  .btn {
    margin-right: 0;
    justify-content: center;
  }
  .removeFiliereBtn{
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 10px;
    align-items:center;
  }
}
.custom-button {
  width: 120px;  /* Adjust width as needed */
  height: 40px;  /* Adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 10px;
}

.custom-button a, .custom-button button {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-button a {
  background-color: #3498db;
  color: #ffffff;
  text-align: center;
}