:root {
    --pfb-border-color: var(--bs-border-color, #ccc); 

    --pfb-primary-rgb: var(--bs-primary-rgb, 0,136,187);
    --pfb-primary-color: var(--bs-primary, rgb(var(--pfb-primary-rgb)));
    --pfb-label-color: #888;

    --pfb-info-color: var(--bs-info, #08f);
    --pfb-success-color: var(--bs-success, #080);
    --pfb-warning-color: var(--bs-warning, #f80);
    --pfb-danger-color: var(--bs-danger, #f23);
    --pfb-label-color: var(--bs-gray-600, #888);

    --pfb-form-gap-x: 3em;
    --pfb-form-gap-y: 0.6em;

    --pfb-busy-overlay-rgb: 255,255,255;
}

/* app styles */

.pfb-text-info {
    color: var(--pfb-info-color);
}

.pfb-text-success {
    color: var(--pfb-success-color);
}

.pfb-text-warning {
    color: var(--pfb-warning-color);
}

.pfb-text-danger {
    color: var(--pfb-danger-color);
}

/* message list */

.pfb-msglist {
    padding: 0 0 0 2em;
    margin: 1em 0;
}

/* busy box animations */

@keyframes pfb-busy-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.6;
    }
}

@keyframes pfb-busy-blink {
    from, to {
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
}

/* form layout */

.pfb-form-layout {
    --pfb-fl-cap-col-size: fit-content(50%);
    --pfb-fl-cap-color: var(--pfb-label-color);
    --pfb-fl-left-cap-align: right;
    --pfb-fl-top-cap-align: left;
    --pfb-fl-col-count: 1;
    --pfb-fl-col-width: 300px;
    --pfb-fl-item-valign: center;
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

.pfb-fl-box {
    column-count: var(--pfb-fl-col-count);
    column-width: var(--pfb-fl-col-width);
    column-gap: var(--pfb-form-gap-x);
    margin: calc(var(--pfb-form-gap-y) * -0.5) 0;
}

.pfb-fl-grid {
    display: grid;
    grid-template-columns: var(--pfb-fl-cap-col-size) 1fr;
}

.pfb-fl-item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    gap: 0.15em 1em;
    padding: calc(var(--pfb-form-gap-y) * 0.5) 0;
    align-items: var(--pfb-fl-item-valign);
    break-inside: avoid;
}
.pfb-fl-item.pfb-fl-cap-top {
    grid-template-columns: 1fr;
}

.pfb-fl-item-label {
    color: var(--pfb-fl-cap-color);
    text-align: var(--pfb-fl-left-cap-align);
}
.pfb-fl-item.pfb-fl-cap-top > .pfb-fl-item-label {
    text-align: var(--pfb-fl-top-cap-align);
}
.pfb-fl-item.pfb-fl-required > .pfb-fl-item-label::after {
    content: " *";
    position: relative;
    top: -0.15em;
    color: var(--pfb-warning-color);
}

.pfb-fl-grid:has(> .pfb-fl-item:not(.pfb-fl-text-item)) > .pfb-fl-item.pfb-fl-text-item > .pfb-fl-item-body {
    padding-left: 0.5em;
    padding-right: 0.5em;
}