:root {
    --gray-1: #f1f3f5;
    --gray-10: #16191d;
    --gray-3: #dee2e6;
    --blue-3: #74c0fc;
    --red-6: #fa5252;
    --gray-8: #343a40;
    --gray-0: #f8f9fa;
    --gray-6: #868e96;
    --blue-9: #1864ab;
    --red-10: #b02525;
    --gray-5: #adb5bd;
    --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    --size-1: .25rem;
    --shadow-2: 
    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
    --size-4: 1.25rem;
    --size-2: .5rem;
    --font-size-4: 1.5rem;
    --radius-3: 1rem;
    --size-5: 1.5rem;
    --size-8: 3rem;
    --mask-edge-zig-zag-bottom: conic-gradient(from -45deg at bottom,#0000,#000 1deg 90deg,#0000 91deg) 50% / calc(2 * 20px) 100%;
    --gray-9: #212529;
    --font-size-0: .75rem;
    --size-3: 1rem;
    --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
    --animation-slide-in-down: slide-in-down .5s var(--ease-3);
    --ease-squish-3: cubic-bezier(.5, -.5, .1, 1.5);
    --shadow-color: 220 3% 15%;
    --shadow-strength: 1%;
    --ease-3: cubic-bezier(.25, 0, .3, 1);
}
/* @import url('open-props/normalize.min.css'); */
/* @import url('open-props/buttons.min.css'); */
/**
 * Resets
 */
pre {
    margin: 0;
}
/**
 * Find styles at https://open-props.style/!
 */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --system-color-scheme: dark;
    }
}
@media (prefers-color-scheme: light) {
    :root {
        color-scheme: light;
        --system-color-scheme: light;
    }
}
[data-theme="light"] {
    --main-bg: var(--gray-1);
    --main-font-color: var(--gray-10);
    --main-outline: var(--gray-3);
    --main-accent: var(--blue-3);
    --main-error: var(--red-6);
    --main-link-visited: var(--gray-8);
}
[data-theme="dark"] {
    --main-bg: var(--gray-8);
    --main-font-color: var(--gray-0);
    --main-outline: var(--gray-6);
    --main-accent: var(--blue-9);
    --main-error: var(--red-10);
    --main-link-visited: var(--gray-5);
}
body {
    background-color: var(--main-bg);
    color: var(--main-font-color);
    font-family: var(--font-sans);
}
select,
button {
    background-color: var(--main-bg);
    color: var(--main-font-color);
}
button {
    box-shadow: none;
    border: 1px solid black;
}
select {
    border: none;
    padding: var(--size-1);
    background-color: transparent;
}
header {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    height: max-content;
    box-shadow: var(--shadow-2);
    margin-bottom: var(--size-4);
    background: var(--main-accent);
    padding: var(--size-2);
}
main {
    display: flex;
}
header h1 {
    font-size: var(--font-size-4);
}
a:visited {
    color: var(--main-link-visited);
}
.error {
    background-color: var(--main-error);
    border-radius: var(--radius-3);
    padding: var(--size-5) var(--size-5) var(--size-8) var(--size-5);
    -webkit-mask: var(--mask-edge-zig-zag-bottom);
}
.flex-gap {
    flex-grow: 1;
}
#userheader>div {
    float: left;
    margin: 0 0.5em;
}
#userheader>img {
    float: right;
    margin: 0 0.5em;
}
.calendarWrapper {
    max-width: max-content;
    margin: 0 auto;
}
.day {
    display: inline-block;
    width: max-content;
    min-width: 10em;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--gray-9);
    font-size: var(--font-size-0);
    padding: var(--size-1);

    display: flex;
    flex-flow: column;
    align-items: stretch;
    gap: var(--size-1);
}
.month {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.control {
    display: inline;
    margin: 0.5em 0.5em 0.5em 0.5em;
}
.date-changer-text {
    margin: 0 var(--size-2);
}
button.audio {
    cursor: pointer;
}
footer {
    position: fixed;
    bottom: 0;
    height: max-content;
    padding: var(--size-3);
    text-align: center;
    width: 100%;

    color: var(--gray-5);
}
.medium-width {
    width: 40vw;
    margin: 0 auto;
}
/** spinner */
.loading {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
.login-card {
    /* General Look */
    width: 400px;
    height: 300px;
    margin: 33vh auto;
    /* background: white; */
    /* border-radius: var(--radius-3); */

    /* Animation */
    animation:
        var(--animation-fade-in-bloom),
        var(--animation-slide-in-down);
    animation-timing-function: var(--ease-squish-3);
    animation-duration: 0.55s;

    /* TODO: Design not optimal, work in Progress by @bjesuiter */
    /* TODO: Improve background color  */
    /* TODO: Move Login Headinge from top left into this card! */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}
@keyframes fade-in-bloom {
  0% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(2) blur(10px) }
100% { opacity: 1; filter: brightness(1) blur(0) }
}
@keyframes slide-in-down {
  from { transform: translateY(-100%) }
}
@media (prefers-color-scheme: dark) {
@keyframes fade-in-bloom {
  0% { opacity: 0; filter: brightness(1) blur(20px) }
 10% { opacity: 1; filter: brightness(0.5) blur(10px) }
100% { opacity: 1; filter: brightness(1) blur(0) }
}
:root {
        --shadow-color: 220 40% 2%;
        --shadow-strength: 25%;
    }
}