.modal {
    z-index: 1999;
    position: fixed;
    overflow: auto;
    padding: 20px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: initial;
    background: rgba(0,0,0,0);
    white-space: normal;
    visibility: collapse;
    color: #262626;
    transition: background 150ms linear;
}

    .modal.open {
        visibility: visible;
        background: rgba(0,0,0,0.5);
    }

    .modal .modal-border {
        height: 4px;
        background: #5e0d0d;
    }

    .modal .modal-dialog {
        background: #fff;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
        opacity: 0;
        transform: scale(0.9);
        transition: all 250ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .modal .modal-header {
        padding: 16px 20px 0;
        margin: 0;
        font-size: 21px;
        font-weight: 600;
        color: #7db545;
    }

    .modal .modal-body {
        padding: 10px 20px 16px;
        position: relative;
    }

    .modal .modal-footer {
        padding: 20px;
        background: #eff2f4;
    }

        .modal .modal-footer button + button {
            margin-left: 10px;
        }

    .modal.open .modal-dialog {
        opacity: 1;
        transform: scale(1);
    }

    /*
        Error state
    */
    .modal.error .modal-border {
        background: #be4a27;
    }

    .modal.error .modal-header {
        color: #be4a27;
    }

    .modal.error-modal .modal-dialog {
        max-width: 450px;
        margin: 0 auto;
    }

/*
    Mobile responsiveness
*/
@media (max-width: 350px) {
    .modal .modal-header {
        font-size: 18px;
    }
}