.melpazoom {
    transition: transform 0.3s ease;
    transition-duration: 0.2s;
}
.melpazoom:hover {
    transform: scale(1.03) translateZ(0px);
    transition-duration: 0.2s;
}
.melpazoom:active {
    transform: scale(0.9) translateZ(0px);
    transition-duration: 0.2s;
}

.badge-label {
    --spacing: .25rem;
    --radius-lg: .5rem;
    border-top-right-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    border-top-left-radius: var(--radius-lg);
    left: -1px;
    top: calc(var(--spacing) * -3);
}

.denom-shimmer:hover {
    background: transparent;
}

.denom-shimmer.selected {
    background: transparent;
}

.denom-shimmer {
    /*background: linear-gradient(#1e2022, #1e2022) padding-box, linear-gradient(135deg, #ffffff, #efefef 12.5%, #1e2022 25%, #ffffff 37.5%, #efefef 50%, #ffffff 62.5%, #1e2022 75%, #efefef 87.5%, #ffffff) border-box;*/
    background: linear-gradient(#18191a, #18191a) padding-box,        linear-gradient(            135deg,            #b0f3ff,            #7dd3fc 12.5%,            #1e2022 25%,            #b0f3ff 37.5%,            #7dd3fc 50%,            #b0f3ff 62.5%,            #1e2022 75%,            #7dd3fc 87.5%,            #b0f3ff        ) border-box;
    background-size: 300%;
    border-color: transparent;
    border-width: .05em;
    animation: shimmerAnimation 2.5s 
    ease-in-out infinite alternate;
    border-start-start-radius: 0;
}


.shimmer-fs:hover {
    background: transparent;
}

.shimmer-fs.selected {
    background: transparent;
}
.shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,hsla(0,0%,100%,0) 40%,hsla(0,0%,100%,.4) 50%,hsla(0,0%,100%,0) 60%);
    background-size: 300%;
    background-position-x: 100%;
    animation: shimmer-animation 2.5s linear infinite alternate;
    mix-blend-mode: overlay
}

.shimmer-fs {
    /*background: linear-gradient(#1e2022, #1e2022) padding-box, linear-gradient(135deg, #ffffff, #efefef 12.5%, #1e2022 25%, #ffffff 37.5%, #efefef 50%, #ffffff 62.5%, #1e2022 75%, #efefef 87.5%, #ffffff) border-box;*/
    
    /*background: linear-gradient(#18191a, #18191a) padding-box, linear-gradient(135deg, #d14646, #700000 12.5%, #1e2022 25%, #d14646 37.5%, #700000 50%, #d14646 62.5%, #1e2022 75%, #700000 87.5%, #d14646) border-box;*/
    background: linear-gradient(#18191a, #18191a) padding-box, linear-gradient(135deg, #d14646, #ff8f8f 12.5%, #1e2022 25%, #d14646 37.5%, #ff8f8f 50%, #ffffff 62.5%, #1e2022 75%, #ff8f8f 87.5%, #d14646) border-box;
    /*background: linear-gradient(#1e2022, #1e2022) padding-box, linear-gradient(135deg, #fde494, #ffd23f 12.5%, #1e2022 25%, #fde494 37.5%, #ffd23f 50%, #fde494 62.5%, #1e2022 75%, #ffd23f 87.5%, #fde494) border-box;*/
    background-size: 300%;
    border-color: transparent;
    border-width: .05em;
    animation: shimmerAnimation 2.5s 
    ease-in-out infinite alternate;
    border-start-start-radius: 0;
}

.shimer-fs {
    animation: shimmerAnimation 2.5s 
    linear infinite alternate;
    background-image: linear-gradient(135deg, #fff0 40%, #fff6, #fff0 60%);
    background-size: 300%;
    border-end-end-radius: 12px;
    border-end-start-radius: 0;
    border-start-end-radius: 12px;
    border-start-start-radius: 12px;
    mix-blend-mode: overlay;
    height: 100%;
    inset-inline-start: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.fs-bg {
    background-image: linear-gradient(to right, #d14646, #700000);
}

.fs-text {
    color: #ffd23f;
}

@keyframes shimmer-animation {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 100% 100%
    }
}

@keyframes shimmerAnimation {
    0% {
        background-position: 0 0
    }

    to {
        background-position: 100% 100%
    }
}



.max-w-none {
    max-width: none;
}

/*.melpazoomGame {*/
/*  transition: transform 0.2s ease;*/
/*  transition-duration: 0.2s;*/
/*}*/

.melpazoomGameZoom:hover {
    /*transform: scale(1.03) translateZ(0px);*/
    /*transition-duration: 0.3s;*/
    transform: translateY(0px) scale(1.05) translateZ(0px)!important;
}

 /*efek saat di klik */
.melpazoomGame:active {
    /*transition-duration: 0.3s;*/
  transform: scale(0.9) rotate(var(--tw-rotate, 0deg)) 
             translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
             skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0));
}

/* efek hover rotasi */
/*.melpazoomGame:hover {*/
/*  --tw-rotate: 3deg;*/
/*  transform: scale(1) rotate(var(--tw-rotate))*/
/*             translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))*/
/*             skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0));*/
/*}*/

.active\:translate-y-0\.5:active {
    --tw-translate-y: 0.125rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.active\:scale-95:active {
    --tw-scale-x: .95;
    --tw-scale-y: .95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.load {
    background: rgba(31, 33, 46, 0.50);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
    display: none;
}
.load.show{
    display: block;
    background-image: url(/assets/image/loading-order.gif);
}