#pt-tailwind.pt-tree-page {
    margin: 0;
    padding: 0;
    background: #f0faf7;
    color: #17243c;
    font-family: Poppins, Open Sans, sans-serif;
    line-height: 1.5
}

#pt-tailwind *,
#pt-tailwind :after,
#pt-tailwind :before {
    box-sizing: border-box
}

#pt-tailwind button,
#pt-tailwind input,
#pt-tailwind select,
#pt-tailwind textarea {
    font: inherit
}

#pt-tailwind button {
    cursor: pointer
}

#pt-tailwind a:focus-visible,
#pt-tailwind button:focus-visible {
    outline: 3px solid #6ee7b7;
    outline-offset: 4px
}

#pt-tailwind a {
    color: inherit;
    text-decoration: none
}

#pt-tailwind .pt-header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    width: auto;
    height: 78px;
    margin: 0;
    padding: 12px 32px;
    z-index: 40;
    box-shadow: 0 2px 12px #17243c0a
}

#pt-tailwind .pt-header-menu .pt-logo {
    position: static;
    float: none;
    flex: 0 0 148px;
    width: 148px;
    height: 54px;
    padding: 0;
    line-height: normal;
    background: #fff;
    text-align: center
}

#pt-tailwind .pt-header-menu .pt-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 54px;
    -o-object-fit: contain;
    object-fit: contain
}

#pt-tailwind .tree-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    font-weight: 700;
    color: #152238;
    font-size: 12px
}

#pt-tailwind .tree-brand>i {
    color: #0cbd83;
    font-size: 31px
}

#pt-tailwind .tree-brand b {
    display: block;
    color: #0cbd83
}

#pt-tailwind .pt-header-menu .pt-search {
    width: min(36vw, 550px);
    min-width: 0;
    flex: 1 1 220px;
    max-width: 550px;
    margin: 0;
    position: relative
}

#pt-tailwind .pt-header-menu .pt-search input {
    border-radius: 9999px;
    border-width: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249/var(--tw-bg-opacity, 1));
    font-size: .875rem;
    line-height: 1.25rem;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 12px 22px;
    padding-inline-start: 46px
}

#pt-tailwind .pt-header-menu .pt-search button {
    color: #7a879d;
    background: transparent;
    border: 0;
    margin: 0;
    inset-inline-start: 12px;
    inset-inline-end: auto;
    top: 50%;
    transform: translateY(-50%)
}

#pt-tailwind .pt-header-menu .pt-list-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    float: none
}

#pt-tailwind .pt-header-menu .pt-list-menu>* {
    margin: 0;
    float: none
}

#pt-tailwind .pt-header-menu .pt-list-menu>span {
    font-size: 13px;
    font-weight: 600
}

#pt-tailwind .pt-header-menu .pt-new-tree a {
    border-radius: 9999px;
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1));
    padding: 12px 20px;
    font-size: 12px
}

#pt-tailwind .pt-header-menu .pt-list-menu .pt-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden
}

#pt-tailwind .pt-nav-menu {
    position: fixed;
    inset-block: 78px 0;
    inset-inline: 0 auto;
    width: 96px;
    height: auto;
    padding: 18px 12px;
    background: #fff;
    border: 0;
    margin: 0;
    z-index: 39;
    overflow-y: auto;
    box-shadow: 3px 0 10px #17243c0b;
    scrollbar-width: none;
    -ms-overflow-style: none
}

#pt-tailwind[dir=rtl] .pt-nav-menu {
    box-shadow: -3px 0 10px #17243c0b
}

#pt-tailwind .pt-nav-menu::-webkit-scrollbar {
    display: none
}

#pt-tailwind .tree .pt-options {
    display: none
}

#pt-tailwind .tree-menu-trigger {
    position: absolute;
    inset-inline-end: 4px;
    top: 5px;
    width: 18px;
    min-width: 18px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    z-index: 6
}

#pt-tailwind .tree-menu-trigger:hover {
    background: #e5f8ef;
    color: #078763
}

#pt-tailwind .tree-action-menu {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    position: fixed;
    z-index: 2000;
    width: 176px;
    max-width: calc(100vw - 16px);
    max-height: min(420px, calc(100dvh - 16px));
    overflow-y: auto;
    padding: 4px;
    border: 1px solid #e1eee7
}

#pt-tailwind .tree-action-menu[hidden] {
    display: none
}

#pt-tailwind .tree-action-menu .tree-menu-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 30px;
    height: auto;
    margin: 0;
    padding: 6px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #36574b;
    text-align: start;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 500;
    cursor: pointer;
    white-space: normal
}

#pt-tailwind .tree-action-menu .tree-menu-action:focus-visible,
#pt-tailwind .tree-action-menu .tree-menu-action:hover {
    background: #e8f9f0;
    color: #078763
}

#pt-tailwind .tree-action-menu .tree-menu-action i,
#pt-tailwind .tree-action-menu .tree-menu-action svg {
    width: 16px;
    flex-shrink: 0;
    font-size: 12px
}

#pt-tailwind .tree-action-menu .tree-menu-action .pt-em,
#pt-tailwind .tree-action-menu .tree-menu-action em {
    position: static;
    visibility: visible;
    opacity: 1;
    width: auto;
    font-style: normal;
    color: inherit;
    background: none
}

#pt-tailwind .pt-nav-menu ul {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none
}

#pt-tailwind .pt-nav-menu ul li {
    float: none;
    width: 100%
}

#pt-tailwind .pt-nav-menu ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 1rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139/var(--tw-text-opacity, 1));
    height: auto;
    min-height: 68px;
    width: 100%;
    padding: 10px 4px;
    font-size: 22px;
    background: transparent
}

#pt-tailwind .pt-nav-menu ul li a:after {
    display: none
}

#pt-tailwind .pt-nav-menu ul li a b {
    display: block;
    position: static;
    width: auto;
    min-width: 0;
    height: auto;
    font: 500 10px/1.4 Poppins, sans-serif;
    padding: 0;
    margin: 0;
    background: none;
    color: inherit;
    opacity: 1;
    visibility: visible;
    white-space: normal;
    text-align: center;
    box-shadow: none;
    border-radius: 0;
    z-index: auto
}

#pt-tailwind .pt-nav-menu ul li a.tree-nav-active {
    --tw-bg-opacity: 1;
    background-color: rgb(16 185 129/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

#pt-tailwind .pt-nav-menu ul li a:hover {
    background: #e6faf1;
    color: #059669
}

#pt-tailwind .pt-wrapper {
    width: auto;
    max-width: none;
    margin: 78px 0 0;
    margin-inline-start: 96px;
    padding: 0;
    background: transparent;
    min-height: calc(100dvh - 78px)
}

#pt-tailwind .ads1:empty {
    display: none
}

#pt-tailwind .tree-workspace {
    position: relative;
    min-height: calc(100dvh - 78px);
    padding: 32px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: radial-gradient(ellipse at 80% 95%, #d8f4e55c, transparent 45%), #f0faf7;
    overflow: hidden
}

#pt-tailwind .tree-workspace:after,
#pt-tailwind .tree-workspace:before {
    content: "";
    position: absolute;
    width: 160px;
    height: 320px;
    background: radial-gradient(ellipse at 65% 20%, #bfebdc70 0 15%, transparent 16%), radial-gradient(ellipse at 30% 45%, #bfebdc60 0 19%, transparent 20%), radial-gradient(ellipse at 75% 70%, #bfebdc60 0 16%, transparent 17%);
    inset-block-end: 12%;
    pointer-events: none
}

#pt-tailwind .tree-workspace:before {
    inset-inline-start: -70px;
    transform: rotate(-20deg)
}

#pt-tailwind .tree-workspace:after {
    inset-inline-end: -75px;
    transform: rotate(20deg)
}

#pt-tailwind .tree-heading {
    position: relative;
    z-index: 2
}

#pt-tailwind .tree-heading-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    font-size: 25px;
    box-shadow: 0 5px 20px #10b98118
}

#pt-tailwind .tree-workspace .pt-details {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    position: static;
    padding: 0
}

#pt-tailwind .tree-workspace .pt-details>a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(30 41 59/var(--tw-text-opacity, 1));
    margin: 0;
    height: 44px;
    padding: 10px 18px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid #e5eee9;
    box-shadow: 0 4px 15px #18372c05;
    cursor: pointer
}

#pt-tailwind .tree-workspace .pt-details .pt-edit {
    color: #3480f7;
    border-color: #aacbff
}

#pt-tailwind {
    background: #0cbd83;
    border-color: #0cbd83;
    color: #fff;
    position: relative;
    margin: 0;
    order: -1;
    z-index: 20;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 10px 40px #20392f20
}

#pt-tailwind .tree-workspace>.pt-sm {
    height: calc(100dvh - 235px);
    max-height: none;
    margin: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    position: relative;
    padding: 45px 0 70px
}

#pt-tailwind #div {
    width: -moz-max-content;
    width: max-content;
    min-width: 100%;
    transform-origin: center center;
    padding: 12px 35px 45px
}

#pt-tailwind .tree>ul {
    justify-content: center;
    margin: 0
}

