.hidden {
	display: none !important;
}

.block {
	display: block;
}

.inline-block {
	display: inline-block;
}

.grid {
	display: grid;
}

.place-items-center {
	place-items: center;
}

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

.flex {
	display: flex;
}

.flex-col {
	flex-direction: column;
}

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

.items-start {
	align-items: flex-start !important;
}

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

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

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

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

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

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

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

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

.cursor {
	cursor: pointer;
}

.cursor-disable {
	cursor: not-allowed !important;
}

.w {
	--width-value: 100%;
	--max-width-value: 100%;
	width: var(--width-value);
	max-width: var(--max-width-value);
}

.w-third {
	width: calc(100% / 3);
}

.w-5 {
	width: 20px;
}

.w-8 {
	width: 32px;
}

.w-12 {
	width: 48px;
}

.w-14 {
	width: 56px;
}

.w-52 {
	width: 200px;
}

.w-20 {
	width: 80px;
}

.w-26 {
	width: 100px;
}

.w-full {
	width: 100%;
}

.w-max {
	width: max-content !important;
}

.max-w-max {
	max-width: max-content;
}

.h-5 {
	height: 20px;
}

.h-6 {
	height: 24px;
}

.h-8 {
	height: 32px;
}

.h-12 {
	height: 48px;
}

.h-14 {
	height: 56px;
}

.h-full {
	height: inherit;
	height: 100%;
}

.h-screen {
	height: 100vh;
}

.h-max {
	height: max-content;
}

.margin {
	--margin-value: 16px;
	margin: var(--margin-value);
}

.mx-auto {
	margin: 0 auto;
	max-width: 920px; /*ADDED*/
}



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

.mb-0-half {
	margin-bottom: 2px;
}

.ml-0-half {
	margin-left: 2px;
}

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

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

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

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

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

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

.mt-2-half {
	margin-top: 10px;
}

.mb-2-half {
	margin-bottom: 10px;
}

.ml-2-half {
	margin-left: 10px;
}

.mr-2-half {
	margin-right: 10px;
}

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

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

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

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

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

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

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

.mb-5-half {
	margin-bottom: 22px;
}

.mt-5-half {
	margin-top: 22px;
}

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

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

.mt-6-half {
	margin-top: 26px;
}

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

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

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

.mt-13 {
	margin-top: 52px;
}

.padding {
	--padding-value: 16px;
	padding: var(--padding-value) !important;
}

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

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

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

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

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

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

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

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

.p-2-half {
	padding: 10px;
}

.pt-2-half {
	padding-top: 10px;
}

.pb-2-half {
	padding-bottom: 10px;
}

.pl-2-half {
	padding-left: 10px;
}

.pr-2-half {
	padding-right: 10px;
}

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

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

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

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

.pl-3-half {
	padding-left: 14px;
}

.pr-3-half {
	padding-right: 14px;
}

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

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

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

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

.p-5 {
	padding: 20px;
}

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

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

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

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

.pl-5-half {
	padding-left: 22px;
}

.pr-5-half {
	padding-right: 22px;
}

.pb-5-half {
	padding-bottom: 22px;
}

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

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

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

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

.pb-6-half {
	padding-bottom: 26px;
}

.pt-6-half {
	padding-top: 26px;
}

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

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

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

.pb-8-half {
	padding-bottom: 36px;
}

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

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

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

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

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

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

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

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

.pt-13 {
	padding-top: 52px;
}

.pr-13 {
	padding-right: 52px;
}

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

.pt-23 {
	padding-top: 103px;
}

.pb-vh-half {
	padding-bottom: 50vh;
}

.gap {
	--gap-value: 16px;
	gap: var(--gap-value);
}

.gap-x {
	column-gap: 4px;
}

.gap-x-2 {
	column-gap: 8px;
}

.gap-x-3 {
	column-gap: 12px;
}

.gap-x-4 {
	column-gap: 16px;
}

.gap-x-5 {
	column-gap: 20px;
}

