@charset "UTF-8";
/* ======================================================================== */
/*	DexUI - Design System Theme - Version 1.0.0								*/
/* ========================================================================	*/
/*																			*/
/*	$0 - Fonts / Iconography												*/
/*	$1 - Root - Variables													*/
/*	$2 - Root - Family Tokens - General										*/
/*	$3 - Resets																*/
/*	$4 - Base																*/
/*		$4.1 - Container Grid												*/
/*		$4.2 - Icon Font													*/
/*		$4.3 - Border Radius												*/
/*		$4.4 - Border Size													*/
/*		$4.5 - Elevation / Opacity / Shadows								*/
/*		$4.6 - HTML Default Component1s										*/
/*	$5 - Pages Layouts														*/
/*	$6 - Usefull Classes													*/
/*	$7 - Grid																*/
/*	$8 - Dark Mode / Dark Version											*/
/*																			*/
/* ======================================================================== */

/*  $0 - Fonts / Iconography ============================================== */
@font-face {
  font-family: 'Lato';
  src: url('dexui/fonts/lato-light.woff') format('woff2');
  font-weight: 300;
}

@font-face {
  font-family: 'Lato';
  src: url('dexui/fonts/lato-regular.woff') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Lato';
  src: url('dexui/fonts/lato-semibold.woff') format('woff2');
  font-weight: 600;
}

@font-face {
  font-family: 'Lato';
  src: url('dexui/fonts/lato-bold.woff') format('woff2');
  font-weight: 700;
}

@font-face {
  font-family: 'Lato';
  src: url('dexui/fonts/lato-black.woff') format('woff2');
  font-weight: 900;
}

