@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@100;200;300;400;500&display=swap');

body{
    background: #f3f6fa;
}

h1, h2, h3, h4, h5, p, span, a, label, input, th, tr{
    letter-spacing: normal !Important;
    font-family: sarabun !important;
}

a { cursor: pointer;}

.login-page {background: #f4f6fa;}
.center {text-align: center;}

.login-page button.btn.btn-primary {
    padding: 0px;
    width: 500px;
    background: #378243;
    color: #fff;
    height: 3.5rem;
    height: 3rem;
    font-size: 1.2rem;
}
.center.from-login {
    position: relative;
    margin-top: 8rem;
}
.center.from-login img {
    width: 120px;
}
.center.from-login h2.htitle {
    font-size: 2rem;
    color: #3f3f3f;
}
.btn-login {
    background: #00793d;
    color: #fff;
    display: block;
    width: 500px;
    margin: auto;
    padding: 10px;
    font-size: 1.2rem;
    border-radius: 6px;
    margin-top: 3rem !important;
}
.login-page .form-control {
    height: 3rem;
    line-height: 1.33333;
    padding: 8px 18px;
    border: unset;
    margin-bottom: 2rem;
}
.login-page .col-md-6 {
    padding: 0;
}

.login-page .form-group {
    margin-bottom: 15px;
    width: 500px;
    margin: auto;
}
.login-page .form-group>label {
    display: block;
    text-align: left;
    font-family: sarabun;
}
.form-check {
    display: none;
}
small#emailHelp {
    display: none;
}
p.show-pass {
    margin: 0;
    position: absolute;
    bottom: 0;
    margin-bottom: 7rem;
    margin-left: 32rem;
    color: #737373;
}

