/* Popup dialog */
.popup-dialog {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Ensure the popup dialog is on top */
}

/* CSS for the background overlay when the popup is open */
.popup-open {
    position: relative;
}

.popup-open::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the background color and opacity here */
    z-index: 2; /* Make sure the overlay is above everything else */
    filter: blur(4px); /* Adjust the blur effect */
}

input, select {
  border-radius: 0 !important;
}

@media (min-width: 720px) {
  .card-container {
    display: flex;
  }

  .card {
    flex: 1;
  }

  .texter {
    background-color: transparent;
    display: flex;
    box-shadow: none;
  }

  .imager {
    background-color: transparent;
    display: flex;
    box-shadow: none;
  }

  .eventup {
    width: 100%;
    height: 15rem;
  }

}


/*--------------------------------------------------------------
 styling for progress Bar load-In
 --------------------------------------------------------------*/
 .progress {
   width: 100%;
   height: 22px;
   background-color: #f0f0f0;
 }

 .progress-bar {
   height: 100%;
   line-height: 30px;
   text-align: center;
   color: #fff;
   width: 0;
   transition: width 2s ease-in-out;
 }

 .progress-container {
      width: 100px;
      height: 100px;
      position: relative;
  }

  .progress-circle {
      width: 100%;
      height: 100%;
      border: 8px solid #ccc;
      border-top: 8px solid #ddb30f;
      border-radius: 50%;
      animation: spin 2s linear infinite;
      position: absolute;
      top: 0;
      left: 0;
  }


@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*--------------------------------------------------------------
 styling for input & select dropdwon list fields
 --------------------------------------------------------------*/

.textOnInput {
  position: relative;
}

/* styling of the label */

.textOnInput label {
  /* position: absolute; */
  top: -15px;
  left: 23px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 0 10px 0 10px;
  margin-top: 0.14rem !important;
  z-index: 1;
}

.textOnInput label:after {
  content: " ";
  background-color: #fff;
  width: 100%;
  height: 13px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}

label {
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  margin-bottom: .5rem;
  margin-top: .2rem;
}

