/* @import url("https://fonts.googleapis.com/css?family=Poppins"); */


.main {
    background-color: blue;
}


*, html {
  scroll-behavior: smooth;
}


body{
    font-size: 15px;
}

.title{
	font-weight: bold;
	color: #aa1308;
	font-size: 35px;
	margin-bottom: 3rem;
}

.login-section:before{
	content: '';
	position: absolute;
	width: 50%;
	height: 100%;
	background-color: #aa1308;
	/* border-radius: 0 75% 100% 50% ; */
}

.custom-login{
	padding: 6rem;
}

.custom-field{
	border-top:0px ;
	border-left:0px ;
	border-right:0px ;
	border-radius: 0;
	transition: all ease-in-out .3s;
	background-color: #EAF6F6;
}


.form-control:focus {
	border-color: #aa1308;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
	background-color: #EAF6F6;
	
  }

.custom-label{
	font-size: 16px;
	color: #9e9c9c;
}

.form-control:focus {
	box-shadow: none;
  }

.logo-group{
	display: none;
	margin: auto;
	align-items: center;
	margin-bottom: 5rem;
	color: #aa1308;
}

.custom-button{
	margin-top: 1rem;
	border: none;
	font-weight: bold;
	background-color: #aa1308;
	color: white;
	border-radius: 8px;
	padding: 0.8rem 3rem 0.8rem 3rem ;
	width: 80%;
}

.custom-button:hover {
    cursor: pointer;
    background-color: #8d0f06;
}

button:focus {outline:0;}

.notify-alert {
	width: 30%;
	text-align: center;
}

.error{
	color: red;
}

.back-gambar {
	
	background: linear-gradient(-70deg, #EAF6F6 50%, rgba(194, 186, 184, 0.2) 40%), url('../images/background2.png') no-repeat center center fixed; 
	-webkit-background-size: cover; 
	-moz-background-size: cover; 
	-o-background-size: cover; 
	background-size: cover;


}


@media (max-width:991px) {
	.login-section:before{
		background-color: white
	}
	.custom-banner{
		display: block;
	}
	.logo-group{
		display: block;
	}
	.custom-login{
		padding: 3rem;
	}


	.back-gambar {
		background: url('../images/background2.png') no-repeat center center fixed; 
		-webkit-background-size: cover; 
		-moz-background-size: cover; 
		-o-background-size: cover; 
		background-size: cover;
	}

	.res-handle{
		background-color: #EAF6F6;
		border-radius: 1rem;
		margin: 2rem;
	}

	.logo{
		width: 50%;
	}

	.logo-text{
		font-size: medium;
	}

	.notify-alert {
		width: 50%;
	}
}


@media (max-width:412px) {

	.custom-login{
		padding: 3rem 1rem 0rem 1rem;
	}
	.notify-alert {
		width: 80%;
	}

}