.body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
}
/* === CORE LAYOUT – KEEP SIDE-BY-SIDE UNTIL 1100px === */
.beeserp-login-wrapper {
    margin: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    display: flex;
    min-height: 100vh;
    background-color: #f0f4f8;
    overflow: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}

.beeserp-login-right-panel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    background: transparent !important;
}


.beeserp-login-left-panel {
    flex: 2;
    background: url('/images/loginhome.png') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-width: 260px;
    position: relative;
}

.beeserp-login-right-panel {
    flex: 1;
    background: #7b9db3;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: clamp(1rem, 3vw, 2rem);
    min-width: 300px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
}

.beeserp-login-card {
    background: #7b9db3;
    padding: clamp(1rem, 3.5vw, 1.8rem) clamp(0.8rem, 3vw, 1.4rem);
    border-radius: 15px;
    width: 100%;
    max-width: 340px;
    color: #fff;
    box-shadow: 0 20px 40px rgba(123,157,179,.35);
    animation: beeserpFadeInUp .9s ease-out;
    margin: 1rem auto;
}

/* === HEXAGON GRID – SCALED & RESPONSIVE === */
.hex-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: clamp(0.4rem, 1.2vw, 0.8rem);
    max-width: 100%;
    padding: 0 0.8rem;
    margin-top: 1rem;
}

.hex {
    position: relative;
    width: 100%;
    padding-bottom: 115%;
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: clamp(0.6rem, 1.6vw, 0.9rem);
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.3s;
}

    .hex:hover {
        transform: scale(1.06);
    }

/* === RESPONSIVE: KEEP SIDE-BY-SIDE UNTIL 1100px === */
@media (max-width: 1300px) {




    .beeserp-login-right-panel {
        padding: 1.2rem 0.8rem !important;
        align-items: center !important;
        min-width: 280px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }


    .beeserp-login-card {
        max-width: 320px !important;
        padding: 1.2rem 0.9rem !important;
    }

    .beeserp-login-title {
        font-size: 0.8em !important;
    }

    .beeserp-login-card img.logo-top {
        margin-top: -50px !important;
        max-width: 100px !important;
    }


    .beeserp-login-card img.logo-bottom {
        max-width: 80px !important;
    }

    .beeserp-login-btn {
        padding: 10px !important;
        font-size: 0.85em !important;
    }

    .form-control {
        font-size: 0.85rem !important;
        padding: 3px 10px !important;
    }

    label {
        font-size: 0.75em !important;
    }

    .beeserp-remember-section span {
        font-size: 0.8em !important;
    }
}

@media (max-width: 992px) {
    .beeserp-login-left-panel {
        height: 34vh;
        min-height: 220px;
    }

    .hex-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .beeserp-login-card {
        max-width: 90%;
    }
}

@media (max-width: 992px) {
    .beeserp-login-left-panel {
        height: 32vh !important;
        min-height: 200px !important;
        display: none !important;
    }

    .hex-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .beeserp-login-left-panel {
        height: 30vh !important;
        min-height: 180px !important;
        display: none !important;
    }

    .hex-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.7rem !important;
    }

    .beeserp-login-card {
        padding: 1.4rem 1rem !important;
        max-width: 95% !important;
    }
}

@media (max-width: 576px) {
    .beeserp-login-left-panel {
        height: 28vh !important;
        min-height: 160px !important;
        display: none !important;
    }

    .beeserp-login-card {
        padding: 1.2rem 0.9rem !important;
        max-width: 100% !important;
        margin: 1rem !important;
    }

        .beeserp-login-card img.logo-top {
            max-width: 110px !important;
        }

        .beeserp-login-card img.logo-bottom {
            max-width: 70px !important;
        }
}

@media (max-width: 400px) {
    .beeserp-login-left-panel {
        height: 25vh !important;
        min-height: 140px !important;
        display: none !important;
    }

    .hex-container {
        grid-template-columns: 1fr !important;
    }

    .beeserp-login-card {
        padding: 1rem 0.7rem !important;
    }

        .beeserp-login-card img.logo-top {
            max-width: 90px !important;
        }
}

/* === ORIGINAL STYLES – SCALED === */
.beeserp-cloud-welcome {
    background: linear-gradient(45deg, rgba(255,255,255,0.15), rgba(123,157,179,0.3));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 30px 20px;
    margin: 10px;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    animation: beeserpGradientWave 8s ease-in-out infinite, beeserpFadeInLeft 1s ease-out;
}

    .beeserp-cloud-welcome h1 {
        font-size: clamp(1.8em, 4vw, 2.5em);
        font-weight: 700;
        margin: 0 0 8px;
        letter-spacing: 1.2px;
        text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .beeserp-cloud-welcome p {
        font-size: clamp(0.9em, 2.5vw, 1.1em);
        margin: 0;
        opacity: 0.85;
        font-weight: 400;
    }

.beeserp-login-card img.logo-top {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto 18px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.2));
    transition: transform .3s ease;
}

