:root{
    --size-arrow: 8px;
    --ani-pop: 0.6s cubic-bezier(.39,1.35,.44,1.07);

    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);

    --color-bright-accent: rgb(55,124,200);
    --color-bright-accent: rgb(57, 55, 200);
    --color-bright-background: #739F99;
    --color-bright-background: #2d009b;
    --color-scheme: only light;
    --color-bright-accent-p1: rgb(78, 154, 235);
    --color-bright-accent-m1: rgb(44, 112, 185);
    --color-bright-background-p1: rgb(121, 163, 158);
    --color-bright-background-m1: #60837e;
    --color-bright-background-p1: #3b0fa8;
    --color-bright-background-m1: #220175;
    --color-bright-backdrop: rgba(255,255,255,0.7);
    --color-bright-backdrop-l: rgba(255,255,255,0.3);
    --color-bright-border: #cbcbcb;
    --color-bright-border-shadow: rgba(0,0,0,0.1);
    --color-bright-fbox-shadow: rgba(0,0,0,0.075);
    --color-bright-fbox-highlight: rgba(255,255,255,0.8);
    --color-bright-text: #1a1a1a;
    --color-bright-text-disabled: #777777;
    --color-bright-1:#ffffff;
    --color-bright-1h:#fcfcfc;
    --color-bright-2:#fafafa;
    --color-bright-2h:#f7f7f7;
    --color-bright-3:#f3f3f3;
    --color-bright-interactive-hover:#ebebeb;
    --color-bright-interactive-active: #e6e6e6;
    --color-bright-nowpoint: #01ce01;
    --color-bright-setpoint: #019ece;
    --color-bright-alarm: #e90b42;
    --color-bright-warn: #d4a300;


    --color-bright-hlk-cool: #019ece;
    --color-bright-hlk-heat: #e90b42;

    --color-dark-accent: rgb(110, 172, 238);
    --color-dark-accent: rgb(123, 110, 238);
    --color-dark-background: #527973;
    --color-dark-background: #23007a;
    --color-dark-accent-p1: rgb(148, 195, 245);
    --color-dark-accent-m1: rgb(84, 153, 228);
    --color-dark-background-p1: #65928b;
    --color-dark-background-m1: #3e5a56;
    --color-dark-background-p1: #350f96;
    --color-dark-background-m1: #17014d;
    --color-dark-fbox-shadow: rgba(0,0,0,0.12);
    --color-dark-fbox-highlight: rgba(255,255,255,0.15);
    --color-dark-text: #f0f0f0;
    --color-dark-text-disabled: #c2c2c2;
    --color-dark-1:#4a4a4a;
    --color-dark-1h:#474747;
    --color-dark-2:#444444;
    --color-dark-2h:#414141;
    --color-dark-3:#3b3b3b;
    --color-dark-interactive-hover:#545454;
    --color-dark-interactive-active: #5a5a5a;
    --color-dark-backdrop: rgba(0, 0, 0, 0.7);
    --color-dark-backdrop-l: rgba(0, 0, 0, 0.3);
    --color-dark-border: #3d3d3d;
    --color-dark-border-shadow: rgba(255,255,255,0.1);
    --color-dark-nowpoint: #4bff4b;
    --color-dark-setpoint: #35d0ff;
    --color-dark-alarm: #ff4876;
    --color-dark-warn: #d4a300;

    --color-dark-hlk-cool: #35d0ff;
    --color-dark-hlk-heat: #ff4876;


    --color-accent:var(--color-bright-accent);
    --color-background:var(--color-bright-background);
    --color-accent-p1:var(--color-bright-accent-p1);
    --color-accent-m1:var(--color-bright-accent-m1);
    --color-background-p1:var(--color-bright-accent-p1);
    --color-background-m1:var(--color-bright-accent-m1);
    --color-backdrop:var(--color-bright-backdrop);
    --color-backdrop-l:var(--color-bright-backdrop-l);
    --color-border: var(--color-bright-color);
    --color-border-shadow: var(--color-bright-border-shadow);
    --color-fbox-shadow: var(--color-bright-fbox-shadow);
    --color-fbox-highlight: var(--color-bright-fbox-highlight);
    --color-text: var(--color-bright-text);
    --color-text-disabled: var(--color-bright-text-disabled);
    --color-1:var(--color-bright-1);
    --color-1h:var(--color-bright-1h);
    --color-2:var(--color-bright-2);
    --color-2h:var(--color-bright-2h);
    --color-3:var(--color-bright-3);
    --color-interactive-hover:var(--color-bright-interactive-hover);
    --color-interactive-active:var(--color-bright-interactive-active);
    --color-nowpoint: var(--color-bright-nowpoint);
    --color-setpoint: var(--color-bright-setpoint);
    --color-alarm: var(--color-bright-alarm);
    --color-warn: var(--color-bright-warn);

    --color-hlk-cool: var(--color-bright-hlk-cool);
    --color-hlk-heat: var(--color-bright-hlk-heat);

    --auto-dark: none;

    --color-scheme: only light;

    --color-scheme-function: var(--color-dark-nowpoint);
    --color-scheme-alarm: var(--color-bright-alarm);
    --color-scheme-warn: var(--color-bright-warn);
    --color-scheme-setpoint: var(--color-dark-setpoint);
    --color-scheme-disabled: var(--color-dark-text-disabled);

    color: var(--color-text);
    color-scheme: var(--color-scheme);
}

