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

.bg-theme {
    background: #4b722d !important;
}

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

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


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

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

.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);
}

.bg-blue {
    background: #3a5e8b !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.task-icon {
    -webkit-mask-image: url(/images/icon_image/task-icon.svg);
    mask-image: url(/images/icon_image/task-icon.svg);
    background: var(--color-theme);
}
.document {
    -webkit-mask-image: url(/images/icon_image/document.svg);
    mask-image: url(/images/icon_image/document.svg);
}

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

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

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

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

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

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

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

.update-icon {
    -webkit-mask-image: url(/images/icon_image/update.svg);
    mask-image: url(/images/icon_image/update.svg);
    background: var(--color-theme);
}

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

.icon-size-portrait {
    height: 15px;
    width: 13px;
}

.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-22 {
    height: 22px;
    width: 22px;
}

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

.icon-size-18 {
    height: 18px;
    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(/images/icon_image/stock-out.svg);
    mask-image: url(/images/icon_image/stock-out.svg);
    background: var(--color-lightBlue);
}

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