:root {
	--color-black: #000;
	--color-white: #fff;

	--color-gray-light: #e8eaea;
	--color-gray: #c4c5c6;

	--color-green: #42946d;
	--color-blue: #2e4999;

	--color-pink: #e78fbc;
	--color-orange: #eb6209;
}

header {
	.top-line {
		background: var(--color-green);
		border-bottom: none;

		.lang {
			ul {
				li {
					background-color: var(--color-green);
					border-bottom-color: #45b37f;
				}
			}
		}
	}

	.middle-box {
		.table-container {
			.col {
				&.logo {
					width: 230px;
				}

				&.search {
					form {
						margin: 0 auto;

						.inp-search {
							border: 3px solid var(--color-blue);
						}

						button {
							i {
								color: var(--color-blue);
							}
						}
					}
				}

				&.icons {
					a {
						.image {
							margin: 0;
							color: var(--color-blue);
							background: var(--color-gray-light);
						}
					}
				}
			}
		}
	}
}

body {
	.sb-slidebar {
		background-color: var(--color-green);

		ul {
			border-top-color: #3ebc80;
			border-bottom-color: #357155;

			li {
				border-top-color: #3ebc80;
				border-bottom-color: #357155;

				a {
					&.toggler {
						&.is-active {
							background-color: #3ebc80;
						}
					}
				}

				ul {
					border-top-color: #357155;
				}
			}
		}
	}
}

section {
	.layout-center {
		#main {
			nav {
				& > ul {
					& > li {
						&:hover {
							background: transparent;
							& > a {
								background: var(--color-gray-light);
							}
						}

						& > a {
							background-image: url("/templates/images/pictograms/arrow-right.png");
							border-bottom-color: var(--color-gray);
							background-color: white !important;
						}

						& > ul {
							background: var(--color-gray-light) !important;
						}
					}
				}

				.tabs {
					border-bottom: none;

					a {
						color: var(--color-black);
						background: var(--color-gray-light);

						&:hover {
							background: var(--color-gray);
						}

						&.blue {
							color: var(--color-white);
							background: var(--color-blue);

							&:hover {
								background: #2a4185;
							}
						}
					}
				}
			}

			.breadcrumbs {
				a {
					color: black;
				}

				&>div ul li {
					background-image: url("/templates/images/breadcrumbs-black.png");

					&:first-child {
						background-image: none !important;
					}
				}
			}

			.detail-menu {
				.collapse-button {
					background-color: var(--color-gray-light);
					color: black;

					&:hover {
						background-color: var(--color-gray);
					}
				}
			}

			.filter-box {
				.gray {
					background: var(--color-gray-light);

					a.button {
						color: var(--color-blue) !important;
						border: 1px solid var(--color-blue) !important;
						background: white;

						&:hover {
							background: var(--color-blue) !important;
							color: white !important;
						}
					}

					.custom-checkbox input[type=checkbox]:checked+span:after {
						color: black !important;
					}
				}

				.cont {
					border-top: none;
				}

				.noUi-connect {
					background: var(--color-gray) !important;
				}

				.noUi-horizontal {
					border: none !important;
				}

				.green {
					color: var(--color-green);
				}

				.blue {
					color: var(--color-blue);
				}

				#toggle {
					background: var(--color-gray-light);

					.etabs {
						a {
							background: white;

							span {
								filter: grayscale(1) brightness(10);
							}
						}
					}
				}

				.page {
					a.button {
						color: var(--color-blue) !important;
						border: 1px solid var(--color-blue) !important;
						background: transparent !important;

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

				.checkboxes {
					.item {
						.wrap {
							border-color: var(--color-gray-light) !important;
						}
					}
				}
			}

			#aside {
				.box {
					background: var(--color-gray-light);

					.licences {
						.item {
							a {
								border: 2px solid var(--color-gray-light);
							}
						}
					}
				}

				.benefits {
					.item {
						.wrap {
							border: 1px solid var(--color-gray-light) !important;
						}
					}
				}
			}

			#content .more-button {
				color: var(--color-blue) !important;
				border: 1px solid var(--color-blue) !important;
				background: transparent !important;

				&:hover {
					background: var(--color-blue) !important;
					color: white !important;
				}
			}
		}

		.js-licences-swiper {
			.licences {
				.img {
					border: 2px solid var(--color-gray-light);
				}
			}
		}

		.red-box {
			background: var(--color-green);
		}

		.news {
			.all-news {
				background-color: var(--color-green);

				&:hover {
					background-color: var(--color-blue);
				}
			}

			.item {
				.date {
					background: var(--color-green);
				}

				a {
					color: black !important;
				}
			}
		}

		.products-swiper-arrows {
			.button-prev, .button-next {
				background-color: var(--color-green);
			}
		}

		.benefits {
			.item {
				.wrap {
					background: var(--color-gray-light);
					border: 1px solid var(--color-gray-light) !important;

					a {
						color: black;
						text-decoration: unset;

						.icon {
							color: var(--color-blue);
						}
					}
				}
			}
		}
	}

	&.orange {
		background: var(--color-gray-light);

		.wave2, .wave3 {
			display: none;
		}
	}
}

