:root {
  --main-blue: rgb(50,91,147);
  --main-dark-blue: rgb(30,61,107);
  --main-light-blue: rgb(60,110,176);
  --left-column-width: 15rem;
  --level-width: 1rem;
}

.page {
  display: none;
}

.x-hdr-wrapper {
  position: sticky;
  top:0;
  background-color: white;
  /*overflow: hidden;*/
}
body.offline .x-hdr-wrapper,
body.witherror .x-hdr-wrapper {
  background-color: red;
}
.hdr {
  width: 95%;
  margin: auto;
}
body > svg {
  display: none;
}

#menuBtn,
#menuBtn2 {
  position: absolute;
  top:7px;
  left:7px;
  width: 30px;
}

.queueStatus {
  position: absolute;
  top: 0;
  right:5px;
  font-size: 0.8rem;
}
.queueStatus:empty {
  display: none;
}


/*
html, body {
  margin: 0;
  padding: 0;
  font-family: lato, sans-serif;
  font-size: 16px;
}
#svgDefs {
  display: none;
}
.center {
  text-align: center;
}
*/


/*
select {
  font-size: 1rem;
  border: 2px solid;
  border-image: var(--bg-button);
  border-image-slice: 1;
}
.page {
  max-width: var(--portrait-width);
  padding: 0 0.2rem;
}
.page-wide {
  max-width: var(--landscape-width);
}
.page-wide2 {
  max-width: 1600px;
}
.page-full {
  width: 100vw;
  padding: 0;
}
.page, .page-wide, .page-wide2, .page-full {
  background-color: var(--bg-page);
  margin: 0 auto;
  min-height: 100vh;

  position: relative;
  display: none;
  box-sizing: border-box;
}

.pageContent {
  width: 100%;
  min-height: 100vh;
  margin-bottom: -4rem;
  position: relative;
  box-sizing: border-box;
}
.bgViolet {
  background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), 0.95));
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(0,0,0,0.15);
}*/

.x-transactions-tbl {
  font-size: 12px;
}
/*
.x-transactions-tbl thead th {
  position: sticky;
  top: 50px;
}*/

.tbl-header {
  font-size: 14px;
  /*
  background-image: linear-gradient(to bottom, rgba(var(--tbl-header-rgb), 1), rgba(var(--tbl-header-rgb), 0.95));
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15), inset 0 -1px 0 rgba(0,0,0,0.15);
  */
}
.no-border {
  border-bottom-width: 0 !important;
}

.mwem3 {
  min-width: 3em !important;
}

.wem4 {
  width: 4em !important;
}
.wem5 {
  width: 5em !important;
}
.wem55 {
  width: 5.5em !important;
}
.wrem59 {
  width: 5.9rem !important;
}
.wem6 {
  width: 6em !important;
}
.wem7 {
  width: 7em !important;
}
.wem8 {
  width: 8em !important;
}
.wem10 {
  width: 10em !important;
}
.wem11 {
  width: 11em !important;
}

.form-select-xs {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-left: 0.5em;
  font-size: 12px;
  border-radius: 0.25em;
}
.form-control-xs {
  min-height: calc(1.5em + 0.5em + 2px);
  padding: 0.25em 0.5em;
  font-size: 12px;
  border-radius: 0.25em;
}

.btn-xs {
  --bs-btn-padding-y: 0.25em;
  --bs-btn-padding-x: 0.5em;
  --bs-btn-font-size: 12px;
  --bs-btn-border-radius: 0.25em;
}
.btn-xs2 {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 5px;
  --bs-btn-border-radius: 0.25em;
  line-height: 1.2;
}

#addBtn {
  color: white;
  font-weight: bold;
}

.x-go-back {
  position: absolute;
  top:10px;
  left:1rem;
  padding: 5px;

  border: none;
  background-color: transparent;
  color: black;
}
.x-go-back svg {
  width: 2rem;
}

.x-save-btn {
  position: absolute;
  top:13px;
  right:1.5rem;
  padding: 5px;
  width: 7rem;
}

.x-disabled {
  color: rgb(145,145,145);
}

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

.x-hdr-status-msg {
  text-align: center;
  font-size: 1rem;
  line-height: calc(1rem + 4px);
}

.x-hdr-wrapper .x-filters-column,
.x-hdr-wrapper .x-tbl-body {
  background-color: var(--main-dark-blue) !important;
  box-shadow: inset 0 0 0 9999px transparent;
}

