/* ---- OPUS specific style-sheet ----- */

th {
	white-space: nowrap;
}

/* Set all columns to the same height. */
/* See also: https://www.w3schools.com/howto/howto_css_equal_height.asp */
.equalHeightCol {
	display: table-cell;
	padding: 16px;
}

/* user details fragment */
.no-margin-bottom {
	margin-bottom: 0;
}

.form-control:focus {
	box-shadow: none;
}

.form-group {
	margin-top: 10px;
}

/* Style class to display buttons under data tables*/
.dt-bottom-button {
	margin-top: 5px;
}

.panel-header {
	color: white;
	margin: 0;
}

/* Legacy layout compatibility after removing oenb-*.css. */
.container-header {
	background: url('/opus/static/img/background-circles-blau-96cae5a8dad55acc6b32580a1ea5aca8.png') no-repeat center center;
	background-size: cover;
}

.no-padding {
	padding: 0;
}

.no-vertical-padding {
	padding-left: 0;
	padding-right: 0;
}

.no-margin {
	margin: 0;
}

.pull-right {
	float: right !important;
}

.pull-left {
	float: left !important;
}

.hide {
	display: none !important;
}

/* Footer compatibility (legacy Bootstrap 3 list-inline behavior). */
#portalFooter {
	font-size: 12px;
	line-height: 1.35;
}

#portalFooter .list-inline {
	padding-left: 0;
	margin-left: -5px;
	list-style: none;
	margin-bottom: 8px;
}

#portalFooter .list-inline > li {
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
	vertical-align: middle;
}

#portalFooter .list-inline > li > a,
#portalFooter .list-inline > li > span {
	white-space: nowrap;
}

#portalFooter .list-inline img {
	vertical-align: text-bottom;
}

#portalFooter .lang-switcher-combo {
	height: 24px;
	padding: 0 2px;
	vertical-align: middle;
}

.padding-top-sm { padding-top: 10px; }
.padding-bottom-sm { padding-bottom: 10px; }
.padding-left-sm { padding-left: 10px; }
.padding-right-sm { padding-right: 10px; }
.padding-top-md { padding-top: 20px; }
.padding-bottom-md { padding-bottom: 20px; }
.padding-left-md { padding-left: 20px; }
.padding-right-md { padding-right: 20px; }
.padding-top-lg { padding-top: 30px; }
.padding-bottom-lg { padding-bottom: 30px; }
.padding-left-lg { padding-left: 30px; }
.padding-right-lg { padding-right: 30px; }

.margin-top-sm { margin-top: 10px; }
.margin-bottom-sm { margin-bottom: 10px; }
.margin-left-sm { margin-left: 10px; }
.margin-right-sm { margin-right: 10px; }
.margin-top-md { margin-top: 20px; }
.margin-bottom-md { margin-bottom: 20px; }
.margin-left-md { margin-left: 20px; }
.margin-right-md { margin-right: 20px; }
.margin-top-lg { margin-top: 30px; }
.margin-bottom-lg { margin-bottom: 30px; }
.margin-left-lg { margin-left: 30px; }
.margin-right-lg { margin-right: 30px; }

@media (min-width: 768px) {
	.row.row-table {
		display: table;
		table-layout: fixed;
		height: 100%;
		width: 100%;
	}

	.row.row-table > .col-table-cell {
		float: none;
		display: table-cell;
		height: 100%;
		border-spacing: 0 1px;
		z-index: 10;
	}
}