.form-control {
  box-shadow: none !important;
  padding: 8px !important; /* padding for the input fields */
}


  /*--------------------------------------------------------------
  # Verification Form
  --------------------------------------------------------------*/

 .field-input{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
 }

 .otp_field {
    border-radius: 5px;
    font-size: 60px;
    height: 100px;
    width: 100px;
    border: 3px solid #cacaca;
    margin: 2px;
    text-align: center;
    font-weight: 600;
    outline: none;
 }

 .otp_field::-webkit-inner-spin-button,
 .otp_field::-webkit-outer-spin-button {
   -webkit-appearance: none;
    margin: 0;
 }

 .otp_field:valid {
   border-color: #3095d8;
   box-shadow: 0 10px 10px -5px rgba(0,0,0,0.25);
 }

 @media only screen and (max-width: 455px) {
   .otp_field {
      font-size: 15px;
      height: 50px;
      width: 50px;
   }

 }



   /*--------------------------------------------------------------
   # custom-dialog
   --------------------------------------------------------------*/
    .custom-dialog {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      background: white; padding: 20px; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center;
    }



   /*--------------------------------------------------------------
   # clock
   --------------------------------------------------------------*/

   .clock {
     display: flex;
     justify-content: start;
     align-items: center;
     font-size: 2.0rem;
     font-weight: bold;
   }

   .clock2 {
     display: flex;
     justify-content: start;
     align-items: center;
     font-size: 2.7rem;
     font-weight: bold;
   }

   .clock3 {
     display: flex;
     justify-content: start;
     align-items: center;
     font-size: 1.8rem;
     font-weight: bold;
   }

   .separator {
     margin: 0 2px;
   }

   .clock-date {
     font-size: 1.8rem;
   }

   @media (max-width: 720px) {
     .clock {
       font-size: 1.6rem;
     }
     .clock2 {
       font-size: 2.2rem;
     }
   }

  /*--------------------------------------------------------------
  # The Alert Box in the top-right corner
  --------------------------------------------------------------*/

  .alert-dismissible .btn-close {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 2;
      padding: 7px 7px;
      margin: 3px;
  }

  .success-alert {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background-color: green;
    color:white;
    animation: slide-in 1.5s ease-in-out;
  }

  .error-alert {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    background-color: red;
    color:white;
    animation: slide-in 1s ease-in-out;
  }


  @keyframes slide-in {
    0% {
      opacity: 0;
      right: -200px;
    }
    100% {
      opacity: 1;
      right: 10px;
    }
  }

  /* --------------------------------------
  pagination
  --------------------------------------- */

  .pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #dee2e6;
    --bs-pagination-border-radius: 0.375rem;
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: #e9ecef;
    --bs-pagination-hover-border-color: #dee2e6;
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: #e9ecef;
    --bs-pagination-focus-box-shadow: 0 0 0 0.03rem rgba(13, 110, 253, 0.25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #019cb5;
    --bs-pagination-active-border-color: #08a1ba;
    --bs-pagination-disabled-color: #6c757d;
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: #dee2e6;
    display: flex;
    padding-left: 0;
    list-style: none;
  }

  .page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .page-link {
      transition: none;
    }
  }
  .page-link:hover {
    z-index: 2;
    color: var(--bs-pagination-hover-color);
    background-color: var(--bs-pagination-hover-bg);
    border-color: var(--bs-pagination-hover-border-color);
    text-decoration: none;
  }
  .page-link:focus {
    z-index: 3;
    color: var(--bs-pagination-focus-color);
    background-color: var(--bs-pagination-focus-bg);
    outline: 0;
    box-shadow: var(--bs-pagination-focus-box-shadow);
  }
  .page-link.active, .active > .page-link {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
  }
  .page-link.disabled, .disabled > .page-link {
    color: var(--bs-pagination-disabled-color);
    pointer-events: none;
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
  }

  .page-item:not(:first-child) .page-link {
    margin-left: -1px;
  }
  .page-item:first-child .page-link {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
  }
  .page-item:last-child .page-link {
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
  }

  .pagination-lg {
    --bs-pagination-padding-x: 1.5rem;
    --bs-pagination-padding-y: 0.75rem;
    --bs-pagination-font-size: 1.25rem;
    --bs-pagination-border-radius: 0.5rem;
  }

  .pagination-sm {
    --bs-pagination-padding-x: 0.5rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 0.875rem;
    --bs-pagination-border-radius: 0.25rem;
  }



  /* Small screen styles */
  @media (max-width: 768px) {
      .pagination {
          --bs-pagination-padding-x: 0.5rem; /* Adjust padding for smaller screens */
          --bs-pagination-padding-y: 0.25rem;
          --bs-pagination-font-size: 0.875rem; /* Adjust font size for smaller screens */
          --bs-pagination-color: var(--bs-link-color);
          --bs-pagination-bg: #fff;
          --bs-pagination-border-width: 1px;
          --bs-pagination-border-color: #dee2e6;
          --bs-pagination-border-radius: 0.375rem;
          --bs-pagination-hover-color: var(--bs-link-hover-color);
          --bs-pagination-hover-bg: #e9ecef;
          --bs-pagination-hover-border-color: #dee2e6;
          --bs-pagination-focus-color: var(--bs-link-hover-color);
          --bs-pagination-focus-bg: #e9ecef;
          --bs-pagination-focus-box-shadow: 0 0 0 0.03rem rgba(13, 110, 253, 0.25);
          --bs-pagination-active-color: #fff;
          --bs-pagination-active-bg: #019cb5;
          --bs-pagination-active-border-color: #08a1ba;
          --bs-pagination-disabled-color: #6c757d;
          --bs-pagination-disabled-bg: #fff;
          --bs-pagination-disabled-border-color: #dee2e6;
          display: flex;
          padding-left: 0;
          list-style: none;
      }
  }

  /* Extra-small screen styles */
  @media (max-width: 576px) {
      .pagination {
          --bs-pagination-padding-x: 0.25rem; /* Further adjust padding for extra-small screens */
          --bs-pagination-padding-y: 0.125rem;
          --bs-pagination-font-size: 0.75rem; /* Further adjust font size for extra-small screens */
          --bs-pagination-color: var(--bs-link-color);
          --bs-pagination-bg: #fff;
          --bs-pagination-border-width: 1px;
          --bs-pagination-border-color: #dee2e6;
          --bs-pagination-border-radius: 0.375rem;
          --bs-pagination-hover-color: var(--bs-link-hover-color);
          --bs-pagination-hover-bg: #e9ecef;
          --bs-pagination-hover-border-color: #dee2e6;
          --bs-pagination-focus-color: var(--bs-link-hover-color);
          --bs-pagination-focus-bg: #e9ecef;
          --bs-pagination-focus-box-shadow: 0 0 0 0.03rem rgba(13, 110, 253, 0.25);
          --bs-pagination-active-color: #fff;
          --bs-pagination-active-bg: #019cb5;
          --bs-pagination-active-border-color: #08a1ba;
          --bs-pagination-disabled-color: #6c757d;
          --bs-pagination-disabled-bg: #fff;
          --bs-pagination-disabled-border-color: #dee2e6;
          display: flex;
          padding-left: 0;
          list-style: none;
      }
  }