.modal {
    display: block;
    background-color: rgba(0,0,0,0.5) !important;
    
}

.loading-section {
    text-align: center;
    height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
}

    .loading-section h2 {
        color: #ffa710;
    }
.loading-logo img {
    height: 100px;
    width: 261px;
    margin-bottom: 5px;
    margin-top: 5px;
}


.loader-dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    /*background-color: #0366d6;*/
    background-color: #ffa710;
    display: inline-block;
    -webkit-animation: grow 2.1s infinite ease-in-out both;
    animation: grow 2.1s infinite ease-in-out both;
}

    .loader-dot.dot1 {
        -webkit-animation-delay: -0.96s;
        animation-delay: -0.96s;
    }

    .loader-dot.dot2 {
        -webkit-animation-delay: -0.48s;
        animation-delay: -0.48s;
    }

@-webkit-keyframes grow {
    0%, 80%, 100% {
        -webkit-transform: scale(0)
    }

    40% {
        -webkit-transform: scale(1.0)
    }
}


/* --------------- BITAGORA --------------- */

.bitagora-button:hover {
    background-color: #FFC106; /* yellow */
}

.bitagora-button:focus {
    background-color: #FFC106; /* yellow */
}


/* Scrollbar */

/* Stile base della scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

/* Sfondo della scrollbar */
::-webkit-scrollbar-track {
    background: none;
}

/* Thumb della scrollbar */
::-webkit-scrollbar-thumb {
    background-color: gray;
    border-radius: 20px;
    border: 3px solid var(--neutral-fill-rest);
    min-height: 20px !important;
}

    /* Effetto al passaggio del mouse sul thumb */
    ::-webkit-scrollbar-thumb:hover {
        border: none;
    }

    /* Thumb durante l'interazione */
    ::-webkit-scrollbar-thumb:active {
        border: none;
    }


/* Lista app/clienti */

.netflix-scroll-container {
    padding: 10px;
}

.microsoft-card {
    margin: 10px;
    border-radius: 8px;
    transition: transform 0.3s ease; /* Transizione fluida per lo zoom */
    position: relative; /* Per evitare clipping */
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

    .microsoft-card:hover {
        background-color: var(--neutral-fill-hover);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        /* transform: scale(1.05); */ /* Zoom al passaggio del mouse */
    }

        .microsoft-card:hover .download-text {
            font-weight: bold; /* Grassetto */
        }

        .download-text {
            text-align: center;
            font-weight: normal; /* Peso normale */
        }

.microsoft-card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.microsoft-card-header-text {
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-68%);
}

/* Per AppList */
.microsoft-card-info-inlist {
    padding: 10px;
    flex-grow: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    overflow-y: auto;
    height: 80%; /* Per non far fuoriuscire il testo dalle card delle app */
}

/* Per AppDett */
.microsoft-card-info-indett {
    padding: 10px 10px 20px;
    flex-grow: 1;
    text-align: center;
    display: grid;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

.microsoft-card-footer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.microsoft-card-footer-text {
    color: #F6AB00;
    margin: 0;
    position: relative;
    top: 20%;
}


/* Pagine di dettaglio App/Clienti */

.dett-page {
    /*max-width: 650px !important;*/
    margin: 1rem auto auto auto;
}

.dett-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /*width: 350px;*/
}

.dett-content-text {
    margin: 0;
}

.page-button-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100px;
}

.button-new {
    width: 136px;
    margin-top: 0.5rem;
}


/* Griglie */

[role=gridcell] {
    white-space: normal;
    overflow-wrap: break-word;
    overflow-y: auto;
    align-content: center;
}