/* Optional local font declarations (keep commented if unused)
    @import url('https://fonts.googleapis.com/css2?family=Momo+Trust+Display&display=swap');
*/
/* Load Google-hosted fonts (Inter + Roboto) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mina&display=swap");

:root {
  --col-base: #4d0d3f;
  --col01: #e2dfca;
  --col02: #e07a5f;
  --col03: hsl(60, 20%, 1%);
  --col04: #f8f2f6;
  --col05: #2274a5;
  --col06: #f3ecf3;
  --col07: #6ca79f;
  --col08: #4164a5;
  --col-highlight-01: #d4d227;
  --col-highlight-02: #2b6de7;
  --col-highlight-03: #f75027;
  --col-highlight-04: #48abe0;
  --col-excel: #529956;
  --col-grey-dark: #666;
  --col-grey-dark2: #434343;
  --col-grey-medium: #8c8a8a;
  --col-grey-light: #999;
  --col-grey-light2: #ccc;
  --col-grey-light3: #f5f5f5;
  --col-text-dark: #333;

  --col-alert: rgba(255, 210, 63, 1);

  --filter-col-base: hue-rotate(190deg) saturate(150%) brightness(90%);

  --navbar-height: 50px;
  --navbar-p-y: 6px;
  --navbar-height-calculated: calc(var(--navbar-height) + (var(--navbar-p-y) * 2));
  --bottom-nav-icon-size: clamp(26px, 40px, 1.8vw);

  --user-tab-animation-duration: 300ms;

  --bottom-nav-height: 280px;
  --bg-nav: #2ea0f7;
  --color-nav: #bfe3fc;
  --color-nav-active: #fff;

  --circle-badge-size: 30px;
  --tables-gap: 2px;

  --dt-font-size: 0.59em;

  --luoghi-width: clamp(100px, 340px, 45%);

  --col-luogo-00: #ffffff;
  --col-luogo-01: #804099;
  --col-luogo-02: #43834c;
  --col-luogo-03: #cb3d3d;
  --col-luogo-04: #242424;
  --col-luogo-05: #348ab1;
  --col-luogo-06: #c1734a;
  --col-luogo-07: #8ddd9c;
  --col-luogo-08: #c5d300;
  --col-luogo-09: #774a00;
  --col-luogo-10: #bd98b6;
  --col-luogo-undefined: #d6b10a;

  --luoghi-slide-transition-duration: 170ms;
  --luoghi-slide-width: 66vw;
  --luoghi-slide-height: 100%;
  --luoghi-slide-p-x: 5px;
  --luoghi-slide-p-y: 10px;
  --luoghi-slide-border-width: 3px;
  --luoghi-slide-offset-w: calc((var(--luoghi-slide-width) + (var(--luoghi-slide-p-x) * 2) + (var(--luoghi-slide-border-width) * 2)) * -1);
  --luoghi-slide-offset-h: calc(
    (var(--luoghi-slide-height) + (var(--luoghi-slide-p-y) * 2) + (var(--luoghi-slide-border-width) * 2)) - (var(--navbar-height) + 68px)
  );

  --luoghi-box-radius: 8px;

  --tabs-allievi-gruppi-p-x: 8px;
  --tabs-allievi-gruppi-p-y: 8px;

  --note-type-card-ratio: 1.4;
  /* --event-col-current: #f0e68c; */
  --note-type-colour: #2f2f2f;
  /* --event-col-nt: #fcfcfc; */
  --event-col-nt: #ddd8d8;
  --event-col-regular-alternative: #9c27b0;
  /* --event-col-regular-alternative: #898989; */
  /* --event-col-regular-alternative: #616161; */
  --event-col-yc: #ffc107;
  --event-col-rc: #f44336;
  --event-col-sp: #2196f3;
  --event-col-wa: #ff8100;
  --event-col-wa-2: #868686;
  --wa-blink-duration: 800ms;
  --wa-glow-duration: 2000ms;
  --wa-transition-timing-function: ease-in-out;
  --semaforo-col-1: #f44336;
  --semaforo-col-2: #ff9800;
  --semaforo-col-3: #ffeb3b;
  --semaforo-col-4: #8bc34a;
  --semaforo-col-5: #4caf50;
}

@font-face {
  font-display: swap;
  font-family: "Momo";
  font-style: normal;
  font-weight: 400;
  src: url("/zappala/fonts/MomoTrustDisplay-Regular.ttf") format("truetype");
}

body,
html {
  width: 100vw;
  min-width: 100vw;
  max-width: 100vw;
}

body {
  /* background: linear-gradient(32deg, hsl(193 6 76), hsl(196 9 69) 50%); */
  /* background: var(--col04); */
  /* background: linear-gradient(133deg,rgba(248, 242, 246, 1) 0%, rgba(242, 228, 235, 1) 100%); */
  background: #f2ebf2;
  background: linear-gradient(346deg, rgba(242, 235, 242, 1) 0%, rgba(245, 237, 245, 1) 100%);
  overflow: hidden;

  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

* {
  /* fallback per browser che non supportano font-display swap */
  font-family:
    "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* evito che le icone di fontawesome ereditino il font-family generale */
.fa,
.fas,
.fa-solid,
.far,
.fa-regular {
  font-family: "Font Awesome 6 Free" !important;
}

.fab,
.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
}

.sticky-div {
  display: flex;
  position: sticky;
  flex-direction: column;
  /* top: 0; */
  background: white;
  z-index: 2;
  padding: 0px 0px 0px 0px;
  filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.2));
}

p,
h1,
h2,
h3,
h4,
h5,
div {
  color: black;
}

.hide {
  display: none !important;
}

#loading.show,
.loader.show {
  display: flex;
}

.loader.hidden {
  display: none;
}

.loader {
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  gap: 20px;
  flex-direction: column;
}

#loading {
  position: absolute;
  display: none;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 60vh;
  flex-direction: column-reverse;
  gap: 20px;
  width: 100%;
  /* height: calc(100vh - var(--navbar-height) - var(--navbar-height)); */
  height: 100vh !important;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.5);
  z-index: 1100;
}

#allievi-menu-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0px 2px 13px -4px rgba(0,0,0,0.5); */
  /* padding: 0px 5px 0px 2px; */
}

/* MARK: NAVBAR */

.navbar {
  display: flex;
  justify-content: center;
  justify-items: center;
  /* border: solid 2px;
    border-style: groove; */
  background: var(--col-base);
  padding: var(--navbar-p-y) 30px var(--navbar-p-y) 10px;
  font-size: clamp(0.8em, 2.6vw, 1.1em);
}

.navbar .pgm-name,
.navbar .pgm-version,
.navbar .navbar-text {
  /* color: #44688d; */

  color: white !important;
  padding: 0px;
}

.navbar img {
  height: var(--navbar-height);
}

#navbar-profile {
  position: absolute;
  left: 20px;
  cursor: pointer;
  /* filter: invert(1); */
}

#navbar-notifications {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  right: 20px;
  cursor: pointer;
  border: solid 2px var(--col-alert);
  border-radius: 100px;
  padding: 4px;
  height: 38px;
  width: 38px;
  place-content: center;
  text-align: -webkit-center;
}

div#navbar-notifications img {
  height: 22px;
  width: auto;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#navbar-notifications .pulse {
  position: absolute;
  z-index: 5;
}

div#main-container {
  display: flex;
  flex-direction: column;
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#bottom-nav {
  transition: all 0.25s ease-in-out;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
}

#bottom-nav .menu_item {
  pointer-events: auto;
  opacity: 1;
}

footer {
  transition: all 0.25s ease-in-out;
  z-index: 9999999999;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

.hide2 {
  opacity: 0 !important;
  pointer-events: none !important;
}

.shift-down {
  transform: translateY(100px);
  opacity: 0;
}

.table-hover > tbody > tr:hover {
  background-color: var(--col01) !important;
}

#loading.show {
  display: flex;
}

#loading {
  display: none;
  justify-content: center;
  align-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 60vh;
  flex-direction: column-reverse;
  gap: 20px;
}

#question-triangle-icon {
  height: 80%;
  width: auto;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

#question-triangle-icon svg {
  height: 100%;
  width: 100%;
}

#question-triangle-icon svg path {
  fill: none;
  stroke: var(--col-luogo-undefined);
  /* fill: black; */
}

#question-triangle-icon:after {
  content: "?";
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: var(--col-luogo-undefined);
  /* color: black; */
}

#luoghi.tab-section.collapsed #question-triangle-icon:after {
  font-size: 0px;
}

#luoghi.tab-section.collapsed #question-triangle-icon {
  height: 100%;
}

#luoghi.tab-section.collapsed #question-triangle-icon svg path {
  stroke: white;
  stroke-width: 1px;
}

#luoghi [luogo-id="999"] .cell-badge {
  padding-top: 15px;
}

#icon-wrapper {
  fill: transparent;
}

div#main {
  /* width: fit-content; */
  transition: all 300ms ease-in-out;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  /* max-width: min-content; */
  align-content: flex-start;
}

#main-overlay {
  position: fixed;
  top: var(--navbar-height-calculated);
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  z-index: 100;
  transition: opacity 200ms ease-in-out;
}

/*  MARK: CIRCLE MENU */

.circle-menu-toggler {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}

