:root {
    --background-color: white;
    --text-color: black;
    --link-color: dodgerblue;
    --line-color: black;
    --line-adopted-color: dodgerblue;
    --individual-highlight-color: orangered;
    --input-background-color: whitesmoke;
    --input-highlight-color: #333;
    --input-border-color: silver;
    --input-button-background-color: #666;
    --input-button-foreground-color: white;
    --results-background-color: whitesmoke;
    --results-item-background-color: #e8e8e8;
    --results-item-highlight-color: whitesmoke;
    --results-item-details-background-color: whitesmoke;
    --results-item-details-highlight-color: white;
    --results-item-text-color: black;
    --monochrome-label-background-color: whitesmoke;
    --monochrome-label-border-color: grey;
    --monochrome-label-text-color: black;
    --collapse-button: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' fill='none' stroke='grey' stroke-width='2px' viewBox='0 0 40 40'><path d='M10 25L20 15L30 25'/></svg>");
    --expand-button: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' fill='none' stroke='grey' stroke-width='2px' viewBox='0 0 40 40'><path d='M10 15L20 25L30 15'/></svg>");
    --father-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12px' height='15px' viewBox='-6 -10 12 15'><circle cx='0' cy='0' r='3' fill='none' stroke='black' /><g transform='rotate(45)'><path d='M0 -3v-4M-2 -5L0 -7L2 -5' fill='none' stroke='black' stroke-linecap='round'/></g></svg>");
    --mother-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12px' height='15px' viewBox='-6 -8 12 15'><circle cx='0' cy='0' r='3' fill='none' stroke='black' /><path d='M0 4v3M-2 5h4' fill='none' stroke='black' stroke-linecap='round'/></svg>");
    --mate-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12px' height='15px' viewBox='-6 -9 12 15'><g transform='rotate(-45)'><path d='M-1.1 0A2.2 2.2 0 0 1 1.1 -2.2L3.6 -2.2A2.2 2.2 0 0 1 3.6 2.2L2.8 2.2' fill='none' stroke='black' stroke-linecap='round'/><path d='M1.1 0A2.2 2.2 0 0 1 -1.1 2.2L-3.6 2.2A2.2 2.2 0 0 1 -3.6 -2.2L-2.8 -2.2' fill='none' stroke='black' stroke-linecap='round'/></g></svg>");
    --search-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'><circle cx='10' cy='10' r='6' stroke='white' fill='none' stroke-width='3'/><path d='M14.24 14.24l5 5' stroke='white' stroke-width='3'/></svg>");
    --clear-search-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'><path d='M4 4L20 20M4 20L20 4' stroke='white' fill='none' stroke-width='3'/></svg>");
    --dropdown-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='-12 -12 24 24'><path d='M-8-8h16L0 8z' fill='white' stroke='none' /></svg>");
    --theme-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 40 40'><path d='M12,4a16,16 0 0,0 24,18a16,16 0 1,1-24-18' fill='white'/></svg>");
    --scrollbar-track-background-color: #e0e0e0;
    --scrollbar-thumb-background-color: grey;
}

