@charset "UTF-8";
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
@font-face {
  font-family: 'Kanit'; /* Choose a name for your font */
  src: url('/assets/kanit.regular-MLtEp43x.ttf') format('truetype'); /* Adjust path to your font file */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KanitBold'; /* Choose a name for your font */
  src: url('/assets/kanit.bold-nXOKGR2_.ttf') format('truetype'); /* Adjust path to your font file */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KanitMedium'; /* Choose a name for your font */
  src: url('/assets/kanit.medium-BcGCcD1m.ttf') format('truetype'); /* Adjust path to your font file */
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'KanitThing'; /* Choose a name for your font */
  src: url('/assets/kanit.thin-Bltu82BW.ttf') format('truetype'); /* Adjust path to your font file */
  font-weight: normal;
  font-style: normal;
}
html,
body {
  font-family: 'Kanit';
  background-color: var(--surface-page);
  color: #ffffff;
}
#root {
  margin: 0 auto;
  padding: 0 auto;
  text-align: center;
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  font-family: 'Kanit';
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}
.card {
  padding: 2em;
}
.read-the-docs {
  color: #888;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

#sign {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-image: url(/assets/fort-bg-2-Dh8bqW5P.png);
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-y: hidden;
  overflow-x: hidden;
  overflow: hidden;
}

#signInForm {
  border: 0.2px solid rgba(255, 255, 255, 0.2); /* Light border to enhance the frosted effect */
  padding: 30px;
  height: 55vh;
  width: 20vw;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  /* Frosted glass effect properties */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
  backdrop-filter: blur(10px); /* Apply blur to everything behind the element */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow for a 3D effect */
  /* Optionally, you can add additional effects */
}

#logoimg {
  height: 11vh;
  margin-bottom: 2vh;
}

.inputfields {
  height: 20px;
  padding: 3px;
  margin: 15px;
  border-radius: 5px;
  outline-color: None;
  border-color: None;
}

.inputfields .email {
  text-transform: lowercase;
}

#signInText {
  font-size: 3vh;
}

.forgotPwdText {
  margin: 0px;
  font-size: 12px;
  text-align: right;
  color: var(--primary-color);
  text-decoration: underline;
  cursor: pointer;
}

.submitbtn {
  margin-top: 4vh;
  width: 80%;
}

.submitbtn:hover {
  border-radius: 1px;
  transition: border-radius 0.5s ease;
}

.submitbtn:hover::before {
  opacity: 1; /* Makes the arrow visible on hover */
  transform: translateY(-50%) translateX(0); /* Moves the arrow into position */
}

.inputs {
  margin-bottom: 0;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inputs label {
  display: block;
  font-weight: bold;
  color: white;
}
.inputs .inputfields {
  margin: 0;
  width: 100%;
  margin-top: 0.5vh;
  height: 4.5vh;
  padding: 7px;
  font-family: "Kanit";
  border-radius: 5px;
  font-size: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

@media (max-width: 1281px) {
  .inputs .inputfields {
    font-size: 12px;
    height: 4vh;
  }
}html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
}

#sign {
  height: 100vh;
  width: 100vw;
  margin: 0;
  background-image: url(/assets/fort-bg-2-Dh8bqW5P.png);
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow-y: hidden;
  overflow-x: hidden;
  overflow: hidden;
}

#forgotPasswordForm {
  border: 0.2px solid rgba(255, 255, 255, 0.2); /* Light border to enhance the frosted effect */
  padding: 25px;
  height: 35vh;
  width: 20vw;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  /* Frosted glass effect properties */
  background: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
  backdrop-filter: blur(10px); /* Apply blur to everything behind the element */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow for a 3D effect */
  /* Optionally, you can add additional effects */
}

#logoimg {
  height: 60px;
  margin-bottom: 1vh;
  margin-top: 5vh;
}

.inputfields {
  height: 20px;
  padding: 3px;
  margin: 15px;
  border-radius: 5px;
  outline-color: None;
  border-color: None;
}

.inputfields .email {
  text-transform: lowercase;
}

#signInText {
  font-size: 3vh;
}

.submitbtn {
  margin-top: 4vh;
  width: 80%;
}

.submitbtn:hover {
  border-radius: 1px;
  transition: border-radius 0.5s ease;
}

.submitbtn:hover::before {
  opacity: 1; /* Makes the arrow visible on hover */
  transform: translateY(-50%) translateX(0); /* Moves the arrow into position */
}

.inputs {
  margin-bottom: 0;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inputs label {
  display: block;
  font-weight: bold;
  color: white;
}
.inputs .inputfields {
  margin: 0;
  width: 100%;
  margin-top: 0.5vh;
  height: 4.5vh;
  padding: 7px;
  font-family: "Kanit";
  border-radius: 5px;
  font-size: 15px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

@media (max-width: 1281px) {
  .inputs .inputfields {
    font-size: 12px;
    height: 4vh;
  }
  #logoimg {
    height: 40px;
    margin-bottom: 1vh;
    margin-top: 5vh;
  }
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: #e74c3c;
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);
  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;
  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(
    to right,
    #4cd964,
    #5ac8fa,
    #007aff,
    #34aadc,
    #5856d6,
    #ff2d55
  );
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  padding: 4px;
  width: var(--toastify-toast-width);
  box-sizing: border-box;
  color: #fff;
}
.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
}

@media only screen and (max-width : 480px) {
  .Toastify__toast-container {
    width: 100vw;
    padding: 0;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left, .Toastify__toast-container--top-center, .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
}
.Toastify__toast {
  --y: 0;
  position: relative;
  -ms-touch-action: none;
      touch-action: none;
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: 8px;
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  cursor: default;
  direction: ltr;
  /* webkit only issue #791 */
  z-index: 0;
  overflow: hidden;
}
.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}
.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body, .Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}
.Toastify__toast--stacked[data-collapsed=false] {
  overflow: visible;
}
.Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > * {
  opacity: 0;
}
.Toastify__toast--stacked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}
.Toastify__toast--stacked[data-pos=top] {
  top: 0;
}
.Toastify__toast--stacked[data-pos=bot] {
  bottom: 0;
}
.Toastify__toast--stacked[data-pos=bot].Toastify__toast--stacked:before {
  transform-origin: top;
}
.Toastify__toast--stacked[data-pos=top].Toastify__toast--stacked:before {
  transform-origin: bottom;
}
.Toastify__toast--stacked:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}
.Toastify__toast--rtl {
  direction: rtl;
}
.Toastify__toast--close-on-click {
  cursor: pointer;
}
.Toastify__toast-body {
  margin: auto 0;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  padding: 6px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
.Toastify__toast-body > div:last-child {
  word-break: break-word;
  -ms-flex: 1;
      flex: 1;
}
.Toastify__toast-icon {
  -webkit-margin-end: 10px;
          margin-inline-end: 10px;
  width: 20px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -ms-flexbox;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

@media only screen and (max-width : 480px) {
  .Toastify__toast {
    margin-bottom: 0;
    border-radius: 0;
  }
}
.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}
.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}
.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}
.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}
.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}
.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}
.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}
.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}
.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}
.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}
.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  -ms-flex-item-align: start;
      align-self: flex-start;
  z-index: 1;
}
.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}
.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}
.Toastify__close-button:hover, .Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--toastify-z-index);
  opacity: 0.7;
  transform-origin: left;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}
.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}
.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
}
.Toastify__progress-bar--wrp[data-hidden=true] {
  opacity: 0;
}
.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInLeft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}
@keyframes Toastify__bounceInUp {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes Toastify__bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}
@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%, 45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}
.Toastify__bounce-enter--top-left, .Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}
.Toastify__bounce-enter--top-right, .Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}
.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}
.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left, .Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}
.Toastify__bounce-exit--top-right, .Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}
.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}
.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}
@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}
@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}
@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}
.Toastify__slide-enter--top-left, .Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}
.Toastify__slide-enter--top-right, .Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}
.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}
.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left, .Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-right, .Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}
.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*# sourceMappingURL=ReactToastify.css.map */.dialog-overlay-sesh {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog-box-sesh {
  background: var(--muted-black);
  padding: 10px;
  height: auto;
  display: block;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 10px 5px rgba(143, 139, 139, 0.2);
}

.dialog-box-sesh h2 {
  margin-top: 0;
}

