/* Embedded HubSpot forms (public/forms/hubspot-forms.js renders them).
   HubSpot styles the form itself, from the form's theme in HubSpot; restyle
   fields and buttons there. This file adds the panel the live site drew behind
   every form (live wrapped forms in .hbspt-form; ours render into .kibo-hsform),
   and the popup dialog. */
.kibo-hsform,
.hbspt-form,
#hubspot-form {
  background: rgba(255, 255, 255, .8);
  padding: 20px;
  border-radius: 20px;
}

/* Popup: a link to "#<id>" of a .kibo-hsform--popup placeholder opens it here */
.kibo-hsform-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 24px;
  border: 0;
  border-radius: 20px;
  background: var(--kibo-white);
  box-shadow: 0 12px 48px rgba(0, 0, 0, .25);
  overflow: auto;
}
.kibo-hsform-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.kibo-hsform-dialog__close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--kibo-dark-grey);
  cursor: pointer;
}
.kibo-hsform-dialog .kibo-hsform,
.kibo-hsform-dialog .hbspt-form { padding: 0; }
.kibo-hsform-dialog__title { margin: 0 0 16px; font: 600 22px/1.3 'Poppins', sans-serif; color: var(--kibo-dark-grey); }
