/*! Mix-IT© 2015-2025 EMIAGIC, Corp. | All rights reserved | Tous droits réservés | Author: Jimmy Paquereau (jimmy.paquereau@emiagic.com)  | Contributors: Jimmy Paquereau, Anthony PORTALES | This file is part of Mix-IT© framework. For the full copyright and license information, please view the "license" file that was distributed with this source code and EMIAGIC general terms and conditions: https://www.emiagic.com/pdf/cgv.pdf. */

/* === Font === */

@font-face{
	font-family: mixit;
	src: local(mixit), url("/core/font/mixit.ttf");
}

@media (max-width: 400px) {
    html, body { font-size: calc(0.80 * var(--em)); }
}
@media (min-width: 400px) and (max-width: 600px) {
    html, body { font-size: calc(0.84 * var(--em)); }
}
@media (min-width: 600px) and (max-width: 800px) {
    html, body { font-size: calc(0.87 * var(--em)); }
}
@media (min-width: 800px) and (max-width: 1000px) {
    html, body { font-size: calc(0.90 * var(--em)); }
}
@media (min-width: 1000px) and (max-width: 1200px) {
    html, body { font-size: calc(0.92 * var(--em)); }
}
@media (min-width: 1200px) and (max-width: 1400px) {
    html, body { font-size: calc(0.95 * var(--em)); }
}
@media (min-width: 1400px) and (max-width: 1600px) {
    html, body { font-size: calc(0.97 * var(--em)); }
}
@media (min-width: 1600px) and (max-width: 1800px) {
    html, body { font-size: calc(0.98 * var(--em)); }
}
@media (min-width: 1800px) and (max-width: 2000px) {
    html, body { font-size: calc(1.00 * var(--em)); }
}
@media (min-width: 2000px) and (max-width: 2200px) {
    html, body { font-size: calc(1.02 * var(--em)); }
}
@media (min-width: 2200px) and (max-width: 2400px) {
    html, body { font-size: calc(1.03 * var(--em)); }
}
@media (min-width: 2400px) and (max-width: 2600px){
    html, body { font-size: calc(1.05 * var(--em)); }
}
@media (min-width: 2600px){
    html, body { font-size: calc(1.06 * var(--em)); }
}

/* === Animations === */

