@charset "UTF-8";

/* Font 설정 */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Light.woff') format('woff');
  font-weight: 300;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
}

@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Bold.ttf') format('ttf');
  font-weight: 700;
}

/* 변수 설정 */
:root {
  /* color */
  --color-primary-green-100: #84b73f;
  --color-primary-green-200: #5e9b36;

  --color-primary-light-green-100: #eef5e5;

  --color-primary-yellow-100: #ffd438;
  --color-primary-yellow-200: #f57c00;

  --color-primary-orange-100: #ff9800;
  --color-primary-orange-200: #f57c00;

  --color-primary-sky-blue-100: #d3e4ff;
  --color-primary-sky-blue-200: #89aeff;
  --color-primary-sky-blue-300: #1d4ed8;

  --color-primary-blue-100: #3181ff;
  --color-primary-blue-200: #2563eb;
  --color-primary-blue-300: #1d4ed8;

  --color-primary-wood: #8b4513;
  --color-secondary-wood: #d2b48c;

  --color-secondary-navy: #2e343a;
  --color-secondary-green: #eef5e5;

  --color-black: #000000;
  --color-white: #ffffff;

  --color-text: #222222;
  --color-text-body: #666666;
  --color-text-sub: #999999;

  --color-disabled-bg: #e0e0e0;
  --color-disabled: #a5a5a5;

  --color-system-generic: #3181ff;
  --color-system-success: #2f9e44;
  --color-system-warning: #ffc805;
  --color-system-error: #e03131;
  --color-system-error-bg: #fff0f2;
  --color-system-point: #fa284d;

  --color-border-gray: #d7d7d7;
  --color-background-gray: #f0f0f0;

  /* border-radius */
  --border-radius-small: 6px;
  --border-radius-medium: 8px;
  --border-radius-large: 20px;
  --border-radius-circle: 50%;

  /* z-index */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-content: 10;
  --z-index-dropdown: 100;
  --z-index-modal: 1100;
  --z-index-tooltip: 9999;

  /* box-shadow */
  --box-shadow: 0 4px 14px rgba(218, 218, 218, 0.5);
}

/* 스크롤바 CSS */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e3e3e3;
  border-radius: var(--border-radius-medium);
  border: 3px solid var(--color-white);
}

::-webkit-scrollbar-thumb:hover {
  background-color: #ddd;
}

body {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  min-width: 1450px; /* 최소 너비 설정 */
  overflow-y: hidden; /* #sidebar-area, #content-area 각각 스크롤 되게 */
}

button {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

/* 공통 클래스 */
.flex {
  display: flex;
}

.pointer {
  cursor: pointer;
}

.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.ml10 {
  margin-left: 10px;
}

.mr10 {
  margin-right: 10px;
}

.mt30 {
  margin-top: 30px;
}

.mb30 {
  margin-bottom: 30px;
}

.ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

/* input 요소 */
div[contenteditable],
input,
select,
textarea {
  font-family: 'Pretendard', sans-serif;
  font-size: 14px;
  height: 40px;
  border: 1px solid var(--color-border-gray);
  background-color: var(--color-white);
  border-radius: var(--border-radius-small);
}

div[contenteditable]:focus,
input:focus,
select:focus,
textarea:focus {
  /* border-color: var(--color-primary-green-100); */
  border-color: var(--color-primary-blue-100);
  outline: none;
}

div[contenteditable]:hover,
input:hover,
select:hover,
textarea:hover {
  transition: border-color 0.2s ease;
  border-color: var(--color-primary-blue-100);
}

input {
  padding: 0 20px;
}

div[contenteditable] {
  padding: 11px 20px;
}

input:disabled,
select:disabled {
  /* background-color: var(--color-disabled-bg);
  color: var(--color-disabled); */
  cursor: default;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-sub);
}

input[type='date'] {
  width: 170px;
}

