/* Palette colori */
:root {
    --bs-danger: #ff5a5aa6;
    --color-primary: #4df3fe9f;
    --color-main-60: #cacaca;
    --color-bg-light: #ffffff;
    --color-light-border: #e0e0e0;
    --color-gray-dark-border: #5e5d5d;
    --color-secondary: #3a8dde;
    --color-gray-light: #efefef;
    --color-gray-medium: #e6e6e6;
    --color-gray-dark-grey: #343434;
    --color-red-light: #ff8282;
    --color-hover-button: #c9c9c9;
    --color-shadow: #000000;
    --color-accent: #3aafa9;
    --color-text: #343434;
    --color-text-dark: #3d3d3d;
    --color-text-light: #ebebeb;
    --color-text-gray: #828282;
    --color-text-th: #f1f1f1;
    --color-text-td-row-num: #f1f1f1;
    --color-text-swal2: #272727;
    --color-text-thead-lightdark: #5f5f5f;
    --color-active-tab: #bbbbbb;
    --color-no-active-tab: #c7c7c7;
    --color-tabs-btn: #e4e4e4;
    --color-red: #fb0000;
    --color-red-datetime-error: #f2d5ce;
    --color-menu-web-sidebar: #cacaca;
    --color-menu-web-sidebar-bg: #F2F2F2;
    --color-inside-details: #dedede;
}

    /* Tema scuro gestito dal data attribute Bootstrap */
    :root[data-bs-theme="dark"] {
        --bs-danger: #ff5a5aa6;
        --color-primary: #4df3fe9f;
        --color-bg-light: #121212;
        --color-light-border: #2a2a2a;
        --color-gray-dark-border: #3a3a3a;
        --color-secondary: #5fa8d3;
        --color-gray-light: #1f1f1f;
        --color-gray-medium: #2a2a2a;
        --color-gray-dark-grey: #333333;
        --color-hover-button: #3d3d3d;
        --color-shadow: rgba(0, 0, 0, 0.6);
        --color-accent: #3aafa9;
        --color-text: #dcdcdc;
        --color-text-dark: #000000;
        --color-text-gray: #b0b0b0;
        --color-text-th: #e0e0e0;
        --color-text-td-row-num: #cfcfcf;
        --color-text-swal2: #ffffff;
        --color-active-tab: #2f2f2f;
        --color-no-active-tab: #1c1c1c;
        --color-tabs-btn: #2a2a2a;
        --color-red: #ff4c4c;
        --color-red-datetime-error: #f2d5ce;
        --color-menu-web-sidebar: #343434;
        --color-menu-web-sidebar-bg: #2a2a2a;
    }

        :root[data-bs-theme="dark"] img[src^="data:image/svg+xml"] {
            filter: invert(1);
        }

@media screen and (max-width: 1024px) {
    [data-ssweb-hideonmobile] {
        display: none !important;
        transition: transform 0.3s ease;
    }
}

@media screen and (min-width: 1025px) {
    [data-ssweb-hideondesktop] {
        display: none !important;
        transition: transform 0.3s ease;
    }
}

@media screen {
    [data-ssweb-hideonmobile="true"] {
        display: none !important;
        transition: transform 0.3s ease;
    }
}

[data-ssweb-required][data-ssweb-value=""] {
    border: 2px solid var(--color-red);
}

@media screen {
    [data-ssweb-hideondesktop="true"] {
        display: block !important;
        transition: transform 0.3s ease;
    }
}

