@font-face {
  font-family: "Helvetica Neue UL";
  src: local('☺'), url('../includes/fonts/HelveticaNeueLTStd-UltLt.woff') format('woff');
}

@page {
  size:portrait;
  margin:0.25in;
}

* {
  box-sizing: border-box;
  /* Attempt to ensure that any vertically aligned numbers always have same width for each character. */
  font-variant-numeric: tabular-nums;
}

:root {

  --fa-style-family: "Font Awesome 6 Pro";

  --button_color_default: #d9e3c7;
  --button_color_disabled: #a4a4a4;
  --button_color_proceed: lime;
  --button_color_warning: yellow;
  --button_color_critical: #d14233;
  --button_color_action: white;

  --vis_default: collapse;
  --vis_toggle: unset;

  /* Math Plus symbol. These are distinct from the keyboard character. */
  --symbol_math_plus: "\002B";
  /* Math minus symbol */
  --symbol_math_minus: "\2212";

  --stripe_odd: transparent;
  --stripe_even: #D2E5BDCC;
  --stripe_hover: #889d6259;

  --target_color: rgba(255, 165, 0, 0.89);

  /* For use as an initial color, where all actual usages are overridden. */
  /* This will ensure that unhandled cases visually stand out. */
  --placeholder_color: magenta;
}

html {
  height: auto;
  overflow-y: scroll;

  &.dev_indication {

    /* https://en.wikipedia.org/wiki/Safety_orange */
    --stripe: rgba(255 121 0 / 0.7);

    --background: repeating-linear-gradient(
      /* Stripes like forward-slash. */
      -45deg,
      transparent 0,
      transparent 10px,
      var(--stripe) 10px,
      var(--stripe) 20px
    );

    #header {
      /* Approximate height of the space above the menu. */
      --background-height: 87px;

      /* Hides stripes from under logo, logout, and profile links.*/
      --masking: linear-gradient(
        to bottom,
        black 0%,
        transparent 30%,
        transparent 70%,
        black 100%
      );
    }

    #footer {
      --background-height: 100%;

      /* Hides stripes from around usual footer text. */
      --masking: radial-gradient(
        ellipse 20% 40%,
        transparent 0%,
        transparent 80%,
        black 100%
      );
    }

    #header, #footer {
      /* Using a pseudo-element allows us to then use mask-image on only the stripes. */
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: var(--background-height);
        z-index: -1;

        background: var(--background);

        /* This causes the overlapping section of the element to be transparent. */
        mask-image: var(--masking);
      }
    }

    &.prod_db {
      #header, #footer {
        --background: red;
      }

      #footer {
        --masking: none;
      }
    }
  }
}

body {
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  background: white;
  /*box-shadow: 0 0 90px;*/
  /*color: #333;*/
  font: 14px / 1.25 sans-serif;
}

:target {
  scroll-margin-top: 50vh;
  outline: 5px dashed var(--target_color);
}

:any-link {
  color: black;
  text-decoration: none;
}

img {
  border: 0;
}

.fa-circle-question {
  color: #0c0afa;
}

/**
 * header
 */

#header {}
#header::before,
#header::after {
  display: table;
  content: "";
}

#header::after {
  clear: both;
}

#logo {
  float: left;
  padding: 10px 6% 8px 3%;

  a {
    display: block;
    outline: 0;

    img {
      float: left;
    }
  }

  a::before,
  a::after {
    display: table;
    content: "";
  }

  a::after {
    clear: both;
  }
}

#sign-out {

  float: right;
  padding: 0 7.5% 0 2%;

  a {
    display: block;
    padding: 5px;
    margin: 27px 0;
    color: white;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    background-color: #548140;
    border-radius: 5px;
  }

  a:hover {
    background: #86c333;
  }

  .fa {
    margin-left: .5em;
  }
}

#welcome {

  float: right;
  padding: 0 100px 0 2%;

  a:hover {
    color: #86c333;
  }

  a {
    display: block;
    padding: 5px;
    margin: 27px 0;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    color: #548140;
  }

  .fa-circle-user {
    font-size: 1.5em;
    margin-right: .5em;
    vertical-align: middle;
  }
}

#nav {
  clear: both;
}

#nav li {
  cursor: pointer;
}

