.reset-css {
  border: 0;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
  font-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  vertical-align: middle;
}
.popup__banner {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 200px;
  padding: 1px 0 0 1px;
}


.icon {
  font-family: icomoon!important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon {
  color: inherit
}

.icon__28 {
  font-size: 28px
}

.icon__20 {
  font-size: var(--fSize20)
}

.icon__8 {
  font-size: 8px
}

.icon.primary {
  color: var(--primary)
}

.icon.black {
  color: var(--black-10)
}

.icon.white {
  color: var(--white)
}

.icon.red {
  color: var(--system-red)
}

.icon.green {
  color: var(--system-green)
}

.icon-acc:before {
  content: "\e900"
}

.icon-arrow-down:before {
  content: "\e901"
}

.icon-arrow-left:before {
  content: "\e902"
}

.icon-arrow-rigth:before {
  content: "\e903"
}

.icon-box:before {
  content: "\e904"
}

.icon-burger:before {
  content: "\e905"
}

.icon-calendar:before {
  content: "\e906"
}

.icon-checkbox-checked:before {
  content: "\e907"
}

.icon-checkbox:before {
  content: "\e908"
}

.icon-circle-err:before {
  content: "\e909"
}

.icon-circle-info:before {
  content: "\e90a"
}

.icon-circle-ok:before {
  content: "\e90b"
}

.icon-clock:before {
  content: "\e90c"
}

.icon-close:before {
  content: "\e90d"
}

.icon-code:before {
  content: "\e90e"
}

.icon-coin:before {
  content: "\e90f"
}

.icon-connect:before {
  content: "\e910"
}

.icon-document:before {
  content: "\e911"
}

.icon-done:before {
  content: "\e912"
}

.icon-download:before {
  content: "\e913"
}

.icon-earth:before {
  content: "\e914"
}

.icon-exit:before {
  content: "\e915"
}

.icon-eye-close:before {
  content: "\e916"
}

.icon-eye-open:before {
  content: "\e917"
}

.icon-info:before {
  content: "\e918"
}

.icon-phone:before {
  content: "\e919"
}

.icon-plus:before {
  content: "\e91a"
}

.icon-proxy:before {
  content: "\e91b"
}

.icon-radiobutton-filled:before {
  content: "\e91c"
}

.icon-radiobutton:before {
  content: "\e91d"
}

.icon-setting:before {
  content: "\e91e"
}

.icon-settings:before {
  content: "\e91f"
}

.icon-smale:before {
  content: "\e920"
}

.icon-support:before {
  content: "\e921"
}

.icon-telegram-outline:before {
  content: "\e922"
}

.icon-telegram:before {
  content: "\e923"
}

.icon-upload:before {
  content: "\e924"
}

.icon-wallet:before {
  content: "\e925"
}

.icon-loop2:before {
  content: "\ea2e"
}

.icon-share2:before {
  content: "\ea82"
}

.icon-fingerprint:before {
  content: "\e926"
}

.icon-spinner11:before {
  content: "\e984"
}

.icon-loop:before {
  content: "\ea2d"
}

.icon-tag:before {
  content: "\e935"
}

.Button {
  font-family: Nunito;
  font-weight: 500;
  line-height: 100%;
  border: none;
  box-shadow: none;
  cursor: pointer;
  border-radius: 5.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16px;
  transition: background-color .3s ease,color .3s ease,border-color .3s ease;
  white-space: nowrap
}

.Button:disabled {
  cursor: not-allowed;
  background-color: var(--primary-disabled)!important;
  color: var(--white-10)!important;
  transform: scale(1)
}

.Button:disabled.green {
  background-color: var(--aqua-disabled)!important
}

.Button:disabled.red {
  background-color: var(--red-disabled)!important
}

.Button.lg {
  min-height: 52px;
  font-size: var(--fSize16);
  padding: 1.3rem 2.3rem
}

@media screen and (max-width: 480px) {
  .Button.lg {
      font-size:var(--fSize14)
  }
}

.Button.md {
  min-height: 48px;
  font-size: var(--fSize16);
  padding: 1.1rem 2.3rem
}

@media screen and (max-width: 480px) {
  .Button.md {
      font-size:var(--fSize14)
  }
}

.Button.sm {
  min-height: 36px;
  font-size: var(--fSize14);
  padding: .7rem 1.2rem
}

@media screen and (max-width: 480px) {
  .Button.sm {
      min-height:32px;
      font-size: var(--fSize14);
      padding: .6rem .9rem
  }
}

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

.Button.primary:hover,.Button.primary:focus {
  background-color: var(--primary-hover)
}

.Button.green {
  background-color: var(--system-aqua);
  color: var(--white)
}

.Button.green:hover,.Button.green:focus {
  background-color: var(--elements-green-80)
}

.Button.red {
  background-color: var(--system-red);
  color: var(--white)
}

.Button.red:hover,.Button.red:focus {
  background-color: var(--elements-red-80)
}

.Button.outline {
  background-color: transparent;
  border: 1px solid var(--primary);
  color: var(--primary)
}

.Button.outline:hover,.Button.outline:focus,.Button.outline:active {
  color: var(--primary-hover);
  border-color: var(--primary-hover)
}

.Button.outline:hover i,.Button.outline:focus i,.Button.outline:active i {
  color: var(--primary-hover)
}

.Button.outline:disabled {
  border-color: var(--primary-disabled)
}

.Button.loading {
  pointer-events: none;
  position: relative
}

.Button.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--primary);
  border-radius: 5.7rem;
  opacity: .8
}

.Button.loading:after {
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  border-radius: 50%;
  border: 4px solid #fff;
  border-color: #fff #fff #fff transparent;
  left: calc(50% - .8rem);
  animation-name: loading-spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear
}

.Button.horizontal {
  padding-left: 0;
  padding-right: 0
}

.Button.fullWidth {
  width: 100%
}

.Button.account:disabled {
  pointer-events: none
}

@media screen and (max-width: 1023px) {
  .Button.account {
      padding:0;
      width: 40px;
      height: 40px;
      min-height: 40px;
      border-radius: 100%
  }

  .Button.account:disabled {
      background: var(--addition-blue)!important;
      border-color: var(--addition-blue)!important
  }

  .Button.account:disabled i {
      color: var(--white)!important
  }
}

@media screen and (max-width: 480px) {
  .Button.account {
      width:24px;
      height: 24px;
      min-height: 24px;
      background: var(--primary)
  }

  .Button.account i {
      font-size: 20px;
      color: var(--white)
  }

  .Button.account:hover {
      color: var(--white);
      border-color: none
  }

  .Button.account:hover i {
      color: var(--white)
  }
}

.Button.left {
  text-align: left
}

.Button.center {
  text-align: center
}

.Button.right {
  text-align: right
}

@keyframes loading-spin {
  0% {
      transform: rotate(0)
  }

  to {
      transform: rotate(360deg)
  }
}

.CookieBannerWrapper {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex
}

.CookieBannerWrapper-close {
  pointer-events: none
}

.CookieBannerWrapper-close .CookieBanner {
  transform: translateY(200%)
}

.CookieBanner {
  position: relative;
  display: flex;
  align-items: center;
  margin: auto;
  background: var(--white);
  width: 100%;
  max-width: 1320px;
  filter: drop-shadow(0px 4px 20px rgba(95,97,100,.25));
  border-radius: 20px;
  padding: 32px;
  transition: var(--transition)
}

.CookieBanner>* {
  position: relative;
  z-index: 2
}

@media screen and (max-width: 1400px) {
  .CookieBanner {
      margin:0 32px
  }
}

@media screen and (max-width: 768px) {
  .CookieBanner {
      flex-direction:column;
      padding: 16px 24px 24px;
      margin: 0 24px
  }
}

.CookieBanner img {
  margin-right: 32px
}

@media screen and (max-width: 768px) {
  .CookieBanner img {
      max-width:24px;
      margin-right: 0;
      margin-bottom: 8px
  }
}

.CookieBanner p {
  font-size: 14px;
  line-height: 24px;
  margin-right: 46px
}

@media screen and (max-width: 768px) {
  .CookieBanner p {
      text-align:center;
      font-size: 12px;
      line-height: 20px;
      margin-right: 0;
      margin-bottom: 24px
  }
}

.CookieBanner-btns {
  display: flex;
  gap: 14px
}

@media screen and (max-width: 768px) {
  .CookieBanner-btns {
      justify-content:center;
      gap: 14px
  }
}

.CookieBanner-btns button {
  min-width: 118px
}

@media screen and (max-width: 768px) {
  .CookieBanner-btns button {
      min-width:auto
  }
}

.Footer {
  overflow: hidden;
  background: #0b0f1f;
  margin-top: 60px
}

@media screen and (max-width: 768px) {
  .Footer {
      margin-top:32px
  }
}

.Footer-wrapper {
  margin: 0 auto;
  max-width: 1320px;
  padding: 0 var(--content-padding)
}

.Footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 40px 0 24px;
  border-bottom: 1px solid var(--addition-purple)
}

@media screen and (max-width: 768px) {
  .Footer-top {
      flex-direction:column;
      align-items: flex-start;
      padding-top: 32px
  }
}

.Footer-top > img {
  width: 80px;
  height: auto;
}

.Footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0
}

@media screen and (max-width: 1250px) {
  .Footer-bottom {
      gap:20px;
      align-items: flex-start;
      flex-direction: column
  }
}

.Footer-bottom-nav {
  display: flex;
  align-items: center
}
.Footer-bottom-nav a svg{
 max-width: 15px;
 height: 15px;
}



@media screen and (max-width: 768px) {
  .Footer-bottom-nav {
      flex-direction:column;
      align-items: flex-start;
      gap: 32px
  }
}

.Footer-bottom-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 48px;
  row-gap: 20px;
  margin-right: 40px
}

@media screen and (max-width: 768px) {
  .Footer-bottom-nav ul {
      order:1
  }
}

.Footer-bottom-nav ul a {
  font-weight: 500;
  font-size: var(--fSize16);
  line-height: 100%;
  color: var(--black-60);
  transition: var(--transition)
}

.Footer-bottom-nav ul a:hover {
  color: var(--black-80)
}

.Footer-copyright {
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.Footer-copyright>div:first-child {
  font-weight: 500;
  font-size: var(--fSize12);
  line-height: 100%;
  color: var(--black-40)
}

@media (max-width: 480px) {
  .Footer-copyright {
      flex-direction:column;
      align-items: flex-start;
      gap: 20px
  }
}

.Footer-menu {
  display: flex;
  align-items: center;
  justify-content: space-between
}

@media screen and (max-width: 480px) {
  .Footer-menu {
      flex-direction:column
  }
}

.Footer-menu-nav {
  margin-right: 80px
}

.Footer-menu-nav ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 48px;
  row-gap: 20px
}

@media screen and (max-width: 480px) {
  .Footer-menu-nav ul {
      flex-direction:column;
      align-items: flex-start
  }
}

.Footer-menu-nav ul li {
  font-weight: 500;
  font-size: var(--fSize16);
  line-height: 100%;
  color: var(--primary);
  cursor: pointer
}

.Footer-menu-nav ul li:hover {
  color: var(--primary-hover)
}

.Footer-acc-btn {
  font-family: Nunito;
  font-weight: 500;
  font-size: var(--fSize16);
  line-height: 100%;
  color: var(--primary)
}

.Footer-acc-btn:hover {
  color: var(--primary-hover)
}

@media screen and (max-width: 992px) {
  .Footer-acc-btn {
      display:none
  }
}

.Footer-telegram,.Footer-instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: var(--fSize16);
  line-height: 100%;
  transition: var(--transition)
}

.Footer-telegram span,.Footer-instagram span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background: #00b0f2;
  width: 20px;
  height: 20px;
  margin-right: 4px
}

.Footer-telegram span i,.Footer-instagram span i {
  font-size: 12px;
  margin-right: 1px
}

.Footer-telegram:hover,.Footer-instagram:hover {
  color: var(--primary)
}

.Footer-payments {
  display: flex;
  align-items: center;
  gap: 24px
}

.Background {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100vw;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  height: calc(var(--vh, 1vh) * 100)
}

@media screen and (max-width: 480px) {
  .Background {
      height:calc(var(--vh, 1vh) * 120)
  }
}

.Background.few div:nth-child(3n+1) {
  display: none
}

.Background.yellow div:nth-child(4n+1) {
  background: var(--system-yellow)
}

.Background.yellow div:nth-child(3n+1) {
  background: var(--system-yellow);
  opacity: .5
}

.Background.yellow div:nth-child(2n+1) {
  background: var(--system-yellow);
  opacity: .3
}

.Background.yellow div:nth-child(1n+1) {
  background: var(--system-yellow);
  opacity: .2
}

.Background.green {
  color: var(--system-green)
}

.Background.green div:nth-child(4n+1) {
  background: var(--system-green)
}

.Background.green div:nth-child(3n+1) {
  background: var(--system-green);
  opacity: .5
}

.Background.green div:nth-child(2n+1) {
  background: var(--system-green);
  opacity: .3
}

.Background.green div:nth-child(1n+1) {
  background: var(--system-green);
  opacity: .2
}

.Background.red {
  color: var(--elements-red-100)
}

.Background.red div:nth-child(4n+1) {
  background: var(--elements-red-100)
}

.Background.red div:nth-child(3n+1) {
  background: var(--elements-red-100);
  opacity: .5
}

.Background.red div:nth-child(2n+1) {
  background: var(--elements-red-100);
  opacity: .3
}

.Background.red div:nth-child(1n+1) {
  background: var(--elements-red-100);
  opacity: .2
}

.Background.primary {
  color: var(--primary)
}

.Background.primary div:nth-child(4n+1) {
  background: var(--primary)
}

.Background.primary div:nth-child(3n+1) {
  background: var(--primary);
  opacity: .5
}

.Background.primary div:nth-child(2n+1) {
  background: var(--primary);
  opacity: .3
}

.Background.primary div:nth-child(1n+1) {
  background: var(--primary);
  opacity: .2
}

.Background.bgGrey {
  background: #0a0f1f;
}

.Background.bgWhite {
  background: var(--white)
}

.Background div {
  position: absolute;
  width: 16px;
  height: 16px
}

.Background div:nth-child(1) {
  bottom: 10%;
  left: 1%;
  animation: animate 12s linear infinite
}

.Background div:nth-child(2) {
  bottom: 17%;
  left: 10%;
  animation: animate 12s linear infinite
}

.Background div:nth-child(3) {
  bottom: 5%;
  left: 8%;
  animation: animate 9s linear infinite
}

.Background div:nth-child(4) {
  bottom: -2%;
  left: 14%;
  animation: animate 15s linear infinite
}

.Background div:nth-child(5) {
  bottom: 30%;
  left: 18%;
  animation: animate 10s linear infinite
}

.Background div:nth-child(6) {
  bottom: 22%;
  left: 20%;
  animation: animate 13s linear infinite
}

.Background div:nth-child(7) {
  bottom: 12%;
  left: 16%;
  animation: animate 7s linear infinite
}

.Background div:nth-child(8) {
  bottom: 6%;
  left: 19%;
  animation: animate 12s linear infinite
}

.Background div:nth-child(9) {
  bottom: 25%;
  left: 24%;
  animation: animate 7s linear infinite
}

.Background div:nth-child(10) {
  bottom: 21%;
  left: 34%;
  animation: animate 13s linear infinite
}

.Background div:nth-child(11) {
  bottom: 11%;
  left: 44%;
  animation: animate 10s linear infinite
}

