.input-container {
    position: relative;
    width: 100%;
}

    /* Stile del campo input */
    .input-container input,
    .input-container select {
        /*width: var(--modal-input-width);*/
        padding: 9px;
        border: 1px solid #ccc;
        border-radius: 15px;
        font-size: 13px;
    }

    /* Stile della label flottante */
    .input-container label {
        position: absolute;
        left: var(--modal-label-font-size);
        top: 50%;
        transform: translateY(-50%);
        font-size: var(--modal-label-font-size);
        pointer-events: none;
        width: auto;
    }

    /* Il trucco: taglia il bordo creando una "finta interruzione" */
    .input-container input:focus + label,
    .input-container input:not(:placeholder-shown) + label,
    .input-container select:focus + label,
    .input-container select:not([value=""]) + label,
    .input-container textarea:focus + label,
    .input-container textarea:not(:placeholder-shown) + label {
        top: -8px; /* Spostiamo esattamente dentro il bordo */
        font-size: var(--modal-label-font-size);
        padding: 0 2px;
    }

/* Per lo stile dark */
body.mod-skin-dark .input-container select:focus + label,
body.mod-skin-dark .input-container select:not([value=""]) + label,
body.mod-skin-dark .input-container select:disabled,
body.mod-skin-dark .input-container input:not([value=""]) + label,
body.mod-skin-dark .input-container input:disabled,
body.mod-skin-dark .input-container textarea:not([value=""]) + label,
body.mod-skin-dark .input-container textarea:disabled,
body.mod-skin-dark .input-container .form-control:disabled,
body.mod-skin-dark .input-container .form-control[readonly] {
    background-color: transparent !important;
}

/* LIGHT THEME */
body.mod-skin-light .input-container select:focus + label,
body.mod-skin-light .input-container select:not([value=""]) + label,
body.mod-skin-light .input-container select:disabled,
body.mod-skin-light .input-container input:not([value=""]) + label,
body.mod-skin-light .input-container input:disabled,
body.mod-skin-light .input-container textarea:not([value=""]) + label,
body.mod-skin-light .input-container textarea:disabled,
body.mod-skin-light .input-container .form-control:disabled,
body.mod-skin-light .input-container .form-control[readonly] {
    background-color: white !important;
    opacity: 1;
}

.custom-modal-dialog {
    position: fixed !important;
    left: calc(3%); /* o altro valore adatto */
    width: 95%;
    max-width: 95%; /* Imposta la larghezza massima desiderata */
    max-height: 85%; /* Imposta l'altezza massima desiderata */
}

@media (min-width: 300px) {
    .custom-modal-dialog-ripartizione-pasti {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
    }
}

.flatpickr-calendar {
    z-index: 1056 !important;
}

.validation-message {
    color: red;
}

.radius-style {
    border-radius: 15px;
    overflow: hidden; /* Evita bordi tagliati */
}

.custom-width {
    width: 100%;
    margin-top: -18px;
}

.col-sm-2-custom {
    width: 20% !important;
    font-size: var(--modal-label-font-size);
}

.multi-select-label-property {
    font-size: var(--modal-label-font-size);
    position: relative;
    margin-bottom: 1px;
    left: var(--modal-label-font-size);
    top: 3px
}

.choices[data-type*=select-multiple] .choices__inner, .choices[data-type*=text] .choices__inner {
    border-radius: 15px !important;
    border-color: var(--ins-dark-border-subtle);
    border: 1px solid #ccc;
    padding: .40rem .385rem !important;
}

.choices[data-type="select-multiple"] .choices__inner::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.6rem;
    height: 0.6rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%);
    pointer-events: none;
}

.custom-logo-style {
    height: 60px !important;
    width: 60px !important;
}

.custom-logo-style-login {
    height: 80px !important;
    width: 80px !important;
}

.custom-logo-scritta-style {
    height: 35px !important;
    width: 105px !important;
    margin-top: 7px !important;
}

.custom-logo-scritta-style-login {
    height: 45px !important;
    width: 135px !important;
    margin-top: 7px !important;
}

.custom-logo-sm-style {
    height: 55px !important;
    width: 60px !important;
}

.custom-scroll-bar {
    overflow-y: auto;
    resize: vertical;
    scrollbar-width: thin;
}

.custom-image-style {
    width: 35px;
    height: 35px;
}

.custom-progressi-modal-style {
    height: 35px;
    color: indianred
}

.truncate-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ########################################### INIZIO - LAYOUT NOTIFICHE ########################################### */
.notification-container {
    position: fixed;
    right: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    z-index: 2000;
    margin-right: 5px;
}

.notification {
    width: 300px;
    max-width: 400px;
    padding: 10px 15px;
    border-radius: 15px;
    color: #fff;
    font-weight: 400;
    box-shadow: 0 0px 0px rgba(0,0,0,0.2);
    animation: fadein 0.3s, fadeout 0.3s ease-in-out forwards;
    animation-delay: 0s, var(--duration); /* la seconda animazione aspetta */
}

    .notification.closing {
        opacity: 0;
        transform: translateY(-10px);
    }

    .notification.success {
        background: #28a745;
    }

    .notification.error {
        background: #dc3545;
    }

    .notification.warning {
        background: #ffc107;
        color: #212529;
    }

    .notification.info {
        background: #17a2b8;
    }
    
    .notification.persistent {
        animation: none !important;
    }

@keyframes fadein {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeout {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.dt-scroll-body {
    max-height: calc(100vh - 450px) !important;
}

/* ########################################### FINE - LAYOUT NOTIFICHE ########################################### */
/* ########################################### INIZIO - MODIFICHE CUSTOM CALENDARIO ########################################### */
/*Serve per aumentare spazio nelle celle dell'orario per la visualizzazione della settimane e del giorno*/
.fc .fc-timegrid-slot {
    height: 3em;
}

/* ########################################### FINE - MODIFICHE CUSTOM CALENDARIO ########################################### */

.divisor-bar {
    border: 1px solid #ccc;
    margin: 40px 0;
}

.me-01rem {
    margin-right: 0.1rem;
}

.ml-0 {
    margin-left: 0;
}

.client-status {
    color: #fff;
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 1rem;
    display: inline-block;
    padding: 0.7em;
    font-size: 88%;
    line-height: 1;
}

.table-fixed-header {
    border-collapse: collapse;
    width: 100%;
}

    .table-fixed-header thead th {
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }

.table-wrapper {
    max-height: 32vh; /* Altezza scrollabile */
    overflow-y: auto;
}

.disabled-div {
    pointer-events: none;
    opacity: 0.5;
}

.w-5-perc {
    width: 5%;
}

.w-10-perc {
    width: 10%;
}

.w-20-perc {
    width: 20%;
}

.w-30-perc {
    width: 30%;
}

.gap-1rem {
    gap: 1rem !important;
}

.table-scroll-body tbody {
    display: block;
    max-height: 53vh;
    overflow-y: auto;
}

    .table-scroll-body thead,
    .table-scroll-body tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }