body {
    color: black;
    font-family: 'Kanit' !important;
    font-size: 16px !important;
    font-weight: normal !important;
    background: url('/img/softprompt_file/image/body-bg.jpg') no-repeat;
    background-size: cover;
    color: #003E8D;
}

input.form-control.error,
textarea.form-control.error,
select.form-control.error {
    color: red !important;
    border-bottom: 2px solid red !important;
    /* background-color: cornsilk!important; */
}

.datepicker.datepicker-dropdown.dropdown-menu.datepicker-orient-left.datepicker-orient-bottom {
    padding: 0;
    border-radius: 22px;
}

label.label-text-alert {
    font-size: 36px !important;
    font-weight: bold !important;
    color: #003E8D !important;
}

label.label-text-alert-success {
    font-size: 36px !important;
    font-weight: bold !important;
    color: black !important;
}

.pull-right {
    float: right !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    margin-right: -10px;
}

.pull-left {
    float: left !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

label.error {
    color: red;
    font-size: 0.8em;
}

.modal .modal-xl {
    min-width: 50%;
}

.modal .modal-full {
    min-width: 80%;
}

.border-dddfe2 {
    border-color: #dddfe2;
}

.border-red {
    border-color: rgb(255, 0, 0) !important;
}

.bg-red {
    background: rgb(255, 0, 0) !important;
}

.bg-blue {
    background: #003E8D !important;
}


.bg-white {
    background: white;
}

.bg-yellow {
    background: rgb(255, 255, 0) !important;
}

.bg-thead-table {
    background: linear-gradient(269.69deg, #003E8D -1.77%, #02295B 80.31%);
}

.bg-tfooter-table {
    background: linear-gradient(-269.69deg, #003E8D -1.77%, #02295B 80.31%) !important;
}

.bg-default {
    background: #003E8D;
}

.text-color-default {
    color: #003E8D;
    font-size: 16px !important;
    font-weight: 300 !important;
}

.font-weight-normal {
    font-size: 16px;
}

.text-red {
    color: rgb(255, 0, 0) !important;
}

.text-black {
    color: rgb(0, 0, 0) !important;
}

.text-head-fix-color {
    color: #003E8D;
    font-family: "Kanit";
    font-size: 20px !important;
}

.text-head-color {
    color: #003E8D;
    font-family: "Kanit";
    font-size: 18px !important;
}

.text-sub_head-fix-color {
    color: #003E8D;
    font-family: "Kanit";
    font-size: 17px !important;
    font-weight: 300;
}

.sidenav-icon {
    color: #fff !important;
}

/* .btn.disabled, .btn:disabled {
    background: transparent !important;
} */

i.fa-color-set {
    color: #003E8D !important;
}

.fa-chart-line, .fa-sign-out-alt, .fa-database, .fa-users, .fa-cubes, .fa-key, .fa-history {
    color: white !important;
}

.sidenav-toggle::after {
    color: rgb(255, 0, 0);
}

.col-form-label, .col-form-legend {
    margin-bottom: calc(.438rem - 7px);
    font-size: 1.25rem !important;
    font-weight: inherit;
    color: #003E8D;
}

.dropdown-toggle::after {
    color: #003E8D;
    /*font-size: x-large;*/
    margin-left: .3em;
    float: right;
    margin-top: 8px;
    margin-right: 5px;
}

.datepicker-dropdown {
    padding: 0;
    border-radius: 20px !important;
}

.dtpicker-buttonCont .dtpicker-button {
    background: #003E8D !important;
    color: white !important;
}

.dtpicker-header .dtpicker-value {
    color: #003E8D !important;
    font-size: 16px !important;
}

button.dropdown-toggle {
    border: none !important;
    border-radius: 0px;
    border-bottom: 2px solid #003E8D !important;
    padding-right: 0px;
    padding-left: 0px;
    background: transparent !important;
}

.btn:focus, .btn.focus {
    outline: none;
    box-shadow: unset !important;
}

div.dataTables_wrapper {
    padding: 0 10px;
}

div.dataTables_wrapper div.dataTables_paginate, .dataTables_info, div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-start;
    font-family: kanit;
    font-weight: 300;
    font-size: 14px;
}

button.btn-status-toggle {
    border: none !important;
    border-radius: 10px;
    padding-right: 0px;
    padding-left: 0px;
    width: 100px;
    background: #003E8D !important;
    font-family: "kanit";
    font-size: 16px !important;
    font-weight: 400 !important;
}

small {
    color: #A6AFBD;
    font-size: 12px;
}

.badge-primary {
    background-color: #9C1616;
    color: #fff;
}

button.btn-status-toggle::after {
    color: white;
    margin-right: 10px;
}

input.form-control {
    border: none !important;
    border-radius: 0px;
    border-bottom: 2px solid #003E8D !important;
    padding-bottom: 0px !important;
    padding-left: 0px;
    font-family: "Kanit";
    font-size: 16px !important;
    font-weight: 300 !important;
    color: #003E8D !important;
    background: transparent !important;
}

label.form-control {
    border: none !important;
    border-radius: 0px;
    border-bottom: 2px solid #003E8D !important;
    padding-bottom: 0px !important;
    padding-left: 0px;
    font-family: "Kanit";
    font-size: 14px !important;
    font-weight: 300 !important;
    color: #003E8D !important;
    background: transparent !important;
}

label {
    display: inline-block !important;
    margin-bottom: .5rem !important;
    font-family: kanit !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    color: #003E8D;
}

input[type="date"] {
    /*margin-top: 10px !important;*/
    border: none !important;
    border-radius: 0px;
    border-bottom: 2px solid #003E8D !important;
    padding-bottom: 0px !important;
    padding-left: 0px;
    font-family: "Kanit";
    font-size: 14px;
    font-weight: 300 !important;
    color: #003E8D !important;
    background: transparent !important;
}

.fc button, .fc table, body .fc {
    font-size: 16px;
    color: #003E8D;
}

.autocomplete-suggestions {
    color: #003E8D;
    font-size: 16px !Important;
}

div.form-label {
    margin-bottom: calc(.438rem - 2px);
    font-weight: 500;
    font-size: 16px;
}

div.form-control {
    border: none !important;
    border-radius: 0px;
    border-bottom: 2px solid #003E8D !important;
    padding-bottom: 0px !important;
    padding-left: 0px;
    font-family: "Kanit";
    font-size: 16px;
    font-weight: 300 !important;
    color: #003E8D !important;
    background: transparent !important;
}

select.form-control {
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #003E8D ;
    padding-bottom: 0px ;
    padding-left: 0px ;
    font-family: "Kanit";
    font-size: 16px ;
    font-weight: 300 ;
    color: #003E8D ;
    background: transparent ;
}

.material-style .select2-container--default .select2-results__option[aria-selected=true],
.material-style .select2-container--default .select2-search--dropdown .select2-search__field,
.material-style .select2-container--default .select2-results__option {
    /* background-color: transparent !important;*/
    font-size: 16px;
    /*color: #003E8D;*/
}

.material-style .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgb(0 111 250 / 6%);
}

.material-style .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #003E8D;
    background-color: transparent;
}

.material-style .select2-container--default .select2-selection--multiple {
    min-height: unset;
    height: unset !important;
    border-bottom: 2px solid;
}

span.select2-selection.select2-selection--single, span.select2-selection.select2-selection--multiple {
    border: none ;
    border-radius: 0px;
    border-bottom: 2px solid #003E8D ;
    padding-bottom: 0px ;
    padding-left: 0px;
    font-family: "Kanit";
    font-size: 16px;
    font-weight: 300 ;
    color: #003E8D ;
    background: transparent ;
}

.material-style .is-invalid .select2-container--default .select2-selection, .material-style .is-invalid.select2-container--default .select2-selection {
    border-color: #d9534f !important;
}

input.form-control.upload_file {
    padding-bottom: 45px !important;
}

input.form-control.upload_file2 {
    padding-bottom: 30px !important; 16
    line-height: 20;
    line-height: 20px;
}

.input-group-append {
    margin-left: -20px;
    z-index: 100;
}

.modal-body.form-label {
    /*font-weight: bold;*/
    font-family: "kanit";
    font-weight: 800 !important;
    font-size: 16px !important;
}

.modal-body .row, .modal-body .form-row {
    font-weight: 300;
    font-size: 16px;
    color: #003E8D !important;
}

.modal-title {
    font-family: "kanit";
    font-weight: 500 !important;
    color: #003E8D;
    font-size: 18px;
}

.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):hover, .pagination li.active > a:not(.page-link):focus {
    border-color: #003E8D !important;
    background-color: #003E8D !important;
    color: #fff !important;
}

.btn-outline-red {
    border-color: rgb(255, 0, 0) !important;
    background: transparent;
    color: rgb(255, 0, 0) !important;
}

.btn-outline-secondary {
    border-color: #8897AA;
    background: transparent;
    color: #003E8D;
}

.btn-outline-secondary:hover {
    color: white !important;
}

.btn-outline-success {
    padding-right: 5px !important;
}

.btn-outline-red:hover {
    border-color: transparent;
    background: rgb(255, 0, 0) !important;
    color: rgb(255, 255, 255) !important;
}

.icon-pdf, .icon-excel {
    cursor: pointer;
}

.dropdown-item {
    font-size: 1rem;
}

a.dropdown-item {
    cursor: pointer;
}

.dropdown-item:not(.disabled).active, .dropdown-item:not(.disabled):active {
    background-color: #003E8D !important;
    color: white !important;
    outline: none !important;
}

.material-style .sidenav .app-brand.demo {
    height: 80px;
}

.material-style .sidenav .app-brand.demo img {
    width: 180px !important;
    margin: 20px;
    margin-top: 40px;
}

table, table.dataTable {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
    border-collapse: collapse;
    width: 99.9% !important;
    box-shadow: 0px 1px 7px -4px;
}

.thead-center {
    text-align: center;
}

.vertical-middle {
    vertical-align: middle !important;
}

.value-td-middle {
    text-align: center !important;
    vertical-align: middle !important;
}

.hr-right {
    border-right: 1px solid;
    padding: 2px;
    padding-right: 10;
    margin-top: 0px;
    margin-right: 10;
    color: #dddfe2;
}

.fc table {
    box-shadow: none !important;
    border-radius: 0px !important;
}

