:root {
  --fs-base: 1rem;
}

html { font-size: var(--fs-base); }

/* ===========================
 * 공통 컨테이너 및 유틸리티
 * =========================== */
.custom-container {
  width: 80%;
  margin: 0 auto;
  background: #ffffff;
}

.top-container,
.bottom-container {
  margin-top: 0.625rem;
  margin-bottom: 24px;
}

.bottom-container {
  margin-top: 24px;
}

.text-center { text-align: center; }
.text-right  { text-align: right;  }
.text-left   { text-align: left;   }

/* ===========================
 * 표 공통 스타일
 * =========================== */
.top-container-table,
.bottom-container-table {
  width: 100%;
  overflow-x: auto;
}

.top-container-table {
  display: flex;
}

.top-container-table table,
.bottom-container-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
  margin: 0;
}

.top-container-table th,
.top-container-table td,
.bottom-container-table th,
.bottom-container-table td {
  border: 1px solid #1f2937;
  padding: 8px 10px;
  box-sizing: border-box;
  vertical-align: middle;
  white-space: nowrap;
}

/* ===========================
 * 1. 상단 인적사항 표
 * =========================== */
.top-container-table thead tr:first-child th,
.top-container-table thead tr:last-child th {
  background: #153765;
  color: #ffffff;
  text-align: center;
  font-weight: 600;
}

.top-container-table tbody td {
  background: #ffffff;
  text-align: center;
}

/* ===========================
 * 2. 하단 MPS 표
 * =========================== */
.bottom-container-table {
  margin-top: 8px;
}

.bottom-container-table thead tr:first-child th {
  background: #e4edf8;
  color: #111827;
  text-align: center;
  font-weight: 700;
}

.bottom-container-table thead tr:nth-child(2) th {
  background: #f4f6fb;
  color: #111827;
  text-align: center;
  font-weight: 600;
}

.bottom-container-table tbody td {
  background: #ffffff;
  vertical-align: middle;
  text-align: center;
}

.bottom-container-table tbody td:nth-child(2) {
  text-align: left !important;
}

.bottom-container-table tfoot tr td {
  background: #e4edf8;
  font-weight: 700;
  text-align: center;
}

.bottom-container-table tfoot tr td:nth-child(7) {
  text-align: center;
}

/* ===========================
 * 버튼/셀 내부 컨트롤
 * =========================== */
.bottom-container-table .btn-proof {
  display: inline-block;
  min-width: 60px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #153765;
  background: #ffffff;
  color: #153765;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}

.bottom-container-table select,
.bottom-container-table input[type="text"],
.bottom-container-table input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 13px;
}

/* ===========================
 * 셀렉트박스/직원 선택
 * =========================== */
.select-employee-container {
  border: 1px solid #000;
  border-right: none;
  padding: 8px 12px;
  display: inline-block;
  align-content: center;
}

.select-employee {
  background: #fff;
  color: #153765;
  border: 2px solid #153765;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
}

.select-employee:hover {
  background: #153765;
  color: #fff;
}

/* ===========================
 * 가중치 변경사유 셀/버튼
 * =========================== */
.bottom-container-table .wt-reason-cell {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
}

.bottom-container-table .wt-reason-summary {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
}

.bottom-container-table .btn-wt-reason {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 4px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid #153765;
  background: #ffffff;
  color: #153765;
  cursor: pointer;
  transition: all .15s ease-in-out;
  line-height: 1;
}

.bottom-container-table .btn-wt-reason--edit::before {
  content: "✏️";
  font-size: 12px;
}

.bottom-container-table .btn-wt-reason--view::before {
  content: none !important;
}

.bottom-container-table .btn-wt-reason:hover {
  background: #153765;
  color: #ffffff;
}

.bottom-container-table .btn-wt-reason:active {
  transform: scale(0.98);
}

.bottom-container-table .btn-wt-reason.is-hidden {
  display: none;
}

/* ===========================
 * 미션 링크
 * =========================== */
.mission-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #153765;
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: transparent;
  padding: 0;
}

.mission-link__icon {
  display: inline-block;
  font-size: 13px;
}

.mission-link__text {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: black;
}

.mission-link:hover {
  background-color: #e4edf8;
  color: #153765;
  border-radius: 4px;
}

.mission-link:active {
  color: #111827;
}

/* ===========================
 * 확정 가중치 인풋
 * =========================== */
.bottom-container-table .final-wt-input {
  width: 70px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #d0d7e2;
  background-color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s ease, 
              box-shadow .15s ease, 
              background-color .15s ease;
}

.bottom-container-table .final-wt-input:focus {
  border-color: #153765;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px rgba(21, 55, 101, 0.15);
}

