@font-face {
    font-display: block;
    font-family: Barlow;
    font-style: normal;
    font-weight: 400;
    src: url(/static/font/barlow-latin-regular.ba589f78.woff2)format("woff2")
}

@font-face {
    font-display: block;
    font-family: Barlow;
    font-style: normal;
    font-weight: 600;
    src: url(/static/font/barlow-latin-600.e77288c3.woff2)format("woff2")
}

@font-face {
    font-display: block;
    font-family: Public Sans;
    font-style: normal;
    font-weight: 400;
    src: url(/static/font/public-sans-latin-400.940dad75.woff2)format("woff2")
}

@font-face {
    font-display: block;
    font-family: Public Sans;
    font-style: normal;
    font-weight: 500;
    src: url(/static/font/public-sans-latin-500.42240429.woff2)format("woff2")
}

:root {
    --color-front: #00BFFF;
    --color-back: #1e1e1e;
    --color-pool: #107996;
    --color-grey: #666;
    --color-light-grey: #8470FF;
    --color-orange: orange;
    --color-red: #ff3434
}

@media (prefers-color-scheme:dark) {
    :root {
        --color-front: #00BFFF;
        --color-back: #1e1e1e;
        --color-pool: #53d5fd;
        --color-grey: #919eab;
        --color-light-grey: #8470FF
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    height: 100%;
    color: var(--color-front);
    background: var(--color-back);
    font-family: Public Sans, sans-serif;
    font-size: 16px
}

.font-barlow {
    font-family: Barlow, sans-serif
}

.font-monospace,
code {
    font-family: ui-monospace, Menlo, Monaco, Cascadia Mono, Segoe UI Mono, Roboto Mono, Oxygen Mono, Ubuntu Mono, Source Code Pro, Fira Mono, Droid Sans Mono, Consolas, Courier New, monospace
}

button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: 0 0;
    border: 0;
    outline: none
}

footer {
    z-index: 1;
    border-bottom: 1rem solid var(--color-pool);
    background: hsl(from var(--color-back)h s calc(l - 2));
    height: 3.5rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0
}

footer .progress {
    background-color: var(--color-light-grey);
    will-change: width;
    width: 100%;
    height: 1px;
    transition: width 1s linear
}

footer .wrapper {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1180px;
    height: 2.5rem;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex
}

footer img,
footer svg {
    display: block
}

footer figure {
    display: flex;
    position: relative;
    top: .75rem
}

footer figure figcaption {
    letter-spacing: .1rem;
    font-size: .85rem;
    position: relative;
    top: .75rem
}

footer div {
    align-items: center;
    gap: 1.25rem;
    display: flex
}

footer div p {
    flex-direction: column;
    align-items: end;
    font-size: .75rem;
    display: flex
}

footer div span {
    color: var(--color-grey);
    pointer-events: none
}

footer svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: var(--color-grey);
    transition: fill .25s
}

footer svg:hover {
    fill: var(--color-front)
}

.tooltip {
    background: var(--color-light-grey);
    color: var(--color-front);
    white-space: nowrap;
    z-index: 999;
    border-radius: .25rem;
    padding: .25rem .5rem;
    font-size: .75rem;
    position: absolute;
    transform: translate(-50%)
}

.tooltip:after {
    content: "";
    border-style: solid;
    border-width: .25rem;
    border-color: var(--color-light-grey)#0000 #0000 #0000;
    margin-left: -.25rem;
    position: absolute;
    top: 100%;
    left: 50%
}

.dashboard {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem 3.5rem
}

.tiles {
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 -2rem;
    display: flex
}

@media (min-width:768px) {
    .tiles {
        grid-template-columns: 1fr 1fr;
        display: grid
    }
}

@media (min-width:1024px) {
    .tiles {
        grid-template-columns: auto auto auto
    }
}

.tile {
    width: 100%;
    overflow: hidden
}

@media (min-width:768px) {
    .tile {
        min-height: 292px
    }
}

.tile-headline {
    text-align: center;
    margin: 2rem 0 0;
    font-size: 1.2rem
}

.tile-items {
    grid-template-columns: 50% 50%;
    padding: 1rem 0;
    list-style-type: none;
    display: grid
}

@media (min-width:1024px) {
    .tile-items {
        grid-template-columns: auto auto
    }
}

.tile-item {
    margin: 1rem 0;
    padding: 0 2rem
}

.tile-item:nth-child(2n) {
    border-left: 1px solid var(--color-light-grey)
}

@media (max-width:767px) {
    .tile+.tile .tile-headline {
        margin: 0
    }
}

.metric-label {
    color: var(--color-grey);
    font-size: 1rem;
    line-height: 1rem;
    display: block
}

.metric-headline {
    white-space: nowrap;
    margin: 1rem 0 0;
    font-size: 2rem
}

.metric-headline>span {
    color: var(--color-grey);
    padding-left: .1rem;
    font-size: 1.5rem
}

.divider {
    justify-content: space-between;
    align-items: center;
    display: flex
}

.divider span {
    color: var(--color-grey)
}