.big-vex-dialog {
  width: 650px !important;
}
.big2-vex-dialog {
  width: 800px !important;
}

.x-compact-dropdown {
  min-width: 150px;
}
.x-compact-dropdown .form-check {
  padding-left: 1.5rem;
}
.x-compact-dropdown .form-check-label {
  cursor: pointer;
}

div.dropdown {
  display: inline-block;
}

.x-rdonly-disabled {
  border: none;
  outline: none;
  box-shadow: none;
  text-align: center;
}
.x-none {
  display: none;
}
/********************* Main Page **********************/

.x-tbl-header {
  font-size: 14px;
  font-weight: bold;
  color: white;
  padding: 0;
}
.x-tbl-header-print {
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  margin-top: 2rem;
}


.x-tbl-2cols {
  display: flex;
}
.x-filters-column {
  flex: 0 0 var(--left-column-width);
  color: white;
  background-color: var(--main-blue);
  transition: flex-basis 0.5s ease;
}
.x-filters-column.x-folded {
  flex-basis: 30px;
  color: var(--main-blue);
}

.x-filters-column div.x-hide {
  display: none;
}

.x-tbl-body {
  flex: 1 1 auto;
}

.x-fold-filter {
  background-color: transparent;
  color: white;
  border: none;
  position: absolute;
  left: calc(var(--left-column-width) - 30px);
}
.x-fold-filter svg {
  width: 24px;
}
#mainPage .x-fold-filter {
  bottom:-28px;
}


.x-row-item, 
.x-row-l1, 
.x-row-l2, 
.x-row-l3 {
  display: flex;
  font-size: 12px;
  line-height: 1.6;
}

.x-row-item > span > input[type="checkbox"] {
  vertical-align: middle;
}

#inventoryItems .x-row-item:hover {
  background-color: #f0f0f0;
}

.x-row-l1 {
  background-color: rgb(189,220,244);
  color: rgb(75,144,185);
}
.x-row-l2 {
  background-color: rgb(214,232,249);
  color: rgb(67,123,155);
}
.x-row-l3 {
  background-color: rgb(229,251,230);
  color: rgb(69,133,72);
}

.x-row-edit {
  font-size: 12px;
  line-height: 20px;
  background-color: aquamarine;
  padding: 5px 0;
}
.x-row-balance {
  background-color: greenyellow;
}
.x-small {
  font-size: 8px;
}

.x-row-control {
  padding: 4px 0;
}
.x-row-item span,
.x-row-l1 span,
.x-row-l2 span,
.x-row-l3 span {
  padding: 4px 3px;
  text-align: center;
}
.x-row-item span *
.x-row-l1 span *,
.x-row-l2 span *,
.x-row-l3 span * {
  vertical-align: top;
}


.x-row-item span:nth-child(1),
.x-row-l2 span:nth-child(1),
.x-row-l3 span:nth-child(1) {
  /* L1 */
  flex: 1 0 var(--level-width);
}
.x-row-item span:nth-child(2),
.x-row-l3 span:nth-child(2) {
  /* L2 */
  flex: 1 0 var(--level-width);
}
.x-row-item span:nth-child(3) {
  /* L3 */
  flex: 1 0 var(--level-width);
  text-align: right;
}
.x-row-item span:nth-child(4) {
  /* Code1 */
  flex: 1 0 5rem;
}
.x-row-item span:nth-child(5) {
  /* Item name */
  flex: 10 0 7rem;
  text-align: left;
}
.x-row-item span:nth-child(6) {
  /* Size */
  flex: 1 0 3.5rem;
}
.x-row-item span:nth-child(7) {
  /* Variant */
  flex: 2 0 4rem;
}
.x-row-item span:nth-child(8) {
  /* UOM */
  flex: 1 0 7rem;
  text-align: left;
}
.x-row-item span:nth-child(9) {
  /* Qty */
  flex: 1 0 2rem;
  text-align: right;
}
.x-row-item span:nth-child(10) {
  /* Cost/unit */
  flex: 1 0 3rem;
  text-align: right;
}
.x-row-item span:nth-child(11) {
  /* Value (base) */
  flex: 1 0 4rem;
  text-align: right;
}
.x-row-item span:nth-child(12) {
  /* Avg demand */
  flex: 1 0 2rem;
  text-align: right;
}
.x-row-item span:nth-child(13) {
  /* Inventory days */
  flex: 1 0 2rem;
}
.x-row-item span:nth-child(14) {
  /* Lead order type */
  flex: 1 0 2rem;
}
.x-row-item span:nth-child(15) {
  /* Projected OOS */
  flex: 1 0 3rem;
}
.x-row-item span:nth-child(16) {
  /* MOQ */
  flex: 1 0 5rem;
}
.x-row-item span:nth-child(17) {
  /* Minimum level */
  flex: 1 0 5rem;
}
.x-row-item span:nth-child(18) {
  /* Excess/shortfall */
  flex: 1 0 2rem;
}
.x-row-item span:nth-child(19) {
  /* Pending orders */
  flex: 2 0 4rem;
}
/* was: new order button
.x-row-item span:nth-child(20) {
  flex: 0 0 4rem;
}*/