.gap-x-6 {
	column-gap: 24px;
}

.gap-x-20 {
	column-gap: 80px;
}

.gap-y-2 {
	row-gap: 8px;
}

.gap-y-3 {
	row-gap: 12px;
}

.gap-y-4 {
	row-gap: 16px;
}

.gap-y-5 {
	row-gap: 20px;
}

.gap-y-20 {
	row-gap: 80px;
}

.fixed {
	position: fixed;
}

.absolute {
	position: absolute;
}

.relative {
	position: relative;
}

.inset-0 {
	inset: 0px;
}

.ratio {
	--ratio-value: 1/1;
	aspect-ratio: var(--ratio-value);
}

.top {
	--top-value: 0;
	top: var(--top-value);
}

.left {
	--left-value: 0;
	left: var(--left-value);
}

.transform {
	--translate-value: 0;
	transform: var(--translate-value);
}

.top-0 {
	top: 0px;
}

.top-23 {
	top: 103px;
}

.top-13 {
	top: 52px;
}

.left-0 {
	left: 0px;
}

.right-0 {
	right: 0px;
}

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

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

.overflow-hidden {
	overflow: hidden;
}

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

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

.overflow-x-scroll::-webkit-scrollbar {
	display: none;
}

.resize-none {
	resize: none;
}

.rounded {
	border-radius: 4px;
}

.rounded-tr {
	border-top-right-radius: 4px;
}

.rounded-tl {
	border-top-left-radius: 4px;
}

.rounded-br {
	border-bottom-right-radius: 4px;
}

.rounded-bl {
	border-bottom-left-radius: 4px;
}

.rounded-md {
	border-radius: 6px;
}

.rounded-lg {
	border-radius: 8px;
}

.rounded-full {
	border-radius: 100%;
}

.whitespace-nowrap {
	white-space: nowrap;
}

.opacity-hidden {
	opacity: 0;
}

.opacity-1 {
	opacity: 1;
}

.user-select-none {
	user-select: none;
}

.hr {
	border-bottom: 1px var(--border-style) rgb(255 230 239 / 100%);
	display: block;
}

/* 
 alignment */
.text-center {
	text-align: center;
}

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

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

/* text color */
.text-white {
	color: rgb(255 255 255 / 100%);
}

.text-white-100 {
	color: #b9a5a6;
}

.text-white-200 {
	color: #45474D;
}

.text-white-300 {
	color: #64676A;
}

.text-dark-200 {
	color: var(--txt-light-clr);
}

.text-dark-300 {
	color: var(--txt-light-2-clr);
}

/* .5 opacity */
.text-dark-400 {
	color: var(--txt-light-clr);
}

/* .75 opacity */
.text-dark-500 {
	color: var(--txt-dark-clr);
}

/* full */
.text-dark-600 {
	color: var(--txt-light-2-clr);
}
.text-dark-700 {
	color: var(--txt-light-2-clr);
}

.text-dark-800 {
	color: rgba(69 71 77 / 100%);
}

.text-dark-900 {
	color: rgb(0 0 0 / 100%);
}

.text-dark-1000 {
	color: #26282A;
}

.text-blue-200 {
	color: rgba(22, 110, 232, 1);
}

.text-blue-300 {
	color: rgba(61, 138, 246, 1);
}

.text-blue-400 {
	color: rgba(39, 103, 227, 1);
}

.text-blue-500 {
	color: rgba(0, 98, 224, 1) !important;
}

.text-blue-600 {
	color: rgba(85, 20, 196, 1) !important;
}

/* #5514C4 */

/* bg color */
.bg {
	--bg: rgba(248 248 248 / 100%);
	background-color: var(--bg);
}

.bg-transparent {
	background-color: transparent;
}

.bg-blue-200 {
	background-color: rgba(22, 110, 232, 1);
}

.bg-blue-300 {
	background-color: rgba(61, 138, 246, 1);
}

