* {
	font-family: "Roboto", Verdana, Sans-Serif;
}
pre,code {
	font-family: "Roboto Mono", Monospace;
}
body {
	--bg1:		#FFFFFF;
	--bg2:		#00796B;
	--bg3:		#4b0082;
	--text1:	#212121;
	--text2:	#FFFFFF;
	--text3:	#B2DFDB;
	--accent:	#009688;
	--accent2:	#757575;
	--accent3:	#BDBDBD;
	--hover3:	#ab058b;
	background-color:	#f0f0f0;
	margin:				0px 0px 50px 0px;
	transition:			filter 500ms;
}
.cred {
	color: #a00;
}
.cgreen {
	color: #0a0;
}
.cblue {
	color: #00a;
}
.corange {
	color: #f80;
}
.cgrey {
	color: #aaa;
}
.cblack {
	color: #000;
}
.cwhite {
	color: #fff;
}
.cnti {
	color: var(--bg3);
}
.vertMiddle * {
	vertical-align: middle;
}
.blur {
	filter: blur(5px);
	transition: filter 200ms;
	cursor: pointer;
}
.hoverUnblur:hover {
	filter: none;
}
.hint {
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: var(--bg1);
	border: 1px solid #aaa;
	border-radius: 5px;
	margin: 0px;
	padding: 5px;
	box-shadow: 0px 0px 5px #000;
}
.warningBox {
	border: 5px solid #f00;
	background-color: #fff;
	border-radius: 20px;
	padding: 20px;
	margin-bottom: 20px;
}
.warningBox p {
	margin: 0px;
}
*[data-hint]:not([data-hint=""]) {
	color: #00a;
}
*[data-hint][data-locked="true"]:not([data-hint=""]) {
	color: #66a;
}
.hidden {
	display: none;
}
.table {
	display: table!important;
}
.table td {
	display: table-cell!important;
}
#loader {
	position: relative;
	display: none;
	z-index: 1;
}
#loader > div {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0px;
	display: block;
}
#loader > div > span {
	margin: 0px;
	color: var(--bg3);
}
.loading {
	animation-name: loader;
	animation-duration: 1s;
	animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.loading2 {
	animation-name: loader2;
	animation-duration: 1s;
	animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.loading3 {
	animation-name: loader3;
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.loading4 {
	animation-name: loader4;
	animation-duration: 300ms;
    animation-iteration-count: infinite;
}
@keyframes loader {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes loader2 {
	0% {
		transform: rotate(360deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes loader3 {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(180deg);
	}
}
@keyframes loader4 {
	0% {
		transform: rotate(-5deg);
	}
	50% {
		transform: rotate(5deg);
	}
	100% {
		transform: rotate(-5deg);
	}
}
.ringer {
	animation-name: ringer;
	animation-duration: 300ms;
    animation-iteration-count: infinite;
}
.alarm {
	animation-name: ringer;
	animation-duration: 250ms;
    animation-iteration-count: infinite;
}
@keyframes ringer {
	0% {
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
	100% {
		transform: rotate(-10deg);
	}
}
.grey {
	background-color: #999;
}
.icon {
	font-size: 18px!important;
	vertical-align: middle;
	margin: 0px!important;
}
#mainPageContent {
	position: relative;
}
#makeFavorite {
	user-select: none;
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 5px;
}

header > a {
	white-space: nowrap;
}
footer {
	position:			fixed;
	bottom:				0px;
	width:				100%;
	padding:			5px;
	background-color:	var(--bg3);
	color:				var(--text2);
	text-align:			center;
}
footer p {
	margin: 0px;
}
.material-icons,.material-symbols-rounded {
	vertical-align: middle;
}
.material-icons:not(.textless), .material-symbols-rounded:not(.textless) {
	margin: 0px 5px 0px 0px;
}
.icon_200 {
	font-size: 200%!important;
	color: var(--bg3);
}
header,nav,section,footer {
	transition: filter 500ms;
}
header h1 {
	display:	inline-block;
	margin:		0px 10px 0px;
}
section h1,.fullscreenWindow h1 {
	margin: 2px 10px 20px;
}
section h2,.fullscreenWindow h2 {
	margin: 2px 8px 10px;
}
section h3,.fullscreenWindow h3 {
	margin: 2px 5px 10px
}
section table {
	max-width: 100%;
}
section a,.fullscreenWindow a {
	color: #00a;
}
.fullscreenWindow img {
	max-height: 80%;
	max-width: 90%;
}
#selectImage {
	position: fixed;
    left: 50%;
    top: 50%;
	max-height: 80%;
	max-width: 80%;
    transform: translate(-50%, -50%);
	background-color: #fff;
	border: 1px solid #aaa;
	border-radius: 10px;
	padding: 10px;
	z-index: 9999;
	overflow-y: auto;
}
#selectImage #imgExitButton {
	float: right;
	clear: both;
}
#selectImage img {
	outline: 2px solid #f00;
	max-width: 90%;
	max-height: 25vh;
	transition: border-color 200ms;
}
#selectImage img:hover {
	outline: 5px solid #0f0;
}
section .material-icons, section .material-symbols-rounded {
	vertical-align: top;
}
section p .material-icons, section p .material-symbols-rounded {
	font-size: 120%;
}
section .button2 .material-icons, section .button .material-icons, section .button3 .material-icons, section .buttonShell .material-icons, section .button2 .material-symbols-rounded, section .button .material-symbols-rounded, section .button3 .material-symbols-rounded, section .buttonShell .material-symbols-rounded {
	font-size: 160%;
}
header * {
	color:			#000;
	max-height:		50px;
	vertical-align:	middle;
}
header img {
	background-color:	var(--bg3);
	padding:			5px 20px 5px 10px;
	margin:				0px 10px 0px 0px;
}

#msgBar {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 20px;
	background-color: #fff;
	border: 1px solid #aaa;
	border-radius: 5px;
	display: inline-block;
	max-width: 80vw;
	min-width: 10vw;
	text-align: center;
	word-break: break-all;
	margin: auto;
	padding: 5px;
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
	opacity: 0;
	z-index: 999;
	transition: opacity 200ms;
}
#msgBar table {
	width: 100%;
}
#msgBar table tr td {
	width: 50%;
}
#msgBar table tr td:nth-of-type(1) * {
	text-align: right;
}
#msgBar table tr td:nth-of-type(2) * {
	text-align: left;
}
#msgBar.open {
	opacity: 1;
}
#msgBar #msgBarExit {
	float: right;
}
#msgBar #msgInputData textarea {
	width: 90%;
}
#msgBar #msgContent.codemsg {
	display: block;
	background-color: #000;
	color: #0f0;
	padding: 20px;
	border-color: 10px;
	font-family: monospace;
	border: 1px solid #000;
}
#msgBar #msgCodeContent td:first-of-type {
	width: initial;
}
#msgBar #msgCodeContent td:nth-of-type(2) {
	width: 100%;
}

