/* #FBF7F4; */
@font-face {
  font-family: "NittiGroteskMedium";
  src: url(../fonts/nitti-grotesk-medium.woff) format("woff"), url(../fonts/nitti-grotesk-medium.ttf) format("truetype");
  /* Safari, Android, iOS */ }

@font-face {
  font-family: "NittiGroteskSemiLight";
  src: url(../fonts/nitti-grotesk-semi-light.woff) format("woff"); }

@font-face {
  font-family: "MillerBannerLight";
  src: url(../fonts/miller-banner-light.woff) format("woff"), url(../fonts/miller-banner-light.ttf) format("truetype");
  /* Safari, Android, iOS */ }

.flo-forms-app .hidden {
  display: none; }

.flo-forms-app .flo-forms-icon:before {
  font-family: "icomoon"; }

.flo-forms-app .flo-forms-icon.dashicons:before {
  font-family: "dashicons"; }

.flo-forms-app .label-font-preview {
  cursor: pointer;
  padding-right: 25px; }

.flo-forms-app .font-option_1 .label-font-preview {
  font-family: var(--data-label-font) !important; }

.flo-forms-app .font-option_2 .label-font-preview {
  font-family: var(--data-input-font) !important; }

.flo-forms-app .font-option_3 .label-font-preview {
  font-family: var(--data-hint-font) !important; }

.flo-forms-app .font-option_4 .label-font-preview {
  font-family: var(--data-button-font) !important; }

.flo-forms-app .settings-label_140 {
  width: 140px;
  flex-shrink: 0; }

.flo-forms-app .flex-grow-1 {
  flex-grow: 1; }

.flo-forms-app .button-long {
  width: 100%;
  height: 60px;
  font-size: 18px; }

.flo-forms-app .button-rounded {
  border-radius: 30px; }

.flo-forms-app .button-rounded {
  border-radius: 4px;
  padding: 5px; }

.flo-forms-app .editor {
  position: relative;
  max-width: 30rem;
  margin: 0 auto; }
  .flo-forms-app .editor__content {
    min-height: 100px;
    max-height: 300px;
    overflow-y: scroll;
    border: 1px solid #ababab;
    border-radius: 5px;
    padding: 0 8px; }
  .flo-forms-app .editor .menububble {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 20;
    background: #000;
    border-radius: 5px;
    padding: 0.3rem;
    margin-bottom: 0.5rem;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 0.2s, visibility 0.2s;
    transition: opacity 0.2s, visibility 0.2s; }
    .flo-forms-app .editor .menububble.is-active {
      opacity: 1;
      visibility: visible; }
    .flo-forms-app .editor .menububble__button {
      display: inline-flex;
      background: transparent;
      border: 0;
      color: #fff;
      padding: 0.2rem 0.5rem;
      margin-right: 0.2rem;
      border-radius: 3px;
      cursor: pointer; }
      .flo-forms-app .editor .menububble__button:last-child {
        margin-right: 0; }
    .flo-forms-app .editor .menububble__form {
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    .flo-forms-app .editor .menububble__input {
      font: inherit;
      border: none;
      background: transparent;
      color: #fff;
      padding: 2px 5px !important; }

.forms-pro-label {
  background-color: #ec6142;
  color: #fff;
  padding: 0px 5px;
  border-radius: 4px;
  font-weight: 100;
  font-size: 10px; }

.flo-forms-settings--wrapper {
  display: flex;
  align-items: flex-start; }

.flo-forms-settings {
  background-color: #fff;
  max-width: 800px;
  margin-top: 30px;
  border-radius: 8px; }
  .flo-forms-settings--title {
    font-family: NittiGroteskMedium;
    font-size: 20px;
    margin-top: 20px; }
  .flo-forms-settings--version {
    font-size: 11px;
    color: #b3b3b3; }
  .flo-forms-settings.shootq-integration, .flo-forms-settings.tave-integration {
    padding: 30px 20px; }
  .flo-forms-settings input[type="text"] {
    padding: 7px;
    border: 1px solid #ababab;
    border-radius: 5px; }
  .flo-forms-settings--tabs {
    background-color: #f5f5f5;
    display: flex;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px; }
  .flo-forms-settings .for-submit .button-primary {
    width: 300px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    font-size: 20px; }
    .flo-forms-settings .for-submit .button-primary:hover {
      border-radius: 30px; }
  .flo-forms-settings .tab {
    cursor: pointer;
    font-family: NittiGroteskMedium;
    border-bottom: 3px solid #f5f5f5;
    width: calc(100% / 3); }
    .flo-forms-settings .tab .forms-pro-label {
      position: absolute;
      top: 17px;
      left: 47%; }
    .flo-forms-settings .tab:not(:first-child):not(.active) {
      border-left: 1px solid #d8d8d8; }
    .flo-forms-settings .tab.active + .tab {
      border-left: 0px; }
    .flo-forms-settings .tab a,
    .flo-forms-settings .tab div {
      padding: 30px 30px;
      display: block;
      text-decoration: none;
      color: #ababab;
      font-size: 16px;
      position: relative; }
    .flo-forms-settings .tab:hover {
      border-bottom: 3px solid #999; }
    .flo-forms-settings .tab.active {
      background-color: #fff;
      border-bottom: 3px solid #fff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px; }
      .flo-forms-settings .tab.active a {
        color: #23282d; }
      .flo-forms-settings .tab.active:hover {
        border-bottom: 3px solid #fff; }
  .flo-forms-settings .test-email-response-container {
    display: block;
    margin-top: 30px; }
  .flo-forms-settings .test-email-options {
    background-color: #d2d9df;
    padding: 30px;
    border-radius: 10px; }
    .flo-forms-settings .test-email-options-title {
      font-family: NittiGroteskMedium;
      font-size: 18px;
      margin-bottom: 10px; }
    .flo-forms-settings .test-email-options-description {
      margin-bottom: 10px; }
    .flo-forms-settings .test-email-options #send-test-email {
      height: 50px;
      border-radius: 6px;
      width: 250px; }
    .flo-forms-settings .test-email-options .send-email-btn {
      cursor: pointer;
      height: 50px;
      padding: 0 30px;
      border-radius: 6px; }
    .flo-forms-settings .test-email-options--email-field-wrapper {
      position: relative;
      width: 240px;
      display: inline-block; }
      .flo-forms-settings .test-email-options--email-field-wrapper .hint {
        position: absolute;
        left: 0;
        bottom: -20px; }
    .flo-forms-settings .test-email-options label {
      font-size: 14px;
      margin-right: 40px; }
    .flo-forms-settings .test-email-options input[type="button"] {
      padding: 5px 20px;
      border-radius: 14px;
      margin-left: 30px;
      cursor: pointer; }
  .flo-forms-settings form {
    padding: 50px 30px; }
  .flo-forms-settings .tab-content {
    display: none; }
    .flo-forms-settings .tab-content.active {
      display: block; }
    .flo-forms-settings .tab-content.test-email-tab-content {
      width: 740px; }
  .flo-forms-settings .title {
    font-family: MillerBannerLight;
    font-size: 30px; }
  .flo-forms-settings .options-header {
    margin-bottom: 30px; }
    .flo-forms-settings .options-header .title {
      margin-bottom: 30px;
      padding-bottom: 30px;
      border-bottom: 1px solid #e4e4e4;
      color: #444; }
  .flo-forms-settings .button-primary,
  .flo-forms-settings .button-primary:hover {
    font-family: NittiGroteskMedium;
    background: #ec6142;
    border-width: 0px;
    border-radius: 6px;
    box-shadow: 0 0 0 #bd965a;
    text-shadow: 0 0 0 #bd965a;
    padding: 2px 25px !important; }
  .flo-forms-settings .for-submit {
    text-align: right; }
  .flo-forms-settings input[type="text"] {
    width: 250px; }
  .flo-forms-settings h4 {
    margin-bottom: 0.3em;
    font-family: NittiGroteskMedium;
    font-size: 18px;
    font-weight: 100; }
  .flo-forms-settings label {
    font-family: NittiGroteskMedium;
    font-size: 14px; }
  .flo-forms-settings .options-row.flex {
    display: flex; }
  .flo-forms-settings .options-row.border-bottom {
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 30px;
    margin-bottom: 30px; }
  .flo-forms-settings .options-row--label {
    margin-top: 0;
    width: 35%; }
  .flo-forms-settings .options-row--hint {
    width: 35%;
    padding-left: 25px;
    box-sizing: border-box; }
  .flo-forms-settings .options-row--settings {
    width: 30%;
    text-align: right; }
    .flo-forms-settings .options-row--settings input[type="text"],
    .flo-forms-settings .options-row--settings select {
      width: 100%;
      height: 40px; }
  .flo-forms-settings .options-row .recaptcha-key-generation-link {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #dee4e0;
    text-align: center;
    vertical-align: middle;
    border-radius: 8px; }
  .flo-forms-settings .options-row label {
    margin-right: 10px; }

.flo-forms-app .hint {
  font-size: 12px;
  font-style: italic;
  color: #a9a9a9; }

.form-group .hint {
  margin-top: 3px; }

.flo-forms-settings .hint {
  font-size: 10px;
  font-style: italic;
  color: #a9a9a9; }

.button-styles-digit input {
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  height: 45px; }

.button-styles-digit .label {
  margin-bottom: 8px; }

.post-type-flo_forms .form-settings-wrapper {
  font-family: NittiGroteskMedium; }
  .post-type-flo_forms .form-settings-wrapper .hint {
    font-style: italic;
    color: #a9a9a9;
    font-size: 10px; }

.post-type-flo_forms .ui-widget {
  font-family: NittiGroteskMedium;
  font-size: 16px; }

.post-type-flo_forms #poststuff #post-body.columns-2 {
  margin-right: 0px; }

.post-type-flo_forms #post-body.columns-2 #postbox-container-1 {
  margin-right: 0px;
  width: 100%; }

.post-type-flo_forms #poststuff #post-body.columns-2 #side-sortables {
  width: 100%; }

.post-type-flo_forms #submitdiv.postbox {
  width: 280px;
  float: right; }

.post-type-flo_forms #flo-publishing-action {
  text-align: center;
  border-radius: 0 0 0 6px;
  padding: 0 30px 40px 30px;
  margin-bottom: -2px; }
  .post-type-flo_forms #flo-publishing-action .button-primary {
    font-family: NittiGroteskMedium;
    background: #ec6142;
    border-width: 0px;
    box-shadow: 0 0 0 #bd965a;
    text-shadow: 0 0 0 #bd965a;
    padding: 2px 25px;
    letter-spacing: 1px; }
  .post-type-flo_forms #flo-publishing-action .spinner {
    position: absolute;
    bottom: 2px;
    left: 45%; }

.post-type-flo_forms .ui-corner-all {
  border-radius: 0px;
  border-top: 0px;
  border-bottom: 0px;
  border-left: 0px; }

.post-type-flo_forms #submitdiv {
  display: none; }

.post-type-flo_forms .flo-forms-settings input[type="text"],
.post-type-flo_forms .flo-forms-settings input[type="email"],
.post-type-flo_forms .flo-forms-settings input[type="number"],
.post-type-flo_forms .flo-forms-settings textarea,
.post-type-flo_forms #flo_form_settings input[type="text"],
.post-type-flo_forms #flo_form_settings input[type="email"],
.post-type-flo_forms #flo_form_settings input[type="number"],
.post-type-flo_forms #flo_form_settings textarea {
  padding: 15px; }

