@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}

body{
    font-family: 'Ezra', sans-serif !important;
}
.auth-title{
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
}
.password-strength-container {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;
}

.progress-bar-container {
    flex-grow: 1;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 10px;
}

.progress-bar-custom {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    width: 0;
    border-radius: 4px;
}

.requirement-list {
    text-align: left;
    padding-left: 0;
    list-style: none;
}

.requirement-list li {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #6c757d;
}

.requirement-list .text-red {
    color: #dc3545;
}

.requirement-list .text-green {
    color: #28a745;
}

.requirement-list .icon-fail {
    margin-right: 5px;
}

.status-text {
    font-weight: 600;
    white-space: nowrap;
    font-size: 0.9rem;
}

.text-red-status {
    color: #dc3545;
}

.text-orange-status {
    color: #ffc107;
}

.text-green-status {
    color: #28a745;
}

.bg-red {
    background-color: #dc3545;
}

.bg-orange {
    background-color: #ffc107;
}

.bg-green {
    background-color: #28a745;
}

.otp-input {
    background-color: transparent;
    border: 1px solid #76cf76;
    margin-right: 10px;
    font-size: 30px;
    padding: 5px 5px !important;
}
.errorOtp{
    background-color: transparent;
    border: 1px solid #ed0909 !important;
    margin-right: 10px;
}
.toggle-password, .toggle-confirm-password, .toggle-user-password{
    position: absolute; 
    top: 50%; 
    right: 10px; 
    transform: translateY(-50%); 
    cursor: pointer; 
    color:#a6a4a4
}

input.is-invalid ~ .toggle-confirm-password, .toggle-user-password {
    bottom: 10%;
    transform: translateY(-50%);
    position: absolute;
}


.p-10 {
    padding: 6rem;
}

.px-10 {
    padding: 0 6rem;
}

.auth-btn {
    background-color: #9FE870 !important;
    border: none;
}

.text-xs {
    font-size: 10px !important;
}

.bg-light {
    background-color: #F2F2F2;
}

/* FOR MOBILE SCREENS */
@media screen and (max-width: 768px) {
    .p-10 {
        padding: 3rem;
    }

    .px-10 {
        padding: 0 3rem;
    }
}

.text-success{
    color: #9FE870 !important;
}




.custom-backdrop-blur .modal-backdrop {
    background: rgba(0, 0, 0, 0.05); 
}

.custom-backdrop-blur.modal.show {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.modal-content {
    border-radius: 0.75rem;
}

.modal-body {
    padding-top: 1rem; 
    padding-bottom: 2rem;
}

.modal .btn-close {
    border-radius: 50%;
    width: 0.6rem; 
    height: 0.6rem; 
    opacity: 1;
    margin: -0.5rem -0.5rem -0.5rem auto; 
    border: 3px solid black;
}

.form-control.is-invalid[type="password"],
.was-validated .form-control:invalid[type="password"] {
    background-image: none !important;
}
.form-control.is-invalid[type="password"], #userPassword, #confirmPassword, #newPassword, #password{
    background-image: none !important;
}