@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,800;1,100;1,300;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap");
:root {
  --font-family: "Poppins", sans-serif;
  --secondary-font-family: "Roboto", sans-serif;
  --title-font: "Poppins", serif;
  --gray-base: #000000;
  --gray-darker: #333333;
  --gray-dark: #4e5256;
  --gray: #82837f;
  --gray-variant: #979797;
  --gray-light: #d8d8d8;
  --gray-lighter: #f9f9f9;
  --primary: #1e84f1;
  --primary-dark: #0059be;
  --primary-light: #6cb4ff;
  --primary-accent: #1e85f1;
  --text-on-primary: #ffffff;
  --on-primary: #ffffff;
  --primary-30: #0059be;
  --primary-90: #fff;
  --primary-80: #d5eaff;
  --secondary: #00c853;
  --secondary-dark: #009624;
  --secondary-light: #5efc82;
  --secondary-accent: #f7c700;
  --text-on-secondary: #fff;
  --on-secondary: #fff;
  --secondary-30: #009624;
  --secondary-90: #fff;
  --background: #fff;
  --text-color: var(--gray-darker);
  --element-bg: #fff;
  --border: #dddddd;
  --border-variant: #e1e5ef;
  --text: #fff;
  --success: #22bb33;
  --warning: #f7c700;
  --error: #f04141;
  --error-container:#ffb4ab;
  --info: hsla(211, 88%, 53%, 1);
  --info-container: #6cb4ff ;
  --chat-online: #43fc22;
  --preload-bg: var(--secondary);
  --main-color: hsla(211, 88%, 53%, 1);
  --text-grey: #707070;
  --text-gray-light: #757575;
  --border-primary: 8px;
  --border-secondary: 8px;
  --body-bg: #f5f8ff;
  --box-bg: #fff;
  --input-bg: #f5f8ff;
  --txt-color: #2f2d2f;
  --txt-second-color: #ccc;
  --border-color: #4267b2;
  --box-shadow: 0px 3px 6px #00000029;
  --surface: #fff;
  --on-surface: #1a1c1e;
  --outline: #8e9199;
  --on-info: #ffffff;
  --info-container: #7db8f5;
  --info-border: #7db8f5;
  --warning-30: transparent;
  --on-warning: var(--warning);
  --success-30: transparent;
  --on-success: var(--success);
  --border-radius-base: 8px;
}
main {
  display: flex;
  flex-direction: column;
}
main .add-button {
  max-width: 9rem;
  align-self: flex-end;
  margin: 0 0 1rem;
}
main.main-operations .jview-component {
  overflow: auto;
}
main.main-operations .jview-component .approval-op {
  background-color: var(--success);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  pointer-events: none;
}
main.main-operations .jview-component .approval-op svg {
  width: 12px;
  height: 12px;
  fill: var(--text-on-primary) !important;
}
main.main-operations .jview-component .header,
main.main-operations .jview-component .content-item {
  grid-template-columns: 55px repeat(auto-fit, minmax(100px, 1fr)) !important;
  -moz-column-gap: 16px;
  column-gap: 16px;
}
main.main-operations .jview-component .header span.link-op,
main.main-operations .jview-component .content-item span.link-op {
  border: 1px solid var(--border-variant);
  padding: 8px;
  cursor: pointer;
  border-radius: var(--border-secondary);
  max-width: -webkit-max-content !important;
  max-width: -moz-max-content !important;
  max-width: max-content !important;
  min-width: 80px;
  min-width: 80px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 115px !important;
}
main.main-operations .jview-component .header span,
main.main-operations .jview-component .content-item span {
  word-break: break-word;
}
main.main-operations .jview-component .header .beyond-element-input.input,
main.main-operations .jview-component .content-item .beyond-element-input.input {
  padding: 0 1px;
}
main.main-operations .jview-component .header .beyond-element-input.input input,
main.main-operations .jview-component .content-item .beyond-element-input.input input {
  padding: 5px 0;
}
main.main-operations .jview-component .header .content-checkbox,
main.main-operations .jview-component .content-item .content-checkbox {
  width: 100%;
}
@media (min-width: 1400px) {
  main.main-operations .jview-component .header,
  main.main-operations .jview-component .content-item {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  }
}
main.main-operations .jview-component .header .content-checkbox .d-flex.flex-colum.align-center,
main.main-operations .jview-component .content-item .content-checkbox .d-flex.flex-colum.align-center {
  row-gap: 8px;
}
main.main-operations .jview-component .header .content-checkbox .d-flex.flex-colum.align-center span:not(.status):not(.tooltip):not(.tiptext),
main.main-operations .jview-component .content-item .content-checkbox .d-flex.flex-colum.align-center span:not(.status):not(.tooltip):not(.tiptext) {
  height: 20px;
}
main.main-operations .jview-component .header .content-checkbox .d-flex.flex-colum.align-center .beyond-icon-button,
main.main-operations .jview-component .content-item .content-checkbox .d-flex.flex-colum.align-center .beyond-icon-button {
  height: 20px;
  width: 20px;
}
main.main-operations .jview-component .header select,
main.main-operations .jview-component .content-item select {
  max-width: 150px;
}
@media (min-width: 1400px) {
  main.main-operations .jview-component .header select,
  main.main-operations .jview-component .content-item select {
    max-width: 100%;
  }
}
main.main-operations .jview-component .container-item {
  -moz-column-gap: 8px;
  column-gap: 8px;
}
main.main-operations .jview-component .container-item .content-left {
  grid-template-columns: repeat(1, 30px);
}
main.main-operations .jview-header-operations {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--gray-dark);
}
main.main-operations .jview-header-operations .header {
  width: 100%;
  border-bottom: none;
}
main.main-operations .jview-header-operations .header .arrow {
  justify-content: center;
}
main.main-operations .jview-header-operations .content-left {
  grid-template-columns: repeat(1, 30px);
}

