/*
 * Copyright (C) 2014 denkbares GmbH, Germany
 *
 * This is free software; you can redistribute it and/or modify it under the
 * terms of the GNU Lesser General Public License as published by the Free
 * Software Foundation; either version 3 of the License, or (at your option) any
 * later version.
 *
 * This software is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with this software; if not, write to the Free Software Foundation,
 * Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA, or see the FSF
 * site: http://www.fsf.org.
 */

/* ################################################## */
/* ------------Default Markup Styles----------------- */
/* ################################################## */

.defaultMarkupFrame {
	border: 1px solid var(--border-color-table);
	position: relative;
	margin: 0 0 5px 0;
	padding: 0 0 0 0;
	clear: left;
}

.defaultMarkupFrame.frameless, .defaultMarkupFrame.headerless {
	border: none;
}

.defaultMarkup {
	position: relative;
	background-color: var(--bg-color-default-Markup);
	margin-right: 0;
	margin-left: 0;
	min-height: 30px;
	overflow-x: hidden;
	overflow-y: visible;
}

.defaultMarkup .markupText {
	white-space: pre-wrap;
	padding: 3px 3px 3px 3px;
}

.defaultMarkup .markupAnnotation, .defaultMarkup .compilerAnnotations {
	display: block;
}

.frameless > .defaultMarkup > .markupText > .markupAnnotation,
.frameless > .defaultMarkup > .markupText > .compilerAnnotations {
	display: none;
}

.frameless .markupHeader, .headerless .markupHeader {
	display: none;
}

.defaultMarkup .markupText .header {
	font-size: 16px;
	font-weight: bold;
	padding-top: 12px;
	padding-bottom: 12px;
}

.defaultMarkupFrame .headerMenu .markupHeader {
	overflow: hidden;
	padding: 3px 10px 3px 10px;
	display: flex;
	vert-align: middle;
}

.defaultMarkupFrame .headerToolbar .markupHeader {
	overflow: hidden;
	padding: 3px;
}

.headerToolbar .markupHeader span {
	font-weight: bold;
	padding-left: 5px;
}

.headerToolbar .markupHeader .markupTools {
	margin-left: 10px;
}

.headerToolbar .markupHeader .markupTools div {
	display: inline;
	padding: 0 3px 0 3px;
}

.defaultMarkupFrame .markupHeaderFrame {
	top: 1px;
	white-space: nowrap;
	z-index: 500;
	overflow: visible;
}

.defaultMarkupFrame .headerMenu {
	opacity: 0.3;
	z-index: 500;
	max-width: 35px;
	background-color: var(--bg-color-base);
	right: 1px;
	position: absolute;
	border-left: 1px solid var(--border-color-table);
	border-bottom: 1px solid var(--border-color-table);
	border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
}

.defaultMarkupFrame .headerToolbar {
	background-color: var(--bg-color-secondary-shade);
	left: 1px;
}

.defaultMarkupFrame .markupTools {
	display: inline;
}

.defaultMarkupFrame .markupMenuIndicator {
	/*noinspection CssUnknownTarget*/
	background: var(--bg-color-markupMenuIndicator) no-repeat right 50%;
	/*padding-right: 15px;*/
	padding: 0 15px 0 15px;
}

.defaultMarkupFrame .markupMenu {
	display: none;
	position: relative;
	border-top: 1px solid var(--border-color-table); /*Template: Haddock*/
	border-radius: 0 0 0 10px;
	/*border: 1px solid #DDD; !*TODO: add for Template KnowWE*!*/
	/*margin: -1px -2px -1px -1px; !*TODO: add for Template KnowWE*!*/
	background-color: var(--bg-color-base);
	z-index: 750;
	overflow: auto;
	max-height: 70vh;
}

.defaultMarkupFrame .markupMenu .list-group, .toolMenuFrame .markupMenu .list-group {
	margin-bottom: 0;
	display: block;
	list-style: none;
	white-space: nowrap;
}

