@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root{
	--white-color: white;
	--light-gray: #dddddd;
	--gray: #cccccc;
	--light-red: #ffcaca;
	--dark-color: #000000;
	--main-color: #0a0a0a;
	--primary-1: #707070;
	--primary-2: #575757;
	--primary-3: #3d3d3d;
	--primary-4: #242424;
	--secondary-color: #500000;
	--complement-1: #ec0000;
	--complement-2: #c40000;
	--complement-3: #a00000;
	--complement-4: #780000;
	--small-text: 12px;

	--scrollbarBg: var(--primary-1);
	--scrollbarThumb: var(--complement-3);
	--scrollbarWidth: 12px;
	--scrollbarBorder: 2px solid var(--scrollbarBg);
	--scrollbarBorderRadius: calc(var(--scrollbarWidth) / 2);

	--status-new-action: #ADD8E6;
	--status-new-action-1: #C1E0EA;
	--status-new-action-2: #D5E8F0;
	--status-new-action-3: #abcddf;
	--status-new-action-4: #cee7f1;
	--status-new-action-5: #B7DCE6;
	--status-new-action-6: #A3D4E0;
	--status-new-action-7: #8FCBD9;
	--status-new-action-8: #7BC2D3;
	--status-new-action-9: #67B9CD;
	--status-new-action-10: #53B0C7;

	--status-new-task: #ffc6c6;
	--status-in-progress: #FFDAB9;
	--status-completed: #c3ffc3;
	--status-commercial-offer: #E6E6FA;
	--status-invoice: #D8BFD8;
	--status-act-of-work: #f1c1f1;
	--status-acceptance: #68ffeb;
	--status-warehousing: #ADD8E6;
	--status-cost-sheet: #f8fab9;
	--status-write-off: #e7c7ff;
}
html {
	/* overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: auto; */
	scrollbar-width: thin;
	@media screen and (min-width: 1024px) {
		overflow-y: auto;
		overflow-x: hidden;
		scrollbar-gutter: auto;
	}
}
/* html.scroll-lock {
	overflow-y: clip;
	overflow-x: hidden;
	scrollbar-color: #fff0 #fff0;
	scrollbar-gutter: auto;
  } */
body {
	padding: 0;
	margin: 0;
	font-family: 'Roboto Condensed', sans-serif;
}
/* .scroll-lock {
	overflow-y: clip;
	touch-action: none;
} */
h1, h2, h3, h4, h5, h6 {
	font-family: "Arsenal", sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
}
pre {
	padding: 10px;
	background: var(--primary-4);
	color: var(--white-color);
	margin: 10px;
	height: calc(100vh - 50vh);
	width: 100%;
	overflow: scroll;
	font-size: 10px;
	line-height: 1.2;
	font-family: monospace;
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	text-wrap: balance;
}

a {
	color: #d40000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}


@view-transition {
  navigation: auto;
}

/* Уходящая анимация */
::view-transition-old(content) {
  animation: slide-down-out 0.3s ease-out forwards;
}

/* Приходящая анимация */
::view-transition-new(content) {
  animation: slide-up-in 0.4s ease-in forwards;
}

@keyframes slide-up-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-down-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Указываем что main анимируется */
.transition {
  view-transition-name: content;
}

/* Навбар зафиксирован */
.navbar-top, .no-transition {
  view-transition-name: none;
}


.hidden {
	display: none;
}


.container {
  scrollbar-width: var(--scrollbarWidth);
  scrollbar-color: var(--scrollbarThumb) var(--scrollbarBg);
}
.container::-webkit-scrollbar {
  width: var(--scrollbarWidth);
}
.container::-webkit-scrollbar-track {
  background: var(--scrollbarBg);
  border-radius: var(--scrollbarBorderRadius);
}
.container::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarThumb);
  border-radius: var(--scrollbarBorderRadius);
  border: var(--scrollbarBorder);
}

.container {
 	display: grid;
 	grid-template-columns: 40px repeat(12, 1fr) 40px;
 	grid-template-rows: 80px repeat(12, 1fr) 100px;
 	min-height: 100svh;
 	gap: 0;
 	grid-auto-flow: row;
  	grid-template-areas:
    "top top top top top top top top top top top top top top"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr ctr"
    "ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr";
}

.lft {
  grid-area: lft;
  position: fixed;
	left: 0;
	top: 40px;
	width: 40px;
	height: 100vh;
}
.rht {
  grid-area: rht;
  position: fixed;
	right: 0;
	top: 40px;
	width: 40px;
	height: 100vh;
}
.top {
	z-index: 2;
	grid-area: top;
	position: sticky;
	top: 0;
	color: var(--white-color);
	font-family: 'Ubuntu Mono', monospace;
	display: grid;
}
	.top > .t {
		display: flex;
		background: var(--main-color);
	}

	.top > .b {
		width: 100%;
		display: flex;
		height: 40px;
		background: var(--primary-3);
		position: relative;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		z-index: -2;
	}
	.logo_menu {
		display: inline-flex;
		border: none;
		margin: 0;
		padding: 0;
		background: none;
		transition: .2s;
		will-change: transform;
	}
	button.logo_menu:hover {
	transform: scale(0.9);
	transition: .3s;
	cursor: pointer;
}

	ul.nav_menu {
		margin: 0;
		padding: 0;
		list-style: none;
		display: flex;
		height: 40px;
		align-items: center;
		justify-content: center;
	}
	li.item_nav {
		width: 40px;
		display: flex;
		justify-content: center;
		height: inherit;
		align-items: center;
	}
	li.item_nav {
		width: 40px;
		display: flex;
		justify-content: center;
		height: inherit;
		align-items: center;
	}

	li.item_nav:nth-child(1) {
		background: var(--primary-3);
	}

	li.item_nav:nth-child(2) {
		background: var(--primary-4);
	}

	a.item_link {
		color: var(--dark-color);
		font-size: 20px;
		transition: .1s;
		display: flex;
		flex-direction: row;
		gap: 5px;
		text-decoration: none;
	}

	a.item_link:hover {
		transform: translateY(-2px);
		transition: .2s;
	}

	.item_link_block {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 7px;
		height: calc(100% - 50px);
		justify-content: center;
	}

	a.item_link > span {
		width: 30px;
	}

.ctr {
	grid-area: ctr;
	min-height: calc(100% - 180px);
	display: flex;
	gap: 10px;
	flex-direction: column;
	/* align-items: center; */
	justify-content: flex-start;
	padding: 10px;
}
.ftr {
	grid-area: ftr;
	background: var(--primary-1);
	color: var(--white-color);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 3px;
	text-wrap: balance;
}
.copyright, .users, .obrabotka_danih, .ipinnogrn, .official {
	font-size: var(--small-text);
}

a.js_bs_counter.bs_counter {
	display: flex;
}
img.bs_item_img {
	width: 100%;
	border-radius: 50% 0;
}

@media (max-width: 1024px) {
	.burger_line {
		background: #eee;
		height: 3px;
		width: 73%;
	}
}

