@3deye-toolkit/react-event-list 0.0.1-alpha.22 → 0.0.1-alpha.25

package/dist/react-event-list.css

@@ -1,215 +1,12 @@
-.event-list-item {
-	-webkit-user-select: none;
-	   -moz-user-select: none;
-	    -ms-user-select: none;
-	        user-select: none;
-	position: absolute;
-	font-size: 12px;
-	color: rgba(255, 255, 255, 0.8);
-	background-color: rgba(255, 255, 255, 0.1);
-	top: 0;
-	bottom: 2px;
-	left: 0;
-	right: 0;
-  overflow: hidden;
-}
-
-.event-list-item.mdc-ripple-surface {
-	position: absolute;
-}
-
-.event-list-item .x-3deye-button--icon:hover,
-.event-list-item .x-3deye-button--icon:focus {
-	background-color: rgba(0, 0, 0, 0.2);
-}
-
-.event-list-item .acknowledged-overlay {
-	position: absolute;
-	top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-	pointer-events: none;
-	display: grid;
-	place-items: center;
-	background-color: rgba(0, 0, 0, 0.4);
-	color: white;
-	text-transform: uppercase;
-	font-weight: bold;
-}
-
-.event-list-item .no-preview-overlay {
-	display: block;
-	position: absolute;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	pointer-events: none;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABaCAYAAABzAJLvAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIDBB8ysGG6bgAAAy1JREFUeNrtnD1oFFEUhc8s6Y0gCDHrT64/EE0UCVEQxB9ioSgWFoqNRgQFG0EQUlhYCXYRBSFuIogkTSKCoNhY2FpYiDYHEYJYiRYuiOhY5EVWFyNxNzvv3T1ftc2+eXO/uWd29s0MIIQQQgghhBBCCCGEEEIIIYQQQgghxILkea4ieIWkqQrNpRTZfF6QnEytk0n2k/xGco8EL8w2AEdIVrIsi1ry/NxIbgXwEsBtM3umzPh3N3SR/EGyksBcyyRzkqMyt3jJ1ZjjmuRAkDsiY/9XwLVBciUWyTWxPBjkXtcvf2dxTXJDkHtNhpzFNcldQe5FmXES1zWxvDvIvapYdhbX4To3J3lFJpzFNcn9Qe55GXAS1zWxPBTkXlYsO4trkjuD3EuquLO4JnkoyD2tSjuJ65pYPhzkXlAsO4trkvuC3HOqrLO4JnksyD3hqTaZI8n9mFu2mwAwBaBjEV8vA7gFYNjMxvM8R5Zlv6J7/rMEFyv4HoCTjYxhZtkfY54xszsp16UEP3Q2+YA5CmAs9aJ4Epw3Ue5BADMeiuJJcDM795GX/ZHgernTnvapQ1p/Y8bbDqmDnSPBEtxWvJVgx5hZjzfJElxPH4BXEuyXKoAdXjpZl0n1MZ0D+AKgh+RndXA8TDT4/Y9A3VLjJnVwwdQs523H3P/RfWa2qHMoyTKAN+GpxuH5Mc3sgzItAkjeCIv1GxsYI5mnGttN7miQu6UJY0X/VGNbUHOD3M0g15p4wET3VGO7du7dIHf1EoytuC5Y7lij51zFdbyxPB5eeLKqBQeS4rrFnTsdOndlC7epuG5Roe8HuesK2LbieoljeSoUeEWBB1iScZ0l0LlPABwAsNzMPhU8ly4AswAmzGw4BcGlyOU+ADAEoFy0XAAws/cAugEcTyWuSxHLfQhgL4BlZjYby7yC5F4k8ka+LFK5zwEMAug0s2qkc0wirksRFu4xgIEQy9VYC5dKXGeRyX2KuReSdpvZ10Qu39YAeA1gEsBZM/uuDv47vQC6UpEbOvkdgPUATgHYrItbp5DU7U9CCCGEEEIIIYQQQgghhBBCCCGEEEIIIUTK/ASpxrk/iYZ2rgAAAABJRU5ErkJggg==');
-	background-color: rgba(128, 128, 128, 0.8);
-}
-
-.event-list-item-caption {
-	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
-	padding-left: 8px;
-	padding-bottom: 8px;
-	padding-top: 8px;
-	position: absolute;
-	font-size: 11px;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 1;
-	pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-}
-
-.event-list-item:hover .event-list-item__time {
-  text-decoration: underline;
-}
-
-.event-list-item__time {
-  text-shadow: 0 1px 2px black;
-  font-size: 12px;
-  /* order: 2;
-  line-height: 20px; */
-}
-
-.event-list-item__camera-name {
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-  font-weight: bold;
-  font-size: 16px;
-  line-height: 24px;
-  font-family: 'Roboto', sans-serif;
-  /* text-shadow: 0 1px 2px black;
-  line-height: 20px; */
-}
-
-.event-list-item__duration {
-	background-color: rgba(0, 0, 0, 0.75);
-	font-size: 12px;
-	padding: 0 4px;
-	position: absolute;
-	right: 2px;
-	bottom: 32px;
-	opacity: 0.9;
-}
-
-.event-list-item-face {
-	opacity: 0;
-	position: absolute;
-	pointer-events: none;
-	box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
-}
-
-.event-list-item-face-trigger:hover + .event-list-item-face {
-	opacity: 1;
-}
-
-/**
- * Corners
- */
-
-.event-list-item-face .frame {
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	border: 1px solid rgba(255, 165, 0, 0.2);
-}
-
-.event-list-item-face .corner-highlight-tl {
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	width: 10px;
-	height: 2px;
-	background-color: orange;
-}
-
-.event-list-item-face .corner-highlight-tl::before {
-	content: '';
-	display: block;
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 10px;
-	width: 2px;
-	background-color: orange;
-}
-
-.event-list-item-face .corner-highlight-tr {
-	position: absolute;
-	top: -1px;
-	right: -1px;
-	width: 10px;
-	height: 2px;
-	background-color: orange;
-}
-
-.event-list-item-face .corner-highlight-tr::before {
-	content: '';
-	display: block;
-	position: absolute;
-	top: 0;
-	right: 0;
-	height: 10px;
-	width: 2px;
-	background-color: orange;
-}
-
-.event-list-item-face .corner-highlight-br {
-	position: absolute;
-	bottom: -1px;
-	right: -1px;
-	width: 10px;
-	height: 2px;
-	background-color: orange;
-}
-
-.event-list-item-face .corner-highlight-br::before {
-	content: '';
-	display: block;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	height: 10px;
-	width: 2px;
-	background-color: orange;
-}
-
-.event-list-item-face .corner-highlight-bl {
-	position: absolute;
-	bottom: -1px;
-	left: -1px;
-	width: 10px;
-	height: 2px;
-	background-color: orange;
-}
-
-.event-list-item-face .corner-highlight-bl::before {
-	content: '';
-	display: block;
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	height: 10px;
-	width: 2px;
-	background-color: orange;
+.x-3deye-popover {
+  position: relative;
 }
 
-.event-list-item .menu-button {
-  position: absolute;
-  top: 0;
-  right: 0;
+.x-3deye-popover-body {
+  background-color: white;
+  padding: 8px;
+  border-radius: 8px;
+  box-shadow: 0 0 8px 0px black;
 }
 
 .x-3deye-button {
@@ -217,18 +14,28 @@
 	background: none;
 	border: none;
 	position: relative;
-	padding: 4px;
+	padding: 0 8px;
+  height: 32px;
 	text-transform: uppercase;
 	-webkit-user-select: none;
 	   -moz-user-select: none;
 	    -ms-user-select: none;
 	        user-select: none;
-	font-family: 'Roboto', sans-serif;
-	text-align: center;
-	align-items: flex-start;
+  display: inline-flex;
+	justify-content: center;
+	align-items: center;
+  border-radius: 4px;
+  letter-spacing: .0107142857em;
+  font-weight: 500;
 }
 
-.x-3deye-button.fullwidth {
+.x-3deye-button sup {
+  position: relative;
+  top: -0.5em;
+  left: 0.25em;
+}
+
+.x-3deye-button.x-3deye-button--fullwidth {
 	width: 100%;
 }
 
@@ -239,6 +46,7 @@
 
 .x-3deye-button--icon {
 	border-radius: 16px;
+  padding: 4px;
 	width: 32px;
 	height: 32px;
 	display: inline-flex;
@@ -250,52 +58,49 @@
 	opacity: 0.4;
 }
 
-.x-3deye-button.x-3deye-button--ok,
-.x-3deye-button.x-3deye-button--cancel {
-	color: white;
-	border-radius: 4px;
-	text-transform: none;
-	margin: 4px;
-	min-width: 80px;
-}
-
-.x-3deye-button.x-3deye-button--ok.fullwidth,
-.x-3deye-button.x-3deye-button--cancel.fullwidth {
-	width: calc(100% - 8px);
-}
-
 .x-3deye-button:not(:disabled) {
 	cursor: pointer;
 }
 
-.x-3deye-button.x-3deye-button--ok {
-	background-color: #27b9a1;
+.x-3deye-button.x-3deye-button--filled,
+.x-3deye-button.x-3deye-button--text {
+  min-width: 80px;
+  text-transform: capitalize;
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.25rem;
+  padding: 0 1rem;
+}
+
+.x-3deye-button.x-3deye-button--filled {
+  background-color: #27b9a1;
+  color: white;
 }
 
-.x-3deye-button.x-3deye-button--ok:not(:disabled):hover {
+.x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
 	background-color: #61beaf;
 }
 
-.x-3deye-button.x-3deye-button--ok:focus {
+.x-3deye-button.x-3deye-button--filled:focus {
 	transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
 	box-shadow: 0 0 0 2px rgba(39, 185, 161, 0.33);
 }
 
-.x-3deye-button.x-3deye-button--cancel {
-	background-color: rgb(119, 87, 178);
-}
-
-.x-3deye-button.x-3deye-button--cancel:not(:disabled):hover {
-	background-color: rgb(142, 122, 180);
+.x-3deye-button canvas {
+	color: rgb(var(--surface-highlight-rgb));
 }
 
-.x-3deye-button.x-3deye-button--cancel:focus {
-	transition: box-shadow 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
-	box-shadow: 0 0 0 2px rgba(119, 87, 178, 0.33);
+.x-3deye-button--overlay {
+	pointer-events: auto;
+	background: rgba(0, 0, 0, 0.5);
+	border: 2px solid rgba(255, 255, 255, 0.25);
+	color: white;
 }
 
-.x-3deye-button canvas {
-	color: rgb(var(--surface-highlight-rgb));
+.x-3deye-button.x-3deye-button--overlay:focus, .x-3deye-button.x-3deye-button--overlay:not(:disabled):hover {
+  background: rgba(0, 0, 0, 0.5);
+	border: 2px solid rgba(255, 255, 255, 0.5);
 }
 
 :root {
@@ -315,538 +120,68 @@
   border: solid 1px #ccc;
 }
 
-@-webkit-keyframes slide-in {
-	0% {
-		opacity: 0;
-		transform: scale(0.9);
-	}
-	100% {
-		opacity: 1;
-		transform: scale(1);
-	}
+@charset "UTF-8";
+.react-datepicker__year-read-view--down-arrow,
+.react-datepicker__month-read-view--down-arrow,
+.react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 3px 3px 0 0;
+  content: "";
+  display: block;
+  height: 9px;
+  position: absolute;
+  top: 6px;
+  width: 9px;
 }
-
-@keyframes slide-in {
-	0% {
-		opacity: 0;
-		transform: scale(0.9);
-	}
-	100% {
-		opacity: 1;
-		transform: scale(1);
-	}
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+  margin-left: -4px;
+  position: absolute;
+  width: 0;
 }
-
-.menu-items-container {
-	transform-origin: right top;
-	position: absolute;
-	z-index: 10000001;
-	background: rgba(0, 0, 0, 0.9);
-	box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgb(0 0 0 / 0.1), inset 0 0 0 1px rgb(255 255 255 /0.05);
-	border-radius: 4px;
-	padding: 4px;
-	-webkit-animation: slide-in 0.15s ease-in;
-	        animation: slide-in 0.15s ease-in;
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+  box-sizing: content-box;
+  position: absolute;
+  border: 8px solid transparent;
+  height: 0;
+  width: 1px;
+  content: "";
+  z-index: -1;
+  border-width: 8px;
+  left: -8px;
 }
-
-@media (prefers-reduced-motion) {
-	.menu-items-container {
-		-webkit-animation: none;
-		        animation: none;
-	}
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
+  border-bottom-color: #aeaeae;
 }
 
-.menu-items-container[data-placement='top-start'] {
-	transform-origin: left bottom;
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
+  top: 0;
+  margin-top: -8px;
 }
-
-.menu-items-container[data-placement='top-end'] {
-	transform-origin: right bottom;
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+  border-top: none;
+  border-bottom-color: #f0f0f0;
 }
-
-.menu-items-container[data-placement='bottom-start'] {
-	transform-origin: left top;
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+  top: 0;
 }
-
-.menu-items-container[data-placement='bottom-end'] {
-	transform-origin: right top;
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
+  top: -1px;
+  border-bottom-color: #aeaeae;
 }
 
-.menu-items-container[data-placement='top'] {
-	transform-origin: center bottom;
-}
-
-.menu-items-container .x-3deye-button {
-	text-transform: none;
-}
-
-.menu-items-container button {
-  font-size: 14px;
-	background: none;
-	border: none;
-	text-align: left;
-	color: white;
-	padding: 8px 16px;
-	display: block;
-	width: 100%;
-	border-radius: 4px;
-  letter-spacing: 0.5px;
-}
-
-.menu-items-container .x-3deye-button.menu-item:hover,
-.menu-items-container .x-3deye-button.menu-item:focus {
-	background-color: rgba(255, 255, 255, 0.22);
-}
-
-.menu-items-container .menu-item--danger {
-	color: #f44336;
-}
-
-.themed-menu.menu-items-container {
-	background-color: var(--background);
-}
-
-.themed-menu.menu-items-container .x-3deye-button.menu-item {
-	color: var(--primary-text);
-}
-
-.themed-menu.menu-items-container .x-3deye-button.menu-item:hover {
-	background-color: rgba(var(--surface-highlight-rgb), var(--surface-highlight-opacity));
-}
-
-.preloader-container {
-  color: var(--primary-text);
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.x-3deye-button-group {
-  display: flex;
-}
-
-.x-3deye-button-group > .x-3deye-button {
-  flex: 1;
-  color: var(--secondary-text);
-  height: 35px;
-  background-color: var(--background);
-  font-size: 11px;
-}
-
-.x-3deye-button-group > .x-3deye-button.button-selected {
-  color: var(--primary-text);
-  background: none;
-}
-
-.x-3deye-button-group > .x-3deye-button + .x-3deye-button {
-  margin-left: 1px;
-}
-
-.x-3deye-button-group > .x-3deye-button:hover {
-  color: var(--primary-text);
-}
-
-.x-3deye-button-group > .x-3deye-button.button-unselected {
-  color: var(--secondary-text);
-}
-
-.x-3deye-button-group > .x-3deye-button.button-selected canvas {
-  color: var(--background);
-}
-
-.color-selector {
-  display: flex;
-  z-index: 1;
-  padding: 5px 8px;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.color-selector__items {
-  display: flex;
-}
-
-.color-selector__item {
-  border: none;
-  width: 20px;
-  height: 20px;
-  border-radius: 20px;
-  margin: 4px;
-  padding: 0;
-  box-shadow: 0 0 0 1.5px white;
-  transition: box-shadow 0.2s ease-in;
-}
-
-.color-selector__item:focus {  
-  box-shadow: 0 0 0 1.5px white, 0 0 0 5px rgba(255, 255, 255, 0.2);
-}
-
-.color-selector__item:focus:active {
-  box-shadow: 0 0 0 1.5px white;
-}
-
-.color-selector__item .icon {
-  opacity: 0;
-  transition: opacity 0.2s ease-in;
-}
-
-.color-selector__item.selected .icon {
-  opacity: 1;
-}
-
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/material-components/material-components-web/blob/master/LICENSE
- */
-@-webkit-keyframes mdc-slider-emphasize {
-  0% {
-    -webkit-animation-timing-function: ease-out;
-            animation-timing-function: ease-out;
-  }
-  50% {
-    -webkit-animation-timing-function: ease-in;
-            animation-timing-function: ease-in;
-    transform: scale(0.85);
-  }
-  100% {
-    transform: scale(0.571);
-  }
-}
-@keyframes mdc-slider-emphasize {
-  0% {
-    -webkit-animation-timing-function: ease-out;
-            animation-timing-function: ease-out;
-  }
-  50% {
-    -webkit-animation-timing-function: ease-in;
-            animation-timing-function: ease-in;
-    transform: scale(0.85);
-  }
-  100% {
-    transform: scale(0.571);
-  }
-}
-.mdc-slider {
-  position: relative;
-  width: 100%;
-  height: 48px;
-  cursor: pointer;
-  touch-action: pan-x;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-container::after {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-  opacity: 0.26;
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__track-marker-container {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__thumb {
-  fill: #018786;
-  /* @alternate */
-  fill: var(--mdc-theme-secondary, #018786);
-  stroke: #018786;
-  /* @alternate */
-  stroke: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__focus-ring {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
-  background-color: #018786;
-  /* @alternate */
-  background-color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__pin {
-  color: white;
-  /* @alternate */
-  color: var(--mdc-theme-text-primary-on-dark, white);
-}
-.mdc-slider--disabled {
-  cursor: auto;
-}
-.mdc-slider--disabled .mdc-slider__track {
-  background-color: #9a9a9a;
-}
-.mdc-slider--disabled .mdc-slider__track-container::after {
-  background-color: #9a9a9a;
-  opacity: 0.26;
-}
-.mdc-slider--disabled .mdc-slider__track-marker-container {
-  background-color: #9a9a9a;
-}
-.mdc-slider--disabled .mdc-slider__thumb {
-  fill: #9a9a9a;
-  stroke: #9a9a9a;
-}
-.mdc-slider--disabled .mdc-slider__thumb {
-  /* @alternate */
-  stroke: white;
-  stroke: var(--mdc-slider-bg-color-behind-component, white);
-}
-.mdc-slider:focus {
-  outline: none;
-}
-.mdc-slider__track-container {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  height: 2px;
-  overflow: hidden;
-}
-.mdc-slider__track-container::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  height: 100%;
-  content: "";
-}
-.mdc-slider__track {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  transform-origin: left top;
-  will-change: transform;
-}
-.mdc-slider[dir=rtl] .mdc-slider__track, [dir=rtl] .mdc-slider .mdc-slider__track {
-  transform-origin: right top;
-}
-
-.mdc-slider__track-marker-container {
-  display: flex;
-  margin-right: 0;
-  margin-left: -1px;
-  visibility: hidden;
-}
-.mdc-slider[dir=rtl] .mdc-slider__track-marker-container, [dir=rtl] .mdc-slider .mdc-slider__track-marker-container {
-  margin-right: -1px;
-  margin-left: 0;
-}
-
-.mdc-slider__track-marker-container::after {
-  display: block;
-  width: 2px;
-  height: 2px;
-  content: "";
-}
-.mdc-slider__track-marker {
-  flex: 1;
-}
-.mdc-slider__track-marker::after {
-  display: block;
-  width: 2px;
-  height: 2px;
-  content: "";
-}
-.mdc-slider__track-marker:first-child::after {
-  width: 3px;
-}
-.mdc-slider__thumb-container {
-  position: absolute;
-  top: 15px;
-  left: 0;
-  width: 21px;
-  height: 100%;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  will-change: transform;
-}
-.mdc-slider__thumb {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform: scale(0.571);
-  stroke-width: 3.5;
-  transition: transform 100ms ease-out, fill 100ms ease-out, stroke 100ms ease-out;
-}
-.mdc-slider__focus-ring {
-  width: 21px;
-  height: 21px;
-  border-radius: 50%;
-  opacity: 0;
-  transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out;
-}
-.mdc-slider__pin {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  width: 26px;
-  height: 26px;
-  margin-top: -2px;
-  margin-left: -2px;
-  transform: rotate(-45deg) scale(0) translate(0, 0);
-  border-radius: 50% 50% 50% 0%;
-  z-index: 1;
-  transition: transform 100ms ease-out;
-}
-.mdc-slider__pin-value-marker {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-body2-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-  font-size: 0.875rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-  line-height: 1.25rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-body2-line-height, 1.25rem);
-  font-weight: 400;
-  /* @alternate */
-  font-weight: var(--mdc-typography-body2-font-weight, 400);
-  letter-spacing: 0.0178571429em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-body2-letter-spacing, 0.0178571429em);
-  text-decoration: inherit;
-  /* @alternate */
-  -webkit-text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
-          text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-body2-text-transform, inherit);
-  transform: rotate(45deg);
-}
-
-.mdc-slider--active .mdc-slider__thumb {
-  transform: scale3d(1, 1, 1);
-}
-
-.mdc-slider--focus .mdc-slider__thumb {
-  -webkit-animation: mdc-slider-emphasize 266.67ms linear;
-          animation: mdc-slider-emphasize 266.67ms linear;
-}
-.mdc-slider--focus .mdc-slider__focus-ring {
-  transform: scale3d(1.55, 1.55, 1.55);
-  opacity: 0.25;
-}
-
-.mdc-slider--in-transit .mdc-slider__thumb {
-  transition-delay: 140ms;
-}
-
-.mdc-slider--in-transit .mdc-slider__thumb-container,
-.mdc-slider--in-transit .mdc-slider__track,
-.mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__thumb-container,
-.mdc-slider:focus:not(.mdc-slider--active) .mdc-slider__track {
-  transition: transform 80ms ease;
-}
-
-.mdc-slider--discrete.mdc-slider--active .mdc-slider__thumb {
-  transform: scale(calc(12 / 21));
-}
-.mdc-slider--discrete.mdc-slider--active .mdc-slider__pin {
-  transform: rotate(-45deg) scale(1) translate(19px, -20px);
-}
-.mdc-slider--discrete.mdc-slider--focus .mdc-slider__thumb {
-  -webkit-animation: none;
-          animation: none;
-}
-.mdc-slider--discrete.mdc-slider--display-markers .mdc-slider__track-marker-container {
-  visibility: visible;
-}
-.x-3deye-popover {
-  position: relative;
-}
-
-.x-3deye-popover-body {
-  background-color: white;
-  padding: 8px;
-  border-radius: 8px;
-  box-shadow: 0 0 8px 0px black;
-}
-
-.react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
-.react-datepicker__month-read-view--down-arrow,
-.react-datepicker__month-year-read-view--down-arrow {
-  border-color: #ccc;
-  border-style: solid;
-  border-width: 3px 3px 0 0;
-  content: "";
-  display: block;
-  height: 9px;
-  position: absolute;
-  top: 6px;
-  width: 9px;
-}
-
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
-  margin-left: -4px;
-  position: absolute;
-  width: 0;
-}
-
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
-  box-sizing: content-box;
-  position: absolute;
-  border: 8px solid transparent;
-  height: 0;
-  width: 1px;
-  content: "";
-  z-index: -1;
-  border-width: 8px;
-  left: -8px;
-}
-
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
-  border-bottom-color: #aeaeae;
-}
-
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
-  top: 0;
-  margin-top: -8px;
-}
-
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
-  border-top: none;
-  border-bottom-color: #f0f0f0;
-}
-
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::after {
-  top: 0;
-}
-
-.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before {
-  top: -1px;
-  border-bottom-color: #aeaeae;
-}
-
-.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
   bottom: 0;
   margin-bottom: -8px;
 }
-
-.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
   border-bottom: none;
   border-top-color: #fff;
 }
-
-.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::after {
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
   bottom: 0;
 }
-
-.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before {
+.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
   bottom: -1px;
   border-top-color: #aeaeae;
 }
@@ -855,6 +190,7 @@
   display: inline-block;
   padding: 0;
   border: 0;
+  width: 100%;
 }
 
 .react-datepicker {
@@ -871,11 +207,9 @@
 .react-datepicker--time-only .react-datepicker__triangle {
   left: 35px;
 }
-
 .react-datepicker--time-only .react-datepicker__time-container {
   border-left: 0;
 }
-
 .react-datepicker--time-only .react-datepicker__time,
 .react-datepicker--time-only .react-datepicker__time-box {
   border-bottom-left-radius: 0.3rem;
@@ -890,34 +224,27 @@
 .react-datepicker-popper {
   z-index: 1;
 }
-
-.react-datepicker-popper[data-placement^="bottom"] {
+.react-datepicker-popper[data-placement^=bottom] {
   padding-top: 10px;
 }
-
-.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle, .react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
+.react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
   left: auto;
   right: 50px;
 }
-
-.react-datepicker-popper[data-placement^="top"] {
+.react-datepicker-popper[data-placement^=top] {
   padding-bottom: 10px;
 }
-
-.react-datepicker-popper[data-placement^="right"] {
+.react-datepicker-popper[data-placement^=right] {
   padding-left: 8px;
 }
-
-.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
+.react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
   left: auto;
   right: 42px;
 }
-
-.react-datepicker-popper[data-placement^="left"] {
+.react-datepicker-popper[data-placement^=left] {
   padding-right: 8px;
 }
-
-.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
+.react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
   left: 42px;
   right: auto;
 }
@@ -930,17 +257,14 @@
   padding: 8px 0;
   position: relative;
 }
-
 .react-datepicker__header--time {
   padding-bottom: 8px;
   padding-left: 5px;
   padding-right: 5px;
 }
-
 .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
   border-top-left-radius: 0;
 }
-
 .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
   border-top-right-radius: 0.3rem;
 }
@@ -987,19 +311,15 @@
   text-indent: -999em;
   overflow: hidden;
 }
-
 .react-datepicker__navigation--previous {
   left: 2px;
 }
-
 .react-datepicker__navigation--next {
   right: 2px;
 }
-
 .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
   right: 85px;
 }
-
 .react-datepicker__navigation--years {
   position: relative;
   top: 0;
@@ -1007,15 +327,12 @@
   margin-left: auto;
   margin-right: auto;
 }
-
 .react-datepicker__navigation--years-previous {
   top: 4px;
 }
-
 .react-datepicker__navigation--years-upcoming {
   top: -4px;
 }
-
 .react-datepicker__navigation:hover *::before {
   border-color: #a6a6a6;
 }
@@ -1024,21 +341,18 @@
   position: relative;
   top: -1px;
   font-size: 20px;
+  width: 0;
 }
-
 .react-datepicker__navigation-icon--next {
   left: -2px;
 }
-
 .react-datepicker__navigation-icon--next::before {
   transform: rotate(45deg);
   left: -7px;
 }
-
 .react-datepicker__navigation-icon--previous {
   right: -2px;
 }
-
 .react-datepicker__navigation-icon--previous::before {
   transform: rotate(225deg);
   right: -7px;
@@ -1052,13 +366,11 @@
   margin: 0.4rem;
   text-align: center;
 }
-
 .react-datepicker__year-wrapper {
   display: flex;
   flex-wrap: wrap;
   max-width: 180px;
 }
-
 .react-datepicker__year .react-datepicker__year-text {
   display: inline-block;
   width: 4rem;
@@ -1069,7 +381,6 @@
   margin: 0.4rem;
   text-align: center;
 }
-
 .react-datepicker__month .react-datepicker__month-text,
 .react-datepicker__month .react-datepicker__quarter-text {
   display: inline-block;
@@ -1084,34 +395,27 @@
   margin: 5px 0 10px 15px;
   text-align: left;
 }
-
 .react-datepicker__input-time-container .react-datepicker-time__caption {
   display: inline-block;
 }
-
 .react-datepicker__input-time-container .react-datepicker-time__input-container {
   display: inline-block;
 }
-
 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
   display: inline-block;
   margin-left: 10px;
 }
