@font-face {
  font-family: "RijksoverheidSansText";
  src: url("https://data.pbl.nl/webresources/fonts/ROsanswebtextregular.eot?") format("embedded-opentype"), url("https://data.pbl.nl/webresources/fonts/ROsanswebtextregular.woff") format("opentype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "RijksoverheidSansItalic";
  src: url("https://data.pbl.nl/webresources/fonts/ROsanswebtextitalic.eot?") format("embedded-opentype"), url("https://data.pbl.nl/webresources/fonts/ROsanswebtextitalic.woff") format("opentype");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "RijksoverheidSansBold";
  src: url("https://data.pbl.nl/webresources/fonts/ROsanswebtextbold.eot?") format("embedded-opentype"), url("https://data.pbl.nl/webresources/fonts/ROsanswebtextbold.woff") format("opentype");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "RijksoverheidSerif";
  src: url("https://data.pbl.nl/webresources/fonts/ROserifwebregular.eot?") format("embedded-opentype"), url("https://data.pbl.nl/webresources/fonts/ROserifwebregular.woff") format("opentype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "RijksoverheidSerifItalic";
  src: url("https://data.pbl.nl/webresources/fonts/ROserifwebitalic.eot?") format("embedded-opentype"), url("https://data.pbl.nl/webresources/fonts/ROserifwebitalic.woff") format("opentype");
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: "RijksoverheidSerifBold";
  src: url("https://data.pbl.nl/webresources/fonts/ROserifwebbold.eot?") format("embedded-opentype"), url("https://data.pbl.nl/webresources/fonts/ROserifwebbold.woff") format("opentype");
  font-weight: bold;
  font-style: normal;
}
body {
  font-family: "RijksoverheidSansText", Arial, Verdana, sans-serif;
  font-size: 62.5%;
  margin: 0;
  padding: 0;
  height: 100%;
  display: block;
}

#infographic_container {
  border: 1px solid #e6e6e6;
}

p, li {
  margin: 0;
  font-size: 1.2rem;
  padding: 0;
}

h2 {
  font-size: 1.4rem;
  margin: 0;
  padding: 0;
  margin-top: 1em;
}

h2 ~ p {
  padding-top: 0;
  margin-top: 0.25em;
}

h2 span {
  display: block;
}

h3 {
  font-size: 1.2rem;
  padding-bottom: 0.25em;
  margin: 0;
}

img {
  width: 100%;
}

#menu-1 {
  margin-bottom: 0.5em;
}
#menu-1 button {
  color: black;
}

.submenu button {
  color: black;
}

ul {
  padding-left: 2em;
}

li {
  padding-bottom: 0.5em;
}

#menu-1.menu button.green {
  color: rgb(61, 92, 60);
}
#menu-1.menu button.blue {
  color: rgb(157, 0, 100);
}
#menu-1.menu button.red {
  color: rgb(200, 62, 40);
}
#menu-1.menu button.purple {
  color: rgb(0, 110, 154);
}
#menu-1.menu button.green:hover {
  background-color: rgba(61, 92, 60, 0.6);
  color: black;
  text-decoration: underline;
}
#menu-1.menu button.blue:hover {
  background-color: rgba(157, 0, 100, 0.6);
  color: black;
  text-decoration: underline;
}
#menu-1.menu button.red:hover {
  background-color: rgba(200, 62, 40, 0.6);
  color: black;
  text-decoration: underline;
}
#menu-1.menu button.purple:hover {
  background-color: rgba(0, 110, 154, 0.6);
  color: black;
  text-decoration: underline;
}

/** Purple **/
#infographic_container.purple #menu-1 {
  border-bottom: 4px solid rgb(0, 110, 154);
}
#infographic_container.purple .menu button[aria-expanded=true],
#infographic_container.purple .submenu button[aria-expanded=true] {
  background-color: rgb(0, 110, 154);
  color: white;
  text-decoration: underline;
}
#infographic_container.purple .submenu button[aria-expanded=false]:hover {
  background-color: rgba(0, 110, 154, 0.6);
  color: white;
  text-decoration: underline;
}
#infographic_container.purple h2.title {
  background-color: rgb(0, 110, 154);
  color: white;
}

