.rules {
  padding: 2em 0 2em 0;
  margin-bottom: 0;
  /* display: flex; */
}
.rule {
  display: flex;
  align-items: center;
  padding: 16px 0 16px 0;
  cursor: pointer;
  border-top: #dddddd solid 1px;
}
.rule:hover {
  color: #444444;
}
.rule img {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 4));
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-right: 16px;
}
.rule h3 {
  margin: 0;
}
.rule h3 span {
  color: #2a6381;
  font-weight: 700;
}
.rule .btn {
  cursor: pointer;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin-left: auto;
}
.arrow.up {
  border: solid rgb(0, 0, 0);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
  transform: translateY(25%) rotate(-135deg);
  -webkit-transform: translateY(25%) rotate(-135deg);
}
.arrow.down {
  border: solid rgb(0, 0, 0);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 4px;
  transform: translateY(-25%) rotate(45deg);
  -webkit-transform: translateY(-25%) rotate(45deg);
}
.extra-info {
  background-color: #379cd2;
  color: white;
  max-height: 0;
  overflow: hidden;
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  transition: max-height 0.5s ease-in-out;
}
.extra-info-content h2 {
  font-weight: 700;
  margin-left: 16px;
}
.extra-info-content {
  max-width: 900px;
  margin: 32px auto 32px auto;
  padding: 0;
}
.extra-info-content .categories {
  margin-left: 32px;
  margin-bottom: 32px;
}
.extra-info .category {
  padding-bottom: 8px;
}
.extra-info .category h4 {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 0 -8px;
}
.extra-info-content .examples {
  margin-left: 32px;
  margin-bottom: 64px;
}
.allowed li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.allowed li:before {
  content: "✔"; /* Unicode for check mark */
  display: inline-block;
  margin-right: 10px;
  color: rgb(143, 240, 143);
  /* filter: drop-shadow(0 0 1px white); */
  /* text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; */
}
.not-allowed li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.not-allowed li:before {
  content: "✖";
  display: inline-block;
  margin-right: 10px;
  color: rgb(240, 140, 140);
  /* filter: drop-shadow(0 0 2px white); */
  /* text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; */
}
.examples a {
  text-decoration: none;
  color: #b1dff8;
}