/**********************************
320px.css
FORGOT PASSWORD
**********************************/

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

#forgot_section{
padding:20px 12px;
align-items:flex-start;
}

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

.forgot_card{
padding:30px 18px;
border-radius:24px;
box-sizing:border-box;
width:95%;
max-width:600px;
padding:50px;
}

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

.forgot_logo{

margin-bottom:20px;
}

.forgot_logo img{

width:130px;
}

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

.forgot_tag{
font-size:10px;
letter-spacing:2px;
margin-bottom:14px;
}

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

.forgot_card h1{
font:500 28px PlayfairDisplay;
line-height:1.2;
margin-bottom:14px;
word-break:break-word;
}

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

.forgot_message{

font-size:13px;

line-height:1.7;

margin-bottom:28px;

max-width:100%;
}

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

#forgot_output{

margin-bottom:18px;
}

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

#forgot_form,
#reset_password_form{

gap:16px;
}

#forgot_form label,
#reset_password_form label{

font-size:12px;
}

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

#forgot_form input,
#reset_password_form input{

height:52px;

padding:0 14px;

font-size:14px;

box-sizing:border-box;
}

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

#forgot_form button,
#reset_password_form button{

width:100%;

height:52px;

font-size:14px;

margin-top:5px;

box-sizing:border-box;
}

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

.forgot_links{

flex-direction:column;

gap:14px;

margin-top:28px;
}

.forgot_links a{

font-size:13px;
}

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

.success_message,
.error_message{

padding:14px;

gap:10px;

font-size:13px;

line-height:1.7;

margin-bottom:18px;
}

.success_message:before,
.error_message:before{

width:26px;
height:26px;

font-size:13px;

flex-shrink:0;
}

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

#reset_password_wrapper{

width:100%;
}

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

#back_to_forgot{

margin-top:0 !important;
}