div.content {
  position: static; /* fixed; */
  margin-top: 3em; /* Hint: Now dynamically set */
  overflow: auto;
}

 .modebar {
   left: 2px;
 }

.navbar .dq-title {
  overflow: hidden;
  color: white;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar .breadcrumb a:hover {
  color: white;
}

.navbar .breadcrumb, .navbar .breadcrumb * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  clear: both;
  padding: 0;
  margin: 0;
  color: darkgrey;
  display: flex;
}

.navbar div.breadcrumb {
  margin-left: 1em;
}

@media screen and (max-width: 1082px) { /* also adjust in CSS at line tagged with !!MEDIA!!*/
  .navbar .dq-title {
    float: left;
  }
}


/* Navbar container */
.navbar {
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  /*height: 6.0em; /* TODO: dynamic */
  width: 100%;
  /* overflow: hidden; */
  background-color: #555;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a #aaa background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #aaa;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  max-height: 60vh; /* long menus otherwise are off the browser even in full-screen */
}

/* Firefox not yet supports overlay mode */
@supports(overflow: overlay) {
  .dropdown-content {
    overflow: overlay;
  }
}
@supports not (overflow: overlay) {
  .dropdown-content {
    overflow: auto;
  }
}


/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #aaa;
}

.dropdown-content a:target {
  background-color: #aaa;
}

.highlight-in-ff {
  background-color: #aaa;
}

.navbar div:has(*.target) button.dropbtn {
  background-color: #aaa;
}

