:root{
	--scrollbar-width: calc(100vw - 100%);
}

/***************************************************************************
  General tweaks
***************************************************************************/

/* remove unequal padding in <p:dialog> */
#globalSpinner.ui-dialog .ui-dialog-content {
	padding: 1em;
}

/* Fix checkbox position for large text in MC stages */
.mcstage-box > tbody > tr > td {
	display: flex;
	overflow-wrap: anywhere; /* Fix overflow */
}
.mcstage-box .ui-chkbox {
	align-self: center;
}
.mcstage-box .ui-radiobutton {
	align-self: center;
}
.mcstage-box label {
	align-content: center;
}

/* Improve visibility of selected radio buttons. */
body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet {
	background-color: var(--ude-blue);
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
	background: unset;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active.ui-state-hover {
	background: inherit; 
}

body .ui-radiobutton .ui-radiobutton-box .ui-radiobutton-icon {
	width: 10px;
	height: 10px;
	margin-top: -5px;
	margin-left: -5px;
}

/* Remove blue shadow box from checkbox to prevent blinking when updating component */
.box-without-shadow .ui-chkbox-box.ui-state-focus{
	box-shadow: none !important;
}

/* Icon on inplace editors */
.inplaceIcon::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: .7em;
	content: "\f304";
	margin-left: 3px;
	color: var(--gray-500);
}

/* Allow to remove padding in draggable table rows */
.ui-datatable-no-sortable-padding > td.ui-sortable-handle {
	padding: 0px !important;
}

.borderless.ui-datatable thead {
	display: none;
}

.borderless.ui-datatable tbody,
.borderless.ui-datatable tbody tr,
.borderless.ui-datatable tbody td,
.borderless.ui-datatable .ui-datatable-data > tr > td {
	border-style: none;
}

.borderless.ui-datatable .ui-datatable-even {
	background: unset;
}

.borderless.ui-datatable .ui-datatable-odd {
	background: unset;
}

.weaker, .dropdown-content-weaker {
	font-size: smaller;
	color: gray;
	font-weight: normal;
}

.ui-state-highlight .dropdown-content-weaker {
	color: #828282;
}

.tiny-button {
	height: 30px !important;
	width: 30px !important;
}

.warn-text {
	color: var(--yellow-600);
}

/***************************************************************************
  CK Editor
***************************************************************************/

.cke {
	border-radius: var(--border-radius);
	box-shadow: none;
	transition: border .2s, box-shadow .2s !important;
}

.cke_inner {
	border-radius: var(--border-radius);
}

.cke_top {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

.cke_contents {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.cke_bottom {
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.cke_focus {
	border: 1px solid var(--input-focus-border-color) !important;
	box-shadow: var(--input-focus-shadow);
}

.cke_chrome:hover {
	border: 1px solid var(--input-focus-border-color);
}

/***************************************************************************
  Activity Bar
***************************************************************************/

#activity-bar, #activity-bar:before {
	height: 4px;
	width: 100%;
	margin: 0;
}

#activity-bar {
	background-color: var(--ude-blue);
	display: flex;
	transition: background-color 0.5s;
	position: fixed;
	top: 0px;
	z-index: 3000;
}

#activity-bar.active {
	background-color: var(--ude-pale-blue);
}

#activity-bar.error {
	background-color: var(--ude-red);
}

#activity-bar:before {
	background-color: var(--ude-blue);
	content: '';
	animation: running-progress 2s cubic-bezier(0.4, 0.2, 0.2, 0.4) infinite;
	transition: opacity 0.5s;
	opacity: 0;
}

#activity-bar.active:before {
	opacity: 1;
}

@keyframes running-progress {
	0% {
		margin-left: 0;
		margin-right: 100%;
	}
	50% {
		margin-left: 25%;
		margin-right: 0%;
	}
	100% {
		margin-left: 100%;
		margin-right: 0;
	}
}

/*
   Wall Message f0a1
 */
