@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600&display=swap');

.gridTitle h3 {
    margin: 0px !important;
    font-family: 'Sarabun';
    color: #e1ab27;
}

.gridTitle span {
    color: #646464;
    font-family: 'Sarabun';
    font-weight: 600;
}

.qt-mo-item {
    border-radius: 4px;
    background-color: #357abd;
    padding: 2px 4px 2px 4px;
    color: #071521;
    margin-left: 4px;
}

.txt-red {
    color: #ff4b3e
}

.txt-green {
    color: rgb(184, 187, 3)
}

.txt-blue {
    color: #01A9DB
}

.modal {
    z-index: 1000
}

.modal-backdrop {
    z-index: 100
}

.kob-mini-link {
    float: right;
    cursor: pointer;
    color: #035aad;
}

    .kob-mini-link:hover {
        color: #27c4f5;
    }

.kob-ul {
    padding-left: 0px;
    list-style: none;
}

    .kob-ul li {
        line-height: 18px;
        padding-bottom: 12px;
    }

.kob-top-info {
    color: rgb(184, 187, 3);
    padding: 10px;
    border: 1px solid rgb(184, 187, 3);
    background-color: rgba(60, 58, 3, 0.9);
    z-index: 1000000;
    top: 12px;
    height: 39px;
    float: right;
    position: fixed;
    right: 10px;
}

.kob-top-info-err {
    color: #ff4b3e;
    padding: 10px;
    border: 1px solid #ff4b3e;
    background-color: rgba(37, 2, 2, 0.9);
    z-index: 1000000;
    top: 12px;
    position: fixed;
    right: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    text-align: center;
}

.kob-li {
}

    .kob-li:hover {
        background-color: #171717;
    }

.kob-border {
    border: solid 1px #4e4e4e;
}

html {
    background: #191919;
}

.s1i {
    color: #688A08 !important
}

.s2i {
    color: #DBA901 !important
}


.s3i {
    color: #01A9DB !important
}


.s4i {
    color: #BF00FF !important
}


.s5i {
    color: #FA8258 !important
}


.s6i {
    color: #848484 !important
}


.s7i {
    color: #FE2E64 !important
}

.s1 {
    background-color: #688A08
}

.s2 {
    background-color: #DBA901
}


.s3 {
    background-color: #01A9DB
}


.s4 {
    background-color: #BF00FF
}


.s5 {
    background-color: #FA8258
}


.s6 {
    background-color: #848484
}


.s7 {
    background-color: #FE2E64
}

.bn {
    border: 0
}

.input-2 {
    color: #fff;
    font-weight: 600
}

.input-in-td {
    height: 20px;
    padding: 0px 6px;
    margin: 0px;
    border: 0;
    background-color: #fff !important;
}


.c-other1, .c-other2 {
    line-height: 24px !important;
    font-size: 11px;
    cursor: pointer !important;
    color: #ccc;
    opacity: 0.8;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    /* ...and now for the proper property */
    transition: .5s;
}

    .c-other1:hover, .c-other2:hover {
        opacity: 1;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        /* ...and now for the proper property */
        transition: .5s;
    }



.swal2-icon.swal2-success .swal2-success-ring {
    border-radius: 50% !important;
    -webkit-box-sizing: content-box !important;
}

[data-entity=c-other1-on], [data-entity=c-other2-on] {
    display: none;
}

.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th {
    border: 1px solid #515159 !important;
}

input[name='QuotationZone.ZoneAbbr'], input[name='QuotationZone.ZoneName'] {
    background-color: #22313f !important
}

.bg-grey-cararra {
    background: #2c2c2f !important;
}

.cw {
    background-color: #232326
}

.td-group {
    background-color: #22313F;
}

.table thead.sm tr th {
    font-weight: 700;
    font-size: 11px;
}

/* BEGIN : USE FOR DRAG AND DROP */
.handle {
}

.hidden {
    display: none !important;
    opacity: 0.0;
}



