/**
 *
 * Global CSS
 *
 */

:root {
    --base-font-size: 18px;
    --mobile-base-font-size: 16px;

    --base-border-size: 1px;
    --base-border-color: #ccc;
    --base-border-radius: 0.2rem;

    --base-padding: 1.6rem;

    --table-cell-padding: 0.2rem;
    --table-cell-padding-horizontal: 0.4rem;
    --table-cell-padding-vertical: 0.2rem;

    --data-table-cell-padding-horizontal: 0.8rem;
    --data-table-cell-padding-vertical: 0.6rem;
    --data-table-font-size: 0.9rem;
    --data-table-label-font-size: 0.75rem;

    --form-label-font-size: 0.75rem;
    --form-input-border-size: 1px;
    --form-input-border-color: #ccc;
    --form-input-margin: 0.2rem;
}

html, * {
    font-family: Frutiger, ‘Frutiger Linotype’, Univers, Calibri, ‘Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, Myriad, ‘DejaVu Sans Condensed’, ‘Liberation Sans’, ‘Nimbus Sans L’, Tahoma, Geneva, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
    font-size: var(--base-font-size);
    box-sizing: border-box;
}

body { margin: 0; padding: 0; }
header { background-color: #e2e2e2; padding: 1.5rem; }
main { padding: 1.5rem; }

@media
only screen and (max-width: 760px) {
    html, * { font-size: var(--mobile-base-font-size); }
    header { padding: 1rem; }
    main { padding: 1rem; }
}

pre {
    font-family: Consolas, ‘Andale Mono WT’, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, ‘DejaVu Sans Mono’, ‘Bitstream Vera Sans Mono’, ‘Liberation Mono’, ‘Nimbus Mono L’, Monaco, ‘Courier New’, Courier, monospace;
    font-size: 0.8rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: Frutiger, ‘Frutiger Linotype’, Univers, Calibri, ‘Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, Myriad, ‘DejaVu Sans Condensed’, ‘Liberation Sans’, ‘Nimbus Sans L’, Tahoma, Geneva, ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
}

h1, h2, h3 { line-height: 1.6rem; font-weight: normal; margin: 1.2rem 0; padding: 0; }
h4, h5, h6 { line-height: 1.6rem; font-weight: normal; margin: 1.2rem 0; padding: 0; }

h1 { font-size: 1.6rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1.1rem; }

fieldset {
    border: var(--base-border-size) solid var(--base-border-color);
    border-radius: var(--base-border-radius);
    padding: var(--base-padding);
}

label {
    display: block;
    font-size: var(--form-label-font-size);
    font-weight: bold;
    text-transform: uppercase;
    text-align: left;
}

input, select, textarea {
    border: var(--form-input-border-size) solid var(--form-input-border-color);
    border-radius: var(--base-border-radius);
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin: var(--form-input-margin) 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}

th {
    text-align: left;
    text-transform: uppercase;

}

table td, table th { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); vertical-align: top; }
table td:first-child, table th:first-child { padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal) var(--table-cell-padding-vertical) 0; }
table td:last-child, table th:last-child { padding: var(--table-cell-padding-vertical) 0 var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal); }
table td:only-child, table th:only-child { padding: var(--table-cell-padding-vertical) 0 var(--table-cell-padding-vertical) 0; }

/**
 *
 * Utility classes
 *
 */

.fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.fullWidth {
    width: 100%;
}

.center {
    text-align: center;
}

.inlineBlock {
    display: inline-block;
}

.flexJustifyEnd {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.flexColumnSpaceBetween {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flexWrapSpaceBetween {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media
only screen and (max-width: 760px) {
    .desktop {
        display: none;
    }
}

@media
only screen and (min-width: 760px) {
    .mobile {
        display: none;
    }
}

/**
 *
 * Component classes
 *
 */

/* Menu */

/*.menu a {*/
/*    padding: 0.8rem 1.2rem;*/
/*    border: 1px solid #ccc;*/
/*    border-radius: var(--base-border-radius);*/
/*    background-color: #fff;*/
/*    text-decoration: none;*/
/*    text-transform: uppercase;*/
/*    font-size: 0.8rem;*/
/*    font-weight: bold;*/
/*    color: #000;*/
/*}*/

/* Data table */

.dataTable * { font-size: var(--data-table-font-size); }

.dataTable > thead > tr { border-bottom: 3px solid #ccc; background-color: #e2e2e2; }
.dataTable > tbody > tr:nth-child(odd) { background-color: #f2f2f2; }
.dataTable > tfoot > tr:first-child { border-top: 3px solid #ccc; }
.dataTable > tfoot > tr:last-child { border-bottom: 3px solid #ccc; }

.dataTable > tbody > tr > td,
.dataTable > thead > tr > th,
.dataTable > tfoot > tr > td
{ padding: var(--data-table-cell-padding-vertical) var(--data-table-cell-padding-horizontal); }

.dataTable > thead > tr > th { font-size: var(--data-table-label-font-size); }

.tableDataLabel {
    width: 30%;
    text-transform: uppercase;
    line-height: 1.3rem;
    font-size: var(--data-table-label-font-size);
    font-weight: bold;
    text-wrap: nowrap;
}