#eventCalendar{--calendar-border-color:#ccc;--calendar-text:#000;--calendar-text-muted:#999;--calendar-button-bg:#36a;--calendar-button-hover-bg:#69f;--calendar-button-bg-ok:#3a6;--calendar-button-hover-bg-ok:#6f9;--calendar-button-bg-delete:#a36;--calendar-button-hover-bg-delete:#f69;--calendar-button-text:#fff;--calendar-day-hover-bg:#eee;--calendar-day-field-bg:#fff;} #eventCalendar{margin:0.5cm 0;color:var(--calendar-text);} #eventCalendar svg image{color:var(--calendar-button-text);} #eventCalendar .week{display:flex;flex-flow:row nowrap;width:auto;border-top:1px solid var(--calendar-border-color);} #eventCalendar .calendarGrid{border:1px solid var(--calendar-border-color);} #eventCalendar .week:nth-child(-n + 1 of .week){border-top:0;} #eventCalendar .day{flex:1;border-left:1px solid var(--calendar-border-color);padding:0.5em;display:flex;flex-flow:column;} #eventCalendar .day .addEvent{visibility:hidden;} #eventCalendar .day:first-child{border-left:0;} #eventCalendar .day:hover,#eventCalendar .day:focus{background-color:var(--calendar-day-hover-bg);transition:.2s ease-in-out;} #eventCalendar .day:hover .addEvent,#eventCalendar .day:focus .addEvent{visibility:visible;margin:auto 0 0 0;} #eventCalendar .date,.weekday{color:var(--calendar-text-muted);} #eventCalendar .weekday{display:none;} #eventCalendar .header .weekday{display:block;border:0;text-align:center;} #eventCalendar .calendarHeader{text-align:center;display:flex;flex-flow:row wrap;align-items:center;margin:auto;font-size:200%;font-weight:bold;} #eventCalendar .calendarHeader>*{flex:1;} #eventCalendar button{border:0;border-radius:0.25cm;background-color:var(--calendar-button-bg);color:var(--calendar-button-text);padding:0.5em;display:inline-flex;align-items:center;gap:0.5em;vertical-align:middle;} #eventCalendar button svg{height:0.75cm;width:auto;} #eventCalendar button:hover,#eventCalendar button:focus{transition:.2s ease-in-out;background-color:var(--calendar-button-hover-bg);} #eventCalendar .calendarHeader span:first-child{text-align:right;} #eventCalendar .calendarHeader span:last-child{text-align:left;} #eventCalendar .outOfMonth{color:var(--calendar-text-muted);} #eventCalendar .events{display:flex;flex-flow:column;overflow-wrap:anywhere;margin:0 auto 0.5cm 0;} #eventCalendar .events *{flex:1;margin:0 0 0.25cm 0;} #eventCalendar .event{padding:0.25em;border-radius:.25cm;text-decoration:none;color:#000;} #eventCalendar .event svg{vertical-align:bottom;height:auto;width:1em;} #eventCalendar .event.inactive{color:var(--calendar-text-muted);} #eventCalendar .eventImage{max-width:100%;height:auto;border-radius:0.25em;} #eventCalendar .eventImagePreview{max-width:6em;max-height:6em;object-fit:cover;border-radius:0.25em;} #eventCalendar .event:hover,#eventCalendar .event:focus,#eventCalendar .event:active{text-decoration:underline;color:var(--calendar-day-hover-bg);} #eventCalendar .events .event .time{display:inline-block;width:5em;} #eventCalendar .event:hover{background-color:var(--calendar-button-hover-bg);} #eventCalendar form fieldset{display:flex;flex-flow:column;border:0;padding:0;margin:0;} #eventCalendar form fieldset>*{flex:1;} #eventCalendar form label{display:flex;flex-flow:row wrap;align-items:center;margin:0.5cm 0;border:1px solid var(--calendar-border-color);border-radius:0.5cm;background-color:var(--calendar-day-hover-bg);} #eventCalendar form label span{flex:1 0 12.5%;flex-basis:auto;padding:0.2cm;box-sizing:border-box;} #eventCalendar form label :nth-child(2){flex:7 0 87.5%;border:0;border-radius:0.5cm;padding:0.25cm;box-sizing:border-box;background-color:var(--calendar-day-field-bg);text-align:left;} #eventCalendar form label input:nth-child(1){margin:0 0.2cm;} #eventCalendar form label input[type="checkbox"]:nth-child(2){margin:0.25cm auto;} #eventCalendar form textarea{resize:none;} #eventCalendar form div.formButtons{display:flex;flex-flow:row wrap;} #eventCalendar .eventDescription img{max-width:90%;} #eventCalendar form fieldset>div>button,#eventCalendar form fieldset>div>span{flex:auto;} #eventCalendar form fieldset button[type="submit"]{background-color:var(--calendar-button-bg-ok);} #eventCalendar fieldset button[type="submit"]:hover,#eventCalendar fieldset button[type="submit"]:focus{background-color:var(--calendar-button-bg-ok);} #eventCalendar form fieldset button.delete{background-color:var(--calendar-button-bg-delete);} #eventCalendar .loading svg{animation:spin 1s linear infinite;} #eventCalendar .copied{margin:0 0.5cm;} #eventCalendar .calendarLinksButton>svg{vertical-align:middle;margin-right:0.5em;} #eventCalendar .calendarLinksListContainer{visibility:hidden;opacity:0%;transition:100ms ease-in-out;position:absolute;z-index:1000;} #eventCalendar .calendarLinksList{list-style-type:none;position:relative;top:-5cm;background:#fff;border-radius:0.1cm;box-shadow:rgba(0,0,0,0.5) 0 0 1cm;width:max-content;padding:0.5em;} #eventCalendar .calendarLinksList li a{display:block;transition:100ms ease-in;padding:0.5em;text-decoration:none;color:#000;} #eventCalendar .calendarLinksList li a:hover,#eventCalendar .calendarLinksList li a:focus-within{text-decoration:underline;background-color:var(--calendar-button-hover-bg);color:var(--calendar-button-text);} #eventCalendar .calendarLinksList img{width:2em;vertical-align:middle;margin-right:0.5em;} #eventCalendar .calendarLinks:focus-within .calendarLinksListContainer{visibility:visible;opacity:100%;} #eventCalendar .responses{transition:200ms ease-in-out;} #eventCalendar .responses dl.response:hover{background-color:var(--calendar-day-hover-bg);} #eventCalendar .responses dl.response div{display:flex;flex-flow:row wrap;transition:100ms ease-in-out;} #eventCalendar .responses dl.response div:hover{background-color:var(--calendar-border-color);} #eventCalendar .responses dl.response dt{flex:1;text-align:right;font-weight:bold;} #eventCalendar .responses dl.response dt:last-child{text-align:center;} #eventCalendar .responses dl.response dd{flex:1;margin-inline-start:1em;} @keyframes spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}} @media screen and (max-width:800px){#eventCalendar .week{flex-direction:column;} #eventCalendar .weekday{display:inline-block;} #eventCalendar .week.header .weekday,#eventCalendar .outOfMonth{display:none;} #eventCalendar .weekday::before{content:'\a0'} #eventCalendar .week,#eventCalendar .calendarGrid{border:0;} #eventCalendar .day{border:0;border-bottom:1px solid var(--calendar-border-color);} #eventCalendar .calendarHeader span:nth-child(2){flex:5;}}