-
 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
   width: auto;
 }
-
-.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
-.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
+.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
+.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-
-.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
+.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
   -moz-appearance: textfield;
 }
-
 .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
   margin-left: 5px;
   display: inline-block;
@@ -1122,7 +426,6 @@
   border-left: 1px solid #aeaeae;
   width: 85px;
 }
-
 .react-datepicker__time-container--with-today-button {
   display: inline;
   border: 1px solid #aeaeae;
@@ -1131,13 +434,11 @@
   right: -72px;
   top: 0;
 }
-
 .react-datepicker__time-container .react-datepicker__time {
   position: relative;
   background: white;
   border-bottom-right-radius: 0.3rem;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
   width: 85px;
   overflow-x: hidden;
@@ -1145,7 +446,6 @@
   text-align: center;
   border-bottom-right-radius: 0.3rem;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
   list-style: none;
   margin: 0;
@@ -1156,32 +456,26 @@
   width: 100%;
   box-sizing: content-box;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
   height: 30px;
   padding: 5px 10px;
   white-space: nowrap;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
   cursor: pointer;
   background-color: #f0f0f0;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
   background-color: #216ba5;
   color: white;
   font-weight: bold;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
   background-color: #216ba5;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
   color: #ccc;
 }
-
 .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
   cursor: default;
   background-color: transparent;
