:root {
	--color-notification: 216 159 0;
	--color-notification2: 240 185 11
}

*,
:after,
:before {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}

::-webkit-backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia:
}

.bottom-0 {
	bottom: 0
}

.bottom-\[-1px\] {
	bottom: -1px
}

.bottom-\[40px\] {
	bottom: 40px
}

.left-0 {
	left: 0
}

.left-\[-1px\] {
	left: -1px
}

.right-0 {
	right: 0
}

.right-\[-1px\] {
	right: -1px
}

.top-0 {
	top: 0
}

.top-\[-1px\] {
	top: -1px
}

.mx-\[12px\] {
	margin-left: 12px;
	margin-right: 12px
}

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

.my-\[10px\] {
	margin-bottom: 10px;
	margin-top: 10px
}

.\!mb-2 {
	margin-bottom: .5rem !important
}

.\!mb-\[0px\] {
	margin-bottom: 0 !important
}

.mb-12 {
	margin-bottom: 3rem
}

.mb-\[38px\] {
	margin-bottom: 38px
}

.mb-\[4px\] {
	margin-bottom: 4px
}

.mb-\[6px\] {
	margin-bottom: 6px
}

.mb-\[82px\] {
	margin-bottom: 82px
}

.ml-2\.5 {
	margin-left: .625rem
}

.mr-2 {
	margin-right: .5rem
}

.mr-4 {
	margin-right: 1rem
}

.mt-\[30px\] {
	margin-top: 30px
}

.line-clamp-3 {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	display: -webkit-box;
	overflow: hidden
}

.\!h-\[64px\] {
	height: 64px !important
}

.h-\[180px\] {
	height: 180px
}

.h-\[24px\] {
	height: 24px
}

.h-\[26px\] {
	height: 26px
}

.h-\[300px\] {
	height: 300px
}

.h-\[40px\] {
	height: 40px
}

.h-\[80px\] {
	height: 80px
}

.max-h-\[486px\] {
	max-height: 486px
}

.max-h-full {
	max-height: 100%
}

.min-h-\[132px\] {
	min-height: 132px
}

.min-h-\[36px\] {
	min-height: 36px
}

.w-\[100\%\] {
	width: 100%
}

.w-\[114px\] {
	width: 114px
}

.w-\[148px\] {
	width: 148px
}

.w-\[165px\] {
	width: 165px
}

.w-\[180px\] {
	width: 180px
}

.w-\[24px\] {
	width: 24px
}

.w-\[26px\] {
	width: 26px
}

.w-\[40px\] {
	width: 40px
}

.w-\[440px\] {
	width: 440px
}

.w-\[64px\] {
	width: 64px
}

.\!min-w-min {
	min-width: -webkit-min-content !important;
	min-width: -moz-min-content !important;
	min-width: min-content !important
}

.max-w-\[1280px\] {
	max-width: 1280px
}

.max-w-\[305px\] {
	max-width: 305px
}

.flex-grow {
	flex-grow: 1
}

.resize {
	resize: both
}

.flex-wrap {
	flex-wrap: wrap
}

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

.gap-0 {
	grid-gap: 0;
	gap: 0
}

.whitespace-normal {
	white-space: normal
}

.rounded-\[16px\] {
	border-radius: 16px
}

.rounded-\[40px\] {
	border-radius: 40px
}

.rounded-lg {
	border-radius: .5rem
}

.border-0 {
	border-width: 0
}

.border-\[1px\] {
	border-width: 1px
}

.\!border-\[--color-InputLine\] {
	border-color: var(--color-InputLine) !important
}

.bg-\[\#1E2329\] {
	--tw-bg-opacity: 1;
	background-color: rgb(30 35 41/var(--tw-bg-opacity))
}

