.lightTheme {
  --main-background: white;
  --main-font: black;
  --main-border: black;
  --main-background: white;
  --light-background: #eeeeee;
  -filter: invert(100%);
}

.darkTheme {
  --main-background: black;
  --main-font: #d7d7d7;
  --main-border: white;
  --light-background: #1e1e1e;
  --disabled-font: #676767;
  --disabled-background: #252424;
  background-color: var(--main-background);
  color: var(--main-font);
  scrollbar-color: var(--light-background) #3f3f3f;
}

.darkTheme input, .darkTheme select, .darkTheme textarea {
   /* #1e1e1e; */
  background-color: #3f3f3f;
  color: var(--main-font);
}

.darkTheme input:disabled, .darkTheme select:disabled, .darkTheme textarea:disabled {
  background-color: var(--disabled-background);
  color: var(--disabled-font);
}

.darkTheme button {
  background-color: #3f3f3f;
  color: var(--main-font);
}

.darkTheme button:disabled {
  background-color: var(--disabled-background);
  color: var(--disabled-font);
}

.darkTheme a:link {
  color: #6e6eff;
}

.darkTheme a:visited {
  color: #8a4aff;
}

.darkTheme .notesTooltip {
  filter: invert(100%);
}

* {
  box-sizing: border-box;
}
body {
  font-size: 2vmin;
  -font-size: 1.5vw;
}
button {
  font-size: 1em;
}
input, textarea, select {
  font-size: 1em;
  border-width: thin;
}

div.mainContent {
  display: grid;
  grid-area: main;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-gap: 0.2em;
  grid-template-areas:
    "toolbar"
    "form";
}
div.rtToolbar {
  grid-area: toolbar;
}
div.rtToolbar button {
  font-size: 1em;
}
div.rtToolbarRight {
    position: relative;
    float: right;
}
div.rtForm {
  grid-area: form;
}
.contentHide {
  display: none;
}

.colWide {
  grid-column-end: span 2;
}

.rowWide {
  grid-row-end: span 2;
}

.controlBox {
  border-radius: 4px;
  border: solid 1px black;
}

.basicGrid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-auto-rows: auto;
}

.printButtons {
  text-align: center;
}

.printButtons button {
  width: 6em; /*130px 80px  */
  height: 4em;
  margin: 0.1rem;
  vertical-align: middle;
  font-size: 0.9em;
}

input[type=radio] {
    border: 0px;
    width: 1em;
    height: 1em;
}
input[type=checkbox] {
    border: 0px;
    width: 1em;
    height: 1em;
}

.statReceived {
  background-color: #45f745;
}

.darkTheme .statReceived {
  background-color: #007100;
}

.darkTheme .statIncoming {
  background-color: #282b00;
}

.statIncoming {
  background-color: #faffa3;
}

.statReturn {
  background-color: #ff4747;
}
.statRefund {
  background-color: #dfa3ff;
}

.darkTheme .statRefund {
  background-color: #53007f;
}
.statRefunded {
  background-color: #c86ff7;
  color: white;
}

.statTeched {
  background-color: #a3e2ff;
}

.darkTheme .statTeched {
  background-color: #005881;
}

.statGTG {
  background-color: #018f2c;
  color: white;
}
.statPriced {
  background-color: #018f2c;
  color: black;
}

.statParts {
  background-color: #01278f;
  color: white;
}
.statScrap {
  background-color: #454545;
  color: white;
}
.statReturned {
  background-color: #cc0000;
  color: white;
}
.statReturn-Pending {
  background-color: #ff8d36;
}
.statRetail-Return {
  color: white;
  background-color: #ff4747;
}
.statSold {
  background-color: #45f745;
  color: red;
  font-weight: bolder;
}

.statDeleted {
  background-color: #000000;
  color: red;
}
.rtContextMenu {
  margin: 0;

  border-width: 1px;
  border-style: solid;
  overflow: hidden;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  border: solid 1px #ddd;
  -moz-box-shadow: 2px 2px 2px #ddd;
  -webkit-box-shadow: 1px 1px 2px #ddd;
  box-shadow: 2px 2px 2px #ddd;
  background: var(--main-background);
}

.rtContextMenuItem {
  padding: 6px;
}

.rtContextMenuItem:hover {
  background-color: var(--light-background);
}



.childCode {
  display: inline-block;
  width: 11em;
}
.childQty {
  display: inline-block;
  width: 3em;
}
.childSerial {
  display: inline-block;
  width: 6em;
}
.childInfo input {
  width: 95%;
}
.childDelete {
  display: inline-block;
  width: 2em;
}
.childDelete button {
  background-color: #ff3131;
  border-radius: 10px;
}
.childInfo {
  padding-bottom: 0.2em;
}
.childDesc textarea {
  width: 100%;
}

.childViewWrapper {
  border: 2px solid var(--main-border);
  padding: 0.2em;
  margin-top: 0.2em;


}
.childViewContent {
  -font-size: 0.9em;
}
#childViewHeader {
  border-bottom: 1px solid var(--main-border);
  padding-bottom: 0.2em;
  margin-bottom: 0.7em;
}
.childWrapper {
  border-bottom: 1px solid black;
  margin-bottom: 0.7em;
  padding-bottom: 0.2em;
}

img.buttonIcon {

  height: 1.3em;
  vertical-align: sub;
}

.darkTheme img.buttonIcon {
  filter: invert(100%);
}

/* jquery ui dark mode */

.darkTheme .ui-widget-content {
    -border: 1px solid #aaaaaa;
    background: var(--main-background);
    color: var(--main-font);
}

.darkTheme .ui-state-default {
    -border: 1px solid #d3d3d3;
    background: #3f3f3f;
    color: var(--main-font);
}

.darkTheme .ui-state-active {
  background: var(--light-background);
  color: var(--main-font);
}

.darkTheme .rtMenuIcon {
  filter: invert(100%);
}

@media (max-aspect-ratio: 2/3) {
  body {
    font-size: 2vmax;
    -font-size: 1.5vw;
  }
  .basicGrid {
    grid-template-columns: 100%;
  }
  .colWide {
    grid-column-end: span 1;
  }
}