table.dataTable thead .sorting_disabled, table.dataTable thead>tr>th.sorting_asc { background: transparent; }

table.dataTable td.dataTables_empty { text-align: left; }

table.dataTable th.dt-sindex, table.dataTable td.dt-sindex { min-width: 20px; width: 20px !important; }
table.dataTable th.dt-index, table.dataTable td.dt-index { min-width: 40px; width: 40px !important; }
table.dataTable th.dt-code, table.dataTable td.dt-code { min-width: 100px; max-width: 150px; word-wrap: break-word; }
table.dataTable th.dt-text, table.dataTable td.dt-text { min-width: 150px; }
table.dataTable th.dt-number, table.dataTable td.dt-number { min-width: 60px; }
table.dataTable th.dt-decimal, table.dataTable td.dt-decimal { min-width: 80px; }
table.dataTable th.dt-date, table.dataTable td.dt-date { min-width: 100px; width: 100px !important; }
table.dataTable th.dt-datetime, table.dataTable td.dt-datetime { min-width: 100px; width: 100px !important; }
table.dataTable th.dt-time, table.dataTable td.dt-time { min-width: 80px; max-width: 80px; }
table.dataTable th.dt-status, table.dataTable td.dt-status { min-width: 50px; width: 50px !important; }
table.dataTable th.dt-description, table.dataTable td.dt-description { min-width: 260px; }
table.dataTable th.dt-image, table.dataTable td.dt-image { min-width: 300px; }
table.dataTable th.dt-button, table.dataTable td.dt-button { min-width: 40px; width: 40px; }
table.dataTable th.dt-button1, table.dataTable td.dt-button1 { min-width: 10px; width: 10px; }
table.dataTable th.dt-button3, table.dataTable td.dt-button3 { min-width: 70px; width: 70px; }
table.dataTable th.dt-period, table.dataTable td.dt-period { min-width: 150px; width: 150px !important; }

table.dataTable th.dt-textbox1, table.dataTable td.dt-textbox1 { min-width: 200px; width: 200px; }
table.dataTable th.dt-textbox2, table.dataTable td.dt-textbox2 { min-width: 400px; width: 400px; }
table.dataTable th.dt-textbox3, table.dataTable td.dt-textbox3 { min-width: 600px; width: 600px; }
table.dataTable th.dt-textbox4, table.dataTable td.dt-textbox4 { min-width: 800px; width: 800px; }

table.dataTable th.dt-left, table.dataTable td.dt-left { text-align: left; }
table.dataTable th.dt-center, table.dataTable td.dt-center { text-align: center; }
table.dataTable th.dt-right, table.dataTable td.dt-right { text-align: right; }
table.dataTable th.dt-justify, table.dataTable td.dt-justify { text-align: justify; }
table.dataTable th.dt-nowrap, table.dataTable td.dt-nowrap { white-space: nowrap; }

table.dataTable thead th.dt-head-left, table.dataTable thead td.dt-head-left { text-align: left; }
table.dataTable thead th.dt-head-center, table.dataTable thead td.dt-head-center { text-align: center; }
table.dataTable thead th.dt-head-right, table.dataTable thead td.dt-head-right { text-align: right; }
table.dataTable thead th.dt-head-justify, table.dataTable thead td.dt-head-justify { text-align: justify; }
table.dataTable thead th.dt-head-nowrap, table.dataTable thead td.dt-head-nowrap { white-space: nowrap; }

table.dataTable tbody th.dt-body-left, table.dataTable tbody td.dt-body-left { text-align: left; }
table.dataTable tbody th.dt-body-center, table.dataTable tbody td.dt-body-center { text-align: center; }
table.dataTable tbody th.dt-body-right, table.dataTable tbody td.dt-body-right { text-align: right; }
table.dataTable tbody th.dt-body-justify, table.dataTable tbody td.dt-body-justify { text-align: justify; }
table.dataTable tbody th.dt-body-nowrap, table.dataTable tbody td.dt-body-nowrap { white-space: nowrap; }

table.dataTable tfoot th.dt-foot-left, table.dataTable tfoot td.dt-foot-left { text-align: left; }
table.dataTable tfoot th.dt-foot-center, table.dataTable tfoot td.dt-foot-center { text-align: center; }
table.dataTable tfoot th.dt-foot-right, table.dataTable tfoot td.dt-foot-right { text-align: right; }
table.dataTable tfoot th.dt-foot-justify, table.dataTable tfoot td.dt-foot-justify { text-align: justify; }
table.dataTable tfoot th.dt-foot-nowrap, table.dataTable tfoot td.dt-foot-nowrap { white-space: nowrap; }

table.dataTable tbody th span.badge, table.dataTable tbody td span.badge { font-weight: 400; font-size: 12px; }
table.dataTable tbody th .checkbox label::before, table.dataTable tbody td .checkbox label::before { margin-top: -7px; }
table.dataTable tbody th .checkbox label::after, table.dataTable tbody td .checkbox label::after { padding-left: 1px; margin-top: -7px; }

