/* @import url('scroll.css');
@import url('fonts.css'); */

body{
    margin: 0;
    background-color: #ffffff;
}

.wave{
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100%;
	z-index: -1;
}

.container{
    /* width: 100vw; */
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap :7rem;
    padding: 0 2rem;
}

.img{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.img img{
	width: 500px;
}

.login-content{
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.login-content h2{
    font-family: 'Varela', sans-serif;
    color: #333;
}

.login-content .input-div{
	position: relative;
    display: grid;
    margin: 25px 0;
    padding: 5px 0;
}

.i{
    position: absolute;
    color: #afafaf;
    margin-top: 20px;
    margin-left: 430px;
}

.btSubmit{
	display: block;
	width: 100%;
	height: 50px;
	border-radius: 25px;
	outline: none;
	border: none;
	background-image: linear-gradient(to right, #D62E63, #c41f50, #D62E63);
	background-size: 200%;
	font-size: 1.2rem;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	cursor: pointer;
	transition: .5s;
}
.btSubmit:hover{
	background-position: right;
}

h1{
    font-family: 'Varela', sans-serif;
	color:#40454D;
	font-size:24px;
    margin-top: 50px;
    margin-bottom: -2px;
    margin-left: 20px;
    padding-bottom:0;
}

p{
	font-family: 'Roboto', sans-serif;
	color:#40454D;
	font-size:13px;
}

input {
    background: transparent;
    outline: none;
    width: 440px;
    border: none;
    border-bottom: 1px solid #1D63B9 ;
    padding: 13px 10px;
    font-size: 14px;
    color: #1D63B9 ;
    text-decoration: none;
    -webkit-border-radius: 6px;
     border-radius: 0;
}

input::placeholder{
    color: #afafaf;
}

i:before{
    /* position: absolute; */
}

/* Tela recuperar senha */
.container2{
    width: 500px;
    margin: 0 auto;
}

.centralizar{
    display: grid !important;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.h1_recuperarsenha{
    font-family: 'Varela', sans-serif;
    color: #40454D;
    font-size: 24px;
    margin-top: 50px;
    margin: 0;
}

.email__recuperarsenha{
    margin-bottom: 25px;
}

.span__esqueciminhasenha{
    font-size: 15px;
    position: absolute;
}
/* Fim recuperar senha */

/* LINKS */
.a_login {
	color: #1D63B9 ;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif;
	text-decoration: none;
    transition: 1.5s;
}

.a_login:hover{
    color: #002fff;
}

/* Responsividade */
/* MOBILE */
@media only screen and (max-width : 800px) {
    .container{
		grid-template-columns: 1fr;
	}

	.img{
		display: none;
	}

	.wave{
		display: none;
	}
    .login-content {
        display: flex;
        align-items: center;
    }
}

/* DESKTOP */
@media only screen and (min-width : 801px) {
    form{
		width: 290px;
	}
}

/* Sucesso e Error */
.sucesso{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background: #C4F3D7;
    padding: 18px 35px;
    min-width: 420px;
    position: absolute;
    right: 0;
    top: 10px;
    border-radius: 25px 0 0 25px;
    border-left: 8px solid #1CB059;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    color: #1CB059;
}

.erro{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background: #FFE0E5;
    padding: 18px 35px;
    min-width: 420px;
    position: absolute;
    right: 0;
    top: 10px;
    border-radius: 25px 0 0 25px;
    border-left: 8px solid #FD4953;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
    color: #FD4953;
}

.close-btn{
    position: absolute;
    right: 0px;
    top: 32%;
    padding: 0px 10px;
    cursor: pointer;
  }