@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css';
@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/MasterDataAssembly/MasterDataAssembly.hk3b6m6435.bundle.scp.css';
@import '_content/PenerimaanBarangAssembly/PenerimaanBarangAssembly.lu9537ahaz.bundle.scp.css';
@import '_content/ServiceProxies/ServiceProxies.9maa5co296.bundle.scp.css';
@import '_content/SharedComponent/SharedComponent.qtgvxwcaio.bundle.scp.css';
@import '_content/UserManagementAssembly/UserManagementAssembly.8vohm8upc8.bundle.scp.css';

/* /Layout/InstallPwaBanner.razor.rz.scp.css */

.pwa-install-banner[b-2rnjhrn4tf] {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 999;
}
.pwa-install-banner .wrapper[b-2rnjhrn4tf] {
    display: flex;
    flex-direction: column;
    max-width: 285px;
    background-color: var(--white);
    border: 1px solid var(--line);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    transform-origin: right bottom;
    transform: scale(0);
    animation: showPWA-b-2rnjhrn4tf .5s ease forwards;
    animation-delay: 3s;
    overflow: hidden;
}
@keyframes showPWA-b-2rnjhrn4tf {
    to {
        transform: scale(1);
    }
}

.pwa-install-banner .image[b-2rnjhrn4tf] {
    position: relative;
    text-align: center;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, var(--primary-hover-trans) 75%, transparent)
    }
}
.pwa-install-banner .image img[b-2rnjhrn4tf] {
    width: 90%;
    height: auto;
}

.pwa-install-banner .text[b-2rnjhrn4tf] {
    color: var(--black);
    padding: .75rem 1.25rem 1.25rem 1.25rem;
    user-select: none;

    p {
        margin-bottom: 0;
        
        &:first-child {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: .25rem;
        }
        &:last-child[b-2rnjhrn4tf] {
            font-size: 1rem;
            font-weight: 400;
        }
    }
}

.pwa-install-banner .aksi[b-2rnjhrn4tf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: .5rem;
    padding: 0 1.25rem 1.25rem 1.25rem;

    .btn {
        padding: .5rem 1rem;
    }
    .btn:first-child[b-2rnjhrn4tf] {
        flex: 1;
    }
}


/*HP*/
@media (max-width: 767px) {
    .pwa-install-banner[b-2rnjhrn4tf] {
        left: 0;
        right: 0;
        bottom: 0;
    }
    .pwa-install-banner .wrapper[b-2rnjhrn4tf] {
        max-width: 100%;
        border: none;
        border-radius: 2rem 2rem 0 0;
        box-shadow: -5px 0 20px rgba(0,0,0,.25);
        transform-origin: bottom;
        transform: scale(1) translateY(101%);
    }
    @keyframes showPWA-b-2rnjhrn4tf {
        to {
            transform: scale(1) translateY(0);
        }
    }

    .pwa-install-banner .image img[b-2rnjhrn4tf] {
        width: 75%;
    }
    .pwa-install-banner .text[b-2rnjhrn4tf] {
        text-align: center;
        padding: .75rem 1.5rem 1.75rem 1.5rem;
    }
    .pwa-install-banner .aksi[b-2rnjhrn4tf] {
        gap: .75rem;
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */

.page[b-ff3497wjks] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--soft-grey);
    overflow: hidden;
}
main[b-ff3497wjks] {
    flex: 1;
    overflow: hidden auto;
}
.sidebar[b-ff3497wjks] {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .75rem 1.5rem;
    background-color: var(--white);
    box-shadow: 0 3px 5px #00000010;
    transition: var(--anim);
    isolation: isolate;
    z-index: 1;
}



