@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url(variables.css);
@import url(css-svg-icons.css);

/*#region ================== DEFAULT */
    *, ::before, ::after {
        box-sizing: border-box;
    }
    html, body {
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        font-style: normal;
    }
    a, .btn-link {
        color: var(--primary);
        text-decoration: none;
    }

    body,
    body.dark {
        background: var(--white);
    }
/*#endregion ================== DEFAULT END */

/*#region ================== ERROR UI */
    #blazor-error-ui {
        display: none;
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 9999;
    }
    #blazor-error-ui .error-wrapper {
        position: relative;
        display: flex;
        align-items: flex-end;
        gap: .5rem;
        padding: .5rem .75rem 0 .75rem;
        padding-bottom: 0;
        background: linear-gradient(to right, #de3326, var(--red) 30%, #ff5c50);
        animation: errorShow .5s ease;
    }
    @keyframes errorShow {
        from {
            transform: translateY(100%);
            opacity: 0;
        }
    }
    #blazor-error-ui .error-img {
        --size: 115px;
        position: relative;
        width: var(--size);
        height: calc(var(--size) / 2);
    }
    #blazor-error-ui img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: var(--size);
        height: var(--size);
    }
    #blazor-error-ui .error-info {
        padding-bottom: 1rem;
    }
    #blazor-error-ui p:first-child {
        color: var(--putih);
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 0;
    }
    #blazor-error-ui p:last-child {
        color: var(--putih);
        font-size: .9rem;
        font-weight: 400;
        line-height: 1.3;
        margin-bottom: .5rem;
    }
    #blazor-error-ui .reload {
        color: var(--red);
        font-size: .8rem;
        font-weight: 600;
        padding: .25rem .75rem;
        background-color: #ffeb3b;
        border-radius: 3rem;
    }
/*#endregion ================== ERROR UI END */

/*#region ================== VALIDATION MESSAGE */
    :where(:not(.validation-errors)) > .validation-message {
        position: absolute;
        bottom: -.5rem;
        color: var(--putih);
        font-size: .6rem;
        font-weight: 400;
        text-transform: initial !important;
        padding: .1rem .5rem .1rem .2rem;
        background-color: var(--red);
        border-radius: 0 .35rem .35rem .35rem;
        user-select: none;
        pointer-events: none;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        z-index: 10;
    }
    :where(:not(.validation-errors)) > .validation-message::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        vertical-align: -2px;
        margin-right: .2rem;
        background-color: currentColor;
        mask-image: var(--infoIcon);
        -webkit-mask-image: var(--infoIcon);
    }
/*#endregion ================== VALIDATION MESSAGE END */

/*#region ================== APP LOADING */
    .loading-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
    }
    .loading-wrapper .loading-anim {
        position: relative;
        width: fit-content;
        height: fit-content;
        margin-bottom: 1.25rem;
    }
    .loading-wrapper .loading-progress-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--primary);
        font-size: .9rem;
        font-weight: 600;
        text-align: center;
    }
    .loading-wrapper .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "0%");
    }
    .loading-wrapper .njp-circle {
        position: relative;
        width: 6rem;
        height: 6rem;
    }

    .loading-wrapper .njp-circle .njp-child {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .loading-wrapper .njp-circle .njp-child:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 15%;
        height: 15%;
        background-color: var(--primary);
        border-radius: 100%;
        -webkit-animation: njp-circleBounceDelay 1.2s infinite ease-in-out both;
        animation: njp-circleBounceDelay 1.2s infinite ease-in-out both;
    }
    .loading-wrapper .njp-circle .njp-circle2 {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .loading-wrapper .njp-circle .njp-circle3 {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    .loading-wrapper .njp-circle .njp-circle4 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    .loading-wrapper .njp-circle .njp-circle5 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    .loading-wrapper .njp-circle .njp-circle6 {
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }
    .loading-wrapper .njp-circle .njp-circle7 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    .loading-wrapper .njp-circle .njp-circle8 {
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }
    .loading-wrapper .njp-circle .njp-circle9 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    .loading-wrapper .njp-circle .njp-circle10 {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    .loading-wrapper .njp-circle .njp-circle11 {
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }
    .loading-wrapper .njp-circle .njp-circle12 {
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }
    .loading-wrapper .njp-circle .njp-circle2:before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    .loading-wrapper .njp-circle .njp-circle3:before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }
    .loading-wrapper .njp-circle .njp-circle4:before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    .loading-wrapper .njp-circle .njp-circle5:before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    .loading-wrapper .njp-circle .njp-circle6:before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }
    .loading-wrapper .njp-circle .njp-circle7:before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }
    .loading-wrapper .njp-circle .njp-circle8:before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }
    .loading-wrapper .njp-circle .njp-circle9:before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }
    .loading-wrapper .njp-circle .njp-circle10:before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }
    .loading-wrapper .njp-circle .njp-circle11:before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }
    .loading-wrapper .njp-circle .njp-circle12:before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }

    @-webkit-keyframes njp-circleBounceDelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes njp-circleBounceDelay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }

        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    .loading-wrapper .loading-company {
        color: var(--black);
        font-size: 1.5rem;
        font-weight: 800;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 0;
    }
    /*.loading-progress circle:last-child {
        stroke: #1b6ec2;
        stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
        transition: stroke-dasharray 0.05s ease-in-out;
    }*/
