@charset "utf-8";

:root {
	--prim_h: 239;
	--prim_s: 92%;
	--prim_l: 66%;
	--prim_sdyn: 0.5;
	--prim_lfac: min(var(--prim_l), calc(100% - var(--prim_l)));	
	
	/*
	--prim10: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 - var(--prim_sdyn) / 2 * 1.86))) calc(var(--prim_l) - calc(var(--prim_lfac) * 0.90)));
	--prim20: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 - var(--prim_sdyn) / 2 * 1.75))) calc(var(--prim_l) - calc(var(--prim_lfac) * 0.68)));
	--prim30: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 - var(--prim_sdyn) / 2 * 1.50))) calc(var(--prim_l) - calc(var(--prim_lfac) * 0.45)));
	--prim40: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 - var(--prim_sdyn) / 2 * 1.00))) calc(var(--prim_l) - calc(var(--prim_lfac) * 0.23)));
	--prim: hsl(var(--prim_h) var(--prim_s) var(--prim_l));
	--prim60: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 + var(--prim_sdyn) / 2 * 1.00))) calc(var(--prim_l) + calc(var(--prim_lfac) * 0.23)));
	--prim70: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 + var(--prim_sdyn) / 2 * 1.50))) calc(var(--prim_l) + calc(var(--prim_lfac) * 0.45)));
	--prim80: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 + var(--prim_sdyn) / 2 * 1.75))) calc(var(--prim_l) + calc(var(--prim_lfac) * 0.68)));
	--prim90: hsl(var(--prim_h) min(100%, calc(var(--prim_s) * (1 + var(--prim_sdyn) / 2 * 1.86))) calc(var(--prim_l) + calc(var(--prim_lfac) * 0.90)));	
	*/
	
	--prim10: hsl(239 49% 35%);
	--prim20: hsl(239 52% 43%);
	--prim30: hsl(239 58% 51%);
	--prim40: hsl(239 69% 58%);
	--prim: hsl(239 92% 66%);
	--prim60: hsl(239 100% 72%);
	--prim70: hsl(239 100% 79%);
	--prim80: hsl(239 100% 87%);
	--prim90: hsl(239 100% 96%);

	--scnd: blue;
	--font: var(--prim90);
	--soft: #A6B1C9;

	--d05: hsl(221 100% 3.5%);
	--d10: hsl(221 60% 5.5%);
	--d15: hsl(221 45% 10%);
	--d18: hsl(221 40% 11%);
	--d20: hsl(221 35% 14%);
	--d25: hsl(221 30% 18%);
	--d30: hsl(221 25% 25%);
	--d35: hsl(221 22% 28%);
	--d40: hsl(221 19% 35%);
	--d50: hsl(221 13% 48%);

	--b: hsl(221 20% 20%);
	--b_soft: hsl(221deg 25% 15%);
	
	--br: 1rem;
	--br_less: calc(var(--br) * 0.6);
	--br_more: calc(var(--br) * 1.4);
	
	--m: 100px;
	--n: 90px;

	--neutral: #a9acff;
	--pink: #ffb1ea;
	--pink30: #c75c81;
	--mint: #71ebf1;
	--mint30: #7dddd5;
	--mint_de: #9ee3de;

	--mask_background: rgb(0 0 0 / 75%);
	--mask_closable_background: var(--mask_background);

	--box_mini: 400px;
	--box_small: 520px;
	--box: 740px;
	--box_medium: 960px;
	--box_large: 1080px;
	--box_full: 1480px;
	
	--c: 4rem;
	--top_row: 5rem;
	--search_row: 5.7rem;
	--grid_gap: 3rem;
	
	--move_in: 0.5s cubic-bezier(.75,0,.15,1);
	
	--fade_in_up: 30%;
	--fade_in_up_f: 4rem;
}
html {
	scrollbar-color: var(--d50) var(--d20);
}
html, body {
	height: 100vh;
	height: 100dvh;
	min-height: 715px;
	max-height: 1700px;
}
body {
	background-color: var(--d05);
	padding: 0;
	color: var(--font);
	font-family: 'Satoshi-Variable', sans-serif;
	font-weight: 500;
	letter-spacing: 0.015em;
	scrollbar-color: var(--d50) transparent;
	-webkit-tap-highlight-color: transparent;
}
body * {
	scrollbar-width: thin;
}
::-moz-selection {
	background: var(--mint);
	color: #000000;
}
::selection {
	background: var(--mint);
	color: #000000;
}
header, #hic_mum {
	transition: 0.25s;
}
.container {
	height: 100%;
	border-radius: var(--br_more);
	overflow: hidden;
	max-width: 1600px;
	display: flex;
	box-shadow: 0 0 0 1px var(--b_soft);
}
main {
	flex: 1;
}
.entrance {
	opacity: 0;
	-webkit-animation: fade_in 0.25s forwards 0.2s;
	animation: fade_in 0.25s forwards 0.2s;
}
main.padd_leri {
	padding-left: calc(var(--m) / 1.25);
}


