body {
  font-family: "Anuphan", sans-serif !important;
  color: #495057 !important;
  font-size: 0.85rem !important;
  /* background-color: #dfdfdf !important; */
  background-color: #f7f9fa !important;
}
.help-block {
  color: #d92550 !important;
}

.nav-link-orange-hover:hover {
  background-color: #f95738 !important;
  border-radius: 20px !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
  /* เปลี่ยนพื้นหลังเป็นสีส้ม */
}

.navbar.navbar-expand-md.navbar-light.bg-light.fixed-top,
.footer-title,
.footer-bottom,
.card-title,
.modal-title {
  font-family: "SaoChingcha", sans-serif !important;
}

/* ################ */
/* ###################### */
/* custom kartik gridview */
.kv-expanded-content {
  width: 100%;
  white-space: pre-wrap;
}
.table thead th {
  vertical-align: bottom;
  /* border-bottom: 1px solid #f6f6f7; */
}
.table td,
.table th {
  padding: 0.45rem;
  vertical-align: baseline !important;
  border: none;
}

/* end custom kartik gridview */
/* ########################## */
/* ################ */

.table-bordered > thead.kv-table-header > tr > th a,
.kv-table-header > tr > th a,
.table-bordered > thead.kv-table-header > tr,
.kv-table-header > tr {
  font-family: "SaoChingcha", sans-serif;
  color: #42c684;
  background-color: #fff;
  font-size: 14px;
  font-weight: 400 !important;
}

.table-bordered > thead.kv-table-header > tr > th,
.kv-table-header > tr > th,
.kv-table-wrap > tbody > tr > td {
  border: 1px solid #fff;
  font-size: 14px;
  font-weight: 400 !important;
  border-bottom: 1px solid #ddd;
  /* padding: 12px 8px; */
  padding-bottom: 4px;
}
.table-bordered > tbody > tr:hover {
  background-color: #eeeeee !important;
  /* color: #0091ff !important; */
}
.table
  > .table-striped
  > .table-bordered
  > .table-hover
  > .kv-grid-table
  > .kv-table-wrap
  > .colgroup
  > .col {
  width: 0px !important;
}

.card {
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

.card-header-toey {
  background-color: #1cc88a !important;
  color: #ffffff;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

@media (min-width: 1360px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1340px !important;
  }
}

@media (max-width: 767px) {
  /* ซ่อน header ปกติ */
  .grid-view table thead {
    display: none;
  }
  /* แต่ละแถวเป็นบล็อก */
  .grid-view table tr {
    display: block;
    /* margin-bottom: 1rem; */
    border-bottom: none;
  }
  /* แต่ละเซลล์แสดงเป็นบล็อก พร้อมป้ายชื่อ */
  .grid-view table td {
    display: block;
    padding: 0.5rem;
    text-align: right;
    position: relative;
    white-space: normal !important;

    /* ตั้งขนาดและน้ำหนักของค่าด้านใน */
    font-size: 0.9rem !important;
    /* font-weight: normal !important; */
    /* line-height: 1.4 !important; */
  }
  .grid-view table td:before {
    content: attr(data-label) ": ";
    float: left;
    font-weight: bold;
    text-align: left;

    /* ตั้งขนาดและน้ำหนักให้เท่ากันกับค่า */
    /* font-size: 0.9rem !important;
    font-weight: normal !important;
    line-height: 1.4 !important; */
  }
  .grid-view table td.no-label-col:before {
    content: attr(data-label);
  }
  .grid-view table td.no-label-col {
    text-align: center !important;
  }
  /* .grid-view th,
  .grid-view td:last-child {
    text-align: center !important;
  } */

  @media screen and (max-width: 480px) {
    .kv-table-wrap tr > td:first-child {
      border-top: none !important;
      margin-top: 0px !important;
      font-size: 2em;
    }
  }
}