@charset "UTF-8";

/* --- HOUDINI VARIABLES (Нужны для анимации углов) --- */
@property --angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --angle-2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; } /* Угол блика */

:root {
	--header-height: 74px;
	--anim--hover-time: 400ms;
    --anim--hover-ease: cubic-bezier(0.25, 1, 0.5, 1);
	--width-nav-bar: 250px;
}
:root.sidebar-collapsed {
    --width-nav-bar: 75px;
}

@media screen and (max-width: 1125px) {
	:root {
		--width-nav-bar: 0px;
	}
	:root.sidebar-collapsed {
		--width-nav-bar: 0px;
	}
}

@media screen and (max-width: 1125px) {
	#app.openSidebarMenu .sidebar {
		display: flex !important;
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: calc(100dvh - 66px);
		overflow: hidden;
		opacity: 1;
	}
	#app>.sidebar>.tc-wrapper, #app>.sidebar>.tc-wrapper>.inner {
		height: calc(100dvh - 66px) !important;
		overflow: hidden !important;
	}
	.openProfileButtonDesktop {
		display: none;
	}
	#app>.sidebar>.tc-wrapper>.inner .sidebar-header {
		justify-content: flex-end;
		padding: 8px;
	}
	#app>.sidebar>.tc-wrapper>.inner .btn-icon-menu {
		display: none !important ;
	}
	.btn-icon-menuClosed {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 42px;
		height: 42px;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.15s;
		background-color: #212747;
    	border-color: #33395C;
	}
}
.btn-icon-menuClosed {
	display: none ;
} 

#app {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: relative;
	height: 100%;
}

#app>.sidebar {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100%;
	z-index: 4;
	width: var(--width-nav-bar);
	min-width: var(--width-nav-bar);
	interpolate-size: allow-keywords;
	transition: .2s ease;
}

#app>.sidebar>.tc-wrapper {
	position: relative;
	height: 100%;
	width: inherit;
	flex: 1;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	interpolate-size: allow-keywords;
	transition: .2s ease;
}

#app>.sidebar>.tc-wrapper>.inner {
	position: relative;
	height: 100%;
	width: inherit;
	flex: 1;
	background: #1b213c;
	position: fixed;
	border-right: 1px solid #242945;
	interpolate-size: allow-keywords;
	transition: .2s ease;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

/* Основной контейнер */
#app>.sidebar>.tc-wrapper>.inner .sidebar-header {
  display: flex; /* Скрыто на мобильных */
  align-items: center;
  padding-left: 8px;
  gap: 8px;
  width: 100%;
  height: 67px; /* Примерная высота */
  background-color: #191F3B; /* Фон из темы Rainbet */
  border-bottom: 1px solid rgba(232, 229, 255, 0.05);
  transition: width 0.05s ease-in-out;
}

/* Показываем при ширине экрана больше 1101px */
@media (min-width: 1101px) {
  #app>.sidebar>.tc-wrapper>.inner .sidebar-header {
    display: flex;
  }
}

/* Кнопка-бургер */
#app>.sidebar>.tc-wrapper>.inner .btn-icon-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

#app>.sidebar>.tc-wrapper>.inner .btn-icon-menu:hover {
  background-color: #212747;
  border-color: #33395C;
}

.sidebar .inputs {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 10px;
}

.sidebar .line {
	width: 100%;
	height: 1px;
	background: #272C46;
}

.sidebar .accordion {
	width: 100%;
	height: 38px;
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 6px;
	border: 1px solid #373E60;
	interpolate-size: allow-keywords;
	transition: .2s;
	background: #202643;
	overflow: hidden;
}
.sidebar .accordion.active {
	height: auto;
}
.sidebar .accordion__label {
	width: 100%;
	min-height: 38px;
	height: 38px;
	border-bottom: 1px solid #373E60;
	display: flex;
	align-items: center;
	gap: 8px;
	background-color: rgba(124, 131, 177, .1);
	border-radius: 6px;
	position: relative;
	padding: 0px 16px;
}
.sidebar .accordion__label p {
	font-weight: 500;
}
.sidebar .accordion__label .arrow {
	width: 25px;
	height: 25px;
	display: flex;
	justify-content: center;
	align-items: center;
	display: flex; 
	position: absolute; 
	right: 8px; 
	top: 50%; 
	transform: translateY(-50%);
	z-index: 10; 
	justify-content: center; 
	align-items: center;
	border: 1px solid #555A81; 
	background: #3B4061;
	border-radius: 2.68px;
}
#accordionGames .arrow svg {
	transition: .15s;
}
#accordionGames.active .arrow svg {
	transform: rotate(180deg);
}
.sidebar .accordion__label .arrow svg {
	width: 10px;
	height: 10px;
}
:root.sidebar-collapsed .accordion__label .arrow, :root.sidebar-collapsed .accordion__label p {
	display: none;
}
:root.sidebar-collapsed .accordion__label {
	padding: 0px 0px;
	display: flex;
    justify-content: center;
    align-items: center;
}
:root.sidebar-collapsed .accordion {
	width: 40px;
}
.sidebar .accordion__label svg {
	width: 18px;
	height: 18px;
}
.sidebar .accordion__content {
	width: 100%;
	display: flex;
	gap: 4px;
	padding: 5px 4px 4px;
	flex-direction: column;
}
.sidebar .accordion__content .accordion__button {
	width: 100%;
	height: 38px;
	border-radius: 6px;
	background: transparent;
	transition: .15s;
	border: 1px solid #33385800;
	display: flex;
	align-items: center;
	padding: 0px 10px;
	gap: 8px;
	color: #7D7E97;
}
.sidebar .accordion__content .accordion__button p {
	font-weight: 500;
	transition: .2s;
	color: white;
}
.sidebar .accordion__content .accordion__button svg {
	width: 18px;
	height: 18px;
}
.sidebar .accordion__content .accordion__button:hover {
	background: #2A2F4E;
	border: 1px solid #333858;
}
.sidebar .accordion__content .accordion__button:hover {
	color: white;
}

.nav-linkMenu {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 38px;
	min-height: 38px;
	padding: 0 16px !important;
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid transparent;
	background-color: transparent;
	color: #7D7E97; /* Цвет по умолчанию для иконки и текста */
	font-size: 13px;
	/* font-family: sans-serif; */
	letter-spacing: 0.4px;
	transition: all 0.15s ease;
	box-sizing: border-box;
	overflow: hidden;
}

/* Внутренний контейнер для иконки и текста */
.nav-link-content {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0; /* Для корректного сокращения текста */
}

.nav-icon {
	display: flex;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: .2s;
}
.nav-icon svg {
	width: 18px;
	height: 18px;
}