.thumbdiv {
	overflow: hidden;
	transition: max-height 1s;
	max-height: 3vh;
	min-height: 20px!important;
}
.thumbdiv:hover {
	max-height: 100vh;
}

body.thumb header,body.thumb nav,body.thumb section,body.thumb footer {
	filter: blur(5px) grayscale(80%);
}
#thumb {
	position: fixed;
	opacity: 1;
	display: block;
	width: 100vw;
	height: 100vh;
	bottom: 0vh;
	opacity: 1;
	z-index: 999;
	transition: bottom 500ms, opacity 500ms;
}
#thumb:not(.on) {
	bottom: 200vh;
	opacity: 1;
}
#thumb > div {
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 20px;
	background-color: rgba(255,255,255,1);
	border: 1px solid #000;
	border-radius: 10px;
	transform: translate(-50%, -50%);
}
#thumb > div > div {
	overflow-y: auto;
	height: 100%;
}
#thumb #thumb_addBook {
	position: fixed;
	right: 10px;
	bottom: 10px;
}
#thumb #thumb_addBook * {
	font-size: 100%;
}
#thumb .imgPreview:not(:empty) {
	border: 1px solid #aaa;
}
@media screen and (max-width: 480px) {
	#thumb > div {
		width: 80vw;
		height: 90vh;
	}
	#thumb .imgPreview {
		width: 60%;
		display: block;
		text-align: center;
	}
	#thumb #thumb_addBook {
		font-size: 200%;
	}
}
@media screen and (min-width: 480px) {
	#thumb > div {
		width: 90vw;
		height: 90vh;
		padding: 10px;
	}
	#thumb .imgPreview {
		float: right;
		width: 20%;
	}
	#thumb #thumb_addBook {
		font-size: 500%;
	}
}