#pt-tailwind .tree>ul>li:first-child {
    padding-bottom: 10px
}

#pt-tailwind .tree ul {
    margin: 0;
    padding-top: 38px
}

#pt-tailwind .tree>ul {
    padding-top: 14px
}

#pt-tailwind .tree ul li {
    padding: 38px 18px 0
}

#pt-tailwind .tree ul li:only-child {
    padding-top: 0
}

#pt-tailwind .tree ul li.tree-family-group-start {
    margin-inline-start: 24px
}

#pt-tailwind .tree ul li:after,
#pt-tailwind .tree ul li:before,
#pt-tailwind .tree ul ul:before {
    border-color: #354355;
    border-width: 1.5px;
    height: 38px
}

#pt-tailwind .tree ul li>a {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42/var(--tw-text-opacity, 1));
    display: inline-block;
    vertical-align: top;
    width: 138px;
    min-width: 138px;
    min-height: 0;
    height: auto;
    padding: 16px 10px 14px;
    margin: 0 8px;
    border: 1px solid #fff;
    box-shadow: 0 8px 25px #244b3a07;
    text-align: center;
    white-space: normal
}

#pt-tailwind .tree ul li>a:focus-within,
#pt-tailwind .tree ul li>a:hover {
    background: #edfff6;
    border-color: #35c895;
    color: #17243c
}

#pt-tailwind .tree a strong {
    color: #17243c;
    border: 0;
    margin-top: 10px;
    font: 600 12px/1.45 Poppins, sans-serif;
    overflow-wrap: anywhere
}

#pt-tailwind .tree a .pt-thumb,
#pt-tailwind .tree a.exp .pt-thumb,
#pt-tailwind .tree a.partner .pt-thumb {
    width: 88px;
    height: 88px;
    margin: -28px auto 0;
    border: 6px solid #fff;
    border-radius: 50%;
    background: #f8e7dd;
    box-shadow: none
}

#pt-tailwind .tree a .pt-thumb img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 0
}

#pt-tailwind .tree a .pt-thumb.tree-initials {
    display: grid;
    place-items: center;
    color: #54746a;
    font-size: 28px;
    font-weight: 600;
    background: #dcf4e9
}

#pt-tailwind .tree a .pt-options {
    inset-inline-start: -20px;
    inset-inline-end: auto;
    background: #fff;
    border-radius: 9px;
    box-shadow: 0 3px 15px #173c3020
}

#pt-tailwind .tree a .pt-options b {
    width: 27px;
    height: 30px;
    line-height: 30px;
    color: #3c6558
}

#pt-tailwind .tree a:focus-within .pt-options {
    visibility: visible;
    opacity: 1
}

#pt-tailwind .tree a.partner:after,
#pt-tailwind .tree a.partner:before {
    border-color: #354355
}

#pt-tailwind .tree li>a.partner.exp:before,
#pt-tailwind .tree li>a.partner:not(.hid):not(.exp):after {
    content: "\2665";
    position: absolute;
    top: 42px;
    inset-inline-end: -22px;
    width: 26px;
    height: 22px;
    line-height: 22px;
    color: #f43f6c;
    background: #f0faf7;
    font-size: 20px;
    border-block: 0;
    z-index: 4
}

#pt-tailwind .tree li>a.partner.exp:before {
    inset-inline-start: -22px;
    inset-inline-end: auto
}

#pt-tailwind .tree a.exp {
    background: #fff;
    color: #17243c
}

#pt-tailwind .tree .pt-v2-spouse-line {
    position: absolute;
    inset-inline-start: -18px;
    top: 42px;
    width: 18px;
    border-top: 1.5px solid #354355
}

#pt-tailwind .tree .tree-spouse-row {
    white-space: nowrap;
    overflow: visible
}

#pt-tailwind .tree .tree-spouse-row>a {
    vertical-align: top;
    position: relative;
    margin-inline: 14px
}

#pt-tailwind .tree .tree-spouse-row>a .pt-v2-spouse-line,
#pt-tailwind .tree .tree-spouse-row>a.partner:after,
#pt-tailwind .tree .tree-spouse-row>a.partner:before,
#pt-tailwind .tree .tree-spouse-row>a[hidden],
#pt-tailwind .tree .tree-spouse-row>ul:before,
#pt-tailwind .tree .tree-spouses-toggle[hidden] {
    display: none
}

#pt-tailwind .tree .tree-marriage-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1
}

#pt-tailwind .tree .tree-marriage-lines path {
    stroke: #354355;
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round
}

#pt-tailwind .tree .tree-parent-linked:after,
#pt-tailwind .tree .tree-parent-linked:before {
    display: none
}

#pt-tailwind .tree li>a {
    position: relative
}

#pt-tailwind .tree li>a:has(.pt-dead) {
    padding-bottom: 34px
}

#pt-tailwind .tree a .pt-dead {
    top: auto;
    bottom: 7px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: -moz-max-content;
    width: max-content;
    max-width: calc(100% - 16px);
    padding: 1px 7px;
    height: auto;
    line-height: 16px;
    font-size: 9px;
    background: #edf0f3;
    color: #657184;
    border-radius: 6px
}

#pt-tailwind .tree .tree-spouses-toggle {
    display: inline-block;
    vertical-align: top;
    margin: 0 8px;
    width: 110px;
    min-height: 110px;
    padding: 18px 10px;
    border: 1px dashed #8dddc1;
    border-radius: 16px;
    background: #f1fff9;
    color: #079e70;
    white-space: normal;
    font-size: 12px;
    cursor: pointer;
    position: relative;
    z-index: 2
}

#pt-tailwind .tree a.partner.hid {
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0
}

#pt-tailwind .tree a.pt-you {
    border-color: #20bf89;
    background: #edfff6
}

#pt-tailwind .tree .pt-emm {
    display: none
}

#pt-tailwind .pt-spouse-parents,
#pt-tailwind .pt-v2-marriages {
    display: block;
    margin-top: 7px
}

#pt-tailwind .pt-spouse-parents small,
#pt-tailwind .pt-v2-marriages small {
    display: block;
    font-size: 9px;
    line-height: 1.6;
    color: #6b7b8e
}

#pt-tailwind .tree .pt-v2-marriages strong {
    font-size: 10px;
    font-weight: 500;
    margin: 5px 0
}

#pt-tailwind .tree .btn-sm {
    display: inline-block;
    padding: 3px 5px;
    font-size: 8px;
    border: 0;
    border-radius: 5px;
    background: #eff8f3;
    color: #168866;
    margin: 3px 1px 0;
    white-space: normal
}

#pt-tailwind .tree-navigation {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: absolute;
    inset-inline-start: 32px;
    bottom: 24px;
    z-index: 3
}

#pt-tailwind .tree-navigation button {
    border-radius: .75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(30 41 59/var(--tw-text-opacity, 1));
    width: 46px;
    height: 46px;
    font-size: 16px;
    border: 1px solid #e8f0ec;
    box-shadow: 0 5px 20px #1f3a3208
}

#pt-tailwind .tree-navigation button:hover {
    background: #dbf8eb
}

#pt-tailwind .tree-zoom-label {
    font-size: 11px;
    color: #7b8b83;
    margin-inline-start: 7px
}

#pt-tailwind .tree-navigation-hint {
    position: absolute;
    inset-inline-end: 32px;
    bottom: 28px;
    font-size: 11px;
    color: #8ba399
}

#pt-tailwind .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    overflow: auto;
    padding: 35px 16px;
    background: #122e2859;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

#pt-tailwind .modal.show {
    display: block
}

#pt-tailwind .modal-dialog {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 20px auto
}

#pt-tailwind .modal-dialog.modal-xl {
    max-width: 1150px
}

#pt-tailwind .modal-content {
    border-radius: 1rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity, 1));
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
    --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    overflow: hidden;
    position: relative
}

#pt-tailwind .modal-footer,
#pt-tailwind .modal-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem;
    border: 0;
    background: #f8fcfa
}

#pt-tailwind .modal-header {
    justify-content: space-between
}

#pt-tailwind .modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600
}

#pt-tailwind .modal-header .close {
    order: 2
}

#pt-tailwind .modal-footer {
    justify-content: flex-end
}

#pt-tailwind .modal-body {
    padding: 24px
}

#pt-tailwind .close {
    border: 0;
    background: transparent;
    color: #758779;
    font-size: 27px;
    padding: 4px 10px
}

#pt-tailwind button:focus-visible,
#pt-tailwind input:focus-visible,
#pt-tailwind select:focus-visible,
#pt-tailwind textarea:focus-visible {
    outline: 2px solid #34d399 !important;
    outline-offset: 3px
}

#pt-tailwind .modal-content>.close {
    position: absolute;
    inset-inline-end: 8px;
    top: 4px;
    z-index: 5
}

#pt-tailwind .modal label {
    display: block;
    font-size: 12px;
    color: #435a50;
    margin: 0 0 16px
}

#pt-tailwind .modal input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),
#pt-tailwind .modal select,
#pt-tailwind .modal textarea {
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid #dfeae4;
    border-radius: 9px;
    background: #fff;
    color: #243f33;
    margin-top: 5px
}

#pt-tailwind .modal .row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px
}

