/* ---- 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-vertical-padding {
	padding-left: 0;
	padding-right: 0;
}

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

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

.hide {
	display: none !important;
}

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

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

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

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

/* Bulkchange table: header titles and the DataTables sort arrows keep their
   horizontal placement but are anchored at the bottom of the header row, so
   that the vertically rotated role names start at the bottom of the cell. */
table.bulkchange-table > thead > tr > th {
	text-align: left;
	vertical-align: bottom;
}

table.bulkchange-table > thead > tr > th div.dt-column-header {
	align-items: flex-end;
}

table.bulkchange-table > thead > tr > th .verticalText {
	display: inline-block;
}

.searchbar {
	width: 70%;
}

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

#default-tree.jstree-default-large {
	/* draws the top edge of the row list once; each row itself only draws
	   its bottom border so that adjacent rows never end up with a doubled
	   (2px) border between them */
	border-top: 1px solid var(--oenb-blau-hell-200, #cddbe9);
}

/* Restore the bordered, list-group style rows previously provided by
   bootstrap-treeview for the jstree based role sub-detail tree. */
#default-tree.jstree-default-large .jstree-wholerow {
	/* border-box keeps the border inside the row height jstree computed,
	   otherwise the extra border width creates a visible gap between rows */
	box-sizing: border-box;
	border: 1px solid var(--oenb-blau-hell-200, #cddbe9);
	border-top: none;
	background-color: #fff;
}

#default-tree.jstree-default-large .jstree-wholerow-hovered {
	background-color: var(--oenb-blau-hell-50, #f1f5f9);
}

#default-tree.jstree-default-large .jstree-wholerow-clicked {
	background: var(--oenb-blau-hell-100, #e6edf4);
}

/* Plain outline checkbox (instead of jstree's own sprite based icon) to
   match the simple checkbox look of the previous bootstrap-treeview. */
#default-tree .jstree-checkbox {
	background-image: none !important;
	position: relative;
}

#default-tree .jstree-checkbox::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	box-sizing: border-box;
	border: 1px solid var(--oenb-grau-600, #6c757d);
	border-radius: 2px;
	background-color: #fff;
}

#default-tree .jstree-checkbox:hover::before {
	border-color: var(--oenb-content-primary, #004289);
}

#default-tree .jstree-checked > .jstree-checkbox::before {
	background-color: var(--oenb-content-primary, #004289);
	border-color: var(--oenb-content-primary, #004289);
}

#default-tree .jstree-checked > .jstree-checkbox::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 4px;
	height: 8px;
	margin: -6px 0 0 -2px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

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

.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-200);
	color: black;
}

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

.btn-application {
	height: 35px;
}

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

.login-card-min {
	min-height: 300px;
}