body {
	font-family: Bricolage Grotesque;
	color: #959595;
	background-color: #101010;
}

.s-bg-surface0 {
	background-color: #101010;
}

.s-bg-surface100 {
	background-color: #141414;
}

.s-text-surface0PrimaryText {
	color: #959595;
}

.s-text-surface100PrimaryText {
	color: #959595;
}

.s-border-surface0Border {
	border-color: #353535;
}

.s-border-surface100Border {
	border-color: #353535;
}

.s-button {
	background: linear-gradient(to bottom, #141414, #161616);
	color: #ffffff;
	border: 1px solid #3c96fd;
	border-radius: 15px;
	padding: 0 32px;
	height: 40px;
	transition: all 0.3s ease;
}

.s-button:hover {
	background: linear-gradient(to bottom, #161616, #161616);
	color: #ffffff;
	border-color: #5b94ff;
	transform: scale(0.98);
}

.s-button-secondary {
	background: linear-gradient(to bottom, #252525, #252525);
	color: #959595;
	border: 1px solid #353535;
	border-radius: 15px;
	padding: 0 32px;
	height: 40px;
	transition: all 0.3s ease;
}

.s-button-secondary:hover {
	background: linear-gradient(to bottom, #202020, #252525);
	color: #959595;
	border-color: #353535;
	transform: scale(0.98);
}

.sf-hidden {
	display: none !important
}

@font-face {
	font-family: 'Bricolage Grotesque';
	src: url('./Fonts/Font.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

body {
	font-family: 'Bricolage Grotesque', sans-serif;
}

.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

*,
:before,
:after {
	--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: rgb(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: ;
	--tw-contain-size: ;
	--tw-contain-layout: ;
	--tw-contain-paint: ;
	--tw-contain-style:
}

*,
:before,
:after {
	box-sizing: border-box;
	border-width: 0;
	border-style: solid;
	border-color: #e5e7eb
}

:before,
:after {
	--tw-content: ""
}

html,
:host {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: Bricolage Grotesque;
	font-feature-settings: normal;
	font-variation-settings: normal;
	-webkit-tap-highlight-color: transparent
}

body {
	margin: 0;
	line-height: inherit
}

a {
	color: inherit;
	text-decoration: inherit
}

button,
input {
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	margin: 0;
	padding: 0
}

button {
	text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
	appearance: button;
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto
}

::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

h1 {
	margin: 0
}

input::placeholder,
textarea::placeholder {
	opacity: 1;
	color: #9ca3af
}

button,
[role=button] {
	cursor: pointer
}

:disabled {
	cursor: default
}

img,
svg {
	display: block;
}

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

::-webkit-scrollbar-thumb {
	background-color: #8080801a;
	border-radius: 99px
}

html {
	font-size: 14px
}

body {
	color: var(--s-theme-colors-primaryText)
}

.s-pointer-events-none {
	pointer-events: none
}

.s-absolute {
	position: absolute
}

.s-relative {
	position: relative
}

.s-left-\[1rem\] {
	left: 1rem
}

.s-z-50 {
	z-index: 50
}

.s-col-span-2 {
	grid-column: span 2/span 2
}

.s-my-10 {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem
}

.s-ml-auto {
	margin-left: auto
}

.s-flex {
	display: flex
}

.s-grid {
	display: grid
}

.s-hidden {
	display: none
}

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

.s-h-buttonHeight {
	height: 40px
}

.s-h-fit {
	height: -moz-fit-content;
	height: fit-content
}

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

.s-h-inputHeight {
	height: 40px
}

.s-min-h-screen {
	min-height: 100vh
}

.s-w-\[--popover-available-width\] {
	width: var(--popover-available-width)
}

.s-w-buttonHeight {
	width: 40px
}

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

.s-max-w-\[50vw\] {
	max-width: 50vw
}

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

.s-grow {
	flex-grow: 1
}

@keyframes s-pulse {
	50% {
		opacity: .5
	}
}

@keyframes s-spin {
	to {
		transform: rotate(360deg)
	}
}

.s-grid-rows-\[min-content_1fr_min-content\] {
	grid-template-rows: min-content 1fr min-content
}

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

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

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

.s-gap-4 {
	gap: 1rem
}

.s-gap-8 {
	gap: 2rem
}

.s-gap-\[10px\] {
	gap: 10px
}

.s-gap-\[16px\] {
	gap: 16px
}

.s-gap-\[20px\] {
	gap: 20px
}

.s-gap-\[5px\] {
	gap: 5px
}

.s-overflow-auto {
	overflow: auto
}

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

.s-rounded-baseBorderRadius {
	border-radius: 15px
}

.s-rounded-buttonBorderRadius {
	border-radius: 15px
}

.s-rounded-inputBorderRadius {
	border-radius: 15px
}

.s-border {
	border-width: 1px
}

.s-border-surface0Border {
	border-color: #353535
}

.s-border-surface0ButtonPrimaryBorder {
	border-color: #3c96fd
}

.s-border-surface0ButtonSecondaryBorder {
	border-color: #353535
}

.s-border-surface0InputBorder {
	border-color: #353535
}

.s-bg-surface0 {
	background-color: #101010
}

.s-bg-surface0InputBg {
	background-color: #141414
}

.s-bg-surface100 {
	background-color: #141414
}

.s-bg-gradient-to-b {
	background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.s-from-\[--s-theme-colors-surface0ButtonPrimaryBg\] {
	--tw-gradient-from: #141414 var(--tw-gradient-from-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.s-from-\[--s-theme-colors-surface0ButtonSecondaryBg\] {
	--tw-gradient-from: #252525 var(--tw-gradient-from-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.s-to-\[--s-theme-colors-surface0ButtonPrimaryBgAccent\] {
	--tw-gradient-to: #161616 var(--tw-gradient-to-position)
}

.s-to-\[--s-theme-colors-surface0ButtonSecondaryBgAccent\] {
	--tw-gradient-to: #252525 var(--tw-gradient-to-position)
}

.s-bg-clip-padding {
	background-clip: padding-box
}

.s-object-scale-down {
	-o-object-fit: scale-down;
	object-fit: scale-down
}

.s-p-2 {
	padding: .5rem
}

.s-p-4 {
	padding: 1rem
}

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

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

.s-px-\[2rem\] {
	padding-left: 2rem;
	padding-right: 2rem
}

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

.s-text-5xl {
	font-size: 3rem;
	line-height: 1
}

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

.s-font-semibold {
	font-weight: 600
}

.s-text-surface0ButtonPrimaryText {
	color: #ffffff
}

.s-text-surface0ButtonSecondaryText {
	color: #959595
}

.s-text-surface0InputText {
	color: #959595
}

.s-text-surface0PrimaryText {
	color: #959595
}

.s-text-surface0SecondaryText {
	color: #959595
}

.s-text-surface100PrimaryText {
	color: #959595
}

.s-text-surface100SecondaryText {
	color: #959595
}

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

.s-shadow-shadow {
	--tw-shadow-color: #ffffff00;
	--tw-shadow: var(--tw-shadow-colored)
}

.s-outline-2 {
	outline-width: 2px
}

.s-outline-gray-500\/20 {
	outline-color: #6b728033
}

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

.placeholder\:s-text-surface0InputPlaceholder::placeholder {
	color: #707070
}

.hover\:s-scale-\[0\.98\]:hover {
	--tw-scale-x: .98;
	--tw-scale-y: .98;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:s-border-surface0ButtonPrimaryBorderHover:hover {
	border-color: #5b94ff
}

.hover\:s-border-surface0ButtonSecondaryBorderHover:hover {
	border-color: #353535
}

.hover\:s-border-surface0InputBorderHover:hover {
	border-color: #353535
}

.hover\:s-bg-surface0InputBgHover:hover {
	background-color: #161616
}

.hover\:s-from-\[--s-theme-colors-surface0ButtonPrimaryBgHover\]:hover {
	--tw-gradient-from: #161616 var(--tw-gradient-from-position);
	--tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.hover\:s-from-\[--s-theme-colors-surface0ButtonSecondaryBgHover\]:hover {
	--tw-gradient-from: #202020 var(--tw-gradient-from-position);
	--tw-gradient-to: rgb(255 255 255/0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.hover\:s-to-\[--s-theme-colors-surface0ButtonSecondaryBgHoverAccent\]:hover {
	--tw-gradient-to: #252525 var(--tw-gradient-to-position)
}

.hover\:s-to-\[--s-theme-colors-surface300ButtonPrimaryBgHoverAccent\]:hover {
	--tw-gradient-to: #161616 var(--tw-gradient-to-position)
}

.hover\:s-text-brand:hover {
	color: #5b94ff
}

.hover\:s-text-surface0ButtonPrimaryTextHover:hover {
	color: #ffffff
}

.hover\:s-text-surface0ButtonSecondaryTextHover:hover {
	color: #959595
}

.hover\:s-text-surface0InputTextHover:hover {
	color: #959595
}

.hover\:s-text-surface100PrimaryText:hover {
	color: #959595
}

.placeholder\:hover\:s-text-surface0InputPlaceholderHover:hover::placeholder {
	color: #707070
}

.focus-visible\:s-outline:focus-visible {
	outline-style: solid
}

.disabled\:s-opacity-50:disabled {
	opacity: .5
}

@media (min-width:440px) {}

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

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

@media (min-width:1024px) {
	.lg\:s-col-span-2 {
		grid-column: span 2/span 2
	}

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

	.lg\:s-ml-auto {
		margin-left: auto
	}

	.lg\:s-flex {
		display: flex;
	}

	.lg\:s-grid {
		display: grid
	}

	.lg\:s-w-full {
		width: 100%
	}

	.lg\:s-max-w-mainStoreWidth {
		max-width: 2440px
	}

	.lg\:s-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

	.lg\:s-flex-row {
		flex-direction: row
	}

	.lg\:s-justify-end {
		justify-content: flex-end
	}

	.lg\:s-justify-between {
		justify-content: space-between
	}

	.lg\:s-gap-\[20px\] {
		gap: 20px
	}

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

	.lg\:s-px-\[30px\] {
		padding-left: 30px;
		padding-right: 30px
	}

	.lg\:s-py-5 {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem
	}
}
