﻿@font-face {
    font-family: 'Noto Sans';
    src: url('fonts/NotoSans/NotoSans-Regular.woff2') format('woff2'), url('fonts/NotoSans/NotoSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Noto Sans Semibold';
    src: url('fonts/NotoSans/notosans-semibold-webfont.woff2') format('woff2'), url('fonts/NotoSans/notosans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Sarabun";
    src: url('fonts/THSarabunPSK/THSarabun.woff2') format("woff2"), url('fonts/THSarabunPSK/THSarabun.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Material Icons';
    src: url(fonts/MaterialDesignIcon/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(fonts/MaterialDesignIcon/MaterialIcons-Regular.woff2) format('woff2'), url(fonts/MaterialDesignIcon/MaterialIcons-Regular.woff) format('woff'), url(fonts/MaterialDesignIcon/MaterialIcons-Regular.ttf) format('truetype');
    font-weight: 400;
    font-style: normal;
}
/*custom.css ancestor*/

.btn.btn-default {
    border: 0 !important;
    border-top-color: rgb(232, 236, 250) !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-right-color: rgb(232, 236, 250) !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-bottom-color: rgb(232, 236, 250) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: rgb(232, 236, 250) !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-image-source: initial !important;
    border-image-slice: initial !important;
    border-image-width: initial !important;
    border-image-outset: initial !important;
    border-image-repeat: initial !important;
    background: transparent !important;
    color: #74788d;
    border: 1px solid #e8ecfa !important;
    border-top-color: rgb(232, 236, 250) !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-right-color: rgb(232, 236, 250) !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-bottom-color: rgb(232, 236, 250) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: rgb(232, 236, 250) !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-image-source: initial !important;
    border-image-slice: initial !important;
    border-image-width: initial !important;
    border-image-outset: initial !important;
    border-image-repeat: initial !important;
}
.btn.btn-default-vendor {
    border: 0 !important;
    border-top-color: rgb(232, 236, 250) !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-right-color: rgb(232, 236, 250) !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-bottom-color: rgb(232, 236, 250) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: rgb(232, 236, 250) !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-image-source: initial !important;
    border-image-slice: initial !important;
    border-image-width: initial !important;
    border-image-outset: initial !important;
    border-image-repeat: initial !important;
    background: transparent !important;
    color: #74788d;
    border: 1px solid #e8ecfa !important;
    border-top-color: rgb(232, 236, 250) !important;
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-right-color: rgb(232, 236, 250) !important;
    border-right-style: solid !important;
    border-right-width: 1px !important;
    border-bottom-color: rgb(232, 236, 250) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-left-color: rgb(232, 236, 250) !important;
    border-left-style: solid !important;
    border-left-width: 1px !important;
    border-image-source: initial !important;
    border-image-slice: initial !important;
    border-image-width: initial !important;
    border-image-outset: initial !important;
    border-image-repeat: initial !important;
}
    .btn.btn-default-vendor:hover{
        color:unset !important;
    }

    .btn.btn-danger {
        color: #ffffff;
        background-color: #F64E60;
        border-color: #F64E60;
        border-top-color: rgb(246, 78, 96);
        border-right-color: rgb(246, 78, 96);
        border-bottom-color: rgb(246, 78, 96);
        border-left-color: rgb(246, 78, 96);
    }
/* style.bundle after custom.css ancestor*/
.btn.btn-outline-secondary {
    color: #494988;
}

    .show > .btn.btn-outline-secondary, .btn.btn-outline-secondary.active, .btn.btn-outline-secondary:active, .btn.btn-outline-secondary:hover {
        background-color: #e1e1ef;
    }

.btn-outline-secondary {
    color: #e1e1ef;
    border-color: #e1e1ef;
    border-top-color: rgb(225, 225, 239);
    border-right-color: rgb(225, 225, 239);
    border-bottom-color: rgb(225, 225, 239);
    border-left-color: rgb(225, 225, 239);
}
/*end ancestor*/
.line-thead-vendor {
    border-bottom: solid 2px #429085;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: rgb(66, 144, 133);
    color: #429085;
}
/*End ancestor*/

html, body {
    font-family: 'Noto Sans', 'Sarabun', 'Material Icons', sans-serif !important;
}

.kt-portlet .blue {
    background: #8dcac2 !important;
}

.kt-portlet .kt-portlet__body {
}

.title_font_color {
    color: #34235f !important;
}

.k-dialog {
    top: 50px !important;
}

.k-dialog-title {
    color: #34235f !important;
}

.kt-badge.kt-badge--orange {
    color: #ffffff;
    background: #ed9e28;
}

.btn-vendor {
    color: #1BC5BD !important;
    background-color: #C9F7F5 !important;
}

    .btn-vendor:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #1BC5BD !important;
    }

.bluebtn-vendor {
    color: #3699FF !important;
    background-color: #E1F0FF !important;
}

    .bluebtn-vendor:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #3699FF !important;
    }

.btn-vendor-onetime {
    background-color: #cce6ce !important;
    border-color: #01704f !important;
    color: #34235f !important;
}

.btn-blue {
    background-color: #00baff !important;
}

.btn-vendor-left {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    background-color: #1BC5BD !important;
}

.btn-vendor-mid {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    background-color: #1BC5BD !important;
}


.btn-vendor-right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    background-color: #1BC5BD !important;
}

.btn-manualpost {
    background-color: #F64E60 !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

    .btn-manualpost:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #EE2D41 !important;
    }

.title_blue {
    color: #041ca2 !important;
}

.btn-menu-form {
    border-color: #01704f !important;
    color: #030303 !important;
}

.btn-menu-form-left {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    color: #1BC5BD !important;
    background-color: #C9F7F5 !important;
    border-color: transparent !important;
}

    .btn-menu-form-left:hover {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        cursor: pointer !important;
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #1BC5BD !important;
    }

.btn-menu-form-mid {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    color: #1BC5BD !important;
    background-color: #C9F7F5 !important;
    border-color: transparent !important;
}

    .btn-menu-form-mid:hover {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        cursor: pointer !important;
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #1BC5BD !important;
    }

    .btn-menu-form-mid.noHover:hover {
        cursor: not-allowed !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        color: #1BC5BD !important;
        background-color: #C9F7F5 !important;
        border-color: transparent !important;
    }

.btn-menu-form-right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    color: #1BC5BD !important;
    background-color: #C9F7F5 !important;
    border-color: transparent !important;
}

    .btn-menu-form-right:hover {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        cursor: pointer !important;
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #1BC5BD !important;
    }

    .btn-menu-form-right.noHover:hover {
        cursor: not-allowed !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        color: #1BC5BD !important;
        background-color: #C9F7F5 !important;
        border-color: transparent !important;
    }