/* ====================== HP ====================== */
@media (max-width: 767px) {
    .page[b-ff3497wjks] {
        flex-direction: column-reverse;
    }
    .sidebar[b-ff3497wjks] {
        position: unset;
        gap: 0;
        height: 60px;
        padding: 0;
        box-shadow: 0 -3px 5px #00000010;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */

/*#region ######## NAV BRAND*/
    .nav-brand[b-6oly61uard] {
        display: flex;
        align-items: center;
        gap: .5rem;
        transition: var(--anim);
    }
    .nav-brand svg[b-6oly61uard] {
        color: var(--primary);
        min-width: 36px;
        width: 36px;
        height: 36px;
    }
/*#endregion*/

/*#region ######## NAV MENU*/
    .nav-menu[b-6oly61uard] {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: .35rem;
    }
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link,
    .nav-menu:has(.with-sub) .head-sub[b-6oly61uard] {
        position: relative;
        display: flex;
        align-items: center;
        gap: .35rem;
        width: fit-content;
        height: 35px;
        color: var(--black);
        line-height: 1;
        text-transform: capitalize;
        padding: .25rem .75rem .25rem .75rem;
        transition: var(--anim);
        border-radius: 5rem;
        box-shadow: none;
        user-select: none;
        cursor: pointer;
        overflow: hidden;
    }
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link svg:first-child,
    .nav-menu:has(.with-sub) .head-sub svg:first-child[b-6oly61uard] {
        position: absolute;
        top: 50%;
        left: -2rem;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        transition: var(--anim);
        opacity: 0;
    }
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link span,
    .nav-menu:has(.with-sub) .head-sub span[b-6oly61uard] {
        flex: 1;
        font-size: .95rem;
        font-weight: 600;
        white-space: nowrap;
    }
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link.active,
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link.active:hover {
        color: var(--primary);
        padding: .25rem .75rem .25rem 2rem;
        background-color: var(--primary-hover-trans);
    }
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link.active {
        pointer-events: none;
    }
    .nav-menu .with-sub:has(.active) .head-sub[b-6oly61uard],
    .nav-menu:has(.with-sub) .with-sub.active .head-sub[b-6oly61uard] {
        color: var(--primary);
        padding: .25rem .5rem .25rem 2.25rem;
        background-color: var(--primary-hover-trans);
    }
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link.active svg,
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link.active:hover svg,
    .nav-menu:has(.with-sub) .with-sub.active .head-sub svg[b-6oly61uard],
    .nav-menu .with-sub:has(.active) .head-sub svg[b-6oly61uard] {
        left: .5rem;
        opacity: 1;
    }
    .nav-menu:has(:not(.list-sub))[b-6oly61uard]  .nav-link:hover,
    .nav-menu:has(.with-sub) .head-sub:hover[b-6oly61uard] {
        color: var(--primary);
    }

    .nav-menu .with-sub[b-6oly61uard] {
        position: relative;
        isolation: isolate;
    }
    .nav-menu .with-sub .head-sub svg:last-child[b-6oly61uard] {
        color: var(--black);
        width: 16px;
        height: 16px;
        transition: var(--anim);
        cursor: pointer;
    }
    .nav-menu .with-sub.active .head-sub svg:last-child[b-6oly61uard] {
        color: var(--primary);
        transform: rotateX(180deg);
    }
    .nav-menu .with-sub:hover .head-sub svg:last-child[b-6oly61uard],
    .nav-menu .with-sub:has(.active) .head-sub svg:last-child[b-6oly61uard] {
        color: var(--primary);
    }
    .nav-menu .list-sub[b-6oly61uard] {
        display: none;
        flex-direction: column;
        gap: .1rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: .5rem;
        min-width: 150px;
        padding: .5rem;
        background-color: var(--putih);
        border-radius: .5rem;
        box-shadow: 2px 4px 15px #00000030;
        z-index: 15;
    }
    body.dark .nav-menu .list-sub[b-6oly61uard] {
        background-color: hsl(from var(--hitam) h s 35);
    }

    .nav-menu .with-sub.active .list-sub[b-6oly61uard] {
        display: flex;
    }
    .nav-menu .list-sub[b-6oly61uard]  a {
        position: relative;
        color: var(--hitam);
        font-size: .85rem;
        text-transform: capitalize;
        white-space: nowrap;
        padding: .25rem .5rem;
        border-radius: .25rem;
        transition: var(--anim);
        cursor: pointer;
    }
    body.dark .nav-menu .list-sub[b-6oly61uard]  a {
        color: var(--putih);
    }
    .nav-menu .list-sub[b-6oly61uard]  a:hover,
    .nav-menu .list-sub[b-6oly61uard]  a.active {
        color: var(--putih);
        padding-left: .75rem;
        background-color: var(--primary);
    }

    .toggle-tablet[b-6oly61uard] {
        display: none;
    }
/*#endregion*/

/*#region ######## NAV PROFILE*/
    .nav-profile[b-6oly61uard]  .dropdown-toggle {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: 0;
        text-align: left;
        border: none;
        outline: none;
        box-shadow: none;
    }
    .nav-profile .dropdown-toggle div[b-6oly61uard] {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--putih);
        font-size: .85rem;
        font-weight: 700;
        width: 33px;
        aspect-ratio: 1;
        background: linear-gradient(30deg, var(--clr500), var(--clr200) 80%);
        border-radius: 50%;
    }
    .nav-profile .dropdown-toggle div[b-6oly61uard]::before {
        content: '';
        position: absolute;
        inset: -.15rem;
        border: 1px solid var(--primary);
        border-radius: 50%;
        opacity: 0;
        transition: var(--anim);
    }
    .nav-profile .dropdown-toggle.show div[b-6oly61uard]::before,
    .nav-profile .dropdown-toggle div:hover[b-6oly61uard]::before {
        opacity: 1;
    }
    .nav-profile .dropdown-toggle div span[b-6oly61uard] {
        line-height: 1;
    }

    .nav-profile[b-6oly61uard]  .dropdown-menu {
        min-width: 14rem;
        padding: .75rem;
        margin-top: .25rem !important;
        border-color: var(--line);
        border-radius: 1rem;
    }
    .nav-profile[b-6oly61uard]  .dropdown-menu .nama {
        margin-bottom: .75rem;
    }
    .nav-profile[b-6oly61uard]  .dropdown-menu .nama p:first-child {
        color: var(--black);
        font-size: .9rem;
        font-weight: 700;
        margin-bottom: 0;
    }
    .nav-profile[b-6oly61uard]  .dropdown-menu .nama p:last-child {
        color: var(--grey);
        font-size: .75rem;
        font-weight: 400;
        margin-bottom: .75rem;
    }

    .nav-profile[b-6oly61uard]  .dropdown-menu .menu {
        background-color: var(--white);
        border: 1px solid var(--line);
        border-radius: .5rem;
        overflow: hidden;
    }
    .nav-profile[b-6oly61uard]  .dropdown-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: .5rem;
        color: var(--black);
        padding: .5rem;
        border-bottom: 1px solid var(--line);
        user-select: none;
        cursor: pointer;
    }
    .nav-profile[b-6oly61uard]  li:last-of-type .dropdown-item {
        border-bottom: none;
    }
    .nav-profile[b-6oly61uard]  .dropdown-item:hover {
        color: var(--putih);
        background-color: var(--primary);
    }
    .nav-profile[b-6oly61uard]  .dropdown-item svg {
        width: 18px;
        height: 18px;
    }
    .nav-profile[b-6oly61uard]  .dropdown-item svg:last-child {
        width: 16px;
        height: 16px;
    }
    .nav-profile[b-6oly61uard]  .dropdown-item span {
        flex: 1;
        font-size: .85rem;
        font-weight: 400;
    }
    .nav-profile[b-6oly61uard]  li:last-of-type .dropdown-item {
        color: var(--red);
    }
    .nav-profile[b-6oly61uard]  li:last-of-type .dropdown-item:hover {
        color: var(--putih);
        background-color: var(--red);
    }

    .toggle-set[b-6oly61uard] {
        position: absolute;
        inset: 0;
    }
    .toggle-set label[b-6oly61uard] {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: .75rem;
        width: 100%;
        height: 100%;
        padding-right: .5rem;
        cursor: pointer;
    }
    .toggle-set[b-6oly61uard]  input {
        display: none;
    }
    .toggle-set b[b-6oly61uard] {
        --tgl-width: 26px;
        --tgl-gap: 3px;

        position: relative;
        display: block;
        width: var(--tgl-width);
        aspect-ratio: 15 / 9;
        margin: 0;
        background-color: #d4d4d4;
        border: none;
        outline: none;
        border-radius: 3rem;
        box-shadow: 0 0 5px #00000020 inset;
        transition: var(--anim);
        overflow: hidden;
    }
    .toggle-set input:checked + b[b-6oly61uard]{
        background-color: var(--green);
    }
    .toggle-set b[b-6oly61uard]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: var(--tgl-gap);
        transform: translateY(-50%);
        width: calc(var(--tgl-width) / 2 - var(--tgl-gap));
        aspect-ratio: 1;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 0 10px #00000015;
        transition: var(--anim);
    }
    .toggle-set input:checked + b[b-6oly61uard]::before {
        left: calc(var(--tgl-width) / 2 - calc(var(--tgl-gap) * .2));
    }
/*#endregion*/

/*#region ######## PATTERN */
.pattern[b-6oly61uard] {
    position: absolute;
    left: -55px;
    bottom: 10px;
    width: 100px;
    aspect-ratio: 1;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}
.pattern img[b-6oly61uard] {
    width: 100%;
    height: 100%;
    opacity: .35;
}
/*#endregion*/


/* ====================== HP ====================== */
@media (max-width: 767px) {
    .nav-brand[b-6oly61uard],
    .nav-menu[b-6oly61uard],
    .nav-profile[b-6oly61uard],
    .pattern[b-6oly61uard] {
        display: none;
    }

    .nav-menu-mobile[b-6oly61uard] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        display: grid;
        grid-template-columns: repeat(var(--jumlahMenu), 1fr);
        align-items: center;
        background-color: var(--white);
        box-shadow: 0 -5px 20px 0 #00000010;
        z-index: 50;
    }
    .nav-menu-mobile[b-6oly61uard]  .nav-link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--black);
    }
    .nav-menu-mobile[b-6oly61uard]  .nav-link.active,
    .nav-menu-mobile[b-6oly61uard]  .nav-link.active:hover {
        color: var(--primary);
    }
    .nav-menu-mobile[b-6oly61uard]  .nav-link svg {
        width: 30px;
        height: 30px;
    }
    .nav-menu-mobile[b-6oly61uard]  .nav-link span {
        display: block;
        font-size: .7rem;
    }
}

/* ====================== TABLET ====================== */
@media (min-width: 768px) and (max-width: 991px) {
    .nav-menu-mobile[b-6oly61uard] {
        display: none !important;
    }
}

/* ====================== TABLET ====================== */
@media (min-width: 768px) and (max-width: 1115px) {
    body:has(.toggle-tablet.SuperAdmin) .nav-menu[b-6oly61uard] {
        flex: unset;
    }
    .nav-menu[b-6oly61uard]  .nav-link[href="/IndexUserManagement"] {
        display: none !important;
    }
    .toggle-tablet.SuperAdmin[b-6oly61uard] {
        display: block;
        flex: 1;
    }

    .toggle-tablet .dropstart > button[b-6oly61uard] {
        display: grid;
        place-items: center;
        width: 35px;
        aspect-ratio: 1;
        color: var(--black);
        padding: 0;
        background-color: transparent;
        border: none;
        border-radius: 100%;
        box-shadow: none;

        &.show {
            color: var(--primary);
            background-color: var(--primary-hover-trans);
        }
        svg[b-6oly61uard] {
            width: 20px;
            height: 20px;
        }
    }
    .toggle-tablet:has(.nav-link.active) .dropstart > button[b-6oly61uard] {
        color: var(--primary);
        background-color: var(--primary-hover-trans);
    }
    .toggle-tablet .dropdown-menu[b-6oly61uard] {
        padding: .5rem;
        margin-top: 2rem !important;
        border-color: var(--line);
        border-radius: .75rem;

        .wrap-menus {
            display: flex;
            flex-direction: column;
            gap: .25rem;
        }
    }
    .toggle-tablet[b-6oly61uard]  .nav-link {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: var(--black);
        padding: .35rem .5rem;
        border-radius: .5rem;

        &:hover,
        &.active {
            color: var(--putih);
            background-color: var(--primary);
        }
        svg[b-6oly61uard] {
            width: 20px;
            height: 20px;
        }
        p[b-6oly61uard] {
            font-size: .9rem;
            white-space: nowrap;
            margin-bottom: 0;
        }
    }
    .toggle-tablet[b-6oly61uard]  .nav-link:not(:last-child) {
        display: none;
    }

    @media (min-width: 768px) and (max-width: 1020px) {
        .toggle-tablet[b-6oly61uard] {
            display: block;
            flex: 1;
        }
        .nav-menu #sub-menu2[b-6oly61uard],
        .nav-menu[b-6oly61uard]  .nav-link[href="/IndexUserManagement"] {
            display: none !important;
        }
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexRekapitulasiInvoice"],
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexLaporanPembelianTotal"],
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexLaporanHistoryMekanik"],
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexHistoryKodeBarang"] {
            display: flex;
        }
    }
    @media (min-width: 768px) and (max-width: 890px) {
        .nav-menu[b-6oly61uard]  .nav-link[href="/IndexPembelian"],
        .nav-menu #sub-menu2[b-6oly61uard],
        .nav-menu[b-6oly61uard]  .nav-link[href="/IndexUserManagement"] {
            display: none !important;
        }
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexRekapitulasiInvoice"],
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexLaporanPembelianTotal"],
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexLaporanHistoryMekanik"],
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexHistoryKodeBarang"],
        .toggle-tablet[b-6oly61uard]  .nav-link[href="/IndexPembelian"] {
            display: flex;
        }
    }
    /*#endregion*/
}

