*,:not(pre) {
	font-family: 'Inter', sans-serif;
}
html, body {
	padding: 0px;
}
body {
background: #262626;
background: rgba(21, 30, 47, 1);
background: rgba(42, 43, 46, 1.0);
color: rgba(255,255,255,08);
}
pre {
	font-family: 'Monaco';
}

a.logo, a.logo h1, a.logo h1 span {
	text-decoration: none;
	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
}
h1 {
	font-size: 30px;
	color: rgba(255,255,255,0.7);
	background: linear-gradient(to right, rgba(59, 106, 141, 1) 0%, rgba(12, 90, 149, 1) 100%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
	text-decoration: none;
}
h1 span {
	color: rgba(255,255,255,1);
	background: rgba(93, 153, 196, 0.3);
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
	  text-decoration: none;
}
@media print {
	body {
		background: none;
		color: black;
	}
	.noprint {
		display: none;
	}
}
	table {
		width: 100%;
		border-collapse: collapse;
	}
	thead tr td {
		border-bottom: 1px solid rgba(0,0,0,0.5);
		font-size: 18px;
	}
	tr td {
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	tr td.title {

		width: 200px;
	}
	tr td.value {
		width: auto;
	}
	tr.highlight td,
	td.highlight {
		background-color: rgba(245, 230, 39, 0.22);
	}
	tr td.value textarea {
		width: 100%;
		height: 60px;
		font-family: monospace;
		font-size: 13px;
		border: 0px;
		background: transparent;
	}
	form#filter {
		background-color: rgba(255,255,255,0.4);
		padding: 15px;
		border-radius: 3px;
		}
		form#filter h1 {
			position: relative;
			top: -2px;
			margin: 0px;
			}
		form h3,
		h3.formheader {
			margin-top: 0px;
			font-size: 14px;
			margin-bottom: 0px;
			text-transform: uppercase;
			color: rgba(255,255,255,0.7);
			}
			h3.formheader {
				margin-bottom: 10px;
			}
		form#filter div {
			display: inline-block;
			}
			form#filter div a {
				text-decoration: none;
				}
			form#filter div a:hover h1 {
				background: linear-gradient(to right, rgba(33, 125, 194, 1) 0%, rgba(5, 55, 93, 1) 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				}
			form#filter div a:hover h1 span {
				background: rgba(31, 124, 190, 0.3);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				}
			form#filter .filter_container {
				width: calc(100% - 120px - 200px);
				overflow: scroll;
			}
			form#filter div.right {
				float: right;
				position: absolute;
				right: 15px;
				/* margin-top: 10px; */
				padding: 10px 0px 10px 15px;
				}
			form#filter div + div {
				margin-left: 15px;
				border-left: 2px solid rgba(255,255,255,0.1);
				padding-left: 15px;
			}
			form#filter div + div.nosep {
				margin-left: 0px;
				border-left: 0px solid rgba(255,255,255,0.1);
				padding-left: 15px;
			}
	input,select,textarea,
	.select2-container--default .select2-selection--single,
	.select2-container--default .select2-selection--multiple {
		/* border: 2px solid rgba(9, 124, 181,0.3); */
		border: 1px solid rgba(206, 225, 235, 0.3);
		border-radius: 2px;
		outline: none;
		padding: 8px 8px;
		font-size: 14px;
		display: inline-block;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		/* border: none; */
		/* background: rgba(0,0,0,0.1); */
		background: rgba(255,255,255,0.2);
		}
		.select2-container--default.bad .select2-selection--single {
			background: rgba(255, 0, 0, 0.2);
			border: 1px solid rgba(255, 0, 0, 0.3);
		}
		.select2-container--default .select2-results>.select2-results__options {
			max-height: 300px;
		}
		.select2-container--default .select2-selection--multiple {
			padding: 0px;
			width: 100%;
			}
			.select2-container--default .select2-results__option--disabled {
				font-size: 13px;
				font-style: italic;
				padding-left: 10px;
			}
			.select2-container--default .select2-results__group {
				font-size: 13px;
				color: rgba(0,0,0,0.6);
				font-weight: normal;
			}
			#inspector_leftCart .select2-container--default {
				width: 100%;
			}
			.select2-search.select2-search--dropdown {
				display:none;
			}
			.select2-container--default .select2-selection--single .select2-selection__choice,
			.select2-container--default .select2-selection--multiple .select2-selection__choice {
				background-color: rgba(255,255,255,0.4);
				color: black;
				max-width: calc(100% - 10px);
				}
				.select2-container--default .select2-selection--single .select2-selection__choice span.select2-selection__choice__display,
				.select2-container--default .select2-selection--multiple .select2-selection__choice span.select2-selection__choice__display {
					padding-left: 0px;
				}
				.select2-selection__choice__remove {

				}
				.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
					font-size: 12px;
					left: -2;
					top: 0;
					height: 100%;
					}
				.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
					background: red;
					}
				.select2-dropdown {
					background: rgba(255,255,255,0.8);
					-webkit-backdrop-filter: blur(10px);
				}
				.select2-results__option {
					color: black;
				}
				.select2-results__option.select2-results__option--selectable.select2-results__option--selected {
					background: rgba(41, 65, 82, 0.6);
					color: rgba(255,255,255,0.7);
				}
			.select2-container--default.select2-container--disabled  .select2-selection--multiple {
				background-color: rgba(255,255,255,0.2);
				}
				.select2-container--default.select2-container--disabled  .select2-selection--multiple .select2-selection__choice {
					padding-left: 0px;
					background: none;
					border: none;
					color: rgba(0,0,0,0.5);
				}
			.select2-selection.select2-selection--single {
				width: 100%;
				padding: 0px;
				height: auto;
			}
	select {
	  padding-right: 30px;
	  position: relative;
	  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>");
	  background-repeat: no-repeat;
	  background-size: 15px;
	  background-position: right 5px top 50%;
	  }
	  select option {
		  color: black;
	  }
	  select option:disabled {
		  color: rgba(0,0,0,0.5);
	  }
	input:focus, select:focus, textarea:focus,
	.select2-container--default.select2-container--focus .select2-selection--multiple {
		border-color: rgb(0, 170, 255);
		box-shadow: 0px 0px 3px rgba(0, 170, 255, 1);
		outline: none;
		background-color: rgba(136, 191, 222, 0.27);
		color: white;
		}
	input.text {
		width: 400px;
		}
		input:disabled.disabled-but-visible {
			color: rgba(0,0,0,0.8);
			/* border-color: transparent; */
			background: transparent;
		}
	input[type="submit"] {
		background-color: rgba(0, 174, 255, 0.8);
		color: white;
		}
		input[type="submit"].fullwidth {
			width: 100%;
			}
		input[type="submit"]:hover {
			background-color: rgba(0, 174, 255, 1);
			cursor: pointer;
			}
		input[type="submit"]:disabled {
			color: rgba(255,255,255,0.6);
			background-color: rgba(0, 174, 255, 0.4);
			cursor: not-allowed;
			}
	input[type="button"] {
		background-color: rgba(0, 174, 255, 0.6);
		color: white;
		cursor: pointer
		}
		input[type="button"]:hover {
			background-color: rgba(0, 174, 255, 0.4);
			color: rgba(255,255,255,0.8);
			}
			input[type="button"]:disabled {
				background-color: rgba(0, 174, 255, 0.1);
				/* rgba(255, 0, 0, 1); */
				background-color: rgba(255,255,255, 0.4);
				cursor: pointer;
				}
	input[type="button"].reset {
		/* background-color: rgba(255, 0, 0, 0.5); */
		background-color: transparent;
		/* color: white; */
		color: rgba(147, 0, 0, 1);
		}
		input[type="button"].reset:hover {
			background-color: rgba(147, 0, 0, 1);
			/* rgba(255, 0, 0, 1); */
			color: white;
			cursor: pointer;
			}
		input[type="button"].reset:disabled {
			background-color: rgba(147, 0, 0, 0.3);
			/* rgba(255, 0, 0, 1); */
			color: rgba(147, 0, 0, 0.3);
			cursor: pointer;
			}
	div.loading {
		height: 30px;
		width: 100%;
		margin-bottom: 15px;
	}
	input[type="submit"].loading,
	input[type="button"].loading,
	div.loading {
		background-image: url('/img/ajax_snake.svg');
		/* background-size: 50%; */
		background-size: 30px;
		background-position: center center;
		background-repeat: no-repeat;
		color: rgba(255,255,255,0.2);
		}
		input[type="submit"].loading:hover,
		input[type="button"].loading:hover {
			color: rgba(255,255,255,0.2);
			}
	div.result {
		border-bottom: 1px solid rgba(255,255,255,0.1);
		padding-bottom: 15px;
	}
	span.releaseYear {
		color: rgba(255,255,255,0.5);
		font-size: 0.8em;
	}
	a {
		color: rgba(133, 173, 255, 0.5);
		}
		.report_table a {
			background-color: rgba(255,255,255,0.3);
			color: rgba(255,255,255, 1);
			text-decoration: none;
			padding: 3px 8px;
			border-radius: 10px;
		}
	a:hover {
		color: rgba(255,255,255,0.4);
		}
		.report_table a:hover {
			background-color: rgba(255,255,255,0.8);
			color: rgba(0,0,0, 1);
		}
