.headerclass {
    display: flex; /* Abilita Flexbox */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente, se necessario */
    padding: 2px; /* Aggiunge spazio attorno all'header */
}

.container{
	margin-bottom: 110px;
	}

.headerclass img {
	
    max-height: 80px; /* Assicura che l'immagine non superi la larghezza del contesto */
    width: auto; /* Mantiene le proporzioni dell'immagine */
}

.mainclass{
	 display: flex; /* Abilita Flexbox */
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente, se necessario */
    margin: 7px;
}
/*
.mainclass div{

    padding: 0px 0px 
}
*/
.iconCircle{
	background-color:#FFF;
	border-radius:50%;
	}

.footerclass {
	z-index: 1011;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw; /* Usa 100% se preferisci */
    height: 110px; 
    background-color: rgba(255, 0, 0, 0.99);
    display: flex; /* Abilita Flexbox */
    flex-direction: column; /* Distribuisce i contenuti in colonna */
    align-items: center; /* Centra verticalmente */
}

.nascosto {display:hidden !important;}

#tendina {
	display:block;
	position:absolute;
	top:0;
	left: 0;
	width:100%;
	height:0;
	padding: 4px 0 0 0 ;
	    transition: max-height 0.5s ease-out; /* Per l'animazione */
    transition: top 0.1s ease-out; /* Per l'animazione */
    overflow: hidden; /* Nasconde il contenuto in eccesso */
    max-height: 0; /* Inizialmente il div è nascosto */
}
#contenutotendina{
	padding: 7px 7px;
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	position:relative;
	background: linear-gradient(180deg, rgba(240,240,240,0.5) 0%, rgba(231,231,231,0.5) 100%);
	backdrop-filter: blur(10px);
	border-radius: 7px 7px 0 0 ;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    margin:0 auto;
    width:240px;
    height:100%;
	}

#tendina.show {
    max-height: 320px; /* Imposta un'altezza massima quando è aperto */
    height:320px;
    top:-320px;
}
#tendinautente {
	display:block;
	position:absolute;
	top:0;
	left: 0;
	width:100%;
	height:0;
	padding: 4px 0 0 0 ;
	    transition: max-height 0.5s ease-out; /* Per l'animazione */
    transition: top 0.1s ease-out; /* Per l'animazione */
    overflow: hidden; /* Nasconde il contenuto in eccesso */
    max-height: 0; /* Inizialmente il div è nascosto */
}
#contenutotendinautente{
	padding: 7px 7px;
	display:flex;
	flex-wrap:wrap;
	gap:4px;
	position:relative;
	background: linear-gradient(180deg, rgba(240,240,240,0.5) 0%, rgba(231,231,231,0.5) 100%);
	backdrop-filter: blur(10px);
	border-radius: 7px 7px 0 0 ;
	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
    margin:0 auto;
    width:240px;
    height:100%;
	}

#tendinautente.show {
    max-height: 320px; /* Imposta un'altezza massima quando è aperto */
    height:320px;
    top:-320px;
}

.menu-item {
    display: flex; /* Imposta il contenitore come un flexbox */
    align-items: center; /* Centra verticalmente gli elementi */
    padding: 4px; /* Padding per il contorno */
    text-align: left; /* Allinea il testo a sinistra */
    width: 100%; /* Larghezza al 100% */
    font-size: 30px; /* Dimensione del font */
    line-height: 40px; /* Altezza della linea */
    color: black; /* Colore del testo */
    background-color: rgba(0,0,0,0.1); /* Colore di sfondo */
    cursor: pointer; /* Cambia il cursore quando passa sopra */
    
}

.menu-item:hover {
	background-color: rgba(0,0,0,0.8);
	}

.menu-item i {
    margin-right: 10px; /* Margine a destra per distanziare l'icona dal testo */
}

.icon-container p {
    display: flex; /* Abilita Flexbox per le icone */
    justify-content: space-around; /* Distribuisce gli elementi equidistanti con spazio attorno */
    align-items: center; /* Allinea verticalmente le icone */
    margin: 0px; /* Rimuove il margine predefinito del paragrafo */
    margin-top: 7px;
    padding: 10px 20px; /* Aggiunge un padding orizzontale di 10px per le icone */
    width: 100%; /* Fa sì che il paragrafo occupi l'intera larghezza */
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 21px;
   
}

