@charset "utf-8";

/* CSS Document */
body{
    margin:0;
    background:#FFFFFF;
    font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
    font-weight:400;
    line-height:1.5;
    color:#212529;
    text-align:left
}
.tree *{
    margin:0;
    padding:0
}
.tree{
    white-space:nowrap;
    display:block;
    cursor:-webkit-grab;
    cursor:grab;
    overflow:hidden;
    -ms-touch-action:pan-x pan-y pinch-zoom;
    touch-action:pan-x pan-y pinch-zoom;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none}
body.mobile-device .tree{
    overflow:scroll
}
.tree>ul.c{
    padding:50vh 50vw!important
}
.tree ul.c,.tree ul.p{
    padding-top:5px;
    display:table;
    margin:0 auto;
    font-size:0
}
.tree ul.c,.tree ul.c li,.tree ul.p{
    position:relative;
    transition:all .5s;
    -webkit-transition:all .5s;
    -moz-transition:all .5s
}
.tree ul.c li{
    display:inline-block;
    text-align:center;
    list-style-type:none;
    padding:20px 5px 0;
    font-size:12px;
    line-height:normal;
    vertical-align:top
}
.tree ul.p>li:after,.tree ul.p>li:before,.tree ul.p ul.c>li:after,.tree ul.p ul.c>li:before{
    content:"";
    position:absolute;
    top:0;
    right:50%;
    border-top:1px solid #999;
    width:50%;
    height:20px
}
.tree ul.c>li:after,.tree ul.p>li:after{
    right:auto;
    left:50%;
    border-left:1px solid #999
}
.tree li:only-child:after{
    display:none
}
.tree ul.p ul.c li:first-child:before,.tree ul.p ul.c li:last-child:after{
    border:0 none
}
.tree ul.p ul.c>li:last-child:before{
    border-right:1px solid #999;
    border-radius:0 5px 0 0;
    -webkit-border-radius:0 5px 0 0;
    -moz-border-radius:0 5px 0 0
}
.tree ul.p ul.c>li:first-child:after{
    border-radius:5px 0 0 0;
    -webkit-border-radius:5px 0 0 0;
    -moz-border-radius:5px 0 0 0
}
.tree ul.p ul.c>li:only-child:before{
    right:auto;
    left:50%;
    border-left:1px solid #999;
    border-right:none
}
.tree ul.c ul.p>li:before{
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f004";
    border:none;
    left:0;
    width:100%;
    display:block
}
.tree ul.c ul.p>li:after{
    content:"";
    position:absolute;
    top:0;
    right:50%;
    border-top:none;
    width:50%;
    height:20px;
    border-left:none
}
.p1{
    display:table;
    margin:0 auto
}
.p1:before{
    border:none;
    content:"&";
    left:0;
    width:100%;
    display:block;
    margin:5px 0
}
.tree ul.c{
    padding-top:20px;
    padding-bottom:20px
}
.tree ul ul.c:before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    border-left:1px solid #999;
    width:0;
    height:20px
}
.tree li .indi{
    padding:4px;
    text-decoration:none;
    color:#666;
    background-color:#fff;
    display:inline-block;
    min-width:50px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    transition:all .5s;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    position:relative;
    box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08);
    outline:none;
    cursor:pointer
}
.tree li .indi.active{
    color:#333;
    background-color:#ff8
}
.tree li .indi span{
    display:block;
    font-size:10px
}
.tree li .indi:hover,.tree li .indi:hover+.p1 .indi,.tree li .indi:hover+ul li .indi{
    box-shadow:0 3px 8px 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.08)
}
.tree .tree-thumbnail{
    display:block;
    margin:0 auto 4px;
    width:50px;
    height:50px
}
.tree .tree-thumbnail img{
    border-radius:6px;
    max-width:100%
}
.tree .indi.f .tree-thumbnail{
    background-image:url(/images/f.gif)
}
.tree .indi.m .tree-thumbnail{
    background-image:url(/images/m.gif)
}
.tree-detail{
    display:inline-block;
    vertical-align:text-top
}
.tree-ie8 td.line{
    line-height:0;
    height:1px;
    font-size:1px
}
.tree-ie8 .li{
    display:inline-block;
    text-align:center;
    list-style-type:none;
    position:relative;
    padding:0 5px;
    font-size:12px;
    line-height:normal;
    transition:all .5s;
    -webkit-transition:all .5s;
    -moz-transition:all .5s
}
.tree .li .indi span{
    display:block;
    font-size:10px
}
.tree .li .indi{
    border:1px solid #ccc;
    padding:4px;
    text-decoration:none;
    color:#666;
    background-color:#fff;
    display:inline-block;
    min-width:50px;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px
}
.tree .li .indi,.tree ul.a{
    transition:all .5s;
    -webkit-transition:all .5s;
    -moz-transition:all .5s
}
.tree ul.a{
    position:relative;
    display:block;
    margin:0 auto;
    font-size:0
}
.tree ul.a:after{
    content:"";
    display:block;
    margin:0;
    border-right:1px solid #999;
    width:50%;
    height:20px
}
.tree ul.a li{
    display:inline-block;
    text-align:center;
    list-style-type:none;
    position:relative;
    padding-bottom:20px;
    font-size:12px;
    line-height:normal;
    transition:all .5s;
    -webkit-transition:all .5s;
    -moz-transition:all .5s
}
.tree ul.a>li:first-child:after{
    right:auto;
    left:50%;
    border-left:1px solid #999;
    border-radius:0 0 0 5px;
    -webkit-border-radius:0 0 0 5px;
    -moz-border-radius:0 0 0 5px
}
.tree ul.a>li:first-child:after,.tree ul.a>li:last-child:after{
    content:"";
    position:absolute;
    bottom:0;
    border-bottom:1px solid #999;
    width:50%;
    height:20px
}
.tree ul.a>li:last-child:after{
    right:50%;
    left:auto;
    border-right:1px solid #999;
    border-radius:0 0 5px 0;
    -webkit-border-radius:0 0 5px 0;
    -moz-border-radius:0 0 5px 0
}
.popover{
    font-size:12px;
    z-index:2
}
.popover *{
    margin:0;
    padding:0
}
.popover a.btn{
    font-size:12px
}
.popover .row-btn{
    margin-top:12px
}
.popover .row-btn .btn-6{
    width:48.75%;
    display:inline-block;
    margin-left:1.25%
}
.popover .row-btn .btn-6:first-child{
    margin-left:0
}
.popover.right{
    margin-left:15px
}
.popover.left{
    margin-left:-15px
}
.popover.bottom{
    margin-top:12px
}
.hover{
    position:absolute;
    top:-7px;
    right:-7px;
    z-index:1
}
.icon-info-sign{
    background-position:0 0;
    background-image:url(../images/icon-info-sign.png);
    display:none
}
.tree li .indi.show-popover .icon-info-sign,.tree li .indi:hover .icon-info-sign{
    display:block
}
#tree-scale.scale-50 .tree li:after,#tree-scale.scale-50 .tree li:before,#tree-scale.scale-50 .tree ul ul.c:before,#tree-scale.scale-75 .tree li:after,#tree-scale.scale-75 .tree li:before,#tree-scale.scale-75 .tree ul ul.c:before{
    border-width:2px
}
#tree-scale.scale-25 .tree li:after,#tree-scale.scale-25 .tree li:before,#tree-scale.scale-25 .tree ul ul.c:before{
    border-width:4px
}
.tree li.pending .indi li{
    padding:10px
}
.tree .tree-button{
    padding:4px;
    text-decoration:none;
    color:#666;
    background-color:#fff;
    min-width:58px;
    border-radius:5px;
    transition:all .5s;
    position:relative;
    box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08);
    outline:none;
    cursor:pointer;
    display:inline-block
}
.tree .tree-button.active{
    background-color:#ff8
}
.tree .tree-button.f .tree-thumbnail{
    background-image:url(/images/f.gif)
}
.tree .tree-button.m .tree-thumbnail{
    background-image:url(/images/m.gif)
}
.tree .tree-button span{
    display:block;
    font-size:10px
}
.tree .father,.tree .mother{
    margin-top:10px;
    display:block
}
.tree ul.a .tree-button{
    display:block
}
ul.gen1Family > li:nth-of-type(odd) {
    background-color: #F5F5F5 ;
}
ul.gen1Family > li:nth-of-type(even) {
    background-color: #F8F8F8 ;
}