.text-empty {
	font-size: 13px;
	font-style: italic;
	color: rgba(255,255,255,0.4);
	}
#userControl {
	/* width: 200px; */
	/* position: fixed;
	top: 8px;
	right: 10px; */
	font-size: 13px;
	/* background: rgba(0,0,0,0.2); */
	/* background:red; */
	/* padding: 8px 8px 4px 8px; */
	text-align: right;
	/* border-bottom: 1px solid rgba(255,255,255,0.1); */
	color: rgba(255,255,255,0.8);
	}
	#userControl a {
		color: rgba(255,255,255,0.8);
		font-size: 0.8em;
		background: rgb(0, 108, 178);
		padding: 3px;
		border-radius: 3px;
		text-decoration: none;
		}
	#userControl a:hover {
		color: rgba(255,255,255,0.8);
		font-size: 0.8em;
		background: rgba(0, 108, 178,0.5);
		padding: 3px;
		}
#appViewport {
	width: 100%;
	/* display: flex; */
	/* flex-direction: row; */
	/* flex-wrap: nowrap; */
	/* justify-content: left; */
	/* align-items: stretch; */
	/* align-content: flex-start; */
	/* gap: 10px 20px; /* row-gap column gap */
	/* gap: 10px 20px; */
	/* height: calc(100vh - 130px); */
	}
	#appViewport.report {
		height: auto;
	}
	#appViewport .libraries {
		flex-basis: calc(100% - 300px);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: left;
		align-content: flex-start;
		gap: 10px 20px;
		max-height: calc(100vh - 80px);
		min-height: calc(100vh - 130px);
	}
	#appViewport.report .libraries {
		max-height: none;
		min-height: none;
		/* flex-basis: calc(100%); */
		flex-grow: 1;
	}
	#appViewport.report .reportoptions {
		/* max-height: none; */
		/* min-height: none; */
		flex-grow: 1;
		width: 150px;
		min-width: 150px;
		background-color: rgba(255,255,255,0.1);
		padding: 15px;
		}
		#appViewport.report .reportoptions input[type="button"] {
			width: 100%;
			}
	#appViewport .libraries .library {
		/* flex-grow: 2; */
		display: inline-block;
		/* width: 50%; */
		flex-basis: 50%;
		background: rgba(255,255,255,0.1);
		border-radius: 3px;
		border: 1px solid transparent;
		border-top: 10px solid transparent;
		}
		#appViewport.app .libraries .library {
			/* limit maximum width in app view. */
			max-width: calc(50vw - 150px);
		}
		#appViewport .library + .library {
			/* border-left: 1px solid white; */
		}
		#appViewport.report .libraries .library {
			flex-basis: 100%;
			border-top: 0px;
		}
		#appViewport .libraries .library.active {
			/* box-shadow: 0px 0px 10px rgba(255, 205, 0, 1.0); */
			/* box-shadow: 0 0 10px rgba(104, 137, 166, 1); */
			box-shadow: 0 0 10px rgba(250, 255, 0, 0.75);
			border: 1px solid rgba(250, 255, 0, 0.75);
			border-top-width: 10px;
		}
		#appViewport .library table thead {
			background: rgba(255,255,255,0.3);
		}
		#appViewport .library table thead tr th {
			padding-top: 5px;
			padding-bottom: 5px;
			}
			#appViewport .library table thead tr th + th{
				border-left: 1px solid rgba(0,0,0,0.1);
				}
		#appViewport .library table tbody {
			max-height: calc(100vh - 200px);
			overflow: scroll;
		}
		#appViewport .library table tbody tr td {
			padding: 5px 5px;
			font-size: 13px;
			cursor: pointer;
			height: 40px;
			}
			#appViewport .library table tbody tr td + td {
				border-left: 1px solid rgba(0,0,0,0.1);
				}
			#appViewport.report .library table#library_report tbody tr:hover {
				background-color: rgba(226, 255, 0, 0.1);
				}
			#appViewport .library #library_from_wrapper table tbody tr td:nth-child(2),
			#appViewport .library #library_to_wrapper table tbody tr td:nth-child(1) {
				/* cart numbers */
				font-family: monospace;
				min-height: 30px;
				}
			#appViewport .library #library_from_wrapper table tbody tr td:nth-child(1) {
				max-width: 150px;
				}
			#appViewport .library #library_from_wrapper table tbody tr td:nth-child(5) {
				max-width: 80px;
				}
			#appViewport .library #library_from_wrapper table tbody tr td:nth-child(8) {
				max-width: 30px;
				}
			#appViewport .library table tbody tr td img {
				width: 30px;
				height: 20px;
				filter: invert(100%) sepia(49%) saturate(0%) hue-rotate(303deg) brightness(111%) contrast(101%);
				}
			#appViewport .library table tbody tr td img.check,
			img.check {
				filter: invert(21%) sepia(96%) saturate(0%) hue-rotate(113deg) brightness(97%) contrast(92%);
				opacity: 0.5;
				}
		#appViewport .library #library_from_wrapper table tbody tr td.dataTables_empty,
		#appViewport .library #library_to_wrapper table tbody tr td.dataTables_empty {
				padding: 30px 5px;
				font-size: 11px;
				font-family: 'Inter', sans-serif;
				color: rgba(255,255,255,0.4);
				}
		#appViewport .library table tfoot {
				/* background: rgba(255,255,255,0.3); */
				border-top: 3px solid rgba(0,0,0,0.2);
				}
				#appViewport .library table tfoot tr td {
					padding-top: 5px;
					padding-bottom: 5px;
					text-align: right;
					}
	#appViewport .inspector {
		flex-basis: 300px;
	}

