.alert-mio {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-mio-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-fixed-top {
  position: fixed;
  top: 40px;
  left: 25%;
  width: 50%;
  height: auto;
  z-index: 9999;
  border-radius: 10px;
  text-align: center;
}

.modal-alert-fixed-top {
  position: fixed;
  top: 50%;
  left: 20px;
  width: 90%;
  height: auto;
  z-index: 9999;
  border-radius: 10px;
  text-align: center;
}

.alert-mio-danger {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.navbar-form {
  margin-left: 350px !important;
  background-color: red !important;
}

.modal-header {
  /*border-bottom: 2px solid #8f5e69 !important;
    height:60px !important;*/
  border: none;
  height: 40px !important;
  margin-top: 5px;
}

.fissa {
  position: sticky !important;
  top: 0px;
  z-index: 1;
}
.modal-title {
  /*margin-top: -20px!important;*/
  margin-left: 10px;
  margin-top: -10px !important;
  font-size: 18px !important;
  color: #444;
  font-style: italic;
  text-decoration: underline;
}

.close-button {
  /* margin-top: -20px!important;*/
  margin-top: -13px !important;
  color: #aa062b !important;
  font-size: 20px;
  text-align: right;
}

.close-button :hover {
  color: #444;
}

.card-body {
  border: none 0px;
  background-color: #ffffff !important;
  margin-bottom: 5px;
}

.card-body-adesione {
  border: 1px solid #897b7b;
  background-color: #e4e2f2 !important;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.card-body-fixed {
  padding-left: 0px;
  padding-right: 0px;
  background-color: #fff !important;
  margin-bottom: 5px;
  position: sticky !important;
  top: 0px;
  z-index: 1;
}

.modal-card-body {
  background-color: #ffffff !important;
  border: 1px solid #ffffff;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 0px !important;
}
.text-as-label {
  background-color: #fff !important;
  color: green !important;
  border-color: #ede5dc !important ;
  border-width: 0;
  border-style: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.text-header-adesioni {
  position: absolute;
  right: 40%;
  padding-top: 30px;
  color: #000000;
  font-size: 1rem;
}

.custom-file {
  background-color: #8f5e69;
  font-family: "Roboto", sans-serif;
  font-size: 0.9rem;
  height: 30px;
  border: 1px solid #8f5e69;
  border-radius: 0.25rem;
  /*border-bottom: 1px solid #9a9a9a;*/
  outline: none;
  box-shadow: none !important;
  padding-top: 0px;
  padding-left: 1px;
  padding-bottom: 2px;
  color: #ffffff;
}

/*////////////////////////////////////////////////////////////////////////////////*/

/*LOGIN FORM*/
.img-width {
  width: 156px;
  height: auto;
  margin-top: 20px;
  margin-bottom: 10px;
}
.btn-link-login {
  margin-top: 15px;
  margin-bottom: 30px;
  border: 0px solid #f7a204;
  background-color: #715b45;
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
  height: 20px;
  width: 150px;
  font-family: "Roboto", sans-serif;
  font-size: 0.6rem;
  cursor: pointer;
}

.btn-link-login:hover {
  margin-top: 15px;
  border: 1px solid #6a4725;
  border-radius: 10px;
  text-align: center;
  height: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 0.7rem;
  background-color: #6a4725;
  color: #ffffff;
  cursor: pointer;
}

.card-login {
  align-items: center;
  border: none !important;
  -webkit-box-shadow: 0px 3px 0px 2px rgba(0, 0, 0, 0.1), 0px 6px 0px 4px rgba(0, 0, 0, 0.1),
    0px 9px 0px 6px rgba(0, 0, 0, 0.1), 0px 12px 0px 8px rgba(0, 0, 0, 0.1),
    0px 15px 0px 10px rgba(0, 0, 0, 0.1), 18px 0px 12px rgba(0, 0, 0, 0.1),
    0px 21px 0px 14px rgba(0, 0, 0, 0.1), 0px 24px 0px 16px rgba(0, 0, 0, 0.1),
    0px 27px 0px 18px rgba(0, 0, 0, 0.1), 0px 30px 0px 20px rgba(0, 0, 0, 0.1),
    4px -2px 15px 5px rgba(0, 0, 0, 0);
  box-shadow: 0px 3px 0px 2px rgba(0, 0, 0, 0.1), 0px 6px 0px 4px rgba(0, 0, 0, 0.1),
    0px 9px 0px 6px rgba(0, 0, 0, 0.1), 0px 12px 0px 8px rgba(0, 0, 0, 0.1),
    0px 15px 0px 10px rgba(0, 0, 0, 0.1), 0px 18px 0px 12px rgba(0, 0, 0, 0.1),
    0px 21px 0px 14px rgba(0, 0, 0, 0.1), 0px 24px 0px 16px rgba(0, 0, 0, 0.1),
    0px 27px 0px 18px rgba(0, 0, 0, 0.1), 0px 30px 0px 20px rgba(0, 0, 0, 0.1),
    4px -2px 15px 5px rgba(0, 0, 0, 0);
}

.label-vers {
  font-family: "Roboto", sans-serif;
  font-size: 0.7rem;
  text-align: center;
  color: #085f34;
}

.title-color {
  color: #715b45 !important;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: xx-large;
  margin-top: 20px;
}

.title-top {
  margin-top: 20px;
}

.link-login {
  margin-top: 8px;
  font-family: "Roboto", sans-serif;
  font-size: 0.8rem;
  color: #be0707;
  float: right;
  cursor: pointer;
}
.btn-save-modal {
  text-align: center;
  height: 38px;
  padding: 0px 8px;
  border: 1px solid #d8c6ca;
  box-shadow: inset 0px 1px 0px 0px #8f5e69;
  background: linear-gradient(to top, #8f5e69 5%, #d8c6ca 100%);

  font: normal normal 0.9rem arial;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  white-space: normal !important;
  word-wrap: break-word;
  word-break: normal;
}
.btn-login {
  display: inline-block;
  background-color: #715b45;
  position: relative;
  height: 35px;
  margin-right: 1px;
  margin-left: 0px;
  margin-top: 0px;
  padding-top: 4px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 20px;
  border: 1px solid #715b45;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 0.95rem;
  text-align: center;
}

.btn-login:hover {
  display: inline-block;
  background-color: #6a4725;
  color: #ffffff;
}

.btn-small-save {
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #009588;
  background: linear-gradient(180deg, #20b2ab 5%, #0a837d 100%);
}

.btn-small-verde:hover {
  background-color: #14ddd3;
  border: 1px solid #009588;
  color: #464444;
}

.btn-small-adesioni {
  width: 100%;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #ea850a;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
}

.btn-grid-pagamenti {
  display: inline-block;
  background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
  border: 1px solid #ea850a;
  position: relative;
  height: 30px;
  width: auto;
  margin-right: 1px;
  margin-left: 0px;
  margin-top: 0px;
  padding-top: 2px;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 0px;

  color: #000000;
  font: normal normal 0.8rem arial;
  text-align: center;
}

.btn-grid-pagamenti:hover {
  color: #ffffff;
  font: normal normal 0.8rem arial;
  text-align: center;
}

.margin-top {
  margin-top: 80px;
}

.combobox {
  display: inline-block;
  font-size: 0.8rem;
  font-family: sans-serif;
  font-weight: 500;
  color: #000000;
  line-height: 1.3;
  padding: 0.3em 1.4em 0.5em 0.8em;
  width: 100%;
  height: 30px !important;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
  border-radius: 0.3em;
  padding-left: 10px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #ffffff;
}

.combobox:focus {
  background-color: #ffffff;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.combobox:read-only {
  background-color: #ffffff;
}

.myalert-success {
  color: #d4edda;
  background-color: #155724;
  border-color: #c3e6cb;
}

/*//////////////select box////////////////////////////////*/
.row.no-gutter [class*="col-"]:not(:first-child),
.row.no-gutter [class*="col-"]:not(:last-child) {
  padding-right: 2px;
  padding-left: 2px;
}

.label-input {
  font-family: "Roboto", sans-serif;
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 1px;
  margin-top: 0px;
  color: #000000;
}

.label-turno {
  font-family: "Roboto", sans-serif;
  font-size: 0.8rem;
  color: green;
  text-align: center !important;
}

.label-sotto {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem; /* leggermente più grande di small */
  line-height: 1.2; /* respiro, non schiacciata */
  font-weight: 500; /* più leggibile */
  color: #000; /* verde bootstrap */
  min-height: 16px; /* stabilità layout */
  text-align: center;
}

.label-gara {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  color: 000000;
  text-align: center !important;
}

.label-login {
  font-family: "Roboto", sans-serif;
  font-size: 0.75rem;
  text-align: center;
  margin-bottom: 3px;
  margin-top: 10px;
  color: #000000;
}
.select-box {
  display: block;
  font-size: 0.8rem;
  font-family: sans-serif;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.3;
  padding: 0.3em 1.4em 0.5em 0.8em;
  width: 100%;
  height: 30px;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: none !important;
  padding-left: 10px;
  border-radius: 0.3em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #e9dee1;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(to bottom, #ffffff 0%, #ffffff 100%);
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  cursor: pointer;
}

.select-box::-ms-expand {
  display: none;
}

.select-box:hover {
  border-color: #888;
}

.select-box:focus {
  border-color: #aaa;

  color: #222;
  outline: none;
}

#tipopag[readonly] {
  background-color: lightyellow;
  color: #000;
  font-weight: 600;
}

.select-box option {
  font-weight: normal;
  background-color: #ffffff;
  color: #000000;
}

.btn-small-erase {
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #b07500;
  background: linear-gradient(to bottom, #ffc477 5%, #d17a08 100%);
}

.btn-small-erase:hover {
  background-color: #505251;
  border: 1px solid #b07500;
  color: #464444;
  border-radius: 0px !important;
  border: 1px solid #ea850a;
  background: #f3ce9d;
}

.btn-erase {
  width: 50px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 16px; /* X più visibile */
  font-weight: bold;
  border-radius: 0px;
  border: 1px solid #b07500;
  background: linear-gradient(to bottom, #ffc477 5%, #d17a08 100%);
}

.btn-erase:hover {
  background-color: #505251;
  border: 1px solid #b07500;
  color: #464444;
  border-radius: 0px !important;
  border: 1px solid #ea850a;
  background: #f3ce9d;
}

.btn-erase:active {
  transform: translateY(0px); /* effetto clic */
  box-shadow: 0 3px 0 #b07500;
}

.form-control {
  height: 30px !important;
  box-sizing: border-box !important;
  margin: 0;
  border: 1px solid #aaa !important;
  padding-top: -40px !important;
}

.img-elenco {
  width: 100px;
}
/*////////////////////// BUTTON /////////////////////////////////////*/
.btn-dettagli {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #8711eb;
  background-color: #fff;
  border-color: #8711eb;
}
.btn-dettagli:hover {
  color: #000;
  border: 1px solid #8711eb;
}

.btn-dettagli-gare {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding-left: 1px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  color: #000;
  background-color: #fff;
  border: 1px solid #04aa6d;
  width: 70px;
}
.btn-dettagli-gare:hover {
  color: #000;
  border: 1px solid #8711eb;
  background-color: #e2dfdf;
}

.btn-dettagli-genitore {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding-left: 1px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  color: #000;
  background-color: #fff;
  border: 1px solid #d77df8;

  width: 50px;
}
.btn-dettagli-genitore:hover {
  color: #000;
  border: 1px solid #8711eb;
  background-color: #e2dfdf;
}

.btn-dettagli-gare-elimina {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding-left: 1px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  color: #000;
  background-color: #fff;
  border: 1px solid #f70824;
  width: 60px;
}
.btn-dettagli-gare-elimina:hover {
  color: #000;
  border: 1px solid #8711eb;
  background-color: #e2dfdf;
}

.btn-dettagli-gare-nessuno {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding-left: 1px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  color: #000;
  background-color: #fff;
  border: 1px solid #3c393a;
  width: 70px;
}
.btn-dettagli-gare-nessuno:hover {
  color: #000;
  border: 1px solid #8711eb;
  background-color: #e2dfdf;
}

.btn-dettagli-gare-pagato {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding-left: 1px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  color: #000;
  background-color: #fff;
  border: 1px solid #0892f7;
  width: 60px;
}
.btn-dettagli-gare-pagato:hover {
  color: #000;
  border: 1px solid #8711eb;
  background-color: #e2dfdf;
}

.btn-dettagli-elimina {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #f50808;
  background-color: #fff;
  border-color: #f50808;
}
.btn-dettagli-elimina:hover {
  color: #000;
  border: 1px solid #8711eb;
}

.btn-dettagli-modifica {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #000000;
  background-color: #fff;
  border-color: #000000;
}
.btn-dettagli-modifica:hover {
  color: #000;
  border: 1px solid #000000;
}

.btn-dettagli-pagamenti {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #07600a;
  background-color: #fff;
  border-color: #07600a;
}
.btn-dettagli-pagamenti:hover {
  color: #000;
  border: 1px solid #07600a;
}

.btn-dettagli-aggiorna {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #0b9651;
  background-color: #fff;
  border-color: #0b9651;
}
.btn-dettagli-aggiorna:hover {
  color: #000;
  border: 1px solid #0a7905;
}

.btn-add-foto {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  border-radius: 0px;
  color: #073e60;
  background-color: #fff;
  border-color: #073e60;
  margin-top: 1px;
}

.btn-add-foto:hover {
  color: #000;
  border: 1px solid #073e60;
}

.btn-dettagli-oro {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  border-radius: 0px;
  color: #8e5a13;
  background-color: #fff;
  border-color: #8e5a13;
  margin-top: 1px;
}

.btn-dettagli-oro:hover {
  color: #000;
  border: 1px solid #073e60;
}

.btn-dettagli-fatte {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  border-radius: 0px;
  color: #3b648d;
  background-color: #fff;
  border-color: #3b648d;
  margin-top: 1px;
}

.btn-dettagli-fatte:hover {
  color: #000;
  border: 1px solid #073e60;
}

.btn-quota {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #000000;
  background-color: #f5f5f5;
  border-color: #11a30b;
}
.btn-quota:hover {
  color: #000;
  border-color: #8e8e29;
}

.btn-entrate {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #000000;
  background-color: #f5f5f5;
  border-color: #439ce8;
}
.btn-entrate:hover {
  color: #000;
  border-color: #29318e;
}

.btn-uscite {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #000000;
  background-color: #f5f5f5;
  border-color: #f01d1d;
}
.btn-uscite:hover {
  color: #000;
  border-color: #f2a496;
}

.btn-ricevute {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #000000;
  background-color: #f5f5f5;
  border-color: #45b299;
}
.btn-ricevute:hover {
  color: #000;
  border-color: #87f4da;
}

.btn-costi {
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 5px 16px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  vertical-align: middle;
  border: 1px solid;
  color: #000000;
  background-color: #f5f5f5;
  border-color: #b28c45;
}
.btn-costi:hover {
  color: #000;
  border-color: #bfaf91;
}

.btn-small-verde {
  width: 52px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #009588;
  background: linear-gradient(180deg, #20b2ab 5%, #0a837d 100%);
}

.btn-small-verde:hover {
  background-color: #14ddd3;
  border: 1px solid #009588;
  color: #464444;
}

.btn-small-giallo {
  width: 52px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #ea850a;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
}

.btn-small-giallo:hover {
  background-color: #b07500;
  border: 1px solid #b07500;
  color: #464444;
}

.btn-giallo {
  height: 40px;
  display: block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #ea850a;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
}

.btn-small-giallo:hover {
  background-color: #b07500;
  border: 1px solid #b07500;
  color: #464444;
}

.btn-verde {
  height: 40px;
  display: block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #009588;
  background: linear-gradient(180deg, #20b2ab 5%, #0a837d 100%);
}

.btn-small-verde:hover {
  background-color: #14ddd3;
  border: 1px solid #009588;
  color: #464444;
}
.btn-xxsmall-verde {
  width: 40px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #009588;
  background: linear-gradient(180deg, #20b2ab 5%, #0a837d 100%);
}

.btn-xxsmall-verde:hover {
  background-color: #14ddd3;
  border: 1px solid #009588;
  color: #464444;
}

.btn-xxsmall-giallo {
  width: 40px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #ea850a;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: linear-gradient(to bottom, #ffc477 5%, #d17a08 100%);
}

.btn-xxsmall-giallo:hover {
  background-color: #b07500;
  border: 1px solid #b07500;
  color: #464444;
}

.btn-annuale {
  width: 100px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #009588;
  background: linear-gradient(180deg, #20b2ab 5%, #0a837d 100%);
}

.btn-annuale:hover {
  background-color: #14ddd3;
  border: 1px solid #009588;
  color: #464444;
}

.btn-mensile {
  width: 100px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #ea850a;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: linear-gradient(to bottom, #ffc477 5%, #d17a08 100%);
}

.btn-mensile:hover {
  background-color: #b07500;
  border: 1px solid #b07500;
  color: #464444;
}

.btn-codfisc {
  width: 80px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #ea850a;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: linear-gradient(to bottom, #ffc477 5%, #d17a08 100%);
}

.btn-xxsmall-giallo:hover {
  background-color: #b07500;
  border: 1px solid #b07500;
  color: #464444;
}

.btn-delete-lista {
  width: 120px;
  height: 30px;
  display: inline-block;
  cursor: pointer;
  color: #101010;
  font-family: Arial;
  font-size: 12px;
  border-radius: 0px;
  border: 1px solid #ea850a;
  box-shadow: inset 0px 1px 0px 0px #fce2c1;
  background: linear-gradient(to bottom, #ffc477 5%, #fb9e25 100%);
}

.btn-delete-lista:hover {
  background-color: #b07500;
  border: 1px solid #b07500;
  color: #464444;
}

.intestazione-modal {
  color: #000000;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 0.9rem;
  font-style: italic;
  text-decoration: underline;
}

.close {
  color: rgb(227, 8, 8) !important;
  opacity: 100 !important;
}

.captcha {
  background-color: #b2d3f4;
}

.no-robot {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #b2d3f4;
  border-radius: 0.3rem;
}

.formcheckinput {
  position: absolute;
  margin-top: 0.3rem;
  margin-left: 1rem;
}

.formchecklabel {
  margin-left: 2.5rem;
}

/*////////////////////  select box menu archivi//////////////////////////////*/

.modal-title-archivi {
  padding-top: 5px;
  padding-left: 5px;
  margin-top: -10px !important;
  font-size: 18px !important;
  color: #444;
  background: linear-gradient(to left, #8f5e69 5%, #d8c6ca 100%);
  font-style: italic;
  text-decoration: underline;
  height: 40px;
}

nav {
  margin: auto;
  margin-top: 20px;
  position: relative;
  width: clamp(320px, 50vw, 100%);
}

nav ul {
  padding-left: 0;
  padding-top: 0.1rem;
  margin-top: 0;
  background-color: #fff;
  list-style: none;
  overflow: hidden;
  text-align: right;
  text-align: center;

  width: 100%;
  position: absolute;
}
nav ul li {
  border-radius: 0px;
  position: relative;
  display: inline-block;
  line-height: 2.5;
  width: 100%;
  margin: 0 0 0.25rem 0;
  background: #e9dee1;
}

nav ul li:hover,
nav ul li a:focus {
  background: #444;
}

nav ul li a:hover {
  color: #fff;
}

nav ul a {
  padding-left: 10px;
  text-align: left;
  display: block;
  color: inherit;
  font-size: 1.06rem;
  text-decoration: none;
}

#mainContainer {
  padding-left: 260px;
}
/*//////////////////// FINE select box menu archivi//////////////////////////////*/

/*/////////////TABELLA CON HEADER FIXED-TOP*/

/*/////////////////////////////////////////////////////////////////////////////*/

/*CODICE QUANDO IL MENU COLLASSA */
/*/////////////////////////////////////////////////////////////////////////////*/

@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  #mainContainer {
    padding-left: 15px; /* o 0 se vuoi */
  }

  .margin-top {
    margin-top: 30px;
  }
  .alert-fixed-top {
    position: fixed;
    right: 40px;
    width: auto;
    height: 100px;
    z-index: 9999;
    border-radius: 10px;
    text-align: center;
  }
}

/*TABELLA anagrafica RESPONSIVE OK*/
.customers {
  font-family: Tahoma, Geneva, sans-serif;
  border-collapse: collapse;
  width: 100%;
  font-style: normal;
  font-size: 0.8rem;
  background-color: #fff !important;
  margin-top: 5px;
}

.customers td {
  border: 0px solid #fff;
  padding: 6px;
  font-family: Tahoma, Geneva, sans-serif;
  font-style: normal;
  font-size: 0.9rem;
}

.customers td.gare {
  border: 0px solid #fff;
  padding: 1px;
  font-family: Tahoma, Geneva, sans-serif;
  font-style: normal;
  font-size: 0.9rem;
  display: inline-block;
}

.customers tr {
  background-color: #fff;
}

.customers th {
  /* barra intestazione tabella*/
  height: 50px;
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background: #c4a8af;
  color: #000;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: lighter;
}

@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    /*position: sticky;
        top:0;*/
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr:nth-child(odd) {
    /*background color griglia collassata*/
    background: #ffffff;
    border: 0px solid #ffffff;
  }
  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 100%;
  }
  td:before {
    /* Now like a table header */
    content: attr(data-label);
    width: auto;
    color: #0f460b;
    display: inline-block;
  }

  /*
Label the data
You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
*/
  /*INTESTAZIONE COLONNE QUANDO LA TABELLA COLLASSA*/
  td:nth-of-type(1):before {
    content: attr(data-label);
  }
  td:nth-of-type(2):before {
    content: attr(data-label);
  }
  td:nth-of-type(3):before {
    content: attr(data-label);
    display: block;
    float: none;
  }
  td:nth-of-type(4):before {
    content: attr(data-label);
    display: block;
    float: none;
  }
  td:nth-of-type(5):before {
    content: attr(data-label);
  }
  td:nth-of-type(6):before {
    content: attr(data-label);
  }
  td:nth-of-type(7):before {
    content: attr(data-label);
    display: block;
    float: none;
  }
  td:nth-of-type(8):before {
    content: attr(data-label);
  }
  td:nth-of-type(9):before {
    content: attr(data-label);
  }
  td:nth-of-type(10):before {
    content: attr(data-label);
  }
  td:nth-of-type(11):before {
    content: attr(data-label);
  }
  td:nth-of-type(12):before {
    content: attr(data-label);
  }
  td:nth-of-type(13):before {
    content: attr(data-label);
  }
  td:nth-of-type(14):before {
    content: attr(data-label);
  }
}

td.azioni {
  white-space: nowrap;
}