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

body {
    font-family: var(--font) !important;
    margin: 0;
    padding: 0;
    background-color: var(--loginBackground) !important;
}

.login-content .form-floating .form-control {
    border-color: var(--primary);
    border-radius: 8px;
    height: 52px;
}

.login-content .form-floating > label {
    padding: 0.8rem 0.75rem !important;
    color: var(--primary);
}

/*.login-content {
    min-height: 100%;
    height: 100vh;
}*/

.login-content .image_content {
    background-image: url('../../drnatural-assets/images/bg-lg-new.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.form-section {
    padding: 15% 45px;
}

.image-section {
    margin: 8% 15%;
}

.logo_image {
    width: 175px;
}

.form-section h3 {
    margin-bottom: 40px !important;
    position: relative;
    padding-bottom: 10px !important;
}

    .form-section h3::before {
        position: absolute;
        content: "";
        width: 30%;
        height: 1px;
        background: var(--primary);
        bottom: 0;
    }

.form_anchor {
    text-align: right;
}

.copyright_a {
    text-decoration: underline !important;
    cursor: pointer;
}

.form_anchor a {
    color: #4f5157 !important;
    text-decoration: underline !important;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

    .form_anchor a:hover {
        filter: opacity(0.8);
    }

.btn.login_btn {
    width: 100%;
    /* max-width: 300px; */
    background: var(--primary);
    color: var(--white);
    font-size: 18px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    line-height: 1.8 !important;
}

    .btn.login_btn:hover {
        color: var(--white) !important;
        filter: opacity(0.85);
    }

.copyright {
    font-size: 16px;
    color: #b4b9c7;
    font-weight: 500;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
    width: 100%;
    text-align: center;
    bottom: 22px;
}

.image-section_mob {
    display: none;
}

.icheck-primary {
    min-height: 22px;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    padding-left: 0;
}

    .icheck-primary input {
        position: absolute !important;
        opacity: 0;
        margin: 0;
    }

    .icheck-primary > label {
        padding-left: 29px !important;
        min-height: 22px;
        line-height: 22px;
        display: inline-block;
        position: relative;
        vertical-align: top;
        margin-bottom: 0;
        font-weight: 400;
        cursor: pointer;
    }

    .icheck-primary > input + label::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 22px;
        height: 22px;
        border: 2px solid #3462d8;
        border-radius: 3px;
        left: 0;
    }

    .icheck-primary > input:checked + label::before {
        background-color: #3462d8;
        border-color: #3462d8;
    }

    .icheck-primary > input:checked + label::after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 7px;
        height: 10px;
        border: 2px solid #fff;
        border-left: none;
        border-top: none;
        transform: translate(7.75px, 4.5px) rotate(45deg);
        -ms-transform: translate(7.75px,4.5px) rotate(45deg);
    }

@media (min-width: 1600px) {
    .form-section {
        max-width: 600px;
        padding: 15% 45px;
        margin: auto;
    }
}

@media (max-width: 1299px) {
    .form-section {
        padding: 15% 28px;
    }
}

@media (max-width: 991px) {
    .logo_image {
        width: 160px;
    }

    .image-section {
        margin: 8% 1%;
    }

    .form-section {
        padding: 8% 20px;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 675px) {
    .form-section h3 {
        text-align: center;
    }

        .form-section h3:before {
            left: 0;
            width: 100%;
        }

    .login-content .image_content {
        /* background-image: url("./assest/bg-mob-new.png"); */
        min-height: 130px;
    }

    .image-section {
        display: none
    }

    .image-section_mob {
        display: block;
        text-align: center;
        padding-bottom: 25px;
    }
}