.dpe-2021 {
  background-color: white;
  padding: 3rem 0;

}

.dpe-2021>.row {
  max-width: 992px;
  margin: 0 auto;

}

.dpe-2021>.row>div {}


.dpe-2021 table {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1;

  display: inline-block;
}

.dpe-2021 .td-inner {
  position: relative;
  overflow: hidden;

}

.dpe-2021 .values {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
  border: 1px solid black;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  padding: 3px;

  height: 60px;
}

.dpe-2021 .values .column {
  width: 50%;
  text-align: center;
  line-height: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  padding: 0 5px;
}

.dpe-2021 .values .column:first-child {
  border-right: 1px solid black;
}

.dpe-2021 .values .column span {
  font-size: 0.6rem;
  white-space: nowrap;
}

.dpe-2021 .values .column span i {}

.dpe-2021 .values .column span.middle {
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.4;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dpe-2021 legend {
  display: inline;
  font-size: 0.8rem;
  display: block;
  border: none;
  padding: 3px 0;
  margin: 0;
  text-align: left;
}

.dpe-2021 .letter {
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 1.0rem;
  color: white;
  z-index: 5;
}

.dpe-2021 svg {

  display: block;
  position: relative;
  /* left: -60px; */

}



.dpe-2021 .table-dpe {}

.dpe-2021 .table-dpe .values {
  width: 155px;
}

.dpe-2021 .table-dpe svg {
  position: relative;
  margin: 2px 0;
}

.dpe-2021 .table-dpe path {
  stroke-width: 0;
}

.dpe-2021 .row-dpe-A path {}

.dpe-2021 .table-dpe {}

.dpe-2021 .row-dpe-A {}

.dpe-2021 .row-dpe-A svg {
  left: -233px;
}

.dpe-2021 .row-dpe-A path {
  fill: #469d70;
}

.dpe-2021 .row-dpe-B {}

.dpe-2021 .row-dpe-B svg {
  left: -210px
}

.dpe-2021 .row-dpe-B path {
  fill: #6aad5f;
}

.dpe-2021 .row-dpe-C {}

.dpe-2021 .row-dpe-C svg {
  left: -187px
}

.dpe-2021 .row-dpe-C path {
  fill: #acca7e;
}

.dpe-2021 .row-dpe-D {}

.dpe-2021 .row-dpe-D svg {
  left: -164px
}

.dpe-2021 .row-dpe-D path {
  fill: #f1e552;
}

.dpe-2021 .row-dpe-E {}

.dpe-2021 .row-dpe-E svg {
  left: -141px
}

.dpe-2021 .row-dpe-E path {
  fill: #e7b543;
}

.dpe-2021 .row-dpe-F {}

.dpe-2021 .row-dpe-F svg {
  left: -118px
}

.dpe-2021 .row-dpe-F path {
  fill: #de8746;
}

.dpe-2021 .row-dpe-G {}

.dpe-2021 .row-dpe-G svg {
  left: -95px
}

.dpe-2021 .row-dpe-G path {
  fill: #c6342c;
}

.dpe-2021 .selected svg {
  position: relative;
  z-index: 5;
}



.dpe-2021 .selected path {
  stroke-width: 1;
}

.dpe-2021 .selected .letter {
  font-size: 1.2rem;
}









.dpe-2021 .table-ges {}

.dpe-2021 .table-ges svg {
  position: relative;
  margin: 2px 0;
  height: 26px;
}

.dpe-2021 .table-ges .selected svg {
  height: 46px;
}

.dpe-2021 .table-ges path {
  stroke-width: 0;
}

.dpe-2021 .row-ges-A path {}

.dpe-2021 .table-ges {}



.dpe-2021 .table-ges .values {
  width: 100%;
}

.dpe-2021 .row-ges-A {}

.dpe-2021 .row-ges-A svg {
  left: -100px;
}

.dpe-2021 .row-ges-A path {
  fill: #afdaf6;
}

.dpe-2021 .row-ges-B {}

.dpe-2021 .row-ges-B svg {
  left: -88px
}

.dpe-2021 .row-ges-B path {
  fill: #94b3d2;
}

.dpe-2021 .row-ges-C {}

.dpe-2021 .row-ges-C svg {
  left: -76px
}

.dpe-2021 .row-ges-C path {
  fill: #7a92af;
}

.dpe-2021 .row-ges-D {}

.dpe-2021 .row-ges-D svg {
  left: -64px
}

.dpe-2021 .row-ges-D path {
  fill: #616e8c;
}

.dpe-2021 .row-ges-E {}

.dpe-2021 .row-ges-E svg {
  left: -52px
}

.dpe-2021 .row-ges-E path {
  fill: #4d506d;
}

.dpe-2021 .row-ges-F {}

.dpe-2021 .row-ges-F svg {
  left: -40px
}

.dpe-2021 .row-ges-F path {
  fill: #383751;
}

.dpe-2021 .row-ges-G {}

.dpe-2021 .row-ges-G svg {
  left: -28px
}

.dpe-2021 .row-ges-G path {
  fill: #261b33;
}

.dpe-2021 .selected svg {}



.dpe-2021 .selected path {
  stroke-width: 1;
}

.dpe-2021 .selected .letter {
  font-size: 1.2rem;
}

.dpe-2021 .table-ges .selected .td-inner::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  right: 2px;
  height: 2px;
  background-color: #333;
  content: ' ';
}

.dpe-2021 .table-ges .selected .values {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.dpe-2021 .table-ges .selected .column {
  width: 100%;
  border: none;
}