.login-section{font-family: 'Nunito';}
.login-section{height: 100vh;display: block;}
.login-section .row-contnet{display: flex;width: 100%;height: 100%;}
.login-section .row-contnet .left-content{position: relative;;background: linear-gradient(121deg, rgba(11, 176, 108, 0.40) 0%, rgba(11, 176, 108, 0.20) 50%, rgba(11, 176, 108, 0.40) 100%);width: 65%;height: 100%;display: flex;align-items: center;justify-content: center;}
.login-section .row-contnet .left-content .login-vector{height: 500px;}

.login-section .row-contnet .right-content{height: 100%;width: 35%;padding: 0 100px;position: relative;}
.login-section .row-contnet .right-content .form-content{height: 100%;display: flex;flex-direction: column;gap: 20px 0;justify-content: center;align-items: flex-start;}
.login-section .row-contnet .right-content .form-content .top-content{display: flex;flex-direction: column;gap: 20px 0;align-items: flex-start;}
.login-section .row-contnet .right-content .form-content .top-content .login-logo{max-width: 100%;max-height: 80px;height: auto;width: auto;object-fit: contain;}
.login-section .row-contnet .right-content .form-content .top-content .welcome-div{display: flex;flex-direction: column;}
.login-section .row-contnet .right-content .form-content .top-content .welcome-div .welcome-text{color: #101928;font-size: 28px;font-weight: 700;line-height: normal;letter-spacing: -0.28px;margin: 0;}
.login-section .row-contnet .right-content .form-content .top-content .welcome-div .welcome-para{color: #101928;font-size: 16px;font-weight: 400;line-height: 25px;margin: 0;text-transform: capitalize;}
.login-section .form-row{width: 100%;display: flex;flex-direction: column;}
.login-section .form-row .form-group{width: 100%;margin-bottom: 15px;}
.login-section .form-control-ui{border: 0;border-bottom: 1px solid rgba(16, 25, 40, 0.70);padding: 15px 0;color: #101928;font-size: 18px;font-weight: 500;line-height: normal;letter-spacing: -0.18px;width: 100%;}
.login-section .form-control-ui:focus{outline: none;border-bottom: 1px solid #0BB06C;}
.login-section .toggle-password{position: absolute;right: 0;top: 50%;transform: translateY(-50%);cursor: pointer;z-index: 99999;}
.login-section .check-box-div{display: flex;align-items: center;gap: 5px;}
.login-section .remember_me{color: #101928;font-size: 16px;font-weight: 500;line-height: normal;letter-spacing: -0.15px;opacity: 0.7;}
.login-section .forgot-div a{color: #101928;font-size: 15px;font-weight: 500;line-height: normal;letter-spacing: -0.15px;text-decoration: none;transition: all 0.3s ease;}
.login-section .forgot-div a:hover{color: #0BB06C;}
.login-section  .login_button{margin-top: 40px;display: block;}
.login-section  .login_button .primary-btn{width: 100%;display: flex;border: 0;padding: 13.333px 0;justify-content: center;align-items: center;align-self: stretch;border-radius: 8px;background: #0BB06C;color: #FFF;text-align: center;font-size: 18px;font-weight: 600;line-height: normal;letter-spacing: -0.18px;transition: all 0.3s ease;}
.login-section  .login_button .primary-btn:hover{background: #101928;}
.login-section .vedcool-reserved{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;padding: 20px 0;}
.login-section .vedcool-reserved #footer-text{color: #101928;text-align: center;font-size: 16px;font-weight: 600;line-height: normal;letter-spacing: -0.18px;text-transform: capitalize;}
.login-section .powered_by{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 100%;text-align: center;padding: 20px 0;}
.login-section .powered_by .powered_by_div{display: flex;align-items: center;justify-content: center;gap: 10px;}
.login-section .powered_by .powered_by_div span{color: #101928;font-size: 16px;font-weight: 600;line-height: normal;letter-spacing: -0.18px;text-transform: capitalize;}
.login-section .powered_by .powered_by_div img{width: 81px;object-fit: contain;}
.login-section .back_button{margin-top: 20px;}
.login-section .back_button a{color: #101928;text-align: center;font-size: 18px;font-weight: 500;line-height: normal;letter-spacing: -0.18px;text-decoration: none;transition: all 0.3s ease;}
.login-section .back_button a:hover{color: #0BB06C;}

input:-webkit-autofill {box-shadow: none !important;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px transparent inset !important;
	box-shadow: 0 0 0 1000px transparent inset !important;
	-webkit-text-fill-color: inherit !important;
	transition: background-color 5000s ease-in-out 0s !important;
	background: transparent !important;
	background-color: transparent !important;
}

.swal2-popup.swal2-toast{padding: 20px !important;border-radius: 12px;flex-direction: row !important;}
.swal2-popup.swal2-toast:has(.swal2-confirm.error){border: 1px solid #E33629;background: #FFF0F1;}
.swal2-popup.swal2-toast:has(.swal2-confirm.success){border: 1px solid #0BB06C;background: #E7F8F1;}
.swal2-popup.swal2-toast:has(.swal2-confirm.info){border: 1px solid #091854;background: #D7DFFF;}
.swal2-popup.swal2-toast .swal2-title{color: #312828;font-family: 'Nunito', sans-serif;font-size: 18px !important;font-weight: 400 !important;line-height: normal;margin: 0 16px !important;text-transform: lowercase !important;display: block !important;}
.swal2-popup.swal2-toast .swal2-title:first-letter{text-transform: uppercase !important;}
.swal2-success-circular-line-left, .swal2-success-fix, .swal2-success-circular-line-right{background-color: transparent !important;}
.swal2-icon.swal2-success [class^="swal2-success-line"]{background-color: rgba(11, 176, 108, 1) !important;}
.swal2-popup.swal2-toast .swal2-success{border-color: rgba(11, 176, 108, 1) !important;}
.swal2-popup .swal2-confirm.cross-btn{padding: 0;border: 0;margin: 0;background: transparent;font-size: 24px;color: #979FA9;display: flex;align-items: center;}
.swal2-popup .swal2-confirm .close-svg{width: 17px;height: 17px;}
.swal2-popup.swal2-toast .swal2-icon{width: 24px !important;min-width: 24px !important;height: 24px !important;margin: 0;border: 0 !important;}


@media (max-width: 1600px) {
    .login-section .row-contnet .right-content{padding: 0 80px;}
    .login-section .login_button{margin-top: 30px;}
    .login-section .login_button .primary-btn{padding: 10px 0;font-size: 16px;}
    .login-section .row-contnet .right-content .form-content .top-content .welcome-div .welcome-text{font-size: 22px;}
    .login-section .row-contnet .right-content .form-content .top-content .welcome-div .welcome-para{font-size: 14px;}
    .login-section .form-control-ui{padding: 10px 0;font-size: 14px;}
    .login-section .forgot-div a{font-size: 14px;}
    .login-section .form-row .form-group{margin-bottom: 10px;}
    .login-section .row-contnet .left-content .login-vector{height: 400px;}

    .login-section .back_button a{font-size: 16px;}
}
@media (max-width: 1200px) {
    .login-section .row-contnet .right-content{padding: 0 50px;width: 40%;}
    .login-section .row-contnet .left-content .login-vector{height: 300px;}
    .login-section .row-contnet .left-content{width: 60%;}
}
@media (max-width: 991px) {
    .login-section .row-contnet .left-content, .login-section .row-contnet .right-content{width: 100%;}
    .login-section .row-contnet{flex-direction: column;}
    .login-section .powered_by{position: unset;left: unset;transform: none;}
    .login-section .row-contnet .left-content{flex-direction: column;gap: 30px;padding: 20px 0 0 0;}
    .login-section .row-contnet .right-content{padding: 20px 15px;}
    .login-section .vedcool-reserved{position: unset;}
}
@media (max-width: 576px) {
    .login-section .row-contnet .left-content .login-vector{height: 200px;}
    .login-section .powered_by .powered_by_div span{font-size: 14px;}
    .login-section .powered_by{padding: 10px 0;}
    .login-section .row-contnet .left-content{gap: 15px 0;}
    .login-section .row-contnet .right-content .form-content .top-content .login-logo{max-height: 50px;}
    .login-section .row-contnet .right-content .form-content .top-content .welcome-div .welcome-text{font-size: 18px;}
    .login-section .vedcool-reserved #footer-text{font-size: 14px;}
    .login-section .vedcool-reserved{padding: 10px 0;}
    .login-section .back_button a{font-size: 14px;}
}

/* ==========================================================================
   Short-viewport fix — footer overlapping the Login button
   --------------------------------------------------------------------------
   Reproduced 2026-07-30 at 1034x549: `.vedcool-reserved` is
   `position:absolute; bottom:0`, and `.login-section` is locked to
   `height:100vh`. On a short viewport the copyright footer therefore sits ON TOP
   of the bottom ~26px of the submit button, and because the section is exactly
   100vh the page cannot scroll to reach it.

   The first attempt at this fixed the overlap by dropping both pinned blocks
   into normal flow (`position:static`). That broke the two-column desktop
   layout on every laptop screen (~1366x635): `.powered_by` lives INSIDE
   `.left-content`, which is a flex ROW, so unpinning it parked "Powered by" to
   the right of the illustration; and unpinning `.vedcool-reserved` collapsed
   the vertically-centred form to the top of the page.

   Correct approach: keep both blocks pinned and keep the two columns, but make
   the layout fluid instead of locked — the section grows past 100vh when it has
   to, the columns stretch to whatever the row's height ends up being (they can
   no longer rely on `height:100%` once the row height comes from min-height),
   the form column reserves bottom padding so the pinned copyright can never
   land on the Login button, and the illustration scales to the space left.
   Scoped to >=992px so the mobile stack above is untouched.
   ========================================================================== */
@media (min-width: 992px) and (max-height: 800px) {
    .login-section,
    .login-section .row-contnet {
        height: auto;
        min-height: 100vh;
    }

    /* `height:100%` resolves to auto once the parent's height is auto, so the
       columns would shrink-wrap. Stretch them explicitly instead. */
    .login-section .row-contnet .left-content,
    .login-section .row-contnet .right-content {
        height: auto;
        align-self: stretch;
    }

    /* Form column keeps its centred content; the bottom padding is the space
       the pinned copyright sits in. */
    .login-section .row-contnet .right-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 24px;
        padding-bottom: 56px;
    }

    .login-section .row-contnet .right-content .form-content {
        height: auto;
    }

    /* Artwork column: same reservation for the pinned "Powered by" strip, and
       the illustration scales down instead of forcing a fixed 400/500px. */
    .login-section .row-contnet .left-content {
        padding: 24px 0 72px;
    }

    .login-section .row-contnet .left-content .login-vector {
        height: auto;
        max-height: calc(100vh - 130px);
        max-width: 82%;
    }

    .login-section .vedcool-reserved,
    .login-section .powered_by {
        padding: 14px 0;
    }
}