body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9; /* Colore di sfondo leggero */
}



@media (min-width: 800px) { /* 768px è un breakpoint comune per dispositivi più grandi */
    body {
        transform: scale(1.0);
    }
    .input-section2{
        width: 30%;
        height: 2vw;
        margin-top:5vw;
    }
}

.header {
    background-color: #f1f1f1;
    padding: 2px;
    text-align: center;
}

.header h2 {
    margin: 0;
}

.profile-section {
    padding: 2px;
    margin-bottom: 2px;
    margin-top: 2px;

    
}
.profile-section h2 {
    text-align: center;
    margin-bottom: 2px;
    margin-top: 2px;
}

.container {
    display: flex;
}

.input-container {
    display: flex;
    width: 100%;
    max-width: 100vw;
    padding: 5px;
    box-sizing: border-box;
    justify-content: flex-start; /* Assicura che ci sia spazio tra gli input box */
}


.riferimento {
    max-width: 100%;
    margin-right: 1%;
    margin-bottom: 5%;
}

#nome_cliente, #riferimento_ordine {
    flex-grow: 1;
    margin: 0.5rem; /* Usa rem invece di px */
    padding: 1rem; /* Usa rem invece di px */
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Stili per schermi più piccoli */
@media (max-width: 600px) {
    .nome_cliente, .riferimento_ordine {
        width: 100%;
        margin: 5px 0; /* Modifica il margine per schermi più piccoli */
    }
}


@media (max-width: 600px) {
    .profile-grid {
        display: flex; /* Usa flexbox anziché grid */
        overflow-x: auto; /* Permette lo scorrimento orizzontale */
        gap: 5px; /* Mantiene la stessa distanza tra i profili */
        margin-bottom: 20px;
        align-items: center; /* Centra gli elementi verticalmente */
        height: 20vh;
        
    }
    .admin-panel {
        display: none !important;
        
        
    }
    .toggle-button {
        display: none !important;
        margin: 2.5px 0;
        
    }
}

.toggle-button {
    margin: 74px 0;
    
}

@media (min-width: 601px) {
    .profile-grid {
        display: flex; /* Usa flexbox anziché grid */
        overflow-x: auto; /* Permette lo scorrimento orizzontale */
        gap: 1%; /* Mantiene la stessa distanza tra i profili */
        margin-bottom: 1.2vh;
        align-items: center; /* Centra gli elementi verticalmente */
        height: 32vh;
    }
    .main-container {
        display: flex;
        flex-direction: row; /* Allinea i figli in orizzontale */
    }
    
    .admin-panel {
        width: 250px;
        display: none;
        background-color: #f4f4f4;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    .admin-panel h2 {
        margin-top: 0;
        color: #333;
    }
    
    .admin-functions {
        list-style: none;
        padding: 0;
    }
    
    .admin-functions li {
        margin-bottom: 10px;
    }
    
    .admin-functions button {
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    
    .admin-functions button:hover {
        background-color: #0056b3;
    }
    
    
    .content {
        flex-grow: 1; /* Il contenuto principale occupa lo spazio rimanente */
        /* Aggiungi qui margin, padding o altri stili se necessario */
    }
    
}


.profile {
    flex: 0 0 auto; /* Gli elementi non si espanderanno o stringeranno */
    min-height: 60%;
    min-width: 30%;
    background-size: contain; /* L'immagine si adatta per essere contenuta interamente */
    background-repeat: no-repeat; /* Previene la ripetizione dell'immagine */
    background-position: center; /* Centra l'immagine all'interno del contenitore */
   
    /* Altri stili per il singolo profilo */
}


@media (min-width: 383px) {
    .profile {
        min-height: 60%; /* Dimensioni maggiori per tablet */
        min-width: 20%; /* Dimensioni maggiori per tablet */
        height: 30vh;
    }
}


.flex-container {
    display: flex;
    justify-content: space-between; /* Allinea gli elementi ai lati opposti del contenitore */

}




.measure-section img {
    display: block;
    margin: 1px auto;
    width: 100%; /* Adatta in base alle tue esigenze */
}

.measure-section div {
    text-align: center;
    margin: 0px 0;
}

.measure-section  {
    width: 80%;
    padding: 1px;
    border:none;    
}
.measure-section {
    display: none;
    /*display: flex;  Cambia il layout a flex per un migliore controllo */
    align-items: center; /* Centra verticalmente il contenuto */
    justify-content: center; /* Centra orizzontalmente il contenuto */
    padding: 5px; /* Riduci il padding */
    margin: auto;
    width: 50%; /* Riduci la larghezza */
    transform: scale(1.1);
    
}

.image-container {
    position: relative;
    margin: 0; /* Riduci i margini */
}

.image-container img {
    width: 100%; /* Adatta questo in base alle tue esigenze */
    height: auto;
}


@media (min-width: 601px) {
    .image-container img {
        width: 300px; /* Adatta questo in base alle tue esigenze */
        height: 300px;
    }
}



#containerInputControllo {
    display: flex;
    justify-content: center; /* Centra i figli orizzontalmente nel contenitore */
    align-items: center; /* Opzionale: se vuoi anche centrarli verticalmente */
    gap: 20px; /* Distanza tra i figli */
}

