/*!
 * Style Login v1
 * Copyright 2023 Firstsasia Consultants.
 * Licensed under (https://www.firstasiaconsultants.com/)
 *
 */

/*
 ******************************************************************** 
 * Fonts
 ******************************************************************** 
 */

@import url('../../../fonts/poppins/poppins.css');

/*
 ******************************************************************** 
 * Custom Properties
 ******************************************************************** 
 */
:root{
    --primaryColor : #365293;
    --lightColor:#fff;
    --neutralColor: #e1e1e1;

    --normalFont: 0.75rem;
    --smallFont : 0.68rem;
    --mediumFont : 0.875rem;

    --fontLight : #fff;
    --fontNatural : #e1e1e1;
    --fontYellow : #ffd400;
    --fontShadow : #e1e1e1;
    --fontLabel : #999;

}
html {
    height: 100%;
}
body {
    font-family: 'Poppins Regular', sans-serif;
    font-size: var(--normalFont) !important;
    color: var(--darkColor);
    transition: all 0.3s ease !important;
    height: 100%;
}

.oa-container {
    width: 100%;
    height: 100%;  
}

.font-yellow {
    color: var(--fontYellow) !important;
}

.login-left-box {
    width: 47.22%;
    height: 100%;
    background-color: var(--primaryColor);
}

.login-right-box {
    width: 52.78%;
    height: 100%;
    background-color: var(--neutralColor);
}

.login-mobile-top,
.login-mobile-bottom {
    display: none;
}

.login-left-box .login-left-wrapper {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
/*    max-width: 580px;*/
/*    padding: 30px; */
    padding-top: clamp(10px, 2.0vw, 30px); 
    padding-bottom: clamp(10px, 2.0vw, 30px); 
    padding-left: clamp(10px, 3.4vw, 50px); 
    padding-right: clamp(10px, 3.4vw, 50px); 
}

.login-left-box .login-left-wrapper.llw-margin {
    position: relative;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.login-left-box .login-copyright {
    position: absolute;
    bottom: 0;
    font-size: clamp(11px, 0.83vw, 12px);
    color: var(--fontNatural);
    padding: 0 0 50px 30px;
}

.login-left-box .login-copyright img {
    padding-right: 10px;
    cursor: pointer;
}

.login-left-box .login-logo {
    width: 170px;
}

.login-text-1 {
    font-family: 'Poppins Bold', sans-serif;
    font-size: 2rem;
    font-size: clamp(22px, 2.0vw, 32px);
    color: var(--fontLight);
    padding-bottom: 15px;
}

.login-text-2 {
    font-family: 'Poppins Regular', sans-serif;
    font-size: 1.5rem;
    font-size: clamp(16px, 1.2vw, 24px);
    line-height: clamp(26px, 2.0vw, 34px);
    color: var(--fontNatural);
    padding-bottom: 15px;
}

.login-text-3 {
    font-family: 'Poppins Thin Italic', sans-serif;
    font-size: clamp(12px, 0.97vw, 13px);
    line-height: clamp(20px, 1.11vw, 22px);
    color: var(--fontLight);
}

.login-card {
    width: 400px;
    height: auto;
    padding: 55px;
    background-color: var(--lightColor) !important;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
}

.login_card_head {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 10px;
    background-color: var(--primaryColor) !important;
    width: 100%;
    height: 46px;
    border-radius: 4px 4px 0 0;
    display: none;
}

.login_card_logo {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 125px;
}

.toggle-password {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fontLabel) !important;
    cursor: pointer;

}

.login-button {
    margin-top: 20px;
    background-color: var(--primaryColor) !important;
    font-size: clamp(13px, var(--mediumFont), 14px) !important;
}

.error-message {
    display: none;
    background-color: #e05757; 
    padding:15px; 
    border-radius: 5px; 
    margin-bottom: 20px; 
    color: #fff;
}

/* BOOTSTRAP CUSTOM */

.form-control, .input-group-text {
    font-size: var(--mediumFont) !important;
}

.form-control::placeholder {
    color: var(--fontShadow) !important;
}

.form-label {
    font-family: 'Poppins SemiBold', sans-serif;
    color: var(--fontLabel) !important;
    font-size: clamp(13px, var(--mediumFont), 14px) !important;
}

/* CHATWOOT CUSTOM */
.woot-widget-bubble {
    background-color: #0375a7 !important;
    transform: scale(0.8) !important;
    right: 5px !important;
    bottom: 5px !important;
}

/* button animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-ajax-loader.loading:before {
    content: "";
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    width: 1em;
    height: 1em;
    border: 0.2em solid #dedede;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.4em;
}

/*@media (max-width: 575.98px) {

}*/

@media (max-width: 768px) {
    .login-left-box {
        display: none;
    }

    .login-right-box {
        width: 100%;
        background-color: var(--lightColor);
    }

    .login-mobile-top {
        position: absolute;
        width: 100%;
        height: 32%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primaryColor);
    }

    .login-mobile-top img {
        width: 70%;
        max-width: 300px;
        padding-bottom: 30px;
    }

    .login-mobile-top:after{
        content: '';
        position: absolute;
        width: 100%;
        top:55%;
        bottom: -5px;
        background-image: URL('/assets/images/login_wave.svg');
        background-size: auto 100%;
        background-repeat: no-repeat;
    }

    .login-mobile-bottom {
        display: block;
        margin-top: 30px;
        color: #999;
        border: 1px dashed var(--bs-border-color);
        padding: 20px 15px;
        font-size: 13px;
    }

    .login-card {
        width: 90%;
        width: clamp(90%, 1vw, 95%);
        padding: 0 20px;
        top: 65%;
    }

    .login-card input {
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }

    .login-button {
        margin-top: 20px;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
    }

    .login_card_head {
        display: none;
    }
}