ul.gen2Family > li:nth-of-type(odd) {
    background-color: #DCDCDC ;
}
ul.gen2Family > li:nth-of-type(even) {
    background-color: #D3D3D3 ;
}

ul.gen3Family > li:nth-of-type(odd) {
    background-color: #C0C0C0 ;
}
ul.gen3Family > li:nth-of-type(even) {
    background-color: #A9A9A9 ;
}
.btn-group-sm>.btn,.btn-tiny {
    padding: .15rem .25rem;
    font-size: .675rem;
    line-height: 1.0;
    border-radius: .2rem
}
.btn-group-sm>.btn+.dropdown-toggle-split,.btn-tiny+.dropdown-toggle-split {
    padding-right: .275rem;
    padding-left: .275rem
}
.refimg {
  display:block;
  max-width: 100px; 
  max-height:100px;
    cursor:pointer    
}
.refimglrg {
  display:block;
  max-width: 100%; 
  max-height:500px;
    cursor:pointer
}
#mapImage .leaflet-control-attribution .attr-tip {
    font-size: 11px;
    margin:1px;
    padding:1px;
}
.attribute {
    color:#2d87e2;   
}
.div-control-zoom-in,.div-control-zoom-out {
    cursor: pointer;
    font: 700 18px Lucida Console,Monaco,monospace;
    text-indent: 1px
}

.print-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.tree-red{background-image:url(/images/tree_red.png);}
.tree-peacock{background-image:url(/images/tree_peacock.png);}
.tree-cream{background-image:url(/images/tree_cream.png);}
.tree-grey{background-image:url(/images/tree_grey.png);}

.print-selector input:active +.prev-cc{
    border:1px solid #000000;
}
.print-selector input:checked +.prev-cc{
    border:1px solid #000000;
}
.prev-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:80px;
}

.text-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.text-roboto{background-image:url(/images/text_roboto.png);}
.text-helvetica{background-image:url(/images/text_helvetica.png);}
.text-sans{background-image:url(/images/text_sans.png);}
.text-serif{background-image:url(/images/text_serif.png);}
.text-times{background-image:url(/images/text_times.png);}
.text-msung{background-image:url(/images/text_msung.png);}
.text-kozmin{background-image:url(/images/text_kozmin.png);}

.text-selector input:active +.text-cc{
    border:1px solid #000000;
}
.text-selector input:checked +.text-cc{
    border:1px solid #000000;
}
.text-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:220px;height:50px;
}