@import url("https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap");
.mainServ {position: absolute;width: 90%;height: 420px;font-family: 'Josefin Sans', sans-serif;background-color: #B8F0FF;}
.mainServ.is-rotated-left {transform: translate(-50%, -50%) rotateY(-4deg);}
.mainServ.is-rotated-right {transform: translate(-50%, -50%) rotateY(4deg);}
.mainServ .sideb,.mainServ .right-wrapper {border:1px solid #ccc;background-color: #FEFEFE;width: 100%;float: left;height: 100%;box-sizing: border-box;padding: 25px;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;}
.mainServ .headerServ {display: flex;justify-content: space-between;width: 100%;}.mainServ .headerServ i {padding: 0 5px;cursor: pointer;font-size:22px;color:#0073B4;}
.mainServ .headerServ span {display: inline-block;margin: 0 3px;font-weight: 700;}
.mainServ .right-wrapper {background-color: #f05855;color: white;transform-origin: left center;transform: rotateY(110deg);transition: all 0.5s;}
.mainServ .right-wrapper.is-active {transform: rotateY(0deg);}
.mainServ .right-wrapper .headerServ {text-align: left;justify-content: center;}
.mainServ .right-wrapper .day {font-size: 12em;text-indent: -12px;display: block;}
.mainServ .right-wrapper .month {font-size: 2.5em;}
.mainServ .sideb .showDate {color: white;text-align: right;width: 100%;}
.mainServ .sideb .showDate i {cursor: pointer;background: #f05855;border-radius: 4px;padding: 8px 12px;transform: scale(1);transition: all 0.3s;}
.mainServ .sideb .showDate i.is-active {transform: scale(-1);}
.mainServ .sideb table {text-align: center;width: 90%;margin: 30px auto 0;table-layout: fixed;border-collapse: collapse;}
.mainServ .sideb table tbody:before {content: "-";display: block;line-height: 0.75em;color: transparent;}
.mainServ .sideb table th {/*giorni sett*/color: #0073B4;font-size: 0.80em;text-transform: uppercase;margin-bottom: 10px;}
.mainServ .sideb table td { /*giorni numeri*/padding: 11px 5px;color: #ced0ce;font-size: 1em;transition: all 0.3s;position: relative;}
.mainServ .sideb table td::before {content: "";display: none;width: 50%;height: 2px;position: absolute;left: 50%;top: 100%;transform: translate(-50%, -8px);background-color: #f05855;}
.mainServ .sideb table td.currentDay::before {display: block;}
.mainServ .sideb table td.selectable {color: #303633;cursor: pointer;margin:5px;border:5px solid #fff;background-color: #EAF2FF;}
.mainServ .sideb table td.selectable:hover {background: #0073B4;color: white;}
.mainServ .sideb table td.unSelectableLightDom{color: #FFDAE0;}
.mainServ .sideb table td.unSelectableDom {color: #f05855;}
.mainServ .sideb table td.unSelectable{color: #ccc;background: #fff;}
.mainServ .sideb table td.between {background-color: #333;color: white;}
.mainServ .sideb table td.active, .mainServ .sideb table td.hover {/*giorno selezionato*/background: #0073B4;color: white;}
.colorTitleService {color: #0073B4;}
.textService {color: #0073B4;font-size: 16px;}
.marginBottom440 {margin-bottom:440px;}

.calendario { font-family: 'Segoe UI', Arial, sans-serif; /*max-width: 450px;*/width:100%; /*margin: 20px;*/ background: white; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 12px; overflow: hidden; transition: transform 0.2s;}
.calendario:hover { transform: translateY(-2px);}
.headerJs { display: flex; justify-content: space-between; align-items: center; /*padding: 15px;*/ background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); color: white;}
.headerJs button { background: none; border: none; color: white; font-size: 18px; cursor: pointer; padding: 8px 12px; border-radius: 6px; transition: background-color 0.2s;}
.headerJs button:hover { background-color: rgba(255,255,255,0.2);}
.giorni { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: 600; background-color: #f8f9fa; padding: 12px 0; border-bottom: 1px solid #edf2f7;}
.date { display: grid; grid-template-columns: repeat(7, 1fr); background-color: white; padding: 8px;}
.data { padding: 10px; text-align: center; cursor: pointer; border-radius: 6px; margin: 2px; transition: all 0.2s ease; position: relative;}
.data:hover:not(.disabilitata):not(.altro-mese) { background-color: #e3f2fd; transform: scale(1.1);}
.selezionata { background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%); color: white; font-weight: bold;}
.disabilitata { background-color: #f5f5f5 !important; color: #ccc !important; cursor: not-allowed !important; text-decoration: line-through;}
.altro-mese { color: #cbd5e0; cursor: default;}
.oggi { border: 2px solid #4a90e2; font-weight: bold;}
.oggi::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: #4a90e2; border-radius: 50%;}
/* Aggiungiamo stile per il container delle date selezionate */
#dateSelezionate { margin: 20px; padding: 5px 20px 5px 20px; border: 1px solid #4a90e2; border-radius: 8px; max-width: 500px;}
.dateSelezionateTitle {color:#0F83C4;font-size:20px;margin-top: 0px;}
#listaDateSelezionate { padding-left: 20px; margin: 10px 0;}
#listaDateSelezionate li { margin: 5px 0; color: #357abd;}