:root {
      --text:#001830;
      --input-bg: #FCFCFD;
      --input-border: #D0D5DD;
      --text-white: #ffffff;
      --input-placeholder: #98A2B3;
      --input-border-gray:#475467;
      --label-color: #344054;
      --label-color-gray:#667085;
      
      --title: #001830;
      --subtitle-color: #001830;
      --button-bg: #18AB8E;
      --button-bg-hover: #00634d;
      --footer-link: #18AB8E;
      --bg-black:#000000;
      --border-primary:#D0D5DD;
    }

body {background-color: var(--bg-color); font-family: "Inter", sans-serif; color: var(--text); font-size: 16px;}


.btn{ height: 48px; line-height: normal; padding: 0px 15px;}
.btn.btn-primary{background-color: var(--button-bg); border-color:transparent; color: var(--text-white);}
.btn.btn-outline-primary{ border-color: var(--border-primary); height: 48px; line-height: normal; color: var(--text);}

.btn:hover{background-color: var(--bg-black); color: var(--text-white);}
.btn.btn-outline-primary:hover{background-color: transparent; border-color: var(--button-bg); color: var(--text);}

.sign-header{ width:calc(100% + calc(var(--bs-gutter-x)));}
.sign-header a{ padding:10px 25px; color: var(--text-white); background-color: var(--button-bg); color: var(--text-white); text-decoration: none;}

.login{ margin: 0px; padding: 0px 0px; height: 100vh; font-size: 14px;}
.login-bg{ background: url(../assets/images/login-bg.png) no-repeat center center; background-size: 100% 100%;}
.login-bg .logo{ max-width: 80%;}

.login .max-600{ max-width: 600px; min-width: auto;}
.login .form-container{ margin: auto; padding:1rem 5rem;}
.login h2.title{ font-size: 30px; color: var(--title); font-weight: 700;}
.login p.subtitle {color: var(--subtitle-color); font-size: 20px; font-weight: 500;}
.login .footer-text{ font-size:16px;}
.login .footer-text span{ color: var(--label-color-gray);}
.login .footer-text a{ color: var(--footer-link);}

.loginform .input-group .input-group-text{ background-color: transparent; }
.loginform .input-group input.form-control{ border-left:0px;}
.loginform .input-group input.form-control.borderrightnone{ border-right: 0px;}
.loginform .form-label {font-weight: 500; color: var(--label-color); margin-bottom: 5px;}
.loginform .form-text {color: var(--divider-color);}
.loginform .form-control, .form-select {background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text); height: 44px; line-height: normal;}
.loginform .form-control::placeholder {color: var(--input-placeholder);}
.loginform .form-control.form-textarea{ height: 80px;}
.loginform .divider {text-align: center; font-size: 18px; font-weight: 600; color: var(--text); margin:10px 0;}
.loginform .signup-button .btn{ width: 100%;}

.login .was-validated .input-group-text, .modal-content .was-validated .input-group-text{ border-color: var(--bs-form-invalid-border-color);}


.otp-wrapper{gap: 25px;}
.otp-wrapper .otp-box{width: 5rem; height: 5rem; font-size: 48px; border-color:var(--input-border-gray); line-height: normal; border-width: 2px; text-align: center;}
.otp-wrapper .otp-box:hover, .otp-wrapper .otp-box:focus{ border-color: var(--button-bg); color: var(--button-bg); font-weight: 600;}
.loader-row {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dimmed background */
    z-index: 10500; /* High enough to be on top */
    display: flex;
    align-items: center;
    justify-content: center;
}


.loader-container {
    position: relative;
    width: 120px;
    height: 120px
}

.loader {
    border: 5px solid #1bbc9b;
    border-top: 5px solid #000;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    background-color: #fff;
    -webkit-animation: spinloader 2s linear infinite;
    animation: spinloader 2s linear infinite
}

.loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 70%;
    width: 70%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

@-webkit-keyframes spinloader {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spinloader {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}