/* ==================================================
   AVERTA FONT
   ================================================== */

@font-face {
  font-family: "Averta";
  src: url("https://go.avantorsciences.com/rs/251-TTP-665/images/hinted-Averta-Regular.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* ==================================================
   HEADER AND FOOTER
   Prevent repeated or duplicate logos
   ================================================== */

#mktHeader {
  padding: 15px 20px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

#mktFooter,
#mbFooter {
  padding: 15px 20px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: contain !important;
}

/* Hide additional logo images if logo is already a background 
#mktHeader img,
#mktFooter img, #mktFooter p{
  display: none !important;
}*/


/* ==================================================
   FORM CONTAINER
   ================================================== */

.mktoForm {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;

  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  color: #001551 !important;

  box-sizing: border-box !important;
}

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


/* ==================================================
   FORM TEXT
   ================================================== */

.mktoForm,
.mktoForm div,
.mktoForm label,
.mktoForm p,
.mktoForm span,
.mktoForm strong {
  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  color: #001551 !important;
}

.mktoForm a {
  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  color: #001551 !important;
  text-decoration: underline !important;
}


/* ==================================================
   FORM ROWS
   ================================================== */

.mktoForm .mktoFormRow {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  gap: 0 10px !important;

  clear: both !important;
}


/* ==================================================
   FORM COLUMNS
   ================================================== */

/* Default single-column field */
.mktoForm .mktoFormCol {
  flex: 1 1 100% !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Two fields within the same row */
.mktoForm .mktoFormRow:has(> .mktoFormCol + .mktoFormCol)
> .mktoFormCol {
  flex: 1 1 calc(50% - 5px) !important;

  width: calc(50% - 5px) !important;
  min-width: 0 !important;
  max-width: calc(50% - 5px) !important;
}


/* ==================================================
   FIELD WRAPPERS
   ================================================== */

.mktoForm .mktoFieldWrap {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}


/* ==================================================
   REMOVE MARKETO GUTTERS
   ================================================== */

.mktoForm .mktoGutter,
.mktoForm .mktoOffset,
.mktoForm .mktoClear {
  display: none !important;

  width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==================================================
   LABELS
   ================================================== */

.mktoForm label.mktoLabel,
.mktoForm .mktoLabel {
  display: block !important;
  float: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 0 6px 0 !important;
  padding: 0 !important;

  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;

  color: #001551 !important;
}

.mktoForm .mktoRequiredField label.mktoLabel {
  width: 100% !important;
}


/* ==================================================
   REQUIRED ASTERISKS
   ================================================== */

.mktoForm .mktoAsterix {
  display: inline !important;
  float: none !important;

  margin: 0 2px 0 0 !important;
  padding: 0 !important;

  color: #d9001b !important;
}


/* ==================================================
   TEXT INPUTS, SELECTS AND TEXTAREAS
   Excludes checkbox and radio controls
   ================================================== */

.mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]),
.mktoForm .mktoFieldWrap input:not([type="checkbox"]):not([type="radio"]),
.mktoForm select.mktoField,
.mktoForm .mktoFieldWrap select,
.mktoForm textarea.mktoField,
.mktoForm .mktoFieldWrap textarea {
  display: block !important;
  float: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 0 10px 0 !important;
  padding: 8px !important;

  border: 1px solid #001551 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;

  background-color: #ffffff !important;

  color: #001551 !important;
  -webkit-text-fill-color: #001551 !important;

  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: normal !important;
}


/* Standard field height */
.mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]),
.mktoForm .mktoFieldWrap input:not([type="checkbox"]):not([type="radio"]),
.mktoForm select.mktoField,
.mktoForm .mktoFieldWrap select {
  height: 38px !important;
}


/* ==================================================
   FULL-WIDTH FIELDS
   ================================================== */

