/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%
}

body {
	margin: 0
}

main {
	display: block
}

h1 {
	font-size: 2em;
	margin: .67em 0
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible
}

pre {
	font-family: monospace,monospace;
	font-size: 1em
}

a {
	background-color: transparent
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

code,kbd,samp {
	font-family: monospace,monospace;
	font-size: 1em
}

img {
	border-style: none
}

button,input,optgroup,select,textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0
}

button,input {
	overflow: visible
}

button,[type=button],[type=reset],[type=submit] {
	-webkit-appearance: button
}

button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {
	border-style: none;
	padding: 0
}

button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring {
	outline: 1px dotted ButtonText
}

fieldset {
	padding: .35em .75em .625em
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal
}

textarea {
	overflow: auto
}[type=checkbox],[type=radio] {
	box-sizing: border-box;
	padding: 0
}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
	height: auto
}[type=search]::-webkit-search-decoration {
	-webkit-appearance: none
}

details {
	display: block
}

template {
	display: none
}

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

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

html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
	font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,apple color emoji,segoe ui emoji,Segoe UI Symbol,noto color emoji;
	font-feature-settings: normal;
	font-variation-settings: normal
}

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

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

h1,h2,h3,h4,h5,h6 {
	font-size: inherit;
	font-weight: inherit
}

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

b,strong {
	font-weight: bolder
}

code,kbd,samp,pre {
	font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
	font-size: 1em
}

small {
	font-size: 80%
}

sub,sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse
}

button,input,optgroup,select,textarea {
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
	margin: 0;
	padding: 0
}

button,select {
	text-transform: none
}

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

:-moz-focusring {
	outline: auto
}

:-moz-ui-invalid {
	box-shadow: none
}

progress {
	vertical-align: baseline
}

::-webkit-inner-spin-button,::-webkit-outer-spin-button {
	height: auto
}[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

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

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

summary {
	display: list-item
}

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre {
	margin: 0
}

fieldset {
	margin: 0;
	padding: 0
}

legend {
	padding: 0
}

ol,ul,menu {
	list-style: none;
	margin: 0;
	padding: 0
}

dialog {
	padding: 0
}

textarea {
	resize: vertical
}

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

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

:disabled {
	cursor: default
}

img,svg,video,canvas,audio,iframe,embed,object {
	display: block;
	vertical-align: middle
}

img,video {
	max-width: 100%;
	height: auto
}[hidden] {
	display: 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:
}

::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: 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:
}

.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
	}
}

.static {
	position: static
}

.relative {
	position: relative
}

.sticky {
	position: -webkit-sticky;
	position: sticky
}

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

.z-10 {
	z-index: 10
}

.z-20 {
	z-index: 20
}

.order-first {
	order: -9999
}

.col-span-1 {
	grid-column: span 1/span 1
}

.col-span-10 {
	grid-column: span 10/span 10
}

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

.col-span-3 {
	grid-column: span 3/span 3
}

.col-span-4 {
	grid-column: span 4/span 4
}

.col-span-5 {
	grid-column: span 5/span 5
}

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

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

.mb-10 {
	margin-bottom: 2.5rem
}

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

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

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

.ml-auto {
	margin-left: auto
}

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

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

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

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

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

.block {
	display: block
}

.inline-block {
	display: inline-block
}

.flex {
	display: flex
}

.table {
	display: table
}

.grid {
	display: grid
}

.hidden {
	display: none
}

.h-0 {
	height: 0
}

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

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

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

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

.h-full {
	height: 100%
}

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

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

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

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

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

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

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

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

.w-full {
	width: 100%
}

.-translate-y-2 {
	--tw-translate-y: -.5rem;
	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))
}

.-translate-y-\[15px\] {
	--tw-translate-y: -15px;
	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))
}

.translate-y-0 {
	--tw-translate-y: 0px;
	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))
}

.translate-y-2 {
	--tw-translate-y: .5rem;
	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))
}

.translate-y-\[20px\] {
	--tw-translate-y: 20px;
	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))
}

.rotate-180 {
	--tw-rotate: 180deg;
	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))
}

.scale-100 {
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	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))
}

.scale-95 {
	--tw-scale-x: .95;
	--tw-scale-y: .95;
	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))
}

.scale-\[0\.8\] {
	--tw-scale-x: .8;
	--tw-scale-y: .8;
	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))
}

.transform {
	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))
}

.cursor-pointer {
	cursor: pointer
}

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

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

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

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

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

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

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

.grid-rows-4 {
	grid-template-rows: repeat(4,minmax(0,1fr))
}

.flex-col {
	flex-direction: column
}

.flex-wrap {
	flex-wrap: wrap
}

.content-center {
	align-content: center
}

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

.items-center {
	align-items: center
}

