:root {
	/* основной цвет */
	--color1: red;
	/* основной цвет при выделении */
	--color1hover: #c60000;
	/* основной цвет фона */
	--color2: #fff;
	/* основной цвет фона */
	--color2hover: #efefef;
	/* основной цвет теста */
	--color3: #000;
	/* Дополнительный цвет */
	--color4: #000;
	/* Дополнительный цвет */
	--color5: #000;
	--font: 16px Arial;
	--pad1: 2rem;
	/* Горизонтальные отступы */
	--hpad-1: 2rem;
	/* Вертикальны отступы */
	--vpad-1: 2rem;
	--maxwidth: 1600px;
	--minwidth: 360px;
	font: var(--font);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	min-height: 100%;
	overflow-x: hidden;
}

@media (max-width: 360px) {
	html {
		overflow-x: auto;
	}
}

body {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr auto;
	min-height: 100%;
	min-width: var(--minwidth);
}

a {
	color: var(--color1);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

blockquote {
	display: block;
	font-size: 2em;
	text-align: center;
	&:before {
		content: "«";
	}

	&::after {
		content: "»";
	}
}


fieldset {
	padding: 0.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: bold;
	text-align: center;
}

h1 {
	color: var(--color1);
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}

h2 {
	color: var(--color1);
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
}

h3 {
	font-size: 1.25rem;
}

h4 {
	font-size: 1.13rem;
}

h5 {
	font-size: 1.07rem;
}

h6 {
	font-size: 1.04rem;
}

img {
	display: block;
	margin: auto;
	max-height: 100%;
	max-width: 100%;
}

svg,
.icon {
	color: inherit;
	display: inline-block;
	fill: inherit;
	height: 0.8em;
	vertical-align: baseline;
	width: auto;
}

[before]::before {
	content: attr(before);
}

[after]::after {
	content: attr(after);
}

/* Элементы формы */
input,
textarea,
select {
	border: 2px solid var(--color1);
	font: var(--font);
	outline: none;
	padding: 0.5em;
	resize: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	border: 2px solid var(--color1hover);
}

main,
article,
section {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	overflow: hidden auto;
	padding: 0 var(--vpad-1);
	text-align: justify;
	width: 100%;

	&>* {
		margin: 0 auto;
		max-width: 100%;
	}

	& p {
		display: block;
		margin-left: 0;
		text-indent: 2em;
		width: 100%;

		& a {
			color: var(--color1);

			&:hover {
				text-decoration: underline;
			}
		}
	}

	& ol,
	& ul {
		list-style-position: inside;
		margin-left: 2em;
		text-align: left;
	}
}

main {
	gap: var(--vpad-1);
}

article {
	gap: calc(var(--vpad-1) / 2);
}

section {
	gap: calc(var(--vpad-1) / 3);
}

article>.fullscreen {
	height: calc(100vh - (2 * var(--pad1)));
	max-height: 100%;
	width: 100%;
}

/* Контроллеры */
.controllers {
	text-align: center;
}

.controllers>.controller {
	border: 1px solid var(--color1);
	border-radius: 0.5em;
	display: inline-block;
	margin: 0.5em;
	padding: 0.5em;
	position: relative;
}

.controllers>.controller::before {
	background-color: #fff;
	font-size: 0.7em;
	left: 50%;
	padding: 0.35em;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
}

form .message {
	text-align: center;
}

/* Кнопки */
button,
.button {
	background-color: var(--color1);
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	fill: #fff;
	font-size: inherit;
	padding: calc(0.5em + 2px);
	text-align: center;
	user-select: none;

	&:hover {
		background-color: var(--color1hover);
		color: #fff;
	}

	&.red {
		background-color: red;

		&:hover {
			background-color: #d20000;
		}
	}

	&.site {
		border-radius: 1em;

		&:has(>.remove) {
			display: inline-flex;
			overflow: hidden;
			padding: 0;

			&>* {
				background-color: inherit;
				padding: calc(0.5em + 2px);

				&.remove {
					background-color: #d90000;
					display: none;
				}
			}

			&:hover {
				&>* {
					&.remove {
						display: block;
					}
				}
			}

			&:has(>.remove:hover) {
				background-color: #d90000;
			}
		}
	}
}

.buttons {
	text-align: center;
}

.hidden {
	display: none;
}

/* Таблицы */
.t-container {
	display: block;
	overflow: auto hidden;

	&::-webkit-scrollbar,
	&::-moz-scrollbar {
		background-color: red;
		position: sticky;
		bottom: 0;
	}
}

table,
.table {
	border-collapse: collapse;
	display: table;
	margin: 1em auto;
	max-width: 100%;
	text-align: center;
	width: fit-content;
}

tr,
.table>* {
	display: table-row;
}

td,
.table>*>* {
	border: 1px solid var(--color1);
	display: table-cell;
	padding: 0.5em;
	vertical-align: middle;

	&:first-child {
		text-align: left;
	}

	&:last-child {
		text-align: right;
	}
}

.table>.head {
	position: sticky;
	top: 0;
}

.table>.head>* {
	background: var(--color1);
	color: #fff;
}

input[type=text],
input[type=tel],
textarea {
	display: block;
	width: 100%;
}

.controller>div {
	border: 1px solid var(--color1);
	border-radius: 0.5em;
	display: inline-block;
	margin: 0.5em;
	padding: 0.5em;
	position: relative;
}

.controller>div:first-child {
	margin-left: 0;
}

.controller>div:last-child {
	margin-right: 0;
}

.controller>div::before {
	background-color: #fff;
	font-size: 0.7em;
	left: 50%;
	padding: 0 0.35em;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
}

#servicemessages:empty {
	display: none;
}

