hr.solid {
	border-top: 3px solid #bbb;
}
.stepperindicator{
	padding-left: 18px;
    padding-right: 18px;
    padding-top: 9px;
    padding-bottom: 9px;
    border-radius: 40px;
    background: dimgrey;
    color:white;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.stepperindicatorActive{
	background:#0d99ff;
}
.containerwow {
    display: flex;
    
}
.center {
    align-items: center;

}

.start {
    align-items: left;

}
.end {
    align-items: right;

}

.cards {
 
display: grid;
 
grid-template-columns: repeat(3, 1fr);
 
grid-auto-rows: auto;
 
grid-gap: 1rem;
 
}

.expand{
	flex-grow: 1;
}

.shrink{
	flex-grow: 0;
}
 

 
.carditem {
 
border: 2px solid #e7e7e7;
 
border-radius: 4px;
 
padding: .5rem;
 
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}



.tooltip:hover .tooltiptext {
  visibility: visible;
}

.verticallayout {
	display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
}

.horizontallayout{
    display: flex;
    box-sizing: border-box;
}

.withpadding{
    padding: 16px 16px 16px 16px;
}
.withpaddingtop{
    padding-top: 16px;
}
.withpaddingbottom{
    padding-bottom: 16px;
}
.withpaddingleft{
    padding-left: 16px;
}
.withpaddingright{
    padding-right: 16px;
}
.withmargintop{
    margin-top: 16px;
}
.withmarginbottom{
    margin-bottom: 16px;
}
.withmarginleft{
    margin-left: 16px;
}
.withmarginright{
    margin-right: 16px;
}

.reportInputField{
    border-block-color: grey;
    border-style: solid;
}

.withtextalignstart{
    text-align:start;
}
.withtextalignend{
    text-align:end;
}
.withtextaligncenter{
    text-align: center;
}

@media (min-width: 768px) {
    .column-login {
       width:85%;
    }
}

.box-animate {
    position: absolute;
    font-size: 4em;
    transition: all 0.5s ease-in-out;
    opacity: 0;
    z-index: 10;
}

.box-animate.hidden {
    display: none;
}

/* Stato 'in': lo scatolo piomba nel carrello */
.box-animate.in {
    top: 50%; /* Posizione finale dell'animazione: al centro del carrello */
    opacity: 1;
    transition: top 0.5s ease-in, opacity 0.5s ease-in;
}

/* Stato 'out': lo scatolo esce dal carrello verso l'alto */
.box-animate.out {
    top: -100px; /* Posizione finale: di nuovo fuori dallo schermo */
    opacity: 0;
    transition: top 0.5s ease-out, opacity 0.5s ease-out;
}

@media (max-width: 767px) {
  .horizontallayout {
    flex-direction: column;
  }

  /* Se necessario, aggiungi qui altri stili specifici per mobile,
     come margini o allineamenti diversi */
  .column-xs {
    /* Esempio: aggiungi un po' di spazio tra gli elementi */
    margin-bottom: 15px; 
  }
  .withmarginleft {
        margin-left: 0 !important;
        /* Usa !important solo se necessario per sovrascrivere un'altra regola più specifica.
           Se non hai regole molto specifiche, puoi anche rimuoverlo. */
        margin-top: 10px; /* Aggiunge un po' di spazio sopra per separare gli elementi in colonna */
    }

  /* Nascondi le intestazioni delle colonne (th) */
    .table thead th:nth-child(2), /* NOME COGNOME */
    .table thead th:nth-child(4), /* EMAIL */
    .table thead th:nth-child(6), /* TOT.PEZZI */
    .table thead th:nth-child(7), /* IMPORTO */
    .table thead th:nth-child(8), /* PAGATO */
    .table thead th:nth-child(9)  /* CODICE SPED. */
    {
        display: none;
    }

    /* Nascondi le celle del corpo (td) corrispondenti */
    .table tbody td:nth-child(2), /* NOME COGNOME */
    .table tbody td:nth-child(4), /* EMAIL */
    .table tbody td:nth-child(6), /* TOT.PEZZI */
    .table tbody td:nth-child(7), /* IMPORTO */
    .table tbody td:nth-child(8), /* PAGATO */
    .table tbody td:nth-child(9)  /* CODICE SPED. */
    {
        display: none;
    }
    
    .hr-mobile-hide {
    	display: none;
    }

}
@media (max-width: 768px) {
    #container_cuoco {
        display: none;
    }
}

/* Seleziona tutte le celle della colonna 'Azioni' */
#tableBody tr td:last-child {
    /* Imposta l'allineamento verticale per tutti i contenuti della cella.
       Questo forza il browser a centrare il div.azioni-container. */
    vertical-align: middle;
    
    /* Importante: Imposta l'altezza su 100% per assicurarti che la cella 
       occupi l'intera altezza della riga calcolata. */
    height: 100%;
    
    /* Opzionale: Garantisce che non ci siano padding in eccesso che spingono il contenuto. */
    padding-top: 0;
    padding-bottom: 0;
}

/* Rimuovi eventuali margini predefiniti che potrebbero causare problemi di allineamento */
#tableBody td:last-child .btn {
    margin: 0 2px; /* Aggiunge un piccolo spazio tra i pulsanti */
}
/* Seleziona il contenitore dei pulsanti */
.azioni-container {
    display: flex;
    /* Assicura che gli elementi non vadano a capo */
    flex-wrap: nowrap;
    /* Opzionale: Allinea i pulsanti al centro verticalmente all'interno del div */
    align-items: center; 
    /* Occupare tutto lo spazio orizzontale della cella (se necessario) */
    width: 100%; 
}

/* Aggiunge un piccolo spazio tra i pulsanti */
.azioni-container .btn {
    margin: 0 2px;
}

/* Stile del pulsante WhatsApp (come quello nell'immagine) */
.whatsapp-button {
            display: inline-flex; /* Permette di allineare icona e testo */
            align-items: center;
            padding: 12px 25px; /* Spaziatura interna leggermente aumentata */
            background-color: #25D366; /* Verde WhatsApp */
            color: white;
            text-decoration: none;
            /* Rende il pulsante più tondo, seguendo lo stile della tua immagine */
            border-radius: 30px; 
            font-family: sans-serif;
            font-weight: bold;
            font-size: 16px;
            /* Ombra leggera per dargli profondità */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
            transition: background-color 0.3s;
}
        
.whatsapp-button:hover {
            background-color: #128C7E; /* Verde più scuro all'hover */
}
        
/* Stile per l'icona di WhatsApp */
.whatsapp-icon {
            margin-right: 10px; /* Spazio tra l'icona e il testo */
            font-size: 1.2em;
}

/* Stile per replicare il pulsante 'Contattaci' */
.contattaci-button {
            display: inline-flex;
            align-items: center;
            padding: 12px 25px;
            background-color: #e88029; /* Arancione simile alla tua immagine */
            color: white;
            border-radius: 30px;
            font-family: sans-serif;
            font-weight: bold;
            font-size: 16px;
            text-decoration: none;
 }
.contattaci-icon {
            margin-left: 10px;
            font-size: 1.2em;
}