/*pedigree report html iframe css*/
pedigree > body {
    margin: 0;
    color: #333;
}

pedigree > .btmline {
    border-bottom-color: #0099DA;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

pedigree > table {
    width: 100%;
    font-size: 12px !important;
}

pedigree > p.horse {
    font-size: 2em;
    margin: 0;
    text-align: center;
}

pedigree > p {
    line-height: 110%;
    margin-top: 0;
    margin-bottom: 0 !important;
}

pedigree > td {
    line-height: 110%;
    margin-top: 0;
    margin-bottom: 0;
    padding: 5px;
}

.remHRC {
    margin-left: 9.0pt;
    text-indent: -9.0pt;
    text-align: left;
}

.remHRR {
    margin-left: 9.0pt;
    text-indent: -9.0pt;
    text-align: left;
    color: maroon;
    font: bold;
}

.remHRE {
    margin-left: 9.0pt;
    text-indent: -9.0pt;
    text-align: right;
}

.rem0 {
    margin-left: 20.0pt;
    text-indent: -20.0pt;
    text-align: justify;
}

.sireref {
    text-align: justify;
    line-height: 100%;
    font-weight: bold;
}

.sirerefinglis {
    text-align: justify;
    line-height: 100%;
    font-weight: bold;
    font-style: italic;
}

.header {
    text-align: justify;
    line-height: 100%;
    font-weight: bold;
}

.ss {
    margin-left: 20.0pt;
    text-indent: -20.0pt;
    text-align: justify;
}

.rem1 {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.pr {
    margin-left: 36.0pt;
    text-indent: -27.0pt;
    text-align: justify;
}

.ds {
    text-align: justify;
}

.br {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem2 {
    margin-left: 36.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem3 {
    margin-left: 45.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem4 {
    margin-left: 54.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem5 {
    margin-left: 63.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem6 {
    margin-left: 72.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem7 {
    margin-left: 81.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem8 {
    margin-left: 90.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem9 {
    margin-left: 99.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem10 {
    margin-left: 108.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem11 {
    margin-left: 117.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.rem12 {
    margin-left: 126.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.remA {
    margin-left: 50pt;
    text-indent: -50.0pt;
    text-align: justify;
}

.brem1 {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.brem2 {
    margin-left: 36.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.brem3 {
    margin-left: 45.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.brem4 {
    margin-left: 54.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}

.grid {
    font-size: 7.5pt;
}

.rrTable {
    margin: 3px 0 13px
}

.rpTable {
    margin: 3px 0 13px
}

.tright {
    text-align: right;
}

.tleft {
    text-align: left;
}

.tcenter {
    text-align: center;
}

.turight {
    text-align: right;
    border-bottom-style: solid;
    border-bottom-width: thin
}

.talt {
    background: #ebebeb;
}

.alt {
    background: #ebebeb;
}
.inbreedingNC {
    background: #ccffff;
    font-weight: bold;
}

.inbreedingNF {
    background: #ffe4e1;
    font-weight: bold;
}

.inbreedingYC {
    background: #ccffff;
    font-weight: bold;
}

.inbreedingYF {
    background: #ffe4e1;
    font-weight: bold;
}

.inbreedingNCH {
    background: #ffffff;
    font-weight: normal;
}

.inbreedingNFH {
    background: #ebebeb;
    font-weight: normal;
}


div#links a span {
    display: none;
}

div#links a:hover span {
    display: block;
    position: fixed;
    top: 200px;
    left: 450px;
    width: 250px;
    padding: 5px;
    margin: 10px;
    z-index: 100;
    color: black;
    background: yellow;
    font: 10px Verdana, sans-serif;
    text-align: center;
    margin-left: 0pt;
    text-indent: 0pt;
    text-align: justify;
}

div#links p {
    margin-left: 27.0pt;
    text-indent: -18.0pt;
    text-align: justify;
}





img {
    border: 0;
}

.minisubtitle {
    COLOR: #000000;
    FONT: 12px verdana, arial, sans-serif;
    font-weight: bold;
}

.pedigreestyle {
    padding: 10px 30px;
    font: 70% Verdana, arial, sans-serif;
    margin: 0;
    color: #333;
}

.buildertab a.nav-link.active.show {
    background-color: #ADE7FF;
    border: 0px;
    margin-right: 5px;
    color: #2c2a4a;
}
.buildertab a.nav-link {
    border-top: 1px solid #ADE7FF;
    border-right: 1px solid #ADE7FF;
    border-left: 1px solid #ADE7FF;
    margin-right: 5px;
}
.buildertabbottom {
    margin-top: -2px;
    background-color: #ADE7FF;
    padding: 0.5em;
    display: flex;
    color: #2c2a4a;

}
/* ===== Pedigree report modal: mobile fullscreen =====
   Fullscreen below md so the PDF preview gets the whole viewport; :has() targets the Blazorise modal rendered at body level. */

@media (max-width: 767.98px) {

    /* Target the modal shell that contains the pedigree report wrapper (Blazorise's .modal sits at body level),
           via :has() on the inner dialog. */
    .modal:has(.pedigree-report-wrapper) .modal-dialog {
        max-width: 100%;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .modal:has(.pedigree-report-wrapper) .modal-content {
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    /* Let the wrapper fill the space; neutralise the generation-specific desktop widths
           (four-gen, five-gen, etc.) so the report scales to the phone width. */
    .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper {
        width: 100%;
        max-width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.four-gen,
        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.five-gen,
        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.six-gen,
        .modal:has(.pedigree-report-wrapper) .pedigree-report-wrapper.seven-gen {
            width: 100%;
            max-width: 100%;
        }

    /* If the modal hosts a PDF in an iframe/embed, let it fill the
       fullscreen space too. */
    .modal:has(.pedigree-report-wrapper) iframe,
    .modal:has(.pedigree-report-wrapper) embed,
    .modal:has(.pedigree-report-wrapper) object {
        width: 100%;
        height: 100%;
        min-height: calc(100vh - 4rem); /* clears header bar */
        border: 0;
    }
}