@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 300;
    src: local(''), url('../fonts/barlow-v12-thin.woff2') format('woff2'), url('../fonts/barlow-v12-thin.woff') format('woff');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('../fonts/barlow-v12-regular.woff2') format('woff2'), url('../fonts/barlow-v12-regular.woff') format('woff');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    src: local(''), url('../fonts/barlow-v12-medium.woff2') format('woff2'), url('../fonts/barlow-v12-medium.woff') format('woff');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    src: local(''), url('../fonts/barlow-v12-bold.woff2') format('woff2'), url('../fonts/barlow-v12-bold.woff') format('woff');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 400;
    src: local(''), url('../fonts/barlow-condensed-v12-regular.woff2') format('woff2'), url('../fonts/barlow-condensed-v12-regular.woff') format('woff');
}

:root {
    --regular: 'Barlow';
    --condensed: 'Barlow Condensed';
    --maximum: 1600px;
}

* {
    font-family: var(--regular), sans-serif;
    /*font-weight: 300;*/
}

html {
    /*font-family: Roboto, Arial, Helvetica, -apple-system, sans-serif;*/
    font-size: 12pt;
}

input, select, textarea {
    font-size: 12pt;
}


/*@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}*/

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 60px;
}

    body > div {
        margin: auto;
        max-width: var(--maximum);
    }

h1, h2, h3, h4, h5 {
    display: flex;
    flex-direction: row;
    font-weight: bold;
    margin-top: 1.75em;
    margin-bottom: 0.75em;
}

h1 {
    font-size: 24pt;
    margin-bottom: 1.25em;
}

    h1 > p, h1 > img, h2 > p, h3 > p, h4 > p, h5 > p {
        margin: 0;
    }

    h1 > :first-child {
        margin-right: 1em;
    }

h2 {
    font-size: 18pt;
    margin-top: 2em;
    /*border-bottom: 3px solid #d57a24;*/
    border-bottom: 3px solid #ef7b10;
    /*border-bottom: 3px solid #363f75;*/
    padding-bottom: 6px;
}

h3 {
    font-size: 16pt;
    border-bottom: 2px solid #597daf;
    padding-bottom: 5px;
}

h4 {
    font-size: 14pt;
}

h5 {
    font-size: 12pt;
}

    h2 > :first-child, h3 > :first-child, h4 > :first-child, h5 > :first-child {
        margin-right: 0.5em;
    }

.condensed {
    font-family: var(--condensed), sans-serif;
    color: #2c3d78;
}

input {
    padding: 2px 4px;
}

    input[type=button], input[type=submit] {
        padding: 2px 1em;
    }

    input[type=checkbox] {
        accent-color: #2c3d78;
        position: relative;
        /* bottom: -1px; chrome */
        /* bottom: 1px; firefox */
        margin-right: 8px;
    }

    input::placeholder {
        /*font-family: var(--condensed), sans-serif;*/
        font-style: italic;
    }

textarea {
    resize: none;
    border: none;
    padding: 2px 4px;
    width: 100%;
}

.buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: clip;
    padding: 3px;
}

    .buttons.buttons-gap aeps-button:not(:last-child) {
        margin-right: 1em;
    }

aeps-button::part(label) {
    font-family: var(--condensed), sans-serif;
    font-size: 12pt;
    line-height: 22px;
    text-align: start;
}

p.progress {
    font-family: var(--condensed), sans-serif;
    font-size: 11pt;
    color: #878787;
    text-align: center;
}

p aeps-button {
    display: inline-block;
}

footer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    margin-top: 36px;
    border-top: 2px solid #2c3d78;
    /* border-top: 2px solid #597daf; */
    padding-top: 10px;
}

    footer p {
        color: #878787;
        font-size: 10pt;
        margin-left: 1.5em;
        margin-right: .5em;
        margin-top: 17px;
    }

    footer a {
        color: #878787;
        text-decoration: none;
    }

        footer a:hover {
            text-decoration: underline;
        }

nav p.user {
    font-size: 10pt;
    text-align: center;
    margin: 8px 8px 4px 8px;
}

nav p {
    margin-top: 12px;
    margin-bottom: 12px;
}

    nav p[level='1'] {
        font-size: 14pt;
    }

    nav p[level='2'] {
        margin-top: 24px;
        font-size: 12pt;
    }

    nav p[level='3'] {
        font-size: 10pt;
    }

    nav p[level='4'], nav p[level='4'] a {
        font-size: 10pt;
        color: #8e8e8e;
    }

nav a, nav p {
    color: #444;
}

    nav a:not(:hover) {
        text-decoration: none;
    }

nav button {
    color: #444;
    background: none;
    border: none;
    text-align: left;
    margin: 5px 0;
    padding: 0;
    font-size: 10pt;
}

    nav button:hover, nav button[selected] {
        text-decoration: underline;
    }

div.table {
    margin: 8px 16px;
    box-shadow: rgba(0,0,0,0.25) 0px 2px 6px 0px;
}

/*div.table {
    border: 2px solid red;
    padding: 2px;
    margin: 2px;
}
*/

