/*===========================================
	INFO

	AUTHOR
	----------------------
	BPS Bildungsportal Sachsen GmbH
	Dresdner Str. 76, D-09130 Chemnitz

=============================================*/

@import url(variables.css);

/****************************
	BOOTSTRAP 5 RESET | FIX THIS!
****************************/
/* form-inline dropped, we should also use bootstrap grid functions ... */
.form-inline {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.form-inline .checkbox, .form-inline .radio {
	display: inline-block;
	margin-top: 0;
	margin-bottom: 0;
	vertical-align: middle;
}

.form-inline .form-group {
	display: inline-block;
	margin-bottom: 0;
	vertical-align: middle;
}

/* this is a hack, because form system is bad... course node Lernkartei > order */
.form-group.form-check .col-form-label {
	margin-left: -1.5rem;
}

/* this is because of bps wicket table panel - fix when table is updated */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/****************************
	jQUERY RESET
****************************/
.ui-widget {
	font-family: inherit;
	font-size: 1em;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget .btn {
	font-family: inherit;
	font-size: 1em;
}

.ui-widget-content a {
	color: var(--main-theme-color-60);
}

.ui-widget-content .btn-highlight {
	color: var(--neutral-white);
}

/* DIALOG */
.ui-dialog {
	max-width: 100%;
	padding: 0;
}

.ui-dialog .ui-dialog-titlebar {
	padding: 1em;
	background: none var(--main-theme-color-50);
	border: none;
	border-radius: 0;
	font-weight: normal;
	color: var(--neutral-white);
}

.ui-dialog .ui-dialog-titlebar-close {
	top: inherit;
}

.ui-dialog .ui-dialog-content {
	padding: 1.2em 1em;
}

.ui-dialog .ui-dialog-buttonpane,
.ui-dialog .btn-container {
	padding: .3em 0;
	border-top: 1px solid var(--main-theme-color-50);
	text-align: center;
}

.ui-dialog .btn-container {
	margin: 2em -1em 0 -1em;
	padding-top: .8em;
}

.ui-dialog .btn-container .btn {
	margin-bottom: .3em;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog-buttonset .ui-button {
	background: none var(--neutral-white);
	border: 1px solid var(--main-theme-gray-20);
	color: var(--main-theme-color-50);
}

.ui-dialog-buttonset .ui-button:hover, .ui-dialog-buttonset .ui-button:active {
	background: none var(--main-theme-gray-5);
	border-color: var(--main-theme-gray-20);
	color: var(--main-theme-color-70);
}

.ui-dialog-buttonset .ui-button .ui-button-text {
	padding: .6em 1em;
}

.ui-dialog-buttonset .ui-button.btn-highlight {
	background-color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);
	color: var(--neutral-white);
}

.ui-dialog-buttonset .ui-button.btn-highlight:hover {
	background-color: var(--main-theme-color-70);
	border-color: var(--main-theme-color-70);
}

.ui-dialog-buttonset .ui-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -.4rem;
}

.ui-dialog-button-hack .ui-button {
	padding: 6px 12px;
	line-height: 1.42857143;
}

.dialog-h2 {
	margin: 1em 0;
}

/* TABS */
.ui-tabs {
	border: none !important;
}

.ui-tabs .ui-tabs-panel {
	padding: 0;
}

.ui-tabs .ui-tabs-nav {
	margin-bottom: 1em;
	background: none;
	border-width: 0 0 1px 0;
	border-radius: 0;
}

.ui-tabs .ui-tabs-nav li {
	background: none var(--main-theme-gray-5);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background: none var(--neutral-white);
	border-color: var(--main-theme-gray-20);
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	color: var(--main-theme-gray-70);
}

/* AUTOCOMPLETE */
.ui-autocomplete {
	z-index: 999;
}

/****************************
	FANCY BOX | IFRAME DIALOG
****************************/
.fancybox-slide--iframe .fancybox-content {
	width: 100% !important;
	height: 100% !important;
	max-width: calc(100% - 40px) !important;
	max-height: calc(100% - 60px);
	margin: 40px 0 20px 0 !important;
	box-shadow: 2px 0 15px 2px rgba(255, 255, 255, .3);
}

.fancybox-button {
	width: 35px !important;
	height: 35px !important;
	padding: 8px !important;
}

/****************************
	DRAG AND DROP
****************************/
.sortable-placeholder {
	margin-bottom: 2em;
	background-color: var(--main-theme-gray-5);
	border: 3px dashed var(--main-theme-gray-10);
	border-radius: 5px;
}

/****************************
    DATEPICKER / YUI-CALENDAR
****************************/
.yui-skin-sam .yui-calcontainer {
	min-width: 200px;
}

/****************************
	GLOBAL MESSAGES / PNOTIFY
****************************/
[ui-pnotify].ui-pnotify .brighttheme-notice {
	background-color: var(--accent-theme-color-30);
	border-color: var(--accent-theme-color-30);
	color: var(--accent-theme-color-80);
}

[ui-pnotify].ui-pnotify .brighttheme-info {
	background-color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);
	color: var(--neutral-white);
}

[ui-pnotify].ui-pnotify .brighttheme-success {
	background-color: var(--success-color-50);
	border-color: var(--success-color-50);
	color: var(--neutral-white);
}

[ui-pnotify].ui-pnotify .brighttheme-error {
	background: var(--error-color-70);
	border-color: var(--error-color-70);
	color: var(--neutral-white);
}

[ui-pnotify].ui-pnotify .ui-pnotify-container {
	padding: 1em !important;
	border-radius: 4px;
	box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, 0.3);
}

[ui-pnotify].ui-pnotify .ui-pnotify-container .ui-pnotify-title {
	margin-bottom: .3em;
	text-transform: none;
	font-size: 1.1em;
	font-weight: bold;
}

[ui-pnotify].ui-pnotify-with-icon .ui-pnotify-confirm,
[ui-pnotify].ui-pnotify-with-icon .ui-pnotify-text,
[ui-pnotify].ui-pnotify-with-icon .ui-pnotify-title {
	margin-left: 1.3em !important;
}

/****************************
    SKIP LINKS
****************************/
.skip-link {
	position: absolute;
	top: -1000em;
	left: -1000em;
	height: 1px;
	width: 1px;
}

.skip-link:focus, .skip-link:active {
	top: 0;
	left: 0;
	height: auto;
	width: auto;
	padding: .3em 1em;
	background: var(--neutral-white);
	color: var(--neutral-black);
	z-index: 11;
}

.skip-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
}

/****************************
	FONTS
****************************/
@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot');
	src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
	url('fonts/icomoon.woff') format('woff'),
	url('fonts/icomoon.ttf') format('truetype'),
	url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* noto-sans-regular - latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/noto-sans-v42-latin-regular.woff2') format('woff2');
}

/* noto-sans-italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans';
	font-style: italic;
	font-weight: 400;
	src: url('fonts/noto-sans-v42-latin-italic.woff2') format('woff2');
}

/* noto-sans-700 - latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/noto-sans-v42-latin-700.woff2') format('woff2');
}

/* noto-sans-700italic - latin */
@font-face {
	font-display: swap;
	font-family: 'Noto Sans';
	font-style: italic;
	font-weight: 700;
	src: url('fonts/noto-sans-v42-latin-700italic.woff2') format('woff2');
}

/****************************
	GENERAL
****************************/
html, body {
	height: 100%;
	font-family: Arial, Verdana, sans-serif;
	font-size: 92%;
}

body {
	color: var(--main-theme-gray-70);
}

h1 {
	margin: .5em 0 .3em 0;
	font-size: 1.6em;
}

h2 {
	margin: .5em 0 .3em 0;
	font-size: 1.4em;
}

h3 {
	margin: .5em 0 .2em 0;
	font-size: 1.2em;
}

h4 {
	font-size: .9em;
	text-transform: uppercase;
}

p {
	margin: 0 0 .3em 0;
}

a {
	color: var(--main-theme-color-60);
	text-decoration: underline;
}

a:hover, a:focus {
	color: var(--main-theme-color-70);
}

a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: .2rem;
}

details {
	margin-bottom: 1em;
	padding: .5em .5em 0;
	border: 1px solid var(--main-theme-gray-40);
	border-radius: 4px;
}

details[open] {
	padding: .5em;
}

summary {
	margin: -.5em -.5em 0;
	padding: .5em;
	text-decoration: underline;
	font-weight: bold;
}

details[open] summary {
	border-bottom: 1px solid var(--main-theme-gray-40);
	margin-bottom: .5em;
}

summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -.3rem;
}

iframe {
	border: 0;
}

.iframe-container {
	padding: 0 1%;
}

.iframe-container iframe {
	width: 100%;
}

.iframe-container .additional-right {
	margin-bottom: 1em;
}

.course-node.tu .iframe-container iframe,
.page.iqtest .iframe-container iframe,
.page.iqsurv .iframe-container iframe {
	min-height: 700px;
}

.mobile small {
	font-size: 1em;
}

#wrap {
	height: auto;
	margin: 0 auto -35px;
	min-height: 100%;
	padding: 0 0 35px;
}

.mobile .content-container {
	float: none;
	width: 100%;
	padding: 0;
}

.clickblocker {
	display: block;
	position: absolute;
	z-index: 50000;
	width: 100%;
	height: 100%;
}

.veil {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	animation: show 1.5s;
	background: url(images/icons/loading.svg) no-repeat center center rgba(63, 68, 68, .4);
}