.bottom-container-table .final-wt-input[readonly],
.bottom-container-table .final-wt-input:disabled {
  background-color: #f0f2f5;
  color: #888;
  border-style: dashed;
  cursor: default;
  box-shadow: none;
}

/* number 스핀 버튼 제거 */
.bottom-container-table input[type="number"].final-wt-input::-webkit-outer-spin-button,
.bottom-container-table input[type="number"].final-wt-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bottom-container-table input[type="number"].final-wt-input {
  -moz-appearance: textfield;
  text-align: center;
}


/* ===========================
 * 평가 상태 및 버튼 그룹
 * =========================== */
/* 버튼/상태 영역 전체 */
.button-container-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 왼쪽 상태 텍스트 영역 */
.eval-status-area {
  display: flex;
  align-items: center;
  min-height: 32px;
}

/* 뱃지 기본 */
.eval-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  background: #e5e7eb;
  color: #374151;
}

/* 기본 상태 점 */
.eval-status-badge::before {
  content: "●";
  font-size: 8px;
}

/* 작성 중 상태 */
.eval-status-badge.is-editing {
  background: #eff6ff;
  color: #1d4ed8;
}
.eval-status-badge.is-editing::before {
  color: #3b82f6;
}

/* 제출 완료 상태 */
.eval-status-badge.is-submitted {
  background: #dcfce7;
  color: #166534;
}
.eval-status-badge.is-submitted::before {
  color: #22c55e;
}

/* 오른쪽 버튼 그룹 */
.eval-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 필요 시 버튼 공통 스타일 (이미 mps-btn이 있다면 생략 가능) */
.mps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}

/* 예시: 속성별 변형 */
.mps-btn--ghost {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
.mps-btn--ghost:hover {
  background: #f3f4f6;
}

.mps-btn--primary {
  background: #153765;
  border-color: #153765;
  color: #ffffff;
}
.mps-btn--primary:hover {
  background: #1e3a8a;
}

.mps-btn--danger {
  background: #fee2e2;
  border-color: #f97373;
  color: #b91c1c;
}
.mps-btn--danger:hover {
  background: #fecaca;
}

/* ============================
 * 가중치 변경 사유: 첨부파일 드롭존
 * ============================ */
.wt-dropzone {
  border: 1px dashed #cbd5f5;
  border-radius: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  text-align: center;
  font-size: 12px;
  color: #4b5563;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
  position: relative;
}

.wt-dropzone strong {
  font-weight: 600;
}

.wt-dropzone.is-dragover {
  background: #eff6ff;
  border-color: #3b82f6;
}

.wt-file-list {
  margin-top: 6px;
  font-size: 12px;
  color: #374151;
}

.wt-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

.wt-file-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wt-file-size {
  white-space: nowrap;
  margin-right: 4px;
  color: #6b7280;
}

.wt-file-remove {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: #ef4444;
  padding: 0 4px;
}

.wt-file-remove:hover {
  text-decoration: underline;
}
.wt-reason-files {
  position: absolute;
  inset: 0;          
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}
/* ============================
 * 가중치 변경 사유: 첨부파일 리스트
 * ============================ */
.wt-file-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto; /* 아이콘/썸네일 / 파일명 / 용량 / 삭제 */
  column-gap: 6px;
  align-items: center;
  padding: 4px 0;
}