input[type='date']::-webkit-calendar-picker-indicator,
input[type='date']::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type='date']::-webkit-calendar-picker-indicator {
  display: block;
  opacity: 1;
  color: #9ca3af;
  background: url('../img/icon_day.png') no-repeat right center;
  width: 24px;
  height: 25px;
  cursor: pointer;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url('../img/icon_select_arrow.svg') no-repeat right 15px center var(--color-white);
  padding: 0 40px 0 20px;
  min-width: 150px;
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

select option {
  color: var(--color-text-sub);
}

textarea {
  height: auto;
  resize: none;
  min-height: 90px;
  padding: 10px;
}

/* =====
btn 버튼
=====*/

/* 기본 버튼 */
.basicBtn {
  height: 40px;
  padding: 0 30px;
  color: var(--color-black);
  background-color: var(--color-white);
  /* border: 1px solid var(--color-primary-green-100); */
  border: 1px solid var(--color-primary-blue-100);
  border-radius: var(--border-radius-medium);
  flex-shrink: 0; /* 텍스트 축소 금지 */
}

/* 비활성화 버튼 */
.disabledBtn {
  height: 40px;
  padding: 0 30px;
  color: var(--color-disable);
  background-color: var(--color-disabled-bg);
  border-radius: var(--border-radius-medium);
  flex-shrink: 0; /* 텍스트 축소 금지 */
  cursor: default;
}

/* 로그인, 비밀번호 버튼 */
.loginBtn,
.passwordBtn {
  width: 100%;
  height: 60px;
  font-size: 24px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--color-white);
  background-color: var(--color-primary-green-100);
  border-radius: var(--border-radius-small);
}

/* 등록, 저장 버튼*/
.registerBtn,
.saveBtn {
  height: 40px;
  padding: 0 30px;
  color: var(--color-white);
  /* background-color: var(--color-primary-green-100); */
  background-color: var(--color-primary-blue-100);
  border-radius: var(--border-radius-medium);
  flex-shrink: 0; /* 텍스트 축소 금지 */
}

/* 승인, 반려, 취소, 탈퇴, 삭제, 인쇄, 파일업로드, 검색 버튼 */
.commitBtn,
.rejectBtn,
.cancelBtn,
.quitBtn,
.delectBtn,
.deleteBtnSm,
.printBtn,
.fileuploadBtn,
.searchBtn {
  height: 40px;
  padding: 0 30px;
  color: var(--color-black);
  background-color: var(--color-white);
  /* border: 1px solid var(--color-primary-green-100); */
  border: 1px solid var(--color-primary-blue-100);
  border-radius: var(--border-radius-medium);
  flex-shrink: 0; /* 텍스트 축소 금지 */
}

/* 삭제 버튼 */
.delectBtn {
  padding: 0 20px;
}

.deleteBtnSm {
  height: 30px;
  margin: 0;
  padding: 0 15px;
  font-size: 13px;
}

/* 검색 버튼 */
.searchBtn {
  margin-left: 10px;
}

/* 탈퇴 버튼 */
.withdrawBtn {
  height: 40px;
  padding: 0 30px;
  color: var(--color-white);
  background-color: var(--color-system-point);
  border: 1px solid var(--color-system-point);
  border-radius: var(--border-radius-medium);
  flex-shrink: 0; /* 텍스트 축소 금지 */
}

/* btn box (버튼 2개 이상일 때 사용) */
.btn_flex {
  display: flex;
  align-items: center;
}

.btn_flex_end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
}

/* ======
section 
======*/

/**
  #sidebar-area(자식)와 #content-area(자식)를 #layout-container(부모)가 flex로 감싼 구조!
  #layout-container > #sidebar-area, #layout-container > #content-area 유지!
  (자식 형제에 새로운 구조 추가나, 자식을 한번 더 태그로 감쌀 시 레이아웃 깨짐 발생)
**/

/* 레이아웃 컨테이너 */
#layout-container {
  display: flex;
  background-color: var(--color-background-gray);
}

/* 테이블 공통 */
.list-box table {
  margin-top: 20px;
  width: 100%; /* 테이블을 부모 요소에 맞게 확장 */
  table-layout: fixed; /* 셀의 너비를 고정하여 넘침 방지 */
  border-collapse: collapse; /* 테두리 겹침 방지 */
}

.list-box th,
.list-box td {
  text-align: center;
  padding: 16px 8px;
}

.list-box th {
  color: #1c4004;
  font-weight: 600;
  font-size: 14px;
  /* background-color: var(--color-secondary-green); */
  background-color: var(--color-background-gray);
  /* border-bottom: 2px solid var(--color-primary-green-100); */
  border-bottom: 2px solid var(--color-primary-blue-100);
  white-space: nowrap; /* 텍스트가 줄바꿈되지 않도록 */
  min-width: 50px; /* 최소 너비 설정 */
  width: auto; /* 기본 너비 자동 설정 */
  overflow: visible; /* 내용이 넘칠 때 보이도록 */
}