.dialog-box-sesh button {
  margin-top: 1.5rem;
  padding: 0.6rem 1.2rem;
  background-color: var(--primary-color);
  color: var(--muted-black);
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
.headerClass {
  width: 100%;
  height: 8vh;
  padding: 2px;
  top: 0;
  background-color: black;
  display: flex;
  gap: 15px;
  align-items: center;
  position: sticky;
  z-index: 1000;
}
/* Logo styling */
.logo {
  margin-top: 5px;
  height: 30px;
  width: 170px;
  /* Align to the left (no need for flex-start because it's naturally on the left) */
}
/* Icons container styling */
.icons {
  margin-right: 20px;
  margin-top: 10px;
  display: flex; /* Flexbox for icons */
  justify-content: flex-start; /* Push icons to the right */
  align-items: center; /* Center icons vertically */
  gap: 15px; /* Space between icons */
  color: white;
}
/* Individual icon styling */
.icon {
  font-size: 1.2rem;
  color: white;
  cursor: pointer; /* Optional: Makes icons clickable */
}
@media (max-width: 2560px) {
  .headerImage {
    height: 30px;
  }
  .headerImageTruck {
    height: 45px;
  }
  .gridClass {
    height: "65%";
    width: "100%";
  }
}
@media (max-width: 2560px) {
  .headerImage {
    height: 30px;
  }
  .headerImageTruck {
    height: 45px;
  }
}
@media (max-width: 1920px) {
  .headerImage {
    height: 25px;
  }
  .headerImageTruck {
    height: 35px;
  }
  .gridClass {
    height: 65%;
    width: 100%;
  }
}
@media (max-width: 1281px) {
  .headerImage {
    height: 25px;
  }
  .headerImageTruck {
    height: 35px;
  }
  .gridClass {
    height: 50%;
  }
  .statusContainer {
    z-index: 40000000000000;
    overflow-x: visible;
  }
  .floating-button {
    position: relative;
    top: 0.5%;
  }
  .semiCircleButton {
    min-width: 10ch;
  }
}
.commonButtonStyle {
  float: right;
  padding: 5px;
  margin: 15px;
  width: 100px;
  cursor: pointer;
}
/* VerticalNav.css */
.vertical-nav {
  background-color: #333; /* Navigation bar background */
  padding: 20px;
  width: 10px; /* Fixed width for the vertical navigation */
  height: 190vh; /* Full height of the viewport */
  position: fixed; /* Make it stick to the viewport */
  top: 0; /* Align to the top of the viewport */
  right: 0; /* Position on the right side */
}
.nav-list {
  list-style-type: none;
  margin: 0;
  margin-top: 50px;
  padding: 0;
  display: flex;
  flex-direction: column; /* Arrange items vertically */
}
.nav-item {
  margin: 10px 0; /* Spacing between items */
}
.nav-link {
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 1px 1px;
  display: block; /* Ensures full clickable area */
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-link:hover {
  background-color: #555; /* Background on hover */
  color: #fff; /* Text color on hover */
  border-radius: 5px;
}
.lineChartClass {
  border-color: #555;
  border: 1px solid #555555;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.chartContainer {
  display: flex;
  flex-direction: column; /* For vertical alignment */
  align-items: center; /* Horizontally center */
  justify-content: center; /* Vertically center */
  /* Full page height */
  text-align: center; /* Center-align the label */
}
.mainButton {
  background-color: transparent;
  color: var(--background-color);
  padding: 5px;
  margin: 10px;
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}
.mainButton.active {
  background-color: #ffffff; /* White background */
  color: #000000; /* Black text */
}
.mainButton:not(.active) {
  background-color: transparent; /* Reset other buttons */
  color: var(--background-color);
}
.pageLinks {
  align-items: center;
  width: 60vw;
  display: flex;
  justify-content: center;
}
.changeViewBtn,
.changeConfigBtn {
  background-color: var(--primary-secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  width: 60px;
  height: auto;
  z-index: 5;
  box-shadow: -4px 0 5px -2px var(--primary-color), 4px 0 5px -2px var(--primary-color);
  transform: skew(-10deg);
  border: none;
  outline: none;
  cursor: pointer;
}
.changeViewBtn img,
.changeConfigBtn img {
  transform: skew(10deg);
}
.changeConfigBtn {
  background-color: var(--background-color);
  width: 180px;
  margin-right: 20px;
}
.changeViewBtn:hover,
.changeConfigBtn:hover {
  cursor: pointer;
}
.screenViewIcons {
  display: flex;
  flex-direction: row; /* Align items in a row */
  gap: 0px; /* Optional: Add space between icons */
  justify-content: center; /* Optional: Center the icons horizontally */
  align-items: center; /* Optional: Align the icons vertically */
}
.mainContainerClass {
  border: 1px solid var(--darker-grey);
  border-radius: 10px;
  height: 75vh;
  margin-left: 4vh;
  margin-top: 2vh;
}
.mainScreenWidget,
.dragDropWidget {
  padding: 0px; /* Optional: Add some padding */
}
.mainScreenWidget {
  width: 70vw;
  margin-right: 2vh;
  text-align: center;
}
.dragDropWidget {
  width: 15vw;
  padding: 0px;
  margin: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.rectangle {
  width: 100vw; /* Set rectangle width */
  height: 35vh; /* Set rectangle height */
  background-color: #2c2b2b; /* Set rectangle color */
  border: 1px solid #edecec; /* Optional: Add border */
  flex: 1;
  margin-left: 20px;
  border-radius: 10px;
  border: 1px dashed rgb(197, 48, 48);
  display: inline-block; /* Ensure rectangles are inline */
  display: flex; /* Enables Flexbox layout */
  flex-wrap: wrap; /* Allows items to wrap to the next line if there's not enough space */
  gap: 10px; /* Adds spacing between items */
  justify-content: space-between; /* Distributes items evenly */
}
.dragDropRectangle {
  background-size: cover;
  background-position: center;
  border: "1px solid #ddd";
  height: "auto";
  width: 15vw;
  min-height: 10vh;
  margin-bottom: 1.5vh;
  cursor: grab;
}
.layout {
  height: 60%;
}
.alertBtn {
  background-color: transparent;
  color: white;
  padding: 2px;
  width: 10vh;
}
#tableDashboard {
  color: var(--background-color);
  width: 95vw;
  padding: 20px;
}
.baseTable {
  background-color: var(--primary-secondary-color);
  padding: 20px;
  border-collapse: collapse;
}
.alertBtn th,
.baseTable td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Lighter lines */
}
#tableHeader th {
  padding: 20px 25px;
}
.baseTable td:nth-child(1),
.baseTable td:nth-child(5) {
  text-align: center; /* Center align Unit No and Timestamp */
}
.baseTable td:nth-child(6) {
  text-align: right; /* Align status button to the right */
}
.baseTable tr:nth-child(even) {
  background-color: rgba(197, 197, 197, 0.145); /* Slightly different shade */
}
.baseTable tr:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Highlight on hover */
  transition: background 0.3s ease-in-out;
}
.custom-toast {
  background: linear-gradient(45deg, #1a3b1c, #00ff99); /* Custom background */
  border-radius: 10px;
}
.custom-toast-body {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: black;
}
.filterLabel {
  color: white;
}
@media (max-width: 1280px) {
  .textClass {
    font-size: 14px;
  }
  .dragDropRectangle {
    min-height: 8vh;
    margin-bottom: 1.5vh;
    cursor: grab;
  }
}
.semiCircleDock {
  position: fixed;
  align-items: center;
  height: 39px;
  top: 0;
  left: 0;
  background: var(--graphite);
  display: flex;
  width: 100%;
  gap: 15px;
  box-shadow: 0px 0.5px 5px 1px var(--primary-color);
  z-index: 300;
  padding: 0px;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 5px;
  flex-wrap: nowrap;
}
.logoutDock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px; /* Increased padding */
  margin-bottom: 4px;
  border-radius: 8px;
  width: 90%;
  cursor: pointer;
  position: relative;
}
.logoutDock.collapsed {
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  gap: 0;
}
.logoutDock.collapsed p {
  display: none !important;
  flex: none;
  width: 0;
}
.logoutDock img:first-child {
  height: 25px;
  width: 25px;
  opacity: 0.8;
}
.logoutDock img:hover {
  cursor: pointer;
}
.logoutDock p {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: #e8e8e8;
  letter-spacing: 0.3px;
}
.semiCircleDock {
  width: 100%;
}
.semiCircleDock::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  border-radius: 5px;
  background: black;
  transform: skewX(-10deg);
  box-shadow: 4px 0px 10px -2px var(--primary-color);
  transform-origin: bottom right;
  z-index: -1;
}
.pageTitle,
.pageTitle::before,
.pageTitle::after {
  box-sizing: content-box !important;
}
.logoutIcon,
.logoutIcon::before,
.logoutIcon::after {
  box-sizing: content-box !important;
}
.semiCircleButton,
.semiCircleButton::before,
.semiCircleButton::after {
  box-sizing: content-box !important;
}
.pageNames {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: flex-start;
  width: auto;
  flex: 0.5;
}
.semiCircleButton {
  background: white;
  color: black;
  padding: 0px 5px;
  border-radius: 5px;
  cursor: pointer;
  width: 9.5vh;
  transition: 0.3s;
  font-size: 14px;
  margin-left: 1px;
  transform: skew(-10deg);
}
.semiCircleButton span {
  transform: skew(10deg);
  display: inline-block;
}
.semiCircleButton.active {
  background: var(--primary-color);
}
.verticalDivider {
  position: relative;
  width: 5px;
  height: 25px;
  background-color: var(--primary-color);
  margin: "0 0px";
  align-self: "center";
  transform: skew(-10deg);
}
.floating-button {
  position: relative;
  background: var(--graphite);
  padding: 0px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 13px;
  box-sizing: border-box;
  cursor: pointer;
  width: auto;
  height: 30px;
  transition: all 0.3s ease-in-out;
  border: 0px solid var(--primary-color);
}
.floating-button img {
  width: 20px;
  height: 20px;
}
.floating-button img:hover,
.floating-button icon:hover {
  transform: scale(1.15);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.semiCircleDockMini {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  height: 25px;
  flex-direction: row;
  flex: 0.1;
  height: auto;
  background: black;
  position: relative; /* needed for internal skew */
}
.skewTail {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  border-radius: 5px;
  background: black;
  transform: skewX(-10deg);
  box-shadow: 0px 0px 10px -2px var(--primary-color);
  transform-origin: bottom right;
  z-index: -1;
}
.wholeStatus {
  display: flex;
  margin: 0px;
  padding: 0px;
  gap: 3px;
  justify-content: left;
  text-align: center;
}
.mainCategory h5 {
  margin: 0px;
  background-color: var(--darker-grey);
  margin-left: 2px;
  height: 50px;
  text-align: center;
  align-items: center;
  position: sticky;
  top: 0;
}
.mainCategory ul {
  margin: 0px;
  padding: 0px;
}
.mainCategory li {
  list-style: none;
  align-items: left;
  text-align: left;
  justify-content: left;
  border: 1px solid var(--darker-grey);
  border-radius: 5px;
  margin: 1px;
  padding: 3px;
  display: flex;
  font-size: 12px;
  cursor: pointer;
}
.statusContainer {
  display: flex;
  max-height: 500px;
  overflow-x: visible;
  overflow-y: hidden;
}
.tick {
  right: 0;
  margin-right: auto;
  padding-left: 10px;
  align-items: right;
  font-size: 14px;
  font-weight: bold;
  color: white;
}
.selected {
  background-color: grey;
}
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.loader {
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top: 5px solid #3498db; /* Blue color */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.confirm-btn,
.cancel-btn {
  padding: 2px;
  margin: 2px;
  width: 80px;
  margin-right: 10px;
}
.globalBtn {
  padding: 5px;
  font-size: 14px;
  border-radius: 3px;
}
.viewMappingImgWidget {
  margin: 0;
  padding-left: 5px;
  background-color: var(--graphite);
  width: auto;
  min-width: 20%;
  box-shadow: rgba(255, 255, 255, 0.25) 0px 13px 27px -5px, rgba(255, 255, 255, 0.3) 0px 8px 16px -8px;
  border-radius: 2px 2px 25px 2px;
}
.viewMappingImgWidget p {
  margin: 0px;
  font-size: 14px;
}
.alertContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid grey;
  max-width: 160px;
  min-width: 150px;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.alertContainer:hover {
  transform: scale(1.05);
}
.alertIcon {
  font-size: 20px; /* optional: control icon size */
  color: #e63946; /* optional: make it stand out */
}
.alertText {
  margin: 0;
  font-size: 16px;
}
.alertNumber {
  margin-left: 6px;
  font-weight: bold;
  font-size: 18px;
  color: #ebebeb;
}
.alertNotifTables {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.insideContainer {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.rightSideDock {
  position: fixed;
  top: 0;
  right: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 10px 10px 10px;
  box-shadow: 0px 1px 10px 1px var(--primary-color);
  z-index: 300;
  overflow: visible;
  border-radius: 5px;
}
.loader-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-wrapper img {
  width: 50%;
  height: 50%;
  z-index: 2;
}
.floatingMenuWrapper {
  margin-left: 12px;
  display: flex;
  flex: 2;
  justify-content: flex-end;
  flex-direction: row;
  position: relative;
  background-color: var(--graphite);
  height: 100%;
}
.circular-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top: 5px solid #00ff99;
  border-radius: 50%;
  animation: spin 3s linear infinite, glow 1.5s ease-in-out infinite alternate;
  z-index: 1;
  box-shadow: 0 0 10px #00ff99;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 5px #00ff99, 0 0 10px #00ff99;
  }
  100% {
    box-shadow: 0 0 20px #00ff99, 0 0 40px #00ff99;
  }
}
.alert-message-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 12px;
}
.toolTipClass {
  background-color: #000;
}
/* Add this to your main CSS or SCSS */
.popup-fade-in {
  animation: fadeInSlide 0.1s linear;
}
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-10px); /* slide slightly from above */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.appLayout {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
/* Main page content */
.mainContentWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.topBarTitle {
  height: 50px; /* fixed height */
  flex-shrink: 0; /* don’t let flex shrink it */
  background-color: var(--surface-shell);
  border-bottom: 1px solid var(--border-shell);
  color: white;
  display: flex;
  font-size: 20px;
  align-items: center;
  padding-left: 5px;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.topBarTitle .nv-root button:hover,
.topBarTitle .nv-root button:focus,
.topBarTitle .nv-root button:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}
.mainContentArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, margin-right 0.25s ease, margin-left 0.25s ease;
}
.mainReportPage {
  flex: 1;
  min-height: 0; /* 👈 prevents the child from overflowing */
  width: 100%;
  box-sizing: border-box; /* keeps inner spacing predictable */
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
:root {
  --table-font-size: 14px;
  --border-radius: 5px;
  --margin-top-sm: 50px;
  --header-padding: 5px;
  --header-height: 40px;
  --smaller-header-height: 25px;
}
.container {
  display: flex; /* Create a two-column layout */
  gap: 0px; /* Add spacing between columns */
  padding: 10px;
}
.leftColumn {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 20px; /* Add space between ComponentList and button */
  flex: 1;
}
.rightColumn {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  height: 100%;
  border-radius: 5px;
  background-color: var(--muted-black);
}
.pdfFrame {
  width: 100%;
  height: 100%; /* Adjust the height as needed */
  border: none;
  transform: scale(1);
}
#fetchPdfBtn {
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
}
#fetchPdfBtn:hover {
  background-color: #303a32; /* Slightly darker green on hover */
}
.categoryHeading {
  background-color: rgb(64, 64, 64);
  padding: 5px;
  margin: 0px;
}
.mainReportHeadings {
  text-align: left;
  margin: 0px;
  margin-bottom: 3px;
}
.rowContainer {
  display: flex;
  align-items: center; /* Align vertically in the center */
  gap: 10px; /* Add spacing between the dropdowns */
}
#dropdown {
  height: 3vh;
  width: 5vw;
  width: 100%;
}
#maindropdown {
  width: 40%;
  height: 3vh;
  align-items: left;
  text-align: left;
  justify-content: left;
}
.options {
  display: flex;
  align-items: center;
  gap: 10px; /* Adjust spacing between items as needed */
}
#shiftDropDown {
  height: 3vh;
  width: 5vw;
  width: 50%;
}
.calendarClass {
  height: 40px;
  border-radius: 2px;
  background-color: #3b3b3b;
  border: 0.2px solid grey;
}
.generateReport {
  border: 1px solid grey;
}
.filterBar {
  overflow-y: scroll;
  height: 100%;
  border: 2px solid #3b3b3b;
  padding: 0px;
}
/* For laptops (screen width between 1024px and 1199px) */
.emailTable {
  border: 1px solid grey;
}
.tableWrapper {
  background-color: #121212; /* Optional: Customize background */
}
.reportDashboard {
  display: flex;
  flex-direction: column; /* Stacks content vertically */
  justify-content: flex-start; /* Aligns items to the top */
  font-family: "Kanit";
  color: #ffffff;
  border-radius: 8px;
  width: 30vw;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 2px;
}
#reportContainer {
  width: 40vw;
  margin-bottom: 20px;
  font-family: "Kanit";
  align-items: center;
  text-align: center;
  overflow-x: hidden;
  justify-content: center;
  color: #ffffff;
}
.reportDashboard {
  display: flex;
  flex-direction: column;
  font-family: "Kanit";
  color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 2px;
}
#reportContainer {
  width: 30vw;
  margin-bottom: 20px;
  text-align: center;
  color: #ffffff;
  font-family: "Kanit";
  overflow-x: hidden;
}
.MuiTableCell-root {
  font-family: "Kanit" !important;
  font-size: 12px !important;
  text-align: center !important;
  color: #ffffff !important;
  line-height: 1 !important;
  padding: 4px !important;
  border-top: 1px solid #797e86 !important;
}
.MuiTableCell-head {
  font-size: 15px !important;
  color: #ffffff !important;
  font-weight: bold;
  text-transform: uppercase;
}
.table-cell {
  border: 0.2px solid rgba(255, 255, 255, 0.2);
  color: white;
}
.table-cell:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.sticky-header {
  border-bottom: 0.21px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
}
#timedropdown {
  width: 500px;
  height: 200px;
}
.allComponents li,
.selectedComponents li {
  list-style-type: none;
  text-align: left;
  padding: none;
  margin: none;
}
.componentCheckList {
  accent-color: var(--primary-color);
  font-size: 13px;
}
.componentCheckList label {
  font-size: 13px;
}
.labelClass {
  font-size: 13px;
}
.allComponents,
.selectedComponents {
  text-align: left;
  border-radius: 6px;
  width: 30%;
  background-color: var(--colors-primary-grey);
  border: 1px solid #2d3033;
}
.mainSelectComponents {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}
.allComponents ul,
.selectedComponents ul {
  padding: 0;
  margin: 3px;
}
/* GRID */
.row {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.row-middle {
  align-items: center;
}
.col {
  flex-grow: 1;
  flex-basis: 0;
  max-width: 100%;
}
.col-start {
  justify-content: flex-start;
  text-align: left;
}
.col-center {
  justify-content: center;
  text-align: center;
}
.col-end {
  justify-content: flex-end;
  text-align: right;
}
/* Calendar */
.calendar {
  display: block;
  position: relative;
  width: 100%;
  background: var(--neutral-color);
  border: 1px solid var(--border-color);
}
.calendar .header {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 115%;
  padding: 1.5em 0;
  border-bottom: 1px solid var(--border-color);
}
.calendar .header .icon {
  cursor: pointer;
  transition: 0.15s ease-out;
}
.calendar .header .icon:hover {
  /*transform: scale(1.75);*/
  transition: 0.25s ease-out;
  color: var(--main-color);
}
.calendar .header .icon:first-of-type {
  margin-left: 1em;
}
.calendar .header .icon:last-of-type {
  margin-right: 1em;
}
.calendar .days {
  text-transform: uppercase;
  font-weight: 400;
  color: var(--text-color-light);
  font-size: 70%;
  padding: 0.75em 0;
  border-bottom: 1px solid var(--border-color);
}
.calendar .body .cell {
  position: relative;
  height: 4em;
  border-right: 1px solid var(--border-color);
  overflow: hidden;
  cursor: pointer;
  background: var(--neutral-color);
  transition: 0.25s ease-out;
  font-size: 1.5em;
}
.calendar .body .cell:hover {
  background: var(--bg-color);
  transition: 0.5s ease-out;
}
.calendar .body .selected {
  border-left: 10px solid transparent;
  border-image: linear-gradient(45deg, #1a8fff 0%, #53cbf1 40%);
  border-image-slice: 1;
}
.calendar .body .today {
  border-left: 10px solid transparent;
  border-image: linear-gradient(45deg, #ff1a79 0%, #eb82b3 40%);
  border-image-slice: 1;
}
.calendar .body .row {
  border-bottom: 1px solid var(--border-color);
}
/* .calendar .body .row:last-child {
    border-bottom: none;
  } */
.calendar .body .cell:last-child {
  border-right: none;
}
.calendar .body .cell .number {
  position: absolute;
  font-size: 82.5%;
  line-height: 1;
  top: 0.75em;
  right: 0.75em;
  font-weight: 700;
}
.calendar .body .disabled {
  color: var(--text-color-light);
  pointer-events: none;
}
.calendar .body .cell .bg {
  font-weight: 700;
  line-height: 1;
  color: var(--main-color);
  opacity: 0;
  font-size: 8em;
  position: absolute;
  top: -0.2em;
  right: -0.05em;
  transition: 0.25s ease-out;
  letter-spacing: -0.07em;
}
.calendar .body .cell:hover .bg,
.calendar .body .selected .bg {
  opacity: 0.05;
  transition: 0.5s ease-in;
}
.calendar .body .cell.today .bg {
  color: #ff1a79;
  opacity: 0.05;
}
.calendar .body .col {
  flex-grow: 0;
  flex-basis: 14.2857142857%;
  width: 14.2857142857%;
}
.periodClass {
  text-align: left;
  width: 100%;
  height: 9%;
}
.periodSelection h4 {
  padding: 0px;
  margin: 0px;
}
.periodSelection select {
  height: 100%;
  width: 100%;
  padding: 1px;
  flex: 1;
  min-width: 50%;
  border: 1px solid var(--colors-border);
  border-radius: 5px;
  background-color: var(--colors-primary-grey);
  font-family: "Kanit";
  color: var(--white);
}
.calendarView {
  width: 100%;
  height: 100%;
  text-align: left;
}
.periodSelection {
  display: flex;
  flex-direction: row;
  gap: 2%;
  width: 100%;
  height: 37px;
  border-radius: 3px;
  border: none;
}
.reportName {
  text-align: left;
  width: "100%";
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}
.nameInput,
.descInput {
  font-family: Kanit;
  width: 100%;
  border: none;
  background-color: var(--colors-primary-grey);
  border-radius: 5px;
  padding: 10px;
  line-height: 15px;
  outline: none;
  box-sizing: border-box;
  border: 1px solid var(--colors-border);
  color: var(--white);
}
.nameInput::placeholder,
.descInput::placeholder {
  color: var(--colors-grey-text);
}
.nameInput {
  height: 45px;
}
.compulClass {
  color: red;
}
.componentsClass,
.recepientsClass {
  text-align: left;
}
.recepientsClass {
  margin-bottom: 52px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.recepientsClass h4,
.componentsClass h4 {
  padding: none;
  margin-bottom: 5px;
}
.GenerateNewReport,
.ScheduleNewReport {
  position: relative;
  width: 100%;
  padding: 10px;
  height: 96.5%;
  background-color: #0e0f10;
  border-radius: 5px;
  box-sizing: border-box;
}
.headingButton {
  cursor: pointer;
  margin: 0;
  font-size: clamp(0.75rem, 0.8vw, 1rem);
  line-height: 1.2;
  text-transform: uppercase;
}
.mainTabComponent {
  display: flex;
  flex-direction: row;
  gap: 0px;
  width: 100%;
  background-color: #000000;
  border-radius: 5px 5px 0 0;
}
.generate-report {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.schedule-report {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}
.generate-report,
.schedule-report {
  display: flex;
  background-color: transparent;
  height: 20px;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 2px 2px;
  height: var(--header-height);
  padding: var(--header-padding);
  box-sizing: border-box;
  border-radius: 0;
  cursor: pointer;
  color: var(--white);
  border-bottom: 3px solid transparent;
}
.active-tab {
  border-bottom-color: var(--primary-color);
  color: var(--primary-color);
}
.generate-report img,
.schedule-report img {
  height: 20px;
  width: 20px;
}
.GenerateNewReportButtons {
  background-color: #000000;
  border-top: 1px solid #2d3033;
  display: flex;
  position: absolute;
  gap: 10px;
  margin-left: 0px;
  padding: 10px;
  bottom: 0;
  left: 0%;
  height: 5%;
  right: 0;
  justify-content: center; /* Center align horizontally */
}
.reportTemplate {
  height: 98vh;
  width: 28%;
  margin-bottom: 20px;
}
.reportTemplate h3 {
  margin: 0;
  text-align: left;
  margin-bottom: 1%;
}
.mainReportBar {
  height: 100%;
  width: 30%;
  margin-right: 10px;
}
.allComponents,
.selectedComponents {
  width: 50%;
  font-size: 13px;
}
.mainReportPage {
  display: flex;
  flex-direction: row;
  height: 100vh;
}
/* SELECT COMPONENTS - match first image: headers same as panel, no blue-tint */
.compText {
  padding: 5px 7px;
  margin: 0;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 1px solid #2d3033;
}
/* Selected panel: vertical dots drag handle, truncated name with ellipsis */
.selectedItemDragHandle {
  cursor: grab;
  color: #888;
  flex-shrink: 0;
}
.selectedItemName {
  flex: 1;
  min-width: 0;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weekScheduleSelection {
  width: 100%;
  border: none;
  display: flex;
}
.weekScheduleSelection select {
  border: none;
}
.emailList {
  width: 80%;
  border-radius: 10px;
  padding: 10px;
}
.emailListDiv {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: auto;
  gap: 10px;
}
.emailAddButton {
  margin: 0;
}
.disabledAddButton {
  margin: 0;
  background-color: var(--sable);
  color: white;
}
.emailListModal {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  gap: 10px;
  height: 100%;
}
.emailListModalContent {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.emailCloseButton {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 12px;
  cursor: pointer;
}
.calendarIconClass {
  padding: 0px -12px 0px 0px;
  outline: none;
}
.calendarIconClass:focus {
  padding: 0px -12px 0px 0px;
  outline: none;
}
.emailApplyButton {
  align-self: center;
  padding: 10px 20px;
  background-color: var(--primary-color);
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}
.reportName h4 {
  margin: 0px;
  margin-top: 7px;
}
.emailAddButton {
  padding: 5px;
  width: 100px;
  height: 40px;
  align-items: center;
}
@media screen and (max-width: 1281px) {
  .filterBar {
    height: 80vh; /* Height for laptops */
  }
  .generate-report,
  .schedule-report {
    height: var(--smaller-header-height);
    padding: 1px;
  }
  .headingButton {
    cursor: pointer;
    font-size: 12px;
  }
  .rightColumn {
    height: 90%;
  }
  .pdfFrame {
    height: 100%;
  }
  .GenerateNewReport {
    margin-right: 50px;
    height: 100%;
    overflow-y: scroll;
  }
  .ScheduleNewReport {
    height: 93.5%;
  }
  .GenerateNewReportButtons {
    height: 8%;
    margin-top: 25px;
    position: relative;
  }
  .reportName {
    text-align: left;
    width: "100%";
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-sizing: border-box;
  }
  .periodClass {
    text-align: left;
    width: 100%;
    height: 12%;
  }
  .emailListEmptyState {
    padding: 8px 4px;
    gap: 4px;
  }
  .emailListEmptyState__title {
    font-size: 11px;
  }
  .emailListEmptyState__subtitle {
    font-size: 11px;
  }
}
.filterBarNew {
  padding: 15px;
}
.tabButton {
  width: 50%;
  justify-content: center;
  border-radius: 0px;
}
.readOnlyViewClass {
  text-align: left;
  color: red;
  display: flex;
  flex-direction: row;
}
.weekDiv {
  display: flex;
  flex-direction: row;
  background-color: var(--colors-primary-grey);
  padding: 16.5px 0px 16.5px 14px;
  height: 100%;
  margin: 0px;
  gap: 10px;
  text-align: center;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  box-sizing: border-box;
}
.weekDiv p {
  font-size: 0.8em;
  padding: 0px;
  margin: 0px;
  color: rgb(215, 215, 215);
}
.MuiIconButton-root:focus-visible {
  outline: none !important;
}
.readOnlyProp {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.editDeleteButton {
  display: flex;
  margin-top: 10px;
  flex-direction: row;
  gap: 10px;
}
.buttons {
  position: absolute;
  width: 100%;
  text-align: center;
  justify-content: right;
  align-items: right;
  display: flex;
  justify-content: flex-end;
}
.weekCalendarView {
  width: 60%;
}
.editViewClass {
  color: #41ff88;
}
.mainReportBar {
  flex: 0 0 30%; /* fixed 30% width */
  height: 94%; /* ✅ match right column height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--muted-black);
  border-radius: 5px;
  box-sizing: border-box;
}
/* Right column */
.rightColumn {
  flex: 1; /* ✅ take remaining width */
  height: 94%;
  border-radius: 5px;
  background-color: var(--muted-black);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Third column (report template) */
.reportTemplate {
  flex: 0 0 28%;
  height: 94%;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
}
.reportTemplate h3 {
  margin: 10px;
  text-align: left;
}
/* PDF iframe */
.pdfFrame {
  width: 100%;
  height: 95%;
  border: none;
  background-color: #1d1e20;
  border-radius: 5px;
}
.reportEmailListContainer {
  background-color: var(--colors-primary-grey);
  flex-grow: 1; /* take remaining space */
  min-height: 0; /* important for flex scrolling */
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* enables vertical scroll */
  overflow-x: hidden;
  padding: 8px;
  gap: 8px;
}
.emailListEmptyStateContainer {
  justify-content: center;
}
.emailListEmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 8px;
  gap: 6px;
}
.emailListEmptyState__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background-color: #111214;
  border: 1px solid #2d3033;
}
.emailListEmptyState__title {
  margin: 0px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.emailListEmptyState__subtitle {
  margin: 0px;
  font-size: 12px;
  color: var(--colors-grey-text);
}
.emailList {
  width: 100%;
  padding: 6px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emailListRow {
  width: 97%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer !important;
}
.emailListRow__left {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.emailListRow__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.emailListRow__remove {
  background: transparent;
  border: none;
  color: #ff4b4b;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  outline: none;
}
.emailListRow__remove:hover {
  cursor: pointer;
}
.emailListRow__remove:focus {
  outline: none !important;
}
@media screen and (max-width: 1281px) {
  .emailListRow {
    padding: 3px 6px;
  }
  .emailListRow__left {
    font-size: 11px;
  }
  .emailListRow__remove {
    font-size: 13px;
  }
}
/* full logo width */
/* logo height */
/* F mark only when collapsed */
.headerSidebar.expanded {
  width: 210px;
  height: 100vh;
  background-color: var(--surface-shell);
}
.headerSidebar.expanded .spacer {
  border: 1px solid transparent;
}
.headerSidebar.expanded .mainHeaderComponentInner {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  width: 98%;
}
.headerSidebar.expanded .mainHeaderComponentInner::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}
.headerSidebar.expanded .mainHeaderComponentInner::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}
.headerSidebar.expanded .mainHeaderComponentInner::-webkit-scrollbar-track {
  background: transparent;
}

.headerSidebar.collapsed {
  background-color: var(--surface-shell);
  width: 50px;
  height: 100vh;
}

.mainHeaderComponent {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mainHeaderComponent .logoutSection {
  margin-top: auto; /* pushes it to the bottom */
}

.mainHeaderViewNew img {
  height: 20px;
  width: 20px;
}
.mainHeaderViewNew {
  cursor: pointer;
}

.mainHeaderViewNew.expanded {
  width: calc(100% - 10px);
  padding-right: 10px;
  box-sizing: border-box;
}
.mainHeaderViewNew.expanded .spacer.active.clicked {
  border: "1px solid transparent";
}

.mainHeaderViewNew.expanded.active {
  background-color: var(--primary-color);
  color: #101010 !important; /* ensures text becomes readable after invert */
}
.mainHeaderViewNew.expanded.active img {
  filter: invert(1) !important;
}
.mainHeaderViewNew.expanded.active p,
.mainHeaderViewNew.expanded.active span,
.mainHeaderViewNew.expanded.active h4,
.mainHeaderViewNew.expanded.active h5,
.mainHeaderViewNew.expanded.active h6 {
  color: #000 !important;
}

.mainHeaderViewNew {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  margin: 5px 0px 10px 10px;
  border-radius: 8px 8px 8px 8px !important;
  gap: 10px;
  transition: margin 0.65s ease;
}

.mainHeaderViewNew.collapsed {
  margin: 5px 0 10px 0;
  justify-content: center;
}

.spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px;
  transition: background-color 0.2s ease, border 0.2s ease;
  /* When the tab is active */
}
.spacer.active {
  background-color: #41ff98;
}
.spacer.active img {
  filter: invert(1); /* black icon */
}
.spacer {
  /* When clicked: grey border + black icon */
}
.spacer.clicked {
  border: 1px solid grey;
}

.expandedIconClass {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.expandedIconClass h4 {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #cdcdcd;
  font-weight: 500;
}
.expandedIconClass img {
  height: 10px;
  width: 10px;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.sidebar-icon.selected {
  filter: invert(0) !important;
}

.subPagesContainer {
  margin-left: 0px;
  margin-top: 4px;
  margin-bottom: 8px;
  padding-left: 12px;
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.subPageItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 6px;
  padding: 8px 10px; /* Better padding */
  box-sizing: border-box;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: left;
  gap: 7px;
}
.subPageItem:hover {
  background-color: var(--header-grey);
  transform: translateX(2px);
}
.subPageItem:hover p {
  color: #ffffff;
}
.subPageItem:hover img {
  opacity: 1;
  transform: scale(1.05);
}
.subPageItem {
  /* Active state for sub-items */
}
.subPageItem.active {
  background-color: rgba(1, 255, 98, 0.15);
}
.subPageItem.active p {
  color: var(--primary-color);
  font-weight: 500;
}
.subPageItem.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background-color: var(--primary-color);
  border-radius: 0 2px 2px 0;
}
.subPageItem p {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #cdcdcd;
  transition: color 0.2s ease;
}
.subPageItem img {
  height: 16px;
  width: 16px;
  opacity: 0.7;
  transition: all 0.2s ease;
}
.subPageItem .subPageMuiIcon {
  height: 16px;
  width: 16px;
  color: #ffffff;
}

.headerWrapper {
  position: relative;
  width: 100%;
  background: #0a0a0a;
  color: white;
  transition: height 0.25s ease;
}
.headerWrapper.expanded {
  height: 280px;
}
.headerWrapper.collapsed {
  height: 60px;
}

.expandedBody {
  display: none;
}

.headerWrapper.expanded .expandedBody {
  display: flex;
  flex-direction: row;
}

.collapsedIcons {
  display: none;
}

.headerWrapper.collapsed .collapsedIcons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.draggableElement {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
  padding: 8px 11px; /* Better padding */
  box-sizing: border-box;
  margin-bottom: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  text-align: left;
}
.draggableElement:hover {
  background-color: var(--header-grey);
  transform: translateX(2px);
}
.draggableElement:hover p {
  color: #ffffff;
}
.draggableElement:hover img {
  opacity: 1;
  transform: scale(1.05);
}
.draggableElement {
  /* Active state for sub-items */
}
.draggableElement.active {
  background-color: rgba(1, 255, 98, 0.15);
}
.draggableElement.active p {
  color: var(--primary-color);
  font-weight: 500;
}
.draggableElement.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background-color: var(--primary-color);
  border-radius: 0 2px 2px 0;
}
.draggableElement p {
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: #cdcdcd;
  transition: color 0.2s ease;
}
.draggableElement img {
  height: 16px;
  width: 16px;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.logoutSection {
  margin-top: auto;
  padding-top: 0px;
  margin-bottom: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.subPageClicker {
  position: fixed;
  left: 55px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 220px;
  min-width: 220px;
  background-color: var(--surface-shell);
  border-radius: 0px 8px 8px 0px !important;
  z-index: 10000;
  text-align: left;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-color) var(--surface-shell);
  border: 1px solid var(--border-shell);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subPageClicker p {
  padding: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.subPageClicker:hover {
  cursor: pointer;
}
.subPageClicker .subPageClickerHeading {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-shell);
  pointer-events: none;
  box-sizing: border-box;
}
.subPageClicker .subPageClickerHeading img.sidebar-icon {
  height: 16px;
  width: 16px;
  opacity: 0.9;
  flex-shrink: 0;
  padding: 5px;
  background-color: #3a3a3a;
  border-radius: 6px;
  box-sizing: content-box;
}
.subPageClicker .subPageClickerHeading h4 {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.subPageItem.collapsed {
  justify-content: flex-start;
  align-items: center;
  width: 100% !important;
  margin-left: 0px !important;
  border-radius: 6px !important;
  gap: 10px;
  padding: 4px 8px !important;
}

.subPageItem.collapsed img {
  filter: invert(0);
  opacity: 1;
  padding: 5px;
  box-sizing: content-box;
  flex-shrink: 0;
}

.subPageItem.collapsed .subPageMuiIcon {
  opacity: 1;
  padding: 5px;
  box-sizing: content-box;
  flex-shrink: 0;
}

.draggableCollapsed {
  display: flex;
  flex-direction: column;
  align-items: center; /* ✅ consistent left alignment */
  justify-content: flex-start;
  width: 170px !important;
  padding: 0;
  margin: 0;
}

.subSelected {
  border: 1px solid grey;
  color: #101010 !important; /* ensures text becomes readable after invert */
}

.headerSidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  background-color: var(--surface-shell);
  border-right: 1px solid var(--border-shell);
  z-index: 1000;
  overflow: hidden;
  user-select: none;
  transition: opacity 0.15s ease, width 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 0 0 #101010;
}

.mainHeaderComponentInner {
  flex: 1;
  opacity: 1;
  justify-content: center;
  transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
}
.mainHeaderComponentInner.collapsed {
  opacity: 1;
  pointer-events: all;
}
.mainHeaderComponentInner.expanded {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.headerSidebar.collapsed {
  width: 50px;
  box-shadow: 0 0 0 #101010;
}

.headerSidebar.expanded {
  width: 210px;
  box-shadow: 4px 0 12px #101010;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.pinnedAreaParent {
  border-top: 1px solid rgb(45, 45, 45);
  display: flex;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}

.pinnedAreaBanner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
.pinnedAreaBanner svg {
  display: block;
  flex-shrink: 0;
}
.pinnedAreaBanner {
  width: calc(100% - 16px);
  margin: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.2s ease;
}
.pinnedAreaBanner.pinned {
  background-color: rgba(1, 255, 98, 0.1);
  border-color: rgba(1, 255, 98, 0.3);
}
.pinnedAreaBanner.pinned p {
  color: var(--primary-color);
}
.pinnedAreaBanner p {
  margin: 0;
  font-size: 11px;
  color: #cdcdcd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pinnedAreaIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin: 8px auto;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.pinnedAreaIcon span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pinnedAreaIcon.pinned {
  background-color: rgba(1, 255, 98, 0.1);
  border-color: rgba(1, 255, 98, 0.3);
}

/* optional smooth fade-in for children */
.headerSidebar .expandedHeaderComponent {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.headerSidebar .smallHeaderComponent {
  opacity: 0;
  transform: translateX(15px);
  transition: opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s;
}

.headerSidebar.expanded .expandedHeaderComponent {
  opacity: 1;
  transform: translateX(0);
}

.headerSidebar.collapsed .smallHeaderComponent {
  opacity: 1;
  transform: translateX(0);
}

.fortLogoContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  height: 50px;
  cursor: pointer;
}
.fortLogoContainer .logoPinIcon {
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.fortLogoContainer:hover .logoPinLogo {
  opacity: 0;
}
.fortLogoContainer:hover .logoPinIcon {
  opacity: 1;
}
.fortLogoContainer.pinned .logoPinIcon {
  opacity: 0;
}
.fortLogoContainer.pinned .logoPinLogo {
  opacity: 1;
}
.fortLogoContainer.pinned:hover .logoPinIcon {
  opacity: 1;
}
.fortLogoContainer.pinned:hover .logoPinLogo {
  opacity: 0;
}

.fortLogoClip {
  position: relative;
}

.fortLogoWrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 34px;
  box-sizing: border-box;
  height: 50px;
  cursor: pointer;
}
.fortLogoWrapper .fortLogoClip {
  overflow: hidden;
  width: auto;
  height: 25px !important;
  transition: width 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.fortLogoWrapper .fortLogo {
  width: auto;
  height: 25px !important;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.fortLogoWrapper .fortChevron {
  width: 30px;
  height: 20px;
  color: #cdcdcd;
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.25s ease;
  pointer-events: none; /* wrapper handles the click */
}
.fortLogoWrapper.collapsed {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
  width: 40px;
  height: auto;
  background-color: #1d1e20;
  border: 1px solid rgb(62, 61, 61);
  border-radius: 4px;
}
.fortLogoWrapper.collapsed .fortChevron {
  transform: rotate(90deg);
}
.fortLogoWrapper.collapsed .fortLogoClip {
  width: auto;
  height: 25px !important;
}
.fortLogoWrapper.expanded {
  display: flex;
  align-items: center;
  padding: 6px;
  width: fit-content;
  height: 50px;
  background-color: #1d1e20;
  border: none;
  border-bottom: 1px solid rgb(62, 61, 61);
  border-radius: 4px;
}
.fortLogoWrapper.expanded .fortLogoClip {
  width: 180px;
  height: 25px !important;
}
.fortLogoWrapper.expanded .fortChevron {
  transform: rotate(-180deg);
}

.expandedSubmenu {
  display: flex;
  flex-direction: column;
  position: relative; /* ensures it appears below */
  margin-top: 4px;
  padding: 6px 0;
  background-color: var(--surface-shell);
  border-left: 2px solid #41ff98;
  border-radius: 6px;
  overflow: hidden;
  animation: fadeIn 0.2s ease-out;
}
.expandedSubmenu .subPageItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  cursor: pointer;
  color: #d6d6d6;
  font-size: 13px;
  transition: background-color 0.2s ease;
}
.expandedSubmenu .subPageItem:hover {
  background-color: #1e1e1e;
}
.expandedSubmenu .subPageItem.subSelected {
  background-color: #41ff98;
  color: #000;
}
.expandedSubmenu .subPageItem img {
  width: 18px;
  height: 18px;
}
.expandedSubmenu .draggableElement {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  color: #aaa;
}
.expandedSubmenu .draggableElement p {
  margin: 0;
  font-size: 12px;
}
.expandedSubmenu .draggableElement:hover {
  background-color: #222;
}

.subPageItem {
  width: 85%;
  margin-left: 20px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.subPageClicker {
  animation: menuDropIn 0.2s ease-out;
}

@keyframes menuDropIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.subPageClicker.hide {
  opacity: 0;
  pointer-events: none;
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
@media (max-width: 2560px) {
  .dropdown-checkbox-container {
    position: relative;
    font-size: 15px;
    width: 10vw;
  }
}
@media (max-width: 1920px) {
  .dropdown-checkbox-container {
    position: relative;
    font-size: 15px;
    width: 15vw;
  }
}
.faultDashboard {
  display: flex;
  flex-direction: column; /* Stacks content vertically */
  align-items: center; /* Centers items horizontally */
  justify-content: flex-start; /* Aligns items to the top */
  height: 100vh; /* Makes the container take the full viewport height */
  width: 100vw;
  font-family: "Kanit";
  color: #ffffff;
  background-color: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 2px;
}
.faultDashboard h2 {
  color: #ffffff;
  margin-bottom: 20px;
}
.scrollable-table-container {
  max-height: 70vh; /* Set a max height for the table */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Hide horizontal scrolling if not needed */
  font-family: "Kanit";
}
.sticky-header {
  position: sticky;
  top: 0;
  background-color: #2c2c2c;
  font-family: "Kanit";
  font-size: 20px;
  z-index: 2; /* Ensure the header stays above the table body */
  font-weight: bold;
}
.MuiTableCell-root {
  font-family: "Kanit" !important;
  align-items: center !important;
  text-align: center !important;
}
.MuiTableCell-head {
  font-weight: bolder;
  font-size: 20px !important;
  font-weight: bolder !important;
  align-items: center !important;
}
#faultTable {
  border-spacing: 0;
  width: 95vw;
  margin: 5px;
  font-family: "Kanit";
}
#matrixTable {
  border-spacing: 0;
  width: 96%;
  margin: 5px;
  font-family: "Kanit";
  align-items: center;
  justify-content: center;
}
/* width */
::-webkit-scrollbar {
  width: 12px;
  border: 1px solid black;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/* Handle */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #bbbbbb;
}
#faultContainer {
  width: 95vw;
  margin-bottom: 20px;
  height: 78vh;
  font-family: "Kanit";
  align-items: center;
  text-align: center;
  overflow-x: hidden;
  justify-content: center;
  background-color: #1a1a1a;
  color: #ffffff;
}
#reportContainer {
  width: 95vw;
  margin-bottom: 20px;
  font-family: "Kanit";
  align-items: center;
  text-align: center;
  overflow-x: hidden;
  justify-content: center;
  background-color: #1a1a1a;
  color: #ffffff;
}
#matrixContainer {
  width: 100%;
  margin: 20px;
  height: 100%;
  font-family: "Kanit";
  align-items: center;
  text-align: center;
  overflow-x: hidden;
  justify-content: center;
}
.faultDashboard .MuiTableCell-root {
  padding: 4.5px 6px; /* Reduce the padding */
  line-height: 2 !important; /* Adjust line-height for compactness */
  color: #ffffff;
  font-size: 15px !important;
  font-family: "Kanit" !important;
  border-top: 1px solid #797e86 !important; /* Remove top border */
  border-bottom: none !important; /* Remove bottom border */
  border-right: none !important; /* Remove cell borders */
}
.dropdown-label {
  cursor: pointer;
  padding: 2px;
  padding-left: 6px;
  border: 0.2px solid #5b5b5b;
  background-color: black;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dropdown-row {
  display: flex;
  gap: 20px;
  justify-content: flex-start;
  margin-bottom: 10px;
  align-items: flex-start;
  margin-left: 0; /* Ensure no additional left margin */
  padding-left: 0; /* Remove padding if any */
}
.dropdown-checkbox-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: black;
  max-height: 100px;
  border-radius: 5px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.checkbox-item {
  display: flex;
  align-items: center;
}
.checkbox-item input {
  margin-right: 5px;
}
.faultDashboard .MuiTableRow-root {
  height: auto; /* Ensure rows automatically adjust to content */
  min-height: 10; /* Override any default minimum height */
  border-collapse: collapse;
}
.tableWrapper {
  margin: 2px;
}
#dropdownbtn {
  height: 25px;
  color: white;
  background-color: black;
  padding: 0px;
  padding-right: 10px;
  border: none;
  padding-bottom: 2px;
  outline: none;
}
/* Add this to productionPage.scss */
.tableWrapper {
  background-color: #121212; /* Optional: Customize background */
}
/* Lighter borders for the cells */
.table-cell {
  border: 0.2px solid rgba(255, 255, 255, 0.2); /* Light gray border with transparency */
  color: white; /* Optional: Text color for table cells */
}
/* Header cells */
.sticky-header {
  border-bottom: 0.21px solid rgba(255, 255, 255, 0.5); /* Slightly bolder header border */
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
}
/* Optional: Hover effect on rows */
.table-cell:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Subtle hover effect */
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
:root {
  --border-radius: 5px;
  --text-field-height: 30px;
  --text-field-padding: 5px;
  --text-field-padding-left: 10px;
  --font-family: 'Kanit';
  --top-margin-table-page: 30px;
  --table-width-expanded: 97.5%;
  --table-width-collapsed: 98%;
  --page-height-desktop: 94.5vh;
  --page-height-laptop: 92vh;
}
.grid-tile {
  display: flex;
  flex-direction: column;
  background-color: var(--surface-component);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}
.grid-tile > * {
  flex: 1;
  min-height: 0;
}
.gauge {
  font-family: Arial, Helvetica, sans-serif;
  flex-shrink: 0;
  background: radial-gradient(circle at bottom center, var(--muted-black) 3.5vw, rgba(85, 85, 85, 0.3333333333), transparent 20px), conic-gradient(from 4.7rad at 50% 100%, var(--red) 0deg 36deg, var(--addition-accent) 36deg 108deg, var(--bright-green) 108deg 144deg);
  width: 10%;
  border-radius: 150px 150px 0 0;
  height: 50px;
}
.target-line {
  position: absolute;
  left: 50%;
  width: 4px;
  height: 100%;
  background-color: rgb(255, 255, 255);
  clip-path: inset(0 0% 75% 0);
  transform: rotate(180deg);
  transform-origin: bottom center;
}
.dialNumbers h6 {
  margin: 0;
  padding: 0px;
}
.dialNumbers h4 {
  padding: 0px;
  margin: 0px;
  margin-top: 6px;
}
.viewOnSide {
  display: flex;
  flex-direction: row; /* Stack items vertically */
  align-items: center; /* Center align horizontally */
  justify-content: center; /* Center align vertically */
  text-align: center;
  position: relative; /* Allows it to be positioned inside the gauge */
  top: 50%;
  right: 12%;
  gap: 30px;
  border-radius: 5px;
  color: white; /* Ensures text is visible */
  z-index: 2; /* Places it above the gauge */
}
.dialsMain {
  position: relative;
  width: 50%;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 18px 0 20px;
  background-color: var(--surface-inset);
  /* Flexbox to center everything */
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  flex-direction: column; /* Ensures stacked layout if multiple elements */
  text-align: center; /* Ensures text inside stays centered */
}
.histogram {
  height: 100%;
  width: 85%;
  display: flex;
  align-items: center;
  align-self: center;
  left: 50%;
  padding: 5px;
}
.prodGraphSection {
  height: 100%;
  background-color: var(--surface-component);
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
}
.dialsMain h3 {
  padding: 0px;
  margin: 0px;
  margin-bottom: 5%;
}
.dialsRow {
  position: relative;
  display: flex;
  gap: 50px;
  flex-direction: row;
}
.HeaderHomePage {
  background-color: var(--darker-grey);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 0px;
  font-size: 20px;
}
.unitSelectorAndPeriodSelector {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 5px;
}
.dialsMain h4 {
  margin: 0;
  padding: 0px;
}
.rightControls {
  display: flex;
  align-items: center;
  gap: 10px; /* space between sum button & toggle */
}
.rightControls .selecteds {
  background-color: #41ff98;
}
.rightControls .selecteds img {
  filter: invert(1);
}
.sumButton {
  background: var(--surface-component);
  border: none;
  padding: 5px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oreWasteRows {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 10px 19px 16px;
  flex: 1;
  min-height: 0;
}
.gauge-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.gauge {
  position: relative;
  width: 9vw;
  height: 9vh;
  border-radius: 150px 150px 0 0;
  overflow: visible;
}
/* Ensure arrow is inside the gauge */
.arrowContainer {
  position: absolute;
  bottom: 0;
  left: 45%;
  transform-origin: bottom center; /* Ensures correct rotation */
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
}
.arrowCircle {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  position: relative;
}
.arrowCircle::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: black;
  border-radius: 50%;
}
.arrowLine {
  width: 2px;
  height: 40px;
  background-color: white;
}
.arrowTriangle {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid white;
}
.payloadSection {
  height: 35vh;
  width: 100%;
  background-color: var(--muted-black);
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.leftSections {
  height: 100vh;
  box-sizing: border-box;
}
.fullgauge {
  position: relative;
  top: 0px;
  left: 0px;
  width: 70px;
  height: 70px;
  left: 10%;
  border-radius: 50%;
  border: 10px solid grey;
  z-index: 1;
}
/*
Semi circle = circle crop in half with clip property
*/
.semi-circle {
  width: 70px;
  height: 70px;
  border: 10px solid rgb(94, 225, 65);
  border-radius: 50%;
  position: absolute;
  clip: rect(0, 50px, 170px, 0);
  left: 0;
  top: 0;
}
.circle-progressbar {
  position: absolute;
  top: -10px;
  left: -10px;
}
/* Optional */
.fullgauge-infos {
  position: relative;
  width: 70px;
  height: 70px;
  top: 0;
  text-align: center;
  padding-top: 20px;
  font-size: 18px;
}
.circleClass {
  height: 1vw;
  width: 1vw;
  border-radius: 50px;
}
.circular {
  display: flex;
  flex-direction: row;
  align-items: center; /* Aligns items in the middle vertically */
  text-align: center;
  padding: 0;
  margin: 0px;
  gap: 0.5vw; /* Adds spacing between circle and text */
}
.circular h4 {
  padding: 0;
  margin: 2px;
}
.availabilityClass {
  height: 100%;
  width: 25%;
  position: relative;
  padding: 2px;
  box-sizing: border-box;
  border: 1px solid var(--darker-grey);
  display: grid;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  text-align: center; /* Ensures text is centered */
}
.availabilityClass h3 {
  margin: 2px;
}
.productivityClass {
  position: relative;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  align-content: center;
  overflow: hidden;
}
.productivityClass h4 {
  margin: 1px;
}
.machineAvail {
  display: flex;
  flex-direction: row;
  position: relative;
  height: 30%;
}
.allSections {
  display: flex;
  justify-content: space-between; /* Pushes left and right sections apart */
  align-items: flex-start; /* Aligns them at the top */
  width: 97%;
}
.leftSections {
  flex: 1;
  min-height: 99vh;
  width: 50%;
  background-color: var(--surface-component);
}
.rightSectionsHomePage {
  flex: 1;
  min-width: 50%;
  height: 99vh;
  background-color: var(--surface-component);
}
.imageClass {
  height: 1.5vw;
  margin-right: 10px;
}
.fuelLitresClass {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  align-self: center;
  height: 10%;
  border: 1px solid var(--darker-grey);
  margin-bottom: 5px;
}
.fuelLitresSection {
  height: 60%;
}
.machineLitresMain {
  height: 100%;
  width: 23.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  padding: 4px;
  border-radius: 5px;
  margin: 10px;
}
.iconClass {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
}
.fuelValueClass p {
  padding: 0;
  margin: 0px;
  align-items: start;
  font-size: 13px;
}
.fuelDials {
  display: flex;
  flex-direction: row;
}
.fuelDialComponent {
  width: 50%;
}
.fuelDialComponent h4 {
  padding: 0;
  margin: 0px;
  margin-top: 15px;
}
.fuelDialClass {
  height: 33.5%;
  border: 1px solid var(--darker-grey);
}
.headerSectionLandingPage {
  width: 100%;
  height: 5%;
  display: flex;
  flex-direction: row;
  gap: 300px;
}
.mainRow {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 1px solid var(--border-component);
  border-radius: 12px;
  text-align: center;
  padding: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.ProductionRateSection {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  background-color: transparent;
  border: 1px solid var(--border-component);
  border-radius: 12px;
  padding: 12px;
  padding-top: 5px;
}
.prodGraphSection {
  min-height: 0;
  overflow: hidden;
  padding: 6px 4px 4px 4px;
  box-sizing: border-box;
}
.apexcharts-legend-group-vertical {
  flex-direction: row !important;
}
.apexcharts-legend-group-vertical .apexcharts-legend-series {
  gap: 4px;
}
.ProductionRateSection .production-header {
  position: absolute;
}
/* keep chart responsive */
@media (max-width: 1800px) {
  .ProductionRateSection .production-header {
    position: static !important;
  }
}
@media (max-width: 1280px) {
  .headerSectionLandingPage {
    height: 7%;
  }
  .availabilityClass {
    height: 100%;
    width: 24.5%;
  }
  .machineAvail {
    height: 32%;
  }
  .fuelDialComponent h4 {
    padding: 0;
    margin: 0px;
    margin-top: 0px;
  }
  .fuelDialClass {
    height: 32%;
    padding-bottom: 5px;
    box-sizing: border-box;
  }
  .fullgauge {
    width: 40px;
    height: 40px;
    left: 20%;
  }
  /*
  Semi circle = circle crop in half with clip property
  */
  .semi-circle {
    width: 40px;
    height: 40px;
    clip: rect(0, 30px, 170px, 0);
  }
  .fullgauge-infos {
    position: relative;
    width: 50px;
    height: 70px;
    top: 0;
    text-align: center;
    padding-top: 10px;
    font-size: 14px;
  }
  .HeaderHomePage {
    height: 25px;
  }
  .availabilityClass h3 {
    font-size: 17px;
  }
  .productivityClass h4 {
    font-size: 15px;
  }
  .payloadSection {
    height: 30vh;
    width: 100%;
    border: 1px solid var(--darker-grey);
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
  }
  .prodGraphSection {
    height: 18vh;
  }
  .arrowLine {
    width: 1px;
    height: 25px;
    background-color: white;
  }
  .imageClass {
    height: 2vw;
  }
  .arrowTriangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;
  }
}
.arrowCircle {
  width: 9px;
  height: 9px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid black;
  position: relative;
  margin: 0;
}
.arrowCircle::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: black;
  border-radius: 50%;
}
.donut-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.p-0 {
  padding: 0px !important;
}
.donut-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}
.circular-loader {
  height: 20vh;
}
.donut-section-div {
  background: var(--surface-component);
  border: 1px solid var(--border-component);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  padding: 8px 16px;
  box-sizing: border-box;
}
.donut-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
}
.donut-section-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--surface-page);
}
.headerRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 19px;
  flex-shrink: 0;
}
.overviewHeader {
  font-size: 20px;
  padding: 1px;
  margin: 6px 0;
  text-align: left;
  font-family: "KanitMedium";
  text-transform: uppercase;
}
.filled-gauge-container {
  margin: 0px;
}
.fuelSection {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px;
  padding-top: 5px;
  background: transparent;
  border: 1px solid var(--border-component);
  border-radius: 12px;
}
.fuelSummary {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  position: absolute;
  top: 0px;
  left: 0px;
  pointer-events: auto !important;
  z-index: 9999 !important;
}
.fuelSummary-sub-child {
  padding: 7px 12px;
  background: var(--surface-component);
  border-radius: 8px;
  border: 1px solid var(--border-component);
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  pointer-events: auto !important;
  position: relative;
  z-index: 10000 !important;
}
.fuelSummary-sub {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  text-align: left;
}
.fuelSummery-sub .heading {
  font-family: "KanitBold";
}
.fuelSummary-sub p {
  margin: 0;
  font-size: 15px;
}
.sub-header {
  font-size: 14px;
  color: #a3a8af;
}
@media (max-width: 1370px) {
  .fuelSummary-sub p {
    font-size: 12px;
  }
}
.apexcharts-yaxis-title text {
  font-size: 13px;
  font-weight: 500;
}
.period-selector input {
  display: none;
}
.period-selector .weekDiv p {
  display: none;
}
.period-selector .weekDiv {
  padding: 0;
}
.period-selector .MuiOutlinedInput-root {
  background: none !important;
  padding: 0px;
}
.period-selector .MuiInputAdornment-root {
  margin-left: 0;
}._supersetDashboard_9zd60_1 {
  overflow-x: hidden;
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
.FleetStatusContainer {
  display: block;
  width: 100%;
  max-height: 28vh;
}
@media (max-height: 900px) {
  .FleetStatusContainer {
    max-height: 28vh;
  }
}
@media (max-height: 600px) {
  .FleetStatusContainer {
    max-height: 50vh;
  }
}
.FleetStatusContainer {
  border-radius: 0px;
  margin-left: 0px;
  background-color: transparent;
  box-sizing: border-box;
  overflow: auto;
  border: 0px solid var(--primary-secondary-color);
  backdrop-filter: blur(3px);
  background-color: color-mix(in srgb, var(--colors-secondary-light) 80%, transparent);
}
.statusContainer {
  width: 100%;
}
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.FleetStatusTable {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: shadow effect */
}
.workingFleet,
.processDelayFleet,
.downFleet {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: 8px;
}
.workingValue,
.processDelayValue,
.downValue {
  background-color: var(--green);
  color: var(--primary-secondary-color);
  padding: 3px 20px;
  border-radius: 20px;
}
.processDelayValue {
  background-color: var(--addition-accent);
}
.downValue {
  background-color: var(--red-dark);
}
.fleetItem > div:first-child {
  margin-left: -7.5px; /* match your clip-path’s first X offset */
  height: 99%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fleetItems {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto the next line */
  gap: 10px; /* Adds spacing between items */
  max-width: 100%; /* Ensures the container doesn't overflow */
  text-align: center;
}
.fleetItem {
  position: relative;
  display: inline-flex; /* inline-friendly */
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  text-align: center;
  padding: 10px;
  /* CONTENT stays transparent; we draw bg on ::after */
  background: transparent;
  /* The clipped shape of the item */
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  /* ensure pseudo-elements can sit behind/under content */
  z-index: 0;
}
/* Put the real text/icon above both pseudo layers */
.fleetItem > * {
  position: relative;
  z-index: 2;
}
/* OUTER: the “border” layer (white) following the exact polygon */
.fleetItem::before {
  content: "";
  position: absolute;
  inset: 0; /* fill parent; no scaling */
  background: #949494; /* border color */
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  z-index: 0;
  pointer-events: none;
}
/* INNER: the fill layer, slightly inset so the border shows on all sides */
.fleetItem::after {
  content: "";
  position: absolute;
  /* inset equals border thickness; tweak for thicker/thinner border */
  inset: 1px; /* ~2px border */
  background: var(--item-bg, #2b2b2b); /* your item bg color */
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  z-index: 1;
  pointer-events: none;
}
.vl {
  border-left: 1px solid var(--secondary);
  height: 15vh;
  margin-left: -3px;
  top: 0;
  align-items: center;
  justify-content: center;
}
.headingClass {
  align-items: left;
  text-align: left;
  padding: 0;
  margin-top: 3px;
}
.maxMinBtn {
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  background-color: var(--primary-secondary-color);
  color: var(--color);
  align-self: flex-end;
  right: 0px;
}
.maxMinBtn:active {
  border: none;
}
.ddMain {
  background-color: var(--dark-matter);
  margin: 3px;
  width: auto;
  text-align: left;
  border-radius: 10px;
}
.mainCategory h5 {
  padding: 2px;
  border-radius: 2px;
}
.dropDownElement p {
  margin: 0;
  padding: 1px;
  font-size: 15px;
}
.dropDownElement,
.imageText {
  margin-left: 5px;
  justify-content: space-between;
  display: flex; /* Enables Flexbox */
  align-items: center; /* Aligns items vertically in the center */
  gap: 8px; /* Adds space between image and text */
}
.dropDownElement {
  justify-content: space-between;
  border-bottom: 1px solid black;
}
.dropDownElement:hover {
  background-color: var(--darker-grey);
  transition: 0.1s ease-in;
}
.fleetStatus {
  display: Flex;
  gap: 1%;
  border: 3px solid var(--primary-secondary-color);
  backdrop-filter: blur(3px);
  margin-left: 10px;
  width: 100%;
  margin-bottom: 1%;
  height: 20vh;
  background-color: rgba(0, 0, 0, 0.3);
}
.fleetBox {
  display: grid;
  grid-template-columns: repeat(auto-fill, 70px);
  flex-wrap: nowrap;
  width: 100%;
  gap: 10px;
  box-sizing: border-box;
  bottom: 0px;
  overflow-x: auto;
  padding: 10px 14px 10px 10px;
}
.dialog-box {
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 0px;
}
.dialog-box p {
  margin: 5px;
}
.dialog-box p span {
  font-weight: 900;
  color: var(--red);
}
.fleetList {
  list-style: none;
  width: auto;
  font-size: 15px;
}
.fleetListMain {
  display: flex;
  gap: 10px;
  align-items: left;
  flex-wrap: wrap;
  padding: 0px;
}
.eachLoader {
  font-size: 14px;
  padding: 3.5px;
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  border-top: 1px solid var(--primary-secondary-color);
  background-color: var(--blue-tint-grey);
}
.eachLoader:hover {
  background-color: var(--darker-grey);
}
.statusContainerGrid {
  width: 100%;
  overflow: hidden;
}
.statusGrid {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  width: auto;
  align-items: flex-start;
  overflow-x: scroll;
}
.statusColumn {
  min-width: 15%;
  border-radius: 5px;
  padding: 0px;
  height: 70vh;
  background-color: var(--darker-grey);
  max-height: 50vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 4px;
}
.statusHeader {
  font-size: 14px;
  font-weight: bold;
  padding: 3px;
  color: white;
  width: 130px;
  height: 55px;
  border-radius: 5px;
  margin-bottom: 5px;
  background-color: var(--blue-tint-grey);
  text-overflow: ellipsis;
  text-align: center;
  justify-content: center;
  margin-top: 0px;
  display: flex;
  align-items: center;
}
.statusList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.statusItem {
  font-size: 13px;
  padding: 3px;
  width: 130px;
  flex: 0 0 130px;
  cursor: pointer;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center; /* use 'center', not 'left' */
  transition: background 0.2s ease;
  color: white;
  text-align: left;
}
.fleetItem.selected::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  background: var(--white);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 8px);
  z-index: -2;
  align-items: center;
  text-align: center;
}
/* Inner overlay fill (like your after) */
.fleetItem.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  align-items: center;
  text-align: center;
  clip-path: inherit;
  border-radius: inherit;
  pointer-events: none;
}
.statusItem:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.statusItem.selected {
  background-color: rgba(65, 255, 136, 0.5);
}
.tick {
  margin-left: 8px;
  color: #00e676;
}
.eachLoader {
  position: relative;
  padding: 4px 8px;
  cursor: pointer;
}
.tick {
  margin-left: 6px;
  color: limegreen;
}
.confirm-box {
  position: absolute;
  bottom: 100%; /* instead of top */
  left: 0;
  margin-bottom: 6px; /* space between loader and popup */
  background: #222;
  border: 1px solid var(--green);
  color: white;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.confirm-box button {
  margin: 4px 4px 0 0;
  padding: 1px 6px;
  box-sizing: border-box;
  background: #444;
  color: white;
  border-radius: 3px;
  cursor: pointer;
}
.fleetItem {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
}
.statusDropdownMenu {
  width: 45vw;
}
.statusDropDown {
  overflow-y: hidden;
}
@media (max-width: 1280px) {
  .ddMain {
    width: 100%;
  }
  .statusColumn {
    max-height: 55vh; /* or another responsive height */
    min-width: 11vw;
    overflow-y: auto;
  }
  .statusDropdownMenu {
    width: 80vw;
    overflow-y: hidden;
  }
}
.confirm-btn:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}
/* parent containers */
.FleetStatusContainer {
  overflow: auto;
}
.fleetBox {
  overflow: visible;
}
/* base fleet item */
.fleetItem {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  transition: filter 0.2s ease;
}
/* selected base boost */
.fleetItem.selected {
  z-index: 3;
  filter: brightness(1.1) saturate(1.1);
}
/* border ring */
.fleetItem.selected::before {
  content: "";
  position: absolute;
  inset: -2px; /* border thickness */
  pointer-events: none;
  z-index: 4;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  box-sizing: border-box;
  border-radius: inherit;
}
/* solid hue overlay (on top of original color) */
.fleetItem.selected::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  clip-path: polygon(0px 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%, 0 0px);
  background: rgba(65, 255, 136, 0.25); /* cyan-tinted overlay */
  mix-blend-mode: overlay; /* keeps base color but adds hue intensity */
  /* alternative: use multiply for darker tint */
}
/* optional glow */
.fleetItem.selected {
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.35);
}
/* ── Collapsed summary ──────────────────────────────────────── */
.fleetCollapsedSummary {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: color-mix(in srgb, var(--colors-secondary-light) 80%, transparent);
}
.fleetCollapsedRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.fleetCollapsedLabel {
  font-family: "KanitBold", "Kanit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}
.fleetCollapsedCount {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  min-width: 20px;
}
/* ── Fleet bar header ───────────────────────────────────────── */
.fleetBarHeader {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 0 0;
}
.fleetStatusSummary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: 4px;
}
.statusDotBtn {
  display: flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.statusDotBtn:hover {
  background: rgba(255, 255, 255, 0.05);
}
.statusDotBtn.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}
.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  margin-top: 2px;
}
.statusDotCount {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  font-family: "Kanit", sans-serif;
}
.fleetBarControls {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--colors-secondary-light) 80%, transparent);
  border-radius: 0px;
  padding: 4px 30px 4px 10px;
}
.groupSegmented {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.groupSegmentedBtn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: "KanitBold", "Kanit", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.45);
  transition: background 0.12s, color 0.12s;
}
.groupSegmentedBtn:hover {
  color: #fff;
}
.groupSegmentedBtn.active {
  background: var(--primary-color, #00c8ff);
  color: #000;
}
.fleetCollapseBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.12s, border-color 0.12s;
}
.fleetCollapseBtn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
/* ── Grouped column views (STATUS / TYPE) ───────────────────── */
.fleetGrouped {
  display: flex;
  height: 100%;
  overflow: visible;
  min-width: max-content;
  padding: 10px;
  gap: 0;
}
.fleetGroupColumn {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}
.fleetGroupColumn.fleetGroupColumnDivider {
  padding-left: 14px;
  margin-left: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.fleetGroupHeader {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 4px 7px;
  min-height: 23px;
  padding: 0 4px;
  max-width: 180px;
  width: 100%;
  height: 20px;
}
.fleetGroupHeaderText {
  flex: 1;
  min-width: 0;
  line-height: 0px;
  text-align: left;
}
.fleetGroupHeaderLabel {
  font-family: "KanitBold", "Kanit", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.07em;
  color: #fff;
  text-transform: uppercase;
  user-select: none;
  line-height: 1.3;
}
.fleetGroupHeaderCount {
  font-size: 10px;
  font-weight: 600;
  user-select: none;
  color: rgba(255, 255, 255, 0.4);
  font-family: "Kanit", sans-serif;
}
.fleetGroupBody {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 3px;
  overflow: auto;
  max-height: calc(28vh - 42px);
}._border_7h77w_1 {
  display: inline-flex;
  align-items: stretch;
  padding: 1px;
  background: transparent;
  transition: background 0.12s;
  overflow: hidden;
}
._border_7h77w_1._md_7h77w_9 {
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
._border_7h77w_1._sm_7h77w_12 {
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
._border_7h77w_1._xs_7h77w_15 {
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}

._borderActive_7h77w_19 {
  background: var(--primary-color, #41ff88);
}

._border_7h77w_1 > ._chip_7h77w_23 {
  flex: 1 1 auto;
  min-width: 0;
}

._chip_7h77w_23 {
  position: relative;
  display: inline-flex;
  align-items: center;
  background-color: #3a3d42;
  color: #ffffff;
  font-weight: 600;
  letter-spacing: 0.05em;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 100%;
  user-select: none;
  transition: filter 0.12s ease;
}
._chip_7h77w_23:hover {
  filter: brightness(1.15);
}
._chip_7h77w_23._md_7h77w_9 {
  height: 30px;
  padding: 0 10px 0 22px;
  font-size: 16px;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
._chip_7h77w_23._md_7h77w_9 ._edge_7h77w_51 {
  width: 10px;
}
._chip_7h77w_23._sm_7h77w_12 {
  height: 25px;
  padding: 0 5px 0 15px;
  font-size: 14px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
._chip_7h77w_23._sm_7h77w_12 ._edge_7h77w_51 {
  width: 8px;
}
._chip_7h77w_23._xs_7h77w_15 {
  height: 17px;
  padding: 0 3px 0 10px;
  font-size: 11px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
._chip_7h77w_23._xs_7h77w_15 ._edge_7h77w_51 {
  width: 6px;
}

._edge_7h77w_51 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

._name_7h77w_80 {
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  text-align: left;
}

._removeBtn_7h77w_88 {
  border: none;
  background: transparent;
  padding: 0;
  color: #b2b7bf;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 18px;
  opacity: 0;
  overflow: hidden;
  border-radius: 2px;
  transition: width 0.12s ease, opacity 0.12s ease, background 0.12s, color 0.12s;
  flex-shrink: 0;
}
._removeBtn_7h77w_88._removeVisible_7h77w_105 {
  width: 16px;
  opacity: 1;
  margin-left: 2px;
}
._removeBtn_7h77w_88:hover {
  color: #ffffff;
  background: rgba(251, 53, 88, 0.85);
}._btn_hz5bg_1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.12s, border-color 0.12s;
  flex-shrink: 0;
}
._btn_hz5bg_1:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}._container_sq6lm_1 {
  display: flex;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}

._btn_sq6lm_10 {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: "KanitBold", "Kanit", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.45);
  transition: background 0.12s, color 0.12s;
}
._btn_sq6lm_10:hover {
  color: #fff;
}
._btn_sq6lm_10._active_sq6lm_26 {
  background: var(--primary-color, #00c8ff);
  color: #000;
}._chip_o26ss_1 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border-radius: 5px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
._chip_o26ss_1:hover {
  background: rgba(255, 255, 255, 0.05);
}
._chip_o26ss_1._active_o26ss_15 {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

._dot_o26ss_20 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

._label_o26ss_28 {
  font-family: "KanitBold", "Kanit", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}

._count_o26ss_38 {
  font-family: "Kanit", sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}._filterDropdownPill_jy5lu_1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  flex-shrink: 0;
}
._filterDropdownPill_jy5lu_1._dense_jy5lu_8 {
  padding: 2px 6px;
  gap: 4px;
}
._filterDropdownPill_jy5lu_1 {
  white-space: nowrap;
  color: #fff;
  background: var(--surface-component);
  border-radius: 8px;
  border: 1px solid var(--border-component);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
._filterDropdownPill_jy5lu_1:hover {
  background: var(--surface-inset);
  border-color: var(--colors-selection);
}
._filterDropdownPill_jy5lu_1._active_jy5lu_25 {
  border-color: var(--primary-color) !important;
}
._filterDropdownPill_jy5lu_1._iconOnly_jy5lu_28 {
  padding: 6px;
  justify-content: center;
}

._icon_jy5lu_28 {
  display: flex;
  align-items: center;
}
._icon_jy5lu_28 svg {
  height: 16px;
  width: 16px;
}

._labelContainer_jy5lu_42 {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}

._fieldNameGhost_jy5lu_49 {
  visibility: hidden;
  white-space: nowrap;
  pointer-events: none;
}

._fieldName_jy5lu_49 {
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  inset: 0;
  display: flex;
  align-items: center;
}

._previewDot_jy5lu_65 {
  opacity: 0.5;
  margin: 0 3px;
  font-size: 6px !important;
  flex-shrink: 0;
}

._previewExtra_jy5lu_72 {
  font-weight: 700;
}

._chevronWrapper_jy5lu_76 {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

._iconSlot_jy5lu_83,
._iconSlotClose_jy5lu_84 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
}

._iconSlotClose_jy5lu_84 {
  opacity: 0;
}

._canReset_jy5lu_97:hover ._iconSlot_jy5lu_83 {
  opacity: 0;
}
._canReset_jy5lu_97:hover ._iconSlotClose_jy5lu_84 {
  opacity: 1;
}

._downIcon_jy5lu_104 {
  height: 20px;
  width: 20px;
}

._chevronClose_jy5lu_109 {
  height: 16px;
  width: 16px;
}

._rotate_jy5lu_114 {
  transform: rotate(180deg);
}._popperPaper_6ck4f_1 {
  background: var(--surface-component);
  border: 1px solid var(--border-component);
  border-radius: 6px;
  padding: 12px;
  min-width: 140px;
  z-index: 1300;
  position: relative;
}
._popperPaper_6ck4f_1._dense_6ck4f_10 {
  padding: 6px;
}._container_1i5yo_1 {
  display: flex;
  flex-direction: column;
}

._input_1i5yo_6 {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #1e1e1e;
  color: #fff;
  border-color: var(--primary-color);
  font-size: 14px;
  outline: none;
  transition: border 0.2s ease, background 0.2s ease;
}
._input_1i5yo_6::placeholder {
  color: #aaa;
}
._input_1i5yo_6:focus {
  border-color: var(--primary-color);
  background: #222;
}

._btnsContainer_1i5yo_25 {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}._container_5luxy_1 {
  display: flex;
  flex-direction: column;
}

._btnsContainer_5luxy_6 {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}.rdrCalendarWrapper {
  box-sizing: border-box;
  background: #ffffff;
  display: inline-flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateDisplay{
  display: flex;
  justify-content: space-between;
}

.rdrDateDisplayItem{
  flex: 1 1;
  width: 0;
  text-align: center;
  color: inherit;
}

.rdrDateDisplayItem + .rdrDateDisplayItem{
    margin-left: 0.833em;
  }

.rdrDateDisplayItem input{
    text-align: inherit
  }

.rdrDateDisplayItem input:disabled{
      cursor: default;
    }

.rdrDateDisplayItemActive{}

.rdrMonthAndYearWrapper {
  box-sizing: inherit;
  display: flex;
  justify-content: space-between;
}

.rdrMonthAndYearPickers{
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rdrMonthPicker{}

.rdrYearPicker{}

.rdrNextPrevButton {
  box-sizing: inherit;
  cursor: pointer;
  outline: none;
}

.rdrPprevButton {}

.rdrNextButton {}

.rdrMonths{
  display: flex;
}

.rdrMonthsVertical{
  flex-direction: column;
}

.rdrMonthsHorizontal > div > div > div{
  display: flex;
  flex-direction: row;
}

.rdrMonth{
  width: 27.667em;
}

.rdrWeekDays{
  display: flex;
}

.rdrWeekDay {
  flex-basis: calc(100% / 7);
  box-sizing: inherit;
  text-align: center;
}

.rdrDays{
  display: flex;
  flex-wrap: wrap;
}

.rdrDateDisplayWrapper{}

.rdrMonthName{}

.rdrInfiniteMonths{
  overflow: auto;
}

.rdrDateRangeWrapper{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDateInput {
  position: relative;
}

.rdrDateInput input {
    outline: none;
  }

.rdrDateInput .rdrWarning {
    position: absolute;
    font-size: 1.6em;
    line-height: 1.6em;
    top: 0;
    right: .25em;
    color: #FF0000;
  }

.rdrDay {
  box-sizing: inherit;
  width: calc(100% / 7);
  position: relative;
  font: inherit;
  cursor: pointer;
}

.rdrDayNumber {
  display: block;
  position: relative;
}

.rdrDayNumber span{
    color: #1d2429;
  }

.rdrDayDisabled {
  cursor: not-allowed;
}

@supports (-ms-ime-align: auto) {
  .rdrDay {
    flex-basis: 14.285% !important;
  }
}

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  pointer-events: none;
}

.rdrInRange{}

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  pointer-events: none;
}

.rdrDayHovered{}

.rdrDayActive{}

.rdrDateRangePickerWrapper{
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.rdrDefinedRangesWrapper{}

.rdrStaticRanges{
  display: flex;
  flex-direction: column;
}

.rdrStaticRange{
  font-size: inherit;
}

.rdrStaticRangeLabel{}

.rdrInputRanges{}

.rdrInputRange{
  display: flex;
}

.rdrInputRangeInput{}
.rdrCalendarWrapper{
  color: #000000;
  font-size: 12px;
}

.rdrDateDisplayWrapper{
  background-color: rgb(239, 242, 247);
}

.rdrDateDisplay{
  margin: 0.833em;
}

.rdrDateDisplayItem{
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21);
  border: 1px solid transparent;
}

.rdrDateDisplayItem input{
    cursor: pointer;
    height: 2.5em;
    line-height: 2.5em;
    border: 0px;
    background: transparent;
    width: 100%;
    color: #849095;
  }

.rdrDateDisplayItemActive{
  border-color: currentColor;
}

.rdrDateDisplayItemActive input{
    color: #7d888d
  }

.rdrMonthAndYearWrapper {
  align-items: center;
  height: 60px;
  padding-top: 10px;
}

.rdrMonthAndYearPickers{
  font-weight: 600;
}

.rdrMonthAndYearPickers select{
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 30px 10px 10px;
    border-radius: 4px;
    outline: 0;
    color: #3e484f;
    background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>") no-repeat;
    background-position: right 8px center;
    cursor: pointer;
    text-align: center
  }

.rdrMonthAndYearPickers select:hover{
      background-color: rgba(0,0,0,0.07);
    }

.rdrMonthPicker, .rdrYearPicker{
  margin: 0 5px
}

.rdrNextPrevButton {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 0.833em;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #EFF2F7
}

.rdrNextPrevButton:hover{
    background: #E1E7F0;
  }

.rdrNextPrevButton i {
    display: block;
    width: 0;
    height: 0;
    padding: 0;
    text-align: center;
    border-style: solid;
    margin: auto;
    transform: translate(-3px, 0px);
  }

.rdrPprevButton i {
    border-width: 4px 6px 4px 4px;
    border-color: transparent rgb(52, 73, 94) transparent transparent;
    transform: translate(-3px, 0px);
  }

.rdrNextButton i {
    margin: 0 0 0 7px;
    border-width: 4px 4px 4px 6px;
    border-color: transparent transparent transparent rgb(52, 73, 94);
    transform: translate(3px, 0px);
  }

.rdrWeekDays {
  padding: 0 0.833em;
}

.rdrMonth{
  padding: 0 0.833em 1.666em 0.833em;
}

.rdrMonth .rdrWeekDays {
    padding: 0;
  }

.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{
  display: none;
}

.rdrWeekDay {
  font-weight: 400;
  line-height: 2.667em;
  color: rgb(132, 144, 149);
}

.rdrDay {
  background: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 0;
  padding: 0;
  line-height: 3.000em;
  height: 3.000em;
  text-align: center;
  color: #1d2429
}

.rdrDay:focus {
    outline: 0;
  }

.rdrDayNumber {
  outline: 0;
  font-weight: 300;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  top: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdrDayToday .rdrDayNumber span{
  font-weight: 500
}

.rdrDayToday .rdrDayNumber span:after{
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #3d91ff;
  }

.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{
      background: #fff;
    }

.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{
          color: rgba(255, 255, 255, 0.85);
        }

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  background: currentColor;
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  bottom: 5px;
}

.rdrSelected{
  left: 2px;
  right: 2px;
}

.rdrInRange{}

.rdrStartEdge{
  border-top-left-radius: 1.042em;
  border-bottom-left-radius: 1.042em;
  left: 2px;
}

.rdrEndEdge{
  border-top-right-radius: 1.042em;
  border-bottom-right-radius: 1.042em;
  right: 2px;
}

.rdrSelected{
  border-radius: 1.042em;
}

.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{
    border-top-left-radius: 1.042em;
    border-bottom-left-radius: 1.042em;
    left: 2px;
  }

.rdrDayEndOfMonth .rdrInRange,  .rdrDayEndOfMonth .rdrStartEdge,  .rdrDayEndOfWeek .rdrInRange,  .rdrDayEndOfWeek .rdrStartEdge{
    border-top-right-radius: 1.042em;
    border-bottom-right-radius: 1.042em;
    right: 2px;
  }

.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
    border-top-left-radius: 1.333em;
    border-bottom-left-radius: 1.333em;
    border-left-width: 1px;
    left: 0px;
  }

.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
   border-top-right-radius: 1.333em;
   border-bottom-right-radius: 1.333em;
   border-right-width: 1px;
   right: 0px;
 }

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  background: rgba(255, 255, 255, 0.09);
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
  pointer-events: none;
  border: 0px solid currentColor;
  z-index: 1;
}

.rdrDayStartPreview{
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 1.333em;
  border-bottom-left-radius: 1.333em;
  left: 0px;
}

.rdrDayInPreview{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.rdrDayEndPreview{
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-right-radius: 1.333em;
  border-bottom-right-radius: 1.333em;
  right: 2px;
  right: 0px;
}

.rdrDefinedRangesWrapper{
  font-size: 12px;
  width: 226px;
  border-right: solid 1px #eff2f7;
  background: #fff;
}

.rdrDefinedRangesWrapper .rdrStaticRangeSelected{
    color: currentColor;
    font-weight: 600;
  }

.rdrStaticRange{
  border: 0;
  cursor: pointer;
  display: block;
  outline: 0;
  border-bottom: 1px solid #eff2f7;
  padding: 0;
  background: #fff
}

.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{
      background: #eff2f7;
    }

.rdrStaticRangeLabel{
  display: block;
  outline: 0;
  line-height: 18px;
  padding: 10px 20px;
  text-align: left;
}

.rdrInputRanges{
  padding: 10px 0;
}

.rdrInputRange{
  align-items: center;
  padding: 5px 20px;
}

.rdrInputRangeInput{
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 4px;
  text-align: center;
  border: solid 1px rgb(222, 231, 235);
  margin-right: 10px;
  color: rgb(108, 118, 122)
}

.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{
    border-color: rgb(180, 191, 196);
    outline: 0;
    color: #333;
  }

.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{
  content: '';
  border: 1px solid currentColor;
  border-radius: 1.333em;
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0px;
  right: 0px;
  background: transparent;
}

.rdrDayPassive{
  pointer-events: none;
}

.rdrDayPassive .rdrDayNumber span{
    color: #d5dce0;
  }

.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{
    display: none;
  }

.rdrDayDisabled {
  background-color: rgb(248, 248, 248);
}

.rdrDayDisabled .rdrDayNumber span{
    color: #aeb9bf;
  }

.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{
    filter: grayscale(100%) opacity(60%);
  }

.rdrMonthName{
  text-align: left;
  font-weight: 600;
  color: #849095;
  padding: 0.833em;
}
.darkRangePicker .rdrDateRangeWrapper {
  background-color: black;
  font-family: "Kanit";
}

.darkRangePicker .rdrCalendarWrapper,
.darkRangePicker .rdrCalendarWrapper * {
  font-family: "Kanit", sans-serif !important;
}
.darkRangePicker .rdrDayNumber span {
  font-family: "Kanit", sans-serif !important;
  font-weight: 700;
}
.darkRangePicker .rdrWeekDay {
  font-family: "Kanit", sans-serif !important;
}
.darkRangePicker .rdrMonthName,
.darkRangePicker .rdrMonthPicker select,
.darkRangePicker .rdrYearPicker select {
  font-family: "Kanit", sans-serif !important;
}

.darkRangePicker .rdrMonthPicker select,
.darkRangePicker .rdrYearPicker select {
  background-color: black;
  color: white;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 28px;
  line-height: 28px;
  padding: 0 28px 0 6px;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.darkRangePicker .rdrStartEdge {
  background-color: var(--primary-color);
}

.rdrNextPrevButton {
  background-color: rgb(26, 25, 25);
}

.rdrPprevButton {
  border: 1px solid var(--primary-color);
}
.rdrPprevButton i {
  border-color: transparent var(--primary-color) transparent transparent;
}
.rdrPprevButton:hover {
  border-color: var(--primary-color) !important;
  background-color: transparent !important;
}

.rdrNextButton {
  border: 1px solid var(--primary-color);
}
.rdrNextButton i {
  border-color: transparent transparent transparent var(--primary-color);
}
.rdrNextButton:hover {
  border-color: var(--primary-color) !important;
  background-color: transparent !important;
}

.darkRangePicker .rdrDayStartPreview,
.darkRangePicker .rdrDayEndPreview,
.darkRangePicker .rdrDayInPreview {
  border-color: var(--primary-color) !important;
}

.darkRangePicker .rdrInRange,
.darkRangePicker .rdrEndEdge {
  background-color: var(--primary-color);
}

.darkRangePicker .rdrDayHovered {
  border-color: var(--primary-color) !important;
}

.darkRangePicker .rdrDayPassive {
  visibility: hidden;
  pointer-events: none;
}

.darkRangePicker .rdrDayPassive .rdrDayNumber span {
  display: none;
}

.darkRangePicker .rdrDayDisabled,
.darkRangePicker .rdrDay[aria-disabled=true],
.darkRangePicker .rdrDay[disabled] {
  opacity: 0.35;
  pointer-events: none;
  cursor: not-allowed;
  background-color: transparent !important;
}
.darkRangePicker .rdrDayDisabled .rdrDayNumber span,
.darkRangePicker .rdrDay[aria-disabled=true] .rdrDayNumber span,
.darkRangePicker .rdrDay[disabled] .rdrDayNumber span {
  color: #888 !important;
  opacity: 0.5;
}
.darkRangePicker .rdrDayDisabled,
.darkRangePicker .rdrDay[aria-disabled=true],
.darkRangePicker .rdrDay[disabled] {
  background: rgba(100, 100, 100, 0.15) !important;
}
.darkRangePicker .rdrDayDisabled:hover,
.darkRangePicker .rdrDay[aria-disabled=true]:hover,
.darkRangePicker .rdrDay[disabled]:hover {
  background-color: rgba(100, 100, 100, 0.15) !important;
  border-color: transparent !important;
  opacity: 0.35 !important;
}
.darkRangePicker .rdrDayDisabled.rdrDayStartPreview, .darkRangePicker .rdrDayDisabled.rdrDayEndPreview, .darkRangePicker .rdrDayDisabled.rdrDayInPreview, .darkRangePicker .rdrDayDisabled.rdrDayHovered,
.darkRangePicker .rdrDay[aria-disabled=true].rdrDayStartPreview,
.darkRangePicker .rdrDay[aria-disabled=true].rdrDayEndPreview,
.darkRangePicker .rdrDay[aria-disabled=true].rdrDayInPreview,
.darkRangePicker .rdrDay[aria-disabled=true].rdrDayHovered,
.darkRangePicker .rdrDay[disabled].rdrDayStartPreview,
.darkRangePicker .rdrDay[disabled].rdrDayEndPreview,
.darkRangePicker .rdrDay[disabled].rdrDayInPreview,
.darkRangePicker .rdrDay[disabled].rdrDayHovered {
  border-color: transparent !important;
  background-color: rgba(100, 100, 100, 0.15) !important;
}
.darkRangePicker .rdrDayDisabled.rdrStartEdge, .darkRangePicker .rdrDayDisabled.rdrEndEdge, .darkRangePicker .rdrDayDisabled.rdrInRange,
.darkRangePicker .rdrDay[aria-disabled=true].rdrStartEdge,
.darkRangePicker .rdrDay[aria-disabled=true].rdrEndEdge,
.darkRangePicker .rdrDay[aria-disabled=true].rdrInRange,
.darkRangePicker .rdrDay[disabled].rdrStartEdge,
.darkRangePicker .rdrDay[disabled].rdrEndEdge,
.darkRangePicker .rdrDay[disabled].rdrInRange {
  background-color: rgba(100, 100, 100, 0.15) !important;
}

.darkRangePicker .rdrDayNumber span {
  color: #fff;
}

.darkRangePicker .rdrStartEdge ~ .rdrDayNumber span,
.darkRangePicker .rdrEndEdge ~ .rdrDayNumber span,
.darkRangePicker .rdrInRange ~ .rdrDayNumber span {
  color: #000 !important;
}

.darkRangePicker .rdrDayToday .rdrDayNumber span::after {
  background-color: var(--primary-color) !important;
}

.darkRangePicker .rdrDayToday .rdrStartEdge ~ .rdrDayNumber span::after,
.darkRangePicker .rdrDayToday .rdrEndEdge ~ .rdrDayNumber span::after,
.darkRangePicker .rdrDayToday .rdrInRange ~ .rdrDayNumber span::after {
  background-color: #000 !important;
}

.darkRangePicker .rdrDayDisabled.rdrDayToday .rdrDayNumber span::after {
  display: none;
}._container_1g33r_1 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

._stickyHeader_1g33r_7 {
  position: sticky;
  top: 0;
  z-index: 10;
}

._sectionLabel_1g33r_13 {
  padding: 8px 3px 4px 3px;
  font-size: 12px;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
._sectionLabel_1g33r_13._dense_1g33r_21 {
  padding: 4px 3px 2px 3px;
}

._sectionDivider_1g33r_25 {
  height: 1px;
  background-color: #333;
  margin: 8px 0;
}
._sectionDivider_1g33r_25._dense_1g33r_21 {
  margin: 4px 0;
}

._optionsListContainer_1g33r_34 {
  overflow-y: auto;
}
._optionsListContainer_1g33r_34::-webkit-scrollbar {
  width: 7px;
}
._optionsListContainer_1g33r_34 {
  /* Chrome, Edge, Safari */
}
._optionsListContainer_1g33r_34::-webkit-scrollbar {
  width: 8px;
}
._optionsListContainer_1g33r_34::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 8px;
}
._optionsListContainer_1g33r_34::-webkit-scrollbar-thumb {
  background-color: rgb(103, 103, 103);
  border-radius: 8px;
}
._optionsListContainer_1g33r_34 {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(127, 127, 127) #000;
}

._optionItem_1g33r_60 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 3px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
._optionItem_1g33r_60:hover {
  background: rgba(65, 255, 136, 0.1);
}
._optionItem_1g33r_60._optionItemDisabled_1g33r_72:hover {
  background: transparent;
}
._optionItem_1g33r_60._dense_1g33r_21 {
  padding: 4px 3px;
  gap: 6px;
}

/* Checkbox */
._checkbox_1g33r_81 {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 2px solid #777;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

/* Checkbox checked state */
._checkboxChecked_1g33r_94 {
  border-color: var(--primary-color);
  background: var(--primary-color);
}
._checkboxChecked_1g33r_94::after {
  content: "";
  width: 4px;
  height: 7px;
  border: 2px solid #000;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  margin-top: -1px;
}

/* Radio */
._radio_1g33r_110 {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #777;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

/* Radio checked state */
._radioChecked_1g33r_123 {
  border-color: var(--primary-color);
}
._radioChecked_1g33r_123::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
}

._optionLabel_1g33r_134 {
  font-size: 14px;
}

._searchInput_1g33r_138 {
  margin-bottom: 8px;
  width: 85%;
  padding: 8px 10px;
  background-color: #1a1a1a;
  border: 1px solid #5b5b5b;
  border-radius: 4px;
}

._noResult_1g33r_147 {
  padding: 8px;
  color: #888;
  text-align: center;
}

/* Sticky selection hint (ALWAYS rendered, so no layout shift) */
._selectionHint_1g33r_154 {
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px;
  border-radius: 6px;
  background: rgba(65, 255, 136, 0.08);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

._selectionHintShow_1g33r_168 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Keep space but visually remove chrome when not applicable */
._selectionHintHidden_1g33r_175 {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  border-color: transparent;
  background: transparent;
}

._selectionHintText_1g33r_183 {
  font-size: 12px;
  color: #cfcfcf;
}

._arrowUp_1g33r_188 {
  color: var(--primary-color);
  font-weight: 700;
}

._selectionHintBtn_1g33r_193 {
  background: transparent;
  border: 1px solid rgba(65, 255, 136, 0.35);
  color: var(--primary-color);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}
._selectionHintBtn_1g33r_193:hover {
  background: rgba(65, 255, 136, 0.12);
}
._selectionHintBtn_1g33r_193:disabled {
  opacity: 0.4;
  cursor: default;
}

._btnsContainer_1g33r_209 {
  display: flex;
  justify-content: flex-end;
}._pillsRow_j9czw_1 {
  display: flex;
  flex-wrap: wrap;
  column-gap: 4px;
  row-gap: 6px;
  align-items: flex-start;
}._columnsPopper_13hlc_1 {
  position: relative;
  width: 260px;
  max-height: 500px;
  overflow-y: auto;
  background: #0b0b0b;
  color: white;
  border-radius: 6px;
  padding: 40px 8px 10px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
  /* Chrome, Edge, Safari */
}
._columnsPopper_13hlc_1::-webkit-scrollbar {
  width: 8px;
}
._columnsPopper_13hlc_1::-webkit-scrollbar-track {
  background: #000000;
  border-radius: 8px;
}
._columnsPopper_13hlc_1::-webkit-scrollbar-thumb {
  background-color: rgb(103, 103, 103);
  border-radius: 8px;
}
._columnsPopper_13hlc_1 {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(127, 127, 127) #000;
}

._searchContainer_13hlc_30 {
  position: fixed;
  background: #0b0b0b;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid rgb(47, 43, 43);
}

._list_13hlc_40 {
  overflow: auto;
}

._item_13hlc_44 {
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}

._footerContainer_13hlc_51 {
  background: #0b0b0b;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid rgb(47, 43, 43);
  width: 100%;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
._footerContainer_13hlc_51 button {
  background: transparent;
  color: var(--primary-color);
}
._footerContainer_13hlc_51 button:hover {
  outline: none;
  border-color: black !important;
}
._footerContainer_13hlc_51 ._content_13hlc_71 {
  padding: 0 8px 0;
}._container_x2okd_1 {
  background-color: #060707;
  padding: 5px;
  border-bottom: 1px solid #1a1a1a;
}

._btnsContainer_x2okd_7 {
  display: flex;
  justify-content: flex-end;
  column-gap: 10px;
}
._btnsContainer_x2okd_7 ._svgActiveColor_x2okd_12 {
  color: var(--primary-color) !important;
}

._filtersContainer_x2okd_16 {
  width: 100%;
  overflow: hidden;
  margin-top: 5px;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  border-radius: 8px;
}

._open_x2okd_26 {
  max-height: 300px;
  opacity: 1;
}

._filtersContent_x2okd_31 {
  column-gap: 4px;
  flex-wrap: wrap;
  row-gap: 6px;
  display: flex;
  justify-items: flex-start;
}._container_1r2nf_1 {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}
._container_1r2nf_1:hover ._iconBtn_1r2nf_9 {
  opacity: 1;
}
._container_1r2nf_1 ._active_1r2nf_12 {
  opacity: 1 !important;
}

._left_1r2nf_16 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._title_1r2nf_22 {
  font-size: 14px;
  font-weight: 500;
}

._iconBtn_1r2nf_9 {
  background: transparent;
  border: none;
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
._iconBtn_1r2nf_9:hover {
  background: rgba(255, 255, 255, 0.08);
}
._iconBtn_1r2nf_9 svg {
  width: 16px;
  height: 16px;
}

._popperPaper_1r2nf_49 {
  background: #111;
  border-radius: 6px;
  padding: 12px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
}
._popperPaper_1r2nf_49 ._restBtnContainer_1r2nf_57 {
  display: flex;
  justify-content: flex-end;
}
._popperPaper_1r2nf_49 ._restBtnContainer_1r2nf_57 button {
  margin-top: 10px;
  padding: 0;
  font-size: 14px;
  background-color: transparent;
  color: var(--primary-color);
  cursor: pointer;
}
._popperPaper_1r2nf_49 ._restBtnContainer_1r2nf_57 button:focus {
  outline: none;
}
._popperPaper_1r2nf_49 ._restBtnContainer_1r2nf_57 button:hover {
  border: 1px solid transparent;
}
._popperPaper_1r2nf_49 ._restBtnContainer_1r2nf_57 button:disabled {
  color: #fff;
  opacity: 0.3;
  cursor: not-allowed;
}._plate_19b61_1 {
  position: relative;
  height: auto;
  width: auto;
  max-height: 50px;
  min-height: 50px;
  padding: 1px;
  padding-right: 5px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.2s ease-in-out;
  background: none;
  user-select: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
._plate_19b61_1::before {
  content: "";
  position: absolute;
  top: 0.75px;
  left: 0.75px;
  right: 0.75px;
  bottom: 0.75px;
  background: var(--plate-border-color, var(--grey-line));
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transform: scale(1.08);
  z-index: -2;
}
._plate_19b61_1::after {
  content: "";
  position: absolute;
  top: 0.75px;
  left: 0.75px;
  right: 0.75px;
  bottom: 0.75px;
  background: var(--plate-bg-color, #272c32);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  z-index: -1;
}
._plate_19b61_1._active_19b61_42::before {
  background: var(--plate-border-color, var(--primary-color));
}
._plate_19b61_1._withTimestamp_19b61_45 {
  max-height: 45px;
  min-height: 45px;
}
._plate_19b61_1._small_19b61_49 {
  max-height: 36px;
  min-height: 36px;
  padding-right: 4px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
._plate_19b61_1._small_19b61_49::before, ._plate_19b61_1._small_19b61_49::after {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
._plate_19b61_1._xs_19b61_58 {
  max-height: 22px;
  min-height: 22px;
  padding: 1px;
  padding-right: 3px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
._plate_19b61_1._xs_19b61_58::before, ._plate_19b61_1._xs_19b61_58::after {
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}

._plateIcon_19b61_69 {
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 33px;
  margin-right: 0;
  box-sizing: border-box;
  clip-path: polygon(12px 0, 0 12px, 0 100%, 100% 100%, 100% 0);
}
._plateIcon_19b61_69 img {
  display: block;
  object-fit: contain;
}
._plate_19b61_1._small_19b61_49 ._plateIcon_19b61_69 {
  width: 24px;
  padding: 0 3px;
  clip-path: polygon(8px 0, 0 8px, 0 100%, 100% 100%, 100% 0);
}
._plate_19b61_1._xs_19b61_58 ._plateIcon_19b61_69 {
  width: 18px;
  padding: 0 2px;
  clip-path: polygon(6px 0, 0 6px, 0 100%, 100% 100%, 100% 0);
}
._plateIcon_19b61_69._noIcon_19b61_94 {
  width: 15px;
  padding: 0;
}
._plate_19b61_1._small_19b61_49 ._plateIcon_19b61_69._noIcon_19b61_94, ._plate_19b61_1._xs_19b61_58 ._plateIcon_19b61_69._noIcon_19b61_94 {
  width: 15px;
}

._plateInner_19b61_102 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: 8px;
}
._plate_19b61_1._small_19b61_49 ._plateInner_19b61_102 {
  padding-left: 6px;
}
._plate_19b61_1._xs_19b61_58 ._plateInner_19b61_102 {
  padding-left: 3px;
}

._plateDetails_19b61_116 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

._plateLabel_19b61_123 {
  margin: 0;
  padding: 0;
  font-size: var(--plate-font-size, 15px);
  font-family: "Kanit";
  display: flex;
  align-items: center;
}
._plate_19b61_1._small_19b61_49 ._plateLabel_19b61_123 {
  font-size: var(--plate-font-size, 14px);
}
._plate_19b61_1._xs_19b61_58 ._plateLabel_19b61_123 {
  font-size: var(--plate-font-size, 11px);
}

._textLarge_19b61_138 {
  font-size: 20px !important;
}
._plate_19b61_1._small_19b61_49 ._textLarge_19b61_138 {
  font-size: 18px !important;
}
._plate_19b61_1._xs_19b61_58 ._textLarge_19b61_138 {
  font-size: 15px !important;
}

._plateTimestamp_19b61_148 {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-family: "Kanit";
  color: var(--plate-text-color, rgba(255, 255, 255, 0.55));
}

._plateFault_19b61_156 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
}
._plate_19b61_1._small_19b61_49 ._plateFault_19b61_156 {
  width: 18px;
}
._plate_19b61_1._xs_19b61_58 ._plateFault_19b61_156 {
  width: 14px;
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
:root {
  --table-font-size: 14px;
  --border-radius: 5px;
  --margin-top-sm: 50px;
  --header-padding: 5px;
  --header-height: 40px;
  --smaller-header-height: 25px;
}
:root {
  --border-radius: 5px;
  --text-field-height: 30px;
  --text-field-padding: 5px;
  --text-field-padding-left: 10px;
  --font-family: 'Kanit';
  --top-margin-table-page: 30px;
  --table-width-expanded: 97.5%;
  --table-width-collapsed: 98%;
  --page-height-desktop: 94.5vh;
  --page-height-laptop: 92vh;
}
.equipmentSection {
  background-color: var(--muted-black);
  width: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  border-radius: var(--border-radius);
  margin-bottom: 12px;
  transition: box-shadow 0.2s;
}
.equipmentSection h4 {
  margin: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #fff;
}
.mainAvSection {
  width: 100%;
  margin: 0px 10px 0;
  background-color: var(--darker-grey);
  padding: 16px;
  border-radius: var(--border-radius);
  box-sizing: border-box;
}
.mainAvSection h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  color: #fff;
}
.avSectionClass {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 10%;
  gap: 1px;
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.lengthClass {
  display: inline-block;
  border-radius: 6px;
  padding: 4px 10px;
  min-width: 35px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  box-sizing: border-box;
}
.equipItem {
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background-color 0.2s;
}
.equipItem:hover {
  background-color: #f0f0f0;
}
.scheduledDown {
  width: 50%;
  margin: 10px 10px 0 10px;
  background-color: var(--darker-grey);
  padding: 16px;
  border-radius: 8px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.scheduledDown h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: #fff;
}
.avSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.eachSectionClass {
  background-color: var(--blue-tint-grey);
  border-radius: 5px;
  padding-left: 10px;
}
.schedUnschedData {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 50%;
  height: 100%;
}
.eachSectionClass {
  width: 11%;
  height: 16vh;
  padding: 10px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.fleetSectionHealth {
  width: 100vw;
  height: auto;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 10px;
}
.fleetSectionHealth h3 {
  margin: 2px;
  padding: 0px;
  text-align: left;
}
.healthBtn {
  text-align: center;
  padding: 2px;
  min-height: 30px;
  min-width: 120px;
}
.itemChip {
  width: 120px;
  padding: 2px;
  font-size: 26px !important;
  background-color: rgba(255, 255, 255, 0.947);
  border-radius: 15px;
  height: 70px !important;
}
.chipLengthClass {
  padding: 0px;
  height: 40px;
}
.chipLengthClass :hover {
  background-color: blue;
}
.donut-row {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 4px;
}
.availabilityHealthWrapper {
  width: 49.5%;
  background-color: var(--muted-black);
  border-radius: 4px;
}
.scheduledDataClass {
  background-color: var(--muted-black);
  padding: 10px;
  border-radius: 5px;
  min-height: 15vh;
  box-sizing: border-box;
}
.availableData {
  background-color: var(--muted-black);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 5px;
  min-height: 36vh;
  width: 100%;
}
.fullData {
  margin-top: 10px;
  margin-right: 10px;
}
.rowClass {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.mainBodyTables {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0px;
  padding: 0px;
}
.columnClass {
  align-items: center;
  justify-content: center;
  height: 100%;
}
@media (max-width: 1280px) {
  .fleetSectionHealth {
    margin-bottom: 10px;
    height: auto;
  }
  .eachSectionClass {
    width: 23.5%;
  }
  .tableBox {
    height: 89vh;
  }
  .avSectionClass {
    width: 20%;
  }
  .availableData {
    min-height: 35vh;
  }
  .scheduledDataClass {
    min-height: 8vh;
  }
  .itemChip {
    width: 120px;
    padding: 2px;
    font-size: 20px !important;
    background-color: rgba(255, 255, 255, 0.947);
    border-radius: 15px;
    height: 40px !important;
  }
}
.tsClass {
  width: 100%;
}
.tsClass p {
  font-size: 12px;
  line-height: 1;
  text-align: left;
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
.headerClass {
  width: 100%;
  height: 8vh;
  padding: 2px;
  top: 0;
  background-color: black;
  display: flex;
  gap: 15px;
  align-items: center;
  position: sticky;
  z-index: 1000;
}
/* Logo styling */
.logo {
  margin-top: 5px;
  height: 30px;
  width: 170px;
  /* Align to the left (no need for flex-start because it's naturally on the left) */
}
/* Icons container styling */
.icons {
  margin-right: 20px;
  margin-top: 10px;
  display: flex; /* Flexbox for icons */
  justify-content: flex-start; /* Push icons to the right */
  align-items: center; /* Center icons vertically */
  gap: 15px; /* Space between icons */
  color: white;
}
/* Individual icon styling */
.icon {
  font-size: 1.2rem;
  color: white;
  cursor: pointer; /* Optional: Makes icons clickable */
}
@media (max-width: 2560px) {
  .headerImage {
    height: 30px;
  }
  .headerImageTruck {
    height: 45px;
  }
  .gridClass {
    height: "65%";
    width: "100%";
  }
}
@media (max-width: 2560px) {
  .headerImage {
    height: 30px;
  }
  .headerImageTruck {
    height: 45px;
  }
}
@media (max-width: 1920px) {
  .headerImage {
    height: 25px;
  }
  .headerImageTruck {
    height: 35px;
  }
  .gridClass {
    height: 65%;
    width: 100%;
  }
}
@media (max-width: 1281px) {
  .headerImage {
    height: 25px;
  }
  .headerImageTruck {
    height: 35px;
  }
  .gridClass {
    height: 50%;
  }
  .statusContainer {
    z-index: 40000000000000;
    overflow-x: visible;
  }
  .floating-button {
    position: relative;
    top: 0.5%;
  }
  .semiCircleButton {
    min-width: 10ch;
  }
}
.commonButtonStyle {
  float: right;
  padding: 5px;
  margin: 15px;
  width: 100px;
  cursor: pointer;
}
/* VerticalNav.css */
.vertical-nav {
  background-color: #333; /* Navigation bar background */
  padding: 20px;
  width: 10px; /* Fixed width for the vertical navigation */
  height: 190vh; /* Full height of the viewport */
  position: fixed; /* Make it stick to the viewport */
  top: 0; /* Align to the top of the viewport */
  right: 0; /* Position on the right side */
}
.nav-list {
  list-style-type: none;
  margin: 0;
  margin-top: 50px;
  padding: 0;
  display: flex;
  flex-direction: column; /* Arrange items vertically */
}
.nav-item {
  margin: 10px 0; /* Spacing between items */
}
.nav-link {
  text-decoration: none;
  color: white;
  font-size: 16px;
  padding: 1px 1px;
  display: block; /* Ensures full clickable area */
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nav-link:hover {
  background-color: #555; /* Background on hover */
  color: #fff; /* Text color on hover */
  border-radius: 5px;
}
.lineChartClass {
  border-color: #555;
  border: 1px solid #555555;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
}
.chartContainer {
  display: flex;
  flex-direction: column; /* For vertical alignment */
  align-items: center; /* Horizontally center */
  justify-content: center; /* Vertically center */
  /* Full page height */
  text-align: center; /* Center-align the label */
}
.mainButton {
  background-color: transparent;
  color: var(--background-color);
  padding: 5px;
  margin: 10px;
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}
.mainButton.active {
  background-color: #ffffff; /* White background */
  color: #000000; /* Black text */
}
.mainButton:not(.active) {
  background-color: transparent; /* Reset other buttons */
  color: var(--background-color);
}
.pageLinks {
  align-items: center;
  width: 60vw;
  display: flex;
  justify-content: center;
}
.changeViewBtn,
.changeConfigBtn {
  background-color: var(--primary-secondary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  width: 60px;
  height: auto;
  z-index: 5;
  box-shadow: -4px 0 5px -2px var(--primary-color), 4px 0 5px -2px var(--primary-color);
  transform: skew(-10deg);
  border: none;
  outline: none;
  cursor: pointer;
}
.changeViewBtn img,
.changeConfigBtn img {
  transform: skew(10deg);
}
.changeConfigBtn {
  background-color: var(--background-color);
  width: 180px;
  margin-right: 20px;
}
.changeViewBtn:hover,
.changeConfigBtn:hover {
  cursor: pointer;
}
.screenViewIcons {
  display: flex;
  flex-direction: row; /* Align items in a row */
  gap: 0px; /* Optional: Add space between icons */
  justify-content: center; /* Optional: Center the icons horizontally */
  align-items: center; /* Optional: Align the icons vertically */
}
.mainContainerClass {
  border: 1px solid var(--darker-grey);
  border-radius: 10px;
  height: 75vh;
  margin-left: 4vh;
  margin-top: 2vh;
}
.mainScreenWidget,
.dragDropWidget {
  padding: 0px; /* Optional: Add some padding */
}
.mainScreenWidget {
  width: 70vw;
  margin-right: 2vh;
  text-align: center;
}
.dragDropWidget {
  width: 15vw;
  padding: 0px;
  margin: 10px;
  overflow-y: hidden;
  overflow-x: hidden;
}
.rectangle {
  width: 100vw; /* Set rectangle width */
  height: 35vh; /* Set rectangle height */
  background-color: #2c2b2b; /* Set rectangle color */
  border: 1px solid #edecec; /* Optional: Add border */
  flex: 1;
  margin-left: 20px;
  border-radius: 10px;
  border: 1px dashed rgb(197, 48, 48);
  display: inline-block; /* Ensure rectangles are inline */
  display: flex; /* Enables Flexbox layout */
  flex-wrap: wrap; /* Allows items to wrap to the next line if there's not enough space */
  gap: 10px; /* Adds spacing between items */
  justify-content: space-between; /* Distributes items evenly */
}
.dragDropRectangle {
  background-size: cover;
  background-position: center;
  border: "1px solid #ddd";
  height: "auto";
  width: 15vw;
  min-height: 10vh;
  margin-bottom: 1.5vh;
  cursor: grab;
}
.layout {
  height: 60%;
}
.alertBtn {
  background-color: transparent;
  color: white;
  padding: 2px;
  width: 10vh;
}
#tableDashboard {
  color: var(--background-color);
  width: 95vw;
  padding: 20px;
}
.baseTable {
  background-color: var(--primary-secondary-color);
  padding: 20px;
  border-collapse: collapse;
}
.alertBtn th,
.baseTable td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Lighter lines */
}
#tableHeader th {
  padding: 20px 25px;
}
.baseTable td:nth-child(1),
.baseTable td:nth-child(5) {
  text-align: center; /* Center align Unit No and Timestamp */
}
.baseTable td:nth-child(6) {
  text-align: right; /* Align status button to the right */
}
.baseTable tr:nth-child(even) {
  background-color: rgba(197, 197, 197, 0.145); /* Slightly different shade */
}
.baseTable tr:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Highlight on hover */
  transition: background 0.3s ease-in-out;
}
.custom-toast {
  background: linear-gradient(45deg, #1a3b1c, #00ff99); /* Custom background */
  border-radius: 10px;
}
.custom-toast-body {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background-color: black;
}
.filterLabel {
  color: white;
}
@media (max-width: 1280px) {
  .textClass {
    font-size: 14px;
  }
  .dragDropRectangle {
    min-height: 8vh;
    margin-bottom: 1.5vh;
    cursor: grab;
  }
}
.semiCircleDock {
  position: fixed;
  align-items: center;
  height: 39px;
  top: 0;
  left: 0;
  background: var(--graphite);
  display: flex;
  width: 100%;
  gap: 15px;
  box-shadow: 0px 0.5px 5px 1px var(--primary-color);
  z-index: 300;
  padding: 0px;
  box-sizing: border-box;
  overflow: visible;
  border-radius: 5px;
  flex-wrap: nowrap;
}
.logoutDock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px; /* Increased padding */
  margin-bottom: 4px;
  border-radius: 8px;
  width: 90%;
  cursor: pointer;
  position: relative;
}
.logoutDock.collapsed {
  justify-content: center;
  width: 100%;
  padding: 10px 0;
  gap: 0;
}
.logoutDock.collapsed p {
  display: none !important;
  flex: none;
  width: 0;
}
.logoutDock img:first-child {
  height: 25px;
  width: 25px;
  opacity: 0.8;
}
.logoutDock img:hover {
  cursor: pointer;
}
.logoutDock p {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: #e8e8e8;
  letter-spacing: 0.3px;
}
.semiCircleDock {
  width: 100%;
}
.semiCircleDock::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  border-radius: 5px;
  background: black;
  transform: skewX(-10deg);
  box-shadow: 4px 0px 10px -2px var(--primary-color);
  transform-origin: bottom right;
  z-index: -1;
}
.pageTitle,
.pageTitle::before,
.pageTitle::after {
  box-sizing: content-box !important;
}
.logoutIcon,
.logoutIcon::before,
.logoutIcon::after {
  box-sizing: content-box !important;
}
.semiCircleButton,
.semiCircleButton::before,
.semiCircleButton::after {
  box-sizing: content-box !important;
}
.pageNames {
  display: flex;
  flex-direction: row;
  gap: 5px;
  justify-content: flex-start;
  width: auto;
  flex: 0.5;
}
.semiCircleButton {
  background: white;
  color: black;
  padding: 0px 5px;
  border-radius: 5px;
  cursor: pointer;
  width: 9.5vh;
  transition: 0.3s;
  font-size: 14px;
  margin-left: 1px;
  transform: skew(-10deg);
}
.semiCircleButton span {
  transform: skew(10deg);
  display: inline-block;
}
.semiCircleButton.active {
  background: var(--primary-color);
}
.verticalDivider {
  position: relative;
  width: 5px;
  height: 25px;
  background-color: var(--primary-color);
  margin: "0 0px";
  align-self: "center";
  transform: skew(-10deg);
}
.floating-button {
  position: relative;
  background: var(--graphite);
  padding: 0px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  padding: 13px;
  box-sizing: border-box;
  cursor: pointer;
  width: auto;
  height: 30px;
  transition: all 0.3s ease-in-out;
  border: 0px solid var(--primary-color);
}
.floating-button img {
  width: 20px;
  height: 20px;
}
.floating-button img:hover,
.floating-button icon:hover {
  transform: scale(1.15);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.semiCircleDockMini {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  height: 25px;
  flex-direction: row;
  flex: 0.1;
  height: auto;
  background: black;
  position: relative; /* needed for internal skew */
}
.skewTail {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  border-radius: 5px;
  background: black;
  transform: skewX(-10deg);
  box-shadow: 0px 0px 10px -2px var(--primary-color);
  transform-origin: bottom right;
  z-index: -1;
}
.wholeStatus {
  display: flex;
  margin: 0px;
  padding: 0px;
  gap: 3px;
  justify-content: left;
  text-align: center;
}
.mainCategory h5 {
  margin: 0px;
  background-color: var(--darker-grey);
  margin-left: 2px;
  height: 50px;
  text-align: center;
  align-items: center;
  position: sticky;
  top: 0;
}
.mainCategory ul {
  margin: 0px;
  padding: 0px;
}
.mainCategory li {
  list-style: none;
  align-items: left;
  text-align: left;
  justify-content: left;
  border: 1px solid var(--darker-grey);
  border-radius: 5px;
  margin: 1px;
  padding: 3px;
  display: flex;
  font-size: 12px;
  cursor: pointer;
}
.statusContainer {
  display: flex;
  max-height: 500px;
  overflow-x: visible;
  overflow-y: hidden;
}
.tick {
  right: 0;
  margin-right: auto;
  padding-left: 10px;
  align-items: right;
  font-size: 14px;
  font-weight: bold;
  color: white;
}
.selected {
  background-color: grey;
}
.loader-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.loader {
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top: 5px solid #3498db; /* Blue color */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.confirm-btn,
.cancel-btn {
  padding: 2px;
  margin: 2px;
  width: 80px;
  margin-right: 10px;
}
.globalBtn {
  padding: 5px;
  font-size: 14px;
  border-radius: 3px;
}
.viewMappingImgWidget {
  margin: 0;
  padding-left: 5px;
  background-color: var(--graphite);
  width: auto;
  min-width: 20%;
  box-shadow: rgba(255, 255, 255, 0.25) 0px 13px 27px -5px, rgba(255, 255, 255, 0.3) 0px 8px 16px -8px;
  border-radius: 2px 2px 25px 2px;
}
.viewMappingImgWidget p {
  margin: 0px;
  font-size: 14px;
}
.alertContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border: 1px solid grey;
  max-width: 160px;
  min-width: 150px;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.alertContainer:hover {
  transform: scale(1.05);
}
.alertIcon {
  font-size: 20px; /* optional: control icon size */
  color: #e63946; /* optional: make it stand out */
}
.alertText {
  margin: 0;
  font-size: 16px;
}
.alertNumber {
  margin-left: 6px;
  font-weight: bold;
  font-size: 18px;
  color: #ebebeb;
}
.alertNotifTables {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
.insideContainer {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}
.rightSideDock {
  position: fixed;
  top: 0;
  right: 0;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 10px 10px 10px;
  box-shadow: 0px 1px 10px 1px var(--primary-color);
  z-index: 300;
  overflow: visible;
  border-radius: 5px;
}
.loader-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-wrapper img {
  width: 50%;
  height: 50%;
  z-index: 2;
}
.floatingMenuWrapper {
  margin-left: 12px;
  display: flex;
  flex: 2;
  justify-content: flex-end;
  flex-direction: row;
  position: relative;
  background-color: var(--graphite);
  height: 100%;
}
.circular-spinner {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-top: 5px solid #00ff99;
  border-radius: 50%;
  animation: spin 3s linear infinite, glow 1.5s ease-in-out infinite alternate;
  z-index: 1;
  box-shadow: 0 0 10px #00ff99;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes glow {
  0% {
    box-shadow: 0 0 5px #00ff99, 0 0 10px #00ff99;
  }
  100% {
    box-shadow: 0 0 20px #00ff99, 0 0 40px #00ff99;
  }
}
.alert-message-cell {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 12px;
}
.toolTipClass {
  background-color: #000;
}
/* Add this to your main CSS or SCSS */
.popup-fade-in {
  animation: fadeInSlide 0.1s linear;
}
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-10px); /* slide slightly from above */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.appLayout {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
/* Main page content */
.mainContentWrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.topBarTitle {
  height: 50px; /* fixed height */
  flex-shrink: 0; /* don’t let flex shrink it */
  background-color: var(--surface-shell);
  border-bottom: 1px solid var(--border-shell);
  color: white;
  display: flex;
  font-size: 20px;
  align-items: center;
  padding-left: 5px;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.topBarTitle .nv-root button:hover,
.topBarTitle .nv-root button:focus,
.topBarTitle .nv-root button:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
}
.mainContentArea {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, margin-right 0.25s ease, margin-left 0.25s ease;
}
.mainReportPage {
  flex: 1;
  min-height: 0; /* 👈 prevents the child from overflowing */
  width: 100%;
  box-sizing: border-box; /* keeps inner spacing predictable */
}
:root {
  --table-font-size: 14px;
  --border-radius: 5px;
  --margin-top-sm: 50px;
  --header-padding: 5px;
  --header-height: 40px;
  --smaller-header-height: 25px;
}
.excContainer {
  display: flex;
  flex-direction: row;
  margin: 0px;
  height: 40%;
  align-items: stretch;
}
.locationMainContainer strong {
  text-align: left;
  display: block;
}
.locationMainContainer .locationContainer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 10px;
}
.mainTruckFormContainer {
  padding: 5px;
  background-color: var(--dark-matter);
}
.mainTruckFormContainer h3 {
  margin: 0px;
}
.headerSectionTruckForm {
  display: flex;
  /* Add relative positioning to the container */
  align-items: center; /* vertically center the items */
  justify-content: center; /* horizontally center the content */
  height: auto;
  margin: 0 0 10px 2px;
  background-color: var(--darker-grey);
  border-radius: 5px;
  position: sticky;
  top: 0;
  padding: 0 15px; /* Add some padding to prevent text touching edges */
}
.headerSectionTruckForm h3 {
  margin: 0;
  padding: 0;
  /* The h3 doesn't need special positioning as it will be centered by the parent's justify-content */
}
.headerSectionTruckForm .iconButton {
  position: absolute; /* Position the icon absolutely */
  right: 15px; /* Place it 15px from the right edge */
  cursor: pointer; /* Add pointer cursor for better UX */
}
.healthSectionTruckForm {
  display: flex;
  position: relative; /* Add relative positioning to the container */
  align-items: center; /* vertically center the items */
  justify-content: left; /* horizontally center the content */
  height: var(--header-height);
  margin: 0 0 2px 2px;
  background-color: var(--darker-grey);
  border-radius: 5px;
  padding: var(--header-padding);
}
.healthSectionTruckForm h3 {
  margin: 0;
  padding: 0;
}
.healthSectionTruckForm .iconButton {
  position: absolute; /* Position the icon absolutely */
  right: 15px; /* Place it 15px from the right edge */
  cursor: pointer; /* Add pointer cursor for better UX */
}
.excavatorHeaders {
  background-color: var(--blue-tint-grey);
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  text-align: center;
}
.locationHeaders {
  background-color: var(--blue-tint-grey);
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 5px;
  text-align: center;
}
.excavatorCategories {
  padding: 3px;
  height: 100%;
  width: 100vw;
  margin-bottom: 10px;
  align-items: center;
  align-self: center;
  font-size: 16px;
  justify-content: center;
  border-radius: 5px;
  margin-right: 0px;
  margin-left: 0px;
}
.locationCategories {
  padding: 3px;
  height: 100%;
  margin-bottom: 10px;
  align-items: center;
  align-self: center;
  font-size: 16px;
  justify-content: center;
  border-radius: 5px;
  margin-right: 0px;
  margin-left: 0px;
}
.truckItem {
  position: relative; /* for absolute positioning the close icon */
  background-color: var(--primary-color);
  border-radius: 5px;
  padding: 1px;
  width: 90px !important;
  color: black;
  font-size: 14px;
  margin-top: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center; /* centers the text */
  transition: transform 0.2s ease;
}
.truckItem:hover {
  transform: scale(1.05); /* makes it slightly bigger */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* optional for more pop */
  z-index: 2; /* ensures it appears above other elements if needed */
}
.truckList {
  gap: 1px;
  min-height: 18vh;
  max-height: 23vh;
  background-color: var(--darker-grey);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  justify-content: flex-start;
}
.unassignedTruckContainer {
  display: flex;
  width: 100%;
  flex-direction: column;
  height: auto;
  max-height: 40%;
  min-height: 10%;
  text-align: left;
  border-radius: 5px;
}
.unassignedTruckContainer strong {
  margin-top: 10px;
  margin-bottom: 10px;
}
.productionPageWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.unassignedTruckItem {
  width: 10%;
  text-align: center;
  border-radius: 5px;
  margin: 1px;
  height: 25px;
  cursor: pointer;
  background-color: var(--blue-tint-grey);
}
.truckList2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-radius: 5px;
  padding: 2px;
  background-color: var(--darker-grey);
  height: 100%;
  min-height: 3vh;
}
.btn {
  padding: 10px;
  bottom: 0;
  left: 0;
}
.thHeader {
  font-size: 15px;
}
@media (max-width: 1281px) {
  .unassignedTruckContainer {
    min-height: 10%;
  }
  .tdButton {
    min-height: 5vh;
  }
  .excavator-table-container {
    height: 70vh;
  }
  .healthSectionTruckForm {
    height: var(--smaller-header-height);
  }
}
.excavator-table-container {
  width: 100%;
  box-sizing: border-box;
  padding: 3px;
  height: auto;
}
.excavator-table {
  min-width: 720px;
  width: 100%;
  color: #fff;
}
.excavator-table thead tr {
  background-color: var(--dark-matter);
  text-align: left;
  font-size: 14px;
  text-transform: uppercase;
}
.excavator-table th,
.excavator-table td {
  padding: 5px 2px;
}
.excavator-row {
  background-color: var(--darker-grey);
  transition: background 0.3s;
}
.excavator-select {
  padding: 2px;
  border-radius: 4px;
  background-color: var(--blue-tint-grey);
  color: #fff;
  font-family: "Kanit";
  border: 1px solid #444;
  width: 165px;
  margin: 0 auto;
  height: 35px;
}
.excavator-select option {
  background-color: var(--dark-matter);
  color: #fff;
}
.apply-button-container {
  margin-top: 16px;
  text-align: right;
}
.apply-button {
  padding: 5px 10px;
  background-color: var(--primary-color);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  justify-content: center;
  font-weight: bold;
}
.apply-button-wrapper {
  margin-top: 1%;
  display: flex;
  justify-content: center;
}
.thHeader {
  font-size: 17px;
  background-color: var(--blue-tint-grey);
  text-align: center;
}
.tdButton {
  background-color: var(--red);
  padding: 6px;
  margin: 2px;
  width: 2vw;
  height: 3vh;
  align-items: center;
  text-align: center;
  font-size: 14px;
  display: flex;
  justify-content: center;
  color: white;
}
.tdButton:hover {
  outline: none;
}
.tdButton:disabled {
  background-color: var(--red-mute);
  color: var(--header-grey);
  cursor: auto;
}.equipNamePlateMain {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  height: 50px;
  width: 120px;
  padding: 1px 5px 1px 1px;
  box-sizing: border-box;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
  background: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.equipNamePlateMain:hover {
  transform: scale(1.02);
}
.equipNamePlateMain::before {
  content: "";
  position: absolute;
  top: 0.75px;
  right: 0.75px;
  bottom: 0.75px;
  left: 0.75px;
  background: var(--grey-line);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transform: scale(1.08);
  z-index: -2;
}
.equipNamePlateMain::after {
  content: "";
  position: absolute;
  top: 0.75px;
  right: 0.75px;
  bottom: 0.75px;
  left: 0.75px;
  background: var(--blue-tint-grey);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  z-index: -1;
}

.equipmentClassMain {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 33px;
  height: 100%;
  padding: 0 5px;
  margin-right: 0;
  box-sizing: border-box;
  background: var(--grey-line);
  clip-path: polygon(12px 0, 0 12px, 0 100%, 100% 100%, 100% 0);
}

.tsInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-left: 8px;
}

.tsDetails {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
}

.equipLabelMain {
  text-align: left;
  font-size: 20px !important;
  flex: 1;
  margin: 0;
  padding: 0;
}

.tsFault {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
}

@media (max-width: 1536px) {
  .equipNamePlateMain {
    width: 8vw;
  }
  .equipmentClassMain {
    width: 25%;
    border-radius: 4px;
  }
  .equipLabelMain {
    font-size: 15px !important;
  }
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
.scroll-container {
  overflow-y: auto;
  height: calc(100vh - 100px); /* adjust for your header height */
}
.same-row {
  display: flex;
  flex-direction: row;
  margin: 0px;
  margin-bottom: 0px;
  margin-left: 10px;
  margin-right: 10px;
  align-items: left;
  justify-content: space-between;
}
.LCMain h4 {
  margin-bottom: 1px;
  padding: 0px;
  margin: 0px;
}
.highlight-inc {
  animation: flashGreen 20s ease-out;
}
.highlight-dec {
  animation: flashRed 20s ease-out;
}
@keyframes flashGreen {
  0% {
    background-color: #4caf50;
  } /* green */
  100% {
    background-color: transparent;
  }
}
@keyframes flashRed {
  0% {
    background-color: "";
  } /* red */
  100% {
    background-color: transparent;
  }
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
._notiCard_1kj2m_2 {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--noti-severity-color, #797e86);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 92%;
  margin-bottom: 6px;
  margin-right: 10px;
}
._notiTop_1kj2m_15 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
._notiLeft_1kj2m_22 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
._countBadge_1kj2m_30 {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(244, 67, 54, 0.18);
  color: #f44336;
  flex-shrink: 0;
}
._notiSubject_1kj2m_40 {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
._notiRight_1kj2m_46 {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
._notiTime_1kj2m_53 {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}
._readDotWrap_1kj2m_59 {
  position: relative;
  display: inline-flex;
  align-items: center;
}
._readDotWrap_1kj2m_59::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  background: #1e2a2a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
}
._readDotWrap_1kj2m_59:hover::after {
  opacity: 1;
}
._readDot_1kj2m_59 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: transform 0.15s ease;
}
._readDot_1kj2m_59:hover {
  transform: scale(1.35);
}
._readDotUnread_1kj2m_99 {
  background: #ff9800;
}
._readDotRead_1kj2m_103 {
  background: transparent;
  outline: 1.5px solid rgba(255, 255, 255, 0.2);
}
._readDotRead_1kj2m_103:hover {
  outline-color: rgba(255, 255, 255, 0.5);
}
._notiBody_1kj2m_111 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  text-align: left;
  word-break: break-word;
  white-space: pre-wrap;
}
._inboxContainer_1kj2m_119 {
  position: relative;
  display: flex;
  align-items: center;
}
._bellButton_1kj2m_125 {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 12px 0 0;
  position: relative;
}
._bellBadge_1kj2m_135 {
  position: absolute;
  top: -4px;
  right: -6px;
  background: #f44336;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
}
._overlay_1kj2m_153 {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: transparent;
}
._drawer_1kj2m_160 {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: var(--noti-drawer-width, 480px);
  background: #161b1b;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1101;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
}
._drawerOpen_1kj2m_175 {
  transform: translateX(0);
}
._drawerHeader_1kj2m_179 {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  height: 45px;
  padding: 0 12px 0 8px;
}
._headerLeft_1kj2m_189 {
  display: flex;
  align-items: stretch;
}
._headerActions_1kj2m_194 {
  display: flex;
  align-items: center;
  gap: 2px;
}
._collapseButton_1kj2m_200 {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
}
._collapseButton_1kj2m_200:hover {
  color: #fff;
}
._tab_1kj2m_214 {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 0 14px;
  text-transform: uppercase;
  transition: color 0.15s ease, border-color 0.15s ease;
}
._tab_1kj2m_214:hover {
  color: rgba(255, 255, 255, 0.75);
  border-bottom-color: transparent;
}
._tabActive_1kj2m_233 {
  border-bottom-color: #4ade80;
  color: #4ade80;
}
._actionBtn_1kj2m_238 {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
._actionBtn_1kj2m_238:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}
._actionBtnActive_1kj2m_255 {
  color: #4ade80;
}
._actionBtnActive_1kj2m_255:hover {
  color: #4ade80;
}
._drawerBody_1kj2m_262 {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
._drawerMeta_1kj2m_268 {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin-top: 32px;
}
._notiActions_1kj2m_275 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
._notiActionBtn_1kj2m_284 {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  background: transparent;
  border: 1px solid #41ff88;
  border-radius: 6px;
  color: #41ff88;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  padding: 0 10px;
}
._notiActionBtn_1kj2m_284:hover:not(:disabled) {
  background: rgba(65, 255, 136, 0.12);
  color: #41ff88;
}
._notiActionBtn_1kj2m_284:disabled {
  cursor: default;
  opacity: 0.4;
}
._notiActionBtnPrimary_1kj2m_311 {
  background: #41ff88;
  border-color: #41ff88;
  color: #000;
}
._notiActionBtnPrimary_1kj2m_311:hover:not(:disabled) {
  background: #2ee674;
  color: #000;
}
._notiActionBtnCompleted_1kj2m_321 {
  text-decoration: line-through;
}
._notiActionDropdown_1kj2m_325 {
  position: relative;
  display: inline-flex;
  align-items: center;
}
._notiActionMenu_1kj2m_331 {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  background: #111;
  border: 1px solid rgba(65, 255, 136, 0.3);
  border-radius: 6px;
  overflow: hidden;
  z-index: 10;
}
._notiActionMenuItem_1kj2m_345 {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
}
._notiActionMenuItem_1kj2m_345:hover {
  background: rgba(65, 255, 136, 0.12);
  color: #41ff88;
}
._notiActionMenuItem_1kj2m_345 + ._notiActionMenuItem_1kj2m_345 {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
._prefList_1kj2m_363 {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._prefItem_1kj2m_369 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
._prefName_1kj2m_379 {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  flex: 1;
  min-width: 0;
}
._prefChannels_1kj2m_386 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
._prefChannel_1kj2m_386 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
._prefChannelOn_1kj2m_402 {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
}
._prefChannelOff_1kj2m_407 {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.25);
  text-decoration: line-through;
}
._notiActionBtnDanger_1kj2m_413:hover:not(:disabled) {
  background: rgba(244, 67, 54, 0.2);
  border-color: rgba(244, 67, 54, 0.4);
  color: #f44336;
}._floatBtn_retra_1 {
  position: absolute;
  top: 50px;
  z-index: 150;
}
._floatBtn_retra_1:hover {
  cursor: grab;
}
._floatBtn_retra_1 div {
  color: black;
  background-color: var(--primary-color);
  padding: 5px 12px 0px 12px;
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
._floatBtn_retra_1 div svg:hover {
  cursor: pointer;
}

._dragHandle_retra_21 {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 200;
}
._dragHandle_retra_21:hover {
  background: rgba(255, 255, 255, 0.15);
}

._slidePanel_retra_34 {
  position: absolute;
  min-width: 280px;
  height: 95vh;
  bottom: 0;
  background-color: var(--graphite);
  box-shadow: 4px 0 3px rgba(148, 147, 147, 0.3);
  z-index: 150;
  /* animation */
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
  display: flex;
  flex-direction: column;
}

._slidePanel_retra_34._open_retra_50 {
  transform: translateX(0%);
  opacity: 1;
}

._closeBtn_retra_55 {
  background: transparent;
  color: white;
}

._topContainer_retra_60 {
  display: flex;
  justify-content: space-between;
}

._bodyContainer_retra_65 {
  flex-grow: 1;
}._container_1m5tc_1 {
  display: flex;
  background: #1b1d20;
  border: 1px solid #2d3033;
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}

._btn_1m5tc_10 {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-family: "KanitBold", "Kanit", sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: transparent;
  color: #878c93;
  transition: background 0.1s, color 0.1s;
}
._btn_1m5tc_10:hover {
  color: #fff;
}
._btn_1m5tc_10._active_1m5tc_27 {
  background: #2d3338;
  color: #ffffff;
}._pool_18gsy_1 {
  background: #0e0f10;
  border: 1px solid #2d3033;
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s;
}
._pool_18gsy_1._over_18gsy_8 {
  border-color: #41ff88;
}

._header_18gsy_12 {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  gap: 10px;
  border-bottom: 1px solid #1b1d20;
  flex-wrap: wrap;
  row-gap: 6px;
}

._title_18gsy_22 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #b2b7bf;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

._truckIcon_18gsy_33 {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

._titleText_18gsy_39 {
  color: #b2b7bf;
}

._titleCount_18gsy_43 {
  background: #1b1d20;
  color: #ffffff;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0;
  font-weight: 600;
}

._controls_18gsy_53 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-end;
}

._filters_18gsy_62 {
  display: flex;
  gap: 4px;
  align-items: center;
}

._filterPill_18gsy_68 {
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  border: 1px solid #2d3033;
  background: transparent;
  color: #b2b7bf;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color 0.1s, background 0.1s, color 0.1s;
}
._filterPill_18gsy_68:hover {
  background: #1b1d20;
}
._filterPill_18gsy_68._filterPillActive_18gsy_87 {
  border-color: #41ff88;
  background: rgba(65, 255, 136, 0.12);
  color: #41ff88;
}

._filterDot_18gsy_93 {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

._filterCount_18gsy_100 {
  color: #5d6167;
}

._filterCountActive_18gsy_104 {
  color: #41ff88;
}

._layoutToggle_18gsy_108 {
  display: flex;
  background: #1b1d20;
  border: 1px solid #2d3033;
  border-radius: 6px;
  padding: 2px;
  gap: 0;
}
._layoutToggle_18gsy_108 button {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: transparent;
  color: #878c93;
  transition: background 0.1s, color 0.1s;
}
._layoutToggle_18gsy_108 button._layoutActive_18gsy_128 {
  background: #2d3338;
  color: #ffffff;
}

._searchBox_18gsy_133 {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1b1d20;
  border: 1px solid #2d3033;
  border-radius: 6px;
  padding: 0 8px;
  height: 26px;
  width: 130px;
  transition: border-color 0.1s;
}
._searchBox_18gsy_133:focus-within {
  border-color: #41ff88;
}

._searchInput_18gsy_149 {
  border: none;
  background: transparent;
  outline: none;
  color: #ffffff;
  font-size: 11px;
  flex: 1;
  min-width: 0;
  padding: 0;
}
._searchInput_18gsy_149::placeholder {
  color: #5d6167;
}

._body_18gsy_163 {
  padding: 10px;
  max-height: 160px;
  overflow-y: auto;
}
._body_18gsy_163::-webkit-scrollbar {
  width: 6px;
}
._body_18gsy_163::-webkit-scrollbar-track {
  background: transparent;
}
._body_18gsy_163::-webkit-scrollbar-thumb {
  background: #2d3033;
  border-radius: 3px;
}

._wrapGrid_18gsy_179 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 4px;
}

._emptyMsg_18gsy_185 {
  font-size: 11px;
  color: #44484d;
  font-style: italic;
  margin: 0 auto;
}

._groups_18gsy_192 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._group_18gsy_192 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._groupHeader_18gsy_204 {
  border: none;
  background: transparent;
  color: #878c93;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 0;
}

._groupDot_18gsy_219 {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}

._groupLabel_18gsy_226 {
  color: #878c93;
}

._groupCount_18gsy_230 {
  color: #44484d;
}

._groupChevron_18gsy_234 {
  margin-left: 4px;
  color: #44484d;
  transition: transform 0.15s;
  display: inline-block;
}

._groupChips_18gsy_241 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 4px;
  padding-left: 12px;
}._container_jtq4h_1 {
  display: flex;
  flex-direction: column;
}

._row_jtq4h_6 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #2d3033;
  transition: background 0.15s, border-color 0.15s;
}
._row_jtq4h_6:first-child {
  border-top: 1px solid #2d3033;
}
._row_jtq4h_6._rowEven_jtq4h_17 {
  background: #131517;
}
._row_jtq4h_6._rowOdd_jtq4h_20 {
  background: #15171a;
}
._row_jtq4h_6._rowOver_jtq4h_23 {
  background: rgba(65, 255, 136, 0.04);
  border-color: #41ff88;
  outline: 1px dashed #41ff88;
  outline-offset: -1px;
}

._diggerInfo_jtq4h_30 {
  flex: 0 0 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

._nameplate_jtq4h_38 {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px 0 16px;
  background: linear-gradient(180deg, #2d3138 0%, #1f2329 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.09em;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  flex-shrink: 0;
}

._nameplateEdge_jtq4h_53 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
}

._truckCount_jtq4h_61 {
  font-size: 10px;
  color: #5d6167;
  padding-left: 4px;
  letter-spacing: 0.02em;
}

._chipArea_jtq4h_68 {
  flex: 1;
  min-height: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 5px;
  align-content: start;
}

._assignedChip_jtq4h_77 {
  justify-self: start;
}
._assignedChip_jtq4h_77:hover {
  z-index: 2;
}

._emptyHint_jtq4h_84 {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #44484d;
  font-style: italic;
  letter-spacing: 0.04em;
}._container_t8lgc_1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  gap: 10px;
}

._unassignedSection_t8lgc_9 {
  flex-shrink: 0;
}

._diggersSection_t8lgc_13 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
._diggersSection_t8lgc_13::-webkit-scrollbar {
  width: 6px;
}
._diggersSection_t8lgc_13::-webkit-scrollbar-track {
  background: transparent;
}
._diggersSection_t8lgc_13::-webkit-scrollbar-thumb {
  background: #2d3033;
  border-radius: 3px;
}

._diggersHeader_t8lgc_31 {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 8px;
  flex-shrink: 0;
}

._diggersLabel_t8lgc_39 {
  font-size: 11px;
  font-weight: 600;
  color: #878c93;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

._diggersSep_t8lgc_47 {
  color: #5d6167;
  font-size: 11px;
}

._diggersCount_t8lgc_52 {
  font-size: 11px;
  font-weight: 600;
  color: #41ff88;
}.mainContainer {
  display: flex;
  flex-direction: column;
  background-color: var(--primary-secondary-color);
  height: 100%;
  min-height: 0;
  row-gap: 0.6vh;
}

.applyBtnContainer {
  flex-shrink: 1;
  padding-top: 10px;
  padding-bottom: 25px;
  display: flex;
  justify-content: flex-end;
}
.applyBtnContainer .applyBtn {
  padding: 8px 30px;
  font-size: 14px;
}
.applyBtnContainer button:disabled {
  background-color: var(--darker-grey);
  opacity: 0.7;
  cursor: not-allowed;
}._topContainer_12h65_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

._headerActions_12h65_7 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

._bodyContainer_12h65_14 {
  flex-grow: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 5px;
}.tableHeader {
  display: flex;
  align-items: stretch;
  background: #161616;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
  font-size: 0.72em;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tableHeader .tableHeaderEmpty {
  width: 35.11px;
  flex-shrink: 0;
  border-right: 1px solid #2a2a2a;
}
.tableHeader .tableHeaderTasks {
  flex: 1;
  padding: 7px 12px;
  font-size: 12px;
  text-align: left;
}
.tableHeader .tableHeaderStatus {
  width: 130px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 7px 12px;
  border-left: 1px solid #2a2a2a;
  white-space: nowrap;
}
.tableHeader .tableHeaderAdd {
  width: 32px;
  flex-shrink: 0;
  border-left: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
  color: var(--primary-color);
  cursor: pointer;
}
.tableHeader .tableHeaderAdd:hover {
  background: rgba(65, 255, 136, 0.1);
}

.container {
  display: flex;
  flex-direction: column;
}

.tasksHeading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0px 12px 5px;
  flex-shrink: 0;
}

.tasksHeadingLabel {
  font-size: 0.85em;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.collapseBtn {
  background: transparent;
  border: 1px solid #444;
  border-radius: 4px;
  color: #aaa;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  cursor: pointer;
  text-transform: uppercase;
}
.collapseBtn:hover {
  border-color: #888;
  color: #fff;
}
.collapseBtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: #444;
  color: #aaa;
}

.tasksCountBadge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #2a7a2a;
  color: white;
  font-size: 0.75em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.cardsContainer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

.excavatorCard {
  background: #1b1d20;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  flex-shrink: 0;
}

.cardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #15171a;
  padding: 3px 12px;
  user-select: none;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 1;
  border-left: 3px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cardHeader:hover {
  background: #161616;
}

.cardHeaderHighlighted {
  border-left-color: #00e5ff;
  background: #0d1f22;
}
.cardHeaderHighlighted:hover {
  background: #0f2428;
}

.headerLeft {
  display: flex;
  align-items: center;
  gap: 6px;
}

.equipName {
  font-size: 0.9em;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.headerRight {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.addTaskBtn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #ccc;
  font-size: 1em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}
.addTaskBtn:hover {
  background: #3a3a3a;
  color: white;
}

.taskCountBadge {
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1px solid #444;
  color: #ccc;
  font-size: 0.72em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 4px;
}

.headerMeta {
  font-size: 0.78em;
  color: #888;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

.dot {
  color: #555;
}

.arrow {
  color: #555;
  font-size: 1.1em;
}

.headerActiveBadge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #2a7a2a;
  color: white;
  font-size: 0.72em;
  font-weight: 600;
  height: 25px;
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.headerPendingBadge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(180, 100, 0, 0.25);
  color: #e8920a;
  border: 1px solid rgba(180, 100, 0, 0.4);
  font-size: 0.72em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.closeBtn {
  cursor: pointer;
  width: 16px;
  height: 16px;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.closeBtn:hover {
  background: var(--red);
  color: white;
}

.cardBody {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: 35px;
  border-left: 1px solid #2a2a2a;
}

.taskRow {
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #2a2a2a;
  border-left: 3px solid transparent;
  user-select: none;
}
.taskRow:hover {
  background: #202326;
}

.taskRowHighlighted {
  border-left-color: #00e5ff;
  background: #0d1f22;
}
.taskRowHighlighted:hover {
  background: #0f2428;
}

.taskRowChevron {
  width: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-right: 1px solid #2a2a2a;
}

.taskSummary {
  font-size: 0.8em;
  color: #ccc;
  padding: 7px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
}
.taskSummary__waypoint-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(65, 255, 136, 0.12);
  border: 1px solid rgba(65, 255, 136, 0.35);
  color: #41ff88;
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.statusBtn,
.statusBtnPending,
.statusBtnPaused,
.statusBtnComplete {
  display: flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 110px;
  width: 110px;
  margin: 0px 10px;
  box-sizing: border-box;
  border: 1px solid transparent;
  user-select: none;
}
.statusBtn .statusLabel,
.statusBtnPending .statusLabel,
.statusBtnPaused .statusLabel,
.statusBtnComplete .statusLabel {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  font-size: 0.72em;
  font-weight: 600;
}
.statusBtn .statusPlay,
.statusBtnPending .statusPlay,
.statusBtnPaused .statusPlay,
.statusBtnComplete .statusPlay {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  cursor: pointer;
}

.statusBtn .statusLabel {
  background: #2a7a2a;
  color: white;
}
.statusBtn .statusPlay {
  background: #1f601f;
  color: white;
}
.statusBtn .statusPlay:hover {
  background: #1a501a;
}

.statusBtnPaused {
  border-color: rgba(180, 50, 50, 0.4);
}
.statusBtnPaused .statusLabel {
  background: rgba(180, 50, 50, 0.25);
  color: #e05c5c;
}
.statusBtnPaused .statusPlay {
  background: rgba(180, 50, 50, 0.15);
  border-left: 1px solid rgba(180, 50, 50, 0.4);
  color: #e05c5c;
}
.statusBtnPaused .statusPlay:hover {
  background: rgba(180, 50, 50, 0.3);
}

.statusBtnPending {
  border-color: rgba(180, 100, 0, 0.4);
}
.statusBtnPending .statusLabel {
  background: rgba(180, 100, 0, 0.25);
  color: #e8920a;
}
.statusBtnPending .statusPlay {
  background: rgba(180, 100, 0, 0.15);
  border-left: 1px solid rgba(180, 100, 0, 0.4);
  color: #e8920a;
}
.statusBtnPending .statusPlay:hover {
  background: rgba(180, 100, 0, 0.3);
}

.statusBtnComplete {
  border-color: rgba(120, 120, 120, 0.4);
  opacity: 0.6;
  pointer-events: none;
}
.statusBtnComplete .statusLabel {
  background: rgba(100, 100, 100, 0.2);
  color: #888;
}

.statusBtnCreate {
  display: flex;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  width: 110px;
  text-align: center;
  justify-content: center;
  margin: 0 10px 0 10px;
  box-sizing: border-box;
  border: 1px solid rgba(59, 130, 246, 0.5);
}
.statusBtnCreate .statusLabel {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(59, 130, 246, 0.2);
  padding: 4px 10px;
  font-size: 0.78em;
  font-weight: 600;
  color: #60a5fa;
}
.statusBtnCreate .statusPlay {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.15);
  border-left: 1px solid rgba(59, 130, 246, 0.4);
  padding: 4px 8px;
  color: #60a5fa;
  cursor: pointer;
}
.statusBtnCreate .statusPlay:hover {
  background: rgba(59, 130, 246, 0.3);
}

.taskCompleteBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  align-self: stretch;
  border-left: 1px solid #2a2a2a;
  color: #555;
  cursor: pointer;
}
.taskCompleteBtn:hover {
  color: var(--primary-color);
  background: rgba(65, 255, 136, 0.05);
}

.taskDeleteBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  flex-shrink: 0;
  align-self: stretch;
  border-left: 1px solid #2a2a2a;
  color: #555;
  cursor: pointer;
}
.taskDeleteBtn:hover {
  color: var(--red);
  background: rgba(255, 0, 0, 0.05);
}

.taskActionEmpty {
  width: 32px;
  flex-shrink: 0;
  align-self: stretch;
  border-left: 1px solid #2a2a2a;
}

.fieldRow {
  display: flex;
  gap: 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 20px;
  min-width: 20px;
}

.field.volumeField {
  flex: 1 1 80px;
  min-width: 80px;
}

.fieldLabel {
  font-size: 0.68em;
  font-weight: 700;
  color: #fffcfc;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.05em;
}

.fieldLabelRow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fieldValidationError {
  font-size: 0.65em;
  font-weight: 600;
  color: #ff4444;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.select {
  border-radius: 4px;
  width: 100%;
}

.categoryControl {
  height: 26px;
  background: #1b1d20;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  padding: 0 8px;
  display: flex;
  align-items: center;
}

.categoryPill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.categoryEmpty {
  font-size: 0.85em;
  color: #555;
}

.select.error {
  border: 1px solid var(--red);
}

.volumeControl {
  display: flex;
  height: 26px;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  overflow: hidden;
}

.volumeInput {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: white;
  font-size: 13px;
  padding: 0 8px;
  text-align: left;
  outline: none;
  box-sizing: border-box;
}
.volumeInput:disabled {
  color: #555;
}
.volumeInput::-webkit-inner-spin-button, .volumeInput::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.setMaxBtn {
  flex-shrink: 0;
  background: #2a2a2a;
  border-left: 1px solid #3a3a3a;
  color: #aaa;
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0 8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.setMaxBtn.setMaxBtnActive {
  color: #41ff88;
}

.dumpPointsSection {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dumpPointsLabel {
  font-size: 0.68em;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.dumpPointRow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #2d3033;
  border: 1px solid #2a2a2a;
  border-left: 3px solid #4a7eff;
  border-radius: 4px;
  padding: 4px 8px;
}
.dumpPointRow.error {
  border-color: var(--red);
  border-left-color: var(--red);
}
.dumpPointRow .dumpSelect {
  width: 220px;
  flex-shrink: 0;
}
.dumpPointRow .dumpName {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}
.dumpPointRow .dumpArrow {
  font-size: 13px;
  color: #555;
  flex-shrink: 0;
}
.dumpPointRow .dumpWpCount {
  font-size: 11px;
  color: #888;
  flex-shrink: 0;
}
.dumpPointRow .dumpSpacer {
  flex: 1;
}
.dumpPointRow .dumpActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dumpPointRow .dumpActionBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  padding: 2px;
  border-radius: 3px;
  transition: color 0.15s;
}
.dumpPointRow .dumpActionBtn:hover {
  color: #aaa;
}
.dumpPointRow .dumpActionBtn.deleteBtn:hover {
  color: var(--red);
}
.dumpPointRow .dumpActionBtn.dumpAddBtn:hover {
  color: var(--primary-color);
}

.noTaskText {
  padding: 10px 14px;
  font-size: 11px;
  color: #666;
  font-style: italic;
}

.plannedEditsBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #111;
  border-top: 1px solid #2a2a2a;
}

.plannedEditsDot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color);
  flex-shrink: 0;
}

.plannedEditsLabel {
  font-size: 0.75em;
  color: #aaa;
  flex: 1;
}

.plannedCancelBtn {
  background: none;
  border: none;
  color: #888;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.plannedCancelBtn:hover {
  color: #ccc;
  background: #2a2a2a;
}

.plannedApplyBtn {
  background: var(--primary-color);
  border: none;
  color: #000;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 4px;
}
.plannedApplyBtn:hover {
  opacity: 0.85;
}

.statusMenuBackdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.statusMenu {
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1001;
  min-width: 120px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.statusMenuOption {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  font-size: 0.78em;
  font-family: "KanitBold", sans-serif;
  cursor: pointer;
  color: #ccc;
  white-space: nowrap;
}
.statusMenuOption:hover {
  background: #2a2a2a;
}

.statusMenuOptionActive {
  background: rgba(65, 255, 136, 0.06);
}

.loadingState {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}.confirmDialogPaper.MuiPaper-root {
  background-color: #1c1c1c;
  color: #fff;
  border-radius: 12px;
  padding: 0;
  min-width: 360px;
  max-width: 440px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.confirmDialogContent {
  display: flex;
  flex-direction: column;
}

.confirmDialogHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
}
.confirmDialogHeader .confirmDialogHeaderDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.confirmDialogHeader .confirmDialogTitle {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

.confirmDialogBody {
  border-top: 1px solid #2a2a2a;
  padding: 20px;
}

.confirmDialogFooter {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid #2a2a2a;
}
.confirmDialogFooter .confirmDialogCancelBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.confirmDialogFooter .confirmDialogCancelBtn:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.confirmDialogFooter .confirmDialogConfirmBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background-color: var(--primary-color);
  color: #1c1c1c;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.confirmDialogFooter .confirmDialogConfirmBtn:hover {
  opacity: 0.9;
}
.confirmDialogFooter .confirmDialogConfirmBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

input::-webkit-resizer,
input::-webkit-scrollbar,
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration,
input::-webkit-credentials-auto-fill-button,
input::-webkit-contacts-auto-fill-button {
  display: none;
}

.dp-wrapper {
  width: 100%;
}

.dp-tableScroll {
  width: 100%;
  margin-top: 8px;
}

.dp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dp-table th {
  padding: 10px 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  text-align: center;
  border: 1px solid #2a2a2a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #000;
  position: sticky;
  top: 0;
  z-index: 1;
}

.dp-table td {
  padding: 0 6px;
  height: 32px;
  font-size: 0.82em;
  color: #ccc;
  text-align: center;
  border: 1px solid #2a2a2a;
  background-color: #1d1e20;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-table tbody tr:hover td {
  background-color: #2d3033;
}

.dp-materialCell {
  white-space: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  justify-content: center;
  padding: 2px;
}

.dp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  border-radius: 4px;
  margin: 1px;
  font-size: 12px;
  font-weight: 600;
  background-color: #2a2d31;
  color: #aaa;
  border: 1px solid #3a3d42;
  white-space: nowrap;
}
.dp-pill--empty {
  color: #555;
  border-color: #2a2d31;
}

.dp-actionsCell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.dp-iconBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  color: #888;
  transition: color 0.15s, background 0.15s;
}
.dp-iconBtn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.dp-iconBtn.delete:hover {
  color: #ff4444;
  background: rgba(255, 68, 68, 0.08);
}

.dp-empty {
  padding: 20px;
  text-align: center;
  font-size: 0.82em;
  color: #555;
}

.header-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.edit-lock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.edit-lock--view {
  background: rgba(255, 68, 68, 0.1);
  color: #ff4444;
  border: 1px solid rgba(255, 68, 68, 0.3);
}
.edit-lock--edit {
  background: rgba(65, 255, 136, 0.1);
  color: var(--primary-color);
  border: 1px solid rgba(65, 255, 136, 0.3);
}

.dp-section {
  height: 100%;
  min-height: 0;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

@keyframes dpFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dp-tableScrollWrapper {
  padding: 0 8px 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  animation: dpFadeIn 0.18s ease;
}

.dp-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  flex-shrink: 0;
}
.dp-header h4 {
  margin: 0;
  font-size: 0.85em;
  text-align: left;
}.shiftSummaryWrapper {
  background: #15171a;
  border: 1px solid #2c2c2c;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 8px;
  position: relative;
}

.shiftSummaryHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 42px;
  flex-shrink: 0;
}

.shiftSummaryTitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}

.shiftSummaryDumpControls {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  overflow: hidden;
}

.shiftSummaryToggle {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}

.shiftToggleBtn {
  padding: 4px;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #3a3a3a;
  background: transparent;
  color: #666;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.shiftToggleBtn:hover {
  border-color: #555;
  color: #aaa;
}
.shiftToggleBtn.shiftToggleBtnActive {
  background: var(--primary-color, #41ff88);
  border-color: var(--primary-color, #41ff88);
  color: #000;
}

@keyframes ssFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.shiftSummaryContent {
  overflow: hidden;
}

.ssDragHandle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: row-resize;
}
.ssDragHandle:hover .ssDragDots {
  background: #555;
}

.ssDragDots {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #333;
  transition: background 0.15s;
}

.shiftSummaryBody {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 16px 14px;
  gap: 20px;
  border-top: 1px solid #2c2c2c;
  animation: ssFadeIn 0.18s ease;
}

.ssEquipColumn {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: center;
  gap: 16px;
  flex-shrink: 0;
}

.ssEquipItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.ssEquipLabel {
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #666;
}

.ssEquipCount {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.ssEquipActive {
  font-size: 1.55em;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.ssEquipTotal {
  font-size: 0.85em;
  font-weight: 500;
  color: #4a4a4a;
}

.ssDivider {
  width: 1px;
  align-self: stretch;
  background: #2c2c2c;
  flex-shrink: 0;
}

.ssStatsColumn {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 6px;
  justify-content: flex-start;
  flex: 1;
}

.ssStatsLabel {
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #666;
}

.ssStatsRow {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: flex-start;
}

.ssStat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ssStatHeader {
  display: flex;
  align-items: center;
  gap: 5px;
}

.ssStatDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ssStatDot--ore {
  background-color: var(--primary-color, #41ff88);
}
.ssStatDot--waste {
  background-color: #e07a30;
}
.ssStatDot--total {
  background-color: #2dd4b4;
}

.ssStatLabel {
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #666;
}

.ssStatValue {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ssStatNumber {
  font-size: 1.5em;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.ssStatUnit {
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #4a4a4a;
  text-transform: uppercase;
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
:root {
  --table-font-size: 14px;
  --border-radius: 5px;
  --margin-top-sm: 50px;
  --header-padding: 5px;
  --header-height: 40px;
  --smaller-header-height: 25px;
}
.planningContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: #0e0f10;
  height: 100%;
  min-height: calc(100vh - 100px);
  border-right: 1px solid #2d3033;
}
.planningHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 16px;
  margin-bottom: 10px;
  gap: 20px;
  height: 72px;
  background: #060707;
  border-bottom: 1px solid #2d3033;
}
.planningHeader h2 {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-family: "Kanit", sans-serif;
}
.headerActions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.headerSearch {
  display: flex;
  align-items: center;
  background-color: #1b1d20;
  border-radius: 4px;
  border: 1px solid #2d3033;
  padding: 4px 12px;
  width: 220px;
}
.uploadPlanButton {
  padding: 10px 20px;
  background-color: transparent;
  color: #b2b7bf;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Kanit", sans-serif;
  text-transform: uppercase;
  outline: none;
}
.uploadPlanButton:focus, .uploadPlanButton:focus-visible {
  outline: none;
}
.uploadPlanButton:hover:not(:disabled) {
  color: #41ff88;
  transform: scale(1.02);
}
.uploadPlanButton:active:not(:disabled) {
  transform: scale(0.98);
}
.uploadPlanButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.errorMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 40px;
  background-color: #1b1d20;
  border: 1px solid #2d3033;
  border-radius: 8px;
  color: #b2b7bf;
}
.errorMessage p {
  margin: 0;
  font-size: 14px;
}
.errorMessage .retryButton {
  padding: 8px 16px;
  background-color: #41ff88;
  color: #000000;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.errorMessage .retryButton:hover {
  background-color: #2da66a;
  transform: scale(1.02);
}
.planningTableWrapper {
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  background-color: transparent;
  isolation: isolate;
}
.planningTableContainer {
  background-color: #1b1d20 !important;
  border: 1px solid #2d3033 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  height: 100%;
  overflow: auto;
}
.planningTable {
  background-color: #1b1d20;
}
.planningTable .tableHeaderRow {
  background-color: #060707 !important;
  border-bottom: 1px solid #2d3033 !important;
}
.planningTable .tableHeaderRow .tableHeaderCell {
  color: #ffffff;
  font-weight: 500;
  font-size: 12px;
  padding: 16px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-right: 1px solid #2d3033;
  font-family: "Kanit", sans-serif;
}
.planningTable .tableHeaderRow .tableHeaderCell:last-child {
  border-right: none;
}
.planningTable .tableBodyRow {
  border-bottom: 1px solid #2d3033;
  transition: background-color 0.2s ease;
}
.planningTable .tableBodyRow:hover {
  background-color: #25262d;
}
.planningTable .tableBodyRow:last-child {
  border-bottom: none;
}
.planningTable .tableBodyRow .tableBodyCell {
  color: #b2b7bf;
  font-size: 13px;
  padding: 14px 16px !important;
  border-right: 1px solid #2d3033;
  font-family: "Kanit", sans-serif;
}
.planningTable .tableBodyRow .tableBodyCell:last-child {
  border-right: none;
}
.planningTable .tableBodyRow .actionsCell {
  text-align: right;
}
.planningTable .emptyState {
  padding: 60px 16px !important;
}
.planningTable .emptyState p {
  color: #797e86;
  font-size: 14px;
  margin: 0;
}
.actionButtons {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.actionButton {
  color: #41ff88 !important;
  padding: 2px !important;
  transition: all 0.3s ease;
}
.actionButton:hover {
  color: #2da66a !important;
  background-color: rgba(65, 255, 136, 0.1);
}
.actionButton:disabled {
  color: #797e86 !important;
  cursor: not-allowed;
}
.actionButton svg {
  font-size: 18px !important;
}
.activateButton {
  color: #41ff88 !important;
}
.activateButton:hover {
  color: #2da66a !important;
}
.planDetailPage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: #d6dde7;
  font-family: "Kanit", sans-serif;
  gap: 10px;
  padding: 12px 5px;
  overflow: hidden;
}
.planDetailHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #1f2228;
  border-radius: 12px;
  background: #0f1319;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.planDetailTitle {
  display: flex;
  align-items: center;
  gap: 12px;
}
.planDetailTitle h2 {
  margin: 2px 0 0 0;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: 0.3px;
}
.planDetailTitle .planMetaRow {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.planDetailTitle .metaItem {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: #9ea6b4;
}
.planDetailTitle .metaLabel {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6d7480;
}
.planDetailTitle .metaValue {
  color: #d6dde7;
  font-weight: 600;
}
.planStatusChip {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid #1f2228;
}
.planStatusChip.active {
  background: rgba(65, 255, 136, 0.1);
  color: #41ff88;
}
.planStatusChip.inactive {
  background: rgba(255, 107, 107, 0.12);
  color: #ff8b8b;
}
.planDetailControls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 4px;
}
.pillRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pill {
  padding: 8px 12px;
  border-radius: 10px;
  background: #10141b;
  border: 1px solid #1f2228;
  color: #c7ced8;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.pill.muted {
  color: #7d8593;
}
.statsRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.statCard {
  border: 1px solid #1f2228;
  background: #0f1319;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.statCard .statLabel {
  margin: 0;
  color: #7d8593;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.statCard .statValue {
  margin: 4px 0 0 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.statCard.highlight {
  background: linear-gradient(135deg, rgba(65, 255, 136, 0.12), rgba(65, 255, 136, 0.04));
  border-color: rgba(65, 255, 136, 0.35);
}
.planDetailBody {
  flex: 1;
  min-height: 0;
  max-width: 100%;
  background: #0c0d0f;
  border: 1px solid #1f2228;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.tableLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.planDetailTableContainer {
  background-color: #0c0d0f !important;
  border-radius: 12px !important;
  border: 1px solid #1f2228 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
  flex: 1;
  min-height: 0;
  min-width: 100%;
  overflow: auto;
  position: relative;
}
/* Footer totals: treat as summary row */
.planDetailFooterTable td.planDetailFooterTotalCell {
  background: #16181d !important;
  font-weight: 700;
}
.planDetailTable {
  background-color: #0c0d0f;
  width: max-content;
  min-width: 100%;
  font-family: "Kanit", sans-serif;
  border-collapse: separate;
  border-spacing: 0;
}
.planDetailTable thead tr {
  background: #000000;
}
.planDetailTable .MuiTableCell-head {
  position: sticky;
  top: 0;
  z-index: 3;
  color: #ffffff;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.4px;
  border-top: none !important;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  white-space: nowrap;
  padding: 6px 14px !important;
}
.planDetailTable .planDetailHeaderCellWrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.planDetailTable .planDetailHeaderMenuBtn {
  color: #9ea6b4 !important;
  font-size: 14px !important;
  padding: 2px !important;
}
.planDetailTable .planDetailHeaderMenuBtn:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.planDetailTable .planDetailHeaderStateIcons {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.planDetailTable .planDetailHeaderMenuPaper {
  background: #050607 !important;
  color: #fff !important;
  border: 1px solid #1b1f24 !important;
  border-radius: 8px !important;
  min-width: 205px !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden;
}
.planDetailTable .planDetailHeaderMenuItem {
  min-height: 40px !important;
  color: #f3f5f7 !important;
  font-size: 12px !important;
  letter-spacing: 0.45px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.planDetailTable .planDetailHeaderMenuItem:last-of-type {
  border-bottom: none !important;
}
.planDetailTable .planDetailHeaderMenuItem:hover {
  background: #0d1116 !important;
}
.planDetailTable .planDetailHeaderMenuIcon {
  min-width: 28px !important;
  color: #fff !important;
}
.planDetailTable .planDetailFrozenHeader,
.planDetailTable .planDetailDataHeader {
  background: #000000 !important;
}
.planDetailTable td {
  color: #ffffff;
  font-size: 12px;
  border-bottom: 1px solid #444;
  border-right: 1px solid #444;
  white-space: nowrap;
}
.planDetailTable {
  /* ===== Sticky frozen columns (clean implementation) ===== */
  --pd-w1: 30px;
  --pd-w2: 45px;
  --pd-w3: 45px;
  --pd-w4: 65px;
  --pd-w5: 65px;
  --pd-w6: 60px;
  --pd-left2: var(--pd-w1);
  --pd-left3: calc(var(--pd-w1) + var(--pd-w2));
  --pd-left4: calc(var(--pd-w1) + var(--pd-w2) + var(--pd-w3));
  --pd-left5: calc(var(--pd-w1) + var(--pd-w2) + var(--pd-w3) + var(--pd-w4));
  --pd-left6: calc(var(--pd-w1) + var(--pd-w2) + var(--pd-w3) + var(--pd-w4) + var(--pd-w5));
  --pd-frozen-total: calc(
    var(--pd-w1) + var(--pd-w2) + var(--pd-w3) + var(--pd-w4) + var(--pd-w5) + var(--pd-w6)
  );
}
.planDetailTable .pdStickyLeft {
  position: sticky !important;
  z-index: 4;
  background: #1b1d20 !important;
}
.planDetailTable .MuiTableCell-head.pdStickyLeft {
  z-index: 5;
  background: #000000 !important;
}
.planDetailTable .pdLeft1 {
  left: 0;
  min-width: var(--pd-w1) !important;
  width: var(--pd-w1) !important;
  max-width: var(--pd-w1) !important;
}
.planDetailTable .pdLeft2 {
  left: var(--pd-left2);
  min-width: var(--pd-w2) !important;
  width: var(--pd-w2) !important;
  max-width: var(--pd-w2) !important;
}
.planDetailTable .pdLeft3 {
  left: var(--pd-left3);
  min-width: var(--pd-w3) !important;
  width: var(--pd-w3) !important;
  max-width: var(--pd-w3) !important;
}
.planDetailTable .pdLeft4 {
  left: var(--pd-left4);
  min-width: var(--pd-w4) !important;
  width: var(--pd-w4) !important;
  max-width: var(--pd-w4) !important;
}
.planDetailTable .pdLeft5 {
  left: var(--pd-left5);
  min-width: var(--pd-w5) !important;
  width: var(--pd-w5) !important;
  max-width: var(--pd-w5) !important;
}
.planDetailTable .pdLeft6 {
  left: var(--pd-left6);
  min-width: var(--pd-w6) !important;
  width: var(--pd-w6) !important;
  max-width: var(--pd-w6) !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.14);
}
.planDetailTable .pdStickyLeftSpan {
  position: sticky !important;
  left: 0 !important;
  z-index: 6;
  min-width: var(--pd-frozen-total) !important;
  width: var(--pd-frozen-total) !important;
  max-width: var(--pd-frozen-total) !important;
  background: #16181d !important;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.14);
}
.planDetailTable .planDetailTotalLabel {
  position: sticky !important;
}
.planDetailTable {
  /* ===== Sticky row TOTAL column (matches footer behavior) ===== */
}
.planDetailTable .pdStickyRight {
  position: sticky !important;
  right: 0;
  z-index: 4;
}
.planDetailTable .MuiTableCell-head.pdStickyRight {
  z-index: 6;
  background: #000000 !important;
}
.planDetailTable .MuiTableCell-head.pdStickyRight.pdRowTotalHeader {
  background: #16181d !important;
}
.planDetailTable .pdRowTotalHeader,
.planDetailTable .pdRowTotalCell {
  width: auto !important;
  min-width: 60px !important;
  max-width: none !important;
  text-align: right !important;
  border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.14) inset;
  white-space: nowrap !important;
}
.planDetailTable .pdRowTotalCell {
  background: #16181d !important;
}
.planDetailTable .planDetailFrozenCell {
  background: #1b1d20 !important;
}
.planDetailTable .planDetailDataCell {
  background: #060707 !important;
}
.planDetailTable tr:nth-of-type(even) .planDetailDataCell {
  background: #060707 !important;
}
.planDetailTable tr:nth-of-type(odd) .planDetailDataCell {
  background: #060707 !important;
}
.planDetailTable tr:hover .planDetailFrozenCell {
  background: #4a4e54 !important;
}
.planDetailTable tr:hover .planDetailDataCell {
  background: #161b20 !important;
  box-shadow: inset 0 1px 0 rgba(143, 198, 255, 0.2), inset 0 -1px 0 rgba(143, 198, 255, 0.2);
}
.planDetailTable {
  /* Pending volume edit (before apply) */
}
.planDetailTable .planDetailDataCell.planDetailVolumeCellChanged {
  background: rgba(255, 193, 7, 0.2) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.5);
}
.planDetailTable tr:nth-of-type(even) .planDetailDataCell.planDetailVolumeCellChanged,
.planDetailTable tr:nth-of-type(odd) .planDetailDataCell.planDetailVolumeCellChanged {
  background: rgba(255, 193, 7, 0.2) !important;
}
.planDetailTable tr:hover .planDetailDataCell.planDetailVolumeCellChanged {
  background: rgba(255, 193, 7, 0.32) !important;
}
.planDetailTable th.planDetailDataHeader.planDetailVolumeColumnHeader,
.planDetailTable td.planDetailVolumeDataCell {
  width: 7rem !important;
  min-width: 7rem !important;
  max-width: 7rem !important;
  box-sizing: border-box !important;
  overflow: hidden;
  text-align: center !important;
}
.planDetailTable {
  /* Editable month volume cells: same row height in read vs write */
}
.planDetailTable td.planDetailVolumeDataCell {
  vertical-align: middle !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.planDetailTable .planDetailVolumeCellWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.planDetailTable .planDetailVolumeCellText {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: inherit;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.planDetailTable .MuiTableCell-root.planDetailVolumeDataCell,
.planDetailTable .MuiTableCell-head.planDetailDataHeader.planDetailVolumeColumnHeader {
  width: 5rem !important;
  min-width: 5rem !important;
  max-width: 5rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.planDetailTable .MuiTableCell-root.planDetailVolumeDataCell {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.planDetailTable .planDetailVolumeInput {
  flex: 1 1 0;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 18px !important;
  min-height: 0 !important;
  max-height: 18px !important;
  line-height: 18px !important;
  font-size: 12px !important;
  text-align: center;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  background: transparent !important;
  border: none !important;
  box-shadow: inset 0 -1px 0 0 #41ff88;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.planDetailTable {
  /* Sticky Total row at bottom (apply to cells for reliable table layout) */
}
.planDetailTable .planDetailTotalRow td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
  font-weight: 700;
  border-bottom: none !important;
  background: #16181d !important;
}
.planDetailTable .planDetailTotalRow {
  /* Keep existing left/right frozen behavior, but also pin to bottom */
}
.planDetailTable .planDetailTotalRow .pdStickyLeft,
.planDetailTable .planDetailTotalRow .pdStickyLeftSpan,
.planDetailTable .planDetailTotalRow .pdStickyRight {
  bottom: 0;
}
.planDetailTable .planDetailTotalRow .pdStickyLeft,
.planDetailTable .planDetailTotalRow .pdStickyLeftSpan {
  z-index: 7;
}
.planDetailTable .planDetailTotalRow .pdStickyRight {
  z-index: 7;
}
.planDetailTable .planDetailTotalRow {
  height: 35px;
}
.planHeaderButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #a8b0bc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
}
.planHeaderButton:hover {
  color: #ffffff;
}
.planHeaderButton.active {
  color: #41ff88;
}
.planHeaderTitle {
  display: inline-flex;
  align-items: center;
}
.planHeaderIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.numericCell {
  text-align: right;
}
.totalCell {
  color: #41ff88;
  font-weight: 700;
}
.tableEmpty {
  background-color: #10141b;
  border: 1px solid #1f2228;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: #7d8593;
}
.inlineEditPanel {
  border: 1px solid #2d3033;
  border-radius: 12px;
  background: #0a0b0d;
  padding: 12px 16px 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  overflow: hidden;
  position: relative;
}
.inlineEditPanel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px dashed #2d3033;
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
.inlineEditHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.inlineEditHeader h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
}
.inlineEditActions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.inlineEditTableWrap {
  overflow: auto;
}
.inlineEditTable {
  background: #0f1319;
}
.inlineEditTable th {
  background: #0a0c10;
  color: #a8b0bc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-bottom: 1px solid #181c23;
  border-right: 1px solid #181c23;
  white-space: nowrap;
}
.inlineEditTable td {
  color: #d6dde7;
  font-size: 12px;
  border-bottom: 1px solid #0f1116;
  border-right: 1px solid #0f1116;
  white-space: nowrap;
}
.dataPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: #121722;
  color: #e4e8ee;
  border: 1px solid #1c2029;
}
.dataPill.neutral {
  background: #13171f;
  color: #e4e8ee;
}
.dataPill.subtle {
  background: #10141b;
  color: #b3bdc9;
}
.planningTableWrapper::-webkit-scrollbar,
.planningTableContainer::-webkit-scrollbar,
.inlineEditTableWrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.planningTableWrapper::-webkit-scrollbar-track,
.planningTableContainer::-webkit-scrollbar-track,
.inlineEditTableWrap::-webkit-scrollbar-track {
  background: #000000;
}
.planningTableWrapper::-webkit-scrollbar-thumb,
.planningTableContainer::-webkit-scrollbar-thumb,
.inlineEditTableWrap::-webkit-scrollbar-thumb {
  background: #0f1116;
  border-radius: 10px;
}
.planningTableWrapper::-webkit-scrollbar-thumb:hover,
.planningTableContainer::-webkit-scrollbar-thumb:hover,
.inlineEditTableWrap::-webkit-scrollbar-thumb:hover {
  background: #1c2028;
}
.planningEmptyState {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 360px 1fr;
  background: linear-gradient(135deg, #08090b 0%, #0e1014 50%, #0a0c0f 100%);
  color: #d6dde7;
  font-family: "Kanit", sans-serif;
  overflow: hidden;
}
.planningEmptySidebar {
  border-right: 1px solid #1f2228;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #0b0d11;
}
.sidebarHeader {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sidebarHeader .sidebarPill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #1f2228;
  color: #41ff88;
  background: rgba(65, 255, 136, 0.08);
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.sidebarHeader .sidebarHint {
  margin: 0;
  color: #8e95a3;
  font-size: 13px;
}
.sidebarCard {
  background: linear-gradient(180deg, #10131a 0%, #0d0f14 100%);
  border: 1px solid #1f2228;
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebarCard h2 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0.3px;
}
.sidebarCard .muted {
  color: #8e95a3;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.sidebarCard .sidebarSteps {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sidebarCard .sidebarSteps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #c5ccd6;
  font-size: 13px;
}
.sidebarCard .stepBadge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #151a21;
  border: 1px solid #1f2228;
  color: #41ff88;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.sidebarCard .legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.sidebarCard .legendDot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-flex;
  border: 1px solid #1f2228;
}
.sidebarCard .legendDot.active {
  background: #41ff88;
}
.sidebarCard .legendDot.inactive {
  background: #ff6b6b;
}
.sidebarCard .legendLabel {
  color: #8e95a3;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sidebarFooter {
  display: flex;
  gap: 10px;
  margin-top: auto;
  flex-wrap: wrap;
}
.tag {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid #1f2228;
  background: #0f1319;
  color: #c5ccd6;
  font-size: 12px;
  letter-spacing: 0.3px;
}
.tag.subtle {
  color: #8e95a3;
  background: #0c0f13;
}
.planningEmptyPreview {
  display: flex;
  flex-direction: column;
  padding: 28px;
  gap: 14px;
  overflow: hidden;
}
.previewHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.previewHeader h3 {
  margin: 4px 0 0 0;
  color: #ffffff;
  font-size: 18px;
}
.previewHeader .muted {
  margin: 6px 0 0 0;
  color: #8e95a3;
  font-size: 13px;
}
.eyebrow {
  margin: 0;
  color: #6d7480;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.statusChip {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border: 1px solid #1f2228;
  background: rgba(65, 255, 136, 0.08);
  color: #41ff88;
}
.mutedChip {
  background: #13171f;
  color: #8e95a3;
}
.previewToolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbarItem {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #0f1319;
  border: 1px solid #1f2228;
  color: #c5ccd6;
  font-size: 12px;
}
.toolbarItem .toolbarIcon {
  color: #41ff88;
  display: inline-flex;
  align-items: center;
}
.previewTable {
  border: 1px solid #1f2228;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0e13;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.previewHeaderRow {
  display: grid;
  grid-template-columns: 80px 110px 80px 120px 120px 120px 110px repeat(4, 1fr);
  background: #0f1218;
  border-bottom: 1px solid #1f2228;
}
.previewHeaderCell {
  padding: 12px 10px;
  color: #9aa2ad;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border-right: 1px solid #1f2228;
}
.previewHeaderCell:last-child {
  border-right: none;
}
.previewBody {
  display: flex;
  flex-direction: column;
}
.previewRow {
  display: grid;
  grid-template-columns: 80px 110px 80px 120px 120px 120px 110px repeat(4, 1fr);
  min-height: 40px;
  border-bottom: 1px solid #11151c;
}
.previewRow:nth-child(odd) {
  background: #0e1117;
}
.previewRow:nth-child(even) {
  background: #0c0f14;
}
.previewCell {
  padding: 10px;
  color: #c5ccd6;
  font-size: 12px;
  border-right: 1px solid #11151c;
  display: flex;
  align-items: center;
}
.previewCell:last-child {
  border-right: none;
}
.previewCell .placeholderDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1f2228;
  display: inline-flex;
}
.statusBadge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: "Kanit", sans-serif;
}
.statusBadge.active {
  background-color: rgba(65, 255, 136, 0.15);
  color: #41ff88;
  border: 1px solid #41ff88;
}
.statusBadge.inactive {
  background-color: rgba(179, 179, 179, 0.15);
  color: #b2b7bf;
  border: 1px solid #b2b7bf;
}
.actionsMenu .menuItem {
  color: #ffffff !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  transition: background-color 0.2s ease;
  font-family: "Kanit", sans-serif;
}
.actionsMenu .menuItem:hover {
  background-color: #25262d !important;
}
.actionsMenu .menuItem svg {
  color: #41ff88;
}
.dialogTitle {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 24px !important;
  border-bottom: 1px solid #2d3033;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: "Kanit", sans-serif;
}
.dialogContent {
  padding: 24px !important;
  color: #ffffff;
  background-color: #060707;
}
.dialogContent .formGroup {
  margin-bottom: 24px;
}
.dialogContent .formGroup:last-child {
  margin-bottom: 0;
}
.dialogContent .formLabel {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: "Kanit", sans-serif;
}
.dialogContent .formInput {
  width: 100%;
}
.uploadErrorPanel {
  margin-top: 20px;
  padding: 16px;
  background-color: rgba(239, 83, 80, 0.1);
  border: 1px solid rgba(239, 83, 80, 0.4);
  border-radius: 8px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.uploadErrorPanel .uploadErrorPanelHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.uploadErrorPanel .uploadErrorIcon {
  color: #ef5350;
  font-size: 20px;
  flex-shrink: 0;
}
.uploadErrorPanel .uploadErrorTitle {
  font-size: 13px;
  font-weight: 600;
  color: #ef5350;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.uploadErrorPanel .uploadErrorSummary {
  font-size: 13px;
  color: #b2b7bf;
  margin: 0 0 8px 0;
  line-height: 1.4;
}
.uploadErrorPanel .uploadErrorHint {
  font-size: 12px;
  color: #797e86;
  margin: 0 0 12px 0;
}
.uploadErrorPanel .uploadErrorList {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  font-size: 12px;
  font-family: monospace;
  color: #b2b7bf;
  padding-right: 4px;
}
.uploadErrorPanel .uploadErrorList::-webkit-scrollbar {
  width: 6px;
}
.uploadErrorPanel .uploadErrorList::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}
.uploadErrorPanel .uploadErrorList::-webkit-scrollbar-thumb {
  background: #2d3033;
  border-radius: 3px;
}
.uploadErrorPanel .uploadErrorItem {
  padding: 4px 0;
  border-bottom: 1px solid rgba(45, 48, 51, 0.5);
  line-height: 1.3;
}
.uploadErrorPanel .uploadErrorItem:last-child {
  border-bottom: none;
}
.dialogActions {
  padding: 20px 24px !important;
  border-top: 1px solid #2d3033;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background-color: #060707;
}
.cancelButton,
.confirmButton,
.deleteConfirmButton,
.saveButton {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 6px 20px !important;
  border-radius: 4px !important;
  transition: all 0.3s ease !important;
  letter-spacing: 0.5px;
  font-family: "Kanit", sans-serif;
}
.cancelButton {
  color: #ffffff !important;
  border: 1px solid #2d3033 !important;
  background-color: transparent !important;
}
.cancelButton:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
}
.cancelButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.saveButton,
.confirmButton {
  background-color: #41ff88 !important;
  color: #000000 !important;
}
.saveButton:hover:not(:disabled),
.confirmButton:hover:not(:disabled) {
  background-color: #2da66a !important;
  transform: scale(1.02);
}
.saveButton:active:not(:disabled),
.confirmButton:active:not(:disabled) {
  transform: scale(0.98);
}
.saveButton:disabled,
.confirmButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.saveButtonPseudoDisabled {
  opacity: 0.5;
  background-color: #2a8f58 !important;
  color: rgba(0, 0, 0, 0.75) !important;
  cursor: not-allowed !important;
  position: relative;
  pointer-events: auto !important;
  transform: none !important;
}
.saveButtonPseudoDisabled:hover {
  background-color: #2a8f58 !important;
  transform: none !important;
}
.saveButtonPseudoDisabled:hover::after {
  opacity: 1;
}
.deleteConfirmButton {
  background-color: #ff6b6b !important;
  color: #ffffff !important;
}
.deleteConfirmButton:hover:not(:disabled) {
  background-color: #ff4444 !important;
  transform: scale(1.02);
}
.deleteConfirmButton:active:not(:disabled) {
  transform: scale(0.98);
}
.deleteConfirmButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.uploadZone {
  border: 2px dashed #2d3033;
  border-radius: 8px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #1b1d20;
  position: relative;
}
.uploadZone:hover {
  border-color: #41ff88;
  background-color: rgba(65, 255, 136, 0.05);
}
.uploadZone.active {
  border-color: #41ff88;
  background-color: rgba(65, 255, 136, 0.1);
}
.uploadZone.hasFile {
  border-color: #41ff88;
  background-color: rgba(65, 255, 136, 0.05);
}
.uploadZone .uploadIcon {
  font-size: 48px !important;
  color: #41ff88;
  margin-bottom: 12px;
}
.uploadZone .uploadText {
  font-size: 14px;
  color: #ffffff;
  margin: 8px 0;
  font-family: "Kanit", sans-serif;
}
.uploadZone .uploadText .clickText {
  color: #41ff88;
  font-weight: 600;
}
.uploadZone .uploadSubtext {
  font-size: 12px;
  color: #797e86;
  margin: 0;
  font-family: "Kanit", sans-serif;
}
.uploadZone .fileInputLabel {
  cursor: pointer;
  display: block;
}
.fileSelected {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: rgba(65, 255, 136, 0.1);
  border: 1px solid #41ff88;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fileSelected .selectedFileName {
  color: #41ff88;
  font-size: 13px;
  margin: 0;
  font-weight: 500;
  font-family: "Kanit", sans-serif;
}
.fileSelected .removeFileButton {
  padding: 6px 12px;
  background-color: transparent;
  border: 1px solid #41ff88;
  color: #41ff88;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.fileSelected .removeFileButton:hover:not(:disabled) {
  background-color: #41ff88;
  color: #000000;
}
.fileSelected .removeFileButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.confirmMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}
.confirmMessage .messageIcon {
  font-size: 48px !important;
  color: #41ff88;
}
.confirmMessage .messageIcon.deleteIcon {
  color: #ff6b6b;
}
.confirmMessage p {
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
}
.confirmMessage p strong {
  color: #41ff88;
  font-weight: 600;
}
.confirmMessage p.subText {
  font-size: 12px;
  color: #797e86;
}
.planningFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #2d3033;
  margin-top: 20px;
}
.uploadPlanLink {
  padding: 10px 20px;
  background-color: transparent;
  color: #b2b7bf;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Kanit", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.uploadPlanLink:hover {
  color: #41ff88;
  transform: scale(1.02);
}
.uploadPlanLink:active {
  transform: scale(0.98);
}
.uploadPlanLink:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 1024px) {
  .planningContainer {
    padding: 16px;
  }
  .planningHeader {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .planningHeader h2 {
    font-size: 20px;
  }
  .uploadPlanButton {
    width: 100%;
    justify-content: center;
  }
  .planningTable .tableHeaderCell,
  .planningTable .tableBodyCell {
    padding: 12px 8px !important;
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  .planningContainer {
    padding: 12px;
  }
  .planningHeader h2 {
    font-size: 18px;
  }
  .uploadZone {
    padding: 24px 12px;
  }
  .uploadZone .uploadIcon {
    font-size: 36px !important;
  }
}
.mineplanEditHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-top: 4px;
  flex-shrink: 0;
  background: transparent;
}
.mineplanEditHeader h3 {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.mineplanEditHeaderActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mineplanEditBody {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 12px;
  background: transparent;
}
.mineplanEditCard {
  padding: 0;
  background: transparent;
  border: none;
}
.mineplanEditGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
}
.mineplanField {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mineplanField label {
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.mineplanField {
  /* react-select container */
}
.mineplanField .mineplanReactSelect {
  width: 100%;
}
.mineplanField .MuiOutlinedInput-root {
  background: #111214;
  border-radius: 8px;
  color: #ffffff;
  min-height: 36px;
}
.mineplanField .MuiOutlinedInput-root fieldset {
  border-color: #2a2f39;
}
.mineplanField .MuiOutlinedInput-root:hover fieldset {
  border-color: #3b4250;
}
.mineplanField .MuiOutlinedInput-root.Mui-focused fieldset {
  border-color: #41ff88;
}
.mineplanField .MuiOutlinedInput-root input,
.mineplanField .MuiOutlinedInput-root .MuiSelect-select {
  color: #ffffff;
  font-size: 12px;
  padding: 8px 10px;
}
.mineplanField .MuiInputBase-input::placeholder {
  color: #a8afb9;
  opacity: 1;
}
.mineplanMonthField .MuiOutlinedInput-root,
.mineplanMonthField .MuiInputBase-input,
.mineplanMonthField input[type=month] {
  cursor: pointer !important;
}
.mineplanMonthField input[type=month]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}
.mineplanFieldDisabled {
  opacity: 0.6;
  pointer-events: none;
}
.mineplanFieldDisabled label {
  color: #797e86;
}
.mineplanFieldFull {
  grid-column: 1/-1;
}
.mineplanEditRowActions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.mineplanEmpty {
  color: #797e86;
  padding: 20px;
  text-align: center;
}
@media (max-width: 900px) {
  .mineplanEditGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mineplanFieldFull {
    grid-column: auto;
  }
  .mineplanEditHeader {
    flex-direction: column;
    align-items: flex-start;
  }
  .mineplanEditHeaderActions {
    width: 100%;
  }
}
@media (max-width: 600px) {
  .mineplanEditGrid {
    grid-template-columns: 1fr;
  }
}.successSection {
  padding: 10px;
}
.successSection--withMargin {
  margin-bottom: 16px;
}

.successSectionHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.successSectionLabel {
  color: #e0e0e0;
  font-weight: 600;
  font-size: 14px;
}
.successSectionLabel--sm {
  font-size: 13px;
}

.successStatsList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.successStatsList--indented {
  padding-left: 26px;
}

.successStatRow {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  background-color: #2a2a2a;
  border-radius: 4px;
}

.successStatLabel {
  color: #888;
  font-size: 12px;
}

.successStatValue {
  font-weight: 700;
  font-size: 12px;
}

.diffSection {
  padding: 10px 16px;
}

.diffSectionHeader {
  margin-bottom: 8px;
  color: #888;
  font-size: 13px;
}
.diffSectionHeader--spaced {
  margin-top: 14px;
}

.diffRow {
  display: flex;
  justify-content: space-between;
  padding: 6px 10px;
  background-color: #2a2a2a;
  border-radius: 4px;
  margin-bottom: 6px;
}

.diffRowLabel {
  color: #ccc;
}

.applyButtonSection {
  padding: 8px 16px;
}

.applyButtonSectionRow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.applyButtonSectionIcon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.applyButtonSectionIcon--deleted {
  color: #ff6b6b;
}
.applyButtonSectionIcon--new {
  color: #41ff88;
}
.applyButtonSectionIcon--edited {
  color: #ffd166;
}

.applyButtonSectionLabel {
  flex: 1;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.applyButtonSectionCount {
  color: #e0e0e0;
  font-weight: 700;
  font-size: 13px;
}

.applyButtonChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 4px;
}

.applyButtonChip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
  background-color: #2a2a2a;
  color: #e0e0e0;
}
.applyButtonChip--deleted {
  border: 1px solid rgba(255, 107, 107, 0.2);
}
.applyButtonChip--new {
  border: 1px solid rgba(65, 255, 136, 0.2);
}
.applyButtonChip--edited {
  border: 1px solid rgba(255, 209, 102, 0.2);
}

.applyButtonChipDot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.applyButtonChipDot--deleted {
  background-color: #ff6b6b;
}
.applyButtonChipDot--new {
  background-color: #41ff88;
}
.applyButtonChipDot--edited {
  background-color: #ffd166;
}._topBarRight_1v090_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-right: 20px;
  justify-content: flex-end;
}

._notificationSlot_1v090_10 {
  flex-shrink: 0;
  display: flex-end;
  align-items: center;
}

._planDetailBulkApplyPortal_1v090_16 {
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
}

._planDetailCancelWrap_1v090_24 {
  display: flex;
  justify-content: flex-end;
}

._planDetailApplyWrap_1v090_29 {
  display: flex;
  justify-content: flex-end;
  margin-right: 8px;
}

._planEditingChip_1v090_35 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #8fc6ff;
  background: rgba(47, 128, 237, 0.2);
  vertical-align: middle;
}

._headerStatusChip_1v090_49 {
  margin-left: 12px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
}

._roadPill_1v090_60 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #ffb347;
  background: rgba(255, 120, 0, 0.2);
  vertical-align: middle;
}

._dumpModePill_1v090_74 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #8fc6ff;
  background: rgba(47, 128, 237, 0.2);
  vertical-align: middle;
}

._polygonPill_1v090_88 {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #cc99ff;
  background: rgba(128, 0, 255, 0.2);
  vertical-align: middle;
}

._actionPanelBtnTextContainer_1v090_102 {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108 {
  display: flex;
  cursor: pointer;
  align-items: center;
  border-radius: 7px;
  padding: 0 4px;
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108:hover {
  background-color: var(--primary-color);
  color: black;
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108 svg {
  height: 28px;
  width: 28px;
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108 svg {
  transition: transform 0.25s ease-in-out;
  transform: rotate(180deg);
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108._active_1v090_127 {
  background-color: var(--primary-color);
  color: black;
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108._active_1v090_127 svg {
  transform: rotate(0deg);
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108._active_1v090_127:hover {
  opacity: 0.8;
}
._actionPanelBtnTextContainer_1v090_102 ._button_1v090_108._hide_1v090_137 {
  opacity: 0;
  cursor: auto;
}

._logoClass_1v090_142 {
  width: 40px;
  height: auto;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  padding: 6px;
  box-sizing: border-box;
  background-color: #1d1e20;
  border-radius: 4px;
  border: 1px solid rgb(62, 61, 61);
  cursor: pointer;
}
._logoClass_1v090_142 ._chevronWrap_1v090_156 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(65, 255, 136, 0.5);
  border-radius: 3px;
  padding: 2px;
}
._logoClass_1v090_142:hover {
  flex-direction: column;
  gap: 2px;
}

._active_1v090_127 {
  background-color: var(--primary-color) !important;
  color: black !important;
}
._active_1v090_127 svg {
  transform: rotate(0deg) !important;
}
._active_1v090_127:hover {
  opacity: 0.8;
}._page_1949i_1 {
  background: var(--surface-page);
  height: 100%;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

._topRow_1949i_12 {
  flex: 0 0 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 40px;
  box-sizing: border-box;
}

._filters_1949i_23 {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: nowrap;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
._filters_1949i_23::-webkit-scrollbar {
  display: none;
}

._kpiBar_1949i_37 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

._summary_1949i_43 {
  flex: 0 0 30%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
._summary_1949i_43 > * {
  flex: 1;
  min-height: 0;
}

._alerts_1949i_54 {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
._alerts_1949i_54 > * {
  flex: 1;
  min-height: 0;
}

/* Scrollbar styling */._kpiBar_128jj_1 {
  background: var(--surface-component);
  border: 1px solid var(--border-component);
  border-radius: 8px;
  display: flex;
  align-items: stretch;
  height: 40px;
  box-sizing: border-box;
  margin-right: 15px;
}

._kpiItem_128jj_12 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-right: 1px solid var(--border-component);
}
._kpiItem_128jj_12:last-child {
  border-right: none;
}

._kpiIcon_128jj_23 {
  width: 24px;
  height: 24px;
  background: var(--surface-inset);
  border: 1px solid var(--border-component);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #a3a8af;
}

._kpiMeta_128jj_36 {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

._kpiLabel_128jj_42 {
  font-size: 9px;
  color: #a3a8af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._kpiValue_128jj_49 {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}._sectionCard_nxohj_1 {
  background: var(--surface-component);
  border: 1px solid var(--border-component);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

._sectionHeader_nxohj_11 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-component);
  min-height: 36px;
}

._sectionTitle_nxohj_20 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a3a8af;
}

._summaryGrid_nxohj_28 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

._activityPanel_nxohj_33 {
  padding: 10px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border-component);
}
._activityPanel_nxohj_33:last-child {
  border-right: none;
}

._activityTitle_nxohj_47 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a3a8af;
}

._activityMain_nxohj_55 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  min-width: 0;
  min-height: 0;
}

._donut_nxohj_64 {
  flex-shrink: 0;
  width: clamp(72px, min(8vw, 16vh), 140px);
  aspect-ratio: 1/1;
  position: relative;
  top: -10px;
}

._legend_nxohj_72 {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 1;
  min-width: 120px;
}

._legendRow_nxohj_80 {
  display: flex;
  align-items: center;
  gap: 6px;
}

._legendSwatch_nxohj_86 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

._legendLabel_nxohj_93 {
  flex: 1;
  font-family: "Kanit", "Inter", sans-serif;
  font-size: 12px;
  color: #d0d4db;
  text-align: left;
}

._legendValue_nxohj_101 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

._legendTotal_nxohj_107 {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border-component);
  padding-top: 6px;
}

._legendTotalLabel_nxohj_115 {
  flex: 1;
  font-family: "Kanit", "Inter", sans-serif;
  font-size: 11px;
  color: #a3a8af;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
}

._legendTotalValue_nxohj_125 {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

._sparklines_nxohj_131 {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--border-component);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

._sparklineRows_nxohj_142 {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

._sparklinesHeader_nxohj_150 {
  display: flex;
  justify-content: space-between;
  font-family: "Kanit", "Inter", sans-serif;
  font-size: 11px;
  color: #797e86;
}

._sparklineRow_nxohj_142 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

._sparklineLegendInline_nxohj_165 {
  display: flex;
  align-items: center;
  gap: 2px;
}

._sparklineLegend_nxohj_165 {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 52px;
}

._sparklineSwatch_nxohj_178 {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

._sparklineLabel_nxohj_185 {
  font-family: "Kanit", "Inter", sans-serif;
  font-size: 9px;
  color: #797e86;
  white-space: nowrap;
}

._sparklineLine_nxohj_192 {
  flex: 1;
  min-width: 0;
}

._sparklineShift_nxohj_197 {
  font-family: "Kanit", "Inter", sans-serif;
  font-size: 9px;
  color: #797e86;
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

._sparklineStats_nxohj_206 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-family: "Kanit", "Inter", sans-serif;
  font-size: 10px;
  color: #797e86;
}
._sparklineStats_nxohj_206 strong {
  color: #fff;
}@keyframes _spin_1ooqf_14 {
  to {
    transform: rotate(360deg);
  }
}
._wrapper_1ooqf_6 {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._spinning_1ooqf_14 {
  animation: _spin_1ooqf_14 0.8s linear infinite;
}

._labelWrapper_1ooqf_18 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  gap: 2px;
}

._label_1ooqf_18 {
  font-family: "Saira Condensed", Inter, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

._sublabel_1ooqf_36 {
  color: #797e86;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}._badge_1bb1e_1 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  width: fit-content;
  white-space: nowrap;
}

._icon_1bb1e_15 {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
}._panel_3uadk_1 {
  flex-shrink: 0;
  background: #111314;
  border-top: 1px solid #2d3033;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0px;
  height: 30%;
  max-height: 25vh;
  overflow: hidden;
}

._header_3uadk_16 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

._headerLeft_3uadk_23 {
  display: flex;
  align-items: center;
  gap: 14px;
}

._divider_3uadk_29 {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

._title_3uadk_36 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #e2e6eb;
}

._field_3uadk_43 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
}

._fieldLabel_3uadk_50 {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #7b8288;
  text-transform: uppercase;
  text-align: left;
}

._fieldValue_3uadk_59 {
  font-size: 13px;
  font-weight: 700;
  color: #e2e6eb;
  display: flex;
  align-items: center;
  gap: 6px;
}

._liveDot_3uadk_68 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

._legend_3uadk_76 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8a9099;
}

._legendDot_3uadk_84 {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

._headerRight_3uadk_91 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

._legendItem_3uadk_99 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #c0c6cd;
  white-space: nowrap;
}

._legendDot_3uadk_84 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

._badge_3uadk_115 {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  border: 1px solid;
}

._badgeElevated_3uadk_123 {
  color: #ff840a;
  border-color: #ff840a;
  background: rgba(255, 132, 10, 0.1);
}

._badgeCritical_3uadk_130 {
  color: #fb3558;
  border-color: #fb3558;
  background: rgba(251, 53, 88, 0.1);
}

._eventCount_3uadk_137 {
  color: #adadad;
  border-color: #adadad;
  background: rgba(173, 173, 173, 0.1);
}

._closeButton_3uadk_144 {
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  padding: 5px;
  line-height: 1;
  font-size: 15px;
  border-radius: 8px;
  transition: background 150ms;
}
._closeButton_3uadk_144:hover {
  background: rgba(80, 80, 80, 0.825);
}

._resetZoom_3uadk_161 {
  background: none;
  border: 1px solid #41ff88;
  color: #41ff88;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 150ms;
}
._resetZoom_3uadk_161:hover:not(:disabled) {
  background: rgba(65, 255, 136, 0.1);
}
._resetZoom_3uadk_161:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

._detailPanel_3uadk_182 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 320px;
  background: #1a1d1f;
  border-left: 1px solid #2d3033;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.4);
}

._detailHeader_3uadk_196 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #2d3033;
  flex-shrink: 0;
}

._detailTitle_3uadk_205 {
  font-size: 12px;
  font-weight: 700;
  color: #e2e6eb;
  letter-spacing: 0.04em;
}

._detailClose_3uadk_212 {
  background: none;
  border: none;
  color: #8a9099;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
}
._detailClose_3uadk_212:hover {
  color: #e2e6eb;
}

._detailList_3uadk_225 {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

._detailRow_3uadk_231 {
  padding: 8px 16px;
  border-bottom: 1px solid #22262a;
}
._detailRow_3uadk_231:last-child {
  border-bottom: none;
}

._detailPrimary_3uadk_239 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: #e2e6eb;
  font-weight: 600;
  margin-bottom: 3px;
}

._detailTime_3uadk_249 {
  font-size: 11px;
  font-weight: 400;
  color: #8a9099;
}

._detailSecondary_3uadk_255 {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #8a9099;
}

._trackWrap_3uadk_262 {
  position: relative;
  width: 97%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  margin: 0 auto;
}

._clusters_3uadk_272 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

._cluster_3uadk_272 {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: all;
  z-index: 1;
}

._dot_3uadk_290 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: default;
  transition: transform 100ms;
  display: flex;
  align-items: center;
  justify-content: center;
}
._dot_3uadk_290:hover {
  transform: scale(1.2);
}

._dotCount_3uadk_304 {
  font-size: 9px;
  font-weight: 700;
  color: #0a1a10;
  line-height: 1;
  pointer-events: none;
}

._axis_3uadk_312 {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 20px;
  transform: translateY(-50%);
  border-top: 1px solid #2d3033;
  pointer-events: none;
}

._tick_3uadk_323 {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px;
  color: #b5b4b4;
  top: 4px;
  white-space: nowrap;
}
._tick_3uadk_323::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 1px;
  height: 5px;
  background: #dcdcdc;
}._overlay_qlpvy_1 {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

._modal_qlpvy_13 {
  position: relative;
  width: min(1160px, 100%);
  height: 85vh;
  background: #0e0f10;
  border: 1px solid #2d3033;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._header_qlpvy_26 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #2d3033;
  background: #000;
  flex-shrink: 0;
}

._sevDot_qlpvy_36 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

._headerTitle_qlpvy_43 {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

._equipName_qlpvy_49 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

._operatorName_qlpvy_57 {
  font-size: 18px;
  color: #d0d4db;
  font-weight: 500;
}

._headerSpacer_qlpvy_63 {
  flex: 1;
}

._headerStat_qlpvy_67 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 4px 14px;
  border-left: 1px solid #2d3033;
  min-width: 120px;
}

._statLabel_qlpvy_76 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #797e86;
}

._statValue_qlpvy_86 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

._closeBtn_qlpvy_95 {
  background: transparent;
  border: 1px solid #2d3033;
  border-radius: 8px;
  color: #a3a8af;
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
._closeBtn_qlpvy_95:hover {
  color: #fff;
  border-color: #41454b;
}

._body_qlpvy_114 {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

._videoArea_qlpvy_121 {
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #000;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

._videoEl_qlpvy_133 {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

._videoPlaceholder_qlpvy_139 {
  color: #797e86;
  font-size: 13px;
}

._videoError_qlpvy_144 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  width: 100%;
}

._videoErrorTitle_qlpvy_154 {
  font-size: 14px;
  font-weight: 600;
  color: #a3a8af;
}

._videoErrorSub_qlpvy_160 {
  font-size: 12px;
  color: #41454b;
}

._hud_qlpvy_165 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}

._hudTop_qlpvy_175 {
  display: flex;
  align-items: center;
}

._hudSpacer_qlpvy_180 {
  flex: 1;
}

._hudTimecode_qlpvy_184 {
  font-size: 11px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #2d3033;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

._crosshair_qlpvy_195 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 220px;
}

._bracket_qlpvy_204 {
  position: absolute;
  width: 20px;
  height: 20px;
}
._bracket_qlpvy_204._tl_qlpvy_209 {
  top: 0;
  left: 0;
  border-top: 2px solid var(--sev);
  border-left: 2px solid var(--sev);
}
._bracket_qlpvy_204._tr_qlpvy_215 {
  top: 0;
  right: 0;
  border-top: 2px solid var(--sev);
  border-right: 2px solid var(--sev);
}
._bracket_qlpvy_204._bl_qlpvy_221 {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid var(--sev);
  border-left: 2px solid var(--sev);
}
._bracket_qlpvy_204._br_qlpvy_204 {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid var(--sev);
  border-right: 2px solid var(--sev);
}

._hudBottom_qlpvy_234 {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

._stateLabel_qlpvy_240 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid #2d3033;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

._resolution_qlpvy_254 {
  font-size: 10px;
  color: #797e86;
  background: rgba(0, 0, 0, 0.55);
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #2d3033;
}

._sidebar_qlpvy_263 {
  width: 280px;
  flex-shrink: 0;
  border-left: 1px solid #2d3033;
  background: #0a0b0c;
  padding: 16px;
  padding-top: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._sideBlock_qlpvy_276 {
  display: flex;
  flex-direction: column;
  text-align: left;
}

._sideLabel_qlpvy_282 {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #797e86;
  margin-bottom: 4px;
}

._sideValue_qlpvy_290 {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

._sideValueMono_qlpvy_296 {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

._sideMeta_qlpvy_303 {
  font-size: 11px;
  color: #797e86;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

._severityBadge_qlpvy_310 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid;
  font-size: 13px;
  font-weight: 700;
  align-self: flex-start;
}

._sevBadgeDot_qlpvy_322 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

._signalsGrid_qlpvy_329 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
}

._signalRow_qlpvy_335 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid #1b1d20;
}

._signalLabel_qlpvy_343 {
  font-size: 12px;
  color: #a3a8af;
}

._signalValue_qlpvy_348 {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

._taskSpeedRow_qlpvy_354 {
  display: flex;
  gap: 0;
}
._taskSpeedRow_qlpvy_354 ._sideBlock_qlpvy_276 {
  flex: 1;
  padding: 0 10px;
}
._taskSpeedRow_qlpvy_354 ._sideBlock_qlpvy_276:first-child {
  padding-left: 0;
  border-right: 1px solid #2a2d32;
}
._taskSpeedRow_qlpvy_354 ._sideBlock_qlpvy_276:last-child {
  padding-right: 0;
}

._sideDivider_qlpvy_370 {
  border: none;
  border-top: 1px solid #2a2d32;
  margin: 0;
}

._spacer_qlpvy_376 {
  flex: 1;
}

._reviewPanel_qlpvy_380 {
  padding: 5px;
  border-radius: 8px;
  background: #13151a;
  border: 1px solid #2d3033;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._reviewPanelHeader_qlpvy_390 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #797e86;
  font-weight: 700;
}

._reviewBtn_qlpvy_401 {
  width: 100%;
  padding: 5px;
  border-radius: 6px;
  background: #1b1d20;
  border: 1px solid #2d3033;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  text-align: center;
  align-items: center;
  justify-content: left;
  transition: border-color 0.15s, color 0.15s;
}
._reviewBtn_qlpvy_401:hover {
  border-color: var(--accent);
  color: var(--accent);
}
._reviewBtn_qlpvy_401:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

._reviewDone_qlpvy_426 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._reviewDoneText_qlpvy_432 {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}

._reviewDoneLabel_qlpvy_440 {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

._reviewDoneMeta_qlpvy_446 {
  font-size: 10px;
  color: #797e86;
  font-variant-numeric: tabular-nums;
}

._undoBtn_qlpvy_452 {
  background: transparent;
  border: 1px solid #2d3033;
  border-radius: 6px;
  color: #a3a8af;
  width: 26px;
  height: 26px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s;
}
._undoBtn_qlpvy_452:hover {
  color: #fff;
}

._sideActions_qlpvy_470 {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
._sideActions_qlpvy_470 > * {
  flex: 1;
}

._exportBtn_qlpvy_479 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #ffc700;
  border: none;
  color: #1b1d20;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
._exportBtn_qlpvy_479:hover {
  opacity: 0.9;
}

._playback_qlpvy_498 {
  border-top: 1px solid #2d3033;
  background: #000;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

._iconBtn_qlpvy_508 {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #1b1d20;
  border: 1px solid #2d3033;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
._iconBtn_qlpvy_508:hover {
  background: #252729;
  border-color: #41454b;
}
._iconBtn_qlpvy_508:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
._iconBtn_qlpvy_508:disabled:hover {
  background: #1b1d20;
  border-color: #2d3033;
}

._playBtn_qlpvy_535 {
  background: #ffc700;
  border-color: #ffc700;
  color: #1b1d20;
}
._playBtn_qlpvy_535:hover {
  background: #e6b300;
  border-color: #e6b300;
}

._scrubberWrap_qlpvy_545 {
  flex: 1;
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
}

._scrubberTrack_qlpvy_553 {
  position: relative;
  width: 100%;
  height: 6px;
  background: #1b1d20;
  border-radius: 3px;
  overflow: hidden;
}

._scrubberFill_qlpvy_562 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, #ffc700 0%, #ff840a 100%);
  border-radius: 3px;
}

._eventMarker_qlpvy_571 {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--sev);
  box-shadow: 0 0 8px var(--sev);
  transform: translateX(-50%);
}

._scrubberInput_qlpvy_581 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  opacity: 0;
  cursor: pointer;
}

._playbackTime_qlpvy_590 {
  font-size: 12px;
  color: #fff;
  min-width: 90px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

._shiftTimeline_qlpvy_599 {
  border-top: 1px solid #2d3033;
  background: #0a0b0c;
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

._timelineHeader_qlpvy_609 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._timelineTitle_qlpvy_615 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

._timelineRange_qlpvy_623 {
  font-size: 11px;
  color: #797e86;
  font-variant-numeric: tabular-nums;
}

._countChip_qlpvy_629 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

._zoomControls_qlpvy_641 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
}

._zoomBtn_qlpvy_648 {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: #1b1d20;
  border: 1px solid #2d3033;
  color: #a3a8af;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
._zoomBtn_qlpvy_648:hover:not(:disabled) {
  background: #252729;
  color: #fff;
}
._zoomBtn_qlpvy_648:disabled {
  opacity: 0.35;
  cursor: default;
}

._zoomLevel_qlpvy_672 {
  font-size: 10px;
  color: #797e86;
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
}

._trackContainer_qlpvy_680 {
  overflow-x: auto;
  overflow-y: visible;
  margin: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: #2d3033 transparent;
}
._trackContainer_qlpvy_680::-webkit-scrollbar {
  height: 4px;
}
._trackContainer_qlpvy_680::-webkit-scrollbar-thumb {
  background: #2d3033;
  border-radius: 2px;
}

._timelineTrack_qlpvy_695 {
  position: relative;
  height: 58px;
}

._hourTick_qlpvy_700 {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

._hourLine_qlpvy_711 {
  width: 1px;
  flex: 1;
  background: repeating-linear-gradient(180deg, #2d3033 0 2px, transparent 2px 5px);
  opacity: 0.7;
}

._hourLabel_qlpvy_718 {
  font-size: 9px;
  color: #797e86;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

._timelineRail_qlpvy_725 {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  height: 2px;
  background: #2d3033;
  border-radius: 1px;
}

._eventDot_qlpvy_735 {
  position: absolute;
  top: 28px;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

._dot_qlpvy_745 {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid;
  transition: all 0.15s;
}

._dotSelected_qlpvy_753 {
  width: 16px;
  height: 16px;
}

._nowLabel_qlpvy_758 {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

._timeLabel_qlpvy_769 {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #0e0f10;
  border: 1px solid;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

._dotGroup_qlpvy_785 {
  width: auto !important;
  height: 22px !important;
  border-radius: 11px !important;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._dotCount_qlpvy_795 {
  font-size: 11px;
  font-weight: 800;
  color: #0a0b0c;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

._dotArrow_qlpvy_804 {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  line-height: 1;
  pointer-events: none;
  opacity: 0.8;
}

button:focus,
button:focus-visible {
  outline: none !important;
}

._drillDown_qlpvy_820 {
  border-top: 1px solid #2d3033;
  background: #060708;
  padding: 8px 18px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._drillDownHeader_qlpvy_829 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._drillDownTitle_qlpvy_835 {
  font-size: 10px;
  color: #797e86;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

._drillDownClose_qlpvy_842 {
  background: transparent;
  border: 1px solid #41454b;
  border-radius: 4px;
  color: #41454b;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}
._drillDownClose_qlpvy_842:hover {
  border-color: #fff;
  color: #fff;
}

._drillDownContainer_qlpvy_863 {
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  scrollbar-color: #2d3033 transparent;
}
._drillDownContainer_qlpvy_863::-webkit-scrollbar {
  height: 4px;
}
._drillDownContainer_qlpvy_863::-webkit-scrollbar-thumb {
  background: #2d3033;
  border-radius: 2px;
}

._drillDownTrack_qlpvy_877 {
  position: relative;
  height: 48px;
  margin: 0 8px;
}

._drillDownRail_qlpvy_883 {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #2d3033;
  transform: translateY(-50%);
}

._drillDot_qlpvy_893 {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

._drillDotLabel_qlpvy_907 {
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: 2px;
  pointer-events: none;
}._tableWrapper_ys5yt_1 {
  overflow-x: auto;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

._tableHeader_ys5yt_8 {
  display: flex;
  align-items: center;
  background: var(--surface-component);
  height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-component);
  min-width: 900px;
  position: sticky;
  top: 0;
  z-index: 8;
}

._headerCell_ys5yt_21 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: default;
  user-select: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #797e86;
  white-space: nowrap;
}
._headerCell_ys5yt_21._sortable_ys5yt_35 {
  cursor: pointer;
}
._headerCell_ys5yt_21._active_ys5yt_38 {
  color: #fff;
}

._sortIcons_ys5yt_42 {
  display: flex;
  flex-direction: column;
  line-height: 0;
}

._tableBody_ys5yt_48 {
  min-width: 900px;
}

._tableRow_ys5yt_52 {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-component);
  cursor: pointer;
  transition: background 0.15s;
  min-width: 900px;
}
._tableRow_ys5yt_52:hover {
  background: #26262b;
}

._cellTime_ys5yt_65 {
  flex: 11%;
  display: flex;
  justify-content: center;
  color: #d0d4db;
  font-size: 12px;
}

._cellView_ys5yt_73 {
  flex: 0 0 60px;
  width: 60px;
  display: flex;
  justify-content: center;
}

._viewBtn_ys5yt_80 {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-inset);
  border: 1px solid var(--border-component);
  border-radius: 6px;
  color: #a3a8af;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
._viewBtn_ys5yt_80:hover {
  background: #ffc700;
  border-color: #ffc700;
  color: #1b1d20;
}

._cellName_ys5yt_99 {
  flex: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
}

._cellOperator_ys5yt_110 {
  flex: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #d0d4db;
  font-size: 12px;
}

._cellEvent_ys5yt_120 {
  flex: 15%;
  display: flex;
  justify-content: center;
}

._eventTag_ys5yt_126 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-inset);
  border: 1px solid var(--border-component);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
  color: #d0d4db;
  white-space: nowrap;
}

._cellRisk_ys5yt_139 {
  flex: 10%;
  display: flex;
  justify-content: center;
}

._cellShift_ys5yt_145 {
  flex: 11%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #d0d4db;
  font-size: 12px;
}

._cellSpeed_ys5yt_155 {
  flex: 13%;
  display: flex;
  justify-content: center;
  color: #d0d4db;
  font-size: 12px;
}

._cellStatus_ys5yt_163 {
  flex: 9%;
  display: flex;
  justify-content: center;
}

._statusTag_ys5yt_169 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
._statusTag_ys5yt_169._green_ys5yt_180 {
  background: #1d3326;
  color: #24ec8f;
}
._statusTag_ys5yt_169._orange_ys5yt_184 {
  background: #33271b;
  color: #ffa348;
}
._statusTag_ys5yt_169._gray_ys5yt_188 {
  background: #2d3033;
  color: #d0d4db;
}
._statusTag_ys5yt_169._red_ys5yt_192 {
  background: #3b1a1f;
  color: #fb3558;
}

._statusDot_ys5yt_197 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

._pagination_ys5yt_205 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border-component);
  background: var(--surface-component);
  flex-shrink: 0;
}

._pageInfo_ys5yt_216 {
  font-size: 12px;
  color: #797e86;
  margin-right: 4px;
}

._pageBtn_ys5yt_222 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--border-component);
  background: transparent;
  color: #d0d4db;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}
._pageBtn_ys5yt_222:hover:not(:disabled) {
  background: #1a1c1f;
  border-color: #41454b;
}
._pageBtn_ys5yt_222:disabled {
  opacity: 0.35;
  cursor: default;
}/* packages/widgets/Source/shared.css */
.cesium-svgPath-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cesium-button {
  display: inline-block;
  position: relative;
  background: #303336;
  border: 1px solid #444;
  color: #edffff;
  fill: #edffff;
  border-radius: 4px;
  padding: 5px 12px;
  margin: 2px 3px;
  cursor: pointer;
  overflow: hidden;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cesium-button:focus {
  color: #fff;
  fill: #fff;
  border-color: #ea4;
  outline: none;
}
.cesium-button:hover {
  color: #fff;
  fill: #fff;
  background: #48b;
  border-color: #aef;
  box-shadow: 0 0 8px #fff;
}
.cesium-button:active {
  color: #000;
  fill: #000;
  background: #adf;
  border-color: #fff;
  box-shadow: 0 0 8px #fff;
}
.cesium-button:disabled,
.cesium-button-disabled,
.cesium-button-disabled:focus,
.cesium-button-disabled:hover,
.cesium-button-disabled:active {
  background: #303336;
  border-color: #444;
  color: #646464;
  fill: #646464;
  box-shadow: none;
  cursor: default;
}
.cesium-button option {
  background-color: #000;
  color: #eee;
}
.cesium-button option:disabled {
  color: #777;
}
.cesium-button input,
.cesium-button label {
  cursor: pointer;
}
.cesium-button input {
  vertical-align: sub;
}
.cesium-toolbar-button {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: 14%;
  padding: 0;
  vertical-align: middle;
  z-index: 0;
}
.cesium-performanceDisplay-defaultContainer {
  position: absolute;
  top: 50px;
  right: 10px;
  text-align: right;
}
.cesium-performanceDisplay {
  background-color: rgba(40, 40, 40, 0.7);
  padding: 7px;
  border-radius: 5px;
  border: 1px solid #444;
  font: bold 12px sans-serif;
}
.cesium-performanceDisplay-fps {
  color: #e52;
}
.cesium-performanceDisplay-throttled {
  color: #a42;
}
.cesium-performanceDisplay-ms {
  color: #de3;
}

/* packages/widgets/Source/Animation/Animation.css */
.cesium-animation-theme {
  visibility: hidden;
  display: block;
  position: absolute;
  z-index: -100;
}
.cesium-animation-themeNormal {
  color: #222;
}
.cesium-animation-themeHover {
  color: #4488b0;
}
.cesium-animation-themeSelect {
  color: #242;
}
.cesium-animation-themeDisabled {
  color: #333;
}
.cesium-animation-themeKnob {
  color: #222;
}
.cesium-animation-themePointer {
  color: #2e2;
}
.cesium-animation-themeSwoosh {
  color: #8ac;
}
.cesium-animation-themeSwooshHover {
  color: #aef;
}
.cesium-animation-svgText {
  fill: #edffff;
  font-family: Sans-Serif;
  font-size: 15px;
  text-anchor: middle;
}
.cesium-animation-blank {
  fill: #000;
  fill-opacity: 0.01;
  stroke: none;
}
.cesium-animation-rectButton {
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cesium-animation-rectButton .cesium-animation-buttonGlow {
  fill: #fff;
  stroke: none;
  display: none;
}
.cesium-animation-rectButton:hover .cesium-animation-buttonGlow {
  display: block;
}
.cesium-animation-rectButton .cesium-animation-buttonPath {
  fill: #edffff;
}
.cesium-animation-rectButton .cesium-animation-buttonMain {
  stroke: #444;
  stroke-width: 1.2;
}
.cesium-animation-rectButton:hover .cesium-animation-buttonMain {
  stroke: #aef;
}
.cesium-animation-rectButton:active .cesium-animation-buttonMain {
  fill: #abd6ff;
}
.cesium-animation-buttonDisabled {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cesium-animation-buttonDisabled .cesium-animation-buttonMain {
  stroke: #555;
}
.cesium-animation-buttonDisabled .cesium-animation-buttonPath {
  fill: #818181;
}
.cesium-animation-buttonDisabled .cesium-animation-buttonGlow {
  display: none;
}
.cesium-animation-buttonToggled .cesium-animation-buttonGlow {
  display: block;
  fill: #2e2;
}
.cesium-animation-buttonToggled .cesium-animation-buttonMain {
  stroke: #2e2;
}
.cesium-animation-buttonToggled:hover .cesium-animation-buttonGlow {
  fill: #fff;
}
.cesium-animation-buttonToggled:hover .cesium-animation-buttonMain {
  stroke: #2e2;
}
.cesium-animation-shuttleRingG {
  cursor: pointer;
}
.cesium-animation-shuttleRingPointer {
  cursor: pointer;
}
.cesium-animation-shuttleRingPausePointer {
  cursor: pointer;
}
.cesium-animation-shuttleRingBack {
  fill: #181818;
  fill-opacity: 0.8;
  stroke: #333;
  stroke-width: 1.2;
}
.cesium-animation-shuttleRingSwoosh line {
  stroke: #8ac;
  stroke-width: 3;
  stroke-opacity: 0.2;
  stroke-linecap: round;
}
.cesium-animation-knobOuter {
  cursor: pointer;
  stroke: #444;
  stroke-width: 1.2;
}
.cesium-animation-knobInner {
  cursor: pointer;
}

/* packages/widgets/Source/BaseLayerPicker/BaseLayerPicker.css */
.cesium-baseLayerPicker-selected {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.cesium-baseLayerPicker-dropDown {
  display: block;
  position: absolute;
  box-sizing: content-box;
  top: auto;
  right: 0;
  width: 320px;
  max-height: 500px;
  margin-top: 5px;
  background-color: rgba(38, 38, 38, 0.75);
  border: 1px solid #444;
  padding: 6px;
  overflow: auto;
  border-radius: 10px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transform: translate(0, -20%);
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.2s,
    opacity 0.2s ease-in,
    transform 0.2s ease-in;
}
.cesium-baseLayerPicker-dropDown-visible {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.cesium-baseLayerPicker-sectionTitle {
  display: block;
  font-family: sans-serif;
  font-size: 16pt;
  text-align: left;
  color: #edffff;
  margin-bottom: 4px;
}
.cesium-baseLayerPicker-choices {
  margin-bottom: 5px;
}
.cesium-baseLayerPicker-categoryTitle {
  color: #edffff;
  font-size: 11pt;
}
.cesium-baseLayerPicker-choices {
  display: block;
  border: 1px solid #888;
  border-radius: 5px;
  padding: 5px 0;
}
.cesium-baseLayerPicker-item {
  display: inline-block;
  vertical-align: top;
  margin: 2px 5px;
  width: 64px;
  text-align: center;
  cursor: pointer;
}
.cesium-baseLayerPicker-itemLabel {
  display: block;
  font-family: sans-serif;
  font-size: 8pt;
  text-align: center;
  vertical-align: middle;
  color: #edffff;
  cursor: pointer;
  word-wrap: break-word;
}
.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemLabel,
.cesium-baseLayerPicker-item:focus .cesium-baseLayerPicker-itemLabel {
  text-decoration: underline;
}
.cesium-baseLayerPicker-itemIcon {
  display: inline-block;
  position: relative;
  width: inherit;
  height: auto;
  background-size: 100% 100%;
  border: solid 1px #444;
  border-radius: 9px;
  color: #edffff;
  margin: 0;
  padding: 0;
  cursor: pointer;
  box-sizing: border-box;
}
.cesium-baseLayerPicker-item:hover .cesium-baseLayerPicker-itemIcon {
  border-color: #fff;
  box-shadow: 0 0 8px #fff, 0 0 8px #fff;
}
.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemLabel {
  color: rgb(189, 236, 248);
}
.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemIcon {
  border: double 4px rgb(189, 236, 248);
}

/* packages/engine/Source/Widget/CesiumWidget.css */
.cesium-widget {
  font-family: sans-serif;
  font-size: 16px;
  overflow: hidden;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cesium-widget,
.cesium-widget canvas {
  width: 100%;
  height: 100%;
  touch-action: none;
}
.cesium-widget-credits {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  color: #fff;
  font-size: 10px;
  text-shadow: 0px 0px 2px #000000;
  padding-right: 5px;
}
.cesium-widget-errorPanel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99999;
}
.cesium-widget-errorPanel:before {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: "";
}
.cesium-widget-errorPanel-content {
  width: 75%;
  max-width: 500px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  border: 1px solid #510c00;
  border-radius: 7px;
  background-color: #f0d9d5;
  font-size: 14px;
  color: #510c00;
}
.cesium-widget-errorPanel-content.expanded {
  max-width: 75%;
}
.cesium-widget-errorPanel-header {
  font-size: 18px;
  font-family:
    "Open Sans",
    Verdana,
    Geneva,
    sans-serif;
  background: #d69d93;
  border-bottom: 2px solid #510c00;
  padding-bottom: 10px;
  border-radius: 3px 3px 0 0;
  padding: 15px;
}
.cesium-widget-errorPanel-scroll {
  overflow: auto;
  font-family:
    "Open Sans",
    Verdana,
    Geneva,
    sans-serif;
  white-space: pre-wrap;
  padding: 0 15px;
  margin: 10px 0 20px 0;
}
.cesium-widget-errorPanel-buttonPanel {
  padding: 0 15px;
  margin: 10px 0 20px 0;
  text-align: right;
}
.cesium-widget-errorPanel-buttonPanel button {
  border-color: #510c00;
  background: #d69d93;
  color: #202020;
  margin: 0;
}
.cesium-widget-errorPanel-buttonPanel button:focus {
  border-color: #510c00;
  background: #f0d9d5;
  color: #510c00;
}
.cesium-widget-errorPanel-buttonPanel button:hover {
  border-color: #510c00;
  background: #f0d9d5;
  color: #510c00;
}
.cesium-widget-errorPanel-buttonPanel button:active {
  border-color: #510c00;
  background: #b17b72;
  color: #510c00;
}
.cesium-widget-errorPanel-more-details {
  text-decoration: underline;
  cursor: pointer;
}
.cesium-widget-errorPanel-more-details:hover {
  color: #2b0700;
}

/* packages/widgets/Source/CesiumInspector/CesiumInspector.css */
.cesium-cesiumInspector {
  border-radius: 5px;
  transition: width ease-in-out 0.25s;
  background: rgba(48, 51, 54, 0.8);
  border: 1px solid #444;
  color: #edffff;
  display: inline-block;
  position: relative;
  padding: 4px 12px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
}
.cesium-cesiumInspector-button {
  text-align: center;
  font-size: 11pt;
}
.cesium-cesiumInspector-visible .cesium-cesiumInspector-button {
  border-bottom: 1px solid #aaa;
  padding-bottom: 3px;
}
.cesium-cesiumInspector input:enabled,
.cesium-cesiumInspector-button {
  cursor: pointer;
}
.cesium-cesiumInspector-visible {
  width: 185px;
  height: auto;
}
.cesium-cesiumInspector-hidden {
  width: 122px;
  height: 17px;
}
.cesium-cesiumInspector-sectionContent {
  max-height: 600px;
}
.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionContent {
  max-height: 0;
  padding: 0 !important;
  overflow: hidden;
}
.cesium-cesiumInspector-dropDown {
  margin: 5px 0;
  font-family: sans-serif;
  font-size: 10pt;
  width: 185px;
}
.cesium-cesiumInspector-frustumStatistics {
  padding-left: 10px;
  padding: 5px;
  background-color: rgba(80, 80, 80, 0.75);
}
.cesium-cesiumInspector-pickButton {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #444;
  color: #edffff;
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 auto;
}
.cesium-cesiumInspector-pickButton:focus {
  outline: none;
}
.cesium-cesiumInspector-pickButton:active,
.cesium-cesiumInspector-pickButtonHighlight {
  color: #000;
  background: #adf;
  border-color: #fff;
  box-shadow: 0 0 8px #fff;
}
.cesium-cesiumInspector-center {
  text-align: center;
}
.cesium-cesiumInspector-sectionHeader {
  font-weight: bold;
  font-size: 10pt;
  margin: 0;
  cursor: pointer;
}
.cesium-cesiumInspector-pickSection {
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 3px;
  margin-bottom: 5px;
}
.cesium-cesiumInspector-sectionContent {
  margin-bottom: 10px;
  transition: max-height 0.25s;
}
.cesium-cesiumInspector-tileText {
  padding-bottom: 10px;
  border-bottom: 1px solid #aaa;
}
.cesium-cesiumInspector-relativeText {
  padding-top: 10px;
}
.cesium-cesiumInspector-sectionHeader::before {
  margin-right: 5px;
  content: "-";
  width: 1ch;
  display: inline-block;
}
.cesium-cesiumInspector-section-collapsed .cesium-cesiumInspector-sectionHeader::before {
  content: "+";
}

/* packages/widgets/Source/Cesium3DTilesInspector/Cesium3DTilesInspector.css */
ul.cesium-cesiumInspector-statistics {
  margin: 0;
  padding-top: 3px;
  padding-bottom: 3px;
}
ul.cesium-cesiumInspector-statistics + ul.cesium-cesiumInspector-statistics {
  border-top: 1px solid #aaa;
}
.cesium-cesiumInspector-slider {
  margin-top: 5px;
}
.cesium-cesiumInspector-slider input[type=number] {
  text-align: left;
  background-color: #222;
  outline: none;
  border: 1px solid #444;
  color: #edffff;
  width: 100px;
  border-radius: 3px;
  padding: 1px;
  margin-left: 10px;
  cursor: auto;
}
.cesium-cesiumInspector-slider input[type=number]::-webkit-outer-spin-button,
.cesium-cesiumInspector-slider input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cesium-cesiumInspector-slider input[type=range] {
  margin-left: 5px;
  vertical-align: middle;
}
.cesium-cesiumInspector-hide .cesium-cesiumInspector-styleEditor {
  display: none;
}
.cesium-cesiumInspector-styleEditor {
  padding: 10px;
  border-radius: 5px;
  background: rgba(48, 51, 54, 0.8);
  border: 1px solid #444;
}
.cesium-cesiumInspector-styleEditor textarea {
  width: 100%;
  height: 300px;
  background: transparent;
  color: #edffff;
  border: none;
  padding: 0;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}
.cesium-3DTilesInspector {
  width: 300px;
  pointer-events: all;
}
.cesium-3DTilesInspector-statistics {
  font-size: 11px;
}
.cesium-3DTilesInspector-disabledElementsInfo {
  margin: 5px 0 0 0;
  padding: 0 0 0 20px;
  color: #eed202;
}
.cesium-3DTilesInspector div,
.cesium-3DTilesInspector input[type=range] {
  width: 100%;
  box-sizing: border-box;
}
.cesium-cesiumInspector-error {
  color: #ff9e9e;
  overflow: auto;
}
.cesium-3DTilesInspector .cesium-cesiumInspector-section {
  margin-top: 3px;
}
.cesium-3DTilesInspector .cesium-cesiumInspector-sectionHeader + .cesium-cesiumInspector-show {
  border-top: 1px solid white;
}
input.cesium-cesiumInspector-url {
  overflow: hidden;
  white-space: nowrap;
  overflow-x: scroll;
  background-color: transparent;
  color: white;
  outline: none;
  border: none;
  height: 1em;
  width: 100%;
}
.cesium-cesiumInspector .field-group {
  display: table;
}
.cesium-cesiumInspector .field-group > label {
  display: table-cell;
  font-weight: bold;
}
.cesium-cesiumInspector .field-group > .field {
  display: table-cell;
  width: 100%;
}

/* packages/widgets/Source/VoxelInspector/VoxelInspector.css */
.cesium-VoxelInspector {
  width: 300px;
  pointer-events: all;
}
.cesium-VoxelInspector div,
.cesium-VoxelInspector input[type=range] {
  width: 100%;
  box-sizing: border-box;
}
.cesium-VoxelInspector .cesium-cesiumInspector-section {
  margin-top: 3px;
}
.cesium-VoxelInspector .cesium-cesiumInspector-sectionHeader + .cesium-cesiumInspector-show {
  border-top: 1px solid white;
}

/* packages/widgets/Source/FullscreenButton/FullscreenButton.css */
.cesium-button.cesium-fullscreenButton {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

/* packages/widgets/Source/VRButton/VRButton.css */
.cesium-button.cesium-vrButton {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}

/* packages/widgets/Source/Geocoder/Geocoder.css */
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
  border: solid 1px #444;
  background-color: rgba(40, 40, 40, 0.7);
  color: white;
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 32px;
  margin: 0;
  padding: 0 32px 0 0;
  border-radius: 0;
  box-sizing: border-box;
  transition: width ease-in-out 0.25s, background-color 0.2s ease-in-out;
  -webkit-appearance: none;
}
.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input {
  border-color: #aef;
  box-shadow: 0 0 8px #fff;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
  border-color: #ea4;
  background-color: rgba(15, 15, 15, 0.9);
  box-shadow: none;
  outline: none;
}
.cesium-viewer-geocoderContainer:hover .cesium-geocoder-input,
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus,
.cesium-viewer-geocoderContainer .cesium-geocoder-input-wide {
  padding-left: 4px;
  width: 250px;
}
.cesium-viewer-geocoderContainer .search-results {
  position: absolute;
  background-color: #000;
  color: #eee;
  overflow-y: auto;
  opacity: 0.8;
  width: 100%;
}
.cesium-viewer-geocoderContainer .search-results ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.cesium-viewer-geocoderContainer .search-results ul li {
  font-size: 14px;
  padding: 3px 10px;
}
.cesium-viewer-geocoderContainer .search-results ul li:hover {
  cursor: pointer;
}
.cesium-viewer-geocoderContainer .search-results ul li.active {
  background: #48b;
}
.cesium-geocoder-searchButton {
  background-color: #303336;
  display: inline-block;
  position: absolute;
  cursor: pointer;
  width: 32px;
  top: 1px;
  right: 1px;
  height: 30px;
  vertical-align: middle;
  fill: #edffff;
}
.cesium-geocoder-searchButton:hover {
  background-color: #48b;
}

/* packages/widgets/Source/InfoBox/InfoBox.css */
.cesium-infoBox {
  display: block;
  position: absolute;
  top: 50px;
  right: 0;
  width: 40%;
  max-width: 480px;
  background: rgba(38, 38, 38, 0.95);
  color: #edffff;
  border: 1px solid #444;
  border-right: none;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
  box-shadow: 0 0 10px 1px #000;
  transform: translate(100%, 0);
  visibility: hidden;
  opacity: 0;
  transition:
    visibility 0s 0.2s,
    opacity 0.2s ease-in,
    transform 0.2s ease-in;
}
.cesium-infoBox-visible {
  transform: translate(0, 0);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.cesium-infoBox-title {
  display: block;
  height: 20px;
  padding: 5px 30px 5px 25px;
  background: rgba(84, 84, 84, 1);
  border-top-left-radius: 7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: content-box;
}
.cesium-infoBox-bodyless .cesium-infoBox-title {
  border-bottom-left-radius: 7px;
}
button.cesium-infoBox-camera {
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  background: transparent;
  border-color: transparent;
  border-radius: 3px;
  padding: 0 5px;
  margin: 0;
}
button.cesium-infoBox-close {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
  height: 20px;
  background: transparent;
  border: none;
  border-radius: 2px;
  font-weight: bold;
  font-size: 16px;
  padding: 0 5px;
  margin: 0;
  color: #edffff;
}
button.cesium-infoBox-close:focus {
  background: rgba(238, 136, 0, 0.44);
  outline: none;
}
button.cesium-infoBox-close:hover {
  background: #888;
  color: #000;
}
button.cesium-infoBox-close:active {
  background: #a00;
  color: #000;
}
.cesium-infoBox-bodyless .cesium-infoBox-iframe {
  display: none;
}
.cesium-infoBox-iframe {
  border: none;
  width: 100%;
  width: calc(100% - 2px);
}

/* packages/widgets/Source/SceneModePicker/SceneModePicker.css */
span.cesium-sceneModePicker-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 3px;
}
.cesium-sceneModePicker-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s linear;
}
.cesium-sceneModePicker-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.25s, opacity 0.25s linear;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-none {
  display: none;
}
.cesium-sceneModePicker-slide-svg {
  transition: left 2s;
  top: 0;
  left: 0;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
  box-sizing: border-box;
  padding: 0;
  margin: 3px 0;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D,
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView,
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D {
  margin: 0 0 3px 0;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-icon2D {
  left: 100%;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button3D .cesium-sceneModePicker-iconColumbusView {
  left: 200%;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon3D {
  left: -200%;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-buttonColumbusView .cesium-sceneModePicker-icon2D {
  left: -100%;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-icon3D {
  left: -100%;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-button2D .cesium-sceneModePicker-iconColumbusView {
  left: 100%;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-selected {
  border-color: #2e2;
  box-shadow: 0 0 8px #fff, 0 0 8px #fff;
}

/* packages/widgets/Source/ProjectionPicker/ProjectionPicker.css */
span.cesium-projectionPicker-wrapper {
  display: inline-block;
  position: relative;
  margin: 0 3px;
}
.cesium-projectionPicker-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s linear;
}
.cesium-projectionPicker-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.25s, opacity 0.25s linear;
}
.cesium-projectionPicker-wrapper .cesium-projectionPicker-none {
  display: none;
}
.cesium-projectionPicker-wrapper .cesium-projectionPicker-dropDown-icon {
  box-sizing: border-box;
  padding: 0;
  margin: 3px 0;
}
.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective,
.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic {
  margin: 0 0 3px 0;
}
.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonPerspective .cesium-projectionPicker-iconOrthographic {
  left: 100%;
}
.cesium-projectionPicker-wrapper .cesium-projectionPicker-buttonOrthographic .cesium-projectionPicker-iconPerspective {
  left: -100%;
}
.cesium-projectionPicker-wrapper .cesium-projectionPicker-selected {
  border-color: #2e2;
  box-shadow: 0 0 8px #fff, 0 0 8px #fff;
}

/* packages/widgets/Source/PerformanceWatchdog/PerformanceWatchdog.css */
.cesium-performance-watchdog-message-area {
  position: relative;
  background-color: yellow;
  color: black;
  padding: 10px;
}
.cesium-performance-watchdog-message {
  margin-right: 30px;
}
.cesium-performance-watchdog-message-dismiss {
  position: absolute;
  right: 0;
  margin: 0 10px 0 0;
}

/* packages/widgets/Source/NavigationHelpButton/NavigationHelpButton.css */
.cesium-navigationHelpButton-wrapper {
  position: relative;
  display: inline-block;
}
.cesium-navigation-help {
  visibility: hidden;
  position: absolute;
  top: 38px;
  right: 2px;
  width: 250px;
  border-radius: 10px;
  transform: scale(0.01);
  transform-origin: 234px -10px;
  transition: visibility 0s 0.25s, transform 0.25s ease-in;
}
.cesium-navigation-help-visible {
  visibility: visible;
  transform: scale(1);
  transition: transform 0.25s ease-out;
}
.cesium-navigation-help-instructions {
  border: 1px solid #444;
  background-color: rgba(38, 38, 38, 0.75);
  padding-bottom: 5px;
  border-radius: 0 0 10px 10px;
}
.cesium-click-navigation-help {
  display: none;
}
.cesium-touch-navigation-help {
  display: none;
  padding-top: 5px;
}
.cesium-click-navigation-help-visible {
  display: block;
}
.cesium-touch-navigation-help-visible {
  display: block;
}
.cesium-navigation-help-pan {
  color: #66ccff;
  font-weight: bold;
}
.cesium-navigation-help-zoom {
  color: #65fd00;
  font-weight: bold;
}
.cesium-navigation-help-rotate {
  color: #ffd800;
  font-weight: bold;
}
.cesium-navigation-help-tilt {
  color: #d800d8;
  font-weight: bold;
}
.cesium-navigation-help-details {
  color: #ffffff;
}
.cesium-navigation-button {
  color: #fff;
  background-color: transparent;
  border-bottom: none;
  border-top: 1px solid #444;
  border-right: 1px solid #444;
  margin: 0;
  width: 50%;
  cursor: pointer;
}
.cesium-navigation-button-icon {
  vertical-align: middle;
  padding: 5px 1px;
}
.cesium-navigation-button:focus {
  outline: none;
}
.cesium-navigation-button-left {
  border-radius: 10px 0 0 0;
  border-left: 1px solid #444;
}
.cesium-navigation-button-right {
  border-radius: 0 10px 0 0;
  border-left: none;
}
.cesium-navigation-button-selected {
  background-color: rgba(38, 38, 38, 0.75);
}
.cesium-navigation-button-unselected {
  background-color: rgba(0, 0, 0, 0.75);
}
.cesium-navigation-button-unselected:hover {
  background-color: rgba(76, 76, 76, 0.75);
}

/* packages/widgets/Source/SelectionIndicator/SelectionIndicator.css */
.cesium-selection-wrapper {
  position: absolute;
  width: 160px;
  height: 160px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.2s, opacity 0.2s ease-in;
}
.cesium-selection-wrapper-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-out;
}
.cesium-selection-wrapper svg {
  fill: #2e2;
  stroke: #000;
  stroke-width: 1.1px;
}

/* packages/widgets/Source/Timeline/Timeline.css */
.cesium-timeline-main {
  position: relative;
  left: 0;
  bottom: 0;
  overflow: hidden;
  border: solid 1px #888;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cesium-timeline-trackContainer {
  width: 100%;
  overflow: auto;
  border-top: solid 1px #888;
  position: relative;
  top: 0;
  left: 0;
}
.cesium-timeline-tracks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.cesium-timeline-needle {
  position: absolute;
  left: 0;
  top: 1.7em;
  bottom: 0;
  width: 1px;
  background: #f00;
}
.cesium-timeline-bar {
  position: relative;
  left: 0;
  top: 0;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  height: 1.7em;
  background:
    linear-gradient(
      to bottom,
      rgba(116, 117, 119, 0.8) 0%,
      rgba(58, 68, 82, 0.8) 11%,
      rgba(46, 50, 56, 0.8) 46%,
      rgba(53, 53, 53, 0.8) 81%,
      rgba(53, 53, 53, 0.8) 100%);
}
.cesium-timeline-ruler {
  visibility: hidden;
  white-space: nowrap;
  font-size: 80%;
  z-index: -200;
}
.cesium-timeline-highlight {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #08f;
}
.cesium-timeline-ticLabel {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  font-size: 80%;
  color: #eee;
}
.cesium-timeline-ticMain {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 50%;
  background: #eee;
}
.cesium-timeline-ticSub {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 33%;
  background: #aaa;
}
.cesium-timeline-ticTiny {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 25%;
  background: #888;
}
.cesium-timeline-icon16 {
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url(data:text/plain;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAYAAAB3AH1ZAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sIDBITKIVzLEMAAAKNSURBVEjHxdXNSxRhHAfw7zzrqhuoWJnSkrippUVSEKsHI9BTUYdAJA/RoYMREV26rAdn6tAfUARi16hQqkOBQRgUEYFWEC3OwczMjdZd92VmdWfmeelgTjO7q7gb0VzmmZnn85vvPPPMM8B/3qTcE2PPpuTZKB1eWuUQACgXYACYwVFbCTTVeZXB/i55o4LFelcAZfStYD4vpAoPGAGo4GBcQEgSOAUMQyAezwK6iQfDPXnhS/FkHZ+/8VLMWxxqWkfH3gbMRNOYi2roavbja0zHQmoFPYf8ED4Ko4aivm9MOG/u9I8mwrafeK7a/tVrNc/bARYN5noadeq7q0342vXw9CIMU6BmW8rVP9cPBPe52uu+v3O/y9sB4gkTWs6Qsk0mj5ExXMelejvA8WafYmkmGPHanTijdtvif8rx5RiCjdWKs2Cp3jWRDl96KhrbqlBeJqBOLyLQXg0IgbkZDS0dO8EZxZfPSTA9jvDDK3mT0OmP1FXh3XwEEAKdTX5MRWLgjCK4pwH3xt/YnjgLHAv4lHTCAKMMu/wV+KZGob6PoKyMQ0+sgBpZVJZn0NterxQaVqef/DRn+/EXYds/mZx2eVeAW9d65dhCEsaKCb7K8HH0gqTevyh9GDkn0VULRiaLzJKGBu9swfdaiie5RVo9ESURN8E8BE0n7ggACJy8KzghSCzp6DmwWxkaCm24EBXr8wI8Hrkq06QBiRC0t24HALS11IBTCyJl4vb1AXmzpbVYTwoVOXN0h7L8Mwtm8bXPybIQ/5FCX3dA2cr6XowvGCA02CvztAnz9+JiZk1AMxG6fEreSoBiPNmoyNnuWiWVzAIAtISO08E6pZi/3N96AIDn4E3h3P8L/wshP+txtEs4JAAAAABJRU5ErkJggg==);
  background-repeat: no-repeat;
}

/* packages/widgets/Source/Viewer/Viewer.css */
.cesium-viewer {
  font-family: sans-serif;
  font-size: 16px;
  overflow: hidden;
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.cesium-viewer-cesiumWidgetContainer {
  width: 100%;
  height: 100%;
}
.cesium-viewer-bottom {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  padding-right: 5px;
}
.cesium-viewer .cesium-widget-credits {
  display: inline;
  position: static;
  bottom: auto;
  left: auto;
  padding-right: 0;
  color: #ffffff;
  font-size: 10px;
  text-shadow: 0 0 2px #000000;
}
.cesium-viewer-timelineContainer {
  position: absolute;
  bottom: 0;
  left: 169px;
  right: 29px;
  height: 27px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 14px;
}
.cesium-viewer-animationContainer {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 0;
  width: 169px;
  height: 112px;
}
.cesium-viewer-fullscreenContainer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0;
  width: 29px;
  height: 29px;
  overflow: hidden;
}
.cesium-viewer-vrContainer {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0;
  width: 29px;
  height: 29px;
  overflow: hidden;
}
.cesium-viewer-toolbar {
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
}
.cesium-viewer-cesiumInspectorContainer {
  display: block;
  position: absolute;
  top: 50px;
  right: 10px;
}
.cesium-viewer-geocoderContainer {
  position: relative;
  display: inline-block;
  margin: 0 3px;
}
.cesium-viewer-cesium3DTilesInspectorContainer {
  display: block;
  position: absolute;
  top: 50px;
  right: 10px;
  max-height: calc(100% - 120px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
.cesium-viewer-voxelInspectorContainer {
  display: block;
  position: absolute;
  top: 50px;
  right: 10px;
  max-height: calc(100% - 120px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}

/* packages/widgets/Source/I3SBuildingSceneLayerExplorer/I3SBuildingSceneLayerExplorer.css */
.cesium-viewer-i3s-explorer ul {
  list-style-type: none;
}
.cesium-viewer-i3s-explorer .layersList {
  padding: 0;
}
.cesium-viewer-i3s-explorer input {
  margin: 0 3px 0 0;
}
.cesium-viewer-i3s-explorer .expandItem {
  cursor: pointer;
  user-select: none;
  width: 20px;
}
.cesium-viewer-i3s-explorer .nested,
.cesium-viewer-i3s-explorer #bsl-wrapper {
  display: none;
}
.cesium-viewer-i3s-explorer .active {
  display: block;
}
.cesium-viewer-i3s-explorer .li-wrapper {
  display: flex;
  flex-direction: row;
  align-content: center;
}

/* packages/widgets/Source/widgets.css */
._root_kkef8_1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface-page);
  overflow: hidden;
}

._filterBar_kkef8_9 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  height: 60px;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-component);
  flex-shrink: 0;
  box-sizing: border-box;
}

._filterPills_kkef8_22 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
._filterPills_kkef8_22::-webkit-scrollbar {
  display: none;
}

._filterActions_kkef8_35 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

._mapContainer_kkef8_42 {
  position: relative;
  flex: 1;
  min-height: 0;
  background: #0e0f10;
}

._viewer_kkef8_49 {
  width: 100%;
  height: 100%;
  background: #000;
}

._eventTooltip_kkef8_55 {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: #1a1d21;
  border: 1px solid #333;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  transform: translate(12px, 12px);
}
._eventTooltip_kkef8_55 b {
  font-size: 12px;
}

._zoomControls_kkef8_76 {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #2d3033;
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(6px);
  z-index: 0;
}
._zoomControls_kkef8_76 button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-bottom: 1px solid #2d3033;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 100ms;
}
._zoomControls_kkef8_76 button:last-child {
  border-bottom: none;
}
._zoomControls_kkef8_76 button:hover {
  background: rgba(255, 255, 255, 0.08);
}
:root {
  /* ── Surface & border tokens ── */
  --surface-shell: #1a1a1d; /* sidebar + top bar */
  --border-shell: #32353e; /* sidebar + top bar borders */
  --surface-page: #0e0e10; /* page/body background */
  --surface-component: #1d1d20; /* card / widget backgrounds */
  --border-component: #383840; /* card / widget borders */
  --surface-inset: #242427; /* inset panels (gauge box) */
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;
  --white: '#FFFFFF';
  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: rgb(255, 146, 67);
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
  --green: #5dd59d;
  --red: #ef002b;
  --darker-grey: #33343b;
  --muted-black: #1d1e20;
  --dark-muted-black: #1c1d21;
  --dark-matter: #1e1e1e;
  --grey-line: #5b5b5b;
  --sable: #060606;
  --graphite: #0c090a;
  --margin-top: 10%;
  --blue-tint-grey: #23242a;
  --bright-green: #01ce34;
  --header-grey: #363636;
  --additional-dark-accent: #151515;
  --table-row-border: #7c7d84;
  --colors-secondary-light: #0e0f10;
  --colors-primary-grey: #1b1d20;
  --colors-border: #2d3033;
  --colors-selection: #41454a;
  --colors-new-primary: #1e1e1e;
  --colors-surface-bgcolor: #060707;
  --colors-grey-text: #b2b7bf;
  --colors-deep-black: #1c1d20;
}
._monitorPanel_1ofsw_2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 4px;
}
._image_1ofsw_9 {
  flex-shrink: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
._image_1ofsw_9 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
  display: block;
}
._onlineDot_1ofsw_24 {
  position: absolute;
  bottom: 6px;
  right: 6px;
}
._infoPanel_1ofsw_30 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  padding-top: 5px;
  flex: 1;
  min-width: 0;
}
._nameRow_1ofsw_40 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
._iconText_1ofsw_46 {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--table-row-border);
}
._iconText_1ofsw_46 h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._iconText_1ofsw_46 img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
._riskScoreProgressLine_1ofsw_66 {
  display: flex;
  align-items: center;
  gap: 8px;
}
._riskLabel_1ofsw_72 {
  font-size: 11px;
  white-space: nowrap;
  opacity: 0.7;
}
._progressTrack_1ofsw_78 {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
._progressFill_1ofsw_86 {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}
._riskValue_1ofsw_92 {
  font-size: 11px;
  font-weight: 600;
  min-width: 24px;
  text-align: right;
}
._speedRow_1ofsw_99 {
  display: flex;
  flex-direction: row;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
._speedValue_1ofsw_108 {
  font-size: 13px;
  font-weight: 700;
}._page_5ul9a_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

._filterBar_5ul9a_7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 12px;
}

._severityTabs_5ul9a_16 {
  display: flex;
  align-items: center;
  gap: 4px;
}

._severityTab_5ul9a_16 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 110px;
  height: 30px;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: #adadad;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
}
._severityTab_5ul9a_16:hover {
  background: rgba(255, 255, 255, 0.05);
}
._severityTab_5ul9a_16:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: 1px;
}

._activeTab_5ul9a_49 {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

._count_5ul9a_55 {
  font-size: 11px;
  opacity: 0.7;
}

._dropdowns_5ul9a_60 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._monitorDashboard_5ul9a_66 {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15%, 2fr));
  column-gap: 12px;
  row-gap: 10px;
  align-items: start;
  align-content: start;
}._card_1exhv_1 {
  border-radius: 16px;
  width: 280px;
  padding: 13px 12px;
  background-color: var(--colors-secondary-light);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 1513px) {
  ._card_1exhv_1 {
    width: 233px;
  }
}

._headerRow_1exhv_17 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
._headerRow_1exhv_17 p {
  margin: 0;
  font-size: 25px;
}

._title_1exhv_27 {
  font-size: 20px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.03em;
}

._equipmentIcon_1exhv_34 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2509803922);
}
._equipmentIcon_1exhv_34 img {
  display: block;
  object-fit: contain;
}

._fallbackIcon_1exhv_49 {
  font-size: 16px;
  line-height: 1;
  opacity: 0.8;
}

._modelSerialRow_1exhv_55 {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

._modelSerialContainer_1exhv_61 {
  background-color: #2d3033;
  padding: 2px 12px;
  border-radius: 4px;
  font-size: 12px;
}
@media (max-width: 1513px) {
  ._modelSerialContainer_1exhv_61 {
    font-size: 11px;
    padding: 2px 0px;
  }
}

._smrTitle_1exhv_74 {
  margin: 0;
  text-align: start;
  font-size: 14px;
}

._smrValue_1exhv_80 {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  font-size: 12px;
}._card_hmr7k_1 {
  flex: 1;
  background: var(--colors-secondary-light);
  border-radius: 12px;
  display: flex;
  padding: 12px 12px 15px;
  flex-direction: column;
}

._availabilityCard_hmr7k_10 {
  max-width: 300px;
}

._utilizationCard_hmr7k_14 {
  max-width: 300px;
}

._cardHeader_hmr7k_18 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #e5e7eb;
}

._cardBody_hmr7k_25 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 50px;
}

._legend_hmr7k_32 {
  width: 110px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 5px;
}

._legendItem_hmr7k_40 {
  display: flex;
  align-items: center;
  gap: 35px;
  font-size: 13px;
  color: #9ca3af;
}

._legendLabelGroup_hmr7k_48 {
  display: flex;
  align-items: center;
  gap: 2px;
}

._legendColor_hmr7k_54 {
  width: 15px;
  height: 15px;
  border-radius: 2px;
}

._legendLabel_hmr7k_48 {
  min-width: 28px;
  cursor: default;
}

._legendValue_hmr7k_65 {
  margin-left: auto;
  color: white;
}._container_gkpoo_1 {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

._searchBarContainer_gkpoo_9 {
  padding: 5px 0;
}

._equipmentsListContainer_gkpoo_13 {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

._equipmentsGrid_gkpoo_19 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 15px;
  column-gap: 8px;
  padding: 14px 0px 80px;
}

._equipmentPill_gkpoo_27 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #2d3033;
  background-color: #0f1114;
  color: #e5e7eb;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
}
._equipmentPill_gkpoo_27:hover {
  border-color: #3a3d42;
  background-color: #15181d;
}
._equipmentPill_gkpoo_27:active {
  transform: translateY(1px);
}
._equipmentPill_gkpoo_27:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.2);
  outline-offset: 2px;
}

._equipmentSelected_gkpoo_55 {
  border-color: var(--primary-color) !important;
  background-color: #21252b;
}

._equipmentIcon_gkpoo_60 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2509803922);
}
._equipmentIcon_gkpoo_60 img {
  display: block;
  object-fit: contain;
}

._fallbackIcon_gkpoo_75 {
  font-size: 14px;
  line-height: 1;
  opacity: 0.8;
}

._equipmentLabel_gkpoo_81 {
  font-family: Kanit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

._equipmentPlate_gkpoo_91 {
  position: relative;
  height: auto;
  width: auto;
  display: flex;
  align-items: center;
  max-height: 50px;
  padding: 1px;
  min-height: 50px;
  padding-right: 5px;
  justify-content: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 0.2s ease-in-out;
  background: none; /* let pseudo-elements handle fill */
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
._equipmentPlate_gkpoo_91:hover {
  transform: scale(1.02);
}
._equipmentPlate_gkpoo_91 {
  /* Outer border layer */
}
._equipmentPlate_gkpoo_91::before {
  content: "";
  position: absolute;
  top: 0.75px;
  left: 0.75px;
  right: 0.75px;
  bottom: 0.75px;
  background: var(--grey-line); /* border color */
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transform: scale(1.08); /* make it bigger to peek out */
  z-index: -2;
}
._equipmentPlate_gkpoo_91 {
  /* Inner fill layer */
}
._equipmentPlate_gkpoo_91::after {
  content: "";
  position: absolute;
  top: 0.75px;
  left: 0.75px;
  right: 0.75px;
  bottom: 0.75px;
  background: var(--blue-tint-grey); /* your original background */
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  z-index: -1;
}._root_1vws0_1 {
  display: block;
}

._selectedLayout_1vws0_5 {
  background-color: #1b1d20;
  height: 94vh;
}

._layoutRow_1vws0_10 {
  display: flex;
  gap: 5px;
  height: 100%;
}

._sidePanel_1vws0_16 {
  width: 230px;
  background-color: var(--colors-secondary-light);
  transition: width 0.25s ease;
  display: flex;
  align-items: flex-start;
  padding: 8px;
  flex-direction: column;
  border-top: 1px solid var(--colors-border);
}
._sidePanel_1vws0_16._collapsed_1vws0_26 {
  width: 20px;
}

._toggleButtonWrapper_1vws0_30 {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
._toggleButtonWrapper_1vws0_30 span {
  font-size: 18px;
}
._toggleButtonWrapper_1vws0_30 {
  margin-bottom: 10px;
}

._toggleButton_1vws0_30 {
  padding: 0;
  background-color: transparent;
  color: #ffffff;
  border: none;
}
._toggleButton_1vws0_30:focus {
  outline: none;
}
._toggleButton_1vws0_30:hover {
  border: none;
}

._toggleIcon_1vws0_55 {
  display: inline-flex;
  transition: transform 0.25s ease;
}
._sidePanel_1vws0_16._collapsed_1vws0_26 ._toggleIcon_1vws0_55 {
  transform: rotate(180deg);
}

._contentArea_1vws0_63 {
  padding-top: 10px;
  flex: 1;
}

._bottomRowContainer_1vws0_68 {
  width: 96%;
  margin-top: 10px;
}

@media (min-width: 1921px) {
  ._topRowContainer_1vws0_74,
  ._bottomRowContainer_1vws0_68 {
    width: 97%;
  }
}
@media (min-width: 3139px) {
  ._topRowContainer_1vws0_74,
  ._bottomRowContainer_1vws0_68 {
    width: 98%;
  }
}._container_1wxzw_1 {
  background: var(--colors-secondary-light);
  border-radius: 12px;
  position: relative;
  padding: 12px;
}

._header_1wxzw_8 {
  margin: 0;
  font-size: 18px;
  margin-bottom: 12px;
  margin-left: 12px;
  text-align: left;
}

._timeSliderContainer_1wxzw_16 {
  padding: 0 20px;
  margin: 10px 0;
}._card_ntjy3_1 {
  border-radius: 16px;
  padding: 13px 18px;
  max-width: 400px;
  min-width: 200px;
  flex-grow: 1;
  background-color: var(--colors-secondary-light);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

._cardHeader_ntjy3_14 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #e5e7eb;
  text-align: start;
}

._dataRow_ntjy3_22 {
  display: grid;
  grid-template-columns: 1fr auto auto;
}
._dataRow_ntjy3_22:not(:last-child) {
  border-bottom: 1px solid #2d3033;
}

._dataTitle_ntjy3_30 {
  font-size: 14px;
  text-align: start;
  opacity: 0.6;
}

._dataValue_ntjy3_36 {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
._dataValue_ntjy3_36 span {
  font-size: 16px;
}.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
  color-scheme: dark;
  color: white;
  background-color: var(--surface-page);
  height: 100%;
  width: 100%;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --primary-color: #41ff88;
  --primary-secondary-color: #000000;
  --addition-accent: #ff840a;
  --secondary: #797e86;
  --secondary-dark: #235f60;

  --main-dark: #235f60;
  --main-light: #89e025;
  --secondary-light: #89e025;
  --background-color: #ffffff;
  --red-light: #ff9cc1;
  --orange-light: #ff9243;
  --red-dark: #a31010;
  --green-dark: #1a3b1c;
  --blue-dark: #27401e;
  --yellow-dark: #cca460;
  --rose-dark: #a46c98;
  --purple-dark: #422a87;
  --turquoise-dark: #29615e;
  --red-mute: #febebb;
  --green-mute: #ebfebb;
  --blue-mute: #ebfefb;
  --yellow-mute: #fffce7;
  --rose-mute: #fceffa;
  --purple-mute: #f8fcf9;
  --turquoise-mute: #fcfcf4;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  color: black;
  user-select: none;
  background-color: #5efd9c;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

#core-concepts {
  padding: 2rem;
  border-radius: 6px;
  background-color: #140524;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

main h2 {
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  margin: 0 0 1.5rem 0;
  color: #a18aba;
}

#core-concepts ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

#core-concepts li {
  width: 10rem;
  text-align: center;
}

#core-concepts li img {
  height: 4rem;
  width: 6rem;
  object-fit: cover;
}

#core-concepts li h3 {
  margin: 0.5rem 0;
}

#core-concepts li p {
  font-size: 0.9rem;
}

#examples {
  margin: 3rem auto;
}

#examples h2 {
  text-align: left;
}

#examples menu {
  margin: 1rem 0;
  padding: 0;
  display: flex;
  gap: 0.5rem;
  list-style: none;
}

#examples menu button {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  color: #a18aba;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

#examples menu button:hover {
  background-color: #1b082f;
  color: #ebe7ef;
}

#examples menu button.active {
  background-color: #7925d3;
  color: #ebe7ef;
}

#tab-content {
  padding: 1rem;
  border-radius: 6px;
  background-color: #2f1d43;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#tab-content h3 {
  margin: 0;
}

#tab-content code {
  font-size: 1rem;
}