body {
    font-family: 'Roboto', Arial, sans-serif;
}

input, select, textarea, button {
    font-family: inherit;
}

a, a:hover, a:visited {
    color: inherit;
    text-decoration: none;
}

.clearfix:after {
    content: ' ';
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

@keyframes messages {
    /*0% { top: 0%; }
    100% { top: 50%; }*/
    0% { transform: translate(-50%, -60vh); opacity: 0; }
    100% { transform: translate(-50%, 0); opacity: 0.9; }
}
.messages-container {
    position: fixed;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);

    animation-name: messages;
    animation-duration: 0.75s;
}
.messages {
    width: 100%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    border: 1px solid #6f6f6f;
    border-radius: 2px;
    padding: 0.2em;
    background: #f7f7f7;
}

.messages li {
    padding: 0.25em 0.25em;
    border-radius: 2px;
}

.message-info {
    background-color: #abc3f9;
}

.message-ok {
    background-color: #90e49e;
}

.message-error {
    background-color: #f99898;
}


.page-container {
    display: grid;
    grid-template-columns: 10em auto;
    grid-template-rows: 3em auto;
    grid-template-areas:
    "logo header"
    "nav content";
    
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.page-logo {
    grid-area: logo;

    background-color: #123969;
    text-align: center;
}
.logo {
    width: 8em;
    height: 3em;
    background: url('/static/logo.png') no-repeat center / contain;
    margin: 0 auto;
}

.page-header {
    grid-area: header;
    background-color: #123969;
    height: 3em;
    display: flex;
    justify-content: space-between;
}
.page-header .user {
    color: #ffffff;
    line-height: 3em;
    margin-right: 1.5em;
}

.nav-link {
    font-weight: 500;
    color: #d29857;
}
.nav-link:hover {
    color: #ffffff;
}
.page-menu {
    grid-area: nav;
    background-color: #123969;
    /*padding-top: 1em;
    padding-left: 1em;*/
}
a.page-menu-item {
    display: block;
    width: 100%;
    height: 2em;
    line-height: 2em;
    color: #d29857;
    font-weight: 500;
    margin-left: 1em;
}
.page-menu-item:hover {
    color: #ffffff;
    /* font-weight: bold; */
}
.page-menu-item.inactive {
    color: #c4c4c4;
    cursor: default;
}

.page-content {
    grid-area: content;
    overflow: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;

    background-color: #f9f0e7;
}

section {
    width: 100%;
    height: 100%;
    margin: 1em;
}

.login-form {
    border: 1px solid #123969;
    border-radius: 2px;
    padding: 1em;

    width: 16em;
    height: 10em;
}
.login-form h1 {
    margin-top: 0;
    text-align: center;
}
.login-form .password-change {
    background: none !important;
    border: none;
    padding: 0 !important;
    cursor: pointer;
    color: #15427a;
    font-size: 0.9em;
}

.file-upload-container table td {
    padding: 0.5em 0;
}
.file-upload-container input[type="file"] {
    border: 2px dashed #aaaaaa;
    border-radius: 4px;
    padding: 0.5em;
}

.hidden {
    display: none;
}

.content-container {
    padding-left: 1em;
    padding-top: 1em;
    background-color: #fdfdfd;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

table.data td, table.data th {
    padding: 0.5em 1em 0.5em 0.5em;
}
table.data th {
    border-bottom: 2px solid #ddd;
    vertical-align: bottom;
}

table.log td, table.log th {
    padding: 0.5em 1em 0.5em 0.5em;
    background-color: #f6f6f6;
}
table.log th {
    border-bottom: 2px solid #ddd;
    vertical-align: bottom;
    background-color: #f0f0f0;
}


[title],
[title] {
    cursor: help;
    text-decoration: underline dotted;
    text-decoration-color: #888888;
    text-decoration-thickness: 1px;
}

table.data td {
    border-bottom: 1px solid #ddd;
}

table.data tr:nth-of-type(even) {
    background-color: #f6f6f6;
 /* grey row */
}

table.data tbody tr:hover {
    background-color: #f0f0f0;
}

table.data tfoot td {
    border-top: 2px solid #ddd;
    font-weight: bold;
    vertical-align: bottom;
}

table.data tfoot tr.pal-sums td {
    font-weight: normal;
}

.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}
.align-center {
    text-align: center;
}

table td {
    vertical-align: top;
}
table.form td {
    padding: 0.25em 0.5em;
}
table.form tr td:first-child {
    padding-left: 0;
    text-align: right;
}
table.form tr td:last-child {
    padding-right: 0;
}

table.form .short {
    width: 2em;
}
table.form textarea {
    width: 100%;
}
input.full {
    width: 100%;
}

a.button,
.button {
    display: inline-block;
    padding: 0.5em;
    text-align: center;
    cursor: pointer;
}
a.button.small,
.button.small {
    padding: 0.15em 0.25em;
}
a.button:hover,
.button:hover {
    opacity: 0.9;
}

a.button.red,
.button.red {
    background-color: #d9534f;
    color: #fff;
    border: none;
}
.material-icons.red {
    color: #d9534f;
}

a.button.green,
.button.green {
    background-color: #5cb85c;
    color: #fff;
    border: none;
}
.material-icons.green {
    color: #5cb85c;
}

a.button.blue,
.button.blue {
    background-color: #0366d6;
    color: #fff;
    border: none;
}
.material-icons.blue {
    color: #0366d6;
}

a.button.blue-light,
.button.blue-light {
    background-color: #448bda;
    color: #fff;
    border: none;
}
.material-icons.blue-light {
    color: #448bda;
}

a.button.yellow,
.button.yellow {
    background-color: #fec61f;
    color: #fff;
    border: none;
}
.material-icons.yellow {
    color: #fec61f;
}

input[readonly],
textarea[readonly] {
    border: 1.5px solid #aaaaaa;
    background-color: #fafafa;
}

ul.file-list,
ul.packages-list {
    padding-left: 1em;
    margin: 0 auto;
}

textarea.remarks {
    max-width: 20em;
}

table.form tr td:first-child {
    font-weight: 500;
}

table.data tr td:first-child a {
    font-weight: 900;
}

h2 {
    margin-left: 1rem;
}

.alert {
    background-color: #ffc0cb;
}