@3deye-toolkit/react-event-list 0.0.3 → 0.0.5

package/dist/react-event-list.css

@@ -1,951 +1 @@
-.x-3deye-popover-container.popover-datetimepicker,
-.x-3deye-popover-container.popover-datepicker {
-	background: white;
-	color: black;
-	padding: 1rem;
-}
-
-.x-3deye-popover-container.popover-datetimepicker .tip,
-.x-3deye-popover-container.popover-datepicker .tip {
-	--tip-background: white;
-	--tip-border: transparent;
-}
-
-.popover-datetimepicker {
-	--surface-inverse: #e1e1e1;
-}
-
-.popover-datepicker.x-3deye-popover-body,
-.popover-datetimepicker.x-3deye-popover-body {
-	display: flex;
-	flex-direction: column;
-	gap: 10px;
-}
-
-.events-panel-datepicker {
-	display: flex;
-}
-
-.events-panel-datepicker > div {
-	flex: 1;
-	display: flex;
-}
-
-.events-panel-datepicker .date-button {
-	padding: 4px 8px;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-}
-
-.events-panel-datepicker .date-button label {
-	font-size: 0.75em;
-	opacity: 0.5;
-}
-
-.x-3deye-button {
-	color: inherit;
-	background: none;
-	border: none;
-	position: relative;
-	padding: 0 8px;
-	height: 32px;
-	-webkit-user-select: none;
-	   -moz-user-select: none;
-	        user-select: none;
-	display: inline-flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 4px;
-	letter-spacing: 0.0107142857em;
-	font-weight: 500;
-}
-
-.x-3deye-button sup {
-	position: relative;
-	top: -0.5em;
-	left: 0.25em;
-}
-
-.x-3deye-button.x-3deye-button--fullwidth {
-	width: 100%;
-}
-
-.x-3deye-button:focus,
-.x-3deye-button.x-3deye-button:not(:disabled):hover {
-	background-color: rgba(var(--surface-highlight-rgb), 0.1);
-}
-
-.x-3deye-button--icon {
-	border-radius: 16px;
-	padding: 4px;
-	width: 32px;
-	height: 32px;
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.x-3deye-button--action .icon {
-	opacity: 0.5;
-}
-
-.x-3deye-button--action:hover .icon {
-	opacity: 1;
-}
-
-.x-3deye-button:disabled {
-	opacity: 0.4;
-}
-
-.x-3deye-button:not(:disabled) {
-	cursor: pointer;
-}
-
-.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: rgb(39, 185, 161);
-	color: white;
-}
-
-.x-3deye-button.x-3deye-button--filled:not(:disabled):hover {
-	background-color: rgb(34, 163, 142);
-}
-
-.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 canvas {
-	color: rgb(var(--surface-highlight-rgb));
-}
-
-.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.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);
-}
-
-.x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(
-		:disabled
-	),
-.x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(
-		:disabled
-	):hover {
-	background-color: rgba(156, 51, 49, 0.5);
-}
-
-.x-3deye-tooltip {
-	background: rgb(0 0 0 / 0.9);
-	color: white;
-	border: none;
-	border-radius: 4px;
-	padding: 0.5em 1em;
-	font-size: 12px;
-	border: rgb(255 255 255 / 0.15) 1px solid;
-}
-
-.x-3deye-popover-container {
-	background: #222;
-	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);
-	color: white;
-	border-radius: 6px;
-	padding: 8px;
-	text-align: left;
-	animation: slide-in 0.15s ease-in;
-}
-
-@media (prefers-reduced-motion: reduce) {
-	.x-3deye-popover-container {
-		animation: none;
-	}
-}
-
-.x-3deye-popover-container .tip {
-	--tip-background: #222;
-	--tip-border: rgb(255 255 255 /0.05);
-}
-
-.x-3deye-datetimepicker {
-	width: -moz-max-content;
-	width: max-content;
-}
-
-.x-3deye-button.button-date {
-	text-transform: none;
-	font-family: 'Roboto Mono', monospace;
-}
-
-.x-3deye-button.button-date:hover {
-	text-decoration: underline;
-}
-
-.x-3deye-timepicker {
-	height: 260px;
-	overflow: hidden;
-}
-
-.x-3deye-timepicker__column {
-	text-align: center;
-	overflow: hidden;
-	overflow-x: hidden;
-	width: 60px;
-	font-size: 0.85rem;
-	flex: 1;
-}
-
-.x-3deye-timepicker--alt .x-3deye-timepicker__column {
-	height: 100%;
-	white-space: nowrap;
-	width: -moz-max-content;
-	width: max-content;
-	overflow-y: scroll;
-}
-
-.x-3deye-timepicker--alt .x-3deye-timepicker__column > div {
-	width: -moz-max-content;
-	width: max-content;
-}
-
-.x-3deye-timepicker__column:hover {
-	overflow-y: scroll;
-}
-
-.x-3deye-timepicker__value {
-	border-radius: 0.25rem;
-	height: 30px;
-	line-height: 30px;
-	padding: 0 10px;
-}
-
-.x-3deye-datepicker__day {
-	font-weight: 500;
-	width: 1.75rem;
-	height: 1.75rem;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	border-radius: 0.25rem;
-}
-
-.x-3deye-datepicker__day:not(.x-3deye-datepicker__day--selected):not(
-		.x-3deye-datepicker__day--disabled
-	):hover {
-	background-color: rgba(0, 0, 0, 0.05);
-	color: currentColor;
-}
-
-.x-3deye-datepicker__day--next-month,
-.x-3deye-datepicker__day--previous-month {
-	color: oklch(0.7 0 0);
-}
-
-.x-3deye-datepicker__day--disabled {
-	color: oklch(0.9 0 0);
-}
-
-.x-3deye-datepicker__day--selected {
-	background-color: #0067ac;
-	color: white;
-}
-
-.x-3deye-datepicker__day--today {
-	font-weight: 700;
-	border: 2px solid #0067ac66;
-}
-
-.x-3deye-timepicker__column > div {
-	height: 40px;
-	width: 60px;
-	padding: 5px 10px;
-}
-
-.x-3deye-timepicker__column > div:hover .x-3deye-timepicker__value {
-		background-color: rgba(0, 0, 0, 0.05);
-	}
-
-.x-3deye-timepicker__column > div.selected .x-3deye-timepicker__value {
-		background-color: #0067ac;
-		color: white;
-	}
-
-.x-3deye-datepicker__button--previous-month,
-.x-3deye-datepicker__button--next-month {
-	padding: 0;
-
-	opacity: 0.3;
-}
-
-.x-3deye-datepicker__button--previous-month:disabled, .x-3deye-datepicker__button--next-month:disabled {
-		opacity: 0.1;
-	}
-
-.x-3deye-datepicker__button--previous-month:hover:not(:disabled), .x-3deye-datepicker__button--next-month:hover:not(:disabled) {
-		opacity: 1;
-	}
-
-.segmented-control-wrapper {
-	display: inline-grid;
-	border-radius: 6px;
-	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;
-	        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;
-}
-
-.x-3deye-slider.vertical {
-	width: 20px;
-	height: 100%;
-	flex-direction: column;
-}
-
-.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: -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 {
-	flex: 1;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.event-list-item {
-	-webkit-user-select: none;
-	   -moz-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 .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 :is(.char + .digit) {
-		margin-left: 0.25rem;
-	}
-
-.event-list-item__license-plate-caption .plate-number :is(.digit + .char) {
-		margin-left: 0.25rem;
-	}
-
-.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;
-}
-
-.menu-button {
-  border: none;
-  background: none;
-}
-
-.menu-button[data-open],
-.menu-button:hover {
-  background-color: rgba(var(--surface-highlight-rgb), 0.1);
-}
-
-.menu-list {
-  background-color: var(--container);
-	color: var(--on-container);
-  -webkit-backdrop-filter: blur(10px);
-          backdrop-filter: blur(10px);
-  padding: 4px;
-  border-radius: 6px;
-  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);
-  outline: 0;
-}
-
-.menu-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: none;
-  width: 100%;
-  border: none;
-  border-radius: 4px;
-  text-align: left;
-  min-width: 120px;
-  margin: 0;
-  outline: 0;
-}
-
-.menu-item--danger {
-  color: var(--danger-color);
-}
-
-.menu-item.x-3deye-button {
-	font-size: 14px;
-	background: none;
-	border: none;
-	text-align: left;
-	padding: 8px 16px;
-	width: 100%;
-	letter-spacing: 0.5px;
-	height: -moz-fit-content;
-	height: fit-content;
-}
-
-.menu-item:focus {
-  background-color: rgba(var(--surface-highlight-rgb), 0.1);
-}
-
-.menu-item[data-focus-inside][data-open] {
-  background-color: rgba(var(--surface-highlight-rgb), 0.1);
-}
-
-.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));
-}
+.event-grid-datepicker{display:flex;&>div{flex:1;display:flex}& .date-button{flex-direction:column;justify-content:center;padding:4px 8px;display:flex;& label{opacity:.5;font-size:.75em}}}.color-selector{z-index:1;justify-content:space-between;align-items:center;padding:5px 0 5px 8px;display:flex}.color-selector__items{align-items:center;display:flex}.color-selector__item{color:currentColor;border:none;border-radius:20px;width:20px;height:20px;margin:4px;padding:0;transition:box-shadow .2s ease-in;box-shadow:0 0 0 1.5px}.color-selector__item:focus{box-shadow:0 0 0 1.5px currentColor,0 0 0 5px rgba(var(--surface-highlight-rgb),.2)}.color-selector__item:focus:active{box-shadow:0 0 0 1.5px}.color-selector__item .icon{opacity:0;transition:opacity .2s ease-in}.color-selector__item.selected .icon{opacity:1}.color-selector__clear{border-radius:50%;padding:6px}.x-3deye-button{color:inherit;user-select:none;letter-spacing:.0107143em;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;height:32px;padding:0 8px;font-weight:500;display:inline-flex;position:relative}.x-3deye-button sup{position:relative;top:-.5em;left:.25em}.x-3deye-button.x-3deye-button--fullwidth{width:100%}.x-3deye-button:focus,.x-3deye-button.x-3deye-button:not(:disabled):hover{background-color:rgba(var(--surface-highlight-rgb),.1)}.x-3deye-button--icon{border-radius:16px;justify-content:center;align-items:center;width:32px;height:32px;padding:4px;display:inline-flex}.x-3deye-button--action .icon{opacity:.5}.x-3deye-button--action:hover .icon{opacity:1}.x-3deye-button:disabled{opacity:.4}.x-3deye-button:not(:disabled){cursor:pointer}.x-3deye-button.x-3deye-button--filled,.x-3deye-button.x-3deye-button--text{text-transform:capitalize;border-radius:.25rem;min-width:80px;padding:0 1rem;font-family:Roboto,sans-serif;font-size:.875rem;font-weight:500}.x-3deye-button.x-3deye-button--filled{color:#fff;background-color:#27b9a1}.x-3deye-button.x-3deye-button--filled:not(:disabled):hover{background-color:#22a38e}.x-3deye-button.x-3deye-button--filled:focus{transition:box-shadow .2s cubic-bezier(.215,.61,.355,1);box-shadow:0 0 0 2px #27b9a154}.x-3deye-button canvas{color:rgb(var(--surface-highlight-rgb))}.x-3deye-button--overlay{pointer-events:auto;color:#fff;background:#00000080;border:2px solid #ffffff40}.x-3deye-button.x-3deye-button--overlay:focus,.x-3deye-button.x-3deye-button--overlay:not(:disabled):hover{background:#00000080;border:2px solid #ffffff80}.x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled),.x-3deye-button.x-3deye-button--overlay.x-3deye-button--overlay-danger:not(:disabled):hover{background-color:#9c333180}.preloader-container{flex:1;justify-content:center;align-items:center;display:flex}.x-3deye-datetimepicker{width:max-content}.x-3deye-button.button-date{text-transform:none;font-family:Roboto Mono,monospace}.x-3deye-button.button-date:hover{text-decoration:underline}.x-3deye-timepicker{height:260px;overflow:hidden}.x-3deye-timepicker__column{text-align:center;flex:1;width:60px;font-size:.85rem;overflow:hidden}.x-3deye-timepicker--alt .x-3deye-timepicker__column{white-space:nowrap;width:max-content;height:100%;overflow-y:scroll}.x-3deye-timepicker--alt .x-3deye-timepicker__column>div{width:max-content}.x-3deye-timepicker__column:hover{overflow-y:scroll}.x-3deye-timepicker__value{border-radius:.25rem;height:30px;padding:0 10px;line-height:30px}.x-3deye-datepicker__day{border-radius:.25rem;justify-content:center;align-items:center;width:1.75rem;height:1.75rem;font-weight:500;display:flex}.x-3deye-datepicker__day:not(.x-3deye-datepicker__day--selected):not(.x-3deye-datepicker__day--disabled):hover{color:currentColor;background-color:#0000000d}.x-3deye-datepicker__day--next-month,.x-3deye-datepicker__day--previous-month{color:oklch(.7 0 0)}.x-3deye-datepicker__day--disabled{color:oklch(.9 0 0)}.x-3deye-datepicker__day--selected{color:#fff;background-color:#0067ac}.x-3deye-datepicker__day--today{border:2px solid #0067ac66;font-weight:700}.x-3deye-timepicker__column>div{width:60px;height:40px;padding:5px 10px;&:hover .x-3deye-timepicker__value{background-color:#0000000d}&.selected .x-3deye-timepicker__value{color:#fff;background-color:#0067ac}}.x-3deye-datepicker__button--previous-month,.x-3deye-datepicker__button--next-month{opacity:.3;padding:0;&:disabled{opacity:.1}&:hover:not(:disabled){opacity:1}}.x-3deye-popover-container{color:#fff;text-align:left;background:#222;border-radius:6px;padding:8px;animation:.15s ease-in slide-in;box-shadow:0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff0d}@media (prefers-reduced-motion:reduce){.x-3deye-popover-container{animation:none}}.x-3deye-popover-container .tip{--tip-background:#222;--tip-border:#ffffff0d}.segmented-control-wrapper{background-color:var(--surface-inverse);border-radius:6px;display:inline-grid}.segmented-control{--indicator-offset:0%;grid-auto-columns:1fr;grid-auto-flow:column;margin:2px;display:grid;position:relative}.segmented-control-indicator{pointer-events:none;transform:translateX(var(--indicator-offset));height:100%;transition:all .2s ease-in-out;position:absolute}.segmented-control-indicator-inner{background:#fff;border-radius:6px;transition:all .2s;position:absolute;inset:0;transform:scale(1);box-shadow:0 0 5px #00000029}.segmented-control-indicator.active .segmented-control-indicator-inner{transform:scale(.95)}.segmented-control-button{color:currentColor;user-select:none;text-overflow:ellipsis;z-index:1;background:0 0;border:none;min-height:24px;margin:2px;font-family:inherit;overflow:hidden}.segmented-control-button:not(.current):hover{opacity:.6}.segmented-control-button.current{color:#000}#x-3deye-floating-ui-root{z-index:calc(infinity);width:100%;position:absolute}.x-3deye-select-container{background-color:#00000080;border-radius:.5rem;display:flex;& *{box-sizing:border-box}& .x-3deye-select-body{padding:.375rem .5rem;display:grid;&>*{grid-area:1/1}}& .x-3deye-multi-select-body{flex-wrap:wrap;gap:4px;padding:.375rem .5rem;display:flex}& .x-3deye-select-value{color:#333;background-color:var(--color,#e6e6e6);border-radius:2px;align-items:center;gap:4px;min-height:24px;padding-left:6px;font-size:.75rem;display:inline-flex;&>.icon{flex-shrink:0}& .close-button{background-color:var(--color,#e6e6e6);color:inherit;border:none;border-top-right-radius:2px;border-bottom-right-radius:2px;justify-content:center;align-items:center;width:24px;min-width:24px;height:100%;margin:0 0 0 3px;padding:0;display:flex;&:hover,&:focus{background-color:var(--background-color,#ffbdad);color:var(--color,#de350b)}}}}.x-3deye-select-indicators{color:#ccc;&:hover{color:#e6e6e6}}.x-3deye-select-container--open,.x-3deye-select-container:has(.x-3deye-select input:focus){background-color:#fff;& .x-3deye-select-indicators{color:#747474;&:hover{color:#747474}}& .x-3deye-select-single-value{color:#000}}.x-3deye-select{line-height:0;display:inline-grid}.x-3deye-select-placeholder{color:#b3b3b3;pointer-events:none;grid-area:1/1;align-items:center;gap:4px;display:flex}.x-3deye-select-single-value{color:#fff;grid-area:1/1;align-content:center;padding:.25em .25em .25em 0}.x-3deye-select:after,.x-3deye-select input{font:inherit;resize:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;border:none;grid-area:1/1;min-width:1em;margin:0;padding:.25em .25em .25em 0}.x-3deye-select input{height:24px;&:focus{outline:none}}.x-3deye-select:after{content:attr(data-value)" ";visibility:hidden;white-space:pre-wrap}.x-3deye-select-menu{background:#fff;border-radius:.25rem;box-shadow:0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #6666660d}.x-3deye-select-option{cursor:default;align-items:center;padding:8px;font-size:.875rem;display:flex}.x-3deye-select-option--selected{color:#fff;background-color:#2196f3!important}.event-list-item{user-select:none;color:#ffffffbf;--license-plate-color:#00e5ff;background-color:#ffffff1a;font-size:12px;position:absolute;inset:0;overflow:hidden}.event-list-item .x-3deye-button--icon:hover,.event-list-item .x-3deye-button--icon:focus{background-color:#0003}.event-list-item .acknowledged-overlay{pointer-events:none;color:#fff;text-transform:uppercase;background-color:#0006;place-items:center;font-weight:700;display:grid;position:absolute;inset:0}.event-list-item .no-preview-overlay{pointer-events:none;background-color:#808080cc;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-position:50%;background-repeat:no-repeat;display:block;position:absolute;inset:0}.event-list-item-caption{z-index:1;pointer-events:none;background:linear-gradient(#0000 0%,#000000a6 100%);flex-direction:column;justify-content:flex-end;padding-top:8px;padding-bottom:8px;padding-left:8px;font-size:11px;display:flex;position:absolute;bottom:0;left:0;right:0}.event-list-item:hover .event-list-item__time{color:#fff}.event-list-item__time{text-shadow:0 1px 2px #000;order:1;font-size:14px;font-weight:700}.event-list-item__camera-name{white-space:nowrap;text-overflow:ellipsis;font-family:Roboto,sans-serif;font-size:13px;font-weight:700;line-height:24px;overflow:hidden}.event-list-item__duration{opacity:.9;background-color:#000000bf;padding:0 4px;font-size:12px;position:absolute;bottom:32px;right:2px}.event-list-item__temperature{text-shadow:0 1px 2px #000;align-items:center;padding:0 4px;font-size:14px;font-weight:700;display:flex;position:absolute;bottom:4px;right:2px}.event-list-item .frame{--frame-color-hsl:186 100% 50%;border:1px solid hsl(var(--frame-color-hsl)/.2);position:absolute;top:0;left:0;right:0}.event-list-item .preview{opacity:0;pointer-events:none;transition:opacity 0s linear .2s;position:absolute;box-shadow:0 0 4px #000000bf}.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{color:#fff;font-family:Roboto Mono,monospace}.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{z-index:1;background-color:#000;justify-content:space-between;align-items:center;gap:10px;height:60px;padding-left:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.event-list-item__license-plate-caption .plate-number{color:#fff;letter-spacing:1px;border:2px solid #ffffff80;border-radius:4px;padding:0 8px;font-family:Roboto Mono,monospace;font-size:16px;& .digit{color:var(--license-plate-color)}& :is(.char+.digit),& :is(.digit+.char){margin-left:.25rem}}.event-list-item__detected-object-label{white-space:nowrap;color:#fff;background-color:#00000080;flex-direction:column;min-width:64px;font-family:Roboto Mono,monospace;font-size:13px;font-weight:700;display:flex;position:absolute}.event-list-item__detected-object-label__caption{opacity:.75;color:#000;padding-left:4px;font-size:9px;line-height:14px}.event-list-item__license-plate-label{white-space:nowrap;color:#fff;background-color:#00000080;flex-direction:column;font-family:Roboto Mono,monospace;font-size:14px;display:flex;position:absolute}.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{background-color:var(--license-plate-color);color:#000;opacity:.75;padding-left:4px;font-size:10px}.event-list-item__license-plate .plate-number{background:#000;height:16px;padding-left:2px;padding-right:2px;position:absolute;bottom:0;left:0;right:0}.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}.x-3deye-slider{align-items:center;display:flex;position:relative}.x-3deye-slider:focus-visible{outline:none}.x-3deye-slider.horizontal{width:100%;height:20px}.x-3deye-slider.vertical{flex-direction:column;width:20px;height:100%}.x-3deye-slider__track{background:var(--surface-inverse,gainsboro);flex:1;position:relative}.x-3deye-slider__bar{background-color:var(--primary-color,#0067ac);position:absolute}.x-3deye-slider.disabled .x-3deye-slider__bar{background-color:#a5a5a5}.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:#fff;border-radius:50%;width:20px;height:20px;transition:box-shadow .15s cubic-bezier(.45,.05,.55,.95);box-shadow:0 0 0 6px #0064ff00,inset 0 0 0 1px #0000001a,1px 1px 2px #00000040}.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),.1),0 0 0 1px #0000001a inset,1px 1px 2px 0 #00000040}.x-3deye-slider:focus .x-3deye-slider__thumb.active{box-shadow:0 0 0 6px rgba(var(--surface-highlight-rgb,0,100,255),.2),0 0 0 1px #0000001a inset,1px 1px 2px 0 #00000040}.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;background:var(--primary-color,#0067ac);color:var(--on-primary-color,white);transform-origin:bottom;border-radius:4px;width:fit-content;min-width:24px;padding:4px 8px;font-size:.75rem;transition:transform .15s cubic-bezier(.45,.05,.55,.95);position:relative;bottom:50%;left:50%;transform:translate(-50%,-100%)scale(0)}.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:"";border-left:5px solid #0000;border-right:5px solid #0000;border-top:5px solid var(--primary-color,#0067ac);width:0;height:0;display:block;position:absolute;top:100%;left:calc(50% - 5px)}.x-3deye-tooltip{color:#fff;background:#000000e6;border:1px solid #ffffff26;border-radius:4px;padding:.5em 1em;font-size:12px}.menu-button{background:0 0;border:none}.menu-button[data-open],.menu-button:hover{background-color:rgba(var(--surface-highlight-rgb),.1)}.menu-list{background-color:var(--container);color:var(--on-container);backdrop-filter:blur(10px);border-radius:6px;outline:0;padding:4px;box-shadow:0 12px 28px #0003,0 2px 4px #0000001a,inset 0 0 0 1px #ffffff0d}.menu-item{text-align:left;background:0 0;border:none;border-radius:4px;outline:0;justify-content:space-between;align-items:center;width:100%;min-width:120px;margin:0;display:flex}.menu-item--danger{color:var(--danger-color)}.menu-item.x-3deye-button{text-align:left;letter-spacing:.5px;background:0 0;border:none;width:100%;height:fit-content;padding:8px 16px;font-size:14px}.menu-item:focus,.menu-item[data-focus-inside][data-open]{background-color:rgba(var(--surface-highlight-rgb),.1)}.frame .corner-highlight-tl{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;top:-1px;left:-1px}.frame .corner-highlight-tl:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;top:0;left:0}.frame .corner-highlight-tr{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;top:-1px;right:-1px}.frame .corner-highlight-tr:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;top:0;right:0}.frame .corner-highlight-br{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;bottom:-1px;right:-1px}.frame .corner-highlight-br:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;bottom:0;right:0}.frame .corner-highlight-bl{background-color:hsl(var(--frame-color-hsl));width:10px;height:2px;position:absolute;bottom:-1px;left:-1px}.frame .corner-highlight-bl:before{content:"";background-color:hsl(var(--frame-color-hsl));width:2px;height:10px;display:block;position:absolute;bottom:0;left:0}