/**
 * This code: https://gist.github.com/cliffordp/96aeba5b0348ec00f5eb4c4f48296272
 * Modified from this source: https://www.facebook.com/groups/gohighlevel/permalink/2333866730406182/
 */

@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

/* GHL Login Screen */
:root {
    --main-body-bg: #fff;
    --main-body-image: url(https://backend.hillrisehomes.com/media/uploads/matic-login.webp);
    --main-login-bg: #fff;
    --login-logo: url(https://backend.hillrisehomes.com/media/uploads/matic-logo-new.webp);
    --login-heading-color: #a2469a;
    --login-input-color: #a2469a;
    --login-input-border: #a2469a;
    --login-error-color: red;
    --login-forgot-pass-color: #a2469a;
    --login-button-bg: #a2469a;
    --login-button-color: #0000;
    --login-button-hover-bg: #a2469a;
    --login-button-hover-color: #a2469a;
    --login-foot-note-color: #a2469a;
    --login-foot-note-link-color: #1d1f25;
}


body,
.hl-wrapper-container,
.hl-card,
.hl-modal,
.hl-form-content-hz,
.table-container,
.hl-header-content,
.hl-modal-heading .title,
.hl-drawer-content .hl-drawer-title,
.hl-drawer-content .hl-drawer-description,
.hl-toolbar,
.hl-statistic,
.hl-empty,
.hl-text-lg-medium,
.hl-display-sm-medium,
.hl-text-sm-normal,
.hl-text-md-medium,
.hl-text-xs-medium,
.hl-text-xs-regular,
.hl-text-md-normal,
.hl-display-sm-semibold,
.hl-text-sm-regular,
.hl-header .header,
.hl-form-item .n-form-item-label .n-form-item-label__text,
.table-container table thead tr th,
.table-container table thead tr td,
.table-container .n-data-table .n-data-table-td,
.n-tag,
.n-button,
.n-checkbox-group,
.n-radio-group,
.n-input,
.n-base-selection {
    font-family: 'Bree Serif', serif !important;
}

span.text-gray-700 {
    color: #333;
}

.hl_login p.ml-2 {
    color: white;
}

.hl_login .flex>p.ml-2 {
    /* Verify Security Code */
    color: #000000;
}

body .hl_login--body * {
    font-family: var(--main-font);
}

.hl_login {
    background: var(--main-body-bg) !important;
}

.hl_login--header {
    position: absolute;
    background: transparent !important;
    margin-bottom: 0 !important;
    border: none !important;
    z-index: 99;
}

.hl_login--header .container-fluid a img {
    display: none;
}

/* Keep the teal background */
.hl_login--body .container-fluid {
    display: flex;
    align-items: left;
    justify-content: left;
    text-align: left;
    padding: 0 !important;
    background: white !important;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hl_login--body .card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
    border: none !important;
    box-shadow: none !important;
    background: var(--main-login-bg) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    position: relative;
    z-index: 3;
    width: 33%;
    min-width: 400px;
}

.hl_login--body .card .card-body {
    display: block;
    margin-top: 80px !important;
    box-sizing: border-box;
    width: 50rem !important;
    text-align: left;
}

@media all and (min-width: 981px) {

    /* Improved image positioning and stretching */
    .hl_login--body .container-fluid:after {
        content: "";
        position: absolute;
        width: 67%;
        height: 100vh;
        background-image: var(--main-body-image);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        /* Changed to stretch fully both horizontally and vertically */
        right: 0;
        top: 0;
        margin: 0;
        /* Remove any potential gap between the login form and image */
        left: 33%;
        /* Align with the edge of the login form */
    }
}

.hl_login--body .card .login-card-heading h2.heading2:before {
    content: "";
    background-image: var(--login-logo);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    display: block;
    margin: 0 auto 10px;
    width: 350px;
    height: 62px;
    max-width: 100%;
    left: 0;
    right: 0;
}

.hl_login--body .card button:not(#wl_google_login_button) {
    background-color: var(--login-button-bg);
    cursor: pointer;
}

.hl_login--body .card button#wl_google_login_button {
    border: solid 2px var(--login-button-bg);
}

.hl_login--body h2 {
    color: var(--login-heading-color);
}

.hl_login--body a.forgot-password {
    color: var(--login-foot-note-link-color);
}

.hl_login--body .foot-note {
    color: var(--login-foot-note-color);
}

.hl_login--body .foot-note a {
    color: var(--login-foot-note-link-color);
}

.hl_login--body .foot-note a {
    cursor: pointer;
}

/* Added responsive styles for smaller screens */
@media all and (max-width: 980px) {
    .hl_login--body .card {
        width: 100%;
        min-width: 100%;
    }

    .hl_login--body .container-fluid:after {
        display: none;
    }
}