.defaultMarkupFrame .markupMenuItem, .toolMenuFrame .markupMenuItem {
	padding: 0.25em;
	border: 0;
}

.defaultMarkupFrame .markupMenuItem > img {
	vertical-align: -3px;
	padding-right: 3px;
}

.defaultMarkupFrame .markupMenuItem a.markupMenuItem {
	padding: 0.25em;
	margin: -0.25em;
	color: var(--text-color-default-head);
	border: 0;
}

.defaultMarkupFrame .customMenuItem a.markupMenuItem {
	margin: 0;
	margin-left: -0.25em;
	margin-right: -0.25em;
}

.defaultMarkupFrame a.markupMenuItem:hover {
	background-color: var(--hover-bg-color-li);
	text-decoration: none;
	color: var(--text-color-primary-link);
}

.defaultMarkupFrame .headerMenu .markupIcon {
	margin: 4px 6px 0 0;

}

.defaultMarkupFrame .headerToolbar .markupIcon {
	vertical-align: -3.5px;
}

.markupMenuDivider {
	line-height: 0;
	border-top: 1px solid var(--border-color-table);
	display: block;
}

span.markupMenuItem {
	padding: 0 !important;
}

.defaultMarkupFrame .long-op-progress-container .long-progress:first-of-type {
	margin-top: 5px;
}