.footerclass a {
    text-align: center; /* Centra il contenuto all'interno dell'elemento di ancoraggio */
    flex: 0; /* Rimuove la flessibilità, permettendo di occupare solo lo spazio necessario */
    margin: 0 14px; /* Distanza orizzontale tra le icone */
    
}

.footerclass a:first-child {
    margin-left: 7px; /* Distanza iniziale a sinistra */
}

.footerclass a:last-child {
    margin-right: 7px; /* Distanza finale a destra */
}

.copyright-container {
    text-align: center; /* Centra il testo del paragrafo di copyright */
    margin-top: 5px; /* Margine superiore per distanziare dal paragrafo delle icone */
    color: white; /* Cambia il colore del testo, se necessario */
    padding: 0 10px; /* Aggiungi padding orizzontale se desiderato */
}
/* horizontal scroll */
.hscrollcontainer {
    position: relative; /* Mantieni la posizione relativa */
    width: 100%; /* Per far coprire l'intero container */
    height: 270px; /* Imposta una altezza fissa per il contenitore di scroll */
    overflow-x: hidden; /* Abilita lo scroll orizzontale */
    overflow-y: hidden;
    white-space: nowrap; /* Mantiene i contenuti su una singola riga */
    border: 0px solid #73AD21;
    padding: 0px;
}
.child {
	 position: relative; /* Necessario per il posizionamento dell'etichetta */
    display: inline-block; /* Mostra come un blocco per mantenere i contenuti su una riga */
    margin: 0.5em; /* Margine tra gli elementi */
    padding: 2em; /* Margine interno per i contenuti */
    width: 300px; /* Larghezza fissa per ogni elemento */
    height: 250px; /* Altezza fissa per ogni elemento */
    border: 1px solid #dedede;
    border-radius: 7px;
    white-space: normal; 
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    text-align: center; /* Centra il testo */
    overflow: hidden; /* Nasconde l'eventuale overflow dell'immagine */
    
     /* Aggiungi queste righe per l'immagine di sfondo */
     
    /* background-image: url('http://local.tractoraffair.com/articoli/1629316968bae996/medium/1.jpg');  */
     background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
        
}

.imgCover{
	 background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 

	}

.child h3 {
	margin: 0 ;
	position: absolute; /* Posizionamento assoluto */
	left:0;
	top:0;
            width: 100%; /* Assicura che l'intestazione occupi l'intera larghezza del div */
            background-color: rgba(255, 0, 0, 0.7); /* Colore di sfondo semi-trasparente */
            margin: 0; /* Rimuovi margine per evitare spazi indesiderati */
            padding: 7px; /* Aggiungi padding per una migliore leggibilità */
            font-size: clamp(12px, 2vw, 18px); /* Ridimensiona il testo con dimensione minima di 12px */
            color: #FFFFFF;
        }
       
        
.labello1 {
	white-space: nowrap;
	overflow: hidden;
	background-color: rgba(122, 191, 126, 0.7); /* Colore di sfondo semi-trasparente */
		border-radius: 7px;
		padding: 0 4px; /* Padding: 4px in alto e in basso, 4px a destra e sinistra */
    position: absolute; /* Posizionamento assoluto */
    bottom: 63px; /* 7px dal fondo */
    left: 7px; /* 7px dal margine destro */
    max-width: 220px; /* Larghezza dell'etichetta */
    height: 25px; /* Altezza dell'etichetta */
     /* Sfondo rosso */
    color: white; /* Colore del testo bianco */
    display: flex; /* Abilita Flexbox per centrare il testo */
    align-items: center; /* Centra verticalmente il testo */
    justify-content: center; /* Centra orizzontalmente il testo */
    font-size: 14px; /* Dimensione del font, puoi cambiarlo come desideri */
    font-weight: bold;
}
.labello2 {
	white-space: nowrap;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.7); /* Colore di sfondo semi-trasparente */
		border-radius: 7px;
		padding: 0 4px; /* Padding: 4px in alto e in basso, 4px a destra e sinistra */
    position: absolute; /* Posizionamento assoluto */
    bottom: 35px; /* 7px dal fondo */
    left: 7px; /* 7px dal margine destro */
    max-width: 220px; /* Larghezza dell'etichetta */
    height: 25px; /* Altezza dell'etichetta */
     /* Sfondo rosso */
    color: white; /* Colore del testo bianco */
    display: flex; /* Abilita Flexbox per centrare il testo */
    align-items: center; /* Centra verticalmente il testo */
    justify-content: center; /* Centra orizzontalmente il testo */
    font-size: 14px; /* Dimensione del font, puoi cambiarlo come desideri */
    font-weight: bold;
}