#wall-message {
	background-color: white;
	padding: .5em;
	text-align: center;
}

#wall-message::before, #wall-message::after {
	font-family: "Font Awesome 6 Free";
	content: "\f0a1";
	font-weight: 900;
	margin: 0 1em;
}

#wall-message::after {
	display: inline-block;
	transform: scale(-1, 1);
}

/***************************************************************************
  Content Area
***************************************************************************/

/*
 * Definitions for the content area.
 */
@media only screen and (min-width: 700px) {
	main {
		margin: calc(.5 * var(--content-padding));
	}
	#content {
		border-radius: var(--border-radius);
	}
}

#content {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding: calc(.5*var(--content-padding));
	box-sizing: border-box;
	background: white;
}

/* Special rules for printing */
@media print {
	header, #menubar, footer {
		display: none;
	}
	.no-print {
		display: none;
	}
}

/***************************************************************************
  Diagrams
***************************************************************************/

/*
 * Flowchart diagrams (stage graph)
 */
.ui-diagram-element {
	width: 12em;
	height: 3em;
	line-height: 3em;
	text-align: center;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
	border-radius: var(--border-radius);
	border: 1px solid transparent;
	background-color: #98AFC7;
	color: #ffffff;
}

.flow-label {
	font-size: 24px;
	font-weight: bold;
	color: #816A51;
}

/***************************************************************************
  Checkboxes for access right dialog
***************************************************************************/

.ui-chkbox.inheritedRight .ui-icon-blank {
	font-family: "primeicons" !important;
	font-style: normal;
	font-weight: normal;
	display: inline-block;
	background: none;
}
.ui-chkbox.inheritedRight .ui-chkbox-box {
	background-color: var(--surface-border);
}
.ui-chkbox.inheritedRight .ui-icon-blank::before {
	content: "\e909";
}

/***************************************************************************
  Checkboxes for MC stage tick pattern
***************************************************************************/

.mcstage-tick-pattern {
	border: 1px solid var(--surface-border);
	width: 20px;
	height: 20px;
	font-size: 80%;
	display: inline-block;
	vertical-align: middle;
}
.mcstage-tick-pattern::before {
	vertical-align: sub
}

/***************************************************************************
  Sticky
***************************************************************************/

/* Sticky element on top of the page */
/* Note that we don't use PrimeFaces' p:sticky element due to
   https://github.com/primefaces/primefaces/issues/9295 */
.sticky-top {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0px;
	height: min-content;
}
.sticky-toolbar {
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 4px;
	z-index: 200;
}
/* This is important to keep the toolbars under the activity bar. */
.ui-sticky {
	top: 4px !important;
}

/***************************************************************************
  Monospace
***************************************************************************/

/* Monospace font */
.monospace {
	font-family: "Consolas", "Courier New", monospace;
	white-space: pre-wrap;
}

.monospaceForce {
	font-family: "Consolas", "Courier New", monospace !important;
	white-space: pre-wrap !important;
}

.small-monospace {
	font-family: "Consolas", "Courier New", monospace;
	white-space: pre-wrap;
	font-size: small !important;
}
.monospace-scroll {
	font-family: "Consolas", "Courier New", monospace;
	white-space: nowrap;
	overflow-x: auto;
	/* Padding was added for scrollbars overlaying the content, see JACK/jack3-core#1718 */
	padding-top: 16px;
	padding-bottom: 16px;
}

/***************************************************************************
  Scrolled panels
***************************************************************************/

/* Panel with horizontal scrollbar only */
.panel-scroll-x {
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	width: 100%;
	white-space: nowrap;
	/* Padding was added for scrollbars overlaying the content, see JACK/jack3-core#1718 */
	padding-top: 16px;
	padding-bottom: 16px;
}
.panel-scroll-x > * {
	padding: 4px 10px !important;
}
/* Fixes not working auto-width for MathJax formulas */
.panel-scroll-x-mathjax > span {
	width: 50px;
	display: inline-block;
	white-space: nowrap;
}