#containerInputImmagini {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 1%;
    margin-right: 5px; 
}

.input-controllo-top, .input-controllo-left {
    margin-bottom: 10%;
}


#listaSviluppo div {
    /* Stili per i div che contengono le date e le input box */
    margin-top: 5px; /* Aggiungi un margine superiore per separare le date */
    padding-left: 10px; /* Aggiungi uno spazio sinistro per l'indentazione delle date */
    display: flex; /* Utilizza il layout flessibile per centrare verticalmente il testo */
    align-items: center; /* Centra verticalmente il contenuto */
}

#listaSviluppo div span {
    /* Stili per il testo contenuto nei div */
    display: inline-block; /* Rendi il testo un elemento blocco per centrarlo verticalmente */
    vertical-align: middle; /* Allinea verticalmente il testo al centro */
}

#numeroQuote {
    /* Stili per il testo contenuto nei div */
    width: 20%; /* Rendi il testo un elemento blocco per centrarlo verticalmente */

}


#listaSviluppo div {
    /* Stili per i div che contengono le date e le input box */
    margin-top: 5px; /* Aggiungi un margine superiore per separare le date */
    padding-left: 10px; /* Aggiungi uno spazio sinistro per l'indentazione delle date */
    display: flex; /* Utilizza il layout flessibile per centrare verticalmente il testo */
    align-items: center; /* Centra verticalmente il contenuto */
}


#listaSviluppo div {
    /* Stili per i div che contengono le date e le input box */
    margin-top: 5px; /* Aggiungi un margine superiore per separare le date */
    padding-left: 10px; /* Aggiungi uno spazio sinistro per l'indentazione delle date */
}




@media (max-width: 480px) {
    .input-lato {
        position: absolute;
        margin: 0;
        line-height: normal; 
        padding: 0%;
        width: 24%;
        background-color: transparent;
        border:none; 
        font-weight: bold;
        font-size: 14px;
    
        /* Stili aggiuntivi per gli input qui (dimensione, bordi, ecc.) */
    }
}

@media (min-width: 480px) {
    .input-lato {
        position: absolute;
        margin: 0;
        line-height: normal; 
        padding: 0%;
        width: 24%;
        background-color: transparent;
        border:none; 
        font-weight: bold;
        font-size: 16px;
    
        /* Stili aggiuntivi per gli input qui (dimensione, bordi, ecc.) */
    }
}

@media (min-width: 768px)  {
    .input-lato {
        position: absolute;
        margin: 0;
        line-height: normal; 
        padding: 0%;
        width: 24%;
        background-color: transparent;
        border:none; 
        font-weight: bold;
        font-size: 20px;
    
        /* Stili aggiuntivi per gli input qui (dimensione, bordi, ecc.) */
    }
}

@media (min-width: 1024px)  {
    .input-lato {
        position: absolute;
        margin: 0;
        line-height: normal; 
        padding: 0%;
        width: 24%;
        background-color: transparent;
        border:none; 
        font-weight: bold;
        font-size: 21px;
    
        /* Stili aggiuntivi per gli input qui (dimensione, bordi, ecc.) */
    }
}

@media (min-width: 1224px)  {
    .input-lato {
        position: absolute;
        margin: 0;
        line-height: normal; 
        padding: 0%;
        width: 24%;
        background-color: transparent;
        border:none; 
        font-weight: bold;
        font-size: 23px;
    
        /* Stili aggiuntivi per gli input qui (dimensione, bordi, ecc.) */
    }
}




.button-section {
    text-align: center;
    margin-top: 20px;
}

.button-section button {
    margin: 0 10px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.input-section {

    text-align: center;
    margin-top: 10px;
    height: 11.5vw;
}

@media (max-width: 768px) {
    #numPezzi,#altezza {
        width: 50px;
    }
}


#btnMostraCarrello {
    position: fixed;
    top: 1%;
    right: 1%;
    z-index: 1000;
    padding: 1rem; /* Aumenta il padding per dispositivi touch */
    font-size: 1.5rem; /* Aumenta la dimensione del testo */
    display: none;
}

.badge {
    position: absolute;
    top: -1%; /* Ajusta queste proprietà in base alle tue esigenze */
    right: 0%;
    padding: 4.5%;
    border-radius: 50%;
    background-color: red;
    color: white;
    font-size: 0.8em;
}

#elementiCarrello {
    display: flex;
    flex-wrap: wrap; /* Permette agli elementi di andare a capo se non ci sta spazio */
    justify-content: space-around; /* Distribuisce lo spazio intorno agli elementi */
    gap: 20px; /* Distanza tra gli elementi */
}

.elementoCarrello {
    flex-basis: 40%; /* Ogni elemento occupa il 40% della larghezza del contenitore */
    /* Altri stili per elementoCarrello se necessario */
}
.dettagliProfilo {
    display: flex;
    flex-direction: column; /* Assicura che gli elementi siano uno sopra l'altro */
    
    /* Aggiungi altri stili come margini, padding ecc. */
}

