@layer theme {
  @font-face {
    font-weight: 200 900;
    src:
      url('/static/FiraCode.woff2') format('woff2 supports variations'),
      url('/static/FiraCode.woff2') format('woff2-variations');
    font-family: 'Fira Code';
  }

  @font-face {
    font-weight: 200 900;
    font-stretch: 75% 125%;
    src:
      url('/static/MonaSans.woff2') format('woff2 supports variations'),
      url('/static/MonaSans.woff2') format('woff2-variations');
    font-family: 'Mona Sans';
  }

  :root {
    /** generated with postcss-color-function
    --apex-blue: color(#00274c);
    --columbia-blue: color(#bdd5ea);
    --pacific-cyan: color(#45a2c4);

    --signal-white: color(#ecece7) ;
    --signal-black: color(#2b2b2c) ;

    --signal-red: color(#9b2423) ;
    --signal-yellow: color(#f9a900) ;
    --signal-green: color(#237f52) ;
    --signal-blue: color(#005387) ;

    --signal-red-90: color(#9b2423 lightness(90%)) ;
    --signal-yellow-90: color(#f9a900 lightness(90%)) ;
    --signal-green-90: color(#237f52 lightness(90%)) ;
    --signal-blue-90: color(#005387 lightness(90%)) ;
    */

    --bg-100: hsla(217, 36%, 97%, 1);

    --text-300: hsla(217, 20%, 55%, 1);

    --shadow-100: hsla(217, 40%, 40%, 0.2);
    --shadow-200: hsla(217, 40%, 40%, 0.1);

    --apex-blue: rgb(0, 39, 76);
    --apex-orange: hsla(27, 100%, 50%, 1);
    --columbia-blue: rgb(189, 213, 234);
    --pacific-cyan: rgb(69, 162, 196);

    --signal-white: rgb(236, 236, 231);
    --signal-black: rgb(43, 43, 44);

    --signal-red: rgb(155, 36, 35);
    --signal-yellow: rgb(249, 169, 0);
    --signal-green: rgb(35, 127, 82);
    --signal-blue: rgb(0, 83, 135);

    --signal-red-90: rgb(246, 213, 213);
    --signal-yellow-90: rgb(255, 239, 204);
    --signal-green-90: rgb(215, 244, 230);
    --signal-blue-90: rgb(204, 235, 255);
  }

  html {
    color: var(--apex-blue);
    font-size: 16.4609px;
    line-height: 24px;
    font-family: 'Mona Sans';
  }

  blockquote::before,
  button::before,
  figcaption::after,
  label::before,
  li::before,
  p::before,
  td::before,
  th::before {
    display: table;
    margin-bottom: -0.365em;
    content: '';
  }

  blockquote::after,
  button::after,
  figcaption::after,
  label::after,
  li::after,
  p::after,
  td::after,
  th::after {
    display: table;
    margin-top: -0.364em;
    content: '';
  }

  blockquote.tt,
  button.tt,
  figcaption::after,
  label.tt,
  li.tt,
  p.tt,
  td.tt,
  th.tt {
    font-size: 17.0306px;
    line-height: 24px;
    font-family: 'Fira Code';
  }

  blockquote.tt::before,
  button.tt::before,
  figcaption::after,
  label.tt::before,
  li.tt::before,
  p.tt::before,
  td.tt::before,
  th.tt::before {
    display: table;
    margin-bottom: -0.3077em;
    content: '';
  }

  blockquote.tt::after,
  button.tt::after,
  figcaption.tt::after,
  label.tt::after,
  li.tt::after,
  p.tt::after,
  td.tt::after,
  th.tt::after {
    display: table;
    margin-top: -0.3969em;
    content: '';
  }

  h1,
  .h1 {
    font-size: 49.3827px;
    line-height: 54px;
  }

  h1::before,
  .h1::before {
    display: table;
    margin-bottom: -0.1828em;
    content: '';
  }

  h1::after,
  .h1::after {
    display: table;
    margin-top: -0.1818em;
    content: '';
  }

  h2,
  .h2 {
    font-size: 41.1523px;
    line-height: 48px;
  }

  h2::before,
  .h2::before {
    display: table;
    margin-bottom: -0.2192em;
    content: '';
  }

  h2::after,
  .h2::after {
    display: table;
    margin-top: -0.2182em;
    content: '';
  }

  h3,
  .h3 {
    font-size: 32.9218px;
    line-height: 42px;
  }

  h3::before,
  .h3::before {
    display: table;
    margin-bottom: -0.2739em;
    content: '';
  }

  h3::after,
  .h3::after {
    display: table;
    margin-top: -0.2729em;
    content: '';
  }

  h4,
  .h4 {
    font-size: 24.6914px;
    line-height: 36px;
  }

  h4::before,
  .h4::before {
    display: table;
    margin-bottom: -0.365em;
    content: '';
  }

  h4::after,
  .h4::after {
    display: table;
    margin-top: -0.364em;
    content: '';
  }

  h5,
  .h5 {
    font-size: 20.5761px;
    line-height: 33px;
  }

  h5::before,
  .h5::before {
    display: table;
    margin-bottom: -0.4379em;
    content: '';
  }

  h5::after,
  .h5::after {
    display: table;
    margin-top: -0.4369em;
    content: '';
  }

  h6,
  .h6 {
    font-size: 16.4609px;
    line-height: 30px;
  }

  h6::before,
  .h6::before {
    display: table;
    margin-bottom: -0.5473em;
    content: '';
  }

  h6::after,
  .h6::after {
    display: table;
    margin-top: -0.5463em;
    content: '';
  }

  body {
    display: grid;
    grid-template:
      'header' auto
      'main' minmax(0, auto)
      / 1fr;
    background: var(--bg-100);
  }

  body > header {
    display: grid;
    grid-template:
      'logo title login logout' auto
      'logo title groups logout' auto
      / max-content 1fr max-content max-content;
    gap: 16px;
    border-bottom: 1px solid var(--shadow-200);
    background: white;

    padding: 16px;
    width: 100%;
  }

  body > header > figure {
    grid-area: logo;
    place-self: center start;

    margin: 0;
  }

  body > header > button {
    grid-area: logout;
    place-self: center;

    margin: 0;
  }

  body > header > .title {
    grid-area: title;
    align-self: center;
    justify-self: start;

    margin: 1rem;

    font-weight: 400;
  }

  body > header > .login {
    grid-area: login;
    place-self: end;

    margin: 0;
  }

  body > header > .groups {
    grid-area: groups;
    place-self: start;

    margin: 0;
  }

  main {
    grid-area: main;
    justify-self: center;

    padding: 0 8px 16px;
    width: 100%;
    max-width: 1000px;
  }

  main > h1 {
    margin: 64px 0 32px;
    font-weight: 400;
    text-align: center;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;

    width: 100%;
    overflow: hidden;
  }

  thead > tr:not(.group_name) {
    border-bottom: 1px solid var(--shadow-200);
    background: white;
  }

  tr:not(.group_name) > th {
    color: var(--text-300);
    font-weight: 600;
    font-stretch: 125%;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.75px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  thead > tr:not(.group_name) > th:first-child {
    border-radius: 16px 0 0 0;
  }

  thead > tr:not(.group_name) > th:last-child {
    border-radius: 0 16px 0 0;
  }

  thead > tr:not(.group_name) > th:only-child {
    border-radius: 16px 16px 0 0;
  }

  th,
  td {
    padding-top: 16px;
    padding-right: 16px;
    padding-bottom: 16px;
    text-align: left;
  }

  tr:not(.group_name) > th:first-child,
  tbody td:first-child {
    padding-left: 16px;
  }

  .aligned {
    tr:not(.group_name) > th:last-child:not(:only-child),
    td:last-child:not(:only-child) {
      text-align: right;
    }
  }

  tbody > tr {
    background: white;
  }

  tbody > tr.hidden {
    display: none;
  }

  tbody > tr:not(:nth-last-child(1 of .visible)) {
    border-bottom: 1px solid var(--shadow-200);
  }

  tbody > tr:nth-last-child(1 of .visible) > td:first-child {
    border-radius: 0 0 0 16px;
  }

  tbody > tr:nth-last-child(1 of .visible) > td:last-child {
    border-radius: 0 0 16px 0;
  }

  tbody > tr:nth-last-child(1 of .visible) > td:only-child {
    border-radius: 0 0 16px 16px;
  }

  .uptime {
    display: contents;
    font-size: calc(1em * 0.8);
  }

  a,
  .link {
    color: var(--apex-blue);
    /*    font-weight: 400;*/
    text-decoration: none;
  }

  a[href],
  .link {
    cursor: pointer;
  }

  a[href]:hover,
  .link:hover {
    color: var(--pacific-cyan);
  }
}