/*
 * Member single page table css
 */
table.indi.genealogical-tree-member .gt-gender-emoji {
    font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

table.indi.genealogical-tree-member td>a {
    display: inline-block;
}

table.indi.genealogical-tree-member td>img {
    display: inline-block;
}

table.indi.genealogical-tree-member td>a>img {
    box-shadow: none;
    display: inline-block;
}

table.indi.genealogical-tree-member td>a.tree_link {
    padding: 0 5px;
    display: inline-block;
    vertical-align: middle;
}

/*
 * Tree container css/
 */
div.gt-container {
    width: 100%;
    max-width: initial !important;
    position: relative;
    direction: ltr;
}

div.gt-container .gt-zoom-contorl {
    padding: 10px;
    text-align: right;
    position: relative;
    z-index: 399;
}

div.gt-container .gt-zoom-contorl:after,
div.gt-container .gt-zoom-contorl:before {
    display: table;
    content: "";
}

div.gt-container .gt-zoom-contorl:after {
    clear: both;
}

div.gt-container .gt-zoom-contorl button {
    padding: 4px 8px;
    min-width: 32px;
    min-height: 32px;
    display: block;
    float: right;
    margin-left: 2px;
    outline: none !important;
    text-decoration: none;
}

div.gt-container .gt-zoom-contorl button img {
    outline: none !important;
}

div.gt-container .gt-expand-compress .gt-expand-icon {}

div.gt-container .gt-expand-compress .gt-compress-icon {
    display: none;
}

div.gt-container.gt-expand-compress-toggle .gt-expand-compress .gt-expand-icon {
    display: none;
}

div.gt-container.gt-expand-compress-toggle .gt-expand-compress .gt-compress-icon {
    display: block;
}

div.gt-container .spinner {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translate(-50%, -50%)
}

div.gt-content {
    border: 1px solid #d5d5d5;
    overflow: hidden;
}

div.gt-content.gt-expand-compress-toggle {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999;
}

div.gt-tree * {
    box-sizing: border-box;
}

div.gt-tree *:before,
div.gt-tree *:after {
    box-sizing: border-box;
}

/*
 * 
 */
div.gt-tree:not(.type-gt-tree) {
    width: max-content;
    word-wrap: initial;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 10px;
    background: transparent !important;
}

div.gt-tree a {
    word-break: initial;
}

div.gt-tree div.ind>.ind-cont>.info {}

div.gt-tree div.ind>.ind-cont>.image {
    padding-bottom: 5px;
    position: relative;
}

div.gt-tree div.ind>.ind-cont>.image>.image-cont>img {
    display: block;
}

div.gt-tree div.ind>.ind-cont>.info>.tree-link {
    display: block;
    text-align: center;
}

div.gt-tree div.ind>.ind-cont>.info>.tree-link a {
    display: inline-block;
}

div.gt-tree div.ind>.ind-cont>.info>.tree-link a>img {
    box-shadow: none !important;
}

div.gt-tree div.ind.F {
    background: #ffdbe0;
}

div.gt-tree div.ind.M {
    background: #daeef3;
}

div.gt-tree div.ind.H {
    background: #ff8 !important;
}

div.gt-tree div.ind>.ind-cont .gender.M>span:before {
    content: "♂️";
    font-weight: 400;
    font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

div.gt-tree div.ind>.ind-cont .gender.F>span:before {
    content: " ♀️";
    font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
}

div.gt-tree div.ind>.ind-cont>div.image>.image-cont {
    width: 60px;
    margin: 0 auto;
    max-width: 100%;
}

div.gt-tree div.ind>.ind-cont>div.image>.image-cont>img {
    width: 100%;
    background: #fff;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.gt-tree div.ind>.ind-cont>.info>.birt-deat {
    word-break: initial;
    word-wrap: normal;
}

div.gt-tree .gt-generation {
    background: #fff;
    display: block;
    border: 1px solid #000;
    z-index: 44444;
    margin: 0 auto;
    margin-bottom: 5px;
    width: fit-content;
    word-break: initial;
    padding: 2px 8px;
}

div.gt-tree div.ind.hr>.ind-cont>div.image,
div.gt-tree div.ind.hr>.ind-cont>div.image+div.info,
div.gt-tree div.ind.hr>.ind-cont>div.partners {
    display: table-cell;
    vertical-align: top;
}

div.gt-tree div.ind.hr>.ind-cont>div.image {
    padding-bottom: 0px;
}

div.gt-tree div.ind>.ind-cont>div.info {
    padding: 5px;
}

div.gt-tree div.ind.hr>.ind-cont>.partners>.partner {
    display: inline-block;
    vertical-align: top;
    margin-top: 0px;
}

div.gt-tree .partners>.partner>div.ind {
    max-width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

div.gt-tree .partners>.partner>div.ind>.ind-cont>div.image>.image-cont {
    max-width: 100%;
}

div.gt-tree {
    width: max-content;
    word-wrap: initial;
    margin: 0 auto;
    box-sizing: border-box;
    background: transparent !important;
    padding: 10px;
}

div.gt-tree ul {
    margin: 0 auto !important;
    padding: 0;
    text-align: center;
    position: relative;
    display: table;
}

div.gt-tree li {
    margin: 0 auto !important;
    padding: 0;
    display: table-cell;
    vertical-align: top;
    position: relative;
}

div.gt-tree li:only-child {
    padding-top: 0px !important;
}

div.gt-tree div.ind {
    display: inline-block;
    border: 1px solid;
    position: relative;
    background-color: #fff;
    z-index: 5;
    padding: 4px;
    font-size: 12px;
    width: auto;
    vertical-align: top;
    cursor: default;
    min-height: 30px;
    margin: 0 2px;
    border-radius: 5px;
    white-space: initial;
    word-break: initial;
}

div.gt-tree.gt-tree-hr ul {
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    margin: 0 !important;

}

div.gt-tree.gt-tree-hr li {
    display: flex;
    vertical-align: middle;
    align-items: center;
}

div.gt-tree.gt-tree-hr li:only-child {
    padding-left: 0px !important;
}

div.gt-tree.gt-tree-hr div.ind {
    display: inline-block;
    vertical-align: middle;
    margin: 2px 0;
}

div.gt-tree ul.parents>li>div.ind {
    display: block;
    min-height: 35px;
}

div.gt-tree div.partners>div.partner>div.ind {
    display: block;
    margin-top: 4px;
}

div.gt-tree ul.parents>li>div.ind {
    margin: 0px;
    border-radius: 0px;
}

div.gt-tree.gt-style-3-alt div.ind.F>.ind-cont {
    background: #ffdbe0;
}

div.gt-tree.gt-style-3-alt div.ind.M>.ind-cont {
    background: #daeef3;
}

div.gt-tree.gt-style-3-alt div.ind.H>.ind-cont {
    background: #ff8 !important;
}





.gt-popover-container {
    position: absolute;
    left: 0px;
    width: 600px;
    max-width: 100%;
    top: 0px;
    bottom: 0px;
    z-index: 500;
}

.gt-popover-container .close {
    position: absolute;
    top: 17px;
    right: 2px;
    z-index: 3;
}

.gt-popover {
    position: absolute;
    left: 15px;
    right: 0;
    top: 15px;
    bottom: 15px;
    background: #fff;
    overflow-y: scroll;
    padding: 20px;
    z-index: 1;
    border: 1px solid #d5d5d5;
}

.gt-popover h3 {
    margin: 0px !important;
    padding: 15px 0px !important;
}

/*
 * 
 */


div.gt-tree .gt-style-4 li.spouse:not(:first-child):not(:last-child)>.ind:before {
    border-left: 1px solid;
    top: -30px;
    height: 29px;
}

div.gt-tree.gt-tree-hr .gt-style-4 li.spouse>.ind:before {
    height: 0px;
    top: 50%;
    border-top: 1px solid;
    border-left: 0px solid;
    left: -20px;
    width: 20px;
}

div.gt-tree.gt-tree-hr .gt-style-4 li.spouse:not(:first-child):not(:last-child)>.ind:before {
    border-top: 1px solid;
    top: 50%;
    left: -31px;
    height: 0px;
    width: 30px;
}

div.gt-tree.gt-tree-hr .gt-style-4 li.child:not(:first-child):not(:last-child)>ul.family:before {
    width: 21px;
    left: -10px;
    top: 50%;
    height: 0px;
}

div.gt-tree .gt-style-4 li.spouse {
    padding-top: 30px;
}

div.gt-tree.gt-tree-hr .gt-style-4 li.spouse {
    padding-top: 0px;
    padding-left: 30px;
}

div.gt-tree .gt-style-4 li.spouse>.ind {
    border-style: dashed !important;
}



div.gt-tree-mobile .birt-deat,
div.gt-tree-mobile .name {
    display: inline-block;
}

div.gt-tree-mobile ul {
    list-style: none;
    margin: 0 !important;
    margin-left: 10px !important;
}

div.gt-tree-mobile li {
    position: relative;
    margin: 0;
    padding-left: 15px;
}

div.gt-tree-mobile li>div {
    position: relative;
    padding-left: 25px;
}

div.gt-tree-mobile li>div:after {
    content: "";
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: -25px;
    border-top: 1px solid;
    width: 30px;
}

div.gt-tree-mobile li:last-child>div:before {
    content: "";
    position: absolute;
    top: -15px;
    bottom: 50%;
    left: -25px;
    border-left: 1px solid;
}

div.gt-tree-mobile li:before {
    content: "";
    position: absolute;
    top: -15px;
    bottom: 0;
    left: -10px;
    border-left: 1px solid;
}

div.gt-tree-mobile li:last-child:before {
    border-left: 0px solid;
}


div.gt-tree .gt-collapse-family {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    margin-bottom: 0px;
    position: relative;
    text-align: center;
}

div.gt-tree .gt-collapse-family:after {
    content: "";
    position: absolute;
    left: 50%;
}

div.gt-tree.gt-tree-hr .gt-collapsible {
    padding-right: 34px;
}

div.gt-tree.gt-tree-hr .gt-collapse-family {
    display: block;
    position: absolute;
    right: 4px;
    top: 50%;
    margin-top: -15px;
}

div.gt-tree.gt-tree-hr .gt-collapse-family:after {
    left: initial !important;
    top: 50%;
}

div.gt-tree.gt-tree-hr .gt-style-3 .gt-collapse-family {
    right: 4px;
    top: 4px;
    margin-top: 0px;
}

ul.has-ancestor>li {
    display: block !important;
    padding-top: 0 !important;
}

ul.has-ancestor>li:before,
ul.has-ancestor:before {
    display: none !important;
}

ul.has-ancestor>.alter-tree li {
    vertical-align: bottom !important;
}

ul.has-ancestor>.alter-tree li>div.ind {
    display: inline-block !important;
}


ul.has-ancestor>.alter-tree li.parent {
    padding-top: 2px;
    padding-bottom: 2px;
}

.gt-tree-hr ul.has-ancestor>li {
    display: inline-block !important;
    padding-left: 0px !important;
}

.gt-tree-hr ul.has-ancestor ul.parents>li {
    text-align: right;
}

.single-gt-member .gt-member.type-gt-member .wp-post-image {
    display: none !important;
}


.gt-tree-timeline {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.gt-tree-timeline__event {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    margin: 10px 0;
    border: 1px solid #dcd7ca;
    border-radius: 8px;
    margin-left: 6rem;
}

.gt-tree-timeline__event__title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    color: #9251ac;
    letter-spacing: 1.5px;
    padding-left: 6px;
}

.gt-tree-timeline__event__content {
    padding: 10px;
}

.gt-tree-timeline__event__date {
    font-size: 16px;
    font-weight: 600;
    width: 100px;
    text-align: center;
}

.gt-tree-timeline__event__icon {
    border-radius: 8px 0 0 8px;
    border-right: 1px solid #dcd7ca;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    padding: 10px 20px;
}

.gt-tree-timeline__event__icon i {
    position: absolute;
    top: 50%;
    left: -65px;
    font-size: 2.5rem;
    transform: translateY(-50%);
}

.gt-tree-timeline__event__description {
    flex-basis: 60%;
}

.gt-tree-timeline__event:after {
    content: "";
    width: 1px;
    height: 100%;
    background: #dcd7ca;
    position: absolute;
    top: 52%;
    left: -3.5rem;
    z-index: -1;
}

.gt-tree-timeline__event:before {
    content: "";
    width: 5rem;
    height: 5rem;
    position: absolute;
    background: #ffffff;
    border-radius: 100%;
    left: -6rem;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid #dcd7ca;
}

.gt-tree-timeline__event:last-child:after {
    content: none;
}

@media (max-width: 786px) {
    .gt-tree-timeline__event {
        flex-direction: column;
    }

    .gt-tree-timeline__event__icon {
        border-radius: 4px 4px 0 0;
    }
}


.gt-member-gallery-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 10px;
}

.gt-member-gallery-images img {
    max-width: 100%;
    display: block;
}

.gt-member-gallery-images figure {
    margin: 0;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 5px;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.gt-member-gallery-images figure>img {
    border-radius: 2px;
}

.gt-member-gallery-images figure a {
    color: black;
    text-decoration: none;
}

.gt-member-gallery-images figcaption {
    padding: 0.2em 0.5em;
    text-align: center;
}

/* ── Bio tooltip ────────────────────────────────────────────────── */
.ind-cont {
    position: relative;
}

.ftp-bio-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .15);
    padding: 10px 14px;
    width: 220px;
    font-size: 12px;
    line-height: 1.6;
    color: #333;
    text-align: left;
    pointer-events: none;
    white-space: normal;
}

.ftp-bio-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #fff;
}

