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; }

nav { display: flex; align-items: center; }

nav a { display:inline-block; margin-right:20px; }

nav .download { margin-right: 20px; }

nav a:last-child,

nav .download:last-child { margin-right:0; }

nav img.download {

filter: drop-shadow(0 1px 1px gray);

transition: transform ease-in-out 300ms;

}

nav img.download:hover { transform: translate(0, -2px); }

.download-links,

[data-template-id="download-links"],

[data-control="download-links"] {

display: flex;

align-items: center;

}

[data-export-csv-selector],

[data-export-excel-selector] { cursor: pointer; }

input,

select,

button {

padding: 8px 16px;

margin: 20px;

width: 100%;

max-width: calc(100vw - 80px);

}

.alternate-names input,

form input,

form select,

form button {

max-width: calc(100% - 120px);

}

@media (min-width: 500px) {

input,

select,

button,

.alternate-names input,

form input,

form select,

form button {

max-width: 300px;

}

}

.react-select input { margin:0; padding:0; }

.react-select {

text-align: left;

max-width: 340px;

margin: 20px auto;

width: 100%;

}

#view,

#root,

.flex-col {

text-align: center;

display: flex;

flex-direction: column;

}

h2, nav, table, form, input, select, button, section, .section, .responsive-table {

flex: 1 0 auto;

align-self: center;

}

table { align-self: start; }

@media screen and (min-width:900px) {

table,

.responsive-table { align-self: center; }

}

input[data-filter-selector],

input[filter-selector],

input[is='input-filter'] {

box-shadow: 0 1px 2px rgba(0,0,0,.5);

border-radius: 2em;

border: none;

outline: 0;

padding: 16px 24px;

/* For Safari on iOS */

-webkit-appearance: none;

}

h1, nav, table, section, form, .responsive-table {

background-color: white;

box-shadow: 0 1px 2px rgba(0,0,0,.5);

padding: 20px;

margin: 20px;

border-radius: 8px;

}

h1, table, section, form, .responsive-table {

display: inline-block;

}

form {

display: flex;

flex-direction: column;

padding: 10px;

margin: 20px 0;

}

form.search {

width: 90%;

max-width: 500px;

}

@media (min-width: 500px) {

form {

padding: 20px;

margin: 20px;

}

}

/*

Originally the the following is used in HTML:

<div class="responsive-table"><table>...

Now `position: sticky` is being used for headers and first column.

When sticky position is used it will not work if "responsive-table" if used

because because of the overflow being defined. The "responsive-table" code is

being kept for reference in case this CSS is copied and used as a starting point

for one of your apps and you prefer responsive tables.

[responsive-table] provides a nice visual layout because it allows the

table to fully fit with-in the page. The user can easily swipe to view

the table on mobile using [responsive-table], however the header and

first column do not stay fixed so the new `position: sticky` can provide

a better user experience (UX) while using a standard <table> element.

*/

.responsive-table {

overflow-x: auto;

max-width: calc(100vw - 40px);

padding: 0;

}

.responsive-table table {

box-shadow: none;

padding: 0;

}

nav { padding: 20px 40px; }

h1 {

border-radius: 2em;

margin: 20px auto;

padding: 20px 30px;

}

@media (min-width: 450px) {

h1 { padding: 20px 80px; }

}

table {

text-align: left;

border-collapse: collapse;

white-space: nowrap;

}

th, td {

padding: 8px 16px;

border: 1px solid #dfe2e5;

}

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; }

/* Table Sticky Header and First Column */

table { position: relative; margin:20px 0; }

th { position: sticky; top:-1px; background-color: hsla(210, 29%, 93%, 1); 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: white; }

