main{align-items:center;display:flex;flex-direction:column;justify-content:flex-start}main div#agenda{margin-bottom:1em;width:90vw}main div.nb{font-style:italic;margin-top:1em;text-align:center}main div.nb ul{list-style-type:none}div.reservation{--planning-col-width:2.5em;display:flex;flex-direction:column;gap:1em;margin-top:1em}div.reservation div.calendarNav{display:flex;gap:3em;justify-content:center;padding-left:var(--planning-col-width)}div.reservation div.calendarNav div.weekNav{align-items:center;display:flex;gap:1em;justify-content:center}div.reservation div.calendarNav div.addOnButtons{display:flex;gap:1em}div.reservation div.canals{display:flex;flex-direction:column;gap:1em;justify-content:center}div.reservation div.canals a{border:1px solid #c91312;border-radius:.5em;display:flex;padding:.5em}div.reservation div.canals a svg{height:100%;width:100%}div.reservation div.canals a svg path{fill:#c91312}div.reservation div.canals a.active,div.reservation div.canals a:hover{background-color:#c91312;color:#fff}div.reservation div.canals a.active svg path,div.reservation div.canals a:hover svg path{fill:#fff}div.reservation div.caption{align-items:center;display:flex;flex-wrap:wrap;gap:1em;grid-area:3/2;justify-content:space-between}div.reservation div.caption>div{align-items:center;display:flex;gap:.5em}div.reservation div.caption .label{width:8em}div.reservation div.caption .past{background-color:#f4f4f4;border-bottom:1px solid gray;border-top:1px solid gray}div.reservation div.caption .free{border-bottom:1px solid #c91312;border-top:1px solid #c91312}div.reservation div.caption .mine{background-color:#d7fbfb;border-bottom:2px solid #36eced;border-top:2px solid #36eced}div.reservation div.caption .admin{background-color:#cafae0;border-bottom:2px solid #12c965;border-top:2px solid #12c965}div.reservation div.caption .taken{background-color:#f9bdbc;border-bottom:2px solid #c91312;border-top:2px solid #c91312}div.reservation div.caption .close{background-color:#d3d3d3;border-bottom:2px solid #000;border-top:2px solid #000}div.reservation div.caption .admin.temp,div.reservation div.caption .mine.temp,div.reservation div.caption .taken.temp{border-bottom-style:dashed;border-top-style:dashed}div.reservation div.caption .admin,div.reservation div.caption .close,div.reservation div.caption .free,div.reservation div.caption .mine,div.reservation div.caption .taken{height:1.5em;width:3em}@media screen and (max-width:650px){main{padding-left:5vw;padding-right:5vw}div.reservation{grid-template-columns:1fr;width:90vw}div.reservation div.planning{grid-area:3/1;transition:grid-template-columns 1s ease}div.reservation div.caption{grid-area:4/1}div.reservation div.calendarNav{flex-direction:column;gap:1em;grid-area:2/1;padding-left:0}div.reservation div.calendarNav div.weekNav{gap:.1em;justify-content:space-between}div.reservation div.calendarNav div.addOnButtons{flex-direction:row-reverse}div.reservation div.canals{flex-direction:row;flex-wrap:wrap;grid-area:1/1;justify-content:space-evenly}div.reservation div.canals .infos{display:none}}div.planning{--planning-row-height:1.5em;display:grid}div.planning>div{margin-top:-1px;overflow:hidden;text-overflow:ellipsis}div.planning div.day{grid-row:1;padding-bottom:.5em;text-align:center;text-transform:capitalize}div.planning div.hour{font-size:.8em;grid-column:1;padding-right:.5em;text-align:right}div.planning div.admin,div.planning div.close,div.planning div.free,div.planning div.mine,div.planning div.past,div.planning div.taken{border-right:2px solid #000;font-size:.7em}div.planning div.admin.temp,div.planning div.close.temp,div.planning div.free.temp,div.planning div.mine.temp,div.planning div.past.temp,div.planning div.taken.temp{border-bottom-style:dashed;border-top-style:dashed}div.planning div.past{background-color:#f4f4f4;border-bottom:1px solid gray;border-top:1px solid gray}div.planning div.free{border-bottom:1px solid #c91312;border-top:1px solid #c91312;cursor:pointer}div.planning div.close{background-color:#d3d3d3;border-bottom:2px solid #000;border-top:2px solid #000}div.planning div.taken{background-color:#f9bdbc;border-bottom:2px solid #c91312;border-top:2px solid #c91312}div.planning div.mine{background-color:#d7fbfb;border-bottom:2px solid #36eced;border-top:2px solid #36eced;cursor:pointer}div.planning .admin{background-color:#cafae0;border-bottom:2px solid #12c965;border-top:2px solid #12c965;cursor:pointer}div.planning dialog.schedule{max-width:600px;padding:2em;width:50vw}div.planning dialog.schedule form{align-content:center;align-items:center;display:flex;flex-wrap:wrap;gap:1em;justify-content:space-between}div.planning dialog.schedule form div.date{display:flex;justify-content:flex-start}div.planning dialog.schedule form div.date input{width:7.5em}div.planning dialog.schedule form div.date,div.planning dialog.schedule form div.end,div.planning dialog.schedule form div.start{width:30%}div.planning dialog.schedule form div.end,div.planning dialog.schedule form div.start{align-content:center;align-items:center;display:flex;gap:.3em;justify-content:center}div.planning dialog.schedule form div.end select,div.planning dialog.schedule form div.start select{width:7em}div.planning dialog.schedule form div.notes{width:100%}div.planning dialog.schedule form div.notes textarea{border-width:1px;height:10em;padding:2px;width:calc(100% - 5px)}div.planning dialog.schedule form menu{align-content:center;align-items:center;display:flex;gap:1em;justify-content:flex-end;width:90%}div.planning dialog.schedule div.delete,div.planning dialog.schedule div.header{align-items:center;display:flex;margin-bottom:1em}div.planning dialog.schedule div.delete{justify-content:flex-end}div.planning dialog.schedule div.header{justify-content:space-between}@media screen and (max-width:650px){div.planning{--planning-row-height:2.5em}div.planning dialog.schedule{width:75vw}div.planning dialog.schedule form{flex-direction:column}div.planning dialog.schedule form div.date{display:flex;justify-content:flex-start}div.planning dialog.schedule form div.date,div.planning dialog.schedule form div.end,div.planning dialog.schedule form div.start{width:100%}div.planning dialog.schedule form div.end,div.planning dialog.schedule form div.start{justify-content:space-between}}