.navbar a.target {
  background-color: #aaa;
  display: static;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

div.singlePageFinal {
/*  padding-top: 3em; */
    margin-left: 1em;
    margin-right: 1em;
}

div.singlePageFinal {display: none}
div.singlePageFinal:target {display: block}
div.singlePageFinal:has(:target) {display: block}

/* Keep heading scale consistent within singlePageFinal */
div.singlePageFinal h1 { font-size: 1.60em; }
div.singlePageFinal h2 { font-size: 1.38em; }
div.singlePageFinal h3 { font-size: 1.22em; }
div.singlePageFinal h4 { font-size: 1.14em; }
div.singlePageFinal h5 { font-size: 1.08em; } /* existing */
div.singlePageFinal h6 { font-size: 1.00em; }

/* Optional, but usually needed to make the “fit” look consistent */
div.singlePageFinal h1,
div.singlePageFinal h2,
div.singlePageFinal h3,
div.singlePageFinal h4,
div.singlePageFinal h5,
div.singlePageFinal h6 {
  margin: 0.9em 0 0.35em 0;
  line-height: 1.2;
}

.dq-infobutton {
  all: unset;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1;
  opacity: 0.65;
  margin-left: 0.4em;
  vertical-align: middle;
}

.dq-infobutton:hover {
  opacity: 1;
}

div.default-target {
  display: block;
}

div.content:has(:target) + div.default-target {
    display: none;
}

div.default-target {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar a.icon {
  display: none;
  height: 1.2em;
}

/* https://stackoverflow.com/a/7354648 */
/* When the screen is less than 640 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
@media screen and (max-width: 1082px) { /* also adjust in CSS at line tagged with !!MEDIA!!*/
  .navbar {
    height: unset;
  }
  .navbar :not(:first-child) {display: none;}
  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* https://stackoverflow.com/a/7354648 */
/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 1082px) { /* 835px is the point, where full fledged menus break, currently FIXME: seems to be not needed cause of huge menue, meanwhile, but unsure. */
  .navbar.responsive *.icon {          /* also adjust in CSS at line tagged with !!MEDIA!!*/
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive * {
    float: none;
    display: block;
    text-align: left;
  }

  .navbar.responsive div * {
    display: none;
  }
  .navbar.responsive div button.dropbtn {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
  }
  .navbar.responsive div:has(*.target) {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive div:has(*.target) * {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive div:target * {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive button.dropbtn * {
    display: inline;
  }

  .dropdown .dropdown-content { display: none; }
  .dropdown.dq-dd-open .dropdown-content { display: block; }
  .navbar.responsive div:has(*.target) * { display: block; }

  .navbar.dq-suspend-target *.dq-dd-open-by-search { display: block !important; }
  .navbar.dq-suspend-target *.dq-dd-open-by-search div.dropdown-content { display: block !important; }
  .navbar.dq-suspend-target div.dropdown-content { display: none !important; }

  .navbar.dq-suspend-target div:has(*.target) button.dropbtn { background-color: #555; !important; }

  .navbar.dq-suspend-target div.dq-dd-open-by-search button.dropbtn { background-color: #aaa; !important; }

}

.navbar button.dropbtn * {
  display: inline;
}

.opaque-on-hover-20 {
  opacity: 0.2;
}

.opaque-on-hover-20:hover {
  opacity: 1.0;
}

div.table_top_spacer {
}

div.dataquieR_result {
  margin-top: 1em;
}

div.table_result {
  /* max-height: calc(100vh - 8em); */
  overflow-y: auto;
}

/* Span classes for messages in summary with util_get_message_for_result */
span.dataquieR-message-message {
}

span.dataquieR-warning-message {
  font-style: italic;
}

span.dataquieR-error-message {
  font-style: italic;
  font-weight: bold;
}

/* https://github.com/rstudio/DT/issues/951#issuecomment-1256844234 */
.datatables.html-widget.html-widget-static-bound {
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important; /* TODO: 47px: heuristic quick fix for scrollbars hiding content/hidden scrollbar. Scrollbar width could be detected using javascript, but then, the css class is hard to adjust from javascript, hence possible. */
}
.dataTables_scrollBody {
  height: unset !important;
  max-height: calc(80vh - 2ex)!important;
}
td.max_60vw, th.max_60vw { /* for the first column in html tables, which are fixed, do not use more than 60vw */
  max-width: 60vw;
  overflow: auto;
}

/*
https://stackoverflow.com/a/5316785
add a floating menu to the single page's divs
*/
.floatbar {
  position: absolute;
  /* left: 20px; set by JS */
  background-color: #555;
  font-family: Arial;
  text-decoration: none;
  list-style-type: none;
  color: white;
  max-height: 60vh; /* long menus otherwise are off the browser even in full-screen */
}

.floatbar i {
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.floatbar:hover i {
  opacity: 1;
  transform: scale(1.08);
}

@keyframes floatbarHint {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.floatbar i {
  animation: floatbarHint 0.6s ease 1;
  animation-delay: 1s;
}

.floatbar * {
  text-decoration: none;
  list-style-type: none;
  color: white
}

.floatbar a:link,
.floatbar a:visited,
.floatbar a:focus,
.floatbar a:hover,
.floatbar a:active {
  color: white;
}

.floatbar {
  width: 1.2em;
  overflow-y: hidden;
  z-index: 5;
}

.floatbar:hover {
  z-index:9999;
  width: auto;
  overflow-y: scroll;
}

.floatmenu {
  padding: 2px;
}

.floatbar:hover .floatmenu {
  display: block;
}

.floatbar .floatmenu {
  display: none;
}

button.context-menu:hover {
  background-color: #111;
}

button.context-menu {
  margin: 0;
  background-color: #333;
  padding: 0;
  border: none;
  color: #aaaaaa;
  cursor: pointer;
  margin-left: -2em;
}

li.context-menu {
  list-style: none;
}

div.td-div {
  overflow: auto;
}

body {
  margin: 0px; /* avoid scroll problems in tables */
}

.statichtmlWidget .navbar { /* if used in an html widget, likely in rmarkdown, omit the navigation bar */
    display: none;
}

.statichtmlWidget .datatables.html-widget.html-widget-static-bound { /* if used in an html widget, likely in rmarkdown, different width coumputation */
  height: auto !important;
  width: auto !important;
}

div.infobutton a {
  color: turquoise;
}

/* dataquieR: combined plot + table result layout */
.dataquieR_result.dq-plot-table-result > .dq-plot-table-grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.5rem;
  /* important: let items stretch vertically */
  align-items: stretch;
  justify-items: stretch;
}

/* explicitly allow the table cell to take its content height */
.dq-plot-table-result .dq-table-cell {
  align-self: stretch;
}

/* allow both cells to shrink properly inside the grid */
.dq-plot-table-result .dq-plot-cell,
.dq-plot-table-result .dq-table-cell {
  min-width: 0;
}

/* table + widget should fully fill their grid cell */
.dq-plot-table-result .dq-table-cell .table_result,
.dq-plot-table-result .dq-table-cell .datatables.html-widget,
.dq-plot-table-result .dq-table-cell table {
  width: 100% !important;
  max-width: none;
}

/* NEW: stacked variant – keep grid, but use one column and two rows */
.dataquieR_result.dq-plot-table-result.dq-stack-table > .dq-plot-table-grid {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 1.5rem;
}

/* make both cells span the single column */
.dataquieR_result.dq-plot-table-result.dq-stack-table .dq-plot-cell,
.dataquieR_result.dq-plot-table-result.dq-stack-table .dq-table-cell {
  grid-column: 1 / -1;
}

/* --- Search hint icon (top right) --- */
.dq-search-hint {
  float: right;
  color: rgba(255,255,255,0.6);
  padding: 14px 16px;
  cursor: text;
  position: relative;
  font-size: 0.9em;
}

.dq-search-hint:hover {
  color: white;
}

/* Tooltip */
.dq-search-hint::after {
  content: "Type to search\2026";
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;

  background: rgba(0,0,0,0.8);
  color: white;
  border-radius: 6px;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: all 120ms ease;
}

.dq-search-hint:hover::after {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 1082px) { /* also adjust in CSS at line tagged with !!MEDIA!!*/
  .navbar .dq-search-hint {
    display: block;
  }
}

.dq-search-hint {
  opacity: 0.5;
}

.dq-search-hint:hover {
  opacity: 1;
}
