@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Gruppo&display=swap');
body, html {
    margin: 0;
    min-height: 100%;
    height: 100%;
}

.title-test {
    background: #E91E63;
    padding: 0 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-family: 'Barlow Semi Condensed';
    /* margin-left: 7px; */
    font-weight: 500;
    padding-bottom: 1px;
    display: block;
}

.title-a {
    margin-right: 0px;
    margin-top: 0px;
    cursor: default;
}

.jet {
    font-family: "JetBrains Mono";
    font-size: 12px;
    font-optical-sizing: auto;
    font-weight: 400;
}

.ago {
    margin-bottom: -10px;
    border: solid 1px #ced1e3;
    border-radius: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 1px;
    font-size: 11px;
    font-weight: 600;
    float: right;
    margin-top: -1px;
    font-weight: 400;
    font-family: 'Barlow Semi Condensed';
    color: #3e4859;
    font-size: 12px;
    color: #8f6c5d;
    margin-bottom: -6px;
    margin-top: 0px;
    height: 22px;
    line-height: 18px;
    font-size: 12px;
    color: #8f6c5d;
    margin-bottom: -6px;
}

.cell-progress {
    background: #efefef;
    overflow: hidden;
    border-radius: 4px;
    font-family: 'Barlow Semi Condensed';
    color: #433e3e;
}

    .cell-progress .pg {
        background: #cedaae;
        height: 20px;
        float: left;
        text-align: center;
        padding-left: 1px;
        padding-right: 1px;
    }

        .cell-progress .pg.negative {
            float: right;
            background: #ffc3d6;
        }

.dx-tooltip-wrapper
{
    top :-16px !important
}

.c0 {
    padding: 0 !important
}

[class^=ins] {
    float: left;
    letter-spacing: 1px;
    border: solid 1px #a4a4a4;
    background: #f4f4f4;
    color: #a4a4a4;
    padding: 0px 7px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #333333;
    height: 21px;
    line-height: 19px;
    display: inline-table;
    width: auto;
    overflow: hidden;
    font-family: 'Barlow Semi Condensed';
}

.group-customer {
    color:green
}

.f2 {
    font-family: 'Barlow Semi Condensed';
}

.insX {
    display: none;
}

.ins1 {
    border: solid 1px #9DD9EE;
    background: #9DD9EE;
}

.ins2 {
    border: solid 1px #EED12B;
    background: #fff9d8;
    color: #a97e00;
}

.ins3 {
    border: solid 1px #FD9891;
    background: #ffebe9;
    color: #db1034;
}

.ins4 {
    border: solid 1px #B3DF72;
    background: #eefdd6;
    color: #497b00;
}

.dx-datagrid-rowsview .dx-row.dx-group-row td.dx-datagrid-sticky-column-left
{
    background: #f5f5f5;
}


.dx-gridbase-a11y-status-container {
    display: none;
}

.print-x {
    display: block;
    padding: 10px;
    border: solid 1px #ccc;
    border-radius: 4px;
    margin-bottom: 4px;
    width: 250px;
    background: #f4f4f4
}
    .print-x a, .print-x a:visited {
        color: #8f6c59;
        width: 100%;
        display: inline-block;
    }

    .print-x:hover {
        background: #e9e1e1;
        border: solid 1px #ccc;
        color: #8f6c59
    }

        .print-x:hover a{
            font-weight:600;
            color: #8f6c59;
            text-decoration:none;

        }

.mr-4{
    margin-right:8px !important;
}

.ml-4 {
    margin-left: 8px !important
}

.ml-8 {
    margin-left: 16px !important
}
.pl-4 {
    margin-left: 8px !important
}


.col-1 {
    color: #10b462;
}

.col-2 {
    color: #b410a4;
}

.dx-group-row {
    background-color: #f5f5f5 !important;
}
/* Remove Search Input on top of datagrid */
    /*.dx-datagrid-search-panel {
    margin-right: -10px !important
}
*/

    a .u:link {
    text-decoration: none !important
}