.items-baseline {
	align-items: baseline
}

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

.gap-2 {
	gap: .5rem
}

.gap-32 {
	gap: 8rem
}

.gap-5 {
	gap: 1.25rem
}

.gap-6 {
	gap: 1.5rem
}

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

.gap-\[13px\] {
	gap: 13px
}

.gap-\[15px\] {
	gap: 15px
}

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

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

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

.gap-\[4px\] {
	gap: 4px
}

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

.gap-\[60px\] {
	gap: 60px
}

.gap-\[7px\] {
	gap: 7px
}

.gap-x-2 {
	column-gap: .5rem
}

.gap-y-2 {
	row-gap: .5rem
}

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

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

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

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

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

.overflow-hidden {
	overflow: hidden
}

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

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

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

.bg-\[\#31ce9330\] {
	background-color: #31ce9330
}

.bg-blue-400 {
	--tw-bg-opacity: 1;
	background-color: rgb(96 165 250/var(--tw-bg-opacity))
}

.object-cover {
	object-fit: cover
}

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

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

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

.py-0\.5 {
	padding-top: .125rem;
	padding-bottom: .125rem
}

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

.py-1\.5 {
	padding-top: .375rem;
	padding-bottom: .375rem
}

.pr-2 {
	padding-right: .5rem
}

.text-center {
	text-align: center
}

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

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

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

.text-\[\#31CE93\],.text-\[\#31ce93\] {
	--tw-text-opacity: 1;
	color: rgb(49 206 147/var(--tw-text-opacity))
}

.text-\[\#ff3d3d\] {
	--tw-text-opacity: 1;
	color: rgb(255 61 61/var(--tw-text-opacity))
}

.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity))
}

.underline {
	text-decoration-line: underline
}

.underline-offset-2 {
	text-underline-offset: 2px
}

.opacity-0 {
	opacity: 0
}

.opacity-100 {
	opacity: 1
}

.shadow {
	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(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: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)
}

.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-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
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(.4,0,.2,1);
	transition-duration: .15s
}

.duration-100 {
	transition-duration: .1s
}

.duration-200 {
	transition-duration: .2s
}

.duration-300 {
	transition-duration: .3s
}

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

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

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	outline: none
}

body {
	margin: 0;
	padding: 0;
	font-family: Inter,sans-serif;
	font-size: 1rem;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #f4f6fb
}

a {
	text-decoration: none;
	color: #0479fa
}

.grid {
	display: grid;
	gap: 21px
}

.no-gap {
	gap: 0
}

.rotate-left {
	transform: rotate(180deg)
}

@media screen and (max-width:1537px) {
	html,body {
		font-size: 14px!important
	}
}

@media screen and (max-width:768px) {
	html,body {
		font-size: 13px!important
	}
}

#range-slider-green {
	background-color: #cccccc90;
	height: 5px
}

#range-slider-green .range-slider__range {
	background-color: #31ce93;
	height: 5px
}

#range-slider-green .range-slider__thumb {
	width: 15px;
	height: 15px;
	background-color: #31ce93
}

@media(min-width:768px) {
	.md\:order-first {
		order: -9999
	}

	.md\:col-span-10 {
		grid-column: span 10/span 10
	}

	.md\:col-span-2 {
		grid-column: span 2/span 2
	}

	.md\:col-span-3 {
		grid-column: span 3/span 3
	}

	.md\:col-span-4 {
		grid-column: span 4/span 4
	}

	.md\:col-span-5 {
		grid-column: span 5/span 5
	}

	.md\:col-span-6 {
		grid-column: span 6/span 6
	}

	.md\:col-span-9 {
		grid-column: span 9/span 9
	}

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

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

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

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

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

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

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

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

	.md\:gap-\[21px\] {
		gap: 21px
	}
}

@media(min-width:1280px) {
	.xl\:col-span-2 {
		grid-column: span 2/span 2
	}

	.xl\:col-span-3 {
		grid-column: span 3/span 3
	}

	.xl\:col-span-5 {
		grid-column: span 5/span 5
	}
}

.lds-ring {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px
}

.lds-ring-white div {
	border-color: #fff transparent transparent transparent!important
}

.lds-ring div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 24px;
	height: 24px;
	margin: 8px;
	border: 2px solid;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(.5,0,.5,1) infinite;
	border-color: #31ce93 transparent transparent transparent
}

.lds-ring div:nth-child(1) {
	animation-delay: -.45s
}

.lds-ring div:nth-child(2) {
	animation-delay: -.3s
}

.lds-ring div:nth-child(3) {
	animation-delay: -.15s
}