.menu-depth-0 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.menu-depth-0,
.menu-depth-0 ul {
  padding: 0;
  margin: 0;
  background: #86c333;
  color: white;
  list-style: none;
}

.menu-depth-0 > li {
  border-left: 1px solid white;
  font-size: 17px;
}

.menu-depth-0 a {
  display: block;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}

.menu-depth-0 > li > a {
  height: 46px;
  padding: 0 15px;
  display: flex;
  align-items: center;
}

.menu-depth-0 #mm-home > a {
  background: url("../images/icons/mm-home.png") 10px center no-repeat;
}

.menu-depth-0 > li > a[class*="mm-"]::before {
  margin-right: 0.5em;
  width: 28px;
  text-align: center;
}

.mm-home::before {
  content: url("/images/icons/mm-home.png");
  width: 28px;
  height: 24px;
  display: inline-block;
}

.mm-reports::before {
  content: url("/images/icons/mm-reports.png");
  width: 20px;
  height: 23px;
  display: inline-block;
}

.mm-tools::before {
  content: url("/images/icons/mm-tools.png");
  width: 28px;
  height: 25px;
  display: inline-block;
}

.permissions .icon::before {
  filter: invert();
  opacity: 0.5;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 28px;
  text-align: center;
}

.permissions .indent[depth] {
  --x: 1;
  padding-left: calc(5em + 2.5em * (var(--x) - 1));
}

.permissions .indent[depth="1"] {
  --x: 1;
}
.permissions .indent[depth="2"] {
  --x: 2;
}
.permissions .indent[depth="3"] {
  --x: 3;
}

.menu-depth-0 #mm-groves > a {
  background: url("../images/icons/mm-groves.png") 16px center no-repeat;
}
.menu-depth-0 #mm-pricing > a {
  background: url("../images/icons/mm-pricing.png") 16px center no-repeat;
}
.menu-depth-0 #mm-reports > a {
  background: url("../images/icons/mm-reports.png") 16px center no-repeat;
}
.menu-depth-0 #mm-requestbins > a {
  background: url("../images/icons/mm-reports.png") 16px center no-repeat;
}
.menu-depth-0 #mm-newsletters > a {
  background: url("../images/icons/mm-reports.png") 16px center no-repeat;
}
.menu-depth-0 #mm-locations > a {
  background: url("../images/icons/mm-locations.png") 16px center no-repeat;
}
.menu-depth-0 #mm-creditline > a {
  background: url("../images/icons/mm-creditline.png") 16px center no-repeat;
}

.menu-depth-0 #mm-tools > a {
  background: url("../images/icons/mm-tools.png") 10px center no-repeat;
}

.menu-depth-0 li > a:hover,
.menu-depth-0 li > a.active {
  background-color: #548140 !important;
}

.menu-depth-0 li ul {
  position: absolute;
  z-index: 9999;
  display: none;
  min-width: 170px;
  margin: 0;
  border: 1px solid white;
  padding: 0;
}

.menu-depth-0 ul ul {
  left: 100%;
  top: 0;
}

.menu-depth-0 li:hover > ul {
  display: block;
}

.menu-depth-0 li li {
  display: list-item;
  position: relative;
  margin: 0;
  border-bottom: 1px solid white;
  font-size: 16px;
  white-space: nowrap;
}

.menu-depth-0 li li:last-child {
  border-bottom: 0;
}

.menu-depth-0 li li a {
  padding: 0 10px;
  line-height: 150%;
  text-transform: capitalize;
}

/**
 * END header
 */

#main {
  min-height: 500px;
  padding: 25px;
  margin-bottom: 4em;
}

/**
 * AJAX Message footer overlay
 */

#ajax_message_footer {

  /*transition: 1s opacity, 3s visibility;*/
  /*opacity: 1;*/
  transition-delay: 0s;
  transition-duration: 3s;
  transition-property: visibility;
  /*transition-timing-function: ease;*/

  display: grid;
  grid: 1fr / 1fr;

  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  border-top: thin solid #000;
  border-bottom: thin solid #000;
  /*background: #fff;*/
  background-size: cover;
  height: 3.5em;
  margin-top: auto;
  z-index: 1000;

  &:empty {
    /*opacity: 0;*/
    visibility: hidden;
  }

  .alert {
    margin: 0;
    align-content: center;
  }
}

