/**************************************************************************************************/
/** MODIFICATIONS FOR HYDROWEB
/**************************************************************************************************/
#hw-page-body{
  margin-top:-2px;
}

#hw-body-content{
  padding-left: 5px;
  padding-right: 5px;
}
.page-header{
  padding-left: 10px;
  padding-right: 6px;
}

.page-wrapper .page-header {

  margin-top:4px
}

.hw-bg-secondary {
  color: #ffffff !important;
  #background: #CED4DA !important;
  background: #ADB5BD !important;
}
.card-header-dashboard{
  height:50px;
}

.progress-bar.progress-hw-card{
  height:1px;!important;
}
.progress.progress-hw-card{
  height:1px;!important;
}
.card-progress.progress-hw-card{
  height:1px;!important;
}

.card-footer{
  padding: 0.25rem 1.25rem;
}

.card-body{
  min-height:70px;
}

.hw-icon-btn{
  text-align: center;
  margin: auto;
  padding: 10px;
}

.hw-btn-component:hover svg{
  color: var(--tblr-primary);
}

.hw-icon-color-change{
  color: #757575;
}

#btn {
  margin: 0 auto;
  #margin-left: 10px;
  width: 80px;
  height: 20px;
  border-style:solid;
  border-width:1px;
  border-top-style: none;
  border-radius: 0 0 5px 5px;
  border-color: #cccccc;
  background: #fdfdfe;
  cursor: pointer;
}


#btn span {
  position: relative;
  top: 5px;
  margin-bottom: 2px;
  left: 50%;
  display: block;
  margin-left: -25px;
  width: 50px;
  height: 1px;
  border-radius: 1px;
  background: #cccccc;
  #box-shadow: inset 1px 1px 1px #3d3d42;
}

.slider-panel-dashboard{
  background: #fdfdfe;
  border-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #cccccc;
}

.dropdown-item.active {

  background-color: rgb(201 213 249 / 15%) !important;

}

#chart-detail-order div {
  height: 4em;
  cursor: move;
}

.chart-detail-order-placeholder {
  border:1px solid var(--tblr-azure-lt);
  background:var(--tblr-blue-lt);
  color:var(--tblr-blue-lt)
}

.hw-babylonjs-loading-screen {
  background-color: #090d4ecc;
  color: white;
  font-size:50px;
  text-align:center;
}


/* HYDROWEB DATATABLE SECTION */
table.dataTable.table-striped tbody tr.odd.selected td {
  background-color: var(--tblr-info)!important;
  color: white!important;
}

table.dataTable tbody tr.even.selected td {
  background-color: var(--tblr-info)!important;
  color: white!important;

  --tblr-table-striped-bg: #206bc3;
}

table.dataTable.table-striped tbody tr.odd.selected a {
  color: white!important;
  text-decoration: underline;
}

table.dataTable tbody tr.even.selected a {
  color: white!important;
  text-decoration: underline;
}

.dataTable-icon-div {
  padding-right: 0.5rem;
  margin: -0.5rem 0rem -0.5rem -0.5rem;
}

.dataTable-icon {
  transition: background 0.5s ease;
}

div.dt-scroll-headInner table.table-bordered-c tr th:first-child,div.dt-scroll-footInner table.table-bordered-c tr th:first-child {
  border-left-color: inherit !important;
}

table.dataTable.table-bordered-c th {
  border-top-width: inherit !important;
  border-bottom-width: inherit !important;
}

table.dataTable.table-bordered-c tbody tr:last-child td {
  border-bottom-width: inherit !important;
  border-bottom-color: inherit !important;
  border-bottom-style: inherit !important;
}

div.dt-scroll-body {
  border-bottom-style: none !important;
}

.icon-login {
  width: 60px;
  height: 60px;
  font-size: 60px;
  stroke-width: 1.5;
  color: rgb(32, 107, 195);
}

div.DTE_Field_InputControl{
  margin-top: 5px;
  margin-bottom: 10px;
}


/* HYDROWEB ACE SECTION */
.hw-ace-parent {
  position: relative;
}

.hw-ace-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}



/* HYDROWEB BABYLONE JS SECTION */
canvas.babylonjs-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}



/* HYDROWEB MAP SECTION */
div.leaflet-tooltip {
  padding: 0px;
}

div.leaflet-container{
  background: white;
  outline-offset: 1px;
}



