:root 
{
    --background:#FFF;

    --grey-dark:rgb(100, 100, 100);
    --grey-dark-light:rgb(220, 220, 220);
    --grey:rgb(247, 247, 247);
    --grey-light:rgb(250, 250, 250);
    --grey-light-a:rgb(240, 240, 240, .2);
    --grey-lighter:rgb(253, 253, 253);

    --blue:#add8e6;
    --blue-dark:#0094cb;
    
    --font:#1f1f1f;

    --red:#e72f6c;
    --green:#54DEBB;
}

html, body
{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    color:var(--font);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

img
{
    -webkit-touch-callout:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    pointer-events:none;
    touch-action:manipulation;
}

form
{
    padding:0;
    margin:0;
}

a:link, a:visited, .link
{
    text-decoration:underline;
    color:var(--font);
    cursor:pointer;
}

a:focus, a:hover, a:active, .link:hover
{
    text-decoration:none;
    color:var(--font);
    cursor:pointer;
}

.header-grid
{
    box-sizing:border-box;
    height:10.2em;
    width:100%;

    display:grid;
    grid-template-columns:22% 50% 22%;
    grid-template-rows:100%;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    position:fixed;
    z-index:100;
    top:0;

    background-color:var(--blue);
    box-shadow:0 1px 5px -5px rgba(0,0,0,0.5);

    transition:height 0.28s ease, box-shadow 0.28s ease;
    will-change:height;
}

.header-grid.header-scrolled
{
    height:4.6em;
    box-shadow:0 4px 14px -8px rgba(0,0,0,0.45);
}

div.header-img
{
    text-align:center;
    line-height:0;
}

img.header-img
{
    max-height:7em;
    vertical-align:middle;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,0.2));
    transition:max-height 0.28s ease;
}

.header-grid.header-scrolled img.header-img
{
    max-height:3.3em;
}

.header-right
{
    text-align:right;
    transition:opacity 0.2s ease;
}

.header-grid.header-scrolled .header-right
{
    opacity:0;
    pointer-events:none;
}

.header-info
{
    margin:0.5em 0;
    -webkit-hyphens:auto;
    hyphens:auto;
}

.header-slim-grid
{
    box-sizing:border-box;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    column-gap:0.75rem;

    width:100%;
    height:2.4rem;
    padding:0 1rem;

    position:fixed;
    z-index:100;
    top:0;

    font-size:1rem;

    background-color:var(--blue);
    box-shadow:0 1px 5px -6px rgba(0,0,0,0.5);
    transition:box-shadow 0.28s ease;

    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}

.header-slim-grid.header-scrolled
{
    box-shadow:0 3px 12px -8px rgba(0,0,0,0.4);
}

.header-slim-left
{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:0;
    cursor:default;
}

.header-slim-img
{
    height:0.85rem;
    margin-right:0.4rem;
    flex:none;
}

.header-slim-center
{
    display:flex;
    align-items:center;
    justify-content:center;
    font-variant-numeric:tabular-nums;
    cursor:default;
}

.header-slim-right
{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    min-width:0;
    cursor:default;
}

.header-slim-name
{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;
}

.content
{
    background-color:var(--background);
    max-width:95%;
    position:relative;
    margin:0 auto;
    display:grid;
    justify-content:stretch; 
}

.content-box
{
    top:12rem;
}

.content-box-slim
{
    top:4rem;
}

.content-box-super-slim
{
    top:4rem;
}

.over
{
    position:fixed;
    display:flex;
    justify-content:center;
    align-items:center;
    
    opacity:0;
    margin:0 auto;
    width:100%;
    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
    transform:translate(0, -50%);
    top:50%;
}

.popup1 /* red text only */
{
    color:var(--red);
    text-align:center;
}

.popup3 /* fixed top */
{
    position:fixed;
    top:0;
    right:0;
    min-height:2.4rem;
    min-width:12rem;
    font-size:1rem;
    padding:0.4rem 0.5rem 0.4rem 3rem;
    text-align:right;
    box-sizing:border-box;
    z-index:101;
    animation:popup-animation 1s ease-in 3s forwards;
}

.popup4 /* normal div */
{
    width:100%;
    font-size:1em;
    padding:0.5em;
    text-align:center;
    box-sizing:border-box;
    margin-bottom:1em;
    animation:popup-animation 1s ease-in 3s forwards;
}

@keyframes popup-animation
{
    99% {opacity:0; z-index:auto;}
    100% {opacity:0; z-index:-100;}
}

.popup-long
{
    animation:auto !important;
}

.info3
{
    background-image:linear-gradient(to left, var(--blue-dark) 80%, hsla(200,50%,50%,0) 100%);
    color:var(--background);
}

