/*************************      Forgot Password Module Styles     *************************/


    /*========================= 
    Background
    ==============================*/
        .bg-app-forgot-password {
            margin: 0;
            padding: 0;
            user-select: none;
        }
        #box-app-forgot-password {
            display: flex;
            justify-content: center;

            width: 100vw;
            height: 100vh;
        }
        #background-img-display-app-forgot-password {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
        }
    /*====================================================================*/

    /*========================= 
    Container Forgot Password
    ==============================*/
        .principal-box-app-forgot-password {
            display: flex;
            align-items: center;

            position: relative;
            z-index: 2;
        }


        .forgot-password-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;

            width: 600px;
            height: 500px;

            background-color: var(--white-bg);
            border-radius: 25px;
        }
    /*====================================================================*/


    /*========================= 
    Content Container Forgot Password
    ==============================*/
        .title-app-forgot-password {
            width: 100%;
            background-color: var(--header-color-modal);

            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
        }
        .title-app-forgot-password h1 {
            padding: 32px 22px;
            margin: 0;

            color: var(--white-text-font);
        }


        .info-app-forgot-password {
            margin: 12px auto;

            width: 100%;
        }
        .info-app-forgot-password p {
            margin: 0;
            font-size: 20px;
            font-style: italic;

            text-transform: uppercase;
            text-align: center;
            line-height: 1.5;
        }
    /*====================================================================*/


    /*========================= 
    Form Container Forgot Password
    ==============================*/
        .form-app-forgot-password {
            width: 100%;
        }


        .display-form-app-forgot-password {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 28px;
        }    
    /*====================================================================*/


    /*========================= 
    Inputs form Forgot Password
    ==============================*/
        .inputs-form-app-forgot-password {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            gap: 16px;
            width: 100%;
        }


        .username-input-app-forgot-password,
        .email-input-app-forgot-password {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            gap: 8px;
            padding: 6px;
            
            width: 55%;
        }
        .username-input-app-forgot-password input,
        .email-input-app-forgot-password input {
            width: 100%;

            padding: 12px 14px;

            background-color: transparent;
            border: 1px solid var(--footer-color-copyright);
            border-radius: 10px;

            font-size: 15px;
            color: var(--black-text-font);

            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .username-input-app-forgot-password input:focus,
        .email-input-app-forgot-password input:focus {
            outline: none;
            border-color: #9FB0FF;

            box-shadow: 0 0 0 3px rgba(159,176,255,0.35);
        }
        .username-input-app-forgot-password input::placeholder,
        .email-input-app-forgot-password input::placeholder {
            font-size: 16px;
            color: var(--link-color-hover);

            opacity: 0.75;
        }
    /*====================================================================*/


    /*========================= 
    Btn Submit Forgot Password
    ==============================*/
        .btns-form-app-forgot-password {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            gap: 64px;
            width: 100%;
        }
        .submit-password-recovery-ossesas {
            background: transparent;

            font-size: 20px;
            color: var(--black-text-font);

            width: 100%;
            padding: 8px 18px;

            border: 2px solid var(--footer-color-copyright);
            border-radius: 18px;

            cursor: pointer;
            transition:
                background-color var(--transition-speed-1) ease, 
                box-shadow var(--transition-speed-1) ease, 
                transform 0.15s ease;
        }
        .submit-password-recovery-ossesas:hover {
            background: rgba(227, 75, 71, 0.15);

            box-shadow: 0 0 14px rgba(227, 75, 71, 0.45);
            transform: translateY(-1px);
        }
        .submit-password-recovery-ossesas:focus {
            outline: none;

            box-shadow: 0 0 0 3px rgba(227, 75, 71, 0.4);
        }
        .submit-password-recovery-ossesas:active {
            transform: translateY(0);

            box-shadow: 0 0 8px rgba(227, 75, 71, 0.6);
        }
        .submit-password-recovery-ossesas:focus-visible {
            outline: none;

            box-shadow: 0 0 0 3px rgba(227, 75, 71, 0.4);
        }
    /*====================================================================*/


    /*========================= 
    Btn Return Login Forgot Password
    ==============================*/
        .return-login-app-forgot-password img {
            width: 24px;
            height: auto;
        }
        .return-login-app-forgot-password a {
            display: flex;
            align-items: center;
            gap: 8px;

            color: var(--logout-bg);
            text-decoration: none;

            transition:
                color var(--transition-speed-1) ease;
        }
        .return-login-app-forgot-password a:hover {
            color: var(--link-color-hover);
        }
    /*====================================================================*/