/* user ability */
.product-infobox .item {
    position: relative;
    display: flex;
    align-items: center;
    font-size: .9em;
    background: #fff;
    /* box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);*/
    height: 100%;
    border: solid 1px #ddd;
    border-radius: var(--brediusmedium);
}

    .product-infobox .item .text {
        display: flex;
        flex-direction: column;
        gap: .75em;
        flex-grow: 1;
    }

    .product-infobox .item .title {
        font-weight: 600;
    }

    .product-infobox .item .subtitle {
        color: var(--textcolormed)
    }

    .product-infobox .item .content {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: .5em;
    }

    .product-infobox .item > .icon {
        border-radius: var(--brediussmall);
        padding: 0;
        display: flex;
        flex-direction: column;
        max-width: calc(30px + 2vw);
        max-height: calc(30px + 2vw);
        flex-grow: 0;
    }

        .product-infobox .item > .icon .title {
            position: absolute;
            bottom: -6px;
            padding: .2em 1em;
            font-size: .8em;
            border: solid 1px #ddd;
            background: #f1f1f1;
            border-radius: 50rem;
        }

.user-level-container {
    display: flex;
    gap: .3em;
}

.user-level {
    padding: .2em;
    display: flex;
    align-items: center;
    gap: .5em;
}

    .user-level.coin {
        background: #ffe7a6;
        border-color: #ffca3d;
    }

        .user-level.coin .icon {
            width: 16px;
        }

    .user-level.level .icon {
        margin-top: -16px;
    }

    .user-level .icon.flip-coin {
        padding: 0;
        animation: flip 5s infinite;
        transform-origin: center;
    }

    .user-level.titan {
        background: #eee;
        border-color: #ccc;
    }

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }

    10% {
        transform: rotateY(180deg);
    }

    20% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}


@media (max-width: 480px) {
    .user-level-container {
        position: relative;
        margin-top: -15px;
    }

    .product-tabs .nav.nav-tabs .nav-item a {
        padding: 5px 8px 6px;
    }
}
/* user ability */