.circle-menu-toggler:hover + label,
.circle-menu-toggler:hover + label:before,
.circle-menu-toggler:hover + label:after {
  background: white;
}

.circle-menu-toggler:checked + label {
  background: transparent;
}

.circle-menu-toggler:checked + label:before,
.circle-menu-toggler:checked + label:after {
  top: 0;
  width: 40px;
  transform-origin: 50% 50%;
}

.circle-menu-toggler:checked + label:before {
  transform: rotate(45deg);
}

.circle-menu-toggler:checked + label:after {
  transform: rotate(-45deg);
}

.circle-menu-toggler:checked ~ ul .circle-menu-item {
  opacity: 1;
}

.circle-menu-toggler:checked ~ ul .circle-menu-item:nth-child(1) {
  transform: rotate(0deg) translateX(-110px);
}

.circle-menu-toggler:checked ~ ul .circle-menu-item:nth-child(2) {
  transform: rotate(60deg) translateX(-110px);
}

.circle-menu-toggler:checked ~ ul .circle-menu-item:nth-child(3) {
  transform: rotate(120deg) translateX(-110px);
}

.circle-menu-toggler:checked ~ ul .circle-menu-item:nth-child(4) {
  transform: rotate(180deg) translateX(-110px);
}

.circle-menu-toggler:checked ~ ul .circle-menu-item:nth-child(5) {
  transform: rotate(240deg) translateX(-110px);
}

.circle-menu-toggler:checked ~ ul .circle-menu-item:nth-child(6) {
  transform: rotate(300deg) translateX(-110px);
}

.circle-menu-toggler:checked ~ ul .circle-menu-item a {
  pointer-events: auto;
}

.circle-menu-toggler + label {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition:
    transform 0.5s,
    top 0.5s;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

.circle-menu-toggler + label:before,
.circle-menu-toggler + label:after {
  width: 40px;
  height: 5px;
  display: block;
  z-index: 1;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.7);
  transition:
    transform 0.5s,
    top 0.5s;
  content: "";
  position: absolute;
  left: 0;
}

.circle-menu-toggler + label:before {
  top: 10px;
}

.circle-menu-toggler + label:after {
  top: -10px;
}

.circle-menu-item:nth-child(1) a {
  transform: rotate(0deg);
}

.circle-menu-item:nth-child(2) a {
  transform: rotate(-60deg);
}

.circle-menu-item:nth-child(3) a {
  transform: rotate(-120deg);
}

.circle-menu-item:nth-child(4) a {
  transform: rotate(-180deg);
}

.circle-menu-item:nth-child(5) a {
  transform: rotate(-240deg);
}

.circle-menu-item:nth-child(6) a {
  transform: rotate(-300deg);
}

.circle-menu-item {
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 80px;
  height: 80px;
  display: block;
  opacity: 0;
  transition: 0.5s;
}

.circle-menu-item a {
  display: block;
  width: inherit;
  height: inherit;
  line-height: 80px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  font-size: 40px;
  pointer-events: none;
  transition: 0.2s;
}

.circle-menu-item img {
  vertical-align: inherit;
  filter: invert(0.5);
}

.circle-menu-item a:hover {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
  color: white;
  background: rgba(255, 255, 255, 0.3);
  font-size: 44.4444444444px;
}

/* MARK: luoghi-boxes */

#collapse-luoghi-tab-btn img {
  transition: all 0.23s ease-in-out;
}

#luoghi-boxes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 40px;
  /* border-bottom: solid 1px var(--col-base); */
  padding: 4px 4px;
  transition: all 0.2s ease-in-out;
}

#luoghi-boxes.hidden {
  overflow: hidden;
  height: 0px !important;
  padding: 0px;
}

#luoghi-boxes #luoghi-items {
  display: flex;
  align-items: center;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 60px;
  max-height: -webkit-fill-available;
}

#luoghi-boxes #luoghi-all-button {
  /* display: flex; */
  /* align-items: center;
  align-items: center;
  flex-direction: row; */
  /* width: 100%; */
  height: 60px;
  margin: 10px 3px;
  font-weight: 500;
  background: white;
  color: black;
  /* color: var(--col-base); */
  /* border: solid 1px black; */
  letter-spacing: 2px;
}

.luoghi-boxes-item.active {
  outline: solid 3px var(--col-base) !important;
  border-radius: 4px;
}

.luoghi-boxes-item {
  display: flex;
  /* background: red; */
  width: 100%;
  height: 100%;
  border-radius: 5px;
  margin: 0px 3px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* MARK: TABLE */

#tabbed-tables {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-width: 65vw;
  max-height: 100vh;
}

#tables {
  display: flex;
  gap: var(--tables-gap);
  /* padding: 7px 4px 4px 4px; */
  padding: 7px 0px 0px 0px;
  width: 100%;
  justify-content: start;
  /* background-color: var(--col-base); */
  min-height: 100vh;
}

#tables #allievi,
#tables #gruppi {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* padding-right: 56px; */
}

#tables #allievi,
#tables #gruppi,
#table-allievi-in-luogo {
  /* padding-right: 56px; */
}

#tables #luoghi {
  /* flex: 0 1 var(--luoghi-width); */
  width: var(--luoghi-width);
  min-width: 78px;
  overflow-x: hidden;
  border-right: solid 2px var(--col-base);
  background: #ddd0e1;
  justify-content: center;
  /* height: 100vh; */
  max-height: calc(100vh - var(--navbar-height) - 59px);
  scrollbar-width: thin;
}

#luoghi tr {
  height: 50px;
  min-height: fit-content;
  /* width: var(--luoghi-width); */
  transition: all 0.1s ease-in-out;
  background: rgba(255, 255, 255, 0.3);
  margin: 10px 0px;
  padding: 0px 0px;
  border-width: 3px 3px 3px 3px;
  overflow: hidden;
  border-radius: var(--luoghi-box-radius);
}

#tables #luoghi td {
  font-size: 1em;
  font-weight: 500;
  padding: 0px 0px;
  height: 100%;
  width: 100%;
  /* justify-content: center; */
}

#tables #allievi td,
#tables #gruppi td {
  font-weight: 500;
  font-size: 0.85em;
}

table {
  border-collapse: collapse;
  /* width: 320px; */
  display: flex;
  flex-direction: column;
  /* width: 100%; */
  /* background-color: rgb(211, 143, 143); */
}

tbody {
  width: inherit;
}

/* tr:not(#luoghi tr)  */
#table-allievi tr,
#table-allievi-in-luogo tr,
#table-gruppi tr,
.allievi-in-gruppo tr,
.allievi-gruppo-list li {
  border: 1px solid #999;
  padding: 0.5rem;

  margin: 2px 0px;

  border-radius: 5px;
  margin: 8px 6px 8px 0px;
  border: solid 2px var(--col-base);
}

.allievi-gruppo-list li {
  border-radius: 4px;
  border-width: 1px;
  border-color: var(--col-grey-light);
}

tbody tr {
  user-select: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  text-align: left;
  display: flex;
  /* flex-grow: 1; */
  /* transition: all 0.1s ease-in-out; */
}

#tables tbody td,
#tables tbody tr,
#tables tbody td .entry {
  display: flex;
  justify-items: center;
  align-items: center;
  /* font-family: Poppins; */
}

#luoghi td .entry {
  font-size: clamp(10px, 12px, 2.6vw);
  width: 100%;
  justify-content: center;
  background: white;
}

#tables tbody td {
  width: 100%;
  font-size: 1em;
}

tbody tr:hover {
  background-color: #d4d227;
}

#luoghi.tab-section,
#allievi.tab-section {
  /* height: calc(100vh - var(--navbar-height) - (var(--navbar-p-y) * 2));  */
}

#luoghi,
#tables .entry,
#luoghi tr {
  transition: all 0.3s ease-in-out;
}

#allievi tr {
  transition: all 0.14s ease-in-out;
}

#luoghi.tab-section.collapsed {
  width: 0px !important;
  /* width: 0px;
    overflow: hidden;
    padding: 0px;
    border: none; */
  /* min-width: 90px !important;
    max-width: 90px !important; */
}

#luoghi.tab-section.collapsed .entry {
  /* display: none; */
  font-size: 0px;
}

#luoghi.tab-section.collapsed .cell-badge {
  width: 100%;
}

#luoghi.tab-section.collapsed tr[luogo-id="999"] .entry img {
  /* display: none; */
}

#luoghi.tab-section.collapsed tr {
  /* width: 80px; */
}

#luoghi.tab-section.collapsed td {
  flex-direction: column;
}

#allievi-totali-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* background-color: var(--col-base); */
}

#table-allievi-in-luogo {
  padding-bottom: 80px;
}

#table-allievi-in-luogo tr {
}

#table-allievi-in-luogo tbody,
.allievi-in-gruppo tbody {
  /* padding-right: 50px; */
}

.allievi-in-gruppo tr,
#table-allievi-in-luogo tr {
  font-size: 14px;
}

#table-allievi tr {
  font-size: 16px;
}

.total-count {
  font-size: 0.9em;
  /* background-color: var(--col-base); */
  /* color: white; */
  background-color: var(--col06);
  width: 100%;
  text-align: center;
  border-width: 1px 0px 1px 0px;
  border-style: solid;
  border-color: var(--col-grey-light);
  padding: 3px;
  transition: all 0.2s ease-in-out;
  /* filter: drop-shadow(0px 7px 5px rgba(0, 0, 0, 0.33)); */
}

