*, *::before, *::after {
  box-sizing: border-box;
}
a { text-decoration: none; }
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 1em;
    background-color: #eee;
    margin: 0;
}
body > header {
    background-color: #002664;
    color: white;
    padding: 1em;
    margin: 0;
}
body > header > img { height: 40px; }
body > header a { color: white; }
body > header > div {
    display: flex;
    flex-grow: 1;
    gap: 1em;
}
body > header > div > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
body > header > div > div > h1 { margin-top: 0; }
body > header > nav {
    display: flex;
    gap: 1em;
    justify-content: flex-end;
}
body > header > nav a { text-wrap: nowrap; }
body > header > div > div > h1 { margin: 0; }
body > header > div > div > h2 { margin: 0; }
body > header > div > img { height: 120px; }

@media (width < 480px) {
    body > header > div > div >  h1 { font-size: 1.25rem; }
    body > header > div > div >  h2 { font-size: 1.125rem; }
    body > header > div > img { height: 60px; }
}


main { margin: 1em; }

p { margin: 0 0 1em 0; }
.links {
    list-style: none;
    padding-left: 0;
}
input[type="submit"].btn, a.btn, button.btn {
    text-decoration: none;
    border: 1px solid #002664;
    background-color: #002664;
    padding: .75em;
    color: white;
    border-radius: 6px;
    font-weight: bold;
    display: inline-block;
}
input[type="submit"].btn:hover, a.btn:hover, button.btn:hover { 
    background-color: #ed2939;
}
.align-center { text-align: center; }
.align-right { text-align: right; }
.col2 {
    display: flex;
    gap: 1em;
}
.col2 > div {
    border: 1px solid #ccc;
    border-radius: 1em;
    padding: 1em;
}

.messagelist { list-style: none; padding-left: 0; }
.messagelist li { padding: 4px; color: white; }
.messagelist .success { background-color: darkseagreen; }
.messagelist .error { background-color: darkred; }

body > footer { background-color: #aaa; }
body > footer > div { 
    display: flex;
    padding: 2em;
    gap: .5em;
    justify-content: center;
    cursor: default;
}

.kvps {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    justify-content: space-evenly;
}
.kvp { display: inline-flex; margin-right: 1em; }
.kvp > strong, .kvp > span {
    border: 1px solid #4258ff;
    padding: 2px 8px;
}
.kvp strong {
    background-color: #4258ff;
    color: white;
    border-radius: 12px 0 0 12px ;
    text-wrap: nowrap;
}
.kvp span {
    border-radius: 0 12px 12px 0;
}

.flag-nor {
    width: 110px;
    height: 80px;
    background-color: #ed2939;
    background-image:
        linear-gradient(
            180deg,
            transparent,
            transparent 35px,
            #002664 35px,
            #002664 45px,
            transparent 45px,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            transparent,
            transparent 30px,
            #002664 30px,
            #002664 40px,
            transparent 40px,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            transparent,
            transparent 30px,
            #FFF 30px,
            #FFF 50px,
            transparent 50px,
            transparent 100%
        ),
        linear-gradient(
            90deg,
            transparent,
            transparent 25px,
            #FFF 25px,
            #FFF 45px,
            transparent 45px,
            transparent 100%
        );
}
.errorlist li, .haserrors {
    font-weight: bold;
    color: darkred;
    border: 1px solid darkred;
    border-radius: .5em;
    padding: .5em;
    background-color: #fdecee;
}
.errorlist, .messagelist {
    padding-left: 0;
    list-style-type: none;
}
.messagelist li {
    font-weight: bold;
    border-radius: .5em;
    padding: .5em;
}
.messagelist li.success {
    color: darkgreen;
    border: 1px solid darkgreen;
    background-color: #f1faf3;
}

input::placeholder, textarea::placeholder {
    font-style: italic;
    color: #8080a8;
}