.modal:not(.active) {
    display: none !important;
}

.modal {
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 20px;
}
.modal-card {
    background: var(--section-bg);
    border: 1px solid var(--section-border-color);
    box-shadow: 0 1px 2px rgb(var(--section-shadow), 0.1);
    border-radius: var(--rounded-lg);
    width: 600px;
    margin: 0 auto;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
.modal-card-body {
    padding: 18px;
}
.modal-card-sm {
    width: 430px;
}

.modal.active {
    display: flex !important;
}

body.modal-open {
    overflow: hidden;
}

@media (max-width: 640px) {
    .modal {
        align-items: flex-start;
        padding: 12px;
    }
    .modal-card,
    .modal-card-sm {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
    .modal-card-body {
        padding: 14px;
    }
}

.modal-animation .modal {
    animation: 0.2s modal-blur-in;
}
.modal-animation .modal .modal-card {
    animation: 0.4s modal-scale-in;
}
.modal-animation-reverse .modal {
    animation: 0.2s modal-blur-out;
}
.modal-animation-reverse .modal .modal-card {
    animation: 0.3s modal-scale-out;
}

@keyframes modal-blur-in {
    from {
        background: transparent;
        backdrop-filter: blur(0px);
    }
    to {
        background: rgb(0, 0, 0, 0.1);
        backdrop-filter: blur(2px);
    }
}

@keyframes modal-scale-in {
    from {
        opacity: 0;
        scale: 1.2;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes modal-blur-out {
    from {
        background: rgb(0, 0, 0, 0.1);
        backdrop-filter: blur(2px);
    }
    to {
        background: transparent;
        backdrop-filter: blur(0px);
    }
}

@keyframes modal-scale-out {
    from {
        opacity: 1;
        scale: 1;
    }
    to {
        opacity: 0;
        scale: 1.2;
    }
}