/* #region FILTER DRWER */
    .prod_listing_filters_drawer{
        position: fixed;
        top:0;
        left: 0;
        background-color: white;
        border-right: solid 1px black;
        height: 100vh;
        width: 25vw;
        /* display: flex;
        flex-direction: column;
        justify-content: center; */
        z-index: 125;
        overflow: auto;
        z-index: 999999;

        transform: translateX(-100%);
        transition: all 0.3s ease-in-out; 
    }
    .prod_listing_filters_drawer_opened{
        transform: translateX(0);
    }

    /* mid size */
    @media (max-width: 1400px) {
        .prod_listing_filters_drawer{
            width: 50vw;
        }
    }
    /* small size */
    @media (max-width: 850px) {
        .prod_listing_filters_drawer{
            width: 100vw;
        }
    }
    
/* #endregion FILTER DRWER */

/* #region ALL FILTERS HOLDER */
    .listing_filters_holder{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
/* #endregion ALL FILTERS HOLDER */


/* #region FILTER HOLDERS */
    .prod_listing_filter_holder{
        width: 80%;
    }
/* #endregion FILTER HOLDERs */

.close_filters_drawer{
    cursor: pointer;
}


/* LOADING ANIMATION */
 
.LoadAnimationContainer {
    width: 200px; 
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    filter: url('#goo');
    animation: rotate-move 2s ease-in-out infinite;
}

.dot {  
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.dot-3 {
    background-color: var(--dot1color);
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
}

.dot-2 {
    background-color: var(--dot2color);
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
}
    
.dot-1 {  
    background-color: var(--dot3color);
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
}

@keyframes dot-3-move {
    20% {transform: scale(1)}
    45% {transform: translateY(-18px) scale(.45)}
    60% {transform: translateY(-90px) scale(.45)}
    80% {transform: translateY(-90px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
}

@keyframes dot-2-move {
    20% {transform: scale(1)}
    45% {transform: translate(-16px, 12px) scale(.45)}
    60% {transform: translate(-80px, 60px) scale(.45)}
    80% {transform: translate(-80px, 60px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
}

@keyframes dot-1-move {
    20% {transform: scale(1)}
    45% {transform: translate(16px, 12px) scale(.45)}
    60% {transform: translate(80px, 60px) scale(.45)}
    80% {transform: translate(80px, 60px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
}

@keyframes rotate-move {
    55% {transform: translate(-50%, -50%) rotate(0deg)}
    80% {transform: translate(-50%, -50%) rotate(360deg)}
    100% {transform: translate(-50%, -50%) rotate(360deg)}
}

@keyframes index {
    0%, 100% {z-index: 3}
    33.3% {z-index: 2}
    66.6% {z-index: 1}
}

/* LOADING ANIMATION */