body { font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: normal; margin: 0; padding: 20px 0px; background-color: #f5f5f5; color: #333; }
.calendar-container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
h2 { text-align: center; }
#slot-container { display: flex; flex-wrap: wrap; justify-content: center; }
.slot { width: 100px; margin: 10px; padding: 10px; text-align: center; background-color: #e0e0e0; border-radius: 5px; cursor: pointer; user-select: none; }
.slot.selected { background-color: #4CAF50; color: white; }
.singledesk.selected { background-color: #4CAF50; color: white; }
.singledesk.reserved { background-image: url(/images/omino_giu_red.png); color: #ff0000; cursor: not-allowed; }
.singledesk { width: 100px; height: 68px; margin: 10px; padding: 0px; text-align: center; background-color: #fff; border-radius: 5px; cursor: pointer; user-select: none; background-size: 100% 100%; background-repeat: no-repeat; }
.groupdesk { width: 100%; margin: 0px; padding: 0px; text-align: center;  cursor: pointer; user-select: none; }

.sala { border: 1px solid #002744; margin-bottom: 20px; margin-top: 40px; position: relative; max-width: 360px; }
.sala.sala_a:before { content: 'Sala A: 2 postazioni da 2 persone'; position: absolute; left: 0; top: -25px; font-weight: 600; }
    .sala.sala_b:before { content: 'Sala B: 1 postazione da 2 e 1 da 6 persone'; position: absolute; left: 0; top: -25px; font-weight: 600; }
    .sala.sala_c:before { content: 'Sala C: 1 postazione da 2 e 1 da 6 persone'; position: absolute; left: 0; top: -25px; font-weight: 600; }
    .sala.sala_d:before { content: 'Sala D'; position: absolute; left: 0; top: -25px; font-weight: 600; }


.sala.sala_a { display: flex; align-items: center; justify-content: center; }
    .sala > .smalldesk:nth-child(1) { border-right: 1px solid #002744; }
    .sala > .largedesk:nth-child(1) { border-bottom: 1px solid #002744; }
    .sala > .largedesk:nth-child(2) { border-top: 1px solid #002744; }
    .sala.sala_a > .smalldesk { display: flex; flex-direction: column; align-items: center; }
.groupdesk.largedesk { display: flex; flex-wrap: wrap; }
.groupdesk.smalldesk > .singledesk:nth-child(1) { background-image: url(/images/omino_su.png); display: flex; flex-direction: column; justify-content: flex-end; }
.groupdesk.smalldesk > .singledesk.reserved:nth-child(1) { background-image: url(/images/omino_su_red.png); }
.groupdesk.smalldesk > .singledesk:nth-child(2) { background-image: url(/images/omino_giu.png); }
.groupdesk.smalldesk > .singledesk.reserved:nth-child(2) { background-image: url(/images/omino_giu_red.png); }


.groupdesk.largedesk > .singledesk:nth-child(1) { background-image: url(/images/omino_su.png); display: flex; flex-direction: column; justify-content: flex-end; }
.groupdesk.largedesk > .singledesk.reserved:nth-child(1) { background-image: url(/images/omino_su_red.png); }
.groupdesk.largedesk > .singledesk:nth-child(2) { background-image: url(/images/omino_su.png); display: flex; flex-direction: column; justify-content: flex-end; }
.groupdesk.largedesk > .singledesk.reserved:nth-child(2) { background-image: url(/images/omino_su_red.png); }
.groupdesk.largedesk > .singledesk:nth-child(3) { background-image: url(/images/omino_su.png); display: flex; flex-direction: column; justify-content: flex-end; }
.groupdesk.largedesk > .singledesk.reserved:nth-child(3) { background-image: url(/images/omino_su_red.png); }
.groupdesk.largedesk > .singledesk:nth-child(4) { background-image: url(/images/omino_giu.png); }
.groupdesk.largedesk > .singledesk.reserved:nth-child(4) { background-image: url(/images/omino_giu_red.png); }
.groupdesk.largedesk > .singledesk:nth-child(5) { background-image: url(/images/omino_giu.png); }
.groupdesk.largedesk > .singledesk.reserved:nth-child(5) { background-image: url(/images/omino_giu_red.png); }
.groupdesk.largedesk > .singledesk:nth-child(6) { background-image: url(/images/omino_giu.png); }
.groupdesk.largedesk > .singledesk.reserved:nth-child(6) { background-image: url(/images/omino_giu_red.png); }
span#status_ludoteca, span#status_pc, span#status_servizi { font-size: 18px; }

button.profilo-btn,button { display: block; width: 100%; padding: 10px; background-color: #002744; color: white; border: none; border-radius: 8px; cursor: pointer; margin-top: 0px; font-family: "Open Sans"; font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; text-decoration: none; margin-top: 40px; }
    button:hover { background-color: #3b6885; }
#result { margin-top: 20px; text-align: center; }
select { width: 100%; padding: 10px; border-radius: 5px; border: 1px solid #ddd; }
input[readonly], select[readonly] { background-color: #f5f5f5; /* Light gray background */ color: #000000; /* Muted text color */ border: 1px solid #ccc; /* Optional: a soft border */ pointer-events: none; /* Disable interaction */ user-select: none; /* Prevent text selection */ opacity: 0.6; /* Slight transparency */ }
#day-container { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.day { width: 100px; margin: 10px; padding: 10px; text-align: center; background-color: #e0e0e0; border-radius: 5px; cursor: pointer; user-select: none; }
.day.selected { background-color: #FF9800; color: white; }

/* Popup */
.popup { display: none; /* Il popup � nascosto di default */ position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente */ }
.popup-content { background-color: white; padding: 20px; margin: 10% auto; width: 80%; max-width: 400px; border-radius: 5px; position: relative; }
.close { position: absolute; top: 10px; right: 20px; font-size: 24px; cursor: pointer; }
.close:hover { color: red; }

.login_nav a { margin: 0 10px; text-decoration: none; font-weight: bold; font-size: 18px; color: #002744;}
.button-container a { margin-bottom: 10px; border-radius: 8px; background: #002744; display: flex; padding: 10px; color: #FFF; font-family: "Open Sans"; font-size: 22px; font-style: normal; font-weight: 700; line-height: normal; text-decoration: none; }
    .button-container a:hover { background-color: #3b6885; }
    /* Stili generali */
    body { font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: normal; margin: 0; padding: 20px; background-color: #f5f5f5; color: #333; }
h1, h2 { color: #e11257; font-size: 31px; display: flex; text-align: center; }
h3#titolo-azione-step { color: #e11257; font-family: "Open Sans"; font-size: 31px; font-style: normal; font-weight: 700; line-height: normal; margin: 10px 0px; }
.calendar-container h6 { color: #000; /* font-family: "Open Sans"; */ font-size: 20px; font-style: normal; font-weight: 400; line-height: normal; margin: 0px 0px 20px 0px; }
a { text-decoration: none; color: #2196F3; }
a:hover { text-decoration: underline; }
.medula_bt { display: flex; gap: 5px; align-items: center; justify-content: center;  bottom: 0px; align-self: stretch; margin: 10px 5vw; width: 90vw; left: 0px; color: #787878; }
    .medula_bt a { color: #787878; }
    .button-link-wrap { display: flex; flex-direction: row; gap: 10px; }
        .button-link-wrap > a:nth-child(2) { background-color: #fff; border: 2px solid #002744; color: #002744; max-width: 40px; max-height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 0px; padding: 0px; border: none; margin-bottom: 0px; }
    .button-link-wrap > a { flex: 1; }
img.info_img { height: 30px; width: 30px; display: inline-flex; }
.info-service { padding: 10px; }
    .info-service b { color: #e11257; }
    /* Area Utente */
    .user-container { max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.header_small { display: flex; justify-content: flex-end; gap: 20px; }
.header_logo { display: flex; justify-content: space-between; align-items: center; }
.user-nav { display: flex; justify-content: space-around; padding-bottom: 20px; border-bottom: 1px solid #ddd; }
.user-nav a { padding: 10px; font-weight: bold; color: #333; }
.login_scene > div > div.login_text { display: flex; flex-direction: column; max-width: calc(100% - 40px); width: 100%; text-align: justify; }
.container_utente { margin-top: 20px; background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.profilo-utente { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group { display: flex; flex-direction: column; }
label { margin-bottom: 5px; font-weight: bold; }
input, select { padding: 10px; border-radius: 5px; border: 1px solid #ddd; font-size:20px;}

/* Container prenotazioni */
.container_prenotazioni { margin-top: 20px; }
.toggle-stato { margin-bottom: 10px; }
.user-nav a.toggle-btn, .toggle-btn { padding: 5px 10px; background-color: #f0f0f0; margin: 0 10px; border-radius: 5px; cursor: pointer; color: #2196F3; font-weight:400;}
    .user-nav a.toggle-btn:hover,.toggle-btn:hover { background-color: #ddd; }
/* Prenotazioni */
.prenotazioni h3 { margin-top: 20px; color: #333; }
/* Layout della tabella di prenotazioni */
.admin .prenotazioni-table { display: grid; grid-template-columns: repeat(9, 1fr); gap: 10px; background-color: #f1f1f1; padding: 10px; border-radius: 8px; }
.prenotazioni-table { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; background-color: #f1f1f1; padding: 10px; border-radius: 8px; }
.container_utenti .prenotazioni-table { grid-template-columns: repeat(4, 1fr); }
.prenotazione-row { display: contents; text-align: center; padding: 10px 0; border-bottom: 1px solid #ddd; }
.prenotazione-row span { padding: 5px 0; display: flex; }
.prenotazione-row .azioni { display: flex; text-align: center; flex-direction: row; gap: 10px; }
.btn.elimina { background-color: #E30000; color: #fff; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
    .btn.elimina:hover { background-color: #c0392b; }
/* Pulsanti */
.ok-btn,.btn { display: inline-block; background-color: #002744; color: white; padding: 5px 10px; border: none; border-radius: 5px; cursor: pointer; text-align: center; font-size: 22px; font-weight: 600; text-decoration: none; }
p{font-size:20px;}
.btn.modifica { background-color: #2196F3; }
.btn:hover { opacity: 0.9; }
.radio-container { margin: 15px 0; font-family: Arial, sans-serif; color: #333; }
.radio-container label { font-size: 34px; font-weight: bold; margin-bottom: 8px; display: flex; }
.radio-group { display: flex; gap: 100px; justify-content: flex-start; font-size: 30px; }
.radio-option { display: flex; align-items: center; font-size: 34px; cursor: pointer; }
.radio-option input[type="radio"] { margin-right: 8px; }
.radio-option input[type="radio"]:focus { outline: none; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); }
/* Responsive (Mobile) */

/* Overlay che copre l'intera pagina */
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; display: flex; justify-content: center; align-items: center; }
/* Contenuto del caricamento */
.loading-content { text-align: center; color: white; }
/* Spinner per il caricamento */
.spinner { border: 6px solid #f3f3f3; border-radius: 50%; border-top: 6px solid #3498db; width: 40px; height: 40px; animation: spin 1s linear infinite;margin: auto; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Nascondi div */
.hidediv { display: none; }
h3#titolo-azione-step { width: 100%; display: flex; align-items: center; }
    h3#titolo-azione-step a { margin-left: auto; color: #002744; font-family: "Open Sans"; font-size: 18px; font-style: normal; font-weight: 700; line-height: normal; text-decoration-line: underline; }
.edit-icon { fill: #3498db; cursor: pointer; vertical-align: middle; }
    .edit-icon:hover { fill: #2980b9; }
.main-container { border-radius: 8px; margin-bottom: 0px; }
.container_prenotazioni, .container_utenti, .container_utente { background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 20px; }
.container_utenti .prenotazioni-table { grid-template-columns: repeat(5, 1fr); }
.prenotazione-header { font-weight: bold; display: contents; text-align: left; padding: 10px 0; border-bottom: 1px solid #ddd; }
.user-nav { display: flex; justify-content: space-around; padding-bottom: 20px; border-bottom: 1px solid #ddd; overflow-x: auto; }
.user-nav ul { width: 100%; flex-wrap: nowrap; white-space: nowrap; display: flex; scrollbar-width: thin; /* For Firefox */ scroll-snap-type: x mandatory; overflow-x: auto; /* This will hide the scrollbar if not needed */ scroll-behavior: smooth; list-style: none; margin: 0px; padding: 20px 0px; }
.user-nav ul::-webkit-scrollbar { height: 8px; /* Sets the scrollbar height for webkit browsers */ }
.user-nav ul::-webkit-scrollbar-thumb { background: #ccc; /* Custom scrollbar color */ border-radius: 10px; }
.user-nav ul::-webkit-scrollbar-thumb:hover { background: #888; }
user-nav ul::-webkit-scrollbar-track { background: transparent; /* Makes scrollbar track invisible */ }
/* Impostazioni Generali */
.container_impostazioni { margin-top: 20px; background-color: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
.impostazioni-generali { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.report-options { display: flex; gap: 10px; }
button.export-btn { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
button.export-btn:hover { background-color: #2980b9; }
button.impostazioni-btn { grid-column: 1 / -1; background-color: #4CAF50; color: white; padding: 10px; border: none; border-radius: 5px; cursor: pointer; }
button.impostazioni-btn:hover { background-color: #45a049; }
input#user-search { margin: 20px 0px; width: 350px; max-width: calc(100% - 24px); }
@media (max-width: 900px) {
   .admin .prenotazioni-table,
    .prenotazioni-table { grid-template-columns: 1fr; padding: 0px; }
.prenotazione-header { display: none; /* Nascondiamo la testata nella visualizzazione mobile */ }
.prenotazione-row { display: grid; grid-template-columns: 1fr; background-color: #fff; padding: 10px; margin-bottom: 0px; border: 1px solid #ddd; border-radius: 8px; }
 .prenotazione-row span { display: block; text-align: left; padding: 5px 0; position: relative; }
.prenotazione-row span::before { content: attr(data-label); font-weight: bold; /* position: absolute; */ margin-right: 10px; right: 0; top: 0; color: #888; width: 100px; }
 .prenotazione-row span.azioni::before { display: none; }
.prenotazione-row .azioni { text-align: right; }
.profilo-utente { grid-template-columns: 1fr; }
.container_prenotazioni, .container_utenti, .container_utente { background-color: #ffffff; padding: 10px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-bottom: 20px; }
.container_utenti .prenotazioni-table { grid-template-columns: repeat(1, 1fr); }
    .impostazioni-generali { grid-template-columns: 1fr; }
}
.footer img { max-width: 80vw; }
@media (max-width: 480px) {
    body { padding: 5px; }
    .prenotazione-row span::before { width: 80px; /* Diminuiamo la larghezza delle label */ }
    .footer { display: flex; flex-direction: column; }
    h3#titolo-azione-step { font-size: 20px; }
    .button-container a { font-size: 16px; }
    .sala { margin-right: auto; margin-left: auto; }
}


.modal { display: none; /* Nascondi il popup di default */ position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); /* Sfondo semi-trasparente */ }

.modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 300px; text-align: center; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

.modal-header { font-size: 18px; font-weight: bold; }
.modal-body { margin: 15px 0; }
.modal-footer { display: flex; justify-content: space-between; }

/* Pulsanti */
.btn { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
.btn-confirm { background-color: #28a745; color: white; }
.btn-cancel { background-color: #dc3545; color: white; }
.btn:hover { opacity: 0.8; }


h1 { display: flex; justify-content: space-between; align-content: center; flex-wrap: wrap; align-items: center; }
    h1 a { color: #4CAF50; }
    h1 div { font-size: 16px; }
        h1 div a { color: #2196F3; }
        .buttonsreport{padding-top: 10px;}
        .mt-10 {margin-top: 10px;}