/*====================================================================
[Table of contents]

1.  Normalize v8.0.1 | MIT License | github.com/necolas/normalize.css
2.  Variables
3.  Setup
	3.1. Scrollbar
4.  Grid System
	4.1. Grid System -> Columns
		4.1.1. Grid System -> Columns -> Width
		4.1.2. Grid System -> Columns -> Offset
		4.1.3. Grid System -> Columns -> Pull
		4.1.4. Grid System -> Columns -> Push
5.  Flex
	5.1. Flex -> Directions
	5.2. Flex -> Justify
	5.3. Flex -> Align
	5.4. Flex -> Align Self
	5.5. Flex -> Wrap
	5.6. Flex -> Order
	5.7. Flex -> Grow and Shrink
	5.8. Flex -> Gap
	5.9. Flex -> Spacer
6.  Float
7.  Clear
8.  Display
9.  Positions
10. Offset
	10.1. Offset -> Top
	10.2. Offset -> Bottom
	10.3. Offset -> Left
	10.4. Offset -> Right
11. Width
	11.1. Width -> Max
	11.2. Width -> Min
12. Height
	12.1. Height -> Max
	12.2. Height -> Min
13. Aspect Ratio
14. Overflow
15. Z Index
16. Elevation
17. Round
18. Backdrop
	18.1. Backdrop -> Blur
19. Typography
	19.1. Typography -> html tags
	19.2. Typography -> headings
	19.2. Typography -> Display
	19.3. Typography -> Headlines
	19.4. Typography -> Titles
	19.5. Typography -> Body
	19.6. Typography -> Labels
	19.7. Typography -> Font Weights
	19.8. Typography -> Text Align
	19.9. Typography -> White Spaces
20. Margin
	20.1. Margin -> Left
	20.2. Margin -> Right
	20.3. Margin -> Top
	20.4. Margin -> Bottom
	20.5. Margin -> Left and Right (X)
	20.6. Margin -> Top and Bottom (Y)
21. Padding
	21.1. Padding -> Left
	21.2. Padding -> Right
	21.3. Padding -> Top
	21.4. Padding -> Bottom
	21.5. Padding -> Left and Right (X)
	21.6. Padding -> Top and Bottom (Y)
22. Colors
	22.1. Colors -> Light theme background
	22.2. Colors -> Dark theme background
	22.3. Colors -> Light theme colors
	22.4. Colors -> Dark theme colors
	22.5. Colors -> Background Colors
		22.5.1. Colors -> Background Colors -> Primary
		22.5.2. Colors -> Background Colors -> Secondary
		22.5.3. Colors -> Background Colors -> Tertiary
		22.5.4. Colors -> Background Colors -> Error
		22.5.5. Colors -> Background Colors -> Neutral
		22.5.6. Colors -> Background Colors -> Neutral Variant
	22.6. Colors -> Colors -> Primary
		22.6.1. Colors -> Colors -> Primary
		22.6.2. Colors -> Colors -> Secondary
		22.6.3. Colors -> Colors -> Tertiary
		22.6.4. Colors -> Colors -> Error
		22.6.5. Colors -> Colors -> Neutral
		22.6.6. Colors -> Colors -> Neutral Variant
	22.7. Colors -> Black and white
23. Images

====================================================================*/

/*====================================================================
1. Normalize
====================================================================*/

/*! 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;
}

/*====================================================================
1. Variables
====================================================================*/

:root {

	/* Primary color */
	--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: #6750A40D;
	--primary-light-opacity-12: #6750A41F;
	--primary-light-opacity-16: #6750A429;
	--primary-light-opacity-32: #6750A452;
	--primary-light-opacity-64: #6750A4A3;

	--primary-dark-opacity-05: #D0BCFF0D;
	--primary-dark-opacity-12: #D0BCFF1F;
	--primary-dark-opacity-16: #D0BCFF29;
	--primary-dark-opacity-32: #D0BCFF52;
	--primary-dark-opacity-64: #D0BCFFA3;

	/* Secondary color */
	--secondary-10: #1e192b;
	--secondary-20: #332d41;
	--secondary-30: #4a4358;
	--secondary-40: #625b71;
	--secondary-50: #7b738a;
	--secondary-60: #958da5;
	--secondary-70: #b0a7c0;
	--secondary-80: #ccc2dc;
	--secondary-90: #e8def9;
	--secondary-95: #f6edff;
	--secondary-99: #fffbff;

	--secondary-light-opacity-05: #625b710D;
	--secondary-light-opacity-12: #625b711F;
	--secondary-light-opacity-16: #625b7129;
	--secondary-light-opacity-32: #625b7152;
	--secondary-light-opacity-64: #625b71A3;

	--secondary-dark-opacity-05: #ccc2dc0D;
	--secondary-dark-opacity-12: #ccc2dc1F;
	--secondary-dark-opacity-16: #ccc2dc29;
	--secondary-dark-opacity-32: #ccc2dc52;
	--secondary-dark-opacity-64: #ccc2dcA3;

	/* Tertiary color */
	--tertiary-10: #31111d;
	--tertiary-20: #492532;
	--tertiary-30: #633b48;
	--tertiary-40: #7d5260;
	--tertiary-50: #986a79;
	--tertiary-60: #b48392;
	--tertiary-70: #d19dad;
	--tertiary-80: #eeb8c8;
	--tertiary-90: #ffd9e3;
	--tertiary-95: #ffecf0;
	--tertiary-99: #fffbff;

	--tertiary-light-opacity-05: #7d52600D;
	--tertiary-light-opacity-12: #7d52601F;
	--tertiary-light-opacity-16: #7d526029;
	--tertiary-light-opacity-32: #7d526052;
	--tertiary-light-opacity-64: #7d5260A3;

	--tertiary-dark-opacity-05: #eeb8c80D;
	--tertiary-dark-opacity-12: #eeb8c81F;
	--tertiary-dark-opacity-16: #eeb8c829;
	--tertiary-dark-opacity-32: #eeb8c852;
	--tertiary-dark-opacity-64: #eeb8c8A3;

	/* Error color */
	--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;

	--error-light-opacity-05: #B3261E0D;
	--error-light-opacity-12: #B3261E1F;
	--error-light-opacity-16: #B3261E29;
	--error-light-opacity-32: #B3261E52;
	--error-light-opacity-64: #B3261EA3;

	--error-dark-opacity-05: #F2B8B50D;
	--error-dark-opacity-12: #F2B8B51F;
	--error-dark-opacity-16: #F2B8B529;
	--error-dark-opacity-32: #F2B8B552;
	--error-dark-opacity-64: #F2B8B5A3;

	/* Neutral color */
	--neutral-10: #1c1b1f;
	--neutral-20: #322f34;
	--neutral-30: #48464a;
	--neutral-40: #605d62;
	--neutral-50: #79767b;
	--neutral-60: #938f95;
	--neutral-70: #aeaaaf;
	--neutral-80: #cac5cb;
	--neutral-90: #e6e1e7;
	--neutral-95: #f5eff5;
	--neutral-99: #fffbff;

	--neutral-light-opacity-05: #605d620D;
	--neutral-light-opacity-12: #605d621F;
	--neutral-light-opacity-16: #605d6229;
	--neutral-light-opacity-32: #605d6252;
	--neutral-light-opacity-64: #605d62A3;

	--neutral-dark-opacity-05: #cac5cb0D;
	--neutral-dark-opacity-12: #cac5cb1F;
	--neutral-dark-opacity-16: #cac5cb29;
	--neutral-dark-opacity-32: #cac5cb52;
	--neutral-dark-opacity-64: #cac5cbA3;

	/* Neutral Variant color */
	--neutral-v-10: #1c1b22;
	--neutral-v-20: #312f37;
	--neutral-v-30: #48454e;
	--neutral-v-40: #605d66;
	--neutral-v-50: #79757f;
	--neutral-v-60: #938f99;
	--neutral-v-70: #aea9b3;
	--neutral-v-80: #c9c4cf;
	--neutral-v-90: #e6e0eb;
	--neutral-v-95: #f4eff9;
	--neutral-v-99: #fffbff;

	--neutral-v-light-opacity-05: #605d660D;
	--neutral-v-light-opacity-12: #605d661F;
	--neutral-v-light-opacity-16: #605d6629;
	--neutral-v-light-opacity-32: #605d6652;
	--neutral-v-light-opacity-64: #605d66A3;

	--neutral-v-dark-opacity-05: #c9c4cf0D;
	--neutral-v-dark-opacity-12: #c9c4cf1F;
	--neutral-v-dark-opacity-16: #c9c4cf29;
	--neutral-v-dark-opacity-32: #c9c4cf52;
	--neutral-v-dark-opacity-64: #c9c4cfA3;

	--topbar-height: 64px;
	--megamenu-height: 64px;

	--text-headline-l-font-size: 22px;
	--text-headline-l-line-height: 28px;
	--text-headline-l-letter-spacing: initial;
	--text-headline-l-font-weight: normal;

	--text-headline-m-font-size: 20px;
	--text-headline-m-line-height: 24px;
	--text-headline-m-letter-spacing: initial;
	--text-headline-m-font-weight: normal;

	--text-headline-s-font-size: 18px;
	--text-headline-s-line-height: 24px;
	--text-headline-s-letter-spacing: initial;
	--text-headline-s-font-weight: normal;


	--text-display-l-font-size: 32px;
	--text-display-l-line-height: 40px;
	--text-display-l-letter-spacing: -0.25px;
	--text-display-l-font-weight: normal;
	--text-display-l-margin: 0;

	--text-display-m-font-size: 28px;
	--text-display-m-line-height: 36px;
	--text-display-m-letter-spacing: initial;
	--text-display-m-font-weight: normal;
	--text-display-m-margin: 0;

	--text-display-s-font-size: 22px;
	--text-display-s-line-height: 32px;
	--text-display-s-letter-spacing: initial;
	--text-display-s-font-weight: normal;
	--text-display-s-margin: 0;


	--text-body-s-font-size: 12px;
	--text-body-s-line-height: 16px;
	--text-body-s-letter-spacing: 0.4px;
	--text-body-s-font-weight: normal;

	--text-body-m-font-size: 14px;
	--text-body-m-line-height: 20px;
	--text-body-m-letter-spacing: 0.25px;
	--text-body-m-font-weight: normal;

	--text-body-l-font-size: 16px;
	--text-body-l-line-height: 24px;
	--text-body-l-letter-spacing: 0.5px;
	--text-body-l-font-weight: normal;


	--text-label-l-font-size: 14px;
	--text-label-l-line-height: 20px;
	--text-label-l-letter-spacing: 0.1px;
	--text-label-l-font-weight: 500;

	--text-label-m-font-size: 12px;
	--text-label-m-line-height: 16px;
	--text-label-m-letter-spacing: 0.5px;
	--text-label-m-font-weight: 500;

	--text-label-s-font-size: 11px;
	--text-label-s-line-height: 16px;
	--text-label-s-letter-spacing: 0.5px;
	--text-label-s-font-weight: 500;


	--text-title-l-font-size: 22px;
	--text-title-l-line-height: 28px;
	--text-title-l-letter-spacing: 0px;
	--text-title-l-font-weight: 500;

	--text-title-m-font-size: 16px;
	--text-title-m-line-height: 24px;
	--text-title-m-letter-spacing: 0.1px;
	--text-title-m-font-weight: 500;

	--text-title-s-font-size: 14px;
	--text-title-s-line-height: 20px;
	--text-title-s-letter-spacing: 0.1px;
	--text-title-s-font-weight: 500;
}


