@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");


/* Smart Workplace Solution — Webform iframe */


/* Base */

html.webform-share-page-html,
body.webform-share-page-body {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;

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

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

  background: transparent !important;
}

body.webform-share-page-body {
  font-family: "Montserrat", Arial, sans-serif !important;
  font-size: 16px !important;
}

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

input,
select,
textarea,
button {
  font-family: "Montserrat", Arial, sans-serif !important;
}


/* Drupal / Webform wrapper reset */

body.webform-share-page-body
.dialog-off-canvas-main-canvas,
body.webform-share-page-body
.layout-container,
body.webform-share-page-body
main,
body.webform-share-page-body
.layout-content,
body.webform-share-page-body
.region,
body.webform-share-page-body
.region-content,
body.webform-share-page-body
.block,
body.webform-share-page-body
.block-system,
body.webform-share-page-body
.block-system-main-block,
body.webform-share-page-body
.webform-share-page,
body.webform-share-page-body
.webform-share-submission-form,
body.webform-share-page-body
.webform-ajax-form-wrapper,
body.webform-share-page-body
.article,
body.webform-share-page-body
.article-wrapper {
  width: 100% !important;
  max-width: none !important;

  height: auto !important;
  min-height: 0 !important;

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

  border: 0 !important;
  box-shadow: none !important;

  background: transparent !important;
}


/* Hide Webform shared-page title */

body.webform-share-page-body
.article-wrapper > .title,
body.webform-share-page-body
.webform-share-page .article-wrapper > .title,
body.webform-share-page-body
.webform-share-submission-form .article-wrapper > .title,
body.webform-share-page-body
.block-page-title-block,
body.webform-share-page-body
.page-title {
  display: none !important;
}


/* Form wrapper */

body.webform-share-page-body
.webform-submission-smart-workplace-solution-form {
  display: block !important;

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

  height: auto !important;
  min-height: 0 !important;

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

  background: transparent !important;
}


/* General Drupal form reset */

body.webform-share-page-body
fieldset,
body.webform-share-page-body
.form-item,
body.webform-share-page-body
.form-wrapper,
body.webform-share-page-body
.form-group {
  min-width: 0 !important;
}

