.layout {
    --bb-layout-headerbar-background: var(--bb-primary-color);
    --bb-layout-logo-bg: var(--bb-primary-color);
}

.layout-drawer {
    padding: 13px;
    margin-inline-end: -1rem;
    cursor: pointer;
}

    .layout-drawer:hover {
        color: #fff;
    }

.layout-item {
    cursor: pointer;
    border: 2px solid #e9ecef;
    padding: 4px;
    border-radius: var(--bs-border-radius);
    height: 80px;
    width: 120px;
    transition: border .3s linear;
}

    .layout-item:hover,
    .layout-item.active {
        border: 2px solid #28a745;
    }

    .layout-item .layout-left {
        width: 30%;
    }

        .layout-item .layout-left .layout-left-header {
            height: 16px;
            background-color: var(--bb-layout-sidebar-banner-background);
        }

        .layout-item .layout-left .layout-left-body,
        .layout-item .layout-body .layout-left {
            background-color: #2f4050;
        }

    .layout-item .layout-right .layout-right-header,
    .layout-item .layout-top {
        background-color: #17a2b8;
        height: 16px;
    }

    .layout-item .layout-right .layout-right-footer,
    .layout-item .layout-footer {
        background-color: #5b6e84;
        height: 12px;
    }

    .layout-item .layout-top,
    .layout-item .layout-body,
    .layout-item .layout-footer {
        width: 100%;
    }

.page-layout-demo-option {
    margin-top: 1.5rem;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: var(--bs-border-radius);
    padding: 1.5rem 1rem 1rem 1rem;
    position: relative;
}

    .page-layout-demo-option > p {
        position: absolute;
        top: -10px;
        padding: 0 0.5rem;
        background: #fff;
    }

    .page-layout-demo-option .tabs-body-content {
        margin: 0 -1rem -2rem -1rem;
    }