.wt-file-icon {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* 이미지 썸네일 박스 */
.wt-file-thumb {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wt-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wt-file-icon.is-default[disabled] {
  opacity: 0.5;
  cursor: default;
}

.wt-file-name-link {
  text-decoration: underline;
  cursor: pointer;
}

.wt-file-size {
  font-size: 11px;
  color: #6b7280;
  text-align: right;
}

/* 기존 텍스트 링크 스타일을 버튼형으로 업그레이드 */
.wt-file-remove-existing,
.wt-file-remove-pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;

  padding: 3px 10px;
  border-radius: 999px;

  border: 1px solid #fecaca;     /* 연한 레드 보더 */
  background-color: #fef2f2;     /* 옅은 레드 배경 */
  color: #b91c1c;                /* 진한 레드 텍스트 */

  font-size: 11px;
  font-weight: 600;
  line-height: 1;

  cursor: pointer;
  transition: background-color .15s ease,
              border-color .15s ease,
              color .15s ease,
              transform .05s ease;
}

.wt-file-remove-existing:hover,
.wt-file-remove-pending:hover {
  background-color: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.wt-file-remove-existing:active,
.wt-file-remove-pending:active {
  transform: scale(0.97);
}

.wt-file-remove-existing:disabled,
.wt-file-remove-existing[disabled],
.wt-file-remove-pending:disabled,
.wt-file-remove-pending[disabled] {
  opacity: 0.5;
  cursor: default;
  transform: none;
}


/* ============================
 * 성과평가 임시저장 로딩 오버레이
 * ============================ */
.mps-saving-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  background: rgba(15, 23, 42, 0.45); /* 어두운 반투명 배경 */
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  color: #f9fafb;
}

.mps-saving-dialog {
  min-width: 260px;
  max-width: 360px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #111827;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.5);

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* 단순 로딩 스피너 */
.mps-saving-spinner {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 3px solid rgba(156, 163, 175, 0.5);
  border-top-color: #60a5fa;
  animation: mps-spin 0.9s linear infinite;
}

@keyframes mps-spin {
  to {
    transform: rotate(360deg);
  }
}

.mps-saving-text-main {
  font-weight: 600;
  margin-bottom: 2px;
}

.mps-saving-text-sub {
  font-size: 12px;
  color: #d1d5db;
}

/* ============================
 * 상단 토스트 알림
 * ============================ */
.mps-toast-container {
  position: fixed;
  inset: 0;                 /* top, right, bottom, left 모두 0 */
  z-index: 10000;

  display: flex;
  align-items: center;       /* 수직 가운데 */
  justify-content: center;   /* 수평 가운데 */

  pointer-events: none;      /* 컨테이너는 클릭 통과 */
}

.mps-toast {
  min-width: 260px;
  max-width: 420px;
  padding: 10px 14px;
  margin-bottom: 8px;

  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  font-weight: 500;
  color: #111827;
  background: #f9fafb;

  pointer-events: auto;

  opacity: 0;
  transform: translateY(8px);
  animation: mps-toast-in 0.25s ease-out forwards;
}

/* 성공/오류 타입 컬러 */
.mps-toast--success {
  background: #ecfdf3;
  color: #14532d;
  border: 1px solid #bbf7d0;
}

.mps-toast--error {
  background: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
}

.mps-toast__icon {
  font-size: 14px;
}

.mps-toast__msg {
  flex: 1;
  white-space: normal;      /* 여러 줄 허용 */
  overflow: visible;        /* 잘라내지 않음 */
  text-overflow: clip;      /* ... 제거 */
  word-break: keep-all;     /* 한국어 줄바꿈 자연스럽게 */
}

.mps-toast__close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  color: inherit;
}

@keyframes mps-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mps-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ============================
 * 성과평가: 오류 셀 하이라이트
 * ============================ */
.bottom-container-table td.is-error-cell {
  background-color: #fef2f2;   /* 연한 레드 배경 */
}

/* 확정 가중치 셀 강조 */
.bottom-container-table td.is-error-cell .final-wt-input {
  border-color: #dc2626;
}

/* 변경 사유 셀 강조 */
.bottom-container-table td.is-error-cell .wt-reason-summary {
  color: #b91c1c;
  font-weight: 600;
}

/* ============================
 * 가중치 변경 사유: 이미지 미리보기
 * ============================ */
.wt-image-preview {
  margin-top: 8px;
  padding: 6px 0;
  border-top: 1px dashed #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 56px;
}

.wt-image-preview__empty {
  font-size: 11px;
  color: #9ca3af;
}

.wt-image-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wt-image-thumb img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.wt-image-thumb__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1px 3px;
  font-size: 9px;
  color: #f9fafb;
  background: rgba(0, 0, 0, .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================
 * 안내문구 박스 (본인평가 포함 공통)
 * =========================== */
.eval-period-msg {
  margin: 8px 0 16px;
  padding: 8px 10px;
  font-size: 0.875rem;
  color: #b91c1c;          /* 빨간 글씨 */
  background: #fef2f2;     /* 아주 연한 붉은 배경 (가독성용) */
  border-radius: 6px;
  line-height: 1.5;
}

/* ===========================
 * 안내문구 박스 (본인평가 포함 공통)
 * =========================== */
.eval-period-msg {
  margin: 12px 0 20px;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.5;

  /* 색상 계열: 기존 빨간 계열 유지 */
  color: #991b1b;
  background-color: #fef2f2;

  /* 박스 형태 */
  border: 1px solid #fecaca;
  border-left-width: 4px;
  border-left-color: #dc2626;
  border-radius: 6px;

  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* 아이콘 느낌 (HTML 수정 없이 사용 가능) */
.eval-period-msg::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  margin-top: 1px;

  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;

  color: #ffffff;
  background-color: #dc2626;
}

/* 여러 줄일 때 내용 영역이 자연스럽게 줄바꿈되도록 */
.eval-period-msg span,
.eval-period-msg p {
  margin: 0;
}

input[type="checkbox"] {
  width: auto;
  padding: 0;
  border-radius: 0;
  margin-right: 0;
}

/* =========================
   연결 버튼 (primary-light)
   - 파란계열 라인 + 연한 배경
   ========================= */
.mps-btn--primary-light {
  border-color: #2563eb;
  background-color: #eff6ff;
  color: #1d4ed8;
}

.mps-btn--primary-light:not(:disabled):hover {
  background-color: #dbeafe;
  border-color: #1d4ed8;
  color: #1d4ed8;
}

.mps-btn--primary-light:not(:disabled):active {
  background-color: #bfdbfe;
}

/* =========================
   해제 버튼 (danger-light)
   - 붉은계열 라인 + 연한 배경
   ========================= */
.mps-btn--danger-light {
  border-color: #ef4444;
  background-color: #fef2f2;
  color: #b91c1c;
}

.mps-btn--danger-light:not(:disabled):hover {
  background-color: #fee2e2;
  border-color: #dc2626;
  color: #b91c1c;
}

.mps-btn--danger-light:not(:disabled):active {
  background-color: #fecaca;
}

/* 테이블 안에서 더 조밀하게 보이도록 옵션 (필요시) */
.proof-mps-wrap .mps-btn--primary-light,
.proof-mps-wrap .mps-btn--danger-light {
  padding: 2px 8px;
  font-size: 11px;
}

.mps-row.is-error-row {
  background-color: #fef2f2;  /* 연한 빨간 배경 */
}
.mps-row.is-error-row .self-scale-select {
  border-color: #ef4444;
}

.bottom-container-table td.col-def{
  white-space: normal;          /* 줄바꿈 허용 */
  overflow-wrap: anywhere;      /* 긴 단어/URL도 강제 줄바꿈 */
  word-break: break-word;       /* 구형 브라우저 대응 */
  text-align: left;
}

/* (선택) 정의2도 동일 적용 */
.bottom-container-table td.col-def2{
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}

/* 근거 입력 textarea */
.bottom-container-table textarea.capa-evidence,
.bottom-container-table td.col-evidence-input textarea.capa-evidence-evaluator {
  width: 100%;
  min-height: 64px;          /* 기본 높이 */
  height: auto;
  box-sizing: border-box;

  padding: 8px 10px;
  line-height: 1.4;
  font-size: 13px;

  border: 1px solid #d0d7de;
  border-radius: 6px;
  background: #fff;
  color: #111;

  resize: vertical;          /* 세로만 리사이즈(권장) */
  outline: none;

  /* 긴 단어/URL도 줄바꿈 */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 포커스(입력중) 강조 */
.bottom-container-table textarea.capa-evidence:focus,
.bottom-container-table td.col-evidence-input textarea.capa-evidence-evaluator:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18);
}

/* placeholder 톤 */
.bottom-container-table textarea.capa-evidence::placeholder,
.bottom-container-table td.col-evidence-input textarea.capa-evidence-evaluator::placeholder {
  color: #9aa3af;
}

/* 비활성/읽기전용 상태용(필요 시) */
.bottom-container-table textarea.capa-evidence:disabled,
.bottom-container-table td.col-evidence-input textarea.capa-evidence-evaluator:disabled,
.bottom-container-table textarea.capa-evidence[readonly],
.bottom-container-table td.col-evidence-input textarea.capa-evidence-evaluator[readonly]{
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

/* 근거행 가독성(선택) */
.bottom-container-table tr.evidence-row td.col-evidence-input,
.bottom-container-table tr.evidence-row td.col-evidence-input textarea.capa-evidence-evaluator {
  padding: 6px 8px;
}

td.is-invalid-cell {
  background: #fff1f2 !important;
}

/* ===========================
 * 상/하반기 전환 네비게이션
 * =========================== */
.period-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.period-navigation #btn-prev-period,
.period-navigation #btn-next-period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.period-navigation #btn-prev-period:hover:not(:disabled),
.period-navigation #btn-next-period:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
}

.period-navigation #btn-prev-period:active:not(:disabled),
.period-navigation #btn-next-period:active:not(:disabled) {
  transform: scale(0.98);
  background: #e5e7eb;
}

.period-navigation #btn-prev-period:disabled,
.period-navigation #btn-next-period:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
  color: #9ca3af;
}

.period-navigation #current-period-label {
  display: inline-block;
  min-width: 120px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #153765;
  text-align: center;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.bottom-container-table td.col-evidence-input,
.bottom-container-table td.col-evidence-input .capa-evidence-view {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}