/*    .btn-menu-form:hover {
        background-color: #C9F7F5 !important;
        border-color: #01704f !important;
        color: #030303 !important;
    }*/

.btn-tuub {
    background-color: #429085 !important;
}

.border_kob {
    border-color: #01704f !important;
}


.textbox-vendor {
    border-color: #01704f;
    color: #34235f !important;
}

.number-vendor::-webkit-outer-spin-button,
.number-vendor::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.default-general {
    border-color: #E3E7EC;
    color: #34235f !important;
}

    .default-general ak-autocomplete > span {
        border-color: #E3E7EC !important;
    }

    .default-general ak-autocomplete > div > span {
        border-color: #E3E7EC !important;
    }

    .default-general .k-datepicker > span {
        border-color: #E3E7EC !important;
    }

    .default-general > fs-datetime-picker > div > span > button {
        border-color: #E3E7EC !important;
    }

    .default-general > div > span > button {
        border-color: #E3E7EC !important;
    }

    .default-general span {
        border-color: #E3E7EC !important; /* #01704f*/
    }

.section-min {
    min-height: 10px !important;
}

.k-autocomplete .k-input {
    border-color: #01704f;
    color: #34235f !important;
}

.hiddenRow {
    padding: 0 !important;
}

.manage-file-hover:hover .manage-file {
    display: flex;
}

.manage-file-hover:hover .file-img {
    opacity: 0.5;
    background-color: black;
}

.show-section {
    display: block;
}

.hind-section {
    display: none;
    transition: height 200ms;
}

.cursor-pointer {
    cursor: pointer !important;
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
}

.manage-file {
    position: absolute;
    top: 50%;
    /*left: -50px;*/
    z-index: 99;
    display: none;
}

    .manage-file span {
        display: contents;
    }

.k-input[type=text] {
    border-color: #01704f;
    color: #34235f !important;
}

    .k-input[type=text] ak-autocomplete > span {
        border-color: #01704f;
        color: #34235f !important;
    }

    .k-input[type=text] .k-datepicker > span {
        border-color: #01704f;
        color: #34235f !important;
    }

.form-control {
    border-color: #E3E7EC;
    color: #34235f !important;
}
/*.k-autocomplete .k-input, .k-dropdown-wrap .k-input, .k-multiselect-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input, .k-selectbox .k-input, .k-textbox > input {
    border-color: #01704f !important;
    color: #34235f !important;
}*/
/*input:disabled {
    background-color: rgba(251,227,214,0.7) !important;
}*/


select:disabled {
    background-color: #fbe5d6 !important;
}

textarea:disabled {
    background-color: #fbe5d6 !important;
    opacity: 0.58 !important;
}

.color-in-textbox {
    background-color: #fbe5d6 !important;
}

.background-color-vendor {
    /*background-color: #f7f7f7 !important;*/
    background-color: #ffffff !important;
}

.fontsizethirty {
    font-size: 30px !important;
    z-index: 10;
}

.require {
    color: red !important;
}

.invalid {
    /*border: 1.2px solid red !important;*/
    border-color: red !important;
}

    .invalid ak-autocomplete > span {
        border-color: red !important;
    }

    .invalid .k-datepicker > span {
        border-color: red !important;
    }

    .invalid > span .k-picker-wrap .k-state-default > span {
        border-color: red !important;
    }

    .invalid span {
        border-color: red !important;
    }

    .invalid ak-autocomplete > div > span {
        border-color: red !important;
    }


    .invalid fs-datetime-picker > div > input {
        border-color: red !important;
    }

    .invalid div > input {
        border-color: red !important;
    }

    .invalid fs-datetime-picker > div > span > button {
        border-color: red !important;
    }

    .invalid div > span > button {
        border-color: red !important;
    }

    .invalid numeric-input > input {
        border-color: red !important;
    }


.k-autocomplete .k-input, .k-multiselect-wrap, .k-textbox > input {
    height: 29px;
    width: 100% !important;
}

.k-textbox {
    height: 35px;
    width: 100% !important;
}

.k-picker-wrap .k-input {
    height: 35px;
    width: 100% !important;
}

.k-datepicker {
    width: 100% !important;
}

.k-icon, .k-tool-icon {
    /*position:initial !important;*/
}

.trash {
    color: red !important;
    font-size: 24px !important;
    cursor: pointer;
}

.kt-portlet {
}

#summary {
    position: sticky;
    bottom: 0;
    margin-bottom: 0;
    z-index: 100;
}

.form-group {
    margin-bottom: 1rem !important;
}

.status {
    text-align: center;
    color: white;
    height: 25px !important;
    /*width: 250px;*/
    background-color: #ed9e28;
    border-radius: 20px;
    display: inline-block;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.statusCompleted {
    background-color: #0abb87;
}

.statusRejected {
    background-color: #f5222d; /*red*/
}

.icon-summary:before {
    position: unset !important;
    font-size: 18px;
}

.icon-summary {
    height: 24px !important;
    width: 80px !important;
    cursor: pointer;
}

.k-i-arrow-60-down:before, .k-i-arrow-60-up:before {
    position: unset !important;
}

textarea.k-textbox {
    width: 100% !important;
}

.k-numeric-wrap .k-input {
    height: 33px !important;
}

.k-numeric-wrap.k-state-default {
    height: 33px !important;
}




#draggables {
    width: 100px;
    min-height: 1px;
    float: left;
}

    #draggables > img {
        display: block;
        margin: 0 auto;
    }

#drop {
    float: left;
}

    #drop > div {
        min-height: 10px;
        min-width: 10px;
        border: 1px dashed cadetblue;
    }

.slide-donw-ico {
    color: white !important;
    font-size: x-large !important;
    font-weight: 700;
}

.no-border-style {
    border-style: none !important;
}

.uploadfile-drag-drop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5;
}

