@font-face {
	font-family: 'BebasNeueBold';
	src: url("/font/bebasneuebold.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}

 @font-face {
	font-family: 'revicons';
	src: url("/font/revicons.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'roboto';
	src: url("/font/Robotolight.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'cuprum';
	src: url("/font/ofontruCuprum.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
}



body {padding: 0;margin: 0;}


	/******************** Sections ********************/
div.section {padding: 0; margin: 0}
div.black-gradient {background-image: linear-gradient(to bottom, #333, #1a1a1a); color: white}
div.metal {background: black url('/img/bg/metal.svg')  no-repeat center / cover }
div.black {background-color: #1a1a1a; color: white}
div.white {background-color: white; color: #1a1a1a}
div.gray {background-color: #E0E0E0; color: black}
div.orange {background-image: linear-gradient(to bottom, #e68700, #e68700, #D07000); color: white}
div.center {text-align: center}
div.pad-bottom2 {padding-bottom: 2em}
div.section h1.solid {margin: 0 auto; font-size: 2.2em; font-family: BebasNeueBold; padding: 4px; background: linear-gradient(to bottom, #333, #1a1a1a); ; color: white; text-align: center}
div.section h1.solid small {display: block; font-family: BebasNeueBold; font-size: 0.5em; color: gray}

div.section.notes h2 {
	font-size: 1.2em; font-family: BebasNeueBold; padding: 4px 20px;
	width: 100%; text-align: left;
	background: linear-gradient(to right, #DDDF, transparent 15%, transparent);
	border-left: 9px #f82 solid;
	box-sizing: border-box;
}

div.section.notes h2 small {display: block; font-family: BebasNeueBold; font-size: 0.4em; color: #222}


	/******************** Form & Fields ********************/
form {font-size: 34px}
form input {font-size: 24px}


/* Обёртка вокруг таблицы */
.element-wrapper {
	overflow-x: auto;		   /* Главная магия */
	overflow-y: hidden;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;   /* Плавный скролл на iOS */
	margin-bottom: 1rem;
}

/* Сама таблица */
.element-wrapper table {
	min-width: 100%;			/* Или фиксированную ширину, например 800px */
	width: max-content;		 /* Важно! Чтобы таблица не сжималась */
	border-collapse: collapse;
}

/* Чтобы шапка не прыгала */
.element-wrapper table thead {
	position: sticky;
	top: 0;
	background: white;		  /* или ваш цвет */
	z-index: 1;
}


	/******************** Calculators ********************/
#cost-calculator {
	max-width: 40em;
	margin: 3em auto;
	background: #eeeeee;
	padding: 30px;
	border: 0.3em solid #222222;
	border-radius: 12px;
}

#cost-calculator .grid {
	display: grid;
	gap: 18px;
}

#cost-calculator .grid > div {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 6px;
}

#cost-calculator .area-inputs {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: end;
}

#cost-calculator .area-inputs input[type=number] {
	width: 3.2em;
}

#cost-calculator .grid > div input,
#cost-calculator .grid > div select {
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 6px;
}

#cost-calculator .grid > div select {
	width: 100%;
}

#cost-calculator .button-row {
	display: flex;
	justify-content: center;
	margin-top: 25px;
}

#cost-calculator .button-row button {
	flex: 0.5;
	padding: 16px;
	font-size: 18px;
	background: #222222;
	color: white;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-weight: 600;
}

#cost-calculator .result {
	margin-bottom: 1em;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 2px solid #222222;
}

	/******************** Articles ********************/
article {margin: 2em auto; max-width: 40em; font-size: 1.4em}
article li {padding: 0.3em; font-size: 1em;}
article .introduction img {float: right; padding: 1em}

article .full {
	width: 100%;
}

article .left, article .right {
	width: 50%;
	max-width: 500px;
	box-sizing: border-box;
	margin: 1em;
	border-left: .4em solid #333;
	border-right: .4em solid #333;
}
article .left.small, article .right.small {
	width: 20%;
	max-width: 200px;
	border: 0;
}
article .left { float: left; margin-left: 0 }
article .right { float: right; margin-right: 0 }

article table {border: 2px solid grey; border-spacing: 1px; border-collapse: collapse }
article table thead tr {background-color: #f4f4f4 }
article table td, th {padding: .3em;  border: 1px solid black}


@media (max-width: 50em) {
	article {margin: 2em 1em; }
	article .left:not(.small), article .right:not(.small) {display: block; float:none; width: 100%; border: 0; margin: 0 auto; }
}

@media (max-width: 30em) {
	article .left.small, article .right.small {display: block; float:none; width: 100%; border: 0; margin: 0 auto; }
}