that wraps the table */ position: relative; z-index: 1; /* container inner z-index's because s can't do it */ } [dir] .fc .fc-daygrid-day.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-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; } [dir] .fc .fc-daygrid-day-number { padding: 4px; } .fc { /* event container */ } .fc .fc-daygrid-day-events { /* needs to be margin, not padding, so that available cell height can be computed */ } [dir] .fc .fc-daygrid-day-events { margin-top: 1px; } .fc { /* positioning for balanced vs natural */ } .fc .fc-daygrid-body-balanced .fc-daygrid-day-events { position: absolute; } [dir=ltr] .fc .fc-daygrid-body-balanced .fc-daygrid-day-events { left: 0; right: 0; } [dir=rtl] .fc .fc-daygrid-body-balanced .fc-daygrid-day-events { right: 0; left: 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 */ } [dir] .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 */ /* */ /* */ } [dir=ltr] .fc .fc-daygrid-event-harness-abs { left: 0; right: 0; } [dir=rtl] .fc .fc-daygrid-event-harness-abs { right: 0; left: 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; } [dir] .fc .fc-daygrid-event { 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 } [dir] .fc .fc-daygrid-day-bottom { padding: 2px 3px 0 } .fc .fc-daygrid-day-bottom:before { content: ""; display: table; } [dir] .fc .fc-daygrid-day-bottom:before { clear: both; } .fc .fc-daygrid-more-link { position: relative; z-index: 4; } [dir] .fc .fc-daygrid-more-link { cursor: pointer; } .fc { /* week number (within frame) */ } .fc .fc-daygrid-week-number { position: absolute; z-index: 5; top: 0; min-width: 1.5em; color: #808080; color: var(--fc-neutral-text-color, #808080); } [dir] .fc .fc-daygrid-week-number { padding: 2px; text-align: center; background-color: rgba(208, 208, 208, 0.3); background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3)); } .fc { /* popover */ } .fc .fc-more-popover .fc-popover-body { min-width: 220px; } [dir] .fc .fc-more-popover .fc-popover-body { padding: 10px; } [dir=ltr] .fc-direction-ltr .fc-daygrid-event.fc-event-start, [dir=ltr] .fc-direction-rtl .fc-daygrid-event.fc-event-end { margin-left: 2px; } [dir=rtl] .fc-direction-ltr .fc-daygrid-event.fc-event-start, [dir=rtl] .fc-direction-rtl .fc-daygrid-event.fc-event-end { margin-right: 2px; } [dir=ltr] .fc-direction-ltr .fc-daygrid-event.fc-event-end, [dir=ltr] .fc-direction-rtl .fc-daygrid-event.fc-event-start { margin-right: 2px; } [dir=rtl] .fc-direction-ltr .fc-daygrid-event.fc-event-end, [dir=rtl] .fc-direction-rtl .fc-daygrid-event.fc-event-start { margin-left: 2px; } [dir=ltr] .fc-direction-ltr .fc-daygrid-week-number { left: 0; border-radius: 0 0 3px 0; } [dir=rtl] .fc-direction-ltr .fc-daygrid-week-number { right: 0; border-radius: 0 0 0 3px; } [dir=ltr] .fc-direction-rtl .fc-daygrid-week-number { right: 0; border-radius: 0 0 0 3px; } [dir=rtl] .fc-direction-rtl .fc-daygrid-week-number { left: 0; border-radius: 0 0 3px 0; } .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; /* dot event needs this to when selected */ font-size: .85em; font-size: var(--fc-small-font-size, .85em); } [dir] .fc-daygrid-event { border-radius: 3px; } /* --- the rectangle ("block") style of event --- */ .fc-daygrid-block-event .fc-event-time { font-weight: bold; } [dir] .fc-daygrid-block-event .fc-event-time, [dir] .fc-daygrid-block-event .fc-event-title { padding: 1px; } /* --- the dot style of event --- */ .fc-daygrid-dot-event { display: flex; align-items: center } [dir] .fc-daygrid-dot-event { 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; } [dir] .fc-daygrid-dot-event:hover, [dir] .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 */ box-sizing: content-box; width: 0; height: 0; } [dir] .fc-daygrid-event-dot { margin: 0 4px; 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 --- */ [dir=ltr] .fc-direction-ltr .fc-daygrid-event .fc-event-time { margin-right: 3px; } [dir=rtl] .fc-direction-ltr .fc-daygrid-event .fc-event-time { margin-left: 3px; } [dir=ltr] .fc-direction-rtl .fc-daygrid-event .fc-event-time { margin-left: 3px; } [dir=rtl] .fc-direction-rtl .fc-daygrid-event .fc-event-time { margin-right: 3px; } /* A VERTICAL event */ .fc-v-event { /* allowed to be top-level */ display: block } [dir] .fc-v-event { 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; } [dir] .fc-v-event:not(.fc-event-start) { border-top-width: 0; } [dir=ltr] .fc-v-event:not(.fc-event-start) { border-top-left-radius: 0; border-top-right-radius: 0; } [dir=rtl] .fc-v-event:not(.fc-event-start) { border-top-right-radius: 0; border-top-left-radius: 0; } [dir] .fc-v-event:not(.fc-event-end) { border-bottom-width: 0; } [dir=ltr] .fc-v-event:not(.fc-event-end) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } [dir=rtl] .fc-v-event:not(.fc-event-end) { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .fc-v-event.fc-event-selected:before { /* expand hit area */ } [dir=ltr] .fc-v-event.fc-event-selected:before { left: -10px; right: -10px; } [dir=rtl] .fc-v-event.fc-event-selected:before { right: -10px; left: -10px; } .fc-v-event { /* resizer (mouse AND touch) */ } [dir] .fc-v-event .fc-event-resizer-start { cursor: n-resize; } [dir] .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); } [dir=ltr] .fc-v-event:not(.fc-event-selected) .fc-event-resizer { left: 0; right: 0; } [dir=rtl] .fc-v-event:not(.fc-event-selected) .fc-event-resizer { right: 0; left: 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") */ } [dir=ltr] .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); } [dir=rtl] .fc-v-event.fc-event-selected .fc-event-resizer { right: 50%; margin-right: -4px; margin-right: 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 { /* browsers get confused when you set height. use padding instead */ } [dir] .fc .fc-timegrid-divider { padding: 0 0 2px; } .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 /* each cell owns its top border */ } [dir] .fc .fc-timegrid-slot { border-bottom: 0 } .fc .fc-timegrid-slot:empty:before { content: '\00a0'; /* make sure there's at least an empty space to create height for height syncing */ } [dir] .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) */ } [dir] .fc .fc-timegrid-axis-cushion, [dir] .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 */ } [dir=ltr] .fc-direction-ltr .fc-timegrid-slot-label-frame { text-align: right; } [dir=rtl] .fc-direction-ltr .fc-timegrid-slot-label-frame { text-align: left; } [dir=ltr] .fc-direction-rtl .fc-timegrid-slot-label-frame { text-align: left; } [dir=rtl] .fc-direction-rtl .fc-timegrid-slot-label-frame { text-align: right; } .fc-liquid-hack .fc-timegrid-axis-frame-liquid { height: auto; position: absolute; top: 0; bottom: 0; } [dir=ltr] .fc-liquid-hack .fc-timegrid-axis-frame-liquid { right: 0; left: 0; } [dir=rtl] .fc-liquid-hack .fc-timegrid-axis-frame-liquid { left: 0; right: 0; } [dir] .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; bottom: 0; } [dir=ltr] .fc-media-screen.fc-liquid-hack .fc-timegrid-col-frame { right: 0; left: 0; } [dir=rtl] .fc-media-screen.fc-liquid-hack .fc-timegrid-col-frame { left: 0; right: 0; } .fc-media-screen .fc-timegrid-cols { position: absolute; /* no z-index. children will decide and go above slots */ top: 0; bottom: 0 } [dir=ltr] .fc-media-screen .fc-timegrid-cols { left: 0; right: 0 } [dir=rtl] .fc-media-screen .fc-timegrid-cols { right: 0; left: 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; } [dir=ltr] .fc-media-screen .fc-timegrid-col-bg, [dir=ltr] .fc-media-screen .fc-timegrid-col-events, [dir=ltr] .fc-media-screen .fc-timegrid-now-indicator-container { left: 0; right: 0; } [dir=rtl] .fc-media-screen .fc-timegrid-col-bg, [dir=rtl] .fc-media-screen .fc-timegrid-col-events, [dir=rtl] .fc-media-screen .fc-timegrid-now-indicator-container { right: 0; left: 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 */ } [dir=ltr] .fc .fc-timegrid-bg-harness { left: 0; right: 0; } [dir=rtl] .fc .fc-timegrid-bg-harness { right: 0; left: 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 */ } [dir=ltr] .fc-direction-ltr .fc-timegrid-col-events { margin: 0 2.5% 0 2px; } [dir=rtl] .fc-direction-ltr .fc-timegrid-col-events { margin: 0 2px 0 2.5%; } [dir=ltr] .fc-direction-rtl .fc-timegrid-col-events { margin: 0 2px 0 2.5%; } [dir=rtl] .fc-direction-rtl .fc-timegrid-col-events { margin: 0 2.5% 0 2px; } .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; /* " */ } [dir=ltr] .fc-timegrid-event-harness > .fc-timegrid-event { left: 0; right: 0; } [dir=rtl] .fc-timegrid-event-harness > .fc-timegrid-event { right: 0; left: 0; } [dir] .fc-timegrid-event-harness-inset .fc-timegrid-event, [dir] .fc-timegrid-event.fc-event-mirror, [dir] .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); } [dir] .fc-timegrid-event, [dir] .fc-timegrid-more-link { border-radius: 3px; } .fc-timegrid-event { /* events need to be root */ /* give some space from bottom */ } [dir] .fc-timegrid-event { margin-bottom: 1px } [dir] .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); } [dir] .fc-timegrid-event .fc-event-time { 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); /* match space below fc-timegrid-event */ } [dir] .fc-timegrid-more-link { background: #d0d0d0; background: var(--fc-more-link-bg-color, #d0d0d0); cursor: pointer; margin-bottom: 1px; } .fc-timegrid-more-link-inner { /* has fc-sticky */ top: 0; } [dir] .fc-timegrid-more-link-inner { padding: 3px 2px; } [dir=ltr] .fc-direction-ltr .fc-timegrid-more-link { right: 0; } [dir=rtl] .fc-direction-ltr .fc-timegrid-more-link { left: 0; } [dir=ltr] .fc-direction-rtl .fc-timegrid-more-link { left: 0; } [dir=rtl] .fc-direction-rtl .fc-timegrid-more-link { right: 0; } .fc { /* line */ } .fc .fc-timegrid-now-indicator-line { position: absolute; z-index: 4; } [dir] .fc .fc-timegrid-now-indicator-line { border-style: solid; border-color: red; border-color: var(--fc-now-indicator-color, red); border-width: 1px 0 0; } [dir=ltr] .fc .fc-timegrid-now-indicator-line { left: 0; right: 0; } [dir=rtl] .fc .fc-timegrid-now-indicator-line { right: 0; left: 0; } .fc { /* arrow */ } .fc .fc-timegrid-now-indicator-arrow { position: absolute; z-index: 4; /* vertically center on top coordinate */ } [dir] .fc .fc-timegrid-now-indicator-arrow { margin-top: -5px; border-style: solid; border-color: red; border-color: var(--fc-now-indicator-color, red); } .fc-direction-ltr .fc-timegrid-now-indicator-arrow { /* triangle pointing right. TODO: mixin */ } [dir] .fc-direction-ltr .fc-timegrid-now-indicator-arrow { border-top-color: transparent; border-bottom-color: transparent; } [dir=ltr] .fc-direction-ltr .fc-timegrid-now-indicator-arrow { left: 0; border-width: 5px 0 5px 6px; } [dir=rtl] .fc-direction-ltr .fc-timegrid-now-indicator-arrow { right: 0; border-width: 5px 6px 5px 0; } .fc-direction-rtl .fc-timegrid-now-indicator-arrow { /* triangle pointing left. TODO: mixin */ } [dir] .fc-direction-rtl .fc-timegrid-now-indicator-arrow { border-top-color: transparent; border-bottom-color: transparent; } [dir=ltr] .fc-direction-rtl .fc-timegrid-now-indicator-arrow { right: 0; border-width: 5px 6px 5px 0; } [dir=rtl] .fc-direction-rtl .fc-timegrid-now-indicator-arrow { left: 0; border-width: 5px 0 5px 6px; } :root { --fc-list-event-dot-width: 10px; --fc-list-event-hover-bg-color: #f5f5f5; } [dir] .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 { height: 100%; display: flex; justify-content: center; align-items: center; /* vertically aligns fc-list-empty-inner */ } [dir] .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)); } [dir] .fc .fc-list-empty-cushion { margin: 5em 0; } .fc { /* table within the scroller */ /* ---------------------------------------------------------------------------------------------------- */ } .fc .fc-list-table { width: 100%; /* kill outer border on theme */ } [dir] .fc .fc-list-table { border-style: hidden; } [dir=ltr] .fc .fc-list-table tr > * { border-left: 0; border-right: 0; } [dir=rtl] .fc .fc-list-table tr > * { border-right: 0; border-left: 0; } .fc .fc-list-sticky .fc-list-day > * { /* the cells */ position: sticky; top: 0; /* for when headers are styled to be transparent and sticky */ } [dir] .fc .fc-list-sticky .fc-list-day > * { background: #fff; background: var(--fc-page-bg-color, #fff); } .fc { /* only exists for aria reasons, hide for non-screen-readers */ } .fc .fc-list-table thead { position: absolute; } [dir=ltr] .fc .fc-list-table thead { left: -10000px; } [dir=rtl] .fc .fc-list-table thead { right: -10000px; } .fc { /* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */ } [dir] .fc .fc-list-table tbody > tr:first-child th { border-top: 0; } .fc .fc-list-table th { /* uses an inner-wrapper instead... */ } [dir] .fc .fc-list-table th { padding: 0; } [dir] .fc .fc-list-table td, [dir] .fc .fc-list-day-cushion { padding: 8px 14px; } .fc { /* date heading rows */ /* ---------------------------------------------------------------------------------------------------- */ } .fc .fc-list-day-cushion:after { content: ""; display: table; /* clear floating */ } [dir] .fc .fc-list-day-cushion:after { clear: both; } [dir] .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)); } [dir=ltr] .fc-direction-ltr .fc-list-day-text, [dir=ltr] .fc-direction-rtl .fc-list-day-side-text { float: left; } [dir=rtl] .fc-direction-ltr .fc-list-day-text, [dir=rtl] .fc-direction-rtl .fc-list-day-side-text { float: right; } [dir=ltr] .fc-direction-ltr .fc-list-day-side-text, [dir=ltr] .fc-direction-rtl .fc-list-day-text { float: right; } [dir=rtl] .fc-direction-ltr .fc-list-day-side-text, [dir=rtl] .fc-direction-rtl .fc-list-day-text { float: left; } /* make the dot closer to the event title */ [dir=ltr] .fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-right: 0 } [dir=rtl] .fc-direction-ltr .fc-list-table .fc-list-event-graphic { padding-left: 0 } [dir=ltr] .fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-left: 0 } [dir=rtl] .fc-direction-rtl .fc-list-table .fc-list-event-graphic { padding-right: 0 } .fc .fc-list-event.fc-event-forced-url { /* whole row will seem clickable */ } [dir] .fc .fc-list-event.fc-event-forced-url { cursor: pointer; } [dir] .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; } [dir] .fc .fc-list-event-dot { 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; } .vs--searchable .vs__dropdown-toggle { min-height: 37.99px; } .vs--searchable .vs__search::placeholder { color: #b4b7bd !important; } [dir] .vs--searchable.is-invalid .vs__dropdown-toggle { border-color: #ea5455; } [dir] .vs--searchable.is-invalid .vs__search { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ea5455' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ea5455' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: calc(0.725em + 0.438rem) calc(0.725em + 0.438rem); } [dir=ltr] .vs--searchable.is-invalid .vs__search { background-position: right calc(0.3625em + 0.219rem) center; padding-right: calc(1.45em + 0.876rem); } [dir=rtl] .vs--searchable.is-invalid .vs__search { background-position: left calc(0.3625em + 0.219rem) center; padding-left: calc(1.45em + 0.876rem); } .vs--searchable .vs__dropdown-toggle { min-height: 37.99px; } .vs--searchable .vs__search::placeholder { color: #b4b7bd !important; } [dir] .vs--searchable.is-invalid .vs__dropdown-toggle { border-color: #ea5455; } [dir] .vs--searchable.is-invalid .vs__search { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ea5455' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ea5455' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: calc(0.725em + 0.438rem) calc(0.725em + 0.438rem); } [dir=ltr] .vs--searchable.is-invalid .vs__search { background-position: right calc(0.3625em + 0.219rem) center; padding-right: calc(1.45em + 0.876rem); } [dir=rtl] .vs--searchable.is-invalid .vs__search { background-position: left calc(0.3625em + 0.219rem) center; padding-left: calc(1.45em + 0.876rem); } .fc .fc-toolbar { flex-wrap: wrap; flex-direction: row !important; } .fc .fc-toolbar .fc-prev-button, .fc .fc-toolbar .fc-next-button { display: inline-block; } [dir] .fc .fc-toolbar .fc-prev-button, [dir] .fc .fc-toolbar .fc-next-button { background-color: transparent; border-color: transparent; } .fc .fc-toolbar .fc-prev-button .fc-icon, .fc .fc-toolbar .fc-next-button .fc-icon { color: #6e6b7b; } [dir] .fc .fc-toolbar .fc-prev-button:hover, [dir] .fc .fc-toolbar .fc-prev-button:active, [dir] .fc .fc-toolbar .fc-prev-button:focus, [dir] .fc .fc-toolbar .fc-next-button:hover, [dir] .fc .fc-toolbar .fc-next-button:active, [dir] .fc .fc-toolbar .fc-next-button:focus { background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; } [dir=ltr] .fc .fc-toolbar .fc-prev-button { padding-left: 0 !important; } [dir=rtl] .fc .fc-toolbar .fc-prev-button { padding-right: 0 !important; } .fc .fc-toolbar .fc-toolbar-chunk:first-child { display: flex; align-items: center; flex-wrap: wrap; } [dir] .fc .fc-toolbar .fc-button { padding: 0.438rem 0.5rem; } [dir] .fc .fc-toolbar .fc-button:active, [dir] .fc .fc-toolbar .fc-button:focus { box-shadow: none; } .fc .fc-toolbar .fc-button-group .fc-button { text-transform: capitalize; } [dir] .fc .fc-toolbar .fc-button-group .fc-button:focus { box-shadow: none; } .fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button) { color: #F98417; } [dir] .fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button) { background-color: transparent; border-color: #F98417; } .fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button).fc-button-active, .fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover { color: #F98417; } [dir] .fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button).fc-button-active, [dir] .fc .fc-toolbar .fc-button-group .fc-button-primary:not(.fc-prev-button):not(.fc-next-button):hover { background-color: rgba(249, 132, 23, 0.2) !important; border-color: #F98417 !important; } [dir] .fc .fc-toolbar .fc-button-group .fc-button-primary.fc-sidebarToggle-button { border: 0; } .fc .fc-toolbar .fc-button-group .fc-button-primary.fc-sidebarToggle-button i, .fc .fc-toolbar .fc-button-group .fc-button-primary.fc-sidebarToggle-button svg { height: 21px; width: 21px; font-size: 21px; } .fc .fc-toolbar .fc-button-group .fc-sidebarToggle-button { color: #6e6b7b !important; } [dir] .fc .fc-toolbar .fc-button-group .fc-sidebarToggle-button { background-color: transparent !important; } [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-sidebarToggle-button { padding-left: 0; } [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-sidebarToggle-button { padding-right: 0; } [dir] .fc .fc-toolbar .fc-button-group .fc-sidebarToggle-button:not(.fc-prev-button):not(.fc-next-button):hover { background-color: transparent !important; } [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-sidebarToggle-button + div { margin-left: 0; } [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-sidebarToggle-button + div { margin-right: 0; } [dir] .fc .fc-toolbar .fc-button-group .fc-dayGridMonth-button, [dir] .fc .fc-toolbar .fc-button-group .fc-timeGridWeek-button, [dir] .fc .fc-toolbar .fc-button-group .fc-timeGridDay-button, [dir] .fc .fc-toolbar .fc-button-group .fc-listMonth-button { padding: 0.55rem 1.5rem; } [dir] .fc .fc-toolbar .fc-button-group .fc-dayGridMonth-button:last-child, [dir] .fc .fc-toolbar .fc-button-group .fc-dayGridMonth-button:first-child, [dir] .fc .fc-toolbar .fc-button-group .fc-timeGridWeek-button:last-child, [dir] .fc .fc-toolbar .fc-button-group .fc-timeGridWeek-button:first-child, [dir] .fc .fc-toolbar .fc-button-group .fc-timeGridDay-button:last-child, [dir] .fc .fc-toolbar .fc-button-group .fc-timeGridDay-button:first-child, [dir] .fc .fc-toolbar .fc-button-group .fc-listMonth-button:last-child, [dir] .fc .fc-toolbar .fc-button-group .fc-listMonth-button:first-child { border-radius: 0.358rem; } [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-dayGridMonth-button:first-child, [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-timeGridWeek-button:first-child, [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-timeGridDay-button:first-child, [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-listMonth-button:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-dayGridMonth-button:first-child, [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-timeGridWeek-button:first-child, [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-timeGridDay-button:first-child, [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-listMonth-button:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-dayGridMonth-button:last-child, [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-timeGridWeek-button:last-child, [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-timeGridDay-button:last-child, [dir=ltr] .fc .fc-toolbar .fc-button-group .fc-listMonth-button:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-dayGridMonth-button:last-child, [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-timeGridWeek-button:last-child, [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-timeGridDay-button:last-child, [dir=rtl] .fc .fc-toolbar .fc-button-group .fc-listMonth-button:last-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=ltr] .fc .fc-toolbar > * > :not(:first-child) { margin-left: 0rem; } [dir=rtl] .fc .fc-toolbar > * > :not(:first-child) { margin-right: 0rem; } [dir=ltr] .fc .fc-toolbar .fc-toolbar-title { margin-left: 0.25rem; } [dir=rtl] .fc .fc-toolbar .fc-toolbar-title { margin-right: 0.25rem; } .fc .fc-toolbar .fc--button:empty, .fc .fc-toolbar .fc-toolbar-chunk:empty { display: none; } [dir] .fc tbody td, [dir] .fc thead th { border-color: #ebe9f1; } [dir=ltr] .fc tbody td.fc-col-header-cell, [dir=ltr] .fc thead th.fc-col-header-cell { border-right: 0; border-left: 0; } [dir=rtl] .fc tbody td.fc-col-header-cell, [dir=rtl] .fc thead th.fc-col-header-cell { border-left: 0; border-right: 0; } .fc .fc-view-harness { min-height: 650px; } [dir] .fc .fc-scrollgrid-section-liquid > td { border-bottom: 0; } .fc .fc-daygrid-event-harness .fc-event { font-size: 0.8rem; font-weight: 600; } [dir] .fc .fc-daygrid-event-harness .fc-event { padding: 0.25rem 0.5rem; } [dir] .fc .fc-daygrid-event-harness + .fc-daygrid-event-harness { margin-top: 0.3rem; } [dir] .fc .fc-daygrid-day-bottom { margin-top: 0.3rem; } [dir] .fc .fc-daygrid-day { padding: 5px; } .fc .fc-daygrid-day .fc-daygrid-day-top { flex-direction: row; } .fc .fc-daygrid-day-number, .fc .fc-timegrid-slot-label-cushion, .fc .fc-list-event-time { color: #6e6b7b; } [dir] .fc .fc-day-today { background: #f8f8f8 !important; background-color: #f8f8f8 !important; } [dir] .fc .fc-timegrid .fc-scrollgrid-section .fc-col-header-cell, [dir] .fc .fc-timegrid .fc-scrollgrid-section .fc-timegrid-axis { border-color: #ebe9f1; } [dir=ltr] .fc .fc-timegrid .fc-scrollgrid-section .fc-col-header-cell, [dir=ltr] .fc .fc-timegrid .fc-scrollgrid-section .fc-timegrid-axis { border-left: 0; border-right: 0; } [dir=rtl] .fc .fc-timegrid .fc-scrollgrid-section .fc-col-header-cell, [dir=rtl] .fc .fc-timegrid .fc-scrollgrid-section .fc-timegrid-axis { border-right: 0; border-left: 0; } [dir] .fc .fc-timegrid .fc-scrollgrid-section .fc-timegrid-axis { border-color: #ebe9f1; } .fc .fc-timegrid .fc-timegrid-axis.fc-scrollgrid-shrink .fc-timegrid-axis-cushion { text-transform: capitalize; color: #b9b9c3; } .fc .fc-timegrid .fc-timegrid-slots .fc-timegrid-slot { height: 3rem; } [dir] .fc .fc-timegrid .fc-timegrid-slots .fc-timegrid-slot .fc-timegrid-slot-label-frame { text-align: center; } .fc .fc-timegrid .fc-timegrid-slots .fc-timegrid-slot .fc-timegrid-slot-label-frame .fc-timegrid-slot-label-cushion { text-transform: uppercase; } .fc .fc-timegrid .fc-timegrid-divider { display: none; } [dir] .fc .fc-list { border-color: #ebe9f1; } [dir] .fc .fc-list .fc-list-day-cushion { background: #f8f8f8; } [dir] .fc .fc-list .fc-list-event:hover td { background-color: #f8f8f8; } [dir] .fc .fc-list .fc-list-event td { border-color: #ebe9f1; } .app-calendar { position: relative; } [dir] .app-calendar { border-radius: 0.428rem; } .app-calendar .app-calendar-sidebar { position: absolute; width: 18rem; height: 100%; z-index: 5; flex-basis: 18rem; transition: all 0.2s, background 0s, border 0s; } [dir] .app-calendar .app-calendar-sidebar { background-color: #fff; } [dir=ltr] .app-calendar .app-calendar-sidebar { left: calc(-18rem - 1.2rem); border-right: 1px solid #ebe9f1; } [dir=rtl] .app-calendar .app-calendar-sidebar { right: calc(-18rem - 1.2rem); border-left: 1px solid #ebe9f1; } [dir=ltr] .app-calendar .app-calendar-sidebar.show { left: 0; } [dir=rtl] .app-calendar .app-calendar-sidebar.show { right: 0; } .app-calendar .app-calendar-sidebar .sidebar-content-title { font-size: 0.85rem; color: #b9b9c3; text-transform: uppercase; letter-spacing: 0.6px; } .app-calendar .app-calendar-sidebar .select-all ~ label, .app-calendar .app-calendar-sidebar .input-filter ~ label { color: #5e5873; font-weight: 500; letter-spacing: 0.4px; } .app-calendar .event-sidebar { position: absolute; top: 0; width: 400px; z-index: 15; transition: all 0.3s ease-in-out; } [dir=ltr] .app-calendar .event-sidebar { right: 0; transform: translateX(120%); } [dir=rtl] .app-calendar .event-sidebar { left: 0; transform: translateX(-120%); } .app-calendar .event-sidebar .card { height: calc(100vh - 12.96rem); height: calc(var(--vh, 1vh) * 100 - 12.96rem); } [dir=ltr] .app-calendar .event-sidebar .card { border-radius: 0 0.25rem 0.25rem 0; } [dir=rtl] .app-calendar .event-sidebar .card { border-radius: 0.25rem 0 0 0.25rem; } [dir] .app-calendar .event-sidebar .card .close-bar { cursor: pointer; } .app-calendar .event-sidebar .card .todo-item-action { width: 6rem; } .app-calendar .event-sidebar .card .todo-item-action .todo-item-info, .app-calendar .event-sidebar .card .todo-item-action .todo-item-favorite, .app-calendar .event-sidebar .card .todo-item-action .dropdown { line-height: 1.5; } [dir] .app-calendar .event-sidebar .card .todo-item-action .todo-item-info, [dir] .app-calendar .event-sidebar .card .todo-item-action .todo-item-favorite, [dir] .app-calendar .event-sidebar .card .todo-item-action .dropdown { cursor: pointer; } [dir] .app-calendar .event-sidebar .card .todo-item-action .dropdown .dropdown-menu .dropdown-item { padding: 0.14rem 1.428rem; } .app-calendar .event-sidebar .card .todo-item-action .dropdown-toggle::after { display: none; } [dir] .app-calendar .event-sidebar.show { transform: translateX(0); } .app-calendar .fc-toolbar h2 { font-size: 1.45rem; } [dir] .app-calendar .fc-header-toolbar { margin-bottom: 1.75rem !important; } [dir] .app-calendar .fc-view-harness { margin: 0 -1.6rem; } [dir] .app-calendar .fc-scrollgrid { border-color: #ebe9f1; } .app-calendar .fc-day-past .fc-daygrid-day-number, .app-calendar .fc-day-future .fc-daygrid-day-number { color: #b9b9c3; } [dir] .app-calendar .fc-popover { box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1); } [dir] .app-calendar .fc-popover .fc-popover-header { background: transparent; padding: 0.5rem; } .app-calendar .fc-popover .fc-popover-header .fc-popover-title, .app-calendar .fc-popover .fc-popover-header .fc-popover-close { color: #5e5873; } [dir] .app-calendar .fc-popover .fc-popover-body *:not(:last-of-type) { margin-bottom: 0.3rem; } .app-calendar .fc .fc-event .fc-event-main { color: inherit; } [dir] .app-calendar .fc-list-event { background: transparent !important; } @media (min-width: 992px) { .app-calendar .app-calendar-sidebar { position: static; height: auto; } [dir] .app-calendar .app-calendar-sidebar { box-shadow: none !important; } [dir] .app-calendar .app-calendar-sidebar .flatpickr-days { background-color: transparent; } } .event-sidebar .select2-selection__choice__remove:before { top: 40% !important; } [dir] .horizontal-layout .app-calendar { margin-bottom: 1rem; } @media (max-width: 992px) { .fc .fc-sidebarToggle-button { font-size: 0; } } @media (min-width: 992px) { .fc .fc-sidebarToggle-button { display: none; } } @media (max-width: 700px) { [dir] .app-calendar .fc .fc-header-toolbar .fc-toolbar-chunk:last-of-type { margin-top: 1rem; } } .vs--searchable .vs__dropdown-toggle { min-height: 37.99px; } .vs--searchable .vs__search::placeholder { color: #b4b7bd !important; } [dir] .vs--searchable.is-invalid .vs__dropdown-toggle { border-color: #ea5455; } [dir] .vs--searchable.is-invalid .vs__search { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ea5455' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ea5455' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: calc(0.725em + 0.438rem) calc(0.725em + 0.438rem); } [dir=ltr] .vs--searchable.is-invalid .vs__search { background-position: right calc(0.3625em + 0.219rem) center; padding-right: calc(1.45em + 0.876rem); } [dir=rtl] .vs--searchable.is-invalid .vs__search { background-position: left calc(0.3625em + 0.219rem) center; padding-left: calc(1.45em + 0.876rem); } .fc-sidebarToggle-button { width: 25px; height: 25px; display: block; } [dir] .fc-sidebarToggle-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' stroke='%236e6b7b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cline x1='3' y1='12' x2='21' y2='12'%3E%3C/line%3E%3Cline x1='3' y1='6' x2='21' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='18' x2='21' y2='18'%3E%3C/line%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; } [dir=ltr] .fc-sidebarToggle-button { margin-right: 0.7rem !important; } [dir=rtl] .fc-sidebarToggle-button { margin-left: 0.7rem !important; }