* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
}

header {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    background: var(--bg-color-header);
    padding: 20px 40px;
}

header::before {
    content: '';
    position: absolute;
    top: -5px;
    right: 45px;
    width: 15%;
    height: 20px;
    background-color: var(--btn-color);
    border-radius: 0 0 10px 10px;
    box-shadow: -4px 3px 4px var(--btn-color);
    background: 
        linear-gradient(180deg, rgba(255 255 255 / 0.4), rgba(0 0 0 / 0.4), rgba(255 255 255 / 0.4)),
        linear-gradient( var(--btn-color), var(--btn-color) ),
        linear-gradient(180deg, hsl(var(--btn-color-hue), 48%, 47%), hsl(var(--btn-color-hue), 51%, 36%) );
}

header img {
    width: 10%;
    min-width:100px;
    margin: auto 0;
    grid-row: 1/3;
    grid-column: 1;
    cursor: pointer;
}

header nav {
    grid-row: 1;
    grid-column: 3;
    justify-self: flex-end;
    margin-right: 45px.5em;
}

header nav a {
    /* text-transform: uppercase; */
    font-size: var(--fs-small);
    color: var(--txt-color-highlight);
    cursor: pointer;
    margin: 5px .7em;
    text-decoration: none;
    font-weight: 600;
}

header #langs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    --ico: url('../img/lang/en.gif');
    font-size: 20px;
    cursor: pointer;
    grid-row: 2;
    grid-column: 2;
}

header #langs li::after {
    position: absolute;
    content: '';
    background: 50% var(--ico) no-repeat;

    background-size: contain;
    inset: 0;
}

header #langs li {
    list-style: none;
    margin: auto 15px;
    position: relative;
    color:transparent;
    box-shadow: .5px .5px 2px rgba(0 0 0 / 0.6);
    width:32px;
    height:24px;
}

header #logout {
    grid-row: 2;
    grid-column: 3;
    justify-self: flex-end;
    padding-right:20px;
}

header + nav {
    display: flex;
    flex-direction: row;
    gap: 1em;
    justify-content: center;
    position: relative;
}

header + nav a:target {
    font-weight: bold;
}

header + nav > span {
    padding: 0 1em;
}

header + nav {
    height: 2rem;
    overflow: visible;
    background: var(--bg-color-header);
    z-index: 100;
    position: relative;
}

header + nav > ul {
    padding: 0 1rem;
}

header + nav > ul > li {
    list-style: none;
    /* text-transform: uppercase; */
    font-size: var(--fs-small);
    /* color: var(--txt-color-highlight);
    background-color: var(--bg-color-header);
    background-image: linear-gradient(0deg, #ffffff00, #ffffff66, #ffffff00);*/
    height:0;
    min-width: 6rem;
    padding: 0 .25rem;
    overflow: hidden;
    display:flex; 
    background: 
        linear-gradient(rgba(255 255 255 / 0.6), rgba(0 0 0 / 0.6), rgba(255 255 255 / 0.6)),
        linear-gradient( var(--bg-color-header), var(--bg-color-header) ),
        linear-gradient( hsl(var(--bg-color-header-hue), 100%, 67%), hsl(var(--bg-color-header-hue), 80%, 56%) );
    background-clip: padding-box, padding-box, border-box;
    background-origin: border-box;
    background-blend-mode: screen, normal, normal;
    background-size: 100% 200%, 100% 100%;
    background-position: 0 0, 0 0;
    
    font-weight: bold;
    padding: 0 0.8em;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 auto;
    color: var(--txt-color-highlight);
    display: flex;

    border: 1px solid transparent;
    border-width: 0 1px;
}

header + nav > ul > li > a {
    text-align: center;
    flex: 100% 1 1;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

header + nav > ul > li:first-of-type {
    width:8rem;
}

header + nav > ul > li:first-of-type, header + nav > ul.open > li {
    height:2rem;
    line-height:2rem;
    box-shadow: 
        inset 0 1px 1px rgba(255 255 255 / 0.5),
        0 0 0 2px rgba(0 0 0 / 0.07), 
        0 1px 2px rgba(0 0 0 / 0.2);
    border: 1px solid transparent;
}

header + nav > ul.open > li.target, header + nav > ul.target > li:first-of-type {
    font-weight: bold;
    font-style: italic;
    background-position: 0 50%, 0 0;
    box-shadow: 
        inset 0 1px 1px rgba(255 255 255 / 0.5),
        0 0 0 2px rgba(43 88 166 / 0.17), 
        0 2px 4px rgba(0 0 0 / 0.2);
}

header + nav > ul.open > li:first-of-type::before {
    z-index: 100;
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    pointer-events: none;
}

header + nav > ul > li:hover {
    background-position: 0 -50%, 0 0;
    box-shadow: 
        inset 0 1px 1px rgba(255 255 255 / 0.5),
        0 0 0 2px rgba(43 88 166 / 0.17), 
        0 2px 4px rgba(0 0 0 / 0.2);
}

header + nav[data-flag]::after {
    content: attr(data-flag-label) ': ' attr(data-flag);
    position: absolute;
    height: 1.5rem;
    padding: .25rem 2rem .25rem 3rem;
    right: 0;
    top: 2rem;
    background: linear-gradient(60deg, transparent 1rem, var(--bg-color-header) 1.4rem);
    box-shadow: 1.333rem 0 .4em var(--bg-color-header);
    color: var(--txt-color-highlight);
    font-weight: bold;
}

body.authenticated > header + nav > i { display:none; }

body.index > main {
    background: center center fixed url(../img/covid.jpg);
    background-size: cover;
}

body.index > main > div > * {
    background: rgba(255, 255, 255, .9);
    border-radius: 10px;
    padding: 10px;
    width: 700px;
    align-self: center;
}



body:not(.index, .public):not(.authenticated) main {
    visibility: hidden;
}

body:not(.authenticated) > header + nav > ul,
body:not(.authenticated) > header #logout {
    display:none;
}