table th .checkbox, table td .checkbox { padding-left: 10px; }
table th .checkbox { margin-top: -6px; }

.nav-tabs .nav-link.disabled { color: #A7B1C2; cursor: default; }

.form-image { position:relative; max-width: 145px; }
.form-control-image { cursor: pointer; max-width: 145px; }
.form-control.form-control-datepicker[readonly] { background-color: #FFFFFF; }
.datepicker .clear { display: table-cell; }

.select2-container.select2-container--default.select2-container--open { z-index: 2201 !important; }
.select2-container .select2-selection--single { border-radius: 1px; height: 38px; padding: 4px; font-size: 0.9rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-container--default .select2-selection--multiple { border-radius: 1px; min-height: 38px; padding: 2px 4px 0px; font-size: 0.9rem; }
.select2-container--default .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: #888 transparent transparent transparent;
    border-style: solid;
    border-width: 6px 4px 0 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;
    cursor: pointer
}
.select2-container--open .select2-selection--multiple:before {
    content: ' ';
    display: block;
    position: absolute;
    border-color: transparent transparent #888 transparent;
    border-width: 0 4px 6px 4px;
    height: 0;
    right: 6px;
    margin-left: -4px;
    margin-top: -2px;top: 50%;
    width: 0;
    cursor: pointer
}

.col-form-btn { padding-top: 2px; }
.searching > button { margin-left: 4px; }

table.dataTable tbody td ul.image, ul.image { list-style: none; margin: 0; padding: 0; }
table.dataTable tbody td ul.image>li, ul.image>li { margin: 0 4px 2px; float: left; min-height: 50px; cursor: pointer; }
table.dataTable tbody td ul.image>li:first-child, ul.image>li:first-child { margin-left: 0; }
table.dataTable tbody td ul.image>li:last-child, ul.image>li:last-child { margin-right: 0; }
table.dataTable tbody td ul.image>li>img, ul.image>li>img { max-height: 50px; max-width: 50px; }

#modal-document, #modal-document2 { padding-right: 0 !important; }
#modal-document .modal-dialog .modal-content .modal-body, #modal-document2 .modal-dialog .modal-content .modal-body { padding: 15px; }
#modal-document .modal-dialog .modal-content .modal-body { height: calc(100vh - 190px); }
#modal-document .modal-dialog .modal-content .modal-body .tabs-container .tab-content .tab-pane .panel-body { height: calc(100vh - 265px); overflow: hidden; overflow-y: auto; }
.modal-footer { padding-left: 30px; padding-right: 30px; }
#modal-document2 .modal-footer { padding-left: 15px; padding-right: 15px; }
.dataTables_wrapper { padding: 0 !important; padding-bottom: 0 !important; }

.dropzone-clickable { text-align: center; }
.dropzone-clickable i { font-size: 98px; opacity: 0.1; cursor: pointer; }
.dropzone .dz-preview { margin: 10px; }
.dropzone .dz-preview:hover .dz-image img {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-filter: none;
    filter: none;
}
.dropzone .dz-preview .dz-details { display: none; }
.loader { margin: auto; font-size: 7px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.filterRang { width: 48%; }
.filterStartDate { padding-left: 15px; }
.labelBar { width: 4%; text-align:center; }
.filterEndDate { padding-right: 15px; }

div.rowTitle { border-bottom: 1px solid #e7eaec; margin-left: -20px; margin-right: -20px; }
div.rowTitle > div { padding: 0 90px 8px 20px; }
div.rowTitle > div > h5 { font-size: 14px; margin: 0 0 7px; padding: 0; text-overflow: ellipsis; float: none; }

label[name=ModifiedBy], label[name=Modified] { padding-left: 0; }

.hidden { display: none; }

#modal-image .modal-dialog .modal-content { background: none; box-shadow: none; }
#modal-image .modal-dialog .modal-content .modal-body { overflow: unset; padding: 0px; }
#modal-image .modal-dialog .modal-content .modal-body button { position: absolute; right: -22px; top: -2px; }
#modal-image .modal-dialog .modal-content .modal-body button span span { position: absolute; margin-top: -1px; font-size: 22px; }
#modal-image .modal-dialog .modal-content .modal-body button span span.left { margin-left: -7px; }
#modal-image .modal-dialog .modal-content .modal-body img { max-width: 100%; max-height: calc(100vh - 60px); margin: auto; display: block; }

input[type="password"] { padding-right: 30px; }
.toggle-password { float: right; margin-top: -25px; position: relative; right: 10px; cursor: pointer; }

.tooltip-info { border: none; background: inherit; }
.tooltip-info i { margin-top: 5px; color: #007bff; cursor: pointer; }
.tooltip-info div.tooltip-text { visibility: hidden; opacity: 0.7; min-width: 300px; text-align: left; background-color: black; color: #fff; border-radius: 6px; padding: 6px 12px 10px; position: absolute; z-index: 1; top: 110%; right: 0; }
.tooltip-info div.tooltip-text div { top: -10px; right: 13px; position: absolute;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid black; }
.tooltip-info div.tooltip-text p { margin: 0.25rem 0; }
.tooltip-info div.tooltip-text ul { margin: 0; padding: 0; list-style: none; }
.tooltip-info div.tooltip-text ul li { margin-top: 0.25rem; }
.tooltip-info:hover div.tooltip-text { visibility: visible; }

#btn-top { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 9; border: 1px solid #fff; background-color: rgba(0,0,0,.25); color: #fff; cursor: pointer; padding: 6px 10px; border-radius: 5px; }
#btn-top:hover { background-color: rgba(0,0,0,.5); }

.wrapper-content { padding: 20px 0 40px; }

@media (min-width: 768px) {
    .modal-xl { width: 80%; max-width: 1200px; }
}
@media (min-width: 576px)  {
    #modal-image .modal-dialog.large { max-width: 900px; }
}

/* _LayoutLogin.cshtml */
._LaoutLogin .middle-box h1 { font-size: 100px !important; color: #F00; }
._LaoutLogin .loginscreen.middle-box { width: 400px !important; }
._LaoutLogin .logo-name img { height: 100px; }
._LaoutLogin .project-name { color: #F00; font-size: 20px !important; }
._LaoutLogin .change-langauge { position: absolute; top: 8px; right: 15px; }
._LaoutLogin .btn-langauge { color: inherit; }
._LaoutLogin .btn-langauge.active { color: #007bff; cursor: default; }
._LaoutLogin div.alert.alert-danger>div.danger { margin-top: 5px; }
._LaoutLogin div.alert.alert-danger>div.danger>ul>li { text-align: left; }
._LaoutLogin input[type="password"] { padding-right: 30px; }
._LaoutLogin .SetPassword span[toggle="#Password"]{ right: 45px; z-index: 5; }
._LaoutLogin .Activate button { width: 90px; }
._LaoutLogin .Activate input[name="License"] { background-color: #fff; }

/* _LayoutPrivacyPolicy.cshtml */
._LayoutPrivacyPolicy #page-wrapper { width: 100%; }
._LayoutPrivacyPolicy .policy-button { display: flex; justify-content: center; }

._LayoutForgotPassword .middle-box h1 { font-size: 100px !important; color: #F00; }
._LayoutForgotPassword .forgotpassword.middle-box { width: 400px !important; }
._LayoutForgotPassword .logo-name img { height: 100px; }
._LayoutForgotPassword .project-name { color: #F00; font-size: 20px !important; }
._LayoutForgotPassword .change-langauge { position: absolute; top: 8px; right: 15px; }
._LayoutForgotPassword .btn-langauge { color: inherit; }
._LayoutForgotPassword .btn-langauge.active { color: #007bff; cursor: default; }
._LayoutForgotPassword div.alert.alert-danger>div.danger { margin-top: 5px; }
._LayoutForgotPassword div.alert.alert-danger>div.danger>ul>li { text-align: left; }
._LayoutForgotPassword #response-success { font-size: 14px; }
._LayoutForgotPassword #response-success strong { font-size: 16px; }
.remove-image-icon { position: absolute; top: 0px; right: 0px; color: red; z-index: 999; cursor: pointer; }
.cursor-pointer { cursor: pointer; }
.image-max-width { width: 100%; }
.capacity-progress .progress { height: 8px !important; margin-top: 5px; }
.capacity-progress .progress .green { background-color: #1ab394; }
.icon-green { color: #1ab394; }
.badge-green { background-color: #1ab394; color: #ffffff; }
.badge-block { width: 100%; }
.message-alert { color: #ff0000; }

@font-face {
    font-family: 'kanit-regular';
    src: url('../../fonts/kanit-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'kanit-regular';
    src: url('../../fonts/kanit-light.ttf') format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'kanit-regular';
    src: url('../../fonts/kanit-medium.ttf') format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'kanit-regular';
    src: url('../../fonts/kanit-medium.ttf') format('truetype');
    font-weight: 600;
}
@font-face {
    font-family: 'kanit-regular';
    src: url('../../fonts/kanit-medium.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'kanit-regular';
    src: url('../../fonts/Kanit-SemiBold.ttf') format('truetype');
    font-weight: 800;
}
@font-face {
    font-family: 'kanit-regular';
    src: url('../../fonts/Kanit-Bold.ttf') format('truetype');
    font-weight: 900;
}

body {
    font-family: 'kanit-regular';
}

/* Button Chnage langauge */
.btn-langauge:not(.active) {
    font-weight: 300;
}

/* Date Picker */
.datepicker.dropdown-menu {
    font-family: 'kanit-regular';
}

.copy-right {
    font-weight: 800;
}