@charset "UTF-8";

/**
 * @internal Template
 * @author Benjamin Retel - rbCREATION [https://www.rbcreation.fr]
 * @copyright (c) 2018 - Today. All rights reserved.
 */

/* Ubuntu (default) */
/*@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,400italic,600,600italic,700");*/

/* Roboto */
@import url("../fonts/Roboto/font.css");
/*@import url("https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,500italic,700");*/

/* Icons: Material Design */
@import url("../icons/material-icons/icons.css");

/* -------------------- */

:root {
	--xs: 240px;
	--s: 480px;
	--m: 720px;
	--l: 960px;
	--xl: 1200px;
	--size-1: 2px;
	--size-2: 4px;
	--size-3: 8px;
	--size-4: 16px;
	--size-5: 32px;
	--size-6: 64px;
	--font-family-default: "Roboto", sans-serif;
	--font-size-default: 16px;
	--font-weight-thin: 100;
	--font-weight-extra-light: 200;
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semi-bold: 600;
	--font-weight-bold: 700;
	--font-weight-extra-bold: 800;
	--font-weight-black: 900;
	--color-default: #252525;
	--color-primary: #ff9100;
	--color-secondary: #ffcf00;
	--color-tertiary: #cfcfcf;
	--color-black: #000000;
	--color-white: #ffffff;
	--color-primary-50: #fff8e1;
	--color-primary-100: #ffecb3;
	--color-primary-200: #ffe183;
	--color-primary-300: #ffd650;
	--color-primary-400: #ffcb29;
	--color-primary-500: #ffc20a;
	--color-primary-600: #ffb402;
	--color-primary-700: #ffa101;
	--color-primary-800: #ff9100;
	--color-primary-900: #ff7100;
	--color-gray-50: #fbfbfb;
	--color-gray-100: #f6f6f6;
	--color-gray-200: #f1f1f1;
	--color-gray-300: #e4e4e4;
	--color-gray-400: #c2c2c2;
	--color-gray-500: #a3a3a3;
	--color-gray-600: #7a7a7a;
	--color-gray-700: #666666;
	--color-gray-800: #464646;
	--color-gray-900: #252525;
	--color-text: #252525;
	--color-info: #0066cc;
	--color-warning: #ff3300;
	--color-muted: #bebebe;
	--color-error: #cc0000;
	--color-progress: #ff7100;
	--color-success: #00BB00;
	--background-info: #cceeff;
	--background-warning: rgba(255, 51, 0, 0.1);
	--background-error: #ffdddd;
	--background-progress: #ffecb3;
	--background-success: #ddffdd;
	--border-width: 1px;
	--border-style: solid;
	--border-color: #252525;
	--border-radius-1: 2px;
	--border-radius-2: 4px;
	--border-radius-3: 8px;
	--border-radius-4: 16px;
	--border-radius-5: 32px;
	--border-radius-pill: 500px;
	--rounded: 4px;
	--box-shadow-1: 1px 1px 5px 0px rgba(000, 000, 000, 0.1);
	--box-shadow-2: 1px 1px 10px 0px rgba(000, 000, 000, 0.2);
	--box-shadow-internal-1: 1px 1px 5px 0px rgba(000, 000, 000, 0.1) inset;
	--box-shadow-internal-2: 1px 1px 10px 0px rgba(000, 000, 000, 0.2) inset;
	--transition-button: all 0.1s linear;
	--transition-link: all 0.1s linear;
}

/* -------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* -------------------- */

html {
	height: 100%;
	/* Font size for rem unity : 16px*62.5/100=10px */
	/* Ex : 1rem = 10px, 1.4rem = 14px */
	/*font-size: 62.5%;*/
}

body {
	height: 100%;
	font-family: var(--font-family-default);
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-normal);
	font-style: normal;
	color: var(--color-text);
	text-align: center;
	background: var(--color-gray-100);
	background-image: url("../img/bg.png");
	background-position: center top;
	background-repeat: repeat;
	padding: 0;
	margin: 0 auto;
}

/* -------------------- */

a,
article,
h1,
h2,
h3,
h4,
h5,
h6,
header,
img,
li,
p,
nav,
section,
span,
ul {
	word-wrap: break-word;
	margin: 0;
	padding: 0;
}

/* -------------------- */

a,
a:link,
a:visited,
a:hover {
	font-family: var(--font-family-default);
	font-weight: var(--font-weight-light);
	color: var(--color-primary);
	text-decoration: underline;
	cursor: pointer;
}

a:hover {
	opacity: 0.75;
}

/* -------------------- */

img {
	border-width: 0;
	border-style: none;
	list-style-type: none;
	line-height: 0;
}

/* -------------------- */

input,
select,
textarea {
	display: block;
	font-family: var(--font-family-default);
	font-size: var(--font-size-default);
	color: var(--color-black);
	background-color: transparent;
	outline: none;
	border: none;
}

/* -------------------- */

li {
	list-style: none;
	text-align: left;
}

/* -------------------- */

p {
	line-height: 1.5;
	text-align: left;
}

p + p {
	margin-top: var(--size-3);
}

/* -------------------- */
/* -------------------- */

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

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

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

/* -------------------- */

.flex-row {
	flex-direction: row !important;
}

.flex-column {
	flex-direction: column !important;
}

.flex-row-reverse {
	flex-direction: row-reverse !important;
}

.flex-column-reverse {
	flex-direction: column-reverse !important;
}

/* -------------------- */

.flex-wrap {
	flex-wrap: wrap !important;
}

.flex-nowrap {
	flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
	flex-wrap: wrap-reverse !important;
}

/* -------------------- */

.justify-content-start {
	justify-content: flex-start !important;
}

.justify-content-center {
	justify-content: center !important;
}

.justify-content-end {
	justify-content: flex-end !important;
}

/* -------------------- */

.align-items-start {
	align-items: flex-start !important;
}

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

.align-items-end {
	align-items: flex-end !important;
}

/* -------------------- */

.w-auto {
	width: auto !important;
}

.w-25 {
	width: 25% !important;
}

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

.w-75 {
	width: 75% !important;
}

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

/* -------------------- */

.w-xs {
	width: var(--xs) !important;
}

.w-s {
	width: var(--s) !important;
}

.w-m {
	width: var(--m) !important;
}

.w-l {
	width: var(--l) !important;
}

.w-xl {
	width: var(--xl) !important;
}

/* -------------------- */

.minw-xs {
	min-width: var(--xs) !important;
}

.minw-s {
	min-width: var(--s) !important;
}

.minw-m {
	min-width: var(--m) !important;
}

.minw-l {
	min-width: var(--l) !important;
}

.minw-xl {
	min-width: var(--xl) !important;
}

/* -------------------- */

.maxw-xs {
	max-width: var(--xs) !important;
}

.maxw-s {
	max-width: var(--s) !important;
}

.maxw-m {
	max-width: var(--m) !important;
}

.maxw-l {
	max-width: var(--l) !important;
}

.maxw-xl {
	max-width: var(--xl) !important;
}

/* -------------------- */

.h-auto {
	height: auto !important;
}

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

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

.h-75 {
	height: 75% !important;
}

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

/* -------------------- */

.overflow-auto {
	overflow: auto !important;
}

.overflow-x-auto {
	overflow-x: auto !important;
}

.overflow-y-auto {
	overflow-y: auto !important;
}

.overflow-scroll {
	overflow: scroll !important;
}

.overflow-x-scroll {
	overflow-x: scroll !important;
}

.overflow-y-scroll {
	overflow-y: scroll !important;
}

.overflow-hidden {
	overflow: hidden !important;
}

.overflow-x-hidden {
	overflow-x: hidden !important;
}

.overflow-y-hidden {
	overflow-y: hidden !important;
}

/* -------------------- */

.font-size-10 {
	font-size: 10px !important;
}

.font-size-12 {
	font-size: 12px !important;
}

.font-size-14 {
	font-size: 14px !important;
}

.font-size-16 {
	font-size: 16px !important;
}

.font-size-18 {
	font-size: 18px !important;
}

.font-size-20 {
	font-size: 20px !important;
}

.font-size-22 {
	font-size: 22px !important;
}

.font-size-24 {
	font-size: 24px !important;
}

.font-size-28 {
	font-size: 28px !important;
}

.font-size-36 {
	font-size: 36px !important;
}

.font-size-48 {
	font-size: 48px !important;
}

/* -------------------- */

.font-weight-thin {
	font-weight: var(--font-weight-thin) !important;
}

.font-weight-extra-light {
	font-weight: var(--font-weight-extra-light) !important;
}

.font-weight-light {
	font-weight: var(--font-weight-light) !important;
}

.font-weight-normal {
	font-weight: var(--font-weight-normal) !important;
}

.font-weight-medium {
	font-weight: var(--font-weight-medium) !important;
}

.font-weight-semi-bold {
	font-weight: var(--font-weight-semi-bold) !important;
}

.font-weight-bold {
	font-weight: var(--font-weight-bold) !important;
}

.font-weight-extra-bold {
	font-weight: var(--font-weight-extra-bold) !important;
}

.font-weight-black {
	font-weight: var(--font-weight-black) !important;
}

/* -------------------- */

.font-style-italic {
	font-style: italic !important;
}

.font-style-normal {
	font-style: normal !important;
}

/* -------------------- */

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

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

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

.text-black {
	color: var(--color-black) !important;
}

.text-white {
	color: var(--color-white) !important;
}

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

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

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

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

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

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

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

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

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

.text-primary-900 {
	color: var(--color-primary-900) !important;
}*/

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

.text-gray-100 {
	color: var(--color-gray-100) !important;
}

.text-gray-200 {
	color: var(--color-gray-200) !important;
}

.text-gray-300 {
	color: var(--color-gray-300) !important;
}

.text-gray-400 {
	color: var(--color-gray-400) !important;
}

.text-gray-500 {
	color: var(--color-gray-500) !important;
}

.text-gray-600 {
	color: var(--color-gray-600) !important;
}

.text-gray-700 {
	color: var(--color-gray-700) !important;
}

.text-gray-800 {
	color: var(--color-gray-800) !important;
}

.text-gray-900 {
	color: var(--color-gray-900) !important;
}

.text-info {
	color: var(--color-info) !important;
}

.text-warning {
	color: var(--color-warning) !important;
}

.text-muted {
	color: var(--color-muted) !important;
}

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

.text-progress {
	color: var(--color-progress) !important;
}

.text-success {
	color: var(--color-success) !important;
}

/* -------------------- */

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

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

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

/* -------------------- */

.word-break-all {
	word-break: break-all !important;
}

.word-break-word {
	word-break: break-word !important;
}

/* -------------------- */

.text-underligne {
	text-decoration: underline !important;
}

/* -------------------- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-primary-900 {
	background: var(--color-primary-900) !important;
}*/

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

.bg-gray-100 {
	background: var(--color-gray-100) !important;
}

.bg-gray-200 {
	background: var(--color-gray-200) !important;
}

.bg-gray-300 {
	background: var(--color-gray-300) !important;
}

.bg-gray-400 {
	background: var(--color-gray-400) !important;
}

.bg-gray-500 {
	background: var(--color-gray-500) !important;
}

.bg-gray-600 {
	background: var(--color-gray-600) !important;
}

.bg-gray-700 {
	background: var(--color-gray-700) !important;
}

.bg-gray-800 {
	background: var(--color-gray-800) !important;
}

.bg-gray-900 {
	background: var(--color-gray-900) !important;
}

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

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

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

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

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

.bg-none {
	background: none !important;
}

/* -------------------- */

.border {
	border: var(--border-width) var(--border-style) var(--border-color) !important;
}

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

.border-top {
	border-top: var(--border-width) var(--border-style) var(--border-color) !important;
}

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

.border-right {
	border-right: var(--border-width) var(--border-style) var(--border-color) !important;
}

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

.border-bottom {
	border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
}

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

.border-left {
	border-left: var(--border-width) var(--border-style) var(--border-color) !important;
}

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

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

.border-2 {
	--border-width: 2px;
}

.border-3 {
	--border-width: 3px;
}

.border-4 {
	--border-width: 4px;
}

.border-5 {
	--border-width: 5px;
}

.border-dashed {
	--border-style: dashed;
}

.border-dotted {
	--border-style: dotted;
}

.border-double {
	--border-style: double;
}

.border-solid {
	--border-style: solid;
}

.border-primary {
	--border-color: var(--color-primary);
}

.border-secondary {
	--border-color: var(--color-secondary);
}

.border-tertiary {
	--border-color: var(--color-tertiary);
}

.border-black {
	--border-color: var(--color-black);
}

.border-white {
	--border-color: var(--color-white);
}

/*.border-primary-50 {
	--border-color: var(--color-primary-50);
}

.border-primary-100 {
	--border-color: var(--color-primary-100);
}

.border-primary-200 {
	--border-color: var(--color-primary-200);
}

.border-primary-300 {
	--border-color: var(--color-primary-300);
}

.border-primary-400 {
	--border-color: var(--color-primary-400);
}

.border-primary-500 {
	--border-color: var(--color-primary-500);
}

.border-primary-600 {
	--border-color: var(--color-primary-600);
}

.border-primary-700 {
	--border-color: var(--color-primary-700);
}

.border-primary-800 {
	--border-color: var(--color-primary-800);
}

.border-primary-900 {
	--border-color: var(--color-primary-900);
}*/

.border-gray-50 {
	--border-color: var(--color-gray-50);
}

.border-gray-100 {
	--border-color: var(--color-gray-100);
}

.border-gray-200 {
	--border-color: var(--color-gray-200);
}

.border-gray-300 {
	--border-color: var(--color-gray-300);
}

.border-gray-400 {
	--border-color: var(--color-gray-400);
}

.border-gray-500 {
	--border-color: var(--color-gray-500);
}

.border-gray-600 {
	--border-color: var(--color-gray-600);
}

.border-gray-700 {
	--border-color: var(--color-gray-700);
}

.border-gray-800 {
	--border-color: var(--color-gray-800);
}

.border-gray-900 {
	--border-color: var(--color-gray-900);
}

.border-info {
	--border-color: var(--color-info);
}

.border-warning {
	--border-color: var(--color-warning);
}

.border-muted {
	--border-color: var(--color-muted);
}

.border-error {
	--border-color: var(--color-secondary);
}

.border-succes {
	--border-color: var(--color-success);
}

/* -------------------- */

.rounded {
	border-radius: var(--rounded) !important;
}

.rounded-top {
	border-top-left-radius: var(--rounded) !important;
	border-top-right-radius: var(--rounded) !important;
}

.rounded-top-left {
	border-top-left-radius: var(--rounded) !important;
}

.rounded-top-right {
	border-top-right-radius: var(--rounded) !important;
}

.rounded-right {
	border-top-right-radius: var(--rounded) !important;
	border-bottom-right-radius: var(--rounded) !important;
}

.rounded-bottom {
	border-bottom-right-radius: var(--rounded) !important;
	border-bottom-left-radius: var(--rounded) !important;
}

.rounded-bottom-left {
	border-bottom-left-radius: var(--rounded) !important;
}

.rounded-bottom-right {
	border-bottom-right-radius: var(--rounded) !important;
}

.rounded-left {
	border-bottom-left-radius: var(--rounded) !important;
	border-top-left-radius: var(--rounded) !important;
}

.rounded-0 {
	border-radius: 0 !important;
}