.allievi-dettaglio.total-count {
  font-size: 0.75em;
}

.total-count span.count-number {
  font-weight: 600;
  font-size: 1.2em;
  margin-left: 6px;
}

.total-count.allievi-in-gruppi {
  z-index: 10;
}

.total-count.allievi {
  z-index: 11;
}

.total-count.hidden {
  font-size: 0px;
  height: 0px;
  /* overflow: hidden; */
  padding: 0;
}

.tab-section {
  /* background-color: var(--col04); */
  padding: 5px;

  /* width: 50vw; */
  /* padding-top: 60px; */
  width: 100%;
}

.cell-badge {
  display: flex;
  position: relative;
  justify-content: center;
  justify-items: center;
  align-items: center;
  color: white;
  width: clamp(45px, 25%, 50%);
  height: 25px;
  background: var(--col02);
  border-radius: 0px;
  height: 100%;
  /* border-radius: 30px; */
  /* margin: 0px 5px 0px 8px; */
  /* padding: 3px 0px; */
}

#tables-header {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 10px 0px;
  background: var(--col01);
  position: fixed;
  width: inherit;
  z-index: 2;
  display: none;
}

.table-title {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 50vw;
  justify-content: center;
  justify-items: center;
}

/* MARK: DRAG AND DROP  */
.ui-droppable-hover {
  background-color: #e0f7fa;
}

/* Style for dragging */
.ui-draggable-dragging {
  opacity: 0.5;
  z-index: 350;
  /* width: 100%; */
}

.ui-helper {
  /* z-index: 350; */
}

.ui-droppable-hover {
  opacity: 0.5;
  transform: scale(1.04);
}

.draggable-badge {
  height: 30px;
  width: 30px;
  background: red;
  border-radius: 5px;
}

/* #tables tbody tr {
    touch-action: pan-y !important;
} */

/* Blocca lo scroll SOLO sulla maniglia per attivare il drag */
.drag-handle {
  cursor: move;
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
  /* Colore di feedback per capire dove toccare (opzionale) */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Permette lo scroll verticale della pagina ma abilita il drag */
#allievi tbody tr,
#gruppi tbody tr {
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

#tables #allievi tbody tr,
#tables #gruppi tbody tr {
  touch-action: pan-y !important;
  -ms-touch-action: pan-y !important;
}

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

.allievi-in-luogo tr {
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* MARK: TABELLA DETTAGLI ALLIEVO  */
.gestione-allievo hr {
  margin: 0;
  border-top: solid 1px black;
  opacity: 0.25;
  width: 90%;
}

#dettagli-allievo-container table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 1.3em;
}

div#dettagli-allievo-container tr {
  border: none;
  background: white;
  /* filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.3)); */
  outline: solid 1px #00000045;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 14px;
}

div#dettagli-allievo-container th {
  width: 140px;
  border-right: solid 1px grey;
  margin-right: 20px;
}

.gestione-allievo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
}

.gestione-dettagli-area {
  padding: 12px 20px;
  border: solid 1px darkgray;
  width: 100%;
  border-radius: 5px;
  /* display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center; */
}

.block-content {
  filter: drop-shadow(0px 1px 5px rgba(0, 0, 0, 0.4));
  background-color: white;
}

.block-content:not(.semaforo-condotta-allievo) {
  border-width: 0px;
}

.luoghi-selection {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.sposta-allievo-wrapper {
  display: flex;
  flex-direction: column;
}

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

.spostamento-description {
  margin: 6px 2px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.char-counter {
  transition: all 0.2s ease-in-out;
}

.char-counter-wrapper {
  text-align: right;
  color: grey;
  margin-top: 4px;
  margin-right: 6px;
  transition: all 0.3s ease-in-out;
}

.spostamento-description .char-counter-wrapper {
  font-size: 0px;
}

.spostamento-description.expanded .char-counter-wrapper {
  font-size: 0.8em !important;
}

.spostamento-description-header {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  cursor: pointer;
}

textarea.spostamento-description-textarea {
  width: 100%;
  height: 1px;
  visibility: hidden;
  /* display: none; */
  resize: vertical;
  font-size: 12px;
  padding: 5px;
  border-radius: 4px;
  border: solid 1px #ccc;
  float: left;
  transition: all 0.2s ease-in-out;
}

textarea.spostamento-description-textarea.expanded {
  height: 120px;
  visibility: visible;
  display: block;
  padding: 6px 10px;
}

select#dettagli-allievo-sposta {
  min-width: 120px;
  padding: 5px;
  height: 32px;
  border-radius: 5px;
}

select#dettagli-allievo-sposta option {
  /* font-size: 14px; */
}

select#dettagli-allievo-sposta,
select#dettagli-allievo-sposta * {
  font-size: 14px;
}

.gestione-allievo .note-allievo {
  width: 100%;
}

.modal-subtitle.allievo-info {
  font-size: 12px;
  color: var(--col-grey-dark, #555);
  margin-bottom: 6px;
}

.gestione-allievo .note-allievo button.button-add-note {
  margin: 0px;
  width: 100%;
}

.button-sposta {
  width: 100%;
  padding: 10px;
  margin: 10px 0px 0px 0px;
}

.gestione-allievo .circle-buttons-area {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  /* justify-content: space-evenly; */
  align-items: center;
  margin: 10px;
}

/*MARK: MODIFICA DETTAGLI*/
.modifica-evento-dettagli-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px;
  /* font-size: 1.4em;
    font-style: italic;
    color: #888; */
}

.modifica-evento-dettagli-container label {
  font-weight: 600;
  min-width: 120px;
}

.modifica-evento-dettagli-container .field {
  font-style: italic;
  color: #888;
  font-size: 14px;
  display: flex;
  /* padding: 10px; */
  align-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;

  flex-direction: column;
  width: 100%;
  align-items: self-start;
}

textarea#evento-descrizione {
  /* resize: vertical; */
  min-height: 200px;
  max-height: 360px;
}

.modifica-evento-dettagli-container input,
.modifica-evento-dettagli-container select,
.modifica-evento-dettagli-container textarea {
  font-size: 1em;
  padding: 6px 10px;
  border-radius: 5px;
  border: solid 1px #ccc;
  width: 100%;
}

.modifica-evento-dettagli-container input:read-only,
/* .modifica-evento-dettagli-container select:read-only, */
.modifica-evento-dettagli-container textarea:read-only {
  background-color: #f5f5f5;
  color: #888;
  border: solid 1px #ddd;
  cursor: not-allowed;
}

.modifica-evento-dettagli-container .select-tipo-evento option {
  font-size: 13px;
}

/* MARK: SEMAFORO CONDOTTA */
.semaforo-condotta-allievo {
  justify-items: center;
}

.semaforo-options {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  justify-content: center;
}

.semaforo-label {
  justify-content: center;
  display: flex;
}
.semaforo-option {
  width: 28px;
  height: 28px;
  display: inline-block;
  margin: 0 6px;
  border-radius: 50%;
  cursor: default;
}

.circle-icon-button {
  width: 55px;
  height: 55px;
  border-radius: 25%;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #212223;
  background-color: var(--col-grey-dark2);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.circle-icon-button:active {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
  /* filter: brightness(120%); */
  /* filter: var(--filter-col-base); */
  background-color: var(--col-base);
  transform: translateY(1px);
}

.circle-icon-button img {
  width: 24px;
  height: 24px;
  filter: invert(1);
  display: block;
  margin: auto;
}

#search-button {
  position: absolute;
}

/* MARK: NOTE */

.notes-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  /* background-color: var(--menuBgColorMenu, #f0f0f0); */
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  color: var(--menuIconColor_active, #333);
  margin: 0.5rem 0;
}

.note-title-input {
  width: 100%;
  border: none;
  padding: 6px 10px;
  background-color: none;
}

textarea#note-textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  border-radius: 5px;
}

.note-controls {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  justify-content: space-around;
  align-items: center;
  gap: 10px;
}

#note-tab {
  display: flex;
  padding: 30px 10px;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 140px;
}

#note-tab #allievo-select {
}

#note-tab #allievo-select option {
  font-size: 14px;
}

.note-options {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 0.95em;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #eee;
}

.note-options input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.3s;
}

.note-options input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.note-options input[type="checkbox"]:checked {
  background: var(--col-base);
}

.note-options input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.note-options label {
  cursor: pointer;
  font-weight: 500;
  color: #333;
}

.multi-select-dropdown {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.selected-allievi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  background-color: #e0e0e0;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 12px;
  color: #333;
}

.chip .chip-remove {
  margin-left: 6px;
  cursor: pointer;
  font-weight: bold;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.chip .chip-remove:hover {
  background-color: #ccc;
  color: #000;
}

.multi-select-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 5px;
  border-bottom: 1px solid #eee;
}

.multi-select-item:last-child {
  border-bottom: none;
}

.multi-select-item label {
  cursor: pointer;
  flex-grow: 1;
  margin: 0;
  font-weight: normal;
}

.multi-select-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

#note-type-select {
  border-radius: 1px;
}

.note-type-selection {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  border: solid 2px rgba(0, 0, 0, 0.3);
  /* border-radius: 10px; */
  padding: 10px 20px;
  padding: 6px 0px 0px 0px;
  /* border: inset; */
  overflow: hidden;
}

