body { width: 80%; margin: auto; }

h1 { font-family: "Open Sans", sans-serif; font-size: 48px; text-align: center; }
a { color: #007bff; background-color: transparent; }
a:link, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }

#headerOuter { margin-top: 48px; margin-bottom: 48px; width: 100%; display: flex; justify-content: center; }
#headerInner { display: flex; }
#logo-globe { height: 128px; margin-right: 64px; }

#filterBar { margin: auto; display: flex; }
.searchOuter { width: 55%; padding-left: 2px; padding-right: 12px; }
.searchInner { font-size: 24px; width: 100%; }
.selectOuter { padding-left: 2px; padding-right: 2px; }
.selectInner { font-size: 24px; width: 100%; }

.selectInner option::before {
    content: "\2610";
    width: 1.3em;
    text-align: center;
    display: inline-block;
}
.selectInner option:checked::before {
  content: "\2611";
}

.zebra { filter: brightness(98%); }

#cards { margin: auto; }
.card {
    height: 64px; margin-top: 5px; margin-bottom: 5px;
    display: none; flex-direction: row; background-color: #efe;
    font-family: "Open Sans", sans-serif; font-size: 18px !important;
}
.card.opened { height: 160px; margin-top: 5px; margin-bottom: 5px; }
.card.rank-f { background-color: #fee; }

.wrapper-logo-links { display: flex; width: 50%; margin-top: auto; margin-bottom: auto; }
.wrapper-links { margin-top: auto; margin-bottom: auto; }
.wrapper-icons { width: 45%; margin-top: auto; margin-bottom: auto; }

.name { margin-top: auto; margin-bottom: auto; }
.url { display: none; }
.opened .url { display: inline !important; }

.keywords { display: none; }
.opened .keywords { display: block; font-style: italic; margin-top: 10px; }

.doc { display: none; }
.opened .doc { display: block; margin-top: 10px; }

.methods { display: flex; }
.tfa-icon { color: #2c662d; font-size: 24px; padding-right: 10px; }

.regions { display: none; margin-top: 10px; }
.opened .regions { display: block; }
.flag-icon { margin-right: 5px; margin-bottom:5px; }

.rank {
    margin-left: auto; margin-right:16px; margin-top: auto; margin-bottom: auto;
    border: 3px solid black; border-radius: 5px; padding: 3px; background-color: white;
}

img.logo { height: 32px; width: 32px; margin: 16px; }
.opened img.logo { height: 128px; width: 128px; }

img:not([src]):not([srcset]) {
    visibility: hidden;
}

#info { margin: auto; margin-top: 16px; font-size: 24px; }
#no-match { margin: auto; margin-top: 16px; display: none; font-size: 24px; font-style: italic; }