/***************************************************************************
  Disable padding
***************************************************************************/

.nopadding-panel.ui-panel .ui-panel-content,
.nopadding-panel.ui-overlaypanel .ui-overlaypanel-content {
	padding: 0;
	margin: 0;
}
.nopadding-panel > .ui-panel-content > .ui-datatable:last-child > .ui-datatable-tablewrapper {
	-moz-border-radius-bottomright: var(--border-radius);
	-webkit-border-bottom-right-radius: var(--border-radius);
	-khtml-border-bottom-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
	-moz-border-radius-bottomleft: var(--border-radius);
	-webkit-border-bottom-left-radius: var(--border-radius);
	-khtml-border-bottom-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
}
.nopadding-panel > .ui-panel-content > .ui-datatable:last-child tr:last-child > td {
	border-bottom: none;
}

/* Round border on top if there is no header in the panel. */
.ui-panel .ui-panel-content:first-child {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

/***************************************************************************
  Colored, rounded tags
***************************************************************************/

.colored-tag {
	background-color: var(--primary-color);
	color: var(--primary-color-text);
	border-radius: 100px;
	padding: 1px 8px;
	margin: 0px 2px;
	font-size: 80%;
	white-space: nowrap;
	display: inline-block;
}

.colored-tag.shortened {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Inverted circle with a number */
.j-badge-number {
	background: var(--ude-blue);
	color: white;
	border-radius: 50%;
	min-height: 1.5em;
	min-width: 1.5em;
	display: inline-block;
}

/***************************************************************************
  Live console and ACE Editor
***************************************************************************/

div.console-panel > div.ui-panel-content {
	padding: 0;
}

div.console-panel > div.ui-panel-content > textarea {
	border: none;
	font-family: monospace;
	opacity: 1;
}

.ace_editor {
	margin: 0;
}

div.ace-panel > div.ui-panel-content {
	padding: 0;
}

.ace-panel .ace_editor {
	min-height: 200px;
	width: 100%;
}

.ace_editor .blocker {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: rgba(192, 192, 192, 0.5);
	z-index: 100;
}

/***************************************************************************
 "inline" copy button component
***************************************************************************/
span.j-copy-button-in-textfield {
	display: inline;
	z-index: 100;
	position: absolute;
	right: 0;
	transform: translate(50%, -50%);
}
span.j-copy-button-in-textfield.has-suffix {
	right: .2em;
}
span.j-copy-button-in-textfield > button.ui-button.tiny-button {
	background-color: white;
}

button.j-copy-button-in-textfield.ui-button.tiny-button {
	background-color: white;
	display: inline;
	z-index: 100;
	position: absolute;
	right: 0;
	transform: translate(50%, -50%);
}

/***************************************************************************
  Grouping components
***************************************************************************/

/* Group with rounded corners */
.j-group {
	display: inline-flex;
}
.j-group > .ui-corner-all:first-child:not(:last-child),
.j-group-start.ui-corner-all,
.j-group-start.ui-spinner > .ui-corner-all  {
	border-right-width: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.j-group > .ui-corner-all:not(:last-child):not(:first-child),
.j-group-middle.ui-corner-all,
.j-group-middle.ui-spinner > .ui-corner-all {
	border-right-width: 0;
	border-radius: 0;
}
.j-group > .ui-corner-all:not(:last-child):not(:first-child) > .ui-spinner-down,
.j-group > .ui-corner-all:not(:last-child):not(:first-child) > .ui-spinner-up,
.j-group > .ui-corner-all:first-child:not(:last-child) > .ui-spinner-down,
.j-group > .ui-corner-all:first-child:not(:last-child) > .ui-spinner-up,
.j-group-start.ui-corner-all > .ui-spinner-down,
.j-group-start.ui-corner-all > .ui-spinner-up,
.j-group-middle.ui-corner-all > .ui-spinner-down,
.j-group-middle.ui-corner-all > .ui-spinner-up {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.j-group > .ui-corner-all:last-child:not(:first-child),
.j-group-end.ui-corner-all {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

/* Border around an element */
.j-panel-only-border {
	border: 1px solid var(--surface-border);
	border-radius: var(--border-radius);
	padding: var(--content-padding);
}

/* Toolbar with tree / data-view */
.j-toolbar-tree, .j-toolbar-dataview {
	border: 1px solid var(--surface-border);
	border-radius: var(--border-radius);
}
.j-toolbar-tree > .ui-toolbar,
.j-toolbar-dataview > .ui-toolbar {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border: none;
	border-bottom: 1px solid var(--surface-border);
}
.j-toolbar-tree > .ui-tree {
	border: none;
}
.j-toolbar-dataview > .ui-dataview .ui-dataview-content {
	background: none;
	padding: .5em;
}

/* Rounded box with a collapsed text and other columns */
.j-text-button-box {
	display: inline-flex;
	width: 100%;
	overflow-wrap: anywhere;
}
.j-text-button-box > div {
	padding: .5em;
	border: 1px solid var(--surface-border);
}
.j-text-button-box > div.text-shortened {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
}
.j-text-button-box > div.buttons {
	display: flex;
	align-items: center;
	gap: .25rem;
}
.j-text-button-box > div.buttons-vertical,
div.j-buttons-vertical {
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: .25rem;
}
.j-text-button-box > div:first-child {
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);
	flex: 1;
	overflow: auto;
}
.j-text-button-box > div:not(:first-child) {
	border-left: none;
}
.j-text-button-box > div:last-child {
	border-top-right-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

.j-menupanel {
	border: 1px solid var(--surface-border);
	border-radius: var(--border-radius);
	padding: var(--content-padding);
	background: var(--surface-ground);
	width: 100%;
	display: flex;
	gap: calc(0.5 * var(--content-padding));
}

table.j-form-grid {
	width: 100%;
}

table.j-form-grid > tbody > tr > td:nth-child(1) {
	white-space: nowrap;
}

table.j-form-grid > tbody > tr > td:nth-child(2) {
	width: 100%;
}

.j-form-grid .ui-inplace .ui-inplace-display {
	margin-left: -8px;
}

.ui-inputgroup>.ui-password:not(:last-child)>.ui-inputfield {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0 none;
}

.j-form-grid .ui-inputgroup>.ui-password {
	padding-left: 0;
}

/***************************************************************************
  Statistics grid / table
***************************************************************************/

.j-statistics-table {
	display: flex;
	gap: 1rem 3rem;
	flex-wrap: wrap;
}
.j-statistics-table .j-statistics-table-button {
	align-self: center;
}
.j-statistics-table > table {
	display: block;
}
.j-statistics-table > table > tbody > tr > td {
	vertical-align: top;
}
.j-statistics-table > table > tbody > tr > td:nth-child(2) {
	text-align: right;
}

/***************************************************************************
  Changes for specific pages
***************************************************************************/

/*Highlight selectable checkboxes in tree*/
.j-actiondialog-with-tree .ui-tree .ui-chkbox-box:not(.ui-state-disabled) {
	border-color: var(--primary-color);
}
.j-actiondialog-with-tree .ui-tree .ui-chkbox-box.ui-state-disabled {
	border-width: 1px;
}

/* Limit the height of the tree, see https://s3gitlab.paluno.uni-due.de/JACK/jack3-core/-/issues/344#note_136426 */
.j-actiondialog-with-tree .ui-tree {
	height: 200px;
	max-height: 200px;
	overflow-y: auto;
	padding: 0;
}

@media only screen and (min-height: 500px) {
	.j-actiondialog-with-tree .ui-tree {
		height: calc(100vh - 300px);
		max-height: calc(100vh - 300px);
	}

	/* Split the move dialog in two columns */
	.j-actiondialog-with-tree-move .ui-dialog-content {
		display: flex;
		gap: 1em;
	}
	.j-actiondialog-with-tree-move .j-actiondialog-with-tree-helper {
		margin-bottom: auto;
	}
	.j-actiondialog-with-tree-move .j-source-tree {
		width: 55%;
		display: flex;
		flex-direction: column;
	}
	.j-actiondialog-with-tree-move .j-target-tree {
		width: 45%;
		display: flex;
		flex-direction: column;
	}
}
@media only screen and (max-height: 499px) {
	.j-actiondialog-with-tree-move .j-target-tree {
		margin-top: 1em;
	}
}

@media only screen and (min-height: 700px) {
	.j-actiondialog-with-tree .ui-tree  {
		height: 400px;
		max-height: 400px;
	}
}

/* Box with grey-shaded header, like a header or a panel */
.j-header-box {
	border: 1px solid var(--surface-border);
	border-radius: var(--border-radius);
}
.j-header-box h4 {
	background-color: var(--gray-200);
	padding: 0.5em 0;
	margin: 0;
	text-align: center;
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
	border-bottom: 1px solid var(--surface-border);
}

.background-orange {
	background-color: #f9c189 !important;
	background-image: none !important;
	color: #000000 !important;
}

/* Legend for symbols (tables where the first column contains only one icon) */
.symbol-legend-panel td:first-child {
	text-align: center;
}

/* Indicators for lecturer-only panels */
.ui-panel.lecturers-only .ui-panel-title::before {
	font-family: "Font Awesome 6 Free";
	font-size: smaller;
	opacity: 50%;
	content: "\f06e ";
	padding-right: .25ch;
}
.ui-panel.lecturers-only .ui-panel-title::after {
	font-size: smaller;
	opacity: 50%;
}

/* Stages */
.jack-stage-content, .jack-stage-feedback {
	overflow-wrap: break-word;
} 
.jack-stage-content textarea[data-provider] {
	display: none;
}

.jack-stage-content .jack-chemistry-content {
	width: 100%;
	height: 480px;
}

.jack-stage-content textarea.mathdoxformula {
	display: none;
}

.jack-stage-content img {
	max-width: 100%;
}

.jack-stage-content .ui-inputfield.has-prefix,
.jack-stage-content .ui-selectonemenu.has-prefix {
	margin-left: .2em; /* prevents the focus shadow from hiding content. */
	text-align: left;
}

.jack-stage-content .ui-inputfield.has-suffix,
.jack-stage-content .ui-selectonemenu.has-suffix {
	margin-right: .2em; /* prevents the focus shadow from hiding content. */
	text-align: right;
}

.jack-stage-content .ui-inputfield.has-prefix.has-suffix,
.jack-stage-content .ui-selectonemenu.has-prefix.has-suffix {
	text-align: center;
}

/* Highlight student input */
.jack-stage-content .ui-inputfield.ui-inputtext,
.jack-stage-content .ui-chkbox .ui-chkbox-box,
.jack-stage-content .ui-radiobutton .ui-radiobutton-box,
.jack-stage-content .ui-selectonemenu  {
	border-width: 2px;
	border-color: var(--gray-500);
}

.ui-datatable.no-header thead,
.ui-dataview.no-header > .ui-dataview-header {
	display: none;
}

/* RStage configuration dialogs */
.rstage-greql-config {
	width: 600px;
}
.rstage-greql-config .rule {
	display: flex;
	gap: .5em;
}
.rstage-greql-config .rule > .rule-input {
	flex-grow: 1;
}
.rstage-greql-config .rule > .rule-button {
	display: flex;
	align-items: center;
}

/* Dialog for Editor Overlay and Molecule Editor Overlay */
.j-editor-dialog {
	padding: 0px !important;
}
.j-editor-dialog.ui-dialog .ui-dialog-titlebar {
	padding: .5rem;
}
.j-editor-dialog.ui-dialog .ui-dialog-content {
	padding: .5rem;
}

/* Login pages */
.j-login-form {
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}
.j-login-form input {
	width: 100%;
	margin-top: 0.25rem;
	margin-bottom: 1rem;
}
.j-login-form button {
	width: 100%;
	margin-top: 1rem;
}

.ui-datatable table.j-participants-table {
	/*display: block;
	overflow-x: auto;*/
	table-layout: auto;
}
.ui-datatable table.j-exercise-results-table > tbody > tr > td:first-child,
.ui-datatable table.j-exercise-results-table > thead > tr > th:first-child {
	position: sticky;
	left: 0;
	background: var(--surface-ground);
}

.ui-tabs.j-expandable-tab > .ui-tabs-panels,
.ui-datatable.j-expandable-table {
	transition: margin 1s ease;
}

.ui-tabs.j-expandable-tab.expanded > .ui-tabs-panels,
.ui-datatable.j-expandable-table.expanded {
	margin: 0 calc(-0.5 * (100vw - 1000px) + var(--content-padding));
}

.j-submission-labels .ui-chip {
	font-size: smaller;
	margin-right: 4px;
}

.j-participants-table .j-col-username {
	min-width: 170px;
	max-width: 350px;
}

.j-participants-table .j-col-labels .ui-chip {
	white-space: nowrap;
}

.j-participants-table .j-col-status {
	white-space: nowrap;
}

.j-participants-table .j-col-score {
	white-space: nowrap;
	width: 50px;
}

.j-participants-table td.j-col-score {
	text-align: right;
}

.j-participants-table .j-col-version {
	white-space: nowrap;
	width: 50px;
}

.j-participants-table .j-col-email {
	min-width: 100px;
	max-width: 150px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.j-participants-table .j-col-profilefield {
	min-width: 100px;
}

.j-participants-table .j-col-course {
	min-width: 150px;
}

.j-participants-table td.j-col-timestamp {
	white-space: nowrap;
}

.j-participants-table .j-col-courseoffer {
	min-width: 170px;
}

.j-participants-table th.j-col-courseoffer .ui-column-customfilter .ui-selectonemenu {
	width: 150px;
}

.j-participants-table th.j-col-courseoffer .ui-column-customfilter .ui-selectonemenu label {
	text-overflow: ellipsis;
	overflow: hidden;
}

.j-participants-table .j-col-actions {
	width: 65px;
	text-align: center;
	/* TODO Sticky does not work yet */
	/*position: sticky;
	right: 0;
	z-index: 20;*/
}

.j-participants-table td.j-col-actions {
	background: inherit;
}

.j-info-text {
	color: var(--blue-600);
}

.j-info-text::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f05a";
	padding-right: .5ch;
}
.j-participants-table .j-col-explanation {
	max-width: 9.376rem;
	overflow-wrap: break-word;
}

.j-foldermanagement-rightstable {
	width: max-content;
}

.j-foldermanagement-rightstable th {
	font-weight: bold;
}

.j-foldermanagement-rightstable td {
	text-align: center;
}

.j-foldermanagement-rightstable th:not(:first-child),
.j-foldermanagement-rightstable td:not(:first-child) {
	padding-left: var(--content-padding);
}

.j-foldermanagement-rightstable th:not(:last-child),
.j-foldermanagement-rightstable td:not(:last-child) {
	padding-right: var(--content-padding);
}

.j-development-table {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 10px;
}

.j-development-table h3 {
	grid-column-end: span 2;
	margin-bottom: 0;
}

.j-development-table p {
	margin: 0;
	align-self: center;
}

.j-development-table button {
	place-self: center stretch;
}
 /* Align heading and editor config dialog button vertical for the kekule fields table. */
#kekuleFieldsHeader{
  	display: flex;
  	align-items: center; /* Vertical align the elements to the center */
}

/* Compressed button for datatable alignment */
.ui-button.j-table-button .ui-button-text  {
	padding-top: 1px !important;
	padding-bottom: 1px !important;
}

.strikeText{
	 text-decoration: line-through; 
}

/* Hint for redirection when user is in a non-pausable Course */
.j-non-pausable-course-redirect-info.ui-panel .ui-panel-titlebar {
	background: var(--ude-blue);
	color: white;
	border: none;
	padding: .4rem;
}
.j-non-pausable-course-redirect-info.ui-panel .ui-panel-title:before {
	font-family: "Font Awesome 6 Free";
	content: "\f101";
	padding-right: 1ch;
}
.j-non-pausable-course-redirect-info.ui-panel .ui-panel-titlebar .ui-panel-titlebar-icon {
	color: white;
}

.j-non-pausable-course-redirect-info.ui-panel .ui-panel-content {
	background: var(--ude-pale-blue);
	border: none;
	padding: .4rem;
}

/*
  Definitions for JACK's code editor component.
 */
div.j-code-editor-wrapper div.ui-panel-content {
	padding: 0;
	border-radius: var(--border-radius);
}

.j-code-editor-wrapper .j-code-editor-target {
	display: none;
}

.j-code-editor-wrapper .ace-tm .ace_gutter {
	background: var(--gray-200);
}

.j-code-editor-wrapper .ace_editor {
	font-size: smaller;
}

.j-code-editor-wrapper.ui-disabled .ace_editor {
	background: var(--gray-200);
}

.j-code-editor-wrapper.ui-disabled {
	pointer-events: none;
}

/* Definitions for the admin area / user management. */
span.username {
	white-space: nowrap;
}
span.username::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	margin-right: .5ch;
}

span.username.external-user::before {
	content: "\f2bb";
}

span.username.local-user::before {
	content: "\f084";
}

header {
	margin-top: 0;
	padding: 0;
}

header nav#navbar {
	width: 100%;
	padding-top: calc(.5 * var(--content-padding));
	margin-top: 0;
}

header nav .nav-toggler {
	width: unset;
}

header nav#navbar .nav-right {
	margin-left: auto;
}

header nav#navbar div.nav-right {
	display: inline-flex;
}

