@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/LandingLayout.razor.rz.scp.css */

.app-background[b-r68618gxib] { /* Background image */
    background-image: url('/images/cyberthinker.jpg');
    background-size: cover; /* fills the viewport */
    background-repeat: no-repeat; /* prevents tiling */
    background-position: center; /* keeps focal point centered */
    background-attachment: fixed; /* optional: parallax-style effect */ /* Layout */
    min-height: 100vh; /* always at least full screen height */
    width: 100%;
    display: flex; /* allows easy centering of content */
    flex-direction: column;
}

.main-content[b-r68618gxib] {
    flex: 1; /* ensures content fills available space */
    padding: 20px; /* optional breathing room */
}

.landing-top-row[b-r68618gxib] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 3.5rem;
    background-color: rgb(38, 49, 134, 0.40);
    position: relative; /* anchors the dropdown menu's absolute positioning */
}

.landing-nav-links[b-r68618gxib] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.landing-nav-auth[b-r68618gxib] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.landing-navbar-toggler[b-r68618gxib] {
    display: none; /* only shown below the mobile breakpoint */
}

.landing-top-link[b-r68618gxib] {
    color: #d7d7d7;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.landing-top-link:visited[b-r68618gxib] {
    color: #d7d7d7;
}

.landing-top-link:hover[b-r68618gxib] {
    color: white;
    text-decoration: underline;
}

.landing-auth-name[b-r68618gxib] {
    color: #d7d7d7;
    white-space: nowrap;
    flex-shrink: 0;
}

.landing-auth-button[b-r68618gxib] {
    color: white;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    padding: 0.35rem 0.9rem;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.landing-auth-button:visited[b-r68618gxib] {
    color: white;
}

.landing-auth-button:hover[b-r68618gxib] {
    color: white;
    background-color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

.landing-dropdown[b-r68618gxib] {
    flex-shrink: 0;
}

.landing-dropdown > summary[b-r68618gxib] {
    color: #d7d7d7;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.landing-dropdown > summary:hover[b-r68618gxib] {
    color: white;
    text-decoration: underline;
}

.landing-dropdown > summary[b-r68618gxib]::-webkit-details-marker {
    display: none;
}

.landing-dropdown > summary[b-r68618gxib]::after {
    content: " \25BE"; /* small caret */
}

.landing-dropdown-menu[b-r68618gxib] {
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background-color: rgb(38, 49, 134, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 0 4px 4px;
    padding: 0.5rem 0;
    z-index: 1000;
}

.landing-dropdown-item[b-r68618gxib] {
    padding: 0.4rem 1rem;
    color: #d7d7d7;
    text-decoration: none;
    white-space: nowrap;
}

.landing-dropdown-item:visited[b-r68618gxib] {
    color: #d7d7d7;
}

.landing-dropdown-item:hover[b-r68618gxib] {
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Below this width, the links/auth groups collapse behind a hamburger toggle rather than
   squeezing or scrolling horizontally - same checkbox-driven, JS-free pattern as the app's
   sidebar NavMenu.razor.css. */
@media (max-width: 640px) {
    .landing-top-row[b-r68618gxib] {
        flex-wrap: wrap;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .landing-navbar-toggler[b-r68618gxib] {
        display: block;
        appearance: none;
        cursor: pointer;
        width: 2.75rem;
        height: 2.25rem;
        margin-left: auto;
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 4px;
        background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.5rem rgba(255, 255, 255, 0.1);
    }

    .landing-nav-links[b-r68618gxib],
    .landing-nav-auth[b-r68618gxib] {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-left: 0;
        padding: 0.75rem 0;
    }

    .landing-navbar-toggler:checked ~ .landing-nav-links[b-r68618gxib],
    .landing-navbar-toggler:checked ~ .landing-nav-auth[b-r68618gxib] {
        display: flex;
    }

    .landing-dropdown-menu[b-r68618gxib] {
        position: static;
        border-radius: 4px;
        margin-top: 0.5rem;
    }

    /* The busy background image shows through more once the menu expands full-width, so
       give the text more weight to stay legible against it. */
    .landing-top-link[b-r68618gxib],
    .landing-auth-name[b-r68618gxib],
    .landing-auth-button[b-r68618gxib],
    .landing-dropdown > summary[b-r68618gxib],
    .landing-dropdown-item[b-r68618gxib] {
        font-weight: bold;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-cxrl7biu13] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-cxrl7biu13] {
    flex: 1;
}

.sidebar[b-cxrl7biu13] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-cxrl7biu13] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-cxrl7biu13]  a, .top-row[b-cxrl7biu13]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-cxrl7biu13]  a:hover, .top-row[b-cxrl7biu13]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-cxrl7biu13]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-cxrl7biu13] {
        justify-content: space-between;
    }

    .top-row[b-cxrl7biu13]  a, .top-row[b-cxrl7biu13]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-cxrl7biu13] {
        flex-direction: row;
    }

    .sidebar[b-cxrl7biu13] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-cxrl7biu13] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-cxrl7biu13]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-cxrl7biu13], article[b-cxrl7biu13] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-cxrl7biu13] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-cxrl7biu13] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.svg-container[b-cxrl7biu13] {
    width: 600px;
    height: 600px;
    resize: both;
    overflow: scroll;
    border: 1px dashed #aaa;
}

