// vue3-perfect-scrollbar
.ps__thumb-x {
    background-color: #e5e6ec;
}

.ps__thumb-x {
    background-color: #d7d8df;
    height: 6px;
    /* there must be 'bottom' for ps__thumb-x */
    bottom: 2px;
}

.ps__thumb-y {
    background-color: #d7d8df;
    width: 6px;
    /* there must be 'right' for ps__thumb-y */
    right: 2px;
}

.ps__rail-x {
    border-radius: 6px;
    height: 12px;
}

.ps__rail-y {
    border-radius: 6px;
    width: 12px;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #d7d8df;
    height: 8px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #d7d8df;
    width: 8px;
}

// Utils
.bg-color-transparent {
    background-color: rgba(255, 255, 255, 0.5) !important;
}
.bg-color-grey {
    background-color: #f3f4fa !important;
}
.kanban-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 27px;
    width: 27px;
    overflow: hidden;
    background-color: #f3f4fa;
    border-radius: 50%;

    span {
        font-size: 0.85em;
        font-weight: 700;
        color: #808080;
    }

    img {
        height: 27px;
    }
}