html,
body {
  height: 100%;
}

.supergraphic-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.O-Header {
  flex-shrink: 0;
}

.side-nav-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: stretch;
  overflow-y: hidden;
}

.header-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: hidden;
}

#content {
  overflow-y: auto;
  flex-grow: 1;
}

.cockpit #content {
  background-color: #eff1f2;
}

#MenuDLA {
  background-color: #2e3033;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}

#MenuDLA ul {
  margin: 0;
  padding: 0;
  width: 19rem;
  padding-bottom: 1rem;
}

#MenuDLA ul.hiddenState {
  width: 3rem;
}

#MenuDLA li {
  display: block;
}

#MenuDLA .slidingEv {
  display: flex;
  margin-bottom: 1rem;
}

#MenuDLA .slidingEv::before {
  font-family: "Bosch-Icon-TEST";
  content: "\e0f0";
  color: #ffffff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.75rem;
  display: block;
  margin-left: auto;
}

#MenuDLA .slidingEv.openable-closed2::before {
  content: "\e1c1";
}

#MenuDLA a {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  display: flex;
  align-items: center;
}

#MenuDLA .stop,
#MenuDLA .bull {
  width: 19rem;
}

#MenuDLA .openable {
  padding-right: 0.75rem;
}

#MenuDLA .bull a {
  padding-left: 3rem;
}

#MenuDLA a:hover,
#MenuDLA .slidingEv:hover::before {
  background-color: #43464a;
  text-decoration: none;
}

#MenuDLA a:active,
#MenuDLA .slidingEv:active::before {
  background-color: #595e62;
}

#MenuDLA .active a,
#MenuDLA .focus {
  background-color: #007bc0;
}

#MenuDLA .active a:hover,
#MenuDLA .focus:hover {
  background-color: #00629a;
}

#MenuDLA .active a:active,
#MenuDLA .focus:active {
  background-color: #004975;
}

#MenuDLA .stop a::before {
  font-family: "Bosch-Icon-TEST";
  font-size: 1.5rem;
  line-height: 1;
  margin-right: 0.75rem;
}

#MenuDLA .openable::after {
  font-family: "Bosch-Icon-TEST";
  font-size: 1.5rem;
  line-height: 1;
  content: "\e296";
  padding-left: 1rem;
  margin-left: auto;
}

#MenuDLA a.openable-closed2::after {
  content: "\e147";
}

#MenuDLA #dashboard::before {
  content: "\e25f";
}

#MenuDLA #peripherals::before {
  content: "\e26c";
}

#MenuDLA #storage::before {
  content: "\e23a";
}

#MenuDLA #system::before {
  content: "\e11b";
}

#MenuDLA #video1::before {
  content: "\e2a8";
}

/* fixed contrasts */

/* Default pagination button styling */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #000000!important; /* Black text for high contrast */
  background-color: #ffffff; /* White background */
  border: 1px solid #dddddd; /* Light border */
}

/* Hover and focus states */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus {
  background-color: #444444; /* Darker background on hover */
  color: #ffffff; /* White text on hover */
  outline: 2px solid #ffcc00; /* High-contrast focus outline */
}

/* Active page button */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #007bff; /* Active page: blue background */
  color: #ffffff; /* White text on active page */
}

/* Disabled buttons */
.cockpit .dataTables_wrapper .dataTables_paginate .paginate_button.disabled ,
.monitoringsite .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  /* color: #aaaaaa!important; /* Reduced contrast for disabled buttons */
  color: black!important; /* Reduced contrast for disabled buttons */
  background-color: #f9f9f9!important; /* Subtle background for disabled state */
  opacity: 0.8!important;
}