@keyframes wait{ 0%{ opacity: 0; } 100%{ opacity: 0; } }
@keyframes rotx360{ 0%{ transform: rotateX(0deg); } 100%{ transform: rotateX(360deg); } }
@keyframes roty360{ 0%{ transform: rotateY(0deg); } 100%{ transform: rotateY(360deg); } }
@keyframes rotz360{ 0%{ transform: rotateZ(0deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes trt2b{ 0%{ position: relative; bottom: 100%; } 100%{ position: relative; bottom: 0%; } }
@keyframes trb2t{ 0%{ position: relative; top: 100%; } 100%{ position: relative; top: 0%; } }
@keyframes trl2r{ 0%{ position: relative; right: 100%; } 100%{ position: relative; right: 0%; } }
@keyframes trr2l{ 0%{ position: relative; left: 100%; } 100%{ position: relative; left: 0%; } }
@keyframes fadein{ 0%{ opacity: 0; } 100%{ opacity: 1; } }
@keyframes fadeout{ 0%{ opacity: 1; } 100%{ opacity: 0; } }

@keyframes rot3z360{ 0%{ transform: rotateZ(0deg); } 33%{ transform: rotateZ(0deg); } 34%{ transform: rotateZ(120deg); } 66%{ transform: rotateZ(120deg); } 67%{ transform: rotateZ(240deg); } 99%{ transform: rotateZ(240deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes rot4z360{ 0%{ transform: rotateZ(0deg); } 24%{ transform: rotateZ(0deg); } 25%{ transform: rotateZ(90deg); } 49%{ transform: rotateZ(90deg); } 50%{ transform: rotateZ(180deg); } 74%{ transform: rotateZ(180deg); } 75%{ transform: rotateZ(270deg); } 99%{ transform: rotateZ(270deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes rot5z360{ 0%{ transform: rotateZ(0deg); } 19%{ transform: rotateZ(0deg); } 20%{ transform: rotateZ(72deg); } 39%{ transform: rotateZ(72deg); } 40%{ transform: rotateZ(144deg); } 59%{ transform: rotateZ(144deg); } 60%{ transform: rotateZ(216deg); } 79%{ transform: rotateZ(216deg); } 80%{ transform: rotateZ(288deg); } 99%{ transform: rotateZ(288deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes rot6z360{ 0%{ transform: rotateZ(0deg); } 16%{ transform: rotateZ(0deg); } 17%{ transform: rotateZ(60deg); } 33%{ transform: rotateZ(60deg); } 34%{ transform: rotateZ(120deg); } 49%{ transform: rotateZ(120deg); } 50%{ transform: rotateZ(180deg); } 66%{ transform: rotateZ(180deg); } 67%{ transform: rotateZ(240deg); } 83%{ transform: rotateZ(240deg); } 84%{ transform: rotateZ(300deg); } 99%{ transform: rotateZ(300deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes rot8z360{ 0%{ transform: rotateZ(0deg); } 12%{ transform: rotateZ(0deg); } 13%{ transform: rotateZ(45deg); } 24%{ transform: rotateZ(45deg); } 25%{ transform: rotateZ(90deg); } 37%{ transform: rotateZ(90deg); } 38%{ transform: rotateZ(135deg); } 49%{ transform: rotateZ(135deg); } 50%{ transform: rotateZ(180deg); } 62%{ transform: rotateZ(180deg); } 63%{ transform: rotateZ(225deg); } 74%{ transform: rotateZ(225deg); } 75%{ transform: rotateZ(270deg); } 87%{ transform: rotateZ(270deg); } 88%{ transform: rotateZ(315deg); } 99%{ transform: rotateZ(315deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes rot9z360{ 0%{ transform: rotateZ(0deg); } 11%{ transform: rotateZ(0deg); } 12%{ transform: rotateZ(40deg); } 22%{ transform: rotateZ(40deg); } 23%{ transform: rotateZ(80deg); } 33%{ transform: rotateZ(80deg); } 34%{ transform: rotateZ(120deg); } 44%{ transform: rotateZ(120deg); } 45%{ transform: rotateZ(160deg); } 55%{ transform: rotateZ(160deg); } 56%{ transform: rotateZ(200deg); } 66%{ transform: rotateZ(200deg); } 67%{ transform: rotateZ(240deg); } 77%{ transform: rotateZ(240deg); } 78%{ transform: rotateZ(280deg); } 88%{ transform: rotateZ(280deg); } 89%{ transform: rotateZ(320deg); } 99%{ transform: rotateZ(320deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes rot10z360{ 0%{ transform: rotateZ(0deg); } 9%{ transform: rotateZ(0deg); } 10%{ transform: rotateZ(36deg); } 19%{ transform: rotateZ(36deg); } 20%{ transform: rotateZ(72deg); } 29%{ transform: rotateZ(72deg); } 30%{ transform: rotateZ(108deg); } 39%{ transform: rotateZ(108deg); } 40%{ transform: rotateZ(144deg); } 49%{ transform: rotateZ(144deg); } 50%{ transform: rotateZ(180deg); } 59%{ transform: rotateZ(180deg); } 60%{ transform: rotateZ(216deg); } 69%{ transform: rotateZ(216deg); } 70%{ transform: rotateZ(252deg); } 79%{ transform: rotateZ(252deg); } 80%{ transform: rotateZ(288deg); } 89%{ transform: rotateZ(288deg); } 90%{ transform: rotateZ(324deg); } 99%{ transform: rotateZ(324deg); } 100%{ transform: rotateZ(360deg); } }
@keyframes rot12z360{ 0%{ transform: rotateZ(0deg); } 8%{ transform: rotateZ(0deg); } 9%{ transform: rotateZ(30deg); } 16%{ transform: rotateZ(30deg); } 17%{ transform: rotateZ(60deg); } 24%{ transform: rotateZ(60deg); } 25%{ transform: rotateZ(90deg); } 33%{ transform: rotateZ(90deg); } 34%{ transform: rotateZ(120deg); } 41%{ transform: rotateZ(120deg); } 42%{ transform: rotateZ(150deg); } 49%{ transform: rotateZ(150deg); } 50%{ transform: rotateZ(180deg); } 58%{ transform: rotateZ(180deg); } 59%{ transform: rotateZ(210deg); } 66%{ transform: rotateZ(210deg); } 67%{ transform: rotateZ(240deg); } 74%{ transform: rotateZ(240deg); } 75%{ transform: rotateZ(270deg); } 83%{ transform: rotateZ(270deg); } 84%{ transform: rotateZ(300deg); } 91%{ transform: rotateZ(300deg); } 92%{ transform: rotateZ(330deg); } 99%{ transform: rotateZ(330deg); } 100%{ transform: rotateZ(360deg); } }

/* === Global === */

::-webkit-scrollbar{ width: var(--scroll-size); height: var(--scroll-size); }
::-webkit-scrollbar-track{ background: var(--scroll-track); }
::-webkit-scrollbar-thumb{ background: var(--scroll-thumb); }
::-webkit-scrollbar-thumb:hover{ background: var(--scroll-over); }

html{ overflow: auto; }
html, body{ width: 100%; height: 100%; padding: 0; margin: 0; display: block; font-family: var(--font); }
*{ padding: 0; margin: 0; box-sizing: border-box; letter-spacing: var(--spacing); }
*:focus{ outline: var(--focus, 1px dashed #000); }
*[tabindex="0"]{ position: relative; }
*[tabindex="0"]:focus{ z-index: 1; }
div,header,section,article,nav,footer,ul{ display: block; }
p{ display: block; width: 100%; text-align: justify; hyphens: auto; }
li{ display: block; }

/* === Titles === */

h1,h2,h3,h4,h5,h6{ display: block; width: 100%; }
h1{ font-size: var(--h1-size); font-family: var(--h1-font); color: var(--h1-color); font-weight: var(--h1-weight); font-style: var(--h1-style); text-decoration: var(--h1-decoration); text-align: var(--h1-align); }
h2{ font-size: var(--h2-size); font-family: var(--h2-font); color: var(--h2-color); font-weight: var(--h2-weight); font-style: var(--h2-style); text-decoration: var(--h2-decoration); text-align: var(--h2-align); }
h3{ font-size: var(--h3-size); font-family: var(--h3-font); color: var(--h3-color); font-weight: var(--h3-weight); font-style: var(--h3-style); text-decoration: var(--h3-decoration); text-align: var(--h3-align); }
h4{ font-size: var(--h4-size); font-family: var(--h4-font); color: var(--h4-color); font-weight: var(--h4-weight); font-style: var(--h4-style); text-decoration: var(--h4-decoration); text-align: var(--h4-align); }
h5{ font-size: var(--h5-size); font-family: var(--h5-font); color: var(--h5-color); font-weight: var(--h5-weight); font-style: var(--h5-style); text-decoration: var(--h5-decoration); text-align: var(--h5-align); }
h6{ font-size: var(--h6-size); font-family: var(--h6-font); color: var(--h6-color); font-weight: var(--h6-weight); font-style: var(--h6-style); text-decoration: var(--h6-decoration); text-align: var(--h6-align); }

.title{ display: flex; flex-direction: column; width: 100%; }
.title>*{ display: block; }

.h1{ font-size: var(--h1-size); font-family: var(--h1-font); color: var(--h1-color); font-weight: var(--h1-weight); font-style: var(--h1-style); text-decoration: var(--h1-decoration); text-align: var(--h1-align); }
.h2{ font-size: var(--h2-size); font-family: var(--h2-font); color: var(--h2-color); font-weight: var(--h2-weight); font-style: var(--h2-style); text-decoration: var(--h2-decoration); text-align: var(--h2-align); }
.h3{ font-size: var(--h3-size); font-family: var(--h3-font); color: var(--h3-color); font-weight: var(--h3-weight); font-style: var(--h3-style); text-decoration: var(--h3-decoration); text-align: var(--h3-align); }
.h4{ font-size: var(--h4-size); font-family: var(--h4-font); color: var(--h4-color); font-weight: var(--h4-weight); font-style: var(--h4-style); text-decoration: var(--h4-decoration); text-align: var(--h4-align); }
.h5{ font-size: var(--h5-size); font-family: var(--h5-font); color: var(--h5-color); font-weight: var(--h5-weight); font-style: var(--h5-style); text-decoration: var(--h5-decoration); text-align: var(--h5-align); }
.h6{ font-size: var(--h6-size); font-family: var(--h6-font); color: var(--h6-color); font-weight: var(--h6-weight); font-style: var(--h6-style); text-decoration: var(--h6-decoration); text-align: var(--h6-align); }

.title>.h1+*{ font-size: var(--h3-size); font-family: var(--h3-font); color: var(--h3-color); font-weight: normal; font-style: var(--h3-style); text-decoration: var(--h3-decoration); text-align: var(--h1-align); }
.title>.h2+*{ font-size: var(--h4-size); font-family: var(--h4-font); color: var(--h4-color); font-weight: normal; font-style: var(--h4-style); text-decoration: var(--h4-decoration); text-align: var(--h2-align); }
.title>.h3+*{ font-size: var(--h5-size); font-family: var(--h5-font); color: var(--h5-color); font-weight: normal; font-style: var(--h5-style); text-decoration: var(--h5-decoration); text-align: var(--h3-align); }
.title>.h4+*{ font-size: var(--h6-size); font-family: var(--h6-font); color: var(--h6-color); font-weight: normal; font-style: var(--h6-style); text-decoration: var(--h5-decoration); text-align: var(--h4-align); }
.title>.h5+*{ font-size: var(--h7-size); font-family: var(--h7-font); color: var(--h7-color); font-weight: normal; font-style: var(--h7-style); text-decoration: var(--h7-decoration); text-align: var(--h5-align); }

/* === Misc === */

dialog{ border: none; }
table{ table-layout: fixed; border-collapse: collapse; border-spacing: 0; }
mtd{ padding: .125em; }

/* === Links === */

a{ cursor: pointer; font-weight: normal; color: #000; text-decoration: none; }
a[disabled]{ cursor: not-allowed; }

/* === Icons === */

.icon{ 
	cursor: pointer; position: relative; aspect-ratio: 1 / 1;
	height: var(--icon-size); width: var(--icon-size); flex: 0 0 var(--icon-size); 
	transform: var(--icon-transform); filter: var(--icon-filter); outline: var(--icon-outline);  border: var(--icon-border); 
	border-radius: var(--icon-radius); transition: var(--icon-transition); 
	background-size: var(--icon-image); background-repeat: no-repeat; background-position: center center;
}
.icon:hover{ 
	background-size: var(--icon-over-image); transform: var(--icon-over-transform); 
	filter: var(--icon-over-filter); outline: var(--icon-over-outline); border: var(--icon-over-border); 
}
.icon:focus{ 
	background-size: var(--icon-focus-image); transform: var(--icon-focus-transform); 
	filter: var(--icon-focus-filter); outline: var(--icon-focus-outline); border: var(--icon-focus-border);
	z-index: 1;
}
.icon[disabled]{ 
	cursor: not-allowed; background-size: var(--icon-disabled-image); transform: var(--icon-disabled-transform); 
	filter: var(--icon-disabled-filter); outline: var(--icon-disabled-outline); border: var(--icon-disabled-border); 
}
.icon[loading]{
	background-image: var(--icon-loading) !important;
	animation: var(--icon-animation) !important;
}
.mi-zoom .icon {
    height: min(calc(12 * var(--icon-size)), 100%);
    width: min(calc(12 * var(--icon-size)), 100%);
    flex: 0 0 min(calc(12 * var(--icon-size)), 100%);
}

/* === Buttons === */

button, .button{ 
	display: inline-flex; align-items: center; justify-content: center; font-size: 1em;
	position: relative; text-align: center; padding: 0em var(--button-padding); 
	cursor: pointer; white-space: nowrap; text-decoration: none; height: var(--button-height); 
	color: var(--button-color); background: var(--button-background); 
	border-radius: var(--button-radius); border: var(--button-border); outline: var(--button-outline); 
	filter: var(--button-filter); box-shadow: var(--button-shadow); transition: var(--button-transition); font-weight: var(--button-weight); 
	font-family: var(--button-font); gap: var(--button-gap);
}
button:hover, .button:hover{ 
	color: var(--button-over-color); background: var(--button-over-background); 
	border: var(--button-over-border); outline: var(--button-over-outline); 
	filter: var(--button-over-filter); box-shadow: var(--button-over-shadow); font-weight: var(--button-over-weight);
}
button:focus, .button:focus{ 
	color: var(--button-focus-color); background: var(--button-focus-background); 
	border: var(--button-focus-border); outline: var(--button-focus-outline); 
	filter: var(--button-focus-filter); box-shadow: var(--button-focus-shadow); font-weight: var(--button-focus-weight);
	z-index: 1;
}
button[disabled], .button[disabled]{ 
	cursor: not-allowed; box-shadow: var(--button-disabled-shadow); 
	color: var(--button-disabled-color); background: var(--button-disabled-background); 
	border: var(--button-disabled-border); outline: var(--button-disabled-outline);
	filter: var(--button-disabled-filter); font-weight: var(--button-disabled-weight);
}
button[loading]:before, .button[loading]:after{
	background-image: var(--icon-loading) !important;
	animation: var(--icon-animation) !important;
}

button:before, .button:before, button:after, .button:after{ 
	content: ""; display: none; vertical-align: middle; aspect-ratio: 1 / 1;
	background-repeat: no-repeat; background-position: center center;
	height: var(--button-icon-size); width: var(--button-icon-size);
	flex: 0 0 var(--button-icon-size); transform: var(--button-icon-transform); 
	background-size: var(--button-icon-image); filter: var(--button-icon-filter); 
}
button:hover:before, .button:hover:before, button:hover:after, .button:hover:after{ 
	transform: var(--button-icon-over-transform); background-size: var(--button-icon-over-image); filter: var(--button-icon-over-filter); 
}
button:focus:before, .button:focus:before, button:focus:after, .button:focus:after{ 
	transform: var(--button-icon-focus-transform); background-size: var(--button-icon-focus-image); filter: var(--button-icon-focus-filter); 
}
button[disabled]:before, .button[disabled]:before, button[disabled]:after, .button[disabled]:after{ 
	transform: var(--button-icon-disabled-transform); background-size: var(--button-icon-disabled-image); filter: var(--button-icon-disabled-filter); 
}
button:empty, .button:empty{ 
	width: var(--button-height); flex: 0 0 var(--button-height); 
}

/* === Fields === */

fieldset{ border: none; }


.input, .view-option, .edit-option, input, select, textarea{ 
	resize: none; cursor: default; font-family: var(--font); 
	height: var(--input-height); transition: var(--input-transition);
	color: var(--input-color); background: var(--input-background); 
	border: var(--input-border); outline: var(--input-outline); 
	border-radius: var(--input-radius); box-shadow: var(--input-shadow); 
	filter: var(--input-filter);
}
.input, .view-option, .edit-option{ display: flex; align-items: center; position: relative; }
.input, input, select, textarea{ font-size: 1em; position: relative; width: 100%; }
.view-option, .edit-option, input, select, textarea{ padding: 0em var(--input-padding); }
.view-option, .edit-option{ overflow: hidden; gap: var(--input-padding); }
.view-option-check, .edit-option-check{ background-size: var(--input-icon); }
.view-option-text, .edit-option-text{ flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.input::placeholder, input::placeholder, select::placeholder, textarea::placeholder{
	color: var(--input-placeholder);
}
.input:hover, .view-option:hover, .edit-option:hover, input:hover, select:hover, textarea:hover{ 
	color: var(--input-over-color); background: var(--input-over-background); 
	border: var(--input-over-border); outline: var(--input-over-outline); 
	box-shadow: var(--input-over-shadow);
	filter: var(--input-over-filter); 
}
.input:focus, .view-option:focus, .edit-option:focus, input:focus, select:focus, textarea:focus{ 
	color: var(--input-focus-color); background: var(--input-focus-background); 
	border: var(--input-focus-border); outline: var(--input-focus-outline); 
	box-shadow: var(--input-focus-shadow); filter: var(--input-focus-filter); 
	position: relative; z-index: 1;
}
.input[disabled], .view-option[disabled], .edit-option[disabled], input[disabled], select[disabled], textarea[disabled]{ 
	cursor: not-allowed;
	color: var(--input-disabled-color); background: var(--input-disabled-background); 
	border: var(--input-disabled-border); outline: var(--input-disabled-outline); 
	box-shadow: var(--input-disabled-shadow); filter: var(--input-disabled-filter); 
}

input[type="text"]:not([disabled]), textarea:not([disabled]), [contenteditable="true"]:not([disabled]){ cursor: text; }
input[type="checkbox"], input[type="radio"]{ border: none; background: none; padding: 0; height: auto; width: auto; }
input[type="color"]{ padding: 0; }
textarea{ padding: var(--input-padding); }

.input>.input, .input>input, .input>select, .input>textarea,
.input>.input:focus, .input>input:focus, .input>select:focus, .input>textarea:focus,
.input>.input:hover, .input>input:hover, .input>select:hover, .input>textarea:hover{ 
	border-top: none; border-bottom: none; border-radius: 0; width: 100%; height: 100%;
}
.input>.input:first-child, .input>input:first-child, .input>select:first-child, .input>textarea:first-child,
.input>*:first-child .input:last-child, .input>*:first-child input:last-child, 
.input>*:first-child select:last-child, .input>*:first-child textarea:last-child{ 
	border-left: none; 
}
.input>.input:last-child, .input>input:last-child, .input>select:last-child, .input>textarea:last-child,
.input>*:last-child .input:last-child, .input>*:last-child input:last-child, 
.input>*:last-child select:last-child, .input>*:last-child textarea:last-child{  
	border-right: none; 
}
.input:before, .input:after{ 
	content: ""; display: none; vertical-align: middle; position: relative;
	background-repeat: no-repeat; background-position: center center; 
	height: 100%; width: var(--input-height); flex: 0 0 var(--input-height); 
	background-size: var(--input-icon);
}
.input>.icon, .input>.icon:hover, .input>.icon:focus, .input>.icon[disabled]{ 
	height: 100%; width: var(--input-height); flex: 0 0 var(--input-height); 
	background-size: var(--input-icon) var(--input-icon);
}
.input>img.icon, .input>img.icon:hover, .input>img.icon:focus, .input>img.icon[disabled],
.input>img.icon, .input>img.icon:hover, .input>img.icon:focus, .input>img.icon[disabled]{ 
	height: var(--input-icon); width: var(--input-icon); flex: 0 0 var(--input-icon);
	margin: 0em var(--input-padding);
}
.input:before{ border-right: var(--input-separator); }
.input:after{ border-left: var(--input-separator); }
.input:hover:before{ border-right: var(--input-over-separator); }
.input:hover:after{ border-left: var(--input-over-separator); }
.input:focus:before{ border-right: var(--input-focus-separator); }
.input:focus:after{ border-left: var(--input-focus-separator); }
.input[disabled]:before{ border-right: var(--input-disabled-separator); }
.input[disabled]:after{ border-left: var(--input-disabled-separator); }

/* === Predefined === */

.sr-only{ border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; }
.sr-only{ clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; }
.sr-only{ position: absolute !important; width: 1px !important; white-space: nowrap !important; }

.off{ display: none !important; }
.on{ display: block !important; }

.bg-none{ background: var(--bg-none) no-repeat center center / cover; }

.space{ display: block; width: 100%; }
.space.xxs{ display: block; width: 100%; height: .25em; }
.space.xs{ display: block; width: 100%; height: .5em; }
.space.s{ display: block; width: 100%; height: 1em; }
.space.m{ display: block; width: 100%; height: 2em; }
.space.l{ display: block; width: 100%; height: 3.5em; }
.space.xl{ display: block; width: 100%; height: 5em; }
.space.xxl{ display: block; width: 100%; height: 10em; }

.p25em{ padding: .25em !important; } .p50em{ padding: .5em !important; } .p75em{ padding: .75em !important; }
.p1em{ padding: 1em !important; } .p150em{ padding: 1.5em !important; } .p2em{ padding: 2em !important; } 
.p250em{ padding: 2.5em !important; } .p3em{ padding: 3em !important; } .p4em{ padding: 4em !important; } 
.p5em{ padding: 5em !important; }
.p25x50em{ padding: .25em .5em !important; } .p50x75em{ padding: .5em .75em !important; } 
.p50x1em{ padding: .5em 1em !important; } .p75x1em{ padding: .75em 1em !important; } 
.p75x150em{ padding: .75em 1.5em !important; } .p1x150em{ padding: 1em 1.5em !important; }
.p1x2em{ padding: 1em 2em !important; } .p150x2em{ padding: 1.5em 2em !important; }
.p150x3em{ padding: 1.5em 3em !important; } .p2x3em{ padding: 2em 3em !important; }
.p2x4em{ padding: 2em 4em !important; } .p250x5em{ padding: 2.5em 5em !important; }

@media (max-width: 1200px){
	.p25em, .p50em, .p75em{ padding: .5em !important; }
	.p1em, .p150em, .p2em{ padding: 1em !important; }
	.p250em, .p3em, .p4em, .p5em{ padding: 1.5em !important; } 
	.p25x50em, .p50x75em, .p50x1em{ padding: .5em !important; }
	.p75x1em, .p75x150em, .p1x150em, .p1x2em, .p150x2em{ padding: 1em !important; }
	.p150x3em, .p2x3em, .p2x4em, .p250x5em{ padding: 1.5em !important; }
}

.x1{ width: 1% !important; } .x2{ width: 2% !important; } .x3{ width: 3% !important; } 
.x4{ width: 4% !important; } .x5{ width: 5% !important; } .x6{ width: 6% !important; } 
.x7{ width: 7% !important; } .x8{ width: 8% !important; } .x9{ width: 9% !important; } 
.x10{ width: 10% !important; } .x11{ width: 11% !important; } .x12{ width: 12% !important; } 
.x13{ width: 13% !important; } .x14{ width: 14% !important; } .x15{ width: 15% !important; } 
.x16{ width: 16% !important; } .x17{ width: 17% !important; } .x18{ width: 18% !important; } 
.x19{ width: 19% !important; } .x20{ width: 20% !important; } .x25{ width: 25% !important; } 
.x30{ width: 30% !important; } .x33{ width: 33.33% !important; } .x35{ width: 35% !important; } .x40{ width: 40% !important; } 
.x45{ width: 45% !important; } .x50{ width: 50% !important; } .x55{ width: 55% !important; } 
.x60{ width: 60% !important; } .x65{ width: 65% !important; } .x70{ width: 70% !important; } 
.x75{ width: 75% !important; } .x80{ width: 80% !important; } .x85{ width: 85% !important; } 
.x90{ width: 90% !important; } .x95{ width: 95% !important; } .x100{ width: 100% !important; }
.y1{ height: 1% !important; } .y2{ height: 2% !important; } .y3{ height: 3% !important; } 
.y4{ height: 4% !important; } .y5{ height: 5% !important; } .y6{ height: 6% !important; } 
.y7{ height: 7% !important; } .y8{ height: 8% !important; } .y9{ height: 9% !important; } 
.y10{ height: 10% !important; } .y11{ height: 11% !important; } .y12{ height: 12% !important; } 
.y13{ height: 13% !important; } .y14{ height: 14% !important; } .y15{ height: 15% !important; } 
.y16{ height: 16% !important; } .y17{ height: 17% !important; } .y18{ height: 18% !important; } 
.y19{ height: 19% !important; } .y20{ height: 20% !important; } .y25{ height: 25% !important; } 
.y30{ height: 30% !important; } .y35{ height: 35% !important; } .y40{ height: 40% !important; } 
.y45{ height: 45% !important; } .y50{ height: 50% !important; } .y55{ height: 55% !important; } 
.y60{ height: 60% !important; } .y65{ height: 65% !important; } .y70{ height: 70% !important; } 
.y75{ height: 75% !important; } .y80{ height: 80% !important; } .y85{ height: 85% !important; } 
.y90{ height: 90% !important; } .y95{ height: 95% !important; } .y100{ height: 100% !important; }
.f1{ flex: 0 0 1% !important; } .f2{ flex: 0 0 2% !important; } .f3{ flex: 0 0 3% !important; } 
.f4{ flex: 0 0 4% !important; } .f5{ flex: 0 0 5% !important; } .f6{ flex: 0 0 6% !important; } 
.f7{ flex: 0 0 7% !important; } .f8{ flex: 0 0 8% !important; } .f9{ flex: 0 0 9% !important; } 
.f10{ flex: 0 0 10% !important; } .f11{ flex: 0 0 11% !important; } .f12{ flex: 0 0 12% !important; } 
.f13{ flex: 0 0 13% !important; } .f14{ flex: 0 0 14% !important; } .f15{ flex: 0 0 15% !important; } 
.f16{ flex: 0 0 16% !important; } .f17{ flex: 0 0 17% !important; } .f18{ flex: 0 0 18% !important; } 
.f19{ flex: 0 0 19% !important; } .f20{ flex: 0 0 20% !important; } .f25{ flex: 0 0 25% !important; } 
.f30{ flex: 0 0 30% !important; } .f33{ flex: 0 0 33.33% !important; } .f35{ flex: 0 0 35% !important; } .f40{ flex: 0 0 40% !important; } 
.f45{ flex: 0 0 45% !important; } .f50{ flex: 0 0 50% !important; } .f55{ flex: 0 0 55% !important; } 
.f60{ flex: 0 0 60% !important; } .f65{ flex: 0 0 65% !important; } .f70{ flex: 0 0 70% !important; } 
.f75{ flex: 0 0 75% !important; } .f80{ flex: 0 0 80% !important; } .f85{ flex: 0 0 85% !important; } 
.f90{ flex: 0 0 90% !important; } .f95{ flex: 0 0 95% !important; } .f100{ flex: 0 0 100% !important; }
.x1em{ width: 1em !important; } .x2em{ width: 2em !important; } .x3em{ width: 3em !important; } 
.x4em{ width: 4em !important; } .x5em{ width: 5em !important; } .x6em{ width: 6em !important; } 
.x7em{ width: 7em !important; } .x8em{ width: 8em !important; } .x9em{ width: 9em !important; } 
.x10em{ width: 10em !important; } .x11em{ width: 11em !important; } .x12em{ width: 12em !important; } 
.x13em{ width: 13em !important; } .x14em{ width: 14em !important; } .x15em{ width: 15em !important; } 
.x16em{ width: 16em !important; } .x17em{ width: 17em !important; } .x18em{ width: 18em !important; } 
.x19em{ width: 19em !important; } .x20em{ width: 20em !important; } .x25em{ width: 25em !important; } 
.x30em{ width: 30em !important; } .x35em{ width: 35em !important; } .x40em{ width: 40em !important; } 
.x45em{ width: 45em !important; } .x50em{ width: 50em !important; } .x55em{ width: 55em !important; } 
.x60em{ width: 60em !important; } .x65em{ width: 65em !important; } .x70em{ width: 70em !important; } 
.x75em{ width: 75em !important; } .x80em{ width: 80em !important; } .x85em{ width: 85em !important; } 
.x90em{ width: 90em !important; } .x95em{ width: 95em !important; } .x100em{ width: 100em !important; }
.y1em{ height: 1em !important; } .y2em{ height: 2em !important; } .y3em{ height: 3em !important; } 
.y4{ height: 4em !important; } .y5{ height: 5em !important; } .y6{ height: 6em !important; } 
.y7{ height: 7em !important; } .y8{ height: 8em !important; } .y9{ height: 9em !important; } 
.y10{ height: 10em !important; } .y11em{ height: 11em !important; } .y12em{ height: 12em !important; } 
.y13em{ height: 13em !important; } .y14em{ height: 14em !important; } .y15em{ height: 15em !important; } 
.y16em{ height: 16em !important; } .y17em{ height: 17em !important; } .y18em{ height: 18em !important; } 
.y19em{ height: 19em !important; } .y20em{ height: 20em !important; } .y25em{ height: 25em !important; } 
.y30em{ height: 30em !important; } .y35em{ height: 35em !important; } .y40em{ height: 40em !important; } 
.y45em{ height: 45em !important; } .y50em{ height: 50em !important; } .y55em{ height: 55em !important; } 
.y60em{ height: 60em !important; } .y65em{ height: 65em !important; } .y70em{ height: 70em !important; } 
.y75em{ height: 75em !important; } .y80em{ height: 80em !important; } .y85em{ height: 85em !important; } 
.y90em{ height: 90em !important; } .y95em{ height: 95em !important; } .y100em{ height: 100em !important; }
.f1em{ flex: 0 0 1em !important; } .f2em{ flex: 0 0 2em !important; } .f3em{ flex: 0 0 3em !important; } 
.f4em{ flex: 0 0 4em !important; } .f5em{ flex: 0 0 5em !important; } .f6em{ flex: 0 0 6em !important; } 
.f7em{ flex: 0 0 7em !important; } .f8em{ flex: 0 0 8em !important; } .f9em{ flex: 0 0 9em !important; } 
.f10em{ flex: 0 0 10em !important; } .f11em{ flex: 0 0 11em !important; } .f12em{ flex: 0 0 12em !important; } 
.f13em{ flex: 0 0 13em !important; } .f14em{ flex: 0 0 14em !important; } .f15em{ flex: 0 0 15em !important; } 
.f16em{ flex: 0 0 16em !important; } .f17em{ flex: 0 0 17em !important; } .f18em{ flex: 0 0 18em !important; } 
.f19em{ flex: 0 0 19em !important; } .f20em{ flex: 0 0 20em !important; } .f21em{ flex: 0 0 21em !important; } 
.f22em{ flex: 0 0 22em !important; } .f23em{ flex: 0 0 23em !important; } .f24em{ flex: 0 0 24em !important; } 
.f25em{ flex: 0 0 25em !important; } .f26em{ flex: 0 0 26em !important; } .f27em{ flex: 0 0 27em !important; }
.f28em{ flex: 0 0 28em !important; } .f29em{ flex: 0 0 29em !important; } .f30em{ flex: 0 0 30em !important; } 
.f35em{ flex: 0 0 35em !important; } .f40em{ flex: 0 0 40em !important; } .f45em{ flex: 0 0 45em !important; } 
.f50em{ flex: 0 0 50em !important; } .f55em{ flex: 0 0 55em !important; } .f60em{ flex: 0 0 60em !important; } 
.f65em{ flex: 0 0 65em !important; } .f70em{ flex: 0 0 70em !important; } .f75em{ flex: 0 0 75em !important; } 
.f80em{ flex: 0 0 80em !important; } .f85em{ flex: 0 0 85em !important; } .f90em{ flex: 0 0 90em !important; } 
.f95em{ flex: 0 0 95em !important; } .f100em{ flex: 0 0 100em !important; }
.mh1em{ min-height: 1em !important; } .mh2em{ min-height: 2em !important; } .mh3em{ min-height: 3em !important; } 
.mh4em{ min-height: 4em !important; } .mh5em{ min-height: 5em !important; } .mh6em{ min-height: 6em !important; } 
.mh7em{ min-height: 7em !important; } .mh8em{ min-height: 8em !important; } .mh9em{ min-height: 9em !important; } 
.mh10{ min-height: 10em !important; } .mh11em{ min-height: 11em !important; } .mh12em{ min-height: 12em !important; } 
.mh13em{ min-height: 13em !important; } .mh14em{ min-height: 14em !important; } .mh15em{ min-height: 15em !important; } 
.mh16em{ min-height: 16em !important; } .mh17em{ min-height: 17em !important; } .mh18em{ min-height: 18em !important; } 
.mh19em{ min-height: 19em !important; } .mh20em{ min-height: 20em !important; } .mh25em{ min-height: 25em !important; } 
.mh30em{ min-height: 30em !important; } .mh35em{ min-height: 35em !important; } .mh40em{ min-height: 40em !important; } 
.mh45em{ min-height: 45em !important; } .mh50em{ min-height: 50em !important; } .mh55em{ min-height: 55em !important; } 
.mh60em{ min-height: 60em !important; } .mh65em{ min-height: 65em !important; } .mh70em{ min-height: 70em !important; } 
.mh75em{ min-height: 75em !important; } .mh80em{ min-height: 80em !important; } .mh85em{ min-height: 85em !important; } 
.mh90em{ min-height: 90em !important; } .mh95em{ min-height: 95em !important; } .mh100em{ min-height: 100em !important; }
.w100{ width: 100% !important; } .w80{ width: 80% !important; } .w75{ width: 75% !important; }
.w66{ width: 66.66% !important; } .w60{ width: 60% !important; } .w50{ width: 50% !important; } 
.w40{ width: 40% !important; } .w33{ width: 33.33% !important; } .w25{ width: 25% !important; } 
.w20{ width: 20% !important; } 
.vw100{ width: 100vw !important; } .vw80{ width: 80vw !important; } .vw75{ width: 75vw !important; }
.vw66{ width: 66.66vw !important; } .vw60{ width: 60vw !important; } .vw50{ width: 50vw !important; } 
.vw40{ width: 40vw !important; } .vw33{ width: 33.33vw !important; } .vw25{ width: 25vw !important; } 
.vw20{ width: 20vw !important; } 
.h100{ height: 100% !important; }
.vh100{ height: 100vh !important; } .vh80{ height: 80vh !important; } .vh75{ height: 75vh !important; }
.vh66{ height: 66.66vh !important; } .vh60{ height: 60vh !important; } .vh50{ height: 50vh !important; } 
.vh40{ height: 40vh !important; } .vh33{ height: 33.33vh !important; } .vh25{ height: 25vh !important; }
.vh20{ height: 20vh !important; } 
.h0em25{ height: .25em !important; } .h0em5{ height: .5em !important; } .h0em75{ height: .75em !important; }
.h1em25{ height: 1.25em !important; } .h1em5{ height: 1.5em !important; } .h1em75{ height: 1.75em !important; }
.h1em{ height: 1em !important; } .h2em{ height: 2em !important; } .h3em{ height: 3em !important; }
.h4em{ height: 4em !important; } .h5em{ height: 5em !important; } .h6em{ height: 6em !important; }
.h7em{ height: 7em !important; } .h8em{ height: 8em !important; } .h9em{ height: 9em !important; }
.h10em{ height: 10em !important; } .h11em{ height: 11em !important; } .h12em{ height: 12em !important; }
.h13em{ height: 13em !important; } .h14em{ height: 14em !important; } .h15em{ height: 15em !important; }
.h20em{ height: 20em !important; } .h25em{ height: 25em !important; } .h30em{ height: 30em !important; }
.h35em{ height: 35em !important; } .h40em{ height: 40em !important; } .h45em{ height: 45em !important; }
.h50em{ height: 50em !important; } .h55em{ height: 55em !important; } .h60em{ height: 60em !important; }
.w1em{ width: 1em !important; } .w2em{ width: 2em !important; } .w3em{ width: 3em !important; }
.w4em{ width: 4em !important; } .w5em{ width: 5em !important; } .w6em{ width: 6em !important; }
.w7em{ width: 7em !important; } .w8em{ width: 8em !important; } .w9em{ width: 9em !important; }
.w10em{ width: 10em !important; } .w11em{ width: 11em !important; } .w12em{ width: 12em !important; }
.w13em{ width: 13em !important; } .w14em{ width: 14em !important; } .w15em{ width: 15em !important; }
.w20em{ width: 20em !important; } .w25em{ width: 25em !important; } .w30em{ width: 30em !important; }
.w35em{ width: 35em !important; } .w40em{ width: 40em !important; } .w45em{ width: 45em !important; }
.w50em{ width: 50em !important; } .w55em{ width: 55em !important; } .w60em{ width: 60em !important; }
.hw1em{ height: 1em !important; width: 1em !important; } .hw2em{ height: 2em !important; width: 2em !important; } 
.hw3em{ height: 3em !important; width: 3em !important; } .hw4em{ height: 4em !important; width: 4em !important; } 
.hw5em{ height: 5em !important; width: 5em !important; } .hw6em{ height: 6em !important; width: 6em !important; }
.hw7em{ height: 7em !important; width: 7em !important; } .hw8em{ height: 8em !important; width: 8em !important; } 
.hw9em{ height: 9em !important; width: 9em !important; } .hw10em{ height: 10em !important; width: 10em !important; } 
.hw11em{ height: 11em !important; width: 11em !important; } .hw12em{ height: 12em !important; width: 12em !important; }
.hw13em{ height: 13em !important; width: 13em !important; } .hw14em{ height: 14em !important; width: 14em !important; } 
.hw15em{ height: 15em !important; width: 15em !important; } .hw20em{ height: 20em !important; width: 20em !important; } 
.hw25em{ height: 25em !important; width: 25em !important; } .hw30em{ height: 30em !important; width: 30em !important; }
.hw35em{ height: 35em !important; width: 35em !important; } .hw40em{ height: 40em !important; width: 40em !important; } 
.hw45em{ height: 45em !important; width: 45em !important; } .hw50em{ height: 50em !important; width: 50em !important; } 
.hw55em{ height: 55em !important; width: 55em !important; } .hw60em{ height: 60em !important; width: 60em !important; }
.fit{ flex: 0 1 0 !important; }
.fill{ flex: 1 1 0 !important; }

.rfloat{ float: right !important; } 
.lfloat{ float: left !important; } 
.mauto{ margin: auto !important; }
.table{ display: table !important; }
.tfixed{ table-layout: fixed !important; }
.cell{ display: table-cell !important; }
.vtop{ vertical-align: top !important; }
.vcenter,.vmiddle{ vertical-align: middle !important; }
.vbottom{ vertical-align: bottom !important; }
.hleft{ text-align: left !important; }
.hcenter{ text-align: center !important; margin: auto !important; }
.hright{ text-align: right; }
.hjustify{ text-align: justify; }
.vhcenter,.hvcenter{ vertical-align: middle !important; text-align: center !important; }
.mauto{ margin: auto !important; }
.ohidden{ overflow: hidden !important; }
.oauto{ overflow: auto !important; }
.oxauto{ overflow-x: auto !important; overflow-y: hidden !important; }
.oyauto{ overflow-y: auto !important; overflow-x: hidden !important; }
.tellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nowrap{ white-space: nowrap; }
.inline{ display: inline !important; }
.inblock{ display: inline-block !important; }
.grab{ cursor: grab !important; cursor: -webkit-grab !important; }
.grabbing{ cursor: grabbing !important; cursor: -webkit-grabbing !important; }

.top{ vertical-align: top !important; } .middle{ vertical-align: middle !important; } 
.bottom{ vertical-align: bottom !important; } .left{ text-align: left !important; }  
.center{ text-align: center !important; } .center>*{ margin: auto !important; }
.right{ text-align: right !important; } .justify{ text-align: justify !important; } 
.tleft{ vertical-align: top !important; text-align: left !important; } 
.tcenter{ vertical-align: top !important; text-align: center !important; } 
.tcenter>*{ margin-left: auto !important; margin-right: auto !important; } 
.tright{ vertical-align: top !important; text-align: right !important; } 
.mleft{ vertical-align: middle !important; text-align: left !important; } 
.mcenter{ vertical-align: middle !important; text-align: center !important; } 
.mcenter>*{ margin-left: auto !important; margin-right: auto !important; } 
.mright{ vertical-align: middle !important; text-align: right !important; } 
.bleft{ vertical-align: bottom !important; text-align: left !important; } 
.bcenter{ vertical-align: bottom !important; text-align: center !important; } 
.bcenter>*{ margin-left: auto !important; margin-right: auto !important; } 
.bright{ vertical-align: bottom !important; text-align: right !important; }
.contain{ background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; }
.cover{ background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; }
.fixed{ background-attachment: fixed !important; }
.astart{ align-items: flex-start !important; }
.acenter{ align-items: center !important; }
.aend{ align-items: flex-end !important; }
.jstart{ justify-content: flex-start !important; }
.jcenter{ justify-content: center !important; }
.jend{ justify-content: flex-end !important; }

/* === Widgets layers (minimals) === */

.mi-editor-view>*{ margin-bottom: var(--s4x); }
.mi-editor-view>*:last-child{ margin-bottom: 0; }
.mi-editor-view br{ display: block; content: ""; height: var(--s1x); }

@media (max-width: 1200px){
	.mi-editor-view>*{ margin-bottom: var(--s2x); }
	.mi-editor-view>*:last-child{ margin-bottom: 0; }
}

.section, section{ display: flex; flex-direction: column; width: 100%; hyphens: auto; text-align: justify; }
.section:focus, section:focus{ position: relative; z-index: 1; }
.section-center{ width: min(100%, 60em); }

.hbox{ display: flex; flex-direction: row; width: 100%; position: relative; max-width: 100%; }
.vbox{ display: flex; flex-direction: column; height: 100%; position: relative; max-width: 100%; }
.box{ display: flex; flex-direction: column; align-items: center; flex: 1 1 0; position: relative; text-align: justify; max-width: 100%; }

@media (max-width: 1200px){ 
	.box.nm{ display: none; }
	.hbox{ flex-direction: column !important; }
	.hbox.rm{ flex-direction: column-reverse !important; }
	.hbox.nm{ flex-direction: row !important; }
	.rbox{ flex-direction: column-reverse !important; }
}

.dotlist{ display: flex; flex-direction: column; padding-left: 1.125em; text-align: left; width: 100%; }
.dotlist>*{ display: list-item; }

.vlist{ display: flex; flex-direction: column; width: 100%; }
.vlist-row{ display: list-item; }
.vlist-item{ display: flex; flex-direction: column; }
.hlist{ display: flex; flex-direction: row; width: 100%; }
.hlist-row{ display: list-item; }
.hlist-item{ display: flex; flex-direction: column; }
.disclist{ list-style-type: disc; }
.disclist-row{ margin-left: calc(1em + 1px); }
.squarelist{ list-style-type: square; }
.squarelist-row{ margin-left: calc(1em + 1px); }
.circlelist{ list-style-type: circle; }
.circlelist-row{ margin-left: calc(1em + 1px); }
.imglist{ display: flex; width: 100%; }
.imglist-row{ display: block; }
.imglist-item{ display: flex; align-items: center; }
.imglist-item.hlist-item{ flex-direction: row; }

.table{ table-layout: fixed; width: 100%; }
.tcell, .td{ text-align: center; vertical-align: middle; padding: .5em .75em; border: 1px solid #dcdcdc; }
.hcell, .th{ text-align: center; vertical-align: middle; padding: .5em .75em; border: 1px solid #dcdcdc; background: #ececec; }
.bcell{ text-align: center; }

.notice{ padding: .5em .5em .5em 2.5em; background: #ececec; hyphens: auto; }
.notice{ background-repeat: no-repeat; background-position: .5em center; background-size: 1.5em 1.5em; }
.notice.success{ background-color: var(--success-background); color: var(--success-color); background-image: var(--success-icon); }
.notice.error{ background-color: var(--error-background); color: var(--error-color); background-image: var(--error-icon); }
.notice.info{ background-color: var(--info-background); color: var(--info-color); background-image: var(--info-icon); }
.notice.warning{ background-color: var(--warning-background); color: var(--warning-color); background-image: var(--warning-icon); }
.notice.question{ background-color: var(--question-background); color: var(--question-color); background-image: var(--question-icon); }

.image{ display: block; margin: 0em auto; text-align: center; line-height: 0em; }
.image:not(img){ width: 100%; }
.image>img{ height: 100%; margin: 0em auto; }

a{ display: inline-flex; cursor: pointer; transition: var(--link-transition); color: var(--link-color); font-weight: var(--link-weight); text-decoration: var(--link-decoration); }
a:hover{ cursor: pointer; color: var(--link-over-color); font-weight: var(--link-over-weight); text-decoration: var(--link-over-decoration); }
a:active{ color: var(--link-focus-color); font-weight: var(--link-focus-weight); text-decoration: var(--link-focus-decoration); }
a:focus{ color: var(--link-focus-color); font-weight: var(--link-focus-weight); text-decoration: var(--link-focus-decoration); }

.link{ display: flex; width: 100%; align-items: center; justify-content: center; cursor: pointer; }
.link{ transition: var(--link-transition); color: var(--link-color); font-weight: var(--link-weight); text-decoration: var(--link-decoration); }
.link:hover{ cursor: pointer; color: var(--link-over-color); font-weight: var(--link-over-weight); text-decoration: var(--link-over-decoration); }
.link:focus{ color: var(--link-focus-color); font-weight: var(--link-focus-weight); text-decoration: var(--link-focus-decoration); }

.barcode{ display: block; margin: 0em auto; text-align: center; line-height: 0em; justify-content: center; }
.barcode>img{ height: 100%; margin: 0em auto; }