#loginInfo {
	text-align: center;
}
#loginInfo > a {
	display: block;
	font-size: 48px;
	width: 50vw;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 5px;
	color: #fff;
	background-color: var(--bg3);
	border-radius: 10px;
	transition: background-color 150ms;
}
#loginInfo > a:hover {
	background-color: var(--hover3);
}

nav {
	background-color: var(--bg3);
}
nav > .menuItem {
	display:	inline-block;
	padding:	0px;
}
nav > .menuItem > .submenu {
	position:	absolute;
	z-index:	998;
	display:	none;
}
nav > .menuRight > .submenu {
	right: 0px;
}
nav > .menuItem > .submenu > .menuItem > .submenu {
	position:	absolute;
	z-index:	999;
	display:	none;
	opacity:	0;
	top:		0px;
	left:		100%;
	transition:	opacity 200ms;
}
nav > .menuItem:hover > .submenu {
	display: block;
}
nav > .menuItem > .submenu > .menuItem:hover > .submenu {
	display:	inline-block;
	opacity:	1;
}
nav > .menuItem > .submenu > a {
	display: block;
}
nav > .menuItem > .submenu > .menuItem {
	display: block;
}
nav > .menuItem > .submenu > .menuItem {
	width: 100%;
}
@media screen and (min-width: 480px) {
	nav > .menuItem > .submenu > .menuItem {
		position: relative;
	}
	nav > .menuItem > .submenu > .menuItem > .hasSubmenu::after {
		display: block;
		position: absolute;
		content: "-";
		top: 15%;
		right: 10px;
	}
}
nav a {
	display:			block;
	/*background-color:	var(--bg3);*/
	border:				none;
	white-space:		nowrap;
}
nav .submenu {
	background-color: 	var(--bg3);
}
nav .selected {
	background-color:	var(--hover3)!important;
}
nav a:hover {
	color:				var(--text1)!important;
	background-color:	var(--bg1)!important;
	outline:			1px solid var(--bg3);
}
nav p,nav h1,nav h2,nav h3,nav a {
	color: var(--text2);
}
nav .notification {
	font-size: 90%;
}
nav .notification > time {
	display:		block;
	text-align:		right;
	color:			rgba(255,255,255,0.6);
	transition:		color 200ms;
}
nav .notification:hover > time {
	color: rgba(0,0,0,0.6);
}
.menuRight {
	float: right;
}
nav .viewed {
	background-color: #78c;
}
.pagenotification {
	transition: background-color 200ms, color 200ms;
}
.pagenotification:hover {
	color:				var(--text2);
	background-color:	var(--bg3);
}

.linklist a {
	transition: color 150ms;
}
.linklist a:hover {
	
	color: #0af;
}

#newpost {
	position:			relative;
	margin:				auto;
	background-color:	rgba(0,0,0,0.5);
	display:			none;
}
#newpost > div {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: auto;
	display: block;
	opacity: 1;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	border: 2px solid var(--bg3);
	-webkit-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 24px 0px rgba(0,0,0,0.75);
	transition: opacity 500ms;
}
.newpost {
	position: fixed;
	right: 20px;
	bottom: 50px;
	padding: 10px;
	border-radius: 100%;
	background-color: var(--bg3);
	border: 2px solid var(--text2);
	color: var(--text2);
	transition: color 200ms, background-color 200ms, border 200ms;
}
.newpost:hover {
	border-color: var(--bg3);
	background-color: var(--hover3);
	color: var(--text1);
}

