:root {
	-webkit-text-size-adjust: 100%;
	font-size: 17px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	--padding-0: 0.5rem;
	--padding-1: calc(var(--padding-0) * 2);
	--padding-2: 0.3rem;
}
* {
	z-index: 10;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
}
body {
	font-family: 'Roboto', sans-serif;
	-webkit-text-size-adjust: 100%;
	font-weight: 300;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #eee;
	color: #333;
}
.btn {
	/* cursor: pointer; */
	border: 1px solid;
	border-radius: 50%;
}
.sensor {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	/* z-index: 0; */
	cursor: pointer;
}
.btn::after {
	content: "lock_open";
	display: inline-block;
	padding: var(--padding-0);
	font-size: 1.4rem;
	line-height: 1.4rem;
	height: 1.4rem;
	width: 1.4rem;
	text-align: center;
}
.deactivated {
	opacity: 0.5;
}
.deactivated .btn, 
.deactivated.btn {
	cursor: default;
}
.deactivated .btn .sensor, 
.deactivated.btn .sensor {
	display: none;
}
.deactivated a, 
a.deactivated {
	display: none;
}



outer-container {
	display: inline-block;
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overflow-y: auto;
}
inner-container {
	display: inline-block;
	position: relative;
	float: left;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	--banner-h: 7vh;
}
inner-container * {
	display: inline-block;
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
}
#banner {
	position: absolute;
	float: none;
	/* top: 2%; */
	height: var(--banner-h);
	line-height: var(--banner-h);
	width: 100%;
	/* margin: 4% 0; */
	/* background-image: url('../img/THE FIRE.png'); */
	/* background-size: contain; */
	/* background-repeat: no-repeat; */
	/* background-position: center; */
	font-family: "Macondo", cursive;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	color: coral;
}
#banner::before {
	content: "Timely";
}

#body {
	height: 89%;
	width: 100%;
}

#logger {
	position: absolute;
	box-sizing: border-box;
	width: 80%;
	max-width: 16rem;
	border: 1px solid;
	border-radius: var(--padding-0);
	padding: calc(var(--padding-0) * 4) calc(var(--padding-0) * 4);
	top: 25vh;
	left: 50%;
	transform-origin: center top;
	transform: translateX(-50%);
	background: #fff;
}
[data-stt='10'] #logger, 
outer-container:not([data-stt='10']) #home {
	opacity: 0;
	z-index: 0;
}
outer-container[data-stt='10'] #logger *, 
outer-container:not([data-stt='10']) #home * {
	display: none;
}
[data-stt='10'] #logger {
	transform: translateX(-150%) scaleX(0.5);
}
outer-container:not([data-stt='10']) #home {
	transform: translateX(50%) scaleX(0.5);
}
[data-stt='10'] #logger *, 
outer-container:not([data-stt='10']) #home * {
	cursor: default;
}
[data-stt='10'] #logger :is(
	.sensor,
	input
), 
outer-container:not([data-stt='10']) #home :is(
	.sensor,
	input
) {
	display: none;
}
#logger .usr, 
#logger .pwd {
	width: 100%;
	display: inline-grid;
	grid-template-columns: 2fr 5fr;
	margin-bottom: calc(var(--padding-0) * 2);
}
#logger input {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid;
	padding: 0 2px;
	font-size: 1rem;
}
:is(
	#logger,
	#home
) .btn {
	margin-left: 50%;
	margin-top: calc(var(--padding-0) * 2);
	transform: translateX(-50%);
}
#logger .btn {
	background-color: #c7bfff;
}
#logger .btn::after {
	/* content:"lock_open"; */
}
#logger .version {
	font-size: 80%;
	color: #000;
	line-height: 1rem;
	position: absolute;
	left:  0;
	top: 120%;
	width: 100%;
	text-align: center;
}

