@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --colore1: #009DDF;
    --colore2: #FFD740;

    --bianco0: #FFFFFF;
    --bianco1: #F5F5F5;

    --nero0: #404040;
    --nero1: #333333;
    --nero2: #808080;
    --nero3: #BFBFBF;
    --nero4: #B3B3B3;
    --nero5: #595959;
    
    --margin0: 5px;
    --margin1: 5px; /* 10px */
    --margin2: 10px; /* 15px */
    --margin3: 20px; /* 30px */
    --margin4: 20px; /* 50px */
    --margin5: 20px; /* 80px */
    
    --font-size0: 12px;
    --font-size1: 14px;
    --font-size2: 16px;
    --font-size3: 24px; 
    --font-size4: 24px; /* 32 */
    --font-size5: 32px; /* 56 */

    --line-height: 5px;
    
    --radius0: 10px;
    --radius1: 20px;
    --radius2: 30px;
    
    --box-shadow1: 0px 24px 38px -34px #00000026;
    --box-shadow2: 0 1px 3px rgba(0,0,0,0.05);

    --logo-height: 50px;
    --top-height: calc(var(--logo-height) + (var(--margin1) * 2));

    --container-width: 1400px;
    --container-width-inner: calc(var(--container-width) - (var(--margin5) * 2));
    --container-width-full: calc(100vw - (var(--margin2) * 2));

    --transition0: .1s;
}
@media only screen and (min-width: 768px){
    :root {
        --margin1: 10px;
        --margin2: 15px;
        --margin3: 30px;
        --margin4: 50px;
        --margin5: 80px;
        --font-size4: 40px;
        --font-size5: 56px;
    }
}

#topmenu
, body.pre_login #tabs {
    width: var(--container-width);
    max-width: var(--container-width);
    margin: 0 auto;
}

body.pre_login {
    margin: 0;
    background: var(--bianco1);
    padding: var(--margin4);

    overflow: initial !important;
    overflow-x: initial !important;
    overflow-y: initial !important;
}

body.pre_login, .pre_login select, .pre_login input[type="text"], .pre_login input[type="password"], .pre_login textarea {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
}

body.pre_login #top {
    display: none !important;
}

.pre_login #tabs.noScroll {
    overflow: initial !important;
    overflow-x: initial !important;
    overflow-y: initial !important;
}

body.pre_login #tabs:not(.has_login) > div {
    background: var(--bianco0);
    box-shadow: var(--box-shadow1);
    border-radius: var(--radius2);
    height: auto !important;
    min-height: calc(100dvh - 217px);
    position: relative;

    padding: var(--margin4);
}
body.pre_login #tabs:not(.has_login) > div::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #009DDF 0%, #86DBFF 50%, #009DDF 100%);
}
body.pre_login .CODE
, body.pre_login div.F4M_SEARCH .BOX_CRITERIA .CODE {
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    visibility: hidden;
}

.dash_top_outer {
    background: var(--colore1);
    background: linear-gradient(90deg, #1362AD 0%, #4FA1EF 100%);
    box-shadow: var(--box-shadow1);
    border-radius: var(--radius2);
    position: relative;

    padding: var(--margin3);

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}
.dash_top_outer::before {
    content: " ";
    position: absolute;
    top: 0;
    left: auto;
    right: 15%;
    width: 100%;
    height: 150%;
    background: url(/resource/sfondo_overlay_mini.svg) no-repeat center center;
    background-size: contain;
    background-position: center right;
}
.dash_top_title
, .dash_top_notitle {
    color: var(--bianco0);
    font-size: var(--font-size4);
    line-height: calc(var(--font-size4) + var(--line-height));
    font-weight: 800;
}
.my_btn
, body.pre_login .ACTION span.button {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    font-weight: 500;
    color: var(--bianco0);
    background-color: var(--colore1);
    padding: var(--margin1) var(--margin1);
    border-radius: var(--radius1);
    box-shadow: var(--box-shadow2);
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition0), box-shadow var(--transition0);
    cursor: pointer;
}
.my_btn > i
, body.pre_login .ACTION span.button > i {
    font-size: var(--font-size2) !important;
    line-height: calc(var(--font-size2) + var(--line-height));
}

/* -----------------------------------------------------------
   TRASFORMAZIONE LEFTBAR IN TOPBAR ORIZZONTALE
   ----------------------------------------------------------- */

/* 0. Contenitore generale del leftbar */
body.pre_login div#leftbar {
    margin-bottom: var(--margin2);
    width: var(--container-width);
    max-width: var(--container-width);
    margin: 0 auto;
}

/* 1. RESET DEL CONTENITORE PRINCIPALE (#leftbar) */
/* Sovrascriviamo le regole di posizionamento fisso e verticale */
body.pre_login div#leftbar,
body.pre_login div#leftbar[state="close"],
body.pre_login div#leftbar[state="open"] {
    /* Reset posizionamento e dimensioni */
    position: relative; 
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    height: auto;
    
    /* Applicazione stile Topbar (variabili) */
    margin-bottom: var(--margin2);
    padding: var(--margin2) var(--margin4);
    background-color: var(--bianco0);
    border-radius: var(--radius2);
    box-shadow: var(--box-shadow1);
    
    /* Layout Flexbox per allineamento orizzontale */
    display: flex !important; /* Forza la visibilità anche se state="close" */
    align-items: center;
    justify-content: flex-start; /* Allinea a sinistra (Logo + Menu) */
    
    /* Rimozione bordi e scroll vecchi */
    border: none;
    overflow: visible; /* Necessario per vedere i sottomenu a tendina */
    transition: none; /* Rimuove l'animazione di scorrimento laterale */
}

/* Gestione contenuto interno quando era "chiuso" */
body.pre_login div#leftbar[state="close"] > * {
    display: flex; /* Rende visibili i figli anche se lo stato è close */
}

