/* CHART CONTAINER */
.chart-container-row {
  display: block;
}

.chart-container-split {
  margin-bottom: 55px;
}

.chart-wrapper.chart-container-split .chart {
  margin-bottom: 55px;
}

/* CHART */
.chart {
  font-size: 17px;
}

.chart-wrapper .chart-2 {
  margin-bottom: 20px;
}

.chart-wrapper .chart-1 {
  margin-bottom: 40px;
}

/* CHART HEADER */
.chart-header {
  background-color: #e7dcd8;
  border: 1px solid #000;
  font-weight: 700;
  padding: 20px;
  width: 100%;
}

.chart-wrapper .chart-2 .chart-header {
  border: 1px solid #000;
  border-bottom: none;
}

.chart-header a {
  color: #005670;
}

/* CHART YES/NO HEADER */
.chart-header-yes,
.chart-header-no {
  padding: 20px 20px 20px 85px;
  position: relative;
}

.chart-header-yes {
  background-color: #d4edd5;
}

.chart-header-no {
  background-color: #fde5e5;
}

.chart-header-yes::before {
  background-color: #009507;
  background-image: url("https://philanthropy.cdn.redcross.ca/teachable/img/general/checkmark_white.png");
}

.chart-header-no::before {
  background-color: #ed0000;
  background-image: url("https://philanthropy.cdn.redcross.ca/teachable/img/general/error_white.png");
}

.chart-header-yes::before,
.chart-header-no::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
  color: #fff;
  content: "";
  display: inline-block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 65px;
}

/* CHART HEADING */
.chart-container-heading {
  font-size: 20px;
  font-weight: 700;
}

/* CHART CONTENT */
.chart-content {
  background-color: #fff;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  padding: 20px;
  width: 100%;
}

.chart-wrapper .chart-2 .chart-content {
  border: 1px solid #000;
}

.chart:last-of-type .chart-content {
  border-bottom: 1px solid #000;
}

/* CHART LIST */
.chart-wrapper .chart-1 .chart-content-chart-list {
  border-bottom: 1px solid #000;
}

.chart-content ul {
  padding-left: 20px;
}

.chart-content li {
  line-height: 1.2;
}

.chart-content li:last-of-type,
.chart-content ul:last-of-type {
  margin-bottom: 0;
}

.chart-content-chart-list {
  padding: 0;
}

.chart-content-chart-list .chart-list {
  list-style-type: none;
  margin-bottom: 0;
  padding: 0;
}

.chart-content-chart-list .chart-list li {
  border-bottom: 1px solid #000;
  margin-bottom: 0;
  padding: 20px;
}

.chart-content-chart-list .chart-list li:last-of-type {
  border-bottom: none;
}

@media (min-width: 1024px) {
  .chart-wrapper {
    display: flex;
  }

  .chart-container-row {
    border: 1px solid #000;
    display: block;
  }

  .chart-container-row .chart {
    border-right: none;
    display: flex;
  }

  .chart-container-row .chart-header {
    border: none;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    max-width: 150px;
  }

  .chart-container-row .chart-2 .chart-header {
    max-width: 50%;
  }

  .chart-container .chart-2 .chart-header {
    border: none;
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
  }

  .chart-container-row .chart:last-of-type .chart-header {
    border-bottom: none;
  }

  .chart-wrapper .chart-1 .chart-header {
    border: 1px solid #000;
  }

  .chart-container-row .chart-content {
    border: none;
    border-bottom: 1px solid #000;
  }

  .chart-container-row .chart:last-of-type .chart-content {
    border-bottom: none;
  }

  .chart-container .chart-5 {
    width: 100%;
  }

  .chart-2 {
    width: 50%;
  }

  .chart-wrapper .chart-flex-desktop li.chart-2 {
    width: 100%;
  }

  .chart-wrapper .chart-flex-desktop li.chart-5 {
    width: 100%;
  }

  .chart-container .chart-2 {
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
  }

  .chart-container-split {
    display: flex;
  }

  .chart-wrapper.chart-container-split .chart {
    margin-bottom: 20px;
  }

  .chart-wrapper .chart-1 {
    margin-bottom: 40px;
  }

  .chart-wrapper .chart-2 {
    margin-right: 20px;
  }

  .chart-wrapper .chart-2:last-of-type {
    margin-right: 0;
  }

  .chart-wrapper .chart .chart-content {
    border: 1px solid #000;
  }

  .chart-wrapper .chart-1 .chart-content {
    border: none;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
  }

  .chart-container .chart-2 .chart-content {
    border: none;
  }

  .chart-container .chart-2:last-of-type {
    border-right: 1px solid #000;
  }

  .chart-container .chart-2:last-of-type .chart-content {
    border: none;
  }

  .chart-wrapper .chart-flex-desktop li:last-of-type {
    border-bottom: 1px solid #000;
    border-right: none;
  }

  .chart-flex-desktop {
    display: block;
  }
}

@media (min-width: 1220px) {
  .chart-wrapper {
    display: block;
  }

  .chart-container {
    border: 1px solid #000;
    display: flex;
    flex-direction: row;
  }

  .chart-container-split {
    border: none;
    display: flex;
  }

  .chart-container-split .chart:last-of-type .chart-content {
    border: 1px solid #000;
  }

  .chart-container .chart-2:last-of-type .chart-content {
    border: none;
  }

  .chart-container .chart {
    border-right: 1px solid #000;
  }

  .chart-4 {
    width: 25%;
  }

  .chart-header {
    border: none;
    border-bottom: 1px solid #000;
  }

  :lang(fr) .chart-header {
    height: 110px;
  }

  .chart-container-row {
    display: block;
  }

  .chart-container-row .chart-header {
    border-right: 1px solid #000;
  }

  .chart-container-row .chart-5 {
    border-right: none;
  }

  .chart-content {
    border: none;
  }

  .chart:last-of-type .chart-content,
  .chart:last-of-type {
    border: none;
  }

  .chart-wrapper .chart-1 .chart-content {
    border: none;
  }

  .chart-container .chart-2:last-of-type {
    border-bottom: 1px solid #000;
  }

  .chart-wrapper .chart-flex-desktop {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
  }

  .chart-wrapper .chart-flex-desktop li {
    border-right: 1px solid #000;
  }

  .chart-wrapper .chart-flex-desktop li.chart-5 {
    width: 20%;
  }

  .chart-wrapper .chart-flex-desktop li.chart-2 {
    border-left: none;
    margin-right: 0;
    width: 50%;
  }

  .chart-wrapper .chart-flex-desktop li.chart-2:nth-of-type(2n) {
    border-right: none;
  }
}

/* Updated September 10 2020 -BM */