.x-row-l1 span:nth-child(1) {
  /* we gather here all other columns */
  flex: 30 0 calc(var(--level-width) + var(--level-width) + var(--level-width) + 60.5rem);
  text-align: left;
  font-weight: bold;
}
.x-row-l2 span:nth-child(2) {
  /* we gather here all other columns */
  flex: 29 0 calc(var(--level-width) + var(--level-width) + 60.5rem);
  text-align: left;
  font-weight: bold;
}
.x-row-l3 span:nth-child(3) {
  /* we gather here all other columns */
  flex: 28 0 calc(var(--level-width) + 60.5rem);
  text-align: left;
  font-weight: bold;
}

.x-row-item > span > select {
  width: 100%;
}
.x-row-item > span {
  white-space: nowrap;
  overflow: hidden;
}

.x-border-btm {
  border-bottom: 2px solid black;
}

.x-filters-column .x-title {
  font-weight: bold;
  font-size: 16px;
  text-align: left;
  padding: 3px;
}
.x-filters-column .x-row {
  font-size: 14px;
  text-align: left;
  padding: 3px;
  /*white-space: nowrap;*/
}

.x-cat-spacer {
  display: inline-block;
  width: 1em;
}
/********************* Generic Page **********************/

/* we define flex dimensions for various items in tables */

:root {
  --flex-code1: 1 0 5rem;
  --flex-name-size-variant: 5 0 15rem;
  --flex-uom: 1 0 7rem;
  --flex-currency: 0 0 4rem;
  --flex-quantity: 1 0 5rem;
  --flex-quantity: 1 0 5rem;
  --flex-value: 1 0 5rem;
  --flex-price: 2 0 7rem;
  --flex-price-big: 2 0 8rem;
  --flex-supplier: 1 0 8rem;
}

/********************* AO Page **********************/

.x-order-btn {
  position: absolute;
  top:13px;
  right:1.5rem;
  padding: 5px;
  width: 7rem;
}

.x-ord-existing {
  background-color: var(--main-blue);
  color: white;
}
.x-ord-variant {
  background-color: var(--main-light-blue);
  color: white;
}
.x-ord-change {
  background-color: rgb(245, 195, 66);
  color: black;
}
.x-ord-estimated {
  background-color: peru;
  color: black;
}

.x-row-ao {
  display: flex;
  font-size: 12px;
  line-height: 1.6;
}

.x-row-ao span {
  padding: 4px 3px;
  text-align: center;
}
.x-row-ao span * {
  vertical-align: top;
}

.x-row-ao > span > input,
.x-row-ao > span > select {
  width: 100%;
  height: 1.5em;
}



.x-row-ao span:nth-child(1) {
  /* Code1 */
  flex: var(--flex-code1);
}
.x-row-ao span:nth-child(2) {
  /* Name/Size/Variant */
  flex: var(--flex-name-size-variant);
  text-align: left;
}
.x-row-ao span:nth-child(3) {
  /* UOM */
  flex: var(--flex-uom);
  text-align: left;
}
.x-row-ao span:nth-child(4) {
  /* Currency */
  flex: var(--flex-currency);
  text-align: left;
}
.x-row-ao span:nth-child(5) {
  /* Current Qty */
  flex: var(--flex-quantity);
}
.x-row-ao span:nth-child(6) {
  /* Value/UOM */
  flex: var(--flex-value);
}
.x-row-ao span:nth-child(7) {
  /* Current Value */
  flex: var(--flex-value);
}
.x-row-ao span:nth-child(8) {
  /* Qty */
  flex: var(--flex-quantity);
}
.x-row-ao span:nth-child(9) {
  /* Value/UOM */
  flex: var(--flex-value);
}
.x-row-ao span:nth-child(10) {
  /* Value */
  flex: var(--flex-value);
}

