@import 'tailwindcss';

* {
	outline: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

html,
body {
	margin: 0;
	padding: 0;
	border: none;
}

body.lock {
	overflow: hidden;
}

::-webkit-scrollbar {
	width: 3px;
	/* Set width for vertical scrollbar */
	height: 3px;
	/* Set height for horizontal scrollbar */
}

/* Style the scrollbar track */
::-webkit-scrollbar-track {
	background: #3b3b3d;
	border-radius: 6px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: #0e0f14;
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	background-color: #0e0f14;
	color: #e5e7eb;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
	background-color: #ffc300;
}

.dark {
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #ebedf0;
	}

	::-webkit-scrollbar {
		width: 5px;
		background-color: #ebedf0;
	}

	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		background-color: #ffc300;
	}
}
.nav-account {
	&::-webkit-scrollbar {
		/* Set width for vertical scrollbar */
		height: 1px;
		/* Set height for horizontal scrollbar */
	}
}
/* Style the scrollbar thumb
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 6px;
} */

/* Style the scrollbar thumb on hover
::-webkit-scrollbar-thumb:hover {
  background: #555;
} */

#tab-content-chart {
	height: calc(100% - 44px);
	/* 44px — высота табов и отступов */
	min-height: 0;
}

.tradingview-widget-container {
	height: 100% !important;
	min-height: 0;
	/* color: #2d2f33; */
	/* color: #6c6d74; */
}

.tradingview-widget-container__widget {
	height: 100% !important;
	min-height: 0;
}

select {
	-webkit-appearance: none;
	/* Для Safari и Chrome */
	-moz-appearance: none;
	/* Для Firefox */
	appearance: none;
	/* Для других браузеров */
	background-image: url('../img/icons/chevron.svg');
	/* Добавьте фоновое изображение */
	background-repeat: no-repeat;
	background-size: 25px;
	background-position: right center;
}

.trade-idetails,
.order-book-item {
	white-space: nowrap;
	/* display: flex;
  align-items: center; */
	/* position: absolute; */
	/* left: 0; */
	/* right: 0; */
	height: 20px;
	cursor: pointer;
	padding: 2px 0;
	line-height: 20px;
	list-style: none;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	overflow: hidden;

	span {
		display: inline-block;
		text-align: right;
		font-size: 12px;
		font-weight: 500;
		-webkit-box-flex: 1;
		-ms-flex: 1;
		flex: 1;
		color: #fcfdff;
		width: 33%;
		text-align: right;
	}

	span:first-child {
		color: #f13c54;
		text-align: left;
	}
}

/* .trade-idetails {
  span {
    width: 50%;
  }
}

.order-book-item {
  width: 33%;

  span:first-child {
    color: #f13c54;
  }
} */
.blit-body {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: 1fr 2fr;
	grid-template-columns: 1fr 2fr;

	font-size: 12px;
	font-weight: 500;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	color: #fcfdff;
	/* padding: 2px 16px; */
}

.blit-item {
	position: relative;
	line-height: 20px;
	cursor: pointer;
	margin: 2px 0;
	-webkit-transition: 0.2s ease;
	-o-transition: 0.2s ease;
	transition: 0.2s ease;
}

.blit-item:hover {
	background-color: #2d2d2e;
}

.blit-price {
}

.blit-price.up {
	color: #04b97d;
}

.blit-price.down {
	color: #f13c54;
}

.blit-progrees {
	position: absolute;
	right: 0;
	top: 1px;
	z-index: 1;
	bottom: 1px;
	width: 100%;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	-o-transition-property: transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	-o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-transition-duration: 0.15s;
	-o-transition-duration: 0.15s;
	transition-duration: 0.15s;
}

.blitp-layout {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	-webkit-transition: 0.2s ease;
	-o-transition: 0.2s ease;
	transition: 0.2s ease;
}

.blitp-layout.down {
	background-color: rgba(241, 60, 84, 0.14);
}