.Background div:nth-child(12) {
  bottom: 21%;
  left: 54%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(13) {
  bottom: 16%;
  left: 56%;
  animation: animate 11s linear infinite
}

.Background div:nth-child(14) {
  bottom: 8%;
  left: 58%;
  animation: animate 9s linear infinite
}

.Background div:nth-child(15) {
  bottom: -1%;
  left: 62%;
  animation: animate 14s linear infinite
}

.Background div:nth-child(16) {
  bottom: -8%;
  left: 65%;
  animation: animate 9s linear infinite
}

.Background div:nth-child(17) {
  bottom: 7%;
  left: 72%;
  animation: animate 7s linear infinite
}

.Background div:nth-child(18) {
  bottom: 20%;
  left: 76%;
  animation: animate 6s linear infinite
}

.Background div:nth-child(19) {
  bottom: 15%;
  left: 79%;
  animation: animate 10s linear infinite
}

.Background div:nth-child(20) {
  bottom: 2%;
  left: 82%;
  animation: animate 5s linear infinite
}

.Background div:nth-child(21) {
  bottom: 17%;
  left: 85%;
  animation: animate 11s linear infinite
}

.Background div:nth-child(22) {
  bottom: 11%;
  left: 88%;
  animation: animate 7s linear infinite
}

.Background div:nth-child(23) {
  bottom: 28%;
  left: 92%;
  animation: animate 12s linear infinite
}

.Background div:nth-child(24) {
  bottom: -3%;
  left: 97%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(25) {
  bottom: 23%;
  left: 98%;
  animation: animate 10s linear infinite
}

.Background div:nth-child(26) {
  bottom: -1%;
  left: 99%;
  animation: animate 6s linear infinite
}

.Background div:nth-child(27) {
  bottom: 35%;
  left: 3%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(28) {
  bottom: 38%;
  left: 17%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(29) {
  bottom: 32%;
  left: 28%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(30) {
  bottom: 35%;
  left: 35%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(31) {
  bottom: 39%;
  left: 52%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(32) {
  bottom: 31%;
  left: 64%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(33) {
  bottom: 33%;
  left: 69%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(34) {
  bottom: 34%;
  left: 74%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(35) {
  bottom: 30%;
  left: 82%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(36) {
  bottom: 35%;
  left: 95%;
  animation: animate 8s linear infinite
}

.Background div:nth-child(37) {
  bottom: -1%;
  left: 34%;
  animation: animate 13s linear infinite
}

.Background div:nth-child(38) {
  bottom: 5%;
  left: 40%;
  animation: animate 6s linear infinite
}

.Background div:nth-child(39) {
  bottom: 10%;
  left: 42%;
  animation: animate 10s linear infinite
}

.Background .circle {
  border-radius: 100%
}

.Background .systemAqua {
  background: var(--system-aqua)
}

.Background .elementsRed {
  background: var(--elements-red-80)
}

.Background .primary60 {
  background: var(--primary-60)
}

.Background .primary20 {
  background: var(--primary-80)
}

.Background .elementsGreen {
  background: var(--elements-green-80)
}

.Background .systemRed {
  background: var(--system-red)
}

.Bg-CookieBanner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1
}

.Bg-CookieBanner span {
  background: var(--primary);
  position: absolute;
  width: 16px;
  height: 16px
}

.Bg-CookieBanner span:nth-child(1) {
  bottom: 1%;
  left: 1%;
  animation: animate 12s linear infinite
}

.Bg-CookieBanner span:nth-child(2) {
  bottom: 2%;
  left: 6%;
  border-radius: 100%;
  background: var(--elements-red-60);
  animation: animate 8s linear infinite
}

.Bg-CookieBanner span:nth-child(3) {
  bottom: 10%;
  left: 14%;
  background: var(--system-aqua);
  animation: animate 11s linear infinite
}

.Bg-CookieBanner span:nth-child(4) {
  bottom: 5%;
  left: 20%;
  border-radius: 100%;
  animation: animate 8s linear infinite
}

.Bg-CookieBanner span:nth-child(5) {
  bottom: 10%;
  left: 34%;
  animation: animate 12s linear infinite;
  background: var(--elements-green-80)
}

.Bg-CookieBanner span:nth-child(6) {
  bottom: 8%;
  left: 40%;
  animation: animate 8s linear infinite
}

.Bg-CookieBanner span:nth-child(7) {
  bottom: -1%;
  left: 50%;
  border-radius: 100%;
  animation: animate 10s linear infinite;
  background: var(--system-red)
}

.Bg-CookieBanner span:nth-child(8) {
  bottom: 17%;
  left: 70%;
  border-radius: 100%;
  animation: animate 5s linear infinite;
  background: var(--system-aqua)
}

.Bg-CookieBanner span:nth-child(9) {
  bottom: -1%;
  left: 74%;
  animation: animate 8s linear infinite
}

.Bg-CookieBanner span:nth-child(10) {
  bottom: 17%;
  left: 90%;
  border-radius: 100%;
  animation: animate 4s linear infinite
}

.Bg-ErrorPage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1
}

.Bg-ErrorPage span {
  background: var(--primary);
  position: absolute;
  width: 24px;
  height: 24px
}

.Bg-ErrorPage span:nth-child(1) {
  bottom: 1%;
  left: 1%;
  animation: animateFullScreen 17s linear infinite
}

.Bg-ErrorPage span:nth-child(2) {
  bottom: 2%;
  left: 6%;
  border-radius: 100%;
  background: var(--elements-red-60);
  animation: animateFullScreen 23s linear infinite
}

.Bg-ErrorPage span:nth-child(3) {
  bottom: 10%;
  left: 14%;
  background: var(--system-aqua);
  animation: animateFullScreen 26s linear infinite
}

.Bg-ErrorPage span:nth-child(4) {
  bottom: 5%;
  left: 20%;
  border-radius: 100%;
  animation: animateFullScreen 22s linear infinite
}

.Bg-ErrorPage span:nth-child(5) {
  bottom: 10%;
  left: 34%;
  animation: animateFullScreen 27s linear infinite;
  background: var(--elements-green-80)
}

.Bg-ErrorPage span:nth-child(6) {
  bottom: 8%;
  left: 40%;
  animation: animateFullScreen 22s linear infinite
}

.Bg-ErrorPage span:nth-child(7) {
  bottom: -1%;
  left: 50%;
  border-radius: 100%;
  animation: animateFullScreen 25s linear infinite;
  background: var(--system-red)
}

.Bg-ErrorPage span:nth-child(8) {
  bottom: 17%;
  left: 70%;
  border-radius: 100%;
  animation: animateFullScreen 20s linear infinite;
  background: var(--system-aqua)
}

.Bg-ErrorPage span:nth-child(9) {
  bottom: -1%;
  left: 74%;
  animation: animateFullScreen 23s linear infinite
}

.Bg-ErrorPage span:nth-child(10) {
  bottom: 17%;
  left: 90%;
  border-radius: 100%;
  animation: animateFullScreen 19s linear infinite
}

.Bg-Forms {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1
}

.Bg-Forms span {
  background: var(--primary);
  position: absolute;
  width: 16px;
  height: 16px
}

.Bg-Forms span:nth-child(1) {
  bottom: 1%;
  left: 1%;
  animation: animateFullScreen 27s linear infinite
}

.Bg-Forms span:nth-child(2) {
  bottom: 2%;
  left: 6%;
  border-radius: 100%;
  background: var(--elements-red-60);
  animation: animateFullScreen 33s linear infinite
}

.Bg-Forms span:nth-child(3) {
  bottom: 10%;
  left: 14%;
  background: var(--system-aqua);
  animation: animateFullScreen 36s linear infinite
}

.Bg-Forms span:nth-child(4) {
  bottom: 5%;
  left: 20%;
  border-radius: 100%;
  animation: animateFullScreen 48s linear infinite
}

.Bg-Forms span:nth-child(5) {
  bottom: 10%;
  left: 34%;
  animation: animateFullScreen 23s linear infinite;
  background: var(--elements-green-80)
}

.Bg-Forms span:nth-child(6) {
  bottom: 8%;
  left: 40%;
  animation: animateFullScreen 37s linear infinite
}

.Bg-Forms span:nth-child(7) {
  bottom: -1%;
  left: 50%;
  border-radius: 100%;
  animation: animateFullScreen 28s linear infinite;
  background: var(--system-red)
}

.Bg-Forms span:nth-child(8) {
  bottom: 17%;
  left: 70%;
  border-radius: 100%;
  animation: animateFullScreen 25s linear infinite;
  background: var(--system-aqua)
}

.Bg-Forms span:nth-child(9) {
  bottom: -1%;
  left: 74%;
  animation: animateFullScreen 33s linear infinite
}

.Bg-Forms span:nth-child(10) {
  bottom: 17%;
  left: 90%;
  border-radius: 100%;
  animation: animateFullScreen 45s linear infinite
}

@keyframes animate {
  0% {
      transform: translate(0) scale(0) rotate(0);
      opacity: 1
  }

  to {
      transform: translateY(-90px) scale(1) rotate(360deg);
      opacity: 0
  }
}

@keyframes animateFullScreen {
  0% {
      transform: translate(0) scale(0) rotate(0);
      opacity: 1
  }

  to {
      transform: translateY(-600px) scale(1) rotate(360deg);
      opacity: 0
  }
}

.HeaderMenu {
  align-self: center;
  justify-self: flex-start
}

.HeaderMenu .Background {
  z-index: 3
}

@media screen and (min-width: 600px) {
  .HeaderMenu .Background {
      display:none
  }
}

@media screen and (max-width: 600px) {
  .HeaderMenu {
      width:100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: -100%;
      bottom: 0;
      z-index: 3;
      padding: 88px 24px 24px;
      transform: translate3d(-100%,0,0);
      transition: var(--transition);
      background: var(--white)
  }

  .HeaderMenu-active {
      transform: translateZ(0);
      left: 0
  }
}

.HeaderMenu-list {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 4
}

@media screen and (max-width: 600px) {
  .HeaderMenu-list {
      display:flex;
      flex-direction: column
  }
}

.HeaderMenu-item {
  font-weight: 500;
  font-size: var(--fSize16);
  color: var(--black-100);
  transition: var(--transition);
  cursor: pointer
}

.HeaderMenu-item:hover {
  color: var(--primary)
}

.HeaderMenu-item:not(:last-child) {
  margin-right: 40px
}

@media screen and (max-width: 1024px) {
  .HeaderMenu-item:not(:last-child) {
      margin-right:36px
  }
}

@media screen and (max-width: 600px) {
  .HeaderMenu-item:not(:last-child) {
      margin:0 0 24px
  }
}

@media screen and (max-width: 1024px) {
  .HeaderMenu-item {
      font-weight:400;
      font-size: var(--fSize14)
  }
}

@media screen and (max-width: 600px) {
  .HeaderMenu-item {
      font-weight:700;
      font-size: var(--fSize20)
  }
}

.HeaderMenu-footer {
  position: relative;
  z-index: 4;
  margin-top: 32px
}

@media screen and (min-width: 600px) {
  .HeaderMenu-footer {
      display:none
  }
}

._menuIcon_71u5e_1 {
  display: none;
  position: relative;
  z-index: 4;
  width: 18px;
  height: 12px;
  cursor: pointer
}

@media screen and (max-width: 600px) {
  ._menuIcon_71u5e_1 {
      display:block
  }
}

._menuIcon_71u5e_1 span,._menuIcon_71u5e_1:before,._menuIcon_71u5e_1:after {
  content: "";
  transition: var(--transition);
  left: 0;
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--primary);
  border-radius: 8px
}

._menuIcon_71u5e_1:before {
  top: 0
}

._menuIcon_71u5e_1:after {
  bottom: 0
}

._menuIcon_71u5e_1 span {
  top: 40%
}

._menuIcon_71u5e_1._active_71u5e_33 span {
  transform: scale(0)
}

._menuIcon_71u5e_1._active_71u5e_33:before {
  transform: rotate(-45deg);
  top: 50%
}

._menuIcon_71u5e_1._active_71u5e_33:after {
  transform: rotate(45deg);
  bottom: calc(50% - 2px)
}

.Header {
  top: 0;
  left: 0;
  right: 0;
  height: 76px;
  max-width: 100vw;
  z-index: 4;
  transition: all .2s ease-out
}

.Header .Notifications-wrapper {
  position: relative;
  display: flex;
  margin-right: 24px
}

.Header .Notifications-wrapper .Notifications-logo {
  display: inline-flex;
  cursor: pointer;
  position: relative
}

.Header .Notifications-wrapper .Notifications-logo svg path {
  stroke: #651eee
}

.Header .Notifications-wrapper .Notifications-logo .unread-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff003d;
  position: absolute;
  top: 0;
  right: 0
}

.Header .Notifications-wrapper .Notifications-list-wrapper {
  opacity: 0;
  transition: var(--transition);
  position: absolute;
  border-radius: 24px;
  max-height: calc(80vh - 100px);
  min-height: 500px;
  width: 375px;
  background: rgba(232,235,251,.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px;
  left: -100px;
  top: 35px;
  pointer-events: none;
  overflow-y: scroll;
  z-index: 100
}

@media screen and (max-width: 768px) {
  .Header .Notifications-wrapper .Notifications-list-wrapper {
      left:-300px
  }
}

.Header .Notifications-wrapper .Notifications-list-wrapper .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d8dae5;
  padding-bottom: 10px
}

.Header .Notifications-wrapper .Notifications-list-wrapper .header h3 {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  text-align: left;
  color: #a1a1a1
}

.Header .Notifications-wrapper .Notifications-list-wrapper .header .icon {
  cursor: pointer;
  transition: var(--transition)
}

.Header .Notifications-wrapper .Notifications-list-wrapper .header .icon svg path {
  stroke: #a1a1a1
}

.Header .Notifications-wrapper .Notifications-list-wrapper .unread-title,.Header .Notifications-wrapper .Notifications-list-wrapper .read-title {
  font-family: Nunito;
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px;
  text-align: left;
  color: #979dba;
  margin-top: 8px;
  margin-bottom: 8px
}

.Header .Notifications-wrapper .Notifications-list-wrapper .unread-title span,.Header .Notifications-wrapper .Notifications-list-wrapper .read-title span {
  color: #651eee
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item {
  border: 1px solid #d1bbfa;
  background-color: #f4f5f8;
  border-radius: 8px;
  padding: 12px
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item.long {
  cursor: pointer
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .first-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-family: Nunito;
  font-size: 12px;
  font-weight: 300;
  line-height: 12px;
  text-align: left;
  color: #c2c6d7
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .first-block .time {
  flex-grow: 1
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .first-block .icon {
  cursor: pointer;
  display: inline-flex
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .first-block .icon svg path {
  stroke: #c2c6d7;
  transition: var(--transition)
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .first-block .icon.check:hover svg path {
  stroke: var(--primary)
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .first-block .icon.delete:hover svg path {
  stroke: #8289ac
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block {
  display: flex;
  margin-top: 8px;
  gap: 8px
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block .icon {
  width: fit-content
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block .toggle-description {
  display: flex;
  align-items: center
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block .toggle-description i {
  color: #c2c6d7;
  transition: var(--transition)
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block .toggle-description.active i {
  transform: rotate(-180deg)
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block .notification-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block .notification-content h6 {
  font-family: Nunito;
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px;
  text-align: left;
  color: #8289ac
}

.Header .Notifications-wrapper .Notifications-list-wrapper .Notifications-list .Notification-item .second-block .notification-content p {
  font-family: Nunito;
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px;
  text-align: left;
  color: #a2a7c1
}

.Header .Notifications-wrapper.open .Notifications-list-wrapper {
  opacity: 1;
  pointer-events: unset;
}

.Header .preloader {
  width: 280px;
  display: flex;
  align-items: center
}

.Header .preloader img {
  width: 80px;
  height: auto;
}

.Header-scroll {
  z-index: 4;
  background: var(--white);
  box-shadow: 0 -6px 10px 5px #00000080;
  will-change: transform
}

.Header-hide {
  transform: translateY(-100%)
}

.Header-preloader {
  background: var(--addition-grey);
  height: 76px
}

.Header.Header-default .Header-wrapper {
  margin: 0 auto;
  max-width: 1320px
}

.Header.Header-account {
  border-bottom: 1px solid #edeef3;
  position: absolute;
  background: var(--white);
  padding: 0 60px 0 0
}

@media screen and (max-width: 1200px) {
  .Header.Header-account .Header-logo {
      flex-direction:column;
      justify-content: center
  }
}

@media screen and (max-width: 768px) {
  .Header.Header-account .Header-wrapper {
      gap:0
  }

  .Header.Header-account .Header-logo {
      margin-right: 20px
  }
}

@media screen and (max-width: 600px) {
  .Header.Header-account {
      padding:0;
      background: var(--addition-grey)
  }

  .Header.Header-account .Header-wrapper {
      position: relative
  }

  .Header.Header-account .Header-wrapper .Header-sign {
      position: absolute;
      right: 20px;
      bottom: 14px
  }
}

.Header-menu-icon {
  display: flex;
  align-items: center
}

@media screen and (min-width: 600px) {
  .Header-menu-icon {
      display:none
  }
}

.Header-wrapper {
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 20px
}

@media screen and (max-width: 1024px) {
  .Header-wrapper {
      grid-template-columns:auto 3fr auto;
      gap: 50px
  }
}

@media screen and (max-width: 768px) {
  .Header-wrapper {
      gap:40px
  }
}

.Header-logo {
  display: flex;
  align-items: center
}

@media screen and (min-width: 1200px) {
  .Header-logo a:first-child:not(:last-child) {
      margin-right:24px
  }
}

@media screen and (max-width: 768px) {
  .Header-logo {
      justify-content:center
  }
}

.Header-sign {
  display: flex;
  justify-content: flex-end;
  align-items: center
}

.Header-userId {
  font-size: var(--fSize14);
  display: flex;
  align-items: center
}

.Header-userId .id-copy-btn {
  display: inline-block;
  margin-left: 5px
}

.Header-userId .id-copy-btn svg path {
  stroke: #8289ac
}

.Header-userId button {
  position: relative
}

.Header-userId button span {
  color: #8289ac;
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  position: absolute;
  top: 120%;
  right: 0;
  background: var(--white);
  box-shadow: 0 4px 20px #5f616440;
  border-radius: 4px;
  padding: 4px;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 2
}

.Header-userId button.copied span {
  transform: translateY(0);
  opacity: 1
}

.Header-userId span {
  color: #8289ac
}

@media screen and (max-width: 768px) {
  .Header-userId {
      font-weight:700
  }
    .Header .preloader {
    display: none!important;
  }
  ._bannerImage_z5ii6_198 img{
    display: none;
  }
  ._bannerImage_z5ii6_198._imgLoaded_z5ii6_210{
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .Header-preloader {
      min-width:60px
  }

  .Header .preloader {
      width: 60px
  }

  .Header .preloader img {
      display: none
  }

  .Header-wrapper {
      grid-template-columns: 0fr 3fr 1fr
  }
}

.HeaderProfile {
  display: flex;
  align-items: center;
  gap: 8px
}

@media screen and (max-width: 768px) {
  .HeaderProfile {
      flex-direction:row-reverse
  }
}

.HeaderProfile-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: var(--addition-blue)
}

@media screen and (max-width: 768px) {
  .HeaderProfile-icon {
      width:24px;
      height: 24px
  }
}

.HeaderProfile-email {
  color: #c2c6d7;
  text-wrap: wrap;
  font-weight: 400;
  font-size: var(--fSize14)
}

@media screen and (max-width: 768px) {
  .HeaderProfile-email {
      font-size:var(--fSize12)
  }
}

.Header-lang-switcher {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-right: 16px
}

.Header-lang-switcher__main {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  min-width: 56px;
  justify-content: center
}

.Header-lang-switcher__main svg {
  width: 16px;
  height: 16px
}

.Header-lang-switcher__label {
  font-weight: 700;
  color: #8f95b2;
  font-size: 16px
}

.Header-lang-switcher__arrow {
  margin-left: 4px
}

.Header-lang-switcher__dropdown {
  position: absolute;
  top: 110%;
  left: 0;
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 2px;
  box-shadow: 0 4px 16px #5f61641a;
  z-index: 10;
  min-width: 80px;
  display: flex;
  flex-direction: column
}

.Header-lang-switcher__dropdown svg {
  width: 16px;
  height: 16px
}

.Header-lang-switcher__option {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 400;
  color: #a2a7c1;
  background: transparent;
  transition: background .2s,color .2s,font-weight .2s;
  border-radius: 2px
}

.Header-lang-switcher__option:hover {
  background: #f5f6fa;
  color: #8f95b2
}

.Header-lang-switcher__option.active {
  font-weight: 700;
  color: #8f95b2;
  background: #f5f6fa
}

.InputField-label {
  display: flex;
  color: var(--black-60);
  font-weight: 400;
  margin-bottom: .57rem;
  font-size: var(--fSize14);
  text-align: left;
  width: 100%
}

.error.InputField-label {
  color: var(--system-red)
}

.InputField-input {
  font-weight: 400;
  height: 50px;
  border: 1px solid var(--black-20);
  border-radius: 50px;
  outline: none;
  position: relative;
  width: 100%;
  font-size: 1rem;
  padding: 1.21rem 1rem 1.21rem 1.14rem;
  box-sizing: border-box;
  resize: none;
  transition: var(--transition);
  color: var(--black-100)
}

.InputField-input::placeholder {
  color: var(--black-100)
}

.InputField-input:focus {
  border: 1px solid var(--primary-20)
}

.InputField-input:disabled {
  border: 1px solid var(--black-10);
  background: var(--black-10);
  color: var(--black-10)
}

.InputField {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 18px
}

.InputField:not(:last-child) {
  margin-bottom: 1.71rem
}

.InputField.error {
  margin-bottom: 6px
}

.InputField.error .label {
  color: var(--system-error)
}

.InputField-input::-webkit-input-placeholder {
  font-family: Nunito,sans-serif;
  color: var(--black-60)
}

.InputField-input::-moz-placeholder {
  font-family: Nunito,sans-serif;
  color: var(--black-60)
}

.InputField-input:-moz-placeholder {
  font-family: Nunito,sans-serif;
  color: var(--black-60)
}

.InputField-input:-ms-input-placeholder {
  font-family: Nunito,sans-serif;
  color: var(--black-60)
}

.InputField-input:disabled {
  font-weight: 600;
  color: var(--primary-disabled);
  border: 1px solid var(--primary-disabled);
  background: transparent
}

.InputField-error-message {
  color: var(--system-error);
  padding-top: .25rem;
  font-size: var(--fSize10);
  text-align: left
}

.InputField-note {
  margin-top: .25rem;
  font-size: .75em;
  color: var(--black-80)
}

.InputField.error .InputField-input {
  border-color: var(--system-error)
}

.InputField.horizontalLabel {
  display: grid;
  grid-template-columns: 1fr 80px
}

.InputField.horizontalLabel>.InputField-label,.InputField.horizontalLabel>.InputField-input {
  font-size: var(--fSize13);
  font-family: var(--helvetica500);
  color: var(--black-10);
  text-transform: capitalize
}

.InputField>.inputWrap {
  position: relative
}

.InputField>.inputWrap .inputShadow {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: var(--fSize14);
  line-height: var(--fSize14);
  color: var(--black-100);
  text-transform: capitalize;
  transform: translateY(-50%);
  z-index: 0;
  padding: .75rem 1.1rem
}

.InputField>.inputWrap .InputField-input {
  color: transparent!important;
  background-color: transparent!important;
  caret-color: var(--black-100);
  transition-duration: 0s!important
}

.InputField>.inputWrap .InputField-input.filled {
  padding-left: 30px
}

.FormFooter {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 16px
}

.FormFooter-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  font-weight: 400;
  font-size: var(--fSize14);
  margin-bottom: 36px
}

.FormFooter-link div {
  text-align: center;
  border-right: 1px solid var(--primary-20);
  padding-right: var(--24px)
}

@media (max-width: 768px) {
  .FormFooter-link div {
      padding-right:var(--12px)
  }
}

.FormFooter-link button {
  color: var(--primary);
  text-align: left;
  margin-left: var(--24px);
  text-decoration: underline
}

@media (max-width: 768px) {
  .FormFooter-link button {
      margin-left:var(--12px)
  }
}

@media (max-width: 768px) {
  .FormFooter-link {
      display:inline-flex;
      grid-template-columns: auto auto;
      align-self: center;
      margin-top: 1.43rem;
      margin-bottom: 0
  }
}

.FormFooter-policy {
  font-size: var(--fSize12);
  line-height: var(--22px);
  font-weight: 400;
  text-align: center;
  color: var(--black-80)
}

.FormFooter-policy a {
  color: var(--primary)
}

.PasswordField-label {
  display: flex;
  color: var(--black-60);
  font-weight: 400;
  margin-bottom: .57rem;
  font-size: var(--fSize14);
  text-align: left;
  width: 100%
}

.error.PasswordField-label {
  color: var(--system-red)
}

.PasswordField-input {
  font-weight: 400;
  height: 50px;
  border: 1px solid var(--black-20);
  border-radius: 50px;
  outline: none;
  position: relative;
  width: 100%;
  font-size: 1rem;
  padding: 1.21rem 1rem 1.21rem 1.14rem;
  box-sizing: border-box;
  resize: none;
  transition: var(--transition);
  color: var(--black-100)
}

.PasswordField-input::placeholder {
  color: var(--black-100)
}

.PasswordField-input:focus {
  border: 1px solid var(--primary-20)
}

.PasswordField-input:disabled {
  border: 1px solid var(--black-10);
  background: var(--black-10);
  color: var(--black-10)
}

.PasswordField {
  position: relative;
  padding-bottom: 30px
}

.PasswordField:not(:last-child) {
  margin-bottom: .5rem
}

.PasswordField.error {
  padding-bottom: 0
}

.PasswordField.error .input {
  border-color: var(--system-error)
}

.PasswordField.error .label {
  color: var(--system-error)
}

.PasswordField-input {
  padding-right: 5.7rem
}

.PasswordField-control {
  position: relative
}

.PasswordField-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1.1em;
  line-height: 1;
  background: transparent;
  color: var(--gray-10);
  padding: .25em .5em;
  display: flex;
  align-items: center
}

.PasswordField-button-text {
  font-weight: 700;
  margin-left: .5em
}

.PasswordField-button:active {
  transform: translateY(-50%) scale(1)
}

.PasswordField-error-message {
  color: var(--system-error);
  padding-top: .25rem;
  font-size: var(--fSize10);
  text-align: left
}

.PasswordField-note {
  margin-top: .25rem;
  font-size: var(--fSize10);
  color: var(--black-80)
}

.AuthPopup .Ref-Success {
  border: 1px solid var(--primary);
  background: var(--primary);
  margin-bottom: 15px;
  padding: 5px 8px;
  color: #fff;
  border-radius: 7px
}

.AuthPopup .Ref-Invalid {
  border: 1px solid var(--system-red);
  background: var(--system-red);
  margin-bottom: 15px;
  padding: 5px 8px;
  color: #fff;
  border-radius: 7px;
  width: fit-content
}

.AuthPopup-response-message {
  text-align: center;
  font-size: 18px;
  margin-bottom: 40px
}

.AuthPopup-response-message a {
  color: var(--primary)
}

.AuthPopup-title {
  max-width: 90%;
  font-size: var(--fSize20);
  font-weight: 700;
  font-size: var(--fSize24);
  line-height: var(--fSize24);
  margin-bottom: 40px
}

@media (max-width: 768px) {
  .AuthPopup-title {
      margin-bottom:32px;
      font-size: var(--fSize18);
      line-height: var(--fSize18);
      font-weight: 500
  }
}

.AuthPopup-form {
  display: flex;
  flex-direction: column;
  justify-content: center
}

.AuthPopup-form button[type=submit] {
  margin-top: 3.5rem;
  align-self: center
}

@media screen and (max-width: 768px) {
  .AuthPopup-form button[type=submit] {
      margin-top:1.5rem
  }
}

.AuthPopup-forgot-pass {
  color: var(--black-60);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  text-decoration: underline;
  align-self: end;
  cursor: pointer
}

.AuthPopup-forgot-pass:hover {
  text-decoration: none
}

@media screen and (max-width: 768px) {
  .AuthPopup-forgot-pass {
      margin-bottom:1.5rem
  }
}

.AuthPopup-subtitle {
  color: var(--black-80);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 8px
}

.AuthPopup-info {
  color: var(--primary);
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  display: block;
  margin-bottom: 32px
}

.AuthPopup .above-forgot-pass {
  margin-bottom: 8px
}

.AuthPopup .PasswordField:not(:last-of-type) {
  margin-bottom: 24px;
  padding: 0
}

.AuthPopup .PasswordField:last-of-type {
  margin-bottom: 0;
  padding: 0
}

.Loader-wrapper {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center
}

.Loader-wrapper .Loader {
  display: flex;
  justify-content: space-between;
  width: 70px
}

.Loader-wrapper .Loader div {
  background: var(--primary);
  border-radius: 100%
}

.Loader-wrapper .Loader div:nth-child(1) {
  width: 15px;
  height: 15px;
  animation: ScaleInOut .6s ease-in-out .2s infinite alternate
}

.Loader-wrapper .Loader div:nth-child(2) {
  width: 15px;
  height: 15px;
  animation: ScaleInOut .6s ease-in-out .4s infinite alternate
}

.Loader-wrapper .Loader div:nth-child(3) {
  width: 15px;
  height: 15px;
  animation: ScaleInOut .6s ease-in-out .6s infinite alternate
}

@keyframes ScaleInOut {
  0% {
      transform: scale(.8)
  }

  to {
      transform: scale(1.5)
  }
}

.Portal {
  left: 0;
  top: 0;
  width: 100%;
  min-height: 100%;
  position: fixed;
  z-index: 999;
  padding: 0 var(--24px)
}

.noscroll {
  overflow: hidden
}

.ModalPopUp {
  min-height: 194px
}

.ModalPopUp-message,.ModalPopUp-message .ModalPopUp.content {
  min-height: 248px
}

.ModalPopUp-container {
  position: relative;
  width: 100%
}

.ModalPopUp-container.content {
  max-width: 648px;
  min-height: 194px;
  background: var(--white);
  box-shadow: 0 4px 40px #5f616440;
  border-radius: 20px
}

.ModalPopUp-container.video {
  display: flex;
  justify-content: center;
  max-width: 1096px
}

.ModalPopUp-container.video .ModalPopUp-close {
  color: var(--white);
  top: -40px;
  right: 0
}

.ModalPopUp-container.video .ModalPopUp-content {
  max-width: 1096px;
  width: 100%
}

.ModalPopUp-container.video .TemplateModal-video {
  width: 100%!important;
  max-width: 1096px;
  padding-bottom: 56%
}

.ModalPopUp-container.video .TemplateModal-video>div {
  position: absolute;
  inset: 0;
  width: 100%!important;
  height: 100%!important;
  object-fit: cover
}

.ModalPopUp-backdrop {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  transition: opacity .4s ease;
  width: 100%;
  height: 100%;
  background-color: #00000080
}

.ModalPopUp-portal {
  display: flex;
  align-items: center;
  justify-content: center
}

.ModalPopUp-portal-active {
  animation: popupOpen .3s forwards
}

.ModalPopUp-portal-active .ModalPopUp-container {
  animation: moveUp .3s forwards
}

.ModalPopUp-portal-hide {
  animation: popupClose .3s forwards
}

.ModalPopUp-portal-hide .ModalPopUp-container {
  animation: moveDown .3s forwards
}

.ModalPopUp-content {
  transition: opacity .4s ease;
  z-index: 2;
  position: relative
}

.ModalPopUp-content.withoutPaddings {
  padding: 0
}

.ModalPopUp-close {
  position: absolute;
  top: 42px;
  right: 42px;
  border: none;
  background: none;
  box-shadow: none;
  z-index: 3;
  color: var(--primary);
  cursor: pointer
}

@media (max-width: 768px) {
  .ModalPopUp-close {
      top:16px;
      right: var(--20px)
  }
}

.ModalPopUp-close:focus,.ModalPopUp-close:hover {
  transform: scale(1.1)
}

@keyframes popupOpen {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

@keyframes popupClose {
  0% {
      opacity: 1
  }

  to {
      opacity: 0
  }
}

@keyframes moveUp {
  0% {
      transform: translate3d(0,20px,0)
  }

  to {
      transform: translateZ(0)
  }
}

@keyframes moveDown {
  0% {
      transform: translateZ(0)
  }

  to {
      transform: translate3d(0,-20px,0)
  }
}

.TemplateModal {
  width: 100%;
  position: relative;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  min-height: 194px
}

.TemplateModal.ConfirmPurchase-template .TemplateModal-main {
  padding: 32px 56px
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase {
  display: flex;
  flex-direction: column;
  gap: 32px
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-title {
  font-family: Nunito;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  text-align: left
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-purchase-info {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  gap: 8px
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-purchase-info p {
  font-family: Nunito;
  font-size: 18px;
  font-weight: 300;
  line-height: 21.6px;
  text-align: left;
  color: #8289ac
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-purchase-info svg path {
  stroke: #844bf1
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-balance-info {
  display: flex;
  justify-content: space-between
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-balance-info .current,.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-balance-info .after {
  font-family: Nunito;
  font-size: 18px;
  font-weight: 300;
  line-height: 21.6px;
  text-align: left;
  color: #8289ac
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-balance-info .current span,.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-balance-info .after span {
  border-radius: 200px;
  padding: 4px 8px;
  font-family: Nunito;
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px;
  text-align: center
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-balance-info .current span {
  background-color: #eafdee;
  color: #147129
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase .ConfirmPurchase-balance-info .after span {
  background-color: #fff5ca;
  color: #d47f00
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase.not-enough-money .ConfirmPurchase-purchase-info svg path {
  stroke: #ff003d
}

.TemplateModal.ConfirmPurchase-template .ConfirmPurchase.not-enough-money .ConfirmPurchase-balance-info .current span {
  background-color: #ffe4e3;
  color: #ff003d
}

.TemplateModal-message,.TemplateModal-message .TemplateModal-header {
  min-height: 248px
}

.TemplateModal.md {
  max-width: 528px
}

.TemplateModal.sm {
  max-width: 334px
}

.TemplateModal.yellow {
  color: var(--system-yellow)
}

.TemplateModal.green {
  color: var(--system-green)
}

.TemplateModal.red {
  color: var(--elements-red-100)
}

.TemplateModal.primary {
  color: var(--primary)
}

.TemplateModal-bg {
  margin-top: auto
}

.TemplateModal-bg>*:first-child {
  position: absolute;
  border-radius: 20px;
  width: 100%;
  height: 100%
}

.TemplateModal-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 194px;
  padding: 40px 10px 10px
}

.TemplateModal-header.without-icon {
  justify-content: center;
  padding: 10px
}

.TemplateModal-header.without-icon .TemplateModal-title {
  margin: 0
}

.TemplateModal-header.onlyIcon {
  min-height: 0;
  padding: 40px 0 0
}

.TemplateModal-title {
  margin-top: 20px;
  font-weight: 700;
  font-size: var(--fSize32)
}

.TemplateModal-text {
  margin-top: 16px;
  font-size: var(--fSize14);
  font-weight: 400;
  color: var(--black-100)
}

.TemplateModal-subTitle {
  margin-top: 16px;
  text-transform: uppercase;
  font-size: var(--fSize14);
  font-weight: 400;
  color: var(--black-100)
}

.TemplateModal-main {
  padding: var(--40px)
}

.TemplateModal-main.onlyIcon {
  padding: 0 16px
}

@media (max-width: 768px) {
  .TemplateModal-main {
      padding:16px 23px 32px
  }
}

@media (max-width: 360px) {
  .TemplateModal-main {
      padding:16px 12px 32px
  }
}

.profile-form {
  height: 400px
}

.profile-wrapper {
  display: flex;
  font-size: 20px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  align-self: center
}

.profile-link {
  color: #651eee;
  font-weight: 400
}

.PageLayout {
  overflow: hidden
}

.PageLayout-main {
  margin: 0 auto;
  max-width: 1360px;
  position: relative;
  z-index: 2
}

.ErrorPageLayout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  min-height: 100vh
}

.ErrorPageLayout-main {
  align-self: flex-end;
  padding: 0!important
}

.ErrorPageLayout Footer {
  margin: 0
}

.Page-404 {
  position: relative;
  overflow: hidden
}

.Page-404-image-ibg {
  width: 100%;
  height: 100%;
  padding-bottom: 50%;
  z-index: -1;
  position: relative;
  bottom: -50px
}

@media screen and (max-width: 768px) {
  .Page-404-image-ibg {
      bottom:-25px;
      height: 490px
  }
}

.Page-404-back-btn {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translate(-50%)!important;
  min-width: 200px
}

@media screen and (max-width: 1350px) {
  .Page-404-back-btn {
      bottom:2%
  }
}

@media screen and (max-width: 768px) {
  .Page-404-back-btn {
      bottom:40px
  }
}

.Page-404 .Bg-ErrorPage {
  z-index: -1
}

.SectionHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px
}



@media (max-width: 768px) {
  .SectionHead {
      margin-bottom:32px
  }
}

.SectionHead h2 {
  text-align: center;
  margin-bottom: 32px
}

@media (max-width: 768px) {
  .SectionHead h2 {
      margin-bottom:8px
  }
}

.SectionHead p {
  text-align: center;
  color: var(--black-20);
  font-size: var(--fSize16);
  line-height: var(--fSize28);
  font-weight: 500;
  max-width: 1200px
}
.SectionHead__bottom{
  margin-top: 24px;
}
.SectionHead__bottom p:last-child {
  margin-bottom: 24px;
  text-align: center;
  color: var(--black-20);
  font-size: var(--fSize16);
  line-height: var(--fSize28);
  font-weight: 500;
  max-width: 750px
}

@media (max-width: 768px) {
  .SectionHead p {
      font-size:1rem;
      line-height: var(--fSize24);
      font-weight: 400
  }
}

.HoverTabs {
  display: grid;
  grid-template-columns: 1fr 536px;
  gap: 136px
}

@media screen and (max-width: 1300px) {
  .HoverTabs {
      gap:16px
  }
}

@media screen and (max-width: 1024px) {
  .HoverTabs {
      grid-template-columns:1fr 328px
  }
}

@media screen and (max-width: 768px) {
  .HoverTabs {
      grid-template-columns:1fr
  }
}

.HoverTabs-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px
}

@media screen and (max-width: 768px) {
  .HoverTabs-items {
      gap:8px
  }
}

@media screen and (min-width: 768px) {
  .HoverTabs-items {
      /* transition:var(--transition);
      opacity: 0;
      transform: translate(-100%) */
  }

  .HoverTabs-items.in-view {
      opacity: 1;
      transform: translate(0)
  }
}

.HoverTabs-item {
  position: relative;
  padding: 24px 40px;
  border-radius: 20px;
  border: 1px solid var(--white);
  cursor: pointer
}
.HoverTabs-item  svg{
  position: absolute;
  right: 50px;
  top: 30px;  
}
.HoverTabs-item.active svg{
  fill: #000;
}

@media screen and (max-width: 480px) {
  .HoverTabs-item {
      padding:16px 24px
  }
  .HoverTabs-item svg {
    position: absolute;
    right: 21px;
    top: 27px;
    width: 10px;
    height: 10px;
}
}

.HoverTabs-item.active {
  background: var(--addition-purple)
}

.HoverTabs-item.active .HoverTabs-item-title {
  color: var(--black-100);
  padding-bottom: 8px
}

.HoverTabs-item-title {
  font-size: var(--fSize18);
  line-height: var(--fSize32);
  color: var(--black-10);
  font-weight: 500
}

@media screen and (max-width: 768px) {
  .HoverTabs-item-title {
      font-size:var(--fSize16);
      line-height: var(--fSize28)
  }
}

.HoverTabs-item-text {
  overflow: hidden;
  font-size: var(--fSize14);
  line-height: var(--fSize24);
  color: var(--black-60);
  font-weight: 400;
  transition: all .5s cubic-bezier(.215,.61,.355,1)
}

.HoverTabs-images {
  position: relative;
  height: 566px
}

@media screen and (max-width: 1024px) {
  .HoverTabs-images {
      height:328px
  }
}

@media screen and (max-width: 768px) {
  .HoverTabs-images {
      display:none;
     
      order: -1;
      height: 500px 
  }
  .HoverTabs-mobile-img{
    display: none;
  }
  .HoverTabs-mobile-img.active{
    display: none;
  }
}

@media screen and (max-width: 480px) {
  .HoverTabs-images {
      height:328px
  }
}

@media screen and (min-width: 768px) {
  .HoverTabs-images {
      /* transition:var(--transition);
      opacity: 0;
      transform: translate(100%) */
  }

  .HoverTabs-images.in-view {
      opacity: 1;
      transform: translate(0)
  }
}

.HoverTabs-img {
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 4px 10px #7a889826;
  border-radius: 20px;
  position: absolute;
  inset: 0;
  z-index: -1
}

@media screen and (max-width: 768px) {
  .HoverTabs-img {
      display:none
  }
}

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

.HoverTabs-img.active {
  z-index: 1
}

.HoverTabs-mobile-img {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 20px;
  width: 100%;
  height: 0;
  opacity: 0
}

@media screen and (min-width: 768px) {
  .HoverTabs-mobile-img {
      display:none
  }
}

.HoverTabs-mobile-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.HoverTabs-mobile-img.active {
  opacity: 1;
  height: 300px
}

@media screen and (max-width: 768px) {
  .HoverTabs-mobile-img.active {
      height:400px
  }
}

@media screen and (max-width: 480px) {
  .HoverTabs-mobile-img.active {
      height:300px
  }
}

.Advantages {
  margin-top: 100px
}

@media screen and (max-width: 768px) {
  .Advantages {
      margin-top:60px
  }
}

.Spollers{
  margin-bottom: var(--12px);
}

.Spollers .Spoller {
  position: relative
}

.Spollers .Spoller svg{
  max-width: 30px;
  max-height: 30px;
}

.Spollers .Spoller.open .Spoller-head {
  color: var(--primary);
  padding-bottom: 16px
}

.Spollers .Spoller.open .Spoller-head i {
  transform: rotate(-180deg)
}


@media screen and (max-width: 768px) {
  .Spollers .Spoller.open .Spoller-head {
      border-bottom:transparent!important
  }
}

.Spollers .Spoller.open .Spoller-body {
  margin: 18px 36px;
  opacity: 1
}

@media screen and (max-width: 768px) {
  .Spollers .Spoller.open .Spoller-body {
      margin:0 0 18px
  }
}

.Spollers .Spoller.open:before {
  opacity: 1;
  height: calc(100% + 24px)
}

@media screen and (max-width: 768px) {
  .Spollers .Spoller.open:before {
      top:50%;
      left: 50%;
      transform: translate(-50%,-50%);
      width: 102%
  }
}

.Spollers .Spoller:before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background: var(--white);
  transition: var(--transition);
  opacity: 0;
  pointer-events: none
}

@media screen and (max-width: 768px) {
  .Spollers .Spoller:before {
      display:none
  }
}

.Spollers .Spoller:hover:not(.open) .Spoller-head {
  color: var(--primary)
}

.Spollers .Spoller:not(:last-child) .Spoller-head {
  border-bottom: 1px solid var(--black-80)
}

.Spollers .Spoller-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: var(--fSize18);
  line-height: 32px;
  padding: 18px 36px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  z-index: 2
}

@media screen and (max-width: 768px) {
  .Spollers .Spoller-head {
      padding:16px 0;
      font-weight: 400;
      font-size: var(--fSize14);
      line-height: 24px
  }
}

.Spollers .Spoller-head i {
  color: inherit;
  transition: var(--transition)
}

.Spollers .Spoller-body {
  color: var(--black-80);
  font-weight: 400;
  font-size: var(--fSize14);
  line-height: 24px;
  overflow: hidden;
  transition: height .5s cubic-bezier(.215,.61,.355,1);
  position: relative;
  z-index: 2;
  opacity: 0
}

._homeHero_z5ii6_1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px 40px
}

@media (max-width: 768px) {
  ._homeHero_z5ii6_1 {
      padding-top:var(--32px)
  }
}

._content_z5ii6_17 {
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  gap: 40px;
  min-height: 50px
}

@media (max-width: 768px) {
  ._content_z5ii6_17 {
      flex-direction:column;
      min-height: auto
  }
}

._textContent_z5ii6_32 {
  flex: 1;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1200px) {
  ._textContent_z5ii6_32 {
      max-width:500px
  }
}

@media (max-width: 768px) {
  ._textContent_z5ii6_32 {
      max-width:100%;
      align-items: center;
      text-align: center;
      gap: 32px
  }
}

._mainTitle_z5ii6_53 {
  font-size: 55px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin-bottom: 5px;
  text-align: center;
}
._mainTitle_z5ii6_53 span{
  font-weight: 500;
}

._mainTitle_z5ii6_53 ._subtitle_z5ii6_60 {
  display: block;
  font-size: 30px;
  color: #dedede;
  margin-top: 8px
}

@media (max-width: 1200px) {
  ._mainTitle_z5ii6_53 {
      font-size:72px
  }

  ._mainTitle_z5ii6_53 ._subtitle_z5ii6_60 {
      font-size: 36px
  }
}

@media (max-width: 768px) {
  ._mainTitle_z5ii6_53 {
      font-size:56px
  }

  ._mainTitle_z5ii6_53 ._subtitle_z5ii6_60 {
      font-size: 32px
  }
}

@media (max-width: 480px) {
  ._mainTitle_z5ii6_53 {
      font-size:36px
  }

  ._mainTitle_z5ii6_53 ._subtitle_z5ii6_60 {
      font-size: 24px
  }
}

._tryButton_z5ii6_91 {
  background: #1d4ed8;
  color: #fff;
  padding: 16px 32px;
  border-radius: 100px;
  font-size: 20px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  transition: all .3s ease;
  max-width: 390px;
  width: 100%;
  position: relative
}

._tryButton_z5ii6_91:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px;
  border: 1px solid black;
  transform: translate(4px,4px);
  z-index: -1
}

._tryButton_z5ii6_91 ._buttonSubtext_z5ii6_120 {
  font-size: 16px;
  opacity: .9
}

._tryButton_z5ii6_91:hover {
  background: #4c14c0
}

@media (max-width: 768px) {
  ._tryButton_z5ii6_91 {
      max-width:320px;
      padding: 14px 28px;
      font-size: 18px
  }

  ._tryButton_z5ii6_91 ._buttonSubtext_z5ii6_120 {
      font-size: 14px
  }
}

@media (max-width: 480px) {
  ._tryButton_z5ii6_91 {
      max-width:280px;
      padding: 12px 24px;
      font-size: 16px
  }

  ._tryButton_z5ii6_91 ._buttonSubtext_z5ii6_120 {
      font-size: 13px
  }
}

._description_z5ii6_148 {
  margin-top: 30px;
  font-size: 20px;
  color: #fff;
  text-align: center;
}

._description_z5ii6_148 span {
  color: #fff;
}

@media (max-width: 1200px) {
  ._description_z5ii6_148 {
      font-size:22px
  }
}

@media (max-width: 768px) {
  ._description_z5ii6_148 {
      font-size:20px;
      text-align: center;
      margin-top: 25
  }
}

@media (max-width: 480px) {
  ._description_z5ii6_148 {
      font-size:18px
  }
}

._logoContainer_z5ii6_176 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none
}

._logoContainer_z5ii6_176 ._logo_z5ii6_176 {
  max-width: 100%;
  height: auto;
  will-change: filter;
  pointer-events: none;
  -webkit-user-drag: none
}

@media (max-width: 768px) {
  ._logoContainer_z5ii6_176 ._logo_z5ii6_176 {
      max-width:80%
  }
}

._bannerImage_z5ii6_198 {
  margin-top: 20px;
  width: 100%;
  opacity: 0;
  transition: opacity .3s ease
}

._bannerImage_z5ii6_198 img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 4px 40px #5f616440
}

._bannerImage_z5ii6_198._imgLoaded_z5ii6_210 {
  opacity: 1
}

@keyframes _scaleIn_z5ii6_1 {
  0% {
      transform: scale(.3)
  }

  to {
      opacity: 1;
      transform: scale(1)
  }
}

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

.HomeQuestion-image {
  margin-top: 56px
}

@media screen and (max-width: 768px) {
  .HomeQuestion-image {
      margin-top:24px
  }
}

.HomeQuestion-image img {
  max-width: 100%
}

.Social {
  display: grid;
  grid-template-columns: 1fr 292px 1fr;
  column-gap: 28px;
  max-width: 100vw
}

@media screen and (max-width: 800px) {
  .Social {
      grid-template-columns:1fr;
      grid-template-rows: auto 44px auto;
      row-gap: 57px
  }
}

.Social-item {
  position: relative
}

.Social-left,.Social-right {
  display: flex;
  flex-direction: column;
  gap: 24px
}

@media screen and (max-width: 800px) {
  .Social-left,.Social-right {
      padding:0;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0
  }
}

.Social-left .Social-item:nth-child(1) .Social-line {
  top: 54px;
  left: 112px
}

.Social-left .Social-item:nth-child(2) .Social-line {
  top: 54px;
  left: 112px
}

.Social-left .Social-item:nth-child(3) .Social-line {
  top: 0;
  left: 112px
}

.Social-left .Social-item:nth-child(4) .Social-line {
  top: -95px;
  left: 112px
}

.Social-right a {
  margin-left: auto
}

.Social-right .Social-item:nth-child(1) .Social-line {
  top: 54px;
  right: 112px
}

.Social-right .Social-item:nth-child(2) .Social-line {
  top: 54px;
  right: 112px
}

.Social-right .Social-item:nth-child(3) .Social-line {
  top: 0;
  right: 112px
}

.Social-right .Social-item:nth-child(4) .Social-line {
  top: -95px;
  right: 112px
}

.Social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 112px;
  background: var(--white);
  border-radius: 20px;
  transition: .8s;
  /* opacity: 0; */
  position: relative
}

.Social-icon:hover .Social-icon-name {
  opacity: 1;
  transform: translateY(0)
}

@media screen and (max-width: 800px) {
  .Social-icon {
      width:64px;
      height: 64px;
      border-radius: 10px;
      opacity: 1;
      box-shadow: 0 4px 10px #21274966
  }

  .Social-icon img,.Social-icon svg {
      max-width: 32px
  }
}

.Social-icon-name {
  color: var(--white);
  font-size: var(--fSize14);
  line-height: 100%;
  padding: 14px 20px;
  box-shadow: 0 2.85714px 14.2857px #5f616440;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  background: var(--primary);
  transform: translateY(10px);
  position: absolute;
  top: 100%;
  left: 30%;
  z-index: 2;
  transition: var(--transition)
}

.Social-icon-name:after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translate(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--primary)
}

@media screen and (max-width: 800px) {
  .Social-icon-name {
      display:none
  }
}

.Social-icon.fadeIn {
  opacity: 1
}

.Social-icon:hover {
  box-shadow: 0 4px 10px #21274966
}

.Social-line {
  /* opacity: 0; */
  position: absolute
}

@media screen and (max-width: 800px) {
  .Social-line {
      display:none
  }
}

.Social-line-right {
  transform: rotate3d(180deg)
}

.Social-line.draw {
  animation-name: dash;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards
}

.Social-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .8s;
  /* opacity: 0; */
  position: relative;
  z-index: 2
}
.Social-logo > img{
  max-width: 160px;
}

.Social-logo.fadeIn {
  opacity: 1
}

@media screen and (max-width: 800px) {
  .Social-logo img {
    max-width: 300px;
    max-height: 140px;
  }
}

@keyframes dash {
  0% {
      opacity: 1;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000
  }

  to {
      opacity: 1;
      stroke-dashoffset: 0
  }
}

.SpeedTabs-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
  gap: 16px
}

@media screen and (max-width: 768px) {
  .SpeedTabs-btns {
      margin-top:18px;
      gap: 8px
  }
}

@media screen and (max-width: 530px) {
  .SpeedTabs-btns {
      display:grid;
      grid-template-columns: 1fr 1fr
  }
}

@media screen and (max-width: 370px) {
  .SpeedTabs-btns {
      grid-template-columns:1fr
  }
}

.SpeedTabs .Tab {
  padding: 40px 88px;
  position: relative;
  background: var(--white);
  border-radius: 20px;
  display: none;
  grid-template-columns: auto 1fr;
  gap: 120px
}

@media screen and (max-width: 1256px) {
  .SpeedTabs .Tab {
      padding:24px 16px;
      gap: 32px
  }
}

@media screen and (max-width: 1080px) {
  .SpeedTabs .Tab {
      grid-template-columns:1fr
  }
}

.SpeedTabs .Tab.active {
  display: grid
}

.SpeedTabs .Tab-stats {
  display: grid;
  grid-template-columns: 152px 178px 178px;
  gap: 72px;
  margin-bottom: 56px
}

@media screen and (max-width: 1330px) {
  .SpeedTabs .Tab-stats {
      column-gap:20px;
      row-gap: 24px
  }
}

@media screen and (max-width: 1080px) {
  .SpeedTabs .Tab-stats {
      grid-template-columns:repeat(3,1fr)
  }
}

@media screen and (max-width: 1256px) {
  .SpeedTabs .Tab-stats {
      margin-bottom:24px
  }
}

@media screen and (max-width: 530px) {
  .SpeedTabs .Tab-stats {
      grid-template-columns:repeat(2,1fr)
  }
}

@media screen and (max-width: 370px) {
  .SpeedTabs .Tab-stats {
      grid-template-columns:1fr
  }
}

.SpeedTabs .Tab-stat-name {
  display: flex;
  align-items: center;
  color: var(--black-60);
  font-weight: 500;
  font-size: var(--fSize16);
  line-height: 100%;
  gap: 8px
}

@media screen and (max-width: 768px) {
  .SpeedTabs .Tab-stat-name {
      font-weight:400;
      font-size: var(--fSize14)
  }
}

.SpeedTabs .Tab-stat-value {
  color: var(--primary);
  font-weight: 700;
  font-size: var(--fSize56);
  line-height: var(--fSize64)
}

@media screen and (max-width: 768px) {
  .SpeedTabs .Tab-stat-value {
      font-size:var(--fSize32);
      line-height: var(--fSize40)
  }
}

.SpeedTabs .Tab-stat-value span {
  color: var(--black-100);
  margin-left: var(--fSize16);
  font-weight: 500;
  font-size: var(--fSize16);
  line-height: var(--fSize28)
}

@media screen and (max-width: 768px) {
  .SpeedTabs .Tab-stat-value span {
      font-weight:400;
      font-size: var(--fSize14);
      line-height: var(--fSize24);
      margin-left: 8px
  }
}

.SpeedTabs .Tab-text h3 {
  margin-bottom: 16px
}

@media screen and (max-width: 768px) {
  .SpeedTabs .Tab-text h3 {
      margin-bottom:12px
  }
}

.SpeedTabs .Tab-text p {
  font-weight: 400;
  font-size: var(--fSize14);
  line-height: var(--fSize24);
  color: var(--black-60)
}

.SpeedTabs .Tab-text p:not(:last-child) {
  margin-bottom: 16px
}

@media screen and (max-width: 768px) {
  .SpeedTabs .Tab-text p:not(:last-child) {
      margin-bottom:8px
  }
}

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

.Speedometer.active-90 .Speedometer-arrow {
  animation: speedGrover90 1.1s ease-out forwards
}

.Speedometer.active-90.jump .Speedometer-arrow {
  animation: speedGrover90Jump 10s ease-out infinite
}

.Speedometer.active-60 .Speedometer-arrow {
  animation: speedGrover60 1.1s ease-out forwards
}

.Speedometer.active-60.jump .Speedometer-arrow {
  animation: speedGrover60Jump 10s ease-out infinite
}

.Speedometer.active-40 .Speedometer-arrow {
  animation: speedGrover40 1.1s ease-out forwards
}

.Speedometer.active-40.jump .Speedometer-arrow {
  animation: speedGrover40Jump 10s ease-out infinite
}

.Speedometer-panel {
  width: 376px;
  height: 314px;
  position: relative;
  overflow: hidden
}

@media screen and (max-width: 768px) {
  .Speedometer-panel {
      width:280px;
      height: 234px
  }
}

@media screen and (max-width: 370px) {
  .Speedometer-panel {
      width:240px;
      height: 234px
  }
}

.Speedometer-desk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.Speedometer-desk-num1,.Speedometer-desk-num2,.Speedometer-desk-num3,.Speedometer-desk-num4,.Speedometer-desk-num5,.Speedometer-desk-num6,.Speedometer-desk-num7 {
  opacity: 0;
  animation: fadeIn .5s;
  animation-fill-mode: forwards
}

.Speedometer-desk-num2 {
  animation-delay: .1s
}

.Speedometer-desk-num3 {
  animation-delay: .2s
}

.Speedometer-desk-num4 {
  animation-delay: .3s
}

.Speedometer-desk-num5 {
  animation-delay: .4s
}

.Speedometer-desk-num6 {
  animation-delay: .5s
}

.Speedometer-desk-num7 {
  animation-delay: .6s
}

.Speedometer-arrow {
  position: absolute;
  bottom: 35%;
  left: 50%;
  transform-origin: 3% 97%;
  transform: scale(.5) rotate(-170deg)
}

.Speedometer-value {
  display: flex;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fSize56);
  line-height: var(--64px);
  margin-bottom: 8px
}

@media screen and (max-width: 768px) {
  .Speedometer-value {
      font-size:var(--fSize42);
      line-height: var(--fSize48)
  }
}

.Speedometer-value span {
  width: 174px
}

@media screen and (max-width: 768px) {
  .Speedometer-value span {
      width:127px
  }
}

.Speedometer-dimension {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  font-size: var(--fSize16);
  color: var(--primary);
  line-height: 100%
}

@media screen and (max-width: 768px) {
  .Speedometer-dimension {
      font-size:var(--fSize12)
  }
}

@keyframes speedGrover90 {
  0% {
      transform: rotate(-170deg) scale(.5)
  }

  to {
      transform: rotate(80deg) scale(.5)
  }
}

@keyframes speedGrover60 {
  0% {
      transform: rotate(-170deg) scale(.5)
  }

  to {
      transform: rotate(36deg) scale(.5)
  }
}

@keyframes speedGrover40 {
  0% {
      transform: rotate(-170deg) scale(.5)
  }

  to {
      transform: rotate(-5deg) scale(.5)
  }
}

@keyframes speedGrover40Jump {
  0% {
      transform: rotate(-5deg) scale(.5)
  }

  10% {
      transform: rotate(3deg) scale(.5)
  }

  20% {
      transform: rotate(-4deg) scale(.5)
  }

  30% {
      transform: rotate(-1deg) scale(.5)
  }

  40% {
      transform: rotate(4deg) scale(.5)
  }

  50% {
      transform: rotate(-3deg) scale(.5)
  }

  60% {
      transform: rotate(1deg) scale(.5)
  }

  70% {
      transform: rotate(-5deg) scale(.5)
  }

  80% {
      transform: rotate(0) scale(.5)
  }

  90% {
      transform: rotate(2deg) scale(.5)
  }

  to {
      transform: rotate(-5deg) scale(.5)
  }
}

@keyframes speedGrover60Jump {
  0% {
      transform: rotate(36deg) scale(.5)
  }

  10% {
      transform: rotate(20deg) scale(.5)
  }

  20% {
      transform: rotate(36deg) scale(.5)
  }

  30% {
      transform: rotate(40deg) scale(.5)
  }

  40% {
      transform: rotate(55deg) scale(.5)
  }

  50% {
      transform: rotate(35deg) scale(.5)
  }

  60% {
      transform: rotate(44deg) scale(.5)
  }

  70% {
      transform: rotate(65deg) scale(.5)
  }

  80% {
      transform: rotate(30deg) scale(.5)
  }

  90% {
      transform: rotate(50deg) scale(.5)
  }

  to {
      transform: rotate(36deg) scale(.5)
  }
}

@keyframes speedGrover90Jump {
  0% {
      transform: rotate(80deg) scale(.5)
  }

  10% {
      transform: rotate(75deg) scale(.5)
  }

  20% {
      transform: rotate(82deg) scale(.5)
  }

  30% {
      transform: rotate(79deg) scale(.5)
  }

  40% {
      transform: rotate(84deg) scale(.5)
  }

  50% {
      transform: rotate(76deg) scale(.5)
  }

  60% {
      transform: rotate(80deg) scale(.5)
  }

  70% {
      transform: rotate(78deg) scale(.5)
  }

  80% {
      transform: rotate(85deg) scale(.5)
  }

  90% {
      transform: rotate(77deg) scale(.5)
  }

  to {
      transform: rotate(80deg) scale(.5)
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

.ReactSelect .ReactSelect-select__indicator-separator,.ReactSelect .ReactSelect-select__dropdown-indicator {
  display: none
}

.ReactSelect .ReactSelect-select__control {
  padding: 0;
  box-shadow: none;
  text-align: left
}

.ReactSelect .ReactSelect-select__option {
  cursor: pointer;
  text-align: left;
  z-index: 12
}

.ReactSelect .ReactSelect-select__option--is-focused {
  background: var(--gray-40)
}

.ReactSelect .ReactSelect-select__option--is-selected {
  background: var(--white-0);
  color: var(--black-0)
}

.ReactSelect .ReactSelect-select__option:active {
  background-color: var(--gray-40)
}

.ReactSelect .ReactSelect-select__option--is-focused.ReactSelect-select__option--is-selected {
  background: var(--gray-40)
}

.ReactSelect .ReactSelect-select__menu {
  z-index: 2;
  box-shadow: var(--light-shadow);
  border-radius: 3px;
  border: 1px solid var(--gray-30)
}

.ReactSelect .ReactSelect-select__menu-list {
  z-index: 4;
  padding-top: 0;
  padding-bottom: 0;
  max-height: 250px
}

.ReactSelect-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  border: none
}

.ReactSelect-label {
  font-weight: 400;
  font-size: var(--fSize14);
  color: var(--black-60)
}

.ReactSelect .ReactSelect-select__single-value {
  color: #a2a7c1
}

.ReactSelect .ReactSelect-select__dropdown-indicator {
  display: flex;
  padding: 8px 35px 8px 0
}

.ReactSelect .ReactSelect-select__indicator svg {
  display: none
}

.ReactSelect .ReactSelect-select__indicator:after {
  font-family: icomoon!important;
  content: "\e901";
  font-size: 20px;
  transition: var(--transition)
}

.ReactSelect .ReactSelect-select__placeholder {
  font-weight: 500;
  color: var(--black-100);
  font-size: var(--fSize14);
  line-height: 100%
}

.ReactSelect .ReactSelect-select__control {
  background: none;
  transition: none;
  cursor: pointer
}

.ReactSelect .ReactSelect-select__control--menu-is-open {
  border-bottom: none;
  border-radius: 25px 25px 0 0
}

.ReactSelect .ReactSelect-select__control--menu-is-open .ReactSelect-select__indicator:after {
  transform: rotate(-180deg)
}

.ReactSelect .ReactSelect-select__menu {
  margin: 0;
  background: none;
  box-shadow: none;
  border-radius: 0 0 25px 25px
}

.ReactSelect .ReactSelect-select__option {
  padding: 2px 8px 2px 24px;
  margin-bottom: 10px
}

.ReactSelect.geo .ReactSelect-select__value-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 2px 8px 2px 24px
}

.ReactSelect.geo .ReactSelect-select__value-container:before {
  font-family: icomoon!important;
  content: "\e914";
  font-size: 17.5px;
  color: var(--primary);
  margin-right: 10px
}

.ReactSelect.geo .ReactSelect-select__control {
  height: 54px;
  border-color: var(--primary);
  background: var(--addition-grey)
}

.ReactSelect.geo .ReactSelect-select__menu {
  border: 1px solid var(--primary);
  border-top: none;
  background: var(--addition-grey)
}

.ReactSelect.geo .ReactSelect-select__option:hover {
  color: var(--primary)
}

.ReactSelect.geo .ReactSelect-select__indicator:after {
  color: var(--primary)
}

.ReactSelect.card.primary .ReactSelect-select__value-container:before {
  color: var(--primary)
}

.ReactSelect.card.primary .ReactSelect-select__indicator:after {
  color: var(--primary)
}

.ReactSelect.card.primary .ReactSelect-select__option:hover {
  color: var(--primary)
}

.ReactSelect.card.green .ReactSelect-select__value-container:before {
  color: var(--system-aqua)
}

.ReactSelect.card.green .ReactSelect-select__indicator:after {
  color: var(--system-aqua)
}

.ReactSelect.card.green .ReactSelect-select__option:hover {
  color: var(--system-aqua)
}

.ReactSelect.card.red .ReactSelect-select__value-container:before {
  color: var(--elements-red-100)
}

.ReactSelect.card.red .ReactSelect-select__indicator:after {
  color: var(--elements-red-100)
}

.ReactSelect.card.red .ReactSelect-select__option:hover {
  color: var(--elements-red-100)
}

.ReactSelect.card.calendar .ReactSelect-select__value-container:before {
  content: "\e906"
}

.ReactSelect.card.earth .ReactSelect-select__value-container:before {
  content: "\e914"
}

.ReactSelect.card.phone .ReactSelect-select__value-container:before {
  content: "\e919"
}

.ReactSelect.card.primary .ReactSelect-select__control,.ReactSelect.card.primary .ReactSelect-select__menu {
  background: var(--addition-purple)
}

.ReactSelect.card .ReactSelect-select__value-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 2px 8px 2px 24px
}

@media screen and (max-width: 480px) {
  .ReactSelect.card .ReactSelect-select__value-container {
      padding:2px 8px 2px 18px
  }
}

.ReactSelect.card .ReactSelect-select__value-container:before {
  font-family: icomoon!important;
  font-size: 20px;
  margin-right: 18px
}

@media screen and (max-width: 480px) {
  .ReactSelect.card .ReactSelect-select__value-container:before {
      font-size:16px;
      margin-right: 8px
  }
}

.ReactSelect.card .ReactSelect-select__control {
  height: 54px;
  border-radius: 10px;
  border-color: transparent;
  background: var(--addition-grey)
}

@media screen and (max-width: 480px) {
  .ReactSelect.card .ReactSelect-select__control {
      font-size:var(--fSize14);
      height: 49px
  }
}

.ReactSelect.card .ReactSelect-select__control--menu-is-open {
  border-radius: 10px 10px 0 0
}

.ReactSelect.card .ReactSelect-select__control--menu-is-open .ReactSelect-select__indicator:after {
  transform: rotate(0)
}

.ReactSelect.card .ReactSelect-select__menu {
  border: none;
  border-top: none;
  background: var(--addition-grey);
  border-radius: 0 0 10px 10px
}

.ReactSelect.card .ReactSelect-select__option {
  transition: var(--transition)
}

.ReactSelect.card .ReactSelect-select__indicator:after {
  transform: rotate(-90deg)
}

@media screen and (max-width: 480px) {
  .ReactSelect.card .ReactSelect-select__dropdown-indicator {
      padding:8px 18px 8px 8px
  }
}

.ReactSelect.usual .ReactSelect-select__value-container {
  padding: 2px 8px 2px 16px
}

.ReactSelect.usual .ReactSelect-select__control {
  height: 50px;
  border-color: var(--black-20);
  background: var(--white)
}

.ReactSelect.usual .ReactSelect-select__control--menu-is-open {
  border-color: var(--primary-20)
}

.ReactSelect.usual .ReactSelect-select__menu {
  border: 1px solid var(--primary-20);
  border-top: none;
  background: var(--white)
}

.ReactSelect.usual .ReactSelect-select__option {
  border-top: 1px solid var(--addition-grey);
  padding: 14px 8px 2px 18px
}

.ReactSelect.usual .ReactSelect-select__option--is-focused {
  color: var(--primary);
  background: var(--primary-10)
}

.ReactSelect.usual .ReactSelect-select__option:hover {
  color: var(--primary)
}

.ReactSelect.usual .ReactSelect-select__indicator:after {
  color: #68686d
}

@keyframes openMenuAnimation {
  0% {
      opacity: 0
  }

  90% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

.content-loading .TarifCard {
  opacity: 0
}

.TarifCard {
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 4px 70px #7a889899;
  position: relative;
  padding: 32px
}

@media screen and (max-width: 480px) {
  .TarifCard {
      padding:24px
  }
}

.TarifCard:hover .TarifCard-wave {
  background-position: 200px 20px
}

.TarifCard:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  z-index: -1
}

.TarifCard.loading {
  min-height: 636px
}

.TarifCard.loading:after {
  background: #e3e3e5 linear-gradient(90deg,transparent,rgba(101,30,238,.08),transparent) no-repeat;
  background-size: 200px 100%;
  animation: 2.5s infinite skeleton;
  opacity: 1;
  z-index: 4
}

.TarifCard.delay-0 {
  animation-delay: .1s
}

.TarifCard.delay-1 {
  animation-delay: .2s
}

.TarifCard.delay-2 {
  animation-delay: .3s
}

.TarifCard.delay-3 {
  animation-delay: .4s
}

.TarifCard .TarifCard-price span.crossed-price {
  color: #c7c7c7;
  text-decoration: line-through;
  font-weight: 400
}

.TarifCard.primary .TarifCard-wave {
  background-image: url(/assets/wave-primary-ccdd7948.svg)
}

.TarifCard.primary .TarifCard-status span {
  color: var(--primary)
}

.TarifCard.primary .TarifCard-status span:after {
  background: var(--primary)
}

.TarifCard.primary .TarifCard-price .dollar-sign {
  color: var(--primary)
}

.TarifCard.green .TarifCard-wave {
  background-image: url(/assets/wave-green-e05c8528.svg)
}

.TarifCard.green .TarifCard-status span {
  color: var(--system-aqua)
}

.TarifCard.green .TarifCard-status span:after {
  background: var(--system-aqua)
}

.TarifCard.green .TarifCard-price .dollar-sign {
  color: var(--system-aqua)
}

.TarifCard.red .TarifCard-wave {
  background-image: url(/assets/wave-red-b68779f5.svg);
  opacity: .2
}

.TarifCard.red .TarifCard-status span {
  color: var(--system-red)
}

.TarifCard.red .TarifCard-status span:after {
  background: var(--system-red)
}

.TarifCard.red .TarifCard-price .dollar-sign {
  color: var(--system-red)
}

.TarifCard-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px
}

@media screen and (max-width: 728px) {
  .TarifCard-content {
      gap:16px
  }
}

.TarifCard-content-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px
}

@media screen and (max-width: 728px) {
  .TarifCard-content-head {
      gap:16px
  }
}

.TarifCard-mark {
  position: absolute;
  top: 0;
  right: 16px
}

.TarifCard-status {
  font-size: var(--fSize16);
  line-height: 100%
}

@media screen and (max-width: 480px) {
  .TarifCard-status {
      font-size:var(--fSize14)
  }
}

.TarifCard-status span {
  display: inline-flex;
  flex-direction: column
}

.TarifCard-status span span {
  margin-top: 5px;
  height: 1px
}

@media screen and (max-width: 480px) {
  .TarifCard.home-page .original-price {
      top:50px
  }
}

@media screen and (max-width: 768px) {
  .TarifCard.home-page .TarifCard-price {
      margin-top:20px
  }
}

.TarifCard .original-price {
  position: absolute;
  top: 60px;
  left: 23px
}

.TarifCard-price {
  display: flex
}

.TarifCard-price span {
  font-weight: 700;
  line-height: 120%
}

.TarifCard-price span.dollar-sign {
  align-self: baseline;
  font-size: var(--fSize24);
  margin-right: 8px
}

@media screen and (max-width: 480px) {
  .TarifCard-price span.dollar-sign {
      font-size:var(--fSize18)
  }
}

.TarifCard-price span.total-price {
  font-size: var(--fSize56)
}

@media screen and (max-width: 480px) {
  .TarifCard-price span.total-price {
      font-size:var(--fSize32)
  }
}

.TarifCard-price .discount-size {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 23px;
  top: 63px;
  height: 32px;
  width: 120px;
  border-radius: 4px;
  color: #fff
}

.TarifCard-price .discount-size.primary {
  background-color: var(--primary)
}

.TarifCard-price .discount-size.red {
  background-color: var(--elements-red-100)
}

.TarifCard-price .discount-size.green {
  background-color: var(--system-aqua)
}

.TarifCard .special-offer-message {
  position: absolute;
  left: 25px;
  top: 27px
}

.TarifCard .special-offer-message .contact-support {
  width: 260px
}

.TarifCard .special-offer-message .Footer-telegram {
  position: absolute;
  left: 170px;
  top: 22px
}

.TarifCard .TarifCard-content-head.special-offer {
  height: 40px
}

.TarifCard .TarifCard-price.special-offer .original-price {
  position: static
}

.TarifCard .TarifCard-price.special-offer .discount-size {
  width: 120px;
  padding: 5px
}

.TarifCard-stats {
  font-weight: 400;
  font-size: var(--fSize14);
  line-height: var(--fSize24)
}

.TarifCard-stats li {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: center;
  gap: 8px
}

.TarifCard-stats li:not(:last-child) {
  margin-bottom: 16px
}

.TarifCard-btn {
  display: flex;
  justify-content: center;
  z-index: 3
}

.TarifCard-selects {
  margin-top: auto;
  z-index: 4
}

.TarifCard-selects label {
  margin-top: 5px;
  color: var(--black-60);
  display: inline-block
}

.TarifCard-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 92px;
  transition: var(--transition);
  background-repeat: repeat-x;
  pointer-events: none;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 2
}

.TarifCard .amount-input-container {
  margin-top: 8px;
  height: 54px;
  padding: 2px 8px 2px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--black-20);
  border-color: transparent;
  background: var(--addition-grey)
}

.TarifCard .amount-input-container.primary {
  color: var(--primary);
  background-color: var(--addition-purple)
}

.TarifCard .amount-input-container.red {
  color: var(--elements-red-100)
}

.TarifCard .amount-input-container.green {
  color: var(--system-aqua)
}

.TarifCard .amount-input-container .amount-icon {
  margin-right: 18px
}

.TarifCard .amount-input-container .amount-icon:after {
  font-family: icomoon;
  display: inline-block;
  content: "\e91a";
  font-size: 20px
}

.TarifCard .amount-input-container .input-field {
  border: none;
  background: none;
  flex: 1;
  color: #000;
  font-family: Nunito;
  font-weight: 400
}

.TarifCard .amount-input-container .input-field:focus {
  outline: none
}

.TarifCard .amount-input-container .buttons-container {
  display: flex;
  margin-right: 18px;
  flex-direction: column;
  justify-content: center
}

.TarifCard .amount-input-container .buttons-container .increase:before {
  font-family: icomoon;
  content: "\e901";
  display: inline-block;
  transform: rotate(180deg);
  font-size: 20px
}

.TarifCard .amount-input-container .buttons-container .increase:disabled {
  background-color: transparent;
  color: #d5d5d5;
  cursor: auto
}

.TarifCard .amount-input-container .buttons-container .decrease:after {
  font-family: icomoon;
  display: inline-block;
  content: "\e901";
  font-size: 20px
}

.TarifCard .amount-input-container .buttons-container .decrease:disabled {
  background-color: transparent;
  color: #d5d5d5;
  cursor: auto
}

.btn-confirm-container {
  margin-top: 20px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: 16px;
  align-items: center
}

.btn-confirm-container button {
  width: 180px
}

.btn-confirm-container .btn-cancel {
  background: none;
  border: 1px solid #a2a7c1;
  color: #a2a7c1
}

.btn-confirm-container .btn-cancel:hover,.btn-confirm-container .btn-cancel:focus {
  background: none;
  color: var(--primary);
  border: 1px solid var(--primary)
}

@keyframes cardAnimate {
  0% {
      opacity: 1;
      transform: translateY(0)
  }

  50% {
      opacity: 0;
      transform: translateY(40px)
  }

  to {
      opacity: 1;
      transform: translateY(0)
  }
}

._text_14pzb_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  padding: 20px
}

.Sidebar {
  width: 280px;
  flex: 0 0 280px;
  height: 100vh;
  background: #fdfdfe;
  box-shadow: 0 16px 44px #00000012;
  border-radius: 0 20px 20px 0;
  padding: 32px 24px 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 5;
  position: fixed;
  top: 0
}

.Sidebar .Sidebar-nav-item.exit {
  display: none
}

.Sidebar-logo {
  align-self: center;
  margin-bottom: 64px
}

.Sidebar-logo svg {
  width: 182px;
  height: 35px
}

.Sidebar-nav-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px
}

.Sidebar-nav-item a {
  position: relative;
  color: #8289ac
}

.Sidebar-nav-item .Sidebar-nav-link.is-active svg path {
  stroke: var(--primary)
}

.Sidebar-nav-item:hover .Sidebar-nav-link .Sidebar-nav-icon svg path {
  stroke: var(--primary)
}

.Sidebar-nav-link {
  display: flex;
  align-items: center;
  height: 48px;
  border-radius: 99px;
  width: 232px
}

@media screen and (min-width: 1024px) {
  .Sidebar-nav-link.is-active {
      background:rgba(240,232,253,.3490196078);
      color: var(--primary)
  }
}

.Sidebar-nav-link.is-active .Sidebar-nav-icon {
  color: var(--white)
}

.Sidebar-nav-link:hover {
  color: var(--primary)
}

.Sidebar-nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  margin-right: 8px;
  color: var(--black-100)
}

.Sidebar-nav-icon svg path {
  stroke: #8289ac
}

.Sidebar-nav-text {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%
}

.Sidebar-exit {
  margin-top: auto;
  display: flex;
  align-items: center;
  height: 40px
}

.Sidebar-exit span:first-child {
  margin-right: 8px;
  width: 40px
}

.Sidebar-exit span:first-child svg path {
  stroke: #8289ac
}

.Sidebar-exit span {
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: #8289ac
}

.Sidebar-exit:hover {
  color: var(--primary)
}

@media screen and (max-width: 1200px) {
  .Sidebar {
      width:60px;
      justify-content: space-between;
      padding: 0;
      position: absolute;
      height: calc(100vh - 75px)
  }

  .Sidebar-nav-list {
      padding-left: 8px;
      padding-top: 8px
  }

  .Sidebar-exit {
      padding: 8px
  }

  .Sidebar-exit span:nth-child(2) {
      display: none
  }

  .Sidebar-logo,.Sidebar-nav-text {
      display: none
  }
}

@media screen and (max-width: 600px) {
  .Sidebar {
      top:unset;
      bottom: 0;
      height: 50px;
      width: 100vw
  }

  .Sidebar .Sidebar-nav-list {
      padding: 0;
      display: flex;
      justify-content: space-around
  }

  .Sidebar .Sidebar-nav-list .Sidebar-nav-item {
      width: 50px
  }

  .Sidebar .Sidebar-nav-list .Sidebar-nav-item.exit {
      display: list-item
  }

  .Sidebar-preloader,.Sidebar-exit {
      display: none
  }
}

.ProxyTable {
  min-height: 244px;
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  background: var(--white)
}

@media screen and (max-width: 600px) {
  .ProxyTable tbody {
      width:calc(100vw - 48px)
  }
}

.ProxyTable-head {
  width: 100%;
  display: block
}

.ProxyTable-head-row {
  display: block;
  width: 100%;
  height: 100%;
  height: 56px;
  background: #f8f8fa
}

.ProxyTable-head-item {
  white-space: nowrap;
  padding-top: 16px;
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  position: relative
}

.ProxyTable-head-item:first-child {
  border-radius: 0 0 0 16px
}

.ProxyTable-head-item:last-child {
  border-radius: 0 0 16px
}

.ProxyTable-head-item-proxy {
  width: 49%
}

.ProxyTable-head-item-validity {
  width: 14%
}

.ProxyTable-head-item-auto {
  width: 22%
}

.ProxyTable-head-item-actions {
  width: 15%
}

.ProxyTable-head-item .icon.primary {
  color: #c2c6d7
}

.ProxyTable-head-item i {
  display: inline-block;
  margin-left: 10px;
  vertical-align: bottom;
  cursor: pointer;
  transition: var(--transition)
}

.ProxyTable-head-item .rotate i {
  transform: rotate(-180deg)
}

@media screen and (max-width: 810px) {
  .ProxyTable-head {
      display:none
  }
}

.ProxyTable-body {
  display: block;
  position: relative;
  overflow-y: auto;
  transition: var(--transition);
  min-height: 244px
}

.ProxyTable-popover-info i:hover+.ProxyTable-popover {
  opacity: 1;
  transform: translate(0)
}

@media screen and (max-width: 1000px) {
  .ProxyTable-popover-info {
      display:none
  }
}

.ProxyTable-popover {
  white-space: break-spaces;
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--black-80);
  width: 210px;
  position: absolute;
  top: 110%;
  left: 30%;
  background: var(--white);
  box-shadow: 0 4px 20px #5f616440;
  border-radius: 10px;
  padding: 16px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 2
}

@media screen and (max-width: 1300px) {
  .ProxyTable-popover {
      left:auto;
      right: 0
  }
}

.ProxyTable-empty {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%,-50%);
  justify-items: center
}

.ProxyTable-empty .not-have-proxy {
  font-family: Nunito;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center
}

.ProxyTable-empty .hint {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  display: inline-block;
  color: #a2a7c1;
  width: 100%;
  text-wrap: nowrap;
  margin-top: 16px
}

.ProxyTable-empty .proxy-table-btns {
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center
}

.ProxyTable-empty .proxy-table-btns .ProxyTable-popover {
  top: -68px;
  right: -180px;
  left: unset;
  width: 400px;
  text-align: center;
  color: #8289ac
}

.ProxyTable-empty .proxy-table-btns .ProxyTable-popover-info {
  position: relative
}

.ProxyTable-empty .proxy-table-btns .ProxyTable-popover-info .icon.primary {
  color: #c2c6d7
}

.ProxyTable-empty .proxy-table-btns .ProxyTable-popover-info .icon.primary:before {
  font-size: 24px
}

.ProxyTable-empty .proxy-table-btns button {
  justify-self: center;
  margin: 0 auto;
  min-width: 180px
}

.ProxyTable-empty .proxy-table-btns .free-proxy-btn {
  color: #a2a7c1;
  border-color: #a2a7c1
}

.ProxyItem {
  display: flex;
  width: 100%
}

@media screen and (max-width: 810px) {
  .ProxyItem {
      display:flex;
      flex-direction: column;
      border: 1px solid var(--addition-grey);
      border-radius: 10px
  }

  .ProxyItem td {
      overflow: hidden!important;
      width: 100%!important;
      border-right: none!important;
      border-bottom: 1px solid var(--addition-grey)
  }

  .ProxyItem:not(:last-child) {
      margin-bottom: 16px
  }
}

.ProxyItem.selected {
  background: #f7fdff
}

@media screen and (max-width: 810px) {
  .ProxyItem:last-child td:last-child {
      padding-bottom:20px
  }
}

.ProxyItem:not(:last-child) {
  border-bottom: 1px solid var(--addition-grey)
}

.ProxyItem td {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: visible;
  vertical-align: top;
  padding: 24px 4px
}

.ProxyItem td.day-label .ProxyTable-popover {
  top: 94px;
  left: -123px;
  width: 404px;
  padding: 12px;
  color: #8289ac;
  text-align: center;
  box-shadow: 0 8px 16px -2px #566a8f1f,0 -8px 16px -2px #566a8f1f
}

.ProxyItem td.day-label .ProxyTable-popover:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent
}

.ProxyItem td.day-label:hover .ProxyTable-popover {
  transform: translateY(0);
  opacity: 1
}

.ProxyItem td.options .ProxyItem-option-popover {
  right: -50px;
  left: auto
}

.ProxyItem td .Checkbox-label {
  padding-left: 0;
  margin-left: -10px
}

@media screen and (max-width: 1200px) {
  .ProxyItem td {
      display:table-cell;
      padding: 20px 10px
  }
}

.ProxyItem td:first-child {
  width: 12%;
  justify-content: space-between;
  border-radius: 10px 0 0 10px;
  padding: 24px 40px 24px 18px
}

@media screen and (max-width: 1200px) {
  .ProxyItem td:first-child {
      padding:24px 18px
  }
}

@media screen and (max-width: 810px) {
  .ProxyItem td:first-child {
      padding:18px 16px
  }
}

.ProxyItem td:last-child {
  width: 15%;
  border-radius: 0 10px 10px 0
}

.ProxyItem td:nth-child(1) {
  width: 49%
}

.ProxyItem td:nth-child(2) {
  width: 14%
}

.ProxyItem td:nth-child(3) {
  width: 22%
}

.ProxyItem-id {
  width: 100%;
  display: flex;
  justify-content: space-between
}

.ProxyItem-spoller {
  display: flex
}

.ProxyItem-spoller p {
  align-self: center
}

.ProxyItem-spoller.active .ProxyItem-title i {
  transform: rotate(-180deg)
}

.ProxyItem-spoller .ProxyItem-mobile-title {
  display: block;
  margin-bottom: 8px
}

.ProxyItem-spoller .Checkbox-input:checked~.Checkbox-label:before {
  background-color: var(--primary)
}

.ProxyItem-spoller .Checkbox-input:checked~.Checkbox-label:after {
  border-color: #fff
}

.ProxyItem-spoller .Checkbox {
  min-width: 42px;
  margin-top: -2px;
  margin-left: -2px
}

.ProxyItem-spoller.active .Checkbox {
  margin: auto 0 auto -2px
}

.ProxyItem-title {
  font-weight: 300;
  font-size: 14px;
  line-height: 16.8px;
  display: flex;
  align-items: center;
  cursor: pointer
}

.ProxyItem-title .geo-country {
  color: #c2c6d7
}

.ProxyItem-title-logo {
  width: 20px;
  height: 20px;
  margin-right: 4px
}

.ProxyItem-title i {
  margin-left: 8px;
  transition: var(--transition)
}

.ProxyItem-title .tarrif-type {
  margin-left: 8px;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  color: var(--white);
  font-weight: 400;
  font-size: 12px
}

.ProxyItem-title .tarrif-type.standard {
  background-color: var(--primary);
  border: 1px solid var(--primary)
}

.ProxyItem-title .tarrif-type.premium {
  background-color: var(--system-aqua);
  border: 1px solid var(--system-aqua)
}

.ProxyItem-title .tarrif-type.share {
  background-color: var(--system-red);
  border: 1px solid var(--system-red)
}

.ProxyItem .ProxyCheckerResult {
  margin: 8px 0 8px 24px;
  font-size: 12px
}

.ProxyItem .ProxyCheckerResult.success {
  color: #147129
}

.ProxyItem .ProxyCheckerResult.failed {
  color: #ff003d
}

.ProxyItem-comments {
  margin: 8px 0 8px 24px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: relative
}

.ProxyItem-comments .Loader-wrapper {
  top: 0;
  justify-content: flex-start
}

.ProxyItem-comments .Loader-wrapper .Loader {
  width: 30px
}

.ProxyItem-comments .Loader-wrapper .Loader div:nth-child(1),.ProxyItem-comments .Loader-wrapper .Loader div:nth-child(2),.ProxyItem-comments .Loader-wrapper .Loader div:nth-child(3) {
  width: 5px;
  height: 5px
}

.ProxyItem-comments.checker-loading {
  margin-top: 25px
}

.ProxyItem-comments.checker-loading .Loader-wrapper {
  top: -53px
}

.ProxyItem-comments .comment-container {
  position: relative;
  margin-right: 8px;
  margin-bottom: 8px;
  color: transparent;
  border: 1px solid #f0e8fd;
  background: #f0e8fd;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  text-wrap: nowrap;
  max-width: 100%
}

.ProxyItem-comments .comment-container .hashtag-icon.unfocused {
  opacity: 1;
  color: #a378f5
}

.ProxyItem-comments .comment-container .hashtag-icon.focused {
  opacity: 0
}

.ProxyItem-comments .comment-container .remove-tag-btn:active {
  transform: scale(.97)
}

.ProxyItem-comments .comment-container .remove-tag-btn.unfocused {
  display: none
}

.ProxyItem-comments .comment-container .remove-tag-btn.focused {
  position: absolute;
  z-index: 100;
  left: 3px;
  top: 3px;
  opacity: 1;
  color: #000;
  font-size: 10px;
  width: 14px;
  height: 14px;
  font-weight: 700;
  text-align: center;
  display: inline-block
}

.ProxyItem-comments .comment-container.adding {
  border: 1px solid #f8f8fa;
  background: #f8f8fa
}

.ProxyItem-comments .comment-input {
  position: absolute;
  left: 0;
  opacity: 1;
  width: 100%;
  padding: 0 2px 2px 18px;
  font-family: Nunito;
  line-height: 1.38;
  font-size: 12px;
  color: #a378f5;
  background: none;
  border: none
}

.ProxyItem-comments .comment-input::placeholder {
  color: var(--black-20)
}

.ProxyItem-comments .comment-input:active,.ProxyItem-comments .comment-input:hover,.ProxyItem-comments .comment-input:focus {
  border: none;
  outline: none
}

.ProxyItem-comments .add-comment {
  margin-right: 8px;
  margin-bottom: 8px;
  color: var(--black-20);
  border: 1px solid #f8f8fa;
  width: fit-content;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  transition: var(--transition);
  line-height: 1.38;
  background: #f8f8fa
}

.ProxyItem-comments .add-comment:hover .ProxyItem-comments .add-comment:not(:disabled) {
  color: var(--black-60);
  border-color: var(--black-60);
  transition: var(--transition)
}

.ProxyItem-comments .add-comment:active {
  transform: scale(.97)
}

.ProxyItem-comments .add-comment:disabled {
  display: none;
  background: transparent;
  transform: scale(1)
}

.ProxyItem-tariff-finger {
  font-size: 12px;
  font-weight: 300;
  line-height: 12px
}

.ProxyItem-tariff-finger span {
  color: #c2c6d7
}

.ProxyItem-checker {
  display: inline-flex;
  position: relative;
  top: 3px
}

.ProxyItem-checker svg {
  width: 18px;
  height: 18px
}

.ProxyItem-checker svg path {
  stroke: #c2c6d7;
  transition: var(--transition)
}

.ProxyItem-checker .ProxyChecker-popover-info .ProxyTable-popover {
  left: -43px;
  top: 10px;
  width: 120px;
  height: fit-content;
  padding: 12px;
  color: #8289ac;
  text-align: center;
  box-shadow: 0 8px 16px -2px #566a8f1f,0 -8px 16px -2px #566a8f1f
}

.ProxyItem-checker .ProxyChecker-popover-info .ProxyTable-popover:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent
}

.ProxyItem-checker:hover .ProxyChecker-popover-info .ProxyTable-popover {
  opacity: 1
}

.ProxyItem-checker:hover svg path {
  stroke: #2d0d69
}

.ProxyItem-body-block {
  display: flex;
  justify-content: space-between
}

.ProxyItem-body-block .ProxyItem-body-btn {
  margin-right: 10px
}

.ProxyItem-body-block .ProxyItem-body-title {
  flex-basis: 125px
}

.ProxyItem-body-block .ProxyItem-body-text {
  width: 320px
}

.ProxyItem-body-block .ProxyItem-body-text.proxy-id {
  color: #c2c6d7;
  word-break: break-all
}

@media screen and (max-width: 600px) {
  .ProxyItem-body-block {
      flex-wrap:wrap
  }

  .ProxyItem-body-block .ProxyItem-body-title {
      flex-basis: 100%
  }
}

.ProxyItem-body {
  overflow: hidden;
  transition: var(--transition)
}

.ProxyItem-body-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  color: #c2c6d7;
  margin-bottom: 8px
}

.ProxyItem-body-text {
  font-weight: 300;
  font-size: 14px;
  line-height: 140%;
  text-wrap: wrap
}

.ProxyItem-body-text:not(:last-child) {
  margin-bottom: 16px
}

.ProxyItem-body-text:not(:last-child) a {
  word-break: break-all
}

.ProxyItem-body-text input {
  display: inline-block;
  border: none
}

.ProxyItem-body-text>span {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all
}

@media screen and (max-width: 420px) {
  .ProxyItem-body-text>span {
      width:200px
  }
}

@media screen and (max-width: 1200px) {
  .ProxyItem-body-text>a {
      overflow:hidden;
      text-overflow: ellipsis;
      word-break: break-all
  }
}

.ProxyItem-body-btn button {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  transition: var(--transition);
  position: relative
}

.ProxyItem-body-btn button.copied span {
  transform: translateY(0);
  opacity: 1
}

.ProxyItem-body-btn button span {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  position: absolute;
  top: 120%;
  right: 0;
  background: var(--white);
  box-shadow: 0 4px 20px #5f616440;
  border-radius: 4px;
  padding: 4px;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 2
}

.ProxyItem-day-label {
  position: relative;
  margin: auto
}

@media screen and (max-width: 810px) {
  .ProxyItem-day-label {
      display:flex;
      justify-content: space-between;
      align-items: center
  }
}

@media screen and (min-width: 810px) {
  .ProxyItem-day-label {
      width:90px
  }
}

.ProxyItem-day-label-tag {
  width: fit-content;
  text-align: center;
  overflow: hidden;
  font-weight: 300;
  font-size: 12px;
  line-height: 100%;
  border-radius: 80px;
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 8px;
  opacity: 0px;
  background: #eafdee;
  color: #147129
}

@media screen and (min-width: 810px) {
  .ProxyItem-day-label-tag {
      display:block;
      margin: auto
  }
}

.ProxyItem-day-label-tag.expiring {
  color: #ff003d;
  background: #ffe4e3
}

.ProxyItem-day-label .ProxyTable-popover {
  top: 44px;
  left: 0;
  width: 283px
}

.ProxyItem-day-label:hover .ProxyTable-popover {
  transform: translateY(0);
  opacity: 1
}

.ProxyItem-option {
  position: relative;
  height: 32px;
  margin: auto
}

.ProxyItem-option-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 32px;
  height: 32px;
  transition: var(--transition);
  border-radius: 100%
}

.ProxyItem-option-btn svg path {
  transition: var(--transition)
}

.ProxyItem-option-btn:hover svg path {
  stroke: #2d0d69
}

.ProxyItem-option-btn:hover span:first-child {
  margin-left: 4px
}

.ProxyItem-option-btn:hover span:last-child {
  margin-right: 4px
}

.ProxyItem-option-btn:disabled {
  border: none;
  background: none;
  opacity: .2
}

.ProxyItem-option-btn:disabled span:first-child {
  margin-left: 4px
}

.ProxyItem-option-btn:disabled span:last-child {
  margin-right: 4px
}

.ProxyItem-option-btn span {
  position: relative;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background: var(--primary);
  transition: var(--transition)
}

.ProxyItem-option-popover {
  min-width: 193px;
  position: absolute;
  top: 120%;
  left: 38px;
  background: var(--white);
  box-shadow: 0 4px 4px #8d93b14d;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 2
}

.ProxyItem-option-popover.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all
}