.ind-cont:hover .ftp-bio-tooltip {
    display: block;
}

/* ── Family Tree Pro – Bio card in tree ──────────────────────── */
.ind .ftp-member-bio {
    font-size: .72em;
    color: #555;
    line-height: 1.4;
    margin: 3px 0 0;
    padding: 3px 5px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    max-height: 52px;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
}

.ind .image img {
    object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════
 * GENEALOGICAL CARD — ftp-card
 * Modern card design: circular photo, gender badge, clean date rows
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Base card overrides ─────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card {
    padding: 0;
    border-radius: 10px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .13);
    background: #fff;
    min-width: 137px;
    max-width: 137px;
    overflow: hidden;
    transition: box-shadow .18s ease, transform .18s ease;
    cursor: pointer;
}

div.gt-tree div.ind.ftp-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transform: translateY(-2px);
    z-index: 20;
}

/* Gender-tinted card header strip (top border) */
div.gt-tree div.ind.ftp-card.M {
    border-top: 4px solid #4a9cbf;
    background: #fff;
}

div.gt-tree div.ind.ftp-card.F {
    border-top: 4px solid #c96b8a;
    background: #fff;
}

div.gt-tree div.ind.ftp-card.H {
    border-top: 4px solid #e8b000 !important;
    background: #fff;
}

