:root {
  --toggle-bg-on: #f7a800 !important;
  --toggle-border-on: #f7a800 !important;
}
@font-face {
  font-family: 'IMBU Font';
  src: url('../fonts/ubuntu.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'IMBU Font';
  src: url('../fonts/ubuntu-bold.ttf') format('truetype');
  font-weight: normal;
  font-style: bold;
  font-weight: 700;
}
html,
body {
  font-family: 'IMBU Font', 'Open Sans';
  -webkit-font-smoothing: antialiased;
  height: 100%;
  font-size: 14px;
}
.print-only {
  display: none !important;
}
@media print {
  body {
    font-size: 15px;
  }
  .custom-header,
  .custom-footer {
    display: none;
  }
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  .row,
  .bg-component {
    page-break-inside: avoid;
  }
  .content,
  .subnav-content {
    margin: 0 !important;
    padding: 0 !important;
  }
}
body:has(#app[data-bs-theme="light"]) {
  background-color: #f5f5f5;
}
body:has(#app[data-bs-theme="dark"]) {
  background-color: #32393f;
}
.navbar-dom {
  background-color: #f7a800;
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}
.toast {
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 1);
}
.google-maps {
  position: absolute !important;
  height: calc(100% - 8rem) !important;
}
.custom-marker {
  font-family: 'IMBU Font';
  border-radius: 0.25rem;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 900;
  padding: 0.5rem;
  max-width: 100px;
  margin-bottom: 0.5rem;
  position: relative;
  text-align: center;
}
.custom-marker-pointer {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.5rem solid #FFFFFF;
}
#loader,
#marine-traffic,
#map,
#move-graph {
  position: fixed;
  top: 8rem;
  right: 0;
  transition: width 0.5s;
  width: calc(50% - 8.8rem);
  height: calc(100% - 8rem);
  background-color: var(--bg);
  z-index: 10;
}
#hazel-loader {
  position: fixed;
  top: 5.05rem;
  right: 0;
  transition: width 0.5s;
  width: calc(100% - 16rem);
  height: calc(100%);
  background-color: var(--bg);
  z-index: 10;
}
.gm-style iframe + div {
  border: none !important;
}
.dashed-border {
  border: 1px dashed;
}
#move-section {
  height: calc(100% - 8rem);
}
#move-section #move-graph {
  padding: 5.5rem 1.5rem 1.5rem 1.5rem;
}
#move-section #move-chart {
  height: calc(100% - 4rem);
}
#move-section #move-gradient-bar {
  height: 1.5rem;
  background: linear-gradient(90deg, #00ff00 0%, #ffa500 50%, #ff0000 100%);
}
#map {
  width: calc(100% - 8.8rem);
}
#map-buttons {
  position: fixed;
  z-index: 12;
}
#map-buttons-bottom {
  bottom: 1.5rem;
  position: fixed;
  z-index: 12;
}
#offcanvas-button {
  position: fixed;
  z-index: 12;
}
.dp__menu,
.dp__calendar_wrap,
.dp__input,
.dp__overlay {
  font-family: 'IMBU Font', 'Open Sans';
}
.dp__cancel {
  display: none;
}
.dp__now_wrap {
  margin-bottom: 1rem;
}
.dp__now_wrap .dp__now_button {
  padding: 0.15em 0.5em;
}
.dp__select {
  color: #f7a800 !important;
}
.multiselect.is-active {
  box-shadow: none;
}
.multiselect-tag {
  background: #f7a800 !important;
}
.multiselect-option.is-selected {
  background: #f7a800 !important;
  color: var(--ms-option-color-selected, #fff);
}
.multiselect-single-label-text {
  color: var(--ms-option-color-pointed, #1f2937);
}
.multiselect-tags-search {
  background: white;
  color: inherit;
}
.multiselect-wrapper {
  padding: 0.2rem;
}
.multiselect-group-label {
  font-size: 16px;
  background: none;
}
.multiselect-group-label.is-selected.is-pointed {
  background: #f7a800 !important;
  color: var(--ms-group-label-color-selected-pointed, #fff);
}
.multiselect-group-label.is-selected {
  background: #f7a800 !important;
  color: var(--ms-group-label-color-selected, #fff);
}
.toast {
  width: 400px !important;
}
main {
  display: flex;
  flex-wrap: nowrap;
}
.login-logo {
  max-height: 200px;
}
.gray-300 {
  color: #dee2e6 !important;
}
.border-primary {
  border-color: #f7a800 !important;
}
.text-bg-primary,
.bg-primary {
  background-color: #f7a800 !important;
}
.bg-dom {
  background: linear-gradient(12.78deg, #FEBB40 0.69%, orange 114.45%);
}
.bg-dsde {
  background: #fecb0a;
}
.bg-pni {
  background: #da1e53;
}
.btn-pni {
  color: #212529 !important;
  background: #da1e53;
  border-color: #da1e53;
}
.btn-dom {
  background: #FFA500;
  border-color: #FFA500;
}
.btn-trash {
  top: -0.3rem !important;
  right: 0 !important;
}
.text-primary {
  color: #f7a800 !important;
}
.btn-primary,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.page-item.active .page-link {
  color: #212529 !important;
  background-color: #f7a800 !important;
  border-color: #f7a800 !important;
}
.btn-outline-primary {
  color: #212529 !important;
  border-color: #f7a800 !important;
  background-color: white !important;
}
.btn-outline-primary:hover {
  color: #212529 !important;
  background-color: #f7a800 !important;
  border-color: #f7a800 !important;
}
.bg-success {
  background-color: #1c985e !important;
}
.bg-warning {
  background-color: #f28e00 !important;
}
.bg-secondary {
  background-color: #7f8991 !important;
}
.bg-danger {
  background-color: #dc3545 !important;
}
.border-success {
  border-color: #1c985e !important;
}
.border-warning {
  border-color: #f28e00 !important;
}
.border-danger {
  border-color: #dc3545 !important;
}
.text-warning {
  color: #f28e00 !important;
}
tr.no-hover td {
  --bs-table-bg-type: white !important;
}
tr.no-hover:hover {
  background-color: white !important;
  --bs-table-hover-bg: white !important;
}
.sidebar {
  padding: 1.5rem !important;
  transition: margin-left 0.5s;
  height: 100%;
  width: 16rem;
}
.slk-marker,
.sidebar-map {
  margin-left: 16rem !important;
  transition: margin-left 0.5s;
}
.sidebar-logo {
  height: 2.5rem;
}
.slider-tooltip {
  background: #f7a800 !important;
  border: 1px solid #f7a800 !important;
}
.top-125 {
  top: 125% !important;
}
.nav-flush .nav-link {
  border-radius: 0;
}
.navbar {
  height: 5.05rem;
  margin-left: 16rem;
  transition: margin-left 0.5s;
}
.mw-25 {
  max-width: 25% !important;
}
.mw-75 {
  max-width: 75% !important;
}
.content {
  height: calc(100% - 5.05rem);
  margin-top: 5.05rem;
  margin-left: 16rem;
  transition: margin-left 0.5s;
}
.subnav {
  position: fixed;
  left: 16rem;
  transition: left 0.5s;
  right: 0;
  z-index: 1000;
}
#dg-output {
  height: calc(100% - 1.7rem);
}
#optimizer-output {
  height: calc(100% - 4.4rem);
}
#optimizer-output div {
  height: calc(100% - 3rem);
}
#app.navbar-toggle .sidebar {
  transition: margin-left 0.5s;
  margin-left: -16rem;
}
#app.navbar-toggle .slk-marker,
#app.navbar-toggle .sidebar-map {
  transition: margin-left 0.5s;
  margin-left: 0rem !important;
}
#app.navbar-toggle .fixed-div {
  transition: width 0.5s;
  width: calc(50% - 1.5rem);
}
#app.navbar-toggle #loader,
#app.navbar-toggle #marine-traffic,
#app.navbar-toggle #move-graph {
  transition: width 0.5s;
  width: calc(50% - 0.8rem);
}
#app.navbar-toggle #hazel-loader {
  transition: width 0.5s;
  width: 100%;
}
#app.navbar-toggle #map {
  transition: width 0.5s;
  width: calc(100%);
}
#app.navbar-toggle .navbar {
  margin-left: 0rem;
  transition: margin-left 0.5s;
}
#app.navbar-toggle .content {
  margin-left: 0rem;
  transition: margin-left 0.5s;
}
#app.navbar-toggle .content .subnav {
  left: 0rem;
}
.status-circle {
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  border-radius: 50%;
}
.navbar-nav h3 {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.particle-range {
  padding: 0.375rem 0.75rem !important;
}
.subnav-content {
  padding-top: 4.65rem;
}
.subnav-content-ptme {
  padding-top: 3rem;
}
.subnav-content-map {
  padding-top: 3rem;
}
.offcanvas {
  width: 25% !important;
  margin-top: 8.1rem !important;
}
.subnav-list .nav-link:not(.active) {
  color: rgba(0, 0, 0, 0.4);
}
.subnav-list .nav-link:hover,
.subnav .nav-link:focus {
  color: #f7a800 !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
  background-color: #f7a800 !important;
  border-color: #f7a800 !important;
}
.alerts.form-check-input:checked,
.btn-permission.btn-success:not([disabled]):not(.disabled).active,
.btn-permission.btn-success:not([disabled]):not(.disabled):hover,
.permissions.form-check-input:checked {
  color: #212529 !important;
  background-color: #1c985e !important;
  border-color: #1c985e !important;
}
.btn-permission.btn-outline-success:not([disabled]):not(.disabled).active,
.btn-permission.btn-outline-success:not([disabled]):not(.disabled):hover {
  color: #1c985e !important;
  background-color: white !important;
  border-color: #1c985e !important;
}
.btn-permission.btn-danger:not([disabled]):not(.disabled).active,
.btn-permission.btn-danger:not([disabled]):not(.disabled):hover,
.btn-permission.btn-outline-danger:not([disabled]):not(.disabled).active,
.btn-permission.btn-outline-danger:not([disabled]):not(.disabled):hover {
  color: #212529 !important;
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
}
.checkbox-lg {
  width: 1.5em !important;
  height: 1.5em !important;
}
.scrollable-menu {
  height: auto;
  max-height: 252px;
  overflow-x: hidden;
}
.bg-articulated-dump-truck {
  position: relative;
}
.bg-articulated-dump-truck:before {
  background: url('/images/common/vehicles/articulated-dump-truck.png');
}
.fa-articulated-dump-truck {
  content: url('/images/common/vehicles/articulated-dump-truck.png');
  width: 1.8em;
}
.bg-backhoe-loader {
  position: relative;
}
.bg-backhoe-loader:before {
  background: url('/images/common/vehicles/backhoe-loader.png');
}
.fa-backhoe-loader {
  content: url('/images/common/vehicles/backhoe-loader.png');
  width: 1.8em;
}
.bg-bucket-wheel-excavator {
  position: relative;
}
.bg-bucket-wheel-excavator:before {
  background: url('/images/common/vehicles/bucket-wheel-excavator.png');
}
.fa-bucket-wheel-excavator {
  content: url('/images/common/vehicles/bucket-wheel-excavator.png');
  width: 1.8em;
}
.bg-bulldozer {
  position: relative;
}
.bg-bulldozer:before {
  background: url('/images/common/vehicles/bulldozer.png');
}
.fa-bulldozer {
  content: url('/images/common/vehicles/bulldozer.png');
  width: 1.8em;
}
.bg-clamshell-excavator {
  position: relative;
}
.bg-clamshell-excavator:before {
  background: url('/images/common/vehicles/clamshell-excavator.png');
}
.fa-clamshell-excavator {
  content: url('/images/common/vehicles/clamshell-excavator.png');
  width: 1.8em;
}
.bg-dragline-excavator {
  position: relative;
}
.bg-dragline-excavator:before {
  background: url('/images/common/vehicles/dragline-excavator.png');
}
.fa-dragline-excavator {
  content: url('/images/common/vehicles/dragline-excavator.png');
  width: 1.8em;
}
.bg-dump-truck {
  position: relative;
}
.bg-dump-truck:before {
  background: url('/images/common/vehicles/dump-truck.png');
}
.fa-dump-truck {
  content: url('/images/common/vehicles/dump-truck.png');
  width: 1.8em;
}
.bg-front-shovel-excavator {
  position: relative;
}
.bg-front-shovel-excavator:before {
  background: url('/images/common/vehicles/front-shovel-excavator.png');
}
.fa-front-shovel-excavator {
  content: url('/images/common/vehicles/front-shovel-excavator.png');
  width: 1.8em;
}
.bg-mining-dump-truck {
  position: relative;
}
.bg-mining-dump-truck:before {
  background: url('/images/common/vehicles/mining-dump-truck.png');
}
.fa-mining-dump-truck {
  content: url('/images/common/vehicles/mining-dump-truck.png');
  width: 1.8em;
}
.bg-motor-grader {
  position: relative;
}
.bg-motor-grader:before {
  background: url('/images/common/vehicles/motor-grader.png');
}
.fa-motor-grader {
  content: url('/images/common/vehicles/motor-grader.png');
  width: 1.8em;
}
.bg-power-shovel-excavator {
  position: relative;
}
.bg-power-shovel-excavator:before {
  background: url('/images/common/vehicles/power-shovel-excavator.png');
}
.fa-power-shovel-excavator {
  content: url('/images/common/vehicles/power-shovel-excavator.png');
  width: 1.8em;
}
.bg-scraper {
  position: relative;
}
.bg-scraper:before {
  background: url('/images/common/vehicles/scraper.png');
}
.fa-scraper {
  content: url('/images/common/vehicles/scraper.png');
  width: 1.8em;
}
.bg-skid-steer-loader {
  position: relative;
}
.bg-skid-steer-loader:before {
  background: url('/images/common/vehicles/skid-steer-loader.png');
}
.fa-skid-steer-loader {
  content: url('/images/common/vehicles/skid-steer-loader.png');
  width: 1.8em;
}
.bg-tracked-excavator {
  position: relative;
}
.bg-tracked-excavator:before {
  background: url('/images/common/vehicles/tracked-excavator.png');
}
.fa-tracked-excavator {
  content: url('/images/common/vehicles/tracked-excavator.png');
  width: 1.8em;
}
.bg-tracked-skid-steer {
  position: relative;
}
.bg-tracked-skid-steer:before {
  background: url('/images/common/vehicles/tracked-skid-steer.png');
}
.fa-tracked-skid-steer {
  content: url('/images/common/vehicles/tracked-skid-steer.png');
  width: 1.8em;
}
.bg-tractor-scraper {
  position: relative;
}
.bg-tractor-scraper:before {
  background: url('/images/common/vehicles/tractor-scraper.png');
}
.fa-tractor-scraper {
  content: url('/images/common/vehicles/tractor-scraper.png');
  width: 1.8em;
}
.bg-trencher-machine {
  position: relative;
}
.bg-trencher-machine:before {
  background: url('/images/common/vehicles/trencher-machine.png');
}
.fa-trencher-machine {
  content: url('/images/common/vehicles/trencher-machine.png');
  width: 1.8em;
}
.bg-wheel-loader {
  position: relative;
}
.bg-wheel-loader:before {
  background: url('/images/common/vehicles/wheel-loader.png');
}
.fa-wheel-loader {
  content: url('/images/common/vehicles/wheel-loader.png');
  width: 1.8em;
}
.bg-wheeled-excavator {
  position: relative;
}
.bg-wheeled-excavator:before {
  background: url('/images/common/vehicles/wheeled-excavator.png');
}
.fa-wheeled-excavator {
  content: url('/images/common/vehicles/wheeled-excavator.png');
  width: 1.8em;
}
.bg-soil {
  position: relative;
}
.bg-soil:before {
  background: url('/images/connect/soil.png');
}
.bg-leak {
  position: relative;
}
.bg-leak:before {
  background: url('/images/connect/leak.png');
}
.bg-sbs::before {
  background: url('/images/sbs/dg.png');
}
.bg-mounted::before {
  content: '';
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 2px;
  bottom: 0;
  left: 0;
  filter: opacity(0.4) drop-shadow(0 0 0 #858796);
  z-index: 0;
  pointer-events: none;
}
.json-string {
  color: #e91e63;
}
.json-number {
  color: #00bcd4;
}
.json-boolean {
  color: #ff00ff;
}
.json-null {
  color: #9e9e9e;
}
.json-key {
  color: #3753a9;
}
.vue-map-container {
  width: 100%;
  height: 100%;
}
.fixed-div {
  position: fixed;
  transition: width 0.5s;
  width: calc(50% - 9.5rem);
}
.highcharts-title {
  color: #333333;
  font-weight: bold;
  fill: #333333;
  text-transform: none !important;
  font-size: 16px !important;
}
.highcharts-axis-title {
  font-size: 1rem !important;
}
.highcharts-legend-item text {
  cursor: pointer !important;
}
.chart-component {
  height: 24.5em !important;
}
.plotly-component {
  height: 26em !important;
}
.plotly-component #plotly-chart-container {
  height: calc(100% - 3rem);
}
.hose-canvas {
  width: 6.66%;
}
.hose-canvas .hose-element {
  padding: 0 0.1rem;
}
.hose-canvas .master-node-element:nth-of-type(1) {
  width: 30%;
  position: absolute;
  top: 10%;
  left: 30%;
  transform: translate(-50%, -50%);
}
.hose-canvas .master-node-element:nth-of-type(2) {
  width: 30%;
  position: absolute;
  top: 10%;
  left: 70%;
  transform: translate(-50%, -50%);
}
.hose-canvas .node-element {
  z-index: 100;
  width: 30%;
  position: absolute;
  bottom: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
}
#app {
  color: #858796;
  height: 100%;
}
#app[data-bs-theme="light"] {
  background-color: #f5f5f5;
}
#app[data-bs-theme="light"] .bg-table-header {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
#app[data-bs-theme="light"] .card {
  border: 1px solid #dee2e6 !important;
}
#app[data-bs-theme="light"] .bg-component,
#app[data-bs-theme="light"] .chart-component,
#app[data-bs-theme="light"] .plotly-component {
  background-color: white !important;
}
#app[data-bs-theme="light"] .text-muted {
  color: #858796 !important;
}
#app[data-bs-theme="light"] .link-dashboard {
  color: #212529 !important;
}
#app[data-bs-theme="light"] .page-item:not(.disabled) .page-link {
  color: #212529 !important;
}
#app[data-bs-theme="light"] .page-item.active .page-link {
  color: #212529 !important;
}
#app[data-bs-theme="light"] .page-item.disabled .page-link {
  background-color: white !important;
}
#app[data-bs-theme="light"] .subnav-list .nav-link.active {
  color: #f7a800 !important;
  font-weight: 700 !important;
}
#app[data-bs-theme="light"] .form-check-label.active {
  color: #dc3545 !important;
  font-weight: 700 !important;
}
#app[data-bs-theme="light"] .dropdown-item.active,
#app[data-bs-theme="light"] .dropdown-item:active {
  color: var(--dropdown-link-color);
  text-decoration: none;
  background-color: white !important;
}
#app[data-bs-theme="dark"] {
  background-color: #32393f;
}
#app[data-bs-theme="dark"] .card {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
#app[data-bs-theme="dark"] .order-arrow:not(.gray-300) {
  color: #212529 !important;
}
#app[data-bs-theme="dark"] .gray-300 {
  opacity: 20%;
}
#app[data-bs-theme="dark"] .bg-component,
#app[data-bs-theme="dark"] .chart-component,
#app[data-bs-theme="dark"] .plotly-component,
#app[data-bs-theme="dark"] .form-select,
#app[data-bs-theme="dark"] input.form-control,
#app[data-bs-theme="dark"] textarea.form-control,
#app[data-bs-theme="dark"] .btn-outline-primary {
  background-color: #212529 !important;
}
#app[data-bs-theme="dark"] .link-dashboard {
  color: #adb5bd !important;
}
#app[data-bs-theme="dark"] .subnav-list .nav-link {
  color: #adb5bd !important;
}
#app[data-bs-theme="dark"] .subnav-list .nav-link.active {
  color: #212529 !important;
  font-weight: 700 !important;
}
#app[data-bs-theme="dark"] .sidebar {
  border-right: 1px solid #495057;
}
#app[data-bs-theme="dark"] .json-key {
  color: #adb5bd !important;
}
#app[data-bs-theme="dark"] .bg-mounted::before {
  opacity: 1;
}
#app[data-bs-theme="dark"] .highcharts-background {
  fill: #212529 !important;
}
#app[data-bs-theme="dark"] tr.no-hover td {
  --bs-table-bg-type: #212529 !important;
}
#app[data-bs-theme="dark"] tr.no-hover:hover {
  background-color: #212529 !important;
  --bs-table-hover-bg: #212529 !important;
}
#app[data-bs-theme="dark"] .highcharts-title {
  color: #e0e0e3 !important;
  fill: #e0e0e3 !important;
}
#app[data-bs-theme="dark"] .highcharts-input-group .highcharts-range-input text {
  color: #e0e0e3 !important;
  fill: #e0e0e3 !important;
}
#app[data-bs-theme="dark"] .highcharts-grid-line {
  stroke: #707073 !important;
}
#app[data-bs-theme="dark"] .highcharts-tooltip .highcharts-label-box {
  stroke-width: 1px !important;
  fill: #000000 !important;
  fill-opacity: 0.85 !important;
}
#app[data-bs-theme="dark"] .highcharts-tooltip .highcharts-tooltip-header text,
#app[data-bs-theme="dark"] .highcharts-tooltip .highcharts-tooltip-box text {
  color: #e0e0e3 !important;
  fill: #e0e0e3 !important;
  stroke: none !important;
}
#app[data-bs-theme="dark"] .highcharts-legend-item text {
  fill: #E0E0E3 !important;
  font-weight: bold !important;
  cursor: pointer !important;
  stroke-width: 0 !important;
}
#app .dropdown-item.active,
#app .dropdown-item:active {
  color: var(--dark-dropdown-link-color);
  text-decoration: none;
  background-color: var(--dark-dropdown-bg-color);
}
.accordion-button {
  font-size: inherit;
}
.accordion-button:not(.collapsed) {
  color: inherit;
  background-color: inherit;
  box-shadow: inset 0 calc(-1*var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-collapse {
  border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.swal2-title {
  padding: 0.2em 1em 0;
}
.swal2-html-container {
  margin: 0.6em 1.6em 0.3em;
}
.swal2-styled.swal2-confirm {
  background-color: #f7a800 !important;
}
.swal2-styled.swal2-confirm:focus,
.swal2-styled.swal2-default-outline:focus {
  box-shadow: none;
}