div.row {
    display: flex;
}

    /* div.row.input div.cell {
        background-color: #fcfcff;
    }

    div.row.output div.cell {
        background-color: #f6f6fa;
    }*/

    div.row div.cell {
        background-color: #f8f8fa;
        background-color: #f1f4f9;
    }

        div.row div.cell.active {
            background-color: #fdfdff;
        }

        div.row div.cell.static p {
            font-family: var(--condensed);
        }

        div.row div.cell[valid=true] {
            /*background-color: #ecfcef;*/
            /*background-color: #e4fbf2;*/
            background-color: #dbeaff;
        }

        div.row div.cell[valid=false] {
            /*background-color: #fcecef;*/
            background-color: #ffebd8;
        }

    div.row.emphasized div.cell p {
        font-weight: 500;
    }


div.cell {
    flex-grow: 1;
    flex-shrink: 0;
    border-color: lightgray;
    border-style: solid;
    border-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: hidden;
}

    div.cell[cell-borders*=top] {
        border-top-width: 1px;
    }

    div.cell[cell-borders*=left] {
        border-left-width: 1px;
    }

    div.cell[cell-borders*=bottom] {
        border-bottom-width: 1px;
    }

    div.cell[cell-borders*=right] {
        border-right-width: 1px;
    }

    div.cell[cell-width='1'] {
        flex: 1 0 1px;
    }

    div.cell[cell-width='2'] {
        flex: 2 0 2px;
    }

    div.cell[cell-width='3'] {
        flex: 3 0 3px;
    }

    div.cell[cell-width='4'] {
        flex: 4 0 4px;
    }

    div.cell[cell-width='5'] {
        flex: 5 0 5px;
    }

    div.cell[cell-width='6'] {
        flex: 6 0 6px;
    }

    div.cell[cell-width='7'] {
        flex: 7 0 7px;
    }

    div.cell[cell-width='8'] {
        flex: 8 0 8px;
    }

    div.cell[cell-width='9'] {
        flex: 9 0 9px;
    }

    div.cell[cell-width='10'] {
        flex: 10 0 10px;
    }

    div.cell[cell-width='11'] {
        flex: 11 0 11px;
    }

    div.cell[cell-width='12'] {
        flex: 12 0 12px;
    }

    div.cell[cell-width='13'] {
        flex: 13 0 13px;
    }

    div.cell[cell-width='14'] {
        flex: 14 0 14px;
    }

    div.cell[cell-width='15'] {
        flex: 15 0 15px;
    }

    div.cell[cell-width='16'] {
        flex: 16 0 16px;
    }

    div.cell[cell-width='17'] {
        flex: 17 0 17px;
    }

    div.cell[cell-width='18'] {
        flex: 18 0 18px;
    }

    div.cell[cell-width='19'] {
        flex: 19 0 19px;
    }

    div.cell[cell-width='20'] {
        flex: 20 0 20px;
    }

    div.cell[cell-width='21'] {
        flex: 21 0 21px;
    }

    div.cell[cell-width='22'] {
        flex: 22 0 22px;
    }

    div.cell[cell-width='23'] {
        flex: 23 0 23px;
    }

    div.cell[cell-width='24'] {
        flex: 24 0 24px;
    }

    div.cell[cell-width='25'] {
        flex: 25 0 25px;
    }

    div.cell p, div.cell input, div.cell select {
        width: 100%;
        margin: 0;
        padding: 8px 10px;
        align-self: center;
    }

    div.cell p {
        font-variant-numeric: tabular-nums;
    }

        div.cell p.number, div.cell input.number {
            text-align: right;
        }

        div.cell p.shift, div.cell input.shift {
            text-align: center;
        }


    div.cell input, div.cell select {
        background: none;
        border: none;
        margin: 3px;
        padding: 5px 7px;
    }

    div.cell.range p {
        /*color: #799986;*/
        /*color: #81c4aa;*/
        color: #597daf;
        text-align: center;
    }

    div.cell > .buttons {
        height: 30px;
        padding: 3px 8px 3px 8px;
    }

div[paragraph-style] > p {
    text-align: justify;
}

div[paragraph-style=Emphasized] > p {
    font-style: italic;
}

div[paragraph-style=Hint] > p {
    font-size: smaller;
}

div[paragraph-style=Note], div[paragraph-style=Warning] {
    margin: 8px 16px;
    border: 1px solid lightgray;
    box-shadow: rgba(0,0,0,0.25) 0px 2px 6px 0px;
    padding: 0 1em;
}

div[paragraph-style=Note] {
    background-color: #ddebfb;
}

div[paragraph-style=Warning] {
    background-color: #ff993b;
}

    div[paragraph-style=Note] > p, div[paragraph-style=Warning] > p {
        margin: 0.75em 0;
    }

p.heading {
    margin-top: 1.25em;
    margin-bottom: 0.75em;
    font-size: 12pt;
    font-weight: bold;
}

    p.heading[level="1"] {
        font-size: 18pt;
    }

    p.heading[level="2"] {
        font-size: 16pt;
    }

    p.heading[level="3"] {
        font-size: 14pt;
    }