.x-item-not-available {
  color: gray;
}

/********************* Requisition Request Page **********************/

.x-row-rr {
  display: flex;
  font-size: 12px;
  line-height: 1.6;
}

.x-row-rr span {
  padding: 4px 3px;
  text-align: center;
}
.x-row-rr span * {
  vertical-align: top;
}

.x-row-rr > span > input,
.x-row-rr > span > select {
  width: 100%;
  height: 1.5em;
}

.x-row-rr span:nth-child(1) {
  /* Code1 */
  flex: var(--flex-code1);
}
.x-row-rr span:nth-child(2) {
  /* Name/Size/Variant */
  flex: var(--flex-name-size-variant);
  text-align: left;
}
.x-row-rr span:nth-child(3) {
  /* UOM */
  flex: var(--flex-uom);
  text-align: left;
}
.x-row-rr span:nth-child(4) {
  /* Current Qty */
  flex: var(--flex-quantity);
}
.x-row-rr span:nth-child(5) {
  /* PAR Stock */
  flex: var(--flex-quantity);
}
.x-row-rr span:nth-child(6) {
  /* Requested Qty */
  flex: var(--flex-quantity);
}
.x-row-rr span:nth-child(7) {
  /* Currency */
  flex: var(--flex-currency);
  text-align: left;
}
.x-row-rr span:nth-child(8) {
  /* Last Price */
  flex: var(--flex-price);
}
.x-row-rr span:nth-child(9) {
  /* Est Budget */
  flex: var(--flex-price-big);
}



/********************* Purchase Request Page **********************/


.x-row-pr {
  display: flex;
  font-size: 12px;
  line-height: 1.6;
}

.x-row-pr span {
  padding: 4px 3px;
  text-align: center;
}
.x-row-pr span * {
  vertical-align: top;
}

.x-row-pr > span > input,
.x-row-pr > span > select {
  width: 100%;
  height: 1.5em;
}

.x-row-pr span:nth-child(1) {
  /* Code1 */
  flex: var(--flex-code1);
}
.x-row-pr span:nth-child(2) {
  /* Name/Size/Variant */
  flex: var(--flex-name-size-variant);
  text-align: left;
}
.x-row-pr span:nth-child(3) {
  /* UOM */
  flex: var(--flex-uom);
  text-align: left;
}
.x-row-pr span:nth-child(4) {
  /* Current Qty */
  flex: var(--flex-quantity);
}
.x-row-pr span:nth-child(5) {
  /* PAR Stock */
  flex: var(--flex-quantity);
}
.x-row-pr span:nth-child(6) {
  /* Requested Qty */
  flex: var(--flex-quantity);
}
.x-row-pr span:nth-child(7) {
  /* Currency */
  flex: var(--flex-currency);
  text-align: left;
}
.x-row-pr span:nth-child(8) {
  /* Last Price */
  flex: var(--flex-price);
}
.x-row-pr span:nth-child(9) {
  /* Est Price */
  flex: var(--flex-price);
}
.x-row-pr span:nth-child(10) {
  /* Est Budget */
  flex: var(--flex-price-big);
}
.x-row-pr span:nth-child(11) {
  /* Preffered Supplier */
  flex: var(--flex-supplier);
}


/********************* Requests Page **********************/
#requestsPageContainer {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
#requestsTop, 
#requestsBottom {
  overflow-y: auto;
}
#requestsTop {
  height: 30vh;
}
#requestsBottom {
  height:calc(70vh - 6px);
}
#requestsDivider {
  height: 6px;
  background: #ddd;
  cursor: row-resize;
}

.x-row-requests,
.x-row-requests-rr-items,
.x-row-requests-pr-items {
  display: flex;
  font-size: 12px;
  line-height: 1.6;
}

.x-row-requests span,
.x-row-requests-rr-items span,
.x-row-requests-pr-items span {
  padding: 4px 3px;
  text-align: center;
}
.x-row-requests span *,
.x-row-requests-rr-items span *,
.x-row-requests-pr-items span * {
  vertical-align: top;
}

.x-row-requests > span > input,
.x-row-requests > span > select,
.x-row-requests-rr-items > span > input,
.x-row-requests-rr-items > span > select,
.x-row-requests-pr-items > span > input,
.x-row-requests-pr-items > span > select {
  width: 100%;
  height: 1.5em;
}

