/* JotForm  Styles */

/*
  When developing in Jotform, use the following form which points to localhost:3000 for styling
  @import url('http://localhost:3000/styles/jotform.css');

  For production uses, add the following:
  @import url('https://www.fwd.us/styles/jotform.css');

  We have a development form pre-configured to serve as a test case for this here:
  * link to WordPress: https://wp.fwd.us/wp-admin/post.php?post=36619&action=edit
  * link to Jotform: https://www.jotform.com/build/240453932864158
 */

/* Import custom fonts */

/* Fakt (sans) */

@font-face {
  font-family: Fakt;
  font-weight: 400;
  src: url('/fonts/fakt/fp-normal.woff2') format('woff2'),
    url('/fonts/fakt/fp-normal.woff') format('woff');
}

@font-face {
  font-family: Fakt;
  font-weight: 500;
  src: url('/fonts/fakt/fp-medium.woff2') format('woff2'),
    url('/fonts/fakt/fp-medium.woff') format('woff');
}

@font-face {
  font-family: Fakt;
  font-weight: 700;
  src: url('/fonts/fakt/fp-bold.woff2') format('woff2'),
    url('/fonts/fakt/fp-bold.woff') format('woff');
}

@font-face {
  font-family: Fakt;
  font-weight: 900;
  src: url('/fonts/fakt/fp-black.woff2') format('woff2'),
    url('/fonts/fakt/fp-black.woff') format('woff');
}

/* Noe (serif) */

@font-face {
  font-family: Noe;
  font-weight: 400;
  src: url('/fonts/noe/noe-regular.woff2') format('woff2'),
    url('/fonts/noe/noe-regular.woff') format('woff');
}

@font-face {
  font-family: Noe;
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/noe/noe-regular-italic.woff2') format('woff2'),
    url('/fonts/noe/noe-regular-italic.woff') format('woff');
}

@font-face {
  font-family: Noe;
  font-weight: 500;
  src: url('/fonts/noe/noe-medium.woff2') format('woff2'),
    url('/fonts/noe/noe-medium.woff') format('woff');
}

@font-face {
  font-family: Noe;
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/noe/noe-medium-italic.woff2') format('woff2'),
    url('/fonts/noe/noe-medium-italic.woff') format('woff');
}

@font-face {
  font-family: Noe;
  font-weight: 700;
  src: url('/fonts/noe/noe-bold.woff2') format('woff2'),
    url('/fonts/noe/noe-bold.woff') format('woff');
}

@font-face {
  font-family: Noe;
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/noe/noe-bold-italic.woff2') format('woff2'),
    url('/fonts/noe/noe-bold-italic.woff') format('woff');
}

@font-face {
  font-family: Noe;
  font-weight: 900;
  src: url('/fonts/noe/noe-black.woff2') format('woff2'),
    url('/fonts/noe/noe-black.woff') format('woff');
}

@font-face {
  font-family: Noe;
  font-style: italic;
  font-weight: 900;
  src: url('/fonts/noe/noe-black-italic.woff2') format('woff2'),
    url('/fonts/noe/noe-black-italic.woff') format('woff');
}

