/* JotForm  Styles */

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

  For production uses, add the following:
  @import url('https://homes.rewiringamerica.org/styles/css/jotform.css');
 */

/* Import variables */
@import url('_variables.css');

/* Import custom fonts */

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: block;
  font-weight: 400;
}

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Regular-Italic.woff2')
    format('woff2');
  font-style: italic;
  font-display: block;
  font-weight: 400;
}

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Medium.woff2') format('woff2');
  font-style: normal;
  font-display: block;
  font-weight: 500;
}

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Medium-Italic.woff2')
    format('woff2');
  font-style: italic;
  font-display: block;
  font-weight: 500;
}

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Bold.woff2') format('woff2');
  font-style: normal;
  font-display: block;
  font-weight: 700;
}

@font-face {
  font-family: 'GT America';
  src: url('../../fonts/GT-America-Standard-Bold-Italic.woff2') format('woff2');
  font-style: italic;
  font-display: block;
  font-weight: 700;
}

@font-face {
  font-family: 'GT America Condensed';
  src: url('../../fonts/GT-America-Condensed-Bold.woff2') format('woff2');
  font-style: normal;
  font-display: block;
  font-weight: 700;
}

@font-face {
  font-family: 'GT America Condensed';
  src: url('../../fonts/GT-America-Condensed-Bold-Italic.woff2') format('woff2');
  font-style: italic;
  font-display: block;
  font-weight: 700;
}

@font-face {
  font-family: 'GT America Mono';
  src: url('../../fonts/GT-America-Mono-Regular.woff2') format('woff2');
  font-style: normal;
  font-display: block;
  font-weight: 400;
}

@font-face {
  font-family: 'GT America Mono';
  src: url('../../fonts/GT-America-Mono-Medium.woff2') format('woff2');
  font-style: normal;
  font-display: block;
  font-weight: 500;
}

@font-face {
  font-family: 'GT America Mono';
  src: url('../../fonts/GT-America-Mono-Bold.woff2') format('woff2');
  font-style: normal;
  font-display: block;
  font-weight: 700;
}

/* Define variables */
:root {
  /* Jotform specific variables */
  --jf-page-background: #e8faf8;
  --jf-form-background: #fff;
  --jf-font-family: var(--typography-paragraph-1-font-family), arial, sans-serif;
  --jf-font-family-btn: var(--typography-paragraph-1-font-family), arial,
    sans-serif;
  --jf-font-size: var(--typography-paragraph-1-font-size), 18px;
  --jf-font-color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
  --jf-form-shadow: none;

  /* buttons */
  --jf-button-background-color: rgb(var(--color-action-primary));
  --jf-button-color: white;
  --jf-button-text-transform: none;
  --jf-button-font-size: 16px;
  --jf-button-font-weight: 700;
  --jf-button-border-color: #222;
  --jf-button-border-radius: 4px;
  --jf-button-border-width: 2px;
  --jf-button-color-hover: #fff;
  --jf-button-letter-spacing: 1px;
  /* normally we use complicated tailwind gradients, just using a simpler approach here */
  --jf-button-hover-background-color: #31128e;
  --jf-button-hover-color: #fff;
  --jf-button-hover-border-color: #222;
  --jf-button-active-background-color: rgb(var(--color-action-primary));
  --jf-button-active-color: #fff;
  --jf-button-active-border-color: #222;
  --jf-button-focus-background-color: rgb(var(--color-action-primary));
  --jf-button-focus-color: #fff;
  --jf-button-focus-border-color: #222;

  /* inputs */
  --jf-input-background: var(--jf-form-background);
  --jf-input-border: rgb(var(--grey-200));
  --jf-input-border-radius: 4px;
  --jf-input-border-width: 1px;
  --jf-input-hover-border-color: rgb(var(--grey-600));
  --jf-input-hover-border-width: 0px;
  --jf-input-hover-outline-color: rgb(var(--grey-600));
  --jf-input-hover-outline-offset: -1px;
  --jf-input-hover-outline-style: solid;
  --jf-input-hover-outline-width: 1px;
  --jf-input-hover-box-shadow: none;
  --jf-input-focus-outline-color: rgb(var(--purple-500));
  --jf-input-focus-outline-offset: 0;
  --jf-input-focus-outline-style: solid;
  --jf-input-focus-outline-width: 2px;
  --jf-input-focus-box-shadow: none;
  --jf-input-focus-border-width: 0px;
  --jf-input-color: #222;
  --jf-label-color: #222;
  --jf-error-background: #fff;
  --jf-error-border: #ed2024;
  --jf-error-text: #ed2024;
  --jf-active-background: #fff;
  --jf-form-footer-border: none;
}

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

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

/* Hide header */
/* since this is sometimes used a non-embed, do this in style editor */
/* .form-header-group {
  display: none;
} */

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

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

.form-textbox:hover,
.form-textarea:hover,
.form-dropdown:hover,
.form-radio-other-input:hover,
.form-checkbox-other-input:hover,
.form-captcha input:hover,
.form-spinner input:hover {
  border-color: var(--jf-input-hover-border-color) !important;
  border-width: var(--jf-input-hover-border-width) !important;
  box-shadow: var(--jf-input-hover-box-shadow) !important;
  outline-color: var(--jf-input-hover-outline-color) !important;
  outline-style: var(--jf-input-hover-outline-style) !important;
  outline-width: var(--jf-input-hover-outline-width) !important;
  outline-offset: var(--jf-input-hover-outline-offset) !important;
}

.form-textbox:focus,
.form-textarea:focus,
.form-dropdown:focus,
.form-radio-other-input:focus,
.form-checkbox-other-input:focus,
.form-captcha input:focus,
.form-spinner input:focus {
  outline-color: var(--jf-input-focus-outline-color) !important;
  outline-style: var(--jf-input-focus-outline-style) !important;
  outline-width: var(--jf-input-focus-outline-width) !important;
  outline-offset: var(--jf-input-focus-outline-offset) !important;
  border-width: var(--jf-input-focus-border-width) !important;
  box-shadow: var(--jf-input-focus-box-shadow) !important;
}

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

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

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

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

.form-submit-button {
  border-width: var(--jf-button-border-width) !important;
  border-color: var(--jf-button-border-color) !important;
  background-color: var(--jf-button-background-color) !important;
  border-radius: var(--jf-button-border-radius) !important;
  color: var(--jf-button-color) !important;
  font-family: var(--jf-font-family-btn) !important;
  font-size: var(--jf-button-font-size) !important;
  font-weight: var(--jf-button-font-weight) !important;
  letter-spacing: var(--jf-button-letter-spacing) !important;
  text-transform: var(--jf-button-text-transform) !important;
}

.form-submit-button:hover {
  border-color: var(--jf-button-hover-border-color) !important;
  background-color: var(--jf-button-hover-background-color) !important;
  color: var(--jf-button-hover-color) !important;
}

.form-submit-button:active {
  border-color: var(--jf-button-active-border-color) !important;
  background-color: var(--jf-button-active-background-color) !important;
  color: var(--jf-button-active-color) !important;
}

.form-submit-button:focus {
  border-width: var(--jf-button-focus-border-width) !important;
  border-color: var(--jf-button-focus-border-color) !important;
  background-color: var(--jf-button-focus-background-color) !important;
  color: var(--jf-button-focus-color) !important;
}

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

/* Captcha doesn't need required indicator */
[data-type='control_captcha'] .form-required {
  display: none;
}