.bg-\[\#FFF\],
.bg-\[\#fff\] {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.bg-\[--color-BasicBg\] {
	background-color: var(--color-BasicBg)
}

.bg-\[--color-Buy\] {
	background-color: var(--color-Buy)
}

.bg-\[--color-Line\] {
	background-color: var(--color-Line)
}

.bg-\[--color-PrimaryText\] {
	background-color: var(--color-PrimaryText)
}

.bg-\[--color-Vessel\] {
	background-color: var(--color-Vessel)
}

.bg-\[--color-bg4\] {
	background-color: var(--color-bg4)
}

.bg-\[transparent\] {
	background-color: transparent
}

.bg-primaryNoti {
	background-color: rgba(216, 159, 0, .06);
	background-color: rgb(var(--color-notification)/.06)
}

.bg-primaryNoti2 {
	background-color: rgba(240, 185, 11, .1);
	background-color: rgb(var(--color-notification2)/.1)
}

.bg-opacity-95 {
	--tw-bg-opacity: 0.95
}

.p-\[16px\] {
	padding: 16px
}

.p-\[4px\] {
	padding: 4px
}

.\!px-1 {
	padding-left: .25rem !important;
	padding-right: .25rem !important
}

.px-\[10px\] {
	padding-left: 10px;
	padding-right: 10px
}

.py-\[10px\] {
	padding-bottom: 10px;
	padding-top: 10px
}

.py-\[14px\] {
	padding-bottom: 14px;
	padding-top: 14px
}

.pb-8 {
	padding-bottom: 2rem
}

.pb-\[14px\] {
	padding-bottom: 14px
}

.pt-8 {
	padding-top: 2rem
}

.pt-\[32px\] {
	padding-top: 32px
}

.text-\[20px\] {
	font-size: 20px
}

.text-\[24px\] {
	font-size: 24px
}

.text-\[64px\] {
	font-size: 64px
}

.\!leading-\[22px\] {
	line-height: 22px !important
}

.text-\[\#eaecef\] {
	--tw-text-opacity: 1;
	color: rgb(234 236 239/var(--tw-text-opacity))
}

.text-\[--color-BasicBg\] {
	color: var(--color-BasicBg)
}

.text-\[--color-Success\] {
	color: var(--color-Success)
}

.decoration-solid {
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid
}

.decoration-dotted {
	-webkit-text-decoration-style: dotted;
	text-decoration-style: dotted
}

.shadow {
	--tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
	box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.drop-shadow {
	--tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06));
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.headline5 {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.headline5 {
		font-size: 28px;
		font-weight: 600;
		line-height: 36px
	}
}

.\!body2 {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 22px !important
}

@media only screen and (min-width:768px) {
	.\!body2 {
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 24px !important
	}
}

.body2 {
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 22px !important
}

@media only screen and (min-width:768px) {
	.body2 {
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 24px !important
	}
}

.bids-full-modal {
	&.bn-modal>.bn-modal-wrap {
		@media (max-width:640px) {
			border-radius: 0;
			height: 100%;
			max-width: 100%;
			width: 440px;

			.web-2fa-management-warning {
				height: 100%;
				padding-top: 100px
			}

			.bn-modal-confirm-icon {
				height: 96px;
				width: 96px
			}

			.bn-modal-confirm-actions {
				margin-top: auto
			}

			>.bn-modal-content {
				max-height: 100%
			}
		}
	}
}

.bids-formModal {
	&.bn-modal>.bn-modal-wrap {
		width: 440px
	}
}

.setup-guide-container .need-bind-redirect-button {
	margin-top: 24px !important
}

.account-deletion-failed-modal {
	&.bn-modal>.bn-modal-wrap {
		width: 440px
	}
}

.account-deletion-modal {
	&.bn-modal>.bn-modal-wrap {
		display: flex;
		flex-direction: column;
		max-height: 100%;
		max-width: 100%;
		padding: 0 24px;

		@media (max-width:768px) {
			border-radius: 0;
			height: 100%;
			max-width: 100%;
			padding-bottom: 0;
			padding-left: 15px;
			padding-right: 15px;
			padding-top: 0;
			width: 100%
		}
	}
}

.card-page-title {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;

	@media (min-width:768px) {
		font-size: 32px;
		font-weight: 600;
		line-height: 40px
	}

	margin-bottom:.5rem
}

@media (min-width:768px) {
	.card-page-title {
		margin-bottom: 2rem
	}
}

.\!visible {
	visibility: visible !important
}

.visible {
	visibility: visible
}

.invisible {
	visibility: hidden
}

.static {
	position: static
}

.fixed {
	position: fixed
}

.absolute {
	position: absolute
}

.relative {
	position: relative
}

.right-4 {
	right: 1rem
}

.top-4 {
	top: 1rem
}

.top-\[2px\] {
	top: 2px
}

.z-20 {
	z-index: 20
}

.order-1 {
	order: 1
}

.order-2 {
	order: 2
}

.order-3 {
	order: 3
}

.m-1 {
	margin: .25rem
}

.m-1\.5 {
	margin: .375rem
}

.\!mx-3 {
	margin-left: .75rem !important;
	margin-right: .75rem !important
}

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

.mx-\[8px\] {
	margin-left: 8px;
	margin-right: 8px
}

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

.my-2 {
	margin-bottom: .5rem;
	margin-top: .5rem
}

.my-3 {
	margin-bottom: .75rem;
	margin-top: .75rem
}

.my-6 {
	margin-bottom: 1.5rem;
	margin-top: 1.5rem
}

.my-\[24px\] {
	margin-bottom: 24px;
	margin-top: 24px
}

.\!mb-\[82px\] {
	margin-bottom: 82px !important
}

.-mr-\[24px\] {
	margin-right: -24px
}

.-mt-4 {
	margin-top: -1rem
}

.mb-1 {
	margin-bottom: .25rem
}

.mb-2 {
	margin-bottom: .5rem
}

.mb-3 {
	margin-bottom: .75rem
}

.mb-4 {
	margin-bottom: 1rem
}

.mb-6 {
	margin-bottom: 1.5rem
}

.mb-8 {
	margin-bottom: 2rem
}

.mb-\[10px\] {
	margin-bottom: 10px
}

.mb-\[12px\] {
	margin-bottom: 12px
}

.mb-\[15px\] {
	margin-bottom: 15px
}

.mb-\[16px\] {
	margin-bottom: 16px
}

.mb-\[24px\] {
	margin-bottom: 24px
}

.mb-\[32px\] {
	margin-bottom: 32px
}

.mb-\[8px\] {
	margin-bottom: 8px
}

.ml-0 {
	margin-left: 0
}

.ml-0\.5 {
	margin-left: .125rem
}

.ml-1 {
	margin-left: .25rem
}

.ml-2 {
	margin-left: .5rem
}

.ml-3 {
	margin-left: .75rem
}

.ml-4 {
	margin-left: 1rem
}

.ml-6 {
	margin-left: 1.5rem
}

.ml-\[8px\] {
	margin-left: 8px
}

.ml-auto {
	margin-left: auto
}

.mr-0 {
	margin-right: 0
}

.mr-1 {
	margin-right: .25rem
}

.mr-3 {
	margin-right: .75rem
}

.mr-\[10px\] {
	margin-right: 10px
}

.mr-\[12px\] {
	margin-right: 12px
}

.mr-\[15px\] {
	margin-right: 15px
}

.mr-\[16px\] {
	margin-right: 16px
}

.mr-auto {
	margin-right: auto
}

.mt-0 {
	margin-top: 0
}

.mt-1 {
	margin-top: .25rem
}

.mt-2 {
	margin-top: .5rem
}

.mt-20 {
	margin-top: 5rem
}

.mt-3 {
	margin-top: .75rem
}

.mt-4 {
	margin-top: 1rem
}

.mt-6 {
	margin-top: 1.5rem
}

.mt-8 {
	margin-top: 2rem
}

.mt-\[-24px\] {
	margin-top: -24px
}

.mt-\[10px\] {
	margin-top: 10px
}

.mt-\[144px\] {
	margin-top: 144px
}

.mt-\[16px\] {
	margin-top: 16px
}

.mt-\[20px\] {
	margin-top: 20px
}

.mt-\[24px\] {
	margin-top: 24px
}

.mt-\[2px\] {
	margin-top: 2px
}

.mt-\[36px\] {
	margin-top: 36px
}

.mt-\[64px\] {
	margin-top: 64px
}

.mt-\[8px\] {
	margin-top: 8px
}

.mt-auto {
	margin-top: auto
}

.block {
	display: block
}

.inline-block {
	display: inline-block
}

.inline {
	display: inline
}

.flex {
	display: flex
}

.inline-flex {
	display: inline-flex
}

.table {
	display: table
}

.grid {
	display: grid
}

.\!hidden {
	display: none !important
}

.hidden {
	display: none
}

.\!h-\[96px\] {
	height: 96px !important
}

.\!h-\[calc\(100vh_-_240px\)\] {
	height: calc(100vh - 240px) !important
}

.h-12 {
	height: 3rem
}

.h-16 {
	height: 4rem
}

.h-24 {
	height: 6rem
}

.h-4 {
	height: 1rem
}

.h-5 {
	height: 1.25rem
}

.h-6 {
	height: 1.5rem
}

.h-8 {
	height: 2rem
}

.h-96 {
	height: 24rem
}

.h-\[120px\] {
	height: 120px
}

.h-\[20px\] {
	height: 20px
}

.h-\[32px\] {
	height: 32px
}

.h-\[50px\] {
	height: 50px
}

.h-\[52px\] {
	height: 52px
}

.h-\[56px\] {
	height: 56px
}

.h-\[5px\] {
	height: 5px
}

.h-\[60px\] {
	height: 60px
}

.h-\[64px\] {
	height: 64px
}

.h-\[70px\] {
	height: 70px
}

.h-\[72px\] {
	height: 72px
}

.h-\[8px\] {
	height: 8px
}

.h-\[96px\] {
	height: 96px
}

.h-full {
	height: 100%
}

.max-h-\[445px\] {
	max-height: 445px
}

.\!w-\[96px\] {
	width: 96px !important
}

.\!w-full {
	width: 100% !important
}

.w-16 {
	width: 4rem
}

.w-24 {
	width: 6rem
}

.w-4 {
	width: 1rem
}

.w-5 {
	width: 1.25rem
}

.w-6 {
	width: 1.5rem
}

.w-8 {
	width: 2rem
}

.w-\[111px\] {
	width: 111px
}

.w-\[120px\] {
	width: 120px
}

.w-\[132px\] {
	width: 132px
}

.w-\[144px\] {
	width: 144px
}

.w-\[20px\] {
	width: 20px
}

.w-\[237px\] {
	width: 237px
}

.w-\[32px\] {
	width: 32px
}

.w-\[425px\] {
	width: 425px
}

.w-\[5px\] {
	width: 5px
}

.w-\[60px\] {
	width: 60px
}

.w-\[8px\] {
	width: 8px
}

.w-\[96px\] {
	width: 96px
}

.w-\[calc\(100\%-32px\)\] {
	width: calc(100% - 32px)
}

.w-full {
	width: 100%
}

.\!min-w-\[80px\] {
	min-width: 80px !important
}

.min-w-\[8px\] {
	min-width: 8px
}

.max-w-\[1200px\] {
	max-width: 1200px
}

.max-w-\[1248px\] {
	max-width: 1248px
}

.max-w-full {
	max-width: 100%
}

.flex-1 {
	flex: 1 1
}

.flex-auto {
	flex: 1 1 auto
}

.flex-shrink-0,
.shrink-0 {
	flex-shrink: 0
}

.grow {
	flex-grow: 1
}

.transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-pointer {
	cursor: pointer
}

.list-disc {
	list-style-type: disc
}

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

.flex-row {
	flex-direction: row
}

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

.flex-col {
	flex-direction: column
}

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

.items-start {
	align-items: flex-start
}

.items-center {
	align-items: center
}

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

.justify-center {
	justify-content: center
}

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

.gap-2 {
	grid-gap: .5rem;
	gap: .5rem
}

.gap-3 {
	grid-gap: .75rem;
	gap: .75rem
}

.gap-4 {
	grid-gap: 1rem;
	gap: 1rem
}

.gap-6 {
	grid-gap: 1.5rem;
	gap: 1.5rem
}

.gap-\[12px\] {
	grid-gap: 12px;
	gap: 12px
}

.space-y-3>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-bottom: calc(.75rem*var(--tw-space-y-reverse));
	margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)))
}

