/* STILE DEI CAMPI */
.body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: black; /* Imposta il colore di sfondo del corpo della pagina */
}

/* Stile per il pulsante di aumento */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: 40px; /* Altezza del pulsante */
    width: 40px; /* Larghezza del pulsante */
	font-size: 25px; /* Dimensione del testo */
    margin: 0px; /* Rimuove il margine predefinito*/
    background-color: #964B00; /* Colore di sfondo del pulsante */
    border: 3px; /* Rimuove il bordo */
    border-radius: 30%; Rende il pulsante circolare */
    cursor: pointer; /* Cambia il cursore al passaggio del mouse */
}

 /* Nascondi le frecce di incremento/decremento solo per gli input con la classe 'no-spinners' */

	input.no-spinners {
    -moz-appearance: textfield;
}

input.no-spinners::-webkit-inner-spin-button,
input.no-spinners::-webkit-outer-spin-button {
    display: none;
}

.stileinput {
	display: flex;
    width: 100px; /* Imposta la larghezza desiderata */
    height: 40px; /* Altezza */
    font-size: 25px; /* Dimensione del font */
    justify-content: center;
	align-items: right;
	background-color: gold;
    padding: 10px;
	margin-left: 20px;
	outline: none; /* Rimuove il bordo in rilievo */
	border: none; /* Rimuove il bordo */
    box-shadow: none; /* Rimuove l'ombra */
    
}

.stileinput-internazionale {
    width: 200px; /* Imposta la larghezza desiderata */
    height: 30px; /* Altezza */
    font-size: 18px; /* Dimensione del font */
    justify-content: right;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 colonne di larghezza uguale */
    grid-template-rows: repeat(11, 100px); /* Crea 11 righe di altezza 100px */
    grid-gap: 10px; /* Spazio tra le colonne e le righe */
    place-items: center;
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 50px;
    padding: 50px;
    box-sizing: border-box;
}
/*
.grid-item {
    border: 0px solid #000; /* Stile del bordo 
    padding: 30px; /* Spazio interno
    box-sizing: border-box; /* Include il bordo nel calcolo delle dimensioni 
    display: flex;
    justify-content: center; /* Centra il contenuto orizzontalmente
    align-items: center; /* Centra il contenuto verticalmente
    background-color: gold;
    border-radius: 10px;
	font-size: 25px;
}
*/


.grid-item-testo-valore-internazionale {
    border: 0px; /* Stile del bordo */
    padding: 50px; /* Spazio interno */
    box-sizing: border-box; /* Include il bordo nel calcolo delle dimensioni */
    display: flex;
    justify-content: center; /* Centra il contenuto orizzontalmente */
    align-items: center; /* Centra il contenuto verticalmente */
    font-family: Arial, sans-serif; /* Esempio di selezione di un nuovo tipo di carattere */
    font-size: 50px; /* Imposta la dimensione del carattere */
    font-weight: bold; /* Imposta la grassetto */
    background-color: gold;
}

.grid-item-testi {
    border: 0px; /* Stile del bordo */
    padding: 0px; /* Spazio interno */
    box-sizing: border-box; /* Include il bordo nel calcolo delle dimensioni */
    display: flex;
    justify-content: center; /* Centra il contenuto orizzontalmente */
    align-items: center; /* Centra il contenuto verticalmente */
    font-family: Arial, sans-serif; /* Esempio di selezione di un nuovo tipo di carattere */
    font-size: 20px; /* Imposta la dimensione del carattere */
    font-weight: bold; /* Imposta la grassetto */
    background-color: gold;
}


.container {
    display: grid;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px;
    grid-gap: 5px; /* Spazio tra le colonne e le righe */
    justify-items: center; /* Centra il contenuto orizzontalmente */
    align-items: center; /* Centra il contenuto verticalmente */
    box-sizing: border-box;
}

.grid-item-label {
    display: flex;
    padding: 10px 20px;
    min-width: 200px;
    max-width: 400px;
    margin: auto;
    box-sizing: border-box;
    font-size: 25px;
    border: 0px solid #000;
    justify-content: center;
    align-items: center;
    background-color: gold;
    border-radius: 10px;
}

.grid-item-no-edge-down {
    display: flex;
    border: 0px solid #000;
    padding: 30px;
    box-sizing: border-box;
    font-size: 25px;
    justify-content: center;
    align-items: center;
    background-color: gold;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;    
}

.grid-item-no-edge-up {
    display: flex;
    border: 0px solid #000;
    padding: 30px;
    box-sizing: border-box;
    font-size: 25px;
    justify-content: center;
    align-items: center;
    background-color: gold;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;    
}

.trasparente {
    background-color: transparent !important;
}

/* Stile per la griglia */
.riga {
    width: 100%; /* Estendi la larghezza al massimo dello schermo */
    display: flex; /* Usa un layout flessibile per allineare gli elementi */
    justify-content: center; /* Centra gli elementi orizzontalmente */
}


[class*='colonna-'] {
    flex: 1;
}

/* Stile per il titolo */
.titolo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}