/* SVG ICONS */
.svg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
}
.svg.wrapper {
  --icon-size: 20px;
  display: flex;
  width: var(--icon-size);
  height: var(--icon-size);
  place-content: center;
  place-items: center;
}
.svg.d-inline-flex {
  display: inline-flex;
}
.svg.wrapper--12 {
  --icon-size: 12px;
}
.svg.wrapper--16 {
  --icon-size: 16px;
}
.svg.wrapper--32 {
  --icon-size: 32px;
}
@media (any-hover: hover) {
  .svg.wrapper--hover:hover {
    background-color: var(--darkerblack_bg_black);
  }
}
.svg--16-16 {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.svg-drag {
  background-image: url(../images/svg/drag.svg);
  width: 5px;
  height: 17px;
  top: -5px;
}
.bx-firefox svg,
.bx-ie svg {
  transform: translateZ(0);
}
.svg svg {
  display: block;
}
.svg.inline.white svg path,
.svg.inline.white svg use  {
  fill: #fff;
}
.svg.inline.dark svg path,
.svg.inline.dark svg use {
  fill: #222228;
}
.svg.white-stroke svg path,
.svg.white-stroke svg use {
  stroke: #fff;
}
.svg.dark-stroke svg path,
.svg.dark-stroke svg use{
  stroke: #222228;
}
.svg-phone {
  margin: 0 9px 0 0;
  min-width: 9px;
  min-height: 12px;
  background-image: url(../images/svg/Phone_black.svg);
}
.svg-burger {
  background-image: url(../images/svg/burger_black.svg);
}
.svg-burger.mask {
  background-color: #222;
  background-image: url(../images/svg/Burger_mask.svg);
}
.svg-burger.white {
  background-image: url(../images/svg/burger_white.svg);
}
.svg-burger.white.lg {
  background-image: url(../images/svg/Burger_big_white.svg);
}

.svg-basket {
  background-color: #222;
  background-image: url(../images/svg/Basket_mask.svg);
}
.svg-basket.white {
  min-width: 18px;
  min-height: 17px;
  background: none;
  background-image: url(../images/svg/Basket_white.svg);
}
.svg-basket.white.lg {
  background: none;
  background-image: url(../images/svg/Basket_big_white.svg);
}
.svg-spinner {
  background-image: url(../images/svg/Spinner.svg);
  margin-right: 5px;
}

.svg-fullsize {
  background: none;
  background-image: url(../images/svg/Fullsize.svg);
}

.svg-social-vk {
  background-image: url(../images/svg/social/Vk_mask.svg);
  background-color: #222;
}
.svg-social-fb {
  background-image: url(../images/svg/social/Facebook_mask.svg);
  background-color: #222;
}
.svg-social-twitter {
  background-image: url(../images/svg/social/Twitter_mask.svg);
  background-color: #222;
}
.svg-social-instagram {
  background-image: url(../images/svg/social/Instagram_mask.svg);
  background-color: #222;
}
.svg-social-telegram {
  background-image: url(../images/svg/social/Telegram_mask.svg);
  background-color: #222;
}
.svg-social-ytb {
  background-image: url(../images/svg/social/Youtube_mask.svg);
  background-color: #222;
}
.svg-social-odn {
  background-image: url(../images/svg/social/Odnoklassniki_mask.svg);
  background-color: #222;
}
.svg-social-gplus {
  background-image: url(../images/svg/social/Googleplus_mask.svg);
  background-color: #222;
}
.svg-social-mail {
  background-image: url(../images/svg/social/Mailru_mask.svg);
  background-color: #222;
}

.no-fill-svg,
.no-fill-svg *{
  fill: none!important;
}
.svg-wrapper {
  --height: auto;
  --width: auto;

  display: grid;
  height: var(--height);
  place-content: center;
  width: var(--width);
}
.svg-wrapper--lg {
  --height: 20px;
  --width: 20px;
}

.secondary-color svg path {
  fill: #b8b8b8;
}
.secondary-color svg rect {
  stroke: #b8b8b8;
}
.secondary-color-use use {
  opacity: 0.35;
}
.secondary-color-use-no-hover:not(:hover) use {
  opacity: 0.35;
}