main { 
	background: var(--main-background) no-repeat center;
	background-size: cover;
	position: relative;
	user-select: none;
	height: calc(100vh);
	width:100%;
	display: grid;
  	place-items: center;

  	& .main { width:100%; }

 	& .grp2 { display:none; }

 	& form {
		background-color: var(--login-form-background);
		padding: var(--login-form-padding);
		border-radius: 10px;
		box-shadow: 0px 0px 3px 2px rgba(0,0,0,.2);
		margin-bottom: 20px;
		--label-color:white;
		--input-placeholder:gray;

		& .kft.eye:before { transition: color .3s ease-in-out; }
		& .kft.eye:hover:before { color:#333 !important; }
	}

	.wrap {
		display: none;
		width:600px;
		margin-inline: auto;
		&.open  { display:block; }
	}
}

.mobile .wrap { width:calc(100% - 30px); }
 

/* ---~~~ Profile Img ~~~--- */

.mobile #profile_wrap, .tablet #profile_wrap { background: rgba(255,255,255,.3); }

#profile_wrap { position: relative; }
#login_profile {
	border-radius: 50%;
	position: absolute;
	top: -52px;
	background: white;
	width: 104px;
	padding: 10px;
	height: 104px;
	border: 5px solid #4d4984;
	left: calc(50% - 52px);
	box-shadow: 0px 0px 4px rgba(0,0,0,.5);
	background-size: contain;
	background-image: var(--profile-default);
	z-index: 1;
}
#login_profile img { display: block; margin:5px auto; }

/* ---~~~ Checkbox ~~~--- */

.mobile #login-chk { text-align: center; }
#login-chk { margin: 20px 0 0 10px; }
.wrap .chklabel { font-size: 15px; color:var(--chk-label-color); }

@layer kform {
	label.checkbox input:checked:focus + svg { 
		box-shadow: 0px 0px 0px 5px rgba(0,0,0,.15) !important; 
	}
}

/* ---~~~ Login Button ~~~--- */

.btn.round {
	border-radius: 20px;
	background: var(--login-background);
	background: var(--login-background-grad);
	font-size: 15px;
	font-weight: bold;
	width:100%;
	margin-block: 20px;
	&:hover { background: var(--login-hover-background) }
	&:focus { box-shadow: 0px 0px 0px 5px rgba(0,0,0,.15); }
}

/* ---~~~ Form Inputs ~~~--- */

form input:not([type=checkbox]) { transition: all .3s ease-in-out; filter: none !important; }
form input:not([type=checkbox]):focus {
	box-shadow: 0px 0px 0px 3px var(--input-shadow-color) !important;
	filter: none !important;
	outline: none;
}