/* Remove the legacy flat-colour backgrounds for ftp-card */
div.gt-tree div.ind.ftp-card.M,
div.gt-tree div.ind.ftp-card.F {
    background: #fff !important;
}

/* ── .ind-cont ───────────────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card>.ind-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

/* ── Photo wrap ──────────────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card .ftp-card__photo-wrap {
    position: relative;
    width: 100%;
    padding: 12px 12px 6px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Male card — soft blue tinted photo bg */
div.gt-tree div.ind.ftp-card.M .ftp-card__photo-wrap {
    background: linear-gradient(160deg, #daeef3 0%, #f0f8fb 100%);
}

/* Female card — soft pink tinted photo bg */
div.gt-tree div.ind.ftp-card.F .ftp-card__photo-wrap {
    background: linear-gradient(160deg, #fde0e8 0%, #fff5f7 100%);
}

/* Unknown / highlight */
div.gt-tree div.ind.ftp-card.H .ftp-card__photo-wrap {
    background: linear-gradient(160deg, #fffacd 0%, #fffff0 100%);
}

/* ── Photo inner / circular image ───────────────────────────────── */
div.gt-tree div.ind.ftp-card .ftp-card__photo-inner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    background: #eee;
    flex-shrink: 0;
}

div.gt-tree div.ind.ftp-card .ftp-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Override image-cont size rules for ftp-card */
div.gt-tree div.ind.ftp-card .image-cont {
    width: 54px !important;
    height: 54px !important;
    margin: 0 !important;
}

div.gt-tree div.ind.ftp-card .image-cont>img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ── Gender badge (sits bottom-right of the photo circle) ────────── */
.ftp-card__gender-badge {
    position: absolute;
    bottom: 4px;
    right: calc(50% - 42px);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #fff;
    line-height: 1;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

.ftp-card__gender-badge--m {
    background: #4a9cbf;
}

.ftp-card__gender-badge--f {
    background: #c96b8a;
}

.ftp-card__gender-badge--u {
    background: #888;
}

/* ── Info panel ──────────────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card .ftp-card__info {
    width: 100%;
    padding: 0px 8px;
    text-align: center;
}

/* ── Name ────────────────────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card .ftp-card__name {
    font-size: 12px;
    font-weight: 700;
    color: #222;
    line-height: 1.25;
    margin-bottom: 4px;
    word-break: break-word;
    white-space: normal;
}

div.gt-tree div.ind.ftp-card .ftp-card__name a {
    color: inherit;
    text-decoration: none;
}

div.gt-tree div.ind.ftp-card .ftp-card__name a:hover {
    text-decoration: underline;
    color: #4a9cbf;
}

/* Gender label (inline, shown only when no photo) */
div.gt-tree div.ind.ftp-card .ftp-card__gender-inline {
    display: inline-block;
    font-size: 10px;
    margin-left: 3px;
    opacity: .7;
    vertical-align: middle;
}

/* ── Date rows ───────────────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card .ftp-card__dates {
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, .07);
    padding-top: 4px;
    word-break: initial;
    word-wrap: normal;
}

div.gt-tree div.ind.ftp-card .ftp-card__date-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    color: #555;
    line-height: 1.5;
}

div.gt-tree div.ind.ftp-card .ftp-card__date-icon {
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
}

.ftp-card__date-icon--birt {
    color: #4a9cbf;
}

.ftp-card__date-icon--deat {
    color: #888;
}

div.gt-tree div.ind.ftp-card .ftp-card__date-label {
    font-style: italic;
    opacity: .75;
    flex-shrink: 0;
}

div.gt-tree div.ind.ftp-card .ftp-card__date-value {
    font-weight: 600;
}

/* ── Bio snippet ─────────────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card .ftp-card__bio {
    margin-top: 4px;
    font-size: 9.5px;
    color: #777;
    line-height: 1.4;
    border-top: 1px solid rgba(0, 0, 0, .06);
    padding-top: 4px;
    word-break: break-word;
    white-space: normal;
    text-align: left;
    max-height: 42px;
    overflow: hidden;
}

/* ── Generation label ────────────────────────────────────────────── */
div.gt-tree div.ind.ftp-card .ftp-card__gen {
    font-size: 9px;
    background: rgba(0, 0, 0, .06);
    border: none;
    border-radius: 3px;
    padding: 1px 6px;
    margin: 0 auto 4px;
    width: fit-content;
    display: block;
}

/* ── Highlighted (root member) ───────────────────────────────────── */
div.gt-tree div.ind.ftp-card.H {
    box-shadow: 0 0 0 3px #e8b000, 0 4px 16px rgba(0, 0, 0, .18) !important;
}

/* ── Unknown-gender card (no M/F class) ──────────────────────────── */
div.gt-tree div.ind.ftp-card:not(.M):not(.F) {
    border-top: 4px solid #aaa;
}

div.gt-tree div.ind.ftp-card:not(.M):not(.F) .ftp-card__photo-wrap {
    background: linear-gradient(160deg, #eee 0%, #f8f8f8 100%);
}

/* ── Horizontal layout adjustments ──────────────────────────────── */
div.gt-tree.gt-tree-hr div.ind.ftp-card {
    margin: 3px 0;
}

/* ── Partners/spouse card display ───────────────────────────────── */
div.gt-tree div.partners>div.partner>div.ind.ftp-card {
    margin-top: 6px;
}

/* ── Collapse toggle (centered below card) ───────────────────────── */
div.gt-tree div.ind.ftp-card .gt-collapse-family {
    width: 22px;
    height: 22px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: #fff;
    color: #666;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}





/* ═══════════════════════════════════════════════════════════════════
 * PEDIGREE TREE — gt-style-1 — Top-to-Bottom  (FINAL)
 *
 * Structure (after PHP fix):
 *   ul.ftp-gen-row
 *     li.child.root  (flex column)
 *       div.ftp-family-unit  (one per marriage, position:relative)
 *         div.ftp-couple     [ROOT]──[BAR]──[SPOUSE]
 *         ul.ftp-children    (margin-top: --vg)
 *           li.child.root × N
 *
 * Connectors — no magic numbers, pure relative units:
 *
 *   ftp-couple::after   top:50%, height:50%   → half-couple stem down to couple bottom
 *   ul.ftp-children::before  top:-vg, h:vg    → fills the margin gap upward
 *   li::before          crossbar at top:0
 *   li::after           stub top:0, h:vg
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ───────────────────────────────────────────────── */
.gt-style-1 {
    --ln: #6b7a99;
    --lw: 2px;
    --vg: 52px;
    --hp: 12px;
    --cw: 137px;
}

/* ══ Override global display:table / display:table-cell ══════════ */

/* 1 ─ Generation row */
.gt-style-1 ul.ftp-gen-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
    text-align: left !important;
}

/* 2 ─ Person column */
.gt-style-1 li.child.root {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    padding: 0 var(--hp) !important;
    margin: 0 !important;
    list-style: none !important;
    vertical-align: unset !important;
}

/* 3 ─ Family unit: wraps ONE marriage + its children */
.gt-style-1 div.ftp-family-unit {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    width: 100% !important;
}

/* 4 ─ Couple row */
.gt-style-1 div.ftp-couple {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    /* padding-top: calc(var(--hp) + 6px); */
}

/* 5 ─ Cards: fixed width, zero margin, no shrink */
.gt-style-1 div.ftp-couple div.ind.ftp-card {
    width: var(--cw) !important;
    min-width: var(--cw) !important;
    max-width: var(--cw) !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 5 !important;
    display: block !important;
}

/* 6 ─ Marriage bar: slim line between cards */
.gt-style-1 div.ftp-marriage-bar {
    width: 20px !important;
    min-width: 20px !important;
    height: var(--lw) !important;
    background: var(--ln) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 6 !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 7a ─ STEM PART 1: ftp-couple::after
        Draws from the couple's vertical midpoint (= bar level) down to couple bottom.
        Uses percentage heights so it works for any card height automatically.
        Only drawn when this family-unit has children (.ftp-has-children on parent). */

.gt-style-1 div.ftp-has-children>div.ftp-couple::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--lw) !important;
    height: 50% !important;
    background: var(--ln) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 7b ─ STEM PART 2: ul.ftp-children::before
        Draws UP through the margin-top gap, connecting to part 1 at couple bottom. */
.gt-style-1 ul.ftp-children::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: calc(-1 * var(--vg)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--lw) !important;
    height: var(--vg) !important;
    background: var(--ln) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* 8 ─ Children row */
.gt-style-1 ul.ftp-children {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: var(--vg) !important;
    position: relative !important;
    text-align: left !important;
}

/* 9 ─ Horizontal crossbar: each child li draws its half */
.gt-style-1 ul.ftp-children>li.child.root::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--lw) !important;
    background: var(--ln) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

.gt-style-1 ul.ftp-children>li.child.root:first-child::before {
    left: 50% !important;
}

.gt-style-1 ul.ftp-children>li.child.root:last-child::before {
    right: 50% !important;
}

.gt-style-1 ul.ftp-children>li.child.root:only-child::before {
    display: none !important;
}

/* 10 ─ Vertical stub: crossbar down into each child card */
.gt-style-1 ul.ftp-children>li.child.root {
    padding-top: var(--vg) !important;
}

.gt-style-1 ul.ftp-children>li.child.root::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--lw) !important;
    height: calc(var(--cw) + 6px) !important;
    background: var(--ln) !important;
    z-index: 3 !important;
    pointer-events: none !important;
}

/* 11 ─ Ancestor section */
.gt-style-1 ul.parents {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-end !important;
    list-style: none !important;
    padding: 0 !important;
    padding-bottom: var(--vg) !important;
    margin: 0 auto !important;
    position: relative !important;
    text-align: left !important;
}

.gt-style-1 ul.parents>li.parent {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 var(--hp) !important;
    margin: 0 !important;
    position: relative !important;
    list-style: none !important;
    vertical-align: unset !important;
}

.gt-style-1 ul.parents>li.parent>div.ind::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: calc(-1 * var(--vg)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--lw) !important;
    height: var(--vg) !important;
    background: var(--ln) !important;
    z-index: 1 !important;
}