/*#endregion ================== APP LOADING END */

/*#region ================== CUSTOM BUTTON */
    .btn {
        text-transform: uppercase;
        border-radius: .5rem;
    }
    .btn-primary {
        color: var(--putih);
        background-color: var(--primary);
        border-color: var(--primary);
    }
    .btn-primary:hover {
        background-color: var(--primary-hover);
        border-color: var(--primary-hover);
    }
    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: none;
    }
    .btn.square {
        height: 37.6px;
        aspect-ratio: 1;
        padding: .3rem;
    }
    .btn.square svg {
        width: 100%;
        height: 100%;
        vertical-align: unset;
    }

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: none;
    }
/*#endregion ================== CUSTOM BUTTON END */

/*#region ================== FLOATING INPUT */
    .sp-float-group {
        position: relative;
        display: block;
    }
    .sp-float-group :is(input, textarea)::placeholder,
    .blazored-typeahead__input::placeholder {
        color: transparent;
    }

    .sp-float-group label {
        position: absolute;
        top: 50%;
        left: .75rem;
        transform: translateY(-50%);
        color: var(--grey);
        font-size: .9rem;
        font-weight: 400;
        text-transform: capitalize;
        transition: var(--anim);
        pointer-events: none;
        z-index: 5;
    }
    .sp-float-group.lg label {
        left: 1rem;
    }
    .sp-float-group.area label {
        top: 1.25rem;
    }
    .sp-float-group:has(input:focus, input:not(:placeholder-shown)) label,
    .sp-float-group:has(textarea:focus, textarea:not(:placeholder-shown)) label,
    .sp-float-group:has(.blazored-typeahead__input-hidden, .blazored-typeahead__input-mask-wrapper--disabled) label,
    .sp-float-group:has(select) label {
        top: -1px;
        left: .5rem;
        color: var(--primary);
        font-size: .7rem;
        padding: 0 .25rem;
        background-color: var(--white);
        border-radius: 0 0 .25rem .25rem;
    }
    .sp-float-group.lg:has(input:focus, input:not(:placeholder-shown)) label {
        left: .75rem;
    }
    .sp-float-group label::after {
        content: ' . . .'
    }
    .sp-float-group:has(input:focus, input:not(:placeholder-shown)) label::after,
    .sp-float-group:has(textarea:focus, textarea:not(:placeholder-shown)) label::after,
    .sp-float-group:has(.blazored-typeahead__input-hidden) label::after,
    .sp-float-group:has(select) label::after {
        display: none;
    }
    .sp-float-group .form-control {
        outline: none;
        transition: var(--anim);
    }
    .sp-float-group .form-control::placeholder {
        opacity: 0;
    }
    .sp-float-group .form-control:focus,
    .sp-float-group .blazored-typeahead:has(.blazored-typeahead__input:focus) {
        box-shadow: 2px 4px 10px #00000025;
        border-color: var(--primary-hover);
    }
    .sp-float-group .show {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        aspect-ratio: 1;
        color: var(--grey);
        border-radius: 0 .35rem .35rem 0;
        cursor: pointer;
    }
    .sp-float-group input:focus ~ .show {
        color: var(--primary);
    }
    .sp-float-group .show svg {
        width: 25px;
        height: 25px;
    }
    .sp-float-group .show svg:last-child,
    .sp-float-group input[type="password"] ~ .show svg:first-child {
        display: none;
    }
    .sp-float-group input[type="password"] ~ .show svg:last-child {
        display: block;
    }
