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

.op-table-card{

    background:#1B2848;

    border-radius:14px;

    overflow:hidden;

    height:320px;

}

.table-header{

    padding:16px 18px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.table-header h6{

    color:white;

    margin:0;

    font-size:15px;

    font-weight:600;

}

.op-table{

    color:#dfe6f4;

    font-size:12px;

}

.op-table th{

    color:#8fa3cb;

    font-weight:600;

}

.op-table td{

    vertical-align:middle;

}

.progress-dark{

    height:8px;

    background:#31446F;

}

.table-footer{

    text-align:center;

    padding:12px;

    color:#7da5ff;

    border-top:1px solid rgba(255,255,255,.06);

    cursor:pointer;

}

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

.table-grid{

    display:grid;

    grid-template-columns:

        1.2fr
        1.2fr
        1fr;

    gap:14px;

    margin-top:14px;

}

.top-project-name {
    max-width: 190px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.top-project-name:hover {
    cursor: default;
}


.progress-dark {
    width: 100%;
    height: 8px;

    background: rgba(
        255,
        255,
        255,
        0.10
    );

    border-radius: 10px;

    overflow: hidden;
}


.progress-dark .progress-bar {
    height: 100%;

    background: #4f8df7;

    border-radius: 10px;

    transition: width 0.4s ease;
}