.qb-empty {
    --qb-empty-padding: 40px 0;
    --qb-empty-image-width: 160px;
    --qb-empty-description-margin-top: 20px;
    --qb-empty-bottom-margin-top: 20px;
    --qb-empty-fill-color-0: var(--qb-color-white);
    --qb-empty-fill-color-1: #fcfcfd;
    --qb-empty-fill-color-2: #f8f9fb;
    --qb-empty-fill-color-3: #f7f8fc;
    --qb-empty-fill-color-4: #eeeff3;
    --qb-empty-fill-color-5: #edeef2;
    --qb-empty-fill-color-6: #e9ebef;
    --qb-empty-fill-color-7: #e5e7e9;
    --qb-empty-fill-color-8: #e0e3e9;
    --qb-empty-fill-color-9: #d5d7de;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    box-sizing: border-box;
    padding: var(--qb-empty-padding);
}

.qb-empty__image {
    width: var(--qb-empty-image-width);
}

.qb-empty__image img {
    user-select: none;
    width: 100%;
    height: 100%;
    vertical-align: top;
    object-fit: contain;
}

.qb-empty__image svg {
    color: var(--qb-svg-monochrome-grey);
    fill: currentColor;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.qb-empty__description {
    margin-top: var(--qb-empty-description-margin-top);
}

.qb-empty__description p {
    margin: 0;
    font-size: var(--qb-font-size-base);
    color: var(--qb-text-color-secondary);
}

.qb-empty__bottom {
    margin-top: var(--qb-empty-bottom-margin-top);
}