/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* ==========================================================
   ESIC HOSPITAL GRIEVANCE PORTAL LOGIN
   ========================================================== */

html,
body {
    margin: 0;
    padding: 0;
}

.esic-login-wrapper {
    width: 100%;
    min-height: 100vh;

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

    padding: 60px 20px;

    background: #f5f8fc;

    box-sizing: border-box;
}


/* Login Card */

.esic-login-box {
    width: 100%;
    max-width: 520px;

    background: #ffffff;

    padding: 55px 45px;

    border-radius: 25px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}


/* Heading */

.esic-login-heading {
    text-align: center;

    margin-bottom: 50px;
}

.esic-login-heading h2 {
    margin: 0 0 18px;

    color: #244A9F;

    font-size: 38px;
    line-height: 1.15;

    font-weight: 600;
}

.esic-login-heading p {
    margin: 0;

    color: #777777;

    font-size: 20px;
}


/* Form */

#esic-portal-login-form p {
    margin: 0 0 28px;
}

#esic-portal-login-form label {
    display: block;

    margin-bottom: 10px;

    color: #222222;

    font-size: 18px;

    font-weight: 600;
}


/* Inputs */

#esic-portal-login-form input[type="text"],
#esic-portal-login-form input[type="password"] {

    width: 100%;

    height: 58px;

    padding: 10px 15px;

    background: #ffffff;

    border: 1px solid #d9dee7;

    border-radius: 10px;

    box-sizing: border-box;

    font-size: 17px;

    outline: none;

    transition: all 0.3s ease;
}

#esic-portal-login-form input[type="text"]:focus,
#esic-portal-login-form input[type="password"]:focus {

    border-color: #244A9F;

    box-shadow:
        0 0 0 3px rgba(36, 74, 159, 0.08);
}


/* Remember Me */

#esic-portal-login-form .login-remember {
    margin-bottom: 28px;
}

#esic-portal-login-form .login-remember label {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    font-size: 18px;

    font-weight: 600;
}

#esic-portal-login-form
.login-remember
input[type="checkbox"] {

    width: 20px;

    height: 20px;

    margin: 0;
}


/* Login Button */

#esic-portal-login-form .login-submit {
    margin-bottom: 0;
}

.esic-login-submit {

    width: 100%;

    min-height: 58px;

    padding: 12px 20px;

    border: none;

    border-radius: 10px;

    background: #2d56aa;

    color: #ffffff;

    font-size: 19px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.2s ease;
}

.esic-login-submit:hover {

    background: #244A9F;

    transform: translateY(-1px);
}


/* Forgot Password */

.esic-forgot-password {

    margin-top: 28px;

    margin-bottom: 40px;

    text-align: right;
}

.esic-forgot-password a {

    color: #244A9F;

    font-size: 18px;

    font-weight: 500;

    text-decoration: none;
}

.esic-forgot-password a:hover {

    color: #F26721;
}


/* User Roles */

.esic-user-types {

    display: flex;

    flex-direction: column;

    gap: 14px;
}

.esic-user-types span {

    width: 100%;

    display: block;

    padding: 15px 10px;

    background: #f2f5fa;

    border-radius: 8px;

    text-align: center;

    color: #244A9F;

    font-size: 16px;

    font-weight: 600;

    box-sizing: border-box;
}


/* Error */

.esic-login-error {

    margin-bottom: 25px;

    padding: 14px 15px;

    background: #fff1f1;

    border: 1px solid #efc3c3;

    border-radius: 8px;

    color: #b42318;

    font-size: 14px;
}


/* Successful Logout */

.esic-login-success {

    margin-bottom: 25px;

    padding: 14px 15px;

    background: #eefbf2;

    border: 1px solid #b9e5c4;

    border-radius: 8px;

    color: #18773a;

    font-size: 14px;
}


/* Logged In Box */

.logged-in-box {

    max-width: 520px;

    margin: 60px auto;

    text-align: center;
}

.esic-login-button,
.esic-logout-button {

    display: block;

    width: 100%;

    margin-top: 12px;

    padding: 14px 20px;

    border-radius: 8px;

    text-decoration: none;

    box-sizing: border-box;
}

.esic-login-button {

    background: #244A9F;

    color: #ffffff;
}

.esic-login-button:hover {

    background: #F26721;

    color: #ffffff;
}

.esic-logout-button {

    background: #f2f5fa;

    color: #244A9F;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 768px) {

    .esic-login-wrapper {

        padding: 45px 20px;

        align-items: flex-start;
    }

    .esic-login-box {

        max-width: 100%;

        padding: 50px 35px;

        border-radius: 22px;
    }

    .esic-login-heading {

        margin-bottom: 45px;
    }

    .esic-login-heading h2 {

        font-size: 34px;
    }

    .esic-login-heading p {

        font-size: 19px;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .esic-login-wrapper {

        min-height: 100vh;

        padding: 45px 20px 70px;

        background: #f5f8fc;
    }

    .esic-login-box {

        width: 100%;

        padding: 48px 36px;

        border-radius: 22px;

        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.07);
    }

    .esic-login-heading {

        margin-bottom: 48px;
    }

    .esic-login-heading h2 {

        font-size: 31px;

        line-height: 1.15;
    }

    .esic-login-heading p {

        margin-top: 24px;

        font-size: 19px;
    }

    #esic-portal-login-form label {

        font-size: 17px;
    }

    #esic-portal-login-form input[type="text"],
    #esic-portal-login-form input[type="password"] {

        height: 58px;
    }

    .esic-login-submit {

        min-height: 58px;

        font-size: 18px;
    }

    .esic-forgot-password {

        margin-top: 27px;

        margin-bottom: 40px;
    }

    .esic-forgot-password a {

        font-size: 17px;
    }

    .esic-user-types {

        gap: 12px;
    }

    .esic-user-types span {

        padding: 14px 10px;

        font-size: 15px;
    }
}