@keyframes show {
	0% {
		opacity: 0;
	}
	75% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

.ui-autocomplete-loading {
	background: url(images/icons/loading.svg) no-repeat right center rgba(63, 68, 68, .4);
	background-size: contain;
}

.blumenkringelwarte {
	width: 100%;
	height: 150px;
	margin-bottom: 1em;
	padding-top: 80px;
	background: url(images/icons/loading.svg) no-repeat center 35px transparent;
	border: 3px dashed var(--main-theme-gray-5);
	text-align: center;
	color: var(--main-theme-gray-50);
}

.panel .blumenkringelwarte {
	height: 60px;
	margin-bottom: 0;
	padding-top: 40px;
	background-position-y: 0;
	border: none;
}

/****************** ICONS ******************/
.icon {
	background-image: url(images/icons/arrow-list.png);
	background-repeat: no-repeat;
	background-position: 0 center;
}

.icon-right {
	background-position: right center;
}

.btn.only {
	display: inline-block;
	height: 1.7em;
	width: 2em;
	padding: 0;
	background: none transparent;
	border: 0;
}

.btn.only:hover, .btn.only:focus {
	background: none transparent;
	border: 0;
}

/****************** FONTICONS ******************/
.fonticon {
	position: relative;
	top: 1px;
	display: inline-block;
	font-size: 1em;
	font-family: 'icomoon';
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.fonticon.right {
	float: right;
	top: 33%;
	right: 20px;
}

/* icomoon - don´t change, these lines will be updated */
/* v9.1 */
.icon-aichat:before {
	content: "\e920";
}

.icon-h5p:before {
	content: "\e91f";
}

.icon-reset:before {
	content: "\ea4b";
}

.icon-radio-unchecked:before {
	content: "\ee73";
}

.icon-bubble-info-check:before {
	content: "\e91e";
}

.icon-bubble-info:before {
	content: "\e91d";
}

.icon-move:before {
	content: "\ed4d";
}

.icon-circle-up:before {
	content: "\ede7";
}

.icon-circle-down:before {
	content: "\ede9";
}

.icon-eportfolio:before {
	content: "\e903";
}

.icon-filter-status:before {
	content: "\e91b";
}

.icon-filter-group:before {
	content: "\e91c";
}

.icon-lti:before {
	content: "\e915";
}

.icon-room-start:before {
	content: "\e916";
}

.icon-enrollment:before {
	content: "\e917";
}

.icon-task-choose:before {
	content: "\e918";
}

.icon-survey-start:before {
	content: "\e919";
}

.icon-test-start:before {
	content: "\e91a";
}

.icon-room-settings:before {
	content: "\e914";
}

.icon-clock-add:before {
	content: "\e913";
}

.icon-book-eye:before {
	content: "\e912";
}

.icon-manual-open:before {
	content: "\e911";
}

.icon-palette:before {
	content: "\e92a";
}

.icon-direction:before {
	content: "\ea4a";
}

.icon-waiting:before {
	content: "\ea73";
}

.icon-not-entered:before {
	content: "\ea74";
}

.icon-user-lock:before {
	content: "\eafd";
}

.icon-gears:before {
	content: "\eb60";
}

.icon-pie-chart:before {
	content: "\eb81";
}

.icon-globe:before {
	content: "\ec96";
}

.icon-unlink:before {
	content: "\ec9c";
}

.icon-start:before {
	content: "\ed7e";
}

.icon-arrow-left-small:before {
	content: "\edca";
}

.icon-toggle-on:before {
	content: "\ee74";
}

.icon-toggle-off:before {
	content: "\ee75";
}

.icon-books-admin:before {
	content: "\e910";
}

.icon-globe-e:before {
	content: "\e90e";
}

.icon-user-globe-e:before {
	content: "\e90f";
}

.icon-file-edit:before {
	content: "\e90d";
}

.icon-user-globe:before {
	content: "\e90c";
}

.icon-admin:before {
	content: "\e90b";
}

.icon-resume-allowed:before {
	content: "\e904";
}

.icon-resume-requested:before {
	content: "\e905";
}

.icon-disconnected:before {
	content: "\e906";
}

.icon-unknown:before {
	content: "\e907";
}

.icon-canceled:before {
	content: "\e908";
}

.icon-finished:before {
	content: "\e909";
}

.icon-working:before {
	content: "\e90a";
}

.icon-folder-open:before {
	content: "\e9dc";
}

.icon-print:before {
	content: "\ea68";
}

.icon-disk:before {
	content: "\ea89";
}

.icon-lock:before {
	content: "\eb55";
}

.icon-unlocked:before {
	content: "\eb56";
}

.icon-medal-first:before {
	content: "\eba2";
}

.icon-cube3:before {
	content: "\ec1a";
}

.icon-flag:before {
	content: "\eca4";
}

.icon-thumbs-down:before {
	content: "\ecf7";
}

.icon-stack-text:before {
	content: "\ed44";
}

.icon-file-puzzle:before {
	content: "\e901";
}

.icon-puzzle-pencil:before {
	content: "\e902";
}

.icon-table-download:before {
	content: "\e900";
}

.icon-crying:before {
	content: "\e60c";
}

.icon-frustrated:before {
	content: "\e60d";
}

.icon-sleepy:before {
	content: "\e60e";
}

.icon-hipster:before {
	content: "\e610";
}

.icon-baffled:before {
	content: "\e612";
}

.icon-book-puzzle:before {
	content: "\e614";
}

.icon-assess:before {
	content: "\e613";
}

.icon-puzzle-check:before {
	content: "\e611";
}

.icon-a-z:before {
	content: "\e60f";
}

.icon-finish:before {
	content: "\e60b";
}

.icon-sort:before {
	content: "\e60a";
}

.icon-sort-asc:before {
	content: "\e608";
}

.icon-sort-desc:before {
	content: "\e609";
}

.icon-dialog:before {
	content: "\e607";
}

.icon-wiki:before {
	content: "\e605";
}

.icon-notmobile:before {
	content: "\e600";
}

.icon-menu:before {
	content: "\e604";
}

.icon-help-bubble:before {
	content: "\e601";
}

.icon-help:before {
	content: "\e602";
}

.icon-info:before {
	content: "\e603";
}

.icon-checklist:before {
	content: "\e606";
}

.icon-home:before {
	content: "\e002";
}

.icon-edit:before {
	content: "\e00e";
}

.icon-pencil:before {
	content: "\e011";
}

.icon-image:before {
	content: "\e02c";
}

.icon-film:before {
	content: "\e04a";
}

.icon-new:before {
	content: "\e061";
}

.icon-podcast:before {
	content: "\e069";
}

.icon-book:before {
	content: "\e070";
}

.icon-course:before {
	content: "\e071";
}

.icon-books:before {
	content: "\e072";
}

.icon-file-check:before {
	content: "\e083";
}

.icon-file:before {
	content: "\e085";
}

.icon-copy:before {
	content: "\e091";
}

.icon-stack:before {
	content: "\e095";
}

.icon-stack2:before {
	content: "\e097";
}

.icon-folder:before {
	content: "\e0a1";
}

.icon-tag:before {
	content: "\e0b7";
}

.icon-envelop-filled:before {
	content: "\e0ec";
}

.icon-envelop:before {
	content: "\e0ef";
}

.icon-clock:before {
	content: "\e103";
}

.icon-bell:before {
	content: "\e10c";
}

.icon-calendar:before {
	content: "\e112";
}

.icon-screen:before {
	content: "\e120";
}

.icon-box-add:before {
	content: "\e130";
}

.icon-reply:before {
	content: "\e14b";
}

.icon-bubbles:before {
	content: "\e154";
}

.icon-bubble:before {
	content: "\e164";
}

.icon-bubble-blocked:before {
	content: "\e16c";
}

.icon-bubble-locked:before {
	content: "\e172";
}

.icon-bubble-star:before {
	content: "\e173";
}

.icon-group:before {
	content: "\e186";
}

.icon-users:before {
	content: "\e18d";
}

.icon-user:before {
	content: "\e194";
}

.icon-spinner:before {
	content: "\e1a7";
}

.icon-search:before {
	content: "\e1ba";
}

.icon-gear:before {
	content: "\e1df";
}

.icon-stats:before {
	content: "\e207";
}

.icon-medal:before {
	content: "\e218";
}

.icon-trophy:before {
	content: "\e21e";
}

.icon-remove:before {
	content: "\e250";
}

.icon-puzzle:before {
	content: "\e270";
}

.icon-list:before {
	content: "\e29a";
}

.icon-numbered-list:before {
	content: "\e29c";
}

.icon-grid:before {
	content: "\e2a4";
}

.icon-more:before {
	content: "\e2aa";
}

.icon-download:before {
	content: "\e2ba";
}

.icon-upload:before {
	content: "\e2bb";
}

.icon-link:before {
	content: "\e2c9";
}

.icon-eye:before {
	content: "\e2d9";
}

.icon-eye-blocked:before {
	content: "\e2da";
}

.icon-star:before {
	content: "\e2ff";
}

.icon-star-filled:before {
	content: "\e301";
}

.icon-heart:before {
	content: "\e307";
}

.icon-thumbs-up:before {
	content: "\e310";
}

.icon-happy:before {
	content: "\e31e";
}

.icon-smiley:before {
	content: "\e320";
}

.icon-tongue:before {
	content: "\e322";
}

.icon-sad:before {
	content: "\e324";
}

.icon-wink:before {
	content: "\e326";
}

.icon-grin:before {
	content: "\e328";
}

.icon-cool:before {
	content: "\e32a";
}

.icon-angry:before {
	content: "\e32c";
}

.icon-evil:before {
	content: "\e32e";
}

.icon-shocked:before {
	content: "\e330";
}

.icon-confused:before {
	content: "\e332";
}

.icon-neutral:before {
	content: "\e334";
}

.icon-wondering:before {
	content: "\e336";
}

.icon-stack3:before {
	content: "\e34f";
}

.icon-warning:before {
	content: "\e356";
}

.icon-plus-circle:before {
	content: "\e35f";
}

.icon-blocked:before {
	content: "\e364";
}

.icon-cancel-circle:before {
	content: "\e366";
}

.icon-checkmark-circle:before {
	content: "\e368";
}

.icon-close:before {
	content: "\e36b";
}

.icon-checkmark:before {
	content: "\e370";
}

.icon-minus:before {
	content: "\e375";
}

.icon-plus:before {
	content: "\e376";
}

.icon-enter:before {
	content: "\e379";
}

.icon-logout:before {
	content: "\e37a";
}

.icon-reload:before {
	content: "\e3a8";
}

.icon-arrow-right:before {
	content: "\e3b1";
}

.icon-arrow-right2:before {
	content: "\e3b5";
}

.icon-arrow-down:before {
	content: "\e3b6";
}

.icon-arrow-right3:before {
	content: "\e3bb";
}

.icon-arrow-down2:before {
	content: "\e3bd";
}

.icon-arrow-left:before {
	content: "\e3bf";
}

.icon-checkbox-checked:before {
	content: "\e435";
}

.icon-checkbox-unchecked:before {
	content: "\e436";
}

.icon-filter:before {
	content: "\e445";
}

.icon-font-size:before {
	content: "\e448";
}

.icon-bold:before {
	content: "\e454";
}

.icon-italic:before {
	content: "\e456";
}

.icon-math:before {
	content: "\e459";
}

.icon-table:before {
	content: "\e466";
}

.icon-link-external:before {
	content: "\e47c";
}

.icon-code:before {
	content: "\e480";
}

.icon-share:before {
	content: "\e48c";
}

.icon-rss:before {
	content: "\e4a0";
}

.icon-blogger:before {
	content: "\e4c1";
}

.icon-file-pdf:before {
	content: "\e4e2";
}

.icon-file-openoffice:before {
	content: "\e4e3";
}

.icon-file-word:before {
	content: "\e4e4";
}

.icon-file-excel:before {
	content: "\e4e5";
}

.icon-file-zip:before {
	content: "\e4e6";
}

.icon-file-powerpoint:before {
	content: "\e4e7";
}

.icon-file-xml:before {
	content: "\e4e8";
}

.icon-file-css:before {
	content: "\e4e9";
}

.icon-cross3:before {
	content: "\ed6e";
}


/******* COURSE NODES *******/

.icon-bc:before {
	content: "\e0a1";
}

/*folder*/
.icon-bib:before {
	content: "\e072";
}

.icon-blog:before {
	content: "\e4c1";
}

.icon-cal:before {
	content: "\e112";
}

.icon-cl:before {
	content: "\e606";
}

/*checklist*/
.icon-co:before {
	content: "\e0ec";
}

.icon-cp:before {
	content: "\ed44";
}

.icon-den:before {
	content: "\e112";
}

.icon-en:before {
	content: "\e917";
}

/*entrollment*/
.icon-ep:before {
	content: "\e902";
}

.icon-fo:before {
	content: "\e154";
}

.icon-fcs:before {
	content: "\e34f";
}

/*flashcard*/
.icon-glossary:before {
	content: "\e60f";
}

.icon-iqself:before {
	content: "\e435";
}

.icon-iqsurv:before {
	content: "\e601";
}

.icon-iqtest:before {
	content: "\e435";
}

.icon-ll:before {
	content: "\e2c9";
}

.icon-mediathek:before {
	content: "\e04a";
}

.icon-ms:before {
	content: "\e301";
}

.icon-profile:before {
	content: "\e194";
}

.icon-projectbroker:before {
	content: "\e095";
}

.icon-root:before {
	content: "\e071";
}

.icon-scorm:before {
	content: "\ec1a";
}

.icon-sp:before {
	content: "\e085";
}

.icon-st:before {
	content: "\e097";
}

/*structure*/
.icon-subcourse:before {
	content: "\e071";
}

.icon-ta:before {
	content: "\e011";
}

/*task*/
.icon-tu:before {
	content: "\e085";
}

/*external page*/
.icon-vc:before {
	content: "\e120";
}

/******* FILE TYPES *******/
.txt:before,
.file:before,
.rtf:before,
.bat:before,
.exe:before,
.gz:before,
.log:before,
.patch:before,
.ra:before,
.ram:before,
.readme:before,
.tgz:before {
	content: "\e085";
}

/*file icon for all types*/

.jpg:before,
.jpeg:before,
.png:before,
.gif:before,
.bmp:before,
.ps:before {
	content: "\e02c";
}

.avi:before,
.mp4:before,
.dvi:before,
.midi:before,
.mov:before,
.mp3:before,
.mpeg:before,
.mpg:before,
.wav:before {
	content: "\e04a";
}

.pdf:before {
	content: "\e4e2";
}

.odt:before {
	content: "\e4e3";
}

.doc:before,
.docx:before {
	content: "\e4e4";
}

.xls:before,
.xlsx:before {
	content: "\e4e5";
}

.zip:before,
.tar:before {
	content: "\e4e6";
}

.ppt:before,
.pptx:before {
	content: "\e4e7";
}

.xml:before,
.htm:before,
.html:before {
	content: "\e4e8";
}

.css:before,
.xsl:before {
	content: "\e4e9";
}

/* icomoon - custom */
.icon-color-highlight {
	color: var(--main-theme-color-50);
}

.icon-color-success {
	color: var(--success-color-50);
}

.icon-color-warning {
	color: var(--accent-theme-color-50);
}

.icon-color-danger {
	color: var(--error-color-70);
}

.icon-star:before {
	color: var(--main-theme-gray-50);
}

.icon-star-filled:before {
	color: var(--accent-theme-color-50);
}

.btn:hover .icon-star-filled:before {
	color: var(--main-theme-gray-60);
}

.btn:hover .icon-star:before {
	color: var(--accent-theme-color-50);
}

.icon-notmobile {
	position: absolute;
	right: 46px;
	top: 33%;
}

.icon-notmobile:before {
	font-size: 1.1em;
}

.icon-toggle-off:before {
	color: var(--main-theme-gray-40);
}

.icon-toggle-on:before {
	color: var(--main-theme-gray-50);
}

.icon-waiting,
.icon-working {
	color: var(--main-theme-color-50);
}

.icon-finished {
	color: var(--success-color-50);
}

.icon-resume-requested {
	color: var(--accent-theme-color-50);
}

.icon-resume-allowed {
	color: var(--main-theme-color-70);
}

.icon-canceled {
	color: var(--error-color-70);
}

.assess-info .icon-close,
.box-invite .icon-close,
.list-group-item .icon-close {
	color: var(--error-color-70);
}

.assess-info .icon-checkmark,
.box-invite .icon-checkmark,
.list-group-item .icon-checkmark {
	color: var(--success-color-50);
}

/************* TYPOGRAPHY *************/
.small {
	font-size: .9em
}

/* classes text-* must use !important to overwrite bootstrap */
.text-warning {
	color: var(--accent-theme-color-50) !important;
}

.text-success {
	color: var(--success-color-50) !important;
}

.text-info {
	color: var(--main-theme-color-50) !important;
}

.text-danger {
	color: var(--error-color-70) !important;
}

.text-bg-primary {
	background-color: var(--main-theme-color-50) !important;
}

.text-bg-secondary {
	background-color: var(--main-theme-gray-50) !important;
}

.text-bg-warning {
	background-color: var(--accent-theme-color-30) !important;
	color: var(--accent-theme-color-80) !important;
}

.text-bg-success {
	background-color: var(--success-color-50) !important;
}

.text-bg-danger {
	background-color: var(--error-color-70) !important;
}

/************* LINKS *************/
.content-anchor {
	line-height: 2.75;
	color: var(--2nd-theme-color-50);
}

.mobile .content-anchor {
	display: block;
	height: 3em;
	margin: 5px;
	padding-left: 1em;
	background-color: var(--2nd-theme-color-10);
}

/************* LISTS *************/
ul {
	padding-left: 2em;
}

.list-unstyled {
	margin: 0;
}

dl {
	margin-bottom: 1em;
}

dl:not(.row):not(.dl-inline) dd {
	margin-bottom: .7em;
}

.dl-inline dt {
	display: inline-block;
	width: 210px;
	vertical-align: top;
	text-align: left;
}

.dl-inline dd {
	display: inline-block;
}

/* list group */
.list-group-item {
	gap: .5rem;
}

.list-group-item:hover {
	background-color: var(--main-theme-gray-5);
	color: var(--main-theme-gray-80);
}

.list-group-item-action:not(.active):hover {
	background-color: transparent;
}

.list-group-item .btn:focus-visible {
	outline-offset: -.2rem;
}

.list-group-item-action {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding-block: .3rem;
	color: var(--main-theme-gray-70);
	text-decoration: none;
}

.list-group-item-action:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: .3rem;
}

.list-group-item-action:empty {
	min-height: 0;
	padding: 0;
}

.list-group-item-action.icon-right .list-group-item-text,
.list-group-item-action.icon-right .list-group-item-heading {
	padding-right: 1.7rem;
}

.list-group-item .list-group-fav {
	padding-block: .2rem;
	color: var(--main-theme-gray-70);
}

.list-group-item .list-group-function {
	display: flex;
}

.list-group-item > .btn:hover, .list-group-item > .btn:focus {
	color: var(--main-theme-gray-70);
}

.list-group-item .badge {
	position: absolute;
	right: 3.5rem;
}

.projectbroker .list-group-item .badge {
	top: 35%;
}

.list-group-item.highlight {
	background-color: var(--2nd-theme-color-10);
}

.list-group-item-heading {
	font-weight: normal;
	overflow: hidden;
}

.list-group-item-text {
	display: block;
	font-size: .85em;
	line-height: 1.2em;
	color: var(--main-theme-gray-60);
}

.list-group-item:has(.list-group-function) .list-group-item-link {
	padding-right: 5rem;
}

.box .list-group {
	margin: -5px;
}

.list-group-checkbox input {
	margin-block: .5rem;
}

/*.list-group-item:has(.list-group-fav .icon-folder) .list-group-item-text {margin-left: .3rem;}*/

/* small */
.list-group-small .list-group-item-action {
	padding-block: 0;
}

.list-group-small .list-group-item-heading,
.list-group-small .list-group-item-text {
	display: inline;
}

/* mobile */
.mobile .list-group-item-action:empty {
	min-height: 0;
	padding: 0;
}

.mobile .list-group-item-action:has(.list-group-item-text) .fonticon {
	align-self: baseline;
}

/* pagination */
.pager {
	margin: 0;
	text-align: center;
}

.pagination {
	display: inline-block;
	padding-left: 0;
	margin: 0;
	vertical-align: middle;
}

.pagination > li {
	display: inline;
}

.pagination > li > a {
	color: var(--main-theme-color-50);
}

.pagination > li > a, .pagination > li > span {
	position: relative;
	float: left;
	padding: 0 .5em;
	text-decoration: none;
	border-radius: 3px;
	line-height: 21px;
}

.pagination a[aria-disabled="true"] {
	color: var(--main-theme-gray-60);
	background-color: var(--main-theme-gray-10);
	cursor: not-allowed;
}

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
	background-color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);
	color: var(--neutral-white);
}

.pager-showall {
	font-size: .8em
}

.pagination a:focus-visible {
	outline-offset: -.4rem;
}

/* categories (used in glossary and profile course node) */
.category-list {
	margin-left: 0;
}

.category-list > li {
	padding: 0 .5em;
	background-color: var(--main-theme-gray-50);
	color: var(--neutral-white);
	text-transform: uppercase;
}

.category-list > li:last-child {
	text-transform: inherit;
}

.category-list > li > a {
	color: var(--neutral-white);
}

.category-list .disabled {
	background-color: var(--main-theme-gray-10);
	color: var(--main-theme-gray-60);
}

.category-list .active {
	background-color: var(--3rd-theme-color-50);
}

/* breadcrumb */
.breadcrumb {
	margin-bottom: 10px;
}

.breadcrumb > li + li:before {
	padding: 0 0 0 5px;
}

.breadcrumb a[aria-current="page"] {
	text-decoration: none;
	color: var(--main-theme-gray-70);
}

/* steps */
.steps {
	position: relative;
	margin-bottom: 1em;
	background-color: var(--main-theme-gray-5);
}

.steps li {
	position: relative;
	padding: 0 1em 0 1.3em;
	height: 46px;
	line-height: 46px;
	background: var(--main-theme-gray-5);
}

.steps li:not(:first-child) {
	padding-left: 2em;
}

.steps li a {
	display: inline-block;
	height: 100%;
	color: var(--main-theme-gray-80);
}

.steps .arrow {
	position: absolute;
	display: block;
	top: 0;
	right: -16px;
	border: 23px solid transparent;
	border-left: 15px solid var(--main-theme-gray-20);
	border-right: 0;
	z-index: 1;
}

.steps .arrow:after {
	position: absolute;
	display: block;
	top: -23px;
	right: 1px;
	border: 23px solid transparent;
	border-left: 15px solid var(--main-theme-gray-5);
	border-right: 0;
	content: "";
}

.steps .active {
	background-color: var(--2nd-theme-color-10);
}

.steps .active .arrow, .steps .active .arrow:after {
	border-left-color: var(--2nd-theme-color-10);
}

/****************** TABLES ******************/
caption {
	color: var(--main-theme-gray-70);
}

.table-panel table {
	width: 100%;
}

.table-panel th {
	vertical-align: bottom;
	text-align: left;
	border-bottom: 2px solid var(--main-theme-gray-10);
	cursor: move;
}

.table-panel th, .table-panel td {
	padding: 8px;
	line-height: 1.428571429;
	vertical-align: top;
	border-top: 1px solid var(--main-theme-gray-10);
}

.table-panel th:hover {
	background-color: var(--main-theme-gray-5);
}

/*.table-panel th a, .table-panel td a {text-decoration: none;}
.table-panel th a:hover, .table-panel td a:hover {text-decoration: underline;}*/

.table-panel tbody > tr:nth-child(odd) {
	background-color: var(--main-theme-gray-5);
}

.table-panel tbody > tr:hover {
	background-color: var(--2nd-theme-color-5);
}

.table-panel tbody > tr.highlight {
	background-color: var(--2nd-theme-color-10);
}

.table-neutral tbody > tr,
.table-neutral th,
.table-neutral td {
	padding: 0;
	background: none transparent;
	border: none;
}

.table-header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .5rem;
	min-height: 2.5em;
	padding: 5px;
	background-color: var(--2nd-theme-color-5);
}

tr.table-header {
	display: table-row;
}

tr.table-header td {
	background-color: var(--2nd-theme-color-5);
}

.table-header-functions, .table-header-additional {
	display: flex;
	gap: .3rem;
	flex-wrap: wrap;
}

/* .table-header-functions ul.tagit {margin: 0 -.1em 0 0; border-radius: 3px 0 0 3px;} */
/* .table-header-functions ul.tagit li.tagit-new {padding: 0.2em 4px .15em 0;}  */

.table-header-additional .input-group > .btn, .table-header-additional .input-group > .form-control {
	padding: .25rem .5rem;
	font-size: .875em;
	border-radius: var(--bs-border-radius-sm);
}