.gt-style-1 ul.parents>li.parent::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--lw) !important;
    background: var(--ln) !important;
}

.gt-style-1 ul.parents>li.parent:first-child::after {
    left: 50% !important;
}

.gt-style-1 ul.parents>li.parent:last-child::after {
    right: 50% !important;
}

.gt-style-1 ul.parents>li.parent:only-child::after {
    display: none !important;
}

/* 12 ─ Horizontal layout (gt-tree-hr) */
div.gt-tree.gt-tree-hr .gt-style-1 div.ftp-couple {
    flex-direction: column !important;
}

div.gt-tree.gt-tree-hr .gt-style-1 div.ftp-marriage-bar {
    width: var(--lw) !important;
    height: 24px !important;
}

div.gt-tree.gt-tree-hr .gt-style-1 div.ftp-has-children>div.ftp-couple::after,
div.gt-tree.gt-tree-hr .gt-style-1 ul.ftp-children::before,
div.gt-tree.gt-tree-hr .gt-style-1 ul.ftp-children>li.child.root::before,
div.gt-tree.gt-tree-hr .gt-style-1 ul.ftp-children>li.child.root::after {
    display: none !important;
}

div.gt-tree.gt-tree-hr .gt-style-1 ul.ftp-children {
    flex-direction: column !important;
    padding-left: var(--vg) !important;
    margin-top: 0 !important;
}