.mktoForm input#Email,
.mktoForm input[name="Email"],
.mktoForm input#PostalCode,
.mktoForm input[name="PostalCode"],
.mktoForm input#postalCode,
.mktoForm input[name="postalCode"],
.mktoForm input#Phone,
.mktoForm input[name="Phone"],
.mktoForm input#street,
.mktoForm input[name="street"],
.mktoForm select#State,
.mktoForm select[name="State"],
.mktoForm textarea#comment,
.mktoForm textarea[name="comment"],
.mktoForm textarea#Comment,
.mktoForm textarea[name="Comment"],
.mktoForm textarea#Comments,
.mktoForm textarea[name="Comments"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border: 1px solid #001551 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ==================================================
   COMMENT FIELD
   ================================================== */

.mktoForm textarea#comment,
.mktoForm textarea[name="comment"],
.mktoForm textarea#Comment,
.mktoForm textarea[name="Comment"],
.mktoForm textarea#Comments,
.mktoForm textarea[name="Comments"] {
  height: 100px !important;
  min-height: 100px !important;
  resize: vertical !important;
  border: 1px solid #001551 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ==================================================
   DROPDOWNS
   ================================================== */

.mktoForm select.mktoField,
.mktoForm .mktoFieldWrap select {
  padding-right: 36px !important;

  background-color: #ffffff !important;

  background-image: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23001551' stroke-width='2' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 8px !important;

  color: #001551 !important;
  -webkit-text-fill-color: #001551 !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

.mktoForm select option {
  color: #001551 !important;
  background-color: #ffffff !important;
}

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

/* Keep the original appearance for this field */
.mktoForm select#mktointerest {
  background-image: none !important;
}


/* ==================================================
   CHECKBOX ROWS
   ================================================== */

.mktoForm .mktoFormRow:has(.mktoCheckboxList),
.mktoForm .mktoFormRow:has(.mktoLogicalField) {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

.mktoForm .mktoFormRow:has(.mktoCheckboxList)
> .mktoFormCol,
.mktoForm .mktoFormRow:has(.mktoLogicalField)
> .mktoFormCol {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ==================================================
   GENERIC CHECKBOX LAYOUT
   Checkbox and its label remain next to each other
   ================================================== */

.mktoForm .mktoCheckboxList,
.mktoForm .mktoLogicalField.mktoCheckboxList {
  display: grid !important;

  grid-template-columns: 18px minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-rows: auto !important;

  column-gap: 10px !important;
  row-gap: 8px !important;

  align-items: start !important;
  justify-items: start !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;

  margin: 0 0 16px 0 !important;
  padding: 0 !important;

  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
}


/* Checkbox controls */
.mktoForm .mktoCheckboxList input[type="checkbox"],
.mktoForm .mktoLogicalField input[type="checkbox"] {
  grid-column: 1 !important;

  display: block !important;
  float: none !important;

  flex: none !important;

  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;

  margin: 2px 0 0 0 !important;
  padding: 0 !important;

  border: 1px solid #001551 !important;
  border-radius: 0 !important;

  background-color: #ffffff !important;
  background-image: none !important;

  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
}


/* Checkbox labels */
.mktoForm .mktoCheckboxList > label,
.mktoForm .mktoLogicalField.mktoCheckboxList > label {
  grid-column: 2 !important;

  display: block !important;
  float: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: normal !important;
  line-height: 1.35 !important;

  color: #001551 !important;
}


/* ==================================================
   AUTHORIZATION FIELD
   ================================================== */

/*
Hide Marketo's separate field label because it only
contains the isolated required asterisk.
*/
.mktoForm label#Lblauthorization,
.mktoForm #Lblauthorization {
  display: none !important;

  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* Authorization wrapper */
.mktoForm .mktoFieldWrap:has(#Lblauthorization),
.mktoForm .mktoFormRow:has(#Lblauthorization) .mktoFieldWrap {
  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 8px 0 20px 0 !important;
  padding: 0 !important;
}


/* Authorization checkbox list */
.mktoForm .mktoFormRow:has(#Lblauthorization)
.mktoCheckboxList,
.mktoForm .mktoFieldWrap:has(#Lblauthorization)
.mktoCheckboxList {
  display: grid !important;

  grid-template-columns: 18px minmax(0, 1fr) !important;
  grid-auto-flow: row !important;

  column-gap: 10px !important;
  row-gap: 0 !important;

  align-items: start !important;
  justify-items: start !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Authorization checkbox */
.mktoForm .mktoFormRow:has(#Lblauthorization)
.mktoCheckboxList input[type="checkbox"],
.mktoForm .mktoFieldWrap:has(#Lblauthorization)
.mktoCheckboxList input[type="checkbox"] {
  grid-column: 1 !important;
  grid-row: 1 !important;

  display: block !important;

  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;

  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;

  margin: 3px 0 0 0 !important;
  padding: 0 !important;
}


/* Authorization text */
.mktoForm .mktoFormRow:has(#Lblauthorization)
.mktoCheckboxList > label,
.mktoForm .mktoFieldWrap:has(#Lblauthorization)
.mktoCheckboxList > label {
  grid-column: 2 !important;
  grid-row: 1 !important;

  display: block !important;
  float: none !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;

  color: #001551 !important;

  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: normal !important;
  line-height: 1.35 !important;
}


/* Authorization links */
.mktoForm .mktoFormRow:has(#Lblauthorization)
.mktoCheckboxList > label a,
.mktoForm .mktoFieldWrap:has(#Lblauthorization)
.mktoCheckboxList > label a {
  color: #001551 !important;
  text-decoration: underline !important;
}


/* Alternative targeting by authorization field name */
.mktoForm .mktoCheckboxList:has(input[name="authorization"]),
.mktoForm .mktoCheckboxList:has(input[name="Authorization"]) {
  display: grid !important;

  grid-template-columns: 18px minmax(0, 1fr) !important;
  grid-auto-flow: row !important;

  column-gap: 10px !important;
  row-gap: 0 !important;

  align-items: start !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 8px 0 20px 0 !important;
  padding: 0 !important;
}

.mktoForm .mktoCheckboxList:has(input[name="authorization"])
input[type="checkbox"],
.mktoForm .mktoCheckboxList:has(input[name="Authorization"])
input[type="checkbox"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.mktoForm .mktoCheckboxList:has(input[name="authorization"])
> label,
.mktoForm .mktoCheckboxList:has(input[name="Authorization"])
> label {
  grid-column: 2 !important;
  grid-row: 1 !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ==================================================
   RADIO BUTTONS
   ================================================== */

.mktoForm .mktoRadioList {
  display: grid !important;

  grid-template-columns:
    18px minmax(0, 1fr)
    18px minmax(0, 1fr) !important;

  column-gap: 8px !important;
  row-gap: 8px !important;

  align-items: start !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 16px 0 !important;
  padding: 0 !important;
}

.mktoForm .mktoRadioList input[type="radio"] {
  display: block !important;

  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;

  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;

  margin: 2px 0 0 0 !important;
  padding: 0 !important;

  appearance: auto !important;
  -webkit-appearance: radio !important;
  -moz-appearance: radio !important;
}

.mktoForm .mktoRadioList > label {
  display: block !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #001551 !important;
  line-height: 1.35 !important;
}

.mktoFormRow:has(select[name="Country"]) > label,
#LblCountry {
    color: #001551 !important;
}


/* ==================================================
   BUTTON
   ================================================== */

.mktoForm .mktoButtonRow {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 20px 0 0 0 !important;
  padding: 0 !important;

  position: static !important;
  top: auto !important;

  text-align: left !important;
}

.mktoForm .mktoButtonWrap {
  margin-left: 0 !important;
}

.mktoForm button.mktoButton,
.mktoForm input.mktoButton,
.mktoButtonRow button.mktoButton,
button.mktoButton,
input.mktoButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
  height: 42px !important;

  margin: 0 !important;
  padding: 0 28px !important;

  border: none !important;
  border-radius: 4px !important;
  box-shadow: none !important;

  background-color: #001551 !important;
  background-image: none !important;

  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  text-align: center !important;

  cursor: pointer !important;
}

.mktoForm button.mktoButton:hover,
.mktoForm input.mktoButton:hover {
  opacity: 0.92;
}


/* ==================================================
   VALIDATION ERRORS
   ================================================== */

.mktoForm input.mktoInvalid:not([type="checkbox"]),
.mktoForm select.mktoInvalid,
.mktoForm textarea.mktoInvalid,
.mktoForm .mktoInvalid input:not([type="checkbox"]),
.mktoForm .mktoInvalid select,
.mktoForm .mktoInvalid textarea {
  border: 1px solid #d9001b !important;
}

.mktoForm .mktoError {
  position: relative !important;

  right: auto !important;
  bottom: auto !important;

  margin: 0 0 10px 0 !important;
}

.mktoForm .mktoErrorMsg {
  max-width: 100% !important;

  padding: 6px 8px !important;

  background-color: #d9001b !important;
  color: #ffffff !important;

  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
}

.mktoHtmlText.mktoHasWidth p, .mktoHtmlText.mktoHasWidth span  {
    position: relative;
    bottom: 47px !important;
    left: 30px !important;
}



/* ==================================================
   MOBILE
   ================================================== */

@media only screen and (max-width: 600px) {

  .mktoForm .mktoFormRow {
    display: block !important;
  }

  .mktoForm .mktoFormRow > .mktoFormCol,
  .mktoForm .mktoFormRow:has(> .mktoFormCol + .mktoFormCol)
  > .mktoFormCol {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    float: none !important;
  }

  .mktoForm .mktoFieldWrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Keep authorization checkbox and text side by side */
  .mktoForm .mktoCheckboxList,
  .mktoForm .mktoLogicalField.mktoCheckboxList {
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) !important;
    column-gap: 10px !important;
  }

  .mktoForm .mktoRadioList {
    grid-template-columns: 18px minmax(0, 1fr) !important;
  }

  .mktoForm .mktoButtonRow {
    text-align: center !important;
  }

  #mktoClickBlockingDiv {
    position: relative !important;

    height: auto !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #mbFooter {
    height: 75px !important;
  }
}



/* ==================================================
   EXTERNAL REQUIRED ASTERISK OVERRIDE
   The external JavaScript recreates this marker only
   for fields that Marketo renders as required.
   ================================================== */

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

.mktoForm .mktoLabel .externalRequiredAsterisk {
  display: inline-block !important;
  float: none !important;
  margin: 0 4px 0 0 !important;
  padding: 0 !important;
  color: #d9001b !important;
  -webkit-text-fill-color: #d9001b !important;
  font-family: "Averta", Arial, Helvetica, sans-serif !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  order: -1 !important;
}