html:root {
    --app-color:  #006C78;
    --trans-app75: color-mix(in lab, var(--app-color) 75%, transparent);
    --trans-app90: color-mix(in lab, var(--app-color) 90%, transparent);
    --trans-app50: color-mix(in lab, var(--app-color), transparent);
    --trans-app25: color-mix(in lab, var(--app-color) 25%, transparent);
    --trans-app15: color-mix(in lab, var(--app-color) 15%, transparent);
    --trans-app5: color-mix(in lab, var(--app-color) 5%, transparent);
   

    --app-back: #100c08;
    --app-front: whitesmoke;
    --dark-back: #100c08;
    --dark-front: whitesmoke;
    --light-back: whitesmoke;
    --light-front: #100c08;
    --front-trans75: color-mix(in lab, var(--app-front) 75%, transparent);
    --app-gold: #6C7800;
    --app-orange: #A33900;
    --app-purple: #78006C;
    --app-blue: #006AA3;

    --gold-back90: color-mix(in lab, var(--app-back) 90%, var(--app-gold));
    --gold-back75: color-mix(in lab, var(--app-back) 75%, var(--app-gold));

    --gold-front: color-mix(in lab, var(--app-front), var(--app-gold));

    --back-black: color-mix(in lab, var(--app-back) , black);
    --back-white: color-mix(in lab, var(--app-back) , white);
    --back-black75: color-mix(in lab, var(--app-back) 25% , black);
    --gold-trans90: color-mix(in lab, var(--app-gold) 10%, transparent);
    --app-red: #780030;
    --red-front: color-mix(in lab, var(--app-red), var(--app-front));
    --red-trans75: color-mix(in lab, var(--app-red) 75%, transparent);
    --red-trans: color-mix(in lab, var(--app-red), transparent);
    --red-trans25: color-mix(in lab, var(--app-red) 25%, transparent);
    --app-green: #5cbb35;
    --green-front: color-mix(in lab, var(--app-green), var(--app-front));
    --green-trans75: color-mix(in lab, var(--app-green) 75%, transparent);
    --green-trans: color-mix(in lab, var(--app-green), transparent);
    --green-trans25: color-mix(in lab, var(--app-green) 25%, transparent);
    --green-back: color-mix(in lab, var(--app-green), var(--app-back));
    --green-back25: color-mix(in lab, var(--app-back) 25%, var(--app-green));
    --green-back75: color-mix(in lab, var(--app-back) 75%, var(--app-green));
    --green-back90: color-mix(in lab, var(--app-back) 90%, var(--app-green));
    --app-front90: color-mix(in lab, var(--app-front) 90%, var(--app-color));
    --app-front75: color-mix(in lab, var(--app-front) 75%, var(--app-color));
    --app-front50: color-mix(in lab, var(--app-front), var(--app-color));
    --app-front25: color-mix(in lab, var(--app-front) 25%, var(--app-color));
    --app-front15: color-mix(in lab, var(--app-front) 15%, var(--app-color));
    --trans-front75: color-mix(in lab, var(--app-front) 75%, transparent);
    --trans-front90: color-mix(in lab, var(--app-front) 90%, transparent);
    --trans-front50: color-mix(in lab, var(--app-front), transparent);
    --trans-front25: color-mix(in lab, var(--app-front) 25%, transparent);
    --trans-front15: color-mix(in lab, var(--app-front) 15%, transparent);
    --trans-front5: color-mix(in lab, var(--app-front) 5%, transparent);
    --app-back90: color-mix(in lab, var(--app-back) 90%, var(--app-color));
    --app-back75: color-mix(in lab, var(--app-back) 75%, var(--app-color));
    --app-back50: color-mix(in lab, var(--app-back), var(--app-color));
    --app-back25: color-mix(in lab, var(--app-back) 25%, var(--app-color));
    --app-back15: color-mix(in lab, var(--app-back) 15%, var(--app-color));
    --app-back5: color-mix(in lab, var(--app-back) 5%, var(--app-color));
    --trans-back75: color-mix(in lab, var(--app-back) 75%, transparent);
    --trans-back90: color-mix(in lab, var(--app-back) 90%, transparent);
    --trans-back50: color-mix(in lab, var(--app-back), transparent);
    --trans-back25: color-mix(in lab, var(--app-back) 25%, transparent);
    --trans-back15: color-mix(in lab, var(--app-back) 15%, transparent);
    --trans-back5: color-mix(in lab, var(--app-back) 5%, transparent);
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia,  serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: var(--app-front);
}

    html[dark], html[dark]:root {
        --app-back: var(--dark-back);
        --app-front: var(--dark-front);
    }

    html, html:root {
        --app-back: var(--light-back);
        --app-front: var(--light-front);
    }


