:root {
  --color-ash: #6c757d;
  --color-theme: #00897b;
  --color-offWhite: #b5b5b5;
  --color-blueShade: #56b4e4;
  --color-white: #ffffff;
  --color-red: #d32f2f;
  --color-green: #00c853;
  --color-lightGray: #999999;
  --color-lightBlue: #0277BD;
}

.bg-ash {
  background: var(--color-ash);
}

.bg-color-ash {
  background: var(--color-ash) !important;
}


.bg-offWhite {
  background: var(--color-offWhite);
}

.bg-blueShade {
  background: var(--color-blueShade);
}

.bg-lightGray {
  background: var(--color-lightGray);
}
.bg-white {
  background: var(--color-white);
}

.bg-green {
  background: var(--color-green);
}

.bg-red {
  background: var(--color-red);
}

.icon {
  -webkit-mask-size: cover;
  mask-size: cover;
  display: inline-block;
}

.eye-slash-regular {
  -webkit-mask-image: url(/img/icon_image/eye-slash-regular.svg);
  mask-image: url(/img/icon_image/eye-slash-regular.svg);
  background: var(--color-ash);
}

.eye-regular {
  -webkit-mask-image: url(/img/icon_image/eye-regular.svg);
  mask-image: url(/img/icon_image/eye-regular.svg);
  background: var(--color-ash);
}

.youtube-outline {
  -webkit-mask-image: url(/img/icon_image/youtube.svg);
  mask-image: url(/img/icon_image/youtube.svg);
}

.instagram-outline {
  -webkit-mask-image: url(/img/icon_image/instagram.svg);
  mask-image: url(/img/icon_image/instagram.svg);
}

.pencil-icon {
  -webkit-mask-image: url(/img/icon_image/pencil-icon.svg);
  mask-image: url(/img/icon_image/pencil-icon.svg);
  background: var(--color-ash);
}

.facebook-outline {
  -webkit-mask-image: url(/img/icon_image/facebook.svg);
  mask-image: url(/img/icon_image/facebook.svg);
}

.trash-outline {
  -webkit-mask-image: url(/img/icon_image/trash-outline.svg);
  mask-image: url(/img/icon_image/trash-outline.svg);
  background: var(--color-ash);
}

.trash-solid {
  -webkit-mask-image: url(/img/icon_image/trash-solid.svg);
  mask-image: url(/img/icon_image/trash-solid.svg);
}

.clip-icon {
  -webkit-mask-image: url(/img/icon_image/clip.svg);
  mask-image: url(/img/icon_image/clip.svg);
}

.list-group {
  -webkit-mask-image: url(/img/icon_image/list-group.svg);
  mask-image: url(/img/icon_image/list-group.svg);
}

.bar-solid {
  -webkit-mask-image: url(/img/icon_image/bar-solid.svg);
  mask-image: url(/img/icon_image/bar-solid.svg);
}

.circle-plus {
  -webkit-mask-image: url(/img/icon_image/circle-plus.svg);
  mask-image: url(/img/icon_image/circle-plus.svg);
}

.history-icon {
  -webkit-mask-image: url(/img/icon_image/history-icon.svg);
  mask-image: url(/img/icon_image/history-icon.svg);
}

.search-icon {
  -webkit-mask-image: url(/img/icon_image/search-icon.svg);
  mask-image: url(/img/icon_image/search-icon.svg);
}

.external-link {
  -webkit-mask-image: url(/img/icon_image/external-link.svg);
  mask-image: url(/img/icon_image/external-link.svg);
}

.fa-check {
  -webkit-mask-image: url(/img/icon_image/check-icon.svg);
  mask-image: url(/img/icon_image/check-icon.svg);
}

.fa-times {
  -webkit-mask-image: url(/img/icon_image/times-icon.svg);
  mask-image: url(/img/icon_image/times-icon.svg);
}

