:root {
  --color-secondary: #0b1220;
  --color-text2: #9fb0c8;
  --color-gray: #9fb0c8;
  --color-gray-primary: #9fb0c8;
  --color-gray-secondary: #070b14;
  --color-grey-dark: #152033;
  --color-gray-dark: #152033;
  --color-grey-light: #9fb0c8;
  --color-green: #3cf6ff;
  --color-green-primary: #7af8ff;
  --color-gray-dark-2: #0b1220;
  --color-gold: #c2a059;
  --color-gold-primary: #e5c158;
  --color-gold-secondary: #d2b47a;
  --typography-primary: #e8f4ff;
  --typography-secondary: #9fb0c8;
  --typography-gold-primary: #e5c158;
  --color-blue: #3cf6ff;
  --color-malibu: #67e8f9;
  --color-white-light: #e8f4ff;
  --color-dark-text: #070b14;
  --color-gray-gradient: linear-gradient(331deg, #1a2c4d 1.01%, #0b1220 84.59%);
  --ui-grey-primary-gradient: linear-gradient(360deg, #152033, #0b1220);
  --green-primary-gradient: linear-gradient(180deg, #5ef2ff, #2aa8ff);
  --green-secondary-gradient: linear-gradient(180deg, #3cf6ff, #1677c7);
  --ui-green-primary-gradient: linear-gradient(180deg, #5ef2ff, #2aa8ff);
  --ui-green-secondary-gradient: linear-gradient(180deg, #3cf6ff, #1677c7);
}

html {
  background: #05070d;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #e8f4ff;
  overflow-x: hidden;
  max-width: 100%;
  background-color: #05070d;
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(60, 246, 255, 0.16) 0%, transparent 58%),
    radial-gradient(820px 380px at 92% 0%, rgba(124, 92, 255, 0.18) 0%, transparent 62%),
    linear-gradient(180deg, #081018 0%, #05070d 52%, #03050a 100%);
  background-attachment: fixed;
}

body::-webkit-scrollbar-track {
  background: #05070d;
}

body::-webkit-scrollbar-thumb {
  background: #1d3a55;
}

#app,
.layout {
  overflow-x: hidden;
  max-width: 100%;
}

.header-top-nav {
  background: rgba(7, 11, 20, 0.92);
  border-bottom: 1px solid rgba(60, 246, 255, 0.08);
  box-shadow: 0 1px 0 rgba(124, 92, 255, 0.08);
}

.login {
  background: linear-gradient(180deg, #5ef2ff 0%, #2aa8ff 100%) !important;
  color: #071018 !important;
  border-radius: 14px !important;
  text-shadow: none;
  letter-spacing: 0.04em;
  font-weight: 800;
  box-shadow: 0 0 18px rgba(60, 246, 255, 0.28);
}

.login::before {
  background: linear-gradient(180deg, #b8fbff, #7c5cff) !important;
  border-radius: 14px !important;
}

.login:hover {
  filter: brightness(1.08);
  color: #05070d !important;
}

.nav-main {
  gap: 28px;
}

.nav-main__elem {
  gap: 4px;
}

.nav-main__elem,
.nav-main__elem:hover,
.nav-main__elem:focus,
.nav-main__elem:focus-visible,
.nav-main__elem:active,
.nav-main__elem.router-link-active,
.nav-main__elem.router-link-exact-active {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.nav-main__elem:hover,
.nav-main__elem:focus,
.nav-main__elem:focus-visible {
  color: #3cf6ff !important;
}

.nav-main__elem.router-link-exact-active {
  color: #ffffff !important;
}

.nav-main__elem::before,
.nav-main__elem::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

.nav-main__elem.router-link-exact-active::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 14px);
  bottom: auto;
  height: 2px;
  background: #ffffff !important;
  border-radius: 1px;
}

.color-gray,
.color--text3 {
  color: #9fb0c8 !important;
}

.container {
  background: rgba(11, 18, 32, 0.78);
  border-radius: 28px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

.seo-intro,
.seo-about {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.seo-about {
  margin-top: 16px !important;
}

.global-intro__main {
  display: none !important;
  height: 0 !important;
}

.home-promo-extra {
  display: none;
}

.carousel-item_freecase {
  background-color: #0a2a32 !important;
  background-image:
    linear-gradient(90deg, rgba(8, 28, 26, 0.88) 0%, rgba(8, 28, 26, 0.35) 40%, transparent 68%),
    url(/assets/main/dailybonus.png) !important;
  background-repeat: no-repeat !important;
  background-position: 0 0, right center !important;
  background-size: 100% 100%, auto 100% !important;
}

.carousel-item_freecase:after {
  display: none;
}

.carousel-item_freecase .carousel-item__title,
.carousel-item_freecase .carousel-item__text,
.carousel-item_freecase .carousel-item__btn {
  position: relative;
  z-index: 2;
}

@media (min-width: 1600px) {
  .home-promo-extra {
    display: block !important;
  }

  .global-intro__grid {
    flex-direction: column !important;
    width: 100%;
  }

  .global-intro__secondary {
    flex-direction: row !important;
    width: 100% !important;
    flex: none !important;
  }

  .global-intro__secondary-item {
    flex: 1 1 0 !important;
    height: 150px !important;
    min-width: 0;
  }
}

.footer__main {
  background-color: rgba(7, 11, 20, 0.95);
  border: 1px solid rgba(60, 246, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.4);
}

.footer-main__elem:hover {
  color: #3cf6ff;
}

.cookie-consent {
  background: #070b14 !important;
  border: 1px solid rgba(60, 246, 255, 0.16) !important;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.55) !important;
}

.userbar__settings,
.userbar__settings:hover,
.userbar__settings:focus,
.userbar__settings:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #9fb0c8;
}

.userbar__settings:hover,
.userbar__settings:focus {
  color: #3cf6ff;
}

.userbar__balance {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.userbar__balance-amount {
  color: #ffffff !important;
  font-size: 16px;
  line-height: 20px;
}

.userbar__OptionsList--empty,
.userbar__auth .userbar__OptionsList:has(.newsList_empty) {
  min-height: 72px;
}

.newsList_empty {
  color: #9fb0c8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 18px 12px;
}

.userbar__OptionsList .newsList_list:not(:has(.newsItem_item))::before {
  content: "Оповещений нет";
  display: block;
  color: #9fb0c8;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  padding: 18px 12px;
}

.button._with-arrow,
.home__btn_color-info,
.item__status__controller .item__statuses .status[datatype=sellItem],
.item__status__controller .item__statuses_left .status[datatype=withdraw] {
  background: linear-gradient(180deg, #5ef2ff 0%, #2aa8ff 100%);
  color: #071018;
}

.item__status__controller .item__statuses .status[datatype=replaceItem] {
  background: linear-gradient(180deg, #b07cff 0%, #7c5cff 100%);
}

.carousel-item {
  border: 1px solid rgba(60, 246, 255, 0.1);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.28);
}

.carousel-item_code {
  background: linear-gradient(90deg, #163a78, #0d2458) !important;
}

.carousel-item_dailybonus {
  background: linear-gradient(90deg, #4b1d7a, #2a0f4d) !important;
}

.carousel-item_dailybonus-video:after {
  display: none;
}

.carousel-item_dailybonus-video:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 7, 13, 0.72) 0%, rgba(5, 7, 13, 0.12) 42%, transparent 68%);
}

.daily-bonus-video {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  height: 100%;
  width: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right center;
  z-index: 0;
  pointer-events: none;
  background: transparent;
}

.daily-bonus-media--mobile {
  display: none;
}

@media (max-width: 1023px) {
  .daily-bonus-media--desktop {
    display: none !important;
  }

  .daily-bonus-media--mobile {
    display: block;
  }

  .carousel-item_dailybonus-video {
    background-image: url(/assets/event/daily-bonus.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
  }
}

.carousel-item_dailybonus-video .carousel-item__title,
.carousel-item_dailybonus-video .carousel-item__text,
.carousel-item_dailybonus-video .carousel-item__btn {
  position: relative;
  z-index: 2;
}

.carousel-item_dailybonus-video .carousel-item__title,
.carousel-item_dailybonus-video .carousel-item__text {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

.confirm-sell-modal .modal-title-wrap {
  padding-right: 72px;
}

.confirm-sell-modal .modal-title {
  display: block;
  font-size: 18px;
  line-height: 1.35;
  max-width: 100%;
}

.modal .modal-close-btn {
  z-index: 8;
}

.box__card:hover .box__price {
  box-shadow: 0 0 10px #3cf6ff;
}

.ListCategoryFilter__elem[aria-checked="true"],
.ListCategoryFilter__elem:hover {
  color: #3cf6ff;
}

.control.color--gray-dark,
.controls.color--gray-dark.inputWrapper,
.controls.color--dark.inputWrapper {
  overflow: visible;
  background: #10192c !important;
  color: #f2f8ff !important;
  border: none !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 2px 8px rgba(0, 0, 0, 0.35),
    0 8px 18px rgba(0, 0, 0, 0.42);
}

.control.color--gray-dark:focus-within,
.controls.color--gray-dark.inputWrapper:focus-within,
.controls.color--dark.inputWrapper:focus-within {
  border: none !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 2px 8px rgba(0, 0, 0, 0.28),
    0 10px 22px rgba(0, 0, 0, 0.48);
}

.exchange__input .input__control input,
.control.color--gray-dark input,
.inputWrapper .inputAmount {
  color: #f4fbff !important;
  -webkit-text-fill-color: #f4fbff;
  caret-color: #3cf6ff;
  border: none !important;
  outline: none !important;
  box-shadow: none;
  font-size: 20px !important;
  line-height: 24px;
}

.exchange__input .input__control input::placeholder,
.inputWrapper .inputAmount::placeholder {
  color: #8aa3bd !important;
  -webkit-text-fill-color: #8aa3bd;
  opacity: 1;
  font-size: 20px;
}

.exchange__input .input__rate,
.exchange__input .input__rate .text {
  color: #c5d6ea !important;
}

.exchange__input.mindep-flash {
  box-shadow: 0 0 0 2px rgba(255, 92, 92, 0.7) !important;
}

.depositFinal__form .form__buttons .controls.color--gray-primary,
.depositFinal__form .form__buttons .controls.color--gray-primary-lite {
  border: none !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 12px rgba(0, 0, 0, 0.32);
}

.depositFinal__form .form__buttons .controls.color--gray-primary {
  color: #dce8f6;
  background: #1a2438;
}

.depositFinal__form .form__buttons .controls.color--gray-primary-lite {
  color: #ffffff;
  background: #28344c;
}

.form__submit .controls.color--blue-gradient {
  background: linear-gradient(180deg, #4eade6 0%, #1686e0 100%);
}

.form__submit .favorite__btn-text {
  font-size: 18px;
  line-height: 22px;
}

@keyframes dropFromTopVertical {
  0% {
    opacity: 0;
    transform: translateY(-48px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1023px) {
  .layout.layout--with-live .layout__lastDrop {
    position: sticky;
    top: 0;
    z-index: 12;
    background: #05070d;
    overflow: hidden !important;
  }

  .layout.layout--with-live .layout__lastDrop .drops__container {
    overflow: hidden !important;
  }
}

@media (min-width: 1024px) {
  :root {
    --live-sidebar-width: 176px;
  }

  .layout {
    overflow-x: hidden;
    max-width: 100%;
  }

  .layout.layout--with-live {
    padding-left: var(--live-sidebar-width);
  }

  .layout.layout--with-live .layout__lastDrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    z-index: 20;
    display: flex !important;
    flex-direction: column;
    grid-auto-flow: unset;
    width: var(--live-sidebar-width) !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 8px 12px !important;
    overflow: hidden !important;
    background: rgba(5, 7, 13, 0.96);
    border-right: 1px solid rgba(60, 246, 255, 0.1);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.28);
  }

  .layout.layout--with-live .layout__lastDrop:after {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 72px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 7, 13, 0) 0%, #05070d 100%);
  }

  .layout.layout--with-live .layout__lastDrop .switcher__container {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin-bottom: 10px;
  }

  .layout.layout--with-live .layout__lastDrop .switcher {
    grid-auto-flow: column;
    align-items: center;
    height: 40px;
    width: 100%;
    grid-gap: 8px;
  }

  .layout.layout--with-live .layout__lastDrop .switcher .switcher__button {
    width: 100%;
    height: 32px !important;
    min-height: 32px !important;
    border-radius: 14px;
  }

  .layout.layout--with-live .layout__lastDrop .drops__container {
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    white-space: normal;
    gap: 8px;
    min-height: 0;
  }

  .layout.layout--with-live .layout__lastDrop .drops__container .liveDrop__wrapper {
    width: 100% !important;
    height: 112px;
    margin-right: 0 !important;
    flex-shrink: 0;
  }

  .layout.layout--with-live .layout__lastDrop .liveDrop__wrapper.new-item {
    animation-name: dropFromTopVertical;
    transform-origin: center top;
  }
}

@media (min-width: 1440px) {
  :root {
    --live-sidebar-width: 196px;
  }

  .layout.layout--with-live .layout__lastDrop .drops__container .liveDrop__wrapper {
    height: 124px;
  }
}

@media (min-width: 1200px) {
  .mainUpgrade .upgradeTop {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 0;
  }

  .betContainer {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 540px;
    margin-right: 0 !important;
  }

  .betVisual {
    width: 100% !important;
    max-width: 540px;
    height: auto !important;
    aspect-ratio: 540 / 400;
    min-height: 240px;
    max-height: 400px;
  }

  .betVisual .selectedSkin {
    max-width: min(280px, 72%) !important;
  }

  .ellipseXs .ellipseUpgrade {
    width: min(260px, 58%) !important;
    height: auto !important;
  }

  .chanceContainer {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
  }

  .chanceCircle svg {
    width: clamp(220px, 22vw, 380px) !important;
    height: clamp(220px, 22vw, 380px) !important;
  }
}