.d-box:hover {
    box-shadow: 0px 0px 28px 0px rgb(104 113 13)
}

    .d-box {
        margin-right:20px;
        background-color: #000;
        color: #fff;
        width: 200px;
        height: 180px;
        border-radius: 10px;
        float:left;
        margin-bottom:20px
    }

    .d-box-title {
        text-align: center;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding: 10px;
        display: block;
    }

.grey
{
    color:#777
}
.status-box-passed {
    color: #3ac9ff;
}
.status-box {
    padding-right: 6px;
    padding-left: 6px;
    display:inline-block;

}

.status-box-selected {
    display:inline-block;
    padding-right: 6px;
    padding-left: 6px;
    background-color: #3ac9ff;
    color:#000;
    border-radius: 8px;
    font-weight: 600
}

.kob-popup-custom {
    text-align: center;
    margin-bottom: 20px
}

.kob-pop-icon {
    font-size: 57px !important;
    line-height: 90px !important;
    color: #b9dc3b;
    border-radius: 50%;
    padding: 14px;
}


.kob-pop-icon-err {
    font-size: 57px !important;
    line-height: 90px !important;
    color: #d63333;
    border-radius: 50%;
    padding: 14px;
}

.kob-pop-yellow-no-border {
    font-size: 57px !important;
    line-height: 90px !important;
    color: #e1b117;
    border-radius: 50%;
    padding: 6px;
}
.dx-popup-normal .dx-popup-bottom.dx-toolbar {
    /*padding: 0 !important;*/
    overflow: visible;
}
.grid-title {
    margin-left: -16px;
    background-color: #e9e1e1 !important;
    margin-right: 8px;
    color: rgba(255,255,255,.6);
    font-weight: 500;
    font-size: 12px;
    line-height: 15px;
    /* border-radius: 20px; */
    padding: 8px 10px;
    font-weight: 600;
    color: #fff;
    border-left: solid 4px #8f6c5d;
    border-radius:2px
}
.grid-title2 {
    margin-left: 0px;
    background-color: #252529 !important;
    margin-right: -5px;
    color: rgba(255,255,255,.6);
    font-weight: 500;
    font-size: 12px;
    line-height: 14px;
    /* border-radius: 16px; */
    padding: 8px 10px;
    font-weight: 500;
    color: #fff;
    border-left: 1px solid #252529;
    border-top: 1px solid #252529;
    border-bottom: 1px solid #252529
}

.box-hilight-1 {
    margin-left: -10px;
    background-color: #272727 !important;
    margin-right: 8px;
    color: rgba(255,255,255,.6);
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    border-radius: 16px;
    padding: 8px 10px;
    font-weight: 500;
    color: #fff
}

#app-side-nav-outer-toolbar {
    flex-direction: column;
    display: flex; 
    height: 100%;
    width: 100%;
}

.layout-header {
    flex: 0 0 auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    position: relative;
    z-index: 1501;
}

#KobToolBar .dx-toolbar-items-container {
    background-color: #e9e1e1;
}

.dx-toolbar .dx-toolbar-item.menu-button {
    width: 60px;
    text-align: center;
    padding: 0;
}

.dx-toolbar .dx-toolbar-item.menu-button > .dx-toolbar-item-content .dx-icon {
    color: #8f6c59;
}

.dx-state-selected {
    background-color: #29140b;
}

.dx-card {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    border-radius: 4px;
    background-color: #fff;
    margin: 2px 2px 3px;
}

.dx-card.wide-card {
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    border-right: 0;
    border-left: 0;
}

.with-footer > div > div > .dx-scrollable-content {
    height: 100%;
}

    .with-footer > div > div > .dx-scrollable-content > .dx-scrollview-content {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }

.layout-body {
    flex: 1;
    height: 100%;
    min-height: 0;
}

