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

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

.bg-color-white {
    background: var(--color-white) !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);
}

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

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

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

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

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

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

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