:root {
	--MainChatBlockHeightTop: calc(700px - 56px);
}

@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");

$background: #fafbff;
$button-width: 120px;
$border-radius: 5px;

html {
  font-family: "Fredoka One", cursive;
  background-color: $background;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  flex-flow: column;
  overflow:auto;
  top: 0;
  left: 0;
  padding: 5px 20px;
}

h1 {
  display: inline-block;
  position: relative;
  margin: 2.5rem 0.5rem 0.5rem 50px;
  background: $background;
  font-size: 1.68rem;
  font-weight: bold;
  padding: 0 10px;
  &::before {
    width: calc(100% + 80px);
    height: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #1a1a1a;
    content: "";
    z-index: -1;
  }
}

.click-btn {
  display: flex;
  width: $button-width;
  height: 40px;
  justify-content: center;
  align-items: center;
  margin: 0.5rem;
  line-height: 35px;
  border: 1px solid;
  border-radius: $border-radius;
  text-align: center;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  transition: all 0.35s;
  box-sizing: border-box;
	width: 100%;
}

.buttons-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.updating {
  margin: 3em;
  text-align: center;
}

// button style

.btn-style1 {
  $btn-color: #979695;
  $btn-hover-color: #5e5e5e;
  position: relative;
  border-color: $btn-color;
  color: $btn-color;
  &:hover {
    transform: translateY(-0.25em);
    border-color: $btn-hover-color;
    color: $btn-hover-color;
    &::before {
      opacity: 1;
    }
  }
  &::before {
    width: 100%;
    height: 1em;
    position: absolute;
    left: 0;
    bottom: -1.35em;
    background: radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 80%
    );
    opacity: 0;
    transition: all 0.65s;
    content: "";
  }
}

.btn-style2 {
  $btn-color: #dd7e2a;
  $btn-hover-color: #b5c952;
  border-color: $btn-color;
  color: $btn-color;
  &:hover {
    box-shadow: 0 0.25em 0.25em -0.1em $btn-hover-color;
    transform: translateY(-0.25em);
    border-color: $btn-hover-color;
    color: $btn-hover-color;
  }
}

.btn-style3 {
  $btn-color: #979695;
  $btn-hover-color: #5e5e5e;
  border-color: $btn-color;
  color: $btn-color;
  &:hover {
    transform: translateY(-0.25em);
    box-shadow: 0 0 0.5em 0em $btn-hover-color;
    border-color: $btn-hover-color;
    color: $btn-hover-color;
  }
}

.btn-style4 {
  $btn-color: #716eef;
  $btn-hover-color: #dd648a;
  border-color: $btn-color;
  color: $btn-color;
  &:hover {
    box-shadow: inset 0 0 0.55em 0em $btn-hover-color;
    border-color: $btn-hover-color;
    color: $btn-hover-color;
  }
}

.btn-style5 {
  $btn-color: #979695;
  $btn-hover-color: #dd6395;
  $offset: 0.3em;
  border-color: $btn-color;
  color: $btn-color;
  box-shadow: $offset $offset 0 $btn-hover-color;
  &:hover {
    box-shadow: (-$offset) (-$offset) 0 $btn-color;
    background-color: $btn-hover-color;
    border-color: $btn-hover-color;
    color: #fff;
  }
}

.btn-style500 {
  $btn-color: #716eef;
  border-color: $btn-color;
  color: $btn-color;
  &:hover {
    color: #fff;
    transition-delay: 0.2s;
    animation: ani500 0.6s forwards;
    background: radial-gradient(circle, $btn-color 0.2em, transparent 0.3em) 6em
        6em/1em 1em,
      radial-gradient(circle, $btn-color 0.2em, transparent 0.3em) 0 0/1em 1em;
  }
}
@keyframes ani500 {
  100% {
    background-size: 2.375em 2.375em, 0.1em 0.1em;
  }
}

.btn-style501 {
  $btn-color: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);
  background-image: $btn-color;
  background-size: 200% auto;
  background-position: left top;
  border-color: transparent;
  color: #464646;
  &:hover {
    background-position: right bottom;
    color: #000;
  }
}

.btn-style502 {
  $btn-color1: #716eef;
  $btn-color2: #fbb8a9;
  $btn-gradient: #c15b44;
  border-color: $btn-color1;
  color: #fff;
  background: repeating-linear-gradient(
    40deg,
    $btn-color1 0%,
    $btn-color1 5%,
    $btn-color2 5%,
    $btn-gradient 10%
  );
  text-shadow: 1px 1px 0em #000;
  &:hover {
    background-position: 120px;
    text-shadow: 2px 2px 0.2em #000;
  }
}

.btn-style503 {
  $btn-color: #dd6395;
  $btn-hover-color: #dd7e2a;
  border-color: $btn-color;
  color: $btn-color;
  transition: all 0.5s;
  &:hover {
    box-shadow: inset 5em 0 0 0 $btn-hover-color,
      inset -5em 0 0 0 $btn-hover-color;
    border-color: $btn-hover-color;
    color: #fff;
  }
}