.labello3 {
	white-space: nowrap;
	overflow: hidden;
	background-color: rgba(255, 0, 0, 0.7); /* Colore di sfondo semi-trasparente */
		border-radius: 7px;
		padding: 0 4px; /* Padding: 4px in alto e in basso, 4px a destra e sinistra */
    position: absolute; /* Posizionamento assoluto */
    bottom: 7px; /* 7px dal fondo */
    left: 7px; /* 7px dal margine destro */
    max-width: 220px; /* Larghezza dell'etichetta */
    height: 25px; /* Altezza dell'etichetta */
     /* Sfondo rosso */
    color: white; /* Colore del testo bianco */
    display: flex; /* Abilita Flexbox per centrare il testo */
    align-items: center; /* Centra verticalmente il testo */
    justify-content: center; /* Centra orizzontalmente il testo */
    font-size: 14px; /* Dimensione del font, puoi cambiarlo come desideri */
    font-weight: bold;
}

.labellospan {
    padding: 0px 4px; /* Padding a destra e sinistra */
}

.newlabel {
	background-color: rgba(231, 237, 104, 0.99); /* Colore di sfondo semi-trasparente */
		border-radius: 7px;
		padding: 0 4px; /* Padding: 4px in alto e in basso, 4px a destra e sinistra */
    position: absolute; /* Posizionamento assoluto */
    bottom: 7px; /* 7px dal fondo */
    right: 7px; /* 7px dal margine destro */
    max-width: 60px; /* Larghezza dell'etichetta */
    height: 25px; /* Altezza dell'etichetta */
     /* Sfondo rosso */
    color: #000; /* Colore del testo bianco */
    display: flex; /* Abilita Flexbox per centrare il testo */
    align-items: center; /* Centra verticalmente il testo */
    justify-content: center; /* Centra orizzontalmente il testo */
    font-size: 12px; /* Dimensione del font, puoi cambiarlo come desideri */
    font-weight: bold;
}

.photolabel{
	background-color: rgba(100, 100, 100, 0.99); /* Colore di sfondo semi-trasparente */
		border-radius: 7px;
		padding: 0 0px; /* Padding: 4px in alto e in basso, 4px a destra e sinistra */
    position: absolute; /* Posizionamento assoluto */
    top: 7px; /* 7px dal fondo */
    left: 7px; /* 7px dal margine destro */
    max-width: 60px; /* Larghezza dell'etichetta */
    height: 25px; /* Altezza dell'etichetta */
     /* Sfondo rosso */
    color: #FFF; /* Colore del testo bianco */
    display: flex; /* Abilita Flexbox per centrare il testo */
    align-items: center; /* Centra verticalmente il testo */
    justify-content: center; /* Centra orizzontalmente il testo */
    font-size: 12px; /* Dimensione del font, puoi cambiarlo come desideri */
    font-weight: bold;

}
.locationclass{
	color: #000;
	font-size: 18px; /* Dimensione del font, puoi cambiarlo come desideri */
    font-weight: bold;
    text-align: left;
    background-color: rgba(245, 245, 245, 0.99);
	border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
	padding: 4px 7px;
	}
	/*
.locationclass span{
	background-color: rgba(245, 245, 245, 0.99);
	border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
	padding: 4px 7px;
	}
*/
.prezzoclass{
	color: #de0000;
	font-size: 28px; /* Dimensione del font, puoi cambiarlo come desideri */
    font-weight: bold;
    text-align: right;
    
	}
.prezzoclass span{
	background-color: rgba(245, 245, 245, 0.99);
	border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
	padding: 4px 7px;
	}
.col50 {
	width:49%;
	display: inline-block;
	}
.flagmed { width: 30px; height: 22.5px; 
	display: inline-block;  vertical-align: middle; /* Allinea verticalmente al centro */
    margin-right: 5px; /* Spazio a destra per distanziare il testo dal flag */
    
    }
    .locationtxt{
	    font-size: 18px;
	    color: #155d94;
	    }
	 .tagclass{
		 font-size: 12px;
	    color: #155d94;

		 }
		 
    