#appViewport .modeChoosers {
	width: 100%;
	text-align: center;
	margin-top: 30px;
	display: block;
	flex: none;
	}
	#appViewport .modeChooser {
	}
	#appViewport .modeChooser.slim {
		width: 100%;
		text-align: center;
		margin-top: 30px;
		display: block;
		}
	#appViewport .modeChooser a {
		display: inline-block;
		padding: 8px 15px;
		padding: 30px 40px;
		background: rgba(255,255,255,0.1);
		color: rgba(255,255,255,1);
		text-decoration: none;
		font-size: 18px;
		border-radius: 3px;
		border: 1px solid rgba(255,255,255,0.1);
		box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
		}
		#appViewport .modeChooser.slim a {
			padding: 8px 15px;
			font-size: 0.9em;
			}
		#appViewport .modeChooser a+a {
			margin-left: 8px;
		}
		#appViewport .modeChooser a:hover {
			background: rgba(255,255,255,0.3);
			color: rgba(255,255,255,0.7);
		}
	#appViewport .licensee {
		font-size: 0.8em;
		color: rgba(255,255,255,0.3);
		padding-top: 30px;
	}
	#appViewport .lastUpdate {
		position: relative;
		font-size: 0.8em;
		color: rgba(255,255,255,0.3);
		margin-top: 30px;
		margin-left: auto;
		margin-right: auto;
		max-width: 550px;
		border: 1px solid rgba(255,255,255,0.2);
		border-radius: 3px;
		cursor: pointer;
		}
	#appViewport .lastUpdate:before {
		content: "";
		position: absolute;
		width: 15px;
		height: 15px;
		top: 30px;
		right: 15px;
		transform: rotate(90deg);

		background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>");
		background-repeat: no-repeat;
		background-size: 15px;
		z-index: -1;
		-webkit-transition: 0.5s; /* Safari */
		  transition: 0.5s;

		}
		#appViewport .lastUpdate:hover:before {
			transform: rotate(80deg);
		}
		#appViewport .lastUpdate.open:before {
			transform: rotate(0deg);
		}
		#appViewport .lastUpdate h2 {
			/* border: 1px solid rgba(255,255,255,0.2); */
			/* border-radius: 3px; */
			padding: 22px;
			margin: 0px;
			}
			#appViewport .lastUpdate h2:hover {
				background: rgba(255,255,255,0.1);
			}
		#appViewport .lastUpdate table {
			display: none;
			margin-left: auto;
			margin-right: auto;
			max-width: 550px;
			}
			#appViewport .lastUpdate.open table {
				display: table;
			}
			#appViewport .lastUpdate table thead {
				background: rgba(255,255,255,0.1);
				}
			#appViewport .lastUpdate table tr td:first-of-type {
				padding-left: 15px;
				}