#pt-tailwind .modal .col,
#pt-tailwind .modal .col-md-4,
#pt-tailwind .modal .col-md-6 {
    flex: 1 1 160px;
    min-width: 0
}

#pt-tailwind .btn,
#pt-tailwind .pt-button {
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    background: #eff5f2;
    color: #315346;
    font-weight: 500;
    font-size: 12px
}

#pt-tailwind .btn-primary,
#pt-tailwind .pt-button.bg-0 {
    background: #0cbd83;
    color: #fff
}

#pt-tailwind .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    list-style: none;
    padding: 0 0 15px;
    margin: 0 0 20px;
    border-bottom: 1px solid #edf2ef
}

#pt-tailwind .nav-tabs a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px
}

#pt-tailwind .nav-tabs a.active {
    background: #dff9ec;
    color: #05845b
}

#pt-tailwind .tab-pane {
    display: none
}

#pt-tailwind .d-block,
#pt-tailwind .tab-pane.active {
    display: block
}

#pt-tailwind .d-flex {
    display: flex
}

#pt-tailwind .w-100 {
    width: 100%
}

#pt-tailwind .text-center {
    text-align: center
}

#pt-tailwind .text-muted {
    color: #84988f
}

#pt-tailwind .position-relative {
    position: relative
}

#pt-tailwind .alert {
    padding: 12px;
    border-radius: 8px;
    background: #fff0ed;
    color: #9a4234
}

#pt-tailwind .pt-item-details .thumb img {
    border-radius: 50%
}

#pt-tailwind .pt-sm .tree {
    direction: inherit
}

#pt-tailwind[dir=rtl] .modal,
#pt-tailwind[dir=rtl] .tree-heading {
    text-align: right
}

@media (max-width:900px) {
    #pt-tailwind .pt-header-menu {
        padding: 12px 18px
    }

    #pt-tailwind .pt-header-menu .pt-lang,
    #pt-tailwind .pt-header-menu .pt-list-menu>span {
        display: none
    }

    #pt-tailwind .tree-workspace {
        padding: 24px 20px
    }

    #pt-tailwind .tree-heading h1 {
        font-size: 23px
    }

    #pt-tailwind .tree-workspace>.pt-sm {
        height: calc(100dvh - 285px)
    }

    #pt-tailwind .tree-navigation-hint {
        display: none
    }
}

@media (max-width:600px) {
    #pt-tailwind .pt-header-menu {
        inset-inline-start: 0;
        height: 66px;
        padding: 10px 14px;
        gap: 10px
    }

    #pt-tailwind .pt-header-menu .pt-logo {
        display: block;
        position: static;
        width: 80px;
        height: 42px;
        padding: 0;
        flex: 0 0 80px
    }

    #pt-tailwind .pt-header-menu .pt-logo img {
        width: auto;
        max-width: 80px;
        max-height: 42px
    }

    #pt-tailwind .tree-brand>i {
        line-height: 46px
    }

    #pt-tailwind .tree-brand>span {
        display: none
    }

    #pt-tailwind .pt-header-menu .pt-search {
        flex: 1;
        width: auto
    }

    #pt-tailwind .pt-header-menu .pt-search input {
        height: 40px;
        font-size: 11px
    }

    #pt-tailwind .pt-header-menu .pt-dash,
    #pt-tailwind .pt-header-menu .pt-new-tree {
        display: none
    }

    #pt-tailwind .pt-header-menu .pt-list-menu {
        gap: 8px
    }

    #pt-tailwind .pt-nav-menu {
        inset-block: auto 0;
        inset-inline: 0;
        height: 68px;
        width: 100%;
        padding: 4px 8px;
        overflow-x: auto;
        overflow-y: hidden
    }

    #pt-tailwind .pt-nav-menu,
    #pt-tailwind[dir=rtl] .pt-nav-menu {
        box-shadow: 0 -2px 10px #17243c0b
    }

    #pt-tailwind .pt-nav-menu ul {
        flex-direction: row;
        gap: 5px;
        width: -moz-max-content;
        width: max-content;
        min-width: 100%;
        justify-content: space-around
    }

    #pt-tailwind .pt-nav-menu ul li {
        width: 58px;
        flex-shrink: 0
    }

    #pt-tailwind .pt-nav-menu ul li a {
        min-height: 54px;
        font-size: 17px;
        padding: 6px 2px;
        gap: 3px
    }

    #pt-tailwind .pt-nav-menu ul li a b {
        font-size: 8px
    }

    #pt-tailwind .pt-wrapper {
        margin: 66px 0 68px;
        min-height: calc(100dvh - 134px)
    }

    #pt-tailwind .tree-workspace {
        min-height: calc(100dvh - 134px);
        padding: 20px 14px
    }

    #pt-tailwind .tree-heading {
        gap: 18px
    }

    #pt-tailwind .tree-heading h1 {
        font-size: 19px
    }

    #pt-tailwind .tree-heading p {
        font-size: 10px
    }

    #pt-tailwind .tree-heading-icon {
        width: 42px;
        height: 42px;
        font-size: 19px
    }

    #pt-tailwind .tree-workspace .pt-details {
        gap: 6px
    }

    #pt-tailwind .tree-workspace .pt-details>a {
        font-size: 10px;
        padding: 8px 10px;
        height: 36px
    }

    #pt-tailwind .tree-workspace>.pt-sm {
        height: calc(100dvh - 335px);
        min-height: 330px;
        padding-top: 30px
    }

    #pt-tailwind .tree-navigation {
        inset-inline-start: 14px;
        bottom: 14px
    }

    #pt-tailwind .tree-navigation button {
        width: 39px;
        height: 39px
    }

    #pt-tailwind .tree a .pt-options {
        visibility: visible;
        opacity: 1
    }

    #pt-tailwind .modal {
        padding: 12px 8px
    }

    #pt-tailwind .modal-body {
        padding: 18px
    }
}

#pt-tailwind #myModal .modal-dialog {
    max-width: 850px;
    margin: 0 auto
}

#pt-tailwind #myModal .modal-content {
    border-radius: 16px;
    box-shadow: 0 24px 90px #102d3550
}

#pt-tailwind #myModal .modal-header {
    position: relative;
    justify-content: flex-start;
    gap: 18px;
    padding: 22px 28px 16px;
    background: #fff
}

#pt-tailwind #myModal .modal-header .close {
    position: absolute;
    inset-inline-end: 20px;
    top: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 0;
    background: #f3f5fa;
    font-size: 22px;
    line-height: 32px
}

#pt-tailwind #myModal .member-heading-icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 54px;
    border-radius: 13px;
    background: #e4f9f1;
    color: #08b882;
    font-size: 25px
}

#pt-tailwind #myModal .modal-title {
    font-size: 20px;
    font-weight: 700
}

#pt-tailwind #myModal .member-heading p {
    margin: 6px 0 0;
    color: #8891a4;
    font-size: 12px
}

#pt-tailwind #myModal .pt-form:not([style*="display: none"]) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px 24px
}

#pt-tailwind #myModal .nav-tabs {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: #f2f4fa;
    border-radius: 10px;
    overflow: hidden
}

#pt-tailwind #myModal .nav-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 5px;
    font-size: 11px;
    font-weight: 600;
    border-bottom: 2px solid transparent
}

#pt-tailwind #myModal .nav-tabs a.active {
    border-color: #0bc88c;
    background: #def8ee;
    color: #00a872;
    border-radius: 0
}

#pt-tailwind #myModal .member-photo-panel {
    position: relative;
    padding: 22px 14px;
    background: #effaf5;
    min-height: 0;
    overflow: hidden
}

#pt-tailwind #myModal .member-photo-panel:after {
    content: "";
    position: absolute;
    width: 160px;
    height: 100px;
    border-radius: 100% 0;
    background: #c9eee54a;
    bottom: -35px;
    inset-inline-start: -35px;
    transform: rotate(-35deg);
    pointer-events: none
}

#pt-tailwind #myModal .member-photo-preview {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 24px
}

#pt-tailwind #myModal .member-photo-preview img {
    width: 100%;
    height: 100%;
    border: 4px solid #fff;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    background: #e0eaff
}

#pt-tailwind #myModal .member-camera {
    position: absolute;
    inset-inline-end: 2px;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #07bd82;
    color: #fff;
    cursor: pointer;
    margin: 0
}

#pt-tailwind #myModal .member-upload-slot .prt-group {
    margin: 0 0 12px
}

#pt-tailwind #myModal .member-choose-avatar,
#pt-tailwind #myModal .member-upload-slot .prt-group label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 11px 5px;
    border: 1px solid #34cda1;
    border-radius: 24px;
    background: transparent;
    color: #05ac78;
    font-size: 11px;
    cursor: pointer;
    margin: 0
}

#pt-tailwind #myModal .member-upload-slot>label {
    font-size: 10px;
    margin-bottom: 14px;
    color: #718a87
}

#pt-tailwind #myModal .member-upload-slot input[name=photo] {
    min-height: 32px;
    padding: 7px;
    font-size: 10px
}

#pt-tailwind #myModal .tab-content {
    min-width: 0
}

#pt-tailwind #myModal label {
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 14px;
    color: #485469
}