/* HYDROWEB FILTER SECTION */
/*
 * HYDROWEB-4892 - Structural noUiSlider rules (from static/dist/libs/nouislider/dist/nouislider.css).
 * Tabler Vendors only ships the noUiSlider theme (colors, handle size), not the base layout rules
 * (positioning, transforms, tooltips). They were previously patched into tabler-vendors.min.css
 * (HYDROWEB-4307) and lost on each Tabler upgrade, so they now live here.
 * Theme rules overridden by Tabler are intentionally omitted so Tabler keeps the look of the slider.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  touch-action: none;
  user-select: none;
  box-sizing: border-box;
}

.noUi-target {
  position: relative;
}

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.noUi-connects {
  overflow: hidden;
  z-index: 0;
  border-radius: 3px;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform-origin: 0 0;
  transform-style: flat;
}

.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
  left: 0;
  right: auto;
}

.noUi-vertical .noUi-origin {
  top: -100%;
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  backface-visibility: hidden;
  position: absolute;
  cursor: default;
}

.noUi-touch-area {
  height: 100%;
  width: 100%;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  transition: transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled] .noUi-handle,
[disabled].noUi-handle,
[disabled].noUi-target {
  cursor: not-allowed;
}

.noUi-pips,
.noUi-pips * {
  box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: #999;
}

.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

.noUi-marker {
  position: absolute;
  background: #ccc;
}

.noUi-marker-sub,
.noUi-marker-large {
  background: #aaa;
}

.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  transform: translate(0, -50%);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: block;
  position: absolute;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  background: #fff;
  color: #000;
  text-align: center;
  white-space: nowrap;
}

.noUi-horizontal .noUi-tooltip {
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.noUi-horizontal .noUi-origin > .noUi-tooltip {
  transform: translate(50%, 0);
  left: auto;
  bottom: 10px;
}

.noUi-vertical .noUi-origin > .noUi-tooltip {
  transform: translate(0, -18px);
  top: auto;
  right: 28px;
}

.noUi-tooltip {
  padding: 0px !important;
}

@media (min-width: 992px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  body.layout-fluid .page {
    height: 100vh;
    overflow: hidden;
  }

  body.layout-fluid .page-wrapper {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

/**************************************************************************************************/
/** END OF MODIFICATIONS FOR HYDROWEB
/**************************************************************************************************/
.settings-scheme-transparent {
  background: #fafbfc;
}
.settings-scheme-dark {
  background: #1e293b;
}
.settings-scheme-colored {
  background-image: linear-gradient(135deg, var(--tblr-primary) 50%, #fafbfc 50%);
}

/* HYDROWEB-4739 - "Developed by Tetra Tech" branding block (shared login + sidebar). */
.hw-developed-by {
  margin: 0 auto;
  line-height: 1.2;
}
.hw-developed-by-logo {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 28px;
  object-fit: contain;
}
.hw-developed-by-text {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.75;
}

/* HYDROWEB-4764 - Authenticated sidebar branding and version footer.
   The block carries Tabler's .navbar-side, which pins it below the scrollable .navbar-collapse:
   however many menu entries there are, they scroll behind it and never cover it. */
.hw-sidebar-footer {
  align-items: center;
  padding: 0.875rem 0.75rem 0.75rem;
  gap: 0.75rem;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hw-sidebar-developed-by {
  width: 100%;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hw-sidebar-developed-by .hw-developed-by {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.hw-sidebar-developed-by .hw-developed-by-text {
  margin: 0;
  letter-spacing: 0.02em;
}
.hw-sidebar-developed-by .hw-developed-by-logo {
  max-width: 132px;
  max-height: 30px;
}
.hw-sidebar-developed-by a {
  display: inline-flex;
  border-radius: 4px;
}
.hw-sidebar-developed-by a:focus-visible {
  outline: 2px solid var(--tblr-primary);
  outline-offset: 3px;
}
.hw-sidebar-version {
  display: flex;
  justify-content: center;
  width: 100%;
}
.hw-sidebar-version .badge {
  margin: 0 !important;
  padding: 0.35rem 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Below 992px the vertical navbar becomes a horizontal top bar, which cannot hold the footer:
   the footer is rendered at the end of the collapsible menu instead, shown when it is opened. */
.hw-sidebar-footer-collapse {
  flex-direction: column;
  margin-top: 0.75rem;
  padding-bottom: 1rem;
}

/* ---------------------------------------------------------------------------
   Page width kept as it was before Tabler 1.5. Dashboards are laid out by
   gridstack against the width of their container, so any pixel taken away from
   the page shifts components that were positioned for the previous width.
   --------------------------------------------------------------------------- */

/* Tabler 1.5 widened the vertical navbar from 15rem to 16rem. */
:root,
:host,
[data-bs-theme="light"],
[data-theme="light"],
[data-bs-theme="dark"],
[data-theme="dark"] {
  --tblr-sidebar-width: 15rem;
}

/* Tabler 1.5 also added "scrollbar-gutter: stable" on <html>, which permanently
   reserves the width of a scrollbar even on pages that do not scroll. The
   gutter is given back here: it is only taken when the page actually
   overflows, as it was before. */
html {
  scrollbar-gutter: auto;
}
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: auto;
  }
}

/* And the scrollbar itself is narrowed: Tabler draws a 1rem one, which is very
   wide for a page that only overflows by a little. */
* {
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
*::-webkit-scrollbar-thumb {
  border-width: 1px;
  border-radius: 0.5rem;
}

/* ---------------------------------------------------------------------------
   Side bar menu (Vue). Complements Tabler 1.5, which already gives the vertical
   navbar its scroll container and its pinned bottom block.
   --------------------------------------------------------------------------- */

/* Icons at every level. Tabler indents a second or third level entry by exactly one icon
   gutter, to stand in for the icon it does not expect it to have. Those entries now carry
   their own icon slot, so the slot is pulled back into that gutter. Level-specific rules below
   then place nested icons closer to their labels while empty slots keep sibling labels aligned. */
.navbar-vertical .dropdown-menu .dropdown-item {
  align-items: center;
}
/* The slot centers its content on both axes, so a fallback dot and a configured icon share the
   same center line, itself centered on the label. */
.navbar-vertical .dropdown-menu .dropdown-item > .nav-link-icon {
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  margin-inline-start: calc(
    -1 * (var(--tblr-nav-link-icon-width, 1.5rem) + var(--tblr-nav-link-icon-margin-end, 0.5rem))
  );
}
.navbar-vertical .dropdown-menu .dropdown-item.hw-nav-level-2 > .nav-link-icon {
  transform: translateX(1rem);
  opacity: 0.8;
}
/* Tabler already indents a third level entry, so its slot keeps the same offset as level 2. */
.navbar-vertical .dropdown-menu .dropdown-item.hw-nav-level-3 > .nav-link-icon {
  transform: translateX(1rem);
  opacity: 0.65;
}
.navbar-vertical .dropdown-menu .dropdown-item > .nav-link-icon > .hw-nav-icon-fallback-dot {
  flex: 0 0 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background-color: currentColor;
  border-radius: 50%;
}
.hw-nav-title-popover {
  position: fixed;
  z-index: 1080;
  max-width: 20rem;
  padding: 0.375rem 0.75rem;
  color: #fff;
  background: var(--tblr-gray-900, #1f2937);
  border-radius: var(--tblr-border-radius, 0.25rem);
  box-shadow: var(--tblr-box-shadow, 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2));
  pointer-events: none;
  transform: translateX(-50%);
}

/* The entry matching the page being displayed. Tabler's own active background is barely
   visible on the dark sidebar, and it is cleared altogether on an entry that is also a
   dropdown toggle, so the current page gets its own stronger treatment. */
.navbar-vertical .nav-item.hw-nav-current > .nav-link,
.navbar-vertical .dropdown-menu .dropdown-item.hw-nav-current {
  position: relative;
  margin-block: 0.125rem;
  font-weight: 600;
  color: var(--tblr-navbar-active-color, #fff);
  background: rgba(255, 255, 255, 0.14);
  border-radius: var(--tblr-border-radius, 0.25rem);
}
.navbar-vertical .nav-item.hw-nav-current > .nav-link::before,
.navbar-vertical .dropdown-menu .dropdown-item.hw-nav-current::before {
  position: absolute;
  inset-block: 0.25rem;
  inset-inline-start: 0;
  width: 3px;
  background: var(--tblr-primary);
  border-radius: 3px;
  content: "";
}

/* An entry on the way to the current page: readable, but clearly weaker than the page itself.
   This deliberately does not use Tabler's `active` class: Tabler gives an active nested toggle
   the same treatment as a current item, so the two backgrounds used to overlap. */
.navbar-vertical .nav-item.hw-nav-active-path > .nav-link.dropdown-toggle,
.navbar-vertical .dropdown-menu .dropdown-item.dropdown-toggle.hw-nav-active-path {
  margin-block: 0.125rem;
  font-weight: 600;
  color: var(--tblr-navbar-active-color, #fff);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--tblr-border-radius, 0.25rem);
}

/* Placeholder rows shown while the menu is being fetched for the first time. */
.hw-sidebar-loading {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0.75rem;
}
.hw-sidebar-loading-row {
  height: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.hw-sidebar-error {
  padding: 1rem 0.75rem;
  font-size: 13px;
  text-align: center;
}

/* HYDROWEB-3734 - Configurable cookie notice, bottom-right of the authenticated shell. */
.cookie-notice-card {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1055;
  width: 24rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
.cookie-notice-body > *:first-child {
  margin-top: 0;
}
.cookie-notice-body > *:last-child {
  margin-bottom: 0;
}
.cookie-notice-body img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 575.98px) {
  .cookie-notice-card {
    right: 0.5rem;
    left: 0.5rem;
    bottom: 0.5rem;
    width: auto;
    max-width: none;
  }
}