/* 첫 번째행 [NO] 고정값 */
.list-box th:first-child {
  min-width: 80px; /* 첫 번째 열의 최소 너비 설정 */
  width: 80px; /* 첫 번째 열의 고정 너비 설정 */
}

.list-box td {
  border-bottom: 1px solid var(--color-disabled-bg);
  white-space: normal; /* 텍스트가 줄바꿈되지 않도록 */
  min-width: 50px; /* 최소 너비 설정 */
  width: auto; /* 기본 너비 자동 설정 */
  overflow: visible; /* 내용이 넘칠 때 보이도록 */
  word-break: keep-all;
}

.list-box tr:last-child {
  /* border-bottom: 2px solid var(--color-primary-green-100); */
  border-bottom: 2px solid var(--color-primary-blue-100);
}

/* 한 줄 선택 hover값 */
.list-box tr:hover {
  /* background-color: var(--color-secondary-green); */
  background-color: var(--color-primary-sky-blue-100);
  transition: background-color 0.2s ease;
}

/* 테이블 선택 포인터 */
.list-box tbody tr:hover {
  cursor: pointer;
}

/* ==========
pagination
==========*/
.pagination {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 20px;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-disabled-bg);
  border-radius: var(--border-radius-small);
  cursor: pointer;
}

.page-link:focus,
.page-link:hover {
  /* border-color: var(--color-primary-green-100); */
  border-color: var(--color-primary-blue-100);
  transition: border-color 0.2s ease;
}

.page-link.link-on {
  font-weight: 700;
  /* border-color: var(--color-primary-green-100); */
  /* background-color: var(--color-primary-green-100); */
  border-color: var(--color-primary-blue-100);
  background-color: var(--color-primary-blue-100);
  color: var(--color-white);
}

/* ==========
titleBox
==========*/
/* 상단 유저 정보 */
.hd_util_bar {
  position: relative;
  display: flex;
  align-items: center;
  height: 60px;
  z-index: var(--z-index-default);
}

.hd_util_bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30px;
  width: 100vw;
  height: 100%;
  min-width: 1450px;
  background: var(--color-white);
  border-bottom: 1px solid #ddd;
  z-index: var(--z-index-back);
}

.user_info {
  position: relative;
  margin-left: auto;
}

.user_info .my_profile {
  display: flex;
  align-items: center;
}

.user_info .my_profile .name {
  font-size: 16px;
}

.user_info .my_profile .name_suffix {
  font-size: 12px;
  color: var(--color-text-sub);
  margin-top: 1px;
  margin-left: 3px;
}

.user_info .my_menu_btn {
  width: 36px;
  height: 36px;
  margin-left: 20px;
  /* border: 1px solid var(--color-primary-green-100); */
  border: 1px solid var(--color-primary-blue-100);
  border-radius: var(--border-radius-circle);
  transition: 0.3s;
}

.user_info .my_menu_btn.on {
  background-color: var(--color-secondary-green);
}

.user_info .my_menu_btn img {
  filter: invert(0) brightness(0);
}

.user_info .my_menu_box {
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: max-content;
  min-width: 150px;
  max-width: 220px;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: var(--border-radius-small);
  background: var(--color-white);
  box-shadow: var(--box-shadow);
  z-index: var(--z-index-content);
}

.user_info .my_menu_box li {
  padding: 10px 0;
  word-break: keep-all;
}

.user_info .my_menu_box li.team {
  border-bottom: 1px solid var(--color-background-gray);
  padding-bottom: 12px;
}

.user_info .my_menu_box li.team .pos_span {
  font-size: 12px;
  /* color: var(--color-primary-green-100); */
  color: var(--color-primary-blue-100);
}

.user_info .my_menu_box li.team .pos_span::before {
  content: '/';
  font-size: 16px;
  margin-right: 3px;
}

.user_info .my_menu_box li.logout a {
  display: flex;
  align-items: center;

  width: fit-content;

  column-gap: 5px;
}

.user_info .my_menu_box li.logout img {
  width: 17px;
}

/* 각 페이지의 제목박스 */
.titleBox {
  border-bottom: 2px solid #d9d9d9;
  margin-bottom: 30px;
  display: flex;
  padding: 20px 0;
}

/* 뒤로가기 버튼 */
.titleBox .backBtn {
  margin-right: 30px;
  cursor: default;
}

.titleBox .backBtn.on {
  cursor: pointer;
}