.blitp-layout.up {
	background-color: rgba(4, 185, 125, 0.14);
}

.blit-data {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: (1fr) [2];
	grid-template-columns: repeat(2, 1fr);
	text-align: right;
}

.trade-iprice.up {
	color: #04b97d !important;
}

.trade-iprice.down {
	color: #f13c54 !important;
}

.gradient-title {
	span {
		background: -o-linear-gradient(347.12deg, #b094f7 0%, #ffffff 100%);
		background: linear-gradient(102.88deg, #b094f7 0%, #ffffff 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		text-fill-color: transparent;
	}
}

.account {
	font-family: 'Inter', sans-serif;

	aside {
		font-family: 'Noto Sans', sans-serif;
	}
}

.balance-card::before {
	position: absolute;
	inset: 10px;
	content: '';
	border-radius: inherit;
	pointer-events: none;

	background: rgba(14, 199, 57, 0.3);
	-webkit-filter: blur(75px);
	filter: blur(75px);
}

.balance-card::after {
	position: absolute;
	inset: 0;
	content: '';
	background: -o-linear-gradient(
		137deg,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.1)
	);
	background: linear-gradient(
		-47deg,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.1)
	);
	-webkit-mask: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, #fff)
			)
			content-box,
		-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 2;
	opacity: 0.35;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
}

.block-account::after {
	position: absolute;
	opacity: 0.35;
	inset: 0;
	content: '';
	background: -o-linear-gradient(
		142deg,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.1)
	);
	background: linear-gradient(
		-52deg,
		rgba(255, 255, 255, 1),
		rgba(255, 255, 255, 0.1)
	);
	-webkit-mask: -webkit-gradient(
				linear,
				left top,
				left bottom,
				color-stop(0, #fff)
			)
			content-box,
		-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	z-index: 2;
	padding: 1px;
	border-radius: inherit;
	pointer-events: none;
}

.show {
	-webkit-transform: translateX(0) !important;
	-ms-transform: translateX(0) !important;
	transform: translateX(0) !important;
	opacity: 1 !important;
	pointer-events: all !important;
}

