html { margin: 0; min-height: 100%; height: unset; }

* { border: none; margin: 0px; padding: 0px;  }

body {
	height: unset;
	min-height: 100vh;
}

body.login {
	background-image: url(../graf/bg_blue.jpg);
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	font-size: 16px;
}

a {
	color: #fff;
	transition: all 0.2s ease;
}

a:hover {
	color: #F25E2A;
	transition: all 0.2s ease;
}

div:focus,
a:focus,
input:focus,
textarea:focus,
button:focus {
	outline: 0 !important;
	outline: none !important;
	outline-style: none;
	box-shadow: none;
	border-color: transparent;
}


#backtoblog,
.language-switcher {
	display: none !important;
}

#login_container {
	width: 100%;
	margin: 0 auto;
	max-width: 1800px;
	padding: 40px 4% 80px 4%;
	box-sizing: border-box;
	
	display: flex;
	align-items: flex-start;
	gap: 50px 5%;
	flex-wrap: wrap;
	justify-content: center;
}


#login_logo {
	order: 1;
	flex-basis: 100%;
	text-align: center;
	
	display: flex;
	width: 100%;
	align-items: center;
}

	#login_logo .left,
	#login_logo .right {
		flex-basis: 150px;
	}
	
		#login_logo .left a {
			text-decoration: none;
		}

	#login_logo .center {
		flex-grow: 1;
	}
	
@media screen and (max-width: 700px) {
	#login_logo {
		flex-direction: column;
		gap: 5px;
	}
	
	#login_logo .center {
		order: 1;
		flex-basis: unset;
		text-align: center;
	}
	
	#login_logo .left {
		padding-top: 10px;
	}
	
	#login_logo .left,
	#login_logo .right {
		order: 2;
		text-align: center;
		flex-basis: unset;
	}
	
}
	
#login_desc {
	order: 2;
	flex-basis: calc(95% - 500px);
	color:#EDEDED;
}

	#login_desc h1 {
		font-size: 48px;
		text-align: left;
		font-weight: 500;
		padding-bottom: 15px;
		color: #fff;
	}
	
	#login_desc ul {
		display: grid; 
		grid-auto-columns: 1fr; 
		grid-template-columns: repeat(2, 1fr); 
		gap: 20px 20px; 
		
		padding: 35px 0;
		list-style: none;
	}

		#login_desc ul li {
			background: #0F1F40;
			border-radius: 4px;
			
			padding: 15px 15px 15px 50px;
			
			background-image: url(../graf/ico_check.svg);
			background-size: 18px auto;
			background-repeat: no-repeat;
			background-position: 22px 22px;
		}
		
			#login_desc ul li strong {
				font-size: 20px;
			}
	
	@media screen and (max-width: 1200px) {
		#login_desc ul {
			grid-template-columns: repeat(1, 1fr); 
		}
	}
		
#login_form {
	order: 3;
	max-width: 450px;
	width: 100%;
	margin: 0;
	
}
		
		
.login #nav {
	order: 3;
	text-align: center;
}

	.login #nav a {
		color: #F25E2A;
		font-size: 16px;
		font-weight: 500;
	}
	
	.login #nav a:hover {
		color: #23314B;
	}
	
.login #login {
	width: 100%;	
	padding: 40px;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0 0 15px rgb(0 0 0 / 80%);
	background: #fff;
	
	display: flex;
	flex-direction: column;
}

	.login #login h1 {
		display: none !important;
	}
	
	.login #login h2 {
		order: 1;
		font-size: 24px;
		text-align: center;
		padding-bottom: 25px;
		margin-bottom: 25px;
		border-bottom: 1px solid #ddd;
	}
	
	.login #login a {
		display: block;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}
	
	.login #login .noaccount {
		order: 4;
		text-align: center;
		padding-top: 15px;
			color: #F25E2A;
	}
	
		.login #login .noaccount a {
			display: inline-block;
			width: unset;
			color: #F25E2A;
			font-weight: 500;
		}

		.login #login .noaccount a:hover {
			color: #23314B;
		}
			
.login form#resetpassform,
.login form#lostpasswordform,
.login form#loginform {
	order: 2;
	border: 0;
	margin: 0;
	padding: 0;
	box-shadow: unset;
}

@media screen and (max-width: 500px) {
	.login form#resetpassform,
	.login form#lostpasswordform,
	.login form#loginform {
		padding: 40px 5%;
	}
}

	.login form#lostpasswordform label[for='user_login'],
	.login form#loginform label[for='user_login'],
	.login form#loginform label[for='user_pass'] {
		display: block;
		font-size: 16px;
		padding-bottom: 5px;
	}
	
	.login form#lostpasswordform input#user_login,
	.login form#loginform input#user_login,
	.login form#loginform input#user_pass {
		font-size: 16px;
		padding: 15px 15px;
		box-sizing: border-box;
	}
	
	.login form#loginform button.wp-hide-pw  {
		height: 53px;
	}
	
	.login form#loginform .forgetmenot {
		display: block;
		padding: 10px 0;
		width: 100%;
		float: none;
	}
	
		.login form#loginform .forgetmenot label {
			font-size: 16px;
		}
	
	.login form#lostpasswordform .submit,
	.login form#loginform .submit {
		display: block;
		float: none;
		width: 100%;
		text-align: center;
		padding-top: 10px;
	}
	
		.login form#lostpasswordform .submit input#wp-submit,
		.login form#loginform .submit input#wp-submit {
			display: block;
			float: none;
			width: 100%;
			
			margin-top: 15px;
			background: #F25E2A;
			border: 0;
			padding: 6px 25px;
			box-sizing: border-box;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 700;
			color: #fff;
			transition: all 0.2s ease;
		}
	
		.login form#lostpasswordform .submit input#wp-submit:hover,
		.login form#loginform .submit input#wp-submit:hover {
			background: #23314B;
			transition: all 0.2s ease;
		}
		

.login .message {
	margin-top: 15px;
	padding: 20px;
	font-size: 16px;
	background: #0F1F41;
	border: 0;
	color: #fff;
	border-radius: 6px;
}

.login #login_error {
	margin-top: 15px;
	padding: 20px;
	font-size: 16px;
	background: #d63638;
	border: 0;
	color: #fff;
	border-radius: 6px;
	
}
		
	.login .message a,
	.login #login_error a {
		color: #fff;
	}
		
	.login .message a:hover,
	.login #login_error a:hover {
		color: #23314B;
	}
			
		


@media screen and (max-width: 1000px) { 
	#login_container {
		flex-direction: column;
		gap: 30px 0;
		align-items: center;
	}
	
	#login_form {
		order: 2;
	}
	
	#login_desc {
		order: 3;
	}
	
	.login #login {
		padding: 25px;
	}
	
	.login #login h2 {
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
	
	.login form#lostpasswordform, .login form#loginform {
		padding: 15px 2%;
	}
}