body,
html {
  width: 100%;
  font-family: 'Binance';
  padding: 10px 10px;

  background-color: #f9f9f9;
  color: #333;
  box-sizing: border-box;
}

h1,
h1+h2,
h1+div,
h2,
h2+div {
  display: inline;
}

p.statement {
  text-align: center;
  font-style: italic;
  font-size: 20px;
}


.submitted {
  display: block;
  text-align: center;
}

img {
  vertical-align: middle;
}

.flow_active {
  stroke: red;
  opacity: 0.75;
}

.goal_active {
  font-weight: bold;
  text-decoration: underline;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.svg {
  display: block;
  /* margin: auto; */
  /* text-align: center; */
  transform: scale(.9);
}

#interviewResults div[id^='g'] {
  stroke: green;
  cursor: pointer;
}
#interviewResults div[id^='g']:hover {
  text-decoration: underline;
}
.svg path[id^='f_'] {
  cursor: pointer;
}

#mcMg {
  width: 95%;
  border: 2px;
  border-spacing: 20px 20px;
}

#mcMg td {
  padding: 12px 35px;
}


.page-title {
  font-size: 34px;
  line-height: 1.2;
  margin-bottom: 30px;
  display: block;
  text-align: center;
}

.section__title {
  margin-bottom: 10px;
  display: block;
  font-size: 24px;
}

.base-table {
  
      margin: 0 auto;
}

.interviews-importance-block,
.validation-block {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.interviews-importance-block {
  margin-bottom: 25px;
}
.interviews-importance-block .section__title {
  margin-top: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
  border: 1px solid #ddd;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  color: #333;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #e0f2f1;
}


.group-1:hover,
.group-1:hover + .group-1 {
  background-color: #e0f2f1;
}
.group-2:hover,
.group-2:hover + .group-2 {
  background-color: #e0f2f1;
}
.group-3:hover,
.group-3:hover + .group-3 {
  background-color: #e0f2f1;
}
.group-4:hover,
.group-4:hover + .group-4 {
  background-color: #e0f2f1;
}

.group-5:hover,
.group-5:hover ~ .group-5,
.group-5:hover ~ .group-5 ~ .group-5 {
  background-color: #e0f2f1;
}

.mg1-1:hover,
.mg1-1:hover ~ .mg1-1,
.mg1-1:hover ~ .mg1-1 ~ .mg1-1 {
  background-color: #e0f2f1;
}

.mg1-2:hover,
.mg1-2:hover ~ .mg1-2,
.mg1-2:hover ~ .mg1-2 ~ .mg1-2 {
  background-color: #e0f2f1;
}

.mg1-3:hover,
.mg1-3:hover ~ .mg1-3,
.mg1-3:hover ~ .mg1-3 ~ .mg1-3 {
  background-color: #e0f2f1;
}

.mg1-4:hover,
.mg1-4:hover ~ .mg1-4,
.mg1-4:hover ~ .mg1-4 ~ .mg1-4 {
  background-color: #e0f2f1;
}

.meta-list a {
  color: #000;
}

.hero {
  display: flex;
  gap: 21px;
  margin-top: 20px;
}

.hero-glossary {
  width: 50%;
}

th[colspan="5"] {
  text-align: center;
}