.ProxyItem-option-popover button {
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  padding: 0 16px;
  white-space: nowrap;
  width: 100%;
  font-size: 14px;
  line-height: 100%;
  color: #a2a7c1;
  height: 40px;
  gap: 10px;
  font-weight: 500;
  border-radius: 25px
}

.ProxyItem-option-popover button:disabled {
  background: none;
  color: #a2a7c163;
  transform: none
}

.ProxyItem-option-popover button:disabled:hover {
  color: #a2a7c163
}

.ProxyItem-option-popover button svg path {
  stroke: #a2a7c1
}

.ProxyItem-option-popover button:hover {
  background: var(--white);
  color: var(--primary)
}

.ProxyItem-option-popover button:hover svg path {
  stroke: var(--primary)
}

.ProxyItem-option-popover button:hover i {
  color: var(--primary)
}

.ProxyItem-option-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 5;
  opacity: 0;
  pointer-events: none
}

.ProxyItem-option-backdrop.active {
  opacity: 1;
  pointer-events: all
}

.ProxyItem-option-backdrop .ProxyItem-option-popover {
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: calc(100% - 48px);
  max-width: 328px;
  padding: 8px 0;
  border-radius: 20px
}

.ProxyItem-option-backdrop .ProxyItem-option-popover button {
  height: 56px;
  padding: 0 24px
}

