/*#region ====================== VARIABLE ======================*/
    :root {
        --abang: #f44336;
        --kuning: #f1d302;
        --ijo: #4caf50;
        --oren: #ff9800;
        --abu: #DEE2E6;
        --ireng: #3F3F3F;
        --biru: #679BC4;
        --biruTua: #497da7;
        --ungu: #8D73AF;
    }
/*#endregion*/

/*#region ====================== DEFAULT ======================*/
    /*#region >>>>> BAWAAN BLAZOR*/
    html, body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    a, .btn-link {
        color: #0366d6;
    }
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }
    .invalid {
        outline: 1px solid red;
    }
    .validation-message {
        color: red;
    }
    #blazor-error-ui {
        background: lightyellow;
        bottom: 0;
        box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
        display: none;
        left: 0;
        padding: 0.6rem 1.25rem 0.7rem 1.25rem;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }
    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    .loadingAnimation {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        margin: 0;
        background-color: #f8f8f8;
    }
    .loadingAnimation span {
        --start: 0px 0 transparent;
        --end: 180px 0 transparent;
        --primary: #B8A9CD;
        --secondary: #8D73AF;

        position: relative;
        display: inline-block;
        left: -90px;
        width: 20px;
        height: 20px;
        color: var(--primary);
        animation: movingBlock 1.8s linear infinite;
    }
    .loadingAnimation span::before {
        content: 'tunggu sebentar...';
        position: absolute;
        bottom: -2rem;
        left: 1rem;
        width: 180px;
        color: #161616;
        font-size: .9rem;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
    }
    @keyframes movingBlock {
        0% {
            box-shadow:
                var(--start),
                var(--start),
                var(--start),
                var(--start)
            ;
        }
        12.5% {
            box-shadow:
                90px 0 var(--primary),
                var(--start),
                var(--start),
                var(--start)
            ;
        }
        25% {
            box-shadow:
               110px 0 var(--secondary),
               90px 0 var(--primary),
               var(--start),
               var(--start) 
            ;
        }
        37.5% {
            box-shadow:
                130px 0 var(--secondary),
                110px 0 var(--secondary),
                90px 0 var(--primary),
                var(--start)
            ;
        }
        50% {
            box-shadow:
                150px 0 var(--primary),
                130px 0 var(--secondary),
                110px 0 var(--secondary),
                90px 0 var(--primary)
            ;
        }
        62.5% {
            box-shadow:
                var(--end),
                150px 0 var(--primary),
                130px 0 var(--secondary),
                110px 0 var(--secondary) 
            ;
        }
        75% {
            box-shadow:
            var(--end),
            var(--end),
            150px 0 var(--primary),
            130px 0 var(--secondary)
            ;
        }
        87.5% {
            box-shadow:
            var(--end),
            var(--end),
            var(--end),
            150px 0 transparent
            ;
        }
        100% {
            box-shadow:
            var(--end),
            var(--end),
            var(--end),
            var(--end) 
            ;
        }
    }
    /*#endregion*/

    /*#region >>>>> KERANGKA*/
    .main {
        overflow: hidden !important;
        display: flex;
        justify-content: center;
    }
    .sidebar {
        background-color: #1B756B !important;
    }
    .nav .nav-item .nav-link {
        color: #fff; 
    }
    .navbar {
        flex-wrap: nowrap;
    }
    .navbar img {
        width: 2.3rem;
        margin-right: .4rem;
    }

    .page {
        height: 100vh;
        background-color: #ececec;
    }
    .page .sidebar .top-row {
        height: 6% !important;
    }
    .page .main .content {
        width: 100%;
        height: 100%;
        background-color: #fff;
    }
    /*#endregion*/

    /*#region >>>>> CUSTOM BS-5*/
    * .btn {
        border-radius: .5rem !important;
    }
    .form-group {
        margin-bottom: 1.25rem;
    }
    .form-group label {
        color: #656565;
        font-size: .85rem;
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: .5rem;
    }
    .form-group .form-control {
        border-radius: .4rem;
    }
    .form-group .form-control::placeholder {
        color: #c3c3c3;
    }
    .btn-block {
        width: 100% !important;
    }
    /*#endregion*/

    /*#region >>>>> CUSTOM TOAST BLAZOR*/
    .blazored-toast-container {
        right: 0;
    }
    .blazored-toast {
        width: 400px !important;
        padding: .4rem 1rem !important;
        margin: .6rem !important;
        margin-top: 0 !important;
        border-radius: 6px;
    }
    .blazored-toast:first-child {
        margin-top: .6rem !important;
    }
    .blazored-toast-icon {
        font-size: 1.8rem !important;
    }
    .blazored-toast-body {
            line-height: 1 !important;
    }
    .blazored-toast-body .blazored-toast-header h5 {
        font-size: 1.1rem !important;
        line-height: 1;
    }
    .blazored-toast-body p {
        font-size: .8rem !important;
        padding-bottom: .7rem !important;
        line-height: 1.5;
        white-space: normal;
        word-break: break-word;
    }
    .blazored-toast-body .blazored-toast-header .blazored-toast-close {
        position: absolute !important;
        right: 3px !important;
        top: 3px !important;
    }
    .blazored-toast-body .blazored-toast-header .blazored-toast-close i {
        font-size: 1rem;
    }
    .blazored-toast-progressbar {
        height: 6px !important;
        border-bottom-left-radius: 6px !important;
        border-bottom-right-radius: 6px !important;
    }
    .blazored-toast-progressbar > span {
        height: 6px !important;
        border-bottom-left-radius: 6px !important;
    }
    /*#endregion*/

    /*#region >>>>> WAVE LAZYLOAD*/
    .wave {
        position: relative;
        overflow: hidden;
        background-color: #dadada
    }
    .wave:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: #e0e0e0;
        background: linear-gradient(to right, rgba(0,0,0,0) 10%, #fdfdfd 20%, rgba(0,0,0,0) 30%);
        background-size: 800px 50px;
        animation: ombak 1.3s linear infinite;
    }
    @keyframes ombak {
        0% {
            background-position: -468px 0;
        }
        100% {
            background-position: 468px 0;
        }
    }
    /*#endregion*/

    /*#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*/

    /*#region >>>>> MODAL WARNING*/
    #areaModalWarning.e-popup.e-popup-open.e-dialog {
        width: 360px;
        max-height: unset !important;
        border: none;
        border-radius: 6px;
    }
    #areaModalWarning.e-dialog .e-dlg-content {
        padding: 1.2rem !important;
        border-radius: 6px;
    }

    #areaModalWarning .isi {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }
    #areaModalWarning .isi img {
        width: 75px;
        height: auto;
        margin-right : .6rem;
    }
    #areaModalWarning .isi p:nth-of-type(1) {
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1;
        margin-bottom: .4rem;
    }
    #areaModalWarning .isi p:nth-of-type(2) {
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 0;
    }
    #areaModalWarning .pesan {
        font-size: .9rem;
        text-align: center;
        padding: 0 .9rem;
        margin-bottom: 0;
    }
    #areaModalWarning .tombol {
        display: flex;
        align-items: center;
        border-top: 1px solid var(--abu);
        padding-top: 1rem;
        margin-top: 1.5rem;
    }
    #areaModalWarning .btn-block {
        margin-top: 0 !important;
    }
    /*#endregion*/

    /*#region >>>>> MODAL DELETE*/
    #modalDelete.e-popup.e-popup-open.e-dialog {
        width: 360px;
        max-height: unset !important;
        border: none;
        border-radius: 1rem !important;
    }
    #modalDelete.e-dialog .e-dlg-content {
        padding: 1.2rem !important;
        border-radius: 6px;
    }

    #modalDelete .isi {
        text-align: center;
        margin-bottom: 1rem;
    }
    #modalDelete .isi img {
        width: 100px;
        margin-bottom: .5rem;
    }
    #modalDelete .isi p {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.4;
        margin-bottom: 0;
    }
    #modalDelete .tombol {
        display: flex;
        align-items: center;
        gap: .5rem;
        border-top: 1px solid var(--abu);
        padding-top: 1rem;
        margin-top: 1.5rem;
    }
    #modalDelete .btn-block {
        margin-top: 0 !important;
        box-shadow: none;
    }
    #modalDelete .tombol span {
        color: #fff;
        background-color: #868686;
        border: 1px solid #868686;
        width: 49%;
        padding: .1rem .3rem;
        font-size: 1rem;
        line-height: 1.5;
        text-align: center;
        border-radius: .25rem;
        cursor: wait;
    }
    #modalDelete .tombol span img {
        width: 28px;
    }
    /*#endregion*/

    /*#region >>>>> SCROLLBAR*/
    *::-webkit-scrollbar {
        height: 18px;
    }
    *::-webkit-scrollbar-track {
        background: transparent;
        margin: 0 1.3rem;
    }
    *::-webkit-scrollbar-thumb {
        background-color: rgb(198,174,230);
        background-image: linear-gradient(to top, rgb(181 155 216) 0%, rgb(121 94 156) 100%);
        border: 4px solid transparent;
        border-radius: 9px;
        background-clip: content-box;
    }
    /*#endregion*/

    /*#region >>>>> CUSTOM SELECT PAKE RADIO*/
    #selectCustom {
        position: relative;
        display: block;
        width: 120px;
        font-size: .9rem;
        user-select: none;
    }
    #selectCustom .opsiTerpilih {
        position: relative;
        cursor: pointer;
        outline: none;
    }

    #selectCustom .itemTerpilih {
        display: flex;
    }
    #selectCustom .itemTerpilih input[type=radio] {
        display: none;
    }
    #selectCustom .itemTerpilih p {
        display: none;
        width: 100%;
        color: var(--ungu);
        font-weight: 600;
        padding: .2rem .5rem;
        margin: 0;
    }
    #selectCustom .itemTerpilih input[type=radio]:checked + p {
        display: block;
    }

    #selectCustom .ikonSelect {
        position: absolute;
        top: 50%;
        right: 0;
        transition: .3s ease;
        transform: translateY(-50%);
        opacity: 0.5;
    }
    #selectCustom .opsiTerpilih .ikonSelect i {
        transition: .3s ease;
    }
    #selectCustom .opsiTerpilih:focus .ikonSelect i {
        transform: rotate(180deg);
    }

    #selectCustom .listOpsi {
        position: absolute;
        top: 2rem;
        width: 100%;
        padding: 0;
        margin: 0;
        color: #60666d;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: .5rem;
        list-style: none;
        opacity: 0;
        -webkit-animation-name: HideList;
        animation-name: HideList;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-timing-function: step-start;
        animation-timing-function: step-start;
        overflow: hidden;
    }
    @-webkit-keyframes HideList {
        from {
            transform: scaleY(1);
        }
        to {
            transform: scaleY(0);
        }
    }
    @keyframes HideList {
        from {
            transform: scaleY(1);
        }
        to {
            transform: scaleY(0);
        }
    }
    #selectCustom .opsiTerpilih:focus + .listOpsi {
        opacity: 1;
        box-shadow: 0 10px 30px 1px rgba(0, 0, 0, 0.1);
        -webkit-animation-name: none;
              animation-name: none;
    }

    #selectCustom .itemOpsi {
        display: block;
        padding: .5rem .7rem;
        margin: 0;
    }
    #selectCustom .itemOpsi:hover,
    #selectCustom .itemOpsi:focus {
        color: #fff;
        background-color: var(--ungu);
    }
    #selectCustom .opsiTerpilih:focus + .listOpsi .itemOpsi {
        cursor: pointer;
    }
    /*#endregion*/
