.signup-page,.login-page{
    background:#e1eaf5
}

.signup-page .form-wrapper,.login-page .form-wrapper{
    background:white;
    width:370px;
    max-width:470px;
    margin:80px auto 0;
    box-shadow:0 0 5px rgba(65,67,144,0.15);
    padding:50px;
    border-radius: 30px;
}
@media(max-width:600px){
    .signup-page .form-wrapper,.login-page .form-wrapper{
        width:80%;
        padding:20px
    }
}
.signup-page .form-wrapper .logo,.login-page .form-wrapper .logo{
    text-align:center;
    margin:0 auto 20px
}
.signup-page .form-wrapper .logo img,.login-page .form-wrapper .logo img{
    width:340px;
    margin:auto
}
@media(max-width:600px){
    .signup-page .form-wrapper .logo img,.login-page .form-wrapper .logo img{
        width:300px
    }
}
.signup-page .form-wrapper .alert-warning,.login-page .form-wrapper .alert-warning{
    color:#856404;
    background-color:#fff3cd;
    border-color:#ffeeba;
    font-weight:300;
    font-size:.8em;
    margin:30px 0;
    display:flex;
    align-items:center;
    justify-content:space-between
}
@media(max-width:600px){
    .signup-page .form-wrapper .alert-warning,.login-page .form-wrapper .alert-warning{
        padding:10px 15px
    }
}
.signup-page .form-wrapper .alert-warning .close,.login-page .form-wrapper .alert-warning .close{
    color:#856404;
    font-weight:300;
    order:1;
    outline:none!important;
    transition:all .3s ease-out
}
.signup-page .form-wrapper .alert,.login-page .form-wrapper .alert{
    position:relative;
    padding:.75rem 1.25rem;
    margin-bottom:1rem;
    border:1px solid transparent;
    border-radius:.25rem;
    font-family:'Poppins',sans-serif
}
.signup-page .form-wrapper .alert button.close,.login-page .form-wrapper .alert button.close{
    padding:0;
    background-color:transparent;
    border:0;
    -webkit-appearance:none;
    float:right;
    font-size:1.5rem;
    font-weight:700;
    line-height:1;
    color:#000;
    text-shadow:0 1px 0 #fff;
    opacity:.4
}
.signup-page .form-wrapper .alert button.close:hover,.login-page .form-wrapper .alert button.close:hover{
    cursor:pointer
}
.signup-page .form-wrapper h1,.login-page .form-wrapper h1{
    font-size:1.5rem;
    color:#5f6988;
    font-weight:300;
    border-bottom:1px solid #dee2ef;
    padding-bottom:5px;
    margin-bottom:20px;
    font-family:'Poppins',sans-serif
}
@media(max-width:600px){
    .signup-page .form-wrapper h1,.login-page .form-wrapper h1{
        font-size:1.3rem
    }
}
.signup-page .form-wrapper input,.login-page .form-wrapper input{
    padding:10px 13px;
    margin-bottom:15px;
    width:-webkit-fill-available;
    width:-moz-available;
    border-radius:2px;
    border:1px solid #d4d9e3;
    font-weight:200;color:#4d5060;
    font-family:'Poppins',sans-serif;
    transition:all .3s ease-out;
    font-size:.9em;
    outline-color:transparent;
    outline-style:none;
    border-radius: 8px;
}
@media(max-width:600px){
    .signup-page .form-wrapper input,.login-page .form-wrapper input{
        font-size:.9em
    }
}
.signup-page .form-wrapper input::placeholder,.login-page .form-wrapper input::placeholder{
    color:#414141
}
.signup-page .form-wrapper input:hover,.login-page .form-wrapper input:hover{
    border-color:#194e5f;
    background:#d9f6ff
}
.signup-page .form-wrapper input:hover::placeholder,.login-page .form-wrapper input:hover::placeholder{
    color:#0a2b36
}
.signup-page .form-wrapper input:focus,.login-page .form-wrapper input:focus{
    background:white;
    border-color:#194e5f;
    box-shadow:unset
}
.signup-page .form-wrapper input:focus::placeholder,.login-page .form-wrapper input:focus::placeholder{
    color:#d4d9e3
}
.signup-page .form-wrapper fieldset,.login-page .form-wrapper fieldset{
    border:none;
    padding:0;margin:0
}
.signup-page .form-wrapper label,.login-page .form-wrapper label{
    font-size:.9em;
    color:#5f6988;
    margin-bottom:5px;
    display:block;
    font-weight:300;
    font-family:'Poppins',sans-serif
}
.signup-page .form-wrapper input[type="submit"],.login-page .form-wrapper input[type="submit"]{
    background:#346f83;
    color:white;
    border-radius:2px;
    margin-top:15px;
    font-weight:400;
    border:1px solid #346f83;
    transition:all .3s ease-out;
    border-radius: 8px;
}
.signup-page .form-wrapper input[type="submit"]:hover,.login-page .form-wrapper input[type="submit"]:hover{
    cursor:pointer;
    background:white;
    color:#346f83
}
.signup-page .form-wrapper .errors,.login-page .form-wrapper .errors{
    margin-top:-11px;
    margin-bottom:1rem;
    list-style:none;
    padding:0;
    font-size:.9em;
    color:#b75353
}
.signup-page .login-signup,.login-page .login-signup{
    text-align:center;
    font-weight:300;
    font-size:.8em;
    font-family:'Poppins',sans-serif;
    margin-top:20px
}
.signup-page .login-signup a,.login-page .login-signup a{
    color:#346f83;
    font-weight:500
}