* {
    color: var(--app-front);
    border-radius: 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--app-color) var(--app-back);
    scrollbar-arrow-color: none;
    box-sizing: border-box;
}

img {
    display: block;
    color: var(--app-front) !important;
}

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    overflow: hidden;
    outline: none;
    border: none;
}

    svg {
        flex-shrink: 1;
    }



.blockMID {
    display: block;
    width: 100%;
    margin: auto auto;
}

.flexMID {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    justify-content: center; /* horizontal */
    align-items: center; /* vertical */
    text-align: center;
}


dialog {
    background-color: color-mix(in lab, var(--app-back) 90%, var(--app-front));
    overflow-x: hidden;
    border: 0;
    border-radius: 15px;
    box-shadow: 4px 4px 8px var(--trans-front15);
    box-sizing: content-box;

    & header {
        display: flex;
        flex-direction: row;
    }

    &::backdrop {
        backdrop-filter: blur(20px);
    }
}

dialog:focus{
    outline: initial;
}

.dialog80 {
    height: 80vh;
    width: 80vw;
}


button, input, select {
    background-color: transparent;
    border-radius: 15px;
    outline: none;
    border: none;
}

html, body, termine-app {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    transition-property: background-color;
    transition-duration: 1s;
    transition-behavior: allow-discrete;
       background-color: var(--app-back90);
    color: var(--app-front);
    overflow-x: hidden;
}

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}


body {
    background: var(--app-back);
   
}



.cash[currency=USD]::after {
    content: '$';
}

.cash[currency=EUR]::after {
    content: '€';
}

.cash[currency=GBP]::after {
    content: "£";
}

.cash[currency=CAD]::after {
    content: '$';
}

.cash[currency=CHF]::after {
    content: '₣';
}

button[disabled] {
    filter: grayscale(100%);
}

.monoFont {
    font-family:'Courier New', monospace;
}


select {
    color: var(--app-front);
    padding: 1vh 1vw;
    border-radius: 1rem;
    outline: 0;
    border-color: transparent;
}

input, select, .highText {
         font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia,  serif;


    font-optical-sizing: auto;
    color: var(--app-front);
    background-color: var(--app-back);
    box-shadow: inset 0 0 5px 1px var(--app-back);
}

termine-app {
    display: grid;
    grid-template-rows: 4rem auto;
    grid-template-columns: 1fr;
    overflow: visible;
}


nav {
    grid-row: 0;
    display: grid;
    width: inherit;
    padding: 0 1vw;
    height: 4rem;
    grid-template-columns: 1fr auto 2.5rem 2.5rem;
    column-gap: 0.15rem;
    background-color: var(--app-back90);
    border-radius: 0;
    transition: background-color linear 1s;


    & svg {
        height: 3rem;
    }


    & button[home] {
        display: flex;
        margin: 0 0;
        padding: 0;
        border: none;
        justify-content: start;
        align-items: center;


        & svg {
            fill: var(--app-color);
    transition: fill linear 1.5s;

        }
    }

    

    & lang-select {
        display: block;
        margin: auto auto;
        color: var(--app-front);
    }



    & #mainLogo {
        height: 7vh;
        width: 30vw;
        max-height: 80px;
    }
}

#accountButton {
    fill: var(--app-front);
    anchor-name: --accountbutton;
}

main {
    min-height: 0;
    height: 100%;
    height: 100%;
    overflow-y: scroll; /* enable scrolling inside */
    background-color: var(--app-back);
}

    termine-app[loading], main[loading] {
        filter: blur(5px);
    }



