/* 데이터테이블 라이브러리 색상 수정 */


:root {
  --dt-row-selected: 13, 110, 253;
  --dt-row-selected-text: rgba(78, 89, 104, 1);
  --dt-row-selected-link: 9, 10, 11;
  --dt-row-stripe: 244, 245, 248 !important; /* F4F5F8 */
  --dt-row-hover: 15, 148, 254 !important; /* F4F5F8 */
  --dt-column-ordering: 244, 245, 248 !important; /* F4F5F8 */
  --dt-html-background: white;
}


/* 기본 스타일 */
:root {
  --cir-white: rgba(255, 255, 255, 1); /* 색상코드: #FFFFFF */
  --clr-green: rgba(0, 178, 156, 1); /* 색상 코드: #00B29C */
  --clr-red: rgba(243, 79, 92, 1); /* 색상 코드: #F34F5C */

  --clr-fontFamily: 'Nunito', sans-serif;
  --clr-fontT03: rgba(78, 89, 104, 0.3); /* 색상 코드: #4E5968 */
  --clr-fontT07: rgba(78, 89, 104, 0.7); /* 색상 코드: #4E5968 */
  --clr-fontT10: rgba(78, 89, 104, 1); /* 색상 코드: #4E5968 */

  --clr-background00: transparent;
  --clr-background05: rgba(224, 227, 235, 0.5); /* 색상 코드: #E0E3EB */
  --clr-background10: rgba(224, 227, 235, 1); /* 색상 코드: #E0E3EB */

  --clr-tabBackground05: rgba(244, 245, 248, 0.5);/* 색상 코드: #F4F5F8 */
  --clr-tabBackground10: rgba(244, 245, 248, 1);/* 색상 코드: #F4F5F8 */

  --clr-border00: 0.5px solid rgba(224, 227, 235, 0); /* 색상 코드: #E9ECF0  */
  --clr-border08: 1px solid rgba(224, 227, 235, 0.8); /* 색상 코드: #E9ECF0  */

  --clr-run: rgba(56, 143, 255, 1); /* 색상 코드: #388FFF */
  --clr-runHover02: rgba(15, 148, 254, 0.2); /* 색상 코드: #388FFF */
  --clr-runHover05: rgba(56, 143, 255, 0.5); /* 색상 코드: #388FFF */
  --clr-borderHover02: 0.5px solid rgba(56, 143, 255, 0.2);
  --clr-whiteButtonHover: rgba(78, 89, 104, 0.5);

  --clr-outline: 3px solid rgba(56, 143, 255, 0.2);

  --cir-footer: rgba(244, 245, 248, 1);/* 색상 코드: #F4F5F8 */

  --clr-shadow: 0px 4px 20px rgba(78, 89, 104, 0.20); /* 그림자 효과 */
  --clr-shadowToggle: 0 1px 3px rgba(0, 0, 0, 0.08); /* 활성화된 버튼에 그림자 추가 */

  --clr-table-column: rgba(56, 143, 255, 0.05);  /* 색상 코드: #F3F6FF */
}

table.dataTable thead th {
	background-color: #F4F5F8; /* 연한 회색 */
	color: #313131;              /* 검은 글씨 */
	font-weight: normal;        /* 굵게 */
	text-align: center;       /* 가운데 정렬 */
	font-size:12px;
	border: 1px solid #dee2e6; /* 테두리 추가 */
}

/* 모든 테이블에 적용 -------------------------------------------------------------------------------*/
table {
  width: 100%; /* 테이블의 너비를 100%로 설정 */
  font-size: 13px;
}

/*    위에는 새로 추가               */

table.display {
  width: 100%; /* 테이블 너비 100% */
  margin: 0 auto; /* 중앙 정렬 */
  border-collapse: collapse; /* 테두리 겹침 제거 */
}

/* 테이블 가로 전체 차지 */
div.dt-container div.dt-layout-full {
  width: 100%;
}

@media screen and (max-width: 767px) {
  div.dt-container div.dt-layout-start > *:not(:last-child) {
    margin-right: 0;
  }
  div.dt-container div.dt-layout-end > *:not(:first-child) {
    margin-left: 0;
  }
}

/* 모든 정렬 아이콘 숨기기 sorting icon */
table.dataTable thead > tr > th span.dt-column-order,
table.dataTable thead > tr > td span.dt-column-order {
  display: none; /* 정렬 아이콘 숨기기 */
}

/* 마우스 올릴 때 보이기 */
table.dataTable thead > tr > th:hover span.dt-column-order,
table.dataTable thead > tr > td:hover span.dt-column-order {
  display: inline; /* 마우스 호버 시 보이기 */
}

/* Sorting 아이콘 위치 */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order {
  position: absolute; /* 절대 위치 설정 */
  right: 10px;  /* 헤더 오른쪽에서 5px 떨어진 위치 */
  top: 50%;    /* 상단에서 50% */
  transform: translateY(-50%); /* 수직 중앙 정렬 */
  width: 0;   /* 너비 설정 */
  color: var(--clr-fontT07);
}


