/* Popup overlay */

.revx-popup {
    width: 100%;
    height: 100%;
    position: fixed !important;
    top: 0px;
    left: 0px;
    z-index: 9999;
}

.revx-popup__container {
    position: relative;
    z-index: 9999;
    width: 90vw;
    max-width: 640px;
    display: none;
}

.revx-popup__content {
    max-width: 640px;
    /* min-width: 500px; */
    /* max-height: 630px; */
    max-height: 90vh;
    height: 100%;
    /* width: 100%; */
    /* overflow-y: auto; */
    position: relative; /* Popup close icon */
    box-sizing: content-box;
}
.revx-buyx-gety-grid.revx-popup__content .revx-builderSlider-icon {
	display: flex !important;
}

.revx-popup__overlay,
.revx-floating-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35); /* Semi-transparent overlay */
    z-index: 9999;
    display: none;
}

.revx-popup__content::-webkit-scrollbar {
    height: 12px; /* for horizontal scrollbars */
    width: 12px;
}

.revx-popup__content::-webkit-scrollbar-track {
    background: #E2E4E9;
    border-radius: 6px;
}
.revx-popup__content::-webkit-scrollbar-thumb {
    background: #868C98;
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
    height: 6px;
    cursor: grab;
}


.revx-popup-container .revx-slider  {
    /* max-width: 350px !important; */
    flex-basis: 65%;
}
.revx-popup-container .revx-selected-product-container {
    min-width: 180px;
}
.revx-popup-container .revx-selected-item .revx-flex {
    flex-direction: row !important;
}
/* Popup content */
/* Additional styles for the campaign items */

.flash {
    animation-name: flash;
    animation-fill-mode: both;
}

.flash-out {
    animation-name: flashOut;
    animation-fill-mode: both;
}

/* ============================
    Bounce Animation
=============================== */

.bounce-in, .bounce-out {
    top: auto !important;
}

.bounce-in {
    animation-name: bounceIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.bounce-out {
    animation-name: bounceOut;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@keyframes bounceOut {
    0% {
        transform: scale3d(1, 1, 1);
    }
    20% {
        transform: scale3d(0.9, 0.9, 1);
    }
    50%, 55% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, .1);
    }
    100% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
}


/* ============================
    Popup Zoom Animation
=============================== */
.zoom-in {
    animation-name: popupZoomIn;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.zoom-out {
    animation-name: popupZoomOut;
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes popupZoomIn {
    0% {
        opacity: 0;
        transform: scale(.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popupZoomOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(.5);
    }
}


/* ============================
    FLASH Animation
=============================== */
/* Flash animation */
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

@keyframes flashOut {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}


/* ============================
    VIBRATE Animation
=============================== */


.vibrate {
    animation-name: vibrate;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.vibrate-out {
    animation-name: vibrateOut;
    animation-duration: 1s;
    animation-fill-mode: both;
}


@keyframes vibrate {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-2px, -2px);
    }
    40% {
        transform: translate(2px, 2px);
    }
    60% {
        transform: translate(-2px, -2px);
    }
    80% {
        transform: translate(1px, 1px);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes vibrateOut {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(-100%);
    }
}




/* ============================
    FLIP  Animation
=============================== */

.flip-in {
    animation-name: flipInX;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.flip-out {
    animation-name: flipOutX;
    animation-duration: 1s;
    animation-fill-mode: both;
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotateX(-10deg);
        opacity: 0.5;
    }

    70% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 0.75;
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }

    30% {
        transform: perspective(400px) rotateX(-10deg);
        opacity: 0.5;
    }

    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}


/* ============================
    Shake Animation
=============================== */


.shake {
    animation-name: shake;
    animation-duration: 0.82s;
    animation-fill-mode: both;
}

.shake-out {
    animation-name: shakeOut;
    animation-duration: 0.82s;
    animation-fill-mode: both;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

@keyframes shakeOut {
    10%, 90% {
        transform: translate3d(1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(-2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(-4px, 0, 0);
    }
}


/* ============================
    Wobble Animation
=============================== */

.wobble {
    animation-name: wobble;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.wobble-out {
    animation-name: wobbleOut;
    animation-duration: 1s;
    animation-fill-mode: both;
}
/* Wobble animation */
@keyframes wobble {
    0% {
        transform: translateX(0%);
    }
    15% {
        transform: translateX(-25%) rotate(-5deg);
    }
    30% {
        transform: translateX(20%) rotate(3deg);
    }
    45% {
        transform: translateX(-15%) rotate(-3deg);
    }
    60% {
        transform: translateX(10%) rotate(2deg);
    }
    75% {
        transform: translateX(-5%) rotate(-1deg);
    }
    100% {
        transform: translateX(0%);
    }
}

@keyframes wobbleOut {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}


/* ============================
    Swing Animation
=============================== */

.swing {
    animation-name: swing;
    animation-duration: 1s;
    animation-fill-mode: both;
}

.swing-out {
    animation-name: swingOut;
    animation-duration: 1s;
    animation-fill-mode: both;
}

@keyframes swing {
    20% {
        transform: rotate3d(0, 0, 1,    15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

@keyframes swingOut {
    20% {
        transform: rotate3d(0, 0, 1, -15deg);
    }

    40% {
        transform: rotate3d(0, 0, 1, 10deg);
    }

    60% {
        transform: rotate3d(0, 0, 1, -5deg);
    }

    80% {
        transform: rotate3d(0, 0, 1, 5deg);
    }

    100% {
        transform: rotate3d(0, 0, 1, 0deg);
    }
}