.login-container {
            max-width: 100% !important;
            background-color: var(--app-background-color);
            font-size: 15px;
        }
        
        .login-main-container {
            background-color: var(--app-background-color);
        }
        
        .left-login-container {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            background-color: var(--app-background-color);
        }
        
        .form-control {
            border: 0;
            border-bottom: 1px solid #e7e7e7;
        }
        
        .login-label {
            padding-left: 20px;
            padding-right: 15px;
            color: var(--primary-color);
            font-size: 15px;
        }
        
        .login-container-success {
            height: 120% !important;
        }
        
        .welcome-msg {
            font-weight: bold;
            font-size: 15px;
            color: var(--primary-color);
        }
        
        .btn-primary {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            font-size: 18px;
            padding-left: 18px;
            padding-right: 18px;
        }
        
        .zip-select-container {
            width: 11.063rem;
        }
        
        .is-invalid-input {
            border: 1px solid red;
            border-radius: 7px;
        }
        
        .vs__dropdown-toggle {
            border: 0;
            border-bottom: 1px solid #e7e7e7;
        }
        
        .form-field {
            padding: 0.375rem 0.75rem;
        }
        
        .validation_error_label {
            color: red;
            padding-left: 12px;
        }
        
        .client-logo {
            margin-top: 45px;
        }
        
        .client-logo-signup {
            margin-top: 71px;
        }
        
        .btn-login-options {
            padding: 5px;
            width: 100%;
            border-radius: 8px;
            background-color: white;
            font-size: 15px;
            border: 2px solid var(--accent-color);
            transition-duration: 0.4s;
            color: var(--accent-color);
        }
        
        .form-group {
            margin-bottom: 0.3rem;
        }
        
        .btn-login-options:hover {
            background-color: var(--accent-color);
            color: white;
            box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
        }
        
        .btn-register {
            padding: 10px;
            width: 100%;
            border-radius: 8px;
            background-color: var(--app-background-color);
            font-size: 15px;
            border: 2px solid var(--primary-color);
            transition-duration: 0.4s;
            color: var(--primary-color);
            border: 0;
        }
        
        .login-form-container {
            width: 80% !important;
        }
        
        .login-form-container-w-150 {
            width: 150%;
        }
        
        .login-form-container-w-100 {
            width: 100%;
        }
        
        .w-140 {
            width: 140% !important;
        }
        
        .loading-form-container {
            width: 90%;
        }
        
        .login-options-container {
            width: 100%;
        }
        
        .login-options-container-demographics {
            width: 75%;
        }
        
        .btn-login-verify-btn {
            margin-left: 0.5rem;
        }
        
        .btn-login-verify-btn:hover {
            color: #fff;
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .skeleton-card-title {
            width: 60%;
            height: 20px;
        }
        
        .skeleton-card-text {
            width: 100%;
            height: 20px;
        }
        
        .skeleton-btn {
            width: 100%;
            height: 40px;
        }
        
        .form-component {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 60%;
        }
        
        .radio-btn-container {
            margin-left: -5px;
        }
        
        .vs__search {
            padding: 0px;
        }
        
        .btn-resend-otp {
            border: 0;
            background-color: var(--app-background-color);
            color: var(--primary-color);
        }
        
        .resendOTP-timer {
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary-color);
        }
        
        .resend-disabled {
            color: grey;
        }
        
        .lang-select {
            background-color: var(--app-background-color);
            border: none;
        }
        
        .locale-switcher {
            position: absolute;
            top: 12px;
            right: 10px;
        }
        
        .or_label {
            font-size: 15px;
            color: var(--primary-color);
            position: absolute;
            z-index: 100;
            margin-top: 40px;
            background-color: var(--app-background-color);
            width: 30px;
            padding-left: 5px;
            padding-right: 5px;
        }
        
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }
        
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }
        
        .text-center {
            text-align: center;
        }
        /* css for slider */
        
        .agile__nav-button {
            background: transparent;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 24px;
            height: 100%;
            position: absolute;
            top: 0;
            transition-duration: 0.3s;
            width: 80px;
        }
        
        .agile__nav-button:hover {
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 1;
        }
        
        .agile__nav-button--prev {
            left: 0;
        }
        
        .agile__nav-button--next {
            right: 0;
        }
        
        .agile__dots {
            bottom: 10px;
            left: 50%;
            position: absolute;
            transform: translateX(-50%);
        }
        
        .agile__dot {
            margin: 0 10px;
        }
        
        .agile__dot button {
            background-color: transparent;
            border: 1px solid #fff;
            border-radius: 50%;
            cursor: pointer;
            display: block;
            height: 10px;
            font-size: 0;
            line-height: 0;
            margin: 0;
            padding: 0;
            transition-duration: 0.3s;
            width: 10px;
        }
        
        .agile__dot--current button,
        .agile__dot:hover button {
            background-color: #fff;
        }
        
        .slide {
            display: block;
            height: 95vh;
            -o-object-fit: cover;
            object-fit: cover;
            width: 100%;
        }
        
        .options-container {
            width: 100%;
        }
        
        .social_media_urls {
            margin-right: 7px;
        }
        
        .social-media-urls-container {
            text-align: right;
        }
        
        .agile__list,
        .agile__track {
            height: 100%;
        }
        
        .carousel-left-container {
            background-color: var(--app-background-color);
        }
        
        .go-back-btn {
            color: var(--primary-color);
            background-color: white;
            border: white;
            margin-left: -350px;
        }
        
        .agile__nav-button:hover {
            background-color: transparent;
        }
        
        .or-divider {
            margin-top: 1rem;
            margin-bottom: 1rem;
            border: 0;
            border-top: 1px solid grey;
            width: 300px;
        }
        
        #or {
            position: relative;
            width: 280px;
            height: 40px;
            line-height: 50px;
            text-align: center;
            color: grey;
        }
        
        .or-divider-small {
            width: 262px !important;
        }
        
        .or-divider-small::before,
        .or-divider-small::after {
            width: 105px !important;
        }
        
        #or::before,
        #or::after {
            position: absolute;
            width: 120px;
            height: 1px;
            top: 24px;
            background-color: #aaa;
            content: '';
        }
        
        #or::before {
            left: 0;
        }
        
        #or::after {
            right: 0;
        }
        
        .signup-page-container {
            height: calc(100vh - 60px) !important;
            max-height: calc(100vh - 60px);
            overflow-y: auto;
        }
        /* -------- */
        
        @media only screen and (max-width:600px) {
            .carousel-left-container {
                display: none;
            }
        }
        
        @media only screen and (max-width:768px) {
            .carousel-left-container {
                /* display: none; */
            }
            .client-logo {
                margin-top: 0px;
            }
            .login-container-success {
                height: 110% !important;
            }
            .left-login-container {
                height: 90% !important;
            }
            .login-main-container {
                /* height: 150% !important; */
                height: auto !important;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .login-form-container {
                width: 100% !important;
            }
            .login-form-container-w-150 {
                width: 130% !important;
            }
            .login-form-container-mobile {
                width: 150% !important;
            }
            .w-140 {
                width: 100% !important;
            }
        }
        
        @media only screen and (max-width: 360px) {
            .locale-switcher {
                margin-top: -62px;
            }
        }
        
        @media only screen and (max-width:600px) {
            .left-login-container {
                /* margin-top: 70px; */
            }
        }
        
        @media only screen and (min-width:812px) and (max-width:812px) {
            .login-main-container {
                height: 220% !important;
            }
            .slide {
                height: 220vh;
            }
        }
        
        @media only screen and (min-height:812px)and (max-height:960px) and (max-width:375px) {
            .signup-page-container {
                margin-left: 20px;
            }
        }