@charset "UTF-8";

/* Prevent rubber-band overscroll on all pages */
html, body {
  overscroll-behavior: none;
}

/* Overrides to fix broken positioning from architect ui */
body{
  font-size: 14px;
}

#wrapper.container-fluid{
  margin-top: 41px;
}

.in-app-warning + #wrapper.container-fluid{
  margin-top: 4.7em;
}
/* Header specific */
.navbar {
  margin-bottom: 0;
}
.navbar-fixed-top {
  position: sticky;
}
.subnav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1029;
    border-bottom: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* Terminal Specific */
#terminalSideBar{
  width: 100%;
  position: initial; /* Moving away from fixed positioning */
  overflow-x: initial;
}
#terminalSideBar .terminalSideBarRow{
  width: initial;
  margin: initial;
}
#jsTerminalWorkorderTableControl{
  width: 100%;
  position: initial; /* Moving away from fixed positioning */
}
#jsTerminalWorkorderTableControl .jsClearFilter{
  /* right: 50px !important; */
  top: 11px !important;
}
#jsTerminalWorkorderTableControl .input-group-addon, #jsTerminalWorkorderTableControl .input-group-btn {
  width: initial;
}
#terminalMainContent{
  margin-left: 0px !important;
}
.terminal-actions-container {
  display: flex !important;
  flex-direction: column;
  max-width: 9em;
}

/* For tablet or greater sized devices */
@media (min-width: 992px){
}

/* For less than tablet sized devices */
@media (max-width: 992px){
  #jsSerialTable {
    max-height: unset !important;
  }
}
/* For phone screens */
@media (max-width: 767px){
#jsMainCol {
    height: auto !important;
    margin-top: 0px !important;
    overflow: initial !important; /* overflow breaks the sticky functionality of the action buttons */
}
#jsTerminalWorkorderTableControl {
  top: 120px !important;
}
#mainColTitle {
  position: initial !important;
  z-index: initial !important;
}
#jsLeftCol{
  height: auto !important;
  overflow-y:auto !important;
}
}

.terminal-action {
  height: auto;
  font-size: 0.8em;
  padding: 6px 0px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.terminal-action-icon {
  font-size: 26px;
}
.btn.export-button-class{
  font-size: 1.1em;
}

/* NV D3 Charts */
.nvd3 text {
  font: normal 10px Arial, sans-serif;
}

/* Application header */
.navbar-header .navbar-toggle{
  padding: 4px 10px; 
}
.dataTables_wrapper:not(.form-inline) {
  overflow-x: auto;
}
/* Fix to allow datatables to not always have horizontal scrollbar present on desktop when trying to provide mobile responsive overflow-x */
.dataTables_wrapper > .row {
  margin: 0px;
}
.dataTables_wrapper .col-sm-12 {
  padding: 0px;
}

.jsirContent .table>thead:first-child>tr:first-child>th{
  border-top: 1px solid #ddd;
}

/*  */
@media (max-width: 992px){
  .half-screen{
    max-height: 50vh !important;
  }
  
  .navbar-nav .open .dropdown-menu { /* Fix for navigation header having white on white on ~ipad sized devices*/
    background-color: transparent;
  }

  .dropdown-menu {
    border: none;
    box-shadow: none;
    padding-left: 1.5em;
  }
}

/* Inventory UI  */
.inventory-button-group .btn{
  font-size: 0.9em;
  min-width: 6.8em;
  margin-top: 4px;
}

.input-group-addon{
  width: auto;
  padding: 8px 12px;
}

.progress-bar{
  -webkit-transition: width 0.75s ease-in-out;
  -moz-transition: width 0.75s ease-in-out;
  -o-transition: width 0.75s ease-in-out;
  transition: width 0.75s ease-in-out;
}

@media (max-width: 767.98px){ /* Prevent center align of card header */
  body .card-header {
    text-align: initial;
  }
}

table.dataTable.DTFC_Cloned {  /* Fix to allow frozen datatable columns to not show double text */
  background: white;
}
.DTFC_LeftBodyLiner {
  padding-right: 0px !important;
}
.DTFC_LeftBodyWrapper, .DTFC_LeftWrapper, .DTFC_LeftBodyLiner {
  height: auto !important;
}
/* Fix for datatable frozen column feature to allow column headers to also scroll horizontally */
.DTFC_ScrollWrapper {
  height: 100% !important;
}
.DTFC_ScrollWrapper,
.DTFC_ScrollWrapper .dataTables_scroll {
  overflow-x: auto !important;
}
.DTFC_ScrollWrapper .dataTables_scrollHead,
.DTFC_ScrollWrapper .dataTables_scrollBody {
  overflow: visible !important;
}

/* Bootstrap dual list component  */
.bootstrap-duallistbox-container .buttons {
  width: 100%;
  margin-bottom: -1px;
}

.bootstrap-duallistbox-container label {
  display: block;
}

.bootstrap-duallistbox-container .info {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 11px;
}

.bootstrap-duallistbox-container .clear1,
.bootstrap-duallistbox-container .clear2 {
  display: none;
  font-size: 10px;
}

.bootstrap-duallistbox-container .box1.filtered .clear1,
.bootstrap-duallistbox-container .box2.filtered .clear2 {
  display: inline-block;
}

.bootstrap-duallistbox-container .move,
.bootstrap-duallistbox-container .remove {
  width: 60%;
}

.bootstrap-duallistbox-container .btn-group .btn {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.bootstrap-duallistbox-container select {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bootstrap-duallistbox-container .moveall,
.bootstrap-duallistbox-container .removeall {
  width: 40%;
}

.bootstrap-duallistbox-container.bs2compatible .btn-group > .btn + .btn {
  margin-left: 0;
}

.bootstrap-duallistbox-container select {
  width: 100%;
  height: 300px;
  padding: 0;
}

.bootstrap-duallistbox-container .filter {
  display: inline-block;
  width: 100%;
  height: 31px;
  margin: 0 0 5px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.bootstrap-duallistbox-container .filter.placeholder {
  color: #aaa;
}

.bootstrap-duallistbox-container.moveonselect .move,
.bootstrap-duallistbox-container.moveonselect .remove {
  display:none;
}

.bootstrap-duallistbox-container.moveonselect .moveall,
.bootstrap-duallistbox-container.moveonselect .removeall {
  width: 100%;
}

/* NAVBAR */
.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1rem; }
  .navbar > .container,
  .navbar > .container-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; }

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent; }

.dropdown-toggle:empty::after {
  margin-left: 0; }

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 15rem;
}

