*,
*:after,
*:before {
	box-sizing: inherit
}

/*::-webkit-scrollbar {
	width: 2.4rem;
	height: 2.4rem;
	background-color: #fff;
}

::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border: 0.8rem solid #fff;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #bbb;
	cursor: pointer;
}

::-webkit-scrollbar-corner {
	background-color: #ccc;
	border: 0.8rem solid #fff;
}*/

html {
	box-sizing: border-box;
	font-size: 62.5%
}

body {
	background: #f5f5f5;
	color: var(--primary_text_color);
	font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-size: 1.6em;
	font-weight: 300;
	letter-spacing: 0.01em;
	line-height: 1.6;
}

blockquote {
	border-left: 0.3rem solid #d1d1d1;
	margin-left: 0;
	margin-right: 0;
	padding: 1rem 1.5rem;
}

blockquote *:last-child {
	margin-bottom: 0;
}

code {
	background: #f4f5f6;
	border-radius: .4rem;
	font-size: 86%;
	margin: 0 .2rem;
	padding: .2rem .5rem;
	white-space: nowrap;
}

pre {
	background: #f4f5f6;
	border-left: 0.3rem solid var(--primary_color);
	overflow-y: hidden;
}

pre>code {
	border-radius: 0;
	display: block;
	padding: 1rem 1.5rem;
	white-space: pre;
}

hr {
	border: 0;
	border-top: 0.1rem solid #eee;
	margin: 1.6rem 0;
}

.container {
	margin: 0 auto;
	max-width: 112.0rem;
	position: relative;
	width: 100%;
}

.content {
	padding: 0 1.6rem 1.6rem 1.6rem;
}

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='date'],
input[type='color'],
textarea,
select,
.select .value {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 0.1rem solid #d1d1d1;
	border-radius: .4rem;
	box-shadow: none;
	box-sizing: inherit;
	height: 3.8rem;
	padding: .6rem 1.0rem;
	/*width: 100%*/
}

input[type='checkbox'] {
	height: 3.8rem;
}

input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='url']:focus,
input[type='date']:focus,
input[type='color']:focus,
textarea:focus,
select:focus,
.data .select:focus .value {
	border-color: var(--primary_color);
	outline: 0
}

select,
.select .value {
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='grey'><polyline points='0,25 100,25 50,75'/></svg>") no-repeat calc(100% - 1.6rem) center;
	background-size: 12px;
	padding-right: 3.0rem !important;
}

select:focus:active {
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='grey'><polyline points='0,25 100,25 50,75'/></svg>") no-repeat calc(100% - 1.6rem) center;
	background-size: 12px;
}

textarea {
	min-height: 6.5rem;
}

input[type='email']:required:valid,
input[type='number']:required:valid,
input[type='password']:required:valid,
input[type='search']:required:valid,
input[type='tel']:required:valid,
input[type='text']:required:valid,
input[type='url']:required:valid,
input[type='date']:required:valid,
input[type='color']:required:valid,
select:required:valid,
textarea:required:valid {
	border-color: #4caf50;
}

input[type='email']:invalid,
input[type='number']:invalid,
input[type='password']:invalid,
input[type='search']:invalid,
input[type='tel']:invalid,
input[type='text']:invalid,
input[type='url']:invalid,
input[type='date']:invalid,
input[type='color']:invalid,
select:invalid,
textarea:invalid {
	border-color: #f44336;
}

.button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
	background-color: var(--primary_color);
	border: 0.1rem solid var(--primary_color);
	border-radius: .4rem;
	color: var(--inverse_text_color);
	cursor: pointer;
	display: inline-block;
	font-size: 1.4rem;
	height: 3.8rem;
	letter-spacing: .1rem;
	line-height: 3.8rem;
	padding: 0 3.0rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap
}

.button:focus,
.button:hover,
input[type='button']:focus,
input[type='button']:hover,
input[type='reset']:focus,
input[type='reset']:hover,
input[type='submit']:focus,
input[type='submit']:hover {
	background-color: var(--primary_color_darker);
	border-color: var(--primary_color_darker);
	color: var(--inverse_text_color);
	outline: 0
}

.button[disabled],
input[type='button'][disabled],
input[type='reset'][disabled],
input[type='submit'][disabled] {
	cursor: default;
	opacity: .5
}

