/*------------------------------------*\
  #BASE-FORM-STYLES
\*------------------------------------*/

/**
 * Just in case this is not already set on the page
 */

.mktoForm *,
.mktoForm *::before,
.mktoForm *::after {
  box-sizing: border-box;
}

.mktoForm,
.mktoModal {
  --color-surface: #f1f1f1;
  --color-error: #da4040;
  --color-primary: #998242;
  --color-primary-active: #393939;
  --color-text-on-primary: #ffffff;
  --color-border-regular-contrast: #bfbfbf;
  --color-border-highest-contrast: #393939;
  --color-text-highest-contrast: #393939;
  --color-text-lowest-contrast: #747474;
}

/**
 * 1. Set all relevant form elements to have 100% width (overwrite inline
 *    styles that Marketo uses for various elements)
 */

.mktoForm,
.mktoForm .mktoField,
.mktoForm .mktoLabel,
.mktoForm .mktoHtmlText,
.mktoForm .mktoFormCol,
.mktoForm .mktoFieldWrap,
.mktoForm .mktoCheckboxList,
.mktoForm .mktoRadioList,
.mktoForm .mktoRangeField,
.mktoForm .mktoSliderWrap {
  width: 100% !important; /* [1] */
}

.mktoForm,
.mktoForm legend,
.mktoForm .mktoField,
.mktoForm .mktoButton,
.mktoForm .mktoLabel,
.mktoForm .mktoHtmlText,
.mktoForm .mktoFormCol,
.mktoForm .mktoFieldWrap,
.mktoForm .mktoCheckboxList,
.mktoForm .mktoRadioList,
.mktoForm .mktoRangeField {
  font-family: "Libre Franklin", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--color-text-highest-contrast);
}

.mktoForm .mktoClear,
.mktoForm .mktoPlaceholder {
  display: none;
}

/**
 * 1. Hide default gutter and offset elements in Marketo Forms
 */

.mktoForm .mktoOffset,
.mktoForm .mktoGutter,
.mktoForm .mktoIsHidden {
  display: none !important; /* [1] */
}

/*------------------------------------*\
  #SPACING
\*------------------------------------*/

.mktoForm .mktoFormCol,
.mktoForm .mktoTemplateBox {
  margin-bottom: 0.75rem;
}

@media (min-width: 48rem) {
  .mktoForm .mktoFormRow {
    display: flex;
    gap: 0.75rem;
  }

  .mktoForm .mktoFormCol {
    min-width: 0;
  }
}

/*------------------------------------*\
  #INSTRUCTION
\*------------------------------------*/

.mktoForm .mktoInstruction {
  display: block;
  margin-top: 0.25rem;
}

/*------------------------------------*\
  #RANGE
\*------------------------------------*/

.mktoRangeField {
  position: relative;
}

.mktoRangeValue {
  position: absolute;
  right: 0;
  bottom: -1.5rem;
  margin-left: auto !important;
  margin-right: auto !important;
}

/*------------------------------------*\
  #FIELDSET
\*------------------------------------*/

.mktoForm:not([data-multi-step-crt]) fieldset.mktoFormCol {
  padding-right: 1rem;
  padding-left: 1rem;
  border: 1px solid var(--color-border-lowest-contrast);
}

/*------------------------------------*\
  #ERROR
\*------------------------------------*/

/**
 * 1. 10px spacing due to `line-height`
 */

.mktoForm .mktoError {
  margin-top: 0.25rem; /* [1] */
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-error);
}

.mktoForm .mktoField.mktoValid ~ .mktoError {
  position: absolute !important;
  top: -100vw !important;
  left: -100vw !important;
  display: none !important;
}

/*------------------------------------*\
  #LABEL
\*------------------------------------*/

.mktoForm .mktoLabel {
  display: inline-block;
  width: auto !important;
  padding: 0 0 0.3125rem;
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  color: var(--color-text-regular-contrast);
}

.mktoForm .mktoLabel:empty {
  display: none !important;
}

/*------------------------------------*\
  #FIELD
\*------------------------------------*/

.mktoForm .mktoField {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem calc(0.75rem - 2px);
  background-color: var(--color-surface);
  color: var(--color-text-lowest-contrast);
  border: 0;
  border-bottom: 2px solid var(--color-surface);
  border-radius: 0;
}

.mktoForm .mktoField:focus {
  border-color: var(--color-border-highest-contrast);
  outline: none;
}

.mktoForm
  .mktoFieldWrap:has(.mktoError)
  .mktoField.mktoInvalid:not([type="radio"]):not([type="checkbox"]) {
  border-color: var(--color-error) !important;
}

