{"version":3,"file":"survey.css","mappings":"AAAA","sources":["webpack://surveyfunnel-lite/./src/scss/survey.scss"],"sourcesContent":["body {\n    --answer-highlight-box-color: #E2EDFF;\n}\n\n@font-face {\n    font-family: 'ApercuPro';\n    font-weight: normal;\n    src: url(\"../../assets/fonts/Apercu-Font/Apercu\\ Pro\\ Regular.otf\") format(\"opentype\");\n}\n@font-face {\n    font-family: ApercuPro;\n    font-weight: bold;\n    src: url(\"../../assets/fonts/Apercu-Font/Apercu\\ Pro\\ Bold.otf\") format(\"opentype\");\n}\n\n@font-face {\n    font-family: ApercuPro;\n    font-weight: 500;\n    src: url(\"../../assets/fonts/Apercu-Font/Apercu\\ Pro\\ Medium.otf\") format(\"opentype\");\n}\n.main-tab-container, .tab-controls-inner, .preview, .tab-list {\n   \n    width: calc( 100% - 30px );\n    max-width: 900px;\n}\n\n.checkbox-group, .radio-group {\n\tmargin-bottom: 20px;\n}\n\n.dismissalContainer {\n    button {\n        padding: 12px 28px;\n        margin-bottom: 1rem;\n        font-size: 16px;\n        cursor: pointer;\n        border-radius: 9px;\n        border: none;\n        color: #0F4C81;\n    }\n}\n.tab-list{\n    border-radius: 12px;\n    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);\n    .tab-container{\n        .tab{\n            h3{\n                margin: 0;\n            }\n            input{\n                word-wrap: break-word\n            }\n            button{\n                background-color: #0F4C81;\n                border: none;\n                color: white;\n                padding: 15px 30px;\n                text-align: center;\n                text-decoration: none;\n                display: inline-block;\n                font-size: 16px;\n                margin: 4px 2px;\n                cursor: pointer;\n                border-radius: 9px;\n            }\n            .surveyfunnel-lite-tab-CoverPage, .surveyfunnel-lite-tab-ResultScreen{\n                text-align: center;\n            }\n\t\t\t.tab-validation-error {\n\t\t\t\tp {\n\t\t\t\t\tmargin: 0;\n\t\t\t\t}\n\t\t\t}\n        }\n    }\n}\n.surveyfunnel-lite-tab-CoverPage, .surveyfunnel-lite-tab-ResultScreen, .surveyfunnel-lite-tab-SingleChoice, .surveyfunnel-lite-tab-MultiChoice, .surveyfunnel-lite-tab-FormElements, .surveyfunnel-lite-tab-ShortAnswers, .surveyfunnel-lite-tab-LongAnswers{\n    border-radius: 12px;\n    width: 100%;\n}\n.surveyfunnel-lite-tab-CoverPage, .surveyfunnel-lite-tab-ResultScreen{\n    display:flex;\n    justify-content: center;\n    align-items: center;\n    text-align: center;\n\n    min-height: 450px;\n\tpadding: 40px;\n\t@media screen and (max-width: 480px) {\n\t\tpadding: 15px;\n\t}\n    .tab-container{\n        .tab{\n            h3{\n                max-width: 100%;\n                word-break: break-word;\n            }\n            p{\n                max-width: 100%;\n                word-break: break-word;\n            }\n            button{\n                max-width:300px;\n                word-break: break-word;\n            }\n        }\n    }\n\n}\n.surveyfunnel-lite-tab-SingleChoice, .surveyfunnel-lite-tab-MultiChoice{\n    padding: 40px;\n\t@media screen and (max-width: 480px) {\n\t\tpadding: 15px;\n\t}\n    .tab-container{\n        .tab{\n            h3{\n                margin-bottom: 20px;\n                max-width: 100%;\n                word-break: break-word;\n            }\n            p{\n                margin:0 0 20px 0;\n                max-width: 100%;\n                word-break: break-word;\n\n            }\n            button{\n                max-width: 300px;\n                word-break: break-word;\n            }\n            .surveyfunnel-lite-tab-answer-container{\n                border: 1px solid #0F4C81;\n                border-radius: 9px;\n                margin-bottom: 5px;\n        \n                label{\n                    display: flex;\n                    align-items: center;\n                    display: flex;\n                    align-items: center;\n                    min-height: 76px;\n                    width: 100%;\n                    cursor: pointer;\n                    border-radius: 9px;\n                    div{\n                        min-height: 54px;\n                        margin: 10px;\n                        min-width: 54px;\n                        background-color: #F0F2F5;\n                        border-radius: 9px;\n                        display: flex;\n                        align-items: center;\n                        justify-content: center;\n                    }\n                    p{\n                        padding: 20px 30px 0 10px;\n                    }\n                }\n\n                input{\n                    display: none;\n                }\n                input:checked + label{\n                    background-color: var(--answer-highlight-box-color);\n                }\n                input:checked + label div{\n                    background-color: white;\n                }\n                input:hover + label{\n                    background-color: var(--answer-highlight-box-color);\n                }\n                input:hover + label div{\n                    background-color: white;\n                }\n            }\n        }\n    }\n    \n}\n.surveyfunnel-lite-tab-FormElements{\n    padding: 40px;\n\t@media screen and (max-width: 480px) {\n\t\tpadding: 15px;\n\t}\n    .tab-container{\n        .tab{\n            h3{\n                margin-bottom: 20px;\n                max-width: 100%;\n                word-break: break-word;\n            }\n            p{\n                margin:0 0 20px 0;\n                max-width: 100%;\n                word-break: break-word;\n            }\n            label{\n                display: block;\n                max-width: 100%;\n                word-break: break-word;\n            }\n            textarea{\n                \n            border: 1px solid rgba(181, 220, 255, 0.58);\n            width: 100%;\n            height: 80px;\n            border-radius: 9px;\n            margin: 10px 0;\n            word-break: break-word;\n            outline:none;\n            padding:20px;\n            }\n            input{\n                border: 1px solid rgba(181, 220, 255, 0.58);\n                width: 100%;\n                height: 40px;\n                border-radius: 9px;\n                margin: 10px 0;\n                word-break: break-word;\n                outline:none;\n                padding:20px;\n            }\n            .surveyfunnel-lite-form-submit-button{\n                display: flex;\n                justify-content: center;\n                button{\n                    max-width: 300px;\n                    word-break: break-word;\n                }\n            }\n\n        }\n    }\n\n}\n\n.dismissalContainer {\n    width: calc( 100% - 30px );\n    max-width: 900px;\n    display: flex;\n    justify-content: flex-end;\n}\n\n.design-preview{\n    .surveyfunnel-lite-survey-form{\n        display: flex;\n        justify-content: center;\n        .surveyfunnel-lite-design-preview-container {\n            width: 100%;\n\t\t\theight: 100%;\n\t\t\tmin-height: 100%;\n\t\t\tdisplay: -ms-flexbox;\n\t\t\tdisplay: flex;\n\t\t\t-ms-flex-direction: column;\n\t\t\tflex-direction: column;\n\t\t\t\n            .preview{\n\t\t\t\toverflow: auto;\n\t\t\t\tposition: relative;\n\t\t\t\tdisplay: block;\n\t\t\t\tmargin: 0 auto;\n\t\t\t\t-ms-flex-direction: column;\n\t\t\t\tflex-direction: column;\n\t\t\t\t-ms-flex-pack: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\t-ms-flex: 1;\n\t\t\t\tflex: 1;\n\t\t\t\talign-items: center;\n\t\t\t\tpadding: 30px 0px;\n\t\t\t\theight: calc(100% - 80px);\n\t\t\t\t.preview-container {\n\t\t\t\t\toverflow: visible;\n\t\t\t\t\tdisplay: -ms-flexbox;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t-ms-flex-direction: column;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tflex-wrap: wrap;\n\t\t\t\t\t.main-tab-container {\n\t\t\t\t\t\theight: 100%;\n\t\t\t\t\t\twidth: 100%;\n\t\t\t\t\t}\n\t\t\t\t}\n                .tab-list{\n                    overflow: auto;\n                }\n            }\n        }\n        .tab-controls{\n            .tab-controls-inner {\n                display: flex;\n                align-items: center;\n                justify-content: flex-end;\n                height: 100%;\n\t\t\t\t@media screen and (max-width: 375px) {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tjustify-content: center;\n\t\t\t\t}\n\t\t\t\tspan {\n\t\t\t\t\tmargin-right: 10px;\n\t\t\t\t}\n                .control-buttons {\n                    margin-left: 20px;\n                    margin-right: 20px;\n                    button {\n                        padding: 0px 25px !important;\n                    }\n                }\n\t\t\t\tbutton, div {\n\t\t\t\t\tmargin-right: 5px;\n\t\t\t\t}\n                button, a {\n                    background-color: #F0F2F5;\n                    border: 1px solid #d2dae2;\n                    color: #60554F;\n                    text-align: center;\n                    text-decoration: none;\n                    display: inline-block;\n                    font-size: 16px;\n                    cursor: pointer;\n                    border-radius: 9px;\n\t\t\t\t\tpadding: 10px 15px 7px;\n\t\t\t\t\tborder: 1px solid rgba(0,0,0,.1);\n\t\t\t\t\tborder-radius: 5px;\n\t\t\t\t\tbackground-color: #fff;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t@media screen and (max-width: 375px) {\n\t\t\t\t\t\tfont-size: 10px;\n\t\t\t\t\t}\n                }\n                button:disabled{\n                    opacity: 0.7;\n                    background-color: #FFFFFF;\n                    cursor: not-allowed;\n                }\n            }\n            \n        }\n        .no-preview-available{\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            flex-direction: column;\n            img{\n                margin-bottom: 20px;\n            }\n        }\n\n    }\n\n}\n.fullpage, .popup {\n    height: 100vh !important;\n}\n\n.tab-controls {\n\tdisplay: flex;\n\tjustify-content: center;\n    padding: 20px 0px;\n    background: hsla(0,0%,100%,.25);\n    height: 80px;\n    div {\n        height: 100%;\n    }\n    a {\n        display: flex !important;\n        align-items: center;\n        justify-content: center;\n        border: 1px solid#E1E8F0;\n        height: 100%;\n    }\n    img {\n        width: 100px;\n    }\n    button {\n        height: 100%;  \n        border: 1px solid#E1E8F0;\n    }\n}\n\n.tab {\n\tp {\n\t\tmargin: 0;\n\t}\n\t.surveyTitle {\n\t\tfont-size: 36px;\n\t\tfont-weight: bold;\n\t\tmargin-bottom: 12px !important;\n\t}\n\t.surveyDescription {\n\t\tfont-size: 18px;\n\t\tfont-weight: 400;\n\t\tmargin-bottom: 30px;\n\t}\n\t.privacyPolicy {\n\t\tfont-size: 16px;\n\t\tfont-weight: 400;\n\t\tmargin: 40px 0px;\n\n\t\tp {\n\t\t\tinput[type=\"checkbox\"] {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\tinput[type=\"checkbox\"] + label {\n\t\t\t\tcolor: #333;\n\t\t\t\tfont-family: Arial, sans-serif;\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\tinput[type=\"checkbox\"] + label span {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\twidth: 25px;\n\t\t\t\theight: 25px;\n\t\t\t\tmargin: -1px 4px 0 0;\n\t\t\t\tvertical-align: middle;\n\t\t\t\tcursor: pointer;\n\t\t\t\tborder: 1px solid #0F4C81;\n\t\t\t\tbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\tbackground-position: center;\n\t\t\t\ttext-align: center;\n\t\t\t\tline-height: 25px;\n\t\t\t}\n\t\t\tinput[type=\"checkbox\"] + label span img {\n\t\t\t\topacity: 0;\n\t\t\t\ttransition: all 0.3s ease;\n\t\t\t\twidth:50%;\n\t\t\t}\n\t\t\tinput[type=\"checkbox\"] + label span {\n\t\t\t\tborder-radius:4px;\n\t\t\t}\n\t\t\tinput[type=\"checkbox\"]:checked + label span img {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tinput[type=\"checkbox\"]:checked + label span{\n\t\t\t\tbackground-color:#0F4C81;\n\t\t\t}\n\n\t\t}\n\t}\n\n\tbutton {\n\t\tfont-size: 20px !important;\n\t}\n\n\t.tab-validation-error {\n\t\tmargin: 25px 0px;\n\n\t\tpadding: 23px 33px;\n\t\tcolor: #C16200;\n\t\tborder: 0.5px solid #F57C00;\n\t\tbackground-color: #FFF4E6;\n\t\tborder-radius: 12px;\n\n\t\tp {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}\n\n.surveyfunnel-lite-sc-fullpage {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 9999;\n}\n\n.surveyfunnel-lite-sc-popup {\n    position: fixed;\n\ttop: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    width: 80%;\n    height: 90%;\n    margin: auto;\n    z-index: 9999;\n\n\t@media screen and (max-width: 460px) {\n\t\twidth: 100%;\n    \theight: 100%;\n\t}\n}\n\n.frame-root, .frame-content, #design, .surveyfunnel-lite-design-container, .design-preview, .surveyfunnel-lite-survey-form {\n\theight: 100%;\n}\n\n.dismissalBox {\n\tposition: absolute;\n\tz-index: 999999;\n\t\n\ttop: 20px;\n\tright: 20px;\n\n\t@media screen and (max-width: 460px) {\n\t\ttop: 10px;\n\t\tright: 10px;\n\n\t\t> button {\n\t\t\theight: 18px;\n\t\t\twidth: 18px;\n\t\t}\n\t}\n\n\t> button {\n\t\theight: 36px;\n\t\twidth: 36px;\n\t\tcursor: pointer;\n\t\tbackground-color: #FFF;\n        border: 1px solid #d2dae2;\n        color: #60554F;\n\t\tz-index: 9999999;\n\t}\n}\n\n.surveyfunnel-lite-tab-ShortAnswer, .surveyfunnel-lite-tab-LongAnswer, .surveyfunnel-lite-tab-TextElement, .surveyfunnel-lite-tab-ImageQuestion {\n\tpadding: 40px;\n\tborder-radius: 12px;\n\twidth: 100%;\n\n\tinput[type=\"text\"], textarea {\n\t\twidth: 100%;\n\t\tborder-radius: 9px;\n\t\tmargin: 0px 0px 10px 0px;\n\t\tword-break: break-word;\n\t\toutline: none;\n\t\tpadding: 20px;\n\t}\n\n\tinput[type=\"text\"] {\n\t\theight: 40px;\n\t}\n\n\ttextarea {\n\t\tmin-height: 100px;\n\t}\n}\n\n.modalComponentError {\n\tmargin: 10px 0px;\n\tcolor: #f44336;\n}\n\n.imageAnswerFlexBox {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n\n.surveyfunnel-lite-tab-imageanswer-container {\n\tdisplay: block;\n\tmargin-right: 20px;\n\tmargin-bottom: 20px;\n\n\tborder-radius: 12px;\n\toverflow: hidden;\n\tfont-size: 12px;\n\tbackground: #F0F2F5;\n\n\tbox-shadow: 0px 4px 1px rgba(0,0,0, 0.04);\n\n\tinput[type=\"radio\"]{\n\t\tdisplay:none;\n\t}\n\n\tlabel {\n\t\twhite-space: nowrap;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\tinput[type=\"radio\"] + div {\n\t\t\n\t\tcursor:pointer;\n\t\tmax-width: 160px;\n\t}\n\n\tinput[type=\"radio\"]:checked + div {\n\t\toutline: 10px solid #f00;\n\t}\n\n\t.image-answer {\n\t\tposition: relative;\n\t\tfont-size: 0;\n\t\timg {\n\t\t\tborder-radius: 3px;\n\t\t\ttransition: all .2s ease-in-out;\n\t\t\twidth: 160px;\n\t\t\theight: 100px;\n\t\t}\n\t}\n\n\t.imageAnswerName {\n\t\tpadding: 10px 12px;\n\t\tword-break: break-word;\n\t}\n}\n\n.active {\n\topacity: 0.5;\n}"],"names":[],"sourceRoot":""}