/* 13 ─ Bio hidden on card face */
div.gt-tree div.ind.ftp-card .ftp-card__bio,
div.gt-tree div.ind.ftp-card .ftp-member-bio {
    display: none !important;
}

/* 14 ─ Card polish */
.gt-style-1 div.ftp-couple div.ind.ftp-card {
    border: none !important;
    border-top: 4px solid #ddd !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.gt-style-1 div.ftp-couple div.ind.ftp-card.M {
    border-top-color: #4a9cbf !important;
}

.gt-style-1 div.ftp-couple div.ind.ftp-card.F {
    border-top-color: #c96b8a !important;
}

.gt-style-1 div.ftp-couple div.ind.ftp-card.H {
    border-top-color: #e8b000 !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * FAMILY TREE PRO — CONSISTENT MODERN GREEN THEME
 *
 * Visual-only overrides:
 * - Keeps existing tree structure and connector calculations intact.
 * - Standardizes colors, borders, shadows, radii, spacing and typography.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
    --ft-primary: #2e7d5b;
    --ft-primary-dark: #25694c;
    --ft-primary-light: #eaf5ef;
    --ft-primary-soft: #f4faf7;

    --ft-text: #1f2937;
    --ft-text-secondary: #64748b;
    --ft-text-muted: #94a3b8;

    --ft-border: #dce7e1;
    --ft-border-dark: #c7d8cf;

    --ft-surface: #ffffff;
    --ft-background: #f7faf8;

    --ft-male: #4f8fa8;
    --ft-male-bg: #eef7fa;

    --ft-female: #b86b83;
    --ft-female-bg: #fcf1f4;

    --ft-unknown: #8a8f98;
    --ft-unknown-bg: #f3f4f6;

    --ft-radius-sm: 6px;
    --ft-radius: 10px;
    --ft-radius-lg: 14px;

    --ft-shadow: 0 2px 8px rgba(31, 41, 55, 0.08);
    --ft-shadow-hover: 0 8px 24px rgba(31, 41, 55, 0.13);

    --ft-transition: 180ms ease;
}