.card {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.card-header {
    font-size: 16px;
}

/*.table-striped tbody tr:nth-of-type(odd) {
    background-color: #F5F6FA;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #E8E9F3;
}*/

table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting {
    padding-right: 22px !important;
}

table.table {
    background-color: white;
}

table.table thead {
    background: linear-gradient(269.69deg,#003e8d -1.77%,#02295b 80.31%);
    color: white;
}

table.table thead th {
    font-family: "Kanit";
    font-size: 16px;
    font-weight: 300;
}

table.table tfoot th {
    font-family: "Kanit" !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

table.table tbody td, table.table tbody th {
    font-family: "Kanit" !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    /*color: #003E8D;*/
}

table.dataTable tbody td.sales_number {
    font-weight: 400 !important;
}

div.dataTables_wrapper div.dataTables_paginate, div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-start;
}

.material-style:not([dir=rtl]) div.card-datatable table.dataTable thead th:first-child, .material-style:not([dir=rtl]) div.card-datatable table.dataTable tbody td:first-child, .material-style:not([dir=rtl]) div.card-datatable table.dataTable tfoot th:first-child {
    padding-left: .625rem !important;
}

.form-order {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

button.btn-save {
    background: #8DC24B !important;
    width: 100px !important;
    font-family: "Kanit" !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}

.btnModal {
    font-weight: 500 !important;
    width: 100%;
    font-size: 14px !important;
}

.btn-print-bill {
    font-weight: 400 !important;
    font-size: 16px !important;
}

a.btn-back, button.cancel-select-date-time {
    width: 100px !important;
    font-family: "Kanit" !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    background: #B1BAC9 !important;
}

.col-form-label {
    font-family: "kanit" !important;
    font-weight: 300 !important;
    font-size: 16px !important;
}

.btn-status, .btn-status:hover, .btn-status:active {
    background-color: transparent !important;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #dddfe2;
}

.form-control, .btn {
    font-size: 16px;
    font-weight: 300;
}

input.form-control {
    background: transparent;
}

.btn i {
    font-size: .75rem !important;
}

#datatable_paginate a {
    font-size: .895rem !important;
}

.btn-search {
    background-color: #003E8D;
    color: #ffffff;
    height: calc(2.25rem + 2px);
    box-shadow: inset -4.2153px 4.2153px 5.26912px rgba(92, 163, 255, 0.45), inset 4.2153px -4.2153px 4.2153px rgba(0, 0, 0, 0.3);
}


.icon-search {
    margin-top: -8px;
}

.form-control-sm {
    line-height: 1rem !important;
}

/* select2 */
.select2-selection {
    border: 1px solid #eee;
    border-radius: 3px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    font-weight: 100;
    height: 2.4rem !important;
}

.select2-selection__arrow {
    margin-right: 15px;
}

/*sidebar*/
.layout-2 .layout-sidenav {
    z-index: 10;
    background: url("/img/softprompt_file/bg_nav_menu/Nav-bg-L.svg") no-repeat;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 2px -2px 4px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0px 27px 27px 0px !important;
    background-size: cover;
    width: 280px;
}

.layout-2 .layout-sidenav .sidenav-item a {
    font-family: "Kanit" !important;
    font-weight: lighter !important;
    font-size: 16px !important;
    line-height: 22.5px;
    margin-left: 5px;
    width: 270px;
}

.sidenav-vertical .sidenav-inner {
    margin-top: 10px;
}

.bg-sidenav-theme .sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle, .bg-sidenav-theme .sidenav-item.active > .sidenav-link {
    color: #4E5155;
    font-weight: lighter;
}

.sidenav-item > a {
    color: white !important;
    border-radius: 10px;
}

.sidenav-item.active > a {
    background-color: #E6E8F1 !important;
    color: #003E8D !important;
    border-radius: 10px;
}

.sidenav-item.active > a.sidenav-link.sidenav-toggle > i > svg path {
    fill: #003E8D;
}

.bg-sidenav-theme .sidenav-link:hover,
.bg-sidenav-theme .sidenav-item.active > .sidenav-link:not(.sidenav-toggle),
.bg-sidenav-theme .sidenav-item.active > .sidenav-link:not(.sidenav-toggle) > i,
.bg-sidenav-theme .sidenav-item.active > .sidenav-link:not(.sidenav-toggle) > i > svg path {
    background-color: #E6E8F1 !important;
    color: #003E8D !important;
    border-radius: 10px;
    font-weight: bold;
    fill: #003E8D;
}

.bg-sidenav-theme .sidenav-link:hover > i, .bg-sidenav-theme .sidenav-link:hover > i > svg path {
    color: #003E8D !important;
    border-radius: 10px;
    fill: #003E8D;
}

.bg-sidenav-theme .sidenav-inner > .sidenav-item.active > .sidenav-link .sidenav-icon, .sidenav-toggle::after {
    color: inherit !important;
}

.sidenav-toggle::after {
    font-size: 30px !important;
    font-weight: bold !important;
    right: 1rem !important;
}

.bg-sidenav-theme .sidenav-item.active > .sidenav-link:not(.sidenav-toggle) {
    background: #E6E8F1;
}

.bg-sidenav-theme .sidenav-item.open:not(.sidenav-item-closing) > .sidenav-toggle, .bg-sidenav-theme .sidenav-item.active > .sidenav-link {
    color: #4E5155;
}

.sidenav-vertical .sidenav-inner > .sidenav-item {
    margin: .0625rem 0;
    width: 290px;
}

/*

/*navbar*/
.navbar.bg-white {
    background-color: #fff !important;
    color: #a3a4a6;
    width: ;
    height: 65px;
    border-bottom-right-radius: 10px;
    box-shadow: 2px 2px 3px rgb(0 0 0 / 10%);
}

.demo-navbar-user {
    border-left: 1px solid #E6E8F1;
    padding-left: 10px;
}

.btn-logout-navbar:hover {
    cursor: pointer;
    filter: contrast(0.5);
}

.btn-logout-navbar {
    padding-left: 20px;
}

.btn-setting-navbar:hover {
    cursor: pointer;
    filter: contrast(0.5);
}

.navbar-user {
    font-size: 16px !important;
    font-weight: 300;
}

.btn-menu-drag {
    padding-top: 15px;
}

/*

/*dashboard*/
.card-body.card-bg-menu {
    background: url('/img/softprompt_file/button/button-dashboard-gray.svg') no-repeat;
    background-size: cover;
    height: 92px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 1px 2px 4px grey;
}

.card-body.card-bg-menu:hover {
    background: url('/img/softprompt_file/button/button-dashboard-blue.svg') no-repeat;
    background-size: cover;
    height: 92px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 1px 2px 4px grey;
}

.card-body.card-bg-menu:hover .text-black, .card-body.card-bg-menu:hover .icon-menu-dashboard, .card-body.card-bg-menu:hover .items-menu-dashboard-center .text-primary .icon-menu-dashboard #icon-dashboard-menu path {
    color: white !important;
    fill: white;
}

.card-body.card-bg-menu .items-menu-dashboard-center .text-primary .icon-menu-dashboard #icon-dashboard-menu path {
    fill: #003E8D;
}