/* 2. GESTIONE DEL CONTENITORE VOCI (.F4M_MENU_GLOBAL) */
/* Questo div contiene tutte le voci di menu, lo mettiamo in flex */
body.pre_login #leftbar .F4M_MENU_GLOBAL {
    display: flex;
    align-items: center;
    width: 100%;
}

body.pre_login #leftbar .F4M_MENU_GLOBAL > * {
    margin-right: var(--margin3); /* Spazio tra le voci di menu */
}
body.pre_login #leftbar .F4M_MENU_GLOBAL > *:last-child {
    margin-right: 0; /* Rimuove margine dall'ultima voce */
}

/* Se inserisci il logo dentro leftbar, questo gestisce lo spazio tra logo e menu */
body.pre_login #leftbar .topmenu_logo {
    margin-right: auto; /* Spinge il menu tutto a destra se desiderato, o usa gap fisso */
    padding-right: var(--margin4);
}

/* 3. STILE DELLE VOCI DI MENU (.F4M_MENU) */
body.pre_login #leftbar.has_login div.F4M_MENU {
    display: none;
}
body.pre_login #leftbar div.F4M_MENU {
    /* Reset stili precedenti */
    width: auto;
    height: auto;
    border: none !important; /* Rimuove tutti i bordi (top/bottom/double) */
    background-color: transparent !important; /* Rimuove sfondi grigi/celesti */
    padding: 0;
    margin: 0;
    
    /* Nuovo stile tipografico (da topmenu) */
    font-size: var(--font-size3);
    line-height: calc(var(--font-size3) + var(--line-height));
    font-weight: 500;
    color: inherit; /* O il colore del testo desiderato */
    
    /* Layout */
    display: flex;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
}

/* Rimuove stili specifici dei separatori se presenti, rendendoli voci normali o nascosti */
body.pre_login #leftbar div.F4M_MENU[kind='SEPARATOR'] {
    display: none; /* Solitamente i separatori non servono nei menu orizzontali */
}

/* 4. AGGIUNTA FRECCETTA PER I LIVELLI (FontAwesome 5) */
body.pre_login #leftbar div.F4M_MENU[kind='LEVEL']::after {
    content: "\f078"; /* Codice unicode per fa-chevron-down */
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900;
    font-size: 0.7em;
    margin-left: var(--margin1);
    opacity: 0.7;
    transition: transform 0.3s;
}

/* Rotazione freccetta se necessario (gestibile via classe attiva se prevista dal JS) */
/* body.pre_login #leftbar div.F4M_MENU[kind='LEVEL'].active::after { transform: rotate(180deg); } */

/* 5. SOTTOMENU A TENDINA (.F4M_MENU_STEP) */
/* Trasformiamo l'accordion verticale in un dropdown assoluto */
body.pre_login #leftbar div.F4M_MENU_STEP {
    position: absolute;
    top: calc(100% + 5px); /* Appare sotto la barra */
    /* Nota: il posizionamento orizzontale preciso richiede position relative sul genitore,
       ma qui i fratelli sono piatti. Verrà allineato al flusso o richiederà aggiustamenti JS */
    
    background-color: var(--bianco0);
    box-shadow: var(--box-shadow1);
    border-radius: var(--radius2);
    padding: var(--margin2) !important; /* !important sovrascrive lo stile inline */
    
    /* Stile interno del dropdown */
    flex-direction: column;
    min-width: 200px;
    z-index: 2000;
    
    /* Reset ereditati */
    border: none;
}

/* Quando il sottomenu è aperto (gestito dal tuo JS attuale che mette display:block) */
/* Assicuriamoci che le voci dentro il sottomenu siano verticali */
body.pre_login #leftbar div.F4M_MENU_STEP .F4M_MENU {
    display: flex;
    width: 100%;
    padding: var(--margin1);
    border-radius: var(--radius1);
}

/* Effetto Hover sulle voci del sottomenu */
body.pre_login #leftbar div.F4M_MENU_STEP .F4M_MENU:hover {
    background-color: var(--bianco1) !important;
}

/* 6. GESTIONE ELLIPSIS (Testo tagliato) */
body.pre_login #leftbar div.F4M_MENU {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 250px; /* Limite larghezza per attivare i puntini */
}

/* 7. IMMAGINE PROFILO (se presente) */
.immagine_profilo {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background-color: var(--bianco1);
}

/** ACTION **/

body.pre_login .BOX_ACTION {
    position: relative;
    height: auto;
    overflow: initial;
    z-index: initial;
    background-color: transparent !important;

    position: sticky;
    top: 0;
    padding: var(--margin2) 0;
    background-color: var(--bianco0) !important;
    z-index: 1000;
}
body.pre_login .ACTION {
    max-width: 100%;
    height: auto;
    overflow: initial;
    background-color: transparent !important;
    text-align: right;
    border-right: none;
    left: 0;
}
body.pre_login .ACTION span.button {
    border-left: none;
    background-color: #E5E5E5;
    color: #8C8C8C;
    width: auto;
    height: auto;
    overflow: initial;
    vertical-align: initial;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin1);
}
body.pre_login .ACTION span.button.my_text {
    background-color: transparent;
    box-shadow: none;
}

/*
body.pre_login .ACTION span.button.close
, body.pre_login .ACTION span.button.delete
, body.pre_login .ACTION span.button.save {
    border: 1px solid var(--nero0);
}
*/

body.pre_login .ACTION span.button.save {
    color: #ffffff;
    background-color: #B0C933;
}

/** LOGIN **/