.bg-blue-700 {
	background-color: rgb(10 33 60 / 100%);
}

.bg-white {
	background-color: rgb(255 255 255 / 100%);
}

.bg-white-100 {
	background-color: rgb(244 245 246 / 100%);
}

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

.bg-white-300 {
	background-color: rgb(213 215 218 / 100%);
}

.bg-white-400 {
	background-color: rgb(241 243 249 / 100%);
}

.bg-white-500 {
	background-color: rgb(225 230 239 / 100%);
}

.bg-white-600 {
	background-color: rgb(248 249 252 / 100%);
}

.bg-white-700 {
	background-color: rgb(232 235 240 / 100%);
}

.bg-white-800 {
	background-color: rgb(235 236 238 / 100%);
}

.bg-green-200 {
	background-color: rgb(90 187 122 / 100%);
}

.bg-orange-100 {
	background-color: #FFB45C;
}

.border {
	--border-clr: rgba(38 40 42 / 30%);
	--border-thickness: 1px;
	--border-type: solid;
	border: 1px solid var(--system-clr-border-default);
}

.border-1 {
	border: 1px solid var(--system-clr-border-default);
}

.border-2 {
	border: 1px solid var(--system-clr-border-default);
}

.border-3 {
	border: 1px solid var(--system-clr-border-default);
}

.border-1-white-300 {
	border: 1px solid var(--system-clr-border-default);
}

.border-b-1 {
	border-bottom: 1px solid var(--system-clr-border-default);
}

.border-t-1 {
	border-top: 1px var(--border-style) rgba(38 40 42 / 8%);
}

.border-1-half-white-400 {
	border: 1.5px var(--border-style) rgb(173 187 202 / 100%);
}

.border-1-half-dark-500 {
	border: 1.5px var(--border-style) rgba(51, 56, 65, 0.8);
}

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

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

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

.font-medium {
	font-weight: 500 !important;
}

.font-bold {
	font-weight: 600 !important;
}

.scale-1 {
	scale: calc(1 * var(--scale-mobile));
}

.font-xs {
	font-size: calc(var(--fs-2) * var(--scale-mobile));
	line-height: calc(1rem * var(--scale-mobile));
	/* letter-spacing: -1px; */
}

.font-sm-odd {
	font-size: .8125rem;
}

.font-sm {
	font-size: calc(var(--fs-1) * var(--scale-mobile));
	line-height: calc(1.25rem * var(--scale-mobile));
}

.font-base-odd {
	font-size: calc(.9375rem * var(--scale-mobile));
	line-height: calc(1.25rem * var(--scale-mobile));
}

.font-base {
	font-size: calc(1rem * var(--scale-mobile));
	line-height: calc(1.5rem * var(--scale-mobile));
	/* letter-spacing: -1px; */
}

.font-md {
	font-size: 1.0625rem;
	line-height: 1.5rem;
}

.font-lg {
	font-size: calc(1.125rem * var(--scale-mobile));
	line-height: calc(2.6rem * var(--scale-mobile));
	/* letter-spacing: -1px; */
}

.font-lg-odd {
	font-size: 1.1875rem;
}

.font-xl {
	font-size: calc(1.25rem * var(--scale-mobile));
	line-height: calc(1.75rem * var(--scale-mobile));
	letter-spacing: -1px;
}

.font-xl-odd {
	font-size: 1.3125rem;
}

.font-2xl {
	font-size: calc(1.5625rem * var(--scale-mobile));
	line-height: calc(1.75rem * var(--scale-mobile));
	letter-spacing: -1px;
}

.font-3xl {
	font-size: calc(1.5rem * var(--scale-mobile));
	line-height: calc(1.75rem * var(--scale-mobile));
	letter-spacing: -1px;
}

.font-4xl {
	font-size: calc(1.25rem * var(--scale-mobile));
	line-height: calc(4rem * var(--scale-mobile));
	letter-spacing: -1px;
}