/* plugin fixes */
.dataTables_wrapper .dataTables_length select {
	padding-right: 30px !important;
}
.dataTables_length, .dataTables_filter {
	padding: 5px 8px;
}
.dataTables_wrapper input,
.dataTables_wrapper select {
	background: rgba(135, 149, 158, 1.0);
}
.dataTables_wrapper .dataTables_info {
	font-size: 11px;
	padding: 8px 8px;
	color: rgba(255,255,255,0.5);
	width: calc(100% - 16px);
	text-align: center
}
.dataTables_wrapper > div.toolbar {
	float: left;
	}
	#library-to .dataTables_wrapper > div.toolbar {
		float: left;
		width: 100%;
		}
		#library-to .dataTables_wrapper > div.toolbar form {
			float: right;
			background: none;
			padding: 0px;
			margin: 0px;
			margin-top: 5px;
			margin-bottom: 5px;
			}
			#library-to .dataTables_wrapper > div.toolbar form input[type="search"] {
				background: none;
				padding: 5px;
				color: rgba(255,255,255,0.6);
				}
				#library-to .dataTables_wrapper > div.toolbar form input[type="search"]:focus {
					color: rgba(255,255,255,1);
					}
	.dataTables_wrapper > div.toolbar > audio {
		margin-left: 5px;
		margin-top: 8px;
		}
	.dataTables_wrapper > div.toolbar > audio + img {
		display:none;
		width: 30px;
		height: 30px;
		filter: invert(100%) sepia(49%) saturate(0%) hue-rotate(303deg) brightness(111%) contrast(101%);
		}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
	color: rgba(255,255,255,0.8);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	box-sizing: border-box;
	display: inline-block;
	min-width: 1.5em;
	padding: .5em 1em;
	margin-left: 2px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	color: rgba(255,255,255,0.5) !important;
	border: 1px solid transparent;
	border-radius: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border-radius: 5px;
	border-color: rgba(135, 149, 158, 0.5);
	background: rgba(135, 149, 158, 0.5);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	border-radius: 5px;
	border-color: rgba(135, 149, 158, 0.5);
	background: rgba(135, 149, 158, 1);
}
.library #library_to_wrapper table>tbody>tr {
	min-height: 40px;
}
table.dataTable tbody tr.selected>* {
	/* box-shadow: inset 0 0 0 9999px rgba(226, 255, 0, 0.9); */
	box-shadow: none;
	color: black;
	/* background: rgb(255,250,0);
	background: -moz-linear-gradient(180deg, rgba(255,250,0,1) 0%, rgba(179,255,0,1) 100%);
	background: -webkit-linear-gradient(180deg, rgba(255,250,0,1) 0%, rgba(179,255,0,1) 100%);
	background: linear-gradient(180deg, rgba(255,250,0,1) 0%, rgba(179,255,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fffa00",endColorstr="#b3ff00",GradientType=1); */
	background: rgb(255,147,0);
	background: -moz-linear-gradient(0deg, rgba(255,147,0,1) 0%, rgba(255,250,0,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(255,147,0,1) 0%, rgba(255,250,0,1) 100%);
	background: linear-gradient(0deg, rgba(255,147,0,1) 0%, rgba(255,250,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff9300",endColorstr="#fffa00",GradientType=1);
	border: 1px solid black;
	/* border-top: none; */
	/* border-top-style: inset; */
}

.inspector {
	position: relative;
	overflow: scroll;
}
.inspector.centered {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.inspector .noCartsSelected {
	font-size: 11px;
	color: rgba(255,255,255,0.3);
	text-align: center;
	margin-top: 15px;
	margin-bottom: 15px;
}
.inspector .cart {
}
.inspector form {
	background: rgba(255,255,255,0.2);
	padding: 15px;
	border-radius: 6px;
	}
	.inspector .cart h3 {
		font-size: 18px;
		margin: 0px;
		margin-bottom: 20px;
		}
		.inspector .cart hr {
			border: 1px solid rgba(255,255,255,0.2);
			border-bottom: none;
			margin-top: 15px;
			margin-bottom: 15px;
		}
	.inspector .cart label {
		font-size: 15px;
		margin: 0px;
		display: block;
		text-transform: uppercase;
		margin-bottom: 5px;
		}
		.inspector .cart input,
		.inspector .cart select,
		.inspector .cart textarea {
			width: 100%;
		}
		.inspector .cart input + label,
		.inspector .cart textarea + label,
		.inspector .cart select + label,
		.inspector .cart input + input[type="button"],
		.inspector .cart textarea + input[type="button"],
		.inspector .cart select + input[type="button"],
		.inspector .cart input + input[type="submit"],
		.inspector .cart textarea + input[type="submit"],
		.inspector .cart select + input[type="submit"],
		.inspector .cart select + script + input[type="button"],
		.inspector .cart select + script + input[type="submit"] {
			margin-top: 15px;
		}
	.inspector .cart select,
	.inspector .cart textarea {
		/* font-size: 18px; */
		margin: 0px;
		display: block;
		}
	.inspector .cart input::placeholder,
	.inspector .cart textarea::placeholder {
		color: rgba(0, 0, 0, 0.3);
		}
.inspector .link {
	width: 100%;
	margin-bottom: 15px;
	}
	.inspector .link input {
		width: 100%;
	}
	.inspector .link .site {
		width: 40%;
		display: inline-block;
	}
	.inspector .link .cart {
		width: calc(60% - 5px);
		display: inline-block;
	}
.inspector .player {
	/* position: absolute;
	bottom: 0px; */
	width: calc(100% - 10px);
	background: rgba(255,255,255,0.1);
	border-radius: 3px;
	padding: 5px;
	text-align: center;
	}
	@media (min-height: 900px){
		.inspector .player {
			position: absolute;
			bottom: 0px;
		}
	}
	.inspector .player .playerCartNumber {
		text-align: center;
		display: block;
	}
	.inspector .player .playerArtist,
	.inspector .player .playerTitle {
		text-align: center;
		color: rgba(255,255,255,0.7);
		display: block;
		font-size: 13px;
		}
	.inspector .player audio {
		margin-top: 15px;
	}


.modalBackground {
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100vh;
	width: 100vw;
	z-index: 100;
	background: rgba(0,0,0,0.4);
	background:rgba(41, 65, 82, 0.7);
	backdrop-filter: blur(1px);
	-webkit-backdrop-filter: blur(1px);
	}
	.modal {
		display:none;
	}
	.modal#modal-loading {
		/* display: block; */
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100vh;
		width: 100vw;
		z-index: 101;
		background-image: url('/img/ajax_snake.svg');
		background-size: 100px;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.modal.modal--centerInner,
	.modal.modal--centerInner>div {
		position: absolute;
		top: 0px;
		height: 100vh;
		width: 100vw;
		}
		.modal.modal--centerInner > div {
			height: 100vh;
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.modal.modal--centerInner > div > div.content {
			background: rgba(255,255,255,0.2);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			padding: 30px;
			border-radius: 10px;
			height: auto;
			z-index: 102;
			color: rgba(255,255,255,0.8);
			box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
		}
	.modal#modal-keyboardShortcuts {
		}
		.modal#modal-keyboardShortcuts h2 {
			text-align: center;
			/* width: 600px; */
			width: 100%;
		}
		.modal#modal-keyboardShortcuts .keyboardShortcuts {
			list-style: none;
			margin: 0px;
			padding: 0px;

			column-count: 2;
			column-gap: 20px;
			}
			.modal#modal-keyboardShortcuts .keyboardShortcuts li {
				margin-bottom: 3px;
			}
			.modal#modal-keyboardShortcuts .keyboardShortcuts .keys {
				display: inline-block;
				/* min-width: calc(50% - 10px); */
				min-width: 130px;
				text-align: right;
				}
				.modal#modal-keyboardShortcuts .keyboardShortcuts .keys > .key {
					display: inline-block;
					border: 1px solid: rgba(0,0,0,0.8);
					background: rgba(255,255,255,0.7);
					color: rgba(0,0,0,0.7);
					padding: 3px 8px;
					border-radius: 3px;
					}
					.modal#modal-keyboardShortcuts .keyboardShortcuts .keys>.key + .key {
						margin-left: 10px;
					}
					.modal#modal-keyboardShortcuts .keyboardShortcuts .keys>.plus {
						color: rgba(255,255,255,0.4);
						margin-left: 8px;
						margin-right: 8px;
					}
			.modal#modal-keyboardShortcuts .keyboardShortcuts .name {
				margin-left: 15px;
				text-align: left;
				}