.note-type-choices {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;

  padding: 10px 20px;
}

.note-type-option {
  position: relative;
  overflow: hidden;
  width: 40px;
  /* height: 100%; */
  height: 40px;
  aspect-ratio: calc(1 * var(--note-type-card-ratio));
  border: solid 2px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  --note-type-diag-color: red;
  --note-type-diag-angle: calc(45deg + (var(--note-type-card-ratio) - 1) * 15deg);
  transform-origin: center;
  transform: scale(0.9);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
}

.note-type-option.selected {
  transform: scale(1.2);
  z-index: 3;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28);
}

.note-type-option:visited {
  border-color: rgba(0, 0, 0, 0.6);
}

.note-type-option:hover {
  border-color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}

.note-type-option:active {
  border-color: rgba(0, 0, 0, 0.9);
}

.note-type-option.nota::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(103% * var(--note-type-card-ratio));
  height: 2px;
  background: var(--note-type-diag-color);
  transform: translate(-50%, -50%) rotate(var(--note-type-diag-angle));
  transform-origin: center;
  pointer-events: none;
}

.note-type-option.yc {
  background: var(--event-col-yc);
}

.note-type-option.rc {
  background: var(--event-col-rc);
}

#insert-note-btn {
  font-size: 1.2em;
  width: 50%;
  max-height: 80px;
}

.selected-note-type-display {
  /* background-color: #2f2f2f; */
  background-color: var(--note-type-colour);
  color: white;
  width: 100%;
  text-align: center;
  font-size: 16px;
}

/* MARK: TOOLTIPS  */

/* #allievi [luogo-descr]::before {
  content: attr(luogo-descr);
  position: absolute;
  right: 20px;
  border-radius: 8px;
  padding: 0.var(--tabs-allievi-gruppi-p-y) var(--tabs-allievi-gruppi-p-x);
  color: #ddd;
  background-color: hsl(198 16 30);
  box-shadow: 0 6px 12px -6px #0003;
  opacity: 0;
  pointer-events: none;
  scale: 0 0;
  z-index: 999;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 350ms ease-out;
}

#allievi tr:where(:hover, :focus-visible)[luogo-descr]::before {
  opacity: 1;
  scale: 1;
} */

/* MARK: LIST */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

li {
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

li span {
  position: absolute;
  margin-left: -1.3em;
}

ul {
  border-collapse: collapse;
  width: 320px;
  display: grid;
}

#table-allievi li,
#table-allievi-in-luogo li,
#table-gruppi li,
#allievi-in-gruppo li {
  border: 1px solid #999;
  padding: 0.5rem;
  text-align: left;
  display: grid;
  margin: 2px 0px;
  user-select: none;
  cursor: pointer;
  border-radius: 10px;
}

#table-allievi li:hover,
#table-allievi-in-luogo li:hover,
#table-gruppi li:hover,
#allievi-in-gruppo li:hover {
  background-color: #d4d227;
}

/* attività */
#attivita-content {
  gap: 10px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.attivita-item {
  display: flex;
  flex-direction: column;
  /* background: var(--col-grey-light3);
  border-radius: 12px;
  border: solid 2px var(--col-base); */
  border: solid 1px;
  border-left: solid 5px;
  padding: 8px 12px;
}
.attivita-item > * {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.attivita-item .attivita-time {
  align-items: center;
  flex-direction: row;
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 5px;
  font-weight: bold;
}
.attivita-item .gruppo-name {
  align-self: center;
  width: 100%;
  justify-content: center;
  border-top: dashed 1px #00000085;

  padding: 4px 10px;
  background: white;
  border-radius: 22px;
  font-size: 14px;
  color: black;
  min-width: 100px;
}
.attivita-time-badge {
  padding: 4px 10px;
  background: white;
  border-radius: 22px;
  font-size: 12px;
  color: black;
  position: absolute;
  right: 0px;
  min-width: 100px;
}

/*  MARK: BOTTOM-NAVBAR*/

html {
  /* --bgColorMenu: #1d1d27; */
  --menuBgColorMenu: var(--col-base);
  --menuDuration: 0.22s;
  /* --bgColorItem: #ff8c00; */
  --menuBgColorItem: var(--col-base);
  /* --menuBgColorItem_active: #391030; */
  --menuBgColorItem_active: white;
  --menuIconColor_active: var(--col-base);
}

.menu {
  margin: 0;
  display: flex;
  /* width: 35em; */
  font-size: calc(var(--bottom-nav-icon-size) / 2) !important;
  padding: 0 3em;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0px;
  align-items: center;
  justify-content: center;
  background-color: var(--menuBgColorMenu);
  border-radius: 2px;
  z-index: 99;
  /* iOS safe area inset for devices with home indicator */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* height: 148px; */
  /* display: none; */
}

.menu_item {
  all: unset;
  flex-grow: 1;
  z-index: 100;
  display: flex;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  align-items: center;
  will-change: transform;
  justify-content: center;
  padding: 0.55em 0 0.85em;
  transition: transform var(--timeOut, var(--menuDuration));
}

.menu_item .menu_color_2 {
  --menuBgColorItem: var(--col02);
}

.menu_item::before {
  content: "";
  z-index: -1;
  width: calc(var(--bottom-nav-icon-size) * 2);
  height: calc(var(--bottom-nav-icon-size) * 2);
  border-radius: 50%;
  position: absolute;
  transform: scale(0);
  transition: transform var(--menuDuration);
}

.menu_item.active {
  transform: translate3d(0, -0.8em, 0);
}

.menu_item.active::before {
  transform: scale(1);
  background-color: var(--menuBgColorItem_active);
}

.menu_item.active .icon {
  animation: strokeit 1.1s reverse;
  stroke: var(--menuIconColor_active) !important;
}

.icon {
  width: var(--bottom-nav-icon-size);
  height: var(--bottom-nav-icon-size);
  stroke: white;
}

.icon path {
  stroke: white;
  fill: transparent;
  stroke-width: 1pt;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
}

.active .icon path {
  stroke: var(--col-base);
}

.menu .icon.allievi-moving path {
  /* fill: white; */
  /* stroke: red; */
  /* stroke-width: 1px; */
}

.menu .icon.fill path {
  fill: white;
  stroke: none;
}

.menu .active .icon.fill path {
  fill: var(--col-base);
  stroke: none;
}

@keyframes strokeit {
  100% {
    stroke-dashoffset: 400;
  }
}

.menu_border {
  left: 0;
  bottom: 99%;
  width: 10.9em;
  height: 2.4em;
  position: absolute;
  clip-path: url(#menu);
  will-change: transform;
  background-color: var(--menuBgColorMenu);
  transition: transform var(--timeOut, var(--menuDuration));
}

.svg-container {
  width: 0;
  height: 0;
}

.menu_item img {
  width: var(--bottom-nav-icon-size);
  height: var(--bottom-nav-icon-size);
  filter: invert(1);
  /* transition: filter var(--menuDuration);  */
}

.menu_item.active img {
  filter: invert(6%) sepia(20%) saturate(7500%) hue-rotate(302deg) brightness(97%) contrast(94%);
  /* FILTER: VAR(--filter-col-base); */
}

@media screen and (max-width: 50em) {
  .menu {
    font-size: 0.8em;
  }
}

/* MARK: SLIDING DIVS */

#slider-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0px 10px 0px;
  background-color: #d4d227;
  font-weight: 600;
  margin: -1px;
}

#slider-title {
  flex-grow: 1;
  position: relative;
  --slider-underline-color: black;
  font-size: 14px;
  text-align: center;
  max-width: calc(100% - 40px);
}

#__slider-title:after {
  content: "";
  width: 60%;
  height: 1px;
  background-color: var(--slider-underline-color);
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
}

#slider-div-container {
  /* display: none; */
  text-align: center;
  /* background: #16a085; */
  background-color: white;
  color: #fff;
  /* padding: var(--luoghi-slide-p-y) var(--luoghi-slide-p-x); */

  position: absolute;
  z-index: 99;
  height: 100%;
  transition: transform var(--luoghi-slide-transition-duration) ease-in-out;
  transition-property: transform, opacity, filter;
  border-radius: 3px;
  height: var(--luoghi-slide-offset-h);
  width: var(--luoghi-slide-width);
  top: calc(var(--navbar-height) + var(--navbar-p-y) * 2);
  /* left: var(--luoghi-slide-offset-w); */
  left: auto;
  right: var(--luoghi-slide-offset-w);
  filter: drop-shadow(2px 3px 33px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0px 2px 38px rgba(0, 0, 0, 0.7));
}

#slider-content {
  padding: 10px 3px;
  overflow-x: auto;
}

.slider-close-button {
  position: absolute;
  right: 10px;
  top: 4px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.6em;
  border-radius: 100px;
  background-color: white;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-close-button img {
  width: 16px;
  height: 16px;
}

#close-button {
  /* display: flex;
    justify-content: flex-end;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.6em;
    position: absolute;
    right: 4px;
    top: 2px;
    border-radius: 100px;
    background-color: white; */
  cursor: pointer;
}

/* MARK: TABS SWITCH */
/* ALLIEVI GRUPPI*/
#allievi-gruppi-menu {
  padding: 4px 4px;
}

