body {
   font-family: 'Inter', sans-serif !important;
}

.button-saraga {
   background: #2C66FF !important;
   font-size: 13px !important;
   font-weight: 500 !important;
   border-radius: 0.5rem !important;
}

button:disabled {
   background: #CED4DA !important;
   color: #FFFFFF !important;
   cursor: not-allowed !important;

}

.button-saraga:not(:disabled):hover {
   background: #0e47e5 !important;
   color: #fff !important;
   font-weight: 600 !important;
}

.button-saraga:not(:disabled):focus {
   background: #0e47e5 !important;
   color: #fff !important;
   font-weight: 600 !important;
}

.container-form-register {
   /* margin-top: 200px !important; */
   padding-left: 14px !important;
   padding-right: 14px !important;
}

/* @media (min-width: 600px) {
   .container-form-register {
      margin-top: 200px !important;
   }
} */

/* @media (min-width: 1024px) {
   .container-form-register {
      margin-top: 200px !important;
   }
} */

.floating-label {
   background: #fff !important;
   border: 2px solid #fff;
   border-radius: 1px;
   padding: 0 4px !important;
   font-weight: 400 !important;
   font-size: 12px !important;
   margin-top: -0.1rem;
}

.form-control {
   border: 1.4px solid #7E8494 !important;
   border-radius: 0.5rem !important;
   font-weight: 400 !important;
   font-size: 14px !important;
   padding: 0.5rem 1rem;
   /* transition: all 0.3s ease-in-out; */
}

.form-control:read-only {
   border: 1.4px solid #7E8494 !important;
   /* cursor: not-allowed !important; */
   background: #F2F3F4 !important;
   color: #7E8494;
}

.form-control:read-only:focus {
   border: 2px solid #7E8494 !important;
   /* cursor: not-allowed !important; */
   background: #F2F3F4 !important;
   color: #7E8494 !important;
}

.form-control:disabled {
   border: 1.4px solid #7E8494 !important;
   cursor: not-allowed !important;
   background: #c6c6c699 !important;
}

.form-control:disabled + .floating-label {
   color: #7E8494 !important;
}

.form-control:focus {
   color: #1F1F1F !important;
   border: 2px solid #2C66FF !important;
   background: #F2F6FF99 !important;
}

.form-country-phone-group {
   display: flex;
   align-items: center;
   border: 1.4px solid #7E8494 !important;
}

.form-country-phone-group:focus-within {
   border: 2px solid #2C66FF !important;
}

.form-control.form-country-code {
   border: none !important;
   /* border-radius: 0.5rem 0 0 0.5rem !important; */
   padding-left: 8px !important;
}

.form-control.form-country-phone {
   border: none !important;
   /* border-radius: 0 0.5rem 0.5rem 0 !important; */
   padding-left: 8px !important;
}

.form-invalid {
   color: #DC1F26 !important;
}

.form-control.form-invalid {
   border: 2px solid #DC1F26 !important;
   background: #FCEFED !important;
}

.form-control.form-invalid + .floating-label {
   color: #DC1F26 !important;
   font-weight: bolder !important;
}

.form-country-phone-group.form-invalid {
   border: 2px solid #DC1F26 !important;
}

.form-country-phone-group.form-invalid + .floating-label {
   color: #DC1F26 !important;
   font-weight: bolder !important;
}

.form-country-phone-group span {
   color: #7E8494 !important;
   transition: all 0.3s;
}

/* if input in form-country-phone-group focus, change the span color to black */
.form-country-phone-group:focus-within span {
   color: #181818 !important;
}

.has-float-label .floating-label{
   color: #181818 !important;
   font-weight: 400 !important;
   background: transparent;
}

.has-float-label .form-control:focus:not(:read-only) + .floating-label {
   color: #2C66FF !important;
   font-weight: 600 !important;
}

.has-float-label .form-country-phone-group:focus-within + .floating-label {
   color: #2C66FF !important;
   font-weight: bolder !important;
}

.invalid-feedback {
   color: #DC1F26 !important;
   font-size: 11px !important;
   font-weight: 400 !important;
   text-align: start;
}

.main-content {
   margin-top: -70px !important;
}

/* @media (min-width: 600px) {
   .main-content {
      margin-top: 0px !important;
   }
}

/* Media query for screens with a width of at least 768px */
/* @media (min-width: 768px) {
   .main-content {
      margin-top: 0px !important;
   }
} */

/* Media query for screens with a width of at least 1024px */
@media (min-width: 1024px) {
   .main-content {
      margin-top: 0px !important;
   }
}

.navbar {
   padding-top: 14px !important;
}

.navbar-text {
   color: #181818 !important;
   font-weight: 500 !important;
   font-family:'Inter', sans-serif !important;
   margin-top: 1px !important;
}

.otpInput {
   width: 48px !important;
   height: 48px !important;
   text-align: center;
   font-size: 16px;
   font-weight: 600;
   color: #000000;
   background-color: #F4F5F5;
   border-radius: 10px;
   border: none;
}

.otpInput:focus {
   outline: 2px solid #2C66FF;
   background-color: #F3FBFF;
}

.errorOtp {
   width: 48px !important;
   height: 48px !important;
   text-align: center;
   font-size: 16px;
   font-weight: 600;
   color: #000000;
   border: solid red 2px !important;
   border-radius: 10px;
   background-color: #fff3f3;
}

.errorOtp:focus {
   outline: 2px solid #2C66FF;
   background-color: #F3FBFF;
   border: none !important;
}

.password-toggle {
   z-index: 999;
   position: absolute;
   right: 14px;
   top: 49%;
   transform: translateY(-50%);
   cursor: pointer;
}

.password-toggle svg {
   fill: #000; /* Change this to the color you want for the icon */
}

.password-toggle svg:hover {
   fill: #555; /* Change this to the hover color you want for the icon */
}

.text-100 {
   font-weight: 100 !important;
}

.text-200 {
   font-weight: 200 !important;
}

.text-300 {
   font-weight: 300 !important;
}

.text-400 {
   font-weight: 400 !important;
}

.text-500 {
   font-weight: 500 !important;
}

.text-600 {
   font-weight: 600 !important;
}

.text-700 {
   font-weight: 700 !important;
}

.text-800 {
   font-weight: 800 !important;
}

.text-900 {
   font-weight: 900 !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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