@font-face {
	font-family: 'azura';
	src:  url('../font-icons/azura.eot?7f3hye');
	src:  url('../font-icons/azura.eot?7f3hye#iefix') format('embedded-opentype'),
	url('../font-icons/azura.ttf?7f3hye') format('truetype'),
	url('../font-icons/azura.woff?7f3hye') format('woff'),
	url('../font-icons/azura.svg?7f3hye#azura') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'azura' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box; /* 1 */
	height: 0; /* 1 */
	overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

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

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none; /* 1 */
	text-decoration: underline; /* 2 */
	text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

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

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

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

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

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

/**
 * Remove the inner border and padding in Firefox.
 */

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

/**
 * Restore the focus styles unset by the previous rule.
 */

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

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

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

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box; /* 1 */
	padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}

/* Remove tap color on mobile */
*:focus {
	-webkit-tap-highlight-color: transparent;
	outline: none;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
}

:root {
	--primary-10: #21005D;
	--primary-20: #381E72;
	--primary-30: #4F378B;
	--primary-40: #6750A4;
	--primary-50: #7F67BE;
	--primary-60: #9A82DB;
	--primary-70: #B69DF8;
	--primary-80: #D0BCFF;
	--primary-90: #EADDFF;
	--primary-95: #F6EDFF;
	--primary-99: #FFFBFE;

	--primary-light-opacity-05: rgba(103, 80, 164, .05);
	--primary-light-opacity-12: rgba(103, 80, 164, .12);
	--primary-light-opacity-16: rgba(103, 80, 164, .16);
	--primary-light-opacity-32: rgba(103, 80, 164, .32);
	--primary-light-opacity-64: rgba(103, 80, 164, .64);

	--primary-dark-opacity-05: rgba(208, 188, 255, .05);
	--primary-dark-opacity-12: rgba(208, 188, 255, .12);
	--primary-dark-opacity-16: rgba(208, 188, 255, .16);
	--primary-dark-opacity-32: rgba(208, 188, 255, .32);
	--primary-dark-opacity-64: rgba(208, 188, 255, .64);

	--secondary-10: #1D192B;
	--secondary-20: #332D41;
	--secondary-30: #4A4458;
	--secondary-40: #625B71;
	--secondary-50: #7A7289;
	--secondary-60: #958DA5;
	--secondary-70: #B0A7C0;
	--secondary-80: #CCC2DC;
	--secondary-90: #E8DEF8;
	--secondary-95: #F6EDFF;
	--secondary-99: #FFFBFE;

	--secondary-light-opacity-05: rgba(103, 80, 164, .05);
	--secondary-light-opacity-12: rgba(103, 80, 164, .12);
	--secondary-light-opacity-16: rgba(103, 80, 164, .16);

	--secondary-dark-opacity-05: rgba(204, 194, 220, .05);
	--secondary-dark-opacity-12: rgba(204, 194, 220, .12);
	--secondary-dark-opacity-16: rgba(204, 194, 220, .16);

	--tertiary-10: #31111D;
	--tertiary-20: #492532;
	--tertiary-30: #633B48;
	--tertiary-40: #7D5260;
	--tertiary-50: #986977;
	--tertiary-60: #B58392;
	--tertiary-70: #D29DAC;
	--tertiary-80: #EFB8C8;
	--tertiary-90: #FFD8E4;
	--tertiary-95: #FFECF1;
	--tertiary-99: #FFFBFA;

	--error-10: #410E0B;
	--error-20: #601410;
	--error-30: #8C1D18;
	--error-40: #B3261E;
	--error-50: #DC362E;
	--error-60: #E46962;
	--error-70: #EC928E;
	--error-80: #F2B8B5;
	--error-90: #F9DEDC;
	--error-95: #FCEEEE;
	--error-99: #FFFBF9;

	--neutral-10: #1C1B1F;
	--neutral-20: #313033;
	--neutral-30: #484649;
	--neutral-40: #605D62;
	--neutral-50: #787579;
	--neutral-60: #939094;
	--neutral-70: #AEAAAE;
	--neutral-80: #C9C5CA;
	--neutral-90: #E6E1E5;
	--neutral-95: #F4EFF4;
	--neutral-99: #FFFBFE;

	--neutral-dark-opacity-05: rgba(96, 93, 98, .05);
	--neutral-dark-opacity-12: rgba(96, 93, 98, .12);
	--neutral-dark-opacity-16: rgba(96, 93, 98, .16);
	--neutral-dark-opacity-50: rgba(96, 93, 98, .50);

	--neutral-light-opacity-05: rgba(201, 197, 202, .05);
	--neutral-light-opacity-12: rgba(201, 197, 202, .12);
	--neutral-light-opacity-16: rgba(201, 197, 202, .16);

	--neutral-v-10: #1D1A22;
	--neutral-v-20: #322F37;
	--neutral-v-30: #49454F;
	--neutral-v-40: #605D66;
	--neutral-v-50: #79747E;
	--neutral-v-60: #938F99;
	--neutral-v-70: #AEA9B4;
	--neutral-v-80: #CAC4D0;
	--neutral-v-90: #E7E0EC;
	--neutral-v-95: #F5EEFA;
	--neutral-v-99: #FFFBFE;

	--topbar-height: 64px;
}

/* SETUP */

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

*:before, *:after {
	-webkit-box-sizing: inherit;
	   -moz-box-sizing: inherit;
			box-sizing: inherit;
}

html {
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}

a {
	color: var(--primary-40);
	text-decoration: none;
}

.dark a {
	color: var(--primary-80);
}

::selection {
	color: var(--neutral-99);
	background: var(--primary-40);
}

.dark::selection {
	color: var(--neutral-10);
	background: var(--primary-80);
}

/*--------------------------------------------------------------
#-- APP
--------------------------------------------------------------*/



/*--------------------------------------------------------------
#-- SCENE
--------------------------------------------------------------*/
body {
	overflow-x: hidden;
	overflow-y: scroll;
}

#content {
	position: relative;
	height: 100vh;
}

.scene {
	position: absolute;
	z-index: 3;
	top: 0;
	left: 0;
}

.scene .scene-content {
	position: relative;
	display: block;
	min-height: 100vh;
	width: 100vw;
	/* Force Hardware Acceleration */
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	     -o-transform: translateZ(0);
	        transform: translateZ(0);
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
	-webkit-transition: -webkit-transform 0s 0.5s;
	   -moz-transition:    -moz-transform 0s 0.5s;
	        transition:         transform 0s 0.5s;
}

@media (min-width: 960px) {
	#app.nav-drawer-left-persistent .scene .scene-content {
		padding-left: 280px;
	}

	#app.nav-drawer-right-persistent .scene .scene-content {
		padding-right: 280px;
	}
}

@media (min-width: 1264px) {
	#app.nav-drawer-left-persistent .scene .scene-content {
		padding-left: 360px;
	}

	#app.nav-drawer-right-persistent .scene .scene-content {
		padding-right: 360px;
	}
}

/*--------------------------------------------------------------
# LAYER
--------------------------------------------------------------*/

.layer {
	position: absolute;
	z-index: 20000;
	top: 0;
	left: 0;
}

/*--------------------------------------------------------------
# SIDEBAR
--------------------------------------------------------------*/

.sidebar {
	position: absolute;
	width: 280px;
	top: 0;
	right: 0;
	display: none;
	z-index: 8000;
}

@media (min-width: 1264px) {
	#app.sidebar-280 .scene .scene-content {
		padding-right: 280px;
	}

	#app.sidebar-280.nav-drawer-right-persistent .scene .scene-content {
		padding-right: 660px;
	}


	#app.sidebar-280 .sidebar {
		display: block;
	}

	#app.sidebar-280.nav-drawer-right-persistent .sidebar {
		right: 360px;
	}
}

/*--------------------------------------------------------------
#-- Grid System
--------------------------------------------------------------*/

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1264px;
}

.container.full-width {
	max-width: none;
}

.row {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
}

.row .row {
	margin-left: -8px;
	margin-right: -8px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

@media (min-width: 600px) {
	.container {
		padding-left: 8px;
		padding-right: 8px;
	}
}

@media (min-width: 960px) {
	.container {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/*--------------------------------------------------------------
##- Grid System -> Columns
--------------------------------------------------------------*/

.col {
	float: left;
	width: 100%;
	min-height: 1px;
	padding: 0 8px;
	margin-bottom: 16px;
}

.col[class*="push-"],
.col[class*="pull-"] {
	position: relative;
}

.editor .col.editing {
	outline: 1px solid rgba(3, 169, 244, .8);
}

.editor .col:hover {
	outline: 1px solid rgba(3, 169, 244, 1);
}

/*--------------------------------------------------------------
### Grid System -> Columns -> Width
--------------------------------------------------------------*/

.col.xs-1 {
	width: 25%;
}

.col.xs-2 {
	width: 50%;
}

.col.xs-3 {
	width: 75%;
}

.col.xs-4 {
	width: 100%;
}

@media (min-width: 600px) {
	.col.sm-1 {
		width: 12.5%;
	}

	.col.sm-2 {
		width: 25%;
	}

	.col.sm-3 {
		width: 37.5%;
	}

	.col.sm-4 {
		width: 50%;
	}

	.col.sm-5 {
		width: 62.5%;
	}

	.col.sm-6 {
		width: 75%;
	}

	.col.sm-7 {
		width: 87.5%;
	}

	.col.sm-8 {
		width: 100%;
	}
}

@media (min-width: 960px) {
	.col.md-1 {
		width: 8.3333333333%;
	}

	.col.md-2 {
		width: 16.6666666667%;
	}

	.col.md-3 {
		width: 25%;
	}

	.col.md-4 {
		width: 33.3333333333%;
	}

	.col.md-5 {
		width: 41.6666666667%;
	}

	.col.md-6 {
		width: 50%;
	}

	.col.md-7 {
		width: 58.3333333333%;
	}

	.col.md-8 {
		width: 66.6666666667%;
	}

	.col.md-9 {
		width: 75%;
	}

	.col.md-10 {
		width: 83.3333333333%;
	}

	.col.md-11 {
		width: 91.6666666667%;
	}

	.col.md-12 {
		width: 100%;
	}
}

@media (min-width: 1264px) {
	.col.lg-1 {
		width: 8.3333333333%;
	}

	.col.lg-2 {
		width: 16.6666666667%;
	}

	.col.lg-3 {
		width: 25%;
	}

	.col.lg-4 {
		width: 33.3333333333%;
	}

	.col.lg-5 {
		width: 41.6666666667%;
	}

	.col.lg-6 {
		width: 50%;
	}

	.col.lg-7 {
		width: 58.3333333333%;
	}

	.col.lg-8 {
		width: 66.6666666667%;
	}

	.col.lg-9 {
		width: 75%;
	}

	.col.lg-10 {
		width: 83.3333333333%;
	}

	.col.lg-11 {
		width: 91.6666666667%;
	}

	.col.lg-12 {
		width: 100%;
	}
}

@media (min-width: 1904px) {
	.col.xl-1 {
		width: 8.3333333333%;
	}

	.col.xl-2 {
		width: 16.6666666667%;
	}

	.col.xl-3 {
		width: 25%;
	}

	.col.xl-4 {
		width: 33.3333333333%;
	}

	.col.xl-5 {
		width: 41.6666666667%;
	}

	.col.xl-6 {
		width: 50%;
	}

	.col.xl-7 {
		width: 58.3333333333%;
	}

	.col.xl-8 {
		width: 66.6666666667%;
	}

	.col.xl-9 {
		width: 75%;
	}

	.col.xl-10 {
		width: 83.3333333333%;
	}

	.col.xl-11 {
		width: 91.6666666667%;
	}

	.col.xl-12 {
		width: 100%;
	}
}

/*--------------------------------------------------------------
### Grid System -> Columns -> Offset
--------------------------------------------------------------*/

.col.offset-xs-1 {
	margin-left: 25%;
}

.col.offset-xs-2 {
	margin-left: 50%;
}

.col.offset-xs-3 {
	margin-left: 75%;
}

.col.offset-xs-4 {
	margin-left: 100%;
}

@media (min-width: 600px) {
	.col.offset-sm-0 {
		margin-left: 0;
	}

	.col.offset-sm-1 {
		margin-left: 12.5%;
	}

	.col.offset-sm-2 {
		margin-left: 25%;
	}

	.col.offset-sm-3 {
		margin-left: 37.5%;
	}

	.col.offset-sm-4 {
		margin-left: 50%;
	}

	.col.offset-sm-5 {
		margin-left: 62.5%;
	}

	.col.offset-sm-6 {
		margin-left: 75%;
	}

	.col.offset-sm-7 {
		margin-left: 87.5%;
	}

	.col.offset-sm-8 {
		margin-left: 100%;
	}
}

@media (min-width: 960px) {
	.col.offset-md-0 {
		margin-left: 0;
	}

	.col.offset-md-1 {
		margin-left: 8.3333333333%;
	}

	.col.offset-md-2 {
		margin-left: 16.6666666667%;
	}

	.col.offset-md-3 {
		margin-left: 25%;
	}

	.col.offset-md-4 {
		margin-left: 33.3333333333%;
	}

	.col.offset-md-5 {
		margin-left: 41.6666666667%;
	}

	.col.offset-md-6 {
		margin-left: 50%;
	}

	.col.offset-md-7 {
		margin-left: 58.3333333333%;
	}

	.col.offset-md-8 {
		margin-left: 66.6666666667%;
	}

	.col.offset-md-9 {
		margin-left: 75%;
	}

	.col.offset-md-10 {
		margin-left: 83.3333333333%;
	}

	.col.offset-md-11 {
		margin-left: 91.6666666667%;
	}

	.col.offset-md-12 {
		margin-left: 100%;
	}
}

@media (min-width: 1264px) {
	.col.offset-lg-0 {
		margin-left: 0;
	}

	.col.offset-lg-1 {
		margin-left: 8.3333333333%;
	}

	.col.offset-lg-2 {
		margin-left: 16.6666666667%;
	}

	.col.offset-lg-3 {
		margin-left: 25%;
	}

	.col.offset-lg-4 {
		margin-left: 33.3333333333%;
	}

	.col.offset-lg-5 {
		margin-left: 41.6666666667%;
	}

	.col.offset-lg-6 {
		margin-left: 50%;
	}

	.col.offset-lg-7 {
		margin-left: 58.3333333333%;
	}

	.col.offset-lg-8 {
		margin-left: 66.6666666667%;
	}

	.col.offset-lg-9 {
		margin-left: 75%;
	}

	.col.offset-lg-10 {
		margin-left: 83.3333333333%;
	}

	.col.offset-lg-11 {
		margin-left: 91.6666666667%;
	}

	.col.offset-lg-12 {
		margin-left: 100%;
	}
}

@media (min-width: 1904px) {
	.col.offset-xl-0 {
		width: 0;
	}

	.col.offset-xl-1 {
		width: 8.3333333333%;
	}

	.col.offset-xl-2 {
		width: 16.6666666667%;
	}

	.col.offset-xl-3 {
		width: 25%;
	}

	.col.offset-xl-4 {
		width: 33.3333333333%;
	}

	.col.offset-xl-5 {
		width: 41.6666666667%;
	}

	.col.offset-xl-6 {
		width: 50%;
	}

	.col.offset-xl-7 {
		width: 58.3333333333%;
	}

	.col.offset-xl-8 {
		width: 66.6666666667%;
	}

	.col.offset-xl-9 {
		width: 75%;
	}

	.col.offset-xl-10 {
		width: 83.3333333333%;
	}

	.col.offset-xl-11 {
		width: 91.6666666667%;
	}

	.col.offset-xl-12 {
		width: 100%;
	}
}

/*--------------------------------------------------------------
### Grid System -> Columns -> Pull
--------------------------------------------------------------*/

.col.pull-xs-1 {
	right: 25%;
}

.col.pull-xs-2 {
	right: 50%;
}

.col.pull-xs-3 {
	right: 75%;
}

.col.pull-xs-4 {
	right: 100%;
}

@media (min-width: 600px) {
	.col.pull-sm-0 {
		right: 0;
	}

	.col.pull-sm-1 {
		right: 12.5%;
	}

	.col.pull-sm-2 {
		right: 25%;
	}

	.col.pull-sm-3 {
		right: 37.5%;
	}

	.col.pull-sm-4 {
		right: 50%;
	}

	.col.pull-sm-5 {
		right: 62.5%;
	}

	.col.pull-sm-6 {
		right: 75%;
	}

	.col.pull-sm-7 {
		right: 87.5%;
	}

	.col.pull-sm-8 {
		right: 100%;
	}
}

@media (min-width:  960px) {
	.col.pull-md-0 {
		right: 0;
	}

	.col.pull-md-1 {
		right: 8.3333333333%;
	}

	.col.pull-md-2 {
		right: 16.6666666667%;
	}

	.col.pull-md-3 {
		right: 25%;
	}

	.col.pull-md-4 {
		right: 33.3333333333%;
	}

	.col.pull-md-5 {
		right: 41.6666666667%;
	}

	.col.pull-md-6 {
		right: 50%;
	}

	.col.pull-md-7 {
		right: 58.3333333333%;
	}

	.col.pull-md-8 {
		right: 66.6666666667%;
	}

	.col.pull-md-9 {
		right: 75%;
	}

	.col.pull-md-10 {
		right: 83.3333333333%;
	}

	.col.pull-md-11 {
		right: 91.6666666667%;
	}

	.col.pull-md-12 {
		right: 100%;
	}
}


@media (min-width: 1264px) {
	.col.pull-lg-0 {
		right: 0;
	}

	.col.pull-lg-1 {
		right: 8.3333333333%;
	}

	.col.pull-lg-2 {
		right: 16.6666666667%;
	}

	.col.pull-lg-3 {
		right: 25%;
	}

	.col.pull-lg-4 {
		right: 33.3333333333%;
	}

	.col.pull-lg-5 {
		right: 41.6666666667%;
	}

	.col.pull-lg-6 {
		right: 50%;
	}

	.col.pull-lg-7 {
		right: 58.3333333333%;
	}

	.col.pull-lg-8 {
		right: 66.6666666667%;
	}

	.col.pull-lg-9 {
		right: 75%;
	}

	.col.pull-lg-10 {
		right: 83.3333333333%;
	}

	.col.pull-lg-11 {
		right: 91.6666666667%;
	}

	.col.pull-lg-12 {
		right: 100%;
	}
}

@media (min-width: 1904px) {
	.col.pull-xl-0 {
		width: 0;
	}

	.col.pull-xl-1 {
		width: 8.3333333333%;
	}

	.col.pull-xl-2 {
		width: 16.6666666667%;
	}

	.col.pull-xl-3 {
		width: 25%;
	}

	.col.pull-xl-4 {
		width: 33.3333333333%;
	}

	.col.pull-xl-5 {
		width: 41.6666666667%;
	}

	.col.pull-xl-6 {
		width: 50%;
	}

	.col.pull-xl-7 {
		width: 58.3333333333%;
	}

	.col.pull-xl-8 {
		width: 66.6666666667%;
	}

	.col.pull-xl-9 {
		width: 75%;
	}

	.col.pull-xl-10 {
		width: 83.3333333333%;
	}

	.col.pull-xl-11 {
		width: 91.6666666667%;
	}

	.col.pull-xl-12 {
		width: 100%;
	}
}

/*--------------------------------------------------------------
### Grid System -> Columns -> Push
--------------------------------------------------------------*/

.col.push-xs-1 {
	left: 25%;
}

.col.push-xs-2 {
	left: 50%;
}

.col.push-xs-3 {
	left: 75%;
}

.col.push-xs-4 {
	left: 100%;
}

@media (min-width: 600px) {
	.col.push-sm-0 {
		left: 0;
	}

	.col.push-sm-1 {
		left: 12.5%;
	}

	.col.push-sm-2 {
		left: 25%;
	}

	.col.push-sm-3 {
		left: 37.5%;
	}

	.col.push-sm-4 {
		left: 50%;
	}

	.col.push-sm-5 {
		left: 62.5%;
	}

	.col.push-sm-6 {
		left: 75%;
	}

	.col.push-sm-7 {
		left: 87.5%;
	}

	.col.push-sm-8 {
		left: 100%;
	}
}

@media (min-width: 960px) {
	.col.push-md-0 {
		left: 0;
	}

	.col.push-md-1 {
		left: 8.3333333333%;
	}

	.col.push-md-2 {
		left: 16.6666666667%;
	}

	.col.push-md-3 {
		left: 25%;
	}

	.col.push-md-4 {
		left: 33.3333333333%;
	}

	.col.push-md-5 {
		left: 41.6666666667%;
	}

	.col.push-md-6 {
		left: 50%;
	}

	.col.push-md-7 {
		left: 58.3333333333%;
	}

	.col.push-md-8 {
		left: 66.6666666667%;
	}

	.col.push-md-9 {
		left: 75%;
	}

	.col.push-md-10 {
		left: 83.3333333333%;
	}

	.col.push-md-11 {
		left: 91.6666666667%;
	}

	.col.push-md-12 {
		left: 100%;
	}
}

@media (min-width: 1264px) {
	.col.push-lg-0 {
		left: 0;
	}

	.col.push-lg-1 {
		left: 8.3333333333%;
	}

	.col.push-lg-2 {
		left: 16.6666666667%;
	}

	.col.push-lg-3 {
		left: 25%;
	}

	.col.push-lg-4 {
		left: 33.3333333333%;
	}

	.col.push-lg-5 {
		left: 41.6666666667%;
	}

	.col.push-lg-6 {
		left: 50%;
	}

	.col.push-lg-7 {
		left: 58.3333333333%;
	}

	.col.push-lg-8 {
		left: 66.6666666667%;
	}

	.col.push-lg-9 {
		left: 75%;
	}

	.col.push-lg-10 {
		left: 83.3333333333%;
	}

	.col.push-lg-11 {
		left: 91.6666666667%;
	}

	.col.push-lg-12 {
		left: 100%;
	}
}

@media (min-width: 1904px) {
	.col.push-xl-0 {
		width: 0;
	}

	.col.push-xl-1 {
		width: 8.3333333333%;
	}

	.col.push-xl-2 {
		width: 16.6666666667%;
	}

	.col.push-xl-3 {
		width: 25%;
	}

	.col.push-xl-4 {
		width: 33.3333333333%;
	}

	.col.push-xl-5 {
		width: 41.6666666667%;
	}

	.col.push-xl-6 {
		width: 50%;
	}

	.col.push-xl-7 {
		width: 58.3333333333%;
	}

	.col.push-xl-8 {
		width: 66.6666666667%;
	}

	.col.push-xl-9 {
		width: 75%;
	}

	.col.push-xl-10 {
		width: 83.3333333333%;
	}

	.col.push-xl-11 {
		width: 91.6666666667%;
	}

	.col.push-xl-12 {
		width: 100%;
	}
}

/*--------------------------------------------------------------
# LIGHT THEME BACKGROUND COLORS
--------------------------------------------------------------*/

.bg-primary {
	color: #FFFFFF;
	background-color: var(--primary-40);
}

.bg-primary-05 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-05);
}

.bg-primary-12 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-12);
}

.bg-primary-16 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-16);
}

.bg-primary-32 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-32);
}

.bg-primary-64 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-64);
}

.bg-on-primary {
	color: var(--primary-10);
	background-color: var(--primary-90);
}

.bg-secondary {
	color: #FFFFFF;
	background-color: var(--secondary-40);
}

.bg-on-secondary {
	color: var(--secondary-10);
	background-color: var(--secondary-90);
}

.bg-tertiary {
	color: #FFFFFF;
	background-color: var(--tertiary-40);
}

.bg-on-tertiary {
	color: var(--tertiary-10);
	background-color: var(--tertiary-90);
}

.bg-error {
	color: #FFFFFF;
	background-color: var(--error-40);
}

.bg-on-error {
	color: var(--error-10);
	background-color: var(--error-90);
}

.bg-background {
	color: var(--neutral-10);
	background-color: var(--neutral-99);
}

.bg-surface {
	color: var(--neutral-10);
	background-color: var(--neutral-99);
}

.bg-surface-variant {
	color: var(--neutral-v-30);
	background-color: var(--neutral-90);
}

.outline {
	border: 1px solid var(--neutral-v-50);
}

/*--------------------------------------------------------------
# LIGHT THEME COLORS
--------------------------------------------------------------*/

.color-primary {
	color: var(--primary-40) !important;
}

.color-on-primary {
	color: var(--primary-90) !important;
}

.color-secondary {
	color: var(--secondary-40) !important;
}

.color-on-secondary {
	color: var(--secondary-90) !important;
}

.color-tertiary {
	color: var(--tertiary-40) !important;
}

.color-on-tertiary {
	color: var(--tertiary-90) !important;
}

.color-error {
	color: var(--error-40) !important;
}

.color-on-error {
	color: var(--error-90) !important;
}

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

.color-surface {
	color: var(--neutral-99) !important;
}

.color-surface-variant {
	color: var(--neutral-v-90) !important;
}

/*--------------------------------------------------------------
# DARK THEME COLORS
--------------------------------------------------------------*/

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

.dark .bg-primary-05 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-05);
}

.dark .bg-primary-12 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-12);
}

.dark .bg-primary-16 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-16);
}

.dark .bg-primary-32 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-32);
}

.dark .bg-primary-64 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-64);
}