@media (min-width: 360px) {
   :root {
		--text-headline-l-font-size: 32px;
	 	--text-headline-l-line-height: 40px;

	 	--text-headline-m-font-size: 28px;
	 	--text-headline-m-line-height: 36px;

	 	--text-headline-s-font-size: 24px;
	 	--text-headline-s-line-height: 32px;


		--text-display-l-font-size: 40px;
		--text-display-l-line-height: 52px;

		--text-display-m-font-size: 32px;
		--text-display-m-line-height: 40px;

		--text-display-s-font-size: 28px;
		--text-display-s-line-height: 36px;
    }
}

@media (min-width: 600px) {
   :root {
		--text-display-l-font-size: 48px;
		--text-display-l-line-height: 58px;

		--text-display-m-font-size: 36px;
		--text-display-m-line-height: 44px;

		--text-display-s-font-size: 32px;
		--text-display-s-line-height: 40px;
    }
}


@media (min-width: 1264px) {
   :root {
		--text-display-l-font-size: 57px;
		--text-display-l-line-height: 64px;

		--text-display-m-font-size: 45px;
		--text-display-m-line-height: 52px;

		--text-display-s-font-size: 36px;
		--text-display-s-line-height: 44px;
    }
}

@media (min-width: 1904px) {
   :root {
		--text-display-l-font-size: 72px;
		--text-display-l-line-height: 80px;

		--text-display-m-font-size: 52px;
		--text-display-m-line-height: 64px;

		--text-display-s-font-size: 45px;
		--text-display-s-line-height: 52px;
    }
}

/*====================================================================
3. 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;
}

body {
	overflow-x: hidden;
	color: var(--neutral-10);
	background-color: var(--neutral-99);
}

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

/*====================================================================
3.1. Scrollbar
====================================================================*/

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

/*====================================================================
4. Grid System
====================================================================*/

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

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

/*====================================================================
4.1. Grid System -> Columns
====================================================================*/

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

@media (min-width: 600px) {
	.col {
		padding: 0 8px;
	}
}

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

/*====================================================================
4.1.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%;
	}
}

/*====================================================================
4.1.2. 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%;
	}
}

/*====================================================================
4.1.3. 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%;
	}
}

/*====================================================================
4.1.4. 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%;
	}
}

/*====================================================================
5. Flex
====================================================================*/

/*====================================================================
5.1. Flex -> Directions
====================================================================*/

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

/*====================================================================
5.2. 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;
	}
}

/*====================================================================
5.3. 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;
	}
}

/*====================================================================
5.4. 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;
	}
}

/*====================================================================
5.5. 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;
	}
}

/*====================================================================
5.6. 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;
	}
}

/*====================================================================
5.7. 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;
	}
}

/*====================================================================
5.8. Flex -> Gap
====================================================================*/

.gap-0 {
	gap: 0 !important;
}

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

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

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

/*====================================================================
5.9. Flex -> Spacer
====================================================================*/

.spacer {
	width: 99%;
}

/*====================================================================
6. Float
====================================================================*/

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

.float-left {
	float: left !important;
}

.float-right {
	float: right !important;
}

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

	.float-sm-left {
		float: left !important;
	}

	.float-sm-right {
		float: right !important;
	}
}

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

	.float-md-left {
		float: left !important;
	}

	.float-md-right {
		float: right !important;
	}
}

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

	.float-lg-left {
		float: left !important;
	}

	.float-lg-right {
		float: right !important;
	}
}

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

	.float-xl-left {
		float: left !important;
	}

	.float-xl-right {
		float: right !important;
	}
}

/*====================================================================
7. Clear
====================================================================*/

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

.clear-left {
	clear: left !important;
}

.clear-right {
	clear: right !important;
}

.clear-both {
	clear: both !important;
}

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

	.clear-sm-left {
		clear: left !important;
	}

	.clear-sm-right {
		clear: right !important;
	}

	.clear-sm-both {
		clear: both !important;
	}
}

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

	.clear-md-left {
		clear: left !important;
	}

	.clear-md-right {
		clear: right !important;
	}

	.clear-md-both {
		clear: both !important;
	}
}

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

	.clear-lg-left {
		clear: left !important;
	}

	.clear-lg-right {
		clear: right !important;
	}

	.clear-lg-both {
		clear: both !important;
	}
}

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

	.clear-xl-left {
		clear: left !important;
	}

	.clear-xl-right {
		clear: right !important;
	}

	.clear-xl-both {
		clear: both !important;
	}
}