[theme="dark"], [data-theme="dark"]{


    --color-scheme: only dark;

    --color-accent: var(--color-dark-accent);
    --color-background: var(--color-dark-background);
    --color-accent-p1:var(--color-dark-accent-p1);
    --color-accent-m1:var(--color-dark-accent-m1);
    --color-background-p1:var(--color-dark-background-p1);
    --color-background-m1:var(--color-dark-background-m1);
    --color-backdrop:var(--color-dark-backdrop);
    --color-backdrop-l:var(--color-dark-backdrop-l);
    --color-border: var(--color-dark-border);
    --color-border-shadow: var(--color-dark-border-shadow);
    --color-fbox-shadow: var(--color-dark-fbox-shadow);
    --color-fbox-highlight: var(--color-dark-fbox-highlight);
    --color-text: var(--color-dark-text);
    --color-text-disabled: var(--color-dark-text-disabled);
    --color-1:var(--color-dark-1);
    --color-1h:var(--color-dark-1h);
    --color-2:var(--color-dark-2);
    --color-2h:var(--color-dark-2h);
    --color-3:var(--color-dark-3);
    --color-interactive-hover:var(--color-dark-interactive-hover);
    --color-interactive-active:var(--color-dark-interactive-active);
    --color-nowpoint: var(--color-dark-nowpoint);
    --color-setpoint: var(--color-dark-setpoint);
    --color-alarm: var(--color-dark-alarm);
    --color-warn: var(--color-dark-warn);
    --color-hlk-cool: var(--color-dark-hlk-cool);
    --color-hlk-heat: var(--color-dark-hlk-heat);

    --auto-dark: invert(1) hue-rotate(180deg);

    color: var(--color-text);
    color-scheme: var(--color-scheme);
}

@media (prefers-color-scheme: dark) {
    :root{
        --color-accent: var(--color-dark-accent);
        --color-background: var(--color-dark-background);

        --color-scheme: only dark;

        --color-accent-p1:var(--color-dark-accent-p1);
        --color-accent-m1:var(--color-dark-accent-m1);
        --color-background-p1:var(--color-dark-background-p1);
        --color-background-m1:var(--color-dark-background-m1);
        --color-backdrop:var(--color-dark-backdrop);
        --color-backdrop-l:var(--color-dark-backdrop-l);
        --color-border: var(--color-dark-border);
        --color-border-shadow: var(--color-dark-border-shadow);
        --color-fbox-shadow: var(--color-dark-fbox-shadow);
        --color-fbox-highlight: var(--color-dark-fbox-highlight);
        --color-text: var(--color-dark-text);
        --color-text-disabled: var(--color-dark-text-disabled);
        --color-1:var(--color-dark-1);
        --color-1h:var(--color-dark-1h);
        --color-2:var(--color-dark-2);
        --color-2h:var(--color-dark-2h);
        --color-3:var(--color-dark-3);
        --color-interactive-hover:var(--color-dark-interactive-hover);
        --color-interactive-active:var(--color-dark-interactive-active);
        --color-nowpoint: var(--color-dark-nowpoint);
        --color-setpoint: var(--color-dark-setpoint);
        --color-alarm: var(--color-dark-alarm);
        --color-warn: var(--color-dark-warn);
        --color-hlk-cool: var(--color-dark-hlk-cool);
        --color-hlk-heat: var(--color-dark-hlk-heat);

        --auto-dark: invert(1) saturate(200%) brightness(100%) hue-rotate(180deg);

        color: var(--color-text);
        color-scheme: var(--color-scheme);
    }



    [data-theme="light"], [theme="light"]{
        --color-accent: var(--color-bright-accent);
        --color-background: var(--color-bright-background);
        --color-accent-p1:var(--color-bright-accent-p1);
        --color-accent-m1:var(--color-bright-accent-m1);
        --color-background-p1:var(--color-bright-background-p1);
        --color-background-m1:var(--color-bright-background-m1);
        --color-backdrop:var(--color-bright-backdrop);
        --color-backdrop-l:var(--color-bright-backdrop-l);
        --color-border: var(--color-bright-border);
        --color-border-shadow: var(--color-bright-border-shadow);
        --color-fbox-shadow: var(--color-bright-fbox-shadow);
        --color-fbox-highlight: var(--color-bright-fbox-highlight);
        --color-text: var(--color-bright-text);
        --color-text-disabled: var(--color-bright-text-disabled);
        --color-1:var(--color-bright-1);
        --color-1h:var(--color-bright-1h);
        --color-2:var(--color-bright-2);
        --color-2h:var(--color-bright-2h);
        --color-3:var(--color-bright-3);
        --color-interactive-hover:var(--color-bright-interactive-hover);
        --color-interactive-active:var(--color-bright-interactive-active);
        --color-nowpoint: var(--color-bright-nowpoint);
        --color-setpoint: var(--color-bright-setpoint);
        --color-alarm: var(--color-bright-alarm);
        --color-warn: var(--color-bright-warn);
        --color-hlk-cool: var(--color-bright-hlk-cool);
        --color-hlk-heat: var(--color-bright-hlk-heat);
        --color-scheme: only light;
        --auto-dark: none;
        color: var(--color-text);
        color-scheme: var(--color-scheme);
    }
}