.uploadfile-drag-drop_1 {
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 5 !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.k-i-trash {
    color: red !important;
    cursor: pointer !important;
}

    .k-i-trash:hover {
        cursor: pointer !important;
    }

.k-icon-edit {
    display: unset !important;
}

.flaticon-eye {
    color: white !important;
    cursor: pointer !important;
}

    .flaticon-eye:hover {
        cursor: pointer !important;
    }

.flaticon2-download-2 {
    color: white !important;
}

    .flaticon2-download-2:hover {
        cursor: pointer !important;
    }

.tooltip-vendor {
    position: relative;
    display: inline-block;
}

    .tooltip-vendor .tooltiptext-vendor {
        visibility: hidden;
        width: 300px;
        background-color: #282a3c;
        color: #fff;
        text-align: center;
        border-radius: 3px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -285px;
        opacity: 0;
        transition: opacity 0.3s;
    }

        .tooltip-vendor .tooltiptext-vendor::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 95%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    .tooltip-vendor:hover .tooltiptext-vendor {
        visibility: visible;
        opacity: 1;
    }

.btn_text {
    display: inline-block !important;
    font-weight: normal !important;
    color: #212529 !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    padding: 0.65rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border-radius: 0.25rem !important;
    -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
}


.expand-summary {
    position: absolute;
    right: 20px;
}

table > thead > tr > th {
    /*    background-color: #8dcac2;*/
    /*    border-color: #8dcac2 !important;*/
}

table > tbody > tr > td {
    /*    border-color: #8dcac2 !important;*/
}

.hidden {
    display: none !important;
}



@media (prefers-reduced-motion: reduce) {
    .btn {
        -webkit-transition: none !important;
        transition: none !important;
    }
}

.btn:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.btn-logout {
    -webkit-transition: none !important;
    transition: none !important;
}


    .btn-logout:hover {
        color: #333 !important;
        text-decoration: none !important;
    }


.btn:focus, .btn.focus {
    outline: 0 !important;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.25) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 103, 221, 0.25) !important;
}

.btn-success {
    color: #fff !important;
    background-color: #1BC5BD !important;
    border-color: #1BC5BD !important;
    color: #ffffff !important;
}

    .btn-success:hover {
        color: #fff !important;
        background-color: #0BB7AF !important;
        border-color: #0BB7AF !important;
    }

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 250px;
    min-height: 35px !important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 8px 20px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #f1f1f1
        }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.flaticon2-down {
    color: #429085 !important;
}

/*Comment*/
.portletComment {
    box-shadow: unset !important;
}

.portletBodyComment {
    background-color: white !important
}

.portletComment > .kt-portlet__foot {
    padding: 25px 0px 25px 0px !important;
    border: unset !important;
}

.kt-chat__editor {
    border: 1px solid #90abdc !important;
}

.portletComment > .kt-portlet__foot > .kt-chat__input > .kt-chat__editor > textarea {
    color: #2e2e2e;
}

kt-chat .kt-chat__messages .kt-chat__message .kt-chat__user .kt-chat__username {
    color: #417eec !important;
}

.kt-chat .kt-chat__messages .kt-chat__message .kt-chat__text {
    /*padding: 0.5rem 3.5rem 0.5rem 1.6rem !important;
    background-color: #e8e6e6 !important;*/
    padding: 0.8rem 1.6rem 0.8rem 1.6rem !important;
    /*background-color: #e8e6e6 !important;*/
    display: block !important;
}

.kt-media.kt-media--sm img {
    height: 25px !important;
    width: 25px !important;
}

.kt-chat .kt-chat__messages .kt-chat__message .kt-chat__text {
    display: block !important;
}
/*Comment*/

.invoice-drop-zone {
    border: dashed;
    border-radius: 15px;
    height: auto;
    padding: 20px;
    background-color: #f7f7f7;
    border-color: #8dcac2;
}

.kt-aside {
    background-color: rgb(52,35,95) !important;
}

.kt-aside-menu {
    background-color: rgb(52,35,95) !important;
}

.kt-aside__brand {
    background-color: rgb(52,35,95) !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-text, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-text {
    color: white !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon {
    color: white !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__link-icon, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 35px;
    flex: 0 0 40px !important;
    font-size: 1.8rem !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link {
    padding: 20px 15px !important;
}

    .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__ver-arrow, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__ver-arrow {
        color: white !important;
    }

    .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__heading .kt-menu__ver-arrow, .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__ver-arrow {
        font-size: 1rem !important;
    }

.kt-aside__brand .kt-aside__brand-tools .kt-aside__brand-aside-toggler span i {
    font-size: 22px;
    color: white;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__heading .kt-menu__link-text, .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__link .kt-menu__link-text {
    color: white !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__heading .kt-menu__link-bullet.kt-menu__link-bullet--line > span, .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__link .kt-menu__link-bullet.kt-menu__link-bullet--line > span {
    background-color: white !important;
}

.kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__submenu .kt-menu__subnav > .kt-menu__item > .kt-menu__link {
    padding: 15px 15px !important;
    padding-left: 40px;
}

.kt-grid.kt-grid--hor-desktop.kt-grid--desktop {
    box-shadow: 0px 0px 13px 0px #000000;
}

.center-trash {
    margin: 0;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mg-35 {
    margin-left: -35px !important;
}

#date-picker-spacial {
    margin-top: -10px !important;
}

    #date-picker-spacial .k-datepicker {
        background: unset !important;
    }

    #date-picker-spacial .k-picker-wrap {
        border: unset !important;
    }

    #date-picker-spacial #datepicker {
        display: none !important;
    }

    #date-picker-spacial #datepicker-2 {
        display: none !important;
    }

.confirm-dialog-content {
    color: black !important;
    font-size: 14px !important;
    min-height: 100px !important;
    margin-bottom: 15px !important /*font-weight:bold !important;*/;
}

.confirm-dialog-footer {
    text-align: right !important;
}

.error-message {
    color: red !important;
}

.post-summary-status-text {
    font-size: 14px !important;
    font-weight: bold !important;
}

.post-status-icon-success {
    font-size: 25px !important;
    color: green !important;
    font-weight: bold !important;
}

.post-status-icon-fail {
    font-size: 25px !important;
    color: red !important;
    font-weight: bold !important;
}

.icon-edit-vendor {
    cursor: pointer;
    margin-left: -45px;
    margin-top: 50px;
}

.attach-file {
    right: 15px;
    position: relative;
    border-radius: 6px;
    width: 100px;
    height: 130px;
    object-fit: cover;
}

.uppy-DragDrop-inner {
    margin: 0;
    text-align: center;
    padding: 16px 0px;
    line-height: 1.4;
    cursor: pointer;
    border: 1px;
    border-style: dotted;
    border-radius: 5px;
}

.uppy-DragDrop-arrow {
    width: 60px;
    height: 60px;
    fill: #e0e0e0;
    margin-bottom: 17px;
}

.UppyIcon {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    overflow: hidden;
}

.uppy-DragDrop-input {
    width: .1px;
    height: .1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.kt-grid-top {
    /* position: relative;
    top: -30px;*/
}

#summary .kt-portlet__body {
    padding: 5px 25px 5px 25px !important;
}

.k-icon-red {
    color: #f64e60 !important;
}

.k-icon-green {
    color: green !important;
}

.no-right {
    position: absolute;
    right: 0px;
}

.none-l-border {
    border-left: hidden !important;
}

.none-bt-border {
    border-bottom: hidden !important;
}



#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    #myImg:hover {
        opacity: 0.7;
    }