/* ====================== LAPTOP KECIL ====================== */
@media (min-width: 992px) {
    .nav-menu-mobile[b-6oly61uard] {
        display: none;
    }
}
/* /Pages/Dashboard/Dashboard_Invoice_StatusCount.razor.rz.scp.css */

.invoice-db[b-xcrhtbqrky] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--black);
}
.total[b-xcrhtbqrky] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}
.total img[b-xcrhtbqrky] {
    width: 40px;
    height: auto;
}
.total div[b-xcrhtbqrky] {
    flex: 1;
}
.total p:first-child[b-xcrhtbqrky] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 0;
}
.total p:last-child[b-xcrhtbqrky] {
    color: var(--grey);
    font-size: .85rem;
    font-weight: 400;
    margin-bottom: 0;
}
.total span[b-xcrhtbqrky] {
    font-size: 2rem;
    font-weight: 700;
}

.wrap-each[b-xcrhtbqrky] {
    flex: 1;
}
.each[b-xcrhtbqrky] {
    display: flex;
    flex-direction: column;
    margin-bottom: .75rem;
}
.each div[b-xcrhtbqrky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    padding: .1rem .35rem;
    border-radius: .25rem;
    transition: var(--anim);
    cursor: pointer;
}
.each div:hover[b-xcrhtbqrky] {
    color: var(--putih);
    background-color: var(--primary);
}
.each div span:nth-of-type(1)[b-xcrhtbqrky] {
    flex: 1;
    text-transform: capitalize;
}
.each div span:nth-of-type(2)[b-xcrhtbqrky] {
    font-weight: 600;
}

.update[b-xcrhtbqrky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
}
.update > div[b-xcrhtbqrky] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--grey);
    font-size: .8rem;
    font-weight: 400;
}
.update > div div[b-xcrhtbqrky] {
    width: 18px;
    height: 18px;
}
.update > div div.load[b-xcrhtbqrky] {
    animation: circleAnimDB-b-xcrhtbqrky 1s ease forwards;
}
@keyframes circleAnimDB-b-xcrhtbqrky {
    50% {
        transform: rotate(360deg)
    }
}
.update svg[b-xcrhtbqrky] {
    width: 100%;
    height: 100%;
    vertical-align: -3px;
}
.update button[b-xcrhtbqrky] {
    color: var(--primary);
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .65rem;
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: 2rem;
    outline: none;
    transition: var(--anim);
}
.update button:hover[b-xcrhtbqrky] {
    color: var(--putih);
    background-color: var(--primary);
}
/* /Pages/Dashboard/Dashboard_Invoice_StatusCount_Detail.razor.rz.scp.css */

.isi[b-94lwe1alx4] {
    display: flex;
}
.wrapper[b-94lwe1alx4] {
    --pad-x-all: 1rem;
    --pad-x-item: .75rem;

    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
}
.subtitle[b-94lwe1alx4] {
    display: none;
}
.content[b-94lwe1alx4] {
    flex: 1;
    overflow: hidden auto;
}
.content[b-94lwe1alx4]::-webkit-scrollbar-thumb {
  border-color: var(--tableIndex);
}

.content .item-index[b-94lwe1alx4],
.content[b-94lwe1alx4]  .item-index {
    position: relative;
    color: var(--black);
    padding: var(--pad-x-item);
    background-color: var(--putih);
    transition: var(--anim);
}
body.dark .content .item-index[b-94lwe1alx4],
body.dark .content[b-94lwe1alx4]  .item-index {
    background-color: hsl(from var(--hitam) h s 20);
}
.content .item-index span[b-94lwe1alx4] {
    display: block;
    font-size: .95rem;
    font-weight: 400;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.content .item-index span:first-child[b-94lwe1alx4] {
    font-weight: 600;
}

.content[b-94lwe1alx4]  #data-not-found {
    margin-top: 1rem;
}



/* ====================== HP ====================== */
@media (max-width: 767px) {
    .wrapper[b-94lwe1alx4] {
        padding: 0;
    }
    .content .item-index[b-94lwe1alx4],
    .content[b-94lwe1alx4]  .item-index {
        margin-bottom: .5rem;
        border-radius: .5rem;
        border: 1px solid var(--line);
        box-shadow: 1px 2px 8px #00000015;
    }
    .content .item-index:last-child[b-94lwe1alx4] {
        margin-bottom: 1rem;
    }
    .content .item-index span[b-94lwe1alx4] {
        position: relative;
    }
    .content .item-index span:first-child[b-94lwe1alx4] {
        font-size: 1rem;
        padding-right: 3rem;
    }
    .content .item-index span:not(:first-child)[b-94lwe1alx4]::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: -2px;
        margin-right: .5rem;
        background-color: currentColor;
    }
    .content .item-index span:nth-child(2)[b-94lwe1alx4]::before {
        mask-image: var(--calendarIcon);
        -webkit-mask-image: var(--calendarIcon);
    }
    .content .item-index span:nth-child(3)[b-94lwe1alx4]::before {
        mask-image: var(--userIcon);
        -webkit-mask-image: var(--userIcon);
    }
    .content .item-index :is(span:nth-child(4), span:nth-child(5), span:nth-child(6), span:nth-child(7), span:nth-child(8))[b-94lwe1alx4]::before {
        mask-image: var(--gearIcon);
        -webkit-mask-image: var(--gearIcon);
    }
    .content .item-index span:nth-child(9)[b-94lwe1alx4]::before {
        mask-image: var(--fileIcon);
        -webkit-mask-image: var(--fileIcon);
    }
    .content .item-index span:nth-child(10)[b-94lwe1alx4]::before {
        mask-image: var(--mekanikIcon);
        -webkit-mask-image: var(--mekanikIcon);
    }
    .content .item-index span:nth-child(11)[b-94lwe1alx4]::before {
        mask-image: var(--noteIcon);
        -webkit-mask-image: var(--noteIcon);
    }
    .content .item-index span:nth-child(12)[b-94lwe1alx4]::before {
        mask-image: var(--coinsIcon);
        -webkit-mask-image: var(--coinsIcon);
    }
}

