@import url("_font-inter.css");
@import url("_font-merriweather.css");
@import url("_base.css");
@import url("_joomla.css");
@import url("_page-controls.css");
@import url("_ajax-form.css");
/* Page */
html {
	background: #1e1e1e;
	color: #fff;
	font: 18px / 1.3 var(--base-fonts);
	accent-color: #ffa113;
	height: 100%;
	font-variant-alternates: character-variant(legible-lower-l, legible-upper-i);
}
html.front-page {
	background: url("../images/front-bg.webp") center / cover no-repeat fixed #1e1e1e;
	color: #fff;
}
html.alt-appearance {
	font-size: max(1rem, 22px);
}
body {
	min-width: 334px;
	max-width: 1920px;
	margin: 0 auto;
	height: 100%;
}
/* Vector icons */
.icon {
	width: 1em;
	height: 1em;
}
/* Dialog layout */
.dialog-layout[open] {
	box-sizing: border-box;
	background: transparent;
	max-width: none;
	max-height: none;
	width: 100%;
	height: 100%;
	padding: 1em;
	display: grid;
	place-content: safe center;
}
.dialog-layout-inner {
	background: #fff;
	color: #000;
	padding: 1.5em;
	box-shadow: 0 0 3px 3px rgba(255,255,255,.15);
	border-radius: 4px;
	position: relative;
	overflow: auto;
}
.form-close-dialog {
	position: absolute;
	z-index: 1;
	inset-block-start: .5em;
	inset-inline-end: .5em;
}
.form-close-dialog-button {
	background: transparent;
	color: #b24539;
	border: none;
	cursor: pointer;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	text-align: center;
	padding: 0;
	transition: background-color 300ms ease-out, color 300ms ease-out;
}
.form-close-dialog-button:hover,
.form-close-dialog-button:focus {
	background-color: #b24539;
	color: #fff;
}
/* Main content: all */
.main-body {
	display: flex;
	max-width: var(--content-max-width);
	padding-left: 16px;
	padding-right: 16px;
	margin-left: auto;
	margin-right: auto;
	gap: 16px;
}
.content {
	flex-grow: 1;
	max-width: 100%;
}
.sidebar {
	flex-shrink: 0;
	flex-grow: 0;
}
.sidebar > section:not(:first-child) {
	margin-top: 1rem;
}
/* Main content: wide */
@media all and (min-width: 1598px) {
	.content {
		order: 1;
	}
	.sidebar-1 {
		width: 250px;
		order: 0;
	}
	.sidebar-2 {
		width: 250px;
		order: 2;
	}
}
/* Main content: narrow */
@media not all and (min-width: 1598px) {
	.main-body {
		flex-direction: column;
	}
	.content {
		order: 0;
	}
	.sidebar-1 {
		width: 100%;
		order: 1;
	}
	.sidebar-2 {
		width: 100%;
		order: 2;
	}
}
/* .limit-content is a wrapper for normal content, which needs padding on narrow screens. */
/* .sheet is a wrapper for content with no padding (image slideshow, etc.). */
.limit-content,
.sheet {
	display: flow-root;
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}
@media not print {
	.limit-content {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}
/* Hide on print. */
@media print {
	.hide-on-print { display: none !important; }
}
/* Show only on print. */
@media not print {
	.show-on-print { display: none !important; }
}
/* Template */
.top {
	font-size: 1.1rem;
	padding-top: 1em;
	padding-bottom: 1em;
}
html.front-page .top {
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.l-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}
@media not print {
	@media (max-width: 1739px) {
		.l-top {
			padding-inline-end: 72px;
		}
	}
}
.top-logo {
	font-family: var(--heading-fonts);
	font-size: 30px;
}
.top-logo > a {
	text-decoration: none;
	transition: color 300ms ease-out;
}
.top-logo > a:hover,
.top-logo > a:focus {
	color: #ffa113;
}
.top-logo > a:focus-visible {
	text-decoration: underline;
	outline: none;
}
.main-layout {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}
main {
	margin-block: auto;
	padding-block: 1em;
}
@media not print {
	main {
		padding-bottom: 1em;
	}
}
.main-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1em;
	list-style: none;
}
.main-menu a {
	transition: color 300ms ease-out;
	text-decoration: none;
}
.main-menu a:hover,
.main-menu a:focus {
	color: #ffa113;
}
.main-menu a:focus-visible {
	text-decoration: underline;
	outline: none;
}
.after-component:not(:first-child),
.new-contract:not(:first-child),
.form-new-contract:not(:first-child) {
	margin-top: 1em;
}
.new-contract {
	text-align: center;
}
.form-new-contract {
	box-sizing: border-box;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em 1.5em;
	border-radius: .5em;
	background: #fff;
	color: #000;
	text-align: start;
}
.form-new-contract > header {
	display: flex;
	align-items: flex-end;
	gap: 1em;
}
.form-new-contract > header > h2 {
	order: -1;
}
.form-new-contract-page-data {
	color: #707070;
	font-size: 20px;
}
.form-new-contract-page-num {
	color: #ffa113;
	font-size: 36px;
}
.new-contract-input {
	width: 100%;
	margin-top: .2em;
	padding: .18em;
}
.form-new-contract input[type="checkbox"] {
	width: 1em;
	height: 1em;
}
canvas {
	background: #fff;
	color: #000;
	border: 1px solid #2e8b57;
	touch-action: none;
}
.form-tab-icons {
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3px;
}
.form-tab-icon {
	display: inline-block;
	width: 25px;
	height: 3px;
	border-radius: 1px;
	background: #e6e6e6;
}
form[data-page="1"] > .form-tab-icons > .form-tab-icon:first-child,
form[data-page="2"] > .form-tab-icons > .form-tab-icon:nth-child(2),
form[data-page="3"] > .form-tab-icons > .form-tab-icon:nth-child(3),
form[data-page="4"] > .form-tab-icons > .form-tab-icon:nth-child(4),
form[data-page="5"] > .form-tab-icons > .form-tab-icon:nth-child(5),
form[data-page="6"] > .form-tab-icons > .form-tab-icon:nth-child(6),
form[data-page="7"] > .form-tab-icons > .form-tab-icon:nth-child(7) {
	background-color: #ffa113;
}
.form-tab-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}
.form-tab-nav:not(:first-child) {
	margin-top: 1em;
}
form[data-page="1"] > [data-on-page]:not([data-on-page="1"]),
form[data-page="2"] > [data-on-page]:not([data-on-page="2"]),
form[data-page="3"] > [data-on-page]:not([data-on-page="3"]),
form[data-page="4"] > [data-on-page]:not([data-on-page="4"]),
form[data-page="5"] > [data-on-page]:not([data-on-page="5"]),
form[data-page="6"] > [data-on-page]:not([data-on-page="6"]),
form[data-page="7"] > [data-on-page]:not([data-on-page="7"]) {
	display: none;
}
.hl {
	color: #ffa113;
}
.steps {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 1em 3.5em;
}
.steps:not(:first-child) {
	margin-block-start: 1em;
}
.steps > li {
	list-style: none;
	background: url("../images/step.svg") 0 5px / 13px 13px no-repeat transparent;
	min-height: 18px;
	padding-left: 34px;
}
@media all and (min-width: 1200px) {
	.steps:not(:first-child) {
		margin-block-start: 1.55em;
	}
}
@media all and (min-width: 1400px) {
	html.front-page h1:not([class]) {
		font-size: 100px;
	}
}
html.front-page h1:not([class]) > span {
	display: block;
}
.front-controls {
	text-align: center;
}
.front-controls:not(:first-child) {
	margin-top: 3em;
}
.main-body a {
	color: #ffa113;
}
.bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding-block: 1em;
}
.bottom a {
	text-decoration: none;
}
.bottom a:hover,
.bottom a:focus {
	text-decoration: underline;
}
.bottom a > img {
	margin-right: .5em;
}
@media all and (min-width: 1200px) {
	.bottom {
		gap: 1em 3em;
	}
}
@media all and (min-width: 1200px) and (min-height: 700px) {
	.bottom {
		padding-block: 3em;
	}
}
.mobile-menu a {
	text-decoration: none;
	outline: none;
}
.bottom-contacts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.bottom-contacts > a {
	flex-shrink: 0;
	flex-grow: 0;
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