/* The Modal (background) */
.img-modal {
    /*display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.img-modal-close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: red;
    text-shadow: 0 1px 0 #fff;
    opacity: 1.5;
    top: 0;
    position: relative;
    right: 50%;
}

/* Modal Content (image) */
.img-modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    /* height: 150px;*/
}

/* Add Animation */
.img-modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.img-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .img-close:hover,
    .img-close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

.dot-vendor {
    height: 25px;
    width: 25px;
    background-color: #34235f;
    border-radius: 50%;
    display: inline-block;
    color: white;
    position: relative;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .img-modal-content {
        width: 100%;
    }
}


.select-container {
    width: 100%;
    z-index: 100;
    position: relative;
}

    .select-container .select-result {
        height: auto;
        max-height: 250px;
        background-color: white;
        width: 100%;
        border: 1px solid;
        position: absolute;
        overflow-x: hidden;
        border-radius: 4px;
        display: none;
    }

.select-result {
}

.no-x-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.v-i-custom {
    left: 1px;
    top: 3px;
    background-color: white;
    width: 90% !important;
    height: 80% !important
}

.resize-account {
    /*left: 1px !important;*/
    width: 150%;
    transform: scale(0.66);
    transform-origin: top left;
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    float: left;
    /*position: absolute;
    left: 1px;*/
}

.outsize-resize {
    /*left: 1px !important;*/
    -webkit-transition: 0.5s all;
    -moz-transition: 0.5s all;
    /*position: absolute;
    left: 1px;*/
    /*outline: 1px solid transparent;*/
}

.manage-manualmatching {
    height: 38.4px;
}

.minus-manualmatching {
    /*height: 38.4px;*/
    display: unset !important;
    margin: 0;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: unset !important;
}

.money-input {
    text-align: right !important;
}

.hr-vendor {
    color: #01704f !important;
    background-color: #01704f !important;
}

.no-width-numerictextbox span {
    width: unset;
}

.more-button {
    background-color: #ffffff;
    color: #000000;
    cursor: pointer;
    padding: 1px;
    border: 1px solid #ffffff;
    text-align: left;
    outline: none;
    font-size: 15px;
}


    .more-button:after {
        content: '\23F5';
        color: white;
        font-size: 20px;
        float: left;
    }

.th-border-color-white {
    border-color: #e2e5ec !important;
}

.font-b {
    font-weight: bold;
}

.subitem-bgcolor > thead > tr > th {
    background-color: #d9d9d9 !important;
}

.table-vendor > thead > tr > th, .table-vendor > tr > th {
    background-color: #8dcac2;
    border-color: #8dcac2 !important;
    text-align: center;
}

.table-vendor > tbody > tr > td, .table-vendor > tr > td {
    border-color: #8dcac2 !important;
    padding-left: 2px;
    padding-right: 2px;
}

.table {
    margin-bottom: unset !important;
}

.padding-y-10 {
    padding-top: 10px;
    padding-bottom: 10px
}

txt-green {
    color: #038555 !important;
}

.header {
    margin-top: auto;
    margin-bottom: auto;
}

.general_informationportlet__body {
    padding-bottom: 10px !important
}

.custom-link {
    cursor: pointer;
}

    .custom-link:hover {
        color: blue;
        text-decoration: underline;
    }


.text-comment-title {
    font-weight: 500;
}

.text-comment-action-common {
    font-weight: 400;
    color: #1BC5BD !important
}

.text-comment-action-withdraw,
.text-comment-action-hold,
.text-comment-action-unhold {
    font-weight: 500;
    color: #FFA800 !important;
}

.text-comment-action-reject {
    font-weight: 500;
    color: #F64E60 !important;
}

.kt-bg-light-common {
    background-color: #E1F0FF !important; /*light blue*/
    border-color: transparent !important;
}

.kt-bg-light-withdraw,
.kt-bg-light-hold,
.kt-bg-light-unhold {
    background-color: #FFF4DE !important; /*light yellow*/
    border-color: transparent !important;
}

.kt-bg-light-reject {
    background-color: #FFE2E5 !important; /*light red*/
    border-color: transparent !important;
}

.btn-hold, .btn-unhold, .btn-withdraw, .btn-overrole, .btn-finish, .btn-indexing {
    color: #da9022 !important; /*yellow*/
    background-color: white !important;
    border-color: #da9022 !important;
    border-width: 2px !important;
}

    .btn-hold:hover,
    .btn-unhold:hover,
    .btn-withdraw:hover,
    .btn-overrole:hover,
    .btn-finish:hover,
    .btn-indexing:hover {
        color: white !important;
        background-color: #da9022 !important;
        -webkit-box-shadow: 0 0 0 2px #A20000 !important;
        box-shadow: 0 0 0 2px #da9022 !important;
        transition: all 200ms ease-out !important;
    }

    .btn-hold:focus,
    .btn-unhold:focus,
    .btn-withdraw:focus,
    .btn-overrole:focus,
    .btn-hold.focus,
    .btn-unhold.focus,
    .btn-withdraw.focus,
    .btn-overrole.focus,
    .btn-finish:focus,
    .btn-indexing:focus {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }


