.popup-overlay{
    position: absolute;
    background-color: var(--color-darken-extra) !important;
    height: 100% !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 995;
    opacity: 0;
    -ms-overflow-style: none !important ;
    scrollbar-width: none !important ;
}
.popup-overlay-transparent{
    position: absolute;
    background-color: var(--color-darken-extra) !important;
    height: 100% !important;
    width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 995;
    opacity: 0;
    -ms-overflow-style: none !important ;
    scrollbar-width: none !important ;
}
.popup-container{
    position: absolute;
    background-color: var(--color-main) !important;
    height: calc(100% - 1rem) !important;
    width: 100% !important;
    left: 0 !important;
    top: 100%;
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
    transition: transform 300ms ease-in-out;
    -webkit-transition: transform 300ms ease-in-out;
    -moz-transition: transform 300ms ease-in-out;
    -o-transition: transform 300ms ease-in-out;
    z-index: 996;
}
.popup-container-fullscreen{
    position: absolute;
    background-color: var(--color-main) !important;
    height: calc(100% - 1rem) !important;
    width: 100% !important;
    left: 0 !important;
    top: 100%;
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
    transition: transform 300ms ease-in-out;
    -webkit-transition: transform 300ms ease-in-out;
    -moz-transition: transform 300ms ease-in-out;
    -o-transition: transform 300ms ease-in-out;
    z-index: 996;
}
.popup-container--actions{
    position: absolute;
    background-color: var(--color-main) !important;
    height: calc(100% - 1rem) !important;
    width: 100% !important;
    left: 0 !important;
    top: 100%;
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
    transition: transform 300ms ease-in-out;
    -webkit-transition: transform 300ms ease-in-out;
    -moz-transition: transform 300ms ease-in-out;
    -o-transition: transform 300ms ease-in-out;
    z-index: 996;
}
.popup-container--confirmation{
    position: absolute;
    background-color: var(--color-main) !important;
    height: calc(100% - 1rem) !important;
    width: 100% !important;
    left: 0 !important;
    top: 100%;
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
    transition: transform 300ms ease-in-out;
    -webkit-transition: transform 300ms ease-in-out;
    -moz-transition: transform 300ms ease-in-out;
    -o-transition: transform 300ms ease-in-out;
    z-index: 996;
}
.popup-container--optionlist{
    position: absolute;
    background-color: var(--color-main) !important;
    max-height: calc(100% - 1rem) !important;
    height: fit-content;
    /* min-height: 5rem; */
    width: 100% !important;
    left: 0 !important;
    top: 100%;
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
    transition: transform 300ms ease-in-out;
    -webkit-transition: transform 300ms ease-in-out;
    -moz-transition: transform 300ms ease-in-out;
    -o-transition: transform 300ms ease-in-out;
    z-index: 996;
    padding: 1rem;
}
.popup-container--optionlist-option{
    position: relative;
    width: calc(100% - 2rem);
    cursor: pointer;
    text-align: center !important;
    height: 4rem;
    background-color: var(--color-darken);
    margin-bottom: 1rem;
    line-height: 4rem;
    border-radius: 1rem;
}
.popup-button--close{
    position: relative;
    border-radius: 1rem;
    right: 1rem;
    top: 1rem;
}
.popup-title{
    position: relative;
    line-height: 2rem;
    width: fit-content;
    max-width: calc(100% - 3rem);
    left: 1.5rem;
    top: 1rem;
}
.popup-text{
    position: relative;
    line-height: 2rem;
    color: white;
    width: fit-content;
    max-width: calc(100% - 2rem);
    left: 1rem;
    top: 1rem;
}
.popup-content{
    position: relative;
    top: 2rem;
    left: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 4rem);
    /* background-color: rgba(137, 43, 226, 0.2); */
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none !important ;
    scrollbar-width: none !important ;
}
.popup-content--actions{
    position: relative;
    top: 2rem;
    left: 1rem;
    width: calc(100% - 2rem);
    height: calc(100% - 9rem);
    /* background-color: rgba(137, 43, 226, 0.2); */
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none !important ;
    scrollbar-width: none !important ;
}
.popup-content::-webkit-scrollbar { 
    display: none !important ;
} 
.popup-content--actions::-webkit-scrollbar { 
    display: none !important ;
} 
.popup-button--action__left{
    position: absolute;
    bottom: 1rem !important;
    left: 1rem;
    float: left;
    width: calc((100% - 2rem) / 2 - 0.5rem);
    height: 4rem;
    line-height: 4rem;
    border-radius: 1rem;
    color: var(--color-main) !important;
    text-align: center;
    color: white;
    cursor: pointer;
}
.popup-button--action__right{
    position: absolute;
    bottom: 1rem !important;
    right: 1rem;
    float: right;
    width: calc((100% - 2rem) / 2 - 0.5rem);
    height: 4rem;
    line-height: 4rem;
    border-radius: 1rem;
    color: white !important;
    text-align: center;
    cursor: pointer;
}


