/******************************* Initialization *******************************/
*, *::before, *::after { box-sizing: border-box; }
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {                                                 /* autocomplete */
    -webkit-box-shadow: 0 0 0 30px var(--color-panel) inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
    font-size: calc(1.0*var(--fontsize)) !important;
}



/********************************* HTML Tags **********************************/
body {
    background:          var(--color-background);
    background-size:     contain;
    border:              none;
    color:               var(--color-text);
    font-family:         "Calibri Regular", sans-serif;
    font-size:           var(--fontsize);
    margin:              0;
    /*overflow-x:          hidden;*/
    padding:             0;
    quotes:              '\201E' '\201D' '\00BB' '\00AB';
    display:             grid;
    grid-template-areas: "header" "menu" "errm" "info" "psa" "main" "footer" "dev";
    gap:                 0;
}
#errm  { grid-area: errm; }
#info  { grid-area: info; }
#psa   { 
    grid-area: psa;  
    width:      75%;
    margin:     20vh auto 0 auto;
    padding:    var(--fontsize);
    border:     var(--color-border) 1px solid;
    background: var(--color-panel);
    font-size:  calc(2.0*var(--fontsize));
}

#dev   { grid-area: dev;  }
main   { grid-area: main; }
footer { grid-area: footer;}

header {
    grid-area:             header;
    display:               grid;
    gap:                   0px 0px;
    justify-items:         start;
    align-items:           center;
    grid-template-columns: calc(1.4*var(--logo-x)/var(--logo-y)*2.0/var(--aspectratio)*var(--fontsize)) auto calc(30*var(--fontsize));
    grid-template-areas:   "logo appname sysarea";
    background:            var(--color-header);
}
header > img {
    grid-area: logo;
    height:    calc(                                2.0/var(--aspectratio)*var(--fontsize));
    width:     calc(    var(--logo-x)/var(--logo-y)*2.0/var(--aspectratio)*var(--fontsize));
    margin:    calc(0.2*var(--logo-x)/var(--logo-y)*2.0/var(--aspectratio)*var(--fontsize));
}
header > .appname {
    grid-area:    appname;
    font-size:    calc(2.0*var(--fontsize));
    font-family:  "HZurich Extended" "Calibri Regular" sans-serif;
    font-variant: small-caps;
    font-weight:  bold;
    color:        var(--color-title);
}

menu { 
    grid-area:   menu;
    width:       100%;
    margin:      0;
    padding:     2px;
    border:      none;
    background:  var(--color-title);
    color:       var(--color-panel);
    display:     grid;
    grid-template-columns: min-content min-content min-content auto min-content;
    grid-template-areas: "mainpage admin testblog spacer logout";
    justify-items:       stretch;
    justify-content:     stretch;
}
menu > li         { padding-right: calc(1.0*var(--fontsize)); display: inline; cursor: pointer; }
menu > li:hover   { filter: hue-rotate(0deg) saturate(100%) contrast(100%) brightness(90%); }
#mainpage { grid-area: mainpage; }
#admin    { grid-area: admin;    }
#testblog { grid-area: testblog; }
#spacer   { grid-area: spacer;   }
#logout   { grid-area: logout;   justify-self: end;  }

img {}

li {}

pre {
    font-size:   calc(max(0.75*var(--fontsize), 12px));
    font-family: "Roboto Mono", monospace;
    margin:      0;    
}

div {
    margin:  0;
    padding: 0;
}

h1 {
    margin:     0 auto 0 auto;
    text-align: center;
    font-size:  calc(2.0*var(--fontsize));
    color:      var(--color-title);
}

h2 {
    margin:     0 auto 0 auto;
    text-align: center;
    font-size:  calc(1.6*var(--fontsize));
    color:      var(--color-title);
}

h3 {
    margin:     0 auto 0 auto;
    text-align: center;
    font-size:  calc(1.4*var(--fontsize));
    color:      var(--color-title);
}

h4 {
    margin:     0 auto 0 auto;
    text-align: center;
    font-size:  calc(1.2*var(--fontsize));
    color:      var(--color-title);
}

h5 {
    margin:      0;
    text-align:  center;
    font-size:   calc(1.1*var(--fontsize));
    font-weight: bold;
    color:       var(--color-title);
}