.beeserp-login-card img.logo-bottom {
    width: 100%;
    max-width: 120px;
    height: auto;
    display: block;
    margin: 22px auto 0;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.2));
    transition: transform .3s ease;
}

    .beeserp-login-card img.logo-top:hover, .beeserp-login-card img.logo-bottom:hover {
        transform: scale(1.1);
    }

.beeserp-login-title {
    color: white;
    text-align: center;
    font-size: clamp(1.6em, 4vw, 1.9em);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.beeserp-input-wrapper {
    position: relative;
    margin-bottom: 16px;
    animation: beeserpSlideIn 0.5s ease-out;
    animation-delay: calc(0.1s * var(--input-order));
}

.beeserp-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    color: #b0c4de;
    font-size: 0.9em;
}

.beeserp-login-wrapper .form-control {
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    color: white;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    padding: clamp(7px, 2vw, 10px) clamp(10px, 3vw, 14px);
    font-size: clamp(0.85rem, 2.2vw, 1rem);
}

    .beeserp-login-wrapper .form-control::placeholder {
        color: rgba(255,255,255,0.65);
    }

    .beeserp-login-wrapper .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.3);
        background: rgba(255,255,255,0.18);
    }

.beeserp-login-wrapper label {
    color: white;
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    font-size: clamp(0.75em, 2vw, 0.9em);
}

.beeserp-remember-section {
    margin: 16px 0;
    display: flex;
    align-items: center;
    color: white;
}

    .beeserp-remember-section span {
        font-weight: 500;
        font-size: clamp(0.8em, 2vw, 0.9em);
    }

.beeserp-toggle-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-right: 10px;
}

    .beeserp-toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.beeserp-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.25);
    transition: all 0.4s ease;
    border-radius: 34px;
    border: 2px solid rgba(255,255,255,0.35);
}

    .beeserp-slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: all 0.4s ease;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .beeserp-slider:after {
        content: 'OFF';
        position: absolute;
        top: 50%;
        left: 68%;
        transform: translate(-50%, -50%);
        color: #ccc;
        font-size: 9px;
        font-weight: bold;
        transition: all 0.4s ease;
    }

.beeserp-toggle-switch input:checked + .beeserp-slider {
    background-color: #007bff;
    border-color: #007bff;
}

    .beeserp-toggle-switch input:checked + .beeserp-slider:before {
        transform: translateX(28px);
    }

    .beeserp-toggle-switch input:checked + .beeserp-slider:after {
        content: 'ON';
        color: white;
        left: 25%;
    }

.beeserp-login-btn {
    width: 100%;
    padding: clamp(10px, 2.5vw, 14px);
    background: linear-gradient(135deg, #39648c 0%, #2c506e 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: clamp(0.85em, 2.2vw, 1em);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    animation: beeserpPulse 2s infinite ease-in-out;
}

    .beeserp-login-btn:hover {
        background-color: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,123,255,0.35);
        animation: none;
    }

.beeserp-forgot-link {
    text-align: center;
    color: #e3f2fd;
    text-decoration: none;
    display: block;
    margin-top: 16px;
    font-weight: 500;
    font-size: clamp(0.8em, 2vw, 0.95em);
    transition: all 0.3s ease;
}

    .beeserp-forgot-link:hover {
        color: white;
        text-decoration: underline;
    }

/* === ANIMATIONS === */
@keyframes beeserpFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes beeserpFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes beeserpSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes beeserpGradientWave {
    0% {
        background: linear-gradient(45deg, rgba(255,255,255,0.15), rgba(123,157,179,0.3));
    }

    50% {
        background: linear-gradient(45deg, rgba(123,157,179,0.3), rgba(255,255,255,0.15));
    }

    100% {
        background: linear-gradient(45deg, rgba(255,255,255,0.15), rgba(123,157,179,0.3));
    }
}

@keyframes beeserpPulse {
    0%,100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

/* === OTP & OTHERS === */
#Otpcard, #ChangePasswordOtpcard, #ForgetPassWordlogin {
    max-width: 360px;
    margin: 1rem auto;
}

.inputs input {
    width: 38px;
    height: 38px;
}

.validate {
    border-radius: 20px;
    height: 38px;
    background-color: dodgerblue;
    width: 130px;
}

/* Password & Confirm Password input fix */
#forgetPasswordForm .form-control {
    border: 2px solid #000 !important; /* Black border */
    background-color: #fff;
    color: #000;
}

/* Input group (eye icon) border alignment */
#forgetPasswordForm .input-group-text {
    border: 2px solid #000 !important;
    background-color: #f9f9f9;
    color: #000;
}

/* Remove double border between input and eye icon */
#forgetPasswordForm .form-control {
    border-right: none !important;
}

#forgetPasswordForm .input-group-text {
    border-left: none !important;
}

/* Focus effect */
#forgetPasswordForm .form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: #000;
}