#home {
	position: absolute;
	display: inline-grid;
	grid-template-rows: auto 1fr;
	/* row-gap: 0.3rem; */
	width: 100%;
	height: calc(100% - var(--banner-h));
	top: var(--banner-h);
	left: 50%;
	/* transform-origin: center top; */
	transform: translateX(-50%);
	--header-h: calc(var(--padding-0) * 8 + 1.2rem + 1px);
	--action-h: calc(var(--padding-0) * 8 + 3.9rem + 1px);
}
.scanning #home {
	transform: translateX(-100%);
	opacity: 0;
	z-index: 0;
}
#home .action_container {
	box-sizing: border-box;
	width: 100%;
	max-width: 22rem;
	max-height: min-content;
	/* opacity: 0; */
	height: 0;
	margin-left: 50%;
	transform: translateX(-50%);
}
#home .action_container .inner {
	display: inline-grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 66rem;
	/* opacity: 0; */
	transform: translateX(-16%);
}
#home .action_container .inner .blocks {
	width: 100%;
	opacity: 0;
}
#home .contents {
	padding: var(--padding-2) 0;
	display: inline-grid;
	grid-template-rows: auto 1fr;
}
#home .blocks {
	box-sizing: border-box;
	width: 90%;
	max-width: 22rem;
	border: 1px solid;
	border-radius: var(--padding-0);
	padding: calc(var(--padding-0) * 3) var(--padding-1);
	margin-left: 50%;
	/* margin-top: 0.3rem; */
	transform: translateX(-50%);
	background: #fff;
}
#home [name='log'] .text0 {
	margin-bottom: calc(var(--padding-0) * 0.5);
	font-size: 90%;
}
#home [name='log_out']::after {
	content:"lock";
}
#home [name='tbls']::after {
	content:"search";
}
#home [name='log_out'] {
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	top: 50%;
	right: var(--padding-1);
	transform: translateY(-50%);
	background: #ffae00;
}
#home .strip {
	width: 100%;
}

#home .action, 
#home .log {
	width: 100%;
}
#home .action .header {
	margin-top: 3vh;
}
#home :is(
	[data-action='0'],
	[data-action='1'],
	[data-action='2']
).action_container {
	height: calc(var(--action-h) + 1vh);
}
#home .action_container [name='action'] {
	transform: translateX(30%);
	overflow: hidden;
	margin: 0;
	margin-bottom: var(--padding-2);
	transform: none;
}
#home [data-action='0'] .blocks:not(._0) .sensor, 
#home [data-action='1'] .blocks:not(._1) .sensor, 
#home [data-action='2'] .blocks:not(._2) .sensor {
	display: none;
}
#home [data-action='0'] .inner {
	transform: translateX(0%);
}
#home [data-action='1'] .inner {
	transform: translateX(-33.33%);
}
#home [data-action='2'] .inner {
	transform: translateX(-66.67%);
}
#home [data-action='0'] .inner ._0, 
#home [data-action='1'] .inner ._1, 
#home [data-action='2'] .inner ._2 {
	opacity: 1;
}
#home [name='action'] .title {
	width: 100%;
	text-align: center;
	margin-bottom: 1.5rem;
}

#home [name='action'] .input {
	line-height: 2rem;
	margin-right: 2rem;
}
#home [name='action'] .input select {
	height: 2rem;
	width: 2.5rem;
	border: none;
}

#home [name='accept'], 
#home [name='cancel'] {
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

/*
#home [name='action'] .message {
	width: 100%;
	min-height: 1rem;
}
#home .action_container.thinking .message {
	transform: translateX(-30%);
	opacity: 0;
}*/
#home [name='action']._0 .message::before {
	content: "End shift now?";
}
#home [name='action']._1 .message::before {
	content: "Start shift now?";
}
#home [name='action']._2 .title::before {
	content: "Additional time";
}
#home [name='action']._2 [name='tmc_hours']::before {
	content: "h";
	margin-left: 0.4rem;
}
#home [name='action']._2 [name='tmc_minutes']::before {
	content: "m";
	margin-left: 0.4rem;
}

#home :is(
	[data-action='0'],
	[data-action='1'],
	[data-action='2']
) [name='accept'] {
	background-color: #0f0;
}
#home :is(
	[data-action='0'],
	[data-action='1'],
	[data-action='2']
) [name='accept']::after {
	content:"check";
}
#home [name='cancel'] {
	background-color: #ff5900;
	transform: translateY(-50%) translateX(-150%);
}
#home :is(
	[data-action='0'],
	[data-action='1'],
	[data-action='2']
) [name='cancel']::after {
	content:"close";
	color: #fff;
}
#home .action_container.thinking .btn {
	opacity: 0;
}
#home .action_container.thinking .btn .sensor {
	display: none;
}