h6 {
    margin:      0;
    font-size:   calc(2.0*var(--fontsize));
    font-weight: bold;
    color:       var(--color-title);
}

input, button {
    outline:   none;
    width:     available;
    margin:    0;    
    font-size: var(--fontsize);
}

input[type='text'], input[type='password'] {
    border:        1px solid var(--color-border);
    border-radius: calc(0.1*var(--fontsize));
    background:    var(--color-panel);
    padding:       1px calc(0.25*var(--fontsize)) 1px calc(0.25*var(--fontsize));
    color:         var(--color-text);
}
input[type='text']:disabled,  input[type='password']:disabled,  button:disabled  { filter: sepia(100%) !important; }
input[type='text']:read-only, input[type='password']:read-only, button:read-only { filter: sepia(100%) !important; }

input[type='button'], input[type='submit'], input[type='reset'], input[type='file'], button {
    margin:        2px auto 2px auto;
    border:        1px solid var(--color-border);
    border-radius: calc(0.2*var(--fontsize));
    background:    var(--color-title);
    padding:       2px calc(2.0*var(--fontsize)) 2px calc(2.0*var(--fontsize));
    font-weight:   bold;
    color:         var(--color-panel);
}
input[type='button']:hover,    input[type='submit']:hover,    input[type='reset']:hover,    input[type='file']:hover,    button:hover    { filter: saturate(0.1) !important; }
input[type='button']:disabled, input[type='submit']:disabled, input[type='reset']:disabled, input[type='file']:disabled, button:disabled { filter: sepia(100%) !important; }

select {
    outline:       none;
    width:         available;
    margin:        0;    
    border:        1px solid var(--color-border);
    border-radius: calc(0.1*var(--fontsize));
    background:    var(--color-panel);
    padding:       1px calc(0.25*var(--fontsize)) 1px calc(0.25*var(--fontsize));
    font-size:     var(--fontsize);  
    color:         var(--color-text);
}
select:disabled  { filter: sepia(100%) !important; }

textarea {
    outline:       none;
    width:         -webkit-fill-available;
    margin:        0;    
    border:        1px solid var(--color-border);   
    border-radius: calc(0.1*var(--fontsize));
    background:    var(--color-panel);
    padding:       1px calc(0.25*var(--fontsize)) 1px calc(0.25*var(--fontsize));
    font-size:     var(--fontsize);
    color:         var(--color-text);
}
textarea:disabled  { filter: sepia(100%) !important; }
textarea:read-only { filter: sepia(100%) !important; }

table { 
    border-collapse: collapse; 
    margin:          0 auto 0 auto;
}
table > thead {}
table > thead > tr {}
table > thead > tr > th {}
table > thead > tr > td {}
table > tbody {}
table > tbody > tr {}
table > tbody > tr > th {}
table > tbody > tr > td {}
table > tfoot {}
table > tfoor > tr {}
table > tfoor > tr > th {}
table > tfoor > tr > td {}

label { 
    font-size:   calc(1.0*var(--fontsize)); 
    font-weight: normal; 
    color:       var(--color-title); 
    align-self:  center; 
}