.dark .bg-on-primary {
	color: var(--primary-90);
	background-color: var(--primary-30);
}

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

.dark .bg-on-secondary {
	color: var(--secondary-90);
	background-color: var(--secondary-30);
}

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

.dark .bg-on-tertiary {
	color: var(--tertiary-90);
	background-color: var(--tertiary-30);
}

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

.dark .bg-on-error {
	color: var(--error-90);
	background-color: var(--error-30);
}

.dark.bg-background,
.dark .bg-background {
	color: var(--neutral-90);
	background-color: var(--neutral-10);
}

.dark .bg-surface {
	color: var(--neutral-80);
	background-color: var(--neutral-10);
}

.dark .bg-surface-variant {
	color: var(--neutral-v-80);
	background-color: var(--neutral-v-30);
}

.dark .outline {
	border: 1px solid var(--neutral-v-60);
}

/*--------------------------------------------------------------
# DARK THEME COLORS
--------------------------------------------------------------*/

.dark .color-primary {
	color: var(--primary-80) !important;
}

.dark .color-on-primary {
	color: var(--primary-30) !important;
}

.dark .color-secondary {
	color: var(--secondary-80) !important;
}

.dark .color-on-secondary {
	color: var(--secondary-30) !important;
}

.dark .color-tertiary {
	color: var(--tertiary-80) !important;
}

.dark .color-on-tertiary {
	color: var(--tertiary-30) !important;
}

.dark .color-error {
	color: var(--error-80) !important;
}

.dark .color-on-error {
	color: var(--error-30) !important;
}

.dark .color-background {
	color: var(--neutral-10) !important;
}

.dark .color-surface {
	color: var(--neutral-10) !important;
}

.dark .color-surface-variant {
	color: var(--neutral-v-30) !important;
}

/*--------------------------------------------------------------
# BACKGROUND COLORS
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - PRIMARY BACKGROUND
--------------------------------------------------------------*/

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

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

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

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

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

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

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

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

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

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

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

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - SECONDARY BACKGROUND
--------------------------------------------------------------*/

.bg-secondary-10 {
	background-color: var(--secondary-10) !important;
}

.bg-secondary-20 {
	background-color: var(--secondary-20) !important;
}

.bg-secondary-30 {
	background-color: var(--secondary-30) !important;
}

.bg-secondary-40 {
	background-color: var(--secondary-40) !important;
}

.bg-secondary-50 {
	background-color: var(--secondary-50) !important;
}

.bg-secondary-60 {
	background-color: var(--secondary-60) !important;
}

.bg-secondary-70 {
	background-color: var(--secondary-70) !important;
}

.bg-secondary-80 {
	background-color: var(--secondary-80) !important;
}

.bg-secondary-90 {
	background-color: var(--secondary-90) !important;
}

.bg-secondary-95 {
	background-color: var(--secondary-95) !important;
}