/**
 * footer
 */

#footer {

  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: url("../images/bg-footer.jpg") center no-repeat;
  background-size: cover;
  height: 3.5em;
  margin-top: auto;
  z-index: 100;

  ul {

    li {

      display: inline-block;
      padding: 0 .75em;
      border-left: 1px solid white;
      text-transform: uppercase;
    }

    li,
    li a {
      font-size: 15px;
      color: white;
      text-decoration: none;
    }

    a {
      padding: 5px;
    }

    a:hover {
      background-color: #548140;
    }

    li:first-of-type {
      border-left: 0;
    }

    .sign-out {
      font-weight: bold;
    }

    .fa {
      margin-left: .5em;
    }
  }
}

/**
 * END footer
 */

.text-align-right {
  text-align: right;
}

.text-align-center {
  text-align: center;
}

.text-align-left {
  text-align: left;
}

.text-underline {
  text-decoration: underline;
}

.text-bold {
  font-weight: bold;
}

@media (max-width: 640px) {
  #main {
    min-height: 0;
  }
}

#page-title-block {

  margin-top: 25px;
  margin-left: 25px;
  margin-right: 25px;
  align-self: stretch;
  border-bottom: 5px solid #86c334;
  background: #e6e7e8;
  border-radius: 0 0 5px 5px;
  padding: 0.3em 0.5em;
  color: #89bf3f;
  font-family: "Helvetica Neue UL", sans-serif;
  font-size: 37px;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

.ui-sortable-handle {
  cursor: grab;
}

.ui-sortable-helper * {
  cursor: grabbing !important;
}

/* jQuery UI tabs */
.ui-tabs.ui-widget {
  padding-top: 0;

  font-family: inherit;
}

.ui-tabs.ui-widget .ui-tabs-nav {
  padding-top: 0;
  border: 0;

  background: none;
  border-radius: 0;
}

.ui-tabs.ui-widget .ui-tabs-nav li {
  margin: 0 5px 0 0;
  border: 0;

  background: none;
  border-radius: 0;
}

.ui-tabs.ui-widget .ui-tabs-nav li.ui-state-active {
  padding-bottom: 10px;

  background: transparent url("../images/tab-arrow-green.png") center bottom no-repeat;
}

.ui-tabs.ui-widget .ui-tabs-nav .ui-tabs-anchor {
  padding: 0.25em 1em;
  outline: 0;

  background: #86c333;
  border-top-right-radius: 0;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 0;
  color: white;
  font-size: 20px;
}

.ui-tabs.ui-widget .ui-tabs-nav li.ui-state-active .ui-tabs-anchor {
  background: #548140;
  color: #b7cc41;
}

.login_alert_block {
  padding: 0.5em 0 1em;
}

.login_alert_block::before,
.login_alert_block::after {
  display: block;
  content: "";
}

.login_alert_block::after {
  clear: both;
}

.alert {

  border: 1px solid #30b661;
  margin: 0 0 .5em;
  padding: 10px 40px;

  background: #00ff00;
  border-radius: 3px;
  color: #000;

  &.error {
    border-color: #ff0000;
    background: #d46d6d;
    color: #000;
  }

  &.warning {
    border-color: yellow;
    background: lightyellow;
    color: black;
  }
}

/**
 * login pages
 */

.no-scroll {
  overflow: hidden;
  height: 100vh;
}

#login-main {
  background: left top no-repeat url("../images/bg-avocados.jpg");
  background-size: cover;
  flex: 1 1 100%;
  padding: 5em;
}

#login-main h1 {
  margin: 0;
  color: white;
  font-family: "Helvetica Neue UL", serif;
  font-size: 8vw;
  font-weight: 100;
  line-height: 72%;
  text-align: center;
}

#login-main #logo {
  float: none;
  padding: 0;
  width: 540px;
  max-width: 100%;
  margin: 0 auto;
  height: auto;
}

/**
Login Form
@see login.php
 */
#login.new-login-form .form-text label {
  text-indent: unset;
  width: auto;
  box-shadow: 0 0 12px black;
  padding-left: 58px;
  background-color: white;
}

#login.new-login-form .form-text input {
  box-shadow: unset;
}

