{"version":3,"sources":["modal.scss"],"names":[],"mappings":"AAAA,kBAAA;AACA;EACI;IAAO,6BAA6B;IAAE,UAAU,EAAA;EAChD;IAAK,wBAAwB;IAAE,UAAU,EAAA,EAAA;AAF7C;EACI;IAAO,6BAA6B;IAAE,UAAU,EAAA;EAChD;IAAK,wBAAwB;IAAE,UAAU,EAAA,EAAA;;AAG7C;EACI,aAAa;EACb,eAAe;EAAE,kBAAA;EACjB,eAAe;EAAE,eAAA;EACjB,OAAO;EACP,MAAM;EACN,WAAW;EAAE,eAAA;EACb,YAAY;EAAE,gBAAA;EACd,cAAc;EAAE,4BAAA;EAChB,uBAA4B;EAAE,mBAAA;EAC9B,oCAAiC;EAAE,qBAAA;EACnC,uBAAuB;EACvB,mBAAmB;EAOnB,sBAAA,EAAuB;EAnB3B;IAeO,aAAa,EAAA;EAfpB;IAqBQ,yBAAyB;IACzB,YAAY;IACZ,UAAU;IACV,sBAAsB;IACtB,UAAU;IACV,gBAAgB;IAChB,4EAAqE;IACrE,kCAA0B;YAA1B,0BAA0B;IAC1B,gCAAwB;YAAxB,wBAAwB;IAExB,iBAAA;IA4BA,eAAA,EAAgB;IA3DxB;MAiCY,iBAAiB;MACjB,yBAAyB;MACzB,YAAY;MAEZ,qBAAA,EAAsB;MArClC;QAuCgB,WAAW;QACX,YAAY;QACZ,eAAe;QACf,iBAAiB;QACjB,QAAQ;QACR,4BAA4B,EAAA;MA5C5C;;QAiDgB,YAAY;QACZ,qBAAqB;QACrB,eAAe,EAAA;MAnD/B;QAuDgB,sBAAsB,EAAA;IAvDtC;MA6DY,iBAAiB,EAAA;MA7D7B;QAgEgB,aAAa;QACb,cAAc;QACd,aAAa;QACb,kBAAkB,EAAA;QAnElC;UAsEoB,cAAc;UACd,WAAW;UACX,yBAAyB,EAAA;QAxE7C;UA4EoB,cAAc;UACd,cAAc;UACd,yBAAyB,EAAA;MA9E7C;QAmFgB,cAAc;QACd,WAAW;QACX,mBAAmB;QACnB,iBAAiB,EAAA","file":"modal.css","sourcesContent":["/* Add Animation */\n@keyframes animatetop {\n    from { transform: translateY(-300px); opacity: 0}\n    to { transform: translateY(0); opacity: 1}\n}\n\n.wcs-modal{\n    display: none;\n    position: fixed; /* Stay in place */\n    z-index: 100000; /* Sit on top */\n    left: 0;\n    top: 0;\n    width: 100%; /* Full width */\n    height: 100%; /* Full height */\n    overflow: auto; /* Enable scroll if needed */\n    background-color: rgb(0,0,0); /* Fallback color */\n    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n    justify-content: center;\n    align-items: center;\n\n    &.is-open{\n       display: flex; \n      \n    }\n\n    /* Modal Content/Box */\n    .modal-content {\n        background-color: #fefefe;\n        margin: auto;\n        padding: 0;\n        border: 1px solid #888;\n        width: 80%;\n        max-width: 762px;\n        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n        animation-name: animatetop;\n        animation-duration: 0.4s;\n\n        /* Modal Header */\n        .modal-header {\n            padding: 2px 16px;\n            background-color: #3199BE;\n            color: white;\n\n            /* The Close Button */\n            .close {\n                color: #aaa;\n                float: right;\n                font-size: 28px;\n                font-weight: bold;\n                top: 50%;\n                transform: translate(0, 50%);\n            }\n            \n            .close:hover,\n            .close:focus {\n                color: black;\n                text-decoration: none;\n                cursor: pointer;\n            }\n\n            h2{\n                color: #fff !important;\n            }\n        }\n        \n        /* Modal Body */\n        .modal-body {\n            padding: 2px 16px;\n\n            .message {\n                display: none;\n                margin: 10px 0;\n                padding: 10px;\n                border-radius: 3px;\n\n                &.success {\n                    display: block;\n                    color: #270;\n                    background-color: #DFF2BF;\n                }\n\n                &.error {\n                    display: block;\n                    color: #D8000C;\n                    background-color: #FFBABA;\n                }\n            }\n\n            input, select {\n                display: block;\n                width: 100%;\n                border-style: solid;\n                border-width: 1px;\n            }\n        }\n    }\n}\n"]}