.space-y-\[16px\]>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-bottom: calc(16px*var(--tw-space-y-reverse));
	margin-top: calc(16px*(1 - var(--tw-space-y-reverse)))
}

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

.self-center {
	align-self: center
}

.self-stretch {
	align-self: stretch
}

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

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

.break-all {
	word-break: break-all
}

.rounded {
	border-radius: .25rem
}

.rounded-\[12px\] {
	border-radius: 12px
}

.rounded-\[2px\] {
	border-radius: 2px
}

.rounded-\[4px\] {
	border-radius: 4px
}

.rounded-\[50\%\] {
	border-radius: 50%
}

.rounded-\[5px\] {
	border-radius: 5px
}

.rounded-\[8px\] {
	border-radius: 8px
}

.rounded-full {
	border-radius: 9999px
}

.rounded-xl {
	border-radius: .75rem
}

.border {
	border-width: 1px
}

.border-b {
	border-bottom-width: 1px
}

.border-r {
	border-right-width: 1px
}

.border-solid {
	border-style: solid
}

.border-\[--color-Line\] {
	border-color: var(--color-Line)
}

.border-\[--color-TagBg\] {
	border-color: var(--color-TagBg)
}

.border-\[--color-line\] {
	border-color: var(--color-line)
}

.bg-\[\#F0B90B\] {
	--tw-bg-opacity: 1;
	background-color: rgb(240 185 11/var(--tw-bg-opacity))
}

.bg-\[--color-badgeBg\] {
	background-color: var(--color-badgeBg)
}

.bg-\[--color-bg1\] {
	background-color: var(--color-bg1)
}

.bg-\[--color-bg2\] {
	background-color: var(--color-bg2)
}

.bg-\[--color-bg3\] {
	background-color: var(--color-bg3)
}

.bg-\[--color-primary\] {
	background-color: var(--color-primary)
}

.bg-tag-bg-primary {
	background-color: rgba(240, 185, 11, .1)
}

.bg-contain {
	background-size: contain
}

.object-contain {
	-o-object-fit: contain;
	object-fit: contain
}

.p-4 {
	padding: 1rem
}

.p-6 {
	padding: 1.5rem
}

.px-1 {
	padding-left: .25rem;
	padding-right: .25rem
}

.px-10 {
	padding-left: 2.5rem;
	padding-right: 2.5rem
}

.px-2 {
	padding-left: .5rem;
	padding-right: .5rem
}

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

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem
}

.px-\[--space-m\] {
	padding-left: var(--space-m);
	padding-right: var(--space-m)
}

.px-\[15px\] {
	padding-left: 15px;
	padding-right: 15px
}

.px-\[16px\] {
	padding-left: 16px;
	padding-right: 16px
}

.px-\[40px\] {
	padding-left: 40px;
	padding-right: 40px
}

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

.py-2 {
	padding-bottom: .5rem;
	padding-top: .5rem
}

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

.py-6 {
	padding-bottom: 1.5rem;
	padding-top: 1.5rem
}

.py-\[16px\] {
	padding-bottom: 16px;
	padding-top: 16px
}

.py-\[20px\] {
	padding-bottom: 20px;
	padding-top: 20px
}

.pb-10 {
	padding-bottom: 2.5rem
}

.pb-12 {
	padding-bottom: 3rem
}

.pb-4 {
	padding-bottom: 1rem
}

.pb-6 {
	padding-bottom: 1.5rem
}

.pb-\[15px\] {
	padding-bottom: 15px
}

.pb-\[40px\] {
	padding-bottom: 40px
}

.pb-\[48px\] {
	padding-bottom: 48px
}

.pb-\[60px\] {
	padding-bottom: 60px
}

.pr-\[16px\] {
	padding-right: 16px
}

.pt-0 {
	padding-top: 0
}

.pt-12 {
	padding-top: 3rem
}

.pt-2 {
	padding-top: .5rem
}

.pt-4 {
	padding-top: 1rem
}

.pt-6 {
	padding-top: 1.5rem
}

.pt-\[24px\] {
	padding-top: 24px
}

.pt-\[30px\] {
	padding-top: 30px
}

.pt-\[48px\] {
	padding-top: 48px
}

.pt-\[7px\] {
	padding-top: 7px
}

.pt-\[80px\] {
	padding-top: 80px
}

.text-left {
	text-align: left
}

.\!text-center {
	text-align: center !important
}

.text-center {
	text-align: center
}

.\!text-\[96px\] {
	font-size: 96px !important
}

.text-\[14px\] {
	font-size: 14px
}

.text-base {
	font-size: 1rem;
	line-height: 1.5rem
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem
}

.text-xs {
	font-size: .75rem;
	line-height: 1rem
}

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

.font-\[500\],
.font-medium {
	font-weight: 500
}

.capitalize {
	text-transform: capitalize
}

.leading-\[20px\] {
	line-height: 20px
}

.text-\[--SecondaryText\] {
	color: var(--SecondaryText)
}

.text-\[--color-DisabledText\] {
	color: var(--color-DisabledText)
}

.text-\[--color-PirmaryText\] {
	color: var(--color-PirmaryText)
}

.text-\[--color-PrimaryText\] {
	color: var(--color-PrimaryText)
}

