.car-widget {
    margin: 0;
    width: 19px;
    height: 19px;
}

.car-widget svg {
    width: 100%;
    height: 100%;
    transition: fill .3s ease-in-out;

}
.car-widget--favorite {
    position: relative;
}

.car-widget--favorite > svg ,
.car-widget--notify > svg{
    fill: #d5d5d5;
}

.car-widget--notify.active > svg {
    fill: #2B2D33;
} 
.car-widget--favorite.active > svg{
    fill: #FED500;
}

.car-widget--favorite.active + .car-widget--notify,
.car-widget.active {
    opacity: 1 !important;
}

.car-widget-icon {
    background-repeat: no-repeat;
    background-position: center;
    filter: gray;

}

.car-widget-icon:not(.active) {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}
.car-widget-icon--favorite {
    background-size: 17px;
    background-image: url('../img/icon-kanban.png');
}

.car-widget--favorite span.selected,
.car-widget--favorite.active span.select{
    display: none;
}

.car-widget--favorite span.select,
.car-widget--favorite.active span.selected{
    display: block;
}


.car-widget.btn-border {
    width: auto;
    height: 38px;
    min-width: 38px;
}

.car-widget.btn-border {
    border: 1px solid #808185;
    border-radius: 3px;
    inset: unset;
}
.car-widget.btn-border.car-widget--notify svg {
    width: 16px;
    height: 16px;
}

.car-widget.btn-border.car-widget--favorite {
    width: 100%;
}

.car-widget.btn-border:not(.active).btn-icon--kanban {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    opacity: 0.4;
}

@media (min-width: 1200px) {

    .car-widget--notify:hover > svg{
        fill: #2B2D33;
    }

    .car-widget--favorite:hover> svg {
        fill: #ffd602;
    }
    .car-widget-icon:not(.active):hover{
        -webkit-filter: grayscale(0);
        filter: none;
        opacity: 1 !important;
    }

    .car-widget--favorite.active:hover,
    .car-widget--notify.active:hover {
        opacity: .8 !important;
    }
}