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

/* Increase size of navigation items */
.navbar-nav>li>a {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* 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-borderless {
	padding: 0;
	border-width: 0 0 1px;
	border-color: black;
	box-shadow: none;
}

.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-color: rgba(255, 255, 255, 0.5);
}

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

.navbar {
	margin-bottom: 0;
	min-height: inherit;
}

#opusNavigation {
        padding-top: 0;
        padding-bottom: 0;
        border: 0;
}

#opusNavigation > .no-vertical-padding {
        width: 100%;
}

#opusNavigation .navbar-collapse {
        align-items: center;
        width: 100%;
}

#opusNavigation .navbar-nav {
        margin: 0;
}

#opusNavigation .navbar-nav > li > a {
        display: block;
        line-height: 20px;
}

#opusNavigation .header-user-meta {
        flex: 0 0 auto;
        min-height: 42px;
}

#opusNavigation .navbar-meta-main {
        line-height: 1.1;
}

#opusNavigation .navbar-meta-username {
        white-space: nowrap;
}

#opusNavigation .navbar-meta-company-row {
        gap: 0;
}

#opusNavigation .navbar-meta-actions {
        gap: 0;
}

/* Remove the padding-right from the fragment wrapper divs inside the company row
   so there is no phantom space when a fragment (e.g. companyUtils in DMZ) is empty. */
#opusNavigation .navbar-meta-company-row > div.small-padding-right {
        padding-right: 0;
}

/* Constrain the icon-only action buttons (dropdown toggle, logout) so their
   height matches the min-height of the header-user-meta block (42px).
   Bootstrap 5's btn-lg line-height (1.5 � 20px = 30px strut) plus the default
   8px top/bottom padding produces ~48px ? taller than the text block on the
   left. Switching to inline-flex removes the strut, and padding:7px brings the
   height to 7 + 25(icon) + 7 + 2(border) = 41px ? 42px. */
#opusNavigation .navbar-meta-actions .btn {
        display: inline-flex;
        align-items: center;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 7px;
        padding-right: 7px;
}

/* Apply the same compact horizontal padding to the company-row buttons
   (companyUtils, companyChange) so all three right-hand buttons are consistent. */
#opusNavigation .navbar-meta-company-row .btn {
        padding-left: 7px;
        padding-right: 7px;
}

/* Remove the Bootstrap 3 margin-bottom tweak on the large icon; it adds to the
   button height in the flex formatting context and is not needed here. */
#opusNavigation .navbar-meta-actions .navbar_icon_large {
        margin-bottom: 0;
        line-height: 1;
}

/* Bootstrap 5 auto-appends a caret (▾) via .dropdown-toggle::after.
   The navbar buttons already use explicit Bootstrap Icons (bi-chevron-down,
   bi-person-fill, bi-copy) so the auto-caret just adds unwanted extra width.
   Suppress it for all right-hand navbar dropdown-toggle buttons. */
#opusNavigation .dropdown-toggle::after {
        display: none;
}

#opusNavigation .navbar_multitenancy {
        margin: 0;
        width: auto;
}

#opusNavigation .navbar_text {
        vertical-align: middle;
}

.navbar-collapse {
	padding: 0;
}

.navbar-nav li a {
	position: relative;
	padding: 8px 24px;
	text-decoration: none;
}

.navbar-nav li a:before,
.navbar-nav li a:after {
	content: "";
	width: 1px;
	position: absolute;
	top: 0;
	bottom: 0;
}

.navbar-nav li a:before {
	left: 0;
}

.navbar-nav li a:after {
	right: 0;
}

.navbar-primary {
	background: linear-gradient(to bottom, #3776b4 0%, #0c3376 100%);
}

.navbar-primary .navbar-nav > li > a {
	color: white;
	background-color: inherit;
}

.navbar-primary .navbar-nav > li > a:hover {
	background-color: #3776b4;
}

.navbar-primary .navbar-nav > li > a:after {
	background: linear-gradient(to bottom, #3169a1 0%, #0d316d 100%);
}

.navbar-primary .navbar-nav > li > a:before {
	background: linear-gradient(to bottom, #5489be 0%, #31538c 100%);
}

.navbar-primary .navbar-nav > li > a.active {
	color: #194481;
	background-color: white;
}

/* 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: 15px;
	padding-right: 15px;
}

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

.functionalAreaContainer {
        background: #e2e2e2;
}

/* Suppress the link underline on the functional-area heading in all states.
   The <a> wraps .functionalAreaContainer (not the other way round), so we use
   :has() to target the anchor that contains it.  Bootstrap 5 sets
   text-decoration:underline on the base <a>, and oenb.css a:hover adds it on
   hover ? both need to be overridden here.  Specificity of
   a:has(.functionalAreaContainer):hover is (0,2,1), which beats oenb.css's
   a:hover at (0,1,1), so no !important is needed. */
a:has(.functionalAreaContainer),
a:has(.functionalAreaContainer):hover,
a:has(.functionalAreaContainer):focus {
        text-decoration: none;
}

/* Zero out h3 margins inside the functional-area bar so every page renders
   flush against the navbar.  Core fragments already apply my-0 py-2 inline;
   LAN fragments use the undefined classes margin-top-sm / margin-bottom-sm
   which fall back to oenb.css's h3 margin-top:20px and create a visible gap.
   This rule wins for both cases and keeps spacing consistent. */
.functionalAreaContainer h3 {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
}

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

/* NavBar menuItem left-oriented (menu header values) */
.dropdown-headerLeft {
	display:block;
	padding: 8px 30px 8px 10px;
	line-height:1.42857143;
	color:#777;
	white-space:nowrap;
	font-weight: bold;
}

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

.navbar_multitenancy {
	font-size: 14px;
	line-height: 12px;
	padding: 0;
	width: auto;
}

.small-padding-right {
	padding-right: 2px;
	text-align: right;
}

.navbar_text {
	color: white;
}

.navbar_icon {
	font-size: 12px;
}

.navbar_icon_large {
	font-size:25px;
	vertical-align: text-top;
	margin-bottom: 4px;
}

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

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

.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{
	color: white;
	text-decoration:none;
}

.card .panel{
	background-color:#E4EDF5;
	color: black;
	border: 0;
}

.card .panel:hover {
	color: white;
	background-color:#337ab7;
    text-decoration:none;
}

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