#login,
#login-links,
#register-wrapper {
  width: 100%;
  max-width: 373px;
  padding: 30px;
  margin: 0 auto;
  background: center bottom no-repeat url("../images/shadow-bottom-small.png");
  color: white;
  font-size: 13px;
}

#login-inner {
  padding: 21px 14% 7px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 29px black;
  display: flex;
  flex-direction: column;
}

#login .form-text {
  margin-top: 15px;
  white-space: nowrap;
}

#login .form-text input {

  vertical-align: top;
  width: 100%;
  height: 42px;
  padding: 0 12px 0 24px;
  border: 0;
  margin-left: -4px;
  outline: 0;

  background: white;
  border-radius: 0;
  box-shadow: 0 0 12px black;
  font-size: 18px;
  line-height: 42px;
}

#login .form-text input:-webkit-autofill {
  /* Force background to be white in Chrome. */
  -webkit-box-shadow: 0 0 0 1000px white inset;
}

#login .form-text label {
  /* Keep image over input's box-shadow. */
  position: relative;

  display: inline-block;
  width: 55px;
  height: 42px;

  text-indent: -9999px;
}

#login .username-wrapper label {
  clear:both;
  background: left top no-repeat url("../images/icons/input-username.png");
}

#login .password-wrapper label {
  clear:both;
  background: left top no-repeat url("../images/icons/input-password.png");
}

#login .form-checkbox {
  float: right;

  width: 40%;
  margin-top: 26px;
}

#login .form-checkbox label {
  display: inline-block;

  font-size: 12px;
  line-height: 18px;
  text-shadow: 0 0 8px black;
}

#login .form-checkbox input {
  vertical-align: text-bottom;
  width: 19px;
  height: 18px;
  margin: 0 3px 0 0;
}

#login .form-actions {
  display: inline-block;
  width: 100%;
  margin-top: 20px;
}

#login .form-actions .form-submit {
  padding-bottom: 23px;
  background: center bottom no-repeat url("../images/shadow-bottom-smaller.png");
}

#login .form-actions .form-submit input[type="submit"] {

  width: 100%;
  height: 33px;
  padding: 0;
  border: 0;
  margin: 0;

  background: #86c334;
  color: white;
  cursor: pointer;
  font-size: 13px;
  line-height: 33px;
  text-align: center;
}

#login .form-actions .form-submit input[type="submit"]:hover {
  background-color: #548140;
}

/**
 * END login pages
 */

/**
 * copied from style.css
 */

.title {
  font-weight: bold;
}

table .header {
  border: 0;
  padding-left: 2px;

  background: #d9e3c7;
  font-weight: bold;
}

th {
  background: #d9e3c7;
  font-weight: bold;
}

table .header a,
table th a {
  color: black;
}

tfoot {
  border-top: solid 2px rgba(0, 0, 0, 0.2);
}

.oddrow {
  text-align: center;
  white-space: nowrap;
}

.oddrow td {
  padding-top: 4px;
  padding-bottom: 4px;
}

.evenrow {
  text-align: center;
  white-space: nowrap;
}

.evenrow td {
  padding-top: 4px;
  padding-bottom: 4px;
}

.line_above {
  border-top: 1px solid black;
}

.line_below {
  border-bottom: 1px solid black;
}

/**
 * END copied from style.css
 */

/**
 * COPIED FROM js/sorter/sorterstyle.css
 */
.sortable {width:100%; border-left:1px solid #c6d5e1; border-top:1px solid #c6d5e1; border-bottom:none; margin:0 auto 15px}
.sortable th {text-align:center; color:#000; border:1px solid #fff; border-right:none; font-size: 10px}
.sortable th h3 {font-size:10px; padding:6px 8px 8px}
.sortable td {padding:1px; border-bottom:1px solid #c6d5e1; border-right:1px solid #c6d5e1}
.sortable .head h3 {background:url(/js/sorter/images/sort.gif) 7px center no-repeat; cursor:pointer; padding-left:18px}
.sortable .desc, .sortable .asc {}
.sortable .desc h3 {background:url(js/sorter/images/desc.gif) 7px center no-repeat; cursor:pointer; padding-left:18px}
.sortable .asc h3 {background:url(/js/sorter/images/asc.gif) 7px  center no-repeat; cursor:pointer; padding-left:18px}
.sortable .head:hover, .sortable .desc:hover, .sortable .asc:hover {color:#fff}

#controls {width:100%; margin:0 auto; height:20px}
#perpage {float:left; width:150px}
#perpage select {float:left; font-size:11px}
#perpage span {float:left; margin:2px 0 0 5px}

#text {float:left; width:250px; text-align:center; margin-top:2px}
/**
 * END COPIED FROM js/sorter/sorterstyle.css
 */

@media (min-width: 1180px) {

  #login-main h1 {
    font-size: 108px;
  }
}

#coo_wrapper {
  float: left;
}

#grade_wrapper {
  float: left;
}

#date_wrapper {
  float: left;
}