.access-item:first-child:before {
	position: absolute;
	content: '';
	height: 1px;
	width: 100%;
	top: 0;
	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(#292929),
		color-stop(49%, rgba(255, 255, 255, 0.5)),
		to(#292929)
	);
	background: -o-linear-gradient(
		left,
		#292929,
		rgba(255, 255, 255, 0.5) 49%,
		#292929
	);
	background: linear-gradient(
		to right,
		#292929,
		rgba(255, 255, 255, 0.5) 49%,
		#292929
	);
}

.access-item::after {
	position: absolute;
	content: '';
	height: 1px;
	width: 100%;
	bottom: 0;

	background: -webkit-gradient(
		linear,
		left top,
		right top,
		from(#292929),
		color-stop(49%, rgba(255, 255, 255, 0.5)),
		to(#292929)
	);

	background: -o-linear-gradient(
		left,
		#292929,
		rgba(255, 255, 255, 0.5) 49%,
		#292929
	);

	background: linear-gradient(
		to right,
		#292929,
		rgba(255, 255, 255, 0.5) 49%,
		#292929
	);
}

.modal {
	display: none;
}

.modal.show {
	display: block;
}

body.modal-open {
	overflow: hidden;
}

@-webkit-keyframes spinBreathe {
	0% {
		-webkit-transform: rotate(0deg) scaleX(0.5);
		transform: rotate(0deg) scaleX(0.5);
		width: 40px;
	}

	50% {
		-webkit-transform: rotate(180deg) scaleX(0.8);
		transform: rotate(180deg) scaleX(0.8);
		width: 84px;
	}

	100% {
		-webkit-transform: rotate(360deg) scaleX(0.5);
		transform: rotate(360deg) scaleX(0.5);
		width: 40px;
	}
}

@keyframes spinBreathe {
	0% {
		-webkit-transform: rotate(0deg) scaleX(0.5);
		transform: rotate(0deg) scaleX(0.5);
		width: 40px;
	}

	50% {
		-webkit-transform: rotate(180deg) scaleX(0.8);
		transform: rotate(180deg) scaleX(0.8);
		width: 84px;
	}

	100% {
		-webkit-transform: rotate(360deg) scaleX(0.5);
		transform: rotate(360deg) scaleX(0.5);
		width: 40px;
	}
}

.animate-spin-breathe {
	-webkit-animation: spinBreathe 4s ease-in-out infinite;
	animation: spinBreathe 4s ease-in-out infinite;
	display: block;
	width: 84px;
}

@-webkit-keyframes smooth-pulse {
	0% {
		-webkit-transform: translate(-50%, -50%) scale(0.8);
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 0.8;
	}

	100% {
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

@keyframes smooth-pulse {
	0% {
		-webkit-transform: translate(-50%, -50%) scale(0.8);
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 0.8;
	}

	100% {
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

.pulse-circle {
	-webkit-animation: smooth-pulse 2.4s ease-out infinite;
	animation: smooth-pulse 2.4s ease-out infinite;
}

.delay-\[0\.4s\] {
	-webkit-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.delay-\[0\.8s\] {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

@-webkit-keyframes spinning {
	to {
		rotate: 360deg;
	}
}

@keyframes spinning {
	to {
		rotate: 360deg;
	}
}

/* Marquee */

.marquee-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	pointer-events: none;
}

.marquee-container {
	overflow: hidden;
	position: relative;
	margin: 5px 0;
}

.marquee-track {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 10px;
}

.marquee-inner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	will-change: transform;
	gap: 10px;
	text-wrap: nowrap;
}

aside {
	height: 100dvh;
}

@-webkit-keyframes scroll-left {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@keyframes scroll-left {
	0% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	100% {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
}

@-webkit-keyframes scroll-right {
	0% {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

@keyframes scroll-right {
	0% {
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

/* Marquee */
@media (min-width: 2200px) {
	.balance-card {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
}

/* Фон заголовка при открытом аккордеоне */
[data-accordion-item].active [data-accordion-title] {
	background-color: #29313d;
	/* или твой цвет */
}

.dark {
	[data-accordion-item].active [data-accordion-title] {
		background-color: rgba(10, 10, 10, 0.1);
		/* или твой цвет */
	}
}

/* Поворот стрелки */
[data-accordion-item].active [data-accordion-title] > span:last-child {
	transform: rotate(180deg);
	transition: transform 0.3s ease-in-out;
}

/* Чтобы анимация работала при закрытии тоже */
[data-accordion-title] > span:last-child {
	transition: transform 0.3s ease;
}

.hover-animate {
	transform: perspective(1px) scale(0.75) translate(0, 0);
	transform-origin: 50% 0;
	transition: transform 0.2s cubic-bezier(0.5, 0, 0, 1.25),
		opacity 0.15s ease-out;
}

[data-select] [data-select-btn]::after {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	right: 10px;
	top: 50%;
	translate: 0 -50%;
	mask: url('../img/icons/chevron.svg') center/contain no-repeat;
	-webkit-mask: url('../img/icons/chevron.svg') center/contain no-repeat;
	background-color: #969faf;
}

[data-tokens-btn] .coin-name {
	display: none;
}

/* For Webkit-based browsers (Chrome, Safari, Edge, Opera) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* For Firefox */
input[type='number'] {
	-moz-appearance: textfield;
}

@media (min-width: 1024px) {
	.hover-wrap:hover .hover-animate {
		transform: perspective(1px) scale(1);
	}
}

@media (max-width: 1024px) {
	.hover-animate {
		transform: translate(-50%, -100%);
	}

	.visible.hover-animate {
		transform: translate(-50%, 12px);
	}
}