#allievi-gruppi-menu .tabs {
  display: flex;
  position: relative;
  background-color: #fff;
  box-shadow:
    0 0 1px 0 rgba(24, 94, 224, 0.15),
    0 6px 12px 0 rgba(24, 94, 224, 0.15);
  padding: var(--tabs-allievi-gruppi-p-y) var(--tabs-allievi-gruppi-p-x);
  border-radius: 99px;
  width: fit-content;
  margin: 0px 20px;
  align-items: center;
  gap: 30px;
}

#allievi-gruppi-menu span.content {
  display: flex;
  align-items: center;
}

#allievi-gruppi-menu .tabs * {
  z-index: 2;
}

#allievi-gruppi-menu .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 54px; */
  /* width: 200px; */
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 99px;
  cursor: pointer;
  transition: color 0.15s ease-in;
  background: none;
  border: none;
  outline: none;
  margin: 0px 20px;
}

#allievi-gruppi-menu .notification {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: 10px;
  /* margin: 3px 0px 3px 10px; */
  border-radius: 50%;
  background-color: var(--col01);
  transition: 0.15s ease-in;
}

#allievi-gruppi-menu .tab.active .content {
  color: white;
}

#allievi-gruppi-menu .tab.active .notification {
  background-color: white;
}

#allievi-gruppi-menu .tab.active > .notification {
  background-color: var(--col-base);
  color: #fff;
}

#allievi-gruppi-menu .glider {
  position: absolute;
  display: flex;
  /* height: 54px; */
  /* height: -webkit-fill-available; */
  height: 34px;
  /* width: 200px; */
  background-color: var(--col01);
  z-index: 1;
  border-radius: 99px;
  /* margin: var(--tabs-allievi-gruppi-p-x) 0px; */
  margin: var(--tabs-allievi-gruppi-p-x);
  transition: 0.15s ease-out;
  background-color: var(--col-base);
  filter: drop-shadow(2px 3px 33px rgba(0, 0, 0, 0.2));
}

#allievi-gruppi-menu .tab-content {
  display: flex;
  flex-direction: row;
  align-content: center;
  font-size: 0.8em;
}

/* MARK: MODAL */

#modal-div[modal-id="dettagli-allievo-modal"] .modal-body {
  border: none !important;
  padding: 10px !important;
  margin: 0px !important;
  overflow: auto;
  transition: all 0.4s ease-in-out;
}

div#modal-div[modal-id="timeline-allievo-modal"] .modal-content {
  min-height: 99vh;
}

div#modal-div[modal-id="stats-allievo-modal"] .modal-content {
  min-height: 680px;
  transition: all 0.4s ease-in-out;
}
div#modal-div[modal-id="stats-allievo-modal"] .modal-body {
  overflow: auto;
}

div#modal-div[modal-id="timeline-allievo-modal"] .modal-body {
  padding: 6px;
}

#modal-div .modal-content {
  /* padding: 0px 0px 20px 0px; */
  height: 70vh;
  /* max-height: 700px; */
  /* max-height: 90vh; */
  overflow-y: hidden;
  padding-bottom: 40px;
  filter: drop-shadow(3px 5px 26px var(--col-base));
}

.icon-circle-button {
  display: flex;
  cursor: pointer;
  align-content: center;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background-color: var(--col08);
}

#close-button.icon-circle-button {
  position: absolute;
  right: 12px;
  top: 16px;
}

.icon-circle-button img {
  width: 32px;
  height: 32px;
  filter: invert(1) brightness(900%);
}

#modal-div .title-area {
  /* display: flex; */
  align-content: center;
  /* justify-items: center; */
  width: calc(100% - 120px);
  padding: 0px 10px;
}

#modal-div .modal-body {
  font-size: 0.7em;
  border: solid 1px grey;
  margin: 0px 5px;
}

#modal-div .modal-body ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-y: visible;
  overflow-x: hidden;
  /* height: 100vh; */
  transition: height 200ms ease-in-out;
}

#modal-div .modal-content > .modal-body {
  overflow-y: auto;
}

#modal-div .modal-body ul li {
  /* border: none; */
  width: auto;
  border-radius: 1px;
  margin: 2px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-radius: 4px;
}

#modal-div .modal-body ul li input[type="checkbox"] {
  width: 1.3em;
  height: 1.3em;
}

#modal-div .modal-buttons {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: row;
  justify-content: space-evenly;
}

#modal-div .info-bar {
  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: row;
  padding: 0px 20px;
  width: 100%;
}

.info-bar .allievo-dettagli {
  font-size: 14px;
}

#modal-div .modal-header {
  display: flex;
  flex-direction: column;
}

.modal-header button.close {
  border-radius: 50px;
  width: 20px;
  height: 30px;
  background: white;
}

#modal-div .title-bar {
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 100%;
  min-height: 44px;
}

#modal-div .modal-buttons button {
  width: 130px;
  height: auto;
  border: none;
  border-radius: 19px;
  padding: 5px 15px;
  background-color: var(--col08);
  color: white;
  font-size: 0.9em;
}

.custom-button {
  border: none;
  border-radius: 5px;
  padding: 5px 15px;
  background-color: var(--col08);
  color: white;
}

#modal-div .allievi-count {
  margin-right: 10px;
  font-weight: 600;
}

#modal-div .modal-buttons button:active {
  /* background-color: var(--col-highlight-04) !important;
  color: black; */
  filter: saturate(0.5);
}

#modal-div .modal-buttons {
  margin: 20px 0px;
}

/* MARK: STATS ALLIEVO */
#actions-list-wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  opacity: 1;
  pointer-events: auto;
  overflow: hidden;
  transition: all 0.25s ease-in-out;
  filter: blur(0px);
}

#actions-list-wrapper.hidden {
  opacity: 0;
  pointer-events: none;
  filter: blur(14px);
}

.stats-allievo-content {
  pointer-events: all;
  opacity: 1;
  transition: all 0.25s ease-in-out;
}

.stats-events-header .titolo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  z-index: 1001;
}

.stats-allievo-content.hidden {
  opacity: 0;
  pointer-events: none;
  /* filter: blur(14px); */
}

.stats-allievo-content #stats-charts-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

label.date-range-label {
  /* padding-bottom: 4px; */
  font-weight: 600;
}

.eventi-totali {
  font-size: 14px;
  /* padding-top: 4px; */
}

/* MARK: DATERANGEPICKER CUSTOM STYLE */
.drp-range-row.style01 * {
  /* filter: hue-rotate(45deg); */
}
#date-range-picker {
  margin: 4px 0px;
}

.daterangepicker.style01 {
  width: auto;
  min-width: 300px;
  left: 4% !important;
  width: 96% !important;
  max-width: max-content;
  top: 50% !important;
  transform: translateY(-50%) !important;
  filter: drop-shadow(2px 2px 14px var(--col-base));
}

.daterangepicker.style01:before,
.daterangepicker.style01:after {
  display: none !important;
  border: none !important;
  content: none !important;
}

.daterangepicker.style01 .drp-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px;
  max-width: 275px;
}

.daterangepicker.style01 .drp-buttons-wrapper {
}

.daterangepicker.style01 .span.drp-selected {
  font-size: 14px;
  font-weight: 600;
  color: var(--col-grey-dark);
}

.daterangepicker.style01 .drp_calendar {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.daterangepicker.style01 .drp-range-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  max-width: max-content;
  gap: 10px;
}

.daterangepicker.style01 .ranges ul {
  flex-direction: column;
  gap: 5px;
}

.daterangepicker.style01 .ranges li {
  display: flex;
  align-items: center;
  padding: 12px 12px !important;
  cursor: pointer;
}

.daterangepicker.style01 .ranges {
  display: flex;
}

.daterangepicker .ranges li.active {
  /* background-color: var(--col-base);
    color: white; */
  /* background-color: #08c;
    color: #fff; */
  padding: 6px 0px 21px 10px;
  /* margin: 5px 0px; */
}

.daterangepicker .ranges ul {
  padding: 2px 0px 9px 0px !important;
}

.time-in-wa-info {
  height: 34px;
  /* background: red; */
  width: 100%;
  border-top: solid 1px darkgrey;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 0px 12px;
  /* background: var(--col01); */
  font-size: 12px;
}

.action-wa-time-info {
  font-weight: 500;
  font-size: 0.9em;
  color: var(--col-grey-dark);
}

.stats-header-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;

  align-items: center;

  background-color: var(--col-grey-light3);
  border-radius: 8px;
  /* margin-bottom: 10px; */
  top: 0;
  position: relative;

  width: 100%;
  z-index: 1111;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.4);
  border-radius: 0px;
}

.stats-events-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  padding: 6px 12px;
  height: 41px;
}

/* MARK: BOOTBOX */
.bootbox-prompt-message {
  padding: 10px 4px;
}

.bootbox.modal.fade.bootbox-confirm.show {
  z-index: 1070;
}

.modal-backdrop.bootbox-above-modal {
  z-index: 1060;
}

/* MARK:  SWIPER */

.swiper {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
}

.swiper-button-prev,
.swiper-button-next {
  background: red;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #444;
  display: initial;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  transition: all 0.3s ease-in-out;
}

.swiper-slide.swiper-slide.slide-hide {
  opacity: 0;
}

