﻿:root {
    --icon-red: #D11C1C;
    --icon-green: #039C23;
    --icon-blue: #1177D7;
    --icon-yellow: #FFB115;
    --icon-black: #727272;
    --icon-white: #ffffff;
}

.icon-red {
    color: var(--icon-red);
}

.icon-green {
    color: var(--icon-green);
}

.icon-blue {
    color: var(--icon-blue);
}

.icon-yellow {
    color: var(--icon-yellow);
}

.icon-black {
    color: var(--icon-black);
}

.icon-white {
    color: var(--icon-white);
}

.icon-primary-red {
    --fa-primary-color: var(--icon-red);
}

.icon-primary-green {
    --fa-primary-color: var(--icon-green);
}

.icon-primary-blue {
    --fa-primary-color: var(--icon-blue);
}

.icon-primary-yellow {
    --fa-primary-color: var(--icon-yellow);
}

.icon-primary-black {
    --fa-primary-color: var(--icon-black);
}

.icon-primary-white {
    --fa-primary-color: var(--icon-white);
}

.icon-secondary-red {
    --fa-secondary-color: var(--icon-red);
}

.icon-secondary-green {
    --fa-secondary-color: var(--icon-green);
}

.icon-secondary-blue {
    --fa-secondary-color: var(--icon-blue);
}

.icon-secondary-yellow {
    --fa-secondary-color: var(--icon-yellow);
}

.icon-secondary-black {
    --fa-secondary-color: var(--icon-black);
}

.icon-secondary-white {
    --fa-secondary-color: var(--icon-white);
}

.homepage-card .fa-file-import {
    color: var(--icon-blue);
}

.homepage-card .fa-forklift {
    color: var(--icon-yellow);
}

.homepage-card .fa-slider {
    color: var(--icon-blue);
}

.homepage-card .fa-magnifying-glass {
    color: var(--icon-blue);
}

.main-menu {
}

    .main-menu .fa-xl {
        height: 1.35rem;
    }


.ico-plus {
    height: 16px;
    width: 12px;
    margin-left: 2px;
    margin-right: 2px;
    -webkit-mask-image: url(../images/icons/plus.svg);
}

.ico-filter {
    height: 16px;
    width: 16px;
    -webkit-mask-image: url(../images/icons/filter.svg);
}

.ico-filter.checked {
    background: blue;
}

.ico-filter.unchecked {
    background: grey;
}

.ico-cross {
    height: 16px;
    width: 14px;
    margin-left: 1px;
    margin-right: 1px;
    transform: rotate(45deg);
    -webkit-mask-image: url(../images/icons/plus.svg);
    background-color: red;
}

.ico-cog {
    height: 16px;
    width: 16px;
    -webkit-mask-image: url(../images/icons/cog.svg);
    background-color: var(--bs-link-hover-color);
}
