@charset "utf-8";
/* CSS Document */


.login-cont{
	min-height: 600px;
    width: 100%;
    position: relative;
    margin-top: 121px;
}
.login-cont>div {
	min-height: inherit;
}
.login-details{
	background: linear-gradient(310deg, rgba(102,179,255,1) 33%, rgba(170,202,238,1) 95%);
	display:flex;
	-webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;	
}
.login-form{
	background-color:#cccccc;
	display:flex;
	-webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.cont-details{
	display:inline-block;
	border-radius:5px;
	background-color:rgb(255, 255, 255);
	padding:20px;
	font-size: 16px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
	color: #4f5767;
}
.heading-cont{
	width:350px;
	height:50px;
	text-align:center;
	font-size:30px;
	font-family: 'Poppins', sans-serif;
	color:#004280;
	font-weight:800;
	text-transform:uppercase;
	letter-spacing:0.5px;
}
.body-cont{
	width: inherit;
	position:relative;
	margin-top:10px;
}



.form__group {
	 position: relative;
	 padding: 15px 0 0;
	 margin-top: 10px;
	 margin-bottom:15px;
	 width: 100%;
}
.form__field {
	 font-family: inherit;
	 width: 100%;
	 border: 0;
	 border-bottom: 2px solid #9b9b9b;
	 outline: 0;
	 font-size: 16px;
	 color: #1a1a1a;
	 padding: 7px 0;
	 background: transparent;
	 transition: border-color 0.2s;
}
.form__field::placeholder {
	 color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
	 font-size: 14px;
	 cursor: text;
	 top: 25px;
}
.form__label {
	 position: absolute;
	 top: 0;
	 display: block;
	 transition: 0.2s;
	 font-size: 14px;
	 color: #9b9b9b;
}
.form__field:focus {
	 padding-bottom: 6px;
	 font-weight: 700;
	 border-width: 3px;
	 border-image: linear-gradient(to right, #11998e, #38ef7d);
	 border-image-slice: 1;
}
.form__field:focus ~ .form__label {
	 position: absolute;
	 top: 0;
	 display: block;
	 transition: 0.2s;
	 font-size: 14px;
	 color: #11998e;
	 font-weight: 700;
}
.form__field:required, .form__field:invalid {
	 box-shadow: none;
}
.mybtn {
  flex: 1 1 auto;
  padding: 5px 15px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: #ffffff;
  border-radius: 8px;
  font-size:20px;
  font-weight:bold;
  font-family: din, sans-serif;
  border:none;
  outline:none;
  width:100%;
  margin-top:30px;
  margin-bottom:30px;
}
.mybtn{
	background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
}
.mybtn:hover {
  background-position: right center;
  color:#ffffff;
}
.mybtn i{
	font-size:18px;
	margin-left:10px;
}
.text-cont{
	width:100%;
	text-align:center;
	margin-bottom:10px;
	font-size:17px;
}
.text-cont>a{
	color:#66c2ff;
	margin:0px 2px;
}
.col-details-cont{
	width:100%;
	margin:10px 0px;
	font-size:16px;
	background-color:#f2f2f2;
	border:1px solid #cccccc;
	border-radius:5px;
	overflow:hidden;
}
.col-details-cont img{
	margin-right:15px;
	background-color:#ffffff;
	padding:4px;
	width:58px;
	height:58px;	
}
.error-box{
	color:#ff6666;
	width:100%;
	font-size:16px;
	text-align:center;
}
.sucess-msg{
	color:#00b386;
	width:100%;
	font-size:19px;
	text-align:center;
	margin-top:20px;
}
.sucess-msg>img{
	width:75px;
	height:75px;
	padding:2px;
	margin:auto;
}
.error-msg{
	color:#ff6666;
	width:100%;
	font-size:19px;
	text-align:center;
	margin-top:20px;
}
.error-msg>img{
	width:75px;
	height:75px;
	padding:2px;
	margin:auto;
}

@media only screen and (max-width: 768px) {
	.login-cont{
		margin-top: 60px;
		overflow:hidden;
		min-height: 400px !important;
	}
	.heading-cont{
		width:290px;
		font-size:23px !important;
		height:48px;
	}
	.col-details-cont{
		font-size: 14px;
	}
	.col-details-cont img{
		width: 50px;
    	height: 50px;
		margin-right:8px;
	}
	.login-form .heading-cont{
		width:320px;
	}
}