@charset "utf-8";

* {
margin: 0;
padding: 0;
font-size: 1em;
font-family: 'Segoe UI', Tahoma, sans-serif;
}

body {
background-color: #333333;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 70px 1fr 2rem;
height: 100vh;
}
body.mini {grid-template-rows: 2rem 1fr min-content;}

noscript {
font-size: 0.8em;
color: #008F3B;
z-index: 1;
}
noscript div {
margin: 10px;
padding: 5px 10px;
background-color: #E8F7EE;
}
noscript a {color: #008F3B;}
noscript a:hover {
text-decoration: none;
color: BLACK;
}

#boxMsg {
grid-row: 1/4;
grid-column: 1/2;
background-color: #FFFFFFBF;
z-index: 100;
text-align: center;
line-height: 1.5em;
}
#boxMsgTxt {
width: 500px;
margin: 0 auto;
border: 3px solid #2070CF;
background-color: #D8E6F7;
padding: 20px;
margin-top: calc(30vh);
}

#alert {
grid-row: 2/3;
grid-column: 1/2;
z-index: 100;
text-align: center;
}

#alert div {
width: 500px;
margin: 0 auto;
background-color: #712428;
border: 3px solid #DE8E92;
color: #fff;
padding: 20px;
margin-top: calc(30vh);
}

#logininfo {
color: #DFB58F;
font-size: 0.8em;
position: absolute;
left: 15px;
top: 15px;
z-index: 0;
}

#langinfo {
grid-row: 1/2;
grid-column: 1/2;
color: #DFB58F;
font-size: 0.75em;
text-align: center;
z-index: 5;
height: 1.2em;
padding-top: 5px;
}

#splash {
grid-row: 1/4;
grid-column: 1/2;
align-self: center;
color: #DFC8B2;
letter-spacing: 0.1em;
background: url('startup.gif') no-repeat 50% 0;
padding: 30px 0 0 0;
text-align: center;
overflow: auto;
line-height: 1.8em;
}

/* Header */
#header {
grid-row: 1/2;
grid-column: 1/2;
overflow: hidden;
border-bottom: 5px solid #54984D;
z-index: 1;
background-color: #202020;
display: grid;
grid-template-columns: 1fr 150px 120px;
grid-template-rows: 1fr;
gap: 10px;
padding: 0 10px;
box-sizing: border-box;
}
#h1 {
font-size: 2em;
color: #54984D;
grid-row: 1/2;
grid-column: 1/2;
align-self: end;
}
#header a {
text-decoration: none;
color: #83B77E;
font-size: 0.8em;
padding: 10px 10px 0 40px;
grid-row: 1/2;
align-self: end;
height: 30px;
background-position: 9px 50%;
background-repeat: no-repeat;
z-index: 6;
}
#header a:hover {
background-color: #54984D;
color: #202020;
}
#btnsettings {background-image: url(settings.png); grid-column: 3/4;}
#btnminimal {background-image: url(mini.png); grid-column: 2/3;}

#miniheader {
border-bottom: 1px solid #734A24;
grid-row: 1/2;
grid-column: 1/2;
}
#mh1 {
width: 100%;
text-align: center;
color: #DFB58F;
letter-spacing: 0.05em;
font-size: 1.3em;
}
#toclassic {
position: absolute;
right: 10px;
top: 3px;
display: block;
width: 23px;
height: 23px;
background: url(right.png) no-repeat scroll;
}


/* Status */
#status {
grid-row: 3/4;
grid-column: 1/2;
align-self: center;
justify-self: center;
font-size: 0.7em;
padding: 3px 10px 5px 30px;
color: #54984D;
display: flex;
gap: 1em;
background-color: #333333d6;
white-space: nowrap;
flex-flow: wrap;
justify-content: center;
}
.updating {background: url(refresh.gif) no-repeat scroll 10px 50%;}
#status span, #status .file {
color: #DFB58F;
}
#status .file:hover {
text-decoration: none;
}

@media only screen and (max-width: 700px) {

    #header a {
        background-position: 50% 50%;
        color: transparent;
    }
    #header a:hover {color: transparent;}
    #header {
        grid-template-columns: 1fr 50px 50px;
    }
    .updating {background: url(refresh.gif) no-repeat scroll 20px 50%;}
    #status {padding: 5px 10px 15px 10px;}

}