.myGridClass {
    width: 100%;
    /*this will be the color of the odd row*/
    background-color:  ghostwhite; /* #405bb4 */
    margin: 5px 0 10px 0;
    border: solid 1px #123ca1;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
}

    .myGridClass .header-row {
        display: flex;
        justify-content: space-between; /* Allinea le celle orizzontalmente */
        border-bottom: 1px solid #ccc; /* Linea inferiore tra le righe dell'header */
    }

    .myGridClass .header-cell {
        padding: 10px;
        font-weight: bold;
        text-align: center;
    }
    .myGridClass tr {
        border-bottom: 2px solid white;
    }
    .myGridClass td {
        padding: 2px;
        font-size: 1vw; /*16px;*/
        text-align: center;
        line-height: 35px;
        border: solid 1px solid white;
    }

    .myGridClass th {
        padding: 4px 2px;
        color: #fff;
        background-color: #405bb4;
        text-align: center;
        line-height: 40px;
        font-weight: 600;
        font-size: 1vw;
        background: #244063; /*HEADER COLOR*/
        border-left: solid 1px #808ca0;
    }

    .myGridClass .myAltRowClass {
        background: #421212 repeat-x top;
    }

    .myGridClass .myPagerClass {
        background: #283f7e;
    }

        .myGridClass .myPagerClass table {
            margin: 5px 0;
        }

        .myGridClass .myPagerClass td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 12px;
        }

        .myGridClass .myPagerClass a {
            color: #666;
            text-decoration: none;
        }

            .myGridClass .myPagerClass a:hover {
                color: #000;
                text-decoration: none;
            }

    .myGridClass .AlternatingRowStyle {
        background-color: #e1e7e8;
    }
    .myGridClass .EditRowStyle {
        background-color: #7C6F57;
    }
    .myGridClass .FooterStyle {
        background-color: #336699;
        font-weight: bold;
        color: white;
    }
    .myGridClass .HeaderStyle {
        background-color: #333333;
        font-weight: bold;
        color: white;
    }
    .myGridClass .PagerStyle {
        background-color: #666666;
        color: White;
        text-align: Center;
    }
    .myGridClass .RowStyle {
        background-color: #D4DFE1;
    }
    .myGridClass .SelectedRowStyle {
        background-color: #C5BBAF;
        
        color: #333333;
    }
    .myGridClass .SortedAscendingCellStyle {
        background-color: #F8FAFA;
    }
    .myGridClass .SortedAscendingHeaderStyle {
        background-color: #246B61;
    }
    .myGridClass .SortedDescendingCellStyle {
        background-color: #D4DFE1;
    }
    .myGridClass .SortedDescendingHeaderStyle {
        background-color: #15524A;
    }



    @media screen and (min-width: 601px) {
        .myGridClass td {
        font-size: 18px;
    }
}


.myGridClassSM {
    width: 100%;
    /*this will be the color of the odd row*/
    background-color: #405bb4;
    margin: 5px 0 10px 0;
    border: solid 1px #123ca1;
    border-collapse: collapse;
    font-family: 'Montserrat', sans-serif;
}

    .myGridClassSM td {
        padding: 2px;
        font-size: 0.8vw; /*16px;*/
        text-align: center;
        line-height: 20px;
        border: solid 1px #808ca0;
        color: #000;
    }

    .myGridClassSM th {
        padding: 2px 1px;
        color: #fff;
        background-color: #405bb4;
        text-align: center;
        line-height: 30px;
        /*font-weight: 600;*/
        font-size: 1vw;
        background: #244063; /*HEADER COLOR*/
        border-left: solid 1px #808ca0;
    }

    .myGridClassSM .myAltRowClass {
        background: #421212 repeat-x top;
    }

    .myGridClassSM .myPagerClass {
        background: #283f7e;
    }

        .myGridClassSM .myPagerClass table {
            margin: 5px 0;
        }

        .myGridClassSM .myPagerClass td {
            border-width: 0;
            padding: 0 6px;
            border-left: solid 1px #666;
            font-weight: bold;
            color: #fff;
            line-height: 10px;
        }

        .myGridClassSM .myPagerClass a {
            color: #666;
            text-decoration: none;
        }

            .myGridClassSM .myPagerClass a:hover {
                color: #000;
                text-decoration: none;
            }

    .myGridClassSM .AlternatingRowStyle {
        background-color: "White";
    }

    .myGridClassSM .EditRowStyle {
        background-color: "#7C6F57";
    }

    .myGridClassSM .FooterStyle {
        background-color: "#336699";
        Font-Bold: "True";
        ForeColor: "White";
    }

    .myGridClassSM .HeaderStyle {
        background-color: #333333;
        Font-Bold: True;
        color: White;
    }

    .myGridClassSM .PagerStyle {
        background-color: #666666;
        color: White;
        text-align: Center;
    }

    .myGridClassSM .RowStyle {
        background-color: #E3EAEB;
    }

    .myGridClassSM .SelectedRowStyle {
        background-color: #C5BBAF;
        color: #333333;
    }

    .myGridClassSM .SortedAscendingCellStyle {
        background-color: #F8FAFA;
    }

    .myGridClassSM .SortedAscendingHeaderStyle {
        background-color: #246B61;
    }

    .myGridClassSM .SortedDescendingCellStyle {
        background-color: #D4DFE1;
    }

    .myGridClassSM .SortedDescendingHeaderStyle {
        background-color: #15524A;
    }


}