.swiper-backface-hidden .swiper-slide {
  height: calc(100vh - var(--navbar-height));
  /* background: linear-gradient(45deg, rgb(237 211 196), rgb(255 255 255)); */
  background: linear-gradient(45deg, rgb(233 233 233), rgb(255 246 253));
}

.swiper[data-active-index="1"],
.swiper[data-active-index="2"] {
  overflow: clip;
}

/*MARK: #ff00f7*/

/* MARK: TIMELINE */

.timeline-modifica {
  position: absolute;
  right: 50px;
  top: 12px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--col-grey-light);
  font-style: italic;
}

.timeline-delete {
  position: absolute;
  right: 14px;
  top: 12px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--col-grey-light);
  font-style: italic;
}

.icon-missing-01 {
  position: relative;
  width: 30px;
  height: 30px;
  font-size: 0px;
  line-height: 0px;
  display: inline-block;
  transform: scale(0.8);
}

.icon-missing-01::after {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: var(--event-col-wa);
  -webkit-mask-image: url("http://172.22.1.22/zappala/college_tracker/img/missing-03.svg");
  mask-image: url("http://172.22.1.22/zappala/college_tracker/img/missing-03.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  /* animation: wa-glow var(--wa-glow-duration) var(--wa-transition-timing-function) infinite; */
  animation: wa-blink-glow-sizeup var(--wa-glow-duration) var(--wa-transition-timing-function) infinite;
}

.timeline-item.type-WA .timeline-icon,
.timeline-item.type-WA .timeline-content {
  animation: wa-blink var(--wa-glow-duration) var(--wa-transition-timing-function) infinite;
}

#timeline-allievo-container {
  padding-bottom: calc(var(--bottom-nav-height) * 0.8);
}

.timeline-header {
  padding: 10px 20px;
  /* text-align: center; */
}

.type-WA .timeline-icon {
  /* position: relative; */
}

.no-timeline-data-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.timeline-data-picker-label {
  font-size: 12px;
  color: var(--col-grey-dark);
  padding: 2px;
}

.timeline-date-picker-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.timeline-date-picker-container input#timeline-date-picker {
  border: solid 1px var(--col-grey-light);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  color: var(--col-grey-dark);
}

.no-timeline-data {
  font-size: 14px;
  color: var(--col-grey-dark);
  text-align: center;
}

.no-timeline-icon {
  text-align: center;
  font-size: 3rem;
  color: #ccc;
  margin-top: 2rem;
}

.timeline-container {
  position: relative;
  padding: 20px 0;
  margin: 0 10px;
}

.timeline-container::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 24px;
  /* Adjust based on icon size */
  width: 2px;
  background: #e0e0e0;
  z-index: 0;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
  padding-left: 60px;
  z-index: 1;
}

.timeline-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: #555;
  z-index: 2;
}

.timeline-icon__:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.timeline-content {
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #ccc;
}

.timeline-time {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 5px;
  font-weight: bold;
}

.timeline-title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.timeline-title span.spostamento {
  font-size: 0.7rem;
  color: var(--col-grey-medium);
  margin-left: 4px;
  font-weight: 600;
}

.timeline-desc {
  font-size: 0.9rem;
  color: var(--col-grey-dark);
}

.timeline-meta {
  font-size: 0.8rem;
  color: var(--col-grey-light);
  margin-top: 5px;
  font-style: italic;
}

.type-SP .timeline-icon {
  border-color: #2196f3;
  color: #2196f3;
}

.type-SP .timeline-content {
  border-left-color: #2196f3;
}

.type-NT .timeline-icon {
  border-color: var(--event-col-regular-alternative);
  color: var(--event-col-regular-alternative);
}

.type-NT .timeline-content {
  border-left-color: var(--event-col-regular-alternative);
}

.type-YC .timeline-icon {
  border-color: var(--event-col-yc);
  color: var(--event-col-yc);
}

.type-YC .timeline-content {
  border-left-color: var(--event-col-yc);
}

.type-RC .timeline-icon {
  border-color: var(--event-col-rc);
  color: var(--event-col-rc);
}

.type-RC .timeline-content {
  border-left-color: var(--event-col-rc);
}

/* MARK: SKELETON */

#main-skeleton {
  /* opacity: 0.7; */
  background: white;
  /* background: linear-gradient(346deg, rgba(242, 235, 242, 1) 0%, rgba(245, 237, 245, 1) 100%); */
  position: absolute;
  z-index: 200;
  width: 100%;
  margin-top: calc(var(--navbar-height) + 5px);
}

.skeleton-content {
  height: 100vh;
  display: flex;
  /* flex-direction: column;
  justify-content: center;
  align-items: center; */

  flex-direction: row;
  align-items: flex-start;
  gap: var(--tables-gap);
  padding: 7px 4px 4px 4px;
  padding: 0px;
  width: 100%;
  justify-content: start;
}

#skeleton-luoghi .skeleton-item-wrapper {
  height: 70px;
  margin: 10px 0px;
}

#skeleton-allievi #skeleton-allievi-menu .skeleton-item-wrapper {
  height: 100px;
  margin: 0px 0px;
}

#skeleton-allievi .skeleton-item-wrapper {
  height: 40px;
  margin: 15px 0px;
}

.skeleton-content .item {
  width: 95%;
  height: 100%;
  /* border: solid 1px green; */
}

#skeleton-allievi .item {
  border-radius: 18px;
}

.skeleton {
  background-color: #e2e5e7;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  background-size: 40px 100%;
  background-repeat: no-repeat;
  background-position: left -40px top 0;
  -webkit-animation: shine 1s ease infinite;
  animation: shine 1s ease infinite;
}

.skeleton-tab-section {
  padding: 5px;
  width: var(--luoghi-width);
}

#skeleton-tabbed-tables {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#skeleton-allievi {
  width: -webkit-fill-available;
}

.skeleton-content #skeleton-luoghi {
  overflow-x: hidden;
  height: 100%;
  border-right: solid 2px var(--col-base);
}

@-webkit-keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}

@keyframes shine {
  to {
    background-position: right -40px top 0;
  }
}

@keyframes wa-blink {
  0% {
    color: var(--event-col-wa-2);
    border-color: var(--event-col-wa-2);
  }

  50% {
    color: var(--event-col-wa);
    border-color: var(--event-col-wa);
  }

  100% {
    color: var(--event-col-wa-2);
    border-color: var(--event-col-wa-2);
  }
}

@keyframes wa-blink-bg-col {
  0% {
    background-color: var(--event-col-wa-2);
  }

  50% {
    background-color: var(--event-col-wa);
  }

  100% {
    background-color: var(--event-col-wa-2);
  }
}

@keyframes wa-glow {
  0% {
    box-shadow: 0 0 2px var(--event-col-wa);
    /* filter: blur(2px) saturate(5); */
  }

  50% {
    box-shadow: 0 0 9px var(--event-col-wa);
    /* filter: blur(20px) saturate(5); */
  }

  100% {
    box-shadow: 0 0 2px var(--event-col-wa);
    /* filter: blur(2px) saturate(5); */
  }
}

@keyframes wa-sizeup {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes wa-blink-sizeup {
  0% {
    transform: scale(1);
    background-color: var(--event-col-wa-2);
  }

  50% {
    transform: scale(1.2);
    background-color: var(--event-col-wa);
  }

  100% {
    transform: scale(1);
    background-color: var(--event-col-wa-2);
  }
}

@keyframes wa-blink-glow-sizeup {
  0% {
    transform: scale(1);
    background-color: var(--event-col-wa-2);
    box-shadow: 0px 0px 2px var(--event-col-wa-2);
  }

  50% {
    transform: scale(1.2);
    background-color: var(--event-col-wa);
    box-shadow: 0px 0px 12px var(--event-col-wa);
  }

  100% {
    transform: scale(1);
    background-color: var(--event-col-wa-2);
    box-shadow: 0px 0px 2px var(--event-col-wa-2);
  }
}

/* #tables #allievi::-webkit-scrollbar,
#tables #gruppi::-webkit-scrollbar {
  width: 2em;
  height: 2em
} */

/* MARK: SCROLLBAR STYLE  */
/* #tables #allievi::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
#tables #allievi::-webkit-scrollbar-button {
    background: #ccc
}
#tables #allievi::-webkit-scrollbar-track-piece {
    background: #888
}
#tables #allievi::-webkit-scrollbar-thumb {
    background: #eee
}​ */

/* ::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 4px;
}


::-webkit-scrollbar-thumb {

  border-radius: 4px;
} */

/* MARK: LOGIN PANEL */

#login-panel {
  opacity: 1;
  filter: none;
  transition: all 0.25s ease-in-out;
}

#login-panel.hidden {
  opacity: 0;
  filter: blur(4px);
  /* display: none; */
}

.login-container {
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
}

.login-container h2 {
  margin-bottom: 20px;
  color: #333;
}

.login-container input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
}

.login-container button {
  width: 100%;
  padding: 10px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.login-container button:hover {
  background: #5a6fd8;
}

.login-container a {
  display: block;
  margin-top: 15px;
  color: #667eea;
  text-decoration: none;
}

.login-container a:hover {
  text-decoration: underline;
}

/* MARK: PROFILE TAB */

#user-tab {
  width: 100vw;
  height: 100vh;
  background: white;
  z-index: 800;
  position: absolute;
  transform: translateY(120vh);
  /* filter: drop-shadow(2px -15vh 46px rgba(0,0,0,0.5)); */
  /* background-image: linear-gradient(to left top, #e2d9e0, #faf2fd, #f8ebff); */
  /* background: linear-gradient(346deg,rgb(231, 231, 231) 4%, rgba(204, 204, 204, 0.76) 100%); */
  transition: all var(--user-tab-animation-duration) ease-in-out;
}