.x-row-requests span:nth-child(1) {
  /* Sel */
  flex: 1 0 3rem;
}
.x-row-requests span:nth-child(2) {
  /* ID */
  flex: 1 0 5rem;
}
.x-row-requests span:nth-child(3) {
  /* Date */
  flex: 1 0 5rem;
}
.x-row-requests span:nth-child(4) {
  /* Originator */
  flex: 2 0 7rem;
}
.x-row-requests span:nth-child(5) {
  /* Receiving Warehouse */
  flex: 2 0 7rem;
}
.x-row-requests span:nth-child(6) {
  /* Supplying Warehouse */
  flex: 2 0 7rem;
}

.x-row-requests span:nth-child(7) {
  /* Status */
  flex: 1 0 7rem;
}
.x-row-requests span:nth-child(8) {
  /* Currency */
  flex: 1 0 5rem;
}
.x-row-requests span:nth-child(9) {
  /* Value */
  flex:var(--flex-value);
}

.x-new {
  font-weight: bold;
}
.x-cnf {
  font-weight: 200;
}

.x-selected {
  background-color:aquamarine;
}

.x-row-requests-rr-items span:nth-child(1) {
  /* Code1 */
  flex: var(--flex-code1);
}

.x-row-requests-rr-items span:nth-child(2) {
  /* Name/Size/Variant */
  flex: var(--flex-name-size-variant);
  text-align: left;
}
.x-row-requests-rr-items span:nth-child(3) {
  /* UOM */
  flex: var(--flex-uom);
}
.x-row-requests-rr-items span:nth-child(4) {
  /* Aggregate request Qty */
  flex: var(--flex-quantity);
}
.x-row-requests-rr-items span:nth-child(5) {
  /* Available Qty */
  flex: var(--flex-quantity);
}
.x-row-requests-rr-items.x-ord-status-ISU span:nth-child(5),
.x-row-requests-rr-items.x-ord-status-PEN span:nth-child(5),
.x-row-requests-rr-items.x-ord-status-RCV span:nth-child(5) {
  display: none;
}
.x-row-requests-rr-items span:nth-child(6) {
  /* Issued Qty */
  flex: var(--flex-quantity);
}
.x-row-requests-rr-items span:nth-child(7) {
  /* Received checkbox */
  flex:0 0 4rem;
}
.x-row-requests-rr-items.x-ord-status-NEW span:nth-child(7) {
  display: none;
}
.x-row-requests-rr-items span:nth-child(8) {
  /* Currency */
  flex: var(--flex-currency);
}
.x-row-requests-rr-items span:nth-child(9) {
  /* Price/estimated price */
  flex:var(--flex-price);
}
.x-row-requests-rr-items span:nth-child(10) {
  /* Total Price / Estimated budget */
  flex:var(--flex-price-big);
}




.x-row-requests-pr-items span:nth-child(1) {
  /* Code1 */
  flex: var(--flex-code1);
}

.x-row-requests-pr-items span:nth-child(2) {
  /* Name/Size/Variant */
  flex: var(--flex-name-size-variant);
  text-align: left;
}
.x-row-requests-pr-items span:nth-child(3) {
  /* UOM */
  flex: var(--flex-uom);
}
.x-row-requests-pr-items span:nth-child(4) {
  /* Aggregate request Qty */
  flex: var(--flex-quantity);
}
.x-row-requests-pr-items span:nth-child(5) {
  /* Currency */
  flex: var(--flex-currency);
}
.x-row-requests-pr-items span:nth-child(6) {
  /* Price/estimated price */
  flex:var(--flex-price);
}
.x-row-requests-pr-items span:nth-child(7) {
  /* Total Price / Estimated budget */
  flex:var(--flex-price-big);
}
.x-row-requests-pr-items span:nth-child(8) {
  /* Preferred Supplier */
  flex: var(--flex-supplier);
}
.x-row-requests-pr-items span:nth-child(9) {
  /* Selected Supplier */
  flex: var(--flex-supplier);
}


/********************* Report Page **********************/
/* not used ATM
#reportTable .x-cell {
  text-align: right;
  min-width: 5em;
}
#reportTable .x-cell-center {
  text-align: center;
}
*/

/********************* Add Item Page **********************/



.x-row-addItem1,
.x-row-addItem2,
.x-row-addItem3,
.x-row-addItem4 {
  display: flex;
  margin: 0.5rem 0;
}

