/* SharedLibraries.SiteBuilder/wwwroot/css/sitebuilder.css */

/* Enables responsive background layers generated by the Background model. */
.sb-bg-responsive {
    background: var(--sb-background);
}

@media (max-width: 575.98px) {
    .sb-bg-responsive {
        background: var(--sb-background-mobile, var(--sb-background));
    }
}

.sb-text-pre-line {
    white-space: pre-line;
}

.sb-ls-tight {
    letter-spacing: -0.04em;
}

.sb-ls-wide {
    letter-spacing: 0.04em;
}

.sb-text-shadow-soft {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.sb-text-shadow {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* Shared icon sizing; prepared hosts add the SVG-mask class, normal hosts use Font Awesome CSS. */
.sb-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    vertical-align: -0.125em;
}

.sb-icon-svg {
    background-color: currentColor;
    -webkit-mask: var(--sb-icon-url) center / contain no-repeat;
    mask: var(--sb-icon-url) center / contain no-repeat;
}

.sb-icon-fw {
    width: 1.25em;
    flex-basis: 1.25em;
    text-align: center;
}

.sb-icon-lg {
    font-size: 1.25em;
}

.sb-icon-2x {
    font-size: 2em;
}

.sb-icon-10x {
    font-size: 10em;
}


/* Reusable image-backed background layer for shared components that opt into responsive image rendering. */
.sb-background-image-host {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sb-background-image-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.sb-background-image-layer picture,
.sb-background-image {
    display: block;
    width: 100%;
    height: 100%;
}

.sb-background-image {
    object-fit: cover;
    object-position: center;
}