.text-dashboard-menu {
    color: #003E8D !important;
    font-weight: 400 !important;
    font-family: "Kanit" !important;
    font-style: normal !important;
    font-size: 22px !important;
}

.head-card-bg-menu {
    height: 90px;
    background: unset;
}

.icon-menu-dashboard {
    color: #003E8D;
}

.items-menu-dashboard-center {
    justify-content: center;

}

h5.text-header-card-sumation {
    font-size: 22px;
    font-weight: 500;
    font-family: "Kanit";
    color: white;
    font-style: normal;
}

.card-body-bg-1 {
    background: #4D68B6;
}

.card-body-bg-2 {
    background: #A6AFBD;
}

.card-body-bg-3 {
    background: #5CA3FF;
}

.card-body-bg-4 {
    background: #5476A1;
}

.card-sumation-border {
    border-radius: 10px;
    padding-bottom: 10px;
    box-shadow: 1px 1px 2px 0px grey;
}

.dashboard-text-sum {
    font-family: "Roboto";
    font-weight: 700;
    font-size: 24px;
    color: white;
    font-style: normal;
}

.dashboard-text-mount {
    font-family: "Kanit";
    font-weight: 400;
    font-size: 18px;
    color: white;
    font-style: normal;
}

.card-dashboard {
    border-radius: 10px;
}

.icon-on-card-dashboard {
    height: 30px;
}

/*

/*setting dashboard*/
.btn-outline-primary #icon-setting-dashboard-menu path {
    fill: #003E8D;
}

.btn-outline-primary:hover #icon-setting-dashboard-menu path {
    fill: white;
}

.card-setting-dashboard-recommendation {
    background: #E6E8F1;
    border-radius: 10px;
    font-family: "Kanit";
}

.card-setting-dashboard-recommendation .text-large {
    font-size: 30px !important;
    font-weight: 500;
    font-family: "Kanit";
    margin-left: -45px;
    color: #003E8D;
}

.card-setting-dashboard-recommendation p {
    color: #003E8D;
    font-size: 14px;
    font-weight: 300;
    margin-top: 10px;
}

.text-large.card-setting-dashboard-short-head {
    font-size: 30px !important;
    font-weight: 500;
    font-family: "Kanit";
    color: #003E8D;
    margin-top: 30px;
}

.card-setting-dashboard-menu-items {
    margin-top: 40px;
}

.btn-menu-drag #icon-setting-dashboard-menu path {
    fill: #003E8D;
}

.btn-menu-drag:hover #icon-setting-dashboard-menu path {
    fill: white;
}

.btn.btn-menu-drag {
    color: #003E8D !important;
    background: url('/img/softprompt_file/button/button-dashboard-gray.svg') no-repeat;
    background-size: cover;
    width: 200px;
    height: 60px;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

.btn-menu-drag:hover {
    color: white !important;
    background: url('/img/softprompt_file/button/button-dashboard-blue.svg') no-repeat;
    background-size: cover;
    width: 200px;
    height: 60px;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
}

.btn-menu-drag.active {
    color: white !important;
    background: url('/img/softprompt_file/button/button-dashboard-blue.svg') no-repeat;
    background-size: cover;
    width: 200px;
    height: 60px;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
}
/*

/*login*/
span.input-group-text-login {
    border-radius: 10px !important;
    z-index: 2;
    width: 55px;
    justify-content: center;
    height: 53px;
    margin-top: -1px;
    border: none;
    box-shadow: 0px 1px 6px -2px grey;
}

.section-login {
    margin-top: 35px;
    margin-left: 0px;
}

input.input-group-login {
    margin-left: -10px !important;
    height: 51px !important;
    z-index: 0 !important;
    padding-left: 25px !important;
    border: none !important;
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    box-shadow: 0px 1px 5px -2px grey !important;
    font-family: "Kanit" !important;
    font-style: normal !important;
    font-weight: 300 !important;
    color: #003E8D !important;
    background: white !important;
    border-bottom: none !important;

}

.custom-control.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before,
.custom-control.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-control.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    border: none !important;
    outline: none !important;
    background-color: #003E8D;
    box-shadow: none !important;
}

