/*ยังไม่เสร็จ ใกล้ Due 3 วัน*/
li.NearDue .app-field-DueDateCustomer {
    background-color: #ffd800;
}

/*ยังไม่เสร็จ เกินDue*/
li.OverDue span.app-field-DueDateCustomer {
    background-color: #ff6a00;
}


/*เสร็จ ไม่เกินDue*/
.app-grid .Close .app-field-StatusName::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    padding: 8px;
    margin: 5px;
    background: url('https://img.icons8.com/color/50/fa314a/ok--v1.png');
    background-size: cover;
    font-size: xx-small;
}

/*เสร็จ เกินDue*/
.app-grid .FinishOverDue .app-field-StatusName::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    padding: 8px;
    margin: 5px;
    background: url('https://img.icons8.com/fluency-systems-filled/48/fa314a/ok--v1.png');
    background-size: cover;
    font-size: xx-small;
}


/*Job ที่ยังไม่ได้ปิด*/
.app-grid .PendingClose .app-field-StatusName::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    padding: 8px;
    margin: 5px;
    background: url('https://img.icons8.com/external-tal-revivo-fresh-tal-revivo/28/000000/external-verification-tick-mark-for-digital-certification-document-basic-fresh-tal-revivo.png');
    background-size: cover;
    font-size: xx-small;
}


/*Job ยกเลิก*/
.app-grid .Canceled .app-field-StatusName::after {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    padding: 8px;
    margin: 5px;
    background: url('https://img.icons8.com/color/48/fa314a/cancel--v1.png');
    background-size: cover;
    font-size: xx-small;
}



li.dv-item.Reject {
    background-color: #e7d3ef;
}


@media (min-width: 20em) {
    .ui-header.ui-header-fixed:not(.app-tabs) {
        background-position: 1.75em 0;
        background-size: 100px;
        color: red;
    }
}