/*--FONT--*/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700');
@import url('fonts.css');

/* @media print{@page {size: landscape}} */
.image-report.image-report-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999999999;
}

#noty_layout__bottomCenter {
  text-align: center !important;
}

.image-report .age-filters .age-btn {
  padding: 4px 20px;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  border-radius: 6px !important;
  cursor: pointer;
}

.image-report .age-filters .age-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.image-report .age-filters .age-btn.active {
  background: #222;
  color: #fff;
  border-color: #222;
}

.image-report .report-container {
  background: #fff;
  border-radius: 4px;
  overflow: auto;
}

.image-report.image-report-modal .report-container {
  position: fixed;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 9999999999;
}

.image-report .age-filters {
  padding: 10px 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
}

.image-report.image-report-modal .age-filters {
  position: fixed;
  top: 10px;
  left: 10px;
  right: 10px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}

.image-report .image-list {
  width: 100%;
  /* height: 100%; */
  padding: 30px 20px;
  /* overflow: auto; */
}

.image-report .close-report {
  position: fixed;
  top: 10px;
  right: 10px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #000;
  color: #fff;
  z-index: 99999999999;
  cursor: pointer;
}

.image-report.image-report-contained .close-report {
  display: none !important;
}


.color-radio {
  display: block !important;
  margin-right: 20px !important;
  margin-bottom: 20px !important;
}

.color-radio>input {
  /* HIDE RADIO */
  visibility: hidden;
  /* Makes input not-clickable */
  position: absolute;
  /* Remove input from document flow */
}

.color-radio>input+div {
  /* DIV STYLES */
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 2px solid transparent;
}

.color-radio>input:checked+div {
  /* (RADIO CHECKED) DIV STYLES */
  border-color: #ff6600;
}

div.dt-button-collection {
  max-height: 300px;
  overflow-y: auto !important;
}

.form-group {
  margin-bottom: 14px;
}

.form-group > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Stronger value text — only on direct-child value divs in view pages.
   Excludes selectize control wrappers and grid layout divs. */
.form-group > label + div:not(.selectize-control):not(.row):not([class*="col-"]) {
  color: #111827;
  font-weight: 500;
}

/* Muted em-dash for empty value divs */
.form-group > label + div:empty::before {
  content: "—";
  color: #d1d5db;
  font-weight: 400;
}

/* Softer global hr divider */
hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 20px 0;
}

.cat-tree {
  border: 1px solid rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
  border-radius: 12px;
  max-height: 40vh;
  overflow-y: auto;
  position: relative;
}


.cat-tree .mc {
  position: sticky;
  top: 0;
  padding: 0 7px;
}

.cat-tree>li.active ul {
  display: block;
}

.cat-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}

.cat-tree li {
  list-style: none;
  font-weight: normal;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.cat-tree>li:last-child {
  border-bottom: 0;
}

.cat-tree>li {
  list-style: none;
  font-weight: bold;
}

.cat-tree>li>.tree-flex {
  background: #E5E5E5;
}

.cat-tree .tree-flex {
  display: flex;
  align-items: center;
  width: 100%;
}

.cat-tree .tree-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 7px 7px 30px;
}

.cat-tree li label {
  display: inline-block;
}

.cat-tree li input[type="number"] {
  padding: 5px;
  width: 100px;
  margin: 0;
}

.cat-tree li input[type="checkbox"] {
  margin-right: 10px;
}

.cat-tree li label {
  margin-right: 10px;
}

.option-img.grey {
  filter: grayscale(1);
  opacity: 1;
}