.export-icon {
  -webkit-mask-image: url(/img/icon_image/export-icon.svg);
  mask-image: url(/img/icon_image/export-icon.svg);
}

.arrow-left {
  -webkit-mask-image: url(/img/icon_image/arrow-left.svg);
  mask-image: url(/img/icon_image/arrow-left.svg);
}

.arrow-down {
  -webkit-mask-image: url(/img/icon_image/arrow-down.svg);
  mask-image: url(/img/icon_image/arrow-down.svg);
}

.arrow-up {
  -webkit-mask-image: url(/img/icon_image/arrow-up.svg);
  mask-image: url(/img/icon_image/arrow-tup.svg);
}

.minus {
  -webkit-mask-image: url(/img/icon_image/arrow-minus.svg);
  mask-image: url(/img/icon_image/arrow-minus.svg);
}

.barcode-scanner {
  -webkit-mask-image: url(/img/icon_image/barcode-scanner.svg);
  mask-image: url(/img/icon_image/barcode-scanner.svg);
}

.user-icon {
  -webkit-mask-image: url(/img/icon_image/user.svg);
  mask-image: url(/img/icon_image/user.svg);
}

.unlock-icon {
  -webkit-mask-image: url(/img/icon_image/unlock.svg);
  mask-image: url(/img/icon_image/unlock.svg);
}

.log-out-icon {
  -webkit-mask-image: url(/img/icon_image/log-out.svg);
  mask-image: url(/img/icon_image/log-out.svg);
}

.info-icon {
  -webkit-mask-image: url(/img/icon_image/info.svg);
  mask-image: url(/img/icon_image/info.svg);
}

.settings-icon {
  -webkit-mask-image: url(/img/icon_image/settings.svg);
  mask-image: url(/img/icon_image/settings.svg);
}

.print-icon {
  -webkit-mask-image: url(/img/icon_image/print.svg);
  mask-image: url(/img/icon_image/print.svg);
}

.download-icon {
  -webkit-mask-image: url(/img/icon_image/download.svg);
  mask-image: url(/img/icon_image/download.svg);
  background: var(--color-ash);
}

.send-icon {
  -webkit-mask-image: url(/img/icon_image/send.svg);
  mask-image: url(/img/icon_image/send.svg);
  background: var(--color-ash);
}

.publish-icon {
  -webkit-mask-image: url(/img/icon_image/publish.svg);
  mask-image: url(/img/icon_image/publish.svg);
  background: var(--color-ash);
}

.issue-icon {
  -webkit-mask-image: url(/img/icon_image/issue.svg);
  mask-image: url(/img/icon_image/issue.svg);
  background: var(--color-ash);
  transform: rotate(180deg);
}

.circle-spin-icon {
  -webkit-mask-image: url(/img/icon_image/circle-spin.svg);
  mask-image: url(/img/icon_image/circle-spin.svg);
}

.circle-arrow-up-icon {
  -webkit-mask-image: url(/img/icon_image/circle-arrow-up.svg);
  mask-image: url(/img/icon_image/circle-arrow-up.svg);
}

.barcode-icon {
  -webkit-mask-image: url(/img/icon_image/barcode.svg);
  mask-image: url(/img/icon_image/barcode.svg);
}

.fa-check {
  -webkit-mask-image: url(/img/icon_image/check-icon.svg);
  mask-image: url(/img/icon_image/check-icon.svg);
  background: var(--color-green);
}

.list-group {
  -webkit-mask-image: url(/img/icon_image/list-group.svg);
  mask-image: url(/img/icon_image/list-group.svg);
  background: var(--color-blueShade);
}

.calendar-icon {
  -webkit-mask-image: url(/img/icon_image/calendar.svg);
  mask-image: url(/img/icon_image/calendar.svg);
}

.chevron-up {
  -webkit-mask-image: url(/img/icon_image/chevron-up.svg);
  mask-image: url(/img/icon_image/chevron-up.svg);
}

