:root
{
    --bright: white;
    --foreground: #313532;
    --light: #C8BFC7;
    --background: #F6F4F5;
    --background-green: #C7EDBF;
    --background-warning: #e5c7cd;
    --link: #60482E;
    --green: #7A9B76;
    --order: #006a00;
    --unit: 1vw;
    --font-unit: 1vw;
    --error: #B53C17;
    --success: #90C28A;
    --logo: #313149;
    /*button & menu*/
    --button: var(--foreground);
    --button-success: #538C4F;
    --button-hover: white;
    --button-order: #5dff5d;
    --button-order-hover: #c5ffc5;
    --menu: #454A46;
    --menu-hover: var(--logo);
    --help: #2e76ff;
    --lighter: rgba(0, 0, 127, 0.2);
    --purple: orchid;
    --input: white;
    --input-border-focus: #9A275A;
    --chart-background: white;
    --chart-point: black;
    --offline: #e4572e33;
    --on: #7a9b764d;
    /*backgrounds*/
    --back1: #52B78855;
    --back2: #E8DDB577;
    --back3: #95B8D155;
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --error: #E4572E;
        --success: #7A9B76;
        --foreground: #C8BFC7;
        --background: #313149;
        --background-warning: #58224b;
        --background-green: #2D6F1F;
        --link: #cdb398;
        --logo: white;
        --order: #5cde60;
        --lighter: rgba(255, 255, 255, 0.2);
        --green: #71a86b;
        /*button & menu*/
        --button: var(--foreground);
        --button-success: #5D9D58;
        --button-hover: #49496E;
        --menu: var(--foreground);
        --menu-hover: white;
        /*input*/
        --input: #C8BFC7;
        --input-border-focus: #C43173;
        /*chart*/
        --chart-background: var(--background);
        --chart-point: white;
        /*backgrounds*/
        --back2: #E8DD8555;
    }
}

*
{
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

html, body
{
    position: relative;
    overflow-x: hidden;
    background-color: var(--background);
    color: var(--foreground);
    min-height: 100vh;
}

@media (min-width: 800px)
{
    :root
    {
        --unit: 8px;
        --font-unit: 8px;
    }

    body
    {
        margin-left: calc(50vw - 400px);
        margin-right: calc(50vw - 400px);
    }
}

@media (max-width: 480px)
{
    :root
    {
        --font-unit: 4.8px;
    }
}

body, td, th
{
    font-size: 17px;
}

a
{
    color: var(--link);
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}

h1
{
    font-weight: 300;
    font-size: calc(var(--font-unit) * 10);
    margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 6) 0;
}

h2
{
    font-weight: 300;
    font-size: calc(var(--font-unit) * 7);
    margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 6) 0;
}

#consent
{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: calc(var(--unit) * 2) calc(var(--unit) * 4);
    background-color: var(--background-green);
}

    #consent::after
    {
        content: '✖';
        font-size: calc(var(--unit) * 3);
        position: absolute;
        display: block;
        top: 50%;
        transform: translateY(-50%);
        right: calc(var(--unit) * 4);
    }

*:focus
{
    outline: none;
}

input,
select
{
    padding: 0.5em;
    background-color: var(--input);
    border: 2px solid var(--foreground);
    color: black;
}

    input:focus,
    select:focus
    {
        border: 2px solid var(--input-border-focus);
    }

button
{
    border-radius: 1.3em;
    padding: 0.5em 2em;
    background-color: var(--background);
    border: 2px solid var(--button);
    color: var(--button);
    font-weight: 500;
    cursor: pointer;
}

    button.tiny
    {
        padding: 0 4px;
        font-weight: 400;
    }

        button.tiny svg
        {
            height: 12px;
            display: inline-block;
            fill: var(--foreground);
            margin: 1px 4px 0 1px;
        }

    button.small
    {
        padding: 2px 8px 5px 8px;
        font-weight: 400;
    }

        button.small svg
        {
            height: 14px;
            display: inline-block;
            fill: var(--foreground);
            margin-right: 4px;
            transform: translateY(3px);
        }

    button:hover
    {
        background-color: var(--button-hover);
    }

    button.success
    {
        color: var(--button-success);
        border: 2px solid var(--button-success);
    }

    button.order
    {
        background-color: var(--button-order);
        color: black;
        border: 2px solid black;
    }

        button.order:hover
        {
            background-color: var(--button-order-hover);
        }

.success
{
    color: var(--success);
}

.error
{
    color: var(--error);
}

