@font-face {
    font-family: "FontAwesome";
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.eot?v=4.7.0");
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0")
            format("embedded-opentype"),
        url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff2?v=4.7.0")
            format("woff2"),
        url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.woff?v=4.7.0")
            format("woff"),
        url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.ttf?v=4.7.0")
            format("truetype"),
        url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular")
            format("svg");
    font-weight: normal;
    font-style: normal;
}

#familytree {
    width: 100%; 
}

.familyTreeSettings {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: stretch;
}

.searchSettings {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.searchItem {
}

#searchForm {
    flex-grow: 3;
}

#searchButton {
    flex-grow: 1;
}

#zoomValue:hover {
    fill: red;
}

.zoomSettings {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.zoomButtons {
    cursor: pointer;
}

.focusSettings {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}