.post-type-flo_forms .flo-forms-settings input[type="number"],
.post-type-flo_forms #flo_form_settings input[type="number"] {
  height: 45px; }

.post-type-flo_forms .flo-forms-settings select,
.post-type-flo_forms #flo_form_settings select {
  height: 50px;
  width: 100%; }

.ff_margin_bottom_5 {
  margin-bottom: 5px; }

.ff_margin_bottom_10 {
  margin-bottom: 10px; }

.ff_margin_bottom_15 {
  margin-bottom: 15px; }

.ff_margin_bottom_20 {
  margin-bottom: 20px; }

.ff_margin_bottom_25 {
  margin-bottom: 25px; }

.ff_margin_bottom_30 {
  margin-bottom: 30px; }

.width_100 {
  width: 100%; }

#flo_form_settings .form-settings-wrapper {
  display: flex; }

#flo_form_settings h2.ui-sortable-handle span {
  font-family: NittiGroteskMedium;
  font-size: 20px;
  font-weight: 100;
  color: #444444; }

#form-tabs {
  width: 435px;
  display: inline-block;
  vertical-align: top; }
  #form-tabs.ui-tabs {
    padding-left: 0px; }
  #form-tabs .tab-title {
    font-family: NittiGroteskMedium;
    font-style: italic;
    font-size: 12px;
    color: #565656;
    margin-bottom: 23px; }
    #form-tabs .tab-title.hint {
      color: #a9a9a9;
      margin-top: 10px;
      display: block; }
  #form-tabs input,
  #form-tabs textarea {
    font-family: NittiGroteskMedium; }
  #form-tabs .field-settings-label {
    position: relative;
    display: block;
    margin-bottom: 30px; }
    #form-tabs .field-settings-label--wrapper {
      margin-bottom: 30px; }
      #form-tabs .field-settings-label--wrapper input {
        display: none; }
    #form-tabs .field-settings-label--ckbx-description .hint {
      font-style: italic;
      font-size: 12px; }
    #form-tabs .field-settings-label--ckbx-description .fr-toolbar .fr-command.fr-btn i {
      margin: 6px; }
    #form-tabs .field-settings-label--ckbx-description .fr-box {
      width: 100%; }
    #form-tabs .field-settings-label--ckbx-description .fr-popup .fr-checkbox-line label {
      margin-left: 25px;
      margin-top: -8px; }
    #form-tabs .field-settings-label--label-description .hint {
      font-style: italic;
      font-size: 12px; }
    #form-tabs .field-settings-label.border-bottom {
      border-bottom: 1px solid #d8d8d8;
      padding-bottom: 30px;
      margin-bottom: 30px; }
    #form-tabs .field-settings-label--confirmation-options .confirmation-label {
      border: 1px solid #d8d8d8;
      width: 50%;
      text-align: center;
      padding: 6px 0; }
      #form-tabs .field-settings-label--confirmation-options .confirmation-label--text {
        border-right: 0px;
        border-radius: 5px 0 0 5px; }
      #form-tabs .field-settings-label--confirmation-options .confirmation-label--page {
        border-left: 0px;
        border-radius: 0 5px 5px 0; }
      #form-tabs .field-settings-label--confirmation-options .confirmation-label.selected {
        background-color: #ec6142;
        border-color: #ec6142;
        color: #fff; }
    #form-tabs .field-settings-label .flex {
      display: flex;
      align-items: center; }
    #form-tabs .field-settings-label .settings-label {
      flex-shrink: 0;
      margin-bottom: 10px; }
    #form-tabs .field-settings-label .field-id--value,
    #form-tabs .field-settings-label .field-id--label {
      color: #ababab;
      font-size: 18px; }
    #form-tabs .field-settings-label textarea {
      flex-grow: 1;
      height: 80px; }
    #form-tabs .field-settings-label .text-confirmation-container .fr-element.fr-view {
      min-height: 150px; }
    #form-tabs .field-settings-label .text-confirmation-container .fr-toolbar .fr-command.fr-btn,
    #form-tabs .field-settings-label .text-confirmation-container .fr-popup .fr-command.fr-btn {
      width: 36px; }
  #form-tabs .email-confirmation-container {
    padding-top: 20px; }
  #form-tabs .ui-tabs-panel {
    padding: 45px 30px 15px; }
  #form-tabs .field-buttons li {
    width: 48%;
    display: inline-block;
    position: relative;
    margin-bottom: 18px;
    height: 30px;
    font-family: NittiGroteskMedium;
    vertical-align: middle; }
    #form-tabs .field-buttons li:before {
      position: absolute;
      left: 8px;
      font-size: 14px;
      top: 11px;
      font-family: "dashicons";
      color: #bd965a; }
    #form-tabs .field-buttons li a {
      font-family: NittiGroteskMedium;
      padding: 9px 0 7px 30px;
      display: block;
      position: relative;
      border: 1px solid #d8d8d8;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
      background-clip: padding-box;
      font-size: 13px !important;
      text-align: left;
      vertical-align: middle;
      text-decoration: none;
      line-height: 20px; }
    #form-tabs .field-buttons li.dashicons-editor-textcolor:before {
      content: "Aa";
      font-family: NittiGroteskMedium; }
    #form-tabs .field-buttons li.dashicons-arrow-down:before {
      font-size: 18px;
      left: 4px;
      top: 10px; }
    #form-tabs .field-buttons li.dashicons-marker:before {
      font-size: 16px;
      color: #d6d6d6; }
    #form-tabs .field-buttons li.dashicons-marker:after {
      content: ".";
      position: absolute;
      top: -7px;
      left: 11.5px;
      font-size: 36px;
      color: #bd965a; }
    #form-tabs .field-buttons li:nth-child(odd) {
      padding-right: 5px; }
  #form-tabs .form-settings--integrations-no_integrations {
    display: block;
    font-family: NittiGroteskMedium;
    font-size: 18px;
    text-align: center;
    padding: 50px 0; }
  #form-tabs .form-settings--integrations input[type="text"] {
    padding: 7px 10px;
    line-height: 1.2; }
  #form-tabs .form-settings--integrations-linkall {
    color: #ec6142;
    display: block;
    margin: 0 auto 30px;
    text-align: center; }
  #form-tabs #form-settings input[type="text"],
  #form-tabs #form-settings select,
  #form-tabs #form-settings textarea,
  #form-tabs #fields-settings input[type="text"],
  #form-tabs #fields-settings select,
  #form-tabs #fields-settings textarea {
    border: 1px solid #ababab;
    border-radius: 5px; }
  #form-tabs #form-settings input[type="text"],
  #form-tabs #fields-settings input[type="text"] {
    flex-grow: 1; }
  #form-tabs #form-settings textarea,
  #form-tabs #form-settings .page-confirmation-value,
  #form-tabs #fields-settings textarea,
  #form-tabs #fields-settings .page-confirmation-value {
    width: 100%; }
  #form-tabs #form-settings input.flo-forms-color-picker,
  #form-tabs #fields-settings input.flo-forms-color-picker {
    width: 50px;
    margin-right: 5px; }
  #form-tabs label.label-placement {
    line-height: 26px;
    margin-bottom: 10px; }
    #form-tabs label.label-placement select {
      float: right; }
  #form-tabs .settings-styling-tabs .flex {
    display: flex;
    align-items: center; }
  #form-tabs .settings-styling-tabs .pro-styling {
    border: 1px solid #d8d8d8;
    width: 50%;
    text-align: center;
    padding: 15px 0;
    background-color: #f5f5f5; }
    #form-tabs .settings-styling-tabs .pro-styling--font {
      border-radius: 5px 0 0 5px; }
    #form-tabs .settings-styling-tabs .pro-styling--settings {
      border-right: 0;
      border-radius: 5px 0 0 5px; }
    #form-tabs .settings-styling-tabs .pro-styling:last-child {
      border-radius: 0 5px 5px 0; }
    #form-tabs .settings-styling-tabs .pro-styling.selected {
      background-color: #dee4e0;
      border-color: #dee4e0;
      color: #2a2a2a; }