.font-5xl {
	font-size: calc(1.25rem * var(--scale-mobile));
	line-height: calc(4rem * var(--scale-mobile));
	letter-spacing: -1px;
}

.font-6xl {
	font-size: calc(3.625rem * var(--scale-mobile));
	line-height: calc(6.25rem * var(--scale-mobile));
	letter-spacing: -1px;
}

@media (min-width: 768px) {
	.md-block {
		display: block !important;
	}

	.md-hidden {
		display: none !important;
	}

	.md-grid {
		display: grid !important;
	}

	.md-flex {
		display: flex !important;
	}

	.md-margin {
		--md-margin-value: 16px;
		margin: var(--md-margin-value);
	}

	.md-padding {
		--md-padding-value: 16px;
		padding: var(--md-padding-value);
	}

	.scale-1 {
		scale: calc(1 * var(--scale-tablet));
	}

	.font-xs {
		font-size: calc(var(--fs-2) * var(--scale-tablet));
		line-height: calc(1rem * var(--scale-tablet));
		/* letter-spacing: -1px; */
	}

	.font-sm {
		font-size: calc(var(--fs-1) * var(--scale-tablet));
		line-height: calc(1.25rem * var(--scale-tablet));
	}

	.font-base-odd {
		font-size: calc(.9375rem * var(--scale-tablet));
		line-height: calc(1.25rem * var(--scale-tablet));
	}

	.font-base {
		font-size: calc(1rem * var(--scale-tablet));
		line-height: calc(1.5rem * var(--scale-tablet));
		/* letter-spacing: -1px; */
	}

	.font-lg {
		font-size: calc(1.125rem * var(--scale-tablet));
		line-height: calc(2.6rem * var(--scale-tablet));
		/* letter-spacing: -1px; */
	}

	.font-xl {
		font-size: calc(1.25rem * var(--scale-tablet));
		line-height: calc(1.75rem * var(--scale-blet));
		letter-spacing: -1px;
	}

	.font-2xl {
		font-size: calc(1.5625rem * var(--scale-tablet));
		line-height: calc(1.75rem * var(--scale-tablet));
		letter-spacing: -1px;
	}

	.font-3xl {
		font-size: calc(.9375rem * var(--scale-tablet));
		line-height: calc(1.75rem * var(--scale-tablet));
		letter-spacing: -1px;
	}

	.font-4xl {
		font-size: calc(1.25rem * var(--scale-tablet));
		line-height: calc(4rem * var(--scale-tablet));
		letter-spacing: -1px;
	}

	.font-5xl {
		font-size: calc(2.125rem * var(--scale-tablet));
		line-height: calc(4rem * var(--scale-tablet));
		letter-spacing: -1px;
	}

	.font-6xl {
		font-size: calc(5.8rem * var(--scale-tablet));
		line-height: calc(6.71.25rem * var(--scale-tablet));
		letter-spacing: -1px;
	}
}

