:root {
    --estate-banner-element-size: 48px;
}

.estates-banner {
    padding: 0.5rem;
    padding-left: 3.5rem;
    display: flex;
    column-gap: 1.2rem;
    justify-content: flex-start;
    align-items: center;
}

.narrow-banner {
    height: max-content;
    overflow-y: auto;
}

.profile-pic-img {
    border: 1.5px solid var(--cool-grey);
    border-radius: 50%;
    height: var(--estate-banner-element-size);
    width: var(--estate-banner-element-size);
    object-fit: cover;
}

.pp-vertical-rule {
    width: 1px;
    border-radius: 2px;
    background-color: var(--cool-grey);
    opacity: 80%;
    height: var(--estate-banner-element-size);
}

.profile-pic-img__fallback {
    color: var(--cool-grey);
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative;
}

.profile-pic-img__fallback-svg {
    width: 100%;
    height: 100%;
    z-index: 50;
    position: absolute;
}

.profile-pic-img__fallback-svg>text {
    fill: var(--cool-grey);
    font-size: 2.0rem;
    letter-spacing: .1rem;
    stroke: black;
    stroke-width: 0.3rem;
    stroke-linejoin: round;
    paint-order: stroke;
    text-shadow: #363636 1px 0 3px;
}

.profile-pic-img:hover {
    outline: 2px solid var(--main-accent);
}

.estate-selected {
    border: 2.5px solid var(--main-accent);
}
