.hidden {
	display: none;
}

.nowrap {
	white-space: nowrap;
}

.wrap {
	word-wrap: normal;
	white-space: normal;
}

.toggle {
	cursor: pointer;
}

.user {
	max-width: 40px;
}

.circular  {
	border-radius: 75%;
}

i.circular  {
	border: 1px solid rgba(127, 127, 127, 0.5);
	background-color: var(--mainBackground);
	margin-left: 3px;
}

button, .button, input, select, textarea, .textarea {
	border: 1px solid rgba(127, 127, 127, 0.5);
	color: var(--buttonText);
	background-color: var(--buttonBackground);
} 

input[type='file'],
[contenteditable='true'],
span.quickItem,
div.searchHints,
.tagEditor {
	border: 1px solid rgba(127, 127, 127, 0.5);
	color: var(--buttonText);
	background-color: var(--buttonBackground);
	appearance: textfield;
}

img.buddy {
	box-sizing: border-box;
	border-radius: 75%;
	height: auto;
	width: 100%;
	max-width: 20px;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
}

p.textCaption {
	font-weight: bold;
	margin: 0px;
	padding-bottom: 0px;
}

label.elegant {
	font-size: 75%;
	line-height: 24px;
	font-style: italic;
}

span.elegant {
	font-size: 75%;
	line-height: 24px;
}

div.elegant {
	font-size: 75%;
	line-height: 24px;
}

th.elegant {
	font-size: 75%;
	line-height: 24px;
}

td.elegant {
	font-size: 75%;
	line-height: 24px;
}

label.cute {
	font-size: 66%;
	line-height: 1.6;
}

span.cute {
	font-size: 66%;
	line-height: 1.6;
}

div.cute {
	font-size: 66%;
	line-height: 1.6;
}

td.cute {
	font-size: 66%;
	line-height: 1.6;
}

button.wide {
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
}

button.wide div.elegant {
	font-size: 75%;
	line-height: 1.4;
}

.field:after {
	content: "";
	display: table;
	clear: both; }

dialog.ontop {
	display: block;
}

dialog label, div.editor label {
	font-weight: normal;
}

dialog label.required, div.editor label.required {
}

div.editor form {
	width: 100%;
	display: block;
	overflow-y: scroll;
}

dialog form {
	width: 100%;
	display: block;
}

dialog form::-webkit-scrollbar-thumb, div.editor form::-webkit-scrollbar-thumb {
	background: rgba(127, 127, 127, 0.0);
}

dialog form:hover::-webkit-scrollbar-thumb, div.editor form:hover::-webkit-scrollbar-thumb {
	background: rgba(127, 127, 127, 0.5); 
}

dialog form.split, 
dialog form .split, 
form section.split, 
form section div.split, 
div.editor form.split, 
div.editor form section.split, 
div.editor form section div.split {
	column-width: 220px;
	column-gap: 0px;
}

section fieldset div.split {
	column-width: 170px;
	column-gap: 0px;
}

dialog form.fourway.split, 
dialog form .fourway.split, 
form section.fourway.split, 
div.editor form.fourway.split, 
div.editor form section.fourway.split {
	column-width: 170px;
	column-gap: 0px;
}

dialog form.threeway.split, 
dialog form .threeway.split, 
form section.threeway.split, 
div.editor form.threeway.split, 
div.editor form section.threeway.split {
	column-width: 130px;
	column-gap: 0px;
}

dialog form.halfway.split, 
dialog form .halfway.split, 
form section.halfway.split, 
div.editor form.halfway.split, 
div.editor form section.halfway.split {
	column-width: 360px;
	column-gap: 0px;
}

.evenly {
	display: flex;
	justify-content: space-around;
	flex-flow: row wrap;
}

.evenly * {
	flex-basis: 25%;
	flex-grow: 1;
	white-space: nowrap;
}

dialog form.split div.field,
dialog form.split label.field,
dialog form section.split label.field,
form section.split div.field,
form section.wide div.field div.split div.field,
div.editor form.split div.field,
div.editor form.split label.field,
div.editor form section.split div.field,
div.editor form section.split label.field {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

input.wide	{
	box-sizing:border-box;
	width: 100%;
}

select.wide {
	box-sizing:border-box;
	width: 100%;
}

dialog textarea, div.editor textarea {
	box-sizing:border-box;
	width: 100%;
}

.textarea ol, .textarea ol, .textarea ul, .textarea ul {
	margin: 0px;
}

#page {
	position: relative;
}

.hypertext {	
	margin: 10px;
}

.hypertext ol, .hypertext ul {
	margin: 0px;
}

dialog .close, div.editor .close {
	margin: 0px;
	padding: 0px;
	float: right;
	height: auto;
	width: auto;
	font-size: 22px;
}

header button.close {
	margin: 0px;
	margin-left: 10px;
	margin-bottom: 10px;
	padding: 0px;
	float: right;
	height: auto;
	width: auto;
	min-width: auto;
	font-size: 22px;
}

dialog .ok, div.editor .ok {
	margin: 5px;
}

dialog .backtrack, div.editor .backtrack {
	margin: 5px;
	float: left;
}

dialog .continue, div.editor .continue {
	margin: 5px;
	float: right;
}

dialog .save, div.editor .save {
	margin: 5px;
	float: right;
}

dialog .archive, div.editor .archive {
	margin: 5px;
	float: left;
}

dialog .delete, div.editor .delete {
	margin: 5px;
	float: left;
}

dialog .cancel, div.editor .cancel {
	margin: 5px;
	float: left;
}

dialog .cheetSheet, div.editor .cheetSheet {
	margin: 5px;
	float: right;
}

fieldset {
	border-width: 1px;
	border-radius: 7px;
	border-color: rgba(127,127,127,0.5);
	margin: 5px;
	padding: 5px;
}

div.note {
	padding: 5px 20px;
	background-color: #FFFF99;
	color: #16264c;
	font-style: italic;
}

tr.note {
	background-color: #FFFF99;
	color: #16264c;
	font-style: italic;
}

td.note {
	background-color: #FFFF99;
	color: #16264c;
	font-style: italic;
}

textarea.note {
	background-color: #FFFF99;
	color: #16264c;
	font-style: italic;
}

button.note {
	background-color: #FFFF99;
	color: #16264c;
}

legend {
	font-size: 75%;
	margin-left: 5px;
}

dialog pre,
dialog blockquote,
dialog dl,
dialog figure,
dialog table,
dialog ul,
dialog ol,
dialog form,
div.editor pre,
div.editor blockquote,
div.editor dl,
div.editor figure,
div.editor table,
div.editor ul,
div.editor ol,
div.editor form {
	margin-bottom: 0rem;
}

select {
	overflow: visible;
}

option {
	border: none;
	outline: none;
}

select option.bar::before {
	content: "";
}

#buffer {
	clear: both;
	height: 100px;
}

.swimlane {
	padding: 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.swimlane h5 {
	padding: 0px;
	margin: 0px;
}

.queue {
	background-color: var(--mainBackground);
	color: black;
	border-radius: 5px;
	border: 1px solid rgba(127, 127, 127, 0.4);
	min-height: 34px;
	transition: height 3s ease;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.tasklets {
	min-height: 16px;
	padding: 2px;
	background-color: var(--mainBackground);
	border-radius: 4px;
	border: 1px solid rgba(127, 127, 127, 0.4);
	line-height: 10px;
	font-size: 10px;
	display: flex;
	gap: 2px;
	width: calc(100% - 5px);
	flex-wrap: wrap;
}

.tasklet {
	border-radius: 2px;
	/* border: 1px solid rgba(127, 127, 127, 0.4); */
	margin: 1px;
	width: 12px;
	height: 12px;
	display: inline-block;
}

.task {
	text-align: left;
	border-radius: 3px;
	margin: 0px;
	/* border: 1px solid rgba(127, 127, 127, 0.4); */
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
	overflow-x: hidden;
	font-size: 0.9em;
	transition: border-radius 0.5s ease, margin 0.5s ease; 
}

.task .header {
	padding: 5px;
	min-height: 42px;
}

.task .header .taskTitle {
	font-weight: bold;
	color: black;
	opacity: 0.75;
}

.task .header .avatar.user {
	float: left;
	vertical-align:middle;
	margin-right: 5px;
	max-width: 40px;
}

.task .header .avatar.verifier {
	float: right;
	vertical-align:middle;
	margin-left: 5px;
	max-width: 25px;
}

.task .more {
	background-color: rgba(255,255,255,0.5);
}

.task .description {
	padding: 5px;
	font-style: italic;
}

.task .buddy.user {
	vertical-align:top;
	margin-right: 5px;
}

.task .opinion {
	vertical-align: top;
	font-style: italic;
}

.task i.flags {
	padding: 5px;
	color: rgba(0, 0, 0, 0.5);
	float: right;
	cursor: pointer;
}

.task i.anchor {
	padding: 5px;
	color: rgba(0, 0, 0, 0.75);
	float: left;
	cursor: pointer;
}

.task i.comments {
	padding: 5px;
	color: rgba(0, 0, 0, 0.75);
	float: left;
	cursor: pointer;
}

.task div.comments {
	padding: 5px;
}

.task div.todos {
	padding: 5px;
}

.task .todo {
	vertical-align: middle;
}

.task i.edit {
	padding: 5px;
	color: rgba(0, 0, 0, 0.75);
	float: right;
	cursor: pointer;
}

@media (hover: hover) {
	.task .footer {
		max-height: 0px;
		overflow: hidden;
		transition: max-height 0.25s ease-out;
	}
	
	.task:hover .footer {
		max-height: 37px;
	}
	
	.task:hover {
		border-radius: 25px 17px 17px 17px;
		margin-block: 5px;
	}
	
	.task:focus .footer {
		max-height: 37px;
	}
	
	.task:focus {
		border-radius: 25px 17px 17px 17px;
	}
}
.tint.orange, .task.orange, .tasklet.orange, tint-selector-swatch[tint='orange'] {
	background-color: rgba(255, 105, 0, 0.678);
}
.tint.gold, .task.gold, .tasklet.gold, tint-selector-swatch[tint='gold'] {
	background-color: rgba(255, 155, 0, 0.678);
}
.tint.yellow, .task.yellow, .tasklet.yellow, tint-selector-swatch[tint='yellow'] {
	background-color: rgba(255, 205, 0, 0.678);
}
.tint.lime, .task.lime, .tasklet.lime, tint-selector-swatch[tint='lime'] {
	background-color: rgba(100, 205, 25, 0.678);
}
.tint.green, .task.green, .tasklet.green, tint-selector-swatch[tint='green'] {
	background-color: rgba(154, 205, 50, 0.678);
}
.tint.teal, .task.teal, .tasklet.teal, tint-selector-swatch[tint='teal'] {
	background-color: rgba(144, 206, 144, 0.678);
}
.tint.blue, .task.blue, .tasklet.blue, tint-selector-swatch[tint='blue'] {
	background-color: rgba(135, 206, 235, 0.678);
}
.tint.indigo, .task.indigo, .tasklet.indigo, tint-selector-swatch[tint='indigo'] {
	background-color: rgba(140, 150, 225, 0.678);
}
.tint.purple, .task.purple, .tasklet.purple, tint-selector-swatch[tint='purple'] {
	background-color: rgba(147, 112, 219, 0.678);
}
.tint.magenta, .task.magenta, .tasklet.magenta, tint-selector-swatch[tint='magenta'] {
	background-color: rgba(200, 110, 200, 0.678);
}
.tint.red, .task.red, .tasklet.red, tint-selector-swatch[tint='red'] {
	background-color: rgba(255, 105, 180, 0.678);
}
.tint, .task, .tasklet, tint-selector-swatch {
	background-blend-mode: overlay;
}
button.tint, tint-selector-swatch {
	color: var(--buttonText);
}
button.tint.selected, tint-selector-swatch[selected] {
	color: var(--buttonToggledText);
}
button.tint.selected .material-symbols-outlined, tint-selector-swatch[selected] .material-symbols-outlined{
	font-variation-settings: 'FILL' 1;
}

tint-selector {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(38px, 1fr) );
	justify-items: stretch;
	align-items: stretch;
}

tint-selector-swatch i {
	padding: 6px;
}

button.tint, tint-selector-swatch {
	min-width: 38px;
	max-width: 45px;
	height: 38px;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.queueSelector {
	color: rgba(128, 128, 128, 0.5);
	width: 48px;
	height: 40px;
	text-align: center;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.queueSelector.selected {
	color: black;
}
.queueSelector.selected .material-symbols-outlined {
	font-variation-settings: 'FILL' 1;
}

.queueSelector span {
	display: block;
	font-size: 66%;
}

.assignmentBanner {
	padding-left: 10px;
	margin-bottom: 0px;
	font-weight: bold;
}

.swimlane h6 {
	margin-bottom: 0px;
}

.verifiedSwimlane .task .avatar {
	max-width: 17px;
}

option.agreement {
	font-weight: bold;
}

option.assignment {
}

input[type=range] {
	background: none;
	border: none;
	padding: 0;
	height: 20px;
}

input[type=range]::-webkit-slider-runnable-track {
	height: 5px;
	background: #ddd;
	border: none;
	border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: rgb(127,127,127);
	margin-top: -4px;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #ccc;
}

input[type=range]::-moz-range-track {
	height: 5px;
	background: #ddd;
	border: none;
	border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: rgb(127,127,127);
}

/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
	outline:none;
	outline-offset: -1px;
}

input[type=range]::-ms-track {
	height: 5px;
	/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
	background: transparent;
	/*leave room for the larger thumb to overflow with a transparent border */
	border-color: transparent;
	border-width: 6px 0;
	/*remove default tick marks*/
	color: transparent;
}

input[type=range]::-ms-fill-lower {
	background: #777;
	border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
	background: #ddd;
	border-radius: 10px;
}

input[type=range]::-ms-thumb {
	border: none;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background: rgb(127,127,127);
}

input[type=range]:focus::-ms-fill-lower {
	background: #888;
}

input[type=range]:focus::-ms-fill-upper {
	background: #ccc;
}

div.deadline {
	margin-top: 3px;
}

::backdrop {
	background-color: rgba(0,0,0,0.2);
}

.modal::backdrop {
	backdrop-filter: blur(2px) contrast(.8);
	background-color: rgba(0,0,0,0.0);
}
	
dialog header {
	overflow: auto;
	padding: 5px;
	box-sizing: border-box;
	position: sticky;
	width: 100%;
	bottom: 0px;
}

dialog header.menuBanner {
	position: sticky;
	top: 0;
	z-index: 359;
	padding: 10px;
	padding-bottom: calc(10px - var(--buttonGap));
}

dialog header.menuBanner h1,	
dialog header.menuBanner h2,
dialog header.menuBanner h3 {
	padding: 0;
}

dialog section {
	margin-bottom: 0px;
	z-index: 350;
	color: var(--dialogText);
	background-color: var(--dialogBackground);
}

dialog footer {
	overflow: auto;
	padding: 5px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	bottom: 0px;
}

dialog footer.menuBanner {
	position: sticky;
	bottom: 0px;
	z-index: 360;
	padding: 10px;
	padding-bottom: calc(10px - var(--buttonGap));
}

dialog container {
	margin: 0;
	padding: 0;
}

.noselect, .material-symbols-outlined, button, img {
	-webkit-touch-callout: none;	/* iOS Safari */
	-webkit-user-select: none;		/* Chrome/Safari/Opera */
	-moz-user-select: none;			/* Firefox */
	-ms-user-select: none;			/* Internet Explorer/Edge */
	user-select: none;				/* Non-prefixed version, currently not supported by any browser */
}

table.pyjamas {
	position: relative;
}

table.pyjamas tbody tr:hover {
	background-color: rgba(128, 128, 128, 0.125);
}

table.pyjamas tbody tr td,
table.pyjamas thead tr th {
}
table.pyjamas thead tr th {
	position: sticky;
	top: 0px;
}

@media print {
	.unprintable { display: none !important; }
	.floatingCircle { display: none !important; }
	.stayOnScreen { 
		position: relative !important; 
		top: 0px !important;
		visibility: visible  !important;
	}
	#verticalScroller { overflow: visible !important; }
}

article.fullWidth .container.mobileScreen, .container.mobileScreen {
	width: 550px;
	padding: 0px;
	margin-inline: auto;
}

article.fullWidth .container.tabletScreen, .container.tabletScreen {
	width: 1025px;
	padding: 0px;
	margin-inline: auto;
}

#page.editorScreen {
	display: flex;
	flex-direction: column;
}
html { 
	font-size: var(--windowFontSize);
	-webkit-text-size-adjust: none;
}

.spanAllColumns {
	column-span: all;
}

body {
	overscroll-behavior-y: contain; /* disable reload on overscroll */
	padding: 0;
	margin: 0;
	font-size: var(--pageFontSize);
	line-height: var(--pageFontLineHeight);
	font-family: var(--pageFontFamily);
}

input[type="range"].fontSlider {
	width: 100%;
}
input[type="range"].fontSlider::-moz-range-track,
input[type="range"].fontSlider::-webkit-slider-runnable-track {
}

header.page { 
	position: absolute; 
	top: 0;
	left: 0;
	right: 0;
	height: var(--pageHeaderSizeHeight); 
	z-index: var(--headerDepthIndex, 1);
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	gap: clamp(10px, 2.5vw, 20px);
	padding-left: var(--logotypePositionLeft, 10px);
	padding-right: 10px;
}

footer.page {
	clear: both;
}

optgroup:empty {
	display: none;
}

table {
	width: 100%;
}

a {
	cursor: pointer;
	text-decoration: none;
}

td a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

label {
	-webkit-touch-callout: none;
		-webkit-user-select: none;
			 -moz-user-select: none;
				-ms-user-select: none;
						user-select: none;
	display: block;
	vertical-align: middle;
}

label i{
	display: inline-block;
	vertical-align: bottom;
}

button.letter {
	font-size: 15px;
	line-height: 32px;
	padding: 1px;
	height: 34px;
	width: 34px;
	min-width: 34px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 2px;
}

button.singleLetter {
	font-size: 15px;
	line-height: 32px;
	padding: 1px;
	height: 34px;
	width: 25px;
	min-width: 25px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 2px;
}

button.tiny {
	font-size: 12px;
	width: 20px;
}

button.text-icons.childButton {
	height: 32px;
}

button.text-icons.childButton span {
	padding: 2px;
}

p.tiny {
	font-size: 75%;
}

span.tiny {
	display: block;
	font-size: 50%;
	font-weight: normal;
	text-align: center;
}

div.tiny {
	display: block;
	font-size: 50%;
	line-height: 10px;
	font-weight: normal;
	text-align: center;
}

td.tiny {
	font-size: 50%;
	line-height: 10px;
	font-weight: normal;
}

hr {
	height:1px;
	border:none;
	color: rgba(127, 127, 127, 0.4);
	background-color: rgba(127, 127, 127, 0.4);
}

hr.minimal {
	padding: 0;
	margin: 0;
	height:1px;
}

hr.compact {
	display: none;
}

hr.wide {
	display: block;
}

#leftHeaderMenu {
	display: flex;
	gap: clamp(5px, 2.5vw, 10px);
	transition: top 0.5s ease, left 0.5s ease;
}

