/* ===================================== */

.operational-dashboard{

    color:#fff;

}

/* spacing */

.chart-grid,
.table-grid,
.insight-grid{

    margin-top:14px;

}

/* ===================================== */
/* CHART */
/* ===================================== */

.chart-grid{

    display:grid;

    grid-template-columns:

        2.8fr
        2.8fr
        1.6fr
        1.6fr;

    gap:14px;

}

/* ===================================== */
/* TABLE */
/* ===================================== */

/* ===================================== */
/* TABLE GRID - 2 COLUMN */
/* ===================================== */

.table-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    width: 100%;
}

/* ===================================== */
/* INSIGHT */
/* ===================================== */

.insight-grid{

    display:grid;

    grid-template-columns:

        1.3fr
        2.7fr;

    gap:14px;

}

/* ===================================== */

@media(max-width:1600px){

.chart-grid{

grid-template-columns:repeat(2,1fr);

}

.table-grid{

grid-template-columns:repeat(2,1fr);

}

.insight-grid{

grid-template-columns:1fr;

}

}

@media(max-width:992px){

.chart-grid,
.table-grid{

grid-template-columns:1fr;

}

}

.insight-grid{

    display:grid;

    grid-template-columns:

        1.7fr
        1.6fr;

    gap:16px;

}

.navigation-section{
    margin-bottom:26px;
}

.summary-section{
    margin-top:0;
}

/* =========================================================
   TOP PROJECT + TOP CUSTOMER
   ========================================================= */

.op-table-card {
    overflow: hidden;
}


/* =========================================================
   TOP CUSTOMER TABLE
   ========================================================= */

.top-customer-table {
    width: 100%;
    table-layout: fixed;
}


/* Rank */

.top-customer-table .tc-rank {
    width: 13%;
}


/* Customer */

.top-customer-table .tc-customer {
    width: 57%;
}


/* Revenue */

.top-customer-table .tc-revenue {
    width: 30%;
    text-align: right;
}


/* =========================================================
   CELLS
   ========================================================= */

.top-customer-table th,
.top-customer-table td {
    vertical-align: middle;
}


/* Rank */

.top-customer-table td:nth-child(1) {
    width: 13%;
}


/* Customer */

.top-customer-table td:nth-child(2) {
    width: 57%;
}


/* Revenue */

.top-customer-table td:nth-child(3) {
    width: 30%;
    text-align: right;
}


/* =========================================================
   CUSTOMER NAME
   ========================================================= */

.top-customer-name {
    display: block;

    width: 100%;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    line-height: 1.3;
}


/* =========================================================
   REVENUE
   ========================================================= */

.top-customer-table td:nth-child(3) strong {
    display: block;

    white-space: nowrap;

    font-size: 0.95rem;

    font-weight: 600;
}


/* =========================================================
   ROW HEIGHT
   ========================================================= */

.top-customer-table tbody tr {
    height: 70px;
}


.top-customer-table tbody td {
    padding-top: 14px;
    padding-bottom: 14px;
}


/* =========================================================
   HEADER
   ========================================================= */

.top-customer-table thead th {
    white-space: nowrap;
}

/* =========================================================
   OVERRIDE - TOP PROJECT & TOP CUSTOMER
   FORCE 2 COLUMNS
   Taruh PALING BAWAH file CSS
   ========================================================= */

.table-grid {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 20px !important;

    width: 100% !important;

    align-items: stretch;
}


/* =========================================================
   CARD
   ========================================================= */

.table-grid > .op-table-card {
    width: 100% !important;
    min-width: 0 !important;
    height: 100%;

    overflow: hidden;
}


/* =========================================================
   TABLE
   ========================================================= */

.table-grid .op-table {
    width: 100% !important;

    table-layout: fixed;
}


/* =========================================================
   TOP PROJECT
   ========================================================= */

/* No */

.table-grid .top-project-table th:nth-child(1),
.table-grid .top-project-table td:nth-child(1) {
    width: 10%;
}


/* Project */

.table-grid .top-project-table th:nth-child(2),
.table-grid .top-project-table td:nth-child(2) {
    width: 55%;
}


/* Job */

.table-grid .top-project-table th:nth-child(3),
.table-grid .top-project-table td:nth-child(3) {
    width: 17%;
}


/* Percentage */

.table-grid .top-project-table th:nth-child(4),
.table-grid .top-project-table td:nth-child(4) {
    width: 18%;
}


/* =========================================================
   TOP CUSTOMER
   ========================================================= */

/* No */

.table-grid .top-customer-table th:nth-child(1),
.table-grid .top-customer-table td:nth-child(1) {
    width: 10%;
}


/* Customer */

.table-grid .top-customer-table th:nth-child(2),
.table-grid .top-customer-table td:nth-child(2) {
    width: 60%;
}


/* Revenue */

.table-grid .top-customer-table th:nth-child(3),
.table-grid .top-customer-table td:nth-child(3) {
    width: 30%;

    text-align: right;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

.table-grid .table-header {
    padding: 20px 26px;
}


.table-grid .table-header h6 {
    margin: 0;

    font-size: 18px;

    font-weight: 700;
}


/* =========================================================
   TABLE CELL
   ========================================================= */

.table-grid .op-table th {
    padding: 16px 26px;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;
}


.table-grid .op-table td {
    padding: 18px 26px;

    font-size: 14px;

    vertical-align: middle;
}


/* =========================================================
   PROJECT / CUSTOMER NAME
   ========================================================= */

.table-grid .top-project-name,
.table-grid .top-customer-name {
    display: block;

    width: 100%;

    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   REVENUE
   ========================================================= */

.table-grid .top-customer-table td:nth-child(3),
.table-grid .top-customer-table td:nth-child(3) strong {
    white-space: nowrap;
}


/* =========================================================
   ROW HEIGHT
   ========================================================= */

.table-grid .op-table tbody tr {
    height: 66px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.table-grid .table-footer {
    padding: 16px 20px;

    text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
|
| Tetap 2 kolom sampai 992px.
|
*/

@media (min-width: 993px) {

    .table-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 992px) {

    .table-grid {
        grid-template-columns:
            1fr !important;
    }

}


/*
|--------------------------------------------------------------------------
| Small Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 576px) {

    .table-grid {
        gap: 14px !important;
    }


    .table-grid .table-header {
        padding: 16px 18px;
    }


    .table-grid .table-header h6 {
        font-size: 16px;
    }


    .table-grid .op-table th,
    .table-grid .op-table td {
        padding-left: 16px;
        padding-right: 16px;

        font-size: 12px;
    }

}