.layout-body .menu-container {
    height: 100%;
    width: 212px;
}

.layout-body .content {
    flex-grow: 1;
    height: 100%;
    line-height: 1.5;
}

.layout-body .content h2 {
    font-size: 30px;
    font-weight: 300;
    letter-spacing: -.5px;
}

.layout-body .content-block {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
}

.layout-body .content-footer {
    display: block;
    color: rgba(0,0,0,.609);
    border-top: 1px solid rgba(0,0,0,.1);
    padding-top: 20px;
    padding-bottom: 24px;
}

.layout-body .responsive-paddings {
    padding: 20px;
}

.layout-body-hidden {
    visibility: hidden;
}

@media screen and (min-width: 600px) {
    .layout-body .content-block {
        margin-left: 40px;
        margin-right: 40px;
    }
}

@media screen and (min-width: 1280px) {
    .layout-body .responsive-paddings {
        padding: 40px;
    }
}

.menu-container .dx-widget {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    font-family: Roboto,RobotoFallback,Helvetica,Arial,sans-serif;
    line-height: 24px;
}

.menu-container .dx-treeview {
    white-space: nowrap;
}

.menu-container .dx-treeview .dx-treeview-item {
    padding-left: 0;
    padding-right: 0;
}

.dx-swatch-additional .dx-treeview-toggle-item-visibility {
    width: 17px;
}

.menu-container .dx-treeview .dx-treeview-item .dx-icon {
    margin-right: 18px !important;
    width: 25px !important;
}

.menu-container .dx-treeview .dx-treeview-node {
    padding: 0 0 !important;
}

.menu-container .dx-treeview .dx-treeview-toggle-item-visibility {
    right: 10px;
    left: auto;
}

.menu-container .dx-treeview .dx-rtl .dx-treeview-toggle-item-visibility {
    left: 10px;
    right: auto;
}

.menu-container .dx-treeview .dx-treeview-node[aria-level="1"] {
    font-weight: normal;
    border-bottom: 1px solid #515159;
}

    .menu-container .dx-treeview .dx-treeview-node[aria-level="2"] .dx-treeview-item-content {
        font-weight: normal;
        padding: 0 0px;
        color: #e6bb7b
    }

.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected:not(.dx-state-focused) > .dx-treeview-item {
    background: transparent;
}

    .menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node.dx-state-selected > .dx-treeview-item * {
        color: #e6bb7b;
    }

.menu-container .dx-treeview .dx-treeview-node-container .dx-treeview-node:not(.dx-state-focused) > .dx-treeview-item.dx-state-hover {
    background-color: #3F3F4B;
}


.dx-datagrid-group-panel .dx-group-panel-message {
    border-top: 0px solid transparent !important;
}

.dx-field-item-label-text {
    color: #959595 !important;
}


.right-border
{
    border-right:solid 1px #515159;
}


.text-blue
{
    color:#3ac9ff
}

.mr-10 {
    padding-inline-end: 5px !important;
}

.text-case-no {
    color: #ffe23a
}

/*#KobToolBar .dx-item-content:last-child {
    margin-left: -10px;
    margin-right: 10px
}

#KobToolBar .dx-item-content:first-child{
    margin-left: 10px;
    margin-right: 10px
}*/

.c1 {
    float: right;
    padding: 4px 11px;
    background-color: #ffffff;
    margin-left: 11px;
    height: 28px;
    line-height: 20px;
    font-size: 13px;
    cursor: default
}

.c2 .branch {
    float: right;
    font-size: 28px;
    color: #42beff;
    margin-top: 1px;
    margin-left: 13px;
    background: #ffffff;
    height: 26px;
    padding: 4px;
    border-radius: 11px;
    margin-right: -4px;
    font-weight: 200;
}

.c2 .icon {
    padding-right: 8px;
    font-size: 27px;
    float: left;
    margin-left: -4px;
    margin-top: 0px;
    cursor: default;
    font-weight: 200;
    color: #8f6c5d;
}

