.container-contatti{
	width: 80vw;
	left: 10vw;
	margin:0 auto;
	padding-top: 50px;
  text-align: center;
}


.container-contatti p{
  text-align: center;
  margin: 0 auto;
}

.contenitore_trattamento_dati{
	padding-bottom: 10px;
}

.contenitore_trattamento_dati > label{
	font-size: 0.7em !important;
}



.regioni-box{
	float: left;
	width: 50%;
}
.scrivi{
	margin:0 auto;
	width: 30vw;
  padding-top: 10px;
}
.input-container {
  position: relative;
  margin-bottom: 20px;
}

.input-container input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #999;
  border-radius: 5px;
  outline: none;
  background: transparent;
  resize: none;
  min-height: 25px;
  font-family: Outfit;
  font-weight: 100;
  color: #99999;
}


.input-container label {
  position: absolute;
  left: 10px;
  top: 35%;
  transform: translateY(-15%);
  font-size: 16px;
  color: #999;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  background: white;
  padding: 0 5px;
}

label{
	color: #999!important;
}

/* Effetto flottante input */
.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
  top: -10px;
  font-size: 12px;
  color: #999;
}

.input-container-ta {
  position: relative;
  margin-bottom: 20px;
}

select{
  margin-bottom: 20px;
}

.input-container-ta textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #999;
  border-radius: 5px;
  outline: none;
  background: transparent;
  resize: none;
  min-height: 80px;
  font-family: Outfit;
  font-weight: 100;
  color: #99999;
  margin-top: 0;
}

/* Label per textarea */
.input-container-ta label {
  position: absolute;
  left: 10px;
  top: 35%;
  transform: translateY(-15%);
  font-size: 16px;
  color: #999;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  background: white;
  padding: 0 5px;
}

/* Effetto flottante attivo sulla textarea */
.input-container-ta textarea:focus + label,
.input-container-ta textarea:not(:placeholder-shown) + label {
  top: -10px;
  font-size: 12px;
  color: #999;
}

.custom-select {
   width: 100%;
  display: inline-block;
  padding-bottom: 20px;
}

.custom-select select {
  appearance: none; /* Nasconde lo stile predefinito */
  width: calc(100% + 23px);
  padding: 12px;
  font-size: 16px;
  border: 1px solid #999;
  border-radius: 5px;
  background: white;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  font-family: Outfit;
      font-weight: 100;
}

/* Effetto al passaggio del mouse */
.custom-select select:hover {
  border-color: #999;
}

/* Effetto quando si clicca */
.custom-select select:focus {
  border-color: #999;
}

/* Aggiungiamo l'icona freccia */
.custom-select::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #999;
  pointer-events: none;
  transition: all 0.3s ease-in-out;
}

/* Quando la select è attiva, ruotiamo la freccia */
.custom-select select:focus + ::after {
  transform: translateY(-50%) rotate(180deg);
}


.checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.custom-checkbox {
    display: none; /* Nasconde la checkbox standard */
}

.custom-checkbox + label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 16px;
    color: black !important;
    position: relative;
    padding-left: 30px;
    transition: color 0.3s ease;
    font-family: Outfit;
      font-weight: 200;
      padding-right: 10px;
}

/* Creazione dell'elemento visivo della checkbox */
.custom-checkbox + label::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #999;
    background: transparent;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Effetto quando la checkbox è selezionata */
.custom-checkbox:checked + label::before {
    background: white;
    border: 2px solid #BF2B2A;
}

/* Icona del checkmark */
.custom-checkbox:checked + label::after {
    content: "✔";
    font-size: 14px;
    color: #BF2B2A;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.3s;
}



@media screen and (max-width: 800px) {
  .scrivi{
    width: 80vw !important;
    text-align: left !important;
  }

  .input-container{
    left: -2vw;
  }

  .custom-select{
    left: -2vw;
    position: relative;
  }

  
}