/** Red **/
#infographic_container.red #menu-1 {
  border-bottom: 4px solid rgb(200, 62, 40);
}
#infographic_container.red .menu button[aria-expanded=true],
#infographic_container.red .submenu button[aria-expanded=true] {
  background-color: rgb(200, 62, 40);
  color: white;
  text-decoration: underline;
}
#infographic_container.red .submenu button[aria-expanded=false]:hover {
  background-color: rgba(200, 62, 40, 0.6);
  color: white;
  text-decoration: underline;
}
#infographic_container.red h2.title {
  background-color: rgb(200, 62, 40);
  color: white;
}

/** Blue **/
#infographic_container.blue #menu-1 {
  border-bottom: 4px solid rgb(157, 0, 100);
}
#infographic_container.blue .menu button[aria-expanded=true],
#infographic_container.blue .submenu button[aria-expanded=true] {
  background-color: rgb(157, 0, 100);
  color: white;
  text-decoration: underline;
}
#infographic_container.blue .submenu button[aria-expanded=false]:hover {
  background-color: rgba(157, 0, 100, 0.6);
  color: white;
  text-decoration: underline;
}
#infographic_container.blue h2.title {
  background-color: rgb(157, 0, 100);
  color: white;
}

/** Yellow **/
/** Green **/
#infographic_container.green #menu-1 {
  border-bottom: 4px solid rgb(61, 92, 60);
}
#infographic_container.green .menu button[aria-expanded=true],
#infographic_container.green .submenu button[aria-expanded=true] {
  background-color: rgb(61, 92, 60);
  color: white;
  text-decoration: underline;
}
#infographic_container.green .submenu button[aria-expanded=false]:hover {
  background-color: rgba(61, 92, 60, 0.6);
  color: white;
  text-decoration: underline;
}
#infographic_container.green h2.title {
  background-color: rgb(61, 92, 60);
  color: white;
}

.menu-content[hidden] {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: -9999px; /* Keep it off-screen */
  transition: visibility 0s, opacity 0.3s linear; /* Optional for smooth transitions */
}

.menu-content.active {
  display: block;
}

/* Container for the menu buttons */
.menu, .submenu {
  display: flex;
  justify-content: space-between; /* Distribute the buttons evenly */
  gap: 5px; /* Optional: Adds some space between buttons */
}

/* Make each button grow equally to fill available space */
.menu button,
.submenu button {
  flex: 1; /* Allow buttons to grow and fill space equally */
  padding: 10px;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  border: none;
  height: 70px;
  cursor: pointer;
  background-color: #e6e6e6;
  font-family: "RijksoverheidSansText", Arial, sans-serif;
}

.submenu button {
  height: 50px;
}

.variant__general {
  padding: 2em;
  background-color: #f0f0f0;
}
.variant__general h2:first-child {
  margin-top: 0.25em;
}

/* Styling the visible and hidden content */
.menu-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: -9999px;
  transition: visibility 0s, opacity 0.3s linear;
}

.menu-content.active {
  visibility: visible;
  opacity: 1;
  position: static;
  left: 0;
}

.menu-content[hidden] {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: -9999px;
}

.variable__container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  /* margin: 20px; */
  /* padding: 10px; */
  border-top: 1px solid #ddd;
  padding-top: 1em;
  column-gap: 15px;
}

/* Styling for the key-value pairs */
.variable__container .key {
  font-size: 1.1rem;
  font-weight: bold;
}

.variable__container .value {
  text-align: left;
  font-size: 1.1rem;
  color: #111;
}

.variant__variables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 2em;
}

.variant__body {
  padding: 2em;
}
.variant__body h3 {
  margin-top: 1em;
}

h2.title {
  margin-top: 0;
  font-size: 1.6rem;
  padding: 1em;
}

h2 span.variant__subheader {
  font-weight: normal;
}

/*# sourceMappingURL=styles.css.map */