body{
    background-color: var(--background-color-default);
    margin: 0%;
    overflow-x: hidden;
    transition: all 500ms ease, transform 0 ease;
}

.small{
    transform: scale(0.9);
}

@keyframes trsmall{
    0%{
        transform: scale(0.9);
    }
    100%{
        transform: scale(1);
    }
}

.tempbodyzoom{
    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: trsmall;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.maincenterflex{
    display: flex;
    justify-content: center;
}

@keyframes pop{
    0%{
        color: var(--background-color-default);
        text-align: center;
        font-size: 2vmin;
        font-family: var(--font-default);

        padding-top: 0vmin;
    }
    100%{
        color: var(--text-color-default);
        text-align: center;
        font-size: max(5vmin,12pt);
        font-family: var(--font-default);

        padding-top: min(5vmin,5vh);
    }
}

@keyframes minirotation{
    0%{
        transform:rotate(1deg);
        animation-timing-function: ease-in-out;
    }
    100%{
        transform:rotate(-1deg);
        animation-timing-function: ease-in-out;
    }
}

@keyframes null{
    0%{

    }
    100%{

    }
}

h1{
    color: var(--text-color-default);
    transition-duration: 500ms;
}

.big{
    animation-delay: 0ms,250ms;
    animation-play-state: running,running;
    animation-name: pop,minirotation;
    animation-duration: 250ms,1000ms;
    animation-iteration-count: 1,infinite;
    animation-direction: normal,alternate;

    padding-top: min(5vmin,5vh);

    margin: 0;

    color: var(--text-color-default);
    text-align: center;
    font-size: 5vmin;
    font-family: var(--font-default);
    
    transition-duration: 500ms;
}

.medbig{
    padding-top: min(4vmin,4vh);

    margin: 0;

    color: var(--foreground-color-grade90);
    text-align: center;
    font-size: 5vmin;
    font-family: var(--font-default);
    
    transition-duration: 500ms;
}

.med{
    padding-top: min(2vmin,2vh);

    margin: 0;

    color: var(--foreground-color-grade80);
    text-align: center;
    font-size: 4vmin;
    font-family: var(--font-default);
    
    transition-duration: 500ms;
}

.medlow{
    padding-top: min(2vmin,2vh);

    margin: 0;

    color: var(--text-color-default);
    text-align: center;
    font-size: 3.5vmin;
    font-family: var(--font-default);
    
    transition-duration: 500ms;
}

.low{
    padding-top: min(4vmin,4vh);

    margin: 0;

    color: var(--text-color-default);
    text-align: center;
    font-size: 3vmin;
    font-family: var(--font-default);
    
    transition-duration: 500ms;
}

span.low{
    font-weight:bold;
}

.smallspandisplay{
    padding-top: 0;
}

.yearspan{
    color: var(--foreground-color-grade90);
}


.titlegrid {
    height: min(15vh,15vmin);
    display: grid;

    grid-template-columns: 13.5vw 3fr 13.5vw;
    grid-template-rows: repeat(1,1fr);

}

.calendarmonthgrid {
    display: grid;

    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: repeat(1,1fr);

    height: min(10vh,10vmin);
    background-color: var(--foreground-color-default);

    overflow-y: show;

    padding: 1vmin 2vmin 1vmin 2vmin;

    margin-left: var(--grid-edge);
    margin-right: var(--grid-edge);

    border-radius: var(--rounding) var(--rounding) 0 0;

    flex-wrap: wrap;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: null;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-direction: normal;

    transition-duration: 500ms;
}

.calendarmonthgrid-element{
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--background-color-default);

    text-align: center;
    float:left;

    color: var(--text-color-default);

    margin: 1vmin;
    border-radius: var(--rounding);

    font-size: 3vmin;
    font-family: var(--font-default);

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    border-radius: var(--rounding);

    font-size:3vmin;

    transition-duration: 500ms;
}

.calendarmonthgrid-element:hover{
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--foreground-color-grade30);

    text-align: center;
    float:left;

    color: var(--text-color-default);

    margin: 1vmin;
    border-radius: var(--rounding);

    font-size: 3vmin;
    font-family: var(--font-default);

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    border-radius: var(--rounding);

    font-size:3vmin;

    transition-duration: 500ms;
}