/*#endregion ================== FLOATING INPUT END */

/*#region ================== BLAZOR BOOTSTRAP */
    .row .group {
        position: relative;
        margin-bottom: .65rem;
    }
    .row .group > label {
        color: var(--black);
        font-size: .8rem;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: .25rem;
    }

    .form-control {
        text-transform: uppercase;
    }
    .form-control:disabled {
        color: var(--grey);
        background-color: hsl(from var(--grey) h s 85);
        pointer-events: none;
    }
    body.dark * :is(.form-control, .form-select) {
        color: var(--putih) !important;
        background-color: hsl(from var(--hitam) h s 35) !important;
        border-color: var(--line) !important;
    }
    body.dark * .form-control:is(:hover, :focus),
    body.dark * .form-select:is(:hover, :focus) {
        border-color: var(--primary) !important;
    }
    body.dark * .form-control::placeholder {
        color: var(--grey);
    }
    body.dark * .form-control:disabled {
        color: hsl(from var(--grey) h s 50) !important;
        background-color: hsl(from var(--grey) h s 20) !important;
    }

    .modal-backdrop,
    .modal-backdrop.show {
        display: none !important;
    }
    .modal {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .5);
    }
    .modal-dialog {
        display: flex;
        align-items: center;
        height: 100%;
        margin-top: 0;
        margin-bottom: 0;
        padding: .75rem;
    }
    .modal-content {
        max-height: -webkit-fill-available;
        background-color: var(--white);
        border-radius: .75rem;
        box-shadow: 0 0 20px #00000050;
    }
    .modal-header {
        padding: .75rem;
        background-color: var(--white) !important;
        border-color: var(--line) !important;
    }
    .modal-header p {
        color: var(--black);
        font-size: .9rem;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 0;
    }
    .modal-header button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 27px;
        height: 27px;
        font-size: .9rem;
        color: var(--grey);
        padding: .1rem;
        background-color: transparent;
        border: none;
        border-radius: 50%;
        outline: none;
        transition: var(--anim);
    }
    .modal-header button:hover {
        color: var(--red);
        background-color: hsl(from var(--red) h s l / .25);
    }
    .modal-body {
        flex: 1;
        padding: 0;
        overflow: hidden auto;
    }
    .modal-footer {
        gap: .5rem;
        padding: .75rem;
        border-color: var(--line) !important;
    }
    .modal-footer > * {
        margin: 0;
    }
/*#endregion ================== BLAZOR BOOTSTRAP END */

/*#region ================== NETCODE HUB */
    dialog {
        padding: 0;
        border: none;
        border-radius: .7rem;
        box-shadow: 0 0 20px #00000050;
    }
    dialog[open] {
        display: flex;
    }
    dialog::backdrop {
        background: rgba(0, 0, 0, 0.5);
    }
    dialog form[method="dialog"] {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    dialog .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .5rem 1rem;
        border-bottom: 1px solid var(--line);
        user-select: none;
    }
    dialog .dialog-header p {
        font-size: .9rem;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 0;
    }
    dialog .dialog-header button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        padding: 0;
        color: var(--red);
        background-color: transparent;
        border: none;
        outline: none;
        border-radius: 50%;
        transition: var(--anim);
    }
    dialog .dialog-header button:hover {
        background-color: hsl(from var(--red) h s l / .25);
    }
    dialog .dialog-header button svg {
        width: 75%;
        height: 75%;
    }
    dialog .dialog-content {
        position: relative;
        flex: 1;
        padding: 1rem;
        overflow: hidden auto;
    }
    dialog .dialog-buttons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: .5rem;
        padding: 1rem;
    }
    dialog menu {
        padding: 0;
        margin: 0;
    }
