/* ============================================================================
   LEGACY COMPAT - Bootstrap 3 / AdminLTE 2  ->  Bootstrap 5 / AdminLTE 4
   ----------------------------------------------------------------------------
   Regole "ponte" per le classi del vecchio stack ancora presenti nelle view
   (form-group, control-label, checkbox/radio wrapper, btn-xs, utility AdminLTE 2,
   colori bg-*, ecc.). Ogni blocco e' indipendente: quando le view che usano una
   classe vengono riscritte con le classi Bootstrap 5, il blocco si puo' eliminare.
   ============================================================================ */

/* ---------- Tipografia: dimensioni dei titoli di Bootstrap 3 (Bootstrap 5 li scala con la finestra) --- */
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

.card-title
{
    font-size: 18px;
    font-weight: 400;
}

/* ---------- Form Bootstrap 3 ---------------------------------------------- */
.form-group
{
    margin-bottom: 1rem;
}

/* .form-horizontal .form-group si comportava come una .row */
.form-horizontal .form-group
{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

/* :where() azzera la specificita': le larghezze delle col-* di Bootstrap 5 devono vincere su questa regola */
:where(.form-horizontal .form-group) > *
{
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

/* .form-group con colonne dirette (label.col-sm-2 + div.col-sm-10) anche fuori da .form-horizontal:
   in Bootstrap 3 le colonne flottavano affiancate; qui la riga diventa flex e l'input-group (che in Bootstrap 5
   e' largo 100%) occupa lo spazio che resta accanto all'etichetta */
.form-group:has(> [class^="col-"]),
.form-group:has(> [class*=" col-"])
{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.form-group > .input-group[class^="col-"],
.form-group > .input-group[class*=" col-"]
{
    flex: 1 1 0%;
    width: auto;
}

/* Le etichette Bootstrap 3 erano in grassetto; nei form orizzontali allineate a destra (da 768px, come Bootstrap 3) */
label.col-form-label,
.form-group > label:not(.form-check-label):not(.btn)
{
    font-weight: 700;
}

@media (min-width: 768px)
{
    .form-horizontal .col-form-label
    {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
    }
}

.form-control-static
{
    min-height: calc(1.5em + .75rem + 2px);
    padding-top: .375rem;
    padding-bottom: .375rem;
    margin-bottom: 0;
}

.help-block
{
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
    color: #737373;
}

.form-inline
{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

/* Wrapper checkbox / radio di Bootstrap 3 (input nativi) */
.checkbox,
.radio
{
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

.checkbox label,
.radio label
{
    min-height: 20px;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"]
{
    position: absolute;
    margin-top: 4px;
    margin-left: -20px;
}

.checkbox-inline,
.radio-inline
{
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}

.checkbox-inline + .checkbox-inline,
.radio-inline + .radio-inline
{
    margin-left: 10px;
}

/* Stato errore (jQuery Validation usa ancora has-error sul .form-group) */
.has-error .form-control,
.has-error .form-select
{
    border-color: var(--bs-danger);
}

.has-error .col-form-label,
.has-error .help-block,
.has-error > label,
label.error
{
    color: var(--bs-danger);
}

label.error
{
    display: block;
    font-weight: 400;
    font-size: .875em;
    margin-top: .25rem;
}

/* <span class="input-group-btn"> attorno ai bottoni di un input-group */
.input-group-btn
{
    display: contents;
}

.input-group > .input-group-btn:not(:first-child) > .btn
{
    margin-left: calc(var(--bs-border-width) * -1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .input-group-btn:not(:last-child) > .btn
{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------- Colori di AdminLTE 2 / Bootstrap 3 ------------------------------------------
   Palette dei bottoni, dei badge/sfondi (text-bg-*, bg-*, text-*) e dei link come nel vecchio tema
   (skin-blue-light): primary #3c8dbc, success #00a65a, info #00c0ef, warning #f39c12, danger #dd4b39 */
:root
{
    --bs-primary: #3c8dbc;
    --bs-primary-rgb: 60, 141, 188;
    --bs-success: #00a65a;
    --bs-success-rgb: 0, 166, 90;
    --bs-info: #00c0ef;
    --bs-info-rgb: 0, 192, 239;
    --bs-warning: #f39c12;
    --bs-warning-rgb: 243, 156, 18;
    --bs-danger: #dd4b39;
    --bs-danger-rgb: 221, 75, 57;
    --bs-link-color: #3c8dbc;
    --bs-link-color-rgb: 60, 141, 188;
    --bs-link-hover-color: #72afd2;
    --bs-link-hover-color-rgb: 114, 175, 210;
}

/* In AdminLTE 2 info e warning avevano il testo bianco (Bootstrap 5 lo mette scuro) */
.text-bg-info,
.text-bg-warning,
.badge.text-bg-info,
.badge.text-bg-warning
{
    color: #fff !important;
}

/* Avvisi: in AdminLTE 2 erano a tinta piena con testo bianco (Bootstrap 5 li fa chiari con testo scuro) */
.alert-success { --bs-alert-bg: #00a65a; --bs-alert-border-color: #008d4c; --bs-alert-color: #fff; --bs-alert-link-color: #fff; }
.alert-info    { --bs-alert-bg: #00c0ef; --bs-alert-border-color: #00acd6; --bs-alert-color: #fff; --bs-alert-link-color: #fff; }
.alert-warning { --bs-alert-bg: #f39c12; --bs-alert-border-color: #e08e0b; --bs-alert-color: #fff; --bs-alert-link-color: #fff; }
.alert-danger  { --bs-alert-bg: #dd4b39; --bs-alert-border-color: #d73925; --bs-alert-color: #fff; --bs-alert-link-color: #fff; }

/* Dimensioni e raggio dei bottoni Bootstrap 3 / AdminLTE 2 */
.btn
{
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-font-size: 14px;
    --bs-btn-border-radius: 3px;
}

.btn-sm
{
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 10px;
    --bs-btn-font-size: 12px;
}

.btn-primary
{
    --bs-btn-color: #fff;
    --bs-btn-bg: #3c8dbc;
    --bs-btn-border-color: #367fa9;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #367fa9;
    --bs-btn-hover-border-color: #367fa9;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #367fa9;
    --bs-btn-active-border-color: #367fa9;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #3c8dbc;
    --bs-btn-disabled-border-color: #367fa9;
    --bs-btn-focus-shadow-rgb: 60, 141, 188;
}
.btn-success
{
    --bs-btn-color: #fff;
    --bs-btn-bg: #00a65a;
    --bs-btn-border-color: #008d4c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #008d4c;
    --bs-btn-hover-border-color: #008d4c;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #008d4c;
    --bs-btn-active-border-color: #008d4c;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #00a65a;
    --bs-btn-disabled-border-color: #008d4c;
    --bs-btn-focus-shadow-rgb: 0, 166, 90;
}
.btn-info
{
    --bs-btn-color: #fff;
    --bs-btn-bg: #00c0ef;
    --bs-btn-border-color: #00acd6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #00acd6;
    --bs-btn-hover-border-color: #00acd6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #00acd6;
    --bs-btn-active-border-color: #00acd6;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #00c0ef;
    --bs-btn-disabled-border-color: #00acd6;
    --bs-btn-focus-shadow-rgb: 0, 192, 239;
}
.btn-warning
{
    --bs-btn-color: #fff;
    --bs-btn-bg: #f39c12;
    --bs-btn-border-color: #e08e0b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e08e0b;
    --bs-btn-hover-border-color: #e08e0b;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e08e0b;
    --bs-btn-active-border-color: #e08e0b;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f39c12;
    --bs-btn-disabled-border-color: #e08e0b;
    --bs-btn-focus-shadow-rgb: 243, 156, 18;
}
.btn-danger
{
    --bs-btn-color: #fff;
    --bs-btn-bg: #dd4b39;
    --bs-btn-border-color: #d73925;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #d73925;
    --bs-btn-hover-border-color: #d73925;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #d73925;
    --bs-btn-active-border-color: #d73925;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #dd4b39;
    --bs-btn-disabled-border-color: #d73925;
    --bs-btn-focus-shadow-rgb: 221, 75, 57;
}
/* btn-default di Bootstrap 3 (convertito in btn-outline-secondary): grigio chiaro con testo scuro */
.btn-outline-secondary
{
    --bs-btn-color: #444;
    --bs-btn-bg: #f4f4f4;
    --bs-btn-border-color: #ddd;
    --bs-btn-hover-color: #444;
    --bs-btn-hover-bg: #e7e7e7;
    --bs-btn-hover-border-color: #adadad;
    --bs-btn-active-color: #444;
    --bs-btn-active-bg: #e7e7e7;
    --bs-btn-active-border-color: #adadad;
    --bs-btn-disabled-color: #444;
    --bs-btn-disabled-bg: #f4f4f4;
    --bs-btn-disabled-border-color: #ddd;
    --bs-btn-focus-shadow-rgb: 173, 173, 173;
}

/* ---------- Bottoni e badge -------------------------------------------------- */
.btn-xs
{
    --bs-btn-padding-y: .1rem;
    --bs-btn-padding-x: .4rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-border-radius: var(--bs-border-radius-sm);
}

.btn-flat
{
    border-radius: 0;
}

/* <span class="label"> senza variante */
.label
{
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    background-color: var(--bs-secondary);
}

/* ---------- Dropdown con markup Bootstrap 3 (ul > li > a) ------------------- */
.dropdown-menu > li > a:not(.dropdown-item)
{
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-menu > li > a:not(.dropdown-item):hover,
.dropdown-menu > li > a:not(.dropdown-item):focus
{
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.dropdown-menu > li.divider
{
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
}

/* ---------- Modali: bottone di chiusura prima del titolo (ordine Bootstrap 3) -- */
.modal-header > .btn-close:first-child
{
    order: 99;
    margin-left: auto;
}

/* ---------- Pannelli Bootstrap 3 -------------------------------------------- */
.panel
{
    margin-bottom: 1rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.panel-heading
{
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
    background-color: var(--bs-tertiary-bg);
}

.panel-body
{
    padding: 1rem;
}

/* ---------- Utility Bootstrap 3 -------------------------------------------- */
.hidden
{
    display: none !important;
}

.caret
{
    display: none;
}

/* ---------- Utility AdminLTE 2 ----------------------------------------------- */
.margin         { margin: 10px; }
.margin-bottom  { margin-bottom: 20px; }
.margin-bottom-none { margin-bottom: 0; }
.margin-r-5     { margin-right: 5px; }
.pad            { padding: 10px; }
.no-margin      { margin: 0 !important; }
.no-border      { border: 0 !important; }
.no-shadow      { box-shadow: none !important; }
.flat           { border-radius: 0 !important; }
.text-bold, .text-bold.table td, .text-bold.table th { font-weight: 700; }

.text-aqua       { color: #00c0ef !important; }
.text-light-blue { color: #3c8dbc !important; }
.text-green      { color: #00a65a !important; }
.text-red        { color: #dd4b39 !important; }
.text-yellow     { color: #f39c12 !important; }
.text-olive      { color: #3d9970 !important; }
.text-purple     { color: #605ca8 !important; }
.text-orange     { color: #ff851b !important; }
.text-maroon     { color: #d81b60 !important; }
.text-navy       { color: #001f3f !important; }
.text-teal       { color: #39cccc !important; }
.text-fuchsia    { color: #f012be !important; }
.text-lime       { color: #01ff70 !important; }
.text-black      { color: #111 !important; }

.bg-navy    { color: #fff !important; background-color: #001f3f !important; }
.bg-teal    { color: #fff !important; background-color: #39cccc !important; }
.bg-olive   { color: #fff !important; background-color: #3d9970 !important; }
.bg-lime    { color: #fff !important; background-color: #01ff70 !important; }
.bg-orange  { color: #fff !important; background-color: #ff851b !important; }
.bg-fuchsia { color: #fff !important; background-color: #f012be !important; }
.bg-purple  { color: #fff !important; background-color: #605ca8 !important; }
.bg-maroon  { color: #fff !important; background-color: #d81b60 !important; }
.bg-black   { color: #fff !important; background-color: #111 !important; }
.bg-gray-light { background-color: #f7f7f7 !important; }

/* Icona grande nelle small-box (markup AdminLTE 2: div.icon > i) */
.small-box > .icon
{
    position: absolute;
    top: auto;
    right: 10px;
    bottom: 5px;
    z-index: 0;
    font-size: 70px;
    color: rgba(0, 0, 0, .15);
    transition: transform .3s linear;
}

.small-box:hover > .icon
{
    transform: scale(1.1);
}

/* Padding del contenuto come AdminLTE 2 (15px): in AdminLTE 4 lo dava un .container-fluid che le view non hanno;
   con i soli 8px di AdminLTE 4 le .row (margini -12px) sforavano e comparivano le barre orizzontali */
/* Discendente, non figlio diretto: in alcune view (es. appuntamenti) la sezione sta dentro un <form> */
.app-main .app-content-header
{
    padding: 15px 15px 0;
}

.app-main .app-content
{
    padding: 15px;
}

/* Sezioni senza classe (statistiche, stampe, fatturazione...) con le .row direttamente dentro: stesso padding */
.app-main > section:not([class]),
.app-main > form > section:not([class])
{
    padding: 0 15px;
}

/* Come il .wrapper di AdminLTE 2 (overflow:hidden): quel che sporge a destra non crea la barra orizzontale */
.app-main
{
    overflow-x: clip;
}

/* Spaziature di Bootstrap 3 / AdminLTE 2: gutter delle righe 30px (Bootstrap 5: 24px) e box con 20px sotto
   (Bootstrap 5 non da' margine alle card): senza, le card e le colonne risultano "attaccate" */
.row
{
    --bs-gutter-x: 30px;
}

.card
{
    margin-bottom: 20px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

/* Box annidati (box > box): in Bootstrap 3 il margine inferiore interno collassava con quello esterno */
.card > .card:last-child,
.card-body > .card:last-child
{
    margin-bottom: 0;
}

.card-header,
.card-body,
.card-footer
{
    padding: 10px;
}

/* Carattere di AdminLTE 2 */
body
{
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* In Bootstrap 3 le colonne flottavano a sinistra anche fuori da una .row (le view lo sfruttano, es. titolo e
   bottoni nelle intestazioni delle card); in Bootstrap 5 si impilano. Dentro una .row (flex) il float e' ignorato. */
:not(.row) > [class^="col-"],
:not(.row) > [class*=" col-"]
{
    float: left;
}

/* Clearfix dei contenitori che in AdminLTE 2 lo avevano (box-header/body/footer) */
.card-header::after,
.card-body::after,
.card-footer::after,
.form-group::after
{
    display: block;
    clear: both;
    content: "";
}

/* Intestazione contenuto con markup AdminLTE 2 (h1 + breadcrumb senza row/col) */
.app-content-header > h1
{
    display: inline-block;
    margin: 0;
    font-size: 1.5rem;
}

.app-content-header > h1 > small
{
    font-size: 60%;
    font-weight: 300;
    color: var(--bs-secondary-color);
}

.app-content-header > .breadcrumb
{
    float: right;
    padding: 0;
    margin: 0;
}

/* Tab AdminLTE 2 (.nav-tabs-custom) convertite in .card.card-tabs con le tab direttamente nella card */
.card.card-tabs > .nav-tabs
{
    padding: .5rem .5rem 0;
    border-bottom: 0;
}

.card.card-tabs > .tab-content
{
    padding: 1rem;
}

/* Timeline AdminLTE 2 (markup ul.timeline > li; AdminLTE 4 stila solo .timeline > div) */
ul.timeline
{
    list-style: none;
}

.timeline > li
{
    position: relative;
    margin-right: 10px;
    margin-bottom: 15px;
}

.timeline > li::before,
.timeline > li::after
{
    display: table;
    content: " ";
}

.timeline > li::after
{
    clear: both;
}

.timeline > li > .timeline-item
{
    position: relative;
    padding: 0;
    margin: 0 15px 0 60px;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-radius: .375rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

.timeline > li > .timeline-item > .time
{
    float: right;
    padding: 10px;
    font-size: 12px;
    color: var(--bs-secondary-color);
}

.timeline > li > .timeline-item > .timeline-header
{
    padding: 10px;
    margin: 0;
    font-size: 16px;
    line-height: 1.1;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.timeline > li > .timeline-item > .timeline-header > a
{
    font-weight: 600;
    text-decoration: none;
}

.timeline > li > .timeline-item > .timeline-body,
.timeline > li > .timeline-item > .timeline-footer
{
    padding: 10px;
}

.timeline > li > .fa
{
    position: absolute;
    top: 0;
    left: 18px;
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    text-align: center;
    color: #666;
    background-color: var(--bs-secondary-bg);
    border-radius: 50%;
}

/* Timepicker (plugin Bootstrap 3): il widget usa la classe .open per mostrarsi */
.bootstrap-timepicker-widget.dropdown-menu.open
{
    display: block;
}

/* Link come Bootstrap 3: sottolineati solo al passaggio del mouse */
a
{
    text-decoration: none;
}

a:hover,
a:focus
{
    text-decoration: underline;
}

.btn:hover,
.nav-link:hover,
.dropdown-item:hover,
.page-link:hover
{
    text-decoration: none;
}

/* ---------- Sidebar come AdminLTE 2 (skin-blue-light) -----------------------------
   Sfondo #f9fafc, voci in grassetto color #444 con 12px di padding, sottomenu su #f4f4f5, voce attiva con
   bordo sinistro blu. Da 992px la sidebar non e' sticky e non scorre al suo interno: il menu e' tutto
   visibile ("Cerca Paziente" e "Terapisti" compresi) e la pagina cresce di conseguenza, come prima. */
.app-sidebar
{
    --lte-sidebar-bg: #f9fafc;
    --lte-sidebar-color: #444;
    --lte-sidebar-hover-color: #000;
    --lte-sidebar-hover-bg: #f4f4f5;
    --lte-sidebar-menu-active-color: #000;
    --lte-sidebar-menu-active-bg: #f4f4f5;
    --lte-sidebar-submenu-bg: #f4f4f5;
    --lte-sidebar-submenu-color: #777;
    --lte-sidebar-submenu-hover-color: #000;
    --lte-sidebar-submenu-hover-bg: #ebedf1;
    --lte-sidebar-submenu-active-color: #000;
    --lte-sidebar-submenu-active-bg: #ebedf1;
    background-color: #f9fafc !important;
}

.sidebar-menu > .nav-item > .nav-link
{
    padding: 12px 5px 12px 15px;
    font-weight: 600;
    border-left: 3px solid transparent;
    border-radius: 0;
}

.sidebar-menu > .nav-item > .nav-link.active,
.sidebar-menu > .nav-item.menu-open > .nav-link
{
    border-left-color: #3c8dbc;
}

.sidebar-menu .nav-treeview > .nav-item > .nav-link
{
    padding: 5px 5px 5px 15px;
    border-radius: 0;
}

.sidebar-wrapper
{
    padding: 0;
}

.sidebar-wrapper .nav-link:hover
{
    text-decoration: none;
}

@media (min-width: 992px)
{
    .sidebar-expand-lg .app-sidebar
    {
        position: relative !important;
        max-height: none !important;
    }

    .sidebar-expand-lg .app-sidebar .sidebar-wrapper
    {
        overflow: visible !important;
    }
}

/* ---------- Sidebar AdminLTE 4 ---------------------------------------------------
   Gli elementi in posizione assoluta dentro il menu (select nascosta di Select2 "Cerca Paziente", frecce dei
   sottomenu) devono restare dentro il contenitore scorrevole: altrimenti sporgono dalla sidebar sticky e
   allungano la pagina sotto il footer */
.app-sidebar .sidebar-wrapper
{
    position: relative;
}

/* Un <a> non chiuso nel markup viene "riaperto" dal parser dentro le righe e avvolge le colonne: lo si rende
   trasparente per il layout flex della .row (con i float di Bootstrap 3 non si notava) */
.row > a:not([class])
{
    display: contents;
}

/* ---------- Sicurezza griglia AdminLTE 4 ---------------------------------------
   Elementi finiti per errore come figli diretti di .app-wrapper (tag non chiusi, modali,
   script) non devono allargare la colonna della sidebar: li si mette nella colonna del contenuto. */
.app-wrapper > :not(.app-header):not(.app-sidebar):not(.app-main):not(.app-footer):not(.sidebar-overlay)
{
    grid-column: 2;
}