svg[b-cxrl7biu13] {
    width: 100%;
    height: 100%;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-zkxmnby2cc] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-zkxmnby2cc] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-zkxmnby2cc] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-zkxmnby2cc] {
    font-size: 1.1rem;
}

.bi[b-zkxmnby2cc] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-zkxmnby2cc] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-zkxmnby2cc] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-zkxmnby2cc] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-zkxmnby2cc] {
        padding-bottom: 1rem;
    }

    .nav-item[b-zkxmnby2cc]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-zkxmnby2cc]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-zkxmnby2cc]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-zkxmnby2cc] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-zkxmnby2cc] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-zkxmnby2cc] {
        display: none;
    }

    .nav-scrollable[b-zkxmnby2cc] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Pages/EconomicHealthPage.razor.rz.scp.css */
/* Two equal columns on wide screens; below 768px (phones, narrow tablets) the cards stack
   because the charts get too cramped side by side. */
/* The intro text sits on a busy background image, so it gets its own darker backing - just
   behind the words - while the page panel and widgets keep their look. The section headings
   get the same treatment. */
.intro-panel[b-rdeh4vy82k],
.section-heading[b-rdeh4vy82k] {
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background-color: rgba(8, 12, 36, 0.78);
}

/* The trend summary lines up with the intro panel above it. Its closing note ("9 mixed...") would
   otherwise sit straight on the background image, so it gets the same backing as the intro. */
.trend-summary[b-rdeh4vy82k] {
    margin: 0 1.5rem 0.5rem;
}

.trend-summary[b-rdeh4vy82k]  .trend-alerts-note {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: rgba(8, 12, 36, 0.78);
    color: #d4d8e4;
}

/* Sits above its grid with the grid's own side margin, and scrolls clear of the top on
   /economichealth#jobs style links. */
.section-heading[b-rdeh4vy82k] {
    margin: 1.5rem 1.5rem 0;
    scroll-margin-top: 1rem;
}

.widget-grid[b-rdeh4vy82k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin: 1rem 1.5rem 1.5rem;
}

.widget-cell[b-rdeh4vy82k] {
    margin: 0;
    background-color: rgba(38, 49, 134, 0.50);
    border: thin solid aqua;
    scroll-margin-top: 1rem;
}

/* A section with an odd number of cards gives the last one the full row. */
.widget-cell:last-child:nth-child(odd)[b-rdeh4vy82k] {
    grid-column: 1 / -1;
}

/* The widgets bring their own vertical margins; the grid gap handles spacing here, and each
   widget fills its cell so a row of two lines up. */
.widget-cell[b-rdeh4vy82k]  .debt-counter,
.widget-cell[b-rdeh4vy82k]  .rate-widget {
    margin: 0;
    height: 100%;
}