.two-place {
    display: block;
    visibility: visible;
    height: 2.5em;
    width: 0;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

    .two-place::after {
        cursor: move;
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
        margin: 4px;
        margin-top: 3px;
        content: "DROP ME";
        text-align: center;
        line-height: 42px;
        vertical-align: middle;
        border: 1px dashed #ccc;
        float: left;
        background-color: #eee;
        height: 42px;
        width: 500px;
    }
/* END: USE FOR DRAG AND DROP */

.aj-label {
    font-weight: 700;
    font-size: 11px;
    color: #2b5270;
}

.page-header .top-menu {
    padding-right: 9px
}

.page-header {
    background-color: #fff
}


.table > tbody > tr > td {
    vertical-align: middle
}

.table thead th label {
    font-size: 11px;
    font-weight: 700 !important
}

.bs-select {
    font-size: 12px;
    width: 100%;
}

.flag-custom {
    width: 100%;
    text-align: left
}

    .flag-custom .caret {
        float: right;
        margin-left: 10px;
        display: block;
        margin-top: 8px;
    }

.bootstrap-select .dropdown-menu {
    font-family: 'Open Sans'
}
/* fix jQuery.Thailand.js Background of type head is transparemnt*/
.tt-input {
    background-color: #fff !important;
}

.daterangepicker {
    font-family: 'Open Sans' !important;
}

.num {
    font-family: consolas,'Open Sans' !important;
}


.num-b {
    font-weight: 800 !important;
}

.b {
    font-weight: 400;
}

/* BEGIN : WebKit Scrollbar */
/*::-webkit-scrollbar {
    background: #666;
    overflow: visible;
    -webkit-transition: all .218s;
    -moz-transition: all .218s;
    -o-transition: all .218s;
    transition: all .218s;
    width: 8px;
    height: 8px;
}

    ::-webkit-scrollbar:hover {
        background-color: #666;
    }


::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border: solid white;
    border-width: 0px;
    height: 50px;
    background-color: #aaa;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #f9831e;
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: #f9831e;
    }

::-webkit-scrollbar-track {
}*/




/* END : WebKit Scrollbar */




select {
    font-family: 'FontAwesome', 'Open Sans' !important;
}


/* BEGIN : Fix Quotation */

tr[item-type=service], tr[item-type=spare-part] {
    background-color: #fff !important;
    color: #000 !important
}

    tr[item-type=service] td, tr[item-type=spare-part] td {
        padding: 4px 8px !important;
        vertical-align: middle;
        font-weight: 200 !important;
        vertical-align: middle !important
    }

.table-bordered > thead > tr[item-type] > td, .table-bordered > thead > tr[item-type] > th {
    border-bottom-width: 1px
}

/* END : Fix Quotation */


.swal2-content {
    font-family: Open Sans !important
}

.vm td {
    vertical-align: middle !important
}

.zero {
    margin: 0 !important;
    padding: 0 !important;
}

.all-zero {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.page-header .burger-trigger .menu-overlay-bg-transparent.menu-overlay-show ~ .menu-bg-overlay {
    background: rgb(103, 99, 93) !important;
}



template {
    display: none;
}

    template tr {
        display: none;
    }


.input-td {
    border: none;
    background: none;
    padding: 8px;
    width: 100%
}

.p0 {
    padding: 0 !important;
    vertical-align: top;
}

.p5 {
    padding: 5px !important;
}

input[type=text].input-td2 {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
    height: 32px;
    padding-left: 8px;
    padding-right: 8px
}

select.input-td2 {
    border: none;
    background: none;
    padding: 0;
    width: 100%;
    height: 32px;
    padding-left: 8px
}


.w80 {
    width: 80% !important;
}

[data-ui=show-on-load-completed] {
    display: none;
}

.custom-loading {
    background-image: url('../img/ajboggs-loading.gif');
    background-repeat: no-repeat;
    background-position: center center;
    height: 200px;
}

.margin-padding-0 {
    margin: 0 !important;
    padding: 0 !important;
}

.page-container-bg-solid {
    background: #fff !important;
}

.page-name {
    padding: 4px !important;
    background-color: #525E64;
    color: #fff;
    text-align: center;
    display: none;
}

.swal2-icon {
    border-radius: 50% !important;
}

[data-mode=single] {
    display: none;
}

.no-scroll-x {
    overflow-x: hidden;
}

.bl {
    border-left: 4px solid #526781;
}

.t {
    /*left: 0;*/
    position: fixed;
    /*right: 0;
    top: 0;*/
    z-index: 11111111111111111111;
    height: 2px;
    background: #27c4f5 -webkit-linear-gradient(left,#27c4f5,#a307ba,#fd8d32,#70c050,#27c4f5);
    background: #27c4f5 linear-gradient(to right,#27c4f5,#a307ba,#fd8d32,#70c050,#27c4f5);
    background-size: 500%;
    -webkit-animation: 2s linear infinite barprogress,.3s fadein;
    animation: 2s linear infinite barprogress,.3s fadein;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

@-webkit-keyframes barprogress {
    0% {
        background-position: 0% 0
    }

    to {
        background-position: 125% 0
    }
}

@keyframes barprogress {
    0% {
        background-position: 0% 0
    }

    to {
        background-position: 125% 0
    }
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}


.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-top: 1px solid #424242 !important;
}


.kob-small-btn {
    background-color: #03A9F4;
    color: #000;
    float: left;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer;
    height: 15px;
    line-height: 15px
}

    .kob-small-btn:hover {
        background-color: #038dcc;
    }

.dx-master-detail-row > .dx-cell-focus-disabled {
    background-color: #000 !important;
}


.dx-master-detail-cell .dx-toolbar-items-container {
    /*   height: 30px !important*/
}

.dx-group-row {
    background-color: #071521 !important;
}

.dx-link-a {
    font-size: 13px !important
}

/*Fix label data list more left indent*/
.dx-field-item-label-location-top {
    display: block;
    padding: 16px 0px 3px !important;
}
/*Fix label data list more left indent*/
.dx-field-item-help-text {
    white-space: normal;
    color: #fff9;
    padding: 6px 0px 2px !important;
    font-style: normal;
}
/*Fix label data list more left indent*/
.dx-adaptive-item-text {
    padding-left: 0 !important;
    padding-right: 16px;
}
/*Fix search far from right */
.dx-datagrid-search-panel.dx-searchbox {
    margin-right: -16px;
}
/*Fix Column Header Color*/
.dx-row .dx-header-row, [role=columnheader] {
    background: #222;
}