.c2 {
    cursor: default;
    float: right;
    padding: 4px 11px;
    background-color: #ffffff;
    border-radius: 1px;
    margin-left: 11px;
    height: 36px;
    line-height: 14px;
    font-size: 13px;
    /* border-top-left-radius: 4px; */
    /* border-bottom-left-radius: 4px; */
    border-radius: 24px;
}

.c3 {
    float: right;
    padding: 4px 11px;
    background-color: #ffffff;
    border-radius: 1px;
    margin-left: 1px;
    height: 28px;
    line-height: 20px;
    font-size: 13px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.c4 {
    float: right;
    padding: 4px 11px;
    background-color: #363640;
    border-radius: 1px;
    margin-left: 11px;
    height: 28px;
    line-height: 20px;
    font-size: 13px;
}








.multisteps-form__progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.multisteps-form__progress-btn {
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: 0s;
    position: relative;
    padding-top: 20px;
    color: rgba(108, 117, 125, 0.7);
    text-indent: -9999px;
    border: none;
    background-color: transparent;
    outline: none !important;
    cursor: pointer;
}

@media (min-width: 500px) {
    .multisteps-form__progress-btn {
        text-indent: 0;
    }
}

.multisteps-form__progress-btn:before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: 13px;
    height: 13px;
    content: '';
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    transition: all 0.15s linear 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
    transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
    transition: all 0.15s linear 0s, transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s, -webkit-transform 0.15s cubic-bezier(0.05, 1.09, 0.16, 1.4) 0s;
    border: 2px solid currentColor;
    border-radius: 50%;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 3;
}

.multisteps-form__progress-btn:after {
    position: absolute;
    top: 5px;
    left: calc(-50% - 13px / 2);
    transition-property: all;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    transition-delay: 0s;
    display: block;
    width: 100%;
    height: 2px;
    content: '';
    background-color: currentColor;
    z-index: 1;
}

.multisteps-form__progress-btn:first-child:after {
    display: none;
}

.multisteps-form__progress-btn.js-active {
    color: #007bff;
}

    .multisteps-form__progress-btn.js-active:before {
        -webkit-transform: translateX(-50%) scale(1.2);
        transform: translateX(-50%) scale(1.2);
        background-color: currentColor;
    }

.multisteps-form__form {
    position: relative;
}

