/* MODAL STYLES
-------------------------------*/
.trial-user-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, .8);
    overflow: auto;
}

.trial-user-modal.open {
    display: block;
}

.trial-user-modal-body {
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    transform: translateX(-50%) translateY(-50%);
    position: relative;
    top: 50vh;
    left: 50vw;
    max-width: 460px;
    padding: 64px;
    background: white;
}

.warning-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, .8);
    overflow: auto;
}

.warning-modal.open {
    display: block;
}

.warning-modal-body {
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    transform: translateX(-50%) translateY(-50%);
    position: relative;
    top: 50vh;
    left: 50vw;
    padding: 64px;
    background: white;
    max-width: 800px;
}

.success-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(0, 0, 0, .8);
    overflow: auto;
}

.success-modal.open {
    display: block;
}

.success-modal-body {
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
    transform: translateX(-50%) translateY(-50%);
    position: relative;
    top: 50vh;
    left: 50vw;
    padding: 64px;
    background: white;
    max-width: 800px;
}