.button[disabled]:focus,
.button[disabled]:hover,
input[type='button'][disabled]:focus,
input[type='button'][disabled]:hover,
input[type='reset'][disabled]:focus,
input[type='reset'][disabled]:hover,
input[type='submit'][disabled]:focus,
input[type='submit'][disabled]:hover {
	background-color: var(--primary_color);
	border-color: var(--primary_color);
}

.button.button-outline,
input[type='button'].button-outline,
input[type='reset'].button-outline,
input[type='submit'].button-outline {
	background-color: transparent;
	color: var(--primary_color);
}

.button.button-outline:focus,
.button.button-outline:hover,
input[type='button'].button-outline:focus,
input[type='button'].button-outline:hover,
input[type='reset'].button-outline:focus,
input[type='reset'].button-outline:hover,
input[type='submit'].button-outline:focus,
input[type='submit'].button-outline:hover {
	background-color: transparent;
	border-color: var(--primary_color_darker);
	color: var(--primary_color_darker);
}

.button.button-outline[disabled]:focus,
.button.button-outline[disabled]:hover,
input[type='button'].button-outline[disabled]:focus,
input[type='button'].button-outline[disabled]:hover,
input[type='reset'].button-outline[disabled]:focus,
input[type='reset'].button-outline[disabled]:hover,
input[type='submit'].button-outline[disabled]:focus,
input[type='submit'].button-outline[disabled]:hover {
	border-color: inherit;
	color: var(--primary_color);
}

.button.button-clear,
input[type='button'].button-clear,
input[type='reset'].button-clear,
input[type='submit'].button-clear {
	background-color: transparent;
	border-color: transparent;
	color: var(--primary_color);
}

.button.button-clear:focus,
.button.button-clear:hover,
input[type='button'].button-clear:focus,
input[type='button'].button-clear:hover,
input[type='reset'].button-clear:focus,
input[type='reset'].button-clear:hover,
input[type='submit'].button-clear:focus,
input[type='submit'].button-clear:hover {
	background-color: transparent;
	border-color: transparent;
	color: var(--primary_color_darker);
}

.button.button-clear[disabled]:focus,
.button.button-clear[disabled]:hover,
input[type='button'].button-clear[disabled]:focus,
input[type='button'].button-clear[disabled]:hover,
input[type='reset'].button-clear[disabled]:focus,
input[type='reset'].button-clear[disabled]:hover,
input[type='submit'].button-clear[disabled]:focus,
input[type='submit'].button-clear[disabled]:hover {
	color: var(--primary_color);
}

button {
	background: none;
	border: none; 
	padding: 0;
	cursor: pointer;
}

/* Personal */
body {
	display: flex;
	overflow-x: hidden;
}

.readonly * {
	pointer-events: none;
}

.readonly .prevent-readonly {
	pointer-events: all;
}

.table-wrapper,
table.sortable thead *,
table.sortable tfoot * {
	pointer-events: all;
}

a {
	color: var(--primary_color);
}

.no-margin {
	margin: 0;
}

.no-margin-bottom {
	margin-bottom: 0;
}

.no-padding {
	padding: 0;
}

.no-padding-bottom {
	padding-bottom: 0;
}

.flex {
	display: flex;
}

.flex.space-between {
	justify-content: center;
}

.material-icons {
	vertical-align: middle;
}

/* Main */

main {
	position: relative;
	background: #f5f5f5;
	flex-grow: 1;
	flex-shrink: 0;
	width: 100%;
	height: 100vh;
	overflow: auto;
	/*-webkit-overflow-scrolling: touch;*/
}

/*section {
	position: relative;
}
*/
/* Menu */

.readonly #menu * {
	pointer-events: all;
}

#menu-checkbox {
	display: none;
}

#menu-checkbox:checked ~ #menu {
	display: block;
}

#menu {
	height: 100vh;
	display: none;
	width: 24.0rem;
	background: var(--primary_color);
	flex-shrink: 0;
	overflow-y: auto;
}

#menu ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
	background: var(--primary_color);
	z-index: 200;
}

#menu-overlay {
	position: fixed;
	display: none;
	top: 0;
	left: 24.0rem;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 100;
}

