.main-table
{
    border: 0px none;
    border-style: none;
}

.main-cell {
    text-align: left;
    vertical-align: top;
    border: 0px none;
    border-style: none;
    border-width: 0px;
    padding: 0px 5px;
}

.gridTable
{
    margin: 5px;
    padding: 10px;
    border: 1px #c8c8c8 solid;
    border-collapse: collapse;
    min-width: 470px;
    background-color: #fff;
    color: #696969;
}
.gridHead th {
    font-weight: bold !important;
    background-color: #E8EEF4;
    color: #696969;
    padding: 10px;
    text-align: center;
}
.gridHead a:link, .gridHead a:visited, .gridHead a:active, .gridHead a:hover
{
    color: #696969;
}
.gridHead a:hover
{
    text-decoration: underline;
}
.gridHead-i th {
    font-weight: bold !important;
    background-color: #C6C6C6;
    color: #696969;
    padding: 10px;
    text-align: center;
}

.gridHead-i a:link, .gridHead-i a:visited, .gridHead-i a:active, .gridHead-i a:hover {
    color: #696969;
}

.gridHead-i a:hover {
    text-decoration: underline;
}

.gridTable tr.gridAltRow
{
    background-color: #efeeef;
}
.gridTable tr.gridInvalidRow {
    background-color: rgb(253, 226, 226);
}
.gridTable tr.gridAddRow
{
    background-color: #f9ee9d;
}
.gridTable tr.gridPostRow {
    background-color: #aaffbf;
}
.gridTable tr.gridBadRow
{
    background-color: #f9bd9d;
}
.gridTable tr.tightGridAltRow
{
    background-color: #efeeef;
}
.gridTable:not(.nohover) tr:hover
{
    background-color: #6699FF !important;
}
tr.tr-hover-fullrowhl:hover {
      background: lightblue !important;
      cursor: pointer;
   }
.gridAltRow td
{
    padding: 10px;
    margin: 5px;
    color: #333333;
}
.gridInvalidRow td {
    padding: 10px;
    margin: 5px;
    color: #333333;
}
.gridRow td {
    padding: 10px;
    color: #333333;
}
.tightGridAltRow td
{
    padding: 1px !important;
    margin: 5px;
    color: #333333;
}
.tightGridRow td
{
    padding: 1px !important;
    color: #333333;
}
.gridFooter td
{
    padding: 28px !important;
    background-color: #c7d1d6;
    color: #999;
    font-size: 24pt !important;
    text-align: center;
}
.gridFooter a
{
    margin: 2px !important;
    padding: 12px 16px;
    font-size: 24pt !important;
    font-weight: bold;
    color: #333;
    border: 1px #333 solid;
    box-shadow: #666 3px 1px 5px;
    border-radius: 5px;
}

.td-std
{
    text-align: left;
    vertical-align: middle;
    padding: 5px 5px 5px 5px;
}

.td-img
{
    width: 60px;
    text-align: center;
    vertical-align: middle;
}

.td-attach
{
    width: 40px;
}

.td-btn
{
    width: 120px;
}

.td-column200
{
    width: 200px;
}

.metrouicss table tbody tr td
{
    padding: 3px 5px;
}

    .progress-bar-order {
        width: 100%;
        height: 10px;
        background-color: #e0e0e0;
        border-radius: 5px;
        overflow: hidden;
    }

    .progress-bar-inner-order {
        height: 100%;
        background-color: #4caf50; /* Green color for the completed portion */
        transition: width 0.3s ease-in-out;
        width: 5%;
        float: left;
    }
    
    .progress-bar-inner-order-overdue {
        height: 100%;
        background-color: #fb6942; /* Green color for the completed portion */
        transition: width 0.3s ease-in-out;
        width: 5%;
        float: left;
    }

    .remaining-bar-order {
        height: 100%;
        background-color: #ff9800; /* Orange color for the remaining portion */
        width: 95%;
        float: left;
    }