.btn-reject, .btn-cancel, .btn-rejectconfirmation {
    color: #A20000 !important; /*red*/
    background-color: white !important;
    border-color: #A20000 !important;
    border-width: 2px !important;
}

    .btn-reject:hover,
    .btn-rejectconfirmation:hover,
    .btn-rejectverify:hover,
    .btn-cancel:hover {
        color: white !important;
        background-color: #A20000 !important;
        -webkit-box-shadow: 0 0 0 2px #A20000 !important;
        box-shadow: 0 0 0 2px #A20000 !important;
        transition: all 200ms ease-out !important;
    }

    .btn-reject:focus,
    .btn-rejectverify:focus,
    .btn-cancel:focus,
    .btn-rejectconfirmation.focus,
    .btn-rejectverify.focus,
    .btn-cancel.focus {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

.btn-resubmit, .btn-submit, .btn-approve, .btn-accept, .btn-verify, .btn-approveconfirmation, .btn-verifyapprove, .btn-pay, .btn-receive, .btn-post, .btn-verify_approveverify {
    color: white !important; /*green*/
    background-color: #1BC5BD !important;
    /*    border-color: #1BC5BD !important;
*/ border-width: 2px !important;
}
    
    .btn-submit.active {
        color: white !important;
        background-color: #C9F7F5 !important;
    }

    .btn-submit:hover,
    .btn-resubmit:hover,
    .btn-approve:hover,
    .btn-accept:hover,
    .btn-verify:hover,
    .btn-approveconfirmation:hover,
    .btn-verifyapprove:hover,
    .btn-pay:hover,
    .btn-receive:hover
    .btn-post:hover, .btn-verify_approveverify:hover {
        color: white !important;
        background-color: #0BB7AF !important;
        -webkit-box-shadow: 0 0 0 2px #0BB7AF !important;
        box-shadow: 0 0 0 2px #0BB7AF !important;
        transition: all 200ms ease-out !important;
        /*        -webkit-box-shadow: 0 0 0 2px #C9F7F5 !important;
        box-shadow: 0 0 0 2px #C9F7F5 !important;
        transition: all 200ms ease-out !important;*/
    }

    .btn-submit:focus,
    .btn-resubmit:focus,
    .btn-approve:focus,
    .btn-accept:focus,
    .btn-verify:focus,
    .btn-approveconfirmation:focus,
    .btn-verifyapprove:focus,
    .btn-pay:focus,
    .btn-post:focus,
    .btn-resubmit.focus,
    .btn-submit.focus,
    .btn-approve.focus,
    .btn-accept.focus,
    .btn-verify.focus,
    .btn-approveconfirmation.focus,
    .btn-verifyapprove.focus,
    .btn-pay.focus,
    .btn-receive.focus,
    .btn-post.focus {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

.btn-paid {
    color: #9C9C9C !important;
    background-color: white !important;
    border-color: #9C9C9C !important;
    border-width: 2px !important;
}

    .btn-paid:hover {
        color: white !important;
        background-color: #9C9C9C !important;
        -webkit-box-shadow: 0 0 0 2px #9C9C9C !important;
        box-shadow: 0 0 0 2px #9C9C9C !important;
        transition: all 200ms ease-out !important;
    }

.favorite-star {
    color: #FFC107 !important;
    vertical-align: middle !important;
}

.btn-favorite {
    cursor: pointer;
}

.btn-favorite-disable {
    cursor: not-allowed;
}

.btn-favorite:hover {
    color: blue;
    text-decoration: underline;
}

.layout-aside {
    z-index: 200 !important;
}

.top-grid {
    padding-top: 60px !important;
}

.k-window-content[aria-hidden=true] {
    padding: unset;
}

.kt-portlet {
    /*    box-shadow: 0px 0px 13px 0px #aba8a896 !important;*/
}

.divAttachFile {
    border: dashed #8dcac2;
    border-radius: 5px;
    height: auto;
    padding: 20px;
}

.divItemAttachFile {
    border: dashed #8dcac2;
    border-radius: 5px;
    height: auto;
    padding: 20px;
}

.item-droptarget {
    padding: 15px;
    /*border: dashed #90abdc;*/
    border-radius: 15px;
    width: 100%;
    text-align: center;
    font-size: 20px;
}


.container_upload {
    position: relative;
    width: 100px;
}


.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(69, 51, 55, 0.8);
    overflow: hidden !important;
    width: 100%;
    height: 0;
    transition: 1s !important;
}

.container_upload:hover .overlay {
    height: 100%;
}


.text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center !important;
}

.btn-clip {
    color: #1BC5BD !important;
    background-color: #F3F6F9 !important;
    border-radius: 8px !important;
}

    .btn-clip:hover {
        color: #ffffff !important;
        background-color: #1BC5BD !important;
        border-color: #1BC5BD !important;
    }

.btn-save {
    color: #FFA800 !important;
    background-color: #F3F6F9 !important;
    border-radius: 8px !important;
}

    .btn-save:hover {
        color: #ffffff !important;
        background-color: #FFA800 !important;
        border-color: #FFA800 !important;
    }

.btn-delete {
    color: #F64E60 !important;
    background-color: #F3F6F9 !important;
    border-radius: 8px !important;
}

    .btn-delete:hover {
        color: #ffffff !important;
        background-color: #F64E60 !important;
        border-color: #F64E60 !important;
    }


.btn-edit {
    color: #8950FC !important;
    background-color: #F3F6F9 !important;
    border-radius: 8px !important;
}

    .btn-edit:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #8950FC !important;
    }

.btn-coppy {
    color: #3699FF !important;
    background-color: #F3F6F9 !important;
    border-radius: 8px !important;
}

    .btn-coppy:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #3699FF !important;
    }

.btn-clear {
    color: #1BC5BD !important;
    background-color: #F3F6F9 !important;
}

    .btn-clear:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #1BC5BD !important;
    }

.btn-popup {
    border: 1px solid #e8ecfa !important;
}

    .btn-popup:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #1bc5bd !important;
    }

.btn-document {
    color: #51d34c !important;
    background-color: #F3F6F9 !important;
    border-radius: 8px !important;
}

    .btn-document:hover {
        color: #ffffff !important;
        background-color: #51d34c !important;
        border-color: #51d34c !important;
    }

.btn-primary {
    color: #1BC5BD !important;
    border-color: transparent !important;
    background-color: #C9F7F5 !important;
}

    .btn-primary:hover {
        color: #ffffff !important;
        border-color: transparent !important;
        background-color: #1BC5BD !important;
    }

.text-right {
    padding-right: 10px !important;
}

.btn-back {
    color: #fff !important;
    background-color: #F64E60 !important;
    border-color: #F64E60 !important;
    color: #ffffff !important;
}

    .btn-back:hover {
        color: #fff !important;
        background-color: #DC3545 !important;
        border-color: #DC3545 !important;
    }

.link-attechment-approvalinfo {
    color: #ce3c3c !important;
}

    .link-attechment-approvalinfo:visited {
        color: black !important;
    }

.btn-receive-acc {
    background-color: #f3f6f9 !important;
    font-size: 20px !important;
    padding: 2px 7px 6px 8px !important;
    border-radius: 6px !important;
}

    .btn-receive-acc:hover {
        background-color: #c2c8cd !important;
    }

.acc-btn-dot {
    padding: 6px;
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-top: -5px;
    background-color: #ffbc2f;
}

    .acc-btn-dot.receipt {
        background-color: #57d452 !important;
    }

.Incorrect-Branch {
    background-color: yellow;
}

.shadow-hover:hover {
    box-shadow: 0px 0px 13px 0px #aba8a896 !important;
    cursor: pointer;
}

.underline-hover:hover {
    text-decoration: underline;
    cursor: pointer;
}

.approved-fidoc {
    color: yellow;
    top: 10px !important;
}

.duplicate-invoice {
    color: red;
    top: 10px !important;
}

.equal-total {
    color: green;
}

.notequal-total {
    color: red;
}

