/**
 * Shared HubSpot modal form chrome.
 * Used by: #myModalsignup (courses), #myModalsignup_event (events), #myModalemail (category banner).
 * Layout widths / modal chrome stay in each block CSS.
 */
#myModalsignup .hs-form-field.hs-fieldtype-select label,
#myModalsignup_event .hs-form-field.hs-fieldtype-select label,
#myModalemail .hs-form-field.hs-fieldtype-select label {
  display: none;
}

#myModalsignup .hbspt-form .hs-form-field .input select.hs-input.focused,
#myModalsignup_event .hbspt-form .hs-form-field .input select.hs-input.focused,
#myModalemail .hbspt-form .hs-form-field .input select.hs-input.focused {
  color: var(--secondary-color) !important;
}

#myModalsignup .hbspt-form .hs-form-field label.active,
#myModalsignup_event .hbspt-form .hs-form-field label.active,
#myModalemail .hbspt-form .hs-form-field label.active {
  top: -0.01vw;
  left: 0.6vw;
  font-size: 0.573vw;
  opacity: 1;
}

#myModalsignup .hs-form-field label.hs-error-msg,
#myModalsignup_event .hs-form-field label.hs-error-msg,
#myModalemail .hs-form-field label.hs-error-msg {
  display: inline-block;
  position: absolute;
  font-size: 0.629vw;
  color: red;
  top: inherit;
  left: inherit;
}

#myModalsignup .hs-form-field ul.hs-error-msgs,
#myModalsignup_event .hs-form-field ul.hs-error-msgs,
#myModalemail .hs-form-field ul.hs-error-msgs {
  margin: 0;
  padding: 0;
}

#myModalsignup .hs-form-field ul.hs-error-msgs li,
#myModalsignup_event .hs-form-field ul.hs-error-msgs li,
#myModalemail .hs-form-field ul.hs-error-msgs li {
  list-style: none;
}

#myModalsignup .hs-form-field .input input,
#myModalsignup_event .hs-form-field .input input,
#myModalemail .hs-form-field .input input {
  font-size: var(--wp--preset--font-size--small);
  padding: 0.7vw 0.625vw 0.425vw;
  border-radius: var(--borderradius8);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  color: var(--secondary-color);
}

#myModalsignup .hs-form-field .input select,
#myModalsignup_event .hs-form-field .input select,
#myModalemail .hs-form-field .input select {
  background-image: url(../img/select_arrowsvg.svg);
  background-repeat: no-repeat;
  background-position: 96% center;
  appearance: none;
  background-size: 0.8vw;
  font-size: var(--wp--preset--font-size--small);
  padding: 0.5vw 0.625vw;
  border-radius: var(--borderradius8);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  color: var(--secondary-color);
}

#myModalsignup .hs-form-field .input input:focus-visible,
#myModalsignup_event .hs-form-field .input input:focus-visible,
#myModalemail .hs-form-field .input input:focus-visible {
  outline: none;
  border-color: var(--secondary-color);
}

#myModalsignup .legal-consent-container a,
#myModalsignup_event .legal-consent-container a,
#myModalemail .legal-consent-container a {
  color: var(--primary-color);
  text-decoration: underline;
}

#myModalsignup .legal-consent-container a:hover,
#myModalsignup_event .legal-consent-container a:hover,
#myModalemail .legal-consent-container a:hover {
  text-decoration: none;
}

#myModalsignup .legal-consent-container label span,
#myModalsignup_event .legal-consent-container label span,
#myModalemail .legal-consent-container label span {
  margin-left: 0.5vw;
}

#myModalsignup .legal-consent-container label span p,
#myModalsignup_event .legal-consent-container label span p,
#myModalemail .legal-consent-container label span p,
#myModalsignup .legal-consent-container label.hs-form-booleancheckbox-display span p,
#myModalsignup_event .legal-consent-container label.hs-form-booleancheckbox-display span p,
#myModalemail .legal-consent-container label.hs-form-booleancheckbox-display span p {
  color: var(--gray);
  font-size: 0.625vw;
}

#myModalsignup .legal-consent-container label span p a,
#myModalsignup_event .legal-consent-container label span p a,
#myModalemail .legal-consent-container label span p a,
#myModalsignup .legal-consent-container label.hs-form-booleancheckbox-display span p a,
#myModalsignup_event .legal-consent-container label.hs-form-booleancheckbox-display span p a,
#myModalemail .legal-consent-container label.hs-form-booleancheckbox-display span p a {
  color: var(--gray);
  text-decoration: underline;
}

#myModalsignup .legal-consent-container label span p a:hover,
#myModalsignup_event .legal-consent-container label span p a:hover,
#myModalemail .legal-consent-container label span p a:hover,
#myModalsignup .legal-consent-container label.hs-form-booleancheckbox-display span p a:hover,
#myModalsignup_event .legal-consent-container label.hs-form-booleancheckbox-display span p a:hover,
#myModalemail .legal-consent-container label.hs-form-booleancheckbox-display span p a:hover {
  text-decoration: none;
}

#myModalsignup .legal-consent-container ul,
#myModalsignup_event .legal-consent-container ul,
#myModalemail .legal-consent-container ul {
  padding: 0;
  margin: 0;
}

#myModalsignup .legal-consent-container ul li,
#myModalsignup_event .legal-consent-container ul li,
#myModalemail .legal-consent-container ul li {
  list-style: none;
}

#myModalsignup .legal-consent-container .hs-form-field,
#myModalsignup_event .legal-consent-container .hs-form-field,
#myModalemail .legal-consent-container .hs-form-field {
  width: 100%;
}

#myModalsignup .legal-consent-container .hs-form-booleancheckbox-display input[type="checkbox"],
#myModalsignup_event .legal-consent-container .hs-form-booleancheckbox-display input[type="checkbox"],
#myModalemail .legal-consent-container .hs-form-booleancheckbox-display input[type="checkbox"] {
  width: auto;
  accent-color: var(--skyblue);
}

#myModalsignup .hs_error_rollup,
#myModalsignup_event .hs_error_rollup,
#myModalemail .hs_error_rollup {
  width: 100%;
  display: none !important;
}

#myModalsignup.modal .close,
#myModalsignup_event.modal .close,
#myModalemail.modal .close {
  right: 1vw;
  position: absolute;
  top: 0.7vw;
}

@media (max-width: 1400px) {
  #myModalsignup .hs-form-field label.hs-error-msg,
  #myModalsignup_event .hs-form-field label.hs-error-msg,
  #myModalemail .hs-form-field label.hs-error-msg {
    font-size: 1vw;
  }

  #myModalsignup .legal-consent-container label span p,
  #myModalsignup_event .legal-consent-container label span p,
  #myModalemail .legal-consent-container label span p {
    font-size: 1vw;
  }
}