@media (min-width: 1024px) {
	.lg-block {
		display: block !important;
	}

	.lg-hidden {
		display: none !important;
	}

	.lg-grid {
		display: grid !important;
	}

	.lg-flex {
		display: flex !important;
	}

	.lg-margin {
		--lg-margin-value: 16px;
		margin: var(--lg-margin-value);
	}

	.lg-padding {
		--lg-padding-value: 16px;
		padding: var(--lg-padding-value);
	}

	.scale-1 {
		scale: calc(1 * var(--scale-desktop));
	}

	.font-xs {
		font-size: calc(var(--fs-2) * var(--scale-desktop));
		line-height: calc(1rem * var(--scale-desktop));
		/* letter-spacing: -1px; */
	}

	.font-sm {
		font-size: calc(var(--fs-1) * var(--scale-desktop));
		line-height: calc(1.25rem * var(--scale-desktop));
	}

	.font-base-odd {
		font-size: calc(.9375rem * var(--scale-desktop));
		line-height: calc(1.25rem * var(--scale-desktop));
	}

	.font-base {
		font-size: calc(1rem * var(--scale-desktop));
		line-height: calc(1.5rem * var(--scale-desktop));
		/* letter-spacing: -1px; */
	}

	.font-lg {
		font-size: calc(1.125rem * var(--scale-desktop));
		line-height: calc(2.6rem * var(--scale-desktop));
		/* letter-spacing: -1px; */
	}

	.font-xl {
		font-size: calc(1.25rem * var(--scale-desktop));
		line-height: calc(1.75rem * var(--scale-desktop));
		letter-spacing: -1px;
	}

	.font-2xl {
		font-size: calc(1.5625rem * var(--scale-desktop));
		line-height: calc(1.75rem * var(--scale-desktop));
		letter-spacing: -1px;
	}

	.font-3xl {
		font-size: calc(1.5rem * var(--scale-desktop));
		line-height: calc(1.75rem * var(--scale-desktop));
		letter-spacing: -1px;
	}

	.font-4xl {
		font-size: calc(1.25rem * var(--scale-desktop));
		line-height: calc(4rem * var(--scale-desktop));
		letter-spacing: -1px;
	}

	.font-5xl {
		font-size: calc(2.125rem * var(--scale-desktop));
		line-height: calc(4rem * var(--scale-desktop));
		letter-spacing: -1px;
	}

	.font-6xl {
		font-size: calc(5.8rem * var(--scale-desktop));
		line-height: calc(6.71.25rem * var(--scale-desktop));
		letter-spacing: -1px;
	}
}

@media (min-width: 1200px) {
	.xl-block {
		display: block !important;
	}

	.xl-hidden {
		display: none !important;
	}

	.xl-grid {
		display: grid !important;
	}

	.xl-flex {
		display: flex !important;
	}

	.xl-margin {
		--xl-margin-value: 16px;
		margin: var(--xl-margin-value);
	}

	.xl-padding {
		--xl-padding-value: 16px;
		padding: var(--xl-padding-value);
	}
}

@media (min-width: 1200px) {
	.x2l-block {
		display: block !important;
	}

	.x2l-hidden {
		display: none !important;
	}

	.x2l-grid {
		display: grid !important;
	}

	.x2l-flex {
		display: flex !important;
	}

	.x2l-margin {
		--x2l-margin-value: 16px;
		margin: var(--x2l-margin-value);
	}

	.x2l-padding {
		--x2l-padding-value: 16px;
		padding: var(--x2l-padding-value);
	}
}

@media (min-width: 1400px) {
	.x3l-block {
		display: block !important;
	}

	.x3l-hidden {
		display: none !important;
	}

	.x3l-grid {
		display: grid !important;
	}

	.x3l-flex {
		display: flex !important;
	}

	.x3l-margin {
		--x3l-margin-value: 16px;
		margin: var(--x3l-margin-value);
	}

	.x3l-padding {
		--x3l-padding-value: 16px;
		padding: var(--x3l-padding-value);
	}
}

/* global css */
.modal-backdrop {
	position: fixed;
	top: -100%;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgb(0 0 0 / 15%);
	transition: top 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
	z-index: 70;
}

.g-container {
	max-width: 1611px;
	margin: 0 auto;
	height: 100%;
}

.g-icon-container {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	position: relative;
	cursor: pointer;
}

.g-icon {
	position: absolute;
	inset: 0;
	width: inherit;
	height: inherit;
}

.g-hidden-desktop {
	display: none;
}

.g-divider {
	--divider-width: 1px;
	--divider-height: 20px;
	--divider-clr: rgba(38 40 42 / 20%);
	--divider-margin: 0;
	--divider-axis: 0;
	width: var(--divider-width);
	height: var(--divider-height);
	background-color: var(--divider-clr);
	margin: var(--divider-margin);
	rotate: var(--divider-axis);
}

@media (max-width: 1200px) {
	.g-hidden-desktop {
		display: block;
	}
}

/* global css end */