.threadlist td {
	padding: 5px;
}
.threadlist tr:nth-of-type(2) td:first-of-type {
	border-top-left-radius: 6px;
}
.threadlist tr:nth-of-type(2) td:last-of-type {
	border-top-right-radius: 6px;
}
.threadlist tr:last-of-type td:first-of-type {
	border-bottom-left-radius: 6px;
}
.threadlist tr:last-of-type td:last-of-type {
	border-bottom-right-radius: 6px;
}
.forumlist tbody tr td,.forumlist tbody tr th {
	background-color: #fff;
}
.forumlist td:nth-child(3n+1) {
	height: 100%;
}
.forumlist tbody tr:nth-child(3) td {
	text-align: right;
}
.forumlist tbody tr:nth-of-type(2) td {
	border-top: none;
	padding: 10px;
}
.forumlist tbody tr:nth-of-type(1) th:last-of-type {
	border-bottom: none;
}
.forumQuote {
	display: block;
	border: 1px solid #888;
	border-radius: 4px;
	color: #888;
	background-color: #fff;
	margin: 0px 0px 10px 0px;
	padding: 5px;
	max-height: 45px;
	overflow: hidden;
	transition: border 200ms, padding 200ms;
}
.forumQuote:hover {
	padding: 4px;
	border-width: 2px;
	border-color: var(--bg3);
}
.forumQuote a {
	color: #000;
	border: none;
}
.forumQuote a:hover {
	border: none;
}
.threadname {
	width: 60%;
}
.foruminvisible tr:not(:nth-of-type(3)) {
	opacity: 0.3;
	filter: blur(3px) grayscale(100%);
	transition: filter 200ms, opacity 200ms;
}
.foruminvisible tr:nth-of-type(3) td:first-of-type {
	opacity: 0.3;
	filter: blur(3px) grayscale(100%);
	transition: filter 200ms, opacity 200ms;
}
.foruminvisible tr:nth-of-type(2) > td > p {
	max-height: 40px;
	overflow: hidden;
	transition: max-height 200ms;
}
.foruminvisible:hover tr:not(:nth-of-type(3)) {
	filter: none;
	opacity: 1;
}
.foruminvisible:hover tr:nth-of-type(2) > td > p {
	max-height: 105px;
}
.textTools {
	max-height: 0px;
	overflow: hidden;
	background-color: #f00;
	transition: 200ms;
}
.textTools.active {
	max-height: 50px;
}