/*#endregion ================== NETCODE HUB END */

/*#region ================== SYNCFUSION */
    .e-dlg-container .e-dialog {
        height: fit-content !important;
        max-height: 700px !important;
        background-color: var(--white);
        border-radius: .75rem;
        transition: var(--anim);
    }
    .e-dlg-container .e-dialog .e-dlg-content {
        display: flex;
        flex-direction: column;
        padding: 0 !important;
        background-color: var(--white);
        border-radius: 0 0 .75rem .75rem;
    }
    :is(#warningPopup, #logoutPopup, #printAlertPopup).e-dialog .e-dlg-content {
        border-radius: .75rem;
    }
    .e-dlg-container .e-dialog .e-dlg-content .isi {
        position: relative;
        flex: 1;
        min-height: 150px;
        padding: 1rem;
        overflow: hidden auto;
    }
    .e-dlg-container .e-dialog .e-dlg-content:has(.tombol) .isi {
        padding: 1rem 1rem 0 1rem;
    }

    /*MODAL FULL STYLE*/
    .e-dlg-container .e-dialog.e-dlg-fullscreen {
        max-height: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    .e-dlg-container .e-dialog .e-dlg-header-content {
        padding: 0;
        background-color: var(--white);
        border-radius: .75rem .75rem 0 0;
    }
    .e-dlg-container .e-dialog .e-dlg-header * {
        color: inherit;
    }
    .e-dlg-container .e-dialog .e-dlg-header {
        position: relative;
        top: 0;
        width: auto;
    }
    .e-dlg-container .e-dialog .e-dlg-content.hide-content,
    .e-dlg-container .e-dialog .e-footer-content.hide-content,
    .e-dlg-container .e-dialog.hide-content .e-dlg-content,
    .e-dlg-container .e-dialog.hide-content .e-footer-content {
        display: none;
    }

    /*MULTISELECT*/
    .e-multi-select-wrapper {
        min-height: 37.6px;
        padding: 3px 32px 0 2px;
    }
    .e-multi-select-wrapper .e-multi-searcher:not(.e-multiselect-box) input[type=text],
    .e-multiselect.e-control-container .e-multi-select-wrapper .e-delim-values,
    .e-multiselect.e-control-container.e-input-group .e-multi-select-wrapper .e-delim-values {
        text-transform: uppercase;
    }
    .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
    .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
    .e-input-group.e-success,
    .e-input-group.e-control-wrapper.e-success,
    .e-input-group.e-success:not(.e-float-icon-left),
    .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
    .e-input-group.e-error,
    .e-input-group.e-control-wrapper.e-error,
    .e-input-group.e-error:not(.e-float-icon-left),
    .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
        border-radius: .35rem;
    }
    .e-float-input .e-clear-icon,
    .e-float-input.e-control-wrapper .e-clear-icon,
    .e-input-group .e-clear-icon,
    .e-input-group.e-control-wrapper .e-clear-icon {
        color: var(--red) !important;
    }
    .e-multi-select-wrapper .e-chips .e-chips-close::before {
        -webkit-text-fill-color: var(--red) !important;
        color: var(--red) !important;
    }

    body.dark * .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
    body.dark * .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
    body.dark * .e-input-group.e-success,
    body.dark * .e-input-group.e-control-wrapper.e-success,
    body.dark * .e-input-group.e-success:not(.e-float-icon-left),
    body.dark * .e-input-group.e-control-wrapper.e-success:not(.e-float-icon-left),
    body.dark * .e-input-group.e-error,
    body.dark * .e-input-group.e-control-wrapper.e-error,
    body.dark * .e-input-group.e-error:not(.e-float-icon-left),
    body.dark * .e-input-group.e-control-wrapper.e-error:not(.e-float-icon-left) {
        background-color: hsl(from var(--hitam) h s 35) !important;
        border-color: var(--line) !important;
    }
    body.dark * .e-multi-select-wrapper .e-chips {
        background-color: hsl(from var(--hitam) h s 40) !important;
    }
    body.dark * .e-multi-select-wrapper .e-chips > .e-chipcontent,
    body.dark * .e-multi-select-wrapper .e-chips.e-chip-selected > .e-chipcontent {
        color: var(--putih) !important;
        -webkit-text-fill-color: var(--putih) !important;
    }
    body.dark * .e-multi-select-wrapper .e-delim-values {
        color: var(--putih) !important;
        -webkit-text-fill-color: var(--putih) !important;
    }
