.report-modal-header {
    display: flex;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    background: var(--hero-gradient);
    color: var(--slate-50);
}

.modal-no-title {
    justify-content: end !important;
}

.report-modal-title {
    display: flex;
    gap: 10px;
    align-items: center;
}

.report-modal-btns {
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 16px;
}

/*Custom Modals*/
.modal-dialog:has(.cust-sire-modal) { 
    max-width: max-content;
}
.modal-content:has(.cust-sire-modal) {
    max-width: max-content;
}
.cust-sire-modal > .modal-body{
    overflow: hidden;
    max-height: 80vh;
    font-size: 14px;
}

.modal-dialog:has(.modal-fit-content) {
    max-width: fit-content;
}
.pedigree-report-wrapper .modal-dialog {
    max-width: 70vw; /* instead of width: 90vw */
    width: 100%; /* allows max-width to constrain */
}
.pedigree-report-wrapper.four-gen .modal-dialog {
    max-width: 1000px;
}

.pedigree-report-wrapper.five-gen .modal-dialog {
    max-width: 1210px;
}

.pedigree-report-wrapper.six-gen .modal-dialog {
    max-width: 1410px;
}

.pedigree-report-wrapper.default-gen .modal-dialog {
    max-width: 900px;
}
/* Custom modal size */
.modal.modal-xxl {
    max-width: 90% !important; /* or whatever width you want */
}