#menu-checkbox:checked ~ main #menu-overlay {
	display: block;
}

#menu .menu-item {
	position: relative;
	flex-direction: column;
	background: var(--primary_color);
}

#menu .menu-item-checkbox {
	display: none;
}

#menu .menu-item a,
#menu .menu-item label {
	align-items: center;
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	padding: 1.6rem;
	height: 4.8rem;
	text-decoration: none;
}

#menu .menu-item .icon {
	margin-right: 1.6rem;
}

#menu .menu-item>ul {
	display: none;
	background: var(--primary_color_darker);
}

#menu .menu-item.active>ul,
#menu .menu-item>.menu-item-checkbox:checked ~ ul {
	display: block;
	padding-left: 1.6rem;
}

#menu .menu-item:hover>a,
#menu .menu-item.active>a,
#menu .menu-item>.menu-item-checkbox:checked ~ a,
#menu .menu-item:hover>label,
#menu .menu-item.active>label,
#menu .menu-item>.menu-item-checkbox:checked ~ label {
	background: var(--primary_color_darker);
	color: var(--inverse_text_color);
}

@media screen and (min-width: 768px) {
	#menu-label {
		display: none;
	}

	#menu-checkbox:checked ~ #menu {
		display: block;
	}

	#menu {
		display: block;
	}

	/*#menu .menu-item:not(.active):hover>.menu-item-checkbox:not(:checked) ~ ul {
		display: block;
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		z-index: 500;
	}*/

	#menu-overlay {
		display: none;
	}

	main {
		flex-shrink: 1;
		width: calc(100% - 24.0rem);
	}

	#menu-checkbox:checked ~ main #menu-overlay {
		display: none;
	}

}

/* Header */

header.header {
	background-color: var(--primary_color);
	color: var(--inverse_text_color);
	-webkit-transform: translate3d(0,0,0);
}

header#header {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
}

header#header .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

header.header a,
header.header .icon {
	color: var(--inverse_text_color);
}

header.header .icons {
	position: absolute;
	display: flex;
}

header.header .icons.right {
	right: 0;
}

header.header .icons.no-absolute {
	position: inherit;
}

header.header .icons .icon {
	display: flex;
	padding: 1.2rem;
	background-color: var(--primary_color);
	text-decoration: none;
	align-items: center;
}

header.header .icons .icon:hover,
header.header .icons .icon:focus {
	background-color: var(--primary_color_darker);
}

header.header .title {
	line-height: 48px;
	margin: 0 auto;
	font-weight: 500;
	text-transform: uppercase;
}

#options {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	z-index: 500;
	background: var(--primary_color_darker);
}

#options .container {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-end;
}

#options #filters input,
#options #filters select {
	border: none;
	border-radius: 0;
	border-bottom: 0.2rem solid;
	color: var(--inverse_text_color);
	padding: 0;
	padding-top: 0.8rem;
	height: 3.2rem;
	width: 100%;
}

#options input[disabled],
#options select[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

#options #filters-checkbox {
	display: none;
}

#options #filters {
	height: 0;
	opacity: 0;
	pointer-events: none;
	flex-grow: 1;
}

#options #filters-checkbox:checked ~ #filters {
	height: inherit;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.1s ease-in-out;
}

#options #filters .content{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
}

#options .field {
	position: relative;
	margin-top: 0.8rem;
}

#options .field label {
	position: absolute;
	top: 0;
	line-height: 0.8rem;
	font-size: 1.2rem;
}

#options select option {
	color: var(--primary_text_color);
}

#options .icons {
	justify-content: space-around;
	flex-grow: 1;
}

#options .icons .icon {
	background-color: var(--primary_color_darker);
}

#options .icons .icon:hover,
#options .icons .icon:focus {
	background-color: var(--primary_color);
}

@media screen and (min-width: 768px) {
	#options .container {
		flex-direction: row;
	}

	#options #filters .content {
		flex-direction: row;
	}

	#options #filters .field + .field {
		margin-left: 1.6rem;
	}

	#options .icons {
		flex-grow: 0;
	}

	#options #filters {
		height: inherit;
		opacity: 1;
		pointer-events: auto;
		transition: opacity 0.1s ease-in-out;
	}

	#options #filters-checkbox:checked ~ #filters {
		height: 0;
		opacity: 0;
		pointer-events: none;
		flex-grow: 1;
	}

}

