.form-small {
    max-width: 20rem;
}

.form-medium {
    max-width: 30rem;
}

.form-large {
    max-width: 40rem;
}

.form-small,
.form-medium,
.form-large {
    margin-left: auto;
    margin-right: auto;
}

.table-responsive > .table tr:last-child > td {
    border-bottom: none;
}

.no-caret::after {
    content: none !important;
}

.tree-member-item:hover {
    background-color: var(--bs-tertiary-bg);
}

.union {
    --size: 8rem;

    height: var(--size);
    width: var(--size);
    border: dashed 3px var(--bs-primary);
    border-radius: var(--size);
    position: relative;
    overflow: hidden;
}

.union:hover {
    border-color: rgb(var(--bs-link-hover-color-rgb));
}

.union.union-new,
.union .union-body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
}

.union-body {
    height: 100%;
}

.union-image {
    height: 100%;
    object-fit: cover;
}

.img-profile {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.avatar {
    background-color: rgb(var(--bs-body-bg-rgb));
    border-radius: var(--bs-border-radius-pill);
    padding: .25rem .75rem .25rem .25rem;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    position: relative;
    box-shadow: var(--bs-box-shadow-sm);
    line-height: 1em !important;
}

.avatar.avatar-actions {
    padding-right: .25rem;
}

.avatar-thumbnail {
    --thumbnail-size: 3rem;

    height: var(--thumbnail-size);
    width: var(--thumbnail-size);
    border-radius: var(--bs-border-radius-pill);
    overflow: hidden;
    position: relative;
    font-size: var(--thumbnail-size);
}

.avatar-thumbnail > img {
    object-fit: cover;
    height: 100%;
    aspect-ratio: 1;
    vertical-align: top !important;
}

.avatar-thumbnail-sm {
    --thumbnail-size: 1.5rem;
}

.avatar-placeholder {
    height: 100%;
    aspect-ratio: 1;
    background-color: var(--bs-secondary);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .75em;
}

.avatar-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.avatar-group .avatar {
    width: 100%;
}

.avatar-link {
    --link-width: .5rem;
    --link-length: 1.5rem;
    --link-color: var(--bs-secondary);
}

.avatar-link.avatar-link-v {
    border-left: var(--link-width) solid var(--link-color);
    height: var(--link-length);
    width: 0;
}

.avatar-link.avatar-link-h {
    border-top: var(--link-width) solid var(--link-color);
    width: var(--link-length);
    height: 0;
}

.tree-link {
    --link-color: var(--bs-secondary);
    --link-width: .25rem;
    --link-radius: .5rem;
    width: 50%;
    height: 1rem;
    border-bottom: var(--link-width) solid var(--link-color);
}

.tree-link.tree-link-start {
    border-right: var(--link-width) solid var(--link-color);
    border-bottom-right-radius: var(--link-radius);
}

.tree-link.tree-link-end {
    border-left: var(--link-width) solid var(--link-color);
    border-bottom-left-radius: var(--link-radius);
}

.tree-link.tree-link-center {
    border-left: var(--link-width) solid var(--link-color);
    border-bottom: none;
    width: 0;
}

#breadcrumb {
    top: -1px;
}

.bg-body-blur {
    --bg-opacity: .8;
    --blur-amount: 1rem;
    background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bg-opacity)) !important;
    backdrop-filter: blur(var(--blur-amount));
}

.alert p:last-of-type {
    margin-bottom: 0;
}

.description {
    background-color: var(--bs-secondary-bg);
    padding: 1rem;
    border-radius: var(--bs-border-radius);
}

.description p:last-of-type {
    margin-bottom: 0;
}

.popover {
    box-shadow: var(--bs-popover-box-shadow) !important;
}

main.tree-view {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

#tree-view-panel {
    max-width: 100dvw;
    max-height: 100%;
    overflow: auto;
}


@media (min-width: 768px) {
    main.tree-view {
        overflow: hidden;
    }
    
    #tree {
        flex: 1 1 auto;
        overflow: auto;
        border-top: var(--bs-border-width) solid var(--bs-border-color);
    }

    #tree-option-panel {
        width: 20rem;
        max-width: 20rem;
        border-right: var(--bs-border-width) solid var(--bs-border-color);
    }

    #tree-view-panel {
        min-width: 0;
        overflow: auto;
    }
}

.event {
    /* min-height: max-content; */
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    border-radius: var(--bs-border-radius-pill);
    padding: .25rem;
}

.event-line {
    background-color: var(--bs-secondary);
    width: .25rem;
    height: 1rem;
    margin-left: 3rem;
}

.event .event-icon {
    --icon-size: 2rem;
    height: var(--icon-size);
    width: var(--icon-size);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--bs-border-radius-pill);
}

.event > .event-message {
    padding-left: .5rem;
    padding-right: .5rem;
}

.event > .event-message p {
    margin-bottom: 0;
    color: var(--bs-secondary);
}

.event > .event-message strong {
    color: var(--bs-body-color) !important;
}

.event > .event-message a {
    color: var(--bs-body-color) !important;
    text-decoration: none;
}

.event > .event-message a:hover {
    text-decoration: underline;
}