/*#endregion ================== SYNCFUSION END */

/*#region ================== CUSTOM SCROLLBAR */
    *::-webkit-scrollbar {
      width: 9px;
    }
    *::-webkit-scrollbar-thumb {
      background: linear-gradient(to bottom, hsl(from var(--primary) h s 75), hsl(from var(--primary) h s 85));
      border-radius: 10rem;
      border: 3px solid var(--white);
    }
    *::-webkit-scrollbar-track-piece:start {
      background: transparent;
    }
    *::-webkit-scrollbar-track-piece:end {
      background: transparent;
    }
/*#endregion ================== CUSTOM SCROLLBAR END */

/*#region ================== CUSTOM TOOLTIP */
    .spTooltip {
        position: relative;
        display: inline-block;
        width: fit-content;
    }
    .spTooltip:hover::before {
        content: attr(tooltip-text);
        display: block;
        position: absolute;
        bottom: 1.65rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: .75rem;
        font-weight: 400;
        line-height: 1.3;
        text-align: center;
        padding: .5rem;
        color: var(--white);
        background-color: var(--black);
        border-radius: .5rem;
        pointer-events: none;
        z-index: 99;
    }
    .spTooltip.nowrap:hover::before {
        white-space: nowrap;
    }
    .spTooltip.small:hover::before {
        width: 110px;
    }
    .spTooltip.medium:hover::before {
        width: 150px;
    }
    .spTooltip.large:hover::before {
        width: 200px;
    }
    .spTooltip.tipBottom:hover::before {
        top: 1.55rem;
        bottom: auto;
    }
    .spTooltip.tipLeft:hover::before {
        top: 50%;
        bottom: auto;
        left: calc(-80px + -10px);
        transform: translate(0, -50%);
    }
    .spTooltip.tipLeft.small:hover::before {
        left: calc(-110px + -10px);
    }
    .spTooltip.tipLeft.medium:hover::before {
        left: calc(-150px + -10px);
    }
    .spTooltip.tipLeft.large:hover::before {
        left: calc(-200px + -10px);
    }
    .spTooltip.tipRight:hover::before {
        top: 50%;
        bottom: auto;
        left: unset;
        right: calc(-80px + -10px);
        transform: translate(0, -50%);
    }
    .spTooltip.tipRight.small:hover::before {
        right: calc(-110px + -10px);
    }
    .spTooltip.tipRight.medium:hover::before {
        right: calc(-150px + -10px);
    }
    .spTooltip.tipRight.large:hover::before {
        right: calc(-200px + -10px);
    }
    .spTooltip:hover::after {
        content: '';
        position: absolute;
        bottom: 1.22rem;
        left: 50%;
        transform: translateX(-50%);
        width: 15px;
        height: 10px;
        border-top: 8px solid var(--black);
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        pointer-events: none;
        z-index: 99;
    }
    .spTooltip.tipBottom:hover::after {
        top: 1.12rem;
        bottom: auto;
        border-top: none;
        border-bottom: 8px solid var(--black);
    }
    .spTooltip.tipLeft:hover::after {
        top: 50%;
        bottom: unset;
        left: -12px;
        transform: translate(0, -50%);
        border-top-color: transparent;
        border-bottom: 8px solid transparent;
        border-left-color: var(--black);
        border-right: none;
    }
    .spTooltip.tipRight:hover::after {
        top: 50%;
        bottom: unset;
        left: unset;
        right: -12px;
        transform: translate(0, -50%);
        border-top-color: transparent;
        border-bottom: 8px solid transparent;
        border-right-color: var(--black);
        border-left: none;
    }
/*#endregion ================== CUSTOM TOOLTIP END */

/*#region ================== HIDE ARROW INPUT NUMBER */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    /* Firefox */
    input[type=number] {
        -moz-appearance: textfield;
    }
