html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    font-family: sans-serif;
    margin: 0;
}

.navigation {
    padding: 0.8em 0.5em;
    font-size: larger;
    background-color: AliceBlue;
}

.navigation-item {
    margin: 0 0.5em;
}

footer {
    box-sizing: border-box;
    margin-top: auto; /* send footer to the bottom of the page */
    display: flex;
    justify-content: space-between;
    padding: 0.8em 1em;
    font-size: smaller;
    color: gray;
    background-color: AliceBlue;
}

footer a {
    color: gray;
}

div.content {
    margin: 1em;
}

li + li {
    margin-top: 0.2em;
}

table {
    border-collapse: collapse;
}

table.rating-table {
    table-layout: fixed;
    width: 100%;
}

th, td {
    border: solid darkgray thin;
}

th {
    background-color: cornsilk;
    padding: 0.8em 0.6em;
}

td {
    padding: 0.2em 0.4em;
}

td.rating {
    position: relative;
    text-align: center;
    height: 3.2em;
}

td.rating.strong {
    background-color: #b6d7a8;
}

td.rating.neutral {
    background-color: #f3f3f3;
}

td.rating.weak {
    background-color: #ffe599;
}

td.rating.failed {
    background-color: #dd7e6b;
}

td.rating.null {
}

td.rating.final {
    font-size: larger;
}

.invisible {
    opacity: 0;
}

.floating-centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.narrative,
.explanation {
    color: DimGray;
}

.narrative {
    font-style: italic;
}

.hint {
    color: gray;
}

.info-zone {
    padding: 1rem 2rem;
    background-color: WhiteSmoke;
    border-radius: 0.8em;
}

.ok-zone {
    padding: 1rem 2rem;
    background-color: #e8f4e8;
    border-radius: 0.8em;
}

.danger-zone {
    padding: 1.5rem 2rem;
    background-color: #fff5f5;
    border-radius: 0.8em;
}


/* Buttons, links & icons */

.info-icon {
    cursor: default;
    font-size: larger;
}

.link-icon {
    cursor: pointer;
    font-size: larger;
    text-decoration: none;
    transition: opacity 0.25s ease-in-out;
}

.evaluation-icon-container {
    margin: 0.6em;
}

.evaluation-icon {
    margin: 0.2em;
    padding: 0.2em;
    border: 2px solid transparent;
    border-radius: 0.4em;
}

.evaluation-icon.active {
    border-color: blue;
}

a {
    color: mediumblue;
}

.edit-link {
    color: LightGray;
    text-decoration: none;
    transition: color 0.25s ease-in-out;
}

.edit-link:hover {
    color: Gray;
}

button {
    display: inline-block;
    padding: 0.7em 1.4em;
    text-decoration: none;
    border-radius: 0.4em;
    color: black;
    background-color: AliceBlue;
    cursor: pointer;
}

button:hover {
    background-color: Snow;
}

button.unobtrusive {
    border: none;
    padding: 0.35em 0.7em;
}

button.warning {
    background-color:  #f8e8e8;
}

button.warning:hover {
    background-color:  LavenderBlush;
}

button.danger {
    font-weight: bold;
    color: white;
    background-color: FireBrick;
}

button.danger:hover {
    background-color: Coral;
}


/* Text input */

input {
    outline: none;
    border: 0.1em solid gray;
    padding: 0.2em 0.4em;
    font: inherit;
    transition: border 0.25s ease-in-out;
}

input:focus {
    border: 0.1em solid mediumblue;
}

input.unobtrusive {
    border: 0.1em solid transparent;
}

input.unobtrusive:hover {
    border-bottom: 0.1em solid gray;
}

input.unobtrusive:focus {
    border-bottom: 0.1em solid mediumblue;
}

input:disabled {
    border: 0.1em solid transparent;
    color: gray;
}

input.full-length {
    width: 100%;
    box-sizing: border-box;
}

.multiline-input {
    font-family: sans-serif;
    font-size: inherit;
}


/* Layout containers */

.side-by-side-center, .side-by-side-center-justified {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
}

.side-by-side-center-justified {
    justify-content: space-between;
}

.side-by-side-baseline, .side-by-side-baseline-justified {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 1em;
}

.side-by-side-baseline-justified {
    justify-content: space-between;
}