#rightHeaderMenu {
	display: flex;
	gap: clamp(5px, 2.5vw, 10px);
	transition: top 0.5s ease, right 0.5s ease;
}

#logotype {
	display: var(--logotypeDisplay);
	width: var(--logotypeSizeWidth);
	height: var(--logotypeSizeHeight);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	transition: top 0.5s ease, right 0.5s ease, left 0.5s ease, bottom 0.5s ease, width 0.5s ease, height 0.5s ease;
}

#emblem {
	display: var(--emblemDisplay);
	width: var(--emblemSizeWidth);
	height: var(--emblemSizeHeight);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	transition: top 0.5s ease, right 0.5s ease, left 0.5s ease, bottom 0.5s ease, width 0.5s ease, height 0.5s ease;
}

#actorGrid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 8px;
}

#profileAvatar {
	display: flex;
	align-items: center;
	width: var(--avatarSizeWidth);
	height: var(--avatarSizeHeight);
	padding: 0;
	text-align: left;
	border: none;
	border-radius: var(--avatarRadius);
	transition: top 0.5s ease, right 0.5s ease;
	box-shadow: 0 0 2px rgba(128, 128, 128, 0.5), 0 0 5px rgba(128, 128, 128, 0.5);
}

#profileAvatar.representative {
	border-radius: 5px;
}

.profileAvatar {
	border-radius: var(--avatarRadius);
	transition: top 0.5s ease, right 0.5s ease;
}

#profileAvatarName {
	font-size: var(--avatarCaptionFontSize);
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	line-height: normal;
}

.profileAvatar span {
	display: var(--avatarCaptionDisplay);
	font-size: var(--avatarCaptionFontSize);
	font-weight: normal;
	height: 32px;
	line-height: 32px;
	margin: var(--avatarMargin);
	margin-top: auto;
	margin-bottom: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

#resourceOwnedBy {
	display: flex;
	background-color: var(--mainBackground);
	padding-inline: 1px;
	border: none;
	border-radius: 32px;
	box-shadow: 0 0 2px rgba(128, 128, 128, 0.5), 0 0 5px rgba(128, 128, 128, 0.5);
}

#resourceOwnedByAvatar {
	width: 32px;
	height: 32px;
	margin: 3px;
	border-radius: var(--avatarRadius);
	transition: top 0.5s ease, right 0.5s ease;
	vertical-align: middle;
}

#resourceOwnedByName {
	display: inline-block;
	color: var(--mainText);
	font-size: var(--avatarCaptionFontSize);
	font-weight: normal;
	margin: var(--avatarMargin);
	margin-top: auto;
	margin-bottom: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#profileOptions { 
	position: absolute;
	z-index: var(--optionsDepthIndex, 3000); 
	top: var(--optionsPositionTop); 
	right: var(--optionsPositionRight);
	width: var(--optionsSizeWidth);
	max-height: calc(100vh - 75px - var(--optionsPositionTop));
	overflow-x: visible;
	overflow-y: auto;
	font-size: var(--optionsFontSize);
	border-radius: var(--optionsRadius);
	box-shadow: var(--optionsShadow);
	transition: top 0.5s ease, right 0.5s ease;
}

#profileOptions a {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 2px;		
	padding: 8px 0px 8px 8px;
	cursor: pointer;
	text-transform: lowercase;
}

#profileOptions a:first-child {
	border-radius: inherit;
	border-bottom-right-radius: unset;
	border-bottom-left-radius: unset;
}

#profileOptions a:last-child {
	border-radius: inherit;
	border-top-right-radius: unset;
	border-top-left-radius: unset;
}

#profileOptions a span {
	flex-grow: 1;
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
}

#profileOptions a span::first-letter {
	text-transform: uppercase;
}

#profileOptions > a:last-child { 
	border-bottom: none;
}

a:hover i.material-symbols-outlined {
	font-variation-settings: 'FILL' 1;
}

#languageSelector { 
	position: absolute;
	display: block;
	z-index: 5000; 
	top: var(--headerRightMenuPositionTop);
	right: var(--headerRightMenuPositionRight);
	width: 200px;
	text-align: center;
	cursor: pointer;
	font-size: var(--optionsFontSize);
	box-shadow: var(--optionsShadow);
	transition: top 0.5s ease, right 0.5s ease;
}

#languageSelector button {
	width: 200px;
	text-align: left;
}

#languageSelector img {
	margin-inline: 2px;
	height: 20px;
	width: 50px;
}

#menu {
	display: var(--hamburgerDisplay);
	transition: top 0.5s ease, left 0.5s ease, bottom 0.5s ease, right 0.5s ease;
}

#breadcrumbs {
}

#crumbs {
	display: flex;
	gap: 10px;
}

#toolbox {
	display: flex;
	gap: 10px;
}

#navigation {
	position: relative;
	display: var(--navigationDisplay, none);
	width: var(--navigationSizeWidth);
	border-radius: var(--navigationRadius);
	box-shadow: var(--navigationShadow);
	vertical-align: var(--navigationEntryAlignVertical);
	text-align: var(--navigationEntryAlignHorizontal);
	transition: top 0.5s ease, right 0.5s ease, width 0.5s ease, height 0.5s ease;
	max-height: calc(100vh - 75px - var(--navigationPositionTop));
	overflow-x: visible;
	overflow-y: auto;
	direction: rtl;
	z-index: var(--navigationDepthIndex, 174);
}

#navigation.ontop {
	display: block;
}

#navigation.empty {
	display: none;
}

#navigation a {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 2px;
	padding: var(--navigationEntryPadding, 8px 0px 8px 8px);
	cursor: pointer;
	text-transform: lowercase;
	direction: ltr;
}

#navigation a:first-child {
	border-radius: inherit;
	border-bottom-right-radius: unset;
	border-bottom-left-radius: unset;
}

#navigation a:last-child {
	border-radius: inherit;
	border-top-right-radius: unset;
	border-top-left-radius: unset;
}

#navigation a span {
	flex-grow: 1;
	text-align: left;
	display: var(--navigationEntryCaptionDisplay);
	font-size: var(--navigationCaptionFontSize);
	vertical-align: middle;
	white-space: nowrap;
}

#navigation a span::first-letter {
	text-transform: uppercase;
}

#navigation #closeMenu {
	display: none;
}

#navigation.ontop #closeMenu {
	display: block;
}

#navigation a:last-child {
	border-bottom: none;
}

#expandMenuButton {
	display: none;
	color: var(--menuText, black);
	background-color: var(--menuBackground, white);
	z-index: 0;
	transition: all 0.5s 2s ease;
}

#menuContainer.hasMenu #expandMenuButton {
	display: var(--navigationDisplay, none);
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 100%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.19);
	position: absolute;
	top: 50%;
	right: 50px;
	text-align: center;
	margin-left: -15px;
	margin-top: -20px;
	cursor: pointer;
}

#menuContainer {
	position: absolute;
	z-index: var(--navigationDepthIndex, 174);
	top: var(--navigationPositionTop);
	left: var(--navigationPositionLeft);
	display: inline-block;
	width: var(--navigationSizeWidth);
	transition: top 0.5s ease, right 0.5s ease, width 0.5s ease, height 0.5s ease;
	z-index: 101;
}

body.shrunken #menuContainer.hasMenu #expandMenuButton {
	transform: rotate(180deg);
}

#expandMenuButton:hover  {
	filter: brightness(.8);
	z-index: 1;
}

#menuContainer.hasMenu:hover #expandMenuButton {
	right: -45px;
	z-index: 1;
}

/* For the inside button */
#expandMenuButton div  {
	line-height: 40px;
}

.status {
	display: none;
	background-color: red;
	color: white;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0;
	margin-left: 5px;
	border-radius: 10px;
	font-size: 80%;
}

.indication {
	white-space: nowrap;
	display: inline-block;
	background-color: red;
	color: white;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0;
	margin-left: 5px;
	border-radius: 10px;
	font-size: 80%;
	height: 25px;
	vertical-align: middle;
}

.floatingStatusIcon {
	display: inline;
	position: absolute;
	background-color: red;
	color: white;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;
	margin: 0;
	border-radius: 10px;
	font-size: 80%;
}

#verticalScroller {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: var(--pageMargin);
	padding: var(--pagePadding);
	box-sizing: border-box;
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	transition: margin 0.125s ease, padding 0.125s ease;
}

#verticalScroller.hideHead {
	margin-top: 0px;
}

.gridScroll {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(var(--boxContainerSizeWidth), 1fr) );
	justify-items: stretch;
	align-items: stretch;
	gap: var(--list-gap, 15px);
	box-sizing: border-box;
	padding: 10px;
}

.gridScroll > * {
	justify-self: center;
	align-self: start;
	width: 100%;
	max-width: calc(1.5 * var(--boxContainerSizeWidth));
}

.horizontalScroll go-resource-brick {
	max-width: calc(3.0 * var(--boxContainerSizeWidth));
}
.horizontalScroll go-account-brick {
	max-width: calc(2.0 * var(--boxContainerSizeWidth));
}

.horizontalScroll go-account-box,
.horizontalScroll go-account-portrait,
.horizontalScroll go-page-box,
.horizontalScroll go-group-box {
	max-width: var(--squareContainerSizeWidth);
	min-height: var(--squareContainerSizeHeight);
}

.horizontalScroll go-account-notice,
.horizontalScroll go-group-notice {
	max-width: var(--boxContainerSizeWidth);
	min-height: var(--boxContainerSizeWidth);
}

.horizontalScroll go-account-poster,
.horizontalScroll go-group-poster,
.horizontalScroll go-resource-poster,
.horizontalScroll go-page-poster {
	max-width: var(--boxContainerSizeWidth);
	margin-block: 8px;
}

.horizontalScroll go-account-postcard,
.horizontalScroll go-group-postcard,
.horizontalScroll go-resource-postcard,
.horizontalScroll go-page-postcard {
	max-width: var(--boxContainerSizeWidth);
	margin-block: 8px;
}

.gridScroll go-resource-brick {
	max-width: unset;
	grid-column: span 3;
}

.accountListWidget .gridScroll {
	grid-template-columns: repeat( auto-fit, minmax(calc(1.5 * var(--boxContainerSizeWidth)), 1fr) );
}

.gridScroll go-account-brick {
	max-width: unset;
	grid-column: span 1.5;
}

.gridScroll go-account-picture,
.horizontalScroll go-account-picture,
.verticalScroll go-account-picture,
.gridScroll go-resource-picture,
.horizontalScroll go-resource-picture,
.verticalScroll go-resource-picture {
	max-width: unset;
	width: fit-content;
}

.gridScroll:has(go-resource-picture),
.horizontalScroll:has(go-resource-picture),
.verticalScroll:has(go-resource-picture) {
	gap: 0px;
}

#main {
	--pageMainWindowSizeHeight: calc(100vh - var(--pageHeaderSizeHeight));
	min-height: calc(100vh - var(--pageHeaderSizeHeight) - var(--copyrightHeight) - 2px);
}

#copyright {
	max-height: var(--copyrightHeight);
	line-height: var(--copyrightHeight);
	color: white;
	background-color: rgb(43, 44, 42);
	transition: padding 0.5s ease;
}

#copyright a {
	color: white;
}

#poweredByIcon { 
	display: none;
}

.container {
	position: relative;
	box-sizing: border-box;
	max-width: var(--pageContainerSlimSizeWidth);
	margin: var(--pageContainerSlimMargin);
	padding: var(--pageContainerSlimPadding);
	transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease;
	clear: both;
}

dialog .container {
	position: relative;
	box-sizing: border-box;
	max-width: 100vw;
	margin: 0px 0px;
	padding: 0px 10px;
	transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease;
}

article.fullWidth .container {
	position: relative;
	box-sizing: border-box;
	max-width: var(--pageContainerWideSizeWidth);
	margin: var(--pageContainerWideMargin);
	padding: var(--pageContainerWidePadding);
	transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease;
}

.u-cf {
	content: "";
	display: table;
	clear: both;
}

.row {
	display: flex;
	gap: 10px;
	flex-direction: column;
	clear: both;
}

.menubar,
.submenubar {
	width: 100%;
}

.column,
.columns {
	width: 100%;
	box-sizing: border-box;
}

@media (min-width: 550px) {
	:not(.editorContainer.mobileScreen) .row { flex-direction: row; }
	:not(.editorContainer.mobileScreen) .one.column,
	:not(.editorContainer.mobileScreen) .one.columns { width: calc( 100% / 12 ); }
	:not(.editorContainer.mobileScreen) .two.columns { width: calc( 100% / 6 ); }
	:not(.editorContainer.mobileScreen) .three.columns { width: calc( 100% / 4 ); }
	:not(.editorContainer.mobileScreen) .four.columns { width: calc( 100% / 3 ); }
	:not(.editorContainer.mobileScreen) .five.columns { width: calc( 100% / 12 * 5 ); }
	:not(.editorContainer.mobileScreen) .six.columns { width: calc( 100% / 2 ); }
	:not(.editorContainer.mobileScreen) .seven.columns { width: calc( 100% / 12 * 7 ); }
	:not(.editorContainer.mobileScreen) .eight.columns { width: calc( 100% / 12 * 8 ); }
	:not(.editorContainer.mobileScreen) .nine.columns { width: calc( 100% / 12 * 9 ); }
	:not(.editorContainer.mobileScreen) .ten.columns { width: calc( 100% / 12 * 10 ); }
	:not(.editorContainer.mobileScreen) .eleven.columns { width: calc( 100% / 12 * 11 ); }
	:not(.editorContainer.mobileScreen) .twelve.columns { width: 100%; margin-left: 0; }

	:not(.editorContainer.mobileScreen) .one-third.column { width: 33%; }
	:not(.editorContainer.mobileScreen) .two-thirds.column { width: 66%; }

	:not(.editorContainer.mobileScreen) .fiveTwelves.columns { width: calc( 100% / 12 * 5 ); }
	:not(.editorContainer.mobileScreen) .tenTwelves.columns { width: calc( 100% / 12 * 10 ); }
	:not(.editorContainer.mobileScreen) .fifteenTwelves.columns { width: calc( 100% / 12 * 15 ); }
	
	:not(.editorContainer.mobileScreen) .threeTens.columns { width: calc( 100% / 10 * 3 ); }
	:not(.editorContainer.mobileScreen) .fourTens.columns { width: calc( 100% / 10 * 4 ); }
	:not(.editorContainer.mobileScreen) .threeEights.columns { width: calc( 100% / 8 * 3 ); }

	:not(.editorContainer.mobileScreen) .one-half.column { width: 48%; }
}

a:active,
a:hover {
	outline: 0;
}
a:focus-visible {
	outline: 2px solid black;
}

header.menuBanner {
	width: 100%;
}

.stayOnScreenContainer {
	position: sticky;
	top: 0;
	z-index: 70;
	background-color: var(--mainBackground);
}

.stayOnScreen {
	will-change: transform;
	width: 100%;
	width: 100vw;
	z-index: 101;
}

.menubar {
	position: relative;
	box-sizing: border-box;
	min-height: var(--menubarSizeHeight, 48px);
}	

.menubar .title, 
.menubar .tool, 
.menubar .center,
.menubar .shortcut {
	margin: 5px;
	padding: 0px;
}

.stayOnScreenContainer:nth-child(2 of .stayOnScreenContainer) {
	top: calc(1 * var(--menubarSizeHeight, 48px)) 
}

.stayOnScreenContainer:nth-child(3 of .stayOnScreenContainer) {
	top: calc(2 * var(--menubarSizeHeight, 48px)) 
}

.stayOnScreenContainer:nth-child(4 of .stayOnScreenContainer) {
	top: calc(3 * var(--menubarSizeHeight, 48px)) 
}

.submenubar {
	position: relative;
	box-sizing: border-box;
}	

.submenubar .title {
	margin: 5px 5px 0px 5px;
	padding: 0px;
}

.submenubar .tool,
.submenubar .center,
.submenubar .shortcut {
	margin: 5px;
	padding: 0px;
}

.submenubar .tool button, 
.submenubar .shortcut button,
.submenubar .tool input, 
.submenubar .shortcut input {
	height: 34px;
	min-width: 36px;
}

.submenubar .tool button.text-icons span, 
.submenubar .shortcut button.text-icons span {
	padding: 3px;
}

#topNavigationContainer {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

footer.page {
	display: var(--pageFooterDisplay);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
}

h1 { font-size: var(--h1Size); padding-top: var(--h1MarginTop); padding-bottom: var(--h1MarginBottom); }
h2 { font-size: var(--h2Size); padding-top: var(--h2MarginTop); padding-bottom: var(--h2MarginBottom); }
h3 { font-size: var(--h3Size); padding-top: var(--h3MarginTop); padding-bottom: var(--h3MarginBottom); }
h4 { font-size: var(--h4Size); padding-top: var(--h4MarginTop); padding-bottom: var(--h4MarginBottom); }
h5 { font-size: var(--h5Size); padding-top: var(--h5MarginTop); padding-bottom: var(--h5MarginBottom); }
h6 { font-size: var(--h6Size); padding-top: var(--h6MarginTop); padding-bottom: var(--h6MarginBottom); }