buttons-select {
    display: flex;
    flex-direction: column;
    gap: 2vh 2vw;

    & > button {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        border: 0;
    }
}

    buttons-select[multiple] {
        display: grid;
        grid-template-columns: repeat(attr(grid-columns type(<number>), 7), 1fr);
    }

.midFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: central;
}

.appColor {
    color: var(--app-color);
}





.buttonSvg {
    --button-color: attr(color type(<color>), var(--app-color));
    border: 0;
    background-color: color-mix(in srgb, var(--button-color) 30%, var(--app-back));
    white-space: nowrap;
    text-wrap: nowrap;
    color: var(--button-color);
    transition: transform 0.15s linear;

    & > svg {
        display: inline-flex;
        float: left;
        stroke: var(--button-color);
        fill: color-mix(in lab, var(--button-color) 50%, var(--app-back));

        & path {
            filter: drop-shadow(1px 1px 7px var(--button-color));
        }
    }

    & > span {
        color: var(--button-color);
        display: inline-flex;
        height: 100%;
        justify-content: center;
        justify-self: center;
        align-self: center;
        align-items: center;
    }

    & > svg[stroked] {
        stroke: color-mix(in srgb, var(--button-color) 80%, var(--app-front));
        fill: transparent;


    }
}

    .buttonSvg:hover, .buttonSvg:active, .buttonSvg:focus {
        outline: none;

        & > svg {
            fill: var(--button-color);
            border: none;
        }

            & > svg[stroked] {
                fill: none;
                border: none;
            }
    }

    .buttonSvg:active {
        transform: scale(0.9);
    }


        @supports not (x: attr(x type(*))) {
            .buttonSvg[color=green] {
                --button-color: green;
            }

            .buttonSvg[color=teal] {
                --button-color: teal;
            }

            .buttonSvg[color="var(--app-gold)"] {
                --button-color: var(--app-gold);
            }

            .buttonSvg[color="var(--app-red)"] {
                --button-color: var(--app-red);
            }

            .buttonSvg[color="var(--app-green)"] {
                --button-color: var(--app-green);
            }

            buttons-select[grid-columns='2'] {
                grid-template-columns: repeat(2, 1fr);
            }

            buttons-select[grid-columns='3'] {
                grid-template-columns: repeat(3, 1fr);
            }

            buttons-select[grid-columns='4'] {
                grid-template-columns: repeat(4, 1fr);
            }

            buttons-select[grid-columns='7'] {
                grid-template-columns: repeat(7, 1fr);
            }
        }



.buttonST {
    display: grid;
    grid-template-columns:  1fr 3rem;
    min-width: 0;
    width: 7rem;
    grid-column-gap: 2px;
    box-shadow: 0px 0px 30px -5px var(--app-green);

    & > svg {
        max-width: 2.5rem;
        max-height: 2.5rem;
    }

    & > span {
        display: inline-flex;
        align-items:center;
        justify-items: start;
        justify-content: start;
        align-content: start;
        height: 3rem;
        font-weight: 700;
        font-family: "Courier New", monospace;
        font-size: 1rem;
    }
}




dialog > button[command=close] {
    position: absolute;
    top: 1vh;
    right: 1vw;
    height: 3rem;
    width: 3rem;
    border: none;
}


loading-dialog {
    transform: rotate(180deg);
}


dialog > button[command=close] {
    background-color: transparent;
    --button-color: var(--app-red);
    position: absolute;
    top: 1vh;
    right: 1vw;
    margin: 0;
    padding: 0;

    & > svg {
        display: block;
        margin: auto auto;
        justify-self: center;
        height: 2.5rem;
    }
}