/*====================================================================
8. Display
====================================================================*/

.d-initial {
	display: initial !important;
}

.d-none {
	display: none !important;
}

.d-inline {
	display: inline !important;
}

.d-inline-block {
	display: inline-block !important;
}

.d-block {
	display: block !important;
}

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

.d-inline-flex {
	display: inline-flex !important;
}

.d-table {
	display: table !important;
}

.d-table-row {
	display: table-row !important;
}

.d-table-column {
	display: table-column !important;
}

.d-table-cell {
	display: table-cell !important;
}

@media (min-width: 600px) {
	.d-sm-initial {
		display: initial !important;
	}

	.d-sm-none {
		display: none !important;
	}

	.d-sm-inline {
		display: inline !important;
	}

	.d-sm-inline-block {
		display: inline-block !important;
	}

	.d-sm-block {
		display: block !important;
	}

	.d-sm-flex {
		display: flex !important;
	}

	.d-sm-inline-flex {
		display: inline-flex !important;
	}

	.d-sm-table {
		display: table !important;
	}

	.d-sm-table-row {
		display: table-row !important;
	}

	.d-sm-table-column {
		display: table-column !important;
	}

	.d-sm-table-cell {
		display: table-cell !important;
	}
}

@media (min-width: 960px) {
	.d-md-initial {
		display: initial !important;
	}

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

	.d-md-inline {
		display: inline !important;
	}

	.d-md-inline-block {
		display: inline-block !important;
	}

	.d-md-block {
		display: block !important;
	}

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

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

	.d-md-table {
		display: table !important;
	}

	.d-md-table-row {
		display: table-row !important;
	}

	.d-md-table-column {
		display: table-column !important;
	}

	.d-md-table-cell {
		display: table-cell !important;
	}
}

@media (min-width: 1264px) {
	.d-lg-initial {
		display: initial !important;
	}

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

	.d-lg-inline {
		display: inline !important;
	}

	.d-lg-inline-block {
		display: inline-block !important;
	}

	.d-lg-block {
		display: block !important;
	}

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

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

	.d-lg-table {
		display: table !important;
	}

	.d-lg-table-row {
		display: table-row !important;
	}

	.d-lg-table-column {
		display: table-column !important;
	}

	.d-lg-table-cell {
		display: table-cell !important;
	}
}

@media (min-width: 1904px) {
	.d-xl-initial {
		display: initial !important;
	}

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

	.d-xl-inline {
		display: inline !important;
	}

	.d-xl-inline-block {
		display: inline-block !important;
	}

	.d-xl-block {
		display: block !important;
	}

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

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

	.d-xl-table {
		display: table !important;
	}

	.d-xl-table-row {
		display: table-row !important;
	}

	.d-xl-table-column {
		display: table-column !important;
	}

	.d-xl-table-cell {
		display: table-cell !important;
	}
}

/*====================================================================
9. Positions
====================================================================*/

.p-initial {
	position: initial !important;
}

.p-relative {
	position: relative !important;
}

.p-absolute {
	position: absolute !important;
}

.p-fixed {
	position: fixed !important;
}

.p-sticky {
	position: sticky !important;
}

@media (min-width: 600px) {
	.p-sm-initial {
		position: initial !important;
	}

	.p-sm-relative {
		position: relative !important;
	}

	.p-sm-absolute {
		position: absolute !important;
	}

	.p-sm-fixed {
		position: fixed !important;
	}

	.p-sm-sticky {
		position: sticky !important;
	}
}

@media (min-width: 960px) {
	.p-md-initial {
		position: initial !important;
	}

	.p-md-relative {
		position: relative !important;
	}

	.p-md-absolute {
		position: absolute !important;
	}

	.p-md-fixed {
		position: fixed !important;
	}

	.p-md-sticky {
		position: sticky !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-initial {
		position: initial !important;
	}

	.p-lg-relative {
		position: relative !important;
	}

	.p-lg-absolute {
		position: absolute !important;
	}

	.p-lg-fixed {
		position: fixed !important;
	}

	.p-lg-sticky {
		position: sticky !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-initial {
		position: initial !important;
	}

	.p-xl-relative {
		position: relative !important;
	}

	.p-xl-absolute {
		position: absolute !important;
	}

	.p-xl-fixed {
		position: fixed !important;
	}

	.p-xl-sticky {
		position: sticky !important;
	}
}

/*====================================================================
10. Offset
====================================================================*/

/*====================================================================
10.1. Offset -> Top
====================================================================*/

.top-initial {
	top: initial !important;
}

.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-half {
	top: 50% !important;
}

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

.top-topbar {
	top: var(--topbar-height) !important;
}

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

	.top-sm-0 {
		top: 0 !important;
	}

	.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-half {
		top: 50% !important;
	}

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

	.top-sm-topbar {
		top: var(--topbar-height) !important;
	}
}

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

	.top-md-0 {
		top: 0 !important;
	}

	.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-half {
		top: 50% !important;
	}

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

	.top-md-topbar {
		top: var(--topbar-height) !important;
	}
}

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

	.top-lg-0 {
		top: 0 !important;
	}

	.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-half {
		top: 50% !important;
	}

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

	.top-lg-topbar {
		top: var(--topbar-height) !important;
	}
}

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

	.top-xl-0 {
		top: 0 !important;
	}

	.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-half {
		top: 50% !important;
	}

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

	.top-xl-topbar {
		top: var(--topbar-height) !important;
	}
}

/*====================================================================
10.2. Offset -> Bottom
====================================================================*/

.bottom-initial {
	bottom: initial !important;
}

.bottom-0 {
	bottom: 0 !important;
}

.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-half {
	bottom: 50% !important;
}

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

.bottom-topbar {
	bottom: var(--topbar-height) !important;
}

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

	.bottom-sm-0 {
		bottom: 0 !important;
	}

	.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-half {
		bottom: 50% !important;
	}

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

	.bottom-sm-topbar {
		bottom: var(--topbar-height) !important;
	}
}

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

	.bottom-md-0 {
		bottom: 0 !important;
	}

	.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-half {
		bottom: 50% !important;
	}

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

	.bottom-md-topbar {
		bottom: var(--topbar-height) !important;
	}
}

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

	.bottom-lg-0 {
		bottom: 0 !important;
	}

	.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-half {
		bottom: 50% !important;
	}

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

	.bottom-lg-topbar {
		bottom: var(--topbar-height) !important;
	}
}

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

	.bottom-xl-0 {
		bottom: 0 !important;
	}

	.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-half {
		bottom: 50% !important;
	}

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

	.bottom-xl-topbar {
		bottom: var(--topbar-height) !important;
	}
}

/*====================================================================
10.3. Offset -> Left
====================================================================*/

.left-initial {
	left: initial !important;
}

.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-half {
	left: 50% !important;
}

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

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

	.left-sm-0 {
		left: 0 !important;
	}

	.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-half {
		left: 50% !important;
	}

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

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

	.left-md-0 {
		left: 0 !important;
	}

	.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-half {
		left: 50% !important;
	}

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

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

	.left-lg-0 {
		left: 0 !important;
	}

	.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-half {
		left: 50% !important;
	}

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

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

	.left-xl-0 {
		left: 0 !important;
	}

	.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-half {
		left: 50% !important;
	}

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

/*====================================================================
10.4. Offset -> Right
====================================================================*/

.right-initial {
	right: initial !important;
}

.right-0 {
	right: 0 !important;
}

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

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

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

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

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

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

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

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

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

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