body.pre_login #tabs.has_login {
    background: var(--colore1);
    background: linear-gradient(90deg, #1362AD 0%, #4FA1EF 100%);
    box-shadow: var(--box-shadow1);
    border-radius: var(--radius2);
    min-height: calc(100dvh - 217px);
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}
body.pre_login #tabs.has_login::before {
    content: " ";
    position: absolute;
    top: var(--margin3);
    left: var(--margin3);
    width: calc(100% - var(--margin3) * 2);
    height: calc(100% - var(--margin3) * 2);
    background: url('/resource/sfondo_overlay.svg') no-repeat center center;
    background-size: contain;
}

.BOX.box_login {
    height: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--margin3);
}

.logo_2 > img {
    width: 257px;
    height: auto;
}

div.login div.BOX.box_login div.trap {
    padding: var(--margin4);
    background-color: var(--bianco0) !important;
    border-radius: var(--radius2);
    position: relative;
    overflow: hidden;
    width: 100dvw;
    max-width: 450px;
}
div.login div.BOX.box_login div.trap::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, #009DDF 0%, #86DBFF 50%, #009DDF 100%);
}
div.login div.BOX.box_login div.tria {
    border-top: none !important;
}

div.login div.BOX.box_login div.trap .title {
    font-size: var(--font-size5);
    line-height: calc(var(--font-size5) + var(--line-height));
    font-weight: 700;
    color: var(--nero0);
    margin-bottom: var(--margin3);
    text-align: center;
}

body.pre_login div.label {
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height)) !important;
    color: var(--nero2);
    font-weight: 500;
}

body.pre_login div.elem input[type=text], body.pre_login div.elem input[type=password] {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    padding: 12px var(--margin2);
    border-radius: 42px;
    background-color: var(--bianco1) !important;
    border: 1px solid var(--bianco1);
    height: 49px;
}

body.pre_login div[f4m_type="READONLY"][name=recover] {
    font-size: var(--font-size0);
    line-height: calc(var(--font-size0) + var(--line-height));
    color: var(--nero2);
    width: fit-content;
    margin-left: auto;
}

div.login div.BOX.box_login div.recoverPwd {
    cursor: pointer;
}

div.login div.BOX.box_login div.btnOk {
    background-color: var(--colore1) !important;
    color: var(--bianco0) !important;
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height));
    font-weight: 500;
    text-align: center;
    padding: var(--margin2) var(--margin2);
    border-radius: 30px;
    cursor: pointer;
}

/** DASH **/

.BOX.box_dash {
    height: auto !important;
}

.dash_top > img {
    display: block;
    width: 100%;
    height: auto;
}
.dash_left > img {
    display: block;
    width: 100%;
    height: auto;
}

.my_text {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    font-weight: 500;
    color: var(--nero2);
    background-color: transparent;
    padding: var(--margin1) var(--margin1);
    border-radius: var(--radius1);
    box-shadow: var(--box-shadow2);
    text-align: center;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition0), box-shadow var(--transition0);
    cursor: pointer;
}

.dash_title {
    font-size: var(--font-size3);
    line-height: calc(var(--font-size3) + var(--line-height));
    font-weight: 700;
    color: var(--nero0);
}

/** SEARCH **/

body.pre_login .F4M_SEARCH .FILTER .BOX_ACTION {
    display: none;
}
body.pre_login .F4M_SEARCH .BOX_CRITERIA {
    background-color: transparent !important;
    position: relative;
    height: auto;
    overflow: initial;
    z-index: initial;

    width: 100%;
    max-width: var(--container-width-inner);
    margin-left: auto;
    margin-right: auto;
}
body.pre_login .F4M_SEARCH .BOX {
    width: 100%;
    max-width: var(--container-width-inner);
    margin-left: auto;
    margin-right: auto;
}
body.pre_login div.F4M_SEARCH div.CRITERIA {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    text-shadow: none;
    padding-left: 0;
    padding-right: 0;
    border-left: none;
    border-right: none;
}
body.pre_login div.F4M_SEARCH div.DESCRIPTION {
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height));
    font-style: initial;
    text-align: left;
    margin-top: 0;
    border-top: none;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: initial;
}
body.pre_login div.F4M_SEARCH div.DATAS div.BOX_GRID {
    width: 100%;
    margin-top: var(--margin3);
}
div.F4M_SEARCH div.DATAS div.BOX_ACTION div.ACTION {
    text-align: right;
}

/** TAB **/

body.pre_login .BOX .TAB {
    max-width: 100%;
    min-height: auto;
    overflow: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    border: none;
    background-color: transparent;
}

body.pre_login #tabs > div[f4m_prototype=tab] .BOX .TAB {
    width: 100%;
    max-width: var(--container-width-inner);
}

body.pre_login div.sub_title {
    position: relative;
    width: auto !important;
    font-size: var(--font-size3);
    line-height: calc(var(--font-size3) + var(--line-height));
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    font-weight: 800;
    font-style: initial;
    border-bottom: none;
    color: var(--nero0);
}

body.pre_login .BOX_ANCHOR {
    position: fixed;
    top: 200px;
    right: auto;
    width: auto;
    height: auto;
    left: calc(((100dvw + 1400px) / 2) - 2px);
    overflow: initial !important;
    margin-left: 0 !important;
    transition: top 0.3s ease;
}

body.pre_login .BOX_ANCHOR .ANCHOR {
    width: auto !important;
    top: 0;
    left: 0;
    position: static;
    height: auto;
    transform: none;
    max-height: calc(100dvh - 200px);
    
    /* 1. Sposta la scrollbar a sinistra */
    direction: rtl !important; 
    overflow-y: auto;
    overflow-x: hidden;

    /* 2. Scrollbar sottile per Firefox */
    scrollbar-width: thin;
    scrollbar-color: #888 #E5E5E5;
}

