:root {
  --bs-colore-1: #00172F;
  --bs-colore-2: #436091;
  --bs-colore-3: #0A76BC;
  --bs-colore-4: #C8AE6E;
  --bs-colore-5: #AEDEF8;
  --bs-colore-6: #E7F5FD;
  --bs-colore-7: #A2A2A2;
  --bs-colore-8: #D04618;
  --bs-colore-9: #15B700;
  --bs-white: #FFFFFF;
  --bs-white-2: rgba(255, 255, 255, 0.5);
  --bs-colore-1-rgb: 0, 23, 47;
  --bs-colore-3-rgb: 10, 118, 188;
  --bs-colore-4-rgb: 115, 180, 227;
  --bs-colore-5-rgb: 174, 222, 248;
  --bs-colore-6-rgb: 231, 245, 253;
  --bs-colore-7-rgb: 162, 162, 162;
  --bs-colore-8-rgb: 255, 0, 0;
  --bs-colore-9-rgb: 21, 183, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-white-2-rgb: 255, 255, 255;
}
*
.bg-colore-2 {
  --bs-bg-opacity: 1;
  background-color: var(--bs-colore-2)!important; }
.text-colore-2 {
  --bs-text-opacity: 1;
  color: var(--bs-colore-2) !important; }
.text-colore-3 {
  --bs-text-opacity: 1;
  color: var(--bs-colore-8) !important; }
.text-colore-5 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-colore-5-rgb), var(--bs-text-opacity)) !important; }
.text-colore-9 {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-colore-9-rgb), var(--bs-text-opacity)) !important; }
.border-colore-4 {
  --bs-border-opacity: 1;
  border-color: var(--bs-colore-4) !important; }
.fs-20 {
  font-size: 1.25rem !important;
}
.fs-24{font-size: calc(1.275rem + 0.3vw) !important;}
.fs-14{font-size: 14px !important;}
.fs-12{font-size: 12px !important;}
.border-6 {
  border-width: 6px !important; }
.mb-20 {
  margin-bottom: 20px !important; }
.mb-30 {
  margin-bottom: 30px !important; }
.p-20 {
  padding: 20px !important; }
.p-30 {
  padding: 30px !important; }
.py-15 {
  padding:15px 0px !important; }
.py-20 {
  padding:20px 0px !important; }
.pt-20 {
  padding-top:20px!important; }
.me-10{margin-right:10px}
#alert {
  display: none;
  position: fixed;
  z-index: 10001;
  font-size: 14px;
  color: #000;
  background-color: rgba(0, 45, 71, 0.9);
  height: 100%;
  width: 100%;
  padding-top: 10%;
  left: 0px;
  top: 0px; }

#alert .errori {
  text-align: center;
  width: 400px;
  max-width: 100%;
  position: relative;
  margin-right: auto;
  margin-left: auto;
  font-size: 16px;
  line-height: 20px;
  margin-top: 50%;
  transform: translateY(50%); }

#alert .testoAlert {
  margin: 10px;
  background-color: #FFF;
  padding: 20px; }

#chiudi {
  display: block;
  text-decoration: none;
  color: #FFF;
  font-size: 30px;
  text-align: right;
  margin-bottom: 10px;
  font-weight: bold;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 10px; }

a {
  text-decoration: none; }

a:hover, a:focus-visible {
  text-decoration: none;
  color: inherit; }

body {
  font-family: 'Titillium Web';
  background-color: #FFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 450px;
  margin: 0 auto; overflow-x: hidden}
.container {background-color:#F7EFDF; min-height: 100vh; padding-top:30px; overflow-x:hidden }
header {
  margin-top: 59px; }

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  max-width: 450px;
  margin: 0 auto; }

input[type="text"] {
  width: 100%; }

input#numero_di_cellulare {
  text-align: center;
  color: var(--bs-colore-3);
  font-size: 20px;
  font-weight: 700; }

[data-star-rating] {
  justify-content: center; }

#menu {
  position: fixed;
  top: 59px;
  left: 0;
  right: 0;
  z-index: 5;
  display: none;
  height: calc(100vh - 130px);
  max-width: 450px;
  margin: 0 auto; }

#menu ul.menu {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0; }

#menu ul.menu li {
  text-align: center;
  border-top: 1px solid var(--bs-colore-4); }

#menu ul.menu li:last-child {
  border-bottom: 1px solid var(--bs-colore-4); }

#menu ul.menu li:last-child a {
  font-size: 12px;
  font-weight: 400; }

#menu ul.menu li a {
  color: var(--bs-white);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  display: block;
  padding: 14px; }

#notifica {
  position: absolute;
  top: -100%;
  right: 50%;
  z-index: 15;
  transform: translateX(50%);
  border-radius: 50%;
  background-color: var(--bs-colore-8);
  font-size: 20px;
  width: 32px;
  height: 32px;
  color: white; }

