:root {
	--white-color: #EEF;
	--color-primary: #964;
	--color-secondary: #00B5B8;
	--background: #111;
	--border-color: #555;
	--highlight: #964;
	--highlight-light: #C95;
	--highlight-dark: #632;
}

body {
	font-size: 20px;
	color: #CCC;
	background: #000;
	font-family: Poppins, Helvetica, Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	margin: 2px;
	overflow-anchor: none;
}

.helvetica {
	font-family: Helvetica, Verdana, Arial, Helvetica, sans-serif;
}

.text-upright {
	writing-mode: vertical-lr;
	text-orientation: upright;
}

body.smallview .uprightonsmall, body.smallview .uprighton1600, body.smallview .uprighton1400, body.smallview .uprighton1200,
body.smallview600 .uprighton1600, body.smallview600 .uprighton1400, body.smallview600 .uprighton1200, body.smallview600 .uprighton1000, body.smallview600 .uprighton800, body.smallview600 .uprighton600,
body.smallview800 .uprighton1600, body.smallview800 .uprighton1400, body.smallview800 .uprighton1200, body.smallview800 .uprighton1000, body.smallview800 .uprighton800,
body.smallview1000 .uprighton1600, body.smallview1000 .uprighton1400, body.smallview1000 .uprighton1200, body.smallview1000 .uprighton1000,
body.smallview1200 .uprighton1600, body.smallview1200 .uprighton1400, body.smallview1200 .uprighton1200,
body.smallview1400 .uprighton1600, body.smallview1400 .uprighton1400,
body.smallview1600 .uprighton1600 {
	writing-mode: vertical-lr;
	text-orientation: upright;
}


body.smallview .hideonsmall, body.smallview .hideon1600, body.smallview .hideon1400, body.smallview .hideon1200,
body.smallview600 .hideon1600, body.smallview600 .hideon1400, body.smallview600 .hideon1200, body.smallview600 .hideon1000, body.smallview600 .hideon800, body.smallview600 .hideon600,
body.smallview800 .hideon1600, body.smallview800 .hideon1400, body.smallview800 .hideon1200, body.smallview800 .hideon1000, body.smallview800 .hideon800,
body.smallview1000 .hideon1600, body.smallview1000 .hideon1400, body.smallview1000 .hideon1200, body.smallview1000 .hideon1000,
body.smallview1200 .hideon1600, body.smallview1200 .hideon1400, body.smallview1200 .hideon1200,
body.smallview1400 .hideon1600, body.smallview1400 .hideon1400,
body.smallview1600 .hideon1600 {
	display: none !important;
}

.displayon600, .displayon800, .displayon1000, .displayon1200, .displayon1400, .displayon1600 {
	display: none;
}

body.smallview600 .displayon600,
body.smallview800 .displayon800, body.smallview600 .displayon800,
body.smallview1000 .displayon1000, body.smallview800 .displayon1000, body.smallview600 .displayon1000,
body.smallview1200 .displayon1200, body.smallview1000 .displayon1200, body.smallview800 .displayon1200, body.smallview600 .displayon1200,
body.smallview1400 .displayon1400, body.smallview1200 .displayon1400, body.smallview1000 .displayon1400, body.smallview800 .displayon1400, body.smallview600 .displayon1400,
body.smallview1600 .displayon1600, body.smallview1400 .displayon1600, body.smallview1200 .displayon1600, body.smallview1000 .displayon1600, body.smallview800 .displayon1600, body.smallview600 .displayon1600 {
	display: block !important;
}

div, span, form {
	margin: 0px;
	padding: 0px;
}

form:not(.exp) input, form:not(.exp) select {
	font-size: 1em;
}

img {
	border: 0;
}

a, a:visited, a:link {
	color: #ABC;
	color: var(--highlight);
	cursor: pointer;
	text-decoration: none;
}

/* #parentContainer
{
	position: relative;
	min-height: calc(100vh - 5px);
} */

#mainContainer {
	/* padding-bottom: 100px; */
	min-height: calc(100vh - 160px);
	transition: 0.8s;
}

a:hover {
	text-decoration: underline;
}

.multiSelectContainer label {
	color: #000;
}


