.aegov-modal {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 1rem);
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    z-index: 1100;
}

.aegov-modal-lg {
    width: clamp(560px, 75vw, 75vw);
}

.aegov-modal .aegov-modal-wrapper {
    padding: 3.2rem;
    z-index: 50;
}

@media (min-width: 768px) {
    .aegov-modal {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0
    }
}

.aegov-modal.modal-serious .aegov-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(216 55 49 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(254 242 242 / var(--tw-text-opacity, 1))
}

    .aegov-modal.modal-serious .aegov-btn:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(234 79 73 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(254 242 242 / var(--tw-text-opacity, 1));
        --tw-shadow-color: #FEF2F2;
        --tw-shadow: var(--tw-shadow-colored)
    }

    .aegov-modal.modal-serious .aegov-btn:focus-visible {
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(250 170 167 / var(--tw-ring-opacity, 1))
    }

    .aegov-modal.modal-serious .aegov-btn.btn-soft {
        --tw-bg-opacity: 1;
        background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(216 55 49 / var(--tw-text-opacity, 1))
    }

        .aegov-modal.modal-serious .aegov-btn.btn-soft:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(253 228 227 / var(--tw-bg-opacity, 1));
            --tw-text-opacity: 1;
            color: rgb(216 55 49 / var(--tw-text-opacity, 1))
        }

    .aegov-modal.modal-serious .aegov-btn.btn-link {
        background-color: transparent;
        --tw-text-opacity: 1;
        color: rgb(216 55 49 / var(--tw-text-opacity, 1))
    }

        .aegov-modal.modal-serious .aegov-btn.btn-link:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
            --tw-shadow: 0 0 #0000;
            --tw-shadow-colored: 0 0 #0000;
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
        }

        .aegov-modal.modal-serious .aegov-btn.btn-link:focus-visible {
            --tw-border-opacity: 1;
            border-color: rgb(244 122 117 / var(--tw-border-opacity, 1));
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
            --tw-ring-opacity: 1;
            --tw-ring-color: rgb(244 122 117 / var(--tw-ring-opacity, 1));
            --tw-ring-offset-width: 0px
        }

    .aegov-modal.modal-serious .aegov-btn.btn-outline {
        --tw-border-opacity: 1;
        border-color: rgb(216 55 49 / var(--tw-border-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(216 55 49 / var(--tw-text-opacity, 1))
    }

        .aegov-modal.modal-serious .aegov-btn.btn-outline:hover {
            --tw-bg-opacity: 1;
            background-color: rgb(253 228 227 / var(--tw-bg-opacity, 1))
        }

        .aegov-modal.modal-serious .aegov-btn.btn-outline:focus-visible {
            --tw-border-opacity: 1;
            border-color: rgb(250 170 167 / var(--tw-border-opacity, 1))
        }

.aegov-modal-wrapper {
    position: relative;
    max-height: 100%;
    border-radius: .5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    --tw-shadow-color: rgb(27 29 33 / .1);
    --tw-shadow: var(--tw-shadow-colored)
}

.aegov-modal-backdrop,
.aegov-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    background-color: rgb(27 29 33 / var(--tw-bg-opacity, 1));
    --tw-bg-opacity: .5
}

@media (prefers-color-scheme: dark) {

    .aegov-modal-backdrop,
    .aegov-backdrop {
        --tw-bg-opacity: .8
    }
}

p.aegov-modal-close {
    margin-bottom: 1.75rem
}

.aegov-modal-close {
    width: 3.2rem;
    height: 3.2rem;
    position: absolute;
    top: 0.8rem;
    inset-inline-end: 0.8rem;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    line-height: 1.25rem;
    color: rgb(121 126 134);
    background-color: transparent;
    border: 0;
    border-radius: 0.8rem;
    padding: 0.6rem;
}

    .aegov-modal-close:focus-within {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
        box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
        --tw-ring-opacity: 1;
        --tw-ring-color: rgb(203 163 68 / var(--tw-ring-opacity, 1))
    }

    .aegov-modal-close:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(247 247 247 / var(--tw-bg-opacity, 1));
        --tw-text-opacity: 1;
        color: rgb(75 79 88 / var(--tw-text-opacity, 1))
    }

    .aegov-modal-close:focus {
        outline: 2px solid transparent;
        outline-offset: 2px
    }