.table-search {
	float: left;
	margin-right: .3rem;
}

.table-header-left .btn-group:has(.table-search) {
	margin-right: .3rem;
}

.table-header-right > .btn-group:first-child {
	margin-right: .3rem;
}

.table-select {
	position: relative;
	min-width: 3.5em;
}

.table-select .btn-group {
	position: absolute;
	top: .5em;
}

.table-sort {
	white-space: nowrap;
}

.table-sort button {
	border: none;
	background-color: transparent;
	color: var(--main-theme-color-50);
	font-weight: bold;
}

.table-sort .fonticon:before {
	content: "\e60a";
}

.table-sort.asc .fonticon:before {
	content: "\e609";
}

.table-sort.desc .fonticon:before {
	content: "\e608";
}

.table-footer {
	min-height: 35px;
	padding: .3em 0;
	line-height: 30px;
	border-top: 4px solid var(--2nd-theme-color-10);
	border-bottom: 1px solid var(--2nd-theme-color-10);
}

.table-footer small {
	float: left;
	display: inline-block;
	padding-left: .5em;
}

.new-table-panel .table-footer > div {
	display: flex;
	justify-content: space-between;
}

.new-table-panel .table-footer .form-control {
	display: inline;
	width: auto;
}

.table-selections {
	background-color: var(--main-theme-color-50);
	color: var(--neutral-white);
}

.table-td-hint-text {
	display: block;
	margin-top: 0.3em;
	line-height: 1.2em;
	color: var(--main-theme-gray-60);
}

/****************** FORMS ******************/

.form-control:focus,
.form-select:focus {
	outline: 2px solid var(--main-theme-gray-50);
	box-shadow: none;
	outline-offset: -.2rem;
}

input[type=checkbox]:focus, input[type=file]:focus, input[type=radio]:focus {
	outline: 2px solid var(--main-theme-gray-50);
	outline-offset: .2rem;
}

fieldset {
	margin: 1em 0;
}

legend,
.legend {
	margin-bottom: 10px;
	padding: .2em .5em;
	background-color: var(--main-theme-gray-5);
	font-size: 1em;
	font-weight: bold;
}

.form-group {
	position: relative;
	margin-bottom: .9em;
}

.form-horizontal label {
	font-weight: normal;
}

/* fix form, remove when horizontal sub forms are fixed */
.form-horizontal.form-group:has(> .col-form-label),
.form-horizontal .form-group:has(.form-control-static) {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-.5 * var(--bs-gutter-x));
	margin-left: calc(-.5 * var(--bs-gutter-x));

	.col-form-label {
		padding-left: calc(var(--bs-gutter-x) * .5);
	}

	.form-control-static {
		padding-left: calc(var(--bs-gutter-x) * .5);
	}
}

.form-control, .form-select, .form-check-input {
	color: var(--main-theme-gray-70);
	border-color: var(--main-theme-gray-40);
	font-size: 1em; /* change from rem to em so size adjusts to font-size settings (a11y) */
}

.form-subgroup {
	margin-left: 1.5rem;
}

.form-horizontal .form-inline select.form-control {
	display: inline-block;
	width: 100%;
}

.form-horizontal .form-inline .form-group {
	margin: 0;
}

.form-horizontal .form-inline .col-form-label {
	display: block;
	text-align: left;
}

.form-horizontal .form-inline .btn {
	vertical-align: bottom;
}

.form-horizontal .form-inline .checkbox,
.form-horizontal .form-inline .radio {
	min-width: inherit;
	padding: 4px 10px 0 0;
}

.form-horizontal .form-inline.form-group {
	margin: 0;
}

.form-required .col-form-label .required-icon:after {
	position: absolute;
	top: -.2rem;
	content: '*';
	padding-left: .1rem;
	color: var(--main-theme-color-50);
	font-size: 1.2em;
}

.wizard-dialog .form-required .col-form-label .required-icon:after {
	position: relative;
	font-size: inherit;
}

/* stupid hack */

.form-inline .form-required .col-form-label {
	padding-right: 1.2em;
}

/* .form-inline .form-group, .form-inline .form-group div {display: inline-block;} */
/* .form-inline .form-control {display: inline-block; vertical-align: middle;} */

.form-autocomplete-container {
	margin-bottom: 0;
}

.form-autocomplete-container .ui-autocomplete-input {
	min-width: 200px;
}

.checkbox-inline {
	vertical-align: baseline;
}

.form-horizontal .form-inline .radio label,
.form-horizontal .form-inline .checkbox label {
	padding-left: .2em;
}

.has-error .form-control,
.has-error .form-select {
	border-color: var(--error-color-50);
}

.has-error .form-text, .has-error .form-label, .has-error .col-form-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
	color: var(--error-color-70);
}

/*  Internet Explorer and Microsoft Edge provide this functionality natively, using an interactive eye icon associated with the ::ms-reveal pseudo-class. Since we’ve provided our own (cross-browser) solution, it would be wise to suppress this feature: */
input[type=password]::-ms-reveal {
	display: none;
}

.duration-field {
	display: flex;
	gap: .5rem;
	padding-left: .5rem;
}

.duration-field > span {
	display: flex;
	align-items: center;
	gap: .5rem;
}

input[type="color"] {
	width: 2.5rem;
	height: 2.2em;
	padding: .2rem;
}

/* input group */
.input-group-sm > .btn,
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
	font-size: .875em; /* change from rem to em so size adjusts to font-size settings (a11y) */
}

/* TINY MCE */
.mce-content-body {
	height: auto;
}

.tox.tox-tinymce {
	border: 1px solid var(--main-theme-gray-40);
	border-radius: 4px;
}

.tox .tox-statusbar .tox-statusbar__branding svg {
	fill: rgba(34, 47, 62, .4);
}

.tox .tox-mbtn:focus-visible, .tox .tox-tbtn:focus-visible, .tox .tox-statusbar a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -.2rem;
}

/* jQuery Upload / dropzone.js */
.dropzone {
	min-height: 100px;
	margin: 1em 0 2em 0;
	padding: 10px;
	border-radius: 3px;
	border: 2px dashed var(--2nd-theme-color-50);
}

.dropzone .dz-message {
	margin: 0;
}

.dropzone .dz-preview .dz-image {
	border: 1px solid var(--2nd-theme-color-10);
}

.dropzone .dz-error .dz-image {
	border-color: var(--error-color-50);
}

.dropzone .dz-preview.dz-file-preview .dz-image {
	background: var(--2nd-theme-color-10);
}

.dropzone .dz-preview .complex-remove-button {
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 21;
}

.dropzone .dz-preview .complex-remove-button .fonticon {
	font-size: 20px;
	cursor: pointer;
}

.dropzone .dz-error-mark svg g {
	fill: var(--error-color-50);
}

.dropzone .dz-preview .dz-error-message {
	top: 90px;
	left: -40px;
	width: 200px;
	background: var(--error-color-70);
}

.dropzone .dz-preview .dz-error-message:after {
	left: 93px;
	border-bottom-color: var(--error-color-70);
}

/* reset complex upload */
.contact-form .dropzone,
.fo .dropzone,
.review-form .dropzone {
	min-height: initial;
	margin: .2em 0 1.5em 0;
	padding: 0;
}

.contact-form .dropzone .dz-message,
.fo .dropzone .dz-message,
.review-form .dropzone .dz-message {
	margin: .2em 0;
}

.contact-form .dropzone .dz-message p,
.fo .dropzone .dz-message p,
.review-form .dropzone .dz-message p {
	display: inline-block;
	margin-bottom: 0;
}

/****************** BUTTONS ******************/
.btn {
	--bs-btn-font-size: 1em; /* change from rem to em so size adjusts to font-size settings (a11y) */
	--bs-btn-active-color: var(--main-theme-color-70);
	--bs-btn-active-bg: var(--main-theme-gray-5);
	--bs-btn-active-border-color: var(--main-theme-gray-50);

	background-color: var(--neutral-white);
	border: 1px solid var(--main-theme-gray-40);
	color: var(--main-theme-color-50);
}

.btn:hover,
:not(.btn-check) + .btn:active {
	background-color: var(--main-theme-gray-5);
	border-color: var(--main-theme-gray-50);
	color: var(--main-theme-color-70);
}

.btn:focus {
	color: var(--main-theme-color-50);
}

.btn:focus-visible, .btn-link:focus-visible {
	--bs-btn-hover-bg: var(--neutral-white);
	--bs-btn-hover-border-color: var(--main-theme-gray-40);
	--bs-btn-hover-color: var(--main-theme-color-50);
	outline: 2px solid currentColor;
	outline-offset: -.4rem;
}

.btn-group-sm > .btn,
.btn-sm {
	--bs-btn-font-size: 0.875em; /* change from rem to em so size adjusts to font-size settings (a11y) */
}

.btn-big {
	width: 8.5em;
	height: 8.5em;
	border-width: 2px;
	white-space: normal;
}

.btn-big .fonticon {
	display: block;
	margin-bottom: .2em;
	font-size: 2.5em;
}

.btn-big .badge {
	position: absolute;
	top: 5px;
	right: 5px;
}

.btn-big:focus-visible {
	outline-width: 3px;
	outline-offset: -.5rem;
}

.btn-highlight {
	background-color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);
	color: var(--neutral-white);

}

.btn-highlight:hover, .btn-highlight:focus, .btn-highlight:active {
	background-color: var(--main-theme-color-70);
	border-color: var(--main-theme-color-70);
	color: var(--neutral-white);
}

.btn-highlight:focus-visible {
	outline-color: var(--neutral-white);
}

.btn-secondary {
	background-color: var(--main-theme-gray-50);
	border-color: var(--main-theme-gray-50);
	color: var(--neutral-white);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
	background-color: var(--main-theme-gray-70);
	border-color: var(--main-theme-gray-70);
	color: var(--neutral-white);
}

.btn-secondary:focus-visible {
	outline-color: var(--neutral-white);
}

.btn-success,
.btn-success:hover, .btn-success:focus, .btn-success:active {
	background-color: var(--success-color-50);
	border-color: var(--success-color-50);
	color: var(--neutral-white);
}

.btn-important {
	background-color: var(--accent-theme-color-50);
	border-color: var(--accent-theme-color-50);
	color: var(--neutral-white);
}

.btn-icon {
	padding-left: 2em;
	background-repeat: no-repeat;
	background-position: .5em center;
}

.btn-link {
	color: var(--main-theme-color-60);
	border: 0;
	background: transparent;
}

.btn-only, .btn-icon.only {
	height: 34px;
	width: 2em;
	background-position: center center;
}

.btn-sm.btn-only, .btn-sm.btn-icon.only {
	height: 30px;
}

.btn-only.dropdown-toggle {
	width: 3em;
	padding: 0 .5em;
	background-position-x: .5em;
	text-align: right;
}

.btn-icon.only:hover, .btn-icon.only:focus, .btn-icon.only:active {
	background-color: transparent;
}

.btn.disabled, .btn[disabled] {
	color: var(--main-theme-gray-50);
}

.btn-disabled {
	cursor: not-allowed !important;
	color: var(--main-theme-gray-50);
}

.btn-disabled:hover, .btn-disabled:focus {
	background-color: #fff;
}

/* reset silly bootstrap stuff */

.mobile .btn-group-mobile {
	width: 100%;
}

.mobile .btn-group-mobile .btn {
	width: 50%;
}

/************* Checkbox and radio button groups *************/
/* https://getbootstrap.com/docs/5.3/components/button-group/#checkbox-and-radio-button-groups */

.btn-check:checked + .btn {
	background-color: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);
	color: var(--neutral-white);
}

.btn-check:focus-visible + .btn {
	outline: 2px solid currentColor;
	outline-offset: -.4rem;
	box-shadow: none;
}

.btn-check:not(:checked) + .btn:hover {
	background-color: var(--main-theme-gray-5);
	border-color: var(--main-theme-gray-50);
	color: var(--main-theme-color-70);
}

/************* DROPDOWN *************/
.dropdown-menu {
	min-width: 10rem;
	font-size: 1em;
	width: max-content;
	max-width: 40rem;
}

.dropdown-menu:has(.form-group) {
	min-width: 18rem;
}

.dropdown-menu .form-group {
	margin-bottom: 0;
}

.dropdown-menu-right {
	left: auto;
	right: 0;
	text-align: left;
}

.dropdown-toggle::after {
	margin-left: 0;
}

.dropdown-item:focus,
.dropdown-item:hover {
	background-color: var(--main-theme-gray-10);
}

.dropdown-item.active, .dropdown-item:active {
	background-color: var(--main-theme-color-50);
}

.dropdown-menu form {
	padding: .5rem 1rem;
}

.dropdown-menu .checkbox {
	margin-block: .2em;
	padding-inline: 1em;
	gap: .5em;
}

.dropdown-menu .radio,
.dropdown-menu .checkbox {
	display: flex;
	align-items: baseline;
}

.dropdown-menu .checkbox label {
	padding-left: 0;
}

.dropdown-menu > li > a {
	padding: .2em .5em;
	text-decoration: none;
}

.dropdown-menu > li > a:focus-within {
	outline-offset: -.2rem;
}

.dropdown-menu .fonticon {
	width: 1.2em;
}

.dropdown-menu hr {
	margin: .7rem 0;
}

.dropdown-menu .btn-container {
	margin-top: 1rem;
}

.dropdown-menu .radio label,
.dropdown-menu .checkbox label {
	margin-top: 0.09em;
	max-width: calc(100% - 1.3em);
}

.dropdown-header {
	padding: 0 .5em .3em;
	border-bottom: 1px solid var(--main-theme-gray-20);
	color: var(--main-theme-gray-70);
	font-weight: bold;
}

.dropdown-menu-functions {
	margin-top: .5em;
	margin-inline: 1em .5em;
}

.dropdown-category {
	padding: .2em .5em;
	background-color: var(--2nd-theme-color-10);
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > a:after {
	position: absolute;
	right: 0;
	margin-top: 6px;
	margin-right: 5px;
	border-left: 4px dashed;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	content: "";
}

.dropdown-submenu .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

.dropdown-submenu:hover {
	background: var(--main-theme-gray-10);
}

.dropdown-submenu.pull-left {
	float: none !important;
}

.dropdown-submenu.pull-left > .dropdown-menu {
	right: 100%;
	left: auto;
	border-radius: 6px 0 6px 6px;
}

.course-preview .config-groups .dropdown-menu .checkbox:last-child {
	margin-bottom: 0.9em
}

/************* BADGES *************/
.badge:focus-visible {
	outline-color: var(--main-theme-gray-80);
}

.btn-badge {
	position: relative;
}

.btn-badge .badge {
	position: absolute;
	top: -6px;
	right: -5px;
	min-width: 20px;
	font-size: .85em;
}

/************* POPOVER *************/
.popover {
	--bs-popover-border-color: var(--main-theme-gray-40);
	position: absolute;
	font-size: 1em;
	font-family: inherit;
}

.popover-arrow {
	position: absolute;
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::before {
	border-bottom-color: var(--main-theme-gray-70);
}

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .bs-popover-bottom > .popover-arrow::after {
	border-bottom-color: var(--bs-popover-header-bg);
}

.popover-container {
	overflow-y: auto;
}

/************* TOOLTIP *************/
.tip {
	width: 250px;
	padding: .5em;
	background-color: var(--main-theme-gray-80);
	border-radius: 5px;
	color: var(--neutral-white);
}

#powerTip {
	max-width: 80%;
	background-color: var(--main-theme-gray-70);
}

#powerTip a {
	color: var(--neutral-white);
}

.tooltip-container {
	display: flex;
	max-width: 700px;
	margin-top: .5em;
}

.tooltip-image-container {
	flex-shrink: 0;
	max-width: 150px;
	margin-right: 1em;
}

.tooltip-image {
	max-width: 100%;
}

.tooltip-content {
	white-space: normal;
}

/****************** PANEL ******************/
.panel {
	position: relative;
	margin-bottom: 2em;
	background: var(--neutral-white);
	box-shadow: 1px 1px 5px 0 var(--main-theme-gray-10);
	border: 1px solid var(--main-theme-gray-20);
	border-radius: 5px;
}

.panel-header {
	padding: 1em;
	background: var(--main-theme-gray-5);
	border-bottom: 1px solid var(--main-theme-gray-20);
}

.panel h3, .panel-heading {
	margin: 0;
	padding: 0;
	line-height: 1.2em;
	font-size: 1.2em;
	font-weight: bold;
}

.panel-functions {
	position: absolute;
	top: .5em;
	right: .7em;
}

.panel-content {
	padding: 1em;
	overflow: auto;
}


.panel-config {
	margin: 0;
	padding: .5em 1.5em;
}

.panel-config .form-control {
	width: 200px;
}

/****************** PROGRESS BAR ******************/
.meter {
	background-color: var(--main-theme-gray-20);
}

.meter > .used {
	background-color: var(--main-theme-color-70);
	color: var(--neutral-white);
	text-align: center;
	font-size: .8em;
	line-height: 2em;
}

.meter > .predicted {
	background-color: var(--main-theme-color-50);
}

.meter > .warning {
	background-color: var(--accent-theme-color-50);
}

