body{
	margin: 0;
	font-family: sans-serif;
	background-color: #292c33;
}

.container{
	width: 100%;
	height: 100vh;
	display: flex;
  	align-items: center;
  	justify-content: center;
}

.login{
	width: auto;
	height: auto;
	margin: 10px;
	padding: 10px;
	border-radius: 3px;
	background-color: #FFFFFF;
	-webkit-box-shadow: 4px 2px 5px -4px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 2px 5px -4px rgba(0,0,0,0.75);
	box-shadow: 4px 2px 5px -4px rgba(0,0,0,0.75);
}

.logo{
	width: 100%;
	height: 70px;
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.logo > p{
	font-weight: 600;
	font-size: 45px;
	color: #373737;
}

.icons{
	width: 100%;
	margin-bottom: 10px;
	display: flex;
	justify-content: center;
}

.icons > i{
	margin-left: 10px;
	color: #373737;
	font-size: 30px;
}

.data-login, .data-recover, .data-code, .data-password{
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.name{
	width: 70%;
	height: auto;
	display: flex;
	align-items: center;
	margin: 30px;
	transition: all ease 0.5s;
	padding: 5px;
	border-radius: 3px;
	border: 2px #B2B2B2 solid;
}

.data-password > .name{
	margin: 10px !important;
}

.data-recover > .name, .data-code > .name{
	margin: 0px !important;
}

.data-code{
	width: 75% !important;
}

.data-code > .name{
	width: 95% !important;
}

.password{
	width: 70%;
	height: auto;
	display: flex;
	align-items: center;
	transition: all ease 0.5s;
	padding: 5px;
	border-radius: 3px;
	border: 2px #B2B2B2 solid;
}

.name > label, .password > label{
	color: #B2B2B2;
	font-size: 20px;
	margin-right: 10px;
	transition: all ease 0.5s;
}

.password > i{
	cursor: pointer;
	margin-left: 5px;
	color: #B2B2B2;
	font-size: 20px;
	transition: all ease 0.5s;	
}

.name > input{
	width: 100%;
	height: auto;
	font-size: 20px;
	border: none;
	outline: none;
	background: none;
}

.password > input{
	width: 100%;
	height: auto;
	font-size: 20px;
	border: none;
	outline: none;
	background: none;
}
.error{
	width: 75%;
	overflow: hidden;
	font-size: 15px;
	font-weight: 600;
	border-radius: 2px;
	background-color: #f2dede;
	color: #b22424;
}

.error > div{
	padding: 10px;
}

.btn-access, .btn-recover, .btn-code, .btn-new-password, .btn-return{
	width: 75%;
	height: 40px;
    cursor: pointer;
    outline: none;
    background: #297fb8;
    color: #FFFFFF;
    border: none;
    font-size: 20px;
    border-radius: 3px;
    padding: 5px;
    margin-bottom: 30px;
    transition: all ease 0.5s;
}

.btn-code{
	width: 100% !important;
}

.btn-recover, .btn-code, .btn-new-password, .btn-return{
	margin-top: 20px;
}

.btn-access:hover, .btn-access:focus, .btn-recover:hover, .btn-recover:focus, .btn-code:hover,
.btn-code:focus, .btn-new-password:hover, .btn-new-password:focus, .btn-return:hover, .btn-return:focus{
    background: #004F82;
}

.password{
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
}

.recover-pass{
	font-size: 13px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.recover-pass > a, .return > a{
	text-decoration: none;
	color: #000000;
	font-weight: 600;
}

.return{
	width: 100%;
}

.return > a{
	margin-left: 15%;
	float: left;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    }
}

.btn-recover > i{
	transition: all ease 0.3s;
	-webkit-animation:spin 2s linear infinite;
    -moz-animation:spin 2s linear infinite;
    animation:	spin 2s linear infinite;	
}

.confirm-password{
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: -15px;
}