@import '_content/mtConsole.Client.Global/mtConsole.Client.Global.ll6jmft3dc.bundle.scp.css';
@import '_content/mtConsole.Client.Mobile/mtConsole.Client.Mobile.8229a88lkv.bundle.scp.css';
@import '_content/mtConsole.Client.Shared/mtConsole.Client.Shared.rep32tw7ix.bundle.scp.css';

/* /Components/Navigation/PropertySelectorDropdown.razor.rz.scp.css */
[b-eyr4w22q21] .rz-form-field-label.rz-text-truncate {
    background-color: transparent;
}

[b-eyr4w22q21] .ui-datatable-odd {
    background-color: #EEEEEE;
}

[b-eyr4w22q21] .initial-column > span {
    color: #EEEEEE;
    font-size: 20px;
}

[b-eyr4w22q21] .rz-label {
    margin-left: 40px;
    font-weight: bold;
    font-size: 18px;
}

[b-eyr4w22q21] .tpi-property-logout {
    margin-left: 40px;
}

[b-eyr4w22q21] .rz-selectable tbody tr.rz-data-row {
    cursor: pointer;
}
/* /Pages/Account/ForgotPasswordPage.razor.rz.scp.css */

.tpi-login-background[b-2slya5zhg5] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background-image: url('images/tpi-login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tpi-login-logo[b-2slya5zhg5] {
    display: block;
    width: 60%;
    padding: 10px;
    margin: 0;
}

[b-2slya5zhg5] .back-button-stack {
    width: 100%;
}


[b-2slya5zhg5] .back-button-card {
    margin-top: 40px;
    margin-left: 40px;
    box-shadow: 1px 1px 5px 1px rgba( 0.2, 0.2, 0.2, 0.2);
    border-radius: 10px;
}

.tpi-login-footer[b-2slya5zhg5] {
    display: flex;
    width: 40%;
    position: relative;
    padding-bottom: 60px;
}




