.flex {
display:flex;
flex-direction:column;
}
.flecol {
display:flex;
flex-direction:column;
gap: 1px;
background-color: white;
/*justify-content: space-between;*/
}
.flerow {
display:flex;
flex-direction:row;
/*flex-wrap: wrap;*/
/*justify-content: center;*/
}
.flerowcen {
display:flex;
flex-direction:row;
justify-content: center;
}
.item{
flex: 1,1,40;
}
.iteful {
        flex-grow: 1; /* Per farli espandere e riempire lo spazio */
        flex: 1;
	/* flex-basis: 100px; /* Larghezza base */
}


/* 1. Assicurati che html e body occupino tutta l'altezza */
html, body {
    height: 100%;
    margin: 0;
}

/* 2. Imposta il body come flex container in colonna */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Usa 100dvh per mobile più preciso */
}

/* 3. Il contenuto principale si espande per spingere il footer */
.content {
    flex: 1; /* Occupa lo spazio disponibile */
}

/* 4. Il footer è flessibile, ma non si rimpicciolisce */
.footer-flex {
    display: flex;
flex-direction:column;
    justify-content: center; /* Opzionale: centra il contenuto interno */
/*    align-items: center;*/
    background-color: #333;
    color: white;
    padding: 1rem;
    flex-shrink: 0; /* Impedisce che il footer si comprima */
}

.flextextarea {
    flex: 1; /* Il cuore: la textarea cresce per riempire lo spazio */
    width: 100%;
  field-sizing: content;
/*    resize: none; /* Opzionale: disabilita il resize manuale dell'utente */
    box-sizing: border-box;
    padding: 10px;
  }

.responsive-iframe {
    width: 100%;
    /* Sostituisci 16/9 con le proporzioni del tuo iframe */
    aspect-ratio: 16 / 9; 
    /* Forza l'altezza ad adattarsi alla larghezza */
    height: auto;
    border: none;
    /* Evita che l'iframe superi la larghezza del contenitore */
    max-width: 100%;
}
.contenitore_tabella {
  overflow-x: scroll;
}