.nav-label {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 19px;
    color: white;
    font-weight: 500;
}
:root.sidebar-collapsed .nav-linkMenu {
	width: 40px;
	height: 40px;
	padding: 0px !important;
}
:root.sidebar-collapsed .nav-icon {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
:root.sidebar-collapsed .inputs {
	align-items: center;
}

:root.sidebar-collapsed .sidebar .accordion {
	height: 38px;
	overflow: visible;
}
:root.sidebar-collapsed .sidebar .accordion__content {
	opacity: 0;
  	visibility: hidden;
  	pointer-events: none;
}
:root.sidebar-collapsed .sidebar .inputs .activeVisible {
	width: 220px;
	position: absolute;
	right: -10px;
	top: 0px;
    transform: translateX(100%);
	background: #202643;
	border: 1px solid #292F4E;
    border-radius: 6px;
	transition: .2s;
	opacity: 1;
  	visibility: visible;
  	pointer-events: auto;
}

/* --- СОСТОЯНИЕ: HOVER (когда не активна) --- */
.accordion__button:not(.active):hover, .nav-linkMenu:not(.active):hover {
	background-color: rgba(124, 131, 177, 0.1) !important;
	border-color: rgba(124, 131, 177, 0.1) !important;
	color: #ffffff !important; /* Немного осветляем при наведении */
}

/* --- СОСТОЯНИЕ: ACTIVE --- */
.accordion__button.active, .nav-linkMenu.active {
	background-color: rgba(81, 175, 255, 0.15) !important;
	border-color: rgba(133, 199, 255, 0.15) !important;
	color: #85C7FF !important; /* Цвет иконки в активном состоянии */
}

/* Градиентный текст для активного состояния */
.accordion__button.active .nav-label, .nav-linkMenu.active .nav-label {
	background: linear-gradient(to right, #85C7FF, #99D0FF) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
    font-weight: 600 !important;
}

/* Иконка в активном состоянии принимает цвет текста (или градиент через fill) */
.accordion__button.active .nav-icon svg, .nav-linkMenu.active .nav-icon svg {
  color: #85C7FF !important;
}



#app>.sidebar>.tc-wrapper>.inner * {
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
#app>.sidebar>.tc-wrapper>.inner>.item {
	transition: .08s ease-in all !important;
}

#app>.sidebar>.tc-wrapper>.inner>.item {
	width: 158px;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 13px 12px;
	padding-left: 34px;
	margin: 7px 0;
	border-radius: 12px;
	font-style: normal;
	font-weight: 700;
	cursor: pointer;
	min-height: 46px;
}

#app>.sidebar>.tc-wrapper>.inner>.item.marked .icon {
	color: #f2ad44;
}

#app>.sidebar>.tc-wrapper>.inner>.item .tooltip {
	display: none;
}

#app>.sidebar>.tc-wrapper>.inner>.item .title {
	margin-left: 8px;
	font-size: 16px;
}

#app>.sidebar>.tc-wrapper>.inner>.item.marked {
	--base-color: 195, 163, 87;
	/* background-color: #181B27; */
	color: #fff;
}

#app>.sidebar>.tc-wrapper>.inner>.item.marked:hover {
	color: #fff !important;
}

#app>.sidebar>.tc-wrapper>.inner>.item:hover .icon {
	/* color: #3577F2; */
}

#app>.sidebar>.tc-wrapper>.inner>.item:hover {
	/* background-color: #272D40; */
	color: #fff;

}

.inner__footer {
	width: 100%;
	margin-top: auto;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.left--closed #app>.sidebar {
	min-width: 0;
	width: 70px;
}

.left--closed #app>.sidebar>.tc-wrapper>.inner>.item:hover .tooltip {
	visibility: visible;
	opacity: 1;
}

.left--closed #app>.sidebar>.tc-wrapper>.inner>.item .tooltip {
	display: flex;
	align-items: center;
	justify-content: left;
	transition: .08s ease-in all !important;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	left: 45px;
	top: 0;
	bottom: 0;
	min-width: 48px;
	height: 100%;
	padding: 8px 16px;
	padding-left: 0;
	background-color: #272D40;
	border-radius: 0 12px 12px 0;
}

.left--closed #app>.sidebar>.tc-wrapper>.inner>.item:hover {
	border-radius: 12px 0 0 12px;
}

.left--closed #app>.sidebar>.tc-wrapper>.inner>.item {
	justify-content: center;
	width: 45px;
}

.left--closed #app>.sidebar>.tc-wrapper>.inner>.item .go {
	display: none !important;
}

.left--closed #app>.sidebar>.tc-wrapper>.inner>.item .title {
	max-width: 0;
	opacity: 0;
	margin-left: 0;
}

#app>.sidebar>.tc-wrapper>.inner>.item .go {
	margin-left: auto;
	border-radius: 8px;
	width: 24px;
	height: 24px;
	background-color: #212739;
	display: flex;
	align-items: center;
	justify-content: center;
}

#app>.main {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex: 1;
	width: 100%;
	height: 100%;
	z-index: 3;
}

#app>.main main {
	position: relative;
	flex: 1 1 auto;
	padding: 16px 0px;
	margin-top: 67px;
}

@media screen and (max-width: 1400px) and (min-width: 1124px) {
	#app>.main main {
		padding: 16px 16px;
	}
}


@media only screen and (max-width: 1125px) {
    #app>.right {
        display: none;
        max-width: unset;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        height: 100%;
        z-index: 1001;
        transition: .4s ease;
        border: none;
    }
    .chat--opened #app>.right {
        display: block !important;
    }
    .chat-aside {
        display: none !important;
    }
    .user-split>span {
        display: none;
    }
}

.koseleks {
	gap: 10px;
	display: flex;
}

.koseleks2 {
	gap: 10px;
	display: flex;
}

@media(max-width: 650px) {
	.koseleks {
		gap: 10px;
		display: flex;
		flex-direction: column;
	}
}



/*  
  @media(min-width: 0px)and (max-width:1125px) {
	#app > .main > .header {
		position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	border: 1px solid #2e3750;
	background: #00091aa6;
	border-radius: 0px 0px 28px 28px;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	margin: auto;
	z-index: 101;
	margin-left: 0px;
	  width: 100%;
	}
  } */



/* @media(min-width: 1125px)and (max-width:1355px) {
	#app > .main > .header {
		position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	border: 1px solid #2e3750;
	background: #00091aa6;
	border-radius: 0px 0px 28px 28px;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	margin: auto;
	z-index: 101;
	margin-left: 275px;
	  width: 74%;
	}
  } */

/* @media(min-width: 1355px)and (max-width:1650px) {
	#app > .main > .header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 12px 16px;
		border: 1px solid #2e3750;
		background: #00091aa6;
		border-radius: 0px 0px 28px 28px;
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
		margin: auto;
		z-index: 101;
		width: 79%;
		margin-left: 281px;
	}
  } */

/* @media(min-width: 1650px)and (max-width:2200px) {
	#app>.main>.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		padding: 12px 16px;
		border: 1px solid #2e3750;
		background: #00091aa6;
		border-radius: 0px 0px 28px 28px;
		backdrop-filter: blur(7px);
		-webkit-backdrop-filter: blur(7px);
		margin: auto;
		z-index: 101;
		width: 82%;
		margin-left: 281px;
	}
} */

/* @media(min-width: 2200px) {
#app > .main > .header {
 
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 12px 16px;
	border: 1px solid #2e3750;
	background: #00091aa6;
	border-radius: 0px 0px 28px 28px;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	margin: auto;
	z-index: 101;
	margin-left: 441px;
	 width: 79%;
  }
  } */


#app > .main > .header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 0px 25.5px;
	padding-left: calc(var(--width-nav-bar) + 25.5px);
	height: 67px;
	z-index: 101;
	width: 100%;
	display: flex;
	align-items: center;
	background: rgba(16, 20, 28, 0.2);
	border-bottom: 1px solid rgba(232,229,255,.05);
	background: #191F3B;
	transition: .2s ease;
}