#home [name='log'] {
	/* height: calc(93% - var(--header-h) - var(--action-h)); */
	height: 100%;
}
#home:not([data-role='10']) [name='log'] {
	display: none;
}
#home [name='log'] .message {
	width: 100%;
}
#home [name='scan'] {
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	top: 50%;
	right: 0;
	background-color: #c7bfff;
	transform: translateY(-50%);
}
#home [name='scan']::after {
	content: "qr_code_scanner";
}
#home ol {
	scrollbar-gutter: stable;
	margin-top: 1rem;
	padding-top: 0.3rem;
	height: calc(100% - 4.2rem);
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-color: #ccc;
	overflow: auto;
}
#home li {
	width: 100%;
	font-size: 90%;
	display: inline-grid;
	/* grid-template-columns: auto 6fr 1fr 2fr auto; */
}
#home li * {
	font-size: inherit;
}
#home li .action::before {
	content: "play_arrow";
}
#home li [data-action='0'] .action::before {
	content: "pause";
}
#home [name='download'] {
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	top: 100%;
	left: 50%;
	background-color: #c7bfff;
	transform: translate(-50%,-120%);
}
#home [name='download']::after {
	content: "download";
}
#home [name='log'] ol {
	/*display: inline-grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: min-content;
	grid-row-gap: 0.3rem;*/
}
#home [name='log'] li {
	display: inline-block;
	width: 100%;
	margin-bottom: 0.3rem;
}
#home [name='log'] li [data-action] {
	display: inline-grid;
	grid-template-columns: 1fr 3fr 2fr 2fr;
	width: 50%;
}
#home [name='log'] li [data-action='1'] {
	/* margin-right: 6%; */
	color: #0f6e0f;
}
#home [name='log'] li [data-action='0'] {
	float: right;
	color: #ff4400;
}
#home [name='log'] li .additional {
	font-size: 80%;
}

#home:not([data-role='2']) [name='clock'] {
	display: none;
}
#home  [name='clock'] .btn {
	background-color: #c7bfff;
}
#home  [name='clock'] .btn::after {
	content: "timer";
}



[name='clock'] {
	height: 100%;
}
[name='clock'] #qr_container {
    width: 100%;
    height: 100%;
    /* top: 15%; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* --padding-1: calc(var(--padding-0) * 2); */
    /* --header-h: calc(var(--padding-0) * 8 + 1.2rem + 1px); */
    /* --action-h: calc(var(--padding-0) * 8 + 3.9rem + 1px); */
}
[name='clock'] .time {
	font-size: 1rem;
	line-height: 2rem;
	height: 2rem;
	width: 100%;
	text-align: center;
}
[name='clock'] qr-factory {
	display: inline-block;
	max-width: 100%;
	aspect-ratio: 1;
	left: 50%;
	transform: translateX(-50%);
}



.mngm {
	display: none;
	box-sizing: border-box;
	width: 100%;
	/* height: -webkit-fill-available; */
	/* background: #fff; */
	height: calc(100% - calc(var(--padding-0) * 6) - 1.6rem - 2%);
	height: 100%;
}

#home:is(
	[data-role='1'],
	[data-role='5']
) .mngm {
	display: inline-block;
}
#home [name='usr_mngm'] {
	position: absolute;
	left: 0;
	top: 0;
	height: calc(100% - 0.6rem);
}
#home:is(
	.usr_editing,
	.tmc_viewing,
	.tmc_editing
) [name='usr_mngm'] {
	opacity: 0;
	z-index: 0;
	transform: translateX(-100%);
}
#home:is(
	.usr_editing,
	.tmc_viewing,
	.tmc_editing
) [name='usr_mngm'] .sensor {
	display: none;
}
#home [name='usr_mngm'] [name='add'] {
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	top: 50%;
	right: 0;
	background-color: #c7bfff;
	transform: translateY(-50%);
}
#home [name='usr_mngm'] [name='add']::after {
	content: "add";
}
#home [name='usr_mngm'] [name='usr_entries'] {
	height: calc(100% - 2.3rem);
}
#home [name='usr_mngm'] [name='usr_entries'] li {
	grid-template-columns: auto 6fr auto 8fr auto;
	line-height: 1rem;
	font-size: 1rem;
	margin: 0.7rem 0;
}
#home [name='usr_mngm'] [name='usr_entries'] [data-deactivated='1'] {
	opacity: 0.5;
}
#home [name='usr_entries'] span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: inherit;
	font-size: inherit;
	padding: 0 0.2rem;
	cursor: default;
}
#home [name='usr_entries'] .edit_usr {
	/* cursor: pointer; */
}
#home [name='usr_entries'] .edit_usr::before {
	content: "settings";
}
#home [name='usr_entries'] [data-role='1'] .role::before {
	content: "shield_person";
}
#home [name='usr_entries'] [data-role='2'] .role::before {
	content: "timer";
}
#home [name='usr_entries'] [data-role='5'] .role::before {
	content: "manage_accounts";
}
#home [name='usr_entries'] [data-role='10'] .role::before {
	content: "person";
}
#home [name='usr_entries'] .bin {
	cursor: pointer;
}
#home [name='usr_entries'] [data-deactivated='0'] .bin::before {
	content: "delete";
}
#home [name='usr_entries'] [data-deactivated='1'] .bin::before {
	content: "recycling";
}
#home [name='usr_entries'] :is(
	[data-role='1'],
	[data-role='2']
) .bin .sensor,
#home [name='usr_entries'] .bin.inactive .sensor {
	display: none;
}
#home [name='usr_entries'] :is(
	[data-role='1'],
	[data-role='2']
) .bin {
	cursor: default;
	opacity: 0;
}
#home li:not(
	[data-role='1'],
	[data-role='2']
) .bin.inactive {
	cursor: default;
	opacity: 0.5;
}
#home [name='usr_entries'] [data-role='1'] {
	font-weight: bold;
}
#home [name='usr_entries'] [data-role='2'] {
	font-weight: bold;
}