.calendarmonthgrid-monthdisplay{

    display: grid;

    grid-template-columns: 1fr, 1fr;
    grid-template-rows: 1fr;

    justify-content: center;
    align-items: center;

    background-color: var(--background-color-default);

    text-align: center;
    float:left;

    color: var(--text-color-default);

    margin: 1vmin;
    border-radius: var(--rounding);

    font-size: 3vmin;
    font-family: var(--font-default);
}

.calendardaygrid {
    display: grid;

    grid-template-columns: repeat(7,1fr);
    grid-template-rows: repeat(1,1fr);

    height: min(5vh,5vmin);
    
    background-color: var(--midground-color-default);

    overflow-y: show;

    padding: 1vmin 2vmin 1vmin 2vmin;

    border-radius: 0 0 0 0;

    flex-wrap: wrap;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: null;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-direction: normal;

    transition-duration: 500ms;
}

.calendardaygrid-element{

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    background-color: var(--background-color-default);

    text-align: center;
    float:left;

    color: var(--text-color-default);

    margin: 1vmin;
    border-radius: var(--rounding);

    font-size: 3vmin;
    font-family: var(--font-default);
}

.calendargrid {
    display: grid;

    grid-template-columns: repeat(7,1fr);
    grid-template-rows: repeat(6,1fr);

    height: min(60vh,60vmin);
    width: min(96vh,96vmin);

    background-color: var(--foreground-color-default);

    overflow-y: show;

    padding: 2vmin 2vmin 2vmin 2vmin;

    margin-left: var(--grid-edge);
    margin-right: var(--grid-edge);

    border-radius: 0 0 var(--rounding) var(--rounding);

    flex-wrap: wrap;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: null;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-direction: normal;

    transition-duration: 500ms;
}

@keyframes calendargrid-element-popdown{
    0%{
        opacity: 0;
        transform: scale(1.2);
    }
    50%{
        transform: scale(0.9);
    }
    100%{
        opacity: 1;
        transform: scale(1);
    }
}

.calendargrid-element{

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--background-color-default);

    transform: scale(1);

    text-align: center;
    float:left;

    color: var(--text-color-default);

    margin: 1vmin;
    border-radius: var(--rounding);

    cursor: pointer;

    border-width: 0.5vmin;
    border-color: var(--foreground-color-grade30);
    border-style: solid;

    font-size: 3vmin;
    font-family: var(--font-default);

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: calendargrid-element-popdown;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;

    transition-duration: 500ms;
}

.calendargrid-element:hover{
    background-color: var(--midground-color-default);

    transform: scale(1.05);

    transition-duration: 100ms;
}

.calendargrid-element-today:hover{
    background-color: var(--foreground-color-grade20);

    transform: scale(1.05);

    transition-duration: 100ms;
}

.calendargrid-element-today{

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--foreground-color-grade10);

    text-align: center;
    float:left;

    color: var(--text-color-default);

    margin: 1vmin;
    border-radius: var(--rounding);

    cursor: pointer;

    border-width: 0.5vmin;
    border-color: var(--foreground-color-grade50);
    border-style: solid;

    font-size: 3vmin;
    font-family: var(--font-default);

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: calendargrid-element-popdown;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;

    transition-duration: 500ms;
}


.calendargrid-inactive-element{

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--midground-color-default);

    text-align: center;
    float:left;

    color: var(--text-color-default);

    margin: 1vmin;
    border-radius: var(--rounding);

    font-size: max(3vmin,10pt);
    font-family: var(--font-default);

    border-width: 0.5vmin;
    border-color: var(--foreground-color-grade10);
    border-style: solid;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: calendargrid-element-popdown;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.flexbox-text{
    text-align: left;

    color: var(--text-color-default);

    margin: 5vmin;

    font-size: max(3vmin,10pt);
    font-family: var(--font-default);

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: flexbox-textshow;
    animation-duration: 2000ms;
    animation-iteration-count: 1;
    animation-direction: normal;

    transition-duration: 500ms;
}

.button:not(:hover){
    text-align: center;
    background-color: var(--foreground-color-grade10);
    color: var(--text-color-default);
    margin-top: 0vmin;
    animation-timing-function: ease-in-out;

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    border-radius: var(--rounding);

    font-size:3vmin;

    font-family: var(--font-default);

    transition-duration: 500ms;
}

.button:hover{
    cursor: pointer;

    background-color: var(--foreground-color-grade20);

    text-align: center;
    color: var(--text-color-default);
    margin-top: 0vmin;
    animation-timing-function: ease-in-out;

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    border-radius: var(--rounding);

    font-size:3vmin;

    font-family: var(--font-default);

    transition-duration: 500ms;
}