/* Define variables */
:root {
  /* Bootstrap variables */
  --bs-purple: #aa44f5;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fe5f3a;
  --bs-yellow: #ffcd20;
  --bs-green: #20e1a3;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #fe5f3a;
  --bs-secondary: #00dcd5;
  --bs-aqua: #00dcd5;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #24242c;
  --bs-blue: #028dff;
  --bs-dark-gray: #222;
  --bs-light-gray: #ccc;
  --bs-lightest-gray: #f7f7f7;
  --bs-primary-rgb: 254, 95, 58;
  --bs-secondary-rgb: 0, 220, 213;
  --bs-aqua-rgb: 0, 220, 213;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 36, 36, 44;
  --bs-blue-rgb: 2, 141, 255;
  --bs-green-rgb: 32, 225, 163;
  --bs-orange-rgb: 254, 95, 58;
  --bs-purple-rgb: 170, 68, 245;
  --bs-yellow-rgb: 255, 205, 32;
  --bs-gray-rgb: 127, 127, 127;
  --bs-dark-gray-rgb: 34, 34, 34;
  --bs-light-gray-rgb: 204, 204, 204;
  --bs-lightest-gray-rgb: 247, 247, 247;
  --bs-black-rgb: 0, 0, 0;
  --bs-white-rgb: 255, 255, 255;
  --bs-body-color-rgb: 68, 68, 68;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-font-sans-serif: 'Fakt', arial, sans-serif;
  --bs-font-monospace: sfmono-regular, menlo, monaco, consolas,
    'Liberation Mono', 'Courier New', monospace;
  --bs-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 15%),
    rgba(255, 255, 255, 0%)
  );
  --bs-body-font-family: fakt, arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #444;
  --bs-body-bg: #fff;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 17.5%);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;
  --bs-link-color: #028dff;
  --bs-link-hover-color: #0271cc;
  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff5d2;

  /*

    height: auto;
  padding-top: calc(#{$btn-padding-top} - 2px);
  padding-right: $btn-padding-side;
  padding-bottom: calc(#{$btn-padding-bottom} - 2px);
  padding-left: $btn-padding-side;
  border-radius: 0;
  font-family: $font-family-sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1;

    input.form-control,
  textarea.form-control,
  select.form-control {
    background-color: $lightest-gray;
  }

  --bs-gray-200-hex: #ced4da;

  */

  /* Jotform specific variables */
  --page-background: var(--bs-body-bg);
  --form-background: var(--bs-body-bg);
  --font-family: var(--bs-font-sans-serif, 'sans-serif');
  --font-family-btn: var(--bs-font-sans-serif, 'sans-serif');
  --font-size: 18px;
  --font-color: #000;
  --form-shadow: none;

  /* buttons */
  --button-background: var(--bs-primary);
  --button-background-hover: var(--bs-secondary);
  --button-color: #fff;
  --button-text-transform: uppercase;
  --button-font-size: 0.9rem;
  --button-font-weight: normal;
  --button-border-radius: 0;

  /* inputs */
  --input-background: var(--bs-lightest-gray);
  --input-border: var(--bs-gray-400);
  --input-border-radius: 0;
  --input-color: #000;
  --label-color: var(--bs-body-color);
  --error-background: #fff;
  --error-border: #ed2024;
  --error-text: #ed2024;
  --active-background: #fff;
  --form-footer-border: none;
}

/* Supernova is the default theme */
.supernova,
.supernova body {
  padding: 0 !important;
  margin: 0 !important;
  background: var(--page-background) !important;
}

.form-all {
  margin-top: 0 !important;
  background-color: var(--form-background);
  box-shadow: var(--form-shadow);
  color: var(--font-color) !important;
  font-family: var(--font-family) !important;
}

/* Hide header */
.form-header-group {
  display: none;
}

.form-label-top,
.form-label-left,
.form-label-right {
  color: var(--label-color);
}

.form-textbox,
.form-textarea,
.form-dropdown,
.form-radio-other-input,
.form-checkbox-other-input,
.form-captcha input,
.form-spinner input {
  border-color: var(--input-border) !important;
  border-radius: var(--input-border-radius) !important;
  background-color: var(--input-background) !important;
  color: var(--input-color) !important;
}

.form-line-active {
  background-color: var(--active-background);
}

.form-line-error {
  background-color: var(--error-background);
}

.form-line-error input:not(#coupon-input),
.form-line-error textarea,
.form-line-error .form-validation-error {
  border-color: var(--error-border);
  color: var(--error-text);
}

.form-buttons-wrapper {
  border: var(--form-footer-border);
}

.form-submit-button {
  border-color: var(--button-background);
  border-radius: var(--button-border-radius);
  background-color: var(--button-background);
  color: var(--button-color);
  font-family: var(--font-family-btn);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-transform: var(--button-text-transform);
}

.form-submit-button:hover,
.form-submit-button:focus {
  border-color: var(--button-background-hover);
  background-color: var(--button-background-hover);
}

/* Error and hovers */
.error-navigation-container {
  display: none;
}