.right-half {
	right: 50% !important;
}

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

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

	.right-sm-0 {
		right: 0 !important;
	}

	.right-sm-4 {
		right: 4px !important;
	}

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

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

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

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

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

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

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

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

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

	.right-sm-half {
		right: 50% !important;
	}

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

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

	.right-md-0 {
		right: 0 !important;
	}

	.right-md-4 {
		right: 4px !important;
	}

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

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

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

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

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

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

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

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

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

	.right-md-half {
		right: 50% !important;
	}

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

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

	.right-lg-0 {
		right: 0 !important;
	}

	.right-lg-4 {
		right: 4px !important;
	}

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

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

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

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

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

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

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

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

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

	.right-lg-half {
		right: 50% !important;
	}

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

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

	.right-xl-0 {
		right: 0 !important;
	}

	.right-xl-4 {
		right: 4px !important;
	}

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

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

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

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

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

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

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

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

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

	.right-xl-half {
		right: 50% !important;
	}

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

/*====================================================================
11. 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-quarter {
	width: 25% !important;
}

.width-half {
	width: 50% !important;
}

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

/*====================================================================
11.1. Width -> Max
====================================================================*/

.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-1024 {
	max-width: 1024px !important;
}

.max-width-quarter {
	max-width: 25% !important;
}

.max-width-half {
	max-width: 50% !important;
}

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

/*====================================================================
11.2. Width -> Min
====================================================================*/

