.rowArea .rowAreaTree {
  display: flex;
  width: 33.33%;
  padding-right: 10px;
  margin-top: 10px;
}

.rowArea .rowAreaTree > label:not([for="searchEndDate"]) {
  width: 20%;
  align-content: center;
  font-weight: bold;
}

.rowArea .rowAreaTwo {
  display: flex;
  width: 50%;
  padding-right: 10px;
  margin-top: 10px;
}

.rowArea > label:not([for="searchEndDate"]) {
  width: 20%;
  align-content: center;
  font-weight: bold;
}

.rowArea label[for="searchEndDate"] {
  align-content: center;
  margin: 0 10px;
  font-weight: bold;
  width: 10px ;
  margin-top: 8px;
}

.rowArea label[for="searchStartDate"] {
  margin-top: 18px;
}

.rowArea .selectArea {
  width: 50%;
}

#detailed-search { background-color: rgba(255, 255, 255, 0.9); border: 1px solid #ccc; margin-top: 10px; padding: 10px; width: 100%; }
#detailed-search {
  display: block;
}

#searchTable { margin-top: 10px; width: 80%; margin-left: auto; margin-right: auto; font-size: 13px; overflow: auto; }

#costOilAppListForm {
  height: 60vh;
}

#costOilApp { width: 2000px;}
#costOilApp > thead,
#searchTable > thead { 
  background-color: hsl(215, 30%, 74%); 
  color: white; 
  position: sticky;
  top:  0;
  z-index: 100;
}

#costOilApp > thead > tr > th,
#searchTable > thead > tr > th { text-align: center; font-weight: bold;}

#costOilApp > tbody > tr.active { background-color: #f8f8f8; }
#costOilApp > tbody > tr { cursor: default; background-color: none; }
#costOilApp > tbody > tr:hover { cursor: pointer; background-color: #f8f8f8;}

#costOilApp th:nth-child(1){  /* 선택  */
  width: 20px;
  text-align: center;
  vertical-align: middle;
  position: sticky;
  top: 0;
  left: 0;
  background: hsl(215, 30%, 74%);
  z-index: 3;
}
#costOilApp td:nth-child(1) {  /* 선택  */
  width: 20px;
  text-align: center;
  vertical-align: middle;
  position: sticky;
  left: 0;
  background: #fff;
}

#costOilApp th:nth-child(2), /* 부서  */
#costOilApp td:nth-child(2) {
  width: 65px;
  text-align: center;
  vertical-align: middle;
}

#costOilApp td:nth-child(3),
#costOilApp th:nth-child(3), /* 사번  */
#costOilApp td:nth-child(4),  
#costOilApp th:nth-child(4),  /*사원명 */
#costOilApp th:nth-child(5), 
#costOilApp td:nth-child(5) { /* 유종  */
  width: 40px;
  text-align: center;
  vertical-align: middle;
} 

#costOilApp th:nth-child(6), 
#costOilApp td:nth-child(6), /* 시작일  */
#costOilApp th:nth-child(7), 
#costOilApp td:nth-child(7),  /* 종료일  */
#costOilApp th:nth-child(8), /* 시작km  */
#costOilApp th:nth-child(9), /* 종료km  */
#costOilApp th:nth-child(10),  /* 운행km  */
#costOilApp th:nth-child(11), 
#costOilApp td:nth-child(11),  /* 승인일  */
#costOilApp th:nth-child(13),  /* 승인액  */
#costOilApp th:nth-child(15),  /* 10km단가  */
#costOilApp th:nth-child(16),  /* 감가비  */
#costOilApp th:nth-child(17){  /* 적용단가  */
  width: 20px;
  text-align: center;
  vertical-align: middle;
} 

#costOilApp th:nth-child(14),  
#costOilApp td:nth-child(14), /* 진행상태  */
#costOilApp th:nth-child(18), 
#costOilApp td:nth-child(18), /* 증빙여부  */
#costOilApp th:nth-child(19), 
#costOilApp td:nth-child(19),  /* 지급여부  */
#costOilApp th:nth-child(20), 
#costOilApp th:nth-child(21) {    
  width: 40px;
  text-align: center;
  vertical-align: middle;
} 

#costOilApp td:nth-child(8), /* 시작km  */
#costOilApp td:nth-child(9), /* 종료km  */
#costOilApp td:nth-child(10),  /* 운행km  */
#costOilApp td:nth-child(13),  /* 승인액  */
#costOilApp td:nth-child(15),  /* 10km단가  */
#costOilApp td:nth-child(16),  /* 감가비  */
#costOilApp td:nth-child(17) {  /* 적용단가  */
  width: 20px;
  text-align: right;
  vertical-align: middle;
}  

#costOilApp th:nth-child(12),
#costOilApp td:nth-child(12) {  /* 신청액  */
  display: none;
}

#costOilApp td:nth-child(20) input[type="number"] {  /* 차감  */
  text-align: right;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #ccc;
  box-sizing: border-box;
  max-width: 100% !important;
} 

#costOilApp td:nth-child(20) input[readonly] {
  background-color: transparent !important; /* 배경 회색 제거 */
  border: none;                             /* 테두리 제거 (필요 시) */
  color: #000;                               /* 글씨는 검정 유지 */
  cursor: default;                          /* 커서도 기본 화살표로 */
  pointer-events: none;                     /* 포커스 막기 (선택적) */
}

#costOilApp td:nth-child(21) input[type="text"] {  /* 사유  */
  text-align: left;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #ccc;
  box-sizing: border-box;
  max-width: 100% !important;
} 

#costOilApp td:nth-child(20), 
#costOilApp td:nth-child(21)  { 
  width: 60px;
  text-align: center;
  vertical-align: middle;
}