.smiley-happy {
  background: url("../images/s3.svg");
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.smiley-sad {
  background: url("../images/s1.svg");
  background-size: 20px;
  width: 20px;
  height: 20px;
}

.feedback [type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
.feedback [type=radio]+img {
  filter: grayscale(100%);
  cursor: pointer;
  margin: 0 10px;
}

/* CHECKED STYLES */
.feedback [type=radio]:checked+img {
  filter: grayscale(0%);
  /*outline: 2px solid #f00;*/
}

.feedback .question {
  /*min-width: 300px;*/
  /*max-width: 400px;*/
  width: 100%;
  text-align: center;
  padding: 20px;
  margin: 0 auto 40px auto;
}

.feedback .options {
  display: flex;
  justify-content: center;
  align-items: center;
}

.success-animation {
  margin: 0 auto;
}

.checkmark {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #4bb71b;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #4bb71b;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  position: relative;
  top: 5px;
  right: 5px;
  margin: 0 auto;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #4bb71b;
  fill: #fff;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}

.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {

  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #4bb71b;
  }
}

/* Sits beside the label it filters, not floated away from it. Floating put it
   on a second line whenever the column was narrower than its own heading, which
   is what made report headers ragged. */
.filter-toggle {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 5px;
  font-size: 11px;
  line-height: 1;
  opacity: 0.4;
  cursor: pointer;
}

.filter-toggle:hover {
  opacity: 0.75;
}

/* The per-column filter panel. It is appended to <body>, so it inherits none of
   the table's styling and had none of its own beyond a hard black hairline: the
   checkbox and its label broke onto separate lines, a column with many distinct
   values grew a panel taller than the screen, and there was no scroll. */
.filter-modal {
  display: none;
  background: #ffffff;
  position: absolute;
  z-index: 100000;
  width: 240px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.filter-modal.active {
  display: block;
}

.filter-modal .filter-content {
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  max-height: 260px;
  overflow-y: auto;
}

/* one value per row: box and label on the same line, the label taking the rest */
.filter-modal .filter-content > div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
}

.filter-modal .filter-content > div:hover {
  background: rgba(0, 0, 0, 0.04);
}

.filter-modal .filter-content > div > input[type="checkbox"] {
  flex: none;
  margin: 0;
}

.filter-modal .filter-content > div > label {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-modal .filterSearchText {
  width: 100%;
  margin-bottom: 8px;
  padding: 5px 9px;
  font-size: 13px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

.filter-modal .filter-footer {
  padding: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.filter-modal .filter-footer .btn {
  float: none !important;
  padding: 3px 12px 4px !important;
  font-size: 13px;
}

/* Clear and Ok are not the same kind of thing. Both were solid red and pushed
   to opposite ends, so the panel offered two equal-looking choices and the
   destructive one read as loudly as the one you actually want. Clear steps
   back; Ok stays the button you press. */
.filter-modal .filter-footer .btn.float-left {
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: rgba(0, 0, 0, 0.6) !important;
  order: 1;
}

.filter-modal .filter-footer .btn.float-left:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.8) !important;
}

.filter-modal .filter-footer .btn.float-right {
  order: 2;
}

.modal-backdrop {
  display: none !important;
}

.btn-round {
  width: 40px;
  height: 40px;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  box-shadow: 2px 2px 3px #ddd;
  border: 0;
  font-size: 16px;
  cursor: pointer;
}

.module_title {
  border: 1px solid #ced4da;
}

.module_title:disabled {
  border-color: #ffffff;
}

.module_edit {
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  cursor: pointer;
  margin-top: 2px;
}

.actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-action {
  margin: 0 15px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-action.btn-edit {}

a.btn-action {
  /*color: inherit;*/
  text-decoration: none;
  padding-top: 2px;
}

.btn-action i {
  font-size: inherit;
}

.jqstooltip {
  box-sizing: content-box;
}

.buttons-html5 {
  padding: 2px 15px !important;
  border-radius: 3px !important;
  cursor: pointer;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #333;
}

.buttons-html5:hover {
  background: #f2f2f2;
}

.buttons-html5.active {
  background: #333;
  color: #fff;
  cursor: default;
}

.popupHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 10px;
  z-index: 100;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

.popupHeader input {
  padding: 2px 15px !important;
  border-radius: 3px !important;
  text-decoration: none;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: #333;
  width: 100px;
  margin-right: 10px;
}

.tag-empty {
  background: #eee;
  border-radius: 12px;
  color: #555;
  display: inline-block;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag {
  float: left;
  height: 24px;
  line-height: 24px;
  position: relative;
  font-size: 11px;
  margin-left: 20px;
  padding: 0 10px 0 12px;
  background: #0089e0;
  color: #fff;
  text-decoration: none;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
}

.tag:before {
  content: "";
  float: left;
  position: absolute;
  top: 0;
  left: -12px;
  width: 0;
  height: 0;
  border-color: transparent #0089e0 transparent transparent;
  border-style: solid;
  border-width: 12px 12px 12px 0;
}

.tag:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  float: left;
  width: 4px;
  height: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #fff;
  -moz-box-shadow: -1px -1px 2px #004977;
  -webkit-box-shadow: -1px -1px 2px #004977;
  box-shadow: -1px -1px 2px #004977;
}

#loading {
  position: fixed;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

#loading .loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  padding: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.settings-default,
.settings-default-encoded {
  padding-left: 15px;
  opacity: 0.5;
  cursor: pointer;
}

.settings-form hr {
  border: 0;
  height: 1px;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
  margin: 10px 0 10px 0;
}

.return-manual {
  background: #cce5ff;
}

.return-manual input[type="text"],
.return-manual input[type="number"],
.return-manual select {
  background: #cce5ff !important;
  border-radius: 0;
}

.btn-barcode-icon {
  background: url("../images/barcode.svg") no-repeat center center;
  background-size: 14px;
  width: 14px;
  height: 14px;
  margin: 0 auto;
}

.script-result {
  background: rgba(0, 0, 0, 0.05);
  padding: 15px;
  min-height: 200px;
  max-height: 200px;
  overflow: auto;
  border-radius: 8px;
  margin-top: 15px;
}

.script h3 {
  margin-bottom: 8px;
}

.script p {
  margin-bottom: 15px;
}

.script {
  margin-bottom: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

table td a,
table td i {
  cursor: pointer !important;
}

.hide {
  display: none !important;
}

.float-invoice {
  position: fixed;
  width: 97%;
  top: 50%;
}

.float-invoice .previous {
  position: fixed;
  font-size: 40px;
  left: 10px;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.7);
}

.float-invoice .next {
  position: fixed;
  font-size: 40px;
  right: 10px;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.7);
}

@media print {
  body {
    background: #ffffff !important;
  }

  .menu,
  .btn,
  .ph {
    display: none !important;
  }

  .ps {
    display: block !important;
  }

  .container {
    padding: 0 !important;
  }

  .table {
    border-color: #000 !important;
  }

  .table th,
  .table td {
    padding: 2px 2px !important;
    border-color: #000 !important;
  }
}

.daybook {
  padding-top: 15px;
}

.daybook .title {
  margin: 5px 0;
}

.ps {
  display: none;
}

.badge {
  display: inline-block;
  padding: 5px 10px;
  background: #eee;
  border-radius: 12px;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.badge-success {
  background: #d9f3d4;
  color: #007c37;
}

.badge-error {
  background: #f8d7da;
  color: #721c24;
}

.pills {
  margin-bottom: 20px;
}

.pills li {
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  margin-right: 10px;
}

.pills li a:hover {
  text-decoration: none;
  border-color: #dfe1e6;
}

.pills li a {
  display: block;
  padding: 5px 15px;
  background: #ffffff;
  border: 1px solid #ffffff;
  color: rgba(0, 0, 0, 0.7);
  border-radius: 30px;
  text-decoration: none;
}

.pills li.active a {
  background: #fa002f;
  border-color: #fa002f;
  color: #ffffff;
}


.info-group label {
  display: block;
}

.info-group {
  margin-bottom: 20px;
}

.grid__col-sizer,
.photo-item {
  width: 32%;
}

.grid__gutter-sizer {
  width: 2%;
}

.photo-item {
  margin-bottom: 10px;
  padding: 10px;
  float: left;
  text-align: center;
}

.photo-item img {
  display: block;
  max-width: 100%;
  border-radius: 2px;
}

.photo-item__caption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin: 0;
}

.photo-item__caption a {
  color: white;
  font-size: 0.8em;
  text-decoration: none;
}

.page-load-status {
  display: none;
  /* hidden by default */
  padding: 20px;
  border-top: 1px solid #DDD;
  text-align: center;
  color: #777;
}

.page-load-status .infinite-scroll-request {
  text-indent: 10000000px;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.5) url("../images/spinner.gif") no-repeat center center;
}

.btn.btn-payment {
  margin-right: 10px;
}

.input-helper {
  display: block;
  opacity: 0.6;
  margin-bottom: 15px;
}

.input-helper i {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}

.tabber {
  display: block;
}

.tabber .tab-list {
  width: 20%;
  display: inline-block;
  vertical-align: top;
}

.tabber .tab {
  padding: 10px 20px;
  margin-right: -1px;
  cursor: pointer;
  position: relative;
  z-index: 99;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.tabber .tab.active {
  background: #ffffff;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  cursor: default;
}

.tabber .tab span {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background: #eff4f6;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 20px;
  margin-right: 10px;
}

.tabber .tab-contents {
  width: 80%;
  display: inline-block;
  vertical-align: top;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px;
  background: #ffffff;
  position: relative;
  z-index: 98;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.tabber .tab-content {
  display: none;
}

.tabber .tab-content.active {
  display: block;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.highlight {
  background: #fff3cd !important;
}

.highlight td,
.highlight input[type="text"],
.highlight input[type="time"],
.highlight input[type="datetime-local"],
.highlight input[type="email"],
.highlight input[type="date"],
.highlight input[type="month"],
.highlight input[type="number"],
.highlight input[type="password"],
.highlight textarea,
.highlight select,
.highlight .selectize-input {
  background: #fff3cd !important;
}

.sticky-table table .highlight td.sticky-cell,
.sticky-table table .highlight td.sticky-cell-opposite {
  background: #fff3cd !important;
}

.highlight .td-highlight {
  background: rgba(231, 76, 60, 1.0) !important;
  color: #fff !important;
}

.td-highlight {
  background: rgba(231, 76, 60, 1.0) !important;
  color: #fff !important;
}

tr:hover .td-highlight {
  background: rgba(231, 76, 60, 1.0) !important;
  color: #fff !important;
}

tr:hover .td-highlight input {
  background: rgba(231, 76, 60, 1.0) !important;
  color: #fff !important;
}

.message {
  background: rgba(241, 196, 15, 0.1);
  color: rgba(243, 156, 18, 1.0);
  border: 1px solid rgba(243, 156, 18, 0.3);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
}

.message.message-success {
  background: #d9f3d4;
  color: #007c37;
  border: 1px solid rgba(0, 124, 55, 0.3);
}

.message.message-error {
  background: rgba(231, 76, 60, 0.05);
  color: rgba(231, 76, 60, 1.0);
  border: 1px solid rgba(231, 76, 60, 0.3);
}

.message.message-info {
  background: #ced4da;
  color: #000;
  border: 1px solid #ced4da;
}

input.error {
  border: 1px solid rgba(231, 76, 60, 1.0) !important;
}

input.success {
  border: 1px solid #27ae60 !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: #3498db !important;
}

.login-message {
  background: rgba(241, 196, 15, 0.1);
  color: rgba(243, 156, 18, 1.0);
  border: 1px solid rgba(243, 156, 18, 0.3);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
}

.pointer {
  cursor: pointer;
}

.sales-images a {
  text-decoration: none;
}

.sales-images img {
  height: 120px;
  width: auto;
  margin: 0 10px 10px 0;
  border-radius: 5px;
}

.report-item {
  margin: 10px;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.report-item:hover {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.report-item .report-col {
  display: inline;
  vertical-align: top;
  margin-right: 30px;
}

@media all and (max-width: 600px) {
  .report-item .report-col {
    display: block;
    margin-right: 0px;
    margin-bottom: 5px;
  }
}

.report-item .report-images {
  margin-top: 10px;
}

.report-item .report-images img {
  width: 200px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 10px;
  margin-right: 10px;
  border-radius: 5px;
}

.table-report {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
}

.table-report th,
.table-report td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  text-align: left;
}

.respons-table {
  scroll-behavior: smooth;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

.respons-table table {
  display: table;
  width: 100%;
}

.table_badge {
  background: #28a745 !important;
  display: block;
  padding: 0 10px;
  color: #fff;
  margin: 2px;
  border-radius: 12px;
  width: 90px;
  text-align: center;
}

.fancybox-slide--iframe .fancybox-content {
  width: 96% !important;
  height: 90%;
  max-width: 90%;
  max-height: 90%;
  margin: 0;
}

.securityValid {
  background: #d9f3d4;
  color: #007c37;
  border: 1px solid rgba(0, 124, 55, 0.3);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
  display: none;
}

.securityInvalid {
  background: rgba(231, 76, 60, 0.05);
  color: rgba(231, 76, 60, 1.0);
  border: 1px solid rgba(231, 76, 60, 0.3);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
  display: block;
}

th.headerSortUp {
  background: url(../images/asc.gif) no-repeat center right;
  background-color: rgba(0, 0, 0, 0.05);
}

th.headerSortDown {
  background: url(../images/desc.gif) no-repeat center right;
  background-color: rgba(0, 0, 0, 0.05);
}

tr:hover td,
tr:hover td input,
tr:hover td select,
tr:hover .selectize-input {
  background: #EEE !important;
  background-color: #EEE !important;
}

tr.no-highlight:hover td {
  background: none;
}

.btn-new {
  background: #fa002f;
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  color: white;
  display: inline-block;
  vertical-align: top;
  margin-left: 5px;
  margin-top: 2px;
  border-radius: 40px;
  cursor: pointer;
}

.pagination {
  display: block;
  margin: 20px 0;
}

.pagination .pgn-block {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
}

.pagination .pgn-btn {
  background: #fa002f;
  color: #ffffff;
  border: 0;
  padding: 2px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-style: normal;
}

.noimage {
  background: #fdd8d8;
}

.dataTable .noimage {
  background-color: #fdd8d8 !important;
}

.dataTable .noimage input {
  background-color: #fdd8d8 !important;
}

.dataTable .noimage:hover input {
  background-color: #EEE !important;
}

.td-link a {
  display: block;
  cursor: pointer;
  text-decoration: none;
}

.pimages img {
  width: 100%;
  height: auto;
  padding: 10px;
  border-radius: 4px;
}

.landing {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.landing .store-logo {
  width: 90wv;
  max-width: 400px;
  height: auto;
}

.landing span {
  display: block;
  font-weight: bold;
  font-size: 11px;
  margin-top: 30px;
}

.landing .ambar-logo {
  width: 150px;
  height: auto;
}

.text-big {
  font-weight: bold;
  font-size: 20px;
  line-height: 20px;
}

.text-highlight {
  color: #fa002f;
}

.rating {
  margin: 0 0 10px 0;
  padding: 0;
}

.rating li.active {
  color: #f9ca00;
}

.rating li {
  cursor: pointer;
  font-size: 18px;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
}

table .select2-container {
  margin: 0 !important;
}

table .select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 0;
  border-radius: 0;
}

table .text-right {
  text-align: right !important;
}

.table-sales .lCategory,
.table-sales .lDesign,
.table-sales .lSqty,
.table-sales .lUnit,
.table-sales .lStock,
.table-sales .lPrice,
.table-sales .lDiscount,
.table-sales .lAllowedDiscount,
.table-sales .lSubtotal,
.table-dynamic .lMRPRound,
.table-sales .lImage,
.table-dynamic .td-text {
  padding: 0 10px;
}

.table-sales .lImage {
  cursor: pointer;
}

.strike {
  text-decoration: line-through;
}

.strike .hint-text {
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  padding-top: 2px;
  margin-left: 5px;
}

.checklist label {
  display: inline-block !important;
}

.manual-upload {
  display: inline-block;
  vertical-align: top;
  font-size: 80%;
  border-bottom: thin solid rgba(25, 118, 210, 0.3);
  color: rgba(25, 118, 210, 1);
  margin-left: 5px;
}

.manual-upload:hover {
  border-bottom: thin solid rgba(13, 71, 161, 0.3);
  color: rgba(13, 71, 161, 1);
}

.files .file {
  margin-bottom: 20px;
}

.files .file a {
  color: inherit;
}

.files .file a:hover {
  color: rgba(13, 71, 161, 1);
}

.files .file .icon {
  display: inline-block;
  vertical-align: middle;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 45px;
  height: 45px;
  width: 45px;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  font-weight: 800;
  letter-spacing: 0.5px;
}

.files .file .file-name {
  display: inline-block;
  vertical-align: middle;
}

.files .file .file-name span {
  display: block;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
  letter-spacing: 0.5px;
}

#search {
  float: right;
  padding: 5px 8px;
  border-radius: 5px;
  margin: 0 10px;
  cursor: text;
  background: #fff;
  border: 1px solid #fff;
}

#search:focus {
  outline: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.filter {
  float: left;
  display: block;
  margin-bottom: 40px;
}

.filter li {
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  padding: 5px 20px;
  border-radius: 5px;
  margin: 0 10px;
  cursor: pointer;
}

.filter li:first-of-type {
  margin: 0 10px 0 0;
}

.filter li.active,
.filter li:hover {
  background: #fff;
}

.timemachine {
  margin-bottom: 30px;
}

.timemachine a {
  display: inline-block;
  vertical-align: middle;
  border-radius: 5px;
  margin: 0 10px;
  cursor: pointer;
  color: inherit;
  font-size: 12px;
  opacity: 0.7;
}

.timemachine a:first-of-type {
  margin: 0 10px 0 0;
  opacity: 1;
}

.hint-text {
  opacity: 0.6;
}

.big-text {
  font-size: 20px;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.container {
  width: 95% !important;
  max-width: 95% !important;
  margin: auto;
}

.mobile-menu-wrap {
  display: none;
}

.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 100;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 100;
}

nav.menu {
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

nav.menu::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: #fff;
}

nav.menu::-webkit-scrollbar-button {
  width: 4px;
  height: 4px;
}

nav.menu::-webkit-scrollbar-track {
  background: #eee;
  border: none;
  box-shadow: 0px 0px 3px #dfdfdf inset;
}

nav.menu::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border: none;
  border-radius: 15px;
}

nav.menu::-webkit-scrollbar-thumb:hover {
  background: #cccccc;
}

nav.menu>li {
  position: relative;
  list-style: none;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

nav.menu>li.brand {
  font-weight: 600;
  color: #fa002f;
}

nav.menu>li.brand a {
  font-weight: 600;
  color: inherit;
}

nav.menu li a {
  display: block;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  text-decoration: none;
  padding: 5px 5px;
  border-radius: 12px;
}

nav.menu li a:hover,
nav.menu li a:focus {
  color: rgba(0, 0, 0, 1);
  text-decoration: none;
}

nav.menu>li:hover>ul {
  display: block;
}

nav.menu>li>ul::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: #fff;
}

nav.menu>li>ul {
  display: none;
  position: fixed;
  background: #fff;
  /*top: 37px;*/
  box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.2);
  z-index: 99;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 3px;
  /*left: 0;*/
  max-height: 90vh;
  overflow-y: auto;
}

@media all and (max-height: 700px) {
  nav.menu>li>ul {
    max-height: 300px;
    overflow-y: auto;
  }
}

nav.menu>li>ul>li {
  display: block;
  position: relative;
  margin: 0;
  /*padding: 5px 10px;*/
  min-width: 180px;
  border-radius: 12px;
}

nav.menu>li>ul>li:not(.divider):not(.heading):hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ------------------------------------------------------------------ *
 * DataTables furniture
 *
 * 1.10 ships its sort indicators as PNG sprites — two grey triangles in
 * every header, at every column, whether that column is sorted or not. They
 * are drawn here instead: one caret, faint until the column is actually
 * sorted, so a glance at a header row says which column is doing the work.
 * Drawn with borders rather than a glyph, so nothing waits on a font.
 * ------------------------------------------------------------------ */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead td.sorting,
table.dataTable thead td.sorting_asc,
table.dataTable thead td.sorting_desc {
  background-image: none !important;
  position: relative;
  cursor: pointer;
}

/* Deliberately only the type. Reports put their own furniture in these headers
   — column filters, totals rows, sticky columns — and sized them to fit it, so
   padding and wrapping are left to the page. Taking those over made a wide
   report's filters wrap onto a second line. */
/* Matched to a plain ERP table header — same size, weight, colour, padding and
   baseline — so a sortable table does not announce itself as a different kind
   of table. Only the type: reports size their own headers around column filters
   and totals rows. */
table.dataTable thead th,
table.dataTable thead td {
  font-size: 12px;
  font-weight: 700;
  color: #212529;
  vertical-align: middle;
}

/* A plain table meets the top of its card, so its own top edge is trimmed. A
   DataTable does not — the export buttons and the search box sit above it
   inside the same card — so the table needs the edge back, or its header row
   floats under the toolbar with nothing between them. */
.table-responsive .dataTables_wrapper table.dataTable thead tr:first-child th,
.table-responsive .dataTables_wrapper table.dataTable thead tr:first-child td {
  border-top: 1px solid #E0E0E0 !important;
}

table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after,
table.dataTable thead td.sorting::after,
table.dataTable thead td.sorting_asc::after,
table.dataTable thead td.sorting_desc::after {
  /* Positioned, not in the flow. An inline caret costs about fourteen pixels in
     every sortable header, which on a thirty-column GST report is nearly five
     hundred pixels of extra sideways scrolling. DataTables' sprite was a
     background image for exactly this reason, and it already reserves 18px of
     right padding for it — this sits in that space and costs nothing. */
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_desc::after {
  border-top: 5px solid currentColor;
  margin-top: -2px;
}

table.dataTable thead .sorting_asc::after {
  border-bottom: 5px solid currentColor;
  margin-top: -3px;
}

/* unsorted is a hint, sorted is a statement */
table.dataTable thead .sorting::after { opacity: 0.22; }
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after { opacity: 0.85; }
table.dataTable thead .sorting:hover::after { opacity: 0.5; }

.table-responsive .dataTables_wrapper .dataTables_filter input {
  font-size: 14px;
  margin: 0;
}

/* the row count and the pager read as furniture, not as content */
.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-block;
  padding: 3px 10px 4px;
  margin-left: 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6) !important;
  cursor: pointer;
  background: transparent;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #fa002f;
  border-color: #fa002f;
  color: #fff !important;
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
  cursor: default;
}

/* an empty table is a sentence, not a stranded cell */
table.dataTable td.dataTables_empty {
  padding: 30px 16px !important;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
}

/* Filter actions sit on the field baseline, side by side. A one-field filter
   does not need two full-width buttons — btn-block turned Search and Clear into
   a pair of red bars wider than the field they act on. */
.cl-filter-actions > div {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* A heading whose whole group is hidden by permissions has nothing left to
   head. The items are each gated individually, so the heading sits outside
   those conditionals — otherwise it disappears with whichever single item it
   happened to precede and the rest of the group loses its label. Instead it
   stays, and hides itself when nothing real follows it. */
nav.menu > li > ul > li.heading:last-child,
nav.menu > li > ul > li.heading:has(+ li.heading),
nav.menu > li > ul > li.heading:has(+ li.divider) {
  display: none;
}

/* Section label inside a dropdown: aligns with the item text above it, and is
   not a target — no hover, no pointer. */
nav.menu>li>ul>li.heading {
  padding: 7px 5px 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.35);
  cursor: default;
}

nav.menu>li>ul>li.divider {
  height: 1px;
  margin: 2px 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.07);
}

nav.menu>li>ul>li:hover>ul {
  display: block;
}

nav.menu>li>ul>li>ul {
  display: none;
  position: fixed;
  background: #fff;
  top: 41px;
  box-shadow: 0 3px 5px -2px rgba(0, 0, 0, 0.2);
  z-index: 99;
  left: 100%;
  top: 0;
  border-radius: 12px;
}

nav.menu>li>ul>li>ul>li {
  display: block;
  position: relative;
  margin: 0;
  /*padding: 5px 10px;*/
  min-width: 150px;
}

nav.menu>li>ul>li>ul>li:hover {
  background: rgba(0, 0, 0, 0.03);
}

main {
  position: relative;
  height: 100%;
  padding-top: 41px;
  margin-bottom: 50px;
  z-index: 10;
}

main.no-padding {
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

.btn-dropdown {
  position: relative;
}

.btn-dropdown ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 5px 0;
  z-index: 1000;
}

.btn-dropdown:hover ul {
  display: block;
}

.btn-dropdown:hover ul li {
  display: block;
  list-style: none;
  text-align: left;
}

.btn-dropdown:hover ul li a {
  display: block;
  padding: 5px 10px;
  min-width: 140px;
  color: inherit;
  text-decoration: none;
}

.btn-dropdown:hover ul li:hover a {
  background: rgba(0, 0, 0, 0.05);
}

#dt_wrapper {
  margin-top: 15px !important;
}

.dt-button.buttons-html5 {
  position: relative;
  background: transparent !important;
  color: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 3px 10px 4px 10px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: inline-block;
  text-decoration: none;
  font-style: normal;
  pointer-events: auto;
  font-size: 14px;
}

.dt-button.buttons-html5:hover {
  border-color: rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.8) !important;
}

