/* .personCard {
    background: var(--DEBIAN_RED) !important;
} */

:root {
    --FEMALE: var(--DEBIAN_RED);
    --MALE: var(--CURIOS_BLUE);
}

.personCard.M {
    background: var(--MALE) !important;
}

.personCard.F {
    background: var(--FEMALE) !important;
}

.genLayout {
    height: 33%;
    width: 100%;
    background: none;
    z-index: 1;
    position: relative;
    overflow: visible;
}

.genLayout span {
    text-align: center;
}

.genLayout span b {
    margin: 0;
}

.ElegenLayout {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.parsList {
    position: absolute;
    left: 10%;
}

.gen1 .sel {
    position: absolute;
    left: auto;
    right: auto;
}

.genLayout.gen2 {
    overflow: auto !important;
    justify-content: flex-start;
    /* padding-inline: 50%; */
    /* creates visual centering */
    /* transform: translateX(50%); */
    width: fit-content;
    max-width: 100%;
}

.lineLayout {
    width: 100%;
    height: 100%;
    position: absolute;
    background: none;
    z-index: 0;
}

.parsList {
    background: none !important;
}

.menu {
    z-index: 2;
    position: absolute;
    left: 0em;
    top: 0em;
}

.menu .selected {
    background-color: var(--level1) !important;
    filter: brightness(70%);
}

.personCard Layout {
    background: none;
}

.personCard Layout .lifespan {
    font-size: smaller;
}

.dashed line {
    border-style: dashed;
}

.noteLayout {
    position: absolute;
    right: 10%;
    top: -20%;
    height: 40vh;
    background: none;
}

.noteLayout .card {
    background: var(--level1);
    /* width: 30em; */
    max-width: 30vw;
}