.submit_wrapper,
#submit_wrapper {
  text-align: center;
}

.loading table {
  display: none;
}

.loading::before {
  content: "loading...";
}

#sales_people_container td {
  white-space:nowrap;
}

table.striping tbody tr:nth-child(odd),
table.manual-striping :is(tbody tr.odd, tbody.odd) {
  background-color: var(--stripe_odd);
}

table.striping tbody tr:nth-child(even),
table.manual-striping :is(tbody tr.even, tbody.even) {
  background-color: var(--stripe_even);
}

table.modern col.odd {
  background-color: white;
}

table.modern col.even {
  background-color: #f2f9e7;
}

table.modern .header-prepend th {
  background-color: transparent;
}

table.striping tbody tr:hover,
table.manual-striping tbody tr:hover {
  background-color: var(--stripe_hover);
}

@media print {

  table.print-striping thead tr:last-child {
    border-bottom: solid 1px #888;
  }

  table.print-striping tbody tr:first-child,
  table.print-striping.striping tr:nth-child(odd),
  table.print-striping.striping tr:nth-child(even),
  table.print-striping.manual-striping tr.odd + tr.even,
  table.print-striping.manual-striping tr.even + tr.odd {
    border-top: solid 1px #888;
  }
}

table.modern {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  :is(th, td) {
    vertical-align: top;
    text-align: left;
    padding: 0.2em 0.5em;
  }

  .col-left {
    text-align: left;
  }

  .col-right {
    text-align: right;
  }

  .col-right input {
    text-align: right;
  }

  .col-center {
    text-align: center;
    justify-items: center;
  }

  .col-spacer {
    background-color: white;
  }

  .col-narrow {
    width: 1em;
  }

  .hide-cell {
    display: none;
  }

  /* For the time being exclude the additional headers on the CDP. */
  :is(
    :is(thead):not(.pre_header) tr:last-child,
    tbody tr
  ) {
    th:not(:first-child) {
      --inset: 0.3em;
      --color: darkgrey;

      @media screen {
        border-image: linear-gradient(to top,
          /* <color> <from> <to> */
          transparent 0% var(--inset),
          var(--color) var(--inset) calc(100% - var(--inset)),
          transparent calc(100% - var(--inset)) 100%
        ) 1 100%;
        border-left: 1px solid;
      }
    }
  }
}

.template-row {
  visibility: collapse;
}

.monospace {
  font-family: monospace;
}

.nowrap {
  white-space: nowrap;
}

.checkbox_list_modern {
  display: grid;
  grid: auto 7em / 1fr;
  width: 200px;

  /* Expand list of checkboxes to fill dialog. */
  .ui-dialog & {
    grid: auto 1fr / 1fr;
  }

  /* Use :has() selector to show only checked boxes without JS. */
  &:has(.show-only-selected-checkbox:checked) {

    .checkboxes-options > label:has(input:not(:checked)) {
      display: none;
    }
  }
}

.checkboxes-top-row {
  display: flex;
}

.checkboxes-toggles {
  display: inline-flex;
  justify-content: flex-start;
  flex: 1 0 auto;

}

.checkboxes-toggles [data-toggle] {
  background: 0 0 no-repeat;
  background-size: 20px 20px;
  width: 20px;
  height: 20px;
  margin-left: 1em;
  cursor: pointer;
}

.checkboxes-toggles [data-toggle="all"] {

  background-image: url('/images/select_all-512.png');
}

.checkboxes-toggles [data-toggle="none"] {

  background-image: url('/images/select_none-512.png');
}

