/**********************************
480px.css
FORGOT PASSWORD
**********************************/

/*========================
SECTION
=========================*/

#forgot_section{

padding:40px 25px;

align-items:center;
}

/*========================
CARD
=========================*/

.forgot_card{

padding:50px 40px;

border-radius:32px;

box-sizing:border-box;
}

/*========================
LOGO
=========================*/

.forgot_logo{

margin-bottom:30px;
}

.forgot_logo img{

width:170px;
}

/*========================
TAG
=========================*/

.forgot_tag{

font-size:12px;

letter-spacing:3px;

margin-bottom:20px;
}

/*========================
TITLE
=========================*/

.forgot_card h1{

font:500 46px PlayfairDisplay;

line-height:1.1;

margin-bottom:20px;

word-break:break-word;
}

/*========================
MESSAGE
=========================*/

.forgot_message{

font-size:15px;

line-height:1.9;

margin-bottom:38px;

max-width:100%;
}

/*========================
OUTPUT
=========================*/

#forgot_output{

margin-bottom:26px;
}

/*========================
FORMS
=========================*/

#forgot_form,
#reset_password_form{

gap:24px;
}

#forgot_form label,
#reset_password_form label{

font-size:13px;
}

/*========================
INPUTS
=========================*/

#forgot_form input,
#reset_password_form input{

height:58px;

padding:0 20px;

font-size:15px;

box-sizing:border-box;
}

/*========================
BUTTONS
=========================*/

#forgot_form button,
#reset_password_form button{

width:100%;

height:58px;

font-size:15px;

margin-top:8px;

box-sizing:border-box;
}

/*========================
LINKS
=========================*/

.forgot_links{

display:flex;

flex-direction:row;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-top:38px;
}

.forgot_links a{

font-size:14px;
}

/*========================
MESSAGES
=========================*/

.success_message,
.error_message{

padding:20px;

gap:14px;

font-size:14px;

line-height:1.8;

margin-bottom:26px;
}

.success_message:before,
.error_message:before{

width:32px;
height:32px;

font-size:16px;

flex-shrink:0;
}

/*========================
RESET WRAPPER
=========================*/

#reset_password_wrapper{

width:100%;
}

/*========================
BACK BUTTON
=========================*/

#back_to_forgot{

margin-top:0 !important;
}