.navigation-container, .block-container, .sub-navigation-container {
  width: 100%;
  max-width: 1368px;
  margin: 0 auto;
}

.navigation-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  z-index: 20;
  height: 60px;

  a {
    font-family: config("fonts.sans");
    font-weight: config("fontWeights.semibold");
    font-size: 15px;
    line-height: 20px;
    color: config("colors.white");
    text-decoration: none;
  }
}

.block-container {
  padding: 15px;

  @screen md {
    padding: 60px;
  }

  .block-content {
    width: 100%;

    .top-content {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 22px;
      @screen md {
        margin-bottom: 45px;
      }

      .sidebar {
        width: 100%;
        padding-left: 14px;

        @screen mdxl {
          width: 30%;
          padding-left: 25px;
        }
      }

      .content {
        width: 100%;
        /* padding-left: 14px; */
        margin-bottom: 15px;
        @screen md {
          width: 70%;
          margin-bottom: 0;
          padding-left: 60px;
        }
      }
    }

    .content {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;

      &.how-much-spent {
        @screen md {
          min-height: 440px;
        }
      }

      &.amount-pensionists {
        @screen md {
          min-height: 440px;
        }
      }

      &.portugal-medium-value {
        @screen md {
          min-height: 440px;
        }
        .sidebar {
          padding-bottom: 200px;
        }
      }

      &.pensionists-sustainable {
        @screen md {
          min-height: 410px;
        }
        .sidebar {
          padding-bottom: 190px;
        }
      }

      &.future-amount-spent {
        @screen md {
          min-height: 410px;
        }
      }

      &.future-lifestyle {
        @screen md {
          min-height: 440px;
        }
      }

      &.breaks {
        @screen md {
          min-height: 410px;
        }
        .sidebar {
          padding-bottom: 160px;
        }
      }

      &.poverty {
        @screen md {
          min-height: 330px;
        }
      }
      .sidebar {
        width: 30%;
        position: relative;
        padding-bottom: 130px;
        display: none;

        @screen md {
          display: block;
        }

        .icon {
          position: absolute;
          left: 0;
          bottom: 0;
          .icon-container {
            &.how-much-spent {
              max-width: 125px;
            }

            &.amount-pensionists {
              max-width: 155px;
            }

            &.portugal-medium-value {
              max-width: 164px;
            }

            &.pensionists-sustainable {
              max-width: 133px;
            }

            &.future-amount-spent {
              margin-left: 15px;
              max-width: 112px;
            }

            &.future-lifestyle {
              max-width: 120px;
            }

            &.breaks {
              max-width: 125px;
            }

            &.poverty {
              max-width: 185px;
            }

            svg {
              width: 100%;
              display: block;
            }
          }
        }
      }

      .charts {
        width: 100%;

        @screen md {
          width: 70%;
          padding-left: 60px;
        }
      }
    }
  }
}
.chart-tabs {
  position: relative;
  .content {
    width: 100%;
    margin-bottom: 15px;
  }
  .chart-content {
    margin-bottom: 15px;
    @screen md {
      margin-bottom: unset;
    }
  }
}
.graph-overlay {
  transition: all 0.2s ease-in;
}