.top-menu > .parent >.menu, .top-menu > .active >.menu {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: -10px;
	left: -10px;
	background: linear-gradient(to bottom, transparent 0%, transparent 40px, var(--main-color) 40px);
	width: max-content;
	height: fit-content;
	padding: 50px 10px 10px 10px;
	box-sizing: border-box;
	transition: .2s;
	list-style: none;
	box-shadow: 0px 0px 15px -5px var(--primary-3);
	transform: translate(0px, -30px);
}
ul.top-menu > li {
	min-width: min-content;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
@media (max-width: 1024px) {
	.top-menu > .parent .menu, .top-menu > .active .menu {
		width: 100%;
		visibility: visible;
		position: relative;
		opacity: 1;
		outline: 0;
		background: none;
		padding: 0;
		top: 0;
		left: 0;
		box-shadow: none;
		transform: translate(0px, 0px);
	}
	ul.top-menu > li {
		display: flex;
		width: 100%;
		gap: 0px;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		flex-wrap: nowrap;
		outline: 1px solid var(--complement-3);
	}

	ul.top-menu > li > a {
		padding: 10px;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	ul.top-menu > li > ul > li {
		padding: 0px 0px 0px 20px;
		line-height: 1.7;
	}

	ul.top-menu ul.menu li:hover {
		background: var(--complement-3);
		transition: .2s;
	}

	ul.top-menu > li > a:hover {
		background: var(--complement-3);
		transition: .2s;
		cursor: pointer;
		text-decoration: none;
	}

	ul.top-menu > li.parent ul.menu {
		display: flex;
		width: 100%;
		flex-direction: column;
		align-items: stretch;
	}
}

a.link_menu {
	color: var(--white-color);
    text-decoration: none;
    font-size: 14px;
    font-family: sans-serif;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.top-menu li.parent:hover a {
	color: #fff;
}

a.link_menu:hover {
	text-decoration: underline;
}

.top-menu > .parent:hover .menu {
	visibility: visible;
	transform: translate(0px, 0px);
	opacity: 1;
	transition: .2s;
	z-index: -1;
}
@media (max-width: 1024px) {
	.top-menu > .parent:hover .menu {
		z-index: 0;
	}
}

.top-left-menu > ul {
	display: flex;
	width: 100%;
	height: 40px;
	flex-direction: row;
	gap: 10px;
	justify-content: space-evenly;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.top-menu > .parent {
	position: relative;
}

.top-left-menu {
	display: flex;
	gap: 10px;
	width: 100%;
	height: 40px;
	flex-direction: row;
	align-items: center;
}

.top-left-menu > input, .top-left-menu > .fast_menu {
	display: none;
}
@media (max-width: 1024px) {
	.top-left-menu > ul {
		background-image: var(--url);
		background-color: var(--complement-4);
		background-repeat: no-repeat;
		background-position: bottom 10% center;
		background-size: 150px;
		display: grid;
		grid-auto-rows: min-content;
		grid-template-columns: 1fr 1fr;
		gap: 0;
		position: fixed;
		width: calc(100%);
		height: calc(100vh);
		top: 40px;
		right: 0;
		margin: 0;
		transition: .2s;
		transform: translateY(100%);
		align-items: flex-start;
		justify-content: flex-start;
		box-sizing: border-box;
		font-size: 17px;
		line-height: 1.5;
		overflow-y: auto;
		z-index: 1;
	}
	div.top-left-menu input[type="checkbox"]:checked ~ ul.top-menu {
		transform: translateY(0%);
		transition: .3s;
	}
	.top-left-menu input[type="checkbox"]:checked ~ label {
		position: relative;
		background: var(--complement-4);
	}
	
	.top-left-menu input[type="checkbox"]:checked ~ .fast_menu > .burger_line {
		position: absolute;
	}
	.top-left-menu input[type="checkbox"]:checked ~ .fast_menu > .burger_line:nth-child(1) {
		transform: rotate(45deg);
		transition: .2s;
	}
	.top-left-menu input[type="checkbox"]:checked ~ .fast_menu > .burger_line:nth-child(2) {
		display: none;
	}
	.top-left-menu input[type="checkbox"]:checked ~ .fast_menu > .burger_line:nth-child(3) {
		transform: rotate(-45deg);
		transition: .2s;
	}
	.top-left-menu > .fast_menu {
		width: 40px;
		height: 40px;
		display: flex;
		gap: 5px;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		transition: .1s;
	}
	.burger_line {
		background: #eee;
		height: 3px;
		width: 73%;
	}
	label.fast_menu:hover {
		cursor: pointer;
	}
}

.container-start {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 75px 75px auto;
	gap: 12px 12px;
	grid-auto-flow: row;
	grid-template-areas:
	"lenta"
	"lenta";
}

@media (max-width: 1024px) {
	.container-start {
		height: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 75px);
		grid-template-areas:
		"lenta"
		"lenta";
	}
	.ctr {
		padding: 10px 10px;
	}
}
.lenta {
	grid-area: lenta;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: auto;
	align-content: center; 
	justify-content: start;
	align-items: center;
	gap: 20px;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-right: 15px;
	overflow-y: hidden;
	overflow-x: auto;
	scrollbar-width: thin;
	/* @media (min-width: 1280px) {
		& {
			overflow-x: auto;
		}
	} */
}

.fav {
	grid-area: fav;
	padding: 30px 20px;
	position: relative;
	border-radius: 50% 50% 0 0;
	outline: 3px solid var(--complement-3);
}
.fav::before {
	content: 'Скидки';
	text-transform: uppercase;
	font-weight: bold;
	color: var(--dark-color);
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 17px;
	position: absolute;
	top: 5px;
	left: 0;
}

.hit {
	grid-area: hit;
	padding: 30px 20px;
	outline: 3px solid var(--main-color);
	position: relative;
	border-radius: 50% 50% 50% 50%;
}
.hit::before {
	content: 'Хиты';
	text-transform: uppercase;
	font-weight: bold;
	color: var(--dark-color);
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 17px;
	position: absolute;
	top: 5px;
	left: 0;
}

.new {
	grid-area: new;
	padding: 30px 20px;
	position: relative;
	border-radius: 0% 50% 50% 50%;
	outline: 3px solid var(--dark-color);
}
.new::before {
	content: 'Новинки';
	text-transform: uppercase;
	font-weight: bold;
	color: var(--dark-color);
	display: flex;
	width: 100%;
	justify-content: flex-start;
	font-size: 17px;
	position: absolute;
	top: 5px;
	left: 20px;
}

.cst {
	grid-area: cst;
}

.cont {
	position: relative;
	overflow: hidden;
	grid-area: cont;
	display: flex;
	border-radius: 15px;
}
.cont > img {
	height: fit-content;
	transform: translateX(-30%) translateY(-30%);
	width: 150%;
	transition: .3s;
	@media (width <= 1024px) {
		& {
			height: auto;
			transform: translateX(0%) translateY(0%);
			width: 100%;
			object-fit: cover;
		}
	}
}

.img {
	grid-area: img;
	position: relative;
}

.rev {
	grid-area: rev;
	display: flex;
	flex-direction: column;
	gap: 5px;
	justify-content: center;
}

.cb {
	grid-area: cb;
}

.faq {
	grid-area: faq;
}
.faq > a {
	background: var(--primary-2);
}
.menu {
	grid-area: tovar;
}

.button_cart_top:hover {
	cursor: pointer;
}

.js_show_cart {
	width: 50px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: var(--main-color);
}

.js_show_cart > a, .js_show_cart > a {
	color: var(--white-color);
	background: none;
	border: none;
}

.count_number {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 15px;
	height: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--secondary-color);
	border-radius: 50%;
	font-size: 10px;
	line-height: 1;
	font-family: monospace;
}
span.infocart_summ {
	position: absolute;
	bottom: 0;
	left: 0;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
	width: 100%;
	text-align: center;
}

.list_tovar {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 20px;
	@media (max-width: 640px) {
		& {
			display: grid;
			grid-template-columns: 1fr;
			gap: 20px;
		}
	}
}


img.img_tovar {
    width: 100%;
    border-radius: 15px;
    object-fit: cover;
    object-position: center;
}

article.element_shop_item.js_shop {
	display: flex;
	position: relative;
	outline: 1px dashed var(--primary-2);
	border-radius: 15px;
	aspect-ratio: 3 / 4;
}

.container-start article.element_shop_item.js_shop {
	aspect-ratio: auto;
}
article.element_shop_item.js_shop:hover {
	outline: 1px dashed var(--primary-3);
}

.tovar_name {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 120px;
	text-wrap: balance;
	color: var(--white-color);
	background: linear-gradient(to right, var(--main-color) 50%, transparent);
	padding: 5px;
	font-size: 22px;
	line-height: 1.1;
	border-radius: 7px 0 0 7px;
	@media (max-width: 1024px) {
		& {
			font-size: 17px;
		}
	}
}

.tovar_name > a {
	color: var(--white-color);
	text-decoration: none;
	font-weight: bold;
}

.no_img_tovar {
	width: 100%;
	height: 100%;
	max-height: 240px;
	overflow: hidden;
}
img.no_img {
	width: 100%;
	height: 100%;
	min-height: 240px;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

form.offer-d.js_shop_form.ajax {
	display: flex;
	gap: 5px;
	flex-direction: column;
	padding: 5px;
	align-items: flex-end;
}

.js_shop_buy input {
	width: 100%;
	box-sizing: border-box;
	border: none;
	padding: 5px;
	background: var(--light-gray);
	border-radius: 3px;
}

button.button_tocart {
	background: var(--light-gray);
	color: var(--primary-1);
	border: none;
	padding: 5px;
	font-size: 14px;
	width: 55px;
	height: 100%;
	border-radius: 3px;
	grid-row-end: none;
}


.js_shop_buy {
	position: relative;
	background: var(--gray);
	padding: 5px;
	transition: .3s;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	border-radius: 7px;
	width: 120px;
	box-sizing: border-box;
	justify-content: space-between;
	align-items: center;
}

.element_shop_item .error, .element_shop_item .error.error_message {
	position: absolute;
	top: -30px;
	right: 10px;
	font-size: 10px;
	background: var(--white-color);
	padding: 5px;
	border-radius: 3px;
}
.pricelist_block {
	display: flex;
	flex-direction: column-reverse;
}

.pricelist_pricerow {
	display: flex;
	flex-direction: column-reverse;
}

strong.price_basic {
	display: block;
	background: var(--gray);
	padding: 5px 5px;
	color: var(--dark-color);
	font-size: 12px;
	line-height: 1;
	width: 100%;
	border-radius: 7px;
	box-sizing: border-box;
}

strong.price_old {
	display: block;
	text-decoration: line-through;
	background: var(--white-color);
	padding: 5px 10px;
	font-size: 10px;
}

section.js_shop_list {
	max-width: 1200px;
}

/* ошибка 503  */

.block_info_503 {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
	gap: 15px;
}

.adress {
	font-size: 30px;
	font-weight: bold;
	padding: 10px;
	background: var(--main-color);
	color: var(--white-color);
}

.grafik {
	font-size: 34px;
	font-weight: bold;
}

.telephone a {
	font-size: 34px;
	text-decoration: none;
	color: var(--dark-color);
	font-weight: bold;
}

.js_cart_item {
	display: grid;
	grid-template-columns: max-content 1fr 120px 20px;
	gap: 5px;
	background: var(--light-gray);
	border-radius: 5px;
}
.js_cart_item:hover {
	outline: 1px dashed var(--primary-3);
}
img.cart_img {
	width: 100%;
	max-width: 80px;
	height: 80px;
	object-fit: contain;
	aspect-ratio: 1 / 1;
	background: var(--white-color);
	padding: 5px;
	box-sizing: border-box;
	transform: scale(0.9);
	border-radius: 5px;
}
.cart_img_block {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}
img.cart_no_img {
	width: 100%;
	height: 60px;
	object-fit: cover;
}
.js_cart_item .js_count_input {
	width: 50px;
}
.table_rows_cart {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.table_row {
	display: grid;
	grid-template-columns: 1fr 100px 30px;
	background: var(--primary-1);
	padding: 5px;
}

.table_enum {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.table_fulltotal {
	display: grid;
	grid-template-columns: 7fr 2fr;
	background: var(--gray);
	padding: 5px;
}

.table_cart {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

h4.cell_title {
	margin: 0 0 10px 0;
}
h1.main_title {
	margin: 0;
	font-size: 18px;
	line-height: 1;
	padding: 0;
	@media screen and (max-width:440px) {
		& {
			font-size: 14px;
		}
	}
}

button.back_history {
	background: linear-gradient(to right, var(--primary-4), transparent);
	color: #fff;
	border: none;
	box-sizing: border-box;
	height: 40px;
	width: 40px;
	transition: .2s;
}

button.back_history:hover {
	background: linear-gradient(to right, var(--dark-color), transparent);
	cursor: pointer;
	transition: .3s;
}
.section_cart_home {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1076px;
	width: 100%;
	margin: 0 auto;
}

.section_cart_home .errors.error.error_message {
	position: absolute;
	top: -40px;
	right: 0;
	font-size: 13px;
	line-height: 1;
	width: min-content;
}

.cena_edit_block {
	display: flex;
	gap: 5px;
	align-items: center;
}

.cena_edit_block input {
	width: 70px;
	margin: 0;
	padding: 3px 5px;
	border: none;
	border-radius: 3px;
}

.cena_edit_block span {
	font-size: 9px;
	font-weight: bold;
}

.cell_sum {
	display: flex;
	gap: 5px;
	font-weight: bold;
	align-self: flex-end;
	align-items: center;
}

.cart_form_block {
	display: flex;
	gap: 10px;
	flex-direction: column;
	align-items: stretch;
	max-width: 640px;
	width: 100%;
}

.cart_form_block input, input.partner_input {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border: 0;
	background: var(--primary-1);
}

input.partner_input::placeholder {
	color: white;
}

input.partner_input {
	color: var(--white-color);
}
ul.partner_suggestions {
	list-style: none;
	padding: 0;
	display: flex !important;!i;!;!m;!;!ш;!шь;!шьз;!шь;!ш;!;
	flex-direction: column;
	gap: 5px;
}

li.partner_suggestion_item:hover {
	cursor: pointer;
	background: var(--primary-1) !important;
}

li.partner_suggestion_item {
	padding: 0 10px;
}

li.partner_suggestion_item:nth-child(odd) {
	background: var(--primary-2);
}


.field_block textarea {
	width: 100%;
	height: 100px;
	background: var(--primary-1);
	border: 0;
}

.cart_form {
	background: var(--primary-3);
	color: var(--white-color);
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	align-items: center;
}

.field_item {
	display: grid;
	grid-template-columns: min-content 1fr;
	gap: 10px;
}

.button_submit {
	background: var(--complement-1);
	color: var(--white-color);
	border: 0;
	padding: 5px 10px;
	font-size: 18px;
	line-height: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5px;
	border-radius: 5px;
}

.button_submit:hover {
	cursor: pointer;
	background: var(--complement-3);
}

.cell_name {
	display: flex;
	align-items: flex-start;
	text-wrap: balance;
	font-size: 14px;
	flex-direction: column;
	justify-content: center;
}

.cart_count_block {
	padding: 5px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.button_count {
	border-radius: 50%;
	border: none;
	font-size: 12px;
	line-height: 1;
	height: 20px;
	width: 20px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--gray);
}

.count_input.js_count_input {
	border: 0;
	background: var(--gray);
	padding: 3px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.cell_unit {
	font-size: 11px;
	line-height: 1;
}

.remover_input {
	display: none;
}

.cell_remove {
	background: var(--primary-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cell_remove .remover label:hover {
	cursor: pointer;
}

.tovar_anons {
	width: 100%;
	height: calc(100% - 85px);
	right: 0px;
	top: 0px;
	border: none;
	inset-inline-start: auto;
	background: linear-gradient(231deg, var(--main-color) 50%, transparent 50%);
	color: var(--white-color);
	font-size: 14px;
	line-height: 1.1;
	padding: 0;
	text-align: end;
	box-sizing: border-box;
	border-radius: 0 15px 0 0;
	@media (max-width:1024px) {
		& {
			font-size: 11px;
		}
	}
}
.anons_text {
	width: 60%;
}

.container-start .anons_text {
	font-size: 14px;
	line-height: 1.1;
	text-wrap: balance;
	width: 50%;
}

.dialog_box > button {
	background: var(--primary-3);
	color: var(--white-color);
	border: none;
	padding: 5px 5px 5px 5px;
}

.dialog_box > button:hover {
	background: var(--primary-4);
}

.dialog_box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	box-sizing: border-box;
	padding: 10px 10px 0 0;
	gap: 10px;
}

.anons_text p {
	margin: 0;
}

.visible_block_news {
	position: relative;
	height: 130px;
	width: 130px;
	overflow: hidden;
	border-radius: 15px;
	scroll-snap-align: start;
	outline: 5px solid var(--primary-3);
	transition: .2s;
}

.block_site_dynamic {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: linear-gradient(to top, var(--dark-color), transparent);
	color: var(--white-color);
	padding: 10px;
	font-size: 13px;
	font-weight: bold;
	line-height: 1.1;
}

.visible_block_news img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
}

.visible_block_news:hover {
	outline: 5px solid var(--primary-1);
	transition: .2s;
}

.visible_block_news:hover img {
	filter: sepia(1);
}

.img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: absolute;
	border-radius: 15px;
}

.name_start_foto {
	display: flex;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 50%;
	height: 100%;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--white-color);
	text-transform: uppercase;
	background: var(--secondary-color);
	align-items: center;
	padding: 5px;
	box-sizing: border-box;
	justify-content: center;
	text-shadow: 0px 2px 0px var(--complement-3);
	border-radius: 0 15px 15px 0;
}

.name_start_foto span {
	width: min-content;
}

.detail_value {
	font-size: 13px;
	font-style: italic;
	line-height: 1;
}

.detail_date {
	font-size: 10px;
	font-weight: bold;
	line-height: 1;
}

.detail_name {
	font-size: 13px;
	line-height: 1;
	font-weight: bold;
}

.link_start {
	background: var(--primary-1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	text-decoration: none;
	gap: 5px;
	box-sizing: content-box;
	color: var(--dark-color);
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	border: none;
	border-radius: 15px;
}
.cb a.link_start > span {
	width: min-content;
}
i.icon_start {
	font-size: 32px;
}

a.link_start span {
	line-height: 1.1;
}

a.link_start:hover {
	color: var(--primary-4);
}

a.link_modal {
	display: block;
	height: 100%;
	width: 100%;
}

a.link_modal:hover {
	cursor: pointer;
}

.block_news_date {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 12px;
	padding: 5px;
	box-sizing: border-box;
	color: var(--white-color);
	background: linear-gradient(to top, var(--dark-color), transparent);
}

.block_news_name {
	position: absolute;
	font-size: 12px;
	line-height: 1;
	padding: 5px;
	background: linear-gradient(to bottom, var(--dark-color), transparent);
	color: var(--white-color);
	text-align: center;
	font-weight: bold;
	width: 100%;
	text-wrap: balance;
	box-sizing: border-box;
}

.block_news_name:hover {
	background: linear-gradient(to bottom, black, transparent);
}

.lenta dialog::backdrop {
	background-color: rgb(0 0 0 / 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.lenta dialog {
	width: 50vw;
	height: 80vh;
	border: 0;
	border-radius: 20px;
	position: relative;
	overflow: hidden;
	padding: 0;
	opacity: 0;
	@media (max-width: 640px) {
		& {
			width: 100vw;
			height: 80svh;
		}
	}
}

.lenta dialog[open]{
	opacity: 1;
}

.lenta dialog img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: -1;
}

.lenta dialog .dialog_block_text {
	position: absolute;
	left: 0;
	margin: auto;
	right: 0;
	bottom: 0;
	width: 100%;
	height: fit-content;
	text-align: center;
	padding: 70px 10px;
	box-sizing: border-box;
	color: var(--white-color);
	background: linear-gradient(to top, black 50%, transparent);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lenta dialog .dialog_block_text h4 {
	font-size: 2rem;
	line-height: 1;
	margin: 0;
}

.lenta dialog .dialog_block_text a {
	color: var(--white-color);
}

.lenta dialog form {
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(to left, black, transparent);
}

.lenta dialog form button {
	font-size: 1rem;
	font-weight: bold;
	background: none;
	color: var(--white-color);
	border: none;
	padding: 1rem;
	line-height: 1;
	text-transform: uppercase;
}

.lenta dialog form:hover {
	background: linear-gradient(to left, black 50%, transparent);
}

.news_podrobnee {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
}
@media (max-width: 640px) {
	.news_podrobnee {
		flex-direction: column;
	}
}

img.image_id_news {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

button.button-close-dialog:focus-visible {
	outline: none;
	background: linear-gradient(to left, var(--secondary-color), transparent);
}



.field_block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.field_name {
	font-size: 16px;
	line-height: 1;
	text-transform: lowercase;
}

.offer_choices {
	display: none;
}
@media (max-width: 640px) {
	.dialog_box > button {
		font-size: 14px;
	}
	.container-start .anons_text {
		font-size: 14px;
	}
}

.js_shop_form_param {
	background: var(--white-color);
	padding: 5px 0;
}

span.price_curr {
	font-size: 9px;
	line-height: 1;
}

.offer-d__count.count-d {
	display: flex;
	gap: 0px;
	align-items: center;
	font-size: 11px;
	line-height: 1;
	flex-direction: column;
}

.tovar_stickers {
	display: flex;
	position: absolute;
	bottom: 95px;
	left: 10px;
	flex-direction: row;
	font-size: 10px;
}

.container-start .tovar_name {
	font-size: 18px;
}

article.element_shop_item.js_shop::before {
	content: '';
	width: 100%;
	height: 85px;
	background: var(--white-color);
	position: absolute;
	bottom: 0;
	border-radius: 0 0 15px 15px;
}

.sticker_new {
	background: mediumpurple;
	color: var(--white-color);
	padding: 5px 10px;
	border-radius: 7px;
}

.sticker_hit {
	background: darkmagenta;
	color: var(--white-color);
	padding: 5px 10px;
	border-radius: 7px;
}

.sticker_action {
	background: orangered;
	color: var(--white-color);
	padding: 5px 10px;
	border-radius: 7px;
}

select.inpselect.js_shop_depend_param {
	border: none;
	font-size: 11px;
	background: var(--dark-color);
	color: var(--white-color);
	padding: 2px;
}

button.button_anons {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 5px;
	border-radius: 7px;
	background: var(--complement-1);
	border: 0;
	color: var(--white-color);
	font-size: 20px;
	transition: .2s;
	will-change: transform;
}
.container-start button.button_anons {
	font-size: 12px;
}

button.button_tocart:hover {
	background: var(--complement-4);
	color: var(--white-color);
	cursor: pointer;
}

button.button_anons:hover {
	cursor: pointer;
	transform: scale(0.9);
	transition: .3s;
}

.menu .link_start {
	background: var(--main-color);
	color: var(--primary-1);
	box-sizing: border-box;
}

.menu .link_start:hover {
	color: var(--white-color);
}

img.img_cat_shop {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.7) brightness(0.8);
		transition: .3s;
}

section.section_shop_home {
	max-width: 1200px;
	display: grid;
	grid-auto-flow: dense;
	grid-template-columns: repeat(7, 1fr);
	gap: 10px;
	@media (max-width:640px) {
		& {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

section.shop_list_cat {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 15px;
}

a.link_cat_shop {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
	z-index: 1;
}

a.link_cat_shop > span {
	background: linear-gradient(to bottom, var(--main-color), var(--primary-3));
	color: var(--white-color);
	padding: 5px 15px;
	display: block;
	width: min-content;
	position: absolute;
	top: 10px;
	left: 10px;
	border-radius: 7px;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1.1;
}

a.link_cat_shop:hover ~ .img_cat_shop {
	filter: saturate(1) brightness(1);
	transition: .3s;
}
section.shop_list_cat::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--primary-1);
	z-index: -1;
}

a.phone_menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 100%;
	background: var(--complement-3);
	color: var(--white-color);
	font-weight: bold;
	text-decoration: none;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	font-family: monospace;
}
a.phone_menu:hover {
	background: var(--primary-3);
}

a.vk_menu {
	background: var(--primary-2);
}

a.mail_menu {
	background: var(--primary-1);
}


.section_list_news {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 10px 0;
	@media (max-width:640px) {
		& {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	@media (min-width:641px) and (max-width:1024px) {
		& {
			grid-template-columns: repeat(3, 1fr);
		}
	}
}

article.element_news {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	outline: 5px solid var(--primary-2);
	transition: .2s;
	box-sizing: border-box;
	aspect-ratio: 1/1;
}

article.element_news > a {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 50px;
	font-size: 17px;
	line-height: 1.1;
	color: var(--white-color);
	text-decoration: none;
	text-align: center;
	padding: 5px 10px;
	background: linear-gradient(to bottom, black, transparent);
	box-sizing: border-box;
	box-sizing: border-box;
}

article.element_news > img {
	object-position: center;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

article.element_news .news_anons {
	position: absolute;
	bottom: 0;
	padding: 10px 10px;
	text-align: center;
	color: var(--white-color);
	background: linear-gradient(to top, black, transparent);
	font-size: 13px;
	line-height: 1.1;
}

section.section_news_cat {
	max-width: 1200px;
}

article.element_news:hover {
	outline: 5px solid var(--primary-1);
	transition: .2s;
}

button.button-switch-dialog {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

button.button_anons > span {
	color: var(--secondary-color);
}

dialog#menucafe {
	width: 80%;
	height: 80%;
	border: none;
	box-sizing: border-box;
}

dialog#menucafe::backdrop {
	background-color: rgb(0 0 0 / 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.auth_block_top {
	background: var(--primary-3);
	height: 40px;
}

.button_userpage, .button_login {
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	width: 40px;
	color: var(--white-color);
	transition: .2s;
}
img.user_avka {
	width: 30px;
	height: 30px;
	display: flex;
	border-radius: 20%;
}
.button_userpage:hover, .button_login:hover {
	cursor: pointer;
	transform: scale(0.9);
	transition: .3s;
}
.dialog_userpage, .dialog_login {
	z-index: 1;
	margin: inherit;
	top: 0px;
	position: absolute;
	inset-inline-start: auto;
	inset-inline-end: 0;
	border: none;
	background: var(--main-color);
	padding: 40px 40px 20px 20px;
	box-sizing: border-box;
}

.dialog_userpage button.button-close-dialog, .dialog_login button.button-close-dialog {
	color: var(--white-color);
	border: none;
	background: none;
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	font-size: 22px;
	line-height: 1;
}

form.profile_form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}

.profile_note {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

input.input_form {
	background: var(--primary-1);
	border: none;
	padding: 10px;
	width: 100%;
	box-sizing: border-box;
	color: var(--white-color);
}

header.block_name {
	font-size: 18px;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 20px;
}

form.reminding_form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

section.section_userpage_home {
	width: 100%;
	max-width: 1200px;
}

.account_list {
	display: grid;
	grid-template-columns: min-content 1fr;
	background: var(--primary-1);
}

.account_details {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 10px;
}

figure.account_avatar {
	margin: 0;
	display: flex;
}

.table_rows_order {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@keyframes fade-in {
	from { opacity: 0; }
}

@keyframes fade-out {
	to { opacity: 0; }
}

@keyframes slide-from-right {
	from { transform: translateY(-50px); }
}

@keyframes slide-to-left {
	to { transform: translateY(50px); }
}

.slide-it {
	view-transition-name: slide-it;
}

::view-transition-old(slide-it) {
	animation: 600ms linear 90ms both fade-out;
}
::view-transition-new(slide-it) {
	animation: 500ms linear 90ms both fade-in;
}


@keyframes scale-out {
from {
	opacity: 0;
	transform: scale(0);
	transform-origin: right top;
}
to {
	opacity: 1;
	transform: scale(1.0);
	transform-origin: right top;
}
}

.scale-menu {
	animation: scale-out 0.3s ease-in;
}
section.section_cart_order {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
h4.heading_done {
	margin: 5px 0;
}
.logo_done_block {
	display: flex;
	flex-direction: column;
	text-align: center;
}

img.logo_done_img {
	width: 100%;
	max-width: 440px;
	height: 100%;
	max-height: 440px;
}

.logo_done_name {
	font-size: 22px;
	line-height: 1;
	font-weight: bold;
}

.start_logo_name {
	font-size: 18px;
    font-weight: bold;
    font-family: 'JetBrains Mono', monospace;
	text-align: left;
	text-transform: inherit; 
    text-shadow: 0px 2px 0px var(--primary-3);
	width: 100%;
	padding: 0 10px;
    margin: 0;
    line-height: 1;
	@media (max-width: 640px) {
		& {
			font-size: 16px;
			text-wrap: balance;
		}
	}
}

img.shop_id_img {
	width: 180%;
	margin-left: -40%;
	margin-top: -40%;
}

section.js_shop_id {
	position: relative;
	max-width: 800px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.js_shop_id .error {
	position: absolute;
	bottom: -20px;
	right: 0;
}
.product_stickers {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 20px;
	text-transform: uppercase;
	font-weight: bold;
	opacity: .8;
}

.price_discount {
	font-size: 9px;
	display: flex;
	align-items: center;
	padding: 0px 10px;
}

a.logo_menu img {
	padding: 2px 5px;
	box-sizing: border-box;
}

.dialog_shop_cat {
    width: 70vw;
    max-width: 1200px;
    height: 80vh;
    border-radius: 10px;
    padding: 0 0 20px 0;
    border: none;
	@media (max-width: 640px) {
		& {
			width: 100%;
			height: calc(100vh - 100px);
			margin: 0;
			top: 80px;
		}
	}
}

.dialog_shop_cat::backdrop {
    background-color: rgb(0 0 0 / 0.7);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}
.dialog_shop_cat_list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin: 20px 20px 0 20px;
	@media (max-width: 640px) {
		& {
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			margin: 10px 10px 0 10px;
		}
	}
}

form.close_dialog_form {
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 1;
}

button.button-close-dialog {
    border: none;
    padding: 7px;
    display: flex;
    background: var(--primary-3);
}

button.button-close-dialog > svg {
    stroke: #fff;
}

button.button-close-dialog:hover {
    cursor: pointer;
}

header.dialog_shop_cat_header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--main-color);
    font-size: 22px;
    color: #fff;
}

.dialog_shop_cat_name {
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog_shop_cat_text {
    margin: 20px;
}

.show_all {
    margin: 20px 20px 0 20px;
    display: flex;
    justify-content: center;
}


/* Анимация открытия */
@keyframes openDialog {
  from {opacity: 0;}
  to {opacity: 1;}
}

.dialog-modal {
  animation-duration: 0.5s; /* Продолжительность анимации */
}

.dialog-modal[open] {
  animation-name: openDialog; /* Имя анимации открытия */
}


.dialog-modal-base {
	transition: display 0.3s allow-discrete, overlay 0.3s allow-discrete;

	animation: closeDialogAdmin .3s forwards;
	&[open] {
		animation: openDialogAdmin .3s forwards;
	}
}
/* Анимация открытия */
@keyframes openDialogAdmin {
	from {
		opacity: 0;
		transform: translateY(100%);
	}
	to {
		opacity: 1;
		transform: translateY(0%);
	}
}
@keyframes closeDialogAdmin {
	from {
		opacity: 1;
		transform: translateY(0%);
	}
	to {
		opacity: 0;
		transform: translateY(100%);
	}
}

.registration_form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 300px;
}

.block_feedback_add {
	max-width: 300px;
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
}

.form_input_block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.feedback_form {
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: var(--white-color);
	padding: 20px;
	background: var(--primary-3);
}

.block_registration_profile {
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
}

.auth_block_top > a {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
}

section.usersettings_edit {
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}

section.cart_autorization {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.note {
	font-size: 20px;
	text-wrap: balance;
	text-align: center;
}

form.usersettings_form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

section.cart_clear_block {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

a.cart_clear_link {
	text-decoration: none;
	background: var(--complement-1);
	color: var(--white-color);
	padding: 10px 20px;
	border-radius: 5px;
}

a.cart_clear_link:hover {
	cursor: pointer;
	background: var(--complement-3);
}

.cart_clear {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cart_clear_text {
	font-size: 30px;
	line-height: 1;
}

a.mail_menu, a.vk_menu {
	color: var(--white-color);
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	height: 100%;
}

a.vk_menu:hover, a.mail_menu:hover {
    background-color: var(--primary-4);
}
img.logo_menu_images {
    width: 40px;
    object-fit: cover;
}
img.icon_menu {
	width: 30px;
	height: 100%;
	@media (max-width: 1024px) {
        & {
			width: 80px;
			height: auto;
		}
    }
}
.dialog_anons {
	text-wrap: balance;
}

.top-right-contact {
    display: flex;
    align-items: center;
	height: 40px;
}


/* стили для страниц с услугами --начало-- */
.hero {
	max-width: 1024px;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: auto;
	position: relative;
}
.hero img {
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	filter: saturate(0.3);
	clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.hero-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;
	text-align: center;
	text-wrap: balance;
	align-items: center;
	gap: 20px;
}
.hero-text h1 {
	font-size: 40px;
	margin: 0;
	line-height: 1;
	font-family: inherit;
	@media screen and (max-width: 768px) {
		& {
			font-size: 30px;
		}
	}
}
.hero-text h1 span {
	color: var(--primary-1);
}

section.bg_container h2 {
	font-size: 33px;
	text-align: center;
	font-family: inherit;
	margin: 20px 0px;
	text-wrap: balance;
	@media screen and (max-width: 768px) {
		& {
			font-size: 28px;
		}
	}
}

section.bg_container h3 {
	font-size: 33px;
	text-align: center;
	font-family: inherit;
	margin: 20px 0px;
	text-wrap: balance;
	@media screen and (max-width: 768px) {
		& {
			font-size: 28px;
		}
	}
}
.hero-text p {
	margin: 0;
	font-family: 'Arsenal';
	font-size: 33px;
	line-height: 1;
	color: var(--complement-1);
	@media screen and (max-width: 768px) {
		& {
			font-size: 23px;
		}
	}
}

/*.hero::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 25%;
	background: linear-gradient(to top, white 25%, transparent);
}


.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 25%;
	background: linear-gradient(to bottom, var(--white-color) 0%, transparent);
}
@media screen and (max-width: 768px) {
	.hero::after {
		height: 50%;
	}
	.hero::before {
		background: linear-gradient(to bottom, var(--main-color) 0%, transparent);
	}
}*/
.bg_container {
    padding: 1rem;
}
.bg_card {
    	border: 1px solid #e0e0e0;
    		border-radius: 8px;
    		padding: 1rem;
    		text-align: center;
    		display: grid;
    		grid-template-columns: 1fr 3fr;
    		max-width: 768px;
    		margin: auto;
    	@media screen and (max-width:440px) {
    		& {
    			grid-template-columns: 1fr;
    		}
    	}
}
.bg_card img {
	width: 100%;
	max-width: 320px;
	height: auto;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}
.bg_card h3 {
    margin-bottom: 0.5rem;
}
.bg_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    @media screen and (max-width:1366px) {
    	& {
    		gap: 10px;
    	}
    }
}
.animate {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease-in-out;
}
.animate-visible {
    opacity: 1;
    transform: translateY(0);
}
@media screen and (max-width: 768px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .hero img {
        width: 100%;
        height: auto;
    }
}

.zov {
	font-size: 24px;
	font-style: italic;
	text-align: center;
	max-width: 800px;
	margin: auto;
	text-wrap: balance;
	@media screen and (max-width: 768px) {
		& {
			font-size: 18px;
		}
	}
}

/* стили для страниц с услугами --конец-- */





button.prev-dialog {
	width: 50%;
	position: absolute;
	bottom: 0;
	left: 0;
	background: var(--primary-3);
	color: var(--white-color);
	padding: 5px 0;
	border: none;
	height: 50px;
	border-top: 4px solid #666666;
	border-right: 2px solid #666666;}

button.next-dialog {
	width: 50%;
	position: absolute;
	right: 0;
	bottom: 0;
	background: var(--primary-2);
	color: var(--white-color);
	padding: 5px 0;
	border: none;
	height: 50px;
	border-top: 4px solid #666666;
	border-left: 2px solid #666666;
}

button.prev-dialog:hover {
	background: var(--primary-4);
}

button.next-dialog:hover {
	background: var(--primary-4);
}

a.link_menu span {
	width: min-content;
	line-height: 0.8;
	@media screen and (max-width: 1024px) {
		& {
			line-height: 1;
			text-align: center;
			font-size: 14px;
			text-transform: uppercase;
			font-weight: bold;
		}
	}
}

.bg_card h4 {
	font-size: 24px;
}


.start-text-block {
	display: grid;
	grid-template-columns: 1fr auto;
	@media screen and (max-width:1024px) {
		& {
			grid-template-columns: 1fr;
		}
	}
}

img.video-camera {
	position: relative;
	margin-right: -25px;
	max-width: 600px;
	min-width: 300px;
	object-fit: contain;
	height: fit-content;
	width: 100%;
	@media screen and (max-width: 1024px) {
		& {
			filter: none;
		}
	}
} 

.start-img::before {
	content: '';
	width: 100%;
	min-width: 320px;
	max-width: 580px;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background: url(https://bg.net.ru/userfls/site/theme/logo_form1.png);
	background-repeat: no-repeat;
	background-size: contain;
	border-radius: 0;
}

.start-img {
	position: relative;
	display: flex;
	justify-content: flex-end;
	@media screen and (max-width: 1024px) {
		& {
			display: block;
			height: 60vh;
		}
	}
}

.start-text-container {
	max-width: 590px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
	align-items: center;
	text-wrap: balance;
}
.start-text {
	display: flex;
	justify-content: center;
	padding: 20px 0;
}

.start-text-container h2 {
	font-size: 44px;
	line-height: 1;
	text-wrap: balance;
}

.heading-services {
	font-size: 24px;
	font-weight: bold;
}

ul.list-services {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 25px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-wrap: balance;
	line-height: 1;
	font-weight: bold;
	font-family: "Arsenal", sans-serif;
	@media screen and (max-width: 1280px) {
		& {
			font-size: 24px;
			padding: 0 0 0 20px;
		}
	}
}

.slogan-services {
	font-size: 21px;
	text-wrap: balance;
	outline: 1px solid #ededed;
	border-radius: 30px;
	padding: 10px 0;
	background: linear-gradient(to left, transparent 20%, #99999940, transparent 80%);
	@media screen and (max-width: 1280px) {
		& {
			font-size: 20px;
		}
	}
}

.sloggan-contacts {
	font-size: 24px;
	font-weight: bold;
	text-wrap: balance;
	@media screen and (max-width: 1280px) {
		& {
			font-size: 20px;
		}
	}
}

.start-phone a {
	text-decoration: none;
	font-size: 33px;
	color: var(--complement-1);
	display: flex;
	align-items: center;
	gap: 10px;
}

.start-phone {
	display: flex;
	font-weight: bold;
}

svg.phone_icon {
	width: 40px;
	height: 40px;
}

ul.list-services a {
	color: var(--complement-1);
	text-decoration: none;
}

ul.list-services a:hover {
	color: var(--complement-2);
	text-decoration: underline;
	cursor: pointer;
}

.obrabotka_danih a {
	color: var(--white-color);
}


.dialog-modal-base::backdrop {
	background-color: rgb(0 0 0 / 0.6);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.dialog-modal-base {
	border: none;
	padding: 0;
	width: 100%;
	margin: 0;
	height: calc(100% - 40px);
	top: 40px;
	max-width: 500px;
	max-height: 100%;
	background: #000000de;
	box-sizing: border-box;
	scrollbar-width: thin;
	overscroll-behavior: none;
}

.dialog-modal-layer {
	border: none;
	padding: 50px 0 0 0;
	width: 100%;
	margin: 0;
	height: calc(100% - 40px);
	top: 40px;
	max-width: 100%;
	max-height: 100%;
	background: var(--dark-color);
	box-sizing: border-box;
}

button.button-close-dialog-admin {
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	display: grid;
	position: relative;
}

button.button-close-dialog-admin > span:nth-child(1) {
	display: block;
	width: 2px;
	height: 40px;
	background: var(--white-color);
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

button.button-close-dialog-admin > span:nth-child(2) {
	display: block;
	width: 2px;
	height: 40px;
	background: var(--white-color);
	transform: rotate(-45deg);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

.dialog-modal-base form.close_dialog {
	position: absolute;
	top: 5px;
	right: 5px;
}

button.button-close-dialog-admin:focus {
	border: none;
	background: var(--primary-4);
}

.dialog-modal-base header {
	width: 100%;
	position: sticky;
	top: 0;
	left: 0;
	height: 50px;
	/* color: var(--white-color); */
	text-transform: uppercase;
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	/* background: var(--primary-3); */
	z-index: 1;
	text-align: center;
}

.activity_header_modal-number-date {
	font-size: 10px;
}
.activity_header_modal-name {
	font-weight: bold;
}
section.grid_menu_admin {
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 5px;
	gap: 5px;
}

a.link_menu_admin {
	display: flex;
	align-items: center;
	font-size: 20px;
	gap: 20px;
	padding: 10px;
	background: var(--primary-4);
	color: var(--white-color);
	text-decoration: none;
}

img.icon_menu_admin {
	width: 48px;
	height: auto;
}

a.link_menu_admin:hover {
	background: var(--primary-3);
}
.grid_menu_admin .active {
	display: flex;
	align-items: center;
	font-size: 20px;
	gap: 20px;
	padding: 10px;
	background: var(--secondary-color);
	color: var(--white-color);
}

article.actions {
	position: relative;
	height: 100px;
	width: 100%;
	background: var(--light-gray);
	color: var(--dark-color);
	display: grid;
	grid-template-columns: auto 1fr 120px;
	border-radius: 10px;
}

.actions_name {
	display: flex;
	text-wrap: balance;
	font-size: 12px;
	line-height: 1.3;
	padding-left: 10px;
	align-items: flex-start;
	width: auto;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

article.actions > img {
	width: 100px;
	height: 100px;
	margin-top: 0px;
	margin-left: 0px;
	border-radius: 10px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transform: scale(0.9);
	transition: .2s;
	background: #fff;
	padding: 5px;
	box-sizing: border-box;
}

article.actions > img:hover {
	transform: scale(0.9) rotate(-5deg) translateX(-10px) translateY(-10px);
	transition: .3s;
	z-index: 1;
}

.actions .error {
	color: var(--complement-2);
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	text-wrap: balance;
	text-transform: lowercase;
	line-height: 1;
}

.link_modal_admin {
	background: none;
	border: none;
	padding: 0;
}

.error a {
	color: var(--complement-2);
}

.link_modal_feedback {
	background: var(--primary-3);
	color: var(--white-color);
	border: 0;
	padding: 5px 20px;
	font-size: 16px;
	line-height: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	font-weight: bold;
	border-radius: 10px;
	margin-left: auto;
	margin-right: auto;
	width: auto;
	align-items: center;
	transition: .5s;
	font-family: monospace;
	@media screen and (max-width: 400px) {
		& {
			flex-direction: row;
			gap: 10px;
		}
	}
}

.link_modal_feedback:hover {
	background: var(--complement-2);
	transition: 1s;
}

.actions img ~ .actions_name {
	padding-left: 0;
}

header.block_name_admin {
	font-family: 'Alumni Sans';
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
}

.bg_flex {
	max-width: 1024px;
	margin: auto;
	gap: 10px;
	display: flex;
	flex-direction: column;
}

.bg_card_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}



/*.element_details > div {
	width: 100%;
}*/

section.clients_list {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	gap: 10px;
	@media screen and (max-width:1680px) {
		& {
			grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		}
	}
	@media screen and (max-width:1366px) {
		& {
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}
	}
	@media screen and (max-width:1024px) {
		& {
			grid-template-columns: 1fr 1fr 1fr;
		}
	}
	@media screen and (max-width:800px) {
		& {
			grid-template-columns: 1fr 1fr;
		}
	}
	@media screen and (max-width:440px) {
		& {
			grid-template-columns: 1fr;
		}
	}
}

.element_details {
	position: relative;
	display: grid;
	grid-template-rows: 2fr 2fr 1fr 1fr 1fr 1fr 60px;
	gap: 5px;
	height: 100%;
	max-height: 220px;
	@media screen and (max-width:1024px) {
		& {
			gap: 5px;
		}
	}
}

.detail_actions {
	width: max-content !important;
	position: absolute;
	right: 0;
	display: none;
	top: 0;
	gap: 10px;
}
article.element_clients_item:hover .detail_actions {
	display: grid !important;
}

.detail_actions > a:hover {
	color: var(--white-color);
}
.fio_client {
	max-width: 80%;
		height: 40px;
		display: flex;
		align-items: center;
}
.status_client {
	position: absolute;
	bottom: 0;
	left: 0;
	width: max-content !important;
	display: grid !important;
}
.adress_client {
	height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

article.element_clients_item.js_clients {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: var(--dark-color);
	padding: 10px;
	border-radius: 10px;
	transition: .5s;
	@media screen and (max-width:640px) {
		& {
			font-size: 14px;
		}
	}
}

.detail_actions a {
	color: var(--primary-1);
}

article.element_clients_item.js_clients:hover {
	background: var(--primary-4);
	color: var(--white-color);
	transition: 1s;
}

article.element_clients_item.js_clients.status_dealdone:hover {
	background-color: var(--primary-4) !important;
	transition: 1s;
}

.block_clients_add {
	color: var(--white-color);
	padding: 20px;
}

.block_clients_add > form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

select.inpselect {
	width: 100%;
	height: 30px;
	background: var(--primary-1);
	color: var(--white-color);
	font-size: 12px;
}

input.clients_input {
	width: 100%;
	height: 30px;
	background: var(--primary-1);
	color: var(--white-color);
	font-size: 15px;
	border: none;
	padding: 0;
}

.button_form_client {
	background: var(--complement-1);
	color: var(--white-color);
	border: 0;
	padding: 10px 20px;
	font-size: 18px;
	line-height: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5px;
	width: max-content;
	font-weight: bold;
	border-radius: 5px;
}

.error_message {
	color: var(--complement-2);
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	text-wrap: balance;
	text-transform: lowercase;
	line-height: 1;
}

.fio_client > a {
	color: var(--color-white);
	font-weight: bold;
}

.callback_form {
	display: flex;
	justify-content: center;
	margin: 20px 0 10px 0;
	gap: 20px;
	flex-direction: column;
	align-items: center;
}




.remains_table {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.remains_item {
	display: grid;
	grid-template-columns: 1fr 70px;
	background: var(--status-completed);
	padding: 15px 10px;
	box-sizing: border-box;
	border-radius: 5px;
}

.remains_item:hover {
	filter: invert(1);
}

.remains_item.remains_zero {
	background: var(--light-red);
}
.remains_item.remains_one {
	background: var(--status-in-progress);
}
.remain_item_name {
	text-wrap: balance;
}

.remain_item_instock {
	font-weight: bold;
}

article.activity_comments_user {
	background: var(--light-gray);
	padding: 10px;
	box-sizing: border-box;
	border-radius: 10px;
	position: relative;
}

section.activity_comments_block {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.task {
	margin: 10px 0;
	scale: .97;
}

.activity_material_dialog {
	z-index: 1;
}

.net_kartinki {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--white-color);
	transform: scale(0.9);
	border-radius: 10px;
	height: inherit;
	color: var(--primary-1);
}

article.actions:hover {
	outline: 1px dashed;
}

.js_shop_buy:hover {
	background: var(--primary-1);
}


article.activity_user {
	color: var(--white-color);
	padding: 10px;
	font-size: 18px;
	text-wrap: balance;
	display: flex;
	flex-direction: column;
	gap: 20px;
}


/* Скрываем элементы на экране (для пользователя) */
@media screen {
    .hidden_block {
        display: none;
    }
}

/* Оставляем элементы видимыми только при печати (для PDF) */
@media print {
    .hidden_block {
        display: block !important; /* Важно использовать !important, чтобы переопределить display: none; */
    }
}

.material_table {
	font-size: 13px;
	margin: 10px 10px;
}

.material_table td, .material_table th {
	padding: 5px;
}

.material_table tbody tr:hover {
	background: var(--primary-4);
}

.button_count:hover {
	background: var(--white-color);
}

.style_status_3 {
	background-color: var(--status-new-action);
}
.style_status_4 {
	background-color: var(--status-new-task);
}
.style_status_5 {
	background-color: var(--status-in-progress);
}
.style_status_6 {
	background-color: var(--status-completed);
}
.style_status_7 {
	background-color: var(--status-commercial-offer);
}
.style_status_8 {
	background-color: var(--status-invoice);
}
.style_status_9 {
	background-color: var(--status-act-of-work);
}
.style_status_10 {
	background-color: var(--status-acceptance);
}
.style_status_11 {
	background-color: var(--status-warehousing);
}
.style_status_12 {
	background-color: var(--status-cost-sheet);
}
.style_status_13 {
	background-color: var(--status-write-off);
}

.link_modal_activtiy {
	color: var(--dark-color);
	position: relative;
	border: none;
	padding: 10px;
	border-radius: 10px;
	margin: 0;
	width: 100%;
	height: 180px;
	display: grid;
	grid-template-columns: 1fr;
	font-family: 'Roboto Condensed';
	font-size: 14px;
}

.link_modal_activtiy:hover {
	filter: invert(1);
}

.activity_phone_dialog_icon {
	fill: #fff;
	height: 32px;
	width: 32px;
}

.activity_phone {
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
}

.activity_block_space {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* или конкретная высота */
}

.activity_row_comments {
	text-align: left;
	background: linear-gradient(to right, white, transparent);
	padding: 5px;
	border-radius: 10px;
}

.activity_phone a {
	display: flex;
	background: var(--white-color);
	padding: 10px;
	box-sizing: border-box;
	border-radius: 50%;
	color: var(--dark-color);
}

.activity_comments {
	border-radius: 0 30px 30px 30px;
	outline: 10px double var(--primary-2);
	padding: 10px 10px 10px 15px;
	line-height: 1.2;
	text-wrap: balance;
	margin: 30px 20px;
	display: grid;
	font-size: 12px;
}

.activity_comments:hover {
	outline: 10px double var(--primary-1);
}

.activity_left-top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: flex-start;
	height: 100%;
	justify-content: space-between;
}

.activity_right-bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		justify-content: space-around;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: black white;
		text-wrap-style: balance;
}
.activity_stat {
	text-align: left;
	display: flex;
	flex-direction: row;
	gap: 7px;
	align-items: flex-start;
}

.activity_fio_created_activity {
	font-size: 13px;
	display: flex;
	flex-direction: column;
	max-width: 390px;
	width: 100%;
	text-align: center;
}

.activity_phone_dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.activity_phone_dialog a {
	color: var(--color-wite);
	text-decoration: none;
	font-size: larger;
}

.activity_performers {
	font-size: 13px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 390px;
	width: 100%;
	text-align: center;
}

.activity_params > form {
	display: contents;
}

.activity_params {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

button.pdf_button {
	border: none;
	padding: 5px 10px;
	font-size: 11px;
	color: var(--dark-color);
}

.activity_pdf_button {
	display: flex;
	gap: 5px;
	justify-content: center;
}

.pdf_button_save {
	background: var(--white-color);
}

.pdf_button_open {
	background: var(--light-gray);
	@media screen and (max-width:800px) {
		display: none;
	}
}

.pdf_button_share {
	background: var(--gray);
	@media screen and (min-width:800px) {
		display: none;
	}
}

button.pdf_button:hover {
	filter: sepia(1);
}

.clear_form_button {
	display: flex;
	justify-content: center;
}

.cart_clear_block .link_modal_admin {
	background: var(--complement-2);
	border: none;
	padding: 10px;
	border-radius: 10px;
	color: #fff;
	font-size: 16px;
}

.cart_clear_block .link_modal_admin:hover {
	background: var(--complement-1);
}

section.menu_tovar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 10px;
	background: #fff;
}

.inner-dialog {
	background: var(--white-color);
}

.link_userpage {
	width: 40px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
}

.button_menu_admin {
	display: flex;
	align-items: center;
	font-size: 20px;
	gap: 10px;
	padding: 10px;
	background: var(--primary-4);
	color: var(--white-color);
	text-decoration: none;
	border: none;
	width: 100%;
	min-height: 120px;
	flex-direction: column;
	justify-content: space-evenly;
}

.button_menu_admin:hover {
	background: var(--primary-3);
}

.activity_contragent {
	position: absolute;
	bottom: 0px;
	left: 0px;
	font-size: 10px;
	font-family: monospace;
	background: linear-gradient(to right, white, transparent);
	width: max-content;
	padding: 3px 10px;
	text-align: left;
	border-radius: 10px;
}

.change_container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 440px;
	width: 100%;
	padding: 10px;
	margin: 0 10px;
	background: var(--primary-4);
	box-sizing: border-box;
}

.activity_clients_full {
	font-size: 13px;
	display: flex;
	gap: 5px;
	flex-direction: column;
	max-width: 390px;
	width: 100%;
	text-align: center;
}

.main-dialog > header, .inner-dialog > header {
	background: var(--primary-3);
	color: var(--white-color);
}

button.save_button {
	border: none;
	padding: 5px;
	border-radius: 5px;
	background: var(--complement-1);
	color: var(--white-color);
}

button.save_button:hover {
	background: var(--complement-2);
}

svg.comment_activity_icon {
	opacity: .7;
	width: 15px;
	height: 15px;
}

textarea.input_textarea {
	width: 100% !important;
	min-height: 100px;
	max-width: 100%;
}

.actions_client_block {
	display: flex;
		flex-direction: row;
		gap: 5px;
		padding: 0;
		align-items: center;
		font-size: 12px;
}

a.actions_client span {
	display: flex;
	gap: 10px;
}

a.actions_client {
	background: var(--complement-1);
	color: var(--white-color);
	padding: 5px 10px;
	border-radius: 5px;
	text-decoration: none;
	width: 100%;
}

a.actions_client:hover {
	background: var(--complement-2);
}

section.section_clients_id {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 20px;
	@media screen and (max-width:640px) {
		& {
			grid-template-columns: 1fr;
		}
	}
}

.params_client_block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.param_client {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	background: linear-gradient(to left, transparent, var(--light-gray), transparent);
	padding: 10px;
}

span.param_client_name {
	text-align: right;
}

.partner_conteiner {
	width: 100%;
	max-width: 640px;
}

select.partner_select.inpselect {
	font-size: 12px;
}

.button_admin_menu_block {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	gap: 5px;
	box-sizing: border-box;
	padding: 0px 5px;
}

.button_admin_menu_block button span {
	width: min-content;
	font-size: 13px;
	line-height: 1.1;
}

.link_admin_menu_block {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 5px;
	box-sizing: border-box;
}

.current_date_time {
	padding: 10px 15px 10px 5px;
	background: linear-gradient(to left, var(--primary-2), transparent);
	color: var(--white-color);
	text-align: right;
	position: absolute;
	top: 0;
	right: 0;
	height: 20px;
	font-size: 13px;
	display: flex;
	font-family: 'Roboto Condensed';
	align-items: center;
}

.thanks_block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 40px;
}

.thanks_block h2 {
	font-family: sans-serif;
	text-wrap: balance;
}

.activity_clients_full a {
	text-decoration: none;
	color: var(--white-color);
	font-weight: bold;
}

.activity_clients_full::before {
	content: 'Контрагент';
	text-decoration: underline;
}

.auth_block_top .main-dialog {
	background: var(--white-color);
}

.status_new {
	background-color: var(--status-new-task);
}
.status_proposal_sent {
	background-color: var(--status-completed);
}
.status_negotiation {
	background-color: var(--status-act-of-work);
}
.status_dealdone {
	background-color: var(--status-new-action);
}
.status_dealnotdone {
	background-color: var(--status-in-progress);
}
.status_unknown {
	background-color: var(--light-gray);
}

.search_row {
	width: 100%;
	padding-left: 30px;
	box-sizing: border-box;
	margin: 0;
	height: 30px;
	font-size: 13px;
	line-height: 1;
	background: lightgray;
	border-radius: 10px;
	border: none;
	outline: 1px solid var(--primary-1);
}
.search_row:focus {
	outline: 2px solid var(--primary-1);
}

.actions_name em {background: white;padding: 0 10px;}

.field_list {
	display: flex;
	flex-direction: column;
	gap: 7px;
}


.filter_calendar {
	display: flex;
	gap: 5px;
}

.filter_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr) repeat(2, auto);
	width: 100%;
	height: 40px;
	gap: 5px;
	@media screen and (max-width:860px) {
		grid-template-columns: repeat(3, min-content) auto min-content;
	}
}

.filter_calendar_start {
	display: flex;
	width: 100%;
	height: 100%;
}

.filter_calendar_end {
	display: flex;
	width: 100%;
	height: 100%;
}

.filter_grid > div {
	background: var(--gray);
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	@media screen and (max-width:860px) {
		& {
			flex-direction: column;
		}
	}
}
.filter_grid > div > input {
	display: none;
}

.filter_grid > div > label {
	font-size: 12px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media screen and (max-width:860px) {
	.filter_grid > div > label span {
		display: none;
	}
}

.filter_status {
	position: relative;
}

.filter_status_menu {
	top: 45px;
	left: -273px;
	width: 280px;
	border: none;
	background: var(--gray);
	z-index: 1;
}
.filter_calendar input {
	border: none;
	margin: 0;
	padding: 0 5px;
	font-size: 11px;
	width: 100%;
}

.filter_calendar label {
	font-size: 11px;
}

.filter_status button {
	display: grid;
	border: none;
	background: none;
	margin: 0;
	padding: 0;
}

button.button_close_dialog {
	position: absolute;
	top: 10px;
	right: 10px;
}

.filter_grid > div > input:checked ~ label {
	background: var(--light-red);
}
section.activity_comments_block.old_version {
	gap: 15px;
}

.activity_work {
	text-align: left;
	text-wrap: balance;
}

.activity_client {
	text-align: left;
	text-wrap: balance;
	display: flex;
	flex-direction: column;
	gap: 5px;
	line-height: 1;
}

.date_done_input {
	width: 100%;
	box-sizing: border-box;
	height: 30px;
	background: var(--primary-1);
	color: var(--white-color);
	border: none;
}

.cart_form_block input, .cart_form_block textarea {
	color: white;
}

svg.icon_add_client path {
	stroke: white;
}

button.dialog-opener.link_modal_feedback span {
	width: min-content;
	text-transform: capitalize;
	font-family: monospace;
	font-weight: 400;
	text-align: left;
}

button.dialog-opener.link_modal_feedback:hover span {
	font-weight:  bold;
}

svg.icon_add_client {
	outline: 1px solid;
	border-radius: 50%;
	padding: 5px;
	background: radial-gradient(var(--complement-1) 0%, transparent 70%);
	@media screen and (max-width:400px) {
		height: 40px;
		width: 40px;
	}
}

.search-container {
	position: sticky;
	top: 45px;
	display: inline-block;
	z-index: 12323412412;
	width: 100%;
}

.search-container::before {
    content: '\f002'; /* Код иконки поиска из шрифта FontAwesome */
    font-family: 'FontAwesome';
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #999; /* Цвет иконки */
}
.search_row_item::before {
	content: '\f002';
	font-family: 'FontAwesome';
	position: absolute;
	top: 62%;
	left: 17px;
	transform: translateY(-50%);
	color: #999;
}

.search_row_item {
	display: grid;
	width: 90%;
	box-sizing: border-box;
	padding: 10px 10px 0px 10px;
	position: sticky;
	top: 0;
	z-index: 1;
}

img.ava_client_card {
	width: 40%;
	position: absolute;
	bottom: 0;
	right: 0;
	height: auto;
	border-radius: 50% 0 0 0;
	aspect-ratio: 1 / 1;
	outline: 5px solid white;
	filter: saturate(0.3);
	transition: .3s;
	object-fit: cover;
	object-position: center;
}
article.element_clients_item:hover img.ava_client_card {
	filter: saturate(1);
	transition: .3s;
}

section.client_data {
	display: flex;
	flex-direction: row;
	gap: 10px;
	@media screen and (max-width:1024px) {
		flex-direction: column;
	}
}

section.client_data > div {
	width: 100%;
	height: 200px;
	background: var(--light-gray);
	border-radius: 10px;
	box-sizing: border-box;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.clients_left_top {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.prevnext_client {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

img.client_id_ava {
	border-radius: 10px;
	width: 100%;
	aspect-ratio: 1 / 1;
	height: auto;
	object-fit: cover;
	object-position: center;
}

.clients_right_bottom {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

section.client_scheme {
	max-width: 1024px;
	display: flex;
	flex-direction: column;
	background: var(--white-color);
	padding: 20px;
	border-radius: 10px;
	justify-content: center;
	align-items: center;
	outline: 2px solid;
	gap: 10px;
}
img.client_scheme_img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.client_scheme_images {
	display: flex;
	flex-direction: row;
	gap: 10px;
}

.client_scheme_images img {
	max-width: 320px;
}

section.client_data > div:hover {
	background: var(--gray);
	transition: .3s;
}


section.expenses_form_block {
	color: var(--dark-color);
	background: var(--white-color);
	height: inherit;
	padding: 0 10px;
}

section.all_block_car {
	max-width: 1024px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

img.garage_car {
	width: 100%;
	height: auto;
	max-width: 640px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
section.garage_car_block {
	position: relative;
	outline: 1px solid;
	border-radius: 10px;
	padding: 20px;
}


section.garage_cat_id {
	max-width: 1024px;
	margin: auto;
}

.expenses_car_block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.expenses_car_item {
	background: var(--light-gray);
	padding: 10px;
	border-radius: 10px;
}

.expenses_car_item:hover {
	background: var(--status-new-action);
}

section.garage_cat_id h2 {
	margin-bottom: 10px;
}

section.garage_cat_id h3 {
	margin-bottom: 10px;
	margin-top: 10px;
}

section.garage_car_block header {
	font-size: 24px;
}

.car_expenses {
	position: absolute;
	top: 60px;
	display: flex;
	flex-direction: column;
}

.input_container {
	display: flex;
	flex-direction: column;
}

.expeses_input_block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

button.button_form_add {
	background: var(--complement-1);
	color: var(--white-color);
	border: 0;
	padding: 10px 20px;
	font-size: 18px;
	line-height: 1;
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 5px;
	width: max-content;
	font-weight: bold;
	border-radius: 5px;
}

textarea.textarea_form {
	width: 100%;
	height: 100px;
	background: var(--primary-1);
	border: 0;
}

.expenses_list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

section.cost_list {
	width: 100%;
	max-width: 1024px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

article.expenses_block {
	display: grid;
	grid-template-columns: 3fr 1fr;
	background: var(--light-red);
	padding: 10px;
	box-sizing: border-box;
	border-radius: 10px;
}



svg.icon_service {
	height: 40px;
	width: 40px;
	@media screen and (max-width:440px) {
		& {
			height: 30px;
			width: 30px;
		}
	}
}

.sevice_list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	text-align: left;
}

.sevice_list_name {
	display: flex;
	align-items: center;
	font-size: 22px;
	line-height: 1;
	@media screen and (max-width:440px) {
		& {
			font-size: 18px;
		}
	}
}

.service_block_item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 10px;
}

.service_block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

h2.service_block_name {
	font-size: 24px;
}

textarea.clients_textarea {
	width: 100%;
	height: 100px;
	background: var(--primary-1);
	color: var(--white-color);
}

.video-goods, .domofon-goods, .network-goods, .power-goods, .electrics-goods, .dop-zarabotok, .final-result {
	grid-column: 1 / 4;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	background: var(--light-gray);
	padding: 20px;
	box-sizing: border-box;
	border-radius: 20px;
	@media screen and (max-width:860px) {
		& {
			grid-column: 1;
		}
	}
}

input.form_new_button_cart {
	border: none;
	border-radius: 0;
	padding: 7px 10px;
	font-size: 11px;
	background: var(--white-color);
	color: var(--dark-color);
	text-transform: capitalize;
}

.count-active {
	grid-column: 1 / 4;
	display: grid;
	text-align: center;
	grid-auto-flow: column;
	background: var(--light-gray);
	padding: 20px;
	box-sizing: border-box;
	border-radius: 20px;
	gap: 5px;
	@media screen and (max-width:860px) {
		& {
			grid-column: 1;
			text-align: left;
			grid-auto-flow: row;
		}
	}
}


#cookieNotice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #333;
    color: white;
    padding: 5px;
    text-align: center;
    font-family: Arial, sans-serif;
    z-index: 9999;
    font-size: 12px;
}

#cookieNotice a {
    color: #fff;
  	text-decoration: underline;
    font-size: 12px;
}

#cookieNotice button {
    background: #a00000;
    color: white;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 3px;
}

.tel_footer a {
	color: #fff;
}

.block_contacts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	@media screen and (max-width:860px) {
		& {
			grid-template-columns: 1fr;
		}
	}
}

.cantacts_item {
	text-wrap-style: balance;
	display: flex;
	align-items: center;
	justify-content: center;
}
.flex_box {display: flex;width: 50%;flex-direction: column;gap: 10px;}

.flex_box > div {
	margin-left: 20px;
}

section.bg_services_price h3 {
	font-size: 33px;
	text-align: center;
	font-family: inherit;
	margin: 20px 0px;
	text-wrap: balance;
}

section.bg_services_price {
	max-width: 1024px;
	margin: auto;
}

.bg_services_block {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bg_services_item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 16px;
	background: #eee;
	padding: 5px 10px;
	border-radius: 10px;
	@media screen and (max-width:440px) {
		& {
			font-size: 14px;
		}
	}
}

.bg_services_item:hover {
	background: var(--light-gray);
}

@media screen and (max-width:440px) {
	.bg_services_item > span:last-child {
		width: 170px;
		text-align: right;
	}
}

section.clients_list .link_modal_feedback, section.cost_list .link_modal_feedback {
	width: 100%;
}

.breadcrumbs-d a {
	color: white;
	font-size: 14px;
}

section.section_clauses_home {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px 10px;
	max-width: 1024px;
	margin-top: 40px;
	margin-bottom: 40px;
	margin-left: auto;
	margin-right: auto;
	@media screen and (max-width:1024px) {
		& {
			grid-template-columns: 1fr 1fr;
		}
	}
	@media screen and (max-width:440px) {
		& {
			grid-template-columns: 1fr;
		}
	}
}

section.section_main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: sepia(0.5);
}

section.section_main ._images {
	clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
	aspect-ratio: 1 / 1;
}

section.section_clauses_home .section_name a {
	font-size: 23px;
	line-height: 1;
	color: black;
}

section.section_clauses_home .section_main {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

section.section_clauses_home .section_main:hover img {
	filter: sepia(1);
}

section.section_clauses_home .section_main:hover a {
	font-weight: bold;
}

section.section_clauses_home .section_main:hover h1 {
	color: var(--complement-2);
}

section.section_clauses_home .anons_text h1 {
	font-size: 18px;
	line-height: 1.1;
}

section.section_clauses_home .anons_text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

section.maxwidth {
	max-width: 1024px;
	margin: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}