.checkbox-column {
  text-align: center;
  padding: 5px;
  width: 1px;
  white-space: nowrap;
}

.sysdat-check-wrapper {
  display: flex;
  vertical-align: middle;
  /*padding-top: 5px;*/
  align-items: center; /* Centra verticalmente il sysdat-checkbox */
  cursor: pointer;
}

.sysdat-check-wrapper-table {
  display: flex;
  justify-content: center;
  vertical-align: middle;
  padding-top: 5px;
  align-items: center; /* Centra verticalmente il sysdat-checkbox */
  height: 100%; /* Assicurati che l'altezza sia sufficiente per il centraggio */
}


/* Nasconde il checkbox nativo */
.sysdat-check-wrapper input[type="checkbox"],
.sysdat-check-wrapper input[type="radio"] {
  display: none; /*Nasconde sia i checkbox che i radio */
}

/*
position: absolute e opacity: 0 per il checkbox nativo: 
Questo assicura che il checkbox nativo sia sempre cliccabile, ma non visibile. Il z-index lo porta "sopra" il sysdat checkbox per rilevare il click.
*/
/*
.sysdat-check-wrapper input[type="checkbox"],
.sysdat-check-wrapper input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1; Garantisce che l'input nativo rilevi il click
}
*/

/* Stile per il checkbox personalizzato */
.sysdat-check {
  width: 25px; /* Dimensione del checkbox */
  height: 25px;
  font-size: 15px; /* Grandezza del simbolo */
  background-color: #fff;
  border: 1px solid #6b6b6b6b;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
}

.sysdat-check-31 {
  width: 31px; 
  height: 31px;
  font-size: 20px; /* Grandezza del simbolo */
}

/* Aumenta il border-radius se è un radio */
.sysdat-check-wrapper input[type="radio"] + .sysdat-check {
  border-radius: 15px; /* Aumenta il border-radius per i radio */
}

/*
.sysdat-check-wrapper span {
  cursor: pointer; Cambia il cursore anche per lo span, non serve xcheè lo messo sul wrapper
}
*/

@media (max-width: 1024px) {
  .sysdat-check {
    width: 30px;  /* Dimensione del checkbox per schermi piccoli */
    height: 30px;
  }

  .sysdat-check-31 {
    width: 40px;  /* Dimensione del checkbox per schermi piccoli */
    height: 40px;
  }

  .checkbox-column{
    line-height: 3rem;
    min-height: 3rem;
    height: 3rem;
  }      
  
}

/* Stile per il checkbox quando selezionato */
.sysdat-check-wrapper input[type="checkbox"]:checked + .sysdat-check,
.sysdat-check-wrapper input[type="radio"]:checked + .sysdat-check {
  background-color: #007bff; /* Colore di sfondo per entrambi */
  border-color: #007bff; /* Colore del bordo per entrambi */
}

.sysdat-check-wrapper .sysdat-check.active {
  box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Sfumatura azzurrina */  
}

/* Per i checkbox non selezionati, rimuovi il box-shadow */
.sysdat-check-wrapper input[type="checkbox"]:not(:checked) + .sysdat-check,
.sysdat-check-wrapper input[type="radio"]:not(:checked) + .sysdat-check {
  box-shadow: none;
}

.sysdat-check:after {
  content: '\f00c'; /* Codice unicode per il simbolo check in Font Awesome */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgb(255, 255, 255);
  /*font-size: 15px; /* Grandezza del simbolo */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Icona per il radio */
.sysdat-check-wrapper input[type="radio"]:checked + .sysdat-check:after {
  content: '\f192'; /* Codice unicode per un'icona diversa (esempio: cerchio pieno) */
}

.sysdat-check-wrapper input[type="checkbox"]:checked + .sysdat-check:after,
.sysdat-check-wrapper input[type="radio"]:checked + .sysdat-check:after {
  opacity: 1; /* Rendi l'icona visibile quando il radio è selezionato */
}
.text-column {
  width: auto;
}

.sysdat-check + span {
  margin-left: 0.4rem; /* Margine sinistro di 0.4rem per lo span dopo il label */
}