.layout-center {
	p {
		a {
			color: var(--color-blue);
		}
	}
}

.box-row {
	justify-content: start;

	.box-item {
		background-color: var(--color-green) !important;
		color: var(--color-white) !important;
		border: 1px solid var(--color-green);
	}
}

.help-box {
	.help-item {
		background: var(--color-blue) !important;
	}
}

#detail {
	.right {
		.info {
			#btn-cart {
				background: var(--color-green);
				border: 1px solid var(--color-green);
			}

			.orange-box {
				background: var(--color-gray-light) !important;
				border: 1px solid var(--color-gray-light) !important;
			}
		}
	}

	.aside-info {
		.button {
			background: var(--color-green);
			border: 1px solid var(--color-green);
		}
	}
}

.benefits {
	.red.item {
		.wrap {
			background: var(--color-green);
			border: 1px solid var(--color-green);
		}
	}

	&.extended {
		padding-bottom: 30px;

		.red.item {
			.wrap {
				background: var(--color-green) !important;
				border: 1px solid var(--color-green) !important;
			}
		}
	}
}

.hp-categories {
	.item {
		a {
			border: 2px solid var(--color-gray-light) !important;
			color: black !important;
		}
	}
}

.detail-bottom {
	.aside {
		.button.red {
			background: var(--color-green) !important;
			border: 1px solid var(--color-green) !important;
		}
	}

	ul li {
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiA8Zz4gIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4gIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPiA8L2c+IDxnPiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPiAgPHBhdGggZmlsbD0iIzQyOTQ2ZCIgaWQ9InN2Z18xIiBkPSJtMTQxMiw3MzRxMCwtMjggLTE4LC00NmwtOTEsLTkwcS0xOSwtMTkgLTQ1LC0xOXQtNDUsMTlsLTQwOCw0MDdsLTIyNiwtMjI2cS0xOSwtMTkgLTQ1LC0xOXQtNDUsMTlsLTkxLDkwcS0xOCwxOCAtMTgsNDZxMCwyNyAxOCw0NWwzNjIsMzYycTE5LDE5IDQ1LDE5cTI3LDAgNDYsLTE5bDU0MywtNTQzcTE4LC0xOCAxOCwtNDV6bTI1MiwxNjJxMCwyMDkgLTEwMywzODUuNXQtMjc5LjUsMjc5LjV0LTM4NS41LDEwM3QtMzg1LjUsLTEwM3QtMjc5LjUsLTI3OS41dC0xMDMsLTM4NS41dDEwMywtMzg1LjV0Mjc5LjUsLTI3OS41dDM4NS41LC0xMDN0Mzg1LjUsMTAzdDI3OS41LDI3OS41dDEwMywzODUuNXoiLz4gPC9nPjwvc3ZnPg==);
	}

	.cpt {
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxnPiAgPHRpdGxlPmJhY2tncm91bmQ8L3RpdGxlPiAgPHJlY3QgZmlsbD0ibm9uZSIgaWQ9ImNhbnZhc19iYWNrZ3JvdW5kIiBoZWlnaHQ9IjQwMiIgd2lkdGg9IjU4MiIgeT0iLTEiIHg9Ii0xIi8+IDwvZz4gPGc+ICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+ICA8cGF0aCBpZD0ic3ZnXzEiIGZpbGw9IiM0Mjk0NmQiIGQ9Im0xNiwwYy02LjA3NiwwIC0xMSw0LjkyNCAtMTEsMTFjMCw0LjAzMSAzLjY4OCw4LjMwMyA1LjAzMSwxMi4wNTVjMi4wMDMsNS41OTUgMS43ODEsOC45NDUgNS45NjksOC45NDVjNC4yNSwwIDMuOTY1LC0zLjMzNCA1Ljk2OSwtOC45MjJjMS4zNDcsLTMuNzYgNS4wMzEsLTguMDc4IDUuMDMxLC0xMi4wNzhjMCwtNi4wNzYgLTQuOTI2LC0xMSAtMTEsLTExem0yLjU5MiwyNy4xNzZsLTQuOTU4LDAuNjE5Yy0wLjE3NywtMC41MTIgLTAuMzY3LC0xLjExMSAtMC41OTgsLTEuODkzYy0wLjAwMywtMC4wMSAtMC4wMDcsLTAuMDIxIC0wLjAwOSwtMC4wMzFsNi4xODgsLTAuNzczYy0wLjA4OCwwLjI5NSAtMC4xODIsMC42MDUgLTAuMjY0LDAuODgzYy0wLjEzMSwwLjQ0OSAtMC4yNDgsMC44MzkgLTAuMzU5LDEuMTk1em0tNS44NTYsLTIuMjY4Yy0wLjE4MiwtMC42MDIgLTAuMzg3LC0xLjIzNiAtMC42MTUsLTEuOTA4bDcuNzY2LDBjLTAuMTIzLDAuMzU5IC0wLjI0NiwwLjcxOSAtMC4zNTIsMS4wNTlsLTYuNzk5LDAuODQ5em0zLjI2NCw1LjA5MmMtMS4wMTMsMCAtMS40NzksLTAuMTE3IC0xLjk5NywtMS4yNWw0LjIzOCwtMC41MzFjLTAuNjE0LDEuNjU0IC0xLjA2MSwxLjc4MSAtMi4yNDEsMS43ODF6bTQuNjcyLC05bC05LjMzMywwYy0wLjQ5OCwtMS4wOCAtMS4wOTYsLTIuMTYgLTEuNjg2LC0zLjIxN2MtMS4zMDUsLTIuMzM1IC0yLjY1MywtNC43NSAtMi42NTMsLTYuNzgzYzAsLTQuOTYzIDQuMDM3LC05IDksLTljNC45NjMsMCA5LDQuMDM3IDksOWMwLDIuMDE4IC0xLjM1LDQuNDQ2IC0yLjY1Niw2Ljc5NWMtMC41ODQsMS4wNTMgLTEuMTc4LDIuMTMxIC0xLjY3MiwzLjIwNXoiLz4gIDxwYXRoIGlkPSJzdmdfMiIgZmlsbD0iIzQyOTQ2ZCIgZD0ibTE2LDVjLTMuMzA5LDAgLTYsMi42OTEgLTYsNmMwLDAuMjc2IDAuMjI0LDAuNSAwLjUsMC41czAuNSwtMC4yMjQgMC41LC0wLjVjMCwtMi43NTcgMi4yNDMsLTUgNSwtNWMwLjI3NiwwIDAuNSwtMC4yMjQgMC41LC0wLjVzLTAuMjI1LC0wLjUgLTAuNSwtMC41eiIvPiA8L2c+PC9zdmc+);
	}
}

