@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--blue-1: #5755FE;
	--blue-2: #7977FE;
	--blue-3: #8A88FF;
	--blue-4: #AAABFF;

	--violet-1: #9578FA;
	--violet-2: #A58CFA;
	--violet-3: #B5A1FC;
	--violet-4: #C5B5FC;

	--purple-1: #CECCFF;
	--purple-2: #DAD9FF;
	--purple-3: #E7E6FF;
	--purple-4: #F2F2FF;

	--neutral-1: #0E0C34;
	--neutral-2: #222048;
	--neutral-3: #37345B;
	--neutral-4: #4C4A6E;
	--neutral-5: #626081;
	--neutral-6: #797795;
	--neutral-7: #908FAA;
	--neutral-8: #A8A7BF;
	--neutral-9: #C1C1D4;
	--neutral-10: #DBDBE9;
	--neutral-11: #F5F5FF;

	--system-main-1: #9578FA;
	--system-main-2: #5C93FF;
	--system-main-3: #50CC55;
	--system-main-4: #FEB63D;
	--system-main-5: #F4783C;
	--system-main-6: #FF5556;

	--system-light-1: #F2F2FF;
	--system-light-2: #E7EFFF;
	--system-light-3: #E5F8E6;
	--system-light-4: #FEF4E3;
	--system-light-5: #FEEBE2;
	--system-light-6: #FFE6E6;
}