/* 3. Scrollbar sottile per Chrome, Edge e Safari */
body.pre_login .BOX_ANCHOR .ANCHOR::-webkit-scrollbar {
    width: 5px; /* Spessore molto sottile */
}

body.pre_login .BOX_ANCHOR .ANCHOR::-webkit-scrollbar-track {
    background: #E5E5E5; /* Uniformato al colore del tasto .goto */
}

body.pre_login .BOX_ANCHOR .ANCHOR::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

body.pre_login .BOX_ANCHOR .ANCHOR .goto {
    padding: var(--margin4) var(--margin0);
    width: auto !important;
    position: static;
    height: auto;
    background-color: #E5E5E5;
    color: #ffffff;
    border-radius: 0 var(--margin3) var(--margin3) 0;
    float: none;
    border: none !important;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;

    box-shadow: 0px 0px 20px 0px #00000014;

    /* 4. Ripristina la direzione del contenuto per non invertire il testo */
    direction: ltr; 
}

/* Goto attivo: la sezione attualmente in vista */
body.pre_login .BOX_ANCHOR .ANCHOR .goto.goto_active {
    background-color: var(--colore1, #004587);
    color: #ffffff;
    font-weight: 700;
}

/* Goto precedente */
body.pre_login .BOX_ANCHOR .ANCHOR .goto.goto_prev {
    background-color: #A8D8FF;
    color: #ffffff;
}

/* Goto successivo */
body.pre_login .BOX_ANCHOR .ANCHOR .goto.goto_next {
    background-color: #A8D8FF;
    color: #ffffff;
}

/** SUBTAB **/

div.F4M_SUBTAB_BOX {
    background-color: var(--nero2);
}
div.F4M_SUBTAB_BOX div.F4M_SUBTAB {
    background-color: var(--bianco0);
    border-radius: var(--radius1);
    padding: var(--margin2);
}

/* ============================================================
   INTEGRAZIONE PRIMISWEB COMPONENTS
   Adattati per Retems (body.pre_login)
   COLORI AGGIORNATI: Tutto il giallo è stato sostituito col BLU (--colore1)
   ============================================================ */

/** F4M GRID - Adattamento Griglie **/

body.pre_login div[f4m_type="GRID"] table td[valign=center] {
    vertical-align: middle;
}
body.pre_login div[f4m_type="GRID"] table td[type=IMG] {
    width: 100px;
    min-height: 100px;
    padding: 0;
}
body.pre_login div[f4m_type="GRID"] table td[type=IMG] > img {
    display: block;
    width: 75px;
    height: 75px;
    object-fit: cover;
    object-position: center;
}

/* Header Arrotondato */
body.pre_login div[f4m_type="GRID"][grp_head="true"] div.HEAD table.GRP_HEAD {
    border-radius: var(--radius0) var(--radius0) 0 0;
}

body.pre_login div[f4m_type="GRID"][grp_head="true"] div.HEAD table.GRP_HEAD thead th {
    background-color: var(--nero2) !important;
    color: var(--bianco1);
}

body.pre_login div[f4m_type="GRID"] table th, 
body.pre_login div[f4m_type="GRID"] table td {
    padding: var(--margin0);
}

body.pre_login div[f4m_type="GRID"][grp_head="true"] div.HEAD, 
body.pre_login div[f4m_type="GRID"] div.HEAD, 
body.pre_login div[f4m_type="GRID"] div.FOOT {
    height: auto;
}

/* Stile Contenitore Griglia */
body.pre_login div[f4m_type="GRID"] {
    border: 1px solid #ccc; 
    border-radius: var(--radius0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
    background-color: var(--bianco0); 
}

/* Intestazione Griglia - CORRETTO COLORE E CONTRASTO */
body.pre_login div[f4m_type="GRID"] div.HEAD {
    background: var(--colore1); /* Ora Blu */
    color: var(--bianco0);      /* Testo Bianco per contrasto */
    text-align: left;
    font-weight: bold; 
}

body.pre_login div[f4m_type="GRID"] div.FOOT {
    border-top: 2px solid var(--colore1);
    color: #555;
}

body.pre_login div[f4m_type="GRID"] th,
body.pre_login div[f4m_type="GRID"] td {
    padding: 8px 15px; 
    text-align: left; 
}

/* riapplico sopra un altro stile per pigrizia */

body.pre_login div[f4m_prototype=search] div.F4M_SEARCH div.DATAS div.BOX_GRID {
    height: auto !important;
    background-color: var(--bianco0);
    max-height: calc(100dvh - var(--numero6));
    margin-bottom: 0;
    border-radius: var(--radius2);
    box-shadow: var(--box-shadow1);
}
body.pre_login div[f4m_prototype=search] div[f4m_type="GRID"] {
    height: auto !important;
    max-height: calc(100dvh - var(--numero6) - (var(--margin2) * 4));
    background-color: var(--bianco1);
    border: var(--margin2) solid var(--bianco1);
    box-shadow: none;
    box-sizing: content-box;
    width: calc(100% - var(--margin2) * 2);
}
body.pre_login div[f4m_prototype=search] div[f4m_type="GRID"] div.HEAD {
    border-bottom: var(--margin2) solid var(--bianco1);
    border-radius: 5px;
}
body.pre_login div[f4m_prototype=search] div[f4m_type="GRID"] thead th {
    background: var(--bianco0);
    font-weight: bold;
}
body.pre_login div[f4m_prototype=search] div[f4m_type="GRID"] table th, body.pre_login div[f4m_prototype=search] div[f4m_type="GRID"] table td {
    border: 1px solid var(--bianco1);
    background-color: var(--bianco0);
    padding: var(--margin0);
}
body.pre_login div[f4m_prototype=search] div[f4m_type="GRID"] div.FOOT {
    border-top: var(--margin2) solid var(--bianco1);
    background-color: var(--bianco0);
}

/** F4M CHECKBOX / RADIO CUSTOM **/

body.pre_login .group_checkbox, body.pre_login .group_radio {
    display: flex;
    align-items: end;
}

body.pre_login .group_checkbox a.fcs_group_checkbox:focus > label {
    outline: 0;
    text-shadow: 1px 1px 5px rgba(57, 69, 137, 0.43), -1px -1px 5px rgba(57, 69, 137, 0.43); 
}

body.pre_login .group_radio a.fcs_group_radio:focus > label {
    outline: 0;
    text-shadow: 1px 1px 5px rgba(57, 69, 137, 0.43), -1px -1px 5px rgba(57, 69, 137, 0.43);     
}

body.pre_login .group_checkbox a.fcs_group_checkbox:focus > label {
    text-shadow: none;
}

body.pre_login .group_checkbox a.fcs_group_checkbox > label, 
body.pre_login .group_radio a.fcs_group_radio > label {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
}
body.pre_login .group_checkbox a.fcs_group_checkbox > label.unchecked:before {
    margin-bottom: 0;
}

/* Gestione icone Checkbox/Radio */
body.pre_login .group_checkbox a.fcs_group_checkbox > label.checked:before,
body.pre_login .group_checkbox a.fcs_group_checkbox > label.unchecked:before,
body.pre_login .group_radio a.fcs_group_radio > label.checked:before,
body.pre_login .group_radio a.fcs_group_radio > label.unchecked:before,
body.pre_login .group_radio a.fcs_group_radio > label:before {
    height: 29px;
    width: 29px;
    margin-right: var(--margin1);
}

body.pre_login .group_radio a.fcs_group_radio > label.checked:before {
    background: url('/resource/radio_on.svg') no-repeat;
    background-size: 29px;
}
body.pre_login .group_radio a.fcs_group_radio > label:before, 
body.pre_login .group_radio a.fcs_group_radio > label.unchecked:before {
    background: url('/resource/radio_off.svg') no-repeat;
    background-size: 29px;
}
body.pre_login .group_checkbox a.fcs_group_checkbox > label.checked:before {
    background: url('/resource/check_on.svg') no-repeat;
    background-size: 29px;
}
body.pre_login .group_checkbox a.fcs_group_checkbox > label:before, 
body.pre_login .group_checkbox a.fcs_group_checkbox > label.unchecked:before {
    background: url('/resource/radio_off.svg') no-repeat;
    background-size: 29px;
}
body.pre_login .group_radio a.fcs_group_radio > label {
    font-size: var(--font-size2); 
    line-height: calc(var(--font-size2) + var(--line-height));
}

/* Disabled states */
body.pre_login .group_checkbox a.fcs_group_checkbox > label.disabled.checked:before,
body.pre_login .group_checkbox a.fcs_group_checkbox > label.disabled.unchecked:before,
body.pre_login .group_radio a.fcs_group_radio > label.disabled.checked:before,
body.pre_login .group_radio a.fcs_group_radio > label.disabled.unchecked:before,
body.pre_login .group_radio a.fcs_group_radio > label.disabled:before {
    height: 29px;
    width: 29px;
    margin-right: var(--margin1);
}
body.pre_login .group_radio a.fcs_group_radio > label.disabled.checked:before {
    background: url('/resource/radio_on.svg') no-repeat;
    background-size: 29px;
}
body.pre_login .group_radio a.fcs_group_radio > label.disabled:before,
body.pre_login .group_radio a.fcs_group_radio > label.disabled.unchecked:before,
body.pre_login div[f4m_type="GRID"] div.__group_checkbox[state="0"] div.__checkbox {
    background: url('/resource/radio_off.svg') no-repeat;
    background-size: 29px;
}
body.pre_login .group_checkbox a.fcs_group_checkbox > label.disabled.checked:before,
body.pre_login div[f4m_type="GRID"] div.__group_checkbox[state="1"] div.__checkbox {
    background: url('/resource/check_on.svg') no-repeat;
    background-size: 29px;
}
body.pre_login .group_checkbox a.fcs_group_checkbox > label.disabled:before,
body.pre_login .group_checkbox a.fcs_group_checkbox > label.disabled.unchecked:before {
    background: url('/resource/radio_off.svg') no-repeat;
    background-size: 29px;
}
body.pre_login div[f4m_type="GRID"] div.__group_checkbox div.__checkbox {
    background-size: contain !important;
}

/** F4M SPECIAL INPUTS & WRAPPERS **/

/* Date Picker Wrapper */
body.pre_login div.f4m_wrap_date {
    width: fit-content;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--margin1);
    background-color: var(--bianco1);
    padding: var(--margin2) var(--margin2);
    border-radius: 50px;
}
body.pre_login div.f4m_wrap_date div.TD {
    display: block;
}
body.pre_login div.f4m_wrap_date div.elem input[type=text], 
body.pre_login div.f4m_wrap_date input[type=text], 
body.pre_login input[type=text].date {
    flex: 1 0 0;
    padding: 0;
    background-color: transparent;
    font-size: var(--font-size2) !important;
    border-radius: 0 !important;
    letter-spacing: initial;
    width: 100px !important;
    border: none;
}
body.pre_login div.f4m_wrap_date .f4m_date_picker {
    background-color: transparent;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    border: none;
    color: var(--nero1);
}
body.pre_login div.f4m_wrap_date .f4m_date_picker .f4m_date_calendar_icon {
    width: 20px;
    height: 20px;
    font-size: 0 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23333333'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
body.pre_login div.f4m_wrap_date .f4m_date_picker .f4m_date_calendar_icon::before {
    content: none !important;
}

/* File Upload Wrapper - CORRETTO COLORE E CONTRASTO */
body.pre_login div.f4m_wrap_file .clip {
    top: 0;
    float: none;
    font-size: 20px;
}
body.pre_login div.f4m_wrap_file div.file_name {
    font-size: 20px;
    line-height: initial;
    width: auto !important;
    padding-right: 8px;
}
body.pre_login div.f4m_wrap_file div.box_file_open {
    display: flex;
}
body.pre_login div.f4m_wrap_file .box_button_delete, 
body.pre_login div.f4m_wrap_image .box_button_delete, 
body.pre_login div.f4m_wrap_file .box_button_add, 
body.pre_login div.f4m_wrap_image .box_button_add {
    border-radius: 0;
    border: 1px solid var(--colore1); /* Bordo Blu */
    background-color: var(--colore1); /* Sfondo Blu */
    color: var(--bianco0);            /* Testo Bianco */
    padding: 5px 10px;
}
body.pre_login div.f4m_wrap_image div.box_image {
    height: 150px !important;
    width: auto !important;
}
body.pre_login div.f4m_wrap_file.border {
    border-radius: var(--radius0);
    overflow: hidden;
}

/* Search Combo Wrapper - CORRETTO COLORE E CONTRASTO */
body.pre_login div.f4m_wrap_searchcombo {
    display: flex;
    align-items: stretch;
    justify-content: center;
}
body.pre_login div.f4m_wrap_searchcombo .f4m_searchcombo_box_search {
    flex: 0 0 160px;
}
body.pre_login div.f4m_wrap_searchcombo .f4m_searchcombo_box_search input[type=text] {
    border-radius: 50px 0 0 50px !important;
    padding: var(--margin2) var(--margin0) var(--margin2) var(--margin3);
    height: 49px;
}
body.pre_login div.f4m_wrap_searchcombo .f4m_searchcombo_box_icon {
    flex: 0 0 100px;
    color: var(--bianco0); /* Icona Bianca */
    background-color: var(--colore1); /* Sfondo Blu */
    width: auto !important;
    height: auto !important;
    border-radius: 0 50px 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.pre_login div.f4m_wrap_searchcombo > .TD:last-child {
    flex: 1 0 calc(100% - 260px - 10px);
    margin-left: 10px;
}
body.pre_login div.f4m_wrap_searchcombo select.searchcombo {
    border-radius: 50px !important;
    height: 49px;
}
body.pre_login div.f4m_wrap_searchcombo .f4m_searchcombo_box_edit {
    background-color: var(--colore1); /* Sfondo Blu */
    color: var(--bianco0); /* Icona/Testo bianco se presente */
}
body.pre_login div.f4m_wrap_searchcombo[cascade_combo] select.searchcombo {
    border-radius: 50px !important;
    padding: var(--margin2) var(--margin3);
}

/* Numeri specifici */
body.pre_login input[type=text].number.num0_2, 
body.pre_login input[type=text].number.no_dot {
    text-align: right; 
}
body.pre_login input[type=text].number.num0_1 {
    background: none;
}

/** READONLY & NOTES **/

body.pre_login div[f4m_type="READONLY"][f4m_aria="NOTE"] {
    line-height: 32px !important;
}

body.pre_login div[f4m_type="READONLY"] {
    padding-top: 0;
    padding-left: 0;
    word-break: initial;
    padding: 0;
    font-size: var(--font-size2);
    line-height: 49px;
    vertical-align: bottom;
}

/** COLLAPSER & MISC - CORRETTO COLORE E CONTRASTO **/

body.pre_login span.lbl_fx {
    color: var(--colore1) !important; /* Testo Blu */
}

body.pre_login div.sub_title div.btn span.button {
    color: var(--colore1); /* Testo Blu */
}
body.pre_login div.sub_title.have_btn {
    background-image: var(--colore1);
    border-top: 1px solid rgba(192,192,192,0.8);
}

body.pre_login div[f4m_collapser][status="close"] {
    background-color: var(--colore1) !important; /* Sfondo Blu */
    color: var(--bianco0); /* Testo Bianco */
}
body.pre_login div[f4m_collapser] div[closer]{
    background-color: var(--colore1) !important; /* Sfondo Blu */
    color: var(--bianco0); /* Testo Bianco */
}
body.pre_login div[f4m_collapser] div[opener]{
    /* Ho rimosso il colore specifico #00a0e7 per usare il blu del tema */
    background-color: var(--colore1) !important; 
    color: var(--bianco0) !important;
}

/* Formattazione Righe Complesse */
body.pre_login div.bt-row.perc-99 input[f4m_type="STRING"], 
body.pre_login div.bt-row.perc-99 select[f4m_type="COMBO"], 
body.pre_login div.bt-row.perc-99 textarea[f4m_type="TEXTAREA"], 
body.pre_login div.bt-row.perc-99 div.f4m_wrap_searchcombo, 
body.pre_login div.bt-row.perc-99 div[f4m_type="READONLY"] {
    width: calc(100% - (var(--margin0) * 2));
    margin-left: 0;
    margin-right: var(--margin0);
}
body.pre_login div.bt-row.perc-99 > *:last-child input[f4m_type="STRING"], 
body.pre_login div.bt-row.perc-99 > *:last-child select[f4m_type="COMBO"], 
body.pre_login div.bt-row.perc-99 > *:last-child textarea[f4m_type="TEXTAREA"], 
body.pre_login div.bt-row.perc-99 > *:last-child div.f4m_wrap_searchcombo, 
body.pre_login div.bt-row.perc-99 > *:last-child div[f4m_type="READONLY"] {
    width: calc(100% - var(--margin0));
    margin-right: 0;
}
body.pre_login div.bt-row.perc-99 > *:first-child input[f4m_type="STRING"], 
body.pre_login div.bt-row.perc-99 > *:first-child select[f4m_type="COMBO"], 
body.pre_login div.bt-row.perc-99 > *:first-child textarea[f4m_type="TEXTAREA"], 
body.pre_login div.bt-row.perc-99 > *:first-child div.f4m_wrap_searchcombo, 
body.pre_login div.bt-row.perc-99 > *:first-child div[f4m_type="READONLY"] {
    width: calc(100% - var(--margin0));
    margin-left: 0;
}

/*
body.pre_login div.elem.gap, 
*/
body.pre_login .btn-container.gap, 
body.pre_login .bt-row.gap {
    margin-top: var(--margin2);
}

body.pre_login label[f4m_error="true"] {
    color: var(--colore1);
    margin-top: var(--margin0);
}

body.pre_login img[src="pipe"], 
body.pre_login img[src="spacer"] {
    display: none !important;
}

body.pre_login div.label[label_for] {
    text-transform: uppercase;
}

/* Sub Menu / Labels - CORRETTO COLORE E CONTRASTO */
body.pre_login div.sub_menu.label {
    margin-top: var(--margin3);
    padding-top: var(--margin3);
    padding-bottom: var(--margin2);
    border-top: 1px solid var(--bianco1);
    background-color: transparent;
    color: var(--nero0);
    left: 0;
    width: 100%;
    text-shadow: none;
    font-weight: 600;
    font-size: var(--font-size3);
    line-height: calc(var(--font-size3) + var(--line-height)) !important;
    height: auto;
    font-style: initial;
    display: flex;
    align-items: center;
    justify-content: start;
    margin-left: 0;
    margin-right: 0;
    text-transform: initial;
}
body.pre_login div.sub_menu.label.no_gap {
    margin-top: 0;
    padding-top: 0;
    border-bottom: none;
}

body.pre_login div.sub_title.label {
    margin-left: 0;
    width: 100%;
    font-weight: 700;
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height)) !important;
    color: var(--nero1);
    white-space: normal;
    font-style: normal;
    border-bottom: 1px solid var(--colore1); /* Bordo Blu */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: var(--margin0);
}

body.pre_login div.sub_menu.label div.btn span.button i {
    font-size: 25px !important;
}

body.pre_login div.Table.border {
    border-radius: var(--radius0) var(--radius0) / var(--radius0) var(--radius0);
}

body.pre_login div.sub_menu div.btn {
    position: static;
    display: flex;
    margin-left: var(--margin1);
}

body.pre_login div.sub_menu div.btn span.button {
    gap: var(--margin1);
    background-color: var(--colore1); /* Sfondo Blu */
    color: var(--bianco0);            /* Testo Bianco */
    padding: var(--margin0) var(--margin1);
    border-radius: 50px;
    border-left: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height));
}
body.pre_login div.sub_menu div.btn span.button svg {
    color: var(--bianco0); /* Icona Bianca */
    height: 14px;
    width: 14px;
}