@@ -1195,11 +489,9 @@
   text-align: center;
   margin: 0.166rem;
 }
-
 .react-datepicker__week-number.react-datepicker__week-number--clickable {
   cursor: pointer;
 }
-
 .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
   border-radius: 0.3rem;
   background-color: #f0f0f0;
@@ -1233,20 +525,17 @@
   background-color: #216ba5;
   color: #fff;
 }
-
 .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
 .react-datepicker__quarter--selected:hover,
 .react-datepicker__quarter--in-selecting-range:hover,
 .react-datepicker__quarter--in-range:hover {
   background-color: #1d5d90;
 }
-
 .react-datepicker__month--disabled,
 .react-datepicker__quarter--disabled {
   color: #ccc;
   pointer-events: none;
 }
-
 .react-datepicker__month--disabled:hover,
 .react-datepicker__quarter--disabled:hover {
   cursor: default;
@@ -1259,7 +548,6 @@
 .react-datepicker__year-text {
   cursor: pointer;
 }
-
 .react-datepicker__day:hover,
 .react-datepicker__month-text:hover,
 .react-datepicker__quarter-text:hover,
@@ -1267,14 +555,12 @@
   border-radius: 0.3rem;
   background-color: #f0f0f0;
 }
-
 .react-datepicker__day--today,
 .react-datepicker__month-text--today,
 .react-datepicker__quarter-text--today,
 .react-datepicker__year-text--today {
   font-weight: bold;
 }