.text-\[--color-PrimaryYellow\] {
	color: var(--color-PrimaryYellow)
}

.text-\[--color-SecondaryText\] {
	color: var(--color-SecondaryText)
}

.text-\[--color-TertiaryText\] {
	color: var(--color-TertiaryText)
}

.text-\[--color-TextBuy\] {
	color: var(--color-TextBuy)
}

.text-\[--color-TextLink\] {
	color: var(--color-TextLink)
}

.text-\[--color-error\] {
	color: var(--color-error)
}

.text-\[--color-iconNormal\] {
	color: var(--color-iconNormal)
}

.text-\[--color-primaryHover\] {
	color: var(--color-primaryHover)
}

.text-\[--color-success\] {
	color: var(--color-success)
}

.text-\[--color-textBrand\] {
	color: var(--color-textBrand)
}

.text-\[--color-textDisabled\] {
	color: var(--color-textDisabled)
}

.text-\[--color-textPrimary\] {
	color: var(--color-textPrimary)
}

.text-\[--color-textSecondary\] {
	color: var(--color-textSecondary)
}

.text-\[--color-textThird\] {
	color: var(--color-textThird)
}

.underline {
	-webkit-text-decoration-line: underline;
	text-decoration-line: underline
}

.outline {
	outline-style: solid
}

.blur {
	--tw-blur: blur(8px)
}

.blur,
.filter {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition {
	transition-duration: .15s;
	transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.ease-in-out {
	transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.bidscl-headline0 {
	font-size: 32px;
	font-weight: 600;
	line-height: 40px
}

@media only screen and (min-width:768px) {
	.bidscl-headline0 {
		font-size: 44px;
		font-weight: 600;
		line-height: 52px
	}
}

.headline1 {
	font-size: 40px;
	font-weight: 600;
	line-height: 56px
}

@media only screen and (min-width:768px) {
	.headline1 {
		font-size: 56px;
		font-weight: 600;
		line-height: 64px
	}
}

.bidscl-headline1 {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px
}

@media only screen and (min-width:768px) {
	.bidscl-headline1 {
		font-size: 40px;
		font-weight: 600;
		line-height: 48px
	}
}

.headline2 {
	font-size: 36px;
	font-weight: 600;
	line-height: 44px
}

@media only screen and (min-width:768px) {
	.headline2 {
		font-size: 48px;
		font-weight: 600;
		line-height: 56px
	}
}

.headline3 {
	font-size: 28px;
	font-weight: 600;
	line-height: 40px
}

@media only screen and (min-width:768px) {
	.headline3 {
		font-size: 40px;
		font-weight: 600;
		line-height: 48px
	}
}

.headline4 {
	font-size: 24px;
	font-weight: 600;
	line-height: 32px
}

@media only screen and (min-width:768px) {
	.headline4 {
		font-size: 32px;
		font-weight: 600;
		line-height: 40px
	}
}

.bidscl-headline4 {
	font-size: 18px;
	font-weight: 600;
	line-height: 26px
}

@media only screen and (min-width:768px) {
	.bidscl-headline4 {
		font-size: 24px;
		font-weight: 600;
		line-height: 34px
	}
}

.headline6 {
	font-size: 18px;
	font-weight: 600;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.headline6 {
		font-size: 24px;
		font-weight: 600;
		line-height: 32px
	}
}

.subtitle1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 26px
}

@media only screen and (min-width:768px) {
	.subtitle1 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.bidscl-subtitle1 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.bidscl-subtitle1 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}
}

.subtitle2 {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.subtitle2 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.bidscl-subtitle2 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.bidscl-subtitle2 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px
	}
}

.subtitle3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.subtitle3 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}
}

.subtitle4 {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px
}

@media only screen and (min-width:768px) {
	.subtitle4 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px
	}
}

.subtitle5 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.subtitle5 {
		font-size: 12px;
		font-weight: 500;
		line-height: 20px
	}
}

.\!body1 {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important
}

@media only screen and (min-width:768px) {
	.\!body1 {
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 28px !important
	}
}

.body1 {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 24px !important
}

@media only screen and (min-width:768px) {
	.body1 {
		font-size: 20px !important;
		font-weight: 400 !important;
		line-height: 28px !important
	}
}

.body2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.body2 {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px
	}
}

.bidscl-body3 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.bidscl-body3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}
}

.bidscl-body2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.bidscl-body2 {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px
	}
}

.body3 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.body3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px
	}
}

.bidscl-caption1 {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.bidscl-caption1 {
		font-size: 12px;
		font-weight: 400;
		line-height: 18px
	}
}

.caption2 {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.caption2 {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px
	}
}

.caption3 {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.caption3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px
	}
}

.bidscls-btnLink2 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.bidscls-btnLink2 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.bidscls-btnLink2 {
	text-decoration: none
}

.container {
	width: 100%
}

@media (min-width:640px) {
	.container {
		max-width: 640px
	}
}

@media (min-width:768px) {
	.container {
		max-width: 768px
	}
}

@media (min-width:1024px) {
	.container {
		max-width: 1024px
	}
}

@media (min-width:1280px) {
	.container {
		max-width: 1280px
	}
}

@media (min-width:1536px) {
	.container {
		max-width: 1536px
	}
}

.account-deletion-textarea .bn-textarea-input {
	height: 120px
}

.reset-mfa-select-list .bn-checkbox-icon {
	font-size: 16px;
	margin: var(--space-4xs)
}

.bidscl-body2secondary {
	color: var(--color-SecondaryText);
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.bidscl-body2secondary {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px
	}
}

.mfa-passkey-loading {
	margin-right: 8px;
	padding-bottom: 0;
	padding-top: 0
}

@media (min-width:768px) {
	.bn-mfa-web.bn-modal>.bn-modal-wrap {
		margin-top: 80px
	}
}

.bn-mfa-page-style .mfa-need-bind-pageV2,
.bn-mfa-page-style .mfa-verify-page {
	padding: 0
}

.mfa-verify-page {
	flex-direction: column;
	height: calc(100% - 64px);
	overflow-y: scroll;
	padding: 0 1.5rem;
	width: 100%
}

@media (min-width:640px) {
	.mfa-verify-page {
		height: auto;
		min-height: 452px;
		padding-left: 2.5rem;
		padding-right: 2.5rem
	}
}

.mfa-verify-buttonv2 {
	margin-bottom: 16px;
	margin-top: var(--space-xl);
	width: 100%
}

.mfa-security-unavailable {
	padding: 8px 0
}

@media (min-width:640px) {
	.mfa-security-unavailable {
		text-align: center
	}
}

.mfa-security-page-title {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	margin-bottom: .5rem
}

@media only screen and (min-width:768px) {
	.mfa-security-page-title {
		font-size: 40px;
		font-weight: 600;
		line-height: 48px
	}
}

@media (min-width:640px) {
	.mfa-security-page-title {
		font-size: 24px;
		font-weight: 600;
		line-height: 34px;
		margin-bottom: 1rem
	}

	@media only screen and (min-width:768px) {
		.mfa-security-page-title {
			font-size: 32px;
			font-weight: 600;
			line-height: 40px
		}
	}
}