[data-theme="dark"] {
    --background-color: #2b2b2b;
    --text-color: silver;
    --link-color: dodgerblue;
    --line-color: silver;
    --line-adopted-color: dodgerblue;
    --individual-highlight-color: orangered;
    --input-background-color: #333;
    --input-highlight-color: silver;
    --input-border-color: #444;
    --input-button-background-color: #666;
    --input-button-foreground-color: white;
    --results-background-color: #2f2f2f;
    --results-item-background-color: #333;
    --results-item-highlight-color: #383838;
    --results-item-details-background-color: #444;
    --results-item-details-highlight-color: #555;
    --results-item-text-color: silver;
    --monochrome-label-background-color: #333;
    --monochrome-label-border-color: #444;
    --monochrome-label-text-color: silver;
    --collapse-button: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' fill='none' stroke='grey' stroke-width='2px' viewBox='0 0 40 40'><path d='M10 25L20 15L30 25'/></svg>");
    --expand-button: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='40px' height='40px' fill='none' stroke='grey' stroke-width='2px' viewBox='0 0 40 40'><path d='M10 15L20 25L30 15'/></svg>");
    --father-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12px' height='15px' viewBox='-6 -10 12 15'><circle cx='0' cy='0' r='3' fill='none' stroke='silver' /><g transform='rotate(45)'><path d='M0 -3v-4M-2 -5L0 -7L2 -5' fill='none' stroke='silver' stroke-linecap='round'/></g></svg>");
    --mother-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12px' height='15px' viewBox='-6 -8 12 15'><circle cx='0' cy='0' r='3' fill='none' stroke='silver' /><path d='M0 4v3M-2 5h4' fill='none' stroke='silver' stroke-linecap='round'/></svg>");
    --mate-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12px' height='15px' viewBox='-6 -9 12 15'><g transform='rotate(-45)'><path d='M-1.1 0A2.2 2.2 0 0 1 1.1 -2.2L3.6 -2.2A2.2 2.2 0 0 1 3.6 2.2L2.8 2.2' fill='none' stroke='silver' stroke-linecap='round'/><path d='M1.1 0A2.2 2.2 0 0 1 -1.1 2.2L-3.6 2.2A2.2 2.2 0 0 1 -3.6 -2.2L-2.8 -2.2' fill='none' stroke='silver' stroke-linecap='round'/></g></svg>");
    --theme-symbol: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='-12 -12 24 24'><circle cx='0' cy='0' r='5' fill='white' stroke='none' /><path d='M-11 0h2M11 0h-2M0 -11v2M0 11v-2' stroke='white' stroke-width='2' stroke-linecap='round'/><g transform='rotate(45)'><path d='M-11 0h2M11 0h-2M0 -11v2M0 11v-2' stroke='white' stroke-width='2' stroke-linecap='round'/></g></svg>");
    --scrollbar-track-background-color: grey;
    --scrollbar-thumb-background-color: silver;
}

@font-face {
    font-family: "Open Sans";
    font-display: fallback;
    font-style: normal;
    font-weight: normal;
    src: url("res/OpenSans-Regular-webfont.woff") format("woff");
}

body {
    font-family: "Open Sans";
    font-size: 10px;
    margin: 0;
    line-height: 0;
}

svg {
    text-anchor: middle;
    stroke-linejoin: round;
    stroke-linecap: round;
}

text {
    fill: var(--text-color);
}

path.family-line,
path.pedigree-link,
path.family-line-possibly-more-children,
path.family-line-to-be-completed {
    fill: none;
    stroke: var(--line-color);
    stroke-width: 3px;
}

path.family-line-no-more-children {
    fill: var(--line-color);
    stroke: none;
}

text.individual-label-hyperlink {
    fill: var(--link-color);
    text-decoration: underline;
    cursor: pointer;
}

text.individual-age {
    font-size: 9px;
}

rect.individual-age,
rect.individual-label,
rect.family-label {
    fill: var(--background-color);
    stroke: none;
}

rect.individual-active-area {
    fill: transparent;
    stroke: none;
    cursor: default;
}

.individual-symbol {
    fill: var(--background-color);
    stroke: var(--line-color);
    stroke-width: 3px;
}

.individual-symbol-background {
    fill: var(--background-color);
}

text.individual-symbol {
    fill: var(--text-color);
    stroke: none;
}

path.individual-deceased {
    fill: none;
    stroke: var(--line-color);
    stroke-width: 1px;
}

path.pedigree-link.parent,
path.pedigree-link.biological {
    fill: none;
    stroke: var(--line-color);
    stroke-width: 3px;
}

path.pedigree-link.adopted {
    fill: none;
    stroke: var(--line-adopted-color);
    stroke-width: 3px;
}

.monochrome-label {
    fill: var(--monochrome-label-background-color);
    stroke: var(--monochrome-label-border-color);
}

.highlighted,
path.highlighted {
    stroke: none;
}

.unhighlighted,
path.unhighlighted {
    stroke: silver;
}

#container {
    background-color: var(--background-color);
    line-height: normal;
}

#content {
    width: 100vw;
    height: 100vh;
}

#content svg {
    width: inherit;
    min-width: inherit;
    max-width: inherit;
    height: inherit;
    min-height: inherit;
    max-height: inherit;
    cursor: grab;
}

.handle {
    fill: var(--individual-highlight-color);
}

#search {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
}

#search input[type=search] {
    padding: 10px;
    font-family: "Open Sans";
    font-size: 16px;
    border: 1px solid var(--input-border-color);
    border-radius: 0;
    background: var(--input-background-color);
    color: var(--text-color);
    width: calc(100vw - 49px);
    max-width: 322px;
    z-index: 100;
}

