#userlistwrapper {
    margin-left: 1em;
    width: calc(max-content + 1em);
    max-width: 20em;
    max-height: calc(100vh - 9em);
    padding: .5em;
    background: #fff;
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
    border-radius: 2px;
    font-size: .8em;
    /* overflow-x: hidden;
    overflow-y: auto; */
    display: none;
}

@media (pointer: fine) {
    #userlistwrapper {
        max-height: calc(100vh - 2em);
    }
}

#userlistwrapper.active {
    display: block;
}

#userlist {
    margin: 0;
    padding: 0;
    max-height: calc(100vh - 20em);
    overflow: auto;
}

@media (pointer: fine) {
    #userlist {
        max-height: calc(100vh - 13em);
    }
}

#userlist li {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: .4em calc(20px + .4em) .4em 2.4em;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    list-style: none;
}

#userlist li.hidden {
    display: none;
}

#userlist li:hover {
    background-color: #eee;
}

#userlist li::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
    bottom: 2px;
    width: 2em;
    background-color: #CDD7CC;
}

#userlist li div {
    margin: -.4em;
}

#userlist li i {
    padding: .5em;
}

#userlist li i:hover {
    background-color: rgba(0,0,0,0.25);
}

#userlist li.andere-marke::before {
    background-color: #96CED6;
}

#userlist li.iv-founders-edition::before {
    background-color: #8C6546;
}

#userlist li.iv-founders-edition.arctic-silver::before, #userlist .arctic-silver::before {
    background-color: #CDD7CC;
}

#userlist .magic-black::before {
    background-color: #242524;
}

#userlist .brilliant-silver::before {
    background-color: #B4B4B8;
}

#userlist .moon-white::before {
    background-color: #F4F4F4;
}

#userlist .race-blue::before {
    background-color: #3A59A6;
}

#userlist .velvet-red::before {
    background-color: #811C1B;
}

#userlist .graphite-grey::before {
    background-color: #88888F;
}

#userlist .quartz-grey::before {
    background-color: #3A3E43;
}

#userlist .energy-blue::before {
    background-color: #394F85;
}

#userlist .mamba-green::before {
    background-color: #ACC752;
}

#userlist .phoenix-orange::before {
    background-color: #D18E2E;
}

/** 2025 **/
#userlist .energy-blue-2025::before {
    background-color: #394F85;
}

#userlist .graphite-grey-2025::before {
    background-color: #88888F;
}

#userlist .magic-black-2025::before {
    background-color: #242524;
}

#userlist .mamba-green-2025::before {
    background-color: #ACC752;
}

#userlist .moon-white-2025::before {
    background-color: #F4F4F4;
}

#userlist .olibo-green-2025::before {
    background-color: #3e3e24;
}

#userlist .race-blue-2025::before {
    background-color: #3A59A6;
}

#userlist .smokey-diamond-silver-2025::before {
    background-color: #B4B4B8;
}

#userlist .steel-grey-2025::before {
    background-color: #86877F;
}

#userlist .velvet-red-2025::before {
    background-color: #811C1B;
}


#userlist li .tags {
    display: flex;
    gap: .2em;
}

#userlist li .tags span {
    display: inline-block;
    padding: .2em .4em;
    background-color: #811C1B;
    color: #fff;
    font-size: .8em;
    border-radius: 1em;
}

#editform {
    position: absolute;
    width: 300px;
    top: calc(50% - 6em);
    left: calc(50% - 150px);
    padding: 1em;
    background-color: #fff;
    border: 1px solid #999;
    border-radius: 5px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
    z-index: 999;
}

#editform .controls {
    display: flex;
}

#editform .controls input {
    min-width: 0;
    font-size: 1em;
    margin: 5px;
    cursor: pointer;
}