.mfa-option-box {
	grid-gap: .75rem;
	align-items: center;
	border-color: var(--color-Line);
	border-radius: .75rem;
	border-style: solid;
	border-width: 1px;
	cursor: pointer;
	display: flex;
	gap: .75rem;
	height: 72px;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;

	@media (min-width:640px) {
		width: calc(100% - 2px)
	}
}

@media (min-width:640px) {
	.mfa-option-box {
		border-color: var(--color-InputLine);
		height: 64px
	}

	.mfa-option-box:hover {
		--tw-shadow: 0 0 0px 0.5px var(--color-PrimaryText);
		--tw-shadow-colored: 0 0 0px 0.5px var(--tw-shadow-color);
		border-color: var(--color-PrimaryText)
	}

	.mfa-option-box.bn-mfa-overview-step-done:hover,
	.mfa-option-box:hover {
		box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
	}

	.mfa-option-box.bn-mfa-overview-step-done:hover {
		--tw-shadow: 0 0 #0000;
		--tw-shadow-colored: 0 0 #0000;
		border-style: none
	}
}

.typography-Headline1 {
	font-size: 40px;
	font-weight: 600;
	line-height: 56px
}

@media only screen and (min-width:768px) {
	.typography-Headline1 {
		font-size: 56px;
		font-weight: 600;
		line-height: 64px
	}
}

.typography-Headline2 {
	font-size: 36px;
	font-weight: 600;
	line-height: 44px
}

@media only screen and (min-width:768px) {
	.typography-Headline2 {
		font-size: 48px;
		font-weight: 600;
		line-height: 56px
	}
}

.typography-Headline3 {
	font-size: 28px;
	font-weight: 600;
	line-height: 40px
}

@media only screen and (min-width:768px) {
	.typography-Headline3 {
		font-size: 40px;
		font-weight: 600;
		line-height: 48px
	}
}

.typography-Headline4 {
	font-size: 24px;
	font-weight: 600;
	line-height: 32px
}

@media only screen and (min-width:768px) {
	.typography-Headline4 {
		font-size: 32px;
		font-weight: 600;
		line-height: 40px
	}
}

.typography-Headline5 {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-Headline5 {
		font-size: 28px;
		font-weight: 600;
		line-height: 36px
	}
}

.typography-Headline6 {
	font-size: 18px;
	font-weight: 600;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-Headline6 {
		font-size: 24px;
		font-weight: 600;
		line-height: 32px
	}
}

.typography-Subtitle1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 26px
}

@media only screen and (min-width:768px) {
	.typography-Subtitle1 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.typography-Subtitle2 {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-Subtitle2 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.typography-Subtitle3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-Subtitle3 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}
}

.typography-Subtitle4 {
	font-size: 14px;
	font-weight: 500;
	line-height: 20px
}

@media only screen and (min-width:768px) {
	.typography-Subtitle4 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px
	}
}

.typography-Subtitle5 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-Subtitle5 {
		font-size: 12px;
		font-weight: 500;
		line-height: 20px
	}
}

.typography-Body1 {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-Body1 {
		font-size: 20px;
		font-weight: 400;
		line-height: 28px
	}
}

.typography-Body2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.typography-Body2 {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px
	}
}

.typography-Body3 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.typography-Body3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px
	}
}

.typography-Btn_link1 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-Btn_link1 {
		font-size: 20px;
		line-height: 28px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-Btn_link2 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-Btn_link2 {
		font-size: 14px;
		font-weight: 500;
		line-height: 20px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-Btn_link3 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-Btn_link3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-Btn_link4 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-Btn_link4 {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-Caption1 {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.typography-Caption1 {
		font-size: 12px;
		font-weight: 500;
		line-height: 16px
	}
}

.typography-Caption2 {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.typography-Caption2 {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px
	}
}

.typography-Caption3 {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.typography-Caption3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px
	}
}

.typography-Caption4 {
	font-size: 12px;
	font-weight: 500;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.typography-Caption4 {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px
	}
}

.typography-Primary_num1 {
	font-size: 36px;
	font-weight: 600;
	line-height: 44px
}

@media only screen and (min-width:768px) {
	.typography-Primary_num1 {
		font-size: 32px;
		font-weight: 600;
		line-height: 40px
	}
}

.typography-Primary_num2 {
	font-size: 28px;
	font-weight: 600;
	line-height: 40px
}

@media only screen and (min-width:768px) {
	.typography-Primary_num2 {
		font-size: 28px;
		font-weight: 600;
		line-height: 36px
	}
}

.typography-Primary_num3 {
	font-size: 24px;
	font-weight: 400;
	line-height: 30px
}

@media only screen and (min-width:768px) {
	.typography-Primary_num3 {
		font-size: 24px;
		font-weight: 600;
		line-height: 32px
	}
}

.typography-Secondary_num1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-Secondary_num1 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.typography-Secondary_num2 {
	font-size: 18px;
	font-weight: 500;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-Secondary_num2 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.typography-Secondary_num3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-Secondary_num3 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}
}

.typography-Tertiary_num1 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.typography-Tertiary_num1 {
		font-size: 14px;
		font-weight: 500;
		line-height: 20px
	}
}

.typography-Tertiary_num2 {
	font-size: 12px;
	font-weight: 500;
	line-height: 20px
}

@media only screen and (min-width:768px) {
	.typography-Tertiary_num2 {
		font-size: 12px;
		font-weight: 500;
		line-height: 16px
	}
}

.typography-Tertiary_num3 {
	font-size: 12px;
	font-weight: 400;
	line-height: 20px
}

@media only screen and (min-width:768px) {
	.typography-Tertiary_num3 {
		font-size: 12px;
		font-weight: 400;
		line-height: 16px
	}
}

.typography-title1 {
	font-size: 40px;
	font-weight: 600;
	line-height: 48px
}

@media only screen and (min-width:768px) {
	.typography-title1 {
		font-size: 56px;
		font-weight: 600;
		line-height: 72px
	}
}

.typography-title2 {
	font-size: 36px;
	font-weight: 600;
	line-height: 44px
}

@media only screen and (min-width:768px) {
	.typography-title2 {
		font-size: 48px;
		font-weight: 600;
		line-height: 56px
	}
}

.typography-headline0 {
	font-size: 32px;
	font-weight: 600;
	line-height: 40px
}

@media only screen and (min-width:768px) {
	.typography-headline0 {
		font-size: 44px;
		font-weight: 600;
		line-height: 52px
	}
}

.typography-headline1 {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px
}

@media only screen and (min-width:768px) {
	.typography-headline1 {
		font-size: 40px;
		font-weight: 600;
		line-height: 48px
	}
}

.typography-headline2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px
}

@media only screen and (min-width:768px) {
	.typography-headline2 {
		font-size: 32px;
		font-weight: 600;
		line-height: 40px
	}
}

.typography-headline2-1 {
	font-size: 22px;
	font-weight: 600;
	line-height: 32px
}

@media only screen and (min-width:768px) {
	.typography-headline2-1 {
		font-size: 30px;
		font-weight: 600;
		line-height: 38px
	}
}

