.ks-topbar
{
    background-color: #000000;
    background-image: linear-gradient(to right, #ffffff 0%, transparent 30%);
    border-bottom: 1px solid #ebeef2;
    height: 52px;
    position: relative;
    z-index: 2;
}

    .ks-topbar::before
    {
        background-image: url("img/topbar-pattern.png");
        content: "";
        inset: 0;
        opacity: .5;
        position: absolute;
        z-index: -1;
    }

.ks-brand
{
    box-sizing: border-box;
    height: 50px;
    padding: 8px 0;
    width: auto;
}

.ks-gwrap
{
    position: relative;
}

.ks-glegend
{
    bottom: 12px;
    left: 12px;
    position: absolute;
    z-index: 2;
}

.ks-striped
{
    background-image: repeating-linear-gradient(135deg, transparent 0 5px, var(--kfw-c-stone-lightest, #f3f5f8) 5px 10px) !important;
}

.ks-striped-small
{
    background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--kfw-c-gray-normal, #e3e8ee) 3px 5px) !important;
}

.ks-field:focus-within
{
    outline: 1px solid var(--kfw-focus-color);
    outline-offset: -1px;
}

    .ks-field .kfw-input:focus-visible
    {
        outline: none;
    }