@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

*,
*::after,
*::before {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

ul,
li {
	list-style: none;
}

body {
	background: linear-gradient(180deg, #1C2131 0%, #151924 100%);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1;
	position: relative;
	min-height: 100vh;
}

.d-flex {
	display: flex;
}

.gap-2 {
	gap: 2rem;
}

.container {
	max-width: 1240px;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
	margin: 0 auto;
}

.header {
	padding: 35px 0;
}

.header__logo {
	font-size: 36px;
	line-height: 100%;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	font-feature-settings: 'pnum' on, 'lnum' on;
	color: #FFFFFF;
}

.header__line {
	display: block;
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, #B1A007 4.13%, #1C2131 101.35%);
}

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

.header__user p {
	font-size: 24px;
}

.user--balance {
	display: flex;
	justify-content: space-between;
}



span[data-user-balance] {
	border-radius: 50px;
	border: 1px solid #FFF;
	padding: 7px 17px;
	color: #FFF;
	font-size: 20px;
	font-weight: 800;
	line-height: 100%;
	letter-spacing: -0.66px;
}

span[data-user-balance].torg {
	border: none;
}

/* Modal New User End  */

/*  */
.user--balance_row {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.balance-flex {
	display: flex;
	gap: 1rem;
	color: #ffffff;
}

.balance-flex span {
	width: 70px;
}

/*  */

/* Aside Start */
.aside--flex {
	display: flex;
	justify-content: space-between;
	padding: 0rem 2rem 0rem 0rem;
}

.aside {
	overflow-y: scroll;
	min-height: 200px;
	max-height: 500px;
	max-width: 780px;
	width: 100%;
}

.aside::-webkit-scrollbar {
	display: none;
}

.apexcharts-toolbar {
	display: none !important;
}

.aside-transactions-latest {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aside-transactions-latest__title {
	color: #fff;
	font-size: 18px;
}

.aside-transactions-latest li {
	display: flex;
	padding: 6px 8px;
}

.aside-transactions-latest li span {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.li--deal span {
	font-size: 20px;
	color: #fff;
	/* text-align: center; */
}

.li__success--trade {
	background-color: rgb(46, 184, 92);
}

.li__lost--trade {
	background-color: rgb(229, 83, 83);
}

/* .row__success--trade {
	color: #00FF47 !important;
}

.row__lost--trade {
	color: #F23645 !important;
} */

.row--company {
	color: #fff;
}

/* Aside End */

.info-row {
	background-color: #242A3D;
	display: flex;
	align-items: center;
}

.info-row__container {
	display: flex;
	align-items: center;
	height: 78px;
}

.user-row {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 100px;
}

.user-row_info {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 18px;
	position: relative;
}

.user-row_info::after {
	position: absolute;
	content: "";
	width: 5px;
	height: 100%;
	background-color: #313851;
	right: -52px;
}

.user-row_info:last-child::after {
	content: none;
}

.user-row-title {
	font-size: 18px;
	color: rgba(255, 255, 255, 0.5);
}

.user-row-num {
	font-weight: 500;
	font-size: 22px;
	color: #FFFFFF;
}

.user-row-deals {
	font-size: 34px;
	color: #E5CF09;
	font-weight: 600;
}

.main__title {
	margin: 50px 0;
	text-align: center;
	color: #ffffff;
	text-transform: uppercase;
	font-size: 26px;
}

.main__title span {
	color: #089981;
}

.buttons-row {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: auto;
}

.button-trading {
	width: 170px;
	height: 42px;
	border-radius: 6px;
	text-transform: uppercase;
	font-size: 20px;
	color: #ffffff;
	letter-spacing: -0.03em;
	border: none;
	cursor: pointer;
}

.button-trading:disabled {
	cursor: not-allowed
}

.button-trading.trading-start {
	background-color: #089981;
	position: relative;
}

.button-trading.trading-start span {
	border: 1px solid #F23645;
	position: absolute;
	width: max-content;
	top: -40px;
	left: -50px;
	padding: 0.125rem;
	animation: pulse 1.5s ease-in-out infinite;
}

.button-trading.trading-start:active,
.button-trading.trading-stop:active {
	box-shadow: 3px 3px 4px #000;
	transform: translateY(2px);
}

.button-trading.trading-stop {
	background-color: transparent;
	border: 1px solid #F23645;
}

/*  */

._error {
	background-color: rgb(255, 0, 0, 0.6) !important;
	border: 1px solid rgb(255, 0, 0, 0.6) !important;
	color: #fff !important;
}

._error::placeholder {
	color: #fff !important;
}

._valid {
	background-color: rgb(0, 128, 0) !important;
	border: 1px solid rgb(0, 128, 0) !important;
	color: #000 !important;
}

._show {
	display: block;
}

._hideOpacity {
	opacity: 0;
}

._hide {
	display: none;
}

._hide_visibility {
	animation: hideElement 1s;
}

@keyframes hideElement {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}

	100% {
		opacity: 0;
	}
}

/*  */
.toggle-items {
	max-width: 400px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.tg-list-item {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.tg-list-item p {
	font-size: 1.25rem;
	text-transform: uppercase;
	color: #fff;
}

.tgl {
	display: none;
}

.tgl,
.tgl:after,
.tgl:before,
.tgl *,
.tgl *:after,
.tgl *:before,
.tgl+.tgl-btn {
	box-sizing: border-box;
}

.tgl::selection,
.tgl:after::selection,
.tgl:before::selection,
.tgl *::selection,
.tgl *:after::selection,
.tgl *:before::selection,
.tgl+.tgl-btn::selection {
	background: none;
}

.tgl+.tgl-btn {
	outline: 0;
	display: block;
	width: 4em;
	height: 2em;
	position: relative;
	cursor: pointer;
	user-select: none;
}

.tgl+.tgl-btn:after,
.tgl+.tgl-btn:before {
	position: relative;
	display: block;
	content: "";
	width: 50%;
	height: 100%;
}

.tgl+.tgl-btn:after {
	left: 0;
}

.tgl+.tgl-btn:before {
	display: none;
}

.tgl:checked+.tgl-btn:after {
	left: 50%;
}

.tgl-light+.tgl-btn {
	background: #f0f0f0;
	border-radius: 2em;
	padding: 2px;
	transition: all 0.4s ease;
}

.tgl-light+.tgl-btn:after {
	border-radius: 50%;
	background: #fff;
	transition: all 0.2s ease;
}

.tgl-light:checked+.tgl-btn {
	background: #9fd6ae;
}

/*  */

@media screen and (max-width: 992px) {
	#content-chart {
		display: flex;
		flex-direction: column-reverse;
	}

	.info-row__container {
		flex-direction: column;
		height: auto;
		padding: 1rem 0;
		gap: 1.5rem;
	}

	.buttons-row {
		margin: 0 auto;
		flex-direction: column;
	}

	.user-row {
		flex-direction: column;
		gap: 0.75rem;
	}

	.user-row_info::after {
		display: none;
	}

	.aside--flex {
		flex-direction: column-reverse;
		padding: .5rem;
		gap: 2rem;
		align-items: center;
	}

	.aside.aside-transactions .container {
		padding: 0;
	}

	.info-row__container {
		gap: 2.5rem;
	}

	.button-trading.trading-start span {
		left: initial;
		top: initial;
		transform: initial;
		top: -2.25rem;
		margin-left: -2.5rem;
		font-size: 1rem;
		/* left: 50%; */
	}
}

@media screen and (max-width: 768px) {
	.flex-column {
		flex-direction: column;
		align-items: center;
	}

	.header {
		padding: 20px 0;
	}

	.header__user p {
		font-size: 1.25rem;
	}

	span[data-user-balance] {
		padding: 0.4rem 0.6rem;
		font-size: 1.15rem;
	}

	.balance-flex span {
		font-size: 1rem;
	}

	.aside-transactions-latest__title {
		font-size: 0.9rem;
	}

	.li--deal span {
		font-size: 0.9rem;
	}

	.aside-transactions-latest li {
		padding: 4px 2px;
	}

	.main__title {
		margin: 20px;
		font-size: 1.5rem;
	}

	.user-row-title {
		font-size: 1rem;
	}

	.user-row-deals {
		font-size: 1.75rem;
	}
}


@media screen and (max-width: 640px) {
	.header__user {
		flex-direction: column;
	}
}