.typography-headline3 {
	font-size: 20px;
	font-weight: 600;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-headline3 {
		font-size: 28px;
		font-weight: 600;
		line-height: 36px
	}
}

.typography-headline4 {
	font-size: 18px;
	font-weight: 600;
	line-height: 26px
}

@media only screen and (min-width:768px) {
	.typography-headline4 {
		font-size: 24px;
		font-weight: 600;
		line-height: 34px
	}
}

.typography-headline5 {
	font-size: 18px;
	font-weight: 600;
	line-height: 26px
}

@media only screen and (min-width:768px) {
	.typography-headline5 {
		font-size: 20px;
		font-weight: 600;
		line-height: 28px
	}
}

.typography-subtitle4 {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-subtitle4 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.typography-subtitle5 {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-subtitle5 {
		font-size: 20px;
		font-weight: 400;
		line-height: 28px
	}
}

.typography-subtitle6 {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-subtitle6 {
		font-size: 16px;
		font-weight: 600;
		line-height: 24px
	}
}

.typography-subtitle1 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-subtitle1 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}
}

.typography-subtitle2 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.typography-subtitle2 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px
	}
}

.typography-subtitle3 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-subtitle3 {
		font-size: 12px;
		font-weight: 500;
		line-height: 18px
	}
}

.typography-body1 {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-body1 {
		font-size: 20px;
		font-weight: 400;
		line-height: 28px
	}
}

.typography-body1-1 {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-body1-1 {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px
	}
}

.typography-body2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.typography-body2 {
		font-size: 16px;
		font-weight: 400;
		line-height: 24px
	}
}

.typography-body3 {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.typography-body3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}
}

.typography-body4 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-body4 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px
	}
}

.typography-body5 {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-body5 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}
}

.typography-btnLink1 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-btnLink1 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-btnLink2 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-btnLink2 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-btnLink3 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-btnLink3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-btnLink4 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
	-webkit-text-decoration-color: currentColor;
	text-decoration-color: currentColor;
	-webkit-text-decoration-line: none;
	text-decoration-line: none;
	-webkit-text-decoration-style: solid;
	text-decoration-style: solid;
	text-underline-offset: 2px
}

@media only screen and (min-width:768px) {
	.typography-btnLink4 {
		font-size: 12px;
		font-weight: 400;
		line-height: 18px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: underline;
		text-decoration-line: underline;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}
}

.typography-caption0 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-caption0 {
		font-size: 12px;
		font-weight: 500;
		line-height: 18px
	}
}

.typography-caption1 {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-caption1 {
		font-size: 12px;
		font-weight: 400;
		line-height: 18px
	}
}

.typography-caption2 {
	font-size: 10px;
	font-weight: 400;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.typography-caption2 {
		font-size: 12px;
		font-weight: 400;
		line-height: 18px
	}
}

.typography-caption3 {
	font-size: 10px;
	font-weight: 500;
	line-height: 16px
}

@media only screen and (min-width:768px) {
	.typography-caption3 {
		font-size: 12px;
		font-weight: 500;
		line-height: 18px
	}
}

.typography-primaryNum0 {
	font-size: 48px;
	font-weight: 600;
	line-height: 56px
}

@media only screen and (min-width:768px) {
	.typography-primaryNum0 {
		font-size: 48px;
		font-weight: 600;
		line-height: 56px
	}
}

.typography-primaryNum1 {
	font-size: 36px;
	font-weight: 600;
	line-height: 44px
}

@media only screen and (min-width:768px) {
	.typography-primaryNum1 {
		font-size: 36px;
		font-weight: 600;
		line-height: 44px
	}
}

.typography-primaryNum1-1 {
	font-size: 32px;
	font-weight: 600;
	line-height: 40px
}

@media only screen and (min-width:768px) {
	.typography-primaryNum1-1 {
		font-size: 32px;
		font-weight: 600;
		line-height: 40px
	}
}

.typography-primaryNum2 {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px
}

@media only screen and (min-width:768px) {
	.typography-primaryNum2 {
		font-size: 28px;
		font-weight: 600;
		line-height: 36px
	}
}

.typography-primaryNum3 {
	font-size: 24px;
	font-weight: 600;
	line-height: 34px
}

@media only screen and (min-width:768px) {
	.typography-primaryNum3 {
		font-size: 24px;
		font-weight: 600;
		line-height: 34px
	}
}

.typography-secondaryNum1 {
	font-size: 20px;
	font-weight: 500;
	line-height: 28px
}

@media only screen and (min-width:768px) {
	.typography-secondaryNum1 {
		font-size: 20px;
		font-weight: 500;
		line-height: 28px
	}
}

.typography-secondaryNum2 {
	font-size: 18px;
	font-weight: 500;
	line-height: 26px
}

@media only screen and (min-width:768px) {
	.typography-secondaryNum2 {
		font-size: 18px;
		font-weight: 500;
		line-height: 26px
	}
}

.typography-secondaryNum3 {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px
}

@media only screen and (min-width:768px) {
	.typography-secondaryNum3 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}
}

.typography-tertiaryNum1 {
	font-size: 14px;
	font-weight: 500;
	line-height: 22px
}

@media only screen and (min-width:768px) {
	.typography-tertiaryNum1 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px
	}
}

.typography-tertiaryNum2 {
	font-size: 12px;
	font-weight: 500;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-tertiaryNum2 {
		font-size: 12px;
		font-weight: 500;
		line-height: 18px
	}
}

.typography-tertiaryNum3 {
	font-size: 12px;
	font-weight: 400;
	line-height: 18px
}

@media only screen and (min-width:768px) {
	.typography-tertiaryNum3 {
		font-size: 12px;
		font-weight: 400;
		line-height: 18px
	}
}

@media (max-width:639px) {
	.mobile\:bidscl-body2secondary {
		color: var(--color-SecondaryText);
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}

	@media only screen and (min-width:768px) {
		.mobile\:bidscl-body2secondary {
			font-size: 16px;
			font-weight: 400;
			line-height: 24px
		}
	}
}

.before\:mr-2:before {
	content: var(--tw-content);
	margin-right: .5rem
}

.before\:block:before {
	content: var(--tw-content);
	display: block
}

.before\:content-\[\'\2022\'\]:before {
	--tw-content: "•";
	content: var(--tw-content)
}

.hover\:text-\[--color-textBrand\]:hover {
	color: var(--color-textBrand)
}