/*#endregion ================== HIDE ARROW INPUT NUMBER END */

/*#region ================== TOMBOL AKSI MODAL */
    .aksi-btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: .5rem;
    }
    .aksi-btn svg {
        width: 20px;
        height: 20px;
        vertical-align: -4px;
    }
    .aksi-btn .btn span {
        margin-left: .25rem;
    }
    .aksi-btn .dropdown-toggle {
        width: 37.6px;
        padding-inline: .25rem;
    }
    .dropdown-toggle::after {
        display: none;
    }
    .aksi-btn .dropdown-toggle svg {
        margin-right: 0;
    }
    .dropdown-menu {
        background-color: var(--white);
        box-shadow: 3px 5px 20px #00000030;
    }
    .aksi-btn .dropdown-menu li .dropdown-item {
        color: var(--black);
        text-transform: uppercase;
    }
    .aksi-btn .dropdown-menu li:last-child .dropdown-item {
        color: var(--red);
    }
    .aksi-btn .dropdown-menu li .dropdown-item:hover {
        background-color: var(--primary-hover-trans);
    }
/*#endregion ================== TOMBOL AKSI MODAL END */

/*#region ================== SVG SPRITES */
    .spIcon {
        display: inline-block;
        fill: currentColor;
    }
/*#endregion ================== SVG SPRITES END */

/*#region ================== BLAZORED TOAST */
    #infoToast .position-topright {
        z-index: 999999;
    }
/*#endregion ================== BLAZORED TOAST END */