/* ====================== TABLET ====================== */
@media (min-width: 768px) {
    .wrapper[b-94lwe1alx4] {
        --grid-item: 7% 7% auto 8% 8% 8% 8% 8% 8% 8% 7% 7%;
        --gap-grid-item: .25rem;

        background-color: var(--tableIndex);
        border-radius: .5rem;
    }
    .subtitle[b-94lwe1alx4] {
        display: block;
        padding: .25rem var(--pad-x-item);
    }
    .subtitle > div[b-94lwe1alx4] {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        padding: .25rem var(--pad-x-item) 0 var(--pad-x-item);
    }
    .subtitle span[b-94lwe1alx4] {
        display: block;
        color: var(--grey);
        font-size: .8rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .content[b-94lwe1alx4] {
        margin: .25rem var(--pad-x-item) .75rem var(--pad-x-item);
        border-radius: .5rem;
    }
    .content .item-index[b-94lwe1alx4],
    .content[b-94lwe1alx4]  .item-index {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        align-items: center;
        padding: .35rem var(--pad-x-item);
        border-bottom: 1px solid var(--line);
        overflow: hidden;
    }
    .content .item-index:last-child[b-94lwe1alx4],
    [b-94lwe1alx4] .item-index:last-of-type {
        border-bottom: none;
        border-radius: 0 0 .5rem .5rem;
    }
    .content .item-index:hover[b-94lwe1alx4],
    body.dark .content .item-index:hover[b-94lwe1alx4] {
        color: var(--putih);
        background-color: var(--primary);
        border-color: var(--primary);
    }
}
/* /Pages/Dashboard/Dashboard_Pembelian_StatusCount.razor.rz.scp.css */

.pembelian-db[b-mpjm2xc4c6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--black);
}
.total[b-mpjm2xc4c6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}
.total img[b-mpjm2xc4c6] {
    width: 40px;
    height: auto;
}
.total div[b-mpjm2xc4c6] {
    flex: 1;
}
.total p:first-child[b-mpjm2xc4c6] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 0;
}
.total p:last-child[b-mpjm2xc4c6] {
    color: var(--grey);
    font-size: .85rem;
    font-weight: 400;
    margin-bottom: 0;
}
.total span[b-mpjm2xc4c6] {
    font-size: 2rem;
    font-weight: 700;
}

.wrap-each[b-mpjm2xc4c6] {
    flex: 1;
}
.each[b-mpjm2xc4c6] {
    display: flex;
    flex-direction: column;
    margin-bottom: .75rem;
}
.each div[b-mpjm2xc4c6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    padding: .1rem .35rem;
    border-radius: .25rem;
    transition: var(--anim);
    cursor: pointer;
}
.each div:hover[b-mpjm2xc4c6] {
    color: var(--putih);
    background-color: var(--primary);
}
.each div span:nth-of-type(1)[b-mpjm2xc4c6] {
    flex: 1;
    text-transform: capitalize;
}
.each div span:nth-of-type(2)[b-mpjm2xc4c6] {
    font-weight: 600;
}

.update[b-mpjm2xc4c6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
}
.update > div[b-mpjm2xc4c6] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--grey);
    font-size: .8rem;
    font-weight: 400;
}
.update > div div[b-mpjm2xc4c6] {
    width: 18px;
    height: 18px;
}
.update > div div.load[b-mpjm2xc4c6] {
    animation: circleAnimDB-b-mpjm2xc4c6 1s ease forwards;
}
@keyframes circleAnimDB-b-mpjm2xc4c6 {
    50% {
        transform: rotate(360deg)
    }
}
.update svg[b-mpjm2xc4c6] {
    width: 100%;
    height: 100%;
    vertical-align: -3px;
}
.update button[b-mpjm2xc4c6] {
    color: var(--primary);
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .65rem;
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: 2rem;
    outline: none;
    transition: var(--anim);
}
.update button:hover[b-mpjm2xc4c6] {
    color: var(--putih);
    background-color: var(--primary);
}
/* /Pages/Dashboard/Dashboard_Pembelian_StatusCount_Detail.razor.rz.scp.css */

.isi[b-zytdkxwgf1] {
    display: flex;
}
.wrapper[b-zytdkxwgf1] {
    --pad-x-all: 1rem;
    --pad-x-item: .75rem;

    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
}
.subtitle[b-zytdkxwgf1] {
    display: none;
}
.content[b-zytdkxwgf1] {
    flex: 1;
    overflow: hidden auto;
}
.content[b-zytdkxwgf1]::-webkit-scrollbar-thumb {
  border-color: var(--tableIndex);
}

.content .item-index[b-zytdkxwgf1],
.content[b-zytdkxwgf1]  .item-index {
    position: relative;
    color: var(--black);
    padding: var(--pad-x-item);
    background-color: var(--putih);
    transition: var(--anim);
}
body.dark .content .item-index[b-zytdkxwgf1],
body.dark .content[b-zytdkxwgf1]  .item-index {
    background-color: hsl(from var(--hitam) h s 20);
}
.content .item-index span[b-zytdkxwgf1] {
    display: block;
    font-size: .95rem;
    font-weight: 400;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.content .item-index span:first-child[b-zytdkxwgf1] {
    font-weight: 600;
}

.content[b-zytdkxwgf1]  #data-not-found {
    margin-top: 1rem;
}



/* ====================== HP ====================== */
@media (max-width: 767px) {
    .wrapper[b-zytdkxwgf1] {
        padding: 0;
    }
    .content .item-index[b-zytdkxwgf1],
    .content[b-zytdkxwgf1]  .item-index {
        margin-bottom: .5rem;
        border-radius: .5rem;
        border: 1px solid var(--line);
        box-shadow: 1px 2px 8px #00000015;
    }
    .content .item-index:last-child[b-zytdkxwgf1] {
        margin-bottom: 1rem;
    }
    .content .item-index span[b-zytdkxwgf1] {
        position: relative;
    }
    .content .item-index span:first-child[b-zytdkxwgf1] {
        font-size: 1rem;
        padding-right: 3rem;
    }
    .content .item-index span:not(:first-child)[b-zytdkxwgf1]::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: -2px;
        margin-right: .5rem;
        background-color: currentColor;
    }
    .content .item-index span:nth-child(2)[b-zytdkxwgf1]::before {
        mask-image: var(--calendarIcon);
        -webkit-mask-image: var(--calendarIcon);
    }
    .content .item-index span:nth-child(3)[b-zytdkxwgf1]::before {
        mask-image: var(--fileIcon);
        -webkit-mask-image: var(--fileIcon);
    }
    .content .item-index span:nth-child(4)[b-zytdkxwgf1]::before {
        mask-image: var(--supplierIcon);
        -webkit-mask-image: var(--supplierIcon);
    }
    .content .item-index span:nth-child(5)[b-zytdkxwgf1]::before {
        mask-image: var(--coinsIcon);
        -webkit-mask-image: var(--coinsIcon);
    }
    .content .item-index span:nth-child(6)[b-zytdkxwgf1]::before {
        mask-image: var(--noteIcon);
        -webkit-mask-image: var(--noteIcon);
    }
}

/* ====================== TABLET ====================== */
@media (min-width: 768px) {
    .wrapper[b-zytdkxwgf1] {
        --grid-item: 12% 12% 15% auto 10% 22%;
        --gap-grid-item: .25rem;

        background-color: var(--tableIndex);
        border-radius: .5rem;
    }
    .subtitle[b-zytdkxwgf1] {
        display: block;
        padding: .25rem var(--pad-x-item);
    }
    .subtitle > div[b-zytdkxwgf1] {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        padding: .25rem var(--pad-x-item) 0 var(--pad-x-item);
    }
    .subtitle span[b-zytdkxwgf1] {
        display: block;
        color: var(--grey);
        font-size: .8rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .content[b-zytdkxwgf1] {
        margin: .25rem var(--pad-x-item) .75rem var(--pad-x-item);
        border-radius: .5rem;
    }
    .content .item-index[b-zytdkxwgf1],
    .content[b-zytdkxwgf1]  .item-index {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        align-items: center;
        padding: .35rem var(--pad-x-item);
        border-bottom: 1px solid var(--line);
        overflow: hidden;
    }
    .content .item-index:last-child[b-zytdkxwgf1],
    [b-zytdkxwgf1] .item-index:last-of-type {
        border-bottom: none;
        border-radius: 0 0 .5rem .5rem;
    }
    .content .item-index:hover[b-zytdkxwgf1],
    body.dark .content .item-index:hover[b-zytdkxwgf1] {
        color: var(--putih);
        background-color: var(--primary);
        border-color: var(--primary);
    }
}
/* /Pages/Dashboard/Dashboard_Penawaran_StatusCount.razor.rz.scp.css */

.penawaran-db[b-pyg088b7qu] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--black);
}
.total[b-pyg088b7qu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}
.total img[b-pyg088b7qu] {
    width: 40px;
    height: auto;
}
.total div[b-pyg088b7qu] {
    flex: 1;
}
.total p:first-child[b-pyg088b7qu] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 0;
}
.total p:last-child[b-pyg088b7qu] {
    color: var(--grey);
    font-size: .85rem;
    font-weight: 400;
    margin-bottom: 0;
}
.total span[b-pyg088b7qu] {
    font-size: 2rem;
    font-weight: 700;
}