.meter > .overflow {
	background-color: var(--error-color-70);
}

/************* DIALOG / OVERLAY *************/
.dialog-header {
	position: relative;
	padding: .4em 1em;
	background-color: var(--main-theme-color-50);
	color: var(--neutral-white);
}

.dialog-desc {
	font-size: .85em;
	line-height: 1.3em;
}

.dialog-close {
	position: absolute;
	top: .3em;
	right: 0;
	color: var(--neutral-white);
}

.dialog-close:hover, .dialog-close:focus, .dialog-close:active {
	color: var(--main-theme-gray-10);
}

.dialog-content {
	padding: .5em 1em;
	overflow: auto;
}

.dialog-footer {
	margin-top: .5em;
	padding: .5em 0;
	border-top: 1px solid var(--main-theme-color-50);
	text-align: center;
}

.dialog-buttons .btn {
	color: var(--main-theme-color-50);
}

.dialog-info > ul {
	margin-top: 1em;
	font-weight: bold;
}

.dialog-content-part {
	margin-bottom: 1.5em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--main-theme-gray-10);
}

.dialog-content-part h3 {
	text-decoration: underline;
}

/************* FEEDBACK, ERROR *************/
.feedbackPanel {
	position: relative;
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: .9em;
}

/* ERROR PAGE */
.stacktrace {
	height: 300px;
	overflow-y: scroll;
	overflow-x: hidden;
	border: 1px solid var(--main-theme-gray-40);
	padding: 1em;
}

/************* BOXES *************/
.box {
	margin: .5em 0;
	padding: 0.5em;
	border-radius: 4px;
	background-color: var(--main-theme-gray-10);
}

.box a[data-toggle] {
	color: var(--main-theme-gray-60);
}

/* .box .fonticon {width: 20px;} */

.header-box {
	margin: 0;
	padding: .2em .5em;
	background-color: var(--main-theme-gray-10);
	border: 1px solid var(--main-theme-gray-20);
	font-size: 1em;
	font-weight: normal;
	color: var(--main-theme-gray-60);
	text-transform: none;
}

.box-light {
	background-color: var(--neutral-white);
	border: 2px solid var(--main-theme-gray-20);
}

.box-neutral {
	margin: .5em 5px;
	padding: 0;
	background-color: transparent;
}

.box-highlight {
	background-color: var(--main-theme-color-50);
	color: var(--neutral-white);
}

.box-highlight a {
	color: var(--neutral-white);
	text-decoration: underline;
}

.box-info {
	background-color: var(--2nd-theme-color-10);
	color: var(--main-theme-color-60);
}

.box-info a, .box-info .btn-link {
	color: var(--main-theme-color-60);
}

.box-success {
	background-color: var(--success-color-5);
	color: var(--success-color-70);
}

.box-success-light {
	background-color: transparent;
	border: 2px solid var(--success-color-50);
}

.box-warning {
	background-color: var(--accent-theme-color-10);
	color: var(--accent-theme-color-60);
}

.box-warning > a {
	color: var(--accent-theme-color-80);
}

.box-warning-light > a {
	color: var(--accent-theme-color-50);
}

.box-warning > a.btn, .box-warning-light > a.btn {
	color: var(--main-theme-color-50);
}

.box-warning-light {
	background-color: transparent;
	border: 2px solid var(--accent-theme-color-30);
}

.box-warning.safety-files {
	padding: .1em .4em;
	font-size: .9em;
}

.box-danger {
	background-color: var(--error-color-70);
	color: var(--neutral-white);
}

.box-danger a {
	color: var(--neutral-white);
	text-decoration: underline;
}

.box-additional {
	text-align: right;
}

.box .box-content {
	margin-left: 22px;
}

.box-admin-mode {
	min-height: 36px;
	margin: 0;
	border-radius: 0;
	background-color: var(--accent-theme-color-30);
	color: var(--accent-theme-color-80);
}

.box-beta {
	display: none;
	background-color: var(--2nd-theme-color-50);
	color: var(--neutral-white);
	border-radius: 0;
}

.beta-header {
	margin: 0;
	font-size: .9em;
}

.beta-header p {
	position: relative;
	margin: 0 190px 0 0;
	padding-right: 250px;
	line-height: 1.2em;
}

.beta-header a {
	color: var(--neutral-white);
}

.beta-header button.btn {
	position: absolute;
	top: 6px;
	right: 5px;
	padding: 3px 7px;
	text-decoration: none;
}

.beta-header .btn-faq {
	position: absolute;
	top: 0;
	right: 5px;
	padding: 3px 7px;
	background-color: var(--accent-theme-color-30);
	border-color: transparent;
}

.beta-header .btn-faq:hover, .beta-header .btn-faq:focus {
	background-color: var(--accent-theme-color-50);
	color: var(--neutral-white);
}

.box-opened {
	display: inline-block;
	width: 0;
	height: 0;
	margin: 0 .2em 0 .4em;
	border-top: 6px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.box-closed {
	display: inline-block;
	width: 0;
	height: 0;
	margin: 0 .2em 0 .5em;
	border-top: 4px solid transparent;
	border-left: 6px solid;
	border-bottom: 4px solid transparent;
}

/* invitation */
.box-invite {
	margin: 1rem;
}

.box-invite h2 {
	margin-block: .2rem;
	font-size: 1em;
	font-weight: bold;
}

.box-invite.box-success {
	display: flex;
	gap: .5rem;
}

/* access */
.main-header .box-access {
	padding: .2em .5em;
	background-color: transparent;
	border: 2px solid var(--2nd-theme-color-50);
}

.box-access .icon-lock {
	float: left;
	font-size: .95em;
	line-height: 1.3;
	color: var(--2nd-theme-color-50);
}

.box-access .box-content {
	margin-left: 0;
}

.box-access-content {
	margin: .2em 0 0 1.3em;
	font-size: .9em;
}

.box-access-content ul {
	margin-bottom: .5em;
}

.box-access-content p:first-child {
	margin-bottom: .8em;
}

.box-access-content p:only-child {
	margin-bottom: .2em;
}

.main-header h2 .icon-lock {
	font-size: .7em;
	vertical-align: top;
	color: var(--2nd-theme-color-50);
}

/* assessment */
.box-assess {
	display: inline-block;
	width: 10em;
	padding: 1em .5em;
	background-color: transparent;
	border-width: 2px;
	border-style: solid;
	border-radius: 4px;
	text-align: center;
}

.box-assess .fonticon {
	height: 2.1em;
	width: 2.1em;
	margin-bottom: .3em;
	border-radius: 30px;
	color: var(--neutral-white);
	line-height: 2.2em;
	font-size: 1.7em;
}

.box-assess strong {
	display: block;
	margin: .3em 0 1em;
}

.assess-neutral {
	border-color: var(--main-theme-gray-5);
}

.assess-neutral .fonticon {
	background-color: var(--main-theme-gray-5);
}

.assess-passed {
	border-color: var(--success-color-50);
}

.assess-passed .fonticon {
	background-color: var(--success-color-50);
}

.assess-notpassed {
	border-color: var(--error-color-20);
}

.assess-notpassed .fonticon {
	background-color: var(--error-color-70);
}

.assess-mark, .assess-additional, .assess-date {
	color: var(--main-theme-gray-50);
}

.assess-additional {
	margin-top: 2em;
}

.assess-mark small {
	display: block;
}

/* mobile */
.mobile .assess-container {
	margin: 0 5px;
}

.mobile .box > table {
	font-size: 1.1em;
}

.mobile .box-beta {
	margin-bottom: 2em;
}

.mobile .box-beta > p {
	font-size: 1em;
}

/************* HELP *************/
.ui-dialog .btn-group.help {
	z-index: 1;
}

/****************************
	HEADER
****************************/
.page-header {
	height: 3.3em;
	margin: 0;
	background-color: var(--main-theme-gray-5);
}

.header-logo-container {
	height: 3.3em;
	margin: 0;
}

.logo {
	display: inline-block;
	height: 100%;
	width: 100px;
	background: url(images/general/logo-OPAL-new.png) no-repeat 10px center;
}

.logo:focus-visible {
	outline-offset: -.4rem;
}

.header-functions {
	position: relative;
	margin: .2em .3em;
}

.header-functions .popover {
	max-width: 500px;
	left: auto;
	top: 33px;
	right: 72px;
}

.header-functions .popover .popover-arrow {
	right: 1rem;
	top: -7px;
}

.header-functions-user {
	padding: .3em;
}

.header-functions-user form {
	display: inline;
}

.header-functions-search .box-danger {
	position: absolute;
	top: 25px;
	left: 0;
	z-index: 100;
}

.main-header {
	margin-bottom: 1em;
	padding: .7em;
	border-bottom: 2px solid var(--main-theme-gray-10);
}

.learn .main-header .col-sm-6 {
	padding-left: 0;
	padding-right: 0;
}

.main-header h1 {
	font-size: 1.2em;
	white-space: nowrap;
	overflow: hidden;
}

.course .main-header h1 {
	white-space: normal;
}

.main-header-title .fonticon {
	font-size: 12px;
	vertical-align: super;
}

.main-header-desc-container {
	line-height: 1.2em;
}

.main-header-desc, .main-header-sub,
.main-header-desc-container .box-access {
	margin: 0 10px 0 23px;
}

.main-header-desc-container .box-access {
	margin-top: .5em;
}

.main-header-sub {
	padding-bottom: .5em;
	font-style: italic;
}

.main-header-desc p {
	min-height: .5em;
}

.main-header-desc-container p {
	margin-bottom: .7em;
	line-height: initial;
}

/* stupid hack for table search in dialogs because main-header-search is used also for tables ... should be cleaned up */
.ui-dialog-content .table-header-additional .main-header-search .input-group .form-control {
	z-index: initial;
}

.main-header-additional {
	text-align: right;
}

.additional-center {
	text-align: center;
}

.additional-right {
	text-align: right;
}

.additional-right .btn-toolbar {
	justify-content: flex-end;
	gap: .3rem;
}

/*.main-header:before, .main-header:after {content: " "; display: table;}
.main-header:after {clear: both;}*/

.resource-header .main-header {
	background-color: var(--main-theme-gray-5);
	border: none;
}

.resource-header h2 {
	font-size: 1.2em;
	white-space: nowrap;
	overflow: hidden;
}

.resource-header h2 a {
	color: var(--main-theme-gray-70);
	text-decoration: none;
}

.resource-header a * {
	vertical-align: middle;
}

/* NO TITLE */
.resource-header.no-title .main-header {
	padding: 0;
	background-color: transparent;
}

.resource-header.no-title .main-header-additional {
	padding: 0 0 .5em 0;
}

.resource-header.no-title .box-access {
	margin: 0;
}

.resource-header.no-title.progress-0,
.resource-header.no-title.progress-50,
.resource-header.no-title.progress-100 {
	min-height: 30px;
	padding-left: .5em;
}

.resource-header.no-title.progress-0 .box-access,
.resource-header.no-title.progress-50 .box-access,
.resource-header.no-title.progress-100 .box-access {
	margin: 0;
}

/* mobile */
.mobile .main-header {
	display: none;
}

.mobile .main-header h2,
.mobile .main-header h3 {
	margin: .2em 0;
}

.mobile .main-header-additional .btn {
	display: none;
	padding: 3px 8px;
}

.mobile .main-header .box-access {
	margin: .2em 0;
}

.mobile .main-header-additional {
	position: absolute;
	right: 5px;
	top: 0;
}

.mobile.login .main-header,
.mobile .resource-header .main-header,
.mobile .resource-header-mobile .main-header,
.mobile .main-header-additional .btn-progress {
	display: block;
}

.mobile .resource-header.no-title {
	margin: .5em 0 1em;
}

.mobile .resource-header.no-title.progress-0 .main-header-desc-container,
.mobile .resource-header.no-title.progress-50 .main-header-desc-container,
.mobile .resource-header.no-title.progress-100 .main-header-desc-container {
	margin-right: 115px;
}

.resource-header-mobile .main-header {
	margin-top: .3rem;
	background-color: var(--main-theme-gray-5);
	border: none;
}

.resource-header-mobile h2 {
	line-height: 2em;
	font-size: 1.2em;
	font-weight: normal;
}

.resource-header-mobile .main-header h2 .box-closed + span {
	overflow: hidden;
	white-space: nowrap;
}

.resource-header-mobile .main-header h2 .box-opened + span {
	white-space: normal;
}

.resource-header-mobile h2 a {
	color: var(--main-theme-gray-70);
	text-decoration: none;
}

.resource-header-mobile h2 a:hover, .resource-header-mobile h2 a:focus {
	text-decoration: underline;
}

.resource-header-mobile ul {
	margin: .5em 1.5em 0;
}

.resource-header-mobile .box {
	margin: 0;
	background-color: transparent;
	font-size: 1em;
}

.resource-header-mobile .box-content {
	margin: .5em 0;
}

.resource-header-mobile .list-unstyled > li {
	border-bottom: 1px solid var(--main-theme-gray-40);
}

.resource-header-mobile li:first-child, .resource-header-mobile li:last-child {
	border: none;
}

/****************************
	MOBILE PAGE HEADER
****************************/
.mobile .page-header-container {
	height: 4em;
}

.mobile-page-header {
	position: fixed;
	display: block;
	width: 100%;
	height: 4em;
	z-index: 10;
	background-color: var(--main-theme-gray-40);
}

.mobile-header-functions .notification .fonticon,
.mobile-header-functions .coursemenu .fonticon {
	color: var(--neutral-white);
	font-size: 1.8em;
}

.mobile-header-functions .notification {
	position: absolute;
	right: 1em;
	top: 1em;
	z-index: 3;
	text-decoration: none;
}

.course .mobile-header-functions .notification {
	right: 45px;
}

.mobile-header-functions .coursemenu {
	position: absolute;
	right: 1em;
	top: .7em;
	z-index: 3;
}

.course .mobile-header-functions .notification-container .popover.bottom .popover-arrow {
	right: 45px;
}

.mobile-page-header .badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 1.7em;
	font-size: .8em;
}

.mobile-page-header .popover {
	display: block;
	right: 0;
	top: 35px;
	left: auto;
	max-width: 100%;
	width: 100%;
}

.mobile-page-header .popover.bottom .popover-arrow {
	left: auto;
	right: 1em;
	border-bottom-color: var(--main-theme-gray-5);
}

.mobile-page-header .popover.bottom > .popover-arrow:after {
	border-bottom-color: var(--main-theme-gray-5);
}

.coursemenu-container .popover {
	max-width: 250px;
	background: var(--main-theme-gray-5);
}

.coursemenu-container .input-group {
	display: none;
	margin: .5em .5em 0;
}

.page .mobile-page-header {
	background-color: var(--main-theme-color-50);
}

.page .menu-btn, .page .menu-btn:hover, .page .menu-btn:focus, .page .menu-btn:active {
	background-color: var(--main-theme-color-70);
}

.sidr-open .page .menu-btn {
	background-color: var(--main-theme-gray-70);
}

.mobile-page-header h1 {
	margin: 0 45px 0 4rem;
	padding-left: .3rem;
	font-size: 1.3em;
	line-height: 3;
	color: var(--neutral-white);
	white-space: nowrap;
	overflow: hidden;
}

.home .mobile-page-header h1,
.course .mobile-page-header h1 {
	margin: 0 75px 0 4rem;
}

.mobile-page-header h1 > a {
	color: var(--neutral-white);
	text-decoration: none;
}

.menu-btn, .menu-btn:hover, .menu-btn:focus, .menu-btn:active {
	float: left;
	height: 100%;
	width: 3em;
	background: none var(--main-theme-gray-50);
	border: medium none;
	border-radius: 0;
	font-size: 1.2em;
	color: var(--neutral-white);
}

.menu-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -.5rem;
}

/****************************
	FOOTER
****************************/
.page-footer {
	background: var(--main-theme-gray-5);
	border-top: 1px solid var(--main-theme-gray-5);
	font-size: .9em;
}

.page-footer a {
	color: var(--main-theme-color-60);
	text-decoration: none;
}

.page-footer a:hover {
	text-decoration: underline;
}

.page-footer-links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	min-height: 35px;
}

.page-footer-links li {
	margin: 0 .8em;
}

.page-footer-links a[aria-disabled="true"] {
	color: var(--main-theme-gray-60);
	cursor: not-allowed;
}

.page-footer-links a[aria-disabled="true"]:hover {
	text-decoration: none;
}

.login.page-footer {
	background: var(--main-theme-gray-70);
	border: none;
}

.login.page-footer a {
	color: var(--neutral-white);
}

.login.page-footer a[aria-disabled="true"],
.login.page-footer li > span {
	color: var(--main-theme-gray-20);
}

/****************************
	NAVIGATION
****************************/
.nav-container {
	display: flex;
	flex-wrap: wrap;
	min-height: 2rem;
}

.nav-container, .nav-container + .clearfix {
	background-color: var(--main-theme-color-50);
}

.guidemo .nav-container, .guidemo .nav-container + .clearfix {
	background-color: var(--2nd-theme-color-50);
}

.nav > li {
	position: relative;
	margin: .3rem .35rem 0 .35rem;
	border-radius: .3rem .3rem 0 0;
}