/* @media screen and (min-width: 700px) { */
@media (width >= 700px) {
    .popup-overlay{
        position: absolute;
        background-color: var(--color-darken-extra) !important;
        height: 100% !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 995;
        opacity: 0;
        transition: opacity 200ms ease-in-out;
        -webkit-transition: opacity 200ms ease-in-out;
        -moz-transition: opacity 200ms ease-in-out;
        -o-transition: opacity 200ms ease-in-out;
    }
    .popup-overlay-transparent{
        position: absolute;
        background-color: transparent !important;
        height: 100% !important;
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        z-index: 995;
        opacity: 0;
        transition: opacity 200ms ease-in-out;
        -webkit-transition: opacity 200ms ease-in-out;
        -moz-transition: opacity 200ms ease-in-out;
        -o-transition: opacity 200ms ease-in-out;
    }
    .popup-container{
        position: absolute;
        background-color: var(--color-main) !important;
        height: 40rem !important;
        width: 50rem !important;
        max-width: 100% !important;
        max-height: 100% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 1rem;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
        transition: opacity 200ms ease-in-out;
        -webkit-transition: opacity 200ms ease-in-out;
        -moz-transition: opacity 200ms ease-in-out;
        -o-transition: opacity 200ms ease-in-out;
        z-index: 996;
        color: white;
    }
    .popup-container-fullscreen{
        position: absolute;
        background-color: var(--color-main) !important;
        height: calc(100% - 6rem) !important;
        width: calc(100% - 6rem) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 1rem;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
        transition: opacity 200ms ease-in-out;
        -webkit-transition: opacity 200ms ease-in-out;
        -moz-transition: opacity 200ms ease-in-out;
        -o-transition: opacity 200ms ease-in-out;
        z-index: 996;
        color: white;
    }
    .popup-container--actions{
        position: absolute;
        background-color: var(--color-main) !important;
        height: 50rem !important;
        width: 50rem !important;
        max-width: 100% !important;
        max-height: 100% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 1rem;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
        transition: opacity 200ms ease-in-out;
        -webkit-transition: opacity 200ms ease-in-out;
        -moz-transition: opacity 200ms ease-in-out;
        -o-transition: opacity 200ms ease-in-out;
        z-index: 996;
        color: white;
    }
    .popup-container--confirmation{
        position: absolute;
        background-color: var(--color-main) !important;
        height: 15rem !important;
        width: 50rem !important;
        max-width: 100% !important;
        max-height: 100% !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 1rem;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
        transition: opacity 200ms ease-in-out;
        -webkit-transition: opacity 200ms ease-in-out;
        -moz-transition: opacity 200ms ease-in-out;
        -o-transition: opacity 200ms ease-in-out;
        z-index: 996;
        color: white;
    }
    .popup-container--optionlist{
        position: absolute;
        background-color: var(--color-main) !important;
        /* background-color: orange !important; */
        height: fit-content !important;
        width: fit-content !important;
        max-width: 100% !important;
        max-height: 100% !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
        left: unset !important;
        box-shadow: 0px 0px 1rem rgba(0, 0, 0, 0.5);
        /* left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; */
        padding: 1rem;
        flex-direction: column;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: flex-start; /* add this line */

        border-radius: 1rem;
        border-top-left-radius: 1rem !important;
        border-top-right-radius: 1rem !important;
        transition: opacity 200ms ease-in-out;
        -webkit-transition: opacity 200ms ease-in-out;
        -moz-transition: opacity 200ms ease-in-out;
        -o-transition: opacity 200ms ease-in-out;
        z-index: 996;
        color: white;
    }
    .popup-container--optionlist-option{
        width: 100%;
        cursor: pointer;
    }
    .popup-container--optionlist-option:hover{
        width: 100%;
        cursor: pointer;
        color: var(--color-theme);
    }
    .popup-title{
        position: relative;
        line-height: 2rem;
        width: fit-content;
        left: 1rem;
        top: 1rem;
    }
    .popup-content{
        position: relative;
        top: 2rem;
        left: 1rem;
        width: calc(100% - 2rem);
        height: calc(100% - 5rem);
        border-radius: 1rem;
        /* background-color: rgba(137, 43, 226, 0.2); */
        overflow-x: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none !important ;
        scrollbar-width: none !important ;
    }
    .popup-content--actions{
        position: relative;
        top: 2rem;
        left: 1rem;
        width: calc(100% - 2rem);
        height: calc(100% - 10rem);
        border-radius: 1rem;
        /* background-color: rgba(137, 43, 226, 0.2); */
        overflow-x: hidden;
        overflow-y: scroll;
        -ms-overflow-style: none !important ;
        scrollbar-width: none !important ;
    }
    .popup-content::-webkit-scrollbar { 
        display: none !important ;
    } 
    .popup-content--actions::-webkit-scrollbar { 
        display: none !important ;
    } 
}