/* 테이블 헤더 스타일 -------------------------------------------------------------------------------*/
table.display thead th {
  color: var(--clr-font);
  background-color: var(--clr-tabBackground10);

  border: var(--clr-border08);

  cursor: pointer;
  white-space: nowrap;

  font-size: 12px;
  font-weight: 400 !important;
  color: var(--clr-fontT07);

  padding: 3px 8px !important;
}

/* 헤더 Bottom라인 제거 */
table.dataTable > thead > tr > th {
  border-bottom: var(--clr-border08) !important;
}

table.dataTable > thead > tr > th:hover {
  border-bottom: 1px solid rgba(56, 143, 255, 0.5) !important; /* 색상 코드: #388FFF */
}

/* 헤더 중앙 정렬 */
table.dataTable > thead > tr > th {
  text-align: center !important;
}

table.dataTable > thead > tr > th:first-child {
  text-align: left;
  padding-left: 18px;
  border-left: none;
}

table.dataTable > thead > tr > th:last-child {
  padding-right: 18px;
  align-items: right;
  border-right: none;
}

/* 헤더 호버 */
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
  background-color: var(--clr-whiteButtonHober);
  color: var(--clr-fontT10);
  outline: none !important;
}


/* 테이블 바디 스타일 -------------------------------------------------------------------------------*/
table.display tbody td {
  width: auto !important;
  padding: 5px !important;

  white-space: nowrap;

  border-bottom: var(--clr-border08);
  background-color: var(--cir-white);
}

table.dataTable > tbody > tr > td:first-child {
  padding-left: 18px !important;
}

#tab-content-1 table.dataTable > tbody > tr > td:last-child {
  padding-right: 18px !important;
}

#tab-content-4a table.dataTable > tbody > tr > td:last-child {
  padding-right: 0px; /* padding 지정 제거 */
}

table.dataTable > tbody > tr:first-child {
  border-top: var(--clr-border08);
}
table.dataTable > tbody > tr:last-child {
  border-bottom: var(--clr-border08);
}

/* 테이블 셀 상단 라인 */
table.dataTable.row-border > tbody > tr > *, table.dataTable.display > tbody > tr > * {
  border-top: var(--clr-border08);
}

/* 테이블 바디 control-panel */
div.dt-container div.dt-layout-row {
  padding-top: 0px !important;
  border: none;
}

div.dt-container div.dt-info {
  display: none;
}

/* 1. 굵은 바깥 테두리 제거 */
div.dt-scroll-body {
  border-bottom: none !important;
}






/* 테이블 스크롤바 스타일 -------------------------------------------------------------------------------*/
/* 크롬, 엣지, 사파리용 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: var(--cir-white);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(220, 222, 225, 1);
  opacity: 0.1; /* 기본 투명도 */
  transition: opacity 0.3s; /* 부드러운 전환 효과 */
  border: 2px solid #FFFFFF;
}

/* 셀 호버 */
table.dataTable > tbody > tr > td:hover {
  background-color: rgba(56, 143, 255, 0.08) !important;
}

/* 행 호버 */
table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(56, 143, 255, 0.06) !important;
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha));
  z-index: 100;
}





/* Control feature layout -------------------------------------------------------------------------------*/
div.dt-container {
  position: relative;
  clear: both;
  margin: 0 !important;
}

/* 보유 서치 */
div.dt-container .dt-search input {
  border: var(--clr-border08) !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  background-color: var(--cir-white) !important;
  color: inherit;
  margin: 5px !important;
  font-size: 14px !important;

  width: 80px !important;
}

/* Search id 숨기기 */
.dt-search label {
  display: none; /* 레이블 숨기기 */

}

div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
  justify-content: flex-start !important;
  margin-left: 18px !important;
}

#tab-content-1 div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end,
#tab-content-4a div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
  display: none;
}


div.dt-container div.dt-layout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0 !important;
}



/* 셀 정렬 스타일 공통 -------------------------------------------------------------------------------*/
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
  text-align: center;
}

/* 숫자, 텍스트 오른쪽 정렬 */
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: right;
}

table.dataTable > thead > tr > th:first-child,
table.dataTable > tbody > tr > td:first-child {
  text-align: left;
}


/* 셀 정렬 스타일 지정 -------------------------------------------------------------------------------*/
/* container c-1 head hidden */
#accountTable table.dataTable > thead > tr > th {
  display: none;
}

/* container c-1 last child 오른쪽 정렬 */
#tab-content-1 table.dataTable > tbody > tr > td:last-child {
  text-align: right;
}

/* container c-4 last child 오른쪽 정렬 */
#tab-content-4a table.dataTable > thead > tr > th:last-child {
  text-align: right;
}