/* .table_cell_row, .table_cell_row *
{ border: 1px solid red; } */


.table {
    display: table;
    text-align: left;
    width: 100%;
    border-spacing: 0px 3px;
}

.table_row
{ 
    display: table-row; 
    box-shadow: var(--box-shadow_2);
}

.table_header 
{ display: table-row; }

.header_cell {
    display: table-cell;
    color: gray;
    padding: 10px 5px;
    text-transform: uppercase;
    font-weight: 700;
}

.table_cell_row 
{ 
    display: table-cell;
    vertical-align: middle;
    background-color: white;
    padding: 4px 4px 0px 4px;
}

.table_row .table_cell_row .table_cell:nth-child(odd) {
    display: none;
    background: #e0e0e0;
    color: #9d9d9d;

    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;    
}

.table_row .table_cell_row .table_cell {
    color: #5b5b5b;
    padding: 5px 5px;
}


.table_row,
.table_row > .table_cell_row:first-child
{ 
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: 3px solid gray;
}

.table_row,
.table_row > .table_cell_row:last-child
{ 
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.table_row > .table_cell_row:last-child,
.table_header > .header_cell:last-child
{ text-align: right; }






.table_row > .table_cell_row[lbl]
{
    font-size: 12px;
    font-weight: bolder;
    color: gray;
}
.table_row > .table_cell_row[info]
{
    font-size: 16px;
    /* font-weight: 100; */
    color: black;
}




  
@media screen and (max-width: 650px) {
    .table 
    { display: block; }

    .table_header 
    { display: none; }

    .table_row {
        display: table;
        text-align: left;
        width: 97%;
        margin: 10px auto;
        overflow: hidden;
    }

    .table_cell_row {
        /* display: table-row; */
        display: block;
    }

    .table_cell
    { width: 70%; }
    .table_row > .table_cell_row > .table_cell:nth-child(odd) 
    {
        display: table-cell;
        width: 30%;
    }

    .table_row > .table_cell_row:last-child
    { text-align: left; }
}