.animation_pulse_loading {
		/* box-shadow: 0 0 0 0 rgba(0, 255, 52, 1); */
		animation-name: ANIMpulseLoading;
		animation-duration: 5s;
		animation-iteration-count: infinite;
		background-image: repeating-linear-gradient(
		  -45deg,
		  rgba(255,255,255,0.3) 0 20px,
		  rgba(255,255,255,0) 20px 40px
		) !important;
		background-repeat: no-repeat;
		background-position: 0px 0px;
	}
	@keyframes ANIMpulseLoading {
	  0% {

		background-position: 0%;
	  }

	  70% {
		/* box-shadow: 0 0 0 10px rgba(51, 217, 178, 0); */
		  background-position: 50%;
	  }

	  100% {
		/* background-image: repeating-linear-gradient(
			-45deg,
			  black 0 20px,
			  transparent 20px 40px
		  ); */
		  background-position: 0%;
	  }
	}
.animation_pulse_updated {
	box-shadow: 0 0 0 0 rgba(0, 255, 52, 1);
	animation-name: ANIMpulseUpdated;
	animation-duration: 2s;
}
@keyframes ANIMpulseUpdated {
  0% {
	box-shadow: 0 0 0 0 rgba(0, 255, 52, 1);
  }

  70% {
	box-shadow: 0 0 0 10px rgba(51, 217, 178, 0);
  }

  100% {
	box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
  }
}
.animation_pulse_error {
	box-shadow: 0 0 0 0 rgba(0, 255, 52, 1);
	animation-name: ANIMpulseError;
	animation-duration: 2s;
}
@keyframes ANIMpulseError {
  0% {
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 1);
  }

  70% {
	box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
  }

  100% {
	box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
  }
}
.animation_pulse_opacity {
	opacity: 1;
	animation-name: ANIMpulseOpacity;
	animation-duration: 2s;
	}
	.animation_infinite {
		animation-iteration-count: infinite;
		}