@media screen and (max-width: 1080px) {
	div.page-title span.small .userinfo.cancelled { display: none; }

	table.grid.responsive { font-size: 12px !important; }

	.menu-container {
		nav { display: none; }
		.openmenu div { width: 35px; height: 5px; background-color: #FFF; margin: 6px 12px; }
		ul, li { display: block !important; }

		ul {
			ul li a, li a { border-bottom: #6C0 1px solid; }

			ul {
				border: none !important;
				display: block !important;
				position: static !important;
				li {
					float: none !important;
					display: block !important;
					position: static !important;
					a {
						padding-left: 50px;
						display: block !important;
					}
				}
			}

			li {
				float: none !important;
				display: block !important;
				position: static !important;
				a { display: block !important; }
			}
		}
	}

	.flex-element .h4.title {
		font-size: .9em !important;
	}
	/*.window { min-width: 600px; }*/
}


div.h3.title {
	font-size: 2em;
	font-weight: bold;
	margin: 0;
	padding: 20px 10px;
	vertical-align: middle;
	background: #ed302c;
}

div.h4.title {
	font-size: 2em;
	font-weight: bold;
	margin: 0;
	padding: 5px 10px;
	align-self: stretch;
	background: #ECC;
}

div.h3.title span.small {
	text-align: right;
	float: right;
	font-size: 0.5em;
	bottom: 0;
}


div.page-title {
	font-family: Helvetica;
	font-weight: normal;
	/*position: relative;*/
	background: #333;
	position: sticky;
	top: 0;
	z-index: 200;
	height: 70px;
	transition: height 0.5s;

	&.shrink {
		height: 40px;
		transition: height 0.5s;

		div.title img {
			height: 30px;
			margin-top: 0px;
			transition: height 0.5s;
		}

		span.small {
			margin: 0em 10px 10px;
			transition: margin 0.5s;

			.usericon img {
				transition: height 0.5s, margin 0.5s;
				margin-top: 4px;
				height: 30px;
			}
		}
	}

	div.header {
		position: absolute;
		text-align: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);

		.subtitle {
			font-size: 0.6em;
			color: #FFF3;
			margin: 0;
			padding: 0;
		}
	}

	div.title {
		display: inline-block;
		font-size: 2em;
		margin: 0;

		img {
			height: 50px;
			margin-top: 10px;
			margin-left: 10px;
			transition: height 0.5s;
		}
	}

	span.small {
		position: relative;
		/* display: inline-block; */
		text-align: right;
		float: right;
		font-size: 0.8em;
		margin: 1em 10px 10px;
		transition: margin 0.5s;

		.usericon {
			float: right;
			margin: 0px 10px 0 10px;
			vertical-align: middle;

			img {
				transition: height 0.5s, margin 0.5s;
				margin-top: 0px;
				height: 40px;
			}
		}

		.userinfo {
			cursor: pointer;
			float: right;
			margin-top: 10px;
			min-width: 180px;

			&::after {
				font-family: 'FontAwesome';
				content: "\f107";
				border: none !important;
				position: relative;
				top: 2px;
				right: 0px;
				padding: 0 2px 0 6px;
				margin: 0 0.3em 0 0;
			}
		}

		.theme {
			/* display: inline-block; */
			color: #666;
			cursor: pointer;
			float: right;
			margin: 8px 8px 0 0px;
			font-size: 20px;

			&:hover {
				color: #999;
			}
		}

		.theme-settings, .usermenu-dropdown {
			position: absolute;
			text-align: left;
			background: #444;
			border: #555 1px solid;
			padding: 5px 10px;
			right: 5px; top: 45px;
			border-radius: 0 0 5px 5px;
			box-shadow: 2px 3px 4px #666;
			z-index: 1000;
		}

		.usermenu-dropdown {
			padding: 0;

			hr {
				border: 0;
				border-top: 1px solid #666;
			}

			a {
				display: block;
				padding: 10px 20px;
				color: var(--highlight-light);

				&:hover {
					background: #666;
					text-decoration: none;
				}

				i {
					margin-right: 7px;
				}
			}

			fieldset.box {
				border-color: #666;
				padding: 0;
				margin-top: 0;

				legend {
					border: none;
					padding: 0px 5px;
				}
			}
		}

		.theme-settings h3 {
			background: #333;
			white-space: nowrap;
			margin: -5px -10px 5px;
			padding: 10px 15px;
		}

		.theme-settings label {
			display: block;
			margin: 10px;
		}
	}
}



.windowContainer {
	margin: 0 auto;
	max-width: 1024px;
}

.paddedContent {
	padding: 20px 0 60px;
}


.menu-container {
	margin-top: 20px;
	display: block;
	z-index: 4000;
	background: #d32;
	background: #E09040;
	background: none;
}

div.main-container {
	font-size: 0.8em;
	background: #FF7B1D;
	background: #000;
}

div.flexMain {
	background: #151515;
	width: 100%;
	display: table;
	display: -ms-flex;
	display: -webkit-flex;
	display: flex;

	div.flexItem {
		flex: 1;
	}

	div.rightItem {
		padding: 0 20px;
	}
}


div.left-menu-container {
	vertical-align: top;
	background: #111;
	width: 250px;
	max-width: 250px;
	min-height: calc(100vh - 150px);
	padding-bottom: 20px;
	margin-bottom: 0px;
	transition: all 0.2s linear;

	&.closed {
		width: 52px;
		max-width: 53px;
		transition: max-width 0.2s linear;
	}

	a.openclose {
		padding: 10px 0 5px 18px;
		display: block;
		font-size: 1.5em;
		line-height: 35px;
		transition: font-size 0.2s linear;
		animation-name: opencloseblur;
		animation-duration: .2s;
	}

	a.openclose:hover {
		animation-name: openclosehover;
		animation-duration: .2s;
	}
}


@keyframes openclosehover {
  0%   { font-size: 1.5em; }
  50%  { font-size: 1.0em; }
  100% { font-size: 1.5em; }
}

@keyframes opencloseblur {
  0%   { font-size: 1.5em; }
  50%  { font-size: 1.0em; }
  100% { font-size: 1.5em; }
}

footer {
	font-size: 0.8em;
	margin: 0;
	padding: 20px 20px;
	background: #222;
	position: sticky;
	bottom: 0;
	transition: 0.8s;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	z-index: 20;

	.center {
		flex-grow: 1;
		text-align: center;
	}

	span.credit a {
		color: #AAA;

		&:hover {
			text-decoration: underline;
		}
	}
}


.smallview1200 footer { font-size: 0.7em; }
.smallview1000 footer { font-size: 0.6em; }
.smallview800 footer, .smallview600 footer { font-size: 0.5em; }
.smallview800 footer, .smallview600 footer {
	padding: 5px 20px;
	display: block;
	text-align: center;
}
.smallview800 footer > div, .smallview600 footer > div { margin: 10px 0; }


.menu-shadow {
    box-shadow: 1px 0px 20px rgba(128, 128, 128, 0.1);
}

a.openclose:hover {
	text-decoration: none;
}


.closed {
	ul {
		&.navigation {
			& > li {
				&.parent::after {
					display: none;
					border: none;
				}

				&:not(.open) > ul {
					transition: none;
				}

				&.open > ul {
					left: 100%;
					top: 0;
					position: absolute;
					z-index: 300;
					border: #333 1px solid;
				}

				ul li > a {
					padding: 6px 15px;
				}

				& > a i {
					margin-right: 0px;
				}
			}
		}
	}

	& > ul > li > a > span.text
	{
		display: none;
	}
}

ul.navigation {
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 300;
	padding-bottom: 20px;

	a {
		outline: none;
		&:hover, &:focus {
			text-decoration: none;
		}
	}

	li {
		position: relative;
		white-space: nowrap;
		z-index: 100;

		a {
			display: block;
			color: #FFF;
			/* white-space: nowrap; */
			text-overflow: ellipsis;
			overflow: hidden;
			border-left: 4px solid transparent;
			i {
				position: relative;
				top: 0px;
				min-width: 18px;
				text-align: center;
				margin-right: 10px;
				padding: 5px 0;
				transition: transform .6s;
			}
		}
	}

	& > li {
		padding: 0;
		border-left: 4px solid transparent;

		ul {
			padding: 0;
			margin: 0;

			li {
				color: #404E67;
				background: transparent;
				&  > a {
					padding: 6px 10px 6px 50px;
				}
			}

			.open > a {
				color: #FFF;
			}

			.open > ul {
				display: block;

				li > a {
					padding: 6px 10px 6px 60px;
				}

				.open > ul {
					display: block;

					li > a {
						padding: 6px 10px 6px 70px;
					}
				}
			}

			.active {
				background: transparent;

				& > a {
					color: var(--color-secondary);
					font-weight: 500;
				}
			}
		}

		& > a {
			padding: 10px;

			&:hover i {
				animation-name: menuparentitemhover;
				animation-duration: 1s;
				transition: transform .6s;
			}
		}

		&.parent {
			&::after {
				content: '';
				position: absolute;
				right: 15px;
				top: 20px;
				width: 0;
				height: 0;
				border-bottom: 5px solid transparent;
				border-top: 5px solid transparent;
				border-left: 5px solid #e8e8e8;
				clear: both;
				transition: border 0.3s linear;
			}

			&.open::after {
				border-left: 5px solid transparent;
				border-right: 5px solid transparent;
				border-top: 5px solid #e8e8e8;
				transition: border 0.3s linear;
			}
		}

		&:not(.open) > ul {
			visibility: hidden;
			opacity: 0;
			transition: visibility .3s, opacity .3s linear, max-height .4s;
			max-height: 0;
		}

		&.open {
			border-left: 4px solid var(--color-secondary);

			& > a {
				color: var(--color-secondary);
				background: #222;
			}

			& > ul {
				transition: visibility .3s, opacity .3s linear, max-height .4s;
				visibility: visible;
				opacity: 1;
				max-height: 1024px;
			}
		}


		& > ul {
			background: #222;
		}

		ul:hover > a {
			color: #FCC;
			background-color: #DDD;
		}

		&.active > a {
			color: var(--color-secondary);
			background-color: #333;
			font-weight: 400;
		}

		.active {
			background: #f0f0f0;

			& > a {
				color: var(--color-secondary);
				font-weight: 500;
			}
		}
	}

	& > li:hover > a, li a:hover {
		background-color: #444;
	}
}


thead.sticky {
	position: sticky;
	top: 40px;
}

table.sticky {
	border-collapse: separate !important;
	border-spacing: 0;
}

table.sticky thead {
	position: sticky;
	top: 40px;
}


.window .msgBox {
	margin-bottom: 20px;

	&.success, &.success a {
		color: #6C9;
	}

	&.info, &.info a {
		color: #69F;
	}

	&.notice, &.notice a {
		color: #C96;
	}

	&.warning, &.warning a {
		color: #C00;
	}

	&.error, &.error a {
		color: #C00;
	}

	&.success {
		background: #010 url('../../../includes/images/message-tick.png') no-repeat scroll 6px 50%;
		border: #232 1px solid;
	}

	&.info {
		background: #001 url('../../../includes/images/message-info.png') no-repeat scroll 6px 50%;
		border: #223 1px solid;
	}

	&.notice {
		background: #110A04 url('../../../includes/images/message-notice.png') no-repeat scroll 6px 50%;
		border: #322 1px solid;
	}

	&.warning {
		background: #100 url('../../../includes/images/message-warning.png') no-repeat scroll 6px 50%;
		border: #522 1px solid;
	}

	&.error {
		background: #100 url('../../../includes/images/message-error.png') no-repeat scroll 6px 50%;
		border: #522 1px solid;
	}

	&.general {
		color: #CA9;
		background: #060000 url('../../../includes/images/message-general.png') no-repeat scroll 6px 50%;
		border: #543 1px solid;
	}
}


.msgBox {
	margin: 5px 0px 10px;
	padding: 12px;
	padding-left: 45px;

	border-radius: 5px;
	overflow: hidden;
	font-weight: bold;
	text-align: left;

	&.success {
		color: #063;
		background: #6F9 url('../../../includes/images/message-tick.png') no-repeat scroll 6px 50%;
		border: #090 1px solid;
	}

	&.info {
		color: #40F;
		background: #9BF url('../../../includes/images/message-info.png') no-repeat scroll 6px 50%;
		border: #00F 1px solid;
	}

	&.notice {
		color: #630;
		background: #FC9 url('../../../includes/images/message-notice.png') no-repeat scroll 6px 50%;
		border: #960 1px solid;
	}

	&.warning {
		color: #904;
		background: #F99 url('../../../includes/images/message-warning.png') no-repeat scroll 6px 50%;
		border: #900 1px solid;
	}

	&.error {
		color: #904;
		background: #F99 url('../../../includes/images/message-error.png') no-repeat scroll 6px 50%;
		border: #600 1px solid;
	}

	&.general {
		color: #630;
		background: #FDC url('../../../includes/images/message-general.png') no-repeat scroll 6px 50%;
		border: #A96 1px solid;
	}

	&.grey {
		color: #FFF;
		background: #333 url('../../../includes/images/message-grey.png') no-repeat scroll 6px 50%;
		border: #444 1px solid;
	}
}


div.window {
	text-align: auto;
	margin: 20px 0px;
	padding: 20px 20px 20px;
	background-color: #CCAA77;
	background-color: #EFE;
	background-color: #FFF;
	background-color: #111;
	border: solid 1px #A99;
	border: solid 1px #333;
	border-radius: 5px;
	border-radius: 0px;
	transition: all 0.3s linear;

	div.window {
		margin-bottom: 30px;
		&:last-child {
			margin-bottom: 0;
		}

		h4 {
			color: #FFF;
			font-size: 1.2em;
			margin: -20px -20px 25px;
			padding: 2px 20px 4px;
			background-color: #333;
			border-bottom: 1px solid #222;
			border-radius: 0px;
			transition: all 0.3s linear;
		}
	}

	&.round {
		border-radius: 10px;
	}

	h3 {
		color: #03C;
		color: #000;
		color: #F33;
		color: #FFF;
		font-size: 1.5em;
		margin: -20px -20px 20px;
		padding: 12px 20px;
		background-color: #000;
		border-bottom: 1px solid #222;
		transition: all 0.3s linear;
	}

	h3.exp, h4.exp {
		background: none;
		margin: 10px 0 2px;
		padding: 0;
		border-bottom: none;
	}

	h4 {
		color: var(--white-color);
		margin: 25px 0px 10px;
		padding: 5px 12px;
		background-color: #EF4A00;
		background-color: #D40;
		background-color: #222;
		background-color: rgb(from var(--highlight) r g b / 0.2);
		background-color: color-mix(in srgb, rgb(from var(--highlight) r g b / 0.4), #666);
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

	div.slimwindow {
		padding: 0px 20px 2px;
		background-color: #111;
		border: solid 1px #333;

		h3 {
			color: #FFF;
			font-size: 1.2em;
			margin: 0px -20px 2px;
			padding: 2px 20px 4px;
			background-color: #333;
			border-bottom: 1px solid #222;
		}
	}
}


div.slimwindow {
	color: #FFF;
	display: block;
	text-align: auto;
	font-size: 1em;
	font-weight: normal;
	margin: 0px 0px 2px;
	padding: 0px 5px 2px;
	background-color: #111;
	border: solid 1px #333;

	h3 {
		color: #FFF;
		font-size: 1.2em;
		margin: 0px -5px 2px;
		padding: 2px 5px 4px;
		background-color: #000;
		border-bottom: 1px solid #222;

		&.secondary {
			background-color: #333;
		}
	}

	h3.exp, h4.exp {
		color: #000;
		background: none;
		margin: 10px 0 2px;
		padding: 0;
		border-bottom: none;
	}

	h4 {
		color: #FFF;
		margin: 5px 0px 2px;
		padding: 2px 4px;
		background-color: #EF4A00;
		background-color: #222;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
}

.profilePictureContainer {
	float: right;
	margin-left: 20px;
	margin-right: 0px;
	text-align: center;
}

.bottomButtonsContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: -15px auto -5px;

	.button {
		min-width: 160px;
	}
}

fieldset.box, fieldset.showhide {
	border: #444 1px solid;
	margin: 5px 0 10px;
	padding: 3px 8px 9px 8px;
	border-radius: 5px;
}

fieldset.box legend, fieldset.showhide legend {
	margin-left: 10px;
	padding: 2px 10px;
	border: #6C3 1px solid;
	border: #544 1px solid;
	border: #444 1px solid;
	font-size: 90%;
	border-radius: 5px;
}

fieldset.box legend.noborder {
	padding: 2px 4px ;
	border: none;
}

fieldset.showhide legend {
	cursor: pointer;
}

fieldset.showhide legend:after {
	content: '-';
	font-weight: bold;
	margin-left: 8px;
	font-size: 1.2em;
	line-height: 1em;
	width: 2em;
}

fieldset.showhide legend.show:after {
	content: '+';
}


fieldset.showhide legend.noHide {
	padding-right: 10px;
	cursor: default;
	background: none;
}

fieldset.box .content, fieldset.showhide .content {
	padding: 7px 0 0 0;
}

table.grid {
	width: 100%;
	border-collapse: collapse;
}

table.grid.medium, table.grid.mediumfont, .mediumfont {
	font-size: 12px;
}

table.grid.round, table.grid.round-top, table.grid.round-bottom, table.grid.round-left, table.grid.round-right {
	border-collapse: separate;
	border-spacing: 1px;
}

.ie table.grid.round, .ie table.grid.round-top, .ie table.grid.round-bottom, .ie table.grid.round-left, .ie table.grid.round-right {
	border-collapse: collapse;
}

table.grid.auto {
	width: auto;
}

table.grid.small, table.grid.smallfont, .smallfont {
	font-size: 10px;
}

table.grid th, table.grid td {
	text-align: left;
	border: #444 1px solid;
	padding: 3px 5px;
	padding: 5px 8px;
}

table.grid.noborder th, table.grid.noborder td,
table.grid tr.noborder th, table.grid tr.noborder td,
table.grid th.noborder, table.grid td.noborder {
	border: none;
}

table.grid.nopadding th, table.grid.nopadding td,
table.grid tr.nopadding th, table.grid tr.nopadding td,
table.grid th.nopadding, table.grid td.nopadding {
	padding: 0;
}


table.grid th {
	background: #96F066;
	background: #F09666;
	background: #4B291E;
	background: #333;
}

table.grid th.left, table.grid td.left {
	text-align: left;
}

table.grid th.right, table.grid td.right {
	text-align: right;
}

table.grid th.c, table.grid td.c, table.grid th.center, table.grid td.center {
	text-align: center;
}

table.grid th.b, table.grid td.b, table.grid th.bold, table.grid td.bold {
	font-weight: bold;
}

table.grid.autostrong tr td:first-child {
	font-weight: bold;
}


.round-top,
table.grid.round tr:first-child th:first-child, table.grid.round tr:first-child td:first-child,
table.grid.round-top tr:first-child th:first-child, table.grid.round-top tr:first-child td:first-child {
	-webkit-border-radius: 5px 0 0;
	-moz-border-radius: 5px 0 0;
	border-radius: 5px 0 0;
}

.round-right,
table.grid.round tr:first-child th:last-child, table.grid.round tr:first-child td:last-child,
table.grid.round-right tr:first-child th:last-child, table.grid.round-right tr:first-child td:last-child {
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
}

.round-bottom,
table.grid.round tr:last-child th:last-child, table.grid.round tr:last-child td:last-child,
table.grid.round-bottom tr:last-child th:last-child, table.grid.round-bottom tr:last-child td:last-child {
	-webkit-border-radius: 0 0 5px 0;
	-moz-border-radius: 0 0 5px 0;
	border-radius: 0 0 5px 0;
}

.round-left,
table.grid.round tr:last-child th:first-child, table.grid.round tr:last-child td:first-child,
table.grid.round-left tr:last-child th:first-child, table.grid.round-left tr:last-child td:first-child {
	-webkit-border-radius: 0 0 0 5px;
	-moz-border-radius: 0 0 0 5px;
	border-radius: 0 0 0 5px;
}

table.grid.noround tr:first-child th:first-child, table.grid.noround tr:first-child td:first-child,
table.grid.noround tr:first-child th:last-child, table.grid.noround tr:first-child td:last-child,
table.grid.noround tr:last-child th:first-child, table.grid.noround tr:last-child td:first-child,
table.grid.noround tr:last-child th:last-child, table.grid.noround tr:last-child td:last-child {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.round {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

a.button { color: #FFF; }
a.button:hover { text-decoration: none; }

.button {
	cursor: pointer;
	margin: 5px 5px;
	padding: 6px 12px;
	padding: 8px 15px;
	border: #666 1px solid;
	display: inline-block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color: #FFF;
	background-color: #333;
	font-family: Helvetica;
	transition: all 0.3s linear;

	&.slim {
		font-size: .65em;
		padding: 4px 12px;
	}

	&.input {
		min-width: 160px;
	}

	&.success {
		background-color: var(--color-secondary);
		border-color: color-mix(in srgb, var(--color-secondary), #CCC);

		&:hover {
			background-color: color-mix(in srgb, var(--color-secondary), #CCC);
			border-color: color-mix(in srgb, var(--color-secondary), #FFF);
			box-shadow: 0px 0px 10px color-mix(in srgb, var(--color-secondary), #FFF);
		}
	}

	&:hover {
		text-decoration: none;
		background-color: #444;
		border-color: #999;
		box-shadow: 0px 0px 10px #FFF6;
	}
}

.clear { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }
.floatleft { float: left; }
.floatright { float: right; }
.block { display: block; }
.inline { display: inline; }
.bold, .strong { font-weight: bold }
.em, .italic { font-style: italic; }

.pointer { cursor: pointer; }

.wrap { white-space: normal; word-wrap: break-word; word-break: break-all; }
.nowrap { white-space: nowrap; }



@-moz-document url-prefix() {
	#topMenu { height: 36px; }
	#footerMenu { height: 36px; }
}

@keyframes menuparentitemhover {
  0%   { transform: rotate(0); }
  50% { transform: rotate(420deg); }
  100% { transform: rotate(360deg); }
}

.simpletabelement {
	background: #FFF;
	padding: 20px;
	border: solid 1px #D99 !important;
	border-top: none !important;
	-webkit-border-radius-bottom-left: 5px;
	-webkit-border-radius-bottom-right: 5px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.paginationCounter {
	display: block;
	margin: 2px 0 3px;
}

div.pagination {
	margin: 20px 0 15px;
	margin: 8px 0 12px;
	text-align: center;

	span.pagenav a {
		font-weight: bold;
		padding: 2px 6px;
		margin: 0 2px;
		border: #8B6 1px solid;
		border: #999 1px solid;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;

		&:hover, &.active:hover {
			text-decoration: none;
			background: #CF9;
			background: #333;
		}

		&.active {
			background: #9F6;
			background: #666;
		}

		&.inactive {
			color: #999;
		}

		&.inactive:hover {
			background: #000;
		}
	}
}




ol.vInputForm { padding: 0px; margin: 0px; }
ol.vInputForm li { list-style: none; padding: 2px 0 8px; }
ol.vInputForm li label { display: block; padding: 2px 0; font-weight: bold; }
ol.vInputForm li input { width: 200px; }
ol.vInputForm li span { display: auto; }

ol.vInputForm li.exp label { float: none; display: inline; font-weight: normal; }
ol.vInputForm li.exp input { width: auto; }
ol.vInputForm li.exp span { display: auto; }

ol.hInputForm { padding: 0px; margin: 0px; }
ol.hInputForm li { list-style: none; padding: 2px 0; }
ol.hInputForm li label { float: left; display: block; min-width: 100px; min-width: 200px; _width: 200px; }
ol.hInputForm li label.nofloat { float: none; display: inline-block; }
ol.hInputForm li input, ol.hInputForm li textarea { width: 430px; width: 320px; }
ol.hInputForm li select { width: 430px; width: 350px; }
ol.hInputForm li input.exp, ol.hInputForm li textarea.exp { width: auto; }
ol.hInputForm li span.whyisthisnecessary { display: none; }
ol.hInputForm li button span { display: auto; }

ol.hInputForm.small li label { min-width: 120px; _width: 120px; }
ol.hInputForm.small li input, ol.hInputForm.small li textarea { width: 380px; }
ol.hInputForm.small li select { width: 220px; }
ol.hInputForm.small li div.exp { margin-left: 120px; padding: 0 0 5px 0; }
ol.hInputForm.verysmall li label { min-width: 80px; _width: 80px; }
ol.hInputForm.ultrasmall li label { min-width: 60px; _width: 60px; }
ol.hInputForm.veryultrasmall li label { min-width: 40px; _width: 40px; }
ol.hInputForm.large li label { min-width: 140px; _width: 160px; }
ol.hInputForm.verylarge li label { min-width: 160px; _width: 160px; }
ol.hInputForm.ultralarge li label { min-width: 180px; _width: 160px; }
ol.hInputForm.veryultralarge li label { min-width: 200px; _width: 160px; }

ol.hInputForm li.exp label, ol.hInputForm li label.exp { float: none; display: inline; font-weight: normal; }
ol.hInputForm li.exp input, ol.hInputForm li input.exp { width: auto; margin-left: 0px; }
ol.hInputForm li.exp textarea, ol.hInputForm li textarea.exp { width: auto; margin-left: 0px; }
ol.hInputForm li.exp select, ol.hInputForm li select.exp { width: auto; margin-left: 0px; }
ol.hInputForm li.exp span, ol.hInputForm li span.exp { display: inline; }
ol.hInputForm li div.exp { margin-left: 150px; padding: 0 0 5px 0; }

ol.hInputForm li.exp label.bold, ol.hInputForm li label.exp.bold,
ol.hInputForm li.exp input.bold, ol.hInputForm li input.exp.bold { font-weight: bold; }

ol.gInputForm { padding: 0px; margin: 0px; }
ol.gInputForm li { list-style: none; float: left; padding: 2px 0 8px; margin-right: 8px; }
ol.gInputForm li label { float: none; padding: 2px 0; font-weight: bold; }
ol.gInputForm li input { width: 120px; }
ol.gInputForm li select { width: 126px; }
ol.gInputForm li input.large { width: 160px; }
ol.gInputForm li select.large { width: 166px; }
ol.gInputForm li span { display: auto; }

ol.gInputForm li.exp label { float: none; display: inline; font-weight: normal; }
ol.gInputForm li.exp span { display: auto; }

.gInputForm input, .gInputForm select, .gInputForm input.button, .gInputForm .ui-multiselect { margin: 4px 2px; }

.gInputForm input { width: 85px; }
.gInputForm input.exp { width: auto; }
.gInputForm select { width: 131px; }
.gInputForm input.button { width: 131px; }
.gInputForm input.button.exp { width: auto; padding-left: 10px; padding-right: 10px; }
.gInputForm input.large { width: 180px; }
.gInputForm select.large { width: 186px; }
.gInputForm input.button.large { width: 181px; }

/* select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC');
	background-repeat: no-repeat;
	background-position: right center;
} */

select, input, textarea {
	color: white;
	background-color: #222;
	border-color: #555 #777 #777 #555;
	padding: 5px;
	padding: 8px 10px;
	border: #333 1px solid;
	border-radius: 5px;
	outline: none;
	margin: 2px 0;
}

input[type=radio] {
	accent-color: #333;
}

select:focus, input:focus, textarea:focus {
	border-color: #000;
	outline: #333 1px solid;
	background-color: #333;
}


ol.hInputForm label {
	color: #FFF;
}

ol.hInputForm li input.time { width: 128px; }
ol.hInputForm li select, ol.hInputForm li input, ol.hInputForm li textarea {
	color: #FFF;
	background-color: #222;
	border-color: #555 #777 #777 #555;
	padding: 5px;
	padding: 8px 15px;
	border: #333 1px solid;
	border-radius: 5px;
	outline: none;
	margin: 2px 0;
}

ol.hInputForm li select:focus, ol.hInputForm li input:focus, ol.hInputForm li textarea:focus {
	border-color: #000;
	outline: #333 1px solid;
}


ol.hInputForm li select.inputError, ol.hInputForm li input.inputError, ol.hInputForm li textarea.inputError {
	border-color: #C55 #C77 #C77 #C55;
}


ul.htab {
	margin: 0 0 10px;
	padding: 0px;
	text-align: center;
	font-size: 11px;
	list-style: none;
}

ul.htab li {
	display: inline;
}

ul.htab li a {
	color: #300;
	margin: 0px;
	padding: 5px 15px;
	margin: 2px;
	border: #D99 1px solid;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

ul.htab li.active a {
	background: #FFFCFC;
	background: #DD4400;
	background: #BEB;
}

ul.htab li a:hover {
	text-decoration: none;
	color: #900;
	background: #DFC;
}

ul.filter li a {
	display: inline-block;
}

table.grid td.selected { background-color: #0C0C0C; }
table.grid th.selected { background-color: #222; }

.lightdim, .lightdim a, div.window.lightdim { color: #CCC; }
.dim, .dim a, div.window.dim { color: #999; }
.dimmer, .dimmer a, div.window.dimmer { color: #666; }
.dimmest, .dimmest a, div.window.dimmest { color: #333; }

.red, .red a, div.window.red { color: #C76; }
.green, .green a, div.window.green { color: #9C9; }
.navy, .navy a, div.window.navy { color: #00C; }
.blue, .blue a, div.window.blue { color: #66C; }
.sky, .sky a, div.window.sky { color: #00F; }
.orange, .orange a, div.window.orange { color: #F60; }
.lgreen, .lgreen a, div.window.lgreen { color: #0F0; }
.dark, .dark a, div.window.dark { color: #333; }
.ash, .ash a, div.window.ash { color: #666; }
.grey, .grey a, div.window.grey { color: #999; }
.yellow, .yellow a, div.window.yellow { color: #CC9; }
.black, .black a, div.window.black { color: #000; }
.white, .white a, div.window.white { color: #FFF; }

.red-shade { background-color: #C76; }
.green-shade { background-color: #9C9; }
.blue-shade { background-color: #00C; }
.grey-shade { background-color: #999; }
.dim-shade { background-color: #CCC; }
.window-shade { background-color: #FEE; }
.yellow-shade { background-color: #FF0; }
.orange-shade { background-color: #F60; }
.sky-shade { background-color: #CCF; }
.dark-shade { background-color: #666; }
.very-dark-shade { background-color: #333; }
.black-shade { background-color: #000; }
.white-shade { background-color: #FFF; }
.selected { background-color: #FCC; }

tr.row0 td { background-color: #F5E5F5; }
tr.row1 td { background-color: #FFE5E5; }

.window.tooltip {
	margin: -4px -5px -3px;
	padding: 0;
}

.window.tooltip img.left {
	float: left;

}

.window.tooltip div.content {
	margin: 0;
	padding: 10px;
	margin-left: 80px;
	width: auto;
}

.window.tooltip div h3.exp {
	margin: 0;
	padding: 0 0 8px;
}


.debug {
	font-size: 0.8em;
	font-family: lucida console;
	text-align: left;
	border: #633 1px solid;
	padding: 5px 20px;
	background: #C3C3B3;

	.query {
		color: #444;
		font-style: italic;
	}
}

.debugelement {
	font-size: 0.8em;
	padding: 10px 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-all;

	&.border {
		margin: 6px -6px;
		border: #666 1px solid;
		padding: 4px 4px;
	}
}


div.scroll {
	overflow: scroll;
}

div.scroll-x {
	overflow-x: scroll;
}

div.scroll-y {
	overflow-y: scroll;
}

.ie select.ie-expand:focus, .ie ol.gInputForm li select.ie-expand:focus, .ie .gInputForm select.ie-expand:focus {
	width: auto;
}

.ie .ie-expand-select-container {
	display: block;
	overflow: hidden;
	width: 150px;
}

.ie-expand-select {
	width: 150px;
}

.ie select.ie-expand-select {
	width: 148px;
	float: left;
}

.ie select.ie-expand-select:focus {
	width: auto;
}

.ui-widget {
	font-family: auto !important;
}

select.center {
	text-align-last: center;
}


.tooltip {
	position: relative;
	display: inline-block;

	.tooltiptext {
		visibility: hidden;
		width: 140px;
		background-color: #555;
		color: #fff;
		text-align: center;
		border-radius: 6px;
		padding: 5px;
		position: absolute;
		z-index: 1;
		bottom: 150%;
		left: 50%;
		margin-left: -75px;
		opacity: 0;
		transition: opacity 0.3s;

		&::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: #555 transparent transparent transparent;
		}
	}

	&:hover .tooltiptext {
		visibility: visible;
		opacity: 1;
	}
}

.orderchangecontainer {
	float: right;
	margin-left: 5px;
}

.orderchange {
	display: inline-block;
	width: 15px;
}

.ui-widget-content {
	background: #000 !important;
}

.ui-widget.ui-widget-content {
	border-color: #999 !important;
	z-index: 300;
}

.ui-widget-header {
	border-color: #333 !important;
	background: #666 !important;
}

.small { font-size: .9em; }
.verysmall { font-size: .8em; }
.veryverysmall { font-size: .7em; }

.showmore, a.showmore {
	color: #99F;
	font-size: .8em;
}

.filterElementContainer span {
	margin: 5px 10px;
}

.filterElementContainer span label {
	font-weight: 550;
	margin-right: 8px;
}

.buttonset a {
	font-size: 1.2em;
	display: inline-block;
	padding-top: 2px;
	padding-bottom: 2px;
	width: 28px;
	border-radius: 4px;
	transition: color .3s;

	&:hover {
		color: #99F;
		background: #333;
		transition: color .3s, background .3s;
	}
}

.inputGroupContainer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 25px 20px;
	transition: all 0.3s linear;

	fieldset.input-group, fieldset.input-group-display {
		margin: 0;
	}
}

.inputGroupColumnContainer {
	display: grid;
	grid-template-rows: auto;
	gap: 25px 20px;
}


fieldset.input-group, fieldset.input-group-display {
    /* font-family: 'Segoe UI', Arial, sans-serif; */
    font-size: 16px;
    font-weight: normal;
    position: relative;
    padding: 2px;
    margin: 25px 0;
    /* border: var(--border-color) 1px solid; */
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;

	&.select {
		position: relative;
		&::after {
			content: '▼';
			position: absolute;
			top: 50%;
			right: 8px;
			pointer-events: none;
			border-top: 6px solid var(--text-color);
			transform: translateY(-50%);
		}

		select {
			appearance: none;
		}
	}

    label {
        position: absolute;
        top: calc(-50% + 10px);
        top: -12px;
        left: 10px;
        /* font-weight: bold; */
		font-size: 14px;
		line-height: 16px;
        padding: 3px 8px 3px 6px;
        border: var(--border-color) 1px solid;
        border-radius: 6px;
        z-index: 10;
        background-color: var(--background);
		/* background-color: rgb(from var(--background) r g b / 0.8); */
		transition: all 0.3s ease;
    }

    &.total {
        margin: 5px 0 10px;
        padding: 15px 12px 13px;
        color: #C00;
        border: var(--border-color) 1px solid ;
        font-weight: bold;
        font-size: 1.1em;
        text-align: left;
    }

    input, select, textarea  {
        width: 100%;
        margin: -2px 0 -2px -2px;
        border: 0;
        z-index: 5;
        outline-style: none;
        padding: 22px 12px 12px;
        width: calc(100% - 20px);
        border-radius: 5px;
        border: var(--border-color) 1px solid;
        background-color: transparent;
        /* font-family: 'Segoe UI', Arial, sans-serif; */
        font-size: 16px;
        font-weight: normal;
        transition: all 0.3s ease;

		&:disabled {
			padding: 14px 12px 8px;

			& + label {
				font-size: 0.7em;
				padding-top: 2px;
				line-height: 12px;
				border-radius: 5px;
			}
		}
    }

	select {
		width: calc(100% + 4px);
		background-color: var(--background);
	}

    input:hover, input:hover + label,
    select:hover, select:hover + label,
    textarea:hover, textarea:hover + label {
        border-color: var(--highlight);
        box-shadow: 0 0 2px var(--highlight);
        outline: none;
    }

	input:hover + label,
	select:hover + label,
	textarea:hover + label {
		color: color-mix(in srgb, var(--highlight), #FFF);
	}

    input:focus, input:focus + label,
    select:focus, select:focus + label,
    textarea:focus, textarea:focus + label {
        border-color: var(--highlight);
        box-shadow: 0 0 8px var(--highlight), inset 0 0 4px var(--highlight);
        outline: none;
    }

	input:focus + label,
	select:focus + label,
	textarea:focus + label {
		color: color-mix(in srgb, var(--highlight), #FFF);
		text-shadow: 1px 1px 5px var(--highlight);
	}

    span.startAdornment {
        position: absolute;
        left: 10px;
        top: 20px;
		select {
			width: 160px;
			padding: 0 0 0 5px;
			border: none;
			text-align: right;
			overflow: hidden;
			direction: rtl;
			appearance: none;

			&:hover, &:focus {
				border: none;
				box-shadow: none;
				outline: none;
    		}
		}
    }

    input[type="tel"] {
        padding-left: 192px;
        width: calc(100% - 200px);
    }

    .input_total {
        font-weight: bold;
    }
}

@media screen and (max-width: 650px) {
	div.flexMain {
		& div.rightItem {
			padding: 0 5px;
		}
	}

	.profilePictureContainer {
		float: none;
		margin: -10px auto 25px;
		width: fit-content;
	}

	.bottomButtonsContainer {
		flex-direction: column-reverse;
		gap: 2px;
		margin: -10px auto -2px;
		.button {
			min-width: calc(100% - 5px);
		}
	}

	.inputGroupContainer {
		gap: 25px 15px;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	}

	div.window {
		margin: 10px 0px 10px;
		padding: 10px 8px;

		h3 {
			font-size: 1.3em;
			margin: -10px -8px 10px;
			padding: 10px 15px;
		}

		div.window {
			margin-bottom: 20px;
			h4 {
				margin: -10px -8px 20px;
				padding: 2px 15px 4px;
			}
		}
	}

	fieldset.input-group, fieldset.input-group-display {
		span.startAdornment {
			position: absolute;
			left: 10px;
			top: 20px;
			select {
				width: 48px;
			}
		}

		input[type="tel"] {
			padding-left: 82px;
			width: calc(100% - 90px);
		}
	}
}