.min-width-4 {
	min-width: 4px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.min-width-quarter {
	min-width: 25% !important;
}

.min-width-half {
	min-width: 50% !important;
}

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

/*====================================================================
12. Height
====================================================================*/

.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-1024 {
	height: 1024px !important;
}

.height-quarter {
	height: 25% !important;
}

.height-half {
	height: 50% !important;
}

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

.height-topbar {
	height: var(--topbar-height) !important;
}

/*====================================================================
12.1. Height -> Max
====================================================================*/

.max-height-4 {
	max-height: 4px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.max-height-1024 {
	max-height: 1024px !important;
}

.max-height-quarter {
	max-height: 25% !important;
}

.max-height-half {
	max-height: 50% !important;
}

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

.max-height-topbar {
	max-height: var(--topbar-height) !important;
}

/*====================================================================
12.2. Height -> Min
====================================================================*/

.min-height-4 {
	min-height: 4px !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.min-height-1024 {
	min-height: 1024px !important;
}

.min-height-quarter {
	min-height: 25% !important;
}

.min-height-half {
	min-height: 50% !important;
}

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

.min-height-topbar {
	min-height: var(--topbar-height) !important;
}

/*====================================================================
13. Aspect Ratio
====================================================================*/

.ar-1-1 {
	aspect-ratio: 1/1 !important;
}

.ar-2-1 {
	aspect-ratio: 2/1 !important;
}

.ar-3-1 {
	aspect-ratio: 3/1 !important;
}

.ar-4-1 {
	aspect-ratio: 4/1 !important;
}

.ar-3-2 {
	aspect-ratio: 3/2 !important;
}

.ar-4-3 {
	aspect-ratio: 4/3 !important;
}

.ar-16-9 {
	aspect-ratio: 16/9 !important;
}

.ar-2-3 {
	aspect-ratio: 2/3 !important;
}

.ar-3-4 {
	aspect-ratio: 3/4 !important;
}

.ar-9-16 {
	aspect-ratio: 9/16 !important;
}


@media (min-width: 600px) {
	.ar-sm-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-sm-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-sm-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-sm-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-sm-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-sm-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-sm-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-sm-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-sm-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-sm-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

@media (min-width: 960px) {
	.ar-md-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-md-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-md-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-md-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-md-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-md-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-md-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-md-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-md-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-md-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

@media (min-width: 1264px) {
	.ar-lg-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-lg-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-lg-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-lg-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-lg-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-lg-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-lg-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-lg-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-lg-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-lg-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

@media (min-width: 1904px) {
	.ar-xl-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-xl-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-xl-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-xl-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-xl-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-xl-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-xl-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-xl-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-xl-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-xl-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

/*====================================================================
14. 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;
}

/*====================================================================
15. Z Index
====================================================================*/

.z-index--1 {
	z-index: -1 !important;
}

.z-index-0 {
	z-index: 0 !important;
}

.z-index-1 {
	z-index: 1 !important;
}

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

.z-index-100 {
	z-index: 100 !important;
}

.z-index-1000 {
	z-index: 1000 !important;
}

.z-index-5000 {
	z-index: 5000 !important;
}

.z-index-10000 {
	z-index: 10000 !important;
}

.z-index-max {
	z-index: 2147483647 !important;
}

@media (min-width: 600px) {
	.z-index-sm--1 {
		z-index: -1 !important;
	}

	.z-index-sm-0 {
		z-index: 0 !important;
	}

	.z-index-sm-1 {
		z-index: 1 !important;
	}

	.z-index-sm-10 {
		z-index: 10 !important;
	}

	.z-index-sm-100 {
		z-index: 100 !important;
	}

	.z-index-sm-1000 {
		z-index: 1000 !important;
	}

	.z-index-sm-5000 {
		z-index: 5000 !important;
	}

	.z-index-sm-10000 {
		z-index: 10000 !important;
	}

	.z-index-sm-max {
		z-index: 2147483647 !important;
	}
}

@media (min-width: 960px) {
	.z-index-md--1 {
		z-index: -1 !important;
	}

	.z-index-md-0 {
		z-index: 0 !important;
	}

	.z-index-md-1 {
		z-index: 1 !important;
	}

	.z-index-md-10 {
		z-index: 10 !important;
	}

	.z-index-md-100 {
		z-index: 100 !important;
	}

	.z-index-md-1000 {
		z-index: 1000 !important;
	}

	.z-index-md-5000 {
		z-index: 5000 !important;
	}

	.z-index-md-10000 {
		z-index: 10000 !important;
	}

	.z-index-md-max {
		z-index: 2147483647 !important;
	}
}

@media (min-width: 1264px) {
	.z-index-lg--1 {
		z-index: -1 !important;
	}

	.z-index-lg-0 {
		z-index: 0 !important;
	}

	.z-index-lg-1 {
		z-index: 1 !important;
	}

	.z-index-lg-10 {
		z-index: 10 !important;
	}

	.z-index-lg-100 {
		z-index: 100 !important;
	}

	.z-index-lg-1000 {
		z-index: 1000 !important;
	}

	.z-index-lg-5000 {
		z-index: 5000 !important;
	}

	.z-index-lg-10000 {
		z-index: 10000 !important;
	}

	.z-index-lg-max {
		z-index: 2147483647 !important;
	}
}

@media (min-width: 1904px) {
	.z-index-xl--1 {
		z-index: -1 !important;
	}

	.z-index-xl-0 {
		z-index: 0 !important;
	}

	.z-index-xl-1 {
		z-index: 1 !important;
	}

	.z-index-xl-10 {
		z-index: 10 !important;
	}

	.z-index-xl-100 {
		z-index: 100 !important;
	}

	.z-index-xl-1000 {
		z-index: 1000 !important;
	}

	.z-index-xl-1 {
		z-index: 5000 !important;
	}

	.z-index-xl-10000 {
		z-index: 10000 !important;
	}

	.z-index-xl-max {
		z-index: 2147483647 !important;
	}
}

/*====================================================================
16. 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;
}

/*====================================================================
17. Round
====================================================================*/

.r-0,
.r-0:before {
	border-radius: 0px !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-28,
.r-28:before {
	border-radius: 28px !important;
}

.r-full,
.r-full:before {
	border-radius: 99999px !important;
}

@media (min-width: 600px) {
	.r-sm-0,
	.r-sm-0:before {
		border-radius: 0px !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-28,
	.r-sm-28:before {
		border-radius: 28px !important;
	}

	.r-sm-full,
	.r-sm-full:before {
		border-radius: 99999px !important;
	}
}

@media (min-width: 960px) {
	.r-md-0,
	.r-md-0:before {
		border-radius: 0px !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-28,
	.r-md-28:before {
		border-radius: 28px !important;
	}

	.r-md-full,
	.r-md-full:before {
		border-radius: 99999px !important;
	}
}

@media (min-width: 1264px) {
	.r-lg-0,
	.r-lg-0:before {
		border-radius: 0px !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-28,
	.r-lg-28:before {
		border-radius: 28px !important;
	}

	.r-lg-full,
	.r-lg-full:before {
		border-radius: 99999px !important;
	}
}

@media (min-width: 1904px) {
	.r-xl-0,
	.r-xl-0:before {
		border-radius: 0px !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-28,
	.r-xl-28:before {
		border-radius: 28px !important;
	}

	.r-xl-full,
	.r-xl-full:before {
		border-radius: 99999px !important;
	}
}

/*====================================================================
18. Backdrop
====================================================================*/

/*====================================================================
18.1. Backdrop -> Blur
====================================================================*/

.backdrop-blur-0 {
	-webkit-backdrop-filter: blur(0) !important;
	        backdrop-filter: blur(0) !important;
}

.backdrop-blur-2 {
	-webkit-backdrop-filter: blur(2px) !important;
	        backdrop-filter: blur(2px) !important;
}

.backdrop-blur-4 {
	-webkit-backdrop-filter: blur(4px) !important;
	        backdrop-filter: blur(4px) !important;
}

.backdrop-blur-8 {
	-webkit-backdrop-filter: blur(8px) !important;
	        backdrop-filter: blur(8px) !important;
}

.backdrop-blur-16 {
	-webkit-backdrop-filter: blur(16px) !important;
	        backdrop-filter: blur(16px) !important;
}

/*====================================================================
19. Typography
====================================================================*/

/*====================================================================
19.1. Typography -> html tags
====================================================================*/

html,
body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
}

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

a:hover {
	color: var(--primary-20);
}

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

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

::selection {
	color: var(--neutral-99);
	background: var(--primary-40);
	mix-blend-mode: revert !important;
	filter: hue-rotate(90deg);
}

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

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);
}

label {
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.5px;
}

/*====================================================================
19.2. Typography -> headings
====================================================================*/

h1 {
	font-weight: normal;
	font-size: 22px;
	line-height: 28px;
	margin-top: 0;
	margin-bottom: 8px;
}

h2 {
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	margin-top: 0;
	margin-bottom: 16px;
}

h3 {
	font-weight: normal;
	font-size: 18px;
	line-height: 24px;
	margin-top: 0;
	margin-bottom: 16px;
}

h4 {
	font-weight: 500;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0;
	margin-top: 0;
	margin-bottom: 8px;
}

h5 {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.1px;
	margin-top: 0;
	margin-bottom: 8px;
}

h6 {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	margin-top: 0;
	margin-bottom: 8px;
}

@media (min-width: 360px) {
	h1 {
		font-size: 32px;
		line-height: 40px;
	}

	h2 {
		font-size: 28px;
		line-height: 36px;
	}

	h3 {
		font-size: 24px;
		line-height: 32px;
	}
}

/*====================================================================
19.2. Typography -> Display
====================================================================*/

.text-display-l {
	font-weight: normal !important;
	font-size: 32px !important;
	line-height: 40px !important;
	letter-spacing: -0.25px !important;
	margin: 0 !important;
}

.text-display-m {
	font-weight: normal !important;
	font-size: 28px !important;
	line-height: 36px !important;
	margin: 0 !important;
}

.text-display-s {
	font-weight: normal !important;
	font-size: 22px !important;
	line-height: 32px !important;
	margin: 0 !important;
}

@media (min-width: 360px) {
	.text-display-l {
		font-size: 40px !important;
		line-height: 52px !important;
	}

	.text-display-m {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	.text-display-s {
		font-size: 28px !important;
		line-height: 36px !important;
	}
}

@media (min-width: 600px) {
	.text-display-l {
		font-size: 48px !important;
		line-height: 58px !important;
	}

	.text-display-m {
		font-size: 36px !important;
		line-height: 44px !important;
	}

	.text-display-s {
		font-size: 32px !important;
		line-height: 40px !important;
	}
}

@media (min-width: 1264px) {
	.text-display-l {
		font-size: 57px !important;
		line-height: 64px !important;
	}

	.text-display-m {
		font-size: 45px !important;
		line-height: 52px !important;
	}

	.text-display-s {
		font-size: 36px !important;
		line-height: 44px !important;
	}
}

@media (min-width: 1904px) {
	.text-display-l {
		font-size: 72px !important;
		line-height: 80px !important;
	}

	.text-display-m {
		font-size: 52px !important;
		line-height: 64px !important;
	}

	.text-display-s {
		font-size: 45px !important;
		line-height: 52px !important;
	}
}

/*====================================================================
19.3. Typography -> Headlines
====================================================================*/

.text-headline-l {
	font-weight: normal !important;
	font-size: 22px !important;
	line-height: 28px !important;
}

.text-headline-m {
	font-weight: normal !important;
	font-size: 20px !important;
	line-height: 24px !important;
}

.text-headline-s {
	font-weight: normal !important;
	font-size: 18px !important;
	line-height: 24px !important;
}

@media (min-width: 360px) {
	.text-headline-l {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	.text-headline-m {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	.text-headline-s {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}

/*====================================================================
19.4. Typography -> Titles
====================================================================*/

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

/*====================================================================
19.5. Typography -> Body
====================================================================*/

.text-body-l {
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0.5px !important;
}


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

/*====================================================================
19.6. Typography -> Labels
====================================================================*/

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

/*====================================================================
19.7. Typography -> Font Weights
====================================================================*/

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

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

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

.thin {
	font-weight: 100 !important;
}

/*====================================================================
19.8. Typography -> Text Align
====================================================================*/

.text-initial {
	text-align: initial !important;
}

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

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

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

@media (min-width: 600px) {
	.text-sm-initial {
		text-align: initial !important;
	}

	.text-sm-left {
		text-align: left !important;
	}

	.text-sm-center {
		text-align: center !important;
	}

	.text-sm-right {
		text-align: right !important;
	}
}

@media (min-width: 960px) {
	.text-md-initial {
		text-align: initial !important;
	}

	.text-md-left {
		text-align: left !important;
	}

	.text-md-center {
		text-align: center !important;
	}

	.text-md-right {
		text-align: right !important;
	}
}

@media (min-width: 1264px) {
	.text-lg-initial {
		text-align: initial !important;
	}

	.text-lg-left {
		text-align: left !important;
	}

	.text-lg-center {
		text-align: center !important;
	}

	.text-lg-right {
		text-align: right !important;
	}
}

@media (min-width: 1904px) {
	.text-xl-initial {
		text-align: initial !important;
	}

	.text-xl-left {
		text-align: left !important;
	}

	.text-xl-center {
		text-align: center !important;
	}

	.text-xl-right {
		text-align: right !important;
	}
}

/*====================================================================
19.9. Typography -> White Spaces
====================================================================*/

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

.white-space-normal {
	white-space: normal;
}

.white-space-pre {
	white-space: pre;
}

@media (min-width: 600px) {
	.white-space-sm-nowrap {
		white-space: nowrap;
	}

	.white-space-sm-normal {
		white-space: normal;
	}

	.white-space-sm-pre {
		white-space: pre;
	}
}

@media (min-width: 960px) {
	.white-space-md-nowrap {
		white-space: nowrap;
	}

	.white-space-md-normal {
		white-space: normal;
	}

	.white-space-md-pre {
		white-space: pre;
	}
}

@media (min-width: 1264px) {
	.white-space-lg-nowrap {
		white-space: nowrap;
	}

	.white-space-lg-normal {
		white-space: normal;
	}

	.white-space-lg-pre {
		white-space: pre;
	}
}

@media (min-width: 1904px) {
	.white-space-xl-nowrap {
		white-space: nowrap;
	}

	.white-space-xl-normal {
		white-space: normal;
	}

	.white-space-xl-pre {
		white-space: pre;
	}
}

/*====================================================================
20. 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;
}

@media (min-width: 600px) {
	.m-sm-auto {
		margin: auto !important;
	}

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

@media (min-width: 960px) {
	.m-md-auto {
		margin: auto !important;
	}

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

@media (min-width: 1264px) {
	.m-lg-auto {
		margin: auto !important;
	}

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

@media (min-width: 1904px) {
	.m-xl-auto {
		margin: auto !important;
	}

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

/*====================================================================
20.1. Margin -> Left
====================================================================*/

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

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

	.ml-sm-0 {
		margin-left: 0 !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;
	}
}

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

	.ml-md-0 {
		margin-left: 0 !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;
	}
}

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

	.ml-lg-0 {
		margin-left: 0 !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;
	}
}

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

	.ml-xl-0 {
		margin-left: 0 !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;
	}
}

/*====================================================================
20.2. Margin -> Right
====================================================================*/

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

@media (min-width: 600px) {
	.mr-sm-auto {
		margin-right: auto !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;
	}
}

@media (min-width: 960px) {
	.mr-md-auto {
		margin-right: auto !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;
	}
}

@media (min-width: 1264px) {
	.mr-lg-auto {
		margin-right: auto !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;
	}
}

@media (min-width: 1904px) {
	.mr-xl-auto {
		margin-right: auto !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;
	}
}

/*====================================================================
20.3. Margin -> Top
====================================================================*/

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

@media (min-width: 600px) {
	.mt-sm-auto {
		margin-top: auto !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;
	}
}

@media (min-width: 960px) {
	.mt-md-auto {
		margin-top: auto !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;
	}
}

@media (min-width: 1264px) {
	.mt-lg-auto {
		margin-top: auto !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;
	}
}

@media (min-width: 1904px) {
	.mt-xl-auto {
		margin-top: auto !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;
	}
}

/*====================================================================
20.4. Margin -> Bottom
====================================================================*/

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

@media (min-width: 600px) {
	.mb-sm-auto {
		margin-bottom: auto !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;
	}
}

@media (min-width: 960px) {
	.mb-md-auto {
		margin-bottom: auto !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;
	}
}

@media (min-width: 1264px) {
	.mb-lg-auto {
		margin-bottom: auto !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;
	}
}

@media (min-width: 1904px) {
	.mb-xl-auto {
		margin-bottom: auto !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;
	}
}

/*====================================================================
20.5. Margin -> Left and Right (X)
====================================================================*/

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

@media (min-width: 600px) {
	.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;
	}
}

@media (min-width: 960px) {
	.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;
	}
}

@media (min-width: 1264px) {
	.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;
	}
}

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

	.mx-xl-0 {
		margin-top: 0 !important;
	}

	.mx-xl-4 {
		margin-top: 4px !important;
	}

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

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

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

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

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

/*====================================================================
20.6. Margin -> Top and Bottom (Y)
====================================================================*/

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

/*====================================================================
21. Padding
====================================================================*/

.p-auto {
	padding: auto !important;
}

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

@media (min-width: 600px) {
	.p-sm-auto {
		padding: auto !important;
	}

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

@media (min-width: 960px) {
	.p-md-auto {
		padding: auto !important;
	}

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

@media (min-width: 1264px) {
	.p-lg-auto {
		padding: auto !important;
	}

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

@media (min-width: 1904px) {
	.p-xl-auto {
		padding: auto !important;
	}

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

/*====================================================================
21.1. Padding -> Left
====================================================================*/

.pl-auto {
	padding-left: auto !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;
}

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

	.pl-sm-0 {
		padding-left: 0 !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;
	}
}

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

	.pl-md-0 {
		padding-left: 0 !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;
	}
}

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

	.pl-lg-0 {
		padding-left: 0 !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;
	}
}

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

	.pl-xl-0 {
		padding-left: 0 !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;
	}
}

/*====================================================================
21.2. Padding -> Right
====================================================================*/

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

@media (min-width: 600px) {
	.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;
	}
}

@media (min-width: 960px) {
	.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;
	}
}

@media (min-width: 1264px) {
	.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;
	}
}

@media (min-width: 1904px) {
	.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;
	}
}

/*====================================================================
21.3. Padding -> Top
====================================================================*/

.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-80 {
	padding-top: 80px !important;
}

@media (min-width: 600px) {
	.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;
	}
}

@media (min-width: 960px) {
	.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;
	}
}

