* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 30px 15px;
  background: #eef0f2;
  font-family: Arial, Tahoma, sans-serif;
  color: #252525;
}

.report {
  width: 100%;
  max-width: 900px;
  margin: auto;
  background: #fff;
  border: 1px solid #c9cdd1;
  box-shadow: 0 10px 35px rgba(0,0,0,.09);
  position: relative;
  overflow: hidden;
}

.watermark {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-28deg);

  font-size: 110px;
  font-weight: 700;

  letter-spacing: 14px;

  color: rgba(18,73,105,.035);

  pointer-events: none;
  user-select: none;
}

.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  padding: 28px 32px 22px;

  border-top: 7px solid #1b536f;
  border-bottom: 2px solid #1b536f;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.symbol {
  width: 68px;
  height: 68px;

  border: 2px solid #1b536f;

  border-radius: 50%;

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

  font-family: Georgia, serif;
  font-size: 36px;

  color: #1b536f;
}

h1 {
  margin: 0 0 4px;

  color: #183f54;

  font-size: 23px;
}

.english-title {
  direction: ltr;
  text-align: left;

  font-size: 13px;
  font-weight: bold;

  letter-spacing: .8px;
}

.department {
  margin-top: 4px;

  direction: ltr;
  text-align: left;

  color: #6d7479;

  font-size: 11px;
}

.document-status {
  direction: ltr;

  border: 1px solid #a8adb0;

  padding: 7px 12px;

  font-size: 10px;

  letter-spacing: 1px;

  color: #5c6164;
}

.document-info {
  display: grid;

  grid-template-columns:
  repeat(4, 1fr);

  background: #f7f8f9;

  border-bottom: 1px solid #dadddf;
}

.document-info > div {
  padding: 13px 17px;

  border-left: 1px solid #dadddf;
}

.document-info span,
.patient-grid span {
  display: block;

  color: #747b80;

  font-size: 10px;

  margin-bottom: 4px;

  direction: ltr;
  text-align: left;
}

.document-info strong,
.patient-grid strong {
  display: block;

  font-size: 12px;

  direction: ltr;
  text-align: left;
}

section {
  padding: 23px 32px;
}

.patient {
  border-bottom: 1px solid #e3e5e6;
}

.patient h2 {
  margin: 0 0 15px;

  font-size: 14px;

  direction: ltr;
  text-align: left;

  color: #31556a;
}

.patient-grid {
  display: grid;

  grid-template-columns:
  repeat(4,1fr);

  gap: 20px;
}

.section-title {
  font-size: 13px;

  font-weight: 700;

  color: #234f66;

  border-bottom: 1px solid #9baab2;

  padding-bottom: 7px;

  margin-bottom: 13px;

  direction: ltr;
  text-align: left;
}

table {
  width: 100%;

  border-collapse: collapse;

  direction: ltr;

  font-size: 12px;
}

th {
  background: #eef3f5;

  color: #34464f;

  text-align: left;

  padding: 9px;

  border: 1px solid #cbd2d6;
}

td {
  padding: 10px 9px;

  border: 1px solid #d8dcdf;

  text-align: left;
}

.high {
  color: #b31c1c;

  font-weight: 700;
}

.review {
  color: #b31c1c;

  font-weight: 700;
}

.special-row {
  background: #fff8f7;
}

.clinical-note {
  margin-top: 17px;

  border-left: 4px solid #5d7987;

  padding: 11px 14px;

  background: #f7f9fa;

  direction: ltr;

  text-align: left;

  font-family: Georgia, serif;

  font-size: 13px;

  line-height: 1.65;
}

.warning-box {
  display: flex;

  gap: 13px;

  align-items: flex-start;

  margin-top: 20px;

  padding: 14px;

  border: 1px solid #dfc4c2;

  background: #fff8f7;

  direction: ltr;

  text-align: left;
}

.warning-icon {
  width: 29px;
  height: 29px;

  min-width: 29px;

  border-radius: 50%;

  background: #a72121;

  color: white;

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

  font-weight: bold;
}

.warning-box strong {
  font-size: 13px;
}

.warning-box p {
  margin: 4px 0 0;

  font-size: 12px;

  color: #646464;
}

.main-button {
  display: block;

  margin: 25px auto 5px;

  border: 0;

  border-radius: 4px;

  background: #214f67;

  color: white;

  padding: 12px 27px;

  font-family: Tahoma, sans-serif;

  font-size: 14px;

  cursor: pointer;
}

.main-button:hover {
  background: #173c50;
}

.loading-panel {
  margin-top: 22px;

  padding: 30px;

  border: 1px solid #d8dddf;

  text-align: center;

  direction: ltr;
}

.spinner {
  width: 35px;
  height: 35px;

  border: 4px solid #e4e7e8;

  border-top-color: #24576f;

  border-radius: 50%;

  margin: 0 auto 15px;

  animation: rotate 1s linear infinite;
}

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

#loading-message {
  font-size: 12px;

  color: #555;
}

.interpretation {
  margin-top: 22px;

  border: 1px solid #b8c1c5;

  background: white;
}

.interpretation-header {
  padding: 11px 15px;

  background: #edf2f4;

  border-bottom: 1px solid #c8d0d3;

  font-size: 12px;

  font-weight: bold;

  direction: ltr;

  text-align: left;
}

.interpretation-content {
  padding: 23px;
}

.interpretation-label {
  direction: ltr;

  text-align: left;

  color: #777;

  font-size: 11px;
}

.private-message {
  padding: 20px;

  border: 1px dashed #b7bbbd;

  background: #fcfcfc;

  white-space: pre-line;

  font-size: 17px;

  line-height: 2;
}

.hidden {
  display: none;
}

footer {
  padding: 18px 32px;

  border-top: 1px solid #d6dadd;

  background: #f7f8f9;

  color: #747a7e;

  font-size: 10px;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  gap: 8px;

  direction: ltr;
}

.fiction-note {
  width: 100%;

  margin-top: 6px;

  color: #a1a5a7;

  font-size: 9px;
}

@media(max-width:700px) {

  body {
    padding: 8px;
  }

  .report-header {
    padding: 20px 17px;
  }

  .document-status {
    display: none;
  }

  h1 {
    font-size: 18px;
  }

  .symbol {
    width: 52px;
    height: 52px;

    font-size: 27px;
  }

  .document-info {
    grid-template-columns:
    repeat(2,1fr);
  }

  .patient-grid {
    grid-template-columns:
    repeat(2,1fr);
  }

  section {
    padding: 20px 17px;
  }

  table {
    font-size: 10px;
  }

  th,
  td {
    padding: 8px 5px;
  }

  .watermark {
    font-size: 60px;
  }

}