/* Form */
form.data .header {
	margin-top: 2.4rem;
	font-weight: 500;
	text-transform: uppercase;
}

form.data .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 0;
	border-bottom: 1px solid #eee;
	flex-wrap: wrap;
}

form.data .row.start {
	justify-content: flex-start;
}

form.data .row label {
	width: 20.0rem;
	color: var(--secondary_text_color);
	margin-right: 0.8rem;
}

form.data .row input[type='email'],
form.data .row input[type='number'],
form.data .row input[type='password'],
form.data .row input[type='search'],
form.data .row input[type='tel'],
form.data .row input[type='text'],
form.data .row input[type='url'],
form.data .row input[type='date'],
form.data .row input[type='color'],
form.data .row textarea,
form.data .row select,
form.data .row .select {
	flex-grow: 1;
	border-width: 0;
}

form.data .row input:not([readonly]),
form.data .row textarea:not([readonly]),
form.data .row select:not([readonly]),
form.data .row .select {
	background-color: #fff;
	border-width: 0.1rem;
}

form.data .row input + *,
form.data .row textarea + *,
form.data .row select + *,
form.data .row .select + * {
	margin-left: 1.6rem;
}

form.data .camera {
	display: flex;
	width: 64px;
	height: 38px;
	justify-content: center;
	align-items: center;
	color: rgba(0, 0, 0, 0.38);
	text-decoration: none;
	margin-left: 0 !important;
}

form.data .row button,
form.data .row .button {
	padding-left: 1.2rem;
	padding-right: 1.2rem;
}

form.data .camera + * {
	margin-left: 0;
}

.buttons {
	margin-top: 2.4rem;
}

.buttons button,
.buttons .button {
	width: 100%;
}

.buttons .flex button + button,
.buttons .flex button + .button,
.buttons .flex .button + .button,
.buttons .flex .button + button {
	margin-left: 1.6rem;
}

button.red,
.button.red {
	background: #f44336;
	border-color: #f44336;
	color: #000;
}

button.red:hover,
button.red:focus,
.button.red:hover,
.button.red:focus {
	background-color: #f22718;
	border-color: #f22718;
}

button.yellow,
.button.yellow {
	background: #ffeb3b;
	border-color: #ffeb3b;
	color: #000;
}

button.yellow:hover,
button.yellow:focus,
.button.yellow:hover,
.button.yellow:focus {
	background-color: #ffe608;
	border-color: #ffe608;
}

button.table-footer-button,
.button.table-footer-button {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 0;
}

/* Table */
.table-wrapper {	
	overflow-x: auto;
}


/* Alerts */
#alerts {
	position: fixed;
	right: 0.8rem;
	bottom: 0;
	max-width: calc(100% - 1.6rem);
	z-index: 100;
}

#alerts .alert {
	position: relative;
	display: flex;
	padding: 1.2rem;
	transition: all .2s ease-in-out;
	margin-bottom: 0.8rem;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	opacity: 0;
	top: 0.8rem;
}

#alerts .alert.show {
	opacity: 1;
	top: 0;
}

#alerts .alert .icon{
	margin-right: 0.8rem;
}

#alerts .alert.alert-success i {
	color: #4caf50;
}

#alerts .alert.alert-error i {
	color: #f44336;
}

#alerts .alert.alert-warning i {
	color: #ffeb3b;
}



/* Logs */
#logs tr.true {
	border-color: #c8e6c9;
	background: #e8f5e9;
}

#logs tr.false {
	border-color: #ffcdd2;
	background: #ffebee;
}

#logs .logged {
	display: inline-block;
	border-radius: 2px;
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 16px;
	margin: 4px auto 0 auto;
	padding: 0 8px;
}

#logs .true .logged{
	background: #4caf50;
}

#logs .false .logged {
	background: #f44336;
}




/* Table grid */

table.grid {
	white-space: nowrap;
}

table.grid .statusTd {
	display: none;
}

table.grid tbody td {
	padding: 0;
}

table.grid .row {
	border: none;
	background: #fff;
}

table.grid .row td {
	border: 1px solid #ccc;
}