.x-row-addItem1 :nth-child(1) {
  flex: 1 0 7rem;
}
.x-row-addItem1 :nth-child(2) {
  flex: 1 0 7rem;
}
.x-row-addItem1 :nth-child(3) {
  flex: 1 0 7rem;
}

.x-row-addItem1 :nth-child(4) {
  flex: 0 0 2rem;
}

.x-row-addItem1 :nth-child(5) {
  flex: 3 0 4.5rem;
}
.x-row-addItem1 :nth-child(6) {
  flex: 3 0 4.5rem;
}
.x-row-addItem1 :nth-child(7) {
  flex: 3 0 4.5rem;
}

.x-row-addItem1 :nth-child(8) {
  flex: 0 0 2rem;
}

.x-row-addItem1 :nth-child(9) {
  flex: 5 0 10rem;
}
.x-row-addItem1 :nth-child(10) {
  flex: 3 0 5rem;
}
.x-row-addItem1 :nth-child(11) {
  flex: 3 0 5rem;
}
.x-row-addItem1 :nth-child(12) {
  flex: 3 0 5rem;
}


.x-row-addItem2 :nth-child(1) {
  flex: 3 0 21rem;
}
.x-row-addItem2 :nth-child(2) {
  flex: 0 0 2rem;
}
.x-row-addItem2 :nth-child(3) {
  flex: 3 0 4.5rem;
}
.x-row-addItem2 :nth-child(4) {
  flex: 2 0 3rem;
}
.x-row-addItem2 :nth-child(5) {
  flex: 2 0 3rem;
}
.x-row-addItem2 :nth-child(6) {
  flex: 2 0 3rem;
}
.x-row-addItem2 :nth-child(7) {
  flex: 0 0 2rem;
}
.x-row-addItem2 :nth-child(8) {
  flex: 5 0 10rem;
}
.x-row-addItem2 :nth-child(9) {
  flex: 9 0 15rem;
}

.x-row-addItem3 :nth-child(1) {
  flex: 1 0 7rem;
}
.x-row-addItem3 :nth-child(2) {
  flex: 1 0 7rem;
}
.x-row-addItem3 :nth-child(3) {
  flex: 1 0 7rem;
}

.x-row-addItem3 :nth-child(4) {
  flex: 0 0 2rem;
}

.x-row-addItem3 :nth-child(5) {
  flex: 3 0 4.5rem;
}
.x-row-addItem3 :nth-child(6) {
  flex: 3 0 4.5rem;
}
.x-row-addItem3 :nth-child(7) {
  flex: 3 0 4.5rem;
}

.x-row-addItem3 :nth-child(8) {
  flex: 0 0 2rem;
}
.x-row-addItem3 :nth-child(9) {
  flex: 14 0 25rem;
}

.x-row-addItem4 :nth-child(1) {
  flex: 2 0 14rem;
}
.x-row-addItem4 :nth-child(2) {
  flex: 1 0 7rem;
}
.x-row-addItem4 :nth-child(3) {
  flex: 0 0 2rem;
}
.x-row-addItem4 :nth-child(4) {
  flex: 3 0 4.5rem;
}

.x-row-addItem4 :nth-child(5) {
  flex: 6 0 9rem;
}
.x-row-addItem4 :nth-child(6) {
  flex: 0 0 2rem;
}

.x-row-addItem4 :nth-child(7) {
  flex: 14 0 25rem;
}


.x-row-addItem1 > span > input,
.x-row-addItem2 > span > input,
.x-row-addItem3 > span > input,
.x-row-addItem4 > span > input,
.x-row-addItem1 > span > select,
.x-row-addItem2 > span > select,
.x-row-addItem3 > span > select,
.x-row-addItem4 > span > select {
  width: 100%;
  height: 1.5em;
}



/* Warehouse subscription */

.x-row-subscribe-wh1 {
  display: flex;
  margin: 0.5rem 0;
}
.x-wh-name {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
}
.x-row-subscribe-wh1 :nth-child(1) {
  flex: 1 0 15rem;
}
.x-row-subscribe-wh1 :nth-child(2) {
  flex: 0 0 7rem;
  text-align: left;
}
.x-row-subscribe-wh1 :nth-child(3) {
  flex: 1 0 7rem;
}
.x-row-subscribe-wh1 :nth-child(4) {
  flex: 0 0 2rem;
}
.x-row-subscribe-wh1 :nth-child(5) {
  flex: 1 1 7rem;
}
.x-row-subscribe-wh1 :nth-child(6) {
  flex: 1 0 5rem;
  text-align: left;
}
.x-row-subscribe-wh1 :nth-child(7) {
  flex: 1 1 8rem;
}