* {
	outline: none !important;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
}

	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	::-webkit-scrollbar-track {
		background: #FFFFFF1A;
		border-radius: 500px;
	}

	::-webkit-scrollbar-thumb {
		background: #FFFFFF33;
		border-radius: 500px;
	}

	::-webkit-scrollbar-button {
		display: none;
	}

	html, body {
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		overflow: hidden;
	}

	body {
		background-color: #FFFFFF;
		font-family: 'Montserrat', sans-serif;
		-webkit-tap-highlight-color: transparent !important;
		color: #000000;
		font-size: 14px;
	}

	div {
		box-sizing: border-box;
	}

	a {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	hr {
		border: 0;
		border-bottom: 1px solid var(--text-muted);
		width: 100%;
		margin: 4px 0;
	}

	textarea {
		font-family: 'Roboto', sans-serif;
	}

	textarea::placeholder {
		color: var(--text-muted);
	}

	input {
		font-family: Montserrat;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.input {
		border: 0;
		background-color: inherit;
		color: white;
		font-size: 16px;
		font-family: Montserrat;
		font-weight: normal;
		text-align: left;
		padding: 16px;
		min-width: 0;
		-moz-appearance: textfield;
	}

	.input::placeholder {
		color: var(--text-muted);
	}

	.input::-webkit-outer-spin-button, .input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	.flex-c {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.flex-c-e {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.flex-c-c {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.flex-c-s {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.flex-r {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.flex-r-e {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
	}

	.flex-r-c {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-r-s {
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.flex-cr {
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	.flex-cr-e {
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-end;
	}

	.flex-cr-c {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
	}

	.flex-cr-s {
		display: flex;
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.flex-rr {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
	}

	.flex-rr-e {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-end;
	}

	.flex-rr-c {
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.flex-rr-s {
		display: flex;
		flex-direction: row-reverse;
		align-items: stretch;
	}

	.flex-grow {
		flex: 1;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.wrap-reverse {
		flex-wrap: wrap-reverse;
	}

	.just-start {
		justify-content: flex-start;
	}

	.just-center {
		justify-content: center;
	}

	.just-end {
		justify-content: flex-end;
	}

	.just-around {
		justify-content: space-around;
	}

	.just-between {
		justify-content: space-between;
	}

	.just-evenly {
		justify-content: space-evenly;
	}

	.just-stretch {
		justify-content: stretch;
	}

	.align-start {
		align-self: flex-start;
	}

	.align-end {
		align-self: flex-end;
	}

	.align-center {
		align-self: center;
	}

	.align-stretch {
		align-self: stretch;
	}

	.flex-hard {
		flex-grow: 0;
		flex-shrink: 0;
	}

	.flex-shrink {
		flex-shrink: 1;
	}

	.flex-grow {
		flex-grow: 1;
	}

	.child-flex-hard>* {
		flex-grow: 0;
		flex-shrink: 0;
	}

	.flex-fluid {
		-webkit-flex-grow: 1;
		-webkit-flex-shrink: 1;
		flex-grow: 1;
		flex-shrink: 1;
		overflow: hidden;
	}

	.flex-basis-50 {
		flex-basis: 50%;
	}

	.gap-2 {
		gap: 2px;
	}

	.gap-4 {
		gap: 4px;
	}

	.gap-8 {
		gap: 8px;
	}

	.gap-12 {
		gap: 12px;
	}

	.gap-16 {
		gap: 16px;
	}

	.gap-24 {
		gap: 24px;
	}

	.gap-32 {
		gap: 32px;
	}

	.gap-40 {
		gap: 40px;
	}

	.scroll-y {
		overflow-y: auto;
		overflow-x: hidden;
	}

	.scroll-y-o {
		overflow-y: auto;
		will-change: contents;
		-webkit-overflow-scrolling: touch;
	}

	.scroll-x {
		overflow-x: auto;
		overflow-y: hidden;
	}

	.overflow-hidden {
		overflow: hidden;
	}

	.nowrap {
		white-space: nowrap;
	}

	.nodeco:hover {
		text-decoration: none;
	}

	.p-0 {
		padding: 0;
	}

	.p-0i {
		padding: 0 !important;
	}

	.py-0 {
		padding-top: 0;
		padding-bottom: 0;
	}

	.py-0i {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.px-0 {
		padding-left: 0;
		padding-right: 0;
	}

	.pt-0 {
		padding-top: 0;
	}

	.pt-0i {
		padding-top: 0 !important;
	}

	.pb-0 {
		padding-bottom: 0;
	}

	.pb-0i {
		padding-bottom: 0 !important;
	}

	.pl-0 {
		padding-left: 0;
	}

	.pl-0i {
		padding-left: 0 !important;
	}

	.pr-0 {
		padding-right: 0;
	}

	.p-1 {
		padding: 4px;
	}

	.p-1i {
		padding: 4px !important;
	}

	.py-1 {
		padding-top: 4px;
		padding-bottom: 4px;
	}

	.px-1 {
		padding-left: 4px;
		padding-right: 4px;
	}

	.pt-1 {
		padding-top: 4px;
	}

	.pb-1 {
		padding-bottom: 4px;
	}

	.pl-1 {
		padding-left: 4px;
	}

	.pr-1 {
		padding-right: 4px;
	}

	.p-2 {
		padding: 8px;
	}

	.p-2i {
		padding: 8px !important;
	}

	.py-2 {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.px-2 {
		padding-left: 8px;
		padding-right: 8px;
	}

	.pt-2 {
		padding-top: 8px;
	}

	.pb-2 {
		padding-bottom: 8px;
	}

	.pb-2i {
		padding-bottom: 8px !important;
	}

	.pl-2 {
		padding-left: 8px;
	}

	.pr-2 {
		padding-right: 8px;
	}

	.p-3 {
		padding: 12px;
	}

	.p-3i {
		padding: 12px !important;
	}

	.py-3 {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.px-3 {
		padding-left: 12px;
		padding-right: 12px;
	}

	.pt-3 {
		padding-top: 12px;
	}

	.pb-3 {
		padding-bottom: 12px;
	}

	.pb-3i {
		padding-bottom: 12px !important;
	}

	.pl-3 {
		padding-left: 12px;
	}

	.pr-3 {
		padding-right: 12px;
	}

	.p-4 {
		padding: 16px;
	}

	.p-4i {
		padding: 16px !important;
	}

	.py-4 {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.px-4 {
		padding-left: 16px;
		padding-right: 16px;
	}

	.pt-4 {
		padding-top: 16px;
	}

	.pb-4 {
		padding-bottom: 16px;
	}

	.pl-4 {
		padding-left: 16px;
	}

	.pl-4i {
		padding-left: 16px !important;
	}

	.pr-4 {
		padding-right: 16px;
	}

	.p-5 {
		padding: 24px;
	}

	.p-5i {
		padding: 24px !important;
	}

	.py-5 {
		padding-top: 24px;
		padding-bottom: 24px;
	}

	.px-5 {
		padding-left: 24px;
		padding-right: 24px;
	}

	.pt-5 {
		padding-top: 24px;
	}

	.pb-5 {
		padding-bottom: 24px;
	}

	.pl-5 {
		padding-left: 24px;
	}

	.pl-5i {
		padding-left: 24px !important;
	}

	.pr-5 {
		padding-right: 24px;
	}

	.p-6 {
		padding: 32px;
	}

	.p-6i {
		padding: 32px !important;
	}

	.py-6 {
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.px-6 {
		padding-left: 32px;
		padding-right: 32px;
	}

	.pt-6 {
		padding-top: 32px;
	}

	.pb-6 {
		padding-bottom: 32px;
	}

	.pl-6 {
		padding-left: 32px;
	}

	.pl-6i {
		padding-left: 32px !important;
	}

	.pr-6 {
		padding-right: 32px;
	}

	.p-7 {
		padding: 40px;
	}

	.p-7i {
		padding: 40px !important;
	}

	.py-7 {
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.px-7 {
		padding-left: 40px;
		padding-right: 40px;
	}

	.pt-7 {
		padding-top: 40px;
	}

	.pb-7 {
		padding-bottom: 40px;
	}

	.pl-7 {
		padding-left: 40px;
	}

	.pl-7i {
		padding-left: 40px !important;
	}

	.pr-7 {
		padding-right: 40px;
	}

	.p-8 {
		padding: 80px;
	}

	.p-8i {
		padding: 80px !important;
	}

	.py-8 {
		padding-top: 80px;
		padding-bottom: 80px;
	}

	.px-8 {
		padding-left: 80px;
		padding-right: 80px;
	}

	.pt-8 {
		padding-top: 80px;
	}

	.pb-8 {
		padding-bottom: 80px;
	}

	.pl-8 {
		padding-left: 80px;
	}

	.pl-8i {
		padding-left: 80px !important;
	}

	.pr-8 {
		padding-right: 80px;
	}

	.p-a {
		padding: auto;
	}

	.py-a {
		padding-top: auto;
		padding-bottom: auto;
	}

	.px-a {
		padding-left: auto;
		padding-right: auto;
	}

	.pt-a {
		padding-top: auto;
	}

	.pb-a {
		padding-bottom: auto;
	}

	.pl-a {
		padding-left: auto;
	}

	.pr-a {
		padding-right: auto;
	}

	.m-0 {
		margin: 0;
	}

	.my-0 {
		margin-top: 0;
		margin-bottom: 0;
	}

	.mx-0 {
		margin-left: 0;
		margin-right: 0;
	}

	.mt-0 {
		margin-top: 0;
	}

	.mb-0 {
		margin-bottom: 0;
	}

	.ml-0 {
		margin-left: 0;
	}

	.mr-0 {
		margin-right: 0;
	}

	.m-1 {
		margin: 4px;
	}

	.my-1 {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.mx-1 {
		margin-left: 4px;
		margin-right: 4px;
	}

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

	.mb-1 {
		margin-bottom: 4px;
	}

	.ml-1 {
		margin-left: 4px;
	}

	.ml-1i {
		margin-left: 4px !important;
	}

	.mr-1 {
		margin-right: 4px;
	}

	.mr-1i {
		margin-right: 4px !important;
	}

	.m-2 {
		margin: 8px;
	}

	.my-2 {
		margin-top: 8px;
		margin-bottom: 8px;
	}

	.mx-2 {
		margin-left: 8px;
		margin-right: 8px;
	}

	.mt-2 {
		margin-top: 8px;
	}

	.mt-2i {
		margin-top: 8px !important;
	}

	.mb-2 {
		margin-bottom: 8px;
	}

	.ml-2 {
		margin-left: 8px;
	}

	.ml-2i {
		margin-left: 8px !important;
	}

	.mr-2 {
		margin-right: 8px;
	}

	.mr-2i {
		margin-right: 8px !important;
	}

	.m-3 {
		margin: 12px;
	}

	.my-3 {
		margin-top: 12px;
		margin-bottom: 12px;
	}

	.mx-3 {
		margin-left: 12px;
		margin-right: 12px;
	}

	.mt-3 {
		margin-top: 12px;
	}

	.mb-3 {
		margin-bottom: 12px;
	}

	.ml-3 {
		margin-left: 12px;
	}

	.mr-3 {
		margin-right: 12px;
	}

	.m-4 {
		margin: 16px;
	}

	.my-4 {
		margin-top: 16px;
		margin-bottom: 16px;
	}

	.mx-4 {
		margin-left: 16px;
		margin-right: 16px;
	}

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

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

	.ml-4 {
		margin-left: 16px;
	}

	.mr-4 {
		margin-right: 16px;
	}

	.m-5 {
		margin: 24px;
	}

	.m-5i {
		margin: 24px !important;
	}

	.my-5 {
		margin-top: 24px;
		margin-bottom: 24px;
	}

	.mx-5 {
		margin-left: 24px;
		margin-right: 24px;
	}

	.mt-5 {
		margin-top: 24px;
	}

	.mb-5 {
		margin-bottom: 24px;
	}

	.ml-5 {
		margin-left: 24px;
	}

	.ml-5i {
		margin-left: 24px !important;
	}

	.mr-5 {
		margin-right: 24px;
	}

	.m-6 {
		margin: 32px;
	}

	.m-6i {
		margin: 32px !important;
	}

	.my-6 {
		margin-top: 32px;
		margin-bottom: 32px;
	}

	.mx-6 {
		margin-left: 32px;
		margin-right: 32px;
	}

	.mt-6 {
		margin-top: 32px;
	}

	.mb-6 {
		margin-bottom: 32px;
	}

	.ml-6 {
		margin-left: 32px;
	}

	.ml-6i {
		margin-left: 32px !important;
	}

	.mr-6 {
		margin-right: 32px;
	}

	.m-7 {
		margin: 40px;
	}

	.m-7i {
		margin: 40px !important;
	}

	.my-7 {
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.mx-7 {
		margin-left: 40px;
		margin-right: 40px;
	}

	.mt-7 {
		margin-top: 40px;
	}

	.mb-7 {
		margin-bottom: 40px;
	}

	.ml-7 {
		margin-left: 40px;
	}

	.ml-7i {
		margin-left: 40px !important;
	}

	.mr-7 {
		margin-right: 40px;
	}

	.m-8 {
		margin: 80px;
	}

	.m-8i {
		margin: 80px !important;
	}

	.my-8 {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	.mx-8 {
		margin-left: 80px;
		margin-right: 80px;
	}

	.mt-8 {
		margin-top: 80px;
	}

	.mb-8 {
		margin-bottom: 80px;
	}

	.ml-8 {
		margin-left: 80px;
	}

	.ml-8i {
		margin-left: 80px !important;
	}

	.mr-8 {
		margin-right: 80px;
	}

	.m-a {
		margin: auto;
	}

	.my-a {
		margin-top: auto;
		margin-bottom: auto;
	}

	.mx-a {
		margin-left: auto;
		margin-right: auto;
	}

	.mt-a {
		margin-top: auto;
	}

	.mb-a {
		margin-bottom: auto;
	}

	.ml-a {
		margin-left: auto;
	}

	.ml-ai {
		margin-left: auto !important;
	}

	.mr-a {
		margin-right: auto;
	}

	.mr-ai {
		margin-right: auto !important;
	}

	.w-100 {
		width: 100%;
	}

	.w-90 {
		width: 90%;
	}

	.w-50 {
		width: 50%;
	}

	.w-a {
		width: auto;
	}

	.w-ai {
		width: auto !important;
	}

	.h-100 {
		height: 100%;
	}

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

	.wm-500 {
		width: 100%;
		max-width: 500px;
	}

	.child-wm-500>* {
		width: 100%;
		max-width: 500px;
	}

	.child-wm-600>* {
		width: 100%;
		max-width: 600px;
	}

	.wm-700 {
		width: 100%;
		max-width: 700px;
	}

	.wm-720 {
		width: 100%;
		max-width: 720px;
	}

	.child-wm-700>* {
		width: 100%;
		max-width: 700px;
	}

	.wm-1000 {
		width: 100%;
		max-width: 1000px;
	}

	.wm-1920 {
		width: 100%;
		max-width: 1920px;
	}

	.child-wm-1000>* {
		width: 100%;
		max-width: 1000px;
	}

	.wm-600 {
		width: 100%;
		max-width: 600px;
	}

	.wm-500 {
		width: 100%;
		max-width: 500px;
	}

	.wm-400 {
		width: 100%;
		max-width: 400px;
	}

	.wm-300 {
		width: 100%;
		max-width: 300px;
	}

	.wm-200 {
		width: 100%;
		max-width: 200px;
	}

	.hm-700 {
		height: 100%;
		max-height: 700px;
	}

	.child-hm-700>* {
		height: 100%;
		max-height: 700px;
	}

	.hm-600 {
		height: 100%;
		max-height: 600px;
	}

	.hm-500 {
		height: 100%;
		max-height: 500px;
	}

	.hm-400 {
		height: 100%;
		max-height: 400px;
	}

	.hm-300 {
		height: 100%;
		max-height: 300px;
	}

	.hm-200 {
		height: 100%;
		max-height: 200px;
	}

	.smooth {
		border-radius: 10px !important;
	}

	.smooth-l {
		border-radius: 16px !important;
	}

	.smooth-xl {
		border-radius: 20px !important;
	}

	.border-one {
		border: 1px solid #FFFFFF1A;
	}

	.border-dang {
		border: 1px solid #EB5757;
	}

	.border-none {
		border-radius: 0 !important;
	}

	.rise {
		box-shadow: 1px 3px 20px 0 #000 2;
	}

	.rise-hard {
		box-shadow: 1px 2px 8px 0 #000;
	}

	.rounded {
		border-radius: 50%;
		overflow: hidden;
	}

	.minh-100 {
		min-height: 100px;
	}

	.minh-150 {
		min-height: 150px;
	}

	.minh-200 {
		min-height: 200px;
	}

	.small {
		font-size: 0.8em;
	}

	.big {
		font-size: 1.5em;
	}

	.muted {
		opacity: 0.7;
	}

	.dnone {
		display: none;
	}

	.vcollapse {
		visibility: collapse;
	}

	.z-1 {
		z-index: 1;
	}

	.z-2 {
		z-index: 2;
	}

	.z-3 {
		z-index: 3;
	}

	.z-4 {
		z-index: 4;
	}

	.z-5 {
		z-index: 5;
	}

	.text {
		color: #444;
	}

	.text-grey {
		color: grey;
	}

	.text-darkgrey {
		color: darkgrey;
	}

	.text-red {
		color: #f00;
	}

	.t-red {
		color: #f00;
	}

	.text-lightred {
		color: #f55;
	}

	.text-green {
		color: #9DE700;
	}

	.text-purple {
		color: #BA62FF;
	}

	.text-deeppink {
		color: deeppink;
	}

	.text-blue {
		color: blue;
	}

	.text-dodgerblue {
		color: dodgerblue;
	}

	.text-steelblue {
		color: steelblue;
	}

	.text-cyan {
		color: cyan;
	}

	.text-darkcyan {
		color: darkcyan;
	}

	.text-tan {
		color: tan;
	}

	.text-yellow {
		color: yellow;
	}

	.t-yellow {
		color: yellow;
	}

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

	.t-mute {
		color: var(--neutral-7);
	}

	.t-brig {
		color: var(--text-bright);
	}

	.t-prim {
		color: var(--neutal-1);
	}

	.t-sec {
		color: var(--neutral-3)
	}

	.t-dang {
		color: var(--danger);
	}

	.t-succ {
		color: var(--success);
	}

	.t-warn {
		color: var(--warning);
	}

	.t-w {
		color: #fff;
	}
	
	.t-dw {
		color: #ccc;
	}

	.t-l {
		color: #eee;
	}

	.t-g {
		color: #888;
	}

	.t-d {
		color: #333;
	}

	.t-b {
		color: #000;
	}

	.t-dr {
		color: darkred;
	}

	.t-shadow {
		text-shadow: 0 0 8px #000;
	}

	.t-gold {
		color: #FBC531;
	}

	.t-silver {
		color: #D9D9D9;
	}

	.t-bronze {
		color: #de9684;
	}

	.f-48-auto {
		font-size: clamp(2.125rem, 2.787vw, 3rem);
	}

	.f-12 {
		font-size: 12px;
	}

	.f-14 {
		font-size: 14px;
	}

	.f-18 {
		font-size: 18px;
	}

	.f-24 {
		font-size: 24px;
	}

	.f-32 {
		font-size: 32px;
	}

	.f-48 {
		font-size: 48px;
	}

	.f-64 {
		font-size: 64px;
	}

	.f-100 {
		font-weight: 100;
	}

	.f-200 {
		font-weight: 200;
	}

	.f-300 {
		font-weight: 300;
	}

	.f-400 {
		font-weight: 400;
	}

	.f-500 {
		font-weight: 500;
	}

	.f-600 {
		font-weight: 600;
	}

	.f-700 {
		font-weight: 700;
	}

	.f-800 {
		font-weight: 800;
	}

	.f-900 {
		font-weight: 900;
	}

	.text-center {
		text-align: center;
	}

	.text-left {
		text-align: left;
	}

	.text-right {
		text-align: right;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.bg-2 {
		background-color: #32377580;
	}

	.bg-grey {
		background-color: #FFFFFF1A !important;
	}

	.bg-dark {
		background-color: var(--background-dark);
	}

	.bgi {
		background-color: var(--background) !important;
	}

	.surface {
		background-color: var(--surface);
	}

	.surface-lighti {
		background-color: #292E63 !important;
	}

	.bg-space {
		background-color: var(--background-space);
	}

	.bg-prim {
		background-color: var(--primary) !important;
	}

	.bg-l {
		background-color: #eee;
	}

	.bg-l-t {
		background-color: #eee 5;
	}

	.bg-w {
		background-color: #fff;
	}

	.bg-b {
		background-color: #000;
	}

	.bg-b-t {
		background-color: #000 7;
	}

	.bg-d {
		background-color: #222;
	}

	.bg-d-t {
		background-color: #222 e;
	}

	.bg-g {
		background-color: #666;
	}

	.bg-g-t {
		background-color: #666 7;
	}

	.child-bg-zebra-1>div:nth-child(odd) {
		background: #00000033;
	}

	.child-bg-zebra-2>div:nth-child(odd) {
		background: #272B5CE5;
	}

	.child-bg-zebra-2>div:nth-child(even) {
		background: #323775E5;
	}

	.bg-gradi {
		background: #5a6bff;
		background: linear-gradient(180deg, #5a6bff 0%, #4111a7 100%) !important;
	}

	.bg-pinki {
		background: #6c3da8;
		background: linear-gradient(180deg, #6c3da8 0%, #451385 100%);
	}

	.bg-bluei {
		background: #18abda;
		background: linear-gradient(180deg, #18abda 0%, #0083cc 100%) !important;
	}

	.bg-greeni {
		background: #57d89a;
		background: linear-gradient(180deg, #57d89a 0%, #00a8b2 100%);
	}

	.bg-grad {
		background: url(/img/bg/grad_1.png), var(--background-space);
		background-size: cover;
		background-position: center;
	}

	.bg-grad-pink {
		background: var(--gradient-pink) !important;
	}

	.bg-grad-purp {
		background: var(--gradient-purple) !important;
	}

	.bg-grad-blue {
		background: var(--gradient-blue) !important;
	}

	.pos-abs {
		position: absolute;
	}

	.pos-absi {
		position: absolute !important;
	}

	.pos-rel {
		position: relative;
	}

	.pos-fix {
		position: fixed;
	}

	.pos-fix-fs {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.left-0 {
		left: 0;
	}

	.top-0 {
		top: 0;
	}

	.top-left-0 {
		top: 0;
		left: 0;
	}

	.top-right-0 {
		top: 0;
		right: 0;
	}

	.bottom-left-0 {
		bottom: 0;
		left: 0;
	}

	.bottom-right-0 {
		bottom: 0;
		right: 0;
	}

	.bottom-left-0 {
		bottom: 0;
		left: 0;
	}

	.bottom-right-0 {
		bottom: 0;
		right: 0;
	}

	.right-0 {
		right: 0;
	}

	.bottom-0 {
		bottom: 0;
	}

	.center {
		left: 50%;
		transform: translateX(-50%);
	}

	.center-y {
		top: 50%;
		transform: translateY(-50%);
	}

	.pointer {
		cursor: pointer;
	}

	.grid-default {
		grid-template-columns: 2fr repeat(2, 1fr);
	}

	.grid-medium {
		grid-template-columns: 2fr repeat(2, 1fr);
	}

	.grid-small {
		grid-template-columns: 1fr;
	}

	.segment {
		background-color: var(--surface);
		padding: 12px;
		border-radius: 8px;
	}

	.page {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	.top-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 0;
		flex-shrink: 0;
		padding: 8px;
		padding-left: 0;
		border-bottom: 1px solid #ddd;
	}

	.top-bar>* {
		margin-left: 8px;
	}

	/* .bottom-bar {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-grow: 0;
		flex-shrink: 0;
		background-color: #eee;
		padding: 8px;
		border-top: 1px solid #ddd;
	}

	.bottom-bar>* {
		margin-left: 8px;
	} */

	.header {
		-webkit-flex-grow: 1;
		-webkit-flex-shrink: 1;
		flex-grow: 1;
		flex-shrink: 1;
		overflow: hidden;
		font-weight: bold;
		font-size: 18px;
	}

	.header .sub {
		font-size: 14px;
		font-weight: normal;
	}

	.list-item {
		padding: 4px;
	}

	.list-item>div {
		border-radius: 6px;
		background-color: #444;
		padding: 8px;
		display: flex;
		flex-direction: row;
		align-items: stretch;
	}

	.truncate {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tab {
		width: 40px;
		height: 40px;
		color: var(--neutral-7);
		border-radius: 12px;
		background-color: #FFFFFF;
		transition: all .3s ease;
		border: none;
		cursor: pointer;
	}

	.tab.active {
		background-color: #F6F8FD;
		color: var(--blue-1);
	}

/* ── Overflow tooltip ─────────────────────────────────────────────── */
.overflow-tooltip {
	position: fixed;
	z-index: 10000;
	visibility: hidden;
	max-width: 320px;
	padding: 8px 12px;
	background: #1A1A2E;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 140%;
	border-radius: 8px;
	pointer-events: none;
	word-wrap: break-word;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	animation: tooltip-fade-in 0.15s ease;
}

.overflow-tooltip::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -5px;
	border-width: 5px 5px 0;
	border-style: solid;
	border-color: #1A1A2E transparent transparent;
}

.overflow-tooltip.below::after {
	bottom: auto;
	top: -5px;
	border-width: 0 5px 5px;
	border-color: transparent transparent #1A1A2E;
}

@keyframes tooltip-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: translateY(0); }
	}