@keyframes ANIMpulseOpacity {
  0% {
	opacity: 1;
	transform: rotate(0deg);
  }

  25% {
	opacity: 0.2;
	transform: rotate(-20deg);
  }

  50% {
	opacity: 1;
  }
  75% {
	opacity: 0.2;
	transform: rotate(20deg);
  }

  100% {
	opacity: 1;
	transform: rotate(0deg);
  }
}


#appViewport table.tasksSummary {

	}
	#appViewport table.tasksSummary td {
		padding: 8px 8px;
	}


.ui_progressbar {
	  background-color: rgba(125,125,125, 0.1);
		border: 1px solid rgba(125,125,125,0.05);
	  border-radius: 8px;
	  padding: 2px;
		box-shadow: 0 2px 2px rgba(0, 0, 0, 0.03) inset;
	}

	.ui_progressbar>div {
		background: rgb(96,194,254);
		background: -moz-linear-gradient(-45deg, rgba(96,194,254,1) 0%, rgba(21,112,227,1) 84%);
		background: -webkit-linear-gradient(-45deg, rgba(96,194,254,1) 0%,rgba(21,112,227,1) 84%);
		background: linear-gradient(135deg, rgba(96,194,254,1) 0%,rgba(21,112,227,1) 84%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60c2fe', endColorstr='#1570e3',GradientType=1 );
		background-size: 100% 100%;
		background-attachment: fixed;
	  width: 0%;
	  /* Adjust with JavaScript */
	  height: 6px;
	  border-radius: 8px;

		-webkit-transition: width 2s; /* Safari */
	  transition: width 2s;
	}
	.ui_progressbar.ui_progressbar--done>div {
		background: -moz-linear-gradient(-45deg, rgba(23, 164, 135, 1) 0%,rgba(21, 130, 94, 1) 84%);
		background: -webkit-linear-gradient(-45deg, rgba(23, 164, 135, 1) 0%,rgba(21, 130, 94, 1) 84%);
		background: linear-gradient(135deg, rgba(23, 164, 135, 1) 0%,rgba(21, 130, 94, 1) 84%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60c2fe', endColorstr='#1570e3',GradientType=1 );
		background-size: 100% 100%;
		background-attachment: fixed;
	}
.ui_taskProgressList {

	}
	.ui_taskProgressList_container {
		margin: 15px;
		}
		.ui_taskProgressList tbody tr td icon {
			top: 3px;
			position: relative;
			}
			.ui_taskProgressList .ui_taskProgressList--processingIcon {
				-webkit-mask-image: url('/img/ui2/ajax_snake.svg') !important;
				-webkit-mask-size: contain;
				background-color: rgb(0,0,0) !important;
			}

@media print {
	#appViewport .library table thead th {
		padding: 8px;
		text-align: left;
		border-bottom: 1px solid black;
	}
	#appViewport .library table tbody tr td {
		font-size: 11px;
		padding: 3px;
		height: auto;
		color: black;
	}
}