/* 페이지 제목 박스 */
.titleBox .title_textBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

/* 왼쪽 상단 검정 글씨*/
.titleBox .title_big {
  font-weight: 500;
  font-size: 28px;
}

/* 오른쪽 상단 초록 글씨*/
.titleBox .title_small {
  /* color: var(--color-primary-green-100); */
  color: var(--color-primary-blue-100);
  font-weight: 400;
  font-size: 14px;
}

/* 프로젝트 이름 표시 - 작은 글자 */
.titleBox .title_small_gray {
  display: inline-block;
  color: var(--color-text-sub);
  font-weight: 400;
  font-size: 14px;
}

/* 서브 타이틀 */
.sub_title_md {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.sub_title_sm {
  font-size: 16px;
}

/* ==========
titleBox - 프로젝트 정보 포함
==========*/

/* 프로젝트 정보와 함께 있는 메인 글자 */
.titleBox .title_main {
  font-weight: 500;
  font-size: 28px;
}

/* 왼쪽 상단 프로젝트 이름 박스 */
.title_leftBox_top {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

/* 프로젝트 종류 표시 */
.title_leftBox_top_info {
  /*background-color: #7966ec;*/
  border-radius: var(--border-radius-large);
  padding: 3px 15px;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  margin-right: 8px;
}

/* 프로젝트 큰 제목*/
.title_leftBox_top_title {
  font-size: 14px;
  font-weight: 500;
}

/* 기본) 파일 업로드 버튼 -  숨기기 */
.fileuploadBtn {
  /*display: none;*/
}

/* 커스텀 스타일의 라벨 버튼 */
.fileuploadLabel {
  width: 120px;
  height: 16px;
  display: inline-block;
  background-color: var(--color-white);
  padding: 11px 10px;
  border-radius: var(--border-radius-medium);
  color: var(--color-black);
  border: 1px solid var(--color-primary-green-100);
  flex-shrink: 0;
  transition: background-color 0.3s ease;
}

/* 파일 목록 스타일 */
.fileList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.fileList li {
  position: relative;
  width: calc(33.3333% - 7px);
  padding: 10px 35px 10px 20px;
  background-color: #ededed;
  border-radius: var(--border-radius-large);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fileList li .selectorBtn {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

/* 특정 요소에서 호버 효과 제거 */
.no-hover {
  background-color: transparent; /* 기본 배경색으로 설정 */
  border-radius: 0; /* 기본 테두리 모양으로 설정 */
  pointer-events: none;
}

/* 테이블 헤더 - 플래그 div */
.table-last-header {
  position: relative;
}

.table-first-header-year {
  position: absolute;
  left: 0;
  bottom: 100%;
  padding: 3px 5px;
  color: var(--color-white);
  background-color: var(--color-primary-green-100);
}

.table-last-header-year {
  right: 0;
  bottom: 100%;
  padding: 3px 5px;
  color: var(--color-white);
  background-color: var(--color-primary-green-100);
}

.table-last-header::after {
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-primary-green-100);
}

.table-first-td-year {
  position: relative;
}

.table-first-td-year::after {
  content: '';
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-primary-green-100);
}

.table-total-tr {
  border-top: 2px solid var(--color-primary-green-100);
}

/* 읽기용 input 스타일 (span, div 등 사용시) */
.readonly_field {
  display: block;
  line-height: 40px;
  padding: 0 20px;
  border: 1px solid var(--color-border-gray);
  border-radius: var(--border-radius-small);
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled);
}

/* 카테고리 목록 스타일 */
.word_auto_root {
  position: relative;
}

.word_auto_root .check_icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.word_auto_wrap {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  max-height: 120px;
  background-color: white;

  overflow-y: auto;

  z-index: 10;

  box-shadow: var(--box-shadow);
}

.word_auto_wrap > div {
  padding: 10px 20px;
}

.word_auto_wrap > div:hover {
  background-color: #f0f0f0;
}

.word_auto_wrap .check_icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.word_auto_item {
  position: relative;
}

/* 로그 */

.log_table {
  display: flex;
}

.log_table > div {
  width: 100%;

  padding: 3px 4px;
}

.log_title_div {
  width: 100%;

  display: flex;
  justify-content: space-between;
}

.log_title_wrap {
  width: 72px;
  height: 50px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 10px;
  padding-bottom: 8px;

  /* background-color: var(--color-secondary-green); */
  background-color: var(--color-background-gray);

  /* border-bottom: 2px solid var(--color-primary-green-100); */
  border-bottom: 2px solid var(--color-primary-blue-100);

  border-top-left-radius: var(--border-radius-medium);
  border-top-right-radius: var(--border-radius-medium);
}

.log_title {
  color: black;
  font-size: 15px;
  font-weight: 500;
}

.log_div {
  height: 500px;

  padding: 30px;

  border: 1px solid var(--color-border-gray);

  box-shadow: var(--box-shadow);

  overflow-y: auto;
}

.log_div > p {
  margin: 8px 0;
}

.log_p_date {
  display: inline-block;
  width: 150px;
  text-align: center;
}

.log_p_date {
  color: var(--color-primary-blue-200);
}

.log_p_user {
  color: var(--color-primary-green-200);
}

.log_serial_action {
  color: var(--color-primary-green-200);
}

.log_expt_action {
  color: var(--color-system-error);
}

.log_done_action {
  color: var(--color-primary-green-200);
  font-weight: 500;
}

/* 물품 상태 태그 */

.status_span {
  position: relative;
  padding: 5px 8px 5px 22px;
  font-size: 12px;
  border-radius: 12px;
  cursor: pointer;
}

.status_span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.rgst_span {
  background-color: var(--color-background-gray);
  border: 1px solid gray;
}

.rgst_span::before {
  background-color: white;
  border: 1px solid gray;
}

.expt_span {
  background-color: var(--color-system-error-bg);
  border: 1px solid var(--color-system-error);
}

.expt_span::before {
  background-color: white;
  border: 1px solid var(--color-system-error);
}

.expt_arrow_span {
  margin: 0 4px;
}

.inbding_span {
  background-color: var(--color-secondary-green);
  border: 1px solid var(--color-primary-green-100);
}

.inbding_span::before {
  background-color: white;
  border: 1px solid var(--color-primary-green-100);
}

.inbd_span {
  background-color: var(--color-secondary-green);
  border: 1px solid var(--color-primary-green-200);
}

.inbd_span::before {
  background-color: white;
  border: 1px solid var(--color-primary-green-200);
}

.insp_req_span {
  background-color: var(--color-background-gray);
  border: 1px solid var(--color-primary-orange-100);
}

.insp_req_span::before {
  background-color: white;
  border: 1px solid var(--color-primary-orange-100);
}

.insp_span {
  background-color: var(--color-background-gray);
  border: 1px solid var(--color-primary-orange-200);
}

.insp_span::before {
  background-color: white;
  border: 1px solid var(--color-primary-orange-200);
}

.store_span {
  background-color: var(--color-background-gray);
  border: 1px solid var(--color-system-generic);
}

.store_span::before {
  background-color: var(--color-system-generic);
  border: 1px solid var(--color-system-generic);
}

.defective_span {
  font-size: 10px;
  background-color: var(--color-system-error-bg);
  border: 1px solid var(--color-system-error);
}

.defective_span::before {
  background-color: var(--color-system-error);
  border: 1px solid var(--color-system-error);
}

.assemble_span {
  background-color: var(--color-background-gray);
  border: 1px solid var(--color-primary-wood);
}

.assemble_span::before {
  background-color: white;
  border: 1px solid var(--color-primary-wood);
}

.assemble_material_span {
  background-color: var(--color-background-gray);
  border: 1px solid var(--color-primary-wood);
}

.assemble_material_span::before {
  background-color: white;
  border: 1px solid var(--color-primary-wood);
}

.outbound_span {
  background-color: var(--color-background-gray);
  border: 1px solid var(--color-primary-yellow-100);
}

.outbound_span::before {
  background-color: var(--color-primary-yellow-100);
  border: 1px solid var(--color-primary-yellow-100);
}

/*───SCROLL────────────────────────*/

.scrollable_table {
  display: block;
}

.scrollable_table tbody {
  max-height: 500px;

  display: block;

  /* border-bottom: 2px solid var(--color-primary-green-100); */
  border-bottom: 2px solid var(--color-primary-blue-100);

  overflow-y: scroll;
}

.scrollable_table tbody tr {
  /* height: 50px; */

  display: flex;
}

.scrollable_table tbody tr td {
  height: 40px;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0;
}

.scrollable_table tbody tr:last-child {
  border-bottom: none;
}

.scrollable_table .empty_tr .empty_td {
  width: 100%;
}

/*───//SCROLL──────────────────────*/