/*************************** Style Building Blocks ****************************/
.hidden          { display: none !important;  }
.green2red       { filter: hue-rotate(-110deg) !important; }
.green2red:hover { filter: hue-rotate(-110deg) saturate(100%) contrast(100%) brightness(90%) !important; }
.italic          { font-style: italic !important; }
.wrap            { word-wrap:   break-word !important; }
.center          { margin-left: auto !important; margin-right: auto !important; text-align: center !important; justify-content: center; justify-items: center; justify-self: center; }
.left            { margin-left: 0    !important; margin-right: auto !important; text-align: left   !important; justify-content: left;   justify-items: left;   justify-self: left;   }
.right           { margin-left: auto !important; margin-right: 0    !important; text-align: right  !important; justify-content: right;  justify-items: right;  justify-self: right;  }
.bigger          { font-size: calc(1.25*var(--fontsize)) !important; }
.w20             { max-width: 20vw; }
.panel           { 
    margin:        calc(1.0*var(--fontsize));
    width:         calc(100% - 2.0*var(--fontsize));
    max-width:     calc(100% - 2.0*var(--fontsize));
    border:        0;
    border-radius: calc(0.1*var(--fontsize));
    background:    var(--color-panel);
    padding:       calc(0.5* var(--fontsize));
    box-shadow:    3px 2px 8px 0px var(--shadow);
}
.linkbutton {
    background:  var(--transparent) !important;
    border:      none               !important;
    color:       var(--color-title) !important;
    font-weight: normal             !important;
}
.icon:hover { filter: drop-shadow(0 0 5px var(--shine)) !important; }
.icon {
    margin:     0                          !important;
    padding:    0                          !important;
    background: var(--transparent)         !important;
    border:     none                       !important;
    font-size:  calc(1.25*var(--fontsize)) !important;
}
.icon:hover { filter: drop-shadow(0 0 5px var(--shine)) !important; }
.redalert { 
    color: var(--color-mark);
    text-align: center; 
}
/* white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces */
/* text-overflow: clip | ellipsis | "" | "?" */
/* overflow-wrap: normal | anywhere | break-word */
/* word-break: normal | break-all | keep-all | break-word */
/* hypens: none | manual | auto  */



/*********************************** Styles ***********************************/
tbale.filelist { border-collapse: separate; }
table.filelist > thead > tr > th {
    border:      solid 2px var(--color-background);
    padding:     1px 4px 1px 4px;
    background:  var(--color-title);
    color:       var(--color-background);
    font-weight: normal;
}
table.filelist > tbody > tr > td {
    border:        solid 2px var(--color-background);
    background:    var(--color-header);
    color:         var(--color-text);
    font-weight:   normal;    
    padding-left:  2px;
    padding-right: 2px;
    word-wrap:     break-word;
}
.title {
    margin:    0 0 calc(0.4*var(--fontsize)) 0;
    font-size: calc(1.5*var(--fontsize)); 
    color:     var(--color-title);     
}



/********************************** Layouts ***********************************/
.layout_login {
    margin:  10vh auto 0 auto;
    width:   calc(35.0*var(--fontsize));
}
.layout_login > .panel {
    display: grid;
    padding: calc(0.5*var(--fontsize)) calc(2.0*var(--fontsize)) calc(0.5*var(--fontsize)) calc(2.0*var(--fontsize));
    grid-template-columns: auto auto;
    grid-template-areas:   "title title" 
                           "l1       i1"
                           "l2       i2"
                           "i3       l3"
                           "b1       b1"
                           "b2       b2"
                           "b3       b3"
                           "b4       b4"  
                           "text   text";
    gap:                   0 0;
    place-items:           start stretch;
}
.layout_login > .panel > .title { grid-area: title; margin-bottom: 2vh; }
.layout_login > .panel > .l1    { grid-area: l1; }
.layout_login > .panel > .l2    { grid-area: l2; }
.layout_login > .panel > .l3    { grid-area: l3; }
.layout_login > .panel > .i1    { grid-area: i1; }
.layout_login > .panel > .i2    { grid-area: i2; }
.layout_login > .panel > .i3    { grid-area: i3; }
.layout_login > .panel > .b1    { grid-area: b1; margin-top: 2vh; }
.layout_login > .panel > .b2    { grid-area: b2; }
.layout_login > .panel > .b3    { grid-area: b3; }
.layout_login > .panel > .b4    { grid-area: b4; }
.layout_login > .panel > .text  { grid-area: text; }



.layout_main {
    margin:                0 auto 0 auto;
    padding:               0;
    max-width:             99%;
    width:                 99%;
    display:               grid;
    grid-template-columns: auto;
    grid-template-areas:   "dropbox"
                           "action"
                           "list"
                           "access";
    gap:                   0 0;
    place-items:           start stretch;
}
.layout_main > .dropbox   { 
    grid-area: dropbox; 
    max-width: 50%; 
    margin: 4vh auto 0 auto; 
    border: dashed 3px var(--color-title) ;
    border-radius: calc(0.5*var(--fontsize));
    background: var(--color-header);
    padding: calc(2.0*var(--fontsize));
    
}
.layout_main > .action    { grid-area: action;  margin: 3vh auto 3vh auto;  }
.layout_main > .list      { grid-area: list;      }
.layout_main > .access    { grid-area: access;    }