body {
    display: flex;
    align-items: center;
}
.container {
	max-height: 1020px;
}
.padd_tobo {
	padding-top: calc(var(--n) - 10px);
}
m, .m {
	font-weight: 500 !important;
}
b, .bold {
	font-weight: 700 !important;
}
strong, .strong {
	font-weight: 900 !important;
}
img.full {
	width: 100%;
}
.sheet img {
	display: inline-block;
}
.sheet span {
    font-size: 1em !important;
}
h1, h2, h3, h4, h5 {
	padding: 0;
}
h1 {
	font-size: 3.0rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3em;
	margin: 0 0 0.5em 0;
	word-wrap: break-word;
}
.top_row > h1 {
	flex: 1;
}
h2 {
	font-size: 2.5rem;
	font-weight: 650;
	letter-spacing: 0;
	line-height: 1.2em;
	margin: 0 0 1.7em 0;
}
h3 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.1em;
    margin: 0 0 1em 0;
}
h4 {
	font-size: 1.8rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.0em;
	margin: 0 0 0.75em 0;
}
h5 {
	font-size: 1.6rem;
    font-weight: 600;
	letter-spacing: 0;
	line-height: 0.9em;
    margin: 0 0 0.75em 0;
}
p, ul, ol {
	font-size: 1.5rem;
	margin: 0 0 0.75em 0;
	font-weight: 450;
	line-height: 1.6em;
	padding-left: 0;
}
p:last-child, ul:last-child, ol:last-child {
	margin-bottom: 0;
}
p + h2, ul + h2, ol + h2 {
	margin-top: 1.25em;
}
p + h3, ul + h3, ol + h3 {
	margin-top: 1.5em;
}
ul {
	list-style-type: none;
}
ol {
	list-style-position: inside;
}
.sheet ul li {
	padding-left: 1.6em;
}
.sheet ul li:before {
    content: "•";
    display: inline-block;
    position: absolute;
    margin-left: -1.6em;
    color: var(--prim);
}
.logo, .logo_svg  {
	display: block;
	position: relative;
	float: left;
	width: auto;
}
.logo {
	height: var(--top_row);
	display: flex;
	align-items: center;
}
.logo_svg {
	height: 3.6rem;
}
.logo_door, .logo_main {
	fill: white;
}
.logo_sub {
	fill: var(--prim70);
}
#hic_mum {
	display: none;
	position: relative;
	cursor: pointer;
}
.tr_icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tr_icon:before {
    content: "";
    position: absolute;
	inset: -10px;
}
.tr_icon, .tr_icon > .icon, .tr_right:empty {
	width: 2.8rem;
	height: 2.8rem;	
}
.tr_icon > .icon {
	stroke-width: var(--button_icon_strokewidth);
}
.center_mum {
	display: flex !important;
    align-items: center;
    justify-content: center;
}
.preload {
	background-color: #2F3235; 
	background-image: url(../_gfx/preload_logo.svg);
	background-size: 190px auto;
	background-repeat: no-repeat;
	background-position: center center;
}
footer ul {
	font-size: 1.3rem;
	font-weight: 300;
	line-height: 1.3em;
	color: rgba(255,255,255,0.9);
	letter-spacing: 0.1em;
	padding: 0;
	margin: 0;
}
footer ul li {
	text-align: left;
	padding: 4px 0;
}
footer ul li a:hover {
	color: #FFFFFF;
}
#message {
	color: var(--d05);
	font-size: 1.3rem;
	font-weight: 500;
	padding: 1.5rem var(--m);
	border-radius: var(--br);
    transform: translate(-50%, -2.8rem);
}
.fail {
    background-color: var(--pink30);
    color: white !important;
}
.success {
	background-color: var(--mint_de);
}
.sumsy_mode_mum {
	position: fixed;
	left: -15px;
	top: 50%;
	margin-top: -22px;
	width: 28px;
	height: 44px;
	background-color: #404751;
	border-radius: 0 5px 5px 0;
	transition: 0.05s linear;
	box-shadow: 0 1px 2px rgb(0 0 0 / 80%);
	z-index: 1;
}
.sumsy_mode_mum:hover {
	background-color: #282E36;
	left: -10px;
}
.sumsy_mode_mum svg {
	fill: #FFFFFF;
	width: 28px;
	height: 44px;
}
.sumsy_mode_mum circle {
	opacity: 0.20;
}
.sumsy_iframe {
	position: fixed;
	top: 0;
	right: -100%;
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%;
	z-index: 999;
	transition: 0.5s ease-in-out;
	box-shadow: 0 0 20px rgb(0 0 0 / 30%);
}
.sumsy_blur {
    opacity: 0.4;
	-webkit-filter: blur(2px) grayscale(100%);
	filter: blur(2px) grayscale(100%);
}
.sumsy_blur .container {
	pointer-events: none;
}
.close:hover:before, .close:hover:after {
	background-color: var(--prim);
}
.load:after {
	width: 2.2rem;
	height: 2.2rem;
	border: 0.3rem solid;
	margin: -1.1rem 0 0 -1.1rem;
	border-color: white !important;
	border-bottom-color: transparent !important;
	-webkit-animation: spin 0.8s linear infinite;
			animation: spin 0.8s linear infinite;
}



