:root {
    --primary-border-color: #17174d;
    --primary-color: #252579;
    --primary-hover-color: #17174d;
    --primary-contrast-color: white;
    --primary-shadow-color: white;
    --primary-subtle-color: #3f3f9b;

    --component-shadow-color: black;

    --secondary-border-color: #777;
    --secondary-color: #444;
    --secondary-hover-color: #777;
    --secondary-contrast-color: white;
    --secondary-shadow-color: white;
    --secondary-subtle-color: #777;

    --disabled-border-color: #777;
    --disabled-color: #444;
    --disabled-hover-color: #777;
    --disabled-contrast-color: white;
    --disabled-shadow-color: white;
    --disabled-subtle-color: #777;

    --callout-border-color: #039be5;
    --callout-color: #0da9f4;
    --callout-hover-color: #039be5;
    --callout-contrast-color: black;
    --callout-shadow-color: black;
    --callout-subtle-color: #039be5;

    --warning-border-color: #fdd835;
    --warning-color: #ffeb3b;
    --warning-hover-color: #fdd835;
    --warning-contrast-color: black;
    --warning-shadow-color: black;
    --warning-subtle-color: #fdd835;

    --danger-border-color: #b71c1c;
    --danger-color: #e57373;
    --danger-hover-color: #b71c1c;
    --danger-contrast-color: black;
    --danger-shadow-color: black;
    --danger-subtle-color: #b71c1c;

    --success-border-color: #2e7d32;
    --success-color: #66bb6a;
    --success-hover-color: #2e7d32;
    --success-contrast-color: black;
    --success-shadow-color: black;
    --success-subtle-color: #2e7d32;

    --info-border-color: #616161;
    --info-color: #bdbdbd;
    --info-hover-color: #616161;
    --info-contrast-color: black;
    --info-shadow-color: #616161;
    --info-subtle-color: #616161;
}


html,
body {
    min-height: 100vh;
}

.layout {
    min-height: 100%;
    display: grid;
    grid-template-columns: 100px 1fr 1fr 1fr 100px;
    grid-template-rows: auto 1fr auto;

    grid-template-areas:
        "header header        header        header        header"
        "...... content       content       content       ......"
        "...... footer-left   footer-center footer-right  ......"
        "...... footer-bottom footer-bottom footer-bottom ......"
    ;
}

.layout-topbar {
    grid-area: header;
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--primary-contrast-color);
}

.layout-topbar a {
    color: var(--primary-contrast-color);
    text-decoration: none;
}

.layout-content {
    grid-area: content;
    font-weight: 400;
}

.layout-footer-left {
    grid-area: footer-left;
}

.layout-footer-center {
    grid-area: footer-center;
}

.layout-footer-right {
    grid-area: footer-right;
}

.layout-footer-bottom {
    grid-area: footer-bottom;
    margin-top: 20px;
    padding: 5px;
    display: flex;
    align-items: center;
    background-color: var(--primary-color);
    color: var(--primary-contrast-color);
}

.layout-footer-bottom a {
    color: var(--primary-contrast-color);
}

.layout-footer-bottom li {
    list-style: none;
    margin: 5px 10px 5px 0;
    padding: 0;
}

.text-small {
    font-size: 12px;
}

/*****************************/
/* NAVIGATION
/*****************************/

.layout-topbar .logo {
    max-height: 100px;
    max-width: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

.layout-topbar .nav {
    margin-left: 100px;
}

ul.nav {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}

.nav.main {
    flex-grow: 1;
}

.nav li {
    display: block;
    position: relative;
    text-align: center;
}

.nav li a,
.nav li .item {
    padding: 10px 5px;
    display: block;
}

.nav li.active > .item,
.nav li.active > a {
    font-weight: 600;
}

.nav li.active li a,
.nav li.active li .item {
    padding: 10px 5px 0 5px;
}

.nav li .item {
    color: var(--primary-subtle-color);
    font-weight: 600;
}

.nav.main .subnav {
    margin: -10px 0 0 0;
    padding: 0;
    width: 100%;
    text-align: center;
}

/*****************************/
/* FORMS
/*****************************/
.field .label {
    font-size: 12px;
    font-weight: bold;
}

/*****************************/
/* MISC
/*****************************/

.highlight {
    background-color: var(--component-color);
    color: var(--component-contrast-color);
}

.markdown img {
    display: block;
    margin: 10px auto;
    left: 50%;
    max-width: 600px;
    width: 90%;
}

/*****************************/
/* Responsive
/*****************************/
@media (max-width: 1530px) {
    .layout {
        grid-template-rows: auto 1fr auto auto auto;
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "content"
            "footer-left"
            "footer-center"
            "footer-right"
            "footer-bottom"
        ;
    }

    .layout-topbar {
        display: block;
    }

    .layout-topbar .nav {
        flex-direction: column;
    }

    .layout-topbar .nav li {

    }
}

/*****************************/
/* Buttons
/*****************************/
.btn {
    box-shadow: 2px 2px 2px var(--component-shadow-color);
}

.btn:active {
    box-shadow: -2px -2px 2px var(--component-shadow-color);
}

/*****************************/
/* Print
/*****************************/
@media print {

    body {
        font-size: 12px;
    }

    .layout {
        min-height: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;

        grid-template-areas: "content";
    }

    .text-small {
        font-size: 10px;
    }

    .layout-topbar {
        display: none;
    }

    .layout-content {
        grid-area: content;
        font-weight: 400;
    }

    .layout-footer-left {
        display: none;
    }

    .layout-footer-center {
        display: none;
    }

    .layout-footer-right {
        display: none;
    }

    .layout-footer-bottom {
        display: none;
    }
}