.maillist tr td:nth-of-type(2) {
	width: 100%;
}
.maillist tr td:not(:nth-of-type(2)) {
	white-space: nowrap;
}
.maillist tr td {
	transition: background-color 200ms, color 200ms;
}
.maillist:not(.disabled) tr:hover td:not(.msgempty) {
	background-color: var(--bg3);
	color: var(--text2);
}
.message {
	width: 100%;
}
.message tbody:not(.padding) {
	border: 1px solid #aaa;
	background-color: #fff;
}
.message .padding td {
	height: 10px;
}
.message tbody tr:first-of-type th:not(:nth-of-type(2)) {
	font-weight: normal;
}
.message tbody tr:first-of-type th:nth-of-type(2) {
	width: 100%;
}
.message tbody tr:first-of-type th:nth-of-type(3) {
	font-style: italic;
}
.message tbody tr:first-of-type th {
	border-bottom: 1px solid #ddd;
	text-align: center;
}
.message tbody tr:first-of-type th > p {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.message tbody tr:nth-of-type(2) > td {
	padding-top: 10px;
}
input,textarea {
	transition: background-color 1s, border 1s, color 1s;
}
input[type="checkbox"],input[type="radio"] {
	margin: 0px;
	padding: 4px;
}
input[type="text"]:not(.disabled),input[type="number"]:not(.disabled),input[type="password"]:not(.disabled),select:not(.disabled) {
	padding: 2px;
	border-radius: 5px;
	border: 1px solid var(--bg3);
}
input[type="range"] {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	margin: 10px 0px;
	height: 10px;
	outline: none;
	transition: background-color 200ms;
}
input[type="range"]:not(:disabled):hover {
	background-color: var(--hover3);
}
input[type="range"]:not(:disabled) {
	background-color: var(--bg3);
}
input[type="range"]:disabled {
	background-color: #ccc;
}
input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	border-radius: 20px;
	width: 20px;
	height: 20px;
	transition: border 200ms, background-color 200ms;
}
input[type="range"]:not(:disabled):hover::-webkit-slider-thumb {
	border: 2px solid var(--hover3);
}
input[type="range"]:not(:disabled)::-webkit-slider-thumb {
	background-color: var(--bg1);
	border: 2px solid var(--bg3);
}
input[type="range"]:disabled::-webkit-slider-thumb {
	background-color: #eee;
	border: 2px solid #aaa;
}
input[type="range"]::-moz-range-thumb {
	appearance: none;
	-moz-appearance: none;
	border-radius: 20px;
	width: 20px;
	height: 20px;
}
input[type="range"]:not(:disabled)::-moz-range-thumb {
	background-color: var(--bg1);
	border: 2px solid var(--bg3);
}
input[type="range"]:disabled::-moz-range-thumb {
	background-color: #eee;
	border: 2px solid #aaa;
}

input[type="radio"]::after {
	content: "radio_button_unchecked";
	font-size: 18px;
	font-family: "Material Icons";
	outline: none;
	display: block;
	height: 18px;
	width: 18px;
}
input[type="radio"]:not(:disabled)::after {
	color: var(--bg3);
	transition: color 100ms;
}
input[type="radio"]:disabled::after {
	color: #aaa;
}
input[type="radio"]:checked::after {
	content: "radio_button_checked";
}

input[type="checkbox"]::after {
	content: "check_box_outline_blank";
	font-size: 18px;
	font-family: "Material Icons";
	outline: none;
	display: block;
	height: 18px;
	width: 18px;
	transition: color 200ms;
}
input[type="checkbox"]:not(:disabled)::after {
	color: var(--bg3);
}
input[type="checkbox"]:disabled::after {
	color: #aaa;
}
input[type="checkbox"]:checked::after {
	content: "check_box";
}
input[type="radio"],input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	vertical-align: middle;
	transition: color 100ms;
}
input[type="radio"]:not(:first-of-type),input[type="checkbox"]:not(:first-of-type) {
	margin: 0px 0px 0px 15px;
}
input[type="radio"]:not(:disabled):hover::after,input[type="checkbox"]:not(:disabled):hover::after {
	color: var(--hover3);
}
input[type="radio"]:focus,input[type="radio"]:focus {
	outline: none;
}
textarea {
	border-radius: 5px;
	padding: 4px;
}
textarea:disabled {
	resize: none;
}
textarea:not(:disabled) {
	background-color: var(--bg1);
	border: 2px solid var(--bg3);
}
textarea:disabled {
	background-color: #eee;
	border: 2px solid #aaa;
}




/*----------------------------------------------*/
/*												*/
/*				Filter							*/
/*												*/
/*----------------------------------------------*/

.filterList li:not(.filter) {
	display: none;
}
.filterList tr.filter * {
	display: none;
}

.deleted * {
	color: #aaa;
}

section ul {
	margin: 0px;
	padding: 0px 0px 0px 15px;
}

.photoContainer {
	max-height: 80px;
	font-weight: normal;
	margin-bottom: 5px;
}
.photoContainer img {
	max-height: 80px;
}