h1.title, .title h1,
h2.title, .title h2,
h3.title, .title h3,
h4.title, .title h4,
h5.title, .title h5,
h6.title, .title h6 {
	line-height: 38px;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

p { margin: 0; font-size: var(--paragraphSize); padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }
p div { margin: 0; font-size: var(--paragraphSize); padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }

.paragraph { margin: 0; font-size: var(--paragraphSize); padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }
.paragraph div { margin: 0; font-size: var(--paragraphSize); padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }

#page ol, #page ul { font-size: var(--paragraphSize); padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }

.textarea {
	overflow-y: scroll;
}
.textarea > * { font-size: medium;}

.textarea p:not(:first-child) { padding-top: var(--paragraphMarginTop); }
.textarea p:not(:last-child) { padding-bottom: var(--paragraphMarginBottom); }
.textarea p:first-child:last-child { padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }

.textarea div:not(:first-child) { padding-top: var(--paragraphMarginTop); }
.textarea div:not(:last-child) { padding-bottom: var(--paragraphMarginBottom); }
.textarea div:first-child:last-child { padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }

.textarea ol, .textarea ul { padding-top: var(--paragraphMarginTop); padding-bottom: var(--paragraphMarginBottom); }

table {
	border-spacing: 0;
}

td, th {
	padding: 0;
}

table.list thead tr th.narrowIcon,
table.list tbody tr td.narrowIcon {
	width: 25px;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
}

table thead tr th.narrowIcon,
table tbody tr td.narrowIcon {
	width: 25px;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
}

table.list thead tr th.icon,
table.list tbody tr td.icon {
	width: 50px;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
}

table thead tr th.icon,
table tbody tr td.icon {
	width: 50px;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
}

table.list thead tr th.icons,
table.list tbody tr td.icons {
	padding: 0px;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}

table thead tr th.icons,
table tbody tr td.icons {
	padding: 0px;
	text-align: right;
	vertical-align: middle;
	white-space: nowrap;
}

table.list { 
	width: 100%; 
	border-spacing: 0;
}

table.list thead.list th {
	padding: var(--listRowPadding);
	padding-block: 0px;
}

table.list tbody:empty {
	display:none;
}

table.list thead { height: var(--listHeaderSizeHeight); }
table.list tbody { height: var(--listRowSizeHeight); }
table.list tbody tr td { padding: var(--listRowPadding); }
table.list tbody tr td img.avatar {
	width: var(--listRowAvatarSize);
	height: var(--listRowAvatarSize);
	border-radius: var(--listRowAvatarRadius);
	margin: 2px;
}
table.list tbody tr td img.accountAvatar {
	width: var(--listRowAvatarSize);
	height: var(--listRowAvatarSize);
	border-radius: 10%;
	margin: 2px;
}
table.list tbody tr td img.groupAvatar {
	width: var(--listRowGroupAvatarSize);
	height: var(--listRowGroupAvatarSize);
	border-radius: var(--listRowGroupAvatarRadius);
	margin: 2px;
}

table.list tbody tr td:empty {
	padding: 0px;
}

table.list tbody tr.compact td { 
	padding-top: 0px; 
	padding-bottom: 0px;
}
table.list tbody tr.compact td img.avatar {
	width: calc(var(--listRowAvatarSize) / 2);
	height: calc(var(--listRowAvatarSize) / 2);
}
table.list tbody tr.compact td img.accountAvatar {
	width: calc(var(--listRowAvatarSize) / 2);
	height: calc(var(--listRowAvatarSize) / 2);
}
table.list tbody tr.compact td img.groupAvatar {
	width: calc(var(--listRowGroupAvatarSize) / 2);
	height: calc(var(--listRowGroupAvatarSize) / 2);
}

table.list tfoot { height: var(--listFooterSizeHeight); }

table.list tbody tr td.avatar, 
table.list thead tr th.avatar	{
	padding: 2px;
}

table.list tbody tr td.groupAvatar, 
table.list thead tr th.groupAvatar {
	padding: 2px;
}

table.list tbody tr td.companyIcon, 
table.list thead tr th.companyIcon	{
	padding: 2px;
}

table.list tbody tr th,
table.list tbody tr td {
	padding: 6px;
}

@media (min-width: 750px) {
	table.list tbody tr th,
	table.list tbody tr td {
		padding: 12px;
	}
}

table.list tbody tr.followedByExtraRow td {
	padding-bottom: 0;
}

table.list tbody tr td.fillCells {
	padding: 1px;
	height: 42px;
	max-width: 25vw;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.list tbody tr td.fillCells:hover {
	overflow: visible;
}

table.list tbody tr td.fillCell {
	padding: 1px;
	height: 42px;
	max-width: 150px;
	text-overflow: ellipsis;
	overflow: hidden;
}

table.list tbody tr td.fillCell:hover {
	overflow: visible;
}

table.list tbody.folded, 
table.list tbody.folded tr, 
table.list tbody.folded tr td, 
table.list tbody.folded tr th {
	display: none;
}

table.list tbody.hideEmpty {
	height: auto;
}

table.list tbody.hideEmpty tr.empty {
	display: none;
}

table.list thead.sticky { 
	overflow: auto; height: 24px;
}
table.list thead.sticky th { 
	position: sticky; top: 0; z-index: 1;
}

table.compact { 
	width: unset; 
	border-spacing: 10px;
}

table.grid { width: 100%; }
table.grid thead { height: var(--gridHeaderSizeHeight); }
table.grid tbody { height: var(--gridRowSizeHeight); }
table.grid tbody tr td { padding: var(--gridRowPadding); }
table.grid tfoot { height: var(--gridFooterSizeHeight); }

.journal.compressed {
	display: grid;
	grid-template-columns: repeat(var(--journalColumnCount), minmax(0, 1fr));
	column-gap: var(--journalColumnGap);
}

.journal.slim {
	display: grid;
	grid-template-columns: repeat(var(--slimJournalColumnCount), minmax(0, 1fr));
	column-gap: var(--journalColumnGap);
}

.journalGrid {
	display: grid;
	grid-template-columns: repeat(var(--journalColumnCount), minmax(0, 1fr));
	gap: var(--journalColumnGap);
	margin-block: var(--journalColumnGap);
}

.journal.slim .letterDivision {
	grid-column: span var(--slimJournalColumnCount);
}

.journalGrid .letterDivision {
	grid-column: span var(--journalColumnCount);
}

.letterDivision {
	margin: var(--journalEntryPadding);
	background-color: var(--bannerBackground);
	border-radius: 25px;
}

.letterDivision span {
	padding: 3px 10px;
	border-radius: 25px;
	background-color: var(--buttonToggledBackground);
	color: var(--buttonToggledText);
}

.entry {
	break-inside: avoid-column;
	padding: var(--journalEntryPadding);
	display: flex;
	justify-content: left;
	align-items: start;
	gap: 10px;
}

.entry i {
	vertical-align: middle;
}

.entry img {
	vertical-align: middle;
}

.entry img.avatar {
	width: var(--journalEntryAvatarSize);
	height: var(--journalEntryAvatarSize);
	border-radius: var(--journalEntryAvatarRadius);
	margin: var(--journalEntryAvatarMargin);
}
.entry img.accountAvatar {
	width: var(--journalEntryAvatarSize);
	height: var(--journalEntryAvatarSize);
	border-radius: 10%;
	margin: var(--journalEntryAvatarMargin);
}
.entry img.groupAvatar {
	width: var(--journalEntryGroupAvatarSize);
	height: var(--journalEntryGroupAvatarSize);
	border-radius: var(--journalEntryGroupAvatarRadius);
	margin: 2px;
}

.entry span {
	vertical-align: top;
}

.entryList {
	display: flex;
	flex-direction: column;
	column-gap: var(--journalColumnGap);
}

.entryList .entry span {
	width: 50%;
}

.journalList {
	display: grid;
	grid-template-columns: repeat( calc(var(--journalColumnCount) / 2), minmax(0, 1fr) );
	column-gap: var(--journalColumnGap);
}

.journalList .entry > i {
	flex-basis: 0;
}

.journalList .entry > span:nth-child(1) {
	width: 35%;
}

.journalList .entry > span:nth-child(2) {
	width: 65%;
}

.journalList .entry > span > span {
	width: 100%;
}

@media (max-width: 550px) {
	.entry {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: 0px;
	}

	.journalList .entry span {
		width: auto !important;
	}
}

::-webkit-scrollbar { 
	width: var(--scrollbarSizeWidth, 10px);
	height: var(--scrollbarSizeHeight, 10px);
}
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.0); }
::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, 0.5); border-radius: 20px; }


nav::-webkit-scrollbar,
#profileOptions::-webkit-scrollbar { 
	width: 10px;
	height: 10px;
}


form {
	display: inline-block;
}

.blocky {
	width: 90%;
	margin-bottom:5px;
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	outline: 0;
	padding: 0 20px;
	border: 1px solid;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	height: var(--buttonSizeHeight);
	line-height: var(--buttonTextHeight);
	min-width: var(--buttonSizeWidth);
	border-radius: var(--buttonBorderRadius);
	border: 1px solid rgba(127, 127, 127, 0.5);
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="button"]:focus-visible {
	outline: 1px solid black;
}

button.actionButton {
	vertical-align:middle;
	white-space: nowrap;
	min-width: 40px;
	line-height: 20px;
}

button.actionButton span {
	padding: 7px 5px 7px 5px;
}

button.actionButton span:empty {
	display: none;
}

.actionButton i {
	vertical-align: middle;
}

.actionButton span {
	vertical-align: middle;
}

button.text-icons {
	vertical-align:middle;
	white-space: nowrap;
	min-width: 40px;
	padding: 2px;
	line-height: 18px;
}

label.text-icons {
	vertical-align:middle;
	white-space: nowrap;
	min-width: 40px;
	line-height: 18px;
}

a.text-icons {
	text-decoration: none;
}

a.text-icons span {
	text-decoration: none;
}

a.text-icons span, 
button.text-icons span, 
label.text-icons span {
	padding: 7px 5px 7px 5px;
}

button.text-icons span:empty, 
label.text-icons span:empty {
	display: none;
}

.text-icons i {
	vertical-align: middle;
}

.text-icons img {
	vertical-align: middle;
	width:24px;
	display:inline-block;
}

.text-icons span {
	vertical-align: middle;
}

.text-icons input {
	vertical-align: middle;
}

button.material-symbols-outlined {
	vertical-align:middle;
	padding: 2px;
	font-size: 22px;
}

button i { 
	display: inline-block;
	vertical-align: middle;
}

button span { 
	display: inline-block;
	vertical-align: middle;
}

button.busted {
	text-decoration: line-through;
}

button.material-symbols-outlined.toggled, 
input[type='submit'].material-symbols-outlined.toggled, 
input[type='reset'].material-symbols-outlined.toggled, 
input[type='button'].material-symbols-outlined.toggled {
	font-variation-settings: 'FILL' 1;
}

button:hover.material-symbols-outlined, 
input[type='submit']:hover.material-symbols-outlined, 
input[type='reset']:hover.material-symbols-outlined, 
input[type='button']:hover.material-symbols-outlined {
	font-variation-settings: 'FILL' 1;
}

button.toggled i.material-symbols-outlined, 
input[type='submit'].toggled i.material-symbols-outlined, 
input[type='reset'].toggled i.material-symbols-outlined, 
input[type='button'].toggled i.material-symbols-outlined {
	font-variation-settings: 'FILL' 1;
}

button:hover i.material-symbols-outlined, 
input[type='submit']:hover i.material-symbols-outlined, 
input[type='reset']:hover i.material-symbols-outlined, 
input[type='button']:hover i.material-symbols-outlined {
	font-variation-settings: 'FILL' 1;
}

.dropdown button:hover i.material-symbols-outlined {
	font-variation-settings: 'FILL' 1;
}

.toggleGroup {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}