.nav > li > a {
	position: relative;
	display: block;
	padding: .4rem .7rem .6rem .7rem;
	color: var(--neutral-white);
	text-decoration: none;
}

.nav > .active {
	background-color: var(--neutral-white);
}

.nav > .active > a, .nav .active > a:hover, .nav > .active > a:focus {
	color: var(--main-theme-gray-80);
	text-decoration: none;
}

.nav > li > a:focus, .nav > li > a:hover {
	background-color: transparent;
	outline: none;
}

.nav > li > a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -.4rem
}

.nav > .active > a:focus-visible {
	outline-color: currentColor;
}

.mainnav:after {
	clear: none;
}

.nav-search-placeholder, .nav-search, .nav-header,
.adnav {
	display: none;
}

/****************** SUBNAV ******************/
.subnav > li {
	display: flex;
	justify-content: space-between;
	background-color: var(--2nd-theme-color-5);

	.mobile & {
		align-items: center;
	}
}

.subnav > li > a {
	padding-right: 0;
	color: var(--main-theme-gray-80);
	text-decoration: none;
}

.btn-close {
	--bs-btn-close-opacity:1;
	--bs-btn-close-hover-opacity: 1;

	width: 1.3rem;
	height: 1.4rem;
	background: none transparent;
	font-size: 1.3em;
	color: var(--main-theme-gray-50);

	&:hover .fonticon, &:active .fonticon {
		color: var(--main-theme-gray-80);
	}

	&:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -.4rem;
	}

}

.mobile .btn-close {
	width: 2rem;
	color: var(--main-theme-gray-10);

	&:hover .fonticon:before, &:focus .fonticon:before, &:active .fonticon:before {
		color: var(--neutral-white);
	}
}

/****************************
		MOBILE NAVIGATION
****************************/
.mobile .nav-container {
	display: block;
	background-color: var(--main-theme-gray-70);
}

.mobile .nav-search-placeholder {
	display: block;
	position: absolute;
	height: 57px;
	width: 260px;
	z-index: 50000;
}

.mobile .nav-search {
	position: relative;
	display: block;
	padding: .5em;
	border-bottom: 1px solid var(--main-theme-gray-80);
}

.mobile .nav-search input {
	background: var(--main-theme-gray-80);
	border-color: var(--main-theme-gray-40);
	font-size: 1.1em;
	color: var(--neutral-white);

	&::placeholder {
		color: var(--main-theme-gray-30);
	}
}

.mobile .nav-search input:focus {
	outline: 2px solid var(--neutral-white);
}

.mobile .nav-search .btn {
	position: absolute;
	top: 11px;
	right: 10px;
	color: var(--main-theme-gray-30);

	&:focus-visible {
		outline-offset: -.2rem;
	}
}

.mobile .nav-search .box-danger {
	position: absolute;
	top: 35px;
	right: 6px;
	z-index: 1;
}

.mobile .nav-header {
	display: block;
	margin: 0;
	padding-left: .3em;
	background-color: var(--main-theme-gray-60);
	color: var(--main-theme-gray-10);
	font-size: .9em;
	text-transform: uppercase;
	font-weight: normal;
	line-height: 1.8em;
}

.mobile .nav {
	flex-direction: column;
	gap: 0;
}

.mobile .nav > li {
	margin: 0;
	border-bottom: 1px solid var(--main-theme-gray-80);
	border-radius: 0;
	background-color: transparent;
}

.mobile .nav > li > a {
	padding: 1em 1.5em;
	border-left: 5px solid var(--main-theme-color-50);
	font-size: 1.1em;
	color: var(--neutral-white);
}

.mobile .subnav > li > a {
	flex-grow: 1;
	padding-right: 0;
}

.mobile .adnav {
	display: block;
}

.mobile .adnav > li > a {
	padding-left: 0;
	border-left-color: transparent;
}

.mobile .adnav > li > a:hover, .mobile .adnav > li > a:focus, .mobile .adnav > li > a:active {
	text-decoration: none;
}

.mobile .adnav .badge {
	float: right;
	background-color: var(--main-theme-gray-80);
	color: var(--main-theme-gray-30);
}

.mobile .adnav .fonticon {
	margin-right: .5em;
	color: var(--main-theme-gray-80);
	text-shadow: 0 0 1px rgba(255, 255, 255, .2);
}

.mobile .nav > li:hover,
.mobile .nav > li > a:focus,
.mobile .nav > li > a:active,
.mobile .nav > .active,
.mobile .nav .active:hover,
.mobile .nav > .active > a:focus {
	background-color: var(--main-theme-gray-60);
	color: var(--main-theme-gray-5);
}

.mobile .nav > .active {
	background-image: url(images/navigation/menu-corner.png);
	background-repeat: no-repeat;
	background-position: right center;
}

.mobile .nav > li.active a {
	color: var(--main-theme-gray-5);
}

/****************************
	MENU / JSTREE
****************************/
.menu {
	margin: 0 -7px;
	padding: .5em 0;
	overflow: hidden;
}

.menu-empty-info {
	margin: 1em 0;
}

.menu-category {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--main-theme-gray-20);
}

.menu .jstree-default .jstree-container-ul .jstree-node > .jstree-children {
	border-top: 3px solid var(--main-theme-color-50);
}

.menu .jstree-default .jstree-container-ul .jstree-node .jstree-children .jstree-children {
	border-top: 1px solid var(--main-theme-gray-10);
}

.menu .jstree-default .jstree-container-ul > .jstree-node > .jstree-anchor {
	font-weight: bold;
}

.menu .jstree-default .jstree-children > li a:hover {
	background-color: var(--main-theme-gray-10);
}

.menu .jstree-default .jstree-children > li a.jstree-disabled:hover {
	background-color: transparent;
}

.menu .jstree-anchor {
	position: relative;
	display: block;
	margin-left: 2em;
	border-radius: 0;
}

.menu .jstree-ocl {
	float: left;
}

.menu .jstree-default .jstree-children > li a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -.2rem;
	background-color: transparent;
}

.menu .jstree-container-ul > .jstree-node > .jstree-children > .jstree-node {
	margin-left: 0;
}


.jstree-default .jstree-node {
	min-height: 1.8em;
	line-height: 1.9;
	margin-left: 1.8em;
	min-width: 2em;
}

.jstree-default .jstree-icon:empty {
	width: 1.5em;
	height: 1.3em;
	line-height: 1.5;
}

body[style="font-size: 200%;"] .jstree-default .jstree-ocl:empty {
	width: .5em;
}

.jstree-default .jstree-anchor {
	line-height: 1.9;
	height: 1.8em;
}

.jstree-default .jstree-clicked {
	background-color: var(--main-theme-gray-10);
	box-shadow: none;
}

.jstree-default .jstree-hovered {
	background-color: var(--main-theme-gray-10);
}

.jstree-default .jstree-disabled {
	color: var(--main-theme-gray-60);
}

.jstree-default .jstree-disabled:hover {
	cursor: not-allowed;
}

/*.jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl {background-position: -.27em -.27em;}
.jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl {background-position: -2.6em -.3em;}*/

.jstree-node.calendar,
.jstree-node.efficiency-statement,
.jstree-node.glossary {
	margin-top: .5em;
	padding-top: .5em;
	border-top: 3px solid var(--main-theme-color-50);
}

.jstree-node.calendar + .jstree-node.efficiency-statement,
.jstree-node.glossary + .jstree-node.calendar,
.jstree-node.glossary + .jstree-node.efficiency-statement {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

.menu .jstree-default .jstree-container-ul > .jstree-node > .efficiency-statement,
.menu .jstree-default .jstree-container-ul > .jstree-node > .calendar,
.menu .jstree-default .jstree-container-ul > .jstree-node > .glossary {
	font-weight: normal;
}

.gutter-horizontal {
	/*any unit possible:*/
	width: 15px;
	cursor: w-resize;
	background: linear-gradient(
			to right,
			rgba(0, 0, 0, 0) calc(50% - 1px),
			var(--main-theme-gray-40) calc(50% - 1px),
			var(--main-theme-gray-40) calc(50% + 1px),
			rgba(0, 0, 0, 0) calc(50% + 1px)
	);
}

.hide-course-tree {
	position: absolute;
	left: -8px;
	z-index: 1;
}

#wrap:not(.mobile) .hide-course-tree:has(button[aria-expanded="false"]) {
	left: -15px;
}

.hide-course-tree .btn {
	padding: .375rem 0;
	border-radius: 0;
}

.hide-course-tree .fonticon {
	line-height: 2;
}

/* assessment */
.jstree-anchor .assess-passed,
.st-mobile-nav .assess-passed,
.jstree-anchor .assess-notpassed,
.st-mobile-nav .assess-notpassed {
	position: absolute;
	right: 0;
	top: .3em;
	height: 1.5em;
	width: 1.5em;
	padding-top: 0;
	border-radius: 10rem;
	font-size: .8em;
	color: var(--neutral-white);
	line-height: 1.55;
	text-align: center;
}

.jstree-anchor .assess-open,
.st-mobile-nav .assess-open {
	position: absolute;
	right: 0;
	top: .3em;
	background-color: var(--neutral-white);
	border-radius: 5rem;
}

.jstree-anchor .assess-open,
.mobile .st-mobile-nav .assess-passed,
.mobile .st-mobile-nav .assess-notpassed {
	font-size: 1.2em;
}

.mobile .jstree-anchor .assess-passed,
.mobile .st-mobile-nav .assess-passed,
.mobile .jstree-anchor .assess-notpassed,
.mobile .st-mobile-nav .assess-notpassed,
.mobile .jstree-anchor .assess-open {
	right: 42px;
	top: 27%;
}

.mobile .st-mobile-nav .assess-open {
	right: 48px;
	top: 27%;
}

.jstree-anchor .assess-passed.icon-checkmark {
	background-color: var(--success-color-50);
}

.jstree-anchor .assess-notpassed.icon-close {
	background-color: var(--error-color-70);
}

/* mobile */
.mobile.course .menu-container.open {
	position: absolute;
	top: 93px;
	width: 92%;
	padding: 0;
	background: var(--neutral-white);
	z-index: 1;
	box-shadow: 2px 2px 6px 4px var(--main-theme-gray-10);
}

.mobile .hide-course-tree {
	position: fixed;
	top: 93px;
	left: 0;
	z-index: 9;
}

.mobile .menu {
	margin: 0;
	padding: 0;
}

.mobile .menu-empty-info {
	margin: 0;
}

.mobile .menu-empty-info .btn {
	margin: 1em 0;
}

.mobile.course .menu-empty-info .btn {
	display: none;
}

.mobile .menu .jstree-default .jstree-children > li {
	border-bottom: 1px solid var(--main-theme-gray-20);
}

.mobile .menu .jstree-default .jstree-children > li:last-child {
	border-bottom: none;
}

.mobile .jstree-default .jstree-anchor {
	height: 3.3em;
	font-size: 1.2em;
	line-height: 3.3em;
	padding-left: .5em;
	background-image: url(images/icons/arrow-list.png);
	background-position: right center;
	background-repeat: no-repeat;
}

.mobile .jstree-default .jstree-anchor * {
	vertical-align: middle;
}

.mobile .jstree-no-dots .jstree-open > .jstree-ocl {
	height: 3.3em;
	background-position: -33px 12px;
}

.mobile .jstree-no-dots .jstree-closed > .jstree-ocl {
	height: 3.3em;
	background-position: -1px 12px;
}

.mobile.course .jstree-title {
	display: inline-block;
	max-width: 80%;
	overflow: hidden;
}

.mobile .jstree-node.calendar,
.mobile .jstree-node.efficiency-statement,
.mobile .jstree-node.glossary {
	margin-top: 0;
	padding-top: 0;
}

/****************************
	CONTENT
****************************/
.fluid-container {
	margin-right: auto;
	margin-left: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.main-content {
	margin: 0 1em;
}

.mobile .main-content {
	margin: 0;
}

.system-msg {
	margin: 0;
	border-radius: 0;
}

.course-config-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5em;
	margin-top: -.9rem;
	padding: .5rem 1.8rem .5rem 1.3rem;
	background-color: var(--accent-theme-color-5);
	color: var(--neutral-black);
	border-radius: 0;
}

.course-config-header .config-date .yui-skin-sam {
	position: absolute;
	right: 1rem;
	top: 2.55rem;
}

.course-config-header .config-groups {
	padding-right: .5em;
	border-right: 1px solid var(--main-theme-gray-50);
	border-radius: 0;
}

.course-view-msg {
	margin-top: 0;
	padding-left: 1.3rem;
	background-color: var(--accent-theme-color-60);
	color: var(--neutral-white);
	border-radius: 0;
}

.privacy-info {
	margin: 2em 0;
	font-size: .9em;
	color: var(--main-theme-gray-50);
}

/************* NOTIFICATIONS *************/
.notification {
	display: inline-block;
}

.notification:focus-visible {
	outline-offset: -.1rem;
}

.notification, .notification:hover, .notification:focus {
	text-decoration: none;
}

.notification .icon-bell {
	display: none;
}

.notification .badge {
	padding: .4em .75em;
	font-size: .9em;
}

.noti-badge-container {
	display: inline;
}

.notification-container .popover {
	display: block;
}

.notification-container .list-group-item .btn-group {
	margin: 0 0 .5em 1.2rem;
}

.notification-container .list-group-item-action {
	align-items: baseline;
}

.notification-container .popover-body {
	padding: .2em;
}

/* mobile */
.mobile .notification {
	margin: 0;
}

.mobile .notification .icon-bell {
	display: block;
}

.mobile .notification:focus-visible {
	outline-color: var(--neutral-white);
	outline-offset: .3rem;
}

/************* QUICKACCESS *************/
.quickacces-heading {
	font-size: 1.2em;
}

.quickaccess li {
	float: left;
	padding: .3em;
}

.quickaccess .dropdown li {
	float: none;
	padding: 0;
}

.quickaccess:before, .quickaccess:after {
	content: " ";
	display: table;
}

.quickaccess:after {
	clear: both;
}

.quickaccess-label {
	display: inline-block;
	font-size: .95em;
	line-height: 1.2em;
}

.quickaccess .btn-big {
	position: relative;
}

.course-scenario.quickaccess .btn-big {
	width: 150px;
}

/************* RESOURCE LINK LIST (CHOOSE ONE OR MORE RESOURCES) *************/
.resource-link-list a {
	display: inline-block;
	padding: .2em;
}

.resource-link-list-main {
	color: var(--main-theme-gray-50) !important;
}

.resource-link-list-main:hover, .resource-link-list-main:focus, .resource-link-list-main:active {
	background-color: var(--main-theme-gray-5);
	text-decoration: none;
}

.resource-link-list-main span {
	vertical-align: middle;
}

.resource-link-list-sub {
	padding-left: 2em;
	padding-bottom: .5em;
}

.resource-link-list-sub .selected {
	background-color: var(--2nd-theme-color-10);
}

/************* SEARCH *************/
.form-inline .search-field {
	width: 17rem;
	margin-right: 1em;
}

.filter-container {
	display: flex;
	gap: .7rem;
}

.search-filter {
	display: inline-block;
	margin: 1em 0;
	white-space: nowrap;
}

.search-filter div[role="group"] {
	display: inline-block;
}

.search-filter label {
	margin-right: .3em;
}

.reset-container {
	margin-inline: .3em;
}

.filter-container .btn-container {
	margin-inline: 1em;
}

.search-keyword {
	color: var(--accent-theme-color-50);
}

.advanced-search {
	margin-bottom: 1rem;
}

.advanced-search .checkbox {
	margin-top: 0;
}

.advanced-search .checkbox-inline {
	padding: 0 .5em 0 0;
}

.advanced-search .box-light {
	padding: 1rem 1rem 0 1rem;
}

.advanced-search .col-form-label {
	display: block;
}

/************* CONTENT-PREVIEW *************/
.content-preview-container:before, .content-preview-container:after {
	content: " ";
	display: table;
}

.content-preview-container:after {
	clear: both;
}

.content-preview {
	position: relative;
	float: left;
	height: 15em;
	width: 12em;
	margin: .3em;
	padding: .3em;
	overflow: hidden;
	border: 1px solid var(--main-theme-gray-20);
}

.content-preview > a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.content-preview > a:hover, .content-preview > a:focus {
	background: rgba(0, 0, 0, .1);
}

.content-preview-img {
	width: 100%;
	height: 7em;
	overflow: hidden;
	text-align: center;
}

.content-preview-img > img {
	display: inline-block;
	width: 100%;
}

.content-preview-img .fonticon {
	width: 100%;
	height: 100%;
	padding-top: 15px;
	background-color: var(--main-theme-gray-10);
	font-size: 64px;
}

.content-preview-main {
	padding: .5em 0.3em;
}

.content-preview-main .content-preview-title {
	display: block;
	line-height: 1em;
}

.content-preview-main > small {
	color: var(--main-theme-gray-50);
}

.content-preview-main > a, .content-preview-desc {
	line-height: 1.2em;
}

.content-preview-desc {
	margin-top: .5em;
	font-size: .9em;
}

.content-preview-info {
	margin-top: 1em;
	font-size: .9em;
}