#dashboard {
	vertical-align: top;
}
#dashboard > a {
	text-align: center;
	display: block;
	border: 2px solid var(--bg3);
	border-radius: 4px;
	background-color: var(--bg3);
	margin: 10px 10px 10px 0px;
	transition: color 200ms, background-color 200ms, border-color 200ms;
}
#dashboard > a > p {
	margin: 0px;
	color: #fff;
	transition: color 200ms;
}
#dashboard > a > p:nth-of-type(2) {
	padding: 0px 10px 5px;
}
#dashboard a.inactive {
	background-color: #ddd;
}
#dashboard > a:hover {
	border-color: var(--accent3);
	background-color: var(--bg1);
}
#dashboard > a:hover > p {
	color: var(--text1);
}
#dashboard > a.inactive > p {
	color: var(--bg3);
}
.dashboard_area {
	user-select: none;
	border: 1px solid var(--bg3);
	background-color: var(--bg1);
	padding: 10px;
	border-radius: 4px;
}
.dashboard_area .material-symbols-rounded:not(:first-of-type) {
	margin-left: 20px;
}
.dashboard_area a {
	display: inline-block;
	border: 2px solid var(--bg3);
	border-radius: 4px;
	background-color: var(--bg3);
	margin: 5px 5px 5px 0px;
	padding: 10px;
	color: #fff;
	transition: color 200ms, background-color 200ms, border-color 200ms;
}
.dashboard_area a:hover {
	border-color: var(--accent3);
	background-color: var(--bg1);
	color: var(--text1);
}
.dashboard_area a .material-icons, .dashboard_area a .material-symbols-rounded {
	margin: 0px;
	padding: 0px;
}
.dashboard_area:empty {
	display: none;
}

section,section p,section h1,section h2,section h3,.fullscreenWindow p,.fullscreenWindow h1,.fullscreenWindow h2,.fullscreenWindow h3 {
	color: var(--text1);
}
section,nav > div {
	padding: 10px;
}
a {
	text-decoration: none;
	transition: background-color 200ms, color 200ms, padding 200ms, border 200ms;
}
section a {
	border: 1px solid rgba(255,255,255,0);
}
section a:not(.button):not(.button2):not(.button3):not(.buttonShell):hover {
	color: #06f;
	border-bottom: 1px solid var(--text1);
}
#searchResults a {
	border: none;
}
table {
	border-collapse: collapse;
}
table p {
	margin: 0px;
	text-align: left;
}
table td,table th {
	padding: 2px 5px;
	text-align: left;
	vertical-align: top;
}
*[onclick],*[onmouseover] {
	cursor: pointer;
	transition: color 200ms;
}
*[onclick*=copy]:hover {
	color: #00f;
}

.hoverDialog {
	display: block;
	background-color: var(--bg3);
	color: var(--text2);
	padding: 5px 10px;
	cursor: pointer;
	transition: background-color 200ms, color 200ms;
	border: 1px solid var(--accent2);
}
.hoverDialog:hover {
	color: var(--text1);
	background-color: #fff;
}
*[contenteditable] {
	transition: max-width 500ms, width 500ms, background-color 200ms;
}
.editing {
	background-color: #0f0;
}
.error {
	background-color: #faa;
}
.borders td,.borders th {
	border: 1px solid var(--accent3);
}
.border_small {
	border: 1px solid #aaa;
	background-color: #fff;
	margin: 2px;
}

