/*
    Based on example from:
    https://www.dataformsjs.com/examples/countries-no-spa-react.htm

    Original License: MIT
    Re-published here with CC0 "Public Domain" license.
    If you re-use this code attribution is appreciated.
*/

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
body {
    background-color: #f4f6f8;
}
a { color:navy; }
input,
select,
button {
    padding: 8px 16px;
    margin: 20px;
    width: 100%;
    max-width: 300px;
}
#view,
#root {
    text-align: center;
    display: flex;
    flex-direction: column;
}

h2, nav, table, form, input, select, button, section, .section {
    flex: 1 0 auto;
    align-self: center;
}
table { align-self: start; }
@media screen and (min-width:900px) {
    table { align-self: center; }
}

input[filter-selector] {
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    border-radius: 2em;
    border: none;
    outline: 0;
    padding: 16px 24px;
}
h1, nav, table, section, form {
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
    padding: 20px;
    margin: 20px;
    display: inline-block;
    border-radius: 8px;
}
h1 {
    border-radius: 2em;
    margin: 20px auto;
    padding: 20px 80px;
}
table {
    text-align: left;
    border-collapse: collapse;
    white-space: nowrap;
}
thead {
    background-color: hsla(210, 29%, 93%, 1);
}
th, td {
    padding: 8px 16px;
    border: 1px solid #dfe2e5;
}
.align-right { text-align:right; }

.error { padding:1em; background-color:red; color:white; }

table tbody tr:nth-child(odd) { background-color: white; }
table tbody tr:nth-child(even) { background-color: #f6f8fa; }
table tbody tr.row-odd { background-color: white; }
table tbody tr.row-even { background-color: #f6f8fa; }
table tbody tr.highlight { background-color: yellow; }

.pointer { cursor: pointer; }