/* ═══════════════════════════════════════════════════════════════════
 * TREE CONTAINER
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-container {
    color: var(--ft-text);
}

div.gt-content {
    background-color: #ffffff !important;
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-lg);
    background: var(--ft-surface);
}

div.gt-tree {
    background: var(--ft-background);
    border-radius: var(--ft-radius-lg);
    padding: 24px;
}


/* ═══════════════════════════════════════════════════════════════════
 * ZOOM CONTROLS
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-container .gt-zoom-contorl button {
    min-width: 34px;
    min-height: 34px;

    padding: 6px 9px;

    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);

    background: var(--ft-surface);
    color: var(--ft-text);

    box-shadow: var(--ft-shadow);

    transition:
        background var(--ft-transition),
        color var(--ft-transition),
        border-color var(--ft-transition),
        box-shadow var(--ft-transition);
}

div.gt-container .gt-zoom-contorl button:hover {
    background: var(--ft-primary-light);
    border-color: var(--ft-primary);
    color: var(--ft-primary-dark);
    box-shadow: var(--ft-shadow-hover);
}


/* ═══════════════════════════════════════════════════════════════════
 * TREE DESIGN TOKENS / CONNECTORS
 * ═══════════════════════════════════════════════════════════════════ */

.gt-style-1 {
    --ln: #2e7d5b;
    --lw: 2px;
    --vg: 52px;
    --hp: 12px;
    --cw: 137px;
}


/* ═══════════════════════════════════════════════════════════════════
 * MEMBER CARD  — fixed size, uniform layout
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card {
    padding: 0;

    /* Fixed dimensions — every card same size regardless of content */
    width: 137px;
    min-width: 137px;
    max-width: 137px;
    height: 184px;
    min-height: 184px;
    max-height: 184px;

    border: 1px solid var(--ft-border);
    border-top: 4px solid var(--ft-primary);

    border-radius: var(--ft-radius);
    background: var(--ft-surface) !important;
    box-shadow: var(--ft-shadow);
    overflow: hidden;
    cursor: pointer;

    transition:
        transform var(--ft-transition),
        box-shadow var(--ft-transition),
        border-color var(--ft-transition);
}

div.gt-tree div.ind.ftp-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ft-shadow-hover);
    border-color: var(--ft-primary);
    z-index: 20;
}

/* ── Gender top-border accents ─────────────────────────────────── */
div.gt-tree div.ind.ftp-card.M          { border-top-color: var(--ft-male)    !important; background: var(--ft-surface) !important; }
div.gt-tree div.ind.ftp-card.F          { border-top-color: var(--ft-female)  !important; background: var(--ft-surface) !important; }
div.gt-tree div.ind.ftp-card.H          { border-top-color: var(--ft-primary) !important; background: var(--ft-surface) !important; }
div.gt-tree div.ind.ftp-card:not(.M):not(.F) { border-top-color: var(--ft-unknown) !important; }


/* ═══════════════════════════════════════════════════════════════════
 * CARD INNER LAYOUT — flex column, full height
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card > .ind-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 0;
}


/* ═══════════════════════════════════════════════════════════════════
 * PHOTO AREA — fixed height strip
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card .ftp-card__photo-wrap {
    position: relative;
    width: 100%;
    height: 72px;
    min-height: 72px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 12px 6px;
    background: var(--ft-primary-soft);
}

div.gt-tree div.ind.ftp-card.M .ftp-card__photo-wrap          { background: var(--ft-male-bg);    }
div.gt-tree div.ind.ftp-card.F .ftp-card__photo-wrap          { background: var(--ft-female-bg);  }
div.gt-tree div.ind.ftp-card.H .ftp-card__photo-wrap,
div.gt-tree div.ind.ftp-card:not(.M):not(.F) .ftp-card__photo-wrap { background: var(--ft-unknown-bg); }

/* Circular photo */
div.gt-tree div.ind.ftp-card .ftp-card__photo-inner {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    background: #e5e7eb;
    box-shadow: 0 2px 8px rgba(31,41,55,.15);
    flex-shrink: 0;
}

div.gt-tree div.ind.ftp-card .ftp-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

div.gt-tree div.ind.ftp-card .image-cont       { width: 54px !important; height: 54px !important; margin: 0 !important; }
div.gt-tree div.ind.ftp-card .image-cont > img { width: 100% !important; height: 100% !important; object-fit: cover !important; }


/* ═══════════════════════════════════════════════════════════════════
 * GENDER BADGE
 * ═══════════════════════════════════════════════════════════════════ */

.ftp-card__gender-badge {
    position: absolute;
    bottom: 4px;
    right: calc(50% - 35px);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    border: 2px solid #fff;
    line-height: 1;
    color: #fff;
    box-shadow: 0 2px 5px rgba(31,41,55,.18);
}