#search input[type=search]::-webkit-search-cancel-button {
    display: none;
}

#search button {
    width: 49px;
    padding: 10px;
    background: var(--input-button-background-color);
    color: var(--input-button-foreground-color);
    font-size: 16px;
    border: 1px solid var(--input-border-color);
    border-left: none;
    cursor: pointer;
    z-index: 100;
}

#searchButton::after {
    content: var(--search-symbol);
}

#clearSearchInputButton {
    border-bottom: 1px solid var(--input-border-color);
}

#clearSearchInputButton::after {
    content: var(--clear-search-symbol);
}

.genomap-list {
    display: inline-block;
    position: absolute;
    top: 48px;
    left: 0px;
}

.genomap-list select {
    display: inline-block;
    border: 1px solid var(--input-border-color);
    padding: 10px;
    padding-left: 5px;
    margin: 0;
    font-size: 16px;
    width: 100vw;
    max-width: 371px;
    height: 49px;
    background-color: var(--input-background-color);
    color: var(--text-color);
    font-family: "Open Sans";
}

.genomap-list::after {
    content: var(--dropdown-symbol);
    position: absolute;
    width: 24px;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 12px;
    background-color: var(--input-button-background-color);
    border: 1px solid var(--input-border-color);
    pointer-events: none;
}

.footer {
    display: flex;
}

#themeSwitch {
    position: absolute;
    bottom: 0;
    width: 49px;
    height: 49px;
    padding: 10px;
    background: var(--input-button-background-color);
    color: var(--input-button-foreground-color);
    border: 1px solid var(--input-border-color);
    cursor: pointer;
    z-index: 1;
}

#themeSwitch::after {
    content: var(--theme-symbol);
}

#attribution {
    position: absolute;
    z-index: 10;
    right: 0px;
    bottom: 0px;
    padding: 3px 5px;
    background: var(--background-color);
    color: var(--text-color);
}

#results {
    position: absolute;
    top: 49px;
    width: 371px;
    height: calc(100vh - 50px);
    background-color: var(--results-background-color);
    overflow: auto;
    z-index: 50;
    display: none;
}

.entry {
    padding: 2px 0;
    display: flex;
    background-color: var(--results-item-background-color);
}

.entry:hover, entry:active {
    background-color: var(--results-item-highlight-color);
}

.entry .hitarea {
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-image: var(--collapse-button);
}

.entry .info {
    cursor: pointer;
    width: calc(100% - 60px);
    border-radius: 8px;
    padding: 4px 8px;
    background-color: var(--results-item-details-background-color);
    color: var(--results-item-text-color);
}

.entry:hover .info, .entry:active .info {
    background-color: var(--results-item-details-highlight-color);
}

.top,
.detail,
.bottom {
    white-space: nowrap;
    font-size: 13px;
    display: flex;
}

.detail {
    flex-direction: column;
}

.detail div {
    overflow: hidden;
}

.top div,
.detail div,
.bottom div {
    padding: 0 5px;
}

.detail div,
.bottom div {
    display: flex;
}

.top .name {
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

.top .lastname {
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

.top .birthdate {
    width: 80px;
    text-align: right;
    overflow: hidden;
}

.bottom .genomapname {
    width: 100%;
}

.father:not(:empty)::before {
    content: var(--father-symbol);
    margin-right: 3px;
}

.mother:not(:empty)::before {
    content: var(--mother-symbol);
    margin-right: 3px;
}

.mate:not(:empty)::before {
    content: var(--mate-symbol);
    margin-right: 3px;
}

.genomapname:not(:empty)::before {
    content: "@";
    margin-right: 3px;
}

.pinned {
    position: absolute;
    top: 0px;
    width: 369px;
    background-color: var(--results-item-background-color);
    overflow: auto;
    z-index: 50;
    padding: 6px 2px;
    border: 1px solid var(--input-border-color);
}

.pinned .hitarea {
    background-image: var(--expand-button);
}

/* disble Chrome input focus */
*,*:focus,*:hover{
    outline: none;
}

select:active, select:hover {
  outline-color: silver;
}

a, a:visited {
    color: var(--link-color);
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track-background-color);
}
::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-background-color);
  border-radius: 20px;
}

@media print {
    #search,
    #results,
    .genomap-list {
        display: none;
    }
}