table.grid .row:hover {
	background: #eee;
}

table.grid .row td:focus-within {
	background-color: #ffff3a;
	cursor: inherit;
}

table.grid tbody td input,
table.grid tbody td select,
table.grid tbody td textarea,
table.grid tbody td .select .value {
	border: 0px !important;
	border-radius: 0;
	vertical-align: middle;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.grid tbody td input:not([type="checkbox"]),
table.grid tbody td select,
table.grid tbody td textarea {
	min-width: 100%;
	width: 96px;
}

table.grid .row td input,
table.grid .row td select,
table.grid .row td textarea,
table.grid td .select .value {
	cursor: pointer;
}

table.grid tbody input,
table.grid tbody textarea,
table.grid tbody .select .value,
table.grid tbody .row .operations-handle {
	height: 3.6rem;
	padding-top: 0;
	padding-bottom: 0;
}

table.grid tbody * {
	font-size: 1.5rem;
	line-height: 3.6rem;
}

table.grid tbody .icon * {
	font-size: 2.4rem;
	line-height: 2.4rem;
}

table.grid tbody input[disabled],
table.grid tbody select[disabled] {
	cursor: not-allowed !important;
	pointer-events: auto;
}



/* Timetable */

table#timetable .clone {
	display: none;
}

table#timetable th {
	padding: 0.8rem;
}

table#timetable .row td textarea {
	min-height: inherit;
	width: 256px;
}

table#timetable .row.locked td:not(.lock) {
	pointer-events: none;
	opacity: 0.5;
}

table#timetable .row .operations-handle {
	display: flex;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	padding: 1.2rem;
}

table#timetable .row .operations {
	position: absolute;
	background: #fff;
	box-shadow: 0 0 0.2rem rgba(0,0,0,0.2);
	display: none;
	transition: opacity 0.1s ease-in-out;
}

table#timetable .row .operations.show {
	display: flex;
}

table#timetable .row .operations a {
	display: flex;
	text-decoration: none;
	padding: 0.4rem;
}

table#timetable .row .operations a:hover {
	background: var(--primary_color);
	color: var(--inverse_text_color);
}

table#timetable .row .operations .material-icons {
	margin: 0.4rem;
}

table#timetable .row .operations .remove .material-icons {
	border-radius: 50%;
	background: #f44336;
	color: #fff;
}

table#timetable .row .deleted {
	height: 3.8rem;
}

table#timetable .row .deleted span {
	background: #f44336;
	color: #fff;
	padding: 0 0.4rem;
	border-radius: 0.4rem; 
	margin-left: 0.8rem;
}

table#timetable .total {
	font-weight: 500;
	text-align: right;
	padding-right: 0.8rem;
	border: 0;
}

table#timetable .total + td {
	padding: 0;
}

table#timetable .total + td input{
	border: 0;
	width: 96px;
	min-width: 100%;
}

table#timetable .total_day {
	background: #ddd;
}

table#timetable .green {
	background: #66BB6A;
	border: 1px double #43A047;
}

table#timetable .yellow {
	background: #FFF176;
	border: 1px double #FBC02D;
}

.timetable-footer #pagination .current {
	background-color: var(--primary_color);
	color: var(--inverse_text_color);
	padding:0 0.4rem;
	border-radius: 50%;
	text-decoration: none;
	pointer-events: none;
}

.timetable-footer #rows {
	margin-left: 0.8rem;
	margin-right: 0.8rem;
}

.timetable-footer {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	border-top: 1px solid #ccc;
	z-index: 50;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 4.9rem;
}

.timetable-footer .info {
	display: flex;
	align-items: center;
	padding: 0 1.6rem;
}

.timetable-footer .info .field {
	position: relative;
	margin-top: 0.8rem;
}

.timetable-footer .info .field label {
	position: absolute;
	top: 0;
	line-height: 0.8rem;
	font-size: 1.2rem;
}

.timetable-footer .info .field input {
	padding: 0;
	padding-top: 0.8rem;
	height: 3.2rem;
}

.timetable-footer .icons {
	display: flex;
}