@keyframes lds-ring {
	0% {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.button {
	background: #0fadd3;
	box-shadow: 10px 10px 40px #0fadd3;
	border-radius: 10px;
	border: none;
	color: #fff;
	padding: 0 27px;
	height: 3.125rem;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.1875rem;
	cursor: pointer;
	transition: all .2s ease-in-out;
	display: inline-flex;
	align-items: center;
	min-width: 139px;
	position: relative
}

@media screen and (max-width:768px) {
	.button {
		min-width: 80px;
		width: 100%
	}
}

.button:disabled {
	background-color: #ccc;
	box-shadow: none;
	cursor: not-allowed
}

.button:disabled:hover {
	box-shadow: none
}

.button:disabled:hover .button-disabled-text {
	transform: translate(0);
	opacity: 1
}

.button:disabled:active {
	background-color: #ccc
}

.button-disabled-text {
	position: absolute;
	background-color: #fff;
	color: #000;
	font-size: 12px;
	font-weight: 400;
	width: 100%;
	left: 105%;
	top: 0;
	transition: all .2s ease-in-out;
	transform: translate(10px);
	opacity: 0;
	box-shadow: 5px 5px 20px #dfe4f0;
	padding: 5px 10px;
	border-radius: 10px;
	text-align: left
}

.button>div {
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 4px
}

.button:hover {
	box-shadow: 0 5px 20px #31ce93b3
}

.button:active {
	background: #28a97e
}

.button-secondary {
	background-color: transparent;
	font-weight: 500;
	line-height: 19px;
	color: #334d6ecc;
	box-shadow: none
}

.button-secondary:hover {
	box-shadow: none
}

.button-secondary:active {
	background: 0 0
}

.button-white {
	background-color: #fff;
	color: #0fadd3
}

.button-white:hover {
	box-shadow: 0 5px 20px #31ce9366
}

.button-white:active {
	background: #fff
}

.button-red {
	background-color: #fff;
	box-shadow: none;
	color: #ff3d3d;
	border: 1px solid #d7e2f1
}

.button-red:hover {
	box-shadow: 0 5px 10px #0000001a
}

.button-red:active {
	background-color: transparent;
	color: #c53030
}

.button-dark {
	background: #334d6e;
	box-shadow: 10px 10px 40px #334d6e33;
	border-radius: 10px
}

.button-dark:hover {
	box-shadow: 0 5px 20px #334d6e99
}

.button-dark:active {
	background-color: #253a51
}

.input {
	display: flex;
	align-items: center;
	position: relative;
	max-width: 100%
}

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

.input-error .input-box {
	position: relative
}

.input-error .input-box input {
	border: 1px solid #ff3d3d!important
}

.input-error .input-box .error-message {
	display: flex;
	align-items: center;
	margin-top: 6px;
	gap: 5px;
	position: absolute
}

.input-error .input-box .error-message p {
	font-weight: 400;
	font-size: .75rem;
	line-height: .9375rem;
	color: #ff3d3d
}

.input.label-top {
	flex-direction: column;
	align-items: baseline
}

.input.label-top label {
	font-weight: 400;
	margin-bottom: 6px
}

@media screen and (max-width:768px) {
	.input.label-top label {
		margin-bottom: 0
	}
}

.input.label-top .error-message {
	top: -28px;
	right: 0
}

.input.label-left label {
	width: 180px
}

.input label {
	font-weight: 600;
	font-size: 1rem;
	line-height: 19px;
	color: #334d6e;
	cursor: pointer;
	display: inline-block;
	flex-shrink: 0
}

.input .input-box {
	flex-grow: 1;
	width: 100%;
	position: relative
}

@media screen and (max-width:768px) {
	.input .input-box {
		width: 100%!important
	}
}

.input .input-box .prefix-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 17px
}

.input .input-box input {
	background: #fff;
	border: 1px solid #dae2f3;
	border-radius: 10px;
	height: 3.125rem;
	padding: 0 1.25rem;
	width: 100%;
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #334d6e
}

@media screen and (max-width:768px) {
	.input .input-box input {
		width: 100%!important
	}
}

.input .input-box input::placeholder {
	font-weight: 400;
	font-size: 1rem;
	line-height: 19px;
	color: #334d6e61
}

.input .input-box input:disabled {
	background-color: #dae2f350;
	cursor: not-allowed
}

.input .input-box input.prefix-icon-true {
	padding-left: 45px;
	padding-right: 20px
}

.login-page {
	display: flex;
	justify-content: center;
	min-height: 100vh;
	align-items: center
}

@media screen and (max-width:768px) {
	.login-page {
		align-items: flex-start;
		margin-top: 100px
	}
}

.login-page .login {
	position: relative;
	display: flex;
	height: 649px;
	background: #fff;
	box-shadow: 0 4px 40px #dfe4f0;
	border-radius: 20px
}

@media only screen and (max-width:1480px) {
	.login-page .login {
		height: 100%
	}
}

@media only screen and (max-width:600px) {
	.login-page .login {
		width: 90%
	}
}

.login-page .login .logo {
	position: absolute;
	left: 55px;
	top: 40px
}

@media only screen and (max-width:1200px) {
	.login-page .login .logo {
		left: 50%;
		transform: translate(-50%);
		top: -60px
	}
}

.login-page .login .left {
	width: 514px;
	padding: 53px;
	display: flex;
	flex-direction: column;
	justify-content: center
}

@media only screen and (max-width:600px) {
	.login-page .login .left {
		padding: 20px;
		width: 100%
	}
}

.login-page .login .left .title {
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 34px;
	color: #334d6e
}

.login-page .login .left .subtitle {
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #0fadd3;
	margin-top: 10px;
	margin-bottom: 36px
}

@media screen and (max-width:768px) {
	.login-page .login .left .subtitle {
		margin-top: 0
	}
}

.login-page .login .left .forgot-password-holder {
	display: flex;
	align-items: center;
	justify-content: space-between
}

@media only screen and (max-width:600px) {
	.login-page .login .left .forgot-password-holder {
		flex-direction: column;
		align-items: flex-start
	}
}

.login-page .login .left .forgot-password-holder .mobile-register {
	display: none;
	margin-bottom: 20px
}

@media only screen and (max-width:1480px) {
	.login-page .login .left .forgot-password-holder .mobile-register {
		display: block
	}
}

.login-page .login .left a.forgot-password {
	font-weight: 400;
	font-size: 1rem;
	line-height: 19px;
	text-decoration-line: underline;
	color: #334d6e8a;
	margin-left: auto;
	transform: translateY(-10px)
}

@media only screen and (max-width:600px) {
	.login-page .login .left a.forgot-password {
		margin: 0
	}
}

.login-page .login .right {
	width: 514px;
	background: #334d6e;
	border-radius: 20px;
	padding: 50px;
	height: 649px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start
}

@media only screen and (max-width:1200px) {
	.login-page .login .right {
		display: none
	}
}

.login-page .login .right .background {
	position: absolute;
	z-index: 0;
	mix-blend-mode: screen
}

.login-page .login .right .background img {
	width: 544px
}

.login-page .login .right img {
	position: relative;
	z-index: 1
}

.login-page .login .right .title {
	position: relative;
	z-index: 1;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 24px;
	color: #fff;
	margin-top: 50px
}

.login-page .login .right .subtitle {
	position: relative;
	z-index: 1;
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #0fadd3;
	margin-top: 11px
}

.login-page .login .right .sign-up-button {
	width: 177px;
	margin-top: 38px;
	position: relative;
	z-index: 1
}

.login-page .login .right .sign-up-button button {
	width: 100%
}

.login-page .captcha>div>div>div {
	margin: 0 auto
}

.reset-password-page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 100vh;
	gap: 30px
}