.dataTables_wrapper .dataTables_filter input {
  border-radius: 12px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}


.btn {
  position: relative;
  background-color: #fa002f !important;
  color: #ffffff !important;
  border: 0;
  padding: 7px 10px 8px 10px !important;
  border-radius: 12px;
  cursor: pointer !important;
  display: inline-block;
  text-decoration: none;
  font-style: normal;
  pointer-events: auto;
  font-size: 14px;
}

.btn.btn-light {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: #000 !important;
}

.btn.btn-light:hover,
.btn.btn-light:focus,
.btn.btn-light:active,
.btn.btn-light.active {
  background: #f2f2f2;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #000;
  box-shadow: none;
}

.btn.btn-sm {
  padding: 2px 5px 3px 5px !important;
  font-size: 12px;
  border-radius: 6px !important;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
  color: #ffffff;
  background-color: #fa002f;
  text-decoration: none;
  box-shadow: inset 200px 200px 300px 200px rgba(0, 0, 0, 0.3);
}

.btn-blank {
  /* .btn sets background-color with !important, so a plain declaration here
     never applied and every "blank" button came out solid red. */
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.6) !important;
}

.btn-blank:hover,
.btn-blank:focus {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.7);
}

.btn.btn-block {
  width: 100%;
  text-align: center;
  /* height: 25px; */
  /* line-height: 25px; */
  /* padding: 0 !important; */
}