.bg-secondary-99 {
	background-color: var(--secondary-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - TERTIARY BACKGROUND
--------------------------------------------------------------*/

.bg-tertiary-10 {
	background-color: var(--tertiary-10) !important;
}

.bg-tertiary-20 {
	background-color: var(--tertiary-20) !important;
}

.bg-tertiary-30 {
	background-color: var(--tertiary-30) !important;
}

.bg-tertiary-40 {
	background-color: var(--tertiary-40) !important;
}

.bg-tertiary-50 {
	background-color: var(--tertiary-50) !important;
}

.bg-tertiary-60 {
	background-color: var(--tertiary-60) !important;
}

.bg-tertiary-70 {
	background-color: var(--tertiary-70) !important;
}

.bg-tertiary-80 {
	background-color: var(--tertiary-80) !important;
}

.bg-tertiary-90 {
	background-color: var(--tertiary-90) !important;
}

.bg-tertiary-95 {
	background-color: var(--tertiary-95) !important;
}

.bg-tertiary-99 {
	background-color: var(--tertiary-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - ERROR BACKGROUND
--------------------------------------------------------------*/

.bg-error-10 {
	background-color: var(--error-10) !important;
}

.bg-error-20 {
	background-color: var(--error-20) !important;
}

.bg-error-30 {
	background-color: var(--error-30) !important;
}

.bg-error-40 {
	background-color: var(--error-40) !important;
}

.bg-error-50 {
	background-color: var(--error-50) !important;
}

.bg-error-60 {
	background-color: var(--error-60) !important;
}

.bg-error-70 {
	background-color: var(--error-70) !important;
}

.bg-error-80 {
	background-color: var(--error-80) !important;
}

.bg-error-90 {
	background-color: var(--error-90) !important;
}

.bg-error-95 {
	background-color: var(--error-95) !important;
}

.bg-error-99 {
	background-color: var(--error-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - NEUTRAL BACKGROUND
--------------------------------------------------------------*/

.bg-neutral-10 {
	background-color: var(--neutral-10) !important;
}

.bg-neutral-20 {
	background-color: var(--neutral-20) !important;
}

.bg-neutral-30 {
	background-color: var(--neutral-30) !important;
}

.bg-neutral-40 {
	background-color: var(--neutral-40) !important;
}

.bg-neutral-50 {
	background-color: var(--neutral-50) !important;
}

.bg-neutral-60 {
	background-color: var(--neutral-60) !important;
}

.bg-neutral-70 {
	background-color: var(--neutral-70) !important;
}

.bg-neutral-80 {
	background-color: var(--neutral-80) !important;
}

.bg-neutral-90 {
	background-color: var(--neutral-90) !important;
}

.bg-neutral-95 {
	background-color: var(--neutral-95) !important;
}

.bg-neutral-99 {
	background-color: var(--neutral-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - NEUTRAL VARIANT BACKGROUND
--------------------------------------------------------------*/

.bg-neutral-v-10 {
	background-color: var(--neutral-v-10) !important;
}

.bg-neutral-v-20 {
	background-color: var(--neutral-v-20) !important;
}

.bg-neutral-v-30 {
	background-color: var(--neutral-v-30) !important;
}

.bg-neutral-v-40 {
	background-color: var(--neutral-v-40) !important;
}

.bg-neutral-v-50 {
	background-color: var(--neutral-v-50) !important;
}

.bg-neutral-v-60 {
	background-color: var(--neutral-v-60) !important;
}

.bg-neutral-v-70 {
	background-color: var(--neutral-v-70) !important;
}

.bg-neutral-v-80 {
	background-color: var(--neutral-v-80) !important;
}

.bg-neutral-v-90 {
	background-color: var(--neutral-v-90) !important;
}

.bg-neutral-v-95 {
	background-color: var(--neutral-v-95) !important;
}

.bg-neutral-v-99 {
	background-color: var(--neutral-v-99) !important;
}

/*--------------------------------------------------------------
##  COLORS - TONAL PALLETE - PRIMARY BACKGROUND
--------------------------------------------------------------*/

.color-primary-10 {
	color: var(--primary-10) !important;
}

.color-primary-20 {
	color: var(--primary-20) !important;
}

.color-primary-30 {
	color: var(--primary-30) !important;
}

.color-primary-40 {
	color: var(--primary-40) !important;
}

.color-primary-50 {
	color: var(--primary-50) !important;
}

.color-primary-60 {
	color: var(--primary-60) !important;
}

.color-primary-70 {
	color: var(--primary-70) !important;
}

.color-primary-80 {
	color: var(--primary-80) !important;
}

.color-primary-90 {
	color: var(--primary-90) !important;
}

.color-primary-95 {
	color: var(--primary-95) !important;
}

.color-primary-99 {
	color: var(--primary-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - SECONDARY BACKGROUND
--------------------------------------------------------------*/

.color-secondary-10 {
	color: var(--secondary-10) !important;
}

.color-secondary-20 {
	color: var(--secondary-20) !important;
}

.color-secondary-30 {
	color: var(--secondary-30) !important;
}

.color-secondary-40 {
	color: var(--secondary-40) !important;
}

.color-secondary-50 {
	color: var(--secondary-50) !important;
}

.color-secondary-60 {
	color: var(--secondary-60) !important;
}

.color-secondary-70 {
	color: var(--secondary-70) !important;
}

.color-secondary-80 {
	color: var(--secondary-80) !important;
}

.color-secondary-90 {
	color: var(--secondary-90) !important;
}

.color-secondary-95 {
	color: var(--secondary-95) !important;
}

.color-secondary-99 {
	color: var(--secondary-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - TERTIARY BACKGROUND
--------------------------------------------------------------*/

.color-tertiary-10 {
	color: var(--tertiary-10) !important;
}

.color-tertiary-20 {
	color: var(--tertiary-20) !important;
}

.color-tertiary-30 {
	color: var(--tertiary-30) !important;
}

.color-tertiary-40 {
	color: var(--tertiary-40) !important;
}

.color-tertiary-50 {
	color: var(--tertiary-50) !important;
}

.color-tertiary-60 {
	color: var(--tertiary-60) !important;
}

.color-tertiary-70 {
	color: var(--tertiary-70) !important;
}

.color-tertiary-80 {
	color: var(--tertiary-80) !important;
}

.color-tertiary-90 {
	color: var(--tertiary-90) !important;
}

.color-tertiary-95 {
	color: var(--tertiary-95) !important;
}

.color-tertiary-99 {
	color: var(--tertiary-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - ERROR BACKGROUND
--------------------------------------------------------------*/

.color-error-10 {
	color: var(--error-10) !important;
}

.color-error-20 {
	color: var(--error-20) !important;
}

.color-error-30 {
	color: var(--error-30) !important;
}

.color-error-40 {
	color: var(--error-40) !important;
}

.color-error-50 {
	color: var(--error-50) !important;
}

.color-error-60 {
	color: var(--error-60) !important;
}

.color-error-70 {
	color: var(--error-70) !important;
}

.color-error-80 {
	color: var(--error-80) !important;
}

.color-error-90 {
	color: var(--error-90) !important;
}

.color-error-95 {
	color: var(--error-95) !important;
}

.color-error-99 {
	color: var(--error-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - NEUTRAL BACKGROUND
--------------------------------------------------------------*/

.color-neutral-10 {
	color: var(--neutral-10) !important;
}

.color-neutral-20 {
	color: var(--neutral-20) !important;
}

.color-neutral-30 {
	color: var(--neutral-30) !important;
}

.color-neutral-40 {
	color: var(--neutral-40) !important;
}

.color-neutral-50 {
	color: var(--neutral-50) !important;
}

.color-neutral-60 {
	color: var(--neutral-60) !important;
}

.color-neutral-70 {
	color: var(--neutral-70) !important;
}

.color-neutral-80 {
	color: var(--neutral-80) !important;
}

.color-neutral-90 {
	color: var(--neutral-90) !important;
}

.color-neutral-95 {
	color: var(--neutral-95) !important;
}

.color-neutral-99 {
	color: var(--neutral-99) !important;
}

/*--------------------------------------------------------------
## BACKGROUND COLORS - TONAL PALLETE - NEUTRAL VARIANT BACKGROUND
--------------------------------------------------------------*/

.color-neutral-v-10 {
	color: var(--neutral-v-10) !important;
}

.color-neutral-v-20 {
	color: var(--neutral-v-20) !important;
}

.color-neutral-v-30 {
	color: var(--neutral-v-30) !important;
}

.color-neutral-v-40 {
	color: var(--neutral-v-40) !important;
}

.color-neutral-v-50 {
	color: var(--neutral-v-50) !important;
}

.color-neutral-v-60 {
	color: var(--neutral-v-60) !important;
}

.color-neutral-v-70 {
	color: var(--neutral-v-70) !important;
}

.color-neutral-v-80 {
	color: var(--neutral-v-80) !important;
}

.color-neutral-v-90 {
	color: var(--neutral-v-90) !important;
}

.color-neutral-v-95 {
	color: var(--neutral-v-95) !important;
}

.color-neutral-v-99 {
	color: var(--neutral-v-99) !important;
}

/* ELEVATION */

.elevation-1:before,
.elevation-2:before,
.elevation-3:before,
.elevation-4:before,
.elevation-5:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--primary-40);
	opacity: 0;
}

.elevation-1 {
	position: relative;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15) !important;
}

.elevation-2 {
	position: relative;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15) !important;
}

.elevation-3 {
	position: relative;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15) !important;
}

.elevation-4 {
	position: relative;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15) !important;
}

.elevation-5 {
	position: relative;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15) !important;
}

.bg-surface,
.bg-surface-variant {
	position: relative;
	z-index: 1;
}

.bg-surface:before,
.bg-surface-variant:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--primary-40);
	opacity: 0;
}

.dark .bg-surface:before,
.dark .bg-surface-variant:before {
	background-color: var(--primary-80);
}

.bg-surface.elevation-1:before,
.bg-surface-variant.elevation-1:before {
	opacity: .05;
}

.bg-surface.elevation-2:before,
.bg-surface-variant.elevation-2:before {
	opacity: .08;
}

.bg-surface.elevation-3:before,
.bg-surface-variant.elevation-3:before {
	opacity: .11;
}

.bg-surface.elevation-4:before,
.bg-surface-variant.elevation-4:before {
	opacity: .12;
}

.bg-surface.elevation-5:before,
.bg-surface-variant.elevation-5:before {
	opacity: .14;
}

/*--------------------------------------------------------------
# HEIGHTS
--------------------------------------------------------------*/
.height-4 {
	height: 4px !important;
}

.height-8 {
	height: 8px !important;
}

.height-16 {
	height: 16px !important;
}

.height-24 {
	height: 24px !important;
}

.height-32 {
	height: 32px !important;
}

.height-40 {
	height: 40px !important;
}

.height-56 {
	height: 56px !important;
}

.height-64 {
	height: 64px !important;
}

.height-72 {
	height: 72px !important;
}

.height-80 {
	height: 80px !important;
}

.height-128 {
	height: 128px !important;
}

.height-160 {
	height: 160px !important;
}

.height-200 {
	height: 200px !important;
}

.height-256 {
	height: 256px !important;
}

.height-320 {
	height: 320px !important;
}

.height-480 {
	height: 480px !important;
}

.height-512 {
	height: 512px !important;
}

.height-640 {
	height: 640px !important;
}

.height-720 {
	height: 720px !important;
}

.height-full {
	height: 100% !important;
}

/*--------------------------------------------------------------
# Width
--------------------------------------------------------------*/
.width-4 {
	width: 4px !important;
}

.width-8 {
	width: 8px !important;
}

.width-16 {
	width: 16px !important;
}

.width-24 {
	width: 24px !important;
}

.width-32 {
	width: 32px !important;
}

.width-40 {
	width: 40px !important;
}

.width-56 {
	width: 56px !important;
}

.width-64 {
	width: 64px !important;
}

.width-72 {
	width: 72px !important;
}

.width-80 {
	width: 80px !important;
}

.width-128 {
	width: 128px !important;
}

.width-160 {
	width: 160px !important;
}

.width-200 {
	width: 200px !important;
}

.width-256 {
	width: 256px !important;
}

.width-320 {
	width: 320px !important;
}

.width-480 {
	width: 480px !important;
}

.width-512 {
	width: 512px !important;
}

.width-640 {
	width: 640px !important;
}

.width-720 {
	width: 720px !important;
}

.width-1024 {
	width: 1024px !important;
}

.width-full {
	width: 100% !important;
}

/*--------------------------------------------------------------
# Max Width
--------------------------------------------------------------*/
.max-width-4 {
	max-width: 4px !important;
}

.max-width-8 {
	max-width: 8px !important;
}

.max-width-16 {
	max-width: 16px !important;
}

.max-width-24 {
	max-width: 24px !important;
}

.max-width-32 {
	max-width: 32px !important;
}

.max-width-40 {
	max-width: 40px !important;
}

.max-width-56 {
	max-width: 56px !important;
}

.max-width-64 {
	max-width: 64px !important;
}

.max-width-72 {
	max-width: 72px !important;
}

.max-width-80 {
	max-width: 80px !important;
}

.max-width-128 {
	max-width: 128px !important;
}

.max-width-160 {
	max-width: 160px !important;
}

.max-width-200 {
	max-width: 200px !important;
}

.max-width-256 {
	max-width: 256px !important;
}

.max-width-320 {
	max-width: 320px !important;
}

.max-width-480 {
	max-width: 480px !important;
}

.max-width-512 {
	max-width: 512px !important;
}

.max-width-640 {
	max-width: 640px !important;
}

.max-width-720 {
	max-width: 720px !important;
}

.max-width-full {
	max-width: 100% !important;
}

/*--------------------------------------------------------------
# TOP
--------------------------------------------------------------*/
.top-0 {
	top: 0 !important;
}

.top-4 {
	top: 4px !important;
}

.top-8 {
	top: 8px !important;
}

.top-16 {
	top: 16px !important;
}

.top-24 {
	top: 24px !important;
}

.top-32 {
	top: 32px !important;
}

.top-40 {
	top: 40px !important;
}

.top-56 {
	top: 56px !important;
}

.top-64 {
	top: 64px !important;
}

.top-72 {
	top: 72px !important;
}

.top-80 {
	top: 80px !important;
}

.top-128 {
	top: 128px !important;
}

.top-160 {
	top: 160px !important;
}

.top-200 {
	top: 200px !important;
}

.top-256 {
	top: 256px !important;
}

.top-320 {
	top: 320px !important;
}

.top-480 {
	top: 480px !important;
}

.top-512 {
	top: 512px !important;
}

.top-640 {
	top: 640px !important;
}

.top-720 {
	top: 720px !important;
}

.top-full {
	top: 100% !important;
}

@media (min-width: 600px) {
	.top-sm-4 {
		top: 4px !important;
	}

	.top-sm-8 {
		top: 8px !important;
	}

	.top-sm-16 {
		top: 16px !important;
	}

	.top-sm-24 {
		top: 24px !important;
	}

	.top-sm-32 {
		top: 32px !important;
	}

	.top-sm-40 {
		top: 40px !important;
	}

	.top-sm-56 {
		top: 56px !important;
	}

	.top-sm-64 {
		top: 64px !important;
	}

	.top-sm-72 {
		top: 72px !important;
	}

	.top-sm-80 {
		top: 80px !important;
	}

	.top-sm-128 {
		top: 128px !important;
	}

	.top-sm-160 {
		top: 160px !important;
	}

	.top-sm-200 {
		top: 200px !important;
	}

	.top-sm-256 {
		top: 256px !important;
	}

	.top-sm-320 {
		top: 320px !important;
	}

	.top-sm-480 {
		top: 480px !important;
	}

	.top-sm-512 {
		top: 512px !important;
	}

	.top-sm-640 {
		top: 640px !important;
	}

	.top-sm-720 {
		top: 720px !important;
	}

	.top-sm-full {
		top: 100% !important;
	}
}

@media (min-width: 960px) {
	.top-md-4 {
		top: 4px !important;
	}

	.top-md-8 {
		top: 8px !important;
	}

	.top-md-16 {
		top: 16px !important;
	}

	.top-md-24 {
		top: 24px !important;
	}

	.top-md-32 {
		top: 32px !important;
	}

	.top-md-40 {
		top: 40px !important;
	}

	.top-md-56 {
		top: 56px !important;
	}

	.top-md-64 {
		top: 64px !important;
	}

	.top-md-72 {
		top: 72px !important;
	}

	.top-md-80 {
		top: 80px !important;
	}

	.top-md-128 {
		top: 128px !important;
	}

	.top-md-160 {
		top: 160px !important;
	}

	.top-md-200 {
		top: 200px !important;
	}

	.top-md-256 {
		top: 256px !important;
	}

	.top-md-320 {
		top: 320px !important;
	}

	.top-md-480 {
		top: 480px !important;
	}

	.top-md-512 {
		top: 512px !important;
	}

	.top-md-640 {
		top: 640px !important;
	}

	.top-md-720 {
		top: 720px !important;
	}

	.top-md-full {
		top: 100% !important;
	}
}

@media (min-width: 1264px) {
	.top-lg-4 {
		top: 4px !important;
	}

	.top-lg-8 {
		top: 8px !important;
	}

	.top-lg-16 {
		top: 16px !important;
	}

	.top-lg-24 {
		top: 24px !important;
	}

	.top-lg-32 {
		top: 32px !important;
	}

	.top-lg-40 {
		top: 40px !important;
	}

	.top-lg-56 {
		top: 56px !important;
	}

	.top-lg-64 {
		top: 64px !important;
	}

	.top-lg-72 {
		top: 72px !important;
	}

	.top-lg-80 {
		top: 80px !important;
	}

	.top-lg-128 {
		top: 128px !important;
	}

	.top-lg-160 {
		top: 160px !important;
	}

	.top-lg-200 {
		top: 200px !important;
	}

	.top-lg-256 {
		top: 256px !important;
	}

	.top-lg-320 {
		top: 320px !important;
	}

	.top-lg-480 {
		top: 480px !important;
	}

	.top-lg-512 {
		top: 512px !important;
	}

	.top-lg-640 {
		top: 640px !important;
	}

	.top-lg-720 {
		top: 720px !important;
	}

	.top-lg-full {
		top: 100% !important;
	}
}

@media (min-width: 1904px) {
	.top-xl-4 {
		top: 4px !important;
	}

	.top-xl-8 {
		top: 8px !important;
	}

	.top-xl-16 {
		top: 16px !important;
	}

	.top-xl-24 {
		top: 24px !important;
	}

	.top-xl-32 {
		top: 32px !important;
	}

	.top-xl-40 {
		top: 40px !important;
	}

	.top-xl-56 {
		top: 56px !important;
	}

	.top-xl-64 {
		top: 64px !important;
	}

	.top-xl-72 {
		top: 72px !important;
	}

	.top-xl-80 {
		top: 80px !important;
	}

	.top-xl-128 {
		top: 128px !important;
	}

	.top-xl-160 {
		top: 160px !important;
	}

	.top-xl-200 {
		top: 200px !important;
	}

	.top-xl-256 {
		top: 256px !important;
	}

	.top-xl-320 {
		top: 320px !important;
	}

	.top-xl-480 {
		top: 480px !important;
	}

	.top-xl-512 {
		top: 512px !important;
	}

	.top-xl-640 {
		top: 640px !important;
	}

	.top-xl-720 {
		top: 720px !important;
	}

	.top-xl-full {
		top: 100% !important;
	}
}

/*--------------------------------------------------------------
# LEFT
--------------------------------------------------------------*/
.left-0 {
	left: 0 !important;
}

.left-4 {
	left: 4px !important;
}

.left-8 {
	left: 8px !important;
}

.left-16 {
	left: 16px !important;
}

.left-24 {
	left: 24px !important;
}

.left-32 {
	left: 32px !important;
}

.left-40 {
	left: 40px !important;
}

.left-56 {
	left: 56px !important;
}

.left-64 {
	left: 64px !important;
}

.left-72 {
	left: 72px !important;
}

.left-80 {
	left: 80px !important;
}

.left-128 {
	left: 128px !important;
}

.left-160 {
	left: 160px !important;
}

.left-200 {
	left: 200px !important;
}

.left-256 {
	left: 256px !important;
}

.left-320 {
	left: 320px !important;
}

.left-480 {
	left: 480px !important;
}

.left-512 {
	left: 512px !important;
}

.left-640 {
	left: 640px !important;
}

.left-720 {
	left: 720px !important;
}

.left-full {
	left: 100% !important;
}

@media (min-width: 600px) {
	.left-sm-4 {
		left: 4px !important;
	}

	.left-sm-8 {
		left: 8px !important;
	}

	.left-sm-16 {
		left: 16px !important;
	}

	.left-sm-24 {
		left: 24px !important;
	}

	.left-sm-32 {
		left: 32px !important;
	}

	.left-sm-40 {
		left: 40px !important;
	}

	.left-sm-56 {
		left: 56px !important;
	}

	.left-sm-64 {
		left: 64px !important;
	}

	.left-sm-72 {
		left: 72px !important;
	}

	.left-sm-80 {
		left: 80px !important;
	}

	.left-sm-128 {
		left: 128px !important;
	}

	.left-sm-160 {
		left: 160px !important;
	}

	.left-sm-200 {
		left: 200px !important;
	}

	.left-sm-256 {
		left: 256px !important;
	}

	.left-sm-320 {
		left: 320px !important;
	}

	.left-sm-480 {
		left: 480px !important;
	}

	.left-sm-512 {
		left: 512px !important;
	}

	.left-sm-640 {
		left: 640px !important;
	}

	.left-sm-720 {
		left: 720px !important;
	}

	.left-sm-full {
		left: 100% !important;
	}
}

@media (min-width: 960px) {
	.left-md-4 {
		left: 4px !important;
	}

	.left-md-8 {
		left: 8px !important;
	}

	.left-md-16 {
		left: 16px !important;
	}

	.left-md-24 {
		left: 24px !important;
	}

	.left-md-32 {
		left: 32px !important;
	}

	.left-md-40 {
		left: 40px !important;
	}

	.left-md-56 {
		left: 56px !important;
	}

	.left-md-64 {
		left: 64px !important;
	}

	.left-md-72 {
		left: 72px !important;
	}

	.left-md-80 {
		left: 80px !important;
	}

	.left-md-128 {
		left: 128px !important;
	}

	.left-md-160 {
		left: 160px !important;
	}

	.left-md-200 {
		left: 200px !important;
	}

	.left-md-256 {
		left: 256px !important;
	}

	.left-md-320 {
		left: 320px !important;
	}

	.left-md-480 {
		left: 480px !important;
	}

	.left-md-512 {
		left: 512px !important;
	}

	.left-md-640 {
		left: 640px !important;
	}

	.left-md-720 {
		left: 720px !important;
	}

	.left-md-full {
		left: 100% !important;
	}
}

@media (min-width: 1264px) {
	.left-lg-4 {
		left: 4px !important;
	}

	.left-lg-8 {
		left: 8px !important;
	}

	.left-lg-16 {
		left: 16px !important;
	}

	.left-lg-24 {
		left: 24px !important;
	}

	.left-lg-32 {
		left: 32px !important;
	}

	.left-lg-40 {
		left: 40px !important;
	}

	.left-lg-56 {
		left: 56px !important;
	}

	.left-lg-64 {
		left: 64px !important;
	}

	.left-lg-72 {
		left: 72px !important;
	}

	.left-lg-80 {
		left: 80px !important;
	}

	.left-lg-128 {
		left: 128px !important;
	}

	.left-lg-160 {
		left: 160px !important;
	}

	.left-lg-200 {
		left: 200px !important;
	}

	.left-lg-256 {
		left: 256px !important;
	}

	.left-lg-320 {
		left: 320px !important;
	}

	.left-lg-480 {
		left: 480px !important;
	}

	.left-lg-512 {
		left: 512px !important;
	}

	.left-lg-640 {
		left: 640px !important;
	}

	.left-lg-720 {
		left: 720px !important;
	}

	.left-lg-full {
		left: 100% !important;
	}
}

@media (min-width: 1904px) {
	.left-xl-4 {
		left: 4px !important;
	}

	.left-xl-8 {
		left: 8px !important;
	}

	.left-xl-16 {
		left: 16px !important;
	}

	.left-xl-24 {
		left: 24px !important;
	}

	.left-xl-32 {
		left: 32px !important;
	}

	.left-xl-40 {
		left: 40px !important;
	}

	.left-xl-56 {
		left: 56px !important;
	}

	.left-xl-64 {
		left: 64px !important;
	}

	.left-xl-72 {
		left: 72px !important;
	}

	.left-xl-80 {
		left: 80px !important;
	}

	.left-xl-128 {
		left: 128px !important;
	}

	.left-xl-160 {
		left: 160px !important;
	}

	.left-xl-200 {
		left: 200px !important;
	}

	.left-xl-256 {
		left: 256px !important;
	}

	.left-xl-320 {
		left: 320px !important;
	}

	.left-xl-480 {
		left: 480px !important;
	}

	.left-xl-512 {
		left: 512px !important;
	}

	.left-xl-640 {
		left: 640px !important;
	}

	.left-xl-720 {
		left: 720px !important;
	}

	.left-xl-full {
		left: 100% !important;
	}
}

/*--------------------------------------------------------------
# BOTTOM
--------------------------------------------------------------*/
.bottom-4 {
	bottom: 4px !important;
}

.bottom-8 {
	bottom: 8px !important;
}

.bottom-16 {
	bottom: 16px !important;
}

.bottom-24 {
	bottom: 24px !important;
}

.bottom-32 {
	bottom: 32px !important;
}

.bottom-40 {
	bottom: 40px !important;
}

.bottom-56 {
	bottom: 56px !important;
}

.bottom-64 {
	bottom: 64px !important;
}

.bottom-72 {
	bottom: 72px !important;
}

.bottom-80 {
	bottom: 80px !important;
}

.bottom-128 {
	bottom: 128px !important;
}

.bottom-160 {
	bottom: 160px !important;
}

.bottom-200 {
	bottom: 200px !important;
}

.bottom-256 {
	bottom: 256px !important;
}

.bottom-320 {
	bottom: 320px !important;
}

.bottom-480 {
	bottom: 480px !important;
}

.bottom-512 {
	bottom: 512px !important;
}

.bottom-640 {
	bottom: 640px !important;
}

.bottom-720 {
	bottom: 720px !important;
}

.bottom-full {
	bottom: 100% !important;
}

@media (min-width: 600px) {
	.bottom-sm-4 {
		bottom: 4px !important;
	}

	.bottom-sm-8 {
		bottom: 8px !important;
	}

	.bottom-sm-16 {
		bottom: 16px !important;
	}

	.bottom-sm-24 {
		bottom: 24px !important;
	}

	.bottom-sm-32 {
		bottom: 32px !important;
	}

	.bottom-sm-40 {
		bottom: 40px !important;
	}

	.bottom-sm-56 {
		bottom: 56px !important;
	}

	.bottom-sm-64 {
		bottom: 64px !important;
	}

	.bottom-sm-72 {
		bottom: 72px !important;
	}

	.bottom-sm-80 {
		bottom: 80px !important;
	}

	.bottom-sm-128 {
		bottom: 128px !important;
	}

	.bottom-sm-160 {
		bottom: 160px !important;
	}

	.bottom-sm-200 {
		bottom: 200px !important;
	}

	.bottom-sm-256 {
		bottom: 256px !important;
	}

	.bottom-sm-320 {
		bottom: 320px !important;
	}

	.bottom-sm-480 {
		bottom: 480px !important;
	}

	.bottom-sm-512 {
		bottom: 512px !important;
	}

	.bottom-sm-640 {
		bottom: 640px !important;
	}

	.bottom-sm-720 {
		bottom: 720px !important;
	}

	.bottom-sm-full {
		bottom: 100% !important;
	}
}

@media (min-width: 960px) {
	.bottom-md-4 {
		bottom: 4px !important;
	}

	.bottom-md-8 {
		bottom: 8px !important;
	}

	.bottom-md-16 {
		bottom: 16px !important;
	}

	.bottom-md-24 {
		bottom: 24px !important;
	}

	.bottom-md-32 {
		bottom: 32px !important;
	}

	.bottom-md-40 {
		bottom: 40px !important;
	}

	.bottom-md-56 {
		bottom: 56px !important;
	}

	.bottom-md-64 {
		bottom: 64px !important;
	}

	.bottom-md-72 {
		bottom: 72px !important;
	}

	.bottom-md-80 {
		bottom: 80px !important;
	}

	.bottom-md-128 {
		bottom: 128px !important;
	}

	.bottom-md-160 {
		bottom: 160px !important;
	}

	.bottom-md-200 {
		bottom: 200px !important;
	}

	.bottom-md-256 {
		bottom: 256px !important;
	}

	.bottom-md-320 {
		bottom: 320px !important;
	}

	.bottom-md-480 {
		bottom: 480px !important;
	}

	.bottom-md-512 {
		bottom: 512px !important;
	}

	.bottom-md-640 {
		bottom: 640px !important;
	}

	.bottom-md-720 {
		bottom: 720px !important;
	}

	.bottom-md-full {
		bottom: 100% !important;
	}
}

@media (min-width: 1264px) {
	.bottom-lg-4 {
		bottom: 4px !important;
	}

	.bottom-lg-8 {
		bottom: 8px !important;
	}

	.bottom-lg-16 {
		bottom: 16px !important;
	}

	.bottom-lg-24 {
		bottom: 24px !important;
	}

	.bottom-lg-32 {
		bottom: 32px !important;
	}

	.bottom-lg-40 {
		bottom: 40px !important;
	}

	.bottom-lg-56 {
		bottom: 56px !important;
	}

	.bottom-lg-64 {
		bottom: 64px !important;
	}

	.bottom-lg-72 {
		bottom: 72px !important;
	}

	.bottom-lg-80 {
		bottom: 80px !important;
	}

	.bottom-lg-128 {
		bottom: 128px !important;
	}

	.bottom-lg-160 {
		bottom: 160px !important;
	}

	.bottom-lg-200 {
		bottom: 200px !important;
	}

	.bottom-lg-256 {
		bottom: 256px !important;
	}

	.bottom-lg-320 {
		bottom: 320px !important;
	}

	.bottom-lg-480 {
		bottom: 480px !important;
	}

	.bottom-lg-512 {
		bottom: 512px !important;
	}

	.bottom-lg-640 {
		bottom: 640px !important;
	}

	.bottom-lg-720 {
		bottom: 720px !important;
	}

	.bottom-lg-full {
		bottom: 100% !important;
	}
}

@media (min-width: 1904px) {
	.bottom-xl-4 {
		bottom: 4px !important;
	}

	.bottom-xl-8 {
		bottom: 8px !important;
	}

	.bottom-xl-16 {
		bottom: 16px !important;
	}

	.bottom-xl-24 {
		bottom: 24px !important;
	}

	.bottom-xl-32 {
		bottom: 32px !important;
	}

	.bottom-xl-40 {
		bottom: 40px !important;
	}

	.bottom-xl-56 {
		bottom: 56px !important;
	}

	.bottom-xl-64 {
		bottom: 64px !important;
	}

	.bottom-xl-72 {
		bottom: 72px !important;
	}

	.bottom-xl-80 {
		bottom: 80px !important;
	}

	.bottom-xl-128 {
		bottom: 128px !important;
	}

	.bottom-xl-160 {
		bottom: 160px !important;
	}

	.bottom-xl-200 {
		bottom: 200px !important;
	}

	.bottom-xl-256 {
		bottom: 256px !important;
	}

	.bottom-xl-320 {
		bottom: 320px !important;
	}

	.bottom-xl-480 {
		bottom: 480px !important;
	}

	.bottom-xl-512 {
		bottom: 512px !important;
	}

	.bottom-xl-640 {
		bottom: 640px !important;
	}

	.bottom-xl-720 {
		bottom: 720px !important;
	}

	.bottom-xl-full {
		bottom: 100% !important;
	}
}

/*--------------------------------------------------------------
# TYPOGRAPHY
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## TYPOGRAPHY -> TAGS
--------------------------------------------------------------*/

p {
	margin: 0 0 16px 0;
}

code,
kbd,
pre,
samp {
	font-size: 14px;
	line-height: 16px;
	padding: 0 8px;
	font-family: monospace;
	background-color: var(--neutral-90);
	border-radius: 4px;
}

pre {
	padding: 8px;
	 -moz-tab-size: 2em; /* Firefox */
	      tab-size: 2em;
}

pre code {
	display: block;
}

.dark code,
.dark kbd,
.dark pre,
.dark samp {
	background-color: var(--neutral-20);
}

/*--------------------------------------------------------------
## TYPOGRAPHY -> HEADLINE
--------------------------------------------------------------*/

h4 {
	font-weight: normal;
	font-size: 22px;
	line-height: 28px;
}

.text-headline-l {
	font-weight: normal !important;
	font-size: 22px !important;
	line-height: 28px !important;
}

h5 {
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
}

.text-headline-m {
	font-weight: normal !important;
	font-size: 20px !important;
	line-height: 24px !important;
}

h6 {
	font-weight: normal;
	font-size: 18px;
	line-height: 24px;
}

.text-headline-s {
	font-weight: normal !important;
	font-size: 18px !important;
	line-height: 24px !important;
}

@media (min-width: 360px) {
	h4 {
		font-size: 32px;
		line-height: 40px;
	}

	.text-headline-l {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	h5 {
		font-size: 28px;
		line-height: 36px;
	}

	.text-headline-m {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	h6 {
		font-size: 24px;
		line-height: 32px;
	}

	.text-headline-s {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}

/*--------------------------------------------------------------
## TYPOGRAPHY -> DISPLAY
--------------------------------------------------------------*/

h1 {
	font-weight: normal;
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -0.25px;
	margin: 0;
}

.text-display-l {
	font-weight: normal !important;
	font-size: 32px !important;
	line-height: 40px !important;
	letter-spacing: -0.25px !important;
	margin: 0 !important;
}

h2 {
	font-weight: normal;
	font-size: 28px;
	line-height: 36px;
	margin: 0;
}

.text-display-m {
	font-weight: normal !important;
	font-size: 28px !important;
	line-height: 36px !important;
	margin: 0 !important;
}

h3 {
	font-weight: normal;
	font-size: 22px;
	line-height: 32px;
	margin: 0;
}

.text-display-s {
	font-weight: normal !important;
	font-size: 22px !important;
	line-height: 32px !important;
	margin: 0 !important;
}

@media (min-width: 360px) {
	h1 {
		font-size: 40px;
		line-height: 52px;
	}

	.text-display-l {
		font-size: 40px !important;
		line-height: 52px !important;
	}

	h2 {
		font-size: 32px;
		line-height: 40px;
	}

	.text-display-m {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	h3 {
		font-size: 28px;
		line-height: 36px;
	}

	.text-display-s {
		font-size: 28px !important;
		line-height: 36px !important;
	}
}

@media (min-width: 600px) {
	h1 {
		font-size: 48px;
		line-height: 58px;
	}

	.text-display-l {
		font-size: 48px !important;
		line-height: 58px !important;
	}

	h2 {
		font-size: 36px;
		line-height: 44px;
	}

	.text-display-m {
		font-size: 36px !important;
		line-height: 44px !important;
	}

	h3 {
		font-size: 32px;
		line-height: 40px;
	}

	.text-display-s {
		font-size: 32px !important;
		line-height: 40px !important;
	}
}

@media (min-width: 1264px) {
	h1 {
		font-size: 57px;
		line-height: 64px;
	}

	.text-display-l {
		font-size: 57px !important;
		line-height: 64px !important;
	}

	h2 {
		font-size: 45px;
		line-height: 52px;
	}

	.text-display-m {
		font-size: 45px !important;
		line-height: 52px !important;
	}

	h3 {
		font-size: 36px;
		line-height: 44px;
	}

	.text-display-s {
		font-size: 36px !important;
		line-height: 44px !important;
	}
}

@media (min-width: 1904px) {
	h1 {
		font-size: 72px;
		line-height: 80px;
	}

	.text-display-l {
		font-size: 72px !important;
		line-height: 80px !important;
	}

	h2 {
		font-size: 52px;
		line-height: 64px;
	}

	.text-display-m {
		font-size: 52px !important;
		line-height: 64px !important;
	}

	h3 {
		font-size: 45px;
		line-height: 52px;
	}

	.text-display-s {
		font-size: 45px !important;
		line-height: 52px !important;
	}
}

/*--------------------------------------------------------------
# FONT WEIGHTS
--------------------------------------------------------------*/

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

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

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

.thin {
	font-weight: 100 !important;
}

/*--------------------------------------------------------------
## TEXT ALIGN
--------------------------------------------------------------*/

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

/*--------------------------------------------------------------
## WHITE SPACE
--------------------------------------------------------------*/

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

/*--------------------------------------------------------------
## BUTTONS PRIMARY
--------------------------------------------------------------*/

.button {
	display: inline-flex;
	flex: 0 0 auto;
	position: relative;
	height: 40px;
	line-height: 24px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	padding: 0 24px;
	margin: 0 8px 8px 0;
	white-space: nowrap;
	border: none;
	vertical-align: middle;
	outline: none;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	background-color: var(--primary-40);
	border-radius: 999px;
	user-select: none;
	text-decoration: none;
	z-index: 1;
	transition: all .175s ease-in-out;
}

.button.button-icon {
	padding-left: 16px;
}

.dark .button {
	background-color: var(--primary-80);
	color: var(--primary-20);
}

.button:hover {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.button:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: #FFFFFF;
	opacity: 0;
	border-radius: 100px;
	pointer-events: none;
	transition: all .175s ease-in-out;
}

.button:hover:before {
	opacity: .08;
}

.button:focus:before {
	opacity: .12;
}

.button.disabled,
.button[disabled] {
	cursor: default;
	color: var(--neutral-10);
	background-color: transparent;
}

.button.disabled:hover,
.button[disabled]:hover {
	box-shadow: none;
}

.dark .button.disabled,
.dark .button[disabled] {
	color: var(--neutral-90);
}

.button.disabled > span,
.button[disabled] > span {
	color: var(--neutral-10);
	opacity: .38;
}

.dark .button.disabled > span,
.dark .button[disabled] > span {
	color: var(--neutral-90);
}

.button.disabled:before,
.button[disabled]:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .button.disabled:before,
.dark .button[disabled]:before {
	background-color: #E3E3E3;
}


/*--------------------------------------------------------------
## BUTTONS OUTLINED
--------------------------------------------------------------*/

.button.outlined {
	border: 1px solid var(--neutral-v-50);
	background-color: transparent;
	color: var(--primary-40);
}

.dark .button.outlined {
	border: 1px solid var(--neutral-v-60);
	background-color: transparent;
	color: var(--primary-80);
}

.button.outlined:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.button.outlined:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.button.outlined:focus {
	border-color: var(--primary-40);
}

.dark .button.outlined:focus {
	border-color: var(--primary-80);
}

.button.outlined:hover {
	box-shadow: none;
}

.button.outlined.disabled,
.button.outlined[disabled] {
	border-color: rgba(31, 31, 31, .12);
}

.dark .button.outlined.disabled,
.dark .button.outlined[disabled] {
	border-color: rgba(227, 227, 227, 0.12);
}

.button.outlined.disabled:before,
.button.outlined[disabled]:before,
.button.outlined.disabled:hover:before,
.button.outlined[disabled]:hover:before,
.button.outlined.disabled:focus:before,
.button.outlined[disabled]:focus:before {
	opacity: 0;
}

/*--------------------------------------------------------------
## BUTTONS TEXT
--------------------------------------------------------------*/

.button.text {
	background-color: transparent;
	color: var(--primary-40);
}

.dark .button.text {
	color: var(--primary-80);
}

.button.text:hover {
	box-shadow: none;
}

.button.text:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.button.text:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.button.text.disabled:before,
.button.text[disabled]:before,
.button.text.disabled:hover:before,
.button.text[disabled]:hover:before,
.button.text.disabled:focus:before,
.button.text[disabled]:focus:before {
	opacity: 0;
}

/*--------------------------------------------------------------
## BUTTONS ELEVATED
--------------------------------------------------------------*/

.button.elevated {
	color: var(--primary-40);
	background-color: transparent;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.dark .button.elevated {
	color: var(--primary-80);
}

.button.elevated:before {
	background-color: var(--primary-40);
	opacity: .05;
}

.dark .button.elevated:before {
	background-color: var(--primary-80);
	opacity: .08;
}

.button.elevated:hover:before {
	background-color: var(--primary-40);
	opacity: .08;
}

.dark .button.elevated:hover:before {
	background-color: var(--primary-80);
	opacity: .11;
}

.button.elevated:focus:before {
	background-color: var(--primary-40);
	opacity: .11;
}

.dark .button.elevated:focus:before {
	background-color: var(--primary-80);
	opacity: .16;
}

.button.elevated.disabled,
.button.elevated[disabled] {
	box-shadow: none;
}

.button.elevated.disabled:before,
.button.elevated[disabled]:before,
.button.elevated.disabled:hover:before,
.button.elevated[disabled]:hover:before,
.button.elevated.disabled:focus:before,
.button.elevated[disabled]:focus:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .button.elevated.disabled:before,
.dark .button.elevated[disabled]:before,
.dark .button.elevated.disabled:hover:before,
.dark .button.elevated[disabled]:hover:before,
.dark .button.elevated.disabled:focus:before,
.dark .button.elevated[disabled]:focus:before {
	background-color: #E3E3E3;
	opacity: .12;
}

/*--------------------------------------------------------------
## BUTTONS TONAL
--------------------------------------------------------------*/

.button.tonal {
	color: var(--secondary-10);
	background-color: var(--secondary-90);
}

.dark .button.tonal {
	color: var(--secondary-90);
	background-color: var(--secondary-30);
}

.button.tonal:before {
	background-color: currentColor;
}

.button.tonal.disabled,
.button.tonal[disabled] {
	cursor: default;
	color: var(--neutral-10);
	background-color: transparent;
}

.button.tonal.disabled:hover,
.button.tonal[disabled]:hover {
	box-shadow: none;
}

.dark .button.tonal.disabled,
.dark .button.tonal[disabled] {
	color: var(--neutral-90);
}

.button.tonal.disabled > span,
.button.tonal[disabled] > span {
	color: var(--neutral-10);
	opacity: .38;
}

.dark .button.tonal.disabled > span,
.dark .button.tonal[disabled] > span {
	color: var(--neutral-90);
}

.button.tonal.disabled:before,
.button.tonal[disabled]:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .button.tonal.disabled:before,
.dark .button.tonal[disabled]:before {
	background-color: #E3E3E3;
}

/*--------------------------------------------------------------
## BUTTONS SIZE
--------------------------------------------------------------*/

.button.button-s {
	height: 24px;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.5px;
	padding: 0 16px;
}

.button.button-s.button-icon {
	padding-left: 12px;
}

.button.button-m {
	height: 32px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.5px;
	padding: 0 20px;
}

.button.button-m.button-icon {
	padding-left: 14px;
}

/*--------------------------------------------------------------
## BUTTONS SQUARE
--------------------------------------------------------------*/

.button.button-square {
	height: 32px;
	width: 32px;
	background-color: transparent;
	color: var(--primary-40);
}

.button.button-square:hover {
	box-shadow: none;
}

.dark .button.button-square {
	color: var(--primary-80);
}

.button.button-square:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.button.button-square:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.button.button-square.disabled:before,
.button.button-square[disabled]:before,
.button.button-square.disabled:hover:before,
.button.button-square[disabled]:hover:before,
.button.button-square.disabled:focus:before,
.button.button-square[disabled]:focus:before {
	opacity: 0;
}

.button.button-square > span {
	font-size: 24px;
}

/*--------------------------------------------------------------
# CHECKBOXES AND RADIOS
--------------------------------------------------------------*/

.radio,
.checkbox {
	width: 100%;
	position: relative;
	margin: 0 0 16px 0;
	user-select: none;
}

.radio input,
.checkbox input {
	position: absolute;
	top: 0;
	left: 0;
	width: 24px;
	height: 24px;
	opacity: 0;
	z-index: 2;
	cursor: pointer;
}

.radio label,
.checkbox label {
	position: relative;
	display: block;
	padding: 0 0 0 28px;
	cursor: pointer;
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.5px;
}

.radio label:before,
.checkbox label:before {
	font-family: 'azura';
	content: "\e835";
	font-size: 16px;
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	z-index: 1;
}

.radio label:before {
	content: "\e834";
}

.radio input:checked + label:before,
.checkbox input:checked + label:before {
	content: "\e834";
	color: var(--primary-40);
}

.dark .radio input:checked + label:before,
.dark .checkbox input:checked + label:before {
	color: var(--primary-60);
}

.radio input:checked + label:before {
	content: "\ea54";
}

.radio .selection-control,
.checkbox .selection-control {
	content: "";
	display: block;
	position: absolute;
	top: -10px;
	left: -10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	z-index: 2;
	cursor: pointer;
}

.radio  .selection-control:before,
.checkbox .selection-control:before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--primary-60);
	opacity: 0;
	z-index: -1;
}

.radio .selection-control.hover:before,
.checkbox .selection-control.hover:before {
	opacity: .08;
}

.radio .selection-control.focus:before,
.checkbox .selection-control.focus:before {
	opacity: .12;
}

/*--------------------------------------------------------------
# TEXT FIELDS
--------------------------------------------------------------*/

.text-field {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
}

.text-field:not(.boxed):not(.solo) > .input-slot {
	position: relative;
	border-radius: 4px 4px 0 0;
}

.text-field.boxed > .input-slot,
.text-field.solo > .input-slot {
	position: relative;
	border-color: var(--neutral-40);
	border-style: solid;
	border-width: thin;
	border-radius: 4px;
	height: 56px;
}

.text-field.boxed:hover > .input-slot,
.text-field.solo:hover > .input-slot {
	border-color: var(--neutral-10);
}

.text-field.boxed.focus > .input-slot,
.text-field.solo.focus > .input-slot {
	border-color: var(--primary-40);
}

.dark .text-field.boxed > .input-slot,
.dark .text-field.solo > .input-slot {
	border-color: var(--neutral-70);
}

.dark .text-field.boxed.focus > .input-slot,
.dark .text-field.solo.focus > .input-slot {
	border-color: var(--primary-80);
}

.text-field:not(.boxed):not(.solo) > .input-slot:after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	transition: .3s cubic-bezier(.25,.8,.5,1);
	width: 100%;
	background-color: currentColor;
	border-color: var(--primary-40);
	border-style: solid;
	border-width: thin 0 thin 0;
	transform: scaleX(0);
}

.text-field > .input-slot.field-details:after {
	bottom: 24px;
}

.dark .text-field:not(.boxed):not(.solo) > .input-slot:after {
	border-color: var(--primary-80);
}

.text-field:not(.boxed):not(.solo).focus > .input-slot:after,
.text-field:not(.boxed):not(.solo).opened > .input-slot:after {
	transform: scaleX(1);
}

.text-field:not(.loaded) .input-slot > label {
	display: none;
}

.text-field.loaded .input-slot > label {
	display: -webkit-box;
}

.text-field .input-slot {
	display: flex;
	background-color: var(--primary-light-opacity-05);
	cursor: text;
}

.dark .text-field .input-slot {
	background-color: var(--primary-dark-opacity-12);
	transition: background-color .175s cubic-bezier(.25,.8,.5,1);
}

.text-field > .input-slot > input {
	display: block;
	font-family: Roboto;
	height: 56px;
	width: 100%;
	padding: 24px 16px 8px 16px;
	border: none;
	outline: none;
	border-radius: 4px 4px 0 0;
	color: var(--neutral-20);
	background-color: transparent;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	transition: border-color .175s cubic-bezier(.25,.8,.5,1);
}

.text-field.solo > .input-slot > input {
	padding: 0 16px 0 16px;
}

.text-field.boxed > .input-slot > input,
.text-field.solo > .input-slot > input {
	border-radius: 4px;
}

.text-field:not(.boxed):not(.solo) > .input-slot > input {
	border-bottom: 1px solid var(--neutral-50);
}

.text-field.disabled:not(.boxed):not(.solo) > .input-slot > input {
	border-bottom: 1px dotted var(--neutral-50) !important;
	color: var(--neutral-40) !important;
}

.text-field.disabled.boxed > .input-slot > input {
	color: var(--neutral-70) !important;
}

.dark .text-field.disabled.boxed > .input-slot > input,
.dark .text-field.disabled.solo > .input-slot > input {
	color: var(--neutral-40) !important;
}


.text-field.select > .input-slot > input {
	cursor: pointer;
}

.text-field > .input-slot > input:hover {
	border-color: var(--neutral-10);
}

.text-field > .input-slot > input::placeholder {
	opacity: 0;
	visibility: hidden;
	transition: .3s cubic-bezier(.25,.8,.5,1);
}

.text-field.focus > .input-slot > input::placeholder,
.text-field.opened > .input-slot > input::placeholder {
	color: var(--neutral-30) !important;
	opacity: 1;
	visibility: visible;
}

.dark .text-field.focus > .input-slot > input::placeholder,
.dark .text-field.opened > .input-slot > input::placeholder {
	color: var(--neutral-70) !important;
}

.dark .text-field > .input-slot > input {
	color: var(--neutral-80);
}

.dark .text-field:not(.boxed):not(.solo) > .input-slot > input {
	border-bottom: 1px solid var(--neutral-80);
}

.dark .text-field:not(.boxed):not(.solo).disabled > .input-slot > input {
	border-bottom: 1px dotted var(--neutral-50);
}

.dark .text-field > .input-slot:hover,
.dark .text-field.focus > .input-slot,
.dark .text-field.opened > .input-slot {
	background-color: var(--primary-dark-opacity-16);
	border-color: var(--neutral-80);
}

.text-field.disabled > .input-slot {
	background-color: var(--neutral-light-opacity-12);
}

.dark .text-field.disabled > .input-slot {
	background-color: var(--neutral-dark-opacity-12);
}

.text-field.boxed.disabled > .input-slot,
.text-field.solo.disabled > .input-slot {
	color: var(--neutral-60);
	border-color: var(--neutral-80);
}

.dark .text-field.boxed.disabled > .input-slot,
.dark .text-field.solo.disabled > .input-slot {
	border-style: dotted;
	border-color: var(--neutral-30);
}

.text-field > .input-slot  > label {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 16px;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.1px;
	pointer-events: none;
	transform-origin: left top;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	transition: transform .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),-webkit-transform .15s cubic-bezier(.4,0,.2,1);
}

.text-field:not(.solo).focus > .input-slot  > label,
.text-field:not(.solo).value > .input-slot  > label,
.text-field:not(.solo).opened > .input-slot  > label {
	transform: translateY(-8px) scale(.75);
}

.text-field.focus > .input-slot > label,
.text-field.opened > .input-slot > label {
	color: var(--primary-40);
}

.text-field.solo.focus > .input-slot > label,
.text-field.solo.opened > .input-slot > label,
.text-field.solo.value > .input-slot > label {
	display: none;
}

.dark .text-field.focus > .input-slot > label,
.dark .text-field.opened > .input-slot > label {
	color: var(--primary-80);
}

.text-field.disabled > .input-slot > label {
	color: var(--neutral-70);
}

.dark .text-field.disabled > .input-slot > label {
	color: var(--neutral-40);
}

/* Change autocomplete styles in WebKit */
.text-field input:-webkit-autofill,
.text-field input:-webkit-autofill:hover,
.text-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--neutral-10);
	-webkit-box-shadow: 0 0 0px 1000px var(--primary-dark-opacity-16) inset;
	transition: background-color 5000s ease-in-out 0s;
	color: var(--neutral-10) !important;
}

.dark .text-field input:-webkit-autofill,
.dark .text-field input:-webkit-autofill:hover,
.dark .text-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--neutral-99);
	-webkit-box-shadow: 0 0 0px 1000px var(--primary-dark-opacity-16) inset;
	transition: background-color 5000s ease-in-out 0s;
	color: var(--neutral-99) !important;
}

.text-field > .details {
	display: flex;
    max-width: 100%;
    min-height: 16px;
    overflow: hidden;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    line-height: 16px;
}

.text-field > .details > .message {
	display: -webkit-box;
	 -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 16px;
    transform: translateY(-16px);
	transition:  transform .15s cubic-bezier(.4,0,.2,1);
}

.text-field.field-error > .details > .message {
	color: var(--error-50);
}

.dark .text-field.field-error > .details > .message {
	color: var(--error-90);
}

.text-field.disabled > .details {
	color: var(--neutral-60);
}

.text-field.field-error > .details > .message,
.text-field.persistent-message > .details > .message {
	transform: translateY(0);
}

.text-field > .details > .counter {
	white-space: nowrap;
}

.text-field.focus > .details > .message,
.text-field.opened > .details > .message {
	transform: translateY(0);
}

.text-field.value.field-error .input-slot > label {
	color: var(--error-50);
	animation: shake-value .6s cubic-bezier(.25,.8,.5,1);
}

.text-field.field-error .input-slot > label {
	color: var(--error-50);
	animation: shake-no-value .6s .15s cubic-bezier(.25,.8,.5,1);
}

.dark .text-field.value.field-error .input-slot > label {
	color: var(--error-90);
	animation: shake-value .6s cubic-bezier(.25,.8,.5,1);
}

.dark .text-field.field-error .input-slot > label {
	color: var(--error-90);
	animation: shake-no-value .6s .15s cubic-bezier(.25,.8,.5,1);
}

.text-field.solo.solo-s > .input-slot > input {
	height: 32px;
	padding: 4px 16px 6px 16px;
	font-size: 14px;
}

.text-field.solo.solo-s > .input-slot {
	height: 32px;
}

.text-field.solo.solo-s > .input-slot > label {
	top: 4px;
	font-size: 14px;
}

.text-field.solo.solo-m > .input-slot > input {
	height: 40px;
	padding: 4px 16px 6px 16px;
	font-size: 14px;
}

.text-field.solo.solo-m > .input-slot {
	height: 40px;
}

.text-field.solo.solo-m > .input-slot > label {
	top: 8px;
	font-size: 14px;
}

.text-field.solo.solo-l > .input-slot > input {
	height: 48px;
	padding: 4px 16px 6px 16px;
	font-size: 14px;
}

.text-field.solo.solo-l > .input-slot {
	height: 48px;
}

.text-field.solo.solo-l > .input-slot > label {
	top: 12px;
	font-size: 14px;
}

.text-field.solo.solo-pill > .input-slot {
	border-radius: 999px;
}

.text-field.solo.solo-pill > .input-slot > input {
	border-radius: 999px;
}

/*--------------------------------------------------------------
# FILE INPUTS
--------------------------------------------------------------*/

.file-input {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
}

.file-input > .input-slot {
	position: relative;
	border-radius: 4px 4px 0 0;
}

.file-input > .input-slot:after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	transition: .3s cubic-bezier(.25,.8,.5,1);
	width: 100%;
	background-color: currentColor;
	border-color: var(--primary-40);
	border-style: solid;
	border-width: thin 0 thin 0;
	transform: scaleX(0);
}

.file-input > .input-slot.field-details:after {
	bottom: 24px;
}

.dark .file-input > .input-slot:after {
	border-color: var(--primary-80);
}

.file-input.focus > .input-slot:after,
.file-input.opened > .input-slot:after {
	transform: scaleX(1);
}

.file-input:not(.loaded) .input-slot > label {
	display: none;
}

.file-input.loaded .input-slot > label {
	display: -webkit-box;
}

.file-input .input-slot {
	display: flex;
	background-color: var(--primary-light-opacity-05);
	cursor: text;
}

.dark .file-input .input-slot {
	background-color: var(--primary-dark-opacity-12);
	transition: background-color .175s cubic-bezier(.25,.8,.5,1);
}

.file-input > .input-slot > input {
	display: block;
	font-family: Roboto;
	height: 56px;
	width: 100%;
	padding: 24px 16px 8px 56px;
	border: none;
	border-bottom: 1px solid var(--neutral-50);
	outline: none;
	border-radius: 4px 4px 0 0;
	color: var(--neutral-20);
	background-color: transparent;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	transition: border-color .175s cubic-bezier(.25,.8,.5,1);
	opacity: 0;
	cursor: pointer;
}

.file-input > .input-slot > .display-input {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	font-family: Roboto;
	height: 56px;
	width: 100%;
	padding: 24px 16px 8px 56px;
	border: none;
	border-bottom: 1px solid var(--neutral-50);
	outline: none;
	border-radius: 4px 4px 0 0;
	color: var(--neutral-20);
	background-color: transparent;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	transition: border-color .175s cubic-bezier(.25,.8,.5,1);
	pointer-events: none;
}

.file-input > .input-slot > .display-input {
}

.file-input > .input-slot > .display-input .icon {
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	line-height: 56px;
	font-size: 24px;
}

.file-input > .input-slot > .display-input .display-input-text {
	height: 24px;
	overflow: hidden;
}

.file-input.disabled > .input-slot > input {
	border-bottom: 1px dotted var(--neutral-50) !important;
	color: var(--neutral-60) !important;
}

.file-input.select > .input-slot > input {
	cursor: pointer;
}

.file-input > .input-slot > input:hover {
	border-color: var(--neutral-10);
}

.file-input > .input-slot > input::placeholder {
	opacity: 0;
	visibility: hidden;
	transition: .3s cubic-bezier(.25,.8,.5,1);
}

.file-input.focus > .input-slot > input::placeholder,
.file-input.opened > .input-slot > input::placeholder {
	opacity: 1;
	visibility: visible;
}

.dark .file-input > .input-slot > input {
	color: var(--neutral-80);
	border-bottom: 1px solid var(--neutral-80);
}

.dark .file-input.disabled > .input-slot > input {
	border-bottom: 1px dotted var(--neutral-50);
}

.dark .file-input > .input-slot:hover,
.dark .file-input.focus > .input-slot,
.dark .file-input.opened > .input-slot {
	background-color: var(--primary-dark-opacity-16);
	border-color: var(--neutral-99);
}

.file-input.disabled > .input-slot {
	background-color: var(--neutral-light-opacity-12);
}

.dark .file-input.disabled > .input-slot {
	background-color: var(--neutral-dark-opacity-12);
}

.file-input > .input-slot  > label {
	position: absolute;
	left: 56px;
	right: 16px;
	top: 16px;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.1px;
	pointer-events: none;
	transform-origin: left top;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	transition: transform .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),-webkit-transform .15s cubic-bezier(.4,0,.2,1);
}

.file-input.focus > .input-slot  > label,
.file-input.value > .input-slot  > label,
.file-input.opened > .input-slot  > label {
	transform: translateY(-8px) scale(.75);
}

.file-input.focus > .input-slot > label,
.file-input.opened > .input-slot > label {
	color: var(--primary-40);
}

.dark .file-input.focus > .input-slot > label,
.dark .file-input.opened > .input-slot > label {
	color: var(--primary-80);
}

.file-input.disabled > .input-slot > label {
	opacity: .38;
}

/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--neutral-80);
	-webkit-box-shadow: 0 0 0px 1000px var(--primary-dark-opacity-16) inset;
	transition: background-color 5000s ease-in-out 0s;
	color: var(--neutral-80) !important;
}