.add-photo {
  position: fixed;
  z-index: 50;
  bottom: 100px;
  right: 10px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--bs-white);
  color: var(--bs-white);
  background-color: var(--bs-colore-3);
  font-size: 28px;
  text-align: center; }

.bg-1 {
  background: linear-gradient(180deg, #0B1627 0%, #436091 100%); }

.btn-1 {
  color: var(--bs-white);
  background-color: var(--bs-colore-8); }

.btn-1:hover, .btn-1:focus-visible, .btn-1:first-child:active {
  color: var(--bs-white);
  background-color: var(--bs-colore-8);
  border-color: var(--bs-colore-); }

.btn-2 {
  background-color: var(--bs-white);
  color: var(--bs-colore-3); }

.btn-2:hover, .btn-2:focus-visible, .btn-2:first-child:active {
  background-color: var(--bs-colore-3);
  color: var(--bs-white);
  border-color: var(--bs-colore-3); }

.btn-3, .btn-3:hover, .btn-3:focus, .btn-3:focus-visible, .btn-3:first-child:active {
  border: 2px solid var(--bs-colore-3);
  background-color: var(--bs-white);
  color: var(--bs-colore-3); }

.container {
  padding-right: 20px;
  padding-left: 20px; }

.contatto {
  color: var(--bs-white);
  background-color: var(--bs-colore-3); }

.content {
  font-size: 16px;
  font-weight: 400;
  color: var(--bs-colore-1);
  text-align: start;
  display: none; }

.content-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%); }

.data {
  font-size: 50px;
  font-weight: 600;
  line-height: 40px;
  color: var(--bs-colore-8); }

.delete-group {
  font-size: 20px;
  font-weight: 600;
  color: var(--bs-white);
  text-align: center;
  background-color: var(--bs-colore-8);
  padding: 16px 20px;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  display: none; }

.delete-photo {
  font-size: 20px;
  color: var(--bs-white);
  position: absolute;
  top: 5px;
  left: 17px; }

.delete-photo.selected {
  color: var(--bs-colore-8); }

.descrizione {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  text-align: center;
  color: var(--bs-colore-1); }

.dettaglio {
  color: var(--bs-colore-3);
  text-decoration: underline; }

.dettaglio:hover {
  color: var(--bs-colore-3);
  text-decoration: underline; }

.disabled > * {
  color: var(--bs-colore-7) !important; }

.dropdown-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%); }

.dropdown-item, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
  color: var(--bs-white);
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  background-color: var(--bs-colore-8); }

.dropdown-item:not(:last-child) {
  border-bottom: 2px solid var(--bs-colore-4); }

.dropdown-menu {
	position: absolute;
  display: none;
  /*top: 100%;*/
  max-height: 280px;
  z-index: 10;
  overflow-y: auto;
  left: 0;
  right: 0;
  border-radius: 0 0 4px 4px;
  background-color: var(--bs-colore-8);
  border: 1px solid var(--bs-colore-8);
  padding: 0 10px;
	margin: -4px 12px 0 12px;
}

.dropdown-toggle:after {
  display: none; }

.giornata {
  color: var(--bs-colore-1); }

.gionata, .schedule {
  font-size: 16px;
  text-align: start;
  line-height: 24px;
  font-size: 400; }

.giorno, .mese {
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  color: var(--bs-colore-2); }

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); }

.grid-item {
  text-align: center;
  padding: 0 24px;
  font-size: 24px; }

.grid-item i {
  color: var(--bs-white); }

.grid-item i.active {
  color: var(--bs-colore-5); }

.modal-header, .modal-body, .modal-footer {
  justify-content: center; }

.nav-item {
  background-color: var(--bs-white-2);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  width: calc(50% - 5px); }

.nav-link {
  width: 100%; }

.notifiche {
  height: calc(100vh - 100px);
  width: 100vw; }

.persone {
	cursor: pointer;
  display: inline-block;
  border-radius: 22px;
  background-color: var(--bs-colore-5);
  color: var(--bs-colore-2);
  font-size: 16px;
  font-weight: 600;
  width: 22px;
  height: 22px;
  text-align: center;
  line-height: 21px; }

.persone.active {
  background-color: var(--bs-colore-2);
  color: var(--bs-white); }

.persone:not(:last-of-type) {
  margin-right: 12px; }

.post {
  background-color: var(--bs-white);
  padding: 20px;
  border-radius: 4px; }

.posti {
  color: var(--bs-colore-1);
  font-size: 20px;
  line-height: 28px; }

.prenota {
  display: none; }

.pubblicato {
  color: var(--bs-colore-7);
  font-size: 14px; }

.recensione {
  font-size: 16px;
  font-weight: 600;
  color: var(--bs-colore-2); }