.rounded-top-0 {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.rounded-top-left-0 {
	border-top-left-radius: 0 !important;
}

.rounded-top-right-0 {
	border-top-right-radius: 0 !important;
}

.rounded-right-0 {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.rounded-bottom-0 {
	border-bottom-right-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.rounded-bottom-left-0 {
	border-bottom-left-radius: 0 !important;
}

.rounded-bottom-right-0 {
	border-bottom-right-radius: 0 !important;
}

.rounded-left-0 {
	border-bottom-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
}

.rounded-1 {
	border-radius: var(--border-radius-1) !important;
}

.rounded-top-1 {
	border-top-left-radius: var(--border-radius-1) !important;
	border-top-right-radius: var(--border-radius-1) !important;
}

.rounded-top-left-1 {
	border-top-left-radius: var(--border-radius-1) !important;
}

.rounded-top-right-1 {
	border-top-right-radius: var(--border-radius-1) !important;
}

.rounded-right-1 {
	border-top-right-radius: var(--border-radius-1) !important;
	border-bottom-right-radius: var(--border-radius-1) !important;
}

.rounded-bottom-1 {
	border-bottom-right-radius: var(--border-radius-1) !important;
	border-bottom-left-radius: var(--border-radius-1) !important;
}

.rounded-bottom-left-1 {
	border-bottom-left-radius: var(--border-radius-1) !important;
}

.rounded-bottom-right-1 {
	border-bottom-right-radius: var(--border-radius-1) !important;
}

.rounded-left-1 {
	border-bottom-left-radius: var(--border-radius-1) !important;
	border-top-left-radius: var(--border-radius-1) !important;
}

.rounded-2 {
	border-radius: var(--border-radius-2) !important;
}

.rounded-top-2 {
	border-top-left-radius: var(--border-radius-2) !important;
	border-top-right-radius: var(--border-radius-2) !important;
}

.rounded-top-left-2 {
	border-top-left-radius: var(--border-radius-2) !important;
}

.rounded-top-right-2 {
	border-top-right-radius: var(--border-radius-2) !important;
}

.rounded-right-2 {
	border-top-right-radius: var(--border-radius-2) !important;
	border-bottom-right-radius: var(--border-radius-2) !important;
}

.rounded-bottom-2 {
	border-bottom-right-radius: var(--border-radius-2) !important;
	border-bottom-left-radius: var(--border-radius-2) !important;
}

.rounded-bottom-left-2 {
	border-bottom-left-radius: var(--border-radius-2) !important;
}

.rounded-bottom-right-2 {
	border-bottom-right-radius: var(--border-radius-2) !important;
}

.rounded-left-2 {
	border-bottom-left-radius: var(--border-radius-2) !important;
	border-top-left-radius: var(--border-radius-2) !important;
}

.rounded-3 {
	border-radius: var(--border-radius-3) !important;
}

.rounded-top-3 {
	border-top-left-radius: var(--border-radius-3) !important;
	border-top-right-radius: var(--border-radius-3) !important;
}

.rounded-top-left-3 {
	border-top-left-radius: var(--border-radius-3) !important;
}

.rounded-top-right-3 {
	border-top-right-radius: var(--border-radius-3) !important;
}

.rounded-right-3 {
	border-top-right-radius: var(--border-radius-3) !important;
	border-bottom-right-radius: var(--border-radius-3) !important;
}

.rounded-bottom-3 {
	border-bottom-right-radius: var(--border-radius-3) !important;
	border-bottom-left-radius: var(--border-radius-3) !important;
}

.rounded-bottom-left-3 {
	border-bottom-left-radius: var(--border-radius-3) !important;
}

.rounded-bottom-right-3 {
	border-bottom-right-radius: var(--border-radius-3) !important;
}

.rounded-left-3 {
	border-bottom-left-radius: var(--border-radius-3) !important;
	border-top-left-radius: var(--border-radius-3) !important;
}

.rounded-4 {
	border-radius: var(--border-radius-4) !important;
}

.rounded-top-4 {
	border-top-left-radius: var(--border-radius-4) !important;
	border-top-right-radius: var(--border-radius-4) !important;
}

.rounded-top-left-4 {
	border-top-left-radius: var(--border-radius-4) !important;
}

.rounded-top-right-4 {
	border-top-right-radius: var(--border-radius-4) !important;
}

.rounded-right-4 {
	border-top-right-radius: var(--border-radius-4) !important;
	border-bottom-right-radius: var(--border-radius-4) !important;
}

.rounded-bottom-4 {
	border-bottom-right-radius: var(--border-radius-4) !important;
	border-bottom-left-radius: var(--border-radius-4) !important;
}

.rounded-bottom-left-4 {
	border-bottom-left-radius: var(--border-radius-4) !important;
}

.rounded-bottom-right-4 {
	border-bottom-right-radius: var(--border-radius-4) !important;
}

.rounded-left-4 {
	border-bottom-left-radius: var(--border-radius-4) !important;
	border-top-left-radius: var(--border-radius-4) !important;
}

.rounded-5 {
	border-radius: var(--border-radius-5) !important;
}

.rounded-top-5 {
	border-top-left-radius: var(--border-radius-5) !important;
	border-top-right-radius: var(--border-radius-5) !important;
}

.rounded-top-left-5 {
	border-top-left-radius: var(--border-radius-5) !important;
}

.rounded-top-right-5 {
	border-top-right-radius: var(--border-radius-5) !important;
}

.rounded-right-5 {
	border-top-right-radius: var(--border-radius-5) !important;
	border-bottom-right-radius: var(--border-radius-5) !important;
}

.rounded-bottom-5 {
	border-bottom-right-radius: var(--border-radius-5) !important;
	border-bottom-left-radius: var(--border-radius-5) !important;
}

.rounded-bottom-left-5 {
	border-bottom-left-radius: var(--border-radius-5) !important;
}

.rounded-bottom-right-5 {
	border-bottom-right-radius: var(--border-radius-5) !important;
}

.rounded-left-5 {
	border-bottom-left-radius: var(--border-radius-5) !important;
	border-top-left-radius: var(--border-radius-5) !important;
}

.rounded-pill {
	border-radius: var(--border-radius-pill) !important;
}

.rounded-circle {
	border-radius: 50% !important;
}

/* -------------------- */

.shadow-1 {
	box-shadow: var(--box-shadow-1) !important;
}

.shadow-2 {
	box-shadow: var(--box-shadow-2) !important;
}

.shadow-internal-1 {
	box-shadow: var(--box-shadow-internal-1) !important;
}

.shadow-internal-2 {
	box-shadow: var(--box-shadow-internal-2) !important;
}

/* -------------------- */

.opacity-25 {
	opacity: 0.25 !important;
}

.opacity-50 {
	opacity: 0.50 !important;
}

.opacity-75 {
	opacity: 0.75 !important;
}

.opacity-100 {
	opacity: 1 !important;
}

/* -------------------- */

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

.p-1 {
	padding: var(--size-1) !important;
}

.p-2 {
	padding: var(--size-2) !important;
}

.p-3 {
	padding: var(--size-3) !important;
}

.p-4 {
	padding: var(--size-4) !important;
}

.p-5 {
	padding: var(--size-5) !important;
}

.p-6 {
	padding: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.p-xs-0 {
		padding: 0 !important;
	}

	.p-xs-1 {
		padding: var(--size-1) !important;
	}

	.p-xs-2 {
		padding: var(--size-2) !important;
	}

	.p-xs-3 {
		padding: var(--size-3) !important;
	}

	.p-xs-4 {
		padding: var(--size-4) !important;
	}

	.p-xs-5 {
		padding: var(--size-5) !important;
	}

	.p-xs-6 {
		padding: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.p-s-0 {
		padding: 0 !important;
	}

	.p-s-1 {
		padding: var(--size-1) !important;
	}

	.p-s-2 {
		padding: var(--size-2) !important;
	}

	.p-s-3 {
		padding: var(--size-3) !important;
	}

	.p-s-4 {
		padding: var(--size-4) !important;
	}

	.p-s-5 {
		padding: var(--size-5) !important;
	}

	.p-s-6 {
		padding: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.p-m-0 {
		padding: 0 !important;
	}

	.p-m-1 {
		padding: var(--size-1) !important;
	}

	.p-m-2 {
		padding: var(--size-2) !important;
	}

	.p-m-3 {
		padding: var(--size-3) !important;
	}

	.p-m-4 {
		padding: var(--size-4) !important;
	}

	.p-m-5 {
		padding: var(--size-5) !important;
	}

	.p-m-6 {
		padding: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.p-l-0 {
		padding: 0 !important;
	}

	.p-l-1 {
		padding: var(--size-1) !important;
	}

	.p-l-2 {
		padding: var(--size-2) !important;
	}

	.p-l-3 {
		padding: var(--size-3) !important;
	}

	.p-l-4 {
		padding: var(--size-4) !important;
	}

	.p-l-5 {
		padding: var(--size-5) !important;
	}

	.p-l-6 {
		padding: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.p-xl-0 {
		padding: 0 !important;
	}

	.p-xl-1 {
		padding: var(--size-1) !important;
	}

	.p-xl-2 {
		padding: var(--size-2) !important;
	}

	.p-xl-3 {
		padding: var(--size-3) !important;
	}

	.p-xl-4 {
		padding: var(--size-4) !important;
	}

	.p-xl-5 {
		padding: var(--size-5) !important;
	}

	.p-xl-6 {
		padding: var(--size-6) !important;
	}
}

/* -------------------- */

.px-0 {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

.px-1 {
	padding-right: var(--size-1) !important;
	padding-left: var(--size-1) !important;
}

.px-2 {
	padding-right: var(--size-2) !important;
	padding-left: var(--size-2) !important;
}

.px-3 {
	padding-right: var(--size-3) !important;
	padding-left: var(--size-3) !important;
}

.px-4 {
	padding-right: var(--size-4) !important;
	padding-left: var(--size-4) !important;
}

.px-5 {
	padding-right: var(--size-5) !important;
	padding-left: var(--size-5) !important;
}

.px-6 {
	padding-right: var(--size-6) !important;
	padding-left: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.px-xs-0 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.px-xs-1 {
		padding-right: var(--size-1) !important;
		padding-left: var(--size-1) !important;
	}

	.px-xs-2 {
		padding-right: var(--size-2) !important;
		padding-left: var(--size-2) !important;
	}

	.px-xs-3 {
		padding-right: var(--size-3) !important;
		padding-left: var(--size-3) !important;
	}

	.px-xs-4 {
		padding-right: var(--size-4) !important;
		padding-left: var(--size-4) !important;
	}

	.px-xs-5 {
		padding-right: var(--size-5) !important;
		padding-left: var(--size-5) !important;
	}

	.px-xs-6 {
		padding-right: var(--size-6) !important;
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.px-s-0 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.px-s-1 {
		padding-right: var(--size-1) !important;
		padding-left: var(--size-1) !important;
	}

	.px-s-2 {
		padding-right: var(--size-2) !important;
		padding-left: var(--size-2) !important;
	}

	.px-s-3 {
		padding-right: var(--size-3) !important;
		padding-left: var(--size-3) !important;
	}

	.px-s-4 {
		padding-right: var(--size-4) !important;
		padding-left: var(--size-4) !important;
	}

	.px-s-5 {
		padding-right: var(--size-5) !important;
		padding-left: var(--size-5) !important;
	}

	.px-s-6 {
		padding-right: var(--size-6) !important;
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.px-m-0 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.px-m-1 {
		padding-right: var(--size-1) !important;
		padding-left: var(--size-1) !important;
	}

	.px-m-2 {
		padding-right: var(--size-2) !important;
		padding-left: var(--size-2) !important;
	}

	.px-m-3 {
		padding-right: var(--size-3) !important;
		padding-left: var(--size-3) !important;
	}

	.px-m-4 {
		padding-right: var(--size-4) !important;
		padding-left: var(--size-4) !important;
	}

	.px-m-5 {
		padding-right: var(--size-5) !important;
		padding-left: var(--size-5) !important;
	}

	.px-m-6 {
		padding-right: var(--size-6) !important;
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.px-l-0 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.px-l-1 {
		padding-right: var(--size-1) !important;
		padding-left: var(--size-1) !important;
	}

	.px-l-2 {
		padding-right: var(--size-2) !important;
		padding-left: var(--size-2) !important;
	}

	.px-l-3 {
		padding-right: var(--size-3) !important;
		padding-left: var(--size-3) !important;
	}

	.px-l-4 {
		padding-right: var(--size-4) !important;
		padding-left: var(--size-4) !important;
	}

	.px-l-5 {
		padding-right: var(--size-5) !important;
		padding-left: var(--size-5) !important;
	}

	.px-l-6 {
		padding-right: var(--size-6) !important;
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.px-xl-0 {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.px-xl-1 {
		padding-right: var(--size-1) !important;
		padding-left: var(--size-1) !important;
	}

	.px-xl-2 {
		padding-right: var(--size-2) !important;
		padding-left: var(--size-2) !important;
	}

	.px-xl-3 {
		padding-right: var(--size-3) !important;
		padding-left: var(--size-3) !important;
	}

	.px-xl-4 {
		padding-right: var(--size-4) !important;
		padding-left: var(--size-4) !important;
	}

	.px-xl-5 {
		padding-right: var(--size-5) !important;
		padding-left: var(--size-5) !important;
	}

	.px-xl-6 {
		padding-right: var(--size-6) !important;
		padding-left: var(--size-6) !important;
	}
}

/* -------------------- */

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

.py-1 {
	padding-top: var(--size-1) !important;
	padding-bottom: var(--size-1) !important;
}

.py-2 {
	padding-top: var(--size-2) !important;
	padding-bottom: var(--size-2) !important;
}

.py-3 {
	padding-top: var(--size-3) !important;
	padding-bottom: var(--size-3) !important;
}

.py-4 {
	padding-top: var(--size-4) !important;
	padding-bottom: var(--size-4) !important;
}

.py-5 {
	padding-top: var(--size-5) !important;
	padding-bottom: var(--size-5) !important;
}

.py-6 {
	padding-top: var(--size-6) !important;
	padding-bottom: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.py-xs-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-xs-1 {
		padding-top: var(--size-1) !important;
		padding-bottom: var(--size-1) !important;
	}

	.py-xs-2 {
		padding-top: var(--size-2) !important;
		padding-bottom: var(--size-2) !important;
	}

	.py-xs-3 {
		padding-top: var(--size-3) !important;
		padding-bottom: var(--size-3) !important;
	}

	.py-xs-4 {
		padding-top: var(--size-4) !important;
		padding-bottom: var(--size-4) !important;
	}

	.py-xs-5 {
		padding-top: var(--size-5) !important;
		padding-bottom: var(--size-5) !important;
	}

	.py-xs-6 {
		padding-top: var(--size-6) !important;
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.py-s-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-s-1 {
		padding-top: var(--size-1) !important;
		padding-bottom: var(--size-1) !important;
	}

	.py-s-2 {
		padding-top: var(--size-2) !important;
		padding-bottom: var(--size-2) !important;
	}

	.py-s-3 {
		padding-top: var(--size-3) !important;
		padding-bottom: var(--size-3) !important;
	}

	.py-s-4 {
		padding-top: var(--size-4) !important;
		padding-bottom: var(--size-4) !important;
	}

	.py-s-5 {
		padding-top: var(--size-5) !important;
		padding-bottom: var(--size-5) !important;
	}

	.py-s-6 {
		padding-top: var(--size-6) !important;
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.py-m-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-m-1 {
		padding-top: var(--size-1) !important;
		padding-bottom: var(--size-1) !important;
	}

	.py-m-2 {
		padding-top: var(--size-2) !important;
		padding-bottom: var(--size-2) !important;
	}

	.py-m-3 {
		padding-top: var(--size-3) !important;
		padding-bottom: var(--size-3) !important;
	}

	.py-m-4 {
		padding-top: var(--size-4) !important;
		padding-bottom: var(--size-4) !important;
	}

	.py-m-5 {
		padding-top: var(--size-5) !important;
		padding-bottom: var(--size-5) !important;
	}

	.py-m-6 {
		padding-top: var(--size-6) !important;
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.py-l-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-l-1 {
		padding-top: var(--size-1) !important;
		padding-bottom: var(--size-1) !important;
	}

	.py-l-2 {
		padding-top: var(--size-2) !important;
		padding-bottom: var(--size-2) !important;
	}

	.py-l-3 {
		padding-top: var(--size-3) !important;
		padding-bottom: var(--size-3) !important;
	}

	.py-l-4 {
		padding-top: var(--size-4) !important;
		padding-bottom: var(--size-4) !important;
	}

	.py-l-5 {
		padding-top: var(--size-5) !important;
		padding-bottom: var(--size-5) !important;
	}

	.py-l-6 {
		padding-top: var(--size-6) !important;
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.py-xl-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-xl-1 {
		padding-top: var(--size-1) !important;
		padding-bottom: var(--size-1) !important;
	}

	.py-xl-2 {
		padding-top: var(--size-2) !important;
		padding-bottom: var(--size-2) !important;
	}

	.py-xl-3 {
		padding-top: var(--size-3) !important;
		padding-bottom: var(--size-3) !important;
	}

	.py-xl-4 {
		padding-top: var(--size-4) !important;
		padding-bottom: var(--size-4) !important;
	}

	.py-xl-5 {
		padding-top: var(--size-5) !important;
		padding-bottom: var(--size-5) !important;
	}

	.py-xl-6 {
		padding-top: var(--size-6) !important;
		padding-bottom: var(--size-6) !important;
	}
}

/* -------------------- */

.pt-0 {
	padding-top: 0 !important;
}

.pt-1 {
	padding-top: var(--size-1) !important;
}

.pt-2 {
	padding-top: var(--size-2) !important;
}

.pt-3 {
	padding-top: var(--size-3) !important;
}

.pt-4 {
	padding-top: var(--size-4) !important;
}

.pt-5 {
	padding-top: var(--size-5) !important;
}

.pt-6 {
	padding-top: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.pt-xs-0 {
		padding-top: 0 !important;
	}

	.pt-xs-1 {
		padding-top: var(--size-1) !important;
	}

	.pt-xs-2 {
		padding-top: var(--size-2) !important;
	}

	.pt-xs-3 {
		padding-top: var(--size-3) !important;
	}

	.pt-xs-4 {
		padding-top: var(--size-4) !important;
	}

	.pt-xs-5 {
		padding-top: var(--size-5) !important;
	}

	.pt-xs-6 {
		padding-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.pt-s-0 {
		padding-top: 0 !important;
	}

	.pt-s-1 {
		padding-top: var(--size-1) !important;
	}

	.pt-s-2 {
		padding-top: var(--size-2) !important;
	}

	.pt-s-3 {
		padding-top: var(--size-3) !important;
	}

	.pt-s-4 {
		padding-top: var(--size-4) !important;
	}

	.pt-s-5 {
		padding-top: var(--size-5) !important;
	}

	.pt-s-6 {
		padding-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.pt-m-0 {
		padding-top: 0 !important;
	}

	.pt-m-1 {
		padding-top: var(--size-1) !important;
	}

	.pt-m-2 {
		padding-top: var(--size-2) !important;
	}

	.pt-m-3 {
		padding-top: var(--size-3) !important;
	}

	.pt-m-4 {
		padding-top: var(--size-4) !important;
	}

	.pt-m-5 {
		padding-top: var(--size-5) !important;
	}

	.pt-m-6 {
		padding-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.pt-l-0 {
		padding-top: 0 !important;
	}

	.pt-l-1 {
		padding-top: var(--size-1) !important;
	}

	.pt-l-2 {
		padding-top: var(--size-2) !important;
	}

	.pt-l-3 {
		padding-top: var(--size-3) !important;
	}

	.pt-l-4 {
		padding-top: var(--size-4) !important;
	}

	.pt-l-5 {
		padding-top: var(--size-5) !important;
	}

	.pt-l-6 {
		padding-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.pt-xl-0 {
		padding-top: 0 !important;
	}

	.pt-xl-1 {
		padding-top: var(--size-1) !important;
	}

	.pt-xl-2 {
		padding-top: var(--size-2) !important;
	}

	.pt-xl-3 {
		padding-top: var(--size-3) !important;
	}

	.pt-xl-4 {
		padding-top: var(--size-4) !important;
	}

	.pt-xl-5 {
		padding-top: var(--size-5) !important;
	}

	.pt-xl-6 {
		padding-top: var(--size-6) !important;
	}
}

/* -------------------- */

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

.pr-1 {
	padding-right: var(--size-1) !important;
}

.pr-2 {
	padding-right: var(--size-2) !important;
}

.pr-3 {
	padding-right: var(--size-3) !important;
}

.pr-4 {
	padding-right: var(--size-4) !important;
}

.pr-5 {
	padding-right: var(--size-5) !important;
}

.pr-6 {
	padding-right: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.pr-xs-0 {
		padding-right: 0 !important;
	}

	.pr-xs-1 {
		padding-right: var(--size-1) !important;
	}

	.pr-xs-2 {
		padding-right: var(--size-2) !important;
	}

	.pr-xs-3 {
		padding-right: var(--size-3) !important;
	}

	.pr-xs-4 {
		padding-right: var(--size-4) !important;
	}

	.pr-xs-5 {
		padding-right: var(--size-5) !important;
	}

	.pr-xs-6 {
		padding-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.pr-s-0 {
		padding-right: 0 !important;
	}

	.pr-s-1 {
		padding-right: var(--size-1) !important;
	}

	.pr-s-2 {
		padding-right: var(--size-2) !important;
	}

	.pr-s-3 {
		padding-right: var(--size-3) !important;
	}

	.pr-s-4 {
		padding-right: var(--size-4) !important;
	}

	.pr-s-5 {
		padding-right: var(--size-5) !important;
	}

	.pr-s-6 {
		padding-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.pr-m-0 {
		padding-right: 0 !important;
	}

	.pr-m-1 {
		padding-right: var(--size-1) !important;
	}

	.pr-m-2 {
		padding-right: var(--size-2) !important;
	}

	.pr-m-3 {
		padding-right: var(--size-3) !important;
	}

	.pr-m-4 {
		padding-right: var(--size-4) !important;
	}

	.pr-m-5 {
		padding-right: var(--size-5) !important;
	}

	.pr-m-6 {
		padding-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.pr-l-0 {
		padding-right: 0 !important;
	}

	.pr-l-1 {
		padding-right: var(--size-1) !important;
	}

	.pr-l-2 {
		padding-right: var(--size-2) !important;
	}

	.pr-l-3 {
		padding-right: var(--size-3) !important;
	}

	.pr-l-4 {
		padding-right: var(--size-4) !important;
	}

	.pr-l-5 {
		padding-right: var(--size-5) !important;
	}

	.pr-l-6 {
		padding-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.pr-xl-0 {
		padding-right: 0 !important;
	}

	.pr-xl-1 {
		padding-right: var(--size-1) !important;
	}

	.pr-xl-2 {
		padding-right: var(--size-2) !important;
	}

	.pr-xl-3 {
		padding-right: var(--size-3) !important;
	}

	.pr-xl-4 {
		padding-right: var(--size-4) !important;
	}

	.pr-xl-5 {
		padding-right: var(--size-5) !important;
	}

	.pr-xl-6 {
		padding-right: var(--size-6) !important;
	}
}

/* -------------------- */

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

.pb-1 {
	padding-bottom: var(--size-1) !important;
}

.pb-2 {
	padding-bottom: var(--size-2) !important;
}

.pb-3 {
	padding-bottom: var(--size-3) !important;
}

.pb-4 {
	padding-bottom: var(--size-4) !important;
}

.pb-5 {
	padding-bottom: var(--size-5) !important;
}

.pb-6 {
	padding-bottom: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.pb-xs-0 {
		padding-bottom: 0 !important;
	}

	.pb-xs-1 {
		padding-bottom: var(--size-1) !important;
	}

	.pb-xs-2 {
		padding-bottom: var(--size-2) !important;
	}

	.pb-xs-3 {
		padding-bottom: var(--size-3) !important;
	}

	.pb-xs-4 {
		padding-bottom: var(--size-4) !important;
	}

	.pb-xs-5 {
		padding-bottom: var(--size-5) !important;
	}

	.pb-xs-6 {
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.pb-s-0 {
		padding-bottom: 0 !important;
	}

	.pb-s-1 {
		padding-bottom: var(--size-1) !important;
	}

	.pb-s-2 {
		padding-bottom: var(--size-2) !important;
	}

	.pb-s-3 {
		padding-bottom: var(--size-3) !important;
	}

	.pb-s-4 {
		padding-bottom: var(--size-4) !important;
	}

	.pb-s-5 {
		padding-bottom: var(--size-5) !important;
	}

	.pb-s-6 {
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.pb-m-0 {
		padding-bottom: 0 !important;
	}

	.pb-m-1 {
		padding-bottom: var(--size-1) !important;
	}

	.pb-m-2 {
		padding-bottom: var(--size-2) !important;
	}

	.pb-m-3 {
		padding-bottom: var(--size-3) !important;
	}

	.pb-m-4 {
		padding-bottom: var(--size-4) !important;
	}

	.pb-m-5 {
		padding-bottom: var(--size-5) !important;
	}

	.pb-m-6 {
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.pb-l-0 {
		padding-bottom: 0 !important;
	}

	.pb-l-1 {
		padding-bottom: var(--size-1) !important;
	}

	.pb-l-2 {
		padding-bottom: var(--size-2) !important;
	}

	.pb-l-3 {
		padding-bottom: var(--size-3) !important;
	}

	.pb-l-4 {
		padding-bottom: var(--size-4) !important;
	}

	.pb-l-5 {
		padding-bottom: var(--size-5) !important;
	}

	.pb-l-6 {
		padding-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.pb-xl-0 {
		padding-bottom: 0 !important;
	}

	.pb-xl-1 {
		padding-bottom: var(--size-1) !important;
	}

	.pb-xl-2 {
		padding-bottom: var(--size-2) !important;
	}

	.pb-xl-3 {
		padding-bottom: var(--size-3) !important;
	}

	.pb-xl-4 {
		padding-bottom: var(--size-4) !important;
	}

	.pb-xl-5 {
		padding-bottom: var(--size-5) !important;
	}

	.pb-xl-6 {
		padding-bottom: var(--size-6) !important;
	}
}

/* -------------------- */

.pl-0 {
	padding-left: 0 !important;
}

.pl-1 {
	padding-left: var(--size-1) !important;
}

.pl-2 {
	padding-left: var(--size-2) !important;
}

.pl-3 {
	padding-left: var(--size-3) !important;
}

.pl-4 {
	padding-left: var(--size-4) !important;
}

.pl-5 {
	padding-left: var(--size-5) !important;
}

.pl-6 {
	padding-left: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.pl-xs-0 {
		padding-left: 0 !important;
	}

	.pl-xs-1 {
		padding-left: var(--size-1) !important;
	}

	.pl-xs-2 {
		padding-left: var(--size-2) !important;
	}

	.pl-xs-3 {
		padding-left: var(--size-3) !important;
	}

	.pl-xs-4 {
		padding-left: var(--size-4) !important;
	}

	.pl-xs-5 {
		padding-left: var(--size-5) !important;
	}

	.pl-xs-6 {
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.pl-s-0 {
		padding-left: 0 !important;
	}

	.pl-s-1 {
		padding-left: var(--size-1) !important;
	}

	.pl-s-2 {
		padding-left: var(--size-2) !important;
	}

	.pl-s-3 {
		padding-left: var(--size-3) !important;
	}

	.pl-s-4 {
		padding-left: var(--size-4) !important;
	}

	.pl-s-5 {
		padding-left: var(--size-5) !important;
	}

	.pl-s-6 {
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.pl-m-0 {
		padding-left: 0 !important;
	}

	.pl-m-1 {
		padding-left: var(--size-1) !important;
	}

	.pl-m-2 {
		padding-left: var(--size-2) !important;
	}

	.pl-m-3 {
		padding-left: var(--size-3) !important;
	}

	.pl-m-4 {
		padding-left: var(--size-4) !important;
	}

	.pl-m-5 {
		padding-left: var(--size-5) !important;
	}

	.pl-m-6 {
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.pl-l-0 {
		padding-left: 0 !important;
	}

	.pl-l-1 {
		padding-left: var(--size-1) !important;
	}

	.pl-l-2 {
		padding-left: var(--size-2) !important;
	}

	.pl-l-3 {
		padding-left: var(--size-3) !important;
	}

	.pl-l-4 {
		padding-left: var(--size-4) !important;
	}

	.pl-l-5 {
		padding-left: var(--size-5) !important;
	}

	.pl-l-6 {
		padding-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.pl-xl-0 {
		padding-left: 0 !important;
	}

	.pl-xl-1 {
		padding-left: var(--size-1) !important;
	}

	.pl-xl-2 {
		padding-left: var(--size-2) !important;
	}

	.pl-xl-3 {
		padding-left: var(--size-3) !important;
	}

	.pl-xl-4 {
		padding-left: var(--size-4) !important;
	}

	.pl-xl-5 {
		padding-left: var(--size-5) !important;
	}

	.pl-xl-6 {
		padding-left: var(--size-6) !important;
	}
}

/* -------------------- */

.m-auto {
	margin: auto !important;
}

.m-0 {
	margin: 0 !important;
}

.m-1 {
	margin: var(--size-1) !important;
}

.m-2 {
	margin: var(--size-2) !important;
}

.m-3 {
	margin: var(--size-3) !important;
}

.m-4 {
	margin: var(--size-4) !important;
}

.m-5 {
	margin: var(--size-5) !important;
}

.m-6 {
	margin: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.m-xs-auto {
		margin: auto !important;
	}

	.m-xs-0 {
		margin: 0 !important;
	}

	.m-xs-1 {
		margin: var(--size-1) !important;
	}

	.m-xs-2 {
		margin: var(--size-2) !important;
	}

	.m-xs-3 {
		margin: var(--size-3) !important;
	}

	.m-xs-4 {
		margin: var(--size-4) !important;
	}

	.m-xs-5 {
		margin: var(--size-5) !important;
	}

	.m-xs-6 {
		margin: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.m-s-auto {
		margin: auto !important;
	}

	.m-s-0 {
		margin: 0 !important;
	}

	.m-s-1 {
		margin: var(--size-1) !important;
	}

	.m-s-2 {
		margin: var(--size-2) !important;
	}

	.m-s-3 {
		margin: var(--size-3) !important;
	}

	.m-s-4 {
		margin: var(--size-4) !important;
	}

	.m-s-5 {
		margin: var(--size-5) !important;
	}

	.m-s-6 {
		margin: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.m-m-auto {
		margin: auto !important;
	}

	.m-m-0 {
		margin: 0 !important;
	}

	.m-m-1 {
		margin: var(--size-1) !important;
	}

	.m-m-2 {
		margin: var(--size-2) !important;
	}

	.m-m-3 {
		margin: var(--size-3) !important;
	}

	.m-m-4 {
		margin: var(--size-4) !important;
	}

	.m-m-5 {
		margin: var(--size-5) !important;
	}

	.m-m-6 {
		margin: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.m-l-auto {
		margin: auto !important;
	}

	.m-l-0 {
		margin: 0 !important;
	}

	.m-l-1 {
		margin: var(--size-1) !important;
	}

	.m-l-2 {
		margin: var(--size-2) !important;
	}

	.m-l-3 {
		margin: var(--size-3) !important;
	}

	.m-l-4 {
		margin: var(--size-4) !important;
	}

	.m-l-5 {
		margin: var(--size-5) !important;
	}

	.m-l-6 {
		margin: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.m-xl-auto {
		margin: auto !important;
	}

	.m-xl-0 {
		margin: 0 !important;
	}

	.m-xl-1 {
		margin: var(--size-1) !important;
	}

	.m-xl-2 {
		margin: var(--size-2) !important;
	}

	.m-xl-3 {
		margin: var(--size-3) !important;
	}

	.m-xl-4 {
		margin: var(--size-4) !important;
	}

	.m-xl-5 {
		margin: var(--size-5) !important;
	}

	.m-xl-6 {
		margin: var(--size-6) !important;
	}
}

/* -------------------- */

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

.mx-0 {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.mx-1 {
	margin-right: var(--size-1) !important;
	margin-left: var(--size-1) !important;
}

.mx-2 {
	margin-right: var(--size-2) !important;
	margin-left: var(--size-2) !important;
}

.mx-3 {
	margin-right: var(--size-3) !important;
	margin-left: var(--size-3) !important;
}

.mx-4 {
	margin-right: var(--size-4) !important;
	margin-left: var(--size-4) !important;
}

.mx-5 {
	margin-right: var(--size-5) !important;
	margin-left: var(--size-5) !important;
}

.mx-6 {
	margin-right: var(--size-6) !important;
	margin-left: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.mx-xs-auto {
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.mx-xs-0 {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.mx-xs-1 {
		margin-right: var(--size-1) !important;
		margin-left: var(--size-1) !important;
	}

	.mx-xs-2 {
		margin-right: var(--size-2) !important;
		margin-left: var(--size-2) !important;
	}

	.mx-xs-3 {
		margin-right: var(--size-3) !important;
		margin-left: var(--size-3) !important;
	}

	.mx-xs-4 {
		margin-right: var(--size-4) !important;
		margin-left: var(--size-4) !important;
	}

	.mx-xs-5 {
		margin-right: var(--size-5) !important;
		margin-left: var(--size-5) !important;
	}

	.mx-xs-6 {
		margin-right: var(--size-6) !important;
		margin-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.mx-s-auto {
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.mx-s-0 {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.mx-s-1 {
		margin-right: var(--size-1) !important;
		margin-left: var(--size-1) !important;
	}

	.mx-s-2 {
		margin-right: var(--size-2) !important;
		margin-left: var(--size-2) !important;
	}

	.mx-s-3 {
		margin-right: var(--size-3) !important;
		margin-left: var(--size-3) !important;
	}

	.mx-s-4 {
		margin-right: var(--size-4) !important;
		margin-left: var(--size-4) !important;
	}

	.mx-s-5 {
		margin-right: var(--size-5) !important;
		margin-left: var(--size-5) !important;
	}

	.mx-s-6 {
		margin-right: var(--size-6) !important;
		margin-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.mx-m-auto {
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.mx-m-0 {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.mx-m-1 {
		margin-right: var(--size-1) !important;
		margin-left: var(--size-1) !important;
	}

	.mx-m-2 {
		margin-right: var(--size-2) !important;
		margin-left: var(--size-2) !important;
	}

	.mx-m-3 {
		margin-right: var(--size-3) !important;
		margin-left: var(--size-3) !important;
	}

	.mx-m-4 {
		margin-right: var(--size-4) !important;
		margin-left: var(--size-4) !important;
	}

	.mx-m-5 {
		margin-right: var(--size-5) !important;
		margin-left: var(--size-5) !important;
	}

	.mx-m-6 {
		margin-right: var(--size-6) !important;
		margin-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.mx-l-auto {
		margin-right: auto !important;
		margin-left: auto !important;
	}

	.mx-l-0 {
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.mx-l-1 {
		margin-right: var(--size-1) !important;
		margin-left: var(--size-1) !important;
	}

	.mx-l-2 {
		margin-right: var(--size-2) !important;
		margin-left: var(--size-2) !important;
	}

	.mx-l-3 {
		margin-right: var(--size-3) !important;
		margin-left: var(--size-3) !important;
	}

	.mx-l-4 {
		margin-right: var(--size-4) !important;
		margin-left: var(--size-4) !important;
	}

	.mx-l-5 {
		margin-right: var(--size-5) !important;
		margin-left: var(--size-5) !important;
	}

	.mx-l-6 {
		margin-right: var(--size-6) !important;
		margin-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.mx-xl-auto {
		margin-right: auto !important;
		margin-left: auto !important;
	}

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

	.mx-xl-1 {
		margin-right: var(--size-1) !important;
		margin-left: var(--size-1) !important;
	}

	.mx-xl-2 {
		margin-right: var(--size-2) !important;
		margin-left: var(--size-2) !important;
	}

	.mx-xl-3 {
		margin-right: var(--size-3) !important;
		margin-left: var(--size-3) !important;
	}

	.mx-xl-4 {
		margin-right: var(--size-4) !important;
		margin-left: var(--size-4) !important;
	}

	.mx-xl-5 {
		margin-right: var(--size-5) !important;
		margin-left: var(--size-5) !important;
	}

	.mx-xl-6 {
		margin-right: var(--size-6) !important;
		margin-left: var(--size-6) !important;
	}
}

/* -------------------- */

.my-auto {
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.my-1 {
	margin-top: var(--size-1) !important;
	margin-bottom: var(--size-1) !important;
}

.my-2 {
	margin-top: var(--size-2) !important;
	margin-bottom: var(--size-2) !important;
}

.my-3 {
	margin-top: var(--size-3) !important;
	margin-bottom: var(--size-3) !important;
}

.my-4 {
	margin-top: var(--size-4) !important;
	margin-bottom: var(--size-4) !important;
}

.my-5 {
	margin-top: var(--size-5) !important;
	margin-bottom: var(--size-5) !important;
}

.my-6 {
	margin-top: var(--size-6) !important;
	margin-bottom: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.my-xs-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-xs-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-xs-1 {
		margin-top: var(--size-1) !important;
		margin-bottom: var(--size-1) !important;
	}

	.my-xs-2 {
		margin-top: var(--size-2) !important;
		margin-bottom: var(--size-2) !important;
	}

	.my-xs-3 {
		margin-top: var(--size-3) !important;
		margin-bottom: var(--size-3) !important;
	}

	.my-xs-4 {
		margin-top: var(--size-4) !important;
		margin-bottom: var(--size-4) !important;
	}

	.my-xs-5 {
		margin-top: var(--size-5) !important;
		margin-bottom: var(--size-5) !important;
	}

	.my-xs-6 {
		margin-top: var(--size-6) !important;
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.my-s-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-s-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-s-1 {
		margin-top: var(--size-1) !important;
		margin-bottom: var(--size-1) !important;
	}

	.my-s-2 {
		margin-top: var(--size-2) !important;
		margin-bottom: var(--size-2) !important;
	}

	.my-s-3 {
		margin-top: var(--size-3) !important;
		margin-bottom: var(--size-3) !important;
	}

	.my-s-4 {
		margin-top: var(--size-4) !important;
		margin-bottom: var(--size-4) !important;
	}

	.my-s-5 {
		margin-top: var(--size-5) !important;
		margin-bottom: var(--size-5) !important;
	}

	.my-s-6 {
		margin-top: var(--size-6) !important;
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.my-m-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-m-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-m-1 {
		margin-top: var(--size-1) !important;
		margin-bottom: var(--size-1) !important;
	}

	.my-m-2 {
		margin-top: var(--size-2) !important;
		margin-bottom: var(--size-2) !important;
	}

	.my-m-3 {
		margin-top: var(--size-3) !important;
		margin-bottom: var(--size-3) !important;
	}

	.my-m-4 {
		margin-top: var(--size-4) !important;
		margin-bottom: var(--size-4) !important;
	}

	.my-m-5 {
		margin-top: var(--size-5) !important;
		margin-bottom: var(--size-5) !important;
	}

	.my-m-6 {
		margin-top: var(--size-6) !important;
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.my-l-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-l-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-l-1 {
		margin-top: var(--size-1) !important;
		margin-bottom: var(--size-1) !important;
	}

	.my-l-2 {
		margin-top: var(--size-2) !important;
		margin-bottom: var(--size-2) !important;
	}

	.my-l-3 {
		margin-top: var(--size-3) !important;
		margin-bottom: var(--size-3) !important;
	}

	.my-l-4 {
		margin-top: var(--size-4) !important;
		margin-bottom: var(--size-4) !important;
	}

	.my-l-5 {
		margin-top: var(--size-5) !important;
		margin-bottom: var(--size-5) !important;
	}

	.my-l-6 {
		margin-top: var(--size-6) !important;
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.my-xl-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

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

	.my-xl-1 {
		margin-top: var(--size-1) !important;
		margin-bottom: var(--size-1) !important;
	}

	.my-xl-2 {
		margin-top: var(--size-2) !important;
		margin-bottom: var(--size-2) !important;
	}

	.my-xl-3 {
		margin-top: var(--size-3) !important;
		margin-bottom: var(--size-3) !important;
	}

	.my-xl-4 {
		margin-top: var(--size-4) !important;
		margin-bottom: var(--size-4) !important;
	}

	.my-xl-5 {
		margin-top: var(--size-5) !important;
		margin-bottom: var(--size-5) !important;
	}

	.my-xl-6 {
		margin-top: var(--size-6) !important;
		margin-bottom: var(--size-6) !important;
	}
}

/* -------------------- */

.mt-auto {
	margin-top: auto !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-1 {
	margin-top: var(--size-1) !important;
}

.mt-2 {
	margin-top: var(--size-2) !important;
}

.mt-3 {
	margin-top: var(--size-3) !important;
}

.mt-4 {
	margin-top: var(--size-4) !important;
}

.mt-5 {
	margin-top: var(--size-5) !important;
}

.mt-6 {
	margin-top: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.mt-xs-auto {
		margin-top: auto !important;
	}

	.mt-xs-0 {
		margin-top: 0 !important;
	}

	.mt-xs-1 {
		margin-top: var(--size-1) !important;
	}

	.mt-xs-2 {
		margin-top: var(--size-2) !important;
	}

	.mt-xs-3 {
		margin-top: var(--size-3) !important;
	}

	.mt-xs-4 {
		margin-top: var(--size-4) !important;
	}

	.mt-xs-5 {
		margin-top: var(--size-5) !important;
	}

	.mt-xs-6 {
		margin-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.mt-s-auto {
		margin-top: auto !important;
	}

	.mt-s-0 {
		margin-top: 0 !important;
	}

	.mt-s-1 {
		margin-top: var(--size-1) !important;
	}

	.mt-s-2 {
		margin-top: var(--size-2) !important;
	}

	.mt-s-3 {
		margin-top: var(--size-3) !important;
	}

	.mt-s-4 {
		margin-top: var(--size-4) !important;
	}

	.mt-s-5 {
		margin-top: var(--size-5) !important;
	}

	.mt-s-6 {
		margin-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.mt-m-auto {
		margin-top: auto !important;
	}

	.mt-m-0 {
		margin-top: 0 !important;
	}

	.mt-m-1 {
		margin-top: var(--size-1) !important;
	}

	.mt-m-2 {
		margin-top: var(--size-2) !important;
	}

	.mt-m-3 {
		margin-top: var(--size-3) !important;
	}

	.mt-m-4 {
		margin-top: var(--size-4) !important;
	}

	.mt-m-5 {
		margin-top: var(--size-5) !important;
	}

	.mt-m-6 {
		margin-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.mt-l-auto {
		margin-top: auto !important;
	}

	.mt-l-0 {
		margin-top: 0 !important;
	}

	.mt-l-1 {
		margin-top: var(--size-1) !important;
	}

	.mt-l-2 {
		margin-top: var(--size-2) !important;
	}

	.mt-l-3 {
		margin-top: var(--size-3) !important;
	}

	.mt-l-4 {
		margin-top: var(--size-4) !important;
	}

	.mt-l-5 {
		margin-top: var(--size-5) !important;
	}

	.mt-l-6 {
		margin-top: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.mt-xl-auto {
		margin-top: auto !important;
	}

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

	.mt-xl-1 {
		margin-top: var(--size-1) !important;
	}

	.mt-xl-2 {
		margin-top: var(--size-2) !important;
	}

	.mt-xl-3 {
		margin-top: var(--size-3) !important;
	}

	.mt-xl-4 {
		margin-top: var(--size-4) !important;
	}

	.mt-xl-5 {
		margin-top: var(--size-5) !important;
	}

	.mt-xl-6 {
		margin-top: var(--size-6) !important;
	}
}

/* -------------------- */

.mr-auto {
	margin-right: auto !important;
}

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

.mr-1 {
	margin-right: var(--size-1) !important;
}

.mr-2 {
	margin-right: var(--size-2) !important;
}

.mr-3 {
	margin-right: var(--size-3) !important;
}

.mr-4 {
	margin-right: var(--size-4) !important;
}

.mr-5 {
	margin-right: var(--size-5) !important;
}

.mr-6 {
	margin-right: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.mr-xs-auto {
		margin-right: auto !important;
	}

	.mr-xs-0 {
		margin-right: 0 !important;
	}

	.mr-xs-1 {
		margin-right: var(--size-1) !important;
	}

	.mr-xs-2 {
		margin-right: var(--size-2) !important;
	}

	.mr-xs-3 {
		margin-right: var(--size-3) !important;
	}

	.mr-xs-4 {
		margin-right: var(--size-4) !important;
	}

	.mr-xs-5 {
		margin-right: var(--size-5) !important;
	}

	.mr-xs-6 {
		margin-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.mr-s-auto {
		margin-right: auto !important;
	}

	.mr-s-0 {
		margin-right: 0 !important;
	}

	.mr-s-1 {
		margin-right: var(--size-1) !important;
	}

	.mr-s-2 {
		margin-right: var(--size-2) !important;
	}

	.mr-s-3 {
		margin-right: var(--size-3) !important;
	}

	.mr-s-4 {
		margin-right: var(--size-4) !important;
	}

	.mr-s-5 {
		margin-right: var(--size-5) !important;
	}

	.mr-s-6 {
		margin-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.mr-m-auto {
		margin-right: auto !important;
	}

	.mr-m-0 {
		margin-right: 0 !important;
	}

	.mr-m-1 {
		margin-right: var(--size-1) !important;
	}

	.mr-m-2 {
		margin-right: var(--size-2) !important;
	}

	.mr-m-3 {
		margin-right: var(--size-3) !important;
	}

	.mr-m-4 {
		margin-right: var(--size-4) !important;
	}

	.mr-m-5 {
		margin-right: var(--size-5) !important;
	}

	.mr-m-6 {
		margin-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.mr-l-auto {
		margin-right: auto !important;
	}

	.mr-l-0 {
		margin-right: 0 !important;
	}

	.mr-l-1 {
		margin-right: var(--size-1) !important;
	}

	.mr-l-2 {
		margin-right: var(--size-2) !important;
	}

	.mr-l-3 {
		margin-right: var(--size-3) !important;
	}

	.mr-l-4 {
		margin-right: var(--size-4) !important;
	}

	.mr-l-5 {
		margin-right: var(--size-5) !important;
	}

	.mr-l-6 {
		margin-right: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.mr-xl-auto {
		margin-right: auto !important;
	}

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

	.mr-xl-1 {
		margin-right: var(--size-1) !important;
	}

	.mr-xl-2 {
		margin-right: var(--size-2) !important;
	}

	.mr-xl-3 {
		margin-right: var(--size-3) !important;
	}

	.mr-xl-4 {
		margin-right: var(--size-4) !important;
	}

	.mr-xl-5 {
		margin-right: var(--size-5) !important;
	}

	.mr-xl-6 {
		margin-right: var(--size-6) !important;
	}
}

/* -------------------- */

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

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

.mb-1 {
	margin-bottom: var(--size-1) !important;
}

.mb-2 {
	margin-bottom: var(--size-2) !important;
}

.mb-3 {
	margin-bottom: var(--size-3) !important;
}

.mb-4 {
	margin-bottom: var(--size-4) !important;
}

.mb-5 {
	margin-bottom: var(--size-5) !important;
}

.mb-6 {
	margin-bottom: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.mb-xs-auto {
		margin-bottom: auto !important;
	}

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

	.mb-xs-1 {
		margin-bottom: var(--size-1) !important;
	}

	.mb-xs-2 {
		margin-bottom: var(--size-2) !important;
	}

	.mb-xs-3 {
		margin-bottom: var(--size-3) !important;
	}

	.mb-xs-4 {
		margin-bottom: var(--size-4) !important;
	}

	.mb-xs-5 {
		margin-bottom: var(--size-5) !important;
	}

	.mb-xs-6 {
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.mb-s-auto {
		margin-bottom: auto !important;
	}

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

	.mb-s-1 {
		margin-bottom: var(--size-1) !important;
	}

	.mb-s-2 {
		margin-bottom: var(--size-2) !important;
	}

	.mb-s-3 {
		margin-bottom: var(--size-3) !important;
	}

	.mb-s-4 {
		margin-bottom: var(--size-4) !important;
	}

	.mb-s-5 {
		margin-bottom: var(--size-5) !important;
	}

	.mb-s-6 {
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.mb-m-auto {
		margin-bottom: auto !important;
	}

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

	.mb-m-1 {
		margin-bottom: var(--size-1) !important;
	}

	.mb-m-2 {
		margin-bottom: var(--size-2) !important;
	}

	.mb-m-3 {
		margin-bottom: var(--size-3) !important;
	}

	.mb-m-4 {
		margin-bottom: var(--size-4) !important;
	}

	.mb-m-5 {
		margin-bottom: var(--size-5) !important;
	}

	.mb-m-6 {
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 960px) {
	.mb-l-auto {
		margin-bottom: auto !important;
	}

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

	.mb-l-1 {
		margin-bottom: var(--size-1) !important;
	}

	.mb-l-2 {
		margin-bottom: var(--size-2) !important;
	}

	.mb-l-3 {
		margin-bottom: var(--size-3) !important;
	}

	.mb-l-4 {
		margin-bottom: var(--size-4) !important;
	}

	.mb-l-5 {
		margin-bottom: var(--size-5) !important;
	}

	.mb-l-6 {
		margin-bottom: var(--size-6) !important;
	}
}

@media only screen and (min-width: 1200px) {
	.mb-xl-auto {
		margin-bottom: auto !important;
	}

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

	.mb-xl-1 {
		margin-bottom: var(--size-1) !important;
	}

	.mb-xl-2 {
		margin-bottom: var(--size-2) !important;
	}

	.mb-xl-3 {
		margin-bottom: var(--size-3) !important;
	}

	.mb-xl-4 {
		margin-bottom: var(--size-4) !important;
	}

	.mb-xl-5 {
		margin-bottom: var(--size-5) !important;
	}

	.mb-xl-6 {
		margin-bottom: var(--size-6) !important;
	}
}

/* -------------------- */

.ml-auto {
	margin-left: auto !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ml-1 {
	margin-left: var(--size-1) !important;
}

.ml-2 {
	margin-left: var(--size-2) !important;
}

.ml-3 {
	margin-left: var(--size-3) !important;
}

.ml-4 {
	margin-left: var(--size-4) !important;
}

.ml-5 {
	margin-left: var(--size-5) !important;
}

.ml-6 {
	margin-left: var(--size-6) !important;
}

@media only screen and (min-width: 240px) {
	.ml-xs-auto {
		margin-left: auto !important;
	}

	.ml-xs-0 {
		margin-left: 0 !important;
	}

	.ml-xs-1 {
		margin-left: var(--size-1) !important;
	}

	.ml-xs-2 {
		margin-left: var(--size-2) !important;
	}

	.ml-xs-3 {
		margin-left: var(--size-3) !important;
	}

	.ml-xs-4 {
		margin-left: var(--size-4) !important;
	}

	.ml-xs-5 {
		margin-left: var(--size-5) !important;
	}

	.ml-xs-6 {
		margin-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 480px) {
	.ml-s-auto {
		margin-left: auto !important;
	}

	.ml-s-0 {
		margin-left: 0 !important;
	}

	.ml-s-1 {
		margin-left: var(--size-1) !important;
	}

	.ml-s-2 {
		margin-left: var(--size-2) !important;
	}

	.ml-s-3 {
		margin-left: var(--size-3) !important;
	}

	.ml-s-4 {
		margin-left: var(--size-4) !important;
	}

	.ml-s-5 {
		margin-left: var(--size-5) !important;
	}

	.ml-s-6 {
		margin-left: var(--size-6) !important;
	}
}

@media only screen and (min-width: 720px) {
	.ml-m-auto {
		margin-left: auto !important;
	}

	.ml-m-0 {
		margin-left: 0 !important;
	}

	.ml-m-1 {
		margin-left: var(--size-1) !important;
	}

	.ml-m-2 {
		margin-left: var(--size-2) !important;
	}

	.ml-m-3 {
		margin-left: var(--size-3) !important;
	}

	.ml-m-4 {
		margin-left: var(--size-4) !important;
	}

	.ml-m-5 {
		margin-left: var(--size-5) !important;
	}

	.ml-m-6 {
		margin-left: var(--size-6) !important;
	}
}

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

	.ml-l-0 {
		margin-left: 0 !important;
	}

	.ml-l-1 {
		margin-left: var(--size-1) !important;
	}

	.ml-l-2 {
		margin-left: var(--size-2) !important;
	}

	.ml-l-3 {
		margin-left: var(--size-3) !important;
	}

	.ml-l-4 {
		margin-left: var(--size-4) !important;
	}

	.ml-l-5 {
		margin-left: var(--size-5) !important;
	}

	.ml-l-6 {
		margin-left: var(--size-6) !important;
	}
}

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

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

	.ml-xl-1 {
		margin-left: var(--size-1) !important;
	}

	.ml-xl-2 {
		margin-left: var(--size-2) !important;
	}

	.ml-xl-3 {
		margin-left: var(--size-3) !important;
	}

	.ml-xl-4 {
		margin-left: var(--size-4) !important;
	}

	.ml-xl-5 {
		margin-left: var(--size-5) !important;
	}

	.ml-xl-6 {
		margin-left: var(--size-6) !important;
	}
}

/* -------------------- */
/* -------------------- */

.g-0 {
	padding: 0;
}

.g-0 > * {
	padding: 0;
}

.g-1 {
	padding: calc(var(--size-1) / 2);
}

.g-1 > * {
	padding: calc(var(--size-1) / 2);
}

.g-2 {
	padding: calc(var(--size-2) / 2);
}

.g-2 > * {
	padding: calc(var(--size-2) / 2);
}

.g-3 {
	padding: calc(var(--size-3) / 2);
}

.g-3 > * {
	padding: calc(var(--size-3) / 2);
}

.g-4 {
	padding: calc(var(--size-4) / 2);
}

.g-4 > * {
	padding: calc(var(--size-4) / 2);
}

.g-5 {
	padding: calc(var(--size-5) / 2);
}

.g-5 > * {
	padding: calc(var(--size-5) / 2);
}

.g-6 {
	padding: calc(var(--size-6) / 2);
}

.g-6 > * {
	padding: calc(var(--size-6) / 2);
}

@media only screen and (min-width: 240px) {
	.g-xs-0 {
		padding: 0;
	}

	.g-xs-0 > * {
		padding: 0;
	}

	.g-xs-1 {
		padding: calc(var(--size-1) / 2);
	}

	.g-xs-1 > * {
		padding: calc(var(--size-1) / 2);
	}

	.g-xs-2 {
		padding: calc(var(--size-2) / 2);
	}

	.g-xs-2 > * {
		padding: calc(var(--size-2) / 2);
	}

	.g-xs-3 {
		padding: calc(var(--size-3) / 2);
	}

	.g-xs-3 > * {
		padding: calc(var(--size-3) / 2);
	}

	.g-xs-4 {
		padding: calc(var(--size-4) / 2);
	}

	.g-xs-4 > * {
		padding: calc(var(--size-4) / 2);
	}

	.g-xs-5 {
		padding: calc(var(--size-5) / 2);
	}

	.g-xs-5 > * {
		padding: calc(var(--size-5) / 2);
	}

	.g-xs-6 {
		padding: calc(var(--size-6) / 2);
	}

	.g-xs-6 > * {
		padding: calc(var(--size-6) / 2);
	}
}

@media only screen and (min-width: 480px) {
	.g-s-0 {
		padding: 0;
	}

	.g-s-0 > * {
		padding: 0;
	}

	.g-s-1 {
		padding: calc(var(--size-1) / 2);
	}

	.g-s-1 > * {
		padding: calc(var(--size-1) / 2);
	}

	.g-s-2 {
		padding: calc(var(--size-2) / 2);
	}

	.g-s-2 > * {
		padding: calc(var(--size-2) / 2);
	}

	.g-s-3 {
		padding: calc(var(--size-3) / 2);
	}

	.g-s-3 > * {
		padding: calc(var(--size-3) / 2);
	}

	.g-s-4 {
		padding: calc(var(--size-4) / 2);
	}

	.g-s-4 > * {
		padding: calc(var(--size-4) / 2);
	}

	.g-s-5 {
		padding: calc(var(--size-5) / 2);
	}

	.g-s-5 > * {
		padding: calc(var(--size-5) / 2);
	}

	.g-s-6 {
		padding: calc(var(--size-6) / 2);
	}

	.g-s-6 > * {
		padding: calc(var(--size-6) / 2);
	}
}

@media only screen and (min-width: 720px) {
	.g-m-0 {
		padding: 0;
	}

	.g-m-0 > * {
		padding: 0;
	}

	.g-m-1 {
		padding: calc(var(--size-1) / 2);
	}

	.g-m-1 > * {
		padding: calc(var(--size-1) / 2);
	}

	.g-m-2 {
		padding: calc(var(--size-2) / 2);
	}

	.g-m-2 > * {
		padding: calc(var(--size-2) / 2);
	}

	.g-m-3 {
		padding: calc(var(--size-3) / 2);
	}

	.g-m-3 > * {
		padding: calc(var(--size-3) / 2);
	}

	.g-m-4 {
		padding: calc(var(--size-4) / 2);
	}

	.g-m-4 > * {
		padding: calc(var(--size-4) / 2);
	}

	.g-m-5 {
		padding: calc(var(--size-5) / 2);
	}

	.g-m-5 > * {
		padding: calc(var(--size-5) / 2);
	}

	.g-m-6 {
		padding: calc(var(--size-6) / 2);
	}

	.g-m-6 > * {
		padding: calc(var(--size-6) / 2);
	}
}

@media only screen and (min-width: 960px) {
	.g-l-0 {
		padding: 0;
	}

	.g-l-0 > * {
		padding: 0;
	}

	.g-l-1 {
		padding: calc(var(--size-1) / 2);
	}

	.g-l-1 > * {
		padding: calc(var(--size-1) / 2);
	}

	.g-l-2 {
		padding: calc(var(--size-2) / 2);
	}

	.g-l-2 > * {
		padding: calc(var(--size-2) / 2);
	}

	.g-l-3 {
		padding: calc(var(--size-3) / 2);
	}

	.g-l-3 > * {
		padding: calc(var(--size-3) / 2);
	}

	.g-l-4 {
		padding: calc(var(--size-4) / 2);
	}

	.g-l-4 > * {
		padding: calc(var(--size-4) / 2);
	}

	.g-l-5 {
		padding: calc(var(--size-5) / 2);
	}

	.g-l-5 > * {
		padding: calc(var(--size-5) / 2);
	}

	.g-l-6 {
		padding: calc(var(--size-6) / 2);
	}

	.g-l-6 > * {
		padding: calc(var(--size-6) / 2);
	}
}

@media only screen and (min-width: 1200px) {
	.g-xl-0 {
		padding: 0;
	}

	.g-xl-0 > * {
		padding: 0;
	}

	.g-xl-1 {
		padding: calc(var(--size-1) / 2);
	}

	.g-xl-1 > * {
		padding: calc(var(--size-1) / 2);
	}

	.g-xl-2 {
		padding: calc(var(--size-2) / 2);
	}

	.g-xl-2 > * {
		padding: calc(var(--size-2) / 2);
	}

	.g-xl-3 {
		padding: calc(var(--size-3) / 2);
	}

	.g-xl-3 > * {
		padding: calc(var(--size-3) / 2);
	}

	.g-xl-4 {
		padding: calc(var(--size-4) / 2);
	}

	.g-xl-4 > * {
		padding: calc(var(--size-4) / 2);
	}

	.g-xl-5 {
		padding: calc(var(--size-5) / 2);
	}

	.g-xl-5 > * {
		padding: calc(var(--size-5) / 2);
	}

	.g-xl-6 {
		padding: calc(var(--size-6) / 2);
	}

	.g-xl-6 > * {
		padding: calc(var(--size-6) / 2);
	}
}

/* -------------------- */

.gx-0 {
	padding: 0;
}

.gx-0 > * {
	padding: 0;
}

.gx-1 {
	padding-right: calc(var(--size-1) / 2);
	padding-left: calc(var(--size-1) / 2);
}

.gx-1 > * {
	padding-right: calc(var(--size-1) / 2);
	padding-left: calc(var(--size-1) / 2);
}

.gx-2 {
	padding-right: calc(var(--size-2) / 2);
	padding-left: calc(var(--size-2) / 2);
}

.gx-2 > * {
	padding-right: calc(var(--size-2) / 2);
	padding-left: calc(var(--size-2) / 2);
}

.gx-3 {
	padding-right: calc(var(--size-3) / 2);
	padding-left: calc(var(--size-3) / 2);
}

.gx-3 > * {
	padding-right: calc(var(--size-3) / 2);
	padding-left: calc(var(--size-3) / 2);
}

.gx-4 {
	padding-right: calc(var(--size-4) / 2);
	padding-left: calc(var(--size-4) / 2);
}

.gx-4 > * {
	padding-right: calc(var(--size-4) / 2);
	padding-left: calc(var(--size-4) / 2);
}

.gx-5 {
	padding-right: calc(var(--size-5) / 2);
	padding-left: calc(var(--size-5) / 2);
}

.gx-5 > * {
	padding-right: calc(var(--size-5) / 2);
	padding-left: calc(var(--size-5) / 2);
}

.gx-6 {
	padding-right: calc(var(--size-6) / 2);
	padding-left: calc(var(--size-6) / 2);
}

.gx-6 > * {
	padding-right: calc(var(--size-6) / 2);
	padding-left: calc(var(--size-6) / 2);
}

/* -------------------- */

.gy-0 {
	padding: 0;
}

.gy-0 > * {
	padding: 0;
}

.gy-1 {
	padding-top: calc(var(--size-1) / 2);
	padding-bottom: calc(var(--size-1) / 2);
}

.gy-1 > * {
	padding-top: calc(var(--size-1) / 2);
	padding-bottom: calc(var(--size-1) / 2);
}

.gy-2 {
	padding-top: calc(var(--size-2) / 2);
	padding-bottom: calc(var(--size-2) / 2);
}

.gy-2 > * {
	padding-top: calc(var(--size-2) / 2);
	padding-bottom: calc(var(--size-2) / 2);
}

.gy-3 {
	padding-top: calc(var(--size-3) / 2);
	padding-bottom: calc(var(--size-3) / 2);
}

.gy-3 > * {
	padding-top: calc(var(--size-3) / 2);
	padding-bottom: calc(var(--size-3) / 2);
}

.gy-4 {
	padding-top: calc(var(--size-4) / 2);
	padding-bottom: calc(var(--size-4) / 2);
}

.gy-4 > * {
	padding-top: calc(var(--size-4) / 2);
	padding-bottom: calc(var(--size-4) / 2);
}

.gy-5 {
	padding-top: calc(var(--size-5) / 2);
	padding-bottom: calc(var(--size-5) / 2);
}

.gy-5 > * {
	padding-top: calc(var(--size-5) / 2);
	padding-bottom: calc(var(--size-5) / 2);
}

.gy-6 {
	padding-top: calc(var(--size-6) / 2);
	padding-bottom: calc(var(--size-6) / 2);
}

.gy-6 > * {
	padding-top: calc(var(--size-6) / 2);
	padding-bottom: calc(var(--size-6) / 2);
}

/* -------------------- */
/* -------------------- */

.container,
.container-xs,
.container-xs-p-1,
.container-xs-p-2,
.container-xs-p-3,
.container-xs-p-4,
.container-xs-p-5,
.container-xs-p-6,
.container-s,
.container-s-p-1,
.container-s-p-2,
.container-s-p-3,
.container-s-p-4,
.container-s-p-5,
.container-s-p-6,
.container-m,
.container-m-p-1,
.container-m-p-2,
.container-m-p-3,
.container-m-p-4,
.container-m-p-5,
.container-m-p-6,
.container-l,
.container-l-p-1,
.container-l-p-2,
.container-l-p-3,
.container-l-p-4,
.container-l-p-5,
.container-l-p-6,
.container-xl,
.container-xl-p-1,
.container-xl-p-2,
.container-xl-p-3,
.container-xl-p-4,
.container-xl-p-5,
.container-xl-p-6 {
	width: 100%;
	margin: 0 auto;
}

.container-xs {
	max-width: var(--xs);
}

.container-xs-p-1 {
	max-width: calc(var(--xs) + (var(--size-1) * 2));
}

.container-xs-p-2 {
	max-width: calc(var(--xs) + (var(--size-2) * 2));
}

.container-xs-p-3 {
	max-width: calc(var(--xs) + (var(--size-3) * 2));
}

.container-xs-p-4 {
	max-width: calc(var(--xs) + (var(--size-4) * 2));
}

.container-xs-p-5 {
	max-width: calc(var(--xs) + (var(--size-5) * 2));
}

.container-xs-p-6 {
	max-width: calc(var(--xs) + (var(--size-6) * 2));
}

.container-s {
	max-width: var(--s);
}

.container-s-p-1 {
	max-width: calc(var(--s) + (var(--size-1) * 2));
}

.container-s-p-2 {
	max-width: calc(var(--s) + (var(--size-2) * 2));
}

.container-s-p-3 {
	max-width: calc(var(--s) + (var(--size-3) * 2));
}

.container-s-p-4 {
	max-width: calc(var(--s) + (var(--size-4) * 2));
}

.container-s-p-5 {
	max-width: calc(var(--s) + (var(--size-5) * 2));
}

.container-s-p-6 {
	max-width: calc(var(--s) + (var(--size-6) * 2));
}

.container-m {
	max-width: var(--m);
}

.container-m-p-1 {
	max-width: calc(var(--m) + (var(--size-1) * 2));
}

.container-m-p-2 {
	max-width: calc(var(--m) + (var(--size-2) * 2));
}

.container-m-p-3 {
	max-width: calc(var(--m) + (var(--size-3) * 2));
}

.container-m-p-4 {
	max-width: calc(var(--m) + (var(--size-4) * 2));
}

.container-m-p-5 {
	max-width: calc(var(--m) + (var(--size-5) * 2));
}

.container-m-p-6 {
	max-width: calc(var(--m) + (var(--size-6) * 2));
}

.container-l {
	max-width: var(--l);
}

.container-l-p-1 {
	max-width: calc(var(--l) + (var(--size-1) * 2));
}

.container-l-p-2 {
	max-width: calc(var(--l) + (var(--size-2) * 2));
}

.container-l-p-3 {
	max-width: calc(var(--l) + (var(--size-3) * 2));
}

.container-l-p-4 {
	max-width: calc(var(--l) + (var(--size-4) * 2));
}

.container-l-p-5 {
	max-width: calc(var(--l) + (var(--size-5) * 2));
}

.container-l-p-6 {
	max-width: calc(var(--l) + (var(--size-6) * 2));
}

.container-xl {
	max-width: var(--xl);
}

.container-xl-p-1 {
	max-width: calc(var(--xl) + (var(--size-1) * 2));
}

.container-xl-p-2 {
	max-width: calc(var(--xl) + (var(--size-2) * 2));
}

.container-xl-p-3 {
	max-width: calc(var(--xl) + (var(--size-3) * 2));
}

.container-xl-p-4 {
	max-width: calc(var(--xl) + (var(--size-4) * 2));
}

.container-xl-p-5 {
	max-width: calc(var(--xl) + (var(--size-5) * 2));
}

.container-xl-p-6 {
	max-width: calc(var(--xl) + (var(--size-6) * 2));
}

/* -------------------- */

.row {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	width: 100%;
}

/* -------------------- */

.col {
	flex: 1;
}

.col-auto {
	width: auto;
}

.col-100 {
	width: 100%;
}

.col-break {
	width: 100%;
	padding: 0;
	margin: 0;
}

.col-1 {
	width: calc(100% * (1/12));
}

.col-2 {
	width: calc(100% * (2/12));
}

.col-3 {
	width: calc(100% * (3/12));
}

.col-4 {
	width: calc(100% * (4/12));
}

.col-5 {
	width: calc(100% * (5/12));
}

.col-6 {
	width: calc(100% * (6/12));
}

.col-7 {
	width: calc(100% * (7/12));
}

.col-8 {
	width: calc(100% * (8/12));
}

.col-9 {
	width: calc(100% * (9/12));
}

.col-10 {
	width: calc(100% * (10/12));
}

.col-11 {
	width: calc(100% * (11/12));
}

.col-12 {
	width: calc(100% * (12/12));
}

.col-flex-1 {
	flex: 1;
}

.col-flex-2 {
	flex: 2;
}

.col-flex-3 {
	flex: 3;
}

.col-flex-4 {
	flex: 4;
}

.col-flex-5 {
	flex: 5;
}

.col-flex-6 {
	flex: 6;
}

.col-flex-7 {
	flex: 7;
}

.col-flex-8 {
	flex: 8;
}

.col-flex-9 {
	flex: 9;
}

.col-flex-10 {
	flex: 10;
}

.col-flex-11 {
	flex: 11;
}

.col-flex-12 {
	flex: 12;
}

@media only screen and (min-width: 240px) {
	.col-xs {
		flex: 1;
	}

	.col-xs-auto {
		width: auto;
	}

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

	.col-xs-1 {
		width: calc(100% * (1/12));
	}

	.col-xs-2 {
		width: calc(100% * (2/12));
	}

	.col-xs-3 {
		width: calc(100% * (3/12));
	}

	.col-xs-4 {
		width: calc(100% * (4/12));
	}

	.col-xs-5 {
		width: calc(100% * (5/12));
	}

	.col-xs-6 {
		width: calc(100% * (6/12));
	}

	.col-xs-7 {
		width: calc(100% * (7/12));
	}

	.col-xs-8 {
		width: calc(100% * (8/12));
	}

	.col-xs-9 {
		width: calc(100% * (9/12));
	}

	.col-xs-10 {
		width: calc(100% * (10/12));
	}

	.col-xs-11 {
		width: calc(100% * (11/12));
	}

	.col-xs-12 {
		width: calc(100% * (12/12));
	}

	.col-flex-xs-1 {
		flex: 1;
	}

	.col-flex-xs-2 {
		flex: 2;
	}

	.col-flex-xs-3 {
		flex: 3;
	}

	.col-flex-xs-4 {
		flex: 4;
	}

	.col-flex-xs-5 {
		flex: 5;
	}

	.col-flex-xs-6 {
		flex: 6;
	}

	.col-flex-xs-7 {
		flex: 7;
	}

	.col-flex-xs-8 {
		flex: 8;
	}

	.col-flex-xs-9 {
		flex: 9;
	}

	.col-flex-xs-10 {
		flex: 10;
	}

	.col-flex-xs-11 {
		flex: 11;
	}

	.col-flex-xs-12 {
		flex: 12;
	}
}

@media only screen and (min-width: 480px) {
	.col-s {
		flex: 1;
	}

	.col-s-auto {
		width: auto;
	}

	.col-s-100 {
		width: 100%;
	}

	.col-s-1 {
		width: calc(100% * (1/12));
	}

	.col-s-2 {
		width: calc(100% * (2/12));
	}

	.col-s-3 {
		width: calc(100% * (3/12));
	}

	.col-s-4 {
		width: calc(100% * (4/12));
	}

	.col-s-5 {
		width: calc(100% * (5/12));
	}

	.col-s-6 {
		width: calc(100% * (6/12));
	}

	.col-s-7 {
		width: calc(100% * (7/12));
	}

	.col-s-8 {
		width: calc(100% * (8/12));
	}

	.col-s-9 {
		width: calc(100% * (9/12));
	}

	.col-s-10 {
		width: calc(100% * (10/12));
	}

	.col-s-11 {
		width: calc(100% * (11/12));
	}

	.col-s-12 {
		width: calc(100% * (12/12));
	}

	.col-flex-s-1 {
		flex: 1;
	}

	.col-flex-s-2 {
		flex: 2;
	}

	.col-flex-s-3 {
		flex: 3;
	}

	.col-flex-s-4 {
		flex: 4;
	}

	.col-flex-s-5 {
		flex: 5;
	}

	.col-flex-s-6 {
		flex: 6;
	}

	.col-flex-s-7 {
		flex: 7;
	}

	.col-flex-s-8 {
		flex: 8;
	}

	.col-flex-s-9 {
		flex: 9;
	}

	.col-flex-s-10 {
		flex: 10;
	}

	.col-flex-s-11 {
		flex: 11;
	}

	.col-flex-s-12 {
		flex: 12;
	}
}

@media only screen and (min-width: 720px) {
	.col-m {
		flex: 1;
	}

	.col-m-auto {
		width: auto;
	}

	.col-m-100 {
		width: 100%;
	}

	.col-m-1 {
		width: calc(100% * (1/12));
	}

	.col-m-2 {
		width: calc(100% * (2/12));
	}

	.col-m-3 {
		width: calc(100% * (3/12));
	}

	.col-m-4 {
		width: calc(100% * (4/12));
	}

	.col-m-5 {
		width: calc(100% * (5/12));
	}

	.col-m-6 {
		width: calc(100% * (6/12));
	}

	.col-m-7 {
		width: calc(100% * (7/12));
	}

	.col-m-8 {
		width: calc(100% * (8/12));
	}

	.col-m-9 {
		width: calc(100% * (9/12));
	}

	.col-m-10 {
		width: calc(100% * (10/12));
	}

	.col-m-11 {
		width: calc(100% * (11/12));
	}

	.col-m-12 {
		width: calc(100% * (12/12));
	}

	.col-flex-m-1 {
		flex: 1;
	}

	.col-flex-m-2 {
		flex: 2;
	}

	.col-flex-m-3 {
		flex: 3;
	}

	.col-flex-m-4 {
		flex: 4;
	}

	.col-flex-m-5 {
		flex: 5;
	}

	.col-flex-m-6 {
		flex: 6;
	}

	.col-flex-m-7 {
		flex: 7;
	}

	.col-flex-m-8 {
		flex: 8;
	}

	.col-flex-m-9 {
		flex: 9;
	}

	.col-flex-m-10 {
		flex: 10;
	}

	.col-flex-m-11 {
		flex: 11;
	}

	.col-flex-m-12 {
		flex: 12;
	}
}

@media only screen and (min-width: 960px) {
	.col-l {
		flex: 1;
	}

	.col-l-auto {
		width: auto;
	}

	.col-l-100 {
		width: 100%;
	}

	.col-l-1 {
		width: calc(100% * (1/12));
	}

	.col-l-2 {
		width: calc(100% * (2/12));
	}

	.col-l-3 {
		width: calc(100% * (3/12));
	}

	.col-l-4 {
		width: calc(100% * (4/12));
	}

	.col-l-5 {
		width: calc(100% * (5/12));
	}

	.col-l-6 {
		width: calc(100% * (6/12));
	}

	.col-l-7 {
		width: calc(100% * (7/12));
	}

	.col-l-8 {
		width: calc(100% * (8/12));
	}

	.col-l-9 {
		width: calc(100% * (9/12));
	}

	.col-l-10 {
		width: calc(100% * (10/12));
	}

	.col-l-11 {
		width: calc(100% * (11/12));
	}

	.col-l-12 {
		width: calc(100% * (12/12));
	}

	.col-flex-l-1 {
		flex: 1;
	}

	.col-flex-l-2 {
		flex: 2;
	}

	.col-flex-l-3 {
		flex: 3;
	}

	.col-flex-l-4 {
		flex: 4;
	}

	.col-flex-l-5 {
		flex: 5;
	}

	.col-flex-l-6 {
		flex: 6;
	}

	.col-flex-l-7 {
		flex: 7;
	}

	.col-flex-l-8 {
		flex: 8;
	}

	.col-flex-l-9 {
		flex: 9;
	}

	.col-flex-l-10 {
		flex: 10;
	}

	.col-flex-l-11 {
		flex: 11;
	}

	.col-flex-l-12 {
		flex: 12;
	}
}

@media only screen and (min-width: 1200px) {
	.col-xl {
		flex: 1;
	}

	.col-xl-auto {
		width: auto;
	}

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

	.col-xl-1 {
		width: calc(100% * (1/12));
	}

	.col-xl-2 {
		width: calc(100% * (2/12));
	}

	.col-xl-3 {
		width: calc(100% * (3/12));
	}

	.col-xl-4 {
		width: calc(100% * (4/12));
	}

	.col-xl-5 {
		width: calc(100% * (5/12));
	}

	.col-xl-6 {
		width: calc(100% * (6/12));
	}

	.col-xl-7 {
		width: calc(100% * (7/12));
	}

	.col-xl-8 {
		width: calc(100% * (8/12));
	}

	.col-xl-9 {
		width: calc(100% * (9/12));
	}

	.col-xl-10 {
		width: calc(100% * (10/12));
	}

	.col-xl-11 {
		width: calc(100% * (11/12));
	}

	.col-xl-12 {
		width: calc(100% * (12/12));
	}

	.col-flex-xl-1 {
		flex: 1;
	}

	.col-flex-xl-2 {
		flex: 2;
	}

	.col-flex-xl-3 {
		flex: 3;
	}

	.col-flex-xl-4 {
		flex: 4;
	}

	.col-flex-xl-5 {
		flex: 5;
	}

	.col-flex-xl-6 {
		flex: 6;
	}

	.col-flex-xl-7 {
		flex: 7;
	}

	.col-flex-xl-8 {
		flex: 8;
	}

	.col-flex-xl-9 {
		flex: 9;
	}

	.col-flex-xl-10 {
		flex: 10;
	}

	.col-flex-xl-11 {
		flex: 11;
	}

	.col-flex-xl-12 {
		flex: 12;
	}
}

/* -------------------- */
/* -------------------- */

.cursor-pointer {
	cursor: pointer !important;
}

/* -------------------- */
/* -------------------- */

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

/* -------------------- */

.leading-icon,
.trailing-icon {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

/* -------------------- */

/*.grid {
	display: grid;
	width: 100%;
}*/

/* -------------------- */

.noscroll {
	position: fixed;
	overflow-y: scroll;
	width: 100%;
}

/* -------------------- */
/* -------------------- */

.btn,
a.btn,
button.btn {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	font-family: var(--font-family-default);
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-white);
	text-decoration: none;
	background: var(--color-primary);
	border: 2px solid var(--color-primary);
	border-radius: var(--rounded);
	box-shadow: 1px 1px 3px 0 rgba(000, 000, 000, 0.1);
	padding: 6px 10px;
	cursor: pointer;
	transition: var(--transition-button);
}

.btn > .icon {
	font-size: 20px;
}

.btn > .icon + .text,
.btn > .text + .icon {
	margin-left: 4px;
}

.btn.fixed-size {
	width: 36px;
	height: 36px;
	font-size: 20px;
	padding: 0;
}

/* -------------------- */

.btn.btn-xs {
	font-size: 12px;
	padding: 2px 6px;
}

.btn.btn-xs .icon {
	font-size: 16px;
}

.btn.btn-xs > .icon + .text,
.btn.btn-xs > .text + .icon {
	margin-left: 2px;
}

.btn.btn-xs.fixed-size {
	width: 28px;
	height: 28px;
	font-size: 16px;
	padding: 0;
}

/* -------------------- */

.btn.btn-s {
	font-size: 14px;
	padding: 4px 8px;
}

.btn.btn-s .icon {
	font-size: 18px;
}

.btn.btn-s > .icon + .text,
.btn.btn-s > .text + .icon {
	margin-left: 3px;
}

.btn.btn-s.fixed-size {
	width: 32px;
	height: 32px;
	font-size: 18px;
	padding: 0;
}

/* -------------------- */

.btn.btn-m {
	font-size: 16px;
	padding: 6px 10px;
}

.btn.btn-m .icon {
	font-size: 20px;
}

.btn.btn-m > .icon + .text,
.btn.btn-m > .text + .icon {
	margin-left: 4px;
}

.btn.btn-m.fixed-size {
	width: 36px;
	height: 36px;
	font-size: 20px;
	padding: 0;
}

/* -------------------- */

.btn.btn-l {
	font-size: 18px;
	padding: 8px 12px;
}

.btn.btn-l .icon {
	font-size: 22px;
}

.btn.btn-l > .icon + .text,
.btn.btn-l > .text + .icon {
	margin-left: 5px;
}

.btn.btn-l.fixed-size {
	width: 40px;
	height: 40px;
	font-size: 22px;
	padding: 0;
}

/* -------------------- */

.btn.btn-xl {
	font-size: 20px;
	padding: 10px 14px;
}

.btn.btn-xl .icon {
	font-size: 24px;
}

.btn.btn-xl > .icon + .text,
.btn.btn-xl > .text + .icon {
	margin-left: 6px;
}

.btn.btn-xl.fixed-size {
	width: 44px;
	height: 44px;
	font-size: 24px;
	padding: 0;
}

/* -------------------- */

.btn.disabled {
	opacity: 0.5;
}

.btn:hover {
	opacity: 0.75;
}

/* -------------------- */

/*.btn > .loading {
	position: absolute;
	top: 9px;
	right: 9px;
	bottom: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 18px;
	height: 18px;
	background-image: url(../images/ajax-loader-white.gif);
	background-size: 18px 18px;
	margin-left: var(--size-4);
}*/

/* -------------------- */

.btn.btn-primary {
	color: var(--color-white);
	background: var(--color-primary);
}

.btn.btn-primary-outline {
	color: var(--color-primary);
	background: var(--color-white);
}

.btn.btn-secondary {
	color: var(--color-white);
	background: var(--color-secondary);
}

.btn.btn-secondary-outline {
	color: var(--color-secondary);
	background: var(--color-white);
	border-color: var(--color-secondary);
}

.btn.btn-success {
	color: var(--color-white);
	background: var(--color-success);
}

.btn.btn-success-outline {
	color: var(--color-success);
	background: var(--color-white);
	border-color: var(--color-success);
}

.btn.btn-warning {
	color: var(--color-white);
	background: var(--color-warning);
}

.btn.btn-warning-outline {
	color: var(--color-warning);
	background: var(--color-white);
	border-color: var(--color-warning);
}

.btn.btn-link {
	font-weight: var(--font-weight-normal);
	color: var(--color-primary);
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

.btn.btn-link > .text {
	text-decoration: underline;
}

.btn.btn-icon {
	color: var(--color-primary);
	background: none;
	border: none;
	border-radius: unset;
	box-shadow: none;
	padding: 0;
}

/* -------------------- */

.badge-dot {
	width: 16px;
	height: 16px;
	background: var(--color-black);
	border-radius: 50%;
}

/* -------------------- */

.title,
.subtitle,
.label {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	font-weight: var(--font-weight-medium);
	color: var(--color-text);
	text-align: left;
}

.title.center,
.subtitle.center,
.label.center {
	justify-content: center;
}

.title.right,
.subtitle.right,
.label.right {
	justify-content: flex-end;
}

.title > .icon,
.subtitle > .icon,
.label > .icon {
	font-size: 24px;
}

.title > .icon + .text,
.subtitle > .icon + .text,
.label > .icon + .text {
	margin-left: var(--size-3);
}

.title > .text + .icon,
.subtitle > .text + .icon,
.label > .text + .icon {
	margin-left: var(--size-3);
}

/* -------------------- */

.content-label {
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-default);
	text-align: left;
}

.content-label + .content-color,
.content-label + .content-picture,
.content-label + .content-text {
	margin-top: var(--size-2);
}

.content-color {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}

.content-color .color {
	display: block;
	width: 24px;
	height: 24px;
	border-radius: var(--size-2);
	box-shadow: 1px 1px 3px 0 rgba(000, 000, 000, 0.1);
}

.content-color .color + .text {
	margin-left: var(--size-3);
}

.content-picture {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.content-picture img {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: auto;
}

.content-qrcode {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
}

.content-text {
	font-size: 16px;
	font-weight: var(--font-weight-light);
	color: var(--color-default);
	text-align: left;
}

/* -------------------- */
/* -------------------- */

.video-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.video-container .video {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-bottom: 100%;
	padding-top: 30px;
}

.video-16-9 {
	padding-bottom: 56.25% !important;
}

.video-4-3 {
	padding-bottom: 75% !important;
}

.video-container .video iframe,
.video-container .video object,
.video-container .video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* -------------------- */
/* -------------------- */

/*.form-item {
	width: 100%;
}*/

.form-item-separator {
	width: 100%;
	border-top: 1px dashed var(--color-gray-300);
}

.form-field {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-height: 56px;
	font-size: var(--font-size-default);
	border: 1px solid var(--color-gray-300);
	border-radius: 4px;
	padding: var(--size-4) 12px var(--size-4) var(--size-4);
	transition: all 0.2s ease-out;
	will-change: opacity, transform, color;
}

.form-field:focus-within {
	border: 2px solid var(--color-primary);
}

.form-field.disabled {
	opacity: 0.5;
}

.form-field.error,
.form-field.error:focus-within {
	border: 2px solid var(--color-error);
}

.form-field.floating .form-input::placeholder,
.form-field.floating .form-select::placeholder {
	opacity: 0;
}

.form-field .form-label {
	position: absolute;
	top: -8px;
	left: 15px;
	display: block;
	height: 15px;
	font-size: 12px;
	color: var(--color-gray-500);
	background-color: var(--color-white);
	padding: 0 4px;
	transition: all 0.2s ease-out;
}

.form-field.floating .form-input:placeholder-shown ~ .form-label {
	top: 17px;
	left: 12px;
	font-size: var(--font-size-default);
}

.form-field.floating:focus-within .form-label {
	top: -8px !important;
	left: 15px !important;
	font-size: 12px !important;
}

.form-field.floating.has-icon .form-input:placeholder-shown ~ .form-label {
	left: 46px;
}

.form-field:focus-within .form-label {
	color: var(--color-primary) !important;
}

.form-field.error .form-label {
	color: var(--color-error) !important;
}

.form-field .leading-icon,
.form-field .trailing-icon {
	font-size: 24px;
	color: var(--color-gray-500);
}

.form-field .trailing-icon.error {
	color: var(--color-error);
}

.form-field .leading-icon {
	margin-right: 8px;
}

.form-field .trailing-icon {
	margin-left: 8px;
}

.form-input,
.form-select,
.form-textarea {
	z-index: 1;
	flex: 1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

.form-input::placeholder {
	font-style: italic;
	color: var(--color-gray-500);
}

.form-helper {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	padding: 6px 12px 0 var(--size-4);
}

.form-helper > * + * {
	margin-left: 6px;
}

.form-helper-text {
	font-size: 12px;
	color: var(--color-gray-600);
	text-align: left;
}

.form-helper-text.error {
	color: var(--color-error);
}

.form-character-counter {
	white-space: nowrap;
	font-size: 12px;
	color: var(--color-gray-600);
	padding-left: 6px;
	margin-left: auto;
}

/* Form field switch */
.form-field-switch {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 56px;
	font-size: var(--font-size-default);
	border: 1px solid var(--color-gray-300);
	border-radius: 4px;
	padding: 0 6px 0 var(--size-4);
	transition: all 0.2s ease-out;
	will-change: opacity, transform, color;
}

.form-field-switch .form-label {
	text-align: left;
	padding-right: var(--size-4);
}

.form-field-switch .form-switch {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 56px;
	height: 20px;
	margin-left: auto;
}

.form-field-switch .form-switch .form-input-switch {
	position: absolute;
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
}

.form-field-switch .form-switch .slider {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 36px;
	height: 16px;
	background: var(--color-gray-600);
	border-radius: 16px;
	box-shadow: var(--box-shadow-internal-1);
	padding: 0;
	margin: 0;
	cursor: pointer;
	transition: 0.2s ease-out;
}

.form-field-switch .form-switch .form-input-switch:checked + .slider {
	background: var(--color-primary);
}

.form-field-switch .form-switch .slider .btn-slider {
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid var(--color-gray-100);
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: var(--box-shadow-1);
	cursor: pointer;
	transition: 0.2s ease-out;
}

.form-field-switch .form-switch .form-input-switch:checked + .slider .btn-slider {
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	transform: translateX(16px);
}

/* Form field color picker */
.form-field-color-picker {
	position: relative;
	width: 100%;
	min-height: 56px;
	font-size: var(--font-size-default);
	border: 1px solid var(--color-gray-300);
	border-radius: 4px;
	padding: var(--size-4) 12px var(--size-4) var(--size-4);
	transition: all 0.2s ease-out;
	will-change: opacity, transform, color;
}

.form-field-color-picker.open {
	align-items: stretch;
	border: 2px solid var(--color-primary);
}

.form-field-color-picker.error {
	border: 2px solid var(--color-error);
}

/* Color picker: label */
.form-field-color-picker .form-label {
	position: absolute;
	top: -8px;
	left: 15px;
	display: block;
	height: 15px;
	font-size: 12px;
	color: var(--color-gray-500);
	background-color: var(--color-white);
	padding: 0 4px;
	transition: all 0.2s ease-out;
}

.form-field-color-picker.open .form-label {
	color: var(--color-primary) !important;
}

.form-field-color-picker.error .form-label {
	color: var(--color-error) !important;
}

/* Color picker: input */
.form-field-color-picker .color {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}

/* Color picker: preview */
.form-field-color-picker .color .preview {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	border-radius: var(--size-2);
	box-shadow: 1px 1px 3px 0 rgba(000, 000, 000, 0.1);
	margin-right: 8px;
	cursor: pointer;
}

.form-field-color-picker.open .color .preview {
	width: 48px;
	height: 48px;
}

.form-field-color-picker .color .preview.empty {
	border: 1px solid var(--color-gray-100);
}

.form-field-color-picker .color .preview.empty::before {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: #cc0000;
	transform: rotate(-45deg);
}

/* Color picker: data */
.form-field-color-picker .color .data {
	flex: 1;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	font-size: var(--font-size-default);
}

.form-field-color-picker .color .data::placeholder {
	font-style: italic;
	color: var(--color-gray-500);
}

.form-field-color-picker.open .color .data {
	height: 48px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--size-2);
	padding: var(--size-3);
}

/* Color picker: buttons */
.form-field-color-picker .color .btn-open,
.form-field-color-picker .color .btn-close,
.form-field-color-picker .color .btn-delete {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	font-size: 24px;
	color: var(--color-gray-500);
	background: none;
	border: none;
	padding: 0;
	margin-left: 8px;
	cursor: pointer;
	transition: var(--transition-button);
}

.form-field-color-picker.open .color .btn-open,
.form-field-color-picker .color .btn-close {
	display: none;
}

.form-field-color-picker.open .color .btn-close {
	display: flex;
}

.form-field-color-picker .color .btn-open:hover,
.form-field-color-picker .color .btn-close:hover,
.form-field-color-picker .color .btn-delete:hover {
	opacity: 0.75;
}

/* Color picker: separator */
.form-field-color-picker .separator {
	width: 100%;
	border-top: 1px dashed var(--color-gray-300);
	margin: var(--size-4) 0;
}

/* Color picker: settings */
.form-field-color-picker .settings {
	display: none;
	margin-top: var(--size-4);
}

.form-field-color-picker.open .settings {
	display: block;
}

/* Color picker: settings labels */
.form-field-color-picker .settings .label {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	font-size: 12px;
	color: var(--color-gray-500);
	margin-top: var(--size-2);
}

/* Color picker: samples */
.form-field-color-picker .samples {
	width: 100%;
	max-width: calc((24px * 12) + (var(--size-2) * 24) + (var(--size-2) * 2));
	margin: 0 auto;
}

.form-field-color-picker .samples > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	padding: 0 var(--size-2);
}

.form-field-color-picker .samples  > div .sample {
	width: 24px;
	height: 24px;
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
	margin: var(--size-2);
	cursor: pointer;
}

/* Color picker: sliders */
.form-field-color-picker .hue-slider,
.form-field-color-picker .saturation-slider,
.form-field-color-picker .lightness-slider,
.form-field-color-picker .red-slider,
.form-field-color-picker .green-slider,
.form-field-color-picker .blue-slider,
.form-field-color-picker .grayscale-slider {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 24px;
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
	padding: 0;
	margin-top: var(--size-4);
}


.form-field-color-picker .label + .hue-slider,
.form-field-color-picker .label + .saturation-slider,
.form-field-color-picker .label + .lightness-slider,
.form-field-color-picker .label + .red-slider,
.form-field-color-picker .label + .green-slider,
.form-field-color-picker .label + .blue-slider,
.form-field-color-picker .label + .grayscale-slider {
	margin-top: var(--size-2);
}

.form-field-color-picker .hue-slider {
	background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
	/*background: linear-gradient(to right, red 0%, #ff0 17%, lime 33%, cyan 50%, blue 66%, #f0f 83%, red 100%);*/
}

.form-field-color-picker .saturation-slider {
	background: var(--color-white);
}

.form-field-color-picker .lightness-slider {
	background: var(--color-black);
}

.form-field-color-picker .red-slider {
	background: #ff330025;
}

.form-field-color-picker .green-slider {
	background: #00cc0025;
}

.form-field-color-picker .blue-slider {
	background: #0066ff25;
}

.form-field-color-picker .grayscale-slider {
	height: 24px;
	background: linear-gradient(to right, var(--color-black), var(--color-white));
}

/* Color picker: sliders range */
.form-field-color-picker .hue-slider .ui-slider-range,
.form-field-color-picker .saturation-slider .ui-slider-range,
.form-field-color-picker .lightness-slider .ui-slider-range,
.form-field-color-picker .red-slider .ui-slider-range,
.form-field-color-picker .green-slider .ui-slider-range,
.form-field-color-picker .blue-slider .ui-slider-range,
.form-field-color-picker .grayscale-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	transition: 0.1s ease-out;
}

.form-field-color-picker .red-slider .ui-slider-range,
.form-field-color-picker .green-slider .ui-slider-range,
.form-field-color-picker .blue-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	height: 24px;
	border-radius: var(--size-2);
	transition: 0.1s ease-out;
}

.form-field-color-picker .red-slider .ui-slider-range {
	background: #ff3300;
}

.form-field-color-picker .green-slider .ui-slider-range {
	background: #00cc00;
}

.form-field-color-picker .blue-slider .ui-slider-range {
	background: #0066ff;
}

/* Color picker: sliders range min */
.form-field-color-picker .hue-slider .ui-slider-range-min,
.form-field-color-picker .saturation-slider .ui-slider-range-min,
.form-field-color-picker .lightness-slider .ui-slider-range-min,
.form-field-color-picker .red-slider .ui-slider-range-min,
.form-field-color-picker .green-slider .ui-slider-range-min,
.form-field-color-picker .blue-slider .ui-slider-range-min,
.form-field-color-picker .grayscale-slider .ui-slider-range-min {
	left: 0;
}

/* Color picker: sliders range max */
.form-field-color-picker .hue-slider .ui-slider-range-max,
.form-field-color-picker .saturation-slider .ui-slider-range-max,
.form-field-color-picker .lightness-slider .ui-slider-range-max,
.form-field-color-picker .red-slider .ui-slider-range-max,
.form-field-color-picker .green-slider .ui-slider-range-max,
.form-field-color-picker .blue-slider .ui-slider-range-max,
.form-field-color-picker .grayscale-slider .ui-slider-range-max {
	right: 0;
}

/* Color picker: sliders handle (button) */
.form-field-color-picker .hue-slider .ui-slider-handle,
.form-field-color-picker .saturation-slider .ui-slider-handle,
.form-field-color-picker .lightness-slider .ui-slider-handle,
.form-field-color-picker .red-slider .ui-slider-handle,
.form-field-color-picker .green-slider .ui-slider-handle,
.form-field-color-picker .blue-slider .ui-slider-handle,
.form-field-color-picker .grayscale-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	display: block;
	width: 10px;
	height: 32px;
	background: #00000025;
	border: 2px solid var(--color-black);
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
	margin-left: -5px;
	cursor: pointer;
	-ms-touch-action: none;
	touch-action: none;
	transition: 0.1s ease-out;
}

.form-field-color-picker .red-slider .ui-slider-handle {
	background: #ff330075;
	border: 2px solid #ff3300;
}

.form-field-color-picker .green-slider .ui-slider-handle {
	background: #00cc0075;
	border: 2px solid #00cc00;
}

.form-field-color-picker .blue-slider .ui-slider-handle {
	background: #0066ff75;
	border: 2px solid #0066ff;
}

/*.form-field-color-picker .red-slider .ui-slider-handle.ui-state-focus,
.form-field-color-picker .green-slider .ui-slider-handle.ui-state-focus,
.form-field-color-picker .blue-slider .ui-slider-handle.ui-state-focus {
	background: var(--color-white);
	border: 2px solid var(--color-primary);
}*/

/* -------------------- */
/* -------------------- */

.message {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: var(--font-size-default);
	font-weight: var(--font-weight-light);
	background: var(--color-white);
	padding: var(--size-4);
	margin: 0 auto;
}

.message.popup {
	position: fixed;
	z-index: 300;
	top: var(--size-4);
	right: var(--size-4);
	width: auto;
	box-shadow: var(--box-shadow-1);
	margin: 0;
}

.message.info {
	color: var(--color-info);
	background: var(--background-info);
}

.message.error {
	color: var(--color-error);
	background: var(--background-error);
}

.message.progress {
	color: var(--color-progress);
	background: var(--background-progress);
}

.message.success {
	color: var(--color-success);
	background: var(--background-success);
}

.message-icon {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	margin-right: var(--size-3);
}

.message-icon .icon {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-size: 20px;
}

.message-content {
	flex: 1;
	width: 100%;
	font-size: 18px;
}

.message-close {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	font-size: 20px;
	margin-left: var(--size-4);
}

.message-close .btn-close {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	color: var(--color-default);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: var(--transition-button);
}

.message.error .message-close .btn-close {
	color: var(--color-error);
}

.message.info .message-close .btn-close {
	color: var(--color-info);
}

.message.success .message-close .btn-close {
	color: var(--color-success);
}

.message-close .btn-close:hover {
	opacity: 0.75;
}

/* -------------------- */
/* -------------------- */

.modal {
	position: fixed;
	z-index: 200;
	top: 0;
	right: 0;
	left: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	height: 100vh;
	overflow-y: auto;
}

.modal.overlay {
	background: rgba(0,0,0,0.5);
}

.modal-loading {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 64px;
	height: 64px;
	background: var(--color-white);
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
	margin: var(--size-4);
}

/*.modal-loading .loading {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	background-image: url(../images/ajax-loader-primary.gif);
	background-size: 24px 24px;
}*/

.modal-content,
.modal-xs .modal-content,
.modal-s .modal-content,
.modal-m .modal-content,
.modal-l .modal-content,
.modal-xl .modal-content {
	width: 100%;
	background: var(--color-white);
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
}

.modal-xs .modal-content {
	max-width: var(--xs);
}

.modal-s .modal-content {
	max-width: var(--s);
}

.modal-m .modal-content {
	max-width: var(--m);
}

.modal-l .modal-content {
	max-width: var(--l);
}

.modal-xl .modal-content {
	max-width: var(--xl);
}

.modal-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid var(--color-gray-100);
	padding: var(--size-4);
}

.modal-title {
	flex: 1;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	font-size: 18px;
	font-weight: var(--font-weight-medium);
	color: var(--color-default);
	text-align: left;
}

.modal-title .leading-icon {
	font-size: 24px;
	color: var(--color-default);
	margin-right: var(--size-3);
}

.modal-header .btn-close {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	color: var(--color-default);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	margin-left: 8px;
	cursor: pointer;
	transition: var(--transition-button);
}

.modal-header .btn-close:hover {
	opacity: 0.75;
}

.modal-label {
	font-size: 16px;
	font-weight: var(--font-weight-medium);
	color: var(--color-default);
	text-align: left;
}

.modal-label + .modal-text {
	margin-top: var(--size-2);
}

.modal-text {
	font-size: 16px;
	color: var(--color-default);
	text-align: left;
}

.modal-footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	font-size: 14px;
	border-top: 1px solid var(--color-gray-100);
	padding: var(--size-4);
}

/* -------------------- */
/* -------------------- */

.breadcrumb {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}

.breadcrumb > .icon {
	font-size: 20px;
	margin: var(--size-2);
}

.breadcrumb > .item {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	font-size: var(--font-size-default);
	color: var(--color-default);
	text-decoration: none;
	margin: var(--size-2);
	transition: var(--transition-link);
}

.breadcrumb > a.item:hover {
	text-decoration: underline;
	opacity: 0.75;
}

.breadcrumb > .separator {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	font-size: 18px;
	color: var(--color-default);
}

/* -------------------- */
/* -------------------- */

.pagination,
.pagination > form {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
}

.pagination > .item,
.pagination > form > .item {
	margin: var(--size-2);
}

.pagination > .item .form-field,
.pagination > form > .item .form-field {
	min-height: unset;
	padding: var(--size-2);
}

/* -------------------- */
/* -------------------- */

.content-block {
	width: 100%;
	background: var(--color-white);
	border-radius: var(--border-radius-2);
	box-shadow: var(--box-shadow-1);
}

.content-block-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid var(--color-gray-100);
	padding: var(--size-3);
}

.content-block-header > * {
	margin: var(--size-3);
}

.content-block-header .btn-back {
	font-size: 24px;
	margin-right: var(--size-3);
}

.content-block-header .title {
	font-size: 18px;
}

.content-block-body .label {
	font-size: 16px;
}

.content-block-footer {
	font-size: 14px;
	border-top: 1px solid var(--color-gray-100);
	padding: var(--size-3);
}

.content-block-footer > * {
	margin: var(--size-3);
}

/* -------------------- */
/* -------------------- */

.list-block {
	width: 100%;
	margin: 0 auto;
}

.list-block-header {
	background: var(--color-white);
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
}

.list-block-header .title {
	font-size: 18px;
}

.list-block-header .title .icon {
	font-size: 20px;
}

.content-list-body {
	width: 100%;
}

.list-block-items {
	width: 100%;
}

.list-block-items .item {
	position: relative;
	display: block;
	background: var(--color-white);
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
	margin-top: var(--size-4);
}

.list-block-items .item.disabled {
	background: var(--color-gray-200);
	border-left: 4px solid var(--color-warning);
}

.list-block-items .item-header {
	border-bottom: 1px solid var(--color-gray-100);
}

.list-block-items .item-header .title {
	font-size: 18px;
}

.list-block-items .item-header .title .icon {
	font-size: 20px;
}

.list-block-items .item-body {
	width: 100%;
}

.list-block-items .item-body .label {
	font-size: 16px;
}

/* -------------------- */
/* -------------------- */

.list-block.expandable .item .item-body {
	display: none;
}

.list-block.expandable .item.open .item-body {
	display: block;
}

/* -------------------- */
/* -------------------- */

.page {
	flex: 1;
	position: relative;
	width: 100%;
	background: var(--color-white);
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
}

.page-header {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	border-bottom: 1px solid var(--color-gray-100);
	padding: var(--size-4);
}

.page-title {
	flex: 1;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: center;
	font-size: 18px;
	font-weight: var(--font-weight-medium);
	color: var(--color-default);
	text-align: left;
}

.page-body {
	padding: var(--size-4);
}

.page-body h3 {
	font-size: 16px;
	font-weight: var(--font-weight-bold);
	color: var(--color-default);
	text-align: left;
	margin-top: var(--size-4);
}

.page-body h3:first-child {
	margin-top: 0;
}

.page-body p {
	margin-top: var(--size-4);
}

.page-body p:first-child {
	margin-top: 0;
}

.page-body ul {
	margin-top: var(--size-4);
}

.page-body ul:first-child {
	margin-top: 0;
}

.page-body ul li {
	list-style: disc;
	margin-top: var(--size-3);
	margin-left: var(--size-5);
}

/* -------------------- */
/* -------------------- */

.progress-bar {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 12px;
	border-radius: 2px;
}

.progress-bar .bar {
	width: 0;
	height: 12px;
	background: var(--color-primary);
	border-radius: 2px;
}

.progress-bar .icon {
	font-size: 20px;
	margin-left: var(--size-3);
}

/* -------------------- */
/* -------------------- */

.site {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"header"
		"main"
		"footer";
	row-gap: var(--size-4);
	width: 100%;
	max-width: var(--l);
	min-height: 100%;
	padding: var(--size-4);
	margin: 0 auto;
}

/* -------------------- */

.site-header {
	grid-area: header;
	width: 100%;
	background: var(--color-white);
	box-shadow: var(--box-shadow-1);
	border-radius: var(--border-radius-2);
}

/* -------------------- */

.site-main {
	grid-area: main;
	width: 100%;
	-webkit-overflow-scrolling: touch;
}

/* -------------------- */

.site-footer {
	grid-area: footer;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

/* -------------------- */

.site-overlay {
	display: none;
	position: fixed;
	z-index: 100;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
}

.site-overlay.open {
	display: block;
}

@media only screen and (min-width: 960px) {
	.site-overlay.open {
		display: none !important;
	}
}

/* -------------------- */

.site-logo a {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	font-size: 20px;
	color: var(--color-default);
	text-decoration: none;
}

.site-logo a img {
	width: 50px;
	border-radius: var(--size-2);
	box-shadow: var(--box-shadow-1);
}

.site-logo a h1 {
	font-size: 24px;
	font-weight: var(--font-weight-normal);
	margin-left: var(--size-4);
}

/* -------------------- */

.site-title {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	align-items: center;
	font-size: 24px;
	font-weight: var(--font-weight-light);
}

/* -------------------- */
/* -------------------- */

.main-header {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-gray-100);
}

/* -------------------- */

.main-message {
	width: 100%;
}

/* -------------------- */

.main-body {
	width: 100%;
}

/* -------------------- */

.main-footer {
	width: 100%;
}

/* -------------------- */

.site-footer-copyright {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	font-size: 14px;
	color: var(--color-gray-600);
	padding: var(--size-4);
}

.site-footer-copyright a {
	font-size: 14px;
	font-weight: var(--font-weight-light);
	color: var(--color-gray-600);
	transition: var(--transition-link);
}