.bluetto {
	   color: #155d94;
	    }
.rosso{
	color: #DE0000;
	}
.toniscuri{
	color: rgba(0, 0, 0, 0.45);
	}
.verde{
	color: rgba(113, 191, 114, 0.99);
	}
.bianco{
	color: rgba(255, 255, 255, 0.99);
	}

.giallo{
	color: rgba(235, 198, 52, 1.0);
	}

.dettagli{
	margin: 10px 10px;
	width:98%;
	text-align : right;
	}
.dettagli span{
	margin-right: 7px;
	/* background-color: rgba(231, 237, 104, 0.99); */
	background-color: rgba(245, 245, 245, 0.99);
	color: #de0000;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
	padding: 4px 7px;
	border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	font-size: 28px;
	font-weight: bold;
	}	

.iconContact {
	margin-top:7px;
	background-color: rgba(245, 245, 245, 0.99);
	color: #de0000;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
	padding: 4px 7px;
	border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	font-size: 21px;
	font-weight: bold;
	}	

/* contenuto centrale */
.rigaAnnunci {
	display: flex;
	flex-direction: row; 
	}
.spaziatore {
	display: block;
	width:90%;
	height: 7px;
	padding: 1px 0;
	background-color: rgba(113, 191, 114, 0.99);
	margin: 15px 0 20px 0;
	border-radius:3px
	}
.spaziatoreGrey {
	display: block;
	width:100% ;
	height: 1px;
	padding: 1px 0;
	background-color: #EFEFEF;
	margin: 2px 0 2px 0;
	}


.fotosin {
	cursor: pointer;
	 position: relative; /* Necessario per il posizionamento dell'etichetta */
    display: inline-block; /* Mostra come un blocco per mantenere i contenuti su una riga */
    margin: 0 auto ; /* Margine tra gli elementi */
    padding: 2em; /* Margine interno per i contenuti */
 
    width: 300px;
    
        
    min-height: 250px; /* Altezza fissa per ogni elemento */
    border: 1px solid #dedede;
    border-radius: 7px;
    white-space: normal; 
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    text-align: center; /* Centra il testo */
    /* overflow: hidden; */ /* Nasconde l'eventuale overflow dell'immagine */
    
     /* Aggiungi queste righe per l'immagine di sfondo */
     background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
        
}

.fotosin h3 {
	margin: 0 ;
	position: absolute; /* Posizionamento assoluto */
	left:0;
	top:0;
            width: 100%; /* Assicura che l'intestazione occupi l'intera larghezza del div */
            background-color: rgba(255, 0, 0, 0.7); /* Colore di sfondo semi-trasparente */
            margin: 0; /* Rimuovi margine per evitare spazi indesiderati */
            padding: 7px; /* Aggiungi padding per una migliore leggibilità */
            font-size: clamp(12px, 2vw, 18px); /* Ridimensiona il testo con dimensione minima di 12px */
            color: #FFFFFF;
        }


.descrbox{
	min-width: calc(100% - 313px);
	
    display: inline-block;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 7px;
	box-shadow: 3px 3px 6px rgba(80, 80, 80, 0.1);
	overflow: hidden;
	margin: 0px 4px;
	padding: 0px;
	min-height: 250px
	}

.descrbox h3{
	margin: 0 ;
	padding: 0;
	 position: relative;  /* Posizionamento assoluto */
      left : 0;
      top: 0;
            width: 100%; /* Assicura che l'intestazione occupi l'intera larghezza del div */
            background-color: rgba(0, 0, 0, 0.05); /* Colore di sfondo semi-trasparente */
            margin-bottom: 10px;  /* Rimuovi margine per evitare spazi indesiderati */
            padding: 7px; /* Aggiungi padding per una migliore leggibilità */
            font-size: clamp(14px, 2vw, 24px); /* Ridimensiona il testo con dimensione minima di 12px */
            color: #000;
            font-weight: bold
	}

.descrbox p {
	display: inline;  /* Posizionamento assoluto */
margin: 40px 0 0; /* Imposta margine superiore a 10px, non ci sono margini inferiori */
    padding: 0; /* Rimuovi padding se non necessario */
	}