.dropdown-menu {
  background: white;
  list-style: none;
}

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030; }

.btn .ion {
  line-height: 0.6;
}

.hidden {
  display: none;
}

.dt-orderable-none {
  pointer-events: none;
}
.dt-orderable-none input,  .dt-orderable-none a{
  pointer-events: all;
}

/* Bootstrap 4.1 Floating Label Implementation */
.form-label-group {
  position: relative;
}

.form-label-group > label {
  padding: .65rem .75rem;
}

.form-label-group > input {
  padding: .65rem 2rem .65rem .75rem;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: #888;
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: .25rem;
  transition: all .1s ease-in-out;
  font-weight: normal;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(.75rem + .75rem * (2 / 3));
  padding-bottom: calc(.75rem / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(.75rem / 3);
  padding-bottom: calc(.75rem / 3);
  font-size: 12px;
  color: #888;
}

.form-label-group .ion {
  position: absolute; 
  right: 1em;
  top: calc(50% - 0.5em);
  color: grey
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: #888;
  }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: #888;
  }
}

.user-profile-icon {
  border: 1px solid white; 
  border-radius: 50%; 
  padding: 2px 4px; 
  box-shadow: inset 0px 0px 0px 1px #fff;
  margin-right: 6px;
}
.user-profile-dropdown::after {
  top: 1px;
  margin-left: 6px;
}

