vue-flow-form-rate-v1/dist/vue-flow-form.theme-damm.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
*/

/*
  basic theme color and font styles
*/

:root {
  --vff-bg-color: #fff;
  --vff-main-text-color: #181818;
  --vff-secondary-text-color: #999;
  --vff-tertiary-text-color: #f1f1f1;
  --vff-main-accent-color: #D8262E;
  --vff-secondary-accent-color: #FC706C;
}

.vff,
.vff textarea,
.vff input,
.vff select,
.vff select option,
.vff kbd,
.vff-header,
.vff-footer{
  font-family: 'Poppins', sans-serif;
}

body {
  /*override if needed when using not-standalone option*/
  margin: 0;
  background-color: var(--vff-bg-color);
}

.vff{
  color: var(--vff-main-text-color);
}

.vff.vff-not-standalone{
  background-color: var(--vff-bg-color);
  color: var(--vff-main-text-color);
}

header.vff-header{
  background-color: var(--vff-main-accent-color);
}

header.vff-header .f-languages{
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
}

header.vff-header svg.f-logo{
  fill: rgba(255,255,255,1);
}

header.vff-header .f-logo{
  height: 60px !important;
  display: inline;
}

header.vff-header {
  color: var(--vff-bg-color);
}

header.vff-header .h2-header {
  font-size: 1.2rem;
}

header.vff-header .h2-header,
header.vff-header .text-header {
  margin: .5rem auto;
  font-weight: 300;
}

header.vff-header .text-header {
  margin: .5rem auto;
  font-size: .7rem;
  line-height: 1.4;
}

.vff input[type=text],
.vff input[type=number],
.vff input[type=tel],
.vff input[type=email],
.vff input[type=url],
.vff input[type=password],
.vff input[type=date],
.vff textarea,
.vff span.faux-form {
  border-bottom-color: var(--vff-secondary-text-color);
}

.vff textarea,
.vff input,
.vff select option {
  color: var(--vff-main-text-color);
}

/* Required asterisk color */
.vff .f-required {
  color: var(--vff-main-accent-color);
}

.vff a,
.vff a:active {
  color: var(--vff-main-text-color);
}

/*placeholder*/
.vff ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: var(--vff-secondary-text-color);
  opacity: 1;
  font-weight: 300;
}

.vff ::-moz-placeholder { /* Firefox 19+ */
  color: var(--vff-secondary-text-color);
  opacity: 1;
  font-weight: 300;
}

.vff :-ms-input-placeholder { /* IE 10+ */
  color: var(--vff-secondary-text-color)!important;
  opacity: 1!important;
  font-weight: 300!important;
}

.vff :-moz-placeholder { /* Firefox 18- */
  color: #999;
  opacity: 1;
  font-weight: 300;
}

/*faux input type date placeholder for iOS*/
.vff.vff-is-ios .field-date:not(.f-has-value) .f-answer > span::before{
  color: var(--vff-secondary-text-color);
  font-weight: 300;
  font-size: .72em;
}

/*field-multiplechoice*/
.vff ul.f-radios li {
  border: 1px solid var(--vff-secondary-text-color);
}

.vff ul.f-radios li.f-selected,
.vff ul.f-radios li:active {
  border-color: var(--vff-main-text-color);
  background-color: var(--vff-tertiary-text-color);
}

.vff ul.f-radios li.f-other.f-selected input {
  color: inherit;
}

.vff .f-key{
  color: var(--vff-secondary-text-color);
}

/*field-dropdown*/
.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-main-text-color);
}

/*buttons*/
.vff .o-btn-action {
  color: var(--vff-bg-color);
  background-color: var(--vff-main-accent-color);
}

.vff .o-btn-action:hover,
.vff .o-btn-action:focus {
  background-color: var(--vff-main-accent-color);
  opacity: .9;
}

/*footer*/
.vff-footer .footer-inner-wrap{
  background-color: rgba(255,255,255,0.75);
}

@media screen and (max-width:479px) {
  .vff-footer .footer-inner-wrap{
    background-color: rgba(240,240,240,0.75);
  }

}

.vff-footer .f-prev svg,
.vff-footer .f-next svg {
  fill: var(--vff-main-accent-color);
}

.vff-footer .f-progress {
  color: var(--vff-main-accent-color);
}

.vff-footer .f-progress-bar {
  background-color: var(--vff-secondary-text-color);
  filter: brightness(1.2);
}

.vff-footer .f-progress-bar-inner {
  background-color: var(--vff-main-accent-color);
}

.vff-footer .f-prev:hover,
.vff-footer .f-next:hover,
.vff-footer .f-prev:focus,
.vff-footer .f-next:focus{
  background-color: rgba(0,0,0,0.07);
}

/*alerts*/
.vff .text-alert,
.vff .f-invalid{
  color: #F5554A;
}

.vff .text-success{
  color: #4CAF50;
}

/* tag-line */

.vff span.f-tagline {
  color: var(--vff-main-accent-color);
  font-size: 2rem !important;
}

@media screen and (max-height:400px) {
  .vff .fh2 span.f-tagline {
    font-size: .8rem !important;
  }
}

@media only screen and (max-width: 767px) {
  .vff .fh2 span.f-tagline {
    font-size: 1.8rem !important;
  }
}

@media screen and (max-width:479px) {
  .vff .fh2 span.f-tagline {
    font-size: 1.1rem !important;
  }
}

/*text-muted*/
.vff span.f-sub,
.vff p.f-description,
.vff .text-muted {
  color: var(--vff-secondary-text-color);
}