dialog::backdrop {
    /*background-color: var(--white);*/
    background-color: var(--gray);
    opacity: 0.9;
    backdrop-filter: blur(10px);
}

.modal-dialog {
    margin: 0.5rem auto !important;
}

    .modal-dialog.large {
        min-width: 80% !important;
        max-width: 80% !important;
        width: 80% !important;
    }

        .modal-dialog.large.plus {
            min-width: 84% !important;
            max-width: 84% !important;
            width: 84% !important;
        }

.modal-content {
    border: none;
    border: 2px solid var(--primary-color);
    border-radius: var(--radius);
}

    .modal-content.secondary {
        border: none;
        border: 2px solid var(--secondary-color);
        border-radius: var(--radius);
    }
/*
.modal-dialog-centered {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}*/

.modal-header {
    background-color: var(--primary-color);
    color: var(--white) !important;
    padding-left: calc(var(--padding) * 2);
    padding-right: calc(var(--padding) * 2);
    border-top-left-radius: calc(var(--radius) * 0.7);
    border-top-right-radius: calc(var(--radius) * 0.7);
}

.modal-content.secondary > .modal-header {
    background-color: var(--secondary-color);
    color: var(--white) !important;
    padding-left: calc(var(--padding) * 2);
    padding-right: calc(var(--padding) * 2);
    border-top-left-radius: calc(var(--radius) * 0.7);
    border-top-right-radius: calc(var(--radius) * 0.7);
}

.modal-header > h5,
.modal-header > h5 > span,
.modal-header > h5 > i,
.modal-header > h5 > span > i,
.modal-header > span,
.modal-header > i,
.modal-header > span > i {
    color: var(--white) !important;
    font-size: 1.3rem;
}

@media only screen and (min-width: 1024px) {
    .modal-dialog.large {
        min-width: 60% !important;
        max-width: 60% !important;
        width: 60% !important;
    }

        .modal-dialog.large.plus {
            min-width: 62% !important;
            max-width: 62% !important;
            width: 62% !important;
        }

    .modal-dialog.extra-large {
        min-width: 95% !important;
        max-width: 95% !important;
        width: 95% !important;
    }

        .modal-dialog.extra-large.plus {
            min-width: 97% !important;
            max-width: 97% !important;
            width: 97% !important;
        }
}