input:not([type='file' i]):not([type='checkbox' i]):not([type='radio' i]):not([type='button' i]):read-only,
textarea:read-only,
.custom-readonly,
.modal-readonly input:disabled,
.modal-readonly select:disabled,
.modal-readonly textarea:disabled {
    background-color: #d8d9da !important;
    opacity: 0.7;
    pointer-events: none !important;
    cursor: not-allowed;
}



.form-check.custom-readonly {
    cursor: not-allowed;
    pointer-events: none !important; /*Disabilita l'interazione */
    user-select: none !important; /*Disabilita la selezione del testo */
    background-color: inherit !important;
}

.custom-readonly.form-check [type=checkbox i]:not(:checked) + label::after,
.custom-readonly.form-check [type=radio i]:not(:checked) + label::after {
    cursor: not-allowed;
    border-color: #d8d9da !important;
}

.custom-readonly.form-check [type=checkbox i]:checked + label::after,
.custom-readonly.form-check [type=radio i]:checked + label::after {
    cursor: not-allowed;
    background-color: #e6e9f2;
    border-color: #e6e9f2;
}

.custom-readonly.form-check [type=radio i] + label::before {
    border-color: #d8d9da !important;
}

/* Loading modal z-index fix - ensure it's always on top of other modals */
#modale-loading-attivita {
    z-index: 9999 !important;
}

/* Backdrop for loading modal - must be above other modals but below the loading modal itself */
.modal-backdrop.loading-backdrop {
    z-index: 9998 !important;
}




.css-logo-h-margin {
    padding-left: 0px !important;
    margin-left: 0px !important
}

.css-no-toc {
    margin-left: 10px !important
}

@media(max-width:300px) {
    .css-logo-h {
        height: 50px !important
    }

    .css-logoSinfonia-h {
        height: 30px !important
    }

    .css-logoSinfonia-h-a {
        padding-top: 18px !important
    }

    .css-no-toc {
        display: none !important
    }
}

@media(max-width:768px) {
    .css-logo-h {
        height: 70px !important
    }

    .css-logoSinfonia-h {
        height: 42px !important
    }

    .css-logoSinfonia-h-a {
        padding-top: 18px !important
    }
}

@media(min-width:768px) {
    .css-logo-h {
        height: 100px !important;
        width: 100px !important;
    }

    .css-logoSinfonia-h {
        height: 60px !important
    }

    .css-logoSinfonia-h-a {
        padding-top: 24px !important
    }
}

@media (max-width: 767px) {
    .btn {
        margin-bottom: 8px; /* 0.5rem */
    }
}

@media only screen and (max-width: 767px) {
    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td,
    .no-more-tables tr {
        display: block;
    }

        .no-more-tables thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    .no-more-tables tr {
        border: 1px solid #ccc;
    }

    .no-more-tables td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: left;
    }

        .no-more-tables td:before {
            position: absolute;
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            text-align: left;
            font-weight: bold;
        }

        .no-more-tables td:before {
            content: attr(data-title);
        }

        .no-more-tables td:empty {
            min-height: 5vh;
        }
}

/* Added grid and card header alignment styles for DetailInstance view */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1rem;
    column-gap: 2rem;
    border-top: var(--bs-it-card-border-separator-width) solid var(--bs-it-card-border-color);
    padding: 10px;
}

.grid-element {
    display: block;
    text-align: left;
}

.it-card-profile-name {
    text-align: left;
}

    .it-card-profile-name a {
        text-align: left;
    }

.big-text-container {
    background-color: #d8d9da !important;
    opacity: 1 !important;
    cursor: default;
    overflow-y: scroll !important;
    height: 200px !important;
}