@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.min.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
*/:root{--vff-bg-color:#f9f6fb;--vff-main-text-color:#181818;--vff-secondary-text-color:#7f8c8d;--vff-tertiary-text-color:#f1f1f1;--vff-main-accent-color:#27ae60;--vff-secondary-accent-color:#2ecc71;--vff-tertiary-accent-color:#8e44ad;--vff-header-color:var(--vff-tertiary-accent-color);--vff-header-border-color:transparent;--vff-button-color:var(--vff-main-accent-color);--vff-button-hover-color:var(--vff-secondary-accent-color);--vff-button-text-color:#fff;--vff-main-form-bg-color:#f9f6fb;--vff-secondary-form-bg-color:#475a6d;--vff-form-input-color:var(--vff-main-text-color);--vff-field-key-color:var(--vff-main-accent-color);--vff-arrow-color:var(--vff-main-text-color);--vff-arrow-hover-color:rgba(0,0,0,.07);--vff-footer-color:rgba(249,246,251,.75);--vff-progress-bar-color:var(--vff-main-text-color)}.vff,.vff input,.vff kbd,.vff select,.vff select option,.vff textarea,.vff-footer,.vff-header{font-family:Poppins,sans-serif}body{background-color:var(--vff-bg-color);margin:0}.vff,.vff.vff-not-standalone{color:var(--vff-main-text-color)}.vff.vff-not-standalone{background-color:var(--vff-bg-color)}header.vff-header{background-color:var(--vff-header-color);border-bottom:2px solid var(--vff-header-border-color);padding-bottom:.6em}header.vff-header svg.f-logo{fill:var(--vff-main-text-color)}.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 span.faux-form,.vff textarea{border-bottom-color:var(--vff-secondary-text-color)}.vff input,.vff select option,.vff textarea{color:var(--vff-form-input-color)}.vff a,.vff a:active{color:var(--vff-main-text-color)}.vff ::-webkit-input-placeholder{color:var(--vff-secondary-text-color);font-weight:300;opacity:1}.vff ::-moz-placeholder{color:var(--vff-secondary-text-color);font-weight:300;opacity:1}.vff :-ms-input-placeholder{color:var(--vff-secondary-text-color)!important;font-weight:300!important;opacity:1!important}.vff :-moz-placeholder{color:#999;font-weight:300;opacity:1}.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer>span:before{color:var(--vff-secondary-text-color);font-size:.72em;font-weight:300}.vff ul.f-radios li{background-color:var(--vff-main-form-bg-color);border:1px solid var(--vff-secondary-form-bg-color)}.vff ul.f-radios li.f-selected,.vff ul.f-radios li:active{background-color:var(--vff-secondary-form-bg-color);border-color:var(--vff-secondary-form-bg-color);color:var(--vff-tertiary-text-color)}.vff ul.f-radios li.f-other.f-selected input{color:inherit}.vff .f-key{color:var(--vff-field-key-color)}.vff .field-iconrate ul.f-radios li.f-previous .f-icon-wrap svg,.vff .field-iconrate ul.f-radios li.f-selected .f-icon-wrap svg{stroke:var(--vff-secondary-form-bg-color);fill:var(--vff-secondary-form-bg-color)}.vff span.f-empty{color:var(--vff-secondary-text-color)}.vff span.f-answered{color:var(--vff-main-text-color)}.vff .f-arrow-down svg{fill:var(--vff-arrow-color)}.vff .f-matrix-table{border-collapse:separate;border-spacing:0 .6em}.vff .f-matrix-table thead th{padding-bottom:0}.vff .f-matrix-table td{border:1px solid var(--vff-secondary-form-bg-color);border-left:hidden;border-right:hidden}.vff .f-matrix-table td:first-child{border-left:1px solid var(--vff-secondary-form-bg-color)}.vff .f-matrix-table td:last-child{border-right:1px solid var(--vff-secondary-form-bg-color)}.vff .f-matrix-table thead td:first-child{border:none}.vff .f-field-svg{border-width:2px;color:var(--vff-secondary-text-color)}.vff .f-field-control:checked~.f-field-mask .f-field-svg{color:var(--vff-secondary-form-bg-color)}.vff .f-matrix-wrap::-webkit-scrollbar{height:10px}.vff .f-matrix-wrap::-webkit-scrollbar-track{background-color:var(--vff-tertiary-text-color)}.vff .f-matrix-wrap::-webkit-scrollbar-thumb{background-color:var(--vff-secondary-form-bg-color)}.vff .o-btn-action{background-color:var(--vff-button-color);color:var(--vff-button-text-color)}.vff .o-btn-action:focus,.vff .o-btn-action:hover{background-color:var(--vff-button-hover-color);opacity:.9}.vff-footer .footer-inner-wrap{background-color:var(--vff-footer-color)}@media screen and (max-width:479px){.vff-footer .footer-inner-wrap{background-color:hsla(0,0%,90%,.75)}}.vff-footer .f-next svg,.vff-footer .f-prev svg{fill:var(--vff-arrow-color)}.vff-footer .f-progress{color:var(--vff-secondary-text-color)}.vff-footer .f-progress-bar{background-color:var(--vff-secondary-text-color);-webkit-filter:brightness(1.2);filter:brightness(1.2)}.vff-footer .f-progress-bar-inner{background-color:var(--vff-progress-bar-color)}.vff-footer .f-next:hover,.vff-footer .f-prev:hover{background-color:var(--vff-arrow-hover-color)}.vff .f-invalid,.vff .text-alert{color:#f5554a}.vff .text-success{color:var(--vff-main-accent-color)}.vff .text-muted,.vff p.f-description,.vff span.f-sub,.vff span.f-tagline{color:var(--vff-secondary-text-color)}@media (prefers-color-scheme:dark){:root{--vff-bg-color:#2c3e50;--vff-main-text-color:#fff;--vff-secondary-text-color:#bdc3c7;--vff-tertiary-text-color:#41464f;--vff-header-color:#34495e;--vff-header-border-color:var(--vff-tertiary-accent-color);--vff-main-form-bg-color:#34495e;--vff-secondary-form-bg-color:#ecf0f1;--vff-form-input-color:var(--vff-main-accent-color);--vff-field-key-color:var(--vff-main-accent-color);--vff-arrow-color:var(--vff-main-accent-color);--vff-arrow-hover-color:rgba(0,0,0,.2);--vff-footer-color:#2c3e50;--vff-progress-bar-color:var(--vff-main-accent-color)}.vff span.f-answered{color:var(--vff-main-accent-color)}.vff ::-webkit-calendar-picker-indicator{-webkit-filter:invert(100%);filter:invert(100%)}.vff-footer .f-next.f-disabled svg,.vff-footer .f-prev.f-disabled svg{fill:var(--vff-main-text-color)}.vff-footer .f-progress-bar{-webkit-filter:brightness(1);filter:brightness(1)}.vff-footer .footer-inner-wrap{background-color:rgba(44,62,80,.8)}.vff .f-key{font-weight:400}}