.sidebar_inner, main {
	display: flex;
    flex-direction: column;
}
.sidebar {
	position: relative;
    flex: 0 0 340px;
}
.sidebar_inner {
	height: 100%;
    padding-left: var(--grid_gap);
    padding-right: var(--grid_gap);
	background-color: var(--d15);
}
.top {
	flex: 0 0 180px;
}
.sidebar_inner .top {
	padding: 0 var(--c);
}
.top_row {
	height: var(--top_row);
	margin-bottom: 1.2rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
nav, nav ul {
	flex: 1;
	margin: 0;
	padding: 0;
}
nav ul {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.sb_cell {
	cursor: pointer;
}
.sb_cell, .sb_user {
	position: relative;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.4em;
	margin: 0;
	height: var(--search_row);
	padding: 0 var(--c);
	border-radius: var(--br);
	display: flex;
	align-items: center;
	gap: 2rem;
	transition: 0.2s;
}
.sb_cell span {
	color: var(--soft);
}
.sb_cell.active {
	background-color: var(--d25);
}
.sb_cell:before {
	content: "";
	position: absolute;
	inset: 1rem;
	right: auto;
	width: 0.4rem;
	background-color: var(--prim60);
	border-radius: 0.2rem;
	transform: translateX(-0.5rem);
	transition: 0.2s;
	opacity: 0;
}
.sb_cell:hover:before,
.sb_cell.active:before {
	transform: none;
	opacity: 1
}
.sb_cell:hover {
	background-color: var(--d20);
}
.sb_cell.active span {
	color: var(--font);
}
.sb_cell:hover, .sb_cell:hover span {
	text-decoration: none;
}
.sb_cell .icon, .sb_user .user_initials {
	width: 2.1rem;
	stroke-width: 1.7;
	color: white;
}
.sb_user {
	font-weight: 700;
	letter-spacing: 0;
}
.user_initials {
	background-color: var(--prim);
    aspect-ratio: 1/1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 1.2rem;
}
.sb_user.admin .user_initials {
	background-color: var(--mint);
	color: black;
}
.soft {
	color: var(--soft);
}
.grid_container {
	flex: 1;
}
.grid_container, .grid_container > div {
	display: flex;
	gap: var(--grid_gap);
}
.grid_container > div {
	height: 100%;
}
.grid_main {
	flex-direction: column;
}
.grid_main {
	flex: 1;
    flex-direction: row;
	flex-wrap: wrap;
}
.grid_container .grid_aside {
	display: grid;
	grid-template-rows: minmax(max-content, 33%) auto minmax(max-content, 33%);
}
.grid_aside {
	flex: 0 0 380px;
}
.grid_aside > div, .g_results_container {
	background-color: var(--d18);
	border-radius: var(--br)
}
.grid_aside > div, .g_search_container {
	flex: 1;
}
.grid_aside > div {
	padding: 4rem;
}
.g_search_container, .g_scan_container {
	height: var(--search_row);
}
.g_scan_container {
	flex: 0 0 var(--search_row);
}
.g_results_container {
	position: relative;
	height: calc(100% - var(--search_row) - var(--grid_gap));
	min-width: 100%;
	overflow: hidden;
}
.g_input {
	--form_borderradius: var(--br);
	--form_rowheight: var(--search_row);
	--button_height: var(--search_row);
	--input_fontsize: 1.5rem;
	--input_padding: 1.6em;
	--icon_size: 2.1rem;
	--icon_strokewidth: 1.9;
	--button_icon_size: 2.4rem;
	--button_icon_strokewidth: 1.5;
}
.g_input button {
	padding: 0;
}
#search {
	padding-left: calc(var(--input_padding) + var(--icon_size) + 1.8rem);
}
#search_unset.enabled > .icon:first-child, #search_unset > .icon:last-child {
	display: none;
}
#search_unset.enabled > .icon:last-child {
	display: inline-block;
}
#search_unset > .icon:last-child {
	transform: rotate(45deg);
}
#search_unset.enabled {
	pointer-events: auto;
	cursor: pointer;
}
.popup {
    max-width: 600px;
	max-height: 100%;
    padding: calc(var(--n) / 2) var(--m);
	padding: 5rem;
    background-color: var(--d15);
	border-radius: var(--br_more);
    box-shadow: 0 0 40px rgb(0 0 0 / 30%);
	-webkit-animation: fade_in_up_f 0.2s ease forwards;
			animation: fade_in_up_f 0.2s ease forwards;
}
.mask.popup_container {
	transition: opacity 0.2s ease;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
/*
.popup.pu_data_ui {
	 padding: var(--n) var(--m);
}
*/
#signout_mask {
	z-index: 10000;
}
.divider {
	display: inline-block;
	margin: 0 0.5em;
}
.divider:before {
	content: "·";
	color: var(--prim90);
}
#guests {
	position: absolute;
	inset: 0;
	overflow: auto;
}
#guests:empty {
    padding-left: var(--m);
    padding-right: var(--m);
	display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--soft);
}
#guests:not(.load):empty:before {
    content: "Keine Gäste gefunden";
}
.guest_container {
	color: var(--soft);
	font-size: 1.3rem;
	display: flex;
	align-items: center;
	gap: 3rem;
	padding: 0 5rem 0 4rem;
	min-height: 9rem;
	overflow: hidden;
	margin-top: -1px;
	padding-bottom: 1px;
	cursor: pointer;
}
[data-state="null"] {
	--indicator: var(--neutral);
}
[data-state="0"] {
	--indicator: var(--pink);
}
[data-state="1"] {
	--indicator: var(--mint);
}
.guest_container:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	left: 0;
	bottom: 0;
	background-color: var(--d25);
}
.guest_container:last-child:after {
	display: none;
}
.guest_container.selected {
	background-color: var(--d25);
}
.guest_container.edited:before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--indicator);
	-webkit-animation: fade_out 1.8s forwards;
	animation: fade_out 1.8s forwards;
}
@-webkit-keyframes fade_out {
	from { opacity: 0.6; }
	to   { opacity: 0; }
}
@keyframes fade_out {
	from { opacity: 0.6; }
	to   { opacity: 0; }
}
.gu_state {
	position: relative;
    color: var(--indicator);
    width: 4.5em;
	height: 3em;
    text-align: center;
    padding: 0 0 0 0.125em;
    border-radius: 1.5em;
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 550;
    letter-spacing: 0.125em;
    overflow: hidden;
}
.gu_state, .gu_state > span {
	display: flex;
    justify-content: center;
    align-items: center;
}
.gu_state:before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	opacity: 0.15;
}
.gu_main {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	flex: 1;
	padding: 1.6rem 0;
}
.gu_info {
	display: flex;
}
.gu_name {
	color: var(--font);
	font-size: 1.6rem;
	font-weight: 600;
}
.gu.icon, .gu_icon .icon, .icon.vip {
	width: 1.5rem;
	min-width: 1.5rem;
	stroke-width: 0;
	fill: #ffa500;
}
.gu_plus {
	width: 4rem;
	min-width: 4rem;
	text-align: right;
}
.gu_icon:empty, .gu_plus:empty {
	display: none;
}
.access_ui_form_container {
	display: flex;
	flex-direction: column;
	--form_gap_x: 2rem;
	--button_height: var(--form_rowheight);
	gap: var(--form_gap_x);
}
.access_ui_form_container:empty {
    display: none;
}
.access_ui_form_container .input_overlay.prefix:before {
	background-color: transparent;
}
#access_ui_check_out .input_overlay.prefix .icon {
	stroke: none;
	fill: #ffbced;
}
#access_ui_check_in .input_overlay.prefix .icon {
	stroke: none;
	fill: #71ebf1;
}
#access_ui_check_in {
	--button_bg: var(--mint30);
	--button_color: black;
}
#access_ui_check_out {
	--button_bg: var(--pink30);
	--button_fontweight: 500;
}
.chart {
	position: relative;
	display: flex;
	flex-direction: column;
    justify-content: center;
}
#chart_acc > svg {
	position: relative;
	display: block;
	overflow: visible;
}
#chart_acc > svg > polyline {
	fill: none;
	stroke: white;
	stroke: var(--prim80);
	stroke-width: 1.2;
	filter: drop-shadow(0px 0px 1px black);
}
#chart_acc.init > svg > polyline {
    -webkit-animation: draw 1.4s cubic-bezier(.75,0,.15,1) forwards;
	animation: draw 1.4s cubic-bezier(.75,0,.15,1) forwards;
}
@-webkit-keyframes draw {
	to { stroke-dashoffset: 0; }
}
@keyframes draw {
	to { stroke-dashoffset: 0; }
}
#chart_acc > svg > polygon {
	stroke: none;
}
#chart_acc.no_data > svg > polyline, #chart_acc.no_data > .overlay.legend_x {
	display: none;
}
.overlay.hl {
	display: flex;
	flex-direction: column;
    justify-content: space-between;
	opacity: 0.1;
}
.overlay.hl > div {
	width: 100%;
	height: 1px;
	background-color: white;
}
#chart_acc > .overlay.legend_x {
	display: flex;
    align-items: flex-end;
    justify-content: space-between;
	z-index: 1;
}
#chart_acc > .overlay.legend_y {
	display: flex;
    flex-direction: column;
	align-items: flex-start;
    justify-content: space-between;
	right: auto;
}
#chart_acc > .overlay.legend_x > span,
#chart_acc > .overlay.legend_y > span,
#chart_pam > .overlay.legend_x > span {
	position: relative;
	display: inline-block;
	font-size: 1rem;
	color: var(--soft);
	font-weight: 600;
	line-height: 1.7rem;
	height: 1.7rem;
	background-color: var(--d18);
	z-index: 0;
}
#chart_acc > .overlay.legend_x > span,
#chart_pam > .overlay.legend_x > span {
	text-align: center;
	width: 3.4rem;
	transform: translateY(50%);
	border-radius: 0.4rem;
}
#chart_acc > .overlay.legend_y > span:not(:empty) {
	padding: 0 0.7rem;
	left: -0.7rem;
	color: var(--d40);
	border-radius: 0.4rem;
}
#chart_acc > .overlay.legend_x > span:first-child {
	visibility: hidden;
	margin-left: -1.7rem;
}
#chart_acc > .overlay.legend_x > span:last-child {
	visibility: hidden;
	margin-right: -1.7rem;
}
#chart_acc > .overlay.legend_y > span:first-child {
	color: var(--font);
	margin-top: -0.85rem;
}
#chart_acc > .overlay.legend_y > span:last-child {
	visibility: hidden;
	margin-bottom: -0.85rem;
}
#chart_pam {
	display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 6;
	padding-bottom: 2rem;
}
#chart_pam.no_data {
	padding-bottom: 0;
	align-items: center;
    justify-content: center;
}
#chart_pam.no_data:before {
	content: "Keine Daten";
    font-size: 1.2rem;
    color: var(--soft);
}
#chart_pam > div {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
	align-items: center;
}
#chart_pam > .plus_container {
	align-items: flex-end;
	padding-bottom: 0.2rem;
}
#chart_pam > .minus_container {
	align-items: flex-start;
	padding-top: 0.2rem;
}
#chart_pam > [style="flex: 0 0 0%;"] {
	display: none;
}
#chart_pam > .pam_bars > * {
	position: relative;
	flex: 1 0 0;
	overflow: hidden;
	border-radius: 0.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	font-weight: 600;
	font-size: 1rem;
}
#chart_pam > .pam_bars > * {
	min-height: 0.1rem;
}
#chart_pam > .plus_container > * {
	color: black;
	transform-origin: bottom;
}
#chart_pam > .minus_container > * {
	color: white;
	font-weight: 500;
	transform-origin: top;
}
#chart_pam.init > .plus_container > * {
	transform: translateY(-30%);
}
#chart_pam.init > .minus_container > * {
	transform: translateY(30%);
}
#chart_pam.init > .pam_bars > .bar {
	opacity: 0;
	-webkit-animation: rise 1.4s forwards;
	animation: rise 1.4s forwards;
}
@-webkit-keyframes rise {
	to { transform: none; opacity: 1; }
}
@keyframes rise {
	to { transform: none; opacity: 1; }
}
#chart_pam > .pam_bars > *:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}
#chart_pam > .pam_bars > :not(.bar):before {
	background: var(--soft);
	opacity: 0.3;
}
#chart_pam > .plus_container > :before {
	background: linear-gradient(0deg, var(--mint30), #b8f9f4);
}
#chart_pam > .minus_container > :before {
	background: linear-gradient(0deg, #dc7499, var(--pink30));
}
#chart_pam > .overlay.legend_x {
	align-items: flex-end;
}
#chart_pam > .overlay.legend_x > span {
	width: auto;	
	flex: 1 0 0;
}
#chart_pam > .overlay.legend_x > span:last-child {
	color: var(--font);
}
#chart_pro_container {
    container-type: size;
    container-name: chart_pro_container;
	padding-top: 2rem;
	padding-bottom: 2rem;
}
#chart_pro h3 {
	white-space: nowrap;
}
@container chart_pro_container (max-height: 80px) {
#chart_pro h3 {
	margin: 0;
}
#chart_pro {
	display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}
}
.chart_pro_range_container {
	background-color: rgb(255 255 255 / 10%);
	height: 0.4rem;
	width: 100%;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
}
.chart_pro_range_container > .set, .chart_pro_range_container .chart_pro_range {
	height: 100%;
	border-radius: 10px;
}
.chart_pro_range_container > .set {
	height: 100%;
	overflow: hidden;
	z-index: 1;
}
.chart_pro_range_container .chart_pro_range {
	height: 100%;
	transition: var(--move_in);
	background: linear-gradient(90deg, var(--prim30), var(--prim60));
	transform: translateX(-100%);
	-webkit-animation: h_slide 1.4s cubic-bezier(.75,0,.15,1) forwards;
	animation: h_slide 1.4s cubic-bezier(.75,0,.15,1) forwards;
	z-index: 0;
}
@-webkit-keyframes h_slide {
	to { transform: translateX(var(--shift)) }
}
@keyframes h_slide {
	to { transform: translateX(var(--shift)) }
}