.toggleGroup button:not(:first-child) {
	border-left: none;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

.toggleGroup button:not(:last-child) {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.toggleGroup button {
	flex-grow: 3;
}

.toggleIcons {
	gap: 5px;
	clear: both;
	width: 100%;
	display: inline-flex;
	flex-wrap: wrap;
}

.toggleIcons button {
	border-radius: 20px;
	padding-inline: 5px;
}

.toggleGrid {
	display: inline-flex;
	vertical-align: middle;
	border-radius: var(--buttonBorderRadius);
	border: 1px solid rgba(127, 127, 127, 0.5);
	flex-wrap: wrap;
	background-color: var(--buttonBackground);
	border-collapse: collapse;
}

.toggleGrid button {
	border: 0px;
	border-right: 1px solid rgba(127, 127, 127, 0.5);
	border-bottom: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: content-box;
	flex-grow: 1;
	flex-shrink: 2;
	border-radius: 0px;
	background-color: unset;
}

.letterGroup {
	display: inline-flex;
	gap: 5px;
	vertical-align: middle;
}

.lookaheadGroup {
	display: inline-flex;
	gap: 5px;
	vertical-align: middle;
}

.inlineButtons {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 5px;
	vertical-align: middle;
	float: right;
}

.buttonGroup button, .buttonGroup button.text-icons {
	flex-grow: 1;
	flex-shrink: 1;
	min-width: 100px;
	max-width: 100px;
}

.buttonGroupButton {
	margin: 0;
}

.buttonGroupButton .buttonWidget {
	width: 100%;
	margin: 0;	
}

section.dropdownContainer {
	top: 48px;
	position: sticky;
	z-index: 360;
}

.dropdown {
	position: absolute;
	display: block;
	z-index: 2500;
	padding: 5px;
	padding-bottom: 0px;
}

.dropdown button {
	display: block;
	margin-bottom: 5px;
	width: 100%;
	text-align: left;
}

.blockButtons {
	display: inline-flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5px;
	vertical-align: middle;
}

.blockButtons[hidden='hidden'] {
	display: none;
}

.buttonGroup {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 5px;
	vertical-align: middle;
}

.buttonStack {
	display: block-flex;
	flex-wrap: wrap;
	gap: 5px;
	vertical-align: middle;
}

.buttonStack button {
	width: 100%;
}

i.toggleIcon {
	cursor: pointer;
	vertical-align: middle;
	border-radius: 4px;
	background-color: rgba(128, 128, 128, 0.25);
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 8px;
	padding-right: 8px;
	margin-left: 4px;
}

.tabbar, [role='tablist'] {
	width: 100%;
	display: flex;
	flex-direction: row;
	gap: var(--tabsGap, 10px);
	padding: var(--tabsPadding);
	overflow: hidden;
	box-sizing: border-box;
}

.tabbar .tab, [role='tab'] {
	flex-grow: 1;
 	cursor: pointer;
	text-align: center;
	-webkit-touch-callout: none;
		-webkit-user-select: none;
			 -moz-user-select: none;
				-ms-user-select: none;
						user-select: none;
	border-radius: var(--tabBorderRadius);
	border-style: solid;
	border-width: var(--tabBorderWidth);
	border-bottom-width: 1px;
	border-color: var(--bannerBorder);
	border-bottom-color: rgba(0,0,0,0.125);
	padding: var(--tabPadding);
	box-shadow: 0px 4px 8px 0px #0000002B;
	transition: border-radius 1s ease;
	max-width: 250px;
	color: var(--mainText);
	background-color: var(--mainBackground);
}

.tabbar .tab.tabbed, [role='tab'][aria-selected='true'] {
	font-weight: bold;
	border-color: var(--bannerHighlight);
	border-bottom-width: 0px;
	background-color: var(--bannerBackground);
	color: var(--bannerText);
}

[role='tabpanel'] {
	box-sizing: border-box;
}

[role='tabpanel'][aria-expanded='false'] {
	display: none;
}

.tabbar .tab div, [role='tab'] div {
	display: var(--tabCaptionDisplay);
	vertical-align:middle;
	font-size: var(--tabCaptionFontSize);
	line-height: var(--tabCaptionFontLineHeight);
}

.tabbar .tab span, [role='tab'] span {
	display: var(--tabCaptionDisplay);
	vertical-align:middle;
	font-size: var(--tabCaptionFontSize);
	line-height: var(--tabCaptionFontLineHeight);
}

.tabbar .tab i, [role='tab'] i {
	padding: 0px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

.tabbar .tab.tabbed i, [role='tab'][aria-selected='true'] i {
	font-variation-settings: 'FILL' 1;
}

.tabbar .tab:hover i, [role='tab']:hover i {
	font-variation-settings: 'FILL' 1;
}

@media (min-width: 550px) {
	.tabSeparator {
		flex-grow: 2;
	}
}

.formSection,
.tabPanel,
.editorFieldset {
	border-bottom: 1px solid rgba(127, 127, 127, 0.5);
}

.editorFieldset legend {
	line-height: 1em;
}

.formSection:not(:has(>:not([hidden='hidden']))) {
	display: none;
}

.tabPanel:not(:has(>:not([hidden='hidden']))) {
	display: none;
}

.editorFieldset:not(:has(>section>:not([hidden='hidden'])):has(>legend)) {
	display: none;
}

.tabPanel {
	padding-block: 0px;
	margin-inline: 5px;
}

.title { 
	display: inline-block;
	float: left;
	margin-right: var(--buttonGap);
}

.shortcut {
	float: left;
	margin-right: var(--buttonGap);
	margin-bottom: var(--buttonGap);
}

.tool {
	float: right; 
	margin-left: var(--buttonGap);
	margin-bottom: var(--buttonGap);
}

.menuBanner .center {
	margin-bottom: var(--buttonGap);
}

.icon { width: 40px; }

td.avatar,
th.avatar { width: 40px; }

td.accountAvatar,
th.accountAvatar { width: 40px; }

td.groupAvatar,
th.groupAvatar { width: 40px; }

.avatarGroup img.avatar {
	max-width: 30px;
}

.avatarGroup img.accountAvatar {
	max-width: 30px;
}

.avatarGroup {
	display: inline-block;
	vertical-align:middle;
	box-sizing: border-box;
	border: 1px solid rgba(127, 127, 127, 0.4);
	border-radius: 75%;
	height: auto;
	padding: 3px;
	background-color: var(--mainBackground);
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
}

td.photo {
	min-width: 270px;
	min-width: 150px;
	padding: 0 !important;
}

img.photo {
	box-sizing: border-box;
	height: auto;
	width: 100%;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
	transition: max-height 0.5s ease;
}

figure {
	margin: 0px;
}

figure.photo {
	position: relative;
}

figure.photo figcaption {
	white-space: normal;
	text-align: right;
	position: absolute;
	bottom: 6px;
	right: 0;
	color: black;
	background-color: rgba(255, 255, 255, 0.75);
	margin: 0px;
	padding: 2px 5px 2px 5px;
}

figure.photo figcaption:empty {
	display: none;
}

figure.background {
	margin: 0px 0px 8px 0px !important;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid rgba(127, 127, 127, 0.4);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

div.photo {
	position: relative;
	width:100%;
	padding-top: 80%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	overflow: hidden;
}

div.photo label {
	position: absolute;
	left: 0px;
	top: 0px;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	padding-top: 2px;
	padding-left: 5px;
	padding-right: 15px;
	padding-bottom: 2px;
}

div.photo img.avatar {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

div.photo img.accountAvatar {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

div.photo img.groupAvatar {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

span.topnav {
	display: inline-block;
	padding-inline: 10px;
	user-select: none;
	cursor: pointer;
}

.cssGrid {
	display: grid;
}

.mobile, span.topnav.mobile {
	display: none;
}

.tablet, span.topnav.tablet {
	display: none;
}

.computer, span.topnav.computer {
	display: none;
}

.mobilecomputer, span.topnav.mobilecomputer {
	display: none;
}

.mobiletablet, span.topnav.mobiletablet {
	display: none;
}

.tabletcomputer, span.topnav.tabletcomputer {
	display: none;
}

.nodevices, span.topnav.nodevices {
	display: none;
}

@media (max-width: 549px) {
	.mobile {
		display: block;
	}
	.mobile.cssGrid {
		display: grid;
	}

	.tablet {
		display: none;
	}

	.computer {
		display: none;
	}

	.mobilecomputer {
		display: block;
	}
	.mobilecomputer.cssGrid {
		display: grid;
	}

	.mobiletablet {
		display: block;
	}
	.mobiletablet.cssGrid {
		display: grid;
	}

	.tabletcomputer {
		display: none;
	}

	span.topnav.mobile {
		display: inline-block;
	}

	span.topnav.tablet {
		display: none;
	}

	span.topnav.computer {
		display: none;
	}

	span.topnav.mobilecomputer {
		display: inline-block;
	}

	span.topnav.mobiletablet {
		display: inline-block;
	}

	span.topnav.tabletcomputer {
		display: none;
	}
}

@media (min-width: 550px) and (max-width: 1024px) {
	.mobile {
		display: none;
	}

	.tablet {
		display: block;
	}
	.tablet.cssGrid {
		display: grid;
	}

	.computer {
		display: none;
	}

	.mobilecomputer {
		display: none;
	}

	.mobiletablet {
		display: block;
	}
	.mobiletablet.cssGrid {
		display: grid;
	}

	.tabletcomputer {
		display: block;
	}
	.tabletcomputer.cssGrid {
		display: grid;
	}

	span.topnav.mobile {
		display: none;
	}

	span.topnav.tablet {
		display: inline-block;
	}

	span.topnav.computer {
		display: none;
	}

	span.topnav.mobilecomputer {
		display: none;
	}

	span.topnav.mobiletablet {
		display: inline-block;
	}

	span.topnav.tabletcomputer {
		display: inline-block;
	}
}

@media (min-width: 1025px) {
	.mobile {
		display: none;
	}

	.tablet {
		display: none;
	}

	.computer {
		display: block;
	}
	.computer.cssGrid {
		display: grid;
	}

	.mobilecomputer {
		display: block;
	}
	.mobilecomputer.cssGrid {
		display: grid;
	}

	.mobiletablet {
		display: none;
	}

	.tabletcomputer {
		display: block;
	}
	.tabletcomputer.cssGrid {
		display: grid;
	}

	span.topnav.mobile {
		display: none;
	}

	span.topnav.tablet {
		display: none;
	}

	span.topnav.computer {
		display: inline-block;
	}

	span.topnav.mobilecomputer {
		display: inline-block;
	}

	span.topnav.mobiletablet {
		display: none;
	}

	span.topnav.tabletcomputer {
		display: inline-block;
	}
}

.chessContainer {
	box-sizing: border-box;
	vertical-align: top;
	width: var(--chessContainerSizeWidth);
	height: var(--chessContainerSizeHeight);
	overflow: hidden;
	position: relative;
	display: inline-block;
	text-align: center;
	scroll-snap-align: start;
}

.chessContainer h4, .ribbon p {
	margin-left: auto;
	margin-right: auto;
	padding-left: 5px;
	padding-right: 5px;
}

.chessSquare {
	box-sizing: border-box;
	vertical-align: top;
	width: calc(100% - 10px);
	height: var(--chessSquareSizeHeight);
	display: inline-block;
	border-radius: 5px;
	margin: 5px auto;
	padding: 5px;
	white-space: normal;
	text-align: center;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
	position: relative;
	background-color: white;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.chessSquare.material-symbols-outlined {
	color: rgba(127,127,127,0.5);
	font-size: var(--chessSquareSizeHeight);
	vertical-align: middle;
	text-align: center;
}

.horizontalBoxContainer {
	position: relative;
	white-space: nowrap;
}

.horizontalBoxContainer p {
	white-space: normal;
}

.horizontalBoxContainer h4 {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0px;
}

.horizontalBoxContainer p {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0px;
}

.horizontalScroll {
	display: flex;
	width: 100%;
	overflow-y: hidden;
	overflow-x: scroll;
	scroll-snap-type: both proximity;
	scroll-padding-inline: 10px;
	gap: var(--list-gap, 15px);
	box-sizing: border-box;
	padding: 10px 10px 5px 10px;
}

.horizontalScroll > * {
	flex-shrink: 0;
}

.verticalBoxContainer {
	position: relative;
}

.verticalBoxContainer p {
	white-space: normal;
}

.verticalBoxContainer h4 {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0px;
}

.verticalBoxContainer p {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0px;
}

.verticalScroll {
	display: flex;
	padding: 10px;
	flex-direction: column;
	overflow-y: hidden;
	overflow-x: scroll;
	scroll-snap-type: both proximity;
	scroll-padding-inline: 10px;
	gap: 5px;
}

.verticalScroll > * {
	width: 100%;
}

.gridScroll > h2, 
.gridScroll > h3, 
.gridScroll > h4 {
	padding: 0;
	margin: 0;
	padding-left: 10px;
	box-sizing: border-box;
	grid-column: 1 / -1;
	justify-self: start;
	scroll-snap-align: start;
}

.horizontalScroll > h2, 
.horizontalScroll > h3, 
.horizontalScroll > h4 {
	writing-mode: vertical-rl;
	display: inline;
	transform: rotate(180deg);
	padding: 0;
	margin: 0;
	margin-inline: 10px;
	text-align: end;
	scroll-snap-align: start;
}

.verticalScroll > h2, 
.verticalScroll > h3, 
.verticalScroll > h4 {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	padding-left: 10px;
	scroll-snap-align: start;
}

.ribbon {
	vertical-align: top;
	width: var(--boxContainerSizeWidth);
	height: var(--boxContainerSizeHeight);
	position: relative;
	display: inline-block;
	text-align: center;
	scroll-snap-align: start;
}

.ribbon h4, .ribbon p {
	margin-left: auto;
	margin-right: auto;
	padding-left: 5px;
	padding-right: 5px;
}

.box {
	vertical-align: top;
	width: var(--boxSizeWidth);
	min-height: var(--boxSizeHeight);
	display: inline-block;
	border-radius: 5px;
	margin: 5px;
	padding: 5px;
	white-space: normal;
	text-align: center;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.box.material-symbols-outlined {
	color: rgba(127,127,127,0.5);
	font-size: var(--boxSizeHeight);
	vertical-align: middle;
	text-align: center;
}

.squareGrid {
	display: grid;
	gap: 15px;
	padding: 10px;
	justify-items: center;
	grid-template-columns: repeat(auto-fit, minmax(var(--squareContainerSizeWidth), 1fr));
}

.squareGrid > * {
	align-self: start;
	justify-self: center;
	width: 100%;
	min-width: var(--squareContainerSizeWidth);
	max-width: calc(1.5 * var(--squareContainerSizeWidth));
}

.bannerGrid {
	display: grid;
	gap: 15px;
	padding: 10px;
	justify-items: center;
	grid-template-columns: repeat(auto-fit, minmax(calc(1.3 * var(--squareContainerSizeWidth)), 1fr));
}

.bannerGrid > * {
	align-self: start;
	justify-self: center;
	width: 100%;
	min-width: calc(1.3 * var(--squareContainerSizeWidth));
	max-width: calc(1.8 * var(--squareContainerSizeWidth));
}

.squareRibbon {
	vertical-align: top;
	width: 100%;
	height: var(--squareContainerSizeHeight);
	position: relative;
	display: inline-block;
	text-align: center;
	scroll-snap-align: start;
}

.squareRibbon h4, .squareRibbon p {
	margin-left: auto;
	margin-right: auto;
	padding-left: 5px;
	padding-right: 5px;
}

.square {
	vertical-align: top;
	width: var(--squareSizeWidth);
	min-height: var(--squareSizeHeight);
	display: inline-block;
	border-radius: 5px;
	margin: 5px;
	padding: 5px;
	white-space: normal;
	text-align: center;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.square.material-symbols-outlined {
	color: rgba(127,127,127,0.5);
	font-size: var(--squareSizeHeight);
	vertical-align: middle;
	text-align: center;
}

.disc {
	vertical-align: top;
	width: var(--discSizeWidth);
	height: var(--discSizeHeight);
	display: inline-block;
	border-radius: 100px;
	margin: 5px;
	padding: 5px;
	white-space: normal;
	text-align: center;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.disc.material-symbols-outlined {
	color: rgba(127,127,127,0.5);
	font-size: var(--discSizeHeight);
	vertical-align: middle;
	text-align: center;
}

.companybox {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	text-align: center;
	width: var(--companyBoxSizeWidth);
}

.companybox h4 {
	overflow: hidden;
	text-overflow: ellipsis;
}

.logobox {
	vertical-align: top;
	box-sizing: border-box;
	width: calc(100% - 10px);
	min-height: var(--companyBoxSizeHeight);
	display: inline-block;
	border-radius: 5px;
	margin: 5px;
	padding: 5px;
	white-space: normal;
	text-align: center;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.logobox.material-symbols-outlined {
	color: rgba(127,127,127,0.5);
	font-size: var(--companyBoxSizeHeight);
	vertical-align: middle;
	text-align: center;
}

.verticalBoxContainer .squareRibbon,
.verticalBoxContainer .ribbon,
.verticalBoxContainer .companyBox,
.verticalBoxContainer .logobox {
	display: block;
	width: calc(100% - 20px);
	padding-left: 10px;
	padding-right: 10px;
}

.verticalBoxContainer go-page-box,
.verticalBoxContainer go-group-box,
.verticalBoxContainer go-market-box,
.verticalBoxContainer go-company-box,
.verticalBoxContainer go-resource-ad,
.verticalBoxContainer go-resource-box,
.verticalBoxContainer go-resource-banner {
	display: block;
	width: 100%;
	z-index: 69;
}

.verticalBoxContainer .squareRibbon:hover,
.verticalBoxContainer .ribbon:hover,
.verticalBoxContainer .companyBox:hover,
.verticalBoxContainer .logobox:hover,
.verticalBoxContainer go-page-box:hover,
.verticalBoxContainer go-group-box:hover,
.verticalBoxContainer go-market-box:hover,
.verticalBoxContainer go-company-box:hover,
.verticalBoxContainer go-resource-ad:hover,
.verticalBoxContainer go-resource-box:hover,
.verticalBoxContainer go-resource-banner:hover {
	z-index: 69;
}

figure img {
	background-color: white;
}

figure.avatar {
	margin: 5px;
}

figure.avatar img {
	box-sizing: border-box;
	border-radius: 75%;
	height: auto;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1/1;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
	padding:5px;
	border:1px solid rgba(127, 127, 127, 0.4);
}

figure.accountAvatar {
	margin: 5px;
}

figure.accountAvatar img {
	box-sizing: border-box;
	border-radius: 10%;
	height: auto;
	width: 100%;
	max-width: 300px;
	aspect-ratio: 1/1;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
	padding:5px;
	border:1px solid rgba(127, 127, 127, 0.4);
}

figure.groupAvatar {
	margin: 5px;
}

figure.groupAvatar img {
	box-sizing: border-box;
	border-radius: 25%;
	height: auto;
	width: 100%;
	max-width: 300px;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
	padding:5px;
	border:1px solid rgba(127, 127, 127, 0.4);
}

figure.preview img {
	box-sizing: border-box;
	height: auto;
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
	padding:5px;
}

figure.report {
	background-color: white;
}

img.avatar {
	vertical-align:middle;
	box-sizing: border-box;
	border-radius: 75%;
	height: auto;
	width: 100%;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
}

figure.avatar.bottomRight {
	margin: 0px;
}

figure.avatar.bottomRight img.avatar {
	width: 40px; 
	position:absolute; 
	right:5px; 
	bottom: 5px; 
	margin: 0px;
	padding:2px;
}

img.accountAvatar {
	vertical-align:middle;
	box-sizing: border-box;
	border-radius: 10%;
	height: auto;
	width: 100%;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
}

figure.accountAvatar.bottomRight {
	margin: 0px;
}

figure.accountAvatar.bottomRight img.accountAvatar {
	width: 40px; 
	position: absolute; 
	right: 5px; 
	bottom: 5px; 
	margin: 0px;
	padding: 2px;
}

img.groupAvatar {
	vertical-align:middle;
	box-sizing: border-box;
	border-radius: 25%;
	height: auto;
	width: 100%;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
}

figure.groupAvatar.bottomRight {
	margin: 0px;
}

figure.groupAvatar.bottomRight img.groupAvatar {
	width: 40px; 
	position:absolute; 
	right:5px; 
	bottom: 5px; 
	margin: 0px;
	padding:2px;
}

i#resourceIcon.material-symbols-outlined {
	color: black;
	background-color: white;
	font-size: 24px;
	width: 24px;
	height: 24px;
	margin: 0px;
	padding: 5px;
	border-radius: 24px;
}

i.resourceIcon.material-symbols-outlined {
	color: black;
	background-color: white;
	position:absolute;
	font-size: 24px;
	width: 24px;
	height: 24px;
	left: 5px; 
	top: 5px; 
	margin: 0px;
	padding: 5px;
	border-radius: 24px;
}

.bottomLeft {
	position:absolute; 
	left:5px; 
	bottom: 5px; 
	margin: 0px;
	padding-top: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	border-radius: 4px;
}

th.avatar,
td.avatar {
	width: 40px;
	min-width: 40px;
}

tr.categoryHead {
	border-top: 1px solid rgba(127, 127, 127, 0.5);
}

tr.categoryFooter {
	border-bottom: 1px solid rgba(127, 127, 127, 0.5);
}

input.topCategoryDivider {
	width: 100%;
	height: 25px;
	color: black;
	text-align: center;
	background-color: rgba(127, 127, 127, 0.125);
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
}

div.bottomCategoryDivider {
	height: 25px;
	color: black;
	text-align: center;
	background-color: rgba(127, 127, 127, 0.125);
	border: 1px solid black;
	border-top: none;
	border-radius: 0px 0px 10px 10px;
	margin-bottom: 2px;
}


div.valueEditor {
	padding: 2px;
	/* max-height: 38px; */
	vertical-align: top;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: max-height 0.1s ease;
	overflow-y: auto;
}

div.valueEditor:hover {
	max-height: 2000px;
	overflow: visible;
	transition: max-height 0.5s ease;
}

label.option,
span.option {
	display: inline-block;
	padding: 0px;
	margin-top: 3px;
	margin-left: 3px;
	margin-right: 0px;
	margin-bottom: 1px;
	border-radius: 4px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: border-box;
	white-space: nowrap;
	max-height: 28px;
	float: left;
	vertical-align: middle;
}

label.option span,
span.option span {
	padding: 3px;
	vertical-align: middle;
}

label.option i,
span.option i {
	vertical-align: middle;
}

label.option:hover i,
span.option:hover i {
}

input[type="text"].valueEditor {
	height: 32px;
	line-height: 32px;
	text-align: right;
	display: inline-block;
	padding: 3px;
	margin: 0px;
	border: none;
	box-sizing: border-box;
	white-space: nowrap;
}

i.material-symbols-outlined.valueEditor {
	display: inline-block;
	padding-top: 0px;
	padding-left: 3px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin: 0px;
	border-radius: 4px;
	border: none;
	box-sizing: border-box;
	white-space: nowrap;
}

input[type="text"].valueEditor:focus {
	outline: none;
}

div.selectionEditor {		
	background-image: url(/gui/img/dropdown.svg) !important;
	background-repeat: no-repeat;
	background-position-x: right;
	background-position-y: bottom;
}

div.tagEditor {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 1px;
	border-radius: 4px;
	padding: 2px;
}

span.tagEditor {
	width: 100%;
	display: flex;
	justify-content: right;
	align-items: center;
	border: none;
}

i.tagEditor {
	border: none;
}

input[type="text"].tagEditor {
	height: 32px;
	text-align: right;
	display: inline-block;
	border: none;
	box-sizing: border-box;
	white-space: nowrap;
}	

input[type="text"].tagEditor:focus {
	outline: none;
}

span.tag {
	background-color: var(--mainBackground);
	display: inline-block;
	padding-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 10px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: border-box;
	white-space: nowrap;
	display: inline-flex;
}

span.tag.selected {
	background-color: black;
	color: white;
}

span.tag i {
	padding-right: 5px;
	vertical-align: bottom;
}

span.tag span~i {
	padding-left: 5px;
	padding-right: 0px;
}

label.tag {
	display: inline-block;
	padding-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 4px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: border-box;
	white-space: nowrap;
}

label.tag.selected {
	background-color: black;
	color: white;
}

label.tag i {
	padding-right: 5px;
	vertical-align: bottom;
}

label.tag span~i {
	padding-left: 5px;
	padding-right: 0px;
}

label.group {
	display: inline-block;
	padding-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 4px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: border-box;
}

label.group.selected {
	background-color: black;
	color: white;
}

label.attribute {
	display: inline-block;
	padding-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 4px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: border-box;
}

span.attribute {
	background-color: var(--mainBackground);
	display: inline-block;
	padding-top: 3px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 3px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 4px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: border-box;
}

span.quickItem {
	display: flex;
	padding: 6px;
	margin: 1px;
	border-radius: 4px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	box-sizing: border-box;
}

span.quickItem.wide {
	width: 100%;
}

span.quickItem i.icon,
span.quickItem img.avatar,
span.quickItem img.accountAvatar,
span.quickItem img.groupAvatar  {
	width: 24px;
	float: left;
	vertical-align: bottom;
	margin-right: 5px;
}

span.quickItem span {
	display: inline-block;
	flex-grow: 2;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

div.quickChoice  {
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

div.quickChoice i.icon,
div.quickChoice img.avatar,
div.quickChoice img.accountAvatar,
div.quickChoice img.groupAvatar  {
	width: 24px;
	vertical-align: bottom;
	margin-right: 5px;
}

.wideBackground {
	background-image: inherit !important;
}

input,
.textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 5px;
	box-sizing: border-box;
}

.textarea {
	min-height: 38px;
	overflow-y: scroll;
}

.textarea:empty:before {
	content: attr(placeholder);
	display: block; /* For Firefox */
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="datetime"],
input[type="date"],
input[type="time"],
input[type="range"],
input[type="password"],
textarea,
select {
	height: 38px;
}

input.flat,
textarea.flat,
select.flat {
	font-size: 12px;
	height: 24px;
}

input[type="date"].compact {
	width: 120px;
	font-family: monospace;
}

input[type="time"].compact {
	width: 80px;
	font-family: monospace;
}

td.compact {
	font-size: 80%;
}

th.tight, td.tight {
	width: 0;
}

select.compact {
	font-size: 80%;
	width: 100px;
}

select.time {
	font-size: 80%;
}

input[type="file"] {
	width: 100%;
}

input[type="color"] {
	height: 38px;
	width: 30px;
	padding: 0px;
	box-sizing: default;
}
input[type="color"]::-webkit-color-swatch-wrapper {
	padding: 0;
	border: none;
}

input[type="number"]::after {
	content: " (" attr(units) ")";
}

input[type="datetime"],
input[type="date"],
input[type="time"] {
	font-size: 75%;
	margin: 0px;
	padding: 0px;
	width: auto;
}

input[type="month"] {
	width: 110px;
	font-size: 75%;
}

input[type="time"] {
	font-size: 75%;
}

textarea {
	resize: vertical;
}

select[multiple] {
		height: auto;
}

.ingress {
	font-weight: bolder;
}

.floatLeft {
	float: left;
	margin: 10px;
}

.floatRight {
	float: right;
	margin: 10px;
}

.left { text-align: left; }
.center { 
	text-align: center;
	vertical-align: middle;
}
.right { text-align: right; }
.fit {		
	width: 0;
	min-width: fit-content;
}

i.material-symbols-outlined {
	vertical-align: middle;
}
	
dialog {
	position: fixed;
	box-sizing: border-box;
	inset: 0;
	padding: 0px;		
	max-height: calc(100% - var(--dialogMarginTop, 0px) - var(--dialogMarginBottom, 0px));
	max-width: 100vw;
	border: none;
	border-radius: var(--dialogBorderRadius, 0px);
	overflow-x: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index: 180;
}

dialog#modalMessage section p#modalMessageText {
	margin-block: 1em;
	text-align: center;
}

div.editor {
}
	
dialog.rightDialog {
	margin-top: var(--dialogMarginTop, auto);
	margin-right: var(--dialogMarginRight, auto);
}

dialog.chatDialog {
	width: 660px;
	margin-right: 0px;
	margin-bottom: 0px;
}

dialog.topDialog {
	margin-top: var(--dialogMarginTop, auto);
}

dialog.bottomDialog {
	margin-bottom: var(--dialogMarginBottom, 0px);
}

dialog header {
	z-index: 500;
	position: sticky;
	top: 0px;
	width: 100%;
	box-sizing: border-box;
	font-weight: bold;
	line-height: 34px;
	vertical-align: middle;
	padding-left: 5px;
	clear: both;
	user-select: none;
}

dialog footer {
	z-index: 500;
	position: sticky;
	bottom: 0px;
	width: 100%;
	box-sizing: border-box;
	clear: both;
	user-select: none;
}

div.editor header {
	padding: 5px;
	position: sticky;
	bottom: 0px;
	width: 100%;
	box-sizing: border-box;
	clear: both;
	user-select: none;
}

div.editor footer {
	position: relative;
	bottom: 0px;
	box-sizing: border-box;
	clear: both;
	user-select: none;
}

dialog div.field, 
dialog label.field, 
div.editor div.field, 
div.editor label.field {
	box-sizing: border-box;
	margin: 0px;
	padding: 5px;
	min-height: 25px;
	/* clear: both; */
	break-inside: avoid-column;
}

dialog.cheetSheet {
	left: 0px;
	top: 0px;
	width: 700px;
	z-index: 1000;
}
dialog.cheetSheet p {
	padding-bottom: var(--paragraphMarginBottom);
}
dialog.cheetSheet header.sectionBanner {
	display: none;
}
dialog.cheetSheet footer.menuBanner {
	padding: 0px;
}

dialog.normal {
	width: var(--dialogNormalSizeWidth);
}

dialog.wide {
	width: var(--dialogWideSizeWidth);
}

dialog.huge {
	width: var(--dialogHugeSizeWidth);
}

dialog.widescreen {
	width: 1200px;
}

dialog.fullscreen {
	width: 100vw;
	height: 100vh;
	margin: 0px;
}

dialog.commentBox {
	width: calc(100% - var(--dialogMarginLeft, 0px) - var(--dialogMarginRight, 0px));
	margin-inline: auto;
	max-width: 600px;
}

div.searchHints {
	position: absolute;
	float: left;
	border: 1px solid rgba(127,127,127,0.5);
	max-height: 135px;
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 1000;
}

div.searchHints div {
	padding: 5px;
}

div.searchHints div:hover {
	color: white;
	background-color: #1b8ff9;
}

.sice		{ 
	width: var(--swimlaneSixWidth); 
	float: var(--swimlaneFloat);
	clear: var(--swimlaneClear);
}
.fivce	{ 
	width: var(--swimlaneFiveWidth);
	float: var(--swimlaneFloat);
	clear: var(--swimlaneClear);
}
.fource	{
	width: var(--swimlaneFourWidth);
	float: var(--swimlaneFloat);
	clear: var(--swimlaneClear);
}
.thrice	{
	width: var(--swimlaneThreeWidth);
	float: var(--swimlaneFloat);
	clear: var(--swimlaneClear);
}
.twice	{
	width: var(--swimlaneTwoWidth);
	float: var(--swimlaneFloat);
	clear: var(--swimlaneClear);
}
.once		{
	width: var(--swimlaneOneWidth);
	float: var(--swimlaneFloat);
	clear: var(--swimlaneClear);
}

.forMobile {
	display: var(--forMobile, inline-block) !important;
}
div.forMobile, p.forMobile {
	display: var(--forMobile, block) !important;
	clear: both !important;
}
tr.forMobile {
	display: var(--forMobile, table-row) !important;
}
th.forMobile, td.forMobile	{
	display: var(--forMobile, table-cell) !important;
}

.forTablet {
	display: var(--forTablet, inline-block);
}
div.forTablet, p.forTablet {
	display: var(--forTablet, block);
	clear: both;
}
tr.forTablet {
	display: var(--forDesktop, table-row);
}
th.forTablet, td.forTablet	{
	display: var(--forTablet, table-cell);
}

.forDesktop {
	display: var(--forDesktop, inline-block);
}
div.forDesktop, p.forDesktop {
	display: var(--forDesktop, block);
	clear: both;
}
tr.forDesktop {
	display: var(--forDesktop, table-row);
}
th.forDesktop, td.forDesktop {
	display: var(--forDesktop, table-cell);
}

.forWidescreen { 
	display: var(--forWidescreen, inline-block);
}
div.forWidescreen, p.forWidescreen { 
	display: var(--forWidescreen, block); 
	clear: both;
}
tr.forWidescreen {
	display: var(--forWidescreen, table-row);
}
th.forWidescreen, td.forWidescreen { 
	display: var(--forWidescreen, table-cell);
}

input:invalid:focus {
	outline: 1px solid red;
}

textarea:invalid:focus {
	outline: 1px solid red;
}

.clickable,
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	cursor: pointer;
	user-select: none;
}

.link {
	text-decoration: underline; 
}
.link span {
	text-decoration: underline; 
}

tr.unread td {
	font-weight: bold;
}

table.list tbody tr.borderless td {
	border: unset;
}

@media (min-width: 550px) {
	:not(.editorContainer.mobileScreen) article.copy {
	}

	:not(.editorContainer.mobileScreen) div.list {
		max-height: 300px;
		overflow-y: auto;
	}
}

button:disabled, 
input[type='button']:disabled, 
input[type='time']:disabled {
	cursor: not-allowed;
	color: rgba(127,127,127,0.5);
	background-color: rgba(127,127,127,0.5);
}

.item {
	box-sizing: border-box;
}

.gridContent,
.flexContent {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: var(--grid-gap, 15px);
	width: 100%;
}

.gridContent.reverse,
.flexContent.reverse {
	flex-direction: column-reverse;
}

.contentColumn {
	width: 100%;
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	box-sizing: border-box;
	column-gap: 15px;
	row-gap: 0px;
}

.contentTabs {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sectionContent:hover {
	outline: 2px dotted rgba(127, 127, 127, 0.5);
}
.boxContent:hover {
	outline: 2px dashed rgba(127, 127, 127, 0.5);
}
.tabContent:hover {
	outline: 2px dashed rgba(127, 127, 127, 0.5);
}
.columnContent:hover {
	outline: 2px solid rgba(127, 127, 127, 0.5);
}

.tabPanels {
	border: 2px solid var(--bannerBorder);
	flex: 2;
}

@media (min-width: 550px) {
	:not(.editorContainer.mobileScreen) .flexContent, 
	:not(.editorContainer.mobileScreen) .flexContent.reverse {
		flex-direction: row;
		flex-wrap: wrap;
	}
	:not(.editorContainer.mobileScreen) .gridContent, 
	:not(.editorContainer.mobileScreen) .gridContent.reverse {
		display: inline-grid;
		grid-auto-flow: row;
	}
	:not(.editorContainer.mobileScreen) .flexContent .contentColumn {
		width: calc(max(var(--column-width, 100%), 50%) - var(--grid-gap, 15px));
		/* max-width: max(var(--column-width, 100%), 50%); */
	}
}

@media (min-width: 1000px) {
	:not(.editorContainer.mobileScreen) .flexContent, 
	:not(.editorContainer.mobileScreen) .flexContent.reverse {
		flex-direction: row;
		flex-wrap: wrap;
	}
	:not(.editorContainer.mobileScreen) .gridContent, 
	:not(.editorContainer.mobileScreen) .gridContent.reverse {
		display: inline-grid;
		grid-auto-flow: row;
	}
	:not(.editorContainer.mobileScreen) .flexContent .contentColumn {
		width: calc(var(--column-width, 100%) - var(--grid-gap, 15px));
		max-width: var(--column-width, 100%);
	}
}

@media (max-width: 550px) {
	.contentColumn:empty {
		display: none;
	}
	.shiftUp {
		vertical-align: top;
	}
	.shiftDown {
		vertical-align: bottom;
	}
}

.mobileScreen .flexContent,
.mobileScreen .gridContent {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: var(--grid-gap, 15px);
	box-sizing: border-box;
	padding: 10px;
}
.mobileScreen .flexContent.reverse,
.mobileScreen .gridContent.reverse {
	flex-direction: column-reverse;
}

.mobileScreen .contentColumn {
	width: 100%;
	box-sizing: border-box;
	flex-grow: 1;
	flex-shrink: 1;
}

.mobileScreen .flexContent,
.mobileScreen .gridContent {
	gap: 0px;
}
.mobileScreen .contentColumn:empty {
	display: none;
}

@media print {
	#verticalScroller {
		margin-top: 0px;
	}
	.container {
		padding: 10px;
	}
	article.fullWidth .container {
		padding: 10px;
	}
	footer.page {
		display: none;
	}
}

.columnDocument {
	max-width: 100vw;
	display: grid;
	grid-auto-rows: 1fr;
	grid-template-columns: auto var(--pageContainerSlimSizeWidth) 0px auto;
	min-height: calc(100vh - var(--pageHeaderSizeHeight));
}

.middleColumnDocumentContainer {
	max-width: 100vw;
	box-sizing: border-box;
	padding: var(--pageContainerSlimPadding);
}

.middleColumnDocumentContainer .container {
	max-width: var(--pageContainerSlimSizeWidth);
	margin: 0px;
	padding: 0px;
}

.asideColumnDocumentContainer {
	z-index: 174;
	padding: 10px;
}

.asideColumnDocumentContainer #inlineFilterSection {
	position: fixed;
	width: calc(100% - var(--scrollbarSizeWidth));
	max-height: 100%;
	max-width: 600px;
	top: 0;
	margin-left: var(--scrollbarSizeWidth);
	right: 0;

	
	border-radius: var(--dialogBorderRadius, 0px);
	overflow-x: hidden;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	z-index: 180;
}

@media (min-width: 1777px) {
	.columnDocument {
		grid-template-columns: auto calc(0.75 * var(--pageContainerSlimSizeWidth)) calc(0.25 * var(--pageContainerSlimSizeWidth)) auto;
		padding: var(--pageContainerSlimPadding);
	}
	.middleColumnDocumentContainer {
		padding: unset;
	}
	.asideColumnDocumentContainer #inlineFilterSection {
		position: sticky;
		width: calc(100% - var(--scrollbarSizeWidth));
		max-height: 100%;
		max-width: 600px;
		top: 0;
		margin-left: var(--scrollbarSizeWidth);
		right: unset;
	}
	.asideColumnDocumentContainer #inlineFilterSection footer {
		display: none;
	}
	.asideColumnDocumentContainer #inlineFilterSection header {
		display: none;
	}
}

.disabled {
	color: rgba(127, 127, 127, 0.75);
}

.enabled .disabled {
	color: var(--mainText);
}

.columns-auto-fill {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.columns-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 549px) {
	.mobile-columns-auto-fill {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	.mobile-columns-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.mobile-columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mobile-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.mobile-columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.mobile-columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.mobile-columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.mobile-columns-3,
.mobile-columns-2 {
	display: inline-grid;
	grid-auto-flow: row;
}

.editorContainer.mobileScreen .mobile-columns-auto-fill {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.editorContainer.mobileScreen .mobile-columns-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.editorContainer.mobileScreen .mobile-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editorContainer.mobileScreen .mobile-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editorContainer.mobileScreen .mobile-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.editorContainer.mobileScreen .mobile-columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.editorContainer.mobileScreen .mobile-columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 550px) {
	.gridContent,
	.flexContent {
		gap: 10px !important;
	}
	.gridScroll {
		gap: 10px !important;
	}
	.verticalScroll {
		gap: 5px !important;
	}
	.item {
		padding-inline: 5px !important;
		padding-block: 5px !important;
	}
	.contentColumn {
		padding: 0px !important;
		height: auto !important;
	}
	.section {
		padding-inline: 5px !important;
		padding-block: 0px !important;
	}
	.buttonGroupButton button.text-icons span {
		display: none;
	}
}

@media (min-width: 550px) and (max-width: 1024px) {
	.tablet-columns-auto-fill {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	.tablet-columns-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.tablet-columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tablet-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tablet-columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.tablet-columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.tablet-columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.editorContainer.tabletScreen .tablet-columns-auto-fill {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.editorContainer.tabletScreen .tablet-columns-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.editorContainer.tabletScreen .tablet-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editorContainer.tabletScreen .tablet-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.editorContainer.tabletScreen .tablet-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.editorContainer.tabletScreen .tablet-columns-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.editorContainer.tabletScreen .tablet-columns-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

div.editor.inlineEditorContainer {
	color: unset;
	background-color: unset;
}

@media (min-width: 1025px) and (max-width: 1500px) {
	.computer-columns-auto-fill {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	.computer-columns-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.computer-columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.computer-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.computer-columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.computer-columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.computer-columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (min-width: 1500px) {
	.widescreen-columns-auto-fill {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}

	.widescreen-columns-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.widescreen-columns-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.widescreen-columns-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.widescreen-columns-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.widescreen-columns-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.widescreen-columns-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

::view-transition-old(root) {
	animation-delay: 250ms;
	animation-duration: 250ms;
	animation-timing-function: ease-out;
}
::view-transition-new(root) {
	animation-delay: 250ms;
	animation-duration: 250ms;
	animation-timing-function: ease-in;
}
.swatch {
	display: inline-block;
	border: 1px solid black;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 20px;
	vertical-align: middle;
	text-align: center;
	font-size: 80%;
}

/* deprecated */
.accordion form {
	display: none;
}

form.accordion, div.accordion {
	display: none;
}

.count_widgets {
	position: absolute;
	
	left: 0px;
	bottom: -2px;
	
	padding: 0px;
	margin: 0px;
	
	display: var(--profileCountersDisplay, none);
	flex-direction: row;
}

.headerCap {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.footerCap {
	width: 100%;
	text-align: right;
}

.viewMore {
	float: right;
	margin-right: 10px;
}

#resourcePicture {
	margin: var(--resourcePictureMargin, 0px);
}

#resourceDateInformation {
	width: 100%;
}

#resourceImportantSection {
	margin-top: 10px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 100%;
	gap: 10px;
}

@media screen and (min-width: 550px) {
	:not(.editorContainer.mobileScreen) #resourceImportantSection {
		flex-direction: column;
		margin-left: auto;
		margin-right: auto;
	}
}

#costToUse {
}
#costToUse:empty {
	display: none;
}
#costToBuy {
}
#costToBuy:empty {
	display: none;
}
#paymentMethod {
}
#paymentMethod:empty {
	display: none;
}

#resourceAttributeButtons {
	width: 100%;
	max-width: 100%;
	text-align: center;
}

#resourceImportantSection button {
	width: 200px;
	max-width: calc(100% - 30px);
	margin-bottom: 10px;
}

#resourceImportantSection button + button {
}

#resourceTags {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

#resourceTags button {
	max-width: fit-content;
}
#resourceTags:empty {
	display: none;
}