.btn-disabled {
  background: #95a5a6;
}

.btn-delete-disabled {
  background: #95a5a6;
}

.btn.btn-asphalt {
  background: #2c3e50;
}

.btn:focus {
  color: inherit;
  text-decoration: none;
}

.heading {
  margin-top: 10px;
  margin-bottom: 10px;
}

.heading h2 {
  margin: 0px;
  font-size: 24px;
}

.heading select {
  -webkit-appearance: none;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-width: 0 0 1px 0;
  border-radius: 0;
  background: transparent;
  color: #222;
}

.heading .bradcrumbs {
  display: block;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  font-style: italic;
}

.heading .query {
  color: rgba(0, 0, 0, 0.5);
  font-size: 14px;
  margin-top: 10px;
}

.heading .query span {
  display: block;
  margin-top: 3px;
}

.card-form {
  background: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  display: block;
  color: inherit;
}

.card-form2 {
  background: white;
  padding: 20px 20px 0 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  display: block;
  color: inherit;
}

.card {
  background: white;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid solid rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: block;
  color: inherit;
  position: relative;
}

.card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  color: inherit;
}


.card .count-wrap {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
}

.card .count {
  display: block;
  margin-right: 15px;
  background: #cadfe5;
  color: #1d1a3a;
  font-size: 40px;
  text-align: center;
  border-radius: 100%;
  overflow: hidden;
}

.card .image {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
  padding: 10px;
  overflow: hidden;
}

.card .image img {
  width: 100%;
  height: auto;
}

.card .details {
  display: inline-block;
  vertical-align: middle;
  width: 70%;
}

.card .details .title {
  display: block;
  font-size: 18px;
}

.card .details .data {
  display: block;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.5);
}

.card .details .data-label {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
  font-size: 11px;
  color: #fff;
  padding: 1px 10px;
  border-radius: 12px;
  margin-left: 10px;
  letter-spacing: 0.5px
}

.card .card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  color: rgba(0, 0, 0, 0.5);
}

.card-list {
  background: white;
  padding: 10px 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  display: block;
  color: inherit;
}

.card-list:hover {
  border-color: rgba(0, 0, 0, 0.15);
  ;
}

.card-list .card-heading {
  font-size: 140%;
  margin-bottom: 3px;
  display: inline-block;
  vertical-align: middle;
}

.card-list .card-col {
  display: inline-block;
  vertical-align: top;
  padding: 0 20px 0 15px;
  color: rgba(0, 0, 0, 0.5);
  position: relative;
}

.card-list .card-col:before {
  content: '\2022';
  font-size: 30px;
  position: absolute;
  color: #dee9ee;
  left: 0;
  top: -13px;
}

.card-list .no-bullet {
  padding: 0 0px 0 15px;
}

.card-list .no-bullet:before {
  content: '';
  display: none;
}

.card-list .card-actions {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  color: rgba(0, 0, 0, 0.5);
}

.page {
  background: white;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  cursor: pointer;
  display: block;
  color: inherit;
  position: relative;
}

.page:hover {
  border-color: rgba(0, 0, 0, 0.15);
  ;
}

.page img {
  width: 100%;
  height: auto;
}

.page span {
  display: block;
  margin: 10px;
}

.table-responsive {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  display: block;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  /* The table paints itself white, so a bordered box around it looked right
     until a DataTable put its export buttons, search box and row count inside
     the same box — those have no background of their own, and the page's grey
     showed through the card. The card carries the colour. */
  background: #fff;
}

/* DataTables' own furniture sits inside that card; without this it is pressed
   against the border on every side. */
.table-responsive .dataTables_wrapper .dt-buttons,
.table-responsive .dataTables_wrapper .dataTables_filter,
.table-responsive .dataTables_wrapper .dataTables_info,
.table-responsive .dataTables_wrapper .dataTables_paginate {
  padding: 10px 12px;
}

.table-responsive .dataTables_wrapper .dataTables_info {
  color: rgba(0, 0, 0, 0.5);
  font-size: 13px;
}

.table {
  width: 100%;
  border-collapse: collapse;
  border: 0 !important;
  background: white;
  margin: 0;
}

.table th,
.table td {
  border: 1px solid #E0E0E0;
  padding: 0px 10px;
  text-align: left;
  vertical-align: middle;
}

.table th:first-child,
.table td:first-child {
  border-left: 0 !important;
}

.table thead tr:first-child th {
  border-top: 0 !important;
}

.table th:last-child,
.table td:last-child {
  border-right: 0 !important;
}

.btn-action {
  /*color: inherit;*/
  display: inline-block;
  cursor: pointer;
  margin-right: 10px !important;
  text-decoration: none !important;
}

.btn-action:hover {
  color: inherit;
  text-decoration: none !important;
}

.btn-action:last-of-type {
  margin-right: 0px;
}

.slots {
  font-size: 30px;
  margin-bottom: 20px;
  padding: 0 15px;
}

.slots>div {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-width: 1px 0px 1px 1px;
}

.slots>div:last-of-type {
  border-width: 1px 1px 1px 1px;
}

.slots .slot {
  padding: 10px;
  min-height: 76px;
}

.slots span {
  font-size: 10px;
  text-transform: uppercase;
  display: block;
}

.slots .purchase-slot {
  background: rgba(47, 190, 109, 1);
  color: #ffffff;
  border: 0;
  padding: 5px 10px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
}

/*--GENERAL--*/
html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

*,
ul {
  margin: 0;
  padding: 0;
}

ol li {
  list-style: decimal;
}

body {
  height: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  width: 100%;
  font-size: 15px !important;
  color: #000;
  background: #f0f4f6;
  -webkit-font-smoothing: subpixel-antialiased !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  position: relative;
}

::-webkit-scrollbar {
  width: 10px;
  height: 8px;
  background: #eee;
}

::-webkit-scrollbar-button {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #eee;
  border: none;
  box-shadow: 0px 0px 3px #dfdfdf inset;
}

::-webkit-scrollbar-thumb {
  background: #BDBDBD;
  border: none;
  border-radius: 15px;
}

::-webkit-scrollbar-thumb:hover {
  background: #CCCCCC;
}

.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

.clearfix {
  display: block;
}

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

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


