that wraps the table */position:relative;z-index:1; /* container inner z-index's because s can't do it */} .fc .fc-daygrid-day.fc-day-today {background-color:rgba(225,145,162,0.2);background-color:var(--fc-today-bg-color, rgba(225,145,162,0.2)))} .fc .fc-daygrid-day-frame {position:relative;min-height:100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */} .fc {/* cell top */} .fc .fc-daygrid-day-top {display:flex;flex-direction:row-reverse} .fc .fc-day-other .fc-daygrid-day-top {opacity:0.3} .fc {/* day number (within cell top) */} .fc .fc-daygrid-day-number {position:relative;z-index:4;padding:4px;color:#1A1311} .fc {/* event container */} .fc .fc-daygrid-day-events {margin-top:1px; /* needs to be margin, not padding, so that available cell height can be computed */} .fc {/* positioning for balanced vs natural */} .fc .fc-daygrid-body-balanced .fc-daygrid-day-events {position:absolute;left:0;right:0} .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {position:relative; /* for containing abs positioned event harnesses */min-height:2em; /* in addition to being a min-height during natural height, equalizes the heights a little bit */} .fc .fc-daygrid-body-natural { /* can coexist with -unbalanced */} .fc .fc-daygrid-body-natural .fc-daygrid-day-events {margin-bottom:1em} .fc {/* event harness */} .fc .fc-daygrid-event-harness {position:relative} .fc .fc-daygrid-event-harness-abs {position:absolute;top:0; /* fallback coords for when cannot yet be computed */left:0; /* */right:0; /* */} .fc .fc-daygrid-bg-harness {position:absolute;top:0;bottom:0} .fc {/* bg content */} .fc .fc-daygrid-day-bg .fc-non-business { z-index:1 } .fc .fc-daygrid-day-bg .fc-bg-event { z-index:2 } .fc .fc-daygrid-day-bg .fc-highlight { z-index:3 } .fc {/* events */} .fc .fc-daygrid-event {z-index:6;margin-top:1px} .fc .fc-daygrid-event.fc-event-mirror {z-index:7} .fc {/* cell bottom (within day-events) */} .fc .fc-daygrid-day-bottom {font-size:.85em;padding:2px 3px 0} .fc .fc-daygrid-day-bottom:before {content:"";clear:both;display:table; } .fc .fc-daygrid-more-link {position:relative;z-index:4;cursor:pointer} .fc {/* week number (within frame) */} .fc .fc-daygrid-week-number {position:absolute;z-index:5;top:0;padding:2px;min-width:1.5em;text-align:center;background-color:rgba(208, 208, 208, 0.3);background-color:var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));color:#808080;color:var(--fc-neutral-text-color, #808080)} .fc {/* popover */} .fc .fc-more-popover .fc-popover-body {min-width:220px;padding:10px} .fc-direction-ltr .fc-daygrid-event.fc-event-start,.fc-direction-rtl .fc-daygrid-event.fc-event-end {margin-left:2px} .fc-direction-ltr .fc-daygrid-event.fc-event-end,.fc-direction-rtl .fc-daygrid-event.fc-event-start {margin-right:2px} .fc-direction-ltr .fc-daygrid-week-number {left:0;border-radius:0 0 3px 0} .fc-direction-rtl .fc-daygrid-week-number {right:0;border-radius:0 0 0 3px} .fc-liquid-hack .fc-daygrid-day-frame {position:static; /* will cause inner absolute stuff to expand to */} .fc-daygrid-event { /* make root-level, because will be dragged-and-dropped outside of a component root */position:relative; /* for z-indexes assigned later */white-space:nowrap;border-radius:3px; /* dot event needs this to when selected */font-size:.85em;font-size:var(--fc-small-font-size, .85em)} /* --- the rectangle ("block") style of event --- */.fc-daygrid-block-event .fc-event-time {font-weight:bold} .fc-daygrid-block-event .fc-event-time,.fc-daygrid-block-event .fc-event-title {padding:1px} /* --- the dot style of event --- */.fc-daygrid-dot-event {display:flex;align-items:center;padding:2px 0} .fc-daygrid-dot-event .fc-event-title {flex-grow:1;flex-shrink:1;min-width:0; /* important for allowing to shrink all the way */overflow:hidden;font-weight:bold} .fc-daygrid-dot-event:hover,.fc-daygrid-dot-event.fc-event-mirror {background:rgba(0, 0, 0, 0.1)} .fc-daygrid-dot-event.fc-event-selected:before {/* expand hit area */top:-10px;bottom:-10px} .fc-daygrid-event-dot { /* the actual dot */margin:0 4px;box-sizing:content-box;width:0;height:0;border:4px solid #3788d8;border:calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid var(--fc-event-border-color, #3788d8);border-radius:4px;border-radius:calc(var(--fc-daygrid-event-dot-width, 8px) / 2)} /* --- spacing between time and title --- */.fc-direction-ltr .fc-daygrid-event .fc-event-time {margin-right:3px} .fc-direction-rtl .fc-daygrid-event .fc-event-time {margin-left:3px} /*A VERTICAL event*/.fc-v-event { /* allowed to be top-level */display:block;border:1px solid #3788d8;border:1px solid var(--fc-event-border-color, #3788d8);background-color:#3788d8;background-color:var(--fc-event-bg-color, #3788d8)} .fc-v-event .fc-event-main {color:#fff;color:var(--fc-event-text-color, #fff);height:100%} .fc-v-event .fc-event-main-frame {height:100%;display:flex;flex-direction:column} .fc-v-event .fc-event-time {flex-grow:0;flex-shrink:0;max-height:100%;overflow:hidden} .fc-v-event .fc-event-title-container { /* a container for the sticky cushion */flex-grow:1;flex-shrink:1;min-height:0; /* important for allowing to shrink all the way */} .fc-v-event .fc-event-title { /* will have fc-sticky on it */top:0;bottom:0;max-height:100%; /* clip overflow */overflow:hidden} .fc-v-event:not(.fc-event-start) {border-top-width:0;border-top-left-radius:0;border-top-right-radius:0} .fc-v-event:not(.fc-event-end) {border-bottom-width:0;border-bottom-left-radius:0;border-bottom-right-radius:0} .fc-v-event.fc-event-selected:before {/* expand hit area */left:-10px;right:-10px} .fc-v-event {/* resizer (mouse AND touch) */} .fc-v-event .fc-event-resizer-start {cursor:n-resize} .fc-v-event .fc-event-resizer-end {cursor:s-resize} .fc-v-event {/* resizer for MOUSE */} .fc-v-event:not(.fc-event-selected) .fc-event-resizer {height:8px;height:var(--fc-event-resizer-thickness, 8px);left:0;right:0} .fc-v-event:not(.fc-event-selected) .fc-event-resizer-start {top:-4px;top:calc(var(--fc-event-resizer-thickness, 8px) / -2)} .fc-v-event:not(.fc-event-selected) .fc-event-resizer-end {bottom:-4px;bottom:calc(var(--fc-event-resizer-thickness, 8px) / -2)} .fc-v-event {/* resizer for TOUCH (when event is "selected") */} .fc-v-event.fc-event-selected .fc-event-resizer {left:50%;margin-left:-4px;margin-left:calc(var(--fc-event-resizer-dot-total-width, 8px) / -2)} .fc-v-event.fc-event-selected .fc-event-resizer-start {top:-4px;top:calc(var(--fc-event-resizer-dot-total-width, 8px) / -2)} .fc-v-event.fc-event-selected .fc-event-resizer-end {bottom:-4px;bottom:calc(var(--fc-event-resizer-dot-total-width, 8px) / -2)} .fc .fc-timegrid .fc-daygrid-body { /* the all-day daygrid within the timegrid view */z-index:2; /* put above the timegrid-body so that more-popover is above everything. TODO:better solution */} .fc .fc-timegrid-divider {padding:0 0 2px; /* browsers get confused when you set height. use padding instead */} .fc .fc-timegrid-body {position:relative;z-index:1; /* scope the z-indexes of slots and cols */min-height:100%; /* fill height always, even when slat table doesn't grow */} .fc .fc-timegrid-axis-chunk { /* for advanced ScrollGrid */position:relative /* offset parent for now-indicator-container */} .fc .fc-timegrid-axis-chunk > table {position:relative;z-index:1; /* above the now-indicator-container */} .fc .fc-timegrid-slots {position:relative;z-index:1} .fc .fc-timegrid-slot { /* a */height:1.5em;border-bottom:0 /* each cell owns its top border */} .fc .fc-timegrid-slot:empty:before {content:'\00a0'; /* make sure there's at least an empty space to create height for height syncing */} .fc .fc-timegrid-slot-minor {border-top-style:dotted} .fc .fc-timegrid-slot-label-cushion {display:inline-block;white-space:nowrap} .fc .fc-timegrid-slot-label {vertical-align:middle; /* vertical align the slots */} .fc {/* slots AND axis cells (top-left corner of view including the "all-day" text) */} .fc .fc-timegrid-axis-cushion,.fc .fc-timegrid-slot-label-cushion {padding:0 4px} .fc {/* axis cells (top-left corner of view including the "all-day" text) *//* vertical align is more complicated, uses flexbox */} .fc .fc-timegrid-axis-frame-liquid {height:100%; /* will need liquid-hack in FF */} .fc .fc-timegrid-axis-frame {overflow:hidden;display:flex;align-items:center; /* vertical align */justify-content:flex-end; /* horizontal align. matches text-align below */} .fc .fc-timegrid-axis-cushion {max-width:60px; /* limits the width of the "all-day" text */flex-shrink:0; /* allows text to expand how it normally would, regardless of constrained width */} .fc-direction-ltr .fc-timegrid-slot-label-frame {text-align:right} .fc-direction-rtl .fc-timegrid-slot-label-frame {text-align:left} .fc-liquid-hack .fc-timegrid-axis-frame-liquid {height:auto;position:absolute;top:0;right:0;bottom:0;left:0} .fc .fc-timegrid-col.fc-day-today {background-color:rgba(255, 220, 40, 0.15);background-color:var(--fc-today-bg-color, rgba(255, 220, 40, 0.15))} .fc .fc-timegrid-col-frame {min-height:100%; /* liquid-hack is below */position:relative} .fc-media-screen.fc-liquid-hack .fc-timegrid-col-frame {height:auto;position:absolute;top:0;right:0;bottom:0;left:0} .fc-media-screen .fc-timegrid-cols {position:absolute; /* no z-index. children will decide and go above slots */top:0;left:0;right:0;bottom:0} .fc-media-screen .fc-timegrid-cols > table {height:100%} .fc-media-screen .fc-timegrid-col-bg,.fc-media-screen .fc-timegrid-col-events,.fc-media-screen .fc-timegrid-now-indicator-container {position:absolute;top:0;left:0;right:0} .fc {/* bg */} .fc .fc-timegrid-col-bg {z-index:2; /* TODO:kill */} .fc .fc-timegrid-col-bg .fc-non-business { z-index:1 } .fc .fc-timegrid-col-bg .fc-bg-event { z-index:2 } .fc .fc-timegrid-col-bg .fc-highlight { z-index:3 } .fc .fc-timegrid-bg-harness {position:absolute; /* top/bottom will be set by JS */left:0;right:0} .fc {/* fg events *//* (the mirror segs are put into a separate container with same classname, *//* and they must be after the normal seg container to appear at a higher z-index) */} .fc .fc-timegrid-col-events {z-index:3;/* child event segs have z-indexes that are scoped within this div */} .fc {/* now indicator */} .fc .fc-timegrid-now-indicator-container {bottom:0;overflow:hidden; /* don't let overflow of lines/arrows cause unnecessary scrolling *//* z-index is set on the individual elements */} .fc-direction-ltr .fc-timegrid-col-events {margin:0 2.5% 0 2px} .fc-direction-rtl .fc-timegrid-col-events {margin:0 2px 0 2.5%} .fc-timegrid-event-harness {position:absolute /* top/left/right/bottom will all be set by JS */} .fc-timegrid-event-harness > .fc-timegrid-event {position:absolute; /* absolute WITHIN the harness */top:0; /* for when not yet positioned */bottom:0; /* " */left:0;right:0} .fc-timegrid-event-harness-inset .fc-timegrid-event,.fc-timegrid-event.fc-event-mirror,.fc-timegrid-more-link {box-shadow:0px 0px 0px 1px #fff;box-shadow:0px 0px 0px 1px var(--fc-page-bg-color, #fff)} .fc-timegrid-event,.fc-timegrid-more-link { /* events need to be root */font-size:.85em;font-size:var(--fc-small-font-size, .85em);border-radius:3px} .fc-timegrid-event { /* events need to be root */margin-bottom:1px /* give some space from bottom */} .fc-timegrid-event .fc-event-main {padding:1px 1px 0} .fc-timegrid-event .fc-event-time {white-space:nowrap;font-size:.85em;font-size:var(--fc-small-font-size, .85em);margin-bottom:1px} .fc-timegrid-event-short .fc-event-main-frame {flex-direction:row;overflow:hidden} .fc-timegrid-event-short .fc-event-time:after {content:'\00a0-\00a0'; /* dash surrounded by non-breaking spaces */} .fc-timegrid-event-short .fc-event-title {font-size:.85em;font-size:var(--fc-small-font-size, .85em)} .fc-timegrid-more-link { /* does NOT inherit from fc-timegrid-event */position:absolute;z-index:9999; /* hack */color:inherit;color:var(--fc-more-link-text-color, inherit);background:#d0d0d0;background:var(--fc-more-link-bg-color, #d0d0d0);cursor:pointer;margin-bottom:1px; /* match space below fc-timegrid-event */} .fc-timegrid-more-link-inner { /* has fc-sticky */padding:3px 2px;top:0} .fc-direction-ltr .fc-timegrid-more-link {right:0} .fc-direction-rtl .fc-timegrid-more-link {left:0} .fc {/* line */} .fc .fc-timegrid-now-indicator-line {position:absolute;z-index:4;left:0;right:0;border-style:solid;border-color:red;border-color:var(--fc-now-indicator-color, red);border-width:1px 0 0} .fc {/* arrow */} .fc .fc-timegrid-now-indicator-arrow {position:absolute;z-index:4;margin-top:-5px; /* vertically center on top coordinate */border-style:solid;border-color:red;border-color:var(--fc-now-indicator-color, red)} .fc-direction-ltr .fc-timegrid-now-indicator-arrow {left:0;/* triangle pointing right. TODO:mixin */border-width:5px 0 5px 6px;border-top-color:transparent;border-bottom-color:transparent} .fc-direction-rtl .fc-timegrid-now-indicator-arrow {right:0;/* triangle pointing left. TODO:mixin */border-width:5px 6px 5px 0;border-top-color:transparent;border-bottom-color:transparent} :root {--fc-list-event-dot-width:10px;--fc-list-event-hover-bg-color:#f5f5f5} .fc-theme-standard .fc-list {border:1px solid #ddd;border:1px solid var(--fc-border-color, #ddd)} .fc {/* message when no events */} .fc .fc-list-empty {background-color:rgba(208, 208, 208, 0.3);background-color:var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));height:100%;display:flex;justify-content:center;align-items:center; /* vertically aligns fc-list-empty-inner */} .fc .fc-list-empty-cushion {margin:5em 0} .fc {/* table within the scroller *//* ---------------------------------------------------------------------------------------------------- */} .fc .fc-list-table {width:100%;border-style:hidden; /* kill outer border on theme */} .fc .fc-list-table tr > * {border-left:0;border-right:0} .fc .fc-list-sticky .fc-list-day > * { /* the cells */position:sticky;top:0;background:#fff;background:var(--fc-page-bg-color, #fff); /* for when headers are styled to be transparent and sticky */} .fc .fc-list-table th {padding:0; /* uses an inner-wrapper instead... */} .fc .fc-list-table td,.fc .fc-list-day-cushion {padding:8px 14px} .fc {/* date heading rows *//* ---------------------------------------------------------------------------------------------------- */} .fc .fc-list-day-cushion:after {content:"";clear:both;display:table; /* clear floating */} .fc-theme-standard .fc-list-day-cushion {background-color:rgba(208, 208, 208, 0.3);background-color:var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3))} .fc-direction-ltr .fc-list-day-text,.fc-direction-rtl .fc-list-day-side-text {float:left} .fc-direction-ltr .fc-list-day-side-text,.fc-direction-rtl .fc-list-day-text {float:right} /* make the dot closer to the event title */.fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right:0 } .fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left:0 } .fc .fc-list-event.fc-event-forced-url {cursor:pointer; /* whole row will seem clickable */} .fc .fc-list-event:hover td {background-color:#f5f5f5;background-color:var(--fc-list-event-hover-bg-color, #f5f5f5)} .fc {/* shrink certain cols */} .fc .fc-list-event-graphic,.fc .fc-list-event-time {white-space:nowrap;width:1px} .fc .fc-list-event-dot {display:inline-block;box-sizing:content-box;width:0;height:0;border:5px solid #3788d8;border:calc(var(--fc-list-event-dot-width, 10px) / 2) solid var(--fc-event-border-color, #3788d8);border-radius:5px;border-radius:calc(var(--fc-list-event-dot-width, 10px) / 2)} .fc {/* reset styling */} .fc .fc-list-event-title a {color:inherit;text-decoration:none} .fc {/* underline link when hovering over any part of row */} .fc .fc-list-event.fc-event-forced-url:hover a {text-decoration:underline} .fc-theme-bootstrap a:not([href]) {color:inherit; /* natural color for navlinks */} td.fc-day-sat {background-color:rgba(67,158,226,0.1)} td.fc-day-sun {background-color:rgba(225,145,162,0.1)}