#mapGizmo {
	width: 100%;
}

#mapButton {
	clear:both;
	display:none;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
}

#mapAdress {
	display: var(--mapAdressDisplay, block);
}

go-counter {
	padding: 2px 16px 0px 16px;
	margin: 0px 8px;
	background-color: var(--mainBackground, white);
	color: var(--mainText, black);
	border-radius: 12px 12px 0px 0px;
	white-space: nowrap;
	vertical-align: middle;
	align-items: center;
	justify-content: center;	
	font-style: normal;
	font-size: 24px;
	line-height: 48px;
}

go-counter::part(icon) {
	font-family: 'Material Symbols Outlined';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24
}

.newsItem {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

ul.themeList table td {
	border: 1px solid black;
}

table.themeEditor { 
	border-collapse: collapse;
	width: auto;
}
table.themeEditor td {
	padding: 2px; 
}
table.themeEditor td + td {
	border-left: 1px solid black;
}
table.themeEditor.sameNavigationValue tr:nth-child(2){
	display: none;
} 
table.themeEditor.sameNavigationValue td:nth-child(3),
table.themeEditor.sameNavigationValue td:nth-child(4) {
	display: none;
}

#navigationToggle,
#toolbarToggle,
#noNavigationToggle {
	text-align: center;
}

col.navigationFilter,
col.toolbarFilter,
col.noNavigationFilter {
	border: 1px solid black;
}

ul.STANDARDFilter div.STANDARDFilter,
ul.navigationFilter td:nth-of-type(2),
ul.toolbarFilter td:nth-of-type(3),
ul.noNavigationFilter td:nth-of-type(4),
ul.WIDESCREENFilter tr.WIDESCREENFilter,
ul.DESKTOPFilter tr.DESKTOPFilter,
ul.TABLETFilter tr.TABLETFilter,
ul.MOBILEFilter tr.MOBILEFilter {
	display: none;
}