.chevron-down {
  -webkit-mask-image: url(/img/icon_image/chevron-down.svg);
  mask-image: url(/img/icon_image/chevron-down.svg);
}

.task-icon {
  -webkit-mask-image: url(/img/icon_image/task-icon.svg);
  mask-image: url(/img/icon_image/task-icon.svg);
}
.document {
  -webkit-mask-image: url(/img/icon_image/document.svg);
  mask-image: url(/img/icon_image/document.svg);
}

.file-image {
  -webkit-mask-image: url(/img/icon_image/file-image.svg);
  mask-image: url(/img/icon_image/file-image.svg);
}
.envelope {
  -webkit-mask-image: url(/img/icon_image/envelope.svg);
  mask-image: url(/img/icon_image/envelope.svg);
}
.phone {
  -webkit-mask-image: url(/img/icon_image/phone.svg);
  mask-image: url(/img/icon_image/phone.svg);
}

.camera-icon {
  -webkit-mask-image: url(/img/icon_image/camera-solid.svg);
  mask-image: url(/img/icon_image/camera-solid.svg);
}

.add-icon {
  -webkit-mask-image: url(/img/icon_image/add.svg);
  mask-image: url(/img/icon_image/add.svg);
}

.receive-icon {
  -webkit-mask-image: url(/img/icon_image/receive.svg);
  mask-image: url(/img/icon_image/receive.svg);
  background: var(--color-ash);
}

.report-icon {
  -webkit-mask-image: url(/img/icon_image/report.svg);
  mask-image: url(/img/icon_image/report.svg);
  background: var(--color-ash);
}

.duplicate-icon {
  -webkit-mask-image: url(/img/icon_image/duplicate.svg);
  mask-image: url(/img/icon_image/duplicate.svg);
  background: var(--color-ash);
}

.edit-icon {
  -webkit-mask-image: url(/img/icon_image/edit.svg);
  mask-image: url(/img/icon_image/edit.svg);
  background: var(--color-ash);
}


.icon-size {
  height: 16px;
  width: 20px;
}

.icon-size-square {
  height: 16px;
  width: 16px;
}

.icon-size-square-1 {
  height: 24px;
  width: 25px;
}

.icon-size-1 {
  height: 16px;
  width: 14px;
}

.icon-size-2 {
  height: 14px;
  width: 14px;
}

.icon-size-3 {
  height: 10px;
  width: 8px;
}

.icon-size-4 {
  height: 16px;
  width: 12px;
}

.icon-size-5 {
  height: 16px;
  width: 8px;
}

.icon-size-6 {
  height: 16px;
  width: 20px;
}

.icon-size-7 {
  height: 14px;
  width: 15px;
}

.icon-size-8 {
  height: 10px;
  width: 12px;
}

.social-icon {
  height: 36px;
  width: 36px;
}

.icon-size-32 {
  height: 32px;
  width: 32px;
}

.icon-size-9 {
  height: 14px;
  width: 12px;
}

.icon-size-10 {
  height: 14px;
  width: 10px;
}

.icon-size-12 {
  height: 12px;
  width: 12px;
}

.icon-size-14 {
  height: 14px;
  width: 14px;
}

.icon-size-16 {
  height: 16px;
  width: 16px;
}

.icon-size-20 {
  height: 20px;
  width: 18px;
  background-color: #999;
}

.icon-size-19 {
  height: 19px;
  width: 19px;
}

.bg-color-off-white {
  background: var(--color-offWhite) !important;
}

.stock-out-icon{
  -webkit-mask-image: url(/img/icon_image/stock-out.svg);
  mask-image: url(/img/icon_image/stock-out.svg);
  background: var(--color-lightBlue);
}

.clock {
  -webkit-mask-image: url(/img/icon_image/clock.svg);
  mask-image: url(/img/icon_image/clock.svg);
  background: var(--color-ash);
}