:root {
    --f7-input-bg-color: transparent;
    --f7-label-font-weight: 400;
    --f7-label-line-height: 1.2;
    --f7-input-error-text-color: #ff3b30;
    --f7-input-error-font-size: 12px;
    --f7-input-error-line-height: 1.4;
    --f7-input-error-font-weight: 400;
    --f7-input-info-font-size: 12px;
    --f7-input-info-line-height: 1.4;
    --f7-input-outline-height: 40px;
    --f7-input-outline-border-color: #999;
    --f7-input-outline-border-radius: 4px;
    --f7-input-outline-padding-horizontal: 12px;
    /*
    --f7-input-outline-focused-border-color: var(--f7-theme-color);
    --f7-input-outline-invalid-border-color: var(--f7-input-error-text-color);
    */
}

:root .theme-dark,
:root.theme-dark {
    --f7-input-outline-border-color: #444;
}

.ios {
    --f7-input-height: 44px;
    --f7-input-text-color: #000000;
    --f7-input-font-size: 17px;
    --f7-input-placeholder-color: #a9a9a9;
    --f7-textarea-padding-vertical: 11px;
    /*
    --f7-input-focused-border-color: var(--f7-list-item-border-color);
    --f7-input-invalid-border-color: var(--f7-list-item-border-color);
    --f7-input-invalid-text-color: var(--f7-input-error-text-color);
    */
    --f7-label-font-size: 12px;
    --f7-label-text-color: inherit;
    /*
    --f7-label-focused-text-color: var(--f7-label-text-color);
    --f7-label-invalid-text-color: var(--f7-label-text-color);
    */
    --f7-floating-label-scale: calc(17 / 12);
    --f7-inline-label-font-size: 17px;
    --f7-inline-label-line-height: 1.4;
    --f7-inline-label-padding-top: 3px;
    --f7-input-info-text-color: #8e8e93;
    --f7-input-clear-button-size: 14px;
    --f7-input-clear-button-color: #8e8e93;
}

.ios .theme-dark,
.ios.theme-dark {
    --f7-input-text-color: #fff;
}

.md {
    --f7-input-height: 36px;
    --f7-input-text-color: #212121;
    --f7-input-font-size: 16px;
    --f7-input-placeholder-color: rgba(0, 0, 0, 0.35);
    --f7-textarea-padding-vertical: 7px;
    /*
    --f7-input-focused-border-color: var(--f7-theme-color);
    --f7-input-invalid-border-color: var(--f7-input-error-text-color);
    --f7-input-invalid-text-color: var(--f7-input-text-color);
    */
    --f7-label-font-size: 12px;
    --f7-label-text-color: rgba(0, 0, 0, 0.65);
    /*
    --f7-label-focused-text-color: var(--f7-theme-color);
    --f7-label-invalid-text-color: var(--f7-input-error-text-color );
    */
    --f7-floating-label-scale: calc(16 / 12);
    --f7-inline-label-font-size: 16px;
    --f7-inline-label-line-height: 1.5;
    --f7-inline-label-padding-top: 7px;
    --f7-input-info-text-color: rgba(0, 0, 0, 0.45);
    --f7-input-clear-button-size: 18px;
    --f7-input-clear-button-color: #aaa;
}

.md .theme-dark,
.md.theme-dark {
    --f7-input-text-color: rgba(255, 255, 255, 0.87);
    --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
    --f7-label-text-color: rgba(255, 255, 255, 0.54);
    --f7-input-info-text-color: rgba(255, 255, 255, 0.35);
}

.aurora {
    --f7-input-height: 24px;
    --f7-input-text-color: #000000;
    --f7-input-font-size: 13px;
    --f7-input-placeholder-color: rgba(0, 0, 0, 0.32);
    --f7-textarea-padding-vertical: 2px;
    /*
    --f7-input-focused-border-color: var(--f7-list-item-border-color);
    --f7-input-invalid-border-color: var(--f7-list-item-border-color);
    --f7-input-invalid-text-color: var(--f7-input-error-text-color);
    */
    --f7-label-font-size: 11px;
    --f7-label-text-color: inherit;
    /*
    --f7-label-focused-text-color: var(--f7-label-text-color);
    --f7-label-invalid-text-color: var(--f7-label-text-color);
    */
    --f7-floating-label-scale: calc(13 / 11);
    --f7-inline-label-font-size: 14px;
    --f7-inline-label-line-height: 1.4;
    --f7-inline-label-padding-top: 1px;
    --f7-input-info-text-color: rgba(0, 0, 0, 0.5);
    --f7-input-clear-button-size: 14px;
    --f7-input-clear-button-color: #666;
    --f7-input-outline-height: 32px;
    --f7-input-outline-padding-horizontal: 8px;
}

.aurora .theme-dark,
.aurora.theme-dark {
    --f7-input-text-color: #fff;
    --f7-input-clear-button-color: #aaa;
    --f7-input-placeholder-color: rgba(255, 255, 255, 0.35);
}


/* A bit of demo styles * /
.demo-swiper .swiper-slide {
    font-size: 25px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #000;
  }
  .demo-swiper .swiper-slide {
    box-sizing: border-box;
    border: 1px solid #ddd;
    background: #fff;
  }
  .demo-swiper {
    margin: 0px 0 35px;
    font-size: 18px;
    height: 120px;
  }
  .demo-swiper.demo-swiper-auto .swiper-slide {
    width: 85%;
  }
  .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {
    width: 70%;
  }
  .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {
    width: 30%;
  }

  */