.servicemessage {
	background-color: var(--color1);
	color: #fff;
	padding: 0.5em;
}

.grid {
	display: grid;
}

/* Анимации */
/* Анимация загрузки */
.loading {
	animation-duration: 0.75s;
	animation-iteration-count: infinite;
	animation-name: rotate-forever;
	animation-timing-function: linear;
	border: 6px solid var(---color1);
	border-radius: 50%;
	border-right-color: transparent;
	display: inline-block;
	height: 50px;
	width: 50px;
}

@keyframes rotate-forever {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Бургер трансформирующийся */
label.bar {
	--icon-color: var(--color1);
	--icon-thin: 12;
	aspect-ratio: 1/1;
	cursor: pointer;
	display: inline-block;
	height: 1em;
	max-height: 100%;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	transition-duration: .3s;
	width: auto;

	&>span {
		background-color: var(--icon-color);
		display: block;
		height: calc(100% / var(--icon-thin));
		position: absolute;
		right: 50%;
		top: 50%;
		transform: translate(50%, -50%);
		transition-duration: inherit;
		width: calc(100% / 7 * 5);

		&::before {
			background-color: inherit;
			bottom: calc(200% * var(--icon-thin) / 7);
			content: "";
			display: block;
			height: 100%;
			position: absolute;
			right: 0;
			transition-duration: inherit;
			width: 100%;
		}

		&::after {
			background-color: inherit;
			content: "";
			display: block;
			height: 100%;
			position: absolute;
			right: 0;
			top: calc(200% * var(--icon-thin) / 7);
			transition-duration: inherit;
			width: 100%;
		}
	}

	&:has(input:checked)>span {
		transform: translate(50%, -50%) rotate(45deg);

		&::before {
			bottom: 0;
			transform: rotate(-90deg);
		}

		&::after {
			opacity: 0;
		}
	}
}

/* Модальные окна */
.modalwindow {
	background-color: #1a1a1a96;
	display: none;
	height: 100%;
	margin: 0;
	min-width: 360px;
	overflow-x: auto;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	will-change: transform;
	z-index: 100;

	& .table > div > div {
		border: none;
		vertical-align: top;
	}
}

input:checked+.modalwindow {
	display: block;
}

.modalwindow .close {
	background-color: #fff;
	border: 3px solid var(--color1);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	height: 1.5em;
	position: absolute;
	right: 0;
	top: 0;
	transform: translate(30%, -30%);
	width: 1.5em;
}

.modalwindow .close>* {
	color: var(--color1);
	margin: auto;
}

.modalwindow>div {
	display: grid;
	grid-template-rows: auto 1fr;
	max-height: 95%;
	position: absolute;
	right: 50%;
	top: 50%;
	transform: translate(50%, -50%);
}

.modalwindow>div>h2 {
	background-color: var(--color1);
	border-radius: 1rem 1rem 0 0;
	color: #fff;
	margin: 0;
	padding: 0.5em;
	text-align: center;
	white-space: nowrap;
	user-select: none;
}

.modalwindow>div>div {
	background-color: #fff;
	border-radius: 0 0 1rem 1rem;
	margin: 0;
	overflow-y: auto;
	padding: 0.5em;
}

@media only screen and (max-width:720px) {
	.modalwindow>div {
		width: calc(100% - 2em);
	}

	.modalwindow .table {
		display: block;
	}

	.modalwindow .table>* {
		display: block;
	}

	.modalwindow .table>*>* {
		border: none;
		display: block;
		margin: 0;
		padding: 0.25em;
	}
}

/* .FEEDBACK */
.feedback_form {
	margin: 1em auto;
	width: fit-content;
}

.feedback_form>* {
	margin: 0.5em 0;
}

/* Хлебные крошки */
#breadcrumbs {
	display: block;
	font-size: 0.8em;
	width: 100%;
}

#breadcrumbs>span:not(:first-child)::before {
	content: "•";
	margin: 0 0.8em;
}

#breadcrumbs a:hover {
	text-decoration: underline;
}