mark {
	border-radius: 1px;
    background-color: #a2e9e4;
    color: black;
}
#sb_mask {
	display: none;
}

#qr_stream_mask {
    align-items: flex-start;
}
.qr_stream_container {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 500px;
	background-color: var(--d20);
	border-radius: 0 0 var(--br_more) var(--br_more);
	overflow: hidden;
	z-index: 1;
	display: none;
}
#qr_stream_mask > .qr_stream_container {
    display: block;
}
#qr_stream {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate3d(0, 0, -1);
}
.scan-region-highlight {
	outline: rgba(0, 0, 0, .25) solid 50vmax;
}
.scan-region-highlight-svg {
	display: none;
}
.access_ui_container {
	display: flex;
	flex-direction: column;
	gap: var(--n);
	gap: 6rem;
}
.access_ui_head {
	display: flex;
}
.access_ui_title {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.access_ui_title > h2 {
	display: flex;
    align-items: center;
	margin: 0;
	gap: 0.4em;
}
.access_ui_title > h2 > .icon {
    width: 0.8em;
}
.access_ui_title > .gu_state {
	font-size: 1rem;
}
.access_ui_qr {
	position: relative;
	height: 7.7rem;
	width: auto;
	aspect-ratio: 1 / 1;
}
.access_ui_qr > svg {
	width: 100%;
	height: 100%;
}
.access_ui_details {
	display: flex;
	flex-direction: column;
	gap: 1.0rem;
}
.access_ui_info_row {
    font-size: 1.4rem;
}
.access_ui_info_row > .col4 {
	font-weight: 600;
}
.access_ui_info_row > .col8 {
	color: var(--soft);
	word-break: break-word;
}
.log {
	padding: 2.2rem 0;
	padding-left: 5.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.7rem;
}
.log:first-child {
	padding-top: 0;
}
.log:last-child {
	padding-bottom: 0;
}
.log b {
	font-size: 1.3rem;
}
.log_tag  {
	text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 550;
    letter-spacing: 0.125em;
}
.log_tag.checkedin {
	color: var(--mint);
}
.log_tag.checkedout {
	color: var(--pink);
}
.log:before {
	content: "";
	position: absolute;
	width: 1px;
	height: 100%;
	top: 50%;
	left: 5px;
	background-color: var(--d35);
}
.log:after {
	content: "";
	position: absolute;
	width: 11px;
	aspect-ratio: 1 / 1;
	left: 0;
	border: 2px solid white;
	border-radius: 50%;
	background-color: black;
    box-shadow: 0 0 0 7px var(--d15);
}
.log:last-child:before {
	display: none;
}
#settings_form {
	display: flex;
	gap: var(--grid_gap);
}
.settings_fs {
	border-radius: var(--br_more);
	padding: 5rem;
}
.settings_fs:last-child > .grid12 {
	height: 100%;
	grid-template-rows: auto auto auto 1fr;
}
legend.big {
	font-size: 2rem;
	font-weight: 600;
	color: var(--font);
	margin-bottom: 2rem;
}
.access_ui_form button {
	padding: 0;
}
.tr_right {
	position: relative;
}
.access_ui_title_bricks {
	display: flex;
	gap: 2.2rem;
	align-items: center;
}
.access_ui_action {
	position: relative;
	width: 1.8rem;
	cursor: pointer;
}
.access_ui_action:before {
	content: "";
	position: absolute;
	inset: -1rem;
}
.access_ui_action > .icon {
	width: 100%;
	stroke: var(--d50);
	stroke-width: 2.2;
}
.access_ui_action:hover > .icon {
	stroke: white;
}




