p.my_heading1 {
    color: var(--Website-Colors-Neutral-FG-1, #242424);
    font-family: Plus Jakarta Sans;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: 0.64px;
}


.pedgree-content{ 
    display: flex;
    justify-content: center;
    align-items: center; 
}

.pedigree-header{
    gap: 15px;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.pedigree-header-icon-close{
cursor: pointer;
display: none;

}

            .pedigree-box {
                border-radius: 4px;
                border: 1px solid #EAEAEA;
                background: #FFF;
                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
                width: 150px;
                height: 312px;
                font-family: Plus Jakarta Sans;

        }
 
        .pedigree-image-box {
            height: 96px;
            background: #D5DBEE;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
            overflow: hidden;
            position: relative;
        }
        .pedigree-image-box img{ 
            object-fit: cover;
            width: 100% !important;
            height: 100% !important;
        }
        .pedigree-text-box {
            padding: 8px 6px;
            display: flex;
            gap: 0px;
            flex-direction: column;
            height: 213px;
            justify-content: space-between;
        } 

        .pedigree-text-prize {
            border: none !important;
            display: block
        }
        .pedigree-text-link {
            display: block;
            min-height: 32px; 
            overflow: hidden;
            color: #3777C1;
            text-align: center;
            font-family: Plus Jakarta Sans;
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0.39px;
            text-decoration-line: underline;
        }

        .pedigree-text-date {
            color: black;
            font-size: 14px;
            font-weight: 500;
            text-align: center;
            letter-spacing: 1px;
            margin-top: -3px;
            margin-bottom: -10px;
        }
        .pedigree-text-healthy {
            font-size: 10px;
            color: black;
            font-weight: 500;
            color: #000;
            text-align: center;
            font-family: Plus Jakarta Sans;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0.3px;
            max-height: 34px;  
            width: 101%;
            margin-bottom: -10px;
            margin-top: -9px;
            overflow: hidden;
        }
        .pedigree-text-train { 
            max-height: 34px; 
            color: #000;
            text-align: center;
            font-family: Plus Jakarta Sans;
            font-size: 13px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            letter-spacing: 0.3px;
            overflow: hidden;
        }
        
            .tooltiptext1.banner-tooltip.prize::after {
                content: '';
                position: absolute;
                border: 10px solid;
                border-color: transparent transparent black transparent;
                top: -16px;
                margin-left: -12px;
            }



            .tooltiptext1.banner-tooltip.prize.last-level {
                top: 47%;
            }
            .tooltiptext1.banner-tooltip.prize.last-level:after {
                border-color: black transparent transparent transparent;
                top: 80px !important;
            }






            .pedigree-text-id {
            border: none !important;
            display: block !important;
            color: #7F56D9;
            text-align: center;
            font-family: Plus Jakarta Sans;
            font-size: 13px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            letter-spacing: 0.3px;
            max-height: 34px;
            overflow: hidden;
        }








        .tree ul:before, .tree code:before, .tree span:before {
            outline: solid 1px #666;
            content: "";
            height: 0.5em;
            left: 50%; 
            position: absolute;
        }
     
        .tree ul:before, .tree code:before, .tree span:before {
            outline: solid 1px #666;
            content: "";
            height: 0.5em;
            left: 50%;
            position: absolute; 
        }









        .name-header-pop-pedigree{
        color: var(--website-colors-neutral-fg-1, #242424); 
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 40px; /* 200% */
        letter-spacing: 0.4px;
        }

        .hr-header-pop-pedigree{
            border: 2px solid;
            position: relative;
        }
        .hr-header-pop-pedigree::before{
        
            content: '';
            position: absolute;
            width: 11px;
            height: 12px;
            border-radius: 50%;
            background: black; 
            left: -1%;
            bottom: -5px;

        }





        .close-pedigree-pop {
            margin-right: 15px;
        }
        .close-icon  {
            position: absolute;
            background:  #1B1C17;
            top: -45px;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50px;
            right: 32px;
            box-shadow: 0px 0px 9px -3px black;
            cursor: pointer;
        }
        .close-icon:hover  { 
            background:  #000; 
        }

        .border-5{
            border-radius: 5px !important;
            box-shadow: 0px 2px 15px -5px black !important;

        }
        
        .tree ul:before, .tree code:before, .tree span:before {
            outline: solid 1px  #574949 !important;
            -webkit-outline: solid 1px  #574949 !important;
            -moz-outline: solid 1px  #574949 !important;

        }
        .tree li:before {
            outline: solid 1px #574949 !important;
            -webkit-outline: solid 1px #574949 !important;
            -moz-outline: solid 1px #574949 !important;
            z-index: -1;
        }


        /*end overlay peddgree */
        /* box image */

        .box-image-input {
            height: 236px;
            flex-shrink: 0;
            border-radius: 15px;
            border: 2px dashed #2C7BD8;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 16px;
            margin-top: 40px;
        }
        span.box-image-input-text-span {
            text-decoration-line: underline;
            cursor: pointer;
        }
        .box-image-input-text {
            color: #0E52A3;
            font-family: Plus Jakarta Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
        }
        /*end box image */ 




        .tooltiptext1-title-banner-title {
            width: 100%;
            text-align: start;
            padding: 0px 1px 0 7px;
            color: var(--White, #FFF);
            font-family: Plus Jakarta Sans;
            font-size: 16px !important ;
            font-style: normal;
            font-weight: 700;
            line-height: 18px;
        }
        .tooltiptext1-title-banner-body {
            width: 100%;
            text-align: start;
            padding: 11px 0px 0 7px;
            color: var(--White, #FFF);
            font-family: Plus Jakarta Sans;
            font-size: 15px  !important;
            font-style: normal;
            font-weight: 600;
            line-height: 18px;
            letter-spacing: 0.6px;
        }
        .tooltiptext1.banner-tooltip.prize { 
            margin-left: -28px;
        }
        .tooltiptext1.banner-tooltip.prize::after { 
            left: 25%; 
        }


        .pedgree-titel-parent {
            position: absolute;
            color: var(--website-colors-neutral-fg-1, #242424);
            font-size: 17px;
            font-style: normal;
            font-weight: 600;
            line-height: 40px;
            letter-spacing: 0.28px;
            top: -41px;
            left: 49px;
            font-family: Plus Jakarta Sans;
        }

        .bootstrap-select>.dropdown-toggle.bs-placeholder, .bootstrap-select>.dropdown-toggle.bs-placeholder:active, .bootstrap-select>.dropdown-toggle.bs-placeholder:focus, .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
            color: #667085;
        }
        
        .tooltiptext1.banner-tooltip.prize {
            width: 320px;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-content: stretch;
            justify-content: space-between;
            gap: 0px;
        }
        .tooltiptext1.banner-tooltip.prize {
            width: 320px;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-content: stretch;
            justify-content: space-between;
            gap: 0px;
        }
        .tooltiptext1.banner-tooltip.prize {
            background-color: black;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 17px 9px;
            position: absolute;
            z-index: 4;
            top: 100%; 
            margin-left: -6px;
            min-width:  114px; 
            font-size: 16px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            align-content: center;
        }




       






















.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}

.tree, .tree ul {
    display: table;
}

.tree ul {
    width: 100%;
}

.tree li {
    display: table-cell;
    padding: .5em 0;
    vertical-align: top;
}

/* _________ */
.tree li:before {
    outline: solid 1px #666;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.tree li:first-child:before {
    left: 50%;
}

.tree li:last-child:before {
    right: 50%;
}

.tree code, .tree span { 
    border-radius: .2em;
    display: inline-block;
    margin: 0 .2em .5em;
    padding: .2em .5em;
    position: relative;
}

/* If the tree represents DOM structure */
.tree code {

    font-family: monaco, Consolas, 'Lucida Console', monospace;
}

/* | */
.tree ul:before,
.tree code:before,
.tree span:before {
    outline: solid 1px #666;
    content: "";
    height: .5em;
    left: 50%;
    position: absolute;
}

.tree ul:before {
    top: -.5em;
}

.tree code:before,
.tree span:before {
    top: -.55em;
}

/* The root node doesn't connect upwards */
.tree > li {
    margin-top: 0;
}

.tree > li:before,
.tree > li:after,
.tree > li > code:before,
.tree > li > span:before {
    outline: none;
}


.pedigree-text-prize{
    cursor: pointer;
    display: flex;
    justify-content: center;
}

.pedigree-text-prize .box-hover{
    display: none   ;
} 




.pedigree-image-box-img {
    width: 100%;
    height: 100%;
    position: absolute;
}











.tree ul:before {
    top: -64px !important;
}
.tree li:first-child:before {
    left: 50% !important;
    top: -32px !important;
}
.tree code:before, .tree span:before {
    top: -38px !important;
}

.tree ul:before, .tree code:before, .tree span:before {
    outline: solid 1px #666;
    content: "";
    height: 32px !important;
    left: 50% !important; 
    position: absolute;
    z-index: -1;
}
.tree li:last-child:before {
    right: 50% !important;
    top: -32px !important;
}
.tree li:first-child:before {
    left: 50% !important;
    top: -32px !important;
}
.tree ul {
    width: 100%;
    margin-top: 64px !important;
}

.tree .first-li:before {
    outline: none !important;
}





.pedgree-content-main{
    justify-content: center;
}

figure {
    position: absolute;
    top: 0;
}


.pop-pedigree.popup_content { 
    min-height: 1279px; 
    scale: 0.9;
}





/* overlay peddgree */
div.pidgree { 
    /* width: 50%; */
    padding: 40px 50px;
    background: #F5F6F7;
    border-radius: 15px;
    position: relative;
}



@media  (max-width: 800px) {
    .div.pidgree {  
        width: 90%; 
}
}



@media screen and (min-device-width: 580px) and (max-device-width: 900px) { 
    div.pidgree { 
        margin-top: -5rem !important;
        scale: 0.8;
    }
}







@media screen and (min-device-width: 1401px) and (max-device-width: 1549px) { 
    /* STYLES HERE */
    .pedgree-content{  
        scale: 0.65;
    }
}
@media  (max-width: 1550px) {
    .pedgree-content{  
        scale: 0.78;
    }
    .pop-pedigree.popup_content {
        min-height: 1016px;
         
    }
}

@media  (min-width: 1551px) {
    .pedgree-content{  
        scale: 1;
    }
}



@media  (max-width: 1330px) {
    .pedgree-content{  
        scale: 0.68;
    }
}

@media  (max-width: 1400px) {
    .pedgree-content{
        max-height: 80vh; 
        scale: 0.68;
    }
    .pop-pedigree.popup_content {
        min-height: 900px;
         
    }
}


@media (min-width: 800px) and (max-width: 1099px){ 
    /* STYLES HERE */
    .pedgree-content {
        scale: 0.55;
    }
    .pop-pedigree.popup_content {
        min-height: 739px;
         
    } 
}
@media (min-width: 800px) and (max-width: 1000px){ 
    .pedgree-content {
        scale: 0.45;
    }

    .pop-pedigree.popup_content {
        min-height: 625px; 
    } 

}


@media (min-width: 1px) and (max-width: 600px){ 
    .pop-pedigree .pedgree-titel-parent{ 
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 23.506px; /* 195.885% */
        letter-spacing: 0.24px;
    }
}
@media (min-width: 601px) and (max-width: 1500px){ 
    .pop-pedigree .pedgree-titel-parent{ 
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: 23.506px; /* 195.885% */
        letter-spacing: 0.24px;
    }
}

@media (min-width: 1px) and (max-width: 900px){ 
    .pedgree-content {
        scale: 0.58 ; 
    }
    

   

    .pop-pedigree p.my_heading1 {  
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 23.506px; /* 146.914% */
        letter-spacing: 0.32px;
    }

    .pop-pedigree .close-icon{
        display: none;
    }
    .pedigree-header-icon-close{ 
        display: block;
        
        }

        .pop-pedigree.popup_content {
            width: 100% !important;
            min-height: 879px;
              
        }

}
@media (min-width: 1px) and (max-width: 799px){ 


   




    /* STYLES HERE */
    .pedgree-content {
        scale: 0.65; 
    }


   
    .pedgree-content figure {
        overflow-x: scroll; 
        max-width: 129%;
    }


  
    
   
    code.first-li.pedigreev_open {
        margin-left: 73%;
    }

    .father .all-after-paarent.all-after-father::before {
        left: 78% !important;
    }



    code.pedigreevv_open {
        margin-left: 42%;
    }

    .father .parent-section.parent-section-1::before{
        left: 67% !important;
        width: 80%;
    }
    .father .parent-section.parent-section-2::before{
        left: 37% !important;
        width: 26%;
    }

    code.pedigreevm_open {
        margin-left: 38%;
    }
    code.pedigreemv_open {
        
    margin-left: 16%;
    }
    code.first-li.pedigreem_open {
        left: 9%;
    }



    .all-after-paarent.all-after-mother::before {
        left: 28% !important;
    }
    code.pedigreemm_open {
         left: 9%;
    }
   .mother .parent-section.parent-section-2:before {
        right: -3% !important;
        width: 48%;
        left: -45px;
        top: -32px !important;
    }

    .mother .parent-section.parent-section-1:before {
        left: 40% !important;
    }








 
    
    
    
    .pedgree-content.first-show{
        scale: 0.24;
    }
    .pedgree-content figure.first-show {
        overflow-x: scroll; 
        max-width: 500%;
        background: #e4d2c3c9;
        padding: 29px;
        scale: 0.95;
        margin-top: 29px;
    }
    .pop-pedigree p.my_heading1 {
        font-size: 15px; 
    }
    .popup_content { 
        padding-top: 13px;
    }

    .pop-pedigree.popup_content.first-show{
        width: 100% !important;
        min-height: 384px;
        height: 19%;
        position: absolute !important;
        top: 20%;
        left: -7px;
    }
 




}











@media  (min-width: 800px) {
    code.first-li.pedigreem_open , code.first-li.pedigreev_open {
        left: 38%;
    }
    code.pedigreemv_open, code.pedigreemm_open  ,code.pedigreevv_open ,code.pedigreevm_open {
        left: 25%;
    }  
 
    
}