/** TAB GRID INTERNE **/

body.pre_login .TAB .elem.grid_box {
    background-color: var(--bianco1);
    padding: var(--margin3);
    border-radius: var(--radius1);
    height: auto;
}
body.pre_login .TAB div[f4m_type="GRID"] {
    background: transparent;
    box-shadow: none;
    border: none;
    border-radius: 0;
}
body.pre_login .TAB div[f4m_type="GRID"] div.HEAD {
    background: var(--bianco1);
    color: var(--nero1); /* Ripristino colore scuro per header chiari */
}
body.pre_login .TAB div[f4m_type="GRID"] thead th {
    background: var(--bianco1);
    color: var(--nero1); /* Ripristino colore scuro per header chiari */
}
body.pre_login .TAB div[f4m_type="GRID"][alt_row_color="true"] table tbody tr:nth-child(even) {
    background-color: transparent;
}
body.pre_login .TAB div[f4m_type="GRID"] table thead tr th {
    border-bottom: 1px solid var(--nero2);
}
body.pre_login .TAB div[f4m_type="GRID"] table th, 
body.pre_login .TAB div[f4m_type="GRID"] table td {
    border: none;
    border-bottom: 1px solid var(--nero5);
    color: var(--nero1);
    padding: var(--margin1);
}
body.pre_login .TAB div[f4m_type="GRID"] table td {
    font-size: var(--font-size0);
    line-height: calc(var(--font-size0) + var(--line-height));
}
body.pre_login .TAB div[f4m_type="GRID"] table tr:last-child td {
    border-bottom: none;
}
body.pre_login div[f4m_type="GRID"] div.FOOT {
    background: var(--bianco1);
}