.statusCancelled {
    color: white;
    background-color: #5867dd;
}

.kt-input-icon-po {
    position: relative !important;
    padding-left: 10px;
    padding-right: 12px;
    width: 100% !important;
}

.balance-input {
    height: 35px;
}

    .balance-input > div > input {
        height: 35px;
    }

    .balance-input > div > span > button {
        height: 35px;
    }

    .balance-input > fs-datetime-picker > div > input {
        height: 35px;
    }

    .balance-input > fs-datetime-picker > div > span > button {
        height: 35px;
    }

    .balance-input:disabled {
        opacity: 0.58;
        height: 35px;
    }
    /*date time*/
    .balance-input:read-only div > input {
        /*opacity: 0.58;
        height: 35px;
        background-color: #fbe5d6 !important;*/
    }

    .balance-input:read-only div > span > button {
        /*opacity: 0.58;
        height: 35px;
        background-color: #fbe5d6 !important;*/
    }

    .balance-input:read-only fs-datetime-picker > div > input {
        /*opacity: 0.58;
        height: 35px;
        background-color: #fbe5d6 !important;*/
    }

    .balance-input:read-only fs-datetime-picker > div > span > button {
        /*opacity: 0.58;
        height: 35px;
        background-color: #fbe5d6 !important;*/
    }

.input-group-append:disabled {
    background-color: #fbe5d6 !important;
}
/*date time*/
numeric-input {
}

    numeric-input > input {
        height: 35px !important;
    }

.balance-input2 {
    height: 34px;
}

    .balance-input2:disabled {
        opacity: 0.58;
        height: 35px;
    }

/*textarea {
    
}
    textarea:disabled {
        opacity: 0.58;
        background-color: #fbe5d6 !important;
    }*/

.td-subject {
    max-width: 140px;
}

    .td-subject div div {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }


.md-stepper-horizontal {
    display: table;
    width: 100%;
    margin: 0 auto;
    /*    background-color: #FFFFFF;*/
    box-shadow: 0 3px 8px -6px rgba(0,0,0,.50);
}

    .md-stepper-horizontal .md-step {
        display: table-cell;
        position: relative;
        padding: 24px;
    }


        .md-stepper-horizontal .md-step:active {
            border-radius: 15% / 75%;
        }

        .md-stepper-horizontal .md-step:first-child:active {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .md-stepper-horizontal .md-step:last-child:active {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }


        .md-stepper-horizontal .md-step:first-child .md-step-bar-left,
        .md-stepper-horizontal .md-step:last-child .md-step-bar-right {
            display: none;
        }

        .md-stepper-horizontal .md-step .md-step-circle {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            background-color: #999999;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
            font-weight: 600;
            color: #FFFFFF;
        }

    /*    .md-stepper-horizontal.green .md-step.active .md-step-circle {
        background-color: #00AE4D;
    }*/

    .md-stepper-horizontal.mint .md-step.active .md-step-circle {
        background-color: #1BC5BD;
    }

    .md-stepper-horizontal.mint .md-step.edit .md-step-circle {
        background-color: darkorange;
    }

    .md-stepper-horizontal.mint .md-step.none .md-step-circle {
        background-color: darkgray;
    }

    .md-stepper-horizontal .md-step.active .md-step-circle {
        background-color: rgb(33,150,243);
    }

    .md-stepper-horizontal .md-step.done .md-step-circle:before {
        font-family: 'FontAwesome';
        font-weight: 100;
        content: "\f00c";
    }

    .md-stepper-horizontal .md-step.done .md-step-circle *,
    .md-stepper-horizontal .md-step.editable .md-step-circle * {
        display: none;
    }

    .md-stepper-horizontal .md-step.editable .md-step-circle {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
    }

        .md-stepper-horizontal .md-step.editable .md-step-circle:before {
            font-family: 'FontAwesome';
            font-weight: 100;
            content: "\f040";
        }

    .md-stepper-horizontal .md-step .md-step-title {
        margin-top: 8px;
        font-size: 17px;
    }

    .md-stepper-horizontal .md-step .md-step-optional {
        font-weight: 600;
    }

    .md-stepper-horizontal .md-step .md-step-title,
    .md-stepper-horizontal .md-step .md-step-optional {
        text-align: center;
        color: #333;
    }

    .md-stepper-horizontal .md-step.active .md-step-optional {
        font-weight: 600;
    }

    .md-stepper-horizontal .md-step.active .md-step-title {
        color: rgba(0,0,0,.87);
    }

    .md-stepper-horizontal .md-step.active.done .md-step-title,
    .md-stepper-horizontal .md-step.active.edit .md-step-title {
        font-weight: 600;
    }

    .md-stepper-horizontal .md-step .md-step-optional {
        font-size: 13px;
    }

    .md-stepper-horizontal .md-step .md-step-bar-left,
    .md-stepper-horizontal .md-step .md-step-bar-right {
        position: absolute;
        top: 36px;
        height: 1px;
        border-top: 1px solid #DDDDDD;
    }

    .md-stepper-horizontal .md-step .md-step-bar-right {
        right: 0;
        left: 50%;
        margin-left: 20px;
    }

    .md-stepper-horizontal .md-step .md-step-bar-left {
        left: 0;
        right: 50%;
        margin-right: 20px;
    }

.kt-portlet .blue {
    background: rgb(144,171,220);
}

.vendor-link.active {
    color: #fff !important;
    background-color: #482c76 !important;
}

.table-striped-slip tbody tr:nth-of-type(odd) {
    background-color: #D9D9D9;
}

    .table-striped-slip tbody tr:nth-of-type(odd) tr:hover {
        color: #212529;
        background-color: #D4D5D6;
    }

.table-striped-slip tbody tr:nth-of-type(even) {
    background-color: #ffffff;
}

    .table-striped-slip tbody tr:nth-of-type(even) tr:hover {
        color: #212529;
        background-color: #fafbfc;
    }

.btn-vendor-slip {
    color: #ffffff !important;
    background-color: #1BC5BD !important;
    border-color: #1BC5BD !important;
}
    .btn-vendor-slip:hover {
        color: #ffffff !important;
        background-color: #0BB7AF !important;
        border-color: #0BB7AF !important;
    }

.text-slip-color {
    color: #646c9a !important;
}

.kt-header {
    background-color: white;
    border-bottom: 1px solid #eff0f6;
    height: 45px !important;
}

.kt-header__topbar {
    padding-right: 0px !important;
}

.kt-header__topbar-user {
    padding: 0px !important;
}

.symbol {
    display: inline-block !important;
    flex-shrink: 0 !important;
    position: relative !important;
    border-radius: 0.42rem !important;
}

    .symbol.symbol-light-success .symbol-label {
        /*background-color: #EEE5FF !important;*/
        color: #8950FC !important;
    }

    .symbol.symbol-lg-30 .symbol-label {
        width: 30px !important;
        height: 30px !important;
    }

    .symbol .symbol-label {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        /*font-weight: 500 !important;*/
        line-height: 0 !important;
        color: #3F4254 !important;
        /*background-color: #F3F6F9 !important;*/
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
        border-radius: 0.42rem !important;
    }

.btn.btn-clean {
    border-color: transparent !important;
    background: transparent !important;
    color: #333 !important;
}

    .btn.btn-clean:hover {
        background-color: #EEE5FF !important;
        color: #333 !important;
    }

.btn-h {
    padding: 0.5rem 1rem !important;
}

    .btn-h:hover {
        padding: 0.5rem 1rem !important;
    }

.btn.btn-clean:hover:not(.btn-text):not(:disabled):not(.disabled).dropdown-toggle:after {
    color: #8950FC;
}

.kt-aside--minimize .kt-aside {
    width: 60px !important;
}

.i-con-hover:hover {
    color: #0BB7AF !important;
}
.btn-success2 {
    background-color: #498205 !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-success2:hover {
    background-color: #427406 !important;
    border-color: transparent !important;
}
.btn-export {
    background-color: #3CB371 !important;
    border-color: transparent !important;
    color: #fff !important;
}

    .btn-export:hover {
        background-color: #009966 !important;
        border-color: transparent !important;
    }

.placeset::-webkit-input-placeholder { /* Edge */
    font-weight: 800 !important;
}

.placeset:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight: 800 !important;
}

