/*
 * Styles for element fce-button-elem-popup
 */
.fancybox-container .fancybox-bg{
    background-color: #000;
}

.fce-button-elem-popup{
    padding: 0;
    background-color: transparent;
    max-width: 1040px;
    overflow: visible;
}

.fce-button-elem-popup .fce-bep-wrap-main{
    padding: 60px;
    max-height: 770px;
    overflow: auto;
}

.fce-button-elem-popup .fce-contact-form.common-form{
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    overflow: visible;
}

.fce-button-elem-popup .fce-contact-form form.sent .wpcf7-response-output{
    display: inline-block;
}

/* .fce-button-elem-popup.elem-light [data-fancybox-close]{ */
.fce-button-elem-popup [data-fancybox-close]{
    color: var(--bagels-dark_a);
}

@media (min-width: 500px) {
    .fce-button-elem-popup [data-fancybox-close]{
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--bagels-neutral_50);
        top: -60px;
    }

    .fce-button-elem-popup.elem-dark [data-fancybox-close]{
        background-color: var(--bagels-neutral_100);
    }

    .fce-button-elem-popup [data-fancybox-close] svg{
        width: 85%;
        height: auto;
    }

}

@media (min-width: 992px) {
    .fce-button-elem-popup [data-fancybox-close]:hover{
        background-color: var(--bagels-neutral_200);
    }
}

@media (min-width: 1366px) and (max-height: 700px) and (orientation: landscape) {
    .fce-button-elem-popup .fce-bep-wrap-main{
        max-height: 500px;
        overflow: auto;
    }

    /* Hidden scrollbar */
    .fce-button-elem-popup .fce-bep-wrap-main::-webkit-scrollbar{
        width: 0px; /* width of the entire scrollbar */
    }

    .fce-button-elem-popup .fce-bep-wrap-main::-webkit-scrollbar-track{
        background-color: transparent; /* color of the tracking area */
    }

    .fce-button-elem-popup .fce-bep-wrap-main::-webkit-scrollbar-thumb{
        background-color: transparent;    /* color of the scroll thumb */
        border-radius: 0px;       /* roundness of the scroll thumb */
        border: none;  /* creates padding around scroll thumb */
    }

    /*Firefox*/
    .fce-button-elem-popup .fce-bep-wrap-main{
        /* overflow: auto; */
        scrollbar-width: none;          /* "auto" or "thin" */
        scrollbar-height: none;          /* "auto" or "thin" */
        scrollbar-color: transparent transparent;   /* scroll thumb and track */
    }

    /*Future-Proof */
    /* Works on Firefox */
    .fce-button-elem-popup .fce-bep-wrap-main{
        scrollbar-width: none;
        scrollbar-height: none;
        scrollbar-color: transparent transparent;
    }

    /* Works on Chrome, Edge, and Safari */
    .fce-button-elem-popup .fce-bep-wrap-main::-webkit-scrollbar{
        width: 0px;
        height: 0px;
    }

    .fce-button-elem-popup .fce-bep-wrap-main::-webkit-scrollbar-track{
        background-color: transparent;
    }

    .fce-button-elem-popup .fce-bep-wrap-main::-webkit-scrollbar-thumb{
        background-color: transparent;
        border-radius: 0px;
        border: none;
    }

    .fce-button-elem-popup .fce-bep-wrap-main::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }
    /*Future-Proof */
/* Hidden scrollbar */
}

@media (max-width: 1199px){
    .fce-button-elem-popup .fce-bep-wrap-main {
        padding: 30px 40px 40px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
    .fce-button-elem-popup .fce-bep-wrap-main{
        max-height: 600px;
        overflow: auto;
    }
}

@media (min-width: 500px) and (max-width: 991px) {
    .fce-button-elem-popup{
        margin-right: 15px;
        margin-left: 15px;
    }

    .fce-button-elem-popup [data-fancybox-close]:active{
        background-color: var(--bagels-neutral_200);
    }
}

@media (max-width: 499px) {
    .fce-button-elem-popup{
        max-height: 650px;
        overflow: auto;
        border-radius: 8px;
    }

    .fce-button-elem-popup .fce-bep-wrap-main{
        padding: 30px 25px;
        max-height: none;
        overflow: hidden;
    }

    .fce-button-elem-popup.elem-light [data-fancybox-close]{
        color: var(--bagels-dark_a);
    }

    .fce-button-elem-popup.elem-dark [data-fancybox-close]{
        color: var(--bagels-light);
    }
}