.btn-style504 {
  $btn-color: #dd7e2a;
  $btn-hover-color: #dd648a;
  border-color: $btn-color;
  color: $btn-color;
  transition: all 0.5s;
  &:hover {
    box-shadow: inset 0 1.5em 0em 0em $btn-hover-color,
      inset 0 -1.5em 0em 0em $btn-hover-color;
    border-color: $btn-hover-color;
    color: #fff;
  }
}

.btn-style505 {
  $btn-color: #716eef;
  $btn-hover-color: #dd648a;
  border-color: $btn-color;
  color: $btn-color;
  transition: all 0.5s;
  &:hover {
    box-shadow: inset 0 0 0 2em $btn-hover-color;
    border-color: $btn-hover-color;
    color: #fff;
  }
}

.btn-style506 {
  $btn-color: #dd7e2a;
  position: relative;
  border-color: $btn-color;
  color: $btn-color;
  overflow: hidden;
  &::before {
    width: 20%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    background-color: $btn-color;
    transform: rotateZ(-45deg) translate(-50%, -50%);
    transition: all 0.3s;
    content: "";
    z-index: -1;
  }
  &:hover {
    color: #fff;
    &::before {
      width: 100%;
      top: 0;
      transform: none;
    }
  }
}

.btn-style507 {
  $btn-color: #dd6395;
  position: relative;
  border-color: $btn-color;
  color: $btn-color;
  overflow: hidden;
  &::before {
    width: 15%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: $btn-color;
    transform: rotateZ(-45deg) translate(-50%, -50%);
    transition: all 0.3s;
    content: "";
    z-index: -1;
  }
  &:hover {
    color: #fff;
    transition-delay: 0.35s;
    // background-color:$btn-color;
    &::before {
      animation: ani507 0.6s forwards;
    }
  }
}
@keyframes ani507 {
  10% {
    width: 0;
    transform: rotateZ(-45deg) translate(-100%, -50%);
  }
  20% {
    width: 0;
    transform: rotateZ(0) translate(-100%, 85%);
  }
  60% {
    width: 100%;
    transform: rotateZ(0) translate(0, 85%);
  }
  100% {
    width: 100%;
    transform: rotateZ(0) translate(0, 0);
  }
}

.btn-style508 {
  $btn-color: #5e5e5e;
  $btn-hover-color: #117831;
  position: relative;
  border-color: $btn-color;
  color: $btn-color;
  overflow: hidden;
  &::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: $border-radius;
    transform: translate(-100%, 0) rotate(50deg);
    transform-origin: top left;
    transition: all 0.35s;
    background-color: $btn-hover-color;
    z-index: -1;
    content: "";
  }
  &:hover {
    color: #fff;
    border-color: $btn-hover-color;
    &::before {
      transform: translate(0, 0);
    }
  }
}

.btn-style509 {
  $btn-color: #716eef;
  $btn-hover-color: #4b48cb;
  position: relative;
  background-color: $btn-color;
  border-color: $btn-color;
  color: #fff;
  &::before,
  &::after {
    width: 49px;
    height: 35px;
    position: absolute;
    border-radius: 50%;
    background-color: $btn-hover-color;
    transition: all 1s ease;
    transform: scale(0);
    content: "";
    z-index: -1;
  }
  &::before {
    top: -8px;
    left: 10%;
  }
  &::after {
    bottom: -8px;
    right: 15%;
  }
  &:hover {
    background-color: $btn-hover-color;
    border-color: $btn-hover-color;
    &::before,
    &::after {
      transform: scale(1);
    }
  }
}

.btn-style510 {
  $btn-color: #5e5e5e;
  $btn-hover-color: #dd6395;
  position: relative;
  background-color: $btn-color;
  border-color: $btn-color;
  color: #fff;
  overflow: hidden;
  &::before,
  &::after {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100px) skewX(-15deg);
    content: "";
  }
  &::before {
    width: 60px;
    background: rgba(255, 255, 255, 0.5);
    filter: blur(30px);
    opacity: 0.5;
  }
  &::after {
    width: 30px;
    left: 30px;
    background: rgba(255, 255, 255, 0.2);
    filter: blur(5px);
  }
  &:hover {
    background-color: $btn-hover-color;
    border-color: $btn-hover-color;
    &::before {
      opacity: 1;
    }
    &::before,
    &::after {
      transform: translateX(300px) skewX(-15deg);
      transition: all 0.9s ease;
    }
  }
}

.btn-style511 {
  $btn-color: transparent;
  $btn-hover-color: #dd6395;
  position: relative;
  border-color: $btn-color;
  background-color: $btn-color;
  color: #484848;
  overflow: hidden;
  span {
    position: relative;
    z-index: 2;
  }
  &::before,
  &::after {
    width: 100%;
    height: 50%;
    position: absolute;
    left: 0;
    background-color: $btn-hover-color;
    transition: all 0.25s;
    content: "";
    z-index: 1;
  }
  &::before {
    top: 0;
    transform: translate(-100%, 0);
  }
  &::after {
    bottom: 0;
    transform: translate(100%, 0);
  }
  &:hover {
    color: #fff;
    &::before,
    &::after {
      transform: translate(0, 0);
    }
  }
}