.mktoForm .mktoField:-ms-input-placeholder {
  color: transparent;
}

.mktoForm .mktoField::-moz-placeholder {
  color: transparent;
}

.mktoForm .mktoField::-webkit-input-placeholder {
  color: transparent;
}

.mktoForm .mktoField:focus::-moz-placeholder {
  color: var(--color-text-lowest-contrast);
}

.mktoForm .mktoField:focus:-ms-input-placeholder {
  color: var(--color-text-lowest-contrast);
}

.mktoForm .mktoField:focus::-webkit-input-placeholder {
  color: var(--color-text-lowest-contrast);
}

/**
 * 1. Height issues on IOS for empty date / time fields
 */

.mktoForm .mktoField[type="date"],
.mktoForm .mktoField[type="time"] {
  height: 3.625rem; /* [1] */
  appearance: none;
}

.mktoForm .mktoDateButton {
  display: none !important;
}

/**
 * Textareas
 */

.mktoForm textarea.mktoField {
  height: 7.5rem;
  min-height: 3.625rem;
  max-height: 24rem;
  resize: vertical;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAvSURBVHgB7dChEQAACAJAdBL3YnhXUZvNM9gkQPkEcBGSrgtvG4zHPVJVh+fYhAOhlQQyrUnPzwAAAABJRU5ErkJggg==");
  background-repeat: no-repeat;
  background-position: right 0.625rem bottom 0.625rem;
}

.mktoForm textarea.mktoField::-webkit-resizer {
  display: none;
}

.mktoForm textarea.mktoField::-moz-resizer {
  display: none;
}

/**
 * File
 */

.mktoForm .mktoFormCol[data-field-type="file"] input[type="file"] {
  display: none;
}

.mktoForm .mktoFormCol[data-field-type="file"] textarea.mktoField {
  height: 3.625rem;
  resize: none;
}

.mktoForm .mktoFormCol[data-field-type="file"] .mktoField {
  color: transparent;
  pointer-events: none;
}

.mktoForm .mktoFormCol[data-field-type="file"] .mktoFilePlaceholder {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  padding: 1rem 0.75rem;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
}

/**
 * Select
 */

.mktoForm select.mktoField:not([multiple]) {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNCIgdmlld0JveD0iMCAwIDEyIDQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8cGF0aCBkPSJNNiA0TDAgMC45NDQ0NDVMMC42MzE1NzkgMEw2IDIuNzIyMjJMMTEuMzY4NCAwTDEyIDAuOTQ0NDQ1TDYgNFoiIGZpbGw9IiMzOTM5MzkiLz4NCjwvc3ZnPg0K");
  background-size: 0.75rem auto;
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  height: 3.625rem;
  line-height: normal;
  appearance: none;
}

.mktoForm select.mktoField::-ms-expand {
  display: none;
}

/**
 * 1. Remove default yellow autofill color in Chrome
 */

.mktoForm .mktoField:-webkit-autofill,
.mktoForm .mktoField:-webkit-autofill:hover,
.mktoForm .mktoField:-webkit-autofill:focus,
.mktoForm .mktoField:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--color-surface) inset; /* [1] */
  box-shadow: 0 0 0 30px var(--color-surface) inset; /* [1] */
}

/*------------------------------------*\
  #CHECKBOXES AND RADIO BUTTONS
\*------------------------------------*/

.mktoForm .mktoCheckboxList,
.mktoForm .mktoRadioList {
  position: relative;
}

/**
 * Micro clearfix
 */

.mktoForm .mktoCheckboxList:before,
.mktoForm .mktoCheckboxList:after,
.mktoForm .mktoRadioList:before,
.mktoForm .mktoRadioList:after {
  display: table;
  content: " ";
}

.mktoForm .mktoCheckboxList:after,
.mktoForm .mktoRadioList:after {
  clear: both;
}

/**
 * 1. Checkbox/Radio button width (18px) + spacing (14px)
 */

.mktoForm .mktoCheckboxList label,
.mktoForm .mktoRadioList label {
  padding-left: 4rem; 
}

/**
 * Vertical spacing for checkboxes and radio buttons
 */

.mktoForm .mktoCheckboxList input:not(:last-of-type),
.mktoForm .mktoCheckboxList label:not(:last-of-type),
.mktoForm .mktoRadioList input:not(:last-of-type),
.mktoForm .mktoRadioList label:not(:last-of-type) {
  margin-bottom: 0.5rem;
}

/**
 * Hide native browser checkboxes and radio buttons
 * 1. Use clip instead of left: -999% to avoid horizontal overflow/scroll
 */