-
 .react-datepicker__day--highlighted,
 .react-datepicker__month-text--highlighted,
 .react-datepicker__quarter-text--highlighted,
@@ -1283,28 +569,24 @@
   background-color: #3dcc4a;
   color: #fff;
 }
-
 .react-datepicker__day--highlighted:hover,
 .react-datepicker__month-text--highlighted:hover,
 .react-datepicker__quarter-text--highlighted:hover,
 .react-datepicker__year-text--highlighted:hover {
   background-color: #32be3f;
 }
-
 .react-datepicker__day--highlighted-custom-1,
 .react-datepicker__month-text--highlighted-custom-1,
 .react-datepicker__quarter-text--highlighted-custom-1,
 .react-datepicker__year-text--highlighted-custom-1 {
   color: magenta;
 }
-
 .react-datepicker__day--highlighted-custom-2,
 .react-datepicker__month-text--highlighted-custom-2,
 .react-datepicker__quarter-text--highlighted-custom-2,
 .react-datepicker__year-text--highlighted-custom-2 {
   color: green;
 }
-
 .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
 .react-datepicker__month-text--selected,
 .react-datepicker__month-text--in-selecting-range,
@@ -1319,7 +601,6 @@
   background-color: #216ba5;
   color: #fff;
 }
-
 .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
 .react-datepicker__month-text--selected:hover,
 .react-datepicker__month-text--in-selecting-range:hover,