#user-tab.show {
  transform: translateY(0px);
  /* background: linear-gradient(323deg, #f7f7f7, #f3e8f7);
    -webkit-animation: background-move-gradient-01 0.8s ease;
    animation: background-move-gradient-01 0.8s ease;
    background-size: 400% 400%; */
}

#user-tab.show .profile-tab {
  filter: none;
}

button.btn2.view-recent-actions-btn {
  /* background-color: var(--col-base);
    color: white;
    width: 80%; */
  display: flex;
  flex-direction: row;
  transition: all 0.3s ease-in-out;
  transform: translateY(7px);
}

button.btn2.view-recent-actions-btn.open {
  transform: translateY(0px);
  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.4));
}

.view-recent-actions-btn.open .recent-action-btn-icon {
  transform: rotate(180deg);
}

.recent-action-btn-icon {
  transition: all 0.3s ease-in-out;
  transform-origin: center;
}

#user-tab.show .shape1 {
  stroke-dasharray: 1000;
  stroke-dashoffset: -1600;
  animation: dash01 0.5s linear forwards;
  /* stroke: rgba(102, 51, 153, 0.308); */
}

#user-tab.show .shape2 {
  stroke-dasharray: 1000;
  stroke-dashoffset: -1000;
  animation: dash02 0.5s linear forwards;
  /* stroke: rgba(51, 153, 51, 0.308); */
}

.user-tab-svg-wrapper {
  z-index: 800;
  position: absolute;
  fill: none;
  stroke: var(--col-base);
  filter: drop-shadow(2px 4px 6px var(--col-base));
  stroke-width: 4px;
  pointer-events: none;
}

.profile-tab {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #e7d5e3;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  /* font-family: Arial, sans-serif;
    font-size: 0.9rem; */
  color: var(--menuIconColor_active, #333);
  transition: all 0.5s ease-in-out;
  filter: blur(4px);

  flex-direction: column;
  text-align: center;
  padding: 0.75rem;
  font-size: 0.85rem;
  height: 100%;
  padding-bottom: 180px;
}

.user-panel-close-btn____0 {
  position: absolute;
  border-radius: 16px;
  border: solid 2px var(--col-base);
  min-width: 85px;
  width: auto;
  height: auto;
  top: 20px;
  left: 20px;
  padding: 5px;
}

.user-panel-close-btn {
  content: "X";
  position: absolute;
  border-radius: 50%;
  /* border: solid 2px var(--col-base); */
  background-color: var(--col-base);
  color: white;
  width: 40px;
  height: 40px;
  font-size: 22px;
  top: 20px;
  font-weight: 500;
  left: 20px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-body {
  /* display: flex;
    flex-direction: column;
    align-content: start;
    align-items: start;
    flex-wrap: wrap; */
}

.spostamento-info {
  font-size: 12px;
  color: var(--col-grey-medium);
}

.profile-tab .profile-tab-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}

.profile-tab .profile-tab-header:after {
  content: "";
  display: block;
  width: 90%;
  height: 1px;
  background-color: var(--col-grey-light);
  margin-top: 10px;

  /* content: "";
    bottom: 260px;
    position: static;
    width: 90%;
    height: 1px;
    margin-top: 20px; */
  /* background: var(--col-base); */
}

select#allievo-select {
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.profile-tab .avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
  margin: 10px 0px;
  background-color: var(--menuBgColorItem_active, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-tab .avatar svg {
  fill: var(--col-grey-medium) !important;
}

.profile-tab .info {
  flex: 1;
  min-width: 0;
}

.profile-tab .user_name {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--col-grey-dark);
}

.profile-tab .user_id {
  font-size: 0.8em;
  color: var(--col-base);
  margin-bottom: 0.25rem;
}

.profile-tab .user-buttons {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

/* .profile-tab .logout-btn {
    background-color: steelblue;
    color: white;
    width: 80%;
} */

.profile-tab .user_title {
  font-size: 0.8em;
  background-color: var(--menuBgColorItem, #007bff);
  color: white;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  display: inline-block;
}

.profile-tab .recent-actions-log .actions-title {
  cursor: pointer;
}

.allievo-selector {
  margin-bottom: 10px;
  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.action-title {
  /* width: 50px; */
  font-size: 11px;
}

.actions-content textarea {
  width: 100%;
  height: 400px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  resize: vertical;
}

.actions-list,
#actions-list-educatore {
  display: flex;
  flex-direction: column;
  justify-content: start;
  width: 100%;
  padding: 4px 16px;
  list-style-type: none;
  border: inset;
  border-radius: 10px;
  background: whitesmoke;
  height: 460px;
  max-height: 100%;
  /* max-height: 254px; */
  overflow: auto;

  /* height: -webkit-fill-available; */

  transition: all 0.45s ease-in-out;
}

.actions-list-num-actions {
  color: var(--col-grey-dark);
}

.recent-actions-log {
  width: 100%;
  transition: all 0.2s ease-in-out;
  height: auto;
  padding: 10px;
  opacity: 1;
  /* max-height: 350px; */
}

.recent-actions-log .actions-title {
  font-weight: 600;
  font-size: 16px;
}

.recent-actions-log.hidden {
  opacity: 0;
  transition: all 0.35s ease-in-out;
}

.recent-actions-log.hidden .actions-title {
  /* font-size: 0px; */
}

.actions-content {
  height: 45vh;
}

.actions-content .action-time {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 8px;
  min-width: 60px;
}

.recent-actions-log.hidden .actions-list {
  height: 0px;
  transition: all 0.25s ease-in-out;
}

.actions-content .recent-action-item {
  display: flex;
  flex-direction: row;
  /* justify-content: space-between; */
}

.actions-content {
  width: 100%;
}

#actions-title-bar {
  cursor: pointer;
}

.event-in-progress-badge {
  line-height: normal;
  position: relative;
  margin-left: auto;
  /* margin-right: 60px; */
  font-size: 10px;
  margin-left: auto;
  /* background: var(--col-grey-dark); */
  /* background: #ac1818;
    color: white; */
  padding: 2px 8px;
  border-radius: 10px;
  opacity: 0.88;
}

.action-item {
  padding: 4px 8px;
  border-width: 0px 0px 2px 0px;
  border-color: black;
  border-style: dotted;

  border-radius: 4px;
  border: solid 1px grey;
  background: white;
  margin: 8px 0px;
  /* box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); */
  /* box-shadow: inset 1px 2px 6px 0 rgba(0, 0, 0, 0.12), inset -5px -4px 6px 0 #FFFFFF; */
  box-shadow:
    inset 1px 2px 6px 0 rgba(0, 0, 0, 0.12),
    inset -5px -4px 4px 0 #ffffff,
    -1px 0px 2px rgba(0, 0, 0, 0.5);
  padding: 12px 16px;
  overflow: hidden;
  max-height: 500px;
  /* min-height: fit-content; */
  transition: all 0.3s ease-in-out;
}
.action-item[event-id="25"] {
}
.action-buttons-bar {
  display: flex;
  justify-content: end;
  gap: 12px;
  margin-top: 8px;
  flex-direction: row;
}

.action-icon {
  display: flex;
  justify-content: end;
  position: relative;
  right: 0px;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--col-grey-light);
  font-style: italic;
}

.action-item * :not(.action-body) {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 10px;
  /* text-align: justify; */
  text-align: start;
}

.action-desc {
  margin-top: 2px;
  color: var(--col-grey-dark);
}

.actions-content .recent-action-item {
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 8px 0px;
}

.action-header,
.action-subheader {
  display: flex;
  font-weight: 600;
  gap: 10px;
}

.action-subheader {
  font-size: 12px;
  color: var(--col-grey-medium);
  padding: 2px 0px;
}

.actions-content .action-allievo {
  font-weight: 700;
  font-size: 10px;
}

.action-allievo .allievo_nome {
  font-weight: 600;
  color: var(--col-base);
}

.action-allievo .allievo_id {
  font-weight: 500;
  color: var(--col-grey-dark);
}

.action-footer {
  display: flex;
  justify-content: start;
  font-size: 10px;
  padding: 8px 4px 0px 4px;
  border-top: dashed 1px grey;
}

.action-user-info {
  color: var(--col-grey-dark);
  font-style: italic;
}

#piechart-01 .slice {
  transition: all 0.18s ease-in-out;
  cursor: pointer;
}

#piechart-01 .slice:hover {
  transform: scale(1.1);
  filter: drop-shadow(2px 4px 6px black);
}

#piechart-01 .sliceLabel {
  pointer-events: none;
}

/* MARK: MEDIA QUERIES */

@media screen and (max-width: 768px) {
  .profile-tab {
    padding: 0.75rem;
    font-size: 0.85rem;
    padding-bottom: 140px;
  }

  /* .profile-tab>div:first-child {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .profile-tab>div:last-child {
        text-align: center;
    } */
}

@media all and (min-width: 1400px) {
}

