/* ---------- variable ---------- */
@import url("https://redtoucan-admin.azurewebsites.net/media/uvdovbjb/variable.css");

/* ---------- mobile ---------- */
.modal-section-wrapper {
    background-color: var(--color-black-transparent-rgba);
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    display: none;
    z-index: 9999999999;
}

.modal-section-wrapper .modal-section-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-section-wrapper .modal-section-container .modal {
    background-color: var(--color-white);
    height: 30rem;
    overflow: scroll;
    padding: 2rem;
    max-width: 30rem;
    display: none;
    border-radius: .5rem;
}

.modal-section-wrapper .modal-section-container .modal .modal-header {
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-section-wrapper .modal-section-container .modal .modal-header button {
    background: transparent;
    border: none;
}

.modal-section-wrapper .modal-section-container .modal .modal-header button svg {
    display: flex;
}

.modal-section-wrapper .modal-section-container .modal .modal-body p:not(:last-of-type) {
    margin-bottom: 1rem;
}

@media screen and (min-width: 48rem) {
    .modal-section-wrapper .modal-section-container .modal {
        max-width: 50rem;
        width: 100%;
    }
}