.f_box{
    border-radius: 4px;
    padding: 0 8px;
    appearance: none;
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-2h);
    box-shadow: inset 0 0 0 1px var(--color-fbox-shadow), inset 0 1px var(--color-fbox-highlight), inset 0 -1px var(--color-fbox-shadow);

    &:not(.nohover):hover{
        background-color: var(--color-interactive-hover);
    }

    &:not(.nohover):active, &.focused{
        background-color: var(--color-interactive-active);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    }

    &.f_accent{
        background-color: var(--color-accent);
        color: #fff;

        box-shadow: inset 0 0 0 1px var(--color-fbox-shadow), inset 0 1px var(--color-fbox-highlight), inset 0 -1px var(--color-fbox-shadow);

        &:hover{
            background-color: var(--color-accent-p1);
        }

        &:active{
            background-color: var(--color-accent-m1);
            box-shadow: inset 0 0 0 -1px rgba(0,0,0,0.15), inset 0 1px rgba(0,0,0,0.05), inset 0 -1px rgba(255,255,255,0.07);
        }
    }

    &_disabled{
        background-color: var(--color-2);
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.085);
    }
}

html, body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.f_input{
    border-radius: 4px;
    padding: 0 8px;
    appearance: none;
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-2h);
    box-shadow: inset 0 0 0 1px var(--color-fbox-shadow), inset 0 1px var(--color-fbox-highlight), inset 0 -1px var(--color-fbox-shadow);
    border: none;
    height: 30px;
    outline:none;
}

.f_input_label{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.f_input_label > span{
    font-size: 12px;
}

.f_input:focus{
    box-shadow:inset 0 -1px var(--color-accent), inset 0 0 0 1px var(--color-fbox-shadow), inset 0 1px var(--color-fbox-highlight), inset 0 -1px var(--color-fbox-shadow);
}


.f_button{
    border-radius: 4px;
    padding: 0 8px;
    appearance: none;
    font-size: 14px;
    color: var(--color-text);
    background-color: var(--color-2h);
    box-shadow: inset 0 0 0 1px var(--color-fbox-shadow), inset 0 1px var(--color-fbox-highlight), inset 0 -1px var(--color-fbox-shadow);
    border: none;
    height: 30px;
    outline:none;
}
.f_button:hover{
    background-color:var(--color-interactive-hover);
}
.f_button:active{
    background-color:var(--color-interactive-active);
}
.f_button:focus-visible{
    box-shadow: 0 0 0 1px var(--color-3), 0 0 0 2px var(--color-accent);
}

.f_button.accent{
    background-color: var(--color-accent);
}

.f_button.accent:hover{
    background-color: var(--color-accent-p1);
}

.f_button.accent:active{
    background-color: var(--color-accent-m1);
}

.mh0{
    min-height: 0;
}

.mw0{
    min-width:  0;
}

.ms0{
    min-height: 0;
    min-width:  0;
}

.pa0{
    top:    0;
    left:   0;
    right:  0;
    bottom: 0;
}

.autodark{
    filter: invert(1) hue-rotate(180deg);
}


/*App Styles*/

html, body{
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    font-family: sans-serif;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    position: relative;
}

.main{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-rows: 1fr;
}

.main aside{
    background-color: var(--color-3);
    grid-column: 1;
    grid-row: 1;
    border-right: 1px var(--color-border) solid;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 5px 0;
    gap: 5px;
}

.main aside a{
    display: block;
    padding: 10px 5px;
    margin: 0 5px;
    text-decoration: none;
    border-radius: 5px;
    color: var(--color-text);
    font-size: 16px;
    line-height: 20px;
}
.main aside a:hover{
    /*background-color: var(--color-interactive-hover);
    color: var(--color-accent);*/
    background-color: var(--color-accent-m1);
}

.fap{
    position: fixed;
    bottom: 5px;
    left: 100%;
    transform: translate(-100%) translate(-5px);
    width: 50px;
    height: 50px;
    background-color: var(--color-1);
    border-radius: 100%;
    border: none;
    visibility: hidden;
}

/*Mobile*/
@media (max-width: 1080px){
    .main{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        overflow: hidden;
    }
    .main aside{
        padding-bottom: 55px;
        transition: 0.4s ease-in-out;
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
    }
    .fap{
        visibility: visible;
        z-index: 3;
        transition: 0.4s ease-in-out;
    }
    .map{
        transition: 0.4s ease-in-out;
        transform: translate(100%);
        grid-column: 1;
        grid-row: 1;
    }
    .main.mobile_map .fap{
        left: 0;
        transform: translate(5px);
    }
    .main.mobile_map aside{
        transform: translate(-100%);
    }
    .main.mobile_map .map{
        transform: translate(0%);
    }
}