.ProxyItem-option-backdrop .ProxyItem-option-popover button:not(:last-child) {
  border-bottom: 1px solid var(--addition-grey)
}

@media screen and (max-width: 810px) {
  .ProxyItem-option {
      position:static;
      display: flex;
      justify-content: center
  }

  .ProxyItem-option-btn span:first-child {
      margin-left: 4px
  }

  .ProxyItem-option-btn span:last-child {
      margin-right: 4px
  }
}

.ProxyItem-mobile-title {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: var(--black-40)
}

.ProxyItem-auto-switcher {
  margin: auto
}

@media screen and (max-width: 810px) {
  .ProxyItem-auto-switcher {
      margin-top:0;
      display: flex;
      align-items: center;
      justify-content: space-between
  }
}

.Checkbox-title {
  display: flex;
  color: var(--black-60);
  font-weight: 400;
  margin-bottom: .57rem;
  font-size: var(--fSize14);
  text-align: left;
  width: 100%
}

.error.Checkbox-title {
  color: var(--system-red)
}

.Checkbox {
  position: relative
}

.Checkbox.green .Checkbox-input:checked~.Checkbox-label:after {
  border-color: var(--primary)
}

.Checkbox.green .Checkbox-input:checked~.Checkbox-label:before {
  border: 1px solid var(--primary)
}

