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

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

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

/* IMPORT BASIC */
@import url(../basic_new/layout.css);

/* VARIABLES FOR DARK THEME */
:root {
	--violet-dark: #2a2f50;
	--violet-mid: #7c83af;
	--violet-light: #979BBF;
}

/* GENERAL */
body {
	background-color: var(--main-theme-gray-90);
	color: var(--main-theme-gray-20);
}

a {
	color: var(--violet-light);
}

.table-sort button {
	color: var(--violet-light);
}

.btn {
	--bs-btn-active-color: var(--main-theme-gray-10);
	--bs-btn-active-bg: var(--violet-dark);
	--bs-btn-active-border-color: var(--violet-mid);

	background-color: var(--main-theme-gray-90);
	border-color: var(--violet-mid);
	color: var(--main-theme-gray-20);
}

.btn:hover,
.btn:focus,
:not(.btn-check) + .btn:active {
	background-color: var(--violet-dark);
	color: var(--main-theme-gray-10);
}

.btn:focus-visible, .btn-link:focus-visible {
	--bs-btn-hover-bg: var(--violet-dark);
	--bs-btn-hover-border-color: var(--violet-mid);
	--bs-btn-hover-color: var(--main-theme-gray-20);
}

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

.btn-highlight {
	background-color: var(--violet-mid);
	color: var(--main-theme-gray-90);

	&:hover, &:active {
		background-color: var(--violet-dark);
		border-color: var(--violet-mid);
		color: var(--violet-light);
	}

	&:focus {
		background-color: var(--violet-mid);
		color: var(--main-theme-gray-90);
		outline-color: currentColor;
	}
}

.ui-widget-content .btn-highlight {
	color: var(--main-theme-gray-90);
}

legend,
.legend {
	background-color: var(--main-theme-gray-70);
	color: var(--main-theme-gray-20);
}

/* TYPO */
.text-warning {
	color: var(--accent-theme-color-30) !important;
}

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

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

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

/* BOX / ALERT */
.box {
	background-color: var(--main-theme-gray-80);
}

.box-warning {
	background-color: var(--accent-theme-color-70);
	color: var(--neutral-white);
}

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

.box-highlight {
	background-color: var(--main-theme-color-60);
}

