/* =========================================================
    QUESTION BANK OF HARYANA
    WORDPRESS LOGIN SCREEN
    FINAL LOGIN DESIGN
    CSS ONLY
    ========================================================= */


    /* =========================================================
    01. FONT
    ========================================================= */

    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");


    /* =========================================================
    02. GLOBAL RESET
    ========================================================= */

    html,
    body.login {
        width: 100%;
        min-width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
    }

    body.login {
        overflow: hidden;

        background-image: url("../images/login/login-bg.webp");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;

        font-family: "Inter", Arial, Helvetica, sans-serif;

        color: #12386d;
    }


    /* =========================================================
    03. WORDPRESS DEFAULT LOGIN RESET
    ========================================================= */

    body.login #login {
        box-sizing: border-box;
        position: absolute;

        top: 18.15vh;
        right: 9%;

        width: 520px;
        height: 635px;

        max-width: 626px;
        min-height: 500px;

        margin: 0;
        padding: 0;

        z-index: 50;

        background: rgba(255, 255, 255, 0.965);

        border: 1px solid rgba(24, 62, 105, 0.12);
        border-radius: 22px;

        box-shadow:
            0 25px 55px rgba(17, 50, 91, 0.17),
            0 5px 18px rgba(17, 50, 91, 0.08);

        overflow: hidden;
    }


    /* =========================================================
    04. REMOVE DEFAULT WORDPRESS LOGO
    ========================================================= */

    body.login #login h1,
    body.login #login h1 a {
        display: none !important;
    }


    /* =========================================================
    05. WELCOME BACK
    ========================================================= */

    body.login #login::before {
        content: "Welcome Back!";

        display: block;
        width: 100%;
        box-sizing: border-box;

        margin: 0;
        padding: 58px 25px 0;

        color: #12376b;
        font-family: "Inter", sans-serif;

        font-size: 45px;
        line-height: 1.15;
        font-weight: 800;

        text-align: center;
    }


    /* =========================================================
    06. LOGIN SUBTITLE
    ========================================================= */

    body.login .qbh-login-subtitle {
        display: block;

        margin: 7px 0 0;
        padding: 0 35px;

        color: #536887;
        font-family: "Inter", sans-serif;

        font-size: 20px;
        line-height: 1.4;
        font-weight: 400;

        text-align: center;
    }


    /* =========================================================
    07. LOGIN FORM
    ========================================================= */

    body.login #loginform,
    body.login form#loginform {
        box-sizing: border-box;

        width: auto;

        margin: 30px 48px 0;
        padding: 0;

        border: 0;
        background: transparent;
        box-shadow: none;
    }


    /* =========================================================
    08. FORM PARAGRAPHS
    ========================================================= */

    body.login #loginform p {
        position: relative;

        margin: 0;
        padding: 0;
    }


    body.login #loginform p.login-username {
        width: 100%;
        height: 62px;

        margin: 0 0 20px;
    }


    body.login #loginform p.login-password {
        width: 100%;
        height: 62px;

        margin: 0 0 20px;
    }


    /* =========================================================
    09. USERNAME / PASSWORD LABELS
    ========================================================= */

    body.login #loginform p.login-username > label,
    body.login #loginform p.login-password > label {
        position: absolute;

        left: 67px;
        top: 50%;

        z-index: 5;

        width: auto;
        height: auto;

        margin: 0;
        padding: 0;

        transform: translateY(-50%);

        overflow: visible;
        clip: auto;

        white-space: nowrap;

        color: #667895;

        font-family: "Inter", sans-serif;

        font-size: 18px;
        line-height: 1;
        font-weight: 400;

        pointer-events: none;
    }


    /* =========================================================
    10. INPUTS
    ========================================================= */

    body.login #loginform input[type="text"],
    body.login #loginform input[type="password"] {
        box-sizing: border-box;

        display: block;

        width: 100%;
        height: 62px;

        margin: 0;
        padding: 0 62px 0 40px;

        border: 1.5px solid #aebdd1;
        border-radius: 9px;

        background: rgba(255, 255, 255, 0.72);

        color: #183b6c;

        font-family: "Inter", sans-serif;

        font-size: 18px;
        font-weight: 400;

        outline: none;
        box-shadow: none;

        transition:
            border-color .2s ease,
            box-shadow .2s ease,
            background .2s ease;
    }


    body.login #loginform input[type="text"]:focus,
    body.login #loginform input[type="password"]:focus {
        border-color: #165a99;
        background: #fff;

        box-shadow:
            0 0 0 3px rgba(22, 90, 153, 0.08);
    }


    body.login #loginform input::placeholder {
        color: transparent;
    }


    /* =========================================================
    11. USER ICON
    ========================================================= */

    body.login #loginform p.login-username::before {
        content: "\f007";

        position: absolute;

        left: 26px;
        top: 50%;

        z-index: 6;

        transform: translateY(-50%);

        color: #35577f;

        font-family: "Font Awesome 6 Free";

        font-size: 21px;
        font-weight: 900;

        pointer-events: none;
    }


    /* =========================================================
    12. LOCK ICON
    ========================================================= */

    body.login #loginform p.login-password::before {
        content: "\f023";

        position: absolute;

        left: 27px;
        top: 50%;

        z-index: 6;

        transform: translateY(-50%);

        color: #35577f;

        font-family: "Font Awesome 6 Free";

        font-size: 21px;
        font-weight: 900;

        pointer-events: none;
    }


    /* =========================================================
    13. PASSWORD WRAPPER
    ========================================================= */

    body.login #loginform .wp-pwd {
        position: relative;

        width: 100%;
        height: 62px;
    }


    /* =========================================================
    14. PASSWORD EYE
    ========================================================= */

    body.login #loginform .wp-hide-pw {
        position: absolute;

        top: 50%;
        right: 10px;

        z-index: 10;

        width: 45px;
        height: 45px;

        margin: 0;
        padding: 0;

        transform: translateY(-50%);

        border: 0;

        background: transparent;

        color: #516a89;

        box-shadow: none;

        cursor: pointer;
    }


    body.login #loginform .wp-hide-pw:hover,
    body.login #loginform .wp-hide-pw:focus {
        background: transparent;
        color: #123d70;

        border: 0;
        box-shadow: none;
        outline: none;
    }


    body.login #loginform .wp-hide-pw .dashicons {
        width: 24px;
        height: 24px;

        font-size: 24px;
        line-height: 24px;
    }


    /* =========================================================
    15. REMEMBER ME
    ========================================================= */

    body.login #loginform p.forgetmenot {
        display: flex;

        align-items: center;
        justify-content: flex-start;

        width: 100%;
        min-height: 30px;

        margin: -1px 0 0;
        padding: 0;
    }


    body.login #loginform p.forgetmenot label {
        position: static;

        display: flex;
        align-items: center;

        width: auto;
        height: auto;

        margin: 0;
        padding: 0;

        overflow: visible;
        clip: auto;

        white-space: nowrap;

        color: #173768;

        font-family: "Inter", sans-serif;

        font-size: 17px;
        line-height: 1.2;
        font-weight: 500;
    }


    /* =========================================================
    16. CHECKBOX
    ========================================================= */

    body.login #loginform .forgetmenot input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;

        width: 25px;
        height: 25px;

        flex: 0 0 25px;

        margin: 0 15px 0 0;
        padding: 0;

        border: 2px solid #28649d;
        border-radius: 4px;

        background: #fff;

        cursor: pointer;
    }


    body.login #loginform .forgetmenot input[type="checkbox"]:checked {
        background: #145b96;
        border-color: #145b96;
    }


    body.login #loginform .forgetmenot input[type="checkbox"]:checked::after {
        content: "\f00c";

        display: block;

        color: #fff;

        font-family: "Font Awesome 6 Free";

        font-size: 13px;
        line-height: 21px;
        font-weight: 900;

        text-align: center;
    }


    /* =========================================================
    17. LOGIN BUTTON
    ========================================================= */

    body.login #loginform p.submit {
        position: relative;

        width: 100%;

        margin: 18px 0 0;
        padding: 0;
    }


    body.login #loginform input[type="submit"] {
        box-sizing: border-box;

        display: block;

        width: 100%;
        height: 64px;

        margin: 0;
        padding: 0 65px 0 20px;

        border: 0;
        border-radius: 9px;

        background: #125c98;

        color: #fff;

        font-family: "Inter", sans-serif;

        font-size: 23px;
        line-height: 64px;
        font-weight: 600;

        text-align: center;

        cursor: pointer;

        box-shadow:
            0 8px 18px rgba(18, 92, 152, 0.20);

        transition:
            background .2s ease,
            transform .2s ease;
    }


    body.login #loginform input[type="submit"]:hover {
        background: #0d4e84;
        transform: translateY(-1px);
    }


    body.login #loginform input[type="submit"]:active {
        transform: translateY(0);
    }


    /* =========================================================
    18. LOGIN ARROW
    ========================================================= */

    body.login #loginform p.submit::after {
        content: "\f061";

        position: absolute;

        right: 207px;
        top: 50%;

        z-index: 5;

        transform: translateY(-50%);

        color: #fff;

        font-family: "Font Awesome 6 Free";

        font-size: 19px;
        font-weight: 900;

        pointer-events: none;
    }


    /* =========================================================
    19. LOST PASSWORD
    ========================================================= */

    body.login #nav {
        position: absolute;

        top: 333px;
        right: 48px;

        z-index: 20;

        width: auto;

        margin: 0;
        padding: 0;

        text-align: right;
    }


    body.login #nav a {
        color: #064d9d;

        font-family: "Inter", sans-serif;

        font-size: 17px;
        line-height: 1.2;
        font-weight: 500;

        text-decoration: underline;
        text-underline-offset: 2px;
    }


    body.login #nav a:hover {
        color: #0b3e73;
    }


    /* =========================================================
    20. OR DIVIDER
    ========================================================= */

    body.login #nav::before {
        content: "OR";

        position: absolute;

        top: 135px;
        left: 50%;

        transform: translateX(-50%);

        width: 35px;

        color: #233f67;

        font-family: "Inter", sans-serif;

        font-size: 17px;
        font-weight: 500;

        text-align: center;
    }


    body.login #nav::after {
        content: "";

        position: absolute;

        top: 143px;
        right: 32px;

        width: 205px;
        height: 1px;

        background: #cbd5e1;

        transform: translateX(-100%);
    }


    /* =========================================================
    21. BACK TO WEBSITE
    ========================================================= */

    body.login #backtoblog {
        position: absolute;

        left: 0;
        bottom: 88px;

        width: 100%;

        margin: 0;
        padding: 0;

        z-index: 20;

        text-align: center;
    }


    body.login #backtoblog a {
        display: inline-block;

        color: #064d9d;

        font-family: "Inter", sans-serif;

        font-size: 17px;
        line-height: 1.3;
        font-weight: 500;

        text-decoration: none;
    }


    body.login #backtoblog a:hover {
        text-decoration: underline;
    }


    /* =========================================================
    22. PRIVACY POLICY
    ========================================================= */

    body.login .privacy-policy-page-link {
        position: absolute;

        left: 0;
        bottom: 31px;

        width: 100%;

        margin: 0;
        padding: 0;

        z-index: 20;

        text-align: center;
    }


    body.login .privacy-policy-page-link a {
        color: #064d9d;

        font-family: "Inter", sans-serif;

        font-size: 16px;
        line-height: 1.3;
        font-weight: 500;

        text-decoration: underline;
        text-underline-offset: 2px;
    }


    /* =========================================================
    23. LEFT BRANDING
    ========================================================= */

    body.login .qbh-login-branding {
        position: absolute;

        left: 35px;
        top: 9.5vh;

        width: 625px;

        z-index: 15;

        box-sizing: border-box;

        text-align: center;

        color: #102f62;

        pointer-events: none;
    }


    /* =========================================================
    24. LOGO
    ========================================================= */

    body.login .qbh-login-brand-logo {
        width: 180px;
        height: 180px;

        margin: 0 auto;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    body.login .qbh-login-brand-logo img {
        display: block;

        width: 180px;
        height: 180px;

        margin: 0;
        padding: 0;

        object-fit: contain;

        border: 0;

        filter: drop-shadow(
            0 5px 8px rgba(15, 48, 89, 0.07)
        );
    }


    /* =========================================================
    25. BRAND TITLE
    ========================================================= */

    body.login .qbh-login-brand-copy {
        margin: 13px 0 0;
        padding: 0;
    }


    body.login .qbh-login-brand-copy h2,
    body.login .qbh-login-brand-copy h3 {
        margin: 0;
        padding: 0;

        color: #102f62;

        font-family: "Inter", sans-serif;

        text-align: center;

        text-transform: uppercase;
    }


    body.login .qbh-login-brand-copy h2 {
        font-size: 54px;
        line-height: 1;

        font-weight: 800;

        letter-spacing: -2px;
    }


    body.login .qbh-login-brand-copy h3 {
        margin-top: 7px;

        font-size: 45px;
        line-height: 1;

        font-weight: 700;

        letter-spacing: -1px;
    }


    /* =========================================================
    26. TAGLINE
    ========================================================= */

    body.login .qbh-login-tagline {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;

        margin: 15px auto 0;

        color: #17396b;

        font-family: "Inter", sans-serif;

        font-size: 13px;
        line-height: 1.2;

        font-weight: 500;

        letter-spacing: 5px;

        white-space: nowrap;
    }


    /* Remove HTML span influence */

    body.login .qbh-login-tagline span {
        display: block;

        width: 42px;
        height: 2px;

        flex: 0 0 42px;

        background: #163b70;
    }


    body.login .qbh-login-tagline span:first-child {
        margin-right: 20px;
    }


    body.login .qbh-login-tagline span:last-child {
        margin-left: 20px;
    }


    body.login .qbh-login-tagline strong {
        display: inline-block;

        margin: 0;
        padding: 0;

        font-size: inherit;
        font-weight: inherit;
    }


    /* =========================================================
    27. FEATURES
    ========================================================= */

    body.login .qbh-login-features {
        display: flex;

        align-items: flex-start;
        justify-content: space-between;

        width: 575px;

        margin: 17px auto 0;
        padding: 0;
    }


    /* =========================================================
    28. FEATURE ITEM
    ========================================================= */

    body.login .qbh-login-feature {
        width: 125px;

        margin: 0;
        padding: 0;

        text-align: center;

        color: #102f62;
    }


    /* =========================================================
    29. FEATURE CIRCLE
    ========================================================= */

    body.login .qbh-feature-icon {
        width: 80px;
        height: 80px;

        margin: 0 auto 9px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 50%;

        background:
            linear-gradient(
                145deg,
                #f5f9fd 0%,
                #d9e8f6 100%
            );

        box-shadow:
            0 7px 15px rgba(17, 65, 110, 0.13),
            inset 0 0 0 1px rgba(255, 255, 255, 0.75);
    }


    /* =========================================================
    30. FONT AWESOME FEATURE ICONS
    CURRENT HTML HAS SPANS,
    SO WE USE CSS PSEUDO ELEMENTS.
    ========================================================= */

    body.login .qbh-feature-icon span {
        display: block;

        width: 100%;
        height: 100%;

        font-size: 0 !important;

        color: transparent;
    }


    /* Previous Year Papers */

    body.login .qbh-icon-paper::before {
        content: "\f15c";

        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        color: #07528e;

        font-family: "Font Awesome 6 Free";

        font-size: 35px;

        font-weight: 900;
    }


    /* Subject Wise Questions */

    body.login .qbh-icon-book::before {
        content: "\f518";

        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        color: #07528e;

        font-family: "Font Awesome 6 Free";

        font-size: 37px;

        font-weight: 900;
    }


    /* Easy Download */

    body.login .qbh-icon-download::before {
        content: "\f019";

        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        color: #07528e;

        font-family: "Font Awesome 6 Free";

        font-size: 38px;

        font-weight: 900;
    }


    /* Study Smarter */

    body.login .qbh-icon-study::before {
        content: "\f19d";

        display: flex;

        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        color: #07528e;

        font-family: "Font Awesome 6 Free";

        font-size: 37px;

        font-weight: 900;
    }


    /* =========================================================
    31. FEATURE TEXT
    ========================================================= */

    body.login .qbh-login-feature strong {
        display: block;

        margin: 0;
        padding: 0;

        color: #102f62;

        font-family: "Inter", sans-serif;

        font-size: 14px;
        line-height: 1.25;

        font-weight: 700;

        text-align: center;

        text-transform: uppercase;
    }


    /* =========================================================
    32. HIDE UNNECESSARY WP LOGIN ELEMENTS
    ========================================================= */

    body.login .language-switcher {
        display: none !important;
    }


    /* =========================================================
    33. SHORT SCREEN
    IMPORTANT FOR YOUR CURRENT 1365 x 634 SCREEN
    ========================================================= */

    @media (max-height: 760px) and (min-width: 1101px) {

        body.login #login {
            top: 7.3vh;

            height: min(550px, 68vh);

            min-height: 500px;

            border-radius: 20px;
        }


        body.login #login::before {
            padding-top: 25px;

            font-size: 34px;
        }


        body.login .qbh-login-subtitle {
            margin-top: 10px;

            font-size: 16px;
        }


        body.login #loginform {
            margin-top: 10px;
        }


        body.login #loginform p {
            margin-bottom: 12px;
        }


        body.login #loginform input[type="text"],
        body.login #loginform input[type="password"] {
            height: 52px;

            font-size: 16px;
        }


        body.login #loginform p.login-username > label,
        body.login #loginform p.login-password > label {
            left: 60px;

            font-size: 16px;
        }


        body.login #loginform p.login-username::before,
        body.login #loginform p.login-password::before {
            left: 23px;

            font-size: 18px;
        }


        body.login #loginform p.submit {
            margin-top: 13px;
        }


        body.login #loginform input[type="submit"] {
            height: 55px;

            font-size: 20px;

            line-height: 55px;
        }


        body.login #loginform p.submit::after {
            right: 185px;

            font-size: 17px;
        }


        body.login #nav {
            top: 300px;

            right: 48px;
        }


        body.login #nav a {
            font-size: 16px;
        }


        body.login #nav::before {
            top: 102px;

            font-size: 15px;
        }


        body.login #nav::after {
            top: 109px;

            width: 170px;
        }


        body.login #backtoblog {
            bottom: 55px;
        }


        body.login #backtoblog a {
            font-size: 14px;
        }


        body.login .privacy-policy-page-link {
            bottom: 18px;
        }


        body.login .privacy-policy-page-link a {
            font-size: 13px;
        }


        /* LEFT SIDE */

        body.login .qbh-login-branding {
            left: 120px;
            top: 10vh;

            width: 625px;
        }


        body.login .qbh-login-brand-logo,
        body.login .qbh-login-brand-logo img {
            width: 180px;
            height: 180px;
        }


        body.login .qbh-login-brand-copy {
            margin-top: 9px;
        }


        body.login .qbh-login-brand-copy h2 {
            font-size: 34px;

            letter-spacing: -1.7px;
        }


        body.login .qbh-login-brand-copy h3 {
            margin-top: 5px;

            font-size: 33px;
        }


        body.login .qbh-login-tagline {
            margin-top: 11px;

            font-size: 11px;

            letter-spacing: 4px;
        }


        body.login .qbh-login-tagline span {
            width: 34px;
            flex-basis: 34px;
        }


        body.login .qbh-login-tagline span:first-child {
            margin-right: 15px;
        }


        body.login .qbh-login-tagline span:last-child {
            margin-left: 15px;
        }


        body.login .qbh-login-features {
            width: 470px;

            margin-top: 13px;
        }


        body.login .qbh-feature-icon {
            width: 68px;
            height: 68px;

            margin-bottom: 7px;
        }


        body.login .qbh-icon-paper::before,
        body.login .qbh-icon-book::before,
        body.login .qbh-icon-download::before,
        body.login .qbh-icon-study::before {
            font-size: 30px;
        }


        body.login .qbh-login-feature strong {
            font-size: 12px;
        }
    }


    /* =========================================================
    34. TABLET
    ========================================================= */

    @media (max-width: 1100px) {

        body.login {
            overflow-y: auto;
            overflow-x: hidden;
        }


        body.login .qbh-login-branding {
            position: relative;

            left: auto;
            top: auto;

            width: 100%;

            padding: 40px 20px 30px;

            box-sizing: border-box;
        }


        body.login #login {
            position: relative;

            top: auto;
            right: auto;

            width: calc(100% - 40px);

            max-width: 626px;

            height: auto;

            min-height: 620px;

            margin: 0 auto 40px;
        }


        body.login #nav {
            position: relative;

            top: auto;
            right: auto;

            margin: 20px 48px 0;

            text-align: center;
        }


        body.login #nav::before,
        body.login #nav::after {
            display: none;
        }


        body.login #backtoblog,
        body.login .privacy-policy-page-link {
            position: relative;

            left: auto;
            bottom: auto;
        }


        body.login #backtoblog {
            margin-top: 25px;
        }


        body.login .privacy-policy-page-link {
            margin-top: 20px;
            padding-bottom: 25px;
        }
    }


    /* =========================================================
    35. MOBILE
    ========================================================= */

    @media (max-width: 700px) {

        body.login {
            background-position: center center;
        }


        body.login .qbh-login-branding {
            padding-top: 25px;
            padding-bottom: 25px;
        }


        body.login .qbh-login-brand-logo,
        body.login .qbh-login-brand-logo img {
            width: 230px;
            height: 230px;
        }


        body.login .qbh-login-brand-copy h2 {
            font-size: 34px;
            letter-spacing: -1px;
        }


        body.login .qbh-login-brand-copy h3 {
            font-size: 29px;
        }


        body.login .qbh-login-tagline {
            font-size: 8px;

            letter-spacing: 2px;
        }


        body.login .qbh-login-features {
            width: 100%;

            padding: 0 5px;

            box-sizing: border-box;
        }


        body.login .qbh-login-feature {
            width: 25%;
        }


        body.login .qbh-feature-icon {
            width: 60px;
            height: 60px;
        }


        body.login .qbh-icon-paper::before,
        body.login .qbh-icon-book::before,
        body.login .qbh-icon-download::before,
        body.login .qbh-icon-study::before {
            font-size: 27px;
        }


        body.login .qbh-login-feature strong {
            font-size: 9px;
        }


        body.login #login {
            width: calc(100% - 24px);

            min-height: 560px;

            border-radius: 18px;
        }


        body.login #login::before {
            padding-top: 35px;

            font-size: 31px;
        }


        body.login .qbh-login-subtitle {
            padding: 0 20px;

            font-size: 15px;
        }


        body.login #loginform {
            margin-left: 25px;
            margin-right: 25px;
        }


        body.login #loginform input[type="text"],
        body.login #loginform input[type="password"] {
            height: 56px;
        }


        body.login #nav {
            margin-left: 25px;
            margin-right: 25px;
        }
    }


    /* =========================================================
    36. VERY SMALL MOBILE
    ========================================================= */

    @media (max-width: 430px) {

        body.login .qbh-login-brand-logo,
        body.login .qbh-login-brand-logo img {
            width: 190px;
            height: 190px;
        }


        body.login .qbh-login-brand-copy h2 {
            font-size: 28px;
        }


        body.login .qbh-login-brand-copy h3 {
            font-size: 24px;
        }


        body.login .qbh-login-tagline {
            font-size: 7px;

            letter-spacing: 1.4px;
        }


        body.login .qbh-feature-icon {
            width: 52px;
            height: 52px;
        }


        body.login .qbh-login-feature strong {
            font-size: 8px;
        }


        body.login #loginform {
            margin-left: 20px;
            margin-right: 20px;
        }
    }