.pagination {
	.pages {
		a {
			color: var(--color-blue) !important;
			border: 1px solid var(--color-blue) !important;
			background: transparent;

			&:hover {
				background: var(--color-blue) !important;
				color: var(--color-white) !important;
			}

			&.current {
				background: var(--color-blue) !important;
				border-color: 1px solid var(--color-blue) !important;
				color: white !important;

				a {
					background: unset !important;
				}
			}
		}
	}

	.button {
		color: var(--color-blue) !important;
		border: 1px solid var(--color-blue) !important;
		background: transparent;

		&:hover {
			background: var(--color-blue);
			color: var(--color-white);
		}
	}
}

.text a {
	color: var(--color-blue);

	strong {
		color: var(--color-blue);
	}
}

footer {
	.copyright {
		a {
			color: var(--color-blue);
		}
	}
}

#cart {
	.donataion-box-wrap {
		.button.red {
			background: var(--color-green) !important;
				border: 1px solid var(--color-green) !important;
		}
	}

	.btn-green {
		background: var(--color-green) !important;
		border: 1px solid var(--color-green) !important;
	}
}

#cookieconsent .cookieconsent-inner .cookieconsent-btn--agree {
	background: var(--color-blue) !important;
}

.vse-do-skoly {
	section.orange {
		background: var(--color-gray-light) !important;
	}
}