.file-input > .details {
	display: flex;
    max-width: 100%;
    min-height: 16px;
    overflow: hidden;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    line-height: 16px;
}

.file-input > .details > .message {
	display: -webkit-box;
	 -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 16px;
    transform: translateY(-16px);
	transition:  transform .15s cubic-bezier(.4,0,.2,1);
}

.file-input.field-error > .details > .message {
	color: var(--error-50);
}

.dark .file-input.field-error > .details > .message {
	color: var(--error-90);
}

.file-input.disabled > .details {
	color: var(--neutral-60);
}

.file-input.field-error > .details > .message,
.file-input.persistent-message > .details > .message {
	transform: translateY(0);
}

.file-input > .details > .counter {
	white-space: nowrap;
}

.file-input.focus > .details > .message,
.file-input.opened > .details > .message {
	transform: translateY(0);
}

.file-input.value.field-error .input-slot > label {
	color: var(--error-50);
	animation: shake-value .6s cubic-bezier(.25,.8,.5,1);
}

.file-input.field-error .input-slot > label {
	color: var(--error-50);
	animation: shake-no-value .6s .15s cubic-bezier(.25,.8,.5,1);
}

.dark .file-input.value.field-error .input-slot > label {
	color: var(--error-90);
	animation: shake-value .6s cubic-bezier(.25,.8,.5,1);
}

.dark .file-input.field-error .input-slot > label {
	color: var(--error-90);
	animation: shake-no-value .6s .15s cubic-bezier(.25,.8,.5,1);
}

/*--------------------------------------------------------------
# TEXTAREAS
--------------------------------------------------------------*/

.textarea-field {
	position: relative;
	width: 100%;
	margin-bottom: 16px;
}

.textarea-field > .textarea-slot {
	position: relative;
	border-radius: 4px 4px 0 0;
}

.textarea-field > .textarea-slot:after {
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	transition: .3s cubic-bezier(.25,.8,.5,1);
	width: 100%;
	background-color: currentColor;
	border-color: var(--primary-40);
	border-style: solid;
	border-width: thin 0 thin 0;
	transform: scaleX(0);
}

.textarea-field > .textarea-slot.field-details:after {
	bottom: 24px;
}

.dark .textarea-field > .textarea-slot:after {
	border-color: var(--primary-80);
}

.textarea-field.focus > .textarea-slot:after,
.textarea-field.opened > .textarea-slot:after {
	transform: scaleX(1);
}

.textarea-field:not(.loaded) .textarea-slot > label {
	display: none;
}

.textarea-field.loaded .textarea-slot > label {
	display: -webkit-box;
}

.textarea-field .textarea-slot {
	display: flex;
	background-color: var(--primary-light-opacity-05);
	cursor: text;
}

.dark .textarea-field .textarea-slot {
	background-color: var(--primary-dark-opacity-12);
	transition: background-color .175s cubic-bezier(.25,.8,.5,1);
}

.textarea-field > .textarea-slot > textarea {
	display: block;
	font-family: Roboto;
	height: 200px;
	width: 100%;
	padding: 24px 16px 8px 16px;
	border: none;
	border-bottom: 1px solid var(--neutral-50);
	outline: none;
	border-radius: 4px 4px 0 0;
	color: var(--neutral-20);
	background-color: transparent;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	transition: border-color .175s cubic-bezier(.25,.8,.5,1);
}


.textarea-field.disabled > .textarea-slot > textarea {
	border-bottom: 1px dotted var(--neutral-50) !important;
	color: var(--neutral-60) !important;
}

.textarea-field.select > .textarea-slot > textarea {
	cursor: pointer;
}

.textarea-field > .textarea-slot > textarea:hover {
	border-color: var(--neutral-10);
}

.textarea-field > .textarea-slot > textarea::placeholder {
	opacity: 0;
	visibility: hidden;
	transition: .3s cubic-bezier(.25,.8,.5,1);
}

.textarea-field.focus > .textarea-slot > textarea::placeholder,
.textarea-field.opened > .textarea-slot > textarea::placeholder {
	opacity: 1;
	visibility: visible;
}

.dark .textarea-field > .textarea-slot > textarea {
	color: var(--neutral-80);
	border-bottom: 1px solid var(--neutral-80);
}

.dark .textarea-field.disabled > .textarea-slot > textarea {
	border-bottom: 1px dotted var(--neutral-50);
}

.dark .textarea-field > .textarea-slot:hover,
.dark .textarea-field.focus > .textarea-slot,
.dark .textarea-field.opened > .textarea-slot {
	background-color: var(--primary-dark-opacity-16);
	border-color: var(--neutral-99);
}

.textarea-field.disabled > .textarea-slot {
	background-color: var(--neutral-light-opacity-12);
}

.dark .textarea-field.disabled > .textarea-slot {
	background-color: var(--neutral-dark-opacity-12);
}

.textarea-field > .textarea-slot  > label {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 16px;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.1px;
	pointer-events: none;
	transform-origin: left top;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
	transition: transform .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1),-webkit-transform .15s cubic-bezier(.4,0,.2,1);
}

.textarea-field.focus > .textarea-slot  > label,
.textarea-field.value > .textarea-slot  > label,
.textarea-field.opened > .textarea-slot  > label {
	transform: translateY(-8px) scale(.75);
}

.textarea-field.focus > .textarea-slot > label,
.textarea-field.opened > .textarea-slot > label {
	color: var(--primary-40);
}

.dark .textarea-field.focus > .textarea-slot > label,
.dark .textarea-field.opened > .textarea-slot > label {
	color: var(--primary-80);
}

.textarea-field.disabled > .textarea-slot > label {
	opacity: .38;
}

.textarea-field > .details {
	display: flex;
    max-width: 100%;
    min-height: 16px;
    overflow: hidden;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    line-height: 16px;
}

.textarea-field > .details > .message {
	display: -webkit-box;
	 -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 16px;
    transform: translateY(-16px);
	transition:  transform .15s cubic-bezier(.4,0,.2,1);
}

.textarea-field.field-error > .details > .message {
	color: var(--error-50);
}

.dark .textarea-field.field-error > .details > .message {
	color: var(--error-90);
}

.textarea-field.disabled > .details {
	color: var(--neutral-60);
}

.textarea-field.field-error > .details > .message,
.textarea-field.persistent-message > .details > .message {
	transform: translateY(0);
}

.textarea-field > .details > .counter {
	white-space: nowrap;
}

.textarea-field.focus > .details > .message,
.textarea-field.opened > .details > .message {
	transform: translateY(0);
}

.textarea-field.value.field-error .textarea-slot > label {
	color: var(--error-50);
	animation: shake-value .6s cubic-bezier(.25,.8,.5,1);
}

.textarea-field.field-error .textarea-slot > label {
	color: var(--error-50);
	animation: shake-no-value .6s .15s cubic-bezier(.25,.8,.5,1);
}

.dark .textarea-field.value.field-error .textarea-slot > label {
	color: var(--error-90);
	animation: shake-value .6s cubic-bezier(.25,.8,.5,1);
}

.dark .textarea-field.field-error .textarea-slot > label {
	color: var(--error-90);
	animation: shake-no-value .6s .15s cubic-bezier(.25,.8,.5,1);
}

@keyframes shake-value {
	10%, 90% {
		transform: translate3d(-1px, -8px, 0) scale(.75);
	}
	20%, 80% {
		transform: translate3d(2px, -8px, 0) scale(.75);
	}
	30%, 50%, 70% {
		transform: translate3d(-4px, -8px, 0) scale(.75);
	}
	40%, 60% {
		transform: translate3d(4px, -8px, 0) scale(.75);
	}
}

@keyframes shake-no-value {
	10%, 90% {
		transform: translate3d(-1px, 0, 0) scale(1);
	}
	20%, 80% {
		transform: translate3d(2px, 0, 0) scale(1);
	}
	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0) scale(1);
	}
	40%, 60% {
		transform: translate3d(4px, 0, 0) scale(1);
	}
}

/*--------------------------------------------------------------
# LISTS
--------------------------------------------------------------*/

.list ul {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.list ul > li,
.list ul > li > a {
	display: flex;
	width: 100%;
	column-gap: 16px;
	align-items: center;
	height: 48px;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	color: currentColor;
}

.list ul > li > a {
	padding: 0 16px;
}

.list ul > li > a:hover {
	background-color: var(--primary-dark-opacity-12);
}

.list ul > li.active > a {
	color: var(--primary-90);
	background-color: var(--primary-40);
}

.dark .list ul > li.active > a {
	color: var(--primary-30);
	background-color: var(--primary-80);
}

.list.dense ul > li,
.list.dense ul > li > a {
	height: 32px;
}

/*--------------------------------------------------------------
# DRAWER
--------------------------------------------------------------*/

.nav-drawer {
	position: fixed;
	top: 0;
	left: -280px;
	bottom: 0;
	width: 280px;
	max-width: 100%;
	color: var(--neutral-10);
	background-color: var(--neutral-99);
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	padding: 24px;
	-webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
            backface-visibility: hidden;

   -webkit-perspective: 1000;
      -moz-perspective: 1000;
       -ms-perspective: 1000;
           perspective: 1000;
	-webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
         -o-transform: translateZ(0);
            transform: translateZ(0);
	transform: translateX(0);
	z-index: 10000;
	box-shadow: none;
	transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.nav-drawer-right .nav-drawer,
.nav-drawer-right-persistent .nav-drawer {
	left: initial;
	right: -280px;
	border-top-right-radius: initial;
	border-bottom-right-radius: initial;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

.nav-drawer.opened {
	box-shadow: 0 4px 4px 0 rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15) !important;
	transform: translateX(100%);
}

.nav-drawer-right .nav-drawer.opened,
.nav-drawer-right-persistent .nav-drawer.opened {
	transform: translateX(-100%);
}

.dark .nav-drawer {
	color: var(--neutral-80);
	background-color: var(--neutral-10);
}

.nav-drawer:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--primary-40);
	opacity: .14;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
}

.nav-drawer-right .nav-drawer:before,
.nav-drawer-right-persistent .nav-drawer:before {
	border-top-right-radius: initial;
	border-bottom-right-radius: initial;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
}

.dark .nav-drawer:before {
	background-color: var(--primary-80);
}

@media (min-width: 960px) {
	.nav-drawer-left-persistent .nav-drawer {
		transform: translate3d(100%, 0, 0);
		top: var(--topbar-height) !important;
		z-index: 8000;
	}

	.nav-drawer-left-persistent .nav-drawer.opened {
		box-shadow: none !important;
		transform: translateX(100%);
	}

	.nav-drawer-left-persistent .nav-drawer:before {
		opacity: 0;
	}

	.nav-drawer-right-persistent .nav-drawer {
		transform: translate3d(-100%, 0, 0);
		top: var(--topbar-height) !important;
		z-index: 8000;
	}

	.nav-drawer-right-persistent .nav-drawer.opened {
		box-shadow: none !important;
		transform: translate3d(-100%, 0, 0);
	}

	.nav-drawer-right-persistent .nav-drawer:before {
		opacity: 0;
	}
}

@media (min-width: 1264px) {
	.nav-drawer {
		left: -360px;
		width: 360px;
	}

	.nav-drawer-right .nav-drawer,
	.nav-drawer-right-persistent .nav-drawer {
		left: initial;
		right: -360px;
	}

	.nav-drawer-left-persistent .nav-drawer:before,
	.nav-drawer-right-persistent .nav-drawer:before {
		opacity: 0;
	}
}

.nav-drawer-list ul {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}