.ui-dialog button {
  width: auto;
}

.checkbox_list_modern.ui-dialog-content .checkboxes-options {
  flex: 1 0 auto;
}

.checkbox_list_modern span[data-expand] {
  margin-left: auto;
  display: none;
  cursor: pointer;
  font-size: 1.6em;
  transform: rotate(-45deg);
}

.checkbox_list_modern.checkboxes-expand span[data-expand] {
  display: inline-block;
}

.show-only-selected {
  cursor: pointer;
}

.checkbox_list_modern .show-only-selected,
.checkbox_list_modern input[data-search],
.checkbox_list_modern.ui-dialog-content .checkbox-label,
.checkbox_list_modern.ui-dialog-content span[data-expand]{
  display: none;
}

.checkbox_list_modern.ui-dialog-content .show-only-selected,
.checkbox_list_modern.ui-dialog-content input[data-search] {
  margin-left: auto;
  display: block;
}

/*
Most PHP checkbox list forms should be styled flex.
 */
.checkbox_list_modern .checkboxes-options {
  display: grid;
  grid: auto / auto 1fr;
  grid-auto-flow: row;
  align-content: start;
  margin-left: 2px;
  border: 2px solid #ccc;
  overflow-y: scroll;
}

.checkbox_list_modern label {
  grid-column: span 2;
  display: grid;
  grid: subgrid / subgrid;
  align-items: start;
  text-align: left;
  cursor: pointer;
}

.checkbox_list_modern.ui-dialog-content label {
  align-items: center;
}

.checkbox_list_modern label:hover {
  background-color: lightgray;
}

.checkbox_container label {
  display: grid;
  grid: auto / auto;
  column-gap: 0.2em;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
}

.operations_exceptions_form #selected_customer {
  width:260px;
}

.form-table {
  display: table;
}

.form-table > label,
.form-table .form-table-row {
  display: table-row;
}

.form-table .form-table-row > label {
  display: contents;
}

.form-table label > * {
  display: table-cell !important;
  margin: 0.2em 0.5em;
  vertical-align: top;
}

.form-table.detail-view input[disabled],
.form-table.detail-view :read-only {
  border: none;
  background-color: transparent;
  resize: none;
}

.element-label {
  font-weight: bold;

  &::after {
    content: ":";
  }
}

label:has(.element-label):has(.label_above) .element-label {
  display: block;
}

/**
 * Element styles
 */
.element-textarea .element-label {
  display: block;
}