@media screen and (max-width:768px) {
	.reset-password-page {
		margin-top: 50px;
		min-height: unset
	}
}

.reset-password-page .reset-password {
	display: flex;
	background: #fff;
	box-shadow: 0 4px 40px #dfe4f0;
	border-radius: 20px
}

@media only screen and (max-width:1480px) {
	.reset-password-page .reset-password {
		height: 100%
	}
}

@media only screen and (max-width:600px) {
	.reset-password-page .reset-password {
		width: 90%
	}
}

.reset-password-page .reset-password .left {
	padding: 53px;
	display: flex;
	flex-direction: column;
	justify-content: center
}

@media only screen and (max-width:600px) {
	.reset-password-page .reset-password .left {
		padding: 40px 20px;
		width: 100%
	}
}

.reset-password-page .reset-password .left .title {
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 34px;
	color: #334d6e
}

.reset-password-page .reset-password .left .subtitle {
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #334d6e8a;
	margin-top: 10px;
	margin-bottom: 36px
}

.reset-password-page .reset-password .left a.forgot-password {
	font-weight: 400;
	font-size: 1rem;
	line-height: 19px;
	text-decoration-line: underline;
	color: #334d6e8a;
	margin-left: auto;
	transform: translateY(-10px)
}

.reset-password-page .reset-password .right {
	background: #334d6e;
	border-radius: 20px;
	padding: 50px;
	height: 649px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	display: none
}

@media only screen and (min-width:1000px) {
	.reset-password-page .reset-password .right {
		display: flex
	}
}

.reset-password-page .reset-password .right .background {
	position: absolute;
	z-index: 0;
	mix-blend-mode: screen
}

.reset-password-page .reset-password .right .background img {
	width: 544px
}

.reset-password-page .reset-password .right img {
	position: relative;
	z-index: 1
}