#app > .main > .header::after {
	content: none !important;
}

.header__wrapper {
    max-width: 1425px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	transition: .2s ease;
}

.header .login-button {
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 8px;
}
.header .login-button span {
	font-weight: 700;
	font-size: 16px;
	line-height: 100%;
	text-transform: capitalize;
	color: #fff;
}

#app .logo {
	position: relative;
	padding: 0 12px;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: center;

}

#app>.sidebar .logo {
	min-height: var(--header-height);
	padding: 2px;
	-webkit-backdrop-filter: blur(px);
	backdrop-filter: blur(7px);
	background: #00091a80;
	border-radius: 0px 19px 19px 0px;
	margin-top: 25px;
	border: 1px solid #2e3750;
}

#app .logo:before {
	-webkit-filter: blur(0.8rem);
	filter: blur(0.8rem);
}

#app .logo>.logoim {
	transition: none;
	display: inline-block;
	position: absolute;
	width: 196px;
	height: 110px;
	background: url(../logotype-dark.svg) no-repeat center center/contain;
	top: -15px;
}

.left--closed #app>.sidebar .logo>.logoim {

	width: 100%;
	height: 45px;
	background: url(../images/logotype-dark-small.svg) no-repeat center center/contain;
}

.left--closed #app>.sidebar .logo .leftBtn .icon {
	width: 16px;
	height: 16px;
	background: url(../images/symbols.svg?v=31#arrow_left) no-repeat center center/contain;
}

.header__user-balance-add span {
	font-weight: 500;
}

.swapon .sw1 {
	display: block;
}

.swapon .sw2 {
	display: none;
}

.swapon.active .sw1 {
	display: none;
}

.swapon.active .sw2 {
	display: block;
}

.sidebar__game {

	transition: transform 0.3s ease-in-out;
}


.icon {
	width: 22px;
	height: 22px;
	transition: transform 0.3s ease-in-out;
}

.icon:hover {
	transform: scale(1.2);
}

.sidebar__game .icon2 {
	position: absolute;
	width: 62px;
	right: 10px;
	height: 111px;
	fill: #9bccdb1a;
	transition: transform 0.3s ease-in-out;
	transform: scale(1);
	/* Устанавливаем стандартный масштаб */
}

.sidebar__game:hover .icon2 {
	transform: scale(1.2);
	/* Задаем масштабирование */
}



.gx-btn {
	border: 2px solid #272D40;
	border-radius: 12px;
	padding: 10px;
	min-height: 24px;
	min-width: 24px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	color: #fff;
	transition: .1s ease;
	font-size: 12px;
}

.gx-btn.accent {
	background-color: #f2ad44;
	color: #272D40;
}

.gx-btn.accent .icon {
	color: #272D40;
}

.gx-btn.accent:hover {
	background-color: #f2ad44;
	color: #272D40;
}

.gx-btn:hover {
	background-color: #272D40;
}

.gx-btn.filled:hover {
	background-color: #272D40;
}

.gx-btn.filled {
	background-color: #272D40;
}

.gx-btn .icon {
	color: #3B7BE6;
}

.gx-btn div {
	font-weight: 700;
}

.gx-btn.round {
	border: none;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 12px;
	padding: 0;
}


:root {
	--chat-width: 340px;
}

#app>.right {
	position: sticky;
	top: 4.5rem;
	min-width: var(--chat-width);
	max-width: var(--chat-width);
	overflow: hidden;
	height: 100%;
	transition: .75s min-width, .75s width;
	border-left: 1px solid var(--border-color-1);
}

#app>.right {
	min-width: 0;
	width: 0;
}

.chat--opened #app>.right {
	min-width: var(--chat-width);
	width: var(--chat-width);
}

@media only screen and (max-width: 1125px) {
	#app>.right {
		display: none;
		max-width: unset;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100% !important;
		height: 100%;
		z-index: 1001;
		transition: .4s ease;
		border: none;
	}

	.chat--opened #app>.right {
		display: block !important;
	}

	.chat-aside {
		display: none !important;
	}

	.user-split>span {
		display: none;
	}
}


@media only screen and (max-width: 1250px) {
	:root {
		--chat-width: 320px;
	}
}

.chat {
	width: var(--chat-width);
}

.aside {
	position: absolute;
	z-index: 99;
}

.aside.right {
	right: -14px;
}

.aside.left {
	left: -14px;
}

.aside.top {
	top: -14px;
}

.aside.bottom {
	bottom: -14px;
}

.aside.vert-center {
	top: 0;
	bottom: 0;
	margin: auto;
}

.gx-s {
	position: relative;
	overflow: hidden;
	overflow-y: auto;
}

