.bbo-dialog {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.bbo-dialog.bbo-animate {
    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
}
.bbo-dialog.bbo-animate-done {
    opacity: 1;
}

.bbo-dialog-container {
    height: 100%;
    width: 100%;

    position: relative;    /* To be above the backdrop overlay */
    z-index: 1;            /*                                  */

    display: flex;
    align-items: end;
    justify-content: center;

    cursor: pointer; /* feedback for user: click on overlay should close the modal */
}

.bbo-dialog-container.bbo-animate {
    transform: scale(0.8);
    transition: transform 150ms cubic-bezier(0, 0, 0.2, 1);
}
.bbo-dialog-container.bbo-animate-done {
    transform: none;
}

.bbo-dialog-content {
    height: 100%;
    width: 100%;
    max-width: 100%;
    max-height: 90%;

    border-radius: 12px;
    box-shadow: black 0px 0px 5px;
}

@media screen and (min-width: 640px) {
    .bbo-dialog-container {
        align-items: end;
    }
    .bbo-dialog-content {
        max-width: 100%;
        max-height: 90%;
    }
}
@media screen and (min-width: 768px) {
    .bbo-dialog-container {
        align-items: center;
    }
    .bbo-dialog-content {
        max-width: 90%;
        max-height: 86.7%;
    }
}
@media screen and (min-width: 1024px) {
    .bbo-dialog-content {
        max-width: 80%;
        max-height: 85%;
    }
}
@media screen and (min-width: 1280px) {
    .bbo-dialog-content {
        max-width: 60%;
        max-height: 80%;
    }
}
@media screen and (min-width: 1536px) {
    .bbo-dialog-content {
        max-width: 60%;
        max-height: 80%;
    }
}

.bbo-dialog-overlay {
    position: absolute;
    inset: 0;
}

.bbo-dialog-overlay.dark-backdrop {
    background: #00000052;
}

iframe.bbo-dialog-content {
    border: none; /* remove default browser style */
}