.filter-buttons {
    width: 100%;
    margin-bottom: 11px;
    border: 1px solid #ccc;
    padding-top: 5px;
    border-radius: 3px;
}
    .filter-buttons > ul {
        width:100%;
        margin: 0 auto;
        display:flex;
        flex-wrap:wrap;        
        list-style:none;
        padding:0;        
    }

        .filter-buttons > ul > li {        
            padding-left:5px;
            padding-right:5px;
            padding-bottom:5px;            
            flex-grow:1;
        }
            .filter-buttons > ul > li > button {
                width: 100%;
                outline:none !important ;
            }

.filter-buttons .filter-glyth {
    display: none;
}
.filter-buttons .active .filter-glyth {
    display: initial;
}
    .filter-buttons .active .filter-glyth {
        display: initial;
    }

    .filter-buttons .btn-success {
        background-color: #bff7c9; /*IE Fallback colour*/
        background-color: var(--main-color-btn-success);
        border-color: #b6d8bc; /*IE Fallback colour*/
        border-color: var(--main-color-btn-success-border);
        color: black;
    }

        .filter-buttons .btn-success:hover {
            background-color: #ace8b7; /*IE Fallback colour*/
            background-color: var(--main-color-btn-success-hover);
            border-color: #b6d8bc; /*IE Fallback colour*/
            border-color: var(--main-color-btn-success-border);
            color: black;
        }
        .filter-buttons .btn-success:active {
            background-color: #ace8b7; /*IE Fallback colour*/
            background-color: var(--main-color-btn-success-hover);
            border-color: #b6d8bc; /*IE Fallback colour*/
            border-color: var(--main-color-btn-success-border);
            color: black;
        }
        .filter-buttons .btn-success:focus {
            background-color: #ace8b7; /*IE Fallback colour*/
            background-color: var(--main-color-btn-success-hover);
            border-color: #b6d8bc; /*IE Fallback colour*/
            border-color: var(--main-color-btn-success-border);
            color: black;
        }

    .filter-buttons .btn-warning {
        background-color: #ffe1aa; /*IE Fallback colour*/
        background-color: var(--main-color-btn-warning);
        border-color: #f5d08c; /*IE Fallback colour*/
        border-color: var(--main-color-btn-warning-border);
        color: black;
    }

        .filter-buttons .btn-warning:hover {
            background-color: #ffd588; /*IE Fallback colour*/
            background-color: var(--main-color-btn-warning-hover);
            border-color: #f5d08c; /*IE Fallback colour*/
            border-color: var(--main-color-btn-warning-border);
            color: black;
        }
        .filter-buttons .btn-warning:active {
            background-color: #ffd588; /*IE Fallback colour*/
            background-color: var(--main-color-btn-warning-hover);
            border-color: #f5d08c; /*IE Fallback colour*/
            border-color: var(--main-color-btn-warning-border);
            color: black;
        }
        .filter-buttons .btn-warning:focus {
            background-color: #ffd588; /*IE Fallback colour*/
            background-color: var(--main-color-btn-warning-hover);
            border-color: #f5d08c; /*IE Fallback colour*/
            border-color: var(--main-color-btn-warning-border);
            color: black;
        }

    .filter-buttons .btn-danger {
        background-color: lightcoral; /*IE Fallback colour*/
        background-color: var(--main-color-btn-danger);
        border-color: #e47373; /*IE Fallback colour*/
        border-color: var(--main-color-btn-danger-border);
        color: black;
    }

        .filter-buttons .btn-danger:hover {
            background-color: #e06868; /*IE Fallback colour*/
            background-color: var(--main-color-btn-danger-hover);
            border-color: #e47373; /*IE Fallback colour*/
            border-color: var(--main-color-btn-danger-border);
            color: black;
        }
        .filter-buttons .btn-danger:active {
            background-color: #e06868; /*IE Fallback colour*/
            background-color: var(--main-color-btn-danger-hover);
            border-color: #e47373; /*IE Fallback colour*/
            border-color: var(--main-color-btn-danger-border);
            color: black;
        }
        .filter-buttons .btn-danger:focus {
            background-color: #e06868; /*IE Fallback colour*/
            background-color: var(--main-color-btn-danger-hover);
            border-color: #e47373; /*IE Fallback colour*/
            border-color: var(--main-color-btn-danger-border);
            color: black;
        }