/* UNIVERSAL */
.pl-5 {
    padding-left: 5px !important;
}
.pr-5 {
    padding-right: 5px !important;
}
.px-5 {
    padding-right: 5px !important;
    padding-left: 5px !important;
}
.card-h {
    height: 254px;
}
.pr-0 {
    padding-right: 0px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
/* Generate width classes for 1% to 100% */
.w-1 {
    width: 1% !important;
}
.w-2 {
    width: 2% !important;
}
.w-3 {
    width: 3% !important;
}
.w-4 {
    width: 4% !important;
}
.w-5 {
    width: 5% !important;
}
.w-6 {
    width: 6% !important;
}
.w-7 {
    width: 7% !important;
}
.w-8 {
    width: 8% !important;
}
.w-9 {
    width: 9% !important;
}
.w-10 {
    width: 10% !important;
}
.w-11 {
    width: 11% !important;
}
.w-12 {
    width: 12% !important;
}
.w-13 {
    width: 13% !important;
}
.w-14 {
    width: 14% !important;
}
.w-15 {
    width: 15% !important;
}
.w-16 {
    width: 16% !important;
}
.w-17 {
    width: 17% !important;
}
.w-18 {
    width: 18% !important;
}
.w-19 {
    width: 19% !important;
}
.w-20 {
    width: 20% !important;
}
.w-21 {
    width: 21% !important;
}
.w-22 {
    width: 22% !important;
}
.w-23 {
    width: 23% !important;
}
.w-24 {
    width: 24% !important;
}
.w-25 {
    width: 25% !important;
}
.w-26 {
    width: 26% !important;
}
.w-27 {
    width: 27% !important;
}
.w-28 {
    width: 28% !important;
}
.w-29 {
    width: 29% !important;
}
.w-30 {
    width: 30% !important;
}
.w-31 {
    width: 31% !important;
}
.w-32 {
    width: 32% !important;
}
.w-33 {
    width: 33% !important;
}
.w-34 {
    width: 34% !important;
}
.w-35 {
    width: 35% !important;
}
.w-36 {
    width: 36% !important;
}
.w-37 {
    width: 37% !important;
}
.w-38 {
    width: 38% !important;
}
.w-39 {
    width: 39% !important;
}
.w-40 {
    width: 40% !important;
}
.w-41 {
    width: 41% !important;
}
.w-42 {
    width: 42% !important;
}
.w-43 {
    width: 43% !important;
}
.w-44 {
    width: 44% !important;
}
.w-45 {
    width: 45% !important;
}
.w-46 {
    width: 46% !important;
}
.w-47 {
    width: 47% !important;
}
.w-48 {
    width: 48% !important;
}
.w-49 {
    width: 49% !important;
}
.w-50 {
    width: 50% !important;
}
.w-51 {
    width: 51% !important;
}
.w-52 {
    width: 52% !important;
}
.w-53 {
    width: 53% !important;
}
.w-54 {
    width: 54% !important;
}
.w-55 {
    width: 55% !important;
}
.w-56 {
    width: 56% !important;
}
.w-57 {
    width: 57% !important;
}
.w-58 {
    width: 58% !important;
}
.w-59 {
    width: 59% !important;
}
.w-60 {
    width: 60% !important;
}
.w-61 {
    width: 61% !important;
}
.w-62 {
    width: 62% !important;
}
.w-63 {
    width: 63% !important;
}
.w-64 {
    width: 64% !important;
}
.w-65 {
    width: 65% !important;
}
.w-66 {
    width: 66% !important;
}
.w-67 {
    width: 67% !important;
}
.w-68 {
    width: 68% !important;
}
.w-69 {
    width: 69% !important;
}
.w-70 {
    width: 70% !important;
}
.w-71 {
    width: 71% !important;
}
.w-72 {
    width: 72% !important;
}
.w-73 {
    width: 73% !important;
}
.w-74 {
    width: 74% !important;
}
.w-75 {
    width: 75% !important;
}
.w-76 {
    width: 76% !important;
}
.w-77 {
    width: 77% !important;
}
.w-78 {
    width: 78% !important;
}
.w-79 {
    width: 79% !important;
}
.w-80 {
    width: 80% !important;
}
.w-81 {
    width: 81% !important;
}
.w-82 {
    width: 82% !important;
}
.w-83 {
    width: 83% !important;
}
.w-84 {
    width: 84% !important;
}
.w-85 {
    width: 85% !important;
}
.w-86 {
    width: 86% !important;
}
.w-87 {
    width: 87% !important;
}
.w-88 {
    width: 88% !important;
}
.w-89 {
    width: 89% !important;
}
.w-90 {
    width: 90% !important;
}
.w-91 {
    width: 91% !important;
}
.w-92 {
    width: 92% !important;
}
.w-93 {
    width: 93% !important;
}
.w-94 {
    width: 94% !important;
}
.w-95 {
    width: 95% !important;
}
.w-96 {
    width: 96% !important;
}
.w-97 {
    width: 97% !important;
}
.w-98 {
    width: 98% !important;
}
.w-99 {
    width: 99% !important;
}
.w-100 {
    width: 100% !important;
}
/* END UNIVERSAL */
#monitor-container {
    position: relative;
    min-height: calc(100vh - 100px);
    width: 100%;
    padding: 1rem 20px 0 20px;
}
#monitor-container .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}
#monitor-container .header-container h1 {
    font-weight: 500;
    font-size: 24px !important;
    line-height: 18px;
    letter-spacing: 0%;
    margin-bottom: 0;
}
#monitor-container .header-container .monitor-features {
    display: flex;
    align-items: center;
    column-gap: 18px;
}
#monitor-container .monitor-features .dropdown-container {
    position: relative;
    height: 100%;
    min-width: 135px;
}
#monitor-container .monitor-features .dropdown-container .dropdown-box {
    border: 1px solid #8b8a8d;
    height: 38px;
    width: 100%;
    padding: 10px;
    font-weight: 500;
    font-size: 12.8px !important;
    line-height: 18px;
    border-radius: 4px;
    cursor: pointer;
}
#monitor-container .monitor-features .dropdown-container .dropdown-box span {
    font-weight: 700;
    font-size: 12.8px !important;
}
/*  prettier-ignore */
#monitor-container .monitor-features .dropdown-container .dropdown-box span.open {
    color: #61C554;
}
/*  prettier-ignore */
#monitor-container .monitor-features .dropdown-container .dropdown-box span.closed {
    color: #FF0000;
}
#monitor-container .monitor-features .dropdown-container .dropdown-box::after {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    right: 17px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333333 transparent transparent transparent;
    clear: left;
}
/*  prettier-ignore */
#monitor-container .monitor-features .dropdown-container .dropdown-box.open::after {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    right: 17px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333333 transparent transparent transparent;
    clear: left;
    transform: rotate(180deg);
}
/*  prettier-ignore */
#monitor-container .monitor-features .dropdown-container .dropdown-box.open,
#monitor-container .monitor-features .dropdown-container .dropdown-box:hover {
    background-color: #e6e8ea;
}
.dropdown-container .dropdown-list.hidden {
    visibility: hidden;
}
.dropdown-container .dropdown-list.visible {
    visibility: visible !important;
}
.dropdown-container .dropdown-list {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 2px 0 0;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}
.dropdown-container .dropdown-list .dropdown-item.selected,
.dropdown-container .dropdown-list .dropdown-item:hover {
    background-color: #e6e8ea;
}
#monitor-container .card {
    display: flex;
    flex-direction: column;
    padding: 1rem !important;
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    border: 1px solid #e3e3e3;
    box-shadow: none;
}
#monitor-container .card {
    border-radius: 10px !important;
}
#monitor-container .card .card-header {
    padding: 0;
    margin-bottom: 10px;
}
#monitor-container .card .card-header h6 {
    font-weight: 600;
    font-size: 14px !important;
    line-height: 18px;
    letter-spacing: 0%;
    margin-bottom: 0;
}
#monitor-container .card .card-body {
    padding: 0;
}
#monitor-container .card .card-body.empty {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;
}
#monitor-container #list-lokasi {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}
#monitor-container #list-lokasi .list-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 21px;
    width: 100%;
}
#monitor-container #list-lokasi .list-item.clickable {
    cursor: pointer;
}
#monitor-container #list-lokasi .list-item.selected,
#monitor-container #list-lokasi .list-item:hover {
    background-color: #e6e8ea;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