#pt-tailwind #myModal input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=file]):not(.ts-control input),
#pt-tailwind #myModal select {
    min-height: 38px;
    padding: 9px 12px;
    border-color: #e0e4ee;
    border-radius: 7px;
    font-size: 11px;
    margin-top: 7px
}

#pt-tailwind #myModal .row {
    gap: 14px
}

#pt-tailwind #myModal .col-md-4 {
    flex-basis: 135px
}

#pt-tailwind #myModal #home>.row:has([name=firstname]) .col-md-4:last-child {
    flex-basis: 100%
}

#pt-tailwind #myModal #home .tgl-btn[for=cb1],
#pt-tailwind #myModal #home .tgl-btn[for=cb2] {
    display: inline-block;
    width: auto;
    height: auto;
    padding: 9px 18px;
    border: 1px solid #e0e4ee;
    border-radius: 7px;
    background: #fff;
    color: #657084;
    font-size: 11px
}

#pt-tailwind #myModal #home input.choice:checked+.tgl-btn {
    border-color: #20c797;
    background: #e1faf0;
    color: #00a971
}

#pt-tailwind #myModal .form-avatar {
    padding-top: 14px;
    border-top: 1px solid #edf0f5;
    margin-top: 6px
}

#pt-tailwind #myModal .form-avatar .tt {
    text-align: start;
    font-size: 12px;
    color: #263347
}

#pt-tailwind #myModal .form-avatar .form-inline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
}

#pt-tailwind #myModal .form-avatar .form-group {
    margin: 0;
    min-width: 0
}

#pt-tailwind #myModal .form-avatar label {
    margin: 0;
    cursor: pointer
}

#pt-tailwind #myModal .form-avatar label b {
    display: block;
    width: 100%;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%
}

#pt-tailwind #myModal .form-avatar img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

#pt-tailwind #myModal .form-avatar input:checked+label b {
    border-color: #10c68b
}

#pt-tailwind #myModal .modal-footer {
    border-top: 1px solid #edf0f5
}

#pt-tailwind #myModal .modal-footer button {
    padding: 13px 24px;
    font-size: 11px;
    box-shadow: 0 3px 9px #193c3012
}

@media(max-width:650px) {
    #pt-tailwind #myModal .pt-form:not([style*="display: none"]) {
        grid-template-columns: 1fr;
        gap: 16px
    }

    #pt-tailwind #myModal .member-photo-panel {
        min-height: 0;
        padding: 18px;
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 8px 18px;
        align-items: center
    }

    #pt-tailwind #myModal .member-photo-preview {
        width: 90px;
        height: 90px;
        margin: 0;
        grid-row: span 2
    }

    #pt-tailwind #myModal .member-upload-slot .prt-group {
        margin: 0
    }

    #pt-tailwind #myModal .member-upload-slot>label {
        margin: 8px 0
    }

    #pt-tailwind #myModal .nav-tabs a {
        gap: 5px;
        font-size: 9px
    }

    #pt-tailwind #myModal .modal-header {
        padding: 18px
    }

    #pt-tailwind #myModal .modal-title {
        font-size: 17px
    }

    #pt-tailwind #myModal .member-heading p {
        font-size: 10px;
        padding-inline-end: 20px
    }
}

#pt-tailwind #myModal #home>.row:has([name=firstname]) .col-md-4 {
    flex-basis: 140px
}

#pt-tailwind #myModal #home>.row:has([name=gender]) {
    align-items: flex-start
}

#pt-tailwind #myModal #home>.row:has([name=birthdate]) .col {
    flex-basis: 90px
}

#pt-tailwind #myModal #home>.col:has([name=death]) .form-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px
}

#pt-tailwind #myModal #home>.col:has([name=death]) label {
    margin: 0
}

#pt-tailwind #myModal #home>.col:has([name=death]) .tgl-btn {
    flex-shrink: 0
}

#pt-tailwind #myModal #home>.row:has([name=firstname]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

#pt-tailwind #myModal .choice {
    display: block;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden
}

#pt-tailwind #myModal .choice:focus-visible+label {
    outline: 2px solid #10b981;
    outline-offset: 2px
}

#pt-tailwind #myModal .form-avatar label:before {
    display: none
}

#pt-tailwind #myModal .form-avatar .form-inline .form-group {
    margin-inline: 0
}

#pt-tailwind #myModal .form-avatar .tt:after,
#pt-tailwind #myModal .form-avatar .tt:before {
    display: none
}

#pt-tailwind #myModal .tgl-light:checked+.tgl-btn {
    background: #2dcc94
}

#pt-tailwind #myModal #home .tgl-btn[for=cb1]:before {
    content: "\2640";
    border: 0;
    width: auto;
    height: auto;
    color: #ef5792;
    box-shadow: none
}

#pt-tailwind #myModal #home .tgl-btn[for=cb2]:before {
    content: "\2642";
    border: 0;
    width: auto;
    height: auto;
    color: #08b783;
    box-shadow: none
}

#pt-tailwind #myModal #home>.row:has([name=gender]) .col {
    flex-basis: 180px
}

#pt-tailwind #myModal #home>.row:has([name=gender]) .col-md-4 {
    flex-basis: 110px
}

#pt-tailwind #myModal #home .tgl-btn[for=cb1],
#pt-tailwind #myModal #home .tgl-btn[for=cb2] {
    padding: 8px 12px
}

#pt-tailwind #myModal .member-photo-panel {
    min-height: 430px
}

#pt-tailwind #myModal .modal-body {
    max-height: calc(100dvh - 210px)
}

@media(max-width:650px) {
    #pt-tailwind #myModal .member-photo-panel {
        min-height: 0
    }
}

#pt-tailwind #myModal .member-gender-title {
    display: block;
    margin-bottom: 7px;
    color: #485469;
    font-size: 11px
}

#pt-tailwind #myModal .member-avatar-heading {
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px
}

#pt-tailwind #myModal .member-avatar-heading .tt {
    margin: 0;
    flex: 1
}

#pt-tailwind #myModal .member-avatar-heading .member-avatar-search {
    width: 42%;
    min-height: 30px;
    padding: 6px 10px;
    margin: 0;
    border-radius: 18px;
    background: #f4f5fa;
    border: 0;
    font-size: 10px
}

#pt-tailwind #myModal .form-avatar .form-inline [hidden] {
    display: none
}

#pt-tailwind #myModal .member-photo-panel details {
    font-size: 10px;
    color: #6a8981;
    margin: 10px 0
}

#pt-tailwind #myModal summary {
    cursor: pointer
}

#pt-tailwind #myModal .member-photo-or {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    font-size: 10px;
    color: #7b8a94
}

#pt-tailwind #myModal .member-photo-or:after,
#pt-tailwind #myModal .member-photo-or:before {
    content: "";
    height: 1px;
    flex: 1;
    background: #d3e9e3
}

#pt-tailwind #myModal .member-extra-details {
    font-size: 11px;
    color: #71837b;
    margin-top: 12px
}

#pt-tailwind #myModal .member-extra-details[open] summary {
    margin-bottom: 10px
}

#pt-tailwind #myModal .member-photo-panel input[name=photo] {
    height: 32px
}

#pt-tailwind #myModal .tab-content input[type=text],
#pt-tailwind #myModal .tab-content select {
    height: 38px;
    box-shadow: none
}

#pt-tailwind #myModal .member-avatar-heading input[type=search] {
    height: 30px
}

#pt-tailwind #myModal .member-photo-panel .member-photo-or {
    grid-column: 2
}

@media(min-width:651px) {
    #pt-tailwind #myModal .member-photo-panel {
        min-height: 0
    }
}

@media(max-width:650px) {
    #pt-tailwind #myModal .member-photo-preview {
        grid-row: span 3
    }

    #pt-tailwind #myModal .member-choose-avatar {
        grid-column: 2
    }

    #pt-tailwind #myModal .member-photo-or {
        margin: 0
    }
}

#pt-tailwind #myModal .member-avatar-empty,
#pt-tailwind #myModal .native-member-message {
    color: #71837b;
    background: #f1faf6;
    border-radius: 8px;
    padding: 10px;
    font-size: 11px
}

#pt-tailwind #myModal .native-member-message:empty,
#pt-tailwind #myModal [hidden] {
    display: none
}

#pt-tailwind .tree .pt-native-show {
    cursor: default
}

#pt-tailwind #myTree {
    padding: 24px 14px;
    overflow: hidden
}

#pt-tailwind #myTree.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible
}

#pt-tailwind #myTree .modal-dialog {
    width: 100%;
    max-width: 680px;
    margin: auto
}

#pt-tailwind #myTree .modal-content {
    border: 1px solid #e0e9e5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 60px #142c2526
}

#pt-tailwind #myTree .modal-body {
    max-height: calc(100dvh - 50px);
    overflow-y: auto;
    padding: 26px
}

#pt-tailwind #myTree .close {
    top: 10px;
    inset-inline-end: 10px;
    inset-inline-start: auto;
    margin: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
    border: 1px solid #e4ebe7;
    background: #f4f7f5;
    box-shadow: none;
    color: #607267;
    z-index: 2
}

