#ffw-popup-form-wrapper {
    .modal {
        display: block;
        vertical-align: middle;
        text-align: center;
        width: 620px;
        height: auto;
        overflow: visible;

    }

    .modal-inset {
        position: relative;
        padding: 30px;
        background-color: #cce9ed;
        margin: auto;
        visibility: hidden;
        -moz-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
        box-shadow: 2px 2px 8px 1px rgba(0, 0, 0, 0.2);
        -moz-backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -moz-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

        .ffw-modal-close {
            display: block;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 0;
            line-height: 1;
            border: none;
            background: none;
            box-shadow: 1px 1.5px 2.5px -1px #000;
            height: auto;
            min-height: auto;

            &:hover {
                opacity: 1;
            }
        }
    }

    .modal-body {
        margin: auto;
        opacity: 0;
        -moz-transform: translateY(0) scale(0.8, 0.8);
        -ms-transform: translateY(0) scale(0.8, 0.8);
        -webkit-transform: translateY(0) scale(0.8, 0.8);
        transform: translateY(0) scale(0.8, 0.8);
        -moz-transition-property: opacity, -moz-transform;
        -o-transition-property: opacity, -o-transform;
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        -moz-transition-duration: 0.25s;
        -o-transition-duration: 0.25s;
        -webkit-transition-duration: 0.25s;
        transition-duration: 0.25s;
        -moz-transition-delay: 0.1s;
        -o-transition-delay: 0.1s;
        -webkit-transition-delay: 0.1s;
        transition-delay: 0.1s;

        h3 {
            font-weight: 700;
            display: block;
            color: #000002;
            text-align: center;
        }

        .ps {
            font-size: 12px;
            opacity: 0.3;
        }

        .modal-content {
            display: flex;
            flex-direction: column;
            background: transparent;
            border: none;

            label {
                float: none;
                width: 100%;
                display: block;
                margin: 0;
                text-align: left;
                padding-bottom: 5px;
                font-weight: 700;
                letter-spacing: 0.5px;
            }

            input[type="text"] {
                padding: 10px 20px;
                width: 100%;
                margin-bottom: 15px;
            }

            textarea {
                height: 100px;
                width: 100%;
                padding: 10px 20px;
                margin-top: 10px;
            }

            .modal-buttons {
                display: flex;
                justify-content: space-between;
                align-items: center;

                input {
                    width: calc(50% - 5px);
                    padding: 7px 20px;
                    align-self: flex-start;
                    margin-top: 10px;
                    cursor: pointer;
                    color: #fff;
                    border: none;
                    border-radius: 5px;

                    &[type="submit"] {
                        background: #6c5ce7;
                    }

                    &[type="button"] {
                        background: #ff7675;
                    }
                }
            }
        }


    }

    .ffw-modal-frame {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: auto;
        z-index: 50;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        -moz-box-align: center;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        width: 100%;
        text-align: center;
        visibility: hidden;

        &.state-appear {
            visibility: visible;

            .modal-inset {
                -moz-animation: modalComeIn 0.25s ease;
                -webkit-animation: modalComeIn 0.25s ease;
                animation: modalComeIn 0.25s ease;
                visibility: visible;
                /* to keep @ final state */
            }

            .modal-body {
                opacity: 1;
                -moz-transform: translateY(0) scale(1, 1);
                -ms-transform: translateY(0) scale(1, 1);
                -webkit-transform: translateY(0) scale(1, 1);
                transform: translateY(0) scale(1, 1);
            }
        }

        &.state-leave {
            visibility: visible;

            .modal-inset {
                -moz-animation: modalHeadOut 0.35s ease 0.1s;
                -webkit-animation: modalHeadOut 0.35s ease 0.1s;
                animation: modalHeadOut 0.35s ease 0.1s;
                visibility: visible;
            }

            .modal-body {
                opacity: 0;
                -moz-transition-delay: 0s;
                -o-transition-delay: 0s;
                -webkit-transition-delay: 0s;
                transition-delay: 0s;
                -moz-transition-duration: 0.35s;
                -o-transition-duration: 0.35s;
                -webkit-transition-duration: 0.35s;
                transition-duration: 0.35s;
                -moz-transition-timing-function: ease;
                -o-transition-timing-function: ease;
                -webkit-transition-timing-function: ease;
                transition-timing-function: ease;
                -moz-transform: translateY(25px);
                -ms-transform: translateY(25px);
                -webkit-transform: translateY(25px);
                transform: translateY(25px);
            }
        }
    }

    .modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background-color: #fff;
        opacity: 0;
        visibility: hidden;
        z-index: 40;
        -moz-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
        -o-transition: opacity 0.25s ease 0s, visibility 0.35s linear;
        -webkit-transition: opacity 0.25s ease, visibility 0.35s linear;
        -webkit-transition-delay: 0s, 0s;
        transition: opacity 0.25s ease 0s, visibility 0.35s linear;

        &.state-show {
            opacity: 0.7;
            visibility: visible;
            -moz-transition-delay: 0s;
            -o-transition-delay: 0s;
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
            -moz-transition-duration: 0.2s, 0s;
            -o-transition-duration: 0.2s, 0s;
            -webkit-transition-duration: 0.2s, 0s;
            transition-duration: 0.2s, 0s;
        }
    }
}

@-moz-keyframes modalComeIn {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
    65.5% {
        -moz-transform: scale(1.03, 1.03);
        -ms-transform: scale(1.03, 1.03);
        -webkit-transform: scale(1.03, 1.03);
        transform: scale(1.03, 1.03);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
@keyframes modalComeIn {
    0% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
    65.5% {
        -moz-transform: scale(1.03, 1.03);
        -ms-transform: scale(1.03, 1.03);
        -webkit-transform: scale(1.03, 1.03);
        transform: scale(1.03, 1.03);
    }
    100% {
        visibility: visible;
        opacity: 1;
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}
@-webkit-keyframes modalHeadOut {
    0% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0) scale(1, 1);
        -ms-transform: translateY(0) scale(1, 1);
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateY(35px) scale(0.97, 0.97);
        -ms-transform: translateY(35px) scale(0.97, 0.97);
        -webkit-transform: translateY(35px) scale(0.97, 0.97);
        transform: translateY(35px) scale(0.97, 0.97);
    }
}
@-moz-keyframes modalHeadOut {
    0% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0) scale(1, 1);
        -ms-transform: translateY(0) scale(1, 1);
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateY(35px) scale(0.97, 0.97);
        -ms-transform: translateY(35px) scale(0.97, 0.97);
        -webkit-transform: translateY(35px) scale(0.97, 0.97);
        transform: translateY(35px) scale(0.97, 0.97);
    }
}
@keyframes modalHeadOut {
    0% {
        visibility: visible;
        opacity: 1;
        -moz-transform: translateY(0) scale(1, 1);
        -ms-transform: translateY(0) scale(1, 1);
        -webkit-transform: translateY(0) scale(1, 1);
        transform: translateY(0) scale(1, 1);
    }
    100% {
        visibility: hidden;
        opacity: 0;
        -moz-transform: translateY(35px) scale(0.97, 0.97);
        -ms-transform: translateY(35px) scale(0.97, 0.97);
        -webkit-transform: translateY(35px) scale(0.97, 0.97);
        transform: translateY(35px) scale(0.97, 0.97);
    }
}