/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
.charts-area {
  position: relative;
  padding-left: calc(40px + 90px / 4 - 1em); }
  @media (min-width: 981px) {
    .charts-area {
      padding-left: calc(60px + 90px / 2); } }
  .charts-area .side-content {
    position: absolute;
    writing-mode: vertical-lr;
    bottom: 0;
    left: 0;
    transform: rotate(-180deg);
    text-transform: uppercase;
    font-family: "JetBrains Mono", Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 90%; }
  .charts-area .charts {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: .1em;
    padding-left: 1em;
    height: 200px; }
    @media (min-width: 768px) {
      .charts-area .charts {
        height: 350px;
        margin-top: -50px; } }
    .charts-area .charts .chart {
      position: relative;
      width: 40px;
      padding: .2em;
      background: linear-gradient(180deg, #00FFA0 0%, rgba(0, 255, 160, 0.5) 100%);
      color: var(--dark-blue);
      max-height: 0;
      height: 100%;
      min-height: 50px;
      transition: max-height 1s ease-in; }
      @media (min-width: 768px) {
        .charts-area .charts .chart {
          width: 75px;
          min-height: 70px; } }
      .charts-area .charts .chart:nth-child(1n + 1) {
        background: linear-gradient(180deg, #00FFA0 0%, rgba(0, 255, 160, 0.5) 100%); }
      .charts-area .charts .chart:nth-child(2n + 1) {
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.5) 100%); }
      .charts-area .charts .chart:nth-child(3n + 1) {
        background: linear-gradient(180deg, #2C435E 0%, rgba(44, 67, 94, 0.5) 100%);
        color: var(--green); }
      .charts-area .charts .chart .number {
        position: absolute;
        top: 5px;
        font-family: "JetBrains Mono", Helvetica, Arial, sans-serif;
        left: 50%;
        line-height: 1;
        transform: translateX(-50%); }
        @media (min-width: 768px) {
          .charts-area .charts .chart .number {
            top: 1em;
            font-size: 24px; } }
      .charts-area .charts .chart .content {
        position: absolute;
        bottom: 1em;
        left: .2em;
        font-size: 9px;
        line-height: 1;
        text-transform: uppercase;
        word-break: break-word;
        font-family: "JetBrains Mono", Helvetica, Arial, sans-serif;
        max-width: calc(40px - .4em);
        width: 100%;
        padding: 0 .5em; }
        @media (min-width: 768px) {
          .charts-area .charts .chart .content {
            max-width: calc(75px - .4em); } }

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