/*
    https://www.dataformsjs.com/
    Getting Started CSS Template
    License: MIT
*/

/* Reset */
* { margin:0; padding:0; }
html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

/* CSS Variables */
:root {
    --color-main: #000;
    --color-table-header: #cfcfcf;
    --color-row-odd: #fff;
    --color-row-even: #efefef;
    --color-highlight: #ff0;
}

/* Main elements */
header { padding:20px; }
body {
    text-align:center;
    display:flex;
    flex-direction:column;
}
#view { padding:40px; }
a { color:var(--color-main); }

/* Nav */
nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
nav a { padding:10px 20px; }
nav a.active { background-color:#efefef; }

/* Elements on Data Page */
input {
    margin-top: 40px;
    padding: 0.5em 1em;
    border-radius: 2em;
    width: 100%;
    max-width: 400px;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 2px 1px rgba(0, 0, 0, 0.1);
    border: none;
    background-color: #eff;
}
.error { background-color:red; color:white; padding:1em; border:1px solid darkred; display: inline-block; }
.text-right { text-align:right; }

/* Show the loading screen only if it appears for longer than half a second */
.loading {
    background-color: lightblue;
    color:white;
    padding:1em;
    display: inline-block;
    opacity: 0;
    animation-name: show-after-delay;
    animation-delay: 0.5s;
    animation-duration: 0s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes show-after-delay {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Table */
table { border-collapse:collapse; text-align:left; margin:40px auto; }
th { background-color: var(--color-table-header); }
th, td { padding:8px 16px; border:1px solid var(--color-main); }
table tbody tr:nth-child(odd) { background-color: var(--color-row-odd); }
table tbody tr:nth-child(even) { background-color: var(--color-row-even); }

/* [sort] and [filter] plugins add classes to each row based on element
    display and sort order which override [:nth-child()] */
table tbody tr.row-odd { background-color: var(--color-row-odd); }
table tbody tr.row-even { background-color: var(--color-row-even); }

/* Color for [clickToHighlight] plugin */
table tbody tr.highlight { background-color: var(--color-highlight); }

/* Table Sticky Header and First Column */
table { position: relative; }
th { position:sticky; top:-1px; z-index:2; }
table thead tr th:first-child { z-index: 3; left: 0; }
table tbody tr td:first-child { position: sticky; left:0; z-index:1; }
table tbody tr:nth-child(odd) td:first-child { background-color: var(--color-row-odd); }
table tbody tr:nth-child(even) td:first-child { background-color: var(--color-row-even); }
table tbody tr.row-odd td:first-child { background-color: var(--color-row-odd); }
table tbody tr.row-even td:first-child { background-color: var(--color-row-even); }
table tbody tr.highlight td:first-child { background-color: var(--color-highlight); }

/*
    In Firefox (as of early 2021) the sticky cells function but do not look good so the
    sticky first column is turned off. For options to work-around this issue see:
    https://stackoverflow.com/questions/57166162/table-headers-positionsticky-and-border-issue/57170489
*/
@-moz-document url-prefix() {
    table tbody tr td:first-child { position: initial; }
}