form#login {
	border: 1px solid rgba(255,255,255,0.15);
	padding: 15px;
	border-radius: 3px;
	max-width: 300px;
	margin-left: auto;
	margin-right: auto;
	margin-top: calc(50vh - 180px);
	/* background: rgba(255,255,255,0.3); */
	background: rgba(0,0,0,0.4);
	background: rgba(36, 38, 45, 1.0);
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
	}
	form#login h1 {
		text-align: center;
		margin-top: 0px;
		margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid rgba(255,255,255,0.2);
		}
	form#login div.error {
		text-align: center;
		margin-top: 0px;
		margin-bottom: 15px;
		padding: 8px;
		border: 1px solid rgba(255, 0, 0, 0.2);
		border-radius: 3px;
		background: rgba(255, 0, 0, 0.3);
		font-size: 0.8em;
		}
	form#login .formfield {
		text-align: center;
		margin-top: 0px;
		margin-bottom: 15px;
		}
		form#login .formfield label {
			display: none;
			text-align: center;
			margin-top: 0px;
			margin-bottom: 8px;
			text-transform: uppercase;
			font-size: 0.8em;
			color: rgba(255,255,255,0.6);
		}
		form#login .formfield input {
			display: block;
			width: 100%;
			color: white;
		}
		form#login .formfield input::placeholder {
			color: rgba(255,255,255,0.2);
		}
		form#login .formfield input.error {
			background-color: rgba(255, 0, 0, 0.2);
		}
	form#login input[type="submit"] {
		text-align: center;
		margin-top: 15px;
		margin-bottom: 15px;
	}

	form#login .controls{
		text-align: center;
		}
		form#login .controls a {
			font-size: 0.7em;
			color: rgba(255,255,255,0.4);
			text-decoration: none;
			}
			form#login .controls a:hover {
				color: rgba(255,255,255,0.7);
			}
			form#login .controls a + a {
				margin-left: 15px;
			}
.backupsContainer {
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 150px;
	display: block;
}
.backupsContainer h3 {
	text-align: center;
	}
	.backupsContainer a.back {
		margin-right: 15px;
	}
	.fileBrowser {
		border: 1px solid rgba(255,255,255,0.3);
		border-radius: 3px;
		padding: 15px;
		min-width: 600px;
		margin-top: 15px;
		}
		.fileBrowser span {
			display: block;
			text-align: center;
			padding: 30px;
			font-size: 0.8em;
			color: rgba(255,255,255,0.4);
		}
		.fileBrowser a {
			padding: 3px 5px;
			display: block;
			border-radius: 3px;
			}
			.fileBrowser a:hover {
				background: rgba(255,255,255,0.1);
			}

.timecards_summary {
	max-width:600px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid rgba(255,255,255,0.2);
	background: rgba(36, 38, 45, 1.0);
	border-radius: 10px;
	margin-top: 60px;
	}
	.timecards_summary table {

		}
		.timecards_summary table thead tr th {
			padding: 10px 8px;
			border-bottom: 1px solid rgba(255,255,255,0.4);
			background: rgba(255,255,255,0.15);
		}
			.timecards_summary table thead tr th:first-of-type {
				border-top-left-radius: 10px;
				}
			.timecards_summary table thead tr th:nth-child(2),
			.timecards_summary table thead tr th:nth-child(3),
			.timecards_summary table thead tr th:nth-child(4) {
				text-align: left;
			}
			.timecards_summary table thead tr th:last-of-type {
				border-top-right-radius: 10px;
			}
		.timecards_summary table tbody tr td {
			padding: 15px 8px;
			border-bottom: 1px solid rgba(255,255,255,0.2);
			}
		.timecards_summary table tbody tr.good td {
			background: rgba(0,150,0,0.2);
			}
		.timecards_summary table tbody tr.danger td {
			background: rgba(150,0,0,0.2);
			}
		.timecards_summary table tbody tr:last-of-type td {
			border-bottom: none;
		}
			.timecards_summary table tbody tr td.timeIn span {
				display: block;
				font-size: 0.8em;
				opacity: 0.5;
				}
		.timecards_summary table tbody tr:hover td {
			background: rgba(0, 108, 150, 0.2);
			}
	.timecards_summary td.stateIndicator {
		text-align: center;
	}
	.timecards_summary div.stateIndicator {
		display: inline-block;
		height: 15px;
		width: 15px;
		border-radius: 100%;
		border-color: rgba(255,255,255,0.4);
		}
		.timecards_summary div.stateIndicator.green {
			background: rgb(0, 255, 0);
			border-color: rgb(0, 255, 0);
			}
		.timecards_summary div.stateIndicator.red {
			background: rgb(255, 0, 0);
			border-color: rgb(255, 0, 0);
			}
		.timecards_summary div.stateIndicator.off {
			background: none;
			border-width: 1px;
			border-style: solid;
		}
.marginT30 {
	margin-top: 30px;
}


