/*===========================================
	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-30);
    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-30);
    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 */
.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";
}


    /******* 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";}	/*mail*/
.icon-course:before	{content: "\e071";}
.icon-cp:before {content: "\ed44";}
.icon-den:before {content: "\e112";}	/*terminvergabe*/
.icon-dialog:before {content: "\e607";}
.icon-en:before {content: "\e917";} /*entrollment*/
.icon-ep:before {content: "\e902";}
.icon-extcp:before {content: "\ed44";}
.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-lti:before {content: "\e915";}
.icon-mediathek:before {content: "\e04a";}
.icon-ms:before {content: "\e301";} /*assessment*/
.icon-podcast:before {content: "\e069";}
.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";}
.icon-wiki:before {content: "\e605";}


/******* 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);}
.btn:hover .icon-star:before,
.icon-star-filled:before {color: var(--accent-theme-color-40);}
.btn:hover .icon-star-filled:before {color: var(--main-theme-gray-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-30);}
.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, .dl-inline dd {display: inline-block;}
.dl-inline dt {text-align: left;}
.dl-inline dt  {width: 210px; vertical-align: top;}

/* 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 .list-group-function .btn {}
.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 {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 {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-30);
	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 {border-color: var(--error-color-50);}

.has-error .form-text, .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-30); 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) */
    background-color: var(--neutral-white);
    border: 1px solid var(--main-theme-gray-30);
    color: var(--main-theme-color-50);
}
.btn:hover, .btn:active {background-color: var(--main-theme-gray-5); border-color: var(--main-theme-gray-50); color: var(--main-theme-color-70);}
.btn:focus, .btn:active:focus {outline: none;}
.btn:focus {color: var(--main-theme-color-50);}
.btn:focus-visible, .btn-link:focus-visible {outline: 2px solid currentColor; outline-offset: -.4rem; border-color: var(--main-theme-gray-30); color: var(--main-theme-color-50);}

.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-50);
    border-color: var(--main-theme-gray-50);
    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-30);
	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: 11em; 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;}
.mobile .main-header .box-access {margin: .2em 0;}

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

.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: 5px 5px 0 5px; 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-30);}
.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 {background-color: var(--2nd-theme-color-5);}
.subnav > li > a {
	padding-right: 15px;
	color: var(--main-theme-gray-80);
	text-decoration: none;
}
.btn-close {
	position: absolute;
	top: -.8rem;
	right: -.6em;
    width: 1.3rem;
    height: 1.4rem;
	background: none transparent;
	font-size: 1.3em;
	color: var(--main-theme-gray-50);
    opacity: 1;
}
.btn-close .fonticon:before {background: var(--neutral-white); border-radius: 10rem;}
.btn-close:hover .fonticon, .btn-close:active .fonticon {color: var(--main-theme-gray-80);}
.btn-close:focus-visible {outline: 2px solid currentColor; outline-offset: .2rem; box-shadow: 0 0 0 4px #fff;}

/****************************
		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-50); border-color: var(--main-theme-gray-50); font-size: 1.1em; color: var(--main-theme-gray-30);}

.mobile .nav-search input::-webkit-input-placeholder { /* WebKit browsers */ color: var(--main-theme-gray-30);}
.mobile .nav-search input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: var(--main-theme-gray-30); opacity:  1;}
.mobile .nav-search input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: var(--main-theme-gray-30); opacity:  1;}
.mobile .nav-search input:-ms-input-placeholder { /* Internet Explorer 10+ */ 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-80);}
.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: 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 .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 > a:hover, .mobile .nav > li > a:focus, .mobile .nav > li > a:active,
.mobile .nav > li.active a,
.mobile .nav > .active > a, .mobile .nav .active > a:hover, .mobile .nav > .active > a:focus {background-color: var(--main-theme-gray-60); color: var(--main-theme-gray-5);}
.mobile .nav > li.active a {background-image: url(images/navigation/menu-corner.png); background-repeat: no-repeat; background-position: right center;}

.mobile .btn-close {width: 40px; height: 100%; top: 0; right: 0; color: var(--neutral-white);}
.mobile .btn-close:hover .fonticon, .mobile .btn-close:focus .fonticon, .mobile .btn-close:active .fonticon {color: var(--main-theme-gray-60);}

/****************************
	MENU / JSTREE
****************************/
.menu {margin: 0 -7px; padding: .5em 0; overflow: hidden;}
.mobile .menu {padding: 0;}
.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;}
.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: flex-start;
    flex-wrap: wrap;
    gap: .5em;
    margin-top: -.9rem;
    padding: .5rem 0 .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;}

.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-30);}
.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-30);}
.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;}

.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-30); 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 {}
.wiki-category-group {}
.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 .btn-big:focus, .fcs .btn-big:active {background-color: var(--main-theme-gray-5);}
.fcs .btn-highlight, .fcs .btn-highlight:focus, .fcs .btn-highlight:active {background-color: var(--main-theme-color-50);}
.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-30);
	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;}

/****************** 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-30);}
.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-30);}
.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-30);}
.home .fixed-portlet .panel-header {cursor: not-allowed; border-color: var(--main-theme-gray-30); 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 {color: var(--neutral-white); text-decoration: underline;}
.login-form .btn {text-decoration: none;}

.login-form .has-error .col-form-label {
    color: var(--error-color-20);
}
.login-form .form-control: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;}
}