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

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

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

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

.color-blueshade {
    background-color: var(--color-blueShade) !important;
}

.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-slash-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);
    background: var(--color-offWhite);
}

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

.instagram {
    -webkit-mask-image: url(/img/icon_image/instagram-fill.svg);
    mask-image: url(/img/icon_image/instagram-fill.svg);
    background: var(--color-offWhite);
}

.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);
    background: var(--color-offWhite);
}

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

.linkedin {
    -webkit-mask-image: url(/img/icon_image/linkedin.svg);
    mask-image: url(/img/icon_image/linkedin.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);
}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.chevron-down-circle {
    -webkit-mask-image: url(/img/icon_image/chevron-down-circle.svg);
    mask-image: url(/img/icon_image/chevron-down-circle.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);
}

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

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

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

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

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

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

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

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

.clock {
    -webkit-mask-image: url(/img/icon_image/clock.svg);
    mask-image: url(/img/icon_image/clock.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);
}

.download-icon {
    -webkit-mask-image: url(/img/icon_image/download.svg);
    mask-image: url(/img/icon_image/download.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);
}

.send-icon {
    -webkit-mask-image: url(/img/icon_image/send.svg);
    mask-image: url(/img/icon_image/send.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);
}

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


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

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

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

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

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

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

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

.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: 14px;
    width: 12px;
}

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

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

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

.social-icon {
    height: 36px;
    width: 36px;
}
.icon-size-file {
    height: 14px;
    width: 10px;
    top: 2px;
    position: relative;
}

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

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

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

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