.wrap-each[b-pyg088b7qu] {
    flex: 1;
}
.each[b-pyg088b7qu] {
    display: flex;
    flex-direction: column;
    margin-bottom: .75rem;
}
.each div[b-pyg088b7qu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: 1rem;
    padding: .1rem .35rem;
    border-radius: .25rem;
    transition: var(--anim);
    cursor: pointer;
}
.each div:hover[b-pyg088b7qu] {
    color: var(--putih);
    background-color: var(--primary);
}
.each div span:nth-of-type(1)[b-pyg088b7qu] {
    flex: 1;
    text-transform: capitalize;
}
.each div span:nth-of-type(2)[b-pyg088b7qu] {
    font-weight: 600;
}

.update[b-pyg088b7qu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
}
.update > div[b-pyg088b7qu] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--grey);
    font-size: .8rem;
    font-weight: 400;
}
.update > div div[b-pyg088b7qu] {
    width: 18px;
    height: 18px;
}
.update > div div.load[b-pyg088b7qu] {
    animation: circleAnimDB-b-pyg088b7qu 1s ease forwards;
}
@keyframes circleAnimDB-b-pyg088b7qu {
    50% {
        transform: rotate(360deg)
    }
}
.update svg[b-pyg088b7qu] {
    width: 100%;
    height: 100%;
    vertical-align: -3px;
}
.update button[b-pyg088b7qu] {
    color: var(--primary);
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .65rem;
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: 2rem;
    outline: none;
    transition: var(--anim);
}
.update button:hover[b-pyg088b7qu] {
    color: var(--putih);
    background-color: var(--primary);
}
/* /Pages/Dashboard/Dashboard_Penawaran_StatusCount_Detail.razor.rz.scp.css */

.isi[b-9r0j1icipd] {
    display: flex;
}
.wrapper[b-9r0j1icipd] {
    --pad-x-all: 1rem;
    --pad-x-item: .75rem;

    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
}
.subtitle[b-9r0j1icipd] {
    display: none;
}
.content[b-9r0j1icipd] {
    flex: 1;
    overflow: hidden auto;
}
.content[b-9r0j1icipd]::-webkit-scrollbar-thumb {
  border-color: var(--tableIndex);
}

.content .item-index[b-9r0j1icipd],
.content[b-9r0j1icipd]  .item-index {
    position: relative;
    color: var(--black);
    padding: var(--pad-x-item);
    background-color: var(--putih);
    transition: var(--anim);
}
body.dark .content .item-index[b-9r0j1icipd],
body.dark .content[b-9r0j1icipd]  .item-index {
    background-color: hsl(from var(--hitam) h s 20);
}
.content .item-index span[b-9r0j1icipd] {
    display: block;
    font-size: .95rem;
    font-weight: 400;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.content .item-index span:first-child[b-9r0j1icipd] {
    font-weight: 600;
}

.content[b-9r0j1icipd]  #data-not-found {
    margin-top: 1rem;
}



/* ====================== HP ====================== */
@media (max-width: 767px) {
    .wrapper[b-9r0j1icipd] {
        padding: 0;
    }
    .content .item-index[b-9r0j1icipd],
    .content[b-9r0j1icipd]  .item-index {
        margin-bottom: .5rem;
        border-radius: .5rem;
        border: 1px solid var(--line);
        box-shadow: 1px 2px 8px #00000015;
    }
    .content .item-index:last-child[b-9r0j1icipd] {
        margin-bottom: 1rem;
    }
    .content .item-index span[b-9r0j1icipd] {
        position: relative;
    }
    .content .item-index span:first-child[b-9r0j1icipd] {
        font-size: 1rem;
        padding-right: 3rem;
    }
    .content .item-index span:not(:first-child)[b-9r0j1icipd]::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: -2px;
        margin-right: .5rem;
        background-color: currentColor;
    }
    .content .item-index span:nth-child(2)[b-9r0j1icipd]::before {
        mask-image: var(--calendarIcon);
        -webkit-mask-image: var(--calendarIcon);
    }
    .content .item-index span:nth-child(3)[b-9r0j1icipd]::before {
        mask-image: var(--userIcon);
        -webkit-mask-image: var(--userIcon);
    }
    .content .item-index :is(span:nth-child(4), span:nth-child(5), span:nth-child(6), span:nth-child(7), span:nth-child(8), span:nth-child(9), span:nth-child(10))[b-9r0j1icipd]::before {
        mask-image: var(--gearIcon);
        -webkit-mask-image: var(--gearIcon);
    }
    .content .item-index span:nth-child(11)[b-9r0j1icipd]::before {
        mask-image: var(--coinsIcon);
        -webkit-mask-image: var(--coinsIcon);
    }
    .content .item-index span:nth-child(12)[b-9r0j1icipd]::before {
        mask-image: var(--fileIcon);
        -webkit-mask-image: var(--fileIcon);
    }
}

/* ====================== TABLET ====================== */
@media (min-width: 768px) {
    .wrapper[b-9r0j1icipd] {
        --grid-item: 7% 7% auto 8% 8% 8% 8% 8% 8% 8% 7% 7%;
        --gap-grid-item: .25rem;

        background-color: var(--tableIndex);
        border-radius: .5rem;
    }
    .subtitle[b-9r0j1icipd] {
        display: block;
        padding: .25rem var(--pad-x-item);
    }
    .subtitle > div[b-9r0j1icipd] {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        padding: .25rem var(--pad-x-item) 0 var(--pad-x-item);
    }
    .subtitle span[b-9r0j1icipd] {
        display: block;
        color: var(--grey);
        font-size: .8rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .content[b-9r0j1icipd] {
        margin: .25rem var(--pad-x-item) .75rem var(--pad-x-item);
        border-radius: .5rem;
    }
    .content .item-index[b-9r0j1icipd],
    .content[b-9r0j1icipd]  .item-index {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        align-items: center;
        padding: .35rem var(--pad-x-item);
        border-bottom: 1px solid var(--line);
        overflow: hidden;
    }
    .content .item-index:last-child[b-9r0j1icipd],
    [b-9r0j1icipd] .item-index:last-of-type {
        border-bottom: none;
        border-radius: 0 0 .5rem .5rem;
    }
    .content .item-index:hover[b-9r0j1icipd],
    body.dark .content .item-index:hover[b-9r0j1icipd] {
        color: var(--putih);
        background-color: var(--primary);
        border-color: var(--primary);
    }
}
/* /Pages/Dashboard/Dashboard_PenerimaanBarang_StatusCount.razor.rz.scp.css */

.penerimaan-db[b-qt0614l6ph] {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--black);
}
.total[b-qt0614l6ph] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: .5rem;
}
.total img[b-qt0614l6ph] {
    width: 40px;
    height: auto;
}
.total div[b-qt0614l6ph] {
    flex: 1;
}
.total p:first-child[b-qt0614l6ph] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    margin-bottom: 0;
}
.total p:last-child[b-qt0614l6ph] {
    color: var(--grey);
    font-size: .85rem;
    font-weight: 400;
    margin-bottom: 0;
}
.total span[b-qt0614l6ph] {
    font-size: 2rem;
    font-weight: 700;
}