.restock-item svg {
  stroke: var(--primary);
}
main.main-content-list-operations header {
  display: flex;
  justify-content: space-between;
}
main.main-content-list-operations header .beyond-icon-button svg.beyond-icon {
  fill: var(--primary-dark);
  width: 20px;
  height: 20px;
}
main.main-content-list-operations header .beyond-icon-button:hover svg.beyond-icon {
  fill: var(--primary);
}
main.main-content-list-operations header .states {
  position: absolute;
  right: 0;
  background-color: var(--element-bg);
  padding: 1rem;
  border-radius: var(--border-primary);
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1607843137);
  z-index: 10;
}
main.main-content-list-operations header .states__item {
  display: flex;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
  align-items: center;
}
main.main-content-list-operations header .states__title, main.main-content-list-operations header .states__item {
  font-size: 9px;
  color: var(--text-gray-light);
}
main.main-content-list-operations header .states__title {
  font-weight: 500;
}
html, body {
  min-height: 100%;
  padding: 0;
  height: 100%;
  margin: 0;
  font-size: 1rem;
  color: var(--text-color);
  font-family: var(--font-family);
}

html {
  background: var(--background);
}

*, *:after, *:before {
  font-family: var(--font-family);
  box-sizing: border-box;
}
.tippy-box[data-animation=fade][data-state=hidden] {
  opacity: 0;
}

[data-tippy-root] {
  max-width: calc(100vw - 10px);
}

.tippy-box {
  position: relative;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  outline: 0;
  transition-property: transform, visibility, opacity;
}

.tippy-box[data-placement^=top] > .tippy-arrow {
  bottom: 0;
}

.tippy-box[data-placement^=top] > .tippy-arrow:before {
  bottom: -7px;
  left: 0;
  border-width: 8px 8px 0;
  border-top-color: initial;
  transform-origin: center top;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^=bottom] > .tippy-arrow:before {
  top: -7px;
  left: 0;
  border-width: 0 8px 8px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}

.tippy-box[data-placement^=left] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^=left] > .tippy-arrow:before {
  border-width: 8px 0 8px 8px;
  border-left-color: initial;
  right: -7px;
  transform-origin: center left;
}

.tippy-box[data-placement^=right] > .tippy-arrow {
  left: 0;
}

.tippy-box[data-placement^=right] > .tippy-arrow:before {
  left: -7px;
  border-width: 8px 8px 8px 0;
  border-right-color: initial;
  transform-origin: center right;
}

.tippy-box[data-inertia][data-state=visible] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: 16px;
  height: 16px;
  color: #333;
}

.tippy-arrow:before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}

.tippy-content {
  position: relative;
  padding: 5px 9px;
  z-index: 1;
}