.reset-password-page .reset-password .right .title {
	position: relative;
	z-index: 1;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 24px;
	color: #fff;
	margin-top: 50px
}

.reset-password-page .reset-password .right .subtitle {
	position: relative;
	z-index: 1;
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #31ce93;
	margin-top: 11px
}

.reset-password-page .reset-password .right .sign-up-button {
	width: 177px;
	margin-top: 38px;
	position: relative;
	z-index: 1
}

.reset-password-page .reset-password .right .sign-up-button button {
	width: 100%
}

.reset-password-page .apply-button {
	width: 100%;
	margin-top: 20px
}

.reset-password-page .apply-button button {
	width: 100%
}

.register-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh
}

@media screen and (max-width:768px) {
	.register-page {
		align-items: flex-start;
		margin-top: 100px
	}
}

.register-page .register {
	position: relative;
	display: flex;
	background: #fff;
	box-shadow: 0 4px 40px #dfe4f0;
	border-radius: 20px;
	height: 720px
}

@media only screen and (max-width:1200px) {
	.register-page .register {
		height: 100%
	}
}

@media only screen and (max-width:600px) {
	.register-page .register {
		width: 90%
	}
}

.register-page .register .logo {
	position: absolute;
	left: 55%;
	top: 40px
}

@media only screen and (max-width:1200px) {
	.register-page .register .logo {
		left: 50%;
		transform: translate(-50%);
		top: -40px
	}
}

.register-page .register .right {
	padding: 53px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 514px
}

@media only screen and (max-width:600px) {
	.register-page .register .right {
		padding: 20px;
		width: 100%
	}
}

.register-page .register .right .title {
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 34px;
	color: #334d6e
}

.register-page .register .right .subtitle {
	font-weight: 500;
	font-size: .875rem;
	line-height: 19px;
	color: #0fadd3;
	margin-bottom: 25px
}

@media screen and (max-width:768px) {
	.register-page .register .right .subtitle {
		margin-top: 0
	}
}

.register-page .register .right a.forgot-password {
	font-weight: 400;
	font-size: 1rem;
	line-height: 19px;
	text-decoration-line: underline;
	color: #334d6e8a;
	margin-left: auto;
	transform: translateY(-10px)
}

.register-page .register .left {
	background: #334d6e;
	border-radius: 20px;
	padding: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	width: 514px
}

@media only screen and (max-width:1200px) {
	.register-page .register .left {
		display: none
	}
}

.register-page .register .left .background {
	position: absolute;
	z-index: 0;
	mix-blend-mode: screen
}

.register-page .register .left .background img {
	width: 544px
}

.register-page .register .left img {
	position: relative;
	z-index: 1
}

.register-page .register .left .title {
	position: relative;
	z-index: 1;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 24px;
	color: #fff;
	margin-top: 50px
}

.register-page .register .left .subtitle {
	position: relative;
	z-index: 1;
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #0fadd3;
	margin-top: 11px
}

.register-page .register .left .sign-up-button {
	width: 177px;
	margin-top: 38px;
	position: relative;
	z-index: 1
}

.register-page .register .left .sign-up-button button {
	width: 100%
}

.register-page .register .mobile-login {
	display: flex;
	align-items: flex-end;
	margin-top: 10px
}

.register-page .captcha>div>div>div {
	margin: 0 auto
}

.forgot-password-page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	min-height: 100vh;
	gap: 30px
}

@media screen and (max-width:768px) {
	.forgot-password-page {
		margin-top: 100px;
		min-height: unset
	}
}

.forgot-password-page .forgot-password {
	display: flex;
	background: #fff;
	box-shadow: 0 4px 40px #dfe4f0;
	border-radius: 20px;
	position: relative
}

@media only screen and (max-width:1480px) {
	.forgot-password-page .forgot-password {
		height: 100%
	}
}

@media only screen and (max-width:600px) {
	.forgot-password-page .forgot-password {
		width: 90%
	}
}

.forgot-password-page .forgot-password .logo {
	position: absolute;
	left: 55px;
	top: 40px
}

@media only screen and (max-width:1000px) {
	.forgot-password-page .forgot-password .logo {
		left: 50%;
		transform: translate(-50%);
		top: -40px
	}
}

.forgot-password-page .forgot-password .left {
	padding: 53px;
	display: flex;
	flex-direction: column;
	justify-content: center
}

@media only screen and (max-width:600px) {
	.forgot-password-page .forgot-password .left {
		padding: 20px;
		width: 100%
	}
}

.forgot-password-page .forgot-password .left .title {
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 20px;
	color: #334d6e
}

.forgot-password-page .forgot-password .left .subtitle {
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #334d6e8a;
	margin-top: 15px;
	margin-bottom: 36px
}