@media (max-width: 767.98px) {
    .widget-grid[b-rdeh4vy82k] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        margin: 0.75rem;
    }

    .intro-panel[b-rdeh4vy82k],
    .section-heading[b-rdeh4vy82k] {
        padding: 0.75rem 1rem;
    }

    .section-heading[b-rdeh4vy82k] {
        margin: 0.75rem 0.75rem 0;
    }

    .trend-summary[b-rdeh4vy82k] {
        margin: 0 0.75rem 0.5rem;
    }

    /* Every pixel of width counts for the charts on a phone, so trim the nested padding. */
    .widget-cell[b-rdeh4vy82k] {
        padding: 0.5rem !important;
    }

    .widget-cell[b-rdeh4vy82k]  .debt-counter,
    .widget-cell[b-rdeh4vy82k]  .rate-widget {
        padding: 0.9rem 0.6rem;
    }
}
/* /Components/Pages/LandingPage.razor.rz.scp.css */

body[b-ztaccqkdsv] {
    text-align: left;
    color: white;
    /*background-color: #f0f0f0;*/
}

h1[b-ztaccqkdsv] {
    margin-top: 40px;
}

.margin-top[b-ztaccqkdsv] {
    margin-top: 10px;
}

/* The landing panel is a .row child, which Bootstrap already sizes to the row's full width on
   phones. The old m-3 added a 16px margin on each side on top of that, pushing the panel right
   and 8px past the screen edge (a sideways scroll). Same 1rem margin as before on wider screens;
   on phones it's inset by 0.75rem and capped to the row width less those margins, so it sits
   centered with 20px on each side. */
.landing-panel[b-ztaccqkdsv] {
    margin: 1rem;
}

@media (max-width: 575.98px) {
    .landing-panel[b-ztaccqkdsv] {
        margin: 1rem 0.75rem;
        max-width: calc(100% - 1.5rem);
    }
}

/* "SeriousMindware.com" is one unbreakable word, about 284px wide at Bootstrap's responsive
   heading size (~27px) on a 320px phone - wider than the panel's 240px of content, which made
   the page scroll sideways. 1.35rem (21.6px) brings it to roughly 230px. */
@media (max-width: 359.98px) {
    h1[b-ztaccqkdsv] {
        font-size: 1.35rem;
    }
}

.blocktransparentblue[b-ztaccqkdsv] {
    height: auto;
    width: auto;
    background-color: rgb(38, 49, 134, 0.40);
    border: none;
}