body.webform-share-page-body
.form-item,
body.webform-share-page-body
.form-wrapper,
body.webform-share-page-body
.form-group {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* First 4 fields — two columns */

body.webform-share-page-body
#edit-layout1,
body.webform-share-page-body
[id^="edit-layout1--"],
body.webform-share-page-body
[data-drupal-selector="edit-layout1"],
body.webform-share-page-body
[data-drupal-selector^="edit-layout1--"] {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  align-items: start !important;

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

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

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


/* Container 1 — left */

body.webform-share-page-body
#edit-container1,
body.webform-share-page-body
[id^="edit-container1--"],
body.webform-share-page-body
[data-drupal-selector="edit-container1"],
body.webform-share-page-body
[data-drupal-selector^="edit-container1--"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
}


/* Container 2 — right */

body.webform-share-page-body
#edit-container2,
body.webform-share-page-body
[id^="edit-container2--"],
body.webform-share-page-body
[data-drupal-selector="edit-container2"],
body.webform-share-page-body
[data-drupal-selector^="edit-container2--"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
}


/* Reset both layout columns */

body.webform-share-page-body
#edit-container1,
body.webform-share-page-body
#edit-container2,
body.webform-share-page-body
[id^="edit-container1--"],
body.webform-share-page-body
[id^="edit-container2--"],
body.webform-share-page-body
[data-drupal-selector="edit-container1"],
body.webform-share-page-body
[data-drupal-selector="edit-container2"],
body.webform-share-page-body
[data-drupal-selector^="edit-container1--"],
body.webform-share-page-body
[data-drupal-selector^="edit-container2--"] {
  position: static !important;

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

  gap: 10px !important;

  float: none !important;
  clear: none !important;

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

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

  transform: none !important;
}

body.webform-share-page-body
#edit-container1 > *,
body.webform-share-page-body
#edit-container2 > *,
body.webform-share-page-body
[id^="edit-container1--"] > *,
body.webform-share-page-body
[id^="edit-container2--"] > * {
  float: none !important;
  clear: none !important;

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

  margin: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* Hide normal labels — placeholders are used */

body.webform-share-page-body
.form-item:not(.form-type-checkbox) > label,
body.webform-share-page-body
.form-item:not(.form-type-checkbox) > .control-label {
  display: none !important;
}


/* Inputs */

body.webform-share-page-body
input[type="text"],
body.webform-share-page-body
input[type="email"],
body.webform-share-page-body
input[type="tel"],
body.webform-share-page-body
input[type="number"],
body.webform-share-page-body
select,
body.webform-share-page-body
textarea {
  display: block !important;

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

  height: 46px !important;

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

  color: #333333 !important;
  background: #ffffff !important;

  border: 1px solid #d8dce1 !important;
  border-radius: 9px !important;

  box-shadow: none !important;

  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 46px !important;
}

body.webform-share-page-body
input::placeholder,
body.webform-share-page-body
textarea::placeholder {
  color: #666b72 !important;
  opacity: 1 !important;
}

body.webform-share-page-body
input:focus,
body.webform-share-page-body
select:focus,
body.webform-share-page-body
textarea:focus {
  border-color: #999999 !important;
  outline: none !important;

  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.045) !important;
}


/* Select */

body.webform-share-page-body
.select-wrapper {
  display: block !important;

  width: 100% !important;

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

body.webform-share-page-body
select {
  padding-right: 38px !important;

  cursor: pointer !important;
}


/* Industry — full width */

body.webform-share-page-body
.form-item-industry,
body.webform-share-page-body
.js-form-item-industry {
  display: block !important;

  width: 100% !important;

  margin: 0 0 14px !important;
}


/* Solution of Interest */

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"],
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"] {
  display: block !important;

  width: 100% !important;

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

  border: 0 !important;
}


/* Solution title */

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"] > legend,
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"] > legend {
  display: block !important;

  width: auto !important;
  height: auto !important;

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

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"]
.fieldset-legend,
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"]
.fieldset-legend {
  position: static !important;

  display: inline !important;

  width: auto !important;
  height: auto !important;

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

  clip: auto !important;
  overflow: visible !important;

  white-space: normal !important;

  color: #55585d !important;

  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}


/* Checkbox wrapper */

/* Solution options — fixed 4-column alignment */

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"]
.form-checkboxes,
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"]
.form-checkboxes {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

  column-gap: 18px !important;
  row-gap: 12px !important;

  align-items: center !important;

  width: 100% !important;

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


/* Each solution */

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"]
.form-type-checkbox,
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"]
.form-type-checkbox {
  display: block !important;

  width: auto !important;

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


/* Drupal puts input inside label */

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"]
.form-type-checkbox label,
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"]
.form-type-checkbox label {
  display: flex !important;

  align-items: center !important;

  width: auto !important;

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

  color: #222222 !important;

  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;

  cursor: pointer !important;
}


/* Checkbox */

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"]
input[type="checkbox"],
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"]
input[type="checkbox"] {
  position: static !important;

  flex: 0 0 auto !important;

  width: 17px !important;
  height: 17px !important;

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

  accent-color: #dd0011 !important;
}


/* Remove Sharp theme's extra checkbox span */

body.webform-share-page-body
fieldset[id^="edit-solution-of-interest"]
.form-type-checkbox label > span,
body.webform-share-page-body
fieldset[data-drupal-selector^="edit-solution-of-interest"]
.form-type-checkbox label > span {
  display: none !important;
}


/* Tell us about your needs */

body.webform-share-page-body
.form-item-tell-us-about-your-needs,
body.webform-share-page-body
.js-form-item-tell-us-about-your-needs {
  display: block !important;

  width: 100% !important;

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


/* Current Text Field version */

body.webform-share-page-body
#edit-tell-us-about-your-needs,
body.webform-share-page-body
[data-drupal-selector="edit-tell-us-about-your-needs"] {
  width: 100% !important;

  height: 58px !important;

  line-height: 58px !important;
}


/* Also supports textarea after you change field type */

body.webform-share-page-body
textarea#edit-tell-us-about-your-needs,
body.webform-share-page-body
textarea[data-drupal-selector="edit-tell-us-about-your-needs"] {
  min-height: 66px !important;
  height: 66px !important;

  padding: 11px 14px !important;

  line-height: 1.4 !important;

  resize: none !important;
}


/* Submit */

body.webform-share-page-body
.form-actions,
body.webform-share-page-body
.webform-actions {
  position: relative !important;

  display: block !important;

  width: 46% !important;
  max-width: 365px !important;
  min-width: 250px !important;

  margin: 14px auto 0 !important;
  padding: 0 !important;
}

body.webform-share-page-body
.form-actions input[type="submit"],
body.webform-share-page-body
.form-actions button[type="submit"],
body.webform-share-page-body
.webform-actions input[type="submit"],
body.webform-share-page-body
.webform-actions button[type="submit"] {
  display: block !important;

  width: 100% !important;
  height: 48px !important;

  margin: 0 !important;
  padding: 0 52px 0 22px !important;

  color: #ffffff !important;
  background: #dd0011 !important;

  border: 0 !important;
  border-radius: 28px !important;

  box-shadow: none !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 48px !important;

  text-align: center !important;
  text-transform: uppercase !important;

  cursor: pointer !important;
}


/* Submit arrow circle */

body.webform-share-page-body
.form-actions::after,
body.webform-share-page-body
.webform-actions::after {
  content: "→";

  position: absolute !important;

  top: 50% !important;
  right: 8px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;

  transform: translateY(-50%) !important;

  color: #dd0011 !important;
  background: #ffffff !important;

  border-radius: 50% !important;

  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  pointer-events: none !important;
}

body.webform-share-page-body
.form-actions input[type="submit"]:hover,
body.webform-share-page-body
.form-actions button[type="submit"]:hover {
  background: #c7000f !important;
}


/* Validation */

body.webform-share-page-body
.form-item--error-message,
body.webform-share-page-body
.form-item--error-message strong {
  margin: 3px 0 0 !important;

  font-size: 9px !important;
  line-height: 1.3 !important;
}

body.webform-share-page-body
input.error,
body.webform-share-page-body
select.error,
body.webform-share-page-body
textarea.error {
  border-color: #d71920 !important;
}


/* CAPTCHA */

body.webform-share-page-body
.captcha,
body.webform-share-page-body
.form-item-captcha {
  width: 100% !important;

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


/* Prevent cookie popup from affecting iframe height */

body.webform-share-page-body
#sliding-popup,
body.webform-share-page-body
.eu-cookie-compliance-banner,
body.webform-share-page-body
.eu-cookie-withdraw-tab {
  display: none !important;
}


/* Mobile iframe */

@media only screen and (max-width: 480px) {
  body.webform-share-page-body
  #edit-layout1,
  body.webform-share-page-body
  [id^="edit-layout1--"],
  body.webform-share-page-body
  [data-drupal-selector="edit-layout1"],
  body.webform-share-page-body
  [data-drupal-selector^="edit-layout1--"] {
    grid-template-columns: 1fr !important;
  }

  body.webform-share-page-body
  #edit-container1,
  body.webform-share-page-body
  [id^="edit-container1--"],
  body.webform-share-page-body
  [data-drupal-selector="edit-container1"],
  body.webform-share-page-body
  [data-drupal-selector^="edit-container1--"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.webform-share-page-body
  #edit-container2,
  body.webform-share-page-body
  [id^="edit-container2--"],
  body.webform-share-page-body
  [data-drupal-selector="edit-container2"],
  body.webform-share-page-body
  [data-drupal-selector^="edit-container2--"] {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.webform-share-page-body
  fieldset[id^="edit-solution-of-interest"]
  .form-checkboxes {
    gap: 10px 16px !important;
  }

  body.webform-share-page-body
  .form-actions,
  body.webform-share-page-body
  .webform-actions {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}