#monitor-container #list-lokasi .list-item .list-text {
    font-weight: 400;
    font-size: 12.8px !important;
    line-height: 18px;
    margin-left: 8px;
}
#monitor-container #list-lokasi .list-item.success::before {
    content: " ";
    position: absolute;
    left: 0%;
    height: 100%;
    width: 4px;
    background-color: #61c554;
}
#monitor-container #list-lokasi .list-item.warning::before {
    content: " ";
    position: absolute;
    left: 0%;
    height: 100%;
    width: 4px;
    background-color: #f4be50;
}
#monitor-container #list-lokasi .list-item.danger::before {
    content: " ";
    position: absolute;
    left: 0%;
    height: 100%;
    width: 4px;
    background-color: #ff0000;
}
#monitor-container #list-lokasi .list-item .progress-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 4px;
    width: 70%;
}
/*  prettier-ignore */
#monitor-container #list-lokasi .list-item .progress-container .progress-bar-dashed {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 2px;
    height: 8px;
    width: 100%;
}
/*  prettier-ignore */
#monitor-container #list-lokasi .list-item .progress-container .progress-bar-dashed div {
    height: 100%;
    width: 25%;
    background-color: #E3E3E3;
}
/*  prettier-ignore */
#monitor-container #list-lokasi .list-item .progress-container .progress-bar-dashed div.success {
    background-color: #61C554;
}
/*  prettier-ignore */
#monitor-container #list-lokasi .list-item .progress-container .progress-bar-dashed div.warning {
    background-color: #f4be50;
}
/*  prettier-ignore */
#monitor-container #list-lokasi .list-item .progress-container .progress-bar-dashed div.danger {
    background-color: #ff0000;
}
/*  prettier-ignore */
#monitor-container #list-lokasi .list-item .progress-container .progress-percentage {
    width: 20%;
    font-weight: 600;
    font-size: 10px !important;
    line-height: 18px;
}
#monitor-container #list-kategori {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    column-gap: 6px;
    row-gap: 8px;
    min-height: 0; /* penting untuk flexbox scrolling */
    overflow-x: hidden;
    overflow-y: auto;
}
#monitor-container #list-kategori .list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 12px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    padding: 4px;
    max-height: 20px;
    min-width: 0; /* Memungkinkan item mengecil */
    flex-shrink: 0; /* Mencegah item terlalu kecil */
    cursor: pointer;
}
#monitor-container #list-kategori .list-item.active.selected,
#monitor-container #list-kategori .list-item.active:hover {
    background-color: #e6e8ea;
}
#monitor-container #list-kategori .list-item .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: #8b8a8d;
}
#monitor-container #list-kategori .list-item.active .status-dot {
    background-color: #61c554;
}
#monitor-container #list-kategori .list-item .list-text {
    font-weight: 400;
    font-size: 10px !important;
    line-height: 100%;
    letter-spacing: 0%;
    color: #8b8a8d;
}
#monitor-container #list-kategori .list-item.active .list-text {
    color: #333;
}
#monitor-container #list-kategori .list-item .count-data {
    font-weight: 600;
    font-size: 9px !important;
    line-height: 100%;
    color: #8b8a8d;
}
#monitor-container #list-kategori .list-item.active .count-data {
    color: #333;
}
#monitor-container .card.black {
    background: linear-gradient(90.32deg, #1e1e1e 1.49%, #474747 99.72%);
}
#monitor-container .card.black .card-header h6 {
    color: #fff;
}
#monitor-container #content-progress {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
#monitor-container #content-progress .progress-info-container {
    display: flex;
    align-items: center;
    column-gap: 1rem;
    margin-bottom: 20px;
}
#monitor-container #content-progress .progress-info-container h5 {
    font-weight: 600;
    font-size: 64px !important;
    line-height: 100%;
    margin-bottom: 0;
    color: #fff;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-info-container .status-container {
    display: flex;
    flex-direction: column;
    row-gap: 9px;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-info-container .status-container .status-badge {
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    width: fit-content;
    padding: 8px;
    border-radius: 100px;
    color: #fff;
    font-weight: 400;
    font-size: 12.8px;
    line-height: 100%;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-info-container .status-container .status-badge.success {
    background-color: #61C554;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-info-container .status-container .status-badge.danger {
    background-color: #ff0000;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-info-container .status-container .status-badge.warning {
    background-color: #f4be50;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-info-container .status-container p {
    color: #fff;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 12.8px !important;
    line-height: 100%;
}
#monitor-container #content-progress .progress-bar-container {
    display: flex;
    width: 100%;
    height: 1rem;
}
#monitor-container #content-progress .progress-bar-container div {
    height: 100%;
}
#monitor-container #content-progress .progress-bar-container #progress-1 {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
#monitor-container #content-progress .progress-bar-container #progress-2 {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
#monitor-container #content-progress .progress-bar-container div.success {
    background-color: #61c554;
}
#monitor-container #content-progress .progress-bar-container div.danger {
    background-color: #ff0000;
}
#monitor-container #content-progress .progress-detail-container {
    margin-top: auto;
    background-color: #414141;
    border: 1px solid #646464;
    border-radius: 10px;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 32px;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-detail-container .summary-veat-assets,
