body{width:100%;height:100%; background: linear-gradient(90deg, hsla(215, 86%, 34%, 1) 0%, hsla(196, 100%, 41%, 1) 50%, hsla(206, 99%, 35%, 1) 100%);}
.container{padding:2rem;}
.login_img{display:none;}
.login-container{background:var(--lightbgCol); padding:2rem; border-radius:1rem; display:flex; flex-direction:column; gap:2rem; align-items:center; justify-content:center; }
.login-box{text-align:left; width:100%; display:flex; flex-direction:column; gap:1.6rem; line-height:2.6rem}
.heading{text-align:center; font-size:3rem; line-height:3.5rem}
.heading small{font-size:1.6rem; color:#121212; display:block;}
.form_field{position:relative; margin-bottom:2rem; color:#121212}
.login-form{font-size:1.6rem}
.txtbox{border:0; padding:1rem; background:#fff; border-bottom:2px solid #ddd; color:var(--primaryCol);}
.focus-border{position:absolute; content:''; bottom:0; left:0; height:0.2rem; width:0; background:var(--primaryCol); display:block; transition:0.2s ease;}
.txtbox:focus ~ .focus-border{width:100%;}
.flex_two_col{display:flex; align-items:center; gap:0.5rem}
.chkbox{width:1.6rem; height:1.6rem;}
.form_action{width:100%; position:relative; z-index:1; border-radius:1rem; overflow:hidden; box-shadow:0 5px 30px 0 rgba(3,216,222,.2); margin-bottom:2rem;}
.form_action_bg{position:absolute; z-index:-1; width:300%; height:100%; background:var(--gradient); top:0; left:-100%; transition:all .4s}
.form_action_button{background:transparent; color:#fff;display:flex;justify-content:center;align-items:center; padding: 0 2rem; width:100%; height:5rem; font-size:1.8rem; cursor:pointer}
.form_action:hover .form_action_bg{left:0;}
.form_link a{color:var(--primaryCol); font-weight:500; font-size:1.6rem; border-bottom:1px solid transparent;}
.form_link a:hover{color:var(--accentCol); border-bottom:1px solid var(--accentCol);}

@media only screen and (min-width:480px)
	{
		.login-container{padding:2rem 5rem;}
	}
@media only screen and (min-width:600px)
	{
		.login-container{padding:2rem 10rem;}
	}
@media only screen and (min-width:768px)
	{
		.container{padding:0; display:flex; height:100%;}
		.login-container{border-radius:0; width:35rem; padding:2rem 4rem; position:fixed; right:0; height:100%}
		.login_img{display:flex; width: calc(100% - 350px); height:100%; align-items:flex-end; justify-content:center; position:fixed; }
		.login_img img{height:69.5rem; width:auto;}

	}
@media only screen and (min-width:1024px)
	{		
		.login-container{width:45rem; padding:2rem 6rem;}
		.login_img{width:calc(100% - 450px);}

	}
@media only screen and (min-width:1280px)
	{		
		.login-container{width:70rem; justify-content:start; padding:4rem 10rem;}
		.logo{display:flex; width:50rem; justify-content: center;}
		.logo img{width:35rem;}
		.login_img{width: calc(100% - 700px);}		
	}