@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

body{
    background-image: url(https://staging-rhk-hc.inventiproptech.com/assets/img/login/login-bg.png) !important;
    background-size: cover !important;
    background-position: center center !important;
}

    div.main-forgot{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px;
        position: relative;
        height:100vh;
    }

    div.title-forgot{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 4px;
        height: 94px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    h3.label-forgot{
        height: 48px;
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 48px;
        color: var(--neutral-0);
        flex: none;
        order: 0;
        flex-grow: 0;
    }

    p.text-forgot{
        height: 42px;
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 21px;
        text-align: center;
            color: var(--neutral-500);
        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }

    div.card-forgot {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px 24px;
        gap: 24px;
        height: 100%;
        width: 100%;
        max-width: 700px;
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    .text {
        position: relative;
        width: 250px;
        height: 45px;
        padding: 0px
    }

    .text input {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 12px;
        padding-top: 25px;
        width: 100%;
        height: 100%;
        background-color: var(--neutral-0);
        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
        border: 1px solid var(--primary-500);
        border-radius: 4px;
        outline: none;
    }

    .text > label {
        transition: all 0.2s;
        position: absolute;
        top: 25%;
        left: 10px;
        color: #2E2E2E;
        pointer-events: none;
        padding:0 2px ;
    }

    .text input:focus, .text input:valid {
        border: 2px solid #2E2E2E;
    }

    .text input:focus + label, .text input:valid + label {
        transition: all 0.2s;
        top: 5px;
        font-size: 13px;
        color: #2E2E2E;
        background-color: transparent;
    }

    .reset-password {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px;
        gap: 8px;
        color: #FFFFFF;

        width: 100%;
        height: 45px;

        /* Primary */

        background: #2E2E2E !important;
        color: #FFF !important;
        border-radius: 4px;

        /* Inside auto layout */

        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
    }

    .back-to-login {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 12px;
        gap: 8px;
        color: #2E2E2E;

        width: 100%;
        height: 45px;

        /* Primary */

        background: transparent;
        border-radius: 4px;

        /* Inside auto layout */

        flex: none;
        order: 2;
        align-self: stretch;
        flex-grow: 0;
    }

    .back-to-login:hover{
        color: #2E2E2E;
    }

    
    .back-to-login:focus{
        outline: none;
    }

    button:disabled{
        opacity:0.5;
    }

    .back-to-login-container {
        position: absolute;
        top: 41px;
        left: 24px;
        width: max-content;
        z-index: 1000;
    }

    .account-logo {
        width: 270px;
        height: 150px;
        object-fit: contain;
    }