.ftp-card__gender-badge--m { background: var(--ft-male);    }
.ftp-card__gender-badge--f { background: var(--ft-female);  }
.ftp-card__gender-badge--u { background: var(--ft-unknown); }


/* ═══════════════════════════════════════════════════════════════════
 * INFO PANEL — fills remaining height, flex column
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card .ftp-card__info {
    width: 100%;
    flex: 1;                  /* fills whatever height remains */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  /* vertically centre name + dates */
    padding: 8px 10px 10px;
    text-align: center;
    overflow: hidden;
}


/* ── Name ───────────────────────────────────────────────────────── */

div.gt-tree div.ind.ftp-card .ftp-card__name {
    width: 100%;
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--ft-text);
    word-break: break-word;
    white-space: normal;
}

div.gt-tree div.ind.ftp-card .ftp-card__name a           { color: inherit; text-decoration: none; }
div.gt-tree div.ind.ftp-card .ftp-card__name a:hover     { color: var(--ft-primary); }

div.gt-tree div.ind.ftp-card .ftp-card__gender-inline {
    display: inline-block;
    font-size: 10px;
    margin-left: 3px;
    color: var(--ft-text-muted);
    vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════════
 * DATE ROWS — Born / Died with clear labels
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card .ftp-card__dates {
    width: 100%;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--ft-border);
}

div.gt-tree div.ind.ftp-card .ftp-card__date-row {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    font-size: 10px;
    color: var(--ft-text-secondary);
    line-height: 1.6;
    padding: 0 2px;
}

/* Icon column — fixed width keeps values aligned */
div.gt-tree div.ind.ftp-card .ftp-card__date-icon {
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
    width: 12px;
    text-align: center;
}

.ftp-card__date-icon--birt { color: var(--ft-primary); }
.ftp-card__date-icon--deat { color: var(--ft-text-muted); }

/* Label — "Born" / "Died" */
div.gt-tree div.ind.ftp-card .ftp-card__date-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--ft-text-muted);
    flex-shrink: 0;
    min-width: 26px;
}

