/* Panel chart parity — from clone `panel-chart-record` AMP `amp-custom` (panna triplets per day). */
.charts-layout-root .panel.panel-info.panel-chart-amp-shell {
  border: 1px solid #3f51b5;
  width: 70%;
  margin: 0 auto 0;
}

.charts-layout-root .panel-chart-amp-shell .panel-heading h3 {
  margin: 0;
  padding: 5px;
  font-size: 1.17em;
  color: #fff;
}

.charts-layout-root .panel-chart.chart-panel-panna {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

/* Date column — wide enough for "dd/mm/yyyy to dd/mm/yyyy" (often 3 lines via <br>) */
.charts-layout-root .panel-chart.chart-panel-panna thead tr th:nth-child(1) {
  width: 6.75rem;
  min-width: 6.75rem;
}

.charts-layout-root .panel-chart.chart-panel-panna thead tr th[colspan="3"] {
  width: calc((100% - 6.75rem) / 6);
}

.charts-layout-root .panel-chart.chart-panel-panna:has(thead tr th:nth-child(8)) thead tr th[colspan="3"] {
  width: calc((100% - 6.75rem) / 7);
}

.charts-layout-root .panel-chart.chart-panel-panna,
.charts-layout-root .panel-chart.chart-panel-panna th,
.charts-layout-root .panel-chart.chart-panel-panna td {
  border: 1px solid #03a9f4a8;
}

.charts-layout-root .panel-chart.chart-panel-panna thead {
  background-color: #ffc107;
  text-shadow: 1px 1px 2px #9a7400ab;
}

.charts-layout-root .panel-chart.chart-panel-panna tbody td {
  padding: 5px 0;
  overflow: hidden;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(1) {
  width: 6.75rem;
  min-width: 6.75rem;
  font-size: 13px;
  overflow: visible;
  white-space: normal;
  line-height: 1.25;
  padding: 5px 4px;
  vertical-align: middle;
  word-break: break-word;
}

/* After date column: per-day left | middle (jodi) | right panna cells */
.charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 2) {
  border-right-width: 0;
  font-size: 13px;
  line-height: 1.15;
}

.charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 3) {
  border-left-width: 0;
  border-right-width: 0;
  font-size: 23px;
}

.charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 4) {
  border-left-width: 0;
  font-size: 13px;
  line-height: 1.15;
}

.charts-layout-root .panel-chart.chart-panel-panna td.r,
.charts-layout-root .panel-chart.chart-panel-panna .r {
  color: red;
}

@media only screen and (max-width: 770px) {
  .charts-layout-root .panel.panel-info.panel-chart-amp-shell {
    width: 95%;
  }

  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 3) {
    font-size: 16px;
  }

  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 2),
  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 4) {
    font-size: 11px;
  }

  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(1) {
    width: 5.75rem;
    min-width: 5.75rem;
    font-size: 11px;
  }
}

@media only screen and (max-width: 500px) {
  .charts-layout-root .panel.panel-info.panel-chart-amp-shell {
    width: 99%;
  }

  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 3) {
    font-size: 14px;
  }

  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 2),
  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(3n + 4) {
    font-size: 9px;
  }

  .charts-layout-root .panel-chart.chart-panel-panna tbody tr td:nth-child(1) {
    width: 5.25rem;
    min-width: 5.25rem;
    font-size: 10px;
  }

  .charts-layout-root .panel-chart.chart-panel-panna th {
    font-size: 11px;
  }
}

@media only screen and (max-width: 770px) {
  .charts-layout-root .panel-chart.chart-panel-panna thead tr th:nth-child(1) {
    width: 5.75rem;
    min-width: 5.75rem;
  }

  .charts-layout-root .panel-chart.chart-panel-panna thead tr th[colspan="3"] {
    width: calc((100% - 5.75rem) / 6);
  }

  .charts-layout-root .panel-chart.chart-panel-panna:has(thead tr th:nth-child(8)) thead tr th[colspan="3"] {
    width: calc((100% - 5.75rem) / 7);
  }
}