.multisteps-form__panel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    visibility: hidden;
}

    .multisteps-form__panel.js-active {
        height: auto;
        opacity: 1;
        visibility: visible;
    }

    .multisteps-form__panel[data-animation="scaleOut"] {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

        .multisteps-form__panel[data-animation="scaleOut"].js-active {
            transition-property: all;
            transition-duration: 0.2s;
            transition-timing-function: linear;
            transition-delay: 0s;
            -webkit-transform: scale(1);
            transform: scale(1);
        }

    .multisteps-form__panel[data-animation="slideHorz"] {
        left: 50px;
    }

        .multisteps-form__panel[data-animation="slideHorz"].js-active {
            transition-property: all;
            transition-duration: 0.25s;
            transition-timing-function: cubic-bezier(0.2, 1.13, 0.38, 1.43);
            transition-delay: 0s;
            left: 0;
        }

    .multisteps-form__panel[data-animation="slideVert"] {
        top: 30px;
    }

        .multisteps-form__panel[data-animation="slideVert"].js-active {
            transition-property: all;
            transition-duration: 0.2s;
            transition-timing-function: linear;
            transition-delay: 0s;
            top: 0;
        }

    .multisteps-form__panel[data-animation="fadeIn"].js-active {
        transition-property: all;
        transition-duration: 0.3s;
        transition-timing-function: linear;
        transition-delay: 0s;
    }

    .multisteps-form__panel[data-animation="scaleIn"] {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

        .multisteps-form__panel[data-animation="scaleIn"].js-active {
            transition-property: all;
            transition-duration: 0.2s;
            transition-timing-function: linear;
            transition-delay: 0s;
            -webkit-transform: scale(1);
            transform: scale(1);
        }










.sub-text
{
    color:#ccc
}


.d0 {
    color: #FF0000;
}

.d1 {
    color: #FFCC00;
}

.d2 {
    color: #FF3399;
}

.d3 {
    color: #79CA0B;
}

.d4 {
    color: #FF8000;
}

.d5 {
    color: #0099FF;
}

.d6 {
    color: #CC33FF;
}

.d7 {
    color: #FF0000;
}


.dx-lookup.dx-editor-filled .dx-lookup-field, .dx-lookup.dx-editor-outlined .dx-lookup-field {
    padding: 0px 29px 0px 7px !important;
    height: 35px;
    line-height: 35px;
}

.dx-lookup.dx-editor-filled, .dx-lookup.dx-editor-outlined {
    height: 37px !important;
}

/*
.dx-layout-manager .dx-field-item:not(.dx-first-col) {
    padding-left: 15px !important;
}
.dx-layout-manager .dx-field-item:not(.dx-last-col) {
    padding-right: 0px !important;
}*/

.dx-layout-manager .dx-field-item:not(.dx-last-col) {
    -webkit-padding-end: 10px;
    padding-inline-end: 10px;
}


.dx-rtl .dx-texteditor.dx-editor-filled.dx-show-clear-button .dx-texteditor-input, .dx-rtl .dx-texteditor.dx-editor-outlined.dx-show-clear-button .dx-texteditor-input, .dx-rtl.dx-texteditor.dx-editor-filled.dx-show-clear-button .dx-texteditor-input, .dx-rtl.dx-texteditor.dx-editor-outlined.dx-show-clear-button .dx-texteditor-input, .dx-texteditor.dx-editor-filled .dx-placeholder:before, .dx-texteditor.dx-editor-filled .dx-texteditor-input, .dx-texteditor.dx-editor-outlined .dx-placeholder:before, .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 8px 10px 8px;
}

.dx-field-item-label-location-top {
    padding: 0px 0 0px !important;
}

.dx-searchbox.dx-editor-filled .dx-placeholder:before, .dx-searchbox.dx-editor-filled .dx-texteditor-input, .dx-searchbox.dx-editor-outlined .dx-placeholder:before, .dx-searchbox.dx-editor-outlined .dx-texteditor-input {
    padding-left: 45px !important;
}



.upload-box {
    display: inline-block;
    width: 144px;
    margin-left: auto;
    margin-right: auto;
    margin: 0 5px;
    margin-bottom: 25px;
    border: solid 1px #e0e0e0;
    padding-bottom: 4px;
    border-radius: 4px;
    padding-left: 4px;
    padding-right: 4px;
}

    .upload-box h4 {
        font-size: 12px;
        color: #000 !important;
        display: block;
        height: 24px;
    }

[data-entity=image-wrapper] {
    border: solid 1px #e0e0e0;
    background: #ccc;
    width: 100%;
    height: 190px;
    text-align: center;
    vertical-align: middle;
}

    [data-entity=image-wrapper]  img {
        max-width: 100%;
        object-fit: contain;
        max-height: 100%;
    }
.image-browse-wrapper {
    padding: 8px 8px;
    background: #f3f3f3;
    overflow:hidden
}


.col-price {
    background: #f4ffed
}

.col-price-total {
    background: #e4f9d7;
    font-weight: 600;
    color: green;
}



.col-price-x {
    background: #f4ffed;
    font-weight:600
}


.dx-treeview-item-with-checkbox.dx-state-selected
{
    background:#fff !important;
}


.dx-toolbar .dx-toolbar-label {
    font-size: 16px;
}


.dx-datagrid .dx-datagrid-table .dx-header-row > td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.dx-datagrid .dx-row > td {
    padding: 10px 10px;
    font-size: 14px;
    line-height: 20px;
}

/*Override Bootstrap*/
label {
    font-weight: 400;
}

.dx-form-group-caption {
    color: #8f6c5d;
    font-weight: 600;
    font-size: 15px;
    background: #e9e1e1;
    padding: 7px 7px;
}


.dx-form-group-with-caption
{
    margin-top:20px;
}


.dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: 17px;
}

