/*//////////////////////////////////////////////////////////////////
[ FONT - TOYOTA ]
*/

@font-face {
  font-family: 'Toyota';
  src: url('/assets/font/Toyota/ToyotaType-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Toyota';
  src: url('/assets/font/Toyota/ToyotaType-Semibold.ttf') format('truetype');
  font-weight: 600;
}

@font-face {
  font-family: 'Toyota';
  src: url('/assets/font/Toyota/ToyotaType-Black.ttf') format('truetype');
  font-weight: 800;
}


/*//////////////////////////////////////////////////////////////////
[ RESET ]
*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	font-family:'Toyota',sans-serif;
}

body,html{
	height:100%;
	background:#EFEFEF;
}


/*---------------------------------------------*/

a{
	font-size:14px;
	line-height:1.7;
	color:#0D345A;
	text-decoration:none;
	transition:all .4s;
}

a:hover{
	color:#1E1919;
}

h1,h2,h3,h4,h5,h6{
	margin:0;
	color:#0D345A;
}

p{
	font-size:14px;
	line-height:1.7;
	color:#1E1919;
}

ul,li{
	list-style:none;
}


/*---------------------------------------------*/

input,textarea{
	outline:none;
	border:none;
}

textarea:focus,input:focus{
	border-color:transparent!important;
}

button{
	outline:none!important;
	border:none;
	background:transparent;
	cursor:pointer;
}

iframe{
	border:none!important;
}


/*//////////////////////////////////////////////////////////////////
[ TEXT UTILITY ]
*/

.txt1{
	font-size:13px;
	color:#1E1919;
}

.txt2{
	font-size:13px;
	color:#0D345A;
}


/*//////////////////////////////////////////////////////////////////
[ LOGIN CONTAINER ]
*/

.limiter{
	width:100%;
	margin:0 auto;
}

.container-login100{

	width:100%;
	min-height:100vh;

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

	padding:15px;

	background: linear-gradient(135deg,#0D345A,#1E1919);
}


/*//////////////////////////////////////////////////////////////////
[ LOGIN CARD ]
*/

.wrap-login100{

	width:960px;
	background:#FFFFFF;

	border-radius:12px;
	overflow:hidden;

	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;

	padding:160px 120px 40px 90px;

	box-shadow:0 20px 50px rgba(0,0,0,0.25);
}


/*------------------------------------------------------------------
[ IMAGE ]
*/

.login100-pic{
	width:316px;
}

.login100-pic img{
	max-width:100%;
}


/*------------------------------------------------------------------
[ FORM ]
*/

.login100-form{
	width:290px;
}

.login100-form-title{

	font-size:28px;
	font-weight:800;

	color:#0D345A;
	line-height:1.2;
	text-align:center;

	display:block;
	padding-bottom:45px;
}


/*//////////////////////////////////////////////////////////////////
[ INPUT ]
*/

.wrap-input100{
	position:relative;
	width:100%;
	margin-bottom:15px;
}

.input100{

	font-size:15px;
	font-weight:400;

	color:#1E1919;

	width:100%;
	height:50px;

	background:#EFEFEF;
	border:1px solid #ddd;

	border-radius:25px;

	padding:0 30px 0 60px;
}


/*------------------------------------------------------------------
[ ICON ]
*/

.symbol-input100{

	font-size:15px;

	display:flex;
	align-items:center;

	position:absolute;
	left:0;
	top:0;

	width:60px;
	height:100%;

	padding-left:25px;

	color:#0D345A;

	transition:.3s;
}

.input100:focus + .focus-input100 + .symbol-input100{

	color:#1E1919;
	padding-left:20px;
}


/*//////////////////////////////////////////////////////////////////
[ BUTTON ]
*/

.container-login100-form-btn{
	width:100%;
	display:flex;
	justify-content:center;
	padding-top:20px;
}

.login100-form-btn{

	font-size:15px;
	font-weight:600;

	color:#FFFFFF;
	text-transform:uppercase;

	width:100%;
	height:50px;

	border-radius:25px;

	background:linear-gradient(135deg,#0D345A,#1E1919);

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

	transition:.3s;
}

.login100-form-btn:hover{
	background:linear-gradient(135deg,#1E1919,#0D345A);
}


/*//////////////////////////////////////////////////////////////////
[ RESPONSIVE ]
*/

@media (max-width:992px){

.wrap-login100{
	padding:120px 80px 40px 80px;
}

.login100-pic{
	width:35%;
}

.login100-form{
	width:50%;
}

}

@media (max-width:768px){

.wrap-login100{
	padding:80px 40px;
}

.login100-pic{
	display:none;
}

.login100-form{
	width:100%;
}

}

@media (max-width:576px){

.wrap-login100{
	padding:50px 20px;
}

}


/*//////////////////////////////////////////////////////////////////
[ VALIDATION ]
*/

.validate-input{
	position:relative;
}

.alert-validate::before{

	content:attr(data-validate);

	position:absolute;
	right:10px;
	top:50%;
	transform:translateY(-50%);

	background:#FFFFFF;
	border:1px solid #c80000;

	border-radius:13px;

	padding:4px 10px;

	font-size:13px;
	color:#c80000;

	opacity:0;
	visibility:hidden;

	transition:.3s;
}

.alert-validate:hover::before{
	opacity:1;
	visibility:visible;
}

.alert-validate::after{

	content:"\f06a";
	font-family:FontAwesome;

	position:absolute;
	right:13px;
	top:50%;
	transform:translateY(-50%);

	color:#c80000;
	font-size:15px;
}


/*//////////////////////////////////////////////////////////////////
[ SHOW PASSWORD ]
*/

.toggle-password{
	position:absolute;
	right:20px;
	top:50%;
	transform:translateY(-50%);
	cursor:pointer;
	color:#777;
}

.toggle-password:hover{
	color:#0D345A;
}