.modal {
    z-index: 8002;
    transition: visibility 0s .4s, background-color .3s ease .1s;
    background-color: rgba(var(--modal-overlay-color)/0)
}

.modal[open],
[open]:not(.is-closing) .modal {
    visibility: visible;
    transition-delay: 0s;
    background-color: rgba(var(--modal-overlay-color)/var(--modal-overlay-opacity))
}

.modal__window {
    width: 100%;
    max-width: 800px;
    min-height: 240px;
    max-height: calc(var(--viewport-height) - var(--gutter) * 2);
    margin: var(--gutter);
    overflow: auto;
    transform: scale(.8);
    transition: transform .15s ease-in 0s, opacity .15s 0s;
    border-radius: var(--modal-border-radius);
    opacity: 0;
    box-shadow: 0 0 10px #0000004d
}

[open]:not(.is-closing) .modal__window {
    transform: scale(1);
    transition: transform .15s ease-out .1s, opacity .15s .1s;
    opacity: 1
}

.modal__close-btn {
    z-index: 1;
    top: 10px;
    right: 10px;
    padding: 10px;
    border-radius: var(--btn-border-radius);
    background-color: inherit;
    color: currentColor
}

.modal__content {
    padding: 64px var(--gutter) var(--gutter)
}

.modal__image {
    flex: 0 0 50%;
    max-width: 360px
}

@media (--sm-up) {
    .modal__window {
        width: auto;
        min-width: 480px
    }
}

@media (--md-down) {
    .modal .rte table {
        width: auto;
        margin-right: calc(var(--gutter) * -1);
        margin-left: calc(var(--gutter) * -1)
    }
}

@media (--md-up) {
    .modal__content {
        padding: 64px var(--gutter) var(--gutter)
    }
}

.modal {
    transition: visibility 0s .4s, background-color .3s ease .1s
}

/*# sourceMappingURL=/s/files/1/0822/3784/9886/t/3/assets/modal.css.map */