.tab:not(.active) {
	display: none;
}
ol {
	padding-left: 10px;
	overflow: hidden;
	list-style: none;
	counter-reset: olCounter;
}
ol li {
	counter-increment: olCounter;
}
ol li::before {
	display: inline-block;
	content: counter(olCounter) ". ";
	font-weight: bold;
	margin-right: 4px;
}
input[type="button"],input[type="submit"],input[type="file"] {
	cursor: pointer;
	display: inline-block;
	padding: 4px 8px;
	margin: 0px;
	color: var(--text2);
	border: 1px solid #000;
	border-radius: 4px;
	background-color: var(--bg3);
	transition: background-color 200ms, color 200ms;
}
input[type="button"]:hover,input[type="submit"]:hover,input[type="button"]:focus,input[type="submit"]:focus {
	background-color: var(--bg1);
	color: var(--text1);
}
input,textarea,select {
	font-size: 100%;
}
.button {
	display: inline-block;
	padding: 2px 5px;
	margin: 0px;
	transition: background-color 200ms, color 200ms;
}
.button:hover {
	background-color: var(--text1);
	color: var(--text2);
}
.activeButton {
	background-color: var(--bg3);
	color: var(--text2);
}
.button2 {
	display: inline-block;
	padding: 2px 5px;
	margin: 0px;
	color: var(--text2);
	border-radius: 4px;
	background-color: var(--bg3);
	border: 1px solid #000;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	transition: background-color 200ms, color 200ms;
}
.button2:not(.disabled):not(:disabled) {
	cursor: pointer;
}
.button2.selected {
	background-color: var(--hover3);
}
.button2:not(.disabled):hover,.button2:not(.disabled):focus {
	background-color: var(--bg1);
	color: var(--text1);
}
.button2.disabled,input[type="submit"]:disabled,input[type="button"]:disabled,button:disabled {
	background-color: #888;
	color: #fff;
	cursor: default;
}
.button2.selected.disabled {
	background-color: var(--hover3);
}
.button2.green {
	background-color: #080;
}
.button2 > .material-icons, .button2 > .material-symbols-rounded {
	vertical-align: middle;
}
.button3 {
	display: inline-block;
	padding: 2px 5px;
	margin: 0px;
	color: var(--bg3);
	transition: background-color 200ms, color 200ms;
}
.button3:hover {
	color: var(--text3);
}
.buttonShell {
	display: inline-block;
	padding: 2px 5px;
	margin: 0px;
	border: 1px solid #aaa;
	border-radius: 5px;
	background-color: #fff;
	transition: color 200ms, border-color 200ms;
}
.buttonShell:not(.disabled):hover {
	border-color: #000;
}
.buttonShell:not(.disabled) .material-icons, .buttonShell:not(.disabled) .material-symbols-rounded {
	transition: transform 200ms;
}
.buttonShell:not(.disabled):hover .material-icons, .buttonShell:not(.disabled):hover .material-symbols-rounded {
	transform: rotate(-20deg);
}
.checkSquare {
	padding: 5px 10px;
	margin: 0px;
	color: var(--text2);
	background-color: var(--bg3);
	border: 1px solid #000;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	transition: background-color 200ms, color 200ms;
}
.checkSquare:not(.disabled) {
	cursor: pointer;
}
.checkSquare.selected {
	background-color: var(--hover3);
}
.checkSquare.disabled {
	background-color: #eee;
	color: var(--text1);
}
.checkSquare:not(.disabled):hover {
	background-color: var(--bg1);
	color: var(--text1);
}
.checkSquare.selected.disabled {
	background-color: var(--hover3);
}


.faqItem {
	margin: 10px 0px;
}
.faqItem > p:first-of-type:hover {
	cursor: pointer;
}
.faqItem > p:nth-of-type(2) {
	max-height: 0px;
	overflow: hidden;
	padding: 0px 10px;
	background-color: #eee;
	transition: padding 200ms, max-height 200ms;
}
.faqItem.extended > p:nth-of-type(2) {
	max-height: 300px;
	padding: 10px;
}
.faqItem a {
	font-weight: bold;
}

.deviceBlock {
	display: inline-block;
	background-color: var(--bg3);
	color: var(--text2);
	padding: 5px;
	border-radius: 4px;
	margin: 5px;
}
.deviceBlock > span:last-of-type {
	max-width: 0px;
	opacity: 0;
	transition: max-width 500ms, opacity 500ms;
}
.deviceBlock:hover > span:last-of-type {
	max-width: 30px;
	opacity: 1;
}

