:root {
	--bg-header: #0004;
	--bg-body: #39393e;
	--item-color: #63a8eb;
	--text-clr-main: #fff;
	--text-clr-sub:	#999;
	--button-bg: var(--item-color);
	--button-clr: var(--text-clr-main);
}

html, body {
    min-height: 100%;
}

body {
	min-width: 360px;
    margin: 0px;
    padding: 0px;
    background: var(--bg-body);
    color: var(--text-clr-main);
	font: 14px/1.4 Tahoma, Helvetica, sans-serif;
}

h2 {
	margin: 1em 0em;
	font-size: 1.4em;
	font-weight: bold;
	cursor: default;
}

/* layout */

header {
	height: 80px;
	background: var(--bg-header);
}

header .cont,
main .cont {
	width: 100%;
	max-width: 960px;
	height: 100%;
	display: flex;
	position: relative;
	box-sizing: border-box;
	margin: 0px auto;
}

header .cont {
	align-items: center;
	padding: 16px 32px;
}

main .cont {
	padding: 40px 32px;
}

.logo {
	height: 100%;
	display: flex;
	background: transparent none no-repeat 0 0 / contain;
}

/* content */

section {
	width: 100%;
	display: flex;
	gap: var(--form-gap);
	--form-gap: 50px;
}

	section > div {
		position: relative;
		padding-left: var(--form-gap);
		border: 0px solid #fff3;
		border-left-width: 1px;
	}

	section > div:first-child {
		padding: 0px;
		border-width: 0px;
	}

/* captcha form */

.captcha .form {
	max-width: 400px;
	display: flex;
	flex-direction: column;
	margin: 0px auto;
	gap: 24px;
	--error-color: #ff7566;
}

.captcha.disabled .form {
	pointer-events: none;
	opacity: 0.3;
}

	.captcha_image {
		height: 73px;
		display: flex;
		align-items: center;
		gap: 12px;
	}

		.captcha_image img {
			height: 100%;
			display: flex;
			flex-grow: 1;
			background: #fff2;
			border-radius: 4px;
		}

		.captcha_refresh {
			width: 40px;
			height: 100%;
			display: flex;
			position: relative;
			justify-content: center;
			align-items: center;
			padding: 0px;
			color: var(--button-clr);
			font-size: 0px;
			text-decoration: none;
			background: var(--button-bg);
			border-radius: 4px;
			outline-offset: 2px;
		}

		.captcha_refresh:hover {
			filter: brightness(0.9);
			text-decoration: none;
		}
		.captcha_refresh:focus {
			outline: 1px solid var(--item-color);
		}
		.captcha_refresh:active {
			filter: brightness(0.8);
		}

		.captcha_refresh::before {
			content: '\27F2';
			width: 100%;
			height: calc(100% - 1px);
			display: flex;
			box-sizing: border-box;
			justify-content: center;
			align-items: center;
			padding: 0 0.04em 0.12em 0;
			font-size: 28px;
			font-family: Arial;
			transition: rotate 0.8s ease;
			rotate: 0deg;
		}

		.captcha_refresh:active::before {
			transition: none;
			rotate: 360deg
		}

		@keyframes update {
			0%   {rotate: 0deg}
			100% {rotate: -360deg}
		}
	
	.captcha_input {
		width: auto;
		display: flex;
		justify-content: space-between;
	}

		.captcha_input input {
			width: 100%;
			height: 40px;
			box-sizing: border-box;
			padding-bottom: 3px;
			font-size: 1.3em;
			text-align: center;
			border-radius: 4px;
			outline-offset: 2px;
			border: none;
		}

		.captcha.error .captcha_input input {
			outline: 1px solid var(--error-color);
		}

	.captcha_submit {
		width: auto;
	}

		.captcha_submit input {
			width: 100%;
			height: 40px;
			padding: 4px 0px 6px;
			font-size: 1.3em;
			text-align: center;
			color: var(--button-clr);
			background: var(--button-bg);
			border: none;
			border-radius: 4px;
			outline-offset: 2px;
			cursor: pointer;
		}

		.captcha_input input:focus,
		.captcha_submit input:focus {
			outline: 1px solid var(--item-color);
		}

		.captcha_submit input:hover {
			filter: brightness(0.9);
		}

		.captcha_submit input:active {
			filter: brightness(0.8);
		}

		.captcha.disabled .captcha_submit input {
			filter: brightness(0.8);
		}
	
	.captcha_message {
		display: none;
  		font-weight: 500;
	}

	.captcha.error .captcha_message {
		display: block;
		color: var(--error-color);
	}

.captcha.disabled::before {
	content: '';
	width: var(--size);
	height: var(--size);
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	border: 8px solid #f3f3f377;
	border-top-color: var(--item-color);
	border-radius: 50%;
	animation: loader 0.8s linear infinite;
	--size: 60px;
}

@keyframes loader {
	0% {rotate: 0deg}
	100% {rotate: 360deg}
}

/* captcha info */

section .info {
	width: auto;
	flex-grow: 1;
}

.info_description {
	display: flex;
	gap: 20px;
}

.info_description::before {
	content: '';
	width: 70px;
	min-width: 70px;
	aspect-ratio: 1 / 1;
	background: url(../images/ico_info.png) 0 0 no-repeat;
	background-size: contain;
}

.info_description p {
	color: var(--text-clr-sub);
}

.info_description p b {
	color: var(--text-clr-main);
}

.info_description p:first-child {
	margin-top: 0px;
}

@media screen and (max-width: 800px) {

section {
	flex-direction: column;
	font-size: 1.2em;
}

	section > div {
		padding-left: 0px;
		border-left-width: 0px;
		border-top-width: 1px;
	}

	.captcha .form {
		margin-bottom: 0em;
	}

		.captcha_image {
			height: 119px;
		}

		.captcha_refresh {
			width: 80px;
		}

		.captcha_refresh::before {
			font-size: 45px;
		}

		.captcha_input input,
		.captcha_submit input {
			height: 50px;
		}

}