table tbody tr:nth-child(even) td:first-child { background-color: #f6f8fa; }

table tbody tr.row-odd td:first-child { background-color: white; }

table tbody tr.row-even td:first-child { background-color: #f6f8fa; }

table tbody tr.highlight td:first-child {background-color: yellow; }

/*

In Firefox 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; }

}

.align-right { text-align:right; }

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

.ml-20 { margin-left: 20px; }

.place-screen {

display: flex;

flex-wrap: wrap;

align-items: flex-start;

justify-content: center;

}

.place-screen section {

flex: 0 0 auto;

align-self: flex-start;

min-width: 250px;

}

.form-fields {

text-align:left;

white-space:nowrap;

padding:10px 20px;

}

.form-fields div {

margin:10px auto;

display: flex;

flex-direction: column;

}

.form-fields label {

color:gray;

width: 100%;

display:block;

margin: 8px auto 4px auto;

}

.form-fields label.no-top-margin { margin-top: 0; }

.form-fields span { font-weight:bold; }

.form-fields i.flag:not(.icon) { margin-top:10px; }

@media screen and (min-width:600px) {

.form-fields div { display:block; }

.form-fields label {

width: 240px;

margin: auto;

display: inline-block;

}

.form-fields i.flag:not(.icon) { margin-top:5px; margin-left:10px; }

}

html[lang='ar'] table i.flag:not(.icon) { margin:0 0 0 .5em; }

div[data-leaflet],

.leaflet-map,

[is="leaflet-map"] { width:300px; height:300px; }

@media (min-width: 500px) {

div[data-leaflet],

.leaflet-map,

[is="leaflet-map"] { width:400px; height:400px; }

}

.map-links {

display: flex;

justify-content: space-between;

margin-top: 10px;

}

.alternate-names { padding:10px; margin:20px 0; }

.alternate-names ul { list-style-type:none; max-width:800px; min-width:100%; padding-left: 0; }

.alternate-names li { border:1px solid #dfe2e5; margin:8px; padding:4px 8px; display: inline-block; }

ul.info {

text-align: left;

max-width: 800px;

padding: 0 30px;

margin-bottom: 40px;

}

html[lang='ar'] ul.info { text-align:right; }

ul.info li { line-height: 1.4em; margin-bottom:10px; }

h2.source-code {

display: flex;

justify-content: center;

align-items: center;

}

h2.source-code img { margin-left:16px; }

h2.source-code,

h2.links {

border-top: 2px solid black;

padding-top: 16px;

}

.pointer { cursor: pointer; }

/* Adjust for jQuery Chosen box-sizing */

select.chosen-select,

input.chosen-search-input { max-width:340px; }

/* Show the loading screen only if it appears for longer than half a second */

.loading {

margin: 40px;

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; }

}

/*

Loading/Progress Control

https://loading.io/css/

CC) "Public Domain" License

*/

.lds-roller {

display: inline-block;

position: relative;

width: 80px;

height: 80px;

}

.lds-roller div {

animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;

transform-origin: 40px 40px;

}

.lds-roller div:after {

content: " ";

display: block;

position: absolute;

width: 7px;

height: 7px;

border-radius: 50%;

background: navy;

margin: -4px 0 0 -4px;

}

.lds-roller div:nth-child(1) {

animation-delay: -0.036s;

}

.lds-roller div:nth-child(1):after {

top: 63px;

left: 63px;

}

.lds-roller div:nth-child(2) {

animation-delay: -0.072s;

}

.lds-roller div:nth-child(2):after {

top: 68px;

left: 56px;

}

.lds-roller div:nth-child(3) {

animation-delay: -0.108s;

}

.lds-roller div:nth-child(3):after {

top: 71px;

left: 48px;

}

.lds-roller div:nth-child(4) {

animation-delay: -0.144s;

}

.lds-roller div:nth-child(4):after {

top: 72px;

left: 40px;

}

.lds-roller div:nth-child(5) {

animation-delay: -0.18s;

}

.lds-roller div:nth-child(5):after {

top: 71px;

left: 32px;

}

.lds-roller div:nth-child(6) {

animation-delay: -0.216s;

}

.lds-roller div:nth-child(6):after {

top: 68px;

left: 24px;

}

.lds-roller div:nth-child(7) {

animation-delay: -0.252s;

}

.lds-roller div:nth-child(7):after {

top: 63px;

left: 17px;

}

.lds-roller div:nth-child(8) {

animation-delay: -0.288s;

}

.lds-roller div:nth-child(8):after {

top: 56px;

left: 12px;

}

@keyframes lds-roller {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}