@media (max-width:639px) {
	.mobile\:mt-auto {
		margin-top: auto
	}

	.mobile\:h-6 {
		height: 1.5rem
	}

	.mobile\:w-6 {
		width: 1.5rem
	}

	.mobile\:border {
		border-width: 1px
	}

	.mobile\:border-solid {
		border-style: solid
	}

	.mobile\:border-\[--color-Line\] {
		border-color: var(--color-Line)
	}

	.mobile\:text-left {
		text-align: left
	}

	.mobile\:bidscl-body3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}

	@media only screen and (min-width:768px) {
		.mobile\:bidscl-body3 {
			font-size: 14px;
			font-weight: 400;
			line-height: 22px
		}
	}

	.mobile\:bidscl-title2 {
		font-size: 36px;
		font-weight: 600;
		line-height: 44px
	}

	@media only screen and (min-width:768px) {
		.mobile\:bidscl-title2 {
			font-size: 48px;
			font-weight: 600;
			line-height: 56px
		}
	}

	.mobile\:bidscls-btnLink2 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px;
		-webkit-text-decoration-color: currentColor;
		text-decoration-color: currentColor;
		-webkit-text-decoration-line: none;
		text-decoration-line: none;
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid;
		text-underline-offset: 2px
	}

	@media only screen and (min-width:768px) {
		.mobile\:bidscls-btnLink2 {
			font-size: 14px;
			font-weight: 500;
			line-height: 22px;
			-webkit-text-decoration-color: currentColor;
			text-decoration-color: currentColor;
			-webkit-text-decoration-line: underline;
			text-decoration-line: underline;
			-webkit-text-decoration-style: solid;
			text-decoration-style: solid;
			text-underline-offset: 2px
		}
	}

	.mobile\:bidscls-btnLink2 {
		text-decoration: none
	}
}

@media (min-width:640px) {
	.sm\:order-1 {
		order: 1
	}

	.sm\:order-2 {
		order: 2
	}

	.sm\:order-3 {
		order: 3
	}

	.sm\:mx-1 {
		margin-left: .25rem;
		margin-right: .25rem
	}

	.sm\:mb-0 {
		margin-bottom: 0
	}

	.sm\:mb-2 {
		margin-bottom: .5rem
	}

	.sm\:mb-4 {
		margin-bottom: 1rem
	}

	.sm\:mb-8 {
		margin-bottom: 2rem
	}

	.sm\:mr-3 {
		margin-right: .75rem
	}

	.sm\:mt-0 {
		margin-top: 0
	}

	.sm\:mt-4 {
		margin-top: 1rem
	}

	.sm\:mt-6 {
		margin-top: 1.5rem
	}

	.sm\:mt-8 {
		margin-top: 2rem
	}

	.sm\:h-24 {
		height: 6rem
	}

	.sm\:h-5 {
		height: 1.25rem
	}

	.sm\:h-\[48px\] {
		height: 48px
	}

	.sm\:h-\[96px\] {
		height: 96px
	}

	.sm\:w-24 {
		width: 6rem
	}

	.sm\:w-5 {
		width: 1.25rem
	}

	.sm\:w-\[96px\] {
		width: 96px
	}

	.sm\:w-full {
		width: 100%
	}

	.sm\:flex-row {
		flex-direction: row
	}

	.sm\:items-center {
		align-items: center
	}

	.sm\:justify-start {
		justify-content: flex-start
	}

	.sm\:gap-2 {
		grid-gap: .5rem;
		gap: .5rem
	}

	.sm\:gap-4 {
		grid-gap: 1rem;
		gap: 1rem
	}

	.sm\:space-y-4>:not([hidden])~:not([hidden]) {
		--tw-space-y-reverse: 0;
		margin-bottom: calc(1rem*var(--tw-space-y-reverse));
		margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)))
	}

	.sm\:rounded-\[8px\] {
		border-radius: 8px
	}

	.sm\:bg-\[--color-Vessel\] {
		background-color: var(--color-Vessel)
	}

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

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

	.sm\:py-4 {
		padding-bottom: 1rem;
		padding-top: 1rem
	}

	.sm\:py-6 {
		padding-bottom: 1.5rem;
		padding-top: 1.5rem
	}

	.sm\:text-left {
		text-align: left
	}

	.sm\:text-center {
		text-align: center
	}

	.sm\:text-sm {
		font-size: .875rem;
		line-height: 1.25rem
	}

	.sm\:text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem
	}

	.sm\:\!font-normal {
		font-weight: 400 !important
	}

	.sm\:leading-\[16px\] {
		line-height: 16px
	}

	.sm\:text-\[--color-PrimaryText\] {
		color: var(--color-PrimaryText)
	}

	.sm\:text-\[--color-PrimaryYellow\] {
		color: var(--color-PrimaryYellow)
	}

	.sm\:text-\[--color-SecondaryText\] {
		color: var(--color-SecondaryText)
	}

	.sm\:text-\[--color-TertiaryText\] {
		color: var(--color-TertiaryText)
	}

	.sm\:text-\[--color-textThird\] {
		color: var(--color-textThird)
	}

	.sm\:bidscl-headline1 {
		font-size: 28px;
		font-weight: 600;
		line-height: 36px
	}

	@media only screen and (min-width:768px) {
		.sm\:bidscl-headline1 {
			font-size: 40px;
			font-weight: 600;
			line-height: 48px
		}
	}

	.sm\:bidscl-headline2 {
		font-size: 24px;
		font-weight: 600;
		line-height: 34px
	}

	@media only screen and (min-width:768px) {
		.sm\:bidscl-headline2 {
			font-size: 32px;
			font-weight: 600;
			line-height: 40px
		}
	}

	.sm\:bidscl-headline5 {
		font-size: 18px;
		font-weight: 600;
		line-height: 26px
	}

	@media only screen and (min-width:768px) {
		.sm\:bidscl-headline5 {
			font-size: 20px;
			font-weight: 600;
			line-height: 28px
		}
	}

	.sm\:bidscl-subtitle1 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}

	@media only screen and (min-width:768px) {
		.sm\:bidscl-subtitle1 {
			font-size: 16px;
			font-weight: 500;
			line-height: 24px
		}
	}

	.sm\:bidscl-subtitle2 {
		font-size: 14px;
		font-weight: 500;
		line-height: 22px
	}

	@media only screen and (min-width:768px) {
		.sm\:bidscl-subtitle2 {
			font-size: 14px;
			font-weight: 500;
			line-height: 22px
		}
	}

	.sm\:subtitle3 {
		font-size: 16px;
		font-weight: 500;
		line-height: 24px
	}

	@media only screen and (min-width:768px) {
		.sm\:subtitle3 {
			font-size: 16px;
			font-weight: 500;
			line-height: 24px
		}
	}

	.sm\:body2 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}

	@media only screen and (min-width:768px) {
		.sm\:body2 {
			font-size: 16px;
			font-weight: 400;
			line-height: 24px
		}
	}

	.sm\:bidscl-body3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}

	@media only screen and (min-width:768px) {
		.sm\:bidscl-body3 {
			font-size: 14px;
			font-weight: 400;
			line-height: 22px
		}
	}

	.sm\:body3 {
		font-size: 14px;
		font-weight: 400;
		line-height: 22px
	}

	@media only screen and (min-width:768px) {
		.sm\:body3 {
			font-size: 14px;
			font-weight: 400;
			line-height: 20px
		}
	}

	.sm\:bidscl-caption1 {
		font-size: 12px;
		font-weight: 400;
		line-height: 18px
	}

	@media only screen and (min-width:768px) {
		.sm\:bidscl-caption1 {
			font-size: 12px;
			font-weight: 400;
			line-height: 18px
		}
	}
}