/** ALERT - CORRETTO COLORE E CONTRASTO **/

body.pre_login div#f4m_alert div#f4m_alert_box {
    background-color: var(--bianco0);
    border-radius: var(--radius1);
    box-shadow: var(--box-shadow1);
}
body.pre_login div#f4m_alert div#f4m_alert_btn button {
    background: var(--colore1); /* Sfondo Blu */
    color: var(--bianco0);      /* Testo Bianco */
    border-radius: var(--radius0);
    border: none;
    text-shadow: none;
    font-size: var(--font-size1);
    line-height: calc(var(--font-size1) + var(--line-height));
    font-weight: 500;
    border-radius: calc(var(--font-size1) + var(--line-height) + (var(--margin0) * 2));
}

/* ============================================================
   F4M TEXTAREA - STYLE RETEMS
   ============================================================ */

body.pre_login textarea[f4m_type="TEXTAREA"] {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    color: var(--nero0);
    font-family: inherit;
    padding: var(--margin1);
    width: 100%;
    min-height: 49px;
    background-color: var(--bianco1);
    border: 1px solid var(--bianco1);
    border-radius: var(--radius1);
    box-shadow: none;
    outline: none;
    resize: vertical;
    transition: border-color var(--transition0), background-color var(--transition0);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cline x1='0.5' y1='19.7929' x2='19.7929' y2='0.5' stroke='%23808080' stroke-linecap='round'/%3e%3cline x1='8.5' y1='19.7929' x2='19.7929' y2='8.5' stroke='%23808080' stroke-linecap='round'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px bottom 8px;
    background-size: 12px;
}
body.pre_login textarea[f4m_type="TEXTAREA"]:focus {
    border-color: var(--colore1) !important;
    background-color: var(--bianco0);
}
body.pre_login textarea[f4m_type="TEXTAREA"]:disabled {
    background-color: var(--bianco1);
    color: var(--nero3);
    opacity: 0.6;
    cursor: not-allowed;
    background-image: none;
}

