/* =========================================================
   Network Forms
   Shared Jotform styling for Trans Surgery network sites
   ========================================================= */


/* =========================================================
   1. Design tokens
   ========================================================= */

:root {
  --form-bg: #ffffff;
  /*--form-soft: #f8fafc;
  --form-header-bg: #e4edf4;*/
  --form-border: #d5e0e8;
  --form-border-soft: #dce4ea;
  --form-border-strong: #b9c9d6;
  --form-text: #34495a;
  --form-muted: #5f7384;
  --form-muted-light: #6f8291;
  --form-heading: #163b5c;
  --form-link: #186db6;
  --form-link-hover: #155a96;
  --form-error: #b42318;
}


/* =========================================================
   2. Page / iframe reset
   ========================================================= */

html.supernova,
html.supernova body {
  min-height: 100% !important;
  overflow: visible !important;
  background: transparent !important;
}


/* =========================================================
   3. Form shell
   ========================================================= */

.form-all {
  max-width: 100% !important;
  margin: 0 auto 40px !important;

  background: var(--form-bg) !important;
  border: 1px solid var(--form-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(22, 59, 92, 0.035) !important;
  overflow: hidden !important;

  color: var(--form-text);
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
  font-size: 15px !important;
}

.form-all ul.form-section {
  padding: 0 28px 30px !important;
}


/* =========================================================
   4. Header and intro
   ========================================================= */

.form-header-group {
  margin: 0 -28px 18px !important;
  padding: 22px 28px 20px !important;

  background-color: #dbe7f0 !important;
  background-image: none !important;
  border-bottom: 1px solid #d3dee7 !important;

  text-align: center !important;
}

.form-header {
  margin: 0 !important;

  color: var(--form-heading) !important;
  font-family: "Frutiger", "Frutiger LT Std", "Frutiger Next", Arial, sans-serif !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.015em;
}

/* Intro text directly below header */
#id_14 {
  margin-top: -4px !important;
  margin-bottom: 22px !important;
}

#id_14 .form-html {
  max-width: 360px !important;
  margin: 0 auto;

  color: var(--form-text) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  text-align: center;
}

#id_14 .form-html strong {
  display: none;
}


/* =========================================================
   5. Typography
   ========================================================= */

.form-html {
  color: var(--form-text) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.form-html p {
  margin: 0 !important;
}

.form-label {
  margin-bottom: 6px !important;

  color: var(--form-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.form-required {
  margin-left: 3px;
  color: var(--form-error) !important;
}

.form-sub-label,
.form-textarea-limit-indicator {
  margin-top: 5px !important;

  color: var(--form-muted-light) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}


/* =========================================================
   6. Layout rhythm
   ========================================================= */

.form-line {
  margin: 9px 0 !important;
  padding: 0 !important;
}

.form-line.form-line-active {
  background: transparent !important;
}


/* =========================================================
   7. Inputs
   ========================================================= */

.form-textbox,
.form-dropdown,
.form-textarea {
  width: 100% !important;
  max-width: 100% !important;

  background: #ffffff !important;
  border: 1px solid var(--form-border-strong) !important;
  border-radius: 4px !important;
  box-shadow: none !important;

  color: var(--form-text) !important;
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
  font-size: 15px !important;
}

.form-textbox,
.form-dropdown {
  height: 38px !important;
  padding: 8px 10px !important;
}

.form-textarea {
  height: 64px !important;   
  min-height: 64px !important;
  padding: 10px !important;
  line-height: 1.5 !important;
}

#input_10,
textarea#input_10.form-textarea {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
}

#id_10 .form-textarea-limit,
#id_10 .form-textarea-limit > span {
  height: auto !important;
  min-height: 0 !important;
}

.form-textbox:focus,
.form-dropdown:focus,
.form-textarea:focus {
  border-color: var(--form-link) !important;
  box-shadow: 0 0 0 3px rgba(24, 109, 182, 0.14) !important;
  outline: none !important;
}


/* =========================================================
   8. Checkboxes and radio buttons
   ========================================================= */

.form-checkbox-item,
.form-radio-item {
  margin: 4px 0 !important;

  color: var(--form-text) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.form-checkbox-item label,
.form-radio-item label {
  line-height: 1.35 !important;
}

.form-checkbox,
.form-radio {
  border-color: var(--form-border-strong) !important;
}

.form-line .form-checkbox:checked + label:before,
.form-line .form-checkbox:checked + span:before {
  background-color: var(--form-link) !important;
  border-color: var(--form-link) !important;
}


/* =========================================================
   9. hCaptcha
   ========================================================= */

[data-type="control_captcha"] .h-captcha {
  transform: scale(0.92);
  transform-origin: left top;
  margin-bottom: -4px;
}

[data-type="control_captcha"] .form-input-wide {
  min-height: 72px;
}


/* =========================================================
   10. Privacy / disclosure note
   ========================================================= */

#id_11 {
  margin-top: 14px !important;
  margin-bottom: 16px !important;
}

#id_11 .form-html {
  color: var(--form-muted) !important;
  font-size: 12px !important;
  line-height: 1.48 !important;
}

#id_11 a {
  color: var(--form-link) !important;
}


/* =========================================================
   11. Errors
   ========================================================= */

.form-line.form-line-error {
  background: #fff5f5 !important;
  border-radius: 4px;
  padding: 10px !important;
}

.form-error-message {
  background: var(--form-error) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}


/* =========================================================
   12. Submit area
   ========================================================= */

.form-buttons-wrapper {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: 0 !important;
}

li[data-type="control_button"] {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.submit-button,
.form-submit-button {
  width: 100% !important;
  max-width: 300px;
  min-width: 180px !important;
  height: auto !important;

  padding: 13px 24px !important;

  background: var(--form-link) !important;
  border: 1px solid var(--form-link) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-shadow: none !important;

  color: #ffffff !important;
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

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


/* =========================================================
   13. Responsive
   ========================================================= */

@media (max-width: 480px) {
  .form-all ul.form-section {
    padding: 0 20px 30px !important;
  }

  .form-header-group {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 20px 20px 18px !important;
  }

  .form-header {
    font-size: 23px !important;
  }

  #id_14 .form-html {
    max-width: 280px !important;
  }
}