.mapWidget {
	display: block !important;
	height: 400px !important;
}

.chartWidget {
	margin: 5px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	border-radius: 3px;
	border: 1px solid rgba(127, 127, 127, 0.4);
	min-height: 34px;
	margin-top: 10px;
}

.resourcePhoto {
	border-radius: 5px 5px 0px 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: var(--resourceInfoSizeHeight);
	background-color: lightgrey;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.resourcePhoto.material-symbols-outlined {
	color: rgba(127,127,127,0.5);
	font-size: calc(var(--chessSquareSizeHeight) - var(--resourceInfoSizeHeight));
	vertical-align: middle;
	text-align: center;
}

.favoriteResourceIcon {
	border-radius: 25px 25px 25px 25px;
	color: rgba(127,127,127,0.5);
	background-color: white;
	position: absolute;
	width: 24px;
	height: 24px;
	right: 5px;
	top: 5px;
	margin: 0px;
	padding: 5px;
	border-radius: 24px;
}

.resourceListWidget h1 { padding-top: var(--h1MarginBottom); padding-bottom: var(--h1MarginTop); }
.resourceListWidget h2 { padding-top: var(--h2MarginBottom); padding-bottom: var(--h2MarginTop); }
.resourceListWidget h3 { padding-top: var(--h3MarginBottom); padding-bottom: var(--h3MarginTop); }
.resourceListWidget h4 { padding-top: var(--h4MarginBottom); padding-bottom: var(--h4MarginTop); }
.resourceListWidget h5 { padding-top: var(--h5MarginBottom); padding-bottom: var(--h5MarginTop); }

.resourceListEditor h1 { padding-top: var(--h1MarginBottom); padding-bottom: var(--h1MarginTop); }
.resourceListEditor h2 { padding-top: var(--h2MarginBottom); padding-bottom: var(--h2MarginTop); }
.resourceListEditor h3 { padding-top: var(--h3MarginBottom); padding-bottom: var(--h3MarginTop); }
.resourceListEditor h4 { padding-top: var(--h4MarginBottom); padding-bottom: var(--h4MarginTop); }
.resourceListEditor h5 { padding-top: var(--h5MarginBottom); padding-bottom: var(--h5MarginTop); }

.groupListWidget h1 { padding-top: var(--h1MarginBottom); padding-bottom: var(--h1MarginTop); }
.groupListWidget h2 { padding-top: var(--h2MarginBottom); padding-bottom: var(--h2MarginTop); }
.groupListWidget h3 { padding-top: var(--h3MarginBottom); padding-bottom: var(--h3MarginTop); }
.groupListWidget h4 { padding-top: var(--h4MarginBottom); padding-bottom: var(--h4MarginTop); }
.groupListWidget h5 { padding-top: var(--h5MarginBottom); padding-bottom: var(--h5MarginTop); }

.accountListWidget h1 { padding-top: var(--h1MarginBottom); padding-bottom: var(--h1MarginTop); }
.accountListWidget h2 { padding-top: var(--h2MarginBottom); padding-bottom: var(--h2MarginTop); }
.accountListWidget h3 { padding-top: var(--h3MarginBottom); padding-bottom: var(--h3MarginTop); }
.accountListWidget h4 { padding-top: var(--h4MarginBottom); padding-bottom: var(--h4MarginTop); }
.accountListWidget h5 { padding-top: var(--h5MarginBottom); padding-bottom: var(--h5MarginTop); }

.bookmarkListWidget h1 { padding-top: var(--h1MarginBottom); padding-bottom: var(--h1MarginTop); }
.bookmarkListWidget h2 { padding-top: var(--h2MarginBottom); padding-bottom: var(--h2MarginTop); }
.bookmarkListWidget h3 { padding-top: var(--h3MarginBottom); padding-bottom: var(--h3MarginTop); }
.bookmarkListWidget h4 { padding-top: var(--h4MarginBottom); padding-bottom: var(--h4MarginTop); }
.bookmarkListWidget h5 { padding-top: var(--h5MarginBottom); padding-bottom: var(--h5MarginTop); }

.favoriteListWidget h1 { padding-top: var(--h1MarginBottom); padding-bottom: var(--h1MarginTop); }
.favoriteListWidget h2 { padding-top: var(--h2MarginBottom); padding-bottom: var(--h2MarginTop); }
.favoriteListWidget h3 { padding-top: var(--h3MarginBottom); padding-bottom: var(--h3MarginTop); }
.favoriteListWidget h4 { padding-top: var(--h4MarginBottom); padding-bottom: var(--h4MarginTop); }
.favoriteListWidget h5 { padding-top: var(--h5MarginBottom); padding-bottom: var(--h5MarginTop); }

.resourceInfo {
	position: absolute;
	height: var(--resourceInfoSizeHeight);
	left: 0px;
	right: 0px;
	bottom: 0px;
	text-align: left;
	color: black;
}

.resourceInfo h4 {
	margin: 0px 50px 0px 0px;
	padding: 0px 5px 0px 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.resourceInfo p {
	margin: 0px;
	padding: 0px 5px 0px 5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

figure.avatar.resourceAvatar {
	margin: 0px;
}

figure.avatar.resourceAvatar img.avatar {
	width: var(--resourceAvatarSizeWidth); 
	position: absolute; 
	right: 10px; 
	bottom: calc(var(--resourceInfoSizeHeight) - (var(--resourceAvatarSizeWidth) / 2)); 
	margin: 0px;
	padding: 2px;
}

figure.accountAvatar.resourceAvatar {
	margin: 0px;
}

figure.accountAvatar.resourceAvatar img.accountAvatar {
	width: var(--resourceAvatarSizeWidth); 
	position: absolute; 
	right: 10px; 
	bottom: calc(var(--resourceInfoSizeHeight) - (var(--resourceAvatarSizeWidth) / 2)); 
	margin: 0px;
	padding: 2px;
}

#kanbanSelect {
	max-width: 170px;
}

.task .footerX {
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.1s ease;
}

.task:hover .footerX {
	max-height: 100px;
	transition: max-height 0.5s ease;
}

.task .more {
	overflow: hidden;
	max-height: 0px;
	transition: max-height 0.5s ease;
}

.task:focus .more {
	max-height: 1000px;
}

.task .moreVisible {
	max-height: 1000px;
	transition: max-height 0.5s ease;
}

#employeeSelect {
	max-width: 170px;
}

.compactQueue {
	column-count: var(--kanbanHistoryColumnCount);
}

#themeList .collapsible, #themeList .editable {
	background-color: #B0C4DE;
	color: white;
	cursor: pointer;
	padding: 18px;
	margin: 10px;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
}

#themeList .editable {
	background-color: #708090;
	padding: 10px;
	font-size: 15px;
}

#themeList .collapsible:hover {
	background-color: #2E8B57;
}

#themeList .active {
	background-color: #4682B4 !important;
}

#themeList .active-hover{
	background-color: #B22222 !important;
}

#themeList .content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: #f1f1f1;
}

#profileAvatarImage {
	box-sizing: border-box;
	border-radius: var(--avatarRadius);
	width: var(--avatarSize);
	height: var(--avatarSize);
	margin: var(--avatarMargin);
	vertical-align: middle;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
}

#profileAvatarImage.representative {
	border-radius: 5px;
}

#profileAvatarIcon {
	position: relative;
	x: -64px;
}

.profileAvatar img {
	box-sizing: border-box;
	border-radius: 75%;
	width: var(--avatarSize);
	height: var(--avatarSize);
	margin: var(--avatarMargin);
	vertical-align: middle;
	background-color: white;
	background-position: center center;
	background-repeat: no-repeat;
	object-fit: cover;
	object-position: center;
}

.profileAvatar img {
	width: 32px;
	height: 32px;
	margin: 3px;
	border-radius: var(--avatarRadius);
	transition: top 0.5s ease, right 0.5s ease;
	vertical-align: middle;
}

:root {
	--profilePhotoHeight: 150px;
}
@media (min-width: 700px) {
	:root {
		--profilePhotoHeight: 200px;
	}
}
@media (min-width: 1000px) {
	:root {
		--profilePhotoHeight: 248px;
	}
}


#editAvatarImage {
	max-width: calc(var(--profilePhotoHeight) - 20px);
	max-height: calc(var(--profilePhotoHeight) - 20px);
}

.profilePhoto { 
	position: relative;
	min-height: var(--profilePhotoHeight);
	border-radius: 0px 0px 30px 30px;
	background-position: center top;
	transition: all 0.5s;
}
.editAvatarImage {
	position: absolute;
	left: calc(50% - ((var(--profilePhotoHeight) - 20px) / 2));
	margin: auto;
	top: 10px;
	transition: all 0.5s;
}

.accountPhoto { 
	position: relative;
	min-height: var(--profilePhotoHeight);
	border-radius: 0px 0px 30px 0px;
	background-position: center top;
	transition: all 0.5s;
}
.editAccountImage {
	width: 100%;
}

#navigation.ontop #closeMenu { 
	display: var(--closeMenuDisplay); 
}

/*
	#bookmarkButton {
		position: absolute;
		top: 5px;
		right: 10px;
		z-index: 101;
	}
	
	#shareBookmarkButton {
		position: absolute;
		top: 5px;
		right: 137px;
		z-index: 101;
	}
	
	#editPageShortcut {
		position: absolute;
		top: 5px;
		right: 200px;
		z-index: 101;
	}
*/

#returnToTop {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 20px;
	z-index: 101;
	font-size: 18px;
	border: none;
	outline: none;
	cursor: pointer;
	border-radius: 4px;
}

#resourceAttributes {
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#resourceAttributes.split {
	column-width: 200px;
	column-gap: 10px;
}

#resourceAttributes.split button {
	margin-right: 10px;
	margin-bottom: 10px;
}

#resourceAttributes.split div {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

#resourceAttributes.split div label {
	font-weight: bold;
}

#resourceAttributes.split div label.attribute {
	font-weight: normal;
}

#resourceAttributeButtons {
	margin-block: 5px;
}

#resourceAttributeButtons div label {
	font-weight: bold;
}

#resourceAttributeContact {
	margin-block: 5px;
}

#resourceAttributeContact a {
	text-decoration: none;
}

#resourceAttributeContact.split {
	column-width: 170px;
	column-gap: 0px;
}

#resourceAttributeContact.split div {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

#resourceAttributeContact div label {
	font-weight: bold;
}

.hoverScale {
	transition: transform 0.25s linear;
}
.hoverScale:hover{
	transform: scale(1.03);
}

.loginForm {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

input.search {
	line-height: 34px;
	font-size: 0.8em;
	vertical-align: middle;
	box-sizing: border-box;
	border-radius: 4px;
	box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.5);
	background-image: url(/gui/img/search.svg) !important;
	background-repeat: no-repeat;
	background-position: 4px 6px;
	padding-left: 30px;
}

input.uniqueKey {
	background-image: url(/gui/img/key.svg) !important;
	background-repeat: no-repeat;
	background-position: 4px 6px;
	padding-left: 30px;
}

.floatingCircles {
	position: fixed;
	top: var(--floatingCirclePositionTop);
	left: var(--floatingCirclePositionLeft);
	bottom: var(--floatingCirclePositionBottom, 10px);
	right: var(--floatingCirclePositionRight, 32px);
	z-index: 101;
	display: flex;
	gap: var(--floatingCircleGap, 10px);
	flex-direction: column;
}

button.floatingCircle {
	text-align: left;
	height: var(--floatingCircleHeight, 50px);
	padding: 0;
	padding-left: 10px;
	border-radius: var(--floatingCircleRadius, 50px);
	box-shadow: var(--floatingCircleShadow);
	border: 1px solid rgba(127, 127, 127, 0.5);
}

button.floatingCircle i {
	display: var(--floatingCircleIconDisplay, inline-block);
	vertical-align: middle;
	line-height: 30px;
	padding: 0;
	margin: 10px;
	margin-left: 0px;
}

button.floatingCircle span {
	display: var(--floatingCircleCaptionDisplay, inline-block);
	vertical-align: middle;
	line-height: 30px;
	padding: 0;
	margin: 10px;
	margin-left: 0px;
	margin-right: 15px;
}

button.mini { /* Calender next/previous buttons */
	width: 30px;
	min-width: 30px;
	height: 30px;
}

span#dayButton { padding: 0; }
span#weekButton { padding: 0; }
span#monthButton { padding: 0; }
span#quarterButton { padding: 0; }
span#halfYearButton { padding: 0; }
span#yearButton { padding: 0; }

span#dayButton:empty { display: inline-block; }
span#threeDaysButton:empty { display: inline-block; }
span#fiveDaysButton:empty { display: inline-block; }
span#sevenDaysButton:empty { display: inline-block; }
span#weekButton:empty { display: inline-block; }
span#fourteenDaysButton:empty { display: inline-block; }
span#thirtyDaysButton:empty { display: inline-block; }
span#monthButton:empty { display: inline-block; }
span#quarterButton:empty { display: inline-block; }
span#halfYearButton:empty { display: inline-block; }
span#yearButton:empty { display: inline-block; }

span#dayButton:after { content: '1 d'; }
span#threeDaysButton:after { content: '3 d'; }
span#fiveDaysButton:after { content: '5 d'; }
span#sevenDaysButton:after { content: '7 d'; }
span#weekButton:after { content: 'V'; }
span#fourteenDaysButton:after { content: '14 d'; }
span#thirtyDaysButton:after { content: '30 d'; }
span#monthButton:after { content: 'M'; }
span#quarterButton:after { content: 'Q'; }
span#halfYearButton:after { content: '1/2 år'; }
span#yearButton:after { content: 'År'; }

@media (min-width: 750px) {
	:not(.editorContainer.mobileScreen) span#dayButton:after { content: '1 dag'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#threeDaysButton:after { content: '3 dagar'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#fiveDaysButton:after { content: '5 dagar'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#sevenDaysButton:after { content: '7 dagar'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#weekButton:after { content: 'Vecka'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#fourteenDaysButton:after { content: '14 dagar'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#thirtyDaysButton:after { content: '30 dagar'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#monthButton:after { content: 'Månad'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#quarterButton:after { content: 'Kvartal'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#halfYearButton:after { content: 'Halvår'; display: inline-block; min-width: 55px; }
	:not(.editorContainer.mobileScreen) span#yearButton:after { content: 'År'; display: inline-block; min-width: 55px; }
}

th.monCaption:empty { display: table-cell; }
th.tueCaption:empty { display: table-cell; }
th.wedCaption:empty { display: table-cell; }
th.thuCaption:empty { display: table-cell; }
th.friCaption:empty { display: table-cell; }
th.satCaption:empty { display: table-cell; }
th.sunCaption:empty { display: table-cell; }

th.monCaption:after { content: var(--mondayLetter); }
th.tueCaption:after { content: var(--tuesdayLetter); }
th.wedCaption:after { content: var(--wednesdayLetter); }
th.thuCaption:after { content: var(--thursdayLetter); }
th.friCaption:after { content: var(--fridayLetter); }
th.satCaption:after { content: var(--saturdayLetter); }
th.sunCaption:after { content: var(--sundayLetter); }

th.satCaption { color: red }
th.sunCaption { color: red }

@media (min-width: 550px) and (max-width: 1000px) {
	:not(.editorContainer.mobileScreen) th.monCaption:after { content: var(--mondayAbbreviation); }
	:not(.editorContainer.mobileScreen) th.tueCaption:after { content: var(--tuesdayAbbreviation); }
	:not(.editorContainer.mobileScreen) th.wedCaption:after { content: var(--wednesdayAbbreviation); }
	:not(.editorContainer.mobileScreen) th.thuCaption:after { content: var(--thursdayAbbreviation); }
	:not(.editorContainer.mobileScreen) th.friCaption:after { content: var(--fridayAbbreviation); }
	:not(.editorContainer.mobileScreen) th.satCaption:after { content: var(--saturdayAbbreviation); }
	:not(.editorContainer.mobileScreen) th.sunCaption:after { content: var(--sundayAbbreviation); }
}

@media (min-width: 1000px) {	
	:not(.editorContainer.mobileScreen) th.monCaption:after { content: var(--mondayCaption); }
	:not(.editorContainer.mobileScreen) th.tueCaption:after { content: var(--tuesdayCaption); }
	:not(.editorContainer.mobileScreen) th.wedCaption:after { content: var(--wednesdayCaption); }
	:not(.editorContainer.mobileScreen) th.thuCaption:after { content: var(--thursdayCaption); }
	:not(.editorContainer.mobileScreen) th.friCaption:after { content: var(--fridayCaption); }
	:not(.editorContainer.mobileScreen) th.satCaption:after { content: var(--saturdayCaption); }
	:not(.editorContainer.mobileScreen) th.sunCaption:after { content: var(--sundayCaption); }
}

td.morningCaption:empty { display: table-cell; }
td.afternoonCaption:empty { display: table-cell; }
td.eveningCaption:empty { display: table-cell; }
td.nightCaption:empty { display: table-cell; }

td.morningCaption:after { content: var(--morningAbbreviation); }
td.afternoonCaption:after { content: var(--afternoonAbbreviation); }
td.eveningCaption:after { content: var(--eveningAbbreviation); }
td.nightCaption:after { content: var(--nightAbbreviation); }

@media (min-width: 750px) {
	:not(.editorContainer.mobileScreen) td.morningCaption:after { content: var(--morningCaption); }
	:not(.editorContainer.mobileScreen) td.afternoonCaption:after { content: var(--afternoonCaption); }
	:not(.editorContainer.mobileScreen) td.eveningCaption:after { content: var(--eveningCaption); }
	:not(.editorContainer.mobileScreen) td.nightCaption:after { content: var(--nightCaption); }
}

td.janCaption:empty { display: table-cell; }
td.febCaption:empty { display: table-cell; }
td.marCaption:empty { display: table-cell; }
td.aprCaption:empty { display: table-cell; }
td.mayCaption:empty { display: table-cell; }
td.junCaption:empty { display: table-cell; }
td.julCaption:empty { display: table-cell; }
td.augCaption:empty { display: table-cell; }
td.sepCaption:empty { display: table-cell; }
td.octCaption:empty { display: table-cell; }
td.novCaption:empty { display: table-cell; }
td.decCaption:empty { display: table-cell; }