.content-preview-fav {
	float: left;
	height: 100%;
	padding-top: 40px;
}

.content-preview-functions {
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	z-index: 1;
}

.content-preview-functions .btn {
	display: block;
}

.content-preview table td,
.content-preview table th,
.course-toc-content table td,
.course-toc-content table th,
.main-header-desc-container table td,
.main-header-desc-container table th {
	border-width: 1px;
}

.preview-content-btn-container {
	position: absolute;
	top: .6em;
	right: .5em;
}

.group-overview .preview-content-btn-container {
	top: 25px;
	right: 35px;
}

/* horizontal*/
.content-preview-horizontal {
	display: flex;
	float: none;
	width: 100%;
	height: 9em;
	margin: 0;
	padding: .5em 0;
	border-width: 0 0 1px 0;
}

.content-preview-horizontal .content-preview-main {
	height: 8em;
	margin-right: 40px;
	padding-top: 0;
}

.content-preview-horizontal .content-preview-img {
	flex: 0 0 100px;
	margin-right: 1em;
}

.content-preview-horizontal .content-preview-img .fonticon {
	padding-top: 17px;
	background-color: transparent;
	color: var(--main-theme-color-50);
}

.content-preview-horizontal .content-preview-img .icon-blocked {
	color: var(--main-theme-gray-60);
}

.content-preview-horizontal .content-preview-img > img {
	width: auto;
	height: 100%;
}

.content-preview-horizontal .content-preview-author,
.content-preview-horizontal .content-preview-date {
	font-size: .85em;
}

.content-preview-horizontal .content-preview-author a,
.content-preview-horizontal .content-preview-date a {
	color: var(--main-theme-gray-50);
}

.learn .content-preview-horizontal > a {
	left: 30px;
}

/*resource details*/
.resource-details {
	height: auto;
	margin-bottom: 2em;
	padding: 1%;
	border: 3px solid var(--2nd-theme-color-10);
	border-radius: 5px;
}

.resource-details .content-preview-img {
	flex: 0 0 150px;
	width: auto;
	height: auto;
}

.resource-details .content-preview-img .fonticon {
	padding-top: 0;
}

.resource-details .content-preview-img img {
	height: auto;
	width: 100%;
}

.resource-details .content-preview-main {
	height: auto;
	margin: 0;
	padding: 0;
}

.resource-details .content-preview-desc {
	clear: both;
}

.resource-details .content-preview-title {
	margin: 0.5em 0 0.3em 0;
	font-weight: normal;
	font-size: 1.3em;
}

.resource-details .content-preview-author a {
	color: var(--main-theme-color-50);
}

