@font-face{font-family:foco;src:url("Foco_Trial_Rg.ttf");font-display:swap}
*{margin:0;padding:0;font-family:'foco','Open Sans', "Helvetica Neue", Arial, sans-serif;box-sizing: border-box;}
body{font-family: Helvetica;overflow: auto;}
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.a{text-decoration: none;color: #2838a1;font-size: 0.9rem;transition: .3s; cursor: pointer}
.a:hover{color: #18236f;text-decoration: underline;}
.wave{position: fixed;bottom: 0;left: 0;height: 100%;z-index: -1;}
.wave2{position: fixed; bottom: 0; right: 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;}
.login-content{display: flex;justify-content: flex-start;align-items: center; text-align: center;}
.img img{width: 500px;}
.container form{width: 360px;}
.container div.forgot-div{width: 100%;}
.login-content .sign-up{position: relative;}
.login-content .alert{font-size: 12px;color:red;padding:10px 5px 5px 5px;}
.login-content .sign-up a{text-decoration: none; color: #2838a1; transition: .3s;}
.login-content .sign-up a:hover{color: #28a14d; text-decoration: underline;}
.login-content img{height: 100px;}
.login-content h2{margin: 15px 0; color: #1f4a90; text-transform: uppercase; font-size: 2.9rem;}

.input-div{position: relative; display: grid; grid-template-columns: 7% 93%; margin: 25px 0; padding: 5px 0; border-bottom: 2px solid #d9d9d9;}
.input-div.one{margin-top: 0;}
.i{color: #d9d9d9; display: flex; justify-content: center; align-items: center;}
.i i{transition: .3s;}
.input-div > div{position: relative;height: 45px;}
.input-div > div > h5{position: absolute;left: 10px;top: 50%;transform: translateY(-50%);color: #999;font-size: 18px;transition: .3s;}
.input-div:before, .input-div:after{content: ''; position: absolute; bottom: -2px; width: 0%; height: 2px; background-color: #2838a1; transition: .4s;}
.input-div:before{right: 50%;}
.input-div:after{left: 50%;}
.input-div.focus:before, .input-div.focus:after{width: 50%;}
.input-div.focus > div > h5{top: -7px;font-size: 12px;}
.input-div.focus > .i > i{color: #2838a1;}
.input-div > div > input{position: absolute;left: 0;top: 0;width: 100%;height: 100%;border: none;outline: none;background: none;padding: 0.5rem 0.7rem;font-size: 1.2rem;color: #555;border-radius: 5px;}
.input-div.pass{margin-bottom: 4px;}
.forgot{display: block;text-align: right;text-decoration: none;color: #2838a1;font-size: 0.9rem;transition: .3s;cursor: pointer;}
.forgot:hover{color: #28a14d;text-decoration: underline;}
.btn{display: block;width: 100%;height: 50px;border-radius: 25px;outline: none;border: none;background-image: linear-gradient(to right, #214a92, #204b90, #5187e0);background-size: 200%;font-size: 1.3rem;color: #fff;text-transform: uppercase;margin: 1rem 0;cursor: pointer;transition: .5s;}
.btn:hover{background-position: right;}


.sign-up-containter{margin:auto;text-align:center;max-width: 450px;}
.sign-up-containter .logo{margin-top:100px;}
.sign-up-containter .logo img{max-width:80%;max-height: 100px; }
.sign-up-containter .btn-div{margin-top:20px;}
.sign-up-containter .input-status{padding: 15px 0 0 0;}
.sign-up-containter .sign-input{margin: 5px 0px;}
.sign-up-containter .sign-input .view-landing{margin: 40px 0px;}
.sign-up-containter .sign-digit .sign-info{ margin-top:20px;line-height:1.3;}
.sign-up-containter .sign-digit .sign-info p{padding:3px;}

@media screen and (max-width: 1050px){
	.container{grid-gap: 5rem;}
	.sign-up-containter{ max-width: 450px;}
}
@media screen and (max-width: 1000px){
	.login-content h2{font-size: 2.4rem; margin: 8px 0;}
	.img img{width: 400px;}
	.sign-up-containter{ max-width: 450px;}
}
@media screen and (max-width: 900px){
	.container{grid-template-columns: 1fr;}
	.img{display: none;}
	.wave{display: none;}
	.wave2{display: none;}
	.login-content{justify-content: center;}
	.container form{margin-top:-150px}

	#over {display: none;background: #000;position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.8;z-index:101;}
	.over-box{display:none;overflow:hidden;position:fixed;z-index:102;text-align:center;border: 1px solid #ccc;border-radius:3px;background-color:#FFF;height:auto;}
	.over-box-forgot{width:calc(100vw - 40px);padding:10px;top:15%;left:50%;margin-left: calc(20px - 50vw);max-height:calc(85vh - 60px);overflow-x:hidden;overflow-y:auto;}
	.over-box-forgot .boxContent{overflow-x:hidden;overflow-y:auto;max-height:calc(95vh - 200px);}
	.over-box-forgot .boxTitle{padding: 6px;background: #f1f1f1;color:#273378;text-align: center;font-size: 18px;}
	.over-box-forgot .boxButton{padding:10px;}
}
@media screen and (max-width: 450px){
	.container form{width: 320px;}
	.sign-up-containter{ max-width: 320px;}
	.sign-up-containter .logo{margin-top:50px;}
}
@media screen and (max-width: 350px){
	.container form{width: 260px;}
	.sign-up-containter{ max-width: 260px;}
	.container .sign-up-containter .logo{margin-top:30px;}
}

@media screen and (min-width: 900px){
	#over {display: none;background: #000;position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.8;z-index:101;}
	.over-box{display:none;position:fixed;z-index:102;text-align:center;border: 1px solid #ccc;border-radius:3px;background-color:#FFF;}
	.over-box-forgot{width:500px;padding:20px;top:20%;left:50%;margin-left:-270px;max-height:calc(80vh - 60px);overflow-x:hidden;overflow-y:auto;}
	.over-box-forgot .boxContent{overflow-x:hidden;overflow-y:auto;max-height:calc(95vh - 200px);}
	.over-box-forgot .boxTitle{padding: 6px;background: #f1f1f1;color:#273378;text-align: center;font-size: 18px;}
	.over-box-forgot .boxButton{padding:10px;}
}
.inputText{outline: none;padding:8px 6px;font-size:18px; width:calc(100% - 14px);border: 1px solid #eaeaea;}
/* Button no Icon */
.button {padding: 8px;background-color: #212d7c;color: #fff;margin: 2px 4px;cursor: pointer;font-weight: bold;outline: 0px;border-radius: 4px;border:1px solid #212d7c;font-size:15px}
.button:hover{background-color:#fff;color:#212d7c;}
.button-small {padding: 3px 5px;background-color: #212d7c;color: #fff;margin: 1px 2px;cursor: pointer;outline: 0px;border-radius: 3px;border:1px solid #212d7c;}
.button-small:hover{background-color:#fff;color:#212d7c;}
.button-span {padding: 1px 2px;color: #fff;cursor: pointer;outline: 0px; border-radius: 2px; border:1px solid #212d7c;}
.button-round{-webkit-animation:fa-spin 1s infinite linear;animation:fa-spin 1s infinite linear;}
.button-warning {background-color: #F27935;border: 1px #F27935 solid;}
.button-warning:hover {background-color: #fff;color:#F27935;}

.button-info {background-color: #00AFD1;border: 1px #00AFD1 solid;}
.button-info:hover {background-color: #fff;color:#00AFD1!important;}
.button-info:hover i{color:#00AFD1!important;}

.button-success {background-color: #449d44;border: 1px #449d44 solid;}
.button-success:hover {background-color: #fff;color:#449d44;}

.button-danger {background-color: #c9302c;border: 1px #c9302c solid;}
.button-danger:hover {background-color: #fff;color:#c9302c;}

.button-normal {background-color: #c9302c;border: 1px #c9302c solid;}
.button-normal:hover {background-color: #fff;color:#c9302c;}

.button-play {background-color: #449d44;border: 1px #449d44 solid;}
.button-play:hover {background-color: #fff;color:#449d44;}
.hide{display: none;}
.normal{color:#c9302c;}
.info{color:#00a1f1;}
.success{color:#449d44;}
.warning{color:#F27935;}
.danger{color:red;}
.special{color:#26268e;}
.tata{color:#273378}
@keyframes fa-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
.fa-spinner{ animation: fa-spinner 0.8s linear infinite;}
.opac-1{opacity: 0.1;}.opac-2{opacity: 0.2;}.opac-3{opacity: 0.3;}.opac-4{opacity: 0.4;}.opac-5{opacity: 0.5;}.opac-6{opacity: 0.6;}.opac-7{opacity: 0.7;}.opac-8{opacity: 0.8;}.opac-9{opacity: 0.9;}


.m0{margin: 0}
.m5{margin: 5px}
.m10{margin: 10px}
.m15{margin: 15px}
.m20{margin: 20px}
.m25{margin: 25px}
.mt5{margin-top: 5px}.ml5{margin-left: 5px}.mb5{margin-bottom: 5px}.mr5{margin-right: 5px}
.mt10{margin-top: 10px}.ml10{margin-left: 10px}.mb10{margin-bottom: 10px}.mr10{margin-right: 10px}
.mt15{margin-top: 15px}.ml15{margin-left: 15px}.mb15{margin-bottom: 15px}.mr15{margin-right: 15px}
.mt20{margin-top: 20px}.ml20{margin-left: 20px}.mb20{margin-bottom: 20px}.mr20{margin-right: 20px}
.mt25{margin-top: 25px}.ml25{margin-left: 25px}.mb25{margin-bottom: 25px}.mr25{margin-right: 25px}


.p0{padding:0}
.p5{padding:5px}
.p10{padding:10px}
.p15{padding:15px}
.p20{padding:20px}
.p25{padding:25px}
.pt5{padding-top: 5px}.pl5{padding-left: 5px;}.pb5{padding-bottom: 5px}.pr5{padding-right: 5px;}
.pt10{padding-top: 10px}.pl10{padding-left: 10px;}.pb10{padding-bottom: 10px}.pr10{padding-right: 10px;}
.pt15{padding-top: 15px}.pl15{padding-left: 15px;}.pb15{padding-bottom: 15px}.pr15{padding-right: 15px;}
.pt20{padding-top: 20px}.pl20{padding-left: 20px;}.pb20{padding-bottom: 20px}.pr20{padding-right: 20px;}
.pt25{padding-top: 25px}.pl25{padding-left: 25px;}.pb25{padding-bottom: 25px}.pr25{padding-right: 25px;}