.Checkbox.green .Checkbox-label:before {
  border: 1px solid var(--black-100)
}

.Checkbox.purple .Checkbox-input:checked~.Checkbox-label {
  color: var(--primary)
}

.Checkbox.purple .Checkbox-input:checked~.Checkbox-label:after {
  border-color: var(--primary)
}

.Checkbox.purple .Checkbox-input:checked~.Checkbox-label:before {
  border: 1px solid var(--primary)
}

.Checkbox.purple .Checkbox-label:before {
  border: 1px solid var(--primary);
  left: 0
}

.Checkbox.purple .Checkbox-label:after {
  background: var(--system-purple);
  left: .5rem
}

.Checkbox.purple .Checkbox-label {
  padding-left: 22px;
  padding-top: 0;
  padding-bottom: 0
}

.Checkbox-input {
  position: absolute;
  left: -100%;
  top: 0;
  opacity: 0
}

.Checkbox-input:checked~.Checkbox-label:after {
  border-color: var(--primary)
}

.Checkbox-input:checked~.Checkbox-label,.Checkbox-input:checked~.Checkbox-label:before {
  background-color: none
}

.Checkbox-input:checked~.Checkbox-label:before {
  border-color: var(--primary)
}

.Checkbox-input:disabled~.Checkbox-label {
  cursor: not-allowed
}

.Checkbox-label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fSize14);
  line-height: 100%;
  padding: .65rem .85em .65em 3.36rem;
  width: fit-content;
  border: 1px solid var(--gray-40);
  border-radius: .142rem;
  --checkboxSize: 12px;
  transition: color .4s
}

.Checkbox-label:before,.Checkbox-label:after {
  content: "";
  display: block
}

.Checkbox-label:before {
  width: 24px;
  height: 24px;
  background: none;
  position: absolute;
  border: 1px solid #d8dae5;
  top: 50%;
  left: .86rem;
  transform: translateY(-50%);
  border-radius: 5px;
  box-shadow: 0 2px 4px #14142b14
}

.Checkbox-label:after {
  position: absolute;
  left: 1.55rem;
  top: 51%;
  width: 16px;
  height: 6px;
  transform: rotate(-45deg) translateY(-100%) scale(.7);
  border-width: 0px 0 3px 3px;
  border-style: solid;
  border-color: transparent
}

.Checkbox-label.minus:after {
  content: "-";
  color: #fff;
  position: absolute;
  height: auto;
  border: none;
  left: 1.35rem;
  top: 45%;
  font-size: 1.6rem;
  transform: translateY(-50%)
}

.Switcher {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 20px;
  cursor: pointer;
  z-index: 1
}

.Switcher input {
  opacity: 0;
  width: 0;
  height: 0
}

.Switcher-slider {
  position: absolute;
  inset: 0;
  background-color: var(--black-20);
  border-radius: 20px;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: space-between
}

.Switcher-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: #fff;
  border-radius: 50%;
  z-index: 3;
  transition: transform .4s ease
}

.Switcher input:focus+.Switcher-slider {
  transform: scale(.97)
}

.Switcher input:checked+.Switcher-slider {
  background-color: var(--primary)
}

.Switcher input:checked+.Switcher-slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translate(12px)
}

.AccountDashboardContent-head {
  display: grid;
  grid-template-columns: 1fr 456px;
  gap: 40px;
  position: relative
}

@media screen and (max-width: 1024px) {
  .AccountDashboardContent-head {
      gap:20px;
      grid-template-columns: 1fr
  }

  .AccountDashboardContent-head .AccountContent-title {
      order: 1
  }

  .AccountDashboardContent-head .BalanceWidget {
      order: 2;
      justify-self: flex-start;
      width: fit-content;
      gap: 15px
  }

  .AccountDashboardContent-head .AccountContent-option {
      max-width: 456px;
      order: 3
  }

  .AccountDashboardContent-head .AccountDashboardContent-GroupFolderBlock {
      order: 4
  }
}

@media screen and (max-width: 1024px) {
  .AccountDashboardContent-head .BalanceWidget .BalanceWidget-logo {
      display:none
  }

  .AccountDashboardContent-head .BalanceWidget button {
      width: 48px;
      height: 48px
  }

  .AccountDashboardContent-head .BalanceWidget button p {
      display: none
  }

  .AccountDashboardContent-head .BalanceWidget button span {
      position: static
  }
}

.AccountDashboardContent-GroupFolderBlock {
  display: flex;
  align-items: center;
  gap: 28px
}

.AccountDashboardContent-GroupFolderBlock .Button.outline svg path {
  stroke: var(--primary);
  transition: stroke .3s
}

.AccountDashboardContent-GroupFolderBlock .Button.outline,.AccountDashboardContent-GroupFolderBlock .Button.outline button:disabled {
  border: none;
  background: none;
  gap: 8px;
  padding: 16px 0 12px 12px
}

.AccountDashboardContent-GroupFolderBlock .Button.outline:disabled {
  color: #e0d2fc
}

.AccountDashboardContent-GroupFolderBlock .Button.outline:disabled svg path {
  stroke: #e0d2fc;
  transition: stroke .3s
}

.BalanceWidget {
  display: flex;
  align-items: center;
  justify-self: flex-end;
  padding: 23px 16px;
  width: 441px;
  height: 98px;
  background: linear-gradient(95.39deg,rgba(240,232,255,.5) -41.67%,#ffffff 100.42%);
  box-shadow: 0 2px 10px #a97dff33;
  border-radius: 100px
}

.BalanceWidget-logo svg {
  width: 40px;
  height: 40px
}

.BalanceWidget-logo svg path {
  stroke: #a378f5;
  stroke-width: .7
}

.BalanceWidget-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-left: 16px
}

.BalanceWidget-balance {
  color: #8d93b3;
  font-size: 16px;
  line-height: 19.2px;
  font-weight: 300
}

.BalanceWidget-total {
  font-weight: 500;
  font-size: 24px;
  line-height: 28.8px
}

.BalanceWidget button {
  margin-left: auto;
  width: 157px;
  height: 52px;
  border-radius: 100px;
  text-align: center
}

.BalanceWidget button p {
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  padding-left: 12px
}

.BalanceWidget button span {
  position: relative;
  right: 8px;
  bottom: -1px
}

.BalanceWidget button span svg path {
  stroke-width: 1.7
}

.allCheck-checkbox {
  width: fit-content;
  top: 61px;
  z-index: 1;
  left: 8px
}

.allCheck-checkbox .Checkbox-input:checked~.Checkbox-label:before {
  background-color: var(--primary)
}

.allCheck-checkbox .Checkbox-input:checked~.Checkbox-label:after {
  border-color: #fff
}

.search-proxy-input {
  font-weight: 400;
  border: 1px solid var(--black-20);
  outline: none;
  position: relative;
  box-sizing: border-box;
  resize: none;
  transition: var(--transition);
  color: var(--black-100);
  font-family: Nunito;
  width: 326px;
  display: inline-block;
  height: 56px;
  border-radius: 8px;
  line-height: 19.2px;
  font-size: 16px;
  padding: 18.5px 0 18.5px 46px;
  margin: 0
}

.search-proxy-input:placeholder-shown {
  text-overflow: ellipsis
}

@media screen and (max-width: 1400px) {
  .search-proxy-input {
      width:100%
  }
}

.search-proxy-input::placeholder {
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  color: #adb1c8
}

@media screen and (max-width: 810px) {
  .allCheck-checkbox {
      top:14px;
      left: 9px
  }
}

.AccountPopup {
  position: relative;
  z-index: 2
}

.AccountPopup-title {
  max-width: 90%;
  font-size: var(--fSize20);
  font-weight: 700;
  font-size: var(--fSize24);
  line-height: var(--fSize24);
  margin-bottom: 40px
}

@media (max-width: 768px) {
  .AccountPopup-title {
      margin-bottom:32px;
      font-size: var(--fSize18);
      line-height: var(--fSize18);
      font-weight: 500
  }
}

.AccountPopup-info {
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 40px
}

.AccountPopup-info-primary {
  white-space: nowrap;
  font-weight: 700;
  color: var(--primary)
}

.AccountPopup.AutorenewalProxy .AutorenewalProxy-form {
  align-items: baseline
}

.AccountPopup.AutorenewalProxy .AutorenewalProxy-form p:nth-child(2) {
  margin-top: 15px;
  margin-bottom: 15px
}

.BalancePopup .AccountPopup-title {
  margin-bottom: 24px
}

@media screen and (max-width: 768px) {
  .BalancePopup .AccountPopup-title {
      margin-bottom:32px
  }
}

.BalancePopup-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  margin-bottom: 8px
}

@media screen and (max-width: 768px) {
  .BalancePopup-variants {
      margin-top:0
  }
}

.BalancePopup-form button[type=submit] {
  margin: 56px auto 0
}

@media screen and (max-width: 768px) {
  .BalancePopup-form button[type=submit] {
      margin:48px auto 0;
      width: 100%
  }
}

.BalancePopup-form label {
  color: var(--black-60)!important
}

.BalancePopup-input-wrap.show-currency {
  display: none
}

.BalancePopup input {
  font-family: Nunito,serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 14px
}

.ReplacePopup-form {
  display: grid;
  grid-template-columns: 1fr 152px;
  align-items: center
}

@media screen and (max-width: 768px) {
  .ReplacePopup-form {
      grid-template-columns:1fr;
      gap: 24px
  }
}

.ReplacePopup-form-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

@media screen and (max-width: 768px) {
  .ReplacePopup-form-btns {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px
  }
}

@media screen and (max-width: 440px) {
  .ReplacePopup-form-btns {
      display:grid;
      grid-template-columns: 1fr;
      gap: 8px
  }
}

.ReplacePopup-form .InputField {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 18px;
  align-items: center;
  gap: 8px
}

@media screen and (max-width: 768px) {
  .ReplacePopup-form .InputField {
      width:152px
  }
}

.ReplacePopup-form .InputField input {
  font-size: 16px;
  text-align: center
}

.ReplacePopup-form .InputField-RightPrefix {
  font-weight: 400;
  font-size: 14px;
  line-height: 100%
}

.ReplacePopup .AccountPopup-info {
  margin: 0
}

.ExportPopup .field-list {
  margin-bottom: 20px
}

.ExportPopup .sortable-item {
  padding: 8px;
  border: 1px solid #ccc;
  margin-bottom: 4px;
  border-radius: 4px;
  background-color: #fff;
  width: 70px;
  text-align: center;
  cursor: grab
}

.ExportPopup .export-type {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px
}

.ExportPopup .add-reboot-link {
  margin: 20px 0
}

.ExportPopup .reboot-link-checkbox.checked label,.ExportPopup .tags-checkbox.checked label {
  color: var(--primary)
}

.ExportPopup .reboot-link-checkbox .Checkbox-input:checked~.Checkbox-label:after,.ExportPopup .tags-checkbox .Checkbox-input:checked~.Checkbox-label:after {
  border-color: var(--primary);
  left: 1.56rem
}

.ExportPopup .reboot-link-checkbox .Checkbox-input:checked~.Checkbox-label:before,.ExportPopup .tags-checkbox .Checkbox-input:checked~.Checkbox-label:before {
  border-color: var(--primary)
}

.ExportPopup .sortable-wrapper {
  display: flex
}

.ExportPopup-form {
  display: flex;
  flex-direction: column
}

.ExportPopup-form-field {
  border: none
}

.ExportPopup-form-field:first-child {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 24px;
  margin-bottom: 24px
}

@media screen and (max-width: 768px) {
  .ExportPopup-form-field:first-child {
      grid-template-columns:1fr;
      margin-bottom: 0
  }
}

.ExportPopup-form-field h5 {
  font-size: 14px;
  line-height: 100%;
  color: var(--black-80);
  margin-bottom: 12px
}

.ExportPopup-form-field p {
  font-size: 14px;
  line-height: 24px;
  color: var(--black-40)
}

.ExportPopup .ReactSelect-group {
  display: flex;
  flex-direction: column
}

.ExportPopup .CheckBoxGroupe {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 14px
}

@media screen and (max-width: 768px) {
  .ExportPopup .CheckBoxGroupe {
      margin:25px 0
  }
}

.ExportPopup button[type=submit] {
  margin: 56px auto 0
}

@media screen and (max-width: 768px) {
  .ExportPopup button[type=submit] {
      margin:48px auto 0
  }
}

@media screen and (max-width: 480px) {
  .ExportPopup button[type=submit] {
      width:100%
  }
}

.ContinuePopup .Loader-wrapper,.ChangeFingerprint .Loader-wrapper,.RebootProxy .Loader-wrapper,.AutorenewalProxy .Loader-wrapper {
  position: static
}

.ContinuePopup .Loader-wrapper .Loader,.ChangeFingerprint .Loader-wrapper .Loader,.RebootProxy .Loader-wrapper .Loader,.AutorenewalProxy .Loader-wrapper .Loader {
  width: 50px
}

.ContinuePopup .Loader-wrapper .Loader div,.ChangeFingerprint .Loader-wrapper .Loader div,.RebootProxy .Loader-wrapper .Loader div,.AutorenewalProxy .Loader-wrapper .Loader div {
  width: 10px;
  height: 10px
}

.ContinuePopup .Loader-wrapper,.ContinuePopup .total-price,.ChangeFingerprint .Loader-wrapper,.ChangeFingerprint .total-price,.RebootProxy .Loader-wrapper,.RebootProxy .total-price,.AutorenewalProxy .Loader-wrapper,.AutorenewalProxy .total-price {
  margin-bottom: 20px
}

.ContinuePopup-form,.ChangeFingerprint-form,.RebootProxy-form,.AutorenewalProxy-form {
  display: flex;
  flex-direction: column;
  align-items: center
}

.ContinuePopup-form .MuiFormLabel-root.MuiInputLabel-root,.ChangeFingerprint-form .MuiFormLabel-root.MuiInputLabel-root,.RebootProxy-form .MuiFormLabel-root.MuiInputLabel-root,.AutorenewalProxy-form .MuiFormLabel-root.MuiInputLabel-root {
  color: #8289ac;
  font-family: Nunito
}

.ContinuePopup-form .MuiOutlinedInput-notchedOutline legend,.ChangeFingerprint-form .MuiOutlinedInput-notchedOutline legend,.RebootProxy-form .MuiOutlinedInput-notchedOutline legend,.AutorenewalProxy-form .MuiOutlinedInput-notchedOutline legend {
  font-family: Nunito
}

.ContinuePopup-form .SelectTerm:hover .MuiOutlinedInput-notchedOutline,.ChangeFingerprint-form .SelectTerm:hover .MuiOutlinedInput-notchedOutline,.RebootProxy-form .SelectTerm:hover .MuiOutlinedInput-notchedOutline,.AutorenewalProxy-form .SelectTerm:hover .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.ContinuePopup-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root,.ChangeFingerprint-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root,.RebootProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root,.AutorenewalProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root {
  border-radius: 8px
}

.ContinuePopup-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,.ChangeFingerprint-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,.RebootProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,.AutorenewalProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.ContinuePopup-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input,.ChangeFingerprint-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input,.RebootProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input,.AutorenewalProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #adb1c8
}

.ContinuePopup-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root svg,.ChangeFingerprint-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root svg,.RebootProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root svg,.AutorenewalProxy-form .SelectTerm .MuiInputBase-root.MuiOutlinedInput-root svg {
  transition: all .3s ease;
  transform: rotate(0);
  z-index: 0;
  cursor: pointer;
  position: absolute;
  right: 16px;
  width: 24px;
  height: 24px;
  pointer-events: none
}

.ContinuePopup-form .SelectTerm.opened .MuiInputBase-root.MuiOutlinedInput-root svg,.ChangeFingerprint-form .SelectTerm.opened .MuiInputBase-root.MuiOutlinedInput-root svg,.RebootProxy-form .SelectTerm.opened .MuiInputBase-root.MuiOutlinedInput-root svg,.AutorenewalProxy-form .SelectTerm.opened .MuiInputBase-root.MuiOutlinedInput-root svg {
  transform: rotate(-180deg)
}

.ContinuePopup-form-wrap,.ChangeFingerprint-form-wrap,.RebootProxy-form-wrap,.AutorenewalProxy-form-wrap {
  width: 100%
}

@media screen and (max-width: 768px) {
  .ContinuePopup-form-wrap>button,.ChangeFingerprint-form-wrap>button,.RebootProxy-form-wrap>button,.AutorenewalProxy-form-wrap>button {
      margin-top:20px;
      width: 100%
  }
}

.ContinuePopup-form-field,.ChangeFingerprint-form-field,.RebootProxy-form-field,.AutorenewalProxy-form-field {
  border: none
}

.ContinuePopup-form-field button,.ChangeFingerprint-form-field button,.RebootProxy-form-field button,.AutorenewalProxy-form-field button {
  margin-top: 20px;
  width: 100%
}

.ContinuePopup-form-field:first-child,.ChangeFingerprint-form-field:first-child,.RebootProxy-form-field:first-child,.AutorenewalProxy-form-field:first-child {
  grid-area: field1
}

.ContinuePopup-form-field:first-child button,.ChangeFingerprint-form-field:first-child button,.RebootProxy-form-field:first-child button,.AutorenewalProxy-form-field:first-child button {
  width: 100%;
  margin-top: 60px
}

.ContinuePopup-form-field:nth-child(2),.ChangeFingerprint-form-field:nth-child(2),.RebootProxy-form-field:nth-child(2),.AutorenewalProxy-form-field:nth-child(2) {
  grid-area: field2
}

@media screen and (max-width: 768px) {
  .ContinuePopup-form>button,.ChangeFingerprint-form>button,.RebootProxy-form>button,.AutorenewalProxy-form>button {
      width:100%
  }
}

.ContinuePopup-price,.ChangeFingerprint-price,.RebootProxy-price,.AutorenewalProxy-price {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  background: var(--addition-grey);
  border-radius: 20px;
  font-weight: 700;
  overflow: hidden
}

@media screen and (max-width: 768px) {
  .ContinuePopup-price,.ChangeFingerprint-price,.RebootProxy-price,.AutorenewalProxy-price {
      padding:24px 16px;
      height: auto
  }

  .ContinuePopup-price label,.ChangeFingerprint-price label,.RebootProxy-price label,.AutorenewalProxy-price label {
      margin-bottom: 0
  }
}

.ContinuePopup-price-inner,.ChangeFingerprint-price-inner,.RebootProxy-price-inner,.AutorenewalProxy-price-inner {
  display: flex;
  gap: 4px
}

.ContinuePopup-price-currency,.ChangeFingerprint-price-currency,.RebootProxy-price-currency,.AutorenewalProxy-price-currency {
  color: var(--primary);
  font-size: 24px;
  line-height: 100%;
  align-self: baseline
}

.ContinuePopup-price-sum,.ChangeFingerprint-price-sum,.RebootProxy-price-sum,.AutorenewalProxy-price-sum {
  font-size: 32px;
  line-height: 120%
}

.ChangeFingerprint-form-wrap,.RebootProxy-form-wrap,.AutorenewalProxy-form-wrap {
  display: flex;
  flex-direction: column
}

.ChangeFingerprint-form-wrap button,.RebootProxy-form-wrap button,.AutorenewalProxy-form-wrap button {
  margin-top: 20px
}

.ChangeFingerprint .export-type .checked .RadioButton-label:after,.RebootProxy .export-type .checked .RadioButton-label:after,.AutorenewalProxy .export-type .checked .RadioButton-label:after {
  top: 40%
}

.OperatorChange-form {
  display: flex;
  flex-direction: column;
  align-items: center
}

.OperatorChange-form .MuiFormLabel-root.MuiInputLabel-root {
  color: #8289ac;
  font-family: Nunito
}