@media all and (min-width: 521px) {
  #luoghi tr {
    background: white !important;
  }

  .menu_item::before {
    width: calc(var(--bottom-nav-icon-size) * 1.5);
    height: calc(var(--bottom-nav-icon-size) * 1.5);
  }

  .menu_border {
    height: 1.6em;
    width: 7.4em;
  }

  .profile-tab .user-buttons {
    /* flex-direction: row; */
    gap: 8px;
    justify-content: center;
  }

  .profile-tab .user-buttons * {
    font-size: 12px;
    max-width: 220px;
  }

  .profile-tab .profile-tab-header {
    margin-bottom: 4px;
  }
}

@media all and (max-width: 1024px) {
  #tables tbody td {
    font-size: clamp(0.7em, 2vw, 1em);
  }

  .tab-section {
    /* width: calc(50vw - var(--tables-gap) * 2.5); */
    /* width: 50vw; */
  }
}

@media all and (max-width: 720px) {
  #tables tbody td {
    font-size: clamp(0.7em, 2vw, 1em);
    /* font-size: 0.8em; */
  }

  .tab-section {
    /* width: calc(50vw - var(--tables-gap) * 2.5); */
    /* width: 50vw; */
  }
}

@media all and (max-width: 620px) {
  #allievi-gruppi-menu .tabs {
    gap: 1px;
  }

  #allievi-gruppi-menu .tab-content {
    font-size: 0.65em;
  }

  #allievi-gruppi-menu .tab {
    margin: 0px 0px;
  }
}

@media all and (max-width: 520px) {
  #luoghi td {
    /* font-size: 0.69em; */
    flex-direction: column !important;
  }

  #luoghi td .entry {
    text-align: center;
  }

  /* .cell-badge {
        width: 80%;
        margin-top: 7px;
        margin-bottom: 7px;
    } */

  .cell-badge {
    /* border-radius: var(--luoghi-box-radius); */
    border-radius: 0px;
    font-size: 14px;
    width: 104%;
    /* margin-top: 7px; */
    margin-bottom: 0px;
  }

  #allievi-gruppi-tabs {
    padding: 3px;
  }

  #question-triangle-icon svg path {
    stroke: white;
    stroke-width: 1px;
  }

  #question-triangle-icon:after {
    font-size: 0px;
  }

  #luoghi.tab-section #question-triangle-icon {
    height: 100%;
  }
}

@media all and (max-width: 380px) {
  #tables tbody td {
    font-size: 0.5em;
  }

  #allievi-gruppi-menu {
    width: 90%;
  }

  #allievi-gruppi-menu .tabs {
    width: 100%;
    margin: 0px;
  }

  #allievi-gruppi-menu .tab {
    margin: 0px 2px;
  }

  #tables tbody td,
  #tables tbody tr {
    font-size: 0.85em;
  }

  #allievi-gruppi-menu .notification {
    display: none;
  }
}

@media all and (max-width: 300px) {
}

@media (pointer: coarse) {
  #tables #allievi,
  #tables #gruppi {
    scrollbar-width: none;
    /* padding-right: 46px; */
    border-bottom: solid 1px var(--col-base);
    box-shadow: inset 0 0 3px #0c0c0c;
  }
}

@media (pointer: coarse) and (max-width: 412px) {
  /* .gestione-dettagli-area {
        flex-direction: column;
        gap: 10px;
    } */
  label.sposta {
    display: none;
  }

  .sposta-allievo {
    /* flex-direction: column; */
  }
}

@media (max-width: 560px) {
  .daterangepicker {
    /* position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin-top: 0 !important; */
    z-index: 9999;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    top: 10%;
  }
}

/*MARK: GENERAL*/

.embossed-light {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.embossed-heavy {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.3),
    inset 0 -2px 3px rgba(0, 0, 0, 0.3),
    0 1px 1px rgba(255, 255, 255, 0.9);
}

.btn2 {
  cursor: pointer;
  text-align: center;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  background-color: steelblue;
  color: white;
  width: 80%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border: none;
  border-radius: 0.375rem;
}

.btn-style-01 {
  display: block;
  justify-content: center;
  height: -webkit-fill-available;
  padding: 7px 16px;
  border: none;
  background: var(--col08);
  font-size: 1.1em;
  color: white;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.4) 0 2px 4px;
}

.btn-style-01:active {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
}

.white {
  filter: invert(1);
}

.pulse {
  background: rgb(var(--pulse-color));
  border-radius: 50%;
  height: 30px;
  width: 30px;
  box-shadow: 0 0 0 0 rgba(var(--pulse-color), 1);
  transform: scale(1);
  animation: pulse 2s infinite;
}

.wa-circle-anim::before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  /* background: var(--event-col-wa); */
  border-radius: 50%;
  height: 30px;
  width: 30px;
  box-shadow: 0 0 0 0 var(--event-col-wa);
  transform: scale(1);
  animation: wa-circle-anim var(--wa-glow-duration) infinite;
  border: solid 4px var(--event-col-wa);
}

.pulse-opacity {
  animation: pulse-opacity 2s infinite;
}

.pulse-opacity-2 {
  animation: pulse-opacity-2 2s infinite;
}

.pulse-opacity-half {
  animation: pulse-opacity-half 2s infinite;
}

.pulse-size-up {
  animation: pulse-size-up 2s infinite;
}

.pulse-size-down {
  animation: pulse-side-down 2s infinite;
}

/* MARK: KEYFRAMES */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(var(--pulse-color), 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(var(--pulse-color), 0);
  }
}

@keyframes pulse-opacity {
  0% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes pulse-opacity-2 {
  0% {
    opacity: 1;
  }

  30% {
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes pulse-opacity-half {
  0% {
    opacity: 1;
  }

  70% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

@keyframes pulse-size-up {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes wa-circle-anim {
  0% {
    transform: scale(1.6);
    opacity: 0;
    border-width: 4px;
  }

  10% {
    border-width: 0px;
    opacity: 0;
  }

  20% {
    transform: scale(0.2);
    border-width: 0px;
    opacity: 0;
  }

  30% {
    transform: scale(0.2);
    border-width: 0px;
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
    border-width: 4px;
  }
}

/* @keyframes wa-circle-anim {
    0% {
        transform: scale(1);
        opacity: 0;
        border-width: 4px;
    }
    40% {
        transform: scale(1.6);
        border-width: 4px;
        opacity: 1;
    }

    90% {
        border-width: 0px;
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
        border-width: 4px;
    }
} */

@keyframes pulse-side-down {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.8);
  }
}

@-webkit-keyframes drawBorderFromCenter {
  0% {
    background-size:
      0 2px,
      0 0,
      100% 100%;
  }

  20% {
    background-size:
      100% 2px,
      100% 0,
      100% 100%;
  }

  66% {
    background-size:
      100% 2px,
      100% 98%,
      100% 100%;
  }

  99% {
    background-size:
      100% 2px,
      100% 98%,
      0 2px;
  }
}

@keyframes dash01 {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 1000;
  }
}

@keygrames dash02 {
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 2000;
  }
}

@keyframes background-move-gradient-01 {
  0% {
    background-position: 2% 0%;
  }

  50% {
    background-position: 99% 100%;
  }

  100% {
    background-position: 2% 0%;
  }
}

.pulse.red {
  --pulse-color: 222, 84, 72;
}

.pulse.blue {
  --pulse-color: 66, 103, 178;
}

.pulse.green {
  --pulse-color: 76, 175, 80;
}

.pulse.yellow {
  --pulse-color: 255, 210, 63;
}

.filter-base-color {
  filter: var(--filter-col-base);
}

.icon-30 {
  width: 30px;
  height: 30px;
}

/* Improve touch behaviour for draggable rows on mobile (especially iOS)
   - Prevent native touch scrolling/selection that interferes with jQuery UI touch-punch
   - Applied to jQuery UI draggable classes and group table rows
*/
.ui-draggable,
.ui-draggable-dragging,
#tables #gruppi tbody tr {
  -ms-touch-action: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.inset-border {
  border: inset;
  border-radius: 5px;
  /* border-color: white; */
}

.emboss {
  width: 100%;
  height: 200px;
  padding: 30px;
  background: #edf3f9;
  box-shadow:
    -7px -7px 16px 0 #ffffff,
    7px 7px 10px -4px rgba(116, 150, 179, 0.27);
  border-radius: 18px;
  margin-bottom: 20px;
  display: block;
  transition: all 120ms linear;
}

.emboss-press {
  box-shadow:
    inset 3px 3px 7px 0 rgba(116, 150, 179, 0.32),
    inset -4px -4px 6px 0 #ffffff;
  transition: all 120ms linear;
}

.emboss-inner {
  width: 100%;
  background: #edf3f9;
  box-shadow:
    inset 3px 3px 7px 0 rgba(116, 150, 179, 0.32),
    inset -4px -4px 6px 0 #ffffff;
  border-radius: 18px;
  margin-bottom: 20px;
  display: block;
  padding: 10px;
}
.emboss-inner-press {
  box-shadow:
    inset 7px 7px 16px 0 rgba(116, 150, 179, 0.32),
    inset -7px -7px 16px 0 #ffffff;
  transition: all 150ms linear;
}

.loading-center {
  background: #00000013;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  z-index: 1000;
}

.centered {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.blurred {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.bright-down {
  filter: brightness(0.5);
  pointer-events: none;
  user-select: none;
}