.w3-theme-l5 {color:#000 !important; background-color:#faf6e8 !important}
.w3-theme-l4 {color:#000 !important; background-color:#fff3cc !important}
.w3-theme-l3 {color:#000 !important; background-color:#ffe799 !important}
.w3-theme-l2 {color:#000 !important; background-color:#eec17ee3 !important}
.w3-theme-l1 {color:#000 !important; background-color:#3341ff !important}
.w3-theme-d1 {color:#fff !important; background-color:#002ae6 !important}
.w3-theme-d2 {color:#fff !important; background-color:#0300cc !important}
.w3-theme-d3 {color:#fff !important; background-color:#1200b3 !important}
.w3-theme-d4 {color:#fff !important; background-color:#000399 !important}
.w3-theme-d5 {color:#fff !important; background-color:#000a99 !important}

.w3-theme-light {background-color:#fff9f0 !important}
.w3-theme-dark {color:#fff !important; background-color:#eec17ee3 !important}
.w3-theme-action {color:#fff !important; background-color:#eec17ee3 !important}

.w3-theme {background-color:#eec17ee3 !important}
.w3-text-theme {color:#eec17ee3 !important}
.w3-border-theme {border-color:#eec17ee3 !important}

.w3-hover-theme:hover {background-color:#eec17ee3 !important}
.w3-hover-text-theme:hover {color:#eec17ee3 !important}
.w3-hover-border-theme:hover {border-color:#eec17ee3 !important}

/*#################### Drak mode ##########################*/
.header-row{
  display: flex;
  align-items: center;     /* บังคับให้อยู่กึ่งกลางแนวตั้ง */
  justify-content: space-between;
  height: 60px;            /* ล็อกความสูง header */
  padding: 0 16px;
}

.header-left,
.header-center,
.header-right{
  display: flex;
  align-items: center;
  white-space: nowrap;     /* ห้ามตัดบรรทัด */
  font-size: 28px;
}

.header-center{
  flex: 1;
  justify-content: center;
  font-size: 20px;
}

/* กัน icon ทำให้ header สูง */
.header-left i{
  font-size: 28px;
  margin-right: 8px;
  line-height: 1;
}



  body {
    /*padding: 25px;*/
    background-color: white;
    color: black;
    font-size: 14px;
  }
  
  body.dark-mode {
    background-color: rgb(80, 80, 80);
    color: rgb(255, 255, 255);
  }

 /* The switch - the box around the slider */
 .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: rgb(87, 87, 87);
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #ffffff;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #383838;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }   

/*################################### Table Style ###########################################*/  
 /*######################## TABLE BASE ########################*/
#data_table,
#data_table2 {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

/* td + th ใช้ร่วมกัน */
#data_table td,
#data_table th,
#data_table2 td,
#data_table2 th {
  border: 1px solid #1f180f;
  padding: 8px;
}

/*######################## HEADER ########################*/
#data_table th,
#data_table2 th {
  text-align: center;
  background-color: #eec17ee3;
}

/*######################## TABLE 2 ONLY ########################*/
#data_table2 td {
  white-space: nowrap;        /* ไม่ตัดบรรทัด */
  overflow: hidden;           /* ไม่ให้ล้น */
  text-overflow: ellipsis;    /* เกินแล้ว ... */
  padding: 6px;
}

/*######################## GROUP ROW ########################*/
.group {
  background: #eec17ee3;
  font-weight: bold;
  text-align: center;
  color: rgb(1, 43, 226);
  font-size: 18px;
}

/*######################## CELL ########################*/
.cell {
  display: block;
}

.bold {
  font-weight: bold;
}

/*######################## WRAPPER ########################*/
.box-limit {
  overflow: hidden;
}

.table-wrap {
  width: 99%;
  height: 99%;
  overflow: hidden;
}

/*######################## BUTTON ########################*/
.buttonPrint { 
  width: 150px; 
  background: linear-gradient(135deg, #02346db6, #005bd2);
  cursor: pointer;
}
.buttonAdd { 
  width: 150px; 
  background: linear-gradient(135deg, #6d2902b6, #d23c00);
  cursor: pointer;
}

.buttonLink { 
  width: 150px; 
  background: linear-gradient(135deg, #026d19b6, #00d21c);
  cursor: pointer;
}

/*
.buttonPrint { 
  width: 150px; 
  background: linear-gradient(135deg, #007bff, #0056d2);
}
*/

/*#### ซ่อนขีดเส้นใต้ link */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}