.btn-style700 {
  $btn-color: #979695;
  $btn-hover-color: #dd6395;
  position: relative;
  border-color: $btn-color;
  color: $btn-color;
  &::before,
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    border-color: $btn-hover-color;
    border-radius: $border-radius;
    border-style: solid;
    transition: all 0.35s;
    content: "";
    z-index: 1;
  }
  &::before {
    width: 0;
    height: 100%;
    border-width: 1px 0 1px 0;
  }
  &::after {
    width: 100%;
    height: 0;
    border-width: 0 1px 0 1px;
  }
  &:hover {
    border-color: $btn-hover-color;
    color: $btn-hover-color;
    &::before {
      width: 100%;
      border-width: 1px 0 1px 0;
    }
    &::after {
      height: 100%;
      border-width: 0 1px 0 1px;
    }
  }
}

.btn-style701 {
  $btn-color: #dd6395;
  $btn-hover-color: #dd2470;
  $size: 8px;
  $offset: 50%;
  position: relative;
  border: none;
  // border-color:$btn-color;
  color: $btn-color;
  span {
    width: 100%;
    display: block;
    position: relative;
  }
  &::before,
  &::after,
  span::before,
  span::after {
    width: $size;
    height: $size;
    position: absolute;
    transition: all 0.5s;
    border: 3px solid $btn-color;
    opacity: 0;
    content: "";
  }
  &::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none;
    transform: translate(-$offset, -$offset);
  }
  &::after {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none;
    transform: translate(-$offset, $offset);
  }
  span::before {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none;
    transform: translate($offset, -$offset);
  }
  span::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none;
    transform: translate($offset, $offset);
  }
  &:hover {
    font-size: 16.5px;
    color: $btn-hover-color;
    &::before,
    &::after,
    span::before,
    span::after {
      opacity: 1;
      border-color: $btn-hover-color;
      transform: translate(0%, 0%);
    }
  }
}

.btn-style702 {
  $btn-color: #716eef;
  position: relative;
  border-color: transparent;
  color: #fff;
  &::before,
  &::after {
    height: 100%;
    position: absolute;
    top: 0;
    transition: all 0.3s;
    content: "";
  }

  &::before {
    width: 100%;
    left: 0;
    border-radius: $border-radius;
    background-color: $btn-color;
    z-index: -1;
  }
  &::after {
    width: 0;
    left: 50%;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transform: translate(-50%, 0);
    z-index: 1;
  }
  &:hover {
    color: $btn-color;
    &::before {
      transform: scale(0, 1);
    }
    &::after {
      width: 100%;
      border-color: $btn-color;
      transition-delay: 0.2s;
    }
  }
}