.forgot-password-page .forgot-password .left a.forgot-password {
	font-weight: 400;
	font-size: 1rem;
	line-height: 19px;
	text-decoration-line: underline;
	color: #334d6e8a;
	margin-left: auto;
	transform: translateY(-10px)
}

.forgot-password-page .forgot-password .right {
	background: #334d6e;
	border-radius: 20px;
	padding: 50px;
	height: 649px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	display: none
}

@media only screen and (min-width:1000px) {
	.forgot-password-page .forgot-password .right {
		display: flex
	}
}

.forgot-password-page .forgot-password .right .background {
	position: absolute;
	z-index: 0;
	mix-blend-mode: screen
}

.forgot-password-page .forgot-password .right .background img {
	width: 544px
}

.forgot-password-page .forgot-password .right img {
	position: relative;
	z-index: 1
}

.forgot-password-page .forgot-password .right .title {
	position: relative;
	z-index: 1;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 24px;
	color: #fff;
	margin-top: 50px
}

.forgot-password-page .forgot-password .right .subtitle {
	position: relative;
	z-index: 1;
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #31ce93;
	margin-top: 11px
}

.forgot-password-page .forgot-password .right .sign-up-button {
	width: 177px;
	margin-top: 38px;
	position: relative;
	z-index: 1
}

.forgot-password-page .forgot-password .right .sign-up-button button {
	width: 100%
}

.menu {
	position: relative
}

.menu .menu-items {
	width: 200px;
	position: absolute;
	right: 0;
	top: 18px;
	background: #fff;
	box-shadow: 0 4px 40px #dfe4f0;
	border-radius: 10px;
	padding: 10px 0;
	display: flex;
	flex-direction: column
}

.menu .menu-items .item {
	padding: 7px 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer
}

.menu .menu-items .item:hover {
	background-color: #f0f2f9
}

.menu .menu-items .item .icon {
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background-color: #f0f2f9;
	display: flex;
	align-items: center;
	justify-content: center
}

.menu .menu-items .item .icon img {
	width: 14px;
	height: 14px
}

.menu .menu-items .item p {
	font-weight: 500;
	font-size: 1rem;
	line-height: 19px;
	color: #334d6e
}

.menu .menu-items .item p.text-red {
	color: #ff3d3d
}

.user-info-header {
	display: flex;
	align-items: center;
	gap: 11px;
	cursor: pointer
}

.user-info-header-image {
	width: 48px;
	height: 48px;
	border-radius: 100%;
	overflow: hidden
}

@media screen and (max-width:768px) {
	.user-info-header-image {
		width: 35px;
		height: 35px
	}
}

.user-info-header-image img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.user-info-header .name {
	display: flex;
	align-items: center;
	gap: 5px
}

@media screen and (max-width:768px) {
	.user-info-header .name {
		display: none
	}
}

.user-info-header .name p {
	font-weight: 600;
	font-size: .875rem;
	line-height: 17px;
	color: #334d6e
}

.dropdown-flex {
	display: flex;
	align-items: center;
	gap: 10px
}

nav.header-navigation {
	height: 72px;
	width: calc(100% + 40px);
	align-self: auto;
	background-color: #fff;
	margin-left: -20px;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 20px;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	box-shadow: 0 4px 40px #dfe4f0;
	z-index: 12
}

nav.header-navigation .left {
	margin-left: 24px;
	display: flex;
	align-items: center;
	height: 100%;
	gap: 9px
}

nav.header-navigation .left .payout {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	cursor: help
}

nav.header-navigation .left .payout:hover div.payout-info {
	visibility: visible;
	transform: translateY(0)
}

nav.header-navigation .left .payout div.payout-info {
	position: absolute;
	top: 110%;
	background-color: #fff;
	padding: 10px 15px;
	box-shadow: 5px 5px 20px #dfe4f0;
	border-radius: 10px;
	visibility: hidden;
	transition: all .1s ease-in-out;
	transform: translateY(-10px);
	display: flex;
	flex-direction: column;
	gap: 10px
}

nav.header-navigation .left .payout div.payout-info p {
	font-size: .75rem;
	font-weight: 400;
	line-height: 15px;
	color: #334d6e
}

@media screen and (max-width:1420px) {
	nav.header-navigation .left {
		margin-left: 20px
	}

	nav.header-navigation .left .toggle-sidebar-btn {
		width: 35px;
		height: 35px;
		border-radius: 35px;
		background: rgba(49,206,147,.15);
		cursor: pointer;
		transition: all .2s ease-in-out;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		flex-direction: column;
		gap: 3px
	}

	nav.header-navigation .left .toggle-sidebar-btn div {
		width: 15px;
		height: 2px;
		background-color: #06c57c
	}
}