#pt-tailwind .member-details-header {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-inline-end: 28px;
    margin-bottom: 16px
}

#pt-tailwind .member-details-header img {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #edf6f1
}

#pt-tailwind .member-details-header h2 {
    margin: 0 0 7px;
    font-size: 21px;
    font-weight: 650;
    color: #1d352a;
    overflow-wrap: anywhere
}

#pt-tailwind .member-details-status {
    display: inline-block;
    border-radius: 6px;
    padding: 3px 9px;
    background: #eaf6ef;
    color: #47705a;
    font-size: 11px
}

#pt-tailwind #myTree .nav-tabs {
    gap: 6px;
    margin-bottom: 18px
}

#pt-tailwind #myTree .nav-tabs button {
    border: 0;
    background: transparent;
    padding: 9px 16px;
    border-radius: 8px;
    color: #718177;
    font-size: 12px
}

#pt-tailwind #myTree .nav-tabs button.active {
    background: #e5f7ed;
    color: #07855c
}

#pt-tailwind .member-details-content {
    min-height: 0;
    font-size: 13px;
    color: #53665a;
    overflow-wrap: anywhere
}

#pt-tailwind .member-details-content .tab-pane[hidden] {
    display: none
}

#pt-tailwind .member-details-content h3 {
    margin: 18px 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #243e30
}

#pt-tailwind .member-details-content dl {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px 16px;
    margin: 0
}

#pt-tailwind .member-details-content dt {
    font-weight: 500;
    color: #829087
}

#pt-tailwind .member-details-content dd {
    margin: 0;
    white-space: pre-wrap
}

#pt-tailwind .member-details-content ul {
    padding-inline-start: 18px
}

#pt-tailwind .member-details-content li {
    margin-bottom: 7px
}

#pt-tailwind .member-details-photos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

#pt-tailwind .member-details-photos img {
    width: 100%;
    height: 130px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px
}

#pt-tailwind .member-details-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: 18px;
    margin-top: 20px;
    border-top: 1px solid #edf2ee
}

@media(max-width:480px) {
    #pt-tailwind #myTree .modal-body {
        padding: 20px 16px
    }

    #pt-tailwind .member-details-header img {
        width: 64px;
        height: 64px
    }

    #pt-tailwind .member-details-header h2 {
        font-size: 18px
    }

    #pt-tailwind .member-details-content dl {
        grid-template-columns: 1fr;
        gap: 5px
    }

    #pt-tailwind .member-details-content dd {
        margin-bottom: 10px
    }

    #pt-tailwind .member-details-photos {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

#pt-tailwind #myModal {
    overflow: hidden;
    padding: 20px 14px
}

#pt-tailwind #myModal.show {
    display: flex;
    align-items: center;
    justify-content: center
}

#pt-tailwind #myModal #send-newmember,
#pt-tailwind #myModal .modal-content {
    max-height: calc(100dvh - 40px);
    display: flex
}

#pt-tailwind #myModal #send-newmember {
    flex-direction: column;
    min-height: 0;
    width: 100%
}

#pt-tailwind #myModal .modal-footer,
#pt-tailwind #myModal .modal-header {
    flex-shrink: 0
}

#pt-tailwind #myModal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 22px 18px
}

#pt-tailwind #myModal .pt-form {
    margin: 0;
    padding: 0
}

#pt-tailwind #myModal .modal-header {
    padding: 18px 24px
}

#pt-tailwind #myModal .modal-footer {
    padding: 14px 22px;
    margin: 0;
    border-top: 1px solid #e7eee9;
    background: #fff
}

#pt-tailwind #myModal .modal-footer button {
    height: auto;
    line-height: 1.5;
    margin: 0;
    box-shadow: none
}

#pt-tailwind #myModal .member-photo-panel {
    align-self: start
}

#pt-tailwind #myModal .member-photo-panel:after {
    display: none
}

#pt-tailwind #myModal .member-photo-preview {
    width: 112px;
    height: 112px;
    margin-bottom: 18px
}

#pt-tailwind #myModal .member-avatar-heading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px
}

#pt-tailwind #myModal .member-avatar-heading .member-avatar-search {
    width: 100%
}

#pt-tailwind #myModal .form-avatar .form-inline .form-group {
    width: auto;
    float: none
}

#pt-tailwind #myModal .form-avatar label b {
    height: auto
}

#pt-tailwind #myModal .form-avatar {
    grid-column: 1/-1
}

#pt-tailwind #myModal .tab-content {
    padding-top: 0
}

#pt-tailwind #myModal .row>* {
    min-width: 0
}

#pt-tailwind #myTree .member-details-content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0
}

#pt-tailwind #myTree .member-relation-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin: 0;
    border: 1px solid #e5ede8;
    border-radius: 10px;
    background: #f9fcfa;
    min-width: 0
}

#pt-tailwind .member-relation-card img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    flex-shrink: 0
}

#pt-tailwind .member-relation-card strong {
    display: block;
    font-size: 12px;
    font-weight: 550
}

#pt-tailwind .member-relation-card small {
    display: block;
    font-size: 10px;
    color: #829087;
    margin-top: 3px
}

#pt-tailwind .member-details-empty {
    margin: 8px 0;
    padding: 14px;
    border: 1px dashed #dfeae3;
    border-radius: 10px;
    background: #f8fbf9;
    color: #7c8d82;
    font-size: 12px;
    text-align: center
}

#pt-tailwind #myTree .member-details-content h3 {
    margin: 14px 0 8px
}

#pt-tailwind #myTree .member-details-footer {
    margin-top: 14px;
    padding-top: 14px
}

@media(max-width:650px) {
    #pt-tailwind #myModal .member-photo-panel .form-avatar .form-inline {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    #pt-tailwind #myModal .member-photo-panel .member-avatar-empty {
        grid-column: 1/-1
    }

    #pt-tailwind #myModal .modal-body {
        padding-inline: 14px
    }
}

@media(max-width:480px) {
    #pt-tailwind #myTree .member-details-content ul {
        grid-template-columns: 1fr
    }
}

#pt-tailwind #myModal .member-avatar-carousel {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 3px;
    width: 100%;
    min-width: 0;
    padding: 10px 0 0;
    margin: 10px 0 0
}

#pt-tailwind #myModal .member-avatar-carousel:after,
#pt-tailwind #myModal .member-avatar-carousel:before {
    display: none
}

#pt-tailwind #myModal .member-photo-panel .member-avatar-carousel #member-avatar-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 1px;
    position: relative;
    direction: ltr;
    scrollbar-width: none;
    scroll-snap-type: x proximity
}

#pt-tailwind #myModal #member-avatar-track::-webkit-scrollbar {
    display: none
}

#pt-tailwind #myModal .member-avatar-carousel #member-avatar-track .form-group {
    position: relative;
    flex: 0 0 40px;
    width: 40px;
    margin: 0;
    scroll-snap-align: center
}

#pt-tailwind #myModal .member-avatar-carousel input[name=avatar] {
    display: block;
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    min-height: 0;
    padding: 0;
    margin: 0
}

#pt-tailwind #myModal .member-avatar-carousel input+label {
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    box-shadow: none
}

#pt-tailwind #myModal .member-avatar-carousel input+label:before {
    display: none
}

#pt-tailwind #myModal .member-avatar-carousel input+label b {
    width: 40px;
    height: 40px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 50%
}

#pt-tailwind #myModal .member-avatar-carousel input+label img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%
}

#pt-tailwind #myModal .member-avatar-carousel input:checked+label b {
    border-color: #0cbd83;
    background: #fff
}

#pt-tailwind #myModal .member-avatar-carousel input:focus-visible+label {
    outline: 2px solid #087d59;
    outline-offset: 1px
}

#pt-tailwind #myModal .member-avatar-carousel button {
    display: grid;
    place-items: center;
    width: 22px;
    height: 30px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #dcebe2;
    border-radius: 7px;
    background: #fff;
    color: #318565;
    font-size: 20px;
    line-height: 1;
    box-shadow: none
}

#pt-tailwind #myModal .member-photo-panel .member-avatar-empty {
    padding: 8px;
    margin: 10px 0 0;
    font-size: 10px
}

#pt-tailwind #myModal #pics .member-gallery {
    min-width: 0
}

#pt-tailwind #myModal #pics .gallery-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 12px;
    border: 1px dashed #a9d6bf;
    border-radius: 12px;
    background: #f5fbf7;
    text-align: center
}

#pt-tailwind #myModal #pics .gallery-drop strong {
    font-size: 13px;
    color: #315b45
}

#pt-tailwind #myModal #pics .gallery-drop span,
#pt-tailwind #myModal #pics .gallery-note {
    color: #7b8e81;
    font-size: 10px
}

#pt-tailwind #myModal #pics .gallery-add {
    margin: 4px 0 0;
    padding: 8px 16px;
    border: 0;
    border-radius: 8px;
    background: #0cbd83;
    color: #fff;
    font-size: 11px;
    box-shadow: none
}

#pt-tailwind #myModal #pics .gallery-note {
    margin: 9px 0
}

#pt-tailwind #myModal #pics .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 10px
}