@media (min-width: 1264px) {
	.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;
	}
}

@media (min-width: 1904px) {
	.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;
	}
}

/*====================================================================
21.4. Padding -> Bottom
====================================================================*/

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

@media (min-width: 600px) {
	.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;
	}
}

@media (min-width: 960px) {
	.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;
	}
}

@media (min-width: 1264px) {
	.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;
	}
}

@media (min-width: 1904px) {
	.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;
	}
}

/*====================================================================
21.5. Padding -> Left and Right (X)
====================================================================*/

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

@media (min-width: 600px) {
	.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;
	}
}

@media (min-width: 960px) {
	.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;
	}
}

@media (min-width: 1264px) {
	.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;
	}
}

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

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

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

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

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

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

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

/*====================================================================
21.6. Padding -> Top and Bottom (Y)
====================================================================*/

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

/*====================================================================
22. Colors
====================================================================*/

/*====================================================================
22.1. Colors -> Light theme background
====================================================================*/

.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-surface,
.bg-background {
	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);
}

/*====================================================================
22.2. Colors -> Dark theme background
====================================================================*/

.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-surface,
.dark .bg-background {
	color: var(--neutral-90);
	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);
}

/*====================================================================
22.3. Colors -> 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-on-surface {
	color: var(--neutral-10) !important;
}

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

/*====================================================================
22.4. Colors -> 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-on-surface {
	color: var(--neutral-99) !important;
}

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

/*====================================================================
22.5. Colors -> Background Colors
====================================================================*/

/*====================================================================
22.5.1. Colors -> Background Colors -> Primary
====================================================================*/

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

/*====================================================================
22.5.2. Colors -> Background Colors -> Secondary
====================================================================*/

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

/*====================================================================
22.5.3. Colors -> Background Colors -> Tertiary
====================================================================*/

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

/*====================================================================
22.5.4. Colors -> Background Colors -> Error
====================================================================*/

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

/*====================================================================
22.5.5. Colors -> Background Colors -> Neutral
====================================================================*/

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

/*====================================================================
22.5.6. Colors -> Background Colors -> Neutral Variant
====================================================================*/

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

/*====================================================================
22.6. Colors -> Colors
====================================================================*/

/*====================================================================
22.6.1. Colors -> Colors -> Primary
====================================================================*/

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

/*====================================================================
22.6.2. Colors -> Colors -> Secondary
====================================================================*/

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

/*====================================================================
22.6.3. Colors -> Colors -> Tertiary
====================================================================*/

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

/*====================================================================
22.6.4. Colors -> Colors -> Error
====================================================================*/

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

/*====================================================================
22.6.5. Colors -> Colors -> Neutral
====================================================================*/

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

/*====================================================================
22.6.6. Colors -> Colors -> Neutral Variant
====================================================================*/

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

/*====================================================================
22.7. Colors -> Black and white
====================================================================*/

.bg-white {
	background-color: #FFFFFF !important;
}

.bg-black {
	background-color: #000000 !important;
}

.color-white {
	color: #FFFFFF !important;
}

.color-black {
	color: #000000 !important;
}

/*====================================================================
23. 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;
}

/*--------------------------------------------------------------
# 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: 8px 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);
}

.mb-0 {
	margin-bottom: 0 !important;
}

/*--------------------------------------------------------------
## BUTTONS PRIMARY
--------------------------------------------------------------*/

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

.azura-button.azura-button-icon {
	padding-left: 16px;
}

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

.azura-button:hover {
	color: #FFFFFF;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.azura-button:visited {
	color: #FFFFFF;
}

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

.azura-button:hover:before {
	opacity: .08;
}

.azura-button:focus:before {
	opacity: .12;
}

