/* Grey Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"], :root:not([data-theme="dark"]) {
    --primary: #757575;
    --primary-hover: #616161;
    --primary-focus: rgba(117, 117, 117, 0.125);
    --primary-inverse: #FFF;
    --tile-background: #eee;
    --primary-background: #F6ECDD;
}
/* Grey Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --primary: #757575;
        --primary-hover: #9e9e9e;
        --primary-focus: rgba(117, 117, 117, 0.25);
        --primary-inverse: #FFF;
        --tile-background: #222;
    }
}
/* Grey Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --primary: #757575;
    --primary-hover: #9e9e9e;
    --primary-focus: rgba(117, 117, 117, 0.25);
    --primary-inverse: #FFF;
    --tile-background: #222;
}
/* Grey (Common styles) */
:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
}

/* Use brandon-grotesque as font */
@font-face {
    font-family: 'Brandon-Grotesque';
    src: url('/static/fonts/brandon-grotesque.woff2') format('woff2');
}
/* Use Marborn as font */
@font-face {
    font-family: 'Marborn';
    src: url('/static/fonts/Marborn.woff2') format('woff2');
}
@font-face {
    font-family: 'LiberationSans-Regular';
    src: url('/static/fonts/LiberationSans-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'BebasNeue-Regular';
    src: url('/static/fonts/BebasNeue-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'LEMONMILK-Regular';
    src: url('/static/fonts/LEMONMILK-Regular.woff2') format('woff2');
}



/* Geist Black */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-Black.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

/* Geist Bold */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-Bold.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* Geist Light */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-Light.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

/* Geist Medium */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-Medium.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

/* Geist Regular */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-Regular.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Geist SemiBold */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-SemiBold.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

/* Geist Thin */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-Thin.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

/* Geist UltraBlack */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-UltraBlack.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-UltraBlack.woff') format('woff');
    font-weight: 950;
    font-style: normal;
}

/* Geist UltraLight */
@font-face {
    font-family: 'Geist';
    src: url('/static/fonts/Geist/Geist-UltraLight.woff2') format('woff2'),
         url('/static/fonts/Geist/Geist-UltraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}


:root{
    --pico-font-family: "Geist","Roboto", system-ui,-apple-system,"Segoe UI","Ubuntu","Cantarell","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}
a#logo {
    font-family: "Marborn";
    font-size: 2em;
    text-decoration: none;
}
.right {
    text-align: right;
}
.nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blue { background-color: #aaf;}
.green { background-color: #afa;}
.yellow { background-color: #ffa;}
.red { background-color: #faa;}

/* Receiver Styling */
.left-form {
    border-style: solid;
    border-right-style: none; 
    border-color: #ccc;
    border-width: 1px;
    border-radius: 10px;
    border-top-right-radius: 0;  
    border-bottom-right-radius: 0;  
}

.tile {
    border-radius: 10px;
    padding: 1em;
    margin: 0 0 1em 0;
    background-color: var(--tile-background);
}

.keepbreaks {
    white-space: pre-wrap;
}

a { text-decoration: none;}


.logo-round {
    max-width: 4em;
    border-radius: .5em; /* Example radius */
}

input[type="text"].round {    
    border-radius: 2em; /* Example radius */
    /* Other styling */
}
input[type="text"]:focus {
    outline: none; /* Removes the default focus outline */
}