.hiddenbuttonwrapper{
    background-color: transparent;

    border-color:transparent;
    border-style:hidden;
    border-width:0;

    border-radius:0;

    transition-duration: 500ms;
}

.hamburgermenubutton{
    opacity: 1;
}

.radiobuttontab{
    cursor: pointer;

    text-align: center;

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    border-radius: var(--rounding) var(--rounding) 0 0;

    font-size:3vmin;

    font-family: var(--font-default);

    transition-duration: 500ms;
}

.radiobuttontab:not(:hover){
    background-color: var(--foreground-color-grade10);
    color: var(--text-color-default);
    margin-top: 0vmin;
    animation-timing-function: ease-in-out;

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    font-size:3vmin;

    font-family: var(--font-default);

    transition-duration: 500ms;
}

.radiobuttontab:hover{
    background-color: var(--foreground-color-grade20);

    text-align: center;
    color: var(--text-color-default);
    margin-top: 0vmin;
    animation-timing-function: ease-in-out;

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    font-size:3vmin;

    font-family: var(--font-default);

    transition-duration: 500ms;
}

.checkbox{
    cursor: pointer;

    border-color:transparent;
    border-style:solid;
    border-width:1vmin;

    border-radius: var(--rounding);

    height: 5vmin;
    width: 5vmin;

    transition-duration: 500ms;
}

.checkbox.inactive{
    background-color: var(--foreground-color-grade10);
}

.checkbox.active{
    background-color: var(--checked-color);
}

.checkboxgrid{
    display: grid;

    grid-template-columns: 5vmin 1fr;
    grid-template-rows: 5vmin;

    margin-left: 20vw;
    margin-right: 20vw;
}

.autofit{
    height: min-content;
}

svg{
    background-color: transparent;
}

