@keyframes perk-choice-appear {
    from { transform: scale(1.2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

PerkChoicePanel {
    animation: perk-choice-appear 0.2s ease-out forwards;
    width: 69%;
    //max-width: 69%;
    //height: 40%;
    position: absolute;
    align-items: center;
    justify-content: center;
    padding: 40px;
    bottom: 10px;
    font-family: Inter-Black;
    font-weight: 700;
    z-index: 1000;
    pointer-events: none;
    transition: all 0.1s ease-in-out;
    //opacity: 0;
    //&.open {
    opacity: 1;
    //}
    .viewing_label {
        position: absolute;
        top: -8px;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        text-align: center;

        label {
            font-size: 13px;
            color: #ffffff66;
            letter-spacing: 1px;
        }

        .viewing_avatar {
            width: 22px;
            height: 22px;
            background-size: cover;
            background-position: center;
        }
    }

    .num_left {
        position: absolute;
        bottom: 6%;
        //left: 20%;
        font-size: 15px;
        opacity: 0.75;
    }

    .lower_row {
        position: absolute;
        bottom: 7%;
        left: 0px;
        height: 20px;
        flex-direction: row;
        width: 100%;
        height: 20px;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .button_outer {
        position: relative;
        padding-top: 5px;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        cursor: pointer;
        pointer-events: all;
        flex-direction: row;

        .button_container {
            position: relative;
            overflow: hidden;
            background-position: center;
            background-size: 100% 100%;

            &:hover {
                filter: brightness(1.3);
            }

            &:active {
                transform: translateY(2px);
            }

            .button {
                position: relative;
                flex-direction: row;
                width: 120px;
                height: 35px;
                //background-color: rgba(0,0,0,.35);
                //box-shadow: -1px 2px 20px rgba( black, 0.7 );
                //backdrop-filter: blur(10px);
                color: rgba(232, 255, 244, 1);
                text-align: center;
                justify-content: center;
                align-items: center;
                flex-grow: 0;
                transition: all 0.1s ease-in-out;
            }

            .ctrl {
                position: relative;
                height: 35px;
                text-align: center;
                align-items: center;
                align-content: center;
                justify-content: center;
                color: #88B19E;
                font-family: 'Inter-Black';
                //background-color: rgba(0,0,0,0.8);
                //box-shadow: -1px 2px 20px rgba( black, 0.7 );
                //backdrop-filter: blur(10px);
                font-size: 15px;
                width: 40px;
                padding: 8px;

                img {
                    //background-image-tint: rgba(232, 255, 244, 0.8);
                }
            }

            .autoreroll_bar {
                position: absolute;
                top: 0px;
                left: 0px;
                right: 0px;
                height: 3px;
                background-color: rgba(0, 0, 0, 0.5);
                justify-content: flex-start;

                div {
                    background-color: rgba(255, 160, 50, 0.85);
                    height: 100%;
                }
            }

            .free_reroll_bar {
                position: absolute;
                bottom: 0px;
                left: 0px;
                right: 0px;
                height: 3px;
                background-color: rgba(0, 0, 0, 0.5);
                justify-content: flex-start;

                div {
                    background-color: rgba(160, 100, 255, 0.85);
                    height: 100%;
                }
            }

            .amount {
                position: relative;
                width: 40px;
                height: 35px;
                padding-right: 5px;
                padding-bottom: 1px;
                text-align: center;
                align-items: center;
                align-content: center;
                justify-content: center;
                color: #88B19E;
                font-family: 'Inter-Black';
                font-size: 20px;
                //background-color: rgba(0,0,0,0.8);
                //box-shadow: -1px 2px 20px rgba( black, 0.7 );
                //backdrop-filter: blur(10px);
                text-shadow: 1px 2.5px 0.75px black;
                white-space: nowrap;
                overflow: hidden;
            }
        }
    }

    .disabled {
        filter: grayscale(100%) brightness(25%);
        pointer-events: none;
        opacity: 0.8;
    }


    .itemselection {
        position: relative;
        flex-direction: row;
        //gap: 12px;
        bottom: 5%;
        justify-content: center;

        &.scrollable {
            justify-content: flex-start;
            overflow-x: scroll;
            width: 100%;
            pointer-events: all;
            padding-top: 20px;
            padding-right: 32px;
        }

        .item {
        }

        .timelimitbar {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.9);
            height: 2px;
            bottom: -6px;
            justify-content: flex-start;
            width: 100%;
        }
    }
}