.error3
{
    background-image:linear-gradient(to left, var(--red) 80%, hsla(200,50%,50%,0) 100%);
    color:var(--background);
}

.info
{
    background:var(--blue-dark);
    color:var(--background);
}

.error
{
    background:var(--red);
    color:var(--background);
}

a.error:link, a.error:active, a.error:visited
{
    color:var(--background);
    text-decoration:underline;
}

a.error:hover
{
    color:var(--background);
    text-decoration:none;
}

.main-box
{
    background-color:var(--grey);
    margin:0.2em;
    border-radius:1em;
	box-shadow:0px 4px 5px -5px rgba(0,0,0,0.2);
}

.main-box-hover:hover
{
    background-color:var(--grey-dark-light);
    cursor:pointer;
}

.button-no
{
    all:unset;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;

    padding:0.3em 1em;
    font-size:1.5em;
    text-align:center;

    border-radius:0.5em;
    box-shadow:0px 4px 5px -5px rgba(0,0,0,0.2);
}

.button
{
    all:unset;
    cursor:pointer;
    touch-action:manipulation;
    user-select:none;

    padding:0.3em 1em;
    font-size:1.5em;
    text-align:center;

    border-radius:0.5em;
	box-shadow:0px 4px 5px -5px rgba(0,0,0,0.2);
}

.button:hover
{
    box-shadow:0 0 0 0.3rem var(--grey-dark-light);
}

.button-gap-top
{
    margin:0.5rem 0;
}

.button-gap-left
{
    margin-left:0.5em;
}

.button-small
{
    padding:0.25em 0.8em;
    font-size:1em;
}

.button-blue
{
    color:var(--font);
    background-color:var(--blue);
}

.button-red
{
    color:var(--background);
    background-color:var(--red);
}

.button-red-pulse
{
    color:var(--background);
    background-color:var(--red);
    animation:pulse-animation 0.545s ease-in-out infinite;
}

@keyframes pulse-animation
{
    0% {transform:scale(1); box-shadow:0px 4px 5px -5px rgba(0,0,0,0.2);}
    50% {transform:scale(1.05); box-shadow:0 0 0 0.3rem rgba(255, 0, 102, 0.3);}
    100% {transform:scale(1); box-shadow:0px 4px 5px -5px rgba(0,0,0,0.2);}
}

.button-green
{
    color:var(--background);
    background-color:var(--green);
}

.button-grey
{
    color:var(--font);
    background-color:var(--grey-dark-light);
}

.big-text
{
    text-align:center;
    margin:0 0 1rem 0;
    font-size:4rem;
}

.small-text
{
    text-align:center;
    font-size:1rem;
    color:var(--grey-dark);
}

.submit-box
{
    margin:0 auto 0.8rem auto;
    text-align:center;
    width:15rem;
    min-height:2.4rem;
    position:relative;
}

.submit-box > .button,
.submit-box > .button-no
{
    position:fixed;
    left:50%;
    bottom:1rem;
    transform:translateX(-50%);
    z-index:95;
}

.submit-loading
{
    display:none;
    margin-left:0.5em;
}

input.pass, input.user
{
    width:17rem;
    height:1rem;
    padding:1rem;
    font-size:1rem;
    color:var(--grey-dark);
    border-radius:1rem;
    border:0;

    background-color:var(--grey);
    box-shadow:0px 2px 5px -5px rgba(0,0,0,0.3);
}

input.pass:focus, input.user:focus
{
    background-color:var(--grey-light);
}

@media screen and (max-width:1200px)
{
    .content-box-super-slim
    {
        top:3rem;
    }
}

@media screen and (max-width:1000px)
{
    .content
    {
        width:90%;
        padding-bottom:2em;
    }

    .header-slim-grid
    {
        padding:0 0.75rem;
    }
}

@media screen and (max-width:700px)
{
    .content
    {
        width:85%;
    }

    .content-box
    {
        top:11.5rem;
    }

    .content-box-slim
    {
        top:3rem;
    }

    .header-info
    {
        font-size:0.8em;
    }

    .header-slim-grid
    {
        padding:0 0.6rem;
        column-gap:0.5rem;
    }

    .main-box
    {
        border-radius:2px;
    }

    .button, .button-no
    {
        border-radius:2px;
        margin:0.3em;
    }

    .maintenance
    {
        font-size:2em;
    }

    .submit-box
    {
        margin:0 auto 0.5rem auto;
        min-height:2.2rem;
    }

    .submit-box > .button,
    .submit-box > .button-no
    {
        width:calc(100% - 2rem);
        max-width:15rem;
        bottom:0.6rem;
    }
}