.actions_row {
	display: flex;
    margin-bottom: 4rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 3rem;
}
.action {
	color: var(--soft);
	display: flex;
	gap: 1rem;
	font-size: var(--toggle_fontsize);
	font-weight: var(--toggle_fontweight);
	align-items: center;
	white-space: nowrap;
	cursor: pointer;
}
.action.warning > .icon {
	color: var(--pink);
}
.action > .icon {
	min-width: 2.0rem;
	stroke-width: 2;
}
.action:hover, .action:hover > .icon {
	color: white;
}
label.reset {
	width: auto;
}


.backdrop {
	position: absolute;
	inset: -40px;
	-webkit-filter: blur(40px);
	filter: blur(40px);
	opacity: 0;
	z-index: 0;
	-webkit-animation: fade_in 1s forwards 0.5s;
	animation: fade_in 1s forwards 0.5s;
}
.backdrop:after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--d10);
	opacity: 0.75;
    z-index: 10;
}
.frontdrop {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
    justify-content: center;
	-webkit-animation: fade_in 1s forwards 0.5s;
	animation: fade_in 1s forwards 0.5s;
}
.frontdrop:after {
    content: "";
    position: absolute;
    width: 75%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: black;
    opacity: 0.2;
}
.blob {
	position: absolute;
	fill: #000000;
	-webkit-animation-iteration-count: infinite;
			animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
    -webkit-animation-name: blob;
            animation-name: blob;
}
@-webkit-keyframes blob {
    to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes blob {
    to { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
.blob:nth-child(1) {
	max-width: 550px;
	max-height: 550px;
}
.blob:nth-child(2) {
	max-width: 400px;
	max-height: 400px;
}
.blob:nth-child(4) {
	max-width: 650px;
	max-height: 650px;
}

.sidebar_inner, .grid_aside > div, .g_results_container, .glass, .dropzone.glass {
    background-color: hsl(221deg 30% 14% / 65%);
    -webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
    box-shadow: 0 0 var(--grid_gap) rgb(0 0 0 / 35%);
}

button.tr_action {
	height: auto;
	padding: 0;
	background-color: transparent;
	transition: 0s;
}
button.tr_action > span {
    color: var(--soft);
}
button.tr_action:hover, button.tr_action:active {
	background-color: transparent;
}
button.tr_action:hover > span, button.tr_action:hover .icon, .tr_icon:hover .icon {
	stroke: var(--prim70);
	color: var(--prim70);
}

.start .container {
	box-shadow: none;
	align-items: center;
	justify-content: space-evenly;
}
.start .logo_svg {
	height: 65px;
	-webkit-animation: fade_in_up_f 0.5s forwards;
	animation: fade_in_up_f 0.5s forwards;
}
.signin_container {
    padding: 5rem;
    background-color: var(--d18);
    border-radius: var(--br);
	opacity: 0;
	-webkit-animation: fade_in_up_f 0.5s forwards 0.25s;
	animation: fade_in_up_f 0.5s forwards 0.25s;
}


@media screen and (hover: hover) and (pointer: fine) {
#search_unset.enabled:hover .icon:last-child {
	stroke: var(--prim70);
}
#hic_mum:hover > .hic_hamburger_bar {
	background-color: var(--prim70);
}
.logo:hover .logo_door > path:first-child {
	fill: var(--prim70);
}
.guest_container:hover {
	background-color: var(--d25);
}
}
@media screen and (hover: none) and (pointer: coarse) {

}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {

}

@media screen and (max-height: 1020px) {
body {
    display: block;
}
main {
	flex: 1;
}
.container {
	max-height: none;
	border-radius: 0;
}
}
@media screen and (max-width: 1600px) {
.container {
	border-radius: 0;
}
.grid_aside {
    flex: 0 0 360px;
}
}
@media screen and (max-width: 1380px) {
:root {
	--m: 75px;
	--n: 75px;
	--c: 3.4rem;
	--grid_gap: 2.8rem;
}
.grid_aside {
    flex: 0 0 340px;
}
.top {
    flex: 0 0 165px;
}
.sidebar {
    flex: 0 0 325px;
}
main.padd_leri {
	padding-right: calc(var(--m) / 1.25);
}
}
@media screen and (max-width: 1320px) {
.grid_aside {
    flex: 0 0 320px;
}
.grid_aside > div {
	padding: 3.5rem;
}
.sidebar {
    flex: 0 0 300px;
}
}
@media screen and (max-width: 1260px) {
:root {
	--m: 100px;
	--n: 70px;
}
main.padd_leri {
	padding-left: var(--m);
	padding-right: var(--m);
}
#hic_mum {
	display: block;
}
.top_row > h1 {
    padding-left: 3rem;
}
.top_row + p {
	padding-left: 5.8rem;
}
#sb_mask {
	background-color: transparent;
	display: block;
}
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 9999;
	transform: translateX(-100%);
	transition: transform var(--move_in);
	flex: 0 0 340px;
}
.sidebar:before {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: 0 0 50px rgb(0 0 0 / 100%);
	opacity: 0;
	transition: opacity var(--move_in);
}
.sidebar_inner {
	background-color: hsl(221deg 40% 8% / 68%);
	-webkit-backdrop-filter: blur(15px);
	backdrop-filter: blur(15px);
	overflow: auto;
}
.sidebar.in {
	transform: none;
}
.sidebar.in:before {
	opacity: 1;
}
.sidebar_inner > .set:last-child {
	margin-top: var(--n);
}
.top {
    flex: 0 0 150px;
}
.grid_aside {
    flex: 0 0 330px;
}
}
@media screen and (max-width: 1200px) {
:root {
	--m: 85px;
	--n: 65px;
}
}
@media screen and (max-width: 1100px) {
:root {
	--m: 75px;
	--n: 75px;
	--box_xpadding: 4rem;
}
body  {
	display: block;
	height: auto;
}
html, body {
	max-height: none;
	min-height: 0;
	height: auto;
}
.container {
	display: flex;
    justify-content: center;
	max-height: none;
	box-shadow: none;
	padding: var(--n) var(--m);
}
main {
	width: 100%;
	max-width: 740px;
	float: none;
	background-color: transparent;
	padding: 0 !important;
}
.grid_container {
    flex-direction: column;
}
.grid_aside {
	flex: 0;
}
#guests {
    position: relative;
	min-height: 9rem;
}
.grid_aside > div {
    padding: 4rem;
}
.grid_container .grid_aside {
	grid-template-rows: auto 1fr;
	grid-template-columns: 1fr 1fr;
}
#chart_pro_container {
	grid-column-end: span 2;
    container-type: unset;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