*::placeholder {
  font-style: oblique;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {

  opacity: 1;
}

.fa-blank {
  opacity: 0;
}

/**
Default state: hide rows with class "details".
 */
tbody tr.details {
  visibility: collapse;
}

/**
Show rows with class "main-toggle" and "showdetails".
 */
tbody tr.main-toggle,
tbody tr.details.showdetails {
  visibility: visible;
}

/**
Show the Plus sign on toggle and main-toggle rows in the cell with class "plusminus"
 */
tbody tr.toggle .plusminus,
tbody tr.main-toggle .plusminus {
  background-image: url('/images/icons/plus_20x20.png');
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/**
Show the minus sign when toggle-active class is added.
 */
tbody tr.toggle.toggle-active .plusminus,
tbody tr.main-toggle.toggle-active .plusminus {
  background-image: url('/images/icons/minus_20x20.png');
}

/**
Sub-toggle for 2nd level data indented
 */
table.sales-forecast-summary tbody tr.toggle .plusminus {
  position: absolute;
  margin-left: 1em;
}

.detail_toggle {

  --symbol_default: var(--symbol_math_plus);
  --symbol_toggle: var(--symbol_math_minus);

  tbody {
    tr {
      &.detail_record {
        --vis: var(--vis_default);
        visibility: var(--vis);
      }
    }

    td[data-detail_toggle] {
      /* Square up the expando symbol with the left edge of the table. */
      padding-left: 0;
    }

    [data-detail_toggle]:not([toggle=""]) {
      --size: 20px;
      --symbol: var(--symbol_default);

      &.detail_show {
        --symbol: var(--symbol_toggle);
      }

      &::before {
        content: var(--symbol);
        display: inline-grid;
        grid: var(--size) / var(--size);
        align-items: center;
        justify-items: center;

        cursor: pointer;

        background-color: #8dc73f;
        color: white;
        font-size: var(--size);
        line-height: var(--size);
      }
    }
  }

  .detail_toggle_invert {
    --vis_default: ; /* intentionally empty */
    --vis_toggle: collapse;

    --symbol_default: var(--symbol_math_minus);
    --symbol_toggle: var(--symbol_math_plus);
  }
}

.basic-popup {
  cursor: pointer;
}

.simulate-disabled {
  background-color: #f8f8f8;
  border: solid 1px #d0d0d0;
  border-radius: 2px;
  color: #545454;
  padding: 2px 3px;
}

.text-icon::before {
  vertical-align: middle;
  overflow-y: hidden;
  display: inline-block;
}

.checkboxes-not-empty-marker::before {
  content: "*";
  color: orange;
  height: 16px;
  font-size: 20px;
}

/* Use has to hide the "not empty" marker if nothing is checked. */
.checkbox_list_modern:not(:has(.checkboxes-options input:checked)) .checkboxes-not-empty-marker {
  visibility: hidden;
}

/* Hide the prepend while it is still within the tbody. */
tbody .header-prepend {
  visibility: collapse;
}

/* Using native browser sticky functionality */
table.sticky-native {

  :is(
    thead,
    /* Use this for header rows within table bodies. */
    .pseudo_header
  ) {
    position: sticky;
    top: 0;
    /* Prevent tbody data from bleeding through. */
    background-color: white;

    @media print {
      position: revert;
    }
  }
}

.degrees-c::after {
  content: " \2103";
}
.degrees-f::after {
  content: " \2109";
}

.distance-km::after {
  content: " km";
}
.distance-mi::after {
  content: " mi";
}

.tive-logo {

  color: transparent;
  background-image: url("https://platform.tive.com/images/logo/tive-logo-white.png");
  background-repeat: no-repeat;
  background-size: contain;
  filter: invert(31%) sepia(54%) saturate(475%) hue-rotate(43deg) brightness(89%) contrast(91%);
  padding-right: 0.5em;
}

.ui-tooltip {

  border: 1px solid #d6d6d6 !important;
  max-width: none !important;
  padding: 0 !important;
  border-radius: 3px !important;
  /*box-shadow: none !important;*/
  box-shadow: 0 0 1px 2px #00000088;
}

.ui-tooltip .ui-tooltip-content {

  padding: 0.2em 0.6em;
  background-color: #f5f5f5;
  border-radius: 3px;
  color: #444;
  font-size: 14px;
  line-height: 150%;
}

.bad-tracker {
  background-color: salmon !important;
  color: white;
}

.criteria {

  padding-left: 5px;

  &.right {
    float: right;
  }

  &.inline {

    /*float: left;*/
    display: inline-grid;

    /**
    @todo - this might help some criteria look better, but others worse?
     */
    /*vertical-align: bottom;*/

    input {
      margin: 2px;
    }
  }
}

.compact-filters {
  display: flex;
  column-gap: 0.5em;

  & > label {
    display: grid;
  }
}

.criteria_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: start;

  --justify: start;
}

.criteria_column {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.criteria_grid {
  display: grid;
  grid: auto / auto 1fr;
  gap: 0.5em;

  & > label {
    display: grid;
    grid-column: 1 / -1;
    grid: auto / subgrid;
  }

  & > .text_note {
    grid-column: span 2;
  }
}

/**
 * Used to designate sections of a criteria filter that are mutually exclusive.
 * Like when an "Order #" takes precedence over other filters.
 */
.filter-sections {
  align-items: stretch;

  & > .criteria_flex {
    border: solid 2px #9c9c9c;
    border-radius: 0.5em;
    padding: 0.5em;
  }
}

button, [type='submit'] {
  background-color: #d9e3c7;
  border-color: #d9e3c7;
  color: black;
  cursor: pointer;
}

.status_message_area {
  border: thin solid #ccc;
  clear: both;
  padding: 1em;
  margin-top: .5em;
  margin-bottom: .5em
}

.totals-row {
  font-weight: bold;
}

.highlight_changed {
  box-shadow: 0 0 0 1px black;
  border-radius: 2px;
}

.highlight_required {
  box-shadow: 0 0 0 2px red;
  border-radius: 2px;
}

[disabled] {
  cursor: default !important;
}

button,
.button,
select,
.cursor_pointer {
  cursor: pointer;
}

.delete_record {

  color: white;
  background: red;

  &.disabled {

    background: #A9A9A980;
  }
}

.save_page,
.save_data {

  color: white;
  background: gray;

  .row_changed &,
  &.data_changed {

    background: green;
  }
}

.save_data_response {
  display: inline;
}

/**
Remove arrows/spinners from number inputs.
 */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.hidden {
  display: none;
}

.ajax-save-icon {

  width: 1em;
}

#error {
  white-space: pre;
}

.icon_yes {
  color: green;
}

.icon_no {
  color: red;
}

.icon_maybe {
  color: gray;
}

.organic {
  color: white !important;
  background-color: #006400A6 !important;
}

span.organic {
  display: block;
  padding: 1px 5px;
}

/* Global default native dialog backdrop. */
dialog[open]::backdrop {
  background-color: rgba(0,0,0,0.3);
}

#loading-overlay[open] {

  /* Font Awesome has minor alignment issues if the base font-size is not 16px. */
  font-size: 16px;

  /* Prevents scrollbars from showing as icon rotates. */
  overflow: visible;
  background-color: transparent;
  border: transparent;
  color: white;

  &:focus-visible {
    outline: none;
  }

  &::backdrop {
    background-color: rgba(0,0,0,0.5);
  }

  :root:has(&) {
    /* Disable background scrolling when overlay is visible. */
    overflow: hidden;
    /* Prevent horizontal shift as scrolling is disabled. */
    scrollbar-gutter: stable;
  }

  :is(.ajax_success, .ajax_error) {
    font-size: 3em;
    white-space: nowrap;

    filter: drop-shadow(0 0 2px black);
    background-color: #00000040;
    padding: 0.2em 0.3em;
    border-radius: 0.3em;
  }

  .ajax_success {
    .fa-circle-check {
      color: limegreen;
    }
  }

  .ajax_error {
    .fa-circle-xmark {
      color: red;
    }
  }
}