.OperatorChange-form .MuiOutlinedInput-notchedOutline legend {
  font-family: Nunito
}

.OperatorChange-form .SelectOperator:hover .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.OperatorChange-form .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root {
  border-radius: 8px
}

.OperatorChange-form .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.OperatorChange-form .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #adb1c8
}

.OperatorChange-form .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root svg {
  transition: all .3s ease;
  transform: rotate(0);
  z-index: 0;
  cursor: pointer;
  position: absolute;
  right: 16px;
  width: 24px;
  height: 24px;
  pointer-events: none
}

.OperatorChange-form .SelectOperator.opened .MuiInputBase-root.MuiOutlinedInput-root svg {
  transform: rotate(-180deg)
}

.OperatorChange-form-wrap {
  width: 100%
}

@media screen and (max-width: 768px) {
  .OperatorChange-form-wrap>button {
      margin-top:60px;
      width: 100%
  }
}

.OperatorChange-form-field {
  border: none
}

.OperatorChange-form-field:first-child {
  grid-area: field1
}

.OperatorChange-form-field:first-child button {
  width: 100%;
  margin-top: 20px
}

.OperatorChange-form-field:nth-child(2) {
  grid-area: field2
}

.autoreplace {
  position: relative
}

.autoreplace .InputField-error-message {
  position: absolute;
  top: 100%;
  line-height: 1
}

.RadioButton-title {
  display: flex;
  color: var(--black-60);
  font-weight: 400;
  margin-bottom: .57rem;
  font-size: var(--fSize14);
  text-align: left;
  width: 100%
}

.error.RadioButton-title {
  color: var(--system-red)
}

.RadioButton {
  position: relative
}

.RadioButton-input {
  position: absolute;
  left: -100%;
  top: 0;
  opacity: 0;
  border-color: var(--primary)
}

.RadioButton-input:checked~.RadioButton-label:before {
  border-color: var(--primary)
}

.RadioButton-input:disabled~.RadioButton-label {
  cursor: not-allowed
}

.RadioButton-label {
  transition: color .4s
}

.RadioButton-label:after {
  content: "";
  display: block
}

.RadioButton.checked .RadioButton-label {
  color: var(--primary)
}

.RadioButton.checked .RadioButton-label:after {
  background-color: var(--primary);
  width: 7px;
  height: 7px;
  position: absolute;
  top: 39%;
  left: 12px;
  border: 1px solid var(--primary);
  border-radius: 10px;
  transition: background-color .4s
}

.RadioButton-label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fSize14);
  line-height: 100%;
  padding: .65rem .85em .65em 2.36rem;
  width: fit-content;
  border: 1px solid var(--gray-40);
  border-radius: .142rem;
  --checkboxSize: 12px
}

.RadioButton-label:before {
  content: "";
  display: block
}

.RadioButton-label:before {
  width: 15px;
  height: 15px;
  background: none;
  position: absolute;
  border: 1px solid var(--primary);
  border-radius: 10px;
  top: 27%;
  left: 8px
}

.AccountPopup .input-generate-wrapper {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px
}

.AccountPopup .input-generate-wrapper.error .sub-title span {
  color: var(--system-error)
}

.AccountPopup .input-generate-wrapper.error input {
  border-color: var(--system-error)
}

.generate-input.generated {
  border-radius: 27px
}

.generate-input.generated input {
  border: 1px solid #30ac63
}

.input-hint {
  margin-bottom: 10px
}

.input-hint button {
  color: var(--primary);
  text-decoration: underline
}

.sub-title {
  display: flex;
  justify-content: space-between;
  padding: 0 10px
}

.sub-title>span {
  font-size: 10px;
  color: #727272;
  line-height: 12px
}

.sub-title .generate-button {
  text-decoration: underline;
  color: #651eee;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  z-index: 100;
  display: inline-block
}

.sub-title .generate-button.generated {
  display: flex;
  color: #2fac63
}

.sub-title .generate-button.generated>img {
  margin-left: 5px
}

.CredentialsChangePopup .credentials-checkbox-wrapper {
  display: flex;
  flex-direction: column;
  margin: 10px
}

.CredentialsChangePopup .hint {
  color: var(--black-40)
}

.CredentialsChangePopup button[type=submit] {
  margin-top: 35px
}

.CredentialsChangePopup .credentials-checkbox.checked label {
  color: var(--primary)
}

.CredentialsChangePopup .credentials-checkbox .Checkbox-input:checked~.Checkbox-label:after {
  border-color: var(--primary);
  left: 1.56rem
}

.CredentialsChangePopup .credentials-checkbox .Checkbox-input:checked~.Checkbox-label:before {
  border-color: var(--primary)
}

.AccountPopup.RebootProxySuccess {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  gap: 32px
}

.AccountPopup.RebootProxySuccess .ip-block,.AccountPopup.RebootProxySuccess .geo-provider-block {
  display: flex;
  gap: 8px;
  flex-direction: row;
  justify-content: space-between
}

.AccountPopup.RebootProxySuccess .sub-header {
  font-weight: 300;
  font-size: 14px;
  line-height: 21.6px;
  color: #8289ac
}

.AccountPopup.RebootProxySuccess .ip-block .current-ip {
  flex: 7;
  word-break: break-all
}

.AccountPopup.RebootProxySuccess .ip-block .current-ip .header,.AccountPopup.RebootProxySuccess .ip-block .current-ip .new-ip {
  font-weight: 500;
  font-size: 18px;
  line-height: 28.8px
}

.AccountPopup.RebootProxySuccess .ip-block .current-ip .new-ip {
  color: #651eee
}

.AccountPopup.RebootProxySuccess .ip-block .current-ip .expires-at {
  background-color: #eafdee;
  border-radius: 200px;
  color: #147129;
  width: fit-content;
  padding: 4px 8px
}

.AccountPopup.RebootProxySuccess .ip-block .prev-ip {
  flex: 4;
  text-align: right
}

.AccountPopup.RebootProxySuccess .ip-block .prev-ip .old-ip {
  font-size: 14px
}

.AccountPopup.RebootProxySuccess .current-geo,.AccountPopup.RebootProxySuccess .current-operator {
  justify-content: center;
  align-items: center;
  display: inline-flex
}

.AccountPopup.RebootProxySuccess .current-geo .country-icon,.AccountPopup.RebootProxySuccess .current-operator .country-icon {
  display: inline-flex;
  padding-left: 12px;
  padding-right: 4px
}

.AccountPopup.RebootProxySuccess .current-geo .country-icon svg,.AccountPopup.RebootProxySuccess .current-operator .country-icon svg {
  width: 20px;
  height: 20px
}

.AccountLayout-main {
  width: 100vw;
  height: calc(100vh - 76px);
  overflow: hidden;
  position: relative;
  display: flex
}

.AccountLayout .Sidebar-preloader {
  min-width: 280px;
  position: relative
}

@media screen and (max-width: 1200px) {
  .AccountLayout .Sidebar-preloader {
      min-width:60px
  }
}

.AccountContent {
  padding-top: 14px;
  height: 100%;
  padding-right: 62px;
  overflow: auto;
  padding-left: 30px;
  flex-grow: 1
}

@media screen and (max-width: 1200px) {
  .AccountContent {
      padding-right:32px
  }
}

@media screen and (max-width: 1024px) {
  .AccountContent {
      padding:32px 32px 90px
  }
}

@media screen and (max-width: 600px) {
  .AccountContent {
      padding:32px 24px 120px
  }
}

.AccountContent-title {
  align-self: center
}

.AccountContent-title h2 {
  font-weight: 700;
  font-size: 24px
}

@media screen and (max-width: 600px) {
  .AccountContent-title h2 {
      font-size:18px;
      margin-bottom: 10px
  }
}

.AccountContent .sort-by-wrapper {
  display: flex;
  align-items: center;
  margin-top: 24px
}

.AccountContent .sort-by-wrapper p {
  margin-right: 10px
}

.AccountContent .sort-by-wrapper .ReactSelect-group {
  gap: 0
}

.AccountContent .group-action-wrapper {
  position: relative
}

.AccountContent .group-action-wrapper button {
  background: none!important
}

.AccountContent .group-action-wrapper button:disabled {
  color: #e0d2fc!important
}

.AccountContent-option {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: fit-content
}

.AccountContent-option svg {
  position: absolute;
  top: 16px;
  left: 16px
}

.AccountContent-option .sort-by-wrapper {
  display: flex;
  align-items: center;
  margin-top: 0
}

.AccountContent-option .sort-by-wrapper p {
  margin-right: 10px
}

.AccountContent-option .sort-by-wrapper .ReactSelect-select__placeholder {
  color: #a2a7c1
}