.gx-container {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.gx-wrap {
	padding: 20px 25px;
}

hr {
	border: none;
	outline: none;
	background-color: #1C202F;
	height: 1px;
	margin: 15px 0;
}

.gx-col {
	display: flex;
	flex-direction: column;
	line-height: normal;
}

.gx-col-x {
	flex: 1;
}

.mt {
	margin-top: 8px;
}

.mt-1 {
	margin-top: 16px;
}

.gx-row {
	display: flex;
	flex-direction: row;
}

.gx-gap {
	gap: 8px;
}

.gx-gap-sm {
	gap: 4px;
}

.gx-gap-lg {
	gap: 16px;
}

.text-gray {
	color: #7785B3 !important;
}

.text-warn {
	color: #F1AC44 !important;
}

.text-bold {
	font-weight: 700;
}

.gx-mh-0 {
	min-height: 32px;
}

.gx-mh-1 {
	min-height: 48px;
}

.gx-mh-2 {
	min-height: 64px;
}

.gx-box.dark {
	background-color: #1C202F;
}

.gx-box {
	padding: 8px;
	border-radius: 8px;
	background-color: #272D40;
}

.gx-con {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	flex-wrap: nowrap;
}

.gx-con>.icon.lg {
	width: 42px;
	height: 42px;
}

.gx-con>.icon {
	width: 32px;
	height: 32px;
	color: #3B7BE6;
	padding: 8px;
	border-radius: 10px;
	background-color: #272D40;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gx-con>.title {
	color: #fff;
	font-weight: 600;
}

.gx-con.red>.icon {
	background: linear-gradient(225deg, rgba(231, 70, 64, 0.56) 0%, #D45F59 100%);
	color: #fff;
}

.gx-con.red>.title {
	text-transform: uppercase;
	color: #CB5753;
}

.gx-con.blue>.icon {
	background: #3B7BE6;
	color: #fff;
}

.gx-con.blue>.title {
	color: #fff;
}

.mw-6 {
	max-width: 60%;
}

.gx-w-box {
	position: relative;
	border-radius: 12px;
	padding: 35px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background-color: #181B27;
	min-height: 240px;
	border-radius: 20px;
	min-width: 320px;
	width: 100%;
}

.gx-w-box h1 {
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
}

.gx-w-box p {
	margin-top: 8px;
	color: #7785B3;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.gx-w-box img {
	max-width: 100%;
}


.gx-w-box.dark p {
	color: #7785B3;
}

.gx-w-box.dark {
	background-color: #181B27;
}

.gx-w-box.blue p {
	color: #7785b3;
}

.gx-w-box.blue {
	background-image: url(/assets/images/banner_tg.png);
	background-size: cover;
	background-position: 0px;
}

.wrapper.mb {
	margin-bottom: 16px;
}

.d-none {
	display: none;
}

.gx-split {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex-wrap: nowrap;
}

.gx-split>* {
	flex-grow: 1;
}

.gx-split>.gx-left {
	position: relative;
	background-color: #181c28;
	z-index: 1;
}

.gx-split>.gx-right {
	position: relative;
	background-color: #1c202e;
	flex: 0 1 55%;
	z-index: 2;
}

.gx-floating {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
}

.gx-wh-1 {
	width: 100%;
	height: 100%;
}

.gx-floating-remark {
	border-radius: 8px;
	background: rgba(28, 32, 47, 0.65);
	backdrop-filter: blur(12.5px);
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	padding: 10px;
	color: #F1AC44;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 17px;
	/* 160% */
	z-index: 6;
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	background: #00091a80;
	border: 1px solid #2e3750;
}

.gx-remark {
	color: #d9d9d9;
	margin-top: auto;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	/* 160% */
	margin-bottom: 50px;
}

.gx-comp-el-0 {
	position: absolute;
	bottom: -42px;
	left: -42px;
	right: 0;
	width: 100%;
	height: 90%;
	margin: auto;
	background: url(../assets/images/login_g.png) no-repeat center center/cover;
	z-index: 2;
	background-size: contain;
}

.gx-comp-el-1 {
	position: absolute;
	bottom: 32px;
	left: 0;

	margin: auto;
	z-index: 1;
}

.gx-comp-el-2 {
	position: absolute;
	bottom: 0;

	right: 0;
	margin: auto;
	z-index: 1;
}

.gx-comp-1 {
	height: 360px;
	background: radial-gradient(57.70% 57.70% at 50% 50.00%, #3B7BE6 0%, #1F58B7 100%);
}

.gx-floating-logo {
	position: absolute;
	top: 35px;
	left: 0;
	right: 0;
	margin: auto;
	width: 160px;
	height: 24px;
	background: url(..//img/lotoype-dark.svg) no-repeat center center/contain;
	z-index: 1;
}


.user-split {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.user-split>span {
	font-weight: 600;
	max-width: 100px;
	overflow: hidden;
	font-size: 14px;
	text-overflow: ellipsis;
	color: #fff;
	text-wrap: nowrap;
	white-space: nowrap;
}

.user-avatar {
	border-radius: 100%;
	width: 32px;
	height: 32px;
	/* width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); */
}

.gx-game-item {
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	min-height: 230px;
	background: radial-gradient(206.43% 154.77% at -7.97% -43.50%, #303C57 0%, rgba(24, 27, 39, 0.00) 100%);
	border-radius: 12px;
	padding: 16px;
	padding-bottom: 0;
	align-items: end;
	justify-content: space-between;
}

.gx-game-item-bk img {
	max-width: 100%;
}

.gx-game-item-bk {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}

.gx-game-item-bk .center {
	position: absolute;
	width: 160px;
	height: 160px;
	top: 0;
	bottom: 48px;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 3;
}

.gx-game-item-bk .left {
	position: absolute;
	width: 72px;
	height: 72px;
	top: -72px;
	bottom: 48px;
	left: -180px;
	right: 0;
	margin: auto;
	z-index: 2;
}

.gx-game-item-bk .right {
	position: absolute;
	width: 72px;
	height: 72px;
	transform: rotate(15deg);
	top: 100px;
	bottom: 48px;
	left: 0;
	right: -180px;
	margin: auto;
	z-index: 1;
}

.gx-game-item-tl {
	margin-top: auto;
	position: relative;
	height: 48px;
	width: 100%;
}

.gx-game-item-tl>span {
	text-transform: uppercase;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	z-index: 3;
}

.gx-clip {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
}

.gx-clip.clip-a {
	bottom: 0;
	z-index: 1;
}

.gx-clip.clip-b {
	top: 0;
	z-index: 2;
}

svg.ic_login_warn {
	float: left;
	margin-right: 5px;
}

a.btn.d-flex.align-center span svg {
	float: right;
	margin-left: 10px;
}

svg.ft-soc {
	width: 24px;
	height: 24px;
}

a.gx-btn.soc {
	border: 0px;
	padding: 0px;
}

svg.icon_mobiles {
	width: 20px;
	height: 20px;
	fill: #7884b3;
}

.text-f18 span {
	font-size: 18px !important;
}









.mui-ajmgqr {
	margin-top: 12px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 6.4px;
}

.mui-1cca6na.MuiListItem-root {
	overflow: hidden;
	cursor: pointer;
	height: 44px;
	width: 100%;
	background: linear-gradient(90deg, rgb(14 19 44) 0%, rgba(27, 21, 42, 0) 100%);
	border-radius: 12px;
	padding: 8px;
	place-content: center flex-start;
	-webkit-box-align: center;
	align-items: center;
	display: flex;
	flex-flow: row;
	-webkit-box-pack: start;
}

.mui-1cca6na.MuiListItem-root:hover {
	background: #00091aa6;
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

.mui-1cca6na {
	display: flex;
	-webkit-box-pack: start;
	justify-content: flex-start;
	-webkit-box-align: center;
	align-items: center;
	position: relative;
	text-decoration: none;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	padding: 8px 16px;
}

.mui-7a5yeu.MuiListItemIcon-root {
	min-width: unset;
	margin-right: 8px;
}

.mui-7a5yeu {
	min-width: 56px;
	color: rgba(0, 0, 0, 0.54);
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.mui-16mw6ra {
	height: 16px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 4px;
	background: rgba(104, 242, 68, 0.06);
	place-content: center;
	-webkit-box-align: center;
	align-items: center;
	display: flex;
	flex-flow: row;
	-webkit-box-pack: center;
}

.mui-4axdn9.MuiListItemText-root {
	color: rgb(255, 255, 255);
	font-size: 14px;
	font-weight: 400;
	white-space: nowrap;
	animation: 3s linear 0s infinite normal none running animation-qmhxim;
	display: flex;
	align-items: center;
}

.mui-4axdn9 {
	flex: 1 1 auto;
	min-width: 0px;
	margin-top: 4px;
	margin-bottom: 4px;
}

.mui-1se57mh {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	font-family: "Montserrat", sans-serif;
	display: block;
}

.mui-1xncoiv {
	margin-right: 2px;
	place-content: center;
	-webkit-box-align: center;
	align-items: center;
	display: flex;
	flex-flow: row;
	-webkit-box-pack: center;
}

.mui-10rqzx4 {
	margin: 0px;
	font-weight: 700;
	font-family: Rubik, sans-serif;
	line-height: 1.43;
	color: #7cdaf7;
	font-size: 10px;
}

@keyframes slideDown {

	0%,
	100% {
		transform: translateY(-100%);
		opacity: 0;
	}

	5%,
	50% {
		transform: translateY(0);
		opacity: 1;
	}

	55%,
	95% {
		transform: translateY(100%);
		opacity: 0;
	}
}

.mui-4axdn9 {
	position: relative;
	height: 20px;
	overflow: hidden;
}

.mui-4axdn9 .MuiTypography-root {
	position: absolute;
	width: 100%;
	opacity: 0;
	animation: slideDown 6s ease-in-out infinite;
	cursor: pointer;
}

.mui-4axdn9 .MuiTypography-root:nth-child(1) {
	animation-delay: 0s;
}

.mui-4axdn9 .MuiTypography-root:nth-child(2) {
	animation-delay: 3s;
}




.sidebar-roulette {
	height: 54px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 10px 10px 75px;
	border-radius: 12px;
	background-color: #4b4fae;
	background: linear-gradient(318deg, #6f0584, #151e2f);
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	will-change: transform;
	transition: transform .15s ease-out
}

@media(max-width: 576px) {
	.sidebar-roulette {
		padding: 8px 10px 8px 60px;
		border-radius: 10px;
		height: 48px
	}
}

.sidebar-roulette:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background-image: url(../images/mini-roulette-bg.fd1fb26.png);
	background-size: cover;
	background-position: 100%;
	background-repeat: no-repeat;
	transition: background-color .15s ease-out
}

.sidebar-roulette-spinner {
	position: absolute;
	top: 50%;
	left: 0;
	width: 80px;
	height: 80px;
	margin-top: -40px;
	margin-left: -25px;
	border-radius: 50%;
	box-shadow: 5px 0 30px 0 #6d70d9
}

@media(max-width: 576px) {
	.sidebar-roulette-spinner {
		width: 70px;
		height: 70px;
		margin-top: -35px
	}
}

.sidebar-roulette-spinner__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/mini-roulette.834b63c.png);
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	-webkit-animation: rotate-mini-roulette 4s linear infinite;
	animation: rotate-mini-roulette 4s linear infinite
}

@-webkit-keyframes rotate-mini-roulette {
	0% {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(1turn)
	}
}

@keyframes rotate-mini-roulette {
	0% {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(1turn)
	}
}

.sidebar-roulette-spinner__line {
	position: absolute;
	top: 50%;
	left: 100%;
	width: 7px;
	height: 36px;
	margin-top: -18px;
	margin-left: -2px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAABUCAMAAAC1D+dTAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMAQO/fvxAgsJBwYM+AMKCfT19QWA5ppAAAAQZJREFUOMvNldtywyAMRG3uxlDc8v//2k7ljGA4k+Qx+3jGrFbCsrc/+cOZfrawDQq2i8rATO8LtV213yz3Qe2GcYTGCzwV6Xk7wUbQCPzqcH6fYfqH3kzw1EyDvKZXZTm/mK7xrcC0mK6hrrdNo5ou7WeqFKjSNrd/UKVGM3UCD2r0543y90uFmewEM2UqdE9Jgy7pCw3voJYytkRwZzjp86B5Ej4jpCkVgomGHOk6HN3mSe8ibXKYYaXWPdywoZiOEkXajkLLeVHxCjMyVMdRnUSWF/TTK1hamlsky29ZF7K0YFn7pEaBLrL0r74fGggKhW0dnINfjzwoBg9q8qYKksDVB/gF8xBVBQStDPAAAAAASUVORK5CYII=);
	background-size: 100%;
	background-position: 50%;
	background-repeat: no-repeat;
	transform: translateX(0);
	transition: transform .15s ease-out
}

.sidebar-roulette__name {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 13px;
	line-height: 13px
}

@media(max-width: 576px) {
	.sidebar-roulette__name {
		font-size: 11px;
		line-height: 11px
	}
}

.sidebar-roulette__name>span:first-child {
	color: #fff
}

.sidebar-roulette__name>span:last-child {
	margin-top: 5px;
	color: hsla(0, 0%, 100%, .6)
}

.sidebar-roulette__countdown,
.sidebar-roulette__remainder {
	position: absolute;
	top: 14px;
	right: 10px;
	font-size: 10px;
	line-height: 10px;
	font-weight: 600;
	color: hsla(0, 0%, 100%, .5)
}

@media(max-width: 576px) {

	.sidebar-roulette__countdown,
	.sidebar-roulette__remainder {
		top: 10px
	}
}

.sidebar-roulette__countdown {
	font-family: Roboto Mono, monospace
}

@media(hover: hover)and (pointer:fine) {
	.sidebar-roulette:hover .sidebar-roulette-spinner__image {
		-webkit-animation-play-state: paused;
		animation-play-state: paused
	}
}

.sidebar-roulette:active .sidebar-roulette-spinner__image {
	-webkit-animation-play-state: paused;
	animation-play-state: paused
}

@media(hover: hover)and (pointer:fine) {
	.sidebar-roulette:hover .sidebar-roulette-spinner__line {
		transform: translateX(3px)
	}
}

.sidebar-roulette:active .sidebar-roulette-spinner__line {
	transform: translateX(3px)
}

@media(hover: hover)and (pointer:fine) {
	.sidebar-roulette:hover:before {
		background-color: rgba(0, 0, 0, .15)
	}
}

.sidebar-roulette:active:before {
	background-color: rgba(0, 0, 0, .15)
}

.sidebar-roulette:active {
	transform: scale(.98)
}

@media(min-width: 769px)and (max-width:1200px) {
	.sidebar:not(.sidebar_opened) .sidebar-roulette {
		padding: 5px;
		height: 46px
	}

	.sidebar:not(.sidebar_opened) .sidebar-roulette-spinner {
		margin-left: -17px
	}

	.sidebar:not(.sidebar_opened) .sidebar-roulette__countdown,
	.sidebar:not(.sidebar_opened) .sidebar-roulette__name,
	.sidebar:not(.sidebar_opened) .sidebar-roulette__remainder {
		display: none
	}
}

.shoot__bet-item {


	border: 1px solid #2e3750;
}

.shoot__bet-item:hover {


	border: 1px solid #626e91;
}

.theme--dark .shoot__bet-item span {
	z-index: 1;
	font-size: 25px;
	color: #fff;
	position: relative;
}

.shoot__bet-item--1x:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/1x.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.shoot__bet-item--2x:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/2x.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.shoot__bet-item--5x:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/5x.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.shoot__bet-item--10x:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/10x.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.shoot__bet-item--cashhunt:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/cashhunt.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.shoot__bet-item--pochinko:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/pachinko.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.shoot__bet-item--coinflip:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/coinflip.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.shoot__bet-item--crazygame:before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: url(../images/games/shoot/crazytime.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

@media(max-width: 600px) {
	.mobelei3 {
		max-width: 160px;
	}
}



.text__content {
	color: white !important;
	font-weight: unset !important;
}

.text__content p,
b,
u,
strong,
blockquote {
	color: white !important;
}

.text__content p {
	font-weight: unset !important;
}

.text__content b,
strong,
a {
	font-weight: 700 !important;
}

.text__content u {
	text-decoration: underline;
}

.text__content blockquote {
	background: #c3a25726;
	border-left: 3px solid #C3A257;
	padding: 0.5em 10px;
	font-style: normal !important;
	font-size: 14px !important;
	font-weight: unset !important;
	margin-bottom: 1em;
}


/* Welcome Blade */
.welcomBlade__line {
	width: 100%;
	height: 1px;
	background: hsla(0, 0%, 100%, .05);;
	margin-top: 20px;
}
.banner__wrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	position: relative;
}
.banner__wrapper::before {
    content: ' ';
    width: 150vw;
    height: calc(100% + 40px);
    background: #151A32;
    z-index: -1;
    position: absolute;
    top: -20px;
	left: calc(-50% - 100px);
	border-bottom: 1px solid hsla(0, 0%, 100%, .05);
}
.banner__wrapper .banner {
	flex: 1;
	height: 197px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 36px 90px 36px 36px;
	border-radius: 6px;
	border: 1px solid #0077DB;
}
.banner__wrapper .banner-deposit {
	background: url('../images/DepositBannerWelcomBlade.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.banner__wrapper .banner-jackpot {
	background: url('../images/JackpotBannerWelcomBlade.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
.banner__wrapper .banner h2 {
	font-weight: 500;
	font-size: 32px;
	line-height: 141%;
	color: #fff;
	white-space: nowrap;
}
.banner__wrapper .banner a {
	width: fit-content;
	text-decoration: none;
	height: 56px;
	padding: 0px 64px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	font-weight: 500 !important;
	font-size: 18px;
	text-transform: capitalize;
	text-align: center;
	color: #fff !important;
	border-radius: 6px;
}
@media screen and (max-width: 640px) {
	.banner__wrapper {
		gap: 16px;
		margin-top: 16px;
	}
	.banner__wrapper {
		flex-direction: column;
		flex-wrap: nowrap;
	}
	.banner__wrapper .banner {
		border-radius: 6px;
		padding: 21px;
		gap: 16px;
	}
	.banner__wrapper .banner h2 {
		font-size: 16px;
	}
	.banner__wrapper .banner a {
		font-size: 12px;
		border-radius: 6px;
		padding: 0px 18px;
		height: 34px;
	}
	.welcomBlade__line {
		display: none;
	}
}

.popular-slots__headline {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.popular-slots__headline h2 {
	font-weight: 500;
	font-size: 2.3rem;
	color: #fff;
	text-shadow: 0 0 10px 0 rgba(48, 48, 48, 0.5);
}
.popular-slots__buttonLi {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	padding: 0px 24px;
	height: 48px;
	font-weight: 700;
	font-size: 16px;
	line-height: 100%;
	text-transform: capitalize;
	text-align: center;
	color: #fff;
	cursor: pointer;
	margin-left: auto;
}
.popular-slots__button {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 8px;
	padding: 0px 12px;
	height: 35px;
	font-weight: 700;
	font-size: 12px;
	line-height: 133%;
	text-transform: capitalize;
	text-align: center;
	color: #fff;
	display: none;
}
.widget-tabs {
	margin-top: 28px;
}
.item-title .inner {
	cursor: pointer;
	color: white !important;
}
.item-title, .coinflip__buttons {
	transition: .15s ease;
	border: 1px solid rgba(0, 0, 0, 0) !important;
}
.item-title:hover, .coinflip__buttons:active {
	border: 1px solid rgb(69 77 125) !important;
}


@media screen and (max-width: 740px) {
	.popular-slots__headline a {
		display: none;
	}
	.popular-slots__headline h2 {
		font-size: 16px;
	}
	.widget-tabs {
		margin-top: 12px;
	}
	.popular-slots__button {
		display: flex;
	}
	.popular-slots__buttonLi {
		display: none !important; 
	}
}

/* footer */

.footer {
	width: 100%;
	padding: 48px 20px !important;
	background: #131730;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 40px;
}

.footer__wrapper {
	max-width: 1370px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.footer .info {
	flex: 1;
}
.footer .info p {
	color: rgb(158 157 183);
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
}
.footer .info .mail {
	display: flex;
	align-items: center;
	margin-top: 20px;
	cursor: pointer;
	text-decoration: none;
	gap: 7px;
	color: white;
	font-weight: 500;
}
.footer .list  {
	flex: 1;
	display: flex;
	justify-content: space-between;
	gap: 10px;
}
.footer .list ul {
	width: 160px;
	display: flex;
	flex-direction: column;
	gap: 15px;
	cursor: pointer;
}
.footer .list ul li a {
	font-size: 13px;
	font-weight: 500 !important;
	line-height: 1.5;
	color: rgb(200 198 224);
}
.footer .list ul li:nth-child(1) {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25rem;
	color: white;
}
.footer .list ul li a {
	transition: .2s ease;
}
.footer .list ul li:hover:not(:nth-child(1)) a {
	color: white;
}
.footer__polcy {
	width: 100%;
	color: #5B628C;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
}
.footer__line {
	width: 100%;
	height: 1px;
	background: #282D4C;
}
.footer__currency {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.footer__currency img {
	width: 48px;
	height: 48px;
}
/* Основной контейнер - по умолчанию колонка (мобильные) */
.badges-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 16px;
}

/* Переход в строку при ширине экрана (аналог @2xl) */
@media (min-width: 640px) {
	.badges-row {
		flex-direction: row;
	}
}

/* Стили карточки */
.badge-card {
	width: 100%;
	min-width: 300px;
	flex: 1;
	min-height: 64px;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 16px;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	font-weight: 500;
	color: #ffffff;
	/* Градиент из оригинала */
	background: linear-gradient(
		rgba(124, 131, 177, 0.1) 0%, 
		rgba(94, 103, 158, 0.1) 100%
	);
	box-sizing: border-box;
	cursor: pointer;
}

/* Для десктопов ограничиваем ширину каждой карточки до 1/3 */
@media (min-width: 1024px) {
  .badge-card {
    /* width: 33.333%; */
  }
}

.clickable {
  cursor: pointer;
}

.badge-text {
  font-size: 14px;
  line-height: 1;
}

/* Контейнер для печати лицензии */
.seal-container {
  display: block;
  position: relative;
  overflow: hidden;
  max-width: 64px;
  min-width: 32px;
}

.seal-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* Обнуление базовых стилей ссылок внутри карточек */
.badge-card a {
  display: flex;
  text-decoration: none;
}
@media screen and (max-width: 1125px) {
	.footer {
		padding: 40px 20px 90px 20px !important;
	}
}
@media screen and (max-width: 620px) {
	.footer .list ul {
		width: 120px;
	}
	.footer .list  {
		flex-wrap: wrap;
		gap: 30px;
	}
}
@media screen and (max-width: 920px) {
	.footer__wrapper {
		flex-direction: column;
	}
}

/* BANNER WELCOMEBLADE */
:root {
  --color-sky: #38bdf8;
  --bg-widget-head: rgba(82, 97, 151, 0.4);
  --bg-widget-body: rgba(82, 97, 151, 0.2);
  --border-widget: rgba(82, 97, 151, 0.5);
  --text-muted: rgba(232, 229, 255, 0.75);
  --card-bg: #252B46;
}

/* Общий лэйаут */
.banner-section {
  position: relative;
  padding: 1.75rem 0;
  width: 100%;
  font-family: 'Montserrat';
  margin-top: -16px;
}

.banner-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  position: relative;
  z-index: 10;
}

/* Левая часть (Прогресс) */
.user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 447px;
  gap: 2rem;
  color: white;
}

.welcome-title {
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 2.5rem;
  margin: 0;
  letter-spacing: -0.015em;
}

.text-sky { color: var(--color-sky); }

.progress-widget { display: flex; flex-direction: column; }

.progress-header {
  height: 38px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-widget-head);
  padding: 0 1.25rem;
  border: 1px solid var(--border-widget);
  border-bottom: none;
  display: flex;
  align-items: center;
  border-radius: 0.375rem 0.375rem 0 0;
}

.progress-body {
  padding: 1.25rem;
  background: var(--bg-widget-body);
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid var(--border-widget);
  border-top: none;
  border-radius: 0 0 0.375rem 0.375rem;
}

.stats-row, .ranks-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stats-left {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.value-divider, .value-target, .value-label {
  color: var(--text-muted);
}

.stats-right {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
}

.tooltip-trigger svg {
  width: 16px;
  height: 16px;
  color: rgba(232, 229, 255, 0.5);
  transition: color 0.2s;
  cursor: pointer;
}

.tooltip-trigger svg:hover { color: rgba(232, 229, 255, 0.75); }

.progress-bar-container {
  width: 100%;
  height: 20px;
  border-radius: 999px;
  border: 5px solid #2e375e;
  background: #323e67;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(to bottom, #52648C, #6B7EA8);
  border-radius: 999px;
  transition: width 0.5s;
}

.progress-bar-track {
	width: 100%;
	height: 100%;
}

.rank {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

.rank-icon { width: 25px; }
.rank.unranked { color: #8F9EBF; }
.rank.bronze { color: #EBA47E; }

/* Правая часть (Баннеры) */
.banners-wrapper {
  display: flex;
  gap: 1rem;
  width: 100%;
  justify-content: flex-end;
}

.banner-card {
  flex: 1;
  width: 100%;
  max-width: 305px;
  position: relative;
  background-color: var(--card-bg);
  border-radius: 0.375rem;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease-out;
  display: block;
}

.banner-card:hover { transform: translateY(-3px); }

.card-casino {
  background-image: radial-gradient(ellipse 100% 74.33% at 50% 100%, rgba(0, 119, 219, 0.5) 0%, rgba(0, 119, 219, 0.5) 100%);
}

.card-sports {
  background-image: radial-gradient(ellipse 100% 74.33% at 50% 100%, rgba(100.27, 122.79, 159.38, 0.5) 0%, rgba(22, 30, 43, 0.5) 100%);
}

.card-image-wrap {
  height: 200px;
  position: relative;
  border: 2px solid rgba(22, 30, 43, 0.1);
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0;
  overflow: hidden;
}

.card-image-wrap.border-light { border-color: rgba(255, 255, 255, 0.06); }
.card-image-wrap img { width: 100%; height: 100%; object-fit: cover; }

.banner__card-footer {
  height: 46px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(to right, rgba(166, 214, 255, 0.15), rgba(34, 154, 255, 0.15));
}

.footer-sports {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.06);
}

.card-footer-content {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  width: 100%;
}

.banner__card-title {
  color: white;
  font-size: 17px;
  font-weight: 600;
}

.arrow-icon { margin-left: auto; display: none; }

/* Адаптивность */
@media (min-width: 1100px) {
  .card-image-wrap { height: 241px; }
  .banner__card-title { font-size: 1.325rem; }
  .arrow-icon { display: block; }
}

@media (max-width: 1349px) {
  .banner-container { flex-direction: column; }
  .user-info { margin: 0 auto; text-align: center; max-width: 570px; }
  .banners-wrapper { justify-content: center; align-items: center; }
}

@media (max-width: 540px) {
  .value-divider, .value-target { display: none; }
}

@media (max-width: 410px) {
  .banners-wrapper { flex-direction: column; }
  .banner-card { max-width: 100%; }
}






/* BONUS */
.raffle-drop-down_raffle-drop-down-container__BvjHu {
    border-bottom: 1px solid rgba(226, 179, 15, .502);
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    -webkit-align-items: center;
    align-items: center;
    box-sizing: border-box;
    position: relative;
    min-height: 62px;
    background: #191f3b;
    transition: background .15s ease;
    cursor: pointer;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu:before {
    background: linear-gradient(180deg, rgba(226, 179, 15, .25), rgba(252, 224, 77, .25));
    opacity: 1;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu:after, .raffle-drop-down_raffle-drop-down-container__BvjHu:before {
    content: "";
    position: absolute;
    inset: 0;
    transition: opacity .15s ease;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_left-side__WzcA8 {
    display: -webkit-flex;
    display: flex;
    gap: 10px;
    z-index: 1;
    position: relative;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_right-side__u65UA {
    display: -webkit-flex;
    display: flex;
    gap: 5px;
    z-index: 1;
    position: relative;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu:after {
    background: radial-gradient(100% 100% at 50% 0, rgba(252, 224, 77, .25) 0, rgba(252, 224, 77, 0) 100%), linear-gradient(180deg, rgba(226, 179, 15, .25), rgba(252, 224, 77, .25));
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_left-side__WzcA8 .raffle-drop-down_icon-container__5oREM {
    margin-bottom: -25px;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_icon-container__5oREM {
    -webkit-animation: raffle-drop-down_returnAnimation__q29ZV .15s ease forwards;
    animation: raffle-drop-down_returnAnimation__q29ZV .15s ease forwards;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_left-side__WzcA8 .raffle-drop-down_heading-container__Owd_f {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_left-side__WzcA8 .raffle-drop-down_heading-container__Owd_f .raffle-drop-down_title__cYlmH {
    padding-top: 2px;
    font-style: italic;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    background: linear-gradient(181.17deg, #fff 39.55%, #e7e6de 99%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-wrap: nowrap;
    text-shadow: 0 0 18.0339px hsla(0, 0%, 100%, .5);
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_left-side__WzcA8 .raffle-drop-down_heading-container__Owd_f .raffle-drop-down_sub-title__QgTWL {
    font-style: italic;
    font-weight: 700;
    font-size: 13px;
    line-height: 100%;
    padding: 2px 2px 2px 0;
    text-wrap: nowrap;
    text-transform: uppercase;
    background: linear-gradient(189.63deg, #fff 11.2%, #ffd706 97.93%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0 0 18.0339px rgba(222, 181, 52, .5);
}


.raffle-drop-down_raffle-drop-down-container__BvjHu:hover:before {
    opacity: 0;
}

.raffle-drop-down_raffle-drop-down-container__BvjHu:hover .raffle-drop-down_icon-container__5oREM {
    -webkit-animation: raffle-drop-down_exitAnimation__ejddE .15s ease forwards;
    animation: raffle-drop-down_exitAnimation__ejddE .15s ease forwards;
}
.raffle-drop-down_raffle-drop-down-container__BvjHu .raffle-drop-down_icon-container__5oREM {
    -webkit-animation: raffle-drop-down_returnAnimation__q29ZV .15s ease forwards;
    animation: raffle-drop-down_returnAnimation__q29ZV .15s ease forwards;
}
.bonusPopUpIcons svg {
	width: 45px;
	height: 45px;
}




/* AUTH */


.Auth_auth-container__ffgHW {
    max-width: 900px;
    min-height: 700px;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    position: relative;
	background: #262C4B;
}
.Auth_auth-container__ffgHW .Auth_left-container__TFnFp {
    /* display: -webkit-flex; */
    /* display: flex; */
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 396px;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    position: relative;
}
.auth__socials button {
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s;
	background-color: rgb(51 57 91);
	border: 1px solid hsla(0, 0%, 100%, .05);
}
.auth__socials button:hover {
	background-color: hsla(0, 0%, 100%, .05);
}
.Auth_checkbox-container__nrLzY {
    display: -webkit-flex;
    display: flex;
}
.Auth_checkbox-container__nrLzY input[type=checkbox]+label {
    position: relative;
    padding-left: 35px;
    margin-top: 5px;
    color: #7179a5;
    line-height: 1.4;
    font-size: 13px;
    transition: all .3s ease;
}
.Auth_checkbox-container__nrLzY label {
    cursor: pointer;
    padding: 0;
}
.Auth_checkbox-container__nrLzY input[type=checkbox]+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 40%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 1px solid #7179a5;
    border-radius: 4px;
    background-color: transparent;
    cursor: pointer;
    transition: all .3s ease;
}
.Auth_checkbox-container__nrLzY input[type=checkbox]:checked+label:before {
    background-color: #7179a5;
    border-color: #abb0c5;
}

.Auth_checkbox-container__nrLzY input[type=checkbox]:checked+label:after {
    content: "";
    position: absolute;
    left: 7px;
    top: 36%;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
}

.mobile_p {
	font-size: 12px;
    font-weight: 400;
}
.mobile-menu svg {
	width: 21px;
	height: 21px;
}











/* STATIC */

.liq-effect {
  --border-width: 2px;
  /* Размеры и позиционирование */
  position: relative;
  /* Текст и цвет */
  transition: transform var(--anim--hover-time) var(--anim--hover-ease);
  --base-color: 255, 255, 255;
  --blur-effect: 4px;
  --opacity-effetc1: 0.03;
  --opacity-effetc2: 0.01;
  --opacity-effetc3: 0.03;

  /* Принудительный перенос на GPU */
    transform: translateZ(0); 
    /* will-change: opacity, filter; */
    
    /* Изоляция слоя, чтобы расчеты внутри не влияли на элементы снаружи */
    isolation: isolate;
    
    /* Убираем "мыло" при рендеринге на GPU */
    backface-visibility: hidden;
    /* perspective: 1000px; */

	border-radius: 6px !important;
	background: #191F3B !important;
	border: 1px solid #242945;
}

/* Слой 1: Фон кнопки (Стекло) */
.liq-effect::before {
  /* content: ''; */
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(
    -75deg,
    rgba(var(--base-color), var(--opacity-effetc1)),
    rgba(var(--base-color), var(--opacity-effetc2)),
    rgba(var(--base-color), var(--opacity-effetc3))
  );
  /* Тени и блики */
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.1),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0 0.1em inset rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(var(--blur-effect));
  transition: background var(--anim--hover-time) var(--anim--hover-ease);
  pointer-events: none;
}

/* Слой 2: Вращающаяся рамка */
.liq-effect::after {
  /* content: ""; */
  position: absolute;
  z-index: 2;
  /* Поверх фона, но маска сделает центр прозрачным */
  inset: 0;
  /* Привязываемся к краям родителя */
  /* Компенсируем толщину рамки отрицательными отступами, 
       либо используем calc в inset, если нужно, 
       но твой вариант с top/left тоже рабочий: */
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  border-radius: inherit;
  padding: var(--border-width);
  box-sizing: border-box;
  pointer-events: none;
  /* Чтобы рамка не перехватывала клики */
  /* Вращающийся градиент */
  background: conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
  /* Маска (вырезает дырку внутри) */
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  transition: --angle-1 500ms ease;
}






/* BUTTON */

/* --- BUTTON MAIN --- */
.liq-effect__button {
  --border-width: 2px;
  /* Базовый цвет (по умолчанию белый, перебивается инлайном) */
  --base-color: 255, 255, 255;
  --blur-effect: 4px;
  --opacity-effetc1: 0.3;
  --opacity-effetc2: 0.1;
  --opacity-effetc3: 0.3;
  
  position: relative;
  isolation: isolate; /* Создает контекст наложения */
  transition: transform var(--anim--hover-time) var(--anim--hover-ease);

  /* Каждая кнопка — отдельный слой для видеокарты */
    transform: translate3d(0, 0, 0); 
    /* Сглаживание краев при трансформации */
    -webkit-font-smoothing: antialiased;
    /* Если кнопки накладываются друг на друга, это ускорит их отрисовку */
    contain: layout style;
}

/* Слой 1: ФОН + БЛИК (Самое важное изменение тут) */
.liq-effect__button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  /* МНОЖЕСТВЕННЫЕ ФОНЫ:
     1. Градиент БЛИКА (Сверху). Прозрачный-Белый-Прозрачный.
     2. Градиент СТЕКЛА (Снизу). Цветной.
  */
  background-image: 
    /* [1] БЛИК (Glare) */
    linear-gradient(
      var(--angle-2), 
      rgba(var(--base-color), 0) 20%, 
      rgba(var(--base-color), 0.2) 40%, 
      rgba(var(--base-color), 0.2) 50%, /* Самая яркая точка блика */
      rgba(var(--base-color), 0.1) 60%, 
      rgba(var(--base-color), 0) 80%
    ),
    /* [2] СТЕКЛО (Glass Base) */
    linear-gradient(
      -75deg,
      rgba(var(--base-color), var(--opacity-effetc1)),
      rgba(var(--base-color), var(--opacity-effetc2)),
      rgba(var(--base-color), var(--opacity-effetc3))
    );

  /* РАЗМЕРЫ ФОНОВ:
     Блик делаем широким (200%), чтобы он мог "проезжать" мимо.
     Стекло по размеру блока (100%).
  */
  background-size: 200% 200%, 100% 100%;

  /* ПОЗИЦИЯ:
     Блик сдвинут влево (0% 50%) или вправо, чтобы его не было видно в покое.
     Стекло стоит на месте.
  */
  background-position: 0% 50%, 0% 0%;
  
  /* Смешивание слоев (аналог mix-blend-mode, но для фонов) */
  background-blend-mode: overlay, normal;

  /* Тени и размытие */
  box-shadow:
    inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05),
    inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.1),
    0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2),
    0 0 0 0.1em inset rgba(255, 255, 255, 0.05);
    
  backdrop-filter: blur(var(--blur-effect));
  
  /* Анимируем позицию фона */
  transition: 
    background-position 0.6s cubic-bezier(0.25, 1, 0.5, 1),
    background-image var(--anim--hover-time) ease;
}

/* Слой 2: Вращающаяся рамка (Без изменений) */
.liq-effect__button::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  top: calc(0% - var(--border-width) / 2);
  left: calc(0% - var(--border-width) / 2);
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  border-radius: inherit;
  padding: var(--border-width);
  box-sizing: border-box;
  pointer-events: none;
  
  background: conic-gradient(from var(--angle-1) at 50% 50%,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0) 5% 40%,
      rgba(var(--base-color), 1) 50%, /* Используем базовый цвет для яркости */
      rgba(0, 0, 0, 0) 60% 95%,
      rgba(0, 0, 0, 0.5)),
    linear-gradient(
      180deg, 
      rgba(var(--base-color), 0.2), 
      rgba(var(--base-color), 0.05)
    );
    
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  
  transition: --angle-1 500ms ease;
}

/* --- HOVER ЭФФЕКТЫ --- */

/* 1. Запускаем блик */
.liq-effect__button:hover::before {
    /* Сдвигаем градиент блика вправо (на 100%), создавая эффект пролета света */
    background-position: 30% 50%, 0% 0%;
}

/* 2. Вращаем рамку */
.liq-effect__button:hover::after, .liq-effect__button:focus::after {
    --angle-1: -125deg;
}

/* 3. Клик */
.liq-effect__button:active {
    transform: scale(0.98);
}
.liq-effect__button:active::after {
    --angle-1: -75deg;
}


button, input, optgroup, select, textarea {
	font-family: "Montserrat", sans-serif !important;
}