.azura-button.disabled,
.azura-button[disabled] {
	cursor: default;
	color: var(--neutral-10);
	background-color: transparent;
}

.azura-button.disabled:hover,
.azura-button[disabled]:hover {
	box-shadow: none;
}

.dark .azura-button.disabled,
.dark .azura-button[disabled] {
	color: var(--neutral-90);
}

.azura-button.disabled > span,
.azura-button[disabled] > span {
	color: var(--neutral-10);
	opacity: .38;
}

.dark .azura-button.disabled > span,
.dark .azura-button[disabled] > span {
	color: var(--neutral-90);
}

.azura-button.disabled:before,
.azura-button[disabled]:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .azura-button.disabled:before,
.dark .azura-button[disabled]:before {
	background-color: #E3E3E3;
}


/*--------------------------------------------------------------
## BUTTONS OUTLINED
--------------------------------------------------------------*/

.azura-button.outlined {
	border: 1px solid var(--neutral-v-50);
	background-color: transparent;
	color: var(--primary-40);
}

.dark .azura-button.outlined {
	border: 1px solid var(--neutral-v-60);
	background-color: transparent;
	color: var(--primary-80);
}

.azura-button.outlined:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.azura-button.outlined:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.azura-button.outlined:focus {
	border-color: var(--primary-40);
}

.dark .azura-button.outlined:focus {
	border-color: var(--primary-80);
}

.azura-button.outlined:hover {
	box-shadow: none;
}

.azura-button.outlined.disabled,
.azura-button.outlined[disabled] {
	border-color: rgba(31, 31, 31, .12);
}

.dark .azura-button.outlined.disabled,
.dark .azura-button.outlined[disabled] {
	border-color: rgba(227, 227, 227, 0.12);
}

.azura-button.outlined.disabled:before,
.azura-button.outlined[disabled]:before,
.azura-button.outlined.disabled:hover:before,
.azura-button.outlined[disabled]:hover:before,
.azura-button.outlined.disabled:focus:before,
.azura-button.outlined[disabled]:focus:before {
	opacity: 0;
}

/*--------------------------------------------------------------
## BUTTONS TEXT
--------------------------------------------------------------*/

.azura-button.text {
	background-color: transparent;
	color: var(--primary-40);
}

.dark .azura-button.text {
	color: var(--primary-80);
}

.azura-button.text:hover {
	box-shadow: none;
}

.azura-button.text:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.azura-button.text:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.azura-button.text.disabled:before,
.azura-button.text[disabled]:before,
.azura-button.text.disabled:hover:before,
.azura-button.text[disabled]:hover:before,
.azura-button.text.disabled:focus:before,
.azura-button.text[disabled]:focus:before {
	opacity: 0;
}

/*--------------------------------------------------------------
## BUTTONS ELEVATED
--------------------------------------------------------------*/

.azura-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 .azura-button.elevated {
	color: var(--primary-80);
}

.azura-button.elevated:before {
	background-color: var(--primary-40);
	opacity: .05;
}

.dark .azura-button.elevated:before {
	background-color: var(--primary-80);
	opacity: .08;
}

.azura-button.elevated:hover:before {
	background-color: var(--primary-40);
	opacity: .08;
}

.dark .azura-button.elevated:hover:before {
	background-color: var(--primary-80);
	opacity: .11;
}

.azura-button.elevated:focus:before {
	background-color: var(--primary-40);
	opacity: .11;
}

.dark .azura-button.elevated:focus:before {
	background-color: var(--primary-80);
	opacity: .16;
}

.azura-button.elevated.disabled,
.azura-button.elevated[disabled] {
	box-shadow: none;
}

.azura-button.elevated.disabled:before,
.azura-button.elevated[disabled]:before,
.azura-button.elevated.disabled:hover:before,
.azura-button.elevated[disabled]:hover:before,
.azura-button.elevated.disabled:focus:before,
.azura-button.elevated[disabled]:focus:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .azura-button.elevated.disabled:before,
.dark .azura-button.elevated[disabled]:before,
.dark .azura-button.elevated.disabled:hover:before,
.dark .azura-button.elevated[disabled]:hover:before,
.dark .azura-button.elevated.disabled:focus:before,
.dark .azura-button.elevated[disabled]:focus:before {
	background-color: #E3E3E3;
	opacity: .12;
}

/*--------------------------------------------------------------
## BUTTONS TONAL
--------------------------------------------------------------*/

.azura-button.tonal {
	color: var(--secondary-10);
	background-color: var(--secondary-90);
}

.dark .azura-button.tonal {
	color: var(--secondary-90);
	background-color: var(--secondary-30);
}

.azura-button.tonal:before {
	background-color: currentColor;
}

.azura-button.tonal.disabled,
.azura-button.tonal[disabled] {
	cursor: default;
	color: var(--neutral-10);
	background-color: transparent;
}

.azura-button.tonal.disabled:hover,
.azura-button.tonal[disabled]:hover {
	box-shadow: none;
}

.dark .azura-button.tonal.disabled,
.dark .azura-button.tonal[disabled] {
	color: var(--neutral-90);
}

.azura-button.tonal.disabled > span,
.azura-button.tonal[disabled] > span {
	color: var(--neutral-10);
	opacity: .38;
}

.dark .azura-button.tonal.disabled > span,
.dark .azura-button.tonal[disabled] > span {
	color: var(--neutral-90);
}

.azura-button.tonal.disabled:before,
.azura-button.tonal[disabled]:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .azura-button.tonal.disabled:before,
.dark .azura-button.tonal[disabled]:before {
	background-color: #E3E3E3;
}

/*--------------------------------------------------------------
## BUTTONS SIZE
--------------------------------------------------------------*/

.azura-button.azura-button-s {
	height: 24px;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.5px;
	padding: 0 16px;
}

.azura-button.azura-button-s.azura-button-icon {
	padding-left: 12px;
}

.azura-button.azura-button-m {
	height: 32px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.5px;
	padding: 0 20px;
}

.azura-button.azura-button-m.azura-button-icon {
	padding-left: 14px;
}

/*--------------------------------------------------------------
## BUTTONS SQUARE
--------------------------------------------------------------*/

.azura-button.azura-button-square {
	height: 32px;
	width: 32px;
	background-color: transparent;
	color: var(--primary-40);
}

.azura-button.azura-button-square:hover {
	box-shadow: none;
}

.dark .azura-button.azura-button-square {
	color: var(--primary-80);
}

.azura-button.azura-button-square:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.azura-button.azura-button-square:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.azura-button.azura-button-square.disabled:before,
.azura-button.azura-button-square[disabled]:before,
.azura-button.azura-button-square.disabled:hover:before,
.azura-button.azura-button-square[disabled]:hover:before,
.azura-button.azura-button-square.disabled:focus:before,
.azura-button.azura-button-square[disabled]:focus:before {
	opacity: 0;
}

.azura-button.azura-button-square > span {
	font-size: 24px;
}

/*******
        Edited
*******/


.gw-mm-item__link > a,
.gw-mm-item__link > a:visited,
.gw-mm-item__link > a:hover {
    color: var(--primary-99) !important;
    font-weight: 400 !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;

}
  
.wp-block-site-logo img {
    max-width: 90%;
}




@media(max-width: 1300px){
    .wp-block-lazyblock-header-social-links{
        display: none;
        visibility:hidden;
    }
    
    .wp-block-site-logo img {
    max-width: 70%;
}
    
    .gw-mm-item__link > a,
    .gw-mm-item__link > a:visited,
    .gw-mm-item__link > a:hover {
        
    font-size: 16px !important;
    white-space: nowrap !important;

    }
  
    .wp-block-group .wp-block-lazyblock-search-products{
        max-width: 80%;
    }
    
    .wp-block-group .wp-block-getwid-megamenu {
        max-width: 130%;
    }
    
}

