.dark .br100 {
filter: brightness(100);
}
#modal_payment_credentials .ctimer-stop {
display: none;
}
#modal_payment_credentials .ctimer-stop.active {
display: flex;
}
.cursorp {
cursor: pointer;
}
.cursorno {
cursor: default !important;
}
.flexgap020 {
display: flex;
gap: 0 20px;
}
.width24 {
width: 24px !important;
}
.width100 {
width: 100% !important;
}
.leading-none.text-white.rtp{
margin-right: 5px;
}
.select2.select2-container {
width: 100%;
}
.swiper.sliderMain {
max-height: 278px;
}
.ctimer .sec { width: 20px; }
.__jivoDesktopButton,.__jivoMobileButton{display:none!important}
#log_phone,
#reg_phone,
#res_phone { display: none; }
#select2-reg_currency-results .select2-container--default .select2-results__option--selected:before {
background-image: url(/img/svg/rub.svg);
}
#event_message, #error_message { display: none; }
#event_message.active, #error_message.active { display: block; }
#play {
z-index: 9;
background: #000;
display: flex;
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 0;
border: none;
}
.w-full.card-slot .truncate {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.w-full.card-slot .truncate:first-child {
line-height: 14px;
}
.v-btn {
border: none;
padding: 0;
outline: 0;
border-radius: var(--b-radius);
background: 0 0;
font-family: inherit;
font-size: inherit;
font-weight: 600;
line-height: 16px;
color: inherit;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: .3s;
cursor: pointer;
position: relative;
z-index: 1;
overflow: hidden
}
.v-btn .btn-overlay {
transition: .2s;
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: inherit
}
.v-btn:disabled {
cursor: not-allowed
}
.v-btn-light-hover {
background: var(--bg_light_hover__100);
color: var(--color_secondary__100)
}
@media not all and (pointer: coarse) {
.v-btn-light-hover:hover {
color: var(--color_primary__100)
}
}
.v-btn-light-secondary {
background-color: var(--bg_secondary__100);
color: var(--color_secondary__100)
}
.v-btn-light-secondary.active {
background-color: var(--bg_light__100);
color: var(--color_primary__100);
opacity: 1
}
@media not all and (pointer: coarse) {
.v-btn-light-secondary:hover {
background-color: var(--bg_light__100);
color: var(--color_primary__100);
opacity: 1
}
}
.v-btn-size--42 {
padding: 1.2rem;
height: 42px
}
.v-btn-size--xs {
padding: .6rem 1rem;
font-size: 1.2rem;
height: 32px;
border-radius: var(--b-radius-sm)
}
.validation {
width: 100%
}
.v-input {
width: 100%;
transition: color .2s ease-in-out;
position: relative;
text-overflow: ellipsis;
display: flex;
flex-direction: column
}
.v-input__wrapper {
display: flex;
position: relative;
align-items: center;
background: var(--bg_secondary__100);
border-radius: var(--b-radius);
overflow: hidden
}
.v-input__border {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--b-radius);
border: 2px solid transparent;
transition: .2s
}
.v-input__element {
width: 100%;
color: var(--color_primary__100);
padding: 14.5px 12px;
font-weight: 600;
position: relative;
background: 0 0;
text-overflow: ellipsis;
z-index: 1;
transition: .2s;
height: 48px
}
.v-input__element:focus ~ .v-input__border, .v-input__element:hover ~ .v-input__border {
border-color: var(--bg_light__100)
}
.v-input__element::-moz-placeholder {
color: var(--color_secondary__100);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.v-input__element::placeholder {
color: var(--color_secondary__100);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.v-input__prefix {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: 2
}
.v-input__prefix-btn {
flex-shrink: 0
}
.v-input__suffix {
position: absolute;
right: 0;
top: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
height: 100%
}
.v-input__prefix.static {
position: relative;
display: flex;
align-items: center;
justify-content: center
}
.v-input__prefix-btn {
padding: 0;
width: 32px;
height: 32px;
border-radius: var(--b-radius-sm);
background: 0 0;
color: var(--color_secondary__100);
display: flex;
align-items: center;
justify-content: center;
transition: .2s
}
.v-input__prefix-btn:hover {
background: var(--bg_light__100)
}
.v-input__prefix-btn {
width: 40px;
height: 48px
}
.v-input__prefix-btn:hover {
background: 0 0
}
.v-select {
width: 100%
}
.v-select__wrapper {
position: relative
}
.v-select .validation {
height: 100%
}
.v-select__button {
width: 100%;
text-align: left;
justify-content: space-between;
align-items: center;
display: flex;
background: var(--bg_secondary__100);
border: 1px solid transparent;
border-radius: var(--b-radius);
padding: 1rem 1.2rem;
height: 48px;
color: var(--color_secondary__100);
font-weight: 600
}
.v-select__button .chevron {
margin-left: 8px
}
.v-select__button:active, .v-select__button:focus, .v-select__button:hover {
border-color: var(--bg_light__100)
}
.v-select.color-light .v-select__button {
background: var(--bg_light__100);
color: var(--color_secondary__100)
}
.v-select.sizex-44 .v-select__button {
padding: 0 1.2rem;
height: 44px
}
.app_main {
width: 100%;
transition: padding .3s;
margin-top: 6.8rem;
padding-bottom: 3.2rem;
padding-top: var(--padding)
}
@media screen and (min-width: 1350px) and (max-width: 1900px) {
.app_main {
padding-left: 6.4rem
}
}
@media screen and (max-width: 1349px) {
.app_main {
padding-left: 0 !important;
padding-right: 0 !important
}
}
@media screen and (max-width: 980px) {
.app_main {
margin-top: 68px
}
}
@media screen and (max-width: 768px) {
.app_main {
margin-top: 55px
}
}
.home-search {
display: block;
padding: 12px 0
}
.home-search .input .v-input__wrapper {
background-color: var(--bg_primary__200)
}
.home-search .input .v-input__border {
border-color: var(--bg_secondary__100)
}
.home-search .input:hover .v-input__border {
border-color: var(--bg_light_hover__100)
}
.home-search .input input:focus + .v-input__border {
border-color: var(--bg_light_hover__100)
}
.home-search.sticked {
padding: 12px 0
}
@media screen and (min-width: 980px) {
.home-search.sticked {
position: sticky;
z-index: 10;
top: 67px;
background: var(--bg_main__300)
}
}
.card-slot__bg {
background-size: cover;
background-position: center center;
background-repeat: no-repeat
}
.card-slot {
border-radius: 8px;
overflow: hidden;
position: relative;
background: var(--bg_primary__100)
}
.card-slot_placeholder {
background: url(/img/svg/placeholder-light.svg) no-repeat center center;
background-size: cover;
border-radius: 8px
}
.card-slot .image {
z-index: 1;
aspect-ratio: 1/1;
height: auto;
width: 100%;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .2s;
transition-timing-function: cubic-bezier(0, 0, .2, 1);
animation-duration: .2s;
animation-timing-function: cubic-bezier(0, 0, .2, 1)
}
.card-slot_wrapper:hover .card-slot {
border-radius: 9px;
overflow: hidden
}
.card-slot_wrapper:hover .image {
transform: scale(1.5) translateY(16px);
transform-origin: center;
filter: blur(2px)
}
.slots-grid {
grid-template-columns:repeat(2, minmax(0, 1fr))
}
@media screen and (min-width: 640px) {
.slots-grid {
grid-template-columns:repeat(3, minmax(0, 1fr))
}
}
@media screen and (min-width: 768px) {
.slots-grid {
grid-template-columns:repeat(4, minmax(0, 1fr))
}
}
@media screen and (min-width: 1024px) {
.slots-grid {
grid-template-columns:repeat(6, minmax(0, 1fr))
}
}
@media screen and (max-width: 640px) {
.slots-grid.rows1 > :nth-child(n+3) {
display: none
}
}
@media screen and (max-width: 768px) {
.slots-grid.rows1 > :nth-child(n+4) {
display: none
}
}
@media screen and (max-width: 1024px) {
.slots-grid.rows1 > :nth-child(n+5) {
display: none
}
}
@media screen and (max-width: 640px) {
.slots-grid.rows2 > :nth-child(n+5) {
display: none
}
}
@media screen and (max-width: 640px) {
.slots-grid.trix > :nth-child(n+5) {
display: none
}
}
.slots__banners {
margin-bottom: 22px;
visibility: visible !important;
aspect-ratio: 1244/278;
display: flex !important
}
@media screen and (max-width: 767px) {
.slots__banners {
aspect-ratio: 720/400
}
}
@media screen and (min-width: 980px) {
.slots__banners {
margin-bottom: 24px
}
}
.slots__banners-item {
aspect-ratio: 1244/278;
position: relative;
border-radius: 8px;
overflow: hidden;
z-index: 1;
display: block;
font-size: 2vw
}
@media screen and (max-width: 767px) {
.slots__banners-item {
aspect-ratio: 720/400;
font-size: 5.6vw;
border-radius: 4px
}
}
.slots__banners-item-img {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 100%;
aspect-ratio: 720/400;
max-width: none;
min-width: 100%
}
.container {
width: 100%
}
@media (min-width: 360px) {
.container {
max-width: 360px
}
}
@media (min-width: 390px) {
.container {
max-width: 390px
}
}
@media (min-width: 430px) {
.container {
max-width: 430px
}
}
@media (min-width: 640px) {
.container {
max-width: 640px
}
}
@media (min-width: 768px) {
.container {
max-width: 768px
}
}
@media (min-width: 979px) {
.container {
max-width: 979px
}
}
@media (min-width: 980px) {
.container {
max-width: 980px
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px
}
}
.static {
position: static
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.left-0 {
left: 0
}
.top-0 {
top: 0
}
.-z-1 {
z-index: -1
}
.z-10 {
z-index: 10
}
.z-\[4\] {
z-index: 4
}
.\!m-0 {
margin: 0 !important
}
.m-0 {
margin: 0
}
.-ml-\[12px\] {
margin-left: -12px
}
.mb-\[12px\] {
margin-bottom: 12px
}
.mb-\[30px\] {
margin-bottom: 30px
}
.ml-\[12px\] {
margin-left: 12px
}
.ml-\[5px\] {
margin-left: 5px
}
.ml-auto {
margin-left: auto
}
.mr-\[6px\] {
margin-right: 6px
}
.mr-\[8px\] {
margin-right: 8px
}
.mr-auto {
margin-right: auto
}
.mt-\[12px\] {
margin-top: 12px
}
.mt-\[2px\] {
margin-top: 2px
}
.block {
display: block
}
.flex {
display: flex
}
.grid {
display: grid
}
.\!hidden {
display: none !important
}
.hidden {
display: none
}
.aspect-\[177\/104\] {
aspect-ratio: 177/104
}
.aspect-square {
aspect-ratio: 1/1
}
.h-\[16px\] {
height: 16px
}
.h-\[300px\] {
height: 300px
}
.h-\[48px\] {
height: 48px
}
.h-full {
height: 100%
}
.w-0 {
width: 0
}
.w-\[16px\] {
width: 16px
}
.w-\[20px\] {
width: 20px
}
.w-\[40px\] {
width: 40px
}
.w-\[50\%\] {
width: 50%
}
.w-\[680px\] {
width: 680px
}
.w-full {
width: 100%
}
.min-w-0 {
min-width: 0
}
.max-w-\[80\%\] {
max-width: 80%
}
.max-w-full {
max-width: 100%
}
.flex-1 {
flex: 1 1 0%
}
.flex-shrink-0, .shrink-0 {
flex-shrink: 0
}
.grow-0 {
flex-grow: 0
}
.basis-1\/2 {
flex-basis: 50%
}
.basis-full {
flex-basis: 100%
}
.-rotate-90 {
--tw-rotate: -90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.cursor-pointer {
cursor: pointer
}
.flex-col {
flex-direction: column
}
.items-center {
align-items: center
}
.justify-end {
justify-content: flex-end
}
.justify-center {
justify-content: center
}
.justify-between {
justify-content: space-between
}
.gap-\[10px\] {
gap: 10px
}
.gap-\[12px\] {
gap: 12px
}
.gap-\[8px\] {
gap: 8px
}
.overflow-auto {
overflow: auto
}
.overflow-hidden {
overflow: hidden
}
/*.truncate {*/
/*    overflow: hidden;*/
/*    text-overflow: ellipsis;*/
/*    white-space: nowrap*/
/*}*/
.whitespace-nowrap {
white-space: nowrap
}
.rounded-\[4px\] {
border-radius: 4px
}
.rounded-\[8px\] {
border-radius: 8px
}
.bg-\[\#B6B0D7\] {
--tw-bg-opacity: 1;
background-color: rgb(182 176 215 / var(--tw-bg-opacity))
}
.bg-lighten {
background-color: var(--bg_light__100)
}
.bg-opacity-\[0\.6\] {
--tw-bg-opacity: .6
}
.object-cover {
-o-object-fit: cover;
object-fit: cover
}
.p-0 {
padding: 0
}
.p-\[8px\] {
padding: 8px
}
.px-\[2px\] {
padding-left: 2px;
padding-right: 2px
}
.px-\[6px\] {
padding-left: 6px;
padding-right: 6px
}
.pb-\[6px\] {
padding-bottom: 6px
}
.pl-0 {
padding-left: 0
}
.pl-\[12px\] {
padding-left: 12px
}
.text-\[12px\] {
font-size: 12px
}
.text-\[14px\] {
font-size: 14px
}
.text-\[18px\] {
font-size: 18px
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.leading-\[normal\] {
line-height: normal
}
.\!text-secondary {
color: var(--color_secondary__100) !important
}
.text-\[\#574D81\] {
--tw-text-opacity: 1;
color: rgb(87 77 129 / var(--tw-text-opacity))
}
.text-\[\#EFA639\] {
--tw-text-opacity: 1;
color: rgb(239 166 57 / var(--tw-text-opacity))
}
.text-primary {
color: var(--color_primary__100)
}
.text-secondary {
color: var(--color_secondary__100)
}
.transition {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
.duration-200 {
transition-duration: .2s
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.duration-200 {
animation-duration: .2s
}
.ease-out {
animation-timing-function: cubic-bezier(0, 0, .2, 1)
}
@media screen and (max-width: 767px) {
.hm {
display: none !important
}
}
*, :after, :before {
box-sizing: border-box;
margin: 0;
outline: 0
}
a {
color: inherit;
text-decoration: none
}
img {
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
color: transarent;
border: 0;
font-size: 0
}
table {
width: 100%;
vertical-align: middle;
border-collapse: collapse;
border-spacing: 0
}
th {
padding: 0
}
.container {
width: 100%;
max-width: var(--container);
padding: 0 var(--padding);
margin: 0 auto
}
.filled {
background-image: linear-gradient(to right, var(--primary-200) 0, var(--primary-400) 50%, var(--primary-200) 70%, var(--primary-200) 100%);
background-size: 100% 100%;
background-size: 200% 100%;
border-radius: .4rem
}
html {
--primary-bg: #ffffff;
--primary-1: #f7f5fe;
--primary-50: #f7f5fe;
--primary-100: #f4f2ff;
--primary-200: #f2f0ff;
--primary-300: #ccd2e8;
--primary-400: #e8e5ff;
--primary-500: #bab1ed;
--primary-600: #7f6fc9;
--primary-700: #574d81;
--primary-800: #413b63;
--color-nav: #b6b0d7;
--color-dark: #9893b6;
--font-family: "Gilroy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--fz-default: 14px;
--fw-light: 300;
--fw-normal: 400;
--fw-semibold: 500;
--fw-bold: 700;
--fw-base: var(--fw-normal);
--transition-fast: .2s;
--transition-slow: .4s;
--b-radius: 8px;
--b-radius-sm: 4px;
--gradient-primary: radial-gradient(73.33% 73.33% at 50% 50%, #9db1ff 0%, #6d3eff 100%, #6d3eff 100%);
--gradient-yellow: linear-gradient(90deg, #f4a202 0%, #fac257 100%);
--gradient-purple: linear-gradient(90deg, #7449e6 .06%, #69a4ff 98.49%);
--gradient-orange: linear-gradient(90deg, #ffc658 -18.18%, #f4a100 49.18%, #ffc658 120%);
--gradient-vk: linear-gradient(90deg, #647ae8, #54a3f5 104.25%);
--container: 128rem;
--offset: 2rem;
--padding: 20px;
--bg_primary__100: #ffffff;
--bg_primary__200: #ffffff;
--bg_secondary__100: #f2f0ff;
--bg_secondary__200: #f2f0ff;
--bg_secondary__300: #f2f0ff;
--bg_secondary__400: #f2f0ff;
--bg_main__100: #f7f5fe;
--bg_main__200: #f7f5fe;
--bg_main__300: #f7f5fe;
--bg_light_hover__100: #e8e5ff;
--bg_light_hover__200: #e8e5ff;
--bg_light__100: #e7e2f9;
--bg_light__100-rgb: 231 226 249;
--color_secondary__100: #b6b0d7;
--color_secondary__300: #F2F0FF;
--color_link_hover__100: #bab1ed;
--color_link__100: #7f6fc9;
--color_primary__100: #413b63;
--color_main__100: #2c3034;
--color_main__200: #958EBE;
--color_main__300: #958EBE;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
::-webkit-scrollbar {
border-radius: 999px;
height: 4px;
width: 4px;
background-color: var(--bg_main__200) !important
}
::-webkit-scrollbar-track {
border-radius: 10px
}
::-webkit-scrollbar-thumb {
background-color: var(--primary-300);
border-radius: 10px;
outline: 0;
width: 4px;
right: 0;
opacity: 1 !important;
cursor: pointer
}
@media screen and (max-width: 979px) {
html {
--offset: 1.2rem;
--padding: 12px
}
}
.providers-btn {
border-radius: 6px;
display: flex;
align-items: center;
padding: 0 12px;
gap: 8px;
max-width: 100%;
height: 100%;
color: var(--color_primary__100);
border: 2px solid var(--bg_secondary__100);
width: 48px;
cursor: pointer;
justify-content: center;
background-color: var(--bg_primary__200);
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: .15s
}
@media (min-width: 768px) {
.providers-btn {
width: 240px;
justify-content: flex-start
}
}
.providers-btn:hover {
background-color: var(--bg_primary__200)
}
.providers-btn:hover {
border-color: var(--bg_light_hover__100)
}
html {
background-color: var(--bg_primary__200);
color: var(--color_primary__100);
font-family: var(--font-family);
font-size: 10px;
font-display: swap;
line-height: 1;
overflow-x: hidden;
width: 100vw
}
body {
font-family: var(--font-family);
font-size: var(--fz-default);
font-weight: var(--fw-base);
background-color: var(--bg_main__300);
overflow-x: hidden
}
a, button, input {
outline: 0;
border: none;
border-radius: var(--b-radius);
background: 0 0;
font-family: inherit;
font-size: inherit;
font-weight: 600
}
input:-webkit-autofill, input:-webkit-autofill:active, input:-webkit-autofill:focus, input:-webkit-autofill:hover {
-webkit-transition: background-color 600000s 0s, color 600000s 0s;
transition: background-color 600000s 0s, color 600000s 0s
}
button {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center
}
input {
font-family: var(--font-family)
}
input::-ms-clear, input::-ms-reveal {
display: none
}
input:disabled {
cursor: not-allowed
}
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
.scroll-light::-webkit-scrollbar-thumb {
background: var(--bg_light__100)
}
.scroll-light::-webkit-scrollbar, .scroll-light::-webkit-scrollbar-track {
background: 0 0 !important
}
.hover\:bg-light:hover {
background-color: var(--bg_light_hover__100)
}
.disabled\:cursor-not-allowed:disabled {
cursor: not-allowed
}
.group.active .group-\[\.active\]\:text-main {
color: var(--color_main__100)
}
@media (min-width: 360px) {
.xs\:w-\[100px\] {
width: 100px
}
}
@media (min-width: 768px) {
.md\:mb-\[12px\] {
margin-bottom: 12px
}
.md\:flex {
display: flex
}
.md\:basis-1\/4 {
flex-basis: 25%
}
.desktop\:\!flex {
display: flex !important
}
.desktop\:hidden {
display: none
}
.desktop\:text-\[16px\] {
font-size: 16px
}
}
@media (min-width: 1024px) {
.lg\:basis-1\/2 {
flex-basis: 50%
}
.lg\:basis-1\/6 {
flex-basis: 16.666667%
}
}
.v-tabs {
background: var(--bg_main__100);
border-radius: var(--b-radius);
padding: 2px;
display: grid;
gap: 2px
}
.v-tabs button {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color_secondary__100);
font-size: 16px;
font-weight: 600;
border-radius: var(--b-radius);
padding: 1.4rem 3rem
}
.v-tabs button.sm {
font-size: 12px;
font-weight: 600;
line-height: normal;
padding: 0 7.5px;
height: 40px
}
.v-tabs button.active {
background: linear-gradient(90deg, #7449e6 0, #69a4ff 98.44%);
color: #fff
}
.v-tabs.primary {
background: var(--bg_primary__100)
}
* + .livefeed {
margin-top: 60px
}
.livefeed_table {
color: #2c2d33;
font-weight: 600;
text-align: center;
border-spacing: 0 6px;
border-collapse: separate
}
.livefeed_table th {
font-weight: 600;
width: 20% !important
}
.livefeed_table th:first-child div {
border-top-left-radius: var(--b-radius);
border-bottom-left-radius: var(--b-radius);
text-align: left
}
.livefeed_table th:last-child div {
text-align: right;
border-top-right-radius: var(--b-radius);
border-bottom-right-radius: var(--b-radius)
}
.livefeed_table td {
padding: 0
}
.livefeed_table td:first-child > div {
padding-left: 2rem;
justify-content: flex-start;
border-top-left-radius: var(--b-radius);
border-bottom-left-radius: var(--b-radius)
}
@media (max-width: 979px) {
.livefeed_table td:first-child > div {
padding-left: 1rem
}
}
.livefeed_table td:last-child > div {
padding-right: 2rem;
justify-content: flex-end;
border-top-right-radius: var(--b-radius);
border-bottom-right-radius: var(--b-radius)
}
@media (max-width: 979px) {
.livefeed_table td:last-child > div {
padding-right: 1rem
}
}
.livefeed--th {
color: var(--color_primary__100);
background: var(--bg_light_hover__200);
padding: 0 2rem;
display: flex;
align-items: center;
height: 40px
}
@media (min-width: 979px) {
.livefeed--th {
height: 63px
}
}
.livefeed thead tr th div {
justify-content: center
}
.livefeed thead tr th:last-child div {
justify-content: flex-end
}
.livefeed thead tr th:first-child div {
justify-content: flex-start
}
.livefeed-tr {
position: relative;
z-index: 1
}
.livefeed .filled {
padding: 0;
height: 2.4rem;
margin: auto
}
@media (max-width: 979px) {
.livefeed .filled {
height: 1.6rem
}
}
.livefeed--td {
overflow: hidden;
padding: .8rem;
height: 6rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--color_main__100);
background: var(--bg_primary__100)
}
.livefeed--td_icon {
width: 2.4rem;
min-width: 2.4rem;
height: 2.4rem;
color: var(--color_secondary__100);
margin: 0 !important
}
.livefeed--td_name {
width: 10rem;
margin-left: 0 !important;
text-transform: capitalize
}
.sliderMain .swiper-pagination{
position: static;
height: 24px;
padding: 8px 0 0;
}
.sliderMain .swiper-pagination-bullet{
background: #887dff4d;
opacity: 1;
width: 16px;
height: 4px;
border-radius: 9999px;
}
.sliderMain .swiper-pagination-bullet-active{
background: #887dff;
}
.slide{
height: 278px;
padding: 30px 64px;
color: #fff;
border-radius: 16px;
display: flex;
align-items: center;
}
.slide1{
background: url("/img/slides/1.jpg") center top no-repeat;
background-size: cover;
}
.slide2{
background: url("/img/slides/2.jpg") right top no-repeat;
background-size: cover;
}
.slide3{
background: url("/img/slides/3.jpg") right top no-repeat;
background-size: cover;
}
.slide4{
background: url("/img/slides/4.jpg") right top no-repeat;
background-size: cover;
}
.slide__sb{
font-weight: 600;
font-size: 42px;
margin: 0 0 3px 0;
line-height: 52px;
}
.slide__title{
font-weight: 700;
font-size: 40px;
margin: 0 0 10px 0;
}
.slide b{
display: block;
font-weight: 600;
font-size: 20px;
}
.slide__wrapper {
display: block;
margin-top: -84px;
max-width: 348px;
}
.slide__btn{
display: inline-flex;
height: 48px;
font-size: 16px;
font-weight: 600;
padding: 15px 30px;
background: var(--Linear, linear-gradient(90deg, #FFC658 -18.18%, #F4A100 49.18%, #FFC658 120%));
color: #0c111d;
margin: 20px 0 0 0;
width: 100%;
max-width: 191px;
position: absolute;
bottom: 30px;
}
.slide__row{
display: flex;
justify-content: flex-start;
align-content: flex-start;
gap: 0 10px;
margin: 20px 0 0 0;
}
.slide__text{
padding: 6px 15px;
border-radius: 8px;
position: relative;
border: 1px solid #665b51;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.slide__text:after{
position: absolute;
top: 0;
left: 0;
content: "";
width: 100%;
height: 100%;
background: #323232b5;
filter: blur(28px);
border-radius: 8px;
backdrop-filter: blur(17px);
}
.slide__text p{
display: flex;
justify-content: flex-start;
align-items: center;
text-align: center;
gap: 0 5px;
font-size: 25px;
font-weight: 600;
position: relative;
z-index: 2;
text-transform: none;
}
.slide__text p b{
color: #f4a202;
font-size: 27px;
text-transform: none;
}
.slide__text span{
display: block;
position: relative;
z-index: 2;
text-transform: none;
font-weight: 500;
margin: 3px 0 0 0;
}
@media (max-width: 979px) {
.livefeed--td_name {
width: 8rem
}
}
@media (max-width: 360px) {
.livefeed--td_name {
width: 6rem
}
}
@media (max-width: 979px) {
.livefeed .hm {
display: none
}
.livefeed_table {
font-size: 1.2rem
}
.livefeed_table th {
width: 33.33% !important
}
.livefeed--th {
padding: 1.4rem 1.2rem
}
.livefeed--td {
padding: .3rem;
height: 4rem
}
.livefeed--td_icon {
width: 1.6rem;
min-width: 1.6rem;
height: 1.6rem
}
}
@media (max-width: 991px) {
.slide__row{
display: grid;
grid-template-columns: max-content max-content;/* Первая строка с одним элементом */
grid-auto-flow: row; /* Автоматическое заполнение строк */
gap: 10px; /* Отступы между блоками */
justify-content: start;
}
.slide__text:first-child{
flex-direction: row;
grid-column: 1 / -1;
}
.slide__text {
gap: 0 5px;
width: max-content; /* Блоки занимают ширину контента */
}
/* Для второй строки создаем 2 колонки */
.slide__text:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
.slide__text:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
}
@media (max-width: 767px) {
.swiper.sliderMain {
aspect-ratio: 720 / 400;
}
.slide{
padding: 15px;
aspect-ratio: 720 / 400;
background-size: cover;
background-position: center right -200px !important;
}
.slide__sb{
font-size: 5vw;
}
.slide__title{
font-size: 7vw;
}
.slide b{
font-size: 4vw;
}
.slide__btn {
    width: max-content;
height: 32px;
font-size: 14px;
text-transform: none;
padding: 1rem 1.5rem;
margin: 30px 0 0 0;
}
.slide__row{
margin: 15px 0 0 0;
gap: 5px;
}
.slide__text{
/*padding: 6px 10px;*/
padding: 1vw 2vw;
}
.slide__text p{
font-size: 4vw;
}
.slide__text p b{
font-size: 4vw;
}
.slide__text span{
font-size: 2.2vw;
}
.slide1 {
    background-position: right center !important;
   
 
}
.slide2 {
    background-position: center !important;
}
.slide3 {
    background-position: right !important;
}
.slide4 {
    background-position: left bottom !important;
}
}
html {
--color_phone: #413b63
}