/*/ Import Font Awesome /*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');

/* / Your Global Styles / */
:root .lpx-brand-logo {
    --lpx-logo: url('/images/logo/leptonx/logo-light.png');
    --lpx-logo-icon: url('/images/logo/leptonx/logo-light-thumbnail.png');
}
[data-bs-theme=light]

{
    --bs-black: #1C2932;
    --bs-white: #FFFFFF;
    --bs-border-color: #E6E6E6;
    --bs-body-color: #F8F8F8;
    --bs-grey-text: #838383;
    --bs-red-invaild: #D93F21;
    --bs-invaild: #DADADA;
    --bs-green: #63BE7D;
    --bs-card-black: #1C2932;
    --color1: #AB5FFF;
    --color2: #3D4EFF;
    --bs-grey-fill: #F8F8F8;
    --bs-both: #fff;
    --bs-both-black: #1C2932;
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-black: #fff;
    --bs-white: #1D1C1F;
    --bs-grey-fill: #565656;
    --bs-grey-text: #E6E6E6;
    --bs-body-color: #1D1C1F;
    --bs-body-color-rgb: 212, 212, 212;
    --bs-body-bg: #1D1C1F;
    --bs-body-bg-rgb: 23, 23, 23;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(212, 212, 212, 0.75);
    --bs-secondary-color-rgb: 212, 212, 212;
    --bs-secondary-bg: #262626;
    --bs-secondary-bg-rgb: 38, 38, 38;
    --bs-tertiary-color: rgba(212, 212, 212, 0.5);
    --bs-tertiary-color-rgb: 212, 212, 212;
    --bs-tertiary-bg: rgb(30.5, 30.5, 30.5);
    --bs-tertiary-bg-rgb: 31, 31, 31;
    --bs-primary-text-emphasis: rgb(241.8, 120, 161.4);
    --bs-secondary-text-emphasis: #ababab;
    --bs-success-text-emphasis: rgb(147.6, 207, 150);
    --bs-info-text-emphasis: rgb(117.6, 171, 241.2);
    --bs-warning-text-emphasis: rgb(252.6, 186, 102);
    --bs-danger-text-emphasis: rgb(248.4, 142.2, 133.8);
    --bs-light-text-emphasis: #f5f5f5;
    --bs-dark-text-emphasis: #d4d4d4;
    --bs-primary-bg-subtle: rgb(46.6, 6, 19.8);
    --bs-secondary-bg-subtle: #171717;
    --bs-success-bg-subtle: rgb(15.2, 35, 16);
    --bs-info-bg-subtle: rgb(5.2, 23, 46.4);
    --bs-warning-bg-subtle: rgb(50.2, 28, 0);
    --bs-danger-bg-subtle: rgb(48.8, 13.4, 10.6);
    --bs-light-bg-subtle: #262626;
    --bs-dark-bg-subtle: #181818;
    --bs-primary-border-subtle: rgb(139.8, 18, 59.4);
    --bs-secondary-border-subtle: #454545;
    --bs-success-border-subtle: rgb(45.6, 105, 48);
    --bs-info-border-subtle: rgb(15.6, 69, 139.2);
    --bs-warning-border-subtle: rgb(150.6, 84, 0);
    --bs-danger-border-subtle: rgb(146.4, 40.2, 31.8);
    --bs-light-border-subtle: #404040;
    --bs-dark-border-subtle: #262626;
    --bs-heading-color: inherit;
    --bs-link-color: rgb(241.8, 120, 161.4);
    --bs-link-hover-color: rgb(244.44, 147, 180.12);
    --bs-link-color-rgb: 242, 120, 161;
    --bs-link-hover-color-rgb: 244, 147, 180;
    --bs-code-color: rgb(230.4, 132.6, 181.2);
    --bs-highlight-color: #d4d4d4;
    --bs-highlight-bg: rgb(235.94, 198.34, 132.54);
    --bs-border-color: #7B7B7B;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: rgb(134.04, 231, 218.52);
    --bs-form-valid-border-color: rgb(134.04, 231, 218.52);
    --bs-form-invalid-color: rgb(245.4, 107.16, 107.16);
    --bs-form-invalid-border-color: rgb(245.4, 107.16, 107.16);
}