/*#region ================== BLAZORED TYPEAHEAD */
    .blazored-typeahead {
        color: var(--hitam);
        background-color: var(--putih);
        border: 1px solid var(--line);
        border-radius: .35rem;
    }
    .blazored-typeahead:focus-within {
        /*box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);*/
        box-shadow: none;
    }
    .blazored-typeahead.valid.modified {
        border-color: var(--line) !important;
    }

    .blazored-typeahead__input {
        font-size: 1rem;
        text-transform: uppercase;
        padding: .375rem .75rem;
        border-radius: .5rem;
    }
    body.dark * .blazored-typeahead,
    body.dark * .blazored-typeahead__input,
    body.dark * .blazored-typeahead__input-mask-wrapper--disabled {
        color: var(--putih) !important;
        background-color: hsl(from var(--hitam) h s 35) !important;
        border-color: var(--line) !important;
    }
    .blazored-typeahead__input-mask {
        min-height: 37.6px;
        padding: .375rem .75rem;
    }
    .blazored-typeahead__input-mask span {
        font-size: 1rem;
        font-weight: 400;
        text-transform: uppercase;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .blazored-typeahead__clear {
        display: none;
    }
    .blazored-typeahead__loader {
        position: absolute;
        top: 6px;
        right: 2px;
        background-color: var(--primary);
    }
    .blazored-typeahead .clear-ta {
        position: absolute;
        top: 6px;
        right: 2px;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        color: var(--red);
        padding: .15rem;
        background: var(--putih);
        border: none;
        outline: none;
    }
    body.dark * .blazored-typeahead .clear-ta {
        background-color: hsl(from var(--hitam) h s 35) !important;
    }
    .blazored-typeahead .clear-ta svg {
        width: 100%;
        height: 100%;
    }
    .blazored-typeahead__input-mask-wrapper--disabled .clear-ta {
        display: none;
    }

    .blazored-typeahead__results {
        top: calc(100% + .25rem);
        max-height: 250px;
        background-color: var(--putih);
        border-radius: .5rem !important;
    }
    body.dark * .blazored-typeahead__results::-webkit-scrollbar-thumb {
        border-color: hsl(from var(--hitam) h s 30);
    }
    body.dark * .blazored-typeahead__results {
        background-color: hsl(from var(--hitam) h s 35) !important;
    }
    .blazored-typeahead__result {
        font-weight: 400;
        padding: .25rem .5rem !important;
        border-bottom: 1px solid var(--line);
        user-select: none;
    }
    .blazored-typeahead__active-item,
    .blazored-typeahead__result:hover,
    .blazored-typeahead__result:focus {
        color: var(--putih) !important;
        background-color: var(--primary);
        border-top: 1px solid var(--primary);
        border-bottom: 1px solid var(--primary);
    }
    .blazored-typeahead__results-footer {
        position: sticky;
        bottom: 0;
        margin-top: .5rem;
        background-color: var(--putih);
    }

    .not-found-ta {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 2rem 1rem;
        border: 1px solid var(--line);
        border-radius: .5rem;
    }
    .not-found-ta img {
        width: 100px;
        aspect-ratio: 1;
        margin-bottom: .75rem;
    }
    .not-found-ta p:nth-of-type(1) {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: .25rem;
    }
    .not-found-ta p:nth-of-type(2) {
        color: var(--grey);
        font-size: .85rem;
        font-weight: 400;
        line-height: 1.3;
        margin-bottom: 0;
    }

    .not-found-ta.mini {
        padding: 1.25rem .5rem;
    }
    .not-found-ta.mini svg {
        width: 40px;
        height: 40px;
        margin-bottom: .75rem;
    }
    .not-found-ta.mini p:nth-of-type(1) {
        line-height: 1.3;
    }
/*#endregion ================== BLAZORED TYPEAHEAD END */

/*#region ================== TOOGLE SWITCH */
    .toggle-switch {
      --tgl-width: 35px;
      --tgl-gap: 8%;
      --bg: #eaeaea;
      --bg-active: limegreen;
      --anim: .2s ease;

      display: flex;
      align-items: center;
      gap: .75rem;
      cursor: pointer;
    }
    body.dark .toggle-switch {
      --bg: var(--grey);
    }
    .toggle-switch input {
      appearance: none;
      position: relative;
      display: block;
      width: var(--tgl-width);
      aspect-ratio: 15 / 9;
      margin: 0;
      background-color: var(--bg);
      border-radius: 3rem;
      box-shadow: 0 0 5px #00000020 inset;
      transition: var(--anim);
      overflow: hidden;
      cursor: pointer;
    }
    .toggle-switch input:checked {
      background-color: var(--bg-active);
    }
    .toggle-switch input::before {
      content: '';
      position: absolute;
      top: 50%;
      left: calc(var(--tgl-gap) + 1px);
      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-switch input:checked::before {
      left: calc(var(--tgl-width) / 2 - calc(var(--tgl-gap) * .2));
    }
    .toggle-switch span {
      display: inline-block;
      font-size: 1rem;
      font-weight: 400;
      white-space: nowrap;
    }
/*#endregion ================== TOOGLE SWITCH END */

/*#region ================== OBSERVER TEXT */
    .observer-text {
        height: 1px;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
    }
/*#endregion ================== OBSERVER TEXT END */

/*#region ================== LAZYLOAD CONTROL */
    .IndexMasterSupplier.admin .item-index :is(#lazySkeleton:nth-child(6), #lazySkeleton:last-child) {
        display: none;
    }
/*#endregion ================== LAZYLOAD CONTROL END */

/*#region ================== CHART */
    #invoiceChartDb * {
        font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !important;
        font-style: normal;
    }
    #invoiceChartDb * text {
        fill: var(--grey);
    }
/*#endregion ================== CHART END */




/*#region ================== XXX */
    /**::-webkit-scrollbar {
        display: none;
    }
    .row .group {
        margin-bottom: 1rem;
    }*/
/*#endregion ================== XXX END */







