.pop-in {
    opacity: 0;
    transform: scale(0.5);
    animation: popIn 0.5s forwards;
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.results {
    margin: 2vh auto;
    height: 88vh;
    overflow: hidden;
    overflow-y: scroll;
    z-index: 5;

    .result {
        position: relative;
        /* background-color: white; */
        color: #fff;
        margin-top: 0;
        margin-right: 10px;
        margin-bottom: 15px;
        margin-left: auto;
        border-radius: 999px;
        line-height: 3em;
        border: none;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
        height: 70px;
        display: flex;
        flex-direction: row;
        gap: 8px;
        /* width: 541px; */
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(5px);


        img {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            border: 2px solid #adb5bd;
            margin: auto 0 auto 5px;

        }

        .color-I {
            border: 2px solid yellow;

        }

        .color-G {
            border: 2px solid green !important;

        }

        .color-B {
            border: 2px solid blue;

        }

        .color-L {
            border: 2px solid purple;

        }

        .result-name {
            color: black;
            text-decoration: none;
            margin: 0;
            display: flex;
            flex-direction: column;
            margin: auto 0;
            width: 300px;
        }

        .result-extra-info {
            color: black;
            font-size: 0.7em;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            width: 130px;
            margin: auto 0;
            padding-right: 30px;

            span {
                /* display: inline-block; */
                padding: .25em .4em;
                font-size: 75%;
                font-weight: 700;
                line-height: 1;
                text-align: center;
                white-space: nowrap;
                vertical-align: baseline;
                border-radius: .25rem;
                transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                background-color: gray;
                text-indent: 0;
                color: whitesmoke;
                height: 10px;
                float: right;

            }
        }
    }

    .result:hover {
        background-color: #eee;
    }
}