nav.header-navigation .left .icon {
	width: 48px;
	height: 48px;
	background: rgba(255,121,61,.18);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

@media screen and (max-width:768px) {
	nav.header-navigation .left .icon {
		display: none
	}
}

nav.header-navigation .left .data p {
	font-weight: 700;
	font-size: .875rem;
	line-height: 17px;
	color: #334d6e;
	margin: 0
}

nav.header-navigation .left .data p span {
	font-weight: 400;
	font-size: .75rem;
	line-height: 15px;
	color: #334d6e82;
	margin-left: 2px
}

nav.header-navigation .left .next-payment {
	font-weight: 400;
	font-size: .75rem;
	line-height: 15px;
	color: #334d6e
}

nav.header-navigation .right {
	display: flex;
	align-items: center;
	gap: 27px
}

nav.header-navigation .right .standing {
	display: flex;
	align-items: center;
	position: relative;
	cursor: help
}

@media screen and (max-width:768px) {
	nav.header-navigation .right .standing {
		display: none
	}
}

nav.header-navigation .right .standing:hover div.standing-info {
	visibility: visible;
	transform: translateY(0)
}

nav.header-navigation .right .standing div.standing-info {
	position: absolute;
	top: 130%;
	background-color: #fff;
	padding: 10px 15px;
	box-shadow: 5px 5px 20px #dfe4f0;
	border-radius: 10px;
	visibility: hidden;
	transition: all .1s ease-in-out;
	transform: translateY(-10px);
	display: flex;
	flex-direction: column;
	gap: 10px
}

nav.header-navigation .right .standing div.standing-info p {
	font-size: 13px;
	line-height: 15px;
	color: #334d6e;
	font-weight: 400!important
}

nav.header-navigation .right .standing p {
	font-weight: 600;
	font-size: .875rem;
	line-height: 17px;
	color: #334d6e
}

nav.header-navigation .right .standing-pill {
	margin-left: 7px;
	background: rgba(255,121,61,.18);
	border-radius: 50px;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-transform: capitalize
}

nav.header-navigation .right .standing-pill span {
	font-weight: 600;
	font-size: .875rem;
	line-height: 17px
}

nav.header-navigation .right .standing-pill-high {
	background-color: #0af89b4d
}

nav.header-navigation .right .standing-pill-high span {
	color: #06c57c
}

nav.header-navigation .right .standing-pill-normal {
	background-color: #31ce932e
}

nav.header-navigation .right .standing-pill-normal span {
	color: #31ce93b3
}

nav.header-navigation .right .standing-pill-low {
	background-color: #ff00002e
}

nav.header-navigation .right .standing-pill-low span {
	color: red
}

nav.header-navigation .right .notifications {
	cursor: pointer
}

.account-manager {
	width: calc(100% + 20px);
	padding: 15px;
	position: relative
}

.account-manager:after {
	content: "";
	background-color: #fff;
	width: 100%;
	height: 110%;
	position: absolute;
	top: 0;
	left: -10px
}

.account-manager .info {
	position: relative;
	z-index: 1;
	gap: 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
	transition: all .2s ease-in-out
}

.account-manager .info .title {
	font-weight: 700;
	font-size: .75rem;
	line-height: 19px;
	color: #334d6e90
}

.account-manager .info .image {
	margin-top: 13px;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	overflow: hidden;
	transition: all .2s ease-in-out
}

.account-manager .info .image img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.account-manager .info .name {
	font-weight: 700;
	font-size: .875rem;
	line-height: 17px;
	color: #334d6e;
	margin-top: 10px
}

.account-manager .info .contact {
	display: flex;
	gap: 6px;
	flex-direction: row;
	margin-top: 5px;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content
}

.account-manager .info .contact p {
	font-size: .75rem;
	color: #1e6dff;
	text-decoration: underline;
	cursor: pointer
}

.sidebar-layout {
	display: flex;
	align-items: flex-start
}

.sidebar-layout aside {
	min-height: 100vh;
	background-color: #fff;
	padding: 7px;
	box-shadow: 0 4px 20px #dfe4f0;
	transition: width .3s ease-in-out;
	will-change: auto;
	overflow: hidden;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	display: flex;
	z-index: 13;
	flex-direction: column
}

@media screen and (max-width:1420px) {
	.sidebar-layout aside {
		position: fixed
	}
}

.sidebar-layout aside .background-gradient {
	width: 450px;
	height: 450px;
	position: absolute;
	background: rgba(70,235,146,.15);
	filter: blur(114.999px);
	bottom: -50px
}

.sidebar-layout aside.opened {
	width: 258px
}

.sidebar-layout aside.closed {
	width: 70px
}

@media screen and (max-width:1420px) {
	.sidebar-layout aside.closed {
		width: 0;
		padding-left: 0;
		padding-right: 0
	}
}

.sidebar-layout aside.closed .links .link .name {
	transform: scale(0)
}

@media screen and (max-width:1420px) {
	.sidebar-layout aside.closed .links .link .name {
		transform: unset
	}
}

.sidebar-layout aside.closed .header .logo {
	transform: scale(0)
}

@media screen and (max-width:1420px) {
	.sidebar-layout aside.closed .header .logo {
		transform: unset
	}
}

.sidebar-layout aside.closed .header .toggle-sidebar-btn {
	transform: translate(-10px)
}

.sidebar-layout aside.closed .footer .account-manager .info .image {
	width: 25px;
	height: 25px
}

.sidebar-layout aside.closed .footer .account-manager .info>.flex {
	display: none
}

.sidebar-layout aside .header {
	margin-left: 36px;
	margin-top: 24px;
	display: flex;
	align-items: center;
	gap: 25px;
	position: relative
}

@media screen and (max-width:1420px) {
	.sidebar-layout aside .header {
		margin-top: 15px
	}
}

.sidebar-layout aside .header .logo {
	transition: all .2s ease-in-out;
	transform-origin: left
}

.sidebar-layout aside .header .toggle-sidebar-btn {
	position: absolute;
	right: 0;
	top: -5px;
	width: 35px;
	height: 35px;
	border-radius: 35px;
	background: rgba(49,206,147,.15);
	cursor: pointer;
	transition: all .2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center
}

.sidebar-layout aside .links {
	margin-top: 61px;
	gap: 4px;
	display: flex;
	flex-direction: column
}

.sidebar-layout aside .links .link {
	display: flex;
	align-items: center;
	gap: 15px;
	border-radius: 10px;
	padding: 13px;
	border: none;
	background: 0 0;
	cursor: pointer;
	transition: all .1s ease-in-out;
	position: relative;
	overflow: hidden
}

.sidebar-layout aside .links .link .icon {
	width: 30px;
	height: 30px;
	background: #f0f2f9;
	border-radius: 10px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1
}

.sidebar-layout aside .links .link .icon img {
	width: 16px
}

.sidebar-layout aside .links .link .name {
	color: #3b547b;
	font-weight: 500;
	font-size: 1rem;
	line-height: 20px;
	transition: all .1s ease-in-out;
	transform-origin: left;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 40px);
	z-index: 1
}