/* Keep legacy 20-grid class behavior used by Thymeleaf templates. */
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
	position: relative;
	min-height: 1px;
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 768px) {
	.col-sm-1 { flex: 0 0 5%; max-width: 5%; }
	.col-sm-2 { flex: 0 0 10%; max-width: 10%; }
	.col-sm-3 { flex: 0 0 15%; max-width: 15%; }
	.col-sm-4 { flex: 0 0 20%; max-width: 20%; }
	.col-sm-5 { flex: 0 0 25%; max-width: 25%; }
	.col-sm-6 { flex: 0 0 30%; max-width: 30%; }
	.col-sm-7 { flex: 0 0 35%; max-width: 35%; }
	.col-sm-8 { flex: 0 0 40%; max-width: 40%; }
	.col-sm-9 { flex: 0 0 45%; max-width: 45%; }
	.col-sm-10 { flex: 0 0 50%; max-width: 50%; }
	.col-sm-11 { flex: 0 0 55%; max-width: 55%; }
	.col-sm-12 { flex: 0 0 60%; max-width: 60%; }
	.col-sm-13 { flex: 0 0 65%; max-width: 65%; }
	.col-sm-14 { flex: 0 0 70%; max-width: 70%; }
	.col-sm-15 { flex: 0 0 75%; max-width: 75%; }
	.col-sm-16 { flex: 0 0 80%; max-width: 80%; }
	.col-sm-17 { flex: 0 0 85%; max-width: 85%; }
	.col-sm-18 { flex: 0 0 90%; max-width: 90%; }
	.col-sm-19 { flex: 0 0 95%; max-width: 95%; }
	.col-sm-20 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
	.col-md-1 { flex: 0 0 5%; max-width: 5%; }
	.col-md-2 { flex: 0 0 10%; max-width: 10%; }
	.col-md-3 { flex: 0 0 15%; max-width: 15%; }
	.col-md-4 { flex: 0 0 20%; max-width: 20%; }
	.col-md-5 { flex: 0 0 25%; max-width: 25%; }
	.col-md-6 { flex: 0 0 30%; max-width: 30%; }
	.col-md-7 { flex: 0 0 35%; max-width: 35%; }
	.col-md-8 { flex: 0 0 40%; max-width: 40%; }
	.col-md-9 { flex: 0 0 45%; max-width: 45%; }
	.col-md-10 { flex: 0 0 50%; max-width: 50%; }
	.col-md-11 { flex: 0 0 55%; max-width: 55%; }
	.col-md-12 { flex: 0 0 60%; max-width: 60%; }
	.col-md-13 { flex: 0 0 65%; max-width: 65%; }
	.col-md-14 { flex: 0 0 70%; max-width: 70%; }
	.col-md-15 { flex: 0 0 75%; max-width: 75%; }
	.col-md-16 { flex: 0 0 80%; max-width: 80%; }
	.col-md-17 { flex: 0 0 85%; max-width: 85%; }
	.col-md-18 { flex: 0 0 90%; max-width: 90%; }
	.col-md-19 { flex: 0 0 95%; max-width: 95%; }
	.col-md-20 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
	.col-lg-1 { flex: 0 0 5%; max-width: 5%; }
	.col-lg-2 { flex: 0 0 10%; max-width: 10%; }
	.col-lg-3 { flex: 0 0 15%; max-width: 15%; }
	.col-lg-4 { flex: 0 0 20%; max-width: 20%; }
	.col-lg-5 { flex: 0 0 25%; max-width: 25%; }
	.col-lg-6 { flex: 0 0 30%; max-width: 30%; }
	.col-lg-7 { flex: 0 0 35%; max-width: 35%; }
	.col-lg-8 { flex: 0 0 40%; max-width: 40%; }
	.col-lg-9 { flex: 0 0 45%; max-width: 45%; }
	.col-lg-10 { flex: 0 0 50%; max-width: 50%; }
	.col-lg-11 { flex: 0 0 55%; max-width: 55%; }
	.col-lg-12 { flex: 0 0 60%; max-width: 60%; }
	.col-lg-13 { flex: 0 0 65%; max-width: 65%; }
	.col-lg-14 { flex: 0 0 70%; max-width: 70%; }
	.col-lg-15 { flex: 0 0 75%; max-width: 75%; }
	.col-lg-16 { flex: 0 0 80%; max-width: 80%; }
	.col-lg-17 { flex: 0 0 85%; max-width: 85%; }
	.col-lg-18 { flex: 0 0 90%; max-width: 90%; }
	.col-lg-19 { flex: 0 0 95%; max-width: 95%; }
	.col-lg-20 { flex: 0 0 100%; max-width: 100%; }
}

.modal {
	display: none;
	z-index: 1055;
}

.modal.show {
	display: block;
}