@media (min-width:768px) {
	.md\:my-4 {
		margin-bottom: 1rem;
		margin-top: 1rem
	}

	.md\:mb-6 {
		margin-bottom: 1.5rem
	}

	.md\:mb-\[24px\] {
		margin-bottom: 24px
	}

	.md\:mt-\[12px\] {
		margin-top: 12px
	}

	.md\:mt-\[24px\] {
		margin-top: 24px
	}

	.md\:mt-\[64px\] {
		margin-top: 64px
	}

	.md\:h-\[48px\] {
		height: 48px
	}

	.md\:w-\[198px\] {
		width: 198px
	}

	.md\:rounded-\[4px\] {
		border-radius: 4px
	}

	.md\:px-10 {
		padding-left: 2.5rem;
		padding-right: 2.5rem
	}

	.md\:text-\[16px\] {
		font-size: 16px
	}

	.md\:\!font-normal {
		font-weight: 400 !important
	}

	.md\:font-\[600\] {
		font-weight: 600
	}

	.md\:leading-\[24px\] {
		line-height: 24px
	}

	.md\:text-\[--color-textThird\] {
		color: var(--color-textThird)
	}
}

@media (min-width:1024px) {
	.lg\:ml-\[8px\] {
		margin-left: 8px
	}

	.lg\:w-\[156px\] {
		width: 156px
	}

	.lg\:w-\[164px\] {
		width: 164px
	}

	.lg\:w-\[240px\] {
		width: 240px
	}

	.lg\:w-\[400px\] {
		width: 400px
	}

	.lg\:w-\[792px\] {
		width: 792px
	}
}

.bn-textField-input {
	font-size: 16px !important;
	padding: initial !important
}

.bn-textField.data-size-large {
	height: 48px;
	padding: var(--space-3xs) var(--space-xs)
}

.bn-textField.data-size-large.bn-sdd-input {
	border-radius: 10px;
	font-size: 16px !important;
	font-weight: 500 !important;
	padding: 0
}
.content-layout {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: start;
    min-height: 100%;
    padding: 80px 24px 48px;
    box-sizing: border-box;
}

@media only screen and (max-width: 767px) {
    .content-layout {
        align-items: flex-start;
        padding: 8px 24px 350px;
        width: 100%;
        height: 100%; /* Yüksekliği %100 yapar */
        box-sizing: border-box; /* padding dahil */
    }
}

.username-input-field.disabled {
	background-color: var(--color-Line) !important
}

.username-input-field {
	border-color: var(--color-InputLine);
	border-radius: 10px !important;
	font-size: 16px !important;
	height: 48px !important;
	padding: 6px 10px !important;

	.bn-textField-input,
	.bn-textField-suffix,
	input {
		font-size: 16px !important;
		font-weight: 500 !important
	}

	.bn-textField-suffix {
		padding: 0 !important
	}
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
	-webkit-background-clip: text
}

input[data-autocompleted] {
	background-color: transparent !important
}

.bn-sdd-innerInputContainer {
	.bn-textField-prefix {
		margin-right: 4px
	}
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.hover\:cursor-pointer:hover {
	cursor: pointer
}

.hover\:\!border-\[--color-PrimaryText\]:hover {
	border-color: var(--color-PrimaryText) !important
}

.hover\:\!bg-\[unset\]:hover {
	background-color: unset !important
}

.hover\:bg-\[--color-Input\]:hover {
	background-color: var(--color-Input)
}

.hover\:text-\[--color-SecondaryText\]:hover {
	color: var(--color-SecondaryText)
}

.hover\:text-\[--color-textPrimary\]:hover {
	color: var(--color-textPrimary)
}

@media (max-width:639px) {
	.mobile\:mt-4 {
		margin-top: 1rem
	}

	.mobile\:h-full {
		height: 100%
	}

	.mobile\:text-center {
		text-align: center
	}
}

@media (min-width:640px) {
	.sm\:static {
		position: static
	}

	.sm\:mx-auto {
		margin-left: auto;
		margin-right: auto
	}

	.sm\:-mb-2 {
		margin-bottom: -.5rem
	}

	.sm\:mb-0 {
		margin-bottom: 0
	}

	.sm\:mb-8 {
		margin-bottom: 2rem
	}

	.sm\:mt-6 {
		margin-top: 1.5rem
	}

	.sm\:h-24 {
		height: 6rem
	}

	.sm\:h-\[80px\] {
		height: 80px
	}

	.sm\:max-h-\[486px\] {
		max-height: 486px
	}

	.sm\:w-24 {
		width: 6rem
	}

	.sm\:w-\[384px\] {
		width: 384px
	}

	.sm\:w-full {
		width: 100%
	}

	.sm\:p-0 {
		padding: 0
	}

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

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

	.sm\:px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem
	}

	.sm\:py-6 {
		padding-bottom: 1.5rem;
		padding-top: 1.5rem
	}

	.sm\:text-left {
		text-align: left
	}

	.sm\:text-center {
		text-align: center
	}

	.sm\:text-sm {
		font-size: .875rem;
		line-height: 1.25rem
	}

	.sm\:text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem
	}

	.sm\:text-\[--color-textThird\] {
		color: var(--color-textThird)
	}

	.sm\:subtitle1 {
		font-size: 20px;
		font-weight: 500;
		line-height: 26px
	}

	@media only screen and (min-width:768px) {
		.sm\:subtitle1 {
			font-size: 20px;
			font-weight: 500;
			line-height: 28px
		}
	}

	.sm\:body2 {
		font-size: 14px !important;
		font-weight: 400 !important;
		line-height: 22px !important
	}

	@media only screen and (min-width:768px) {
		.sm\:body2 {
			font-size: 16px !important;
			font-weight: 400 !important;
			line-height: 24px !important
		}
	}
}

@media (min-width:768px) {
	.md\:mb-4 {
		margin-bottom: 1rem
	}

	.md\:mb-\[8px\] {
		margin-bottom: 8px
	}

	.md\:ml-28 {
		margin-left: 7rem
	}

	.md\:mt-1 {
		margin-top: .25rem
	}

	.md\:mt-1\.5 {
		margin-top: .375rem
	}

	.md\:mt-4 {
		margin-top: 1rem
	}

	.md\:w-\[444px\] {
		width: 444px
	}

	.md\:justify-center {
		justify-content: center
	}

	.md\:border-b {
		border-bottom-width: 1px
	}

	.md\:bg-\[--color-Input\] {
		background-color: var(--color-Input)
	}

	.md\:px-10 {
		padding-left: 2.5rem;
		padding-right: 2.5rem
	}

	.md\:px-3 {
		padding-left: .75rem;
		padding-right: .75rem
	}

	.md\:py-2 {
		padding-bottom: .5rem;
		padding-top: .5rem
	}

	.md\:text-\[--color-PrimaryText\] {
		color: var(--color-PrimaryText)
	}

	.md\:decoration-solid {
		-webkit-text-decoration-style: solid;
		text-decoration-style: solid
	}
}

@media (min-width:1024px) {
	.lg\:h-24 {
		height: 6rem
	}

	.lg\:w-24 {
		width: 6rem
	}

	.lg\:w-\[484px\] {
		width: 484px
	}

	.lg\:w-\[792px\] {
		width: 792px
	}

	.lg\:w-\[812px\] {
		width: 812px
	}

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

@media (min-width:1280px) {
	.xl\:px-0 {
		padding-left: 0;
		padding-right: 0
	}
}