/* Value — the actual date string */
div.gt-tree div.ind.ftp-card .ftp-card__date-value {
    font-weight: 600;
    color: var(--ft-text);
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════
 * BIO
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card .ftp-card__bio {
    margin-top: 5px;

    padding-top: 5px;

    border-top: 1px solid var(--ft-border);

    font-size: 9.5px;

    color: var(--ft-text-secondary);

    line-height: 1.45;

    text-align: left;

    max-height: 42px;

    overflow: hidden;

    word-break: break-word;
    white-space: normal;
}


/* Face of tree cards should stay clean */

div.gt-tree div.ind.ftp-card .ftp-card__bio,
div.gt-tree div.ind.ftp-card .ftp-member-bio {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
 * GENERATION LABEL
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card .ftp-card__gen {
    display: block;

    width: fit-content;

    margin: 0 auto 5px;

    padding: 2px 7px;

    border: 1px solid var(--ft-border);

    border-radius: 20px;

    background: var(--ft-primary-light);

    color: var(--ft-primary-dark);

    font-size: 9px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
 * ROOT / HIGHLIGHTED MEMBER
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card.H {
    border-top-color: var(--ft-primary) !important;

    box-shadow:
        0 0 0 3px rgba(46, 125, 91, 0.15),
        0 6px 20px rgba(46, 125, 91, 0.16) !important;
}


/* ═══════════════════════════════════════════════════════════════════
 * COLLAPSE BUTTON
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.ftp-card .gt-collapse-family {
    width: 22px;
    height: 22px;

    margin: 0 auto 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--ft-border-dark);

    border-radius: 50%;

    background: var(--ft-surface);
    color: var(--ft-text-secondary);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow: none;

    transition:
        background var(--ft-transition),
        color var(--ft-transition),
        border-color var(--ft-transition);
}

div.gt-tree div.ind.ftp-card .gt-collapse-family:hover {
    background: var(--ft-primary);
    border-color: var(--ft-primary);
    color: #fff;
}


/* ═══════════════════════════════════════════════════════════════════
 * COUPLE / SPOUSE
 * ═══════════════════════════════════════════════════════════════════ */

.gt-style-1 div.ftp-couple div.ind.ftp-card {
    border: 1px solid var(--ft-border) !important;
    border-top: 4px solid var(--ft-primary) !important;

    border-radius: var(--ft-radius) !important;

    background: var(--ft-surface) !important;

    box-shadow: var(--ft-shadow) !important;
}

.gt-style-1 div.ftp-couple div.ind.ftp-card.M {
    border-top-color: var(--ft-male) !important;
}

.gt-style-1 div.ftp-couple div.ind.ftp-card.F {
    border-top-color: var(--ft-female) !important;
}

.gt-style-1 div.ftp-couple div.ind.ftp-card.H {
    border-top-color: var(--ft-primary) !important;
}


/* Marriage connector */

.gt-style-1 div.ftp-marriage-bar {
    background: var(--ft-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════
 * LEGACY GENDER COLORS — SOFT OVERRIDES
 *
 * These prevent old flat blue/pink/yellow backgrounds from leaking
 * into the modern card design.
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree div.ind.F {
    background: var(--ft-female-bg);
}

div.gt-tree div.ind.M {
    background: var(--ft-male-bg);
}

div.gt-tree div.ind.H {
    background: var(--ft-primary-light) !important;
}

div.gt-tree.gt-style-3-alt div.ind.F>.ind-cont {
    background: var(--ft-female-bg);
}

div.gt-tree.gt-style-3-alt div.ind.M>.ind-cont {
    background: var(--ft-male-bg);
}

div.gt-tree.gt-style-3-alt div.ind.H>.ind-cont {
    background: var(--ft-primary-light) !important;
}


/* ═══════════════════════════════════════════════════════════════════
 * GENERATION LABEL OUTSIDE CARD
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree .gt-generation {
    background: var(--ft-surface);

    border: 1px solid var(--ft-border);

    border-radius: 20px;

    color: var(--ft-primary-dark);

    padding: 4px 10px;

    box-shadow: var(--ft-shadow);

    font-size: 11px;
    font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
 * POPOVER / DETAIL PANEL
 * ═══════════════════════════════════════════════════════════════════ */

.gt-popover {
    background: var(--ft-surface);

    border: 1px solid var(--ft-border);

    border-radius: var(--ft-radius-lg);

    box-shadow:
        0 12px 35px rgba(31, 41, 55, 0.14);

    padding: 24px;

    color: var(--ft-text);
}

.gt-popover h3 {
    color: var(--ft-text);

    border-bottom: 1px solid var(--ft-border);

    padding-bottom: 12px !important;

    margin-bottom: 8px !important;
}


/* ═══════════════════════════════════════════════════════════════════
 * BIO TOOLTIP
 * ═══════════════════════════════════════════════════════════════════ */

.ftp-bio-tooltip {
    display: none;

    position: absolute;

    bottom: calc(100% + 10px);
    left: 50%;

    transform: translateX(-50%);

    z-index: 9999;

    width: 220px;
    max-width: 220px;

    padding: 11px 14px;

    background: var(--ft-surface);

    border: 1px solid var(--ft-border);

    border-radius: var(--ft-radius);

    box-shadow:
        0 8px 24px rgba(31, 41, 55, 0.14);

    color: var(--ft-text);

    font-size: 12px;
    line-height: 1.6;

    text-align: left;

    pointer-events: none;

    white-space: normal;
}

.ftp-bio-tooltip::after {
    content: "";

    position: absolute;

    top: 100%;
    left: 50%;

    transform: translateX(-50%);

    border: 7px solid transparent;

    border-top-color: var(--ft-surface);
}

.ind-cont:hover .ftp-bio-tooltip {
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════
 * TIMELINE
 * ═══════════════════════════════════════════════════════════════════ */

.gt-tree-timeline__event {
    margin: 10px 0 20px;
    margin-left: 6rem;

    position: relative;

    display: flex;

    border: 1px solid var(--ft-border);

    border-radius: var(--ft-radius);

    background: var(--ft-surface);

    box-shadow: var(--ft-shadow);

    transition:
        transform var(--ft-transition),
        box-shadow var(--ft-transition);
}

.gt-tree-timeline__event:hover {
    transform: translateY(-2px);
    box-shadow: var(--ft-shadow-hover);
}

.gt-tree-timeline__event__title {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;

    color: var(--ft-primary);

    letter-spacing: .3px;

    padding-left: 6px;
}

.gt-tree-timeline__event__icon {
    border-radius: var(--ft-radius) 0 0 var(--ft-radius);

    border-right: 1px solid var(--ft-border);

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 2rem;

    padding: 10px 20px;

    background: var(--ft-primary-soft);
}

.gt-tree-timeline__event__icon i {
    color: var(--ft-primary);
}

.gt-tree-timeline__event:after {
    background: var(--ft-primary);
}

.gt-tree-timeline__event:before {
    background: var(--ft-surface);
    border: 2px solid var(--ft-primary);
}


/* ═══════════════════════════════════════════════════════════════════
 * MEMBER GALLERY
 * ═══════════════════════════════════════════════════════════════════ */

.gt-member-gallery-images {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-auto-flow: dense;

    gap: 14px;
}

.gt-member-gallery-images img {
    max-width: 100%;
    display: block;
}

.gt-member-gallery-images figure {
    margin: 0;

    display: grid;

    grid-template-rows: 1fr auto;

    padding: 6px;

    background: var(--ft-surface);

    border: 1px solid var(--ft-border);

    border-radius: var(--ft-radius);

    box-shadow: var(--ft-shadow);

    overflow: hidden;
}

.gt-member-gallery-images figure>img {
    border-radius: var(--ft-radius-sm);
}

.gt-member-gallery-images figure a {
    color: var(--ft-text);
    text-decoration: none;
}

.gt-member-gallery-images figcaption {
    padding: 7px 6px;

    text-align: center;

    color: var(--ft-text-secondary);

    font-size: 12px;
}


/* ═══════════════════════════════════════════════════════════════════
 * MOBILE TREE
 * ═══════════════════════════════════════════════════════════════════ */

div.gt-tree-mobile {
    color: var(--ft-text);
}

div.gt-tree-mobile li>div {
    color: var(--ft-text);
}

div.gt-tree-mobile li>div:after,
div.gt-tree-mobile li:last-child>div:before,
div.gt-tree-mobile li:before {
    border-color: var(--ft-primary);
}


/* ═══════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 786px) {

    div.gt-tree {
        padding: 14px;
    }

    .gt-tree-timeline__event {
        margin-left: 4rem;
    }

    .gt-tree-timeline__event__icon {
        padding: 10px 14px;
    }

    .gt-member-gallery-images {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {

    div.gt-tree {
        padding: 10px;
    }

    .gt-member-gallery-images {
        grid-template-columns: 1fr 1fr;
    }

    .gt-tree-timeline__event {
        margin-left: 3rem;
    }
}