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(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;
padding: 4px;
}
.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: 0.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: 0.85em;
font-size: var(--fc-small-font-size, 0.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;
}
.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;
}
.fc .fc-timegrid-slot:empty:before {
content: " "; /* 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;
}
.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: 0.85em;
font-size: var(--fc-small-font-size, 0.85em);
border-radius: 3px;
}
.fc-timegrid-event { /* events need to be root */
margin-bottom: 1px;
}
.fc-timegrid-event .fc-event-main {
padding: 1px 1px 0;
}
.fc-timegrid-event .fc-event-time {
white-space: nowrap;
font-size: 0.85em;
font-size: var(--fc-small-font-size, 0.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: " - "; /* dash surrounded by non-breaking spaces */
}
.fc-timegrid-event-short .fc-event-title {
font-size: 0.85em;
font-size: var(--fc-small-font-size, 0.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 {
/* only exists for aria reasons, hide for non-screen-readers */
}
.fc .fc-list-table thead {
position: absolute;
left: -10000px;
}
.fc {
/* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */
}
.fc .fc-list-table tbody > tr:first-child th {
border-top: 0;
}
.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;
}
.fullcalendar {
flex: 0 0 100%;
max-width: 100%;
}
.fc-header-btn {
display: block;
width: 100%;
line-height: 26px;
}
.fc-t-events {
outline: 0;
}
.fc-widget-header {
border-width: 0 !important;
}
.fc-row .fc-content-skeleton td,
.fc-row .fc-helper-skeleton td {
border-color: inherit;
}
.fullcalendar th.fc-widget-header {
border-width: 0;
font-size: 0.8125rem;
font-weight: 400;
}
.fullcalendar .fc td {
font-weight: 700;
}
.fullcalendar .fc td,
.fullcalendar .fc th {
border-right: 0;
border-left: 0;
}
.fullcalendar .fc-body {
border: 0.0625rem solid var(--tblr-border-color);
}
.fullcalendar .fc-button {
color: var(--tblr-primary) !important;
border-color: transparent !important;
background-color: transparent !important;
}
.fullcalendar .fc button {
padding: 0 1.25rem;
font-size: inherit;
}
.fullcalendar .fc-next-button,
.fullcalendar .fc-prev-button {
padding: 0 5px;
}
.fullcalendar .fc-toolbar {
background-color: var(--tblr-bg-surface);
margin-bottom: 0;
border-bottom: 1px solid var(--tblr-border-color);
}
.fullcalendar.fixed .fc-toolbar {
position: fixed;
left: 0;
right: 0;
top: 6.6rem;
z-index: 39;
}
@media (min-width: 992px) {
.fullcalendar.fixed .fc-toolbar {
left: 15rem;
}
}
.fullcalendar.fixed {
padding-top: 60px;
}
.fullcalendar .fc-button {
line-height: 1;
padding: 0 0.75rem !important;
height: 3rem;
text-transform: capitalize;
}
.fullcalendar .fc-toolbar h2, .fullcalendar .fc-toolbar .h2 {
font-size: 1rem;
line-height: 3rem;
padding: 0 0.75rem;
height: 3rem;
width: 150px;
border-left: none !important;
}
.fc-day-sun,
.fc-day-sat {
background: var(--tblr-bg-surface-tertiary);
}
.fc-day-top:hover .fc-day-number {
background-color: var(--tblr-bg-surface-tertiary);
border-radius: 50%;
transition: background-color 0.2s;
cursor: pointer;
}
.fc-view-container {
padding: 0.75rem;
}
.fc .fc-toolbar > * > * {
margin-left: 0;
}
.fc-ico .icon {
font-size: 12px;
}
.fc-content .icon {
font-size: 14px;
line-height: 0.8rem;
}
.fc-icon-add:after {
content: "\e905" !important;
}
.fc-button-group {
padding-left: 0.5rem;
}
.fc-toolbar-chunk {
display: flex;
justify-content: center;
align-items: center;
}
.dropdown-item .icon, .selectize-dropdown .option .icon {
--tblr-icon-size: 1.25rem;
vertical-align: middle;
}
svg.icon + span {
vertical-align: middle;
margin-left: 0.5rem;
}
.icon-thin {
stroke-width: 1;
}
.icon-xl {
--tblr-icon-size: 5.5rem;
}
.icon-sm {
stroke-width: 1.65;
}
.icon-info {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-info-circle'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0' /%3E%3Cpath d='M12 9h.01' /%3E%3Cpath d='M11 12h1v4h1' /%3E%3C/svg%3E");
}
ul.no-bullet {
list-style: none;
padding-left: 1.5rem;
}
ul.list-unstyled,
ul.list-unstyled li {
list-style: none !important;
}
.text-underline {
text-decoration: underline;
}
.modal-content > .simple_form {
position: relative;
display: flex;
flex-direction: column;
}
.modal-dialog-scrollable .modal-content > .simple_form {
max-height: 100%;
overflow: hidden;
}
.modal-footer {
background-color: var(--tblr-modal-bg);
border: none;
}
.modal.confirm {
z-index: 1999;
}
.modal.confirm + .modal-backdrop {
z-index: 1998;
}
.modal-dialog form .alert {
margin-left: calc(var(--tblr-modal-padding) * -1);
margin-right: calc(var(--tblr-modal-padding) * -1);
margin-top: calc(var(--tblr-modal-padding) * -1);
box-shadow: none;
border-radius: 0;
}
.modal-dialog form .alert + .alert {
margin-top: calc(var(--tblr-alert-margin-bottom) * -1);
}
.modal-body > .dt-container {
margin: -0.5rem;
}
body.modal-open {
padding-right: 0 !important;
}
@media (min-width: 768px) {
.modal-xlg {
max-width: 80%;
}
}
.modal-backdrop + .modal-backdrop {
z-index: 1340 !important;
}
@media (max-width: 767.98px) {
.modal-slide-up .modal-dialog {
margin: 0;
width: 100%;
max-width: 100%;
height: 100%;
align-items: end;
display: flex;
justify-content: end;
}
.modal-slide-up .modal-xlg {
max-width: 100% !important;
}
.modal:not(.modal-fullscreen) .modal-dialog {
margin: 0;
width: 100%;
max-width: 100%;
height: 100%;
align-items: flex-end;
display: flex;
justify-content: flex-end;
}
.modal:not(.modal-fullscreen) .modal-content {
width: 100%;
max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
border-radius: 1rem 1rem 0 0;
box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15);
}
}
#modal2 {
z-index: 1345 !important;
}
#modal3 {
z-index: 1445 !important;
}
#sessionsModal .modal-body {
background-color: var(--tblr-modal-bg);
}
@media (max-width: 991.98px) {
.modal-footer {
align-items: initial;
flex-direction: initial;
padding: 0.5rem 0.5rem;
}
.modal-footer .btn,
.modal-footer .card-link {
border-top: initial;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 767.98px) {
.modal-header {
flex-wrap: wrap;
align-items: center;
padding-top: 0;
padding-right: var(--tblr-modal-header-padding-x, 1.5rem);
padding-bottom: 0.75rem;
position: sticky;
top: 0;
z-index: 10;
}
.modal-header .modal-drag-handle {
order: -1;
flex: 0 0 100%;
padding: 0.4rem 0;
}
.modal-footer {
position: sticky;
bottom: 0;
z-index: 10;
}
}
.modal-drag-handle {
width: 100%;
padding: 0.5rem 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.modal-drag-handle-bar {
width: 2.5rem;
height: 0.25rem;
background-color: #dee2e6;
border-radius: 0.125rem;
transition: background-color 0.2s;
}
.modal-drag-handle:hover .modal-drag-handle-bar {
background-color: #adb5bd;
}
/* Slide-up animation for modal */
.modal-slide-up {
opacity: 0;
transition: opacity 0.3s ease-out;
}
.modal-slide-up.show {
opacity: 1;
}
.modal-slide-up .modal-dialog {
transform: translateY(50px);
transition: transform 0.3s ease-out;
}
.modal-slide-up.show .modal-dialog {
transform: translateY(0);
}
.modal-slide-up .modal-content {
border-radius: 0.5rem;
max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 1rem);
overflow-y: auto;
border: none;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
@media (prefers-reduced-motion: no-preference) {
.modal {
opacity: 0;
transition: opacity 0.3s ease-out;
}
.modal.show {
opacity: 1;
}
.modal .modal-dialog {
transform: translateY(50px);
transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
transform: translateY(0);
}
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
.modal .modal-dialog {
transform: translateY(100%);
}
.modal.show .modal-dialog {
transform: translateY(0);
}
.modal-footer {
padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
}
}
.modal-footer .btn-outline-danger,
.modal-footer .btn-outline-success,
.modal-footer .btn-outline-warning {
border: 1px solid currentColor !important;
}
.modal-body {
background-color: var(--tblr-modal-bg);
}
.modal table.dataTable {
background-color: var(--tblr-modal-bg);
}
.modal table.dataTable tbody tr {
background-color: var(--tblr-modal-bg);
}
.navbar-nav, .sub-navbar, .nav {
--tblr-nav-link-font-size: 14px;
--tblr-nav-link-font-weight: 600 !important;
}
header.navbar .navbar-brand.d-md-none {
margin-right: auto !important;
padding: 0;
}
header.navbar .navbar-brand.d-md-none .navbar-brand-image {
max-height: 2.5rem;
width: auto;
}
header.navbar .nav-link .icon {
color: var(--tblr-icon-color);
}
header.navbar .nav-link:hover, header.navbar .nav-link:focus {
background-color: var(--tblr-nav-link-hover-bg);
}
.navbar .nav-tabs .nav-link {
min-height: 3rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
background: transparent;
justify-content: center;
display: flex;
}
.nav-link .icon {
width: 1.35rem;
height: 1.35rem;
margin-right: 0;
}
.sub-navbar {
top: 3.5rem;
border-bottom: 1px solid var(--tblr-border-color);
height: 3rem;
max-height: 3rem;
min-height: 3rem;
left: 0;
right: 0;
position: fixed;
z-index: 38;
padding: 0;
background: var(--tblr-bg-surface-tertiary);
justify-content: space-between;
display: flex;
align-items: center;
box-shadow: none;
}
.sub-navbar .breadcrumb {
margin-right: 1rem;
min-height: 3rem;
margin-bottom: 0;
align-items: center;
}
.sub-navbar .breadcrumb a {
font-size: 0.7125rem;
}
.sub-navbar .nav-tabs {
box-shadow: none;
margin-top: initial;
margin-bottom: initial;
height: inherit;
margin-top: 0;
width: auto;
}
@media (min-width: 768px) {
.sub-navbar .nav-tabs {
margin-left: 1rem;
}
}
.sub-navbar .nav-link {
padding: 0.3rem 0.75rem;
border-radius: 2px;
color: var(--tblr-nav-link-color);
text-transform: initial;
box-shadow: none !important;
}
.sub-navbar .nav-link.active {
color: var(--tblr-primary);
box-shadow: none !important;
}
.sub-navbar .subtitle {
display: inline-block;
height: 3.8rem;
padding: 1.1rem 1rem;
line-height: initial;
margin-bottom: 0;
font-weight: 400;
min-width: 250px;
}
.brand-logo, .navbar-brand-image {
height: 2.7rem;
vertical-align: middle;
max-width: 230px;
}
.navbar-bottom {
position: fixed !important;
bottom: 0 !important;
left: 0;
right: 0;
z-index: 1030;
background: var(--tblr-bg-surface);
border-top: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
padding: 0.25rem 0 0.75rem;
padding-bottom: calc(0.4rem + env(safe-area-inset-bottom));
}
.navbar-bottom .nav-item {
flex: 1 1 auto;
text-align: center;
}
.navbar-bottom .nav-link {
height: auto;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
color: #666;
padding: 0.15rem 0.5rem;
transition: color 0.2s ease;
}
.navbar-bottom .nav-link:hover, .navbar-bottom .nav-link:focus {
color: var(--tblr-primary);
}
.navbar-bottom .nav-link.active {
color: var(--tblr-primary);
}
.navbar-bottom .nav-link.active .nav-icon {
background: rgba(var(--tblr-primary), 0.1);
border-radius: 1rem;
}
.navbar-bottom .nav-link.active .nav-text {
font-weight: 600;
}
.navbar-bottom .nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin: 0 auto;
transition: background 0.2s ease;
}
.navbar-bottom .nav-icon .icon {
--tblr-icon-size: 1.25rem;
}
.navbar-bottom .nav-text {
font-size: 0.6rem;
font-weight: 500;
margin-top: 0.1rem;
text-transform: capitalize;
}
.navbar-bottom .nav-item-center {
position: relative;
flex: 0 0 auto;
}
.navbar-bottom .nav-link-center {
margin-top: -1.25rem;
padding-top: 0;
}
.navbar-bottom .nav-link-center:hover .nav-icon-center, .navbar-bottom .nav-link-center:focus .nav-icon-center {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(var(--tblr-primary), 0.4);
}
.navbar-bottom .nav-link-center.active .nav-icon-center {
background: linear-gradient(135deg, color-mix(in srgb, var(--tblr-primary) 95%, #fff), color-mix(in srgb, var(--tblr-primary) 85%, #000));
box-shadow: 0 4px 15px rgba(var(--tblr-primary), 0.5);
}
.navbar-bottom .nav-icon-center {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
background: linear-gradient(135deg, var(--tblr-primary), color-mix(in srgb, var(--tblr-primary) 90%, #000));
border-radius: 50%;
box-shadow: 0 3px 10px rgba(var(--tblr-primary), 0.3);
margin: 0 0.5rem;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.navbar-bottom .nav-icon-center .icon {
--tblr-icon-size: 1.5rem;
color: #fff;
}
.navbar.navbar-tabs a.active.nav-link:before,
.navbar.navbar-tabs a.active.nav-link:after,
.profile-nav a.active.nav-link:before,
.profile-nav a.active.nav-link:after {
border: 11px solid transparent;
border-style: outset outset solid;
border-bottom-color: var(--tblr-border-color);
bottom: 0;
content: "";
height: 0;
left: 50%;
margin-left: -8px;
overflow: hidden;
position: absolute;
width: 0;
background: transparent;
}
.navbar.navbar-tabs a.active.nav-link:after,
.profile-nav a.active.nav-link:after {
background: 0 0;
border-bottom-color: var(--tblr-bg-surface);
bottom: -1px;
}
@media (display-mode: standalone) {
header.navbar.fixed-top {
padding-top: env(safe-area-inset-top, 0px);
}
}
@media (display-mode: standalone) {
.sub-navbar {
top: calc(3.5rem + env(safe-area-inset-top, 0px) - 0.22rem);
}
}
.third-navbar .nav.nav-tabs, .profile-nav {
height: 3rem;
}
.third-navbar .nav.nav-tabs .nav-link, .profile-nav .nav-link {
padding: 1.1rem 0.8rem;
}
.third-navbar .nav.nav-tabs .nav-link.active, .profile-nav .nav-link.active {
background: transparent;
}
.third-navbar .nav.nav-tabs .nav-link:focus, .profile-nav .nav-link:focus {
box-shadow: none !important;
}
.third-navbar .nav.nav-tabs .nav-link:not(.active), .third-navbar .nav.nav-tabs .profile-nav .nav-link.active, .profile-nav .nav-link:not(.active), .profile-nav .profile-nav .nav-link.active {
box-shadow: none !important;
}
.profile-nav .nav-link.active {
box-shadow: none !important;
}
.nav-tabs .nav-link, .nav-tabs .nav-link:focus {
color: var(--tblr-nav-link-color);
}
.nav.nav-pills .dropdown-toggle:after {
content: url("data:image/svg+xml;utf8,");
transform: initial;
border-bottom: 0;
border-left: 0;
height: initial;
color: var(--tblr-nav-link-color);
}
.navdrawer-profile {
padding: 1rem;
}
.navbar-vertical {
overflow-y: auto !important;
overflow-x: hidden !important;
background: var(--tblr-bg-surface-tertiary);
box-shadow: inset -1px 0px 0px 0px var(--tblr-border-color) !important;
}
.navbar-vertical .nav-item.active:after {
box-shadow: 0 0 40px 10px var(--tblr-navbar-active-border-color);
border: 0 var(--tblr-border-style) var(--tblr-navbar-active-border-color);
height: 50%;
top: 25% !important;
}
.navbar-vertical .nav-item:hover .nav-link:after {
height: 75%;
top: 15% !important;
}
.navbar-vertical .nav-link {
display: inline-flex;
width: 100%;
align-items: center;
margin: 0.15rem 0 0.15rem 0;
padding: 0 0.5rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
transition: all 0.2s ease;
position: relative;
}
.navbar-vertical .nav-link:active {
transform: scale(0.98);
}
.navbar-vertical .nav-link.active {
color: var(--tblr-primary) !important;
background-color: rgba(var(--tblr-primary), 0.1) !important;
font-weight: 600;
}
.navbar-vertical a.nav-link:not(.active):hover {
background-color: rgba(var(--tblr-primary), 0.05);
}
.navbar-vertical a.nav-link:not(.active):hover:after,
.navbar-vertical a.nav-link:not(.active):focus:after {
transform: scale3d(1, 1, 1);
}
.navbar-vertical a.nav-link:not(.active):after {
position: absolute;
height: 50px;
width: 4px;
content: "";
left: 0;
background: var(--tblr-primary);
transform: scale3d(0, 0, 1);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.navbar-vertical a.nav-link.active:after {
border-right: 12px solid var(--tblr-bg-surface);
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: -1px;
opacity: 1;
transition: opacity 150ms ease-in;
}
.navbar-vertical a.nav-link.active:before {
border-right: 13px solid var(--tblr-border-color);
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
content: "";
display: inline-block;
position: absolute;
right: 0;
opacity: 1;
transition: opacity 150ms ease-in;
}
.navbar-vertical a.nav-link.active:hover {
background-color: transparent;
}
.navbar-vertical .navbar-brand {
height: 3.5rem;
padding: 0 0 0 0.75rem !important;
justify-content: start !important;
}
.navdrawer-subheader {
display: flex;
height: 3rem;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
}
@media (max-width: 767.98px) {
.navbar-drawer.navbar-brand {
display: none;
}
}
.mini-sidebar {
display: none;
}
@media (min-width: 992px) {
.mini-sidebar {
display: block !important;
float: right;
}
.navdrawer-mini .mini-sidebar {
float: left;
}
}
@media (min-width: 992px) {
.navdrawer-mini {
width: 60px !important;
transition: width 0.2s ease;
}
.navdrawer-mini .navbar-brand {
padding: 0 !important;
justify-content: center !important;
}
.navdrawer-mini .navbar-brand-image {
max-height: 2rem !important;
}
.navdrawer-mini span.menu-text,
.navdrawer-mini .navdrawer-subheader span.menu-text {
display: none;
}
.navdrawer-mini .nav-link-title,
.navdrawer-mini .navbar-nav .dropdown-toggle::after {
display: none;
}
.navdrawer-mini .nav-link {
justify-content: center;
padding: 0.5rem;
}
.navdrawer-mini .nav-link .nav-link-icon {
margin: 0;
}
.navdrawer-mini a.nav-link.active:after,
.navdrawer-mini a.nav-link.active:before {
display: none;
}
.navdrawer-mini .dropdown-menu {
padding-left: 0 !important;
}
.navdrawer-mini .dropdown-menu .nav-link {
padding-left: 0;
}
}
.navdrawer-mini .profile-info {
display: none;
}
.navdrawer-mini .navdrawer-profile {
padding-left: 0 !important;
padding-right: 0 !important;
}
.navdrawer-mini .avatar {
--tblr-avatar-size: 2.2rem !important;
margin-right: 0 !important;
}
@media (min-width: 992px) {
body.mini .navbar-expand-lg.navbar-vertical ~ .navbar,
body.mini .navbar-expand-lg.navbar-vertical ~ .page-wrapper,
body.mini .navbar-vertical.navbar-expand-lg ~ .page {
margin-left: 60px;
padding-left: 0;
}
body.mini .sub-navbar {
margin-left: 60px;
width: calc(100% - 60px);
}
body.mini footer.footer {
margin-left: 60px;
}
body.mini .fullcalendar.fixed .fc-toolbar {
left: 60px;
}
}
#navDrawerModal .nav-link {
transition: all 0.2s ease;
position: relative;
}
#navDrawerModal .nav-link:active {
transform: scale(0.98);
}
#navDrawerModal a.nav-link:not(.active):hover {
background-color: rgba(var(--tblr-primary), 0.05);
}
#navDrawerModal a.nav-link:not(.active):active {
background-color: rgba(var(--tblr-primary), 0.1);
}
.notifications {
padding: 10px;
margin: 20px;
border: 1px solid #eee;
border-radius: 3px;
}
.notifications .heading {
border-bottom: 1px solid #eee;
padding: 5px;
margin-bottom: 10px;
}
.notifications .notification-group {
padding: 10px;
margin-bottom: 20px;
}
.notifications .notification-group .group-title {
padding: 5px 0;
color: #999;
border-bottom: 1px solid #eee;
}
.notifications .notification {
margin: 0;
padding: 10px 0px;
color: #999;
}
.notifications .notification a {
color: #555;
}
.notifications .notification.unread {
color: #444;
}
.notifications .notification.unread .media-heading {
font-weight: bold;
font-size: 14px;
}
.notifications .notification.unread a {
color: #222;
text-decoration: underline;
}
.notifications .notification .media-content p:last-child {
margin-bottom: 0;
}
.notifications .notification .user-avatar img {
width: 32px;
height: 32px;
border-radius: 120px;
}
.notifications .notification .media-right {
min-width: 100px;
color: #AAA;
font-size: 13px;
}
/* Notification Item Styles */
.notification-item {
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 0.5rem;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
transition: all 0.2s ease;
text-decoration: none;
display: block;
}
.notification-item:hover {
border-color: var(--tblr-primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
text-decoration: none;
}
.notification-item.unread {
background: linear-gradient(135deg, rgba(149, 149, 149, 0.05) 0%, rgb(255, 255, 255) 100%);
border-left: 4px solid var(--tblr-primary);
}
.notification-item .notification-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.notification-item .notification-icon svg {
width: 20px;
height: 20px;
}
.notification-item .notification-title {
font-weight: 600;
color: #343a40;
margin-bottom: 0.25rem;
font-size: 0.95rem;
line-height: 1.4;
}
.notification-item .notification-body {
color: #6c757d;
font-size: 0.875rem;
line-height: 1.5;
margin: 0;
}
.notification-item .notification-meta {
display: flex;
align-items: center;
gap: 0.5rem;
}
.notification-item .notification-time {
font-size: 0.75rem;
color: #9e9e9e;
}
.notification-item .read-indicator {
display: flex;
align-items: center;
gap: 0.25rem;
}
.notification-item .read-indicator svg {
width: 16px;
height: 16px;
}
.notification-item .read-indicator.read .mi {
color: #28a745;
}
.notification-item .read-indicator.unread .mi {
color: #bdbdbd;
}
/* Responsive */
@media (max-width: 576px) {
.notification-item {
padding: 0.875rem 1rem;
}
.notification-item .notification-icon {
width: 36px;
height: 36px;
}
.notification-item .notification-icon svg {
width: 18px;
height: 18px;
}
}
.notification-detail-page .bg-primary-light {
background-color: rgba(96, 125, 139, 0.1) !important;
}
.notification-detail-page .notification-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.notification-detail-page .card {
border-radius: 12px;
overflow: hidden;
}
.notification-detail-page .card-footer {
padding: 1.25rem;
}
.paper {
margin-left: -20px;
margin-right: -20px;
}
.paper-body {
padding-left: 20px;
padding-right: 20px;
}
.paper-body form .alert {
margin-left: -16px;
margin-right: -16px;
margin-top: -8px;
}
.paper-body.a4 {
padding-top: 20px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.paper-header {
border-bottom: 1px rgba(0, 0, 0, 0.125) solid;
height: 3rem;
display: flex;
align-items: center;
padding-right: 1rem !important;
padding-left: 1.5rem !important;
padding-top: 0rem;
}
.paper-header.paper-cover {
height: auto;
}
.paper-header h2, .paper-header .h2 {
padding-left: 1rem;
padding-right: 1rem;
font-size: 24px;
font-weight: 400;
}
.paper-header .btn-back {
margin: 0.5rem;
float: left;
vertical-align: middle;
}
.paper-header.sticky-top {
top: 6.5rem;
background: #fff;
}
.paper-header .nav-tabs {
box-shadow: none;
}
.paper-title {
display: inline-flex;
vertical-align: middle;
float: left;
font-weight: 500;
font-size: 16px;
margin: 0;
margin-left: 16px;
}
@page {
margin: 0;
}
.sheet {
margin: 0;
overflow: hidden;
position: relative;
box-sizing: border-box;
page-break-after: always;
height: 100%;
min-height: 100%;
}
.page-break {
display: block;
clear: both;
page-break-after: always;
}
div.alwaysbreak {
page-break-before: always;
}
div.nobreak:before {
clear: both;
}
div.nobreak {
page-break-inside: avoid;
}
@media print {
#print_area {
color: #5e5e5e;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 13px;
line-height: 1.428572;
padding: 3rem;
}
.footnote {
bottom: 0;
margin-top: auto;
}
}
@media print {
a[href]:after {
content: none !important;
}
a {
text-decoration: none !important;
}
a:link {
text-decoration: none !important;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
.hidden-print {
display: none !important;
}
.hidden-md {
display: none !important;
}
.visible-md {
display: block !important;
}
dt, dd {
line-height: 1.2;
}
dd {
font-weight: 500;
margin-left: 0;
}
.dl-horizontal dt {
clear: left;
float: left;
overflow: hidden;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
width: 120px;
}
.dl-horizontal dd {
margin-left: 140px;
}
.dl-horizontal dt {
text-align: left;
}
fieldset.bordered {
border: 1px solid rgba(0, 0, 0, 0.125);
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
box-shadow: 0px 0px 0px 0px #000;
}
fieldset.bordered legend {
font-size: 1.2em;
font-weight: 400;
text-align: left;
width: auto;
padding: 0 10px;
border-bottom: none;
}
}
@media print {
table {
max-width: 100%;
}
th {
text-align: left;
text-transform: uppercase;
}
.body-shrink-65 {
zoom: 65%; /* adjust if content still overflows */
}
.body-shrink-70 {
zoom: 70%; /* adjust if content still overflows */
}
.group-container {
page-break-inside: avoid;
}
.table, .markdown > table {
width: 100%;
margin-bottom: 20px;
}
.table > thead > tr > th, .markdown > table > thead > tr > th, .table > tbody > tr > th, .markdown > table > tbody > tr > th, .table > tfoot > tr > th, .markdown > table > tfoot > tr > th,
.table > thead > tr > td,
.markdown > table > thead > tr > td, .table > tbody > tr > td, .markdown > table > tbody > tr > td, .table > tfoot > tr > td, .markdown > table > tfoot > tr > td {
border-top: 1px solid #d1d5da !important;
line-height: 1.42857;
padding: 5px;
vertical-align: top;
font-size: 13px;
}
.table > thead > tr > th, .markdown > table > thead > tr > th {
vertical-align: bottom;
border-bottom: 1px solid #d1d5da !important;
}
.table > caption + thead > tr:first-child > th, .markdown > table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.markdown > table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.markdown > table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.markdown > table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.markdown > table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td,
.markdown > table > thead:first-child > tr:first-child > td {
border-top: 0 none;
}
.table > tbody + tbody, .markdown > table > tbody + tbody {
border-top: 1px solid #d1d5da !important;
}
.table-sm > thead > tr > th, .markdown > table > thead > tr > th, .table-sm > tbody > tr > th, .markdown > table > tbody > tr > th,
.table-sm > tfoot > tr > th,
.markdown > table > tfoot > tr > th, .table-sm > thead > tr > td, .markdown > table > thead > tr > td,
.table-sm > tbody > tr > td,
.markdown > table > tbody > tr > td, .table-sm > tfoot > tr > td, .markdown > table > tfoot > tr > td {
font-size: 11px;
padding: 3.5px;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.table-bordered, .markdown > table {
border: 0.01em solid #d1d5da !important;
}
.table-bordered > thead > tr > th, .markdown > table > thead > tr > th, .table-bordered > tbody > tr > th, .markdown > table > tbody > tr > th, .table-bordered > tfoot > tr > th, .markdown > table > tfoot > tr > th,
.table-bordered > thead > tr > td,
.markdown > table > thead > tr > td, .table-bordered > tbody > tr > td, .markdown > table > tbody > tr > td, .table-bordered > tfoot > tr > td, .markdown > table > tfoot > tr > td {
border: 0.01em solid #d1d5da !important;
}
.table-bordered > tbody > tr > td, .markdown > table > tbody > tr > td {
border-bottom-width: 0;
border-left-width: 0;
}
td.table-active, th.table-active,
tr.table-active > td, tr.table-active > th {
background-color: #f5f5f5 !important;
}
td.bg-success, th.bg-success,
tr.bg-success > td, tr.bg-success > th {
background-color: #22b24c !important;
}
td.bg-info, th.bg-info,
tr.bg-info > td, tr.bg-info > th {
background-color: #3498db !important;
}
td.bg-warning, th.bg-warning,
tr.bg-warning > td, tr.bg-warning > th {
background-color: #f5e625 !important;
}
td.bg-danger, th.bg-danger,
tr.bg-danger > td, tr.bg-danger > th {
background-color: #df382c !important;
}
.table tbody tr.bg-light td, .markdown > table tbody tr.bg-light td,
.table tbody tr.bg-light th,
.markdown > table tbody tr.bg-light th {
background-color: #F0F0F0 !important;
color: #000;
}
.text-center, .text-center th, .text-center td {
text-align: center;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
}
@media print {
.row, .form-row {
display: block;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
}
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%;
}
.col-10 {
width: 83.33333333%;
}
.col-9 {
width: 75%;
}
.col-8 {
width: 66.66666667%;
}
.col-7 {
width: 58.33333333%;
}
.col-6 {
width: 50%;
}
.col-5 {
width: 41.66666667%;
}
.col-4 {
width: 33.33333333%;
}
.col-3 {
width: 25%;
}
.col-2 {
width: 16.66666667%;
}
.col-1 {
width: 8.33333333%;
}
.col-offset-12 {
margin-left: 100%;
}
.col-offset-11 {
margin-left: 91.66666667%;
}
.col-offset-10 {
margin-left: 83.33333333%;
}
.col-offset-9 {
margin-left: 75%;
}
.col-offset-8 {
margin-left: 66.66666667%;
}
.col-offset-7 {
margin-left: 58.33333333%;
}
.col-offset-6 {
margin-left: 50%;
}
.col-offset-5 {
margin-left: 41.66666667%;
}
.col-offset-4 {
margin-left: 33.33333333%;
}
.col-offset-3 {
margin-left: 25%;
}
.col-offset-2 {
margin-left: 16.66666667%;
}
.col-offset-1 {
margin-left: 8.33333333%;
}
.col-offset-0 {
margin-left: 0%;
}
.reports-tags, .hide-print {
display: none;
}
#reminder, #reminder td, #reminder th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#print_letter {
top: 0;
margin-left: 30px;
margin-right: 30px;
}
#show-info {
display: block;
}
}
.d-flex {
display: -webkit-box;
}
.justify-content-between {
-webkit-box-pack: between;
}
.text-danger {
color: #df382c !important;
}
.text-warning {
color: #f5e625 !important;
}
.text-success {
color: #22b24c !important;
}
.text-info {
color: #3498db !important;
}
.modal-header .profile-main {
margin-left: 0px;
margin-right: 0px;
}
.profile-main {
flex: 0 0 100%;
margin-left: calc(var(--tblr-gutter-x) * -0.5);
margin-right: calc(var(--tblr-gutter-x) * -0.5);
color: var(--tblr-body-color);
}
.profile-main .profile-header {
border-radius: 0;
margin-bottom: 0;
border: none;
position: relative;
z-index: 1;
}
.profile-main .profile-menu {
position: relative;
height: 3rem;
display: block;
padding-bottom: 0;
padding-right: 15px;
padding-left: 15px;
width: auto;
background-color: var(--tblr-bg-surface-tertiary);
z-index: 0;
border-bottom: 1px var(--tblr-border-color) solid;
}
.profile-main .profile-cover {
min-height: 250px;
max-height: 350px;
overflow: hidden;
background: url(/covers/symphony.png);
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.profile-main .profile-info .profile-fullname {
font-size: 1.5rem;
font-weight: 600;
}
.profile-main .profile-info .profile-details {
font-size: 0.95rem;
}
.profile-main .profile-info .profile-position,
.profile-main .profile-info .profile-branch {
font-size: 0.9rem;
}
.profile-main .profile-info .profile-service {
font-size: 0.85rem;
font-style: italic;
}
.profile-main .profile-name {
font-size: 2em;
line-height: 1;
float: left;
margin-top: -125px !important;
margin-left: 15px;
}
.profile-main .profile-description {
font-size: 1.3em;
float: left;
margin-top: -95px !important;
margin-left: 15px;
margin-bottom: 5px;
}
.profile-main .profile-nav {
margin: 0;
box-shadow: none;
}
.profile-main .profile-nav li.nav-item {
float: left;
position: relative;
display: block;
}
.profile-main .profile-nav a.nav-link {
padding: 0.75rem;
text-transform: none;
}
.profile-main .profile-nav-right {
float: right !important;
margin-right: -15px;
}
@media (max-width: 575.98px) {
.profile-main .profile-nav li {
flex-basis: 0;
flex-grow: 1;
text-align: center;
}
.profile-main .profile-nav a {
width: 100%;
}
.profile-main .profile-nav li .menu-icon + span {
display: none;
}
.profile-main .profile-menu {
padding-right: 10px;
padding-left: 10px;
}
.profile-main .profile-menu .container {
padding-right: 0;
padding-left: 0;
}
.profile-main .profile-cover {
min-height: 150px;
max-height: 500px;
}
.profile-main .profile-name {
font-size: 1.5em;
margin-left: 160px;
}
.profile-main .profile-description {
font-size: 1.1em;
margin-left: 160px;
}
.profile-main .profile-info .profile-fullname {
font-size: 1.15rem;
}
.profile-main .profile-info .profile-position,
.profile-main .profile-info .profile-branch {
font-size: 0.8rem;
}
.profile-main .profile-info .profile-service {
font-size: 0.75rem;
}
}
.profile-main .profile-name {
font-size: 1.3em;
margin-top: -110px !important;
margin-left: 120px;
}
.profile-main .profile-description {
font-size: 1em;
margin-top: -90px !important;
margin-left: 120px;
}
.profile-main .profile-info .profile-fullname {
font-size: 1rem;
}
.profile-main .profile-info .profile-position,
.profile-main .profile-info .profile-branch {
font-size: 0.75rem;
}
.profile-main .profile-info .profile-service {
font-size: 0.7rem;
}
.spotlight .form-group {
margin-bottom: 0;
}
.spotlight input {
border: none;
outline: none;
background: rgba(255, 255, 255, 0.15);
width: 350px;
max-width: 400px;
height: 42px;
padding: 12px;
border-radius: var(--tblr-border-radius);
margin: 0.5rem auto;
color: var(--tblr-nav-link-color);
vertical-align: middle;
transition: 0.3s, width 0.01s;
border: 0 solid transparent !important;
box-shadow: none !important;
}
.spotlight input:focus, .spotlight input:active {
background: #fff;
color: #000;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.1);
}
.spotlight input::placeholder {
color: var(--tblr-icon-color);
}
.spotlight label {
margin-left: auto;
}
.spotlight-link {
line-height: 1.5;
}
.table, .markdown > table {
font-size: 0.813rem;
}
.table-active,
.table-active > td,
.table-active > th {
background-color: #f0f0f0;
}
.table-sm td, .markdown > table td,
.table-sm th,
.markdown > table th {
padding-right: 5px;
padding-left: 5px;
}
.table thead th, .markdown > table thead th {
color: var(--tblr-body-color);
}
td.action, td.slim {
padding-top: 6px;
padding-bottom: 6px;
}
.top-tabs {
height: auto !important;
flex-wrap: wrap !important;
display: flex !important;
width: 100%;
}
.responsivetabs-more {
margin-left: auto;
}
@media (max-width: 575.98px) {
.top-tabs {
width: 100% !important;
}
}
.tree,
.tree ul,
.tree li {
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
}
.tree ul {
margin-left: 1em;
position: relative;
}
.tree ul ul {
margin-left: 0.5em;
}
.tree ul:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid;
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #369;
font-weight: 700;
position: relative;
}
.tree ul li:before {
content: "";
display: block;
width: 10px;
height: 0;
border-top: 1px solid;
margin-top: -1px;
position: absolute;
top: 1em;
left: 0;
}
.tree ul li:last-child:before {
background: #fff;
height: auto;
top: 1em;
bottom: 0;
}
.indicator {
margin-right: 5px;
}
.tree li a {
text-decoration: none;
color: #369;
}
.tree li button, .tree li button:active, .tree li button:focus {
text-decoration: none;
color: #369;
border: none;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
outline: 0;
}
/**
* Swiper 12.1.3
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2026 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: March 24, 2026
*/
:root {
--swiper-theme-color: #007aff;
/*
--swiper-preloader-color: var(--swiper-theme-color);
--swiper-wrapper-transition-timing-function: initial;
*/
}
:host {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
.swiper {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
display: block;
}
.swiper-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
touch-action: pan-y;
}
.swiper-vertical {
touch-action: pan-x;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
display: block;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
height: auto;
}
.swiper-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
transform: translateZ(0);
backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
transform-style: preserve-3d;
}
.swiper-3d {
perspective: 1200px;
.swiper-slide,
.swiper-cube-shadow {
transform-style: preserve-3d;
}
}
/* CSS Mode */
.swiper-css-mode {
> .swiper-wrapper {
overflow: auto;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
&::-webkit-scrollbar {
display: none;
}
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
&.swiper-horizontal {
> .swiper-wrapper {
scroll-snap-type: x mandatory;
}
> .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-slides-offset-before);
scroll-margin-inline-start: var(--swiper-slides-offset-before);
}
> .swiper-wrapper > .swiper-slide:last-child {
margin-inline-end: var(--swiper-slides-offset-after);
}
}
&.swiper-vertical {
> .swiper-wrapper {
scroll-snap-type: y mandatory;
}
> .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-slides-offset-before);
scroll-margin-block-start: var(--swiper-slides-offset-before);
}
> .swiper-wrapper > .swiper-slide:last-child {
margin-block-end: var(--swiper-slides-offset-after);
}
}
&.swiper-free-mode {
> .swiper-wrapper {
scroll-snap-type: none;
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: none;
}
}
&.swiper-centered {
> .swiper-wrapper::before {
content: "";
flex-shrink: 0;
order: 9999;
}
> .swiper-wrapper > .swiper-slide {
scroll-snap-align: center center;
scroll-snap-stop: always;
}
}
&.swiper-centered.swiper-horizontal {
> .swiper-wrapper > .swiper-slide:first-child {
margin-inline-start: var(--swiper-centered-offset-before);
}
> .swiper-wrapper::before {
height: 100%;
min-height: 1px;
width: var(--swiper-centered-offset-after);
}
}
&.swiper-centered.swiper-vertical {
> .swiper-wrapper > .swiper-slide:first-child {
margin-block-start: var(--swiper-centered-offset-before);
}
> .swiper-wrapper::before {
width: 100%;
min-width: 1px;
height: var(--swiper-centered-offset-after);
}
}
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
.swiper-slide-shadow,
.swiper-slide-shadow-left,
.swiper-slide-shadow-right,
.swiper-slide-shadow-top,
.swiper-slide-shadow-bottom,
.swiper-slide-shadow,
.swiper-slide-shadow-left,
.swiper-slide-shadow-right,
.swiper-slide-shadow-top,
.swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-slide-shadow {
background: rgba(0, 0, 0, 0.15);
}
.swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
.swiper-lazy-preloader {
animation: swiper-preloader-spin 1s infinite linear;
}
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
-webkit-backface-visibility: hidden;
transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode {
.swiper-wrapper::after {
content: "";
position: absolute;
left: 0;
top: 0;
pointer-events: none;
}
}
.swiper-virtual.swiper-css-mode.swiper-horizontal {
.swiper-wrapper::after {
height: 1px;
width: var(--swiper-virtual-size);
}
}
.swiper-virtual.swiper-css-mode.swiper-vertical {
.swiper-wrapper::after {
width: 1px;
height: var(--swiper-virtual-size);
}
}
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-top-offset: 50%;
--swiper-navigation-sides-offset: 4px;
--swiper-navigation-color: var(--swiper-theme-color);
*/
}
.swiper-button-prev,
.swiper-button-next {
position: absolute;
width: var(--swiper-navigation-size);
height: var(--swiper-navigation-size);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
&.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
&.swiper-button-hidden {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.swiper-navigation-disabled & {
display: none !important;
}
::slotted(svg),
svg {
width: 100%;
height: 100%;
object-fit: contain;
transform-origin: center;
fill: currentColor;
pointer-events: none;
}
}
.swiper-button-lock {
display: none;
}
.swiper-button-prev,
.swiper-button-next {
top: var(--swiper-navigation-top-offset, 50%);
margin-top: calc(0px - var(--swiper-navigation-size) / 2);
}
.swiper-button-prev {
left: var(--swiper-navigation-sides-offset, 4px);
right: auto;
::slotted(.swiper-navigation-icon),
.swiper-navigation-icon {
transform: rotate(180deg);
}
}
.swiper-button-next {
right: var(--swiper-navigation-sides-offset, 4px);
left: auto;
}
.swiper-horizontal {
.swiper-button-prev,
.swiper-button-next,
~ .swiper-button-prev,
~ .swiper-button-next {
top: var(--swiper-navigation-top-offset, 50%);
margin-top: calc(0px - var(--swiper-navigation-size) / 2);
margin-left: 0;
}
.swiper-button-prev,
& ~ .swiper-button-prev,
&.swiper-rtl .swiper-button-next,
&.swiper-rtl ~ .swiper-button-next {
left: var(--swiper-navigation-sides-offset, 4px);
right: auto;
}
.swiper-button-next,
& ~ .swiper-button-next,
&.swiper-rtl .swiper-button-prev,
&.swiper-rtl ~ .swiper-button-prev {
right: var(--swiper-navigation-sides-offset, 4px);
left: auto;
}
.swiper-button-prev,
& ~ .swiper-button-prev,
&.swiper-rtl .swiper-button-next,
&.swiper-rtl ~ .swiper-button-next {
::slotted(.swiper-navigation-icon),
.swiper-navigation-icon {
transform: rotate(180deg);
}
}
&.swiper-rtl .swiper-button-prev,
&.swiper-rtl ~ .swiper-button-prev {
::slotted(.swiper-navigation-icon),
.swiper-navigation-icon {
transform: rotate(0deg);
}
}
}
.swiper-vertical {
.swiper-button-prev,
.swiper-button-next,
~ .swiper-button-prev,
~ .swiper-button-next {
left: var(--swiper-navigation-top-offset, 50%);
right: auto;
margin-left: calc(0px - var(--swiper-navigation-size) / 2);
margin-top: 0;
}
.swiper-button-prev,
~ .swiper-button-prev {
top: var(--swiper-navigation-sides-offset, 4px);
bottom: auto;
::slotted(.swiper-navigation-icon),
.swiper-navigation-icon {
transform: rotate(-90deg);
}
}
.swiper-button-next,
~ .swiper-button-next {
bottom: var(--swiper-navigation-sides-offset, 4px);
top: auto;
::slotted(.swiper-navigation-icon),
.swiper-navigation-icon {
transform: rotate(90deg);
}
}
}
:root {
/*
--swiper-pagination-color: var(--swiper-theme-color);
--swiper-pagination-left: auto;
--swiper-pagination-right: 8px;
--swiper-pagination-bottom: 8px;
--swiper-pagination-top: auto;
--swiper-pagination-fraction-color: inherit;
--swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
--swiper-pagination-progressbar-size: 4px;
--swiper-pagination-bullet-size: 8px;
--swiper-pagination-bullet-width: 8px;
--swiper-pagination-bullet-height: 8px;
--swiper-pagination-bullet-border-radius: 50%;
--swiper-pagination-bullet-inactive-color: #000;
--swiper-pagination-bullet-inactive-opacity: 0.2;
--swiper-pagination-bullet-opacity: 1;
--swiper-pagination-bullet-horizontal-gap: 4px;
--swiper-pagination-bullet-vertical-gap: 6px;
*/
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
&.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > &,
&.swiper-pagination-disabled {
display: none !important;
}
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: var(--swiper-pagination-bottom, 8px);
top: var(--swiper-pagination-top, auto);
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
.swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
}
.swiper-pagination-bullet {
width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
display: inline-block;
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: var(--swiper-pagination-bullet-inactive-color, #000);
opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
button& {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
appearance: none;
}
.swiper-pagination-clickable & {
cursor: pointer;
}
&:only-child {
display: none !important;
}
}
.swiper-pagination-bullet-active {
opacity: var(--swiper-pagination-bullet-opacity, 1);
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
right: var(--swiper-pagination-right, 8px);
left: var(--swiper-pagination-left, auto);
top: 50%;
transform: translate3d(0px, -50%, 0);
.swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
display: block;
}
&.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
.swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
}
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
.swiper-pagination-bullet {
margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
&.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
.swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
}
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
position: absolute;
.swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-rtl & .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-horizontal > &,
&.swiper-pagination-horizontal,
.swiper-vertical > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
width: 100%;
height: var(--swiper-pagination-progressbar-size, 4px);
left: 0;
top: 0;
}
.swiper-vertical > &,
&.swiper-pagination-vertical,
.swiper-horizontal > &.swiper-pagination-progressbar-opposite,
&.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
width: var(--swiper-pagination-progressbar-size, 4px);
height: 100%;
left: 0;
top: 0;
}
}
.swiper-pagination-lock {
display: none;
}
:root {
/*
--swiper-scrollbar-border-radius: 10px;
--swiper-scrollbar-top: auto;
--swiper-scrollbar-bottom: 4px;
--swiper-scrollbar-left: auto;
--swiper-scrollbar-right: 4px;
--swiper-scrollbar-sides-offset: 1%;
--swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
--swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
--swiper-scrollbar-size: 4px;
*/
}
.swiper-scrollbar {
border-radius: var(--swiper-scrollbar-border-radius, 10px);
position: relative;
touch-action: none;
background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
.swiper-scrollbar-disabled > &,
&.swiper-scrollbar-disabled {
display: none !important;
}
.swiper-horizontal > &,
&.swiper-scrollbar-horizontal {
position: absolute;
left: var(--swiper-scrollbar-sides-offset, 1%);
bottom: var(--swiper-scrollbar-bottom, 4px);
top: var(--swiper-scrollbar-top, auto);
z-index: 50;
height: var(--swiper-scrollbar-size, 4px);
width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-vertical > &,
&.swiper-scrollbar-vertical {
position: absolute;
left: var(--swiper-scrollbar-left, auto);
right: var(--swiper-scrollbar-right, 4px);
top: var(--swiper-scrollbar-sides-offset, 1%);
z-index: 50;
width: var(--swiper-scrollbar-size, 4px);
height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
border-radius: var(--swiper-scrollbar-border-radius, 10px);
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
/* Zoom container styles start */
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
> img,
> svg,
> canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
}
/* Zoom container styles end */
.swiper-slide-zoomed {
cursor: move;
touch-action: none;
}
/* a11y */
.swiper .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-thumbs {
.swiper-slide-thumb-active {
/* Styles for active thumb slide */
}
}
.swiper-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-fade {
&.swiper-free-mode {
.swiper-slide {
transition-timing-function: ease-out;
}
}
.swiper-slide {
pointer-events: none;
transition-property: opacity;
.swiper-slide {
pointer-events: none;
}
}
.swiper-slide-active {
pointer-events: auto;
& .swiper-slide-active {
pointer-events: auto;
}
}
}
.swiper.swiper-cube {
overflow: visible;
}
.swiper-cube {
.swiper-slide {
pointer-events: none;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
.swiper-slide {
pointer-events: none;
}
}
&.swiper-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-slide-active {
&,
& .swiper-slide-active {
pointer-events: auto;
}
}
.swiper-slide-active,
.swiper-slide-next,
.swiper-slide-prev {
pointer-events: auto;
visibility: visible;
}
.swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
opacity: 0.6;
z-index: 0;
&:before {
content: "";
background: #000;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
filter: blur(50px);
}
}
}
.swiper-cube {
.swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
}
/* Cube slide shadows start */
.swiper-cube {
.swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-slide-shadow-cube.swiper-slide-shadow-right {
z-index: 0;
backface-visibility: hidden;
}
}
/* Cube slide shadows end */
.swiper.swiper-flip {
overflow: visible;
}
.swiper-flip {
.swiper-slide {
pointer-events: none;
backface-visibility: hidden;
z-index: 1;
.swiper-slide {
pointer-events: none;
}
}
.swiper-slide-active {
&,
& .swiper-slide-active {
pointer-events: auto;
}
}
}
/* Flip slide shadows start */
.swiper-flip {
.swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-slide-shadow-flip.swiper-slide-shadow-right {
z-index: 0;
backface-visibility: hidden;
}
}
/* Flip slide shadows end */
.swiper-creative {
.swiper-slide {
backface-visibility: hidden;
overflow: hidden;
transition-property: transform, opacity, height;
}
}
.swiper.swiper-cards {
overflow: visible;
}
.swiper-cards {
.swiper-slide {
transform-origin: center bottom;
backface-visibility: hidden;
overflow: hidden;
}
}
.card-switch-swiper {
position: relative;
}
.card-switch-swiper .swiper-button {
width: 24px;
height: 24px;
position: absolute;
}
.card-switch-swiper .swiper-button.swiper-button-next {
right: 0px;
left: auto;
top: 75px;
}
.card-switch-swiper .swiper-button.swiper-button-prev {
right: auto;
left: 0px;
top: 75px;
}
.shift-dot {
height: 10px;
width: 10px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.dot-morning {
background-color: #f4b400;
} /* Yellow */
.dot-evening {
background-color: #7e22ce;
color: #ffffff;
}
.dot-night {
background-color: #1e3a8a;
color: #ffffff;
}
.dot-off {
background-color: #d1d5db;
} /* Light Gray */
.overflow-x-auto {
overflow-x: auto;
}
.sticky {
position: sticky;
left: 0;
background: white; /* or your table background */
z-index: 10; /* make sure it stays above other cells */
border-right: 1px solid #ccc; /* optional, to separate */
}
/*
* jQuery OrgChart Plugin
* https://github.com/dabeng/OrgChart
*
* Copyright 2016, dabeng
* https://github.com/dabeng
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
/* chart styles */
.orgchart {
box-sizing: border-box;
display: inline-block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: linear-gradient(to top, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%), linear-gradient(to right, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%), linear-gradient(to bottom, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%), linear-gradient(to left, rgba(200, 0, 0, 0.15) 5%, rgba(0, 0, 0, 0) 5%);
background-size: 10px 10px; /* background square size */
padding: 20px 20px 0 20px;
/* border: 0.5px solid rgba(200, 0, 0, 0.15); */
}
.orgchart .hidden, .orgchart ~ .hidden {
display: none !important;
}
.orgchart.b2t {
transform: rotate(180deg);
}
.orgchart.l2r {
position: absolute;
transform: rotate(-90deg) rotateY(180deg);
transform-origin: left top;
text-align: center;
}
.orgchart.r2l {
position: absolute;
transform: rotate(90deg);
transform-origin: left top;
text-align: center;
}
.orgchart ~ .mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
}
.orgchart ~ .mask .spinner {
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
.orgchart > .spinner::before,
.orgchart ~ .mask .spinner::before {
width: 100px;
height: 100px;
border-width: 10px;
border-radius: 50px;
border-top-color: rgba(68, 157, 68, 0.8);
border-bottom-color: rgba(68, 157, 68, 0.8);
border-left-color: rgba(68, 157, 68, 0.8);
}
.orgchart .nodes {
display: flex;
list-style: none;
padding-left: 0;
margin: 0;
justify-content: center;
}
.orgchart .hierarchy {
position: relative;
}
/* styles of link lines */
.orgchart .hierarchy::before {
content: "";
position: absolute;
top: -11px; /* -(background square size + half width of line) */
left: 0;
width: 100%;
border-top: 2px solid rgba(217, 83, 79, 0.8);
box-sizing: border-box;
}
/* 本姓人与上一层父母的连线，借助伪元素::before实现 */
/* 处理同一层中特殊的首节点 */
.orgchart .couple:first-child:not(:only-child)::before {
width: calc(100% - 69px); /* half width of hierarchy - half width of node - node's padding - node's border width */
left: 69px;
}
/* 处理同一层中特殊的末节点 */
.orgchart .couple:last-child:not(:only-child)::before {
width: calc(50% + 71px);
left: 0px;
}
.orgchart .hierarchy.couple:only-child::before {
width: 142px; /* half of node's width + link's width */
left: calc(50% - 71px); /* half width of node - half of link width */
}
/* 在family tree中，一个夫妻组合里，本姓人只有一个，外姓人可能有多个 */
/* 我们通过水平的连线来表示他们存在婚姻关系，借助伪元素::after实现 */
.orgchart .hierarchy.spouse:not(.couple)::after {
content: "";
position: absolute;
border-top: 2px solid rgba(217, 83, 79, 0.8);
box-sizing: border-box;
z-index: 0;
top: 24px;
width: var(--ft-width);
left: var(--ft-left-offset);
}
/* 一夫一妻情况下的连线 */
.orgchart .couple {
white-space: nowrap;
}
.orgchart .couple:has(> .nodes) > .node:first-child::after {
content: "";
position: absolute;
top: 24px;
left: calc(100% + 1px);
width: 2px;
height: 33px;
background-color: rgba(217, 83, 79, 0.8);
}
.orgchart .couple::after {
content: "";
position: absolute;
border-top: 2px solid rgba(217, 83, 79, 0.8);
box-sizing: border-box;
z-index: 0;
top: 24px;
width: 20px;
left: calc(50% - 10px); /* half of hierarchy - node's padding width - node's border with */
}
.orgchart .hierarchy:first-child::before,
.orgchart .hierarchy.isSiblingsCollapsed.left-sibs::before {
left: calc(50% - 1px);
width: calc(50% + 1px);
}
.orgchart .hierarchy:last-child::before,
.orgchart .hierarchy.isSiblingsCollapsed.right-sibs::before {
width: calc(50% + 1px);
}
.orgchart .hierarchy:not(.hidden):not(.spouse):only-child::before {
width: 2px;
}
.orgchart > .nodes > .hierarchy::before,
.orgchart .isSiblingsCollapsed:not(.left-sibs):not(.right-sibs)::before,
.orgchart .isSiblingsCollapsed.left-sibs.right-sibs::before,
.orgchart .isSiblingsCollapsed.right-sibs:first-child:before,
.orgchart .isSiblingsCollapsed.left-sibs:last-child:before,
.orgchart .isCollapsedSibling::before,
.orgchart .isCollapsedSibling .hierarchy::before,
.orgchart .hierarchy.isChildrenCollapsed:not(.couple) > .node:has(+ .nodes)::after,
.orgchart .isCollapsedDescendant::before,
.orgchart .isCollapsedDescendant > .node::before,
.orgchart .isCollapsedDescendant > .node::after,
.orgchart .isAncestorsCollapsed:only-child::before,
.orgchart .isAncestorsCollapsed > .node:not(.outsider)::before {
content: none;
}
/* excluding leaf node */
.orgchart .hierarchy:not(.couple) > .node:has(+ .nodes)::after {
content: "";
position: absolute;
bottom: -12px; /* -(background square size + node's border width) */
left: calc(50% - 1px);
width: 2px;
height: 10px; /* background square size */
background-color: rgba(217, 83, 79, 0.8);
}
.orgchart ul li .node.allowedDrop {
border-color: rgba(68, 157, 68, 0.9);
}
.orgchart ul li .node.currentDropTarget {
background-color: rgba(68, 157, 68, 0.9);
}
.orgchart ul li .node.selected {
background-color: rgba(238, 217, 54, 0.5);
}
.orgchart ul li .node:hover {
background-color: rgba(238, 217, 54, 0.5);
}
/* excluding root node */
.orgchart > ul > li > ul li > .node:not(.outsider)::before {
content: "";
position: absolute;
top: var(--top, -12px); /* -(fallback value = background square size + border width of node) */
left: calc(50% - 1px);
width: 2px;
height: var(--height, 10px); /* fallback value = background square size */
background-color: rgba(217, 83, 79, 0.8);
}
.orgchart > ul > li > ul li > .node.outsider::before {
content: "";
position: absolute;
top: var(--top, -12px);
left: calc(50% - 1px);
width: 0;
height: var(--height, 10px);
border-right: 2px dotted rgba(217, 83, 79, 0.8);
}
.orgchart > ul > li > ul .isSiblingsCollapsed > .node::before {
top: var(--top-cross-point, -12px);
height: var(--height-cross-point, 10px);
}
/* node styling */
.orgchart .node {
box-sizing: border-box;
display: inline-block;
position: relative;
margin: 0 0 20px 0;
padding: 3px;
border: 2px dashed transparent;
text-align: center;
transition: transform 0.3s, opacity 0.3s;
z-index: 1;
}
.orgchart.l2r .node, .orgchart.r2l .node {
width: 50px;
height: 140px;
}
.orgchart .node:hover {
background-color: rgba(238, 217, 54, 0.5);
transition: 0.5s;
cursor: default;
z-index: 2;
}
.orgchart .node.focused {
background-color: rgba(238, 217, 54, 0.5);
}
.orgchart .ghost-node {
position: fixed;
left: -10000px;
top: -10000px;
}
.orgchart .ghost-node rect {
fill: #ffffff;
stroke: #bf0000;
}
.orgchart .node.allowedDrop {
border-color: rgba(68, 157, 68, 0.9);
}
.orgchart .node > .spinner {
position: absolute;
top: calc(50% - 1rem);
left: calc(50% - 1rem);
}
.orgchart .node > .spinner::before {
width: 2rem;
height: 2rem;
border-width: 0.2rem;
border-radius: 1rem;
border-top-color: rgba(68, 157, 68, 0.8);
border-bottom-color: rgba(68, 157, 68, 0.8);
border-left-color: rgba(68, 157, 68, 0.8);
}
.orgchart .node .title {
box-sizing: border-box;
width: 130px;
text-align: center;
font-size: 12px;
font-weight: bold;
height: 20px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: rgba(217, 83, 79, 0.8);
color: #fff;
border-radius: 4px 4px 0 0;
}
.orgchart.b2t .node .title {
transform: rotate(-180deg);
transform-origin: center bottom;
}
.orgchart.l2r .node .title {
transform: rotate(-90deg) translate(-45px, -45px) rotateY(180deg);
transform-origin: bottom center;
}
.orgchart.r2l .node .title {
transform: rotate(-90deg) translate(-45px, -45px);
transform-origin: bottom center;
}
.orgchart .node .title .parentNodeSymbol {
float: left;
}
.orgchart .node .title .parentNodeSymbol::before {
color: #fff;
}
.orgchart .node .title .parentNodeSymbol::after {
background-color: #fff;
}
.orgchart .node .content {
box-sizing: border-box;
width: 130px;
height: 20px;
line-height: 20px;
font-size: 10px;
border: 1px solid rgba(217, 83, 79, 0.8);
border-width: 0 1px 1px 1px;
border-radius: 0 0 0.25rem 0.25rem;
text-align: center;
background-color: #fff;
color: #333;
text-overflow: ellipsis;
white-space: nowrap;
}
.orgchart.b2t .node .content {
transform: rotate(180deg);
transform-origin: center top;
}
.orgchart.l2r .node .content {
transform: rotate(-90deg) translate(-45px, -45px) rotateY(180deg);
transform-origin: top center;
width: 130px;
}
.orgchart.r2l .node .content {
transform: rotate(-90deg) translate(-45px, -45px);
transform-origin: top center;
width: 130px;
}
.orgchart .node .edge {
position: absolute;
cursor: default;
transition: 0.2s;
}
.orgchart .node .edge::before {
border-color: rgba(68, 157, 68, 0.5);
}
.orgchart.noncollapsable .node .edge {
display: none;
}
.orgchart .node .edge:hover {
cursor: pointer;
}
.orgchart .edge:hover::before {
border-color: #449d44;
}
.orgchart .node .verticalEdge {
width: calc(100% - 6px); /* node top half's width */
height: 10px; /* background square's size */
left: 3px; /* node's padding value */
}
.orgchart .node .verticalEdge::before {
position: absolute;
left: calc(50% - 5px); /* 50% width of node - half width of up arrow icon) */
}
.orgchart .node .topEdge {
top: -2px;
}
.orgchart .node .topEdge.oci-chevron-up::before {
top: 2px;
}
.orgchart .node .topEdge.oci-chevron-down::before {
bottom: 3px;
}
.orgchart .node .bottomEdge {
bottom: -2px; /* -(node's border-width) */
}
.orgchart .node .bottomEdge.oci-chevron-up::before {
bottom: -3px;
}
.orgchart .node .bottomEdge.oci-chevron-down::before {
bottom: 1px;
}
.orgchart .node .horizontalEdge {
width: 10px;
height: calc(100% - 6px);
top: 3px; /* node's padding */
}
.orgchart .node .rightEdge {
right: -2px;
}
.orgchart .node .leftEdge {
left: -2px;
}
.orgchart .node .horizontalEdge::before {
position: absolute;
top: calc(50% - 5px);
}
.orgchart .node .leftEdge.oci-chevron-right::before {
left: -3px;
}
.orgchart .node .leftEdge.oci-chevron-left::before {
left: 1px;
}
.orgchart .node .rightEdge.oci-chevron-left::before {
right: -3px;
}
.orgchart .node .rightEdge.oci-chevron-right::before {
right: 1px;
}
.orgchart .node .toggleBtn {
position: absolute;
left: -2px; /* -(border width of node) */
bottom: -2px;
width: 16px;
height: 16px;
}
.orgchart .node .toggleBtn::before {
background-color: rgba(68, 157, 68, 0.6);
position: absolute;
left: 0;
bottom: 0;
}
.orgchart .node .toggleBtn:hover::before {
background-color: #449d44;
}
.oc-export-btn {
margin-left: 0.5rem;
padding: 0.5rem 1rem;
}
.orgchart .slide-down {
opacity: 0;
transform: translateY(40px);
}
.orgchart.l2r .node.slide-down, .orgchart.r2l .node.slide-down {
transform: translateY(130px);
}
.orgchart .slide-up {
opacity: 0;
transform: translateY(-40px);
}
.orgchart.l2r .node.slide-up, .orgchart.r2l .node.slide-up {
transform: translateY(-130px);
}
.orgchart .slide-right {
opacity: 0;
transform: translateX(130px);
}
.orgchart.l2r .node.slide-right, .orgchart.r2l .node.slide-right {
transform: translateX(40px);
}
.orgchart .slide-left {
opacity: 0;
transform: translateX(-130px);
}
.orgchart.l2r .node.slide-left, .orgchart.r2l .node.slide-left {
transform: translateX(-40px);
}
/* styles for vertical nodes */
.orgchart .nodes.vertical {
display: block;
padding-left: 10px; /* width of background square*/
}
.orgchart .nodes.vertical .nodes {
list-style: none;
display: block;
margin: 0;
padding-left: 10px; /* width of background square*/
text-align: left;
}
.orgchart .nodes.vertical .node {
margin-bottom: 0;
}
.orgchart .nodes.vertical .hierarchy .node::before,
.orgchart .nodes.vertical .hierarchy .node::after {
content: none;
}
.orgchart .nodes.vertical .hierarchy {
position: relative;
text-align: left;
}
.orgchart .nodes.vertical .hierarchy::before,
.orgchart .nodes.vertical .hierarchy::after {
box-sizing: border-box;
content: "";
position: absolute;
left: -6px; /* -(background square size + half width of line */
border-color: rgba(217, 83, 79, 0.8);
border-style: solid;
border-width: 0 0 2px 2px;
}
.orgchart .nodes.vertical .hierarchy:only-child::before {
width: 11px;
}
.orgchart .nodes.vertical .hierarchy::before {
top: 0px;
height: 26px; /* node top half's height(25px) + half width of line */
width: 11px; /* background square size + half width of line */
}
.orgchart .nodes.vertical .hierarchy::after {
bottom: 0;
height: calc(100% - 24px); /* height of hierarchy - (node top half's height(25px) - half width of line) */
}
.orgchart .nodes.vertical .hierarchy:last-child::after {
border-width: 2px 0 0 0;
}
.orgchart .nodes.vertical > .hierarchy:first-child::before {
box-sizing: border-box;
top: -11px; /* -(background square size + half width of line) */
height: 35px; /* node top half's height + node padding + node border width + background square size */
width: calc(50% + 2px);
border-width: 2px 0 0 2px;
}
.orgchart .nodes.vertical > .hierarchy:first-child::after {
box-sizing: border-box;
top: 24px; /* node bottom half's height(25px) - half border width of line */
width: 11px; /* backgroud square size + half border width of line */
border-width: 2px 0 0 2px;
}
.orgchart .nodes.vertical > .hierarchy:first-child:last-child::after {
border-width: 2px 0 0 0;
}
/* styles for compact nodes */
.orgchart .node.compact {
position: static;
display: grid;
width: 140px;
height: 50px;
background-color: #eee;
}
.orgchart .node.compact.looseMode {
display: grid;
width: unset;
height: unset;
}
.orgchart .node.compact > .node {
display: none;
}
.orgchart .node.compact.looseMode > .node {
display: inline-block;
}
.orgchart .node.compact > .node.compact {
position: relative;
}
.orgchart .node.compact > .node.compact.looseMode {
display: grid;
}
.orgchart .node.compact.even,
.orgchart .node.compact.even:hover {
background-color: #eee;
}
.orgchart .node.compact.odd,
.orgchart .node.compact.odd:hover {
background-color: #fff;
}
.orgchart .node.compact.even > .node:hover,
.orgchart .node.compact.even > .node.focused,
.orgchart .node.compact.even > .node.selected {
background-color: #fff;
}
.orgchart .node.compact.odd > .node:hover,
.orgchart .node.compact.odd > .node.focused,
.orgchart .node.compact.odd > .node.selected {
background-color: #eee;
}
.orgchart .node.compact::before {
top: var(--top-cross-point, -10px);
}
.orgchart .node.compact > .content {
position: absolute;
top: 25px;
left: 5px;
}
.orgchart .node.compact.looseMode > .title {
margin-top: 5px;
margin-left: 5px;
}
.orgchart .node.compact.looseMode > .content {
top: 30px;
left: 10px;
}
.orgchart .node.compact > .node.compact.looseMode > .title {
margin-top: 5px;
margin-left: 5px;
}
.orgchart .node.compact > .node.compact > .content {
position: absolute;
top: 23px;
left: 3px;
}
.orgchart .node.compact > .node.compact.looseMode > .content {
top: 28px;
left: 8px;
}
.orgchart .node.compact .node {
margin-bottom: 0;
}
.orgchart .node.compact .node:has(+ .nodes)::after {
content: unset;
}
.orgchart .backToCompactSymbol, .orgchart .backToLooseSymbol {
cursor: pointer;
}
.orgchart .node.compact > .backToCompactSymbol {
position: absolute;
top: 5px;
left: 5px;
}
.orgchart .node.compact.looseMode > .backToCompactSymbol {
top: 10px;
left: 10px;
}
.orgchart .node.compact > .node.compact.looseMode > .backToCompactSymbol {
top: 8px;
left: 8px;
}
.orgchart .node.compact > .node.compact > .backToCompactSymbol {
position: absolute;
top: 3px;
left: 3px;
}
.orgchart .node.compact > .backToLooseSymbol {
position: absolute;
top: 25px;
right: 5px;
}
.orgchart .node.compact > .node.compact > .backToLooseSymbol {
position: absolute;
top: 23px;
right: 3px;
}
.orgchart .node.compact .backToCompactSymbol::before {
border-top-color: rgba(68, 157, 68, 0.6);
}
.orgchart .node.compact .backToLooseSymbol::before {
border-bottom-color: rgba(68, 157, 68, 0.6);
}
.orgchart .node.compact .backToCompactSymbol:hover::before {
border-top-color: #449d44;
}
.orgchart .node.compact .backToLooseSymbol:hover::before {
border-bottom-color: #449d44;
}
/* custom icons for orgchart */
.oci {
display: inline-block;
position: relative;
font-style: normal;
font-family: Arial;
}
.oci-menu::before {
content: "≡";
display: inline-block;
width: 1rem;
height: 1rem;
text-align: center;
line-height: 1rem;
color: #000;
font-size: 1rem;
}
.oci-chevron-up::before {
content: "";
box-sizing: border-box;
width: 10px;
height: 10px;
display: inline-block;
border: 3px solid #000;
transform: rotate(45deg);
border-right: unset;
border-bottom: unset;
}
.oci-chevron-down::before {
content: "";
box-sizing: border-box;
width: 10px;
height: 10px;
display: inline-block;
border: 3px solid #000;
transform: rotate(45deg);
border-top: unset;
border-left: unset;
}
.oci-chevron-left::before {
content: "";
box-sizing: border-box;
width: 10px;
height: 10px;
display: inline-block;
border: 3px solid #000;
transform: rotate(45deg);
border-top: unset;
border-right: unset;
}
.oci-chevron-right::before {
content: "";
box-sizing: border-box;
width: 10px;
height: 10px;
display: inline-block;
border: 3px solid #000;
transform: rotate(45deg);
border-left: unset;
border-bottom: unset;
}
.oci-corner-top-left::before {
content: "";
display: inline-block;
border-top: 20px solid #000;
border-right: 20px solid transparent;
}
.oci-corner-top-right::before {
content: "";
display: inline-block;
box-sizing: border-box;
width: 0;
height: 0;
border-top: 20px solid #000;
border-left: 20px solid transparent;
}
.oci-corner-bottom-right::before {
content: "";
display: inline-block;
box-sizing: border-box;
width: 0;
height: 0;
border-bottom: 20px solid #000;
border-left: 20px solid transparent;
}
.oci-corner-bottom-left::before {
content: "";
display: inline-block;
box-sizing: border-box;
width: 0;
height: 0;
border-bottom: 20px solid #000;
border-right: 20px solid transparent;
}
.oci-plus-square::before {
content: "﹢";
display: inline-block;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
background-color: #000;
color: #fff;
font-weight: bold;
}
.oci-minus-square::before {
content: "﹣";
display: inline-block;
width: 16px;
height: 16px;
text-align: center;
line-height: 16px;
background-color: #000;
color: #fff;
font-weight: bold;
}
.oci-arrow-square-up::before {
content: "⬆";
display: inline-block;
width: 1rem;
height: 1rem;
text-align: center;
line-height: 1rem;
background-color: #000;
color: #fff;
font-weight: bold;
}
.oci-arrow-square-down::before {
content: "⬇";
display: inline-block;
width: 1rem;
height: 1rem;
text-align: center;
line-height: 1rem;
background-color: #000;
color: #fff;
font-weight: bold;
}
.oci-info-circle::before {
content: "i";
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: 0.5rem;
background-color: #000;
color: #fff;
text-align: center;
font-weight: bold;
}
.oci-spinner::before {
content: "";
vertical-align: text-bottom;
display: inline-block;
box-sizing: border-box;
width: 1rem;
height: 1rem;
border: 0.1rem solid #000;
border-right-color: transparent;
border-radius: 0.625rem;
animation: oci-infinite-spinning 0.75s linear infinite;
}
@keyframes oci-infinite-spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.orgchart-wrapper {
position: absolute;
text-align: center;
overflow: auto;
min-height: 500px;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 20px;
width: 100%;
}
.orgchart-wrapper .orgchart {
background: transparent;
margin: 0 auto;
}
.orgchart-wrapper .orgchart .hierarchy,
.orgchart-wrapper .orgchart .node {
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.orgchart-wrapper .orgchart .hierarchy.hidden,
.orgchart-wrapper .orgchart .node.hidden {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none;
position: absolute;
height: 0;
overflow: hidden;
}
.orgchart-wrapper .orgchart .node.slide-up.hidden {
transform: translateY(-20px);
}
.orgchart-wrapper .orgchart .hierarchy.slide-left.hidden {
transform: translateX(-20px);
}
.orgchart-wrapper .orgchart .hierarchy.slide-right.hidden {
transform: translateX(20px);
}
.orgchart-wrapper .orgchart .hierarchy:not(.hidden),
.orgchart-wrapper .orgchart .node:not(.hidden) {
opacity: 1;
visibility: visible;
}
.orgchart-wrapper .orgchart .node {
transition: transform 0.2s ease, box-shadow 0.2s ease;
width: auto !important;
min-width: 200px;
max-width: 280px;
}
.orgchart-wrapper .orgchart .node:hover {
transform: translateY(-2px);
}
.orgchart-wrapper .orgchart .node:hover .node-card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.orgchart-wrapper .orgchart .node .node-card {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 10px 12px;
transition: box-shadow 0.2s ease;
}
.orgchart-wrapper .orgchart .node .node-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
background: rgba(var(--tblr-primary), 0.12) no-repeat center/cover;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-right: 10px;
box-shadow: inset rgba(29, 39, 59, 0.04) 0 0 0 1px;
}
.orgchart-wrapper .orgchart .node .node-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.orgchart-wrapper .orgchart .node .node-avatar .avatar-initials {
color: var(--tblr-primary);
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
}
.orgchart-wrapper .orgchart .node .node-info {
min-width: 0;
overflow: hidden;
}
.orgchart-wrapper .orgchart .node .node-name {
font-size: 13px;
font-weight: 600;
color: #333;
line-height: 1.3;
margin-bottom: 2px;
}
.orgchart-wrapper .orgchart .node .node-title {
font-size: 11px;
color: #666;
line-height: 1.3;
}
.orgchart-wrapper .orgchart .node .node-dept {
font-size: 10px;
color: #999;
line-height: 1.3;
margin-top: 2px;
}
.orgchart-wrapper .orgchart .node .title {
background-color: var(--primary-light);
border-radius: 6px 6px 0 0;
padding: 8px 12px;
font-weight: 600;
font-size: 13px;
height: auto;
line-height: 1.4;
width: 100%;
}
.orgchart-wrapper .orgchart .node .content {
width: 100%;
background-color: #fff;
border: 1px solid #e0e0e0;
border-top: none;
padding: 8px 12px;
font-size: 12px;
color: #666;
height: auto;
border-radius: 0;
}
.orgchart-wrapper .orgchart .node.focused {
background-color: transparent;
}
.orgchart-wrapper .orgchart .lines .downLine,
.orgchart-wrapper .orgchart .lines .rightLine,
.orgchart-wrapper .orgchart .lines .leftLine,
.orgchart-wrapper .orgchart .lines .topLine {
background-color: #dee2e6;
}
.orgchart-wrapper .orgchart .edge::before {
background-color: var(--tblr-primary);
border-color: var(--tblr-primary);
color: #fff;
font-size: 14px;
width: 16px;
height: 16px;
line-height: 16px;
}
.orgchart-wrapper .orgchart .edge:hover::before {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
}
.orgchart-wrapper .orgchart .toggleBtn {
background-color: var(--tblr-primary);
border-color: var(--tblr-primary);
}
.orgchart-wrapper .orgchart .toggleBtn:hover {
background-color: var(--primary-dark);
border-color: var(--primary-dark);
}
.orgchart-wrapper .orgchart .spinner {
border-color: var(--tblr-primary);
border-right-color: transparent;
}
.orgchart-wrapper .orgchart .verticalNodes {
list-style: none;
padding-left: 0;
}
.orgchart-wrapper .orgchart .verticalNodes > li {
position: relative;
}
.orgchart-wrapper .orgchart .verticalNodes > li::before {
content: "";
position: absolute;
left: -10px;
top: 0;
bottom: 0;
width: 2px;
background-color: #dee2e6;
}
.orgchart-wrapper .orgchart .verticalNodes > li:last-child::before {
height: 50%;
}
.orgchart-wrapper .orgchart .verticalNodes > li::after {
content: "";
position: absolute;
left: -10px;
top: 50%;
width: 10px;
height: 2px;
background-color: #dee2e6;
}
.orgchart-wrapper .orgchart .verticalNodes .node {
margin: 8px 0;
margin-left: 10px;
}
.orgchart-wrapper .orgchart .verticalNodes .node .org-photo {
margin: -20px auto 6px;
width: 40px;
height: 40px;
}
.orgchart-wrapper .orgchart .verticalEdge::before {
background-color: var(--primary) !important;
}
.orgchart-wrapper .orgchart .node-actions {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 6px;
z-index: 10;
}
.orgchart-wrapper .orgchart .action-btn {
width: 28px;
height: 28px;
background: #ff9800;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transition: all 0.2s ease;
padding: 0;
}
.orgchart-wrapper .orgchart .action-btn .mi {
color: #fff;
font-size: 16px;
line-height: 1;
}
.orgchart-wrapper .orgchart .action-btn:hover {
transform: scale(1.15);
background: #f57c00;
}
.orgchart-wrapper .orgchart .action-btn .spin {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.orgchart-wrapper .orgchart .node.hasChildren {
position: relative;
}
.orgchart-wrapper .orgchart .node.hasChildren::after {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 8px;
background: #dee2e6;
}
.orgchart-wrapper .orgchart .loading-chart {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
color: #666;
font-size: 16px;
}
.orgchart-wrapper .orgchart .loading-chart .mi {
margin-right: 8px;
font-size: 24px;
}
.orgchart-wrapper .orgchart-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
background: #fff;
border-bottom: 1px solid #e0e0e0;
border-radius: 8px 8px 0 0;
margin: -20px -20px 15px -20px;
flex-wrap: wrap;
gap: 10px;
}
.orgchart-wrapper .orgchart-nav .nav-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
transition: all 0.2s ease;
}
.orgchart-wrapper .orgchart-nav .nav-btn .mi {
font-size: 18px;
}
.orgchart-wrapper .orgchart-nav .nav-btn.back-root-btn {
background: var(--tblr-primary);
color: #fff;
}
.orgchart-wrapper .orgchart-nav .nav-btn.back-root-btn:hover {
background: var(--primary-dark);
}
.orgchart-wrapper .orgchart-nav .nav-btn.back-btn {
background: #f5f5f5;
color: #333;
}
.orgchart-wrapper .orgchart-nav .nav-btn.back-btn:hover {
background: #e0e0e0;
}
.orgchart-wrapper .orgchart-nav .breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
flex: 1;
justify-content: center;
}
.orgchart-wrapper .orgchart-nav .breadcrumb .breadcrumb-item {
padding: 4px 10px;
background: #f5f5f5;
border-radius: 4px;
font-size: 12px;
color: #666;
}
.orgchart-wrapper .orgchart-nav .breadcrumb .breadcrumb-item.clickable {
cursor: pointer;
background: #e3f2fd;
color: #1976d2;
}
.orgchart-wrapper .orgchart-nav .breadcrumb .breadcrumb-item.clickable:hover {
background: #bbdefb;
}
.orgchart-wrapper .orgchart-nav .breadcrumb .breadcrumb-item:last-child {
background: var(--tblr-primary);
color: #fff;
cursor: default;
}
.orgchart-wrapper .orgchart-nav .breadcrumb .breadcrumb-item:last-child:hover {
background: var(--tblr-primary);
}
.orgchart-wrapper .orgchart-nav .breadcrumb .breadcrumb-sep {
color: #bbb;
}
.orgchart-wrapper .orgchart-nav .breadcrumb .breadcrumb-sep .mi {
font-size: 16px;
vertical-align: middle;
}
.orgchart-wrapper .oc-export-btn {
position: absolute;
top: 10px;
right: 0px;
background: var(--tblr-primary);
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
z-index: 10;
}
.orgchart-wrapper .oc-export-btn:hover {
background: var(--primary-dark);
}
.orgchart-wrapper .oc-export-btn .mi {
margin-right: 6px;
}
@media (max-width: 575.98px) {
.orgchart-wrapper {
min-height: 450px;
max-height: calc(100vh - 10rem);
border-radius: 0;
margin-left: calc(var(--tblr-gutter-x) * -0.5);
margin-right: calc(var(--tblr-gutter-x) * -0.5);
padding: 10px;
}
.orgchart-wrapper .orgchart-nav {
margin: -10px -10px 10px -10px;
padding: 8px 10px;
flex-direction: column;
}
.orgchart-wrapper .orgchart-nav .breadcrumb {
order: 1;
margin-bottom: 8px;
}
.orgchart-wrapper .orgchart-nav .nav-btn {
padding: 6px 12px;
font-size: 12px;
}
.orgchart-wrapper .orgchart {
padding: 10px;
}
.orgchart-wrapper .orgchart .node {
min-width: 160px !important;
max-width: 200px !important;
}
.orgchart-wrapper .orgchart .node .node-card {
padding: 8px 10px;
}
.orgchart-wrapper .orgchart .node .node-avatar {
width: 36px;
height: 36px;
}
.orgchart-wrapper .orgchart .node .node-avatar .avatar-initials {
font-size: 12px;
}
.orgchart-wrapper .orgchart .node .node-name {
font-size: 11px;
}
.orgchart-wrapper .orgchart .node .node-title,
.orgchart-wrapper .orgchart .node .node-dept {
font-size: 9px;
}
.orgchart-wrapper .orgchart .node-actions {
bottom: -14px;
}
.orgchart-wrapper .orgchart .node-actions .action-btn {
width: 24px;
height: 24px;
}
.orgchart-wrapper .orgchart .node-actions .action-btn .mi {
font-size: 14px;
}
.orgchart-wrapper .orgchart .verticalNodes .node {
margin-bottom: 10px;
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.orgchart-wrapper {
height: 500px !important;
min-height: 500px;
}
.orgchart-wrapper .orgchart .node {
min-width: 180px !important;
max-width: 220px !important;
}
.orgchart-wrapper .orgchart .node .node-avatar {
width: 40px;
height: 40px;
}
.orgchart-wrapper .orgchart .node .node-name {
font-size: 12px;
}
.orgchart-wrapper .orgchart .node .node-title,
.orgchart-wrapper .orgchart .node .node-dept {
font-size: 10px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.orgchart-wrapper {
height: 550px !important;
min-height: 550px;
}
.orgchart-wrapper .orgchart .node {
min-width: 200px !important;
max-width: 260px !important;
}
.orgchart-wrapper .orgchart .node .node-avatar {
width: 42px;
height: 42px;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.orgchart-wrapper {
height: 600px !important;
min-height: 600px;
}
.orgchart-wrapper .orgchart .node {
min-width: 210px !important;
max-width: 270px !important;
}
}
@media (min-width: 1200px) {
.orgchart-wrapper .orgchart .node {
min-width: 220px !important;
max-width: 280px !important;
}
.orgchart-wrapper .orgchart .node .node-avatar {
width: 48px;
height: 48px;
}
}
.orgchart .node,
.orgchart .hierarchy,
.orgchart .nodes > li,
.orgchart .nodes > li > .node,
.orgchart .hierarchy > .node {
list-style: none;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.orgchart .isChildrenCollapsed > .node,
.orgchart .isSiblingsCollapsed > .node {
opacity: 1 !important;
}
.orgchart .hierarchy::before,
.orgchart .hierarchy::after,
.orgchart .nodes::before {
opacity: 1 !important;
}
.orgchart .slide-up > .title,
.orgchart .slide-up > .content,
.orgchart .slide-down > .title,
.orgchart .slide-down > .content {
opacity: 1 !important;
}
@media (min-width: 992px) {
.orgchart-wrapper {
width: calc(100% - 17.5rem);
height: calc(100vh - 11.5rem);
}
body.mini .orgchart-wrapper {
width: calc(100% - 100px);
}
}
.air-datepicker-cell.-selected- {
--adp-accent-color: var(--tblr-primary);
--adp-day-name-color: var(--tblr-primary);
--adp-cell-background-color-selected: var(--tblr-primary);
--adp-cell-background-color-selected-hover: var(--tblr-primary);
}
.air-datepicker-cell.-current- {
--adp-color-current-date: var(--tblr-primary);
}
.air-datepicker-cell.-year-.-other-decade-, .air-datepicker-cell.-day-.-other-month- {
color: var(--adp-color-other-month);
}
.air-datepicker-cell.-year-.-other-decade-:hover, .air-datepicker-cell.-day-.-other-month-:hover {
color: var(--adp-color-other-month-hover);
}
.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-disabled-.-focus-.air-datepicker-cell.-day-.-other-month- {
color: var(--adp-color-other-month);
}
.-selected-.air-datepicker-cell.-year-.-other-decade-, .-selected-.air-datepicker-cell.-day-.-other-month- {
color: #fff;
background: var(--adp-background-color-selected-other-month);
}
.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-selected-.-focus-.air-datepicker-cell.-day-.-other-month- {
background: var(--adp-background-color-selected-other-month-focused);
}
.-in-range-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.air-datepicker-cell.-day-.-other-month- {
background-color: var(--adp-background-color-in-range);
color: var(--adp-color);
}
.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-, .-in-range-.-focus-.air-datepicker-cell.-day-.-other-month- {
background-color: var(--adp-background-color-in-range-focused);
}
.air-datepicker-cell.-year-.-other-decade-:empty, .air-datepicker-cell.-day-.-other-month-:empty {
background: none;
border: none;
}
.air-datepicker-cell {
border-radius: var(--adp-cell-border-radius);
box-sizing: border-box;
cursor: pointer;
display: flex;
position: relative;
align-items: center;
justify-content: center;
z-index: 1;
}
.air-datepicker-cell.-focus- {
background: var(--adp-cell-background-color-hover);
}
.air-datepicker-cell.-current- {
color: var(--adp-color-current-date);
}
.air-datepicker-cell.-current-.-focus- {
color: var(--adp-color);
}
.air-datepicker-cell.-current-.-in-range- {
color: var(--adp-color-current-date);
}
.air-datepicker-cell.-disabled- {
cursor: default;
color: var(--adp-color-disabled);
}
.air-datepicker-cell.-disabled-.-focus- {
color: var(--adp-color-disabled);
}
.air-datepicker-cell.-disabled-.-in-range- {
color: var(--adp-color-disabled-in-range);
}
.air-datepicker-cell.-disabled-.-current-.-focus- {
color: var(--adp-color-disabled);
}
.air-datepicker-cell.-in-range- {
background: var(--adp-cell-background-color-in-range);
border-radius: 0;
}
.air-datepicker-cell.-in-range-:hover, .air-datepicker-cell.-in-range-.-focus- {
background: var(--adp-cell-background-color-in-range-hover);
}
.air-datepicker-cell.-range-from- {
border: 1px solid var(--adp-cell-border-color-in-range);
background-color: var(--adp-cell-background-color-in-range);
border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius);
}
.air-datepicker-cell.-range-to- {
border: 1px solid var(--adp-cell-border-color-in-range);
background-color: var(--adp-cell-background-color-in-range);
border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0;
}
.air-datepicker-cell.-range-to-.-range-from- {
border-radius: var(--adp-cell-border-radius);
}
.air-datepicker-cell.-selected- {
color: #fff;
border: none;
background: var(--adp-cell-background-color-selected);
}
.air-datepicker-cell.-selected-.-current- {
color: #fff;
background: var(--adp-cell-background-color-selected);
}
.air-datepicker-cell.-selected-.-focus- {
background: var(--adp-cell-background-color-selected-hover);
}
.air-datepicker-body {
transition: all var(--adp-transition-duration) var(--adp-transition-ease);
}
.air-datepicker-body.-hidden- {
display: none;
}
.air-datepicker-body--day-names {
display: grid;
grid-template-columns: repeat(7, var(--adp-day-cell-width));
margin: 8px 0 3px;
}
.air-datepicker-body--day-name {
color: var(--adp-day-name-color);
display: flex;
align-items: center;
justify-content: center;
flex: 1;
text-align: center;
text-transform: uppercase;
font-size: 0.8em;
}
.air-datepicker-body--day-name.-clickable- {
cursor: pointer;
}
.air-datepicker-body--day-name.-clickable-:hover {
color: var(--adp-day-name-color-hover);
}
.air-datepicker-body--cells {
display: grid;
}
.air-datepicker-body--cells.-days- {
grid-template-columns: repeat(7, var(--adp-day-cell-width));
grid-auto-rows: var(--adp-day-cell-height);
}
.air-datepicker-body--cells.-months- {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: var(--adp-month-cell-height);
}
.air-datepicker-body--cells.-years- {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: var(--adp-year-cell-height);
}
.air-datepicker-nav {
display: flex;
justify-content: space-between;
border-bottom: 1px solid var(--adp-border-color-inner);
min-height: var(--adp-nav-height);
padding: var(--adp-padding);
box-sizing: content-box;
}
.-only-timepicker- .air-datepicker-nav {
display: none;
}
.air-datepicker-nav--title, .air-datepicker-nav--action {
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
.air-datepicker-nav--action {
width: var(--adp-nav-action-size);
border-radius: var(--adp-border-radius);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.air-datepicker-nav--action:hover {
background: var(--adp-background-color-hover);
}
.air-datepicker-nav--action:active {
background: var(--adp-background-color-active);
}
.air-datepicker-nav--action.-disabled- {
visibility: hidden;
}
.air-datepicker-nav--action svg {
width: 32px;
height: 32px;
}
.air-datepicker-nav--action path {
fill: none;
stroke: var(--adp-nav-arrow-color);
stroke-width: 2px;
}
.air-datepicker-nav--title {
border-radius: var(--adp-border-radius);
padding: 0 8px;
}
.air-datepicker-nav--title i {
font-style: normal;
color: var(--adp-nav-color-secondary);
margin-left: 0.3em;
}
.air-datepicker-nav--title:hover {
background: var(--adp-background-color-hover);
}
.air-datepicker-nav--title:active {
background: var(--adp-background-color-active);
}
.air-datepicker-nav--title.-disabled- {
cursor: default;
background: none;
}
.air-datepicker-buttons {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
}
.air-datepicker-button {
display: inline-flex;
color: var(--adp-btn-color);
border-radius: var(--adp-btn-border-radius);
cursor: pointer;
height: var(--adp-btn-height);
border: none;
background: rgba(255, 255, 255, 0);
}
.air-datepicker-button:hover {
color: var(--adp-btn-color-hover);
background: var(--adp-btn-background-color-hover);
}
.air-datepicker-button:focus {
color: var(--adp-btn-color-hover);
background: var(--adp-btn-background-color-hover);
outline: none;
}
.air-datepicker-button:active {
background: var(--adp-btn-background-color-active);
}
.air-datepicker-button span {
outline: none;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.air-datepicker-time {
display: grid;
grid-template-columns: max-content 1fr;
grid-column-gap: 12px;
align-items: center;
position: relative;
padding: 0 var(--adp-time-padding-inner);
}
.-only-timepicker- .air-datepicker-time {
border-top: none;
}
.air-datepicker-time--current {
display: flex;
align-items: center;
flex: 1;
font-size: 14px;
text-align: center;
}
.air-datepicker-time--current-colon {
margin: 0 2px 3px;
line-height: 1;
}
.air-datepicker-time--current-hours, .air-datepicker-time--current-minutes {
line-height: 1;
font-size: 19px;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
z-index: 1;
}
.air-datepicker-time--current-hours:after, .air-datepicker-time--current-minutes:after {
content: "";
background: var(--adp-background-color-hover);
border-radius: var(--adp-border-radius);
position: absolute;
left: -2px;
top: -3px;
right: -2px;
bottom: -2px;
z-index: -1;
opacity: 0;
}
.air-datepicker-time--current-hours.-focus-:after, .air-datepicker-time--current-minutes.-focus-:after {
opacity: 1;
}
.air-datepicker-time--current-ampm {
text-transform: uppercase;
align-self: flex-end;
color: var(--adp-time-day-period-color);
margin-left: 6px;
font-size: 11px;
margin-bottom: 1px;
}
.air-datepicker-time--row {
display: flex;
align-items: center;
font-size: 11px;
height: 17px;
background: linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat;
}
.air-datepicker-time--row:first-child {
margin-bottom: 4px;
}
.air-datepicker-time--row input[type=range] {
background: none;
cursor: pointer;
flex: 1;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
-webkit-appearance: none;
}
.air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.air-datepicker-time--row input[type=range]::-ms-tooltip {
display: none;
}
.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb {
border-color: var(--adp-time-track-color-hover);
}
.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb {
border-color: var(--adp-time-track-color-hover);
}
.air-datepicker-time--row input[type=range]:hover::-ms-thumb {
border-color: var(--adp-time-track-color-hover);
}
.air-datepicker-time--row input[type=range]:focus {
outline: none;
}
.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb {
background: var(--adp-cell-background-color-selected);
border-color: var(--adp-cell-background-color-selected);
}
.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb {
background: var(--adp-cell-background-color-selected);
border-color: var(--adp-cell-background-color-selected);
}
.air-datepicker-time--row input[type=range]:focus::-ms-thumb {
background: var(--adp-cell-background-color-selected);
border-color: var(--adp-cell-background-color-selected);
}
.air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
box-sizing: border-box;
height: 12px;
width: 12px;
border-radius: 3px;
border: 1px solid var(--adp-time-track-color);
background: #fff;
cursor: pointer;
-webkit-transition: background var(--adp-transition-duration);
transition: background var(--adp-transition-duration);
}
.air-datepicker-time--row input[type=range]::-moz-range-thumb {
box-sizing: border-box;
height: 12px;
width: 12px;
border-radius: 3px;
border: 1px solid var(--adp-time-track-color);
background: #fff;
cursor: pointer;
-moz-transition: background var(--adp-transition-duration);
transition: background var(--adp-transition-duration);
}
.air-datepicker-time--row input[type=range]::-ms-thumb {
box-sizing: border-box;
height: 12px;
width: 12px;
border-radius: 3px;
border: 1px solid var(--adp-time-track-color);
background: #fff;
cursor: pointer;
-ms-transition: background var(--adp-transition-duration);
transition: background var(--adp-transition-duration);
}
.air-datepicker-time--row input[type=range]::-webkit-slider-thumb {
margin-top: calc(var(--adp-time-thumb-size) / 2 * -1);
}
.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track {
border: none;
height: var(--adp-time-track-height);
cursor: pointer;
color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
}
.air-datepicker-time--row input[type=range]::-moz-range-track {
border: none;
height: var(--adp-time-track-height);
cursor: pointer;
color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
}
.air-datepicker-time--row input[type=range]::-ms-track {
border: none;
height: var(--adp-time-track-height);
cursor: pointer;
color: rgba(0, 0, 0, 0);
background: rgba(0, 0, 0, 0);
}
.air-datepicker-time--row input[type=range]::-ms-fill-lower {
background: rgba(0, 0, 0, 0);
}
.air-datepicker-time--row input[type=range]::-ms-fill-upper {
background: rgba(0, 0, 0, 0);
}
.air-datepicker {
--adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--adp-font-size: 14px;
--adp-width: 246px;
--adp-z-index: 100;
--adp-padding: 4px;
--adp-grid-areas: "nav" "body" "timepicker" "buttons";
--adp-transition-duration: .3s;
--adp-transition-ease: ease-out;
--adp-transition-offset: 8px;
--adp-background-color: #fff;
--adp-background-color-hover: #f0f0f0;
--adp-background-color-active: #eaeaea;
--adp-background-color-in-range: rgba(92, 196, 239, .1);
--adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
--adp-background-color-selected-other-month-focused: #8ad5f4;
--adp-background-color-selected-other-month: #a2ddf6;
--adp-color: #4a4a4a;
--adp-color-secondary: #9c9c9c;
--adp-accent-color: #4eb5e6;
--adp-color-current-date: var(--adp-accent-color);
--adp-color-other-month: #dedede;
--adp-color-disabled: #aeaeae;
--adp-color-disabled-in-range: #939393;
--adp-color-other-month-hover: #c5c5c5;
--adp-border-color: #dbdbdb;
--adp-border-color-inner: #efefef;
--adp-border-radius: 4px;
--adp-border-color-inline: #d7d7d7;
--adp-nav-height: 32px;
--adp-nav-arrow-color: var(--adp-color-secondary);
--adp-nav-action-size: 32px;
--adp-nav-color-secondary: var(--adp-color-secondary);
--adp-day-name-color: #ff9a19;
--adp-day-name-color-hover: #8ad5f4;
--adp-day-cell-width: 1fr;
--adp-day-cell-height: 32px;
--adp-month-cell-height: 42px;
--adp-year-cell-height: 56px;
--adp-pointer-size: 10px;
--adp-poiner-border-radius: 2px;
--adp-pointer-offset: 14px;
--adp-cell-border-radius: 4px;
--adp-cell-background-color-hover: var(--adp-background-color-hover);
--adp-cell-background-color-selected: #5cc4ef;
--adp-cell-background-color-selected-hover: #45bced;
--adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
--adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
--adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
--adp-btn-height: 32px;
--adp-btn-color: var(--adp-accent-color);
--adp-btn-color-hover: var(--adp-color);
--adp-btn-border-radius: var(--adp-border-radius);
--adp-btn-background-color-hover: var(--adp-background-color-hover);
--adp-btn-background-color-active: var(--adp-background-color-active);
--adp-time-track-height: 1px;
--adp-time-track-color: #dedede;
--adp-time-track-color-hover: #b1b1b1;
--adp-time-thumb-size: 12px;
--adp-time-padding-inner: 10px;
--adp-time-day-period-color: var(--adp-color-secondary);
--adp-mobile-font-size: 16px;
--adp-mobile-nav-height: 40px;
--adp-mobile-width: 320px;
--adp-mobile-day-cell-height: 38px;
--adp-mobile-month-cell-height: 48px;
--adp-mobile-year-cell-height: 64px;
}
.air-datepicker-overlay {
--adp-overlay-background-color: rgba(0, 0, 0, .3);
--adp-overlay-transition-duration: .3s;
--adp-overlay-transition-ease: ease-out;
--adp-overlay-z-index: 99;
}
.air-datepicker {
background: var(--adp-background-color);
border: 1px solid var(--adp-border-color);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: var(--adp-border-radius);
box-sizing: content-box;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(4, max-content);
grid-template-areas: var(--adp-grid-areas);
font-family: var(--adp-font-family), sans-serif;
font-size: var(--adp-font-size);
color: var(--adp-color);
width: var(--adp-width);
position: absolute;
transition: opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease);
z-index: var(--adp-z-index);
}
.air-datepicker:not(.-custom-position-) {
opacity: 0;
}
.air-datepicker.-from-top- {
transform: translateY(calc(var(--adp-transition-offset) * -1));
}
.air-datepicker.-from-right- {
transform: translateX(var(--adp-transition-offset));
}
.air-datepicker.-from-bottom- {
transform: translateY(var(--adp-transition-offset));
}
.air-datepicker.-from-left- {
transform: translateX(calc(var(--adp-transition-offset) * -1));
}
.air-datepicker.-active-:not(.-custom-position-) {
transform: translate(0, 0);
opacity: 1;
}
.air-datepicker.-active-.-custom-position- {
transition: none;
}
.air-datepicker.-inline- {
border-color: var(--adp-border-color-inline);
box-shadow: none;
position: static;
left: auto;
right: auto;
opacity: 1;
transform: none;
}
.air-datepicker.-inline- .air-datepicker--pointer {
display: none;
}
.air-datepicker.-is-mobile- {
--adp-font-size: var(--adp-mobile-font-size);
--adp-day-cell-height: var(--adp-mobile-day-cell-height);
--adp-month-cell-height: var(--adp-mobile-month-cell-height);
--adp-year-cell-height: var(--adp-mobile-year-cell-height);
--adp-nav-height: var(--adp-mobile-nav-height);
--adp-nav-action-size: var(--adp-mobile-nav-height);
position: fixed;
width: var(--adp-mobile-width);
border: none;
}
.air-datepicker.-is-mobile- * {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.air-datepicker.-is-mobile- .air-datepicker--pointer {
display: none;
}
.air-datepicker.-is-mobile-:not(.-custom-position-) {
transform: translate(-50%, calc(-50% + var(--adp-transition-offset)));
}
.air-datepicker.-is-mobile-.-active-:not(.-custom-position-) {
transform: translate(-50%, -50%);
}
.air-datepicker.-custom-position- {
transition: none;
}
.air-datepicker-global-container {
position: absolute;
left: 0;
top: 0;
}
.air-datepicker--pointer {
--pointer-half-size: calc(var(--adp-pointer-size) / 2);
position: absolute;
width: var(--adp-pointer-size);
height: var(--adp-pointer-size);
z-index: -1;
}
.air-datepicker--pointer:after {
content: "";
position: absolute;
background: #fff;
border-top: 1px solid var(--adp-border-color-inline);
border-right: 1px solid var(--adp-border-color-inline);
border-top-right-radius: var(--adp-poiner-border-radius);
width: var(--adp-pointer-size);
height: var(--adp-pointer-size);
box-sizing: border-box;
}
.-top-left- .air-datepicker--pointer, .-top-center- .air-datepicker--pointer, .-top-right- .air-datepicker--pointer, [data-popper-placement^=top] .air-datepicker--pointer {
top: calc(100% - var(--pointer-half-size) + 1px);
}
.-top-left- .air-datepicker--pointer:after, .-top-center- .air-datepicker--pointer:after, .-top-right- .air-datepicker--pointer:after, [data-popper-placement^=top] .air-datepicker--pointer:after {
transform: rotate(135deg);
}
.-right-top- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer, [data-popper-placement^=right] .air-datepicker--pointer {
right: calc(100% - var(--pointer-half-size) + 1px);
}
.-right-top- .air-datepicker--pointer:after, .-right-center- .air-datepicker--pointer:after, .-right-bottom- .air-datepicker--pointer:after, [data-popper-placement^=right] .air-datepicker--pointer:after {
transform: rotate(225deg);
}
.-bottom-left- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer, [data-popper-placement^=bottom] .air-datepicker--pointer {
bottom: calc(100% - var(--pointer-half-size) + 1px);
}
.-bottom-left- .air-datepicker--pointer:after, .-bottom-center- .air-datepicker--pointer:after, .-bottom-right- .air-datepicker--pointer:after, [data-popper-placement^=bottom] .air-datepicker--pointer:after {
transform: rotate(315deg);
}
.-left-top- .air-datepicker--pointer, .-left-center- .air-datepicker--pointer, .-left-bottom- .air-datepicker--pointer, [data-popper-placement^=left] .air-datepicker--pointer {
left: calc(100% - var(--pointer-half-size) + 1px);
}
.-left-top- .air-datepicker--pointer:after, .-left-center- .air-datepicker--pointer:after, .-left-bottom- .air-datepicker--pointer:after, [data-popper-placement^=left] .air-datepicker--pointer:after {
transform: rotate(45deg);
}
.-top-left- .air-datepicker--pointer, .-bottom-left- .air-datepicker--pointer {
left: var(--adp-pointer-offset);
}
.-top-right- .air-datepicker--pointer, .-bottom-right- .air-datepicker--pointer {
right: var(--adp-pointer-offset);
}
.-top-center- .air-datepicker--pointer, .-bottom-center- .air-datepicker--pointer {
left: calc(50% - var(--adp-pointer-size) / 2);
}
.-left-top- .air-datepicker--pointer, .-right-top- .air-datepicker--pointer {
top: var(--adp-pointer-offset);
}
.-left-bottom- .air-datepicker--pointer, .-right-bottom- .air-datepicker--pointer {
bottom: var(--adp-pointer-offset);
}
.-left-center- .air-datepicker--pointer, .-right-center- .air-datepicker--pointer {
top: calc(50% - var(--adp-pointer-size) / 2);
}
.air-datepicker--navigation {
grid-area: nav;
}
.air-datepicker--content {
box-sizing: content-box;
padding: var(--adp-padding);
grid-area: body;
}
.-only-timepicker- .air-datepicker--content {
display: none;
}
.air-datepicker--time {
grid-area: timepicker;
}
.air-datepicker--buttons {
grid-area: buttons;
}
.air-datepicker--buttons, .air-datepicker--time {
padding: var(--adp-padding);
border-top: 1px solid var(--adp-border-color-inner);
}
.air-datepicker-overlay {
position: fixed;
background: var(--adp-overlay-background-color);
left: 0;
top: 0;
width: 0;
height: 0;
opacity: 0;
transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), left 0s, height 0s, width 0s;
transition-delay: 0s, var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration), var(--adp-overlay-transition-duration);
z-index: var(--adp-overlay-z-index);
}
.air-datepicker-overlay.-active- {
opacity: 1;
width: 100%;
height: 100%;
transition: opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease), height 0s, width 0s;
}
.air-datepicker-global-container {
z-index: 1060;
}
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #29d;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes nprogress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#nprogress .bar {
background: var(--tblr-primary);
}
#nprogress .peg {
box-shadow: 0 0 10px var(--primary-light) 0 0 5px var(--primary-dark);
}
#nprogress .spinner {
top: 10px;
right: 18px;
}
#nprogress .spinner-icon {
width: 2rem;
height: 2rem;
border-top-color: var(--tblr-primary);
border-left-color: var(--tblr-primary);
}
.spin-kit {
margin: 100px auto 0;
width: 70px;
text-align: center;
}
.spin-kit > div {
width: 18px;
height: 18px;
background-color: var(--tblr-primary);
border-radius: 100%;
display: inline-block;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spin-kit .bounce1 {
animation-delay: -0.32s;
}
.spin-kit .bounce2 {
animation-delay: -0.16s;
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.turbo-progress-bar {
visibility: hidden;
}
/**
* Selectize (v0.15.2)
* https://selectize.dev
*
* Copyright (c) 2013-2015 Brian Reavis & contributors
* Copyright (c) 2020-2022 Selectize Team & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis
* @author Ris Adams
*/
.selectize-control.plugin-drag_drop.multi > .selectize-input.dragging {
overflow: visible;
}
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: "!";
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header {
position: relative;
padding: 10px 8px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
border-radius: 3px 3px 0 0;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close {
position: absolute;
right: 8px;
top: 50%;
color: #303030;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
text-decoration: none;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover {
color: black;
}
.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content {
display: flex;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button .item {
display: inline-flex;
align-items: center;
padding-right: 0 !important;
}
.selectize-control.plugin-remove_button .item .remove {
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 2px 6px;
border-left: 1px solid #d0d0d0;
border-radius: 0 2px 2px 0;
box-sizing: border-box;
margin-left: 6px;
}
.selectize-control.plugin-remove_button .item .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button .item.active .remove {
border-left-color: #cacaca;
}
.selectize-control.plugin-remove_button .disabled .item .remove:hover {
background: 0;
}
.selectize-control.plugin-remove_button .disabled .item .remove {
border-left-color: white;
}
.selectize-control.plugin-clear_button .clear {
text-decoration: none;
display: flex;
position: absolute;
height: 100%;
width: 25px;
top: 0;
right: 2px;
color: #000;
opacity: 0.4;
font-weight: bold;
border: 0;
cursor: pointer;
z-index: 1;
font-size: 21px;
justify-content: center;
align-items: center;
}
.selectize-control.plugin-clear_button .clear:hover {
opacity: 1;
}
.selectize-control.plugin-clear_button.single .clear {
right: calc(2px + 1.5rem);
}
.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid #d0d0d0;
border-bottom: 0 none;
border-radius: 3px 3px 0 0;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.18);
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: 0 0 3px 3px;
border-top: 0 none;
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before {
top: 0;
bottom: unset;
}
.selectize-control {
position: relative;
}
.selectize-dropdown, .selectize-input, .selectize-input input {
color: #303030;
font-family: inherit;
font-size: 13px;
line-height: 18px;
font-smoothing: inherit;
}
.selectize-input, .selectize-control.single .selectize-input.input-active {
background: #fff;
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #d0d0d0;
padding: 8px 8px;
display: inline-block;
width: 100%;
position: relative;
z-index: 1;
box-sizing: border-box;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.selectize-control.multi .selectize-input.has-items {
padding: 6px 8px 3px;
}
.selectize-input.full {
background-color: #fff;
}
.selectize-input.disabled, .selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.focus {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
border-radius: 3px 3px 0 0;
}
.selectize-input > * {
vertical-align: baseline;
display: inline-block;
zoom: 1;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 2px 6px;
background: #f2f2f2;
color: #303030;
border: 0 solid #d0d0d0;
}
.selectize-control.multi .selectize-input > div.active {
background: #e8e8e8;
color: #303030;
border: 0 solid #cacaca;
}
.selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active {
color: #7d7d7d;
background: white;
border: 0 solid white;
}
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
user-select: auto !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input > input[placeholder] {
box-sizing: initial;
}
.selectize-input.has-items > input {
margin: 0 0 !important;
}
.selectize-input::after {
content: " ";
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: " ";
display: block;
position: absolute;
background: #f0f0f0;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 10;
border: 1px solid #d0d0d0;
background: #fff;
margin: -1px 0 0 0;
border-top: 0 none;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 0 0 3px 3px;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
background: rgba(125, 168, 208, 0.2);
border-radius: 1px;
}
.selectize-dropdown .option, .selectize-dropdown .optgroup-header, .selectize-dropdown .no-results, .selectize-dropdown .create {
padding: 5px 8px;
}
.selectize-dropdown .option, .selectize-dropdown [data-disabled], .selectize-dropdown [data-disabled] [data-selectable].option {
cursor: inherit;
opacity: 0.5;
}
.selectize-dropdown [data-selectable].option {
opacity: 1;
cursor: pointer;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #303030;
background: #fff;
cursor: default;
}
.selectize-dropdown .active {
background-color: #e8e8e8;
color: #303030;
}
.selectize-dropdown .active.create {
color: #495c68;
}
.selectize-dropdown .selected {
background-color: #e8e8e8;
color: #303030;
}
.selectize-dropdown .create {
color: rgba(48, 48, 48, 0.5);
}
.selectize-dropdown .active:not(.selected) {
background: #f5fafd;
color: #495c68;
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
overflow-scrolling: touch;
}
.selectize-dropdown-emptyoptionlabel {
text-align: center;
}
.selectize-dropdown .spinner {
display: inline-block;
width: 30px;
height: 30px;
margin: 5px 8px;
}
.selectize-dropdown .spinner:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 3px;
border-radius: 50%;
border: 5px solid #d0d0d0;
border-color: #d0d0d0 transparent #d0d0d0 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input:not(:read-only) {
cursor: text;
}
.selectize-control.single .selectize-input:after {
content: " ";
display: block;
position: absolute;
top: 50%;
right: 15px;
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #808080 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #808080 transparent;
}
.selectize-control.rtl {
text-align: right;
}
.selectize-control.rtl.single .selectize-input:after {
left: 15px;
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #fafafa;
}
.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid #d0d0d0;
border-bottom: 0 none;
border-radius: 3px 3px 0 0;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.18);
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: 0 0 3px 3px;
border-top: 0 none;
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before {
top: 0;
bottom: unset;
}
.selectize-control.plugin-clear_button .clear {
text-decoration: none;
display: flex;
position: absolute;
height: 100%;
width: 25px;
top: 0;
right: 2px;
color: #000;
opacity: 0.4;
font-weight: bold;
border: 0;
cursor: pointer;
z-index: 1;
font-size: 21px;
justify-content: center;
align-items: center;
}
.selectize-control.plugin-clear_button .clear:hover {
opacity: 1;
}
.selectize-control.plugin-clear_button.single .clear {
right: calc(2px + 1.5rem);
}
.selectize-control.plugin-drag_drop.multi > .selectize-input.dragging {
overflow: visible;
}
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: "!";
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header {
position: relative;
padding: 10px 8px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
border-radius: 3px 3px 0 0;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close {
position: absolute;
right: 8px;
top: 50%;
color: #303030;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
text-decoration: none;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover {
color: black;
}
.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content {
display: flex;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button .item {
display: inline-flex;
align-items: center;
padding-right: 0 !important;
}
.selectize-control.plugin-remove_button .item .remove {
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 2px 6px;
border-left: 1px solid #d0d0d0;
border-radius: 0 2px 2px 0;
box-sizing: border-box;
margin-left: 6px;
}
.selectize-control.plugin-remove_button .item .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button .item.active .remove {
border-left-color: #cacaca;
}
.selectize-control.plugin-remove_button .disabled .item .remove:hover {
background: 0;
}
.selectize-control.plugin-remove_button .disabled .item .remove {
border-left-color: white;
}
/**
* Selectize (v0.15.2)
* https://selectize.dev
*
* Copyright (c) 2013-2015 Brian Reavis & contributors
* Copyright (c) 2020-2022 Selectize Team & contributors
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
* file except in compliance with the License. You may obtain a copy of the License at:
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
* ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*
* @author Brian Reavis
* @author Ris Adams
*/
.selectize-control.plugin-drag_drop.multi > .selectize-input.dragging {
overflow: visible;
}
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: "!";
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header {
position: relative;
padding: 6px 0.75rem;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
border-radius: 0.375rem 0.375rem 0 0;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close {
position: absolute;
right: 0.75rem;
top: 50%;
color: #343a40;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
text-decoration: none;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover {
color: black;
}
.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content {
display: flex;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button .item {
display: inline-flex;
align-items: center;
padding-right: 0 !important;
}
.selectize-control.plugin-remove_button .item .remove {
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 1px 5px;
border-left: 1px solid #dee2e6;
border-radius: 0 2px 2px 0;
box-sizing: border-box;
margin-left: 5px;
}
.selectize-control.plugin-remove_button .item .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button .item.active .remove {
border-left-color: rgba(0, 0, 0, 0);
}
.selectize-control.plugin-remove_button .disabled .item .remove:hover {
background: 0;
}
.selectize-control.plugin-remove_button .disabled .item .remove {
border-left-color: white;
}
.selectize-control.plugin-clear_button .clear {
text-decoration: none;
display: flex;
position: absolute;
height: 100%;
width: 25px;
top: 0;
right: calc(0.75rem - 5px);
color: #000;
opacity: 0.4;
font-weight: bold;
border: 0;
cursor: pointer;
z-index: 1;
font-size: 21px;
justify-content: center;
align-items: center;
}
.selectize-control.plugin-clear_button .clear:hover {
opacity: 1;
}
.selectize-control.plugin-clear_button.single .clear {
right: calc(0.75rem - 5px + 1.5rem);
}
.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid #d0d0d0;
border-bottom: 0 none;
border-radius: 3px 3px 0 0;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.18);
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: 0 0 3px 3px;
border-top: 0 none;
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before {
top: 0;
bottom: unset;
}
.selectize-control {
position: relative;
}
.selectize-dropdown, .selectize-input, .selectize-input input {
color: #343a40;
font-family: inherit;
font-size: inherit;
line-height: 1.5;
font-smoothing: inherit;
}
.selectize-input, .selectize-control.single .selectize-input.input-active {
background: #fff;
cursor: text;
display: inline-block;
}
.selectize-input {
border: 1px solid #ced4da;
padding: 0.375rem 0.75rem;
display: inline-block;
width: 100%;
position: relative;
z-index: 1;
box-sizing: border-box;
box-shadow: none;
border-radius: 0.375rem;
}
.selectize-control.multi .selectize-input.has-items {
padding: calc(0.375rem - 1px - 0px) 0.75rem calc(0.375rem - 1px - 3px - 0px);
}
.selectize-input.full {
background-color: #fff;
}
.selectize-input.disabled, .selectize-input.disabled * {
cursor: default !important;
}
.selectize-input.focus {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.selectize-input.dropdown-active {
border-radius: 0.375rem 0.375rem 0 0;
}
.selectize-input > * {
vertical-align: baseline;
display: inline-block;
zoom: 1;
}
.selectize-control.multi .selectize-input > div {
cursor: pointer;
margin: 0 3px 3px 0;
padding: 1px 5px;
background: #efefef;
color: #343a40;
border: 0 solid #dee2e6;
}
.selectize-control.multi .selectize-input > div.active {
background: #0d6efd;
color: #fff;
border: 0 solid rgba(0, 0, 0, 0);
}
.selectize-control.multi .selectize-input.disabled > div, .selectize-control.multi .selectize-input.disabled > div.active {
color: #878787;
background: white;
border: 0 solid white;
}
.selectize-input > input {
display: inline-block !important;
padding: 0 !important;
min-height: 0 !important;
max-height: none !important;
max-width: 100% !important;
margin: 0 !important;
text-indent: 0 !important;
border: 0 none !important;
background: none !important;
line-height: inherit !important;
user-select: auto !important;
box-shadow: none !important;
}
.selectize-input > input::-ms-clear {
display: none;
}
.selectize-input > input:focus {
outline: none !important;
}
.selectize-input > input[placeholder] {
box-sizing: initial;
}
.selectize-input.has-items > input {
margin: 0 0 !important;
}
.selectize-input::after {
content: " ";
display: block;
clear: left;
}
.selectize-input.dropdown-active::before {
content: " ";
display: block;
position: absolute;
background: #d8dde1;
height: 1px;
bottom: 0;
left: 0;
right: 0;
}
.selectize-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 10;
border: 1px solid #d0d0d0;
background: #fff;
margin: -1px 0 0 0;
border-top: 0 none;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-radius: 0 0 0.375rem 0.375rem;
}
.selectize-dropdown [data-selectable] {
cursor: pointer;
overflow: hidden;
}
.selectize-dropdown [data-selectable] .highlight {
background: rgba(255, 237, 40, 0.4);
border-radius: 1px;
}
.selectize-dropdown .option, .selectize-dropdown .optgroup-header, .selectize-dropdown .no-results, .selectize-dropdown .create {
padding: 3px 0.75rem;
}
.selectize-dropdown .option, .selectize-dropdown [data-disabled], .selectize-dropdown [data-disabled] [data-selectable].option {
cursor: inherit;
opacity: 0.5;
}
.selectize-dropdown [data-selectable].option {
opacity: 1;
cursor: pointer;
}
.selectize-dropdown .optgroup:first-child .optgroup-header {
border-top: 0 none;
}
.selectize-dropdown .optgroup-header {
color: #6c757d;
background: #fff;
cursor: default;
}
.selectize-dropdown .active {
background-color: #0d6efd;
color: #fff;
}
.selectize-dropdown .active.create {
color: #1e2125;
}
.selectize-dropdown .selected {
background-color: #0d6efd;
color: #fff;
}
.selectize-dropdown .create {
color: rgba(52, 58, 64, 0.5);
}
.selectize-dropdown .active:not(.selected) {
background: #e9ecef;
color: #1e2125;
}
.selectize-dropdown-content {
overflow-y: auto;
overflow-x: hidden;
max-height: 200px;
overflow-scrolling: touch;
}
.selectize-dropdown-emptyoptionlabel {
text-align: center;
}
.selectize-dropdown .spinner {
display: inline-block;
width: 30px;
height: 30px;
margin: 3px 0.75rem;
}
.selectize-dropdown .spinner:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 3px;
border-radius: 50%;
border: 5px solid #d0d0d0;
border-color: #d0d0d0 transparent #d0d0d0 transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
cursor: pointer;
}
.selectize-control.single .selectize-input.input-active, .selectize-control.single .selectize-input.input-active input:not(:read-only) {
cursor: text;
}
.selectize-control.single .selectize-input:after {
content: " ";
display: block;
position: absolute;
top: 50%;
right: calc(0.75rem + 5px);
margin-top: -3px;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #343a40 transparent transparent transparent;
}
.selectize-control.single .selectize-input.dropdown-active:after {
margin-top: -4px;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #343a40 transparent;
}
.selectize-control.rtl {
text-align: right;
}
.selectize-control.rtl.single .selectize-input:after {
left: calc(0.75rem + 5px);
right: auto;
}
.selectize-control.rtl .selectize-input > input {
margin: 0 4px 0 -2px !important;
}
.selectize-control .selectize-input.disabled {
opacity: 0.5;
background-color: #fff;
}
.selectize-dropdown, .selectize-dropdown.form-control {
height: auto;
padding: 0;
margin: 2px 0 0 0;
z-index: 1000;
background: #fff;
border: 1px solid var(--bs-border-color-translucent);
border-radius: 0.375rem;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.selectize-dropdown .optgroup-header {
font-size: 0.875rem;
line-height: 1.5;
}
.selectize-dropdown .optgroup:first-child:before {
display: none;
}
.selectize-dropdown .optgroup:before {
content: " ";
display: block;
height: 0;
margin: 0.5rem 0;
overflow: hidden;
border-top: 1px solid var(--bs-border-color-translucent);
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.selectize-dropdown .create {
padding-left: 0.75rem;
}
.selectize-dropdown-content {
padding: 5px 0;
}
.selectize-dropdown-emptyoptionlabel {
text-align: center;
}
.selectize-input {
min-height: calc(1.5em + 0.75rem + 2px);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.selectize-input {
transition: none;
}
}
.selectize-input.dropdown-active {
border-radius: 0.375rem;
}
.selectize-input.dropdown-active::before {
display: none;
}
.selectize-input.focus {
border-color: #86b7fe;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.is-invalid .selectize-input {
border-color: #dc3545;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.is-invalid .selectize-input:focus {
border-color: #bd2130;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #eb8c95;
}
.selectize-control.form-control-sm .selectize-input {
min-height: calc(1.5em + 0.5rem + 2px) !important;
height: calc(1.5em + 0.5rem + 2px);
padding: 0.25rem 0.5rem !important;
font-size: 0.875rem;
line-height: 1.25;
}
.selectize-control.multi .selectize-input {
height: auto;
padding-left: calc(0.75rem - 5px);
padding-right: calc(0.75rem - 5px);
}
.selectize-control.multi .selectize-input > div {
border-radius: calc(0.375rem - 1px);
}
.form-select.selectize-control, .selectize-control > .selectize-control.selectize-input, .form-control.selectize-control {
padding: 0;
height: auto;
border: 0;
background: 0;
box-shadow: none;
border-radius: 0;
}
.input-group > .input-group-append > .btn, .input-group > .form-control:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group > .input-group-prepend > .btn {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .selectize-control:not(:last-child) .selectize-input {
overflow: unset;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group .selectize-control:not(:first-child) .selectize-input {
overflow: unset;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid #ced4da !important;
border-bottom: 1px solid #ced4da !important;
border-radius: 0.375rem !important;
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: 0.375rem !important;
border-top: 1px solid #ced4da !important;
}
.selectize-dropdown.plugin-auto_position.selectize-position-top {
border-top: 1px solid #d0d0d0;
border-bottom: 0 none;
border-radius: 3px 3px 0 0;
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.18);
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active {
border-radius: 0 0 3px 3px;
border-top: 0 none;
}
.selectize-control.plugin-auto_position .selectize-input.selectize-position-top.dropdown-active::before {
top: 0;
bottom: unset;
}
.selectize-control.plugin-clear_button .clear {
text-decoration: none;
display: flex;
position: absolute;
height: 100%;
width: 25px;
top: 0;
right: calc(0.75rem - 5px);
color: #000;
opacity: 0.4;
font-weight: bold;
border: 0;
cursor: pointer;
z-index: 1;
font-size: 21px;
justify-content: center;
align-items: center;
}
.selectize-control.plugin-clear_button .clear:hover {
opacity: 1;
}
.selectize-control.plugin-clear_button.single .clear {
right: calc(0.75rem - 5px + 1.5rem);
}
.selectize-control.plugin-drag_drop.multi > .selectize-input.dragging {
overflow: visible;
}
.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
visibility: visible !important;
background: #f2f2f2 !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
box-shadow: inset 0 0 12px 4px #fff;
}
.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
content: "!";
visibility: hidden;
}
.selectize-control.plugin-drag_drop .ui-sortable-helper {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header {
position: relative;
padding: 6px 0.75rem;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
border-radius: 0.375rem 0.375rem 0 0;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close {
position: absolute;
right: 0.75rem;
top: 50%;
color: #343a40;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
text-decoration: none;
}
.selectize-dropdown.plugin-dropdown_header .selectize-dropdown-header-close:hover {
color: black;
}
.selectize-dropdown.plugin-optgroup_columns .selectize-dropdown-content {
display: flex;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup {
border-right: 1px solid #f2f2f2;
border-top: 0 none;
flex-grow: 1;
flex-basis: 0;
min-width: 0;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
border-right: 0 none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
display: none;
}
.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
border-top: 0 none;
}
.selectize-control.plugin-remove_button .item {
display: inline-flex;
align-items: center;
padding-right: 0 !important;
}
.selectize-control.plugin-remove_button .item .remove {
color: inherit;
text-decoration: none;
vertical-align: middle;
display: inline-block;
padding: 1px 5px;
border-left: 1px solid #dee2e6;
border-radius: 0 2px 2px 0;
box-sizing: border-box;
margin-left: 5px;
}
.selectize-control.plugin-remove_button .item .remove:hover {
background: rgba(0, 0, 0, 0.05);
}
.selectize-control.plugin-remove_button .item.active .remove {
border-left-color: rgba(0, 0, 0, 0);
}
.selectize-control.plugin-remove_button .disabled .item .remove:hover {
background: 0;
}
.selectize-control.plugin-remove_button .disabled .item .remove {
border-left-color: white;
}
.selectize-input {
color: inherit;
}
.selectize-control {
color: inherit;
}
.selectize-control .dropdown-menu {
width: 100%;
height: auto;
background-color: var(--tblr-dropdown-bg) !important;
}
.selectize-control {
padding: 0;
border: 0;
height: auto;
}
.selectize-control-lg .selectize-input {
min-height: calc(1em + 1rem + var(--tblr-border-width) * 2);
}
.selectize-control-lg .selectize-input > input {
height: calc(1em + 1rem + var(--tblr-border-width) * 2);
font-size: 1rem;
border-radius: var(--tblr-border-radius-lg);
}
.selectize-control > .selectize-input {
border: none;
border-radius: 0;
outline: none;
box-shadow: inset 0 -1px 0 #ddd;
transition: box-shadow 0.2s;
}
.selectize-control > .selectize-input.focus {
border-color: inherit !important;
outline: none;
box-shadow: inset 0 -2px 0 var(--tblr-primary);
}
.selectize-input.focus {
border-color: inherit !important;
outline: none !important;
box-shadow: inset 0 -2px 0 var(--tblr-primary) !important;
}
.selectize-input::after {
display: none !important;
}
.selectize-dropdown .option {
opacity: initial;
}
.selectize-input,
.selectize-control.single .selectize-input.input-active,
.selectize-input.full,
.selectize-dropdown,
.selectize-dropdown.form-control {
color: var(--tblr-body-color);
background: var(--tblr-dropdown-bg);
background-color: inherit;
}
.selectize-control.form-control.form-select:not(select):read-only, .selectize-control > .selectize-control.form-control.selectize-input:not(select):read-only {
background: inherit;
background-color: inherit;
}
.selectize-dropdown .selected {
background-color: var(--tblr-bg-primary);
color: var(--tblr-body-color);
}
.selectize-dropdown .active:not(.selected) {
background: var(--tblr-dropdown-link-hover-bg);
color: var(--tblr-dropdown-link-hover-color);
}
.selectize-dropdown .option {
padding: var(--tblr-dropdown-item-padding-y) var(--tblr-dropdown-item-padding-x);
color: var(--tblr-dropdown-link-color);
}
.disable-select {
pointer-events: none;
background: #f2f2f2;
}
.selectize-plugin-select-remove-all-options.btn-group {
z-index: 3;
right: 0;
margin: 6px;
position: absolute;
top: 0;
}
.selectize-dropdown .option {
display: block;
gap: initial;
}
.offcanvas {
z-index: 1057 !important;
border-radius: 1rem 1rem 0 0;
}
.offcanvas-backdrop.show {
z-index: 1056 !important;
}
.offcanvas-size-xl {
max-width: 998px !important;
width: 100% !important;
}
.offcanvas-size-lg {
max-width: 798px !important;
width: 100% !important;
}
.offcanvas-size-md {
max-width: 600px !important;
width: 100% !important;
}
.offcanvas-size-sm {
max-width: 400px !important;
width: 100% !important;
}
.offcanvas-scrollable .offcanvas-body {
max-height: calc(100vh - 3rem);
overflow-y: auto;
padding: var(--tblr-offcanvas-padding-y) var(--tblr-offcanvas-padding-x) !important;
height: calc(100vh - 9rem);
overflow-x: hidden;
}
.offcanvas-content {
height: 100vh;
}
.offcanvas-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
@supports (view-transition-name: none) {
::view-transition-old(root) {
animation: pageFadeOut 0.3s ease-in-out forwards;
}
::view-transition-new(root) {
animation: pageFadeIn 0.3s ease-in-out forwards;
}
}
.page-wrapper {
animation: fadeIn 0.3s ease-in-out;
}
header.navbar,
.navbar-tabs.sub-navbar {
animation: none !important;
transition: none !important;
}
@keyframes pageFadeOut {
from {
opacity: 1;
}
to {
opacity: 0.7;
}
}
@keyframes pageFadeIn {
from {
opacity: 0.7;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
[data-turbo-temporary],
.turbo-progress-bar {
transition: all 0.3s ease-in-out;
}
.page-body {
animation: fadeIn 0.3s ease-in-out;
}
header.navbar,
.navbar-tabs.sub-navbar {
animation: none !important;
transition: none !important;
}
}
.page-wrapper section,
.page-wrapper .card,
.page-wrapper .list-group-item {
animation: fadeInUp 0.4s ease-out forwards;
animation-fill-mode: both;
}
.page-wrapper section:nth-child(1),
.page-wrapper .card:nth-child(1),
.page-wrapper .list-group-item:nth-child(1) {
animation-delay: 0.05s;
}
.page-wrapper section:nth-child(2),
.page-wrapper .card:nth-child(2),
.page-wrapper .list-group-item:nth-child(2) {
animation-delay: 0.1s;
}
.page-wrapper section:nth-child(3),
.page-wrapper .card:nth-child(3),
.page-wrapper .list-group-item:nth-child(3) {
animation-delay: 0.15s;
}
.page-wrapper section:nth-child(4),
.page-wrapper .card:nth-child(4),
.page-wrapper .list-group-item:nth-child(4) {
animation-delay: 0.2s;
}
.page-wrapper section:nth-child(5),
.page-wrapper .card:nth-child(5),
.page-wrapper .list-group-item:nth-child(5) {
animation-delay: 0.25s;
}
.page-wrapper section:nth-child(6),
.page-wrapper .card:nth-child(6),
.page-wrapper .list-group-item:nth-child(6) {
animation-delay: 0.3s;
}
.page-wrapper section:nth-child(7),
.page-wrapper .card:nth-child(7),
.page-wrapper .list-group-item:nth-child(7) {
animation-delay: 0.35s;
}
.page-wrapper section:nth-child(8),
.page-wrapper .card:nth-child(8),
.page-wrapper .list-group-item:nth-child(8) {
animation-delay: 0.4s;
}
.page-wrapper section:nth-child(9),
.page-wrapper .card:nth-child(9),
.page-wrapper .list-group-item:nth-child(9) {
animation-delay: 0.45s;
}
.page-wrapper section:nth-child(10),
.page-wrapper .card:nth-child(10),
.page-wrapper .list-group-item:nth-child(10) {
animation-delay: 0.5s;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal.show {
animation: modalSlideUp 0.3s ease-out forwards;
}
@keyframes modalSlideUp {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (min-width: 992px) {
.bg-docs-gradient {
background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--tblr-primary) 4%, transparent), transparent 80%) no-repeat 0 0/800px 800px !important;
}
}
.docs-content h1, .docs-content .h1 {
font-size: 1.75rem;
border-bottom: 3px solid var(--tblr-primary);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.docs-content h2, .docs-content .h2 {
font-size: 1.3rem;
color: var(--tblr-primary);
margin-top: 2rem;
margin-bottom: 0.75rem;
border-bottom: 1px solid var(--tblr-border-color);
padding-bottom: 0.25rem;
}
.docs-content h3, .docs-content .h3 {
font-size: 1.05rem;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
}
.docs-content p, .docs-content li {
font-size: 0.95rem;
line-height: 1.6;
}
.docs-content ol, .docs-content ul {
padding-left: 1.5rem;
margin-bottom: 1rem;
}
.docs-content li {
margin-bottom: 0.35rem;
}
.docs-content table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
font-size: 0.9rem;
}
.docs-content table th, .docs-content table td {
border: 1px solid var(--tblr-border-color);
padding: 0.5rem 0.75rem;
text-align: left;
}
.docs-content table th {
background: var(--tblr-bg-surface-secondary);
font-weight: 600;
}
.docs-content blockquote {
background: rgba(var(--tblr-primary-rgb), 0.05);
border-left: 4px solid var(--tblr-primary);
padding: 0.75rem 1rem;
border-radius: 0 6px 6px 0;
margin: 1rem 0;
font-size: 0.9rem;
}
.docs-content blockquote p {
margin-bottom: 0;
}
.docs-content .screenshot-placeholder {
border: 2px dashed var(--tblr-border-color);
border-radius: 6px;
padding: 3rem 1rem;
text-align: center;
color: var(--tblr-secondary);
font-size: 0.85rem;
margin: 1rem 0;
background: var(--tblr-bg-surface-secondary);
}
.docs-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 1rem 0;
border: 1px solid var(--tblr-border-color);
}
.docs-toc {
top: 7.5rem;
}
.docs-toc .docs-toc-list {
max-height: calc(100vh - 10rem);
overflow-y: auto;
}
.docs-toc .docs-toc-item {
border-left: 2px solid transparent;
}
.docs-toc .docs-toc-link {
display: block;
padding: 0.35rem 0.75rem;
font-size: 0.85rem;
color: var(--tblr-secondary);
text-decoration: none;
transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.docs-toc .docs-toc-link:hover {
color: var(--tblr-body-color);
background-color: rgba(var(--tblr-primary-rgb), 0.04);
}
.docs-toc .docs-toc-link.active {
color: var(--tblr-primary);
font-weight: 600;
}
.docs-toc .docs-toc-item.docs-toc-level-1 {
border-left-color: var(--tblr-border-color);
}
.docs-toc .docs-toc-item.docs-toc-level-1 .docs-toc-link {
font-weight: 600;
font-size: 0.9rem;
}
.docs-toc .docs-toc-item.docs-toc-level-1 .docs-toc-link.active {
border-left: none;
}
.docs-toc .docs-toc-item.docs-toc-level-2 {
border-left-color: var(--tblr-border-color);
}
.docs-toc .docs-toc-item.docs-toc-level-2 .docs-toc-link {
padding-left: 1.25rem;
}
.docs-toc .docs-toc-item.docs-toc-level-3 .docs-toc-link {
padding-left: 2rem;
font-size: 0.8rem;
}
.docs-toc .docs-toc-item:has(> .docs-toc-link.active) {
border-left-color: var(--tblr-primary);
}
/*!
* animate.css - https://animate.style/
* Version - 4.1.1
* Licensed under the MIT license - http://opensource.org/licenses/MIT
*
* Copyright (c) 2020 Animate.css
*/
:root {
--animate-duration: 1s;
--animate-delay: 1s;
--animate-repeat: 1;
}
.animate__animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-duration: var(--animate-duration);
animation-duration: var(--animate-duration);
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animate__animated.animate__infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-iteration-count: var(--animate-repeat);
animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
-webkit-animation-iteration-count: 2;
animation-iteration-count: 2;
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
-webkit-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-delay: var(--animate-delay);
animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-delay: calc(var(--animate-delay) * 2);
animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
-webkit-animation-delay: 3s;
animation-delay: 3s;
-webkit-animation-delay: calc(var(--animate-delay) * 3);
animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
-webkit-animation-delay: 4s;
animation-delay: 4s;
-webkit-animation-delay: calc(var(--animate-delay) * 4);
animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
-webkit-animation-delay: 5s;
animation-delay: 5s;
-webkit-animation-delay: calc(var(--animate-delay) * 5);
animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-duration: calc(var(--animate-duration) / 2);
animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
-webkit-animation-duration: 0.8s;
animation-duration: 0.8s;
-webkit-animation-duration: calc(var(--animate-duration) * 0.8);
animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-duration: calc(var(--animate-duration) * 2);
animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-duration: calc(var(--animate-duration) * 3);
animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
.animate__animated {
-webkit-animation-duration: 1ms !important;
animation-duration: 1ms !important;
-webkit-transition-duration: 1ms !important;
transition-duration: 1ms !important;
-webkit-animation-iteration-count: 1 !important;
animation-iteration-count: 1 !important;
}
.animate__animated[class*=Out] {
opacity: 0;
}
}
/* Attention seekers */
@-webkit-keyframes bounce {
from, 20%, 53%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
@keyframes bounce {
from, 20%, 53%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
40%, 43% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
transform: translate3d(0, -30px, 0) scaleY(1.1);
}
70% {
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
transform: translate3d(0, -15px, 0) scaleY(1.05);
}
80% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
transform: translate3d(0, 0, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
transform: translate3d(0, -4px, 0) scaleY(1.02);
}
}
.animate__bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.animate__flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes rubberBand {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
30% {
-webkit-transform: scale3d(1.25, 0.75, 1);
transform: scale3d(1.25, 0.75, 1);
}
40% {
-webkit-transform: scale3d(0.75, 1.25, 1);
transform: scale3d(0.75, 1.25, 1);
}
50% {
-webkit-transform: scale3d(1.15, 0.85, 1);
transform: scale3d(1.15, 0.85, 1);
}
65% {
-webkit-transform: scale3d(0.95, 1.05, 1);
transform: scale3d(0.95, 1.05, 1);
}
75% {
-webkit-transform: scale3d(1.05, 0.95, 1);
transform: scale3d(1.05, 0.95, 1);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__rubberBand {
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shakeX {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
.animate__shakeX {
-webkit-animation-name: shakeX;
animation-name: shakeX;
}
@-webkit-keyframes shakeY {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
}
@keyframes shakeY {
from, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
20%, 40%, 60%, 80% {
-webkit-transform: translate3d(0, 10px, 0);
transform: translate3d(0, 10px, 0);
}
}
.animate__shakeY {
-webkit-animation-name: shakeY;
animation-name: shakeY;
}
@-webkit-keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.animate__headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);
transform: rotate3d(0, 0, 1, 15deg);
}
40% {
-webkit-transform: rotate3d(0, 0, 1, -10deg);
transform: rotate3d(0, 0, 1, -10deg);
}
60% {
-webkit-transform: rotate3d(0, 0, 1, 5deg);
transform: rotate3d(0, 0, 1, 5deg);
}
80% {
-webkit-transform: rotate3d(0, 0, 1, -5deg);
transform: rotate3d(0, 0, 1, -5deg);
}
to {
-webkit-transform: rotate3d(0, 0, 1, 0deg);
transform: rotate3d(0, 0, 1, 0deg);
}
}
.animate__swing {
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes tada {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes wobble {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
15% {
-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
}
30% {
-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
}
45% {
-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
}
60% {
-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
}
75% {
-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes jello {
from, 11.1%, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
@keyframes jello {
from, 11.1%, to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
22.2% {
-webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
transform: skewX(-12.5deg) skewY(-12.5deg);
}
33.3% {
-webkit-transform: skewX(6.25deg) skewY(6.25deg);
transform: skewX(6.25deg) skewY(6.25deg);
}
44.4% {
-webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
transform: skewX(-3.125deg) skewY(-3.125deg);
}
55.5% {
-webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
transform: skewX(1.5625deg) skewY(1.5625deg);
}
66.6% {
-webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
transform: skewX(-0.78125deg) skewY(-0.78125deg);
}
77.7% {
-webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
transform: skewX(0.390625deg) skewY(0.390625deg);
}
88.8% {
-webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
}
}
.animate__jello {
-webkit-animation-name: jello;
animation-name: jello;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes heartBeat {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
14% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
28% {
-webkit-transform: scale(1);
transform: scale(1);
}
42% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
70% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
.animate__heartBeat {
-webkit-animation-name: heartBeat;
animation-name: heartBeat;
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-duration: calc(var(--animate-duration) * 1.3);
animation-duration: calc(var(--animate-duration) * 1.3);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
0% {
-webkit-transform: translateY(-1200px) scale(0.7);
transform: translateY(-1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInDown {
0% {
-webkit-transform: translateY(-1200px) scale(0.7);
transform: translateY(-1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInDown {
-webkit-animation-name: backInDown;
animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
0% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInLeft {
0% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInLeft {
-webkit-animation-name: backInLeft;
animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
0% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInRight {
0% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInRight {
-webkit-animation-name: backInRight;
animation-name: backInRight;
}
@-webkit-keyframes backInUp {
0% {
-webkit-transform: translateY(1200px) scale(0.7);
transform: translateY(1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes backInUp {
0% {
-webkit-transform: translateY(1200px) scale(0.7);
transform: translateY(1200px) scale(0.7);
opacity: 0.7;
}
80% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
.animate__backInUp {
-webkit-animation-name: backInUp;
animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(700px) scale(0.7);
transform: translateY(700px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutDown {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(700px) scale(0.7);
transform: translateY(700px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutDown {
-webkit-animation-name: backOutDown;
animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutLeft {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(-2000px) scale(0.7);
transform: translateX(-2000px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutLeft {
-webkit-animation-name: backOutLeft;
animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutRight {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateX(0px) scale(0.7);
transform: translateX(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateX(2000px) scale(0.7);
transform: translateX(2000px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutRight {
-webkit-animation-name: backOutRight;
animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(-700px) scale(0.7);
transform: translateY(-700px) scale(0.7);
opacity: 0.7;
}
}
@keyframes backOutUp {
0% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
20% {
-webkit-transform: translateY(0px) scale(0.7);
transform: translateY(0px) scale(0.7);
opacity: 0.7;
}
100% {
-webkit-transform: translateY(-700px) scale(0.7);
transform: translateY(-700px) scale(0.7);
opacity: 0.7;
}
}
.animate__backOutUp {
-webkit-animation-name: backOutUp;
animation-name: backOutUp;
}
/* Bouncing entrances */
@-webkit-keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.animate__bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
animation-duration: calc(var(--animate-duration) * 0.75);
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
transform: translate3d(0, -3000px, 0) scaleY(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
transform: translate3d(0, 25px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
transform: translate3d(0, -10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
transform: translate3d(0, 5px, 0) scaleY(0.985);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
transform: translate3d(-3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0) scaleX(1);
transform: translate3d(25px, 0, 0) scaleX(1);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
transform: translate3d(-10px, 0, 0) scaleX(0.98);
}
90% {
-webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
transform: translate3d(5px, 0, 0) scaleX(0.995);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInLeft {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
transform: translate3d(-3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0) scaleX(1);
transform: translate3d(25px, 0, 0) scaleX(1);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
transform: translate3d(-10px, 0, 0) scaleX(0.98);
}
90% {
-webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
transform: translate3d(5px, 0, 0) scaleX(0.995);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
transform: translate3d(3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
transform: translate3d(-25px, 0, 0) scaleX(1);
}
75% {
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
transform: translate3d(10px, 0, 0) scaleX(0.98);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
transform: translate3d(-5px, 0, 0) scaleX(0.995);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInRight {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
transform: translate3d(3000px, 0, 0) scaleX(3);
}
60% {
opacity: 1;
-webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
transform: translate3d(-25px, 0, 0) scaleX(1);
}
75% {
-webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
transform: translate3d(10px, 0, 0) scaleX(0.98);
}
90% {
-webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
transform: translate3d(-5px, 0, 0) scaleX(0.995);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
transform: translate3d(0, 3000px, 0) scaleY(5);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
transform: translate3d(0, 10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
transform: translate3d(0, -5px, 0) scaleY(0.985);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes bounceInUp {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
from {
opacity: 0;
-webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
transform: translate3d(0, 3000px, 0) scaleY(5);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
75% {
-webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
transform: translate3d(0, 10px, 0) scaleY(0.95);
}
90% {
-webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
transform: translate3d(0, -5px, 0) scaleY(0.985);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
/* Bouncing exits */
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
.animate__bounceOut {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
animation-duration: calc(var(--animate-duration) * 0.75);
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
transform: translate3d(0, 10px, 0) scaleY(0.985);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
transform: translate3d(0, 2000px, 0) scaleY(3);
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
transform: translate3d(0, 10px, 0) scaleY(0.985);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
transform: translate3d(0, -20px, 0) scaleY(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
transform: translate3d(0, 2000px, 0) scaleY(3);
}
}
.animate__bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
transform: translate3d(20px, 0, 0) scaleX(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
transform: translate3d(-2000px, 0, 0) scaleX(2);
}
}
@keyframes bounceOutLeft {
20% {
opacity: 1;
-webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
transform: translate3d(20px, 0, 0) scaleX(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
transform: translate3d(-2000px, 0, 0) scaleX(2);
}
}
.animate__bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
transform: translate3d(-20px, 0, 0) scaleX(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
transform: translate3d(2000px, 0, 0) scaleX(2);
}
}
@keyframes bounceOutRight {
20% {
opacity: 1;
-webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
transform: translate3d(-20px, 0, 0) scaleX(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
transform: translate3d(2000px, 0, 0) scaleX(2);
}
}
.animate__bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
transform: translate3d(0, -10px, 0) scaleY(0.985);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
transform: translate3d(0, 20px, 0) scaleY(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
transform: translate3d(0, -2000px, 0) scaleY(3);
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
transform: translate3d(0, -10px, 0) scaleY(0.985);
}
40%, 45% {
opacity: 1;
-webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
transform: translate3d(0, 20px, 0) scaleY(0.9);
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
transform: translate3d(0, -2000px, 0) scaleY(3);
}
}
.animate__bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
/* Fading entrances */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate__fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInLeftBig {
from {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInRightBig {
from {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpBig {
from {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInTopLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInTopLeft {
-webkit-animation-name: fadeInTopLeft;
animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInTopRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInTopRight {
-webkit-animation-name: fadeInTopRight;
animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInBottomLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInBottomLeft {
-webkit-animation-name: fadeInBottomLeft;
animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInBottomRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__fadeInBottomRight {
-webkit-animation-name: fadeInBottomRight;
animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.animate__fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes fadeOutDown {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.animate__fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
@keyframes fadeOutDownBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, 2000px, 0);
transform: translate3d(0, 2000px, 0);
}
}
.animate__fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes fadeOutLeft {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.animate__fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
@keyframes fadeOutLeftBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(-2000px, 0, 0);
transform: translate3d(-2000px, 0, 0);
}
}
.animate__fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes fadeOutRight {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.animate__fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
@keyframes fadeOutRightBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(2000px, 0, 0);
transform: translate3d(2000px, 0, 0);
}
}
.animate__fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes fadeOutUp {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.animate__fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
@keyframes fadeOutUpBig {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(0, -2000px, 0);
transform: translate3d(0, -2000px, 0);
}
}
.animate__fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
}
@keyframes fadeOutTopLeft {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
}
.animate__fadeOutTopLeft {
-webkit-animation-name: fadeOutTopLeft;
animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
}
@keyframes fadeOutTopRight {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
}
.animate__fadeOutTopRight {
-webkit-animation-name: fadeOutTopRight;
animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
}
@keyframes fadeOutBottomRight {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
}
.animate__fadeOutBottomRight {
-webkit-animation-name: fadeOutBottomRight;
animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
}
@keyframes fadeOutBottomLeft {
from {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
}
.animate__fadeOutBottomLeft {
-webkit-animation-name: fadeOutBottomLeft;
animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
from {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
to {
-webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animate__animated.animate__flip {
-webkit-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInX {
from {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.animate__flipInX {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
@keyframes flipInY {
from {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
60% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
opacity: 1;
}
80% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
}
to {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
}
.animate__flipInY {
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.animate__flipOutX {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
animation-duration: calc(var(--animate-duration) * 0.75);
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutY {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
opacity: 0;
}
}
.animate__flipOutY {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-duration: calc(var(--animate-duration) * 0.75);
animation-duration: calc(var(--animate-duration) * 0.75);
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedInRight {
from {
-webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
transform: translate3d(100%, 0, 0) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(-5deg);
transform: skewX(-5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__lightSpeedInRight {
-webkit-animation-name: lightSpeedInRight;
animation-name: lightSpeedInRight;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
transform: translate3d(-100%, 0, 0) skewX(30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(5deg);
transform: skewX(5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes lightSpeedInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
transform: translate3d(-100%, 0, 0) skewX(30deg);
opacity: 0;
}
60% {
-webkit-transform: skewX(-20deg);
transform: skewX(-20deg);
opacity: 1;
}
80% {
-webkit-transform: skewX(5deg);
transform: skewX(5deg);
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__lightSpeedInLeft {
-webkit-animation-name: lightSpeedInLeft;
animation-name: lightSpeedInLeft;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
@keyframes lightSpeedOutRight {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
transform: translate3d(100%, 0, 0) skewX(30deg);
opacity: 0;
}
}
.animate__lightSpeedOutRight {
-webkit-animation-name: lightSpeedOutRight;
animation-name: lightSpeedOutRight;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
transform: translate3d(-100%, 0, 0) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOutLeft {
from {
opacity: 1;
}
to {
-webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
transform: translate3d(-100%, 0, 0) skewX(-30deg);
opacity: 0;
}
}
.animate__lightSpeedOutLeft {
-webkit-animation-name: lightSpeedOutLeft;
animation-name: lightSpeedOutLeft;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
from {
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateIn {
from {
-webkit-transform: rotate3d(0, 0, 1, -200deg);
transform: rotate3d(0, 0, 1, -200deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.animate__rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
from {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
from {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.animate__rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
from {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
from {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.animate__rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
from {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
from {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.animate__rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
from {
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
from {
-webkit-transform: rotate3d(0, 0, 1, -90deg);
transform: rotate3d(0, 0, 1, -90deg);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.animate__rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
@keyframes rotateOut {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, 200deg);
transform: rotate3d(0, 0, 1, 200deg);
opacity: 0;
}
}
.animate__rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
-webkit-transform-origin: center;
transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
opacity: 0;
}
}
.animate__rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.animate__rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg);
opacity: 0;
}
}
.animate__rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
from {
opacity: 1;
}
to {
-webkit-transform: rotate3d(0, 0, 1, 90deg);
transform: rotate3d(0, 0, 1, 90deg);
opacity: 0;
}
}
.animate__rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
0% {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate3d(0, 0, 1, 80deg);
transform: rotate3d(0, 0, 1, 80deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40%, 80% {
-webkit-transform: rotate3d(0, 0, 1, 60deg);
transform: rotate3d(0, 0, 1, 60deg);
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 700px, 0);
transform: translate3d(0, 700px, 0);
opacity: 0;
}
}
.animate__hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-duration: calc(var(--animate-duration) * 2);
animation-duration: calc(var(--animate-duration) * 2);
-webkit-animation-name: hinge;
animation-name: hinge;
-webkit-transform-origin: top left;
transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes jackInTheBox {
from {
opacity: 0;
-webkit-transform: scale(0.1) rotate(30deg);
transform: scale(0.1) rotate(30deg);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
50% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
70% {
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.animate__jackInTheBox {
-webkit-animation-name: jackInTheBox;
animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes rollIn {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
@keyframes rollOut {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
}
}
.animate__rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
@keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
50% {
opacity: 1;
}
}
.animate__zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInDown {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.animate__zoomInDown {
-webkit-animation-name: zoomInDown;
animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.animate__zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.animate__zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.animate__zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
@keyframes zoomOut {
from {
opacity: 1;
}
50% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
to {
opacity: 0;
}
}
.animate__zoomOut {
-webkit-animation-name: zoomOut;
animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutDown {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.animate__zoomOutDown {
-webkit-animation-name: zoomOutDown;
animation-name: zoomOutDown;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
}
}
@keyframes zoomOutLeft {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
transform: scale(0.1) translate3d(-2000px, 0, 0);
}
}
.animate__zoomOutLeft {
-webkit-animation-name: zoomOutLeft;
animation-name: zoomOutLeft;
-webkit-transform-origin: left center;
transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
}
}
@keyframes zoomOutRight {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
}
to {
opacity: 0;
-webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
transform: scale(0.1) translate3d(2000px, 0, 0);
}
}
.animate__zoomOutRight {
-webkit-animation-name: zoomOutRight;
animation-name: zoomOutRight;
-webkit-transform-origin: right center;
transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
@keyframes zoomOutUp {
40% {
opacity: 1;
-webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
to {
opacity: 0;
-webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
.animate__zoomOutUp {
-webkit-animation-name: zoomOutUp;
animation-name: zoomOutUp;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInLeft {
from {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInRight {
from {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.animate__slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
.animate__slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
@keyframes slideOutLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
.animate__slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
@keyframes slideOutRight {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
}
.animate__slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
@keyframes slideOutUp {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}
.animate__slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
/*!
* Waves v0.7.6
* http://fian.my.id/Waves
*
* Copyright 2014-2018 Alfiana E. Sibuea and other contributors
* Released under the MIT license
* https://github.com/fians/Waves/blob/master/LICENSE */
.waves-effect {
position: relative;
cursor: pointer;
display: inline-block;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.waves-effect .waves-ripple {
position: absolute;
border-radius: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
opacity: 0;
background: rgba(0, 0, 0, 0.2);
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
background: -o-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
background: -moz-radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
background: radial-gradient(rgba(0, 0, 0, 0.2) 0, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
-webkit-transform: scale(0) translate(0, 0);
-moz-transform: scale(0) translate(0, 0);
-ms-transform: scale(0) translate(0, 0);
-o-transform: scale(0) translate(0, 0);
transform: scale(0) translate(0, 0);
pointer-events: none;
}
.waves-effect.waves-light .waves-ripple {
background: rgba(255, 255, 255, 0.4);
background: -webkit-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
background: -o-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
background: -moz-radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
background: radial-gradient(rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}
.waves-effect.waves-classic .waves-ripple {
background: rgba(0, 0, 0, 0.2);
}
.waves-effect.waves-classic.waves-light .waves-ripple {
background: rgba(255, 255, 255, 0.4);
}
.waves-notransition {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
}
.waves-button,
.waves-circle {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
.waves-button,
.waves-button:hover,
.waves-button:visited,
.waves-button-input {
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: none;
outline: none;
color: inherit;
background-color: rgba(0, 0, 0, 0);
font-size: 1em;
line-height: 1em;
text-align: center;
text-decoration: none;
z-index: 1;
}
.waves-button {
padding: 0.85em 1.1em;
border-radius: 0.2em;
}
.waves-button-input {
margin: 0;
padding: 0.85em 1.1em;
}
.waves-input-wrapper {
border-radius: 0.2em;
vertical-align: bottom;
}
.waves-input-wrapper.waves-button {
padding: 0;
}
.waves-input-wrapper .waves-button-input {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.waves-circle {
text-align: center;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
border-radius: 50%;
}
.waves-float {
-webkit-mask-image: none;
-webkit-box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 1.5px 1px rgba(0, 0, 0, 0.12);
-webkit-transition: all 300ms;
-moz-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
}
.waves-float:active {
-webkit-box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 8px 20px 1px rgba(0, 0, 0, 0.3);
}
.waves-block {
display: block;
}
/* required styles */
.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
position: absolute;
left: 0;
top: 0;
}
.leaflet-container {
overflow: hidden;
}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
image-rendering: -webkit-optimize-contrast;
}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
width: 1600px;
height: 1600px;
-webkit-transform-origin: 0 0;
}
.leaflet-marker-icon,
.leaflet-marker-shadow {
display: block;
}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
max-width: none !important;
max-height: none !important;
}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
max-width: none !important;
max-height: none !important;
width: auto;
padding: 0;
}
.leaflet-container img.leaflet-tile {
/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
mix-blend-mode: plus-lighter;
}
.leaflet-container.leaflet-touch-zoom {
-ms-touch-action: pan-x pan-y;
touch-action: pan-x pan-y;
}
.leaflet-container.leaflet-touch-drag {
-ms-touch-action: pinch-zoom;
/* Fallback for FF which doesn't support pinch-zoom */
touch-action: none;
touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
-ms-touch-action: none;
touch-action: none;
}
.leaflet-container {
-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
filter: inherit;
visibility: hidden;
}
.leaflet-tile-loaded {
visibility: inherit;
}
.leaflet-zoom-box {
width: 0;
height: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
z-index: 800;
}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
-moz-user-select: none;
}
.leaflet-pane {
z-index: 400;
}
.leaflet-tile-pane {
z-index: 200;
}
.leaflet-overlay-pane {
z-index: 400;
}
.leaflet-shadow-pane {
z-index: 500;
}
.leaflet-marker-pane {
z-index: 600;
}
.leaflet-tooltip-pane {
z-index: 650;
}
.leaflet-popup-pane {
z-index: 700;
}
.leaflet-map-pane canvas {
z-index: 100;
}
.leaflet-map-pane svg {
z-index: 200;
}
.leaflet-vml-shape {
width: 1px;
height: 1px;
}
.lvml {
behavior: url(#default#VML);
display: inline-block;
position: absolute;
}
/* control positioning */
.leaflet-control {
position: relative;
z-index: 800;
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
.leaflet-top,
.leaflet-bottom {
position: absolute;
z-index: 1000;
pointer-events: none;
}
.leaflet-top {
top: 0;
}
.leaflet-right {
right: 0;
}
.leaflet-bottom {
bottom: 0;
}
.leaflet-left {
left: 0;
}
.leaflet-control {
float: left;
clear: both;
}
.leaflet-right .leaflet-control {
float: right;
}
.leaflet-top .leaflet-control {
margin-top: 10px;
}
.leaflet-bottom .leaflet-control {
margin-bottom: 10px;
}
.leaflet-left .leaflet-control {
margin-left: 10px;
}
.leaflet-right .leaflet-control {
margin-right: 10px;
}
/* zoom and fade animations */
.leaflet-fade-anim .leaflet-popup {
opacity: 0;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
opacity: 1;
}
.leaflet-zoom-animated {
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
svg.leaflet-zoom-animated {
will-change: transform;
}
.leaflet-zoom-anim .leaflet-zoom-animated {
-webkit-transition: -webkit-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
-moz-transition: -moz-transform 0.25s cubic-bezier(0, 0, 0.25, 1);
transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1);
}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}
.leaflet-zoom-anim .leaflet-zoom-hide {
visibility: hidden;
}
/* cursors */
.leaflet-interactive {
cursor: pointer;
}
.leaflet-grab {
cursor: -webkit-grab;
cursor: -moz-grab;
cursor: grab;
}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
cursor: crosshair;
}
.leaflet-popup-pane,
.leaflet-control {
cursor: auto;
}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
cursor: move;
cursor: -webkit-grabbing;
cursor: -moz-grabbing;
cursor: grabbing;
}
/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
pointer-events: none;
}
.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
pointer-events: auto;
}
/* visual tweaks */
.leaflet-container {
background: #ddd;
outline-offset: 1px;
}
.leaflet-container a {
color: #0078A8;
}
.leaflet-zoom-box {
border: 2px dotted #38f;
background: rgba(255, 255, 255, 0.5);
}
/* general typography */
.leaflet-container {
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: 12px;
font-size: 0.75rem;
line-height: 1.5;
}
/* general toolbar styles */
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
border-radius: 4px;
}
.leaflet-bar a {
background-color: #fff;
border-bottom: 1px solid #ccc;
width: 26px;
height: 26px;
line-height: 26px;
display: block;
text-align: center;
text-decoration: none;
color: black;
}
.leaflet-bar a,
.leaflet-control-layers-toggle {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
background-color: #f4f4f4;
}
.leaflet-bar a:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.leaflet-bar a:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: none;
}
.leaflet-bar a.leaflet-disabled {
cursor: default;
background-color: #f4f4f4;
color: #bbb;
}
.leaflet-touch .leaflet-bar a {
width: 30px;
height: 30px;
line-height: 30px;
}
.leaflet-touch .leaflet-bar a:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
.leaflet-touch .leaflet-bar a:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}
/* zoom control */
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
font: bold 18px "Lucida Console", Monaco, monospace;
text-indent: 1px;
}
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
font-size: 22px;
}
/* layers control */
.leaflet-control-layers {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
background: #fff;
border-radius: 5px;
}
.leaflet-control-layers-toggle {
background-image: url(/images/layers.png);
width: 36px;
height: 36px;
}
.leaflet-retina .leaflet-control-layers-toggle {
background-image: url(/images/layers-2x.png);
background-size: 26px 26px;
}
.leaflet-touch .leaflet-control-layers-toggle {
width: 44px;
height: 44px;
}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
display: none;
}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
display: block;
position: relative;
}
.leaflet-control-layers-expanded {
padding: 6px 10px 6px 6px;
color: #333;
background: #fff;
}
.leaflet-control-layers-scrollbar {
overflow-y: scroll;
overflow-x: hidden;
padding-right: 5px;
}
.leaflet-control-layers-selector {
margin-top: 2px;
position: relative;
top: 1px;
}
.leaflet-control-layers label {
display: block;
font-size: 13px;
font-size: 1.08333em;
}
.leaflet-control-layers-separator {
height: 0;
border-top: 1px solid #ddd;
margin: 5px -10px 5px -6px;
}
/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
background-image: url(/images/marker-icon.png);
}
/* attribution and scale controls */
.leaflet-container .leaflet-control-attribution {
background: #fff;
background: rgba(255, 255, 255, 0.8);
margin: 0;
}
.leaflet-control-attribution,
.leaflet-control-scale-line {
padding: 0 5px;
color: #333;
line-height: 1.4;
}
.leaflet-control-attribution a {
text-decoration: none;
}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
text-decoration: underline;
}
.leaflet-attribution-flag {
display: inline !important;
vertical-align: baseline !important;
width: 1em;
height: 0.6669em;
}
.leaflet-left .leaflet-control-scale {
margin-left: 5px;
}
.leaflet-bottom .leaflet-control-scale {
margin-bottom: 5px;
}
.leaflet-control-scale-line {
border: 2px solid #777;
border-top: none;
line-height: 1.1;
padding: 2px 5px 1px;
white-space: nowrap;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8);
text-shadow: 1px 1px #fff;
}
.leaflet-control-scale-line:not(:first-child) {
border-top: 2px solid #777;
border-bottom: none;
margin-top: -2px;
}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
border-bottom: 2px solid #777;
}
.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
/* popup */
.leaflet-popup {
position: absolute;
text-align: center;
margin-bottom: 20px;
}
.leaflet-popup-content-wrapper {
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
margin: 13px 24px 13px 20px;
line-height: 1.3;
font-size: 13px;
font-size: 1.08333em;
min-height: 1px;
}
.leaflet-popup-content p {
margin: 17px 0;
margin: 1.3em 0;
}
.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: absolute;
left: 50%;
margin-top: -1px;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
}
.leaflet-popup-tip {
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
pointer-events: auto;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: white;
color: #333;
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}
.leaflet-container a.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
border: none;
text-align: center;
width: 24px;
height: 24px;
font: 16px/24px Tahoma, Verdana, sans-serif;
color: #757575;
text-decoration: none;
background: transparent;
}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
color: #585858;
}
.leaflet-popup-scrolled {
overflow: auto;
}
.leaflet-oldie .leaflet-popup-content-wrapper {
-ms-zoom: 1;
}
.leaflet-oldie .leaflet-popup-tip {
width: 24px;
margin: 0 auto;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
}
.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
border: 1px solid #999;
}
/* div icon */
.leaflet-div-icon {
background: #fff;
border: 1px solid #666;
}
/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
position: absolute;
padding: 6px;
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
color: #222;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip.leaflet-interactive {
cursor: pointer;
pointer-events: auto;
}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
position: absolute;
pointer-events: none;
border: 6px solid transparent;
background: transparent;
content: "";
}
/* Directions */
.leaflet-tooltip-bottom {
margin-top: 6px;
}
.leaflet-tooltip-top {
margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
left: 50%;
margin-left: -6px;
}
.leaflet-tooltip-top:before {
bottom: 0;
margin-bottom: -12px;
border-top-color: #fff;
}
.leaflet-tooltip-bottom:before {
top: 0;
margin-top: -12px;
margin-left: -6px;
border-bottom-color: #fff;
}
.leaflet-tooltip-left {
margin-left: -6px;
}
.leaflet-tooltip-right {
margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
top: 50%;
margin-top: -6px;
}
.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: #fff;
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: #fff;
}
/* Printing */
@media print {
/* Prevent printers from removing background-images of controls. */
.leaflet-control {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
.leaflet-draw-section {
position: relative;
}
.leaflet-draw-toolbar {
margin-top: 12px;
}
.leaflet-draw-toolbar-top {
margin-top: 0;
}
.leaflet-draw-toolbar-notop a:first-child {
border-top-right-radius: 0;
}
.leaflet-draw-toolbar-nobottom a:last-child {
border-bottom-right-radius: 0;
}
.leaflet-draw-toolbar a {
background-image: url(/images/spritesheet.png);
background-image: linear-gradient(transparent, transparent), url(/images/spritesheet.svg);
background-repeat: no-repeat;
background-size: 300px 30px;
background-clip: padding-box;
}
.leaflet-retina .leaflet-draw-toolbar a {
background-image: url(/images/spritesheet-2x.png);
background-image: linear-gradient(transparent, transparent), url(/images/spritesheet.svg);
}
.leaflet-draw a {
display: block;
text-align: center;
text-decoration: none;
}
.leaflet-draw a .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.leaflet-draw-actions {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 26px;
top: 0;
white-space: nowrap;
}
.leaflet-touch .leaflet-draw-actions {
left: 32px;
}
.leaflet-right .leaflet-draw-actions {
right: 26px;
left: auto;
}
.leaflet-touch .leaflet-right .leaflet-draw-actions {
right: 32px;
left: auto;
}
.leaflet-draw-actions li {
display: inline-block;
}
.leaflet-draw-actions li:first-child a {
border-left: 0;
}
.leaflet-draw-actions li:last-child a {
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.leaflet-right .leaflet-draw-actions li:last-child a {
-webkit-border-radius: 0;
border-radius: 0;
}
.leaflet-right .leaflet-draw-actions li:first-child a {
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.leaflet-draw-actions a {
background-color: #919187;
border-left: 1px solid #AAA;
color: #FFF;
font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
line-height: 28px;
text-decoration: none;
padding-left: 10px;
padding-right: 10px;
height: 28px;
}
.leaflet-touch .leaflet-draw-actions a {
font-size: 12px;
line-height: 30px;
height: 30px;
}
.leaflet-draw-actions-bottom {
margin-top: 0;
}
.leaflet-draw-actions-top {
margin-top: 1px;
}
.leaflet-draw-actions-top a, .leaflet-draw-actions-bottom a {
height: 27px;
line-height: 27px;
}
.leaflet-draw-actions a:hover {
background-color: #a0a098;
}
.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
height: 26px;
line-height: 26px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
background-position: -2px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polyline {
background-position: 0 -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
background-position: -31px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
background-position: -29px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
background-position: -62px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
background-position: -60px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-circle {
background-position: -92px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circle {
background-position: -90px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-marker {
background-position: -122px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker {
background-position: -120px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
background-position: -273px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-circlemarker {
background-position: -271px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-edit-edit {
background-position: -152px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit {
background-position: -150px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-edit-remove {
background-position: -182px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove {
background-position: -180px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
background-position: -212px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
background-position: -210px -1px;
}
.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
background-position: -242px -2px;
}
.leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
background-position: -240px -2px;
}
.leaflet-mouse-marker {
background-color: #fff;
cursor: crosshair;
}
.leaflet-draw-tooltip {
background: #363636;
background: rgba(0, 0, 0, 0.5);
border: 1px solid transparent;
-webkit-border-radius: 4px;
border-radius: 4px;
color: #fff;
font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
margin-left: 20px;
margin-top: -21px;
padding: 4px 8px;
position: absolute;
visibility: hidden;
white-space: nowrap;
z-index: 6;
}
.leaflet-draw-tooltip:before {
border-right: 6px solid black;
border-right-color: rgba(0, 0, 0, 0.5);
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
content: "";
position: absolute;
top: 7px;
left: -7px;
}
.leaflet-error-draw-tooltip {
background-color: #f2dede;
border: 1px solid #e6b6bd;
color: #b94a48;
}
.leaflet-error-draw-tooltip:before {
border-right-color: #e6b6bd;
}
.leaflet-draw-tooltip-single {
margin-top: -12px;
}
.leaflet-draw-tooltip-subtext {
color: #f8d5e4;
}
.leaflet-draw-guide-dash {
font-size: 1%;
opacity: 0.6;
position: absolute;
width: 5px;
height: 5px;
}
.leaflet-edit-marker-selected {
background-color: rgba(254, 87, 161, 0.1);
border: 4px dashed rgba(254, 87, 161, 0.6);
-webkit-border-radius: 4px;
border-radius: 4px;
box-sizing: content-box;
}
.leaflet-edit-move {
cursor: move;
}
.leaflet-edit-resize {
cursor: pointer;
}
.leaflet-oldie .leaflet-draw-toolbar {
border: 1px solid #999;
}
|