.split-right {
    background: var(--bs-white);
}

    .split-right .card {
        background: var(--bs-white);
    }

        .split-right .card h4,
        .split-right .card h2 {
            font-size: 32px;
            font-weight: 600;
            margin: 0px;
            color: var(--bs-black);
        }

        .split-right .card input {
            border-radius: 12px !important;
            height: 48px;
            padding: 13px 16px;
            border: 1px solid var(--bs-border-color);
            background: var(--bs-grey-fill);
            background: #F8F8F8;       
            font-size: 14px;
            font-weight: 400;
        }
#LoginInput_Password {
    border-right: none;
    border-radius: 12px 0 0 12px !important;
}
.login-btn {
    margin-top: 30px;
}
.or-tag h5 {
    position: relative;
    z-index: 1;
    margin: 0px;
    padding: 30px 0px;
    font-size:12px;
}
.split-right {
    width: 50%;
    padding: 50px 80px;
    position: absolute;
    right: 0;
    height: 100vh;
}

    .split-right .form-label {
        margin-bottom: 8px;
        color: var(--bs-black);
        font-size: 15px;
        font-weight: 400;
    }

    .split-right .content-container {
        min-width: 100%;
        min-width: 494px;
    }

.split-left {
    width: 50%;
}

.reset-pw a {
    font-size: 12px;
    color: var(--bs-grey-text);
    font-weight: 400;
}

.reset-pw .reset {
    color: #1C2932 !important;
}
.split-right .text-center {
    font-size: 12px;
    color: var(--bs-grey-text);
    font-weight: 400;
}

a.forget_pass {
    text-decoration: none;
    color: var(--bs-grey-text);
}

.form-check-input input {
    border-radius: 12px !important;
    height: auto;
    border: 1px solid var(--bs-border-color);
    font-size: 14px;
    font-weight: 500;
}
.form-check-input input::placeholder {
        color: #838383 !important;
    }
.split-right .btn-primary {
    background-color: var(--bs-border-color);
    color: var(--bs-white);
    border: 1px solid var(--bs-grey-fill);
    padding: 10px;
    height: 48px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

    .split-right .card .custom-checkbox input {
    height: 20px;
    width: 20px;
    padding: 0px;
    border-radius: 5px;
}
.split-right .card .btn-secondary {
    background-color: #FFFFFF;
    color: #1C2932;
    border-color: #1C2932;
    height: 52px;
    margin: 0px !important;
    border-radius: 12px;
    /*    width: 454px;*/
}
.social-tags {
    gap: 18px;
    display: grid;
}
.or-tag {
    text-align: center;
    margin: 0px;
    margin-bottom: 35px;
    position: relative;
    font-size: 12px;
}
    .or-tag:after {
        position: absolute;
        content: '';
        width: 152px;
        height: 1px;
        background: #E6E6E6;
        top: 19%;
        right: 0;
    }
    .or-tag:before {
        position: absolute;
        content: '';
        width: 152px;
        height: 1px;
        background: #E6E6E6;
        top: 19%;
        left: 0;
    }
#PasswordVisibilityButton i {
    font-size: 18px;
    color: #838383;
}
.reset-pw {
/*    text-align: center;*/
    display: flex;
    gap: 3px;
}
#PasswordVisibilityButton {
    border: none;
    background: transparent;
    background: #F8F8F8;
    border: 1px solid var(--bs-border-color);
    border-radius: 0px 12px 12px 0px;
    padding: 0px 16px 0px 0px;
    border-left: none;
}
.split-right .btn-primary:hover {
    background-color:var(--bs-black);
    border: 1px solid var(--bs-grey-fill);
    color: #fff;
}
span.valid-icon.position-absolute.end-0.me-3.text-success {
    position: absolute;
    z-index: 9999;
}
span.valid-icon.position-absolute.end-0.me-5.text-success {
    position: absolute;
    z-index: 9999;
}

.error-icon {
    color: var(--bs-red-invaild) !important;
    margin-right: 5px;
}

.validation-error-msg {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: red;
    margin-top: 0.25rem;
}

.form-control.is-invalid {
    border-color: red;
}