.wrap-each[b-qt0614l6ph] {
    flex: 1;
}
.each[b-qt0614l6ph] {
    display: flex;
    flex-direction: column;
    margin-bottom: .75rem;
}
.each div[b-qt0614l6ph] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    padding: .1rem .35rem;
    border-radius: .25rem;
    transition: var(--anim);
    cursor: pointer;
}
.each div:hover[b-qt0614l6ph] {
    color: var(--putih);
    background-color: var(--primary);
}
.each div span:nth-of-type(1)[b-qt0614l6ph] {
    flex: 1;
    text-transform: capitalize;
}
.each div span:nth-of-type(2)[b-qt0614l6ph] {
    font-weight: 600;
}

.update[b-qt0614l6ph] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--line);
}
.update > div[b-qt0614l6ph] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--grey);
    font-size: .8rem;
    font-weight: 400;
}
.update > div div[b-qt0614l6ph] {
    width: 18px;
    height: 18px;
}
.update > div div.load[b-qt0614l6ph] {
    animation: circleAnimDB-b-qt0614l6ph 1s ease forwards;
}
@keyframes circleAnimDB-b-qt0614l6ph {
    50% {
        transform: rotate(360deg)
    }
}
.update svg[b-qt0614l6ph] {
    width: 100%;
    height: 100%;
    vertical-align: -3px;
}
.update button[b-qt0614l6ph] {
    color: var(--primary);
    font-size: .65rem;
    font-weight: 600;
    padding: .2rem .65rem;
    background-color: transparent;
    border: 1px solid var(--primary);
    border-radius: 2rem;
    outline: none;
    transition: var(--anim);
}
.update button:hover[b-qt0614l6ph] {
    color: var(--putih);
    background-color: var(--primary);
}
/* /Pages/Dashboard/Dashboard_PenerimaanBarang_StatusCount_Detail.razor.rz.scp.css */

.isi[b-73pxhnxqkj] {
    display: flex;
}
.wrapper[b-73pxhnxqkj] {
    --pad-x-all: 1rem;
    --pad-x-item: .75rem;

    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
}
.subtitle[b-73pxhnxqkj] {
    display: none;
}
.content[b-73pxhnxqkj] {
    flex: 1;
    overflow: hidden auto;
}
.content[b-73pxhnxqkj]::-webkit-scrollbar-thumb {
  border-color: var(--tableIndex);
}

.content .item-index[b-73pxhnxqkj],
.content[b-73pxhnxqkj]  .item-index {
    position: relative;
    color: var(--black);
    padding: var(--pad-x-item);
    background-color: var(--putih);
    transition: var(--anim);
}
body.dark .content .item-index[b-73pxhnxqkj],
body.dark .content[b-73pxhnxqkj]  .item-index {
    background-color: hsl(from var(--hitam) h s 20);
}
.content .item-index span[b-73pxhnxqkj] {
    display: block;
    font-size: .95rem;
    font-weight: 400;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.content .item-index span:first-child[b-73pxhnxqkj] {
    font-weight: 600;
}

.content[b-73pxhnxqkj]  #data-not-found {
    margin-top: 1rem;
}



/* ====================== HP ====================== */
@media (max-width: 767px) {
    .wrapper[b-73pxhnxqkj] {
        padding: 0;
    }
    .content .item-index[b-73pxhnxqkj],
    .content[b-73pxhnxqkj]  .item-index {
        margin-bottom: .5rem;
        border-radius: .5rem;
        border: 1px solid var(--line);
        box-shadow: 1px 2px 8px #00000015;
    }
    .content .item-index:last-child[b-73pxhnxqkj] {
        margin-bottom: 1rem;
    }
    .content .item-index span[b-73pxhnxqkj] {
        position: relative;
    }
    .content .item-index span:first-child[b-73pxhnxqkj] {
        font-size: 1rem;
        padding-right: 3rem;
    }
    .content .item-index span:not(:first-child)[b-73pxhnxqkj]::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: -2px;
        margin-right: .5rem;
        background-color: currentColor;
    }
    .content .item-index span:nth-child(2)[b-73pxhnxqkj]::before {
        mask-image: var(--calendarIcon);
        -webkit-mask-image: var(--calendarIcon);
    }
    .content .item-index :is(span:nth-child(3), span:nth-child(4), span:nth-child(5), span:nth-child(6), span:nth-child(7))[b-73pxhnxqkj]::before {
        mask-image: var(--gearIcon);
        -webkit-mask-image: var(--gearIcon);
    }
    .content .item-index span:nth-child(8)[b-73pxhnxqkj]::before {
        mask-image: var(--qrIcon);
        -webkit-mask-image: var(--qrIcon);
    }
    .content .item-index span:nth-child(9)[b-73pxhnxqkj]::before {
        mask-image: var(--fileIcon);
        -webkit-mask-image: var(--fileIcon);
    }
}

/* ====================== TABLET ====================== */
@media (min-width: 768px) {
    .wrapper[b-73pxhnxqkj] {
        --grid-item: auto 11% 8% 8% 10% 10% 10% 13% 8%;
        --gap-grid-item: .25rem;

        background-color: var(--tableIndex);
        border-radius: .5rem;
    }
    .subtitle[b-73pxhnxqkj] {
        display: block;
        padding: .25rem var(--pad-x-item);
    }
    .subtitle > div[b-73pxhnxqkj] {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        padding: .25rem var(--pad-x-item) 0 var(--pad-x-item);
    }
    .subtitle span[b-73pxhnxqkj] {
        display: block;
        color: var(--grey);
        font-size: .8rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .content[b-73pxhnxqkj] {
        margin: .25rem var(--pad-x-item) .75rem var(--pad-x-item);
        border-radius: .5rem;
    }
    .content .item-index[b-73pxhnxqkj],
    .content[b-73pxhnxqkj]  .item-index {
        display: grid;
        grid-template-columns: var(--grid-item);
        gap: var(--gap-grid-item);
        align-items: center;
        padding: .35rem var(--pad-x-item);
        border-bottom: 1px solid var(--line);
        overflow: hidden;
    }
    .content .item-index:last-child[b-73pxhnxqkj],
    [b-73pxhnxqkj] .item-index:last-of-type {
        border-bottom: none;
        border-radius: 0 0 .5rem .5rem;
    }
    .content .item-index:hover[b-73pxhnxqkj],
    body.dark .content .item-index:hover[b-73pxhnxqkj] {
        color: var(--putih);
        background-color: var(--primary);
        border-color: var(--primary);
    }
}
/* /Pages/Dashboard/Dashboard_TotalInvoice_Chart.razor.rz.scp.css */

.invoice-db[b-9d2krjysxx] {
    position: relative;
}
.judul[b-9d2krjysxx] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--line);
}
.judul .teks p[b-9d2krjysxx] {
    color: var(--black);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
.judul .teks span[b-9d2krjysxx] {
    position: relative;
    display: inline-block;
    color: var(--black);
    font-size: 1rem;
}
.judul .teks > span[b-9d2krjysxx]::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: 1px;
    margin-right: .5rem;
    background-color: #47ccbf;
    border-radius: .15rem;
}
.judul .teks > span:not(:last-of-type)[b-9d2krjysxx] {
    margin-right: 1.5rem;
}
.judul .teks > span:nth-of-type(2)[b-9d2krjysxx]::before {
    background-color: #faa358;
}
.judul .teks > span:last-of-type[b-9d2krjysxx]::before {
    background-color: #c86cd5;
}

.judul .pilihan[b-9d2krjysxx] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
}
.data-view[b-9d2krjysxx] {
    display: flex;
    align-items: center;
    gap: .2rem;
    height: 40px;
    padding: .5rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    cursor: pointer;
}
body.dark .data-view[b-9d2krjysxx] {
    background-color: hsl(from var(--hitam) h s 35);
}
.data-view svg[b-9d2krjysxx] {
    color: var(--black);
    min-width: 18px;
    width: 18px;
    height: 18px
}
.data-view select[b-9d2krjysxx] {
    font-size: .9rem;
    border: none;
    outline: none;
    box-shadow: none !important;
    cursor: pointer;
}

