.map-system {
  min-height: calc( 100vh - 2.125rem );
  padding: 1rem;

  .subtitle {
    text-align: right;
    font-size: 0.75rem;
    font-weight: 900;
  }

  .section {
    margin: 1rem 0;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--base0);
    margin-bottom: 0.5rem;

    h2 {
      font-size: 1.5rem;
      line-height: 2rem;
      margin: 0;
    }

    .add {
      appearance: none;
      border: none;
      background: transparent;
      width: 2rem;
      height: 2rem;
      padding: 0.5rem;
      margin: 0;
      color: currentColor;
      cursor: pointer;
    }
  }

  .system-header {
    display: flex;
    gap: 0.5;
    margin-bottom: 0.5rem;

    .left {
      flex-grow: 1;

      .region-and-constellation {
        display: flex;
        gap: 0.5rem;
        font-size: 0.875rem;
        font-weight: 900;
        text-transform: uppercase;
      }

      .system-name {
        font-size: 2rem;
        font-weight: 700;
      }

      .markets {
        align-items: center;
        font-size: 1.25rem;
        font-weight: 900;
        padding-left: 0.5rem;
        border-left: 1px solid var(--base0);

        span { cursor: pointer; }
        .jita { color: var(--color6); }
        .amarr { color: var(--color1); }
        .hek { color: var(--color2); }
        .dodixie { color: var(--color7); }

        .tip {
          font-weight: normal;
        }
      }

      .security-status, .system-class, .system-effect {
        font-size: 1.25rem;
        font-weight: bold;
      }
    }

    .right {
      text-align: right;

      .route {
        font-size: 1.25rem;
        font-weight: bold;
        margin-bottom: 0.375rem;
      }
    }
  }

  .extras {
    padding: 0;
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--base0);

    .zkill, .dotlan, .anoikis {
      a {
        display: inline-block;
        padding: 0.5rem 0.25rem;
        font-weight: 900;

        &:after{
          content:"\2197";
        }
      }
    }
  }

  .statics {
    font-weight: bold;
    text-align: right;

    span {
      display: inline-block;

      &:not(:first-child):before {
        content: "/";
        color: var(--base00);
      }
    }
  }
}