.nav-drawer-list ul li a,
.nav-drawer-list ul li button {
	display: flex;
	width: 100%;
	align-items: center;
	height: 56px;
	padding: 0 16px;
	border-radius: 999px;
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	cursor: pointer;
	border: none;
	user-select: none;
	background-color: transparent;
	color: var(--neutral-10);
	transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.dark .nav-drawer-list ul li a,
.dark .nav-drawer-list ul li button {
	color: var(--neutral-90);
}

.nav-drawer-list ul li .toggle-sublist {
	position: relative;
}

.nav-drawer-list ul li .toggle-sublist:after {
	content: "\e5cf";
	font-family: azura;
	display: block;
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
}

.nav-drawer-list ul li .toggle-sublist.expanded:after {
	content: "\e5ce";
}

.nav-drawer-list ul li a:hover,
.nav-drawer-list ul li button:hover,
.nav-drawer-list ul li .toggle-sublist.expanded {
	background-color: var(--secondary-light-opacity-12);
}

.dark .nav-drawer-list ul li a:hover,
.dark .nav-drawer-list ul li button:hover,
.nav-drawer-list ul li .toggle-sublist.expanded {
	background-color: var(--secondary-dark-opacity-12);
}

.nav-drawer-list ul li.active > a {
	color: #FFFFFF;
	background-color: var(--secondary-60);
}

.dark .nav-drawer-list ul li.active > a {
	color: var(--secondary-20);
	background-color: var(--secondary-80);
}

.nav-drawer-list ul li ul {
	display: none;
}

.nav-drawer-list ul li ul li a,
.nav-drawer-list ul li ul li button {
	height: 40px;
	font-weight: 500;
}

/*--------------------------------------------------------------
## CARDS
--------------------------------------------------------------*/

.card {
	border-radius: 12px;
	z-index: 1;
}

.card:before {
	border-radius: 12px;
}

.card.outlined {
	border: 1px solid var(--neutral-v-50);
}

/*--------------------------------------------------------------
## ROUND
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## ROUND ALL CORNERS
--------------------------------------------------------------*/

.r-0,
.r-0:before {
	border-radius: 0px !important;
}

.r-2,
.r-2:before {
	border-radius: 2px !important;
}

.r-4,
.r-4:before {
	border-radius: 4px !important;
}

.r-8,
.r-8:before {
	border-radius: 8px !important;
}

.r-12,
.r-12:before {
	border-radius: 12px !important;
}

.r-16,
.r-16:before {
	border-radius: 16px !important;
}

.r-20,
.r-20:before {
	border-radius: 20px !important;
}

.r-24,
.r-24:before {
	border-radius: 24px !important;
}

.r-28,
.r-28:before {
	border-radius: 28px !important;
}

.r-pill,
.r-pill:before {
	border-radius: 9999px !important;
}

.r-circle,
.r-circle:before {
	border-radius: 50% !important;
}

.rt-0,
.rt-0:before {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.rt-2,
.rt-2:before {
	border-top-left-radius: 2px !important;
	border-top-right-radius: 2px !important;
}

.rt-4,
.rt-4:before {
	border-top-left-radius: 4px !important;
	border-top-right-radius: 4px !important;
}

.rt-8,
.rt-8:before {
	border-top-left-radius: 8px !important;
	border-top-right-radius: 8px !important;
}

.rt-12,
.rt-12:before {
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
}

.rt-16,
.rt-16:before {
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
}

.rt-20,
.rt-20:before {
	border-top-left-radius: 20px !important;
	border-top-right-radius: 20px !important;
}

.rt-24,
.rt-24:before {
	border-top-left-radius: 24px !important;
	border-top-right-radius: 24px !important;
}

.rt-28,
.rt-28:before {
	border-top-left-radius: 28px !important;
	border-top-right-radius: 28px !important;
}

.rt-pill,
.rt-pill:before {
	border-top-left-radius: 9999px !important;
	border-top-right-radius: 9999px !important;
}

.rt-circle,
.rt-circle:before {
	border-top-left-radius: 50% !important;
	border-top-right-radius: 50% !important;
}

.rl-0,
.rl-0:before {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.rl-2,
.rl-2:before {
	border-top-left-radius: 2px !important;
	border-bottom-left-radius: 2px !important;
}

.rl-4,
.rl-4:before {
	border-top-left-radius: 4px !important;
	border-bottom-left-radius: 4px !important;
}

.rl-8,
.rl-8:before {
	border-top-left-radius: 8px !important;
	border-bottom-left-radius: 8px !important;
}

.rl-12,
.rl-12:before {
	border-top-left-radius: 12px !important;
	border-bottom-left-radius: 12px !important;
}

.rl-16,
.rl-16:before {
	border-top-left-radius: 16px !important;
	border-bottom-left-radius: 16px !important;
}

.rl-20,
.rl-20:before {
	border-top-left-radius: 20px !important;
	border-bottom-left-radius: 20px !important;
}

.rl-24,
.rl-24:before {
	border-top-left-radius: 24px !important;
	border-bottom-left-radius: 24px !important;
}

.rl-28,
.rl-28:before {
	border-top-left-radius: 28px !important;
	border-bottom-left-radius: 28px !important;
}

.rl-pill,
.rl-pill:before {
	border-top-left-radius: 9999px !important;
	border-bottom-left-radius: 9999px !important;
}

.rl-circle,
.rl-circle:before {
	border-top-left-radius: 50% !important;
	border-bottom-left-radius: 50% !important;
}

.rr-0,
.rr-0:before {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.rr-2,
.rr-2:before {
	border-top-right-radius: 2px !important;
	border-bottom-right-radius: 2px !important;
}

.rr-4,
.rr-4:before {
	border-top-right-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.rr-8,
.rr-8:before {
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.rr-12,
.rr-12:before {
	border-top-right-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.rr-16,
.rr-16:before {
	border-top-right-radius: 16px !important;
	border-bottom-right-radius: 16px !important;
}

.rr-20,
.rr-20:before {
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
}

.rr-24,
.rr-24:before {
	border-top-right-radius: 24px !important;
	border-bottom-right-radius: 24px !important;
}

.rr-28,
.rr-28:before {
	border-top-right-radius: 28px !important;
	border-bottom-right-radius: 28px !important;
}

.rr-pill,
.rr-pill:before {
	border-top-right-radius: 9999px !important;
	border-bottom-right-radius: 9999px !important;
}

.rr-circle,
.rr-circle:before {
	border-top-right-radius: 50% !important;
	border-bottom-right-radius: 50% !important;
}

.rb-0,
.rb-0:before {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.rb-2,
.rb-2:before {
	border-bottom-left-radius: 2px !important;
	border-bottom-right-radius: 2px !important;
}

.rb-4,
.rb-4:before {
	border-bottom-left-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

.rb-8,
.rb-8:before {
	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.rb-12,
.rb-12:before {
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

.rb-16,
.rb-16:before {
	border-bottom-left-radius: 16px !important;
	border-bottom-right-radius: 16px !important;
}

.rb-20,
.rb-20:before {
	border-bottom-left-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
}

.rb-24,
.rb-24:before {
	border-bottom-left-radius: 24px !important;
	border-bottom-right-radius: 24px !important;
}

.rb-28,
.rb-28:before {
	border-bottom-left-radius: 28px !important;
	border-bottom-right-radius: 28px !important;
}

.rb-pill,
.rb-pill:before {
	border-bottom-left-radius: 9999px !important;
	border-bottom-right-radius: 9999px !important;
}

.rb-circle,
.rb-circle:before {
	border-bottom-left-radius: 50% !important;
	border-bottom-right-radius: 50% !important;
}

@media (min-width: 600px) {
	.r-sm-0,
	.r-sm-0:before {
		border-radius: 0px !important;
	}

	.r-sm-2,
	.r-sm-2:before {
		border-radius: 2px !important;
	}

	.r-sm-4,
	.r-sm-4:before {
		border-radius: 4px !important;
	}

	.r-sm-8,
	.r-sm-8:before {
		border-radius: 8px !important;
	}

	.r-sm-12,
	.r-sm-12:before {
		border-radius: 12px !important;
	}

	.r-sm-16,
	.r-sm-16:before {
		border-radius: 16px !important;
	}

	.r-sm-20,
	.r-sm-20:before {
		border-radius: 20px !important;
	}

	.r-sm-24,
	.r-sm-24:before {
		border-radius: 24px !important;
	}

	.r-sm-28,
	.r-sm-28:before {
		border-radius: 28px !important;
	}

	.r-sm-pill,
	.r-sm-pill:before {
		border-radius: 9999px !important;
	}

	.r-sm-circle,
	.r-sm-circle:before {
		border-radius: 50% !important;
	}

	.rt-sm-0,
	.rt-sm-0:before {
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

	.rt-sm-2,
	.rt-sm-2:before {
		border-top-left-radius: 2px !important;
		border-top-right-radius: 2px !important;
	}

	.rt-sm-4,
	.rt-sm-4:before {
		border-top-left-radius: 4px !important;
		border-top-right-radius: 4px !important;
	}

	.rt-sm-8,
	.rt-sm-8:before {
		border-top-left-radius: 8px !important;
		border-top-right-radius: 8px !important;
	}

	.rt-sm-12,
	.rt-sm-12:before {
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
	}

	.rt-sm-16,
	.rt-sm-16:before {
		border-top-left-radius: 16px !important;
		border-top-right-radius: 16px !important;
	}

	.rt-sm-20,
	.rt-sm-20:before {
		border-top-left-radius: 20px !important;
		border-top-right-radius: 20px !important;
	}

	.rt-sm-24,
	.rt-sm-24:before {
		border-top-left-radius: 24px !important;
		border-top-right-radius: 24px !important;
	}

	.rt-sm-28,
	.rt-sm-28:before {
		border-top-left-radius: 28px !important;
		border-top-right-radius: 28px !important;
	}

	.rt-sm-pill,
	.rt-sm-pill:before {
		border-top-left-radius: 9999px !important;
		border-top-right-radius: 9999px !important;
	}

	.rt-sm-circle,
	.rt-sm-circle:before {
		border-top-left-radius: 50% !important;
		border-top-right-radius: 50% !important;
	}

	.rl-sm-0,
	.rl-sm-0:before {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}

	.rl-sm-2,
	.rl-sm-2:before {
		border-top-left-radius: 2px !important;
		border-bottom-left-radius: 2px !important;
	}

	.rl-sm-4,
	.rl-sm-4:before {
		border-top-left-radius: 4px !important;
		border-bottom-left-radius: 4px !important;
	}

	.rl-sm-8,
	.rl-sm-8:before {
		border-top-left-radius: 8px !important;
		border-bottom-left-radius: 8px !important;
	}

	.rl-sm-12,
	.rl-sm-12:before {
		border-top-left-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
	}

	.rl-sm-16,
	.rl-sm-16:before {
		border-top-left-radius: 16px !important;
		border-bottom-left-radius: 16px !important;
	}

	.rl-sm-20,
	.rl-sm-20:before {
		border-top-left-radius: 20px !important;
		border-bottom-left-radius: 20px !important;
	}

	.rl-sm-24,
	.rl-sm-24:before {
		border-top-left-radius: 24px !important;
		border-bottom-left-radius: 24px !important;
	}

	.rl-sm-28,
	.rl-sm-28:before {
		border-top-left-radius: 28px !important;
		border-bottom-left-radius: 28px !important;
	}

	.rl-sm-pill,
	.rl-sm-pill:before {
		border-top-left-radius: 9999px !important;
		border-bottom-left-radius: 9999px !important;
	}

	.rl-sm-circle,
	.rl-sm-circle:before {
		border-top-left-radius: 50% !important;
		border-bottom-left-radius: 50% !important;
	}

	.rr-sm-0,
	.rr-sm-0:before {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rr-sm-2,
	.rr-sm-2:before {
		border-top-right-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rr-sm-4,
	.rr-sm-4:before {
		border-top-right-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rr-sm-8,
	.rr-sm-8:before {
		border-top-right-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rr-sm-12,
	.rr-sm-12:before {
		border-top-right-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rr-sm-16,
	.rr-sm-16:before {
		border-top-right-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rr-sm-20,
	.rr-sm-20:before {
		border-top-right-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rr-sm-24,
	.rr-sm-24:before {
		border-top-right-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rr-sm-28,
	.rr-sm-28:before {
		border-top-right-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rr-sm-pill,
	.rr-sm-pill:before {
		border-top-right-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rr-sm-circle,
	.rr-sm-circle:before {
		border-top-right-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}

	.rb-sm-0,
	.rb-sm-0:before {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rb-sm-2,
	.rb-sm-2:before {
		border-bottom-left-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rb-sm-4,
	.rb-sm-4:before {
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rb-sm-8,
	.rb-sm-8:before {
		border-bottom-left-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rb-sm-12,
	.rb-sm-12:before {
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rb-sm-16,
	.rb-sm-16:before {
		border-bottom-left-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rb-sm-20,
	.rb-sm-20:before {
		border-bottom-left-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rb-sm-24,
	.rb-sm-24:before {
		border-bottom-left-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rb-sm-28,
	.rb-sm-28:before {
		border-bottom-left-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rb-sm-pill,
	.rb-sm-pill:before {
		border-bottom-left-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rb-sm-circle,
	.rb-sm-circle:before {
		border-bottom-left-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}
}

@media (min-width: 960px) {
	.r-md-0,
	.r-md-0:before {
		border-radius: 0px !important;
	}

	.r-md-2,
	.r-md-2:before {
		border-radius: 2px !important;
	}

	.r-md-4,
	.r-md-4:before {
		border-radius: 4px !important;
	}

	.r-md-8,
	.r-md-8:before {
		border-radius: 8px !important;
	}

	.r-md-12,
	.r-md-12:before {
		border-radius: 12px !important;
	}

	.r-md-16,
	.r-md-16:before {
		border-radius: 16px !important;
	}

	.r-md-20,
	.r-md-20:before {
		border-radius: 20px !important;
	}

	.r-md-24,
	.r-md-24:before {
		border-radius: 24px !important;
	}

	.r-md-28,
	.r-md-28:before {
		border-radius: 28px !important;
	}

	.r-md-pill,
	.r-md-pill:before {
		border-radius: 9999px !important;
	}

	.r-md-circle,
	.r-md-circle:before {
		border-radius: 50% !important;
	}

	.rt-md-0,
	.rt-md-0:before {
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

	.rt-md-2,
	.rt-md-2:before {
		border-top-left-radius: 2px !important;
		border-top-right-radius: 2px !important;
	}

	.rt-md-4,
	.rt-md-4:before {
		border-top-left-radius: 4px !important;
		border-top-right-radius: 4px !important;
	}

	.rt-md-8,
	.rt-md-8:before {
		border-top-left-radius: 8px !important;
		border-top-right-radius: 8px !important;
	}

	.rt-md-12,
	.rt-md-12:before {
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
	}

	.rt-md-16,
	.rt-md-16:before {
		border-top-left-radius: 16px !important;
		border-top-right-radius: 16px !important;
	}

	.rt-md-20,
	.rt-md-20:before {
		border-top-left-radius: 20px !important;
		border-top-right-radius: 20px !important;
	}

	.rt-md-24,
	.rt-md-24:before {
		border-top-left-radius: 24px !important;
		border-top-right-radius: 24px !important;
	}

	.rt-md-28,
	.rt-md-28:before {
		border-top-left-radius: 28px !important;
		border-top-right-radius: 28px !important;
	}

	.rt-md-pill,
	.rt-md-pill:before {
		border-top-left-radius: 9999px !important;
		border-top-right-radius: 9999px !important;
	}

	.rt-md-circle,
	.rt-md-circle:before {
		border-top-left-radius: 50% !important;
		border-top-right-radius: 50% !important;
	}

	.rl-md-0,
	.rl-md-0:before {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}

	.rl-md-2,
	.rl-md-2:before {
		border-top-left-radius: 2px !important;
		border-bottom-left-radius: 2px !important;
	}

	.rl-md-4,
	.rl-md-4:before {
		border-top-left-radius: 4px !important;
		border-bottom-left-radius: 4px !important;
	}

	.rl-md-8,
	.rl-md-8:before {
		border-top-left-radius: 8px !important;
		border-bottom-left-radius: 8px !important;
	}

	.rl-md-12,
	.rl-md-12:before {
		border-top-left-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
	}

	.rl-md-16,
	.rl-md-16:before {
		border-top-left-radius: 16px !important;
		border-bottom-left-radius: 16px !important;
	}

	.rl-md-20,
	.rl-md-20:before {
		border-top-left-radius: 20px !important;
		border-bottom-left-radius: 20px !important;
	}

	.rl-md-24,
	.rl-md-24:before {
		border-top-left-radius: 24px !important;
		border-bottom-left-radius: 24px !important;
	}

	.rl-md-28,
	.rl-md-28:before {
		border-top-left-radius: 28px !important;
		border-bottom-left-radius: 28px !important;
	}

	.rl-md-pill,
	.rl-md-pill:before {
		border-top-left-radius: 9999px !important;
		border-bottom-left-radius: 9999px !important;
	}

	.rl-md-circle,
	.rl-md-circle:before {
		border-top-left-radius: 50% !important;
		border-bottom-left-radius: 50% !important;
	}

	.rr-md-0,
	.rr-md-0:before {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rr-md-2,
	.rr-md-2:before {
		border-top-right-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rr-md-4,
	.rr-md-4:before {
		border-top-right-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rr-md-8,
	.rr-md-8:before {
		border-top-right-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rr-md-12,
	.rr-md-12:before {
		border-top-right-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rr-md-16,
	.rr-md-16:before {
		border-top-right-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rr-md-20,
	.rr-md-20:before {
		border-top-right-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rr-md-24,
	.rr-md-24:before {
		border-top-right-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rr-md-28,
	.rr-md-28:before {
		border-top-right-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rr-md-pill,
	.rr-md-pill:before {
		border-top-right-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rr-md-circle,
	.rr-md-circle:before {
		border-top-right-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}

	.rb-md-0,
	.rb-md-0:before {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rb-md-2,
	.rb-md-2:before {
		border-bottom-left-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rb-md-4,
	.rb-md-4:before {
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rb-md-8,
	.rb-md-8:before {
		border-bottom-left-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rb-md-12,
	.rb-md-12:before {
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rb-md-16,
	.rb-md-16:before {
		border-bottom-left-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rb-md-20,
	.rb-md-20:before {
		border-bottom-left-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rb-md-24,
	.rb-md-24:before {
		border-bottom-left-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rb-md-28,
	.rb-md-28:before {
		border-bottom-left-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rb-md-pill,
	.rb-md-pill:before {
		border-bottom-left-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rb-md-circle,
	.rb-md-circle:before {
		border-bottom-left-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}
}

@media (min-width: 1264px) {
	.r-lg-0,
	.r-lg-0:before {
		border-radius: 0px !important;
	}

	.r-lg-2,
	.r-lg-2:before {
		border-radius: 2px !important;
	}

	.r-lg-4,
	.r-lg-4:before {
		border-radius: 4px !important;
	}

	.r-lg-8,
	.r-lg-8:before {
		border-radius: 8px !important;
	}

	.r-lg-12,
	.r-lg-12:before {
		border-radius: 12px !important;
	}

	.r-lg-16,
	.r-lg-16:before {
		border-radius: 16px !important;
	}

	.r-lg-20,
	.r-lg-20:before {
		border-radius: 20px !important;
	}

	.r-lg-24,
	.r-lg-24:before {
		border-radius: 24px !important;
	}

	.r-lg-28,
	.r-lg-28:before {
		border-radius: 28px !important;
	}

	.r-lg-pill,
	.r-lg-pill:before {
		border-radius: 9999px !important;
	}

	.r-lg-circle,
	.r-lg-circle:before {
		border-radius: 50% !important;
	}

	.rt-lg-0,
	.rt-lg-0:before {
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

	.rt-lg-2,
	.rt-lg-2:before {
		border-top-left-radius: 2px !important;
		border-top-right-radius: 2px !important;
	}

	.rt-lg-4,
	.rt-lg-4:before {
		border-top-left-radius: 4px !important;
		border-top-right-radius: 4px !important;
	}

	.rt-lg-8,
	.rt-lg-8:before {
		border-top-left-radius: 8px !important;
		border-top-right-radius: 8px !important;
	}

	.rt-lg-12,
	.rt-lg-12:before {
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
	}

	.rt-lg-16,
	.rt-lg-16:before {
		border-top-left-radius: 16px !important;
		border-top-right-radius: 16px !important;
	}

	.rt-lg-20,
	.rt-lg-20:before {
		border-top-left-radius: 20px !important;
		border-top-right-radius: 20px !important;
	}

	.rt-lg-24,
	.rt-lg-24:before {
		border-top-left-radius: 24px !important;
		border-top-right-radius: 24px !important;
	}

	.rt-lg-28,
	.rt-lg-28:before {
		border-top-left-radius: 28px !important;
		border-top-right-radius: 28px !important;
	}

	.rt-lg-pill,
	.rt-lg-pill:before {
		border-top-left-radius: 9999px !important;
		border-top-right-radius: 9999px !important;
	}

	.rt-lg-circle,
	.rt-lg-circle:before {
		border-top-left-radius: 50% !important;
		border-top-right-radius: 50% !important;
	}

	.rl-lg-0,
	.rl-lg-0:before {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}

	.rl-lg-2,
	.rl-lg-2:before {
		border-top-left-radius: 2px !important;
		border-bottom-left-radius: 2px !important;
	}

	.rl-lg-4,
	.rl-lg-4:before {
		border-top-left-radius: 4px !important;
		border-bottom-left-radius: 4px !important;
	}

	.rl-lg-8,
	.rl-lg-8:before {
		border-top-left-radius: 8px !important;
		border-bottom-left-radius: 8px !important;
	}

	.rl-lg-12,
	.rl-lg-12:before {
		border-top-left-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
	}

	.rl-lg-16,
	.rl-lg-16:before {
		border-top-left-radius: 16px !important;
		border-bottom-left-radius: 16px !important;
	}

	.rl-lg-20,
	.rl-lg-20:before {
		border-top-left-radius: 20px !important;
		border-bottom-left-radius: 20px !important;
	}

	.rl-lg-24,
	.rl-lg-24:before {
		border-top-left-radius: 24px !important;
		border-bottom-left-radius: 24px !important;
	}

	.rl-lg-28,
	.rl-lg-28:before {
		border-top-left-radius: 28px !important;
		border-bottom-left-radius: 28px !important;
	}

	.rl-lg-pill,
	.rl-lg-pill:before {
		border-top-left-radius: 9999px !important;
		border-bottom-left-radius: 9999px !important;
	}

	.rl-lg-circle,
	.rl-lg-circle:before {
		border-top-left-radius: 50% !important;
		border-bottom-left-radius: 50% !important;
	}

	.rr-lg-0,
	.rr-lg-0:before {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rr-lg-2,
	.rr-lg-2:before {
		border-top-right-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rr-lg-4,
	.rr-lg-4:before {
		border-top-right-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rr-lg-8,
	.rr-lg-8:before {
		border-top-right-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rr-lg-12,
	.rr-lg-12:before {
		border-top-right-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rr-lg-16,
	.rr-lg-16:before {
		border-top-right-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rr-lg-20,
	.rr-lg-20:before {
		border-top-right-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rr-lg-24,
	.rr-lg-24:before {
		border-top-right-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rr-lg-28,
	.rr-lg-28:before {
		border-top-right-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rr-lg-pill,
	.rr-lg-pill:before {
		border-top-right-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rr-lg-circle,
	.rr-lg-circle:before {
		border-top-right-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}

	.rb-lg-0,
	.rb-lg-0:before {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rb-lg-2,
	.rb-lg-2:before {
		border-bottom-left-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rb-lg-4,
	.rb-lg-4:before {
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rb-lg-8,
	.rb-lg-8:before {
		border-bottom-left-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rb-lg-12,
	.rb-lg-12:before {
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rb-lg-16,
	.rb-lg-16:before {
		border-bottom-left-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rb-lg-20,
	.rb-lg-20:before {
		border-bottom-left-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rb-lg-24,
	.rb-lg-24:before {
		border-bottom-left-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rb-lg-28,
	.rb-lg-28:before {
		border-bottom-left-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rb-lg-pill,
	.rb-lg-pill:before {
		border-bottom-left-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rb-lg-circle,
	.rb-lg-circle:before {
		border-bottom-left-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}
}

@media (min-width: 1904px) {
	.r-xl-0,
	.r-xl-0:before {
		border-radius: 0px !important;
	}

	.r-xl-2,
	.r-xl-2:before {
		border-radius: 2px !important;
	}

	.r-xl-4,
	.r-xl-4:before {
		border-radius: 4px !important;
	}

	.r-xl-8,
	.r-xl-8:before {
		border-radius: 8px !important;
	}

	.r-xl-12,
	.r-xl-12:before {
		border-radius: 12px !important;
	}

	.r-xl-16,
	.r-xl-16:before {
		border-radius: 16px !important;
	}

	.r-xl-20,
	.r-xl-20:before {
		border-radius: 20px !important;
	}

	.r-xl-24,
	.r-xl-24:before {
		border-radius: 24px !important;
	}

	.r-xl-28,
	.r-xl-28:before {
		border-radius: 28px !important;
	}

	.r-xl-pill,
	.r-xl-pill:before {
		border-radius: 9999px !important;
	}

	.r-xl-circle,
	.r-xl-circle:before {
		border-radius: 50% !important;
	}

	.rt-xl-0,
	.rt-xl-0:before {
		border-top-left-radius: 0 !important;
		border-top-right-radius: 0 !important;
	}

	.rt-xl-2,
	.rt-xl-2:before {
		border-top-left-radius: 2px !important;
		border-top-right-radius: 2px !important;
	}

	.rt-xl-4,
	.rt-xl-4:before {
		border-top-left-radius: 4px !important;
		border-top-right-radius: 4px !important;
	}

	.rt-xl-8,
	.rt-xl-8:before {
		border-top-left-radius: 8px !important;
		border-top-right-radius: 8px !important;
	}

	.rt-xl-12,
	.rt-xl-12:before {
		border-top-left-radius: 12px !important;
		border-top-right-radius: 12px !important;
	}

	.rt-xl-16,
	.rt-xl-16:before {
		border-top-left-radius: 16px !important;
		border-top-right-radius: 16px !important;
	}

	.rt-xl-20,
	.rt-xl-20:before {
		border-top-left-radius: 20px !important;
		border-top-right-radius: 20px !important;
	}

	.rt-xl-24,
	.rt-xl-24:before {
		border-top-left-radius: 24px !important;
		border-top-right-radius: 24px !important;
	}

	.rt-xl-28,
	.rt-xl-28:before {
		border-top-left-radius: 28px !important;
		border-top-right-radius: 28px !important;
	}

	.rt-xl-pill,
	.rt-xl-pill:before {
		border-top-left-radius: 9999px !important;
		border-top-right-radius: 9999px !important;
	}

	.rt-xl-circle,
	.rt-xl-circle:before {
		border-top-left-radius: 50% !important;
		border-top-right-radius: 50% !important;
	}

	.rl-xl-0,
	.rl-xl-0:before {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}

	.rl-xl-2,
	.rl-xl-2:before {
		border-top-left-radius: 2px !important;
		border-bottom-left-radius: 2px !important;
	}

	.rl-xl-4,
	.rl-xl-4:before {
		border-top-left-radius: 4px !important;
		border-bottom-left-radius: 4px !important;
	}

	.rl-xl-8,
	.rl-xl-8:before {
		border-top-left-radius: 8px !important;
		border-bottom-left-radius: 8px !important;
	}

	.rl-xl-12,
	.rl-xl-12:before {
		border-top-left-radius: 12px !important;
		border-bottom-left-radius: 12px !important;
	}

	.rl-xl-16,
	.rl-xl-16:before {
		border-top-left-radius: 16px !important;
		border-bottom-left-radius: 16px !important;
	}

	.rl-xl-20,
	.rl-xl-20:before {
		border-top-left-radius: 20px !important;
		border-bottom-left-radius: 20px !important;
	}

	.rl-xl-24,
	.rl-xl-24:before {
		border-top-left-radius: 24px !important;
		border-bottom-left-radius: 24px !important;
	}

	.rl-xl-28,
	.rl-xl-28:before {
		border-top-left-radius: 28px !important;
		border-bottom-left-radius: 28px !important;
	}

	.rl-xl-pill,
	.rl-xl-pill:before {
		border-top-left-radius: 9999px !important;
		border-bottom-left-radius: 9999px !important;
	}

	.rl-xl-circle,
	.rl-xl-circle:before {
		border-top-left-radius: 50% !important;
		border-bottom-left-radius: 50% !important;
	}

	.rr-xl-0,
	.rr-xl-0:before {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rr-xl-2,
	.rr-xl-2:before {
		border-top-right-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rr-xl-4,
	.rr-xl-4:before {
		border-top-right-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rr-xl-8,
	.rr-xl-8:before {
		border-top-right-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rr-xl-12,
	.rr-xl-12:before {
		border-top-right-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rr-xl-16,
	.rr-xl-16:before {
		border-top-right-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rr-xl-20,
	.rr-xl-20:before {
		border-top-right-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rr-xl-24,
	.rr-xl-24:before {
		border-top-right-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rr-xl-28,
	.rr-xl-28:before {
		border-top-right-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rr-xl-pill,
	.rr-xl-pill:before {
		border-top-right-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rr-xl-circle,
	.rr-xl-circle:before {
		border-top-right-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}

	.rb-xl-0,
	.rb-xl-0:before {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.rb-xl-2,
	.rb-xl-2:before {
		border-bottom-left-radius: 2px !important;
		border-bottom-right-radius: 2px !important;
	}

	.rb-xl-4,
	.rb-xl-4:before {
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
	}

	.rb-xl-8,
	.rb-xl-8:before {
		border-bottom-left-radius: 8px !important;
		border-bottom-right-radius: 8px !important;
	}

	.rb-xl-12,
	.rb-xl-12:before {
		border-bottom-left-radius: 12px !important;
		border-bottom-right-radius: 12px !important;
	}

	.rb-xl-16,
	.rb-xl-16:before {
		border-bottom-left-radius: 16px !important;
		border-bottom-right-radius: 16px !important;
	}

	.rb-xl-20,
	.rb-xl-20:before {
		border-bottom-left-radius: 20px !important;
		border-bottom-right-radius: 20px !important;
	}

	.rb-xl-24,
	.rb-xl-24:before {
		border-bottom-left-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.rb-xl-28,
	.rb-xl-28:before {
		border-bottom-left-radius: 28px !important;
		border-bottom-right-radius: 28px !important;
	}

	.rb-xl-pill,
	.rb-xl-pill:before {
		border-bottom-left-radius: 9999px !important;
		border-bottom-right-radius: 9999px !important;
	}

	.rb-xl-circle,
	.rb-xl-circle:before {
		border-bottom-left-radius: 50% !important;
		border-bottom-right-radius: 50% !important;
	}
}

/*--------------------------------------------------------------
### Margin
--------------------------------------------------------------*/

.m-auto {
	margin: auto !important;
}

.m-0 {
	margin: 0 !important;
}

.m-4 {
	margin: 4px !important;
}

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

.m-16 {
	margin: 16px !important;
}

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

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

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

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

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

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

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

.ml-16 {
	margin-left: 16px !important;
}

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

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

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

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

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

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

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

.mr-16 {
	margin-right: 16px !important;
}

.mr-24 {
	margin-right: 24px !important;
}

.mr-40 {
	margin-right: 40px !important;
}

.mr-80 {
	margin-right: 80px !important;
}

.mt-auto {
	margin-top: auto !important;
}

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

.mt-4 {
	margin-top: 4px !important;
}

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

.mt-16 {
	margin-top: 16px !important;
}

.mt-24 {
	margin-top: 24px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mb-auto {
	margin-bottom: auto !important;
}

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

.mb-4 {
	margin-bottom: 4px !important;
}

.mb-8 {
	margin-bottom: 8px !important;
}

.mb-16 {
	margin-bottom: 16px !important;
}

.mb-24 {
	margin-bottom: 24px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-80 {
	margin-bottom: 80px !important;
}

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

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

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

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

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

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

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

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

.my-auto {
	margin-top: auto !important;
	margin-bottom: auto !important;
}

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

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

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

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

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

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

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

@media (min-width: 600px) {
	.m-sm-0 {
		margin: 0 !important;
	}

	.m-sm-4 {
		margin: 4px !important;
	}

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

	.m-sm-16 {
		margin: 16px !important;
	}

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

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

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

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

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

	.ml-sm-16 {
		margin-left: 16px !important;
	}

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

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

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

	.mr-sm-0 {
		margin-right: 0 !important;
	}

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

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

	.mr-sm-16 {
		margin-right: 16px !important;
	}

	.mr-sm-24 {
		margin-right: 24px !important;
	}

	.mr-sm-40 {
		margin-right: 40px !important;
	}

	.mr-sm-80 {
		margin-right: 80px !important;
	}

	.mt-sm-0 {
		margin-top: 0 !important;
	}

	.mt-sm-4 {
		margin-top: 4px !important;
	}

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

	.mt-sm-16 {
		margin-top: 16px !important;
	}

	.mt-sm-24 {
		margin-top: 24px !important;
	}

	.mt-sm-40 {
		margin-top: 40px !important;
	}

	.mt-sm-80 {
		margin-top: 80px !important;
	}

	.mb-sm-0 {
		margin-bottom: 0 !important;
	}

	.mb-sm-4 {
		margin-bottom: 4px !important;
	}

	.mb-sm-8 {
		margin-bottom: 8px !important;
	}

	.mb-sm-16 {
		margin-bottom: 16px !important;
	}

	.mb-sm-24 {
		margin-bottom: 24px !important;
	}

	.mb-sm-40 {
		margin-bottom: 40px !important;
	}

	.mb-sm-80 {
		margin-bottom: 80px !important;
	}

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

	.mx-sm-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mx-sm-4 {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	.mx-sm-8 {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.mx-sm-16 {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.mx-sm-24 {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

	.mx-sm-40 {
		margin-left: 40px !important;
		margin-right: 40px !important;
	}

	.mx-sm-80 {
		margin-left: 80px !important;
		margin-right: 80px !important;
	}

	.my-sm-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-sm-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-sm-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-sm-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-sm-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-sm-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-sm-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-sm-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

@media (min-width: 960px) {
	.m-md-0 {
		margin: 0 !important;
	}

	.m-md-4 {
		margin: 4px !important;
	}

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

	.m-md-16 {
		margin: 16px !important;
	}

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

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

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

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

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

	.ml-md-16 {
		margin-left: 16px !important;
	}

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

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

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

	.mr-md-0 {
		margin-right: 0 !important;
	}

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

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

	.mr-md-16 {
		margin-right: 16px !important;
	}

	.mr-md-24 {
		margin-right: 24px !important;
	}

	.mr-md-40 {
		margin-right: 40px !important;
	}

	.mr-md-80 {
		margin-right: 80px !important;
	}

	.mt-md-0 {
		margin-top: 0 !important;
	}

	.mt-md-4 {
		margin-top: 4px !important;
	}

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

	.mt-md-16 {
		margin-top: 16px !important;
	}

	.mt-md-24 {
		margin-top: 24px !important;
	}

	.mt-md-40 {
		margin-top: 40px !important;
	}

	.mt-md-80 {
		margin-top: 80px !important;
	}

	.mb-md-0 {
		margin-bottom: 0 !important;
	}

	.mb-md-4 {
		margin-bottom: 4px !important;
	}

	.mb-md-8 {
		margin-bottom: 8px !important;
	}

	.mb-md-16 {
		margin-bottom: 16px !important;
	}

	.mb-md-24 {
		margin-bottom: 24px !important;
	}

	.mb-md-40 {
		margin-bottom: 40px !important;
	}

	.mb-md-80 {
		margin-bottom: 80px !important;
	}

	.mx-md-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mx-md-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mx-md-4 {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	.mx-md-8 {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.mx-md-16 {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.mx-md-24 {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

	.mx-md-40 {
		margin-left: 40px !important;
		margin-right: 40px !important;
	}

	.mx-md-80 {
		margin-left: 80px !important;
		margin-right: 80px !important;
	}

	.my-md-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-md-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-md-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-md-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-md-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-md-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-md-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-md-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

@media (min-width: 1264px) {
	.m-lg-0 {
		margin: 0 !important;
	}

	.m-lg-4 {
		margin: 4px !important;
	}

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

	.m-lg-16 {
		margin: 16px !important;
	}

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

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

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

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

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

	.ml-lg-16 {
		margin-left: 16px !important;
	}

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

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

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

	.mr-lg-0 {
		margin-right: 0 !important;
	}

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

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

	.mr-lg-16 {
		margin-right: 16px !important;
	}

	.mr-lg-24 {
		margin-right: 24px !important;
	}

	.mr-lg-40 {
		margin-right: 40px !important;
	}

	.mr-lg-80 {
		margin-right: 80px !important;
	}

	.mt-lg-0 {
		margin-top: 0 !important;
	}

	.mt-lg-4 {
		margin-top: 4px !important;
	}

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

	.mt-lg-16 {
		margin-top: 16px !important;
	}

	.mt-lg-24 {
		margin-top: 24px !important;
	}

	.mt-lg-40 {
		margin-top: 40px !important;
	}

	.mt-lg-80 {
		margin-top: 80px !important;
	}

	.mb-lg-0 {
		margin-bottom: 0 !important;
	}

	.mb-lg-4 {
		margin-bottom: 4px !important;
	}

	.mb-lg-8 {
		margin-bottom: 8px !important;
	}

	.mb-lg-16 {
		margin-bottom: 16px !important;
	}

	.mb-lg-24 {
		margin-bottom: 24px !important;
	}

	.mb-lg-40 {
		margin-bottom: 40px !important;
	}

	.mb-lg-80 {
		margin-bottom: 80px !important;
	}

	.mx-lg-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mx-lg-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mx-lg-4 {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	.mx-lg-8 {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.mx-lg-16 {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.mx-lg-24 {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

	.mx-lg-40 {
		margin-left: 40px !important;
		margin-right: 40px !important;
	}

	.mx-lg-80 {
		margin-left: 80px !important;
		margin-right: 80px !important;
	}

	.my-lg-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-lg-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-lg-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-lg-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-lg-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-lg-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-lg-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-lg-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

@media (min-width: 1904px) {
	.m-xl-0 {
		margin: 0 !important;
	}

	.m-xl-4 {
		margin: 4px !important;
	}

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

	.m-xl-16 {
		margin: 16px !important;
	}

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

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

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

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

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

	.ml-xl-16 {
		margin-left: 16px !important;
	}

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

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

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

	.mr-xl-0 {
		margin-right: 0 !important;
	}

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

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

	.mr-xl-16 {
		margin-right: 16px !important;
	}

	.mr-xl-24 {
		margin-right: 24px !important;
	}

	.mr-xl-40 {
		margin-right: 40px !important;
	}

	.mr-xl-80 {
		margin-right: 80px !important;
	}

	.mt-xl-0 {
		margin-top: 0 !important;
	}

	.mt-xl-4 {
		margin-top: 4px !important;
	}

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

	.mt-xl-16 {
		margin-top: 16px !important;
	}

	.mt-xl-24 {
		margin-top: 24px !important;
	}

	.mt-xl-40 {
		margin-top: 40px !important;
	}

	.mt-xl-80 {
		margin-top: 80px !important;
	}

	.mb-xl-0 {
		margin-bottom: 0 !important;
	}

	.mb-xl-4 {
		margin-bottom: 4px !important;
	}

	.mb-xl-8 {
		margin-bottom: 8px !important;
	}

	.mb-xl-16 {
		margin-bottom: 16px !important;
	}

	.mb-xl-24 {
		margin-bottom: 24px !important;
	}

	.mb-xl-40 {
		margin-bottom: 40px !important;
	}

	.mb-xl-80 {
		margin-bottom: 80px !important;
	}

	.mx-xl-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mx-xl-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mx-xl-4 {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	.mx-xl-8 {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.mx-xl-16 {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.mx-xl-24 {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

	.mx-xl-40 {
		margin-left: 40px !important;
		margin-right: 40px !important;
	}

	.mx-xl-80 {
		margin-left: 80px !important;
		margin-right: 80px !important;
	}

	.my-xl-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-xl-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-xl-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-xl-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-xl-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-xl-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-xl-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-xl-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

/*--------------------------------------------------------------
### Padding
--------------------------------------------------------------*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pr-4 {
	padding-right: 4px !important;
}

.pr-8 {
	padding-right: 8px !important;
}

.pr-16 {
	padding-right: 16px !important;
}

.pr-24 {
	padding-right: 24px !important;
}

.pr-40 {
	padding-right: 40px !important;
}

.pr-80 {
	padding-right: 80px !important;
}

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

.pt-4 {
	padding-top: 4px !important;
}

.pt-8 {
	padding-top: 8px !important;
}

.pt-16 {
	padding-top: 16px !important;
}

.pt-24 {
	padding-top: 24px !important;
}

.pt-40 {
	padding-top: 40px !important;
}

.pt-64 {
	padding-top: 64px !important;
}

.pt-80 {
	padding-top: 80px !important;
}

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

.pb-4 {
	padding-bottom: 4px !important;
}

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

.pb-16 {
	padding-bottom: 16px !important;
}

.pb-24 {
	padding-bottom: 24px !important;
}

.pb-40 {
	padding-bottom: 40px !important;
}

.pb-80 {
	padding-bottom: 80px !important;
}

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

.px-4 {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.px-8 {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

.px-16 {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

.px-24 {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.px-40 {
	padding-left: 40px !important;
	padding-right: 40px !important;
}

.px-80 {
	padding-left: 80px !important;
	padding-right: 80px !important;
}

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

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

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

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

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

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

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

@media (min-width: 600px) {
	.p-sm-0 {
		padding: 0 !important;
	}

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

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

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

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

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

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

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

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

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

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

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

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

	.pr-sm-0 {
		padding-right: 0 !important;
	}

	.pr-sm-4 {
		padding-right: 4px !important;
	}

	.pr-sm-8 {
		padding-right: 8px !important;
	}

	.pr-sm-16 {
		padding-right: 16px !important;
	}

	.pr-sm-24 {
		padding-right: 24px !important;
	}

	.pr-sm-40 {
		padding-right: 40px !important;
	}

	.pr-sm-80 {
		padding-right: 80px !important;
	}

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

	.pt-sm-4 {
		padding-top: 4px !important;
	}

	.pt-sm-8 {
		padding-top: 8px !important;
	}

	.pt-sm-16 {
		padding-top: 16px !important;
	}

	.pt-sm-24 {
		padding-top: 24px !important;
	}

	.pt-sm-40 {
		padding-top: 40px !important;
	}

	.pt-sm-80 {
		padding-top: 80px !important;
	}

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

	.pb-sm-4 {
		padding-bottom: 4px !important;
	}

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

	.pb-sm-16 {
		padding-bottom: 16px !important;
	}

	.pb-sm-24 {
		padding-bottom: 24px !important;
	}

	.pb-sm-40 {
		padding-bottom: 40px !important;
	}

	.pb-sm-80 {
		padding-bottom: 80px !important;
	}

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

	.px-sm-4 {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.px-sm-8 {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.px-sm-16 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.px-sm-24 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.px-sm-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.px-sm-80 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}

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

	.py-sm-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-sm-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-sm-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-sm-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-sm-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-sm-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

@media (min-width: 960px) {
	.p-md-0 {
		padding: 0 !important;
	}

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

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

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

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

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

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

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

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

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

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

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

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

	.pr-md-0 {
		padding-right: 0 !important;
	}

	.pr-md-4 {
		padding-right: 4px !important;
	}

	.pr-md-8 {
		padding-right: 8px !important;
	}

	.pr-md-16 {
		padding-right: 16px !important;
	}

	.pr-md-24 {
		padding-right: 24px !important;
	}

	.pr-md-40 {
		padding-right: 40px !important;
	}

	.pr-md-80 {
		padding-right: 80px !important;
	}

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

	.pt-md-4 {
		padding-top: 4px !important;
	}

	.pt-md-8 {
		padding-top: 8px !important;
	}

	.pt-md-16 {
		padding-top: 16px !important;
	}

	.pt-md-24 {
		padding-top: 24px !important;
	}

	.pt-md-40 {
		padding-top: 40px !important;
	}

	.pt-md-80 {
		padding-top: 80px !important;
	}

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

	.pb-md-4 {
		padding-bottom: 4px !important;
	}

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

	.pb-md-16 {
		padding-bottom: 16px !important;
	}

	.pb-md-24 {
		padding-bottom: 24px !important;
	}

	.pb-md-40 {
		padding-bottom: 40px !important;
	}

	.pb-md-80 {
		padding-bottom: 80px !important;
	}

	.px-md-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.px-md-4 {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.px-md-8 {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.px-md-16 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.px-md-24 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.px-md-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.px-md-80 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}

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

	.py-md-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-md-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-md-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-md-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-md-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-md-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-0 {
		padding: 0 !important;
	}

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

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

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

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

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

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

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

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

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

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

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

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

	.pr-lg-0 {
		padding-right: 0 !important;
	}

	.pr-lg-4 {
		padding-right: 4px !important;
	}

	.pr-lg-8 {
		padding-right: 8px !important;
	}

	.pr-lg-16 {
		padding-right: 16px !important;
	}

	.pr-lg-24 {
		padding-right: 24px !important;
	}

	.pr-lg-40 {
		padding-right: 40px !important;
	}

	.pr-lg-80 {
		padding-right: 80px !important;
	}

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

	.pt-lg-4 {
		padding-top: 4px !important;
	}

	.pt-lg-8 {
		padding-top: 8px !important;
	}

	.pt-lg-16 {
		padding-top: 16px !important;
	}

	.pt-lg-24 {
		padding-top: 24px !important;
	}

	.pt-lg-40 {
		padding-top: 40px !important;
	}

	.pt-lg-80 {
		padding-top: 80px !important;
	}

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

	.pb-lg-4 {
		padding-bottom: 4px !important;
	}

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

	.pb-lg-16 {
		padding-bottom: 16px !important;
	}

	.pb-lg-24 {
		padding-bottom: 24px !important;
	}

	.pb-lg-40 {
		padding-bottom: 40px !important;
	}

	.pb-lg-80 {
		padding-bottom: 80px !important;
	}

	.px-lg-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.px-lg-4 {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.px-lg-8 {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.px-lg-16 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.px-lg-24 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.px-lg-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.px-lg-80 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}

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

	.py-lg-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-lg-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-lg-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-lg-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-lg-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-lg-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-0 {
		padding: 0 !important;
	}

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

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

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

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

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

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

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

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

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

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

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

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

	.pr-xl-0 {
		padding-right: 0 !important;
	}

	.pr-xl-4 {
		padding-right: 4px !important;
	}

	.pr-xl-8 {
		padding-right: 8px !important;
	}

	.pr-xl-16 {
		padding-right: 16px !important;
	}

	.pr-xl-24 {
		padding-right: 24px !important;
	}

	.pr-xl-40 {
		padding-right: 40px !important;
	}

	.pr-xl-80 {
		padding-right: 80px !important;
	}

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

	.pt-xl-4 {
		padding-top: 4px !important;
	}

	.pt-xl-8 {
		padding-top: 8px !important;
	}

	.pt-xl-16 {
		padding-top: 16px !important;
	}

	.pt-xl-24 {
		padding-top: 24px !important;
	}

	.pt-xl-40 {
		padding-top: 40px !important;
	}

	.pt-xl-80 {
		padding-top: 80px !important;
	}

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

	.pb-xl-4 {
		padding-bottom: 4px !important;
	}

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

	.pb-xl-16 {
		padding-bottom: 16px !important;
	}

	.pb-xl-24 {
		padding-bottom: 24px !important;
	}

	.pb-xl-40 {
		padding-bottom: 40px !important;
	}

	.pb-xl-80 {
		padding-bottom: 80px !important;
	}

	.px-xl-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.px-xl-4 {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.px-xl-8 {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.px-xl-16 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.px-xl-24 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.px-xl-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.px-xl-80 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}

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

	.py-xl-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-xl-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-xl-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-xl-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-xl-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-xl-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

/*--------------------------------------------------------------
# DISPLAY
--------------------------------------------------------------*/

.d-none {
	display: none !important;
}

@media (min-width: 600px) {
	.d-sm-none {
		display: none !important;
	}
}

@media (min-width: 960px) {
	.d-md-none {
		display: none !important;
	}
}

@media (min-width: 1264px) {
	.d-lg-none {
		display: none !important;
	}
}

@media (min-width: 1904px) {
	.d-xl-none {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# FLEX
--------------------------------------------------------------*/

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

.d-inline-flex {
	display: inline-flex !important;
}

.spacer {
	width: 99%;
}

@media (min-width: 600px) {
	.d-sm-flex {
		display: flex !important;
	}

	.d-sm-inline-flex {
		display: inline-flex !important;
	}
}

@media (min-width: 960px) {
	.d-md-flex {
		display: flex !important;
	}

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

@media (min-width: 1264px) {
	.d-lg-flex {
		display: flex !important;
	}

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

@media (min-width: 1904px) {
	.d-xl-flex {
		display: flex !important;
	}

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

/*--------------------------------------------------------------
## FLEX DIRECTION
--------------------------------------------------------------*/

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

.flex-row-reverse {
	flex-direction: row-reverse !important;
}

.flex-column {
	flex-direction: column !important;
}

.flex-column-reverse {
	flex-direction: column-reverse !important;
}

@media (min-width: 600px) {
	.flex-sm-row {
		flex-direction: row !important;
	}

	.flex-sm-row-reverse {
		flex-direction: row-reverse !important;
	}

	.flex-sm-column {
		flex-direction: column !important;
	}

	.flex-sm-column-reverse {
		flex-direction: column-reverse !important;
	}
}

@media (min-width: 960px) {
	.flex-md-row {
		flex-direction: row !important;
	}

	.flex-md-row-reverse {
		flex-direction: row-reverse !important;
	}

	.flex-md-column {
		flex-direction: column !important;
	}

	.flex-md-column-reverse {
		flex-direction: column-reverse !important;
	}
}

@media (min-width: 1264px) {
	.flex-lg-row {
		flex-direction: row !important;
	}

	.flex-lg-row-reverse {
		flex-direction: row-reverse !important;
	}

	.flex-lg-column {
		flex-direction: column !important;
	}

	.flex-lg-column-reverse {
		flex-direction: column-reverse !important;
	}
}

@media (min-width: 1904px) {
	.flex-xl-row {
		flex-direction: row !important;
	}

	.flex-xl-row-reverse {
		flex-direction: row-reverse !important;
	}

	.flex-xl-column {
		flex-direction: column !important;
	}

	.flex-xl-column-reverse {
		flex-direction: column-reverse !important;
	}
}

/*--------------------------------------------------------------
## FLEX JUSTIFY
--------------------------------------------------------------*/

.justify-start {
	justify-content: start !important;
}

.justify-end {
	justify-content: end !important;
}

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

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

.justify-space-around {
	justify-content: space-around !important;
}

@media (min-width: 600px) {
	.justify-sm-start {
		justify-content: start !important;
	}

	.justify-sm-end {
		justify-content: end !important;
	}

	.justify-sm-center {
		justify-content: center !important;
	}

	.justify-sm-space-between {
		justify-content: space-between !important;
	}

	.justify-sm-space-around {
		justify-content: space-around !important;
	}
}

@media (min-width: 960px) {
	.justify-md-start {
		justify-content: start !important;
	}

	.justify-md-end {
		justify-content: end !important;
	}

	.justify-md-center {
		justify-content: center !important;
	}

	.justify-md-space-between {
		justify-content: space-between !important;
	}

	.justify-md-space-around {
		justify-content: space-around !important;
	}
}

@media (min-width: 1264px) {
	.justify-lg-start {
		justify-content: start !important;
	}

	.justify-lg-end {
		justify-content: end !important;
	}

	.justify-lg-center {
		justify-content: center !important;
	}

	.justify-lg-space-between {
		justify-content: space-between !important;
	}

	.justify-lg-space-around {
		justify-content: space-around !important;
	}
}

@media (min-width: 1904px) {
	.justify-xl-start {
		justify-content: start !important;
	}

	.justify-xl-end {
		justify-content: end !important;
	}

	.justify-xl-center {
		justify-content: center !important;
	}

	.justify-xl-space-between {
		justify-content: space-between !important;
	}

	.justify-xl-space-around {
		justify-content: space-around !important;
	}
}

/*--------------------------------------------------------------
## FLEX ALIGN
--------------------------------------------------------------*/

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

.align-end {
	align-items: end !important;
}

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

.align-stretch {
	align-items: stretch !important;
}

@media (min-width: 600px) {
	.align-sm-start {
		align-items: start !important;
	}

	.align-sm-end {
		align-items: end !important;
	}

	.align-sm-center {
		align-items: center !important;
	}

	.align-sm-stretch {
		align-items: stretch !important;
	}
}

@media (min-width: 960px) {
	.align-md-start {
		align-items: start !important;
	}

	.align-md-end {
		align-items: end !important;
	}

	.align-md-center {
		align-items: center !important;
	}

	.align-md-stretch {
		align-items: stretch !important;
	}
}

@media (min-width: 1264px) {
	.align-lg-start {
		align-items: start !important;
	}

	.align-lg-end {
		align-items: end !important;
	}

	.align-lg-center {
		align-items: center !important;
	}

	.align-lg-stretch {
		align-items: stretch !important;
	}
}

@media (min-width: 1904px) {
	.align-xl-start {
		align-items: start !important;
	}

	.align-xl-end {
		align-items: end !important;
	}

	.align-xl-center {
		align-items: center !important;
	}

	.align-xl-stretch {
		align-items: stretch !important;
	}
}

/*--------------------------------------------------------------
## FLEX ALIGN SELF
--------------------------------------------------------------*/

.align-self-start {
	align-self: start !important;
}

.align-self-end {
	align-self: end !important;
}

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

.align-self-auto {
	align-self: auto !important;
}

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

@media (min-width: 600px) {
	.align-sm-self-start {
		align-self: start !important;
	}

	.align-sm-self-end {
		align-self: end !important;
	}

	.align-sm-self-center {
		align-self: center !important;
	}

	.align-sm-self-auto {
		align-self: auto !important;
	}

	.align-sm-self-stretch {
		align-self: stretch !important;
	}
}

@media (min-width: 960px) {
	.align-md-self-start {
		align-self: start !important;
	}

	.align-md-self-end {
		align-self: end !important;
	}

	.align-md-self-center {
		align-self: center !important;
	}

	.align-md-self-auto {
		align-self: auto !important;
	}

	.align-md-self-stretch {
		align-self: stretch !important;
	}
}

@media (min-width: 1264px) {
	.align-lg-self-start {
		align-self: start !important;
	}

	.align-lg-self-end {
		align-self: end !important;
	}

	.align-lg-self-center {
		align-self: center !important;
	}

	.align-lg-self-auto {
		align-self: auto !important;
	}

	.align-lg-self-stretch {
		align-self: stretch !important;
	}
}

@media (min-width: 1904px) {
	.align-xl-self-start {
		align-self: start !important;
	}

	.align-xl-self-end {
		align-self: end !important;
	}

	.align-xl-self-center {
		align-self: center !important;
	}

	.align-xl-self-auto {
		align-self: auto !important;
	}

	.align-xl-self-stretch {
		align-self: stretch !important;
	}
}

/*--------------------------------------------------------------
## FLEX WRAP
--------------------------------------------------------------*/

.flex-nowrap {
	flex-wrap: nowrap !important;
}

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

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

@media (min-width: 600px) {
	.flex-sm-nowrap {
		flex-wrap: nowrap !important;
	}

	.flex-sm-wrap {
		flex-wrap: wrap !important;
	}

	.flex-sm-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

@media (min-width: 960px) {
	.flex-md-nowrap {
		flex-wrap: nowrap !important;
	}

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

	.flex-md-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

@media (min-width: 1264px) {
	.flex-lg-nowrap {
		flex-wrap: nowrap !important;
	}

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

	.flex-lg-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

@media (min-width: 1904px) {
	.flex-xl-nowrap {
		flex-wrap: nowrap !important;
	}

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

	.flex-xl-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

/*--------------------------------------------------------------
## FLEX ORDER
--------------------------------------------------------------*/

.order-first {
	order: -1 !important;
}

.order-0 {
	order: 0 !important;
}

.order-1 {
	order: 1 !important;
}

.order-2 {
	order: 2 !important;
}

.order-3 {
	order: 3 !important;
}

.order-4 {
	order: 4 !important;
}

.order-5 {
	order: 5 !important;
}

.order-6 {
	order: 6 !important;
}

.order-7 {
	order: 7 !important;
}

.order-8 {
	order: 8 !important;
}

.order-9 {
	order: 9 !important;
}

.order-10 {
	order: 10 !important;
}

.order-11 {
	order: 11 !important;
}

.order-12 {
	order: 12 !important;
}

.order-last {
	order: 999 !important;
}

@media (min-width: 600px) {
	.order-sm-first {
		order: -1 !important;
	}

	.order-sm-0 {
		order: 0 !important;
	}

	.order-sm-1 {
		order: 1 !important;
	}

	.order-sm-2 {
		order: 2 !important;
	}

	.order-sm-3 {
		order: 3 !important;
	}

	.order-sm-4 {
		order: 4 !important;
	}

	.order-sm-5 {
		order: 5 !important;
	}

	.order-sm-6 {
		order: 6 !important;
	}

	.order-sm-7 {
		order: 7 !important;
	}

	.order-sm-8 {
		order: 8 !important;
	}

	.order-sm-9 {
		order: 9 !important;
	}

	.order-sm-10 {
		order: 10 !important;
	}

	.order-sm-11 {
		order: 11 !important;
	}

	.order-sm-12 {
		order: 12 !important;
	}

	.order-sm-last {
		order: 999 !important;
	}
}

@media (min-width: 960px) {
	.order-md-first {
		order: -1 !important;
	}

	.order-md-0 {
		order: 0 !important;
	}

	.order-md-1 {
		order: 1 !important;
	}

	.order-md-2 {
		order: 2 !important;
	}

	.order-md-3 {
		order: 3 !important;
	}

	.order-md-4 {
		order: 4 !important;
	}

	.order-md-5 {
		order: 5 !important;
	}

	.order-md-6 {
		order: 6 !important;
	}

	.order-md-7 {
		order: 7 !important;
	}

	.order-md-8 {
		order: 8 !important;
	}

	.order-md-9 {
		order: 9 !important;
	}

	.order-md-10 {
		order: 10 !important;
	}

	.order-md-11 {
		order: 11 !important;
	}

	.order-md-12 {
		order: 12 !important;
	}

	.order-md-last {
		order: 999 !important;
	}
}

@media (min-width: 1264px) {
	.order-lg-first {
		order: -1 !important;
	}

	.order-lg-0 {
		order: 0 !important;
	}

	.order-lg-1 {
		order: 1 !important;
	}

	.order-lg-2 {
		order: 2 !important;
	}

	.order-lg-3 {
		order: 3 !important;
	}

	.order-lg-4 {
		order: 4 !important;
	}

	.order-lg-5 {
		order: 5 !important;
	}

	.order-lg-6 {
		order: 6 !important;
	}

	.order-lg-7 {
		order: 7 !important;
	}

	.order-lg-8 {
		order: 8 !important;
	}

	.order-lg-9 {
		order: 9 !important;
	}

	.order-lg-10 {
		order: 10 !important;
	}

	.order-lg-11 {
		order: 11 !important;
	}

	.order-lg-12 {
		order: 12 !important;
	}

	.order-lg-last {
		order: 999 !important;
	}
}

@media (min-width: 1904px) {
	.order-xl-first {
		order: -1 !important;
	}

	.order-xl-0 {
		order: 0 !important;
	}

	.order-xl-1 {
		order: 1 !important;
	}

	.order-xl-2 {
		order: 2 !important;
	}

	.order-xl-3 {
		order: 3 !important;
	}

	.order-xl-4 {
		order: 4 !important;
	}

	.order-xl-5 {
		order: 5 !important;
	}

	.order-xl-6 {
		order: 6 !important;
	}

	.order-xl-7 {
		order: 7 !important;
	}

	.order-xl-8 {
		order: 8 !important;
	}

	.order-xl-9 {
		order: 9 !important;
	}

	.order-xl-10 {
		order: 10 !important;
	}

	.order-xl-11 {
		order: 11 !important;
	}

	.order-xl-12 {
		order: 12 !important;
	}

	.order-xl-last {
		order: 999 !important;
	}
}

/*--------------------------------------------------------------
## FLEX GROW AND SHRINK
--------------------------------------------------------------*/

.flex-grow-0 {
	flex-grow: 0 !important;
}

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

.flex-shrink-0 {
	flex-shrink: 0 !important;
}

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

@media (min-width: 600px) {
	.flex-sm-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-sm-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-sm-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-sm-shrink-1 {
		flex-shrink: 1 !important;
	}
}

@media (min-width: 960px) {
	.flex-md-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-md-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-md-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-md-shrink-1 {
		flex-shrink: 1 !important;
	}
}

@media (min-width: 1264px) {
	.flex-lg-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-lg-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-lg-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-lg-shrink-1 {
		flex-shrink: 1 !important;
	}
}

@media (min-width: 1904px) {
	.flex-xl-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-xl-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-xl-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-xl-shrink-1 {
		flex-shrink: 1 !important;
	}
}

/*--------------------------------------------------------------
## FLEX GAP
--------------------------------------------------------------*/

.gap-0 {
	gap: 0 !important;
}

.gap-4 {
	gap: 4px !important;
}

.gap-8 {
	gap: 8px !important;
}

.gap-16 {
	gap: 16px !important;
}

/*--------------------------------------------------------------
# ICONS
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# ICONS
--------------------------------------------------------------*/

.icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	font-size: 20px;
	align-items: center;
	justify-content: center;
}

.icon-xs {
	width: 12px;
	height: 12px;
	font-size: 12px;
}

.icon-sm {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.icon-md {
	width: 24px;
	height: 24px;
	font-size: 20px;
}

.icon-lg {
	width: 32px;
	height: 32px;
	font-size: 28px;
}

.icon-xl {
	width: 48px;
	height: 48px;
	font-size: 36px;
}

.icon-arrow-drop-down:before {
	content: "\e5c5";
}

.icon-download:before {
	content: "\f090";
}

.icon-expand-less:before {
	content: "\e5ce";
}

.icon-next:before {
	content: "\e409";
}

.icon-prev:before {
	content: "\e408";
}

.icon-expand-more:before {
	content: "\e5cf";
}

.icon-checkbox-unchecked:before {
	content: "\e835";
}

.icon-checkbox-checked:before {
	content: "\e834";
}

.icon-radio-checked:before {
	content: "\e837";
}

.icon-radio-unchecked:before {
	content: "\e836";
}

.icon-create:before {
	content: "\e3c9";
}

.icon-close:before {
	content: "\e5cd";
}

.icon-search:before {
	content: "\e8b6";
}

.icon-menu:before {
	content: "\e5d2";
}

.icon-light-mode:before {
	content: "\e518";
}

.icon-dark-mode:before {
	content: "\e51c";
}

.icon-attach-file:before {
	content: "\e226";
}

.icon-dot:before {
	content: "\e061";
}


/*--------------------------------------------------------------
# RIPPLES
--------------------------------------------------------------*/

.ripple {
	position: relative;
	overflow: hidden;
}

.ripple .ripple-item {
	position: absolute;
	background: currentColor;
	border-radius: 50%;
	width: 8px;
	height: 8px;
	animation: rippleEffect .4s 1 cubic-bezier(0.55, 0.085, 0.68, 0.53);
	animation-fill-mode: forwards;
	opacity: 0.12;
	pointer-events: none;
	z-index: -1;
	transition: opacity .125s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

.ripple .ripple-item.out {
	transition: opacity .400s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	opacity: 0;
}

.ripple .ripple-item.remove {
	transition: opacity .125s cubic-bezier(0.55, 0.085, 0.68, 0.53);
	opacity: 0;
}

.ripple.ripple-center .ripple-item {
	top: 50% !important;
	left: 50% !important;
}

.ripple.ripple-x-center .ripple-item {
	top: 50% !important;
}

.ripple.ripple-y-center .ripple-item {
	top: 50% !important;
}

@keyframes rippleEffect {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(200);
	}
}

/*--------------------------------------------------------------
# DIALOGS
--------------------------------------------------------------*/

.dialog {
	position: fixed;
	display: none;
	top: 50%;
	left: 50%;
	opacity: 0;
	visibility: hidden;
	z-index: 12000;
}

.dialog.opened {
	display: block;
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

.dialog.opening {
	display: block;
	animation: animate-dialog-open .175s 1 cubic-bezier(0.55, 0.085, 0.68, 0.53);
	animation-fill-mode: forwards;
}

.dialog.closed {
	display: block;
	animation: animate-dialog-close .175s 1 cubic-bezier(0.55, 0.085, 0.68, 0.53);
	animation-fill-mode: forwards;
}

.dialog-inner {
	position: relative;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15) !important;
	border-radius: 28px;
	color: var(--neutral-10);
	background-color: var(--neutral-99);
	padding: 24px;
	z-index: 1;
	max-height: calc(100vh - 32px);
	max-width: calc(100vw - 32px);
}

.dark .dialog-inner {
	color: var(--neutral-80);
	background-color: var(--neutral-10);
}

.dialog-inner:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--primary-40);
	opacity: .14;
	border-radius: 28px;
}

.dialog.persistent.anim {
	animation-duration: .15s;
	animation-name: animate-dialog;
	animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

@keyframes animate-dialog-open {
	0% {
		transform: translate(-50%, -50%) scale(.9);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		visibility: visible;
	}
}

@keyframes animate-dialog-close {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
		visibility: visible;
	}
	100% {
		transform: translate(-50%, -50%) scale(.9);
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes animate-dialog {
	0% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.03);
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
	}
}

.dark .dialog-inner:before {
	background-color: var(--primary-80);
}

/*--------------------------------------------------------------
# OVERLAY
--------------------------------------------------------------*/

.overlay {
	position: fixed;
	top: -100px;
	left: -100px;
	right: -100px;
	bottom: -100px;
	background-color: var(--neutral-10);
	opacity: 0;
	z-index: 11000;
	animation: opacityOverlayOpen .175s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000);
	animation-fill-mode: forwards;
	transition: opacity .175s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

.overlay.for-drawer {
	z-index: 9000;
	animation: opacityOverlayOpen .3s 1 cubic-bezier(0.770, 0.000, 0.175, 1.000);
	animation-fill-mode: forwards;
	transition: opacity .3s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

@media (min-width: 960px) {
	.nav-drawer-left-persistent .overlay.for-drawer,
	.nav-drawer-right-persistent .overlay.for-drawer {
		display: none;
	}
}

.overlay.out {
	animation: opacityOverlayout .175s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000);
	animation-fill-mode: forwards;
	pointer-events: none;
}

@keyframes opacityOverlayOpen {
	0% {
		opacity: 0;
	}
	100% {
		opacity: .4;
	}
}

@keyframes opacityOverlayout {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 0;
	}
}

/*--------------------------------------------------------------
# OVERFLOW
--------------------------------------------------------------*/

.overflow-auto{
	overflow: auto !important;
}

.overflow-visivle {
	overflow: visible !important;
}

.overflow-hidden {
	overflow: hidden !important;
}

.overflow-scroll{
	overflow: scroll !important;
}

.overflow-x-auto{
	overflow-x: auto !important;
}

.overflow-x-visivle {
	overflow-x: visible !important;
}

.overflow-x-hidden {
	overflow-x: hidden !important;
}

.overflow-x-scroll{
	overflow-x: scroll !important;
}

.overflow-y-auto{
	overflow-y: auto !important;
}

.overflow-y-visivle {
	overflow-y: visible !important;
}

.overflow-y-hidden {
	overflow-y: hidden !important;
}

.overflow-y-scroll{
	overflow-y: scroll !important;
}

/*--------------------------------------------------------------
# POSITIONS
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# POSITION RELATIVE
--------------------------------------------------------------*/

.p-relative {
	position: relative !important;
}

@media (min-width: 600px) {
	.p-sm-relative {
		position: relative !important;
	}
}

@media (min-width: 960px) {
	.p-md-relative {
		position: relative !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-relative {
		position: relative !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-relative {
		position: relative !important;
	}
}

/*--------------------------------------------------------------
# POSITION ABSOLUTE
--------------------------------------------------------------*/

.p-absolute {
	position: absolute !important;
}

@media (min-width: 600px) {
	.p-sm-absolute {
		position: absolute !important;
	}
}

@media (min-width: 960px) {
	.p-md-absolute {
		position: absolute !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-absolute {
		position: absolute !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-absolute {
		position: absolute !important;
	}
}

/*--------------------------------------------------------------
# POSITION FIXED
--------------------------------------------------------------*/

.p-fixed {
	position: fixed !important;
}

@media (min-width: 600px) {
	.p-sm-fixed {
		position: fixed !important;
	}
}

@media (min-width: 960px) {
	.p-md-fixed {
		position: fixed !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-fixed {
		position: fixed !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-fixed {
		position: fixed !important;
	}
}

/*--------------------------------------------------------------
# POSITION STICKY
--------------------------------------------------------------*/

.p-sticky {
	position: sticky !important;
}

@media (min-width: 600px) {
	.p-sm-sticky {
		position: sticky !important;
	}
}

@media (min-width: 960px) {
	.p-md-sticky {
		position: sticky !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-sticky {
		position: sticky !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-sticky {
		position: sticky !important;
	}
}

/*--------------------------------------------------------------
# POSITION INITIAL
--------------------------------------------------------------*/

.p-initial {
	position: initial !important;
}

@media (min-width: 600px) {
	.p-sm-initial {
		position: initial !important;
	}
}

@media (min-width: 960px) {
	.p-md-initial {
		position: initial !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-initial {
		position: initial !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-initial {
		position: initial !important;
	}
}

/*--------------------------------------------------------------
# TOPBAR
--------------------------------------------------------------*/

.topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
}

.height-topbar {
	height: var(--topbar-height);
}

.top-topbar {
	top: var(--topbar-height);
}

/*--------------------------------------------------------------
# IMAGES
--------------------------------------------------------------*/

.image img {
	display: block;
	width: 100%;
	height: 100%;
}

.image.cover img {
	object-fit: cover;
}

.image.contain img {
	object-fit: contain;
}

.image.no-resize img {
	object-fit: none;
}

.image.fill img {
	object-fit: fill;
}

/*--------------------------------------------------------------
# SCROLLBAR
--------------------------------------------------------------*/

.scroll {
	overflow: auto;
	height: 100%;
}

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

::-webkit-scrollbar-track {
	background-color: transparent;
}
 
::-webkit-scrollbar-thumb {
	background-color: var(--neutral-v-50);
	border-radius: 4px;
	transition: background-color .3s;
}

:hover::-webkit-scrollbar-thumb {
	background-color: var(--neutral-v-40);
}

.dark :hover::-webkit-scrollbar-thumb,
.dark:hover::-webkit-scrollbar-thumb {
	background-color: var(--neutral-v-80);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--neutral-v-80);
}

.dark ::-webkit-scrollbar-thumb:hover,
.dark::-webkit-scrollbar-thumb:hover {
	background-color: var(--neutral-v-40);
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}

/*--------------------------------------------------------------
# TABLE
--------------------------------------------------------------*/

.table table {
	width: 100%;
	border-spacing: 0;
}

.table table tr:hover {
	background-color: var(--neutral-light-opacity-12);
}

.dark .table table tr:hover {
	background-color: var(--neutral-dark-opacity-12);
}

.table table th,
.table table td {
	height: 48px;
	padding: 0 16px;
	text-align: left;
	border-bottom: thin solid var(--neutral-90);
}

.dark .table table th,
.dark .table table td {
	border-bottom: thin solid var(--neutral-20);
}

/*--------------------------------------------------------------
# VISIBILITY TEST
--------------------------------------------------------------*/

.visible-test.visible {
	background-color: var(--tertiary-40) !important;
}

.dark .visible-test.visible {
	background-color: var(--tertiary-80) !important;
}

/*--------------------------------------------------------------
# AJAX PROGRESS BAR
--------------------------------------------------------------*/

.progress {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	text-align: center;
	width: 0;
	height: 4px;
	background-color: var(--primary-70);
	transition: width .3s;
	z-index: 999999;
}

.progress.completed {
	animation: progressbar-completed 1s .5s linear forwards;
}

.dark .progress {
	background-color: var(--primary-30);
}

@keyframes progressbar-completed {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

/*--------------------------------------------------------------
# AJAX WAITING BAR
--------------------------------------------------------------*/

.waiting {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	text-align: center;
	width: 100%;
	height: 4px;
	z-index: 9999999;
}

.waiting:after {
	position: absolute;
	content: "";
	height: 4px;
	display: block;
	animation: increase 2s infinite;
	background-color: var(--primary-30);
}

.waiting:before {
	position: absolute;
	content: "";
	height: 4px;
	display: block;
	animation: decrease 2s 0.5s infinite;
	background-color: var(--primary-30);
}

@keyframes increase {
	from { left: -5%; width: 5%; }
	to { left: 130%; width: 100%; }
}

@keyframes decrease {
	from { left: -80%; width: 80%; }
	to { left: 110%; width: 10%; }
}

/*--------------------------------------------------------------
# LAZY IMG
--------------------------------------------------------------*/

[data-src] {
	opacity: 0;
	transition: opacity .3s linear;
}

.done[data-src] {
	opacity: 1;
}

/*--------------------------------------------------------------
# PANEL
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## PANEL - ROOT
--------------------------------------------------------------*/

.panel {
	display: none;
	overflow: hidden;
}

.panel.xs-tabs {
	content: "tabs";
	display: block;
	align-items: initial;
}

.panel.xs-accordion {
	content: "accordion";
	display: block;
	align-items: initial;
}

.panel.xs-sections {
	content: "sections";
	display: flex;
	align-items: stretch;
}

/*--------------------------------------------------------------
## PANEL - SLOT TABS
--------------------------------------------------------------*/

.panel .slot-tabs {
	opacity: 0;
	transition: opacity 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.panel.ready .slot-tabs {
	opacity: 1;
}

.panel.xs-tabs .slot-tabs {
	position: relative;
	display: flex;
	width: 100%;
	flex-shrink: 1000;
}

.panel.xs-sections .slot-tabs {
	position: relative;
	display: block;
	width: 100%;
	flex-shrink: 1000;
}

.panel.xs-accordion .slot-tabs {
	position: relative;
	display: none;
	width: 100%;
	flex-shrink: initial;
}

/*--------------------------------------------------------------
## PANEL - SLOT CENTER
--------------------------------------------------------------*/

.slot-left,
.slot-right {
	display: none;
}

.panel .slot-center {
	overflow: hidden;
}

.panel.xs-tabs .slot-center {
	width: 100%;
}

.panel.xs-sections .slot-center,
.panel.xs-accordion .slot-center {
	width: 100%;
}

/*--------------------------------------------------------------
## PANEL - TAB BUTTON
--------------------------------------------------------------*/

.panel .slot-tab-button {
	display: flex;
	position: relative;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
	border: none;
	outline: none;
	color: inherit;
	background-color: transparent;
	cursor: pointer;
	white-space: nowrap;
}

.panel .slot-tab-button:disabled {
	cursor: default;
	opacity: 0.3;
}

.panel.xs-tabs .slot-tab-button {
	display: flex;
}

.panel.xs-sections .slot-tab-button,
.panel.xs-accordion .slot-tab-button {
	display: none;
}

/*--------------------------------------------------------------
## PANEL - SLOT SCROLL
--------------------------------------------------------------*/

.panel .slot-tabs-scroll {
	position: relative;
	overflow: hidden;
}

.panel.xs-tabs .slot-tabs-scroll {
	width: 100%;
}

.panel.xs-sections .slot-tabs-scroll {
	width: 100%;
}

.panel.xs-accordion .slot-tabs-scroll {
	width: 100%;
}

/*--------------------------------------------------------------
## PANEL - SLOT SLIDER
--------------------------------------------------------------*/

.panel .slot-slider {
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 2px;
	background-color: var(--primary-40);
	transition: all 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.dark .panel .slot-slider {
	background-color: var(--primary-80);
}

/*--------------------------------------------------------------
## PANEL - SLOT TABS INNER
--------------------------------------------------------------*/

.panel.xs-tabs .slot-tabs-inner {
	display: flex;
}

.panel.xs-sections .slot-tabs-inner {
	display: block;
}

.panel.xs-accordion .slot-tabs-inner {
	display: none;
}

/*--------------------------------------------------------------
## PANEL - SLOT TAB - BUTTONS
--------------------------------------------------------------*/

.panel .slot-tab button {
	display: flex;
	position: relative;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
	min-height: 48px;
	padding: 16px 24px;
	border: none;
	outline: none;
	color: inherit;
	background-color: transparent;
	cursor: pointer;
	white-space: nowrap;
}

.panel.xs-tabs .slot-tab button {
	width: auto;
}

.panel.xs-sections .slot-tab button {
	width: 100%;
}

.panel.xs-accordion .slot-tab button {
	width: 100%;
}

/*--------------------------------------------------------------
## PANEL - SLOT PANEL
--------------------------------------------------------------*/
.panel .slot-panel {
	position: relative;
	overflow: hidden;
	transition: all 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

/*--------------------------------------------------------------
## PANEL - SLOT CONTAINER
--------------------------------------------------------------*/

.panel.xs-tabs .slot-container,
.panel.xs-sections .slot-container {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
}

.panel.xs-tabs .slot-container.active,
.panel.xs-sections .slot-container.active {
	position: relative;
	width: 100%;
	top: initial;
	left: initial;
	opacity: 1;
	visibility: visible;
}

.panel.xs-accordion .slot-container,
.panel.xs-accordion .slot-container.active {
	position: relative;
	width: 100%;
	top: initial;
	left: initial;
	opacity: 1;
	visibility: visible;
}

/*--------------------------------------------------------------
## PANEL - SLOT TOGGLE
--------------------------------------------------------------*/

.panel.xs-tabs .slot-toggle,
.panel.xs-sections .slot-toggle {
	display: none;
}

.panel.xs-accordion .slot-toggle {
	display: block;
}

/*--------------------------------------------------------------
## PANEL - SLOT TOGGLE - BUTTONS
--------------------------------------------------------------*/

.panel .slot-toggle button {
	display: flex;
	position: relative;
	width: 100%;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
	min-height: 48px;
	padding: 16px 24px;
	border: none;
	outline: none;
	color: inherit;
	background-color: transparent;
	cursor: pointer;
	white-space: nowrap;
	justify-content: space-between;
	border-top: 1px solid var(--neutral-90);
}

.dark .panel .slot-toggle button {
	border-top: 1px solid var(--neutral-20);
}

.panel .slot-container:first-child .slot-toggle button {
	border-top: none;
}

.panel .slot-toggle button .icon {
	width: 20px;
	height: 20px;
	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
	    -ms-transform: rotate(0deg);
	     -o-transform: rotate(0deg);
	        transform: rotate(0deg);
	transition: transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.panel .slot-toggle.active button .icon {
	-webkit-transform: rotate(180deg);
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
}

/*--------------------------------------------------------------
## PANEL - SLOT ANIM
--------------------------------------------------------------*/

.panel.xs-tabs .anim,
.panel.xs-sections .anim {
	opacity: 1;
	visibility: visible;
}

.panel.xs-tabs .anim-end .slot-anim,
.panel.xs-sections .anim-end .slot-anim {
	display: none;
}

.panel.xs-accordion .anim-end .slot-anim {
	display: block;
}

.panel.xs-tabs .slot-anim,
.panel.xs-sections .slot-anim {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.panel.xs-accordion .slot-anim {
	-webkit-transform: initial;
	   -moz-transform: initial;
	    -ms-transform: initial;
	     -o-transform: initial;
	        transform: initial;
}

.panel.xs-tabs .anim.anim-right-to-left .slot-anim,
.panel.xs-sections .anim.anim-right-to-left .slot-anim {
	position: absolute;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(-100%);
	   -moz-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	     -o-transform: translateX(-100%);
	        transform: translateX(-100%);
	-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.panel.xs-accordion .anim.anim-right-to-left .slot-anim {
	position: initial;
	opacity: initial;
	visibility: initial;
	-webkit-transform: initial;
	   -moz-transform: initial;
	    -ms-transform: initial;
	     -o-transform: initial;
	        transform: initial;
	-webkit-transition: initial;
	   -moz-transition: initial;
	        transition: initial;
}

.panel.xs-tabs .active.anim-right-to-left .slot-anim,
.panel.xs-sections .active.anim-right-to-left .slot-anim {
	position: relative;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(100%);
	   -moz-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);
}

.panel.xs-accordion .active.anim-right-to-left .slot-anim {
	position: initial;
	opacity: initial;
	visibility: initial;
	-webkit-transform: initial;
	   -moz-transform: initial;
	    -ms-transform: initial;
	     -o-transform: initial;
	        transform: initial;
}

.panel.xs-tabs .active.anim.anim-right-to-left .slot-anim,
.panel.xs-sections .active.anim.anim-right-to-left .slot-anim {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.panel.xs-accordion .active.anim.anim-right-to-left .slot-anim {
	-webkit-transform: initial;
	   -moz-transform: initial;
	    -ms-transform: initial;
	     -o-transform: initial;
	        transform: initial;
	-webkit-transition: initial;
	   -moz-transition: initial;
	        transition: initial;
}

.panel.xs-tabs .anim.anim-left-to-right .slot-anim,
.panel.xs-sections .anim.anim-left-to-right .slot-anim {
	position: absolute;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(100%);
	   -moz-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);
	-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.panel.xs-accordion .anim.anim-left-to-right .slot-anim {
	position: initial;
	opacity: initial;
	visibility: initial;
	-webkit-transform: initial;
	   -moz-transform: initial;
	    -ms-transform: initial;
	     -o-transform: initial;
	        transform: initial;
	-webkit-transition: initial;
	   -moz-transition: initial;
	        transition: initial;
}

.panel.xs-tabs .active.anim-left-to-right .slot-anim,
.panel.xs-sections .active.anim-left-to-right .slot-anim {
	position: initial;
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateX(-100%);
	   -moz-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	     -o-transform: translateX(-100%);
	        transform: translateX(-100%);
}

.panel.xs-accordion .active.anim-left-to-right .slot-anim {
	position: initial;
	opacity: initial;
	visibility: initial;
	-webkit-transform: initial;
	   -moz-transform: initial;
	    -ms-transform: initial;
	     -o-transform: initial;
	        transform: initial;
}

.panel.xs-tabs .active.anim.anim-left-to-right .slot-anim,
.panel.xs-sections .active.anim.anim-left-to-right .slot-anim {
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.panel.xs-accordion .active.anim.anim-left-to-right .slot-anim {
	-webkit-transform: initial;
	   -moz-transform: initial;
	    -ms-transform: initial;
	     -o-transform: initial;
	        transform: initial;
	-webkit-transition: initial;
	   -moz-transition: initial;
	        transition: initial;
}

/*--------------------------------------------------------------
## PANEL - SLOT EXPANSION
--------------------------------------------------------------*/

.panel .slot-expansion {
	overflow: hidden;
	-webkit-transition: height 300ms 0s cubic-bezier(.77, 0, .175, 1);
	   -moz-transition: height 300ms 0s cubic-bezier(.77, 0, .175, 1);
	        transition: height 300ms 0s cubic-bezier(.77, 0, .175, 1);
}

.panel.xs-tabs .slot-expansion,
.panel.xs-sections .slot-expansion,
.panel.xs-tabs .slot-expansion.expanded,
.panel.xs-sections .slot-expansion.expanded {
	height: initial;
}

.panel.xs-accordion .slot-expansion {
	height: 0;
}

.panel.xs-accordion .slot-expansion.expanded {
	height: initial;
}

/*--------------------------------------------------------------
## PANEL - SLOT CONTENT
--------------------------------------------------------------*/

.panel .slot-content {
	padding: 24px;
}

@media (min-width: 600px) {
	/*--------------------------------------------------------------
	# PANEL
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	## PANEL - ROOT
	--------------------------------------------------------------*/

	.panel.sm-tabs {
		content: "tabs";
		display: block;
		align-items: initial;
	}

	.panel.sm-accordion {
		content: "accordion";
		display: block;
		align-items: initial;
	}

	.panel.sm-sections {
		content: "sections";
		display: flex;
		align-items: stretch;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-tabs {
		position: relative;
		display: flex;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.sm-sections .slot-tabs {
		position: relative;
		display: block;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.sm-accordion .slot-tabs {
		position: relative;
		display: none;
		width: 100%;
		flex-shrink: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CENTER
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-center {
		width: 99%;
	}

	.panel.sm-sections .slot-center,
	.panel.sm-accordion .slot-center {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - TAB BUTTON
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-tab-button {
		display: flex;
	}

	.panel.sm-sections .slot-tab-button,
	.panel.sm-accordion .slot-tab-button {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT SCROLL
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-tabs-scroll {
		width: 99%;
	}

	.panel.sm-sections .slot-tabs-scroll {
		width: 100%;
	}

	.panel.sm-accordion .slot-tabs-scroll {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS INNER
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-tabs-inner {
		display: flex;
	}

	.panel.sm-sections .slot-tabs-inner {
		display: block;
	}

	.panel.sm-accordion .slot-tabs-inner {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TAB - BUTTONS
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-tab button {
		width: auto;
	}

	.panel.sm-sections .slot-tab button {
		width: 100%;
	}

	.panel.sm-accordion .slot-tab button {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CONTAINER
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-container,
	.panel.sm-sections .slot-container {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
	}

	.panel.sm-tabs .slot-container.active,
	.panel.sm-sections .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	.panel.sm-accordion .slot-container,
	.panel.sm-accordion .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TOGGLE
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-toggle,
	.panel.sm-sections .slot-toggle {
		display: none;
	}

	.panel.sm-accordion .slot-toggle {
		display: block;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT ANIM
	--------------------------------------------------------------*/

	.panel.sm-tabs .anim,
	.panel.sm-sections .anim {
		opacity: 1;
		visibility: visible;
	}

	.panel.sm-tabs .anim-end .slot-anim,
	.panel.sm-sections .anim-end .slot-anim {
		display: none;
	}

	.panel.sm-accordion .anim-end .slot-anim {
		display: block;
	}

	.panel.sm-tabs .slot-anim,
	.panel.sm-sections .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
	}

	.panel.sm-accordion .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.sm-tabs .anim.anim-right-to-left .slot-anim,
	.panel.sm-sections .anim.anim-right-to-left .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.sm-accordion .anim.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.sm-tabs .active.anim-right-to-left .slot-anim,
	.panel.sm-sections .active.anim-right-to-left .slot-anim {
		position: relative;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
	}

	.panel.sm-accordion .active.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.sm-tabs .active.anim.anim-right-to-left .slot-anim,
	.panel.sm-sections .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.sm-accordion .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.sm-tabs .anim.anim-left-to-right .slot-anim,
	.panel.sm-sections .anim.anim-left-to-right .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.sm-accordion .anim.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.sm-tabs .active.anim-left-to-right .slot-anim,
	.panel.sm-sections .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
	}

	.panel.sm-accordion .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.sm-tabs .active.anim.anim-left-to-right .slot-anim,
	.panel.sm-sections .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.sm-accordion .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT EXPANSION
	--------------------------------------------------------------*/

	.panel.sm-tabs .slot-expansion,
	.panel.sm-sections .slot-expansion,
	.panel.sm-tabs .slot-expansion.expanded,
	.panel.sm-sections .slot-expansion.expanded {
		height: initial;
	}

	.panel.sm-accordion .slot-expansion {
		height: 0;
	}

	.panel.sm-accordion .slot-expansion.expanded {
		height: initial;
	}
}

@media (min-width: 960px) {
	/*--------------------------------------------------------------
	# PANEL
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	## PANEL - ROOT
	--------------------------------------------------------------*/

	.panel.md-tabs {
		content: "tabs";
		display: block;
		align-items: initial;
	}

	.panel.md-accordion {
		content: "accordion";
		display: block;
		align-items: initial;
	}

	.panel.md-sections {
		content: "sections";
		display: flex;
		align-items: stretch;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-tabs {
		position: relative;
		display: flex;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.md-sections .slot-tabs {
		position: relative;
		display: block;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.md-accordion .slot-tabs {
		position: relative;
		display: none;
		width: 100%;
		flex-shrink: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CENTER
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-center {
		width: 99%;
	}

	.panel.md-sections .slot-center,
	.panel.md-accordion .slot-center {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - TAB BUTTON
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-tab-button {
		display: flex;
	}

	.panel.md-sections .slot-tab-button,
	.panel.md-accordion .slot-tab-button {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT SCROLL
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-tabs-scroll {
		width: 99%;
	}

	.panel.md-sections .slot-tabs-scroll {
		width: 100%;
	}

	.panel.md-accordion .slot-tabs-scroll {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS INNER
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-tabs-inner {
		display: flex;
	}

	.panel.md-sections .slot-tabs-inner {
		display: block;
	}

	.panel.md-accordion .slot-tabs-inner {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TAB - BUTTONS
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-tab button {
		width: auto;
	}

	.panel.md-sections .slot-tab button {
		width: 100%;
	}

	.panel.md-accordion .slot-tab button {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CONTAINER
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-container,
	.panel.md-sections .slot-container {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
	}

	.panel.md-tabs .slot-container.active,
	.panel.md-sections .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	.panel.md-accordion .slot-container,
	.panel.md-accordion .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TOGGLE
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-toggle,
	.panel.md-sections .slot-toggle {
		display: none;
	}

	.panel.md-accordion .slot-toggle {
		display: block;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT ANIM
	--------------------------------------------------------------*/

	.panel.md-tabs .anim,
	.panel.md-sections .anim {
		opacity: 1;
		visibility: visible;
	}

	.panel.md-tabs .anim-end .slot-anim,
	.panel.md-sections .anim-end .slot-anim {
		display: none;
	}

	.panel.md-accordion .anim-end .slot-anim {
		display: block;
	}

	.panel.md-tabs .slot-anim,
	.panel.md-sections .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
	}

	.panel.md-accordion .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.md-tabs .anim.anim-right-to-left .slot-anim,
	.panel.md-sections .anim.anim-right-to-left .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.md-accordion .anim.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.md-tabs .active.anim-right-to-left .slot-anim,
	.panel.md-sections .active.anim-right-to-left .slot-anim {
		position: relative;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
	}

	.panel.md-accordion .active.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.md-tabs .active.anim.anim-right-to-left .slot-anim,
	.panel.md-sections .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.md-accordion .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.md-tabs .anim.anim-left-to-right .slot-anim,
	.panel.md-sections .anim.anim-left-to-right .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.md-accordion .anim.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.md-tabs .active.anim-left-to-right .slot-anim,
	.panel.md-sections .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
	}

	.panel.md-accordion .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.md-tabs .active.anim.anim-left-to-right .slot-anim,
	.panel.md-sections .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.md-accordion .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT EXPANSION
	--------------------------------------------------------------*/

	.panel.md-tabs .slot-expansion,
	.panel.md-sections .slot-expansion,
	.panel.md-tabs .slot-expansion.expanded,
	.panel.md-sections .slot-expansion.expanded {
		height: initial;
	}

	.panel.md-accordion .slot-expansion {
		height: 0;
	}

	.panel.md-accordion .slot-expansion.expanded {
		height: initial;
	}
}

@media (min-width: 1264px) {
	/*--------------------------------------------------------------
	# PANEL
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	## PANEL - ROOT
	--------------------------------------------------------------*/

	.panel.lg-tabs {
		content: "tabs";
		display: block;
		align-items: initial;
	}

	.panel.lg-accordion {
		content: "accordion";
		display: block;
		align-items: initial;
	}

	.panel.lg-sections {
		content: "sections";
		display: flex;
		align-items: stretch;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-tabs {
		position: relative;
		display: flex;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.lg-sections .slot-tabs {
		position: relative;
		display: block;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.lg-accordion .slot-tabs {
		position: relative;
		display: none;
		width: 100%;
		flex-shrink: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CENTER
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-center {
		width: 99%;
	}

	.panel.lg-sections .slot-center,
	.panel.lg-accordion .slot-center {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - TAB BUTTON
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-tab-button {
		display: flex;
	}

	.panel.lg-sections .slot-tab-button,
	.panel.lg-accordion .slot-tab-button {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT SCROLL
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-tabs-scroll {
		width: 99%;
	}

	.panel.lg-sections .slot-tabs-scroll {
		width: 100%;
	}

	.panel.lg-accordion .slot-tabs-scroll {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS INNER
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-tabs-inner {
		display: flex;
	}

	.panel.lg-sections .slot-tabs-inner {
		display: block;
	}

	.panel.lg-accordion .slot-tabs-inner {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TAB - BUTTONS
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-tab button {
		width: auto;
	}

	.panel.lg-sections .slot-tab button {
		width: 100%;
	}

	.panel.lg-accordion .slot-tab button {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CONTAINER
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-container,
	.panel.lg-sections .slot-container {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
	}

	.panel.lg-tabs .slot-container.active,
	.panel.lg-sections .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	.panel.lg-accordion .slot-container,
	.panel.lg-accordion .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TOGGLE
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-toggle,
	.panel.lg-sections .slot-toggle {
		display: none;
	}

	.panel.lg-accordion .slot-toggle {
		display: block;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT ANIM
	--------------------------------------------------------------*/

	.panel.lg-tabs .anim,
	.panel.lg-sections .anim {
		opacity: 1;
		visibility: visible;
	}

	.panel.lg-tabs .anim-end .slot-anim,
	.panel.lg-sections .anim-end .slot-anim {
		display: none;
	}

	.panel.lg-accordion .anim-end .slot-anim {
		display: block;
	}

	.panel.lg-tabs .slot-anim,
	.panel.lg-sections .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
	}

	.panel.lg-accordion .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.lg-tabs .anim.anim-right-to-left .slot-anim,
	.panel.lg-sections .anim.anim-right-to-left .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.lg-accordion .anim.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.lg-tabs .active.anim-right-to-left .slot-anim,
	.panel.lg-sections .active.anim-right-to-left .slot-anim {
		position: relative;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
	}

	.panel.lg-accordion .active.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.lg-tabs .active.anim.anim-right-to-left .slot-anim,
	.panel.lg-sections .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.lg-accordion .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.lg-tabs .anim.anim-left-to-right .slot-anim,
	.panel.lg-sections .anim.anim-left-to-right .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.lg-accordion .anim.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.lg-tabs .active.anim-left-to-right .slot-anim,
	.panel.lg-sections .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
	}

	.panel.lg-accordion .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.lg-tabs .active.anim.anim-left-to-right .slot-anim,
	.panel.lg-sections .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.lg-accordion .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT EXPANSION
	--------------------------------------------------------------*/

	.panel.lg-tabs .slot-expansion,
	.panel.lg-sections .slot-expansion,
	.panel.lg-tabs .slot-expansion.expanded,
	.panel.lg-sections .slot-expansion.expanded {
		height: initial;
	}

	.panel.lg-accordion .slot-expansion {
		height: 0;
	}

	.panel.lg-accordion .slot-expansion.expanded {
		height: initial;
	}
}

@media (min-width: 1904px) {
	/*--------------------------------------------------------------
	# PANEL
	--------------------------------------------------------------*/

	/*--------------------------------------------------------------
	## PANEL - ROOT
	--------------------------------------------------------------*/

	.panel.xl-tabs {
		content: "tabs";
		display: block;
		align-items: initial;
	}

	.panel.xl-accordion {
		content: "accordion";
		display: block;
		align-items: initial;
	}

	.panel.xl-sections {
		content: "sections";
		display: flex;
		align-items: stretch;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-tabs {
		position: relative;
		display: flex;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.xl-sections .slot-tabs {
		position: relative;
		display: block;
		width: 100%;
		flex-shrink: 1000;
	}

	.panel.xl-accordion .slot-tabs {
		position: relative;
		display: none;
		width: 100%;
		flex-shrink: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CENTER
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-center {
		width: 99%;
	}

	.panel.xl-sections .slot-center,
	.panel.xl-accordion .slot-center {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - TAB BUTTON
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-tab-button {
		display: flex;
	}

	.panel.xl-sections .slot-tab-button,
	.panel.xl-accordion .slot-tab-button {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT SCROLL
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-tabs-scroll {
		width: 99%;
	}

	.panel.xl-sections .slot-tabs-scroll {
		width: 100%;
	}

	.panel.xl-accordion .slot-tabs-scroll {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TABS INNER
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-tabs-inner {
		display: flex;
	}

	.panel.xl-sections .slot-tabs-inner {
		display: block;
	}

	.panel.xl-accordion .slot-tabs-inner {
		display: none;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TAB - BUTTONS
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-tab button {
		width: auto;
	}

	.panel.xl-sections .slot-tab button {
		width: 100%;
	}

	.panel.xl-accordion .slot-tab button {
		width: 100%;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT CONTAINER
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-container,
	.panel.xl-sections .slot-container {
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		visibility: hidden;
	}

	.panel.xl-tabs .slot-container.active,
	.panel.xl-sections .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	.panel.xl-accordion .slot-container,
	.panel.xl-accordion .slot-container.active {
		position: relative;
		width: 100%;
		top: initial;
		left: initial;
		opacity: 1;
		visibility: visible;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT TOGGLE
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-toggle,
	.panel.xl-sections .slot-toggle {
		display: none;
	}

	.panel.xl-accordion .slot-toggle {
		display: block;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT ANIM
	--------------------------------------------------------------*/

	.panel.xl-tabs .anim,
	.panel.xl-sections .anim {
		opacity: 1;
		visibility: visible;
	}

	.panel.xl-tabs .anim-end .slot-anim,
	.panel.xl-sections .anim-end .slot-anim {
		display: none;
	}

	.panel.xl-accordion .anim-end .slot-anim {
		display: block;
	}

	.panel.xl-tabs .slot-anim,
	.panel.xl-sections .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
	}

	.panel.xl-accordion .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.xl-tabs .anim.anim-right-to-left .slot-anim,
	.panel.xl-sections .anim.anim-right-to-left .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.xl-accordion .anim.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.xl-tabs .active.anim-right-to-left .slot-anim,
	.panel.xl-sections .active.anim-right-to-left .slot-anim {
		position: relative;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
	}

	.panel.xl-accordion .active.anim-right-to-left .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.xl-tabs .active.anim.anim-right-to-left .slot-anim,
	.panel.xl-sections .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.xl-accordion .active.anim.anim-right-to-left .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.xl-tabs .anim.anim-left-to-right .slot-anim,
	.panel.xl-sections .anim.anim-left-to-right .slot-anim {
		position: absolute;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(100%);
		   -moz-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.xl-accordion .anim.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	.panel.xl-tabs .active.anim-left-to-right .slot-anim,
	.panel.xl-sections .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: 1;
		visibility: visible;
		-webkit-transform: translateX(-100%);
		   -moz-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
	}

	.panel.xl-accordion .active.anim-left-to-right .slot-anim {
		position: initial;
		opacity: initial;
		visibility: initial;
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
	}

	.panel.xl-tabs .active.anim.anim-left-to-right .slot-anim,
	.panel.xl-sections .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
		-webkit-transition: -webkit-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		   -moz-transition:    -moz-transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
		        transition:         transform 300ms 0s cubic-bezier(.77, 0, .175, 1);
	}

	.panel.xl-accordion .active.anim.anim-left-to-right .slot-anim {
		-webkit-transform: initial;
		   -moz-transform: initial;
		    -ms-transform: initial;
		     -o-transform: initial;
		        transform: initial;
		-webkit-transition: initial;
		   -moz-transition: initial;
		        transition: initial;
	}

	/*--------------------------------------------------------------
	## PANEL - SLOT EXPANSION
	--------------------------------------------------------------*/

	.panel.xl-tabs .slot-expansion,
	.panel.xl-sections .slot-expansion,
	.panel.xl-tabs .slot-expansion.expanded,
	.panel.xl-sections .slot-expansion.expanded {
		height: initial;
	}

	.panel.xl-accordion .slot-expansion {
		height: 0;
	}

	.panel.xl-accordion .slot-expansion.expanded {
		height: initial;
	}
}

/*--------------------------------------------------------------
# BACKDROP BLUR
--------------------------------------------------------------*/

.backdrop-blur-2 {
	-webkit-backdrop-filter: blur(2px);
	        backdrop-filter: blur(2px);
}

.backdrop-blur-4 {
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
}

.backdrop-blur-8 {
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
}

.backdrop-blur-16 {
	-webkit-backdrop-filter: blur(16px);
	        backdrop-filter: blur(16px);
}

.backdrop-blur-0 {
	-webkit-backdrop-filter: blur(0) !important;
	        backdrop-filter: blur(0) !important;
}

/*--------------------------------------------------------------
## TYPOGRAPHY -> BODY
--------------------------------------------------------------*/


.text-body-l {
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0.5px !important;
}

body,
.text-body-m {
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.25px !important;
}

.text-body-s {
	font-size: 12px !important;
	line-height: 16px !important;
	letter-spacing: 0.4px !important;
}

/*--------------------------------------------------------------
## TYPOGRAPHY -> LABEL
--------------------------------------------------------------*/

.text-label-l {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
}

.text-label-m {
	font-weight: 500 !important;
	font-size: 12px !important;
	line-height: 16px !important;
	letter-spacing: 0.5px !important;
}

.text-label-s {
	font-weight: 500 !important;
	font-size: 11px !important;
	line-height: 16px !important;
	letter-spacing: 0.5px !important;
}

/*--------------------------------------------------------------
## TYPOGRAPHY -> TITLE
--------------------------------------------------------------*/

.text-title-l {
	font-weight: 500 !important;
	font-size: 22px !important;
	line-height: 28px !important;
	letter-spacing: 0 !important;
}

.text-title-m {
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0.1px !important;
}

.text-title-s {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
}

/*--------------------------------------------------------------
# CAROUSEL
--------------------------------------------------------------*/

.carousel {
	position: relative;
}

.carousel .slot-viewport {
	overflow: hidden;
	width: 100%;
	border-radius: 12px;
}

.carousel .slot-viewport.is-draggable {
	cursor: move;
	cursor: grab;
}

.carousel .slot-viewport.is-dragging {
	cursor: grabbing;
}

.carousel .slot-container {
	display: flex;
	column-gap: 16px;
	user-select: none;
	-webkit-touch-callout: none;
	-khtml-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.carousel .slot-slide {
	position: relative;
	min-width: 100%;
	overflow: hidden;
	border-radius: 12px;
}

.carousel .slot-button {
	outline: 0;
	cursor: pointer;
	background-color: transparent;
	touch-action: manipulation;
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	width: 48px;
	height: 48px;
	justify-content: center;
	align-items: center;
	padding: 0;
	color: var(--secondary-40);
}

.dark .carousel .slot-button {
	color: var(--secondary-80);
}

.carousel .slot-button:disabled {
	cursor: default;
	opacity: 0.3;
}

.carousel .slot-button.prev {
	left: 24px;
}

.carousel .slot-button.next {
	right: 24px;
}