.dettagliProfilo p {
    margin: 5px 0; /* Spaziatura tra le righe */
}
#dettagliCarrello button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 1em;
    cursor: pointer;
    /* Altri stili come colori, bordi, ecc. */
}

/* Aggiungi questo nel tuo file CSS */
.imgCarrello {
    width: 100%;
    height: auto;
    /* Altri stili se necessario */
}


/* Ottimizzazione degli input per dispositivi touch */
#spessore, #materiale, #colore, #tipologia {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.dropdown-container {
    display: none;
    flex-direction: column;

    justify-content: center;
  
    max-width: 30%;
    margin-right: 1%
}

.dropdown {
    margin-bottom: 10px;
    width: 100%;

}

.campoMancante {
    border: 2px solid red; /* Cambia il bordo in rosso */
}


.image-container .scelteVerniciato .opzioneVerniciato {
    cursor: pointer;
    border: 3px solid transparent; /* Bordo trasparente per mantenere lo spazio */
    width:20px;
    height: 20px;
}


#imagePreview {
   
    width: 300px;
    height: 300px;
    overflow: hidden; /* Previene eventuali spbordamenti */
  }
  #imagePreview img {
    width: 100%;
    height: auto; /* Mantiene le proporzioni dell'immagine */
  }

/* Aggiungi qui ulteriori stili specifici se necessario */

/* Aggiungere eventuali stili aggiuntivi qui */





button {
    margin-right: 5px;
}
.button-selected {
    background-color: #4CAF50; /* Verde */
    color: white;
}
#toolbar {
    display: flex; /* Imposta il layout flex */
    flex-wrap: nowrap; /* Impedisce agli elementi di andare a capo */
    justify-content: space-around; /* Distribuisce gli elementi in modo uniforme */
    align-items: center; /* Allinea gli elementi verticalmente al centro */
    width: 100%; /* Larghezza completa del contenitore */
}

#toolbar button {
    flex: 1 1 auto; /* Assegna la possibilità di crescere e restringersi, con una base automatica */
    min-width: 5px; /* Imposta una larghezza minima per ogni pulsante */
    /* Altri stili per i pulsanti se necessario */
}


/* Stili per il canvas */
#drawingCanvas {
    width: 100%; /* Larghezza al 100% del contenitore */
    /* Altezza può essere impostata qui o tramite JavaScript */
}


footer {
    background-color: #f2f2f2;
    color: #333;
    text-align: center;
    padding: 10px 0;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
}

footer p {
    margin: 2.5px 0;
    font-size: 12px; /* Ridotto del 50% */
}

footer a {
    color: #0066cc;
    text-decoration: none;
}

@media (max-width: 600px) {
    footer {
        padding: 3px 0;
    }

    footer p {
        font-size: 10px; /* Ancora più piccolo su schermi stretti */
    }
}


.selezione-ruolo-container {
    display: flex;
    justify-content: center; /* Centra orizzontalmente i figli */
    align-items: center; /* Centra verticalmente i figli */
    height: 100vh;
    padding: 20px;
}

.titolo-selezione-ruolo {
    position: absolute;
    top: 10vh; /* Regola questa distanza come preferisci */
    width: 100%;
    text-align: center; /* Assicura che il titolo sia centrato */
    font-size: 24px;
    color: #333;
}

.ruoli {
    display: flex;
    justify-content: space-around; /* Distribuisce uniformemente i riquadri */
    width: 100%; /* Occupa l'intera larghezza del contenitore */
    max-width: 600px; /* Imposta una larghezza massima per i riquadri */
}

.ruolo {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Allinea il contenuto dall'alto */
    align-items: center; /* Centra orizzontalmente il contenuto */
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 250px; /* Larghezza fissa */
    height: 200px; /* Altezza fissa */
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 20px;
    margin: 0 10px; /* Aggiunge un po' di spazio tra i riquadri */
}

.ruolo:hover {
    background-color: #e0e0e0;
    transform: translateY(-5px);
}

.ruolo h3, .ruolo p {
    margin: 30px 0;
}

.ruolo h3 {
    font-size: 20px;
}

.ruolo p {
    font-size: 16px;
    color: #666;
}


#imageCanvas1, #imageCanvas2, #finalCanvas {
    border: 1px solid #000;
    max-width: 100%;
    background: none;
}

.input-lato.highlight {
    border: 2px solid red;
    display: block; /* Mostra l'overlay quando è in highlight */
  }
  
  .input-lato.frozen {
    pointer-events: none;
  }
  
  .input-overlay {
    position: absolute;
    width: 50px; /* Regola queste dimensioni in base alle dimensioni degli input */
    height: 25px; /* Regola queste dimensioni in base alle dimensioni degli input */
    z-index: 1000;
    cursor: pointer;

  }
  
  .input-overlay.selected {
    border: 2px solid red;
  }