*,*:before,*:after{
margin:0px;
padding:0px;
outline:0px;
}

:root{
--base:rgb(0, 36, 27);
--gold:rgb(227, 166, 73);
}

@font-face{
src:url(../fonts/poppins-SemiBold.ttf);
font-family:poppins_semibold;
}

@font-face{
src:url(../fonts/notosans.ttf);
font-family:notosans;
}

@font-face{
src:url(../fonts/Rubik-VariableFont_wght.ttf);
font-family:rubik;
}

@font-face{
font-family:PlayfairDisplay;
src:url('../fonts/PlayfairDisplay-Bold.ttf');
}



/*==================================
METRO TRUST
FORGOTTEN PASSWORD
===================================*/

/* SECTION */

#forgot_section{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
background:
linear-gradient(
135deg,
#F4F8F5,
#FFFFFF
);
}

/* CARD */

.forgot_card{
width:100%;
max-width:640px;
padding:60px;
background:#fff;
border-radius:32px;
text-align:center;
box-shadow:0 25px 60px rgba(0,0,0,.08);
}

/* LOGO */
.forgot_logo{
margin-bottom:30px;
}

.forgot_logo img{
width:180px;
}

/* TAG */

.forgot_tag{
display:inline-block;
margin-bottom:20px;
font:600 12px openSans;
letter-spacing:3px;
text-transform:uppercase;
color:#D7AA42;
}

/* TITLE */

.forgot_card h1{

font:500 52px PlayfairDisplay;

color:#02271B;

margin-bottom:20px;
}

/* MESSAGE */

.forgot_message{

max-width:500px;

margin:0 auto 40px;

font:15px openSans;

line-height:1.9;

color:#6E6E6E;
}

/* OUTPUT */

#forgot_output{

margin-bottom:24px;
}

/* FORM */

#forgot_form{

display:flex;
flex-direction:column;

gap:20px;

text-align:left;
}

#forgot_form .hide{
display:none;
}

#forgot_form,
#reset_password_form{

transition:.3s ease;
}

/* LABELS */

#forgot_form label{

font:600 13px openSans;

color:#4B4B4B;
}

/* INPUTS */

#forgot_form input{

height:58px;

padding:0 18px;

border:
1px solid
rgba(2,39,27,.10);

border-radius:14px;

background:#fff;

font:15px openSans;

color:#02271B;

transition:.35s;
}

#forgot_form input::placeholder{

color:#9A9A9A;
}

#forgot_form input:focus{

outline:none;

border-color:#D7AA42;

box-shadow:
0 0 0 4px
rgba(215,170,66,.10);
}

/* BUTTON */

#forgot_form button{

height:58px;

margin-top:10px;

border:none;

border-radius:14px;

background:#02271B;

color:#F8F1DF;

font:600 15px openSans;

cursor:pointer;

transition:.35s;
}

#forgot_form button:hover{

background:#033524;

transform:translateY(-2px);

box-shadow:
0 16px 35px
rgba(2,39,27,.18);
}

/* LINKS */

.forgot_links{

display:flex;
justify-content:center;

gap:24px;

margin-top:35px;

flex-wrap:wrap;
}

.forgot_links a{

font:600 14px openSans;

text-decoration:none;

color:#02271B;

transition:.3s;
}

.forgot_links a:hover{

color:#D7AA42;
}

```css
/*==================================
METRO TRUST
PASSWORD RECOVERY MESSAGES
===================================*/

/* SUCCESS */

.success_message{

display:flex;
align-items:flex-start;
gap:14px;

padding:18px 20px;

margin-bottom:24px;

border-radius:16px;

background:#EAF3DE;

border:1px solid rgba(39,80,10,.12);

color:#27500A;

font:14px openSans;

line-height:1.8;

box-shadow:
0 10px 24px
rgba(39,80,10,.06);
}

.success_message:before{

content:"✓";

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

width:32px;
height:32px;

border-radius:50%;

background:#27500A;

color:#fff;

font:600 16px openSans;

flex-shrink:0;
}


/* ERROR */

.error_message{

display:flex;
align-items:flex-start;
gap:14px;

padding:18px 20px;

margin-bottom:24px;

border-radius:16px;

background:#FFEAEA;

border:1px solid rgba(198,40,40,.12);

color:#C62828;

font:14px openSans;

line-height:1.8;

box-shadow:
0 10px 24px
rgba(198,40,40,.06);
}

.error_message:before{

content:"!";

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

width:32px;
height:32px;

border-radius:50%;

background:#C62828;

color:#fff;

font:600 16px openSans;

flex-shrink:0;
}


/* RESET PASSWORD FORM */

#reset_password_form{

display:flex;
flex-direction:column;

gap:20px;

margin-top:20px;

text-align:left;
}

#reset_password_form label{

font:600 13px openSans;

color:#4B4B4B;
}

#reset_password_form input{

height:58px;

padding:0 18px;

border:
1px solid
rgba(2,39,27,.10);

border-radius:14px;

background:#fff;

font:15px openSans;

color:#02271B;

transition:.35s;
}

#reset_password_form input:focus{

outline:none;

border-color:#D7AA42;

box-shadow:
0 0 0 4px
rgba(215,170,66,.10);
}

#reset_password_form button{

height:58px;

margin-top:10px;

border:none;

border-radius:14px;

background:#02271B;

color:#F8F1DF;

font:600 15px openSans;

cursor:pointer;

transition:.35s;
}

#reset_password_form button:hover{

background:#033524;

transform:translateY(-2px);

box-shadow:
0 16px 35px
rgba(2,39,27,.18);
}