.x-row-subscribe-wh1 :nth-child(8) {
  flex: 0 0 10rem;
  text-align: right;
}
.x-row-subscribe-wh1 :nth-child(9) {
  flex: 1 0 6rem;
}
.x-row-subscribe-wh1 :nth-child(10) {
  flex: 1 0 9rem;
}


.x-row-subscribe-wh1 > span > input,
.x-row-subscribe-wh1 > span > select {
  width: 100%;
  height: 1.5em;
}

.x-row-space {
  margin-bottom: 2rem;
}

.x-error {
  border-color: red;
  border-width: 2px;
}

.x-msg-success {
  color: green;
}
.x-msg-error {
  color: red;
}

/********************* Subscribe to items Page **********************/
.x-row-subscribe-item1,
.x-row-subscribe-item2,
.x-row-subscribe-item3,
.x-row-subscribe-l1, 
.x-row-subscribe-l2, 
.x-row-subscribe-l3 {
  display: flex;
  font-size: 12px;
}

.x-row-subscribe-item1 span,
.x-row-subscribe-item2 span,
.x-row-subscribe-item3 span,
.x-row-subscribe-l1 span,
.x-row-subscribe-l2 span,
.x-row-subscribe-l3 span {
  padding: 4px 3px;
  text-align: center;
}
.x-row-subscribe-item1 span *
.x-row-subscribe-item2 span *
.x-row-subscribe-item3 span *
.x-row-subscribe-l1 span *,
.x-row-subscribe-l2 span *,
.x-row-subscribe-l3 span * {
  vertical-align: top;
}

.x-row-subscribe-item1 > span,
.x-row-subscribe-item2 > span,
.x-row-subscribe-item3 > span {
  white-space: nowrap;
  overflow: hidden;
}

.x-row-subscribe-item1 > span > select,
.x-row-subscribe-item1 > span > input,
.x-row-subscribe-item2 > span > select,
.x-row-subscribe-item2 > span > input,
.x-row-subscribe-item3 > span > select,
.x-row-subscribe-item3 > span > input {
  width: 100%;
  height: 1.5em;
}


.x-row-subscribe-item1 span:nth-child(1),
.x-row-subscribe-l2 span:nth-child(1),
.x-row-subscribe-l3 span:nth-child(1) {
  /* L1 */
  flex: 1 0 var(--level-width);
}
.x-row-subscribe-item1 span:nth-child(2),
.x-row-subscribe-l3 span:nth-child(2) {
  /* L2 */
  flex: 1 0 var(--level-width);
}
.x-row-subscribe-item1 span:nth-child(3) {
  /* L3 */
  flex: 1 0 var(--level-width);
}
.x-row-subscribe-item1 span:nth-child(4) {
  /* Code1 */
  flex: 1 0 5rem;
}
.x-row-subscribe-item1 span:nth-child(5) {
  /* Item name */
  flex: 10 0 7rem;
}
.x-row-subscribe-item1 span:nth-child(6) {
  /* Size */
  flex: 1 0 4rem;
}
.x-row-subscribe-item1 span:nth-child(7) {
  /* Variant */
  flex: 2 0 4rem;
}
.x-row-subscribe-item1 span:nth-child(8) {
  /* UOM */
  flex: 1 0 5rem;
  text-align: left;
}

.x-row-subscribe-item1 span:nth-child(9) {
  /* Subscribe */
  flex: 0 0 5rem;
  text-align: left;
}
.x-row-subscribe-item1 span:nth-child(10) {
  /* Default unit txt */
  flex: 1 0 5rem;
  text-align: right;
}
.x-row-subscribe-item1 span:nth-child(11) {
  /* Default unit select */
  flex: 3 0 5rem;
}
.x-row-subscribe-item1 span:nth-child(12) {
  /* Start quantity */
  flex: 3 0 5rem;
}
.x-row-subscribe-item1 span:nth-child(13) {
  /* Start cost */
  flex: 3 0 5rem;
}