.detailedList {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.detailedList--centered {
	max-width:600px;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 10px;
	margin-top: 60px;
	}
	.detailedList ul {
		margin: 0px;
		padding: 0px;
	}
	.detailedList ul li {
		margin: 0px;
		padding: 0px;
		display: flex;

		align-items: stretch;
		/* flex-flow: row nowrap; */
		flex-direction: row;
		flex-wrap: wrap;
		align-content: stretch;
		gap: 5px;
		padding-top: 10px;
		padding-bottom: 10px;
		}
	.detailedList ul li + li{
		border-top: 1px solid rgba(255,255,255,0.2);
		}
	.detailedList.detailedList--hoverable ul li:hover {
		background: rgba(255,255,255,0.1);
		}
	.detailedList.detailedList--hoverable ul li:first-child {
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		}
	.detailedList.detailedList--hoverable ul li:last-child {
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		}

		.detailedList ul li > div {
			border-radius: 5px;
			padding: 8px;
		}


		.detailedList ul li > div.checkbox {
			/* flex:0 1 auto; */
			flex-grow:0;
			}
			.detailedList ul li > div.checkbox {
				/* flex:0 1 auto; */
				flex-grow:0;
			}
			.detailedList ul li > div.checkbox input {
				margin: 0px;
			}
			.detailedList ul li > div.checkbox input[type="checkbox"] {
				/* opacity: 0; */
			}
			.detailedList ul li:hover > div.checkbox input[type="checkbox"] {
				opacity: 1;
			}
			.detailedList ul li > div.checkbox input[type="checkbox"]:checked {
				opacity: 1;
				background: rgb(0, 94, 255);
				background-image: url('/img/iconmonstr-check-mark-9-white.svg');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 70%;
			}
			.detailedList ul li > div.checkbox input[type="checkbox"]:disabled {
				background: rgba(255, 0, 91, 0.212);
			}

		.detailedList ul li > div.details {
			/* flex:2 1 auto; */
			flex-grow:2;
			flex-shrink: 0;
			}
		.detailedList ul li > div.details div.subdetail {
			font-size: 0.8em;
			color: rgba(255,255,255,0.4);
			}
		.detailedList ul li > div.details div.subdetail .timeIn {
			display: block;
			}
		.detailedList ul li > div.details div.subdetail .timeIn span {
			/* display: block; */
			}

		.detailedList ul li > div.bigDetail {
			/* flex:1 1 auto; */
			flex-grow:0;
			}
			.detailedList ul li > div.bigDetail span {
				font-size: 1.5em;
				background-color: rgba(255,255,255,0.1);
				padding: 3px 8px;
				border-radius: 3px;
			}
		.detailedList ul li > div.more {
			/* flex:0 1 auto; */
			flex-grow:0;
			}
			.detailedList ul li > div.more input[type="button"] {
				display: inline-block;
				background: blue;
				/* padding: 3px 7px; */
				height: 30px;
				width: 30px;
				border: 2px solid rgba(255,255,255,0.5);
				border-radius: 30px;
				text-align: center;
				line-height: 12px;
				cursor: pointer;
			}
			@media screen and (max-width: 600px) {
				.detailedList ul li > div.checkbox input[type="checkbox"] {
					opacity: 1;
				}
				.detailedList ul li > div.bigDetail {
					margin-left: 75px;
					width: calc(70% - 75px);

				}
				.detailedList ul li > div.more {
					width: calc(30% - 45px);
					text-align: right;
				}
			}

div.stateIndicator {
	display: inline-block;
	height: 15px;
	width: 15px;
	border-radius: 100%;
	border-width: 1px;
	border-style: solid;
	border-color: rgba(255,255,255,0.4);
	}
	div.stateIndicator.green {
		background: rgb(0, 255, 0);
		border-color: rgb(0, 255, 0);
		}
	div.stateIndicator.red {
		background: rgb(255, 0, 0);
		border-color: rgb(255, 0, 0);
		}
	div.stateIndicator.off {
		background: none;
		border-width: 1px;
		border-style: solid;
	}

.customReport {
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
	background: white;
	color: black;
	padding: 20px;
	border-radius: 10px;
	margin-top: 30px;
	margin-bottom: 50px;
}
.customReport * {
	color: black;
	font-size: 0.9em;
}
table.hoursByWeek {

	}
	table.hoursByWeek thead {
		background-color: rgba(0, 88, 255, 0.2);
		color: black;
	}
	table.hoursByWeek thead tr th {
		padding: 5px 10px;
	}
	table.hoursByWeek thead tr:first-child th:nth-of-type(1),
	table.hoursByWeek thead tr:first-child th:nth-of-type(2),
	table.hoursByWeek thead tr:first-child th:nth-of-type(3) {
		width: 80px;
	}
	table.hoursByWeek tbody tr td:nth-of-type(1),
	table.hoursByWeek tbody tr td:nth-of-type(2) {
		background-color: rgba(255,255,255,0.1);
	}
	table.hoursByWeek thead tr th.sepAfter:not(:nth-last-of-type(1)),
	table.hoursByWeek thead tr th.sepAfter:not(:nth-last-of-type(1)),
	table.hoursByWeek tbody tr td.sepAfter:not(:nth-last-of-type(1)),
	table.hoursByWeek tfoot tr td.sepAfter:not(:nth-last-of-type(1)) {
		border-right: 1px solid rgba(0,0,0,1);
	}
	table.hoursByWeek tbody tr td {
		padding: 3px 10px;
		}
		table.hoursByWeek tbody tr td.noCheckinOnDate {
			background-color: rgba(0, 194, 255, 0.05);
			text-align: center;
		}
	table.hoursByWeek tfoot td.totalsLabel {
		text-align:right;
		padding-right: 15px;
		font-weight: bold;
		background: rgba(0,0,0,0.1);
		}
		table.hoursByWeek tfoot td {
			text-align: center;
			background: rgba(0,0,0,0.1);
		}

time[data-type="duration"]>span{
	color: rgba(0,0,0,0.6);
}