.box-info {
	background-color: var(--violet-dark);
	color: var(--main-theme-gray-20);

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

.box-neutral {
	background-color: transparent !important;
}

.box-light {
	background-color: var(--main-theme-gray-80);
	border-color: var(--violet-mid);
}

.header-box {
	background-color: var(--violet-dark);
	border-color: var(--violet-dark);
	color: var(--main-theme-gray-20);
}

.main-header .box-access {
	border-color: var(--violet-dark);
}

.box-success {
	background-color: var(--success-color-80);
	color: var(--neutral-white);

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

.box-success-light {
	border-color: var(--success-color-70);
}

.box-danger {
	background-color: var(--error-color-80);
}

/* TABLE */

.table-header {
	background-color: var(--main-theme-gray-80);
}

tr.table-header td {
	background-color: var(--main-theme-gray-80);
}

.table-footer {
	border-color: var(--main-theme-gray-70);
}

.table-panel th, .table-panel td {
	border: none;
}

.table-sort {
	color: var(--main-theme-gray-20);
}

th a {
	color: var(--main-theme-gray-20);
}

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

.table tbody td,
.table .headers th,
.table tfoot .navigation td {
	background-color: var(--main-theme-gray-90);
	color: var(--main-theme-gray-20);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-bg-type: var(--main-theme-gray-80);
}

.table-panel tbody > tr:hover,
.table > tbody > tr.active > td, .table > tbody > tr.active > th, .table > tbody > tr > td.active, .table > tbody > tr > th.active,
.table > tfoot > tr.active > td, .table > tfoot > tr.active > th, .table > tfoot > tr > td.active, .table > tfoot > tr > th.active,
.table > thead > tr.active > td, .table > thead > tr.active > th, .table > thead > tr > td.active {
	background-color: var(--violet-dark);
}

.table > thead > tr > th.active {
	background-color: var(--main-theme-gray-90);
}

/* FORMS */
.form-control,
.form-select {
	background-color: var(--main-theme-gray-90);
}

.form-control:focus,
input[type=checkbox]:focus, input[type=file]:focus, input[type=radio]:focus {
	outline-color: var(--main-theme-gray-20);
}

.form-control:focus {
	border-color: var(--violet-dark);
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background: var(--main-theme-gray-90);
}

/* HEADER */
.page-header {
	border: none;
}

.logo {
	background-image: url(images/logo-OPAL-white.png);
}

.resource-header-mobile .main-header {
	background-color: var(--main-theme-gray-80);
}

/* NAV */
.btn-close {
	color: var(--main-theme-gray-40);
}

.mobile .btn-close {
	color: var(--main-theme-gray-10);
	filter: none; /* reset bootstrap to ensure the correct colors are used */

	&:hover {
		color: var(--neutral-white);
	}
}

.ui-dialog-titlebar .ui-dialog-titlebar-close {
	filter: invert(100%);
}

.panel,
.menu .jstree-default .jstree-children > li a:hover, .menu .jstree-default .jstree-children > li a:focus {
	box-shadow: none;
}

.resource-details {
	border: none;
}

/* TINY */
.mce-textbox {
	filter: invert(100%) !important;
}

.mce-label {
	text-shadow: none !important;
}

.mce-panel,
.mce-btn {
	background-color: var(--main-theme-gray-80) !important;
}

/* PAGINATION */
.pager li > a, .pager li > span {
	background-color: var(--main-theme-gray-90);
}

.pagination a[aria-disabled="true"] {
	color: var(--main-theme-gray-20);
	background-color: var(--main-theme-gray-90);
}

/************* COURSE PREVIEW *************/
.course-preview {
	background: var(--main-theme-gray-80);
}

.course-preview .nav .active.dynamic-tab,
.course-preview .main-header {
	background-color: var(--main-theme-gray-90);
}

.course-preview .menu,
.course-preview .content-container-inner,
.course-preview .main-header .box-access,
.course-preview .resource-details {
	background-color: var(--main-theme-gray-80);
}

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

.course-config-header {
	background-color: var(--main-theme-gray-80);
	color: var(--main-theme-gray-20);
}

/****************************
	CHANGE COLORS
*****************************/

/* RESET BACKGROUND */
.panel-header,
.page-footer {
	background-color: transparent !important;
}

/* BLACK */
.steps li,
.dropzone {
	background-color: var(--main-theme-gray-90);
}

.tag-editor {
	background-color: var(--main-theme-gray-90) !important;
}

.steps .arrow:after {
	border-left-color: var(--main-theme-gray-90);
}

.nav > .active,
.dropdown-menu,
.ui-dialog-buttonset .ui-button,
.popover,
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	background: var(--main-theme-gray-90);
}

.ui-widget-content,
.mce-menu-item.mce-disabled, .mce-menu-item.mce-disabled:hover {
	background: var(--main-theme-gray-90) !important;
}

.panel,
.subnav > li,
.resource-details,
.resource-header .main-header,
.popover-header,
.steps,
.progress,
.fo .post-edit,
.post-footer,
.mobile.course .menu-container,
.breadcrumb,
.profile-image .fonticon,
.ui-tabs .ui-tabs-nav li,
.forum-thread-new {
	background-color: var(--main-theme-gray-80);
}

.post-heading,
.forum-post .post-header,
.hide-course-tree,
.page .menu-btn, .page .menu-btn:hover, .page .menu-btn:focus, .page .menu-btn:active,
.assess-neutral .fonticon {
	background-color: var(--main-theme-gray-80);
}

.menu .jstree-default .jstree-container-ul .jstree-node .jstree-children .jstree-children,
.page-footer,
.gutter-horizontal,
.main-header,
.popover,
.dropdown-menu,
.fo .post-edit,
.forum-post,
.mobile .menu .jstree-default .jstree-children > li,
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default,
.ui-widget-header,
.forum-thread-new {
	border-color: var(--main-theme-gray-70);
}

.mce-btn {
	border-color: var(--main-theme-gray-70) !important;
}

/* VIOLET */
.page-header,
.nav-container,
.nav-container, .nav-container + .clearfix,
.page .mobile-page-header,
.ui-dialog .ui-dialog-titlebar,
.list-group-item.highlight,
.list-group-item:hover, .list-group-item:focus,
.ui-dialog-buttonset .ui-button:hover, .ui-dialog-buttonset .ui-button:focus, .ui-dialog-buttonset .ui-button:active,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.menu .jstree-clicked,
.menu .jstree-default .jstree-children > li a:hover, .menu .jstree-default .jstree-children > li a:focus,
.btn-highlight[class*="custom-theme"],
.steps .active,
.forum-post.best > .post-header .btn.best,
.portlet .badge,
.tag,
.post-date {
	background-color: var(--violet-dark);
}

.mce-menu-item:hover, .mce-menu-item:focus,
tr.hasNew {
	background-color: var(--violet-dark) !important;
}

.jstree-node.calendar, .jstree-node.efficiency-statement, .jstree-node.glossary,
.menu .jstree-default .jstree-container-ul .jstree-node > .jstree-children,
.ui-dialog .ui-dialog-buttonpane, .ui-dialog .btn-container {
	border-color: var(--violet-dark);
}

.popover.bottom > .arrow:after {
	border-bottom-color: var(--violet-dark);
}

.steps .active .arrow:after,
.mobile .nav > li > a {
	border-left-color: var(--violet-dark);
}

.ui-dialog-buttonset .ui-button {
	border-color: var(--violet-mid);
}

.resource-details .content-preview-author a {
	color: var(--violet-light);
}

.ui-widget-content a,
.custom-theme-basic_new_dark {
	color: var(--violet-light) !important;
}

.content-preview-horizontal .content-preview-img .fonticon {
	color: var(--violet-mid);
}

/* BLUE */

/* WHITE / LIGHT */
a:hover, a:focus,
.btn-link:hover,
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.resource-header h2 a,
.nav > .active > a, .nav .active > a:hover, .nav > .active > a:focus,
.menu .jstree-clicked {
	color: var(--neutral-white);
}

.btn-link,
.ui-dialog-buttonset .ui-button,
.ui-widget-content,
.list-group-item-action,
.list-group-item-action:hover, .list-group-item-action:focus,
.ui-dialog-buttonset .ui-button:hover, .ui-dialog-buttonset .ui-button:focus, .ui-dialog-buttonset .ui-button:active,
.dropdown-menu > li > a,
.nav > li > a,
.subnav > li > a,
.list-group-item .list-group-fav,
.steps li, .steps li a,
.post-footer .btn,
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited,
.pager a,
.page-footer a,
.radio label, .checkbox label,
.dropdown-header {
	color: var(--main-theme-gray-20);
}

.mce-menubar .mce-menubtn button span,
.mce-btn button,
.mce-ico,
.mce-menu-item,
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
	color: var(--main-theme-gray-20) !important;
}

