html,
body {
  overflow-x: hidden;
}

#MBW-content h2,
#SDG-content h2 {
  margin-bottom: var(--spacing-large);
}

.title-spacing {
  margin-top: 2rem;
}

.full-width {
  box-sizing: unset;
  width: 100%;
  margin-left: -150%;
  padding-left: 150%;
  padding-right: 150%;
}

.title-explanation {
  padding: 0px;
}

#app-header {
  background-color: var(--cbs-dark-green);
  padding-top: 2rem;
  padding-bottom: 1rem;
  color: var(--cbs-white);
  margin-bottom: 2rem;
}

#app-header h1 {
  color: var(--cbs-white);
}

.app-subheader {
  padding-top: 2rem;
  padding-bottom: 2rem;
  background-color: #f5f5f5;
  margin-top: -2rem;
  margin-bottom: 2rem;
}

.app-subheader a {
  color: var(--cbs-dark-aqua);
  text-decoration: none;
}

.app-subheader a:hover {
  text-decoration: underline;
}
.app-subheader i {
  margin-right: 0.5rem;
}

.row-padding > * {
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
}

.textblock-group {
  --bs-gutter-y: 1.5rem;
  --bs-gutter-x: 1.5rem;
  margin-bottom: var(--spacing-larger);
}

.textblock-element {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  margin-top: 0px;
  cursor: pointer;
  border-width: 1.5px;
  border-color: var(--cbs-gray);
  border-style: solid;
  border-radius: 3px;
  height: 100%;
  position: relative;
}

.simpleblock-group {
  margin: 0px -3px 2.5rem 0px;
}

.simpleblock-container {
  margin: 0px -1px -1px 0px;
  padding: 0;
}

.simpleblock-container:hover,
.simpleblock-container:has(.simpleblock-element:focus) {
  z-index: 2;
}

.simpleblock-element {
  display: block;
  height: 100%;
  text-decoration: none;
  color: var(--cbs-dark-aqua);
  background-color: var(--cbs-white);
  border-color: var(--cbs-gray);
  border-width: 1px;
  border-style: solid;
  padding: 1.5rem;
  text-align: center;
}

.simpleblock-element:hover {
  text-decoration: none;
}

.container-block-text {
  display: flex;
  flex-flow: column nowrap;
}

.textblock-element h3 {
  color: var(--cbs-dark-aqua);
  margin-top: 0;
  margin-bottom: 1rem;
  flex: 0 0 0%;
}

.simpleblock-element h3 {
  color: var(--cbs-dark-aqua);
  margin-top: 2rem;
  margin-bottom: 0;
}

.textblock-element:hover {
  border-color: var(--cbs-web-text);
}

.simpleblock-element:hover,
.simpleblock-element:hover h3 {
  background-color: var(--cbs-dark-green);
  color: var(--cbs-white);
}

.simpleblock-element:hover img {
  filter: brightness(0) invert(1);
}

.block-title {
  font-size: var(--font-size-medium);
  display: block;
  margin-top: 3rem;
}

.double-title {
  margin-top: 2rem;
}

#MBW-content img {
  height: 3rem;
  width: 3rem;
  fill: var(--cbs-dark-aqua);
  margin-right: 1rem;
  margin-bottom: 0.5rem;
}

#SDG-content img {
  height: 4rem;
  width: 4rem;
  margin-right: 2rem;
}

.textblock-link {
  position: absolute;
  display: inline-table;
  height: 100%;
  width: calc(100% - 30px);
  margin-left: -5rem;
  margin-top: -1rem;
}

.textblock-link span {
  color: var(--cbs-dark-aqua);
  text-decoration: underline;
  position: absolute;
  bottom: 1.5rem;
}

.link-container span::before {
  font-family: FontAwesome;
  color: var(--cbs-brand-color);
  content: "";
  position: absolute;
  margin-left: -20px;
}
.link-container span {
  padding-left: 1.5rem;
  padding-right: 0.5rem;
  width: auto;
}
#explanation-container span {
  margin-left: calc(0.5 * var(--bs-gutter-x));
}
.SDG-container {
  margin-top: 3.5rem;
}

.sdg-block a {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.download-container a,
.SDG-container a,
#explanation-container a {
  text-decoration: none;
}
.download-container a:hover,
.SDG-container a:hover,
#explanation-container a:hover {
  text-decoration: underline;
}

#explanation-container {
  height: 192px;
}

.sdg-block {
  margin-bottom: var(--spacing-large);
}

@media only screen and (min-width: 768px) {
  #edition-container span {
    width: 50%;
  }

  #edition-container,
  #explanation-container {
    height: 144px;
  }

  .simpleblock-element {
    text-align: left;
  }

  .sdg-block {
    margin-bottom: 5rem;
  }
}

@media only screen and (min-width: 992px) {
  #edition-container span {
    width: 50%;
  }

  #edition-container,
  #explanation-container {
    height: 144px;
  }
}

@media only screen and (min-width: 1200px) {
  #edition-container span {
    width: 33%;
  }

  #explanation-container {
    height: 96px;
  }
}