@media(max-width: 1100px){
    .wp-block-lazyblock-header-social-links{
        display: none;
        visibility:hidden;
    }
    
    .wp-block-site-logo img {
    max-width: 60%;
}
    
    .gw-mm-item__link > a,
    .gw-mm-item__link > a:visited,
    .gw-mm-item__link > a:hover {
        
    font-size: 14px !important;
    white-space: nowrap !important;

    }
  
    .wp-block-group .wp-block-lazyblock-search-products{
        max-width: 60%;
    }
    
    .wp-block-group .wp-block-getwid-megamenu {
        max-width: 130%;
    }
    
    .gw-mm-item.has-children .gw-mm-item__link a {
        padding: 2px 2px 2px 2px !important;
}
    
}

@media (max-width: 786px) {
	.gw-mm-item__link > a,
.gw-mm-item__link > a:visited,
.gw-mm-item__link > a:hover{
      font-size: 22px !important;
}
}
	
.gw-mm-item__dropdown-wrapper {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 0 !important;
	overflow: hidden;
	top: 80px !important;
	z-index: 1 !important;
}

.admin-bar .gw-mm-item__dropdown-wrapper {
	top: 112px !important;
	
}

.gw-mm-item__dropdown {
	background: rgb(192,0,21);
	background: -moz-linear-gradient(180deg, rgba(192,0,21,1) 0%, rgba(255,137,127,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(192,0,21,1) 0%, rgba(255,137,127,1) 100%);
	background: linear-gradient(180deg, rgba(192,0,21,1) 0%, rgba(255,137,127,1) 100%);
	padding-bottom: 0px;
}


/*--------------------------------------------------------------
## FILTRE
--------------------------------------------------------------*/

.azura-filters-container ul {
	padding-left: 16px;
	padding-right: 16px;
}

.azura-filters-container ul li ul {
	padding: 0;
}

.azura-filters-container .meta-slider {
	margin-right: 0;
	max-width: initial;
}

.azura-filters-container .noUi-handle {
	box-shadow: none;
}

.azura-filters-container .noUi-handle:after,
.azura-filters-container .noUi-handle:before {
	display: none;
}

.azura-filters-container .noUi-connect {
	background-color: var(--secondary-40);
}

.azura-filters-container .noUi-target {
	box-shadow: none;
	border: none;
	background-color: var(--neutral-80);
}

.azura-filters-container .sf-input-range-number {
	display: block;
	font-family: Roboto;
	height: 32px;
	width: 100%;
	padding: 8px 16px 8px 16px;
	border: none;
	outline: none;
	border-radius: 4px 4px 0 0;
	color: var(--neutral-20);
	background-color: var(--neutral-v-90);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
	transition: border-color .175s cubic-bezier(.25,.8,.5,1);
	max-width: initial;
	
}

.sf-meta-range-slider label {
	display: inline-block;
	width: calc(50% - 20px);
	margin-right: -4px;
}

.sf-range-values-seperator {
	display: inline-block;
	width: 40px;
	text-align: center;
	margin-right: -4px;
}

.azura-filters-container .noUi-target {
	height: 8px;
}

.azura-filters-container .searchandfilter .noUi-horizontal .noUi-handle {
	top: -8px;
}

.azura-filters-container .searchandfilter .meta-slider {
	margin-top: 16px;
	margin-bottom: 8px;
}

.azura-filters-container .sf-level-0  {
    font-size: 16px;
    font-weight: bold;
    line-height: 16px;
    display: grid;
    grid-template-columns: 1em auto;
    gap: 16px;
}
}

.azura-filters-container .sf-level-0  + .sf-level-0 {
  margin-top: 1em;
}

.azura-filters-container input[type=checkbox] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  -moz-appearance: none;
       appearance: none;
  /* For iOS < 15 */
  background-color: var(--form-background);
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: var(--secondary-40);
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid var(--secondary-40);
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

.azura-filters-container input[type=checkbox]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
          clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--secondary-40);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

.azura-filters-container input[type=checkbox]:checked::before {
  transform: scale(1);
}

.azura-filters-container input[type=checkbox]:focus {
  outline: max(2px, 0.15em) solid var(--secondary-40);
  outline-offset: max(2px, 0.15em);
}

.azura-filters-container input[type=checkbox]:disabled {
  --form-control-color: var(--form-control-disabled);
  color: var(--form-control-disabled);
  cursor: not-allowed;
}

/*--------------------------------------------------------------
# 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;
}

/*--------------------------------------------------------------
# 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);
	}
}

/*--------------------------------------------------------------
# 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;
}

.white-link,
.white-link a {
    color: var(--neutral-99) !important;
}

.white-link:hover,
.white-link a:hover {
    color: var(--primary-95) !important;
}

/*--------------------------------------------------------------
# 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;
	}
}

.language-fleg > a {
	position: relative;
}

.language-fleg.active:after {
	content: "";
	position: absolute;
	display: block;
	top: -6px;
	left: -6px;
	right: -6px;
	bottom: -6px;
	border: 2px solid #FFF;
	border-radius: 9999px;
/*	width: 36px;
  height: 36px;
  margin-top: -23px;
  margin-left: -1px;
*/}

.language-fleg img {
	border-radius: 9999px;
	border: none;
}

#meniu-produse-mobile {
	display: none;
}

#meniu-produse-mobile.opened {
	display: block;
}

.footer-contact-card {
	margin: 0 !important;
}

.footer-contact-card td {
	vertical-align: top !important;
	padding-bottom: 8px;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
	color: var(--neutral-10);
}
.footer-contact-card td a{
	color: var(--neutral-10)!important;
}


.footer-contact-card td:first-child {
	white-space: nowrap;
	padding-right: 16px;
	color: var(--primary-40);
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex !important;
	width: 32px !important;
	height: 32px !important;
	align-items: center !important;
}




/*COSTIN*/


.bg-white {
    bakground-color: #fff;
}

.hover-bg-secondary-90 {
    transition: all .175s ease-in-out !important;
}
.hover-bg-secondary-90:hover {
    background-color: var(--secondary-90) !important;
}
.about-page-row a {
    color: #fff;
}
@media (min-width: 601px) and (max-width: 959px) {
    .logos-row .wp-block-azura-column {
        width: 33%;
    }
}
@media (min-width: 601px) and (max-width: 900px) {
    .prod-row-home li {
        width: calc(50% - 0.9375em)!important;
    }
}

.slick-arrow {
	z-index: 100000 !important;
}

.slick-prev.slick-arrow {
		content: "";
		width: 64px;
		height: 64px;
		left: 0px;
		background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0IiBmaWxsPSJub25lIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzU0ODAxXzQ4MSkiPgo8cGF0aCBkPSJNNDEuMDkzMyA0NC4yNEwyOC44Nzk5IDMyTDQxLjA5MzMgMTkuNzZMMzcuMzMzMyAxNkwyMS4zMzMzIDMyTDM3LjMzMzMgNDhMNDEuMDkzMyA0NC4yNFoiIGZpbGw9IiNDMDAwMTUiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81NDgwMV80ODEiPgo8cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+');
	}

	.slick-next.slick-arrow {
		content: "";
		width: 64px;
		height: 64px;
		right: 0px;
		background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0IiBmaWxsPSJub25lIj4KPHBhdGggZD0iTTIyLjkwNjYgMTkuNzZMMzUuMTIgMzJMMjIuOTA2NiA0NC4yNEwyNi42NjY2IDQ4TDQyLjY2NjYgMzJMMjYuNjY2NiAxNkwyMi45MDY2IDE5Ljc2WiIgZmlsbD0iI0MwMDAxNSIvPgo8L3N2Zz4=');
	}

	.slick-prev.slick-arrow:before,
	.slick-next.slick-arrow:before {
		display: none;
	}

@media (min-width: 1380px) {

	.slick-prev.slick-arrow {
		left: -64px;
		top: 97px;
	}

	.slick-next.slick-arrow {
		right: -64px;
		top: 97px;
	}


}

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

.footer-addresses {

}


.portrait-image {
	max-height: 512px;
}