.calendar {

    days {
        max-height: 40rem;
        overflow: hidden;
        background-color: var(--app-back90);
        display: grid;
        padding: 0.5rem;
        grid-template-columns: repeat(7, 1fr);
        grid-gap: 0.5rem;
        border-radius: 15px;

        & .dayButton {
            padding: 0.5rem;
            border-radius: 10px;
            font-family: "Courier New", monospace;

            & > span {
                display: block;
                margin: auto auto;
                font-size: 1.5rem;
            }
        }


        & date {
            color: var(--button-color);
        }
    }

    dayname {
        grid-row: 1;
        display: flex;
        width: 100%;
        justify-content: center;
        border-bottom: 1px dashed var(--app-color);
        color: var(--app-color);
    }

    .dayNo0 {
        grid-column: 7;
    }

    .dayNo1 {
        grid-column: 1;
    }

    .dayNo2 {
        grid-column: 2;
    }

    .dayNo3 {
        grid-column: 3;
    }

    .dayNo4 {
        grid-column: 4;
    }

    .dayNo5 {
        grid-column: 5;
    }

    .dayNo6 {
        grid-column: 6;
    }


    .dayNo6, .dayNo0 {
        border-left-color: orangered;
        outline: orangered;
        border-color: orangered;
        color: var(--red-front);

        & span {
            color: inherit;
        }
    }
}


#accountButton > img {
    display: flex;
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
}



#accountButton[popped] {
    background-color: var(--app-back50);
    border-bottom-left-radius: 5%;
    border-bottom: 5px solid var(--app-back50);
    border-bottom-right-radius: 0px;
    align-items: end;
}


account-popover:popover-open {
    position: absolute; /* REQUIRED */
    position-anchor: --accountbutton;
    inset: auto;
    margin: 0;
    right: anchor(right);
    top: anchor(bottom); /* now works */

    padding: 0.5rem;
    border: 1px solid transparent;
    background-color: var(--app-back50);
    border-radius: 1rem;
    border-top-right-radius: 0px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & > .buttonSvg {
        height: 2.5rem;
        margin: 0;
        padding: 0.5rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-size: 1rem;
        box-sizing: padding-box;
        display: grid;
        grid-template-columns: 1.7rem 1fr;
        align-items: center;
        justify-content: center;

        & > svg {
            max-height: 1.5rem;
            width: 1.5rem;
            display: inline-flex;
        }

        & > t-xt {
            padding-inline: 0.5rem;
            display: inline-block;
            justify-content: center;
            align-items: center;
            justify-items: center;
            
            
        }
    }
}

t-xt {
    color: inherit;
    font-family: inherit;
}






.texty {
    padding: 1rem;

    & > p {

        padding-left: 0.5rem;
        display: flex;
        flex-direction: column;
    }
}



    .svgDrawAni
    {
        stroke: var(--app-front);
        fill: var(--app-front);
        fill-opacity: 0;
        stroke-width: 0.01px;
        stroke-linecap: butt;
        stroke-linejoin: round;
        stroke-dashoffset: 39;
        stroke-dasharray: 39;
        animation: drawing 2s forwards infinite;
    }
     @keyframes drawing
    {
        0%
        {
            stroke-dashoffset: 39;
            stroke-width: 0.01px;
            fill-opacity: 0;
        }

        50%
        {
            stroke-width: 0.05px;
        }

        80%
        {
            fill-opacity: 0.1;
        }

        100%
        {
            stroke-dashoffset: 0;
            stroke-width: 0.1px;
            fill-opacity: 0.2;
        }
    }



       .saveChangesButton {
        position: absolute;
        opacity: 0;
        left: 50%;
        bottom: 50%;
        transform: translate(-50%, 50%);
        transition: opacity ease 0.5s, left linear 0.8s,bottom linear 0.8s, transform linear 0.8s, background-color linear 1s;
        
        
            max-height: 100px;

        & > button {

            & > svg {
                height: 7vh;
                width: 3.5rem;
            }


            & > t-xt {
                font-family: 'Courier New', monospace;
                font-size: 1.5rem;
                font-weight: 700;
            }
        }
    }

       
        .saveChangesButton[ready] {
            display: flex;
            opacity: 0.97;
            left: 1rem;
            bottom: 2.5rem;
            transform: none;
        }




        @supports (-webkit-touch-callout: none) {
    /* safari-only fixes */
}





        .colorSubmit
        {
            display: flex;
            min-width: 0;
            width: 98px;

            & input[type=color]
            {
                
					height: 48px;
                    width: 48px;
					border-radius: inherit;
					outline: none;
					border: none;
					padding: 0;
					box-sizing: content-box;
					box-shadow: inset 0 0 5rem var(--back-black);

            }


            & button {
             width: 48px;
            height: 48px; 


                &> svg{ height: 48px; 
                        width: 48px;

                }
            }
        }