.buttons-holder {
    position: relative;
    top: -4em;
    text-align: center;
}

.pedigree-tree-holder {
    width: 100%;
    position: relative;
}

.pedigree-tree-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: calc(100% - 40px);
    max-height: calc(100% - 40px);
    overflow: scroll;
}

.pedigree-zoom-container {
    width: 100%;
    max-width: 100%;
    height: calc(100% - 40px);
    max-height: calc(100% - 40px);
}

@media(max-width: 768px) {
    .buttons-holder {
        top: -100%;
    }

    .pedigree-tree-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        overflow: scroll;
    }

    .pedigree-zoom-container {
        zoom: 0.72;
        -webkit-text-size-adjust: auto;
    }
}

@media (max-width: 1024px) {
    .pedigree-zoom-container {
        zoom: 0.75;
    }
}

.pedigree-branch {
    position: relative;
    margin-left: 375px;
    margin-top: -25px;
}

    .pedigree-branch:before {
        content: "";
        width: 25px;
        border-top: 1px solid #999999;
        position: absolute;
        left: -75px;
        top: 62%;
        margin-top: 1px;
    }

.pedigree-entry {
    position: relative;
    min-height: 180px;
}

    .pedigree-entry:before {
        content: "";
        height: 100%;
        border-left: 1px solid #999999;
        position: absolute;
        left: -50px;
    }

    .pedigree-entry:after {
        content: "";
        width: 25px;
        border-top: 1px solid #999999;
        position: absolute;
        left: -50px;
        top: 100%;
        margin-top: 1px;
    }

    .pedigree-entry:first-child:before {
        width: 10px;
        height: 50%;
        top: 100%;
        margin-top: 2px;
    }

    .pedigree-entry:first-child:after {
        height: 10px;
    }

    .pedigree-entry:last-child:before {
        height: 50%;
    }

    .pedigree-entry:last-child:after {
        height: 10px;
        border-top: none;
        border-bottom: 1px solid #999999;
        margin-top: -9px;
    }

    .pedigree-entry.sole:before {
        display: none;
    }

    .pedigree-entry.sole:after {
        width: 50px;
        height: 0;
        margin-top: 1px;
    }

.pedigree-label {
    display: block;
    width: 300px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    top: 340px;
    font-size: 100%;
}

.pedigree-branch .pedigree-entry:last-child:after {
    top: 70%;
}

.pedigree-branch .pedigree-entry:first-child:after {
    top: 70%;
}

.pedigree-label-adjust {
    left: -25px;
    top: 60%;
    border-radius: 4px;
}

.pedigree-branch.lv1 .pedigree-entry:first-child:before {
    height: 50%;
    top: 70%;
}

.pedigree-branch.lv1 .pedigree-entry:last-child:before {
    height: 50%;
    top: 20%;
}

.pedigree-branch.lv1 .pedigree-label-adjust {
    top: 50%;
}

.pedigree-branch.lv2{
    margin-left:350px;
}

.pedigree-branch.lv2 .pedigree-label-adjust {
    top: 50%;
}

.pedigree-branch.lv2:before {
    top: 70%;
}

.pedigree-branch.lv2 .pedigree-entry:after {
    top: 90%
}

.pedigree-branch.lv2 .pedigree-entry:first-child:before{
    top: 90%;
    height: 50%;
}

.pedigree-branch.lv2 .pedigree-entry:last-child:before{
    top: 40%;
    height: 50%;
}

.pedigree-branch.lv1.pedigree-entry:last-child {
    margin-top: 1em;
}

@media(min-width: 1024px) {
    .el-main {
        padding: 0;
        padding-left: 20px;
    }

    .pedigree-zoom-container {
        height: 100%;
        max-height: 100%;
    }

    .pedigree-tree-wrapper {
        height: 100%;
        max-height: 100%;
    }
}

@media print {
    /*@page {
        size: landscape;
    }*/

    .pedigree-tree-holder {
        zoom: 0.85;
    }

    .pedigree-label {
        width: 175px;
        /*font-size: 80%;*/
    }

    .pedigree-branch {
        margin-left: 250px;
    }

    .pedigree-branch.lv2 {
        margin-left: 225px;
    }

    .tile {
        padding: 0.2em;
    }
}