.custom-control-label::before {
    top: 5px;
    border-color: #003E8D;
}

.custom-control-label {
    color: #003E8D;
    font-size: 16px;
    font-family: "Kanit";
    font-weight: 300 !important;
}

span.custom-control-label-login::before {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    box-shadow: 0px 1px 6px -2px grey !important;
    margin-top: 0px !important;
    cursor: pointer !important;
}

.custom-control-label-login {
    color: #003E8D !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 300 !important;
    margin-top: 3px !important;
}

.btn-forget-login, .btn-loged-in {
    border-radius: 10px !important;
    margin-top: 30px;
    height: 51px;
    font-family: "Kanit";
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid #003E8D;
    font-size: 18px;
    font-weight: 300 !important;
    background: transparent !important;
    color: #003E8D;
}

.btn-forget-login {
    margin-right: 5px;
}

.btn-loged-in {
    margin-left: 5px;
}

.btn-forget-login:hover, .btn-loged-in:hover {
    color: white;
    font-weight: 500 !important;
    background: linear-gradient(177.62deg, #5CA3FF -71.96%, #003E8D 77.71%) !important;
    outline: 0 !important;
    border: 0px;
}

.text-large.head-text-login {
    color: #003E8D;
    letter-spacing: 5px;
}

.authentication-inner-page {
    padding-top: 0px !important;
}

/*

/*report sales*/
.multiselect-btn {
    height: calc(2.25rem + 2px);
    background-color: #ffffff;
}

.multiselect-btn:hover {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

.modal-title-select-date-time {

    font-size: 25px;
    font-weight: bold;
    color: #003e8d;
    text-align: center;
}

/*

/*setting*/
.nav-tabs-top {
    background: linear-gradient(269.69deg, #003E8D -1.77%, #02295B 80.31%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 2px -2px 4px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 80px;
    width: 99.9%;
    margin: auto;
}

.nav-tabs-top .nav-tabs .nav-item a {
    color: white;
    border: none !important;
    width: 231px;
    margin: 0px;
    background: none;
    text-align: center;
    margin-top: 10px;
    font-size: 18px;
    font-family: "Kanit";
    font-weight: 300;
}

.nav-tabs-top > .nav .nav-link.active {
    background: url('/img/softprompt_file/button/button-setting-gray.svg') no-repeat;
    background-size: cover;
    color: #003E8D;
    text-align: center;
    height: 78px;
    width: 231px;
    margin: 0;
    margin-top: -5px;
}

.nav-tabs-top > .nav .nav-link:hover {
    background: url('/img/softprompt_file/button/button-setting-gray.svg') no-repeat;
    background-size: cover;
    color: #003E8D;
    text-align: center;
    height: 78px;
    width: 231px;
    margin: 0;
    margin-top: -5px;
}

.nav-tabs-top .nav-tabs {
    margin-top: -10px;
}

.nav-tabs-top > .nav-tabs:not(.tabs-alt), .nav-tabs-top > div > .nav-tabs:not(.tabs-alt), .nav-tabs-bottom > .nav-tabs:not(.tabs-alt), .nav-tabs-bottom > div > .nav-tabs:not(.tabs-alt) {
    padding-right: 0px;
    padding-left: 0px;
}

.card-setting {
    margin-top: -30px;
    z-index: 2;
}

.label-custom-setting-work-time {
    margin-top: 10px;
    font-size: 16px !important;
    font-weight: bold;
    width: 40px;
    color: #003E8D;
}

.label-custom-setting-work-time-2 {
    margin-top: 10px;
    font-size: 16px !important;
    font-weight: bold;
    width: 40px;
    color: #003E8D;
}

.label-custom-setting-work-time-3 {
    margin-top: 10px;
    font-size: 16px !important;
    font-weight: bold;
    width: 30px;
    color: #003E8D;
}

/*

/* stock inventory*/
table.dataTable tbody tr td.table-code-inventory a, table.dataTable tbody tr td.table-code-product a {
    width: -webkit-fill-available !important;
}

/*

/*transport*/
.btn-add, .btn-del, .btn-add-supplier, .btn-del-supplier,
.btn-add-semifinished, .btn-del-semifinished, .btn-add-raw, .btn-del-raw,
.btn-add-package, .btn-del-package, .btn-add-product_category, .btn-remove-product_category,
.btn-add-row, .btn-del-row, .btn-add-kitchen-row, .btn-remove-kitchen-row, .add-file, .del-file,
.add-lead, .remove-lead, .add-staff, .remove-staff, .del-line-point, .add-line-point,
.btn-remove-staff, .btn-add-staff,
.btn-add-category, .btn-remove-category, .btn-add-sub-category, .btn-remove-sub-category, .btn-remove-admin, .btn-add-admin,
.remove-row-gift, .add-row-gift, .remove-row-promotion, .add-row-promotion,
.del-row-gift_card, .add-row-gift_card, .del-row-gift, .add-row-gift, .remove-row-discount_group_item,
.add-row-discount_group_item, .remove-row-discount_group_item, .add-row-discount_group_item, .btn-add-input, .btn-remove-input,
.add-holidays, .remove-holidays {
    background: transparent;
    outline: unset !important;
    box-shadow: none !important;
    padding-right: 0px;
}

/*
/* product*/
.btn-create-unit {
    background: transparent;
    outline: unset !important;
    box-shadow: none !important;
    padding-right: 10px;
}

/*

/*Job*/

table.table-job tbody td {
    font-family: "Kanit" !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    /*color: white;*/
}

table.table-modal-time-job tbody tr td {
    /*color: #003E8D;*/
}

.btn-modal-timesheet {
    font-size: 14px !important;
    font-weight: 300 !important;
}


/*Sale*/

.btn-outline-primary.btn-menu-sale:active, .btn-outline-primary.btn-menu-sale.active, .show > .btn-outline-primary.btn-menu-sale.dropdown-toggle {
    border-color: transparent;
    background: #003E8D !important;
    color: white !important;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-outline-primary.btn-menu-sale:hover {
    border-color: transparent !important;
    background: #003e8d !important;
    color: white !important;
}

.btn-outline-primary.btn-menu-sale {
    border-color: #003E8D;
    background: transparent !important;
    color: #003E8D;
}

.tabs-sale-setting .nav-item .nav-link:hover {
    background: url('/img/softprompt_file/button/btn-sale-gray.svg') no-repeat;
    width: 121px;
    text-align: center;
    margin-top: -8px;
    border: none;
    color: #003E8D;
    font-family: "Kanit";
    font-size: 16px;
    font-weight: 500;
    height: 60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.tabs-sale-setting .nav-item .nav-link {
    color: white;
    width: 121px;
    text-align: center;
    margin-top: -8px;
    font-family: "Kanit";
    font-size: 16px;
    font-weight: 500;
}

.tabs-sale-setting .nav-link.active {
    background: url('/img/softprompt_file/button/btn-sale-gray.svg') no-repeat;
    width: 121px;
    text-align: center;
    margin-top: -8px;
    border: none;
    color: #003E8D;
    font-family: "Kanit";
    font-size: 16px;
    font-weight: 500;
    height: 60px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

}

.tabs-sale-setting {
    background: linear-gradient(269.69deg, #003E8D -1.77%, #02295B 80.31%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.tabs-sale-setting .nav-item {
    margin-bottom: -1px;
    width: 120px;
    height: 50px;
}

.btn_add_data, .btn_add_category {
    background: #003E8D !important;
    padding-right: 10px;
}

/*

/*Promotion*/

#btnRemovePromotionItem {
    width: auto !important;
}

/*

/*Timesheet Alert*/

#alertHoldTimesheet .modal-alert-hold-timesheet {
    background: url('/img/timesheet/alert-bg/bg-alert-hold.png') no-repeat !important;
    background-size: cover !important;
    border-radius: 10px;
}

#alertDoingTimesheet .modal-alert-doing-timesheet {
    /*background: url('/img/timesheet/alert-bg/bg-alert-doing.png')no-repeat !important;*/
    background: url('/img/timesheet/alert-bg/bg-alert-hold.png') no-repeat !important;
    background-size: cover !important;
    border-radius: 10px;
}

.modal-alert-done-timesheet {
    /*background: url('/img/timesheet/alert-bg/bg-alert-done.png')no-repeat !important;*/
    background: url('/img/timesheet/alert-bg/bg-alert-hold.png') no-repeat !important;
    background-size: cover !important;
    border-radius: 10px;
}

.modal-alert-check-timesheet {
    /*background: url('/img/timesheet/alert-bg/bg-alert-check.png')no-repeat !important;*/
    background: url('/img/timesheet/alert-bg/bg-alert-hold.png') no-repeat !important;
    background-size: cover !important;
    border-radius: 10px;
}

.modal-alert-delete-timesheet {
    /*background: url('/img/timesheet/alert-bg/bg-alert-delete.png')no-repeat !important;*/
    background: url('/img/timesheet/alert-bg/bg-alert-hold.png') no-repeat !important;
    background-size: cover !important;
    border-radius: 10px;
}

.modal-alert-error-timesheet {
    /*background: url('/img/timesheet/alert-bg/bg-alert-bug.png')no-repeat !important;*/
    background: url('/img/timesheet/alert-bg/bg-alert-hold.png') no-repeat !important;
    background-size: cover !important;
    border-radius: 10px;
}

.btn-alert-modal-success-timesheet {
    width: 66px;
    height: 28px;
    padding: inherit;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "Kanit";
    box-shadow: 0px 1px 5px;
}

.text-message-modal-error, .text-message-modal-delete {
    font-size: 18px;
    font-weight: 500;
    font-family: "Kanit";
    color: black;
}

label.label-text-alert-error, label.label-text-alert-delete {
    font-size: 36px !important;
    font-weight: bold !important;
    color: black !important;
}

/*Custom Alert*/

.modal-alert-success {
    background: url('/img/softprompt_file/image/bg-success.jpg') no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.modal-alert-success-approve {
    background: url('/img/timesheet/alert-bg/bg-alert-approve.png') no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.modal-alert-error {
    background: url('/img/softprompt_file/image/bg-error.jpg') no-repeat;
    background-size: cover;
    border-radius: 20px;
}

.modal-alert-info {
    background: url('/img/softprompt_file/image/bg-info.jpg') no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.modal-alert-warning {
    background: url('/img/softprompt_file/image/bg-oops.jpg') no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.modal-alert {
    padding-top: 0;
}

.btn-dismiss-modal {
    width: 35px;
    height: 35px;
    z-index: 2;
    margin-left: 515px;
    margin-top: -15px;
    box-shadow: -1px 1px 6px -3px;
    border-radius: 50px;
    cursor: pointer;
}

.btn-dismiss-modal:hover {
    filter: brightness(1.2);
}

.btn-alert-modal-success {
    width: 66px;
    height: 28px;
    padding: inherit;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "Kanit";
    box-shadow: 0px 1px 5px;
    color: #5C9A0E;
}

.btn-alert-modal-info {
    width: 66px;
    height: 28px;
    padding: inherit;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "Kanit";
    box-shadow: 0px 1px 5px;
    color: #003E8D;
}

.btn-alert-modal-warning {
    width: 66px;
    height: 28px;
    padding: inherit;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "Kanit";
    box-shadow: 0px 1px 5px;
    color: #dcb605;
}

.btn-alert-modal-error {
    width: auto;
    height: 28px;
    padding: inherit;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-family: "Kanit";
    box-shadow: 0px 1px 5px;
    color: #C51E36;
}

.text-message-modal {
    font-size: 18px;
    font-weight: 500;
    font-family: "Kanit";
    /*color: black;*/
    color: #003E8D;
}

.text-message-modal-approve {
    font-size: 18px;
    font-weight: 500;
    font-family: "Kanit";
    color: white;
}

.text-message-modal-success {
    font-size: 18px;
    font-weight: 500;
    font-family: "Kanit";
    color: black;
}

.text-title-modal {
    font-size: 36px;
    font-weight: 500;
    font-family: "Kanit";
    /*color: black;*/
    color: #003E8D;
}

.text-title-modal-approve {
    font-size: 36px;
    font-weight: 500;
    font-family: "Kanit";
    color: white;
}

label.label-text-alert-approve {
    font-size: 36px !important;
    font-weight: bold !important;
    color: white;
}

img.icon-popup-status {
    filter: invert(1);
}

/*

/*admin -package*/
.nav-tabs-package {
    background: linear-gradient(269.69deg, #003E8D -1.77%, #02295B 80.31%);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 2px -2px 4px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 80px;
    width: 99.9%;
    margin: auto;
}

.nav-tabs-package .nav-item a {
    color: white !important;
    border: none !important;
    width: 231px;
    margin: 0px;
    background: none;
    text-align: center;
    margin-top: 0px;
    font-size: 18px;
    font-family: "Kanit";
    font-weight: 600;
}

.nav-tabs-package .nav-link.active {
    background: url(/img/softprompt_file/button/button-setting-gray.svg) no-repeat;
    background-size: cover;
    color: #003E8D !important;
    text-align: center;
    height: 78px;
    width: 231px;
    margin: 0;
    margin-top: -10px;
    border-radius: 12px;
}

.nav-tabs-package .nav-link:hover {
    background: url(/img/softprompt_file/button/button-setting-gray.svg) no-repeat;
    background-size: cover;
    color: #003E8D !important;
    text-align: center;
    height: 78px;
    width: 231px;
    margin: 0;
    margin-top: -10px;
}

.nav-tabs-package {
    margin-top: -10px;
}

/*

/*admin -tenant*/
.card-l {
    background: red;
    background: linear-gradient(269.69deg, #003E8D -1.77%, #02295B 80.31%) !important;
    height: 60px;
}

.card-body-quota {
    padding-top: 0px;
    padding-bottom: 0px;
}

.card-quota-name {
    border: 0px;
    padding-bottom: 20px;
    padding-top: 20px;
    font-family: "Kanit";
    font-size: 14px !important;
    font-weight: 300;
}

.card-value-quota {
    border-left: 1px solid white;
    padding-bottom: 20px;
    padding-top: 10px;
    font-family: "Kanit";
    font-size: 14px !important;
    font-weight: 300;
}

/*

/*mfg*/
.mfg-item-name {
    font-size: 16px;
    background: #003E8D !important;
}

/*

/*branch*/
.btn-table-printer {
    width: 50px !important;
    height: 27px;
    line-height: normal;
}

/*

/*multiple select*/
.multiselect-selected-text {
    color: #003E8D !important;
}

/* card detail */
.card-detail .card-header {
    position: relative;
    bottom: -10px;
    background-color: #003E8D;
    color: white;
    border-radius: 10px;
    font-size: 20px;
    line-height: 16px;
}

.card-detail .card-body {
    background-color: #F2F3F8;
    box-shadow: 0.750327px 0.750327px 2.25098px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.card-detail span.select2-selection {
    background-color: #F2F3F8 !important;
}

.label-required {
    color: #CB0505;
    font-size: 10px;
}

.btn-add_modal {
    font-size: 12px;
    color: #003E8D !important;
}

.btn-add_modal:hover {
    font-size: 12px;
    color: #003E8D !important;
}

.material-style .select2-container--default .select2-selection--single .error {
    color: red !important;
    border-bottom: 2px solid red;
}

hr.product-detail {
    border: 2px solid #E6E8F1;
}

.product-detail-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #E5E7F3;
    border-radius: 10px;
    box-shadow: 0.750327px 0.750327px 2.25098px rgba(0, 0, 0, 0.1);
    padding: 15px;
}

.product-detail-panel .header {
    font-size: 18px;
    font-weight: bold;
}

.product-detail-panel .btn-group {
    border: 1px solid #B1BAC9;
    border-radius: 5px;
}

.product-detail-panel button.btn-panel-toggle {
    font-size: 14px;
    background: linear-gradient(180deg, #E6E8F1 0%, #B1BAC9 100%);
    border: none;
    padding: 5px 15px;
}

.product-detail-panel button.btn-panel-toggle.active {
    color: white;
    background: #909BAD;
    border: 1px solid #A9B2C0;
    box-shadow: inset -2.677px -2.677px 2.677px rgba(0, 0, 0, 0.1), inset 2.677px 2.677px 2.677px rgba(0, 0, 0, 0.1);
}

.product-detail-panel + .collapse > table {
    position: relative;
    top: -15px;
    margin-bottom: -15px;
}

.product-detail-panel button.btn-action, th > button.btn-action, td > button.btn-action {
    border-radius: 10px !important;
    font-weight: bold !important;
    background-color: #003E8D !important;
    padding: 10px !important;
    color: white !important;
}

/*Select2 Eror*/
.title-error {
    color: red !important;
}

span.select2-selection.select2-selection--single.error,
span.select2-selection.select2-selection--multiple.error {
    outline: none;
    border-bottom: 2px solid red !important;
}

.material-style .select2-container--default .select2-selection--single.error .select2-selection__arrow b {
    border-color: red transparent transparent transparent;
}

/*End Select2 Eror*/

/*custom add*/
.gap-8{
    row-gap: 8px;
}

.input-group-append img {
    width: 20px !important;
}

.show-package-name {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.show-seller-name {
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.show-tenant-name {
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.layout-collapsed.layout-offcanvas .layout-sidenav {
    margin-right: -19% !important;
}

#frmZoneTable .custom-select {
    font-size: medium;
}

#frmFloor table , #table-preview-zone {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

#formTable .nav-item {
    font-size: medium;
}

.pagination {
    justify-content: center;
}
.pagination .active {
    position: relative;
    display: block;
    padding: 0.625rem 0.3125rem;
    min-width: calc(2.144rem + 2px);
    border: 1px solid rgba(24,28,33,0.06);
    background-color: #003E8D;
    color: #fff;
    text-align: center;
    line-height: 1 !important;
    border-radius: 0.25rem;
}

.pagination li.disabled {
    position: relative;
    display: block;
    padding: 0.625rem 0.3125rem;
    min-width: calc(2.144rem + 2px);
    line-height: 1 !important;
    border-radius: 0.25rem;
    color: #a3a4a6 !important;
}

.form-inline .form-group {
    margin-right: 20px !important;
    font-size: 18px !important;
}

tfoot .text-danger {
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}

a.function {
    cursor: pointer;
}

#pWrapper .text-center{
    font-family: "Kanit" !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

a.btnModal {
    cursor: pointer;
    border: 1px solid #003E8D;
    padding: 5px 15px;
    border-radius: 5px;
}

a.btnModal:hover {
    color: white !important;
    background-color: #003E8D;
}

.panel-body{
    padding: 15px;
}

.form-control:disabled, .form-control[readonly] {
    background-color: white;
    opacity: 1;
}

li.select2-results__option {
    font-family: "kanit" !important;
    font-weight: 300 !important;
    font-size: 16px !important;
}

span.select2.select2-container.select2-container--bootstrap{
    background-color: transparent !important;
}

ul.select2-selection__rendered {
    background-color: white !important;
}

.select2-container--bootstrap.select2-container--disabled .select2-selection, .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
    background-color: white !important;
}

.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus
{
    background-color: #003E8D !important;
    border-color: #003E8D !important;
    color: white !important;
}

.pagination>li>a:not(.page-link) {
    color: #003E8D;

}


.nav>li>a {
    font-size: 16px;
    font-family: "kanit";
    position: relative;
    display: block;
    padding: 10px 15px;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}

.nav-tabs>li>a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}

.btn-primary:hover {
    background-color: #003E8D !important;
}

th.subject {
    background: #003E8D;
    color: #FFFFFF;
    padding-top: 17px;
}

.pb-5, .py-5 {
    padding-bottom: 3rem!important;
}

.pt-5, .py-5 {
    padding-top: 3rem!important;
}

.ml-auto, .mx-auto {
    margin-left: auto!important;
}

.mr-auto, .mx-auto {
    margin-right: auto!important;
}