.AccountContent-option .sort-by-wrapper .ReactSelect.usual .ReactSelect-select__indicator:after {
  color: #a2a7c1
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group {
  gap: 0;
  position: relative
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group svg {
  position: absolute;
  left: 14px;
  top: 14px
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group svg path {
  stroke: #a2a7c1
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__control {
  border: none;
  width: 200px;
  padding-left: 30px
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__menu {
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 4px #8d93b14d
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__option {
  border: none
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__option {
  color: #a2a7c1
}

.AccountContent-option .sort-by-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__option:hover {
  color: var(--primary)
}

.AccountBuyContent {
  padding-bottom: 13px
}

.AccountBuyContent-head {
  display: grid;
  grid-template-columns: 1fr 456px;
  gap: 40px;
  position: relative
}

@media screen and (max-width: 1024px) {
  .AccountBuyContent-head {
      gap:20px;
      grid-template-columns: 1fr
  }

  .AccountBuyContent-head .BalanceWidget {
      justify-self: flex-start;
      width: fit-content;
      gap: 15px
  }

  .AccountBuyContent-head .BalanceWidget .BalanceWidget-logo {
      display: none
  }

  .AccountBuyContent-head .BalanceWidget button {
      width: 48px;
      height: 48px
  }

  .AccountBuyContent-head .BalanceWidget button p {
      display: none
  }

  .AccountBuyContent-head .BalanceWidget button span {
      position: static
  }
}

.AccountBuyContent-select-geo {
  width: 380px;
  position: relative
}

@media screen and (max-width: 480px) {
  .AccountBuyContent-select-geo {
      width:100%
  }
}

.AccountBuyContent-select-geo .icons-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none
}

.AccountBuyContent-select-geo .icons-wrapper_promocode {
  width: 230px
}

.AccountBuyContent-select-geo .icons-wrapper .arrow-icon svg,.AccountBuyContent-select-geo .icons-wrapper .country-icon svg {
  z-index: 0;
  position: absolute;
  right: 16px;
  width: 24px;
  height: 24px;
  pointer-events: none
}

.AccountBuyContent-select-geo .icons-wrapper .arrow-icon svg {
  transition: transform .3s ease;
  transform: rotate(0);
  cursor: pointer;
  top: 17px
}

.AccountBuyContent-select-geo .icons-wrapper .country-icon svg {
  top: 15px;
  left: 14px
}

.AccountBuyContent-select-geo .icons-wrapper .info-icon {
  position: absolute;
  top: 17px;
  right: 14px;
  cursor: default;
  z-index: 10000
}

.AccountBuyContent-select-geo .icons-wrapper .info-icon svg path {
  stroke: #adb1c8;
  stroke-width: .1px
}

.AccountBuyContent-select-geo.opened .arrow-icon svg {
  transform: rotate(-180deg)
}

.AccountBuyContent .MuiFormLabel-root.MuiInputLabel-root {
  color: #8289ac;
  font-family: Nunito
}

.AccountBuyContent .MuiOutlinedInput-notchedOutline legend {
  font-family: Nunito
}

.AccountBuyContent .SelectGeo:hover .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.AccountBuyContent .SelectGeo .MuiInputBase-root.MuiOutlinedInput-root {
  border-radius: 8px
}

.AccountBuyContent .SelectGeo .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.AccountBuyContent .SelectGeo .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #adb1c8;
  padding-left: 44px
}

.AccountBuyContent .Promocode-input {
  display: flex
}

.AccountBuyContent .Promocode-input .ProxyTable-popover {
  left: -188px;
  top: 40px;
  width: 400px;
  height: fit-content;
  padding: 12px;
  color: #8289ac;
  text-align: center;
  box-shadow: 0 8px 16px -2px #566a8f1f,0 -8px 16px -2px #566a8f1f
}

.AccountBuyContent .Promocode-input .ProxyTable-popover:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #fff transparent
}

.AccountBuyContent .Promocode-input:hover .ProxyTable-popover {
  transform: translateY(0);
  opacity: 1
}

.AccountBuyContent .Promocode-input .Promocode {
  margin-right: 22px
}

.AccountBuyContent .Promocode-input .MuiInputBase-input.MuiOutlinedInput-input {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #070111
}

.AccountBuyContent .Promocode-input .MuiInputBase-input.MuiOutlinedInput-input::placeholder {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #adb1c8;
  opacity: 1
}

.AccountBuyContent .Promocode-input .MuiOutlinedInput-notchedOutline {
  border: 1px solid #c2c6d7;
  border-radius: 8px;
  font-family: Nunito
}

.AccountBuyContent .Promocode-input .MuiFormLabel-root.MuiInputLabel-root {
  font-family: Nunito;
  color: #8289ac
}

.AccountBuyContent-TarifsList-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(345px,1fr));
  gap: 16px;
  justify-items: center;
  margin-top: 32px
}

@media screen and (min-width: 1600px) {
  .AccountBuyContent-TarifsList-cards {
      grid-template-columns:repeat(3,minmax(345px,1fr))
  }
}

@media screen and (max-width: 600px) {
  .AccountBuyContent-TarifsList-cards {
      grid-template-columns:none
  }
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard {
  border: 1px solid #f4f5f8;
  border-radius: 26px;
  box-shadow: 0 26px 40px #8d93b14d;
  padding: 16px;
  position: relative;
  overflow: hidden
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stock-status {
  font-family: Nunito;
  font-size: 14px;
  color: #8289ac
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stock-status .stock-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 24px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stock-status .stock-loading .Loader-wrapper {
  position: unset
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stock-status .stock-loading .Loader-wrapper .Loader {
  width: 35px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stock-status .stock-loading .Loader-wrapper .Loader div {
  width: 7px;
  height: 7px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stock-status .stock-status.out-of-stock {
  color: #ff4d4f
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stock-status .stock-status:not(.out-of-stock) {
  color: #52c41a
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard .primary-ellipse-first {
  display: inline-flex;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard .primary-ellipse-second {
  display: inline-flex;
  position: absolute;
  pointer-events: none;
  bottom: 0;
  right: 0
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid #f4f5f8
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-icon {
  width: 100%
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-icon-container {
  position: relative;
  display: flex;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background-color: #fff;
  margin-bottom: 16px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-icon-container svg {
  margin: auto;
  width: 56px;
  height: 56px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-icon-container svg path {
  stroke: #fff
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-price {
  display: flex;
  gap: 8px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-price .price,.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-price .crossed-price {
  font-family: Nunito;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  text-align: left
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-price .price {
  color: #651eee
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-price .crossed-price {
  color: #c2c6d7;
  text-decoration: line-through
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-price .discount-label {
  position: absolute;
  top: 0;
  right: -8px;
  width: 93px;
  height: 28px;
  padding: 4px 8px;
  border-radius: 8px 26px 8px 8px;
  background-color: #ffe4e3
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-header .AccountTarifCard-price .discount-label span {
  font-family: Nunito;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: #ff003d
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stats {
  margin-top: 8px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stats li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stats li svg path {
  stroke: #147129
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-stats li span {
  font-family: Nunito;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  text-align: left;
  color: #fff;
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
  margin-top: 36px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .MuiFormLabel-root.MuiInputLabel-root {
  color: #8289ac;
  font-family: Nunito
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .MuiOutlinedInput-notchedOutline legend {
  font-family: Nunito
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectRentTerm,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity {
  flex: 1
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectRentTerm:hover .MuiOutlinedInput-notchedOutline,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectOperator:hover .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectRentTerm .MuiInputBase-root.MuiOutlinedInput-root,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root {
  border-radius: 8px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectRentTerm .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectRentTerm .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root .MuiSelect-outlined.MuiInputBase-input {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #adb1c8
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectRentTerm .MuiInputBase-root.MuiOutlinedInput-root svg,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectOperator .MuiInputBase-root.MuiOutlinedInput-root svg {
  transition: all .3s ease;
  transform: rotate(0);
  z-index: 0;
  cursor: pointer;
  position: absolute;
  right: 16px;
  width: 24px;
  height: 24px;
  pointer-events: none
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectRentTerm.opened .MuiInputBase-root.MuiOutlinedInput-root svg,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectOperator.opened .MuiInputBase-root.MuiOutlinedInput-root svg {
  transform: rotate(-180deg)
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-input.MuiOutlinedInput-input {
  text-align: center;
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  color: #adb1c8
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root {
  border-radius: 8px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root .MuiInputAdornment-root .btn-decrease,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root .MuiInputAdornment-root .btn-increase {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root .MuiInputAdornment-root .btn-decrease.disabled,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root .MuiInputAdornment-root .btn-increase.disabled {
  cursor: not-allowed
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root .MuiInputAdornment-root .btn-decrease svg,.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root .MuiInputAdornment-root .btn-increase svg {
  width: 32px;
  height: 32px
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard-selects .SelectQuantity .MuiInputBase-root.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: #0000003b
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard .AccountTarifCard-btn button {
  width: 100%;
  color: #a2a7c1;
  font-family: Nunito;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  border: 1px solid #a2a7c1;
  background: none
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard .AccountTarifCard-btn button:hover {
  color: var(--primary);
  border-color: var(--primary)
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard.primary .AccountTarifCard-btn button {
  position: relative;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: #fff
}

.AccountBuyContent-TarifsList-cards .AccountTarifCard.primary .AccountTarifCard-btn button:hover {
  background-color: var(--primary-hover)
}

.AccountSettingsContent-wrapper {
  position: relative;
  padding-bottom: 20px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-head {
  display: grid;
  grid-template-columns: 1fr 456px;
  gap: 40px;
  position: relative;
  align-items: center;
  margin-bottom: 32px
}

@media screen and (max-width: 1024px) {
  .AccountSettingsContent-wrapper .AccountSettingsContent-head {
      gap:20px;
      grid-template-columns: 1fr
  }

  .AccountSettingsContent-wrapper .AccountSettingsContent-head .BalanceWidget {
      justify-self: flex-start;
      width: fit-content;
      gap: 15px
  }

  .AccountSettingsContent-wrapper .AccountSettingsContent-head .BalanceWidget .BalanceWidget-logo {
      display: none
  }

  .AccountSettingsContent-wrapper .AccountSettingsContent-head .BalanceWidget button {
      width: 48px;
      height: 48px
  }

  .AccountSettingsContent-wrapper .AccountSettingsContent-head .BalanceWidget button p {
      display: none
  }

  .AccountSettingsContent-wrapper .AccountSettingsContent-head .BalanceWidget button span {
      position: static
  }
}

.AccountSettingsContent-wrapper .AccountSettingsContent-head h2 {
  font-weight: 700;
  font-size: 24px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data,.AccountSettingsContent-wrapper .AccountSettingsContent-password {
  max-width: 800px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .subtitle,.AccountSettingsContent-wrapper .AccountSettingsContent-password .subtitle {
  font-family: Nunito;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  color: #070111;
  margin-bottom: 24px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .OldPassword.validation-error,.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .NewPassword.validation-error,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .OldPassword.validation-error,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .NewPassword.validation-error {
  margin-bottom: 20px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .input-container-first-item,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .input-container-first-item {
  flex-basis: 100%
}

@media screen and (max-width: 440px) {
  .AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .input-container-first-item,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .input-container-first-item {
      flex-basis:unset
  }

  .AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .input-container-first-item .MuiFormControl-root.MuiTextField-root,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .input-container-first-item .MuiFormControl-root.MuiTextField-root {
      width: calc(100vw - 48px)
  }
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .CurrentEmail .CurrentEmail-copy-btn,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .CurrentEmail .CurrentEmail-copy-btn,.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .CurrentEmail .CurrentEmail-copy-btn button.copied,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .CurrentEmail .CurrentEmail-copy-btn button.copied {
  display: inline-flex
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .CurrentEmail .CurrentEmail-copy-btn button.copied .copied-tooltip,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .CurrentEmail .CurrentEmail-copy-btn button.copied .copied-tooltip {
  transform: translateY(0);
  opacity: 1
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .CurrentEmail .CurrentEmail-copy-btn .copied-tooltip,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .CurrentEmail .CurrentEmail-copy-btn .copied-tooltip {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  position: absolute;
  top: 90%;
  right: 0;
  background: var(--white);
  box-shadow: 0 4px 20px #5f616440;
  border-radius: 4px;
  padding: 4px;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 2
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .MuiFormControl-root.MuiTextField-root,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .MuiFormControl-root.MuiTextField-root {
  width: 392px;
  height: 56px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .MuiInputBase-input.MuiOutlinedInput-input,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .MuiInputBase-input.MuiOutlinedInput-input {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #070111
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .MuiInputBase-input.MuiOutlinedInput-input::placeholder,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .MuiInputBase-input.MuiOutlinedInput-input::placeholder {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #adb1c8;
  opacity: 1
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .MuiOutlinedInput-notchedOutline,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .MuiOutlinedInput-notchedOutline {
  border: 1px solid #c2c6d7;
  border-radius: 8px;
  font-family: Nunito
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .MuiFormLabel-root.MuiInputLabel-root,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .MuiFormLabel-root.MuiInputLabel-root {
  font-family: Nunito;
  color: #8289ac
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .validation-error .MuiOutlinedInput-notchedOutline,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .validation-error .MuiOutlinedInput-notchedOutline {
  border: 1px solid #d32f2f
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .validation-error .MuiFormLabel-root.MuiInputLabel-root,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .validation-error .MuiFormLabel-root.MuiInputLabel-root {
  color: #d32f2f
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .validation-error .MuiButtonBase-root.MuiIconButton-root svg path,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .validation-error .MuiButtonBase-root.MuiIconButton-root svg path {
  stroke: #d32f2f
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data .input-container .validation-error .MuiInputBase-input.MuiOutlinedInput-input,.AccountSettingsContent-wrapper .AccountSettingsContent-password .input-container .validation-error .MuiInputBase-input.MuiOutlinedInput-input {
  color: #d32f2f
}

.AccountSettingsContent-wrapper .AccountSettingsContent-personal-data {
  margin-bottom: 32px
}

.AccountSettingsContent-wrapper .AccountSettingsContent-save-btn {
  margin-top: 32px;
  position: absolute;
  right: 0
}

.AccountSupportContent {
  padding: 16px 32px 120px;
  overflow: auto;
  width: 100%
}

.AccountSupportContent .AccountSupportContent-title {
  font-family: Nunito;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  text-align: left;
  color: #070111;
  margin-bottom: 16px
}

.AccountSupportContent .AccountSupportContent-subtitle {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #8289ac;
  margin-bottom: 32px
}

.AccountSupportContent .AccountSupportContent-contact-us {
  max-width: 800px;
  height: 168px;
  border-radius: 24px;
  box-shadow: 0 4px 4px #8d93b14d;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  gap: 177px;
  align-items: center;
  position: relative;
  overflow: hidden;
  background-color: #fafafb;
  margin-bottom: 32px
}

.AccountSupportContent .AccountSupportContent-contact-us .icon-first {
  position: absolute;
  display: inline-flex;
  top: 0;
  left: 0
}

.AccountSupportContent .AccountSupportContent-contact-us .icon-second {
  position: absolute;
  display: inline-flex;
  bottom: 0;
  left: 0
}

.AccountSupportContent .AccountSupportContent-contact-us .contact-message {
  padding-left: 24px;
  font-family: Nunito;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  color: #651eee
}

.AccountSupportContent .AccountSupportContent-contact-us .contact-message a {
  text-decoration: underline
}

.AccountSupportContent .AccountSupportContent-contact-us .contact-link {
  width: 309px;
  height: 168px;
  background-color: #651eee;
  display: flex;
  align-items: center;
  border-radius: 24px;
  gap: 28px
}

.AccountSupportContent .AccountSupportContent-contact-us .contact-link .icon {
  margin-right: 20px
}

.AccountSupportContent .AccountSupportContent-contact-us .contact-link p {
  font-family: Nunito;
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  color: #fff;
  padding-left: 51.5px
}

@media screen and (max-width: 700px) {
  .AccountSupportContent .AccountSupportContent-contact-us .contact-link {
      display:none
  }
}

.AccountSupportContent .AccountSupportContent-description .AccountSupportContent-description-subtitle,.AccountSupportContent .AccountSupportContent-social-links .AccountSupportContent-description-subtitle {
  font-family: Nunito;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: left;
  color: #8289ac;
  margin-bottom: 16px
}

.AccountSupportContent .AccountSupportContent-description .description-container,.AccountSupportContent .AccountSupportContent-social-links .description-container {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.AccountSupportContent .AccountSupportContent-description .description-container .description-block,.AccountSupportContent .AccountSupportContent-social-links .description-container .description-block {
  display: flex;
  flex-direction: row;
  gap: 16px
}

.AccountSupportContent .AccountSupportContent-description .description-container .description-block .description-item,.AccountSupportContent .AccountSupportContent-social-links .description-container .description-block .description-item {
  width: 392px;
  height: 120px;
  gap: 8px;
  display: flex;
  align-items: center;
  border-radius: 24px;
  background-color: #fafafb;
  box-shadow: 0 4px 4px #8d93b14d
}

.AccountSupportContent .AccountSupportContent-description .description-container .description-block .description-item div,.AccountSupportContent .AccountSupportContent-social-links .description-container .description-block .description-item div {
  padding-left: 24px
}

.AccountSupportContent .AccountSupportContent-description .description-container .description-block .description-item p,.AccountSupportContent .AccountSupportContent-social-links .description-container .description-block .description-item p {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
  text-align: left;
  color: #979dba;
  padding: 41px 24px 41px 0
}

@media screen and (max-width: 600px) {
  .AccountSupportContent .AccountSupportContent-description .description-container .description-block,.AccountSupportContent .AccountSupportContent-social-links .description-container .description-block {
      flex-wrap:wrap
  }

  .AccountSupportContent .AccountSupportContent-description .description-container .description-block .description-item,.AccountSupportContent .AccountSupportContent-social-links .description-container .description-block .description-item {
      width: 100%
  }
}

.AccountSupportContent .AccountSupportContent-social-links {
  margin-top: 32px
}

.AccountSupportContent .AccountSupportContent-social-links .description-container {
  flex-direction: row
}

.AccountSupportContent .AccountSupportContent-social-links .description-block .description-item div {
  display: inline-flex;
  padding-left: 0!important
}

.AccountSupportContent .AccountSupportContent-social-links .description-block .description-item div svg {
  border-radius: 24px
}

.AccountReferalContent {
  padding: 16px 60px 120px 32px;
  overflow: auto;
  flex-grow: 1
}

.AccountReferalContent .AccountReferalContent-title {
  font-family: Nunito;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  text-align: left;
  color: #070111;
  margin-bottom: 16px
}

.AccountReferalContent .AccountReferalContent-subtitle {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #8289ac;
  margin-bottom: 32px
}

.AccountReferalContent .AccountReferalContent-general {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 32px;
  gap: 16px
}

@media screen and (max-width: 1000px) {
  .AccountReferalContent .AccountReferalContent-general {
      flex-wrap:wrap
  }
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 564px;
  width: auto
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item {
  border-radius: 24px;
  box-shadow: 0 4px 4px #8d93b14d;
  background-color: #fafafb;
  padding: 24px;
  gap: 8px
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item p {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #8d93b3
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item span {
  font-family: Nunito;
  font-size: 24px;
  font-weight: 500;
  line-height: 28.8px;
  text-align: left;
  color: #070111
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item.balance {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  position: relative
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item.balance .withdraw-btn-container {
  width: 157px;
  position: absolute;
  right: 24px
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item.referrals,.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item.earnings {
  text-wrap: nowrap;
  flex: 1;
  display: flex;
  align-items: center
}

@media screen and (max-width: 640px) {
  .AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item.balance {
      flex-wrap:wrap
  }

  .AccountReferalContent .AccountReferalContent-general .AccountReferalContent-earnings .AccountReferalContent-item.balance .withdraw-btn-container {
      position: static
  }
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link {
  width: 392px;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 4px 4px #8d93b14d;
  background-color: #fafafb;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  row-gap: 0
}

@media screen and (max-width: 1000px) {
  .AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link {
      width:auto;
      max-width: 564px
  }
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link p {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.2px;
  text-align: left;
  color: #651eee;
  text-wrap: nowrap
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input {
  align-self: flex-start;
  width: 100%
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input .AccountReferalContent-reflink-btn,.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input .AccountReferalContent-reflink-btn button.copied {
  display: inline-flex
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input .AccountReferalContent-reflink-btn button.copied .copied-tooltip {
  transform: translateY(0);
  opacity: 1
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input .AccountReferalContent-reflink-btn .copied-tooltip {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 100%;
  position: absolute;
  top: 90%;
  right: 0;
  background: var(--white);
  box-shadow: 0 4px 20px #5f616440;
  border-radius: 4px;
  padding: 4px;
  opacity: 0;
  transform: translateY(5px);
  pointer-events: none;
  transition: var(--transition);
  z-index: 2
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input .MuiFormControl-root.MuiTextField-root {
  width: 100%
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled {
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 19.2px;
  text-align: left;
  color: #adb1c8
}

.AccountReferalContent .AccountReferalContent-general .AccountReferalContent-share-link .share-link-input .MuiOutlinedInput-notchedOutline {
  border-radius: 8px
}

.AccountReferalContent .AccountReferalContent-general .icon-ellipse-one,.AccountReferalContent .AccountReferalContent-general .icon-ellipse-two {
  position: absolute;
  display: inline-flex
}

.AccountReferalContent .AccountReferalContent-general .icon-ellipse-one {
  bottom: 0;
  left: 0
}

.AccountReferalContent .AccountReferalContent-general .icon-ellipse-two {
  top: 0;
  right: 0
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table {
  margin-top: 8px;
  display: table;
  width: 100%;
  border-radius: 16px;
  border-collapse: collapse;
  overflow: hidden;
  background: var(--white)
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-header,.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body {
  display: table-header-group;
  text-align: center
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-row {
  display: table-row
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-cell {
  display: table-cell;
  padding: 10px
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-header .table-row {
  background-color: #fbfcfd;
  border-top-right-radius: 16px;
  font-family: Nunito;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
  color: #070111
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-header .table-row .table-cell {
  padding: 16px 8px
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row {
  border: 1px solid #f8f8fa
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell {
  font-family: Nunito;
  font-size: 14px;
  font-weight: 300;
  line-height: 16.8px;
  text-align: center;
  color: #070111;
  padding: 16px 8px
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.cancelled p,.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.paid p,.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.pending p {
  padding: 4px 8px;
  border-radius: 200px;
  width: 120px;
  text-align: center;
  margin: auto;
  display: flex;
  gap: 2px;
  align-items: center;
  justify-content: center
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.cancelled p svg,.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.paid p svg,.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.pending p svg {
  width: 16px;
  height: 16px
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.cancelled p div,.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.paid p div,.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.pending p div {
  display: inline-flex
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.cancelled p {
  background-color: #ffe4e3;
  color: #ff003d
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.cancelled p svg path {
  stroke: #ff003d
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.paid p {
  background-color: #eafdee;
  color: #147129
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.paid p svg path {
  stroke: #147129
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.pending p {
  background-color: #fff5ca;
  color: #d47f00
}

.AccountReferalContent .AccountReferalContent-tableview .AccountReferalContent-table .table-body .table-row .table-cell.pending p svg path {
  stroke: #d47f00
}

.AccountReferalContent .AccountReferalContent-tableview .referral-data-empty svg {
  margin: 8px auto auto;
  display: block
}

.AccountReferalContent .AccountReferalContent-tableview .referral-data-empty p {
  margin-top: 8px;
  font-family: Nunito;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  color: #070111
}

.AccountReferalContent .AccountReferalContent-tableview .MuiBox-root {
  border: none
}

.AccountReferalContent .AccountReferalContent-tableview .MuiButtonBase-root.MuiTab-root {
  padding: 0;
  justify-content: flex-end;
  min-width: 0;
  width: fit-content;
  margin-right: 16px;
  font-family: Nunito;
  font-size: 16px;
  font-weight: 300;
  line-height: 21.6px;
  text-align: center;
  text-transform: none
}

.AccountReferalContent .AccountReferalContent-tableview .MuiButtonBase-root.MuiTab-root.Mui-selected {
  color: #651eee
}

.AccountReferalContent .AccountReferalContent-tableview .MuiTabs-indicator {
  background-color: #651eee
}

.AccountReferalContent .AccountReferalContent-tableview .MuiTouchRipple-root {
  display: none
}

.AccountHistoryContent {
  position: relative;
  padding-bottom: 20px
}

.AccountHistoryContent-head {
  display: grid;
  grid-template-columns: 1fr 456px;
  gap: 40px;
  position: relative
}

.AccountHistoryContent-head .export-search-wrapper {
  display: flex;
  position: relative;
  align-items: center
}

.AccountHistoryContent-head .export-search-wrapper .search-wrapper {
  position: relative
}

.AccountHistoryContent-head .export-search-wrapper .search-wrapper input {
  width: 326px;
  height: 56px
}

.AccountHistoryContent-head .export-search-wrapper .search-wrapper svg {
  position: absolute;
  top: 16px;
  left: 16px
}

.AccountHistoryContent-head .export-search-wrapper .ReactSelect-group {
  margin-left: 0
}

.AccountHistoryContent-head .export-search-wrapper .ReactSelect.usual .ReactSelect-select__control,.AccountHistoryContent-head .export-search-wrapper .ReactSelect.usual .ReactSelect-select__menu {
  width: 170px
}

@media screen and (max-width: 1024px) {
  .AccountHistoryContent-head {
      gap:20px;
      grid-template-columns: 1fr
  }

  .AccountHistoryContent-head .BalanceWidget {
      justify-self: flex-start;
      width: fit-content;
      gap: 15px
  }

  .AccountHistoryContent-head .BalanceWidget .BalanceWidget-logo {
      display: none
  }

  .AccountHistoryContent-head .BalanceWidget button {
      width: 48px;
      height: 48px
  }

  .AccountHistoryContent-head .BalanceWidget button p {
      display: none
  }

  .AccountHistoryContent-head .BalanceWidget button span {
      position: static
  }
}

@media screen and (max-width: 768px) {
  .AccountHistoryContent-head .export-search-wrapper {
      position:static;
      margin-top: 8px
  }
}

@media screen and (max-width: 600px) {
  .AccountHistoryContent-head .export-search-wrapper .search-wrapper {
      width:75%
  }

  .AccountHistoryContent-head .export-search-wrapper .search-wrapper input {
      width: 100%
  }

  .AccountHistoryContent-head .export-search-wrapper .export-history-wrapper button {
      padding: 1.1rem 1.3rem
  }

  .AccountHistoryContent-head .filters {
      position: relative
  }

  .AccountHistoryContent-head .filters .type-select-wrapper {
      position: static
  }

  .AccountHistoryContent-head .filters .type-select-wrapper .ReactSelect-group .ReactSelect .ReactSelect-select__menu {
      right: 0
  }

  .AccountHistoryContent-head .filters .type-select-wrapper .active-transaction-type {
      position: absolute;
      right: 0;
      bottom: -20px
  }
}

@media screen and (max-width: 600px) {
  .AccountHistoryContent-head .filters .date-range-wrapper .ant-picker-suffix {
      display:none
  }

  .AccountHistoryContent-head .filters .date-range-wrapper .ant-picker {
      padding: 0
  }

  .AccountHistoryContent-head .filters .date-range-wrapper .ant-picker .ant-picker-range-separator {
      display: none
  }
}

.AccountHistoryContent .AccountHistoryPagination {
  z-index: 2;
  position: relative
}

.AccountHistoryContent .export-history-wrapper {
  position: relative
}

.AccountHistoryContent .export-history-wrapper button {
  border: none;
  gap: 8px
}

.AccountHistoryContent .export-history-wrapper button svg path {
  stroke: var(--primary)
}

.AccountHistoryContent .export-history-wrapper .ProxyItem-option-popover {
  right: 40px;
  left: auto
}

.AccountHistoryContent .filters {
  flex-direction: row;
  align-items: center;
  display: flex
}

.AccountHistoryContent .filters .search-wrapper {
  width: 100%;
  flex-grow: 1;
  position: relative
}

.AccountHistoryContent .filters .search-wrapper .search-proxy-input {
  margin: 8px 0 0;
  width: 435px
}

.AccountHistoryContent .filters .type-select-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center
}

.AccountHistoryContent .filters .type-select-wrapper .active-transaction-type {
  padding: 4px 8px 4px 12px;
  background: #f0e8fd;
  border-radius: 20px;
  color: #5218c2
}

.AccountHistoryContent .filters .type-select-wrapper .active-transaction-type button {
  display: flex;
  justify-content: center;
  align-items: center
}

.AccountHistoryContent .filters .type-select-wrapper .active-transaction-type button svg {
  width: 20px;
  height: 20px
}

.AccountHistoryContent .filters .type-select-wrapper .active-transaction-type button svg path {
  stroke: #5218c2
}

.AccountHistoryContent .filters .type-select-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__option--is-focused {
  border: none
}

.AccountHistoryContent .filters .type-select-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__option {
  border: none;
  color: #a2a7c1
}

.AccountHistoryContent .filters .type-select-wrapper .ReactSelect-group .ReactSelect.usual .ReactSelect-select__option:hover {
  color: var(--primary)
}

.AccountHistoryContent .filters .type-select-wrapper .ReactSelect-group .ReactSelect .ReactSelect-select__menu {
  border-radius: 6px;
  box-shadow: 0 4px 4px #c2c6d733
}

.AccountHistoryContent .filters .type-select-wrapper .ReactSelect-group .ReactSelect .ReactSelect-select__dropdown-indicator {
  padding-right: 20px
}

.AccountHistoryContent .AccountHistoryControls {
  z-index: 10000;
  position: absolute;
  bottom: 11px;
  right: 0;
  display: flex;
  align-items: center
}

@media screen and (max-width: 1200px) {
  .AccountHistoryContent .AccountHistoryControls .recordsPerPage {
      display:none
  }
}

@media screen and (max-width: 786px) {
  .AccountHistoryContent .AccountHistoryControls {
      bottom:45px;
      right: 0
  }
}

.AccountHistoryContent .AccountHistoryTable {
  min-height: 244px;
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
  background: var(--white);
  position: relative
}

.AccountHistoryContent .AccountHistoryTable thead {
  width: 100%;
  display: block
}

.AccountHistoryContent .AccountHistoryTable thead tr {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  height: 56px;
  background: #f8f8fa
}

.AccountHistoryContent .AccountHistoryTable thead tr th:first-child {
  justify-content: space-between;
  border-radius: 10px 0 0 10px;
  padding: 17px;
  text-align: left
}

@media screen and (max-width: 1200px) {
  .AccountHistoryContent .AccountHistoryTable thead tr th:first-child {
      padding:24px 18px
  }
}

@media screen and (max-width: 810px) {
  .AccountHistoryContent .AccountHistoryTable thead tr th:first-child {
      padding:18px 16px
  }
}

.AccountHistoryContent .AccountHistoryTable thead tr th:nth-child(1) {
  width: 60px
}

.AccountHistoryContent .AccountHistoryTable thead tr th:nth-child(2) {
  width: 46%
}

.AccountHistoryContent .AccountHistoryTable thead tr th:nth-child(3) {
  width: 16%;
  text-align: center
}

.AccountHistoryContent .AccountHistoryTable thead tr th:nth-child(4) {
  width: 16%;
  text-align: center
}

.AccountHistoryContent .AccountHistoryTable thead tr th:nth-child(5) {
  width: 16%;
  text-align: center;
  border-radius: 0 10px 10px 0
}

.AccountHistoryContent .AccountHistoryTable tbody tr {
  display: flex;
  width: 100%
}

.AccountHistoryContent .AccountHistoryTable tbody td {
  display: flex;
  position: relative;
  overflow: visible;
  vertical-align: top;
  flex-direction: column;
  justify-content: center
}

.AccountHistoryContent .AccountHistoryTable tbody td:first-child {
  justify-content: space-between;
  padding: 24px 40px 24px 18px
}

@media screen and (max-width: 1200px) {
  .AccountHistoryContent .AccountHistoryTable tbody td:first-child {
      padding:24px 18px
  }
}

@media screen and (max-width: 810px) {
  .AccountHistoryContent .AccountHistoryTable tbody td:first-child {
      padding:18px 16px
  }
}

.AccountHistoryContent .AccountHistoryTable tbody td:nth-child(1) {
  width: 6%
}

.AccountHistoryContent .AccountHistoryTable tbody td:nth-child(2) {
  position: relative;
  width: 46%
}

.AccountHistoryContent .AccountHistoryTable tbody td:nth-child(3) {
  width: 16%
}

.AccountHistoryContent .AccountHistoryTable tbody td:nth-child(4) {
  width: 16%
}

.AccountHistoryContent .AccountHistoryTable tbody td:nth-child(5) {
  width: 16%
}

.AccountHistoryContent .AccountHistoryTable tbody td .AccountHistoryTable-item {
  position: relative;
  margin: auto
}

.AccountHistoryContent .AccountHistoryTable tbody td .AccountHistoryTable-item.history-type span {
  display: flex;
  align-items: center;
  border-radius: 200px;
  text-align: center;
  padding: 4px 8px
}

.AccountHistoryContent .AccountHistoryTable tbody td .AccountHistoryTable-item.history-type svg {
  margin-left: 3px;
  width: 16px;
  height: 16px
}

.AccountHistoryContent .AccountHistoryTable tbody td .AccountHistoryTable-item.history-type.invoice span {
  background-color: #eafdee;
  color: #147129
}

.AccountHistoryContent .AccountHistoryTable tbody td .AccountHistoryTable-item.history-type.invoice svg path {
  stroke: #147129
}

.AccountHistoryContent .AccountHistoryTable tbody td .AccountHistoryTable-item.history-type.order span {
  background-color: #ffe4e3;
  color: #ff003d
}

.AccountHistoryContent .AccountHistoryTable tbody td .AccountHistoryTable-item.history-type.order svg path {
  stroke: #ff003d
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content {
  font-weight: 300;
  margin-top: 16px
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content .ProxyItem-body-btn {
  position: absolute;
  right: 17px
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content .ProxyItem-body-btn button span {
  color: #8289ac
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content .ProxyItem-body-btn svg path {
  stroke: #c2c6d7
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content .proxyId-wrapper {
  position: relative;
  display: flex;
  align-items: center
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content p {
  margin-bottom: 8px
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content span {
  width: 108px;
  display: inline-block;
  color: #c2c6d7
}

.AccountHistoryContent .AccountHistoryTable tbody td .sub-info-content .proxy-btn {
  background: #f0e8fd;
  color: #5218c2;
  padding: 2px 6px;
  border-radius: 20px;
  margin-right: 50px
}

.AccountHistoryContent .AccountHistoryTable .allCheck-checkbox {
  position: static;
  top: 0;
  left: 0;
  width: auto
}

.AccountHistoryContent .AccountHistoryTable .allCheck-checkbox input {
  display: none
}

.AccountHistoryContent .AccountHistoryTable .allCheck-checkbox label {
  padding: 0
}

.AccountHistoryContent .AccountHistoryTable .allCheck-checkbox label:before {
  position: static;
  transform: none
}

.AccountHistoryContent .AccountHistoryTable .allCheck-checkbox label:after {
  top: 13px;
  left: 9px
}

.AccountHistoryContent .AccountHistoryTable .allCheck-checkbox label.minus:after {
  top: 12px;
  left: 7px
}

.AccountHistoryContent .AccountHistoryTable .history-table-row-checkbox {
  margin: auto;
  min-width: 42px
}

.AccountHistoryContent .AccountHistoryTable .history-table-row-checkbox input {
  display: none
}

.AccountHistoryContent .AccountHistoryTable .history-table-row-checkbox label {
  padding: 0
}

.AccountHistoryContent .AccountHistoryTable .history-table-row-checkbox label:after {
  left: 10px;
  top: 0
}

.AccountHistoryContent .AccountHistoryTable .history-table-row-checkbox label:before {
  left: 0;
  top: 0
}

.AccountHistoryContent .AccountHistoryTable thead tr {
  height: 64px;
  background-color: #fbfcfd;
  border-width: 1px,0px,1px,0px;
  border-style: solid;
  border-color: #f8f8fa;
  text-align: left;
  line-height: 16px;
  color: #070111;
  font-weight: 400
}

.AccountHistoryContent .AccountHistoryTable thead tr .th-data {
  cursor: pointer;
  position: relative
}

.AccountHistoryContent .AccountHistoryTable thead tr .th-data i {
  color: #a6a6a6
}

.AccountHistoryContent .AccountHistoryTable thead tr .th-data i:before {
  position: absolute;
  top: 1px;
  left: auto;
  right: 17px;
  transition: var(--transition)
}

.AccountHistoryContent .AccountHistoryTable thead tr .th-data.expandedAll i:before {
  transform: rotate(-180deg)
}

.AccountHistoryContent .AccountHistoryTable thead tr th {
  padding: 0;
  font-weight: 500
}

.AccountHistoryContent .AccountHistoryTable thead tr th:first-child {
  padding-left: 22px;
  position: relative
}

.AccountHistoryContent .AccountHistoryTable thead tr th:first-child {
  border-top-left-radius: 10px
}

.AccountHistoryContent .AccountHistoryTable thead tr th:last-child {
  border-top-right-radius: 10px
}

.AccountHistoryContent .AccountHistoryTable tbody {
  position: relative
}

.AccountHistoryContent .AccountHistoryTable tbody .Loader-wrapper {
  top: 15px;
  width: 100%
}

.AccountHistoryContent .AccountHistoryTable tbody tr {
  cursor: pointer;
  position: relative
}

.AccountHistoryContent .AccountHistoryTable tbody tr.sub-info {
  cursor: auto
}

.AccountHistoryContent .AccountHistoryTable tbody tr.sub-info span {
  font-weight: 600
}

.AccountHistoryContent .AccountHistoryTable tbody tr.sub-info .proxy-btn {
  text-decoration: underline;
  color: var(--primary)
}

.AccountHistoryContent .AccountHistoryTable tbody tr.sub-info .proxy-btn:active {
  transform: none
}

.AccountHistoryContent .AccountHistoryTable tbody tr .icon-arrow-down {
  color: #a6a6a6
}

.AccountHistoryContent .AccountHistoryTable tbody tr .icon-arrow-down:before {
  transition: var(--transition);
  position: absolute;
  top: 15px;
  right: 17px
}

.AccountHistoryContent .AccountHistoryTable tbody tr.expanded .icon-arrow-down:before {
  transform: rotate(-180deg)
}

.AccountHistoryContent .AccountHistoryTable tbody tr td {
  padding: 16px 0;
  border-bottom: 1px solid #f8f8fa
}

.AccountHistoryContent .AccountHistoryTable tbody tr td:first-child {
  padding-left: 24px;
  width: 60px
}

.AccountHistoryContent .AccountHistoryTable tbody.tbody-history-empty tr {
  position: static;
  cursor: auto;
  display: table-row;
  width: auto
}

.AccountHistoryContent .AccountHistoryTable tbody.tbody-history-empty td {
  padding: 0;
  width: auto;
  display: table-cell;
  position: static
}

.AccountHistoryContent .ReactSelect-group {
  margin-left: 8px
}

.AccountHistoryContent .ReactSelect-group label {
  display: none
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual .ReactSelect-select__control {
  width: fit-content;
  border: none
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual .ReactSelect-select__placeholder,.AccountHistoryContent .ReactSelect-group .ReactSelect.usual .ReactSelect-select__indicator:after {
  color: #a2a7c1;
  font-weight: 500
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual .ReactSelect-select__menu {
  min-width: 148px;
  border: none
}

.AccountHistoryContent .ReactSelect-group .ReactSelect-select__indicator.ReactSelect-select__clear-indicator:after {
  content: "\e90d";
  transform: none;
  z-index: 100
}

.AccountHistoryContent .ReactSelect-group .ReactSelect-select__single-value {
  color: #a2a7c1
}

.AccountHistoryContent .ReactSelect-group .ReactSelect-select__value-container {
  padding: 2px 6px 2px 16px
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual.records-per-page-select .ReactSelect-select__control {
  min-width: auto;
  width: fit-content
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual.records-per-page-select .ReactSelect-select__menu {
  animation: fade--in .3s ease-in-out;
  width: 100px;
  color: #a2a7c1;
  min-width: auto;
  border: none;
  box-shadow: 0 4px 4px #8d93b14d;
  background: #fdfdfe;
  border-radius: 10px;
  right: 0
}

@keyframes fade--in {
  0% {
      opacity: 0
  }

  to {
      opacity: 1
  }
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual.records-per-page-select .ReactSelect-select__menu--menu-is-open {
  opacity: 1
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual.records-per-page-select .ReactSelect-select__option {
  border-top: none
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual.records-per-page-select .ReactSelect-select__option--is-selected {
  color: #a2a7c1
}

.AccountHistoryContent .ReactSelect-group .ReactSelect.usual.records-per-page-select .ReactSelect-select__option--is-selected:hover {
  color: var(--primary)
}

.AccountHistoryContent .date-range-display {
  display: flex;
  align-items: center;
  gap: 5px
}

.AccountHistoryContent .date-range-picker .icon-wrapper {
  position: relative
}

.AccountHistoryContent .date-range-picker .icon-wrapper .calendar-icon {
  position: absolute;
  color: var(--primary);
  top: 12px;
  left: 32px
}

.AccountHistoryContent .date-range-picker input {
  border: none;
  color: #a2a7c1;
  background: none;
  cursor: pointer;
  border-radius: 80px;
  padding: 16px;
  font-family: Nunito;
  line-height: 16px
}

.AccountHistoryContent .date-range-picker input:focus {
  outline: none
}

.AccountHistoryContent .date-range-picker input::placeholder {
  color: #a2a7c1;
  font-family: Nunito
}

.AccountHistoryContent .date-range-picker.dates-selected .ant-picker-suffix {
  right: -7px!important
}

.date-range-calendar .ant-picker-cell-range-start .ant-picker-cell-inner,.date-range-calendar .ant-picker-cell-range-end .ant-picker-cell-inner {
  background: var(--primary)!important
}

.date-range-calendar .ant-picker-cell-in-range:before {
  background: #f2f6fc!important
}

.ant-picker-dropdown .ant-picker-panel-container .ant-picker-panels {
  display: inline-flex;
  animation: none;
  flex-wrap: nowrap;
  direction: ltr
}

@media (max-width: 768px) {
  .ant-picker-dropdown .ant-picker-panel-container .ant-picker-panels {
      display:inline-grid
  }
}

.ant-picker.ant-picker-range.ant-picker-outlined {
  border: none;
  height: 50px;
  box-shadow: none
}

.ant-picker.ant-picker-range.ant-picker-outlined .ant-picker-suffix {
  right: 7px;
  position: absolute;
  opacity: 1
}

.ant-picker.ant-picker-range.ant-picker-outlined .ant-picker-suffix svg path {
  stroke: #a2a7c1
}

.ant-picker.ant-picker-range.ant-picker-outlined:hover .ant-picker-suffix,.ant-picker.ant-picker-range.ant-picker-outlined:hover .ant-picker-clear {
  opacity: 1
}

.ant-picker .ant-picker-input:first-child input {
  width: 110px;
  text-align: left;
  padding-right: 0;
  padding-left: 16px
}

.ant-picker .ant-picker-input:nth-child(3) input {
  padding-left: 5px;
  padding-right: 10px;
  width: 100px;
  text-align: left
}

.ant-picker .ant-picker-range-separator {
  padding-left: 0
}

.ant-picker-active-bar {
  display: none
}

.ant-picker-range-separator .ant-picker-separator {
  color: #a2a7c1;
  cursor: pointer
}

.ant-picker .ant-picker-clear {
  left: 5px
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth
}

html,body,#root {
  height: 100%;
  min-height: 100%;
  min-width: 320px;
  font-size: 14px;
  font-family: Nunito;
  line-height: 1.38;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -moz-tap-highlight-color: transparent
}

body.noscroll {
  overflow: hidden
}

html,body,a {
  text-decoration: none
}

a,button {
  font-family: Nunito;
  cursor: pointer;
  text-decoration: inherit;
  color: #fff;
  background: inherit
}

button {
  cursor: pointer;
  box-shadow: none;
  background: transparent;
  border: none
}

button:active {
  transform: scale(.97)
}

button:disabled {
  cursor: not-allowed;
  background-color: var(--black-80);
  color: grey;
}

button:disabled:active {
  animation-name: click-animation;
  animation-duration: .15s;
  animation-iteration-count: 1;
  animation-timing-function: linear
}

textarea,input {
  font-size: 14px
}

ul {
  list-style-type: none
}

h1,h2,h3 {
  font-weight: 700
}

h4,h5,h6 {
  font-weight: 500
}

h1 {
  font-size: var(--fSize56);
  line-height: var(--64px)
}

@media screen and (max-width: 768px) {
  h1 {
      font-size:var(--fSize32);
      line-height: var(--40px)
  }
}

@media screen and (max-width: 480px) {
  h1 {
      font-size:var(--fSize20);
      line-height: var(--28px)
  }
}

h2 {
  font-size: var(--fSize32);
  line-height: var(--40px)
}

@media screen and (max-width: 768px) {
  h2 {
      font-size:var(--fSize24);
      line-height: var(--32px)
  }
}

@media screen and (max-width: 480px) {
  h2 {
      font-size:var(--fSize18)
  }
}

h3 {
  font-size: var(--fSize24);
  line-height: var(--32px)
}

h4 {
  font-size: var(--fSize18)
}

h5 {
  font-size: var(--fSize16)
}

h6 {
  font-size: var(--fSize14)
}

#root {
  height: 100%;
  min-height: 100%
}

#root {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

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

.content-padding {
  padding: 1.14rem var(--content-padding) var(--content-padding) var(--content-padding)
}

.mb-40 {
  margin-bottom: 40px
}

.capitalize {
  text-transform: capitalize
}

.hideScroll {
  -ms-overflow-style: none;
  scrollbar-width: none
}

.hideScroll::-webkit-scrollbar {
  display: none
}

.page-offset {
  padding: 0 var(--32px)
}

@media screen and (max-width: 600px) {
  .page-offset {
      padding:0 var(--24px)
  }
}

.hide-elements {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: -1
}

.section-offset {
  margin-top: 100px
}

@media screen and (max-width: 600px) {
  .section-offset {
      margin-top:80px
  }
}

.loader-box {
  position: relative
}

.text-center {
  text-align: center
}

[class*=-image-ibg] {
  position: relative
}

[class*=-image-ibg] img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover
}

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

input[type=number] {
  -moz-appearance: textfield
}

:root {
  --white: #ffffff;
  --white-10: #f0f0f0;
  --black: #141314;
  --black-0: #000000;
  --black-5: #f3f3f3;
  --black-10: #e7e7e8;
  --black-20: #d0d0d0;
  --black-40: #a1a1a1;
  --black-60: #727272;
  --black-80: #434243;
  --black-100: #1b1b1d;
  --primary: #1d4ed8;
  --primary-20: #9ab4fc;
  --primary-40: #8caafd;
  --primary-60: #7498fa;
  --primary-80: #6189f8;
  --primary-disabled: #91a1ce;
  --primary-hover: #0c2b81;
  --addition-grey: #f3f4f8;
  --addition-pink: #f2e5f5;
  --addition-blue: #e1e3fe;
  --addition-purple: #f1e8fe;
  --elements-red-60: #fbc7d5;
  --elements-red-80: #f597b2;
  --elements-red-100: #ca6683;
  --elements-green-60: #cafffd;
  --elements-green-80: #97f4f1;
  --elements-green-100: #31bdb8;
  --system-green: #30ac63;
  --system-red: #cb6583;
  --red-disabled: hsl(340, 35%, 73%);
  --system-aqua: #29c2bb;
  --aqua-disabled: hsl(175, 35%, 73%);
  --system-error: #ea3c24;
  --system-yellow: #ffbb36
}

:root,:after,:before {
  --fSize56: 4rem;
  --fSize48: 3.43rem;
  --fSize42: 3rem;
  --fSize32: 2.28rem;
  --fSize31: 2.214rem;
  --fSize30: 2.14rem;
  --fSize26: 1.85rem;
  --fSize28: 2rem;
  --fSize24: 1.71rem;
  --fSize20: 1.42rem;
  --fSize18: 1.28rem;
  --fSize17: 1.21rem;
  --fSize16: 1.14rem;
  --fSize15: 1.07rem;
  --fSize14: 1rem;
  --fSize13: .92rem;
  --fSize12: .85rem;
  --fSize11: .78rem;
  --fSize10: .71rem;
  --fSize8: .57rem;
  --fSize6: .43rem;
  --mobile: 768px;
  --content-padding: 2.28rem;
  --button-font-sm: var(--fSize10);
  --button-font-md: var(--fSize12);
  --button-font-lg: var(--fSize17);
  --button-size-sm: .71rem .85rem;
  --button-size-md: .92rem 1.14rem;
  --button-size-lg: 1.21rem 2.85rem;
  --top-line: inset 0px 1px 0px #e6e6e6;
  --bottom-line: inset 0px -1px 0px #e6e6e6;
  --right-line: inset -1px 0 0px #ededf0;
  --light-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .08);
  --dark-shadow: 0 1px 6px rgba(0, 0, 0, .09), 0 2px 32px rgba(0, 0, 0, .15);
  --modal-width-sm: 334px;
  --modal-width-528: 528px;
  --modal-width-md: 744px;
  --modal-width-lg: 942px;
  --modal-width-xlg: 1184px;
  --text-max-width: 175px;
  --8px: .571rem;
  --12px: .85rem;
  --16px: 1.143rem;
  --20px: 1.428rem;
  --22px: 1.57rem;
  --24px: 1.714rem;
  --28px: 2rem;
  --32px: 2.286rem;
  --40px: 2.86rem;
  --60px: 4.28rem;
  --64px: 4.57rem;
  --80px: 5.71rem;
  --transition: all .3s ease
}

.mt-24 {
  margin-top: 24px
}

@media screen and (max-width: 768px) {
  .logoSocks {
      display:none
  }
}

@keyframes skeleton {
  0% {
      background-position: -200px 100%
  }

  to {
      background-position: calc(100% + 200px) 100%
  }
}

.content-loading *,.interface-text-loading * {
  color: transparent!important;
  border-color: transparent!important;
  box-shadow: none!important;
  text-shadow: none;
  pointer-events: none
}

.content-loading :hover,.interface-text-loading :hover {
  color: transparent
}

.content-loading * .Button,.interface-text-loading * .Button {
  background: #e3e3e5 linear-gradient(90deg,transparent,rgba(101,30,238,.08),transparent) no-repeat
}

.interface-text-loading .HeaderAuth-link {
  width: 208px;
  background: #e3e3e5 linear-gradient(90deg,transparent,rgba(101,30,238,.08),transparent) no-repeat;
  background-size: 200px 100%;
  animation: 2.5s infinite skeleton;
  opacity: 1;
  display: inline-block;
  border-radius: 4px
}

.interface-text-loading .HeaderAuth-link button {
  background: none
}

@media screen and (max-width: 1024px) {
  .interface-text-loading .HeaderAuth-link {
      width:40px
  }
}

@media screen and (max-width: 480px) {
  .interface-text-loading .HeaderAuth-link {
      width:20px;
      height: 20px
  }
}

.content-loading .HomeHero-subtitle {
  background: #e3e3e5 linear-gradient(90deg,transparent,rgba(101,30,238,.08),transparent) no-repeat;
  background-size: 200px 100%;
  animation: 2.5s infinite skeleton;
  opacity: 1;
  display: inline-block;
  border-radius: 4px
}

.content-loading .HomeHero-image {
  width: 100%;
  height: 70vh;
  margin: 20px 0
}

.content-loading .HomeHero-image:before {
  opacity: 1
}

.content-loading .HeaderMenu-item,.content-loading .Header-logo a {
  background: #e3e3e5 linear-gradient(90deg,transparent,rgba(101,30,238,.08),transparent) no-repeat;
  background-size: 200px 100%;
  animation: 2.5s infinite skeleton;
  opacity: 1;
  display: inline-block;
  border-radius: 4px
}

.content-loading .Header-logo a * {
  fill: transparent
}

.content-loading .MenuIcon {
  background: #e3e3e5 linear-gradient(90deg,transparent,rgba(101,30,238,.08),transparent) no-repeat;
  background-size: 200px 100%;
  animation: 2.5s infinite skeleton;
  opacity: 1;
  border-radius: 4px
}

.content-loading .MenuIcon:after,.content-loading .MenuIcon:before,.content-loading .MenuIcon span {
  display: none
}

.HomeHero-image {
  position: relative;
  height: auto
}

.HomeHero-image:before {
  content: "";
  background: #e3e3e5 linear-gradient(90deg,transparent,rgba(101,30,238,.08),transparent) no-repeat;
  background-size: 200px 100%;
  animation: 2.5s infinite skeleton;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border-radius: 4px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: .2s;
  opacity: 0
}

.HomeHero-subtitle,.HeaderAuth-link {
  transition: .2s
}

.HomeHero-buttons {
  display: flex;
  gap: 8px;
  margin-top: 32px
}

@media screen and (max-width: 576px) {
  .HomeHero-buttons {
      flex-direction:column;
      gap: 16px
  }
}

.HomeHero-buttons .free-proxy-btn {
  color: #a2a7c1;
  border-color: #a2a7c1
}

button.HeaderAuth-link {
  outline: none;
  box-shadow: none;
  background-color: inherit;
  border: none;
  cursor: pointer
}

button.HeaderAuth-link:active {
  border-style: outset;
  outline: none;
  box-shadow: none;
  border: none;
  cursor: pointer;
  transform: none;
  background-color: inherit
}

.HeaderAuth-link {
  display: flex;
  flex-direction: row;
  gap: 8px
}

.Toastify__progress-bar--success {
  background-color: #147129!important
}

.Toastify {
  --toastify-icon-color-success: #147129 !important
}

.Toastify .Toastify__toast {
  background: #EAFDEE
}

.Toastify__toast-body {
  font-family: Nunito!important;
  color: #147129
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, .7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient( to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55 );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: .2
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0,0,var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left)
}

.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translate(-50%)
}

.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right)
}

.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left)
}

.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translate(-50%)
}

.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right)
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
      width:100vw;
      padding: 0;
      left: env(safe-area-inset-left);
      margin: 0
  }

  .Toastify__toast-container--top-left,.Toastify__toast-container--top-center,.Toastify__toast-container--top-right {
      top: env(safe-area-inset-top);
      transform: translate(0)
  }

  .Toastify__toast-container--bottom-left,.Toastify__toast-container--bottom-center,.Toastify__toast-container--bottom-right {
      bottom: env(safe-area-inset-bottom);
      transform: translate(0)
  }

  .Toastify__toast-container--rtl {
      right: env(safe-area-inset-right);
      left: initial
  }
}

.Toastify__toast {
  --y: 0;
  position: relative;
  -ms-touch-action: none;
  touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0 4px 12px #0000001a;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  z-index: 0;
  overflow: hidden
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0,var(--y),0) scale(var(--s));
  transition: transform .3s
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity .1s
}

.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible
}

.Toastify__toast--stacked[data-collapsed=true]:not(:last-child)>* {
  opacity: 0
}

.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%
}

.Toastify__toast--stacked[data-pos=top] {
  top: 0
}

.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0
}

.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top
}

.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom
}

.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1
}

.Toastify__toast--rtl {
  direction: rtl
}

.Toastify__toast--close-on-click {
  cursor: pointer
}

.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center
}

.Toastify__toast-body>div:last-child {
  word-break: break-word;
  -ms-flex: 1;
  flex: 1
}

.Toastify__toast-icon {
  -webkit-margin-end: 10px;
  margin-inline-end:10px;width: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  display: -ms-flexbox;
  display: flex
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: .5s
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: .3s
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
      margin-bottom:0;
      border-radius: 0
  }
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark)
}

.Toastify__toast-theme--light,.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light)
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info)
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success)
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning)
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error)
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light)
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark)
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info)
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success)
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning)
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error)
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent)
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: .7;
  transition: .3s ease;
  -ms-flex-item-align: start;
  align-self: flex-start;
  z-index: 1
}

.Toastify__close-button--light {
  color: #000;
  opacity: .3
}

.Toastify__close-button>svg {
  fill: currentColor;
  height: 16px;
  width: 14px
}

.Toastify__close-button:hover,.Toastify__close-button:focus {
  opacity: 1
}

@keyframes Toastify__trackProgress {
  0% {
      transform: scaleX(1)
  }

  to {
      transform: scaleX(0)
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: .7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards
}

.Toastify__progress-bar--controlled {
  transition: transform .2s
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius)
}

.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin .65s linear infinite
}

@keyframes Toastify__bounceInRight {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(3000px,0,0)
  }

  60% {
      opacity: 1;
      transform: translate3d(-25px,0,0)
  }

  75% {
      transform: translate3d(10px,0,0)
  }

  90% {
      transform: translate3d(-5px,0,0)
  }

  to {
      transform: none
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
      opacity: 1;
      transform: translate3d(-20px,var(--y),0)
  }

  to {
      opacity: 0;
      transform: translate3d(2000px,var(--y),0)
  }
}

@keyframes Toastify__bounceInLeft {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(-3000px,0,0)
  }

  60% {
      opacity: 1;
      transform: translate3d(25px,0,0)
  }

  75% {
      transform: translate3d(-10px,0,0)
  }

  90% {
      transform: translate3d(5px,0,0)
  }

  to {
      transform: none
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
      opacity: 1;
      transform: translate3d(20px,var(--y),0)
  }

  to {
      opacity: 0;
      transform: translate3d(-2000px,var(--y),0)
  }
}

@keyframes Toastify__bounceInUp {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(0,3000px,0)
  }

  60% {
      opacity: 1;
      transform: translate3d(0,-20px,0)
  }

  75% {
      transform: translate3d(0,10px,0)
  }

  90% {
      transform: translate3d(0,-5px,0)
  }

  to {
      transform: translateZ(0)
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
      transform: translate3d(0,calc(var(--y) - 10px),0)
  }

  40%,45% {
      opacity: 1;
      transform: translate3d(0,calc(var(--y) + 20px),0)
  }

  to {
      opacity: 0;
      transform: translate3d(0,-2000px,0)
  }
}

@keyframes Toastify__bounceInDown {
  0%,60%,75%,90%,to {
      animation-timing-function: cubic-bezier(.215,.61,.355,1)
  }

  0% {
      opacity: 0;
      transform: translate3d(0,-3000px,0)
  }

  60% {
      opacity: 1;
      transform: translate3d(0,25px,0)
  }

  75% {
      transform: translate3d(0,-10px,0)
  }

  90% {
      transform: translate3d(0,5px,0)
  }

  to {
      transform: none
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
      transform: translate3d(0,calc(var(--y) - 10px),0)
  }

  40%,45% {
      opacity: 1;
      transform: translate3d(0,calc(var(--y) + 20px),0)
  }

  to {
      opacity: 0;
      transform: translate3d(0,2000px,0)
  }
}

.Toastify__bounce-enter--top-left,.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft
}

.Toastify__bounce-enter--top-right,.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp
}

.Toastify__bounce-exit--top-left,.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft
}

.Toastify__bounce-exit--top-right,.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown
}

@keyframes Toastify__zoomIn {
  0% {
      opacity: 0;
      transform: scale3d(.3,.3,.3)
  }

  50% {
      opacity: 1
  }
}

@keyframes Toastify__zoomOut {
  0% {
      opacity: 1
  }

  50% {
      opacity: 0;
      transform: translate3d(0,var(--y),0) scale3d(.3,.3,.3)
  }

  to {
      opacity: 0
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut
}

@keyframes Toastify__flipIn {
  0% {
      transform: perspective(400px) rotateX(90deg);
      animation-timing-function: ease-in;
      opacity: 0
  }

  40% {
      transform: perspective(400px) rotateX(-20deg);
      animation-timing-function: ease-in
  }

  60% {
      transform: perspective(400px) rotateX(10deg);
      opacity: 1
  }

  80% {
      transform: perspective(400px) rotateX(-5deg)
  }

  to {
      transform: perspective(400px)
  }
}

@keyframes Toastify__flipOut {
  0% {
      transform: translate3d(0,var(--y),0) perspective(400px)
  }

  30% {
      transform: translate3d(0,var(--y),0) perspective(400px) rotateX(-20deg);
      opacity: 1
  }

  to {
      transform: translate3d(0,var(--y),0) perspective(400px) rotateX(90deg);
      opacity: 0
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut
}

@keyframes Toastify__slideInRight {
  0% {
      transform: translate3d(110%,0,0);
      visibility: visible
  }

  to {
      transform: translate3d(0,var(--y),0)
  }
}

@keyframes Toastify__slideInLeft {
  0% {
      transform: translate3d(-110%,0,0);
      visibility: visible
  }

  to {
      transform: translate3d(0,var(--y),0)
  }
}

@keyframes Toastify__slideInUp {
  0% {
      transform: translate3d(0,110%,0);
      visibility: visible
  }

  to {
      transform: translate3d(0,var(--y),0)
  }
}

@keyframes Toastify__slideInDown {
  0% {
      transform: translate3d(0,-110%,0);
      visibility: visible
  }

  to {
      transform: translate3d(0,var(--y),0)
  }
}

@keyframes Toastify__slideOutRight {
  0% {
      transform: translate3d(0,var(--y),0)
  }

  to {
      visibility: hidden;
      transform: translate3d(110%,var(--y),0)
  }
}

@keyframes Toastify__slideOutLeft {
  0% {
      transform: translate3d(0,var(--y),0)
  }

  to {
      visibility: hidden;
      transform: translate3d(-110%,var(--y),0)
  }
}

@keyframes Toastify__slideOutDown {
  0% {
      transform: translate3d(0,var(--y),0)
  }

  to {
      visibility: hidden;
      transform: translate3d(0,500px,0)
  }
}

@keyframes Toastify__slideOutUp {
  0% {
      transform: translate3d(0,var(--y),0)
  }

  to {
      visibility: hidden;
      transform: translate3d(0,-500px,0)
  }
}

.Toastify__slide-enter--top-left,.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft
}

.Toastify__slide-enter--top-right,.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp
}

.Toastify__slide-exit--top-left,.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: .3s
}

.Toastify__slide-exit--top-right,.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: .3s
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: .3s
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: .3s
}

@keyframes Toastify__spin {
  0% {
      transform: rotate(0)
  }

  to {
      transform: rotate(360deg)
  }
}

@import url('https://fonts.googleapis.com/css?family=Saira');

.sale {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: url("../images/banner.jpg") no-repeat;
  background-size: cover;
  padding: 30px 20px 30px;
  border-radius: 20px;
  border-color: transparent;
}
.sale .container{
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sale1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: url("../images/banner2.jpg") no-repeat;
  background-size: cover;
  padding: 30px 20px 30px;
  border-radius: 20px;
  border-color: transparent;
}
.sale1 .container{
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sale__logo{
  max-width: 150px;
}
.sale__logo img{
  max-width: 150px;
}
.sale__inner {
  border: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
.sale__text-wrapper{
  display: flex;
  align-items: center;
  gap: 20px;
  color: #1e54c1;
  /* flex-direction: column; */
}
.sale__text{
  
  font-size: var(--28px);
}
.sale__number{
  font-family: 'Saira', sans-serif;
  font-size: 50px;
    font-weight: 800;
    color: #256dff;
    align-self: center;
    padding-bottom: 10px;
}
.sale__inner .sale__btn{
  font-size: var(--22px);
  color: #256dff;
  border-color: #256dff;
}
.sale__inner .sale__btn:hover{
  color: #fff;
  background-color: #256dff;
  border-color: #256dff;
}
@media (max-width: 1200px) {
  .sale__text-wrapper{
  
    gap: 0; 
    align-items: center;
    flex-direction: column;
  }
}
@media (max-width: 1000px) {
  .sale__text {
    font-size: var(--16px);
}
.sale__inner .sale__btn {
  font-size: var(--18px);
  color: #fff;
  border-color: #fff;
}
}

@media (max-width: 768px) {
  .sale {
      padding-top:var(--32px)
  }
  .sale__inner {
    flex-direction: column;
    gap: 16px;
  }
  .sale__text{
    font-size: var(--16px);
    text-align: center;
  }
  .sale__inner .sale__btn{
    font-size: var(--16);
  }
  .sale .container {
    flex-direction: column;
}
}

.slider-container {
  width: 100vw;
  max-width: 100%;
  position: relative;
  gap: 10px;
  display: flex;
  flex-direction: column;
}

.slide-wrapper {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.slide {
  width: calc(100% - 100px);
  height: 100%;
  background-color: #1f487e;
  display: grid;
  place-items: center;
  user-select: none;
  border-radius: 5px;
  overflow: hidden;
  font-size: 2rem;
  border: 1px solid white;
  position: absolute;
}
.slide img{
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
  }
  
  .slider-btn-control {
    display: flex;
    justify-content: center;
    border-radius: 10px;
    gap: 5px;
    position: relative;
    z-index: 100;
    font-size: 20px;
  }
  
  .btn {
    background-color: #1f487e;
    padding: 10px 30px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    border: 1px solid white;
  }
  
  @media (max-width: 768px) {
    .slide-wrapper {
      height: 237px;
  }
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
  }

  .telegram__icon svg{
    max-width: 15px;
    height: 15px;
   }

   .sale-popup__backdrop {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
  }
  .sale-popup__backdrop.active {
    opacity: 1; pointer-events: auto;
  }
  .sale-popup {
    background: #e53935;
    color: #fff;
    border-radius: 16px;
    padding: 32px 24px 24px 24px;
    min-width: 320px; max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    text-align: center;
    position: relative;
    transform: translateY(40px) scale(0.98);
    opacity: 0;
    transition: all 0.3s cubic-bezier(.4,2,.6,1);
  }
  .sale-popup__backdrop.active .sale-popup {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .sale-popup__close {
    position: absolute; top: 12px; right: 12px;
    background: none; border: none; color: #fff;
    font-size: 2rem; cursor: pointer; line-height: 1;
    opacity: 0.7; transition: opacity 0.2s;
  }
  .sale-popup__close:hover { opacity: 1; }
  .sale-popup__title {
    font-size: 1.4rem; font-weight: bold; margin: 12px 0 8px 0;
  }
  .sale-popup__desc {
    margin-bottom: 18px; font-size: 1rem;
  }
  .sale-popup__support-link {
    display: inline-block;
    background: #fff; color: #e53935;
    border-radius: 8px; padding: 10px 24px;
    font-weight: bold; text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }
  .sale-popup__support-link:hover {
    background: #ffeaea; color: #b71c1c;
  }
  @media (max-width: 480px) {
    .sale-popup { padding: 18px 6vw 18px 6vw; min-width: 0; }
  }
  

  .HoverTabs2 {
    display: flex;
  }
  
  @media screen and (max-width: 1300px) {
    .HoverTabs2 {
        gap:16px
    }
  }
  
  @media screen and (max-width: 1024px) {

  }
  
  @media screen and (max-width: 768px) {

  }
  
  .HoverTabs2-items {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
  }
  
  @media screen and (max-width: 768px) {
    .HoverTabs2-items {
        gap:8px
    }
  }
  
  @media screen and (min-width: 768px) {
    .HoverTabs2-items {

    }
  
    .HoverTabs2-items.in-view {
        opacity: 1;
        transform: translate(0)
    }
  }
  
  .HoverTabs2-item {
    position: relative;
    padding: 24px 40px;
    border-radius: 20px;
    border: 1px solid var(--white);
    cursor: pointer;
    height: fit-content;
  }
  .HoverTabs2-item img{
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: 12px;
    border-radius: 10px;
  }
  .HoverTabs2-item svg{
    position: absolute;
    right: 50px;
    top: 30px;  
  }
  .HoverTabs2-item.active svg{
    fill: #000;
  }

  
  @media screen and (max-width: 480px) {
    .HoverTabs2-item {
        padding:16px 24px
    }
    .HoverTabs2-item svg {
      right: 21px;
      top: 27px;
      width: 10px;
      height: 10px;
  }
  }
  
  .HoverTabs2-item.active {
    background: var(--addition-purple)
  }
  
  .HoverTabs2-item.active .HoverTabs2-item-title {
    color: var(--black-100);
    padding-bottom: 8px
  }
  
  .HoverTabs2-item-title {
    font-size: var(--fSize18);
    line-height: var(--fSize32);
    color: var(--black-10);
    font-weight: 500
  }
  
  @media screen and (max-width: 768px) {
    .HoverTabs2-item-title {
        font-size:var(--fSize16);
        line-height: var(--fSize28)
    }
  }
  
  .HoverTabs2-item-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: var(--fSize16);
    line-height: var(--fSize24);
    color: var(--black-80);
    font-weight: 400;
    transition: all .5s cubic-bezier(.215,.61,.355,1);
  }
  .HoverTabs2-item-text > a{
    display: block;
    max-width: 300px;
    margin-bottom: var(--16px);
  }
  .HoverTabs2-images {
    position: relative;
    height: 566px
  }
  
  @media screen and (max-width: 1024px) {
    .HoverTabs2-images {
        height:328px
    }
  }
  
  @media screen and (max-width: 768px) {
    .HoverTabs2-images {
        display:none;
       
        order: -1;
        height: 500px 
    }
    .HoverTabs2-mobile-img{
      display: none;
    }
    .HoverTabs2-mobile-img.active{
      display: none;
    }
  }
  
  @media screen and (max-width: 480px) {
    .HoverTabs2-images {
        height:328px
    }
  }
  
  @media screen and (min-width: 768px) {
    .HoverTabs2-images {
        /* transition:var(--transition);
        opacity: 0;
        transform: translate(100%) */
    }
  
    .HoverTabs2-images.in-view {
        opacity: 1;
        transform: translate(0)
    }
  }
  
  .HoverTabs2-img {
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 4px 10px #7a889826;
    border-radius: 20px;
    position: absolute;
    inset: 0;
    z-index: -1
  }
  
  @media screen and (max-width: 768px) {
    .HoverTabs2-img {
        display:none
    }
  }
  
  .HoverTabs2-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  
  .HoverTabs2-img.active {
    z-index: 1
  }
  
  .HoverTabs2-mobile-img {
    position: relative;
    overflow: hidden;
    background: var(--white);
    border-radius: 20px;
    width: 100%;
    height: 0;
    opacity: 0
  }
  
  @media screen and (min-width: 768px) {
    .HoverTabs2-mobile-img {
        display:none
    }
  }
  
  .HoverTabs2-mobile-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  
  .HoverTabs2-mobile-img.active {
    opacity: 1;
    height: 300px
  }
  
  @media screen and (max-width: 768px) {
    .HoverTabs2-mobile-img.active {
        height:400px
    }
  }
  
  @media screen and (max-width: 480px) {
    .HoverTabs2-mobile-img.active {
        height:300px
    }
  }

  .HoverTabs2-item-text > a.HoverTabs2__btn{
    padding: 1.2rem 2.3rem;
  }