h2.hndle {
  font-family: MillerBannerLight;
  font-size: 25px !important; }

.form-preview {
  padding-left: 12px;
  display: inline-block;
  flex: 1;
  min-height: 650px; }
  .form-preview .no-fields-msg {
    position: relative;
    display: flex;
    justify-content: space-between; }
    .form-preview .no-fields-msg--start-designing, .form-preview .no-fields-msg--predefined-templates {
      background-color: #f8f8f8;
      padding: 40px 25px 35px;
      box-sizing: border-box; }
      .form-preview .no-fields-msg--start-designing h2.start-title, .form-preview .no-fields-msg--predefined-templates h2.start-title {
        text-align: center;
        font-family: MillerBannerLight;
        font-size: 20px !important;
        margin-bottom: 45px !important; }
    .form-preview .no-fields-msg--predefined-templates {
      padding-left: 0;
      padding-right: 0; }
    .form-preview .no-fields-msg--start-designing {
      display: flex;
      flex-direction: column;
      justify-content: space-between; }
      .form-preview .no-fields-msg--start-designing.ff-free {
        width: 100%; }
        .form-preview .no-fields-msg--start-designing.ff-free img {
          max-width: 300px;
          margin: 0 calc(50% - 200px) 30px; }
      .form-preview .no-fields-msg--start-designing img {
        max-width: 100%;
        margin-left: -35px;
        margin-bottom: 30px; }
    .form-preview .no-fields-msg .saved-etmplates-title {
      width: 100%;
      text-align: center; }
    .form-preview .no-fields-msg .start-form-note,
    .form-preview .no-fields-msg .templates-form-note {
      font-family: NittiGroteskMedium;
      font-size: 17px;
      text-align: center;
      color: #818181; }
    .form-preview .no-fields-msg .templates-form-note {
      padding: 5px 25px; }
  .form-preview .start-form-note {
    text-align: center; }
  .form-preview .flo-section-break {
    width: 96%;
    margin-top: var(--data-margin-top);
    margin-bottom: var(--data-margin-bottom); }
  .form-preview .add-field-spinner {
    margin-right: 50%; }
  .form-preview .req {
    color: red; }
  .form-preview label.desc {
    display: inline-block;
    width: 110px;
    vertical-align: top;
    padding-right: 10px; }
  .form-preview .fid_submit_button {
    width: 97%;
    overflow: auto; }
    .form-preview .fid_submit_button div.center {
      text-align: center; }
    .form-preview .fid_submit_button div.right {
      text-align: right; }
  .form-preview label.desc {
    line-height: 32px; }
  .form-preview.topLabel label.desc {
    width: 100%; }
  .form-preview.rightLabel label.desc {
    text-align: right; }
  .form-preview input[type="text"],
  .form-preview input[type="email"],
  .form-preview textarea {
    width: 100%; }
  .form-preview.rightLabel .width-100, .form-preview.leftLabel .width-100 {
    display: flex; }
    .form-preview.rightLabel .width-100 .desc, .form-preview.leftLabel .width-100 .desc {
      margin-right: 5px; }
  .form-preview.rightLabel .field-box-wrap, .form-preview.leftLabel .field-box-wrap {
    width: 70%;
    display: inline-block;
    padding-top: 8px; }
  .form-preview.topLabel .width-100 label.desc {
    width: 98%; }
  .form-preview .the-label {
    font-family: ProximaNovaSemibold; }
  .form-preview [class^="choice_block_"] {
    line-height: 30px; }
  .form-preview .left_block,
  .form-preview .right_block {
    width: 48%;
    float: left;
    border: 1px solid #ccc;
    margin: 0 5px;
    display: inline-flex;
    height: 100%;
    visibility: hidden; }
  .form-preview .right_block ul,
  .form-preview .left_block ul {
    width: 99.9%;
    margin: 0;
    min-height: 60px;
    background-color: #f8f8f8; }
    .form-preview .right_block ul li,
    .form-preview .left_block ul li {
      width: 94%;
      border: 2px solid #f8f8f8; }
      .form-preview .right_block ul li.width-50,
      .form-preview .left_block ul li.width-50 {
        width: 44%;
        margin: 5px; }
      .form-preview .right_block ul li .field-id,
      .form-preview .left_block ul li .field-id {
        color: #f8f8f8; }

.fields-controls .preselected-choice {
  display: none; }

.fields-controls .field-settings {
  display: none; }
  .fields-controls .field-settings.visible {
    display: block; }
  .fields-controls .field-settings--choices {
    position: relative;
    margin-bottom: 10px; }
  .fields-controls .field-settings--choices-wrapper {
    padding: 10px 10px 0 10px;
    border: 1px solid #ababab;
    border-radius: 5px; }

.fields-controls .field-id-value {
  display: block;
  margin-bottom: 23px;
  font-weight: 100;
  font-family: NittiGroteskMedium;
  color: #565656; }

.fields-controls .add-new-choice {
  cursor: pointer;
  color: #ec6142;
  position: absolute;
  bottom: 13px;
  right: 20px;
  z-index: 1;
  width: 26px;
  height: 26px;
  font-size: 12px;
  vertical-align: middle;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #d8d8d8; }
  .fields-controls .add-new-choice:before {
    content: "\f132" !important;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%); }
  .fields-controls .add-new-choice:hover {
    background-color: #ec6142;
    color: #fff; }

.fields-controls .remove-choice {
  color: #000;
  cursor: pointer;
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid #d8d8d8;
  border-radius: 50%;
  font-size: 12px;
  bottom: 13px;
  right: -13px;
  z-index: 1;
  margin-top: 9px;
  margin-left: 10px;
  background-color: #fff; }
  .fields-controls .remove-choice:before {
    width: 12px;
    height: 12px;
    font-size: 12px;
    position: absolute;
    left: 8px;
    top: 8px; }
  .fields-controls .remove-choice:hover {
    background-color: #2a2a2a;
    color: #fff; }

.fields-controls .choice-block {
  margin-top: 4px;
  margin-bottom: 8px; }
  .fields-controls .choice-block input[type="text"] {
    margin-right: 7px;
    width: 190px !important; }

.form-shortcode-preview {
  display: block;
  clear: both;
  position: relative; }

.post-type-flo_form_entry .wp-list-table tbody tr {
  font-weight: bold; }
  .post-type-flo_form_entry .wp-list-table tbody tr.entry-read {
    font-weight: 100; }
    .post-type-flo_form_entry .wp-list-table tbody tr.entry-read strong a {
      font-weight: 100; }

/* BOF Flo Forms Pro styles */
.form-tabs {
  padding-top: 0 !important; }
  .form-tabs--wrapper {
    background-color: #f8f8f8 !important;
    border-radius: 8px 8px 0 0 !important; }
  .form-tabs .ui-tabs-nav {
    background: transparent;
    border-width: 0px;
    display: flex;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important; }
    .form-tabs .ui-tabs-nav a {
      outline: none;
      padding: 0 !important;
      width: 100%;
      font-size: 16px;
      color: #c6c6c6 !important; }
      .form-tabs .ui-tabs-nav a:focus {
        box-shadow: 0 0 0 0 #cfcfcf, 0 0 0 0 #cfcfcf; }
    .form-tabs .ui-tabs-nav .icon-Form_Settings_Inactive {
      font-size: 20px;
      margin-bottom: 2px; }
    .form-tabs .ui-tabs-nav .ui-state-default {
      background: #f8f8f8;
      border-radius: 0px;
      border-width: 0px;
      font-size: 100%;
      border-right-width: 0px; }
      .form-tabs .ui-tabs-nav .ui-state-default:first-child {
        border-top-left-radius: 8px; }
      .form-tabs .ui-tabs-nav .ui-state-default:second-child {
        border-left: 1px solid #e9e9e9; }
      .form-tabs .ui-tabs-nav .ui-state-default:last-child {
        border-top-right-radius: 8px; }
      .form-tabs .ui-tabs-nav .ui-state-default.fields-settings .icon-Filed_Settings_Active {
        display: none;
        font-size: 26px;
        margin-top: -4px;
        margin-bottom: 3px; }
      .form-tabs .ui-tabs-nav .ui-state-default.fields-settings .icon-Filed_Settings_Inactive {
        display: block;
        font-size: 26px;
        font-weight: bold;
        margin-top: -4px;
        margin-bottom: 3px; }
      .form-tabs .ui-tabs-nav .ui-state-default.fields-settings.ui-state-active .icon-Filed_Settings_Active {
        display: block;
        font-weight: bold; }
      .form-tabs .ui-tabs-nav .ui-state-default.fields-settings.ui-state-active .icon-Filed_Settings_Inactive {
        display: none; }
      .form-tabs .ui-tabs-nav .ui-state-default.form-settings .icon-Form_Settings_Active {
        display: block;
        font-size: 26px; }
      .form-tabs .ui-tabs-nav .ui-state-default.form-settings:not(.ui-state-active) .path1:before,
      .form-tabs .ui-tabs-nav .ui-state-default.form-settings:not(.ui-state-active) .path2:before {
        color: #c6c6c6; }
      .form-tabs .ui-tabs-nav .ui-state-default.ui-state-active {
        background: #fff;
        border-color: #fff;
        border-radius: 8px 8px 0 0; }
        .form-tabs .ui-tabs-nav .ui-state-default.ui-state-active a {
          cursor: pointer;
          color: #454545 !important; }
        .form-tabs .ui-tabs-nav .ui-state-default.ui-state-active .dashicons-plus {
          background-color: #ec6142;
          border-color: #ec6142;
          color: #fff; }
        .form-tabs .ui-tabs-nav .ui-state-default.ui-state-active .icon-Form_Settings_Inactive:before {
          color: #ec6142; }
    .form-tabs .ui-tabs-nav .ui-tabs-anchor {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
    .form-tabs .ui-tabs-nav li {
      padding-left: 1px;
      padding-right: 1px;
      width: 33%;
      text-align: center;
      height: 95px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 !important; }
      .form-tabs .ui-tabs-nav li:not(:first-child) {
        border-left: 1px solid #d8d8d8; }
      .form-tabs .ui-tabs-nav li.ui-state-active + li {
        border-left: 1px solid #f8f8f8; }
      .form-tabs .ui-tabs-nav li .dashicons {
        display: block;
        margin: 0 auto 10px; }
        .form-tabs .ui-tabs-nav li .dashicons.dashicons-plus {
          color: #ababab;
          border: 2px solid #ababab;
          font-size: 12px;
          width: 14px;
          height: 14px;
          line-height: 16px;
          border-radius: 3px; }
  .form-tabs .add-field--inner-wrapper {
    display: flex !important;
    flex-flow: row wrap;
    justify-content: space-between; }
  .form-tabs .add-field--btn {
    flex-grow: 0;
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid #dadada;
    border-radius: 5px;
    width: 46%;
    display: inline-block;
    position: relative;
    margin: 0 0 30px 0;
    height: 50px;
    font-family: NittiGroteskMedium;
    vertical-align: middle;
    outline: none; }
    .form-tabs .add-field--btn:hover {
      cursor: pointer;
      background-color: #dedbd6; }
  .form-tabs .add-field--btn:nth-child(odd) {
    margin-right: 0px; }
  .form-tabs .add-field--icon-class {
    font-size: 18px;
    margin-right: 15px;
    margin-left: 8px;
    width: 15px; }
    .form-tabs .add-field--icon-class.icon-flo-calendar {
      font-size: 12px;
      margin-top: 2px; }
    .form-tabs .add-field--icon-class.flo-section-break-icon:before {
      content: " ";
      height: 1px;
      width: 18px;
      border-bottom: 1px solid;
      display: block;
      margin-top: 7px; }
  .form-tabs .add-field--flex {
    display: flex; }
    .form-tabs .add-field--flex .flo-forms-icon {
      color: #000; }
      .form-tabs .add-field--flex .flo-forms-icon:before {
        color: #000 !important; }

.panel-body {
  display: flex;
  align-items: flex-start;
  padding-bottom: 50px; }
  .panel-body.ff-free .preview-tabs {
    margin-top: 0; }
  .panel-body.ff-free .form-shortcode-preview {
    width: 100%; }
  .panel-body .dashicons {
    font-family: dashicons;
    line-height: 0.8; }

.form-preview section {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  align-content: flex-start; }

.form-preview .vue-form-generator {
  padding: var(--data-form-padding-top) var(--data-form-padding-right) var(--data-form-padding-bottom) var(--data-form-padding-left); }
  .form-preview .vue-form-generator.flo-form--custom-colors {
    background-color: var(--data-formbg-color); }

.form-preview.two-columns .vue-form-generator {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.form-preview.two-columns section.form-group-section {
  min-height: 120px;
  flex-basis: 48%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-wrap: wrap; }

.form-preview.two-columns section.form-group-one {
  position: relative; }
  .form-preview.two-columns section.form-group-one:after {
    position: absolute;
    display: block;
    content: " ";
    width: 1px;
    border-right: 1px solid #d8d8d8;
    right: -15px;
    top: 0;
    height: 100%; }

.form-preview.two-columns section.form-group-submit {
  flex: 0 0 100%;
  margin-top: 20px; }

.form-preview.two-columns section input,
.form-preview.two-columns section textarea {
  pointer-events: none; }

.form-preview .form-group {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  padding: 27px;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  margin-bottom: 20px;
  border: 1px solid transparent; }
  .form-preview .form-group:hover .remove-field {
    display: block;
    background: transparent;
    width: 32px;
    height: 32px;
    border: 1px solid #ababab;
    border-radius: 16px;
    background-color: #fff;
    z-index: 1;
    font-size: 15px; }
  .form-preview .form-group.width-100 {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0; }
  .form-preview .form-group.width-50 {
    width: 50%; }
  .form-preview .form-group.width-33 {
    width: 33%; }
  .form-preview .form-group.width-25 {
    width: 25%; }
  .form-preview .form-group.focused, .form-preview .form-group:hover {
    background-color: #f9f8f5;
    border: 1px solid #ababab;
    border-radius: 10px; }
    .form-preview .form-group.focused .sort-handle, .form-preview .form-group:hover .sort-handle {
      display: block; }
  .form-preview .form-group.field-checklist .listbox {
    display: flex;
    flex-flow: row wrap; }
  .form-preview .form-group.field-checklist .list-row {
    margin-right: 15px;
    min-width: 60px;
    margin-bottom: 5px; }
    .form-preview .form-group.field-checklist .list-row input[type="checkbox"] {
      margin-right: 10px; }
  .form-preview .form-group.required > label:after {
    content: " *";
    color: red; }
  .form-preview .form-group.field-submit input[type="submit"] {
    background-color: var(--data-btn-bgcolor);
    padding: 0.8em 1.6em;
    color: var(--data-btn-color);
    border-color: var(--data-btn-border-color);
    border-width: var(--data-button-border-width);
    cursor: not-allowed;
    pointer-events: none;
    border-radius: 5px;
    font-family: NittiGroteskMedium;
    font-size: 14px;
    border-radius: var(--data-button-border-radius) !important;
    padding-top: var(--data-button-padding-y) !important;
    padding-bottom: var(--data-button-padding-y) !important;
    padding-left: var(--data-button-padding-x) !important;
    padding-right: var(--data-button-padding-x) !important;
    width: var(--data-button-width);
    max-width: 100%; }
    .form-preview .form-group.field-submit input[type="submit"]:hover {
      background-color: var(--data-btn-bgcolor-hover);
      color: var(--data-btn-color-hover);
      border-color: var(--data-btn-border-color-hover); }
  .form-preview .form-group.field-submit .field-wrap {
    display: block; }
  .form-preview .form-group label {
    font-family: NittiGroteskMedium;
    font-size: 14px; }

.form-preview label {
  flex-basis: 100%;
  margin-bottom: 7px; }

.form-preview .remove-field {
  cursor: pointer;
  border: 0px;
  display: none;
  margin-left: 10px; }

.form-preview .field-wrap {
  display: flex;
  width: 100%; }
  .form-preview .field-wrap textarea {
    width: 100%; }
  .form-preview .field-wrap select {
    width: 100%; }
  .form-preview .field-wrap .remove-field {
    position: absolute;
    right: -15px;
    top: calc(50% - 15px); }
  .form-preview .field-wrap .sort-handle {
    width: 32px;
    height: 32px;
    color: #000;
    border: 1px solid #ababab;
    border-radius: 16px;
    position: absolute;
    left: calc(50% - 16px);
    top: -17px;
    outline: none;
    display: none;
    cursor: move;
    background-color: #fff; }
    .form-preview .field-wrap .sort-handle:before {
      color: #000; }
  .form-preview .field-wrap .sortable-ghost {
    border-color: red !important; }

.form-preview .field-checkbox {
  align-items: flex-start; }
  .form-preview .field-checkbox label {
    flex-basis: auto;
    order: 2;
    flex-grow: 1;
    position: relative;
    display: flex;
    width: calc(100% - 30px);
    margin-top: -5px; }
    .form-preview .field-checkbox label:after {
      margin-left: 8px; }
  .form-preview .field-checkbox .field-wrap {
    width: auto;
    align-items: center;
    margin-right: 10px;
    order: 1; }

.form-preview .field-input .wrapper {
  width: 100%; }

.form-preview .field-input input {
  width: 100%; }

.form-preview .field-radios .radio-list label {
  margin-right: 15px; }

.form-preview .field-radios .radio-list input[type="radio"] {
  margin-right: 10px; }

.btn-position--left .field-submit .field-wrap {
  text-align: left; }

.btn-position--center .field-submit .field-wrap {
  text-align: center; }

.btn-position--right .field-submit .field-wrap {
  text-align: right; }

.input-group.color-picker {
  margin-bottom: 30px; }

.submit-color--preview {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: var(--data-preview-color);
  cursor: pointer;
  border: 1px solid #000; }

.submit-color--preview-wrapper {
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 3px;
  height: 22px;
  width: 22px;
  display: inline-block; }

.submit-color-input {
  display: none; }

.input-group--submit-colors {
  padding: 10px 10px 10px 20px;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  font-size: 16px; }
  .input-group--submit-colors .icon-Color_Drop {
    font-size: 26px; }
  .input-group--submit-colors .vc-chrome {
    margin-left: auto;
    margin-right: 30px; }

.fields-controls .visible {
  display: block; }

.fields-controls label {
  display: block; }

.flo-form-data {
  display: none; }

.form-bottom-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 30px; }
  .form-bottom-actions--block-title {
    font-family: NittiGroteskMedium;
    font-size: 18px;
    margin-bottom: 10px; }
  .form-bottom-actions--block-text {
    font-family: NittiGroteskSemiLight;
    font-weight: 100;
    font-size: 14px; }
  .form-bottom-actions.two-options .form-shortcode-preview {
    width: calc(50% - 10px) !important;
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0; }

.form-shortcode-preview {
  background-color: #d2d9df;
  border-radius: 10px;
  padding: 30px;
  width: auto;
  font-size: 17px; }
  .form-shortcode-preview--wrapper {
    display: flex;
    flex-flow: row wrap;
    margin-top: 25px;
    height: 50px; }
    .form-shortcode-preview--wrapper .shortcode-input {
      font-family: NittiGroteskMedium;
      font-size: 14px;
      color: #2a2a2a;
      padding-left: 40px;
      background-position: 5px 50%;
      background-size: 10%;
      background-repeat: no-repeat;
      position: relative;
      border-radius: 5px 0 0 5px;
      text-align: center;
      width: calc(100% - 85px) !important;
      margin: 0;
      border: 1px solid #fff;
      background-color: transparent; }
      .form-shortcode-preview--wrapper .shortcode-input--copy {
        width: 85px;
        flex-grow: 0;
        background-color: #2a2a2a;
        color: #fff;
        border-radius: 5px;
        margin-left: -5px;
        margin-right: 3px;
        margin-top: 0;
        margin-bottom: 0;
        outline: none;
        cursor: pointer;
        font-family: NittiGroteskMedium;
        font-size: 16px;
        z-index: 2; }
  .form-shortcode-preview .shortcode-input--copy-msg {
    width: 100%;
    flex-shrink: 0;
    margin-top: 25px;
    text-align: center;
    display: none;
    font-family: NittiGroteskMedium;
    font-size: 14px; }

#flo_form_settings {
  background-color: #f1f1f1; }
  #flo_form_settings h2.sortable-handle {
    font-family: NittiGroteskMedium;
    font-size: 18px; }
  #flo_form_settings .form-preview {
    padding: 50px 35px;
    background-color: #ffffff;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    -webkit-box-shadow: -2px 3px 8px -2px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: -2px 3px 8px -2px rgba(0, 0, 0, 0.15);
    box-shadow: -2px 3px 8px -2px rgba(0, 0, 0, 0.15);
    z-index: 1; }
  #flo_form_settings .form-tabs {
    margin-right: 20px;
    border-right: 0px;
    border-radius: 8px;
    padding-right: 0px; }
  #flo_form_settings .flex {
    display: flex; }
    #flo_form_settings .flex:not(.flex-column) {
      align-items: center; }
  #flo_form_settings .flex-column {
    display: flex;
    flex-direction: column; }
  #flo_form_settings .jc-space-between {
    justify-content: space-between; }

.flo-fancy-checkbox {
  /* The switch - the box around the slider */
  /* Hide default HTML checkbox */
  /* The slider */
  /* Rounded sliders */ }
  .flo-fancy-checkbox .switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 20px; }
  .flo-fancy-checkbox .switch input {
    opacity: 0;
    width: 0;
    height: 0; }
  .flo-fancy-checkbox .checkbox-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s; }
  .flo-fancy-checkbox .checkbox-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s; }
  .flo-fancy-checkbox input:checked + .checkbox-slider {
    background-color: #ec6142; }
  .flo-fancy-checkbox input:focus + .checkbox-slider {
    box-shadow: 0 0 1px #ec6142; }
  .flo-fancy-checkbox input:checked + .checkbox-slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px); }
  .flo-fancy-checkbox .checkbox-slider.round {
    border-radius: 24px; }
  .flo-fancy-checkbox .checkbox-slider.round:before {
    border-radius: 50%; }

.conditional-logic {
  padding: 30px 30px 1px 30px;
  background-color: #cacac2;
  width: 100%;
  margin-left: -30px;
  margin-bottom: 30px;
  position: relative; }
  .conditional-logic .checkbox-slider {
    background-color: #e9e9e9; }
  .conditional-logic--label {
    font-size: 18px;
    margin-bottom: 30px; }
  .conditional-logic--add-rule-group {
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    padding: 25px 40px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    font-size: 17px;
    cursor: pointer; }
    .conditional-logic--add-rule-group .dashicons-plus {
      width: 34px;
      height: 34px;
      line-height: 34px;
      color: #fff;
      background-color: #ec6142;
      border-radius: 17px;
      order: 2;
      margin-top: 4px; }
    .conditional-logic--add-rule-group .empty-placeholder {
      width: 34px; }
  .conditional-logic .flex {
    display: flex;
    justify-content: space-between; }
  .conditional-logic fieldset {
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    margin-bottom: 25px;
    padding: 10px;
    box-sizing: border-box;
    /* Opera/IE 8+ */ }
  .conditional-logic legend {
    padding: 0 15px; }
  .conditional-logic .cl-rules--rule-container {
    display: flex;
    margin-bottom: 10px;
    position: relative;
    justify-content: space-between; }
    .conditional-logic .cl-rules--rule-container input,
    .conditional-logic .cl-rules--rule-container select {
      height: 50px;
      background-color: transparent;
      border-color: #d8d8d8 !important; }
    .conditional-logic .cl-rules--rule-container > select {
      width: 23% !important; }
    .conditional-logic .cl-rules--rule-container .remove-rule {
      margin-top: 5px;
      position: absolute;
      right: -24px;
      top: 7px;
      width: 28px;
      height: 28px;
      border-radius: 14px;
      background-color: #fff;
      font-size: 14px;
      padding-top: 8px;
      box-sizing: border-box; }
  .conditional-logic .cl-rules--group-container {
    margin-bottom: 20px; }
  .conditional-logic .cl-rules--rule-property, .conditional-logic .cl-rules--rule-operator {
    flex-basis: calc(25% - 6px);
    width: calc(25% - 6px);
    flex-grow: 0;
    flex-shrink: 0; }
  .conditional-logic .cl-rules--inner-group-conditions-operator {
    flex-basis: calc(25% - 6px);
    width: calc(25% - 6px);
    height: 50px; }
  .conditional-logic .cl-rules--add-remove-rule-container {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0; }
  .conditional-logic .cl-rules--group-to-group-conditions-operator {
    margin: 0 auto;
    display: block;
    height: 50px;
    width: 100%;
    background-color: transparent;
    border-color: #d8d8d8 !important; }
  .conditional-logic .cl-rules--rule-input {
    max-width: 100%;
    box-sizing: border-box; }
  .conditional-logic .add-new-rule {
    background-color: #ec6142;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    border-radius: 10px;
    margin-top: 15px; }
    .conditional-logic .add-new-rule--wrapper {
      background-color: #f4f4f4;
      text-align: center;
      height: 50px;
      line-height: 50px;
      margin-top: 10px;
      cursor: pointer;
      border-radius: 5px; }

.forms-docs-link-icn--free {
  position: absolute;
  right: 30px;
  top: 20px;
  color: #000; }
  .forms-docs-link-icn--free:hover {
    color: #030303; }

.preview-tabs {
  margin-top: -50px;
  border-width: 0px;
  border-right-width: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important; }
  .preview-tabs--wrapper {
    margin-left: -36px !important;
    margin-right: -38px !important;
    padding: 0 !important;
    border-width: 0px !important;
    background-color: #f8f8f8 !important;
    border-top-left-radius: 8px !important;
    border-top-right-radius: 8px !important; }
    .preview-tabs--wrapper .form-design {
      width: 67%;
      position: relative; }
      .preview-tabs--wrapper .form-design .forms-docs-link-icn {
        position: absolute;
        right: 20px;
        width: auto; }
    .preview-tabs--wrapper .pick-template {
      width: 33%; }
    .preview-tabs--wrapper li {
      background: #f8f8f8 !important;
      border-width: 0px !important;
      font-family: NittiGroteskMedium;
      font-size: 18px !important;
      height: 95px;
      margin-right: 0px !important;
      margin-top: 0px !important;
      border-width: 0px;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px; }
      .preview-tabs--wrapper li.ui-tabs-active {
        margin-bottom: 0 !important; }
      .preview-tabs--wrapper li.ui-state-active {
        background: #fff !important;
        border-color: transparent !important; }
        .preview-tabs--wrapper li.ui-state-active a,
        .preview-tabs--wrapper li.ui-state-active span:before {
          color: #000 !important;
          border-width: 0 !important; }
      .preview-tabs--wrapper li a {
        color: #c6c6c6 !important;
        border-width: 0 !important;
        outline: 0;
        display: flex;
        align-items: center;
        height: 100%;
        box-sizing: border-box; }
        .preview-tabs--wrapper li a:focus {
          box-shadow: none; }
        .preview-tabs--wrapper li a span {
          margin-right: 10px; }
    .preview-tabs--wrapper a {
      outline: none;
      width: 100%; }
  .preview-tabs .ui-widget-header {
    background-color: transparent; }
  .preview-tabs #form-design {
    padding-left: 0px;
    padding-right: 0px; }
  .preview-tabs .pick-template--group-title {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 2px solid #2a2a2a;
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: NittiGroteskMedium;
    font-size: 22px;
    padding-bottom: 22px; }
    .preview-tabs .pick-template--group-title .icon-flo-ctrl {
      transform: rotateX(180deg); }
  .preview-tabs .pick-template--templates-preview {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    position: relative;
    max-width: 100%; }
    .preview-tabs .pick-template--templates-preview .saved-etmplates-title {
      width: 100%;
      text-align: center;
      font-family: NittiGroteskMedium;
      color: #555; }
    .preview-tabs .pick-template--templates-preview_element {
      width: calc(50% - 10px);
      flex-grow: 0;
      flex-shrink: 0;
      border: 1px solid #d8d8d8;
      border-radius: 5px;
      position: relative;
      margin-bottom: 20px;
      padding: 2px;
      padding: 20px 20px 0 20px;
      box-sizing: border-box; }
      .preview-tabs .pick-template--templates-preview_element-img {
        background-size: cover;
        border: 1px solid #d8d8d8;
        border-radius: 5px;
        width: 100%;
        padding-top: 100%;
        position: relative; }
      .preview-tabs .pick-template--templates-preview_element.predefined-template {
        padding-bottom: 20px; }
      .preview-tabs .pick-template--templates-preview_element.saved-template .template-title {
        color: #2a2a2a;
        font-family: NittiGroteskMedium;
        font-size: 18px;
        display: block;
        margin: 30px auto;
        text-align: center; }
      .preview-tabs .pick-template--templates-preview_element .remove-saved-templace {
        position: absolute;
        border: 1px solid #ababab;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        padding: 8px 7px 7px 7px;
        box-sizing: border-box;
        font-size: 14px;
        cursor: pointer;
        bottom: -15px;
        left: calc(50% - 10px);
        background-color: #fff;
        display: none; }
      .preview-tabs .pick-template--templates-preview_element .apply-template-btn {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, 0);
        background-color: #2a2a2a;
        color: #fff;
        border-radius: 6px;
        padding: 8px 16px;
        font-family: NittiGroteskMedium;
        font-size: 16px;
        min-width: 80px;
        max-width: 90%;
        cursor: pointer;
        display: none; }
      .preview-tabs .pick-template--templates-preview_element:hover {
        background-color: #f9f8f5;
        border-color: #f9f8f5; }
        .preview-tabs .pick-template--templates-preview_element:hover .remove-saved-templace,
        .preview-tabs .pick-template--templates-preview_element:hover .apply-template-btn {
          display: block; }

.flo-form-save-template {
  margin-left: 20px;
  background-color: #dedbd6;
  border-radius: 10px;
  width: calc(50% - 10px);
  padding: 30px;
  box-sizing: border-box;
  flex-grow: 0;
  flex-shrink: 0; }
  .flo-form-save-template .form-template-img {
    max-width: 150px;
    height: auto;
    margin-top: 10px; }
  .flo-form-save-template .hint {
    font-size: 10px;
    font-style: italic;
    color: #c6c6c6; }
  .flo-form-save-template .template-info {
    display: flex;
    flex-flow: wrap wrap;
    position: relative;
    padding-top: 25px; }
    .flo-form-save-template .template-info--image {
      width: 50%;
      flex-grow: 0;
      flex-shrink: 0; }
    .flo-form-save-template .template-info--title {
      flex-grow: 0;
      flex-shrink: 0;
      width: 100%; }
    .flo-form-save-template .template-info--wrapper {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      height: 50px; }
    .flo-form-save-template .template-info .form-template-name {
      height: 100%;
      border-radius: 5px;
      width: calc(100% - 85px);
      background-color: transparent;
      border: 1px solid #fff;
      font-family: NittiGroteskMedium;
      font-size: 14px; }
      .flo-form-save-template .template-info .form-template-name::placeholder {
        font-family: NittiGroteskSemiLight; }
    .flo-form-save-template .template-info .save-template-spinner {
      position: absolute;
      bottom: -20px;
      left: 42%; }
  .flo-form-save-template .form-template-messages-container {
    font-family: NittiGroteskMedium;
    font-size: 14px; }
  .flo-form-save-template .form-template-save {
    background-color: #ec6142;
    border-color: #ec6142;
    box-shadow: none;
    text-shadow: none;
    border-radius: 5px;
    margin-left: -7px;
    margin-top: 2px;
    width: 85px;
    height: calc(100% - 2px);
    font-family: NittiGroteskMedium;
    font-size: 16px; }
    .flo-form-save-template .form-template-save:hover {
      background: #ec6142;
      border-color: #ec6142; }
    .flo-form-save-template .form-template-save:focus {
      background-color: #ec6142;
      border-color: #ec6142;
      box-shadow: none; }

.form-styling {
  position: relative; }
  .form-styling.ui-tabs-active .icon-1:before {
    color: #ec6142; }
  .form-styling .icon-1 {
    display: block;
    font-size: 18px;
    margin-bottom: 5px; }
  .form-styling .forms-pro-label {
    position: absolute;
    top: 6px;
    right: 6px; }

.form-settings .settings-label--big,
.form-styling .settings-label--big {
  font-size: 18px; }

.form-settings--styling .flo-fancy-checkbox,
.form-styling--styling .flo-fancy-checkbox {
  margin-bottom: 30px; }

.form-settings--styling-colors,
.form-styling--styling-colors {
  margin-bottom: 30px; }

.form-settings .border-separator,
.form-styling .border-separator {
  padding-bottom: 30px;
  border-bottom: 1px solid #808080; }

.form-settings--custom-colors,
.form-styling--custom-colors {
  margin-top: 20px;
  font-size: 16px;
  padding: 10px 10px 10px 20px;
  border: 1px solid #e9e9e9;
  border-radius: 2px; }
  .form-settings--custom-colors .vc-chrome,
  .form-styling--custom-colors .vc-chrome {
    margin-left: auto;
    margin-right: 15px; }

.form-settings--styling-typography .custom-fonts-hint,
.form-styling--styling-typography .custom-fonts-hint {
  margin-bottom: 30px;
  background-color: #dedbd6;
  padding: 30px;
  text-align: center;
  border-radius: 6px; }
  .form-settings--styling-typography .custom-fonts-hint .content,
  .form-styling--styling-typography .custom-fonts-hint .content {
    max-width: 300px;
    display: block;
    margin: 0 auto; }
  .form-settings--styling-typography .custom-fonts-hint .icon-flo-ctrl,
  .form-styling--styling-typography .custom-fonts-hint .icon-flo-ctrl {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    transform: rotate(90deg);
    border: 1px solid #23282d;
    position: relative;
    display: block;
    margin: 0 auto 20px; }
    .form-settings--styling-typography .custom-fonts-hint .icon-flo-ctrl:before,
    .form-styling--styling-typography .custom-fonts-hint .icon-flo-ctrl:before {
      position: absolute;
      top: 11px;
      right: 10px; }

.form-settings .font-option--wrapper-border,
.form-styling .font-option--wrapper-border {
  border: 1px solid #dadada;
  border-radius: 4px;
  padding: 10px;
  position: relative; }

.form-settings .font-option .settings-label,
.form-styling .font-option .settings-label {
  margin-bottom: 8px; }

.form-settings .font-option--font-style input[type="checkbox"],
.form-styling .font-option--font-style input[type="checkbox"] {
  display: none; }

.form-settings .font-option--font-style .style-icon,
.form-styling .font-option--font-style .style-icon {
  padding: 3px 3px 2px; }

.form-settings .font-option--font-style .selected .style-icon,
.form-styling .font-option--font-style .selected .style-icon {
  background-color: #ec6142;
  color: #fff; }

.form-settings .font-option,
.form-settings .colapsable-option,
.form-styling .font-option,
.form-styling .colapsable-option {
  flex-flow: row wrap;
  border: 1px solid #dadada;
  border-radius: 4px;
  padding: 20px;
  position: relative; }
  .form-settings .font-option label,
  .form-settings .colapsable-option label,
  .form-styling .font-option label,
  .form-styling .colapsable-option label {
    width: 100px; }
  .form-settings .font-option .settings-label_140,
  .form-settings .colapsable-option .settings-label_140,
  .form-styling .font-option .settings-label_140,
  .form-styling .colapsable-option .settings-label_140 {
    width: 140px; }
  .form-settings .font-option select,
  .form-settings .colapsable-option select,
  .form-styling .font-option select,
  .form-styling .colapsable-option select {
    width: calc(100% - 120px); }
  .form-settings .font-option--outer-container:not(:last-child),
  .form-settings .colapsable-option--outer-container:not(:last-child),
  .form-styling .font-option--outer-container:not(:last-child),
  .form-styling .colapsable-option--outer-container:not(:last-child) {
    margin-bottom: 30px; }
  .form-settings .font-option--open-close,
  .form-settings .colapsable-option--open-close,
  .form-styling .font-option--open-close,
  .form-styling .colapsable-option--open-close {
    position: absolute;
    color: #ababab;
    right: 20px;
    top: 10px;
    font-family: dashicons;
    cursor: pointer; }
  .form-settings .font-option--wrapper,
  .form-settings .colapsable-option--wrapper,
  .form-styling .font-option--wrapper,
  .form-styling .colapsable-option--wrapper {
    display: none; }
  .form-settings .font-option.opened .font-option--wrapper,
  .form-settings .font-option.opened .colapsable-option--wrapper,
  .form-settings .colapsable-option.opened .font-option--wrapper,
  .form-settings .colapsable-option.opened .colapsable-option--wrapper,
  .form-styling .font-option.opened .font-option--wrapper,
  .form-styling .font-option.opened .colapsable-option--wrapper,
  .form-styling .colapsable-option.opened .font-option--wrapper,
  .form-styling .colapsable-option.opened .colapsable-option--wrapper {
    display: block; }
  .form-settings .font-option.opened .font-option--open-close,
  .form-settings .colapsable-option.opened .font-option--open-close,
  .form-styling .font-option.opened .font-option--open-close,
  .form-styling .colapsable-option.opened .font-option--open-close {
    transform: rotate(180deg); }
  .form-settings .font-option--property,
  .form-settings .colapsable-option--property,
  .form-styling .font-option--property,
  .form-styling .colapsable-option--property {
    display: flex;
    margin-top: 35px; }
    .form-settings .font-option--property .settings-label,
    .form-settings .colapsable-option--property .settings-label,
    .form-styling .font-option--property .settings-label,
    .form-styling .colapsable-option--property .settings-label {
      width: 100px; }
    .form-settings .font-option--property .vue-slider-wrapper,
    .form-settings .colapsable-option--property .vue-slider-wrapper,
    .form-styling .font-option--property .vue-slider-wrapper,
    .form-styling .colapsable-option--property .vue-slider-wrapper {
      width: calc(100% - 100px);
      display: flex;
      position: relative; }
      .form-settings .font-option--property .vue-slider-wrapper .vue-slider-component,
      .form-settings .colapsable-option--property .vue-slider-wrapper .vue-slider-component,
      .form-styling .font-option--property .vue-slider-wrapper .vue-slider-component,
      .form-styling .colapsable-option--property .vue-slider-wrapper .vue-slider-component {
        width: calc(100% - 30px) !important; }
        .form-settings .font-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-process,
        .form-settings .colapsable-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-process,
        .form-styling .font-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-process,
        .form-styling .colapsable-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-process {
          background-color: #2a2a2a; }
        .form-settings .font-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-tooltip,
        .form-settings .colapsable-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-tooltip,
        .form-styling .font-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-tooltip,
        .form-styling .colapsable-option--property .vue-slider-wrapper .vue-slider-component .vue-slider-tooltip {
          background-color: #ec6142;
          border-color: #ec6142; }
    .form-settings .font-option--property .unit,
    .form-settings .colapsable-option--property .unit,
    .form-styling .font-option--property .unit,
    .form-styling .colapsable-option--property .unit {
      width: 25px;
      text-align: right; }
  .form-settings .font-option--font-family,
  .form-settings .colapsable-option--font-family,
  .form-styling .font-option--font-family,
  .form-styling .colapsable-option--font-family {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 50px; }
    .form-settings .font-option--font-family .settings-label,
    .form-settings .colapsable-option--font-family .settings-label,
    .form-styling .font-option--font-family .settings-label,
    .form-styling .colapsable-option--font-family .settings-label {
      width: 100px; }
    .form-settings .font-option--font-family .dropdown-component-container,
    .form-settings .colapsable-option--font-family .dropdown-component-container,
    .form-styling .font-option--font-family .dropdown-component-container,
    .form-styling .colapsable-option--font-family .dropdown-component-container {
      width: calc(100% - 90px); }

.form-settings .font-option,
.form-styling .font-option {
  border-width: 0;
  padding: 0; }

.form-settings--styling-padding,
.form-styling--styling-padding {
  margin-bottom: 30px; }
  .form-settings--styling-padding_options,
  .form-styling--styling-padding_options {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap; }
    .form-settings--styling-padding_options input,
    .form-styling--styling-padding_options input {
      width: calc(100% - 20px);
      padding: 5px;
      border-radius: 5px;
      height: 45px; }
  .form-settings--styling-padding .padding-option,
  .form-styling--styling-padding .padding-option {
    width: calc(50% - 5px);
    flex-grow: 0;
    flex-shrink: 0;
    margin-bottom: 20px; }
    .form-settings--styling-padding .padding-option div,
    .form-styling--styling-padding .padding-option div {
      margin-bottom: 8px; }
  .form-settings--styling-padding .settings-label,
  .form-styling--styling-padding .settings-label {
    display: block;
    margin-bottom: 15px; }

.flo-form--custom-colors {
  /* Commented the inputs border color styles because of the issues with checkboxes and radio buttons */
  /* Especially when those are checked  - there is incompatibility with different browsers and themes */ }
  .flo-form--custom-colors label {
    color: var(--data-label-color); }
  .flo-form--custom-colors .form-group .hint {
    color: var(--data-hint-color); }
  .flo-form--custom-colors input:not([type="file"]),
  .flo-form--custom-colors textarea,
  .flo-form--custom-colors select {
    color: var(--data-input-color);
    background-color: var(--data-inputbg-color); }
  .flo-form--custom-colors input,
  .flo-form--custom-colors textarea,
  .flo-form--custom-colors select {
    border-color: var(--data-border-color); }
  .flo-form--custom-colors input[type="checkbox"]:before {
    color: var(--data-border-color); }
  .flo-form--custom-colors input[type="radio"]:before {
    background-color: var(--data-border-color); }
  .flo-form--custom-colors hr.flo-section-break {
    border-top-color: var(--data-border-color); }
  .flo-form--custom-colors ::placeholder {
    color: var(--data-placeholder-color); }

.flo-form--custom-fonts label {
  font-family: var(--data-label-font) !important;
  font-size: var(--data-label-font-size) !important;
  letter-spacing: var(--data-label-letter-spacing) !important;
  line-height: var(--data-label-line-height) !important;
  font-style: var(--data-label-italic);
  font-weight: var(--data-label-bold);
  text-decoration: var(--data-label-underline); }

.flo-form--custom-fonts .form-group .hint {
  font-family: var(--data-hint-font) !important;
  font-size: var(--data-hint-font-size) !important;
  letter-spacing: var(--data-hint-letter-spacing) !important;
  line-height: var(--data-hint-line-height) !important;
  font-style: var(--data-hint-italic);
  font-weight: var(--data-hint-bold);
  text-decoration: var(--data-hint-underline); }

.flo-form--custom-fonts input,
.flo-form--custom-fonts select,
.flo-form--custom-fonts textarea {
  font-family: var(--data-input-font) !important;
  font-size: var(--data-input-font-size) !important;
  letter-spacing: var(--data-input-letter-spacing) !important;
  line-height: var(--data-input-line-height) !important;
  font-style: var(--data-input-italic);
  font-weight: var(--data-input-bold);
  text-decoration: var(--data-input-underline); }
  .flo-form--custom-fonts input::placeholder,
  .flo-form--custom-fonts select::placeholder,
  .flo-form--custom-fonts textarea::placeholder {
    font-style: var(--data-input-italic);
    font-weight: var(--data-input-bold);
    text-decoration: var(--data-input-underline); }

.flo-form--custom-fonts .field-submit input {
  font-family: var(--data-button-font) !important;
  font-size: var(--data-button-font-size) !important;
  letter-spacing: var(--data-button-letter-spacing) !important;
  line-height: var(--data-button-line-height) !important;
  font-style: var(--data-button-italic);
  font-weight: var(--data-button-bold);
  text-decoration: var(--data-button-underline); }

.form-fonts-settings-row .title {
  margin-bottom: 30px; }

.form-fonts {
  /* Custom fonts: */ }
  .form-fonts--add-font {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 159.5px;
    background-color: #f8f8f8;
    border: 1px dashed #d8d8d8;
    border-radius: 12.5px;
    font-family: "MillerBannerLight", sans;
    font-weight: 300;
    font-size: 17.5px;
    letter-spacing: -0.02em;
    cursor: pointer;
    margin-top: 30px; }
    .form-fonts--add-font:hover .form-fonts--add-font_circle {
      background-color: transparent;
      border: 1px dashed #d8d8d8;
      color: #1c1c1c; }
  .form-fonts--add-font_circle {
    content: "+";
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    border-radius: 54px;
    background-color: #1c1c1c;
    border: 1px solid #1c1c1c;
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-bottom: 20px;
    transition: color 0.24s, background-color 0.24s, border 0.24s;
    transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95); }
  .form-fonts--google-font-picker {
    background-color: #f8f8f8;
    border: 1px solid #d8d8d8;
    border-radius: 12.5px;
    padding: 24px;
    padding-bottom: 40px;
    margin-top: 30px;
    display: flex;
    position: relative; }
    .form-fonts--google-font-picker .font-picker {
      min-width: 200px;
      margin-right: 30px;
      box-shadow: none; }
  .form-fonts--delete-g-font {
    cursor: pointer;
    position: absolute;
    right: 2px;
    top: 5px;
    font-size: 14px; }
  .form-fonts--custom-fonts-wrapper {
    border: 1px solid #eeedeb;
    margin-bottom: 15px;
    overflow: hidden;
    position: relative; }
  .form-fonts--custom-font {
    padding: 5px 20px 5px 25px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .form-fonts--custom-font:nth-child(odd) {
      background-color: #fff; }
    .form-fonts--custom-font:nth-child(even) {
      background-color: #f8f7f5; }
    .form-fonts--custom-font .form-fonts--custom-format-wrapper {
      display: flex;
      flex-direction: column; }
    .form-fonts--custom-font .form-fonts--custom-format {
      width: 60px;
      text-align: right; }
      .form-fonts--custom-font .form-fonts--custom-format span {
        text-transform: uppercase;
        font-size: 9px;
        letter-spacing: 1.3px; }
      .form-fonts--custom-font .form-fonts--custom-format .form-fonts--custom-delete-font {
        font-size: 10px;
        border: 1px solid;
        border-radius: 10px;
        width: 10px;
        height: 10px;
        cursor: pointer;
        color: #000;
        margin-top: 4px;
        margin-left: 8px; }
  .form-fonts--custom-add-font {
    display: inline;
    font-size: 10px;
    border: 1px solid #ebebeb;
    padding: 8px 15px;
    height: 32px;
    border-radius: 20px;
    cursor: pointer;
    font-family: "Open Sans", sans-serif; }

.floform-settings--import_export {
  margin-top: 80px;
  justify-content: space-between;
  position: relative;
  display: flex; }
  .floform-settings--import_export .spinner-import {
    float: none;
    position: absolute;
    left: 45%; }
  .floform-settings--import_export .import-msg {
    position: absolute;
    bottom: -30px; }
  .floform-settings--import_export .import-export-title {
    font-family: NittiGroteskMedium;
    font-size: 18px;
    margin-bottom: 10px; }
  .floform-settings--import_export .import-export-description {
    margin-bottom: 10px; }
  .floform-settings--import_export .import-export-btn {
    cursor: pointer;
    height: 50px;
    padding: 0 30px;
    border-radius: 6px; }

.floform-settings--import {
  background-color: #d2d9df;
  width: calc(50% - 15px);
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px;
  position: relative; }
  .floform-settings--import #settings-file {
    display: none; }
  .floform-settings--import .flo-forms-import-settings-file + label {
    font-size: 1.25em;
    font-weight: 700;
    color: #2a2a2a;
    background-color: transparent;
    display: inline-block;
    border: 1px solid #fff;
    border-radius: 6px;
    padding: 15px 50px;
    box-sizing: border-box;
    width: 100%;
    margin-top: 1.2em;
    text-align: center; }

.floform-settings--export {
  background-color: #dedbd6;
  width: calc(50% - 15px);
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px; }
  .floform-settings--export .import-export-btn {
    width: 100%; }

.floform-settings--open-close {
  margin-top: 30px;
  cursor: pointer; }
  .floform-settings--open-close .dashicons-minus {
    display: none; }
  .floform-settings--open-close.opened .dashicons-minus {
    display: inline-block; }
  .floform-settings--open-close.opened .dashicons-plus {
    display: none; }

.new-form-options .option {
  margin: 30px 30px 20px 30px;
  border-radius: 8px;
  padding: 30px 30px 0 0;
  cursor: pointer; }

.new-form-options--scratch {
  background-color: #dedbd6; }
  .new-form-options--scratch .icon-flo-ctrl {
    background-color: #ec6142;
    color: #fff; }

.new-form-options--predefined {
  background-color: #f9f8f5; }
  .new-form-options--predefined .icon-flo-ctrl {
    border: 1px solid #23282d; }

.new-form-options--title-block {
  display: flex;
  justify-content: space-between;
  font-family: NittiGroteskMedium;
  font-size: 22px;
  line-height: 1.2em;
  margin-bottom: 30px;
  margin-left: 30px; }

.new-form-options img {
  max-width: 100%;
  margin-bottom: -4px; }

.new-form-options .icon-flo-ctrl {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  transform: rotate(90deg); }
  .new-form-options .icon-flo-ctrl:before {
    position: absolute;
    top: 9px;
    right: 7px; }

.start-how-to-tabs {
  border-width: 0 !important; }
  .start-how-to-tabs--content {
    margin-bottom: 40px; }
    .start-how-to-tabs--content .title {
      font-family: MillerBannerLight;
      font-size: 36px;
      line-height: 1.2;
      margin-bottom: 30px;
      text-align: center; }
    .start-how-to-tabs--content .text {
      font-family: sans-serif;
      font-size: 14px;
      margin-bottom: 35px;
      color: #2a2a2a;
      font-weight: 100; }
  .start-how-to-tabs > div {
    padding: 0 !important; }
  .start-how-to-tabs .how-to-tabs--wrapper {
    background: transparent;
    border-width: 0px;
    border-bottom: 1px solid #e9e9e9;
    padding-left: 2em !important; }
    .start-how-to-tabs .how-to-tabs--wrapper .ui-state-default {
      border-width: 0px;
      background-color: transparent; }
      .start-how-to-tabs .how-to-tabs--wrapper .ui-state-default a {
        color: #d4d4d4; }
    .start-how-to-tabs .how-to-tabs--wrapper .ui-state-active {
      border-width: 0px;
      border-bottom: 3px solid #ec6142;
      background-color: transparent; }
      .start-how-to-tabs .how-to-tabs--wrapper .ui-state-active a {
        color: #2a2a2a; }

.dropdown-component-container label {
  width: 100% !important; }

.dropdown-component-container .select--option {
  margin-bottom: 0; }

.ff-premium-feat-box--popup-overlay {
  display: flex;
  visibility: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.5s;
  visibility: hidden;
  opacity: 0;
  z-index: 3; }
  .ff-premium-feat-box--popup-overlay.popup-opened {
    visibility: visible;
    opacity: 1; }

.ff-premium-feat-box--content {
  display: flex;
  margin: auto;
  background: #fff;
  border-radius: 5px;
  width: 50vw;
  z-index: 999;
  overflow-y: hidden;
  position: relative;
  box-sizing: border-box;
  text-align: left;
  background-color: #fffcf8; }
  .ff-premium-feat-box--content .forms-pro-label {
    padding: 2px 5px; }
  .ff-premium-feat-box--content-left-side {
    width: 60%;
    background-color: #c1b5ab;
    padding: 40px;
    padding-top: 100px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden; }
    .ff-premium-feat-box--content-left-side--side {
      width: 300px;
      margin-left: 40px;
      margin-top: 30px;
      position: relative;
      padding-top: 140px;
      border-radius: 8px; }
      .ff-premium-feat-box--content-left-side--side .forms-pro-label {
        font-family: NittiGroteskMedium;
        padding: 3px 5px; }
      .ff-premium-feat-box--content-left-side--side .ff-premium-feat-box--bgimg {
        right: 0;
        background-repeat: no-repeat;
        background-size: auto; }
      .ff-premium-feat-box--content-left-side--side .ff-premium-feat-box--title {
        font-size: 30px;
        margin-bottom: 25px; }
      .ff-premium-feat-box--content-left-side--side .ff-premium-feat-box--text {
        font-family: NittiGroteskSemiLight;
        font-size: 12px;
        color: #686868;
        position: relative;
        margin-bottom: 50px; }
  .ff-premium-feat-box--content-right-side {
    width: 40%;
    padding: 40px 30px;
    box-sizing: border-box; }

.ff-premium-feat-box--close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  user-select: none; }

.ff-premium-feat-box--title {
  font-family: MillerBannerLight;
  font-size: 40px;
  line-height: 1.1;
  color: #2a2a2a;
  margin-top: 10px;
  z-index: 1; }

.ff-premium-feat-box--fatures-list-title {
  font-family: MillerBannerLight;
  font-size: 16px;
  line-height: 1.2;
  text-align: center; }

.ff-premium-feat-box--button {
  background-color: #2a2a2a;
  font-family: NittiGroteskMedium;
  font-size: 10px;
  padding: 10px 30px;
  border-radius: 20px;
  margin: 30px auto 0;
  display: block;
  width: 100px;
  text-align: center;
  color: #fff;
  text-decoration: none; }
  .ff-premium-feat-box--button:hover {
    color: #fff;
    background-color: #4a4a4a; }

.ff-premium-feat-box--features-list {
  font-family: NittiGroteskMedium;
  font-size: 11px;
  margin-left: 10px; }
  .ff-premium-feat-box--features-list li {
    display: flex; }
    .ff-premium-feat-box--features-list li:before {
      content: "\f147";
      font-family: dashicons;
      color: #c1b5ab;
      font-size: 14px;
      margin-right: 5px; }

.ff-premium-feat-box--bgtext {
  position: absolute;
  bottom: 30px; }

.ff-premium-feat-box--bgimg {
  background-image: url(../images/ff-pro-bg-popup.png);
  z-index: 0;
  width: 90%;
  height: 50%;
  position: absolute;
  right: -70px;
  top: 0; }

.flo-hotmail-warning {
  color: red;
  font-size: 20px;
  margin-bottom: 40px; }

.fr-popup .fr-link-insert-layer input[type="text"] {
  border-radius: 0 !important; }

.fr-popup .fr-link-insert-layer .fr-input-line label {
  width: auto;
  color: inherit;
  left: 15px;
  padding: 0 3px; }

.fr-popup .fr-checkbox-line {
  display: flex;
  align-items: center; }

.fr-box .second-toolbar {
  display: none; }