.date-range[b-9d2krjysxx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    padding: .25rem .5rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
}
body.dark .date-range[b-9d2krjysxx] {
    background-color: hsl(from var(--hitam) h s 35);
}
.date-group[b-9d2krjysxx] {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.date-group svg[b-9d2krjysxx] {
    color: var(--black);
    min-width: 18px;
    width: 18px;
    height: 18px
}
.date-group select[b-9d2krjysxx] {
    width: fit-content;
    font-size: .9rem;
    border: none;
    outline: none;
    box-shadow: none !important;
    cursor: pointer;
}

.range[b-9d2krjysxx] {
    width: 0;
    transition: var(--anim);
    overflow: hidden;
}
.range.open[b-9d2krjysxx] {
    width: 100%;
}
.pick[b-9d2krjysxx] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: .75rem;
    border-left: 1px solid var(--line);
}
.pick input[b-9d2krjysxx] {
    max-width: 100px;
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}
.pick svg[b-9d2krjysxx] {
    color: var(--grey);
    min-width: 18px;
    width: 18px;
    height: 18px
}

.chart-invoice-db[b-9d2krjysxx] {
    position: relative;
    max-width: 100%;
}

.loading-chart-invoice-db[b-9d2krjysxx] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: var(--line);
    border-radius: .5rem;
    z-index: 5;
}

.loader[b-9d2krjysxx] {
  width: 15px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5-b-9d2krjysxx 1s infinite linear alternate;
}
@keyframes l5-b-9d2krjysxx {
    0%  {box-shadow: 20px 0 var(--primary), -20px 0 var(--primary-hover-trans);background: var(--primary) }
    33% {box-shadow: 20px 0 var(--primary), -20px 0 var(--primary-hover-trans);background: var(--primary-hover-trans)}
    66% {box-shadow: 20px 0 var(--primary-hover-trans),-20px 0 var(--primary); background: var(--primary-hover-trans)}
    100%{box-shadow: 20px 0 var(--primary-hover-trans),-20px 0 var(--primary); background: var(--primary) }
}




/*############### TABLET ###############*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
    
}


/*############### HP ###############*/
@media screen and (max-width: 767px) {
    .judul[b-9d2krjysxx] {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
        margin-bottom: 1.5rem;
        border-bottom: 1px solid var(--line);
    }
    .judul .teks[b-9d2krjysxx] {
        margin-bottom: .25rem;
    }
    .judul .teks p[b-9d2krjysxx] {
        font-size: 1.35rem;
        margin-bottom: .25rem;
    }
    .judul .teks span[b-9d2krjysxx] {
        font-size: .9rem;
    }

    .judul .pilihan[b-9d2krjysxx] {
        position: relative;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: .5rem;
    }
    .data-view[b-9d2krjysxx],
    .date-range[b-9d2krjysxx] {
        width: calc(100% / 2 - .25rem)
    }
    .date-group select[b-9d2krjysxx] {
        width: 100%;
    }
    .range[b-9d2krjysxx] {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        opacity: 0;
        pointer-events: none;
    }
    .range.open[b-9d2krjysxx] {
        opacity: 1;
        pointer-events: auto;
    }
    .pick[b-9d2krjysxx] {
        justify-content: space-between;
        padding: .25rem .5rem;
        background-color: var(--putih);
        border: 1px solid var(--line);
        border-radius: .5rem;
    }
    body.dark .pick[b-9d2krjysxx] {
        background-color: hsl(from var(--hitam) h s 35);
    }
    .pick input[b-9d2krjysxx] {
        flex: 1;
        max-width: unset;
    }

    .pilihan .btn[b-9d2krjysxx] {
        width: 100%;
    }
    .pilihan:has(.range.open) .btn[b-9d2krjysxx] {
        margin-top: 3.25rem;
    }
}
/* /Pages/IndexDashboard.razor.rz.scp.css */

#indexDashboard[b-f35tvi935k] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1rem;
}
.cardDB[b-f35tvi935k] {
    position: relative;
    min-height: 100px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--white);
    border-radius: 1rem;
    box-shadow: 0 0 15px 0 #00000015;
    overflow: hidden;
}
.cardDB.empty[b-f35tvi935k] {
    padding: 2.5rem 1rem;
}



/* ====================== HP ====================== */
@media (max-width: 767px) {
    
}

/* ====================== TABLET ====================== */
@media (min-width: 768px) {
    #indexDashboard[b-f35tvi935k] {
        padding: 1.5rem;
    }
    .cardDB[b-f35tvi935k] {
        margin-bottom: 0;
    }

    .row-one[b-f35tvi935k] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .row-two[b-f35tvi935k] {
        margin-bottom: 1rem;
    }
}

/* ====================== LAPTOP KECIL ====================== */
@media (min-width: 992px) {
    .row-one[b-f35tvi935k] {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* /Pages/LogoutPopup.razor.rz.scp.css */

.isi[b-tgl9v6wcet] {
    padding: 2rem 1rem 1rem 1rem !important;
}
.gambar[b-tgl9v6wcet] {
    text-align: center;
    margin-bottom: 1rem;
}
.gambar img[b-tgl9v6wcet] {
    max-width: 175px;
    aspect-ratio: 1;
}
p:nth-of-type(1)[b-tgl9v6wcet] {
    color: var(--red);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: .25rem;
}
p:nth-of-type(2)[b-tgl9v6wcet] {
    color: var(--black);
    font-size: .95rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
}

.tombol[b-tgl9v6wcet] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: 1rem 1rem 1.25rem 1rem;
}
.tombol .btn[b-tgl9v6wcet] {
    width: 100%;
}
/* /Pages/MenuLainnyaMobile.razor.rz.scp.css */

.menu-lainnya .nama[b-vf38m7ylj8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem 2rem 1.5rem;
}
.menu-lainnya .nama div[b-vf38m7ylj8] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--putih);
    font-size: 1.75rem;
    font-weight: 700;
    width: 65px;
    aspect-ratio: 1;
    margin-bottom: .75rem;
    background: linear-gradient(30deg, var(--clr500), var(--clr200) 80%);
    border-radius: 50%;
}
.menu-lainnya .nama div[b-vf38m7ylj8]::before {
    content: '';
    position: absolute;
    inset: -.25rem;
    border: 2px solid var(--primary);
    border-radius: 50%;
}
.menu-lainnya .nama p:first-of-type[b-vf38m7ylj8] {
    color: var(--black);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0;
}
.menu-lainnya .nama p:last-child[b-vf38m7ylj8] {
    color: var(--grey);
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0;
}

.menu-lainnya .divider[b-vf38m7ylj8] {
    color: var(--grey);
    font-size: .75rem;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 1.25rem;
    margin-bottom: .75rem;
}
.menu-lainnya .wrapper[b-vf38m7ylj8] {
    padding: .25rem 1rem;
    margin: 0 1rem 1.25rem 1rem;
    background-color: var(--white);
    border-radius: .75rem;
}
.menu-lainnya .item-menu[b-vf38m7ylj8] {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--black);
    text-transform: capitalize;
    padding: .75rem 0;
    background-color: var(--white);
    border-bottom: 1px solid var(--line);
    user-select: none;
    cursor: pointer;
}
.menu-lainnya .item-menu.exit[b-vf38m7ylj8] {
    color: var(--red);
}
.menu-lainnya .item-menu:last-child[b-vf38m7ylj8] {
    border-bottom: none;
}
.menu-lainnya .item-menu[b-vf38m7ylj8]  svg {
    width: 22px;
    height: 22px;
}
.menu-lainnya .item-menu[b-vf38m7ylj8]  svg:last-child {
    width: 16px;
    height: 16px;
}
.menu-lainnya .item-menu span[b-vf38m7ylj8] {
    flex: 1;
    font-size: 1rem;
    font-weight: 400;
}