svg.text
{
    fill: var(--foreground);
    height: 0.8em;
    transform: translateY(0.02em);
}

code
{
    font-family: Consolas, monospace;
    white-space: nowrap;
    font-weight: 600;
}

code i
{
    font-size: 65%;
}

.ellipsis::after
{
    content: "…";
}

footer
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 4em 0;
    font-size: 15px;
    line-height: 160%;
}

footer > div:last-child > div
{
    text-align: right;
}

.impersonate body
{
    background: repeating-linear-gradient(45deg, #606dbc22, #606dbc22 50px, transparent 50px, transparent 100px);
}

.impersonate #impersonate
{
    display: block;
    position: fixed;
    left: 10px;
    top: 10px;
}

.back1
{
    background-color: var(--back1);
}

.back2
{
    background-color: var(--back2);
}

.back3
{
    background-color: var(--back3);
}

p.small,
div.small
{
    font-size: 12.5px;
}

svg.foreground
{
    fill: var(--foreground);
}

.green
{
    color: var(--green);
}

.pre
{
    font-family: Consolas, monospace;
    white-space: pre;
}
#my main
{
    margin-bottom: 4em;
}

#my input[type=email]
{
    width: 200px;
}

#my #chart,
#my #lightingchart
{
    margin: calc(var(--unit) * 4) 0;
    min-width: 480px;
    padding: 2em 0;
    background-color: var(--chart-background);
}

    #my #chart div
    {
        display: flex;
        flex-flow: row;
        align-items: flex-end;
        justify-content: space-evenly;
    }

        #my #chart div:nth-child(2) span:first-child
        {
            visibility: hidden;
        }

        #my #chart div span
        {
            display: block;
            width: 3.5%;
            text-align: center;
            font-size: 12px;
            position: relative;
        }

        #my #chart div:nth-child(2) span /*time*/
        {
            transform: translateX(-60%);
        }

        #my #chart div:nth-child(3) span /*onoff*/
        {
            height: calc(var(--unit) * 1);
            margin: 0 -0.25% 0 -0.25%;
            width: 4%;
        }

            #my #chart div:nth-child(3) span.point::before
            {
                content: " ";
                height: 0.8em;
                width: 0.8em;
                border-radius: 50%;
                background-color: var(--chart-point);
                position: absolute;
                left: -0.46em;
                top: -2.05em;
                position: absolute;
            }

            #my #chart div:nth-child(3) span u
            {
                background-color: var(--purple);
                display: block;
                height: 100%;
            }

        #my #chart div:nth-child(4) span /*temps*/
        {
        }

        #my #chart div:nth-child(5), /*legend*/
        #my #lightingchart div:nth-child(4) /*legend*/
        {
            display: block;
            font-size: smaller;
            margin-top: calc(var(--unit) * 2);
        }

            #my #chart div:nth-child(5) span,
            #my #lightingchart div:nth-child(4) span
            {
                display: inline-block;
                height: calc(var(--unit) * 1);
                width: 4%;
                background-color: var(--purple);
                margin: 1%;
                vertical-align: middle;
            }

            #my #chart div:nth-child(5) i,
            #my #lightingchart div:nth-child(4) i
            {
                height: 0.65em;
                width: 0.65em;
                border-radius: 50%;
                margin: 0.5% 1% 1% 5%;
                background-color: var(--chart-point);
                display: inline-block;
                vertical-align: middle;
            }

    #my #chart span b
    {
        text-align: center;
        font-size: 12px;
        position: absolute;
        top: -1.5em;
        left: 0;
        right: 0;
        font-weight: normal;
    }

    #my #lightingchart div
    {
        display: flex;
        flex-flow: row;
        align-items: flex-end;
        justify-content: space-evenly;
        position: relative;
    }

    #my #lightingchart #cleg
    {
        position: absolute;
        left: 0;
        bottom: calc(var(--unit) * 4);
    }

        #my #lightingchart #cleg td
        {
            font-size: 14px;
        }

            #my #lightingchart #cleg td:nth-child(2),
            #my #lightingchart #cleg td:nth-child(4)
            {
                text-align: right;
                padding-left: 0.2em;
            }

            #my #lightingchart #cleg td:nth-child(2)
            {
                padding-right: 1em;
            }

    #my #lightingchart div:nth-child(1),
    #my #chart div:nth-child(1)
    {
        min-height: calc(var(--unit) * 15);
    }

        /*1 light; 2 relay; 3 time; 4 legend*/
        #my #lightingchart div:nth-child(1) span
        {
            height: calc(var(--unit) * 2);
        }

    #my #lightingchart div:nth-child(2)
    {
        height: calc(var(--unit) * 3);
    }

        #my #lightingchart div:nth-child(2) span
        {
            margin-top: calc(var(--unit) * 1);
            height: calc(var(--unit) * 1);
        }

    #my #lightingchart div:nth-child(3)
    {
        height: calc(var(--unit) * 2);
    }

    #my #lightingchart span.On
    {
        background-color: var(--purple);
    }

    #my #lightingchart span.Off
    {
        background-color: transparent;
    }

    #my #lightingchart span.Sunrise
    {
        background-color: lightgoldenrodyellow;
    }

    #my #lightingchart span.Morning
    {
        background: linear-gradient(90deg, midnightblue 0%, lightgoldenrodyellow 100%)
    }

    #my #lightingchart span.Sunset
    {
        background: linear-gradient(90deg, lightgoldenrodyellow 0%, midnightblue 100%);
    }

    #my #lightingchart span.Evening
    {
        background-color: midnightblue;
    }

    #my #lightingchart div:nth-child(3) span /*time*/
    {
        margin-left: -3em;
        top: 0;
        font-size: 12px;
        width: 6em;
        text-align: center;
        position: absolute;
    }

#my #naming div label,
#my #zoning div label,
#my #locationing div label
{
    display: block;
    margin-bottom: 0.2em;
}

#my #naming div span:first-child
{
    font-weight: bold;
}

#my .location
{
    position: absolute;
    left: 0;
}

    #my .location > div
    {
        padding: 0.5em 1em;
        background-color: var(--background);
        color: var(--link);
        cursor: pointer;
    }

#my #zoning select,
#my #locationing input
{
    width: 100%;
    max-width: 400px;
}

#my #table tr td:first-child svg, /*override*/
#my #lightingtable tr td:first-child svg
{
    width: 12px;
    height: 12px;
    fill: var(--foreground);
}

#my #table tr td:nth-child(2) input, /*checkbox*/
#my #lightingtable tr td:nth-child(2) input
{
    transform: scale(1.6);
}

#my #table tr td:nth-child(3), /*time*/
#my #lightingtable tr td:nth-child(3)
{
    font-size: 16px;
    padding: 0 0.4em;
    text-align: right;
}

#my #table tr td:nth-child(4) span /*width*/
{
    height: 1.3em;
    display: block;
}

#my #table tr td:nth-child(5), /*price*/
#my #table tr td:nth-child(6), /*temp*/
#my #lightingtable tr td:nth-child(4), /*onoff*/
#my #lightingtable tr td:nth-child(5) /*sun*/
{
    font-size: 16px;
    padding-left: 0.4em;
    text-align: right;
}

#my thead td > div,
#my #naming
{
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.5em;
    width: 100%;
    max-width: 400px;
}

#my thead td span:first-child
{
    font-size: 24px;
    display: block;
}

#my thead svg,
#my #naming svg
{
    width: 2em;
    fill: var(--foreground);
}

#my #ssid
{
    background-color: var(--background-warning);
    padding: 0.6em;
    margin-bottom: 2em;
}

    #my #ssid label
    {
        display: block;
    }

#my #order
{
    margin-bottom: 3em;
    background-color: var(--lighter);
    padding: 0.6em;
}

    #my #order pre
    {
        font-family: Consolas, monospace;
    }

#my .showdevice .head > div:first-child
{
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin: 5px;
}

#my .showdevice .head > div:last-child
{
    display: flex;
    margin: 8px;
    justify-content: space-between;
    flex-direction: row;
}

    #my .showdevice .head > div:last-child > div:first-child svg
    {
        fill: var(--foreground);
        width: 24px;
        height: 24px;
        transform: translate(-2px, 2px);
        display: inline-block;
        cursor: pointer;
        margin-right: 10px;
    }

    #my .showdevice .head > div:last-child > div:first-child span:first-child.opened svg
    {
        transform: translate(-2px, 2px) rotate(90deg);
    }

#my .showdevice .head button
{
    margin-left: 8px;
}

#my .showdevice .head span.power > svg
{
    margin: 0 4px;
    height: 32px;
    display: inline-block;
    transform: translateY(10px);
    cursor: pointer;
    fill: rgba(127, 127, 127, 0.5);
}

#my .showdevice.on .head span.power > svg
{
    fill: var(--green);
}

#my .showdevice .head .name
{
    font-size: 36px;
    font-weight: bold;
    margin-right: 8px;
}

#my .showdevice .head .kind
{
}

#my .showdevice
{
    background-color: var(--lighter);
    padding: 5px;
    margin-bottom: 2em;
}

    #my .showdevice.on
    {
        background-color: var(--on);
    }

    #my .showdevice.offline
    {
        background-color: var(--offline);
    }

    #my .showdevice svg.Offline
    {
        display: none;
    }

    #my .showdevice svg.WiFi
    {
        display: inline-block;
        margin: 0 4px;
        height: 32px;
        transform: translateY(9px);
    }

    #my .showdevice.offline svg.WiFi
    {
        display: none;
    }

    #my .showdevice.offline svg.Offline
    {
        display: inline-block;
        margin: 0 4px;
        height: 32px;
        display: inline-block;
        transform: translateY(11px);
        fill: var(--error);
    }

    #my .showdevice svg .z1,
    #my .showdevice svg .z2,
    #my .showdevice svg .z3
    {
        fill: var(--foreground);
        opacity: 0.2;
    }

    #my .showdevice svg .z0,
    #my .showdevice .w1 svg .z1,
    #my .showdevice .w2 svg .z1,
    #my .showdevice .w3 svg .z1,
    #my .showdevice .w2 svg .z2,
    #my .showdevice .w3 svg .z2,
    #my .showdevice .w3 svg .z3
    {
        fill: var(--green);
        opacity: 1;
    }

#my tr.old td
{
    opacity: 0.5;
}

#my tr.old input
{
    filter: saturate(0);
}

#my #history
{
    border-spacing: 0;
    border-collapse: collapse;
}

    #my #history td h3
    {
        font-weight: 500;
        margin: 0;
    }

    #my #history td,
    #my #history th
    {
        font-size: 14.5px;
        text-align: right;
        padding: 0 4px;
    }

    #my #history .sml td
    {
        font-size: 12px;
    }

        #my #history th,
        #my #history .sml td:nth-child(3),
        #my #history .sml td:nth-child(4)
        {
            color: var(--green);
        }

    #my #history td[colspan]:nth-child(2),
    #my #history td[colspan]:first-child
    {
        text-align: left;
    }

.accountbox
{
    padding: 1em;
    background-color: var(--lighter);
    margin-bottom: 2em;
}

    .accountbox h2
    {
        margin: 0;
    }

    .accountbox h4
    {
        font-size: 22px;
        font-weight: 500;
        margin: 0 0 0.5em 0;
    }

    .accountbox h5
    {
        font-size: 20px;
        font-weight: 500;
        margin: 0;
    }

    .accountbox > div
    {
        background-color: var(--background);
        padding: 1em;
        margin-bottom: 1em;
    }

    .accountbox label
    {
        display: block;
        margin-top: 1em;
    }

    .accountbox .addnew.show
    {
        margin-top: 1em;
        background-color: var(--back2);
        padding: 1em;
    }

    .accountbox .addnew .error
    {
        margin-top: 1em;
    }

    .accountbox .addnew .addnewp
    {
        display: none;
    }

    .accountbox .addnew.show .addnewp
    {
        display: block;
    }

    .accountbox .userpar b,
    .accountbox .userpar i,
    .accountbox .devicepar b,
    .accountbox .devicepar i,
    .accountbox .apipar b,
    .accountbox .apipar i
    {
        margin-right: 15px;
        white-space: nowrap;
    }

    .accountbox .apipar b
    {
        font-family: Consolas, monospace;
    }

    .accountbox select
    {
        padding: 0;
    }


#my .accountbox .userpar .user-device
{
    font-style: normal;
    font-size: 14px;
}

.devicepar .validity
{
    white-space: nowrap;
}

.device-toggle
{
    display: inline-block;
    position: relative;
    background-color: var(--background-green);
    height: 20px;
    padding: 1px;
    border-radius: 10px;
    border: 1px solid var(--foreground);
    width: 34px;
    font-size: 13px;
    transform: translateY(4px);
    margin: 0 10px;
    cursor: pointer;
}

    .device-toggle.canceled
    {
        background-color: var(--background);
    }

    .device-toggle u
    {
        display: block;
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 7px;
        background-color: var(--foreground);
        top: 2px;
        right: 2px;
    }

    .device-toggle.canceled u
    {
        left: 2px;
        right: unset;
    }

#history > th > a
{
    margin-left: 4px;
}

#tooltip
{
    position: fixed;
    width: 200px;
    background-color: var(--background);
    border: 1px solid var(--foreground);
    padding: 1em;
    font-size: 13px;
}

#wattspar input,
#wattspar button
{
    margin: 10px 10px 0 0;
}

.showdevice .head .energy
{
    white-space: nowrap;
}

#my .historyintro
{
    margin-bottom: 2em;
    padding: 1em;
    background-color: var(--back3);
}

#schema
{
    margin: 2em 0 6em 0;
}

    #schema label
    {
        display: block;
    }

    #schema .removerule
    {
        position: absolute;
        top: 1em;
        right: 1em;
        cursor: pointer;
    }

    #schema .days > div > div
    {
        display: inline-block;
        text-align: center;
        margin-right: 0.5em;
    }

    #schema label > sup
    {
        background-color: var(--help);
        color: white !important;
        width: 1.3em;
        height: 1.3em;
        border-radius: 50%;
        display: inline-block;
        text-align: center;
        vertical-align: 0.1em;
        margin: 0 0.3em;
        font-weight: bold;
        line-height: 1.3em;
        font-size: 0.7em;
    }

    #schema .rule
    {
        background-color: var(--lighter);
        padding: 1em;
        margin-bottom: 1em;
        position: relative;
    }

        #schema .rule > div,
        #schema .heating > div > div,
        #schema .cooling > div > div,
        #schema .night > div > div,
        #schema .day > div > div
        {
            margin-bottom: 1em;
        }

    #schema .heating,
    #schema .cooling,
    #schema .night,
    #schema .day
    {
        border: 1px solid var(--foreground);
        padding: 1em;
    }

        #schema .heating > label,
        #schema .cooling > label,
        #schema .night > label,
        #schema .day > label
        {
            font-weight: bold;
            font-size: 1.3em;
            margin-bottom: 0.2em;
        }

        #schema .type > label,
        #schema .rule > div > label,
        #schema .heating > div > div > label,
        #schema .cooling > div > div > label,
        #schema .night > div > div > label,
        #schema .day > div > div > label
        {
            margin-bottom: 0.2em;
        }

    #schema .typelabel
    {
        margin: 1em 0;
        font-weight: 300;
        font-style: italic;
    }

    #schema .edit
    {
        margin-left: 8px;
    }

    #schema .timesspace
    {
        margin: 0 0.5em;
    }

    #schema .temperatures > div > div
    {
        display: inline-block;
        margin-right: 0.5em;
    }

    #schema label
    {
        font-weight: 500;
    }

        #schema label > span
        {
            font-weight: 400;
            font-size: 14px;
            margin-left: 0.3em;
        }

            #schema label > span:before
            {
                content: "(";
            }

            #schema label > span:after
            {
                content: ")";
            }

        #schema label > b
        {
            font-size: 17px;
            font-weight: bold;
            padding: 0 4px 1px 4px;
            background-color: var(--background);
            display: inline-block;
            margin-left: 6px;
        }

    #schema .cchart .items
    {
        display: flex;
        align-items: end;
        flex-direction: row;
    }

        #schema .cchart .items div
        {
            background-color: #a3a9a2;
            position: relative;
        }

            #schema .cchart .items div i
            {
                position: absolute;
                top: -16px;
                left: 2px;
                font-size: 12px;
                text-decoration: none;
            }

            #schema .cchart .items div b
            {
                position: absolute;
                bottom: -16px;
                left: 2px;
                font-size: 12px;
                font-weight: normal;
            }

#admin #oas > div
{
    font-size: 14px;
    background-color: var(--lighter);
    padding: 7px;
    margin-bottom: 7px;
}

    #admin #oas > div div
    {
        margin-left: 3em;
    }

#admin #oas i
{
    font-size: 12px;
}

#admin #oas > div table td,
#admin #oas > div pre
{
    font-size: 14px;
    font-family: Consolas, monospace;
}

#admin #oas > div table td
{
    text-align: right;
}

#admin #search
{
    position: relative;
}

    #admin #search #found
    {
        position: absolute;
        background-color: var(--background);
        padding: 7px;
    }

        #admin #search #found a
        {
            display: block;
        }

#admin .socket .desc
{
    font-size: 13px;
}

#admin .socket pre
{
    font-size: 13px;
    font-family: "Cascadia Code", Consolas, monospace;
}

.modal
{
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: #88888801;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

    .modal .dialog
    {
        background: var(--background);
        padding: 2em;
    }

        .modal .dialog h3
        {
            margin: 0;
        }

        .modal .dialog label
        {
            margin: 0.5em 0 0.2em 0;
            display: block;
        }

        .modal .dialog button
        {
            display: inline-block;
            margin: 1em 0.5em 0 0;
        }

#admin .articles input[placeholder=description],
#admin .articles input[placeholder=keywords]
{
    display: block;
    width: 100%;
    margin-bottom: 1em;
}

#admin .emails #results p
{
    font-size: 14px;
    margin: 5px 0;
}

    #admin .emails #results p span,
    #admin .emails #results p a
    {
        margin-right: 0.5em;
    }

#admin button.selected
{
    background: blue;
}

#admin .accounting #records span,
#admin .accounting #records b,
#admin .accounting #records i,
#admin .accounting #records u a
{
    margin-right: 8px;
    font-size: 13px;
}

#admin .accounting #records b,
#admin .accounting #records input
{
    text-align: right;
}

#admin .accounting #records select
{
    width: 100px;
}

#admin .accounting #records input
{
    width: 60px;
}

#admin .accounting #records i
{
    width: 200px;
    max-width: 200px;
    font-style: normal;
    overflow: hidden;
    display: inline-block;
}

#admin .accounting #records select,
#admin .accounting #records button,
#admin .accounting #records input
{
    padding: 0;
    margin-right: 8px;
}

    #admin .accounting #records button.missing
    {
        color: red;
        border-color: red;
    }

    #admin .accounting #records button.have
    {
        color: green;
        border-color: green;
    }

#admin .accounting .totals h3
{
    font-size: 20px;
    margin-bottom: 0;
}

#admin .accounting .totals th,
#admin .accounting .totals td,
#admin .accounting .totals td b
{
    font-family: monospace;
    font-size: 14px;
}

#admin .accounting .totals th
{
    text-align: left;
}

#admin .accounting .totals td:last-child
{
    text-align: right;
    padding-left: 1em;
}

#admin .warranty td
{
    padding-right: 8px;
}

#admin input.invalid,
#admin select.invalid
{
    border: 1px solid red;
}

#products > main > h2
{
    margin-bottom: 0;
}

#products section
{
    margin: 4em 0;
}

#products section .flex
{
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: space-between;
}

    #products section
    {
        font-size: 14px;
    }

        #products section td,
        #products section th
        {
            font-size: 13px;
        }

        #products section .text
        {
            display: inline;
        }

        #products section .top
        {
            background: rgba(0, 255, 0, 0.2);
            padding: 0.5em 0.8em 0.7em 0.8em;
            display: flex;
            flex-flow: row;
            align-items: center;
            justify-content: space-between;
        }

        #products section .title
        {
            font-size: 36px;
            display: inline-block;
        }

        #products section .price s
        {

        }

        #products section .price b,
        #products #total b
        {
            font-size: 32px;
            display: inline-block;
            margin-left: 0.3em;
            font-weight: 500;
            transform: translateY(5px);
        }

            #products section .price select
            {
                font-size: 17px;
                margin-left: 1em;
            }

            #products section .price span
            {
                font-size: 24px;
                margin-left: 1em;
            }

        #products section .description p
        {
            margin: 0.6em 0;
        }

        #products section .specs
        {
            border-spacing: 10px;
            border-collapse: collapse;
            margin-left: auto;
        }

            #products section .specs th
            {
                font-weight: 400;
                text-align: left;
            }

            #products section .specs td
            {
                white-space: nowrap;
                text-align: right;
            }

        #products section .img
        {
            flex-basis: 240px;
            flex-grow: 0;
            flex-shrink: 0;
        }

            #products section .img img
            {
                max-width: 240px;
                max-height: 240px;
            }

@media (max-width: 640px)
{
    #products section .flex
    {
        display: flex;
        flex-flow: column;
    }

    #products section .img
    {
        flex-basis: 24px;
        width: 80vw;
    }

        #products section .img img
        {
            max-width: 80vw;
            max-height: 80vw;
        }
}

#products section.ship price
{
    transform: translate(-5px, -5px);
}

#products section.ship select
{
    margin-top: 1em;
    max-width: 100%;
    width: 100%;
}

#products section.ship input
{
    margin-top: 1em;
    display: block;
}

#products sup
{
    font-size: 12.5px;
    display: inline-block;
}

    #products #total span:first-child
    {
        font-size: 24px;
    }

    #products #total button
    {
        margin-left: 0.4em;
        font-size: 24px;
    }

#products #total > div:last-child
{
    float: right;
    margin-top: 1em;
}

#total > div.flex > div.text > p
{
    text-align: right;
}

#total > div.flex > div.text > p:nth-child(1)
{
    margin-bottom: 2.5em;
}

    #total > div.flex > div.text > p:nth-child(1) input
    {
        display: inline-block;
        transform: scale(1.5) translateY(1px);
        margin-right: 8px;
    }

#smarter,
#present
{
    margin: calc(var(--unit) * 6) 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

img.man
{
    background-color: var(--lighter);
    width: calc(var(--unit) * 35);
    height: calc(var(--unit) * 35);
    border: 2px solid var(--green);
    border-radius: 50%;
    display: inline-block;
}

    img.man.man1
    {
        width: calc(var(--unit) * 26);
        height: calc(var(--unit) * 26);
    }

#smarter h1
{
    display: inline-block;
    line-height: 1.2em;
    font-size: calc(var(--font-unit) * 5.5);
    font-weight: 400;
}

#home .chart
{
    margin-top: calc(var(--unit) * 4);
    padding-top: 2em;
    overflow-x: auto;
}

#home #then
{
    margin-bottom: calc(var(--unit) * 4);
    padding-bottom: 2em;
}

    #home .chart div
    {
        display: flex;
        flex-flow: row;
        align-items: flex-end;
        justify-content: space-evenly;
        min-width: 480px;
    }

        #home .chart div:nth-child(2) span:first-child
        {
            visibility: hidden;
        }

        #home .chart div span
        {
            display: block;
            width: 3.5%;
            text-align: center;
            font-size: 12.5px;
            position: relative;
        }

        #home .chart div:nth-child(2) span
        {
            transform: translateX(-66%);
        }

    #home .chart span b
    {
        text-align: center;
        font-size: 12.5px;
        position: absolute;
        top: -1.5em;
        left: 0;
        right: 0;
        font-weight: normal;
    }

#home #tan,
#home #mart
{
    margin: 4em 0;
}

    #home #tan img:first-child,
    #home #mart img:first-child
    {
        float: left;
        margin: 0.3em 1em 0.3em 0;
        width: 6em;
        height: 6em;
        border-radius: 50%;
    }

#home #present h1
{
    display: inline-block;
    line-height: 1.2em;
    font-size: calc(var(--font-unit) * 4);
    font-weight: 400;
}

#home .devices,
#savingpage .devices
{
    display: grid;
    grid-template-columns: 49.5% 1% 49.5%;
}

    #home .devices > div,
    #savingpage .devices > div
    {
        display: inline-block;
        height: calc(var(--unit) * 47);
        background-color: var(--lighter);
        position: relative;
    }

        #home .devices > div:nth-child(2),
        #savingpage .devices > div:nth-child(2)
        {
            background-color: transparent;
        }

        #home .devices > div > h3,
        #savingpage .devices > div > h3
        {
            font-size: 2em;
            font-weight: bold;
            position: absolute;
            top: -0.6em;
            left: 8%;
        }

            #home .devices > div > h3 > span,
            #savingpage .devices > div > h3 > span
            {
                font-weight: normal;
                margin-left: 0.5em;
                font-size: 50%;
            }

        #home .devices > div > div,
        #savingpage .devices > div > div
        {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

            #home .devices > div > div > img,
            #savingpage .devices > div > div > img
            {
                max-width: 60%;
                max-height: 50%;
            }

        #home .devices > div > span,
        #savingpage .devices > div > span
        {
            font-size: 2em;
            position: absolute;
            left: 8%;
            bottom: 4%;
            text-align: right;
        }

            #home .devices > div > span > b,
            #savingpage .devices > div > span > b
            {
                margin-left: 0.4em;
                font-size: 1.3em;
                color: var(--order);
            }

            #home .devices > div > span sup,
            #savingpage .devices > div > span sup
            {
                font-size: 60%;
            }

    #home .devices button.order,
    #savingpage .devices button.order
    {
        position: absolute;
        bottom: 7%;
        right: 8%;
        font-size: 16px;
    }

@media (max-width: 640px)
{
    #home .devices,
    #savingpage .devices
    {
        display: block;
    }

        #home .devices > div,
        #savingpage .devices > div
        {
            width: calc(var(--unit) * 99);
            height: calc(var(--unit) * 99);
            display: block;
        }

            #home .devices > div:nth-child(2),
            #savingpage .devices > div:nth-child(2)
            {
                height: 0.5em;
            }

            #home .devices > div > b,
            #savingpage .devices > div > b
            {
                right: 1.5em;
            }
}

#home #other
{
    background-color: var(--background-warning);
    padding: 2em;
    margin: 4em 0;
}

#home .other
{
    background-color: var(--back3);
    padding: 2em;
    margin: 4em 0;
}

img.man.man2
{
    width: 100%;
    height: auto;
}

#home #features
{
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: center;
}

#home .feature,
#savingpage .feature
{
    margin: 2em 0;
}

    #home .feature.back1,
    #home .feature.back2,
    #home .feature.back3
    {
        padding: 2em;
    }

    #home .feature.bg, #savingpage .feature.bg
    {
        background-color: var(--lighter);
        padding: 0.6em;
    }

    #home .feature img
    {
        float: left;
        margin: .3em 1em 0.3em 0;
        width: 6em;
        height: 6em;
        border-radius: 50%;
    }

#home > div:last-child
{
    text-align: right;
}

#home .calc
{
    padding: 2em;
    margin-bottom: 2em;
    line-height: 1.7em;
}

    #home .calc b
    {
        font-size: 32px;
        font-weight: 400;
    }

    #home .calc i
    {
        font-size: 20px;
        background: var(--green);
        color: var(--background);
        font-style: normal;
        font-weight: 600;
        padding: 0 0.4em;
        white-space: nowrap;
    }

    #home .calc button
    {
        margin-top: 6px;
    }

    #home .calc sup
    {
        font-size: 12.5px;
    }

#savingpage h1
{
    margin-bottom: 0;
}

#savingpage h2
{
    font-size: 36px;
    margin: 0;
}

#savingpage h3
{
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 0;
}

#savingpage .feature img
{
    float: right;
    margin: 0.3em 1em 0.3em 0;
    width: 6em;
    height: 6em;
    border-radius: 50%;
}

    #savingpage .feature img.rect
    {
        float: left;
        border: 0;
        border-radius: 0;
        width: 50%;
        height: auto;
    }

@media (max-width: 540px)
{
    #savingpage .feature img.rect
    {
        float: none;
        width: 100%;
    }
}

#savingpage .feature img.fman
{
    float: left;
    background-color: var(--lighter);
    border: 2px solid var(--green);
    border-radius: 50%;
}

#savingpage .feature.order
{
    padding: 2em;
    background-color: var(--back1);
    margin: 2em 0;
}

#savingpage #inputs label
{
    display: block;
}

#savingpage #table th
{
    font-weight: normal;
    text-align: left;
    padding: 2px 0;
}

#savingpage #table td
{
    text-align: right;
    padding: 2px 6px;
}

    #savingpage #table td:last-child
    {
        text-align: left;
    }

#savingpage #table td[colspan="2"]
{
    text-align: center;
    font-size: 20px;
    background: var(--green);
    color: var(--background);
    font-weight: 600;
    padding: 0 0.4em;
    white-space: nowrap;
}

#savingpage thead td
{
    font-weight: 500;
    font-style: italic;
}

blockquote
{
    border-left: 6px solid var(--foreground);
    padding-left: 6px;
    font-size: 16px;
}

#features > div > h2
{
    margin-bottom: 0;
    line-height: 1em;
    text-align: center;
}

.flag
{
    background: #88888844;
    padding: 2em;
}

.flag span
{
    display: inline-block;
    vertical-align: middle;
}

.flag svg
{
    width: 80px;
    margin-right: 10px;
}
#menu
{
    position: absolute;
    right: calc(var(--unit) * 2);
    top: calc(var(--unit) * 2);
    text-align: right;
}

    #menu a
    {
        margin: 0 0.4em;
        cursor: pointer;
    }

    #menu a svg
    {
        height: calc(var(--unit) * 5);
        min-height: 21.4px;
    }

    #menu a:last-child svg
    {
        height: calc(var(--unit) * 7);
        min-height: 30px;
    }

        #menu a svg path
        {
            fill: var(--menu);
        }

            #menu a:hover svg path
            {
                fill: var(--menu-hover);
            }

body > svg:first-child
{
    padding: calc(var(--unit) * 2) calc(var(--unit) * 2) calc(var(--unit) * 2) 0;
    width: calc(var(--unit) * 33);
    min-width: 120px;
    cursor: pointer;
}

    body > svg:first-child path
    {
        fill: var(--logo);
    }

    body > svg:first-child ellipse
    {
        fill: var(--button-success);
    }



#help h1
{
    font-size: 45px;
}

#help h2
{
    font-size: 36px;
}

#help h3
{
    font-size: 26px;
}

#help h4
{
    font-size: 22px;
}