.hover:not(.button2) {
	border-radius: 5px 5px 0px 0px;
	margin-left: 5px;
	cursor: pointer;
}
.hover:not(:hover):not(.button2) {
	text-decoration: underline;
	text-decoration-color: var(--accent3);
}
[title] {
	cursor: pointer;
}
.tooltip {
	display: block;
	position: absolute;
	font-size: 14px;
	font-weight: normal;
	color: var(--text2)!important;
	background-color: var(--bg3);
	padding: 5px;
	border-radius: 0px 5px 5px 5px;
	border: 2px solid #fff;
	border-top: none;
	border-left: none;
	max-width: 40vw;
	overflow: hidden;
	white-space: normal;
	cursor: pointer;
	transition: opacity 1s;
}
.tooltip:not(.visible) {
	display: none;
}
.hover:hover {
	background-color: var(--bg3);
	color: var(--text2);
}
.hover:hover > .tooltip {
	display: block;
}
.tooltip a {
	display: inline-block;
	padding: 2px 5px;
	color: var(--text2);
}
.tooltip a:hover {
	color: var(--text1);
	background-color: var(--bg1);
}
.tooltipBlock {
	display: inline-block;
}

.inlineTime {
	color: var(--text1);
}
.floatRight {
	float: right;
	clear: right;
}
.disabled {
	color: #ddd;
}
.disabledText * {
	color: #aaa;
}
.frame {
	display: block;
	padding: 10px;
	background-color: var(--bg1);
	border: 1px solid #aaa;
}

.notificationsPage .material-icons, .notificationsPage .material-symbols-rounded {
	transition: color 10s;
}
.clickable,.clickable td {
	transition: color 200ms, background-color 200ms;
}
.clickable:hover {
	color: var(--bg3);
}
td.clickable,.clickable td {
	background-color: var(--bg3);
	color: var(--text2);
}
td.clickable:hover,.clickable:hover td {
	background-color: var(--bg1);
	color: var(--text1);
}

/*
table .solved td p {
	color: #aaa;
}*/
table .solved * {
	color: #999;
}
#ticketMoreInfo {
	overflow: hidden;
}
#ticketMoreInfo > div{
	position: relative;
	left: -100%;
	transition: left 500ms;
}
.admin_ticketstable tr > td {
	transition: background-color 200ms;
}
.admin_ticketstable tr > td[onclick] p {
	cursor: pointer;
	color: var(--text1);
	transition: color 200ms;
}
.admin_ticketstable tr > td[onclick]:hover {
	background-color: var(--bg3);
}
.admin_ticketstable tr > td[onclick]:hover p {
	color: var(--text2)!important;
}
.admin_ticketstable .extendAdminTicketButton {
	transition: padding-left 200ms, background-color 200ms;
}
.admin_ticketstable .extendAdminTicketButton.loading4bg {
	background-color: #aff;
}
#ticketMoreInfo #tinfo_content p {
	padding: 0px;
	margin: 0px 0px 5px;
} 
#ticketMoreInfo #tinfo_content h3 {
	padding: 0px;
	margin: 0px;
}
.ticketimg {
	display: inline-block;
	height: 20px;
	margin: 0px 2px;
	border: 1px solid #90f;
	padding: 2px;
	background-color: rgba(100, 0, 255, 0);
	transition: background-color 100ms, border-color 100ms;
}
.ticketimg:hover {
	cursor: zoom-in;
	border-color: #0ff;
	background-color: rgba(100, 0, 255, 1);
}
.ticketimg:hover img {
	opacity: 0.8;
}
.ticketimg img {
	height: 100%;
	transition: opacity 100ms;
}

#borrowComRegisterField {
	position: fixed;
}

.searching:after {
	content: "";
	display: block;
	position: relative;
	top: -18px;
	left: 130px;
	width: 12px;
	height: 12px;
	animation-name: loader;
	animation-duration: 500ms;
    animation-iteration-count: infinite;
	animation-timing-function: linear;
	border: 1px solid #fff;
	border-top: 1px solid #000;
	border-radius: 50%;
}