.modal .modal-content {
    border: 0;
    /*overflow: hidden;*/ /* Allows background content but prevent select options to get out of modal */
    /*border-radius: 3px;*/
}

.modal .modal-content {
    color: var(--bs-body-color);
    --bs-modal-border-radius: 1.5rem;
}

.modal .btn-light {
    --bs-btn-color: var(--bs-light-text-emphasis);
}

.modal .modal-content > .container-fluid {
    min-height: 60px;
}

.modal .modal-dialog.zf-modal-dialog-right {
    margin-right: var(--bs-modal-margin);
}

.modal .modal-dialog.zf-modal-dialog-left {
    margin-left: var(--bs-modal-margin);
}

.zf-modal-error {
    display: none;
    width: 100%;
}

/* CLOSE BUTTON OVERRIDE */
.modal-content .btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,1.3c-0.4-0.4-1-0.4-1.4,0L8,6.6L2.7,1.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.6,8l-5.3,5.3 c-0.4,0.4-0.4,1,0,1.4C1.5,14.9,1.7,15,2,15s0.5-0.1,0.7-0.3L8,9.4l5.3,5.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L9.4,8l5.3-5.3C15.1,2.3,15.1,1.7,14.7,1.3z'/%3E%3C/svg%3E");
    position: absolute;
    z-index: 1;
    right: 1rem;
    top: 1rem;
    font-size: 1.2rem;
    margin: 1rem;
    padding: 0.5rem;
}

.modal-content .btn-close:hover {
    background-color: rgb(244 243 251);
}

.zf-modal-dialog-light .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

/* region Modals */
.modal-content {
    background-color: rgb(255 255 255 / 0.2);
    padding: 0.625rem;

    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset, rgba(66, 56, 95, 0.2) 0px 25px 50px -12px;
    border-bottom-color: rgb(231, 230, 244);
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-left-color: rgb(231, 230, 244);
    border-left-style: solid;
    border-left-width: 0px;
    border-right-color: rgb(231, 230, 244);
    border-right-style: solid;
    border-right-width: 0px;
    border-top-color: rgb(231, 230, 244);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-top-style: solid;
    border-top-width: 0px;
}

.modal-content > div {
    background-color: var(--bs-body-bg);
    border-radius: 1rem;
    box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(66, 56, 95, 0.2) 0px 10px 15px -3px, rgba(66, 56, 95, 0.2) 0px 4px 6px -4px;
    border-bottom-color: rgb(231, 230, 244);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-left-color: rgb(231, 230, 244);
    border-left-style: solid;
    border-left-width: 0px;
    border-right-color: rgb(231, 230, 244);
    border-right-style: solid;
    border-right-width: 0px;
    border-top-color: rgb(231, 230, 244);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-top-style: solid;
    border-top-width: 0px;
}

.modal-backdrop {
    --bs-backdrop-bg: rgba(25, 16, 52, 0.5);
    -webkit-backdrop-filter: blur(4px);
    -webkit-font-smoothing: antialiased;
    backdrop-filter: blur(4px);
}

body.modal-open #zf-page-wrapper {
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    filter: blur(4px);
}
/* endregion */