/*----------NORMALIZER----------*/
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, button, canvas,caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
input, textarea, [contenteditable="true"], button {
    outline: none;
}
input[type="text"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid inherit;
}
body, html {
    font-size: 100%;
    width: 100%;
    min-height: 100vh;
    /* Safari/Chrome, other WebKit Non somma padding, border e margin */
    /* Firefox, other Gecko Non somma padding, border e margin */
    box-sizing: border-box;
    /* Opera/IE 8+ Non somma padding, border e margin */
}
*{ margin: 0; }
*, *:before, *:after {
    -ms-box-sizing: inherit;
    -o-box-sizing: inherit;
    box-sizing: inherit;
    -webkit-tap-highlight-color: transparent;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button, input[type="number"],
input[type="date"] {
    -webkit-appearance: none; /* Rimuove lo stile su Safari */
    -moz-appearance: textfield; /* Rimuove lo stile su Firefox */
    appearance: none; /* Generico */
}
*:disabled, a[disabled] { color: initial; }
a[disabled]{ pointer-events: none; }
.text-ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[type="file"], .upload_preview_tmp,
input[type="date"]::-webkit-calendar-picker-indicator
{
    display: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: 5000s ease-in-out 0s;
    -webkit-transition: 5000s ease-in-out 0s;
    -moz-transition: 5000s ease-in-out 0s;
    -ms-transition: 5000s ease-in-out 0s;
    -o-transition: 5000s ease-in-out 0s;
}

.main_cont{min-height: 100vh;}

/*----------ACCESSIBILITÀ----------*/
.sr-only-label {
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}
*:focus-visible, .inputArea:has(input:focus-visible) .inputCont {
    border-radius: .25rem;
    -webkit-border-radius: .25rem;
    -moz-border-radius: .25rem;
    -ms-border-radius: .25rem;
    -o-border-radius: .25rem;
    transition: box-shadow .2s ease;
    -webkit-transition: box-shadow 0.2s ease;
    -moz-transition: box-shadow 0.2s ease;
    -ms-transition: box-shadow 0.2s ease;
    -o-transition: box-shadow 0.2s ease;
}
/*Per elementi nascosti ma da leggere con gli screen-reader*/
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
}
/*----------VARIABILI----------*/
:root{
    /*Spazi*/
    --space-xxs: .25rem; /* 4px */
    --space-xs: .5rem; /* 8px */
    --space-sm: 1rem;   /* 16px */
    --space-md: 2rem;   /* 32px */
    --space-lg: 3rem;   /* 48px */
    --space-xl: 3.5rem;   /* 56px */
    --space-xxl: 4rem;   /* 64px */
    --body-offset: 4rem;
    --offset-max-cont-w: 0%;
    --offset-max-cont-rem: 90rem;
    --offset-max-cont: calc(((100vw) - var(--offset-max-cont-rem)) / 2);
    /*Grids*/
    --gap-r: 1rem;
    --gap-c: 1rem;
    /*Elevazione ombra*/
    --elev-0-bs-offset-x: 0;
    --elev-0-bs-offset-y: 0;
    --elev-0-bs-blur: 0;
    --elev-0-bs-spread: 0;
    --elev-0-bs-color: currentColor;
    --bs-el-0: 0 0 0;
    --bs-el-1: 0 .0625rem .125rem;
    --bs-el-2: 0 0.125rem .25rem;
    --bs-el-3: 0 .25rem 0.5rem;
    /*Scrollbar*/
    --scrollbar_w: .313rem;
    --scrollbar_r: .625rem;
    /*Pulsanti*/
    --btnH: 2.5rem;
    --btnH-dense: var(--btnH);
    --btnOutlined: .0625rem;
    --btnPad: 1.5rem;
    --btn-icon-size: 1.5rem;
    --btn-icon-size-big: 2.25rem;
    --btn-segm-border: .0625rem;
    /*Text*/
    --p-marginT: var(--space-sm);
    /*Avatar*/
    --avatarH: 2.5rem;
    /*Badge*/
    --badge-sm-h: .375rem;
    --badge-h: 1rem;
    /*Indicatori progresso*/
    --progr_circ_w: 2.5rem;
    --progr_stroke_w: .25rem;
    --stroke_linecap: round;
    --progr_perc: 0%;
    /*
    --progr_indicator_w: 2.5rem;
    --progr_stroke_width: .25rem;
    --progr_perc: 5;
    --progr_circle: 18;
    --progr_circle_dasharray: 2 * 3.14 * raggio
    --progr_circle_dashoffset: valore dasharray * ((100 - perc_completamento)/100)
    */
    /*Campi*/
    --checkbox-h: 1.125rem;
    --checkbox-area-h: 2.5rem;
    --chip-h: 2rem;
    --input-h: 3.5rem;
    --textarea-h: 100%;
    --hlpCont-h: 1.5rem;
    --menuEl-h: 3rem;
    --inputSlider-h: 1rem;
    --inputSlider-handle_w: 0.25rem;
    --inputSlider-handle_h: 2.75rem;
    --inputSlider-handle_val_px: 1rem;
    --inputSlider-handle_val_py: .75rem;
    --inputSlider-handle_val_my: .25rem;
    --track-margin: .375rem;
    --track_bar_w: 0;
    /*Timepicker*/
    --dial-w: 16rem;
    --dial-mt: 2.25rem;
    --dial-num: 3rem;
    /*Snackbar*/
    --snk-bottom: 0;
    /*Carosello*/
    --carousel_progress_w: 0%;

    --indicatorH: 2rem;
    --indicatorH-r: 3.5rem;
    --bab-h: 5rem;
    /*Tabs*/
    --tab_pr_indicatorH: .25rem;
    --tab_sc_indicatorH: .125rem;
    --tab_pr_H: 4rem;
    --tab_sc_H: 3rem;
    --tab_scroll_offset: 3.25rem;
    /*Tabelle*/
    --col_w: inherit;
    --tb_body_h: auto;
    /*Navigation*/
    --nav-drawer-w: 22.5rem;
    --nav-position-top: 0;
    /*Transizioni*/
    --transition-standard: .2s ease all;
    /*Parallasse*/
    --progress: 0; /* percentuale di avanzamento dell’elemento */
    --speed: 1; /* fattore di velocità (default) */
    --effect: 0; /* progress * speed */
    --target_viewport: 100; /* Target predefinito di completamento (in % viewport) di default l’effetto si completa al 100% */
    --normalized_parallax: calc((var(--effect) / var(--speed)) / var(--target_viewport)); /* Valore normalizzato (0–1) */
    /*Default*/
    --transparent: transparent;
    --initial: initial;
    --inherit: inherit;
}

/*----------TXT, ICONS & FONTS----------*/
.alL{ text-align: left; }
.alC{ text-align: center; }
.alR{ text-align: right; }
.alJ{ text-align: justify; }
br.noBreak{display: none;}
br.break{display: static;}
p:not(p:only-of-type, p:first-of-type){
    margin-top: var(--p-marginT);
}

.btn i[class^="icon-"], .tab_index i[class^="icon-"]{
    position: relative;
    top: .125rem;
}

.icon.md, .icon.md i{
    font-size: var(--btn-icon-size);
    height: var(--btn-icon-size);
}
/*----------BODY----------*/
/*-----SPAZIATURE-----*/
.body-offset{ padding-top: var(--body-offset); }
/* Padding */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* Padding per direzioni specifiche */
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

/* Padding individuale */
.pt-xs { padding-top: var(--space-xs); }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }

.pb-xs { padding-bottom: var(--space-xs); }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }

.pl-xs { padding-left: var(--space-xs); }
.pl-sm { padding-left: var(--space-sm); }
.pl-md { padding-left: var(--space-md); }
.pl-lg { padding-left: var(--space-lg); }

.pr-xs { padding-right: var(--space-xs); }
.pr-sm { padding-right: var(--space-sm); }
.pr-md { padding-right: var(--space-md); }
.pr-lg { padding-right: var(--space-lg); }

/* Rimozione padding */
.p-0 { padding: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }

/* Margin */
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }

/* Margin per direzioni specifiche */
.mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
.mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
.mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
.mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

.my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
.my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
.my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
.my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

/* Margin individuale */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.ml-lg { margin-left: var(--space-lg); }

.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.mr-lg { margin-right: var(--space-lg); }

/* Rimozione margin */
.m-0 { margin: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }

/*-----LARGHEZZA-----*/
.w-0   { --w: 0%; width: var(--w); }
.w-5   { --w: 5%; width: var(--w); }
.w-10  { --w: 10%; width: var(--w); }
.w-15  { --w: 15%; width: var(--w); }
.w-20  { --w: 20%; width: var(--w); }
.w-25  { --w: 25%; width: var(--w); }
.w-30  { --w: 30%; width: var(--w); }
.w-35  { --w: 35%; width: var(--w); }
.w-40  { --w: 40%; width: var(--w); }
.w-45  { --w: 45%; width: var(--w); }
.w-50  { --w: 50%; width: var(--w); }
.w-55  { --w: 55%; width: var(--w); }
.w-60  { --w: 60%; width: var(--w); }
.w-65  { --w: 65%; width: var(--w); }
.w-70  { --w: 70%; width: var(--w); }
.w-75  { --w: 75%; width: var(--w); }
.w-80  { --w: 80%; width: var(--w); }
.w-85  { --w: 85%; width: var(--w); }
.w-90  { --w: 90%; width: var(--w); }
.w-95  { --w: 95%; width: var(--w); }
.w-100 { --w: 100%; width: var(--w); }

.w-vw-0   { --w: 0vw; width: var(--w); }
.w-vw-5   { --w: 5vw; width: var(--w); }
.w-vw-10  { --w: 10vw; width: var(--w); }
.w-vw-15  { --w: 15vw; width: var(--w); }
.w-vw-20  { --w: 20vw; width: var(--w); }
.w-vw-25  { --w: 25vw; width: var(--w); }
.w-vw-30  { --w: 30vw; width: var(--w); }
.w-vw-35  { --w: 35vw; width: var(--w); }
.w-vw-40  { --w: 40vw; width: var(--w); }
.w-vw-45  { --w: 45vw; width: var(--w); }
.w-vw-50  { --w: 50vw; width: var(--w); }
.w-vw-55  { --w: 55vw; width: var(--w); }
.w-vw-60  { --w: 60vw; width: var(--w); }
.w-vw-65  { --w: 65vw; width: var(--w); }
.w-vw-70  { --w: 70vw; width: var(--w); }
.w-vw-75  { --w: 75vw; width: var(--w); }
.w-vw-80  { --w: 80vw; width: var(--w); }
.w-vw-85  { --w: 85vw; width: var(--w); }
.w-vw-90  { --w: 90vw; width: var(--w); }
.w-vw-95  { --w: 95vw; width: var(--w); }
.w-vw-100 { --w: 100vw; width: var(--w); }

.coln-1   { --w: calc(100% / 1); width: var(--w); }
.coln-2   { --w: calc(100% / 2); width: var(--w); }
.coln-3   { --w: calc(100% / 3); width: var(--w); }
.coln-4   { --w: calc(100% / 4); width: var(--w); }
.coln-5   { --w: calc(100% / 5); width: var(--w); }
.coln-6   { --w: calc(100% / 6); width: var(--w); }
.coln-7   { --w: calc(100% / 7); width: var(--w); }
.coln-8   { --w: calc(100% / 8); width: var(--w); }
.coln-9   { --w: calc(100% / 9); width: var(--w); }
.coln-10  { --w: calc(100% / 10); width: var(--w); }
.coln-11  { --w: calc(100% / 11); width: var(--w); }
.coln-12  { --w: calc(100% / 12); width: var(--w); }

/*-----ALTEZZA-----*/
.h-0   { --h: 0%; height: var(--h); }
.h-5   { --h: 5%; height: var(--h); }
.h-10  { --h: 10%; height: var(--h); }
.h-15  { --h: 15%; height: var(--h); }
.h-20  { --h: 20%; height: var(--h); }
.h-25  { --h: 25%; height: var(--h); }
.h-30  { --h: 30%; height: var(--h); }
.h-35  { --h: 35%; height: var(--h); }
.h-40  { --h: 40%; height: var(--h); }
.h-45  { --h: 45%; height: var(--h); }
.h-50  { --h: 50%; height: var(--h); }
.h-55  { --h: 55%; height: var(--h); }
.h-60  { --h: 60%; height: var(--h); }
.h-65  { --h: 65%; height: var(--h); }
.h-70  { --h: 70%; height: var(--h); }
.h-75  { --h: 75%; height: var(--h); }
.h-80  { --h: 80%; height: var(--h); }
.h-85  { --h: 85%; height: var(--h); }
.h-90  { --h: 90%; height: var(--h); }
.h-95  { --h: 95%; height: var(--h); }
.h-100 { --h: 100%; height: var(--h); }

.h-min-100     { min-height: 100vh; }

.h-vh-0   { --h: 0vh; height: var(--h); }
.h-vh-5   { --h: 5vh; height: var(--h); }
.h-vh-10  { --h: 10vh; height: var(--h); }
.h-vh-15  { --h: 15vh; height: var(--h); }
.h-vh-20  { --h: 20vh; height: var(--h); }
.h-vh-25  { --h: 25vh; height: var(--h); }
.h-vh-30  { --h: 30vh; height: var(--h); }
.h-vh-35  { --h: 35vh; height: var(--h); }
.h-vh-40  { --h: 40vh; height: var(--h); }
.h-vh-45  { --h: 45vh; height: var(--h); }
.h-vh-50  { --h: 50vh; height: var(--h); }
.h-vh-55  { --h: 55vh; height: var(--h); }
.h-vh-60  { --h: 60vh; height: var(--h); }
.h-vh-65  { --h: 65vh; height: var(--h); }
.h-vh-70  { --h: 70vh; height: var(--h); }
.h-vh-75  { --h: 75vh; height: var(--h); }
.h-vh-80  { --h: 80vh; height: var(--h); }
.h-vh-85  { --h: 85vh; height: var(--h); }
.h-vh-90  { --h: 90vh; height: var(--h); }
.h-vh-95  { --h: 95vh; height: var(--h); }
.h-vh-100 { --h: 100vh; height: var(--h); }

.h-min-vh-100 { min-height: 100vh; }


.divider{
    width: 100%;
    margin: .5rem 0;
    border: solid .0625rem;
}
/*-----FLEXBOX-----*/
/* Flex Container */
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.grid-nowrap { grid-auto-flow:column; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.align-end { align-items: flex-end; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }

/* Align Self */
.align-self-start { align-self: flex-start; }
.align-self-center { align-self: center; }
.align-self-end { align-self: flex-end; }
.align-self-baseline { align-self: baseline; }
.align-self-stretch { align-self: stretch; }

/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-column { flex-direction: column; }
.flex-column-reverse { flex-direction: column-reverse; }

/* Flex Wrap */
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Flex Item */
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }

.flex-basis-auto { flex-basis: auto; }
.flex-basis-100 { flex-basis: 100%; }
.flex-basis-50 { flex-basis: 50%; }
.flex-basis-25 { flex-basis: 25%; }

/* Rimozione di flex */
.flex-0 { display: none; }

/*-----GRIGLIE-----*/
.d-grid { display: grid; }
.d-inline-grid { display: inline-grid; }

.grid-nowrap { grid-auto-flow:column; }
/*Colonne*/
.grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
.grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
.grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
.grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
.grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
.grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

.grid-cols-auto     { grid-template-columns: auto; }
.grid-cols-min      { grid-template-columns: min-content; }
.grid-cols-max      { grid-template-columns: max-content; }

.grid-cols-fr-1     { grid-template-columns: 1fr; }
.grid-cols-fr-2     { grid-template-columns: 2fr 1fr; }
.grid-cols-fr-3     { grid-template-columns: 1fr 2fr; }

.grid-cols-minmax   { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.grid-cols-none     { grid-template-columns: none; }

/*Gap*/
/* Gap full (entrambe le direzioni) */
.gap-xxs { gap: var(--space-xxs); }
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }
.gap-xl  { gap: var(--space-xl); }
.gap-xxl { gap: var(--space-xxl); }

/* Gap solo orizzontale (column-gap) */
.gap-x-xxs { column-gap: var(--space-xxs); }
.gap-x-xs  { column-gap: var(--space-xs); }
.gap-x-sm  { column-gap: var(--space-sm); }
.gap-x-md  { column-gap: var(--space-md); }
.gap-x-lg  { column-gap: var(--space-lg); }
.gap-x-xl  { column-gap: var(--space-xl); }
.gap-x-xxl { column-gap: var(--space-xxl); }

/* Gap solo verticale (row-gap) */
.gap-y-xxs { row-gap: var(--space-xxs); }
.gap-y-xs  { row-gap: var(--space-xs); }
.gap-y-sm  { row-gap: var(--space-sm); }
.gap-y-md  { row-gap: var(--space-md); }
.gap-y-lg  { row-gap: var(--space-lg); }
.gap-y-xl  { row-gap: var(--space-xl); }
.gap-y-xxl { row-gap: var(--space-xxl); }

/* Allineamento orizzontale elementi in Grid (inline dentro le celle) */
.justify-items-start    { justify-items: start; }
.justify-items-center   { justify-items: center; }
.justify-items-end      { justify-items: end; }
.justify-items-stretch  { justify-items: stretch; }

/* Allineamento verticale elementi in Grid (inline dentro le celle) */
.align-items-start      { align-items: start; }
.align-items-center     { align-items: center; }
.align-items-end        { align-items: end; }
.align-items-stretch    { align-items: stretch; }

/* Distribuzione spazio lungo l'asse principale (utile in Flex/Grid) */
.justify-start      { justify-content: flex-start; }
.justify-center     { justify-content: center; }
.justify-end        { justify-content: flex-end; }
.justify-between    { justify-content: space-between; }
.justify-around     { justify-content: space-around; }
.justify-evenly     { justify-content: space-evenly; }

/* Distribuzione spazio lungo l'asse trasversale (utile in Flex) */
.align-start        { align-content: flex-start; }
.align-center       { align-content: center; }
.align-end          { align-content: flex-end; }
.align-between      { align-content: space-between; }
.align-around       { align-content: space-around; }
.align-stretch      { align-content: stretch; }

/*Posizionamento elementi singoli*/
.place-self-start     { place-self: start; }
.place-self-end       { place-self: end; }
.place-self-center    { place-self: center; }
.place-self-stretch   { place-self: stretch; }

.align-self-start     { align-self: flex-start; }
.align-self-center    { align-self: center; }
.align-self-end       { align-self: flex-end; }
.align-self-stretch   { align-self: stretch; }

.justify-self-start   { justify-self: start; }
.justify-self-end     { justify-self: end; }
.justify-self-center  { justify-self: center; }
.justify-self-stretch { justify-self: stretch; }

