*{
	margin:auto;
}

@font-face{
	font-family:font1;
	src:url(../font/Poppins.ttf);
}

body{
  	font-family:font1;
	font-size:12px;
	color:#474747;
}

a{
	text-decoration:none;
}

#background{
	width:100%;
	height:100vh;
	background:url("../images/background.jpg") center no-repeat;
    background-size:cover;
}

/*
#background{
	width:100%;
	height:100vh;
	background:#95b08e;
	background:linear-gradient(135deg, #d2dbc8, #95b08e);
}
*/


/* LOADING */
#loading{
	position:relative;
	top:0;
	left:37.5%;
	display:block;
	z-index:99999;
}
#result{
	position:relative;
	bottom:0;
	left:0;
	right:0;
	z-index:99999;
	color:#fff;
	text-align:center;
}
.resultSuccess{
	padding:10px;
	font-size:12px;
	line-height:17px;
	background:#2db77c;
	border-radius:5px;
}
.resultFailed{
	padding:10px;
	font-size:12px;
	line-height:17px;
	text-align:center;
	color:#fff;
	background:#f03b3b;
	border-radius:5px;
}


/* LOGIN */
#loginbox{
	margin:auto;
	width:250px;
	height:430px;
	padding:30px 60px 0;
	background:#eff4ea;
	background:linear-gradient(160deg, #fff 0%, #eff4ea 40%);
	border-radius:10px;
}
.title{
	margin-bottom:50px;
	text-align:center;
}
.logo{
	width:120px;
	height:auto;
}
.titleText{
	font-family:font2;
	font-size:36px;
	color:#092052;
}
#boxform{
	margin:auto;
	padding:5px 0;
}
.boxicon{
	float:left;
	width:24px;
	height:24px;
	padding:8px 3px 6px 11px;
	background:#2db77c;
	border-radius:6px 0 0 6px;
}

.imglog{
	width:22px;
	height:22px;
}


.pilihan{
	display:block;
	margin:20px 10px;
	padding:10px 20px;
	font-size:16px;
	color:#fff;
	background:#2db77c;
	border-radius:10px;
}


/*FORM LOGIN*/
.formlog input{
	width:192px;
	padding:10px;
	font-family:font1;
	font-size:12px;
	color:#474747;
	border:none;
	border-radius:0 6px 6px 0;
}
.formlog input:focus{
	outline:none;
}
.formlog input:required{
	background:#fff;
}
.formlog input:required:valid{
	background:#fff;
}
.formlog input:focus:invalid{
	background:#fff;
}

#tombol{
	margin	:10px 0;
	display:inline-block;
	width:250px;
	height:40px;
	padding-top		:8px;
	letter-spacing	:1px;
	font-family		:font1;
	font-weight 	:bold;
	font-size		:14px;
	text-align		:center;
	text-decoration	:none;
	color:#fff;
	background		:#2db77c;
	border-radius 	:6px;
	cursor:pointer;
	transition 		:ease 0.3s;
}



/*  MOBILE */
@media only screen and (max-device-width :800px){
	
	body{
		font-size:10px;
	}
	#loginbox{
		margin:20px;
		width:auto;
		height:400px;
		padding:50px;
	}
	.logo{
		width:100px;
		height:auto;
	}
	.formlog input{
	  	width:calc(100% - 60px);
	}
	#tombol{
		width:calc(100% - 2px);
	}
}