﻿.assertions-container {
    margin-top: 2.74vh;
    padding: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra i box orizzontalmente */
}

.badge-item {
    width: 100%; /* Imposta una larghezza piena per il contenitore */
    max-width: 400px; /* Imposta un massimo per evitare contenitori troppo grandi */
    height: 80px; /* Altezza più bassa per un layout rettangolare */
    background-color: #e9ecef57;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    text-align: left;
    margin: 10px auto; /* Centra il box individualmente */
    display: flex; /* Usa flexbox per layout */
    align-items: center; /* Allinea verticalmente il contenuto */
    padding: 0 10px; /* Aggiunto padding orizzontale per distanziare il contenuto dai bordi */
}

.text-decoration-none {
    text-decoration: none;
}

.assertion-image-container {
    display: inline-block;
    width: 70px;
    height: 70px;
    flex-shrink: 0; /* Previene il ridimensionamento dell'immagine */
}

.assertion-image-container img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.badge-info {
    display: inline-block;
    text-align: left;
    width: calc(100% - 80px); /* Lascia spazio sufficiente per l'immagine */
    padding-left: 15px; /* Spazio tra immagine e testo */
    flex-grow: 1;
    white-space: nowrap; /* Impedisce che il testo vada a capo */
    overflow: hidden; /* Nasconde il testo che esce dal contenitore */
    text-overflow: ellipsis;
}

    .badge-info h5, .badge-info p {
        margin: 0; /* Rimuovi i margini del testo per compattezza */
        white-space: nowrap; /* Impedisce il testo a capo anche negli header */
        overflow: hidden; /* Nasconde il testo in eccesso */
        text-overflow: ellipsis;
        color: inherit; /* Colore per il nome del badge */
        font-size: 14px !important;
        margin-top: 7px;
    }

    .badge-info p {
        color: #6c757d; /* Colore più chiaro per il testo dell'issuer */
        font-size: 0.9rem; /* Dimensione testo più piccola per issuer */
        text-align: left !important;
        font-size: 13px !important;
        margin-bottom: 7px;
        margin-top:2px;
    }

.equal-container {
    width: 15em; /* Imposta la larghezza massima per i contenitori */
    min-height: 12vh; /* Imposta un'altezza minima per garantire uniformità */
    height: auto; /* Permette al contenuto di crescere in altezza se necessario */
    display: flex;
    justify-content: flex-start; /* Mantiene il testo a sinistra */
    align-items: center; /* Centra verticalmente il contenuto */
}

/* Regole responsive per schermi molto piccoli */
@media (max-width: 576px) {
    .badge-item {
        height: 60px; /* Altezza ancora più compatta su schermi molto piccoli */
        max-width: 280px; /* Larghezza massima più stretta per adattarsi a schermi piccoli */
    }

    .assertion-image-container {
        width: 50px; /* Immagine ancora più piccola su schermi molto piccoli */
        height: 50px;
    }
}