.placeset::placeholder {
    font-weight: 800 !important;
}

.fontnotosemi {
    font-family: 'Noto Sans Semibold' !important;
    src: url('fonts/NotoSans/notosans-semibold-webfont.woff2') format('woff2'), url('fonts/NotoSans/notosans-semibold-webfont.woff') format('woff') !important;
    font-weight: normal !important;
    font-style: normal !important;
}

.fontsarabun {
    font-family: 'Noto Sans Semibold', 'Sarabun', 'Material Icons', sans-serif !important;
}

.textbox-task {
    height: 80%;
}

.color-clear:hover {
    color: #0BB7AF !important;
}

.balance-input-date div > input {
    height: 34px !important;
}

.balance-input-date div > span {
    border-color: #01704f !important;
    border: 1px !important;
}

.balance-input-date:disabled div > input {
    opacity: 0.58 !important;
    height: 34px !important;
}

.nav-style-Document-lang > div {
    background-color: lightgray !important;
}

    .nav-style-Document-lang > div > div {
        background-color: lightgray !important;
        border: 0px !important;
    }

        .nav-style-Document-lang > div > div > nav {
            margin: 0px !important;
            padding: 5px;
            padding-bottom: 0px !important;
        }

            .nav-style-Document-lang > div > div > nav > a {
                background-color: white !important;
            }

        .nav-style-Document-lang > div > div > div {
            background-color: white !important;
            margin: 5px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            padding-top: 0px !important;
        }

.selected {
    background-color: transparent;
    color: #000000;
}

.nonborderleftright {
    text-align: right !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn.btn-Fast {
    color: #02cc5a !important; /*Green*/
    background-color: white !important;
    border-color: #02cc5a !important;
    border-width: 2px !important;
}

    .btn.btn-Fast:hover {
        /*color: #000000 !important;
        border-color: #000000 !important;
*/
        color: white !important;
        background-color: #02cc5a !important;
        -webkit-box-shadow: 0 0 0 2px #A20000 !important;
        box-shadow: 0 0 0 2px #02cc5a !important;
        transition: all 200ms ease-out !important;
    }

    .btn.btn-Fast:focus {
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

.btn-warning {
    background-color: #ffb822 !important;
    border-color: #ffb822 !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    color: #fff !important;
    background-color: #fc0758 !important;
    border-color: #fc0758 !important;
}

.btn.btn-info {
    color: #ffffff !important;
    background-color: #8950FC !important;
    border-color: #8950FC !important;
}

.btn-info:hover {
    color: #fff !important;
    background-color: #702afb !important;
    border-color: #671efb !important;
}

.margin-side-5 {
    margin: 0px 2px 0px 2px;
}

.btn.btn-primary2 {
    color: #fff !important;
    background-color: #3699ff !important;
    border-color: #3699ff !important;
}

.btn-primary2:hover {
    color: #fff !important;
    background-color: #1086ff !important;
    border-color: #037fff !important;
}

.datetimepicker {
    width: 100% !important;
    padding: 10px;
    left: auto;
}

.pleasedontinvalid {
    border: unset !important;
    border-color: unset !important;
}

.newsearchimg {
    left: 0px !important;
    top: 0px !important;
    background-color: unset !important;
    width: 90%;
    height: 95% !important;
}
/*import custom.css*/
.More-f {
    font-size: inherit !important;
    color: cornflowerblue !important;
    background-color: unset;
    border: unset;
    padding-left: unset;
    padding-right: unset;
    padding-top: 10px;
}

.color-morf:hover {
    color: #0BB7AF !important;
}

.color-morf {
    color: #54d6af !important;
}

.show > .btn.btn-default, .btn.btn-default.active, .btn.btn-default:active, .btn.btn-default:hover {
    color: #ffffff !important;
    background: #5d78ff !important;
    border-color: #5d78ff !important;
}

.line-thead-vendor {
    border-bottom: solid 2px #429085;
    color: #429085;
}
/*dark.css*/
.kt-aside-menu .kt-menu__nav > .kt-menu__item.kt-menu__item--open > .kt-menu__link {
    background-color: #1b1b28;
}

.kt-aside-menu {
    background-color: #1e1e2d;
}

    .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading,
    .kt-aside-menu .kt-menu__nav > .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link {
        background-color: #1b1b28;
    }

    .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading,
    .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link {
        background-color: #1b1b28;
    }

        .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__heading .kt-menu__link-icon,
        .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item:not(.kt-menu__item--parent):not(.kt-menu__item--open):not(.kt-menu__item--here):not(.kt-menu__item--active):hover > .kt-menu__link .kt-menu__link-icon {
            color: #5d78ff;
        }

    .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__heading .kt-menu__link-icon,
    .kt-aside-menu .kt-menu__nav > .kt-menu__item .kt-menu__submenu .kt-menu__item > .kt-menu__link .kt-menu__link-icon {
        color: #494b74;
    }

    .kt-aside-menu .kt-menu__nav > .kt-menu__item > .kt-menu__link .kt-menu__link-icon svg {
        inline-size: auto;
    }

fs-datetime-picker > div > span > button {
    margin-top: 0px !important;
}

.datetimepicker {
    margin-top: 0px !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    -webkit-box-shadow: unset !important;
    border: 0.5px solid #01704f !important;
}

.form-control:disabled {
    opacity: 0.58;
}

.noHover {
    cursor: not-allowed !important;
}

.flaticon2-cross {
    font-size: 8px !important;
}

.flaticon-search-1 {
}

    .flaticon-search-1.vendorfinding {
        padding:unset;
    }

.crossnsearch {
}

    .crossnsearch.flaticon2-cross {
        margin-right: 20%;
    }

.crossnsearchsmall.flaticon2-cross {
    margin-right: 5%;
}

.crossnsearch.flaticon-search-1 {
}

.kt-input-icon__icon--right {
    margin-right: 1%;
}

    .kt-input-icon__icon--right.tinyautocomplete {
        width: 20% !important;
    }


.btn i {
    padding-right: 0rem;
}

#blockredAlert {
    color: red;
}

    #blockredAlert > div {
        display: inline;
        color: red;
    }