.mobile .resource-details {
	min-height: inherit;
	padding: .5em .8em;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.mobile .resource-details .content-preview-main {
	margin: 0;
}

.mobile .content-preview-desc {
	clear: both;
}

/************* COURSE *************/
.page.course .content-container:has(.hide-course-tree) {
	position: relative;
}

.course-subtitle {
	margin-bottom: 1em;
	font-style: italic;
}

.course-desc {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid var(--main-theme-gray-40);
}

.course-desc:empty {
	margin: 0;
	border: none;
}

.course-desc p, .repo-desc p {
	margin-bottom: .7em;
	line-height: initial;
}

.course-node h3 {
	margin: 1em 0 .5em;
}

.course-toc-entry {
	max-height: 400px;
	margin: 1em 0;
	padding: 1em .5em;
	overflow: auto;
}

.course-toc-header {
	margin: 0 0 .5em;
	font-size: 1.2em;
}

.course-toc-entry .icon-close {
	color: var(--error-color-70);
}

.course-toc-entry .icon-checkmark {
	color: var(--success-color-50);
}

.course-toc-entry .list-group {
	margin: 1em 0 -1em 0;
}

.course-toc-entry .list-group-item {
	border-bottom: none;
	border-top: 1px solid var(--main-theme-gray-10);
}

.course-toc-content img {
	width: auto;
	max-width: 100%;
	max-height: 200px;
}

/* .course-toc-content .iframe-container iframe {max-height: 300px;} */
.single-page-editor .mce-edit-area {
	max-height: 700px;
	overflow: auto;
}

.notes h2 {
	margin: 1em 0 .5em 0;
}

/* MOBILE */
.mobile .course-node {
	margin: 0 -10px;
}

/************* PROGRESS *************/
.resource-header.progress-0,
.jstree-anchor.progress-0 {
	border-left: 5px solid var(--accent-theme-color-30);
}

.resource-header.progress-50,
.jstree-anchor.progress-50 {
	border-left: 5px solid var(--accent-theme-color-10);
}

.resource-header.progress-100,
.jstree-anchor.progress-100 {
	border-left: 5px solid var(--success-color-50);
}

.resource-header.progress-100 .progress-done {
	padding: 7px 8px;
	color: var(--success-color-50);
	border: 1px solid var(--success-color-50);
	border-radius: 4px;
	vertical-align: middle;
}

/************* COURSE PREVIEW *************/
.course-preview {
	background: repeating-linear-gradient(
			-55deg,
			var(--neutral-white),
			var(--neutral-white) 3rem,
			var(--accent-theme-color-5) 3rem,
			var(--accent-theme-color-5) 5rem
	);
}

.course-preview .nav .active.dynamic-tab,
.course-preview .main-header,
.course-preview .menu,
.course-preview .content-container-inner,
.course-preview .main-header .box-access,
.course-preview .resource-details {
	background-color: var(--neutral-white);
}

.course-preview .main-header {
	border-color: var(--accent-theme-color-70);
}

.course-preview .resource-details,
.course-preview .menu .jstree-default .jstree-container-ul .jstree-node > .jstree-children,
.course-preview .jstree-node.calendar,
.course-preview .jstree-node.efficiency-statement,
.course-preview .jstree-node.glossary {
	border-color: var(--main-theme-gray-40);
}

.course-preview .content-preview-horizontal .content-preview-img .fonticon {
	color: var(--main-theme-gray-40);
}

/************* GROUPS *************/
.group-overview {
	margin: .5em;
}

.group-overview h3 {
	margin: 2em 0 .5em 0;
	font-weight: bold;
}

.group-overview .resource-details .content-preview-main {
	padding: 1.2em 0 0 0;
}

/* EDIT GROUPS */
.manage-groups .menu-course .jstree-container-ul .jstree-children,
.manage-groups .menu-course .jstree-node.calendar,
.manage-groups .menu-course .jstree-node.efficiency-statement,
.manage-groups .menu-course .jstree-node.glossary,
.manage-groups .menu-course .jstree-default .jstree-container-ul .jstree-node > .jstree-children {
	display: none;
}

.manage-groups .menu-course .jstree-container-ul {
	background-color: var(--main-theme-gray-5);
	cursor: not-allowed;
}

.manage-groups .menu-course .jstree-container-ul a {
	cursor: not-allowed;
}

.manage-groups .menu-course .jstree-container-ul li.node-root > .jstree-icon {
	display: none;
}

.manage-groups .btn-table-filter .btn {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.manage-groups .btn-table-filter .dropdown-menu {
	max-height: 400px;
	min-width: 240px;
	overflow: auto;
}

.manage-groups .btn-table-filter .dropdown-menu li .checkbox {
	max-width: 290px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.group-edit fieldset > div {
	padding: 0 25px;
}

.form-subgroup.group-config-wl {
	margin: 0;
}

.group-edit-config input.form-control {
	display: inline-block;
	width: auto;
}

.group-config-wl .col-form-label,
.group-config-disenrol .col-form-label {
	font-weight: normal;
}

.group-memberlist-export .table-neutral {
	margin: 1em 0;
}

.group-memberlist-export .table-neutral tr,
.group-memberlist-export .table-neutral th,
.group-memberlist-export .table-neutral td {
	padding: 3px;
	border: 1px solid var(--main-theme-gray-40);
}

.group-memberlist-export .table-neutral tbody > tr:nth-child(odd) {
	background-color: transparent;
}

/************* COURSE & GROUP NODES *************/
.resource-function-mobile {
	margin: 0;
	border-top: 1px solid var(--main-theme-gray-10);
	border-bottom: 1px solid var(--main-theme-gray-10);
}

.resource-function-mobile .col- {
	padding: 0;
	border-right: 1px solid var(--main-theme-gray-20);
}

.resource-function-mobile .col:last-child {
	border: none;
}

.resource-function-mobile .btn {
	border: none;
	border-radius: 0;
}

.mobile .resource-notmobile {
	margin-bottom: 1.5em;
}

.affirmation-info {
	display: inline-block;
	margin-top: .75rem;
}

.post-date {
	width: 4.7em;
	margin-right: .5rem;
	padding: .9rem .3rem;
	background-color: var(--2nd-theme-color-10);
	text-align: center;
}

.post-date-day {
	display: block;
	line-height: 0.9em;
	font-weight: bold;
	font-size: 1.2em;
}

.post-date-year {
	font-size: .8em;
}

.post-header {
	display: flex;
	position: relative;
	min-height: 2rem;
	margin-top: 0;
}

.post-header h3 {
	margin: 0 10rem 0 0;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: bold;
}

.post-header h4, .post-header h5, .post-header h6 {
	margin: 0 10rem 0 0;
}

.post-header p {
	margin: 0 10rem 0 0;
	font-size: .85em;
}

.post-user {
	float: left;
	width: 2.4em;
	height: 2.4em;
	margin: .7em;
	overflow: hidden;
}

.post-user img {
	width: 100%;
}

.post-user .fonticon {
	width: 100%;
	height: 100%;
	padding: .25em 0 0 .33em;
	background-color: var(--main-theme-gray-40);
	font-size: 1.5em;
	color: var(--neutral-white);
}

.post-heading {
	flex-grow: 2;
	padding: .7rem .3rem;
	background: var(--main-theme-gray-10);
}

.post-functions {
	position: absolute;
	top: 0;
	right: 0;
	padding: .9rem;
}

.post-content, .post-edit, .post-attach {
	margin: .5em;
}

.post-content img {
	max-width: 100%;
	height: auto;
}

.post-attach {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px solid var(--main-theme-gray-20);
}

.post-media .mejs__mediaelement video {
	max-width: 100%;
}

.post-footer {
	padding: .5em 1.2em 0 .3em;
	background: var(--main-theme-gray-5);
	text-align: right;
}

.post-footer > div {
	position: relative;
	display: inline-block;
}

.post-footer .btn {
	color: var(--main-theme-gray-60);
}

.post-footer .badge {
	position: absolute;
	top: -4px;
	left: 18px;
	font-size: .7em;
}

.post-footer .post-dislike .badge {
	left: 22px;
}

.post-footer .btn:hover, .post-footer .btn:focus,
.post-footer .marked .btn {
	color: var(--main-theme-color-50);
}

.post-footer .marked .badge {
	background-color: var(--main-theme-color-50);
}

.post-upload {
	margin-bottom: 1em;
}

.run-container {
	display: flex;
}

.run-container .btn-big {
	flex-shrink: 0;
	align-self: flex-start;
	margin-right: 1em;
	width: 10em;
}

.run-container .box {
	flex-grow: 1;
	margin: 0;
}

/* mobile */
.mobile .run-container {
	margin: 0 5px;
}

.mobile .post-footer .fonticon {
	font-size: 24px;
}

.mobile .post-footer .badge {
	left: 20px;
}

.mobile .post-footer .post-dislike .badge {
	left: 27px;
}

.mobile .post-like {
	margin-right: 10px;
}

/* ENROLLMENT | DATE ENROLLMENT */
.enrollment h3 {
	margin: 1em 0 0 0;
	font-size: 1.3em;
}

.enrollment .box .enrollment-status {
	margin-bottom: 1em;
	font-size: 1.2em;
	color: var(--main-theme-gray-50);
}

.enrollment-desc {
	margin: 1em 0;
}

td.enroll-state {
	position: relative;
}

td.enroll-state .badge, .badge.enroll-state {
	position: absolute;
	min-width: 17px;
	line-height: 1.4em;
	font-size: .8em;
}

td.enroll-state .badge {
	left: 17px;
	top: 2px;
}

.enrollment .list-group-item-heading {
	white-space: nowrap;
	overflow: hidden;
}

/* mobile */
.mobile .enrollment .box-neutral {
	margin-top: 1em;
}

.mobile .enrollment .list-group-item .enroll-state {
	width: 17px;
	left: 27px;
	top: 7px;
	right: 0;
	font-size: .7em;
}

.mobile .enrollment-heading {
	position: relative;
}

.mobile .enrollment-heading .enroll-state {
	left: 18px;
	top: -6px;
}

.mobile .enrollment-heading .fonticon {
	float: left;
	min-height: 2em;
	width: 1.5em;
	font-size: 1.5em;
}

.mobile .enrollment-heading .icon-checkmark {
	color: var(--success-color-50);
}

.mobile .den .table-neutral {
	margin-bottom: 2em;
}

/* FORUM */
.forum-overview .box-neutral {
	margin: 1em 5px;
}

.forum-overview .list-group-item {
	align-items: center;
}

.forum-overview .list-group-item-heading {
	white-space: nowrap;
	overflow: hidden;
}

.forum-post-container {
	margin: 1em 0;
}

.forum-post {
	border: 1px solid var(--main-theme-gray-20);
}

.forum-post .post-header {
	background-color: var(--main-theme-gray-10);
}

.forum-post.best > .post-header {
	background-color: var(--2nd-theme-color-50);
}

.forum-post.new > .post-header:before,
.forum-post.marked > .post-header:before {
	position: absolute;
	left: -1px;
	top: 0;
	height: 100%;
	content: " ";
}

.forum-post.new > .post-header:before {
	border-left: 5px solid var(--main-theme-color-50);
}

.forum-post.marked > .post-header:before {
	border-left: 5px solid var(--accent-theme-color-30);
}

.forum-post.new .post-heading,
.forum-post.best .post-heading,
.forum-post-2 .post-heading {
	background-color: transparent;
}

.forum-post.best > .post-header .post-heading,
.forum-post.best > .post-header .post-info a {
	color: var(--neutral-white);
}

.forum-post.best > .post-header .btn.best {
	background-color: var(--2nd-theme-color-10);
}

.forum-post-1 .forum-post {
	border-width: 0;
}

.forum-post-1 {
	border-width: 1px 0 1px 1px;
}

.forum-post-2 .post-header {
	background: var(--main-theme-gray-5);
}

.forum-post-quote, .b_quote_wrapper,
.forum-post .post-content blockquote {
	margin: .7em .5em;
	padding: .5em;
	border-left: 2px solid var(--2nd-theme-color-50);
	font-style: italic;
	font-size: 1em;
}

.b_quote_author {
	font-weight: bold;
}

.forum-post-quote blockquote, .b_quote {
	margin: .5em 0;
	line-height: 1.2em;
}

tr.hasNew {
	background-color: var(--2nd-theme-color-10) !important;
}

.icon-sticky:before {
	content: "\e173";
}

.icon-closed:before {
	content: "\e16c";
}

.icon-hidden:before {
	content: "\e172";
}

.icon-thread:before {
	content: "\e164";
}

.forum-thread-new {
	margin: 1em 0;
	padding: 1em;
	background-color: var(--main-theme-gray-5);
	border: 2px solid var(--main-theme-gray-20);
}

.fo .post-edit {
	padding: 1em;
	background-color: var(--main-theme-gray-5);
	border: 2px solid var(--main-theme-gray-20);
}

.forum-view {
	float: right;
}

.forum-view .form-group {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.forum-view .form-group div {
	display: inline-block;
}

/* anonymous */
.forum-post.not-released {
	border-style: dashed;
	border-width: 2px;
}

.forum-post .not-released {
	border-width: 2px 0 2px 2px;
}

/* mobile */
.mobile .forum-post {
	border: none;
}

/* E-MAIL | CONTACT */
.contact-form-cont {
	margin-left: 2em;
}

.contact-form {
	margin-top: 2em;
}

/* mobile */
.mobile .contact-form-container {
	margin: 5px;
}

/* FOLDER */
.folder .breadcrumb {
	margin: 0;
	padding: 0 0 .5em 0;
	background-color: transparent;
}

.file-metadata-container {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--main-theme-gray-20);
}

/* INFO */
.mobile .info .post-content {
	margin-left: .5em;
}

/* FEED | BLOG | PODCAST */
.box-draft {
	background: transparent;
	border: 2px dashed var(--main-theme-gray-20);
}

.box-draft .post-heading,
.box-draft .post-date {
	background: var(--main-theme-gray-5);
}

.box-scheduled {
	background: transparent;
	border: 2px dashed var(--success-color-20);
}

.box-scheduled .post-date {
	background: var(--success-color-20);
}

.mobile .feed-btn-container {
	margin: 0 .8em;
}

/* TEST | SURVEY */
.iqsurv .run-container .btn-big {
	font-size: .95em;
}

.test-state-info {
	margin-bottom: .5em;
}

.test-state-info .icon-clock {
	font-size: 1em;
}

/* exam mode */
.exammode-page-form {
	max-width: 25rem;
}

/* ASSESSMENT */
.box-assess-extended {
	display: flex;
	margin: 0;
}

.box-assess-extended .box-assess {
	flex-shrink: 0;
	align-self: flex-start;
	margin-right: 1em;
}

.assess-info {
	position: relative;
	flex-grow: 1;
	text-align: left;
}

.assess-info .text-warning {
	margin: .3em 0 1em 0;
}

.assess-heading {
	font-size: 1.2em;
}

.ms .assess-container {
	border: none;
	padding: 0;
}

.assess-average {
	position: absolute;
	right: 5px;
	top: 5px;
}

.assess-average .popover {
	left: -160px !important;
	max-width: 165px;
}

.assess-average .popover-body {
	text-align: center;
}

.assess-average .popover-body strong {
	display: inline-block;
	margin-bottom: 1em;
}

.assess-average .popover-body .fonticon {
	height: 50px;
	width: 50px;
	font-size: 3em;
}

/* GLOSSARY */
.glossary-entry {
	border-bottom: .2em dotted var(--accent-theme-color-50);
	color: var(--main-theme-gray-80);
}

.glossary-entry:hover, .glossary-entry:focus, .glossary-entry:active {
	text-decoration: none;
	border-bottom-style: solid;
	color: var(--main-theme-gray-80);
}

.glossary-title {
	display: block;
	margin-bottom: .5em;
	border-bottom: 1px solid var(--accent-theme-color-50);
}

.glossary-def {
	line-height: 1.2em;
}

.glossary-box {
	border-left: 4px solid var(--main-theme-color-50);
	background-color: var(--main-theme-gray-5);
	border-radius: 0;
}

.glossary-box small {
	font-style: italic;
}

/* WIKI */
.wiki-create {
	float: left;
}

.wiki-create .box-danger {
	display: inline-block;
	margin: 0;
}

.wiki-datamanagement {
	float: right;
}

.wiki .table-header {
	min-height: 3rem;
}

.wiki-menu {
	margin-top: 1em;
	overflow: hidden;
}

.wiki-content {
	margin-top: 1em;
	border-left: 1px solid var(--main-theme-gray-20);
}

.wiki-heading {
	position: relative;
	margin: 0 0 1em 0;
	padding-bottom: .5em;
	border-bottom: 1px solid var(--main-theme-gray-20);
}

.wiki-heading h3 {
	font-size: 1.3em;
}

.wiki-heading .btn {
	position: absolute;
	right: 0;
	top: 0;
}

.wiki-content .imgright {
	clear: right;
	float: right;
	margin: 0.3em 0 0.3em 0.3em;
	text-align: right;
}

.wiki-content .imgleft {
	clear: left;
	float: left;
	margin: 0.3em 0.3em 0.3em 0;
	text-align: left;
}

.imgcenter {
	clear: both;
	margin: 0.3em 0 0.3em 0;
	overflow: hidden;
	text-align: center;
}

.wiki-content .imgcaption {
	padding: 0.3em 0 0.2em 0.3em;
}

.wiki-content td {
	padding: .2em .3em;
}

.wiki-content a[rel="direct"],
.wiki-content .externallink {
	text-decoration: underline;
}

.wiki-content dd {
	margin-left: revert;
}

.wiki-content .edit {
	color: var(--error-color-70);
}

.wiki-version {
	overflow: auto;
}

/* edit */
.wiki-content .btn-toolbar .dropdown-menu li {
	position: relative;
}

.wiki-content .btn-toolbar .dropdown-menu a {
	margin-right: 2.5em;
}

.wiki-content .btn-toolbar .dropdown-menu .btn {
	position: absolute;
	right: 0;
	top: 0;
	margin-right: .3em;
}

.wiki-content textarea {
	min-height: 400px;
}

/* categories */

.wiki-category-group h4 {
	font-size: 1.2em;
	font-weight: bold;
}

.wiki-category-group ul {
	margin: 0.3em 0 0 1.6em;
	padding: 0;
}

/* mobile */
.mobile .wiki .box {
	margin: 1em 5px;
}

/* TASK */
.ta .list-group-item {
	align-items: center;
}

.ta .list-group-item-action {
	align-items: baseline;
}

.task-container {
	margin-bottom: 2em;
}

/* PROJECTBROKER */
.projectbroker-details {
	margin: 1em;
}

.projectbroker-details h3 {
	margin: 0 0 1em;
	font-weight: bold;
}

.projectbroker-solutions-user {
	margin-top: 2em;
}

.projectbroker-solutions-user h3 {
	margin-top: .3em;
}

/* FLASHCARD */
.fcs .btn-big {
	position: relative;
	margin-bottom: .5em;
}

.fcs .form-group .form-group.checkbox {
	margin: 0;
}

/* mobile */
.mobile .fcs .fluid-container {
	padding: 0 15px;
}

.mobile .fcs .btn-big {
	width: 120px;
}

.mobile .fcs .panel {
	margin: .5em;
}

.mobile .fcs .panel .box-info {
	margin: 1em 0;
}

/* MEDIATHEK */
/* mobile */
.mobile .mediathek .menu-container {
	display: block;
	padding: 0 5px;
}

.mobile .mediathek .menu-container .box-light > a {
	color: var(--main-theme-gray-50);
}

.mobile .mediathek .col-md-10 {
	padding: 0;
}

/* PROFILE (Steckbrief) */
.profile-dialog .main-header {
	display: flex;
	justify-content: center;
}

.profile-entry, .profile-create {
	position: relative;
	height: 200px;
	width: 160px;
	padding: 0;
	background-color: var(--neutral-white);
	overflow: hidden;
}

.profile .profile-img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 5px;
}

.profile .profile-img img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

.profile .profile-img .fonticon {
	height: 150px;
	padding: 25px 0 0 0;
	background-color: var(--main-theme-gray-5);
	font-size: 5.5em;
	line-height: initial;
	color: var(--main-theme-gray-40);
	border-radius: 5px;
}

.profile-user {
	position: absolute;
	bottom: 5px;
	display: block;
	width: 100%;
	padding: .3em;
	line-height: 1.2em;
	color: var(--main-theme-gray-70);
	background: rgba(255, 255, 255, .8);
	white-space: normal;
}

.profile-entry.own {
	border-color: var(--main-theme-color-50);
}

.profile-entry.own .profile-placeholder {
	color: var(--main-theme-color-50);
}

.profile-list {
	margin-left: 5px;
}

.profile-list > li {
	position: relative;
	padding: 0;
	margin: 0 20px 20px 0;
}

.profile-list > li:first-child {
	margin-right: 17px;
}

.profile-list > li .profile-delete {
	position: absolute;
	top: 5px;
	right: 5px;
}

.profile-preview dl {
	margin: 15px;
}

.profile-preview dd {
	margin-bottom: 1em;
}

/* CP */
.btn.next {
	float: right;
}

/* DIALOG */
.dialog .btn-big {
	width: 130px;
}

.box-dialog {
	padding: 0 1em 1em 1em;
	background-color: transparent;
	border: 3px solid var(--2nd-theme-color-10);
}

.dialog tbody > tr:nth-child(odd) {
	background-color: transparent;
}

.dialog tbody > tr.highlight {
	background-color: var(--2nd-theme-color-10);
}

.box-dialog .fluid-container {
	padding: 0;
}

/* LTI */
.lti .btn-big {
	width: 200px;
}

.lti .btn-big .fonticon {
	margin-top: 15px;
}

.lti-data-info .table-neutral {
	margin: .8em 0;
	background-color: rgba(255, 255, 255, .7);
	border-radius: 4px;
}

.lti-data-info .table-neutral th,
.lti-data-info .table-neutral td {
	padding: .3em .5em;
}

/* VC */
.vc a.btn-big {
	padding: 1.5em 0;
}

.vc-room-settings {
	top: 30px;
	left: auto;
	right: 0;
	max-width: 500px;
	width: 500px;
}

.vc-room-settings.popover > .popover-arrow {
	right: 10px;
	left: auto;
}

.vc-room-settings .checkbox {
	padding: 0;
}

.vc-room-settings button {
	margin: .4em .4em 1em 0;
}

/* AI CHATBOT */
.ai-chat-container {
	display: flex;
	flex-direction: column;
	min-height: 25rem;
	margin-bottom: 1rem;
	overflow: hidden;
}

.ai-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
}

.ai-chat-welcome {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.ai-chat-welcome-icon {
	font-size: 1.5rem;
}

.ai-chat-welcome-text > :last-child {
	margin-bottom: 0;
}

.ai-chat-message-container:has(.ai-chat-message-user) {
	display: flex;
	justify-content: flex-end;
}

.ai-chat-message {
	margin-bottom: 1rem;
	border-radius: 4px;
	word-wrap: break-word;
}

.ai-chat-message-user {
	max-width: 80%;
	padding: .5rem 1rem;
	border: 1px solid var(--main-theme-gray-40);
}

.ai-chat-author {
	display: inline-block;
	margin-bottom: .25rem;
}

.markdown-content p:last-child {
	margin-bottom: 0;
}

.ai-chat-status {
	align-self: flex-start;
	margin-inline: 1rem;
}

.ai-chat-input-area {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: 3rem;
	padding: 1rem;
	border: 1px solid var(--main-theme-gray-40);
	border-radius: 4px;
}

.ai-chat-input-area textarea {
	flex: 1;
	resize: none;
}

.ai-chat-usage {
	margin-top: .5rem;
	color: var(--main-theme-gray-60);
}

/****************** STATISTIC ******************/
.stat-period {
	margin-bottom: 1.7rem;
}

.stat-diagram-container {
	margin-bottom: 2rem;
}

.stat-header {
	margin: -.5rem -.5rem 1rem -.5rem;
	padding: .5rem;
	background-color: var(--main-theme-gray-10);
}

.stat-badge-container {
	margin: 1rem 0;
}

.time-range {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-left: 1rem;
}

.stat-node-expand {
	min-width: 12em;
	max-width: 50%;
	width: 20em;
	text-align: right;
	margin-bottom: 2rem;
}

.stat-node-expand .btn {
	min-width: 12rem; /*min-width for dynamic text*/
}

/****************** CATALOG ******************/
.courses .main-header h1 {
	overflow: inherit;
}

.courses .list-group-item-action {
	align-items: baseline;
	padding-right: 2rem;
}

.courses .content-container div.list-group-item-action .fonticon,
.courses .content-container div.list-group-item-action .list-group-item-heading,
.courses .content-container div.list-group-item-action .list-group-item-text {
	color: var(--main-theme-gray-40);
}

.courses .content-container div.icon-right {
	background-image: none;
}

.courses .list-group .popover {
	max-width: 800px;
}

.tooltip-shift-right {
	left: 160px !important;
}

.courses .popover-body .content-preview-img {
	float: left;
	width: 10em;
	height: 100%;
	margin-right: 1em;
}

.courses .popover-body .content-preview-img > img {
	height: auto;
	min-height: initial;
	width: 100%;
}

.courses .popover-body .content-preview-img + .content-preview-main {
	margin-left: 11em;
}

.courses .popover-body .content-preview-main img {
	max-width: 200px;
	height: auto;
}

.catalog-manage-entries .box-light {
	margin: 1em 0;
}

/****************** INTERACTION | RATING | COMMENTS ******************/
.interaction .rating {
	float: right;
}

.rating .btn {
	width: inherit;
}

.rating strong {
	margin-right: .5em;
	vertical-align: middle;
}

.comments .form-group {
	margin-top: .5em;
}

.comments .forum-post-1 {
	margin-left: 0 !important;
	border-width: 1px;
}

/****************** PEER REVIEW ******************/
.box-pr-info .fonticon {
	width: 16px;
}

.box-pr-info .dl-sub-heading {
	text-transform: uppercase;
}

.box-pr-dialog .pr-review-date {
	float: right;
	margin-top: -20px;
	color: var(--main-theme-gray-50);
}

.box-pr-dialog .pr-review-report {
	position: relative;
	height: 2em;
}

.box-pr-dialog .pr-review-report > .btn {
	float: right;
}

.box-pr-dialog .pr-review-report .popover {
	max-width: 400px;
	width: 400px;
	right: 0;
	left: initial;
	top: 18px;
}

.box-pr-dialog .pr-review-report .popover .popover-arrow {
	left: inherit;
	right: 20px;
}

.box-pr-dialog dd {
	margin-bottom: 1em;
}

.review-form {
	margin-top: 1.5em;
}

.pr-feedback-container .header-box {
	margin: 1em 0;
}

/* mobile */
.mobile .box-pr-info,
.mobile .box-pr-review,
.mobile .box-pr-feedback {
	margin: 0 5px;
}

/****************** CALENDAR ******************/
.cal-list {
	margin: 2em 0;
}

.cal-list li {
	margin: .5em 0;
	display: flex;
	gap: .5em;
}

.cal-list-title {
	display: inline-block;
	min-width: 300px;
	padding: .4em;
	color: var(--neutral-white);
}

.cal-list .popover-body {
	padding: 1em;
}

.cal-list .popover a {
	word-wrap: break-word;
}

.colorpicker-component {
	display: inline-block;
}

.colorpicker-component .input-group-addon {
	width: 10px;
	padding: 0;
	border-radius: 0;
}

.fc-timegrid-event {
	padding: .2em;
}

.fc-timegrid-event .fc-event-time {
	font-size: 1em;
	font-weight: bold;
}

.fc-timegrid-event-short .fc-event-title {
	font-size: 1em;
}

.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active,
.fc-view, .fc-view > table {
	z-index: 0 !important;
}

.fc-timeGridWeek-view .fc-timegrid-header .fc-cell-inner {
	white-space: normal;
	text-align: center;
}

.fc-timegrid-header, .fc-daygrid-header {
	font-weight: bold;
}

.fc-event:hover, .fc-timegrid-header a:not([data-navlink]), .fc-daygrid-header a:not([data-navlink]) {
	color: inherit;
	text-decoration: inherit;
}

.calendar-help {
	margin-bottom: .5em;
}

.cal-edit-recurrence {
	display: flex;
	align-items: flex-end;
	gap: 1rem;
}

/* mobile */
.mobile .cal-list, .mobile .fc-toolbar {
	margin-left: 5px;
	margin-right: 5px;
}

.mobile .cal-list .btn {
	width: auto;
}

/****************** SHARE COURSE ******************/
.course-qr {
	display: block;
	margin: 1em 0;
}

/****************** EFFICIENCY STATEMENTS ******************/
.efficiency-statement-overview .box-assess,
.portlet.efficiencystatements .box-assess,
.portlet-details .efficiency-statement .box-assess {
	height: 190px;
	overflow: hidden;
}

.efficiency-statement-overview .efficiency-statement,
.portlet.efficiencystatements .efficiency-statement,
.portlet-details .efficiency-statement {
	float: left;
}

.efficiency-statement a,
.portlet.efficiencystatements .efficiency-statement a {
	display: inline-block;
	max-height: 3em;
	overflow: hidden;
}

/****************** EPORTFOLIO ******************/

/* lazy loading placeholder */
.lazy-artefact {
	min-height: 420px;
	margin: 2em 0 0;
}

/* artefact */
.artefact {
	min-height: 410px;
	margin: 2em 0 0;
}

.artefact .panel-header {
	white-space: nowrap;
}

.artefact .panel-header h3 {
	display: inline-block;
	margin-right: 100px;
	font-size: 1.1em;
	white-space: normal;
}

.artefact-content {
	max-width: 100%;
	height: 300px;
	overflow: auto;
}

.artefact-header {
	margin-bottom: .5em;
	padding-bottom: .5em;
	font-weight: bold;
	border-bottom: 1px solid var(--main-theme-gray-20);
}

.artefact .popover {
	width: 350px;
	max-width: 500px;
}

.artefact .popover-container {
	max-height: 500px;
}

.artefact-file {
	text-align: center;
}

.artefact-file .fonticon {
	margin: 50px 0 10px 0;
	font-size: 100px;
}

.artefact-file img {
	max-width: 100%;
	height: auto;
}

.artefact .box-assess {
	width: 100%;
}

.artefact dd {
	margin-bottom: .5em;
}

.tag {
	margin-bottom: .3em;
	padding: .3em 1em;
	background-color: var(--3rd-theme-color-50);
	font-weight: normal;
	line-height: 1.1em;
}

.tag .icon-close {
	font-size: 12px;
	color: var(--neutral-white);
}

.artefact-tags, .artefact .interaction {
	min-height: 32px;
	margin-top: .5em;
	padding-top: .5em;
	border-top: 1px solid var(--main-theme-gray-10);
}

.artefact .rating, .artefact .comments {
	margin: .5em 1em 1em 1em;
}

.artefact-edit {
	height: 337px;
	overflow: auto;
	background-color: var(--main-theme-gray-5);
}

.form-group .tag-editor .tag-editor-tag,
.form-group .tag-editor .tag-editor-delete {
	background-color: var(--3rd-theme-color-50);
	color: var(--neutral-white);
}

.form-group .tag-editor .tag-editor-tag.active {
	color: var(--3rd-theme-color-50);
}

.tag-editor .placeholder {
	background-color: transparent;
}

.panel.artefact .content-preview {
	float: none;
	width: auto;
	margin: 0;
}

.artefact .panel-content {
	padding: .3em;
}

.artefact-details .artefact {
	max-height: inherit;
	margin-top: 0;
}

.artefact-details .artefact .panel-content {
	padding: 1em;
}

.ui-dialog .artefact-edit, .artefact-details .artefact-content {
	height: auto;
}

/* artefact add from course nodes */
.btn-artefact {
	position: relative;
}

.btn-artefact .badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 12px;
	line-height: 1.2em;
}

.btn-artefact.btn-sm .badge,
.btn-artefact.only .badge {
	top: -3px;
	right: -4px;
}

/* map */
.ep-map-preview {
	position: relative;
	float: left;
	min-height: 400px;
	width: 300px;
	margin: 1em 1em 0 0;
	padding: 1em;
	background-color: var(--special-color-10);
	border-radius: 1px 7px 7px 1px;
	box-shadow: 1px 1px 5px 0 var(--main-theme-gray-10);
	text-align: center;
}

.ep-map-preview .dropdown {
	float: right;
}

.ep-map-header {
	height: 110px;
	width: 70%;
	margin: 4em auto 0 auto;
	padding: .5em;
	overflow: hidden;
	background: rgba(255, 255, 255, .7);
	border-radius: 5px;
}

.ep-map-additional {
	margin-top: 8em;
}

.ep-map-additional small {
	display: inline-block;
	margin-bottom: 1em;
}

.ep-map-structure {
	margin-top: 2em;
	padding: 1em 1em 0 1em;
	border-top: 2px solid var(--main-theme-gray-40);
}

.ep-map-structure h3 {
	margin-bottom: .7em;
	font-size: 1.3em;
	font-weight: bold;
}

.artefact-link .panel-content {
	overflow: hidden;
}

.artefact-link .artefact {
	margin: 0 0 2em 0;
}

.artefact-add {
	height: 60px;
	margin: 5px -14px -14px -14px;
	padding-top: .6em;
	background-color: var(--2nd-theme-color-10);
	text-align: center;
}

/* map share */
.ep-map-share-form .btn-delete {
	position: absolute;
	right: 24px;
	z-index: 1;
}

.ep-map-share-form .tag:first-child {
	margin-left: 8px;
}

.ep-map-share-form .yui-skin-sam {
	position: absolute;
	right: 75px;
	top: 5px;
}

.ep-map-share-form .yui-calcontainer {
	right: 0 !important;
	left: inherit !important;
	min-width: 200px;
}

.ep-map-share .ep-map-back {
	position: absolute;
	top: 220px;
	right: 20px;
	font-size: 12em;
	color: rgba(255, 255, 255, .3);
}

/* eportfolio themes */
.ep-map {
	background-color: var(--special-color-10);
}

.ep-map .main-header {
	background-color: var(--neutral-white);
}

.ep-map .ep-map-content {
	margin-bottom: 1em;
	padding: .5em;
	background: rgba(255, 255, 255, .5);
	border-radius: 5px;
}

.ep-map-grey {
	background-color: var(--special-color-10);
}

.ep-map-grey .nav-container, .ep-map-grey .nav-container + .clearfix {
	background-color: var(--main-theme-gray-70);
}

.ep-map-grey .ep-map-structure {
	border-top-color: var(--main-theme-color-50);
}

.ep-map-grey .ep-map-structure h3 {
	color: var(--main-theme-color-50);
}

.ep-map-comic {
	background-color: var(--2nd-theme-color-10);
	font-family: 'Comic Sans MS', 'Comic Sans', fantasy;
}

.ep-map-comic .nav-container, .ep-map-comic .nav-container + .clearfix {
	background-color: var(--main-theme-color-50);
}

.ep-map-comic .ep-map-structure {
	border-top-color: var(--main-theme-color-50);
}

.ep-map-comic .ep-map-structure h3 {
	color: var(--main-theme-color-50);
}

.ep-map-preview.ep-map-leather {
	background: url(images/eportfolio/ep-map-leather.png) no-repeat -15px 0 var(--special-color-50);
	color: var(--neutral-white);
}

.ep-map-preview.ep-map-leather .ep-map-header {
	width: 220px;
	background: transparent;
	color: var(--main-theme-gray-70);
}

.ep-map-preview.ep-map-leather .ep-map-header a {
	color: var(--main-theme-gray-80);
}

.ep-map-leather {
	background: url(images/eportfolio/ep-map-leather-back.jpg) repeat 0 var(--special-color-50);
}

.ep-map-leather .nav-container, .ep-map-leather .nav-container + .clearfix {
	background-color: var(--special-color-50);
}

.ep-map-leather .ep-map-content a, .ep-map-leather .ep-map-content .btn {
	color: var(--special-color-50);
}

.ep-map-leather .menu-container {
	color: var(--neutral-white);
}

.ep-map-leather .menu .jstree-default .jstree-container-ul .jstree-node > .jstree-children {
	border-top-color: var(--neutral-white);
}

.ep-map-leather .menu .jstree-default .jstree-children > li a:hover,
.ep-map-leather .menu .jstree-default .jstree-children > li a:focus {
	color: var(--special-color-50);
}

.ep-map-leather .menu .jstree-default .jstree-container-ul .jstree-children .jstree-children {
	border-top-color: var(--special-color-10);
}

.ep-map-leather .menu .jstree-clicked {
	background-color: var(--special-color-10);
	color: var(--special-color-50);
}

.ep-map-leather .table-header {
	background-color: var(--special-color-10);
}

.ep-map-leather .content-preview-horizontal .content-preview-img .fonticon {
	color: var(--special-color-50);
}

.ep-map-leather .resource-details {
	background: var(--neutral-white);
	border-color: var(--special-color-10);
}

.ep-map-leather .btn-highlight,
.ep-map-leather .btn-highlight:hover, .ep-map-leather .btn-highlight:focus, .ep-map-leather .btn-highlight:active {
	background-color: var(--special-color-50);
	border-color: var(--special-color-50);
}

/* map task */
.ep-map-preview.ep-task {
	min-height: 430px;
}

.ep-map .box-warning-light {
	margin: 10px 15px;
	background-color: var(--neutral-white);
}

.ep-task-restrictions {
	padding-left: 2em;
}

.ep-task-restrictions li {
	padding: .3em 0;
}

.ep-task-restrictions li * {
	vertical-align: middle;
}

.ep-task .ep-map-additional {
	margin: 4em 0 2em 0;
}

.ep-task.ep-map-leather .ep-map-additional {
	margin-top: 6em;
}

.ep-task-info {
	position: absolute;
	bottom: 10px;
	left: 10px;
	right: 10px;
	padding: 7px 1em;
	background: rgba(255, 255, 255, .6);
	border-top: 2px solid var(--neutral-white);
	text-align: left;
	font-size: .9em;
	color: var(--main-theme-gray-80);
}

/* eportfolio in groups */
.page.group .ep-map {
	padding-top: 1em;
}

/****************** PORTLETS ******************/
.home .sortable-portlet .panel-header {
	cursor: move;
}

.home .fixed-portlet .portlet {
	box-shadow: none;
	border-color: var(--main-theme-gray-40);
}

.home .fixed-portlet .panel-header {
	cursor: not-allowed;
	border-color: var(--main-theme-gray-40);
	background-color: var(--main-theme-color-10);
}

.portlet .panel-header > .fonticon {
	display: none;
}

.portlet .panel-content .list-group {
	margin: -1em;
}

.portlet .content-preview-container {
	overflow-x: auto;
	overflow-y: hidden;
}

.portlet .content-preview-container ul {
	margin-top: 1em;
}

.portlet .content-preview-container li {
	float: none;
	display: inline-block;
}

.portlet-badge {
	display: none;
	position: absolute;
	min-width: 20px;
	margin-left: .7em;
	font-size: .7em;
	font-weight: normal;
}

.firststepsportlet .panel-content {
	overflow: inherit;
}

.showcourses .content-preview-container ul {
	white-space: nowrap;
}

.showcourses .content-preview-container ul li {
	white-space: normal;
}

/* extended lastusedrepositoryportlet */
.lastusedrepositoryportlet .content-preview-img,
.mobile .portlet-details .content-preview-img {
	float: left;
	width: 50px;
	height: 32px;
	margin-right: 10px;
}

.lastusedrepositoryportlet .list-group-item .extend .fonticon {
	width: 60px;
	text-align: center;
	font-size: 2em;
}

/* mobile */
.showallmobile {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.showallmobile:hover, .showallmobile:focus, .showallmobile:active {
	background: rgba(0, 0, 0, .08);
}

/****************** LOGIN ******************/
.page.login {
	background: var(--main-theme-color-50);
	background: -moz-linear-gradient(top, var(--main-theme-color-50) 0%, var(--2nd-theme-color-50) 45%);
	background: -webkit-linear-gradient(top, var(--main-theme-color-50) 0%, var(--2nd-theme-color-50) 45%);
	background: linear-gradient(to bottom, var(--main-theme-color-50) 0%, var(--2nd-theme-color-50) 45%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--main-theme-color-50)', endColorstr='var(--2nd-theme-color-50)', GradientType=0);
}

.mobile.login .page-header-container,
.login .page-header,
.login .mobile-page-header,
.login .main-header h2 {
	display: none;
}

.login .main-header {
	border: none;
}

.logo-container {
	margin-bottom: 4vh;
	text-align: center;
}

.login .logo {
	display: block;
	height: 155px;
	width: 100%;
	background: url("images/general/logo-OPAL-login.png") no-repeat center center transparent;
}

.logo-container h1 {
	margin-top: 1vw;
	font-size: 1.2em;
	color: var(--neutral-white);
}

.login-container .additional {
	display: none;
}

.login-content {
	width: 600px;
	margin: 17vh auto 0 auto;
}

.login-form {
	padding: 1em;
	background: rgba(0, 0, 0, .15);
	border-radius: 5px;
	color: var(--neutral-white);
}

.login-form .box-success {
	color: var(--main-theme-gray-80);
}

.login-form a:not(.btn) {
	color: var(--neutral-white);
	text-decoration: underline;
}

.login-form .has-error .col-form-label {
	color: var(--neutral-white);
	font-weight: bold;
}

.login-form .form-control:focus,
.login-form .form-select:focus {
	outline-color: var(--main-theme-color-90);
	box-shadow: 0 0 0 .1rem #fff;
}

.login h3 {
	margin: 1.5em 0 .5em 0;
	text-transform: uppercase;
	font-size: 1em;
}

.login-register h3 {
	margin-top: 0;
}

.login-form .btn-highlight {
	width: 100%;
	margin-bottom: 1em;
	background: var(--main-theme-gray-70);
	border-color: var(--main-theme-gray-70);
}

.login-form .btn-highlight:hover, .login-form .btn-highlight:focus, .login-form .btn-highlight:active {
	background: var(--main-theme-color-50);
	border-color: var(--main-theme-color-50);
}

.login .login-additional .btn,
.login .main-header .btn {
	background: transparent;
	border: 1px solid var(--neutral-white);
	color: var(--neutral-white);
}

.login .login-additional .btn:hover, .login .login-additional .btn:focus, .login .login-additional .btn:active,
.login .main-header .btn:hover, .login .main-header .btn:focus, .login .main-header .btn:active {
	background: var(--main-theme-color-70);
}

.login .col-form-label {
	font-weight: normal;
}

.login-news {
	margin-top: 1em;
	color: var(--neutral-white);
}

.login-news aside {
	float: none;
	width: 100%;
	padding: 0;
}

.login-news a, .login-courses a {
	color: var(--2nd-theme-color-10);
	text-decoration: underline;
}

.login-courses {
	background: rgba(255, 255, 255, .7);
}

.login-courses .content-preview {
	background-color: var(--neutral-white);
}

.login-courses .panel-header h3 {
	display: none;
}

.login-courses .btn {
	border-color: var(--main-theme-gray-60);
}

.login-courses .btn .fonticon {
	color: var(--main-theme-gray-60);
}

.login .portlet {
	min-height: inherit;
	margin-bottom: 0;
	border: none;
	box-shadow: none;
	background: transparent;
}

.login .panel-header {
	display: none;
}

/************* REGISTRATION *************/
.registration-dialog-form {
	margin: 1.5em 0;
}

.registration-legals {
	margin: 1em 0;
}

/* mobile */
.mobile .login-content {
	padding-top: 2em;
}

/* details page */
.registration-page-form {
	width: 785px;
}

/************* USER PROFILE | SETTINGS *************/
.profile-image {
	max-width: 160px;
	width: 100%;
}

.profile-image .fonticon {
	background: var(--main-theme-gray-10);
	width: 100%;
	height: 130px;
	line-height: 125px;
	font-size: 64px;
	text-align: center;
}

.profile-image img {
	width: 100%;
	height: auto;
	margin-bottom: .5em;
}

.profile-image .btn-group, .profile-image .btn {
	width: 100%;
}

.profile-public .profile-image .fonticon {
	padding-left: 38px;
}

.profile-name {
	display: inline-block;
	margin-top: 1em;
	font-size: 1.3em;
}

.profile-contact {
	margin: 1.5em 15px;
}

.profile-contact .nested-form {
	margin-top: 1em;
}

.form-profile .form-horizontal .form-inline .form-group .col-sm-9 {
	width: 100%;
	padding: 0;
}

.form-profile .form-horizontal .form-inline .form-group .form-text {
	max-width: 300px;
}

.disclaimer .checkbox {
	margin: 10px;
}

.disclaimer .checkbox label {
	font-weight: bold;
}

.btn-highlight[class*="custom-theme"] {
	background: var(--main-theme-gray-10);
	border-width: 4px;
}

.custom-theme-default {
	color: var(--main-theme-color-50) !important;
}

.custom-theme-basic_new_orange {
	color: var(--accent-theme-color-50) !important;
}

.custom-theme-basic_new_green {
	color: var(--success-color-50) !important;
}

.custom-theme-basic_new_dark {
	color: var(--main-theme-gray-80) !important;
}

/* profile completion form */
.profile-completion .yui-skin-sam {
	position: absolute;
	right: 10px;
	top: 50%;
}

/************* CUSTOM CONTENT FOR LOGIN, HOME, TEACH & LEARN *************/
.custom-content:before {
	clear: both;
	content: " ";
	display: table;
}

/************* LICENSES *************/
.license-container {
	position: relative;
}

.license-container .popover-body {
	font-size: .9em;
}

.license-content {
	display: flex;
	align-items: center;
}

.license-info {
	margin-left: 1em;
}

.license-info .popover {
	left: 32px;
	top: -75px;
	width: 500px;
	max-width: initial;
}

.license-info .popover-body {
	height: 135px;
	overflow: auto;
}

.license-further-info {
	margin: 1em 0;
}

.license-new {
	position: relative;
	margin-left: 1em;
}

.license-new .popover {
	position: fixed;
	left: auto;
	top: auto;
	width: 700px;
	max-width: initial;
	margin-top: -480px;
	margin-left: 0;
}

.license-new .popover-body {
	height: 400px;
	overflow: auto;
}

.license-new .popover.top > .popover-arrow {
	left: 10%;
}

.license-icon {
	display: inline-block;
	width: 44px;
	height: 22px;
	vertical-align: middle;
}

.icon-cc-by {
	background-image: url(images/icons/cc-by.png);
}

.icon-cc-by-sa {
	width: 66px;
	background-image: url(images/icons/cc-by-sa.png);
}

.icon-cc-by-nd {
	width: 66px;
	background-image: url(images/icons/cc-by-nd.png);
}

.icon-cc-by-nc {
	width: 66px;
	background-image: url(images/icons/cc-by-nc.png);
}

.icon-cc-by-nc-sa {
	width: 88px;
	background-image: url(images/icons/cc-by-nc-sa.png);
}

.icon-cc-by-nc-nd {
	width: 88px;
	background-image: url(images/icons/cc-by-nc-nd.png);
}

.icon-cc-0 {
	background-image: url(images/icons/cc-0.png);
}

/************* ADMIN VIEWS *************/
.user-data-extraction .box-info {
	margin: 2em 0;
}

/****************************
	PRINT
****************************/
@media print {
	body {
		color: var(--main-theme-gray-80);
	}

	iframe {
		min-height: 200mm;
	}

	.beta-header, .page-header-container, .main-header,
	.page-footer,
	.menu-container, /* left menu (tree) */
	.ui-tabs-nav, /* jQuery tabs */
	.btn, /* all buttons */
	.table-header,
	.content-anchor, .forum-view, /* forum stuff */
	.wiki-menu, /* wiki nav */
	.resource-header.no-title, /*course node header without title and description */
	.gutter-horizontal,
	.resource-header a .box-opened, .resource-header a .box-closed {
		display: none;
	}

	/* toggle icon */
	.mce-menubar, .mce-toolbar-grp, .mce-statusbar {
		display: none !important;
	}

	/* important because of stupid tiny */
	.ui-dialog {
		width: 100% !important;
		top: 0 !important;
		left: 0 !important;
	}

	.resource-header .main-header {
		display: block;
	}

	.resource-header .col-sm-6 {
		padding: 0;
	}

	.main-header-desc-container {
		margin-left: 0;
	}

	.content-container.col-sm-10 {
		width: 100% !important;
		padding: 0;
	}

	.panel, .course-toc-entry {
		page-break-inside: avoid;
		max-height: inherit;
	}

	.artefact-content {
		height: auto;
	}
}