/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */

@media screen and (max-width: 600px) {
    .myGridClass td {
        font-size: 12px;
    }
}

.bg-light-gray {
    background-color: #eaeaea; /* Colore grigio molto chiaro */
}

.autocomplete-dropdown {
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
    max-height: 200px;
    min-width: 250px;
    overflow-y: auto;
    z-index: 1060;
}

.autocomplete-dropdownDiv {
    position: absolute;
    border: 1px solid #ccc;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1060;
    width: fit-content;
    min-width: 250px;
    min-height: 250PX;
}

.autocomplete-option {
    padding: 5px;
    cursor: pointer;
}


.box-shadow {
    -webkit-box-shadow: 0 1px 1px rgba(72,78,85,.6);
    box-shadow: 0 1px 1px rgba(72,78,85,.6);
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -ms-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

    .box-shadow:hover {
        -webkit-box-shadow: 0 20px 40px rgba(72,78,85,.6);
        box-shadow: 0 20px 40px rgba(72,78,85,.6);
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px);
    }

.card {
    border-radius: 25px;
}

    .card img {
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
    }

    .card svg {
        position: absolute;
        top: 19rem;
        -webkit-transition: all .2s ease-out;
        -moz-transition: all .2s ease-out;
        -ms-transition: all .2s ease-out;
        -o-transition: all .2s ease-out;
        transition: all .2s ease-out;
        filter: drop-shadow(2px -9px 4px rgba(0, 69, 134, 0.2));
    }

    .card:hover svg {
        filter: drop-shadow(2px -9px 4px rgba(0, 69, 134, 0.4));
    }



    .card:hover i {
        transform: rotate(-360deg);
    }

i:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.7) 0px 18px 36px -18px inset;
}


/* Definizioni nel file CSS (es. style.css) */

/* 1. CLASSE BASE: mio-set-icone */
.mio-set-icone {
    /* Dimensione del box dell'icona */
    /* **PUNTO CHIAVE: L'unità 'em' è dinamica e si adatta alla dimensione del font.** */
    width: 1.2em;
    height: 1.2em;
    display: inline-block;
    line-height: 1;
    /* Spostiamo leggermente l'icona in alto per allinearla al testo */
    vertical-align: -0.125em;
    /* Gestione dello sfondo/immagine */
    background-repeat: no-repeat;
    background-position: center;
    /* **PUNTO CHIAVE: Ridimensiona l'immagine per adattarsi al box definito sopra.** */
    background-size: contain;
    /* Nasconde il testo di fallback, mantenendo solo l'immagine */
    text-indent: -9999px;
    overflow: hidden;
}

/* 2. CLASSE SPECIFICA: icona-personalizzata-excel */
.icona-personalizzata-DLAS {
    background-image: url('/icons/logo_dlas_blu.png');
}

/* Regolazione della dimensione in base al pulsante Bootstrap (opzionale) */
/* Nei pulsanti .btn-lg (large), la dimensione del font è maggiore, quindi anche l'icona cresce */
.btn-lg .mio-set-icone {
    /* Aumenta la dimensione base delle icone nei pulsanti grandi */
    width: 3.5em;
    height: 1.5em;
    /* Puoi usare 'rem' o 'px' se preferisci dimensioni fisse, ma 'em' è più flessibile */
}