#monitor-container #content-progress .progress-detail-container .summary-veat-done,
#monitor-container #content-progress .progress-detail-container .summary-veat-progress {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 8px;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-detail-container .summary-label {
    font-weight: 400;
    font-size: 10px;
    line-height: 100%;
    color: #fff;
}
/* prettier-ignore */
#monitor-container #content-progress .progress-detail-container .summary-value {
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    color: #fff;
}
#monitor-container #content-progress .progress-detail-container .y-separator {
    width: 1px;
    height: 45px;
    background-color: #646464;
}
#monitor-container .table-features {
    display: flex;
    column-gap: 8px;
    width: 30%;
}
#monitor-container .table-features .dropdown-container {
    position: relative;
    height: 100%;
    min-width: 160px;
}
#monitor-container .table-features .dropdown-container .dropdown-box {
    border: 1px solid #8b8a8d;
    height: 38px;
    width: 100%;
    padding: 10px;
    font-weight: 500;
    font-size: 12.8px !important;
    line-height: 18px;
    border-radius: 4px;
    cursor: pointer;
}
#monitor-container .table-features .dropdown-container .dropdown-box::after {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    right: 17px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333333 transparent transparent transparent;
    clear: left;
}
/*  prettier-ignore */
#monitor-container .table-features .dropdown-container .dropdown-box.open::after {
    content: " ";
    display: block;
    position: absolute;
    top: 50%;
    right: 17px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #333333 transparent transparent transparent;
    clear: left;
    transform: rotate(180deg);
}
/*  prettier-ignore */
#monitor-container .table-features .dropdown-container .dropdown-box.open,
#monitor-container .table-features .dropdown-container .dropdown-box:hover {
    background-color: #e6e8ea;
}
#monitor-container .table-features input {
    border: 1px solid #8b8a8d;
    height: 38px;
    border-radius: 4px;
}
#monitor-container #veat-table .col-no,
#monitor-container #veat-table_wrapper .col-no {
    width: 40px;
}
#monitor-container #veat-table_wrapper .dataTables_paginate {
    margin-top: 0;
    float: right;
}