.sidebar-layout aside .links .link.active {
	background-color: #31ce93
}

.sidebar-layout aside .links .link.active .name {
	color: #fff
}

.sidebar-layout aside .links .link.active .icon {
	background: rgba(255,255,255,.32)
}

.sidebar-layout aside .links .sub-links {
	padding-left: 50px;
	display: flex;
	flex-direction: column;
	gap: 11px
}

.sidebar-layout aside .links .sub-links .sub-link {
	align-self: flex-start;
	color: #3b547b;
	font-weight: 400;
	font-size: .875rem;
	line-height: 19px;
	padding: 5px 8px;
	display: flex;
	align-items: center;
	gap: 11px;
	transition: all .1s ease-in-out
}

.sidebar-layout aside .links .sub-links .sub-link .icon {
	width: 20px;
	height: 20px;
	background: #f0f2f9;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center
}

.sidebar-layout aside .links .sub-links .sub-link.active {
	color: #31ce93
}

.sidebar-layout aside .footer {
	margin-top: auto
}

.sidebar-layout .content {
	transition: width .3s ease-in-out;
	will-change: auto;
	padding: 0 20px
}

.sidebar-layout .content.closed {
	width: calc(100% - 70px)
}

@media screen and (max-width:1420px) {
	.sidebar-layout .content.closed {
		width: 100%
	}
}

.sidebar-layout .content.opened {
	width: calc(100% - 258px)
}

@media screen and (max-width:1420px) {
	.sidebar-layout .content.opened {
		width: 100%
	}
}

.sublinks-dropdown {
	transition: all .2s ease-in-out
}

.notification {
	position: fixed;
	z-index: 99999999999;
	display: flex;
	align-items: center;
	padding: 15px 18px;
	background-color: #fff;
	width: 390px;
	border-radius: 8px;
	right: 20px;
	top: 20px;
	box-shadow: 2px 3px 8px #0000001a;
	border: 1px solid #e5e7eb
}

.notification-content {
	width: 100%;
	padding-left: 25px
}

.notification-content .icon {
	position: absolute;
	left: 15px;
	top: 20px
}

.notification-content .title {
	font-size: .875rem;
	color: #111827;
	font-weight: 500
}

.notification-content .message {
	font-size: .875rem;
	color: #6c7280;
	margin-top: 6px
}

.notification .close {
	position: absolute;
	top: 15px;
	right: 15px
}

.notification .close-button {
	background: 0 0;
	border: none;
	cursor: pointer
}