.searchbar input[type=text] {
  padding: 15px;
  font-size: 21px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}
.searchbar button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 21px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}


.progressRidotto{max-width: 45% }

.input-container {
    position: relative;
}

.input-container input {
    padding-right: 30px; /* Aggiungi spazio per l'icona */
}

.input-container i {
    position: absolute;
    top: 50%;
    right: 10px; /* Distanza dal bordo destro */
    transform: translateY(-50%); /* Centrare verticalmente */
}

.txtRosso{ color: #FF0000 !important; }

.shadowRed {box-shadow: 0 0 5px red !important; /* Ombra rossa */}

.errori{
	border:solid 2px #FF0000 !important;
	color: #FF0000 !important;
	}

.errori[autocomplete="one-time-code"] {
	background-image: linear-gradient(#fff, #fff),
    url("../images/red-rounded-rectangle.svg") !important;
    border:none !important;
	}

[autocomplete="one-time-code"] {
  --magic-number: 50px;

  background-image: linear-gradient(#fff, #fff),
    url("../images/rounded-rectangle.svg");
  background-size: var(--magic-number);
  background-position-x: right, left;
  background-repeat: no-repeat, repeat-x;
  border: 0;
  height: var(--magic-number);
  width: calc(6 * var(--magic-number));
  font-size: calc(0.6 * var(--magic-number));
  font-family: monospace;
  letter-spacing: calc(0.64 * var(--magic-number));
  padding-inline-start: calc(0.3 * var(--magic-number));
  box-sizing: border-box;
  overflow: hidden;
  transform: translatex(calc(0.5 * var(--magic-number)));
}
[autocomplete="one-time-code"]:focus {
  outline: none;
  background-image: linear-gradient(#fff, #fff),
    url("../images/blue-rounded-rectangle.svg");
  background-size: var(--magic-number);
  background-position-x: right, left;
  background-repeat: no-repeat, repeat-x;
}

.hideShowPassword-toggle {
	background-color: transparent;
	background-image: url('../images/wink.png'); /* fallback */
	background-image: url('../images/wink.svg'), none;
	background-position: 0 center;
	background-repeat: no-repeat;
	border: 2px solid transparent;
	border-radius: 0.25em;
	cursor: pointer;
	font-size: 100%;
	height: 44px;
	margin: 0;
	max-height: 100%;
	padding: 0;
	overflow: 'hidden';
	text-indent: -999em;
	width: 46px; /*
	-moz-appearance: none;
	-webkit-appearance: none;  */
}
.hideShowPassword-toggle-hide {
  	background-position: -44px center;
}
.my4bottom{
  margin-bottom: 4px !important;
  }

/* --------- USER LOGIN --------------- */
.txtsmallbold{
	font-size:10px !important;
	font-weight:bold !important;
   text-transform: uppercase;
	}
/* --------- Search Filter --------------- */
.select-dropdown,
.select-dropdown * {
  margin: 0;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
.select-dropdown {
  position: relative;
  background-color: #E6E6E6;
  border-radius: 4px;
}
.select-dropdown select {
  font-size: 1rem;
  font-weight: normal;
  max-width: 100%;
  padding: 4px 24px 4px 10px;
  border: none;
  background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
  appearance: none;
}
.select-dropdown select:active, .select-dropdown select:focus {
  outline: none;
  box-shadow: none;
}
.select-dropdown:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-top: 5px solid #aaa;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
}


.filtro {
	background-color:#FFF;
	margin: 7px 2px;
	padding: 14px 14px;
	border: 1px solid #aaa; 
    border-radius: 7px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 70px;
    height: 60px;
    display:flex;
    opacity: 70%;
    position:relative;
	}
	.filtro:hover{
		cursor:pointer;
		}
.filtroattivo {
	border: 1px solid #27b348;
	opacity: 100%;

	}
.filtro i {
    display:none;
  }
.filtroattivo i {
    display:flex;
    color: #27b348; /* Apply color */
    font-size:18px;
    position:absolute;
    top: -7px;
    right: -7px;
}
.sticky-filter {
    position: -webkit-sticky; /* Per Safari */
    position: sticky;
    top: 0; /* Posizione fissa dal top */
    z-index: 1000; /* Per assicurarti che si trovi sopra altro contenuto */
    /* background-color: rgba(240, 240, 240, 0.95); */ /* Stile di sfondo */
    background: rgb(240,240, 240);
	background: linear-gradient(180deg, rgba(240,240,240,0.5) 0%, rgba(231,231,231,0.5) 100%);
	backdrop-filter: blur(10px);
    margin: 0 0 10px 0;
    min-height:40px;
    border-radius: 14px;
    transition: all 0.3s ease; /* transizione dolce */
}
.sticky-filter.is-sticky {
    /* background-color: rgba(240, 0, 0, 0.7); */ /* Cambia il colore, ad esempio */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Aggiungi un'ombra quando sticky */
    border-radius:0 0 7px 7px !important;
    position: fixed;
    top: 0; /* Posizione fissa dal top */
    left:0;
}

.dashcardtitle{
color: #fff !important;
padding: 7px 7px;
font-size: 20px; 
font-weight: bold; 
color: #333; 
margin: 0 0 7px 0;
background-color: rgba(0, 89, 127, 0.955);
}

.dashboardcontainer {
    display: flex;
    flex-wrap: wrap; /* Per permettere alle card di andare su più righe */
    justify-content: space-between; 
    align-items: flex-start; 
}

.dashboardcard {
  
    margin: 7px;
    padding: 7px;
    background-color: #FFF;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    min-width: 340px;
    flex: 1; /* Permette alla card di espandersi per riempire lo spazio */
    /* max-width: calc(33.33% - 14px); Riserva spazio per margini */
}
/* Media query per schermi piccoli */
@media (max-width: 768px) {
    .dashboardcontainer {
        flex-direction: column; /* Cambia la direzione per i piccoli schermi */
        align-items: stretch; /* Le card si allungano per riempire lo spazio */
    }

    .dasboardcard {
        max-width: 100%; /* La card occupa tutta la larghezza disponibile */
    }
}
/* 
 array("id"=>"001","cat"=>"farm-tractors"),
		     array("id"=>"002","cat"=>"frutteto"),
		     array("id"=>"003","cat"=>"vigneto"),
		     array("id"=>"004","cat"=>"trattori-cingolati"),
		     array("id"=>"005","cat"=>"tractor-tosaerba"),
		     array("id"=>"006","cat"=>"rimorchi-agricoli"),
		     array("id"=>"007","cat"=>"farm-attachments"),
		     array("id"=>"008","cat"=>"macchine-agricole"),
		     array("id"=>"009","cat"=>"farm-attachments"),
		     array("id"=>"010","cat"=>"spare-parts")

*/
.farm-tractors{
	background-image: url('../images/body-types/farm-tractors.png');
	}
.frutteto{
	background-image: url('../images/body-types/frutteto.png');
	}
.trattori-cingolati{
	background-image: url('../images/body-types/trattori-cingolati.png');
	}
.vigneto{
	background-image: url('../images/body-types/vigneto.png');
	}
.tractor-tosaerba{
	background-image: url('../images/body-types/tractor-tosaerba.png');
	}
.rimorchi-agricoli{
	background-image: url('../images/body-types/rimorchi-agricoli.png');
	}
.farm-attachments{
	background-image: url('../images/body-types/farm-attachments.png');
	}
.macchine-agricole{
	background-image: url('../images/body-types/macchine-agricole.png');
	}
.aratri{
	background-image: url('../images/body-types/aratri.png');
	}
.spare-parts{
	background-image: url('../images/body-types/spare-parts.png');
	}

  /* --- inserimento foto --- */
/* --- inserimento foto --- */
.image-preview {
    display: flex;
    flex-wrap: wrap;
}

.preview-item {
    position: relative;
    margin: 5px;
    display: inline-block;
    border: 2px solid transparent; /* Colore del bordo di default */
    transition: border-color 0.3s ease; /* Transizione per effetto di cambiamento bordo */
}

.preview-item.selected {
    border-color: rgb(0, 120, 38); /* Colore del bordo per la miniatura selezionata */
    border-radius: 7px;
    border-width: 7px;
    box-shadow: 0 0 5px rgba(0, 120, 38, 0.5); /* Aggiungi un'ombra per evidenziare la selezione */
}

.preview-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 5px;
}

.remove-image {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 1;
}
/* fine inserimento foto --- */
/* fine inserimento foto --- */

  .custom-select {
    position: relative;
    min-width: 300px; /* Larghezza del select */
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size:14px;
    font-weight:bold;
}

.selected-option {
    padding: 10px;
    background-color: #f9f9f9;
}

.options {
    display: none; /* Inizialmente nascosto */
    position: absolute;
    width: 100%;
    max-height: 200px; /* Altezza massima */
    overflow-y: auto; /* Scorrimento verticale */
    background-color: white;
    border: 1px solid #ccc;
    z-index: 1;
}

.option {
    display: flex;
    align-items: center;
    padding: 10px;
}

.option img {
    width: 60px; /* Larghezza dell'immagine */
    height: 60px; /* Altezza dell'immagine */
    margin-right: 10px; /* Spaziatura a destra */
}

.option:hover {
    background-color: #f0f0f0; /* Colore di evidenziazione */
}
  /* --------- input character count --------------- */
  .character-count {
    font-size: 12px; /* Dimensione del font */
    color: #555; /* Colore del testo */
    text-align: right; /* Allineamento a destra */
    margin-top: 5px; /* Margine superiore per distanziare */
}
  /* --------- input price euro --------------- */
.input-with-icon {
            position: relative;
            max-width: 190px;
            margin: 10px 0;
        }

        .input-with-icon input {
            width: 100%;
            padding: 10px 30px; /* Padding a destra per far spazio all'icona */
            box-sizing: border-box; /* Include il padding nella larghezza */
            font-size:large;
        }

        .input-with-icon i {
            position: absolute;
            left: 10px; /* Spaziatura dal lato sinistro */
            top: 50%; /* Centra verticalmente l'icona */
            transform: translateY(-50%); /* Centra verticalmente l'icona */
            pointer-events: none; /* L'icona non deve interferire con i clic sull'input */
            color: #999; /* Colore dell'icona */
        }
/* --------- SELLER GREEN --------------- */
.ribbon {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 101;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
/* ---------------------------- */
.ribbonBottom {
  position: absolute;
  right: -5px; bottom: -5px;
  z-index: 101;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonBottom span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  bottom: 19px; right: -21px;
}
.ribbonBottom span::before {
  content: "";
  position: absolute; left: 0px; bottom: 100%;
  z-index: -1;
  border-left: 3px solid #79A70A;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
.ribbonBottom span::after {
  content: "";
  position: absolute; right: 0px; bottom: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #79A70A;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #79A70A;
}
/* ---------------------------- */
.ribbonLeft {
  position: absolute;
  left: -5px; top: -5px;
  z-index: +1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonLeft span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}


.ribbonBottomLeft {
  position: absolute;
  left: -5px; bottom: -5px;
  z-index: +1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonBottomLeft span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#9BC90D 0%, #79A70A 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  bottom: 19px; left: -21px;
}


/* --------- TOP SELLER RED --------------- */


.ribbonred {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 101;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonred span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #a70a0a;
  background: linear-gradient(#c9330d 0%, #a70a0a 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbonred span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #a70a0a;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #a70a0a;
}
.ribbonred span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #a70a0a;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #a70a0a;
}
/* ---------------------------- */
.ribbonredBottom {
  position: absolute;
  right: -5px; bottom: -5px;
  z-index: 101;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonredBottom span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  width: 100px;
  display: block;
  background: #a70a0a;
  background: linear-gradient(#c9330d 0%, #a70a0a 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  bottom: 19px; right: -21px;
}
.ribbonredBottom span::before {
  content: "";
  position: absolute; left: 0px; bottom: 100%;
  z-index: -1;
  border-left: 3px solid #a70a0a;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #a70a0a;
}
.ribbonredBottom span::after {
  content: "";
  position: absolute; right: 0px; bottom: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #a70a0a;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #a70a0a;
}
/* ---------------------------- */
.ribbonredLeft {
  position: absolute;
  left: -5px; top: -5px;
  z-index: +1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonredLeft span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #a70a0a;
  background: linear-gradient(#c9330d 0%, #a70a0a 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}


.ribbonredBottomLeft {
  position: absolute;
  left: -5px; bottom: -5px;
  z-index: +1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbonredBottomLeft span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #a70a0a;
  background: linear-gradient(#c9330d 0%, #a70a0a 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  bottom: 19px; left: -21px;
}