.defaultMarkupFrame .long-op-progress-container .long-progress {
	margin-top: 10px;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-bar {
	display: inline-block;
	width: 50%;
	height: 21px;
	position: relative;
	vertical-align: top;
	top: -2px;
	background-color: var(--bg-color-primary-shade);
}

.KnowWE .defaultMarkupFrame .long-op-progress-container .long-progress-bar {
	height: 12px;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-bar .long-progress-bar-percent {
	position: absolute;
	top: -3px;
	left: 10px;
	right: 10px;
	text-align: center;
	color: var(--text-color-primary)
}

.defaultMarkupFrame .long-op-progress-container .long-progress-bar .ui-progressbar-value {
	height: 21px;
}

.KnowWE .defaultMarkupFrame .long-op-progress-container .long-progress-bar .ui-progressbar-value {
	height: 21px;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-state {
	display: inline-block;
	position: relative;
	top: -3px;
	margin: 2px 5px 2px 5px;
	background-image: none;
	vertical-align: top;
}

.long-progress-bar .ui-widget-header {
	border: 1px solid var(--border-color-default);
	background: var(--color-grey-medium);
	color: var(--text-color-primary);
}

.ui-progressbar.ui-widget-content {
	border: 1px solid var(--border-color-default);
}

.haddock .defaultMarkupFrame .long-op-progress-container .long-progress-state {
	top: -5px;
}

.KnowWE .defaultMarkupFrame .long-op-progress-container .long-progress-state {
	margin-right: 8px;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-state:hover {
	cursor: pointer;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-state:before {
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	content: "\f04d";
	color: var(--text-color-knowwe-error);
	font-weight: 900;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-error .long-progress-state {
	background-image: none;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-error .long-progress-state:before {
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	content: "\f111";
	color: var(--text-color-knowwe-error);
	background-image: none;
	font-weight: 900;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-success .long-progress-state {
	background-image: none;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-success .long-progress-state:before {
	font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
	content: "\f111";
	color: var(--text-color-knowwe-ok);
	font-weight: 900;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-bar-message,
.defaultMarkupFrame .long-op-progress-container .long-progress-close {
	display: inline-block;
	margin-left: 5px;
	top: -4px;
	position: relative;
	vertical-align: top;
}

.defaultMarkupFrame .long-op-progress-container .long-progress-close {
	color: grey;
	user-select: none;
}

/*
 * make sure that in print-out all titles are visible,
 * but no menus
 */
@media print {
	.defaultMarkupFrame .markupMenu {
		opacity: 0 !important;
	}

	.defaultMarkupFrame .headerMenu {
		max-width: 250px !important;
		border-width: 0 !important;
	}

	.defaultMarkupFrame .headerMenu .markupHeader {
		padding: 3px 0 0 0 !important;
	}

	.defaultMarkupFrame .markupMenuIndicator {
		padding-right: 0;
		visibility: hidden;
	}
}

.objectinfo.preview {
	display: block; /* inline-block;*/
	vertical-align: top;
	margin-bottom: 0.5em;
}

.objectinfo.preview .indent {
	display: none;
}

.objectinfo.preview.type_CoveringList .relation, .objectinfo.preview.type_CoveringList .ellipse {
	margin-left: 1em;
}

.objectinfo-header-name {
	font-size: 18px;
	line-height: 1.2;
}

.objectinfo-header-class {
	margin-left: 5px;
	font-size: 18px;
	font-weight: normal;
}

/*
 * ListSections Rendering
*/

table.list-sections {
	margin: 20px;
}

table.list-sections thead th {
	padding: 0.25em 0.5em;
	white-space: pre;
}

table.list-sections td,
table.list-sections th {
	padding: 1px 0.25em;
	white-space: normal;
}

table.list-sections td {
	vertical-align: top;
}

table.list-sections td.list-sections-tools {
	white-space: nowrap;
}

table.list-sections td.list-sections-number {
	text-align: right;
}

table.list-sections td.list-sections-tools ~ td.list-sections-tools {
	padding-left: 0;
}

table.list-sections td.list-sections-name {
	white-space: pre-wrap;
}

span.list-sections-description,
table.list-sections td.list-sections-failure-mode,
table.list-sections td.list-sections-packages,
table.list-sections td.list-sections-compilers,
table.list-sections td.list-sections-description,
table.list-sections td.list-sections-description a:link,
table.list-sections td.list-sections-description a:visited {
	color: var(--text-color-secondary);
	white-space: pre-wrap;
	max-width: 50vw;
}

table.list-sections td.list-sections-failure-mode {
	font-size: 70%;
	padding-left: 0;
}

table.list-sections td.list-sections-blank {
	padding-left: 0;
	padding-right: 0;
}

table.list-sections th:has(.list-sections-separator),
table.list-sections td.list-sections-separator {
	border-left: 3px solid var(--text-color-secondary);
}

table.list-sections td.list-sections-progress {
	color: var(--text-color-secondary);
}

table.list-sections .odd-row {
	background-color: var(--bg-color-table-odd-th);
}

/*tr:nth-child(even) {*/
/*	background-color: var(--bg-color-table-odd-th); !* sparql starts with odd in head, inconsistent atm *!*/
/*}*/

table.list-sections tr.highlighted {
	background-color: var(--bg-color-table-th-highlighted);
}

.grouped-list-section-wrapper .filter-input .form-control {
	margin-top: -3px;
}

.grouped-list-section-wrapper .filter-input .fa-circle-info {
	margin: 0 10px;
	cursor: hand;
}

.grouped-list-search-hint {
	margin-bottom: .7em;
	color: #777;
}

.filter-input .clear-filter {
	margin: -1.5em;
	cursor: pointer;
}

.list-sections-filter-select {
	margin-left: 3em;
}

.knowwe-superscript {
	zoom: 70%;
	position: relative;
	top: -9px;
}

/* ################################################## */
/* ------------Tool Menu Styles----------------- */
/* ################################################## */

.toolMenuDecorated {
	position: relative;
	white-space: normal;
}

.toolsMenuDecorator {
	top: -1px;
	bottom: -1px;
	left: -1px;
	right: -15px;
	border: 1px dotted grey;
	border-radius: 4px;
	text-align: right;
	/*background: url(../../KnowWEExtension/d3web/icon/dropdown-opaque.png) no-repeat right 50%;*/
	padding-right: 15px;
	visibility: hidden;
}

.toolsMenuDecorator2 {
	border: 1px dotted transparent;
	border-radius: 4px;
}

.toolMenuFrame {
	position: relative;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.toolMenuFrame .markupHeader {
	overflow: hidden;
	padding: 3px 10px 3px 10px;
}

.toolMenuFrame .markupHeaderFrame {
	position: absolute;
	top: 1px;
	right: 1px;
	border-left: 1px solid var(--border-color-table);
	border-bottom: 1px solid var(--border-color-table);
	border-bottom-left-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	background-color: var(--bg-color-base);
	white-space: nowrap;
	z-index: 500;
	overflow: visible;
}

.toolMenuFrame .markupTools {
	display: inline;
	vertical-align: -3px;
}

.toolMenuFrame .markupMenuIndicator {
	/*noinspection CssUnknownTarget*/
	background: var(--bg-color-base) url(../../templates/KnowWE/images/arrdownsmall.gif) no-repeat right 50%;
	padding-right: 15px;
}

.toolMenuFrame .markupMenu {
	position: relative;
	border: 2px solid var(--border-color-table);
	background-color: var(--bg-color-base);
	z-index: 750;
	max-height: 70vh;
	overflow: auto;
}

.toolMenuFrame .markupMenuItem {
	display: block;
	list-style: none;
	padding: 0.25em;
	white-space: nowrap;
	margin-bottom: 0;
}

.toolMenuFrame .markupMenuItem > img {
	vertical-align: -3px;
	color: #036;
}

.toolMenuFrame .markupMenuItem a.markupMenuItem {
	padding: 0.25em;
	margin: -0.25em;
	border: 0;
}

.InlineTool a.markupMenuInlineSpacer {
	padding: 0 1px 0 1px;
}

.InlineTool a.markupMenuInlineItem {
	padding: 0 3px 0 3px;
	margin: 0 1px 0 1px;
	border: 1px solid var(--border-color-default);
	border-radius: 3px;
	display: inline-block;
	min-width: 1.5em;
	text-align: center;
}

.toolMenuFrame .customMenuItem a.markupMenuItem {
	margin: 0;
	margin-left: -0.25em;
	margin-right: -0.25em;
	border: 0;
}

.toolMenuFrame a.markupMenuItem:hover {
	background-color: var(--hover-bg-color-btn-default);
	text-decoration: none;
	color: var(--text-color-primary-link);
}

.toolMenuFrame .markupHeader .markupIcon {
	vertical-align: -7px;
}

.long-progress-report {
	margin-bottom: 5px;
}

.defaultMarkup .markupText .long-progress-report a.action {
	position: relative;
	display: inline-block;
	padding: 0.25em 0.5em;
	margin: 2px 0.3em;
	min-width: 80px;
	text-decoration: none;
	text-align: center;
	line-height: normal;
	border: 1px solid var(--border-color-table);
	background: var(--bg-color-default-Markup);
	white-space: nowrap;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-ms-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

.defaultMarkup .markupText .long-progress-report a.action .fa {
	position: relative;
	top: -1px;
	padding-right: 5px;
	margin-bottom: -4px;
}


.type_RenderKDOM .markupText {
	overflow-x: auto;
}

.type_RenderKDOM td {
	white-space: pre;
}

.image-markup-wrapper .accordion-close .panel-heading::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f03e";
	margin-right: 10px;
	margin-left: 5px;
}


.image-markup-wrapper .accordion-close .panel-heading:not(.active):after {
	content: "Click to show image";
}

.image-markup-wrapper .accordion-close .panel-heading.active::after {
	content: "Click to hide image";
}

.image-markup-wrapper .accordion-close .panel-heading {
	background-color: #eeeeee;
	margin-bottom: 0px;
	width: 16%;
	outline: none;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.image-markup-wrapper .accordion-close .panel {
	border: none;
	border-color: transparent;
	box-shadow: none;
}



/* ################################################## */
/* ------------Packaging Styles----------------- */
/* ################################################## */

.packageOpacity {
	color: var(--text-color-package-name);
}

.defaultMarkupFrame.type_Package .packageOpacity {
	color: var(--text-color-package-name-opaque);
}

i.packageOpacity {
	color: unset;
	opacity: 0.4;
}

.defaultMarkupFrame.type_Package i.packageOpacity {
	color: unset;
	opacity: 1.0 !important;
}


/* ################################################## */
/* -----------Navigation knowwe-pagination Styles----------- */
/* ################################################## */

i.knowwe-paginationNavigationIcons {
	padding: 0 5px 0 5px;
}

.knowwe-paginationToolSeparator {
	display: inline-block;
	margin-left: 10px;
	margin-right: 10px;
	border-left: 2px solid var(--border-color-table);
	height: 10px;
}

.knowwe-paginationToolbar {
	margin-left: 5px;
	margin-right: 5px;
	position: relative;
	white-space: nowrap;
	display: inline-block;
	color: var(--color-pagination-tools);
}

.knowwe-paginationToolbar label {
	font-weight: inherit;
}

.knowwe-paginationToolbar .filter-style {
	position: relative;
	bottom: -1px;
	margin: 3px 3px 3px 4px;
}

table.knowwe-pagination th.sortable span {
	color: var(--text-color-default-head);
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}

table.knowwe-pagination th.sortable span:hover {
	color: var(--hover-text-color-header-icons);
	text-decoration: underline;
	cursor: pointer;
}

table.knowwe-pagination th.sortable .sorting-icon {
	text-decoration: none;
	margin-left: 5px;
}

table.knowwe-pagination th.sortable .secondary {
	color: var(--text-color-secondary);
}

table.knowwe-pagination th img {
	position: relative;
	top: 2px;
}

table.knowwe-pagination th img.sorting {
	float: right;
}

table.knowwe-pagination th img.filter {
	float: left;
}

table.knowwe-pagination th img.filter:hover {
	cursor: pointer;
}

.pagination-filter-tooltipster.tooltipster-knowwe .tooltipster-content {
	max-height: 450px;
}

.filter-datepicker {
	display: flex; /* Flexbox für horizontale Anordnung */
	align-items: start; /* Alle Elemente werden am oberen Rand ausgerichtet */
}

.filter-datepicker-outer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.filter-datepicker .filter-datepicker-input {
	width: auto;
	min-width: 2ch;
}

.filter-parent .pagination-filter-list {
	list-style-type: none;
	padding: 0;
	max-height: 330px;
	overflow: auto;
}

.filter-parent input[type=checkbox] {
	margin: 3px 6px 3px 4px;
}

.filter-parent ul {
	margin: 0.5em 0;
}

.filter-parent label {
	position: relative;
	bottom: 1px;
	user-select: none;
	padding: 3px 5px 2px 0;
	margin: 0;
}

.filter-parent .pagination-filter-list li {
	white-space: pre;
}

.filter-parent #filter-input {
	width: 150px;
}

.filter-parent .filter-input-indicator-parent {
	display: inline-block;
	height: 22px;
	width: 22px;
	overflow: hidden;
	vertical-align: middle;
	visibility: hidden;
	opacity: 0;
}

.filter-parent .filter-input-indicator-parent.loading-texts {
	visibility: initial;
	opacity: 1;
	transition: opacity 200ms ease-in 200ms;
}

.filter-parent .filter-input-indicator {
	padding: 5px;
}

.filter-icon {
	padding-right: 5px;
}

.filter-parent .toggle-box-parent {
	margin-top: 8px;
}

.filter-parent button.toggle-box {
	padding: 1px 6px;
}

.filter-parent button.cancel-button {
	margin-left: 6px;
}

.filter-parent .close-buttons {
	margin-top: 10px;
}

.filter-parent .close-buttons button {
	width: 60px;
}

/* ################################################## */
/* ------------- Inline Definition Lists ------------ */
/* ################################################## */

.inline-definition {
}

.inline-definition-head:BEFORE {
	content: "(";
}

.inline-definition-head:AFTER {
	content: ": ";
}

.inline-definition-head {
	font-size: 50%;
	color: var(--text-color-secondary);
}

.inline-definition-data {
}

.inline-definition-data:AFTER {
	content: ")";
	font-size: 50%;
	color: var(--text-color-secondary);
}

.haddock a.anchor {
	display: inline;
	position: relative;
	top: -71px;
	visibility: hidden;
}

.unrecognized-syntax {
	color: var(--text-color-knowwe-error);
	text-decoration: underline var(--text-color-knowwe-error);
}

/* ################################################## */
/* ------------- Font Awesome Customisation----------- */
/* ################################################## */

.knowwe-warning, .knowwe-yellow {
	color: var(--text-color-knowwe-warning);
}

.knowwe-error, .knowwe-highprio, .knowwe-red {
	color: var(--text-color-knowwe-error);
}

.knowwe-lowprio {
	color: #aec8ff
}

.knowwe-ok, i.knowwe-green {
	color: var(--text-color-knowwe-ok);
}

.knowwe-blue {
	color: var(--text-color-default-head);
}

.knowwe-skip {
	color: var(--text-color-knowwe-ok);
}

.knowwe-disabled, .knowwe-deactivated, .knowwe-gray, .knowwe-grey {
	color: var(--text-color-secondary);
}

/*
 * Workaround for a Chrome bug, see: https://bugs.chromium.org/p/chromium/issues/detail?id=1066924#c9
 */
.edit-area textarea {
	overflow-anchor: none
}

/* ################################################## */
/* ------------- Style Renderer Light Mode----------- */
/* ################################################## */

.style-keywords {
	color: var(--text-color-keywords);
}

.style-content {
	color: var(--text-color-content);
}

.style-comment {
	color: var(--text-color-comment);
}

.style-property {
	color: var(--text-color-property);
}

.style-solution {
	color: var(--text-color-solution);
}

.style-flowchart-exit {
	color: var(--text-color-flowchart-exit);
}

.style-number {
	color: var(--text-color-number);
}

.style-constant {
	color: var(--text-color-constant);
}

.style-operator {
	color: var(--text-color-operator);
}

.style-locale {
	color: var(--text-color-locale);
}

.style-choice {
	color: var(--text-color-choice);
}

.style-question {
	color: var(--text-color-question);
}

.style-condition {
	color: var(--text-color-condition);
}

.style-questionnaire {
	color: var(--text-color-questionnaire);
}

.style-flowchart {
	color: var(--text-color-flowchart);
}

.style-flowchart-start {
	color: var(--text-color-flowchart-start);
}

.style-prompt {
	color: var(--text-color-prompt);
}

.style-package-name {
	color: var(--text-color-package-name);
}

.style-answer-reference {
	color: var(--text-color-answer-reference);
}

.style-variable {
	color: var(--text-color-variable);
}

.style-coom-name {
	color: var(--text-color-coom-name);
}

.style-comfort {
	color: var(--text-color-comfort);
}

.style-unexpected {
	color: var(--text-color-unexpected);
}

.style-not-found {
	color: var(--text-color-not-found);
}

.style-success {
	color: var(--text-color-success);
}

.style-fail {
	color: var(--text-color-fail);
}

.style-location-embraced {
	color: var(--text-color-location-embraced);
}

.style-condition-fulfilled {
	background-color: var(--text-color-condition-fulfilled);
}

.dark-mode .style-condition-fulfilled {
	background-color: transparent;
	border: solid var(--text-color-condition-fulfilled);
	border-radius: 10px;
	padding: 2px;
}

.style-condition-false {
	background-color: var(--text-color-condition-false);
}

.dark-mode .style-condition-false {
	background-color: transparent;
	border: solid var(--text-color-condition-false);
	border-radius: 10px;
	padding: 2px;
}