.x-row-subscribe-item2 span:nth-child(1),
.x-row-subscribe-item3 span:nth-child(1) {
  /* first columns */
  flex: 18 0 calc(var(--level-width) + var(--level-width) + var(--level-width) + 25rem);
}
.x-row-subscribe-item2 span:nth-child(2),
.x-row-subscribe-item3 span:nth-child(2) {
  /* text */
  flex: 1 0 10rem;
  text-align: right;
}
.x-row-subscribe-item2 span:nth-child(3),
.x-row-subscribe-item3 span:nth-child(3) {
  /* unit select */
  flex: 3 0 5rem;
}
.x-row-subscribe-item2 span:nth-child(4),
.x-row-subscribe-item3 span:nth-child(4) {
  /* Input */
  flex: 3 0 5rem;
}
.x-row-subscribe-item2 span:nth-child(5),
.x-row-subscribe-item3 span:nth-child(5) {
  /* Input */
  flex: 3 0 5rem;
}



.x-row-subscribe-l1 span:nth-child(1) {
  /* we gather here all other columns */
  flex: 28 0 calc(var(--level-width) + var(--level-width) + var(--level-width) + 50rem);
  text-align: left;
  font-weight: bold;
}
.x-row-subscribe-l2 span:nth-child(2) {
  /* we gather here all other columns */
  flex: 27 0 calc(var(--level-width) + var(--level-width) + 50rem);
  text-align: left;
  font-weight: bold;
}
.x-row-subscribe-l3 span:nth-child(3) {
  /* we gather here all other columns */
  flex: 26 0 calc(var(--level-width) + 50rem);
  text-align: left;
  font-weight: bold;
}


/********************* Config Page **********************/
.x-txtarea-big {
  height: 20rem;
}
.x-txtarea-small {
  height: 15rem;
}

/********************* User Config **********************/

.service-card {
  width: 30%;
  margin: -1rem 0 1rem 70%;
}

.x-width-delete {
  width: 6rem;
}
.x-width-sees-all-hotels {
  width: 10rem;
}
.x-user-delete > input,
.x-user-delete > div,
.x-user-delete > select,
.x-user-delete > button {
  background-color: red !important;
}

/********************* Pay Section **********************/

#payTable input.x-pay-input {
  border: 1px solid #3288e6;
  width: 7rem;
  min-height: 1rem;
  padding: 0 2px;
  text-align: right;
}
#payTable button.btn {
  width: 5rem;
}
#payTable input.x-pay-note {
  border: 1px solid #3288e6;
  width: 100%;
  min-height: 1rem;
  padding: 0 2px;
  text-align: left;
}
#payTable tr.x-pay-has-note,
#payTable tr.x-pay-has-note td {
  border-bottom-width: 0 !important;
}

/********************* Login page **********************/


#loginPage {
  position: absolute;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  background: url('img/login.jpg') no-repeat fixed center center;
  background-size: cover;
  display: none;
}
#loginPage > div {
  margin-top: 45vh;
  text-align: center;
}
#loginPage input {
  margin-bottom: 1em;
  width: 20rem;
}
#lgnErrorTxt {
  color: white;
  background-color: rgba(0,0,0,0.3);
}




/********************* Warning page **********************/

#warningPage {
  position: fixed;
  top:0;
  left:0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0;
  color:white;
  padding-top: 30vh;
  display: none;
  transition: opacity 1s linear;
}
#warningPage h1 {
  text-align: center;
}




/********************* Print Section **********************/
#printPage {
  display: none;
  margin: 0;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  position: relative;
  font-size: 12px;
  /*background-color: aliceblue; -> this is for development */
}

/*
#printPage.thermal {
  margin: 0 3mm;
  width: calc(100% - 6mm);
}
*/
/*
.email-print {
  font-size: 10px;
  line-height: 11px;
  display: inline-block;
}

.printDate {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  width: 10em;
  text-align: right;
}
.printTopLeft {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  text-align: left;
}
.printFooter {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 55px;
  line-height: 1.3;
  font-size: 14px;
  text-align: center;
  opacity: 0.85;
}*/
article {
  position: relative;
  /*background-color: aliceblue;*/
}
article:nth-child(2){
  top:15px;
}

@media print {
  html, body {
    /*height:100vh;*/
    margin: 0;
    padding: 0;
    background-color: white;
  }

  article {
    break-before: page;   /* or: page-break-before: always; for older browsers */
    /*background-color: red;*/
    height: 1300px !important; /*same as he KPageHeight constant, defined in htl_print.js*/
  }

  /* Optional: don’t force a page break before the very first article */
  article:first-of-type {
    break-before: auto;
  }
}

@media screen {
  #printPage {
    visibility: hidden;
  }
}