/* ============================================================
   F4M COMBO (SELECT) - STYLE RETEMS
   Ispirato a SEARCHCOMBO e INPUT TEXT
   COLORI AGGIORNATI: Focus Blu
   ============================================================ */

body.pre_login select[f4m_type="COMBO"],
body.pre_login div.elem select {
    font-size: var(--font-size2);
    line-height: calc(var(--font-size2) + var(--line-height));
    color: var(--nero0);
    font-family: inherit;
    padding: 4px var(--margin2) 4px var(--margin2);
    width: 100%;
    height: 49px;
    min-height: calc(var(--font-size2) + var(--line-height));
    background-color: var(--bianco1);
    border: 1px solid var(--bianco1);
    border-radius: 50px;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23595959'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' d='M15.75 17.25 12 21m0 0-3.75-3.75M12 21V3'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right var(--margin1) center;
    background-size: 16px;
    transition: border-color var(--transition0), background-color var(--transition0);
}

body.pre_login select[f4m_type="COMBO"]:focus,
body.pre_login div.elem select:focus {
    border-color: var(--colore1) !important; /* Focus Blu */
    background-color: var(--bianco0);
}

body.pre_login select[f4m_type="COMBO"]:disabled,
body.pre_login div.elem select:disabled {
    background-color: var(--bianco1);
    color: var(--nero3);
    opacity: 0.6;
    cursor: not-allowed;
    background-image: none;
}