.schedule {
  color: var(--bs-colore-3);
  font-weight: 600; }

.seen {
  color: var(--bs-colore-5); }

.selectBox {
  position: relative;
  padding: 10px;
  min-height: 54px;
  cursor: pointer;
  border-radius: 4px;
  border: 2px solid var(--bs-colore-8);
  background-color: var(--bs-white);
  color: var(--bs-colore-8);
  font-size: 20px;
  font-weight: 600; }

.selectBox__value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  text-align: center; }

.selectBox.show .dropdown-menu {
  transition: all 0.3s ease-in-out;
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0); }

.star.selected, .star:hover {
  color: var(--bs-colore-3); }

.star {
  padding: 0 2.5px;
  font-size: 24px;
  color: var(--bs-colore-4); }

.stars {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0; }

.tassello {
  border-radius: 4px;
  background-color: var(--bs-white);
  border: 2px solid var(--bs-colore-8);
  text-decoration: none;
  max-height: 106px;
  padding: 5px;
  transition: 300ms;
  display: block; }

.tassello:hover {
  background-color: var(--bs-colore-6); }

.toggle-content {
  text-align: center;
  color: var(--bs-colore-8);
  border: 2px solid var(--bs-colore-8);
  font-size: 20px;
  font-weight: 700;
  position: relative;
  padding: 12px 20px;
  background-color: var(--bs-white);
  border-radius: 4px; }

.torna {
  display: block;
  background-color: var(--bs-colore-8);
  position: absolute;
  bottom: calc(100% + 16px);
  left: 0;
  right: 0;
  color: var(--bs-white);
  text-align: start;
  font-size: 20px;
  font-weight: 600;
  padding: 16px 20px; }

.torna:hover {
  background-color: var(--bs-colore-2);
  color: var(--bs-white); }

.unseen {
  color: var(--bs-white); }

.unseen div, .seen div {
  border-bottom: 1px solid var(--bs-colore-4); }

.unseen div:last-child, .seen div:last-child {
  border-bottom: 0px; }

.utente {
  color: var(--bs-colore-2);
  font-weight: 600; }
table{margin-bottom: 100px}
table tr {
  border-color: var(--bs-colore-8) !important;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin-bottom: 1rem; }

table td {
  padding: 1rem 10px; }

table td a {
  color: #004996;
  text-decoration: underline !important;
  font-weight: 600; }

table td:nth-child(1) {
  color: var(--bs-colore-8);
  text-align: left;
  font-weight: 600; }

table p {
  margin: 0; }

#swipebox-download {
  width: 100%;
  font-size: 15px;
  position: absolute;
  text-align: center;
  z-index: 10;
  bottom: 30px;
  left: 0;
  color: #FFF;
  cursor: pointer;
  opacity: 1;
  padding: 30px; }

a.letto {
  color: #AEDEF8; }

.maschera {
  background-color: var(--bs-colore-6);
  height: 100vh;
  box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.3);
  position: fixed;
  overflow: auto;
  max-width: 450px; }

.nav-tabs {
  --bs-nav-tabs-border-width: unset;
  --bs-nav-tabs-border-color: unset;
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: unset;
  --bs-nav-tabs-link-active-color: var(--bs-colore-2);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color); }
.nav-tabs .nav-link{font-size:20px; font-weight: 600; color:var(--bs-colore-8)}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: #e7f5fd;
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0; }

@media screen and (min-width: 450px) {
  .notifiche {
    width: 450px; } }


/* Stili per il pulsante like in Swipebox */
.like-button {
    position: fixed;
    bottom: 40px;
    right: 80px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 25px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 999999 !important;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
	touch-action: manipulation;
}

.like-button:hover {
    background: rgba(0, 0, 0, 0.95);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.5);
}

.like-icon {
    font-size: 22px;
    color: #fff;
    transition: all 0.3s ease;
}

.like-icon.liked {
    color: #e74c3c !important;
    animation: pulse 0.3s ease;
}

.like-icon.far {
    color: #fff;
}

.like-icon.fas.liked {
    color: #e74c3c;
}

.like-count {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

/* Contenitore personalizzato per i controlli */
#custom-swipebox-controls {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999999 !important;
    pointer-events: none;
}

#custom-swipebox-controls .like-button {
    pointer-events: all;
    position: relative;
    bottom: 40px;
    right: 20px;
}

/* Animazione del cuore quando viene cliccato */
.heartbeat {
    animation: heartbeat 0.3s ease;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Override per assicurarsi che sia sempre visibile */
#swipebox-overlay .like-button {
    z-index: 999999 !important;
}

/* Stili alternativi se Swipebox ha z-index molto alti */
body.swipebox-opened .like-button {
    z-index: 9999999 !important;
}