.cursor-pointer {
  cursor: pointer;
}

.modal {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  overflow-y: auto;
  z-index: 101;
}

.modal-dialog {
  background: #fff;
  border-radius: 12px;
  width: 70%;
  margin: 100px auto 100px auto;
  z-index: 200;
  pointer-events: auto !important;
}

.modal-small {
  width: 300px;
}

.modal-dialog.dialog-small {
  width: 40%;
}

.modal-dialog.dialog-lg {
  width: 70%;
}

.modal-dialog.dialog-xl {
  width: 90%;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 90vw !important;
  }
}

.modal-header {
  font-size: 20px;
  padding: 15px;
  position: relative;
  z-index: 201;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.modal-content {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.modal-close,
.legacy-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: url('../images/close.svg');
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  padding: 5px;
  cursor: pointer;
  z-index: 202;
}

.modal-content {
  border: 0 !important;
  padding: 15px 15px 15px 15px !important;
  position: relative;
}

.modal-footer {
  padding: 10px 0px 0px 0px !important;
  position: relative;
}

.form label {
  display: block;
  margin-bottom: 3px;
}

.form .checkbox {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  margin-bottom: 15px;
}

.form .checkbox input[type=radio] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.form .checkbox label {
  display: inline-block;
  vertical-align: middle;
}

.form input[type="text"],
.form input[type="time"],
.form input[type="datetime-local"],
.form input[type="email"],
.form input[type="date"],
.form input[type="month"],
.form input[type="number"],
.form input[type="password"],
.form textarea,
.form select {
  -webkit-appearance: none;
  background: #ffffff;
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8px 10px;
  margin-bottom: 5px;
  border-radius: 12px;
}

.form input[type="text"],
.form input[type="datetime-local"],
.form input[type="email"],
.form input[type="date"],
.form input[type="month"],
.form input[type="number"],
.form input[type="password"],
.form select {
  /* max-height: 25px; */
}

.form input[type="file"] {
  width: 100%;
  margin-bottom: 10px;
}

.image-upload {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.image-upload:last-of-type {
  border-bottom: 0;
}

.image-preview {
  margin-bottom: 15px;
}

.image-preview img {
  width: 100%;
  height: auto;
  margin: 15px 0;
}

.login {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
}

.login-logo {
  width: 90%;
  margin: 0 auto 20px auto;
}

.login h3 {
  font-size: 30px;
  padding-bottom: 10px;
}

.table-dynamic {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: white;
}

.table-dynamic th,
.table th {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 3px 10px;
  text-align: left;
  font-size: 12px;
}

.table-dynamic td {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0;
  text-align: left;
}

.table-dynamic td select,
.table-dynamic td input[type="text"],
.table-dynamic td input[type="number"] {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0;
}

.table-dynamic .selectize-control {
  margin: 0 !important;
  line-height: .8 !important;
}

.table-dynamic .selectize-input {
  border: 0 !important;
}

.table td.td-input {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  text-align: left;
}

.dataTable .td-input {
  padding: 0 !important;
  text-align: left;
}

.table td.td-input select,
.table td.td-input input[type="text"],
.table td.td-input input[type="number"] {
  margin: 0 !important;
  border: 0;
  width: 100%;
  padding: 1px 10px;
}

.dataTable .td-input select,
.dataTable .td-input input[type="text"],
.dataTable .td-input input[type="number"] {
  margin: 0 !important;
  border: 0 !important;
  width: calc(100% - 20px);
  padding: 1px 10px;
}

.table .td-tags {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 10px 10px 10px !important;
  text-align: left;
}

.table .td-selectize {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  text-align: left;
}

.table td.td-selectize select,
.table td.td-selectize input[type="text"],
.table td.td-selectize input[type="number"] {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 !important;
  text-align: left;
}

.table td.td-selectize .selectize-control {
  margin: 0 !important;
  text-align: left;
}

.table td.td-selectize .selectize-input {
  border: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.table-fixed {
  table-layout: fixed !important;
}

.table-fixed td,
.table-fixed th {
  /*background-color: #CCC !important;*/
}

.table-fixed input,
.table-fixed select {
  /*background-color: #CCC !important;*/
}

.table-fixed .sticky-cell input,
.table-fixed .sticky-cell select,
.table-fixed .sticky-cell-opposite input,
.table-fixed .sticky-cell-opposite select {
  /*background-color: #ffffff !important;*/
}

.table-fixed td.sticky-cell,
.table-fixed th.sticky-cell,
.table-fixed td.sticky-cell-opposite,
.table-fixed th.sticky-cell-opposite {
  /*background-color: #ffffff !important;*/
}

tr.delete,
tr.delete input,
tr.delete select,
tr.delete td.sticky-cell,
tr.delete td.sticky-cell-opposite,
tr.delete .selectize-input {
  background: red !important;
  background-color: red !important;
  color: white;
}


/*.table-dynamic.less-padding th {*/
/*  padding: 4px;*/
/*  font-size: 11px;*/
/*  text-transform: uppercase;*/
/*}*/

/*.table-dynamic.less-padding select, .table-dynamic.less-padding input[type="text"], .table-dynamic.less-padding input[type="number"] {*/
/*  padding: 4px !important;*/
/*}*/

/*.table-dynamic.less-padding .selectize-input {*/
/*  padding: 0px !important;*/
/*}*/

.circle {
  width: 10px;
  height: 10px;
  background: #FFF;
  display: inline-block;
  border-radius: 100%;
  margin-left: 10px;
}

.green {
  background: #31F531;
}

.red {
  background: #FF0000;
}

.shortcuts {
  margin: 20px 0;
  display: none;
}

.shortcuts.active {
  display: block;
}

.shortcuts .item {
  margin-right: 30px;
  display: inline-block;
  vertical-align: middle;
}

.shortcuts .value {
  display: inline-block;
  vertical-align: middle;
}

.key {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid gray;
  font-size: 12px;
  box-shadow: 1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 0 10px 0 0;
  padding: 1px 5px;
}

.autosuggest .results {
  display: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 47px;
  left: 15px;
  right: 15px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  z-index: 1000;
}

.autosuggest .results li {
  display: block;
  background: #fff;
  list-style: none;
  padding: 10px;
  line-height: normal;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.autosuggest .results li:focus {
  outline: 0;
  background-color: #5897fb;
  color: white;
}

.autosuggest .results li:last-of-type {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.autosuggest .results li span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  font-size: 12px;
}

.autosuggest .results li div {
  font-weight: bold;
}

.autosuggest .results li span:first-of-type {
  margin-left: 0px;
}

.card-gst h3 {
  font-weight: normal;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.card-gst label {
  font-weight: normal;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

@media all and (max-width: 700px) {
  .m-hide {
    display: none;
  }

  .m-show {
    display: block;
  }
}

/*--dropzone--*/
@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30%,
  70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px);
  }
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }

  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.dropzone,
.dropzone * {
  box-sizing: border-box;
}

.dropzone {
  min-height: 150px;
  border: 2px dashed rgba(0, 0, 0, 0.1);
  background: white;
  padding: 20px 20px;
}

.dropzone.dz-clickable {
  cursor: pointer;
}

.dropzone.dz-clickable * {
  cursor: default;
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
  cursor: pointer;
}

.dropzone.dz-started .dz-message {
  display: none;
}

.dropzone.dz-drag-hover {
  border-style: solid;
}

.dropzone.dz-drag-hover .dz-message {
  opacity: 0.5;
}

.dropzone .dz-message {
  text-align: center;
  margin: 3em 0;
  color: rgba(0, 0, 0, 0.3);
}

.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  vertical-align: top;
  margin: 16px;
  min-height: 100px;
}

.dropzone .dz-preview:hover {
  z-index: 1000;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 20px;
  background: #999;
  background: linear-gradient(to bottom, #eee, #ddd);
}

.dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}

.dropzone .dz-preview.dz-image-preview {
  background: white;
}

.dropzone .dz-preview.dz-image-preview .dz-details {
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}

.dropzone .dz-preview .dz-remove {
  font-size: 14px;
  text-align: center;
  display: block;
  cursor: pointer;
  border: none;
}

.dropzone .dz-preview .dz-remove:hover {
  text-decoration: underline;
}

.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}

.dropzone .dz-preview .dz-details {
  z-index: 20;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  font-size: 13px;
  min-width: 100%;
  max-width: 100%;
  padding: 2em 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
  line-height: 150%;
}

.dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: 1em;
  font-size: 16px;
}