.btn-style703 {
  $btn-color: #dd7e2a;
  $transition-sec: 0.3;
  position: relative;
  background-color: $btn-color;
  border-color: $btn-color;
  color: #fff;
  &::before,
  &::after,
  span::before,
  span::after {
    width: 110%;
    height: 130%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all #{$transition-sec}s;
    border: 0px solid $btn-color;
    content: "";
  }
  &::before {
    border-top-width: 1px;
    transition-delay: #{$transition-sec}s;
    transform-origin: right top;
  }
  &::after {
    border-bottom-width: 1px;
    transition-delay: #{$transition-sec * 3}s;
    transform-origin: left bottom;
  }
  span {
    &::before {
      border-left-width: 1px;
      transition-delay: #{$transition-sec * 2}s;
      transform-origin: left top;
    }
    &::after {
      border-right-width: 1px;
      transform-origin: right bottom;
    }
  }
  &:hover {
    &::before,
    &::after,
    span::before,
    span::after {
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

.btn-style900 {
  $btn-color: rgba(221, 99, 149, 1);
  $btn-hover-color: #dd2a73;
  position: relative;
  border-color: $btn-color;
  color: rgba(221, 99, 149, 1);
  transition-delay: 0.3s;
  overflow: hidden;
  &:hover {
    transform: translateY(-0.3em);
    border-color: $btn-hover-color;
    color: rgba(221, 99, 149, 0);
    transition-delay: 0s;
    &::before {
      opacity: 1;
      transform: translateX(0);
      transition-delay: 0.15s;
    }
  }
  &::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    content: attr(data-hover);
    color: $btn-color;
    text-align: center;
    transform: translateX(-60%);
    transition: all 0.4s;
    z-index: 1;
  }
}

.btn-style901 {
  $btn-color: #dd7e2a;
  position: relative;
  background-color: $btn-color;
  border-color: $btn-color;
  color: #fff;
  overflow: hidden;
  &::before {
    width: 25px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "\f054";
    font-family: "FontAwesome";
    font-weight: bold;
    font-size: 10px;
    color: #fff;
    text-indent: 5px;
    border-radius: 0 50% 50% 0;
    background-color: rgb(223 183 148 / 73%);
    transform: translate(-20%, 0) scale(0, 1);
    transform-origin: left center;
    transition: all 0.25s;
    z-index: 1;
  }
  &:hover {
    text-indent: 20px;
    &::before {
      transform: translate(-20%, 0) scale(1, 1);
    }
  }
}

.btn-style902 {
  $btn-color: #dd6395;
  position: relative;
  border-color: $btn-color;
  background-color: $btn-color;
  color: #fff;
  overflow: hidden;
  span[data-name="hover"] {
    display: inline-block;
    transition: all 0.25s;
    transform: translate(0, 0);
  }
  span[data-name="me"] {
    margin-left: 0.25em;
    transition: all 0.25s;
    opacity: 1;
  }
  .block {
    width: 30%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -30%;
    background-color: rgba(237, 157, 190, 0.5);
    border-radius: 0 200% 200% 0;
    transition: all 0.25s;
    z-index: 1;
    span {
      display: block;
      &::before {
        content: "\f054";
        font-family: "FontAwesome";
      }
    }
  }
  &:hover {
    span[data-name="me"] {
      opacity: 0;
    }
    span[data-name="hover"] {
      transition-delay: 0.2s;
      transform: translate(1.5em, 0);
    }
    .block {
      transition-delay: 0.2s;
      left: 0;
    }
  }
}

.btn-style903 {
  $btn-color: #716eef;
  position: relative;
  border-color: $btn-color;
  color: $btn-color;
  &::before {
    width: 15px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    transition: all 0.2s;
    transition-delay: 0.1s;
    background: $btn-color;
    content: "";
  }
  &:hover {
    background-color: $btn-color;
    color: #fff;
    &::before {
      left: 100%;
      transform: translate(-100%, -50%);
      background-color: #fff;
    }
  }
}

.btn-style904 {
  $btn-color: #dd7e2a;
  $arrow-background: rgb(223 183 148 / 73%);
  position: relative;
  background-color: $btn-color;
  border-color: $btn-color;
  color: #fff;
  overflow: hidden;
  span {
    position: relative;
    left: -0.5em;
    transition: all 0.25s;
  }
  &::before,
  &::after {
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-color: $arrow-background;
    transition: all 0.25s;
    color: #fff;
  }
  &::before {
    width: 25px;
    content: "\f054";
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "FontAwesome";
    font-size: 10px;
    font-weight: bold;
    text-indent: 5px;
    border-radius: 50% 0 0 50%;
    z-index: 1;
  }
  &::after {
    width: 100%;
    transform: translate(100%, 0);
    content: attr(data-hover);
    text-align: left;
    text-indent: 8px;
  }
  &:hover {
    border-color: $arrow-background;
    span {
      left: -100%;
    }
    &::before {
      right: 70%;
    }
    &::after {
      right: 70%;
    }
  }
}

.btn-style905 {
  $btn-color: #716eef;
  $btn-hover-color: #3936af;
  $btn-border-width: 5px;
  $btn-hover-radius: 20px;
  position: relative;
  background-color: $btn-color;
  border-width: $btn-border-width;
  border-color: $btn-color;
  color: #fff;
  box-sizing: border-box;
  &::before {
    width: 120%;
    height: 155%;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: $btn-hover-radius;
    border: 1px solid $btn-hover-color;
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.1);
    transform-origin: center center;
    transition: all 0.25s;
    content: "";
  }
  &:hover {
    background-color: $btn-hover-color;
    border-color: $btn-color;
    border-style: inset;
    border-radius: $btn-hover-radius;
    &::before {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

.btn-style906 {
  $btn-color: #bf7b7b;
  $btn-hover-color: #8b5252;
  position: relative;
  background: $btn-color;
  border-color: $btn-color;
  color: #fff;
  overflow: hidden;
  &::before {
    width: 0;
    height: 4.5px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #562424;
    transition: all 0.35s;
    content: "";
    z-index: 2;
  }
  &::after {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: $border-radius;
    background-color: $btn-hover-color;
    transform: translate(0, -100%);
    transition: all 0.35s;
    content: attr(data-hover);
    z-index: 1;
  }
  &:hover {
    &::before {
      width: 100%;
    }
    &::after {
      transform: translate(0, 0);
    }
  }
}

.MainBlock {
	padding: 10px;
	margin-top: 30px;
	border-radius: 4px;
}
.MainBlockTwoFlexBlock {
	display: flex;
}
.MainBlockTwoFlexBlock>div {
	width: 50%;
	background-color: #fff;
	height: fit-content;
}
.MainBlockTwoFlexBlock>div:nth-child(1) {
	margin-right: 20px;
}
.MainBlockTwoFlexBlockMainImgBlock {
	width: 100%;
/*	height: 300px;*/
	border-radius: 4px;
}
.MainBlockTwoFlexBlockText {
	font-size: 18px;
}
.MainBlockTwoFlexBlockText>span, .MainBlockTwoFlex_TextAmount>div>span {
	font-weight: bold;
}
.MainBlockTwoFlex_TextAmount {
	display: flex;
	width: 100%;
	margin-block: 20px;
	background: #f1f1f1;
	border-radius: 4px;
	padding-left: 10px;
}
.MainBlockTwoFlex_TextAmount>div {
	margin-right: auto;
	margin: 10px 0;
}
.MainBlockTwoFlex_TextAmount>a {
	margin: auto;
	margin-right: 0;
	background-color: #8bc34a;
	padding: 8px 14px;
	color: #fff;
	border-radius: 4px;
}
.MainBlockTwoFlex_TextAmount>a:hover {
	opacity: .8;
}
.MainBlockTwoFlexBlockFooterTextBlock {
	width: 100%;
	margin-top: 20px;
	background: #fff;
	padding: 12px 20px;
	border-radius: 4px;
}
.MainBlockTwoFlexBlockFooterTextBlock>a:nth-child(1) {
	font-size: 18px;
	margin-bottom: 6px;
	font-weight: bold;
}

.MainTovarSlider {
	display: flex;
	transition: auto;
	overflow: hidden;
	flex-direction: column;
	border-radius: 4px;
	width: 90%;
	margin: auto;
}
.lSSlideOuter {
	width: 98%;
	margin: auto;
	overflow: hidden;
	border-radius: 4px;
}

.MainTovarSlider_Block {
	margin: 10px 0;
	cursor: pointer;
	padding: 4px 8px;
}

.MainTovarSlider_Block_Img {
	display: flex;
	width: 100%;
/*	height: 100%;*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 4px;
	border: 1px solid #2c2c2c;
	cursor: pointer;
/*	overflow: hidden;*/
	user-select: none;
	pointer-events: none;
}
.lSSlideWrapper {
	position: relative;
}
.lSSlideWrapper>.lSAction {
	display: flex;
	width: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	cursor: cell;
	bottom: 0;
}
.lSSlideWrapper>.lSAction>a {
	height: 100%;
	width: 60px;
	display: flex;
	cursor: pointer;
	position: relative;
}
.lSSlideWrapper>.lSAction>a.lSPrev {
	margin-right: auto;
}
.lSSlideWrapper>.lSAction>a.lSNext {
	margin-left: auto;
}
.lSSlideWrapper>.lSAction>a::before {
	content: "";
	width: 30px;
	height: 30px;
	margin: auto;
}
.lSSlideWrapper>.lSAction>a.lSPrev::before {
	background-image: url(/templates/main/assets/svg/Left.svg);
}
.lSSlideWrapper>.lSAction>a.lSNext::before {
	background-image: url(/templates/main/assets/svg/Right.svg);
}
.lSSlideWrapper>.lSAction>a:hover {
	background-color: #0000001c;
	cursor: pointer;
}
ul {
	list-style: none outside none;
	padding-left: 0;
	margin: 0;
}
.lSPager {
	display: flex;
	user-select: none;
	cursor: pointer;
/*	height: 60px;*/
}
.lSPager>li>div>img {
/*	height: 60px;*/
	width: 100%;
	background-position: center;
	border: 1px solid #2c2c2c;
	border-radius: 4px;
	user-select: none;
	pointer-events: none;
	margin: 0 -6px;
}
.lSPager>.active>div>img {
	border: 1px solid #f44336;
}

.fancybox__slide {
	transition: 0s;
}

.fancybox__container {
	transition: .5s;
}

.MainTovarSliderBlock {
	display: flex;
	user-select: none;
	flex-direction: column;
}

.BodyMainBlock {
	height: calc(100% - 56px);
	display: flex;
}

.MainAuthBlock {
	display: flex;
	flex-direction: column;
	margin: auto;
	padding: 12px;
	background-color: #f1f1f1;
	border-radius: 6px;
	max-width: 420px;
	width: 100%;
	border: 2px solid #c9c9c9;
	position: relative;
}

.MainAuthBlock>div:nth-child(1) {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
}

.MainAuth_InputFormBlock>div {
	margin-bottom: 4px;
}

.MainAuth_InputFormBlock>input {
	width: 100%;
	padding: 8px 12px;
	border: 2px solid #a1a1a1;
	border-radius: 4px;
	display: flex;
}

.MainAuth_ButtonFormBlock {
	width: 100%;
	text-align: center;
	margin-top: 14px;
	border-radius: 4px;
	padding: 8px 12px;
	font-weight: bold;
	color: #fff;
	background-color: #3f51b5;
	outline: transparent;
	border-color: transparent;
}

button, button:active, button:target, button:focus, button:focus-visible, button:focus-within {
	outline: none;
	border: none;
}

.MainAuth_ButtonFormBlock:hover {
	background-color: #727272;
}

.MainAuth_ButtonFormBlock:active {
	transform: scale(1.01);
}

.MainChatBlock {
	display: flex;
	flex-direction: column;
	background-color: #222222;
	max-width: 1400px;
	width: 100%;
	position: relative;
	height: var(--MainChatBlockHeightTop);
/*	left: 0;
	right: 0;*/
	z-index: 5;
	margin: auto;
	border-radius: 20px;
	margin-bottom: 60px;
	margin-top: 14px;
}

.MainChat {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.MainChatContentBlock {
	width: 100%;
	height: calc(100% - 150px);
	overflow-y: auto;
	display: flex;
	flex-direction: column-reverse;
	position: relative;
}

.ChatSendFormBlock {
	height: 150px;
	display: flex;
	padding: 20px;
	position: relative;
	border-top: 2px solid #3e3e3e;
}

.ChatSendFormBlock>textarea {
	width: calc(100% - 50px);
	height: 100%;
	border-radius: 8px 0 0 8px;
	background-color: #161616;
	font-family: sans-serif;
	font-weight: bold;
	border: 1px solid #404040;
	padding: 16px 12px;
	resize: none;
	outline: none;
	color: #fff;
	font-size: 14px;
}

.ChatButtonBlock {
    width: 50px;
    display: flex;
    border-radius: 0 8px 8px 0;
    background-color: #363636;
    border: 1px solid #404040;
    border-left: none;
    flex-direction: column;
}

.ChatButtonBlock>button:nth-child(1) {
	display: flex;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 26px;
	height: 26px;
	display: flex;
	margin: auto;
	opacity: .5;
	cursor: pointer;
	background-color: transparent;
	outline: none;
	border: none;
	background-image: url("/templates/main/assets/Smile.svg");
}

.ChatButtonBlock>button:nth-child(2) {
	display: flex;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 26px;
	height: 26px;
	display: flex;
	margin: auto;
	opacity: .5;
	cursor: pointer;
	background-color: transparent;
	outline: none;
	border: none;
	background-image: url("/templates/main/assets/Send.svg");
}

.ChatButtonBlock>button:hover {
	opacity: .8;
}

.ChatButtonBlock>button.Active {
	opacity: 1;
}

.MainChatContentReverse {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: auto;
}

.MainChatMessageCardBlock {
	display: flex;
	margin-bottom: 8px;
	padding: 10px 16px;
	position: relative;
}

.MainChatMessageCardBlock:nth-child(1) {
	margin-top: 8px;
}

.MainChatMessageCardBlock_Images {
	width: 60px;
	height: 60px;
	border: 1px solid #464646;
	background-color: #252529;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	display: flex;
}

.MainChatMessageCardBlock_Images>img {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	display: flex;
}

.MainChatMessageCardBlock_UserInfo {
	display: flex;
	flex-direction: column;
	margin-left: 12px;
	width: calc(100% - 60px);
}

.MainChatMessageCardBlock_MessageAuthor {
	display: flex;
	align-items: center;
	margin-bottom: 2px;
	width: 100%;
}

.MainChatMessageCardBlock_MessageAuthorName {
	font-family: sans-serif;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-decoration: none;
	color: #c3c3c3;
	font-size: 15px;
}

.MainChatMessageCardBlock_MessageText {
	margin-top: 2px;
	font-size: 15px;
	word-break: break-word;
	line-height: 1.3;
	display: flex;
	flex-flow: wrap;
}

.MainChatMessageCardBlock_MessageText>div {
	color: #e7e7e7;
	margin-top: auto;
	margin-bottom: auto;
	font-weight: 600;
}

.MainChatMessageCardBlock:hover {
	background-color: #1a1a1a;
}

.MainChatMessageCardBlock_MessageAuthorButtonLike {
	opacity: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 18px;
	height: 18px;
	display: flex;
	margin: auto 0;
	margin-left: auto;
	cursor: pointer;
	background-image: url("/templates/main/assets/Like.svg");
}

.MainChatMessageCardBlock:hover .MainChatMessageCardBlock_MessageAuthorButtonLike {
	opacity: .8;
}

.MainChatMessageCardBlock_MessageAuthorButtonLike:active {
	transform: scale(1.05);
	opacity: 1;
}

.ChatButtonViewBlock {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -40px;
	margin: auto;
	display: flex;
	width: 60px;
	height: 40px;
	border-radius: 0 0 40px 40px;
	background-color: #121212;
	cursor: pointer;
}

.ChatButtonViewBlock::before {
	content: "";
	margin: auto;
	margin-top: 8px;
	width: 20px;
	height: 20px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/templates/main/assets/Arrow.svg");
}

.MainChatBlock.Hide {
	transform: translateY(-100%);
	height: 0;
}

.MainChatBlock.Hide>.MainChat {
	display: none;
}

.HeaderUserImage {
	display: flex;
	width: 40px;
	height: 40px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: auto 0;
	margin-right: 10px;
	border-radius: 6px;
	cursor: pointer;
}

.MainChatContentBlock::-webkit-scrollbar-track {
	margin-top: 15px;
}

.MainChatContentBlock.NoAuth {
	height: calc(100% - 50px);
}

.MainChatMessageCardBlock_MessageAuthorButtonModer_ChatBan {
	opacity: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 18px;
	height: 18px;
	display: flex;
	margin: auto 0;
	margin-left: 10px;
	cursor: pointer;
	background-image: url(/templates/main/assets/Ban.svg);
}

.MainChatMessageCardBlock_MessageAuthorButtonModer_ChatRightButton {
	opacity: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 18px;
	height: 18px;
	display: flex;
	margin: auto 0;
	margin-left: 10px;
	cursor: pointer;
}

.MainChatMessageCardBlock:hover .MainChatMessageCardBlock_MessageAuthorButtonModer_ChatBan,
.MainChatMessageCardBlock:hover .MainChatMessageCardBlock_MessageAuthorButtonModer_ChatRightButton {
	opacity: .8;
}

.MainChatMessageCardBlock_MessageAuthorButtonModer_ChatBan:active,
.MainChatMessageCardBlock_MessageAuthorButtonModer_ChatRightButton:active {
	transform: scale(1.05);
	opacity: 1;
}

.MainChatMessageCardBlock_MessageAuthorButtonModer_ChatRightButton.MessDelete {
	background-image: url("/templates/main/assets/MessDelete.svg");
}

.ModalBlock {
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	padding: 12px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	visibility: hidden;
	z-index: 10;
	overflow: auto;
  z-index: 1000000;
}

.ModalBlock.Active {
	opacity: 1;
	visibility: visible;
}

.ModalBackCloseBlock {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	background-color: #000000bf;
}

.ModalMainBlock {
	display: flex;
	flex-direction: column;
	max-width: 620px;
	margin: auto;
	width: 100%;
	border-radius: 10px;
	z-index: 1;
	position: relative;
}

.ModalMainHeaderBlock {
	padding: 12px;
	background-color: #3a3a3a;
	border-radius: 10px 10px 0px 0px;
	display: flex;
}

.ModalMainContentBlock {
	border-radius: 0px 0px 10px 10px;
	padding: 12px;
	background-color: #2a2a2a;
}

.ModalMainHeaderBlock>div {
	margin: auto 0;
	margin-right: auto;
	text-align: center;
	display: flex;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
}

.ModalMainHeaderBlock>button {
	margin: auto 0;
	margin-left: auto;
	display: flex;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/templates/main/assets/Exit.svg");
	width: 24px;
	height: 24px;
	outline: none;
	border: none;
	background-color: transparent;
}

.ModalChatFormBan {
	margin-bottom: 10px;
}

.ModalChatFormBan>div {
	margin-bottom: 4px;
	font-size: 16px;
	color: #fff;
	font-weight: bold;
}

.ModalChatFormBan>input {
	background-color: #585858;
	border: none;
	outline: none;
	width: 100%;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
}

.ModalChatFormBan>input::placeholder {
	opacity: .6;
	color: #fff;
	font-weight: 400;
}

.ModalMainBlock.MaxWidth420 {
	max-width: 420px;
}

.ModalChatFormBan>select {
	width: 100%;
	padding: 6px;
	outline: none;
	border: none;
	border-radius: 6px;
	background-color: #585858;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
}

.ModalChatFormBanButton {
	width: 100%;
	padding: 8px 12px;
	border-radius: 6px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 1px;
	color: #fff;
	border: none;
	outline: none;
	font-size: 14px;
	background-color: #1a1a1a;
	margin-top: 10px;
}

.ModalChatFormBanButton:hover {
	background-color: #3a3a3a;
}

.HeaderLikesBlock {
	padding: 6px 12px;
	padding-left: 36px;
	background-color: #5e5e5e;
	border-radius: 6px;
	display: flex;
	text-align: center;
	margin: auto 0;
	margin-right: 16px;
	height: fit-content;
	color: #fff;
	font-weight: bold;
	position: relative;
}

.HeaderLikesBlock::before {
	content: "";
	position: absolute;
	display: flex;
	top: 0;
	left: 10px;
	bottom: 0;
	margin: auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("/templates/main/assets/Like.svg");
	width: 16px;
	height: 16px;
}

.MainChatMessageCardBlock_MessageAuthorTextCountLike {
	font-size: 14px;
	margin: auto 0;
	margin-left: 4px;
	color: #686868;
	font-weight: bold;
	position: relative;
	display: flex;
	padding-left: 18px;
}

.MainChatMessageCardBlock_MessageAuthorTextCountLike::before {
	content: "";
	display: flex;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	width: 14px;
	height: 14px;
	position: absolute;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/templates/main/assets/Like.svg");
	opacity: .6;
}

.MenuBlock {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 12;
	display: flex;
	opacity: 0;
	visibility: hidden;
}

.MenuBlock.Active {
	opacity: 1;
	visibility: visible;
}

.MenuBackBlock {
	background-color: #00000057;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.MenuContentBlock {
	max-width: 320px;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin-left: auto;
	transform: translateX(100%);
	background-color: #404040;
}

.MenuBlock.Active>.MenuContentBlock {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.MenuContentLinkBlock {
	color: #ffffffc4;
	padding: 10px 12px;
	border-top: 2px solid #606060;
	width: 100%;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 1px;
	display: flex;
	text-align: center;
	font-size: 16px;
}

.MenuContentLinkBlock:hover {
	border-color: #fff;
	color: #fff;
	background-color: #484848;
}

.MenuContentClose {
	margin: 10px 0;
	margin-right: 10px;
	margin-left: auto;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("/templates/main/assets/Exit.svg");
	width: 26px;
	height: 26px;
	display: flex;
	cursor: pointer;
	opacity: .6;
}

.MenuContentClose:hover {
	opacity: 1;
}


.SmileBarBlock {
	position: absolute;
	bottom: 100%;
	right: 0;
	flex-direction: column;
	background-color: #3e3e3e;
	min-height: 380px;
	height: 100%;
	width: 540px;
	z-index: 1;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: none;
	transition: display 2s;
}

.SmileBarBlock.Active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	display: flex;
}

.SmileBarBlock>div {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	margin-bottom: 10px;
	position: relative;
	width: 100%;
}

.SmileBarBlock>div:nth-last-child(1) {
	margin-bottom: 0;
}

.CategoryEmojiHeader {
	margin-bottom: 8px;
	font-size: 16px;
	color: #fff;
	font-weight: bold;
	padding: 10px 12px;
	background-color: #2e2e2e;
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1;
}

.BlockEmojiCategory {
	display: grid;
	width: 100%;
}

.BlockEmojiCategory.Sticker {
	grid-gap: 15px;
	grid-template-columns: repeat(3,1fr);
	padding: 0 6px;
	padding-bottom: 12px;
}

.BlockEmojiCategory.Sticker>div {
	border-radius: 6px;
	cursor: pointer;
	background-color: #2e2e2e;
	border: 2px solid #2e2e2e;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	user-select: none;
	min-height: 160px;
	max-height: 200px;
}

.BlockEmojiCategory.Sticker>div>img {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	overflow: hidden;
	user-select: none;
}

.BlockEmojiCategory.Sticker>div:hover {
	border-color: #f44336;
}

.MainChatMessageCardBlock_MessageText>div>.StickersImgBlock {
	width: 200px;
	height: 200px;
	border-radius: 6px;
	background-color: #2e2e2e;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
}

.BlockEmojiCategory.Emoji {
	grid-gap: 15px;
	grid-template-columns: repeat(12,1fr);
	padding: 0 6px;
	padding-bottom: 12px;
}

.BlockEmojiCategory.Emoji>div {
	border-radius: 6px;
	cursor: pointer;
	background-color: #2e2e2e;
	border: 2px solid #2e2e2e;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	user-select: none;
	min-height: 30px;
}

.BlockEmojiCategory.Emoji>div>img {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 100%;
	height: 100%;
	overflow: hidden;
	user-select: none;
}

.BlockEmojiCategory.Emoji>div:hover {
	border-color: #f44336;
}

.HeaderUserImageBlock {
	position: relative;
}

.ModalBlockProfile {
	position: absolute;
	top: calc(100% + 8px);
	min-height: 200px;
	right: 10px;
	background-color: #282828;
	padding: 8px;
	width: 200px;
	border-radius: 4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.ModalBlockProfile.Active {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}

.ModalBlockProfileHeader {
	text-align: center;
	color: #fff;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: bold;
}

.ModalBlockProfileUser {
	margin-bottom: 6px;
	display: flex;
	flex-direction: column;
}

.ModalBlockProfileUser>img {
	max-width: 150px;
	max-height: 150px;
	margin: auto;
	border-radius: 8px;
	border: 2px solid #484848;
	cursor: pointer;
	user-select: none;
}

.ModalBlockProfileUser>div {
	text-align: center;
	font-size: 14px;
	display: flex;
	margin: auto;
	margin-top: 6px;
	color: #fff;
	font-weight: bold;
}

.ModalBlockButtonB {
	display: flex;
	flex-direction: column;
/*	opacity: 0;
	visibility: hidden;
	pointer-events: none;*/
}

.ModalBlockButton {
	margin-bottom: 8px;
	width: 100%;
	padding: 12px;
	background-color: #101010;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	user-select: none;
}

.ModalBlockButton:hover, .ModalBlockButton.Active  {
	background-color: #525252;
}

/*.ModalBlockButtonB.Active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}*/

.ChangeUserProfileNickBlock {
	pointer-events: none;
	display: none;
	margin-top: 10px;
	flex-direction: column;
	max-height: 200px;
	overflow: auto;
	padding: 10px 4px;
}

.ChangeUserProfileNickBlock.Active {
	display: flex;
	pointer-events: auto;
}

.ChangeUserProfileNickBlock>div {
	padding: 8px;
	text-align: center;
	background-color: #424242;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	margin-bottom: 10px;
	color: #fff;
	cursor: pointer;
	user-select: none;
}

.ChangeUserProfileNickBlock>div:hover, .ChangeUserProfileNickBlock>div.Acitve {
	background-color: #5a5a5a;
}

.ChangeUserProfileNickBlock>div:nth-last-child(1) {
	margin-bottom: 0;
}

.ChangeUserProfileGifBlock {
	pointer-events: none;
	display: none;
	margin-top: 10px;
	flex-direction: column;
	max-height: 200px;
	overflow: auto;
	padding: 10px 4px;
}

.ChangeUserProfileGifBlock.Active {
	display: flex;
	pointer-events: auto;
}

.ChangeUserProfileGifBlock>div {
	display: flex;
	width: 120px;
	min-height: 120px;
	margin: 0 auto;
	margin-bottom: 14px;
	border-radius: 6px;
	overflow: hidden;
	border: 2px solid #484848;
	cursor: pointer;
}

.ChangeUserProfileGifBlock>div>img {
	width: 100%;
	height: 100%;
	display: flex;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	margin: auto;
	user-select: none;
}

.ChangeUserProfileGifBlock>div:nth-last-child(1) {
	margin-bottom: 0;
}

.ChangeUserProfileGifBlock>div:hover, .ChangeUserProfileGifBlock>div.Acitve {
	border-color: #f44336;
}

.MainChatMessageCardBlock_MessageAuthor_UsGif {
	width: 30px;
	height: 30px;
	border-radius: 6px;
/*	margin-right: 6px;*/
	margin-left: 6px;
	border: 1px solid #464646;
	user-select: none;
}

#ModalBlockViewTovarDescText {
	color: #fff;
	text-transform: capitalize;
	white-space: break-spaces;
}

.ChatButton {
	padding: 6px;
	color: #fff;
	background-color: #464646;
	border-radius: 4px;
	margin-left: 4px;
	font-size: 14px;
	opacity: .6;
}

.ChatButton:hover {
	opacity: 1;
}

.NewDropDown>.NewDropDownMenu {
  display: none;
}

.NewDropDown.Open>.NewDropDownMenu {
  display: block;
}