@@ -1332,38 +613,57 @@
 .react-datepicker__year-text--in-range:hover {
   background-color: #1d5d90;
 }
-
 .react-datepicker__day--keyboard-selected,
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
   border-radius: 0.3rem;
-  background-color: #2a87d0;
+  background-color: #2579ba;
   color: #fff;
 }
-
 .react-datepicker__day--keyboard-selected:hover,
 .react-datepicker__month-text--keyboard-selected:hover,
 .react-datepicker__quarter-text--keyboard-selected:hover,
 .react-datepicker__year-text--keyboard-selected:hover {
   background-color: #1d5d90;
 }
-
-.react-datepicker__day--in-selecting-range ,
-.react-datepicker__month-text--in-selecting-range ,
-.react-datepicker__quarter-text--in-selecting-range ,
-.react-datepicker__year-text--in-selecting-range {
+.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range),
+.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range),
+.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range),
+.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range) {
   background-color: rgba(33, 107, 165, 0.5);
 }
-
-.react-datepicker__month--selecting-range .react-datepicker__day--in-range , .react-datepicker__month--selecting-range
-.react-datepicker__month-text--in-range , .react-datepicker__month--selecting-range
-.react-datepicker__quarter-text--in-range , .react-datepicker__month--selecting-range
-.react-datepicker__year-text--in-range {
+.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__year-text--in-selecting-range),
+.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__year-text--in-selecting-range),
+.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__year-text--in-selecting-range),
+.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__year-text--in-selecting-range) {
   background-color: #f0f0f0;
   color: #000;
 }
-
 .react-datepicker__day--disabled,
 .react-datepicker__month-text--disabled,
 .react-datepicker__quarter-text--disabled,
@@ -1371,7 +671,6 @@
   cursor: default;
   color: #ccc;
 }
-
 .react-datepicker__day--disabled:hover,
 .react-datepicker__month-text--disabled:hover,
 .react-datepicker__quarter-text--disabled:hover,
@@ -1386,7 +685,6 @@
 .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
   background-color: #216ba5;
 }