.flexboxbyheight[b-ztaccqkdsv] {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.flexboxbyheightwidth30[b-ztaccqkdsv] {
    display: flex;
    flex-flow: column;
    height: 95%;
    width: 33%;
}

.image-button[b-ztaccqkdsv] {
    width: 300px;
    max-width: 100%; /* on the narrowest phones the panel's content is under 300px */
}

.empty-block[b-ztaccqkdsv] {
    height: 150px;
}

.block2[b-ztaccqkdsv] {
    height: 150px;
    background-color: #5bbfb4;
    border: 5px solid #f0f0f0;
}

.block-contain[b-ztaccqkdsv] {
    height: 620px;
}

.block3[b-ztaccqkdsv] {
    height: 310px;
    background-color: #5bbfb4;
    border: 5px solid #f0f0f0;
}

.block4[b-ztaccqkdsv] {
    height: 300px;
    background-color: #42a8c8;
    margin-top: 10px;
    border: 5px solid #f0f0f0;
}

.block5[b-ztaccqkdsv] {
    height: 300px;
    background-color: #5bbfb4;
    margin-top: 10px;
    border: 5px solid #f0f0f0;
}

.block6[b-ztaccqkdsv] {
    height: 620px;
    background-color: #42a8c8;
    border: 5px solid #f0f0f0;
}

.block7[b-ztaccqkdsv] {
    height: 150px;
    background-color: #5bbfb4;
    border: 5px solid #f0f0f0;
}

.block8[b-ztaccqkdsv] {
    height: 150px;
    background-color: #42a8c8;
    margin-top: 10px;
    border: 5px solid #f0f0f0;
}

.block9[b-ztaccqkdsv] {
    height: 300px;
    background-color: #5bbfb4;
    margin-top: 10px;
    border: 5px solid #f0f0f0;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* ::deep is required here: .smw-avatar is rendered by ProfileAvatar, a child component from
   SeriousMindware.Identity.Razor with no scoped CSS of its own, so a plain (non-::deep) selector
   in this scoped stylesheet would never match it. */
[b-3cgcuil0eu] .smw-avatar {
    border-radius: 50%;
    object-fit: cover;
}
/* /Components/UserApps/Pages/UserAppDownload.razor.rz.scp.css */
/* /Components/UserApps/Pages/UserAppEdit.razor.rz.scp.css */

/* /Components/UserApps/Pages/UserAppGenCode.razor.rz.scp.css */
/* /Components/UserApps/UserAppCodeArea.razor.rz.scp.css */

.grow-wrap[b-m28i6kop14] {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

    .grow-wrap[b-m28i6kop14]::after {
        /* Note the weird space! Needed to preventy jumpy behavior */
        content: attr(data-replicated-value) " ";
        /* This is how textarea text behaves */
        white-space: pre-wrap;
        /* Hidden from view, clicks, and screen readers */
        visibility: hidden;
    }

    .grow-wrap > textarea[b-m28i6kop14] {
        /* You could leave this, but after a user resizes, then it ruins the auto sizing */
        resize: none;
        /* Firefox shows scrollbar on growth, you can hide like this. */
        /*overflow: hidden;*/
    }

    .grow-wrap > textarea[b-m28i6kop14],
    .grow-wrap[b-m28i6kop14]::after {
        /* Identical styling required!! */
        border: 1px solid black;
        padding: 0.5rem;
        font: inherit;
        /* Place on top of each other */
        grid-area: 1 / 1 / 2 / 2;
    }

body[b-m28i6kop14] {
    margin: 2rem;
    font: 1rem/1.4 system-ui, sans-serif;
}

label[b-m28i6kop14] {
    display: block;
}
/* /Components/Vibe/VibeSettingsEditor.razor.rz.scp.css */
.vibe-editor[b-5hh0uu1s07] {
    color: #cfd8ff;
    font-family: system-ui, sans-serif;
    font-size: 14px;
}

fieldset[b-5hh0uu1s07] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

fieldset:disabled[b-5hh0uu1s07] {
    opacity: .55;
}

h4[b-5hh0uu1s07] {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .7;
    margin: 16px 0 8px;
}

.vibe-field[b-5hh0uu1s07] {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
}

.vibe-field > label[b-5hh0uu1s07] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.vibe-field select[b-5hh0uu1s07],
.vibe-editor input[type=number][b-5hh0uu1s07] {
    background: #050714;
    color: #cfd8ff;
    border: 1px solid #2a3260;
    border-radius: 6px;
    padding: 4px 6px;
    font: inherit;
    max-width: 100%;
}

.vibe-row[b-5hh0uu1s07] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vibe-row input[type=range][b-5hh0uu1s07] {
    flex: 1;
    min-width: 0;
}

.vibe-row output[b-5hh0uu1s07] {
    min-width: 5.5em;
    text-align: right;
    font-variant-numeric: tabular-nums;
    opacity: .85;
}

.vibe-chips[b-5hh0uu1s07] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vibe-chip[b-5hh0uu1s07] {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.vibe-chip input[type=number][b-5hh0uu1s07] {
    width: 4.5em;
}

.vibe-chip input[type=color][b-5hh0uu1s07] {
    width: 36px;
    height: 28px;
    padding: 0;
    border: 1px solid #2a3260;
    border-radius: 6px;
    background: none;
}

.vibe-editor button[b-5hh0uu1s07] {
    background: transparent;
    color: #cfd8ff;
    border: 1px solid #3a4590;
    border-radius: 999px;
    padding: 4px 12px;
    font: inherit;
    cursor: pointer;
}

.vibe-editor button:hover:not(:disabled)[b-5hh0uu1s07] {
    background: rgba(120, 140, 255, .12);
}

.vibe-editor button:disabled[b-5hh0uu1s07] {
    opacity: .4;
    cursor: default;
}

.vibe-chip button[b-5hh0uu1s07] {
    padding: 0 7px;
}

.vibe-small[b-5hh0uu1s07] {
    font-size: 12px;
    opacity: .7;
}

.vibe-actions[b-5hh0uu1s07] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.vibe-nudge[b-5hh0uu1s07] {
    background: rgba(255, 200, 90, .12);
    border: 1px solid #ffd27a;
    color: #ffe7b0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    margin: 8px 0 0;
}

.vibe-note[b-5hh0uu1s07] {
    font-size: 13px;
    opacity: .85;
    margin: 0 0 8px;
}

.vibe-editor a[b-5hh0uu1s07] {
    color: #9fb0ff;
}

/* Tooltips: a small "?" that shows its text on hover or keyboard focus. */
.help[b-5hh0uu1s07] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #5a68b8;
    font-size: 11px;
    line-height: 1;
    cursor: help;
    position: relative;
    opacity: .8;
    outline: none;
}

.help:hover[b-5hh0uu1s07]::after,
.help:focus[b-5hh0uu1s07]::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    width: 250px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0b0f24;
    border: 1px solid #3a4590;
    color: #e6ecff;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.35;
    white-space: normal;
    z-index: 10;
}

/* Quick vibes: the first thing in the panel, set apart from the fine-tuning settings below. */
.vibe-quick[b-5hh0uu1s07] {
    position: relative;
    background: rgba(120, 140, 255, .06);
    border: 1px solid #2a3260;
    border-radius: 10px;
    padding: 2px 12px 12px;
}

.vibe-quick h4[b-5hh0uu1s07] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.vibe-quick .vibe-chips button[b-5hh0uu1s07] {
    padding: 6px 14px;
}

.vibe-quick .vibe-chips button.picked[b-5hh0uu1s07] {
    background: rgba(110, 243, 255, .14);
    border-color: #6ef3ff;
    color: #e6fbff;
}

.vibe-picked[b-5hh0uu1s07] {
    display: block;
    margin: 8px 0 0;
}

.vibe-tweak-note[b-5hh0uu1s07] {
    font-size: 12px;
    opacity: .75;
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px dashed #2a3260;
}

.vibe-quick h4.vibe-classics-head[b-5hh0uu1s07] {
    margin-top: 14px;
}

/* The "ready" card: pops up just under the chip that was tapped (its top and the pointer's left are set by
   svPlaceReady in seriousvibe.js), over the chips below it. */
.vibe-ready[b-5hh0uu1s07] {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: rgba(14, 18, 40, .97);
    border: 1px solid #6ef3ff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .55), 0 0 14px rgba(110, 243, 255, .25);
    animation: vibe-ready-in-b-5hh0uu1s07 .2s ease-out;
}

/* A little pointer up to the chip. */
.vibe-ready[b-5hh0uu1s07]::before {
    content: "";
    position: absolute;
    top: -7px;
    left: var(--pointer-x, 24px);
    width: 12px;
    height: 12px;
    background: rgba(14, 18, 40, .97);
    border-left: 1px solid #6ef3ff;
    border-top: 1px solid #6ef3ff;
    transform: rotate(45deg);
}

.vibe-ready-text[b-5hh0uu1s07] {
    min-width: 0;
}

.vibe-ready-buttons[b-5hh0uu1s07] {
    display: flex;
    gap: 8px;
}

.vibe-editor .vibe-ready-apply[b-5hh0uu1s07] {
    background: rgba(110, 243, 255, .18);
    border-color: #6ef3ff;
    color: #e6fbff;
    font-weight: 600;
}

@keyframes vibe-ready-in-b-5hh0uu1s07 {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vibe-ready[b-5hh0uu1s07] { animation: none; }
}