@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 110%;
  letter-spacing: 0;
  color: var(--text);
}

:root {
  --text: #1C1C1B;
  --transition: 0.2s ease-in-out;
  --green: #0a8b43;
  --dark-green: #03662F;
  --lightgray: #EEEEEE;
  --text-lightgray: #AAAAAA;
  --error: #D2747D;
  --orange: #F7A100;
}

.container {
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
}

body {
  position: relative;
  overflow-x: hidden;
  min-width: 275px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  display: grid;
  grid-template-columns: 285px 1fr;
  width: 100%;
  margin: 0 auto;
  -moz-column-gap: 50px;
       column-gap: 50px;
  background-color: var(--lightgray);
  transition: var(--transition);
}
body.active {
  grid-template-columns: 63px 1fr;
}

main {
  padding-bottom: 60px;
  max-width: 1440px;
  width: 90%;
  margin: 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

b {
  font-weight: 700;
}

i {
  font-weight: 300;
  font-style: normal;
}

img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

ol,
ul {
  list-style-type: none;
}

button {
  display: block;
  background-color: inherit;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  border-radius: 3px;
  line-height: 100%;
}

a {
  text-decoration: none;
  display: block;
  color: var(--text);
  transition: var(--transition);
  line-height: 100%;
}
a:hover {
  color: var(--green);
  text-decoration: underline;
}

.font-regular {
  font-family: "Regular", sans-serif;
  font-weight: 400;
}

.font-bold {
  font-family: "Bold", sans-serif;
  font-weight: 700;
}

.font-italic {
  font-family: "Italic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.font-black {
  font-family: "Black", sans-serif;
  font-weight: 900;
}

.color-lightgray {
  color: var(--text-lightgray);
}

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

.color-red {
  color: var(--error);
}

a.green {
  color: var(--green);
  font-size: 12px;
}
a.green::before {
  background-image: url("../icons/shevron.svg");
  width: 17px;
  height: 17px;
}
a.green:hover {
  text-decoration: underline;
}

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

.before::before {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.after::after {
  content: "";
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Стилизация скроллбара для всех элементов */
::-webkit-scrollbar {
  width: 8px;
  background-color: var(--lightgray);
}

::-webkit-scrollbar-thumb {
  background-color: var(--green);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
  background-color: var(--lightgray);
  border-radius: 4px;
}

/* Для Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--green) var(--lightgray);
}

header {
  z-index: 1001;
  position: relative;
  position: sticky;
  top: 0;
  /* & .white-bg {
      position: absolute;
      top: 0;
      left: 0;
      background-color: white;
      width: 100vw;
      height: 100%;
      z-index: -1;
  } */
}
header .search_block {
  position: absolute;
  overflow: hidden;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  left: 50%;
  transform: translate(-50%, 0);
  width: 70%;
  background-color: white;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.2509803922);
  border-radius: 0 0 8px 8px;
  padding: 10px 20px;
  z-index: 1001;
  transition: var(--transition);
}
header .search_block.active {
  opacity: 1;
  visibility: visible;
}
header .search_block .search_result {
  display: none;
}
header .search_block .search_result.active {
  display: block;
}
header .search_block input {
  display: block;
  width: 100%;
  height: 35px;
  margin: 0 auto;
  border: 1px solid var(--green);
  border-radius: 4px;
  outline: none;
  padding: 0 10px;
}
header .search_block .input {
  margin-bottom: 20px;
  position: relative;
}
header .search_block .input::after {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0, -50%);
  content: "";
  background-image: url("../icons/search-green.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 25px;
  height: 25px;
  display: block;
}
header .search_block .search_result {
  overflow-y: scroll;
  position: relative;
  max-height: 80vh;
}
header .search_block .search_result .result_h2 {
  font-size: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #AAAAAA;
}
header .search_block .products {
  margin-top: 20px;
}
header .inner {
  display: flex;
  justify-content: space-between;
  padding-top: 21px;
  padding-bottom: 21px;
  padding-left: 50px;
  padding-right: 25px;
  position: relative;
  background-color: white;
  border-radius: 0 0 20px 20px;
  box-shadow: 0px 4px 8px -4px rgba(0, 0, 0, 0.2509803922);
}
header .info .column {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
header .info {
  display: flex;
  flex-grow: 1;
  gap: 5%;
  margin-right: 7%;
}
header .info .column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
header .info .column a, header .info .column span {
  font-size: 12px;
}
header .prices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  margin-right: 20px;
}
header .prices span {
  font-size: 12px;
}
header .prices span span::after {
  content: attr(data-count) " шт.";
}
header .icon {
  position: relative;
  background-color: var(--green);
  width: 35px;
  height: 35px;
  border-radius: 4px;
}
header .icon:hover, header .icon:active {
  background-color: var(--dark-green);
}
header .icon::after {
  content: attr(data-count);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background-color: var(--error);
  border-radius: 50%;
  font-size: 8px;
  width: 13px;
  height: 13px;
  color: white;
}
header .icon[data-count="0"]::after {
  display: none;
}
header .icon::before {
  width: 27px;
  height: 27px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .icon.search::before {
  background-image: url("../icons/search-white.svg");
}
header .icon.favorite::before {
  background-image: url("../icons/favorite-white.svg");
}
header .icon.call::before {
  background-image: url("../icons/call-white.svg");
}
header .icons {
  display: flex;
  gap: 16px;
  margin-right: 7%;
}
header .cart-a {
  position: relative;
  border: 1px solid var(--green);
  border-radius: 4px;
  background-color: white;
  width: 49px;
  height: 35px;
}
header .cart-a:hover, header .cart-a:active {
  background-color: var(--dark-green);
}
header .cart-a:hover::before, header .cart-a:active::before {
  background-image: url("../icons/links/link-cart.svg");
}
header .cart-a:before {
  background-image: url("../icons/links/link-cart-green.svg");
  width: 23px;
  height: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .cart-a:after {
  content: attr(data-count);
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background-color: #D2747D;
  border-radius: 50%;
  font-size: 8px;
  width: 13px;
  height: 13px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .content {
    margin-top: 25px;
    margin-left: 50px;
} */
.bread {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 25px;
  margin-bottom: 25px;
  row-gap: 10px;
}
.bread a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 20px;
}
.bread a:hover {
  text-decoration: none;
}
.bread span {
  font-size: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #575756;
  line-height: 100%;
}
.bread a:first-child::before {
  width: 16px;
  height: 16px;
  background-image: url("../icons/home-green.svg");
  display: block;
}
.bread a::after {
  content: "/";
  font-size: 20px;
  margin-left: 8px;
  margin-right: 8px;
}

.b_desc {
  width: 70%;
  font-size: 20px;
  margin-top: 20px;
}

h1 {
  font-size: 32px;
  font-family: "Black", sans-serif;
  font-weight: 900;
}

h2 {
  font-size: 24px;
  font-family: "Bold", sans-serif;
  font-weight: 700;
}

h3 {
  font-size: 20px;
  font-family: "Bold", sans-serif;
  font-weight: 700;
}

.section {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: white;
  border-radius: 15px;
  width: 100%;
  padding: 20px;
  /* TODO убралд падинги 20 45 */
}
.section.no-white {
  background-color: transparent;
  padding: 0;
}

.more {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.more:hover {
  color: var(--green);
}
.more:hover::after {
  background-image: url("../icons/shevron-green.svg");
}
.more::after {
  display: block;
  background-image: url("../icons/shevron-black.svg");
  width: 10px;
  height: 6px;
  transition: var(--transition);
}
.more.hide {
  display: none;
}

.notification {
  position: relative;
  transition: var(--transition);
}
.notification.active {
  opacity: 0.8;
}
.notification .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.notification .filters button, .notification .filters span {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notification .filters button:hover, .notification .filters span:hover {
  color: var(--green);
}
.notification .filters .unread {
  color: var(--error);
}
.notification .filters button:after {
  display: block;
  background-image: url("../icons/shevron-black.svg");
  width: 8px;
  height: 4px;
  transition: var(--transition);
}
.notification .filters button[data-date=down]:after {
  transform: rotate(180deg);
}
.notification .notifications {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
  margin-top: 25px;
}
.notification .notifications .block {
  /* padding: 13px 30px 13px 20px; */
  background-color: var(--text-lightgray);
  border-radius: 7px;
  transition: var(--transition);
  cursor: pointer;
  height: -moz-max-content;
  height: max-content;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.notification .notifications .block span {
  text-align: left;
}
.notification .notifications .block .up {
  padding: 13px 30px 13px 20px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.notification .notifications .block .up:hover {
  opacity: 0.8;
}
.notification .notifications .block.active .hide {
  display: flex;
}
.notification .notifications .block.active {
  height: auto;
}
.notification .notifications .block.create {
  background-color: var(--green);
}
.notification .notifications .block.create .hide {
  color: white;
}
.notification .notifications .block.cancel {
  background-color: var(--error);
}
.notification .notifications .block.cancel .hide {
  color: white;
}
.notification .notifications .block.work {
  background-color: #575756;
}
.notification .notifications .block.work .hide {
  color: white;
}
.notification .notifications .block.info {
  background-color: #EEEEEE;
}
.notification .notifications .block.info span {
  color: var(--text);
}
.notification .notifications .block.info * {
  color: var(--text);
}
.notification .notifications .block.done {
  background-color: var(--dark-green);
}
.notification .notifications .block.done .hide {
  color: white;
}
.notification .notifications .block.new span {
  font-family: "Black", sans-serif;
  font-weight: 900;
}
.notification .notifications .block.new {
  position: relative;
}
.notification .notifications .block.new::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 6px;
  right: 6px;
}
.notification .notifications .block.work.new::after, .notification .notifications .block.info.new::after {
  background-color: var(--error);
}
.notification .notifications .block.done .goto, .notification .notifications .block.create .goto {
  background-color: white;
}
.notification .notifications .block.done .goto::before, .notification .notifications .block.create .goto::before {
  background-image: url("../icons/plain-green.svg");
}
.notification .notifications .block .goto {
  background-color: var(--green);
  width: 35px;
  height: 24px;
  border-radius: 3px;
  position: relative;
  margin-top: 10px;
  margin-left: auto;
}
.notification .notifications .block .goto:before {
  background-image: url("../icons/plain-white.svg");
  width: 10px;
  height: 10px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.notification .notifications span {
  color: white;
  font-size: 12px;
}
.notification .notifications .hide {
  margin-top: 15px;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: var(--transition);
  padding: 0 20px 13px 20px;
}
.notification .notifications .hide a {
  color: white;
  font-size: 12px;
  text-decoration: underline;
}
.notification .notifications .hide a:hover {
  opacity: 0.8;
}
.notification .notifications .hide ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notification .notifications .hide p, .notification .notifications .hide li, .notification .notifications .hide ol {
  color: white;
  font-size: 12px;
}

.loader {
  width: 101%;
  height: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}
.loader.active {
  display: block;
}
.loader.center::before {
  top: 50%;
}
.loader::before {
  content: "";
  background-image: url("../icons/loader.svg");
  width: 80px;
  height: 80px;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);
}

.overflow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  border-radius: 15px;
  color: white;
  font-size: 20px;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  list-style: 150%;
}
.overflow.active {
  display: flex;
}

.favorites {
  position: relative;
  width: 100%;
  padding: 20px;
  transition: var(--transition);
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  gap: 25px;
  width: 100%;
  justify-content: flex-start;
}
.products .quantity_panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 10px;
  border: 1px solid var(--green);
  background-color: white;
  border-radius: 4px;
}
.products .quantity_panel .plus {
  display: flex;
  border-radius: 0 4px 4px 0;
  justify-content: center;
  align-items: center;
  z-index: 3;
  font-size: 20px;
  background-color: white;
  cursor: pointer;
}
.products .quantity_panel .plus:hover {
  background-color: var(--green);
  color: white;
}
.products .quantity_panel .plus:active {
  background-color: var(--dark-green);
  color: white;
}
.products .quantity_panel .minus {
  display: flex;
  border-radius: 4px 0 0 4px;
  justify-content: center;
  align-items: center;
  z-index: 3;
  font-size: 24px;
  background-color: white;
  cursor: pointer;
}
.products .quantity_panel .minus:hover {
  background-color: var(--green);
  color: white;
}
.products .quantity_panel .minus:active {
  background-color: var(--dark-green);
  color: white;
}
.products .quantity_panel input {
  width: 100%;
  border: none;
  border-left: 1px solid var(--green);
  border-right: 1px solid var(--green);
  text-align: center;
  outline: none;
}
.products .quantity_panel input::-webkit-outer-spin-button, .products .quantity_panel input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.products .product {
  /* min-width: 200px; */
  max-width: 200px;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.products .trio {
  position: relative;
}
.products .invisible {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  display: flex;
  z-index: 2;
}
.products .invisible div {
  flex-grow: 1;
}
.products img {
  -o-object-fit: contain;
     object-fit: contain;
}
.products .sale_block {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.products .sale_block p:first-child {
  color: var(--error);
  text-decoration: line-through;
}
.products .sale_block p:last-child {
  color: var(--green);
}
.products .img_row {
  height: 130px;
  margin-bottom: 33px;
}
.products .trio, .products .slick-list, .products .slick-track {
  height: 100%;
  border-radius: 10px;
}
.products .trio, .products .img-no-trio {
  border: 1px solid var(--lightgray);
  border-radius: 10px;
}
.products .img-no-trio {
  -o-object-fit: cover;
     object-fit: cover;
}
.products .name {
  height: 36px;
  font-size: 12px;
  overflow: hidden;
}
.products .articul {
  font-size: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.products .articul b {
  font-size: 1em;
}
.products .price {
  font-size: 14px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.products .storage {
  font-size: 10px;
  margin-bottom: 15px;
  color: var(--error);
}
.products .storage.green {
  color: #0a8b43;
}
.products .storage.red {
  color: #D2747D;
}
.products .storage.orange {
  color: #F7A100;
}
.products .add_favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  background-color: var(--green);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.products .add_favorite:hover {
  background-color: var(--dark-green);
}
.products .add_favorite::before {
  display: block;
  width: 12px;
  height: 12px;
  background-image: url("../icons/favorite-white.svg");
}
.products .add_favorite.added {
  background-color: var(--error);
}

.btn {
  width: 100%;
  background-color: var(--green);
  text-align: center;
  padding: 8px 20px;
  font-size: 10px;
  color: white;
  font-family: "Medium", sans-serif;
  font-weight: 500;
}
.btn:hover {
  background-color: var(--dark-green);
}
.btn:active {
  background-color: var(--green);
}
.btn.search {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn.search::before {
  background-image: url("../icons/search.svg");
  width: 12px;
  height: 12px;
  display: block;
}
.btn.ok {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn.ok::before {
  background-image: url("../icons/ok.svg");
  width: 15px;
  height: 15px;
  display: block;
}
.btn.upload {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-family: "Bold", sans-serif;
}
.btn.upload::before {
  background-image: url("../icons/upload.svg");
  width: 18px;
  height: 18px;
  display: block;
}
.btn.send {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-family: "Bold", sans-serif;
}
.btn.send::before {
  background-image: url("../icons/send.svg");
  width: 18px;
  height: 18px;
  display: block;
}
.btn.cart {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-family: "Bold", sans-serif;
  font-size: 14px;
  justify-content: center;
}
.btn.cart::before {
  background-image: url("../icons/cart-btn-white.svg");
  width: 18px;
  height: 18px;
  display: block;
}
.btn.arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-family: "Bold", sans-serif;
  font-size: 14px;
}
.btn.arrow::before {
  background-image: url("../icons/shevron-white.svg");
  width: 18px;
  height: 18px;
  display: block;
}
.btn.x {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-family: "Bold", sans-serif;
}
.btn.x::before {
  background-image: url("../icons/x.svg");
  width: 10px;
  height: 10px;
  display: block;
}

.sl-wrapper {
  visibility: hidden;
  opacity: 0;
}

.sl-wrapper.slick-initialized {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s ease;
}

aside {
  /* position: fixed;
  top: 0;
  left: 0; */
  min-height: 100vh;
  height: 100%;
  padding: 17px 0;
  display: flex;
  flex-direction: column;
  background-color: #0A8B43;
  overflow: hidden;
  transition: var(--transition);
  z-index: 999;
}
aside .mobile_info {
  display: none;
}
aside .close {
  display: none;
}
aside .sidebar {
  position: fixed;
  top: 2%;
  display: flex;
  flex-direction: column;
  height: 97%;
  width: 285px;
  background-color: var(--green);
  transition: var(--transition);
}
aside.active .sidebar {
  width: 63px;
}
aside.active .links .link {
  color: transparent;
  overflow: hidden;
}
aside.active .links .link:hover {
  color: transparent;
}
aside.active .links .bottom {
  flex-direction: column;
  align-items: flex-start;
  transition: none;
  overflow: hidden;
}
aside.active .links .bottom a:hover {
  background-color: transparent;
}
aside.active .links .bottom .slideToLeft {
  margin-right: 0;
  margin: 0 auto;
}
aside.active .logo {
  height: 30px;
  width: 30px;
}
aside.active .name p {
  color: transparent;
}
aside.active .up {
  padding-left: 17px;
}
aside .up {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid white;
  margin-bottom: 25px;
}
aside .up:hover {
  text-decoration: none;
  opacity: 0.8;
}
aside .up::after {
  background-image: url("../icons/shevron-white.svg");
  width: 15px;
  height: 10px;
  display: block;
  margin-left: auto;
}
aside .logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: var(--transition);
}
aside .name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
aside .name p {
  color: white;
  font-size: 12px;
}
aside .links {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
aside .links .link {
  padding: 8px 0;
  padding-left: 22px;
  font-size: 24px;
  color: white;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
aside .links .link.last {
  margin-top: auto;
}
aside .links .link:hover {
  text-decoration: underline;
  color: white;
  background-color: #1C9F56;
}
aside .links .link::before {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
  margin-right: 8px;
}
aside .links .link:last-child {
  margin-top: auto;
}
aside .links .link.l-main::before {
  background-image: url("../icons/links/link_main.svg");
}
aside .links .link.l-catalog::before {
  background-image: url("../icons/links/link_catalog.svg");
}
aside .links .link.l-create_order::before {
  background-image: url("../icons/links/link_create_order.svg");
}
aside .links .link.l-order::before {
  background-image: url("../icons/links/link-cart.svg");
}
aside .links .link.l-company::before {
  background-image: url("../icons/links/link_company.svg");
}
aside .links .link.l-address::before {
  background-image: url("../icons/links/link_address.svg");
}
aside .links .link.l-stock::before {
  background-image: url("../icons/links/link_stock.svg");
}
aside .links .link.l-exit::before {
  background-image: url("../icons/links/link_exit.svg");
}
aside .links .link.l-admin::before {
  background-image: url("../icons/links/l-admin.svg");
}
aside .links .bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
aside .links .bottom a {
  font-size: 20px;
}
aside .links .bottom a:hover {
  background-color: #0A8B43;
}
aside .slideToLeft {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
aside .slideToLeft::before {
  background-image: url("../icons/link_slideleft.svg");
  display: block;
  width: 20px;
  height: 20px;
}

.report {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10%;
}
.report .title {
  font-size: 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.report .title::before {
  width: 24px;
  height: 24px;
  display: block;
}
.report .title.write::before {
  background-image: url("../icons/message.svg");
}
.report .title.help::before {
  background-image: url("../icons/phone.svg");
}
.report .block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.report .block:first-of-type {
  margin-bottom: 25px;
}
.report .block p {
  font-size: 16px;
}
.report .block a {
  font-size: 20px;
  text-decoration: underline;
}

.form input,
.form textarea {
  width: 100%;
  padding: 10px 16px;
  background-color: var(--lightgray);
  border-radius: 5px;
  border: 1px solid var(--text-lightgray);
  color: var(--text-gray);
  transition: var(--transition);
  resize: none;
  font-size: 16px;
  outline: none;
}
.form input::-moz-placeholder, .form textarea::-moz-placeholder {
  color: var(--text-lightgray);
}
.form input::placeholder,
.form textarea::placeholder {
  color: var(--text-lightgray);
}
.form input:focus,
.form textarea:focus {
  border-color: var(--green);
  background-color: white;
}
.form input:hover,
.form textarea:hover {
  border-color: var(--green);
  background-color: white;
}
.form input.error,
.form textarea.error {
  border-color: var(--error);
}
.form input.error::-moz-placeholder, .form textarea.error::-moz-placeholder {
  color: var(--error);
}
.form input.error::placeholder,
.form textarea.error::placeholder {
  color: var(--error);
}
.form input.error:focus,
.form textarea.error:focus {
  border-color: var(--error);
}
.form input.error:hover,
.form textarea.error:hover {
  border-color: var(--error);
}
.form input:active,
.form textarea:active {
  border-color: var(--green);
}

.form label {
  margin-bottom: 8px;
  display: block;
}
.form label.error {
  margin-top: 5px;
  margin-bottom: 0;
  color: var(--error);
}

.form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.form .btn {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.form .btn::before {
  background-image: url("../icons/send.svg");
  width: 20px;
  height: 20px;
  display: block;
}
.form .btn.ok::before {
  background-image: url("../icons/ok.svg");
  width: 10px;
  height: 10px;
  display: block;
}

.form.document {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  position: relative;
  border-radius: 3px;
}
.form.document input, .form.document textarea {
  height: 151px;
}
.form.document input[type=file] {
  display: none;
}
.form.document .file-help {
  font-size: 10px;
}
.form.document label, .form.document span.label {
  font-size: 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  line-height: 1;
}
.form.document .btn {
  width: -moz-fit-content;
  width: fit-content;
}

.form-file {
  border-radius: 5px;
}
.form-file .form-file-box {
  border: 1px dotted var(--text-lightgray);
  border-radius: 5px;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  justify-content: center;
  height: 151px;
}
.form-file .form-file-box label {
  cursor: pointer;
  border-radius: 3px;
}
.form-file .form-file-box .btn {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 12px;
}
.form-file .form-file-box .btn::before {
  background-image: url("../icons/upload.svg");
}
.form-file .file-uploaded {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.form-file .file-uploaded button {
  position: relative;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  font-size: 12px;
  background-color: var(--green);
  color: white;
}
.form-file .file-uploaded button:hover::after {
  visibility: visible;
  opacity: 1;
}
.form-file .file-uploaded button::after {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  content: "Удалить";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--error);
  border-radius: 3px;
}

label i {
  color: var(--error);
}

.stock .list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.stock .block {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--lightgray);
  border-radius: 6px;
  color: white;
  gap: 20px;
}
.stock .block img {
  width: 136px;
  aspect-ratio: 16/9;
  border-radius: 5px 0 0 5px;
  flex-shrink: 0;
}
.stock .block .name {
  font-size: 16px;
}
.stock .block .green-block {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}
.stock .block .date {
  text-decoration: none;
  font-size: 12px;
  align-self: flex-end;
}
.stock .block .date.green {
  color: var(--green);
}
.stock .block .date.red {
  color: var(--error);
}
.stock .block:hover {
  background-color: var(--green);
  text-decoration: none;
}
.stock .block:hover .name, .stock .block:hover .date {
  color: white;
  text-decoration: underline;
}
.stock .block:hover .date {
  text-decoration: none;
}
.stock .block:active .name, .stock .block:active .date {
  color: white;
  text-decoration: underline;
}

.stock_detail {
  width: 100%;
}
.stock_detail h2 {
  margin-bottom: 20px;
}
.stock_detail h3 {
  text-align: center;
  margin-bottom: 20px;
}
.stock_detail .info {
  width: 100%;
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: auto auto;
  gap: 25px;
}
.stock_detail .info .left {
  /* width: 40%; */
  max-width: 468px;
  display: flex;
  flex-direction: column;
}
.stock_detail .info .left .img {
  display: block;
  aspect-ratio: 1/1;
  /* max-height: 263px; */
  border-radius: 20px;
  margin-bottom: 20px;
}
.stock_detail .info .right {
  flex-grow: 1;
  padding: 20px;
  background-color: white;
  border-radius: 15px;
  height: -moz-max-content;
  height: max-content;
}
.stock_detail .info .right .date {
  font-size: 20px;
  color: white;
  width: -moz-fit-content;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 0 10px 10px 0;
  margin-bottom: 20px;
}
.stock_detail .info .right .date.green {
  background-color: var(--green);
}
.stock_detail .info .right .date.red {
  background-color: var(--error);
}
.stock_detail .info .right .text {
  font-size: 16px;
  white-space: pre-line;
}
.stock_detail .brands {
  background-color: white;
  border-radius: 15px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.stock_detail .brands img {
  height: 100px;
  -o-object-fit: contain;
     object-fit: contain;
}
.stock_detail .brands .slick-list {
  width: 85%;
  margin: 0 auto;
}
.stock_detail .brands .slick-slide {
  margin-right: 10px;
}
.stock_detail .brands .slick-slide:last-child {
  margin-right: 0;
}
.stock_detail .brands .arrows {
  position: absolute;
  top: 70%;
  left: 10%;
  width: 80%;
  justify-content: space-between;
}

.arrows {
  display: flex;
  gap: 20px;
}
.arrows .slick-prev, .arrows .slick-next {
  background-color: var(--green);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrows .slick-prev:hover, .arrows .slick-next:hover {
  background-color: var(--dark-green);
}

.not_found {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  text-align: center;
}

.company.short {
  width: 50%;
}
.company .title {
  margin-bottom: 8px;
  display: block;
}
.company .inner {
  width: 100%;
  position: relative;
}
.company h3 {
  margin-bottom: 10px;
}
.company .line {
  display: flex;
  align-items: center;
  gap: 6px;
}
.company .line .key {
  color: var(--text-lightgray);
}
.company .block {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #AAAAAA;
}
.company .block:last-of-type {
  padding-bottom: 30px;
  border-bottom: none;
}
.company .line-help {
  font-size: 14px;
  margin-bottom: 20px;
}
.company .under_line {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.company .under_line .file {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: underline;
  color: var(--green);
  gap: 12px;
}
.company .under_line .file::before {
  content: "";
  background-image: url("../icons/download.svg");
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.select .inner {
  width: 100%;
  position: relative;
}

.selected {
  width: 100%;
  border: 1px solid var(--green);
  padding: 6px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  opacity: 0.8;
}
.selected:hover {
  opacity: 1;
}
.selected::after {
  transition: var(--transition);
  background-image: url("../icons/shevron-green.svg");
  width: 10px;
  height: 6px;
  display: block;
  transform: rotate(180deg);
  opacity: 0.7;
}
.selected:hover:after {
  opacity: 1;
}
.selected[data-open="1"]::after {
  transform: rotate(0deg);
}

.select_box {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  background-color: white;
  border-radius: 3px;
  border: 1px solid var(--lightgray);
  z-index: 22;
}
.select_box button {
  padding: 6px;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--lightgray);
}
.select_box button:hover {
  background-color: var(--green);
  color: white;
}

.address .set_address {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.address .block {
  background-color: white;
  border-radius: 15px;
  padding: 18px 25px;
  padding-bottom: 30px;
  position: relative;
}
.address .block.active input {
  display: block;
}
.address .block.active .title, .address .block.active .text {
  display: none;
}
.address input {
  max-width: 400px;
  padding: 8px 16px;
  font-size: 14px;
  display: none;
}
.address .color-lightgray {
  font-size: 12px;
  margin-bottom: 4px;
}
.address .title {
  font-size: 24px;
}
.address .text {
  font-size: 14px;
}
.address .delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background-color: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.address .delete::before {
  background-image: url("../icons/delete.svg");
  width: 16px;
  height: 16px;
}
.address .delete:hover {
  background-color: var(--dark-green);
}
.address .buttons {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
}
.address .buttons button {
  color: var(--green);
  font-size: 12px;
  opacity: 0.7;
  text-decoration: underline;
}
.address .buttons button:hover {
  opacity: 1;
}
.address .add_adress {
  width: 70px;
  height: 70px;
  background-color: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 40px auto 0 auto;
}
.address .add_adress::before {
  background-image: url("../icons/plus-white.svg");
  width: 26px;
  height: 26px;
}
.address .add_adress:hover {
  background-color: var(--dark-green);
}

.profile {
  overflow: hidden;
  position: relative;
}
.profile .line {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile .info {
  display: flex;
  flex-direction: row;
  gap: 50px;
  position: relative;
  padding-bottom: 60px;
}
.profile input[type=file] {
  display: none;
}
.profile .pre-logo {
  z-index: 4;
  position: relative;
}
.profile .pre-logo span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.profile .password {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 30px;
}
.profile .password .inputs, .profile .password .notis {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.profile .password input {
  font-size: 14px;
  padding: 6px 8px;
}
.profile .password button {
  font-size: 12px;
  width: -moz-fit-content;
  width: fit-content;
}
.profile .password .inputs .input-box button {
  position: absolute;
  top: 15px;
  right: 10px;
  transform: translateY(-50%);
  font-size: 12px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  opacity: 0.7;
  z-index: 3;
}
.profile .password .inputs .input-box button:hover {
  opacity: 1;
}
.profile .password .inputs .input-box button {
  background-image: url("../icons/eye-close.svg");
}
.profile .password .inputs .input-box button.active {
  background-image: url("../icons/eye.svg");
}
.profile .password .input-box {
  position: relative;
  width: 60%;
}
.profile .info button[type=submit] {
  position: absolute;
  bottom: 40px;
  right: 10px;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 12px;
}
.profile .img {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  flex-shrink: 0;
}
.profile .img .pre-logo {
  position: relative;
  transition: var(--transition);
}
.profile .img .pre-logo:hover {
  cursor: pointer;
}
.profile .img .pre-logo:hover::before, .profile .img .pre-logo:hover::after {
  opacity: 1;
}
.profile .img .pre-logo:hover .logo {
  filter: brightness(0.5);
}
.profile .img .pre-logo::before {
  background-image: url("../icons/edit.svg");
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 15px;
  height: 15px;
  z-index: 2;
  opacity: 0;
  transition: var(--transition);
}
.profile .img .pre-logo::after {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--green);
  opacity: 0;
  transition: var(--transition);
}
.profile .img .logo {
  aspect-ratio: 1/1;
  -o-object-fit: contain;
     object-fit: contain;
  transition: var(--transition);
  border-radius: 50%;
}
.profile .img button {
  font-size: 14px;
  color: var(--green);
  text-decoration: underline;
  margin-top: 10px;
  opacity: 0.7;
}
.profile .img button:hover {
  opacity: 1;
}
.profile .gray-line {
  background-color: var(--text-lightgray);
  height: 1px;
  width: 120%;
  margin: 0 auto;
  position: relative;
  right: 10%;
}
.profile .title {
  font-size: 16px;
}
.profile label {
  margin-bottom: 4px;
}
.profile .text {
  font-size: 16px;
}
.profile .info input {
  display: none;
  padding: 8px 16px;
  font-size: 14px;
}
.profile .column {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.profile .info-flex {
  display: flex;
  flex-grow: 0.8;
  gap: 20%;
}
.profile .info-flex.active input {
  display: block;
}
.profile .info-flex.active .text {
  display: none;
}
.profile .info-flex.active .text.email {
  display: block;
}
.profile .info-flex input {
  font-size: 14px;
  padding: 6px 8px;
}
.profile .notis label {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.profile .notis label input {
  width: -moz-fit-content;
  width: fit-content;
  width: 30px;
  height: 30px;
  accent-color: var(--green);
}

.orders .menu {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 50px;
}
.orders .menu .loader {
  border-radius: 15px;
}
.orders .menu .find {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  background-color: white;
  border-radius: 15px;
  padding: 24px 38px;
  /* overflow: hidden; */
}
.orders .menu .find input {
  font-size: 14px;
  padding: 6px 8px;
}
.orders .menu .find .form {
  gap: 4px;
}
.orders .menu .find .flex-inputs {
  display: flex;
  gap: 10px;
  align-items: center;
}
.orders .menu .find .btn {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
  font-size: 14px;
}
.orders .menu .status {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
}
.orders .menu .status button {
  background-color: #575756;
  width: 100%;
  height: 85px;
  color: white;
  font-size: 20px;
  border-radius: 12px;
  position: relative;
}
.orders .menu .status button:hover {
  opacity: 0.7;
}
.orders .menu .status button.active::after {
  content: "Выбрано";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  background-color: white;
  border-radius: 7px;
  padding: 6px 8px;
  color: var(--text);
}
.orders .menu .status button.new {
  background-color: var(--green);
}
.orders .menu .status button.in_work {
  background-color: #575756;
}
.orders .menu .status button.done {
  background-color: #A1C97B;
}
.orders .menu .status button.cancel {
  background-color: var(--error);
}

.orders.flex #set_orders {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}

.orders .block {
  background-color: white;
  padding: 15px 25px;
  border-radius: 12px;
  overflow: hidden;
}
.orders .block .repeat_access {
  position: absolute;
  background-color: white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
}
.orders .block .repeat_access.active {
  visibility: visible;
  opacity: 1;
}
.orders .block .repeat_access .btn {
  width: -moz-max-content;
  width: max-content;
  font-size: 16px;
  font-weight: 700;
}
.orders .block .repeat_access .close {
  background-image: url("../icons/x-black.svg");
  position: absolute;
  top: 6px;
  right: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.orders .block .repeat_access .close:hover {
  opacity: 0.7;
}
.orders .block .normal::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}
.orders .block .normal.new::after {
  background-color: var(--green);
}
.orders .block .normal.in_work::after {
  background-color: #575756;
}
.orders .block .normal.done::after {
  background-color: #A1C97B;
}
.orders .block .normal.cancel::after {
  background-color: var(--error);
}
.orders .block .normal {
  display: flex;
  gap: 4px;
  align-items: baseline;
}
.orders .block .color-lightgray {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.orders .block .up {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  position: relative;
}
.orders .block .columns {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 10px;
  flex-grow: 1;
}
.orders .block .pdf {
  width: 15%;
  flex-shrink: 0;
}
.orders .block .pdf:hover span {
  color: var(--green);
  text-decoration: underline;
}
.orders .block .column {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.orders .block .text {
  display: flex;
  gap: 4px;
}
.orders .block .line {
  height: 1px;
  background-color: var(--text-lightgray);
  width: 120%;
  margin: 0 auto;
  position: relative;
  right: 10%;
}
.orders .block .pdf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}
.orders .block .pdf span {
  text-align: center;
}
.orders .block .pdf img {
  width: 42px;
  height: 48px;
}
.orders .block .middle {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
}
.orders .block .middle .left {
  display: flex;
  gap: 15px;
}
.orders .block .middle .abs, .orders .block .middle .detail, .orders .block .middle .repeat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.orders .block .middle .abs:hover, .orders .block .middle .detail:hover, .orders .block .middle .repeat:hover {
  text-decoration: underline;
  color: var(--green);
}
.orders .block .middle .abs::after {
  background-image: url("../icons/angle-black.svg");
  transform: rotate(-90deg);
  display: block;
  width: 10px;
  height: 10px;
}
.orders .block .middle .detail.active {
  color: var(--green);
  text-decoration: underline;
}
.orders .block .middle .detail.active:after {
  transform: rotate(0deg);
}
.orders .block .middle .detail::after {
  background-image: url("../icons/angle-black.svg");
  transform: rotate(-90deg);
  display: block;
  width: 10px;
  height: 10px;
  transition: var(--transition);
}
.orders .block .middle .repeat::before {
  background-image: url("../icons/repeat.svg");
  display: block;
  width: 15px;
  height: 15px;
}
.orders .block .down {
  margin-top: 20px;
  display: none;
}
.orders .block .down.show {
  display: block;
}
.orders .block .products {
  margin-top: 20px;
}

.reg_orders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;
  gap: 30px;
}
.reg_orders .documents {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reg_orders .sale_hide {
  display: none;
}
.reg_orders .sale_hide.active {
  display: block;
}
.reg_orders .documents p, .reg_orders .documents span {
  font-size: 20px;
}
.reg_orders .documents p {
  font-weight: 700;
  font-family: "Bold", sans-serif;
}
.reg_orders .left_cart {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reg_orders .left_cart .title {
  display: block;
  margin-bottom: 4px;
}
.reg_orders .register, .reg_orders .search {
  background-color: white;
  border-radius: 15px;
  padding: 15px 25px;
}
.reg_orders h2 {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
}
.reg_orders h2::before {
  width: 20px;
  height: 20px;
  display: block;
}
.reg_orders .register h2::before {
  background-image: url("../icons/register_order.svg");
}
.reg_orders .search h2::before {
  background-image: url("../icons/search_articul.svg");
}
.reg_orders .download {
  display: flex;
  align-items: center;
  gap: 8px;
  width: -moz-fit-content;
  width: fit-content;
}
.reg_orders .download::before {
  background-image: url("../icons/download.svg");
  width: 15px;
  height: 15px;
  display: block;
}
.reg_orders .search {
  gap: 0;
  align-self: baseline;
}
.reg_orders .register {
  align-self: baseline;
}
.reg_orders .confirm {
  margin: 20px auto 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 16px;
  display: none;
}
.reg_orders .confirm.active {
  display: flex;
}
.reg_orders .last_confirm {
  margin: 20px auto 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 16px;
}
.reg_orders .search_result {
  margin-top: 20px;
  display: none;
}
.reg_orders .search_result.active {
  display: block;
}
.reg_orders .result_h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reg_orders .search .result_h2::before {
  background-image: url("../icons/serach_result.svg");
  width: 20px;
  height: 20px;
  display: block;
}
.reg_orders .products {
  margin-top: 20px;
  grid-template-columns: 1fr 1fr !important;
  overflow-y: scroll;
  max-height: 450px;
}
.reg_orders .form-file {
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}
.reg_orders input[type=file] {
  display: none;
}
.reg_orders input[type=search] {
  padding: 6px 8px;
  font-size: 14px;
  position: relative;
}
.reg_orders .search_order_label {
  position: relative;
}
.reg_orders .search_order_label::before {
  content: "";
  background-image: url("../icons/search-green.svg");
  width: 15px;
  height: 15px;
  display: block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.reg_orders .upload-btn {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reg_orders .upload-btn::before {
  background-image: url("../icons/upload.svg");
  display: block;
  width: 20px;
  height: 20px;
}
.reg_orders .file-help {
  font-size: 10px;
}
.reg_orders .confirm_result {
  margin-top: 20px;
  display: none;
}
.reg_orders .confirm_result.active {
  display: block;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button {
  display: none; /* Убирает крестик в WebKit-браузерах (Chrome, Safari) */
}

.cart.first {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 50px;
}
.cart.first .left {
  background-color: white;
  border-radius: 15px;
  padding: 15px 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.cart.first .left .title {
  display: block;
  margin-bottom: 4px;
}
.cart.first .right {
  background-color: white;
  border-radius: 15px;
  padding: 15px 25px;
  align-self: baseline;
  position: relative;
}
.cart.first .right .loader {
  border-radius: 15px;
}
.cart.first .right h3 {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 30px;
}
.cart.first .right .line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  margin-bottom: 30px;
}
.cart.first .right .column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
}
.cart.first .right .column p {
  font-size: 14px;
}
.cart.first .right .column p:last-child {
  font-size: 16px;
}
.cart.first .right .result_price {
  font-size: 24px;
}
.cart.first .right .result {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
}
.cart.first .right .buttons {
  display: flex;
  gap: 15px;
  flex-shrink: 0;
}
.cart.first .right .buttons .btn {
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
}
.cart.first .right h3::before {
  background-image: url("../icons/cart.svg");
  width: 18px;
  height: 18px;
  display: block;
}

.js_cart .form {
  gap: 4px;
}

.cart .up {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 20px;
}
.cart .up button {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}
.cart .up button::before {
  background-image: url("../icons/krest-white.svg");
  width: 15px;
  height: 15px;
  display: block;
}
.cart .up h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart .up h2::before {
  background-image: url("../icons/shop-cart-black.svg");
  width: 20px;
  height: 20px;
  display: block;
}

span i {
  color: var(--error);
}

p i {
  color: var(--error);
}

.catalog {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.catalog .brands_list {
  margin-top: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(100px, max-content));
}
.catalog .brands_list a {
  aspect-ratio: 1/1;
  max-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.catalog .brands_list a:hover {
  transform: scale(1.2);
}
.catalog .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.catalog .categories {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.catalog .subs {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  position: relative;
}
.catalog .title {
  font-size: 24px;
}
.catalog .button {
  display: flex;
  align-items: center;
  gap: 6px;
}
.catalog .arrows-down {
  width: 25px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog .arrows-down:hover::after {
  background-image: url("../icons/angle-green.svg");
}
.catalog .arrows-down::after {
  content: "";
  background-image: url("../icons/angle-black.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 16px;
  height: 10px;
  display: block;
  transition: var(--transition);
}
.catalog .button.active .arrows-down::after {
  transform: rotate(180deg);
}
.catalog .button.active + .subs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.catalog .subs a {
  font-size: 16px;
}
.catalog .category {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.catalog .grid-without {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../img/bg_login.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}
.login .password .inputs, .login .password .notis {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.login .password button {
  font-size: 12px;
  width: -moz-fit-content;
  width: fit-content;
}
.login .password .input-box button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 12px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  opacity: 0.7;
  z-index: 3;
}
.login .password .input-box button:hover {
  opacity: 1;
}
.login .password .input-box button {
  background-image: url("../icons/eye-close.svg");
}
.login .password .input-box button.active {
  background-image: url("../icons/eye.svg");
}
.login .password .input-box {
  position: relative;
}
.login h2 {
  margin: 0 auto;
  margin-bottom: 1rem;
}
.login .logo {
  position: absolute;
  top: 20px;
  left: 25px;
}
.login .bg {
  background-color: white;
  border-radius: 20px;
  width: 685px;
  height: 424px;
  padding: 22px 26px 50px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.login .errors {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.login .errors p {
  color: var(--error);
}
.login .errors:empty {
  display: none;
}
.login form {
  width: 60%;
  min-width: 353px;
  overflow: hidden;
}
.login form input {
  height: 35px;
}

.product_page {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 25px;
}
.product_page img {
  -o-object-fit: contain;
     object-fit: contain;
}
.product_page .left {
  display: flex;
  flex-direction: column;
  gap: 30px;
  overflow: hidden;
}
.product_page .left .window {
  position: relative;
  overflow: hidden;
}
.product_page .left .add_favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--green);
}
.product_page .left .add_favorite::before {
  background-image: url("../icons/favorite-white.svg");
  width: 20px;
  height: 20px;
  display: block;
}
.product_page .left .add_favorite:hover {
  background-color: var(--dark-green);
}
.product_page .left .add_favorite::before {
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("../icons/favorite-white.svg");
}
.product_page .left .add_favorite.added {
  background-color: var(--error);
}
.product_page .left .big {
  max-height: 454px;
  aspect-ratio: 1;
  border-radius: 20px;
  background-color: white;
  margin-bottom: 20px;
}
.product_page .left #row_imgs .slick-track {
  display: flex;
  gap: 10px;
}
.product_page .left #row_imgs {
  overflow: hidden;
}
.product_page .left .small {
  border-radius: 15px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
}
.product_page .left .small img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.product_page .left .slick-list {
  margin-left: 2.5px;
}
.product_page .left .arrows {
  justify-content: flex-end;
  gap: 10px;
}
.product_page .left .arrows .slick-prev, .product_page .left .arrows .slick-next {
  position: static;
  transform: none;
  width: 50px;
  border-radius: 5px;
}
.product_page .right {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.product_page .right .info {
  display: flex;
  flex-direction: column;
  gap: 25px;
  background-color: white;
  border-radius: 15px;
  padding: 18px 25px;
}
.product_page .right .up {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.product_page .right .up .same {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
}
.product_page .right .up .same .stor.red {
  color: #D2747D;
}
.product_page .right .up .same .stor.green {
  color: #0a8b43;
}
.product_page .right .up .same .stor.orange {
  color: #F7A100;
}
.product_page .right .specs {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 20px 25px;
  border-radius: 20px;
}
.product_page .right .specs h3 {
  margin-bottom: 1rem;
}
.product_page .right .specs .line {
  display: flex;
  align-items: center;
  gap: 4px;
}
.product_page .right .specs .line span {
  font-size: 15px;
  line-height: 22px;
}
.product_page .right .specs .line::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: var(--green);
}
.product_page .right .middle {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: flex-start;
}
.product_page .right .middle .column:first-child {
  flex-grow: 0.8;
  justify-content: space-between;
  height: 100%;
}
.product_page .right .middle .price {
  font-size: 32px;
}
.product_page .right .middle .column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.product_page .right .middle .column.znak {
  height: 48px;
  justify-content: space-between;
}
.product_page .right .middle .help_modal {
  display: none;
  position: absolute;
  top: 100%;
  left: -40%;
  padding: 10px;
  background-color: white;
  border: 1px solid var(--green);
  border-radius: 10px;
  font-size: 12px;
  width: 200px;
}
.product_page .right .middle .help_modal.active {
  display: block;
}
.product_page .right .middle .with-button {
  display: flex;
  align-items: center;
  gap: 8px;
}
.product_page .right .middle .with-button button {
  color: var(--green);
  border: 2px solid var(--green);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product_page .right .middle .with-button button:hover {
  background-color: var(--green);
  color: white;
}
.product_page .right .down {
  display: flex;
  align-items: flex-end;
}
.product_page .right .down .text {
  margin-bottom: 15px;
}
.product_page .right .down .input {
  display: flex;
  gap: 8px;
  align-items: center;
}
.product_page .right .down .input input {
  width: 50px;
  height: 24px;
  font-size: 12px;
  padding: 6px;
}
.product_page .right .down .add_cart {
  width: -moz-fit-content;
  width: fit-content;
  padding-left: 30px;
  padding-right: 30px;
}
.product_page .right .desc .text {
  margin-bottom: 15px;
}
.product_page .right .desc .body {
  padding-bottom: 40px;
}

.p_page h2 {
  margin-bottom: 1rem;
}

.main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.main .stock .up_line,
.main .notification .up_line,
.main .list_catalog .up_line,
.main .orders .up_line {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.main .stock .up_line span,
.main .notification .up_line span,
.main .list_catalog .up_line span,
.main .orders .up_line span {
  font-size: 12px;
  line-height: 20px;
}
.main .stock h2,
.main .notification h2,
.main .list_catalog h2,
.main .orders h2 {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
.main .stock .arrow,
.main .notification .arrow,
.main .list_catalog .arrow,
.main .orders .arrow {
  margin-left: auto;
  margin-top: 1rem;
  color: var(--green);
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.main .stock .arrow::before,
.main .notification .arrow::before,
.main .list_catalog .arrow::before,
.main .orders .arrow::before {
  background-image: url("../icons/shevron-green.svg");
  display: block;
  width: 12px;
  height: 12px;
  transform: rotate(-90deg);
}

.main .notification .notifications {
  margin-top: 0;
  grid-template-columns: repeat(1, 1fr) !important;
  margin-bottom: 2rem;
}
.main .notification h2::before {
  background-image: url("../icons/call_notis.svg");
  width: 25px;
  height: 25px;
  display: block;
}
.main .notification h2.have::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 15px;
  background-color: var(--error);
  display: block;
}

.main .reg_orders {
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: auto;
}

.main .section {
  margin-top: 20px;
  margin-bottom: 20px;
}

.main .reg_orders {
  gap: 20px;
}

.main .orders {
  background-color: white;
  padding: 20px;
  margin-top: 0;
}
.main .orders .menu {
  grid-template-columns: 1fr;
}
.main .orders .status {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.main .orders .status button {
  font-size: 16px;
}
.main .orders h2::before {
  background-image: url("../icons/cart.svg");
  width: 20px;
  height: 20px;
  display: block;
}

.main .stock h2::before {
  background-image: url("../icons/links/link_stock_black.svg");
  width: 20px;
  height: 20px;
  display: block;
}
.main .stock .block .name {
  font-size: 12px;
}

.main .list_catalog {
  background-color: white;
  margin-top: 0;
}
.main .list_catalog h2 {
  gap: 8px;
}
.main .list_catalog h2::before {
  background-image: url("../icons/links/link_catalog_black.svg");
  width: 20px;
  height: 20px;
  display: block;
}
.main .list_catalog .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.main .list_catalog .list .block {
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.main .list_catalog .list .block:hover .green_light {
  opacity: 0;
}
.main .list_catalog .list img {
  border-radius: 8px;
}
.main .list_catalog .list .title {
  font-size: 12px;
  color: white;
  font-family: "Bold", sans-serif;
  font-weight: 700;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 5;
  text-align: center;
}
.main .list_catalog .list .green_light {
  transition: var(--transition);
  opacity: 1;
  position: absolute;
  top: 30%;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #0A8B43 100%);
}

.main .orders .menu .status {
  grid-template-columns: repeat(1, 1fr);
}
.main .orders .menu .status button {
  height: 50px;
  font-size: 14px;
  border-radius: 10px;
}

.mobile_bar {
  display: none;
  position: fixed;
  top: 30px;
  right: 30px;
  width: 70px;
  height: 70px;
  background-color: var(--green);
  border-radius: 50%;
}
.mobile_bar img {
  width: 40px;
  height: 40px;
}

.mobile_sidebar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--green);
  height: 85px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  display: none;
}
.mobile_sidebar .hop {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 40px;
  height: 40px;
  display: block;
}
.mobile_sidebar .search_btn {
  background-image: url("../icons/search-white.svg");
}
.mobile_sidebar .call_btn {
  background-image: url("../icons/call-white.svg");
}
.mobile_sidebar .favorit_btn {
  background-image: url("../icons/favorite-white.svg");
}
.mobile_sidebar .cart_btn {
  background-image: url("../icons/cart-white.svg");
}
.mobile_sidebar a {
  position: relative;
}
.mobile_sidebar .call_btn::after, .mobile_sidebar .favorit_btn::after, .mobile_sidebar .cart_btn::after {
  content: attr(data-count);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background-color: var(--error);
  border-radius: 50%;
  font-size: 10px;
  width: 20px;
  height: 20px;
  color: white;
}

.over {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
}

.success_html {
  background-color: white;
  border-radius: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  z-index: 1000;
  width: 90%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.success_html h2 {
  font-size: 40px;
  font-family: "Bold", sans-serif;
  font-weight: 700;
  text-align: center;
}
.success_html h3 {
  font-size: 30px;
  font-family: "Regular", sans-serif;
  font-weight: 400;
  text-align: center;
}
.success_html img {
  width: 50px;
  height: 60px;
}
.success_html .download {
  color: var(--green);
  text-decoration: underline;
  font-size: 20px;
}
.success_html .download:hover {
  text-decoration: none;
}
.success_html .with_a a {
  display: inline;
  color: var(--green);
  text-decoration: underline;
  font-size: 20px;
}
.success_html p {
  font-size: 20px;
  text-align: center;
}
.success_html p.small {
  font-size: 16px;
}
.success_html .flex {
  display: flex;
  gap: 50px;
}
.success_html .flex .column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.success_html .close {
  position: absolute;
  top: 20px;
  right: 20px;
  background-image: url("../icons/x-svg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  display: block;
  background-color: var(--green);
  border-radius: 50%;
}
.success_html .close:hover {
  background-color: var(--dark-green);
}
.success_html .btn {
  margin-top: 40px;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 700;
  font-family: "Bold", sans-serif;
  font-size: 16px;
  border-radius: 7px;
}
.success_html .btn:hover {
  background-color: var(--dark-green);
  color: white;
  text-decoration: none;
}

.cart_total {
  color: var(--text);
  font-size: 12px;
}

.products .lost {
  grid-template-columns: span 2;
  position: absolute;
  top: 0;
  width: 100%;
}

.go_to_page {
  cursor: pointer;
}

.lost {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.lost h1 {
  text-align: center;
}
.lost p {
  margin-top: 2rem;
  font-size: 20px;
  text-align: center;
}
.lost p a {
  display: inline;
  font-size: 20px;
  color: var(--green);
  text-decoration: underline;
}

.catalog-products {
  display: grid;
  grid-template-columns: 1fr 316px;
  gap: 30px;
  position: relative;
}
.catalog-products .mobile_hidden {
  background-image: url("../icons/angle-black.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-left: auto;
  display: none;
}
.catalog-products .sort {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  grid-column: span 2;
  background-color: white;
  padding: 20px;
  border-radius: 10px 10px 0 0;
}
.catalog-products .sort button[data-tsort=price][data-sort=up] {
  content: "По возрастанию цены";
}
.catalog-products .sort .sort_box {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
}
.catalog-products .sort .sort_box button {
  display: none;
}
.catalog-products .sort .sort_box button.active {
  display: block;
  color: var(--green);
}
.catalog-products .sort .sort_box button.current {
  text-decoration: underline;
}
.catalog-products .sort .sort_box button:hover {
  color: var(--dark-green);
}
.catalog-products .sort .sort-select {
  margin-left: auto;
}
.catalog-products .sort .sort-select span {
  margin-bottom: 6px;
  display: block;
  margin-left: auto;
  width: -moz-max-content;
  width: max-content;
}
.catalog-products .sort .select {
  position: relative;
  width: 100%;
  width: 200px;
}
.catalog-products .products {
  position: relative;
}
.catalog-products .buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.catalog-products .buttons button {
  font-weight: 700;
  font-size: 14px;
}
.catalog-products .products {
  background-color: white;
  padding: 20px;
  border-radius: 0 0 10px 10px;
  height: -moz-max-content;
  height: max-content;
}
.catalog-products .filters {
  position: sticky;
  top: 90px;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  height: -moz-max-content;
  height: max-content;
}
.catalog-products h3 {
  margin-bottom: 1rem;
}
.catalog-products .title {
  color: rgb(170, 170, 170);
  margin-bottom: 1rem;
}
.catalog-products .uislider {
  width: 90%;
  margin: 0 auto;
}
.catalog-products .filter {
  margin-bottom: 1rem;
}
.catalog-products .filter:first-of-type {
  margin-bottom: 3rem;
}
.catalog-products .filter.scroll-filter {
  max-height: 250px;
  overflow: auto;
}
.catalog-products .brands {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.catalog-products .brands label {
  display: flex;
  align-items: center;
  gap: 4px;
}
.catalog-products .brands span {
  font-size: 12px;
}
.catalog-products .brands input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}
.catalog-products .down-up {
  margin-top: 10px;
  color: var(--green);
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.catalog-products .down-up::after {
  background-image: url("../icons/angle-green.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 10px;
  height: 6px;
  display: block;
  transition: var(--transition);
  transform: rotate(180deg);
}
.catalog-products .down-up.active::after {
  transform: rotate(0deg);
}
.catalog-products .spec label {
  display: flex;
  gap: 4px;
}

.catalog_products_btn.show {
  display: block;
}

.catalog_products_btn.hide {
  display: none;
}

.nomanager {
  font-weight: 700;
}

.white-bg {
  background-color: white;
  border-radius: 20px;
}

#overlay {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
}
#overlay.active {
  display: block;
}

.filter .radio_box {
  display: flex;
  align-items: center;
  gap: 14px;
}

.filter .changer {
  position: relative;
  width: 35px;
  height: 11px;
  border-radius: 20px;
  background-color: rgb(245, 245, 245);
  transition: var(--transition);
}

.filter .changer::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: rgb(217, 217, 217);
  border-radius: 50%;
  transition: var(--transition);
}

.filter .radio_box input {
  position: absolute;
  left: -9999px;
}

.filter .radio_box label {
  font-family: "Light", sans-serif;
  font-weight: 300;
  cursor: pointer;
}

.filter .radio_box input:not(:checked) + .changer {
  background-color: rgba(10, 139, 67, 0.5);
}

.filter .radio_box input:not(:checked) + .changer::before {
  left: 50%;
  background-color: rgb(10, 139, 67);
}

.filter .radio_box label {
  display: flex;
  align-items: center;
  gap: 14px;
}

.filter .radio_box span {
  transition: var(--transition);
}

.filter .radio_box .left:hover span {
  opacity: 0.7;
  text-decoration: underline;
}

.filter .radio_box .right:hover span {
  opacity: 0.7;
  text-decoration: underline;
}

.error-message {
  background-color: var(--dark-green);
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  top: 100px;
  left: 50%;
  min-width: 200px;
  min-height: 100px;
  transform: translateX(-50%);
  display: flex;
  visibility: hidden;
  opacity: 0;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: var(--transition);
}
.error-message.active {
  visibility: visible;
  opacity: 1;
}
.error-message .message {
  text-align: center;
  color: white;
  font-size: 14px;
  font-weight: 700;
  font-family: "Bold", sans-serif;
}
.error-message button {
  background-image: url("../icons/x.svg");
  position: absolute;
  top: 6px;
  right: 6px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.error-message button:hover {
  opacity: 0.7;
}

.mr-top {
  margin-top: 1rem;
}

.f-button svg {
  stroke: var(--green);
}

.not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.not-btn {
  margin-left: auto;
  font-weight: 700;
  font-size: 18px;
  border-radius: 6px;
  text-decoration: underline;
  border-top: 1px solid white;
}
.not-btn:hover {
  background-color: var(--green);
  color: white;
  opacity: 0.7;
}

.cats_filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.green {
  color: var(--green);
  font-size: 20px;
  text-decoration: none !important;
}
.green.small {
  font-size: 14px;
  font-weight: 900;
}

.slow-flow {
  opacity: 0;
  transition: var(--transition);
  animation: fadeIn 0.6s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.accordion-content {
  display: none;
  opacity: 0;
  transition: var(--transition);
  animation: fadeIn 0.6s ease-in-out forwards;
  gap: 8px;
  flex-direction: column;
}
.accordion-content.active {
  display: flex;
  opacity: 1;
}

.cats_filter .accordion-header {
  width: 98%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.cats_filter .accordion-header:hover {
  opacity: 0.7;
}
.cats_filter .accordion-header::after {
  content: "";
  background-image: url("../icons/angle-green.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 10px;
  height: 6px;
  display: block;
  transition: var(--transition);
  transform: rotate(180deg);
}
.cats_filter .accordion-header.active {
  text-decoration: underline;
  color: var(--green);
}
.cats_filter .accordion-header.active::after {
  transform: rotate(0deg);
}/*# sourceMappingURL=style.css.map */