#home [name='usr_editor'] {
	position: absolute;
}
#home:not(.usr_editing) [name='usr_editor'] {
	opacity: 0;
	z-index: 0;
	transform: translateX(-100%);
}
#home:not(.usr_editing) [name='usr_editor'] .sensor {
	display: none;
}
#home:not(.usr_editing) [name='usr_editor'] :is(
	input,
	select
) {
	display: none;
}
#home [name='usr_editor'] .message {
	width: 100%;
}
#home [name='usr_editor'] [name='back'] {
    position: absolute;
    margin-left: 0;
    margin-top: 0.4rem;
    top: 50%;
    right: 0;
    /* background-color: #c7bfff; */
    transform: translateY(-50%);
}
#home [name='back']::after {
    content: "chevron_left";
}
#home [name='usr_editor'] .message {
	width: 100%;
}
#home [name='usr_editor'][data-uid='-1'] [name='download'] {
	display: none;
}
#home [name='usr_editor'] .input {
	width: 35%;
	padding: 0 0.2rem;
	margin: 0.4rem;
	border: 1px solid;
	height: calc(1.2rem + 2px);
	line-height: 1.2rem;
	font-size: 0.9rem;
}
#home [name='usr_editor'] .input :is(
	input,
	select
) {
	border: none;
	width: 100%;
	height: 100%;
	outline: none;
	line-height: inherit;
	font-size: inherit;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
#home [name='usr_editor'] [name='usr_role']::after {
	content: "expand_more";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    z-index: 10;
    aspect-ratio: 1;
    height: 100%;
    text-align: center;
    border-radius: 50%;
    backdrop-filter: blur(1px);	
}
#home[data-role='5'] [name='usr_editor'] select [value] {
	display: none;
}
#home [name='usr_editor'] [disabled]{
	display: none;
}
#home [name='usr_editor'] [name='usr_id'] {
	display: inline-block;
	width: 100%;
	padding-left: 0.4rem;
	font-size: 80%
}
#home [name='usr_editor'] [name='usr_id']::before {
	content: "ID:" attr(data-uid);
}
#home [name='usr_editor'] [data-uid='-1']::before {
	content: "New User";
}
#home [name='usr_editor'] [name='save'] {
	margin-top: 4rem;
    background-color: #c7bfff;
}
#home [name='save']::after {
    content: "save";
}
#home [name='usr_editor'] .err_msg {
	padding-left: 0.4rem;
	color: #f00;
}


#home [name='tmc_mngm'] {
	position: absolute;
	height: calc(100% - 0.6rem);
}
#home:not(.tmc_viewing) [name='tmc_mngm'] {
	opacity: 0;
	z-index: 0;
	transform: translateX(-100%);
}
#home:not(.tmc_viewing) [name='tmc_mngm'] .sensor {
	display: none;
}
#home:not(.tmc_viewing) [name='tmc_mngm'] :is(
	input,
	select
) {
	display: none;
}
#home [name='tmc_mngm'] [name='header'] span {
	width: 100%;
}
#home [name='tmc_mngm'] [name='back'] {
    position: absolute;
    margin-left: 0;
    margin-top: 0;
    top: 50%;
    right: 0;
    /* background-color: #c7bfff; */
    transform: translateY(-50%);
}
#home [name='tmc_mngm'] [name='add'] {position: absolute;top: 100%;left: 50%;margin: 0;margin-top: -1.8rem;background: #c7bfff;}
#home [name='tmc_mngm'] [name='add']::after {
	content: "add";
}
#home [name='tmc_mngm'] .usr_time {
	font-size: 80%;
}
#home [name='back']::after {
    content: "chevron_left";
}
#home [name='tmc_mngm'] [name='tmc_entries'] {
	height: calc(100% - 2.3rem);
	margin-top: 1rem;
}
#home [name='tmc_mngm'] [name='tmc_entries'] li {
	display: inline-block;
	width: 100%;
	margin-bottom: 1rem;
	font-size: 80%;
}
#home [name='tmc_mngm'] [name='tmc_entries'] [data-action] {
	display: inline-grid;
	grid-template-columns: auto auto 5fr auto 3fr;
	width: 50%;
	color: #ff4400;
}
#home [name='tmc_mngm'] [name='tmc_entries'] [data-action='0'] {
	float: right;
	color: #0f6e0f;
}
#home [name='tmc_mngm'] [name='tmc_entries'] span {
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: inherit;
	font-size: inherit;
	padding: 0 0.2rem;
	cursor: default;
}
#home [name='tmc_mngm'] .edit_tmc::before {
	content: "settings";
}
#home [name='tmc_mngm'] [name='tmc_entries'] .additional {
	font-size: 80%;
}