.dropzone .dz-preview .dz-details .dz-filename {
  white-space: nowrap;
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
  border: 1px solid rgba(200, 200, 200, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
  border: 1px solid transparent;
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
  background-color: rgba(255, 255, 255, 0.4);
  padding: 0 0.4em;
  border-radius: 12px;
}

.dropzone .dz-preview:hover .dz-image img {
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
  transform: scale(1.05, 1.05);
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

.dropzone .dz-preview .dz-image {
  border-radius: 20px;
  overflow: hidden;
  width: 120px;
  height: 120px;
  position: relative;
  display: block;
  z-index: 10;
}

.dropzone .dz-preview .dz-image img {
  display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
  -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview.dz-error .dz-error-mark {
  opacity: 1;
  -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
  pointer-events: none;
  opacity: 0;
  z-index: 500;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
}

.dropzone .dz-preview .dz-success-mark svg,
.dropzone .dz-preview .dz-error-mark svg {
  display: block;
  width: 54px;
  height: 54px;
}

.dropzone .dz-preview.dz-processing .dz-progress {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.dropzone .dz-preview.dz-complete .dz-progress {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in;
  -moz-transition: opacity 0.4s ease-in;
  -ms-transition: opacity 0.4s ease-in;
  -o-transition: opacity 0.4s ease-in;
  transition: opacity 0.4s ease-in;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
  -webkit-animation: pulse 6s ease infinite;
  -moz-animation: pulse 6s ease infinite;
  -ms-animation: pulse 6s ease infinite;
  -o-animation: pulse 6s ease infinite;
  animation: pulse 6s ease infinite;
}

.dropzone .dz-preview .dz-progress {
  opacity: 1;
  z-index: 1000;
  pointer-events: none;
  position: absolute;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-top: -8px;
  width: 80px;
  margin-left: -40px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-transform: scale(1);
  border-radius: 8px;
  overflow: hidden;
}

.dropzone .dz-preview .dz-progress .dz-upload {
  background: #333;
  background: linear-gradient(to bottom, #666, #444);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  -webkit-transition: width 300ms ease-in-out;
  -moz-transition: width 300ms ease-in-out;
  -ms-transition: width 300ms ease-in-out;
  -o-transition: width 300ms ease-in-out;
  transition: width 300ms ease-in-out;
}

.dropzone .dz-preview.dz-error .dz-error-message {
  display: block;
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}

.dropzone .dz-preview .dz-error-message {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
  display: block;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  border-radius: 8px;
  font-size: 13px;
  top: 130px;
  left: -10px;
  width: 140px;
  background: #be2626;
  background: linear-gradient(to bottom, #be2626, #a92222);
  padding: 0.5em 1.2em;
  color: white;
}

.dropzone .dz-preview .dz-error-message:after {
  content: '';
  position: absolute;
  top: -6px;
  left: 64px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #be2626;
}

.gallery {
  margin-bottom: 40px;
}

.gallery img {
  width: 100%;
  height: auto;
  margin-bottom: 5px;
}

/* print.css */
.printModal {
  background-color: hsla(0, 0%, 100%, .91);
  color: #be2626;
  display: flex;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: 300;
  height: 100%;
  left: 0;
  position: absolute;
  text-align: center;
  top: 0;
  width: 100%
}

.printClose {
  position: absolute;
  right: 10px;
  top: 10px
}

.printClose:before {
  content: "\D7";
  cursor: pointer;
  display: block;
  font-family: Helvetica Neue, sans-serif;
  font-size: 2em;
  font-weight: 100;
  height: 1.25em;
  line-height: 1px;
  overflow: hidden;
  padding-top: .5em;
  text-align: center;
  text-indent: 1px;
  width: 1.25em
}

/* line 4, ../sass/_offline-theme-base.sass */
.offline-ui,
.offline-ui *,
.offline-ui:before,
.offline-ui:after,
.offline-ui *:before,
.offline-ui *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 7, ../sass/_offline-theme-base.sass */
.offline-ui {
  display: none;
  position: fixed;
  z-index: 9999999999999999999999999999999999999999999999999;
  background: white;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
}

/* line 17, ../sass/_offline-theme-base.sass */
.offline-ui .offline-ui-content:before {
  display: inline;
}

/* line 20, ../sass/_offline-theme-base.sass */
.offline-ui .offline-ui-retry {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: none;
}

/* line 24, ../sass/_offline-theme-base.sass */
.offline-ui .offline-ui-retry:before {
  display: inline;
}

/* line 29, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-up.offline-ui-up-5s {
  display: block;
}

/* line 32, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-down {
  display: block;
}

/* line 37, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-retry {
  display: block;
}

/* line 42, ../sass/_offline-theme-base.sass */
.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
  display: none;
}

@-webkit-keyframes offline-fadein {

  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-moz-keyframes offline-fadein {

  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-ms-keyframes offline-fadein {

  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-o-keyframes offline-fadein {

  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@keyframes offline-fadein {

  /* line 6, ../sass/_keyframes.sass */
  0% {
    opacity: 0;
  }

  /* line 8, ../sass/_keyframes.sass */
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes offline-fadeout-and-hide {

  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-moz-keyframes offline-fadeout-and-hide {

  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-ms-keyframes offline-fadeout-and-hide {

  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-o-keyframes offline-fadeout-and-hide {

  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes offline-fadeout-and-hide {

  /* line 20, ../sass/_keyframes.sass */
  0% {
    opacity: 1;
    display: block;
  }

  /* line 23, ../sass/_keyframes.sass */
  99% {
    opacity: 0;
    display: block;
  }

  /* line 26, ../sass/_keyframes.sass */
  100% {
    opacity: 0;
    display: none;
  }
}

@-webkit-keyframes offline-rotation {

  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@-moz-keyframes offline-rotation {

  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@-ms-keyframes offline-rotation {

  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@-o-keyframes offline-rotation {

  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

@keyframes offline-rotation {

  /* line 64, ../sass/_keyframes.sass */
  0% {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  /* line 66, ../sass/_keyframes.sass */
  100% {
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    -o-transform: rotate(359deg);
  }
}

/* line 21, ../sass/offline-theme-default.sass */
.offline-ui {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  font-family: "Helvetica Neue", sans-serif;
  padding: 1em;
  top: 1em;
  width: 38em;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 38em) {

  /* line 21, ../sass/offline-theme-default.sass */
  .offline-ui {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    top: 0;
  }
}

/* line 34, ../sass/offline-theme-default.sass */
.offline-ui .offline-ui-content:before {
  line-height: 1.25em;
}

/* line 37, ../sass/offline-theme-default.sass */
.offline-ui .offline-ui-retry {
  position: absolute;
  z-index: 99999999999999999999999999999999999999999999999999;
  right: 3em;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
  line-height: 3.5em;
  height: 3.5em;
  margin: auto;
  padding: 0 1em;
}

/* line 50, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-up {
  -webkit-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -moz-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -ms-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -o-animation: offline-fadeout-and-hide forwards 0.5s 2s;
  animation: offline-fadeout-and-hide forwards 0.5s 2s;
  -webkit-backface-visibility: hidden;
  background: #d6e9c6;
  color: #468847;
}

/* line 55, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down {
  -webkit-animation: offline-fadein 0.5s;
  -moz-animation: offline-fadein 0.5s;
  -ms-animation: offline-fadein 0.5s;
  -o-animation: offline-fadein 0.5s;
  animation: offline-fadein 0.5s;
  -webkit-backface-visibility: hidden;
  background: #ec8787;
  color: #551313;
}

/* line 60, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-connecting,
.offline-ui.offline-ui-down.offline-ui-waiting {
  background: #f8ecad;
  color: #7c6d1f;
  padding-right: 3em;
}

/* line 65, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-connecting:after,
.offline-ui.offline-ui-down.offline-ui-waiting:after {
  -webkit-animation: offline-rotation 0.7s linear infinite;
  -moz-animation: offline-rotation 0.7s linear infinite;
  -ms-animation: offline-rotation 0.7s linear infinite;
  -o-animation: offline-rotation 0.7s linear infinite;
  animation: offline-rotation 0.7s linear infinite;
  -webkit-backface-visibility: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  content: " ";
  display: block;
  position: absolute;
  z-index: 9999999999999999999999999999999999999999999999999;
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 1em;
  width: 1em;
  border: 2px solid rgba(0, 0, 0, 0);
  border-top-color: #7c6d1f;
  border-left-color: #7c6d1f;
  opacity: 0.7;
}

/* line 82, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-waiting {
  padding-right: 11em;
}

/* line 85, ../sass/offline-theme-default.sass */
.offline-ui.offline-ui-down.offline-ui-waiting.offline-ui-reconnect-failed-2s {
  padding-right: 0;
}

/* line 6, ../sass/_content.sass */
.offline-ui .offline-ui-retry:before {
  content: "Reconnect";
}

/* line 11, ../sass/_content.sass */
.offline-ui.offline-ui-up .offline-ui-content:before {
  content: "Your computer is connected to the internet.";
}

@media (max-width: 1024px) {

  /* line 11, ../sass/_content.sass */
  .offline-ui.offline-ui-up .offline-ui-content:before {
    content: "Your device is connected to the internet.";
  }
}

@media (max-width: 568px) {

  /* line 11, ../sass/_content.sass */
  .offline-ui.offline-ui-up .offline-ui-content:before {
    content: "Your device is connected.";
  }
}

/* line 22, ../sass/_content.sass */
.offline-ui.offline-ui-down .offline-ui-content:before {
  content: "Your computer lost its internet connection.";
}

@media (max-width: 1024px) {

  /* line 22, ../sass/_content.sass */
  .offline-ui.offline-ui-down .offline-ui-content:before {
    content: "Your device lost its internet connection.";
  }
}

@media (max-width: 568px) {

  /* line 22, ../sass/_content.sass */
  .offline-ui.offline-ui-down .offline-ui-content:before {
    content: "Your device isn't connected.";
  }
}

/* line 33, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-connecting .offline-ui-content:before,
.offline-ui.offline-ui-down.offline-ui-connecting-2s .offline-ui-content:before {
  content: "Attempting to reconnect...";
}

/* line 42, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " seconds...";
}

@media (max-width: 568px) {

  /* line 42, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "s...";
  }
}

/* line 50, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " second...";
}

@media (max-width: 568px) {

  /* line 50, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="second"][data-retry-in-value="1"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "s...";
  }
}

/* line 58, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " minutes...";
}

@media (max-width: 568px) {

  /* line 58, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "m...";
  }
}

/* line 66, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " minute...";
}

@media (max-width: 568px) {

  /* line 66, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="minute"][data-retry-in-value="1"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "m...";
  }
}

/* line 74, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " hours...";
}

@media (max-width: 568px) {

  /* line 74, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "h...";
  }
}

/* line 82, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before {
  content: "Connection lost. Reconnecting in " attr(data-retry-in-value) " hour...";
}

@media (max-width: 568px) {

  /* line 82, ../sass/_content.sass */
  .offline-ui.offline-ui-down.offline-ui-waiting .offline-ui-content[data-retry-in-unit="hour"][data-retry-in-value="1"]:before {
    content: "Reconnecting in " attr(data-retry-in-value) "h...";
  }
}

/* line 90, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s.offline-ui-waiting .offline-ui-retry {
  display: none;
}

/* line 93, ../sass/_content.sass */
.offline-ui.offline-ui-down.offline-ui-reconnect-failed-2s .offline-ui-content:before {
  content: "Connection attempt failed.";
}

.sticky-table {
  max-width: 100%;
  /*max-height: 80vh;*/
  height: auto;
  overflow-y: visible;
  overflow-x: auto;
  /*border-top: 1px solid #ddd;*/
  /*border-bottom: 1px solid #ddd;*/
  padding: 0 !important;
  transition: width 2s;
  outline: 1px solid black;
}

.sticky-table,
.sticky-table * {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  -o-transition: all 0s;
  transition: all 0s;
}

.sticky-table table {
  margin-bottom: 0;
  width: 100%;
  max-width: 100%;
  border-spacing: 0;
  padding: 0 !important;
  border-collapse: collapse;
  border: 0 !important;
}

.sticky-table table tr.sticky-header th,
.sticky-table table tr.sticky-header td,
.sticky-table table tr.sticky-footer th,
.sticky-table table tr.sticky-footer td {
  background-color: #fff;
  border-top: 0;
  position: relative;
  position: -webkit-sticky;
  position: -ms-sticky;
  position: sticky;
  /*outline: 1px solid #ddd;*/
  z-index: 5;
}

.sticky-table table tr.sticky-header th,
.sticky-table table tr.sticky-header td {
  top: 0;
}

.sticky-table table tr.sticky-footer th,
.sticky-table table tr.sticky-footer td {
  bottom: 0;
}

.sticky-table table td.sticky-cell,
.sticky-table table th.sticky-cell,
.sticky-table table td.sticky-cell-opposite,
.sticky-table table th.sticky-cell-opposite {
  background-color: #fff;
  /*outline: 1px solid #ddd;*/
  outline: 1px solid black;
  border: 0 !important;
  position: relative;
  position: -webkit-sticky;
  position: -ms-sticky;
  position: sticky;
  z-index: 10;
}

.sticky-table.sticky-ltr-cells table td.sticky-cell,
.sticky-table.sticky-ltr-cells table th.sticky-cell,
.sticky-table.sticky-rtl-cells table td.sticky-cell-opposite,
.sticky-table.sticky-rtl-cells table th.sticky-cell-opposite {
  left: 0
}

.sticky-table.sticky-rtl-cells table td.sticky-cell,
.sticky-table.sticky-rtl-cells table th.sticky-cell,
.sticky-table.sticky-ltr-cells table td.sticky-cell-opposite,
.sticky-table.sticky-ltr-cells table th.sticky-cell-opposite {
  right: 0
}

.sticky-table table tr.sticky-header td.sticky-cell,
.sticky-table table tr.sticky-header th.sticky-cell,
.sticky-table table tr.sticky-header td.sticky-cell-opposite,
.sticky-table table tr.sticky-header th.sticky-cell-opposite,
.sticky-table table tr.sticky-footer td.sticky-cell,
.sticky-table table tr.sticky-footer th.sticky-cell,
.sticky-table table tr.sticky-footer td.sticky-cell-opposite,
.sticky-table table tr.sticky-footer th.sticky-cell-opposite {
  z-index: 15;
}

.lSizeQty {
  display: inline-block !important;
  width: 60px !important;
  font-size: 10px !important;
  margin: 0 0 0 10px !important;
  border-radius: 4px !important;
  padding: 5px 2px !important;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.selectize-variant-item {
  border: 1px solid #f74444 !important;
  background-color: #fff !important;
  color: #000 !important;
  border-radius: 4px;
  font-size: 12px;
}

.selectize-variant-item * {
  padding: 1px !important;
}

.table-sales .whitetag,
.table-sales .whitetag input,
.table-sales .whitetag select,
.table-price .whitetag,
.table-price .whitetag input,
.table-price .whitetag select {
  background: #fff3d5 !important;
}

.table-sales .whitetag:hover,
.table-sales .whitetag:hover td,
.table-sales .whitetag:hover input,
.table-sales .whitetag:hover select {
  background: #fff3d5 !important;
  background-color: #fff3d5 !important;
}

.table-sales .whitetag:hover .td-highlight,
.table-sales .whitetag:hover td.td-highlight,
.table-sales .whitetag:hover .td-highlight input,
.table-sales .whitetag:hover .td-highlight select {
  background: rgba(231, 76, 60, 1.0) !important;
  color: #fff !important;
}

.table-sales .td-highlight input {
  background: rgba(231, 76, 60, 1.0) !important;
  color: #fff !important;
}



/*
JQuery Simple MobileMenu
https://github.com/Position2/jQuery-Simple-MobileMenu
*/
/*Main style*/
body.mmactive {
  overflow: hidden;
}

.mobile_menu {
  display: none;
  position: relative;
}

.sm_menu_outer.active .mobile_menu {
  display: block;
}

.sm_menu_outer {
  /* height: calc(100vh - 60px); */
  height: 100vh;
  padding-top: 60px;
  overflow-y: scroll;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  width: 100%;
  opacity: 0;
  background-color: #fff;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  display: none;
}

.sm_menu_outer.active {
  opacity: 1;
  z-index: 999;
  display: block;
}

.sm_menu_outer .mobile_menu li.back a {
  padding: 20px 5px 20px 55px;
  background: url("../images/back.png") no-repeat scroll 15px center / 5% auto;
}

.sm_menu_outer .mobile_menu a {
  color: #000;
  display: block;
  font: 300 18px/140% "Lato", sans-serif;
  letter-spacing: 1px;
  padding: 20px 15px;
  text-transform: uppercase;
  text-decoration: none;
}

/*Sub Menu anim */
.sm_menu_outer.slide .mobile_menu .submenu {
  background-color: #fff;
  height: 100%;
  position: absolute;
  right: -100%;
  top: 0;
  transition: all 0.5s ease 0s;
  width: 100%;
  z-index: 999;
}

.sm_menu_outer.slide .mobile_menu li.active>.submenu {
  right: 0;
}

.sm_menu_outer .mobile_menu li {
  list-style-type: none;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
  color: #000;
}

.sm_menu_outer.slide .mobile_menu li.hasChild>a {
  background: url("../images/next.png") no-repeat scroll 95% center / 5% auto;
}

/*Hamburger Animation */

.hamburger_wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 59px;
  max-width: 100vw;
  background: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 9999;
  justify-content: end;
  display: none;
  text-align: right;
}

@media all and (max-width: 700px) {
  .hamburger_wrap {
    display: flex !important;
  }

  main {
    padding-top: 60px;
  }
}

#sm_menu_ham {
  display: inline-block;
  cursor: pointer;
  height: 25px;
  right: 5px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
  width: 30px;
  margin-top: 15px;
  margin-right: 15px;
  z-index: 9999;
}

#sm_menu_ham span {
  background-color: #000000;
  border-radius: 5px;
  display: block;
  height: 2px;
  left: 0;
  opacity: 1;
  position: absolute;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: all 0.25s ease-in-out 0s;
  -moz-transition: all 0.25s ease-in-out 0s;
  -o-transition: all 0.25s ease-in-out 0s;
  transition: all 0.25s ease-in-out 0s;
  width: 30px;
}

#sm_menu_ham span:nth-child(1) {
  top: 0;
}

#sm_menu_ham span:nth-child(2),
#sm_menu_ham span:nth-child(3) {
  top: 10px;
}

#sm_menu_ham span:nth-child(4) {
  top: 20px;
}

#sm_menu_ham.open span:nth-child(1) {
  left: 50%;
  top: 18px;
  width: 0;
}

#sm_menu_ham.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

#sm_menu_ham.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#sm_menu_ham.open span:nth-child(4) {
  left: 50%;
  top: 18px;
  width: 0;
}

.sm_menu_outer.accordion .mobile_menu .submenu,
.sm_menu_outer.accordion .mobile_menu li.hasChild ul.submenu {
  display: none;
}

.sm_menu_outer.accordion .mobile_menu .hasChild>.submenu li {
  padding-left: 20px;
}

.sm_menu_outer.accordion .mobile_menu li.active>.submenu {
  right: auto;
}

.sm_menu_outer.accordion .mobile_menu li.hasChild>a {
  position: relative;
}

.sm_menu_outer.accordion .mobile_menu li.hasChild>a::before {
  position: absolute;
  content: '';
  background: url("../images/next.png") no-repeat scroll 50% center / 60% auto;
  right: 0;
  top: 20px;
  width: 40px;
  height: 25px;
  transition: all 0.19s ease;
}

.sm_menu_outer.accordion .mobile_menu li.hasChild.active>a::before {
  transform: rotate(89deg);
  transition: all 0.19s ease;
}

@media (min-width: 1024px) {

  #sm_menu_ham,
  .sm_menu_outer {
    display: none;
  }
}

.sm_menu_outer.accordion li {
  display: block;
}

.wa {
  display: flex;
}

.wa-sidebar {
  width: 300px;
  overflow-y: auto;
  background: #fff;
  border-right: 1px solid #DDD;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 32px;
  bottom: 0;
  z-index: 100;
}

.wa-sidebar .wa-search {
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid #DDD;
}

.wa-conversation {
  height: 100vh;
  overflow-y: auto;
  position: fixed;
  left: 300px;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99;
}

.wa-data {
  padding: 110px 20px 102px 20px;
}

.wa-message {
  margin-bottom: 10px;
}

.wa-meta {
  font-size: 10px;
  text-transform: uppercase;
  opacity: 0.7;
}

.wa-bubble {
  background: #fff;
  border-radius: 4px;
  max-width: 70vw;
  padding: 5px 10px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
  margin-bottom: 3px;
  ;
}

.wa-header {
  height: 88px;
  line-height: 58px;
  padding: 32px 20px 0 20px;
  position: fixed;
  top: 0;
  left: 300px;
  right: 0;
  z-index: 100;
}

.wa-footer {
  padding: 0 20px;
  position: fixed;
  bottom: 0;
  left: 300px;
  right: 0;
  z-index: 100;
  padding: 10px;
  background: #fff;
}

.highlight-row {
  background-color: #fff3cd;
  /* light yellow background */
}

.table-purchase th,
.table-purchase td {
  /* white-space: nowrap; */
  /* text-align: center; */
  vertical-align: middle;
}

.table-purchase {
  width: 100%;
  table-layout: fixed;
}


.infolist label {
  font-weight: 500;
  margin-bottom: 0;
  font-size: 12px;
}

.infolist>div {
  margin-bottom: 5px;
}

.dropdown-menu {
  border-radius: 12px;
}

.range-slider {
  position: relative;
  height: 2rem;
}

.range-slider input[type=range] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  pointer-events: none;
  /* allow overlap */
  -webkit-appearance: none;
  background: none;
}

.range-slider input[type=range]::-webkit-slider-thumb {
  pointer-events: auto;
  /* allow dragging */
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fa002f;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.range-slider input[type=range]::-moz-range-thumb {
  pointer-events: auto;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #fa002f;
  border: 2px solid #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

.range-slider .track {
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  width: 100%;
  background: #dee2e6;
  transform: translateY(-50%);
  border-radius: 2px;
}

.range-slider .track::before {
  content: "";
  position: absolute;
  height: 100%;
  background: #fa002f;
  left: var(--left, 0%);
  right: calc(100% - var(--right, 100%));
  border-radius: 2px;
}

.apply-whitetag {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-width: 100%;
  background: #f8f9fa;
  padding: 15px 40px 15px 40px;
  border-top: 1px solid #dee2e6;
  z-index: 1000;
}

.wa-empty-state {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  padding: 40px 20px;
  min-height: calc(100vh - 120px);
}

.wa-conversation-active {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.variant-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  gap: 10px 20px;
  background-color: #f8fafc;
}

.variant-line {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: 0.2s ease-in-out;
}

.variant-line.default {
  grid-column: 1 / -1;
}

.variant-line.deleted {
  background: #ef8585;
}

.variant-line:hover {
  background-color: #f1f5f9;
}

.variant-line .selectize-control.multi .selectize-input {
  height: calc(1.5em + 2px + 1.15rem);
  overflow-y: auto;
  overflow-x: hidden;
}

.btn-edit-variant,
.btn-save-variant {
  margin-right: 8px !important;
}

.btn-trash {
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 4px 6px;
  transition: 0.2s;
}

.btn-trash:hover {
  background: #b02a37;
}

.variant-line.deleted {
  background-color: #ffeaea;
  color: #b30000 !important;
}

.design-manager .nav-link.active {
  border-bottom: 2px solid #fa002f;
}

.selectize-dropdown .option[data-value="Create Design"] {
  color: #fa002f;
  font-weight: bold;
  border-top: 1px solid #eee;
}

.selectize-dropdown .option[data-value="Create Design"]:hover,
.selectize-dropdown .option[data-value="Create Design"].active {
  background-color: #fce6e8;
  color: #fa002f;
}

.selectize-dropdown [data-value="Create Design"]-design-manual {
  color: #fa002f;
  font-weight: bold;
}

.rounded {
  border-radius: 12px !important;
}

/* Expenses Styles */
.file-upload-wrapper {
  border: 2px dashed #e2e8f0;
  background-color: #f8fafc;
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease;
  position: relative;
  margin-top: 5px;
}

.file-upload-wrapper:hover {
  border-color: #3b82f6;
}

.file-upload-text-main {
  color: #3b82f6;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 5px;
}

.file-upload-text-sub {
  color: #64748b;
  font-size: 12px;
}

.files-selected-text {
  margin-top: 10px;
  font-size: 13px;
  color: #10b981;
  display: none;
  font-weight: 600;
}

.is-invalid {
  border-color: #dc3545 !important;
}

/* ── Tab bar container ── */
.pos-tabs {
  display: flex;
  align-items: flex-end;
  padding: 0 4px;
  height: 41px;
  position: relative;
  background: #2d2d2d;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.pos-tabs::after {
  content: "";
  position: fixed;
  top: 41px;
  left: 0;
  right: 0;
  height: 10px;
  background: #f0f4f6;
  z-index: 999;
}

.pos-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  min-width: 120px;
  max-width: 240px;
  font-size: 14px;
  font-weight: bold;
  color: #5f6368;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  margin-right: -1px;
  transition: background 0.15s, color 0.15s;
  padding: 0 10px;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
}


.pos-tab.active {
  background: #f0f4f6;
  color: #202124;
  z-index: 2;
  height: 35px;
  border-color: #c8cacf;

}

.pos-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.15);
  color: #e8eaed;
}

/* Stock reports — mobile responsive */
.stock-report .dataTables_wrapper,
.stock-report .table-responsive-wrap {
  width: 100%;
}

@media (max-width: 768px) {
  .stock-report {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .stock-report .heading .col-md-12 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .stock-report .heading .pull-left,
  .stock-report .heading .pull-right {
    float: none !important;
    width: 100%;
  }

  .stock-report .heading h2 {
    font-size: 20px;
  }

  .stock-report .btn-dropdown,
  .stock-report .btn-dropdown > .btn {
    width: 100%;
    text-align: center;
  }

  .stock-report .row.form > [class*="col-"],
  .stock-report form.form .row > [class*="col-"] {
    margin-bottom: 10px;
  }

  .stock-report #table-search {
    width: 100%;
    box-sizing: border-box;
  }

  /* Make data tables horizontally scrollable on mobile */
  .stock-report table,
  .stock-report .dataTables_wrapper > .row > [class*="col-"]:has(table),
  .stock-report .dataTables_scroll {
    max-width: 100%;
  }

  .stock-report table#dt,
  .stock-report table.cell-border,
  .stock-report table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    font-size: 12px;
  }

  .stock-report table#dt thead th,
  .stock-report table#dt tbody td,
  .stock-report table#dt tfoot th,
  .stock-report table.cell-border th,
  .stock-report table.cell-border td,
  .stock-report table.table th,
  .stock-report table.table td {
    padding: 6px 8px;
    white-space: nowrap;
  }

  /* DataTables length/filter/info/pagination rows stack cleanly */
  .stock-report .dataTables_wrapper .row {
    flex-direction: column;
  }

  .stock-report .dataTables_length,
  .stock-report .dataTables_filter,
  .stock-report .dataTables_info,
  .stock-report .dataTables_paginate {
    width: 100%;
    text-align: left !important;
    float: none !important;
    margin-bottom: 8px;
  }

  .stock-report .dataTables_filter input {
    width: 100%;
    box-sizing: border-box;
    margin-left: 0 !important;
  }

  .stock-report .dataTables_paginate .paginate_button {
    padding: 4px 8px;
  }

  /* Image grid reports — shrink thumbnails */
  .stock-report .report-images img,
  .stock-report .report-item .report-images img {
    width: 45%;
    max-width: 160px;
    margin-right: 5px;
  }
}

@media (max-width: 480px) {
  .stock-report .heading h2 {
    font-size: 18px;
  }

  .stock-report table#dt,
  .stock-report table.cell-border,
  .stock-report table.table {
    font-size: 11px;
  }
}