/****** ปุ่ม *******/
.main-ctn .btn{
  border: none;
  border: 1px solid black;
  border-radius: 3px;
  color: white!important;
  line-height: 1.9rem;
  padding: 0 7px;
}
.main-ctn .btn[disabled]{
  color: lightblue!important;
  background-color: #484848!important;
}



/* toolbar */
#toolbarCtn label{  line-height: 1.9rem; }
#toolbarCtn input[type=date]{ border: 1px solid black; }
#toolbarCtn input[type=search]{ outline: none; }
/* toolbar */
#toolbarCtn{
  padding: 10px;
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 0;
}
/* ทำให้เรียงกันเหมือน flex แต่ใช้ grid เพราะกำหนดตำแหน่งเป็น block ได้ */
#toolbarCtn .toolbar-1, 
#toolbarCtn .toolbar-2, 
#toolbarCtn .toolbar-3, 
#toolbarCtn .toolbar-4{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 0;
}
#toolbarCtn .toolbar-1{ grid-area: 1/1/2/4; justify-self:start;} 
#toolbarCtn .toolbar-2 {grid-area: 1/4/2/7; justify-self:end;}
#toolbarCtn .toolbar-3{ grid-area: 2/1/3/6; justify-self:start; margin-top: 5px; } 
#toolbarCtn .toolbar-4 {grid-area: 2/6/3/7; justify-self:end; margin-top:  5px; }

#toolbarCtn .toolbar-3 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
#toolbarCtn .toolbar-3 input, 
#toolbarCtn .toolbar-3 select{ height: 100%!important; margin-right: 7px;  } 
#toolbarCtn .toolbar-3 label{ padding-right: 3px; text-align: right; } 


/*** Page Title ***/
.tableRowHeader{ 
  padding: 7px 0;
  border-top: 1px dotted white;
  border-bottom: 1px dotted white;
  text-align: center;
  line-height: 1.35rem;
  background-color: var(--main-dark-color);
}


/**************** จอขนาดกลาง ****************/
@media screen and (max-width: 768px) {
  body{ font-size: 13px; }  

  .main-ctn{ grid-template-columns: 100%;}  
  .main-ctn .main-left{padding:3px}
  h3{line-height: 2rem;}  

  #toolbarCtn{ 
    width: 100%;
    padding: 3px;
  }
  #toolbarCtn input, 
  #toolbarCtn select{
    font-size: 0.9rem;
  }
  #toolbarCtn .toolbar-3 {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 3px;
  }

  /* ปุ่ม reset */
  #toolbarCtn .btn.bg-reset {
    max-height: 2rem!important;
  }
}

/**************** จอขนาดเล็ก ****************/
@media screen and (max-width: 480px) {
  body{ font-size: 11px;}

  #toolbarCtn label{  line-height: 1.9rem; }
  #toolbarCtn input[type=date]{ font-size: 0.9rem; }
}