.divider strong {
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.divider strong.hidden {
    pointer-events: none;
    -webkit-text-security: disc
}

.divider div {
    align-items: center;
    gap: .75rem;
    display: flex
}

.divider div:first-of-type {
    max-width: calc(100% - 63px)
}

.divider button {
    cursor: pointer;
    width: 1.2rem
}

@media (hover:hover) {

    .divider button .arrow:hover,
    .divider button .eye:hover,
    .divider button .eye:hover:before {
        border-color: var(--color-front)
    }

    .divider button .eye:hover:after {
        background-color: var(--color-front)
    }
}

.divider .arrow {
    border: solid var(--color-grey);
    transform-origin: 50%;
    border-width: 0 2px 2px 0;
    padding: 6px;
    transition: transform .25s, border-color .25s;
    display: inline-block;
    position: relative;
    top: -1px
}

.divider .arrow.up {
    top: 6px;
    transform: rotate(-135deg)
}

.divider .arrow.down {
    transform: rotate(45deg)
}

.divider .eye {
    border: solid 2px var(--color-grey);
    border-radius: 75% 35%;
    width: 1rem;
    height: 1rem;
    display: block;
    position: relative;
    transform: rotate(45deg)
}

.divider .eye,
.divider .eye:before {
    transition: border-color .25s
}

.divider .eye:after {
    transition: background-color .25s
}

.divider .eye:before {
    content: "";
    border: solid 2px var(--color-grey);
    border-radius: 50%;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px
}

.divider .eye.hidden:after {
    content: "";
    background-color: var(--color-grey);
    width: 1.25rem;
    height: 2px;
    position: absolute;
    top: .3rem;
    left: -.25rem;
    transform: rotate(-90deg)
}

.stepper {
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    width: 30rem;
    max-width: 100%;
    margin: calc(50vh - 1.75rem) auto 0;
    padding: 0 2rem;
    transform: translateY(-50%)
}

.stepper,
.stepper ul,
.stepper li,
.stepper li:before {
    align-items: center;
    display: flex
}

.stepper .steps {
    counter-reset: list-number;
    width: 100%;
    padding: 0 2rem;
    list-style: none
}

.stepper .steps hr {
    background: var(--color-light-grey);
    border: 0;
    flex: 1 1 0;
    height: .125rem;
    margin: 0 1rem;
    transition: background-color .25s
}

.stepper .steps li {
    color: var(--color-grey)
}

.stepper .steps li:before {
    counter-increment: list-number;
    content: counter(list-number);
    border: .125rem solid var(--color-light-grey);
    border-radius: 50%;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: .5rem;
    transition: border-color .25s
}

.stepper .steps li:first-child {
    color: var(--color-front);
    flex: auto;
    transition: color .25s
}

.stepper .steps li:first-child:before {
    border-color: var(--color-front)
}

.stepper .panel {
    border: 1px solid var(--color-light-grey);
    border-radius: .5rem;
    width: 100%;
    padding: 1.85rem 2rem 2rem
}

.stepper .panel li {
    flex-direction: column;
    width: 100%;
    display: flex
}

.stepper .panel li:first-child p {
    text-align: center;
    color: var(--color-grey)
}

.stepper .panel li:last-child {
    display: none
}

.stepper .panel h3 {
    text-align: center;
    width: 100%;
    margin: 0 0 1rem;
    font-size: 1.2rem
}

.stepper .panel table td:first-child {
    color: var(--color-grey);
    padding-right: 1rem
}

.stepper .panel table td code {
    font-size: .85rem
}

.stepper[data-step="2"] .steps li:last-child {
    color: var(--color-front)
}

.stepper[data-step="2"] .steps li:last-child:before {
    border-color: var(--color-front)
}

.stepper[data-step="2"] .steps hr {
    background-color: var(--color-front)
}

.stepper[data-step="2"] .panel li:first-child {
    display: none
}

.stepper[data-step="2"] .panel li:last-child {
    display: flex
}

.user {
    margin: 1rem 0
}

.user+.user {
    margin-top: 2.5rem
}

.user table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0
}

@media (max-width:1023px) {
    .user table {
        display: block;
        overflow-x: auto
    }
}

.user tr:first-child th {
    font-size: 1.2rem
}

.user tr:not(:first-child) th {
    color: var(--color-grey);
    text-align: right;
    font-size: 1rem;
    font-weight: 400
}

.user tr:last-child td {
    border-top: 1px solid var(--color-light-grey);
    padding-top: 1rem
}

.user tr:not(:first-child) th:last-child,
.user tr td:last-child {
    padding-right: 0
}

.user th,
.user td {
    white-space: nowrap;
    padding: .5em
}

.user th:first-child,
.user td:first-child {
    padding-left: 0;
    text-align: left !important
}

.user td {
    text-align: right;
    font-family: Barlow, sans-serif;
    font-size: 1.2rem;
    font-weight: 700
}

.user td>span {
    color: var(--color-grey);
    padding-left: .2rem;
    font-size: 1rem
}

.chart {
    margin: 0 0 2.5rem;
    position: relative
}

.chart ul {
    border-bottom: 1px solid var(--color-light-grey);
    flex-direction: row;
    justify-content: stretch;
    align-items: stretch;
    gap: 1px;
    width: 100%;
    height: 3rem;
    padding: 0 0 1px;
    list-style: none;
    display: flex;
    position: relative
}

.chart li {
    cursor: pointer;
    background: var(--color-light-grey);
    max-width: calc(1.66667% - .983333px);
    clip-path: polygon(0% calc(100%*(1 - var(--start))), 100% calc(100%*(1 - var(--end))), 100% 100%, 0% 100%);
    flex: 1 1 0
}

.chart li:first-child {
    display: none
}

.chart small {
    color: var(--color-grey);
    justify-content: center;
    width: 100%;
    line-height: 3rem;
    display: flex;
    position: absolute;
    top: 0
}

.loader {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh - 3.5rem);
    display: flex
}

.loader span {
    aspect-ratio: 1;
    background: var(--color-grey);
    width: 1.5rem;
    box-shadow: 0 0 0 0 var(--color-light-grey);
    border-radius: 50%;
    animation: 1s ease-in-out infinite pulse
}

@keyframes pulse {
    to {
        opacity: 0;
        box-shadow: 0 0 0 2rem #ffffff1a
    }
}