.analytics_locked {
    filter: blur(0.5rem);
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.analytics_locked .prod_hover_a:hover {
    text-decoration: none !important;
}

.analytics_overlay {
    width: 80% !important;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    /* pointer-events: none; */
    margin-top: 25px;
    /* padding-top: 40%; */
}

.prod_hover {
    position: relative;
}

.noselect {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.product_trend_container {
    display: none;
}

.prod_hover_active .graph_detail_text {
    display: table;
}

.prod_hover_active .product_trend_container {
    display: table;
}

.graph_detail_text {
    font-size: 10px;
    text-align: center !important;
    color: #45ff4d;
    display: none;
}

.trending_sticky_card_container {
    /* display:table; */
    /* position: fixed; */
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    width: 100%;
    z-index: 999;
}

.trending_sticky_card {
    background-color: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(3px) contrast(60%);
    width: 400px;
    height: 180px;
    margin: auto;
    margin-bottom: 15px;
    border-radius: 15px;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
    background-color: transparent !important;
    font-weight: bold !important;
    color: white !important;
    font-weight: 900 !important;

}

.loader {
    border: 8px solid #f3f3f3;
    /* Light grey */
    border-top: 8px solid #45ff4d !important;
    /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.pixel-art {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

html,
body {
    height: 100vh;
}

.relative {
    display: relative;
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

#panorama-container {
    width: 100%;
    height: 450px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    border-radius: 8px;
}

#panorama-image {
    height: 450px;
}

#message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 5px;
    white-space: nowrap;
}

.anim-review-width {
    color: yellow;
    transition: width 1.5s;
}

.pdp-low-rating {
    color: red !important;
}

.t {
    margin-left: 15px;
}

#rating-emoji-container {
    position: relative;
    display: inline-block;
}

.rating-emoji {}

.rating-emoji-particle {
    position: absolute;
    transition: opacity 0.2s linear;
}


/*
<div class="icon-bedex icon-bedex-mash-up icon-bedex-size-xs"></div>
<div class="icon-bedex icon-bedex-persona icon-bedex-size-sm"></div>
<div class="icon-bedex icon-bedex-skin-pack icon-bedex-size-md"></div>
<div class="icon-bedex icon-bedex-texture-pack icon-bedex-size-lg"></div>
<div class="icon-bedex icon-bedex-world icon-bedex-size-xl"></div>
*/
/* Icon classes for individual images */
/* Icon classes for individual images */
/* Icon classes for individual images */
/* Icon classes for individual images */
/* Icon classes for individual images */
.icon-bedex-mash-up,
.icon-bedex-persona,
.icon-bedex-skin-pack,
.icon-bedex-texture-pack,
.icon-bedex-world {
    background-image: url('/images/icons/mash_up.png');
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    position: relative;
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Spring-like ease */
}

.icon-bedex-persona {
    background-image: url('/images/icons/persona.png');
}

.icon-bedex-skin-pack {
    background-image: url('/images/icons/skin_pack.png');
}

.icon-bedex-texture-pack {
    background-image: url('/images/icons/texture_pack.png');
}

.icon-bedex-world {
    background-image: url('/images/icons/world.png');
}

/* Define the hover effect with scale transformation */
.icon-bedex:hover {
    transform: scale(1.5); /* Scale up on hover */
    animation: scaleDown 0.3s ease-in 0.3s forwards; /* Scale down after a delay */
}

@keyframes scaleDown {
    to {
        transform: scale(1); /* Scale down after the delay */
    }
}

/* Size classes */
.icon-bedex-size-xs {
    width: 24px;
    height: 24px;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
}

.icon-bedex-size-sm {
    width: 36px;
    height: 36px;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
}

.icon-bedex-size-md {
    width: 48px;
    height: 48px;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
}

.icon-bedex-size-lg {
    width: 72px;
    height: 72px;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
}

.icon-bedex-size-xl {
    width: 96px;
    height: 96px;
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
}