@media screen and (max-width: 700px) {
	header nav#navbar:not(.toggled) div.nav-right {
		display: none;
	}
}

header nav#navbar .navbar-brand {
	margin: 0 .75ch;
}

header #developer-warnings:not(:empty) {
	text-align: center;
	padding: 4px;
	background-color: #ec7206;
	color: white;
}

header #developer-warnings.production {
	background-color: #b8103b;
}

header #developer-warnings ::before {
	content: "\f071";
	font: var(--fa-font-solid);
	margin: 4px;
}

header #developer-warnings :last-child::after {
	content: "\f071";
	font: var(--fa-font-solid);
	margin: 4px;
}

body .ui-growl {
	top: 72px;
}

body footer {
	font-size: initial;
}

body footer a {
	white-space: nowrap;
}

body footer nav {
	display: block;
	margin: 0;
}

body footer nav ul.fa-ul {
	margin: 0 0 0 1.5em;
}

body footer table {
	line-height: 1.75;
	text-align: left;
	max-width: var(--content-width);
	margin: 0 auto;
}

body footer table tbody td {
	padding: 0 1em;
	vertical-align: baseline;
}

body footer div#subfooter {
	padding: .5em;
}

div > a > img#ude-logo {
	content: url("/frankfurt-uas/javax.faces.resource/images/logos/ude.svg.xhtml?ln=jack");
	height: 64px;
	padding-top: 6px;
	margin: 6px;
}

div > a > img#zim-logo {
	content: url("/frankfurt-uas/javax.faces.resource/images/logos/zim.svg.xhtml?ln=jack");
	height: 64px;
	padding-bottom: 21px;
	margin: 6px;
}

div > a > img#fra-uas-logo {
	content: url("/frankfurt-uas/javax.faces.resource/images/logos/fra-uas.svg.xhtml?ln=jack");
	height: 64px;
	padding-bottom: 21px;
	margin: 6px;
}

body footer div#copyright {
	color: gray;
	font-size: smaller;
	padding: .5em;
}