/*#endregion*/

/*#region ====================== ALL ======================*/
    /*#region >>>>> ADD ARTIKEL BARU DAN EDIT ARTIKEL*/
    #addEditArtikel.e-dialog {
        width: 100%;
        max-width: 1000px;
    }
    #addEditArtikel.e-dialog .e-dlg-content {
        display: flex;
        flex-direction: column;
        padding: 0 !important;
    }

    #addEditArtikel .isi {
        flex: 1;
        padding: 1rem;
        overflow-y: auto;
    }
    #addEditArtikel .isi label {
        font-size: .85rem;
        font-weight: 600;
    }
    #addEditArtikel .e-richtexteditor .e-rte-content .e-content,
    #addEditArtikel .e-richtexteditor .e-source-content .e-content {
        min-height: 300px;
    }
    
    #addEditArtikel .isi .wrapperUploadFoto {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 500px;
        overflow: hidden;
        border-radius: 6px;
        background-color: #eeeeee;
        border: 1px solid #cfcfcf;
    }
    #addEditArtikel .isi .wrapperUploadFoto img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #addEditArtikel .isi .wrapperUploadFoto .tblUpload {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: transparent;
        background-color: transparent;
        cursor: pointer;
    }
    #addEditArtikel .isi .wrapperUploadFoto .tblUpload::-webkit-file-upload-button {
        visibility: hidden;
    }

    #addEditArtikel .tombol {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: 1rem;
        background-color: #fff;
    }
    #addEditArtikel .tombol button {
        margin: 0 !important;
    }
    /*#endregion*/

    /*#region >>>>> KONTEN PENDAFTARAN UPGRADE CLASS DAN KELAS BUMIL*/
    #areaPendaftaran .kategoriSeminar {
        display: grid;
        grid-template-columns: max-content max-content;
        gap: .5rem;
        padding: 1.5rem 3rem 0 3rem;
    }
    #areaPendaftaran .kategoriSeminar label {
        margin: 0;
    }
    #areaPendaftaran .kategoriSeminar label span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        color: #a7a7a7;
        background-color: #fff;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1;
        text-align: center;
        padding: .6rem 3rem;
        border: 1px solid #e1e1e1;
        border-bottom: none;
        border-radius: .3rem .3rem 0 0;
        transition: .3s ease;
        transform: skewX(-8deg);
        user-select: none;
        cursor: pointer;
    }
    #areaPendaftaran .kategoriSeminar input[type="radio"] {
        display: none;
    }
    #areaPendaftaran .kategoriSeminar input[type="radio"]:checked + span {
        color: #fff;
        background-color: #a28bc0;
        border-color: #a28bc0;
    }

    #areaPendaftaran .listSeminar {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        gap: .8rem;
        padding: .6rem 1rem;
        margin: 0 1.5rem;
        background-color: #f8f8f8;
        border: 1px solid #e1e1e1;
        border-bottom: none;
        overflow-x: auto;
        overflow-y: hidden;
    }
    #areaPendaftaran label {
        margin: 0;
    }
    #areaPendaftaran input[type="radio"] {
        display: none;
    }
    #areaPendaftaran span {
        display: block;
    }
    #areaPendaftaran .itemSeminar {
        padding: .4rem 1.2rem;
        margin-bottom: 0;
        color: #555;
        background-color: #f1f1f1;
        border: 1px dashed #d1d1d1;
        border-radius: 2rem;
        transition: .3s ease;
        user-select: none;
        cursor: pointer;
    }
    #areaPendaftaran .itemSeminar span:nth-of-type(1) {
        position: relative;
        font-size: .7rem;
        font-weight: 400;
    }
    #areaPendaftaran .itemSeminar span:nth-of-type(2) {
        font-size: .8rem;
        font-weight: 600;
    }
    #areaPendaftaran input[type="radio"]:checked + .itemSeminar {
        color: #6c4b94;
        background-color: #e8def6;
        border: 1px solid #c3b2db;
    }
    #areaPendaftaran .noSeminar {
        font-size: .95rem;
        font-weight: 400;
        padding: .4rem;
        margin-bottom: 0;
        color: tomato;
        user-select: none;
    }
    #areaPendaftaran .noSeminar i {
        font-size: .85rem;
        margin-right: .3rem;
    }

    #areaPendaftaran .isi {
        flex: 1;
        display: flex;
        justify-content: space-between;
        margin: 0 1.5rem 1.5rem 1.5rem;
        background-color: #f8f8f8;
        border: 1px solid #e1e1e1;
        overflow: hidden;
    }
    #areaPendaftaran .isi .sort {
        display: flex;
        flex-direction: column;
        gap: .6rem;
        width: 100%;
        max-width: 250px;
        height: 100%;
        padding: 1rem;
        border-right: 1px dashed #e1e1e1;
    }
    #areaPendaftaran .isi .sort label {
        margin: 0;
    }
    #areaPendaftaran .isi .sort span {
        display: flex;
        align-items: center;
        gap: .5rem;
        color: grey;
        padding: .5rem 1rem;
        border-radius: .3rem;
        transition: .3s ease;
        user-select: none;
        cursor: pointer;
    }
    #areaPendaftaran .isi .sort input[type="radio"] {
        display: none;
    }
    #areaPendaftaran .isi .sort span:hover {
        padding-left: 1.5rem;
    }
    #areaPendaftaran .isi .sort input[type="radio"]:checked + span:hover {
        padding-left: 1rem;
    }
    #areaPendaftaran .isi .sort input[type="radio"]:checked + span {
        background-color: #e2e2e2;
        font-weight: 600;
    }

    #areaPendaftaran .isi .result {
        flex: 1;
        overflow-y: auto;
    }
    #areaPendaftaran .totalHasil {
        position: sticky;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .6rem 1rem;
        margin-bottom: 1rem;
        background-color: #f1f1f1;
        z-index: 3;
    }
    #areaPendaftaran .totalHasil .jumlah p:nth-of-type(1) {
        display: none;
        color: #555;
        font-size: .8rem;
        font-weight: 600;
        margin-bottom: 0;
    }
    #areaPendaftaran .totalHasil .jumlah p:nth-of-type(2) {
        color: grey;
        font-size: 1rem;
        margin-bottom: 0;
    }
    #areaPendaftaran .totalHasil .jumlah i {
        font-size: .9rem;
        margin-right: .5rem;
    }
    #areaPendaftaran .totalHasil .jumlah span {
        display: none;
    }
    #areaPendaftaran .totalHasil .cari {
        width: 50%;
    }
    #areaPendaftaran .totalHasil .cari .pencarian {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
    }
    #areaPendaftaran .totalHasil .wrapCari {
        flex: 1;
        padding: .35rem .9rem .35rem .7rem;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-radius: 3rem;
    }
    #areaPendaftaran .totalHasil .wrapCari form {
        display: flex;
        align-items: center;
    }
    #areaPendaftaran .totalHasil .wrapCari .fa-search {
        color: #c3c3c3;
        margin-right: .4rem;
    }
    #areaPendaftaran .totalHasil .wrapCari input[type=text] {
        width: 100%;
        color: #60666d;
        border: none;
        outline: none;
    }
    #areaPendaftaran .totalHasil .wrapCari input[type=text]::placeholder {
        color: #c3c3c3;
        font-size: .9rem;
    }
    #areaPendaftaran .totalHasil .wrapCari input[type=reset] {
        display: none;
    }
    #areaPendaftaran .totalHasil .wrapCari label {
        display: none;
        font-size: .9rem;
        color: tomato;
        margin-left: .2rem;
        margin-bottom: 0;
        cursor: pointer;
    }
    #areaPendaftaran .totalHasil .wrapCari input[type=text]:not(:placeholder-shown) + label {
        display: block;
    }
    #areaPendaftaran .totalHasil .buatBaru span {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 38px;
        width: 38px;
        font-size: .9rem;
        color: #c3c3c3;
        background-color: #fff;
        border: 1px solid #eaeaea;
        border-radius: 50%;
        cursor: pointer;
    }
    #areaPendaftaran .totalHasil .buatBaru span:hover {
        color: grey;
    }
    #areaPendaftaran .totalHasil .cari .dropdown {
        display: none;
    }

    #areaPendaftaran .isi .grupItem {
        padding: .5rem 1rem 1rem 1rem;
    }
    #areaPendaftaran .isi .item {
        position: relative;
        display: flex;
        flex-direction: column;
        color: #555;
        padding: .6rem .8rem;
        margin-bottom: .8rem;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: .5rem;
        box-shadow: 2px 4px 15px #e4e4e4;
        z-index: 1;
    }
    #areaPendaftaran .isi .item .atas {
        display: flex;
        align-items: center;
        gap: .6rem;
        margin-bottom: .6rem;
    }
    #areaPendaftaran .isi .item .atas span {
        font-size: .75rem;
        padding: .1rem .6rem;
        color: #fff;
        background-color: var(--ungu);
    }
    #areaPendaftaran .isi .item.Bidan .atas span {
        background-color: #4CAF50;
    }
    #areaPendaftaran .isi .item.Doctor .atas span {
        background-color: #009688;
    }
    #areaPendaftaran .isi .item.Obgyn .atas span {
        background-color: #1e91ec;
    }
    #areaPendaftaran .isi .item .atas p {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0;
    }

    #areaPendaftaran .isi .item .tengah {
        display: flex;
        align-items: center;
        gap: 1.5rem;
    }
    #areaPendaftaran .isi .item .tengah i {
        width: 16px;
        font-size: .8rem;
    }
    #areaPendaftaran .isi .item .tengah span {
        display: block;
        font-size: .9rem;
        font-weight: 400;
    }

    #areaPendaftaran .isi .item .bawah {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
        padding-top: .8rem;
        padding-bottom: .3rem;
        margin-top: .8rem;
        border-top: 1px dashed #cfcfcf;
    }
    #areaPendaftaran .isi .item .bawah button:first-child {
        margin-right: .5rem;
    }
    #areaPendaftaran .isi .item .bawah p {
        line-height: 1;
        margin-bottom: 0;
    }

    #areaPendaftaran .isi .item .status {
        position: absolute;
        top: 10px;
        right: -6px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        width: fit-content;
        padding: 0 .8rem 0 .5rem;
        font-size: .8rem;
        font-weight: 600;
        color: #fff;
        background-color: #72d576;
        user-select: none;
    }
    #areaPendaftaran .isi .item .status:before {
        content: "";
        position: absolute;
        left: -13px;
        top: 0;
        border-top: 16px solid transparent;
        border-bottom: 14px solid transparent;
        border-right: 13px solid #72d576;
    }
    #areaPendaftaran .isi .item .status:after {
        content: "";
        position: absolute;
        top: -6px;
        right: 0;
        border-top: 5px solid transparent;
        border-bottom: 19px solid transparent;
        border-left: 6px solid #9d9d9d;
        z-index: -1;
    }
    #areaPendaftaran .isi .item .status.Awal {
        color: #918201;
        background-color: #FFEB3B;
    }
    #areaPendaftaran .isi .item .status.Awal:before {
        border-right-color: #FFEB3B;
    }
    #areaPendaftaran .isi .item .status.Konfirmasi {
        background-color: #67a8dc;
    }
    #areaPendaftaran .isi .item .status.Konfirmasi:before {
        border-right-color: #67a8dc;
    }
    #areaPendaftaran .isi .item .status.Expired {
        background-color: #f96257;
    }
    #areaPendaftaran .isi .item .status.Expired:before {
        border-right-color: #f96257;
    }
    /*#endregion*/
/*#endregion*/