@font-face {
  font-family: 'DexIcons';
  src: url('fonts/dexicons.woff') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {
	--dexicon-font: 'DexIcons';
	
	--dexicon-close: "\e900";
	--dexicon-arrow-down: "\e901";
	--dexicon-arrow-up: "\e902";
	--dexicon-arrow-left: "\e903";
	--dexicon-arrow-right: "\e904";
	--dexicon-error: "\e905";
	--dexicon-success: "\e906";
	--dexicon-warning: "\e907";
	--dexicon-info: "\e908";
	--dexicon-check: "\e909";
	--dexicon-arrow-right-full: "\e90a";
}

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

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

.dexicon-close::after {content: var(--dexicon-close);}
.dexicon-arrow-down::after {content: var(--dexicon-arrow-down);}
.dexicon-arrow-up::after {content: var(--dexicon-arrow-up);}
.dexicon-arrow-left::after {content: var(--dexicon-arrow-left);}
.dexicon-arrow-right::after {content: var(--dexicon-arrow-right);}
.dexicon-error::after {content: var(--dexicon-error);}
.dexicon-success::after {content: var(--dexicon-success);}
.dexicon-warning::after {content: var(--dexicon-warning);}
.dexicon-info::after {content: var(--dexicon-info);}
.dexicon-check::after {content: var(--dexicon-check);}
.dexicon-arrow-right-full::after {content: var(--dexicon-arrow-right-full);}


/*  $1 - Root - Variables ================================================= */
/*  $1.1 - Root - Color Variables ================================================= */
:root {
	/*--mobile-breakpoint: 575.98px;*/
	
	--outline: #005ACC solid 2px;
	
	/* Color - Brand - Primary / Secondary */
	--color-brand-primary: #3758f9;
	--color-brand-secondary: #24ECD5;
	
	/* Color - Primary / Secondary */
	--color-primary: #3758f9;
	--color-primary-hover: #2A52D0;
	--color-secondary: #24ECD5;
	--color-secondary-hover: #22d1bd;
	
	/* Color - Black and White */
	--color-black: #0F0E0B;
	--color-white: #FFF;
	
	/* Color - Neutral */
	--color-neutral-0: #f6f8f8;
	--color-neutral-1: #ebeeef;
	--color-neutral-2: #dcdfe0;
	--color-neutral-3: #c9cdcf;
	--color-neutral-4: #b5b8ba;
	--color-neutral-5: #9c9fa0;
	--color-neutral-6: #828587;
	--color-neutral-7: #6e7172;
	--color-neutral-8: #575a5b;
	--color-neutral-9: #323334;
	--color-neutral-10: #191a1a;
	
	/* Color - Blue */
	--color-blue-light-x: #E5F4FE;
	--color-blue-light: #4CB7F5;
	--color-blue: #2196F3;
	--color-blue-dark: #0081CD;
	
	/* Color - Green */
	--color-green-light-x: #E5F9EE;
	--color-green-light: #4CD68A;
	--color-green: #22C74E;
	--color-green-dark: #00A74C;
	
	/* Color - Orange */
	--color-orange-light-x: #FFF6EC;
	--color-orange-light: #FFC47E;
	--color-orange: #FAAC43;
	--color-orange-dark: #D9913C;
	
	/* Color - Red */
	--color-red-light-x: #FFEEED;
	--color-red-light: #FF8784;
	--color-red: #FA5055;
	--color-red-dark: #D94744;
	
	/* Color - Semantic */
	--color-info-light-x: var(--color-blue-light-x);
	--color-info-light: var(--color-blue-light);
	--color-info: var(--color-blue);
	--color-info-dark: var(--color-blue-dark);
	
	--color-success-light-x: var(--color-green-light-x);
	--color-success-light: var(--color-green-light);
	--color-success: var(--color-green);
	--color-success-dark: var(--color-green-dark);
	
	--color-warning-light-x: var(--color-orange-light-x);
	--color-warning-light: var(--color-orange-light);
	--color-warning: var(--color-orange);
	--color-warning-dark: var(--color-orange-dark);
	
	--color-error-light-x: var(--color-red-light-x);
	--color-error-light: var(--color-red-light);
	--color-error: var(--color-red);
	--color-error-dark: var(--color-red-dark);
	
	--color-active: #509AFF;
	
	--color-body-background: var(--color-white);
	--color-body-text: var(--color-neutral-10);
}

/*  $1.2 - Root - Variables ================================================= */
:root {
	/* Typography - Family */
	--font-family-lato: 'Lato', Arial, Helvetica, sans-serif;

	/* Fonts */
	--font-family-primary: var(--font-family-lato);
	
	/* Container Padding */
	--container-padding: 15px;
	
	/* Heading */
	--ft-heading-color: var(--color-black);

	/* Typography - Size */
	--font-size-h1: 2.25rem;	/*36px*/
	--font-size-h2: 2rem;		/*32px*/
	--font-size-h3: 1.75rem;	/*28px*/
	--font-size-h4: 1.625rem;	/*26px*/
	--font-size-h5: 1.5rem;		/*24px*/
	--font-size-h6: 1.375rem;	/*22px*/

	--font-size-xxl: 1.375rem;	/*22px*/
	--font-size-xl: 1.25rem;	/*20px*/
	--font-size-l: 1.125rem;	/*18px*/
	--font-size-m: 1rem;		/*16px - BASE*/
	--font-size-s: 0.875rem;	/*14px*/
	--font-size-xs: 0.75rem;	/*12px*/
	--font-size-xxs: 0.625rem;	/*10px*/

	/* Typography - Weight */
	--font-light: 300;
	--font-regular: 400;
	--font-medium: 500;
	--font-semi-bold: 600;
	--font-bold: 700;
	
	/* Space - Sizes */
	--space-none: 0;
	--space-xxs: 0.125rem; /*2px*/
	--space-xs: 0.25rem; /*4px*/
	--space-s: 0.5rem; /*8px*/
	--space-m: 1rem; /*16px*/
	--space-l: 1.5rem; /*24px*/
	--space-xl: 2rem; /*32px*/
	--space-xxl: 2.5rem; /*40px*/
	--space-xxxl: 3rem; /*48px*/
	
	/* Border Size */
	--border-size-none: 0;
	--border-size-s: 1px;
	--border-size-m: 2px;
	--border-size-l: 3px;
	
	/* Border Radius */
	--border-radius-none: 0;
	--border-radius-s: 4px;
	--border-radius-m: 8px;
	--border-radius-l: 16px;
	--border-radius-circle: 100px;
	
	/* Elevation / Shadow */
	--shadow-none: none;
	--shadow-s: 0 3px 9px 0 rgba(0,0,0,0.1);
	--shadow-m: 0 5px 11px 0 rgba(0,0,0,0.1);
	--shadow-l: 0 7px 16px 0 rgba(0,0,0,0.1);
	
	/* Opacity */
	--opacity-s: 0.7;
	--opacity-m: 0.5;
	--opacity-l: 0.3;

	/* Transition */
	--transition-time: 300ms;
	--transition: all var(--transition-time) ease-in-out;
	--transition-fast: all 100ms ease-in-out;
	--transition-slow: all 500ms ease-in-out;
	--transition-fade: opacity var(--transition-time) ease-in-out;
	
	/* Error */
	--border-error: var(--color-error);
	--background-error: var(--color-error-light);
}


/*  $2 - Root - Family Tokens ================================================= */
:root {
	--ft-body-font-size: 16px;
	--ft-body-font-weight: var(--font-regular);
	--ft-color-disabled: var(--color-neutral-4);
	--ft-transition-base: all 200ms ease;
	
	/* Family Links */
	--ft-link-color: var(--color-blue);
	--ft-link-color-hover: var(--color-blue);
	--ft-link-decoration: none;
	--ft-link-decoration-hover: underline;
	--ft-link-color-disabled: var(--ft-color-disabled);
	
	/* Family Inputs ??? */
	--ft-input-background: var(--color-white);
	--ft-input-padding: var(--space-m);
	--ft-input-border-radius: var(--border-radius-s);
	--ft-input-border: var(--border-size-s) solid var(--color-neutral-2);
	--ft-input-border-hover: var(--border-size-s) solid var(--color-neutral-6);
	--ft-input-border-disabled: var(--border-size-s) solid var(--color-neutral-2);
	--ft-input-border-error: var(--border-size-s) solid var(--color-error);
	--ft-input-background-disabled: var(--color-neutral-1);
	--ft-input-color: var(--color-neutral-8);
	--ft-input-color-disabled: var(--color-neutral-4);
	--ft-input-height: 40px;
	--ft-input-height-s: calc(var(--ft-input-height ) - 0.5rem);
	--ft-input-height-l: calc(var(--ft-input-height ) + 0.5rem);
	--ft-input-font-size: 1rem;
	--ft-input-font-s: var(--font-size-s);
	--ft-input-font-l: var(--font-size-l);
	--ft-input-font-weight: var(--font-medium);
	--ft-input-icon: var(--color-neutral-3);
	--ft-input-icon-hover: var(--color-neutral-6);
	--ft-input-placeholder-color: var(--color-neutral-4);
	
	/* Family Action ???*/
	--ft-action-background-active: var(--color-blue-dark);
    --ft-action-background-active-hover: var(--color-blue);
	--ft-action-border: var(--border-size-s) solid var(--color-neutral-10);
	--ft-action-border-active: var(--border-size-s) solid var(--color-blue-dark);
    --ft-action-border-active-hover: var(--border-size-s) solid var(--color-blue);
	--ft-action-border-disabled: var(--border-size-s) solid var(--color-neutral-2);
	--ft-action-border-hover: var(--border-size-s) solid var(--color-blue);

	
	/* Family Components ???*/
	/* Family Overlay ???*/
	/* Family Span ???*/
	
	/* Family Buttons ???*/
	--ft-button-font-size: var(--font-size-m);
	
	--ft-button-font-size-s: var(--font-size-s);
	--ft-button-padding-s: var(--space-s);
	--ft-button-height-s: 25px;
	
	--ft-button-font-size-l: var(--font-size-l);
	--ft-button-padding-l: var(--space-l);
	--ft-button-height-l: 42px;
	
	/* Family Icons ???*/
}


/*  $3 - Resets =========================================================== */
* {
  -webkit-box-sizing: border-box;
		  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
	color: var(--color-body-text);
	font-family: var(--font-family-primary),-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	scroll-behavior: smooth;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

body {
	background-color: var(--color-body-background);
	color: var(--color-body-text);
	direction: ltr;
	font-family: var(--font-family-primary);
	font-weight: var(--ft-body-font-weight);
	font-size: var(--ft-body-font-size);
	line-height: 1.5;
	margin: 0;
	padding: 0;
	width: 100%;
}

:focus {outline:0;}
::-moz-focus-inner {border:0;}

.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

p {
	margin: 0;
}

input,
textarea,
select,
button {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 100%;
	font-weight: var(--ft-input-font-weight);
	line-height: 1.25;
	margin: 0;
}

video {max-width: 100%;}

input { text-overflow: ellipsis; }

input[type=date], 
input[type=datetime], 
input[type=datetime-local], 
input[type=time], 
input[type=time]:empty {
	display: inline-flex; /* Prevent wrong alignment in mobile */
}

[type=checkbox],
[type=radio] {
	border: 0;
	padding: 0;
}

img { border-style: none;}
figure {margin: 0;}

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

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

[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

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

select::-ms-expand {display: none;}
input::-ms-clear {display: none;}

select:disabled { opacity: 1; } /* Chrome Fix */

/* Pre and Code tag fix to break the text */
pre code,
code {
	white-space: pre-wrap;
}

/*  $4 - Base Classes ===================================================== */
.h1-l	{font-size: var(--font-size-h1-l);}
.h2-l	{font-size: var(--font-size-h2-l);}
.h1, h1 {font-size: var(--font-size-h1);}
.h2, h2 {font-size: var(--font-size-h2);}
.h3, h3 {font-size: var(--font-size-h3);}
.h4, h4 {font-size: var(--font-size-h4);}
.h5, h5 {font-size: var(--font-size-h5);}
.h6, h6 {font-size: var(--font-size-h6);}

a:not(.no-effect):not(.btn),
a:not(.no-effect):not(.btn):visited {
	color: var(--ft-link-color);
	text-decoration: var(--ft-btn-link-decoration);
	transition: var(--transition-fast);
}

a:not(.no-effect):not(.btn):hover {
	color: var(--ft-link-color-hover);
	text-decoration: var(--ft-btn-link-decoration-hover);
}

.hover-effect-fade {
	transition: var(--transition);
}

.hover-effect-fade--slow {
	transition: var(--transition-slow);
}

.hover-effect-fade:hover {
	opacity: 0.7;
}

.no-effect {
	text-decoration: none;
}

.hidden,
[hidden] {display: none;}
.show,
[show] {display: block;}

/*  $4.1 - Container Grid ============================================= */
:root {
	--grid-container-max-width-desktop: 1170px;
	--grid-container-max-width-desktop-xl: 1340px;
}

.grid-container {
	margin: 0 auto;
	max-width: 1170px;
	padding-left: 15px;
	padding-right: 15px;
	width: 100%;
}

.grid-container.grid-l {
	max-width: 1340px;
}

.grid-container.grid-xl {
	max-width: 1340px;
}

.grid-container.grid-full {
	max-width: 100%;
}

.required-filed:after {
	color: red;
	content: "*"
}

/* Desktop Large - 1200px and up) */
@media (min-width: 1200px) {
	.grid-container {
		max-width: var(--grid-container-max-width-desktop);
	}
}

/* Desktop XLarge - 1400px and up) */
@media (min-width: 1400px) {
	.grid-container {
		max-width: var(--grid-container-max-width-desktop-xl);
	}
}

/*  $4.5 - HTML Default Component1s ================================================== */
/* Inputs */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea {
	background-color: var(--ft-input-background);
	border: var(--ft-input-border);
	border-radius: var(--ft-input-border-radius);
	color: var(--ft-input-color);
	height: var(--ft-input-height);
	font-size: var(--ft-input-font-size);
	font-weight: var(--ft-input-font-weight);
	transition: var(--ft-transition-base);
	padding: var(--space-none) var(--ft-input-padding);
	outline: none;
}

input[type="text"]:hover,
input[type="text"]:focus,
input[type="email"]:hover,
input[type="email"]:focus,
input[type="number"]:hover,
input[type="number"]:focus,
input[type="tel"]:hover,
input[type="tel"]:focus,
textarea:hover,
textarea:focus {
	border: var(--ft-input-border-hover);
	border-radius: var(--ft-input-border-radius);
}

textarea {
	height: auto;
	line-height: 1.5;
	padding: var(--ft-input-padding);
	resize: auto;
}

.input-s {
	font-size: var(--ft-input-font-s);
	height: var(--ft-input-height-s);
}

.input-l {
	font-size: var(--ft-input-font-l);
	height: var(--ft-input-height-l);
}

.textarea-s {font-size: var(--ft-input-font-s);}
.textarea-l {font-size: var(--ft-input-font-l);}

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

::placeholder { 
	color: var(--ft-input-placeholder-color); 
	opacity: 1;
}

::-ms-input-placeholder { 
	color: var(--ft-input-placeholder-color); 
	opacity: 1;
}

::-webkit-input-placeholder { 
	color: var(--ft-input-placeholder-color); 
	opacity: 1;
}

::-moz-placeholder {
	color: var(--ft-input-placeholder-color);
	opacity: 1; 
}

/* Checkbox */
:root {
	--ct-checkbox-border-radius: 0;
}

[type="checkbox"] {
	height: 20px;
	position: relative;
	width: 20px;
}

[type="checkbox"]:after {
	content: "";
}

[type="checkbox"]:before {
	background-color: var(--color-white);
	border: var(--ft-action-border);
	border-radius: var(--ct-checkbox-border-radius);
	content: "";
	display: block;
	height: 16px;
	opacity: 1;
	transition: var(--ft-transition-base);
	width: 16px;
}

[type="checkbox"]:checked:after {
	align-items: center;
	border: none;
	color: var(--color-white);
	content: var(--dexicon-check);
	display: flex;
	font-family: var(--dexicon-font);
	height: 100%;
	justify-content: center;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-57%, -52%);
	width: 100%;
}

[type="checkbox"]:checked:before, 
[type="checkbox"].not-valid:checked:before {
	background-color: var(--ft-action-background-active);
	border: var(--ft-action-border-active);
}

[type="checkbox"].not-valid:before,
[type="checkbox"].not-valid:hover:before {
	border-color: var(--color-error);
}

[type="checkbox"]:hover:before {
	border: var(--ft-action-border-hover);
}

[type="checkbox"]:hover:checked:before, 
[type="checkbox"].not-valid:hover:checked:before {
	background-color: var(--ft-action-background-active-hover);
	border: var(--ft-action-border-active-hover);
}

[type="checkbox"][disabled]{
	pointer-events: none;
}

[type="checkbox"][disabled]:before,
[type="checkbox"][disabled]:checked:before {
	background-color: var(--ft-action-background-disabled);
	border: var(--ft-action-border-disabled);
}

[type="checkbox"].size-s {
	height: 16px;
	width: 16px;
}

[type="checkbox"].size-s:before {
	height: 12px;
	width: 12px;
}

[type="checkbox"].size-s:checked:after {
	font-size: var(--font-size-xs);  
}


/* Radio Button */
[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    height: 20px;
    position: relative;
    transition: var(--ft-transition-base);
    width: 20px;
}

[type="radio"]:before {
    background-color: var(--color-white);
    border: var(--ft-action-border);
    border-radius: var(--border-radius-circle);
    box-sizing: border-box;
    content: "";
    display: flex;
    height: 100%;
    transition: var(--ft-transition-base);
    width: 100%;
}

[data-radio-group] [type="radio"] + label {
    color: var(--color-neutral-6);
    font-size: var(--font-size-m);
    line-height: 1;
    margin-bottom: var(--space-none);
    margin-left: var(--space-s);
}

[data-radio-group] [type="radio"] + label:hover {
    cursor: pointer;
}

[type="radio"]:checked:before,
[data-radio-group].not-valid [type="radio"]:checked:before {
    background-color: var(--ft-action-background-active);
    border: var(--ft-action-border-active);
    box-shadow: inset var(--border-size-none) var(--border-size-none) var(--border-size-none) var(--border-size-l) var(--color-white);
    -webkit-filter: none;
    filter: none;
    transform: rotate(45deg); /* fix firefox bug */
}

[data-radio-button]:not(.OSFillParent):not([class*=ThemeGrid_Width]) {
    -servicestudio-display: flex;
}


/* Buttons */
:root {
	/* Buttons */
	--ft-btn-font-weight: 400;
	--ft-btn-height: 32px;
	--ft-button-padding: 0.75rem;
	--ft-btn-border-radius: var(--border-radius-s);
	
	/* Buttons - Primary */
	--ft-btn-primary-background: var(--color-primary);
	--ft-btn-primary-background-hover: var(--color-primary-hover);
	--ft-btn-primary-border-radius: var(--ft-btn-border-radius);
	--ft-btn-primary-border-style: solid;
	--ft-btn-primary-border-width: 0;
	--ft-btn-primary-color: var(--color-white);
	
	/* Buttons - Secondary */
	--ft-btn-secondary-background: var(--color-secondary);
	--ft-btn-secondary-background-hover: var(--color-secondary-hover);
	--ft-btn-secondary-border-radius: var(--ft-btn-border-radius);
	--ft-btn-secondary-border-style: solid;
	--ft-btn-secondary-border-width: 0;
	--ft-btn-secondary-color: var(--color-white);
	
	/* Buttons - Success */
	--ft-btn-success-background: var(--color-success);
	--ft-btn-success-background-hover: var(--color-success-dark);
	--ft-btn-success-border-radius: var(--ft-btn-border-radius);
	--ft-btn-success-border-style: solid;
	--ft-btn-success-border-width: 0;
	--ft-btn-success-color: var(--color-white);
	
	/* Buttons - Info */
	--ft-btn-info-background: var(--color-info);
	--ft-btn-info-background-hover: var(--color-info-dark);
	--ft-btn-info-border-radius: var(--ft-btn-border-radius);
	--ft-btn-info-border-style: solid;
	--ft-btn-info-border-width: 0;
	--ft-btn-info-color: var(--color-white);
	
	/* Buttons - Warning */
	--ft-btn-warning-background: var(--color-warning);
	--ft-btn-warning-background-hover: var(--color-warning-dark);
	--ft-btn-warning-border-radius: var(--ft-btn-border-radius);
	--ft-btn-warning-border-style: solid;
	--ft-btn-warning-border-width: 0;
	--ft-btn-warning-color: var(--color-white);
	
	/* Buttons - Error */
	--ft-btn-error-background: var(--color-error);
	--ft-btn-error-background-hover: var(--color-error-dark);
	--ft-btn-error-border-radius: var(--ft-btn-border-radius);
	--ft-btn-error-border-style: solid;
	--ft-btn-error-border-width: 0;
	--ft-btn-error-color: var(--color-white);
	
	/* Buttons - Light */
	--ft-btn-light-background: var(--color-white);
	--ft-btn-light-background-hover: var(--color-neutral-0);
	--ft-btn-light-border-radius: var(--ft-btn-border-radius);
	--ft-btn-light-border-style: solid;
	--ft-btn-light-border-width: 0;
	--ft-btn-light-color: var(--color-black);
	--ft-btn-light-color-hover: var(--color-black);
	
	/* Buttons - Dark */
	--ft-btn-dark-background: var(--color-neutral-9);
	--ft-btn-dark-background-hover: var(--color-black);
	--ft-btn-dark-border-radius: var(--ft-btn-border-radius);
	--ft-btn-dark-border-style: solid;
	--ft-btn-dark-border-width: 0;
	--ft-btn-dark-color: var(--color-white);
	
	/* Buttons - Link */
	--ft-btn-link-color: var(--ft-link-color);
	--ft-btn-link-color-hover: var(--ft-link-color-hover);
	--ft-btn-link-decoration: none;
	--ft-btn-link-decoration-hover: underline;
}

a.btn,
.btn,
.btn:visited {
	align-items: center;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-family-primary);
	font-size: var(--ft-button-font-size);
	font-weight: var(--ft-btn-font-weight);
	height: var(--ft-btn-height);
	padding: 0 var(--ft-button-padding);
	position: relative;
	text-decoration: none;
	transition: var(--ft-transition-base);
	user-select: none;
}

a.btn:hover,
.btn:hover {
	text-decoration: none;
}

a.btn:focus,
.btn:focus-visible {
	outline: none;
	text-decoration: none;
}

.btn.disabled,
.btn[disabled],
.btn.disabled:hover {
	background: var(--color-neutral-0);
	border-color: var(--color-neutral-2);
	color: var(--color-neutral-2);
	cursor: default;
}

/* Button Small */
.btn.btn-s,
.btn.btn-s:visited {
	font-size: var(--ft-button-font-size-s);
	height: var(--ft-button-height-s);
	line-height: 20px;
	padding: 0 var(--ft-button-padding-s);
}

/* Button Large */
.btn.btn-l,
.btn.btn-l:visited {
	font-size: var(--ft-button-font-size-l);
	height: var(--ft-button-height-l);
	padding: 0 var(--ft-button-padding-l);
}

/* Button Primary */
.btn-primary,
.btn-primary:visited,
a.btn-primary,
a.btn-primary:visited {
	background: var(--ft-btn-primary-background);
	border-radius: var(--ft-btn-primary-border-radius);
	border-style: var(--ft-btn-primary-border-style);
    border-width: var(--ft-btn-primary-border-width);
	color: var(--ft-btn-primary-color);
}

a.btn-primary:hover,
.btn-primary:hover {
	background: var(--ft-btn-primary-background-hover);
}

/* Button Secondary */
.btn-secondary,
.btn-secondary:visited,
a.btn-secondary,
a.btn-secondary:visited {
	background: var(--ft-btn-secondary-background);
	border-radius: var(--ft-btn-secondary-border-radius);
	border-style: var(--ft-btn-secondary-border-style);
    border-width: var(--ft-btn-secondary-border-width);
	color: var(--ft-btn-secondary-color);
}

a.btn-secondary:hover,
.btn-secondary:hover {
	background: var(--ft-btn-secondary-background-hover);
}

/* Button Success */
.btn-success,
.btn-success:visited,
a.btn-success,
a.btn-success:visited {
	background: var(--ft-btn-success-background);
	border-radius: var(--ft-btn-success-border-radius);
	border-style: var(--ft-btn-success-border-style);
    border-width: var(--ft-btn-success-border-width);
	color: var(--ft-btn-success-color);
}

a.btn-success:hover,
.btn-success:hover {
	background: var(--ft-btn-success-background-hover);
}

/* Button Info */
.btn-info,
.btn-info:visited,
a.btn-info,
a.btn-info:visited {
	background: var(--ft-btn-info-background);
	border-radius: var(--ft-btn-info-border-radius);
	border-style: var(--ft-btn-info-border-style);
    border-width: var(--ft-btn-info-border-width);
	color: var(--ft-btn-info-color);
}

a.btn-info:hover,
.btn-info:hover {
	background: var(--ft-btn-info-background-hover);
}

/* Button Warning */
.btn-warning,
.btn-warning:visited,
a.btn-warning,
a.btn-warning:visited {
	background: var(--ft-btn-warning-background);
	border-radius: var(--ft-btn-warning-border-radius);
	border-style: var(--ft-btn-warning-border-style);
    border-width: var(--ft-btn-warning-border-width);
	color: var(--ft-btn-warning-color);
}

a.btn-warning:hover,
.btn-warning:hover {
	background: var(--ft-btn-warning-background-hover);
}

/* Button Error */
.btn-error,
.btn-error:visited,
a.btn-error,
a.btn-error:visited {
	background: var(--ft-btn-error-background);
	border-radius: var(--ft-btn-error-border-radius);
	border-style: var(--ft-btn-error-border-style);
    border-width: var(--ft-btn-error-border-width);
	color: var(--ft-btn-error-color);
}

a.btn-error:hover,
.btn-error:hover {
	background: var(--ft-btn-error-background-hover);
}

/* Button Light */
.btn-light,
.btn-light:visited,
a.btn-light,
a.btn-light:visited {
	background: var(--ft-btn-light-background);
	border-radius: var(--ft-btn-light-border-radius);
	border-style: var(--ft-btn-light-border-style);
    border-width: var(--ft-btn-light-border-width);
	color: var(--ft-btn-light-color);
}

a.btn-light:hover,
.btn-light:hover {
	background: var(--ft-btn-light-background-hover);
	color: var(--ft-btn-light-color-hover);
}

/* Button Dark */
.btn-dark,
.btn-dark:visited,
a.btn-dark,
a.btn-dark:visited {
	background: var(--ft-btn-dark-background);
	border-radius: var(--ft-btn-dark-border-radius);
	border-style: var(--ft-btn-dark-border-style);
    border-width: var(--ft-btn-dark-border-width);
	color: var(--ft-btn-dark-color);
}

a.btn-dark:hover,
.btn-dark:hover {
	background: var(--ft-btn-dark-background-hover);
}

/* Button Link */
.btn-link,
.btn-link:visited,
a.btn-link,
a.btn-link:visited {
	background: transparent;
	border-radius: 0;
	border: 0;
	color: var(--ft-btn-link-color);
	text-decoration: var(--ft-btn-link-decoration);
}

a.btn-link:hover,
.btn-link:hover {
	background: transparent;
	color: var(--ft-btn-link-color-hover);
	text-decoration: var(--ft-btn-link-decoration-hover);
}


/* Button Close */
.btn-close {
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color 200ms ease;
}

.btn-close:before {
	content: "\e900";
	font-family: 'DexIcons';
	font-size: var(--font-size-xxl);
	line-height: 1;
}

.btn-close:hover {
	color: var(--ft-link-color);
}


/*  $5 - Pages Layouts ================================================== */
/* Dex Layouts Vars ???*/
:root {
	--container-grid: 1140px;
	--container-grid-tablet: 960px;
	--mid-grid: 1320px;
	--full-grid: 100%;
	--max-full-grid: 2400px;
	--padding-grid: 15px;
}

.ThemeGrid_Midwidth {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	padding-left: var(--padding-grid);
	padding-right: var(--padding-grid);
	width: 100%;
}

@media (min-width: 992px) {
	.ThemeGrid_Midwidth {
		max-width: 100%;
	}
}

@media (min-width: 1200px) {
	.ThemeGrid_Midwidth {
		max-width: var(--mid-grid);
	}
}

.ThemeGrid_Fullwidth {
	max-width: 100%; /* maintain until we remove the isFullWidth option */
	padding: var(--space-none) 30px;
	width: 100%;
}


/*  $6 - Usefull Classes ================================================== */

.ul-clear {
	margin: 0;
	padding: 0;
}

.ul-clear li {
	list-style: none;
}

.horizontal-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vertical-content {
	align-items: center;
	display: flex;
}

.center-content {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*  $6.1 - Usefull Classes - General ================================================== */
.align-items-center	  {align-items: center;}

.cursor-pointer {cursor: pointer;}

.list-reset {margin: 0;padding: 0;}
.list-reset > li {list-style: none;}

.display-flex		   {display: flex;}
.display-inline-flex	{display: inline-flex;}
.display-inline		 {display: inline;}
.display-inline-block   {display: inline-block;}
.display-block		  {display: block;}
.display-none		   {display: none;}
.display-contents	   {display: contents;}

.display-flex-column {
	display: flex;
	flex-direction: column;
}

.display-flex-row {
	display: flex;
	flex-direction: row;
}

.order-initial {order: initial;}
.order-1 {order: 1;}
.order-2 {order: 2;}
.order-3 {order: 3;}
.order-4 {order: 4;}
.order-5 {order: 5;}
.order-6 {order: 6;}
.order-7 {order: 7;}
.order-8 {order: 8;}
.order-9 {order: 9;}
.order-10 {order: 10;}

.img-block > img,
.img-block {display: block;}

.border-radius-none {border-radius: var(--border-radius-none);}
.border-radius-s {border-radius: var(--border-radius-s);}
.border-radius-m {border-radius: var(--border-radius-m);}
.border-radius-l {border-radius: var(--border-radius-l);}

.border-size-none   {border-width: var(--border-size-none);}
.border-size-s	  {border: var(--border-size-s) solid currentColor;}
.border-size-m	  {border: var(--border-size-m) solid currentColor;}
.border-size-l	  {border: var(--border-size-l) solid currentColor;}

.ellipsis-multilines {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;  
	overflow: hidden;
}
.ellipsis-multilines.lines-1 {-webkit-line-clamp: 1;}
.ellipsis-multilines.lines-2 {-webkit-line-clamp: 2;}
.ellipsis-multilines.lines-3 {-webkit-line-clamp: 3;}
.ellipsis-multilines.lines-4 {-webkit-line-clamp: 4;}
.ellipsis-multilines.lines-5 {-webkit-line-clamp: 5;}

.flex-direction-column		  {flex-direction: column;}
.flex-direction-row			 {flex-direction: row;}

.row > .col.flex-1,
.flex-1 {flex: 1;}

.row > .col.flex-initial,
.flex-auto {flex: initial;}

.line-height-s {line-height: 0.75rem;}
.line-height-m {line-height: 1rem;}
.line-height-l {line-height: 1.5rem;}
.line-height-xl {line-height: 1.75rem;}

.phone .hide-on-phone,
.tablet .hide-on-tablet,
.desktop .hide-on-desktop {display: none;} /*???*/

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

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

.max-width-initial {max-width: initial;}

.opacity-s {opacity: var(--opacity-s);}
.opacity-m {opacity: var(--opacity-m);}
.opacity-l {opacity: var(--opacity-l);}

.overflow-hidden {overflow: hidden;}
.overflow-visible {overflow: visible;}

.screen-reader-only {
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

.shadow-none {box-shadow: var(--shadow-none);}
.shadow-s	{box-shadow: var(--shadow-s);}
.shadow-m	{box-shadow: var(--shadow-m);}
.shadow-l	{box-shadow: var(--shadow-l);}


/*  $6.2 - Usefull Classes - Headings ================================================== */
h1, .heading1,
h2, .heading2,
h3, .heading3,
h4, .heading4,
h5, .heading5,
h6, .heading6,
h7, .heading7,
h8, .heading8,
h9, .heading9 {
	color: var(--ft-heading-color);
	font-family: var(--font-family-primary);
	font-weight: var(--font-semi-bold);
	line-height: 1.25;
	margin: 0;
}

h1, .heading1 {font-size: var(--font-size-h1);}
h2, .heading2 {font-size: var(--font-size-h2);}
h3, .heading3 {font-size: var(--font-size-h3);}
h4, .heading4 {font-size: var(--font-size-h4);}
h5, .heading5 {font-size: var(--font-size-h5);}
h6, .heading6 {font-size: var(--font-size-h6);}
h7, .heading7 {font-size: var(--font-size-h7);}
h8, .heading8 {font-size: var(--font-size-h8);}
h9, .heading9 {font-size: var(--font-size-h9);}

a:not(.no-effect) h1,
a:not(.no-effect) h2,
a:not(.no-effect) h3,
a:not(.no-effect) h4,
a:not(.no-effect) h5,
a:not(.no-effect) h6,
a:not(.no-effect) .heading1,
a:not(.no-effect) .heading2,
a:not(.no-effect) .heading3,
a:not(.no-effect) .heading4,
a:not(.no-effect) .heading5,
a:not(.no-effect) .heading6 {
	color: inherit;
}

/*  $6.3 - Usefull Classes - Fonts ================================================== */
.input.font-size-xxl,
.font-size-xxl {font-size: var(--font-size-xxl);}
.input.font-size-xl,
.font-size-xl {font-size: var(--font-size-xl);}
.input.font-size-l,
.font-size-l {font-size: var(--font-size-l);}
.input.font-size-m,
.font-size-m {font-size: var(--font-size-m);}
.input.font-size-s,
.font-size-s {font-size: var(--font-size-s);}
.input.font-size-xs,
.font-size-xs {font-size: var(--font-size-xs);}
.input.font-size-xxs,
.font-size-xxs {font-size: var(--font-size-xxs);}

.font-light	 {font-weight: var(--font-light);}
.font-regular   {font-weight: var(--font-regular);}
.font-medium	{font-weight: var(--font-medium);}
.font-semi-bold {font-weight: var(--font-semi-bold);}
.font-bold	  {font-weight: var(--font-bold);}

a.text-decoration-none,
a.text-decoration-none:visited,
a.text-decoration-none:hover,
a.text-decoration-none:visited:hover,
.text-decoration-none,
.text-decoration-none:hover {
	text-decoration: none;
}

.letter-spacing-m {letter-spacing: 0;}
.letter-spacing-l {letter-spacing: 0.1rem;}
.letter-spacing-xl {letter-spacing: 0.2rem;}

.text-align-left	 {text-align: left;}
.text-align-center   {text-align: center;}
.text-align-right	{text-align: right;}
.text-capitalize	 {text-transform: capitalize;}
.text-lowercase	  {text-transform: lowercase;}
.text-nowrap		 {white-space: nowrap;}
.text-wrap-initial		 {white-space: initial;}
.text-strike		 {text-decoration: line-through;}

.text-underline {
	text-decoration: var(--ft-link-decoration);
	text-underline-offset: 0.1em;
	text-decoration-thickness: 0.15em;
	transition: var(--ft-transition-base);
}

.text-link.text-underline:hover {
	text-decoration: var(--ft-link-decoration-hover); /*???*/
}

.text-underline-none {text-decoration: none;}
.text-uppercase	  {text-transform: uppercase;}
.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*  $6.3 - Usefull Classes - Colors ================================================== */
.background-primary   {background-color: var(--color-primary);}
.background-secondary {background-color: var(--color-secondary);}

.color-link {
	color: var(--ft-link-color);
	text-decoration: var(--ft-btn-link-decoration);
	transition: var(--transition-fast);
}

.color-link:hover {
	color: var(--ft-link-color-hover);
	cursor: pointer;
	text-decoration: var(--ft-btn-link-decoration-hover);
}

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

a.color-brand-secondary,
a.color-brand-secondary:visited,
.color-brand-secondary {color: var(--color-brand-primary);}

.background-brand-primary {background-color: var(--color-brand-primary);}
.background-brand-secondary {background-color: var(--color-brand-secondary);}


a.color-primary,
a.color-primary:visited,
a.color-primary:not(.no-effect):not(.btn),
a.color-primary:not(.no-effect):not(.btn):visited,
.color-primary {color: var(--color-primary);}
a.color-secondary,
a.color-secondary:visited,
.color-secondary {color: var(--color-secondary);}

.background-black {background-color: var(--color-black);}
a.color-black,
a.color-black:visited,
.color-black { color: var(--color-black); }

.background-white {background-color: var(--color-white);}
a.color-white,
a.color-white:visited,
.badge.color-white,
.color-white {color: var(--color-white);}

.background-green {background-color: var(--color-green);}
.color-green {color: var(--color-green);}

.position-relative {position: relative;}

/*  $6.4 - Useful Classes - Colors - Neutral ================================================== */
div.background-transparent,
.background-transparent {background-color: var(--color-transparent);}
div.background-neutral-0,
.background-neutral-0   {background-color: var(--color-neutral-0);}
div.background-neutral-1,
.background-neutral-1   {background-color: var(--color-neutral-1);}
div.background-neutral-2,
.background-neutral-2   {background-color: var(--color-neutral-2);}
div.background-neutral-3,
.background-neutral-3   {background-color: var(--color-neutral-3);}
div.background-neutral-4,
.background-neutral-4   {background-color: var(--color-neutral-4);}
div.background-neutral-5,
.background-neutral-5   {background-color: var(--color-neutral-5);}
div.background-neutral-6,
.background-neutral-6   {background-color: var(--color-neutral-6);}
div.background-neutral-7,
.background-neutral-7   {background-color: var(--color-neutral-7);}
div.background-neutral-8,
.background-neutral-8   {background-color: var(--color-neutral-8);}
div.background-neutral-9,
.background-neutral-9   {background-color: var(--color-neutral-9);}
div.background-neutral-10,
.background-neutral-10  {background-color: var(--color-neutral-10);}

a.color-neutral-0:hover,
a.color-neutral-0:visited,
a.color-neutral-0,
.color-neutral-0 {color: var(--color-neutral-0);}
a.color-neutral-1:hover,
a.color-neutral-1:visited,
a.color-neutral-1,
.color-neutral-1 {color: var(--color-neutral-1);}
a.color-neutral-2:hover,
a.color-neutral-2:visited,
a.color-neutral-2,
.color-neutral-2 {color: var(--color-neutral-2);}
a.color-neutral-3:hover,
a.color-neutral-3:visited,
a.color-neutral-3,
.color-neutral-3 {color: var(--color-neutral-3);}
a.color-neutral-4:hover,
a.color-neutral-4:visited,
a.color-neutral-4,
.color-neutral-4 {color: var(--color-neutral-4);}
a.color-neutral-5:hover,
a.color-neutral-5:visited,
a.color-neutral-5,
.color-neutral-5 {color: var(--color-neutral-5);}
a.color-neutral-6:visited,
a.color-neutral-6,
a.color-neutral-6:hover,
.color-neutral-6 {color: var(--color-neutral-6);}
a.color-neutral-7:hover,
a.color-neutral-7:visited,
a.color-neutral-7,
.color-neutral-7 {color: var(--color-neutral-7);}
a.color-neutral-8:hover,
a.color-neutral-8:visited,
a.color-neutral-8,
.color-neutral-8 {color: var(--color-neutral-8);}
a.color-neutral-9:hover,
a.color-neutral-9:visited,
a.color-neutral-9,
.color-neutral-9 {color: var(--color-neutral-9);}
a.color-neutral-10:hover,
a.color-neutral-10:visited,
a.color-neutral-10,
.color-neutral-10 {color: var(--color-neutral-10);}

/*  $6.5 - Useful Classes - Colors - Semantic ================================================== */
.background-error-lighter {background-color: var(--color-error-lighter);}
.background-error-light {background-color: var(--color-error-light);}
.background-error {background-color: var(--color-error);}

.color-error-lighter { color: var(--color-error-lighter);}
.color-error-light { color: var(--color-error-light);}
.color-error { color: var(--color-error); }

.background-warning-lighter {background-color: var(--color-warning-lighter);}
.background-warning-light {background-color: var(--color-warning-light);}
.background-warning {background-color: var(--color-warning);}

.color-warning-lighter {color: var(--color-warning-lighter);}
.color-warning-light {color: var(--color-warning-light);}
.color-warning {color: var(--color-warning);}

.background-success-lighter {background-color: var(--color-success-lighter);}
.background-success-light {background-color: var(--color-success-light);}
.background-success {background-color: var(--color-success);}
.background-success-dark {background-color: var(--color-success-dark);}

.color-success-lighter {color: var(--color-success-lighter);}
.color-success-light {color: var(--color-success-light);}
.color-success {color: var(--color-success);}
.color-success-dark {color: var(--color-success-dark);}

.background-info-lighter {background-color: var(--color-info-lighter)};
.background-info-light {background-color: var(--color-info-light);}
.background-info {background-color: var(--color-info);}

.color-info-lighter {color: var(--color-info-lighter);}
.color-info-light {color: var(--color-info-light);}
.color-info {color: var(--color-info);}

/*  $6.5 - Useful Classes - Spacing ================================================== */
.full-height	{height: 100%;}
.full-width		{width: 100%;}

.max-width-50 {max-width: 50%;}
.max-width-75 {max-width: 75%;}

.margin-0-auto {margin: 0 auto;}

@media (max-width: 991.98px) {
	.max-width-100-mb {max-width: 100%;}
}

/* Useful Classes - Spacing - Gap */
.gap-none	{gap: var(--space-none);}
.gap-xxs	{gap: var(--space-xxs);}
.gap-xs		{gap: var(--space-xs);}
.gap-s		{gap: var(--space-s);}
.gap-m		{gap: var(--space-m);}
.gap-l		{gap: var(--space-l);}
.gap-xl		{gap: var(--space-xl);}
.gap-xxl	{gap: var(--space-xxl);}
.gap-xxxl	{gap: var(--space-xxxl);}

/* Useful Classes - Spacing - Margin */
.margin-none	{margin: var(--space-none);}
.margin-xxs		{margin: var(--space-xxs);}
.margin-xs		{margin: var(--space-xs);}
.margin-s		{margin: var(--space-s);}
.margin-m		{margin: var(--space-m);}
.margin-l		{margin: var(--space-l);}
.margin-xl		{margin: var(--space-xl);}
.margin-xxl		{margin: var(--space-xxl);}
.margin-xxxl	{margin: var(--space-xxxl);}

/* Useful Classes - Spacing - Margin Bottom */
.margin-bottom-none	{margin-bottom: var(--space-none);}
.margin-bottom-xxs	{margin-bottom: var(--space-xxs);}
.margin-bottom-xs	{margin-bottom: var(--space-xs);}
.margin-bottom-s	{margin-bottom: var(--space-s);}
.margin-bottom-m	{margin-bottom: var(--space-m);}
.margin-bottom-l	{margin-bottom: var(--space-l);}
.margin-bottom-xl	{margin-bottom: var(--space-xl);}
.margin-bottom-xxl	{margin-bottom: var(--space-xxl);}
.margin-bottom-xxxl	{margin-bottom: var(--space-xxxl);}

/* Useful Classes - Spacing - Margin Left */
.margin-left-none	{margin-left: var(--space-none);}
.margin-left-xxs	{margin-left: var(--space-xxs);}
.margin-left-xs		{margin-left: var(--space-xs);}
.margin-left-s		{margin-left: var(--space-s);}
.margin-left-m		{margin-left: var(--space-m);}
.margin-left-l		{margin-left: var(--space-l);}
.margin-left-xl		{margin-left: var(--space-xl);}
.margin-left-xxl	{margin-left: var(--space-xxl);}
.margin-left-xxxl	{margin-left: var(--space-xxxl);}

/* Useful Classes - Spacing - Margin Right */
.margin-right-none	{margin-right: var(--space-none);}
.margin-right-xxs	{margin-right: var(--space-xxs);}
.margin-right-xs	{margin-right: var(--space-xs);}
.margin-right-s		{margin-right: var(--space-s);}
.margin-right-m		{margin-right: var(--space-m);}
.margin-right-l		{margin-right: var(--space-l);}
.margin-right-xl	{margin-right: var(--space-xl);}
.margin-right-xxl	{margin-right: var(--space-xxl);}
.margin-right-xxxl	{margin-right: var(--space-xxxl);}

/* Useful Classes - Spacing - Margin Top */
.margin-top-none	{margin-top: var(--space-none);}
.margin-top-xxs		{margin-top: var(--space-xxs);}
.margin-top-xs		{margin-top: var(--space-xs);}
.margin-top-s		{margin-top: var(--space-s);}
.margin-top-m		{margin-top: var(--space-m);}
.margin-top-l		{margin-top: var(--space-l);}
.margin-top-xl		{margin-top: var(--space-xl);}
.margin-top-xxl		{margin-top: var(--space-xxl);}
.margin-top-xxxl	{margin-top: var(--space-xxxl);}

/* Useful Classes - Spacing - Margin Vertical */
.margin-y-none {
	margin-top: var(--space-none);
	margin-bottom: var(--space-none);
}
.margin-y-xxs {
	margin-top: var(--space-xxs);
	margin-bottom: var(--space-xxs);
}
.margin-y-xs {
	margin-top: var(--space-xs);
	margin-bottom: var(--space-xs);
}
.margin-y-s {
	margin-top: var(--space-s);
	margin-bottom: var(--space-s);
}
.margin-y-m {
	margin-top: var(--space-m);
	margin-bottom: var(--space-m);
}
.margin-y-l {
	margin-top: var(--space-l);
	margin-bottom: var(--space-l);
}
.margin-y-xl {
	margin-top: var(--space-xl);
	margin-bottom: var(--space-xl);
}
.margin-y-xxl {
	margin-top: var(--space-xxl);
	margin-bottom: var(--space-xxl);
}
.margin-y-xxxl {
	margin-top: var(--space-xxxl);
	margin-bottom: var(--space-xxxl);
}

/* Useful Classes - Spacing - Margin Horizontal */
.margin-x-none {
	margin-left: var(--space-none);
	margin-right: var(--space-none);
}
.margin-x-xxs {
	margin-left: var(--space-xxs);
	margin-right: var(--space-xxs);
}
.margin-x-xs {
	margin-left: var(--space-xs);
	margin-right: var(--space-xs);
}
.margin-x-s {
	margin-left: var(--space-s);
	margin-right: var(--space-s);
}
.margin-x-m {
	margin-left: var(--space-m);
	margin-right: var(--space-m);
}
.margin-x-l {
	margin-left: var(--space-l);
	margin-right: var(--space-l);
}
.margin-x-xl {
	margin-left: var(--space-xl);
	margin-right: var(--space-xl);
}
.margin-x-xxl {
	margin-left: var(--space-xxl);
	margin-right: var(--space-xxl);
}
.margin-x-xxxl {
	margin-left: var(--space-xxxl);
	margin-right: var(--space-xxxl);
}

/* Useful Classes - Spacing - Padding */
.padding-none	{padding: var(--space-none);}
.padding-xxs	{padding: var(--space-xxs);}
.padding-xs		{padding: var(--space-xs);}
.padding-s		{padding: var(--space-s);}
.padding-m		{padding: var(--space-m);}
.padding-l		{padding: var(--space-l);}
.padding-xl		{padding: var(--space-xl);}
.padding-xxl	{padding: var(--space-xxl);}
.padding-xxxl	{padding: var(--space-xxxl);}

/* Useful Classes - Spacing - Padding Bottom */
.padding-bottom-none	{padding-bottom: var(--space-none);}
.padding-bottom-xxs		{padding-bottom: var(--space-xxs);}
.padding-bottom-xs		{padding-bottom: var(--space-xs);}
.padding-bottom-s		{padding-bottom: var(--space-s);}
.padding-bottom-m		{padding-bottom: var(--space-m);}
.padding-bottom-l		{padding-bottom: var(--space-l);}
.padding-bottom-xl		{padding-bottom: var(--space-xl);}
.padding-bottom-xxl		{padding-bottom: var(--space-xxl);}
.padding-bottom-xxxl	{padding-bottom: var(--space-xxxl);}

/* Useful Classes - Spacing - Padding Left */
.padding-left-none	{padding-left: var(--space-none);}
.padding-left-xxs	{padding-left: var(--space-xxs);}
.padding-left-xs	{padding-left: var(--space-xs);}
.padding-left-s		{padding-left: var(--space-s);}
.padding-left-m		{padding-left: var(--space-m);}
.padding-left-l		{padding-left: var(--space-l);}
.padding-left-xl	{padding-left: var(--space-xl);}
.padding-left-xxl	{padding-left: var(--space-xxl);}
.padding-left-xxxl	{padding-left: var(--space-xxxl);}

/* Useful Classes - Spacing - Padding Right */
.padding-right-none	{padding-right: var(--space-none);}
.padding-right-xxs	{padding-right: var(--space-xxs);}
.padding-right-xs	{padding-right: var(--space-xs);}
.padding-right-s	{padding-right: var(--space-s);}
.padding-right-m	{padding-right: var(--space-m);}
.padding-right-l	{padding-right: var(--space-l);}
.padding-right-xl	{padding-right: var(--space-xl);}
.padding-right-xxl	{padding-right: var(--space-xxl);}
.padding-right-xxxl	{padding-right: var(--space-xxxl);}

/* Useful Classes - Spacing - Padding Top */
.padding-top-none	{padding-top: var(--space-none);}
.padding-top-xxs	{padding-top: var(--space-xxs);}
.padding-top-xs		{padding-top: var(--space-xs);}
.padding-top-s		{padding-top: var(--space-s);}
.padding-top-m		{padding-top: var(--space-m);}
.padding-top-l		{padding-top: var(--space-l);}
.padding-top-xl		{padding-top: var(--space-xl);}
.padding-top-xxl	{padding-top: var(--space-xxl);}
.padding-top-xxxl	{padding-top: var(--space-xxxl);}

/* Useful Classes - Spacing - Padding Horizontal */
.padding-x-none {
	padding-left: var(--space-none);
	padding-right: var(--space-none);
}
.padding-x-xxs {
	padding-left: var(--space-xxs);
	padding-right: var(--space-xxs);
}
.padding-x-xs {
	padding-left: var(--space-xs);
	padding-right: var(--space-xs);
}
.padding-x-s {
	padding-left: var(--space-s);
	padding-right: var(--space-s);
}
.padding-x-m {
	padding-left: var(--space-m);
	padding-right: var(--space-m);
}
.padding-x-l {
	padding-left: var(--space-l);
	padding-right: var(--space-l);
}
.padding-x-xl {
	padding-left: var(--space-xl);
	padding-right: var(--space-xl);
	}
.padding-x-xxl {
	padding-left: var(--space-xxl);
	padding-right: var(--space-xxl);
}
.padding-x-xxxl {
	padding-left: var(--space-xxxl);
	padding-right: var(--space-xxxl);
}

/* Useful Classes - Spacing - Padding Vertical */
.padding-y-none {
	padding-top: var(--space-none);
	padding-bottom: var(--space-none);
}
.padding-y-xxs {
	padding-top: var(--space-xxs);
	padding-bottom: var(--space-xxs);
}
.padding-y-xs {
	padding-top: var(--space-xs);
	padding-bottom: var(--space-xs);
}
.padding-y-s {
	padding-top: var(--space-s);
	padding-bottom: var(--space-s);
}
.padding-y-m {
	padding-top: var(--space-m);
	padding-bottom: var(--space-m);
}
.padding-y-l {
	padding-top: var(--space-l);
	padding-bottom: var(--space-l);
}
.padding-y-xl {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-xl);
}
.padding-y-xxl {
	padding-top: var(--space-xxl);
	padding-bottom: var(--space-xxl);
}

.padding-y-xxxl {
	padding-top: var(--space-xxxl);
	padding-bottom: var(--space-xxxl);
}


/* NEW TOKENS ================================================== */
:root {
	--space-xxxxl: 6.875rem; /*110px*/
}

/* NEW UTILITY CLASSES ============================================= */
.padding-xxxxl			{padding: var(--space-xxxxl);}
.padding-bottom-xxxxl	{padding-bottom: var(--space-xxxxl);}
.padding-left-xxxxl		{padding-left: var(--space-xxxxl);}
.padding-right-xxxxl	{padding-right: var(--space-xxxxl);}
.padding-top-xxxxl		{padding-top: var(--space-xxxxl);}
.padding-x-xxxxl		{padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl);}
.padding-y-xxxxl		{padding-bottom: var(--space-xxxxl); padding-top: var(--space-xxxxl);}

.padding-top-custom		{padding-top: 80px;}
.padding-y-custom		{padding-bottom: 80px; padding-top: 80px;}
.padding-top-block-space{padding-top: 160px;}

.margin-xxxxl			{margin: var(--space-xxxxl);}
.margin-bottom-xxxxl	{margin-bottom: var(--space-xxxxl);}
.margin-left-xxxxl		{margin-left: var(--space-xxxxl);}
.margin-right-xxxxl		{margin-right: var(--space-xxxxl);}
.margin-top-xxxxl		{margin-top: var(--space-xxxxl);}
.margin-x-xxxxl			{margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl);}
.margin-y-xxxxl			{margin-bottom: var(--space-xxxxl); margin-top: var(--space-xxxxl);}


