/* Riwaq360 sign-in page: split image/form layout inspired by the supplied reference. */
body.bg_login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 24px;
    color: #f7f5fb !important;
    font-family: Inter, "Segoe UI", sans-serif !important;
    background: radial-gradient(ellipse at 50% 0%, #827b91 0%, #706a7c 54%, #5f596b 100%) !important;
    background-image: radial-gradient(ellipse at 50% 0%, #827b91 0%, #706a7c 54%, #5f596b 100%) !important;
}

body.bg_login > .container {
    width: 100%;
    max-width: 1120px;
    padding: 0;
    margin: auto;
}

body.bg_login > .container > .row:first-child {
    display: none !important;
}

body.bg_login > .container > .row.justify-content-center {
    margin: 0 !important;
}

body.bg_login > .container > .row.justify-content-center > div {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 1120px !important;
    padding: 0 !important;
}

body.bg_login .card {
    overflow: hidden;
    margin: 0 !important;
    color: #f7f5fb !important;
    background: #292433 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(24, 19, 36, .36) !important;
}

body.bg_login .card-body > .row {
    display: flex;
    flex-wrap: nowrap;
    min-height: 570px !important;
    margin: 0;
    background: #292433;
}

body.bg_login .card-body > .row > .bg-login-image {
    position: relative;
    display: block !important;
    flex: 0 0 48%;
    width: 48%;
    max-width: 48%;
    min-height: 570px;
    margin: 12px;
    border-radius: 12px;
    background-image: linear-gradient(180deg, rgba(18, 13, 31, .08) 28%, rgba(18, 13, 31, .16) 54%, rgba(18, 13, 31, .78) 100%), url("../img/riwaq-login-dunes.png") !important;
    background-position: center;
    background-size: cover;
}

body.bg_login .bg-login-image::before {
    position: absolute;
    top: 28px;
    left: 30px;
    width: min(280px, 68%);
    height: 76px;
    content: "";
    background: url("../img/riwaq360-logo.png") left center / contain no-repeat;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
}

body.bg_login .bg-login-image::after {
    position: absolute;
    right: 34px;
    bottom: 40px;
    left: 36px;
    color: #fff;
    content: "Step inside every place.\A Share the view from anywhere.";
    white-space: pre-line;
    font-size: clamp(23px, 2.6vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.035em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .42);
}

body.bg_login .card-body > .row > div:not(.bg-login-image) {
    display: flex;
    flex: 1 1 52%;
    align-items: center;
    width: 52%;
    max-width: 52%;
    padding: 0 !important;
}

body.bg_login .card-body > .row > div:not(.bg-login-image) > .p-5 {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 68px clamp(38px, 6vw, 82px) !important;
    margin: 0 auto;
}

body.bg_login .lang_switcher_login {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 2;
    list-style: none;
}

body.bg_login .lang_switcher_login > a {
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9px;
    background: rgba(255, 255, 255, .06);
}

body.bg_login #langDropdown {
    position: absolute !important;
    top: 18px;
    right: 22px;
    z-index: 4;
    width: auto !important;
    min-width: 0 !important;
    height: 34px;
    padding: 5px 9px !important;
    color: #f7f5fb !important;
    background: #393344 !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

body.bg_login #title_login {
    margin-bottom: 8px !important;
    color: #fff !important;
    font-size: clamp(30px, 3.3vw, 40px);
    font-weight: 550;
    line-height: 1.12;
    letter-spacing: -.04em;
    text-align: left;
}

body.bg_login #description_login {
    margin: 0 0 30px !important;
    color: #b9b2c6 !important;
    font-size: 14px;
    text-align: left;
}

body.bg_login .p-5 > .text-center {
    text-align: left !important;
}

body.bg_login .user_login .form-group {
    margin-bottom: 16px;
}

body.bg_login .user_login input.form-control,
body.bg_login .user_login input.form-control-user {
    height: 52px;
    padding: 12px 16px !important;
    color: #f7f5fb !important;
    background: #393344 !important;
    border: 1px solid #494255 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 14px;
}

body.bg_login .user_login input::placeholder {
    color: #a49caf !important;
    opacity: 1;
}

body.bg_login .user_login input:focus {
    border-color: #a995e8 !important;
    box-shadow: 0 0 0 3px rgba(157, 129, 223, .18) !important;
}

body.bg_login .user_login .btn_show_hide_passw {
    top: 17px;
    right: 14px;
    color: #a49caf !important;
}

body.bg_login .user_login .form-check,
body.bg_login .user_login .form-check-label {
    color: #d2ccdc !important;
    font-size: 13px;
}

body.bg_login .user_login .form-check input[type="checkbox"] {
    accent-color: #8c70d4;
}

body.bg_login #btn_login {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    color: #fff !important;
    background: linear-gradient(100deg, #7255bd, #8065ca) !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 22px rgba(105, 76, 177, .24);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

body.bg_login #btn_login:hover {
    filter: brightness(1.08);
    box-shadow: 0 11px 26px rgba(105, 76, 177, .32);
    transform: translateY(-1px);
}

body.bg_login .user_login a.small {
    color: #c1b0f0 !important;
}

body.bg_login .user_login hr {
    border-top-color: #474050;
}

body.bg_login .user_login .btn-outline-primary {
    color: #ddd3f9 !important;
    border-color: #806ac1 !important;
}

body.bg_login .user_login .btn-circle {
    color: #fff !important;
    border-color: #665d72 !important;
}

body.bg_login .user_login > .text-center:last-child {
    margin-top: 14px;
}

body.bg_login .user_login > .text-center:last-child a {
    color: #aaa2b7 !important;
    font-size: 12px;
}

@media (max-width: 767.98px) {
    body.bg_login {
        display: block;
        padding: 18px 14px;
    }

    body.bg_login > .container {
        max-width: 520px;
    }

    body.bg_login .card-body > .row {
        display: block;
        min-height: 0 !important;
    }

    body.bg_login .card-body > .row > .bg-login-image {
        display: block !important;
        width: auto;
        max-width: none;
        min-height: 190px;
        margin: 10px 10px 0;
        background-position: center 53%;
    }

    body.bg_login .bg-login-image::before {
        top: 15px;
        left: 16px;
        width: 170px;
        height: 50px;
    }

    body.bg_login .bg-login-image::after {
        right: 18px;
        bottom: 20px;
        left: 20px;
        font-size: 21px;
    }

    body.bg_login .card-body > .row > div:not(.bg-login-image) {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    body.bg_login .card-body > .row > div:not(.bg-login-image) > .p-5 {
        max-width: none;
        padding: 38px 26px 30px !important;
    }

    body.bg_login .lang_switcher_login {
        top: 10px;
        right: 14px;
    }

    body.bg_login #langDropdown {
        top: 10px;
        right: 14px;
    }

    body.bg_login #title_login {
        padding-right: 42px;
        font-size: 30px;
    }
}