.mktoForm .mktoCheckboxList input,
.mktoForm .mktoRadioList input {
  position: absolute;
  opacity: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; /* [1] */
}

/**
 * 1. Position custom checkboxes / radio buttons relative to this element
 * 2. Make checkboxes / radio buttons span across the full width
 */

.mktoForm .mktoCheckboxList label,
.mktoForm .mktoRadioList label {
  position: relative; /* [1] */
  display: block; /* [2] */
}

.mktoForm .mktoCheckboxList label:before,
.mktoForm .mktoCheckboxList label:after,
.mktoForm .mktoRadioList label:before,
.mktoForm .mktoRadioList label:after {
  position: absolute;
  top: 0.125rem;
  left: 0;
  content: "";
}

.mktoForm .mktoCheckboxList label:before,
.mktoForm .mktoRadioList label:before {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: var(--Fillcolors-color-fill-neutral-subtler, #F1F1F1);
  border: 1px solid var(--Fillcolors-color-fill-neutral-subtle, #DDD);
  cursor: pointer;
}

.mktoForm .mktoRadioList label:before {
  border-radius: 50%;
}

.mktoForm .mktoRadioList label:after {
  top: 0.575rem;
  left: 0.425rem;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--color-border-highest-contrast);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
}

.mktoForm .mktoCheckboxList input:focus + label:before,
.mktoForm .mktoRadioList input:focus + label:before {
  border-color: var(--color-border-highest-contrast);
}

.mktoForm .mktoRadioList input:checked + label:after {
  transform: scale(1);
}

.mktoForm .mktoCheckboxList input:checked + label:after {
  display: block;
  width: 6px;
  height: 13px;
  border: solid #747474;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 3px;
  left: 7px;
  content: "";
}

/*------------------------------------*\
  #HTML-TEXT
\*------------------------------------*/

.mktoHtmlText a,
.mktoCaptchaDisclaimer a {
  color: var(--color-primary);
  text-decoration: none;
}

.mktoHtmlText a:hover,
.mktoHtmlText a:focus,
.mktoCaptchaDisclaimer a:hover,
.mktoCaptchaDisclaimer a:focus {
  text-decoration: underline;
  outline: none;
}

/*------------------------------------*\
  #MODAL
\*------------------------------------*/

.mktoModal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
}

.mktoModal .mktoModalMain {
  width: auto !important;
}

.mktoModal .mktoModalMask {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.88);
}

.mktoModal .mktoModalContent {
  position: relative;
  top: auto !important;
  left: auto !important;
  width: min(100% - 4rem, 80rem) !important;
  padding: 3rem 2rem;
  margin: auto;
  background-color: var(--color-surface);
}

.mktoModal .mktoModalClose {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1rem;
  height: 1rem;
  z-index: 2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.2448 9.25525L18.6318 1.86826L17.2176 0.454043L9.83057 7.84103L2.4436 0.454071L1.02939 1.86828L8.41635 9.25525L0.954102 16.7175L2.36832 18.1317L9.83057 10.6695L17.2928 18.1317L18.7071 16.7175L11.2448 9.25525Z' fill='black'/></svg>");
  background-size: 100%;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

html[data-theme="dark"] .mktoModal .mktoModalClose {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'><path fill-rule='evenodd' clip-rule='evenodd' d='M11.2448 9.25525L18.6318 1.86826L17.2176 0.454043L9.83057 7.84103L2.4436 0.454071L1.02939 1.86828L8.41635 9.25525L0.954102 16.7175L2.36832 18.1317L9.83057 10.6695L17.2928 18.1317L18.7071 16.7175L11.2448 9.25525Z' fill='white'/></svg>");
}

/*------------------------------------*\
  #BUTTON
\*------------------------------------*/

.mktoForm .mktoButtonRow {
  margin-top: 1rem;
}

.mktoForm .mktoButtonWrap {
  display: block;
  text-align: center;
}

.mktoForm .mktoButton {
  position: relative;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  text-align: center;
  font-weight: 500;
  color: var(--color-text-on-primary);
  letter-spacing: 0.025em;
  background-color: var(--color-primary);
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.mktoForm .mktoButton:hover,
.mktoForm .mktoButton:focus {
  outline: none;
  background-color: var(--color-primary-active);
}

/**
 * Hide null values in select elements, used in combination with `setNullFieldValues` in JavaScript
 */

.mktoForm input[type="checkbox"][value="NULL"],
.mktoForm option[value="NULL"],
.mktoForm input[type="checkbox"][value="NULL"] + label {
  display: none !important;
}

.mktoForm select {
    display: block !important;
}