/* Home Page */
#header {
    width: 100%;
    z-index: 199!important;
    height: 65px;
    line-height: 65px;
}
#header #header-wrap #logo {
    height: 60px;
}
#header.header-transparent #header-wrap #logo {top: 0;}
#header #header-wrap #logo a>img {
    height: 60px !important;
    margin-top: 0; 
    margin-top: 0px !important;
}
#mainMenu nav {
    float: left;
    margin-left: 1.5rem;
}
div#mainMenu li.active a {
    border-bottom: 4px solid #fff;
}
#mainMenu nav>ul>li>a {
    margin: 0px 6px;
    padding: 20.5px 5px;
}
#mainMenu nav>ul>li>a {
    font-size: 1rem;
    color: #FFF;
    letter-spacing: 0px;
    font-weight: 300;
}
#header.header-transparent #header-wrap, #header.header-transparent.dark #header-wrap {
    background-color: #00793d;
    border-bottom: 0;
}
section.menu-home {
    background: transparent;
    margin-top: -14em;
}
li.nav-item.active :before {
    content: "";
    position: absolute;
    width: 60px;
    height: 4px;
    background: #fff;
    bottom: -1px;
    margin-left: -8px;
}
.caption-head-banner p {
    width: 100%;
    text-align: center;
    font-size: 2.3rem;
    font-weight: 500;
    color: #fff;
    text-shadow: 0px 0px 9px #202020;
    position: absolute;
    top: 0;
    margin-top: 13rem;
}
div#wrapper {background: #f4f6fa;}
.navbar-brand>img {
    display: block;
    width: 60px;
}
ul.navbar-nav li {
    margin: 0px 20px;
}
a.nav-link {font-size: 1rem;}
a.nav-link {color: #fff;line-height: 60px !important;}
.navbar-brand {
    float: left;
    padding: 0;
    font-size: 18px;
    line-height: 20px;
    height: auto;
    display: block;
}
nav.navbar {background: #12873e;border-radius: 0px;margin: 0;}
ul.navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 2.5rem;
}
.nav-right {
    float: right;
    /*margin-right: 2.5rem;*/
    display: inline-flex;
}
.user-login img {
    width: 20px;
    margin-right: 0.5rem;
}
.user-login img {
    width: 20px;
}
.user-login p {
    color: #fff;
    padding: 0;
    margin: 0;
    margin-right: 3rem;
    line-height: 60px;
    font-weight: 200;
}
button.logout {
    margin-top: 15px;
}
button.logout {
    margin-top: 10px;
    padding: 10px 15px;
    border-radius: 9px;
    border: unset;
    background: #ffeded;
    color: #c13838;
    line-height: initial;
}
section.menu-home {background: transparent;}
section.menu-home ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
section.menu-home ul.show-data li {
    display: inline-block;
    width: 20%;
    text-align: center;
}
p.count-report {
    color: #00853f;
    font-size: 2rem;
    font-weight: 600;
    margin: 10px;
}
p.last-time {
    font-size: 0.9rem;
    color: #a9a9a9;
    margin: 0;
    font-weight: 400;
}
p.h-show-data {
    margin: 0;
    margin-bottom: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #202020;
}
.menu-home ul.show-data li img {
    width: 45px;
}
section.menu-home ul.show-data li {
    display: inline-block;
    width: 20%;
    text-align: center;
    background-color: #fff;
    padding: 25px;
    border-radius: 15px;
    margin: 0px 5px;
}
section.menu-home ul.menu-banner li {
    width: 30%;
    display: inline-block;
    margin-left: -12px;
    margin-right: -10px;
}
ul.menu-banner li img {
    width: 100%;
}
ul.menu-banner li img.icon {
    width: 60px;
}
.name-m-b {
    margin-top: -8rem;
}
.name-m-b span {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 500;
    text-shadow: 0px 0px 9px #202020;
}
.text-footer p {
    text-align: center;
    color: #818181;
    font-size: 0.7rem;
}
ul.menu-banner li:hover {
    filter: brightness(0.85);
}


/* Result */

section.menu-result ul.menu-banner li {
    width: 30%;
    display: inline-block;
    margin-left: -12px;
    margin-right: -10px;
    margin-bottom: -15px;
    vertical-align: top;
}
section.menu-result {
    background: transparent;
    margin-top: -13em;
}
section.menu-result .name-m-b {margin-top: -8.5rem;}
section.menu-result .menu-result .name-m-b {text-align: center;}
/*section.menu-result ul.menu-banner {margin-bottom: -15px;}*/

.report-result span {
    color: #00853f;
    text-shadow: unset;
}

ul.menu-banner li .report-result img.icon {
    width: 25px;
    margin: 0;
    margin-top: 13px;
}
section.menu-result ul.menu-banner {
    padding: 0;
    text-align: center;
}
/*section.menu-result ul.menu-banner {
    height: 120px;
}*/

.report-result .name-m-b {

}

/* Result */


/* import-form / export-form */
section.sec-import-form, 
section.sec-export-form {
    background: transparent;
}
section.sec-import-form,
section.sec-export-form {
    margin-top: -21.5rem;
    padding-top: 0;
    background: transparent;
}
section.sec-import-form .form-group,
section.sec-export-form .form-group {
    margin-bottom: 15px;
    display: flex;
}
.form-group>label {
    display: inline-flex;
    width: 15rem;
}
.import-form,
.export-form {
    background: #fff;
    margin: 0px 6rem;
    padding: 2.5rem 5rem;
    border-radius: 20px;
}

section.sec-import-form .form-control,
section.sec-export-form .form-control {
    height: auto;
    line-height: 1.33333;
    padding: 8px 18px;
    border: unset;
    margin-bottom: 6px;
    background: #f6f6f6;
}

img.icon-form {width: 50px;}
h3.htitle span {
    margin-left: 1rem;
    color: #00853f;
    font-family: sarabun;
}
.form-group>label {
    display: inline-flex;
    width: 11rem;
    font-weight: 400;
}

p.unit.u-shot {
    margin-left: -4rem !important;
}
/*label.unit {
    width: 5rem;
    float: right;
    padding-left: 1rem;
}*/

p.unit {
    margin-left: -5.5rem !important;
    padding-right: 3rem;
    font-size: 0.8rem;
    color: #717171;
}

p.unit-ed {
    width: 80%;
    float: right;
    display: block;
    text-align: left;
    padding-left: 1.5rem;
}

input.form-control.set-width {
    margin-left: 0.7rem;
}

form.customer-info {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.btn-form {
    margin-left: 9rem;
    margin-top: 3rem;
}
button.btn-save {
    font-family: sarabun;
    background: #00793d;
    color: #fff;
    border: unset;
    padding: 7px 0px;
    width: 10rem;
    font-size: 1rem;
    box-shadow: 0px 0px 2px #20202020;
    border-radius: 5px;
    margin-right: 0.3rem;
}

button.btn-cancel {
    border: 1px solid #f23131;
    background: transparent;
    color: #da2b3d;
    padding: 6px 0px;
    width: 10rem;
    border-radius: 5px;
    font-family: sarabun;
}


/* import-form */


/* import-detail */
form.detail-info p {
    margin-top: 8px;
}
section.sec-import-form p, .sec-export-form p.unit{
    margin: 0;
    margin-top: 8px;
}
.form-group .col-md-8 {
    margin-left: 1rem;
}
.btn-form.btn-edit-form {margin-left: 0;}
span.btn-right {
    float: right;
}

button.btn-copy {
    font-family: sarabun;
    background: #00793d;
    color: #fff;
    border: unset;
    padding: 7px 3rem;
    width: unset;
    font-size: 1rem;
    box-shadow: 0px 0px 2px #20202020;
    border-radius: 5px;
    margin-right: 0;
}

button.btn-back{
    border: 1px solid #979797;
    background: transparent;
    color: #5f5f5f;
    padding: 6px 0px;
    width: 10rem;
    border-radius: 5px;
    font-family: sarabun;
}

button.btn-edit {
    border: 1px solid #00793d;
    background: transparent;
    color: #00793d;
    padding: 6px 0px;
    width: 10rem;
    border-radius: 5px;
    font-family: sarabun;
}

button.btn-back i {
    margin-right: 10px;
    font-size: 1.2rem;
}

i {
    font-family: 'FontAwesome';
    font-style: inherit;
}
button.btn-back i {
    margin-right: 10px;
}

button.btn-edit i{
    font-size: 1.5rem;
    vertical-align: middle;
    margin-right: 40px;
}

button.btn-copy i {
    font-size: 1.2rem;
    vertical-align: middle;
    margin-right: 10px;
}

/* detail-import */


/* import-report */
section.sec-import-report .container, section.sec-export-report .container, section.sec-client .container,
section.sec-employees .container 
{width: 95%;}
section.sec-import-report, section.sec-export-report, section.sec-employees, section.sec-client {
    background: transparent;
    padding-top: 30px;
    padding-bottom: 0px;
}

.h-r-left {
    width: 50%;
    float: left;
}
.h-r-right {
    /*width: 40%;*/
    width: 50%;
    float: right;
    display: inline-flex;
}
.date-input {
    display: inline-flex;
    float: right;
}
.date-input input {
    height: 3rem;
    margin: 0;
    border-radius: 9px !important;
}
.date-input .form-group {
    margin: 0px 5px;
}

.h-r-right p {
    font-size: 1.2rem;
    margin: 0;
    /* float: right; */
    /* margin-top: 2rem; */
    text-align: end;
    margin-right: 2rem;
    line-height: 6rem;
}
.seven-date {
    display: block;
    width: 50%;
    /* height: 10px; */
    height: 100%;
}

.date-input .form-group>label {
    display: inline-flex;
    width: 11rem;
    font-weight: 400;
    font-size: 0.8rem;
    margin: 0;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

h3.htitle {
    margin-bottom: 35px;
}

a.btn-back img {
    width: 40px;
    border: 1px solid #8b8b8f;
    padding: 9px;
    border-radius: 5px;
}

a.btn-back img {
    width: 45px;
    border: 1px solid #8b8b8f;
    padding: 12px;
    border-radius: 5px;
    margin: 5px 0px;
    margin-left: 3rem;
    margin-right: 1.2rem;
    /*background: #eee;*/
}
.h-r-left {
    display: inline-flex;
    vertical-align: middle;
}
.h-r-left img.icon-form {
    width: 55px;
}
a.btn-back img:hover {
    /* background: #404040; */
    /*filter: invert(1);*/
    /*background: #eee;*/
    /*border: unset;*/
    box-shadow: 0px 0px 6px #c0c1cd;
}
th {font-weight: 500;}
th.t-date {width: 6%;}
div.table-report table {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
}
div.table-report tr.h-table {
    background: #E8E9F2;
}
div.table-report th.t-date {width: 7%;}

div.table-report td, th {
    border: unset;
    text-align: left;
    padding: 15px 10px;
    font-size: 0.9rem;
}
div.table-report td {
    max-width: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

div.table-report tbody {background: #fff;}
div.table-report tr {border-bottom: 1px solid #dedede;}
.btn-table i {
    font-size: 1.2rem;
    vertical-align: middle;
}
.btn-table i.fas.fa-file {
    background: #e2eaf4;
    padding: 6px 7px;
    border-radius: 4px;
    color: #3c83e2;
}

.btn-table i.far.fa-edit {
    background-color: #cde8da;
    padding: 6px 5px;
    border-radius: 5px;
    color: #00974c;
}
.btn-table i.far.fa-trash {
    background-color: #fec0c2;
    padding: 6px 7px;
    border-radius: 5px;
    color: #d24c4e;
}

.pagination a {
    color: #006131;
    float: left;
    padding: 3px 10px;
    text-decoration: none;
    font-size: 1rem;
    /*font-family: 'Prompt' !IMPORTANT;*/
    font-weight: 300;
}
.pagination {
    display: inline-block;
    width: fit-content;
    position: unset;
    left: 0;
    right: 0;
    margin: auto;
}

.pagination a.active {
    background-color: #00793d;
    color: white;
    border-radius: 50px;
    width: 30px;
    height: 30px;
}

.center-pagination {text-align: center;}
td.page-nevigation {padding: 30px 0px !important;}
tr.border-unset {
    border-bottom: unset !important;
}

/* import-statistic */
.popup-hide {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 14rem;
    text-align: center;
    z-index: 99;
    background: #fff;
    width: 450px;
    height: fit-content;
    padding: 2.5rem 0px;
    border-radius: 15px;
    box-shadow: 0px 0px 1000px 1000px #20202050;
}

.popup-hide.notadmin img {
    border: unset;
    width: 100px;
}

.popup-hide p {
    font-size: 1.2rem !important;
    margin-top: 1rem !important;
    margin: 2rem !important;
}

div.table-report th {
    line-height: 1.3rem;
    text-align: center;
    font-size: 0.8rem;
}
.popup-hide img {
    width: 60px;
    border-radius: 100px;
    border: 2px solid #ce5755;
    padding: 5px;
}

.btn-popup a.btn-allow {
    font-size: 1rem;
    background: #00793d;
    color: #fff;
    font-weight: 500;
    padding: 6px 50px;
    border-radius: 6px;
}

.btn-popup a.cancel{
    font-size: 1rem;
    background: transparent;
    color: #00793d;
    font-weight: 500;
    padding: 5px 50px;
    border-radius: 5px;
    border: 1px solid #00793d;
    margin-left: 10px;
}

.client .h-r-right, .employees .h-r-right {
    display: block;
}

/* import-statistic */

/* Employees */
div.table-report th {
    line-height: 1.3rem;
    text-align: left;
    font-size: 0.8rem;
}

.btn-employees a img, .btn-client a img, .btn-all-report img.exp {
    width: 25px;
    margin-right: 10px;
}
a.export-file {
    color: #00853f;
    font-size: 1rem;
    font-weight: 600;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #00853f;
    border-radius: 5px;
    padding: 7px 20px 8px;
}

a.add-employees, a.add-client {
    padding: 8px 20px 10px;
    background: #00853f;
    border-radius: 5px;
    color: #fff;
}

.btn-employees, .btn-client {
    float: right;
    margin-top: 1.5rem;
}

a.add-employees i.fas.fa-plus, a.add-client i.fas.fa-plus {
    border: 1px solid #fff;
    padding: 5px 6px;
    vertical-align: middle;
    border-radius: 50px;
    margin-right: 10px;
    font-size: 0.7rem;
}

section.sec-employees td, section.sec-employees th, 
section.sec-client th, section.sec-client td 
{padding-left: 20px;}


.notadmin .btn-popup a.btn-allow {
    font-size: 1rem;
    background: #ffffff;
    color: #858585;
    font-weight: 500;
    padding: 6px 50px;
    border-radius: 5px;
    border: 1px solid #858585;
}
/* Employees */

/* Add employees */
section.add-employees .btn-form, section.edit-employees-detail .btn-form {
    margin-left: 0rem !Important;
    margin-top: 0rem !important;
}

section.add-employees div.table-report td, section.add-employees th {
    border: unset;
    text-align: left;
    padding: 15px 20px;
    font-size: 0.9rem;
}

section.add-employees div.table-report table {
    border-radius: 20px 20px 0px 0px;
    overflow: hidden;
    background: #fff;
}

/* The container */
.container-c-b {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container-c-b input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #8b8b8b;
}

/* On mouse-over, add a grey background color */
.container-c-b:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container-c-b input:checked ~ .checkmark {
    background-color: #e7e7e7;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-c-b input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-c-b .checkmark:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #979797;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.edit-employees-detail .container-c-b input:checked ~ .checkmark {
    background-color: #ffffff;
}

.edit-employees-detail .container-c-b .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #02954c;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.btn-popup a.btn-allow .t-2 {
    font-size: 1rem;
    background: #ffffff;
    border: 2px solid #00974c;
    color: #00984c;
    font-weight: 500;
    padding: 6px 50px;
    border-radius: 6px;
}
p.allow-text {
    font-size: 1.5rem !important;
    color: #00984c;
}

img.allow-icon {
    border: unset;
    width: 100px;
    margin-bottom: -20px;
}

/* All-report */
section.navs-report {background: transparent;}
section.navs-report {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0px;
}
.nav-tabs>li {
    float: left;
    margin-bottom: -4px;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
    padding: 0px 6rem;
}
li.nav-item a {
    color: #202020;
    font-size: 1.3rem;
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    color: #555;
    background-color: transparent;
    border: unset;
    border-bottom-color: #00853f;
    cursor: pointer;
    border-bottom: 5px solid #00793d;
}
.nav>li>a:hover, .nav>li>a:focus {
    text-decoration: none;
    background-color: #e8e9f2;
}
/*.htop .date-input {
    display: inline-flex;
    float: unset !important;
}*/

.btn-all-report a.export-file {
    color: #00853f;
    font-size: 1rem;
    font-weight: 600;
    vertical-align: middle;
    background-color: #fff;
    border: 1px solid #00853f;
    border-radius: 5px;
    padding: 5px 35px 8px;
    display: block;
    /*margin-top: 24px;*/
}

/*.search-container form {background: #fff;border-radius: 10px;}*/
.search-container input {
    width: 250px;
    padding-left: 3rem;
    border: 2px solid #ebebeb;
}

.search-container button {
    background: unset;
    border: unset;
    font-size: 1.5rem;
    position: absolute;
    margin-top: 6px;
    margin-left: 0.5rem;
}

.htop .date-1, .htop .date-2 {
    margin-top: -24px;
}

.htop {
    padding: 50px 0px;
    padding-bottom: 10px;
}
p.htext-htop {font-size: 1.6rem;}


/*.navs-report li.nav-item.active :before{
    background: unset;
}*/

section.navs-report li.nav-item.active :before {
    background: unset;
}

.tab-pane.fade {
    display: none;
}
.tab-pane.fade.active {
    display: block;
}
.tab-content .container {
    width: 90%;
}
tr.colspan {background: #e8e9f2 !important;}
tr.colspan.green-line {
    border-bottom: 3px solid #00853f;
}
div.table-report table.report-table-1 {
    border-radius: 0px;

}
div.table-report table.report-table-1 {
    border-radius: 0px;
}
tr.report-table table {
    padding: 0 !IMPORTANT;
    margin: 0 !important;
}
td.report-row {padding: 0 !important;}
tr.report-table {border: unset !important;}
tr.report-table table {border-radius: unset;}

td.td-colspan-mobile {display: none;}

.table-report.all-report tr.h-table th {width: 5.3% !important;}
.table-report.all-report.all-export th {font-size: 0.7rem;}

/* All-report */

 /* Footer */
footer {padding: 10px;background-color: #f3f6fa;}
  /* Footer */

@media (min-width: 1020px) and (max-width: 1200px){
    .h-r-right {
        /* width: 40%; */
        width: 100%;
        line-height: 4rem;
        float: unset;
        display: inline-flex;
        margin-bottom: 4rem;
        text-align: end;
    }
    .seven-date {width: 16%;}
    section.sec-import-report .container, section.sec-export-report .container, section.sec-client .container, section.sec-employees .container {
        width: 100%;
    }
    section.menu-home {
        background: transparent;
        margin-top: -8em;
    }
    section.sec-import-form, section.sec-export-form {
        margin-top: -15.5rem;
        padding-top: 0;
        background: transparent;
    }
    section.menu-result {
        background: transparent;
        margin-top: -8em;
    }
    section.menu-result ul.menu-banner li {
        margin-bottom: -35px;
    }
    section.menu-result .name-m-b {
        margin-top: -7rem;
    }
    .scroll {overflow: scroll;}
    .table-report {width: 165%;}
    .btn-employees, .btn-client {
        float: unset;
        margin-top: 1.5rem;
    }
    .center-pagination {
        text-align: left;
        margin-left: 2rem;
    }
    .htop-r.col-md-9 {
        width: 100%;
        display: block;
    }
    .login-page .col-md-6 {
        width: 120%;
    }

    .login-page .col-md-6 img {
        filter: opacity(0.3);
    }
    .col-md-6.form--login {
        width: 100%;
        position: absolute;
    }
    .col-md-6.form--login img {
        filter: unset;
    }
}

@media (min-width: 1600px) and (max-width: 1700px) {
    section.sec-import-form, section.sec-export-form {
        margin-top: -27.5rem;
    }
}


@media (min-width: 1024px) and (max-width: 1300px){
    .search-container {
        width: auto !Important;
        margin-right: 1rem;
        margin-top: 2.5rem;
    }
    .htop .date-1, .htop .date-2 {margin-top: 11px;}
    .home-page .caption-head-banner p {
        margin-top: 16rem !important;
    }

    section.menu-result ul.menu-banner li {width: 35.5%;}
    section.menu-result .name-m-b {margin-top: -7.5rem !important;}
    .home-page section.menu-home ul.show-data li {
        width: 21% !important;
        padding: 10px;
        margin: 5px 5px !important;
        margin-bottom: 1rem;
    }
}
    

@media (min-width: 768px) and (max-width: 1024px){
    section.menu-home ul.show-data li {
        width: 43% !important;
        padding: 10px;
        margin: 5px 5px !important;
        margin-bottom: 1rem;
    }
    section.menu-home ul.menu-banner li {width: 32% !important;}
    section.menu-result .name-m-b {margin-top: -6.5rem;}
    section.menu-home .name-m-b {margin-top: -6.5rem;}
    .caption-head-banner p {margin-top: 20rem !important;}
    section.menu-result ul.menu-banner {
        padding: 0;
        text-align: center;
        display: inline-flex;
    }
    section.menu-result ul.menu-banner li {margin-bottom: 0px !important;}
    section.menu-result ul.menu-banner {margin: 0;}
    section.sec-import-form, section.sec-export-form {margin-top: -12rem !important;}
    .date-input {display: inline-flex !important;float: unset;width: 100% !important;margin-bottom: 1rem;}
    .btn-all-report a.export-file {text-align: center;padding: 2px 4px;}
    .search-container {
        width: 11rem;
        margin-right: 1rem;
        margin-top: 2.5rem;
    }
    .btn-all-report {
        margin: 2.6rem 7px;
    }
    .date-1 .form-group {width: 95%;}
    p.htext-htop {
        font-size: 1.6rem;
        margin: 0;
    }
    .h-report {display: inline-flex;width: 100%;}
    .import-report .h-r-right, .export-report .h-r-right {display: block;}
    .import-report .h-report, .export-report .h-report {
        display: block;
        width: 100%;
    }
}

@media (max-width: 768px){
 /*   .login-page .col-md-6 {
        width: 189%;
    }

    .login-page .col-md-6 img {
        filter: opacity(0.3);
    }
    .col-md-6.form--login img {
        filter: unset;
    }
    .col-md-6.form--login {
        width: 100%;
        position: absolute;
        top: 0;
    }*/


    .login-page .form-group {
        width: auto;
        margin: auto;
    }
    .col-md-6.form--login {
        position: absolute;
        top: 0;
    }
    .col-md-6.form--login {
        position: absolute;
        top: 0;
        width: 300px;
        margin: auto;
        text-align: center;
        display: block;
        justify-content: center;
        left: 0;
        right: 0;
    }
    img.w-100.img-login {
        width: 190%;
        filter: opacity(0.5);
    }
    p.show-pass {
        margin-left: 19rem;
        color: #737373;
    }
    a.btn-login {width: auto;}
    div#mainMenu li a {color: #fff !important;}
    .collapse {display: unset;}
    section.menu-home ul.show-data li {
        width: 100%;
        padding: 10px;
        margin: 0px 0px;
        margin-bottom: 1rem;
    }
    section.menu-home ul.menu-banner li {
        width: 100%;
        display: inline-block;
        margin-left: -12px;
        margin-right: -10px;
        margin-bottom: 10px;
    }
    p.last-time {
        font-size: 0.6rem;
    }

    #header #logo>a {
        display: block;
        text-align: left;
        margin-left: 4rem;
    }
    .nav-right {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: 1rem;
    }
    .user-login p {
        margin-right: 1rem;
        line-height: 80px;
        font-weight: 200;
        font-size: 1rem;
    }
    #header #header-wrap #logo a>img {
        height: 65px !important;
        margin-top: 0;
        margin-top: 8px !important;
    }
    div#mainMenu-trigger {
        width: 20px;
    }
    div#logo {
        display: block;
        width: 8rem !important;
    }
    #header {
        width: 100%;
        z-index: 199!important;
        height: 80px;
        line-height: 80px;
    }
    section.menu-home {margin-top: 0;}
    .caption-head-banner p {
        font-weight: 600;
        color: #00793d;
        text-shadow: unset;
        top: 0;
        margin-top: 12rem;
    }
    section.sec-import-form, section.sec-export-form {margin-top: 0;}
    .import-form, .export-form {
        background: #fff;
        margin: 0;
        padding: 2.5rem 2rem;
        border-radius: 20px;
    }
    .btn-form {
        margin-left: 0;
        margin-top: 3rem;
    }
    span.btn-right {float: unset;}
    .popup-hide {
        margin: auto 20px;
        margin-top: 21rem;
        z-index: 99;
        background: #fff;
        width: auto;
        box-shadow: 0px 0px 1000px 1000px #20202050;
    }
    section.menu-result {
        background: transparent;
        margin-top: 0em;
    }
    section.menu-result ul.menu-banner li {
        width: 100%;
        display: block;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 25px;
        vertical-align: top;
    }
    .import-report {overflow: auto;}
    /*.employees {overflow: scroll;}*/
    .table-report {
        /*overflow: scroll;*/
        width: max-content;
    }
    .h-r-left {
        width: 100%;
        float: left;
    }
    .h-r-left {
        width: 100%;
        float: unset;
    }

    .export-form h3.htitle {margin-bottom: 35px;}
    h3.htitle {
        margin-bottom: 0;
    }
    .btn-employees, .btn-client {
        float: unset;
        margin: auto;
        margin-top: 1.5rem;
        display: block;
        margin-bottom: 2rem;
        text-align: center;
    }
    .h-r-right {
        /* width: 40%; */
        width: 100%;
        float: unset;
        /*display: inline-flex;*/
        display: block;
    }
    .center-pagination {
        text-align: left;
        margin-left: 2rem;
    }
/*    .client {
        overflow: scroll;
    }*/
    .nav-tabs {
        border-bottom: 1px solid #ddd;
        padding: 0px 0rem;
    }
    .date-input {
        display: block;
        float: unset;
        width: 100% !important;
        margin-bottom: 1rem;
    }
    .search-container input {
        width: 100%;
    }
    .date-input .form-group {margin: 35px 0px;}
    .btn-all-report a.export-file {
        text-align: center;
    }
    .scroll {
        overflow: scroll;
        border-radius: 20px;
    }
    .h-r-right p {
        font-size: 1.2rem;
        margin: 0;
        text-align: left;
        margin-right: 0;
        line-height: 6rem;
    }
    th.w-mb {width: 25% !important;}
    p.unit-ed {width: 40%;}
    p.unit {
        margin-left: -5.5rem !important;
        padding-right: 3rem;
        font-size: 0.8rem;
        color: #717171;}
    p.unit.u-shot {margin-left: -4rem !important;}
    .h-r-right p {
        line-height: 1rem;
        margin-top: 3rem;
    }
    a.btn-back img{
        margin-left: 0;
    }

    /* edit all report */
    tr.h-table.mobile {display: revert !important;}
    .table-report.all-report .scroll {border-radius: 0;}
    tr.report-table td.report-row td {max-width: unset;}
    .table-report.all-report tr.h-table {display: none;}
    .table-report.all-report {width: auto !important;}
    td.cus-id {
        display: block;
        margin-left: 7rem;
    }
    
    /*tr.h-table th {width: 25.3% !important;}*/

    /*.table-report.all-report tr.h-table th {width: 25.3% !important;}*/
    /* edit all report */
    
}


@media (max-width: 767px) {
    button.btn-edit, button.btn-back, button.btn-copy {width: 55%; margin-bottom: 8px;}
    button.btn-back i, button.btn-edit i, button.btn-copy i {
        margin-right: 10px;
        float: left;
        margin-left: 1rem;
    }
    button.btn-copy {
        font-family: sarabun;
        background: #00793d;
        color: #fff;
        border: unset;
        padding: 7px 7px;
    }


    /* table display block */

    /*.table-report th, .table-report tr, .table-report td, .table-report th, .table-report tbody {
        display: block;
    }

    .table-report {
        width: 100% !important;
    }

    div.table-report td:before {
        content: attr(data-title);
        position: absolute;
        margin-left: 3rem;
        left: 0;
        width: 100px;
        height: 50px;
        color: #000 !important;
    }
    div.table-report td {
        max-width: 100%;
        padding-left: 45%;
        padding-top: 10px;
        padding-bottom: 10px;
        margin-right: 20px;

    }
    div.table-report tr.h-table {display: none;}
    div.table-report tr {
        padding-top: 15px;
        border-bottom: 10px solid #f3f6fa;
        padding-bottom: 15px;
        margin-bottom: 10px;
        background: #fff;
    }

    /* table display block */

    /* responsive table style 1 */
  /*  td.date-td:before , td.time-td:before {display: none;}
    td.date-td {
        width: 50%;
        padding-left: 20px !important;
    }
    td.time-td {
        width: 48%;
        padding-left: 0 !important;
        display: block;
        margin-top: -3.1rem;
        float: right;
    }
    div.table-report tbody, div.table-report table {background: transparent !important;}
    td.hide-td {display: none;}
    .remove-hide {display: block !important;}
    td.td-view-more {
        display: block !important;
    }
    a.view-more {
        display: block !important;
        font-size: 1.5rem;
        background-color: #eaeaea;
        WIDTH: fit-content;
        padding: 5px 8px;
        border-radius: 50pc;
        color: #adadad;
        float: right;
    }
    .td-btn-table {
        padding-left: 0 !important;
        margin: 0 !important;
    }
    .btn-table {
        text-align: center;
        margin-top: 2rem;
        transform: scale(1.3);
    }
    td.msg {display: none;}*/

    /* responsive table style 1 */

    /* responsive table style 2 */

    td.date-fixed {
        position: absolute;
        width: 7rem !important;
        max-width: unset !important;
        background: #e8edf4;
        padding-top: 5px !important;
        padding-bottom: 25px !important;
    }
    th.date-fixed {
        position: absolute;
        width: 7rem !important;
        background: #e8e9f2;
        border-radius: 20px;
        border-radius: 20px 0px 0px 0px;
    } 
    th.time-fixed {
        position: absolute;
        width: 5rem !important;
        margin-left: 7rem;
        background: #e8e9f2;
        display: none;
    }
    /*td.time-fixed {
        position: absolute;
        width: 5rem !important;
        margin-left: 7rem;
        max-width: unset !important;
        background: #e8edf4;
    }*/

    td.time-fixed {
        position: absolute;
        width: 5rem !important;
        margin-left: 0rem;
        margin-top: 9px;
        max-width: unset !important;
        background: #e8edf400;
        display: block !important;
    }
    th.cus-id-fixed {
        /*position: absolute;*/
        margin-left: 7rem !important;
        width: 10rem !important;
        background: #e8e9f2;
        padding-left: 20px;
    }
     td.cus-id-fixed {
        /*position: absolute;*/
        max-width: unset !important;
        margin-left: 7rem;
        width: 6rem !important;
        background: #fff;
        /*border-right: 1px solid #f2f2f2 !important;*/
    }
    th.h-unfixed {width: 9.6% !important;}
    .center-pagination {
        text-align: left;
        margin-left: 2.5rem;
        margin-top: -1rem;
        padding: 0;
        width: 100%;
        position: absolute;
    }
    th.cus-id {display: none;}
    th.cus-id-fixed {display: block !important;}

    td.cus-name {
        display: block;
        padding: 0 !important;
        max-width: unset !important;
        margin-left: 7rem !important;
        padding-left: 20px !important;
    }
    td.cus-id-fixed {
        display: block;
        padding: 0 !important;
        padding-left: 20px !important;
        padding-top: 5px !important;
    }
    th.cus-name {display: none;}

        /* export-report */
        .export-report th.h-unfixed{width: 6.4% !important;}
        /* export-report */ 

        /* client */
        .client th.h-unfixed {width: 20% !important;}
        .client td.date-fixed {position: absolute;width: 5rem !important;}
        .client th.date-fixed {position: absolute;width: 5rem !important;}
        /* client */

        /* employee */
        .employees th.h-unfixed {width: 16.6% !important;}
        .employees td.date-fixed {position: absolute;width: 5rem !important;}
        .employees th.date-fixed {position: absolute;width: 5rem !important;}
        /* employee */

        .all-report td.td-colspan-mobile {display: revert;}
        td.td-colspan-desk {display: none;}
        .table-report.all-report td.td-colspan-desk {display: none;}
        .table-report.all-report tr.h-table th {width: 25.3% !important;vertical-align: baseline;}


    /* responsive table style 2 */

}

@media (max-width: 375px){
    #header #logo>a {
        margin-left: 3rem;
    }
}

@media (max-width: 321px) {
    section.menu-result .name-m-b {margin-top: -7rem;}
    section.menu-result ul.menu-banner li {
        margin-bottom: 5px;
        vertical-align: top;
    }
    section.menu-result ul.menu-banner {
        margin-bottom: 0px;
    }
    .center-pagination {
        text-align: left;
        margin-left: 0.5rem;
    }
    button.btn-edit, button.btn-back, button.btn-copy {
        width: 75% !important;
        margin-bottom: 8px;
    }
    button.btn-save, button.btn-cancel {width: 8rem !Important;}
    h3.htitle span {margin-left: 0.8rem;}
    .form-group>label {width: 9rem;}
    .user-login span {display: none;}
    .user-login img {
        width: 39px;
        background: #036f3a;
        padding: 9px;
        border-radius: 8px;
        margin: 0;
    }
    .popup-hide {margin-top: 12rem;}
    a.add-employees, a.add-client {padding: 8px 10px 10px;}
    a.export-file {padding: 7px 9px 8px;}

}