.modal-backdrop {
	z-index: 1050;
}

/* Bridge Bootstrap 5 state classes to legacy Bootstrap 3 modal styling. */
.modal.fade.show {
	opacity: 1;
}

.modal.show .modal-dialog {
	transform: translate(0, 0);
}

.modal-backdrop.show {
	opacity: .5;
}

.scrollable {
	max-height: 600px;
	overflow-y: auto;
}

.scrollable-popup {
	max-height: 400px;
	overflow-y: auto;
}

.small-margin {
	margin: 15px 15px 15px 15px;
}

.navbarEntry {
	position: relative;
	padding: 8px 30px 8px 10px;
}

.hidden {
	display: none;
}

.loader {
  border: 13px solid #f3f3f3;
  border-top: 13px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#datatables-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: .3;
	z-index: 1000;
}

.datatables-overlay-loader {
	position: relative;
	border: 13px solid #f3f3f3;
	border-top: 13px solid #3498db;
	border-radius: 50%;
	top: 30px;
	left: 50%;
	width: 80px;
	height: 80px;
	animation: spin 2s linear infinite;
	z-index: inherit;
}

.table.dataTable {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* DataTables Bootstrap5 CSS sets border-left:0 on all cells and restores it only on :first-child.
   When the first column has [hidden], :first-child targets the invisible element,
   leaving the first visible column without a left border. This restores it. */
table.table-bordered.dataTable th[hidden] + th,
table.table-bordered.dataTable td[hidden] + td {
	border-left-width: 1px;
}

.no-resize {
	resize: none;
}

.multiline {
	white-space: pre-wrap;
	word-break: break-word;
}

.btn-outline-primary {
	background-color: rgb(238, 238, 238);
	color: black;
	border-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:active:focus,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
	background-color: #e0e0e0;
	color: #333;
	border-color: transparent;
	box-shadow: none;
}

.rounded-circle {
	width: 35px;
	height: 35px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.verticalText{
	writing-mode: tb-rl;
    transform: rotate(-180deg);
}

/* --- Datepicker styles --- */
.reportDateRangePickerCss {
	position: absolute;
	display: inline-block;
/* 	top: 0px; */
	right: 0;
	min-width: 100px;
}

.possibleRangesDivCss {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 100px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	padding: 2px 2px;
	/* 	top: 0px; */
	/* 	right: 0px; */
	z-index: 1;
}

.reportDateRangePickerCss:hover .possibleRangesDivCss {
	display: block;
}

.reportDateRangeBtnCss:hover {
	cursor: pointer;
}

ul.reportDateRange {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

li.reportDateRange {
	background-color: #fff;
	color: var(- -default-color-blue);
}

li.reportDateRange a:hover {
	background-color: #98bbf2;
	color: white;
}

li.reportDateRange a {
	display: block;
	color: #000;
	padding: 4px 8px;
	text-decoration: none;
}

.searchbar {
	width: 70%;
}

#default-tree {
	min-height: 400px;
	height: 80%;
}

.wordbreak {
	overflow-wrap: break-word;
	word-wrap: break-word; 
	word-break: break-word;
}

.card {
	background-color: var(--oenb-blau-hell-100);
	color: black;
	border: 0;
}

.card-inactive {
	background-color: var(--oenb-grau-400);
	pointer-events: none;
}

.card-link:hover {
	background-color: var(--oenb-blau-hell-200);
	color: black;
}

.light-blue-alert {
	background-color:#E4EDF5; 
	color:black;
}

.tooltip-inner {
	min-width: 200px;
}

.label-horizontal-form {
	padding-top: 7px;
}

label {
	margin-bottom: 5px;
}

.lang-switcher-combo {
	width: 70px;
	border: 0;
	outline: 0;
}

.accordion-button {
	background-color: var(--oenb-blau-hell-100);
	color: black;
}

.accordion-button:not(.collapsed) {
	background-color: var(--oenb-blau-hell-100);
	color: black;
}

.btn-application {
	height: 35px;
}

.dropdown-scrolling {
	max-height: 18rem;
	overflow-y: auto;
	overflow-x: hidden;
}