#chart_acc_container, #chart_pam_container {
	grid-row: 2;
}
#chart_acc_container, #chart_pro_container, #chart_pam_container {
	align-items: center;
}
#chart_acc_container, #chart_pro_container, #chart_pam_container, .guest_container {
	padding-left: var(--box_xpadding);
	padding-right: var(--box_xpadding);
}
#chart_acc, #chart_pro, #chart_pam {
	max-width: 320px;
}
.padd_tobo {
	padding-top: var(--n);
}
.start .container {
	flex-direction: column;
	gap: var(--n);
}
.start .logo_svg {
    height: 50px;
	margin-top: calc(var(--n) / 2);
}

main {
	z-index: 2;
}
.start > .container:before {
	display: none;
}
.container:before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background: linear-gradient(0deg, rgb(0 6 18 / 0%), rgb(0 6 18));
	z-index: 1;
}
.backdrop {
	position: fixed;
	height: 400px;
	inset: 150px -20px auto -20px;
}
.settings_fs {
	padding: 4rem;
}
}
@media screen and (max-width: 999px) {
:root {
	--m: 52px;
}
.start {
	--n: 7rem;
}
.dn999 {
	display: none;
}
.d999 {
    display: unset;
}
}
@media screen and (max-width: 880px) {
:root {
	--m: 44px;
}
body {
    -webkit-text-size-adjust: 100%;
}
.dn880 {
	display: none;
}
.d880 {
    display: unset;
}
.settings_fs {
	padding: 3rem;
}
}
@media screen and (max-width: 790px) {
:root {
	--n: var(--m);
}
.sidebar_inner > .top {
	padding-top: 3rem;
}
.sidebar_inner > div:last-child {
	padding-bottom: 3rem;
}
.container {
	padding-bottom: 6.5rem;
}
}
@media screen and (max-width: 740px) {
:root {
	--m: 37px;
}
.dn740 {
	display: none;
}
.d740 {
    display: unset;
}
.grid_container .grid_aside {
	display: flex;
    flex-direction: column;
}
.mask.popup_container {
    padding-top: 10rem;
    padding-bottom: 0;
	align-items: flex-end;
}
.popup {
	padding: 5rem 5rem 8rem 5rem;
}
.tr_action > span {
	display: none;
}
.top_row > h1, .top_row + p {
    padding-left: 0;
	text-align: center;
}
#settings_form {
	align-items: center;
	flex-direction: column;
}
.settings_fs {
	width: 100%;
	max-width: var(--box_mini);
	padding: 4rem;
}
}
@media screen and (max-width: 696px) {
:root {
	--m: 35px;
}
.dn696, .sumsy_iframe, .sumsy_mode_mum {
	display: none;
}
.d696 {
    display: unset;
}
}
@media screen and (max-width: 620px) {
:root {
	--m: 31px;
	--box_xpadding: 2.8rem;
}
html {
	font-size: 59.375%;
}
.stretch {
	max-width: none !important;
	width: auto !important;
	margin: auto calc(var(--m) * -1);
}
.dn620 {
	display: none;
}
.d620 {
    display: unset;
}
.popup {
	padding: 5rem var(--m);
}
}
@media screen and (max-width: 506px) {
:root {
	--m: 25px;
}
.dn506 {
	display: none;
}
.d506 {
    display: unset;
}
}
@media screen and (max-width: 475px) {
:root {
	--m: 23px;
	--grid_gap: var(--m);
	--box_xpadding: 2.6rem;
}
.guest_container {
    gap: 2.5rem;
}
html {
	font-size: 56.25%;
}
.dn475 {
	display: none;
}
.d475 {
    display: unset;
}
.access_ui_info_row {
    font-size: 1.3rem;
}
.access_ui_qr {
    position: absolute;
    right: 0;
    height: 3rem;
}
.signin_container {
    padding: 4rem;
}
.start .logo_svg {
    height: 40px;
	margin-top: 0;
}
}
@media screen and (max-width: 413px) {
:root {
	--m: 20px;
	--box_xpadding: 2.3rem;
}
.dn413 {
	display: none;
}
.d413 {
    display: unset;
}
h1 {
	font-size: 2.8rem;
}
.guest_container {
	gap: 2.3rem;
}
.gu_state {
	font-size: 0.8rem;
}
.gu_name {
    font-size: 1.5rem;
}
.guest_container {
    font-size: 1.2rem;
}
#message {
	width: 100%;
}
.signin_container {
    padding: 3rem;
}
.settings_fs {
	padding: 3rem;
}
}
@media screen and (max-width: 380px) {
:root {
	--m: 18px;
	--box_xpadding: 2.0rem;
}
.dn380 {
	display: none;
}
.d380 {
    display: unset;
}
h1 {
	font-size: 2.6rem;
}
.guest_container {
    gap: 2.0rem;
}
.access_ui_container {
	gap: 5.5rem;
}
.access_ui_details {
	gap: 1.8rem;
}
.access_ui_info_row {
	gap: 0.5rem;
}
.access_ui_info_row > .col4,
.access_ui_info_row > .col8 {
	grid-column-end: span 12;
}
}
@media screen and (max-width: 355px) {
:root {
	--m: 16px;
}
.dn355 {
	display: none;
}
.d355 {
    display: unset;
}
}
@media screen and (min-width: 1261px) {
	@media screen and (max-height: 860px) {
	:root {
		--m: 70px;
		--n: 75px;
	}
	.top {
		flex: 0 0 140px;
	}
	}
	@media screen and (max-height: 800px) {
	:root {
		--n: 70px;
	}
	.grid_aside {
		flex: 0 0 320px;
	}
	.grid_aside > div {
		padding: 3.5rem;
	}
	}
}
@media screen and (min-width: 1101px) {
	@media screen and (max-height: 800px) {
	.top {
		flex: 0 0 120px !important;
	}
	.top p.soft {
		display: none;
	}
	}
}