.filter-red {
    filter: brightness(0) saturate(100%) invert(31%) sepia(92%) saturate(5865%) hue-rotate(3deg) brightness(95%) contrast(103%) !important;
}

.filter-dark-gray {
    filter: brightness(0) saturate(100%) invert(16%) sepia(27%) saturate(2733%) hue-rotate(186deg) brightness(95%) contrast(95%);
}

.filter-blue {
    filter: brightness(0) saturate(100%) invert(39%) sepia(59%) saturate(1747%) hue-rotate(200deg) brightness(104%) contrast(101%);
}

.filter-light-gray {
    filter: brightness(0) saturate(100%) invert(92%) sepia(8%) saturate(217%) hue-rotate(174deg) brightness(100%) contrast(78%);
}

.filter-medium-gray {
    filter: brightness(0) saturate(100%) invert(52%) sepia(16%) saturate(583%) hue-rotate(173deg) brightness(95%) contrast(84%);
}

.filter-gray {
    filter: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(734%) hue-rotate(173deg) brightness(91%) contrast(92%);
}

.filter-white {
    filter: brightness(0) invert(1);
}

.filter-light-blue {
    filter: brightness(0) saturate(100%) invert(72%) sepia(14%) saturate(1385%) hue-rotate(185deg) brightness(101%) contrast(101%);
}

.filter-green {
    filter: brightness(0) saturate(100%) invert(53%) sepia(93%) saturate(742%) hue-rotate(92deg) brightness(91%) contrast(103%);
}

.icon-search {
    background: url('../images/icons/search-icon.svg');
    background-repeat: no-repeat;
    background-size: cover; /* stretch the background to cover the whole element */
    /* 
       still inline, but has block features
       meaning height and width can be set
    */
    display: inline-block;
    height: 20px;
    width: 20px;
}