@media only screen and (max-width:1200px){
    .split-right .content-container {
        min-width: auto;
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {
    .or-tag:before,
    .or-tag:after {
        width: calc(100% - 205px);
    }
}


.form-control {
    padding: 13px 16px;
    border: 1px solid #E6E6E6 !important;
}

/* Remove right border radius from form-controls with trailing elements */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Remove left border radius from trailing buttons and text */
.input-group > .btn-outline-secondary,
.input-group > .input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Dropdown arrow styling for select elements */
.form-select, 
select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 12px !important;
    padding-right: 36px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Dark theme dropdown arrow */
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e") !important;
}

/* Ensure tenant dropdown has proper spacing */
#SelectedTenant {
    cursor: pointer;
}

/* Fallback for browsers that don't support SVG backgrounds */
@supports not (background-image: url("data:image/svg+xml,...")) {
    .form-select::after,
    select.form-control::after {
        content: "▼";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #343a40;
        font-size: 12px;
    }
    
    [data-bs-theme="dark"] .form-select::after,
    [data-bs-theme="dark"] select.form-control::after {
        color: #ffffff;
    }
}

.content-body h4 {
    font-size: 32px;
    font-weight: 600;
    color: var(--bs-black);
}

label.form-label {
    color: var(--bs-black);
    font-size:15px;
    font-weight:400;
}

button.btn-login {
    background: var(--bs-border-color);
    color: var(--bs-white);
    font-size: 14px;
    font-weight:600;
    transition: all 0.3s ease;
}

    button.btn-login:hover {
        background: var(--bs-black);
        color: var(--bs-white);
    }

.validation-error-msg {
    width: 454px;
    height: 19px;
    margin-top: 10px;
    gap: 5px;
}

.error-icon {
    color: #D93F21;
    font-size: 22px;
}

.forget, .last_line {
    font-size: 12px;
    font-weight: 400;
}

button.log_btn {
    font-size: 14px;
    font-weight: 400;
}

a.forget_pass {
    color: var(--bs-grey-text) !important;
}


.btns-gap {
    width: 149px;
    gap: 15px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle), .btn-group > .btn.dropdown-toggle-split:first-child, .btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.btn-group > .btn:nth-child(n+3), .btn-group > :not(.btn-check) + .btn, .btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}


/*24-04-new-css*/

right_content .right {
    padding: 0px;
}

    right_content .right .card-body {
        padding: 0px 16px !important;
    }

    right_content .right .card h4, .split-right .card h2 {
        font-size: 24px;
    }

.right_content .right .card-body {
    padding: 0px 16px !important;
}

.right_content .right .content-body form {
    margin-top: 30px !important;
}

.right_content .right .card {
    background-color: #fff;
}

.right_content .right form p {
    text-align: center;
}

.right_content .right .content-body .btn-group {
    gap: 15px;
}

.right_content .right .content-body .btn-outline-dark {
    width: 72px;
    height: 44px;
    padding: 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*media-css*/
@media only screen and (max-width:767px) {
    right_content .right {
        padding: 0px;
    }
    right_content .right .card-body {
        padding: 0px 16px !important;
    }
    right_content .right .card h4, .split-right .card h2 {
        font-size: 24px;
    }
    .right_content .right .card-body {
        padding: 0px 16px !important;
    }

    .right_content .right .content-body form {
        margin-top: 30px !important;
    }
    .right_content .right .card {
        background-color: #fff;
    }
    .right_content .right form p {
        text-align: center;
    }
    .right_content .right .content-body .btn-group {
        gap: 15px;
    }
    .right_content .right .content-body .btn-outline-dark {
        width: 72px;
        height: 44px;
        padding: 16px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
 
}
/*24-04-new-css-end*/

.form-control.is-valid {
    background-image: none;
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(.btn):not(.input-group-text) {
    margin-top: 14px;
}

span.valid-icon.position-absolute.end-0.me-3.text-success.eye-icon1 {
    margin-top: 0px !important;
}

span.valid-icon.position-absolute.end-0.me-5.text-success.eye-icon1 {
    margin-top: 0px !important;
}

#PasswordVisibilityButton {
    margin-top: 0;
    padding-left: 10px;
}

.icon-margin {
    margin-top: 0 !important;
}