body.pre_login select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

body.pre_login div.bt-row.perc-99 select[f4m_type="COMBO"] {
    width: calc(100% - var(--margin0));
}

/** COMMON **/

.cl-00 {
    color: var(--color00);
}
.cl-01 {
    color: var(--color01);
}
.cl-02 {
    color: var(--color02);
}

.gs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(0,auto));
}

.w-100 {
    width: 100%;
}
.ml-auto {
	margin-left: auto;
}
.mr-auto {
	margin-right: auto;
}
.pl-none {
    padding-left: 0;
}
.pr-none {
    padding-right: 0;
}
.pt-none {
    padding-top: 0;
}
.pb-none {
    padding-bottom: 0;
}
.ml-none {
    margin-left: 0;
}
.mr-none {
    margin-right: 0;
}
.mt-none {
    margin-top: 0;
}
.mb-none {
    margin-bottom: 0;
}
.pr-0 {
    padding-right: var(--margin0);
}
.pl-0 {
    padding-left: var(--margin0);
}
.pt-0 {
    padding-top: var(--margin0);
}
.pb-0 {
    padding-bottom: var(--margin0);
}
.ml-0 {
    margin-left: var(--margin0);
}
.mr-0 {
    margin-right: var(--margin0);
}
.mt-0 {
    margin-top: var(--margin0);
}
.mb-0 {
    margin-bottom: var(--margin0);
}
.pr-1 {
    padding-right: var(--margin1);
}
.pl-1 {
    padding-left: var(--margin1);
}
.pt-1 {
    padding-top: var(--margin1);
}
.pb-1 {
    padding-bottom: var(--margin1);
}
.ml-1 {
    margin-left: var(--margin1);
}
.mr-1 {
    margin-right: var(--margin1);
}
.mt-1 {
    margin-top: var(--margin1);
}
.mb-1 {
    margin-bottom: var(--margin1);
}
.pr-2 {
    padding-right: var(--margin2);
}
.pl-2 {
    padding-left: var(--margin2);
}
.pt-2 {
    padding-top: var(--margin2);
}
.pb-2 {
    padding-bottom: var(--margin2);
}
.ml-2 {
    margin-left: var(--margin2);
}
.mr-2 {
    margin-right: var(--margin2);
}
.mt-2 {
    margin-top: var(--margin2);
}
.mb-2 {
    margin-bottom: var(--margin2);
}
.pr-3 {
    padding-right: var(--margin3);
}
.pl-3 {
    padding-left: var(--margin3);
}
.pt-3 {
    padding-top: var(--margin3);
}
.pb-3 {
    padding-bottom: var(--margin3);
}
.ml-3 {
    margin-left: var(--margin3);
}
.mr-3 {
    margin-right: var(--margin3);
}
.mt-3 {
    margin-top: var(--margin3);
}
.mb-3 {
    margin-bottom: var(--margin3);
}
.pr-4 {
    padding-right: var(--margin4);
}
.pl-4 {
    padding-left: var(--margin4);
}
.pt-4 {
    padding-top: var(--margin4);
}
.pb-4 {
    padding-bottom: var(--margin4);
}
.ml-4 {
    margin-left: var(--margin4);
}
.mr-4 {
    margin-right: var(--margin4);
}
.mt-4 {
    margin-top: var(--margin4);
}
.mb-4 {
    margin-bottom: var(--margin4);
}

gap-0 {
    gap: var(--margin0);
}
.gap-1 {
    gap: var(--margin1);
}
.gap-2 {
    gap: var(--margin2);
}
.gap-3 {
    gap: var(--margin3);
}
.gap-4 {
    gap: var(--margin4);
}

/** END COMMON **/