#pt-tailwind #myModal #pics .gallery-photo {
    position: relative;
    min-width: 0;
    padding: 6px;
    border: 1px solid #e2ece5;
    border-radius: 10px;
    background: #fff
}

#pt-tailwind #myModal #pics .gallery-photo>a {
    display: block
}

#pt-tailwind #myModal #pics .gallery-photo img {
    display: block;
    width: 100%;
    height: 110px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 7px
}

#pt-tailwind #myModal #pics .gallery-photo-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px
}

#pt-tailwind #myModal #pics .gallery-photo-actions button {
    flex: 1 1 auto;
    padding: 5px;
    margin: 0;
    border: 1px solid #dce9df;
    border-radius: 6px;
    background: #f8fcfa;
    color: #427255;
    font-size: 9px;
    box-shadow: none
}

#pt-tailwind #myModal #pics .gallery-photo-actions button:disabled {
    opacity: .5;
    cursor: default
}

#pt-tailwind #myModal #pics .gallery-profile-badge {
    position: absolute;
    top: 11px;
    inset-inline-start: 11px;
    padding: 3px 6px;
    border-radius: 5px;
    background: #078558;
    color: #fff;
    font-size: 9px
}

#pt-tailwind #myModal #pics progress {
    width: 100%;
    height: 5px;
    accent-color: #0cbd83
}

#pt-tailwind #myModal #pics .gallery-photo-status {
    margin: 5px 0 0;
    font-size: 10px;
    color: #687e6e;
    overflow-wrap: anywhere
}

#pt-tailwind #myModal #pics .gallery-photo-status:empty,
#pt-tailwind #myModal #pics .gallery-status:empty {
    display: none
}

#pt-tailwind #myModal #pics .gallery-empty {
    padding: 18px 10px;
    text-align: center;
    color: #849488;
    font-size: 11px;
    margin: 0
}

#pt-tailwind #myModal #pics .gallery-status {
    margin: 8px 0;
    color: #a24c4c;
    font-size: 11px
}

#pt-tailwind .tree-workspace .tree-action-bar {
    gap: 8px
}

#pt-tailwind .tree-workspace .tree-action-bar .tree-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: auto;
    min-height: 40px;
    margin: 0;
    padding: 9px 14px;
    border: 1px solid #deebe3;
    border-radius: 10px;
    background: #fff;
    color: #3b5749;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.5;
    box-shadow: 0 2px 8px #193c2905;
    cursor: pointer
}

#pt-tailwind .tree-workspace .tree-action-bar .tree-action-primary {
    background: #0cbd83;
    border-color: #0cbd83;
    color: #fff;
    order: -1
}

#pt-tailwind .tree-workspace .tree-action-bar .tree-action:hover {
    background: #eff9f3
}

#pt-tailwind .tree-workspace .tree-action-bar .tree-action-primary:hover {
    background: #09a975
}

#pt-tailwind #tree-share-modal .modal-dialog {
    max-width: 480px
}

#pt-tailwind #tree-share-modal .modal-body {
    max-height: calc(100dvh - 170px);
    overflow-y: auto
}

#pt-tailwind #tree-share-modal .modal-header {
    background: #fff;
    border-bottom: 1px solid #e9f0eb
}

#pt-tailwind #tree-share-modal .close {
    position: static;
    margin: 0;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    width: 30px;
    height: 30px;
    box-shadow: none;
    background: #f3f7f4
}

#pt-tailwind #tree-share-modal .share-visibility {
    color: #72877a;
    font-size: 12px;
    margin: 0 0 14px
}

#pt-tailwind #tree-share-modal label {
    margin-bottom: 5px
}

#pt-tailwind #tree-share-modal .share-link-row {
    display: flex;
    align-items: center;
    gap: 7px
}

#pt-tailwind #tree-share-modal input {
    min-width: 0;
    margin: 0;
    flex: 1
}

#pt-tailwind #tree-share-modal .share-social a,
#pt-tailwind #tree-share-modal button:not(.close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid #dfe9e3;
    border-radius: 8px;
    background: #f8fbf9;
    color: #41694f;
    font-size: 11px;
    line-height: 1.5;
    white-space: nowrap
}

#pt-tailwind #tree-share-modal button:disabled {
    opacity: .45;
    cursor: default
}

#pt-tailwind #tree-share-modal .share-feedback {
    font-size: 11px;
    color: #32845e;
    margin: 10px 0
}

#pt-tailwind #tree-share-modal .share-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 16px 0
}

#pt-tailwind #tree-share-modal canvas {
    width: 180px;
    max-width: 100%;
    height: auto
}

#pt-tailwind #tree-share-modal [hidden] {
    display: none
}

#pt-tailwind #tree-share-modal .share-social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
    padding-top: 14px;
    border-top: 1px solid #e7eee9
}

#pt-tailwind #tree-share-modal [aria-disabled=true] {
    opacity: .45;
    cursor: default
}

@media(max-width:600px) {
    #pt-tailwind .tree-workspace .tree-action-bar {
        width: 100%
    }

    #pt-tailwind .tree-workspace .tree-action-bar .tree-action {
        flex: 1 1 calc(50% - 8px);
        padding: 8px 10px;
        font-size: 11px
    }
}

#pt-tailwind .tree .tree-marriage-lines .marriage-heart circle {
    fill: #f0faf7;
    stroke: none
}

#pt-tailwind .tree .tree-marriage-lines .marriage-heart path {
    fill: #f43f6c;
    stroke: none
}

#pt-tailwind #myModal .member-upload-slot #file {
    position: absolute;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap
}

#pt-tailwind #myModal .member-upload-slot .prt-group:focus-within label {
    outline: 2px solid #079e70;
    outline-offset: 3px
}

#pt-tailwind #myModal .member-photo-panel,
#pt-tailwind #myModal .member-upload-slot,
#pt-tailwind #myModal .member-upload-slot .prt-group {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box
}

#pt-tailwind #myModal .member-upload-filename {
    display: block;
    max-width: 100%;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
    color: #718a87;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start
}

#pt-tailwind #myModal .member-upload-filename[hidden],
#pt-tailwind .tree .tree-native-roots li:after,
#pt-tailwind .tree .tree-native-roots li:before,
#pt-tailwind .tree .tree-native-roots ul:before {
    display: none
}

#pt-tailwind .tree-workspace {
    min-height: 0;
    padding-bottom: 20px
}

#pt-tailwind .tree-workspace .tree-navigation {
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px
}

#pt-tailwind .tree-workspace>.pt-sm {
    height: calc(100dvh - 320px);
    min-height: 330px;
    padding-bottom: 24px
}

#pt-tailwind .tree-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: min(460px, 100%);
    margin: 30px auto;
    padding: 38px 24px;
    border: 1px solid #dfede7;
    border-radius: 20px;
    background: #ffffffd9;
    box-shadow: 0 8px 26px #214f3b06;
    text-align: center
}

#pt-tailwind .tree-empty-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e0f7ed;
    color: #00a977
}

#pt-tailwind .tree-empty-icon .pt-icon {
    width: 30px;
    height: 30px
}

#pt-tailwind .tree-empty-state h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    color: #34526a
}

#pt-tailwind .pt-wrapper>.pt-footer {
    display: block;
    position: static;
    width: 100%;
    margin: 0;
    padding: 16px 20px;
    border: 0;
    background: #f0faf7;
    color: #8295a8;
    text-align: center;
    font-size: 12px;
    line-height: 1.6
}

#pt-tailwind .pt-wrapper>.pt-footer .pt-container {
    padding: 0;
    margin: 0 auto;
    width: 100%
}

@media(max-width:767px) {
    #pt-tailwind .tree-workspace>.pt-sm {
        height: calc(100dvh - 360px);
        min-height: 300px
    }

    #pt-tailwind .tree-empty-state {
        padding: 28px 18px;
        margin: 12px auto
    }

    #pt-tailwind .pt-wrapper>.pt-footer {
        padding: 12px 14px;
        font-size: 11px
    }
}

#pt-tailwind.pt-tree-page {
    display: flow-root
}

#pt-tailwind.pt-tree-page .pt-wrapper {
    display: flex;
    flex-direction: column
}

#pt-tailwind.pt-tree-page .pt-wrapper>.tree-workspace {
    flex: 1 0 auto
}

#pt-tailwind.pt-tree-page .pt-wrapper>.pt-footer {
    flex-shrink: 0;
    margin-top: auto;
    margin-bottom: 0
}

#pt-tailwind .tree-menu-trigger>.pt-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0
}

#pt-tailwind .tree-action-menu .tree-menu-action {
    font-size: 12px;
    border-radius: 6px
}

#pt-tailwind .tree-action-menu .tree-menu-action:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 1px #80daba
}

#pt-tailwind #myModal.marriage-modal .modal-dialog {
    width: min(1120px, 100%);
    max-width: 1120px
}

#pt-tailwind #myModal.marriage-modal .modal-content {
    border-radius: 20px
}

#pt-tailwind #myModal.marriage-modal .modal-header {
    padding: 24px 26px 20px
}

#pt-tailwind #myModal.marriage-modal .member-heading-icon {
    width: 76px;
    height: 68px;
    border-radius: 18px;
    background: #e9faf3 url(../images/marriage-rings.svg) 50%/46px no-repeat
}

