@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic-ext.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(Latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic-ext.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url(Latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic-ext.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(Latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic.woff2) format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(Cyrillic-ext.woff2) format("woff2");
    unicode-range: U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F
}

@font-face {
    font-family: "Roboto Flex";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(Latin.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

* {
    touch-action: pan-y;
}

html, body {
    height: 100%;
    overflow: hidden;
}

#tree {
    width: 100%;
    height: 1000px;
    margin: 0 auto;
    background: #ffffff;
background-image: url(../assets/image/butaq.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    content: "";
}

text {
    text-anchor: middle;
}

#tree svg {
    width: 100%;
    height: 100%;
}

.node {
    cursor: pointer;
    font-family: "Roboto Flex",Arial,Helvetica,sans-serif;
}

.node-rect-parent {
    fill: #0970b4;
    stroke: #333;
}

.node-rect-child {
    fill: #ffffff;
    stroke: #333;
}

.node-rect-male {
    fill: #ffffff;
    stroke: #333;
}

.node-rect-female {
    fill: #ffffff;
    stroke: #333;
}

.node-text-parent {
    fill: #ffffff;
}

.node-text-child {
    fill: #0970b4;
}

.link {
    fill: none;
    stroke: #333;
    stroke-width: 1px;
}

#message {
    position: fixed;
    transform: translate(-50%, 0);
    top: 50%;
    left: 50%;
    color: #0970B4;
	    font-family: "Roboto Flex", Arial, Helvetica, sans-serif;
}