html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

html {
    font-family: sans-serif
}

:root {
    color-schemes: light dark;
    --background-color: #273749;
    --foreground-color: #aae1db;
    --foreground-color-2: #e27584;
    --foreground-color-3: #dfdfdf;
    --table-border-color: #5e6b7a;
    --loader-background-color: rgb(0, 143, 251);
    --loader-border-color: rgb(0, 116, 204);
    --loader-2-background-color: rgb(0, 227, 150);
    --loader-2-border-color: rgb(0, 204, 136);
    --loader-3-background-color: rgb(254, 176, 25);
    --loader-3-border-color: rgb(228, 153, 1);
    --loader-4-background-color: rgb(255, 69, 96);
    --loader-4-border-color: rgb(255, 51, 82);
    --chart-header-color: #15ae83;
    --chart-background-color: #273749;
    --chart-border-color: #5e6b7a;
    --color-speed: #ce4559;
    --color-power: #cf5d9d;
    --color-current: #f2cf6f;
    --color-battery: #99cabf;
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    background-color: var(--background-color);
    color: var(--foreground-color);
}

html, .pure-g [class*="pure-u"] {
    font-family: SF Pro Text, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
    text-rendering: geometricPrecision;
}

h1 {
    color: var(--foreground-color);
    font-weight: normal;
}

h2 {
    color: var(--foreground-color-2);
    font-weight: normal;
    margin-bottom: 0;
}

#upload_help {
    font-size: small;
    padding-top: 5px;
}

#body-wrap {
    max-width: 1198px;
    margin: 1em auto 0;
    padding-bottom: 2.5em;
    padding-left: 3px;
    padding-right: 3px;
}

.chart_block {
    border: solid 1px var(--chart-border-color);
    border-radius: 2px;
    background-color: var(--chart-background-color);
    padding: 5px;
    padding-left: 22px;
    margin-bottom: 10px;
    margin-top: 13px;
    transition-delay: 0s;
    opacity: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: opacity 0.3s ease-in, -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.3s ease-in, -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition: opacity 0.3s ease-in, transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-delay: 0s, 0s, 0s;
}

.chart_block.show {
    opacity: 1;
}

.table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 15px;
    border: solid 1px var(--table-border-color);
}

#info_block {
    margin-top: 25px;
    margin-bottom: 15px;
}

#info_block td {
    border-color: var(--table-border-color);
    border-style: solid;
    border-width: 1px 0;
    padding: .3rem .48824rem;
    font-size: .91em;
    color: var(--foreground-color-3);
}

#info_block td.header {
    color: var(--foreground-color);
    min-width: 6em;
}

#version {
    position: absolute;
    bottom: 3px;
    right: 5px;
    color: var(--foreground-color);
    font-size: small;
    opacity: 0.5;
    visibility: hidden;
}

.u-legend.u-inline .u-series:first-child .u-value {
    width: 165px;
    text-align: left;
    color: var(--foreground-color-3);
}

.u-legend.u-inline .u-series .u-value {
    width: 90px;
    text-align: left;
}

.uplot {

}

.u-legend {
    text-align: left;
    padding-left: 15px;
}

.u-inline tr {
    margin-right: 8px;
}

.u-label {
    font-size: 13px;
    font-weight: normal !important;
}

.u-title {
    color: var(--chart-header-color);
    font-weight: normal !important;
}

@-webkit-keyframes lds-ellipsis1 {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@-webkit-keyframes lds-ellipsis3 {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(0)
    }
}

@-webkit-keyframes lds-ellipsis2 {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(24px)
    }
}


@media only screen and (min-width: 813px) {
    .u-legend {
        text-align: center;
    }
}

@media only screen and (min-width: 913px) {
    #body-wrap {
    }
}


@media screen and (-webkit-min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) {
    body {
        font-synthesis: none;
        -moz-font-feature-settings: "kern";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        direction: ltr;
        text-align: left
    }
}