.scroll-shadows {
  background:
    /* Shadow Cover TOP */
    linear-gradient(
      white 30%,
      rgba(255, 255, 255, 0)
    ) center top,
    
    /* Shadow Cover BOTTOM */
    linear-gradient(
      rgba(255, 255, 255, 0), 
      white 70%
    ) center bottom,
    
    /* Shadow TOP */
    radial-gradient(
      farthest-side at 50% 0,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center top,
    
    /* Shadow BOTTOM */
    radial-gradient(
      farthest-side at 50% 100%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ) center bottom;
  
  background-repeat: no-repeat;
  background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  background-attachment: local, local, scroll, scroll;
}

/* Split,js Gutter styling */
.gutter {
  background-color: #e3e3e3;
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-horizontal {
  width: 10px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==");
  cursor: col-resize;
}

.pane {
  padding: 0px 10px;
}

.jsRequiredLabelGap input,
.jsRequiredLabelGap textarea,
.jsRequiredLabelGap select,
.jsRequiredLabelGap [type="label"], 
.jsRequiredLabelGap .badge {
  margin-left: calc(1.5rem);
  transition: none !important;
}

.p-relative {
  position: relative;
}


/* Dark Mode Overrides */
html.dark-mode,
body.dark-mode .app-theme-white.app-container,
body.dark-mode .loading-div {
  background: #232323;  /* very dark background */
}

body.dark-mode input:not(.jsBomInput), body.dark-mode .bom-cell,
body.dark-mode .form-control:focus, body.dark-mode select, body.dark-mode textarea,
body.dark-mode .ui-menu.ui-widget.ui-widget-content, 
body.dark-mode .context-menu-list, body.dark-mode .context-menu-item,
body.dark-mode .dropzone, body.dark-mode .ql-container.ql-snow {
  background: #2f2f2f !important;
  color: white !important;
}

body.dark-mode .bg-light-gray, body.dark-mode .pagination li a {
  background: #646464;  /* dark grey background */
}

body.dark-mode .ql-toolbar.ql-snow {
  background: white;
}

body.dark-mode .pagination li.disabled a {
  background-color: #868686;
  color: white;
}

body.dark-mode,
body.dark-mode .list-group-item-info,
body.dark-mode .btn-more,
body.dark-mode .pagination li a,
body.dark-mode .nav-link,
body.dark-mode .jsBomInput {
  color: #f1f1f1;   /* off-white text */
}

body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .modal-content,
body.dark-mode .modal-footer,
body.dark-mode .panel-body,
body.dark-mode .dropdown-menu,
body.dark-mode .panel,
body.dark-mode .list-group-item,
body.dark-mode .jsFilterMenuFooter {
  background: #424242;  /* light grey background */
}

body.dark-mode .light-grey-override {
  background: #424242 !important;  /* light grey background with !important override */
}

body.dark-mode .well{
  background: #7c7c7c; /* lighter grey background, still good enough contrast for white text */
}

body.dark-mode .horizontal-list ul,
body.dark-mode .table-hover tbody tr:hover,
body.dark-mode .dropdown-menu>li>a:focus, 
body.dark-mode .dropdown-menu>li>a:hover,
body.dark-mode .list-group-item-info {
  background: #526884 !important; /* blueish dark background */
}

body.dark-mode .dataTable a:not([href]):not([tabindex]):not([id]),
body.dark-mode input, 
body.dark-mode select {
  color: black;
}

body.dark-mode a[href]:not(.btn):not(.page-link):not(.nav-link):not(.dropdown-item) {
  color: #99afea; /* lighter default link color */
}

body.dark-mode .horizontal-list li,
body.dark-mode .panel-cell-header,
body.dark-mode .card,
body.dark-mode .card-header,
body.dark-mode .dropdown-menu li a,
body.dark-mode .dropdown-menu li a[href] {
  color: white;
}

body.dark-mode .text-primary {
  color: #99afea !important; /* lighter default link color (!important) */
}

body.dark-mode .card-header,
body.dark-mode .table-bordered,
body.dark-mode .table-bordered th, 
body.dark-mode .table-bordered td,
body.dark-mode .list-group-item,
body.dark-mode .step-container {
  border-color: rgba(255, 255, 255, 0.32) !important; /* white semi-transparent border */
}

body.dark-mode .border-left{
  border-left: 1px solid #3b3d3e !important;
}

body.dark-mode .btn-default:not(.btn-primary) { /* Use btn-light styling for default buttons */
  color: #212529;
  background-color: #eeeeee;
}

body.dark-mode .nvd3 text { /* nvd3 text */
  fill: white !important
}

body.dark-mode .nvd3 .nv-axis path { /* nvd3 x axis */
 stroke: white;
}

  /* ===== Scrollbar CSS ===== */
  /* Firefox */
  body.dark-mode * {
    scrollbar-width: auto;
    scrollbar-color: #646464 #424242;
  }

  /* Chrome, Edge, and Safari */
  body.dark-mode *::-webkit-scrollbar {
    width: 16px;
  }

  body.dark-mode *::-webkit-scrollbar-track {
    background: #424242;
  }

  body.dark-mode *::-webkit-scrollbar-thumb {
    background-color: #646464;
    border-radius: 0px;
    border: 1px solid #000000;
  }
  
  body.dark-mode hr {
    border-top: 1px solid rgb(255 255 255 / 54%);
  }

  body.dark-mode .scroll-shadows {
    background:
      /* Shadow Cover TOP */
      linear-gradient(
        #424242 30%,
        #424242
      ) center top,
      
      /* Shadow Cover BOTTOM */
      linear-gradient(
        #424242, 
        #424242 70%
      ) center bottom,
      
      /* Shadow TOP */
      radial-gradient(
        farthest-side at 50% 0,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0)
      ) center top,
      
      /* Shadow BOTTOM */
      radial-gradient(
        farthest-side at 50% 100%,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0)
      ) center bottom;
    
    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;
  }

  body.dark-mode canvas[data-zr-dom-id] {
    mix-blend-mode: lighten;
  }
  
  .vertical-center {
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%)
  }

  tr.disabled {
    cursor: not-allowed;
  }