/* ====================== HP ====================== */
@media (max-width: 767px) {
    *::-webkit-scrollbar {
        display: none;
    }
    .row .group {
        margin-bottom: 1rem;
    }

    /*#region ================== SYNCFUSION */
        :not(:is(#warningPopup, #logoutPopup, #printAlertPopup)).e-dialog {
            width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            border-radius: 0;
        }
        :not(:is(#warningPopup, #logoutPopup, #printAlertPopup)).e-dialog .e-dlg-content {
            border-radius: 0;
        }
    /*#endregion ================== SYNCFUSION END */

    /*#region ================== LAZYLOAD CONTROL */
    :where(.IndexMasterBarang, .IndexMasterEngine, .IndexMasterJenis, .IndexMasterKota, .IndexMasterMekanik, .IndexMasterUnit,
        .IndexMasterMerek, .IndexMasterModel, .IndexMasterPelanggan, #historyPenawaranMasterPelanggan, #historyInvoiceMasterPelanggan,
        .IndexMasterSupplier, #historyItemMasterSupplier, #historyPembelianMasterSupplier, .IndexPenerimaanBarang, .IndexPenawaran,
        .IndexInvoice, #invoicePilihPenawaran, .IndexUserManagement,
        .IndexPembelian, #pilihItemembelian, #detailPenerimaanDB, #detailPembelianDB, #detailPenawaranDB, #detailInvoiceDB)
        .item-index #lazySkeleton:first-child {
        height: 1.4rem !important;
        margin-top: .25rem !important;
        margin-bottom: .25rem !important;
    }
    :where(.IndexMasterBarang, .IndexMasterEngine, .IndexMasterJenis, .IndexMasterKota, .IndexMasterMekanik, .IndexMasterUnit,
        .IndexMasterMerek, .IndexMasterModel, .IndexMasterPelanggan, #historyPenawaranMasterPelanggan, #historyPenawaranMasterPelanggan,
        .IndexMasterSupplier, #historyItemMasterSupplier, #historyPembelianMasterSupplier, .IndexPenerimaanBarang, .IndexPenawaran,
        .IndexInvoice, #invoicePilihPenawaran, .IndexUserManagement,
        .IndexPembelian, #pilihItemembelian, #detailPenerimaanDB, #detailPembelianDB, #detailPenawaranDB, #detailInvoiceDB)
        .item-index #lazySkeleton:not(:first-child) {
        height: .8rem !important;
        margin-top: .5rem !important;
    }

    .IndexMasterBarang .item-index :is(#lazySkeleton:nth-child(4), #lazySkeleton:nth-child(5), #lazySkeleton:nth-child(6)),
    .IndexMasterMekanik .item-index #lazySkeleton:nth-child(3),
    .IndexMasterPelanggan .item-index :is(#lazySkeleton:nth-child(3), #lazySkeleton:last-child),
    .IndexMasterSupplier .item-index :is(#lazySkeleton:nth-child(2), #lazySkeleton:nth-child(5)),
    .IndexUserManagement, .item-index :is(#lazySkeleton:nth-child(6), #lazySkeleton:nth-child(7)),
    .IndexMasterSupplier.admin .item-index :is(#lazySkeleton:nth-child(2), #lazySkeleton:nth-child(5), #lazySkeleton:nth-child(6), #lazySkeleton:nth-child(7)),
    .IndexPenerimaanBarang .item-index :is(#lazySkeleton:nth-child(3), #lazySkeleton:nth-child(4), #lazySkeleton:nth-child(5), #lazySkeleton:nth-child(6), #lazySkeleton:nth-child(9), #lazySkeleton:last-child),
    .IndexPenawaran .item-index :is(#lazySkeleton:nth-child(6), #lazySkeleton:nth-child(7), #lazySkeleton:nth-child(8), #lazySkeleton:nth-child(9), #lazySkeleton:nth-child(10), #lazySkeleton:nth-child(11), #lazySkeleton:nth-child(12), #lazySkeleton:last-child),
    .IndexInvoice .item-index :is(#lazySkeleton:nth-child(6), #lazySkeleton:nth-child(7), #lazySkeleton:nth-child(8), #lazySkeleton:nth-child(9), #lazySkeleton:nth-child(10), #lazySkeleton:nth-child(11), #lazySkeleton:nth-child(12), #lazySkeleton:last-child),
    .IndexPembelian .item-index :is(#lazySkeleton:nth-child(5), #lazySkeleton:nth-child(6), #lazySkeleton:last-child) {
        display: none;
    }
    /*#endregion ================== LAZYLOAD CONTROL END */
}


/* ====================== TABLET ====================== */
@media (min-width: 768px) {
    #blazor-error-ui .error-wrapper {
        gap: 1rem;
        padding: 1rem 1.5rem 0 1.5rem;
    }
    #blazor-error-ui .error-info {
        padding-bottom: .75rem;
    }
    #blazor-error-ui .reload {
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        margin-top: .25rem;
    }
}