.list-group-item-text,
.content-preview-main > small,
.assess-mark, .assess-additional, .assess-date {
	color: var(--main-theme-gray-30);
}

.form-control,
.form-select {
	color: var(--main-theme-gray-30);
}

.mce-menu-item.mce-disabled .mce-text, .mce-menu-item.mce-disabled:hover .mce-text, .mce-menu-item.mce-disabled .mce-ico, .mce-menu-item.mce-disabled:hover .mce-ico {
	color: #777 !important;
}

.panel, .panel-header,
.list-group-item {
	border-color: #999;
}

.mce-panel {
	border-color: #999 !important;
}

.steps .arrow {
	border-left-color: #999;
}

/* OTHER */
.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-20);
}

/****************************
	SPECIAL STUFF
*****************************/
.list-group-item-action:not(.active):hover {
	color: var(--neutral-white);
}

.manage-groups .main-header,
.manage-groups .nav .active.dynamic-tab,
.manage-groups .menu-groups .jstree-container-ul {
	background-color: var(--main-theme-color-80);
	color: var(--neutral-white);
}

.manage-groups .menu-course .jstree-container-ul,
.jstree-default .jstree-disabled.jstree-clicked {
	background-color: transparent;
}

.manage-groups .menu-groups .jstree-clicked,
.manage-groups .menu-groups .jstree-default .jstree-children > li a:hover,
.manage-groups .menu-groups .jstree-default .jstree-children > li a:focus {
	background-color: var(--main-theme-color-60);
}

.jstree-anchor .assess-open,
.st-mobile-nav .assess-open {
	background-color: var(--main-theme-gray-90);
}

.mobile.course .menu-container.open {
	background: var(--main-theme-gray-90);
	box-shadow: 2px 2px 6px 4px var(--main-theme-gray-60);
}

.ai-chat-usage {
	color: var(--main-theme-gray-40);
}