#login-failed {
    background-color: rgba(255 0 0 / .1);
    align-items: center;
    font-weight: bold;
    font-style: italic;
    color: #8b0000;
    display: none;
}

#login-failed:target {
    display: flex;
}

button, .button {
    
    background: 
        linear-gradient(rgba(255 255 255 / 0.4), rgba(0 0 0 / 0.4), rgba(255 255 255 / 0.4)),
        linear-gradient( var(--btn-color), var(--btn-color) ),
        linear-gradient( hsl(var(--btn-color-hue), 48%, 47%), hsl(var(--btn-color-hue), 51%, 36%) );
    background-clip: padding-box, padding-box, border-box;
    background-origin: border-box;
    background-blend-mode: screen, normal, normal;
    background-size: 100% 200%, 100% 100%;
    background-position: 0 0, 0 0;
    border: 1px solid transparent;
    box-shadow: 
        inset 0 1px 1px rgba(255 255 255 / 0.5),
        0 0 0 2px rgba(0 0 0 / 0.07), 
        0 1px 2px rgba(0 0 0 / 0.2);

    font-weight: bold;
    line-height: 1.25em;
    padding: 4px 0.8em;
    border-radius: 3px;
    cursor: pointer;
    margin: 0 auto;
    color: var(--btn-txt-color);
    font-size: 1.05em;
}

button:focus-visible, .button:focus-visible {
    outline: 2px dashed hsl(var(--button-hue), 38%, 57%);
    outline-offset: calc(0.28em - 2px);
  }
  
button:hover, .button:hover {
    background-position: 0 -50%, 0 0;
    box-shadow: 
        inset 0 1px 1px rgba(255 255 255 / 0.5),
        0 0 0 2px rgba(43 88 166 / 0.17), 
        0 2px 4px rgba(0 0 0 / 0.2);
}

button:active, .button:active, button.active, .button.active {
    background-position: 0 50%, 0 0;
    box-shadow: 
        inset 0 -1px 1px rgba(128 128 128 / 0.5),
        0 0 0 2px rgba(43 88 166 / 0.17), 
        0 -2px 4px rgba(0 0 0 / 0.5);
}

/* button {
    padding: 5px 12px;
    background-color: var(--btn-color);
    color: var(--btn-txt-color);
    border-width:3px;
    border-color: var(--btn-border-color);
    outline: none;
    border-radius:6px;
    margin: 2px;
    cursor: pointer;
} */

dialog {
    border: 2px inset var(--btn-border-color);
    border: 2px inset var(--txt-color-highlight);
    box-shadow: 2px 2px 2px var(--btn-border-color);
    margin: auto;
    padding:0 15px 15px 15px;
    border-radius: 4px;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.4);
}

dialog[open] {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 5px;
    max-width: 500px;
    z-index: 100;
}

dialog hr, h2, h3, h4, p {
    grid-column: 1 / 3;
    margin: 5px 0;
}

dialog h1 {
    grid-column: 1 / 3;
    background: var(--btn-color);
    background:
        linear-gradient(180deg, rgba(0 0 0 / 0.4), rgba(255 255 255 / 0.3)),
        linear-gradient( var(--btn-color), var(--btn-color) ),
        linear-gradient(180deg, hsl(var(--btn-color-hue), 48%, 47%), hsl(var(--btn-color-hue), 51%, 36%) );
    color: var(--btn-txt-color);
    font-size: large;
    text-align: center;
    margin:0 0 10px 0;
    padding: 2px 15px;
    border-radius: 0 0 10px 10px;
}

dialog#waiting {
    background-color: var(--bg-color-header);
    min-width: 15em;
}

dialog#error button {
    grid-column: 1 / 3;
    align-self: center;
    justify-self: center;
    width: 40%;
}

dialog#error ul {
    margin-left: 2em;
}

main {
    flex: 1 1 0;
}

main > div {
    overflow: auto;
    display: flex;
    flex-direction: column;
}

main > div > h1, main > div > h3 {
    text-align: center;
    margin-top:2rem;
}

form label.error {
    grid-column: 1 / 3;
    font-style: italic;
    color: darkred;
    text-align: center;
}

footer {
    background: var(--bg-color-header);
    height:20px;
    justify-self: flex-end;
}

/* icon source: https://iconduck.com/sets/iconic-icon-set */
icon {
    font-size: 1.25rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: currentcolor;
}

icon[home] {
    mask-image: url(../img/icons/home.svg);
}

icon[edit] {
    mask-image: url(../img/icons/edit.svg);
}

icon[delete] {
    mask-image: url(../img/icons/delete.svg);
}

icon[view] {
    mask-image: url(../img/icons/view.svg);
}

icon[clipboard] {
    mask-image: url(../img/icons/clipboard.svg);
}

icon::before {
    content: 'xx';
}

table button > icon::before {
    content: 'xxxxx';
}

main > div > form > section {
    padding: 1em;
    margin: 1.5em 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
    box-shadow: .25px .25px 2.75px rgba(0 0 0 / 0.4);
    border-radius: .5em;
}

main > div > form > section > ul {
    margin: auto 1.5em;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}