[b-2slya5zhg5] .tpi-login-stack-form {
    height: 100vh;
    display: grid;
    place-items: center;
    width: 100%;
    background-image: url('images/tpi-dots-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[b-2slya5zhg5] .tpi-login-alert {
    height: 95px;
}

[b-2slya5zhg5] .tpi-login-row {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

[b-2slya5zhg5] .rz-form {
    width: 60%;
}

[b-2slya5zhg5] .tpi-login-help {
    color: red;
    font-weight: bold;
    text-decoration: underline;
}

[b-2slya5zhg5] .rz-text-box .rz-state-empty {
    color: yellow;
}

[b-2slya5zhg5] .rz-form-field-label {
    color: #757575;
}

p[b-2slya5zhg5], li[b-2slya5zhg5], div[b-2slya5zhg5], a[b-2slya5zhg5] {
    color: #757575;
}
[b-2slya5zhg5] .icon-title{
   font-size:70px;
   margin-bottom:40px
}

.span-title[b-2slya5zhg5] {
    font-size: 20px;
    font-weight: bold;
}
/* /Pages/Account/LoginPage.razor.rz.scp.css */

.tpi-login-background[b-fgocfmbdn7] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background-image: url('images/tpi-login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tpi-login-logo[b-fgocfmbdn7] {
    display: block;
    width: 60%;
    padding: 10px;
    margin: 0;
}

.tpi-login-footer[b-fgocfmbdn7] {
    display: flex;
    width: 40%;
    position: relative;
    padding-bottom: 60px;
}

[b-fgocfmbdn7] .tpi-login-stack-form {
    height: 100vh;
    display: grid;
    place-items: center;
    width: 100%;
    background-image: url('images/tpi-dots-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[b-fgocfmbdn7] .tpi-login-alert {
    height: 95px;
}

[b-fgocfmbdn7] .tpi-login-row {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

[b-fgocfmbdn7] .rz-form {
    width: 60%;
}

[b-fgocfmbdn7] .tpi-login-help {
    color: red;
    font-weight: bold;
    text-decoration: underline;
}

[b-fgocfmbdn7] .rz-text-box .rz-state-empty {
    color: yellow;
}

[b-fgocfmbdn7] .rz-form-field-label {
    color: #757575;
}
p[b-fgocfmbdn7], li[b-fgocfmbdn7], div[b-fgocfmbdn7], a[b-fgocfmbdn7] {
    color: #757575;
}
/* /Pages/Account/PropertySelectorPage.razor.rz.scp.css */
[b-uuvc1py2l4] .tpi-login-row {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.tpi-login-background[b-uuvc1py2l4] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background-image: url('images/tpi-login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tpi-login-logo[b-uuvc1py2l4] {
    display: block;
    width: 60%;
    padding: 10px;
    margin: 0;
}


[b-uuvc1py2l4] .tpi-login-stack-form {
    display: grid;
    width: 100%;
    background-image: url('images/tpi-dots-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


[b-uuvc1py2l4] .tpi-login-alert {
    height: 65px;
    min-height: 65px;
}

[b-uuvc1py2l4] .tpi-card-form {
    width: 574px;
    border-radius: 35px;
    padding-top:30px;
    padding-left:0px;
    padding-right:0px;
}

p[b-uuvc1py2l4], li[b-uuvc1py2l4], div[b-uuvc1py2l4], a[b-uuvc1py2l4] {
    color: #757575;
}
/* /Pages/Account/ResetPasswordPage.razor.rz.scp.css */

.tpi-login-background[b-9ette0mz9n] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background-image: url('images/tpi-login-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tpi-login-logo[b-9ette0mz9n] {
    display: block;
    width: 60%;
    padding: 10px;
    margin: 0;
}

[b-9ette0mz9n] .password-stack {
    width: 100%;
}


[b-9ette0mz9n] .password-card {
    margin-top: 40px;
    margin-bottom: 40px;
    box-shadow: 1px 1px 5px 1px rgba( 0.2, 0.2, 0.2, 0.2);
    border-radius: 10px;
    width: 100%;
}



.botton-container[b-9ette0mz9n] {
    display:flex;
    justify-content: center;
    align-items: flex-end;
    background-color:transparent;
    margin-bottom:60px;
}

.center-logo-bottom[b-9ette0mz9n] {
    width: 40%;
    height: auto;
}  



[b-9ette0mz9n] .tpi-login-stack-form {
    height: 100vh;
    display: grid;
    place-items: center;
    width: 100%;
    background-image: url('images/tpi-dots-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

[b-9ette0mz9n] .tpi-login-alert {
    height: 95px;
}

[b-9ette0mz9n] .tpi-login-row {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

[b-9ette0mz9n] .rz-form {
    width: 60%;
}

[b-9ette0mz9n] .tpi-login-help {
    color: red;
    font-weight: bold;
    text-decoration: underline;
}

[b-9ette0mz9n] .rz-text-box .rz-state-empty {
    color: yellow;
}

[b-9ette0mz9n] .rz-form-field-label {
    color: #757575;
}

p[b-9ette0mz9n], li[b-9ette0mz9n], div[b-9ette0mz9n], a[b-9ette0mz9n] {
    color: #757575;
}

[b-9ette0mz9n] .icon-title {
    font-size: 70px;
    margin-bottom: 40px;
    align-content:center;
    
}

.span-title[b-9ette0mz9n] {
    font-size: 20px;
    font-weight: bold;
}
[b-9ette0mz9n] .tpi-pwd-row {
    width: 100%;
    padding-left:10px;
}

[b-9ette0mz9n] .tpi-pwd-green{
   color:green;
  
}
/* /Pages/App/EditOffers.razor.rz.scp.css */
/* /Pages/App/FileManager.razor.rz.scp.css */
.pagination[b-jptxzq21ue]{
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

/* /Pages/Demo/ArticlesMockupPage.razor.rz.scp.css */
.articles-mockup-page[b-i4lfpw26cq] {
    min-height: 100vh;
    background-color: #eef0f3;
    display: flex;
    flex-direction: column;
}

.articles-mockup-page__bar[b-i4lfpw26cq] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background-color: #1a1d24;
    color: #fff;
    flex-wrap: wrap;
}

.articles-mockup-page__bar-info[b-i4lfpw26cq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.3;
}

.articles-mockup-page__bar-info strong[b-i4lfpw26cq] {
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #fff;
}

.articles-mockup-page__bar-info span[b-i4lfpw26cq] {
    color: #c4c8d2;
}

.articles-mockup-page__warn[b-i4lfpw26cq] {
    color: #f8c64b !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.articles-mockup-page__tabs[b-i4lfpw26cq] {
    display: inline-flex;
    gap: 4px;
    background-color: #0f1116;
    padding: 4px;
    border-radius: 12px;
    margin: 0 auto;
}

.articles-mockup-page__tab[b-i4lfpw26cq] {
    background-color: transparent;
    border: none;
    color: #c4c8d2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    position: relative;
}

.articles-mockup-page__tab.is-active[b-i4lfpw26cq] {
    background-color: #fff;
    color: #1d1d1d;
    font-weight: 700;
}

.articles-mockup-page__tab-num[b-i4lfpw26cq] {
    font-size: 11px;
    font-weight: 700;
    background-color: #2a2d34;
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px;
}

.articles-mockup-page__tab.is-active .articles-mockup-page__tab-num[b-i4lfpw26cq] {
    background-color: #1d1d1d;
}

.articles-mockup-page__badge[b-i4lfpw26cq] {
    background-color: #21a366;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.articles-mockup-page__bar-actions[b-i4lfpw26cq] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
/* /Pages/Demo/ArticlesMockup/ArticleEditorForm.razor.rz.scp.css */
.aedit[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(15, 19, 28, 0.04);
}

.aedit--compact[b-ye17766dhe],
.aedit--sbs[b-ye17766dhe] {
    padding: 0;
    box-shadow: none;
    background-color: transparent;
}

.aedit__topbar[b-ye17766dhe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.aedit__topbar-actions[b-ye17766dhe] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.aedit__form[b-ye17766dhe] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Type-first + grid edit/create view: 2-column split (fields | GrapesJS canvas). */
.aedit__split[b-ye17766dhe] {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    column-gap: 24px;
    align-items: stretch;
    min-height: 640px;
}

@media (max-width: 1100px) {
    .aedit__split[b-ye17766dhe] {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }
}

.aedit__sidebar[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
}

.aedit__sidebar-fields[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aedit__editor-pane[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
    min-height: 640px;
    min-width: 0;
}

.aedit__editor-pane[b-ye17766dhe]  .grapes-editor,
.aedit__editor-pane[b-ye17766dhe]  .grapes-editor__host {
    flex: 1 1 auto;
    height: 100%;
    min-height: 100%;
}

.aedit__inline-check--block[b-ye17766dhe] {
    padding-bottom: 0;
    margin-top: -8px;
}

/* Outer 2-column grid: left → fields, right → media (large/small uploads). */
.aedit__grid[b-ye17766dhe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    align-items: start;
}

.aedit__grid--no-media[b-ye17766dhe] {
    grid-template-columns: minmax(0, 1fr);
}

.aedit__fields[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.aedit__media[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-width: 140px;
    padding-top: 4px;
}

/* Inline variant for FullPage (Type-first + grid): keep both uploads in a row. */
.aedit__media--inline[b-ye17766dhe] {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
    padding-top: 0;
    margin-top: 4px;
}

.aedit__media--inline .aedit__upload[b-ye17766dhe] {
    align-items: stretch;
    flex: 0 0 auto;
}

.aedit__media--inline .aedit__upload--large[b-ye17766dhe] {
    width: 140px;
}

.aedit__media--inline .aedit__upload--small[b-ye17766dhe] {
    width: 110px;
}

.aedit__upload[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.aedit__upload--large[b-ye17766dhe] {
    width: 140px;
}

.aedit__upload--large .aedit__upload-thumb[b-ye17766dhe] {
    height: 96px;
}

.aedit__upload--small[b-ye17766dhe] {
    width: 110px;
}

.aedit__upload--small .aedit__upload-thumb[b-ye17766dhe] {
    height: 70px;
}

.aedit__upload-thumb[b-ye17766dhe] {
    background-color: #f1f2f4;
    border: 1px dashed #c9ccd6;
    border-radius: 8px;
    display: grid;
    place-items: center;
}

/* Order (narrow) + Active inline, sharing the right RadzenColumn of the row. */
.aedit__order-active[b-ye17766dhe] {
    display: flex;
    align-items: end;
    gap: 24px;
    min-width: 0;
}

.aedit__order-narrow[b-ye17766dhe] {
    flex: 0 0 112px;
    width: 112px;
}

.aedit__inline-check[b-ye17766dhe] {
    padding-bottom: 10px;
}

[b-ye17766dhe] .aedit__inline-check-cell {
    display: flex;
    align-items: end;
    justify-content: flex-start;
}

.aedit__editor[b-ye17766dhe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aedit__footer[b-ye17766dhe] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #ececec;
    margin-top: 8px;
}
/* /Pages/Demo/ArticlesMockup/ArticlesToolbar.razor.rz.scp.css */
.amock-toolbar[b-lj2il2g2kx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 19, 28, 0.04);
    margin-bottom: 1rem;
}

.amock-toolbar--flat[b-lj2il2g2kx] {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 1rem 1.25rem;
}

.amock-toolbar__filters[b-lj2il2g2kx] {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: nowrap;
}

.amock-toolbar__actions[b-lj2il2g2kx] {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
    margin-left: auto;
}

.amock-toolbar__pill--dropdown[b-lj2il2g2kx] {
    width: 200px;
    flex: 0 0 200px;
}

.amock-toolbar__pill--search[b-lj2il2g2kx] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 44px;
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 360px;
    padding: 0 12px;
    background-color: var(--tpi-field-background-color, #F9FAFB);
    border: 1px solid var(--tpi-field-border-color, #E7E7E7);
    border-radius: 12px;
    color: #AEB2C1;
    box-sizing: border-box;
}

.amock-toolbar__pill--search[b-lj2il2g2kx]  .rz-textbox {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: 100%;
    width: 100%;
    flex: 1;
    color: #1d1d1d;
}

.amock-toolbar__pill--search[b-lj2il2g2kx]  .rzi {
    color: #AEB2C1;
    font-size: 18px;
}
/* /Pages/Demo/ArticlesMockup/CreateArticleTypeDialog.razor.rz.scp.css */
.catdlg__backdrop[b-1lp4j8rke6] {
    position: fixed;
    inset: 0;
    background-color: rgba(20, 22, 28, 0.55);
    z-index: 1000;
    display: grid;
    place-items: center;
}

.catdlg[b-1lp4j8rke6] {
    position: relative;
    background-color: #fff;
    width: min(420px, 90vw);
    border-radius: 16px;
    padding: 28px 28px 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.catdlg__close[b-1lp4j8rke6] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e7e7e7;
    background-color: #fff;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #5C5C5C;
}

.catdlg__title[b-1lp4j8rke6] {
    margin: 4px 0 18px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.catdlg__field[b-1lp4j8rke6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.catdlg__field label[b-1lp4j8rke6] {
    font-size: 12px;
    font-weight: 600;
    color: #5C5C5C;
}

.catdlg__checks[b-1lp4j8rke6] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    padding: 14px 0;
    margin-bottom: 18px;
}

.catdlg__actions[b-1lp4j8rke6] {
    display: flex;
    gap: 12px;
}
/* /Pages/Demo/ArticlesMockup/GrapesEditor.razor.rz.scp.css */
.grapes-editor[b-0iseedoev7] {
    width: 100%;
    border: 1px solid #E7E7E7;
    border-radius: 8px;
    overflow: hidden;
    background-color: #1f1f24;
    container-type: inline-size;
}

.grapes-editor__host[b-0iseedoev7] {
    width: 100%;
    min-width: 0;
}

/* GrapesJS internal classes — make the chrome blend with our card. */
.grapes-editor[b-0iseedoev7]  .gjs-editor {
    border-radius: 8px;
}

/* Right sidebar: keep GrapesJS's native width (~230px) so the canvas auto-fits
   the remaining space. We only theme it, no width override. */
.grapes-editor[b-0iseedoev7]  .gjs-pn-views-container {
    overflow-y: auto;
    background-color: #444;
    color: #fff;
}

/* Blocks panel: 2 columns by default, collapse to 1 column on narrow editors. */
.grapes-editor[b-0iseedoev7]  .gjs-blocks-c {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    box-sizing: border-box;
}

.grapes-editor[b-0iseedoev7]  .gjs-block {
    width: 100% !important;
    min-width: 0;
    min-height: 78px;
    border-radius: 6px;
    color: #fff;
    background-color: #3b3b3b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    cursor: grab;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

.grapes-editor[b-0iseedoev7]  .gjs-block:hover {
    background-color: #4a4a4a;
}

.grapes-editor[b-0iseedoev7]  .gjs-block svg {
    color: #fff;
    max-width: 100%;
    height: auto;
}

.grapes-editor[b-0iseedoev7]  .gjs-block-label {
    font-size: 11px;
    margin-top: 6px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.grapes-editor[b-0iseedoev7]  .gjs-block-category {
    width: 100%;
}

.grapes-editor[b-0iseedoev7]  .gjs-block-category .gjs-title {
    color: #fff;
    font-weight: 600;
    padding: 8px 10px;
    background-color: #333;
}

/* Canvas: never overflow horizontally, and keep its frame fluid. */
.grapes-editor[b-0iseedoev7]  .gjs-cv-canvas,
.grapes-editor[b-0iseedoev7]  .gjs-frame-wrapper,
.grapes-editor[b-0iseedoev7]  .gjs-frame {
    max-width: 100%;
}

/* Container queries: when the editor itself is narrow, drop the blocks panel
   to a single column so tiles don't get clipped. */
@container (max-width: 720px) {
    .grapes-editor[b-0iseedoev7]  .gjs-blocks-c {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Demo/ArticlesMockup/MockupChrome.razor.rz.scp.css */
.articles-mockup-chrome[b-pabx6awr2g] {
    display: flex;
    min-height: 100vh;
    background-color: #fafbfc;
    font-family: 'Lato', sans-serif;
    color: #1d1d1d;
}

/* ---------------------------------------------------------- Sidebar */
.amock-sidebar[b-pabx6awr2g] {
    width: 240px;
    flex: 0 0 240px;
    background-color: #fff;
    border-right: 1px solid #ececec;
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 0 0 1px transparent;
}

.amock-sidebar__logo[b-pabx6awr2g] {
    height: 116px;
    background-image: url('/images/tpi-background.png');
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
}

.amock-sidebar__logo img[b-pabx6awr2g] {
    max-height: 64px;
    max-width: 80%;
}

.amock-sidebar__nav[b-pabx6awr2g] {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.amock-sidebar__group-title[b-pabx6awr2g] {
    padding: 12px 24px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #b5b7c0;
    text-transform: uppercase;
}

.amock-sidebar__nav ul[b-pabx6awr2g] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.amock-sidebar__nav li[b-pabx6awr2g] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    font-size: 14px;
    color: #5C5C5C;
    cursor: default;
    position: relative;
}

.amock-sidebar__nav li.is-active[b-pabx6awr2g] {
    color: #000;
    font-weight: 600;
    background-color: #F8F9F9;
}

.amock-sidebar__nav li.is-active[b-pabx6awr2g]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    height: 76%;
    width: 4px;
    background-color: #000;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.amock-icon[b-pabx6awr2g] {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    color: #737791;
    font-family: 'tpi';
    font-size: 18px;
    font-style: normal;
}

.amock-icon[data-icon][b-pabx6awr2g]::before {
    content: attr(data-icon);
}

.amock-sidebar__nav li.is-active .amock-icon[b-pabx6awr2g] {
    color: #000;
}

.amock-sidebar__footer[b-pabx6awr2g] {
    background-color: #282828;
    color: #fff;
    font-size: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------------------------------------------------------- Main */
.amock-main[b-pabx6awr2g] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.amock-topbar[b-pabx6awr2g] {
    height: 116px;
    background-color: #fff;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
}

.amock-topbar__user[b-pabx6awr2g] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.amock-avatar[b-pabx6awr2g] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1d1d1d;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.amock-user-info[b-pabx6awr2g] {
    display: flex;
    flex-direction: column;
}

.amock-user-info strong[b-pabx6awr2g] {
    font-weight: 800;
    font-size: 16px;
}

.amock-user-info span[b-pabx6awr2g] {
    color: #737791;
    font-size: 13px;
}

.amock-divider[b-pabx6awr2g] {
    width: 1px;
    height: 32px;
    background-color: #c9ccd6;
}

.amock-property[b-pabx6awr2g] {
    font-weight: 900;
    font-size: 24px;
    margin: 0;
}

.amock-topbar__actions[b-pabx6awr2g] {
    display: flex;
    gap: 12px;
}

.amock-btn[b-pabx6awr2g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #d8d9e0;
    background-color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #1d1d1d;
}

.amock-btn--ghost:hover[b-pabx6awr2g] {
    background-color: #f4f5f7;
}

.amock-btn-icon[b-pabx6awr2g] {
    font-size: 14px;
}

.amock-content[b-pabx6awr2g] {
    flex: 1;
    padding: 24px 32px;
    min-width: 0;
}
/* /Pages/Demo/ArticlesMockup/Option1MasterMasterDetail.razor.rz.scp.css */
.opt1-panel[b-ji9n5ywjcu] {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 19, 28, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.opt1-grid[b-ji9n5ywjcu] {
    display: grid;
    grid-template-columns: 220px 220px 1fr;
    flex: 1;
    min-height: 0;
}

.opt1-col[b-ji9n5ywjcu] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ececec;
    min-width: 0;
}

.opt1-col:last-child[b-ji9n5ywjcu] {
    border-right: none;
}

.opt1-col--editor[b-ji9n5ywjcu] {
    background-color: #fff;
    padding: 1.25rem 1.5rem;
}

.opt1-col__head[b-ji9n5ywjcu] {
    padding: 0.875rem 1.125rem;
    font-size: 12px;
    font-weight: 700;
    color: #B5B7C0;
    border-bottom: 1px solid #ececec;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.opt1-list[b-ji9n5ywjcu] {
    list-style: none;
    margin: 0;
    padding: 0.375rem 0;
    flex: 1;
    overflow-y: auto;
}

.opt1-list li[b-ji9n5ywjcu] {
    padding: 0.625rem 1.125rem;
    font-size: 14px;
    color: #5C5C5C;
    cursor: pointer;
}

.opt1-list li.is-active[b-ji9n5ywjcu] {
    background-color: #F4F5F7;
    color: #1d1d1d;
    font-weight: 700;
}

.opt1-list li:hover:not(.is-active)[b-ji9n5ywjcu] {
    background-color: #f8f9fb;
}

.opt1-list__new-item[b-ji9n5ywjcu] {
    font-style: italic;
}

.opt1-col__footer[b-ji9n5ywjcu] {
    padding: 0.75rem 1rem;
    border-top: 1px solid #ececec;
    display: flex;
    justify-content: center;
}

@media (max-width: 1180px) {
    .opt1-grid[b-ji9n5ywjcu] {
        grid-template-columns: 200px 200px 1fr;
    }
}
/* /Pages/Demo/ArticlesMockup/Option2TypeFirstGrid.razor.rz.scp.css */
.opt2-panel[b-dfo1xgzak7] {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 19, 28, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.opt2-grid-wrap[b-dfo1xgzak7] {
    padding: 0.5rem 0;
}

[b-dfo1xgzak7] .grid-action {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 8px;
}
/* /Pages/Demo/ArticlesMockup/Option3ExpandableGrid.razor.rz.scp.css */
.opt3-panel[b-rw5dxlgax0] {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 19, 28, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.opt3-panel[b-rw5dxlgax0]  > .amock-toolbar {
    border-bottom: 1px solid #ececec;
}

.opt3-body[b-rw5dxlgax0] {
    display: grid;
    grid-template-columns: minmax(420px, 520px) 1fr;
    align-items: start;
    min-height: 0;
}

.opt3-accordion[b-rw5dxlgax0] {
    border-right: 1px solid #ececec;
    background-color: transparent;
    overflow: visible;
}

.opt3-section[b-rw5dxlgax0] {
    border-bottom: 1px solid #ececec;
}

.opt3-section:last-child[b-rw5dxlgax0] {
    border-bottom: none;
}

.opt3-section__head[b-rw5dxlgax0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
}

.opt3-section__head:hover[b-rw5dxlgax0] {
    background-color: #fafbfc;
}

[b-rw5dxlgax0] .opt3-section__chev {
    color: #5C5C5C;
    font-size: 22px;
}

.opt3-section__title[b-rw5dxlgax0] {
    flex: 1;
    color: #1d1d1d;
    font-size: 14px;
}

.opt3-section__count[b-rw5dxlgax0] {
    color: #B5B7C0;
    font-size: 12px;
    font-weight: 600;
    background-color: #f4f5f7;
    padding: 2px 8px;
    border-radius: 999px;
}

.opt3-section__add[b-rw5dxlgax0] {
    margin-left: auto;
}

[b-rw5dxlgax0] .opt3-section__add .rz-button {
    min-height: 0;
    height: 28px;
    padding-top: 4px;
    padding-bottom: 4px;
    line-height: 1;
}

[b-rw5dxlgax0] .opt3-section__add .rz-button .rzi {
    font-size: 16px;
}

.opt3-section.is-expanded .opt3-section__head[b-rw5dxlgax0] {
    /* No divider here — the expanded grid below floats on top of the
       accordion as its own card, so a hard bottom border would clash. */
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.opt3-section__grid[b-rw5dxlgax0] {
    margin: 0 1rem 1.25rem;
    padding: 0;
    background-color: #F9FAFB;
    border: 1px solid #ECEEF0;
    border-radius: 12px;
    box-shadow:
        0 6px 14px rgba(15, 19, 28, 0.06),
        0 1px 2px rgba(15, 19, 28, 0.04);
    overflow: hidden;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-data-grid {
    background-color: transparent;
    border: none;
    border-radius: 12px;
    box-shadow: none;
}

[b-rw5dxlgax0] .opt3-section__grid .tpi-search-grid,
[b-rw5dxlgax0] .opt3-section__grid .tpi-search-grid__grid {
    background-color: transparent;
    border-radius: 12px;
    box-shadow: none;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table thead th,
[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table thead .rz-column-title,
[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table thead tr {
    background-color: #F9FAFB;
    border-bottom: 1px solid transparent;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table tbody tr,
[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table tbody tr td,
[b-rw5dxlgax0] .opt3-section__grid .rz-data-row,
[b-rw5dxlgax0] .opt3-section__grid .rz-data-row td,
[b-rw5dxlgax0] .opt3-section__grid .rz-selectable tbody tr.rz-data-row td.rz-frozen-cell-left-inner:before {
    background-color: #F9FAFB;
    border: none;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(odd) > td,
[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: #F9FAFB;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-grid-table td {
    border-bottom: none;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-data-row:hover,
[b-rw5dxlgax0] .opt3-section__grid .rz-data-row:hover td {
    background-color: #EEF1F4;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-data-row[data-opt3-selected="true"],
[b-rw5dxlgax0] .opt3-section__grid .rz-data-row[data-opt3-selected="true"] td,
[b-rw5dxlgax0] .opt3-section__grid .rz-data-row[data-opt3-selected="true"] td.rz-frozen-cell-left-inner:before {
    background-color: #E4E8EC !important;
    font-weight: 600;
}

[b-rw5dxlgax0] .opt3-section__grid .rz-data-row.rz-state-highlight,
[b-rw5dxlgax0] .opt3-section__grid .rz-data-row.rz-state-highlight td {
    background-color: rgba(15, 19, 28, 0.05);
}

[b-rw5dxlgax0] .opt3-section__grid .grid-action,
[b-rw5dxlgax0] .opt3-section__grid .rz-button.rz-button-icon-only {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 999px;
    border: 1px solid #E0E2E7;
    background-color: #fff;
    box-shadow: none;
    padding: 0;
}

[b-rw5dxlgax0] .opt3-section__grid .grid-action:hover,
[b-rw5dxlgax0] .opt3-section__grid .rz-button.rz-button-icon-only:hover {
    background-color: #fafbfc;
    border-color: #cfd2d8;
}

[b-rw5dxlgax0] .opt3-section__grid .grid-action .rzi,
[b-rw5dxlgax0] .opt3-section__grid .rz-button.rz-button-icon-only .rzi {
    font-size: 18px;
    color: #5C5C5C;
}

.opt3-editor[b-rw5dxlgax0] {
    padding: 1.25rem 1.5rem;
}

@media (max-width: 1100px) {
    .opt3-body[b-rw5dxlgax0] {
        grid-template-columns: 1fr;
    }

    .opt3-accordion[b-rw5dxlgax0] {
        border-right: none;
        border-bottom: 1px solid #ececec;
    }
}
/* /Pages/Demo/HostsMockupPage.razor.rz.scp.css */
.hosts-mockup-page[b-24ezyeohx7] {
    min-height: 100vh;
    background-color: #eef0f3;
    display: flex;
    flex-direction: column;
}

.hosts-mockup-page__bar[b-24ezyeohx7] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    background-color: #1a1d24;
    color: #fff;
    flex-wrap: wrap;
}

.hosts-mockup-page__bar-info[b-24ezyeohx7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    line-height: 1.3;
}

.hosts-mockup-page__bar-info strong[b-24ezyeohx7] {
    font-size: 14px;
    letter-spacing: 0.04em;
    color: #fff;
}

.hosts-mockup-page__bar-info span[b-24ezyeohx7] {
    color: #c4c8d2;
}

.hosts-mockup-page__warn[b-24ezyeohx7] {
    color: #f8c64b !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.hosts-mockup-page__tabs[b-24ezyeohx7] {
    display: inline-flex;
    gap: 4px;
    background-color: #0f1116;
    padding: 4px;
    border-radius: 12px;
    margin: 0 auto;
}

.hosts-mockup-page__tab[b-24ezyeohx7] {
    background-color: transparent;
    border: none;
    color: #c4c8d2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    position: relative;
}

.hosts-mockup-page__tab.is-active[b-24ezyeohx7] {
    background-color: #fff;
    color: #1d1d1d;
    font-weight: 700;
}

.hosts-mockup-page__tab-num[b-24ezyeohx7] {
    font-size: 11px;
    font-weight: 700;
    background-color: #2a2d34;
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px;
}

.hosts-mockup-page__tab.is-active .hosts-mockup-page__tab-num[b-24ezyeohx7] {
    background-color: #1d1d1d;
}

.hosts-mockup-page__badge[b-24ezyeohx7] {
    background-color: #21a366;
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hosts-mockup-page__bar-actions[b-24ezyeohx7] {
    margin-left: auto;
    display: flex;
    gap: 8px;
}
/* /Pages/Demo/HostsMockup/DeleteHostConfirmDialog.razor.rz.scp.css */
.host-delete-dialog[b-x2yqo1xmnu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    max-width: 460px;
}

.host-delete-dialog__icon[b-x2yqo1xmnu] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fdecea;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0392b;
    font-size: 32px;
}

.host-delete-dialog__title[b-x2yqo1xmnu] {
    margin: 0;
    font-size: 18px;
    color: #1a1a1a;
}

.host-delete-dialog__message[b-x2yqo1xmnu] {
    margin: 0;
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.5;
}

.host-delete-dialog__type-confirm[b-x2yqo1xmnu] {
    width: 100%;
    background: #fff8e6;
    border: 1px solid #f1d96b;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    color: #6b4f00;
    text-align: left;
    margin-top: 4px;
}

.host-delete-dialog__actions[b-x2yqo1xmnu] {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
    justify-content: center;
}
/* /Pages/Demo/HostsMockup/HostCardPreview.razor.rz.scp.css */
.host-card[b-sfy8tfixhu] {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e1e2e3;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    font-family: inherit;
    container-type: inline-size;
    container-name: hostcard;
}

.host-card__header[b-sfy8tfixhu] {
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 70%, #b18a3a 100%);
    padding: 16px 24px;
    color: #ffffff;
}

.host-card__title[b-sfy8tfixhu] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.host-card__body[b-sfy8tfixhu] {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) 1.4fr;
    grid-template-rows: auto auto;
    column-gap: 32px;
    row-gap: 20px;
    padding: 28px 32px;
    align-items: center;
}

.host-card__identity[b-sfy8tfixhu] {
    display: flex;
    align-items: center;
    gap: 18px;
    grid-row: span 2;
}

.host-card__avatar[b-sfy8tfixhu] {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #e8e6e1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.host-card__avatar img[b-sfy8tfixhu] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.host-card__avatar-initials[b-sfy8tfixhu] {
    font-size: 26px;
    font-weight: 600;
    color: #8a8073;
}

.host-card__identity-text[b-sfy8tfixhu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.host-card__name[b-sfy8tfixhu] {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.host-card__role[b-sfy8tfixhu] {
    font-size: 15px;
    color: #4a4a4a;
}

.host-card__contact[b-sfy8tfixhu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.host-card__contact-block[b-sfy8tfixhu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.host-card__contact-label[b-sfy8tfixhu] {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}

.host-card__contact-value[b-sfy8tfixhu] {
    font-size: 14px;
    color: #b18a3a;
    text-decoration: underline;
    word-break: break-word;
}

.host-card__contact-value--muted[b-sfy8tfixhu] {
    color: #9a9a9a;
    text-decoration: none;
    font-style: italic;
}

.host-card__actions[b-sfy8tfixhu] {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.host-card__action[b-sfy8tfixhu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #b18a3a;
    color: #ffffff !important;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: background 120ms ease;
}

.host-card__action:hover[b-sfy8tfixhu] {
    background: #9a772f;
}

.host-card__action--disabled[b-sfy8tfixhu] {
    background: #d6cdb8;
    cursor: not-allowed;
    pointer-events: none;
}

.host-card__action[b-sfy8tfixhu]  .host-card__action-icon {
    font-size: 18px;
    color: #ffffff !important;
    line-height: 1;
}

.host-card__inactive-banner[b-sfy8tfixhu] {
    grid-column: 1 / -1;
    background: #fff4d6;
    color: #6b4f00;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

/* Adapt to the card's OWN width (works in the narrow Portal Mirror gallery
   and the master-detail / editor preview panes alike). The two-column layout
   needs ~620px to render without clipping, so stack until then. */
@container hostcard (max-width: 640px) {
    .host-card__body[b-sfy8tfixhu] {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 16px;
        padding: 20px;
    }

    .host-card__identity[b-sfy8tfixhu] {
        grid-row: auto;
        gap: 14px;
    }

    .host-card__avatar[b-sfy8tfixhu] {
        width: 60px;
        height: 60px;
    }

    .host-card__avatar-initials[b-sfy8tfixhu] {
        font-size: 20px;
    }

    .host-card__contact[b-sfy8tfixhu] {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .host-card__actions[b-sfy8tfixhu] {
        grid-column: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .host-card__action[b-sfy8tfixhu] {
        flex: 1 1 84px;
        padding: 10px 8px;
        letter-spacing: 0.04em;
    }
}

@container hostcard (max-width: 320px) {
    .host-card__contact[b-sfy8tfixhu] {
        grid-template-columns: 1fr;
    }
}

/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
    @media (max-width: 700px) {
        .host-card__body[b-sfy8tfixhu] {
            grid-template-columns: 1fr;
        }

        .host-card__identity[b-sfy8tfixhu] {
            grid-row: auto;
        }

        .host-card__contact[b-sfy8tfixhu] {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .host-card__actions[b-sfy8tfixhu] {
            grid-column: 1;
        }
    }
}
/* /Pages/Demo/HostsMockup/HostEditorForm.razor.rz.scp.css */
.host-editor[b-cmniqzq76i] {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
}

.host-editor__topbar[b-cmniqzq76i] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
    flex-wrap: wrap;
}

.host-editor__topbar-title[b-cmniqzq76i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.host-editor__topbar-title strong[b-cmniqzq76i] {
    font-size: 16px;
    color: #1a1a1a;
}

.host-editor__topbar-title span[b-cmniqzq76i] {
    font-size: 12px;
    color: #6a6a6a;
}

.host-editor__topbar-actions[b-cmniqzq76i] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.host-editor__split[b-cmniqzq76i] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    align-items: start;
}

.host-editor__preview[b-cmniqzq76i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 16px;
}

.host-editor__preview-label[b-cmniqzq76i] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a6a6a;
}

@media (max-width: 900px) {
    .host-editor__split[b-cmniqzq76i] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Demo/HostsMockup/HostFormFields.razor.rz.scp.css */
.host-form[b-9b3dbsdl3f] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.host-form__avatar-row[b-9b3dbsdl3f] {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    align-items: center;
}

.host-form__avatar-preview[b-9b3dbsdl3f] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #f1efe9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed #d1cfc8;
}

.host-form__avatar-preview img[b-9b3dbsdl3f] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.host-form__avatar-initials[b-9b3dbsdl3f] {
    font-size: 28px;
    font-weight: 600;
    color: #8a8073;
}

.host-form__avatar-fields[b-9b3dbsdl3f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.host-form__hint[b-9b3dbsdl3f] {
    color: #6a6a6a;
    font-size: 12px;
}

.host-form__row[b-9b3dbsdl3f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.host-form__field[b-9b3dbsdl3f] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.host-form__field--narrow[b-9b3dbsdl3f] {
    max-width: 160px;
}

.host-form__error[b-9b3dbsdl3f] {
    color: #c0392b;
    font-size: 12px;
    margin-top: 2px;
}

.host-form__row--toggle[b-9b3dbsdl3f] {
    grid-template-columns: 1fr;
    gap: 4px;
}

@media (max-width: 720px) {
    .host-form__row[b-9b3dbsdl3f] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Demo/HostsMockup/HostsMockupOptionA.razor.rz.scp.css */
.hosts-panel[b-3n7jovrsah] {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
}

.hosts-panel__head[b-3n7jovrsah] {
    padding: 12px 16px;
}

.hosts-grid[b-3n7jovrsah] {
    padding: 0 8px 8px;
}

.hosts-grid__empty[b-3n7jovrsah] {
    padding: 48px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6a6a6a;
    border-top: 1px solid #f2f2f2;
}

.hosts-grid__empty :deep(.rzi)[b-3n7jovrsah],
.hosts-grid__empty :deep(i)[b-3n7jovrsah] {
    font-size: 36px;
    color: #b0b0b0;
}

.hosts-grid__empty p[b-3n7jovrsah] {
    margin: 2px 0 12px 0;
}

.hosts-grid__host[b-3n7jovrsah] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hosts-grid__avatar[b-3n7jovrsah] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1efe9;
    color: #8a8073;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.hosts-grid__avatar img[b-3n7jovrsah] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hosts-grid__host-text[b-3n7jovrsah] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hosts-grid__host-text strong[b-3n7jovrsah] {
    font-size: 14px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hosts-grid__host-text span[b-3n7jovrsah] {
    font-size: 12px;
    color: #6a6a6a;
}

.hosts-grid__contact[b-3n7jovrsah] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.hosts-grid__chip[b-3n7jovrsah] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eaf6ff;
    color: #0b6aa1;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid #cfe7f6;
}

.hosts-grid__chip--ghost[b-3n7jovrsah] {
    background: #f6f7f9;
    color: #4a4a4a;
    border-color: #ececec;
    padding: 4px 8px;
}

.hosts-grid__muted[b-3n7jovrsah] {
    color: #9a9a9a;
    font-style: italic;
    font-size: 12px;
}
/* /Pages/Demo/HostsMockup/HostsMockupOptionB.razor.rz.scp.css */
.hosts-gallery[b-b9hqtrkb4m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

.hosts-gallery__item[b-b9hqtrkb4m] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hosts-gallery__item-bar[b-b9hqtrkb4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hosts-gallery__order[b-b9hqtrkb4m] {
    font-size: 12px;
    font-weight: 700;
    color: #6a6a6a;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    padding: 2px 10px;
}

.hosts-gallery__item-actions[b-b9hqtrkb4m] {
    display: flex;
    gap: 6px;
}

.hosts-gallery__loading[b-b9hqtrkb4m] {
    display: flex;
    justify-content: center;
    padding: 48px;
}

.hosts-gallery__empty[b-b9hqtrkb4m] {
    background: #fff;
    border: 1px dashed #e0e0e0;
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    color: #6a6a6a;
}
/* /Pages/Demo/HostsMockup/HostsMockupOptionC.razor.rz.scp.css */
.hosts-md[b-j5n7jt2eg7] {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

/* ---------------------------------------------------------- List */
.hosts-md__list[b-j5n7jt2eg7] {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 320px);
}

.hosts-md__list-head[b-j5n7jt2eg7] {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid #ececec;
}

.hosts-md__list-head :deep(.rz-textbox)[b-j5n7jt2eg7] {
    width: 100%;
}

.hosts-md__list-items[b-j5n7jt2eg7] {
    overflow-y: auto;
}

.hosts-md__list-item[b-j5n7jt2eg7] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 1px solid #f2f2f2;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.hosts-md__list-item:hover[b-j5n7jt2eg7] {
    background: #f8f9f9;
}

.hosts-md__list-item.is-selected[b-j5n7jt2eg7] {
    background: #eef4ff;
    box-shadow: inset 3px 0 0 #2f6fed;
}

.hosts-md__list-avatar[b-j5n7jt2eg7] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1efe9;
    color: #8a8073;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.hosts-md__list-avatar img[b-j5n7jt2eg7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hosts-md__list-text[b-j5n7jt2eg7] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.hosts-md__list-text strong[b-j5n7jt2eg7] {
    font-size: 14px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hosts-md__list-text span[b-j5n7jt2eg7] {
    font-size: 12px;
    color: #6a6a6a;
}

.hosts-md__list-empty[b-j5n7jt2eg7] {
    padding: 24px;
    text-align: center;
    color: #9a9a9a;
    font-size: 13px;
}

/* ---------------------------------------------------------- Detail */
.hosts-md__detail[b-j5n7jt2eg7] {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    min-height: 400px;
}

.hosts-md__placeholder[b-j5n7jt2eg7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 80px 24px;
    color: #9a9a9a;
    text-align: center;
}

.hosts-md__placeholder :deep(.rzi)[b-j5n7jt2eg7],
.hosts-md__placeholder :deep(i)[b-j5n7jt2eg7] {
    font-size: 40px;
    color: #c0c0c0;
}

.hosts-md__detail-head[b-j5n7jt2eg7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #ececec;
    flex-wrap: wrap;
}

.hosts-md__detail-head strong[b-j5n7jt2eg7] {
    display: block;
    font-size: 16px;
    color: #1a1a1a;
}

.hosts-md__detail-head span[b-j5n7jt2eg7] {
    font-size: 12px;
    color: #6a6a6a;
}

.hosts-md__detail-actions[b-j5n7jt2eg7] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hosts-md__detail-body[b-j5n7jt2eg7] {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    align-items: start;
}

.hosts-md__detail-preview[b-j5n7jt2eg7] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: sticky;
    top: 16px;
}

.hosts-md__preview-label[b-j5n7jt2eg7] {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6a6a6a;
}

@media (max-width: 1100px) {
    .hosts-md[b-j5n7jt2eg7] {
        grid-template-columns: 1fr;
    }

    .hosts-md__list[b-j5n7jt2eg7] {
        max-height: 360px;
    }

    .hosts-md__detail-body[b-j5n7jt2eg7] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Demo/HostsMockup/HostsToolbar.razor.rz.scp.css */
.hosts-toolbar[b-l1ua3d6riv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.hosts-toolbar--flat[b-l1ua3d6riv] {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

.hosts-toolbar__filters[b-l1ua3d6riv] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hosts-toolbar__pill[b-l1ua3d6riv] {
    display: flex;
    align-items: center;
}

.hosts-toolbar__search[b-l1ua3d6riv] {
    min-width: 320px;
    flex: 1 1 320px;
    max-width: 420px;
}

.hosts-toolbar__actions[b-l1ua3d6riv] {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* /Pages/Demo/HostsMockup/MockupChrome.razor.rz.scp.css */
.hosts-mock-chrome[b-5j8dumpjfx] {
    display: flex;
    min-height: 100%;
    background-color: #fafbfc;
    font-family: 'Lato', sans-serif;
    color: #1d1d1d;
}

/* ---------------------------------------------------------- Sidebar */
.hmock-sidebar[b-5j8dumpjfx] {
    width: 240px;
    flex: 0 0 240px;
    background-color: #fff;
    border-right: 1px solid #ececec;
    display: flex;
    flex-direction: column;
}

.hmock-sidebar__logo[b-5j8dumpjfx] {
    height: 116px;
    background-image: url('/images/tpi-background.png');
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
}

.hmock-sidebar__logo img[b-5j8dumpjfx] {
    max-height: 64px;
    max-width: 80%;
}

.hmock-sidebar__nav[b-5j8dumpjfx] {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.hmock-sidebar__group-title[b-5j8dumpjfx] {
    padding: 12px 24px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #b5b7c0;
    text-transform: uppercase;
}

.hmock-sidebar__nav ul[b-5j8dumpjfx] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hmock-sidebar__nav li[b-5j8dumpjfx] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 24px;
    font-size: 14px;
    color: #5C5C5C;
    cursor: default;
    position: relative;
}

.hmock-sidebar__nav li.is-active[b-5j8dumpjfx] {
    color: #000;
    font-weight: 600;
    background-color: #F8F9F9;
}

.hmock-sidebar__nav li.is-active[b-5j8dumpjfx]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12%;
    height: 76%;
    width: 4px;
    background-color: #000;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.hmock-icon[b-5j8dumpjfx] {
    color: #737791;
    font-size: 18px;
}

.hmock-sidebar__nav li.is-active .hmock-icon[b-5j8dumpjfx] {
    color: #000;
}

.hmock-sidebar__footer[b-5j8dumpjfx] {
    background-color: #282828;
    color: #fff;
    font-size: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ---------------------------------------------------------- Main */
.hmock-main[b-5j8dumpjfx] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hmock-topbar[b-5j8dumpjfx] {
    height: 116px;
    background-color: #fff;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;
}

.hmock-topbar__user[b-5j8dumpjfx] {
    display: flex;
    align-items: center;
    gap: 24px;
}

.hmock-avatar[b-5j8dumpjfx] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #1d1d1d;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.hmock-user-info[b-5j8dumpjfx] {
    display: flex;
    flex-direction: column;
}

.hmock-user-info strong[b-5j8dumpjfx] {
    font-weight: 800;
    font-size: 16px;
}

.hmock-user-info span[b-5j8dumpjfx] {
    color: #737791;
    font-size: 13px;
}

.hmock-divider[b-5j8dumpjfx] {
    width: 1px;
    height: 32px;
    background-color: #c9ccd6;
}

.hmock-property[b-5j8dumpjfx] {
    font-weight: 900;
    font-size: 24px;
    margin: 0;
}

.hmock-topbar__actions[b-5j8dumpjfx] {
    display: flex;
    gap: 12px;
}

.hmock-btn[b-5j8dumpjfx] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #d8d9e0;
    background-color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #1d1d1d;
}

.hmock-btn:hover[b-5j8dumpjfx] {
    background-color: #f4f5f7;
}

.hmock-content[b-5j8dumpjfx] {
    flex: 1;
    padding: 24px 32px;
    min-width: 0;
}
/* /Pages/Index.razor.rz.scp.css */
/* General styling for metric cards */
.metric-card[b-4vquah89ud] {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border: none;
    background-color: #fff;
}

    .metric-card .card-body[b-4vquah89ud] {
        padding: 20px;
    }

/* Card header styling */
.card-header[b-4vquah89ud] {
    font-size: 14px;
    font-weight: 500;
    color: #666;
}

/* Main value styling in the first row of cards */
.card-title[b-4vquah89ud] {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 5px;
}

/* Subtext styling in the first row of cards */
.card-text[b-4vquah89ud] {
    font-size: 14px;
    font-weight: 400;
    color: #999;
    margin-bottom: 5px;
}

/* Styling for small chart cards in the second row */
.metric-card .card-body small.text-muted[b-4vquah89ud] {
    font-size: 14px;
    font-weight: 500;
    color: #999;
}

.metric-card .card-body h2[b-4vquah89ud] {
    font-size: 28px;
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 12px;
}

/* Container for the small chart */
.chart-container-small[b-4vquah89ud] {
    height: 80px;
    overflow: hidden;
}

/* Styling for the chart card container in the right column */
.chart-card[b-4vquah89ud] {
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

/* Styling for the chart header in the right column */
.chart-header[b-4vquah89ud] {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

/* Styling for table card containers */
.table-card[b-4vquah89ud] {
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

/* Section titles for tables */
.section-title[b-4vquah89ud] {
    font-size: 16px;
    font-weight: 600;
    margin: 5px 0;
}

/*
  Force-hide any legend if it appears for some reason.
  This targets the standard Radzen chart legend class.
*/
.rz-chart-legend[b-4vquah89ud] {
    display: none !important;
}