.dx-form-group-with-caption > .dx-form-group-content {
    padding-bottom: 0px; 
}

.grid-slash {
    color: #bfbfbf;
    padding-left: 0px;
    padding-right: 0px;
}
.jobs-group {
    display: inline-block;
    height: 17px;
    margin-top: 0px;
    float: right;
    margin-right: 0px;
}

.jobs {
    display: inline-block;
    width: 2px;
    height: 8px;
    background: #e9e1e1;
    margin-right: 0;
}

    .jobs.active {
        width: 4px;
    }

    .jobs[data-step="1"].active {
        background: #0089ff;
    }

    .jobs[data-step="2"].active {
        background: #f5aa00;
    }

    .jobs[data-step="3"].active {
        background: #f5aa00;
    }

    .jobs[data-step="4"].active {
        background: #f5aa00;
    }

    .jobs[data-step="5"].active {
        background: #f5a4dc;
    }

    .jobs[data-step="6"].active {
        background: #f5a4dc;
    }

    .jobs[data-step="7"].active {
        background: #f5a4dc;
    }

    .jobs[data-step="8"].active {
        background: #c2e751;
    }

    .jobs[data-step="9"].active {
        background: #008ee1;
    }

    .jobs[data-step="10"].active {
        background: #37e100;
    }


.ck {
    color: #8f6c5d;
    background: #e9e1e1;
    border-radius: 13px;
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 11px;
}

/* Column Date - Section Day (Name) */
.grid-dn-full {
    border: solid 1px #242159;
    border-radius: 3px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 0px;
    font-size: 10px;
    font-weight: 600;
    float: left;
    margin-top: 0px;
    margin-right: 4px;
    width: 32px;
    text-align: center;
    display: block;
    width: 30px;
    height: 20px;
    line-height: 18px;
}

/* Column Date - Section Day (Name) */
.grid-dn {
    border: solid 1px #242159;
    border-radius: 3px;
    padding-left: 1px;
    padding-right: 1px;
    padding-bottom: 0px;
    font-size: 11px;
    font-weight: 400;
    float: left;
    margin-top: 0px;
    margin-right: 5px;
    width: 27px;
    text-align: center;
    font-family: "JetBrains Mono" !important;
    height: 20px;
    margin-top: 1px;
    line-height: 19px;
}

[class^=grid-dn].dn1 {
    border: solid 1px #fff08c;
    background: #fff08c;
    color: #333333;
}

[class^=grid-dn].dn2 {
    border: solid 1px #f9c0ea;
    background: #f9c0ea;
    color: #333333;
}

[class^=grid-dn].dn3 {
    border: solid 1px #bbff8f;
    background: #bbff8f;
    color: #333333;
}

[class^=grid-dn].dn4 {
    border: solid 1px #ffc897;
    background: #ffc897;
    color: #333333;
}

[class^=grid-dn].dn5 {
    border: solid 1px #d3e5ff;
    background: #d3e5ff;
    color: #333333;
}

[class^=grid-dn].dn6 {
    border: solid 1px #e9d5ff;
    background: #e9d5ff;
    color: #333333
}

[class^=grid-dn].dn7 {
    border: solid 1px #ffbbcb;
    background: #ffbbcb;
    color: #333333;
}


.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending), .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-datagrid-select-all), .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td:not(.dx-validation-pending):not(.dx-datagrid-select-all) {
    vertical-align: top;
}


.dx-datagrid-group-closed, .dx-datagrid-group-opened {
    margin-top: 10px;
}