-
 .react-datepicker__month-text:hover,
 .react-datepicker__quarter-text:hover {
   background-color: #f0f0f0;
@@ -1405,13 +703,11 @@
   border-radius: 0.3rem;
   position: relative;
 }
-
 .react-datepicker__year-read-view:hover,
 .react-datepicker__month-read-view:hover,
 .react-datepicker__month-year-read-view:hover {
   cursor: pointer;
 }
-
 .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
@@ -1420,7 +716,6 @@
 .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
   border-top-color: #b3b3b3;
 }
-
 .react-datepicker__year-read-view--down-arrow,
 .react-datepicker__month-read-view--down-arrow,
 .react-datepicker__month-year-read-view--down-arrow {
@@ -1442,13 +737,11 @@
   border-radius: 0.3rem;
   border: 1px solid #aeaeae;
 }
-
 .react-datepicker__year-dropdown:hover,
 .react-datepicker__month-dropdown:hover,
 .react-datepicker__month-year-dropdown:hover {
   cursor: pointer;
 }
-
 .react-datepicker__year-dropdown--scrollable,
 .react-datepicker__month-dropdown--scrollable,
 .react-datepicker__month-year-dropdown--scrollable {
@@ -1465,14 +758,12 @@
   margin-left: auto;
   margin-right: auto;
 }
-
 .react-datepicker__year-option:first-of-type,
 .react-datepicker__month-option:first-of-type,
 .react-datepicker__month-year-option:first-of-type {
   border-top-left-radius: 0.3rem;
   border-top-right-radius: 0.3rem;
 }
-
 .react-datepicker__year-option:last-of-type,
 .react-datepicker__month-option:last-of-type,
 .react-datepicker__month-year-option:last-of-type {
@@ -1483,25 +774,21 @@
   border-bottom-left-radius: 0.3rem;
   border-bottom-right-radius: 0.3rem;
 }
-
 .react-datepicker__year-option:hover,
 .react-datepicker__month-option:hover,
 .react-datepicker__month-year-option:hover {
   background-color: #ccc;
 }
-
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
   border-bottom-color: #b3b3b3;
 }
-
 .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
 .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
   border-top-color: #b3b3b3;
 }
-
 .react-datepicker__year-option--selected,
 .react-datepicker__month-option--selected,
 .react-datepicker__month-year-option--selected {
@@ -1522,7 +809,6 @@
   display: table-cell;
   vertical-align: middle;
 }
-
 .react-datepicker__close-icon::after {
   cursor: pointer;
   background-color: #216ba5;
@@ -1536,7 +822,7 @@
   text-align: center;
   display: table-cell;
   vertical-align: middle;
-  content: "\00d7";
+  content: "×";
 }
 
 .react-datepicker__today-button {
@@ -1562,29 +848,25 @@
   z-index: 2147483647;
 }
 