td.janCaption:after { content: var(--januaryLetter); }
td.febCaption:after { content: var(--februaryLetter); }
td.marCaption:after { content: var(--marsLetter); }
td.aprCaption:after { content: var(--aprilLetter); }
td.mayCaption:after { content: var(--mayLetter); }
td.junCaption:after { content: var(--juneLetter); }
td.julCaption:after { content: var(--julyLetter); }
td.augCaption:after { content: var(--augustLetter); }
td.sepCaption:after { content: var(--septemberLetter); }
td.octCaption:after { content: var(--octoberLetter); }
td.novCaption:after { content: var(--novemberLetter); }
td.decCaption:after { content: var(--decemberLetter); }

th.q1Caption:empty { display: table-cell; }
th.q2Caption:empty { display: table-cell; }
th.q3Caption:empty { display: table-cell; }
th.q4Caption:empty { display: table-cell; }

th.q1Caption:after { content: var(--quarter1Abbreviation); }
th.q2Caption:after { content: var(--quarter2Abbreviation); }
th.q3Caption:after { content: var(--quarter3Abbreviation); }
th.q4Caption:after { content: var(--quarter4Abbreviation); }

@media (min-width: 550px) and (max-width: 1000px) {
	:not(.editorContainer.mobileScreen) td.janCaption:after { content: var(--januaryAbbreviation); }
	:not(.editorContainer.mobileScreen) td.febCaption:after { content: var(--februaryAbbreviation); }
	:not(.editorContainer.mobileScreen) td.marCaption:after { content: var(--marsAbbreviation); }
	:not(.editorContainer.mobileScreen) td.aprCaption:after { content: var(--aprilAbbreviation); }
	:not(.editorContainer.mobileScreen) td.mayCaption:after { content: var(--mayAbbreviation); }
	:not(.editorContainer.mobileScreen) td.junCaption:after { content: var(--juneAbbreviation); }
	:not(.editorContainer.mobileScreen) td.julCaption:after { content: var(--julyAbbreviation); }
	:not(.editorContainer.mobileScreen) td.augCaption:after { content: var(--augustAbbreviation); }
	:not(.editorContainer.mobileScreen) td.sepCaption:after { content: var(--septemberAbbreviation); }
	:not(.editorContainer.mobileScreen) td.octCaption:after { content: var(--octoberAbbreviation); }
	:not(.editorContainer.mobileScreen) td.novCaption:after { content: var(--novemberAbbreviation); }
	:not(.editorContainer.mobileScreen) td.decCaption:after { content: var(--decemberAbbreviation); }
}

@media (min-width: 1000px) {	
	:not(.editorContainer.mobileScreen) td.janCaption:after { content: var(--januaryCaption); }
	:not(.editorContainer.mobileScreen) td.febCaption:after { content: var(--februaryCaption); }
	:not(.editorContainer.mobileScreen) td.marCaption:after { content: var(--marsCaption); }
	:not(.editorContainer.mobileScreen) td.aprCaption:after { content: var(--aprilCaption); }
	:not(.editorContainer.mobileScreen) td.mayCaption:after { content: var(--mayCaption); }
	:not(.editorContainer.mobileScreen) td.junCaption:after { content: var(--juneCaption); }
	:not(.editorContainer.mobileScreen) td.julCaption:after { content: var(--julyCaption); }
	:not(.editorContainer.mobileScreen) td.augCaption:after { content: var(--augustCaption); }
	:not(.editorContainer.mobileScreen) td.sepCaption:after { content: var(--septemberCaption); }
	:not(.editorContainer.mobileScreen) td.octCaption:after { content: var(--octoberCaption); }
	:not(.editorContainer.mobileScreen) td.novCaption:after { content: var(--novemberCaption); }
	:not(.editorContainer.mobileScreen) td.decCaption:after { content: var(--decemberCaption); }

	:not(.editorContainer.mobileScreen) th.q1Caption:after { content: var(--quarter1Caption); }
	:not(.editorContainer.mobileScreen) th.q2Caption:after { content: var(--quarter2Caption); }
	:not(.editorContainer.mobileScreen) th.q3Caption:after { content: var(--quarter3Caption); }
	:not(.editorContainer.mobileScreen) th.q4Caption:after { content: var(--quarter4Caption); }
}

.tooLate {
	background-image: linear-gradient(#5b5b5b, #727272);
	color: white;
}
.urgent {
	background-image: linear-gradient(#cd2870, #ec3423);
	color: white;
}
.lax {
	background-image: linear-gradient(#0078b7, #00a39f);
	color: white;
}
.lax::hover, .urgent::hover, .tooLate::hover {
	color: white;
}

.codeField {
	text-align: center !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
	max-width: 25px;
	margin: 1px;
}

#chatScroll {
	min-height: 200px;
	max-height: 50vh;
	width: 100%;
	box-sizing: border-box;
	padding: 0px 20px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: var(--chatBackground);
}

#chatMessages {
	bottom: 130px;
	clear: both;
}

#chatMessage {
	padding: 5px 10px 5px 10px;
	height: 2em;
	width: 100%;
	display: inline-block;
}

.systemMessage {
	background-color: red;
	color: white;
	text-align: center;
}

footer#chatForm {
	position: fixed;
	bottom: 0px;
	height: 120px;
}

.systemChat {
	margin: 2px;
	padding: 2px;
	text-align: center;
	vertical-align:middle;
}

.systemChat i {
	display: inline-block;
	vertical-align: middle;
}

.systemChat span {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
}

.theirChat {
	float: left;
	display: inline-block;
	margin: 2px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	border-radius: 15px 5px 5px 0px;
	padding: 2px 6px 2px 2px;
	background: white;
	color: black;
	max-width: calc(100% - 40px);
	min-width: 40px;
}

.theirChat a {
	overflow-wrap: break-word;
}

.yourChat {
	float: right;
	display: inline-block;
	margin: 2px;
	border: 1px solid rgba(127, 127, 127, 0.5);
	border-radius: 5px 15px 0px 5px;
	padding: 2px 2px 2px 6px;
	background: Gainsboro;
	color: black;
	max-width: calc(100% - 40px);
	min-width: 40px;
}

.yourChat a {
	overflow-wrap: break-word;
}

img.them {
	float: left;
	margin: 2px;
	margin-right: 5px;
	width: 20px;
	height: 20px;
	border-radius: 13px;
}

div.them {
	float: right;
	display: inline-block;
	max-width: calc(100% - 27px);
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

#bookingState div.them {
	float: none;
}

img.you {
	float: right;
	margin: 2px;
	margin-left: 5px;
	width: 20px;
	height: 20px;
	border-radius:	13px;
}

div.you {
	float: left;
	display: inline-block;
	max-width: calc(100% - 27px);
	overflow-wrap: break-word;
	white-space: pre-wrap;
}

#bookingState div.you {
	float: none;
}

img.system {
	float: right;
	margin: 2px;
	margin-left: 5px;
	width: 20px;
	height: 20px;
	border-radius:	13px;
}

div.system {
	float: right;
	display: inline-block;
	max-width: 100%;
	overflow-wrap: break-word;
}

td.calendarTimelineCompact {
	position: relative;
	height: 18px;
	white-space: nowrap;
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

td.calendarTimeline {
	position: relative;
	white-space: nowrap;
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

th.calendarTimelineCompact {
	position: relative;
	height: 18px;
	white-space: nowrap;
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

th.calendarTimeline {
	position: relative;
	white-space: nowrap;
	padding-left: 0px !important;
	padding-right: 0px !important;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

td.indent {
	border: none !important;
}

div.timelinePeriodCompact {
	position: absolute;
	box-sizing: border-box;
	display: inline-block;
	top: 0px;
	height: 18px;
	background-color: rgba(127, 127, 127, 0.4);
	border-radius: 8px;
}

div.timelinePeriodCompressed {
	position: absolute;
	box-sizing: border-box;
	display: inline-block;
	top: 8px;
	height: 30px;
	background-color: rgba(127, 127, 127, 0.4);
	border-radius: 8px;
}

div.timelinePeriod {
	position: absolute;
	box-sizing: border-box;
	display: inline-block;
	top: 8px;
	height: 30px;
	background-color: lightgray;
	border-radius: 8px;
}

div.leftTimelinePeriodCaption {
	display: none;
	position: relative;
	float: right;
	margin-right: calc(100% + 10px);
	box-sizing: border-box;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
}

div.centerTimelinePeriodCaption {
	display: none;
	box-sizing: border-box;
	text-align: center;
	margin-inline: 5px;
	color: var(--mainBackground);
	width: 100%;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
}

div.rightTimelinePeriodCaption {
	display: none;
	position: relative;
	left: 100%;
	margin-left: 10px;
	box-sizing: border-box;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
}

tr.ifMoreThan8:not(:has(> :nth-child(8))) {
	display: table-row;
}

@media (min-width: 1024px) {
	div.leftTimelinePeriodCaption { display: inline-block; }
	div.centerTimelinePeriodCaption { display: inline-block; }
	div.rightTimelinePeriodCaption { display: inline-block; }
}

div.timelinePeriodCompact.private {
	background-color: rgba(55, 55, 55, 0.4);
}

div.timelinePeriodCompressed.private {
	background-color: rgba(55, 55, 55, 0.4);
}

div.timelinePeriod.private {
	background-color: grey;
}

div.moreLeft {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
div.moreRight {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

table.timelinePeriod {
	table-layout: fixed;
}

table.calendar {
	border-collapse: collapse;
	margin-top: 5px;
	margin-bottom: 5px;
}

.fullDay, .halfDay, .twoHours, .hour {
	width: 16%;
	text-align: center;
	padding: 0px;
	border: 1px solid rgba(127, 127, 127, 0.4);
}

.fullDay.available, .halfDay.available, .twoHours.available, .hour.available {
	background-color: lightgreen;
}

.fullDay.unavailable, .halfDay.unavailable, .twoHours.unavailable, .hour.unavailable {
	background-color: tomato;
}

button.lookaheadButton {
	min-width: 60px;
}

table.evenSpaced { table-layout: fixed; }

table.calendar caption { color: rgb(0, 204, 255); text-align: left; }
table.calendar thead tr th { background-color: transparent; text-align: center; padding: 0px; margin: 0px; height: 2em; border: none; }
table.calendar tbody tr td { background-color: var(--mainBackground); text-align: center; padding: 0px; margin: 0px; height: 2em; border: 1px solid grey; }
table.calendar tbody tr { background-color: transparent }
table.calendar thead tr th.weekend { width: 12%; color: red; }
table.calendar tbody tr td.weekend { width: 12%; color: red; }
table.calendar thead tr th.weekday { width: 12%; }
table.calendar tbody tr td.weekday { width: 12%; }
table.calendar tbody tr td.outofrange { border: none; background-color: transparent }
table.calendar thead tr th.week {
	width: 50px; background-color: transparent; border: none;
	padding-right: 8px; text-align: right;
}
table.calendar tbody tr.week { font-size: 12px; }
table.calendar tbody tr.week td { height: 1em; }
table.calendar tbody tr td.dayOfWeek { font-size: 12px; }	
table.calendar tbody tr td.week { 
	width: 50px; background-color: transparent; border: none; 
	padding-right: 8px; text-align: right;
}
table.calendar tbody tr td.past {
	background-color: lightgrey;
	mix-blend-mode: multiply;
	color: black;
}
table.calendar tbody tr td.closed {
	background-color: lightgrey;
	mix-blend-mode: multiply;
	color: black;
}
table.calendar tbody tr td.private:not(.available) { background-color: grey; color: white}
table.calendar tbody tr td.resourceEvent { background-color: rgb(127, 255, 255); }
table.calendar tbody tr td.event { background-color: rgb(0, 204, 255); }
table.calendar tbody tr td.booking { background-color: rgb(0, 204, 255); }
table.calendar tbody tr td.popular { background-color: rgb(255, 204, 0); }
table.calendar tbody tr td.notEmpty { background-color: rgb(255, 255, 0); }
table.calendar tbody tr td.unavailable { background: pink; }
table.calendar tbody tr td.outofscope { background: linear-gradient(to right bottom, pink 0%, pink 50%, white 50%, white 100%); }
button.unavailable { background: pink; }

table.calendar.availability tbody tr td.dateTrigger { background-color: Tomato; }

div.event {
	max-width: 200px;
	display: inline-block;
	box-sizing: border-box;
	padding: 5px;
	background-color: rgb(0, 204, 255);
	margin-right: 5px;
	margin-bottom: 5px;
}
div.event div.time, div.event span.time { color: black; }

table.calendar tbody tr td.current { border: 2px solid grey; }
table.calendar tbody tr td.selected { outline: 3px solid red; font-weight: bold;}

table.calendar tbody tr td.createdByUser { background-color: rgb(0, 154, 205); color: white; font-weight: bold;}
table.calendar tbody tr td.ownedByUser { background-color: rgb(0, 154, 205); color: white; font-weight: bold;}
table.calendar tbody tr td.sendToUser { background-color: rgb(0, 154, 205); color: white; font-weight: bold;}

table.calendar tbody tr td div.names { font-size: 80%; font-weight: normal; white-space: normal;}
table.calendar.expanded tbody tr td { padding: 5px; }

table.calendar thead tr th, table.calendar tbody tr td {
	padding-top: 0px;
	padding-bottom: 0px;
}

table.calendar.timelinePeriod thead tr th {
	border-left: 1px solid var(--mainBorder);
	border-right: 1px solid var(--mainBorder);
}

table.calendar thead tr th span, table.calendar tbody tr td span {
	display: block;
	text-align: center;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	line-height: 2em;
}

table.calendar thead tr th span.left, table.calendar tbody tr td span.left {
	display: inline-block;
	text-align: left;
	float: left;
	width: auto;
}

table.calendar thead tr th span.right, table.calendar tbody tr td span.right {
	display: inline-block;
	text-align: right;
	float: right;
	width: auto;
}

.googleMapSection {
	margin: 5px;
}
.googleMapButton {
	margin: 5px;
}

#mapTemplatesSelector {
	display: none;
}

#mapTemplatesSelectorScroller {
	max-height: 0px;
	transition: all 0.25s linear;
}

@media (min-width: 850px) {
	#mapTemplatesSelector {
		display: block;
	}
	
	#mapTemplatesSelectorScroller {
		max-height: 300px;
	}
}

@media (min-width: 1200px) {	
	#mapTemplatesSelectorScroller {
		max-height: 50vh;
	}
}

input.googleMapButton {
	width: 200px;
}

input.map {
	vertical-align: middle;
	background: url(/gui/img/markerCircle.svg) no-repeat scroll 4px 6px;
	padding: 0px;
	padding-left: 30px;
	box-sizing: border-box;
	background-color: white;
	border-radius: 4px;
	box-shadow: inset 0px 1px 3px 0 rgba(0, 0, 0, 0.5);
}

.mapMarkerImage {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color-scheme: light;
}

img.qrcode {
	display: none;
}

.gm-style-iw-d {
	max-height: 200px !important;
}

#tooltip {
	width: clamp(50px, 300px, 100%);
	margin: 0px;
	color: black;
}

#tooltip p {
	margin: 0px;
	padding: 8px 0px;
	max-height: 100%;
	overflow-x: clip;
	overflow-y: scroll;
}

#tooltip .tooltipPhoto {
	float: right;
	width: 100px;
	height: 75px;
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#tooltip .tooltipIcon {
	float: right;
	width: 100px;
	height: 75px;
	font-size: 75px;
	line-height: 75px;
	text-align: center;
	color: rgba(127,127,127,0.5);
	background-color: rgba(127,127,127,0.5);
}

#tooltip .tooltipGroupPhoto {
	float: right;
	width: 200px;
	max-width: 50%;
	aspect-ratio: 5 / 3;
	margin-left: 8px;
	margin-bottom: 8px;
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

#tooltip .tooltipGroupIcon {
	float: right;
	width: 75px;
	height: 75px;
	font-size: 75px;
	line-height: 75px;
	text-align: center;
	color: rgba(127,127,127,0.5);
	background-color: rgba(127,127,127,0.5);
	border-radius: 25%;
}

#tooltip .tooltipAccountPhoto {
	float: left;
	width: 75px;
	height: 75px;
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 25%;
	margin-right: 10px;
}

#tooltip .tooltipAccountIcon {
	float: left;
	width: 75px;
	height: 75px;
	font-size: 75px;
	line-height: 75px;
	text-align: center;
	color: rgba(127,127,127,0.5);
	background-color: rgba(127,127,127,0.5);
	border-radius: 25%;
	margin-right: 10px;
}

#tooltip .tooltipItem {
	padding-block: 8px;
}

#tooltip .tooltipItem::after {
	content: "";
	clear: both;
	display: table;
}

#tooltip .tooltipItem:not(:last-child) {
	border-bottom: 1px solid rgba(127,127,127,0.5);
}

.widget {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.buttonWidget {
	box-sizing: border-box;
	text-align: center;
}

.buttonWidget.selected {
	color: var(--buttonBackground, var(--buttonToggledText));
	background-color: var(--buttonHighlight, var(--buttonToggledBackground));
}

.linkWidget {
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 1em;
}

.buttonRack .buttonWidget,
.buttonRack .linkWidget {
	margin: 0;
	width: 100%;
}

.linkWidget i(role='img').material-symbols-outlined {
	margin-right: 5px;
}

.widgetBox {
	margin: 0px;
	padding: 5px;
	height: 250px;
	box-sizing: border-box;
	vertical-align: top;
	width: 100%;
	min-height: 100px;
	display: block;
	border-radius: 20px;
	white-space: normal;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.widgetBox label {
	font-size: 90%;
	font-weight: bold;
}

.widgetBox .material-symbols-outlined {
	color: rgba(127,127,127,0.5);
	font-size: 125px;
	vertical-align: middle;
	text-align: center;
	position: absolute;
	top: 25%;
	left: 0;
	width: 100%;
	height: 50%;
}

#floatingRack {
	display: none;
	position: fixed;
	padding: 5px;
	border-radius: 4px;
	background-color: #8e8e8e69;
	border: 1px solid #90909038;
	z-index: 300;
}

#floatingButtonRack {
	display: none;
	position: fixed;
	padding: 5px;
	border-radius: 4px;
	background-color: #8e8e8e69;
	border: 1px solid #90909038;
	z-index: 300;
}

.editorContainer {
	position: relative;
	box-sizing: border-box;
	max-width: var(--pageContainerSlimSizeWidth);
	margin: var(--pageContainerSlimMargin);
	padding: var(--pageContainerSlimPadding);
	transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease;
}

article.fullWidth .editorContainer {
	position: relative;
	box-sizing: border-box;
	max-width: var(--pageContainerWideSizeWidth);
	margin: var(--pageContainerWideMargin);
	padding: var(--pageContainerWidePadding);
	transition: width 0.5s ease, margin 0.5s ease, padding 0.5s ease;
}