@keyframes dialog-popup{
    0%{
        margin-top: 100vh;
        opacity: 0;
        transform: rotate(0deg) scale(0.5);
    }
    100%{
        margin-top: 10vh;
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

@keyframes loaderload{
    0%{
        background-color: rgba(var(--midground-color-default), 1);
        backdrop-filter: blur(5vmin);
    }
    1%{
        background-color: rgba(var(--midground-color-default), 0.8);
    }
    100%{
        backdrop-filter: blur(2vmin);
    }
}

.loaderdialog{
    height:100vh;
    width:100vw;
    background-color: rgba(var(--midground-color-default), 0.8);
    backdrop-filter: blur(2vmin);

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: loaderload;
    animation-duration: 10000ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

@keyframes loaderloadremove{
    0%{
        background-color: rgba(var(--midground-color-default), 0.8);
        backdrop-filter: blur(2vmin);
    }
    100%{
        background-color: rgba(var(--midground-color-default), 0);
        backdrop-filter: blur(0vmin);
    }
}

.loaderdialogremove{
    height:100vh;
    width:100vw;
    background-color: rgba(var(--midground-color-default), 0);
    backdrop-filter: blur(0vmin);

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: loaderloadremove;
    animation-duration: 500ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.tl-dialog{
    backdrop-filter: blur(2vmin) !important;
    background-color: rgba(var(--checked-color), 0.8) !important;
}

.dialog{
    
    background-color: var(--midground-color-default);
    border-radius: var(--rounding);
    border-style: solid;
    border-color: var(--foreground-color-grade30);

    height: 80vh;
    width: 80vw;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-popup;
    animation-duration: 100ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    
    transition: all 500ms, transform 0;

    text-align: center;
}

.dialog-open{
    margin-top: 10vh;

    opacity: 1;

    background-color: var(--midground-color-default);

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-popup;
    animation-duration: 100ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.dialog-closed{
    margin-top: 100vh;

    opacity: 0;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-popup;
    animation-duration: 100ms;
    animation-iteration-count: 1;
    animation-direction: reverse;

    transform: rotate(0deg) scale(0.5);

    transition: all 100ms;
}


@keyframes dialog-fadebg{
    0%{
        background-color: rgba(var(--background-color-default), 0);
        backdrop-filter: blur(0vmin);
    }
    100%{
        background-color: rgba(var(--background-color-default), 0.8);
        backdrop-filter: blur(1vmin);
    }
}

.dialog::backdrop{
    background-color: rgba(var(--background-color-default), 0.8);
    backdrop-filter: blur(1vmin);

    transition-duration: 500ms;

    border-radius: var(--rounding);
}

.dialog-open::backdrop{
    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-fadebg;
    animation-duration: 100ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.dialog-closed::backdrop{
    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-fadebg;
    animation-duration: 100ms;
    animation-iteration-count: 1;
    animation-direction: reverse;
}

.dialog-top{
    background-color: var(--foreground-color-default);
    border-radius: var(--rounding);

    position:fixed;
}

.dialog-content{
    overflow:scroll;
    height: 80vh;
}

@keyframes dialog-jumpup{
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(1.25);
    }
    100%{
        transform: scale(1);
    }
}

.confirmdialog{

    background-color: var(--midground-color-default);
    border-radius: var(--rounding);
    border-style: solid;
    border-color: var(--background-color-reverse);

    height: 20vmin;
    width: 40vmin;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-jumpup;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    
    transition-duration: 500ms;

    text-align: center;
}

.confirmdialog.wide{

    background-color: var(--midground-color-default);
    border-radius: var(--rounding);
    border-style: solid;
    border-color: var(--background-color-reverse);

    height: 20vmin;
    width: 80vmin;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-jumpup;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    
    transition-duration: 500ms;

    text-align: center;
}

.notifstack{
    position: absolute;
    top: 5vmin;
    right: 5vmin;
    display: grid;
    float: right;
}

@keyframes notifshow{
    0%{
        background-color: transparent;
        margin-right: -50vmin;
    }
    100%{
        margin-right: 0vmin;
    }

}

.notification{
    height: 10vmin;
    width: 40vmin;
    background-color: var(--foreground-color-grade60);
    border-radius: var(--rounding);
    border-width: 0;
    transition-duration: 500ms;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: notifshow;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.notification.exp{
    height: 15vmin;
    background-color: var(--foreground-color-grade70);
    transition-duration: 500ms;
}

.grid-dlg:not([open]){
    display:none;
}

.grid-dlg[open]{
    display:grid;
}

.flex-dlg:not([open]){
    display:none;
}

.flex-dlg[open]{
    display:flex;
}

.daydisplay{

    background-color: var(--midground-color-default);
    border-radius: var(--rounding);
    border-style: solid;
    border-color: var(--background-color-reverse);

    height: 80vmin;
    width: 80vmin;

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-jumpup;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
    
    transition-duration: 500ms;

    text-align: center;
}


.confirmdialog::backdrop{
    background-color: var(--background-color-alerting);
    opacity:0.8;
    transition-duration: 500ms;

    border-radius: var(--rounding);

    animation-delay: 0ms;
    animation-play-state: running;
    animation-name: dialog-fadebg;
    animation-duration: 200ms;
    animation-iteration-count: 1;
    animation-direction: normal;
}

.paintchipgrid{
    display: grid;

    grid-template-columns: repeat(19,1fr);
    grid-template-rows: repeat(1,1fr);

    height: 5vmin;
    width: 95vmin;

    overflow: hidden;

    border-color: var(--text-color-default);
    border-width: 1vmin;
    border-style: solid;

    border-radius: var(--rounding);

    transition-duration: 500ms;
}

.paintchip{
    border-radius: 0;

    transition-duration: 500ms;
}

.previousnextmenugrid{
    display: grid;

    grid-template-columns: 6vmin 5fr 6vmin;
    grid-template-rows: repeat(1,1fr);

    width:40vw;
    height:10vmin;

    border-radius: 0;

    text-align: center;

    margin-left: 20vw;
    margin-right: 20vw;

    transition-duration: 500ms;
}

::selection{
    background-color: var(--selection-color);
    color: var(--foreground-color-reverse);
    opacity: 0.5;
}

a:link,a:active{
    color: var(--selection-color);
}

a:hover:not(a:active){
    color: var(--foreground-color-grade70);
}

a:visited:not(a:active,a:hover){
    color: var(--foreground-color-grade90);
}

::-webkit-scrollbar{
    width: 1.5vmin;
    height: 0vmin;
}
::-webkit-scrollbar-track{
    background: var(--foreground-color-grade10);
}
::-webkit-scrollbar-thumb{
    background: var(--foreground-color-grade50);
}
::-webkit-scrollbar-thumb:hover{
    background: var(--foreground-color-grade60);
}
::-webkit-scrollbar-corner{
    background: var(--background-color-default);
}