-@supports (-webkit-touch-callout: none) {
-
-  .react-datepicker__portal {
+@supports (-webkit-touch-callout: none){
+  .react-datepicker__portal{
     height: -webkit-fill-available;
   }
 }
-
 .react-datepicker__portal .react-datepicker__day-name,
 .react-datepicker__portal .react-datepicker__day,
 .react-datepicker__portal .react-datepicker__time-name {
   width: 3rem;
   line-height: 3rem;
 }
-
 @media (max-width: 400px), (max-height: 550px) {
   .react-datepicker__portal .react-datepicker__day-name,
-  .react-datepicker__portal .react-datepicker__day,
-  .react-datepicker__portal .react-datepicker__time-name {
+.react-datepicker__portal .react-datepicker__day,
+.react-datepicker__portal .react-datepicker__time-name {
     width: 2rem;
     line-height: 2rem;
   }
 }
-
 .react-datepicker__portal .react-datepicker__current-month,
 .react-datepicker__portal .react-datepicker-time__header {
   font-size: 1.44rem;
@@ -1592,7 +874,6 @@
 
 .events-panel-datepicker {
 	display: flex;
-  height: 28px;
 }
 
 .events-panel-datepicker > div {
@@ -1602,39 +883,616 @@
 
 .events-panel-datepicker .date-button {
   padding: 4px 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
-.events-panel-datepicker .date-button:hover {
-	text-decoration: underline;
-}
-
-.events-panel-datepicker__sorting {
-  margin: 4px;
-  border-radius: 4px;
+.events-panel-datepicker sup {
+  font-size: 0.75em;
+  opacity: 0.5;
 }
 
-.x-3deye-button.events-panel-datepicker__sorting--selected {
-  color: white;
-  background-color: #27B9A1;
+.popover-datepicker .react-datepicker {
+  width: 242px;
 }
 
-.popover-datepicker .react-datepicker {
+.popover-datetimepicker .react-datepicker {
   width: 328px;
 }
 
-.popover-datepicker .react-datepicker__time-list {
+.popover-datetimepicker .react-datepicker__time-list {
 	padding: 0 !important;
 }
 
-.popover-datepicker.x-3deye-popover-body {
+.popover-datepicker.x-3deye-popover-body,
+.popover-datetimepicker.x-3deye-popover-body {
   display: flex;
   flex-direction: column;
+  gap: 10px;
+}
+
+.segmented-control-wrapper {
+	display: inline-grid;
+	border-radius: 6px;
+	/* background: rgba(0, 0, 0, 0.065); */
+  background-color: var(--surface-inverse);
+}
+
+.segmented-control {
+	display: grid;
+  margin: 2px;
+	position: relative;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+	--indicator-offset: 0%;
+}
+
+.segmented-control-indicator {
+	position: absolute;
+	height: 100%;
+	pointer-events: none;
+	transform: translateX(var(--indicator-offset));
+	transition: 0.2s ease-in-out;
+}
+
+.segmented-control-indicator-inner {
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.16);
+	border-radius: 6px;
+	background: #fff;
+	transition: 0.2s;
+	transform: scale(1);
+	position: absolute;
+	inset: 0;
+}
+
+.segmented-control-indicator.active .segmented-control-indicator-inner {
+	transform: scale(0.95);
+}
+
+.segmented-control-button {
+	font-family: inherit;
+	min-height: 24px;
+	margin: 2px;
+	background: none;
+	border: none;
+  color: currentColor;
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+  text-overflow: ellipsis;
+  overflow: hidden;
+	z-index: 1;
+}
+
+.segmented-control-button:not(.current):hover {
+	opacity: 0.6;
+}
+
+.segmented-control-button.current {
+	color: black;
+}
+
+.x-3deye-slider {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+.x-3deye-slider:focus-visible {
+	outline: none;
+}
+
+.x-3deye-slider.horizontal {
+	width: 100%;
+	height: 20px;
 }
 
-.events-panel-datepicker__sorting-button {
-  opacity: 0.7;
+.x-3deye-slider.vertical {
+	width: 20px;
+	height: 100%;
+	flex-direction: column;
 }
 
-.events-panel-datepicker__sorting-button:hover {
-  opacity: 1;
+.x-3deye-slider__track {
+	background: var(--surface-inverse, gainsboro);
+	position: relative;
+	flex: 1;
+}
+
+.x-3deye-slider__bar {
+	background-color: var(--primary-color, #0067ac);
+	position: absolute;
+}
+
+.x-3deye-slider.disabled .x-3deye-slider__bar {
+	background-color: rgb(165, 165, 165);
+}
+
+.x-3deye-slider.horizontal .x-3deye-slider__bar {
+	top: 0;
+	bottom: 0;
+	left: 0;
+}
+
+.x-3deye-slider.vertical .x-3deye-slider__bar {
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.x-3deye-slider.horizontal .x-3deye-slider__track {
+	height: 3px;
+}
+
+.x-3deye-slider.vertical .x-3deye-slider__track {
+	width: 3px;
+}
+
+.x-3deye-slider__thumb {
+	will-change: transform box-shadow;
+	background: white;
+	box-shadow: 0 0 0 6px rgba(0, 100, 255, 0), 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	transition: box-shadow 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
+}
+
+.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover,
+.x-3deye-slider:focus .x-3deye-slider__thumb {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.1), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+}
+
+.x-3deye-slider:focus .x-3deye-slider__thumb.active {
+	box-shadow: 0 0 0 6px rgba(var(--surface-highlight-rgb, 0, 100, 255), 0.2), 0 0 0 1px rgba(0, 0, 0, 0.1) inset,
+		1px 1px 2px 0 rgba(0, 0, 0, 0.25);
+}
+
+.x-3deye-slider.horizontal .x-3deye-slider__thumb {
+	margin-left: -10px;
+}
+
+.x-3deye-slider.vertical .x-3deye-slider__thumb {
+	margin-bottom: -10px;
+}
+
+.x-3deye-slider__label {
+	pointer-events: none;
+	touch-action: none;
+	will-change: transform;
+	transform: translate(-50%, -100%) scale(0);
+	background: var(--primary-color, #0067ac);
+	bottom: 50%;
+	left: 50%;
+	color: var(--on-primary-color, white);
+	font-size: 0.75rem;
+	border-radius: 4px;
+	width: -webkit-fit-content;
+	width: -moz-fit-content;
+	width: fit-content;
+	min-width: 24px;
+	padding: 4px 8px;
+	position: relative;
+	transition: transform 150ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 0ms;
+	transform-origin: center bottom;
+}
+
+.x-3deye-slider__label.open,
+.x-3deye-slider:not(.disabled) .x-3deye-slider__thumb:hover .x-3deye-slider__label,
+.x-3deye-slider:focus .x-3deye-slider__label {
+	transform: translate(-50%, -100%) scale(1);
+}
+
+.x-3deye-slider__label::before {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 100%;
+	left: calc(50% - 5px);
+	width: 0;
+	height: 0;
+	border-left: 5px solid transparent;
+	border-right: 5px solid transparent;
+	border-top: 5px solid var(--primary-color, #0067ac);
+}
+
+.color-selector {
+	display: flex;
+	z-index: 1;
+	padding: 5px 0 5px 8px;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.color-selector__items {
+	display: flex;
+  align-items: center;
+}
+
+.color-selector__item {
+	border: none;
+	width: 20px;
+	height: 20px;
+	border-radius: 20px;
+	margin: 4px;
+	padding: 0;
+	box-shadow: 0 0 0 1.5px currentColor;
+	transition: box-shadow 0.2s ease-in;
+  color: currentColor;
+}
+
+.color-selector__item:focus {
+	box-shadow: 0 0 0 1.5px currentColor, 0 0 0 5px rgba(var(--surface-highlight-rgb), 0.2);
+}
+
+.color-selector__item:focus:active {
+	box-shadow: 0 0 0 1.5px currentColor;
+}
+
+.color-selector__item .icon {
+	opacity: 0;
+	transition: opacity 0.2s ease-in;
+}
+
+.color-selector__item.selected .icon {
+	opacity: 1;
+}
+
+.color-selector__clear {
+  border-radius: 50%;
+  padding: 6px;
+}
+
+.preloader-container {
+  color: var(--on-container);
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.event-list-item {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	    -ms-user-select: none;
+	        user-select: none;
+	position: absolute;
+	font-size: 12px;
+	color: rgba(255, 255, 255, 0.75);
+	background-color: rgba(255, 255, 255, 0.1);
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	overflow: hidden;
+	--license-plate-color: rgb(0, 229, 255);
+}
+
+.event-list-item.mdc-ripple-surface {
+	position: absolute;
+}
+
+.event-list-item .x-3deye-button--icon:hover,
+.event-list-item .x-3deye-button--icon:focus {
+	background-color: rgba(0, 0, 0, 0.2);
+}
+
+.event-list-item .acknowledged-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	pointer-events: none;
+	display: grid;
+	place-items: center;
+	background-color: rgba(0, 0, 0, 0.4);
+	color: white;
+	text-transform: uppercase;
+	font-weight: bold;
+}
+
+.event-list-item .no-preview-overlay {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	pointer-events: none;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABaCAYAAABzAJLvAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIDBB8ysGG6bgAAAy1JREFUeNrtnD1oFFEUhc8s6Y0gCDHrT64/EE0UCVEQxB9ioSgWFoqNRgQFG0EQUlhYCXYRBSFuIogkTSKCoNhY2FpYiDYHEYJYiRYuiOhY5EVWFyNxNzvv3T1ftc2+eXO/uWd29s0MIIQQQgghhBBCCCGEEEIIIYQQQgghxILkea4ieIWkqQrNpRTZfF6QnEytk0n2k/xGco8EL8w2AEdIVrIsi1ry/NxIbgXwEsBtM3umzPh3N3SR/EGyksBcyyRzkqMyt3jJ1ZjjmuRAkDsiY/9XwLVBciUWyTWxPBjkXtcvf2dxTXJDkHtNhpzFNcldQe5FmXES1zWxvDvIvapYdhbX4To3J3lFJpzFNcn9Qe55GXAS1zWxPBTkXlYsO4trkjuD3EuquLO4JnkoyD2tSjuJ65pYPhzkXlAsO4trkvuC3HOqrLO4JnksyD3hqTaZI8n9mFu2mwAwBaBjEV8vA7gFYNjMxvM8R5Zlv6J7/rMEFyv4HoCTjYxhZtkfY54xszsp16UEP3Q2+YA5CmAs9aJ4Epw3Ue5BADMeiuJJcDM795GX/ZHgernTnvapQ1p/Y8bbDqmDnSPBEtxWvJVgx5hZjzfJElxPH4BXEuyXKoAdXjpZl0n1MZ0D+AKgh+RndXA8TDT4/Y9A3VLjJnVwwdQs523H3P/RfWa2qHMoyTKAN+GpxuH5Mc3sgzItAkjeCIv1GxsYI5mnGttN7miQu6UJY0X/VGNbUHOD3M0g15p4wET3VGO7du7dIHf1EoytuC5Y7lij51zFdbyxPB5eeLKqBQeS4rrFnTsdOndlC7epuG5Roe8HuesK2LbieoljeSoUeEWBB1iScZ0l0LlPABwAsNzMPhU8ly4AswAmzGw4BcGlyOU+ADAEoFy0XAAws/cAugEcTyWuSxHLfQhgL4BlZjYby7yC5F4k8ka+LFK5zwEMAug0s2qkc0wirksRFu4xgIEQy9VYC5dKXGeRyX2KuReSdpvZ10Qu39YAeA1gEsBZM/uuDv47vQC6UpEbOvkdgPUATgHYrItbp5DU7U9CCCGEEEIIIYQQQgghhBBCCCGEEEIIIUTK/ASpxrk/iYZ2rgAAAABJRU5ErkJggg==');
+	background-color: rgba(128, 128, 128, 0.8);
+}
+
+.event-list-item-caption {
+	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
+	padding-left: 8px;
+	padding-bottom: 8px;
+	padding-top: 8px;
+	position: absolute;
+	font-size: 11px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1;
+	pointer-events: none;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+}
+
+.event-list-item:hover .event-list-item__time {
+	color: white;
+}
+
+.event-list-item__time {
+	text-shadow: 0 1px 2px black;
+	font-size: 14px;
+	order: 1;
+	font-weight: bold;
+}
+
+.event-list-item__camera-name {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	font-weight: bold;
+	font-size: 13px;
+	line-height: 24px;
+	font-family: 'Roboto', sans-serif;
+	/* text-shadow: 0 1px 2px black;
+  line-height: 20px; */
+}
+
+.event-list-item__duration {
+	background-color: rgba(0, 0, 0, 0.75);
+	font-size: 12px;
+	padding: 0 4px;
+	position: absolute;
+	right: 2px;
+	bottom: 32px;
+	opacity: 0.9;
+}
+
+.event-list-item__temperature {
+  font-size: 14px;
+  font-weight: bold;
+  padding: 0 4px;
+  position: absolute;
+  right: 2px;
+  bottom: 4px;
+  display: flex;
+  align-items: center;
+  text-shadow: 0 1px 2px black;
+}
+
+.event-list-item .frame {
+	--frame-color-hsl: 186 100% 50%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	border: 1px solid hsl(var(--frame-color-hsl) / 0.2);
+}
+
+.event-list-item .preview {
+	opacity: 0;
+	position: absolute;
+	pointer-events: none;
+	box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
+  transition: opacity 0s linear 0.2s;
+}
+
+.event-list-item .trigger:hover ~ .preview {
+	opacity: 1;
+}
+
+.event-list-item__license-plate-trigger {
+	outline: 2px solid var(--license-plate-color);
+}
+
+.event-list-item__license-plate .plate-number {
+	font-family: 'Roboto Mono', monospace;
+	color: white;
+}
+
+.event-list-item__license-plate .plate-number .digit {
+	color: var(--license-plate-color);
+}
+
+.event-list-item__license-plate .plate-number .digit:first-of-type {
+	margin-left: 2px;
+}
+
+.event-list-item__license-plate-caption {
+	position: absolute;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	height: 60px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 10px;
+	background-color: black;
+	z-index: 1;
+	padding-left: 10px;
+}
+
+.event-list-item__license-plate-caption .plate-number {
+	font-family: 'Roboto Mono', monospace;
+	font-size: 16px;
+	color: white;
+	border: 2px solid rgba(255, 255, 255, 0.5);
+	padding: 0 8px;
+	border-radius: 4px;
+	letter-spacing: 1px;
+}
+
+.event-list-item__license-plate-caption .plate-number .digit {
+	color: var(--license-plate-color);
+}
+
+.event-list-item__license-plate-caption .plate-number .digit:first-of-type {
+	margin-left: 4px;
+}
+
+.event-list-item__detected-object-label {
+	display: flex;
+	flex-direction: column;
+	background-color: rgba(0, 0, 0, 0.5);
+	position: absolute;
+	font-size: 13px;
+	font-family: 'Roboto Mono', monospace;
+	white-space: nowrap;
+  color: white;
+  font-weight: bold;
+  min-width: 64px;
+}
+
+.event-list-item__detected-object-label__caption {
+	padding-left: 4px;
+	font-size: 9px;
+  line-height: 14px;
+  opacity: 0.75;
+  color: black;
+}
+
+.event-list-item__license-plate-label {
+	display: flex;
+	flex-direction: column;
+	background-color: rgba(0, 0, 0, 0.5);
+	position: absolute;
+	font-size: 14px;
+	font-family: 'Roboto Mono', monospace;
+	white-space: nowrap;
+  color: white;
+}
+
+.event-list-item__license-plate-label .digit {
+	color: var(--license-plate-color);
+}
+
+.event-list-item__license-plate-label .digit:first-of-type {
+	margin-left: 2px;
+}
+
+.event-list-item__license-plate-label__caption {
+	padding-left: 4px;
+	background-color: var(--license-plate-color);
+	color: black;
+  opacity: 0.75;
+	font-size: 10px;
+}
+
+.event-list-item__license-plate .plate-number {
+	position: absolute;
+	background: black;
+	padding-left: 2px;
+	padding-right: 2px;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 16px;
+}
+
+
+.event-list-item__license-plate .frame {
+	--frame-color-hsl: 186 100% 50%;
+}
+
+.event-list-item-face .frame {
+	--frame-color-hsl: 42 100% 50%;
+	bottom: 0;
+}
+
+.event-list-item .menu-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+.frame .corner-highlight-tl {
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	width: 10px;
+	height: 2px;
+	background-color: hsl(var(--frame-color-hsl));
+}
+
+.frame .corner-highlight-tl::before {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 10px;
+	width: 2px;
+	background-color: hsl(var(--frame-color-hsl));
+}
+
+.frame .corner-highlight-tr {
+	position: absolute;
+	top: -1px;
+	right: -1px;
+	width: 10px;
+	height: 2px;
+	background-color: hsl(var(--frame-color-hsl));
+}
+
+.frame .corner-highlight-tr::before {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: 10px;
+	width: 2px;
+	background-color: hsl(var(--frame-color-hsl));
+}
+
+.frame .corner-highlight-br {
+	position: absolute;
+	bottom: -1px;
+	right: -1px;
+	width: 10px;
+	height: 2px;
+	background-color: hsl(var(--frame-color-hsl));
+}
+
+.frame .corner-highlight-br::before {
+	content: '';
+	display: block;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+	height: 10px;
+	width: 2px;
+	background-color: hsl(var(--frame-color-hsl));
+}
+
+.frame .corner-highlight-bl {
+	position: absolute;
+	bottom: -1px;
+	left: -1px;
+	width: 10px;
+	height: 2px;
+	background-color: hsl(var(--frame-color-hsl));
+}
+
+.frame .corner-highlight-bl::before {
+	content: '';
+	display: block;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 10px;
+	width: 2px;
+	background-color: hsl(var(--frame-color-hsl));
 }