.loading-spinner-easy {
    width: 50px;
    height: 50px;
    border: 5px solid transparent;
    border-top: 4px solid var(--color-main-60);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    position: relative;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.simply-error-message-ui {
    font-size: 14px;
}
    .simply-error-message-ui.error {
        color: #b00020; /* Rosso errore */
        background-color: #fdecea; /* Sfondo rosso chiaro */
        border: 1px solid #f5c2c7; /* Bordo */
        padding: 12px 16px;
        border-radius: 5px;
        margin: 10px 0;
    }

.simply-style-ske-height {
    height: calc(var(--vh, 1vh) * 100); /* Usa il valore corretto per l'altezza */
}

.htmlelement-style-base {
    width: 100%;
    min-width: 150px;
    min-height: 26px;
    font-size: 12px;
    /* aggiunta base */
    border: 1px solid var(--color-light-border);
    border-radius: 5px;
    outline: none;
    /*transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;*/
    /*border: 2px solid var(--bs-border-color);*/
    /*background-color: var(--bs-body-bg);*/
}
    /* start aggiunta base htmlelement-style-base */
    .htmlelement-style-base:hover {
    }

    .htmlelement-style-base:focus {
        /*border-color: red !important;*/
        /*box-shadow: 0 0 0 2px var(--color-gray-light);*/
        border: 1px solid var(--color-gray-dark-border);
    }

    .htmlelement-style-base::placeholder {
    }

    .htmlelement-style-base:disabled {
    }
/* start aggiunta base htmlelement-style-base */

/* ============================================================== */
/* ================== TAB ELEMENT BUTTON START ================== */
/* ============================================================== */

.htmlelement-tabcontainer-style-base {
    display: inline-block;
    background-color: var(--bs-body-bg);
    transition: border-color 0.2s ease;
    border: 1px solid var(--bs-border-color);
}

    .htmlelement-tabcontainer-style-base:hover {
        border-color: var(--color-light-border);
    }

    .htmlelement-tabcontainer-style-base.active {
        background-color: var(--bs-primary);
        border-color: var(--color-light-border);
        color: white;
    }

.htmlelement-tab-button-base {
    background-color: var(--bs-body-bg);
    color: var(--color-text);
    transition: border-color 0.2s ease;
    border: 1px solid var(--bs-border-color);
    border-bottom: none;
    border-radius: 5px 5px 0px 0px;
    font-size: 12px;
}

    .htmlelement-tab-button-base:active {
        border-color: var(--color-light-border);
        box-shadow: inset 0 2px 6px var(--color-shadow);
    }

    .htmlelement-tab-button-base.active {
        background-color: var(--color-primary);
        border-color: var(--color-light-border);
        color: var(--color-text-light);
    }

/* ============================================================== */
/* =================== TAB ELEMENT BUTTON END =================== */
/* ============================================================== */

.htmlelement-datetime-style-base-error {
    background-color: var(--color-red-datetime-error);
    color: var(--color-text);
}

.htmlelement-checkbox-style-base {
    background-color: transparent;
    /* border: 1px solid var(--bs-border-color); */
    padding: 0.0625rem 0.3125rem 0.0625rem 0.3125rem;
    width: fit-content;
    font-size: 12px;
    border-radius: 8px;
    height: 30px;
    user-select: none;
}

    .htmlelement-checkbox-style-base.noborder {
        border: none;
    }

.htmlelement-checkbox-style-base-hover {
    background-color: var(--bs-body-bg);
    padding: 0.0625rem 0.3125rem 0.0625rem 0.3125rem;
    width: fit-content;
    font-size: 12px;
    border-radius: 8px;
    height: 30px;
    user-select: none;
}

    .htmlelement-checkbox-style-base-hover:hover {
        border: 2px solid var(--color-light-border);
        /*border-color: var(--color-light-border);*/
    }

.htmlelement-button-style-transparent-statistic {
    background-color: transparent !important; /* background dei buttons sotto le categorie principali */
    color: var(--color-text) !important;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.simply-open-code-selection-btn {
    border:none !important;
    background-color: transparent;
}

.htmlelement-style-base-flex-statistic {
    width: 100%;
    min-width: 10px;
    display: flex;
}

.htmlelement-button-style-base {
    background-color: var(--bs-body-bg);
    color: var(--color-text);
    transition: border-color 0.2s ease;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    font-size: 12px;
}

.htmlelement-sidebar-button-icon {
    background-color: transparent;
    color: var(--color-text);
    transition: border-color 0.2s ease;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    font-size: 12px;
    cursor: grab !important;
    border: none;
    margin-left: 9px;
    padding: 5px;
}

    .htmlelement-sidebar-button-icon:active {
        border-color: var(--color-light-border);
        box-shadow: inset 0 2px 6px var(--color-shadow);
        cursor: grabbing !important;
    }

    .htmlelement-sidebar-button-icon.active {
        background-color: var(--color-menu-web-sidebar);
        border-color: var(--color-light-border);
        color: var(--color-text-light);
        border-radius: 8px;
    }

    .htmlelement-sidebar-button-icon:hover {
        opacity: 0.8;
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .htmlelement-sidebar-button-icon:focus {
        border-color: var(--color-light-border);
        /* box-shadow: 0 0 0 3px rgba(58, 141, 222, 0.25); */
    }

.htmlelement-button-style-base:hover {
    /*border-color: var(--color-light-border);*/
}

.htmlelement-button-style-base:active {
    border-color: var(--color-light-border);
    box-shadow: inset 0 2px 6px var(--color-shadow);
    /*transform: scale(0.96);*/
}

.htmlelement-button-style-base.active {
    background-color: var(--color-primary);
    border-color: var(--color-light-border);
    color: white;
    /*box-shadow: inset 0 2px 3px #575757;*/
    /*border: none;*/
    /*transform: scale(0.95);*/
    /*transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;*/
}

.htmlelement-button-style-base:focus {
    border-color: var(--color-light-border);
    /* box-shadow: 0 0 0 3px rgba(58, 141, 222, 0.25); */
}

.htmlelement-button-style-transparent-base {
    background-color: transparent !important; /* background dei buttons sotto le categorie principali */
    color: var(--color-text) !important;
    transition: border-color 0.2s ease;
    border: 0px; /*border: 1px solid var(--color-light-border);*/
    border-radius: 5px;
    font-size: 12px;
    height: 30px;
}

    .htmlelement-button-style-transparent-base:active {
        border-color: var(--color-light-border);
        box-shadow: inset 0 2px 6px var(--color-shadow);
        transform: scale(0.96);
    }

    /*.htmlelement-button-style-transparent-base:hover {
        background-color: var(--color-hover-button);
    }*/
    .htmlelement-button-style-transparent-base.hover-colored:hover {
        background-color: var(--color-menu-web-sidebar) !important;
        border-color: var(--color-light-border) !important;
    }

    .htmlelement-button-style-transparent-base.active {
        border-color: var(--color-light-border);
        color: var(--color-text-light);
    }

.htmlelement-default-details {
    color: var(--color-text);
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    padding: 0.3125rem;
}

    .htmlelement-default-details[open] {
        background-color: var(--bs-body-bg);
    }

.htmlelement-default-main-icon {
    border: none;
    /*background-color: var(--color-bg-light);*/
}

    .htmlelement-default-main-icon:hover {
        cursor: grab; /*!important*/
        opacity: 0.8;
        transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
    }

    .htmlelement-default-main-icon:active {
        background-color: var(--color-primary);
        cursor: grabbing;
        border-radius: 5px;
    }

/* * */
.htmlelement-default-summary {
    cursor: grab !important;
    outline: none;
    font-weight: 600;
    position: relative;
    padding-left: 1.5em;
    list-style: none; /* Importante: rimuove il marker di default */
}

    /* Nascondi il marker triangolo di default del summary */
    .htmlelement-default-summary::-webkit-details-marker {
        display: none;
    }

    .htmlelement-default-summary::marker {
        display: none;
    }

    .htmlelement-default-summary::before {
        content: "+"; /* Icona quando details è chiuso */
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-weight: bold;
        transition: transform 0.2s ease;
    }

/* Quando details è aperto, cambia in - */
details[open] > .htmlelement-default-summary::before {
    content: "-";
}

.htmlelement-default-summary:active {
    cursor: grabbing !important;
    opacity: 0.8;
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.htmlelement-default-summary:hover {
    /*background-color: red;*/
}

/***/

/*.htmlelement-default-details-content {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin-top: 0.3125rem;
    color: var(--color-text);
}*/

/*.htmlelement-default-details .htmlelement-default-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    list-style: none;
}*/
/* tesdt ultimo button */

.htmlelement-default-details-content {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    margin-top: 0.3125rem;
    color: var(--color-text);
    position: relative;
    padding-left: 1.5rem;
    margin-left: 0.75rem;
}

.cont-tmp-class {
    background-color: var(--color-menu-web-sidebar-bg);
    padding: 10px;
}

.summary-first-section {
    min-width: 200px;
    width: 100%;
    color: var(--color-text);
    color: var(--color-text) !important;
    border: 0px;
    font-size: 12px;
    height: 30px;
}

.summary-first-section-classContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 5px;
    color: var(--color-text);
}

.tmp2-class-second {
    color: var(--color-text);
    margin-top: 5px;
    padding-left: 30px;
}

.tmp2-classContent-second {
    display: flex;
    flex-direction: column;
    margin-top: 0.3125rem;
    color: var(--color-text);
    position: relative;
    background-color: transparent;
    border: none;
    /*padding-left: 1.5rem;*/
    padding-left: 20px;
    position: relative;
}

.summary2-second-level-classContent {
    text-transform: uppercase;
}

.summary2-second-level {
    background-color: transparent;
    border: 0px;
    font-size: 11px;
    font-style: italic;
    color: var(--color-text);
}

.tmp-contentSummary {
    background-color: transparent;
    border: 0px;
    font-size: 18px;
    font-weight: bold;
}

/* classe del contenitore dei button dell ultimo livello del menu */
/* Linea a sinistra dei bottoni */
.tmp2-classContent-second::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    bottom: 5px;
    width: 2px;
    background-color: #d7d7d7;
    z-index: 1;
    transition: top 0.3s, bottom 0.3s;
}

.btn-thirdlevel-class {
    position: relative;
    z-index: 2;
    background-color: transparent;
    border: 0px;
    font-size: 12px;
    padding-left: 24px;
    transition: all 0.5s ease;
    color: var(--color-text);
}

    .btn-thirdlevel-class:hover {
        background-color: var(--color-menu-web-sidebar);
        color: var(--color-text);
        border-radius: 10px;
    }

        /* linea bianca di hover nel button */
        .btn-thirdlevel-class:hover::before {
            content: '';
            position: absolute;
            left: -17px;
            top: 2px;
            bottom: 2px;
            width: 6px;
            background-color: white;
            border-radius: 10px;
            z-index: 3;
        }

.tmp-classSummary-first {
    color: var(--color-text);
}

.tmp2-secondlevel-classContent {
    color: var(--color-text);
    font-size: 10px;
}

.htmlelement-default-summary::-webkit-details-marker {
    display: none;
}

.htmlelement-default-summary .bi {
    transition: transform 0.2s ease;
}

.htmlelement-table-base {
    border-collapse: separate;
    border-spacing: 0;
    color: var(--color-text);
    /*border-top: 1px solid var(--color-light-border);*/
}

.htmlelement-thead-base {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.htmlelement-thead-base th {
    position: sticky;
    top: 0;
    background-color: var(--color-bg-light); /*var(--color-bg-light) !important*/
    z-index: 4;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text) !important; /*var(--color-text-th)*/
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    /*border-top: 1px solid var(--color-light-border);*/
}

    .htmlelement-thead-base th.frozen {
        position: sticky;
        left: 0;
        z-index: 5; /* serve per farla stare sopra le altre colonne */
    }

.htmlelement-tr-base {
    transition: background-color 0.25s ease;
    font-size: 14px;
}

    .htmlelement-tr-base td.frozen {
        position: sticky;
        left: 0;
        z-index: 3; /* serve per farla stare sopra le altre colonne */
    }

    /* Alternanza colori nelle tr */
    .htmlelement-tr-base:nth-child(even) td {
        /*background-color: var(--bs-secondary-bg);*/
    }

    /* al passaggio del mouse coloro il tr */
    .htmlelement-tr-base:hover td {
        background-color: var(--bs-primary-bg-subtle);
        cursor: pointer;
    }

    .htmlelement-tr-base:nth-child(even):hover td {
        background-color: var(--bs-primary-bg-subtle);
    }

.htmlelement-table-active td {
    background-color: var(--bs-primary-border-subtle);
}

.htmlelement-table-active:nth-child(even) td {
    background-color: var(--bs-primary-border-subtle);
}

tr.htmlelement-table-active td:focus,
tr.htmlelement-table-active td:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* .htmlelement-tr-base:active {
        background-color: var(--bs-primary-bg-subtle);
        border: 2px solid var(--bs-primary);
    }

    .htmlelement-tr-base:nth-child(even):active {
        background-color: var(--bs-primary-bg-subtle);
        border: 2px solid var(--bs-primary);
    }*/

.htmlelement-td-base {
    padding: 10px 12px;
    font-size: 12px;
    /*border-top: 1px solid #dee2e6;*/
    /*text-align: center;*/
    white-space: normal;
}

.htmlelement-style-base-flex {
    width: 100%;
    min-width: 150px;
    display: flex;
}

.htmlelement-disable-default {
    pointer-events: none;
    opacity: 0.75;
}

.htmlelement-readable-default {
    pointer-events: none;
}

.simply-stattitle-btn {
    background-color: transparent;
    color: var(--color-text);
}

.htmlcontent-default {
    flex: 1;
    /*margin-left: 0.3125rem;
    padding-right: 0.1rem;
    padding-bottom: 0.1rem;*/
    padding: 0px;
    margin: 0px;
    overflow: auto;
    background: var(--color-bg-light);
}

.htmlcontent-default-filters {
    flex: 1;
    padding: 0.3125rem;
    overflow: auto;
    display: none;
}

.htmlinternalcontainer-default {
    flex: 1;
    flex-direction: column;
    display: flex;
    min-height: 0;
    overflow: hidden;
    border-left: var(--color-light-border);
    border-radius: 5px;
}

/* ============= TOPBAR MAIN PAGE ICON START ============ */

.simply-nav-logo {
    border: none;
    background-color: transparent;
    margin-bottom: 5px;
}

.simply-nav-userinfo {
    border: none;
    background-color: transparent;
    font-size: 12px;
    margin-bottom: 5px;
}

.simply-nav-mail {
    border: none;
    background-color: transparent;
    margin-bottom: 5px;
}

.simply-nav-calendar {
    border: none;
    background-color: transparent;
    margin-bottom: 5px;
}

.simply-nav-settings {
    border: none;
    background-color: transparent;
    margin-bottom: 5px;
}

.simply-nav-logout {
    background-color: var(--bs-danger);
    color: var(--color-text-light);
    border: none;
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 5px;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

    .simply-nav-logout:hover {
        background-color: var(--color-red);
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .simply-nav-logout:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    }

/* ================ Sidebar settings container =============== */
.simply-sidebar-settings {
    margin: 0 !important;
    padding: 10px !important;
}
/* ======================================================== */
/* ======================= Container grid toolbar =================== */

.simply-cont-toolbar-grid {
    /*border-left: 5px solid var(--color-inside-details);*/
}

/* ======================================================== */

/* ===================== SIDEBAR INTERNAL BUTTON SETTINGS START ========================== */

.simply-sidebar-menu-settings {
    background-color: transparent;
    color: var(--color-text);
    border: none;
    padding: 2px 5px;
    border-end-start-radius: 5px;
    border-start-start-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /*margin: 1px;*/
    border-bottom: 1px solid var(--color-light-border);
    width: 100%;
}

    .simply-sidebar-menu-settings::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .simply-sidebar-menu-settings:hover::before {
        left: 100%;
    }

    .simply-sidebar-menu-settings:hover {
        background-color: var(--color-menu-web-sidebar) !important;
        transform: translateY(2px);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
        /*border-bottom: none;*/
    }

    .simply-sidebar-menu-settings.active {
        background-color: var(--color-inside-details) !important;
        color: var(--color-text);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        transform: translateY(0);
    }

    .simply-sidebar-menu-settings:active {
        transform: translateY(0);
        transition-duration: 0.1s;
    }

    /* Icona se presente */
    .simply-sidebar-menu-settings i {
        font-size: 16px;
        transition: transform 0.3s ease;
    }

    .simply-sidebar-menu-settings:hover i {
        transform: scale(1.1);
    }

/* ===================== SIDEBAR INTERNAL BUTTON SETTINGS END ========================== */

/* ======================================================================================*/
/* ========================= TOPBAR MAIN PAGE UP TO GRID START ========================= */
/* ======================================================================================*/

.simply-topbar-main-tabs {
    border-bottom: var(--color-inside-details)
}

.simply-insidetab-toolbar {
    background-color: var(--color-inside-details) !important;
}

.simply-tabinternal-main-btn {
    border-radius: 5px;
    position: relative;
}

    .simply-tabinternal-main-btn.active {
        background-color: var(--color-inside-details) !important;
        color: var(--color-text);
        border: 1px solid var(--color-inside-details);
        border-end-end-radius: 0;
        border-end-start-radius: 0;
    }

.simply-refresh-btn-stat {
    background-color: transparent;
    border: none
}

.simply-tabinternal-showsettings {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
    margin-left: 5px;
}

.simply-tabinternal-showsettings.active {
    background-color: var(--color-main-60);
    color: var(--color-text);
}

.simply-tabinternal-quicksearchMoreDeep {
    margin-bottom: 5px;
}

.simply-tabinternal-refreshbtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

.simply-remove-date-btn  {
    border: none;
    background-color: transparent;
}

.simply-open-btn {
    border: none;
    background-color: transparent;
}

.simply-remove-btn {
    background-color: transparent;
    border: none;
}

.simply-tabinternal-deletebtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

    .simply-tabinternal-deletebtn.active {
        background-color: var(--color-menu-web-sidebar);
        border-color: var(--color-light-border);
        color: var(--color-text);
    }

.simply-tabinternal-sysdeletedbtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

    .simply-tabinternal-sysdeletedbtn.active {
        background-color: var(--color-menu-web-sidebar);
        border-color: var(--color-light-border);
        color: var(--color-text);
    }

.simply-tabinternal-syssuspendedbtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

    .simply-tabinternal-syssuspendedbtn.active {
        background-color: var(--color-menu-web-sidebar);
        border-color: var(--color-light-border);
        color: var(--color-text);
    }

.simply-tabinternal-newbtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

.simply-tabinternal-copybtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

.simply-tabinternal-trashbtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

.simply-tabinternal-reportmodal {
}

.simply-modal-closebtn {
    background-color: var(--bs-danger);
    border-radius: 5px;
    margin-bottom: 5px;
    border: none;
}

.simply-modalclose {
    background-color: var(--bs-danger);
    border-radius: 5px;
    margin-bottom: 5px;
    border: none;
}

.simply-exitbtn-relogin {
    background-color: var(--bs-danger);
    border: none;    
}

.simply-modalbtn-close {
    background-color: var(--bs-danger);
    border-radius: 5px;
    margin-bottom: 5px;
    border: none;
}

.simply-tabinternal-reportmodal {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

.simply-tabinternal-inputrows {
    margin-bottom: 5px;
}

.simply-tabinternal-quicksearchselect {
    margin-bottom: 5px;
}

.simply-tabinternal-quicksearchtext {
    margin-bottom: 5px;
}

.simply-tabinternal-exportexcel {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

.simply-tabinternal-quicksearchbtn {
    background-color: transparent;
    border: none !important;
    margin-bottom: 5px;
}

.simply-tabinternal-openfilterbtn {
    background-color: transparent;
    border: none !important;
    font-size: 12px;
    margin-bottom: 5px;
    border-radius: 10px;
}

    .simply-tabinternal-openfilterbtn.active {
        background-color: var(--color-menu-web-sidebar);
        border-color: var(--color-light-border);
        color: var(--color-text);
    }

/* =====================================================================================*/
/* ======================== TOPBAR MAIN PAGE UP TO GRID START ==========================*/
/* =====================================================================================*/

/* =====================================================================================*/
/* ============ TOPBAR INSIDE TAB FOR ICONS RESEARCH AND OTHER FUNCTIONS ============== */
/* =====================================================================================*/

.htmltopbar-default {
    background-color: var(--color-menu-web-sidebar-bg);
    position: relative;
    padding-top: 0.3125rem;
    padding-right: 0.3125rem;
    padding-bottom: 0;
    /* margin: 0 */
    /* padding-left: 0.3125rem; */
    gap: 0.3125rem;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    white-space: nowrap;
}

.simply-navbar-general {
    background-color: var(--color-menu-web-sidebar);
    filter: brightness(1.2);
    margin: 0;
}

.htmltopbar-default:focus-within {
    overflow-y: visible;
}

.simply-codeselection-filter {
    background-color: var(--color-bg-light);
}

.htmltopbar-default-codeselection {
    position: relative;
    padding-top: 0.1rem;
    padding-right: 0.3125rem;
    padding-bottom: 0.1rem;
    padding-left: 0.3125rem;
    gap: 0.3125rem;
    display: flex;
    flex-direction: row;
    overflow-x: hidden;
    overflow-y: hidden;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    min-width: 150px;
    min-height: 26px;
    font-size: 12px;
    /*border: 1px solid var(--color-light-border);*/
    border-radius: 5px;
    outline: none;
    color: var(--color-text);
    background-color: var(--color-bg-light);
}

    .htmltopbar-default-codeselection:focus-within {
        overflow-y: visible;
    }

.htmltopbar-report {
    position: relative;
    padding-top: 0.3125rem;
    padding-right: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-left: 0.3125rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* permette di andare a capo */
    gap: 0.3125rem;
    overflow-x: hidden; /* niente barra orizzontale */
    overflow-y: visible;
    align-items: center;
    white-space: normal; /* permette il wrapping */
}

    .htmltopbar-report:focus-within {
        overflow-y: visible;
    }

.htmlbottombar-default {
    position: relative;
    padding: 0.3125rem;
    margin-left: 0.625rem;
    gap: 0.3125rem;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
    white-space: nowrap;
}

    .htmlbottombar-default:focus-within {
        overflow-y: visible;
    }

.htmlsidebar-default {
    background-color: var(--color-menu-web-sidebar-bg);
    padding: 0.3125rem;
    gap: 0.3125rem;
    display: flex;
    flex-direction: column;
    overflow: auto;
    align-items: center;
    white-space: nowrap;
}

.sidebar-icon-container {
    padding: 0.3125rem;
    gap: 0.3125rem;
    display: flex;
    flex-direction: column;
    overflow: auto;
    align-items: center;
    white-space: nowrap;
    background-color: var(--color-menu-web-sidebar-bg);
}

.sidebar-menus-container {
    padding: 0.3125rem;
    gap: 0.3125rem;
    display: flex;
    flex-direction: column;
    overflow: auto;
    align-items: center;
    white-space: nowrap;
    background-color: var(--color-menu-web-sidebar-bg);
    /*border-right: 1px solid #dbdbdb;*/
}

.simply-menus-container {
    padding: 0.3125rem;
    gap: 0.3125rem;
    display: flex;
    flex-direction: column;
    overflow: auto;
    align-items: center;
    white-space: nowrap;
    background-color: var(--color-menu-web-sidebar-bg);
}

.htmlmaincontainer-default {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.htmlmaincontainer-filters {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.htmldropdown-default {
    position: relative;
    display: inline-block;
}

.htmldropdown-default-content {
    position: fixed;
    left: 0;
    margin-top: 25px;
    margin-left: 10px;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    max-width: calc(100vw - 30px);
    max-height: 250px;
    z-index: 1000;
    border: 1px solid var(--bs-border-color);
    overflow: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.htmldropdown-default-content-status {
    position: fixed;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    max-width: calc(100vw - 30px);
    max-height: 250px;
    z-index: 1000;
    border: 1px solid var(--bs-border-color);
    overflow: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.htmldropdown-default-content-status-forinfo {
    position: fixed;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    width: 70vw;
    max-height: 300px;
    z-index: 5;
    border: 1px solid var(--bs-border-color);
    overflow: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

@media (min-width: 576px) {
    .htmldropdown-default-content-status-forinfo {
        width: 400px;
    }
}

.htmldropdown-default-content-htmlcodeselection {
    position: absolute;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    width: 250px;
    /*transform: translateX(-204px);*/
    z-index: 5;
    border: 1px solid var(--bs-border-color);
    overflow: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    padding: 0.3125rem;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

@media (min-width: 576px) {
    .htmldropdown-default-content-htmlcodeselection {
        width: 400px;
        /*transform: translateX(-354px);*/
        transition: transform 0.3s ease;
    }
}

.htmldropdown-default-content-htmlcodeselection-listitemwrapper {
    border: 2px solid var(--bs-border-color);
    overflow-y: auto;
    /*max-height: 7rem;*/
    border-radius: 5px;
}

.htmldropdown-default-content-htmlcodeselection-listitem {
    margin-top: 0.2rem;
    padding: 0.2rem;
    border-radius: 5px;
}

.modal-default {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 6;
    justify-content: center;
    align-items: center;
}

body:has(.modal-default.show) {
    overflow: hidden;
}

.htmlmaincontainer-default-modal {
    background-color: var(--bs-body-bg);
    width: 75vw;
    height: 75vh;
    display: flex;
    flex-direction: row;
    animation: fadeIn 0.3s ease-out;
    border-radius: 5px;
}

.htmlmaincontainer-default-modal-codesel {
    background-color: var(--bs-body-bg);
    width: 30vw;
    height: 75vh;
    display: flex;
    flex-direction: row;
    animation: fadeIn 0.3s ease-out;
    border-radius: 5px;
}

/* se la larghezza della finestra è minore di 500px, lunghezza a 70vh */
@media (max-width: 600px) {
    .htmlmaincontainer-default-modal-codesel {
        width: 75vw;
        transition: transform 0.3s ease;
    }
}

.htmlmaincontainer-default-modal-many-to-one {
    background-color: var(--bs-body-bg);
    width: 90vw;
    height: 90vh;
    display: flex;
    flex-direction: row;
    animation: fadeIn 0.3s ease-out;
    border-radius: 5px;
}

/* se l’altezza della finestra è minore di 500px, riduci altezza a 70vh */
@media (max-height: 500px) {
    .htmlmaincontainer-default-modal-many-to-one {
        height: 70vh;
    }
}

.htmlmaincontainer-default-modal-report {
    background-color: var(--bs-body-bg);
    width: 60vw;
    height: 60vh;
    display: flex;
    flex-direction: row;
    animation: fadeIn 0.3s ease-out;
    border-radius: 5px;
}

/* se la larghezza della finestra è minore di 500px, lunghezza a 70vh */
@media (max-width: 500px) {
    .htmlmaincontainer-default-modal-report {
        width: 90vw;
    }
}

/* se l’altezza della finestra è minore di 500px, lunghezza a 70vh */
@media (max-height: 500px) {
    .htmlmaincontainer-default-modal-report {
        height: 90vh;
    }
}

@media (max-height: 500px) {
    .htmlmaincontainer-default-modal-report {
        height: 70vh;
    }
}

/*.htmlfilterscontainer {
    display: flex;
    gap: 0.125rem;
    flex-wrap: wrap;
    overflow-y: auto;
    height: 128px;
    max-height: 100%;
    border: 1px solid var(--bs-border-color);
    margin-left: 5px;
    transition: max-height 0.3s ease-in-out;
    resize: vertical;
    align-items: flex-start;
    align-content: flex-start;*/ /* <--- aggiungi questo */
/*}*/

.htmlfilterscontainer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem;
    background-color: var(--color-inside-details);
    height: auto; /* cresce quanto i figli */
    max-height: 10.375rem; /* ma non oltre */
    overflow-y: auto; /* scroll solo oltre il limite */
    /* border: 1px solid var(--bs-border-color); */
    border: none;
    /* margin-left: 5px; */
    align-items: flex-start;
    align-content: flex-start;
}

.htmlmaincontainer-default-modal-one-to-many {
    border: 1px solid var(--bs-border-color);
    border-radius: 5px;
    width: 100%;
    height: 300px; /*Dimensione di default, tanto per non occupare tutto*/
}

.modal-default.show {
    display: flex;
}

.modal-default-visible {
    background-color: var(--bs-body-bg);
    text-align: right;
}

.modal-default-content {
    /*background: white;*/
    background: var(--bs-body-bg);
    padding: 1rem 1.5rem;
    /*border-radius: 8px;*/
    width: 75vw;
    height: 75vh;
    animation: fadeIn 0.3s ease-out;
}

/* -------------------------------------------- */
/* ------------ START TABS UTILITY ------------ */
/* -------------------------------------------- */

.active-tab {
    cursor: initial !important;
}

.no-active-tab {
    background-color: var(--color-gray-medium) !important;
}

.tab-buttons button.active-tab {
    background-color: var(--bs-body-bg) !important;
    color: var(--color-text);
    font-weight: 600;
    cursor: cell;
    /*border-bottom: 2px solid #0078d7;*/ /* evidenzia il tab attivo */
}

    .tab-buttons button.active-tab:hover {
        /* background-color: #f5f5f5 !important; */
        cursor: initial;
    }

.tab-buttons button.no-active-tab {
    background-color: var(--color-noactive-tab) !important;
    color: #333;
    font-weight: 500;
}

    .tab-buttons button.no-active-tab:hover {
        background-color: var(--color-no-active-tab) !important; /* scurisce un po' al passaggio */
        cursor: pointer;
    }

.tab-group {
    position: relative;
    border: 1px solid var(--color-light-border);
    overflow: hidden;
}

.tab-buttons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 4;
    display: flex;
    gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-tabs-btn);
}

    .tab-buttons button {
        border: none;
        padding-left: 2px;
        padding-right: 2px;
        flex: 0 0 auto;
        /*margin-top: 1px;*/
        /*border-left: 1px #f7f7f7 !important;*/
        height: 40px;
        color: var(--color-text);
        font-size: 12px;
        padding: 5px;
        font-weight: 500;
        border-radius: 6px 6px 0 0;
        transition: background 0.2s ease, color 0.2s ease;
    }
/*
        .tab-buttons button:hover {
            background: #ddd;
        }*/
/*
        .tab-buttons button.active-tab {
            background: #fff;
            color: #000;
            font-weight: 600;
            border-bottom: none !important;
            background-color: #ffffff !important;
        }
*/
.tab-contents {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}

/* -------------------------------------------- */
/* ------------- END TABS UTILITY ------------- */
/* -------------------------------------------- */

/* ----------------------------------------- */
/* ------------ START SHADOWS -------------- */
/* ----------------------------------------- */

.shadow-light {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

.shadow-medium-light {
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
}

.shadow-medium {
    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3);
}

.shadow-hard {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------- */
/* -------------- END SHADOWS -------------- */
/* ----------------------------------------- */

/* ----------------------------------------- */
/* ------------- START BORDERS ------------- */
/* ----------------------------------------- */

.border-light {
    border: 1px solid var(--color-light-border);
}

.border-light-medium {
    border: 1px solid #d4d4d4;
}

.border-light-hard {
    border: 1px solid #c9c9c9;
}

.border-medium {
    border: 2px solid #cbcbcb;
}

.border-medium-medium {
    border: 2px solid #e6e6e6;
}

.border-medium-hard {
    border: 2px solid #c9c9c9;
}

.border-top-light-medium {
    border-top: 1px solid #d4d4d4;
}

/* Ombra del testo */
.txt-shadow-light {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.txt-shadow-medium {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.txt-shadow-strong {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}

/* ----------------------------------------- */
/* -------------- END BORDERS -------------- */
/* ----------------------------------------- */

/* ------------------------------------------------------------------------------- */
/* ---------------------------- START INPUTS LABELS ------------------------------ */
/* ------------------------------------------------------------------------------- */
.lbl-inp-multiline {
    display: flex;
    gap: 20px; /* spazio tra i campi */
}

.lbl-inp {
    flex: 1; /* i due campi occupano la stessa larghezza */
    display: flex;
    flex-direction: column; /* label sopra, input sotto */
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-gray);
    border-radius: 8px;
    color: var(--color-text);
}

    .lbl-inp input {
        border: var(--color-light-border); /*1px solid #ccc*/
        border-radius: 8px;
        height: 25px;
        padding: 2px 4px;
        font-size: 12px;
        color: var(--color-text);
        min-width: 50px;
        transition: border-color 0.3s ease;
    }

    .lbl-inp p {
        padding: 0px;
        margin: 0px;
        font-size: 12px;
    }

    .lbl-inp label {
        padding: 0px;
        margin: 0px;
    }

    .lbl-inp span {
        padding: 0px;
        margin: 0px;
    }
/* ------------------------------------------------------------------------------- */
/* ----------------------------- END INPUTS LABELS ------------------------------- */
/* ------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
/* --------------------- START ACCORDION ITEM --------------------- */
/* ---------------------------------------------------------------- */
.cont-accord details {
    overflow: hidden;
}

.cont-accord summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .cont-accord summary::marker {
        display: none;
    }

    .cont-accord summary::after {
        content: "▾";
        transition: transform 0.3s;
    }

details[open] summary::after {
    transform: rotate(180deg);
}

.cont-accord-body {
    /*border-top: 1px solid #ddd;*/
}

/* ---------------------------------------------------------------- */
/* ------------------- END ACCORDION ITEM START ------------------- */
/* ---------------------------------------------------------------- */

/*-------------------------------------------------------------*/
/*--------------------- START ITEMS BASE ----------------------*/
/*-------------------------------------------------------------*/

.custom-input-Ax1 {
    /*border: 1px solid var(--color-light-border);*/
    border-radius: 8px;
    height: 35px;
    padding: 2px 4px;
    font-size: 12px;
    /*color: #555;*/
    min-width: 50px;
    transition: border-color 0.3s ease;
}

.custom-input-container-Ax1 {
    /*border: none;*/
}

    /* Label */
    .custom-input-container-Ax1 label {
        font-weight: 600;
        font-size: 12px;
        /*color: #828282;*/
        /*display: flex;*/
        text-decoration: none;
        text-align: right !important;
    }

    /* Input */
    .custom-input-container-Ax1 input {
        /*background-color: #f9f9f9;*/
        border: 1px solid var(--color-light-border);
        border-radius: 8px;
        height: 30px;
        padding: 2px 4px;
        font-size: 12px;
        /*color: #555;*/
        /*max-width: 150px;*/
        min-width: 50px;
        transition: border-color 0.3s ease;
    }

        .custom-input-container-Ax1 input:focus {
            /*border: 1px solid var(--color-light-border);*/
            outline: none;
        }

    /* Textarea */
    .custom-input-container-Ax1 textarea {
        /*background-color: #f9f9f9;*/
        border: 1px solid var(--color-gray-medium);
        border-radius: 8px;
        /*height: 35px;*/
        padding: 2px 4px;
        font-size: 12px;
        /*color: #555;*/
        /*max-width: 150px;*/
        min-width: 50px;
        transition: border-color 0.3s ease;
    }

        .custom-input-container-Ax1 textarea:focus {
            border-color: var(--color-light-border);
            outline: none;
        }
/*-------------------------------------------------------------*/
/*----------------------- END ITEMS BASE ----------------------*/
/*-------------------------------------------------------------*/

/*---------------------------------------------------------------------*/
/*----------------------- LOGIN CUSTOM START 001 ----------------------*/
/*---------------------------------------------------------------------*/

.simply-login-base-container {
    overflow: hidden;
    transform: translateY(300px);
    /* Transizione per hover o altri effetti */
    transition: box-shadow 0.3s ease;
    /* Animazione di entrata */
    animation: showLoginCard 0.8s ease forwards;
    overflow: hidden !important;
}

.simply-header-login {
    font-weight: bold;
    padding: 10px;
}

.simply-login-card {
    width: 100%;
    margin: 50px auto;
    /*opacity: 0;*/
}

.simply-login-card-sx {
    max-width: 100%;
    min-width: 400px;
}

.simply-login-card-dx {
    max-width: 100%;
    min-width: 400px;
}

.simply-label-login {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #2d3748;
    font-size: 10px;
    letter-spacing: 0.025em;
}

/* password nel login start */

#Label___Password {
    position: relative;
}

/* Posiziona il button assolutamente dentro il container */
.btnShowPassLogin {
    position: absolute;
    right: 0;
    bottom: 0;
    border: none;
    background-color: transparent;
    margin-bottom: 0;
}

/* Riduci la larghezza dell'input per fare spazio al button */
.simply-pass-inp {
    width: calc(100% - 50px); /* Lascia 50px per il button */
    padding-right: 50px; /* Spazio per non sovrascrivere il testo */
}

    .simply-pass-inp::-ms-reveal,
    .simply-pass-inp::-webkit-credentials-auto-fill-button,
    .simply-pass-inp::-webkit-clear-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

/* password nel login end */

.simply-label-relogin {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
    color: #2d3748;
    font-size: 10px;
    letter-spacing: 0.025em;
}

.simply-input-relogin {
    width: 100%;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 12px !important;
    color: #2d3748;
    background-color: transparent;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

.simply-input-login {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 14px;
    color: #2d3748;
    background-color: transparent;
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

/* GRADIENTE AZZURRO BASE  */
.gradient-login-dx {
    background-color: #38b2fe;
    background-image: url('/assets/img/imageLogin3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.6s ease;
    position: relative;
    overflow: hidden;
}

    .gradient-login-dx:hover {
        background: linear-gradient(90deg, hsla(195, 99%, 65%, 0.5) 0%, hsla(200, 100%, 65%, 0.5) 100%);
        box-shadow: 0 4px 12px rgba(56, 178, 254, 0.3);
    }

    .gradient-login-dx:active {
        background: linear-gradient(90deg, hsla(195, 99%, 58%, 1) 0%, hsla(200, 100%, 58%, 1) 100%);
        transform: scale(1.01);
    }

    /* PRIMO SET - 50+ PARTICELLE */
    .gradient-login-dx:hover::before {
        content: '';
        position: absolute;
        top: -20%; /* Partono più in alto */
        left: 0;
        width: 100%;
        height: 140%; /* Più alte per coprire tutta la caduta */
        background-image:
        /* Colonna 1 (0-10%) */
        radial-gradient(circle at 2% 5%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 5% 12%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 3% 25%, rgba(255, 255, 255, 0.7) 3px, transparent 3px), radial-gradient(circle at 7% 32%, rgba(255, 255, 255, 0.5) 1px, transparent 1px), radial-gradient(circle at 4% 38%, rgba(255, 255, 255, 0.8) 2px, transparent 2px), radial-gradient(circle at 9% 45%, rgba(255, 255, 255, 0.6) 1px, transparent 1px), radial-gradient(circle at 2% 52%, rgba(255, 255, 255, 0.9) 2px, transparent 2px), radial-gradient(circle at 6% 58%, rgba(255, 255, 255, 0.7) 1px, transparent 1px), radial-gradient(circle at 3% 65%, rgba(255, 255, 255, 0.5) 3px, transparent 3px),
        /* Colonna 2 (10-20%) */
        radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 13% 30%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 17% 37%, rgba(255, 255, 255, 0.5) 3px, transparent 3px), radial-gradient(circle at 14% 44%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 19% 51%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 11% 59%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 16% 66%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
        /* Colonna 3 (20-30%) */
        radial-gradient(circle at 22% 3%, rgba(255, 255, 255, 0.8) 2px, transparent 2px), radial-gradient(circle at 25% 10%, rgba(255, 255, 255, 0.6) 1px, transparent 1px), radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.9) 3px, transparent 3px), radial-gradient(circle at 23% 26%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 27% 34%, rgba(255, 255, 255, 0.5) 1px, transparent 1px), radial-gradient(circle at 24% 42%, rgba(255, 255, 255, 0.8) 2px, transparent 2px), radial-gradient(circle at 29% 50%, rgba(255, 255, 255, 0.6) 1px, transparent 1px), radial-gradient(circle at 21% 58%, rgba(255, 255, 255, 0.9) 2px, transparent 2px), radial-gradient(circle at 26% 65%, rgba(255, 255, 255, 0.7) 3px, transparent 3px),
        /* Colonna 4 (30-40%) */
        radial-gradient(circle at 32% 7%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 35% 14%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 38% 21%, rgba(255, 255, 255, 0.5) 2px, transparent 2px), radial-gradient(circle at 33% 29%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 37% 37%, rgba(255, 255, 255, 0.7) 3px, transparent 3px), radial-gradient(circle at 34% 45%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 39% 53%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 31% 61%, rgba(255, 255, 255, 0.5) 2px, transparent 2px),
        /* Colonna 5 (40-50%) */
        radial-gradient(circle at 42% 4%, rgba(255, 255, 255, 0.9) 2px, transparent 2px), radial-gradient(circle at 45% 12%, rgba(255, 255, 255, 0.7) 1px, transparent 1px), radial-gradient(circle at 48% 20%, rgba(255, 255, 255, 0.8) 3px, transparent 3px), radial-gradient(circle at 43% 28%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 47% 36%, rgba(255, 255, 255, 0.5) 1px, transparent 1px), radial-gradient(circle at 44% 44%, rgba(255, 255, 255, 0.9) 2px, transparent 2px), radial-gradient(circle at 49% 52%, rgba(255, 255, 255, 0.7) 1px, transparent 1px), radial-gradient(circle at 41% 60%, rgba(255, 255, 255, 0.8) 2px, transparent 2px),
        /* Colonna 6 (50-60%) */
        radial-gradient(circle at 52% 9%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 55% 17%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 58% 25%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 53% 33%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 57% 41%, rgba(255, 255, 255, 0.5) 3px, transparent 3px), radial-gradient(circle at 54% 49%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 59% 57%, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
        /* Colonna 7 (60-70%) */
        radial-gradient(circle at 62% 6%, rgba(255, 255, 255, 0.8) 2px, transparent 2px), radial-gradient(circle at 65% 14%, rgba(255, 255, 255, 0.6) 1px, transparent 1px), radial-gradient(circle at 68% 22%, rgba(255, 255, 255, 0.9) 3px, transparent 3px), radial-gradient(circle at 63% 30%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 67% 38%, rgba(255, 255, 255, 0.5) 1px, transparent 1px), radial-gradient(circle at 64% 46%, rgba(255, 255, 255, 0.8) 2px, transparent 2px),
        /* Colonna 8 (70-80%) */
        radial-gradient(circle at 72% 11%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 75% 19%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 78% 27%, rgba(255, 255, 255, 0.5) 2px, transparent 2px), radial-gradient(circle at 73% 35%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 77% 43%, rgba(255, 255, 255, 0.7) 3px, transparent 3px), radial-gradient(circle at 74% 51%, rgba(255, 255, 255, 0.6) 2px, transparent 2px),
        /* Colonna 9 (80-90%) */
        radial-gradient(circle at 82% 8%, rgba(255, 255, 255, 0.9) 2px, transparent 2px), radial-gradient(circle at 85% 16%, rgba(255, 255, 255, 0.7) 1px, transparent 1px), radial-gradient(circle at 88% 24%, rgba(255, 255, 255, 0.8) 3px, transparent 3px), radial-gradient(circle at 83% 32%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 87% 40%, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        /* Colonna 10 (90-100%) */
        radial-gradient(circle at 92% 13%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 95% 21%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 98% 29%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 93% 37%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 97% 45%, rgba(255, 255, 255, 0.5) 3px, transparent 3px);
        background-repeat: no-repeat;
        animation: cadutaNeveVeloce 8s linear infinite;
        pointer-events: none;
    }

    /* SECONDO SET - ALTRE 50+ PARTICELLE CON COLORI CALDI */
    .gradient-login-dx:hover::after {
        content: '';
        position: absolute;
        top: -20%;
        left: 0;
        width: 100%;
        height: 140%;
        background-image:
        /* Distribuzione densa su tutta la larghezza */
        radial-gradient(circle at 1% 2%, rgba(255, 230, 180, 0.7) 2px, transparent 2px), radial-gradient(circle at 4% 9%, rgba(255, 240, 200, 0.8) 1px, transparent 1px), radial-gradient(circle at 7% 16%, rgba(255, 220, 170, 0.6) 3px, transparent 3px), radial-gradient(circle at 10% 23%, rgba(255, 250, 210, 0.9) 2px, transparent 2px), radial-gradient(circle at 13% 30%, rgba(255, 235, 190, 0.7) 1px, transparent 1px), radial-gradient(circle at 16% 37%, rgba(255, 245, 205, 0.8) 2px, transparent 2px), radial-gradient(circle at 19% 44%, rgba(255, 225, 175, 0.6) 1px, transparent 1px), radial-gradient(circle at 22% 51%, rgba(255, 255, 255, 0.9) 2px, transparent 2px), radial-gradient(circle at 25% 58%, rgba(255, 230, 185, 0.7) 3px, transparent 3px), radial-gradient(circle at 28% 65%, rgba(255, 240, 200, 0.8) 1px, transparent 1px), radial-gradient(circle at 31% 5%, rgba(255, 220, 170, 0.6) 2px, transparent 2px), radial-gradient(circle at 34% 12%, rgba(255, 250, 215, 0.7) 1px, transparent 1px), radial-gradient(circle at 37% 19%, rgba(255, 235, 190, 0.9) 2px, transparent 2px), radial-gradient(circle at 40% 26%, rgba(255, 245, 205, 0.8) 1px, transparent 1px), radial-gradient(circle at 43% 33%, rgba(255, 225, 175, 0.7) 3px, transparent 3px), radial-gradient(circle at 46% 40%, rgba(255, 255, 255, 0.6) 2px, transparent 2px), radial-gradient(circle at 49% 47%, rgba(255, 230, 180, 0.8) 1px, transparent 1px), radial-gradient(circle at 52% 54%, rgba(255, 240, 200, 0.9) 2px, transparent 2px), radial-gradient(circle at 55% 61%, rgba(255, 220, 170, 0.7) 1px, transparent 1px), radial-gradient(circle at 58% 68%, rgba(255, 250, 210, 0.6) 3px, transparent 3px), radial-gradient(circle at 61% 8%, rgba(255, 235, 190, 0.8) 2px, transparent 2px), radial-gradient(circle at 64% 15%, rgba(255, 245, 205, 0.7) 1px, transparent 1px), radial-gradient(circle at 67% 22%, rgba(255, 225, 175, 0.9) 2px, transparent 2px), radial-gradient(circle at 70% 29%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 73% 36%, rgba(255, 230, 185, 0.6) 2px, transparent 2px), radial-gradient(circle at 76% 43%, rgba(255, 240, 200, 0.7) 3px, transparent 3px), radial-gradient(circle at 79% 50%, rgba(255, 220, 170, 0.8) 1px, transparent 1px), radial-gradient(circle at 82% 57%, rgba(255, 250, 215, 0.9) 2px, transparent 2px), radial-gradient(circle at 85% 64%, rgba(255, 235, 190, 0.7) 1px, transparent 1px), radial-gradient(circle at 88% 3%, rgba(255, 245, 205, 0.6) 2px, transparent 2px), radial-gradient(circle at 91% 10%, rgba(255, 225, 175, 0.8) 1px, transparent 1px), radial-gradient(circle at 94% 17%, rgba(255, 255, 255, 0.7) 2px, transparent 2px), radial-gradient(circle at 97% 24%, rgba(255, 230, 180, 0.9) 3px, transparent 3px), radial-gradient(circle at 100% 31%, rgba(255, 240, 200, 0.8) 1px, transparent 1px), radial-gradient(circle at 5% 70%, rgba(255, 220, 170, 0.7) 2px, transparent 2px), radial-gradient(circle at 11% 75%, rgba(255, 250, 210, 0.6) 1px, transparent 1px), radial-gradient(circle at 17% 80%, rgba(255, 235, 190, 0.8) 2px, transparent 2px), radial-gradient(circle at 23% 85%, rgba(255, 245, 205, 0.9) 3px, transparent 3px), radial-gradient(circle at 29% 90%, rgba(255, 225, 175, 0.7) 1px, transparent 1px), radial-gradient(circle at 35% 95%, rgba(255, 255, 255, 0.8) 2px, transparent 2px), radial-gradient(circle at 41% 72%, rgba(255, 230, 185, 0.6) 1px, transparent 1px), radial-gradient(circle at 47% 78%, rgba(255, 240, 200, 0.7) 2px, transparent 2px), radial-gradient(circle at 53% 83%, rgba(255, 220, 170, 0.9) 3px, transparent 3px), radial-gradient(circle at 59% 88%, rgba(255, 250, 215, 0.8) 1px, transparent 1px), radial-gradient(circle at 65% 93%, rgba(255, 235, 190, 0.7) 2px, transparent 2px), radial-gradient(circle at 71% 98%, rgba(255, 245, 205, 0.6) 1px, transparent 1px), radial-gradient(circle at 77% 71%, rgba(255, 225, 175, 0.8) 2px, transparent 2px), radial-gradient(circle at 83% 76%, rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(circle at 89% 81%, rgba(255, 230, 180, 0.7) 2px, transparent 2px), radial-gradient(circle at 95% 86%, rgba(255, 240, 200, 0.6) 3px, transparent 3px);
        background-repeat: no-repeat;
        animation: cadutaNeveLenta 16s linear infinite;
        pointer-events: none;
    }

.snoww {
}

    .snoww::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 200px;
        background: linear-gradient(to top, #7bada8, transparent);
        z-index: 10000;
    }

.snow_wrap {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center bottom;
    overflow: hidden;
    position: relative;
}

.snow,
.snow:before,
.snow:after {
    position: absolute;
    top: -650px;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: radial-gradient(4px 4px at 100px 50px, #fff 100%, transparent), radial-gradient(6px 6px at 200px 150px, #fff, transparent), radial-gradient(3px 3px at 300px 250px, #fff 100%, transparent), radial-gradient(4px 4px at 400px 350px, #fff 50%, transparent), radial-gradient(6px 6px at 500px 100px, #fff 50%, transparent), radial-gradient(3px 3px at 50px 200px, #fff 50%, transparent), radial-gradient(4px 4px at 150px 300px, #fff 50%, transparent), radial-gradient(6px 6px at 250px 400px, #fff 50%, transparent), radial-gradient(3px 3px at 350px 500px, #fff 50%, transparent), radial-gradient(4px 4px at 150px 600px, #fff 50%, transparent), radial-gradient(6px 6px at 350px 700px, #fff 100%, transparent), radial-gradient(3px 3px at 450px 800px, #fff 100%, transparent);
    background-size: 650px 650px;
    animation: snow 3s linear infinite paused;
    content: "";
    opacity: 0;
    transition: opacity 0.5s ease;
}

    .snow:after {
        margin-left: -250px;
        opacity: 0;
        filter: blur(2px);
        animation-duration: 6s;
        animation-direction: reverse;
        animation-play-state: paused;
    }

    .snow:before {
        margin-left: -350px;
        opacity: 0;
        filter: blur(1px);
        animation-duration: 9s;
        animation-direction: reverse;
        animation-play-state: paused;
    }

.gradient-login-dx:hover .snow,
.gradient-login-dx:hover .snow:before,
.gradient-login-dx:hover .snow:after {
    animation-play-state: running;
    animation-delay: 2s;
    opacity: 1;
    transition-delay: 2s;
}

    .gradient-login-dx:hover .snow:after {
        opacity: 0.5;
    }

    .gradient-login-dx:hover .snow:before {
        opacity: 0.7;
    }

@keyframes snow {
    to {
        transform: translateY(650px);
    }
}


@keyframes cadutaNeveVeloce {
    0% {
        transform: translateY(-100%) scale(0.7);
        opacity: 0;
    }

    5% {
        opacity: 0.7;
    }

    95% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(150%) scale(0.5);
        opacity: 0;
    }
}

@keyframes cadutaNeveLenta {
    0% {
        transform: translateY(-100%) scale(0.5);
        opacity: 0;
    }

    5% {
        opacity: 0.8;
    }

    95% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(180%) scale(0.4);
        opacity: 0;
    }
}

.simply-login-button {
    /* Base style */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    box-sizing: border-box;
    /* Colori - in linea con il gradient che hai usato */
    background: linear-gradient(90deg, hsla(359, 99%, 61%, 1) 0%, hsla(340, 100%, 61%, 1) 100%);
    color: white;
    box-shadow: 0 4px 6px rgba(254, 56, 59, 0.25);
}

/* Base button - Azzurro moderno */
.simply-login-button {
    /* Stile base */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    /* Gradiente azzurro moderno */
    background: linear-gradient( 135deg, #38b2fe 0%, #2a9cf1 25%, #1d85e4 50%, #38b2fe 100% );
    background-size: 300% 300%;
    color: white;
    box-shadow: 0 4px 6px rgba(56, 178, 254, 0.25), 0 1px 3px rgba(56, 178, 254, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

    /* Effetto hover - Animazione gradiente + profondità */
    .simply-login-button:hover {
        transform: translateY(-2px) scale(1.02);
        background-position: 100% 50%;
        box-shadow: 0 8px 16px rgba(56, 178, 254, 0.4), 0 4px 8px rgba(56, 178, 254, 0.3), 0 2px 4px rgba(56, 178, 254, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        animation: gradient-shift 2s ease infinite;
    }

    /* Effetto focus - Glow elegante */
    .simply-login-button:focus {
        outline: none;
        box-shadow: 0 0 0 4px rgba(56, 178, 254, 0.15), 0 0 0 8px rgba(56, 178, 254, 0.1), 0 8px 16px rgba(56, 178, 254, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

    /* Effetto active - Click realistico */
    .simply-login-button:active {
        transform: translateY(1px) scale(0.98);
        background-position: 0% 50%;
        box-shadow: 0 2px 4px rgba(56, 178, 254, 0.3), 0 1px 2px rgba(56, 178, 254, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 8px rgba(0, 0, 0, 0.1);
        transition-duration: 0.1s;
    }

@keyframes showLoginCard {
    0% {
        opacity: 0;
        transform: translateY(300px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quando la login card deve diventare visibile */
.simply-login-base-container .show {
    opacity: 1; /* Diventa visibile */
    transform: translateY(0); /* Torna alla posizione originale */
}

/*-------------------------------------------------------------*/
/*----------------------- LOGIN CUSTOM END ----------------------*/
/*-------------------------------------------------------------*/


/*-------------------------------------------------------------*/
/*---------------------- START FORMGROUP ----------------------*/
/*-------------------------------------------------------------*/
.form-group-custom { /* Questo è il contenitore -->  campo label + input */
    /*flex: 1 1 300px;*/ /* min 300px, poi cresce   Legenda di 1 1 ---> può crescere e ridursi | 300px è la larghezza minima consigliata */
    display: flex; /* per disporre label e input uno accanto all’altro */
    align-items: center; /* per allinearli verticalmente */
    gap: 8px; /* spazio tra label e input */
    min-width: 0; /* evita bug nei layout con overflow */
}

.form-group-custom-filters { /* Questo è il contenitore -->  campo label + input */
    flex: 1 1 300px; /* min 300px, poi cresce   Legenda di 1 1 ---> può crescere e ridursi | 300px è la larghezza minima consigliata */
    display: flex; /* per disporre label e input uno accanto all’altro */
    align-items: center; /* per allinearli verticalmente */
    gap: 8px; /* spazio tra label e input */
    min-width: 0; /* evita bug nei layout con overflow */
}

.form-label-custom {
    /*flex: 0 0 150px;*/ /*  la label avrà larghezza fissa di 120px, né cresce né si riduce */
    flex: 0 0 120px;
    white-space: nowrap; /*  impedisce l’andata a capo */
    overflow: hidden; /**/
    text-overflow: ellipsis; /* se il testo è troppo lungo, viene troncato*/
    text-align: right !important;
    font-size: 12px;
}

.form-label-custom-filters {
    white-space: nowrap; /*  impedisce l’andata a capo */
    flex: 0 0 100px;
    overflow: hidden; /**/
    text-overflow: ellipsis; /* se il testo è troppo lungo, viene troncato*/
    text-align: right !important;
    font-size: 12px;
}

.form-label-custom-info {
    /*flex: 0 0 150px;*/ /*  la label avrà larghezza fissa di 120px, né cresce né si riduce */
    flex: 0 0 80px;
    white-space: nowrap; /*  impedisce l’andata a capo */
    overflow: hidden; /**/
    text-overflow: ellipsis; /* se il testo è troppo lungo, viene troncato*/
    text-align: right !important;
    font-size: 12px;
}

.form-input-custom {
    flex: auto; /* prende tutto lo spazio disponibile */
    min-width: 0; /* importante per farlo restringere correttamente se lo spazio è poco */
    /*max-height: 30px;*/
    font-size: 12px !important;
    /*border: 1px solid var(--color-light-border); */
    color: var(--color-text);
}

.form-input-custom-filters {
    /*flex: auto; */ /* prende tutto lo spazio disponibile */
    min-width: 0; /* importante per farlo restringere correttamente se lo spazio è poco */
    /*max-height: 30px;*/
    font-size: 12px !important;
}

@media (max-width: 550px) {
    .form-group-custom {
        flex-direction: column;
        align-items: stretch; /* fa sì che input e label prendano tutta la larghezza */
    }

    .form-label-custom {
        flex: none; /* override del 0 0 150px */
        width: 100%;
        white-space: normal; /* permette l'andata a capo */
        text-overflow: unset;
        overflow: visible;
    }

    .form-label-custom-info {
        flex: none; /* override del 0 0 150px */
        width: 100%;
        white-space: normal; /* permette l'andata a capo */
        text-overflow: unset;
        overflow: visible;
    }

    .form-input-custom {
        width: 100%;
    }
}
/*-------------------------------------------------------------*/
/*------------------------ END FORMGROUP ----------------------*/
/*-------------------------------------------------------------*/

/*-------------------------------------------------------------*/
/*------------------------ START MODAL ------------------------*/
/*-------------------------------------------------------------*/
.custom-modal-struct {
    max-width: 95vw;
    width: 95%;
    max-height: 90vh;
    height: 90%;
}

.custom-modal-struct-relogin {
    width: 45%;
    max-width: 500px;
    height: 50%;
    max-height: 50vh;
    z-index: 1100 !important;
}

/* Per dispositivi con larghezza inferiore a 768px (mobile) */
@media (max-width: 980px) {
    .custom-modal-struct-relogin {
        width: 95%;
        max-width: 500px;
        height: auto;
        max-height: 90vh;
    }
}
/*-------------------------------------------------------------*/
/*------------------------- END MODAL -------------------------*/
/*-------------------------------------------------------------*/

/*=========================== STATISTICS STUFF START ============================*/

.simply-export-btn-stat {
    background-color: transparent;
    border: none;
    font-size: 12px
}

.simply-refresh-btn-stat {
    background-color: transparent;
    border: none;
    font-size: 12px
}

.simply-topbar-statistics {
    color: var(--color-text);
    background-color: var(--color-inside-details);
}
/*=========================== STATISTICS STUFF END ============================*/
/*-------------------------------------------------------------*/
/*------------------- START BASIC ANIMATION -------------------*/
/*-------------------------------------------------------------*/
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 0.3s ease-in-out;
}
/*-------------------------------------------------------------*/
/*-------------------- END BASIC ANIMATION --------------------*/
/*-------------------------------------------------------------*/

/* ================================ GRADIENTS START ============================*/

.gradient-background-hex-sky {
    background: #F2F2F2;
    background: linear-gradient(90deg, #F2F2F2 0%, #A4CCFD 49%, #F2F2F2 100%);
}

.radial-gradient-background-sky {
    background: #F2F2F2;
    background: radial-gradient(circle, hsla(0, 0%, 95%, 1) 0%, hsla(213, 96%, 82%, 1) 34%, hsla(0, 0%, 95%, 1) 54%);
    background: -moz-radial-gradient(circle, hsla(0, 0%, 95%, 1) 0%, hsla(213, 96%, 82%, 1) 34%, hsla(0, 0%, 95%, 1) 54%);
    background: -webkit-radial-gradient(circle, hsla(0, 0%, 95%, 1) 0%, hsla(213, 96%, 82%, 1) 34%, hsla(0, 0%, 95%, 1) 54%);
    /* Il filter per IE non funziona per radial gradient - rimuovi */
}

/* ================================ GRADIENTS START ============================ */
/* ============================================================================= */

/* ================================== MODAL JQUERY START ============================== */
.dlg-busy::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    z-index: 100;
}

.dlg-busy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -18px 0 0 -18px;
    border: 4px solid #ffffff;
    border-top-color: var(--color-main-60);
    border-radius: 50%;
    animation: dlg-spin 0.8s linear infinite;
    z-index: 101;
}

@keyframes dlg-spin {
    to {
        transform: rotate(360deg);
    }
}

/* opzionale: stile errore */
.dlg-error {
    display: none;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid #e57373;
    background: #ffebee;
    color: #b71c1c;
    border-radius: 6px;
}

.btn-yes {
    background-color: #10b981;
    color: var(--color-text-light);
    border: none;
    border-radius: 5px;
    padding: 5px 24px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .btn-yes:hover {
        background-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .btn-yes:active {
        background-color: #047857;
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

.btn-no {
    background-color: #68b9fe;
    color: var(--color-text-light);
    border: none;
    border-radius: 5px;
    padding: 5px 24px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .btn-no:hover {
        background-color: #299dff;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .btn-no:active {
        background-color: #4666fc;
        transform: translateY(0);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* ================================== MODAL JQUERY end ============================== */
/* ================================== MODAL CONFIG DIV CLASS START ============================== */

.simply-config-div-class {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-overflow: ellipsis;
    margin-right: 5px;
    margin-left: 5px;
    padding: 5px;
    font-size: 12px;
    border: 1px solid var(--color-light-border);
    border-radius: 5px;
}
/* ================================== MODAL JQUERY END ============================== */

.simply-settings-selection-mobile {
    margin-bottom: 5px;
    margin-left: 5px;
}

/* ======================================= CONTAINER SELECT ENTITY ANAGRAFIC START =================================== */

.simply-cont-entities-all {
    /*border: 1px solid var(--color-light-border);*/
    padding: 20px;
}

.simply-cont-entities-all-check-lbl {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}

.btn-categ-anagr-wrapper {
    display: inline-flex;
    align-items: stretch;
}

.btn-categ-anagr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background-color: #f8f9fa;
    color: #3a3a3a;
    border: 1px solid #dde1e7;
    border-right: none; /* <-- rimuove il bordo destro per attaccarli */
    border-radius: 5px 0 0 5px; /* <-- arrotonda solo a sinistra */
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    user-select: none;
}

.btn-categ-anagr-openform {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background-color: #f8f9fa;
    color: #3a3a3a;
    border: 1px solid #dde1e7;    
    border-radius: 5px; /* <-- arrotonda solo a sinistra */
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    user-select: none;
}

.btn-categ-anagr-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 5px;
    background-color: #f8f9fa;
    color: #999;
    border: 1px solid #dde1e7;
    border-radius: 0 5px 5px 0; /* arrotonda solo dx */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.btn-categ-anagr-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 5px;
    background-color: #f8f9fa;
    color: #999;
    border: 1px solid #dde1e7;
    border-radius: 0 5px 5px 0; /* arrotonda solo dx */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.btn-categ-anagr-add:hover {
    background-color: #e5ffe6;
    color: #e05555;
    border-color: #f0b0b0;
}

.btn-categ-anagr:hover {
    background-color: #eef0f3;
    border-color: #c8cdd5;
}

.btn-categ-anagr-delete:hover {
    background-color: #ffe5e5;
    color: #e05555;
    border-color: #f0b0b0;
}


.btn-categ-anagr:active,
.btn-categ-anagr-delete:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* ======================================= CONTAINER SELECT ENTITY ANAGRAFIC END =================================== */

/* ================================================= MODAL CUSTOM START ==================================================*/

.first-cont-modal-gen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.second-cont-modal-gen {
    background: white;
    border-radius: 8px;
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
    position: absolute;
    cursor: move;
}

.cancel-btn-modal-gen {
    margin-right: 8px;
    padding: 8px 20px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.confirm-btn-modal-gen {
    padding: 8px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.p-message-modal-gen {
    margin: 0 0 24px 0;
    color: #666;
}

.h3-title-modal-gen {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.cont-btns-modal-gen {
    text-align: right;
}

.head-modal-gen {
    padding: 16px 24px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    cursor: move;
    user-select: none;
}

.cont-msg-btns-modal-gen {
    padding: 24px;
}
/* ================================================= MODAL CUSTOM END ==================================================*/
.ui-dialog-titlebar-close {
    background-color: var(--bs-danger) !important;
    border-radius: 5px !important;
}

/* ============================================== BUTTON CLIP START ================================================= */

.btn-clip-doc-grid {
    background-color: white;
    border-radius: 5px;
    align-content: center;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px solid var(--color-light-border)
}

    .btn-clip-doc-grid:hover {
        background-color: #f8f9fa;
        border-color: #adb5bd;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .btn-clip-doc-grid:active {
        transform: translateY(1px);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
        background-color: #e9ecef;
    }

/* ============================================== BUTTON CLIP END ================================================= */