article.fullWidth .editorContainer.section.mobileScreen, .editorContainer.section.mobileScreen {
	width: 550px;
	padding: 0px;
	margin-inline: auto;
}

article.fullWidth .editorContainer.section.tabletScreen, .editorContainer.section.tabletScreen {
	width: 1025px;
	padding: 0px;
	margin-inline: auto;
}

#page.editorScreen {
	display: flex;
	flex-direction: column;
}

div[data-field-type="static"] {
	display: none;
}

.toolbeltTopRight {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 73;
	height: 55px;
}

.toolbeltTop {
	/* position: sticky; */
	top: 0;
	z-index: 72;
}

.toolbeltBottom {
	/* position: sticky; */
	bottom: 0;
	z-index: 71;
}

.buttonRack {
	position: relative;
	display: inline-flex;
	gap: 5px;
	box-sizing: border-box;
	text-align: center;
	padding: 5px;
	border-radius: 4px;
	background-color: #8e8e8e69;
	border: 1px solid #90909038;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2px;
	margin-bottom: 2px;
}

.buttonSection {
	clear: both;
	display: flex;
	gap: 5px;
}

.white, .white:hover, .white:focus {
	background-color: white;
	color: black;
}

#alternativeButtons:empty {
	display: none;
}

div.widgetDropdown {
	position: absolute;
	z-index: 300;
	display: none;
	padding: 5px;
	border-radius: 4px;
	background-color: #8e8e8e69;
	border: 1px solid #90909038;
	width: 160px;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: 5px;
}

div.widgetDropdown button {
	display: block;
	text-align: left;
	flex: 100%;
}

#commentEditor {
	z-index: 4000;
}

#resourceMap {
	width: 100%;
	height: 400px;
}

#worldMap {
	width: 100%;
	height: 400px;
}

i.unselected {
	color: rgba(0, 0, 0, 0.25);
}

.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.hoverableEllipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.hoverableEllipsis:hover {
	overflow: visible;
}
path.line {
	fill: none;
	stroke-width: 1px;
}

line.average {
	fill: none;
	stroke-width: 1px;
}

line.x, line.y {
	stroke: rgba(70, 130, 180, 0.5);
	stroke-width: 1px;
}

line.xLine {
	stroke: rgba(255, 0, 0, 0.5);
	stroke-width: 1px;
	stroke-linecap: round;
	stroke-dasharray: 1, 10;
}

line.zeroLine {
	stroke: rgba(255, 0, 0, 0.5);
	stroke-width: 1px;
}

rect.bar {
	opacity: 0.75;
}

circle.dot {
	stroke: none;
}

text.capitalize {
	text-transform: capitalize;
}

.xLegend {
	fill: black;
	font-size: 0.75em;
}

.overlay {
	fill: none;
	pointer-events: all;
}

.focus circle {
	fill: none;
	stroke: steelblue;
}

.legend {
	fill: black;
	font-size: 0.75em;
}

.tip {
	fill: black;
	font-size: 0.75em;
}

label.caption {
	font-weight: bold;
}

.required:after {
	content: " *";
	color: red;
}

a.foldable {
	margin: 0px;
	padding: 10px;
	cursor: pointer;
}

a.foldable.compact {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 15px;
}

section.foldable {
}

#profileOptions section.foldable a {
	padding: 5px;
}

section.folded {
	display: none;
}

div.scrollLeftFade,
div.scrollRightFade {
	width: 60px;
	position: absolute;
	bottom: 0px;
	top: 20px;
	margin-block: 30px;
	z-index: 100;
	opacity: 0.0;
	transition: opacity 0.5s ease-in-out;
}

div.scrollLeftFade {
	background-image: radial-gradient(circle 80px at bottom 50% left 15px, rgba(127, 127, 127, 0.75) 0%, transparent 50%);
	left: 0px;
}

div.scrollRightFade {
	background-image: radial-gradient(circle 80px at bottom 50% right 15px, rgba(127, 127, 127, 0.75) 0%, transparent 50%);
	right: 0px;
}

div.horizontalBoxContainer:hover div.scrollLeftFade,
div.horizontalBoxContainer:hover div.scrollRightFade {
	opacity: 1.0;
}

div.scrollLeft,
div.scrollRight {
	position: absolute;
	display: var(--horizontalScrollButtonDisplay, none);
	opacity: 0.0;
	top: calc(50% - 20px);
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 100%;
	color: black;
	background-color: white;
	z-index: 100;
	transition: opacity 0.5s;
}

div.scrollLeft {
	left: 0px;
}

div.scrollRight {
	right: 0px;
}

div.scrollLeft:hover, 
div.scrollRight:hover  {
	filter: brightness(.8);
}

div.horizontalBoxContainer:hover div.scrollLeft,
div.horizontalBoxContainer:hover div.scrollRight {
	display: var(--horizontalScrollHoverButtonDisplay, none);
	opacity: 1.0;
}

mark.topic {
	display: block;
	float: left;
	margin: .2rem .2rem;
	padding: 0px;
	font-size: 90%;
	white-space: nowrap;
	background: #F1F1F1;
	border-radius: 4px;
	overflow: hidden;
	vertical-align: middle;
}

mark.topic img {
	display: inline-block;
	margin: 4px;
	vertical-align: middle;
}

mark.topic span {
	display: inline-block;
	padding: 4px;
	vertical-align: middle;
}

table.list caption {
	font-weight: bold;
	text-align: left;
}

table.list thead tr th.accessIcon {
	padding: 2px;
	text-align: center;
}

table.list tbody tr td.accessIcon {
	padding: 2px;
	text-align: center;
}

#resourceImage {
	max-height: 280px;
}

#actorScroll {
	padding-inline: 10px;
}

@media (min-height: 550px) {	
	:not(.editorContainer.mobileScreen) #resourceImage {
		max-height: 350px;
	}
}

@media (min-height: 850px) {	
	:not(.editorContainer.mobileScreen) #resourceImage {
		max-height: 400px;
	}
}

@media (min-height: 1200px) {	
	:not(.editorContainer.mobileScreen) #resourceImage {
		max-height: 600px;
	}
}

@media (min-width: 700px) {
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip {
		width: 500px;
	}
	
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip p {
		max-width: 400px;
	}
	
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip .tooltipPhoto {
		width: 200px;
		height: 175px;
		margin-left: 10px;
	}
	
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip .tooltipIcon {
		width: 200px;
		height: 175px;
		font-size: 175px;
		line-height: 175px;
	}
	
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip .tooltipGroupPhoto {
		width: 175px;
		height: 175px;
	}
	
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip .tooltipGroupIcon {
		width: 175px;
		height: 175px;
		font-size: 175px;
		line-height: 175px;
	}
	
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip .tooltipAccountPhoto {
		width: 175px;
		height: 175px;
	}
	
	:not(.editorContainer.mobileScreen) #resourceMap #tooltip .tooltipAccountIcon {
		width: 175px;
		height: 175px;
		font-size: 175px;
		line-height: 175px;
	}		
}

@media print {
	img.qrcode {
		max-width: 150px;
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

.dialogHoverLight:hover {
	color: var(--dialogBackground);
	background-color: var(--dialogHighlight);
}

.stickyContainer {
	position: sticky;
	top: 10px;
}

dialog .stickyContainer {
	/* position: sticky; */
	top: calc(10px + var(--menubarSizeHeight, 48px));
}

.pac-container {
	z-index: 10000;
}

.videoSlotButton {
	vertical-align: top;
	margin: 0px;
	box-shadow: none;
	border: 5px dashed lightgrey;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
}

.overlayListItem {
	width: 33%;
}

.overlayListTools {
	width: 100px;
}

.mediaTrack {
	width: calc(33% + 100px);
}

.mediaPeriod {
	position: relative;
	height: 15px;
	background-color: var(--mainHighlight);
}

.overlayItem {
	position: absolute;
}

.move.handle {
	position: absolute;
	left: 0;
	top: 0;
}

.resize.handle {
	position: absolute;
	right: 0;
	bottom: 0;
}

.showOnRowHover {
	visibility: hidden;
}

thead:hover tr th .showOnRowHover {
	visibility: visible;
}
#logotype { background-image: var(--logotype); }
#emblem { background-image: var(--emblem); }
#icon { background-image: var(--icon); }
body { background-color: var(--headerBackground); }
header.page { background-color: var(--headerBackground); }
#returnToTop { background-color: var(--headerBackground); opacity: 0.50; }
#cartButton { color: var(--headerHighlight); }
header.page { color: var(--headerText); }
#returnToTop span { color: var(--headerText); }
dialog { background-color: var(--dialogBackground); }
div.editor { background-color: var(--dialogBackground); }
dialog { color: var(--dialogText); }
dialog a { color: var(--dialogText); }
dialog a i.material-symbols-outlined { opacity: 0.50; color: var(--dialogText); }
dialog a:hover i.material-symbols-outlined { opacity: 1.0; }
div.editor { color: var(--dialogText); }
div.editor a { color: var(--dialogText); }
div.editor a i.material-symbols-outlined { opacity: 0.50; color: var(--dialogText); }
div.editor a:hover i.material-symbols-outlined { opacity: 1.0; }
dialog header { background: var(--bannerBackground); color: var(--bannerText);}
dialog footer { background: var(--bannerBackground); color: var(--bannerText);}
div.editor header { background-color: var(--dialogBackground); color: var(--dialogText);}
div.editor footer { background-color: var(--dialogBackground); color: var(--dialogText);}
#navigation { background-color: var(--menuBackground); }
#navigation { color: var(--menuText); }
#navigation a { color: var(--menuText); }
#navigation a i.material-symbols-outlined { opacity: 0.50; color: var(--menuText); }
#navigation a:hover i.material-symbols-outlined { opacity: 1.0; }
#navigation label i.material-symbols-outlined { opacity: 0.50; color: var(--menuText); }
#navigation label:hover i.material-symbols-outlined { opacity: 1.0; }
#profileAvatar { background-color: var(--menuBackground); }
#profileAvatar { color: var(--menuText); }
.profileAvatar { background-color: var(--menuBackground); }
.profileAvatar { color: var(--menuText); }
#profileOptions { background-color: var(--menuBackground); }
#profileOptions { color: var(--menuText); }
#profileOptions a { color: var(--menuText); }
#profileOptions a i.material-symbols-outlined { opacity: 0.50; color: var(--menuText); }
#profileOptions a:hover i.material-symbols-outlined { opacity: 1.0; }
#profileOptions label i.material-symbols-outlined { opacity: 0.50; color: var(--menuText); }
#profileOptions label:hover i.material-symbols-outlined { opacity: 1.0; }
#languageSelector { background-color: var(--menuBackground); }
#languageSelector { color: var(--menuText); }
#languageSelector a { color: var(--menuText); }
#navigation a { border-bottom: 1px solid var(--menuBorder); }
#profileOptions a { border-bottom: 1px solid var(--menuBorder); }
#profileOptions label { border-bottom: 1px solid var(--menuBorder); }
#languageSelector a { border-bottom: 1px solid var(--menuBorder); }
#languageSelector label { border-bottom: 1px solid var(--menuBorder); }
#avatarMenu a:last-child { border-bottom: 1px solid var(--menuBorder); }
#navigation a:last-child { border-bottom: none; }
#profileOptions > a:last-child { border-bottom: none; }	
#languageSelector > a:last-child { border-bottom: none; }	
section.foldable {
	border-left: 5px solid var(--menuBorder);
}

body { background-color: var(--mainBackground); }
button, input[type='submit'], input[type='reset'], input[type='button'] { background-color: var(--buttonBackground); color: var(--buttonText); }
button.toggled, input[type='submit'].toggled, input[type='reset'].toggled, input[type='button'].toggled { background-color: var(--buttonToggledBackground); color: var(--buttonToggledText); }
button.toggled:hover, input[type='submit'].toggled:hover, input[type='reset'].toggled:hover, input[type='button'].toggled:hover { background-color: var(--buttonToggledBackground); color: var(--buttonToggledText); }
button.toggled:focus, input[type='submit'].toggled:focus, input[type='reset'].toggled:focus, input[type='button'].toggled:focus { background-color: var(--buttonToggledBackground); color: var(--buttonToggledText); }
button.toggleable:hover, input[type='submit'].toggleable:hover, input[type='reset'].toggleable:hover, input[type='button'].toggleable:hover { background-color: var(--buttonToggledBackground); color: var(--buttonToggledText); }
label.tag.selected { color: var(--buttonToggledText); }
button.floatingCircle, input[type='submit'].floatingCircle, input[type='reset'].floatingCircle, input[type='button'].floatingCircle { background-color: var(--buttonToggledBackground); color: var(--buttonToggledText);}
button.floatingCircle:hover, input[type='submit'].floatingCircle:hover, input[type='reset'].floatingCircle:hover, input[type='button'].floatingCircle:hover { background-color: var(--buttonToggledBackground); color: var(--buttonToggledText); }
button.floatingCircle:focus, input[type='submit'].floatingCircle:focus, input[type='reset'].floatingCircle:focus, input[type='button'].floatingCircle:focus { background-color: var(--buttonToggledBackground); color: var(--buttonToggledText); }
.reportCaption { fill: var(--mainText); }
.axisLeft text, .axisRight text, .axisBottom text { fill: var(--mainText); }
text.tip { fill: var(--mainText); }
text.xLegend { fill: var(--mainText); }
main { color: var(--mainText); }
button, input[type='submit'], input[type='reset'], input[type='button'] { background-color: var(--buttonBackground); color: var(--buttonText);}
button:hover, input[type='submit']:hover, input[type='reset']:hover, input[type='button']:hover { background-color: var(--buttonBackground); color: var(--buttonText);}
button:focus, input[type='submit']:focus, input[type='reset']:focus, input[type='button']:focus { background-color: var(--buttonBackground); color: var(--buttonText);}
main a { color: var(--mainText); }
main a:link, main a:visited, main a:hover, main a:active { 
	color: var(--mainText);
	text-decoration: underline;
}

input,
progress {
	accent-color: var(--mainHighlight);
}

#page a, #page a:link, #page a:visited, #page a:hover, #page a:active { 
	color: var(--mainText);
	text-decoration: underline;
	text-underline-position: under;
	overflow-wrap: anywhere;
}
.hypertext a, .hypertext a:link, .hypertext a:visited, .hypertext a:hover, .hypertext a:active {
	color: var(--mainText);
	text-decoration: underline;
}
#chatMessages a, #chatMessages a:link, #chatMessages a:visited, #chatMessages a:hover, #chatMessages a:active {
	color: var(--mainText);
	text-decoration: underline;
}
.textarea a, .textarea a:link, .textarea a:visited, .textarea a:hover, .textarea a:active { 
	color: var(--mainText);
	text-decoration: underline;
}
.verticalScroll::-webkit-scrollbar-thumb { background: var(--mainHighlight); border-radius: 20px;}
.horizontalScroll::-webkit-scrollbar-thumb { background: var(--mainHighlight); border-radius: 20px;}
button.toggled, input[type='submit'].toggled, input[type='reset'].toggled, input[type='button'].toggled { background-color: var(--mainHighlight); }
button.toggled:hover, input[type='submit'].toggled:hover, input[type='reset'].toggled:hover, input[type='button'].toggled:hover { background-color: var(--mainHighlight); }
button.toggled:focus, input[type='submit'].toggled:focus, input[type='reset'].toggled:focus, input[type='button'].toggled:focus { background-color: var(--mainHighlight); }
button.toggleable:hover, input[type='submit'].toggleable:hover, input[type='reset'].toggleable:hover, input[type='button'].toggleable:hover { background-color: var(--mainHighlight); }
label.tag.selected { background-color: var(--mainHighlight); }
button.floatingCircle, input[type='submit'].floatingCircle, input[type='reset'].floatingCircle, input[type='button'].floatingCircle { background-color: var(--mainHighlight);}
button.floatingCircle:hover, input[type='submit'].floatingCircle:hover, input[type='reset'].floatingCircle:hover, input[type='button'].floatingCircle:hover { background-color: var(--mainHighlight); }
button.floatingCircle:focus, input[type='submit'].floatingCircle:focus, input[type='reset'].floatingCircle:focus, input[type='button'].floatingCircle:focus { background-color: var(--mainHighlight); }
figure.highlight img { background-color: var(--mainHighlight); }
.highlight { color: var(--mainHighlight); }
.axisLeft line, .axisRight line, .axisBottom line { stroke: var(--mainBorder); }
.axisLeft path, .axisRight path, .axisBottom path { stroke: var(--mainBorder); }
table.list thead tr th, table.list tbody tr td { border-bottom: 1px solid var(--mainBorder); }
table.list tbody tr.followedByExtraRow td { border-bottom: none; }
table.list tbody tr.followedByExtraRow td.doubleRow { border-bottom: 1px solid var(--mainBorder); }
table.list thead.sticky th { background-color: var(--mainBackground); }
table.screenshots thead tr th, table.screenshots tbody tr td { border-bottom: 1px solid var(--mainBorder); }
.booking { border: 1px solid var(--mainBorder); }
figure.avatar img { border: 1px solid var(--mainBorder); }
figure.accountAvatar img { border: 1px solid var(--mainBorder); }
figure.groupAvatar img { border: 1px solid var(--mainBorder); }
article.event+article.event { border-top: 1px solid var(--mainBorder); }
.fullDay, .halfDay, .twoHours, .hour {border: 1px solid var(--mainBorder); }
table.calendar tbody tr td {border: 1px solid var(--mainBorder); }
table.calendar tbody tr td.current { border: 2px solid var(--mainBorder); }
.entry { border-bottom: 1px solid var(--mainBorder); }
.transparentBanner { width: 100%; box-sizing: border-box; padding: 3px; }
.colorBanner { width: 100%; box-sizing: border-box; padding: 3px; }
.menuBanner { background-color: var(--bannerBackground); }
.sectionBanner { background-color: var(--bannerBackground); }
.assignmentBanner { background-color: var(--bannerBackground); }
.dropdown { background-color: var(--bannerBackground); }
.colorBanner { background-color: var(--bannerBackground); }
.menuBanner { color: var(--bannerText); }
.sectionBanner { color: var(--bannerText); }
.assignmentBanner { color: var(--bannerText); }
.colorBanner { color: var(--bannerText); }
.chatBackground { background-color: var(--chatBackground); }
.theirChat { border: 1px solid var(--chatBorder); }
.yourChat { border: 1px solid var(--chatBorder); }
.theirChat { background-color: var(--chatTheirBackground); }
.theirChat { color: var(--chatTheirText); }
.yourChat { background-color: var(--chatYourBackground); }
.yourChat { color: var(--chatYourText); }