/*  $8 - Dark Mode / DarkVersion ================================================== */
.dex-darkmode,
.dex-layout .dark-version {
	color: var(--color-text-body);
	
	/* Color - Neutral */
	--color-neutral-0: var(--color-neutral-10);
	--color-neutral-1: var(--color-neutral-9);
	--color-neutral-2: var(--color-neutral-8);
	--color-neutral-3: var(--color-neutral-7);
	--color-neutral-4: var(--color-neutral-6);
	--color-neutral-5: var(--color-neutral-5);
	--color-neutral-6: var(--color-neutral-4);
	--color-neutral-7: var(--color-neutral-3);
	--color-neutral-8: var(--color-neutral-2);
	--color-neutral-9: var(--color-neutral-1);
	--color-neutral-10: var(--color-neutral-0);
	
	/* Color - Black and White */
	--color-black: var(--color-white);
	--color-white: var(--color-black);
	
	/* Color - Semantic */
	--color-info-lighter: var(--color-info);
	--color-info-light: var(--color-info-light);
	--color-info: var(--color-info-lighter);
	
	--color-success-lighter: var(--color-success-dark);
	--color-success-light: var(--color-success);
	--color-success: var(--color-success-light);
	--color-success-dark: var(--color-success-lighter);
	
	--color-warning-lighter: var(--color-warning);
	--color-warning-light: var(--color-warning-light);
	--color-warning: var(--color-warning-lighter);
	
	--color-error-lighter: var(--color-error);
	--color-error-light: var(--color-error-light);
	--color-error: var(--color-error-lighter);
}

