vue-flow-form-rate-v1/dist/vue-flow-form.css

Create conversational conditional-logic forms with Vue.js.

/*!
    Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
    https://github.com/ditdot-dev/vue-flow-form
    https://www.ditdot.hr/en
*/.vff{font-weight:400;line-height:1.34;min-height:220px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased}@media screen and (max-width:1023px){.vff,.vff-footer{font-size:15px}}@media screen and (min-width:1366px){.vff,.vff-footer{font-size:18px}}@media screen and (min-width:1920px){.vff{font-size:22px}}@media screen and (min-width:2560px){.vff{font-size:25px}}.vff hr{-webkit-box-sizing:content-box;box-sizing:content-box;overflow:visible;height:0}.vff code,.vff kbd,.vff pre{font-family:monospace,monospace;font-size:1em}.vff small{font-size:80%}.vff sub,.vff sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}.vff sub{bottom:-.25em}.vff sup{top:-.5em}.vff b,.vff strong{font-weight:bolder}.vff a{cursor:pointer;background-color:transparent}.vff a,.vff a:active,.vff a:focus,.vff a:hover{outline:0;text-decoration:none}.vff ol,.vff table,.vff ul{margin-top:0;margin-bottom:22px}.vff img{max-width:100%;height:auto;margin-bottom:22px}.vff .text-thin{font-weight:300}.vff .disabled,.vff [disabled]{opacity:.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;cursor:not-allowed}.vff .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.vff ol.reset-list,.vff ul.reset-list{list-style:none;margin:0;padding:0}.vff{width:100%;padding:0 10%;margin:18vh 0 60px;position:relative;text-align:left;-webkit-box-sizing:border-box;box-sizing:border-box}header.vff-header+.vff{margin-top:16vh}header.vff-header+.vff.vff-not-standalone{margin-top:0}.vff *,.vff :after,.vff :before{-webkit-box-sizing:inherit;box-sizing:inherit}.vff .q-is-active{opacity:1}.vff .q-form.q-is-inactive{display:none}.vff .f-full-width{display:block;width:100%}.vff .f-string-em{text-transform:uppercase}.vff .f-enter{margin-bottom:20px}.vff .f-container,header.vff-header .f-container{padding:0 8%;width:100%}.vff .f-container{margin-top:1em;margin-bottom:1em}header.vff-header{line-height:1;padding:.9em 10% .8em;-webkit-box-sizing:border-box;box-sizing:border-box;position:static;width:100%}.vff-header *,.vff-header :after,.vff-header :before{-webkit-box-sizing:inherit;box-sizing:inherit}header.vff-header .f-container{margin:0}header.vff-header img.f-logo,header.vff-header svg.f-logo{height:18px;max-width:240px;opacity:1}.vff button,.vff input,.vff optgroup,.vff select,.vff textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}.vff fieldset{padding:.35em .75em .625em}.vff legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}.vff [type=number]::-webkit-inner-spin-button,.vff [type=number]::-webkit-outer-spin-button{height:auto}.vff [type=search]{-webkit-appearance:textfield;outline-offset:-2px}.vff [type=search]::-webkit-search-decoration{-webkit-appearance:none}.vff [type=file]{appearance:none;-moz-appearance:none;-webkit-appearance:none;border:0;outline:0;border-radius:0;margin:0 .2em;padding:.1em 0 .15em;font-size:.72em;line-height:normal;font-weight:900}.vff input[type=file]:focus{outline:1px dotted #000;outline-offset:4px}@media (prefers-color-scheme:dark){.vff input[type=file]:focus{outline-color:#fff}}.vff input[type=file]::-webkit-file-upload-button{appearance:none;-moz-appearance:none;-webkit-appearance:none;outline:0;border:0;font:inherit;font-size:.86em;font-weight:400;margin-right:.7em;text-align:center;max-width:100%;min-width:90px;min-height:44px;display:inline-block;white-space:pre-wrap;cursor:pointer;padding:.6em 1.4em;background-color:#efefef}.vff input[type=file]::-webkit-file-upload-button:active{color:#000}.vff input[type=file]::file-selector-button{min-height:44px;display:inline-block;white-space:pre-wrap;font:inherit;font-size:.86em;font-weight:400;margin-right:.6em;max-width:100%;min-width:90px}.vff [type=button],.vff [type=reset],.vff [type=submit],.vff button,.vff input{-webkit-appearance:none;overflow:visible}.vff button{border:none;outline:0;cursor:pointer;padding:.6em 1.4em;text-align:center;display:inline-block;min-height:44px;white-space:pre-wrap;max-width:100%}.vff .o-btn-action{z-index:1;line-height:1.2;font-weight:900}.vff .o-btn-action span{font-size:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;-webkit-transition:all .4s ease 0s;transition:all .4s ease 0s}.vff .f-enter-desc{font-size:.9em;display:inline-block;margin-left:.6em;margin-top:.7em}.vff span.faux-form{border-bottom:1px solid;display:inline-block;margin-right:.2em;margin-left:0;position:relative;white-space:nowrap}.vff select{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-transform:none;background:transparent;border-radius:0;border:0;cursor:pointer;font-size:.5em;line-height:1.32;margin:0;opacity:0;outline:0;padding:.6em 8px;width:100%;position:absolute;z-index:1}.vff input[type=date],.vff input[type=email],.vff input[type=number],.vff input[type=password],.vff input[type=tel],.vff input[type=text],.vff input[type=url],.vff textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;border-bottom:1px solid;border-radius:0;line-height:1.48;margin:0 .6em 0 0;outline:0;padding:.16em .2em;font-size:.72em;font-weight:900}.vff .f-other.f-selected.f-focus .f-label-wrap input[type=text]{font-weight:300!important}.vff textarea{overflow:auto;display:block;outline:none;resize:vertical}.vff .f-full-width input[type=date],.vff .f-full-width input[type=email],.vff .f-full-width input[type=file],.vff .f-full-width input[type=number],.vff .f-full-width input[type=password],.vff .f-full-width input[type=tel],.vff .f-full-width input[type=text],.vff .f-full-width input[type=url],.vff .f-full-width span.faux-form,.vff .f-full-width textarea{width:100%;padding-left:.16em;padding-right:.16em}.vff .f-required{display:inline}.vff .f-answer.f-full-width{margin-top:26px}.vff span.f-sub+.f-answer.f-full-width{margin-top:22px}.vff div.field-sectionbreak .f-answer{margin-top:18px}.vff span.f-empty{display:inline-block;min-width:3em;padding-right:28px;font-weight:300;padding-bottom:4px}.vff span.f-answered{font-weight:900}.vff .f-arrow-down{display:inline-block;margin-left:.2em;pointer-events:none;width:18px;height:100%;position:absolute;right:0;bottom:0;line-height:1.3}.vff .f-arrow-down svg{width:100%;height:auto}.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer>span{position:relative;top:0;left:0}.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer>span:before{position:absolute;content:attr(data-placeholder);display:block;pointer-events:none;padding:.12em .2em}.vff.vff-is-ios input[type=date]{height:32px;display:block}.vff .field-submit .f-section-wrap a,.vff a.f-link{color:inherit;border-bottom:1px dotted;word-break:break-word}.vff .field-submit .f-section-wrap a:active,.vff .field-submit .f-section-wrap a:hover,.vff a.f-link:active,.vff a.f-link:hover{color:inherit;border-bottom:none}.vff .f-section-text,.vff li,.vff p,.vff span.f-sub,.vff span.f-tagline{font-size:1.1em;line-height:1.34}.vff .fh1,.vff h1{font-weight:900;font-size:3em;margin:.67em 0}.vff .fh2,.vff h2{font-weight:900;font-size:2.4em;line-height:1.34;padding-right:1.8em;margin-bottom:20px}.vff .fh3,.vff h3{font-weight:300;font-size:1.5em;margin-top:0;margin-bottom:0}.vff .fh1,.vff .fh2,.vff .fh3{display:block}.vff span.f-sub,.vff span.f-tagline{font-weight:400;display:block}.vff .fh2 span.f-sub,.vff .fh2 span.f-tagline{font-size:.51em}.vff span.f-sub,.vff span.f-tagline,.vff span.f-text{margin-bottom:8px}.vff span.f-sub{margin-top:5px}.vff span.f-sub span:not(.f-string-em){margin-right:.4em}.vff span.f-sub span.f-help{display:block}.vff span.f-sub span+span.f-help{margin-top:0}.vff span.f-text{margin-right:.6em}.vff p.f-description{margin-top:0;padding-right:4em}.vff p.f-description a.f-link,.vff p.f-description span{margin-right:8px}.vff ul.f-radios{margin:0;padding:0;list-style-type:none;max-width:590px;min-width:160px}.vff ul.f-radios li{padding:.6em .68em;margin:.5em 0 .6em;font-weight:300;line-height:1.24;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;position:relative;overflow:hidden}.vff ul.f-radios li.f-other input[type=text]{width:100%;padding:0;margin:0;border:0;line-height:inherit;font-size:inherit}.vff .f-radios-desc{display:block}.vff .f-radios-desc,.vff ul.f-radios li,.vff ul.f-radios li input[type=text]{font-size:.4em}.vff ul.f-radios li div.f-label-wrap{display:-ms-flexbox;display:-webkit-box;display:flex;width:100%}.vff ul.f-radios li span.f-label{margin-left:.4em}.vff ul.f-radios li span.f-key{width:16px;text-align:center}.vff .field-multiplepicturechoice ul.f-radios{max-width:750px;min-width:auto;display:-ms-flexbox;display:-webkit-box;display:flex;margin:0 -8px 0 0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:0 1;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-ms-flex-wrap:wrap;flex-wrap:wrap}.vff .field-multiplepicturechoice ul.f-radios li{position:relative;cursor:pointer;-ms-flex-align:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:8px 8px 10px;margin-right:8px;-ms-flex:0 0 calc(25% - 8px);-webkit-box-flex:0;flex:0 0 calc(25% - 8px);font-size:15px;line-height:1.38}.vff .field-multiplepicturechoice ul.f-radios li,.vff .field-multiplepicturechoice ul.f-radios li span.f-image{display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;margin-bottom:8px}.vff .field-multiplepicturechoice ul.f-radios li span.f-image{-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;width:100%;height:140px}.vff .field-multiplepicturechoice ul.f-radios li span.f-image img{margin-bottom:0;max-height:100%;max-width:100%}.vff .field-rate ul.f-radios-range{display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none;padding-left:0;font-size:30px}.vff .field-rate ul.f-radios-range li{font-weight:400;font-size:25px;padding:10px;border:1px solid #000;background-color:#fff;cursor:pointer}.vff .field-rate ul.f-radios-range li:first-child{border-top-left-radius:5px;border-bottom-left-radius:5px}.vff .field-rate ul.f-radios-range li:last-child{border-top-right-radius:5px;border-bottom-right-radius:5px}.vff .field-rate ul.f-radios-range .f-selected{background-color:silver}.vff-footer{position:fixed;bottom:0;right:0;width:100%;font-weight:300;line-height:1.2}.vff-footer .footer-inner-wrap{text-align:right;padding:11px 20px 12px}.vff-footer .f-nav,.vff-footer .f-progress,.vff-footer .f-timer{display:inline-block}.vff-footer .f-timer{font-family:monospace;font-size:17px;margin-left:.18em}.vff-footer .f-next,.vff-footer .f-prev,.vff-footer .f-progress{margin:0 .18em;padding:.2em}.vff-footer .f-progress{top:-1px;position:relative}.vff-footer a.f-disabled{opacity:.4;cursor:default;pointer-events:none}.vff-footer .f-next svg,.vff-footer .f-prev svg{display:inline-block;-webkit-transition:fill .2s ease 0s;transition:fill .2s ease 0s;width:23px;height:13px}.vff-footer .f-nav-text{display:none}.vff-footer .f-progress-bar{height:1px;position:static;display:inline-block;width:64px;vertical-align:middle;margin:0 6px 0 0}.vff-footer .f-progress-bar-inner{height:1px;-webkit-transition:width .3s ease;transition:width .3s ease}.vff .f-section-wrap{margin-bottom:30px}.vff .f-section-wrap>div,.vff .f-submit{margin-bottom:20px}.vff .field-sectionbreak,.vff .field-submit{max-width:920px}.vff.vff-not-standalone{height:100%;margin-top:0;margin-bottom:0;padding-top:50px;padding-bottom:100px}.vff.vff-not-standalone .f-container{margin:0}.vff.vff-not-standalone .vff-footer{position:absolute;bottom:0;width:100%}.vff-animate{-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.vff-animate *{-webkit-backface-visibility:hidden;backface-visibility:hidden}.vff .f-fade-in{-webkit-animation-name:ffadeIn;animation-name:ffadeIn}@-webkit-keyframes ffadeIn{0%{opacity:0}to{opacity:1}}@keyframes ffadeIn{0%{opacity:0}to{opacity:1}}.vff .f-fade-in-down{-webkit-animation-name:ffadeInDown;animation-name:ffadeInDown}@-webkit-keyframes ffadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes ffadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-12px,0);transform:translate3d(0,-12px,0)}to{opacity:1;-webkit-transform:none;transform:none}}.vff .f-fade-in-up{-webkit-animation-name:ffadeInUp;animation-name:ffadeInUp}@-webkit-keyframes ffadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,12px,0);transform:translate3d(0,12px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes ffadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,12px,0);transform:translate3d(0,12px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@media only screen and (min-width:1440px){.vff .field-sectionbreak,.vff .field-submit{max-width:960px}.vff .fh2,.vff h2{padding-right:2.2em}}@media only screen and (min-width:1920px){.vff .field-sectionbreak,.vff .field-submit{max-width:1160px}}@media screen and (max-width:1366px){.vff,header.vff-header{padding-right:5%;padding-left:5%}}@media only screen and (max-width:1023px){.vff,header.vff-header{padding-left:0;padding-right:0}}@media only screen and (max-width:767px){.vff .fh2,.vff h2{font-size:2.2em;padding-right:0}.vff input[type=date],.vff input[type=email],.vff input[type=file],.vff input[type=number],.vff input[type=password],.vff input[type=tel],.vff input[type=text],.vff input[type=url],.vff textarea{font-size:.78em}.vff input[type=file]{font-size:.64em}.vff .fh2 span.f-sub,.vff .fh2 span.f-tagline{font-size:.58em}.vff .f-container,header.vff-header .f-container{padding:0 5.5%}.vff span.f-empty{min-width:2.2em;padding-right:20px}.vff p.f-description{padding-right:0}.vff .field-multiplepicturechoice ul.f-radios li{font-size:14px}.vff .field-multiplepicturechoice ul.f-radios li span.f-image{height:90px}}@media screen and (max-width:479px){.vff{margin-top:10vh;min-height:180px}header.vff-header+.vff{margin-top:8vh}header.vff-header+.vff.vff-not-standalone{margin-top:0}.vff input[type=date],.vff input[type=email],.vff input[type=file],.vff input[type=number],.vff input[type=password],.vff input[type=tel],.vff input[type=text],.vff input[type=url],.vff textarea{line-height:1.4;padding:.16em .2em}.vff input[type=file]{font-size:.6em}.vff select{font-size:.72em;padding-top:.2em;padding-bottom:.2em}.vff button{min-height:42px}.vff .f-arrow-down{width:12px}.vff .fh2 span.f-sub,.vff .fh2 span.f-tagline{font-size:.64em}.vff span.f-tagline{line-height:1.5}.vff span.f-text{margin-right:0}.vff .fh2,.vff h2{font-size:1.56em}.vff ul.f-radios li,.vff ul.f-radios li input[type=text]{font-size:.62em}.vff .field-sectionbreak p{font-size:1em}.vff-footer .f-timer{font-size:16px}.vff .field-multiplepicturechoice ul.f-radios{max-width:320px}.vff .field-multiplepicturechoice ul.f-radios li{-ms-flex:0 0 calc(50% - 8px);-webkit-box-flex:0;flex:0 0 calc(50% - 8px)}}@media screen and (max-height:400px){.vff{margin-top:12vh;min-height:180px}header.vff-header{position:static}.vff-footer{font-size:15px}.vff-footer .footer-inner-wrap{padding-top:8px;padding-bottom:8px}.vff .f-radios-desc,.vff ul.f-radios li,.vff ul.f-radios li input[type=text]{font-size:14px}.vff .fh2,.vff h2{font-size:1.56em}.vff .fh2 span.f-sub,.vff .fh2 span.f-tagline{font-size:.6em}.vff .field-multiplepicturechoice ul.f-radios li span.f-image{height:90px}.vff .f-num-wrapper{width:10px}}.f-num-range{-ms-flex-wrap:wrap;flex-wrap:wrap;list-style:none;padding-left:0;-ms-flex-line-pack:center}.f-num-range,.f-num-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;align-content:center}.f-num-wrapper{height:auto;margin:.2rem;padding:.8rem .5rem;width:60px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;border:2px solid #000;border-radius:4px;text-align:center;background-color:rgba(10,10,10,.10196078431372549)}.f-num-wrapper:hover{background-color:rgba(10,10,10,.2901960784313726);cursor:pointer}.f-num-wrapper.f-selected{background-color:#000;color:#fff;border:2px solid #000}.f-num{font-size:1.4rem;font-weight:500}