@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* Common styles */
    * {
        font-family: 'Rubik', sans-serif;
        letter-spacing: 0.5px;
    }
    :root {
        --white: #ffffff;
        --black: #000000;
        --light_black: #505051;
        --dark_red: #9A1B1E;
        --red: red;
        --gray: #6c757d;
    }
    a {
        font-size: 14px;
        color: var(--dark_red);
        font-weight: 600;
        text-decoration: none;
    }
    a:hover {
        text-decoration: none;
    }
    .error-message {
        font-size: 14px;
        color: var(--red);
        margin-top: 3px;
    }
    .single-form-input {
        margin-bottom: 20px;
    }
    .remember-me {
        display: inline-flex;
        align-items: center;
        color: gray;
    }
    .remember-me .checkbox {
        border-radius: 5px;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
        -webkit-box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
        -moz-box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
    }
    .remember-me .text {
        font-size: 14px;
        margin-left: 8px;
    }
    .submit-button {
        border: none;
        background-color: var(--dark_red)!important;
        color: white;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        transition: all 0.3s;
        margin-left: auto;
    }
    .submit-button:hover {
        background-color: var(--red)!important;
        transition: all 0.3s;
    }
/* Common styles */

.guest-page {
    position: relative;
}
.guest-page .background-image {
    height: 100vh;
    width: 100%;
    object-fit: cover;
}
.guest-page .overlay {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
}
.guest-page .logo {
    height: 140px;
}
.guest-page .form {
    background-color: var(--white);
    padding: 1%;
    margin-top: 1%;
    width: 25%;
}
.guest-page .form-control {
    border: 1px solid #ced4da!important;
    border-radius: 0!important;
    font-size: 14px!important;
    height: 45px;
}
.guest-page .form-control:focus {
    box-shadow: none!important;
}
.forgot-password-message {
    font-size: 14px;
    margin-bottom: 15px;
}



/* Responsive */
    @media screen and (max-width: 1920px) {
    }

    @media screen and (max-width: 1900px) {
    }

    @media screen and (max-width: 1850px) {
    }

    @media screen and (max-width: 1800px) {
    }

    @media screen and (max-width: 1750px) {
    }

    @media screen and (max-width: 1680px) {
    }

    @media screen and (max-width: 1600px) {
    }

    @media screen and (max-width: 1536px) {
    }

    @media screen and (max-width: 1440px) {
    }

    @media screen and (max-width: 1366px) {
        .guest-page .form {
            width: 35%;
        }
    }

    @media screen and (max-width: 1360px) {
    }

    @media screen and (max-width: 1280px) {
    }

    @media screen and (max-width: 1024px) {
        .guest-page .form {
            width: 45%;
        }
    }

    @media screen and (max-width: 992px) {
    }

    @media screen and (max-width: 991px) {
    }

    @media screen and (max-width: 844px) {
    }

    @media screen and (max-width: 768px) {
        .guest-page .form {
            width: 70%;
            padding: 3%;
        }
    }

    @media screen and (max-width: 650px) {
    }

    @media screen and (max-width: 478px) {
        .guest-page .logo {
            height: 80px;
        }
        .guest-page .form {
            width: 95%;
            margin-top: 4%;
        }
        .guest-page .form .form-label {
            font-size: 15px;
        }
    }

    @media screen and (max-width: 428px) {
    }

    @media screen and (max-width: 395px) {
    }

    @media screen and (max-width: 376px) {
    }

    @media screen and (max-width: 360px) {
    }

    @media screen and (max-width: 320px) {
    }
/* Responsive */