.margin-bottom-xxxxxl {margin-bottom: 135px;}

@media (max-width: 991.98px) {
	.padding-top-custom,
	.padding-top-block-space{padding-top: 80px;}
	
	.padding-y-xxxxl	{
		padding-bottom: var(--space-xxxl);
		padding-top: var(--space-xxxl);
	}
}


/* -------------------------- MOBILE -------------------------- */

@media (max-width: 991.98px) {
	a.mb-hidden,
	.mb-hidden,
	[mb-hidden] {display: none;}
	a.mb-show,
	.mb-show,
	[mb-show] {display: block;}
	
	a.btn:not(.no-responsive),
	.btn:not(.no-responsive),
	.btn:not(.no-responsive):visited {
		justify-content: center;
		width: 100%;
	}
	
	.grid-container {
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.mb-display-inline {display: inline;}
	
	.mb-full-width,
	.mb-full-width > img {width: 100%;}
	
	.mb-max-width-initial {max-width: initial;}
	
	.mb-text-align-left	 {text-align: left;}
	.mb-text-align-center   {text-align: center;}
	.mb-text-align-right	{text-align: right;}
	.mb-text-capitalize	 {text-transform: capitalize;}
	.mb-text-lowercase	  {text-transform: lowercase;}
	.mb-text-nowrap		 {white-space: nowrap;}
	.mb-text-wrap-initial		 {white-space: initial;}
	.mb-text-strike		 {text-decoration: line-through;}
	
	.mb-order-initial {order: initial;}
	.mb-order-1 {order: 1;}
	.mb-order-2 {order: 2;}
	.mb-order-3 {order: 3;}
	.mb-order-4 {order: 4;}
	.mb-order-5 {order: 5;}
	.mb-order-6 {order: 6;}
	.mb-order-7 {order: 7;}
	.mb-order-8 {order: 8;}
	.mb-order-9 {order: 9;}
	.mb-order-10 {order: 10;}
	
	.mb-font-size-xxl {font-size: var(--font-size-xxl);}
	.mb-font-size-xl {font-size: var(--font-size-xl);}
	.mb-font-size-l {font-size: var(--font-size-l);}
	.mb-font-size-m {font-size: var(--font-size-m);}
	.mb-font-size-s {font-size: var(--font-size-s);}
	.mb-font-size-xs {font-size: var(--font-size-xs);}
	.mb-font-size-xxs {font-size: var(--font-size-xxs);}
	
	/* GAP */
	.mb-gap-none	{gap: var(--space-none);}
	.mb-gap-xxs	{gap: var(--space-xxs);}
	.mb-gap-xs		{gap: var(--space-xs);}
	.mb-gap-s		{gap: var(--space-s);}
	.mb-gap-m		{gap: var(--space-m);}
	.mb-gap-l		{gap: var(--space-l);}
	.mb-gap-xl		{gap: var(--space-xl);}
	.mb-gap-xxl	{gap: var(--space-xxl);}
	.mb-gap-xxxl	{gap: var(--space-xxxl);}
	
	/* Useful Classes - Spacing - Margin */
	.mb-margin-none	{margin: var(--space-none);}
	.mb-margin-xxs		{margin: var(--space-xxs);}
	.mb-margin-xs		{margin: var(--space-xs);}
	.mb-margin-s		{margin: var(--space-s);}
	.mb-margin-m		{margin: var(--space-m);}
	.mb-margin-l		{margin: var(--space-l);}
	.mb-margin-xl		{margin: var(--space-xl);}
	.mb-margin-xxl		{margin: var(--space-xxl);}
	.mb-margin-xxxl	{margin: var(--space-xxxl);}

	/* Useful Classes - Spacing - Margin Bottom */
	.mb-margin-bottom-none	{margin-bottom: var(--space-none);}
	.mb-margin-bottom-xxs	{margin-bottom: var(--space-xxs);}
	.mb-margin-bottom-xs	{margin-bottom: var(--space-xs);}
	.mb-margin-bottom-s	{margin-bottom: var(--space-s);}
	.mb-margin-bottom-m	{margin-bottom: var(--space-m);}
	.mb-margin-bottom-l	{margin-bottom: var(--space-l);}
	.mb-margin-bottom-xl	{margin-bottom: var(--space-xl);}
	.mb-margin-bottom-xxl	{margin-bottom: var(--space-xxl);}
	.mb-margin-bottom-xxxl	{margin-bottom: var(--space-xxxl);}

	/* Useful Classes - Spacing - Margin Left */
	.mb-margin-left-none	{margin-left: var(--space-none);}
	.mb-margin-left-xxs	{margin-left: var(--space-xxs);}
	.mb-margin-left-xs		{margin-left: var(--space-xs);}
	.mb-margin-left-s		{margin-left: var(--space-s);}
	.mb-margin-left-m		{margin-left: var(--space-m);}
	.mb-margin-left-l		{margin-left: var(--space-l);}
	.mb-margin-left-xl		{margin-left: var(--space-xl);}
	.mb-margin-left-xxl	{margin-left: var(--space-xxl);}
	.mb-margin-left-xxxl	{margin-left: var(--space-xxxl);}

	/* Useful Classes - Spacing - Margin Right */
	.mb-margin-right-none	{margin-right: var(--space-none);}
	.mb-margin-right-xxs	{margin-right: var(--space-xxs);}
	.mb-margin-right-xs	{margin-right: var(--space-xs);}
	.mb-margin-right-s		{margin-right: var(--space-s);}
	.mb-margin-right-m		{margin-right: var(--space-m);}
	.mb-margin-right-l		{margin-right: var(--space-l);}
	.mb-margin-right-xl	{margin-right: var(--space-xl);}
	.mb-margin-right-xxl	{margin-right: var(--space-xxl);}
	.mb-margin-right-xxxl	{margin-right: var(--space-xxxl);}

	/* Useful Classes - Spacing - Margin Top */
	.mb-margin-top-none	{margin-top: var(--space-none);}
	.mb-margin-top-xxs		{margin-top: var(--space-xxs);}
	.mb-margin-top-xs		{margin-top: var(--space-xs);}
	.mb-margin-top-s		{margin-top: var(--space-s);}
	.mb-margin-top-m		{margin-top: var(--space-m);}
	.mb-margin-top-l		{margin-top: var(--space-l);}
	.mb-margin-top-xl		{margin-top: var(--space-xl);}
	.mb-margin-top-xxl		{margin-top: var(--space-xxl);}
	.mb-margin-top-xxxl	{margin-top: var(--space-xxxl);}

	/* Useful Classes - Spacing - Margin Vertical */
	.mb-margin-y-none {
		margin-top: var(--space-none);
		margin-bottom: var(--space-none);
	}
	.mb-margin-y-xxs {
		margin-top: var(--space-xxs);
		margin-bottom: var(--space-xxs);
	}
	.mb-margin-y-xs {
		margin-top: var(--space-xs);
		margin-bottom: var(--space-xs);
	}
	.mb-margin-y-s {
		margin-top: var(--space-s);
		margin-bottom: var(--space-s);
	}
	.mb-margin-y-m {
		margin-top: var(--space-m);
		margin-bottom: var(--space-m);
	}
	.mb-margin-y-l {
		margin-top: var(--space-l);
		margin-bottom: var(--space-l);
	}
	.mb-margin-y-xl {
		margin-top: var(--space-xl);
		margin-bottom: var(--space-xl);
	}
	.mb-margin-y-xxl {
		margin-top: var(--space-xxl);
		margin-bottom: var(--space-xxl);
	}
	.mb-margin-y-xxxl {
		margin-top: var(--space-xxxl);
		margin-bottom: var(--space-xxxl);
	}

	/* Useful Classes - Spacing - Margin Horizontal */
	.mb-margin-x-none {
		margin-left: var(--space-none);
		margin-right: var(--space-none);
	}
	.mb-margin-x-xxs {
		margin-left: var(--space-xxs);
		margin-right: var(--space-xxs);
	}
	.mb-margin-x-xs {
		margin-left: var(--space-xs);
		margin-right: var(--space-xs);
	}
	.mb-margin-x-s {
		margin-left: var(--space-s);
		margin-right: var(--space-s);
	}
	.mb-margin-x-m {
		margin-left: var(--space-m);
		margin-right: var(--space-m);
	}
	.mb-margin-x-l {
		margin-left: var(--space-l);
		margin-right: var(--space-l);
	}
	.mb-margin-x-xl {
		margin-left: var(--space-xl);
		margin-right: var(--space-xl);
	}
	.mb-margin-x-xxl {
		margin-left: var(--space-xxl);
		margin-right: var(--space-xxl);
	}
	.mb-margin-x-xxxl {
		margin-left: var(--space-xxxl);
		margin-right: var(--space-xxxl);
	}
	
	/* Useful Classes - Spacing - Padding */
	.mb-padding-none	{padding: var(--space-none);}
	.mb-padding-xxs	{padding: var(--space-xxs);}
	.mb-padding-xs		{padding: var(--space-xs);}
	.mb-padding-s		{padding: var(--space-s);}
	.mb-padding-m		{padding: var(--space-m);}
	.mb-padding-l		{padding: var(--space-l);}
	.mb-padding-xl		{padding: var(--space-xl);}
	.mb-padding-xxl	{padding: var(--space-xxl);}
	.mb-padding-xxxl	{padding: var(--space-xxxl);}

	/* Useful Classes - Spacing - Padding Bottom */
	.mb-padding-bottom-none	{padding-bottom: var(--space-none);}
	.mb-padding-bottom-xxs		{padding-bottom: var(--space-xxs);}
	.mb-padding-bottom-xs		{padding-bottom: var(--space-xs);}
	.mb-padding-bottom-s		{padding-bottom: var(--space-s);}
	.mb-padding-bottom-m		{padding-bottom: var(--space-m);}
	.mb-padding-bottom-l		{padding-bottom: var(--space-l);}
	.mb-padding-bottom-xl		{padding-bottom: var(--space-xl);}
	.mb-padding-bottom-xxl		{padding-bottom: var(--space-xxl);}
	.mb-padding-bottom-xxxl	{padding-bottom: var(--space-xxxl);}

	/* Useful Classes - Spacing - Padding Left */
	.mb-padding-left-none	{padding-left: var(--space-none);}
	.mb-padding-left-xxs	{padding-left: var(--space-xxs);}
	.mb-padding-left-xs	{padding-left: var(--space-xs);}
	.mb-padding-left-s		{padding-left: var(--space-s);}
	.mb-padding-left-m		{padding-left: var(--space-m);}
	.mb-padding-left-l		{padding-left: var(--space-l);}
	.mb-padding-left-xl	{padding-left: var(--space-xl);}
	.mb-padding-left-xxl	{padding-left: var(--space-xxl);}
	.mb-padding-left-xxxl	{padding-left: var(--space-xxxl);}

	/* Useful Classes - Spacing - Padding Right */
	.mb-padding-right-none	{padding-right: var(--space-none);}
	.mb-padding-right-xxs	{padding-right: var(--space-xxs);}
	.mb-padding-right-xs	{padding-right: var(--space-xs);}
	.mb-padding-right-s	{padding-right: var(--space-s);}
	.mb-padding-right-m	{padding-right: var(--space-m);}
	.mb-padding-right-l	{padding-right: var(--space-l);}
	.mb-padding-right-xl	{padding-right: var(--space-xl);}
	.mb-padding-right-xxl	{padding-right: var(--space-xxl);}
	.mb-padding-right-xxxl	{padding-right: var(--space-xxxl);}

	/* Useful Classes - Spacing - Padding Top */
	.mb-padding-top-none	{padding-top: var(--space-none);}
	.row .mb-padding-top-xxs,
	.mb-padding-top-xxs	{padding-top: var(--space-xxs);}
	.row .mb-padding-top-xs,
	.mb-padding-top-xs		{padding-top: var(--space-xs);}
	.row .mb-padding-top-2,
	.mb-padding-top-s		{padding-top: var(--space-s);}
	.row .mb-padding-top-m,
	.mb-padding-top-m		{padding-top: var(--space-m);}
	.row .mb-padding-top-l,
	.mb-padding-top-l		{padding-top: var(--space-l);}
	.row .mb-padding-top-xl,
	.mb-padding-top-xl		{padding-top: var(--space-xl);}
	.row .mb-padding-top-xxl,
	.mb-padding-top-xxl	{padding-top: var(--space-xxl);}
	.row .mb-padding-top-xxxl,
	.mb-padding-top-xxxl	{padding-top: var(--space-xxxl);}

	/* Useful Classes - Spacing - Padding Horizontal */
	.mb-padding-x-none {
		padding-left: var(--space-none);
		padding-right: var(--space-none);
	}
	.mb-padding-x-xxs {
		padding-left: var(--space-xxs);
		padding-right: var(--space-xxs);
	}
	.mb-padding-x-xs {
		padding-left: var(--space-xs);
		padding-right: var(--space-xs);
	}
	.mb-padding-x-s {
		padding-left: var(--space-s);
		padding-right: var(--space-s);
	}
	.mb-padding-x-m {
		padding-left: var(--space-m);
		padding-right: var(--space-m);
	}
	.mb-padding-x-l {
		padding-left: var(--space-l);
		padding-right: var(--space-l);
	}
	.mb-padding-x-xl {
		padding-left: var(--space-xl);
		padding-right: var(--space-xl);
		}
	.mb-padding-x-xxl {
		padding-left: var(--space-xxl);
		padding-right: var(--space-xxl);
	}
	.mb-padding-x-xxxl {
		padding-left: var(--space-xxxl);
		padding-right: var(--space-xxxl);
	}

	/* Useful Classes - Spacing - Padding Vertical */
	.mb-padding-y-none {
		padding-top: var(--space-none);
		padding-bottom: var(--space-none);
	}
	.mb-padding-y-xxs {
		padding-top: var(--space-xxs);
		padding-bottom: var(--space-xxs);
	}
	.mb-padding-y-xs {
		padding-top: var(--space-xs);
		padding-bottom: var(--space-xs);
	}
	.mb-padding-y-s {
		padding-top: var(--space-s);
		padding-bottom: var(--space-s);
	}
	.mb-padding-y-m {
		padding-top: var(--space-m);
		padding-bottom: var(--space-m);
	}
	.mb-padding-y-l {
		padding-top: var(--space-l);
		padding-bottom: var(--space-l);
	}
	.mb-padding-y-xl {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-xl);
	}
	.mb-padding-y-xxl {
		padding-top: var(--space-xxl);
		padding-bottom: var(--space-xxl);
	}

	.mb-padding-y-xxxl {
		padding-top: var(--space-xxxl);
		padding-bottom: var(--space-xxxl);
	}
	
	.padding-y-custom {
		padding-bottom: 80;
		padding-top: 80px;
	}
}