.new-buttons :where(
  input:where([type="submit"], [type="button"]),
  button
) {
  /* top edge effect */
  --button-chamfer: 0 0.1em 0 rgba(255, 255, 255, 0.2) inset;

  display: inline-flex;
  column-gap: 0.3em;
  align-items: center;
  justify-content: var(--justify, center);
  user-select: none;
  padding: 0.3em 0.5em;
  border-radius: 0.4em;

  background-color: var(--button-color, var(--button_color_default));

  --edge-bright: rgba(0, 0, 0, 0.15);
  --edge-dim: rgba(0, 0, 0, 0.3);

  border-color:
    var(--edge-bright)
    var(--edge-dim)
    var(--edge-dim)
    var(--edge-bright)
  ;

  /* Transitioning these properties gives the feeling of motion when "depressing" buttons. */
  transition: background-position 50ms linear, box-shadow 50ms linear;

  background-repeat: repeat-x;
  background-size: auto 600%;
  background-position: 0 50%;

  /*box-shadow: 0 0.1em 0 #dddddd, var(--button-chamfer);*/

  cursor: pointer;
  white-space: nowrap;

  > a {
    color: inherit;
  }

  &:hover {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.05));
  }

  &:active:not(:disabled) {
    border-style: inset;
  }

  &:is([disabled], :disabled) {

    color: rgba(255, 255, 255, 0.8);
    --button-color: var(--button_color_disabled);
    /* This overrides the gradient and makes the button appear flat. */
    background-image: none;
    text-shadow: none;
    cursor: default;

    &:any-link {
      pointer-events: none;
    }
  }
}

.cell-button {
  display: grid;
  justify-self: stretch;
  grid-auto-flow: column;
  padding: 0.1em 0.3em;
}

input[type="datetime-local"] {

  &.datetime_local_display {

    background: transparent;
    border-color: transparent;
    color: inherit;

    /**
     * The icon does not display on disabled elements, but it does take space.
     * If we want to use this inline for formatting reasons, we do not want a large chunk of whitespace.
     */
    &::-webkit-calendar-picker-indicator {
      display: none;
    }
  }
}

.already_shipped {
  color: deepskyblue;
}