/* /Components/Index.razor.rz.scp.css */
[b-9u4esi7bl8] .category {
    background-color: rgba(16, 16, 16, 0.6);
    padding: 16px 19px;
    margin: 0 2.5px;
    width: 100%;
    min-height: 160px;
    background-image: var(--bg-image);
    color: var(--mud-palette-primary-text) !important;
}

[b-9u4esi7bl8] .hover-block {
    background-repeat: no-repeat;
    background-position: bottom right;
    border-radius: 10px;
    display: block;
    transition: .2s linear;
    position: relative;
    overflow: hidden;
}

[b-9u4esi7bl8] .post {
    display: flex;
    flex-direction: column;
    height: 256px;
    color: var(--mud-palette-primary-text) !important;
    background:
    /* Color overlay with gradient */
    linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)),
    /* Background image */
    var(--bg-image);
    background-size: cover;
    background-position: center;
}

    [b-9u4esi7bl8] .post .post-content {
        margin-top: auto;
        padding: 16px;
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* /Components/Pages/Classes/Components/ClassesWithSkillComponent.razor.rz.scp.css */
[b-gecdtkzhpf] .mud-list-item-icon {
    min-width: 30px
}
/* /Components/Pages/Classes/Components/RaceClassTree.razor.rz.scp.css */
/* ── Tree wrapper ──
   text-align: center centers the inline-flex tree when it fits;
   overflow-x: auto allows scrolling on mobile without clipping the left side.
   Scrollbar is hidden visually but touch/swipe scroll still works. */
.class-tree-wrapper[b-xetoxobhdh] {
    overflow-x: auto;
    padding: 24px 16px;
    text-align: center;
    scrollbar-width: none;
}

.class-tree-wrapper[b-xetoxobhdh]::-webkit-scrollbar {
    display: none;
}

/* ── Reset and base layout ── */
.class-tree[b-xetoxobhdh],
.class-tree ul[b-xetoxobhdh] {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.class-tree[b-xetoxobhdh] {
    display: inline-flex;
}

.class-tree ul[b-xetoxobhdh] {
    display: flex;
    padding-top: 50px;
}

/* ── Each <li> is a vertical column ── */
.class-tree li[b-xetoxobhdh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 0 6px;
}

/* ── Node button styling ── */
[b-xetoxobhdh] .class-tree-node {
    min-width: 170px;
    min-height: 50px;
    padding: 12px 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1;
    position: relative;
}

/* ── Vertical line from parent node down to horizontal rail ── */
.class-tree li > ul[b-xetoxobhdh]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 25px;
    border-left: 1px dashed gray;
}

/* ── Child connectors ──
   ::before = left half of horizontal rail + vertical drop to node
   ::after  = right half of horizontal rail */
.class-tree ul > li[b-xetoxobhdh]::before,
.class-tree ul > li[b-xetoxobhdh]::after {
    content: "";
    position: absolute;
    top: -25px;
    height: 25px;
}

.class-tree ul > li[b-xetoxobhdh]::before {
    right: 50%;
    left: 0;
    border-top: 1px dashed gray;
    border-right: 1px dashed gray;
}

.class-tree ul > li[b-xetoxobhdh]::after {
    left: 50%;
    right: 0;
    border-top: 1px dashed gray;
}

/* First child: no left rail segment */
.class-tree ul > li:first-child[b-xetoxobhdh]::before {
    border-top: none;
}

/* Last child: no right rail segment */
.class-tree ul > li:last-child[b-xetoxobhdh]::after {
    border-top: none;
}

/* Only child: parent ul::before draws the full vertical as one continuous
   dashed line so there is no dash-pattern break at the seam. */
.class-tree li > ul:has(> li:only-child)[b-xetoxobhdh]::before {
    height: 50px;
}

.class-tree ul > li:only-child[b-xetoxobhdh]::before,
.class-tree ul > li:only-child[b-xetoxobhdh]::after {
    display: none;
}

/* Root nodes: no connectors */
.class-tree > li[b-xetoxobhdh]::before,
.class-tree > li[b-xetoxobhdh]::after {
    display: none;
}

/* ── Circle decorator at the top of each child node ── */
.class-tree-dot[b-xetoxobhdh] {
    position: absolute;
    top: -4px;
    width: 8px;
    height: 8px;
    background: gray;
    border-radius: 50%;
    z-index: 2;
}

.class-tree > li > .class-tree-dot[b-xetoxobhdh] {
    display: none;
}
/* /Components/Pages/Items/Components/ItemDetails.razor.rz.scp.css */
[b-dmcou9yc35] .mud-list-item-icon {
    min-width: 30px
}
/* /Components/Pages/Npcs/Components/NpcLocation.razor.rz.scp.css */
.map-container[b-a188p84z2z] {
    border: 4px solid #292624;
    border-radius: 0 3px 3px;
    max-width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

/*@media screen and (min-width: 769px) {
    .map-container {
        width: 400px;
    }
}*/
/* /Components/Pages/Skills/Components/SkillDetails.razor.rz.scp.css */
[b-2p65dx4ioh] .mud-list-item-icon {
    min-width: 30px
}
/* /Components/Shared/DetailsList.razor.rz.scp.css */
[b-983um7b8c6] .mud-list-item-icon {
    min-width: auto;
    margin-top: 4px;
}
/* /Components/Shared/ElementCard.razor.rz.scp.css */
[b-v0nj3cnpqa] .mud-card-header-avatar:empty {
    margin: 0;
}

[b-v0nj3cnpqa] .mud-paper {
    background-color: transparent;
}

.card-container[b-v0nj3cnpqa] {
    width: 100%;
}
/* /Components/Shared/LoadingComponent.razor.rz.scp.css */
.loading-progress[b-51u0p0bme8] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2000;
}