.timetable-footer .icons .icon {
	display: flex;
	padding: 1.2rem;
	background-color: #fff;
	color: var(--primary_color);
	text-decoration: none;
	align-items: center;
}
.timetable-footer .icons .icon:hover,
.timetable-footer .icons .icon:focus {
	background-color: var(--primary_color);
	color: var(--inverse_text_color);
}

.timetable-footer input,
.timetable-footer select {
	padding: 0;
	height: inherit;
}

.timetable-footer input{
	border: none;
	width: 7.2rem;
}


/* Quick add */
table#quickadd .row td:first-of-type {
	padding-left: .8rem;
}



/* Index */

.cards {
	position: relative;
	width: calc(100% + 2.4rem);
	left: -1.2rem;
	--cols: 3;
	--cols_xs: 2;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.cards[data-cols="2"] { --cols: 2; }
.cards[data-cols="1"] { --cols: 1; }
.cards[data-cols_xs="1"] { --cols_xs: 1; }

.cards .card {
	width: calc(100% - 2.4rem);
	margin-left: 1.2rem;
	margin-right: 1.2rem;
	margin-top: 32px;
}

.card {
	background: #fff;
	padding: 16px;
	box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	border-radius: 4px;
}

.card .title {
	margin-top: 0;
}

.card .title a {
	text-decoration: none;
}

.card .title .material-icons {
	margin-right: 0.4rem;
}

.card .row:last-of-type {
	border-bottom: 0;
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
	.cards .card {
		width: calc((100% - 2.4rem) / var(--cols_xs) - (2.4rem / var(--cols_xs) * (var(--cols_xs) - 1)));
	}
}

@media screen and (min-width: 1024px) {
	.cards .card {
		width: calc((100% - 2.4rem) / var(--cols) - (24px / var(--cols) * (var(--cols) - 1)));
	}
}

#view-timetable {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 3.2rem;
}

.chart {
	position: relative;
	margin-top: 3.2rem;
}

.chart .chart-wrapper {
	overflow-x: auto;
}

.chart .chart-inner {
	width: 100%;
	min-width: 512px;
}

.chart .time {
	margin-bottom: 1.6rem;
}



.modal {
	content: '';
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;

	pointer-events: none;
	opacity: 0;

	will-change: transform, opacity;
	background: #fff;
	z-index: 600;

	-webkit-transform: scale(1.15);
	transform: scale(1.15);

	-webkit-transition:
		-webkit-transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

	transition:
		transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);

}

.modal.visible {
	pointer-events: auto;
	opacity: 1;

	-webkit-transform: scale(1);
	transform: scale(1);

	-webkit-transition:
		-webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);

	transition:
		transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
		opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);

}

.modal .loader {
	left: 50%;
	top: 50%;
	position: fixed;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.modal .loader #spinner {
	box-sizing: border-box;
	stroke: var(--primary_color);
	stroke-width: 3px;
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
	-webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite,
	rotate 1.6s linear infinite;
	animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite,
	rotate 1.6s linear infinite;
}

@-webkit-keyframes rotate {
	from {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	to {
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg);
	}
}

@keyframes rotate {
	from {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	to {
		-webkit-transform: rotate(450deg);
		transform: rotate(450deg);
	}
}

@-webkit-keyframes line {
	0% {
		stroke-dasharray: 2, 85.964;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	50% {
		stroke-dasharray: 65.973, 21.9911;
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dasharray: 2, 85.964;
		stroke-dashoffset: -65.973;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

@keyframes line {
	0% {
		stroke-dasharray: 2, 85.964;
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	50% {
		stroke-dasharray: 65.973, 21.9911;
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dasharray: 2, 85.964;
		stroke-dashoffset: -65.973;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

table {
	border-collapse: collapse;
}

h2.title {
	margin-top: 32px;
}

table td, table th {
	border: 1px solid #000;
	padding: 8px;
	background-color: #fff;
	font-weight: normal;
	width: 160px;
}

table td input {
	border: none !important;
	min-width: 0 !important;
	width: 100% !important;
	padding: 0 !important;
	text-align: center;
	height: inherit !important;
}

table td.yellow {
	background-color: #fff176;
}

table td.green {
	background-color: #c8e6c9;
}

table td.orange {
	background-color: #ffd54f;
}


input[type="file"] {
    display: none;
}

table {
	width: 100%;
}

#values {
	display: none;
}