: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:#0092c7;
    
    --font:#1f1f1f;

    --red:#ff0066;
    --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
{
    height:10.2em;
    width:100%;

    display:grid;
    grid-template-columns:22% 50% 22%;
    justify-content:center;
    align-items:center;

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

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

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

img.header-img
{
    max-height:7em;
}

.header-right
{
    text-align:right;
}

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

.header-slim-grid
{
    display:grid;
    grid-template-columns:30% 30% 30%;
    justify-content:space-between;
    align-items:center;

    width:100%;
    height:2em;

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

    font-size:1.2em; 

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

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

.header-slim-left
{
    display:grid;
    padding-left:2em;
    text-align:left;
    cursor:default;
}

.header-slim-img
{
    height:0.8em;
    margin-right:0.5em;
}

.header-slim-center
{
    text-align:center;
    cursor:default;
}

.header-slim-right
{
    padding-right:2em;
    text-align:right;
    cursor:default;
}

.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-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-left
    {
        padding-left:1em;
    }

    .header-slim-right
    {
        padding-right:1em;
    }
}

@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-left
    {
        padding-left:0.6em;
    }

    .header-slim-right
    {
        padding-right:0.6em;
    }

    .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;
    }
}