#pt-tailwind #myModal.marriage-modal .member-heading-icon>.pt-icon {
    display: none
}

#pt-tailwind #myModal.marriage-modal .member-heading p {
    display: block;
    font-size: 13px;
    margin-top: 5px;
    color: #8190ad
}

#pt-tailwind #myModal.marriage-modal .modal-body {
    padding: 0 24px 24px
}

#pt-tailwind #myModal.marriage-modal .marriage-load-message:empty {
    display: none
}

#pt-tailwind #myModal.marriage-modal .marriage-layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(240px, 1fr);
    gap: 18px;
    align-items: stretch
}

#pt-tailwind #myModal.marriage-modal .marriage-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0
}

#pt-tailwind #myModal.marriage-modal .marriage-notice {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border: 1px solid #d8f2e8;
    border-radius: 15px;
    background: linear-gradient(120deg, #f1fbf6, #eaf9f4);
    color: #236361
}

#pt-tailwind #myModal.marriage-modal .marriage-notice>span {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: #00b783;
    color: #fff;
    border-radius: 50%
}

#pt-tailwind #myModal.marriage-modal .marriage-notice p {
    font-size: 12px;
    line-height: 1.7;
    margin: 0
}

#pt-tailwind #myModal.marriage-modal .marriage-field-card {
    position: relative;
    padding: 18px;
    border: 1px solid #e7edf5;
    border-radius: 15px;
    background: #fff;
    min-width: 0
}

#pt-tailwind #myModal.marriage-modal .marriage-card-icon {
    position: absolute;
    inset-inline-start: 16px;
    top: 18px;
    width: 46px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: #e8faf3;
    color: #00b783
}

#pt-tailwind #myModal.marriage-modal .marriage-card-icon .pt-icon {
    width: 25px;
    height: 25px
}

#pt-tailwind #myModal.marriage-modal .marriage-pink {
    background: #ffe8ee;
    color: #ff426a
}

#pt-tailwind #myModal.marriage-modal .marriage-blue {
    background: #e8f2ff;
    color: #2788fa
}

#pt-tailwind #myModal.marriage-modal .marriage-purple {
    background: #f1e8ff;
    color: #9238ef
}

#pt-tailwind #myModal.marriage-modal .marriage-card-content {
    padding-inline-start: 60px;
    min-width: 0
}

#pt-tailwind #myModal.marriage-modal .marriage-card-content label {
    display: block;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #233453
}

#pt-tailwind #myModal.marriage-modal .marriage-card-content label span {
    font-weight: 400
}

#pt-tailwind #myModal.marriage-modal .marriage-card-content em {
    font-style: normal;
    color: #f53660
}

#pt-tailwind #myModal.marriage-modal .marriage-card-content small {
    display: block;
    margin-top: 8px;
    color: #8594b2;
    font-size: 12px;
    line-height: 1.6
}

#pt-tailwind #myModal.marriage-modal .marriage-card-content input,
#pt-tailwind #myModal.marriage-modal .marriage-card-content select {
    margin: 0;
    width: 100%;
    min-height: 42px;
    border-radius: 9px;
    border-color: #dfe6f3;
    font-size: 12px
}

#pt-tailwind #myModal.marriage-modal .marriage-spouse-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    flex-wrap: wrap
}

#pt-tailwind #myModal.marriage-modal .marriage-spouse-heading label {
    margin: 0
}

#pt-tailwind #myModal.marriage-modal .marriage-create-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #c9efdf;
    border-radius: 12px;
    background: #f0fcf6;
    color: #00a576;
    font-size: 12px;
    line-height: 1.3
}

#pt-tailwind #myModal.marriage-modal .marriage-create-toggle svg {
    width: 15px;
    height: 15px
}

#pt-tailwind #myModal.marriage-modal .marriage-mode-source[hidden] {
    display: none
}

#pt-tailwind #myModal.marriage-modal .marriage-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

#pt-tailwind #myModal.marriage-modal .marriage-aside {
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(140deg, #f0fbf7, #edf9f5);
    min-width: 0
}

#pt-tailwind #myModal.marriage-modal .marriage-aside>img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 12px
}

#pt-tailwind #myModal.marriage-modal .marriage-aside h3 {
    font-size: 19px;
    margin: 0 0 20px;
    color: #1d3052;
    font-weight: 600
}

#pt-tailwind #myModal.marriage-modal .marriage-aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px
}

#pt-tailwind #myModal.marriage-modal .marriage-aside li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    line-height: 1.7;
    color: #465879
}

#pt-tailwind #myModal.marriage-modal .marriage-aside li>span {
    display: grid;
    place-items: center;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7dd9b9;
    color: #fff
}

#pt-tailwind #myModal.marriage-modal .marriage-aside li svg {
    width: 17px;
    height: 17px
}

#pt-tailwind #myModal.marriage-modal .modal-footer {
    padding: 16px 24px;
    gap: 16px
}

@media(max-width:850px) {
    #pt-tailwind #myModal.marriage-modal .marriage-layout {
        grid-template-columns: 1fr
    }

    #pt-tailwind #myModal.marriage-modal .marriage-aside {
        display: none
    }
}

@media(max-width:550px) {
    #pt-tailwind #myModal.marriage-modal .marriage-dates {
        grid-template-columns: 1fr
    }

    #pt-tailwind #myModal.marriage-modal .modal-body {
        padding: 0 14px 16px
    }

    #pt-tailwind #myModal.marriage-modal .marriage-card-content {
        padding-inline-start: 0;
        padding-top: 58px
    }

    #pt-tailwind #myModal.marriage-modal .modal-header {
        padding: 18px 14px
    }

    #pt-tailwind #myModal.marriage-modal .member-heading-icon {
        width: 56px;
        height: 56px;
        flex: 0 0 56px
    }
}

#pt-tailwind #myTree .member-details-photos>button {
    display: block;
    border: 0;
    background: transparent;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    cursor: zoom-in
}

#pt-tailwind #myTree .member-details-photos>button img {
    display: block;
    transition: transform .2s
}

#pt-tailwind #myTree .member-details-photos>button:hover img {
    transform: scale(1.03)
}

#pt-tailwind #myTree .member-details-content dd a {
    color: #009b70;
    text-decoration: underline;
    overflow-wrap: anywhere
}

#pt-tailwind #myTree .nav-tabs {
    flex-wrap: wrap
}

#pt-tailwind .member-photo-viewer .modal-dialog {
    width: min(100%, 960px);
    max-width: 960px;
    margin: auto
}

#pt-tailwind .member-photo-viewer .modal-content {
    position: relative;
    padding: 42px 16px 16px;
    border-radius: 16px;
    background: #fff
}

#pt-tailwind .member-photo-viewer img {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: calc(100dvh - 190px);
    -o-object-fit: contain;
    object-fit: contain;
    margin: auto
}

#pt-tailwind .member-photo-viewer .photo-viewer-close {
    position: absolute;
    top: 8px;
    inset-inline-end: 10px;
    border: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f2f7f5;
    color: #456359;
    font-size: 23px;
    padding: 0;
    line-height: 1
}

#pt-tailwind .member-photo-viewer p {
    text-align: center;
    color: #7a9187;
    font-size: 12px;
    margin: 10px 0
}

#pt-tailwind .photo-viewer-controls {
    display: flex;
    justify-content: center;
    gap: 10px
}

#pt-tailwind .photo-viewer-controls button {
    border: 1px solid #d5eade;
    background: #edf9f3;
    color: #00855f;
    border-radius: 8px;
    padding: 7px 15px;
    font-size: 12px
}

#pt-tailwind .photo-viewer-controls button:disabled {
    opacity: .4;
    cursor: default
}

#pt-tailwind .tree .tree-marriage-lines .marriage-line-active {
    stroke: #edb6c8;
    stroke-width: 1.25
}

#pt-tailwind .tree .tree-marriage-lines .marriage-line-former {
    stroke: #aeb6bd;
    stroke-width: 1.25;
    stroke-dasharray: 3 3
}

#pt-tailwind .tree .tree-marriage-lines .marriage-heart circle {
    fill: #fff;
    stroke: #fff;
    stroke-width: 1
}

#pt-tailwind .tree .tree-marriage-lines .marriage-heart-active .marriage-heart-shape {
    fill: #ee779b;
    stroke: none
}

#pt-tailwind .tree .tree-marriage-lines .marriage-heart-former .marriage-heart-shape {
    fill: #9da7b0;
    stroke: none
}

#pt-tailwind .tree .tree-marriage-lines .marriage-heart-former .marriage-crack {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round
}

#pt-tailwind .tree-workspace .tree-heading h1 {
    margin: 0;
    line-height: 1.2
}

#pt-tailwind .tree-workspace .tree-heading h1+p {
    margin: 3px 0 0;
    line-height: 1.4
}

#pt-tailwind .tree-workspace>.pt-sm {
    height: calc(100dvh - 190px);
    min-height: 420px;
    padding-bottom: 0
}

