body {
  min-height: 90vh;
  min-width: 98vw;
  font-family: Poppins;
  margin: 0;
  margin-top: 4.5rem;
  --main-color: #1c5d7e;
  --secondary-color: #598faa;
  --link-hover: #c6ecff;
  --background-color: rgb(238, 238, 238);
  --giorno-turno-esistente: #ea9a00;
  --positive-green: #5ba959;
  --box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  --light-box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, 0.045);

  font-family: "Poppins", sans-serif;
}

html,
body {
  background-color: var(--background-color);
  position: relative;
  display: flex;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

h1 {
  margin-top: 3rem;
  color: var(--main-color);
  text-align: center;
  letter-spacing: -0.5px;
}

a:hover {
  color: #a2e0ff;
  transition: color 2s;
}
/** STANDARD */
.box-shadow {
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.light-box-shadow {
  box-shadow: 0px 0px 10px 7px rgba(0, 0, 0, 0.045);
}

.flex-center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-center-center-column {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.flex-center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/** HEADER */
.header {
  min-width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  height: 5rem;
  background: var(--main-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8vw;
  font-size: 1.1rem;
  z-index: 100;
}

.header-logo {
  color: white;
  font-weight: 800;
  font-size: 1.3rem;
}

.header a {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

.header a:hover .header-logo,
.header a:hover,
.header p:hover,
.header button:hover {
  color: var(--link-hover);
  transition: color 0.15s;
}

/** DA MODIFICARE */

.hamburger-header {
  width: 1.7rem;
  height: 1.2rem;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.hamburger-line {
  border-radius: 5px;
  height: 3px;
  width: 2rem;
  background-color: white;
  transition: all 0.35s ease-in-out;
}

.container-header-panel {
  opacity: 0;
  position: absolute;
  z-index: -10;
  top: 4.5rem;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(10, 10, 10, 0.205);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  animation: fade-out;
  transition: opacity 0.2s ease-in-out;
  display: none;
}

.header-panel {
  font-size: 1.4rem;
  user-select: none;
  display: flex;
  text-align: right;
  position: absolute;
  right: 0;
  right: -100%;
  top: 4.5rem;
  height: 110vh;
  width: 70vw;
  background-color: white;
  justify-content: right;
  transition: right 350ms ease-in-out;
}

.container-header-panel[active] {
  display: block;
  animation: fade-in 350ms forwards;
}
.container-header-panel[closing] {
  display: flex;
  pointer-events: none;
  animation: fade-out 350ms forwards;
}

.header-panel[active] {
  right: 0;
}
.header-panel[closing] {
  display: block;
  right: -100%;
  transition: right 350ms ease-in-out;
}

#hamburger-line-2[active] {
  transform: translateX(60px);
  opacity: 0;
}
#hamburger-line-1[active] {
  transform: rotate(45deg) translate(8px, 4px);
}
#hamburger-line-3[active] {
  transform: rotate(-45deg) translate(8px, -4px);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    /* right: 0%; */
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.header-panel ul {
  margin: 0;
  position: relative;
  width: 100%;
}

.header-panel a,
.header-panel button {
  color: black;
}

.header-panel button {
  padding: 0;
}

.header-panel ul li {
  padding: 1rem;
  width: 100%;
  padding-right: 2rem;
  border-bottom: 0.5px solid rgb(238, 238, 238);
}

.header-right {
  margin: 0;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  -webkit-gap: 2rem;
}

.header-dropdown {
  display: none;
  background-color: var(--secondary-color);
}

.header-dropdown ul{
  color: white;
  margin: 0;
}

.header-dropdown ul li{
  font-size: 1.1rem;
  line-height: 1.45rem;
}

.header ul li:hover .header-dropdown {
  display: block;
  position: absolute;
  padding: 1rem;
  border-bottom: 1px dotted white;
  border-radius: 10px;
  z-index: 100;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 1.2rem;
}

.header-arrow {
  font-size: 1rem;
  margin-left: 5px;
}

.dropdown-spacer {
  cursor: default;
}

.logout-button {
  background: none;
  border: none;
  color: white;
  font-weight: bold;
}

/** LOGIN */

.login-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-login {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 2rem 2rem 2rem;
  width: 27rem;
  max-width: 85vw;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  border-radius: 25px;
}

.login-h1 {
  width: 27rem;
  max-width: 85vw;
  text-align: center;
  color: white;
  padding: 1.2rem 0 1.2rem 0;
  background-color: var(--main-color);
  margin-bottom: 2.5rem;
  border-radius: 25px 25px 0 0;
  margin-top: 0 !important;
}

.error-message {
  font-weight: 600;
  font-size: 1.2rem;
}

.login-form {
  position: relative;
  width: 100%;
  border-radius: 15px;
  border: none;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  height: 2.5rem;
  margin-bottom: 1.3rem;
  padding-left: 5%;
  padding-right: 5%;
  -webkit-appearance: none;
}

.login-form:focus {
  outline: 0.2px solid #dddddd;
}

.btn-login {
  position: relative;
  margin: auto;
  width: 8rem;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  border: none;
  color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px #595ca944;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.container-password-dimenticata {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.5rem;
  -webkit-gap: 0.5rem;
  text-align: center;
  line-height: 1.2rem;
}

.container-password-dimenticata button {
  border: none;
  background: none;
  text-decoration: underline;
  color: #595ca9;
  margin: 0;
  padding: 0;
}

.container-password-dimenticata p {
  margin: 0;
}

/** INDEX */
.body-flex-center,
.body-flex-center-overflow {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 92vh;
  position: relative;
}

.body-flex-center-overflow {
  width: 100vw;
  overflow-x: hidden;
}

.h1-index {
  margin: 3.5rem 0;
  text-align: center;
  width: 100%;
  font-weight: 300;
}

.h2-index {
  font-weight: bold;
  font-size: 2rem;
  color: var(--main-color);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.home-button-disponibilita,
.home-button-turni {
  cursor: pointer;
  display: flex;
  justify-content: center;
  margin: 0.5rem 0px;
  background-color: white;
  width: 35vw;
  min-width: 30rem;
}

.home-button-turni,
.home-button-disponibilita {
  padding: 2rem;
  border-radius: 40px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.content-home-button-disponibilita,
.content-home-button-turni {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  width: 100%;
  max-width: 22rem;
}

.testo-home-button-disponibilita {
  font-size: 1.3rem;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  width: 80%;
}

.testo-home-button-turni {
  font-weight: bold;
  font-size: 1.3rem;
  position: absolute;
  width: 80%;
  right: 50%;
  pointer-events: none;
  transform: translateX(50%);
}

.icona-disponibilita,
.icona-turni {
  color: var(--main-color);
  font-size: 3rem;
  pointer-events: none;
  padding: 0;
}

.icona-disponibilita {
  pointer-events: none;
  margin-top: -5px;
}

.home-button-arrow {
  font-weight: 600;
  pointer-events: none;
  font-size: 1.4rem;
  position: relative;
}

.pallino-da-confermare-index {
  position: absolute;
  right: -30px;
  top: -40px;
  font-size: 1.75rem;
  background: white;
  border-radius: 50%;
  transition: 0.3s;
  transform: scale(0);
  color: rgb(182, 23, 23);
  font-weight: 600;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: alert 750ms ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 0.75s;
}

@keyframes alert {
  0% {
    transform: scale(0);
  }

  25% {
    transform: scale(1.5) rotate(0deg);
  }

  45% {
    transform: scale(1.8) rotate(0deg);
  }

  50% {
    transform: scale(1.8) rotate(25deg);
  }

  70% {
    transform: scale(1.8) rotate(-25deg);
  }

  85% {
    transform: scale(1.8) rotate(0deg);
  }

  100% {
    transform: scale(1) rotate(0deg);
  }
}

.punto-esclamativo-index {
  text-align: center;
  font-size: 1rem;
}

.spacer-index {
  width: 60vw;
  max-width: 10rem;
  min-height: 1px;
  border-radius: 10px;
  background-color: var(--main-color);
  margin: 2.5rem 0 3rem 0;
}

.container-index {
  background-color: white;
  width: 30rem;
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  max-width: 85vw;
}

.dati-container {
  padding: 1rem;
  border-collapse: separate;
  border-spacing: 1.5rem 0rem;
}

.categoria-dati {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin: 0.7rem;
}

.categoria-dati.orizzontale {
  flex-direction: row;
  -webkit-gap: 0.5rem;
  gap: 0.5rem;
}

.tipologia-dati {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6rem;
}

.dati-value {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

.info-contatti {
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  background-color: white;
  width: 100%;
  padding: 1.5rem 0 2rem 0;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title-info-contatti {
  font-size: 1.3rem;
  text-align: center;
  -webkit-text-align: center;
  font-weight: normal;
}

.table-contatti {
  margin: 0;
  margin-top: 1rem;
  border-collapse: separate;
  border-spacing: 1rem 0rem;
}

/** GENERAZIONE TURNI */

.generazione-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.turni-form {
  padding: 1rem 0 1.5rem 0;
  width: 75%;
  margin: auto;
}

.turni-selezione-reparto,
.turni-selezione-data,
.turni-selezione-orario,
.turni-selezione-n-volontari {
  width: 100%;
  margin: 1.2rem auto 1.2rem auto;
}

.frm-n-volontari,
.frm-n-uoc,
.frm-reparto,
.frm-data {
  width: 100%;
}

.h3-popup-troppi-volontari {
  font-size: 1.3rem;
  margin: 2rem 2rem 0 2rem;
}

.popup-content-troppi-volontari {
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  max-width: 40vw;
  text-align: center;
}

/** TURNI CREATI  */

.title-turni-creati {
  margin: 2.5rem;
  font-weight: 600;
  color: var(--main-color);
  text-align: center;
}

.turno-non-generato {
  width: 10rem;
  margin: 0.7rem 0.35rem;
  height: 5rem;
  background-color: var(--background-color);
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #696969;
}

.turno-generato {
  position: relative;
  width: 10rem;
  margin: 0.7rem 0.35rem;
  height: 5rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.selezione-anziano {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.data-turno-creato {
  padding-right: 1rem;
}

.gruppo-turni {
  max-width: 100vw;
  text-align: center;
  margin-bottom: 5rem;
}

/** GENERATI VOLONTARI */

.table-generati-info {
  width: 80%;
  align-self: flex-start;
  margin: 2rem auto 1rem auto;
}

.table-generati {
  width: 80%;
  align-self: flex-start;
  margin: 2rem auto 1rem auto;
  border-collapse: separate;
  border-spacing: 0.5rem 1.2rem;
}

.generati-body {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f3f3;
}

.colonne {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50vw;
}

.index-container {
  background-color: white;
  display: flex;
  border-radius: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  padding: 0px;
}

.h1-gestione-turni {
  padding: 0.2rem;
  color: var(--main-color);
  text-align: center;
  font-weight: bold;
  margin: 2rem auto;
}

.h1-gestione-turni.extra-margin {
  margin: 2rem auto 4rem auto;
}

.selezione-reparto,
.selezione-data,
.selezione-n-volontari,
.selezione-orario {
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 1rem 1rem;
}

.orario-turno {
  padding-bottom: 0px;
}

.btn-genera {
  width: 8rem;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  border: none;
  color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px #595ca941;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.container-elenco-volontari {
  min-width: 30rem;
  margin-bottom: 7rem;
}

ul {
  margin-left: 5rem;
  list-style-type: none;
  padding: 0px;
}

.container-elenco-volontari {
  margin-left: 3rem;
}

.dati-generati {
  background-color: white;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  min-width: 15rem;
  margin-right: 1rem;
}

.n-utilizzi-volontari {
  background-color: white;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  min-width: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.btn-rigenera {
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  border: none;
  color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

/** DISPONIBILITA' */
.disp-h1 {
  color: var(--main-color);
  padding: 2rem;
  font-weight: bold;
  text-align: center;
}

.disp-body {
  background-color: #f3f3f3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.p-ricorda-disponibilita {
  color: #949494;
  margin-top: -20px;
  margin-bottom: 1rem;
  width: 27rem;
  text-align: center;
  max-width: 85vw;
}

.selezione-mese {
  display: flex;
  gap: 3rem;
  -webkit-gap: 3rem;
  user-select: none;
}

.disp-h2 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #a5a5a5;
  cursor: pointer;
  font-weight: 400;
}

.disp-h2.selected-mese {
  font-weight: bold;
  color: rgb(59, 59, 59);
}

.disp-container {
  min-width: 90vw;
  margin: auto;
  position: relative;
  touch-action: manipulation;
}

.container-settimana-disp {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(7, 1fr);
}

.giorno-null {
  background-color: #eeeeee;
  aspect-ratio: 1;
  margin: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.giorno {
  background-color: white;
  aspect-ratio: 1;
  margin: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
}

.giorno-lettere {
  margin-top: 0.7rem;
  text-align: center;
  text-transform: uppercase;
  font-weight: 300;
  touch-action: none;
}

.giorno-num {
  font-weight: 500;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 8%;
  touch-action: none;
}

.matt-pom {
  width: 100%;
}

.mattina,
.pomeriggio {
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  width: 90%;
  margin: auto;
  border-radius: 10px;
  text-align: center;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  touch-action: manipulation;
}

.pomeriggio {
  margin-bottom: 0.7rem;
}

.mattina {
  margin-bottom: 0.4rem;
}

.selected {
  background-color: var(--main-color);
  color: white;
  font-weight: normal;
}

.turno-esistente {
  background-color: var(--giorno-turno-esistente);
  color: white;
}

.disp-conferma {
  background-color: #e6e6e6;
  border: none;
  color: #6d6d6d;
  box-shadow: 0px 0px 13px 7px #8a8a8a44;
  padding: 1.5rem 3rem 1.5rem 3rem;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  margin-top: 5rem;
  margin-bottom: 10rem;
  cursor: default;
  transition: background-color 0.35s;
}

.disp-conferma.attivo {
  background-color: var(--main-color);
  color: white;
  box-shadow: 0px 0px 13px 7px #5990a944;
}

/* POP-UP */
.popup-conferma-modifica {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  position: fixed;
}

.popup-content {
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  max-width: 90vw;
  text-align: center;
  position: relative;
}

.popup-password-content {
  display: none;
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 35rem;
  max-width: 90vw;
  text-align: center;
}

.popup-conferma-password-content {
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 35rem;
  max-width: 90vw;
  text-align: center;
}

.popup-conferma-password-content p {
  width: 20rem;
  max-width: 70vw;
  text-align: center;
  margin-top: 0;
  margin-bottom: 2rem;
}

.popup-conferma-password-content button {
  margin: 0 0 1.5rem 0;
}

.icona-conferma-disponibilita {
  font-size: 5rem;
  color: var(--main-color);
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.h3-disp-popup {
  font-size: 1.7rem;
  margin: 0 2rem 0 2rem;
}

.h3-turno-popup {
  font-size: 1.7rem;
  margin: 2rem;
}

.h3-disp-popup-password {
  font-size: 1.7rem;
  margin: 2rem 2rem 0 2rem;
}

.h3-disp-popup-password-conferma {
  margin: 1rem 2rem 0.5rem 2rem;
}

.btn-popup,
.btn-close-popup {
  padding: 1rem 2rem 1rem 2rem;
  font-size: 1.2rem;
  border: none;
  border-radius: 10px;
  background-color: var(--main-color);
  color: white;
  box-shadow: 0px 0px 13px 7px #595ca944;
  margin: 2rem 0 1.5rem 0;
}

.container-buttons-popup {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 80vw;
}

.chiudi-turni {
  background: none;
  box-shadow: none;
  color: var(--main-color);
}

.btn-popup-si {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  border: none;
  border-radius: 10px;
  background-color: var(--main-color);
  color: white;
  box-shadow: 0px 0px 13px 7px #595ca944;
  margin: 2rem 0 1.5rem 0;
}

.btn-popup-no {
  padding: 1rem 2rem 1rem 2rem;
  font-size: 1.2rem;
  border: none;
  border-radius: 10px;
  background: none;
  color: black;
  margin: 2rem 0 1.5rem 0;
}

.btns-reset-password {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-password-list {
  pointer-events: none;
}

.popup-info-content {
  position: relative;
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  width: 35rem;
  max-width: 90vw;
  text-align: center;
}

/** VISUALIZZA TURNI */

.visualizza-turni-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.non-ancora-inserito {
  position: relative;
  max-width: 80vw;
  text-align: center;
}

.gruppo-turni {
  margin-top: 2rem;
}

.container-buttons-turni {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: -1rem auto 1.5rem auto;
  line-height: 1.3rem;
}

.button-selezione-turni {
  text-align: center;
  font-size: 1.3rem;
  color: #8d8d8d;
  text-decoration: none;
  white-space: nowrap;
}

.button-selezione-turni[selected] {
  color: #1a1a1a;
  font-weight: bold;
}

.container-turno {
  position: relative;
  margin-bottom: 2.5rem;
  background-color: white;
  border-radius: 35px;
  padding: 0rem 3rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  max-width: 85vmin;
}

.giorno-turno {
  font-size: 1.5rem;
  background-color: var(--main-color);
  color: white;
  border-radius: 15px;
  position: relative;
  padding: 0.5rem 2rem 0.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -1.2rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: flex;
  gap: 8px;
}

.container-turni-riferimento {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
}

.giorno-turno-anziano-riferimento {
  padding: 20px;
  background-color: var(--main-color);
  color: white;
  width: 10rem;
  align-self: center;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.btn-info-turno {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: white;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.fa-ellipsis {
  pointer-events: none;
}

.table-turno {
  width: 100%;
  font-size: 1.2rem;
  border-collapse: separate;
  border-spacing: 1rem 0px;
}

.to-hide-ondesktop-telefono {
  display: none;
}

.table-turno td {
  width: 45%;
  min-width: 8rem;
  line-height: 1.6rem;
}

.table-turno-normal {
  text-align: left;
}

.table-turno-bold {
  font-weight: bold;
  text-align: right;
}

.button-conferma-turno {
  padding: 0.4rem 2rem 0.4rem 2rem;
  width: 11rem;
  border: none;
  background-color: var(--main-color);
  color: white;
  font-size: 1.2rem;
  border-radius: 15px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  position: relative;
  margin: 0.5rem 0 0 0;
}

.button-rifiuta-turno {
  width: 11rem;
  padding: 0.4rem 2rem 0.4rem 2rem;
  border: none;
  background-color: #c22828;
  color: white;
  font-size: 1.2rem;
  border-radius: 15px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  position: relative;
  margin: 0.5rem 0 0 0;
}

.turno-non-confermato-volontario {
  box-shadow: 0px 0px 13px 7px rgba(170, 23, 23, 0.18);
}

.turno-rosso {
  background-color: #f3f3f3;
  color: rgb(185, 35, 35);
  padding: 0.7rem 1rem 0.7rem 1rem;
  border-radius: 10px;
  margin: 0px 20px 0px 20px;
  box-shadow: 0px 0px 7px 4px rgba(228, 31, 31, 0.219);
  font-size: 1.1rem;
}

.popup-visualizza-turni {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.container-buttons-popup-turni {
  display: flex;
  margin-top: -2rem;
}

/** INFO TURNO */

.info-turno-body {
  display: flex;
  justify-content: center;
  padding: 0 15vw;
}

.tutto-informazioni {
  margin-top: 10vh;
  max-width: 50vw;
}

.container-informazioni {
  margin-top: 2rem;
  background-color: white;
  border-radius: 20px;
  padding: 2.5rem;
  margin-right: 3rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.informazioni-p.data-orario {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}

.informazioni-p.data-orario div {
  margin-top: 0;
}

.informazioni-messaggio {
  margin-top: 1rem;
}

.informazioni-p-messaggio {
  margin-top: 1rem;
}

.tutto-squadra {
  margin-left: 3rem;
  margin-top: 10vh;
}

.table-informazioni-squadra {
  margin-top: 2rem;
  border-spacing: 0.6rem 1rem;
  border-collapse: separate;
  font-size: 1.1rem;
  min-width: 30vw;
  position: relative;
}

.table-informazioni-squadra-uoc {
  margin: -10px 0 2.5rem;
  border-spacing: 0.6rem 1rem;
  border-collapse: separate;
  font-size: 1.1rem;
  min-width: 30vw;
}

.td-proclamatore {
  background-color: white;
  padding: 0.7rem 1rem 0.7rem 1rem;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 1.1rem;
}

.casella-info-telefono {
  background-color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 10px;
  max-width: 40vw;
  font-size: 1rem;
  line-height: 1.3rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.fa-circle-info.icona-telefono-info-turno {
  display: none;
}

.informazioni-h2 {
  font-weight: bold;
  color: var(--main-color);
}

.informazioni-h3 {
  font-weight: bold;
}

.informazioni-h4 {
  font-weight: bold;
  font-size: 1.2rem;
}

.informazioni-data-ora {
  position: relative;
}

.informazioni-p {
  margin-bottom: 0;
  font-size: 1.1rem;
  width: 100%;
}

.table-informazioni-info-turno {
  border-spacing: 0.5rem 0rem;
  border-collapse: separate;
  text-align: left;
}

.bold-table-informazioni-info-turno {
  font-weight: 600;
}

.informazioni-reparto,
.informazioni-responsabile {
  margin-top: 1.5rem;
}

.btn-modifica-turno {
  color: white;
  background-color: var(--main-color);
  padding: 1rem 2rem 1rem 2rem;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  margin-top: 2rem;
}

.heading-altri-uoc {
  margin: 0px;
  padding: 0px;
}

/** LIST-VOL */
.body-list-vol {
  margin-top: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.list-vol-h1 {
  color: var(--main-color);
  padding: 2rem 0 0 0;
  font-weight: bold;
}

.tab-vol {
  width: 90vw;
  border-spacing: 0.5rem .7rem;
  border-collapse: separate;
  margin-bottom: 5rem;
}

.tab-vol th {
  position: sticky;
  top: 5rem;
  background-color: var(--background-color);
  padding: .5rem;
}

.tab-vol td {
  padding: .6rem 1rem;
  border-radius: 10px;
  margin: 0px 20px 0px 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 1rem;
  line-height: 1.2rem;
}

.tab-vol th {
  text-align: center;
}

.vol-el {
  background-color: var(--background-color);
}

.uoc {
  font-weight: bold;
}

.chiave-uoc {
  font-size: 0.9rem;
  margin-right: 0.5rem;
}

.div-heading-automunito {
  text-align: center;
  white-space: nowrap;
  width: 2rem;
  z-index: 100;
}

.div-heading-utilizzi {
  text-align: center;
  white-space: nowrap;
  width: 2rem;
}

.automunito,
.utilizzi,
.eta {
  width: 2rem;
  height: 2rem;
  margin: 0;
  text-align: center;
}

.tick-automunito,
.cross-automunito,
.info-automunito {
  display: none;
  text-align: center;
}

.fa-circle-xmark {
  color: #b8b8b8;
  font-size: 1.5rem;
}

.fa-circle-check {
  font-size: 1.5rem;
  color: #3d3d3d;
}

.annotazioni {
  max-width: 30vw;
}

.seleziona {
  min-width: 6rem;
  cursor: pointer;
  text-align: center;
}

.to-white {
  background-color: white;
}

.conferma-selezione-volontari {
  position: fixed;
  bottom: 2rem;
  margin: auto;
  display: flex;
}

.n-list-vol {
  background-color: white;
  padding: 1.5rem 4rem 1.5rem 2rem;
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.15);
}

.btn-conferma-list-vol {
  background-color: var(--main-color);
  padding: 1.5rem 2rem 1.5rem 2rem;
  border-radius: 20px;
  color: white;
  cursor: pointer;
  margin-left: -2rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.15);
}

/** SELEZIONE SQUADRA */

.h1-elenco-squadra {
  color: var(--main-color);
  font-weight: bold;
  margin-top: 0;
}

.data-orario {
  display: flex;
}

.p-data-orario {
  margin: 0 0.5rem 0 0.5rem;
  font-size: 1rem;
  color: #8b8b8b;
}

.td-vol-squadra,
.td-uoc-squadra {
  padding: 0.7rem 1rem 0.7rem 1rem;
  border-radius: 10px;
  margin: 0px 20px 0px 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 1.1rem;
}

.td-uoc-squadra {
  font-weight: bold;
}

.td-elimina-vol-squadra,
.btn-annotazioni-vol-squadra {
  text-align: center;
  cursor: pointer;
}

.campo-annotazioni {
  text-align: center;
  cursor: pointer;
  max-width: 40vw;
}

.btn-elimina-vol-squadra {
  margin: 0 0.6rem 0 0;
  color: #e05656;
  font-size: 1.1rem;
}

.n-utilizzi-vol-squadra,
.btn-annotazioni-vol-squadra {
  text-align: center;
}

.btn-conferma-vol-squadra {
  color: white;
  background-color: var(--main-color);
  padding: 1rem 2rem 1rem 2rem;
  border: none;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.btn-annotazioni-vol-squadra {
  padding: 0.6rem;
  text-align: center;
}

.btn-annotazioni-vol-squadra.nota {
  color: white;
  background-color: var(--main-color);
}

.btn-seleziona-list,
.btn-elimina-vol-squadra,
.btn-annotazioni,
.fa-solid {
  pointer-events: none;
}

.table-vol-squadra {
  position: relative;
  top: 0px;
  min-width: 43vw;
  border-spacing: 0.4rem 0.6rem;
  border-collapse: separate;
  margin: 0.75rem 0 1.2rem 0;
}

.container-squadra {
  top: 2rem;
  background-color: white;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  margin: 5rem 0 4rem 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-opzioni-crezione-turni {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.select-selezione-luogo {
  border: none;
  border-radius: 10px;
  height: 2.5rem;
  width: 28rem;
  padding: 0 20px;
  margin-top: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  background-color: white;
}

.btn-messaggio-tutti {
  border: none;
  border-radius: 10px;
  height: 2.5rem;
  width: 15rem;
  margin: 10px 0 20px 0px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  background-color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.icona-aggiungi-messaggio {
  background-color: #e2e2e2;
  border-radius: 50%;
  padding: 4px;
  color: black;
  margin-right: -10px;
}

.icona-messaggio-aggiunto {
  background-color: #3b86ac;
  border-radius: 50%;
  padding: 4px;
  color: white;
  margin-right: -10px;
  display: none;
}

.btn-messaggio-tutti-selected {
  background-color: var(--main-color);
  color: white;
}

.contatore-vol-selezionati {
  display: flex;
  margin-bottom: 0;
}

.contatore-uoc-selezionati {
  display: flex;
  margin-top: -10px;
}

.container-titolo-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container-pulsanti-selezione-squadra {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.container-tutto-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
}

.button-ricerca-cucina {
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  height: 37px;
  width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.button-ricerca-cucina.non-attivo {
  background-color: var(--background-color);
  color: #7e7e7e;
}

.button-ricerca-cucina.attivo {
  background-color: var(--main-color);
  color: white;
}

.button-ricerca-uoc {
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  height: 37px;
  width: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.button-ricerca-uoc.non-attivo {
  background-color: var(--background-color);
  color: #7e7e7e;
}

.button-ricerca-uoc.attivo {
  background-color: var(--main-color);
  color: white;
}

.search-box-volontari {
  background-color: var(--background-color);
  border-radius: 10px;
  padding: 0.33rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  height: 37px;
}

.search-icon {
  margin-right: 0.33rem;
  padding-left: 0.33rem;
  color: #7e7e7e;
}

.search-input {
  border-radius: 10px;
  background-color: var(--background-color);
  border: 0px;
}

.search-input:focus {
  outline: none;
}

.p-contatore-vol-selezionati {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.p-contatore-uoc-selezionati {
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

.container-selezione-pagine {
  height: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 1.2rem;
  margin-bottom: 5rem;
  text-align: center;
}

.selezione-pagina-inizio,
.selezione-pagina-precedente,
.selezione-pagina-successiva {
  padding: 0 1rem 0 1rem;
  text-decoration: none;
  cursor: pointer;
  color: #707070;
}

.pag-non-selezionata {
  cursor: pointer;
  text-decoration: none;
  padding: 0 1rem 0 1rem;
  color: #707070;
}

.pag-selezionata {
  cursor: pointer;
  text-decoration: none;
  padding: 0 1rem 0 1rem;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--main-color);
}

.popup-ultimo-turno-volontario {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  -webkit-gap: 1rem;
  background-color: white;
  border-radius: 15px;
  padding: 0.3rem 1rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 0.9rem;
}

.btn-template {
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  background-color: white;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0.2rem;
}

.btn-template.template-selezionato {
  background-color: var(--main-color);
  color: white;
}

/** CONFERMA TURNI  */
.body-conferma-generati {
  overflow-x: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.h1-conferma {
  font-weight: 600;
  margin: 3rem;
  color: var(--main-color);
  text-align: center;
}

.container-content-generati {
  display: flex;
  align-items: flex-start;
}

.h2-conferma {
  font-weight: bold;
}

.container-squadra-generata,
.container-info-generati {
  min-width: 20vw;
  max-width: 90vw;
  background-color: white;
  padding: 1.5rem;
  margin: 1.5rem;
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.table-squadra-conferma {
  min-width: 33vw;
  align-self: flex-start;
  margin: 1rem auto 1rem auto;
  border-collapse: separate;
  border-spacing: 0.5rem 0.6rem;
}

.dato-tabella-riepilogo {
  padding: 0.7rem 1rem 0.7rem 1rem;
  border-radius: 10px;
  margin: 0px 20px 0px 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 1.1rem;
  position: relative;
}

.td-aggiungi-messaggi {
  text-align: center;
  cursor: pointer;
  width: 1rem;
  color: rgb(100, 100, 100);
}

.td-aggiungi-messaggi.nota {
  color: white;
  background-color: var(--main-color);
}

.table-dettagli-generato {
  width: 90%;
  font-size: 1.15rem;
  align-self: flex-start;
  margin: 1rem auto 1rem auto;
  border-collapse: separate;
  border-spacing: 0rem 0.3rem;
}

.bold-table-conferma {
  font-weight: bold;
}

.container-buttons-conferma {
  margin-top: 3rem;
  display: flex;
}

.btn-modifica {
  border: 0;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 13px;
  background: none;
  font-size: 1.15rem;
}

.btn-chiudi {
  border: 0;
  padding: 1rem 2rem 1rem 2rem;
  border-radius: 13px;
  background-color: var(--main-color);
  color: white;
  font-size: 1.15rem;
}

.conferma-uoc {
  font-weight: bold;
}

/* Pupup invio messaggi */
.popup-invio-messaggi {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.popup-messaggi-tutti {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.messaggio-popup-content {
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
}

.h2-messaggio-popup {
  font-size: 1.7rem;
  margin: 0 2rem 1.5rem 2rem;
}

.text-area-messaggio {
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  border: none;
  border-radius: 17px;
  padding: 0.3rem;
}

.text-area-messaggio:focus {
  box-sizing: border-box;
  outline: none;
}

.btns-popup-messaggio {
  display: flex;
  margin-top: 1.5rem;
}

.btn-conferma-popup-messaggio,
.btn-annulla-popup-messaggio {
  padding: 1rem;
  border: none;
  border-radius: 10px;
  margin: 0 0.5rem 0 0.5rem;
}

.btn-conferma-popup-messaggio {
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  background-color: var(--main-color);
  color: white;
}

.btn-annulla-popup-messaggio {
  background: white;
}

/** RICHIESTE ALIMENTI */
.excel-view {
  position: absolute;
  top: 10px;
  height: 90vh;
  width: 100vw;
  align-self: flex-end;
}

.body-mensa {
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-self: center;
  flex-direction: column;
  height: 100vh;
}

.p-mensa-non-trovato {
  margin-top: 25rem;
}

.provaprova {
  height: 100vh;
  overflow: hidden;
}

.container-calendario,
.table-fissi {
  font-size: 1.2rem;
  border-collapse: separate;
  border-spacing: 0.5rem 0.2rem;
  text-align: center;
}

.testtest {
  width: 100vw;
  height: 100vh;
}

.fissi {
  position: sticky;
  left: 0;
  background-color: black;
}

.container-calendario td,
.table-fissi td {
  border: 0.5px solid rgb(179, 179, 179);
  height: 1.5rem;
}

.heading-calendario {
  padding: 1rem;
  width: 7rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ul-elenco-categorie {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ul-scorta-minima,
.ul-giacenza,
.ul-consumo-6-giorni,
.ul-promessi,
.ul-da-richiedere,
.ul-aprile,
.ul-maggio,
.ul-giugno {
  margin: 0;
}

.no-show {
  background-color: black;
}

.input-giacenza {
  width: 100%;
  height: 1.4em;
  border: none;
  background: none;
  text-align: center;
  border: 0.5px solid rgb(179, 179, 179);
}

.input-giacenza:active {
  outline: none;
}

/** MENSA */
.link-mensa {
  cursor: pointer;
  margin: auto;
  margin-top: 30vh;
  font-weight: 600;
  color: white;
  padding: 1rem 2rem;
  background-color: var(--main-color);
  text-decoration: none;
  border-radius: 15px;
  font-size: 1.4rem;
}

.p-errore-mensa {
  margin: auto;
  margin-top: 30vh;
}

.mese {
  color: var(--main-color);
  font-weight: bold;
}

.ul-settimane {
  display: grid;
  grid-template-columns: repeat(4, auto);
  margin: 0;
}

.new-ul {
  display: grid;
  grid-template-columns: repeat(7, 5rem);
}

.stretto {
  width: 6rem;
  margin: 0;
}

.largo {
  text-align: left;
  width: 40rem;
  margin: 0;
  height: 1rem;
}

.elemento-giorni {
  width: 5rem;
  padding: 0;
}

.ul-giorno {
  margin: 0px;
}

.li-giorno {
  width: 5rem;
}

.li-mese {
  width: 7rem;
}

.ul-mese {
  margin: 0;
}

/** INSERIMENTO ALIMENTI */
.container-inserimento {
  margin-top: 10rem;
  background-color: white;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);

  border-radius: 20px;
  padding: 3rem;
  width: 30rem;
}

.nome-alimento,
.categoria-alimento,
.scorta-minima-alimento,
.consumo-alimento {
  margin-top: 1.2rem;
}

/** ERROR  */
.error-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.content-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 5rem;
  max-width: 80vw;
}

.error-icon {
  font-size: 6rem;
  color: var(--main-color);
}

/** VISUALIZZA VOLONTARI INSERITI */

.password-volontari-inseriti,
.turni-volontari-inseriti,
.modifica-volontari-inseriti,
.altro-volontari-inseriti {
  cursor: pointer;
  text-align: center;
  background-color: var(--main-color);
  color: white;
  width: 0.1rem;
  padding: 0 0.5rem;
  position: relative;
}

.th-info-volontari-inseriti {
  text-align: center;
  display: none;
}

.table-vol-inseriti {
  border-spacing: 0.7rem 1rem;
  border-collapse: separate;
  margin-bottom: 5rem;
}

.table-vol-inseriti td {
  padding: 1rem 1.5rem 1rem 1.5rem;
  border-radius: 10px;
  margin: 0px 20px 0px 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  font-size: 1.1rem;
}

.modifica-vol-el {
  background-color: white;
}

.table-vol-inseriti th {
  text-align: center;
}

.pallino-da-confermare-disponibilita {
  width: 17px;
  height: 17px;
  background: #ea9a00;
  border-radius: 50%;
  position: absolute;
  top: -2px;
  right: -2px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.pallino-da-confermare-turno {
  width: 17px;
  height: 17px;
  background: rgb(182, 23, 23);
  border-radius: 50%;
  position: absolute;
  top: -2px;
  right: -2px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.pallino-tutti-confermati {
  width: 17px;
  height: 17px;
  background: #129c30;
  border-radius: 50%;
  position: absolute;
  top: -2px;
  right: -2px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.disponibilita-volontari-inseriti-popup,
.turni-volontari-inseriti-popup {
  position: relative;
}

.pallino-da-confermare-disp {
  width: 17px;
  height: 17px;
  background: rgb(182, 23, 23);
  border-radius: 50%;
  position: absolute;
  top: -2px;
  right: -2px;
}

.table-popup-volontari-inseriti {
  margin: 1.5rem;
  width: 85%;
  font-size: 1.2rem;
  border-collapse: separate;
  border-spacing: 0.3rem;
}

.table-popup-volontari-inseriti th {
  font-size: 1rem;
  text-align: center;
  max-width: 33%;
}

.table-popup-volontari-inseriti td {
  width: 3rem;
  padding: 1rem;
  border-radius: 10px;
  color: white;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.13);
  background-color: var(--main-color);
}

.btn-info-list,
.btn-modifica-list,
.btn-password-list,
.btn-modifica-list {
  pointer-events: none;
}

.btn-modifica-list {
  position: relative;
}

.p-disponibilita {
  position: absolute;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  width: 15rem;
  color: black;
  font-size: 1rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  top: -100px;
  right: 50%;
  line-height: 1.3rem;
}

.p-disponibilita:before {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 0;
  margin-left: -10px;
  border-top: 10px solid transparent;
  border-right: 15px solid #fff;
  border-bottom: 10px solid transparent;
}

.disponibilita-inserita-modifica-volontari {
  font-size: 1.3rem;
  color: green;
}

.disponibilita-non-inserita-modifica-volontari {
  font-size: 1.3rem;
  color: rgb(182, 23, 23);
}

.x-close-popup {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 1.3rem;
  color: #8b8b8b;
}

/** MODIFICA VOLONTARI INSERITI  */

.modifica-vol-auto,
.modifica-vol-specializzazione,
.modifica-reparto1,
.modifica-reparto2,
.modifica-reparto3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.btn-annulla {
  width: 8rem;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--main-color);
  border-radius: 10px;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.btn-credenziali {
  margin-top: 0.5rem;
  background-color: var(--main-color);
  width: 100%;
  border-radius: 15px;
  border: none;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  height: 2.5rem;
  line-height: 1.15rem;
  padding-left: 5%;
  padding-right: 5%;
  color: white;
  cursor: pointer;
}

.icona-messaggi {
  margin-right: 0.75rem;
}

.container-buttons {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 80vw;
}

.popup-content-troppi-volontari {
  border-radius: 20px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: white;
  max-width: 85vw;
  text-align: center;
}

.p-popup-conferma-invio-messaggio {
  max-width: 90%;
  line-height: 1.25rem;
  margin-top: 0.5rem;
}

/** REGISTRAZIONE  */
.registrazione-body {
  min-height: 90vh;
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.registrazione-container {
  margin-top: 0;
  margin-bottom: 5rem;
  padding-bottom: 1.5rem;
  background-color: white;
  display: flex;
  border-radius: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40rem;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  max-width: 90vw;
}

.div-errore-registrazione {
  color: white;
  background-color: brown;
  max-width: 90%;
  text-align: center;
  font-size: 1.2rem;
  padding: 1rem;
  margin-top: 1rem;
  border-radius: 15px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.p-container-registrazione {
  max-width: 60%;
  text-align: center;
  margin-top: 1.5rem;
}

.form-registrazione {
  max-width: 90vw;
}

.label-form-registrazione {
  font-size: 1.1rem;
  font-weight: 600;
}

.p-ins-ruolo {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.8rem 0 0.3rem 0;
}

.ins-ess {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.radio-ruolo {
  margin: 0.3rem 0 0 1rem;
  font-size: 1.05rem;
}

.vol-nome,
.vol-cognome,
.vol-email,
.vol-telefono,
.vol-eta,
.vol-congregazione,
.vol-reparto,
.vol-sesso,
.vol-mensa,
.vol-annotazioni {
  width: 30rem;
  max-width: 80vw;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.content-vol-telefono {
  width: 65%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.telefono-input {
  width: 100% !important;
}

.container-input-telefono {
  position: relative;
  display: flex;
  flex-direction: column;
}

.p-telefono-sbagliato {
  color: rgba(228, 31, 31, 1);
  margin: 0.5rem 0;
  display: none;
}

.telefono-sbagliato {
  box-shadow: 0px 0px 7px 4px rgba(228, 31, 31, 0.3) !important;
  background-color: rgba(228, 31, 31, 0.05) !important;
  color: red;
  outline: none;
}

.container-uomo,
.container-donna {
  display: flex;
  gap: 0.3rem;
  margin-right: 1rem;
}

.vol-nome {
  margin-top: 2.5rem;
}

#telefono::placeholder {
  opacity: 0.5;
}

.container-radio-sesso {
  display: flex;
  align-items: center;
  margin-right: 9.5rem;
}

.container-uomo,
.container-donna {
  width: 40%;
}

.vol-ruolo {
  margin-bottom: 1rem;
}

.vol-mensa,
.vol-annotazioni,
.vol-congregazione,
.vol-auto {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reparto1,
.reparto2,
.reparto3 {
  display: none;
  align-items: center;
  justify-content: space-between;
}

.registrazione-form-essenziali {
  margin-top: 2rem;
}

.form-input {
  background-color: white;
  width: 65%;
  border-radius: 15px;
  border: none;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  height: 2.5rem;
  padding-left: 5%;
  padding-right: 5%;
  -webkit-appearance: none;
}

.spacer-form {
  width: 65%;
}

.checkbox-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 1.1rem;
  font-weight: 600;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: relative;
  top: 0;
  height: 25px;
  width: 25px;
  min-height: 25px;
  min-width: 25px;

  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
}

.checkbox-label:hover input ~ .checkmark {
  background-color: #ccc;
}

.checkbox-label input:checked ~ .checkmark {
  background-color: var(--main-color);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox-label input:checked ~ .checkmark:after {
  display: block;
}

.checkbox-label .checkmark:after {
  left: 10px;
  top: 6px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.btn-conferma-registrazione {
  width: 8rem;
  height: 3.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  border: none;
  color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 13px 7px #595ca941;
  margin-top: 2rem;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1rem;
}

/** RICHIESTE */
.calendario-richieste {
  max-width: 90vw;
  position: relative;
}

.giorno-menu-richieste {
  position: relative;
  width: 90%;
  aspect-ratio: 1;
  background-color: white;
  margin: 0.5rem;
  border-radius: 20px;
}

@media (max-width: 1200px) {
  .visualizza-turni-body {
    overflow: visible;
  }

  .nome-cognome-header {
    display: none;
  }

  .turno-non-generato,
  .turno-generato {
    width: auto;
    margin: 0.7rem 0.35rem;
    height: 4rem;
    line-height: 1.2rem;
    font-size: 1rem;
    padding: 0 0.75rem;
  }

  .data-turni-creati-parola {
    display: none;
  }
}

@media (max-width: 900px) {
  /** CONFEFRMA TURNO  */

  .container-content-generati {
    flex-direction: column-reverse;
    align-items: center;
  }

  .container-info-generati {
    width: 90vw;
  }

  .table-squadra-conferma td {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    line-height: 1.15rem;
  }

  .table-squadra-conferma th {
    font-size: 1.1rem;
  }

  .container-squadra-generata {
    padding: 1.2rem 0.75rem;
  }

  .container-squadra-generata h2 {
    margin-left: 0.6rem;
  }

  /** HEADER */
  .header {
    font-size: 1rem;
    position: fixed;
    top: 0;
    height: 4.5rem;
  }

  .header-right {
    display: none;
  }

  .nome-cognome-header,
  .turni-volontari-header {
    display: none;
  }

  .hamburger-header {
    display: flex;
  }

  /** INDEX */
  .tipologia-dati {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4rem;
  }

  .dati-value {
    font-size: 1.15rem;
    line-height: 1.4rem;
  }

  .home-button-disponibilita,
  .home-button-turni {
    align-self: flex-start;
    display: flex;
    justify-content: center;
    margin: 0.5rem 0px;
    background-color: white;
    width: 100%;
    min-width: 0rem;
  }

  .home-button-disponibilita {
    padding: 2rem 2rem 2rem 3.5rem;
    margin-left: -2rem;
    align-self: flex-start;
    border-radius: 40px;
    box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  }

  .home-button-turni {
    padding: 2rem 3.5rem 2rem 2rem;
    margin-right: -2rem;
    align-self: flex-end;
    flex-direction: row-reverse;
    border-radius: 40px;
    box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
  }

  .content-home-button-disponibilita,
  .content-home-button-turni {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    width: 100%;
    max-width: 22rem;
  }

  .content-home-button-turni {
    flex-direction: row-reverse;
  }

  .testo-home-button-disponibilita {
    font-size: 1.3rem;
    font-weight: bold;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    width: 80%;
  }

  .testo-home-button-turni {
    font-weight: bold;
    font-size: 1.3rem;
    position: absolute;
    width: 80%;
    right: 50%;
    pointer-events: none;
    transform: translateX(50%);
  }

  .icona-disponibilita,
  .icona-turni {
    color: var(--main-color);
    font-size: 2.5rem;
    pointer-events: none;
    padding: 0;
  }

  .icona-disponibilita {
    pointer-events: none;
    margin-top: -5px;
  }

  .freccia-turni {
    rotate: 180deg;
  }

  .h2-index {
    margin-top: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }

  .pallino-da-confermare-index {
    right: auto;
    left: -30px;
    top: -30px;
  }

  .dati-container {
    padding: 0.3rem;
  }

  .info-contatti {
    width: 100%;
    padding: 1rem 0 2rem;
    margin-top: 4rem;
    align-items: center;
    justify-content: center;
  }

  .title-info-contatti {
    width: 60%;
    min-width: 15rem;
    font-size: 1.2rem;
  }

  .table-contatti {
    font-weight: 300;
  }

  /** REGISTRAZIONE  */
  .registrazione-form-essenziali {
    width: 70vw;
    position: relative;
  }

  .registrazione-container {
    margin-top: 0;
  }

  .form-registrazione {
    width: 90%;
  }

  .p-container-registrazione {
    max-width: 80%;
    text-align: left;
  }

  .p-ins-ruolo {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.8rem 0 0.3rem 0;
  }

  .ins-ess {
    min-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .vol-cognome,
  .vol-email,
  .vol-telefono,
  .vol-eta,
  .vol-congregazione,
  .vol-reparto,
  .vol-sesso,
  .vol-mensa,
  .vol-annotazioni {
    margin: 0;
    margin-bottom: 0.8rem;
    display: block;
  }

  .vol-nome {
    display: block;
  }

  .container-radio-sesso {
    display: flex;
    align-items: center;
    margin-right: 9.5rem;
  }

  .container-uomo,
  .container-donna {
    width: 6rem;
  }

  .vol-ruolo {
    margin-bottom: 1rem;
  }

  .vol-mensa,
  .vol-annotazioni,
  .vol-congregazione,
  .vol-auto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  .registrazione-form-essenziali {
    margin-top: 2rem;
  }

  .form-input {
    background-color: white;
    width: 100%;
    border-radius: 15px;
    border: none;
    box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
    height: 2.5rem;
    padding-left: 5%;
    padding-right: 5%;
  }

  .modifica-vol-specializzazione {
    flex-direction: column;
    align-items: flex-start;
  }

  .modifica-vol-auto {
    margin-top: 1rem;
  }

  /** VISUALIZZA VOLONTARI INSERITI */

  .form-modifica-volontari-inseriti {
    position: relative;
  }

  .password-volontari-inseriti,
  .turni-volontari-inseriti,
  .modifica-volontari-inseriti {
    padding: none;
  }

  .table-vol-inseriti {
    width: 90vw;
    border-spacing: 0.4rem 0.6rem;
  }

  .table-vol-inseriti td {
    padding: 0.7rem 1rem;
    margin: 0;
    border-radius: 10px;
    font-size: 1.1rem;
  }

  .vol-id,
  .vol-dati,
  .vol-password,
  .vol-turni {
    display: none;
  }

  .info-volontari-inseriti {
    display: block;
    width: 100%;
    max-width: 3rem;
    height: 100%;
  }

  .th-info-volontari-inseriti {
    display: block;
  }

  .pallino-da-confermare {
    outline: none;
    width: 14px;
    height: 14px;
  }

  /** MODIFICA VOLONTARI INSERITI */
  .content-vol-telefono {
    width: 100%;
  }

  .h3-disp-popup-password {
    font-size: 1.5rem;
    margin: 2rem 2rem 0 2rem;
  }

  /** DISPONIBILITA  */

  .container-settimana-disp {
    width: 95vw;
    margin: auto;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* grid-template-rows: repeat(4, auto); */
    grid-auto-flow: row;
    margin-bottom: 3rem;
  }

  .disp-container {
    margin: auto;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
  }

  .giorno {
    margin: 0.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
    border-radius: 15px;
  }

  .giorno-null {
    aspect-ratio: none;
    margin: 0rem;
    border-radius: 20px;
    height: 95%;
    width: 90%;
  }

  .giorno-null.to-hide {
    display: none;
  }

  .mattina {
    width: 93%;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
  }

  .pomeriggio {
    width: 93%;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
  }

  .giorno-lettere {
    margin-top: 0.3rem;
    margin-bottom: 0rem;
  }

  .giorno-num {
    line-height: 3rem;
    margin-bottom: 0.1rem;
  }

  .selezione-mese {
    gap: 1.75rem;
    -webkit-gap: 1.75rem;
  }

  .disp-h2 {
    font-size: 1.45rem;
    text-align: center;
    margin-bottom: 3rem;
  }

  .disp-h1 {
    line-height: 1.75rem;
    font-size: 1.7rem;
    padding-bottom: 1.5rem;
  }

  .disp-conferma {
    padding: 1.2rem 2rem;
    font-size: 1.3rem;
    margin-top: 4rem;
  }

  .container-buttons-popup {
    flex-direction: column-reverse;
    gap: 0;
    margin-bottom: 1rem;
  }

  .h3-turno-popup {
    font-size: 1.5rem;
  }

  .container-buttons-popup button {
    margin: 0;
    font-size: 1.1rem;
  }

  /** VISUALIZZA TURNI  */
  .giorno-turno {
    font-size: 1.3rem;
    text-align: center;
  }

  .giorno-data-turni {
    display: none;
  }

  /** INFO TURNI  */

  .informazioni-p.data-orario {
    justify-content: center;
    margin-top: -8px;
  }

  .info-turno-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .tutto-informazioni {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .container-informazioni {
    width: 85vw;
    margin-top: 1.5rem;
    border-radius: 20px;
    padding: 1.5rem;
    margin-right: 0;
  }

  .container-informazioni div {
    padding: 0.3rem;
  }

  .table-informazioni-info-turno {
    margin: 0 auto 0 auto;
  }

  .fa-circle-info.icona-telefono-info-turno {
    display: block;
  }

  .to-hide-onmobile-telefono {
    display: none;
  }

  .to-hide-ondesktop-telefono {
    display: table-cell;
  }

  .telefono-info-turno {
    display: none;
  }

  .tutto-squadra {
    margin: 0px;
    margin-top: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .table-informazioni-squadra {
    margin: 0 5vw;
    border-spacing: 0.4rem 0.5rem;
    font-size: 0.9rem;
    width: 100%;
    margin-bottom: 0.5rem;
    text-align: center;
  }
  .table-informazioni-squadra.volontario {
    margin-bottom: 4rem;
  }

  .container-nome-volontario-info-turno {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3rem;
    padding: 0.3rem 0.6rem;
  }

  .telefono-volontario-info {
    display: none;
  }

  .td-proclamatore {
    background-color: white;
    padding: 0.3rem 0.6rem;
    border-radius: 10px;
    max-width: 40vw;
    font-size: 1rem;
    line-height: 1.3rem;
  }

  .casella-info-telefono {
    background-color: var(--main-color);
    color: white;
    border-radius: 10px;
    font-size: 1rem;
    position: relative;
    min-width: 2.5rem;
  }

  .informazioni-h2 {
    font-weight: bold;
    color: var(--main-color);
  }

  .informazioni-h3 {
    font-weight: 500;
    font-size: 1.4rem;
  }

  .informazioni-h4 {
    margin-top: 2rem;
    font-weight: 500;
    font-size: 1.2rem;
  }

  .informazioni-p {
    font-size: 1.1rem;
    margin: 0;
    padding: 0 5%;
  }

  .informazioni-reparto,
  .informazioni-responsabile {
    margin-top: 0;
  }

  .btn-modifica-turno {
    color: white;
    background-color: var(--main-color);
    padding: 1rem 2rem 1rem 2rem;
    border: none;
    border-radius: 10px;
    box-shadow: 0px 0px 13px 7px rgba(0, 0, 0, 0.08);
    margin: 2rem 2rem 0 2rem;
  }

  .popup-info-telefono-volontario {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    top: 0;
    left: 0;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    position: fixed;
  }

  .h3-info-telefono-volontario {
    font-size: 1.7rem;
    margin: 2.5rem 2rem 2rem 2rem;
  }

  .p-info-telefono-volontario {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
}

/** CALENDARI MENSILE RICHIESTE  */

.button-modifica-settimana-inserimento {
  border: none;
  background-color: var(--main-color);
  color: white;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 5px;
  width: 80%;
  font-size: 0.85rem;
}

/** INSERIMENTO OFFERTE */

.table-inserimento-offerte {
  border-collapse: separate;
  border-spacing: 1.5rem 0.7rem;
  text-align: center;
  margin-top: 3rem;
}

.table-inserimento-offerte td {
  background-color: white;
  border-radius: 20px;
  padding: 7px 20px;
}

.table-inserimento-offerte span {
  float: right;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* nome alimento */
.table-inserimento-offerte span div {
  width: 2px;
  height: 15px;
  background-color: #d7d7d7;
}

/* richiesta alimento */
.table-inserimento-offerte span:first-child {
  float: left;
}

.table-inserimento-offerte input {
  border: none;
  max-width: 5rem;
  text-align: center;
}

.offerta-completata td,
.offerta-completata span {
  background-color: var(--background-color);
  text-decoration: line-through;
  color: rgb(90, 90, 90);
}

.offerta-completata input {
  background-color: var(--background-color);
  color: black;
  font-weight: bold;
}

.table-offerte__check {
  display: none;
}

.offerta-completata .table-offerte__check {
  display: block;
  margin-left: -20px;
  color: var(--positive-green);
  font-size: 1.3rem;
}

/** Giorni offerte  */
.giorni-offerte__main-container {
  margin-top: 2rem;
}

.giorni-offerte__container {
  color: black;
  padding: 15px 25px;
  background-color: white;
  text-decoration: none;
  margin: 15px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 15rem;
  transition: background-color 0.2s !important;
}

.giorni-offerte__container:hover {
  background-color: #f1f1f1;
  color: black;
}

/** INSERIMENTO ALIMENTI */
.table-inserimento-alimenti {
  border-collapse: separate;
  border-spacing: 0px 1rem;
}

.table-inserimento-alimenti tr {
  background-color: white;
  box-shadow: var(--box-shadow);
}
.table-inserimento-alimenti td {
  padding: 10px 0px;
  text-align: center;
}
.table-inserimento-alimenti th {
  padding-right: 10px;
}
.td_align-left {
  text-align: left !important;
}

/** CALENDARIO SETTIMANALE RICHIESTE */
.body-richieste-settimanali {
  min-height: auto;
}

.table-richieste-settimanali {
  width: 100%;
  background-color: white;
  height: auto !important;
  border-collapse: separate;
  border-spacing: 0.5rem 0.3rem;
}

.table-richieste-settimanali td {
  box-shadow: var(--box-shadow);
  border-radius: 15px;
}

.container-giorno-richieste-settimana {
  background-color: var(--main-color);
  color: white;
  border-radius: 15px;
  padding: 5px 0;
  font-weight: normal !important;
}

.table-richieste-settimanali th {
  position: sticky;
  top: 11rem;
  background: #ffffff;
  text-align: center;
}

.table-richieste-settimanali td,
.table-richieste-settimanali th {
  width: 12.5%;
}

.table-richieste-settimanali div {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.table-richieste-settimanali div p {
  width: 33%;
}

.richieste-settimanali__header {
  height: 5rem;
}

.richieste-settimanali__header th {
  position: sticky;
  top: 3rem;
  padding-bottom: 2rem;
  width: 100%;
  background: #ffffff;
  text-align: center;
}

.richieste-settimanali__elenco-giorni {
  height: 8rem;
  border-bottom: 10px solid;
  border-color: transparent;
}

.table-richieste-settimanali input,
.totali-settimana {
  width: 29%;
  height: 60%;
  border: none;
  text-align: center;
  padding: 5px 0;
  border-radius: 15px;
}

.input-spacer-richieste-settimanali {
  height: 20px;
  width: 1px;
  display: inline-block;
  background-color: #696969;
}

.table-richieste-settimanali input:first-child,
.totali-settimana:first-child {
  border-color: transparent;
}

.richieste-settimanali__column-alimenti {
  font-size: 0.9rem;
  line-height: 0.95rem;
  min-width: 25%;
}

.td-column-totali {
  width: 100% !important;
  height: 100% !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.richiesta-pianificati,
.richiesta-pianificati > input {
  background-color: #ff9d00;
}

.richiesta-richiesti,
.richiesta-richiesti > input {
  background-color: var(--secondary-color);
}

.richiesta-consegnati,
.richiesta-consegnati > input {
  background-color: #64bd24;
}

.congregazione-dontante-settimanale {
  font-size: 0.95rem;
  letter-spacing: -0.5px;
  font-weight: normal;
}

/** GESTIONE MAGAZZINO  */
.giacenza-rossa td,
.giacenza-rossa input {
  background-color: #cd6561;
  color: white;
  font-weight: bold;
}

.giacenza-non-inserita td,
.giacenza-non-inserita input {
  background-color: var(--background-color);
  color: #2d2d2d;
}

/* 
G. Terragno
J. Fracchiolla
G. Di Pasquale
A. Pettinato
A. Grifa
D. Carretti
S. Diana
S. Vairo
M. Trotta
M. Anatrelli
*/