.toggle-set[b-vf38m7ylj8] {
    position: absolute;
    inset: 0;
}
.toggle-set label[b-vf38m7ylj8] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.toggle-set b[b-vf38m7ylj8] {
    --tgl-width: 32px;
    --tgl-gap: 4px;

    position: relative;
    display: block;
    width: var(--tgl-width);
    aspect-ratio: 15 / 9;
    margin: 0;
    background-color: #d4d4d4;
    border: none;
    outline: none;
    border-radius: 3rem;
    box-shadow: 0 0 5px #00000020 inset;
    transition: var(--anim);
    overflow: hidden;
}
body.dark .toggle-set label b[b-vf38m7ylj8] {
    background-color: var(--primary);
}
.toggle-set b[b-vf38m7ylj8]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--tgl-gap);
    transform: translateY(-50%);
    width: calc(var(--tgl-width) / 2 - var(--tgl-gap));
    aspect-ratio: 1;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00000015;
    transition: var(--anim);
}
body.dark .toggle-set label b[b-vf38m7ylj8]::before {
    left: calc(var(--tgl-width) / 2 - calc(var(--tgl-gap) * .2));
}
/* /Pages/PageAuth.razor.rz.scp.css */

#pageAuth[b-xf7f79qvhi] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--black);
    isolation: isolate;
    user-select: none;
}
#pageAuth .wrapper[b-xf7f79qvhi] {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#pageAuth .gambar[b-xf7f79qvhi] {
    position: relative;
    max-width: 350px;
    height: auto;
    margin-bottom: 2.25rem;
}
#pageAuth .gambar img:first-child[b-xf7f79qvhi] {
    width: 100%;
    height: 100%;
}
#pageAuth .gambar img:last-child[b-xf7f79qvhi] {
    position: absolute;
    top: -5%;
    right: -5%;
    width: 90px;
    height: auto;
    animation: chatAnim-b-xf7f79qvhi 5s ease;
    animation-delay: 4s;
    transform-origin: left bottom;
    transform: scale(0)
}
@keyframes chatAnim-b-xf7f79qvhi {
    0%, 100% {
        transform: scale(0)
    }
    5%, 95% {
        transform: scale(1)
    }
}
#pageAuth .wrapper p:first-of-type[b-xf7f79qvhi] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: .15rem;
}
#pageAuth .wrapper p:last-child[b-xf7f79qvhi] {
    font-size:  1.25rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 0;
}

.pattern[b-xf7f79qvhi] {
    position: absolute;
    right: -250px;
    top: -250px;
    width: 500px;
    aspect-ratio: 1;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}
.pattern img[b-xf7f79qvhi] {
    width: 100%;
    height: 100%;
    opacity: .5;
}


/* ====================== HP ====================== */
@media (max-width: 767px) {
    #pageAuth .wrapper p:last-child[b-xf7f79qvhi] {
        font-size:  1.1rem;
        padding-inline: 1.5rem;
    }
    #pageAuth .gambar[b-xf7f79qvhi] {
        max-width: 300px;
        margin-top: 5rem;
    }
    .pattern[b-xf7f79qvhi] {
        right: -200px;
        top: -200px;
        width: 400px;
    }
}
/* /Pages/PageNotAuth.razor.rz.scp.css */

#pageNotAuth[b-z6keszfm5b] {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100vh;
    padding: 4% 7%;
    background-color: var(--hitam);
    isolation: isolate;
    overflow: hidden;
}
#pageNotAuth[b-z6keszfm5b]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url(https://nusajayapumpstorage.blob.core.windows.net/publicasset/img-global/bg-login.webp);
    background-position: left bottom;
    background-size: cover;
    background-repeat: no-repeat;
    animation: notAuthAnim-b-z6keszfm5b 1.25s ease forwards;
    z-index: -1;
}
@keyframes notAuthAnim-b-z6keszfm5b {
    from {
        transform: scale(1.1);
    }
}
#pageNotAuth[b-z6keszfm5b]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--hitam) 20%, hsl(from var(--hitam) h s l / .25));
    z-index: -1;
}

#pageNotAuth .wrapper[b-z6keszfm5b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 15%;
    color: var(--putih);
    animation: wrapperAnim-b-z6keszfm5b .5s ease forwards;
}
@keyframes wrapperAnim-b-z6keszfm5b {
    from {
        opacity: 0;
        transform: translateY(5rem);
    }
}
#pageNotAuth .wrapper div svg[b-z6keszfm5b] {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}
#pageNotAuth .wrapper p:first-of-type[b-z6keszfm5b] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: .25rem;
}
#pageNotAuth .wrapper p:last-child[b-z6keszfm5b] {
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0;
}
#pageNotAuth .wrapper .btn[b-z6keszfm5b] {
    white-space: nowrap;
    margin-bottom: 1rem;
}
#pageNotAuth .wrapper .btn[b-z6keszfm5b]  svg {
    width: 25px;
    height: 25px;
    vertical-align: -6px;
    margin-left: .25rem;
}



/*HP*/
@media screen and (max-width: 767px) {
    #pageNotAuth[b-z6keszfm5b] {
        padding: 2rem 1.5rem;
    }
    #pageNotAuth .wrapper[b-z6keszfm5b] {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 2rem;
    }
    #pageNotAuth .wrapper div svg[b-z6keszfm5b] {
        width: 70px;
        height: 70px;
    }
    #pageNotAuth .wrapper p:first-of-type[b-z6keszfm5b] {
        font-size: 1.75rem;
    }
    #pageNotAuth .wrapper p:last-child[b-z6keszfm5b] {
        font-size: .9rem;
    }
    #pageNotAuth .wrapper .btn[b-z6keszfm5b] {
        width: 100%;
    }
}
/* /Pages/VersiAplikasi.razor.rz.scp.css */

.history-versi[b-ohp3p1u5fe] {
    height: 100%;
    color: var(--black);
    padding: .25rem 0 2rem 0;
}
.item-versi[b-ohp3p1u5fe] {
    position: relative;
    padding-left: 2rem;
}
.item-versi:not(:last-child)[b-ohp3p1u5fe] {
    margin-bottom: 2rem;
}
.item-versi[b-ohp3p1u5fe]::before {
    content: '';
    position: absolute;
    left: 0;
    top: .5rem;
    width: 15px;
    height: 15px;
    border: 3px solid var(--line);
    border-radius: 50%;
}
.item-versi[b-ohp3p1u5fe]::after {
    content: '';
    position: absolute;
    left: calc(.6rem - 3px);
    top: calc(15px + .75rem);
    width: 0;
    height: calc(100% + 15px);
    border-left: 2px dashed var(--line);
}
.item-versi:last-of-type[b-ohp3p1u5fe]::after {
    display: none;
}
.item-versi:first-child[b-ohp3p1u5fe]::before,
.item-versi:first-child[b-ohp3p1u5fe]::after {
    border-color: var(--primary);
}

.nomor[b-ohp3p1u5fe] {
    color: var(--grey);
    margin-bottom: .5rem;
}
.nomor p:first-child[b-ohp3p1u5fe] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0;
}
.item-versi:first-child .nomor p:first-child[b-ohp3p1u5fe] {
    position: relative;
    color: var(--black);
    width: fit-content;
}
.item-versi:first-child .nomor p:first-child[b-ohp3p1u5fe]::after {
    content: 'BARU';
    position: absolute;
    top: .25rem;
    left: calc(100% + .75rem);
    color: var(--putih);
    font-size: .65rem;
    font-weight: 600;
    padding: .15rem .55rem;
    background-color: var(--primary);
    border-radius: 2rem;
}
.nomor p:last-child[b-ohp3p1u5fe] {
    font-size: .9rem;
    font-weight: 400;
    margin-bottom: 0;
}

.detail ul[b-ohp3p1u5fe] {
    color: var(--grey);
    font-size: 1rem;
    margin: 0;
}
.detail > ul[b-ohp3p1u5fe] {
    padding-left: 1rem;
}
.item-versi:first-child .detail ul[b-ohp3p1u5fe] {
    color: var(--black);
}
.detail ul li[b-ohp3p1u5fe] {
    font-weight: 400;
}


.icon[b-ohp3p1u5fe] {
    position: absolute;
    inset: 0;
    text-align: right;
    pointer-events: none;
}
.icon[b-ohp3p1u5fe]  svg {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    color: var(--primary);
    width: 10rem;
    height: 10rem;
    opacity: .15;
    pointer-events: none;
}