#home [name='tmc_editor'] {
	position: absolute;
}
#home:not(.tmc_editing) [name='tmc_editor'] {
	opacity: 0;
	z-index: 0;
	transform: translateX(-100%);
}
#home [name='tmc_editor'] .strip {
	box-sizing: border-box;
	padding-right: 20%;
	/* display: inline-grid; */
}
#home:not(.tmc_editing) [name='tmc_editor'] .sensor {
	display: none;
}
#home:not(.tmc_editing) [name='tmc_editor'] :is(
	input,
	select
) {
	display: none;
}
#home [name='tmc_editor'] [name='back'] {
    position: absolute;
    margin-left: 0;
    margin-top: 0.4rem;
    top: 50%;
    right: 0;
    /* background-color: #c7bfff; */
    transform: translateY(-50%);
}
#home [name='back']::after {
    content: "chevron_left";
}
#home [name='tmc_editor'] .input {
	box-sizing: border-box;
	width: 35%;
	padding: 0 0.2rem;
	margin: 0.4rem;
	border: 1px solid;
	height: calc(1.2rem + 2px);
	line-height: 1.2rem;
	font-size: 80%;
}
#home [name='tmc_editor'] [name='tmc_date'] {
	width: calc(58% - 0.8rem);
}
#home [name='tmc_editor'] [name='tmc_time'] {
	width: calc(42% - 0.8rem);
}
#home [name='tmc_editor'] .input input, 
#home [name='tmc_editor'] .input select {
	border: none;
	width: 100%;
	height: 100%;
	outline: none;
	line-height: inherit;
	font-size: inherit;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
#home [name='tmc_editor'] :is(
	[name='tmc_is_start'],
	[name='tmc_add_extra']
) {
	margin: 0.4rem;
	transform: none;
}
#home [name='tmc_editor'][data-action='1'] [name='tmc_is_start']::after {
	content: "play_arrow";
}
#home [name='tmc_editor'][data-action='0'] [name='tmc_is_start']::after {
	content: "pause";
}
#home [name='tmc_editor'] [name='tmc_add_extra']::after {
	content: "more_time";
}
#home [name='tmc_editor'] [name='tmc_add_extra'][data-add_15='0'] {
	opacity: 0.4;
}
#home [name='tmc_editor'][data-action='0'] [name='tmc_add_extra'] {
	display: none;
}
#home [name='tmc_editor'] [name='save'] {
	margin-top: 4rem;
    background-color: #c7bfff;
}
#home [name='save']::after {
    content: "save";
}


#scanner {
	position: absolute;
	width: 100%;
	height: 85%;
	top: 15%;
	left: 0;
	z-index: 10;
}
outer-container:not(.scanning) #scanner {
	opacity: 0;
	z-index: 0;
	transform: translateX(50%);
}
outer-container:not(.scanning) #scanner * {
	display: none;
}
#scanner canvas {
	display: none;
}
#scanner video {
	display: block;
	float: none;
	width: 90%;
	max-width: 80vh;
	aspect-ratio: 1;
	margin: 0 auto;
	border: 1px solid;
}
#scanner [name='stop'] {
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	top: 90%;
	left: 50%;
	transform: translate(-50%,-50%);
	background-color: #ff5900;
}
[name='stop']::after {
	content:"close";
	color: #fff;
}





@media screen and (max-width: 120mm) {
	:root {
		font-size: 4.5vw;
		--padding-0: 0.5rem;
	}
	#home .action_container {
		padding: 0 var(--padding-1);
	}
	#home .action_container .inner {
		width: 300%;
	}
}


.transition250 {
	transition-duration: 250ms;
	transition-property: all;
}


.logger {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 20vh;
}