#inlineblockoverflow {
}

    #inlineblockoverflow > div {
        display: inline;
    }

    #inlineblockoverflow > span {
        display: inline-block;
    }

    #inlineblockoverflow > font > div {
        display: inline;
    }

    #inlineblockoverflow > font > span {
        display: inline-block;
    }

    #inlineblockoverflow > i {
        display: contents;
    }

    #inlineblockoverflow > button > div {
        display: inline-block;
    }

input:disabled::-webkit-input-placeholder { /* WebKit browsers */
    color: transparent;
}

input:disabled:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: transparent;
}

input:disabled::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: transparent;
}

input:disabled:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: transparent;
}

input[disabled], textarea[disabled], select[disabled] {
    /*font-weight: bold !important;
    color: #000000 !important;*/
    opacity: 1 !important;
    background-color: #e9e9e9 !important;
}
/*new date time*/
.bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover {
    background: unset !important;
    color: #EFEFEF !important;
    /*cursor: not-allowed !important;*/
}
/*.bootstrap-datetimepicker-widget table td{
    background-color:red!important;
}
.bootstrap-datetimepicker-widget table td:hover {
    background-color: green !important;
}*/
.datepicker tbody tr > td.day.today {
    position: relative;
    /*background: orange !important;*/
    border: 2px solid orange;
    color: orange !important;
    background-color: white !important;
}

.datepicker tbody tr > td.day.selected, .datepicker tbody tr > td.day.selected:hover, .datepicker tbody tr > td.day.active, .datepicker tbody tr > td.day.active:hover {
    background: orange !important;
    color: #ffffff !important;
    border: unset;
}

/*end date*/
.btn [class^="fa-"].newbtniconiii, .btn [class*=" fa-"].newbtniconiii {
    font-size: 1.7rem
}

.newbtnicon {
    font-size: 20px !important;
    width: 40px;
    height: 40px;
    /*padding: 0.4rem 0rem;*/
    padding: 0.2rem 0rem !important;
}
/*user*/
.symbol.symbol-lg-30.symbol-light-success {
    margin-right: 6.5px !important;
    margin-bottom: -3px !important;
}

.svg-inline--fa.fa-user.fa-w-14.symbol-label {
    padding-right: 1px;
    width: 15px !important;
    height: unset !important;
}

/*import kendo*/
.k-autocomplete, .k-block, .k-calendar-container, .k-colorpicker, .k-combobox, .k-datepicker, .k-datetimepicker, .k-drag-clue, .k-dropdown, .k-dropdown-wrap, .k-editor-inline, .k-gantt-views > .k-current-view, .k-grid .k-filter-options, .k-grouping-header .k-group-indicator, .k-inline-block, .k-list-container, .k-multiselect, .k-numeric-wrap, .k-numerictextbox, .k-picker-wrap, .k-slider-selection, .k-slider-track, .k-split-button .k-gantt-views, .k-textbox, .k-tile, .k-timepicker, .k-tooltip, .k-touch-scrollbar, .k-treeview .k-in, .k-upload, .k-window, .k-window-action, .k-window-titleless .k-window-content {
    border-radius: 4px;
}

.k-dateinput.k-state-disabled > .k-textbox:hover, .k-maskedtextbox.k-state-disabled > .k-textbox:hover, .k-multiselect-wrap, input.k-textbox, textarea.k-textbox {
    border-color: #c5c5c5;
}

.k-textbox {
    outline: 0;
}

.k-datepicker, .k-datetimepicker, .k-textbox, .k-timepicker {
    display: inline-block;
    vertical-align: middle;
}

.k-autocomplete, .k-dropdown-wrap, .k-multiselect-wrap, .k-numeric-wrap, .k-picker-wrap, .k-textbox {
    border-width: 1px;
    border-style: solid;
}

.k-autocomplete, .k-block, .k-edit-cell .k-widget, .k-grid-edit-row .k-widget, .k-grid-edit-row .text-box, .k-tabstrip > .k-content > .km-scroll-container, .k-textbox, .km-actionsheet > li, .km-shim, div.k-window-content {
    box-sizing: border-box;
}

    .k-autocomplete.k-state-focused, .k-dropdown-wrap.k-state-focused, .k-numeric-wrap.k-state-focused, .k-picker-wrap.k-state-focused, .k-textbox:focus {
        box-shadow: 0 0 3px 0 rgb(0 0 0 / 30%);
    }

k-i-trash {
    color: red;
}

.fa.fa-trash-alt.icon-summary {
    color: red;
}

input.k-textbox {
    line-height: 1.65em;
    text-indent: .571em;
}

.input-group-append .btn-outline-secondary {
    padding: 5px;
}

    .input-group-append .btn-outline-secondary .fa-calendar {
        font-size: 13px;
    }

.msg-warn{
    color:red !important;
}

.selected-highlight {
    background-color: #f1f2f7 !important;
}

@media (max-width: 1060px) {
    .overflow-table {
        overflow-x: auto;
    }
}

.center-radio-foreign{
    margin-top: -5px;
}

.hidden-text {
    display: none;
    background-color: #282a3c;
    color: #fff;
    text-align: left;
    border-radius: 3px;
    padding: 5px 10px;
    position: absolute;
    bottom: 125%;
    height: auto;
    width: auto;
    z-index: 1;
}

    .hidden-text::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #282a3c transparent transparent transparent;
    }

.trigger-container {
    position: relative;
    display: inline-block;
}

.trigger {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.trigger-container:hover .hidden-text {
    display: block;
}