#pt-tailwind .tree-workspace>.pt-sm>.tree-navigation {
    position: absolute;
    inset: auto;
    inset-inline-start: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 5px;
    border: 1px solid #e2eee7;
    border-radius: 12px;
    background: #fffffff2;
    box-shadow: 0 4px 18px #244b3a0d;
    z-index: 8;
    max-width: calc(100% - 24px)
}

#pt-tailwind .tree-workspace .tree-navigation button {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 7px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    font-size: 14px;
    box-shadow: none
}

#pt-tailwind .tree-workspace .tree-navigation button .pt-icon {
    width: 17px;
    height: 17px
}

#pt-tailwind .tree-workspace .tree-navigation .tree-zoom-label {
    margin: 0;
    padding: 0 6px;
    font-size: 10px;
    min-width: 38px;
    text-align: center
}

@media(max-width:767px) {
    #pt-tailwind .tree-workspace>.pt-sm {
        height: calc(100dvh - 260px);
        min-height: 360px
    }

    #pt-tailwind .tree-workspace>.pt-sm>.tree-navigation {
        inset-inline-start: 8px;
        bottom: 8px
    }
}

@media(max-width:600px) {
    #pt-tailwind .tree-workspace .tree-action-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0 0 12px;
        position: relative;
        inset: auto;
        box-sizing: border-box
    }

    #pt-tailwind .tree-workspace .tree-action-bar>* {
        min-width: 0;
        width: 100%;
        margin: 0
    }

    #pt-tailwind .tree-workspace .tree-action-bar .tree-action {
        width: 100%;
        min-height: 44px;
        padding: 9px 8px;
        font-size: 12px;
        box-sizing: border-box;
        white-space: normal
    }

    #pt-tailwind .tree-workspace .tree-action-bar .tree-export-dropdown {
        position: relative;
        align-self: stretch
    }

    #pt-tailwind .tree-workspace .tree-action-bar .tree-export-options {
        min-width: 0;
        width: -moz-max-content;
        width: max-content;
        max-width: calc(100vw - 28px);
        z-index: 12
    }

    #pt-tailwind #myModal:not(.marriage-modal) {
        padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + env(safe-area-inset-bottom, 0px))
    }

    #pt-tailwind #myModal:not(.marriage-modal) .modal-dialog {
        width: 100%;
        min-width: 0
    }

    #pt-tailwind #myModal:not(.marriage-modal) #send-newmember,
    #pt-tailwind #myModal:not(.marriage-modal) .modal-content {
        max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        min-height: 0
    }

    #pt-tailwind #myModal:not(.marriage-modal) .modal-header {
        padding: 14px 58px 14px 14px;
        gap: 10px
    }

    #pt-tailwind[dir=rtl] #myModal:not(.marriage-modal) .modal-header {
        padding: 14px 14px 14px 58px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .modal-header .close {
        width: 44px;
        height: 44px;
        top: 8px;
        inset-inline-end: 8px;
        line-height: 44px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-heading-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        font-size: 20px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-heading p {
        margin-top: 3px;
        padding: 0;
        font-size: 11px;
        line-height: 1.4
    }

    #pt-tailwind #myModal:not(.marriage-modal) .modal-body {
        padding: 0 12px 12px;
        max-height: none;
        -webkit-overflow-scrolling: touch
    }

    #pt-tailwind #myModal:not(.marriage-modal) .pt-form:not([style*="display: none"]) {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .nav-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .nav-tabs a {
        min-height: 44px;
        padding: 8px;
        gap: 6px;
        font-size: 12px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-photo-panel {
        display: grid;
        grid-template-columns: 76px minmax(0, 1fr);
        align-items: center;
        gap: 10px 12px;
        padding: 12px;
        min-height: 0;
        height: auto
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-photo-preview {
        width: 76px;
        height: 76px;
        margin: 0;
        grid-column: 1;
        grid-row: 1;
        align-self: start
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-camera {
        width: 32px;
        height: 32px;
        inset-inline-end: -2px;
        bottom: -2px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-upload-slot {
        grid-column: 2;
        grid-row: 1;
        min-width: 0
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-upload-slot .prt-group label {
        min-height: 44px;
        padding: 8px;
        font-size: 12px;
        border-radius: 10px;
        line-height: 1.3
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-upload-slot details {
        margin: 6px 0 0;
        font-size: 11px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-upload-slot summary {
        min-height: 32px;
        padding: 7px 0;
        line-height: 1.4;
        overflow-wrap: anywhere
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-upload-slot details label {
        display: block;
        margin: 0;
        font-size: 11px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-avatar-carousel,
    #pt-tailwind #myModal:not(.marriage-modal) .member-photo-panel .member-avatar-empty {
        grid-column: 1/-1;
        margin: 0;
        padding: 4px 0;
        font-size: 11px;
        line-height: 1.5
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-avatar-carousel button {
        width: 32px;
        height: 44px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .member-avatar-carousel {
        grid-template-columns: 32px minmax(0, 1fr) 32px
    }

    #pt-tailwind #myModal:not(.marriage-modal) label {
        margin-bottom: 10px;
        font-size: 12px
    }

    #pt-tailwind #myModal:not(.marriage-modal) input:not([type=radio]):not([type=checkbox]):not([type=hidden]):not([type=file]):not(.ts-control input),
    #pt-tailwind #myModal:not(.marriage-modal) select,
    #pt-tailwind #myModal:not(.marriage-modal) textarea {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        font-size: 16px;
        min-height: 44px;
        box-sizing: border-box
    }

    #pt-tailwind #myModal:not(.marriage-modal) #home>.row:has([name=firstname]) {
        grid-template-columns: minmax(0, 1fr);
        gap: 0
    }

    #pt-tailwind #myModal:not(.marriage-modal) #pics .gallery-drop {
        gap: 4px;
        padding: 12px;
        min-height: 0
    }

    #pt-tailwind #myModal:not(.marriage-modal) #pics .gallery-add {
        min-height: 44px;
        padding: 9px 16px;
        margin: 4px 0 0
    }

    #pt-tailwind #myModal:not(.marriage-modal) #pics .gallery-empty,
    #pt-tailwind #myModal:not(.marriage-modal) #pics .gallery-note {
        font-size: 11px;
        line-height: 1.5;
        margin: 8px 0;
        padding: 0
    }

    #pt-tailwind #myModal:not(.marriage-modal) #pics .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    #pt-tailwind #myModal:not(.marriage-modal) .modal-footer {
        padding: 10px 12px;
        gap: 8px;
        display: flex;
        flex-wrap: wrap
    }

    #pt-tailwind #myModal:not(.marriage-modal) .modal-footer button {
        flex: 1 1 100px;
        min-height: 44px;
        padding: 10px;
        font-size: 12px
    }
}

#pt-tailwind .tree-workspace>.pt-sm {
    touch-action: none;
    overscroll-behavior: contain
}

@media(max-width:767px) {
    #pt-tailwind>.tree-navigation.tree-mobile-tools {
        position: fixed;
        inset: auto;
        inset-inline-start: 12px;
        bottom: var(--tree-tools-bottom, calc(80px + env(safe-area-inset-bottom, 0px)));
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 5px;
        border: 1px solid #e2eee7;
        border-radius: 12px;
        background: #fffffff2;
        box-shadow: 0 4px 18px #244b3a0d;
        z-index: 41;
        max-width: calc(100vw - 24px);
        visibility: visible;
        opacity: 1
    }

    #pt-tailwind>.tree-mobile-tools button {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        padding: 7px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #1e293b;
        box-shadow: none
    }

    #pt-tailwind>.tree-mobile-tools button .pt-icon {
        width: 17px;
        height: 17px
    }

    #pt-tailwind>.tree-mobile-tools .tree-zoom-label {
        margin: 0;
        padding: 0 6px;
        font-size: 10px;
        min-width: 38px;
        text-align: center;
        color: #7b8b83
    }

    #pt-tailwind .tree-workspace>.pt-sm>.tree-navigation {
        position: fixed;
        display: inline-flex !important;
        visibility: visible;
        opacity: 1;
        inset-inline-start: 12px;
        bottom: var(--tree-tools-bottom, calc(80px + env(safe-area-inset-bottom, 0px)));
        z-index: 40;
        max-width: calc(100vw - 24px)
    }

    #pt-tailwind .tree-workspace .tree-navigation button {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px
    }
}
/* Member details actions: keep destructive action scoped to this dialog. */
#pt-tailwind #myTree .member-details-footer {
  gap: 10px;
  flex-wrap: wrap;
}
#pt-tailwind #myTree .member-details-footer .tree-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid #ffd7df;
  border-radius: 12px;
  background: #fff5f7;
  color: #be123c;
  font: inherit;
  cursor: pointer;
}
#pt-tailwind #myTree .member-details-footer .tree-delete:hover {
  background: #ffe4ea;
  border-color: #fda4af;
}
#pt-tailwind #myTree .member-details-footer .tree-delete:focus-visible {
  outline: 3px solid #fda4af;
  outline-offset: 3px;
}
#pt-tailwind #myTree .member-details-footer .tree-delete svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Give different parent groups room for distinct sibling rails. */
#pt-tailwind .tree .tree-multiple-families > ul {
  padding-top: 70px;
}