/* Column span (da usare su item in griglia) */
.col-span-1  { grid-column: span 1 / span 1; }
.col-span-2  { grid-column: span 2 / span 2; }
.col-span-3  { grid-column: span 3 / span 3; }
.col-span-4  { grid-column: span 4 / span 4; }
.col-span-5  { grid-column: span 5 / span 5; }
.col-span-6  { grid-column: span 6 / span 6; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Column start / end */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-end-1    { grid-column-end: 1; }
.col-end-2    { grid-column-end: 2; }
.col-end-3    { grid-column-end: 3; }
.col-end-4    { grid-column-end: 4; }

/* Row span */
.row-span-1  { grid-row: span 1 / span 1; }
.row-span-2  { grid-row: span 2 / span 2; }
.row-span-3  { grid-row: span 3 / span 3; }
.row-span-4  { grid-row: span 4 / span 4; }

/* Row start / end */
.row-start-1  { grid-row-start: 1; }
.row-start-2  { grid-row-start: 2; }
.row-start-3  { grid-row-start: 3; }
.row-end-1    { grid-row-end: 1; }
.row-end-2    { grid-row-end: 2; }
.row-end-3    { grid-row-end: 3; }


/*-----VISIBILITA-----*/
.d-block{ display: block; }
.d-inline-block{ display: inline-block; }
.d-none{ display: none; }

/*-----INTERAZIONI-----*/
.opt:hover,
.triggerUrl:hover,
.btn,
.bniBtn, .navRailBtn,
.upload_trigger,
.dial_mode,
.dial .num,
.tab_index,
[data-dropdown_trigger]{
    cursor: pointer;
}
.opt[disabled], .btn:disabled, [disabled] .btn,
.cardArea[disabled] .card,
.menuEl[disabled],
.tab_index[disabled]{
    cursor: var(--initial);
}

.noSelect,
.btn,
.bniBtn, .navRailBtn,
.optArea .opt,
.chip,
.menuEl,
.drSlider,
.snkAreaList,
.dial,
.tab_index {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.noScroll{
    overflow: hidden;
}
/*-----POSIZIONAMENTO-----*/
.sticky_el{
    position: sticky;
}

/*----------COMPONENTI----------*/
/*-----SCROLLBAR-----*/
::-webkit-scrollbar { width: var(--scrollbar_w); }
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
    border-radius: var(--scrollbar_r);
    -webkit-border-radius: var(--scrollbar_r);
    -moz-border-radius: var(--scrollbar_r);
    -ms-border-radius: var(--scrollbar_r);
    -o-border-radius: var(--scrollbar_r);
}
/*-----MAPPA-----*/
.map{
    z-index: 0;
}
/*-----CARDS-----*/
/*
.cardsBox{
    grid-gap: var(--gap-r) var(--gap-c);
}
.cardsBox .cardArea{
    width: calc(var(--w) - var(--gap-c));
    min-width: calc(var(--w) - var(--gap-c));
}
*/
/*-----INDICATORI PROGRESSO-----*/
.progress.linear{
    height: 0;
    overflow: hidden;
    position: relative;
}
.progress.linear.active{
    height: var(--progr_stroke_w);
}
.progress.linear, .progress.linear .bar, .progress.linear .stop{
    border-radius: var(--progr_stroke_w);
    -webkit-border-radius: var(--progr_stroke_w);
    -moz-border-radius: var(--progr_stroke_w);
    -ms-border-radius: var(--progr_stroke_w);
    -o-border-radius: var(--progr_stroke_w);
}
.progress.linear .bar, .progress.linear .stop{
    position: absolute;
    top: 0;
    height: var(--progr_stroke_w);
}
.progress.linear .bar{
    left: 0;
    width: var(--progr_perc);
}
.progress.linear .stop{
    right: 0;
    width: var(--progr_stroke_w);
}
.progress.linear.ind .bar:first-of-type{
    animation: progr_lin_ind ease-in-out 3s infinite;
    -webkit-animation: progr_lin_ind ease-in-out 3s infinite;
}
.progress.linear.ind .bar:last-of-type{
    animation: progr_lin_ind ease-in-out 3s infinite;
    -webkit-animation: progr_lin_ind ease-in-out 3s infinite;
    animation-delay: 1.5s;
}
.progress.circ, .progress.circ svg{
    width: var(--progr_circ_w);
    height: var(--progr_circ_w);
}
.progress.circ circle{
    --progr_circ_r: calc((var(--progr_circ_w) / 2) - var(--progr_stroke_w));
    fill: none;
    r: var(--progr_circ_r);
    cx: calc((var(--progr_circ_w) / 2));
    cy: calc((var(--progr_circ_w) / 2));
    stroke-width: var(--progr_stroke_w);
}
.progress.circ circle.track, .progress.circ circle.bar{
    --stroke_dasharray: calc(2 * 3.14 * calc(var(--progr_circ_r)));
    --stroke_dashoffset: calc(var(--stroke_dasharray) * ((100 - var(--progr_perc))/100));
    stroke-width: 0;
    stroke-linecap: var(--stroke_linecap);
    stroke-linejoin: var(--stroke_linecap);
    stroke-dasharray: var(--stroke_dasharray);
}
.progress.circ.active circle.track, .progress.circ.active circle.bar{
    stroke-width: var(--progr_stroke_w);
}
.progress.circ circle.bar{
    stroke-dashoffset: var(--stroke_dashoffset);
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform-origin: center;
}
.progress.circ.ind circle.bar{
    animation: progr_circ_ind linear 1.5s infinite;
    -webkit-animation: progr_circ_ind linear 1.5s infinite;
}

/*-----SFONDI-----*/
.overlay{
    width: 100%;
    height: 100%;
}

/*-----AVATAR-----*/
.avatar{
    width: var(--avatarH);
    height: var(--avatarH);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.avatar.r{
    border-radius: var(--avatarH);
    -webkit-border-radius: var(--avatarH);
    -moz-border-radius: var(--avatarH);
    -ms-border-radius: var(--avatarH);
    -o-border-radius: var(--avatarH);
}
.avatar.xs{
    --avatarH: 1.5rem;
}
.avatar.s{
    --avatarH: 3.5rem;
}
/*-----BADGE-----*/
[data-badge_sm], [data-badge]{
    position: relative;
    visibility: visible;
    opacity: 1;
}
[data-badge_sm]:after, [data-badge]:after{
    position: absolute;
    display: inline-block;
    text-align: center;
    top: 0;
    right: 0;
    font-size: var(--capt);
}
[data-badge]:after{
    content: attr(data-badge);
}
[data-badge_sm]:after{
    content: "";
}
[data-badge_sm]:after{
    top: 0;
    right: 0;
    width: var(--badge-sm-h);
    height: var(--badge-sm-h);
    border-radius: var(--badge-sm-h);
    -webkit-border-radius: var(--badge-sm-h);
    -moz-border-radius: var(--badge-sm-h);
    -ms-border-radius: var(--badge-sm-h);
    -o-border-radius: var(--badge-sm-h);
}
[data-badge]:after{
    height: var(--badge-h);
    min-width: var(--badge-h);
    max-width: 2.125rem;
    line-height: calc(var(--badge-h) - .0625rem);
    border-radius: var(--badge-h);
    -webkit-border-radius: var(--badge-h);
    -moz-border-radius: var(--badge-h);
    -ms-border-radius: var(--badge-h);
    -o-border-radius: var(--badge-h);
    padding: 0 .25rem;
    transform: translate(calc(50% - .125rem), -.125rem);
    -webkit-transform: translate(calc(50% - .125rem), -.125rem);
    -moz-transform: translate(calc(50% - .125rem), -.125rem);
    -ms-transform: translate(calc(50% - .125rem), -.125rem);
    -o-transform: translate(calc(50% - .125rem), -.125rem);
}
[data-badge_sm=""]:after, [data-badge_sm="0"]:after, [data-badge=""]:after, [data-badge="0"]:after{
    visibility: hidden;
    opacity: 0;
}

/*-----BTN-----*/
.btn, .btn.txt, .btn.tonal, .btn.filled, .btn.elevated{
    border: none;
}
.btn{
    display: inline-block;
    height: var(--btnH);
    line-height: var(--btnH);
    text-align: center;
}
.btn.sm{
    width: var(--btnH);
    min-width: var(--btnH);
    height: var(--btnH);
    line-height: var(--btn-icon-size);
    margin: .25rem;
}
.btn.r{
    border-radius: calc(var(--btnH) / 2);
    -webkit-border-radius: calc(var(--btnH) / 2);
    -moz-border-radius: calc(var(--btnH) / 2);
    -ms-border-radius: calc(var(--btnH) / 2);
    -o-border-radius: calc(var(--btnH) / 2);
}
.btn.lg i{
    font-size: 18px;
    font-size: 1.125rem;
}
.btn.sm i{
    font-size: var(--btn-icon-size);
}
.btn.icon.sx i,
.segBtn .btn.icon.sx .iconBox{
    padding-right: .5rem;
}
.btn.icon.dx i{
    padding-left: .5rem;
}
.btn.lg.txt:not(.btn.lg.icon){
    padding: 0 .75rem;
}
.btn.lg.outlined:not(.btn.lg.icon), .btn.lg.tonal:not(.btn.lg.icon), .btn.lg.filled:not(.btn.lg.icon), .btn.lg.elevated:not(.btn.lg.icon){
    padding: 0 1.5rem;
}
.btn.lg.outlined.icon.sx, .btn.lg.tonal.icon.sx, .btn.lg.filled.icon.sx, .btn.lg.elevated.icon.sx,
.segBtn .opt{
    padding: 0 1.5rem 0 1rem;
}
.btn.lg.outlined.icon.dx, .btn.lg.tonal.icon.dx, .btn.lg.filled.icon.dx, .btn.lg.elevated.icon.dx,
.segBtn .opt .btn.icon.dx .check{
    padding: 0 1rem 0 1.5rem;
}
.btn.lg.txt.icon.sx{
    padding: 0 1rem 0 .75rem;
}
.btn.lg.txt.icon.dx{
    padding: 0 .75rem 0 1rem;
}
.btn.outlined,
.cardArea.outlined .card{
    border: solid var(--btnOutlined);
}
.btn.lg.outlined{
    line-height: calc(var(--btnH) - calc(var(--btnOutlined) * 2));
}
.btn.txt:disabled, .btn.outlined:disabled,
.opt[disabled],
.cardArea.outlined[disabled] .card,
.listEl[disabled],
.chipArea[disabled],
.menuEl[disabled]{
    opacity: .38;
}
.btn.tonal:disabled, .btn.filled:disabled, .btn.elevated:disabled,
.cardArea.filled[disabled] .card, .cardArea.elev[disabled] .card{
    opacity: .12;
}

/*-----FAB-----*/
.fab, .fabArea{
    margin: 0 1rem 1rem 0;
}
.fab.sm i,.fab.s i, .fab.ext i{
    font-size: var(--btn-icon-size);
}
.fab.s, .fab.ext{
    line-height: 3.5rem;
    height: 3.5rem;
}
.fab.s, .scrolled .fab.ext{
    width: 3.5rem;
}
.fab.ext{
    min-width: 5rem;
}
.scrolled .fab.ext{
    min-width: initial;
    padding: 0;
}
.fab.l{
    width: 6rem;
    height: 6rem;
}
.fab.l i{
    font-size: var(--btn-icon-size-big);
}
.fab.s i[class^="icon-"], .fab.l i[class^="icon-"], .fab.ext i[class^="icon-"]{
    top: .3125rem;
}
.fab.ext i{
    padding: 0 .5rem 0 1rem;
}
.fab.ext span:not(.ripple){
    padding-right: 1.5rem;
    overflow-x: hidden;
    visibility: visible;
    opacity: 1;
}
.scrolled .fab.ext span:not(.ripple){
    width: 0;
    visibility: hidden;
    opacity: 0;
}
.fabArea{
    display: inline-block;
    text-align: center;
}
.fabArea .fab{
    margin: 0;
}
.fabArea.active .fabCtrl{
    margin-top: 1rem;
}
.fabArea.active .fabAct .fab{
    margin: .5rem 0;
}
.fabArea.actions .fabActBox{
    height: 0;
    overflow-y: hidden;
}
.fabArea.actions.active .fabActBox{
    height: auto;
}

/*-----SEGMENTED BTN-----*/
.segBtn, .segBtn .opt .check, .segBtn .iconBox{
    display: inline-block;
}
.segBtn .opt{
    border: solid var(--btn-segm-border);
    margin-right: calc(var(--btn-segm-border) * -1);
}
.segBtn .opt .check:not(.segBtn .opt .iconBox .check){
    overflow-x: hidden;
    width: 0;
}
.segBtn .opt.checked .check:not(.segBtn .opt.checked .iconBox .check){
    width: 1.5rem;
}
.segBtn .opt i{
    top: .1875rem;
}
.segBtn .iconBox i{
    position: absolute;
    padding-right: 0;
    left: 0;
}
.segBtn .iconBox {
    position: relative;
    width: 1.5rem;
    height: 1.125rem;
}
.segBtn .opt.checked .check:not(.segBtn .opt.checked .iconBox .check),
.segBtn .opt .iconBox .icon, .segBtn .opt.checked .iconBox .check{
    visibility: visible;
    opacity: 1;
}
.segBtn .opt .check:not(.segBtn .opt .iconBox .check),
.segBtn .iconBox .check, .segBtn .opt.checked .iconBox .icon{
    visibility: hidden;
    opacity: 0;
}

/*-----CHECKBOX, RADIO, CHIPS & SWITCH-----*/
[type="checkbox"], [type="radio"]{
    display: none;
}
.checkbox .opt, .radio .opt, .switch .opt{
    display: inline-block;
}
.checkbox .box, .radio .box{
    width: var(--checkbox-h);
    height: var(--checkbox-h);
    min-width: var(--checkbox-h);
    line-height: var(--checkbox-h);
    text-align: center;
}
.radio .box{
    border-radius: var(--checkbox-h);
    -webkit-border-radius: var(--checkbox-h);
    -moz-border-radius: var(--checkbox-h);
    -ms-border-radius: var(--checkbox-h);
    -o-border-radius: var(--checkbox-h);
}
.checkbox .boxCont, .radio .boxCont{
    position: relative;
    z-index: 1;
    height: var(--checkbox-h);
    padding-left: 0;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.checkbox .boxCont:after, .radio .boxCont:after{
    position: absolute;
    content: "";
    top: calc((var(--checkbox-h) - var(--checkbox-area-h)) / 2);
    left: calc((var(--checkbox-h) - var(--checkbox-area-h)) / 2);
    width: var(--checkbox-area-h);
    height: var(--checkbox-area-h);
    border-radius: 100%;
    z-index: -1;
}
.optEl .labelBox{
    padding: calc((2.5rem - var(--checkbox-h)) / 2);
}
.checkbox .boxCont, .radio .boxCont{
    margin-top: calc((2.5rem - var(--checkbox-h)) / 2);
    margin-right: calc((2.5rem - var(--checkbox-h)) / 2);
    margin-bottom: calc((2.5rem - var(--checkbox-h)) / 2);
}
.radio .box .icon {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: .75rem;
    height: .75rem;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
}
.chip .icon{
    overflow-x: hidden;
    width: 0;
    font-size: 1.125rem;
}
.chip.checked .icon{
    width: 1.125rem;
}
.checkbox .box .icon, .radio .box .icon,
.checkbox .boxCont:after, .radio .boxCont:after,
.checkbox .opt[disabled] .boxCont:hover:after, .radio .opt[disabled] .boxCont:hover:after,
.chip .icon,
.switch .boxCont .icon{
    visibility: hidden;
    opacity: 0;
}
.checkbox .opt.checked .box .icon, .radio .opt.checked .box .icon,
.checkbox .boxCont:hover:after, .radio .boxCont:hover:after,
.chip.checked .icon,
.switch .opt.checked .boxCont .icon{
    visibility: visible;
    opacity: 1;
}
.chipBox{
    display: inline-block;
}
.chip, .switch .boxCont{
    height: var(--chip-h);
}
.chip, .chip .label{
    padding: 0 .5rem;
}
.switch .boxCont{
    position: relative;
    width: 3.25rem;
    border-radius: var(--chip-h);
    -webkit-border-radius: var(--chip-h);
    -moz-border-radius: var(--chip-h);
    -ms-border-radius: var(--chip-h);
    -o-border-radius: var(--chip-h);
}
.switch .boxCont .box {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

/*-----CAMPI-----*/
.input input,
.input textarea{
    z-index: 0;
    border: none;
    padding: 0;
    resize: none;
}
.inputArea.edit textarea{
    display: none;
}
.input input,
.input textarea,
.input [contenteditable],
.input .affixEl,
.inputArea .inputCont,
.inputCont .iconArea i[class^="icon-"],
.menu .menuEl [class^="icon-"]{
    position: relative;
}
.inputArea [contenteditable]{
    overflow-y: auto;
}
.inputArea .input,
.inputArea input,
.inputArea textarea,
.inputArea [contenteditable],
.inputArea .inputBox .hlp,
.inputArea .inputBorder,
.inputBorder .line:nth-of-type(2):after,
.inputBorder .line:nth-of-type(3){
    width: 100%;
}
.inputArea .iconBox,
.inputArea .input,
.inputArea .input.textarea,
.input input,
.inputArea .affix,
.inputBorder,
.inputBorder .line,
.inputBorder .line:nth-of-type(2),
.inputBorder .line:nth-of-type(2):after,
.inputArea.datepicker .date,
.inputArea.datepicker .date_param,
.inputArea.datepicker .date input{
    height: 100%;
}
.inputArea textarea, .inputArea [contenteditable]{
    height: var(--textarea-h);
}
.inputArea.dense{
    --input-h: 3rem;
}
.tb .inputArea.dense{
    --input-h: 2.5rem;
}
.inputCont{
    height: var(--input-h);
}
.inputCont .iconArea{
    font-size: var(--btn-icon-size);
    line-height: var(--input-h);
}
.inputCont .iconArea:first-of-type{
    padding-left: .75rem;
}
.inputCont .iconArea:last-of-type{
    padding-right: .75rem;
}
.inputCont .iconArea i[class^="icon-"],
.menu .menuEl [class^="icon-"]{
    top: .125rem;
    z-index: 1;
}
.psw-icon{
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}
.psw-icon i{
    position: absolute !important;
    top: 0 !important;
}
.inputArea.psw.show .psw-icon i:first-of-type,
.psw-icon i:last-of-type{
    display: none;
}
.inputArea.psw.show .psw-icon i:last-of-type,
.psw-icon i:first-of-type{
    display: block;
}
.inputArea .inputBox .hlpCont, .uploadArea .uploadBox .hlpCont, .mapBox .hlpCont{
    padding: .25rem 1rem;
    min-height: var(--hlpCont-h);
}
.inputArea .inputBox .counter{
    padding-left: 1rem;
    text-align: right;
}
.inputArea .inputBox .counter,
.inputArea .inputBox .inputLabel{
    white-space: nowrap;
}
.inputArea .input{
    padding: .5rem 1rem;
}
.inputArea .inputLabel {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 1rem;
    font-size: var(--inputLabel);
    line-height: var(--input-h);
}
.inputArea.icon .inputLabel{
    left: 2.25rem;
}
.inputArea[focus] .inputLabel,
.inputArea.data .inputLabel{
    font-size: var(--capt);
    line-height: var(--capt);
}
.inputArea .input .affixEl{
    visibility: hidden;
    opacity: 0;
    z-index: 0;
}
.inputArea[focus] .input .affixEl,
.inputArea.data .input .affixEl{
    visibility: visible;
    opacity: 1;
}
.inputArea.filled[focus].noLabel .input input,
.inputArea.filled.data.noLabel .input input,
.inputArea.filled.noLabel .affixEl{
    top: 0;
}
.inputArea.filled[focus] .input input,
.inputArea.filled.data .input input,
.inputArea.filled[focus] .date_sep,
.inputArea.filled.data .date_sep,
.inputArea.filled .affixEl{
    top: .375rem;
}
.inputArea.filled[focus] .inputLabel,
.inputArea.filled.data .inputLabel{
    top: .75rem;
}
.inputArea.dense.filled[focus] .inputLabel, .inputArea.dense.filled.data .inputLabel{
    top: .375rem;
}
.inputArea.outlined[focus] .inputLabel,
.inputArea.outlined.data .inputLabel{
    top: -.25rem;
    left: 0;
}
.inputArea.filled textarea, .inputArea.filled [contenteditable],
.inputArea.filled.dense textarea, .inputArea.filled.dense [contenteditable]
{
    margin-top: 1rem;
    height: calc((var(--textarea-h) - 1rem));
}
.inputArea.outlined textarea, .inputArea.outlined [contenteditable]{
    margin-top: .625rem;
    height: calc((var(--textarea-h) - .625rem));
}
.inputArea.outlined.dense textarea, .inputArea.outlined.dense [contenteditable]{
    margin-top: .3125rem;
    height: calc((var(--textarea-h) - .3125rem));
}
.inputBorder{
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
}
.inputBorder .line:nth-of-type(2){
    position: relative;
    content: attr(data-label);
    font-size: var(--capt);
}
.inputBorder .line:nth-of-type(2):after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: solid var(--inputBorder);
}
.inputBorder .line:first-of-type,
.inputBorder .line:last-of-type{
    width: .75rem;
}
.inputBorder .line:nth-of-type(3){
    border-top: solid var(--inputBorder);
    border-bottom: solid var(--inputBorder);
}
.inputBorder .line:nth-of-type(2){
    font-size: 0;
    padding: 0;
}
.inputArea[focus] .inputBorder .line:nth-of-type(2),
.inputArea.data .inputBorder .line:nth-of-type(2){
    font-size: var(--capt);
    padding: 0 .25rem;
}
.inputBorder .line:first-of-type{
    border: solid var(--inputBorder);
    border-right: none;
}
.inputBorder .line:last-of-type{
    border: solid var(--inputBorder);
    border-left: none;
}

/*-----INPUT STEP-----*/
.inputStep .iconArea:first-of-type{
    padding-left: 0;
}
.inputStep .iconArea:last-of-type{
    padding-right: 0;
}
.inputStep .input{
    padding-left: .25rem;
    padding-right: .25rem;
}

/*-----TIMEPICKER & DATEPICKER-----*/
.date_sep, .time_sep, .dial_mode, .dial{
    position: relative;
}
.dial-hand, .dial-hand:after, .dial .num{
    position: absolute;
}
.time_h input, .time_m input{
    width: 6rem;
    height: 5rem;
}
.date_param input,
.time_h input, .time_m input{
    border: none;
}
.time_h input, .time_m input, .time_sep, .time_period{
    text-align: center;
}
.date_d input, .date_m input{
    width: 2ch;
}
.date_sep{
    visibility: hidden;
    opacity: 0;
    padding: 0 .125rem;
}
.inputArea[focus] .date_sep, .inputArea.data .date_sep{
    visibility: visible;
    opacity: 1;
}
.time_sep{
    top: -.375rem;
    width: 1.5rem;
}
.time_period{
    margin-left: .75rem;
    text-transform: uppercase;
}
.period_btn{
    width: 3.25rem;
    height: 2.5rem;
}
.dialArea{
    overflow: hidden;
    height: 0;
    width: var(--dial-w);
    margin: auto;
}
.dial-on .dialArea{
    height: calc(var(--dial-mt) + var(--dial-w));
    width: var(--dial-w);
}
.dial_mode i:first-of-type, .dial-on .dial_mode i:last-of-type{
    display: none;
}
.dial_mode i:last-of-type, .dial-on .dial_mode i:first-of-type{
    display: block;
}
.dial{
    margin-top: 0;
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    width: var(--dial-w);
    height: var(--dial-w);
    border-radius: var(--dial-w);
    -webkit-border-radius: var(--dial-w);
    -moz-border-radius: var(--dial-w);
    -ms-border-radius: var(--dial-w);
    -o-border-radius: var(--dial-w);
}
.dial-on .dial{
    margin-top: var(--dial-mt);
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.dial .num{
    width: var(--dial-num);
    height: var(--dial-num);
    line-height: var(--dial-num);
    border-radius: var(--dial-num);
    -webkit-border-radius: var(--dial-num);
    -moz-border-radius: var(--dial-num);
    -ms-border-radius: var(--dial-num);
    -o-border-radius: var(--dial-num);
    text-align: center;
    margin: .25rem;
}
.dial .num:nth-of-type(13){
    top: 0;
}
.dial .num:nth-of-type(7){
    bottom: 0;
}
.dial .num:nth-of-type(13), .dial .num:nth-of-type(7){
    left: 6.25rem;
}
.dial .num:nth-of-type(10){
    left: 0;
}
.dial .num:nth-of-type(4){
    right: 0;
}
.dial .num:nth-of-type(10), .dial .num:nth-of-type(4){
    top: 6.25rem;
}

.dial .num:nth-of-type(12), .dial .num:nth-of-type(2){
    top: .875rem;
}
.dial .num:nth-of-type(8), .dial .num:nth-of-type(6){
    bottom: .875rem;
}
.dial .num:nth-of-type(12), .dial .num:nth-of-type(8){
    left: 3.125rem;
}
.dial .num:nth-of-type(2), .dial .num:nth-of-type(6){
    right: 3.125rem;
}

.dial .num:nth-of-type(3), .dial .num:nth-of-type(11){
    top: 3.1875rem;
}
.dial .num:nth-of-type(11), .dial .num:nth-of-type(9){
    left: .875rem;
}
.dial .num:nth-of-type(9), .dial .num:nth-of-type(5){
    bottom: 3.1875rem;
}
.dial .num:nth-of-type(3), .dial .num:nth-of-type(5){
    right: .875rem;
}

.dial-hand{
    height: 6.25rem;
    width: .125rem;
    margin-top: 1.5rem;
    top: .25rem;
    left: 7.9375rem;
    transform-origin: center bottom;
}
.dial-hand:after{
    content: "";
    bottom: -.1875rem;
    right: -.1875rem;
    width: .5rem;
    height: .5rem;
    border-radius: .5rem;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
}

/*-----INPUT SLIDER-----*/
.inputSlider, .inputSlider .trackBox{
    position: relative;
}
.inputSlider .handleBox,
.inputSlider .handleBox .handle_val,
.trackBox .bar,
.trackBox .limit_l,
.trackBox .limit_r{
    position: absolute;
}
.trackBox{
    overflow: hidden;
    width: 100%;
}
.trackBox, .trackBox .track, .trackBox .bar{
    height: var(--inputSlider-h);
}
.trackBox .bar, .inputSlider .handleBox{
    left: 0;
}
.trackBox .bar{
    top: 0;
    width: calc(var(--track_bar_w) + calc(var(--inputSlider-handle_w) / 2));
}
.inputSlider .handleBox{
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto;
    height: var(--inputSlider-handle_h);
}
.inputSlider .handleBox .handle{
    width: var(--inputSlider-handle_w);
    height: var(--inputSlider-handle_h);
}
.inputSlider .handleBox .handle_val{
    visibility: hidden;
    pointer-events: none;
    padding: var(--inputSlider-handle_val_py) var(--inputSlider-handle_val_px);
    margin: var(--inputSlider-handle_val_my);
    transform: translateX(calc(-50% - var(--inputSlider-handle_w) / 2));
    -webkit-transform: translateX(calc(-50% - var(--inputSlider-handle_w) / 2));
    -moz-transform: translateX(calc(-50% - var(--inputSlider-handle_w) / 2));
    -ms-transform: translateX(calc(-50% - var(--inputSlider-handle_w) / 2));
    -o-transform: translateX(calc(-50% - var(--inputSlider-handle_w) / 2));
    top: calc(var(--inputSlider-handle_h) * -1);
}
.inputSlider .handleBox.active .handle_val, .inputSlider:hover .handle_val{
    visibility: visible;
}
.inputSlider .limit_l, .inputSlider .limit_r{
    width: .25rem;
    height: .25rem;
    top: 0;
    bottom: 0;
    margin: auto;
}
.inputSlider .limit_l{
    left: 0;
    margin-left: var(--track-margin);
}
.inputSlider .limit_r {
    right: 0;
    margin-right: var(--track-margin);
}
/*-----MENU & DROPDOWN-----*/
.inputArea.dropdown .menuArea{
    position: relative;
}
.inputArea.dropdown .inputCont .iconArea:last-of-type .icon{
    transform-origin: center;
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
}
.inputArea.dropdown[focus] .inputCont .iconArea:last-of-type .icon{
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.dropdown .menuBox{
    position: absolute;
}
.menuBox{
    display: inline-block;
}
.menu{
    padding: .5rem 0;
}
.menu:not(.inputArea .menu){
    min-width: 7rem;
    max-width: 17.5rem;
}
.menu .menuEl{
    padding-right: .75rem;
    height: var(--menuEl-h);
}
.menuElBox.noRes{
    display: none;
}
.menu .menuEl .txt,
.inputArea.dropdown .menuBox{
    width: 100%;
}
.menu .menuEl [class^="icon-"]{
    font-size: 1.5rem;
}
.menu .menuEl .iconBox,
.menu .menuEl .txt{
    padding-left: .75rem;
}
.inputArea .menu .menuEl .iconBox{
    height: auto;
}
.inputArea .menuBox,
.panArea.dropdown .pan{
    height: 0;
    overflow-y: auto;
}
.dropdown .menuBox{
    z-index: 2;
}
/*-----APP BAR-----*/
.appBarArea{
    position: fixed;
    left: 0;
}
.appBarArea,
.appBarArea.bt .appBar,
.appBarArea.bt .iconBox,
.appBarArea.tp.sm .section, .appBarArea.tp.m .section, .appBarArea.tp.l .section, .appBarArea.tp.c .txtArea, .txtAreaComp,
.txtAreaComp .txtBox{
    width: 100%;
}
/*--BOTTOM APP BAR--*/
.appBarArea.bt{
    bottom: 0;
}
.appBarArea.bt .appBar{
    height: var(--bab-h);
    padding: .75rem 1rem .75rem .25rem;
}
.appBarArea.bt .fabBox{
    text-align: right;
}
.appBarArea.bt .fab, .navRail .fab{
    margin: 0;
}
/*--TOP APP BAR--*/
.appBarArea.tp{
    top: 0;
}
.appBarArea.tp.c .appBar, .appBarArea.tp.sm .appBar, .scrolled .appBarArea.tp.comp .appBar{
    height: 4rem;
}
.appBarArea.tp.m .appBar{
    height: 7rem;
    padding: .5rem 0 1rem 0;
}
.appBarArea.tp.l .appBar{
    height: 9.5rem;
    padding: .5rem 0 1.75rem 0;
}
.appBarArea.tp .iconBox:first-of-type, .appBarArea.tp .section{
    padding-right: .5rem;
}
.appBarArea.tp .iconBox:last-of-type{
    padding-left: .5rem;
}
.appBarArea.tp.c .txtArea, .txtAreaComp{
    text-align: center;
}
.appBarArea.tp .txtArea, .appBarArea.tp.l .txtArea{
    padding-left: 1rem;
}
.appBarArea.tp.l .txtArea{
    position: absolute;
    bottom: 1.75rem;
}
.appBarArea.tp.comp .txtArea{
    overflow-y: hidden;
}
.scrolled .appBarArea.tp.comp .txtArea{
    height: 0 !important;
}
.txtAreaComp .txtBox{
    position: relative;
}
.appBarArea.tp.comp .txtAreaComp{
    visibility: hidden;
    opacity: 0;
}
.scrolled .appBarArea.tp.comp .txtAreaComp{
    visibility: visible;
    opacity: 1;
}
.appBarArea.tp.comp .txtAreaComp [data-title]:before{
    content: attr(data-title);
}
/*-----NAVIGATION-----*/
.bniArea{
    position: fixed;
    left: 0;
}
.navRailArea, .navRailBox, .navDrawerArea, .navDrawerBox{
    position: sticky;
    top: var(--nav-position-top);
}
.navRail, .navDrawer{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}
.navRailArea, .navRailBox, .navDrawerArea, .navDrawerBox{
    min-height: 100vh;
}
.scrollDown .bniArea{
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
}
.bniBtn{
    padding: .75rem .25rem 1rem .25rem;
}
.bniBtn, .navRailBtn{
    text-align: center;
}
.navRailBtn{
    padding: .375rem;
    min-height: var(--indicatorH-r);
}
.navRailBtn.r{
    padding: 0;
}
.navRailBtn.t{
    padding-top: .75rem;
}
.bniBtn .indicator, .navRailBtn .indicator{
    position: relative;
    z-index: 0;
    font-size: var(--btn-icon-size);
    width: 4rem;
    height: var(--indicatorH);
    border-radius: var(--indicatorH);
    -webkit-border-radius: var(--indicatorH);
    -moz-border-radius: var(--indicatorH);
    -ms-border-radius: var(--indicatorH);
    -o-border-radius: var(--indicatorH);
    margin: auto;
}
.bniBtn .indicator:before, .navRailBtn .indicator:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: var(--indicatorH);
    -webkit-border-radius: var(--indicatorH);
    -moz-border-radius: var(--indicatorH);
    -ms-border-radius: var(--indicatorH);
    -o-border-radius: var(--indicatorH);
}
.bniBtn .indicator i, .navRailBtn .indicator i{
    line-height: calc(var(--indicatorH) - .125rem);
}
.bniBtn .label, .navRailBtn .label{
    margin-top: .25rem;
}
/*--NAVIGATION RAIL--*/
.navRailArea{
    width: 5rem;
}
.navRailBtn.r .indicator{
    width: var(--indicatorH-r);
    height: var(--indicatorH-r);
    line-height: var(--indicatorH-r);
    border-radius: var(--indicatorH-r);
    -webkit-border-radius: var(--indicatorH-r);
    -moz-border-radius: var(--indicatorH-r);
    -ms-border-radius: var(--indicatorH-r);
    -o-border-radius: var(--indicatorH-r);
}
/*--NAVIGATION DRAWER--*/
.navDrawerBox{
    width: var(--nav-drawer-w);
}
.navDrawer{
    padding: 1.75rem .75rem;
}
.navDrawer li{
    padding: 0 1.5rem 0 1rem;
    height: 3.5rem;
    line-height: 3.5rem;
}
.navDrawer li .label, .navDrawer li .badgeTxt{
    display: inline-block;
}
.navDrawer li .label{
    width: 100%;
}
.navDrawer li i{
    font-size: 1.5rem;
}
.navDrawer li i:first-of-type{
    margin-right: .75rem;
}
.navDrawer .innerCont{
    padding: 0 1.5rem 0 1rem;
}
/*-----PANNELLI-----*/
.pan-on{
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}
.pan-off{
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.panArea.sheet .panCont,
.modal .panCont{
    padding: 1.5rem;
}
.panArea.float .pan{
    position: absolute;
}
.timepicker_pan{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.timepicker_pan .panBox{
    height: 100%;
    width: 100%;
}
.timepicker_pan .pan{
    padding: 1.5rem;
}
.timepicker_pan .pan .sH{
    padding-bottom: 1.25rem;
}
.timepicker_pan .pan .sF{
    padding-top: 1.5rem;
}
/*--DROPDOWN--*/
.drpArea .drpBox{
    height: 0;
}
[data-dropdown_trigger] .icon-caret{
    rotate: 0deg;
}
[data-dropdown_trigger].drp_on .icon-caret{
    rotate: 180deg;
}
/*--FOGLI--*/
.panArea.sheet .pan{
    position: fixed;
}
.panArea.sheet.bt .pan{
    width: 100%;
    max-width: 40rem;
    margin-top: 4.5rem;
    bottom: 0;
    border-radius: 1.75rem 1.75rem 0 0;
    -webkit-border-radius: 1.75rem 1.75rem 0 0;
    -moz-border-radius: 1.75rem 1.75rem 0 0;
    -ms-border-radius: 1.75rem 1.75rem 0 0;
    -o-border-radius: 1.75rem 1.75rem 0 0;
}
.panArea.sheet.bt .dragHandle{
    --dragHandleH: .25rem;
    width: 2.5rem;
    height: var(--dragHandleH);
    margin: 1.375rem auto;
    border-radius: var(--dragHandleH);
    -webkit-border-radius: var(--dragHandleH);
    -moz-border-radius: var(--dragHandleH);
    -ms-border-radius: var(--dragHandleH);
    -o-border-radius: var(--dragHandleH);
}
.panArea.sheet.side .pan{
    height: 100%;
    max-width: 25rem;
}
.panArea.sheet.side.sx .pan{
    left: 0;
}
.panArea.sheet.side.dx .pan{
    right: 0;
}

/*--FINESTRE MODALI--*/
.modal{
    position: fixed;
    top: 0;
    left: 0;
}
.modal, .modal .panBox{
    width: 100%;
    height: 100%;
    height: 100vh;
}
.modal .panBox{
    padding: 3.5rem;
}
.modal .pan .sF{
    padding-top: 1.5rem;
}
.modal.m .pan{
    min-width: 17.5rem;
    max-width: 35rem;
}
.modal.fs .panBox{
    padding: 0;
    overflow-y: auto;
}
.modal.fs .pan{
    width: 100%;
}
.modal.fs .modalTitle{
    position: sticky;
    top: 0;
    height: 3.5rem;
}

/*-----LISTE-----*/
.listEl{
    width: 100%;
    padding-right: 1rem;
}
.listEl.s, .listEl.m{
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.listEl.l, .listEl.xl{
    padding-top: .75rem;
    padding-bottom: .75rem;
}
.listEl.s{
    height: 3.5rem;
}
.listEl.m{
    height: 4.5rem;
}
.listEl.l{
    height: 5.5rem;
}
.listEl.xl{
    min-height: 5.5rem;
}

/*-----TOOLTIP-----*/
.tooltipArea{
    pointer-events: none;
    position: absolute;
    visibility: hidden;
    opacity: 0;
}
.tooltipArea.tooltip-on{
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}
.tooltipArea, .tooltip{
    display: inline-block;
}
.tooltipArea .tooltipBox{
    padding: var(--space-xs);
}
.tooltipArea.plain .tooltip{
    padding: var(--space-xs);
    min-height: 1.5rem;
}
.tooltipArea.rich .tooltip{
    padding: .75rem 0 var(--space-xs) 0;
    min-height: 1.5rem;
}
.tooltipArea.rich .tooltip .sH, .tooltipArea.rich .tooltip .sB{
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
}
.tooltipArea.rich .tooltip .sH{
    padding-bottom: .25rem;
}
.tooltipArea.rich .sF{
    padding: 12px var(--space-xs) 0 var(--space-xs);
}

/*-----SNACKBAR-----*/
.snkBoxList,
.snkArea{
    position: fixed;
}
.snkBoxList {
    left: 0;
    right: 0;
}
.snkArea{
    overflow-y: hidden;
    height: 0;
    visibility: hidden;
    opacity: 0;
    bottom: var(--snk-bottom);
    pointer-events: none;
}
.scrollDown .snkArea{
    margin-bottom: 0;
}
.snkArea.show{
    visibility: visible;
    opacity: 1;
}
.snkBox{
    display: inline-block;
    max-width: 100%;
}
.snk{
    min-height: 3rem;
    margin: 1rem;
    pointer-events: initial;
}
.snk [class^="icon-"]{
    font-size: 1.5rem;
}
.snkArea.sm .txt{
    padding-left: 1rem;
    padding-right: 1rem;
}
.snkArea.sm .btnBox{
    padding-right: .5rem;
}
.snkArea.m .txt{
    padding: 1rem 1rem 0 1rem;
}
.snkArea.m .btnBox{
    padding: .5rem;
}

/*-----DRAGGABLE SLIDER-----*/
.drSlider{
    white-space: nowrap;
    cursor: -webkit-grab;
    cursor: grab;
}
.drSlider, .drSlider:active{
    cursor: url(../../media/genesi/cursor/slider-cursor.png) 10 10, auto;
}
.drSlider a{
    cursor: initial;
}
.slider {
    will-change: scroll-position;
}
.drSlider .slide{
    display: inline-block;
    flex: none;
    white-space: initial;
}

/*-----TABS-----*/
.tab, .tab.secondary [data-badge]:after{
    position: relative;
}
.tab{
    text-align: center;
}
.tab .indicator, .tab .iconBox {
    display: inline-block;
}
.tabBox .divider{
    margin: 0;
}
.tab_index{
    padding: 0 .5rem;
}
.tab.primary .tab_index{
    height: var(--tab_pr_H);
}
.tab.secondary .tab_index{
    height: var(--tab_sc_H);
}
.tabBox.drSliderBox .tab{
    margin-left: var(--tab_scroll_offset);
}
.tab .indicator{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: inline-block;
    min-width: 1.5rem;
    width: 1.5rem;
    visibility: hidden;
}
.tabArea.loaded .tab .indicator{
    visibility: visible;
}
.tab.primary .indicator{
    height: var(--tab_pr_indicatorH);
    border-radius: var(--tab_pr_indicatorH) var(--tab_pr_indicatorH) 0 0;
    -webkit-border-radius: var(--tab_pr_indicatorH) var(--tab_pr_indicatorH) 0 0;
    -moz-border-radius: var(--tab_pr_indicatorH) var(--tab_pr_indicatorH) 0 0;
    -ms-border-radius: var(--tab_pr_indicatorH) var(--tab_pr_indicatorH) 0 0;
    -o-border-radius: var(--tab_pr_indicatorH) var(--tab_pr_indicatorH) 0 0;
    margin: 0 .125rem;
}
.tab.secondary .indicator{
    height: var(--tab_sc_indicatorH);
}
.tab .iconBox {
    font-size: var(--btn-icon-size);
}
.tab.secondary .iconBox{
    margin-right: .5rem;
    margin-left: -.125rem;
}
.tab_index [data-badge]{
    margin-left: .25rem;
}
.tab.secondary [data-badge]:after{
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
}
/*-----TABELLE-----*/
.tb_cont{
    max-height: var(--tb_body_h);
    overflow-y: auto;
}
.tb_header{
    position: sticky;
    top: 0;
    z-index: 2;
}
.tb_title .row{
    height: 4rem;
}
.tb_header .col_name .row,
.tb_filters .row,
.tb_footer .row{
    height: 3.5rem;
}
.tb_body{
    max-height: var(--tb-body-max-h);
}
.tb_body .row{
    height: 3.25rem;
}
.tb .col,
.tb_footer .row{
    min-height: 100%;
    padding: .375rem 1rem .375rem 1rem;
}
.tb_footer .row{
    padding-right: 0;
}
[data-col]{
    max-width: var(--col_w);
    min-width: var(--col_w);
    width: var(--col_w);
}
.tb_footer .num_row .input{
    width: 4rem;
}

/*-----ANIMAZIONI, EFFETTI, TRANSIZIONI-----*/
@keyframes progr_lin_ind{
    0%{
        width: 0%;
        transform: translateX(0%);
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
        -ms-transform: translateX(0%);
        -o-transform: translateX(0%);
    }
    100%{
        width: 50%;
        transform: translateX(200%);
        -webkit-transform: translateX(200%);
        -moz-transform: translateX(200%);
        -ms-transform: translateX(200%);
        -o-transform: translateX(200%);
    }
}
@keyframes progr_circ_ind{
    0% {
        stroke-dasharray: 0, 200;
        stroke-dashoffset: 0;
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
    }
    30% {
        stroke-dasharray: 150, 200;
        stroke-dashoffset: -20;
    }
    50% {
        stroke-dasharray: 150, 200;
        stroke-dashoffset: -93;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -93;
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
    }
}
/*-----PARALLASSE-----*/
.parallax_layer{
    --normalized_parallax: calc((var(--effect) / var(--speed)) / var(--target_viewport));
}
/*-----RIPPLE-----*/
.rippleFx {
    position: relative;
    overflow: hidden;
}
.ripple {
    position: absolute;
    border-radius: 100%;
    transform: scale(0.2);
    opacity: 0;
    pointer-events: none;
    -webkit-animation: ripple 1s ease-out;
    animation: ripple 1s ease-out;
}
@-webkit-keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes ripple {
    from {
        opacity: 1;
    }
    to {
        transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}
.ripple {
    -webkit-animation: ripple .8s ease-out;
    animation: ripple .8s ease-out;
}

.btn,
.fab.ext,
.scrolled .fab.ext,
.segBtn .opt .check,
.segBtn .opt.checked .check,
.tabar,
.appBarArea.tp .txtArea,
.scrolled .appBarArea.tp .txtArea,
.appBarArea.tp .txtAreaComp,
.scrolled .appBarArea.tp .txtAreaComp,
.card,
.pan-on,
.pan-off,
.snkArea,
.chip .icon,
.switch .boxCont .box,
.inputArea .input,
.inputArea .input .inputLabel,
.inputArea .affixEl,
.inputBorder .line,
.input textarea,
.input [contenteditable],
.inputSlider .handle,
.inputSlider .handleBox .handle_val,
.menuBox,
.menu .menuEl,
.bniArea,
.wave-bar,
.progress.linear,
.progress.linear .bar,
.progress.circ circle.track, .progress.circ circle.bar,
.dialArea,
.dial,
.dial .num,
.dial-hand,
.date_sep,
.tabArea .indicator{
    transition: var(--transition-standard);
    -webkit-transition: var(--transition-standard);
    -moz-transition: var(--transition-standard);
    -ms-transition: var(--transition-standard);
    -o-transition: var(--transition-standard);
}

/*----------TEMI & OMBRE----------*/
*:focus-visible, .inputArea:has(input:focus-visible) .inputCont{
    outline: none; /* Rimuove l'outline nativo */
    box-shadow:
        0 0 0 .125rem white,  /* bordo interno bianco */
        0 0 0 .25rem black;  /* bordo esterno nero */
}
.inputBorder .line:nth-of-type(2){
    color: var(--transparent);
}
button{
    background: var(--inherit);
}
.btn.outlined{
    border-color: var(--inherit);
}
.btn.txt, .btn.outlined,
textarea{
    background: var(--transparent);
}
.time_h input, .time_m input{
    color: var(--initial);
}
.btn,
.input input{
    background: var(--initial);
}
*::selection{
    color: rgb(var(--selection_color));
    background: rgb(var(--selection_bkg_color));
}
*::-moz-selection{
    color: rgb(var(--selection_color));
    background: rgb(var(--selection_bkg_color));
}
*::-webkit-selection{
    color: rgb(var(--selection_color));
    background: rgb(var(--selection_bkg_color));
}
/*------------------MEDIA QUERIES------------------*/
/*----------<= TABLET----------*/
@media only screen and (max-width:61.99rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .sms-alL{ text-align: left; }
    .sms-alC{ text-align: center; }
    .sms-alR{ text-align: right; }
    .sms-alJ{ text-align: justify; }
    br.sms-noBreak{ display: none; }
    br.sms-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .sms-p-xs { padding: var(--space-xs); }
    .sms-p-sm { padding: var(--space-sm); }
    .sms-p-md { padding: var(--space-md); }
    .sms-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .sms-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .sms-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .sms-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .sms-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .sms-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .sms-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .sms-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .sms-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .sms-pt-xs { padding-top: var(--space-xs); }
    .sms-pt-sm { padding-top: var(--space-sm); }
    .sms-pt-md { padding-top: var(--space-md); }
    .sms-pt-lg { padding-top: var(--space-lg); }

    .sms-pb-xs { padding-bottom: var(--space-xs); }
    .sms-pb-sm { padding-bottom: var(--space-sm); }
    .sms-pb-md { padding-bottom: var(--space-md); }
    .sms-pb-lg { padding-bottom: var(--space-lg); }

    .sms-pl-xs { padding-left: var(--space-xs); }
    .sms-pl-sm { padding-left: var(--space-sm); }
    .sms-pl-md { padding-left: var(--space-md); }
    .sms-pl-lg { padding-left: var(--space-lg); }

    .sms-pr-xs { padding-right: var(--space-xs); }
    .sms-pr-sm { padding-right: var(--space-sm); }
    .sms-pr-md { padding-right: var(--space-md); }
    .sms-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .sms-p-0 { padding: 0; }
    .sms-px-0 { padding-left: 0; padding-right: 0; }
    .sms-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .sms-m-xs { margin: var(--space-xs); }
    .sms-m-sm { margin: var(--space-sm); }
    .sms-m-md { margin: var(--space-md); }
    .sms-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .sms-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .sms-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .sms-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .sms-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .sms-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .sms-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .sms-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .sms-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .sms-mt-xs { margin-top: var(--space-xs); }
    .sms-mt-sm { margin-top: var(--space-sm); }
    .sms-mt-md { margin-top: var(--space-md); }
    .sms-mt-lg { margin-top: var(--space-lg); }

    .sms-mb-xs { margin-bottom: var(--space-xs); }
    .sms-mb-sm { margin-bottom: var(--space-sm); }
    .sms-mb-md { margin-bottom: var(--space-md); }
    .sms-mb-lg { margin-bottom: var(--space-lg); }

    .sms-ml-xs { margin-left: var(--space-xs); }
    .sms-ml-sm { margin-left: var(--space-sm); }
    .sms-ml-md { margin-left: var(--space-md); }
    .sms-ml-lg { margin-left: var(--space-lg); }

    .sms-mr-xs { margin-right: var(--space-xs); }
    .sms-mr-sm { margin-right: var(--space-sm); }
    .sms-mr-md { margin-right: var(--space-md); }
    .sms-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .sms-m-0 { margin: 0; }
    .sms-mx-0 { margin-left: 0; margin-right: 0; }
    .sms-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .sms-w-0   { --w: 0%; width: var(--w); }
    .sms-w-5   { --w: 5%; width: var(--w); }
    .sms-w-10  { --w: 10%; width: var(--w); }
    .sms-w-15  { --w: 15%; width: var(--w); }
    .sms-w-20  { --w: 20%; width: var(--w); }
    .sms-w-25  { --w: 25%; width: var(--w); }
    .sms-w-30  { --w: 30%; width: var(--w); }
    .sms-w-35  { --w: 35%; width: var(--w); }
    .sms-w-40  { --w: 40%; width: var(--w); }
    .sms-w-45  { --w: 45%; width: var(--w); }
    .sms-w-50  { --w: 50%; width: var(--w); }
    .sms-w-55  { --w: 55%; width: var(--w); }
    .sms-w-60  { --w: 60%; width: var(--w); }
    .sms-w-65  { --w: 65%; width: var(--w); }
    .sms-w-70  { --w: 70%; width: var(--w); }
    .sms-w-75  { --w: 75%; width: var(--w); }
    .sms-w-80  { --w: 80%; width: var(--w); }
    .sms-w-85  { --w: 85%; width: var(--w); }
    .sms-w-90  { --w: 90%; width: var(--w); }
    .sms-w-95  { --w: 95%; width: var(--w); }
    .sms-w-100 { --w: 100%; width: var(--w); }

    .sms-w-vw-0   { --w: 0vw; width: var(--w); }
    .sms-w-vw-5   { --w: 5vw; width: var(--w); }
    .sms-w-vw-10  { --w: 10vw; width: var(--w); }
    .sms-w-vw-15  { --w: 15vw; width: var(--w); }
    .sms-w-vw-20  { --w: 20vw; width: var(--w); }
    .sms-w-vw-25  { --w: 25vw; width: var(--w); }
    .sms-w-vw-30  { --w: 30vw; width: var(--w); }
    .sms-w-vw-35  { --w: 35vw; width: var(--w); }
    .sms-w-vw-40  { --w: 40vw; width: var(--w); }
    .sms-w-vw-45  { --w: 45vw; width: var(--w); }
    .sms-w-vw-50  { --w: 50vw; width: var(--w); }
    .sms-w-vw-55  { --w: 55vw; width: var(--w); }
    .sms-w-vw-60  { --w: 60vw; width: var(--w); }
    .sms-w-vw-65  { --w: 65vw; width: var(--w); }
    .sms-w-vw-70  { --w: 70vw; width: var(--w); }
    .sms-w-vw-75  { --w: 75vw; width: var(--w); }
    .sms-w-vw-80  { --w: 80vw; width: var(--w); }
    .sms-w-vw-85  { --w: 85vw; width: var(--w); }
    .sms-w-vw-90  { --w: 90vw; width: var(--w); }
    .sms-w-vw-95  { --w: 95vw; width: var(--w); }
    .sms-w-vw-100 { --w: 100vw; width: var(--w); }

    .sms-coln-1  { --w: calc(100% / 1); width: var(--w); }
    .sms-coln-2  { --w: calc(100% / 2); width: var(--w); }
    .sms-coln-3  { --w: calc(100% / 3); width: var(--w); }
    .sms-coln-4  { --w: calc(100% / 4); width: var(--w); }
    .sms-coln-5  { --w: calc(100% / 5); width: var(--w); }
    .sms-coln-6  { --w: calc(100% / 6); width: var(--w); }
    .sms-coln-7  { --w: calc(100% / 7); width: var(--w); }
    .sms-coln-8  { --w: calc(100% / 8); width: var(--w); }
    .sms-coln-9  { --w: calc(100% / 9); width: var(--w); }
    .sms-coln-10 { --w: calc(100% / 10); width: var(--w); }
    .sms-coln-11 { --w: calc(100% / 11); width: var(--w); }
    .sms-coln-12 { --w: calc(100% / 12); width: var(--w); }

    /*-----ALTEZZA-----*/
    .sms-h-0   { --h: 0%; height: var(--h); }
    .sms-h-5   { --h: 5%; height: var(--h); }
    .sms-h-10  { --h: 10%; height: var(--h); }
    .sms-h-15  { --h: 15%; height: var(--h); }
    .sms-h-20  { --h: 20%; height: var(--h); }
    .sms-h-25  { --h: 25%; height: var(--h); }
    .sms-h-30  { --h: 30%; height: var(--h); }
    .sms-h-35  { --h: 35%; height: var(--h); }
    .sms-h-40  { --h: 40%; height: var(--h); }
    .sms-h-45  { --h: 45%; height: var(--h); }
    .sms-h-50  { --h: 50%; height: var(--h); }
    .sms-h-55  { --h: 55%; height: var(--h); }
    .sms-h-60  { --h: 60%; height: var(--h); }
    .sms-h-65  { --h: 65%; height: var(--h); }
    .sms-h-70  { --h: 70%; height: var(--h); }
    .sms-h-75  { --h: 75%; height: var(--h); }
    .sms-h-80  { --h: 80%; height: var(--h); }
    .sms-h-85  { --h: 85%; height: var(--h); }
    .sms-h-90  { --h: 90%; height: var(--h); }
    .sms-h-95  { --h: 95%; height: var(--h); }
    .sms-h-100 { --h: 100%; height: var(--h); }
    .sms-h-min-100 { min-height: 100%; }

    .sms-h-vh-0   { --h: 0vh; height: var(--h); }
    .sms-h-vh-5   { --h: 5vh; height: var(--h); }
    .sms-h-vh-10  { --h: 10vh; height: var(--h); }
    .sms-h-vh-15  { --h: 15vh; height: var(--h); }
    .sms-h-vh-20  { --h: 20vh; height: var(--h); }
    .sms-h-vh-25  { --h: 25vh; height: var(--h); }
    .sms-h-vh-30  { --h: 30vh; height: var(--h); }
    .sms-h-vh-35  { --h: 35vh; height: var(--h); }
    .sms-h-vh-40  { --h: 40vh; height: var(--h); }
    .sms-h-vh-45  { --h: 45vh; height: var(--h); }
    .sms-h-vh-50  { --h: 50vh; height: var(--h); }
    .sms-h-vh-55  { --h: 55vh; height: var(--h); }
    .sms-h-vh-60  { --h: 60vh; height: var(--h); }
    .sms-h-vh-65  { --h: 65vh; height: var(--h); }
    .sms-h-vh-70  { --h: 70vh; height: var(--h); }
    .sms-h-vh-75  { --h: 75vh; height: var(--h); }
    .sms-h-vh-80  { --h: 80vh; height: var(--h); }
    .sms-h-vh-85  { --h: 85vh; height: var(--h); }
    .sms-h-vh-90  { --h: 90vh; height: var(--h); }
    .sms-h-vh-95  { --h: 95vh; height: var(--h); }
    .sms-h-vh-100 { --h: 100vh; height: var(--h); }

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .sms-d-flex { display: flex; }
    .sms-d-inline-flex { display: inline-flex; }
    .sms-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .sms-justify-start { justify-content: flex-start; }
    .sms-justify-center { justify-content: center; }
    .sms-justify-end { justify-content: flex-end; }
    .sms-justify-between { justify-content: space-between; }
    .sms-justify-around { justify-content: space-around; }
    .sms-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .sms-align-start { align-items: flex-start; }
    .sms-align-center { align-items: center; }
    .sms-align-end { align-items: flex-end; }
    .sms-align-baseline { align-items: baseline; }
    .sms-align-stretch { align-items: stretch; }

    /* Align Self */
    .sms-align-self-start { align-self: flex-start; }
    .sms-align-self-center { align-self: center; }
    .sms-align-self-end { align-self: flex-end; }
    .sms-align-self-baseline { align-self: baseline; }
    .sms-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .sms-flex-row { flex-direction: row; }
    .sms-flex-row-reverse { flex-direction: row-reverse; }
    .sms-flex-column { flex-direction: column; }
    .sms-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .sms-flex-nowrap { flex-wrap: nowrap; }
    .sms-flex-wrap { flex-wrap: wrap; }
    .sms-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .sms-flex-grow-0 { flex-grow: 0; }
    .sms-flex-grow-1 { flex-grow: 1; }

    .sms-flex-shrink-0 { flex-shrink: 0; }
    .sms-flex-shrink-1 { flex-shrink: 1; }

    .sms-flex-basis-auto { flex-basis: auto; }
    .sms-flex-basis-100 { flex-basis: 100%; }
    .sms-flex-basis-50 { flex-basis: 50%; }
    .sms-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .sms-flex-0 { display: none; }

    /*-----GRIGLIE-----*/
    .sms-d-grid { display: grid; }
    .sms-d-inline-grid { display: inline-grid; }
    .sms-grid-nowrap { grid-auto-flow:column; }
    /*Colonne*/
    .sms-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .sms-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .sms-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .sms-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .sms-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .sms-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .sms-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .sms-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .sms-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .sms-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .sms-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .sms-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .sms-grid-cols-auto      { grid-template-columns: auto; }
    .sms-grid-cols-min       { grid-template-columns: min-content; }
    .sms-grid-cols-max       { grid-template-columns: max-content; }

    .sms-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .sms-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .sms-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .sms-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .sms-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .sms-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .sms-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .sms-gap-xxs { gap: var(--space-xxs); }
    .sms-gap-xs  { gap: var(--space-xs); }
    .sms-gap-sm  { gap: var(--space-sm); }
    .sms-gap-md  { gap: var(--space-md); }
    .sms-gap-lg  { gap: var(--space-lg); }
    .sms-gap-xl  { gap: var(--space-xl); }
    .sms-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .sms-gap-x-xxs { column-gap: var(--space-xxs); }
    .sms-gap-x-xs  { column-gap: var(--space-xs); }
    .sms-gap-x-sm  { column-gap: var(--space-sm); }
    .sms-gap-x-md  { column-gap: var(--space-md); }
    .sms-gap-x-lg  { column-gap: var(--space-lg); }
    .sms-gap-x-xl  { column-gap: var(--space-xl); }
    .sms-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .sms-gap-y-xxs { row-gap: var(--space-xxs); }
    .sms-gap-y-xs  { row-gap: var(--space-xs); }
    .sms-gap-y-sm  { row-gap: var(--space-sm); }
    .sms-gap-y-md  { row-gap: var(--space-md); }
    .sms-gap-y-lg  { row-gap: var(--space-lg); }
    .sms-gap-y-xl  { row-gap: var(--space-xl); }
    .sms-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .sms-justify-items-start    { justify-items: start; }
    .sms-justify-items-center   { justify-items: center; }
    .sms-justify-items-end      { justify-items: end; }
    .sms-justify-items-stretch  { justify-items: stretch; }

    .sms-align-items-start      { align-items: start; }
    .sms-align-items-center     { align-items: center; }
    .sms-align-items-end        { align-items: end; }
    .sms-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .sms-justify-start      { justify-content: flex-start; }
    .sms-justify-center     { justify-content: center; }
    .sms-justify-end        { justify-content: flex-end; }
    .sms-justify-between    { justify-content: space-between; }
    .sms-justify-around     { justify-content: space-around; }
    .sms-justify-evenly     { justify-content: space-evenly; }

    .sms-align-start        { align-content: flex-start; }
    .sms-align-center       { align-content: center; }
    .sms-align-end          { align-content: flex-end; }
    .sms-align-between      { align-content: space-between; }
    .sms-align-around       { align-content: space-around; }
    .sms-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .sms-place-self-start     { place-self: start; }
    .sms-place-self-end       { place-self: end; }
    .sms-place-self-center    { place-self: center; }
    .sms-place-self-stretch   { place-self: stretch; }

    .sms-align-self-start     { align-self: flex-start; }
    .sms-align-self-center    { align-self: center; }
    .sms-align-self-end       { align-self: flex-end; }
    .sms-align-self-stretch   { align-self: stretch; }

    .sms-justify-self-start   { justify-self: start; }
    .sms-justify-self-end     { justify-self: end; }
    .sms-justify-self-center  { justify-self: center; }
    .sms-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .sms-col-span-1  { grid-column: span 1 / span 1; }
    .sms-col-span-2  { grid-column: span 2 / span 2; }
    .sms-col-span-3  { grid-column: span 3 / span 3; }
    .sms-col-span-4  { grid-column: span 4 / span 4; }
    .sms-col-span-5  { grid-column: span 5 / span 5; }
    .sms-col-span-6  { grid-column: span 6 / span 6; }
    .sms-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .sms-col-start-1  { grid-column-start: 1; }
    .sms-col-start-2  { grid-column-start: 2; }
    .sms-col-start-3  { grid-column-start: 3; }
    .sms-col-start-4  { grid-column-start: 4; }

    .sms-col-end-1    { grid-column-end: 1; }
    .sms-col-end-2    { grid-column-end: 2; }
    .sms-col-end-3    { grid-column-end: 3; }
    .sms-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .sms-row-span-1  { grid-row: span 1 / span 1; }
    .sms-row-span-2  { grid-row: span 2 / span 2; }
    .sms-row-span-3  { grid-row: span 3 / span 3; }
    .sms-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .sms-row-start-1  { grid-row-start: 1; }
    .sms-row-start-2  { grid-row-start: 2; }
    .sms-row-start-3  { grid-row-start: 3; }

    .sms-row-end-1    { grid-row-end: 1; }
    .sms-row-end-2    { grid-row-end: 2; }
    .sms-row-end-3    { grid-row-end: 3; }


    /*-----VISIBILITA-----*/
    .sms-d-block{ display: block; }
    .sms-d-inline-block{ display: inline-block; }
    .sms-d-none{ display: none; }

    /*-----NAVIGATION BAR-----*/
    .bniArea{
        display: block;
        bottom: 0;
        width: 100%;
    }
    .bni{
        padding: 0 .25rem;
        height: 5rem;
    }

    /*-----DRAGGABLE SLIDER-----*/
    .drSlider{
        overflow-x: auto;
    }
    /* Nasconde la barra di scorrimento per il contenitore .drSlider.snapSlider */
    .drSlider::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    /*-----SNACKBAR-----*/
    .snkArea{
        margin-bottom: 6rem;
    }
}
/*----------SMARTPHONE PICCOLI----------*/
@media only screen and (max-width: 20rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .sp-alL{ text-align: left; }
    .sp-alC{ text-align: center; }
    .sp-alR{ text-align: right; }
    .sp-alJ{ text-align: justify; }
    br.sp-noBreak{ display: none; }
    br.sp-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .sp-p-xs { padding: var(--space-xs); }
    .sp-p-sm { padding: var(--space-sm); }
    .sp-p-md { padding: var(--space-md); }
    .sp-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .sp-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .sp-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .sp-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .sp-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .sp-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .sp-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .sp-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .sp-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .sp-pt-xs { padding-top: var(--space-xs); }
    .sp-pt-sm { padding-top: var(--space-sm); }
    .sp-pt-md { padding-top: var(--space-md); }
    .sp-pt-lg { padding-top: var(--space-lg); }

    .sp-pb-xs { padding-bottom: var(--space-xs); }
    .sp-pb-sm { padding-bottom: var(--space-sm); }
    .sp-pb-md { padding-bottom: var(--space-md); }
    .sp-pb-lg { padding-bottom: var(--space-lg); }

    .sp-pl-xs { padding-left: var(--space-xs); }
    .sp-pl-sm { padding-left: var(--space-sm); }
    .sp-pl-md { padding-left: var(--space-md); }
    .sp-pl-lg { padding-left: var(--space-lg); }

    .sp-pr-xs { padding-right: var(--space-xs); }
    .sp-pr-sm { padding-right: var(--space-sm); }
    .sp-pr-md { padding-right: var(--space-md); }
    .sp-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .sp-p-0 { padding: 0; }
    .sp-px-0 { padding-left: 0; padding-right: 0; }
    .sp-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .sp-m-xs { margin: var(--space-xs); }
    .sp-m-sm { margin: var(--space-sm); }
    .sp-m-md { margin: var(--space-md); }
    .sp-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .sp-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .sp-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .sp-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .sp-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .sp-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .sp-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .sp-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .sp-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .sp-mt-xs { margin-top: var(--space-xs); }
    .sp-mt-sm { margin-top: var(--space-sm); }
    .sp-mt-md { margin-top: var(--space-md); }
    .sp-mt-lg { margin-top: var(--space-lg); }

    .sp-mb-xs { margin-bottom: var(--space-xs); }
    .sp-mb-sm { margin-bottom: var(--space-sm); }
    .sp-mb-md { margin-bottom: var(--space-md); }
    .sp-mb-lg { margin-bottom: var(--space-lg); }

    .sp-ml-xs { margin-left: var(--space-xs); }
    .sp-ml-sm { margin-left: var(--space-sm); }
    .sp-ml-md { margin-left: var(--space-md); }
    .sp-ml-lg { margin-left: var(--space-lg); }

    .sp-mr-xs { margin-right: var(--space-xs); }
    .sp-mr-sm { margin-right: var(--space-sm); }
    .sp-mr-md { margin-right: var(--space-md); }
    .sp-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .sp-m-0 { margin: 0; }
    .sp-mx-0 { margin-left: 0; margin-right: 0; }
    .sp-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .sp-w-0   { --w: 0%; width: var(--w); }
    .sp-w-5   { --w: 5%; width: var(--w); }
    .sp-w-10  { --w: 10%; width: var(--w); }
    .sp-w-15  { --w: 15%; width: var(--w); }
    .sp-w-20  { --w: 20%; width: var(--w); }
    .sp-w-25  { --w: 25%; width: var(--w); }
    .sp-w-30  { --w: 30%; width: var(--w); }
    .sp-w-35  { --w: 35%; width: var(--w); }
    .sp-w-40  { --w: 40%; width: var(--w); }
    .sp-w-45  { --w: 45%; width: var(--w); }
    .sp-w-50  { --w: 50%; width: var(--w); }
    .sp-w-55  { --w: 55%; width: var(--w); }
    .sp-w-60  { --w: 60%; width: var(--w); }
    .sp-w-65  { --w: 65%; width: var(--w); }
    .sp-w-70  { --w: 70%; width: var(--w); }
    .sp-w-75  { --w: 75%; width: var(--w); }
    .sp-w-80  { --w: 80%; width: var(--w); }
    .sp-w-85  { --w: 85%; width: var(--w); }
    .sp-w-90  { --w: 90%; width: var(--w); }
    .sp-w-95  { --w: 95%; width: var(--w); }
    .sp-w-100 { --w: 100%; width: var(--w); }

    .sp-w-vw-0   { --w: 0vw; width: var(--w); }
    .sp-w-vw-5   { --w: 5vw; width: var(--w); }
    .sp-w-vw-10  { --w: 10vw; width: var(--w); }
    .sp-w-vw-15  { --w: 15vw; width: var(--w); }
    .sp-w-vw-20  { --w: 20vw; width: var(--w); }
    .sp-w-vw-25  { --w: 25vw; width: var(--w); }
    .sp-w-vw-30  { --w: 30vw; width: var(--w); }
    .sp-w-vw-35  { --w: 35vw; width: var(--w); }
    .sp-w-vw-40  { --w: 40vw; width: var(--w); }
    .sp-w-vw-45  { --w: 45vw; width: var(--w); }
    .sp-w-vw-50  { --w: 50vw; width: var(--w); }
    .sp-w-vw-55  { --w: 55vw; width: var(--w); }
    .sp-w-vw-60  { --w: 60vw; width: var(--w); }
    .sp-w-vw-65  { --w: 65vw; width: var(--w); }
    .sp-w-vw-70  { --w: 70vw; width: var(--w); }
    .sp-w-vw-75  { --w: 75vw; width: var(--w); }
    .sp-w-vw-80  { --w: 80vw; width: var(--w); }
    .sp-w-vw-85  { --w: 85vw; width: var(--w); }
    .sp-w-vw-90  { --w: 90vw; width: var(--w); }
    .sp-w-vw-95  { --w: 95vw; width: var(--w); }
    .sp-w-vw-100 { --w: 100vw; width: var(--w); }

    .sp-coln-1  { --w: calc(100% / 1); width: var(--w); }
    .sp-coln-2  { --w: calc(100% / 2); width: var(--w); }
    .sp-coln-3  { --w: calc(100% / 3); width: var(--w); }
    .sp-coln-4  { --w: calc(100% / 4); width: var(--w); }
    .sp-coln-5  { --w: calc(100% / 5); width: var(--w); }
    .sp-coln-6  { --w: calc(100% / 6); width: var(--w); }
    .sp-coln-7  { --w: calc(100% / 7); width: var(--w); }
    .sp-coln-8  { --w: calc(100% / 8); width: var(--w); }
    .sp-coln-9  { --w: calc(100% / 9); width: var(--w); }
    .sp-coln-10 { --w: calc(100% / 10); width: var(--w); }
    .sp-coln-11 { --w: calc(100% / 11); width: var(--w); }
    .sp-coln-12 { --w: calc(100% / 12); width: var(--w); }

    /*-----ALTEZZA-----*/
    .sp-h-0   { --h: 0%; height: var(--h); }
    .sp-h-5   { --h: 5%; height: var(--h); }
    .sp-h-10  { --h: 10%; height: var(--h); }
    .sp-h-15  { --h: 15%; height: var(--h); }
    .sp-h-20  { --h: 20%; height: var(--h); }
    .sp-h-25  { --h: 25%; height: var(--h); }
    .sp-h-30  { --h: 30%; height: var(--h); }
    .sp-h-35  { --h: 35%; height: var(--h); }
    .sp-h-40  { --h: 40%; height: var(--h); }
    .sp-h-45  { --h: 45%; height: var(--h); }
    .sp-h-50  { --h: 50%; height: var(--h); }
    .sp-h-55  { --h: 55%; height: var(--h); }
    .sp-h-60  { --h: 60%; height: var(--h); }
    .sp-h-65  { --h: 65%; height: var(--h); }
    .sp-h-70  { --h: 70%; height: var(--h); }
    .sp-h-75  { --h: 75%; height: var(--h); }
    .sp-h-80  { --h: 80%; height: var(--h); }
    .sp-h-85  { --h: 85%; height: var(--h); }
    .sp-h-90  { --h: 90%; height: var(--h); }
    .sp-h-95  { --h: 95%; height: var(--h); }
    .sp-h-100 { --h: 100%; height: var(--h); }

    .sp-h-min-100 { min-height: 100%; }

    .sp-h-vh-0   { --h: 0vh; height: var(--h); }
    .sp-h-vh-5   { --h: 5vh; height: var(--h); }
    .sp-h-vh-10  { --h: 10vh; height: var(--h); }
    .sp-h-vh-15  { --h: 15vh; height: var(--h); }
    .sp-h-vh-20  { --h: 20vh; height: var(--h); }
    .sp-h-vh-25  { --h: 25vh; height: var(--h); }
    .sp-h-vh-30  { --h: 30vh; height: var(--h); }
    .sp-h-vh-35  { --h: 35vh; height: var(--h); }
    .sp-h-vh-40  { --h: 40vh; height: var(--h); }
    .sp-h-vh-45  { --h: 45vh; height: var(--h); }
    .sp-h-vh-50  { --h: 50vh; height: var(--h); }
    .sp-h-vh-55  { --h: 55vh; height: var(--h); }
    .sp-h-vh-60  { --h: 60vh; height: var(--h); }
    .sp-h-vh-65  { --h: 65vh; height: var(--h); }
    .sp-h-vh-70  { --h: 70vh; height: var(--h); }
    .sp-h-vh-75  { --h: 75vh; height: var(--h); }
    .sp-h-vh-80  { --h: 80vh; height: var(--h); }
    .sp-h-vh-85  { --h: 85vh; height: var(--h); }
    .sp-h-vh-90  { --h: 90vh; height: var(--h); }
    .sp-h-vh-95  { --h: 95vh; height: var(--h); }
    .sp-h-vh-100 { --h: 100vh; height: var(--h); }

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .sp-d-flex { display: flex; }
    .sp-d-inline-flex { display: inline-flex; }
    .sp-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .sp-justify-start { justify-content: flex-start; }
    .sp-justify-center { justify-content: center; }
    .sp-justify-end { justify-content: flex-end; }
    .sp-justify-between { justify-content: space-between; }
    .sp-justify-around { justify-content: space-around; }
    .sp-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .sp-align-start { align-items: flex-start; }
    .sp-align-center { align-items: center; }
    .sp-align-end { align-items: flex-end; }
    .sp-align-baseline { align-items: baseline; }
    .sp-align-stretch { align-items: stretch; }

    /* Align Self */
    .sp-align-self-start { align-self: flex-start; }
    .sp-align-self-center { align-self: center; }
    .sp-align-self-end { align-self: flex-end; }
    .sp-align-self-baseline { align-self: baseline; }
    .sp-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .sp-flex-row { flex-direction: row; }
    .sp-flex-row-reverse { flex-direction: row-reverse; }
    .sp-flex-column { flex-direction: column; }
    .sp-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .sp-flex-nowrap { flex-wrap: nowrap; }
    .sp-flex-wrap { flex-wrap: wrap; }
    .sp-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .sp-flex-grow-0 { flex-grow: 0; }
    .sp-flex-grow-1 { flex-grow: 1; }

    .sp-flex-shrink-0 { flex-shrink: 0; }
    .sp-flex-shrink-1 { flex-shrink: 1; }

    .sp-flex-basis-auto { flex-basis: auto; }
    .sp-flex-basis-100 { flex-basis: 100%; }
    .sp-flex-basis-50 { flex-basis: 50%; }
    .sp-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .sp-flex-0 { display: none; }

    /*-----GRIGLIE (SP / SMALL DEVICE)-----*/
    .sp-d-grid { display: grid; }
    .sp-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .sp-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .sp-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .sp-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .sp-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .sp-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .sp-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .sp-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .sp-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .sp-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .sp-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .sp-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .sp-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .sp-grid-cols-auto      { grid-template-columns: auto; }
    .sp-grid-cols-min       { grid-template-columns: min-content; }
    .sp-grid-cols-max       { grid-template-columns: max-content; }

    .sp-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .sp-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .sp-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .sp-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .sp-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .sp-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .sp-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .sp-gap-xxs { gap: var(--space-xxs); }
    .sp-gap-xs  { gap: var(--space-xs); }
    .sp-gap-sm  { gap: var(--space-sm); }
    .sp-gap-md  { gap: var(--space-md); }
    .sp-gap-lg  { gap: var(--space-lg); }
    .sp-gap-xl  { gap: var(--space-xl); }
    .sp-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .sp-gap-x-xxs { column-gap: var(--space-xxs); }
    .sp-gap-x-xs  { column-gap: var(--space-xs); }
    .sp-gap-x-sm  { column-gap: var(--space-sm); }
    .sp-gap-x-md  { column-gap: var(--space-md); }
    .sp-gap-x-lg  { column-gap: var(--space-lg); }
    .sp-gap-x-xl  { column-gap: var(--space-xl); }
    .sp-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .sp-gap-y-xxs { row-gap: var(--space-xxs); }
    .sp-gap-y-xs  { row-gap: var(--space-xs); }
    .sp-gap-y-sm  { row-gap: var(--space-sm); }
    .sp-gap-y-md  { row-gap: var(--space-md); }
    .sp-gap-y-lg  { row-gap: var(--space-lg); }
    .sp-gap-y-xl  { row-gap: var(--space-xl); }
    .sp-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .sp-justify-items-start    { justify-items: start; }
    .sp-justify-items-center   { justify-items: center; }
    .sp-justify-items-end      { justify-items: end; }
    .sp-justify-items-stretch  { justify-items: stretch; }

    .sp-align-items-start      { align-items: start; }
    .sp-align-items-center     { align-items: center; }
    .sp-align-items-end        { align-items: end; }
    .sp-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .sp-justify-start      { justify-content: flex-start; }
    .sp-justify-center     { justify-content: center; }
    .sp-justify-end        { justify-content: flex-end; }
    .sp-justify-between    { justify-content: space-between; }
    .sp-justify-around     { justify-content: space-around; }
    .sp-justify-evenly     { justify-content: space-evenly; }

    .sp-align-start        { align-content: flex-start; }
    .sp-align-center       { align-content: center; }
    .sp-align-end          { align-content: flex-end; }
    .sp-align-between      { align-content: space-between; }
    .sp-align-around       { align-content: space-around; }
    .sp-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .sp-place-self-start     { place-self: start; }
    .sp-place-self-end       { place-self: end; }
    .sp-place-self-center    { place-self: center; }
    .sp-place-self-stretch   { place-self: stretch; }

    .sp-align-self-start     { align-self: flex-start; }
    .sp-align-self-center    { align-self: center; }
    .sp-align-self-end       { align-self: flex-end; }
    .sp-align-self-stretch   { align-self: stretch; }

    .sp-justify-self-start   { justify-self: start; }
    .sp-justify-self-end     { justify-self: end; }
    .sp-justify-self-center  { justify-self: center; }
    .sp-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .sp-col-span-1  { grid-column: span 1 / span 1; }
    .sp-col-span-2  { grid-column: span 2 / span 2; }
    .sp-col-span-3  { grid-column: span 3 / span 3; }
    .sp-col-span-4  { grid-column: span 4 / span 4; }
    .sp-col-span-5  { grid-column: span 5 / span 5; }
    .sp-col-span-6  { grid-column: span 6 / span 6; }
    .sp-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .sp-col-start-1  { grid-column-start: 1; }
    .sp-col-start-2  { grid-column-start: 2; }
    .sp-col-start-3  { grid-column-start: 3; }
    .sp-col-start-4  { grid-column-start: 4; }

    .sp-col-end-1    { grid-column-end: 1; }
    .sp-col-end-2    { grid-column-end: 2; }
    .sp-col-end-3    { grid-column-end: 3; }
    .sp-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .sp-row-span-1  { grid-row: span 1 / span 1; }
    .sp-row-span-2  { grid-row: span 2 / span 2; }
    .sp-row-span-3  { grid-row: span 3 / span 3; }
    .sp-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .sp-row-start-1  { grid-row-start: 1; }
    .sp-row-start-2  { grid-row-start: 2; }
    .sp-row-start-3  { grid-row-start: 3; }

    .sp-row-end-1    { grid-row-end: 1; }
    .sp-row-end-2    { grid-row-end: 2; }
    .sp-row-end-3    { grid-row-end: 3; }


    /*-----VISIBILITA-----*/
    .sp-d-block{ display: block; }
    .sp-d-inline-block{ display: inline-block; }
    .sp-d-none{ display: none; }

    /*-----NAVIGATION BAR-----*/
    .bniBtn .indicator{
        width: auto;
    }
    /*-----NAVIGATION RAIL-----*/
    .navRailArea{
        display: none;
    }
}
/*----------SMARTPHONE----------*/
@media only screen and (max-width:42.99rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .sm-alL{ text-align: left; }
    .sm-alC{ text-align: center; }
    .sm-alR{ text-align: right; }
    .sm-alJ{ text-align: justify; }
    br.sm-noBreak{ display: none; }
    br.sm-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .sm-p-xs { padding: var(--space-xs); }
    .sm-p-sm { padding: var(--space-sm); }
    .sm-p-md { padding: var(--space-md); }
    .sm-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .sm-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .sm-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .sm-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .sm-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .sm-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .sm-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .sm-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .sm-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .sm-pt-xs { padding-top: var(--space-xs); }
    .sm-pt-sm { padding-top: var(--space-sm); }
    .sm-pt-md { padding-top: var(--space-md); }
    .sm-pt-lg { padding-top: var(--space-lg); }

    .sm-pb-xs { padding-bottom: var(--space-xs); }
    .sm-pb-sm { padding-bottom: var(--space-sm); }
    .sm-pb-md { padding-bottom: var(--space-md); }
    .sm-pb-lg { padding-bottom: var(--space-lg); }

    .sm-pl-xs { padding-left: var(--space-xs); }
    .sm-pl-sm { padding-left: var(--space-sm); }
    .sm-pl-md { padding-left: var(--space-md); }
    .sm-pl-lg { padding-left: var(--space-lg); }

    .sm-pr-xs { padding-right: var(--space-xs); }
    .sm-pr-sm { padding-right: var(--space-sm); }
    .sm-pr-md { padding-right: var(--space-md); }
    .sm-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .sm-p-0 { padding: 0; }
    .sm-px-0 { padding-left: 0; padding-right: 0; }
    .sm-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .sm-m-xs { margin: var(--space-xs); }
    .sm-m-sm { margin: var(--space-sm); }
    .sm-m-md { margin: var(--space-md); }
    .sm-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .sm-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .sm-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .sm-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .sm-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .sm-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .sm-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .sm-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .sm-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .sm-mt-xs { margin-top: var(--space-xs); }
    .sm-mt-sm { margin-top: var(--space-sm); }
    .sm-mt-md { margin-top: var(--space-md); }
    .sm-mt-lg { margin-top: var(--space-lg); }

    .sm-mb-xs { margin-bottom: var(--space-xs); }
    .sm-mb-sm { margin-bottom: var(--space-sm); }
    .sm-mb-md { margin-bottom: var(--space-md); }
    .sm-mb-lg { margin-bottom: var(--space-lg); }

    .sm-ml-xs { margin-left: var(--space-xs); }
    .sm-ml-sm { margin-left: var(--space-sm); }
    .sm-ml-md { margin-left: var(--space-md); }
    .sm-ml-lg { margin-left: var(--space-lg); }

    .sm-mr-xs { margin-right: var(--space-xs); }
    .sm-mr-sm { margin-right: var(--space-sm); }
    .sm-mr-md { margin-right: var(--space-md); }
    .sm-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .sm-m-0 { margin: 0; }
    .sm-mx-0 { margin-left: 0; margin-right: 0; }
    .sm-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .sm-w-0   { --w: 0%; width: var(--w); }
    .sm-w-5   { --w: 5%; width: var(--w); }
    .sm-w-10  { --w: 10%; width: var(--w); }
    .sm-w-15  { --w: 15%; width: var(--w); }
    .sm-w-20  { --w: 20%; width: var(--w); }
    .sm-w-25  { --w: 25%; width: var(--w); }
    .sm-w-30  { --w: 30%; width: var(--w); }
    .sm-w-35  { --w: 35%; width: var(--w); }
    .sm-w-40  { --w: 40%; width: var(--w); }
    .sm-w-45  { --w: 45%; width: var(--w); }
    .sm-w-50  { --w: 50%; width: var(--w); }
    .sm-w-55  { --w: 55%; width: var(--w); }
    .sm-w-60  { --w: 60%; width: var(--w); }
    .sm-w-65  { --w: 65%; width: var(--w); }
    .sm-w-70  { --w: 70%; width: var(--w); }
    .sm-w-75  { --w: 75%; width: var(--w); }
    .sm-w-80  { --w: 80%; width: var(--w); }
    .sm-w-85  { --w: 85%; width: var(--w); }
    .sm-w-90  { --w: 90%; width: var(--w); }
    .sm-w-95  { --w: 95%; width: var(--w); }
    .sm-w-100 { --w: 100%; width: var(--w); }

    .sm-w-vw-0   { --w: 0vw; width: var(--w); }
    .sm-w-vw-5   { --w: 5vw; width: var(--w); }
    .sm-w-vw-10  { --w: 10vw; width: var(--w); }
    .sm-w-vw-15  { --w: 15vw; width: var(--w); }
    .sm-w-vw-20  { --w: 20vw; width: var(--w); }
    .sm-w-vw-25  { --w: 25vw; width: var(--w); }
    .sm-w-vw-30  { --w: 30vw; width: var(--w); }
    .sm-w-vw-35  { --w: 35vw; width: var(--w); }
    .sm-w-vw-40  { --w: 40vw; width: var(--w); }
    .sm-w-vw-45  { --w: 45vw; width: var(--w); }
    .sm-w-vw-50  { --w: 50vw; width: var(--w); }
    .sm-w-vw-55  { --w: 55vw; width: var(--w); }
    .sm-w-vw-60  { --w: 60vw; width: var(--w); }
    .sm-w-vw-65  { --w: 65vw; width: var(--w); }
    .sm-w-vw-70  { --w: 70vw; width: var(--w); }
    .sm-w-vw-75  { --w: 75vw; width: var(--w); }
    .sm-w-vw-80  { --w: 80vw; width: var(--w); }
    .sm-w-vw-85  { --w: 85vw; width: var(--w); }
    .sm-w-vw-90  { --w: 90vw; width: var(--w); }
    .sm-w-vw-95  { --w: 95vw; width: var(--w); }
    .sm-w-vw-100 { --w: 100vw; width: var(--w); }

    .sm-coln-1   { --w: calc(100% / 1); width: var(--w); }
    .sm-coln-2   { --w: calc(100% / 2); width: var(--w); }
    .sm-coln-3   { --w: calc(100% / 3); width: var(--w); }
    .sm-coln-4   { --w: calc(100% / 4); width: var(--w); }
    .sm-coln-5   { --w: calc(100% / 5); width: var(--w); }
    .sm-coln-6   { --w: calc(100% / 6); width: var(--w); }
    .sm-coln-7   { --w: calc(100% / 7); width: var(--w); }
    .sm-coln-8   { --w: calc(100% / 8); width: var(--w); }
    .sm-coln-9   { --w: calc(100% / 9); width: var(--w); }
    .sm-coln-10  { --w: calc(100% / 10); width: var(--w); }
    .sm-coln-11  { --w: calc(100% / 11); width: var(--w); }
    .sm-coln-12  { --w: calc(100% / 12); width: var(--w); }

    /*-----ALTEZZA-----*/
    .sm-h-0   { --h: 0%; height: var(--h); }
    .sm-h-5   { --h: 5%; height: var(--h); }
    .sm-h-10  { --h: 10%; height: var(--h); }
    .sm-h-15  { --h: 15%; height: var(--h); }
    .sm-h-20  { --h: 20%; height: var(--h); }
    .sm-h-25  { --h: 25%; height: var(--h); }
    .sm-h-30  { --h: 30%; height: var(--h); }
    .sm-h-35  { --h: 35%; height: var(--h); }
    .sm-h-40  { --h: 40%; height: var(--h); }
    .sm-h-45  { --h: 45%; height: var(--h); }
    .sm-h-50  { --h: 50%; height: var(--h); }
    .sm-h-55  { --h: 55%; height: var(--h); }
    .sm-h-60  { --h: 60%; height: var(--h); }
    .sm-h-65  { --h: 65%; height: var(--h); }
    .sm-h-70  { --h: 70%; height: var(--h); }
    .sm-h-75  { --h: 75%; height: var(--h); }
    .sm-h-80  { --h: 80%; height: var(--h); }
    .sm-h-85  { --h: 85%; height: var(--h); }
    .sm-h-90  { --h: 90%; height: var(--h); }
    .sm-h-95  { --h: 95%; height: var(--h); }
    .sm-h-100 { --h: 100%; height: var(--h); }
    .sm-h-min-100 { min-height: 100%; }

    .sm-h-vh-0   { --h: 0vh; height: var(--h); }
    .sm-h-vh-5   { --h: 5vh; height: var(--h); }
    .sm-h-vh-10  { --h: 10vh; height: var(--h); }
    .sm-h-vh-15  { --h: 15vh; height: var(--h); }
    .sm-h-vh-20  { --h: 20vh; height: var(--h); }
    .sm-h-vh-25  { --h: 25vh; height: var(--h); }
    .sm-h-vh-30  { --h: 30vh; height: var(--h); }
    .sm-h-vh-35  { --h: 35vh; height: var(--h); }
    .sm-h-vh-40  { --h: 40vh; height: var(--h); }
    .sm-h-vh-45  { --h: 45vh; height: var(--h); }
    .sm-h-vh-50  { --h: 50vh; height: var(--h); }
    .sm-h-vh-55  { --h: 55vh; height: var(--h); }
    .sm-h-vh-60  { --h: 60vh; height: var(--h); }
    .sm-h-vh-65  { --h: 65vh; height: var(--h); }
    .sm-h-vh-70  { --h: 70vh; height: var(--h); }
    .sm-h-vh-75  { --h: 75vh; height: var(--h); }
    .sm-h-vh-80  { --h: 80vh; height: var(--h); }
    .sm-h-vh-85  { --h: 85vh; height: var(--h); }
    .sm-h-vh-90  { --h: 90vh; height: var(--h); }
    .sm-h-vh-95  { --h: 95vh; height: var(--h); }
    .sm-h-vh-100 { --h: 100vh; height: var(--h); }

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .sm-d-flex { display: flex; }
    .sm-d-inline-flex { display: inline-flex; }
    .sm-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .sm-justify-start { justify-content: flex-start; }
    .sm-justify-center { justify-content: center; }
    .sm-justify-end { justify-content: flex-end; }
    .sm-justify-between { justify-content: space-between; }
    .sm-justify-around { justify-content: space-around; }
    .sm-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .sm-align-start { align-items: flex-start; }
    .sm-align-center { align-items: center; }
    .sm-align-end { align-items: flex-end; }
    .sm-align-baseline { align-items: baseline; }
    .sm-align-stretch { align-items: stretch; }

    /* Align Self */
    .sm-align-self-start { align-self: flex-start; }
    .sm-align-self-center { align-self: center; }
    .sm-align-self-end { align-self: flex-end; }
    .sm-align-self-baseline { align-self: baseline; }
    .sm-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .sm-flex-row { flex-direction: row; }
    .sm-flex-row-reverse { flex-direction: row-reverse; }
    .sm-flex-column { flex-direction: column; }
    .sm-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .sm-flex-nowrap { flex-wrap: nowrap; }
    .sm-flex-wrap { flex-wrap: wrap; }
    .sm-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .sm-flex-grow-0 { flex-grow: 0; }
    .sm-flex-grow-1 { flex-grow: 1; }

    .sm-flex-shrink-0 { flex-shrink: 0; }
    .sm-flex-shrink-1 { flex-shrink: 1; }

    .sm-flex-basis-auto { flex-basis: auto; }
    .sm-flex-basis-100 { flex-basis: 100%; }
    .sm-flex-basis-50 { flex-basis: 50%; }
    .sm-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .sm-flex-0 { display: none; }

    /*-----GRIGLIE (SM / SMALL)-----*/
    .sm-d-grid { display: grid; }
    .sm-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .sm-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .sm-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .sm-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .sm-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .sm-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .sm-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .sm-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .sm-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .sm-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .sm-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .sm-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .sm-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .sm-grid-cols-auto      { grid-template-columns: auto; }
    .sm-grid-cols-min       { grid-template-columns: min-content; }
    .sm-grid-cols-max       { grid-template-columns: max-content; }

    .sm-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .sm-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .sm-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .sm-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .sm-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .sm-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .sm-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .sm-gap-xxs { gap: var(--space-xxs); }
    .sm-gap-xs  { gap: var(--space-xs); }
    .sm-gap-sm  { gap: var(--space-sm); }
    .sm-gap-md  { gap: var(--space-md); }
    .sm-gap-lg  { gap: var(--space-lg); }
    .sm-gap-xl  { gap: var(--space-xl); }
    .sm-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .sm-gap-x-xxs { column-gap: var(--space-xxs); }
    .sm-gap-x-xs  { column-gap: var(--space-xs); }
    .sm-gap-x-sm  { column-gap: var(--space-sm); }
    .sm-gap-x-md  { column-gap: var(--space-md); }
    .sm-gap-x-lg  { column-gap: var(--space-lg); }
    .sm-gap-x-xl  { column-gap: var(--space-xl); }
    .sm-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .sm-gap-y-xxs { row-gap: var(--space-xxs); }
    .sm-gap-y-xs  { row-gap: var(--space-xs); }
    .sm-gap-y-sm  { row-gap: var(--space-sm); }
    .sm-gap-y-md  { row-gap: var(--space-md); }
    .sm-gap-y-lg  { row-gap: var(--space-lg); }
    .sm-gap-y-xl  { row-gap: var(--space-xl); }
    .sm-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .sm-justify-items-start    { justify-items: start; }
    .sm-justify-items-center   { justify-items: center; }
    .sm-justify-items-end      { justify-items: end; }
    .sm-justify-items-stretch  { justify-items: stretch; }

    .sm-align-items-start      { align-items: start; }
    .sm-align-items-center     { align-items: center; }
    .sm-align-items-end        { align-items: end; }
    .sm-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .sm-justify-start      { justify-content: flex-start; }
    .sm-justify-center     { justify-content: center; }
    .sm-justify-end        { justify-content: flex-end; }
    .sm-justify-between    { justify-content: space-between; }
    .sm-justify-around     { justify-content: space-around; }
    .sm-justify-evenly     { justify-content: space-evenly; }

    .sm-align-start        { align-content: flex-start; }
    .sm-align-center       { align-content: center; }
    .sm-align-end          { align-content: flex-end; }
    .sm-align-between      { align-content: space-between; }
    .sm-align-around       { align-content: space-around; }
    .sm-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .sm-place-self-start     { place-self: start; }
    .sm-place-self-end       { place-self: end; }
    .sm-place-self-center    { place-self: center; }
    .sm-place-self-stretch   { place-self: stretch; }

    .sm-align-self-start     { align-self: flex-start; }
    .sm-align-self-center    { align-self: center; }
    .sm-align-self-end       { align-self: flex-end; }
    .sm-align-self-stretch   { align-self: stretch; }

    .sm-justify-self-start   { justify-self: start; }
    .sm-justify-self-end     { justify-self: end; }
    .sm-justify-self-center  { justify-self: center; }
    .sm-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .sm-col-span-1  { grid-column: span 1 / span 1; }
    .sm-col-span-2  { grid-column: span 2 / span 2; }
    .sm-col-span-3  { grid-column: span 3 / span 3; }
    .sm-col-span-4  { grid-column: span 4 / span 4; }
    .sm-col-span-5  { grid-column: span 5 / span 5; }
    .sm-col-span-6  { grid-column: span 6 / span 6; }
    .sm-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .sm-col-start-1  { grid-column-start: 1; }
    .sm-col-start-2  { grid-column-start: 2; }
    .sm-col-start-3  { grid-column-start: 3; }
    .sm-col-start-4  { grid-column-start: 4; }

    .sm-col-end-1    { grid-column-end: 1; }
    .sm-col-end-2    { grid-column-end: 2; }
    .sm-col-end-3    { grid-column-end: 3; }
    .sm-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .sm-row-span-1  { grid-row: span 1 / span 1; }
    .sm-row-span-2  { grid-row: span 2 / span 2; }
    .sm-row-span-3  { grid-row: span 3 / span 3; }
    .sm-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .sm-row-start-1  { grid-row-start: 1; }
    .sm-row-start-2  { grid-row-start: 2; }
    .sm-row-start-3  { grid-row-start: 3; }

    .sm-row-end-1    { grid-row-end: 1; }
    .sm-row-end-2    { grid-row-end: 2; }
    .sm-row-end-3    { grid-row-end: 3; }

    /*-----VISIBILITA-----*/
    .sm-d-block{ display: block; }
    .sm-d-inline-block{ display: inline-block; }
    .sm-d-none{ display: none; }

    /*-----FAB-----*/
    .fab.ext{
        width: 3.5rem;
        min-width: initial;
        padding: 0;
    }
    .fab.ext span:not(.ripple){
        width: 0;
        visibility: hidden;
        opacity: 0;
    }
    /*-----NAVIGATION RAIL-----*/
    .navRailArea{
        display: none;
    }
}
/*----------TABLET----------*/
@media only screen and (min-width:43rem) and (max-width:61.99rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .tb-alL{ text-align: left; }
    .tb-alC{ text-align: center; }
    .tb-alR{ text-align: right; }
    .tb-alJ{ text-align: justify; }
    br.tb-noBreak{ display: none; }
    br.tb-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .tb-p-xs { padding: var(--space-xs); }
    .tb-p-sm { padding: var(--space-sm); }
    .tb-p-md { padding: var(--space-md); }
    .tb-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .tb-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .tb-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .tb-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .tb-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .tb-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .tb-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .tb-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .tb-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .tb-pt-xs { padding-top: var(--space-xs); }
    .tb-pt-sm { padding-top: var(--space-sm); }
    .tb-pt-md { padding-top: var(--space-md); }
    .tb-pt-lg { padding-top: var(--space-lg); }

    .tb-pb-xs { padding-bottom: var(--space-xs); }
    .tb-pb-sm { padding-bottom: var(--space-sm); }
    .tb-pb-md { padding-bottom: var(--space-md); }
    .tb-pb-lg { padding-bottom: var(--space-lg); }

    .tb-pl-xs { padding-left: var(--space-xs); }
    .tb-pl-sm { padding-left: var(--space-sm); }
    .tb-pl-md { padding-left: var(--space-md); }
    .tb-pl-lg { padding-left: var(--space-lg); }

    .tb-pr-xs { padding-right: var(--space-xs); }
    .tb-pr-sm { padding-right: var(--space-sm); }
    .tb-pr-md { padding-right: var(--space-md); }
    .tb-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .tb-p-0 { padding: 0; }
    .tb-px-0 { padding-left: 0; padding-right: 0; }
    .tb-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .tb-m-xs { margin: var(--space-xs); }
    .tb-m-sm { margin: var(--space-sm); }
    .tb-m-md { margin: var(--space-md); }
    .tb-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .tb-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .tb-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .tb-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .tb-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .tb-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .tb-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .tb-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .tb-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .tb-mt-xs { margin-top: var(--space-xs); }
    .tb-mt-sm { margin-top: var(--space-sm); }
    .tb-mt-md { margin-top: var(--space-md); }
    .tb-mt-lg { margin-top: var(--space-lg); }

    .tb-mb-xs { margin-bottom: var(--space-xs); }
    .tb-mb-sm { margin-bottom: var(--space-sm); }
    .tb-mb-md { margin-bottom: var(--space-md); }
    .tb-mb-lg { margin-bottom: var(--space-lg); }

    .tb-ml-xs { margin-left: var(--space-xs); }
    .tb-ml-sm { margin-left: var(--space-sm); }
    .tb-ml-md { margin-left: var(--space-md); }
    .tb-ml-lg { margin-left: var(--space-lg); }

    .tb-mr-xs { margin-right: var(--space-xs); }
    .tb-mr-sm { margin-right: var(--space-sm); }
    .tb-mr-md { margin-right: var(--space-md); }
    .tb-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .tb-m-0 { margin: 0; }
    .tb-mx-0 { margin-left: 0; margin-right: 0; }
    .tb-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .tb-w-0   { --w: 0%; width: var(--w); }
    .tb-w-5   { --w: 5%; width: var(--w); }
    .tb-w-10  { --w: 10%; width: var(--w); }
    .tb-w-15  { --w: 15%; width: var(--w); }
    .tb-w-20  { --w: 20%; width: var(--w); }
    .tb-w-25  { --w: 25%; width: var(--w); }
    .tb-w-30  { --w: 30%; width: var(--w); }
    .tb-w-35  { --w: 35%; width: var(--w); }
    .tb-w-40  { --w: 40%; width: var(--w); }
    .tb-w-45  { --w: 45%; width: var(--w); }
    .tb-w-50  { --w: 50%; width: var(--w); }
    .tb-w-55  { --w: 55%; width: var(--w); }
    .tb-w-60  { --w: 60%; width: var(--w); }
    .tb-w-65  { --w: 65%; width: var(--w); }
    .tb-w-70  { --w: 70%; width: var(--w); }
    .tb-w-75  { --w: 75%; width: var(--w); }
    .tb-w-80  { --w: 80%; width: var(--w); }
    .tb-w-85  { --w: 85%; width: var(--w); }
    .tb-w-90  { --w: 90%; width: var(--w); }
    .tb-w-95  { --w: 95%; width: var(--w); }
    .tb-w-100 { --w: 100%; width: var(--w); }

    .tb-w-vw-0   { --w: 0vw; width: var(--w); }
    .tb-w-vw-5   { --w: 5vw; width: var(--w); }
    .tb-w-vw-10  { --w: 10vw; width: var(--w); }
    .tb-w-vw-15  { --w: 15vw; width: var(--w); }
    .tb-w-vw-20  { --w: 20vw; width: var(--w); }
    .tb-w-vw-25  { --w: 25vw; width: var(--w); }
    .tb-w-vw-30  { --w: 30vw; width: var(--w); }
    .tb-w-vw-35  { --w: 35vw; width: var(--w); }
    .tb-w-vw-40  { --w: 40vw; width: var(--w); }
    .tb-w-vw-45  { --w: 45vw; width: var(--w); }
    .tb-w-vw-50  { --w: 50vw; width: var(--w); }
    .tb-w-vw-55  { --w: 55vw; width: var(--w); }
    .tb-w-vw-60  { --w: 60vw; width: var(--w); }
    .tb-w-vw-65  { --w: 65vw; width: var(--w); }
    .tb-w-vw-70  { --w: 70vw; width: var(--w); }
    .tb-w-vw-75  { --w: 75vw; width: var(--w); }
    .tb-w-vw-80  { --w: 80vw; width: var(--w); }
    .tb-w-vw-85  { --w: 85vw; width: var(--w); }
    .tb-w-vw-90  { --w: 90vw; width: var(--w); }
    .tb-w-vw-95  { --w: 95vw; width: var(--w); }
    .tb-w-vw-100 { --w: 100vw; width: var(--w); }

    .tb-coln-1  { --w: calc(100% / 1); width: var(--w); }
    .tb-coln-2  { --w: calc(100% / 2); width: var(--w); }
    .tb-coln-3  { --w: calc(100% / 3); width: var(--w); }
    .tb-coln-4  { --w: calc(100% / 4); width: var(--w); }
    .tb-coln-5  { --w: calc(100% / 5); width: var(--w); }
    .tb-coln-6  { --w: calc(100% / 6); width: var(--w); }
    .tb-coln-7  { --w: calc(100% / 7); width: var(--w); }
    .tb-coln-8  { --w: calc(100% / 8); width: var(--w); }
    .tb-coln-9  { --w: calc(100% / 9); width: var(--w); }
    .tb-coln-10 { --w: calc(100% / 10); width: var(--w); }
    .tb-coln-11 { --w: calc(100% / 11); width: var(--w); }
    .tb-coln-12 { --w: calc(100% / 12); width: var(--w); }

    /*-----ALTEZZA-----*/
    .tb-h-0   { --h: 0%; height: var(--h); }
    .tb-h-5   { --h: 5%; height: var(--h); }
    .tb-h-10  { --h: 10%; height: var(--h); }
    .tb-h-15  { --h: 15%; height: var(--h); }
    .tb-h-20  { --h: 20%; height: var(--h); }
    .tb-h-25  { --h: 25%; height: var(--h); }
    .tb-h-30  { --h: 30%; height: var(--h); }
    .tb-h-35  { --h: 35%; height: var(--h); }
    .tb-h-40  { --h: 40%; height: var(--h); }
    .tb-h-45  { --h: 45%; height: var(--h); }
    .tb-h-50  { --h: 50%; height: var(--h); }
    .tb-h-55  { --h: 55%; height: var(--h); }
    .tb-h-60  { --h: 60%; height: var(--h); }
    .tb-h-65  { --h: 65%; height: var(--h); }
    .tb-h-70  { --h: 70%; height: var(--h); }
    .tb-h-75  { --h: 75%; height: var(--h); }
    .tb-h-80  { --h: 80%; height: var(--h); }
    .tb-h-85  { --h: 85%; height: var(--h); }
    .tb-h-90  { --h: 90%; height: var(--h); }
    .tb-h-95  { --h: 95%; height: var(--h); }
    .tb-h-100 { --h: 100%; height: var(--h); }

    .tb-h-min-100 { min-height: 100%; }

    .tb-h-vh-0   { --h: 0vh; height: var(--h); }
    .tb-h-vh-5   { --h: 5vh; height: var(--h); }
    .tb-h-vh-10  { --h: 10vh; height: var(--h); }
    .tb-h-vh-15  { --h: 15vh; height: var(--h); }
    .tb-h-vh-20  { --h: 20vh; height: var(--h); }
    .tb-h-vh-25  { --h: 25vh; height: var(--h); }
    .tb-h-vh-30  { --h: 30vh; height: var(--h); }
    .tb-h-vh-35  { --h: 35vh; height: var(--h); }
    .tb-h-vh-40  { --h: 40vh; height: var(--h); }
    .tb-h-vh-45  { --h: 45vh; height: var(--h); }
    .tb-h-vh-50  { --h: 50vh; height: var(--h); }
    .tb-h-vh-55  { --h: 55vh; height: var(--h); }
    .tb-h-vh-60  { --h: 60vh; height: var(--h); }
    .tb-h-vh-65  { --h: 65vh; height: var(--h); }
    .tb-h-vh-70  { --h: 70vh; height: var(--h); }
    .tb-h-vh-75  { --h: 75vh; height: var(--h); }
    .tb-h-vh-80  { --h: 80vh; height: var(--h); }
    .tb-h-vh-85  { --h: 85vh; height: var(--h); }
    .tb-h-vh-90  { --h: 90vh; height: var(--h); }
    .tb-h-vh-95  { --h: 95vh; height: var(--h); }
    .tb-h-vh-100 { --h: 100vh; height: var(--h); }

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .tb-d-flex { display: flex; }
    .tb-d-inline-flex { display: inline-flex; }
    .tb-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .tb-justify-start { justify-content: flex-start; }
    .tb-justify-center { justify-content: center; }
    .tb-justify-end { justify-content: flex-end; }
    .tb-justify-between { justify-content: space-between; }
    .tb-justify-around { justify-content: space-around; }
    .tb-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .tb-align-start { align-items: flex-start; }
    .tb-align-center { align-items: center; }
    .tb-align-end { align-items: flex-end; }
    .tb-align-baseline { align-items: baseline; }
    .tb-align-stretch { align-items: stretch; }

    /* Align Self */
    .tb-align-self-start { align-self: flex-start; }
    .tb-align-self-center { align-self: center; }
    .tb-align-self-end { align-self: flex-end; }
    .tb-align-self-baseline { align-self: baseline; }
    .tb-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .tb-flex-row { flex-direction: row; }
    .tb-flex-row-reverse { flex-direction: row-reverse; }
    .tb-flex-column { flex-direction: column; }
    .tb-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .tb-flex-nowrap { flex-wrap: nowrap; }
    .tb-flex-wrap { flex-wrap: wrap; }
    .tb-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .tb-flex-grow-0 { flex-grow: 0; }
    .tb-flex-grow-1 { flex-grow: 1; }

    .tb-flex-shrink-0 { flex-shrink: 0; }
    .tb-flex-shrink-1 { flex-shrink: 1; }

    .tb-flex-basis-auto { flex-basis: auto; }
    .tb-flex-basis-100 { flex-basis: 100%; }
    .tb-flex-basis-50 { flex-basis: 50%; }
    .tb-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .tb-flex-0 { display: none; }

    /*-----GRIGLIE (TB / TABLET)-----*/
    .tb-d-grid { display: grid; }
    .tb-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .tb-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .tb-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .tb-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .tb-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .tb-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .tb-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .tb-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .tb-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .tb-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .tb-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .tb-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .tb-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .tb-grid-cols-auto      { grid-template-columns: auto; }
    .tb-grid-cols-min       { grid-template-columns: min-content; }
    .tb-grid-cols-max       { grid-template-columns: max-content; }

    .tb-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .tb-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .tb-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .tb-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .tb-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .tb-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .tb-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .tb-gap-xxs { gap: var(--space-xxs); }
    .tb-gap-xs  { gap: var(--space-xs); }
    .tb-gap-sm  { gap: var(--space-sm); }
    .tb-gap-md  { gap: var(--space-md); }
    .tb-gap-lg  { gap: var(--space-lg); }
    .tb-gap-xl  { gap: var(--space-xl); }
    .tb-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .tb-gap-x-xxs { column-gap: var(--space-xxs); }
    .tb-gap-x-xs  { column-gap: var(--space-xs); }
    .tb-gap-x-sm  { column-gap: var(--space-sm); }
    .tb-gap-x-md  { column-gap: var(--space-md); }
    .tb-gap-x-lg  { column-gap: var(--space-lg); }
    .tb-gap-x-xl  { column-gap: var(--space-xl); }
    .tb-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .tb-gap-y-xxs { row-gap: var(--space-xxs); }
    .tb-gap-y-xs  { row-gap: var(--space-xs); }
    .tb-gap-y-sm  { row-gap: var(--space-sm); }
    .tb-gap-y-md  { row-gap: var(--space-md); }
    .tb-gap-y-lg  { row-gap: var(--space-lg); }
    .tb-gap-y-xl  { row-gap: var(--space-xl); }
    .tb-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .tb-justify-items-start    { justify-items: start; }
    .tb-justify-items-center   { justify-items: center; }
    .tb-justify-items-end      { justify-items: end; }
    .tb-justify-items-stretch  { justify-items: stretch; }

    .tb-align-items-start      { align-items: start; }
    .tb-align-items-center     { align-items: center; }
    .tb-align-items-end        { align-items: end; }
    .tb-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .tb-justify-start      { justify-content: flex-start; }
    .tb-justify-center     { justify-content: center; }
    .tb-justify-end        { justify-content: flex-end; }
    .tb-justify-between    { justify-content: space-between; }
    .tb-justify-around     { justify-content: space-around; }
    .tb-justify-evenly     { justify-content: space-evenly; }

    .tb-align-start        { align-content: flex-start; }
    .tb-align-center       { align-content: center; }
    .tb-align-end          { align-content: flex-end; }
    .tb-align-between      { align-content: space-between; }
    .tb-align-around       { align-content: space-around; }
    .tb-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .tb-place-self-start     { place-self: start; }
    .tb-place-self-end       { place-self: end; }
    .tb-place-self-center    { place-self: center; }
    .tb-place-self-stretch   { place-self: stretch; }

    .tb-align-self-start     { align-self: flex-start; }
    .tb-align-self-center    { align-self: center; }
    .tb-align-self-end       { align-self: flex-end; }
    .tb-align-self-stretch   { align-self: stretch; }

    .tb-justify-self-start   { justify-self: start; }
    .tb-justify-self-end     { justify-self: end; }
    .tb-justify-self-center  { justify-self: center; }
    .tb-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .tb-col-span-1  { grid-column: span 1 / span 1; }
    .tb-col-span-2  { grid-column: span 2 / span 2; }
    .tb-col-span-3  { grid-column: span 3 / span 3; }
    .tb-col-span-4  { grid-column: span 4 / span 4; }
    .tb-col-span-5  { grid-column: span 5 / span 5; }
    .tb-col-span-6  { grid-column: span 6 / span 6; }
    .tb-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .tb-col-start-1  { grid-column-start: 1; }
    .tb-col-start-2  { grid-column-start: 2; }
    .tb-col-start-3  { grid-column-start: 3; }
    .tb-col-start-4  { grid-column-start: 4; }

    .tb-col-end-1    { grid-column-end: 1; }
    .tb-col-end-2    { grid-column-end: 2; }
    .tb-col-end-3    { grid-column-end: 3; }
    .tb-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .tb-row-span-1  { grid-row: span 1 / span 1; }
    .tb-row-span-2  { grid-row: span 2 / span 2; }
    .tb-row-span-3  { grid-row: span 3 / span 3; }
    .tb-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .tb-row-start-1  { grid-row-start: 1; }
    .tb-row-start-2  { grid-row-start: 2; }
    .tb-row-start-3  { grid-row-start: 3; }

    .tb-row-end-1    { grid-row-end: 1; }
    .tb-row-end-2    { grid-row-end: 2; }
    .tb-row-end-3    { grid-row-end: 3; }


    /*-----VISIBILITA-----*/
    .tb-d-block{ display: block; }
    .tb-d-inline-block{ display: inline-block; }
    .tb-d-none{ display: none; }
}
/*----------> TABLET----------*/
@media only screen and (min-width:62rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .ws-alL{ text-align: left; }
    .ws-alC{ text-align: center; }
    .ws-alR{ text-align: right; }
    .ws-alJ{ text-align: justify; }
    br.ws-noBreak{ display: none; }
    br.ws-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .ws-p-xs { padding: var(--space-xs); }
    .ws-p-sm { padding: var(--space-sm); }
    .ws-p-md { padding: var(--space-md); }
    .ws-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .ws-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .ws-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .ws-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .ws-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .ws-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .ws-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .ws-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .ws-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .ws-pt-xs { padding-top: var(--space-xs); }
    .ws-pt-sm { padding-top: var(--space-sm); }
    .ws-pt-md { padding-top: var(--space-md); }
    .ws-pt-lg { padding-top: var(--space-lg); }

    .ws-pb-xs { padding-bottom: var(--space-xs); }
    .ws-pb-sm { padding-bottom: var(--space-sm); }
    .ws-pb-md { padding-bottom: var(--space-md); }
    .ws-pb-lg { padding-bottom: var(--space-lg); }

    .ws-pl-xs { padding-left: var(--space-xs); }
    .ws-pl-sm { padding-left: var(--space-sm); }
    .ws-pl-md { padding-left: var(--space-md); }
    .ws-pl-lg { padding-left: var(--space-lg); }

    .ws-pr-xs { padding-right: var(--space-xs); }
    .ws-pr-sm { padding-right: var(--space-sm); }
    .ws-pr-md { padding-right: var(--space-md); }
    .ws-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .ws-p-0 { padding: 0; }
    .ws-px-0 { padding-left: 0; padding-right: 0; }
    .ws-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .ws-m-xs { margin: var(--space-xs); }
    .ws-m-sm { margin: var(--space-sm); }
    .ws-m-md { margin: var(--space-md); }
    .ws-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .ws-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .ws-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .ws-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .ws-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .ws-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .ws-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .ws-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .ws-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .ws-mt-xs { margin-top: var(--space-xs); }
    .ws-mt-sm { margin-top: var(--space-sm); }
    .ws-mt-md { margin-top: var(--space-md); }
    .ws-mt-lg { margin-top: var(--space-lg); }

    .ws-mb-xs { margin-bottom: var(--space-xs); }
    .ws-mb-sm { margin-bottom: var(--space-sm); }
    .ws-mb-md { margin-bottom: var(--space-md); }
    .ws-mb-lg { margin-bottom: var(--space-lg); }

    .ws-ml-xs { margin-left: var(--space-xs); }
    .ws-ml-sm { margin-left: var(--space-sm); }
    .ws-ml-md { margin-left: var(--space-md); }
    .ws-ml-lg { margin-left: var(--space-lg); }

    .ws-mr-xs { margin-right: var(--space-xs); }
    .ws-mr-sm { margin-right: var(--space-sm); }
    .ws-mr-md { margin-right: var(--space-md); }
    .ws-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .ws-m-0 { margin: 0; }
    .ws-mx-0 { margin-left: 0; margin-right: 0; }
    .ws-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .ws-w-0   { --w: 0%; width: var(--w); }
    .ws-w-5   { --w: 5%; width: var(--w); }
    .ws-w-10  { --w: 10%; width: var(--w); }
    .ws-w-15  { --w: 15%; width: var(--w); }
    .ws-w-20  { --w: 20%; width: var(--w); }
    .ws-w-25  { --w: 25%; width: var(--w); }
    .ws-w-30  { --w: 30%; width: var(--w); }
    .ws-w-35  { --w: 35%; width: var(--w); }
    .ws-w-40  { --w: 40%; width: var(--w); }
    .ws-w-45  { --w: 45%; width: var(--w); }
    .ws-w-50  { --w: 50%; width: var(--w); }
    .ws-w-55  { --w: 55%; width: var(--w); }
    .ws-w-60  { --w: 60%; width: var(--w); }
    .ws-w-65  { --w: 65%; width: var(--w); }
    .ws-w-70  { --w: 70%; width: var(--w); }
    .ws-w-75  { --w: 75%; width: var(--w); }
    .ws-w-80  { --w: 80%; width: var(--w); }
    .ws-w-85  { --w: 85%; width: var(--w); }
    .ws-w-90  { --w: 90%; width: var(--w); }
    .ws-w-95  { --w: 95%; width: var(--w); }
    .ws-w-100 { --w: 100%; width: var(--w); }

    .ws-w-vw-0   { --w: 0vw; width: var(--w);}
    .ws-w-vw-5   { --w: 5vw; width: var(--w);}
    .ws-w-vw-10  { --w: 10vw; width: var(--w);}
    .ws-w-vw-15  { --w: 15vw; width: var(--w);}
    .ws-w-vw-20  { --w: 20vw; width: var(--w);}
    .ws-w-vw-25  { --w: 25vw; width: var(--w);}
    .ws-w-vw-30  { --w: 30vw; width: var(--w);}
    .ws-w-vw-35  { --w: 35vw; width: var(--w);}
    .ws-w-vw-40  { --w: 40vw; width: var(--w);}
    .ws-w-vw-45  { --w: 45vw; width: var(--w);}
    .ws-w-vw-50  { --w: 50vw; width: var(--w);}
    .ws-w-vw-55  { --w: 55vw; width: var(--w);}
    .ws-w-vw-60  { --w: 60vw; width: var(--w);}
    .ws-w-vw-65  { --w: 65vw; width: var(--w);}
    .ws-w-vw-70  { --w: 70vw; width: var(--w);}
    .ws-w-vw-75  { --w: 75vw; width: var(--w);}
    .ws-w-vw-80  { --w: 80vw; width: var(--w);}
    .ws-w-vw-85  { --w: 85vw; width: var(--w);}
    .ws-w-vw-90  { --w: 90vw; width: var(--w);}
    .ws-w-vw-95  { --w: 95vw; width: var(--w);}
    .ws-w-vw-100 { --w: 100vw; width: var(--w);}

    .ws-coln-1   { --w: calc(100% / 1); width: var(--w);}
    .ws-coln-2   { --w: calc(100% / 2); width: var(--w);}
    .ws-coln-3   { --w: calc(100% / 3); width: var(--w);}
    .ws-coln-4   { --w: calc(100% / 4); width: var(--w);}
    .ws-coln-5   { --w: calc(100% / 5); width: var(--w);}
    .ws-coln-6   { --w: calc(100% / 6); width: var(--w);}
    .ws-coln-7   { --w: calc(100% / 7); width: var(--w);}
    .ws-coln-8   { --w: calc(100% / 8); width: var(--w);}
    .ws-coln-9   { --w: calc(100% / 9); width: var(--w);}
    .ws-coln-10  { --w: calc(100% / 10); width: var(--w);}
    .ws-coln-11  { --w: calc(100% / 11); width: var(--w);}
    .ws-coln-12  { --w: calc(100% / 12); width: var(--w);}

    /*-----ALTEZZA-----*/
    .ws-h-0   { --h: 0%; height: var(--h);}
    .ws-h-5   { --h: 5%; height: var(--h);}
    .ws-h-10  { --h: 10%; height: var(--h);}
    .ws-h-15  { --h: 15%; height: var(--h);}
    .ws-h-20  { --h: 20%; height: var(--h);}
    .ws-h-25  { --h: 25%; height: var(--h);}
    .ws-h-30  { --h: 30%; height: var(--h);}
    .ws-h-35  { --h: 35%; height: var(--h);}
    .ws-h-40  { --h: 40%; height: var(--h);}
    .ws-h-45  { --h: 45%; height: var(--h);}
    .ws-h-50  { --h: 50%; height: var(--h);}
    .ws-h-55  { --h: 55%; height: var(--h);}
    .ws-h-60  { --h: 60%; height: var(--h);}
    .ws-h-65  { --h: 65%; height: var(--h);}
    .ws-h-70  { --h: 70%; height: var(--h);}
    .ws-h-75  { --h: 75%; height: var(--h);}
    .ws-h-80  { --h: 80%; height: var(--h);}
    .ws-h-85  { --h: 85%; height: var(--h);}
    .ws-h-90  { --h: 90%; height: var(--h);}
    .ws-h-95  { --h: 95%; height: var(--h);}
    .ws-h-100 { --h: 100%; height: var(--h);}
    .ws-h-min-100 { min-height: 100%;}

    .ws-h-vh-0   { --h: 0vh; height: var(--h);}
    .ws-h-vh-5   { --h: 5vh; height: var(--h);}
    .ws-h-vh-10  { --h: 10vh; height: var(--h);}
    .ws-h-vh-15  { --h: 15vh; height: var(--h);}
    .ws-h-vh-20  { --h: 20vh; height: var(--h);}
    .ws-h-vh-25  { --h: 25vh; height: var(--h);}
    .ws-h-vh-30  { --h: 30vh; height: var(--h);}
    .ws-h-vh-35  { --h: 35vh; height: var(--h);}
    .ws-h-vh-40  { --h: 40vh; height: var(--h);}
    .ws-h-vh-45  { --h: 45vh; height: var(--h);}
    .ws-h-vh-50  { --h: 50vh; height: var(--h);}
    .ws-h-vh-55  { --h: 55vh; height: var(--h);}
    .ws-h-vh-60  { --h: 60vh; height: var(--h);}
    .ws-h-vh-65  { --h: 65vh; height: var(--h);}
    .ws-h-vh-70  { --h: 70vh; height: var(--h);}
    .ws-h-vh-75  { --h: 75vh; height: var(--h);}
    .ws-h-vh-80  { --h: 80vh; height: var(--h);}
    .ws-h-vh-85  { --h: 85vh; height: var(--h);}
    .ws-h-vh-90  { --h: 90vh; height: var(--h);}
    .ws-h-vh-95  { --h: 95vh; height: var(--h);}
    .ws-h-vh-100 { --h: 100vh; height: var(--h);}
    

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .ws-d-flex { display: flex; }
    .ws-d-inline-flex { display: inline-flex; }
    .ws-grid-nowrap { grid-auto-flow:column; }
    /* Justify Content */
    .ws-justify-start { justify-content: flex-start; }
    .ws-justify-center { justify-content: center; }
    .ws-justify-end { justify-content: flex-end; }
    .ws-justify-between { justify-content: space-between; }
    .ws-justify-around { justify-content: space-around; }
    .ws-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .ws-align-start { align-items: flex-start; }
    .ws-align-center { align-items: center; }
    .ws-align-end { align-items: flex-end; }
    .ws-align-baseline { align-items: baseline; }
    .ws-align-stretch { align-items: stretch; }

    /* Align Self */
    .ws-align-self-start { align-self: flex-start; }
    .ws-align-self-center { align-self: center; }
    .ws-align-self-end { align-self: flex-end; }
    .ws-align-self-baseline { align-self: baseline; }
    .ws-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .ws-flex-row { flex-direction: row; }
    .ws-flex-row-reverse { flex-direction: row-reverse; }
    .ws-flex-column { flex-direction: column; }
    .ws-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .ws-flex-nowrap { flex-wrap: nowrap; }
    .ws-flex-wrap { flex-wrap: wrap; }
    .ws-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .ws-flex-grow-0 { flex-grow: 0; }
    .ws-flex-grow-1 { flex-grow: 1; }

    .ws-flex-shrink-0 { flex-shrink: 0; }
    .ws-flex-shrink-1 { flex-shrink: 1; }

    .ws-flex-basis-auto { flex-basis: auto; }
    .ws-flex-basis-100 { flex-basis: 100%; }
    .ws-flex-basis-50 { flex-basis: 50%; }
    .ws-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .ws-flex-0 { display: none; }

    /*-----GRIGLIE (WS / WIDE SCREEN)-----*/
    .ws-d-grid { display: grid; }
    .ws-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .ws-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .ws-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .ws-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .ws-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .ws-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .ws-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .ws-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .ws-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .ws-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .ws-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .ws-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .ws-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .ws-grid-cols-auto      { grid-template-columns: auto; }
    .ws-grid-cols-min       { grid-template-columns: min-content; }
    .ws-grid-cols-max       { grid-template-columns: max-content; }

    .ws-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .ws-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .ws-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .ws-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .ws-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .ws-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .ws-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .ws-gap-xxs { gap: var(--space-xxs); }
    .ws-gap-xs  { gap: var(--space-xs); }
    .ws-gap-sm  { gap: var(--space-sm); }
    .ws-gap-md  { gap: var(--space-md); }
    .ws-gap-lg  { gap: var(--space-lg); }
    .ws-gap-xl  { gap: var(--space-xl); }
    .ws-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .ws-gap-x-xxs { column-gap: var(--space-xxs); }
    .ws-gap-x-xs  { column-gap: var(--space-xs); }
    .ws-gap-x-sm  { column-gap: var(--space-sm); }
    .ws-gap-x-md  { column-gap: var(--space-md); }
    .ws-gap-x-lg  { column-gap: var(--space-lg); }
    .ws-gap-x-xl  { column-gap: var(--space-xl); }
    .ws-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .ws-gap-y-xxs { row-gap: var(--space-xxs); }
    .ws-gap-y-xs  { row-gap: var(--space-xs); }
    .ws-gap-y-sm  { row-gap: var(--space-sm); }
    .ws-gap-y-md  { row-gap: var(--space-md); }
    .ws-gap-y-lg  { row-gap: var(--space-lg); }
    .ws-gap-y-xl  { row-gap: var(--space-xl); }
    .ws-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .ws-justify-items-start    { justify-items: start; }
    .ws-justify-items-center   { justify-items: center; }
    .ws-justify-items-end      { justify-items: end; }
    .ws-justify-items-stretch  { justify-items: stretch; }

    .ws-align-items-start      { align-items: start; }
    .ws-align-items-center     { align-items: center; }
    .ws-align-items-end        { align-items: end; }
    .ws-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .ws-justify-start      { justify-content: flex-start; }
    .ws-justify-center     { justify-content: center; }
    .ws-justify-end        { justify-content: flex-end; }
    .ws-justify-between    { justify-content: space-between; }
    .ws-justify-around     { justify-content: space-around; }
    .ws-justify-evenly     { justify-content: space-evenly; }

    .ws-align-start        { align-content: flex-start; }
    .ws-align-center       { align-content: center; }
    .ws-align-end          { align-content: flex-end; }
    .ws-align-between      { align-content: space-between; }
    .ws-align-around       { align-content: space-around; }
    .ws-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .ws-place-self-start     { place-self: start; }
    .ws-place-self-end       { place-self: end; }
    .ws-place-self-center    { place-self: center; }
    .ws-place-self-stretch   { place-self: stretch; }

    .ws-align-self-start     { align-self: flex-start; }
    .ws-align-self-center    { align-self: center; }
    .ws-align-self-end       { align-self: flex-end; }
    .ws-align-self-stretch   { align-self: stretch; }

    .ws-justify-self-start   { justify-self: start; }
    .ws-justify-self-end     { justify-self: end; }
    .ws-justify-self-center  { justify-self: center; }
    .ws-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .ws-col-span-1  { grid-column: span 1 / span 1; }
    .ws-col-span-2  { grid-column: span 2 / span 2; }
    .ws-col-span-3  { grid-column: span 3 / span 3; }
    .ws-col-span-4  { grid-column: span 4 / span 4; }
    .ws-col-span-5  { grid-column: span 5 / span 5; }
    .ws-col-span-6  { grid-column: span 6 / span 6; }
    .ws-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .ws-col-start-1  { grid-column-start: 1; }
    .ws-col-start-2  { grid-column-start: 2; }
    .ws-col-start-3  { grid-column-start: 3; }
    .ws-col-start-4  { grid-column-start: 4; }

    .ws-col-end-1    { grid-column-end: 1; }
    .ws-col-end-2    { grid-column-end: 2; }
    .ws-col-end-3    { grid-column-end: 3; }
    .ws-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .ws-row-span-1  { grid-row: span 1 / span 1; }
    .ws-row-span-2  { grid-row: span 2 / span 2; }
    .ws-row-span-3  { grid-row: span 3 / span 3; }
    .ws-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .ws-row-start-1  { grid-row-start: 1; }
    .ws-row-start-2  { grid-row-start: 2; }
    .ws-row-start-3  { grid-row-start: 3; }

    .ws-row-end-1    { grid-row-end: 1; }
    .ws-row-end-2    { grid-row-end: 2; }
    .ws-row-end-3    { grid-row-end: 3; }
    
    /*-----VISIBILITA-----*/
    .ws-d-block{ display: block; }
    .ws-d-inline-block{ display: inline-block; }
    .ws-d-none{ display: none; }

    /*-----BOTTOM APP BAR-----*/
    .appBarArea.bt{
        display: none;
    }

    /*-----NAVIGATION BAR-----*/
    .bniArea{
        display: none;
    }

    /*-----DRAGGABLE SLIDER-----*/
    .drSlider{
        overflow-x: hidden;
    }
}
/*----------DESKTOP----------*/
@media only screen and (min-width:62rem) and (max-width:81.99rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .ds-alL{ text-align: left; }
    .ds-alC{ text-align: center; }
    .ds-alR{ text-align: right; }
    .ds-alJ{ text-align: justify; }
    br.ds-noBreak{ display: none; }
    br.ds-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .ds-p-xs { padding: var(--space-xs); }
    .ds-p-sm { padding: var(--space-sm); }
    .ds-p-md { padding: var(--space-md); }
    .ds-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .ds-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .ds-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .ds-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .ds-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .ds-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .ds-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .ds-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .ds-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .ds-pt-xs { padding-top: var(--space-xs); }
    .ds-pt-sm { padding-top: var(--space-sm); }
    .ds-pt-md { padding-top: var(--space-md); }
    .ds-pt-lg { padding-top: var(--space-lg); }

    .ds-pb-xs { padding-bottom: var(--space-xs); }
    .ds-pb-sm { padding-bottom: var(--space-sm); }
    .ds-pb-md { padding-bottom: var(--space-md); }
    .ds-pb-lg { padding-bottom: var(--space-lg); }

    .ds-pl-xs { padding-left: var(--space-xs); }
    .ds-pl-sm { padding-left: var(--space-sm); }
    .ds-pl-md { padding-left: var(--space-md); }
    .ds-pl-lg { padding-left: var(--space-lg); }

    .ds-pr-xs { padding-right: var(--space-xs); }
    .ds-pr-sm { padding-right: var(--space-sm); }
    .ds-pr-md { padding-right: var(--space-md); }
    .ds-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .ds-p-0 { padding: 0; }
    .ds-px-0 { padding-left: 0; padding-right: 0; }
    .ds-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .ds-m-xs { margin: var(--space-xs); }
    .ds-m-sm { margin: var(--space-sm); }
    .ds-m-md { margin: var(--space-md); }
    .ds-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .ds-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .ds-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .ds-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .ds-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .ds-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .ds-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .ds-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .ds-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .ds-mt-xs { margin-top: var(--space-xs); }
    .ds-mt-sm { margin-top: var(--space-sm); }
    .ds-mt-md { margin-top: var(--space-md); }
    .ds-mt-lg { margin-top: var(--space-lg); }

    .ds-mb-xs { margin-bottom: var(--space-xs); }
    .ds-mb-sm { margin-bottom: var(--space-sm); }
    .ds-mb-md { margin-bottom: var(--space-md); }
    .ds-mb-lg { margin-bottom: var(--space-lg); }

    .ds-ml-xs { margin-left: var(--space-xs); }
    .ds-ml-sm { margin-left: var(--space-sm); }
    .ds-ml-md { margin-left: var(--space-md); }
    .ds-ml-lg { margin-left: var(--space-lg); }

    .ds-mr-xs { margin-right: var(--space-xs); }
    .ds-mr-sm { margin-right: var(--space-sm); }
    .ds-mr-md { margin-right: var(--space-md); }
    .ds-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .ds-m-0 { margin: 0; }
    .ds-mx-0 { margin-left: 0; margin-right: 0; }
    .ds-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .ds-w-0   { --w: 0%; width: var(--w); }
    .ds-w-5   { --w: 5%; width: var(--w); }
    .ds-w-10  { --w: 10%; width: var(--w); }
    .ds-w-15  { --w: 15%; width: var(--w); }
    .ds-w-20  { --w: 20%; width: var(--w); }
    .ds-w-25  { --w: 25%; width: var(--w); }
    .ds-w-30  { --w: 30%; width: var(--w); }
    .ds-w-35  { --w: 35%; width: var(--w); }
    .ds-w-40  { --w: 40%; width: var(--w); }
    .ds-w-45  { --w: 45%; width: var(--w); }
    .ds-w-50  { --w: 50%; width: var(--w); }
    .ds-w-55  { --w: 55%; width: var(--w); }
    .ds-w-60  { --w: 60%; width: var(--w); }
    .ds-w-65  { --w: 65%; width: var(--w); }
    .ds-w-70  { --w: 70%; width: var(--w); }
    .ds-w-75  { --w: 75%; width: var(--w); }
    .ds-w-80  { --w: 80%; width: var(--w); }
    .ds-w-85  { --w: 85%; width: var(--w); }
    .ds-w-90  { --w: 90%; width: var(--w); }
    .ds-w-95  { --w: 95%; width: var(--w); }
    .ds-w-100 { --w: 100%; width: var(--w); }

    .ds-w-vw-0   { --w: 0vw; width: var(--w); }
    .ds-w-vw-5   { --w: 5vw; width: var(--w); }
    .ds-w-vw-10  { --w: 10vw; width: var(--w); }
    .ds-w-vw-15  { --w: 15vw; width: var(--w); }
    .ds-w-vw-20  { --w: 20vw; width: var(--w); }
    .ds-w-vw-25  { --w: 25vw; width: var(--w); }
    .ds-w-vw-30  { --w: 30vw; width: var(--w); }
    .ds-w-vw-35  { --w: 35vw; width: var(--w); }
    .ds-w-vw-40  { --w: 40vw; width: var(--w); }
    .ds-w-vw-45  { --w: 45vw; width: var(--w); }
    .ds-w-vw-50  { --w: 50vw; width: var(--w); }
    .ds-w-vw-55  { --w: 55vw; width: var(--w); }
    .ds-w-vw-60  { --w: 60vw; width: var(--w); }
    .ds-w-vw-65  { --w: 65vw; width: var(--w); }
    .ds-w-vw-70  { --w: 70vw; width: var(--w); }
    .ds-w-vw-75  { --w: 75vw; width: var(--w); }
    .ds-w-vw-80  { --w: 80vw; width: var(--w); }
    .ds-w-vw-85  { --w: 85vw; width: var(--w); }
    .ds-w-vw-90  { --w: 90vw; width: var(--w); }
    .ds-w-vw-95  { --w: 95vw; width: var(--w); }
    .ds-w-vw-100 { --w: 100vw; width: var(--w); }

    .ds-coln-1   { --w: calc(100% / 1); width: var(--w); }
    .ds-coln-2   { --w: calc(100% / 2); width: var(--w); }
    .ds-coln-3   { --w: calc(100% / 3); width: var(--w); }
    .ds-coln-4   { --w: calc(100% / 4); width: var(--w); }
    .ds-coln-5   { --w: calc(100% / 5); width: var(--w); }
    .ds-coln-6   { --w: calc(100% / 6); width: var(--w); }
    .ds-coln-7   { --w: calc(100% / 7); width: var(--w); }
    .ds-coln-8   { --w: calc(100% / 8); width: var(--w); }
    .ds-coln-9   { --w: calc(100% / 9); width: var(--w); }
    .ds-coln-10  { --w: calc(100% / 10); width: var(--w); }
    .ds-coln-11  { --w: calc(100% / 11); width: var(--w); }
    .ds-coln-12  { --w: calc(100% / 12); width: var(--w); }

    /*-----ALTEZZA-----*/
    .ds-h-0   { --h: 0%; height: var(--h); }
    .ds-h-5   { --h: 5%; height: var(--h); }
    .ds-h-10  { --h: 10%; height: var(--h); }
    .ds-h-15  { --h: 15%; height: var(--h); }
    .ds-h-20  { --h: 20%; height: var(--h); }
    .ds-h-25  { --h: 25%; height: var(--h); }
    .ds-h-30  { --h: 30%; height: var(--h); }
    .ds-h-35  { --h: 35%; height: var(--h); }
    .ds-h-40  { --h: 40%; height: var(--h); }
    .ds-h-45  { --h: 45%; height: var(--h); }
    .ds-h-50  { --h: 50%; height: var(--h); }
    .ds-h-55  { --h: 55%; height: var(--h); }
    .ds-h-60  { --h: 60%; height: var(--h); }
    .ds-h-65  { --h: 65%; height: var(--h); }
    .ds-h-70  { --h: 70%; height: var(--h); }
    .ds-h-75  { --h: 75%; height: var(--h); }
    .ds-h-80  { --h: 80%; height: var(--h); }
    .ds-h-85  { --h: 85%; height: var(--h); }
    .ds-h-90  { --h: 90%; height: var(--h); }
    .ds-h-95  { --h: 95%; height: var(--h); }
    .ds-h-100 { --h: 100%; height: var(--h); }

    .ds-h-min-100 { min-height: 100%; }

    .ds-h-vh-0   { --h: 0vh; height: var(--h); }
    .ds-h-vh-5   { --h: 5vh; height: var(--h); }
    .ds-h-vh-10  { --h: 10vh; height: var(--h); }
    .ds-h-vh-15  { --h: 15vh; height: var(--h); }
    .ds-h-vh-20  { --h: 20vh; height: var(--h); }
    .ds-h-vh-25  { --h: 25vh; height: var(--h); }
    .ds-h-vh-30  { --h: 30vh; height: var(--h); }
    .ds-h-vh-35  { --h: 35vh; height: var(--h); }
    .ds-h-vh-40  { --h: 40vh; height: var(--h); }
    .ds-h-vh-45  { --h: 45vh; height: var(--h); }
    .ds-h-vh-50  { --h: 50vh; height: var(--h); }
    .ds-h-vh-55  { --h: 55vh; height: var(--h); }
    .ds-h-vh-60  { --h: 60vh; height: var(--h); }
    .ds-h-vh-65  { --h: 65vh; height: var(--h); }
    .ds-h-vh-70  { --h: 70vh; height: var(--h); }
    .ds-h-vh-75  { --h: 75vh; height: var(--h); }
    .ds-h-vh-80  { --h: 80vh; height: var(--h); }
    .ds-h-vh-85  { --h: 85vh; height: var(--h); }
    .ds-h-vh-90  { --h: 90vh; height: var(--h); }
    .ds-h-vh-95  { --h: 95vh; height: var(--h); }
    .ds-h-vh-100 { --h: 100vh; height: var(--h); }

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .ds-d-flex { display: flex; }
    .ds-d-inline-flex { display: inline-flex; }
    .ds-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .ds-justify-start { justify-content: flex-start; }
    .ds-justify-center { justify-content: center; }
    .ds-justify-end { justify-content: flex-end; }
    .ds-justify-between { justify-content: space-between; }
    .ds-justify-around { justify-content: space-around; }
    .ds-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .ds-align-start { align-items: flex-start; }
    .ds-align-center { align-items: center; }
    .ds-align-end { align-items: flex-end; }
    .ds-align-baseline { align-items: baseline; }
    .ds-align-stretch { align-items: stretch; }

    /* Align Self */
    .ds-align-self-start { align-self: flex-start; }
    .ds-align-self-center { align-self: center; }
    .ds-align-self-end { align-self: flex-end; }
    .ds-align-self-baseline { align-self: baseline; }
    .ds-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .ds-flex-row { flex-direction: row; }
    .ds-flex-row-reverse { flex-direction: row-reverse; }
    .ds-flex-column { flex-direction: column; }
    .ds-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .ds-flex-nowrap { flex-wrap: nowrap; }
    .ds-flex-wrap { flex-wrap: wrap; }
    .ds-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .ds-flex-grow-0 { flex-grow: 0; }
    .ds-flex-grow-1 { flex-grow: 1; }

    .ds-flex-shrink-0 { flex-shrink: 0; }
    .ds-flex-shrink-1 { flex-shrink: 1; }

    .ds-flex-basis-auto { flex-basis: auto; }
    .ds-flex-basis-100 { flex-basis: 100%; }
    .ds-flex-basis-50 { flex-basis: 50%; }
    .ds-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .ds-flex-0 { display: none; }

    /*-----GRIGLIE (DS / DESKTOP STANDARD)-----*/
    .ds-d-grid { display: grid; }
    .ds-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .ds-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .ds-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .ds-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .ds-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .ds-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .ds-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .ds-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .ds-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .ds-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .ds-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .ds-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .ds-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .ds-grid-cols-auto      { grid-template-columns: auto; }
    .ds-grid-cols-min       { grid-template-columns: min-content; }
    .ds-grid-cols-max       { grid-template-columns: max-content; }

    .ds-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .ds-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .ds-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .ds-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .ds-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .ds-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .ds-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .ds-gap-xxs { gap: var(--space-xxs); }
    .ds-gap-xs  { gap: var(--space-xs); }
    .ds-gap-sm  { gap: var(--space-sm); }
    .ds-gap-md  { gap: var(--space-md); }
    .ds-gap-lg  { gap: var(--space-lg); }
    .ds-gap-xl  { gap: var(--space-xl); }
    .ds-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .ds-gap-x-xxs { column-gap: var(--space-xxs); }
    .ds-gap-x-xs  { column-gap: var(--space-xs); }
    .ds-gap-x-sm  { column-gap: var(--space-sm); }
    .ds-gap-x-md  { column-gap: var(--space-md); }
    .ds-gap-x-lg  { column-gap: var(--space-lg); }
    .ds-gap-x-xl  { column-gap: var(--space-xl); }
    .ds-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .ds-gap-y-xxs { row-gap: var(--space-xxs); }
    .ds-gap-y-xs  { row-gap: var(--space-xs); }
    .ds-gap-y-sm  { row-gap: var(--space-sm); }
    .ds-gap-y-md  { row-gap: var(--space-md); }
    .ds-gap-y-lg  { row-gap: var(--space-lg); }
    .ds-gap-y-xl  { row-gap: var(--space-xl); }
    .ds-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .ds-justify-items-start    { justify-items: start; }
    .ds-justify-items-center   { justify-items: center; }
    .ds-justify-items-end      { justify-items: end; }
    .ds-justify-items-stretch  { justify-items: stretch; }

    .ds-align-items-start      { align-items: start; }
    .ds-align-items-center     { align-items: center; }
    .ds-align-items-end        { align-items: end; }
    .ds-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .ds-justify-start      { justify-content: flex-start; }
    .ds-justify-center     { justify-content: center; }
    .ds-justify-end        { justify-content: flex-end; }
    .ds-justify-between    { justify-content: space-between; }
    .ds-justify-around     { justify-content: space-around; }
    .ds-justify-evenly     { justify-content: space-evenly; }

    .ds-align-start        { align-content: flex-start; }
    .ds-align-center       { align-content: center; }
    .ds-align-end          { align-content: flex-end; }
    .ds-align-between      { align-content: space-between; }
    .ds-align-around       { align-content: space-around; }
    .ds-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .ds-place-self-start     { place-self: start; }
    .ds-place-self-end       { place-self: end; }
    .ds-place-self-center    { place-self: center; }
    .ds-place-self-stretch   { place-self: stretch; }

    .ds-align-self-start     { align-self: flex-start; }
    .ds-align-self-center    { align-self: center; }
    .ds-align-self-end       { align-self: flex-end; }
    .ds-align-self-stretch   { align-self: stretch; }

    .ds-justify-self-start   { justify-self: start; }
    .ds-justify-self-end     { justify-self: end; }
    .ds-justify-self-center  { justify-self: center; }
    .ds-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .ds-col-span-1  { grid-column: span 1 / span 1; }
    .ds-col-span-2  { grid-column: span 2 / span 2; }
    .ds-col-span-3  { grid-column: span 3 / span 3; }
    .ds-col-span-4  { grid-column: span 4 / span 4; }
    .ds-col-span-5  { grid-column: span 5 / span 5; }
    .ds-col-span-6  { grid-column: span 6 / span 6; }
    .ds-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .ds-col-start-1  { grid-column-start: 1; }
    .ds-col-start-2  { grid-column-start: 2; }
    .ds-col-start-3  { grid-column-start: 3; }
    .ds-col-start-4  { grid-column-start: 4; }

    .ds-col-end-1    { grid-column-end: 1; }
    .ds-col-end-2    { grid-column-end: 2; }
    .ds-col-end-3    { grid-column-end: 3; }
    .ds-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .ds-row-span-1  { grid-row: span 1 / span 1; }
    .ds-row-span-2  { grid-row: span 2 / span 2; }
    .ds-row-span-3  { grid-row: span 3 / span 3; }
    .ds-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .ds-row-start-1  { grid-row-start: 1; }
    .ds-row-start-2  { grid-row-start: 2; }
    .ds-row-start-3  { grid-row-start: 3; }

    .ds-row-end-1    { grid-row-end: 1; }
    .ds-row-end-2    { grid-row-end: 2; }
    .ds-row-end-3    { grid-row-end: 3; }


    /*-----VISIBILITA-----*/
    .ds-d-block{ display: block; }
    .ds-d-inline-block{ display: inline-block; }
    .ds-d-none{ display: none; }
}
/*----------DESKTOP XL----------*/
@media only screen and (min-width:82rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .dxl-alL{ text-align: left; }
    .dxl-alC{ text-align: center; }
    .dxl-alR{ text-align: right; }
    .dxl-alJ{ text-align: justify; }
    br.dxl-noBreak{ display: none; }
    br.dxl-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .dxl-p-xs { padding: var(--space-xs); }
    .dxl-p-sm { padding: var(--space-sm); }
    .dxl-p-md { padding: var(--space-md); }
    .dxl-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .dxl-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .dxl-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .dxl-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .dxl-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .dxl-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .dxl-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .dxl-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .dxl-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .dxl-pt-xs { padding-top: var(--space-xs); }
    .dxl-pt-sm { padding-top: var(--space-sm); }
    .dxl-pt-md { padding-top: var(--space-md); }
    .dxl-pt-lg { padding-top: var(--space-lg); }

    .dxl-pb-xs { padding-bottom: var(--space-xs); }
    .dxl-pb-sm { padding-bottom: var(--space-sm); }
    .dxl-pb-md { padding-bottom: var(--space-md); }
    .dxl-pb-lg { padding-bottom: var(--space-lg); }

    .dxl-pl-xs { padding-left: var(--space-xs); }
    .dxl-pl-sm { padding-left: var(--space-sm); }
    .dxl-pl-md { padding-left: var(--space-md); }
    .dxl-pl-lg { padding-left: var(--space-lg); }

    .dxl-pr-xs { padding-right: var(--space-xs); }
    .dxl-pr-sm { padding-right: var(--space-sm); }
    .dxl-pr-md { padding-right: var(--space-md); }
    .dxl-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .dxl-p-0 { padding: 0; }
    .dxl-px-0 { padding-left: 0; padding-right: 0; }
    .dxl-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .dxl-m-xs { margin: var(--space-xs); }
    .dxl-m-sm { margin: var(--space-sm); }
    .dxl-m-md { margin: var(--space-md); }
    .dxl-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .dxl-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .dxl-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .dxl-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .dxl-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .dxl-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .dxl-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .dxl-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .dxl-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .dxl-mt-xs { margin-top: var(--space-xs); }
    .dxl-mt-sm { margin-top: var(--space-sm); }
    .dxl-mt-md { margin-top: var(--space-md); }
    .dxl-mt-lg { margin-top: var(--space-lg); }

    .dxl-mb-xs { margin-bottom: var(--space-xs); }
    .dxl-mb-sm { margin-bottom: var(--space-sm); }
    .dxl-mb-md { margin-bottom: var(--space-md); }
    .dxl-mb-lg { margin-bottom: var(--space-lg); }

    .dxl-ml-xs { margin-left: var(--space-xs); }
    .dxl-ml-sm { margin-left: var(--space-sm); }
    .dxl-ml-md { margin-left: var(--space-md); }
    .dxl-ml-lg { margin-left: var(--space-lg); }

    .dxl-mr-xs { margin-right: var(--space-xs); }
    .dxl-mr-sm { margin-right: var(--space-sm); }
    .dxl-mr-md { margin-right: var(--space-md); }
    .dxl-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .dxl-m-0 { margin: 0; }
    .dxl-mx-0 { margin-left: 0; margin-right: 0; }
    .dxl-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .dxl-w-0   { --w: 0%; width: var(--w);}
    .dxl-w-5   { --w: 5%; width: var(--w);}
    .dxl-w-10  { --w: 10%; width: var(--w);}
    .dxl-w-15  { --w: 15%; width: var(--w);}
    .dxl-w-20  { --w: 20%; width: var(--w);}
    .dxl-w-25  { --w: 25%; width: var(--w);}
    .dxl-w-30  { --w: 30%; width: var(--w);}
    .dxl-w-35  { --w: 35%; width: var(--w);}
    .dxl-w-40  { --w: 40%; width: var(--w);}
    .dxl-w-45  { --w: 45%; width: var(--w);}
    .dxl-w-50  { --w: 50%; width: var(--w);}
    .dxl-w-55  { --w: 55%; width: var(--w);}
    .dxl-w-60  { --w: 60%; width: var(--w);}
    .dxl-w-65  { --w: 65%; width: var(--w);}
    .dxl-w-70  { --w: 70%; width: var(--w);}
    .dxl-w-75  { --w: 75%; width: var(--w);}
    .dxl-w-80  { --w: 80%; width: var(--w);}
    .dxl-w-85  { --w: 85%; width: var(--w);}
    .dxl-w-90  { --w: 90%; width: var(--w);}
    .dxl-w-95  { --w: 95%; width: var(--w);}
    .dxl-w-100 { --w: 100%; width: var(--w);}

    .dxl-w-vw-0   { --w: 0vw; width: var(--w);}
    .dxl-w-vw-5   { --w: 5vw; width: var(--w);}
    .dxl-w-vw-10  { --w: 10vw; width: var(--w);}
    .dxl-w-vw-15  { --w: 15vw; width: var(--w);}
    .dxl-w-vw-20  { --w: 20vw; width: var(--w);}
    .dxl-w-vw-25  { --w: 25vw; width: var(--w);}
    .dxl-w-vw-30  { --w: 30vw; width: var(--w);}
    .dxl-w-vw-35  { --w: 35vw; width: var(--w);}
    .dxl-w-vw-40  { --w: 40vw; width: var(--w);}
    .dxl-w-vw-45  { --w: 45vw; width: var(--w);}
    .dxl-w-vw-50  { --w: 50vw; width: var(--w);}
    .dxl-w-vw-55  { --w: 55vw; width: var(--w);}
    .dxl-w-vw-60  { --w: 60vw; width: var(--w);}
    .dxl-w-vw-65  { --w: 65vw; width: var(--w);}
    .dxl-w-vw-70  { --w: 70vw; width: var(--w);}
    .dxl-w-vw-75  { --w: 75vw; width: var(--w);}
    .dxl-w-vw-80  { --w: 80vw; width: var(--w);}
    .dxl-w-vw-85  { --w: 85vw; width: var(--w);}
    .dxl-w-vw-90  { --w: 90vw; width: var(--w);}
    .dxl-w-vw-95  { --w: 95vw; width: var(--w);}
    .dxl-w-vw-100 { --w: 100vw; width: var(--w);}

    .dxl-coln-1   { --w: calc(100% / 1); width: var(--w);}
    .dxl-coln-2   { --w: calc(100% / 2); width: var(--w);}
    .dxl-coln-3   { --w: calc(100% / 3); width: var(--w);}
    .dxl-coln-4   { --w: calc(100% / 4); width: var(--w);}
    .dxl-coln-5   { --w: calc(100% / 5); width: var(--w);}
    .dxl-coln-6   { --w: calc(100% / 6); width: var(--w);}
    .dxl-coln-7   { --w: calc(100% / 7); width: var(--w);}
    .dxl-coln-8   { --w: calc(100% / 8); width: var(--w);}
    .dxl-coln-9   { --w: calc(100% / 9); width: var(--w);}
    .dxl-coln-10  { --w: calc(100% / 10); width: var(--w);}
    .dxl-coln-11  { --w: calc(100% / 11); width: var(--w);}
    .dxl-coln-12  { --w: calc(100% / 12); width: var(--w);}

    /*-----ALTEZZA-----*/
    .dxl-h-0   { --h: 0%; height: var(--h);}
    .dxl-h-5   { --h: 5%; height: var(--h);}
    .dxl-h-10  { --h: 10%; height: var(--h);}
    .dxl-h-15  { --h: 15%; height: var(--h);}
    .dxl-h-20  { --h: 20%; height: var(--h);}
    .dxl-h-25  { --h: 25%; height: var(--h);}
    .dxl-h-30  { --h: 30%; height: var(--h);}
    .dxl-h-35  { --h: 35%; height: var(--h);}
    .dxl-h-40  { --h: 40%; height: var(--h);}
    .dxl-h-45  { --h: 45%; height: var(--h);}
    .dxl-h-50  { --h: 50%; height: var(--h);}
    .dxl-h-55  { --h: 55%; height: var(--h);}
    .dxl-h-60  { --h: 60%; height: var(--h);}
    .dxl-h-65  { --h: 65%; height: var(--h);}
    .dxl-h-70  { --h: 70%; height: var(--h);}
    .dxl-h-75  { --h: 75%; height: var(--h);}
    .dxl-h-80  { --h: 80%; height: var(--h);}
    .dxl-h-85  { --h: 85%; height: var(--h);}
    .dxl-h-90  { --h: 90%; height: var(--h);}
    .dxl-h-95  { --h: 95%; height: var(--h);}
    .dxl-h-100 { --h: 100%; height: var(--h);}
    .dxl-h-min-100 { min-height: 100%; }

    .dxl-h-vh-0   { --h: 0vh; height: var(--h);}
    .dxl-h-vh-5   { --h: 5vh; height: var(--h);}
    .dxl-h-vh-10  { --h: 10vh; height: var(--h);}
    .dxl-h-vh-15  { --h: 15vh; height: var(--h);}
    .dxl-h-vh-20  { --h: 20vh; height: var(--h);}
    .dxl-h-vh-25  { --h: 25vh; height: var(--h);}
    .dxl-h-vh-30  { --h: 30vh; height: var(--h);}
    .dxl-h-vh-35  { --h: 35vh; height: var(--h);}
    .dxl-h-vh-40  { --h: 40vh; height: var(--h);}
    .dxl-h-vh-45  { --h: 45vh; height: var(--h);}
    .dxl-h-vh-50  { --h: 50vh; height: var(--h);}
    .dxl-h-vh-55  { --h: 55vh; height: var(--h);}
    .dxl-h-vh-60  { --h: 60vh; height: var(--h);}
    .dxl-h-vh-65  { --h: 65vh; height: var(--h);}
    .dxl-h-vh-70  { --h: 70vh; height: var(--h);}
    .dxl-h-vh-75  { --h: 75vh; height: var(--h);}
    .dxl-h-vh-80  { --h: 80vh; height: var(--h);}
    .dxl-h-vh-85  { --h: 85vh; height: var(--h);}
    .dxl-h-vh-90  { --h: 90vh; height: var(--h);}
    .dxl-h-vh-95  { --h: 95vh; height: var(--h);}
    .dxl-h-vh-100 { --h: 100vh; height: var(--h);}

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .dxl-d-flex { display: flex; }
    .dxl-d-inline-flex { display: inline-flex; }
    .dxl-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .dxl-justify-start { justify-content: flex-start; }
    .dxl-justify-center { justify-content: center; }
    .dxl-justify-end { justify-content: flex-end; }
    .dxl-justify-between { justify-content: space-between; }
    .dxl-justify-around { justify-content: space-around; }
    .dxl-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .dxl-align-start { align-items: flex-start; }
    .dxl-align-center { align-items: center; }
    .dxl-align-end { align-items: flex-end; }
    .dxl-align-baseline { align-items: baseline; }
    .dxl-align-stretch { align-items: stretch; }

    /* Align Self */
    .dxl-align-self-start { align-self: flex-start; }
    .dxl-align-self-center { align-self: center; }
    .dxl-align-self-end { align-self: flex-end; }
    .dxl-align-self-baseline { align-self: baseline; }
    .dxl-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .dxl-flex-row { flex-direction: row; }
    .dxl-flex-row-reverse { flex-direction: row-reverse; }
    .dxl-flex-column { flex-direction: column; }
    .dxl-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .dxl-flex-nowrap { flex-wrap: nowrap; }
    .dxl-flex-wrap { flex-wrap: wrap; }
    .dxl-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .dxl-flex-grow-0 { flex-grow: 0; }
    .dxl-flex-grow-1 { flex-grow: 1; }

    .dxl-flex-shrink-0 { flex-shrink: 0; }
    .dxl-flex-shrink-1 { flex-shrink: 1; }

    .dxl-flex-basis-auto { flex-basis: auto; }
    .dxl-flex-basis-100 { flex-basis: 100%; }
    .dxl-flex-basis-50 { flex-basis: 50%; }
    .dxl-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .dxl-flex-0 { display: none; }

    /*-----GRIGLIE (DXL / DESKTOP EXTRA LARGE)-----*/
    .dxl-d-grid { display: grid; }
    .dxl-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .dxl-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .dxl-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .dxl-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .dxl-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .dxl-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .dxl-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .dxl-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .dxl-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .dxl-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .dxl-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .dxl-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .dxl-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .dxl-grid-cols-auto      { grid-template-columns: auto; }
    .dxl-grid-cols-min       { grid-template-columns: min-content; }
    .dxl-grid-cols-max       { grid-template-columns: max-content; }

    .dxl-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .dxl-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .dxl-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .dxl-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .dxl-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .dxl-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .dxl-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .dxl-gap-xxs { gap: var(--space-xxs); }
    .dxl-gap-xs  { gap: var(--space-xs); }
    .dxl-gap-sm  { gap: var(--space-sm); }
    .dxl-gap-md  { gap: var(--space-md); }
    .dxl-gap-lg  { gap: var(--space-lg); }
    .dxl-gap-xl  { gap: var(--space-xl); }
    .dxl-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .dxl-gap-x-xxs { column-gap: var(--space-xxs); }
    .dxl-gap-x-xs  { column-gap: var(--space-xs); }
    .dxl-gap-x-sm  { column-gap: var(--space-sm); }
    .dxl-gap-x-md  { column-gap: var(--space-md); }
    .dxl-gap-x-lg  { column-gap: var(--space-lg); }
    .dxl-gap-x-xl  { column-gap: var(--space-xl); }
    .dxl-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .dxl-gap-y-xxs { row-gap: var(--space-xxs); }
    .dxl-gap-y-xs  { row-gap: var(--space-xs); }
    .dxl-gap-y-sm  { row-gap: var(--space-sm); }
    .dxl-gap-y-md  { row-gap: var(--space-md); }
    .dxl-gap-y-lg  { row-gap: var(--space-lg); }
    .dxl-gap-y-xl  { row-gap: var(--space-xl); }
    .dxl-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .dxl-justify-items-start    { justify-items: start; }
    .dxl-justify-items-center   { justify-items: center; }
    .dxl-justify-items-end      { justify-items: end; }
    .dxl-justify-items-stretch  { justify-items: stretch; }

    .dxl-align-items-start      { align-items: start; }
    .dxl-align-items-center     { align-items: center; }
    .dxl-align-items-end        { align-items: end; }
    .dxl-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .dxl-justify-start      { justify-content: flex-start; }
    .dxl-justify-center     { justify-content: center; }
    .dxl-justify-end        { justify-content: flex-end; }
    .dxl-justify-between    { justify-content: space-between; }
    .dxl-justify-around     { justify-content: space-around; }
    .dxl-justify-evenly     { justify-content: space-evenly; }

    .dxl-align-start        { align-content: flex-start; }
    .dxl-align-center       { align-content: center; }
    .dxl-align-end          { align-content: flex-end; }
    .dxl-align-between      { align-content: space-between; }
    .dxl-align-around       { align-content: space-around; }
    .dxl-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .dxl-place-self-start     { place-self: start; }
    .dxl-place-self-end       { place-self: end; }
    .dxl-place-self-center    { place-self: center; }
    .dxl-place-self-stretch   { place-self: stretch; }

    .dxl-align-self-start     { align-self: flex-start; }
    .dxl-align-self-center    { align-self: center; }
    .dxl-align-self-end       { align-self: flex-end; }
    .dxl-align-self-stretch   { align-self: stretch; }

    .dxl-justify-self-start   { justify-self: start; }
    .dxl-justify-self-end     { justify-self: end; }
    .dxl-justify-self-center  { justify-self: center; }
    .dxl-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .dxl-col-span-1  { grid-column: span 1 / span 1; }
    .dxl-col-span-2  { grid-column: span 2 / span 2; }
    .dxl-col-span-3  { grid-column: span 3 / span 3; }
    .dxl-col-span-4  { grid-column: span 4 / span 4; }
    .dxl-col-span-5  { grid-column: span 5 / span 5; }
    .dxl-col-span-6  { grid-column: span 6 / span 6; }
    .dxl-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .dxl-col-start-1  { grid-column-start: 1; }
    .dxl-col-start-2  { grid-column-start: 2; }
    .dxl-col-start-3  { grid-column-start: 3; }
    .dxl-col-start-4  { grid-column-start: 4; }

    .dxl-col-end-1    { grid-column-end: 1; }
    .dxl-col-end-2    { grid-column-end: 2; }
    .dxl-col-end-3    { grid-column-end: 3; }
    .dxl-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .dxl-row-span-1  { grid-row: span 1 / span 1; }
    .dxl-row-span-2  { grid-row: span 2 / span 2; }
    .dxl-row-span-3  { grid-row: span 3 / span 3; }
    .dxl-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .dxl-row-start-1  { grid-row-start: 1; }
    .dxl-row-start-2  { grid-row-start: 2; }
    .dxl-row-start-3  { grid-row-start: 3; }

    .dxl-row-end-1    { grid-row-end: 1; }
    .dxl-row-end-2    { grid-row-end: 2; }
    .dxl-row-end-3    { grid-row-end: 3; }


    /*-----VISIBILITA-----*/
    .dxl-d-block{ display: block; }
    .dxl-d-inline-block{ display: inline-block; }
    .dxl-d-none{ display: none; }
}
/*----------DESKTOP > 90rem----------*/
@media only screen and (min-width:90rem) {
    .pl-lim{
        padding-left: var(--offset-max-cont);
    }
    .pr-lim{
        padding-right: var(--offset-max-cont);
    }
    .px-lim{
        padding-left: var(--offset-max-cont);
        padding-right: var(--offset-max-cont);
    }
}
/*----------DESKTOP XXL----------*/
@media only screen and (min-width:120rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .dxxl-alL{ text-align: left; }
    .dxxl-alC{ text-align: center; }
    .dxxl-alR{ text-align: right; }
    .dxxl-alJ{ text-align: justify; }
    br.dxxl-noBreak{ display: none; }
    br.dxxl-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .dxxl-p-xs { padding: var(--space-xs); }
    .dxxl-p-sm { padding: var(--space-sm); }
    .dxxl-p-md { padding: var(--space-md); }
    .dxxl-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .dxxl-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .dxxl-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .dxxl-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .dxxl-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .dxxl-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .dxxl-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .dxxl-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .dxxl-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .dxxl-pt-xs { padding-top: var(--space-xs); }
    .dxxl-pt-sm { padding-top: var(--space-sm); }
    .dxxl-pt-md { padding-top: var(--space-md); }
    .dxxl-pt-lg { padding-top: var(--space-lg); }

    .dxxl-pb-xs { padding-bottom: var(--space-xs); }
    .dxxl-pb-sm { padding-bottom: var(--space-sm); }
    .dxxl-pb-md { padding-bottom: var(--space-md); }
    .dxxl-pb-lg { padding-bottom: var(--space-lg); }

    .dxxl-pl-xs { padding-left: var(--space-xs); }
    .dxxl-pl-sm { padding-left: var(--space-sm); }
    .dxxl-pl-md { padding-left: var(--space-md); }
    .dxxl-pl-lg { padding-left: var(--space-lg); }

    .dxxl-pr-xs { padding-right: var(--space-xs); }
    .dxxl-pr-sm { padding-right: var(--space-sm); }
    .dxxl-pr-md { padding-right: var(--space-md); }
    .dxxl-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .dxxl-p-0 { padding: 0; }
    .dxxl-px-0 { padding-left: 0; padding-right: 0; }
    .dxxl-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .dxxl-m-xs { margin: var(--space-xs); }
    .dxxl-m-sm { margin: var(--space-sm); }
    .dxxl-m-md { margin: var(--space-md); }
    .dxxl-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .dxxl-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .dxxl-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .dxxl-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .dxxl-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .dxxl-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .dxxl-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .dxxl-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .dxxl-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .dxxl-mt-xs { margin-top: var(--space-xs); }
    .dxxl-mt-sm { margin-top: var(--space-sm); }
    .dxxl-mt-md { margin-top: var(--space-md); }
    .dxxl-mt-lg { margin-top: var(--space-lg); }

    .dxxl-mb-xs { margin-bottom: var(--space-xs); }
    .dxxl-mb-sm { margin-bottom: var(--space-sm); }
    .dxxl-mb-md { margin-bottom: var(--space-md); }
    .dxxl-mb-lg { margin-bottom: var(--space-lg); }

    .dxxl-ml-xs { margin-left: var(--space-xs); }
    .dxxl-ml-sm { margin-left: var(--space-sm); }
    .dxxl-ml-md { margin-left: var(--space-md); }
    .dxxl-ml-lg { margin-left: var(--space-lg); }

    .dxxl-mr-xs { margin-right: var(--space-xs); }
    .dxxl-mr-sm { margin-right: var(--space-sm); }
    .dxxl-mr-md { margin-right: var(--space-md); }
    .dxxl-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .dxxl-m-0 { margin: 0; }
    .dxxl-mx-0 { margin-left: 0; margin-right: 0; }
    .dxxl-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .dxxl-w-0   { --w: 0%; width: var(--w);}
    .dxxl-w-5   { --w: 5%; width: var(--w);}
    .dxxl-w-10  { --w: 10%; width: var(--w);}
    .dxxl-w-15  { --w: 15%; width: var(--w);}
    .dxxl-w-20  { --w: 20%; width: var(--w);}
    .dxxl-w-25  { --w: 25%; width: var(--w);}
    .dxxl-w-30  { --w: 30%; width: var(--w);}
    .dxxl-w-35  { --w: 35%; width: var(--w);}
    .dxxl-w-40  { --w: 40%; width: var(--w);}
    .dxxl-w-45  { --w: 45%; width: var(--w);}
    .dxxl-w-50  { --w: 50%; width: var(--w);}
    .dxxl-w-55  { --w: 55%; width: var(--w);}
    .dxxl-w-60  { --w: 60%; width: var(--w);}
    .dxxl-w-65  { --w: 65%; width: var(--w);}
    .dxxl-w-70  { --w: 70%; width: var(--w);}
    .dxxl-w-75  { --w: 75%; width: var(--w);}
    .dxxl-w-80  { --w: 80%; width: var(--w);}
    .dxxl-w-85  { --w: 85%; width: var(--w);}
    .dxxl-w-90  { --w: 90%; width: var(--w);}
    .dxxl-w-95  { --w: 95%; width: var(--w);}
    .dxxl-w-100 { --w: 100%; width: var(--w);}

    .dxxl-w-vw-0   { --w: 0vw; width: var(--w);}
    .dxxl-w-vw-5   { --w: 5vw; width: var(--w);}
    .dxxl-w-vw-10  { --w: 10vw; width: var(--w);}
    .dxxl-w-vw-15  { --w: 15vw; width: var(--w);}
    .dxxl-w-vw-20  { --w: 20vw; width: var(--w);}
    .dxxl-w-vw-25  { --w: 25vw; width: var(--w);}
    .dxxl-w-vw-30  { --w: 30vw; width: var(--w);}
    .dxxl-w-vw-35  { --w: 35vw; width: var(--w);}
    .dxxl-w-vw-40  { --w: 40vw; width: var(--w);}
    .dxxl-w-vw-45  { --w: 45vw; width: var(--w);}
    .dxxl-w-vw-50  { --w: 50vw; width: var(--w);}
    .dxxl-w-vw-55  { --w: 55vw; width: var(--w);}
    .dxxl-w-vw-60  { --w: 60vw; width: var(--w);}
    .dxxl-w-vw-65  { --w: 65vw; width: var(--w);}
    .dxxl-w-vw-70  { --w: 70vw; width: var(--w);}
    .dxxl-w-vw-75  { --w: 75vw; width: var(--w);}
    .dxxl-w-vw-80  { --w: 80vw; width: var(--w);}
    .dxxl-w-vw-85  { --w: 85vw; width: var(--w);}
    .dxxl-w-vw-90  { --w: 90vw; width: var(--w);}
    .dxxl-w-vw-95  { --w: 95vw; width: var(--w);}
    .dxxl-w-vw-100 { --w: 100vw; width: var(--w);}

    .dxxl-coln-1   { --w: calc(100% / 1); width: var(--w);}
    .dxxl-coln-2   { --w: calc(100% / 2); width: var(--w);}
    .dxxl-coln-3   { --w: calc(100% / 3); width: var(--w);}
    .dxxl-coln-4   { --w: calc(100% / 4); width: var(--w);}
    .dxxl-coln-5   { --w: calc(100% / 5); width: var(--w);}
    .dxxl-coln-6   { --w: calc(100% / 6); width: var(--w);}
    .dxxl-coln-7   { --w: calc(100% / 7); width: var(--w);}
    .dxxl-coln-8   { --w: calc(100% / 8); width: var(--w);}
    .dxxl-coln-9   { --w: calc(100% / 9); width: var(--w);}
    .dxxl-coln-10  { --w: calc(100% / 10); width: var(--w);}
    .dxxl-coln-11  { --w: calc(100% / 11); width: var(--w);}
    .dxxl-coln-12  { --w: calc(100% / 12); width: var(--w);}

    /*-----ALTEZZA-----*/
    .dxxl-h-0   { --h: 0%; height: var(--h);}
    .dxxl-h-5   { --h: 5%; height: var(--h);}
    .dxxl-h-10  { --h: 10%; height: var(--h);}
    .dxxl-h-15  { --h: 15%; height: var(--h);}
    .dxxl-h-20  { --h: 20%; height: var(--h);}
    .dxxl-h-25  { --h: 25%; height: var(--h);}
    .dxxl-h-30  { --h: 30%; height: var(--h);}
    .dxxl-h-35  { --h: 35%; height: var(--h);}
    .dxxl-h-40  { --h: 40%; height: var(--h);}
    .dxxl-h-45  { --h: 45%; height: var(--h);}
    .dxxl-h-50  { --h: 50%; height: var(--h);}
    .dxxl-h-55  { --h: 55%; height: var(--h);}
    .dxxl-h-60  { --h: 60%; height: var(--h);}
    .dxxl-h-65  { --h: 65%; height: var(--h);}
    .dxxl-h-70  { --h: 70%; height: var(--h);}
    .dxxl-h-75  { --h: 75%; height: var(--h);}
    .dxxl-h-80  { --h: 80%; height: var(--h);}
    .dxxl-h-85  { --h: 85%; height: var(--h);}
    .dxxl-h-90  { --h: 90%; height: var(--h);}
    .dxxl-h-95  { --h: 95%; height: var(--h);}
    .dxxl-h-100 { --h: 100%; height: var(--h);}
    .dxxl-h-min-100 { min-height: 100%; }

    .dxxl-h-vh-0   { --h: 0vh; height: var(--h);}
    .dxxl-h-vh-5   { --h: 5vh; height: var(--h); }
    .dxxl-h-vh-10  { --h: 10vh; height: var(--h);}
    .dxxl-h-vh-15  { --h: 15vh; height: var(--h);}
    .dxxl-h-vh-20  { --h: 20vh; height: var(--h);}
    .dxxl-h-vh-25  { --h: 25vh; height: var(--h);}
    .dxxl-h-vh-30  { --h: 30vh; height: var(--h);}
    .dxxl-h-vh-35  { --h: 35vh; height: var(--h);}
    .dxxl-h-vh-40  { --h: 40vh; height: var(--h);}
    .dxxl-h-vh-45  { --h: 45vh; height: var(--h);}
    .dxxl-h-vh-50  { --h: 50vh; height: var(--h);}
    .dxxl-h-vh-55  { --h: 55vh; height: var(--h);}
    .dxxl-h-vh-60  { --h: 60vh; height: var(--h);}
    .dxxl-h-vh-65  { --h: 65vh; height: var(--h);}
    .dxxl-h-vh-70  { --h: 70vh; height: var(--h);}
    .dxxl-h-vh-75  { --h: 75vh; height: var(--h);}
    .dxxl-h-vh-80  { --h: 80vh; height: var(--h);}
    .dxxl-h-vh-85  { --h: 85vh; height: var(--h);}
    .dxxl-h-vh-90  { --h: 90vh; height: var(--h);}
    .dxxl-h-vh-95  { --h: 95vh; height: var(--h);}
    .dxxl-h-vh-100 { --h: 100vh; height: var(--h);}

    /*-----FLEXBOX-----*/
    /* Flex Container */
    .dxxl-d-flex { display: flex; }
    .dxxl-d-inline-flex { display: inline-flex; }
    .dxxl-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .dxxl-justify-start { justify-content: flex-start; }
    .dxxl-justify-center { justify-content: center; }
    .dxxl-justify-end { justify-content: flex-end; }
    .dxxl-justify-between { justify-content: space-between; }
    .dxxl-justify-around { justify-content: space-around; }
    .dxxl-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .dxxl-align-start { align-items: flex-start; }
    .dxxl-align-center { align-items: center; }
    .dxxl-align-end { align-items: flex-end; }
    .dxxl-align-baseline { align-items: baseline; }
    .dxxl-align-stretch { align-items: stretch; }

    /* Align Self */
    .dxxl-align-self-start { align-self: flex-start; }
    .dxxl-align-self-center { align-self: center; }
    .dxxl-align-self-end { align-self: flex-end; }
    .dxxl-align-self-baseline { align-self: baseline; }
    .dxxl-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .dxxl-flex-row { flex-direction: row; }
    .dxxl-flex-row-reverse { flex-direction: row-reverse; }
    .dxxl-flex-column { flex-direction: column; }
    .dxxl-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .dxxl-flex-nowrap { flex-wrap: nowrap; }
    .dxxl-flex-wrap { flex-wrap: wrap; }
    .dxxl-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .dxxl-flex-grow-0 { flex-grow: 0; }
    .dxxl-flex-grow-1 { flex-grow: 1; }

    .dxxl-flex-shrink-0 { flex-shrink: 0; }
    .dxxl-flex-shrink-1 { flex-shrink: 1; }

    .dxxl-flex-basis-auto { flex-basis: auto; }
    .dxxl-flex-basis-100 { flex-basis: 100%; }
    .dxxl-flex-basis-50 { flex-basis: 50%; }
    .dxxl-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .dxxl-flex-0 { display: none; }

    /*-----GRIGLIE (DXXL / DESKTOP EXTRA EXTRA LARGE)-----*/
    .dxxl-d-grid { display: grid; }
    .dxxl-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .dxxl-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .dxxl-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .dxxl-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .dxxl-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .dxxl-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .dxxl-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .dxxl-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .dxxl-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .dxxl-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .dxxl-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .dxxl-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .dxxl-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .dxxl-grid-cols-auto      { grid-template-columns: auto; }
    .dxxl-grid-cols-min       { grid-template-columns: min-content; }
    .dxxl-grid-cols-max       { grid-template-columns: max-content; }

    .dxxl-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .dxxl-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .dxxl-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .dxxl-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .dxxl-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .dxxl-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .dxxl-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .dxxl-gap-xxs { gap: var(--space-xxs); }
    .dxxl-gap-xs  { gap: var(--space-xs); }
    .dxxl-gap-sm  { gap: var(--space-sm); }
    .dxxl-gap-md  { gap: var(--space-md); }
    .dxxl-gap-lg  { gap: var(--space-lg); }
    .dxxl-gap-xl  { gap: var(--space-xl); }
    .dxxl-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .dxxl-gap-x-xxs { column-gap: var(--space-xxs); }
    .dxxl-gap-x-xs  { column-gap: var(--space-xs); }
    .dxxl-gap-x-sm  { column-gap: var(--space-sm); }
    .dxxl-gap-x-md  { column-gap: var(--space-md); }
    .dxxl-gap-x-lg  { column-gap: var(--space-lg); }
    .dxxl-gap-x-xl  { column-gap: var(--space-xl); }
    .dxxl-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .dxxl-gap-y-xxs { row-gap: var(--space-xxs); }
    .dxxl-gap-y-xs  { row-gap: var(--space-xs); }
    .dxxl-gap-y-sm  { row-gap: var(--space-sm); }
    .dxxl-gap-y-md  { row-gap: var(--space-md); }
    .dxxl-gap-y-lg  { row-gap: var(--space-lg); }
    .dxxl-gap-y-xl  { row-gap: var(--space-xl); }
    .dxxl-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .dxxl-justify-items-start    { justify-items: start; }
    .dxxl-justify-items-center   { justify-items: center; }
    .dxxl-justify-items-end      { justify-items: end; }
    .dxxl-justify-items-stretch  { justify-items: stretch; }

    .dxxl-align-items-start      { align-items: start; }
    .dxxl-align-items-center     { align-items: center; }
    .dxxl-align-items-end        { align-items: end; }
    .dxxl-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .dxxl-justify-start      { justify-content: flex-start; }
    .dxxl-justify-center     { justify-content: center; }
    .dxxl-justify-end        { justify-content: flex-end; }
    .dxxl-justify-between    { justify-content: space-between; }
    .dxxl-justify-around     { justify-content: space-around; }
    .dxxl-justify-evenly     { justify-content: space-evenly; }

    .dxxl-align-start        { align-content: flex-start; }
    .dxxl-align-center       { align-content: center; }
    .dxxl-align-end          { align-content: flex-end; }
    .dxxl-align-between      { align-content: space-between; }
    .dxxl-align-around       { align-content: space-around; }
    .dxxl-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .dxxl-place-self-start     { place-self: start; }
    .dxxl-place-self-end       { place-self: end; }
    .dxxl-place-self-center    { place-self: center; }
    .dxxl-place-self-stretch   { place-self: stretch; }

    .dxxl-align-self-start     { align-self: flex-start; }
    .dxxl-align-self-center    { align-self: center; }
    .dxxl-align-self-end       { align-self: flex-end; }
    .dxxl-align-self-stretch   { align-self: stretch; }

    .dxxl-justify-self-start   { justify-self: start; }
    .dxxl-justify-self-end     { justify-self: end; }
    .dxxl-justify-self-center  { justify-self: center; }
    .dxxl-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .dxxl-col-span-1  { grid-column: span 1 / span 1; }
    .dxxl-col-span-2  { grid-column: span 2 / span 2; }
    .dxxl-col-span-3  { grid-column: span 3 / span 3; }
    .dxxl-col-span-4  { grid-column: span 4 / span 4; }
    .dxxl-col-span-5  { grid-column: span 5 / span 5; }
    .dxxl-col-span-6  { grid-column: span 6 / span 6; }
    .dxxl-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .dxxl-col-start-1  { grid-column-start: 1; }
    .dxxl-col-start-2  { grid-column-start: 2; }
    .dxxl-col-start-3  { grid-column-start: 3; }
    .dxxl-col-start-4  { grid-column-start: 4; }

    .dxxl-col-end-1    { grid-column-end: 1; }
    .dxxl-col-end-2    { grid-column-end: 2; }
    .dxxl-col-end-3    { grid-column-end: 3; }
    .dxxl-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .dxxl-row-span-1  { grid-row: span 1 / span 1; }
    .dxxl-row-span-2  { grid-row: span 2 / span 2; }
    .dxxl-row-span-3  { grid-row: span 3 / span 3; }
    .dxxl-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .dxxl-row-start-1  { grid-row-start: 1; }
    .dxxl-row-start-2  { grid-row-start: 2; }
    .dxxl-row-start-3  { grid-row-start: 3; }

    .dxxl-row-end-1    { grid-row-end: 1; }
    .dxxl-row-end-2    { grid-row-end: 2; }
    .dxxl-row-end-3    { grid-row-end: 3; }


    /*-----VISIBILITA-----*/
    .dxxl-d-block{ display: block; }
    .dxxl-d-inline-block{ display: inline-block; }
    .dxxl-d-none{ display: none; }
}
/*----------DESKTOP STANDARD----------*/
@media only screen and (min-width:82rem) and (max-width:119.9rem) {
    /*----------TXT, ICONS & FONTS----------*/
    .dsd-alL{ text-align: left; }
    .dsd-alC{ text-align: center; }
    .dsd-alR{ text-align: right; }
    .dsd-alJ{ text-align: justify; }
    br.dsd-noBreak{ display: none; }
    br.dsd-break{ display: static; }
    /*-----SPAZIATURE-----*/
    /* Padding */
    .dsd-p-xs { padding: var(--space-xs); }
    .dsd-p-sm { padding: var(--space-sm); }
    .dsd-p-md { padding: var(--space-md); }
    .dsd-p-lg { padding: var(--space-lg); }

    /* Padding per direzioni specifiche */
    .dsd-px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .dsd-px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .dsd-px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .dsd-px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

    .dsd-py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .dsd-py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .dsd-py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .dsd-py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

    /* Padding individuale */
    .dsd-pt-xs { padding-top: var(--space-xs); }
    .dsd-pt-sm { padding-top: var(--space-sm); }
    .dsd-pt-md { padding-top: var(--space-md); }
    .dsd-pt-lg { padding-top: var(--space-lg); }

    .dsd-pb-xs { padding-bottom: var(--space-xs); }
    .dsd-pb-sm { padding-bottom: var(--space-sm); }
    .dsd-pb-md { padding-bottom: var(--space-md); }
    .dsd-pb-lg { padding-bottom: var(--space-lg); }

    .dsd-pl-xs { padding-left: var(--space-xs); }
    .dsd-pl-sm { padding-left: var(--space-sm); }
    .dsd-pl-md { padding-left: var(--space-md); }
    .dsd-pl-lg { padding-left: var(--space-lg); }

    .dsd-pr-xs { padding-right: var(--space-xs); }
    .dsd-pr-sm { padding-right: var(--space-sm); }
    .dsd-pr-md { padding-right: var(--space-md); }
    .dsd-pr-lg { padding-right: var(--space-lg); }

    /* Rimozione padding */
    .dsd-p-0 { padding: 0; }
    .dsd-px-0 { padding-left: 0; padding-right: 0; }
    .dsd-py-0 { padding-top: 0; padding-bottom: 0; }

    /* Margin */
    .dsd-m-xs { margin: var(--space-xs); }
    .dsd-m-sm { margin: var(--space-sm); }
    .dsd-m-md { margin: var(--space-md); }
    .dsd-m-lg { margin: var(--space-lg); }

    /* Margin per direzioni specifiche */
    .dsd-mx-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .dsd-mx-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .dsd-mx-md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .dsd-mx-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

    .dsd-my-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .dsd-my-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .dsd-my-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .dsd-my-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

    /* Margin individuale */
    .dsd-mt-xs { margin-top: var(--space-xs); }
    .dsd-mt-sm { margin-top: var(--space-sm); }
    .dsd-mt-md { margin-top: var(--space-md); }
    .dsd-mt-lg { margin-top: var(--space-lg); }

    .dsd-mb-xs { margin-bottom: var(--space-xs); }
    .dsd-mb-sm { margin-bottom: var(--space-sm); }
    .dsd-mb-md { margin-bottom: var(--space-md); }
    .dsd-mb-lg { margin-bottom: var(--space-lg); }

    .dsd-ml-xs { margin-left: var(--space-xs); }
    .dsd-ml-sm { margin-left: var(--space-sm); }
    .dsd-ml-md { margin-left: var(--space-md); }
    .dsd-ml-lg { margin-left: var(--space-lg); }

    .dsd-mr-xs { margin-right: var(--space-xs); }
    .dsd-mr-sm { margin-right: var(--space-sm); }
    .dsd-mr-md { margin-right: var(--space-md); }
    .dsd-mr-lg { margin-right: var(--space-lg); }

    /* Rimozione margin */
    .dsd-m-0 { margin: 0; }
    .dsd-mx-0 { margin-left: 0; margin-right: 0; }
    .dsd-my-0 { margin-top: 0; margin-bottom: 0; }

    /*-----LARGHEZZA-----*/
    .dsd-w-0   { --w: 0%; width: var(--w); }
    .dsd-w-5   { --w: 5%; width: var(--w); }
    .dsd-w-10  { --w: 10%; width: var(--w); }
    .dsd-w-15  { --w: 15%; width: var(--w); }
    .dsd-w-20  { --w: 20%; width: var(--w); }
    .dsd-w-25  { --w: 25%; width: var(--w); }
    .dsd-w-30  { --w: 30%; width: var(--w); }
    .dsd-w-35  { --w: 35%; width: var(--w); }
    .dsd-w-40  { --w: 40%; width: var(--w); }
    .dsd-w-45  { --w: 45%; width: var(--w); }
    .dsd-w-50  { --w: 50%; width: var(--w); }
    .dsd-w-55  { --w: 55%; width: var(--w); }
    .dsd-w-60  { --w: 60%; width: var(--w); }
    .dsd-w-65  { --w: 65%; width: var(--w); }
    .dsd-w-70  { --w: 70%; width: var(--w); }
    .dsd-w-75  { --w: 75%; width: var(--w); }
    .dsd-w-80  { --w: 80%; width: var(--w); }
    .dsd-w-85  { --w: 85%; width: var(--w); }
    .dsd-w-90  { --w: 90%; width: var(--w); }
    .dsd-w-95  { --w: 95%; width: var(--w); }
    .dsd-w-100 { --w: 100%; width: var(--w); }

    .dsd-w-vw-0   { --w: 0vw; width: var(--w); }
    .dsd-w-vw-5   { --w: 5vw; width: var(--w); }
    .dsd-w-vw-10  { --w: 10vw; width: var(--w); }
    .dsd-w-vw-15  { --w: 15vw; width: var(--w); }
    .dsd-w-vw-20  { --w: 20vw; width: var(--w); }
    .dsd-w-vw-25  { --w: 25vw; width: var(--w); }
    .dsd-w-vw-30  { --w: 30vw; width: var(--w); }
    .dsd-w-vw-35  { --w: 35vw; width: var(--w); }
    .dsd-w-vw-40  { --w: 40vw; width: var(--w); }
    .dsd-w-vw-45  { --w: 45vw; width: var(--w); }
    .dsd-w-vw-50  { --w: 50vw; width: var(--w); }
    .dsd-w-vw-55  { --w: 55vw; width: var(--w); }
    .dsd-w-vw-60  { --w: 60vw; width: var(--w); }
    .dsd-w-vw-65  { --w: 65vw; width: var(--w); }
    .dsd-w-vw-70  { --w: 70vw; width: var(--w); }
    .dsd-w-vw-75  { --w: 75vw; width: var(--w); }
    .dsd-w-vw-80  { --w: 80vw; width: var(--w); }
    .dsd-w-vw-85  { --w: 85vw; width: var(--w); }
    .dsd-w-vw-90  { --w: 90vw; width: var(--w); }
    .dsd-w-vw-95  { --w: 95vw; width: var(--w); }
    .dsd-w-vw-100 { --w: 100vw; width: var(--w); }

    .dsd-coln-1   { --w: calc(100% / 1); width: var(--w); }
    .dsd-coln-2   { --w: calc(100% / 2); width: var(--w); }
    .dsd-coln-3   { --w: calc(100% / 3); width: var(--w); }
    .dsd-coln-4   { --w: calc(100% / 4); width: var(--w); }
    .dsd-coln-5   { --w: calc(100% / 5); width: var(--w); }
    .dsd-coln-6   { --w: calc(100% / 6); width: var(--w); }
    .dsd-coln-7   { --w: calc(100% / 7); width: var(--w); }
    .dsd-coln-8   { --w: calc(100% / 8); width: var(--w); }
    .dsd-coln-9   { --w: calc(100% / 9); width: var(--w); }
    .dsd-coln-10  { --w: calc(100% / 10); width: var(--w); }
    .dsd-coln-11  { --w: calc(100% / 11); width: var(--w); }
    .dsd-coln-12  { --w: calc(100% / 12); width: var(--w); }

    /*-----ALTEZZA-----*/
    .dsd-h-0   { --h: 0%; height: var(--h); }
    .dsd-h-5   { --h: 5%; height: var(--h); }
    .dsd-h-10  { --h: 10%; height: var(--h); }
    .dsd-h-15  { --h: 15%; height: var(--h); }
    .dsd-h-20  { --h: 20%; height: var(--h); }
    .dsd-h-25  { --h: 25%; height: var(--h); }
    .dsd-h-30  { --h: 30%; height: var(--h); }
    .dsd-h-35  { --h: 35%; height: var(--h); }
    .dsd-h-40  { --h: 40%; height: var(--h); }
    .dsd-h-45  { --h: 45%; height: var(--h); }
    .dsd-h-50  { --h: 50%; height: var(--h); }
    .dsd-h-55  { --h: 55%; height: var(--h); }
    .dsd-h-60  { --h: 60%; height: var(--h); }
    .dsd-h-65  { --h: 65%; height: var(--h); }
    .dsd-h-70  { --h: 70%; height: var(--h); }
    .dsd-h-75  { --h: 75%; height: var(--h); }
    .dsd-h-80  { --h: 80%; height: var(--h); }
    .dsd-h-85  { --h: 85%; height: var(--h); }
    .dsd-h-90  { --h: 90%; height: var(--h); }
    .dsd-h-95  { --h: 95%; height: var(--h); }
    .dsd-h-100 { --h: 100%; height: var(--h); }

    .dsd-h-min-100 { min-height: 100%; }

    .dsd-h-vh-0   { --h: 0vh; height: var(--h); }
    .dsd-h-vh-5   { --h: 5vh; height: var(--h); }
    .dsd-h-vh-10  { --h: 10vh; height: var(--h); }
    .dsd-h-vh-15  { --h: 15vh; height: var(--h); }
    .dsd-h-vh-20  { --h: 20vh; height: var(--h); }
    .dsd-h-vh-25  { --h: 25vh; height: var(--h); }
    .dsd-h-vh-30  { --h: 30vh; height: var(--h); }
    .dsd-h-vh-35  { --h: 35vh; height: var(--h); }
    .dsd-h-vh-40  { --h: 40vh; height: var(--h); }
    .dsd-h-vh-45  { --h: 45vh; height: var(--h); }
    .dsd-h-vh-50  { --h: 50vh; height: var(--h); }
    .dsd-h-vh-55  { --h: 55vh; height: var(--h); }
    .dsd-h-vh-60  { --h: 60vh; height: var(--h); }
    .dsd-h-vh-65  { --h: 65vh; height: var(--h); }
    .dsd-h-vh-70  { --h: 70vh; height: var(--h); }
    .dsd-h-vh-75  { --h: 75vh; height: var(--h); }
    .dsd-h-vh-80  { --h: 80vh; height: var(--h); }
    .dsd-h-vh-85  { --h: 85vh; height: var(--h); }
    .dsd-h-vh-90  { --h: 90vh; height: var(--h); }
    .dsd-h-vh-95  { --h: 95vh; height: var(--h); }
    .dsd-h-vh-100 { --h: 100vh; height: var(--h); }


    /*-----FLEXBOX-----*/
    /* Flex Container */
    .dsd-d-flex { display: flex; }
    .dsd-d-inline-flex { display: inline-flex; }
    .dsd-grid-nowrap { grid-auto-flow:column; }

    /* Justify Content */
    .dsd-justify-start { justify-content: flex-start; }
    .dsd-justify-center { justify-content: center; }
    .dsd-justify-end { justify-content: flex-end; }
    .dsd-justify-between { justify-content: space-between; }
    .dsd-justify-around { justify-content: space-around; }
    .dsd-justify-evenly { justify-content: space-evenly; }

    /* Align Items */
    .dsd-align-start { align-items: flex-start; }
    .dsd-align-center { align-items: center; }
    .dsd-align-end { align-items: flex-end; }
    .dsd-align-baseline { align-items: baseline; }
    .dsd-align-stretch { align-items: stretch; }

    /* Align Self */
    .dsd-align-self-start { align-self: flex-start; }
    .dsd-align-self-center { align-self: center; }
    .dsd-align-self-end { align-self: flex-end; }
    .dsd-align-self-baseline { align-self: baseline; }
    .dsd-align-self-stretch { align-self: stretch; }

    /* Flex Direction */
    .dsd-flex-row { flex-direction: row; }
    .dsd-flex-row-reverse { flex-direction: row-reverse; }
    .dsd-flex-column { flex-direction: column; }
    .dsd-flex-column-reverse { flex-direction: column-reverse; }

    /* Flex Wrap */
    .dsd-flex-nowrap { flex-wrap: nowrap; }
    .dsd-flex-wrap { flex-wrap: wrap; }
    .dsd-flex-wrap-reverse { flex-wrap: wrap-reverse; }

    /* Flex Item */
    .dsd-flex-grow-0 { flex-grow: 0; }
    .dsd-flex-grow-1 { flex-grow: 1; }

    .dsd-flex-shrink-0 { flex-shrink: 0; }
    .dsd-flex-shrink-1 { flex-shrink: 1; }

    .dsd-flex-basis-auto { flex-basis: auto; }
    .dsd-flex-basis-100 { flex-basis: 100%; }
    .dsd-flex-basis-50 { flex-basis: 50%; }
    .dsd-flex-basis-25 { flex-basis: 25%; }

    /* Rimozione di flex */
    .dsd-flex-0 { display: none; }

    /*-----GRIGLIE (DSD / DESKTOP SUPER DEFINITION)-----*/
    .dsd-d-grid { display: grid; }
    .dsd-d-inline-grid { display: inline-grid; }

    /*Colonne*/
    .dsd-grid-cols-1  { grid-template-columns: repeat(1, 1fr); }
    .dsd-grid-cols-2  { grid-template-columns: repeat(2, 1fr); }
    .dsd-grid-cols-3  { grid-template-columns: repeat(3, 1fr); }
    .dsd-grid-cols-4  { grid-template-columns: repeat(4, 1fr); }
    .dsd-grid-cols-5  { grid-template-columns: repeat(5, 1fr); }
    .dsd-grid-cols-6  { grid-template-columns: repeat(6, 1fr); }
    .dsd-grid-cols-7  { grid-template-columns: repeat(7, 1fr); }
    .dsd-grid-cols-8  { grid-template-columns: repeat(8, 1fr); }
    .dsd-grid-cols-9  { grid-template-columns: repeat(9, 1fr); }
    .dsd-grid-cols-10 { grid-template-columns: repeat(10, 1fr); }
    .dsd-grid-cols-11 { grid-template-columns: repeat(11, 1fr); }
    .dsd-grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

    .dsd-grid-cols-auto      { grid-template-columns: auto; }
    .dsd-grid-cols-min       { grid-template-columns: min-content; }
    .dsd-grid-cols-max       { grid-template-columns: max-content; }

    .dsd-grid-cols-fr-1      { grid-template-columns: 1fr; }
    .dsd-grid-cols-fr-2      { grid-template-columns: 2fr 1fr; }
    .dsd-grid-cols-fr-3      { grid-template-columns: 1fr 2fr; }

    .dsd-grid-cols-minmax    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .dsd-grid-cols-minmax-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .dsd-grid-cols-minmax-lg { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

    .dsd-grid-cols-none      { grid-template-columns: none; }

    /*Gap - entrambi gli assi*/
    .dsd-gap-xxs { gap: var(--space-xxs); }
    .dsd-gap-xs  { gap: var(--space-xs); }
    .dsd-gap-sm  { gap: var(--space-sm); }
    .dsd-gap-md  { gap: var(--space-md); }
    .dsd-gap-lg  { gap: var(--space-lg); }
    .dsd-gap-xl  { gap: var(--space-xl); }
    .dsd-gap-xxl { gap: var(--space-xxl); }

    /*Gap solo orizzontale*/
    .dsd-gap-x-xxs { column-gap: var(--space-xxs); }
    .dsd-gap-x-xs  { column-gap: var(--space-xs); }
    .dsd-gap-x-sm  { column-gap: var(--space-sm); }
    .dsd-gap-x-md  { column-gap: var(--space-md); }
    .dsd-gap-x-lg  { column-gap: var(--space-lg); }
    .dsd-gap-x-xl  { column-gap: var(--space-xl); }
    .dsd-gap-x-xxl { column-gap: var(--space-xxl); }

    /*Gap solo verticale*/
    .dsd-gap-y-xxs { row-gap: var(--space-xxs); }
    .dsd-gap-y-xs  { row-gap: var(--space-xs); }
    .dsd-gap-y-sm  { row-gap: var(--space-sm); }
    .dsd-gap-y-md  { row-gap: var(--space-md); }
    .dsd-gap-y-lg  { row-gap: var(--space-lg); }
    .dsd-gap-y-xl  { row-gap: var(--space-xl); }
    .dsd-gap-y-xxl { row-gap: var(--space-xxl); }

    /*Allineamento elementi nelle celle (Grid)*/
    .dsd-justify-items-start    { justify-items: start; }
    .dsd-justify-items-center   { justify-items: center; }
    .dsd-justify-items-end      { justify-items: end; }
    .dsd-justify-items-stretch  { justify-items: stretch; }

    .dsd-align-items-start      { align-items: start; }
    .dsd-align-items-center     { align-items: center; }
    .dsd-align-items-end        { align-items: end; }
    .dsd-align-items-stretch    { align-items: stretch; }

    /*Distribuzione spazio (Flex/Grid)*/
    .dsd-justify-start      { justify-content: flex-start; }
    .dsd-justify-center     { justify-content: center; }
    .dsd-justify-end        { justify-content: flex-end; }
    .dsd-justify-between    { justify-content: space-between; }
    .dsd-justify-around     { justify-content: space-around; }
    .dsd-justify-evenly     { justify-content: space-evenly; }

    .dsd-align-start        { align-content: flex-start; }
    .dsd-align-center       { align-content: center; }
    .dsd-align-end          { align-content: flex-end; }
    .dsd-align-between      { align-content: space-between; }
    .dsd-align-around       { align-content: space-around; }
    .dsd-align-stretch      { align-content: stretch; }

    /*Allineamento singolo elemento*/
    .dsd-place-self-start     { place-self: start; }
    .dsd-place-self-end       { place-self: end; }
    .dsd-place-self-center    { place-self: center; }
    .dsd-place-self-stretch   { place-self: stretch; }

    .dsd-align-self-start     { align-self: flex-start; }
    .dsd-align-self-center    { align-self: center; }
    .dsd-align-self-end       { align-self: flex-end; }
    .dsd-align-self-stretch   { align-self: stretch; }

    .dsd-justify-self-start   { justify-self: start; }
    .dsd-justify-self-end     { justify-self: end; }
    .dsd-justify-self-center  { justify-self: center; }
    .dsd-justify-self-stretch { justify-self: stretch; }

    /*Span colonne*/
    .dsd-col-span-1  { grid-column: span 1 / span 1; }
    .dsd-col-span-2  { grid-column: span 2 / span 2; }
    .dsd-col-span-3  { grid-column: span 3 / span 3; }
    .dsd-col-span-4  { grid-column: span 4 / span 4; }
    .dsd-col-span-5  { grid-column: span 5 / span 5; }
    .dsd-col-span-6  { grid-column: span 6 / span 6; }
    .dsd-col-span-12 { grid-column: span 12 / span 12; }

    /*Start/End colonne*/
    .dsd-col-start-1  { grid-column-start: 1; }
    .dsd-col-start-2  { grid-column-start: 2; }
    .dsd-col-start-3  { grid-column-start: 3; }
    .dsd-col-start-4  { grid-column-start: 4; }

    .dsd-col-end-1    { grid-column-end: 1; }
    .dsd-col-end-2    { grid-column-end: 2; }
    .dsd-col-end-3    { grid-column-end: 3; }
    .dsd-col-end-4    { grid-column-end: 4; }

    /*Span righe*/
    .dsd-row-span-1  { grid-row: span 1 / span 1; }
    .dsd-row-span-2  { grid-row: span 2 / span 2; }
    .dsd-row-span-3  { grid-row: span 3 / span 3; }
    .dsd-row-span-4  { grid-row: span 4 / span 4; }

    /*Start/End righe*/
    .dsd-row-start-1  { grid-row-start: 1; }
    .dsd-row-start-2  { grid-row-start: 2; }
    .dsd-row-start-3  { grid-row-start: 3; }

    .dsd-row-end-1    { grid-row-end: 1; }
    .dsd-row-end-2    { grid-row-end: 2; }
    .dsd-row-end-3    { grid-row-end: 3; }


    /*-----VISIBILITA-----*/
    .dsd-d-block{ display: block; }
    .dsd-d-inline-block{ display: inline-block; }
    .dsd-d-none{ display: none; }
}
/*----------ORIENTAMENTO LANDSCAPE----------*/
@media only screen and (orientation: landscape) {}
/*----------BROWSER----------*/
/*-----FIREFOX-----*/
@-moz-document url-prefix() {}
/*-----DISPOSITIVI TOUCH IOS-----*/
@media only screen and (hover: none) and (pointer: coarse) {}
/*-----CHROME & SAFARI-----*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {}
/*-----EDGE-----*/
@supports (-ms-ime-align: auto) {}

/* Preferenze utenti */
/*
@media (prefers-reduced-motion: reduce) {
    video {
        display: none;
    }
    * {
        animation: none !important;
        -webkit-animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}
*/