.scroll.up {
	background: var(--color-gray-light) !important;
	color: black !important;
}

.noselling-corner {
	&:before,
	&:after {
		border: 3px solid #ee3032;
	}

	span {
		background: #ee3032 !important;
	}
}

.noselling-block {
	background: var(--color-green) !important;

	:hover {
		background: var(--color-blue) !important;
	}
}

section .layout-center #main .tab-container .cont ul li {
	background-image: url("/templates/images/cont-li-green.png");
}

.advantage-box ul li {
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPiA8Zz4gIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4gIDxyZWN0IGZpbGw9Im5vbmUiIGlkPSJjYW52YXNfYmFja2dyb3VuZCIgaGVpZ2h0PSI0MDIiIHdpZHRoPSI1ODIiIHk9Ii0xIiB4PSItMSIvPiA8L2c+IDxnPiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPiAgPHBhdGggZmlsbD0iIzQyOTQ2ZCIgaWQ9InN2Z18xIiBkPSJtMTQxMiw3MzRxMCwtMjggLTE4LC00NmwtOTEsLTkwcS0xOSwtMTkgLTQ1LC0xOXQtNDUsMTlsLTQwOCw0MDdsLTIyNiwtMjI2cS0xOSwtMTkgLTQ1LC0xOXQtNDUsMTlsLTkxLDkwcS0xOCwxOCAtMTgsNDZxMCwyNyAxOCw0NWwzNjIsMzYycTE5LDE5IDQ1LDE5cTI3LDAgNDYsLTE5bDU0MywtNTQzcTE4LC0xOCAxOCwtNDV6bTI1MiwxNjJxMCwyMDkgLTEwMywzODUuNXQtMjc5LjUsMjc5LjV0LTM4NS41LDEwM3QtMzg1LjUsLTEwM3QtMjc5LjUsLTI3OS41dC0xMDMsLTM4NS41dDEwMywtMzg1LjV0Mjc5LjUsLTI3OS41dDM4NS41LC0xMDN0Mzg1LjUsMTAzdDI3OS41LDI3OS41dDEwMywzODUuNXoiLz4gPC9nPjwvc3ZnPg==);
}

.subcategories-bottom ul li a {
	color: var(--color-blue) !important;
}

#popup-login_form {
	.popup-benefits ul li .pictogram {
		background: var(--color-blue) !important;
	}

	.btn.btn-green {
		background: var(--color-green) !important;
	}
}

.subpage section .layout-center #main nav>ul>li.current>ul li.current a, .subpage section .layout-center #main nav>ul>li.current>ul li:hover a {
	background-color: var(--color-gray-light) !important;
}

.vse-do-skoly section .layout-center #main nav .tabs {
	border-bottom: 3px solid var(--color-blue) !important;
}

section .layout-center #main .brands-box .box .wrap .goods .item a {
	color: var(--color-blue) !important;
}

section .layout-center #main .brands-box .box .all {
	background: var(--color-blue) !important;
	color: white;
	border: 1px solid var(--color-blue) !important;
}

section .layout-center #main #content .pagination>div .button {
	color: var(--color-blue) !important;
	background: transparent;

	&:hover {
		background: var(--color-blue) !important;
		color: var(--color-white) !important;
	}
}