/**
 * wso2-webinars-v2.css
 *
 * Restyles node--wso2-webinars.html.twig to match the finalized workshop
 * page UI (see workshop-v2.css / node--workshop.html.twig): hero photo
 * background with a dark overlay for legibility, the single "cDoor" tag
 * pill, a single "Add to Calendar" pill in place of workshop's day/time/
 * location pill row, white bodyText checkmark cards, and blue-gradient
 * presenter cards. Scoped to .node--type-wso2-webinars throughout so the
 * legacy node--webinars.html.twig (bundle "webinars") is unaffected.
 *
 * Depends on wso2theme/wso2-webinars for base structure (dayicon/timeicon
 * text, cG2Per2/lefborder layout, od-slides styling, etc.) — see
 * wso2theme.libraries.yml.
 */

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

/* This hero background (photo + overlay) is intentionally identical
 * whether the webinar is upcoming or has ended — it never swaps to a
 * per-node image. (field_webinar_sm_banner/field_on_demand_sm_banner are
 * social-share images instead — see wso2theme_preprocess_html(), which
 * puts them on og:image/twitter:image.) */
.node--type-wso2-webinars .HeaderN.cWebinarHeroBG {
  position: relative;
  overflow: hidden;
  /* Fallback color shows immediately (and if the image ever fails to
   * load) so text is always readable even before the photo paints in. */
  background-color: #0b1733;
  /* A left-to-right fade (not workshop's opaque gradient-only background)
   * so the photo is actually visible — strong enough over the title/pill
   * column on the left for contrast, fading out toward the right where
   * the white registration card sits anyway. Kept the same regardless of
   * the centered on-demand layout below it, rather than a second
   * differently-shaped overlay just for that state. */
  background-image:
    linear-gradient(90deg, rgba(6, 14, 32, 0.86) 0%, rgba(6, 14, 32, 0.55) 45%, rgba(6, 14, 32, 0.3) 100%),
    url("https://wso2.cachefly.net/wso2/sites/all/image_resources/webinar-page-top-banner.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Grid-line texture, layered above the photo (and below the actual
 * content, see > .container below) — same technique as the workshop
 * hero's ::before overlay. */
.node--type-wso2-webinars .HeaderN.cWebinarHeroBG::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 80% at 30% 40%, #000 55%, transparent 100%);
  mask-image: radial-gradient(80% 80% at 30% 40%, #000 55%, transparent 100%);
}

.node--type-wso2-webinars .HeaderN.cWebinarHeroBG > .container {
  position: relative;
}

.node--type-wso2-webinars .HeaderN h1 {
  font-size: 3.3rem !important;
  line-height: 4rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin-bottom: 1.75rem !important;
}

@media (max-width: 767px) {
  .node--type-wso2-webinars .HeaderN h1 {
    font-size: 2rem !important;
    line-height: 2.75rem !important;
  }
}

@media (max-width: 992px) {
  .node--type-wso2-webinars .HeaderN {
    text-align: left;
  }
}

/* Tag pill ("Webinar" / field_webinar_title_text) — same treatment as the
 * workshop page's "Virtual Workshop" / "In-Person Workshop" pill. */
.node--type-wso2-webinars .HeaderN .gradient-border.cDoor {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  background: rgba(8, 12, 24, 0.62);
  border: 1px solid rgba(92, 209, 255, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.node--type-wso2-webinars .HeaderN .gradient-border.cDoor h4.nomar,
.node--type-wso2-webinars .HeaderN .gradient-border.cDoor h4.nomar span {
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgb(168, 228, 255) !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------- */
/* On-demand hero (webinar_ended)                                          */
/* ---------------------------------------------------------------------- */

/* The hero background (photo + overlay, .cWebinarHeroBG above) is the same
 * left-to-right fade regardless of this centered layout — text just sits
 * over the middle of the photo instead of the left third. */

/* Single full-width, centered column — pill/heading/highlight/video (or
 * unlock-registration form) all stacked and centered, replacing the
 * upcoming-webinar hero's two-column left-aligned layout. The pill
 * (".gradient-border.cDoor", display: inline-flex) and the heading center
 * themselves automatically once their container's text-align is center. */
.node--type-wso2-webinars .cOnDemandHeroContent {
  text-align: center;
}

/* Smaller than the upcoming-webinar hero's 3.3rem — reads better centered
 * and full-width than at that size. */
.node--type-wso2-webinars .HeaderN.cOnDemandHero h1 {
  font-size: 2.9rem !important;
}

@media (max-width: 767px) {
  .node--type-wso2-webinars .HeaderN.cOnDemandHero h1 {
    font-size: 2rem !important;
  }
}

/* Recording video (or the unlock-registration form, if this on-demand
 * webinar is gated behind field_ondemand_form) — centered below the
 * heading instead of sitting in a separate right-hand column. Wider than
 * the upcoming-webinar hero's video/form column so the recording reads as
 * a proper centerpiece. */
.node--type-wso2-webinars .cOnDemandVideoWrap {
  max-width: 860px;
  margin: 2rem auto 0;
}

/* The recording iframe ships with fixed width="560"/height="315" HTML
 * attributes (for email/no-JS fallback rendering) — override those here so
 * it actually fills and centers within the wider wrapper above instead of
 * sitting undersized and left-aligned inside it. */
.node--type-wso2-webinars .cOnDemandVideoWrap .embed-responsive {
  max-width: 100%;
  margin: 0 auto;
}

.node--type-wso2-webinars .cOnDemandVideoWrap .embed-responsive iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  box-shadow: 2px 3px 33px 3px #000819 !important;
  border: solid 1px #403d3d !important;
}

/* If this on-demand webinar is gated behind field_ondemand_form and not
 * yet unlocked, the register form (not the video) renders here instead —
 * keep it at its normal compact card width rather than stretching it out
 * to the video wrapper's full width, and centered like everything else in
 * this hero. */
.node--type-wso2-webinars .cOnDemandVideoWrap .contact-form-section {
  max-width: 480px;
  margin: 0 auto;
  text-align: left;
}

/* "View Slides" section, below the hero — the base ".od-slides-section"
 * rule (wso2-webinars.css) adds a top border meant to separate it from
 * whatever sits directly above it in the legacy single-section layout;
 * here it's already its own section with the sitewide section
 * padding/background as separation, so the line is redundant. */
.node--type-wso2-webinars .od-slides-section {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

/* The sitewide "section { padding: 6rem 0; }" rule (global-all.css) gives
 * this section (and the body section right after it) 96px of top/bottom
 * padding by default — trimmed here so the button doesn't leave a big
 * empty gap below it before the body section starts. */
.node--type-wso2-webinars .cOnDemandSlidesSection {
  padding-bottom: 0;
}

/* Body section (the one right after the hero/slides section) — reduced
 * from the sitewide 96px top padding to 80px. */
.node--type-wso2-webinars .cWebinarBodySection {
  padding-top: 80px;
}

/* ".btn-view-slides" (wso2-webinars.css) is kept alongside ".cFilledCTA" on
 * this button purely for its hover/[aria-expanded="true"] color swap — but
 * it also sets "text-transform: uppercase" and inherits the sitewide
 * "button.cFilledCTA span { font-weight: 800 !important; }" bold weight,
 * neither of which cFilledCTA's own rules override — so the label was
 * rendering as bold "VIEW SLIDES" instead of a regular-weight
 * "View Slides". */
.node--type-wso2-webinars button.btn-view-slides.cFilledCTA {
  text-transform: none;
  font-weight: 400;
}

.node--type-wso2-webinars button.btn-view-slides.cFilledCTA span {
  font-weight: 400 !important;
}

/* Sitewide ".cFilledCTA" gives the button its base look (orange pill,
 * .cSVGarrow fill) — this just adds the slide-right-on-hover motion the
 * arrow gets on "a.cFilledCTA" elsewhere, which the "button.cFilledCTA"
 * variant doesn't otherwise define (wso2_layout_v2.css only fades its
 * fill, no transform). */
.node--type-wso2-webinars button.cFilledCTA .cSVGarrow {
  transition: transform 0.3s ease;
}

.node--type-wso2-webinars button.cFilledCTA:hover .cSVGarrow {
  transform: translateX(5px);
}

/* Centers the button (an inline-block element) within its section. */
.node--type-wso2-webinars .od-slides-section {
  text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Slide viewer (SlideShare embed)                                        */
/* ---------------------------------------------------------------------- */

/* Full width of the column, height derived proportionally from that width
 * (595:485 — the ratio implied by the embed's own original width/height
 * attributes) via "aspect-ratio", so there's no leftover blank space on
 * the sides at any container width, and no separate fixed pixel height
 * fighting with it. The space above the frame (".mt-3" on the wrapping
 * <div class="od-slides-embed mt-3"> in the twig, separating it from the
 * "View Slides" button) is intentionally left alone here — only the
 * iframe box itself is set to display: block with no margin/padding of
 * its own, so nothing is added inside/around the frame beyond that
 * existing button-to-frame spacing. */
.node--type-wso2-webinars .od-slides-embed {
  width: 100%;
}

.node--type-wso2-webinars .od-slides-embed iframe {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 595 / 485;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Date/time — plain stacked lines (no pill background/border), each with
 * the same blue calendar/clock icon the Add to Calendar pill uses below,
 * overriding (via higher specificity) the base orange-icon .dayicon/
 * .timeicon rules from wso2-webinars.css. Block-level h3s stack on their
 * own line automatically, one under the other. */
.node--type-wso2-webinars .HeaderN h3.dayicon,
.node--type-wso2-webinars .HeaderN h3.timeicon {
  font-size: 1.25rem !important;
  line-height: 1.9rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  margin: 0 0 12px 0 !important;
  background-repeat: no-repeat !important;
  background-size: 20px !important;
  background-position: 0 center !important;
  padding-left: 32px !important;
}

.node--type-wso2-webinars .HeaderN h3.dayicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231cd4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E") !important;
}

.node--type-wso2-webinars .HeaderN h3.timeicon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231cd4ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") !important;
}

/* "Add to Calendar" — the one actual pill in this hero, sitting below the
 * plain date/time lines above. Gets more breathing room above it than the
 * date/time lines get from each other, so it reads as its own element. */
.node--type-wso2-webinars .pd-pp-tier-row {
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}

.node--type-wso2-webinars .pd-pp-tier {
  background: rgb(170 166 166 / 8%);
  margin-bottom: 0px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 30px;
  border: 1px solid rgba(236, 236, 236, 0.34);
  color: #fff;
  text-transform: none !important;
  padding-left: 0;
}

.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill {
  /* No icon on the left anymore (that's now the trailing .arrow-icon
   * instead), so restore the left padding the base .pd-pp-tier rule
   * zeroes out — that zeroing was only ever meant for the icon-pill
   * variants (day/time), which supply their own icon + padding-left. */
  padding: 3px 14px !important;
  font-size: 0.9rem !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* The wrapping <span> is itself a flex item of the outer .pd-pp-tier row
 * (align-items: center centers it as a whole against the text), but an
 * inline <svg> sitting on its own text baseline inside that span would
 * still sit a few px low within the span's own line box (the same class
 * of bug the day/time icons had before — an icon riding its container's
 * font metrics instead of being centered against the actual content).
 * Making the span a flex container itself removes that: it centers the
 * svg against the span's true content box, not its line box. */
.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill span {
  display: inline-flex;
  align-items: center;
}

/* Trailing CTA arrow — the same ".cSVGarrow"/".st0" icon used with
 * cFilledCTA buttons sitewide (wso2_layout_v2.css), but filled white here
 * to match this pill's text instead of the sitewide default orange/black,
 * and sized down to fit this small pill. "display: block" drops the
 * default inline baseline behavior so nothing but the flex centering
 * above governs its position. */
.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill .cSVGarrow {
  display: block;
  width: 12px;
  height: 12px;
  transition: transform 0.3s ease;
}

.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill .cSVGarrow .st0 {
  fill: #ffffff;
}

.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill:hover .cSVGarrow,
.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill:focus .cSVGarrow {
  transform: translateX(5px);
}

/* Explicit :link/:visited overrides — without these, a browser's default
 * ":visited" link color can win out over a plain, non-pseudo-class color
 * rule once the visitor has actually followed this link once. */
.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill:link,
.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill:visited {
  color: #ffffff !important;
}

/* A more solid (not just more opaque-on-hover) background plus a lit-up
 * border, instead of growing the pill or tinting it orange — the arrow
 * slides right on hover via its own rule above. The border is kept at a
 * slightly translucent white (not solid #fff) so it reads as "lit up"
 * rather than as a visibly thicker line. */
.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill:hover,
.node--type-wso2-webinars a.pd-pp-tier.cCalendarPill:focus {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------- */
/* Body                                                                    */
/* ---------------------------------------------------------------------- */

.node--type-wso2-webinars .cWhiteBG {
  background-color: #fff !important;
  color: #000;
}

/* "Webinar highlights:" heading — printed above field_webinar_highlight at
 * the bottom of the body column (node--wso2-webinars.html.twig). Same
 * spacing treatment the workshop page gives its own "Recommended for:"
 * sub-heading (h3.cMt2), so a highlights list reads as a clearly separate
 * block from the body content above it, not a continuation of it. */
.node--type-wso2-webinars .cWebinarBodyText h3.cMt2 {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
  margin-top: 3rem !important;
}

/* Scoped to ".cWebinarBodyText" (the true body-content column) rather
 * than the shared ".bodyText" class, which other, non-card-styled content
 * on this page also carries. */
.node--type-wso2-webinars .cWebinarBodyText ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.node--type-wso2-webinars .cWebinarBodyText li {
  position: relative;
  display: block;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(7, 20, 46, 0.18);
  padding: 20px 24px 20px 64px !important;
  margin: 0 0 16px 0 !important;
  font-size: 1rem !important;
  line-height: 1.6rem !important;
}

.node--type-wso2-webinars .cWebinarBodyText li:before {
  content: "\2713";
  position: absolute;
  left: 20px;
  top: 20px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #ff6700;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 28px;
  text-align: center;
}

@media (max-width: 767px) {
  .node--type-wso2-webinars .cWebinarBodyText li {
    padding: 16px 16px 16px 56px !important;
  }

  .node--type-wso2-webinars .cWebinarBodyText li:before {
    left: 14px;
    top: 16px;
  }
}

/* The sitewide "p" rule (typography.css) gives every paragraph a
 * margin-bottom of 1.5rem — when the WYSIWYG body content wraps each
 * bullet's text in a <p>, that adds a large gap inside the card, below
 * the .cWebinarBodyText li padding already handles. Zeroed here, scoped
 * tightly to just these bullet-card paragraphs so other paragraphs on
 * this page (and everywhere else on the site) are unaffected. */
.node--type-wso2-webinars .cWebinarBodyText li p {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.node--type-wso2-webinars h2.mobres {
  font-size: 1.75rem !important;
  line-height: 2.25rem !important;
  font-weight: 700 !important;
}

.node--type-wso2-webinars .lefborder {
  border-left: none !important;
  border-image-source: none !important;
}

@media (min-width: 768px) {
  .node--type-wso2-webinars .lefborder {
    padding-left: 2rem;
  }
}

/* Presenter cards — same blue-gradient card style as the workshop page,
 * replacing the old flat cBlackBG card. */
.node--type-wso2-webinars .cRecognitionright.cBlueGradientBG {
  border-radius: 20px;
  overflow: hidden;
  padding: 1.5rem !important;
  margin-bottom: 20px;
  background:
    radial-gradient(70% 60% at 30% 20%, rgba(26, 74, 138, 0.55) 0%, transparent 60%),
    radial-gradient(55% 60% at 100% 0%, rgba(255, 103, 0, 0.5) 0%, transparent 68%),
    linear-gradient(297deg, #162f52 0%, #0b1733 10%, #0b1733 25%, #103f74 40%, #0e2543 55%, #0b1733 70%, #0b1733 85%, #0b1733 100%);
}

.node--type-wso2-webinars .cRecognitionright.cG2Per2 {
  min-width: 0 !important;
  width: 100%;
  align-items: center;
}

.node--type-wso2-webinars .cAnalystLogoWrap {
  margin-bottom: 0;
}

@media (max-width: 1199.98px) {
  .node--type-wso2-webinars .cRecognitionright.cG2Per2 {
    display: flex !important;
    flex-direction: column;
  }

  .node--type-wso2-webinars .cRecognitionright.cG2Per2 > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100%;
  }

  .node--type-wso2-webinars .cRecognitionright.cG2Per2 > div:first-child {
    text-align: center;
  }

  .node--type-wso2-webinars .cRecognitionright.cG2Per2 > div:last-child {
    text-align: center !important;
  }
}

.node--type-wso2-webinars .cRecognitionright.cBlueGradientBG .ctext {
  color: #cfd6e4 !important;
  line-height: 21px !important;
}

.node--type-wso2-webinars .cAnalystLogo.cimg-size {
  width: 100px !important;
  height: 100px !important;
  max-width: 100px !important;
  object-fit: cover;
}

.node--type-wso2-webinars .orange-text {
  color: #ff7300 !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------------------- */
/* Registration form (Wso2WebinarRegisterForm)                            */
/* ---------------------------------------------------------------------- */

/*
 * Mirrors workshop-v2.css's ".contact-form-section.cWso2WorkshopRegisterForm"
 * block almost exactly, scoped to this form's own marker class
 * (".cWso2WebinarRegisterForm", added in wso2WebinarRegisterForm.php's
 * #prefix) instead. Without this, the form only gets the generic
 * ".cHighlighted" styling (from wso2-webinars.css / global-all.css), which
 * is where the unwanted box-shadow/glow around the form and the default
 * bootstrap-ish input/button look come from.
 */

.contact-form-section.cWso2WebinarRegisterForm .error_parent + label.error {
  position: static !important;
  right: auto !important;
  z-index: auto !important;
  background: transparent !important;
  display: block;
  color: #ff0000;
  font-size: 0.85rem !important;
  text-align: left;
  margin: 4px 0 12px !important;
}

.contact-form-section.cWso2WebinarRegisterForm .cFormcHighlighted {
  border-radius: 15px;
  padding: 3rem !important;
  margin: 0 !important;
  /* This is what removes the orange/grey box-shadow glow the user asked
   * to have taken off — ".cHighlighted" (wso2-webinars.css / global-all.css)
   * would otherwise apply it unstyled, same as it did before this form had
   * a marker class to scope an override against. */
  box-shadow: none !important;
}

.contact-form-section.cWso2WebinarRegisterForm h5.regtitle {
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  padding-left: 0.75rem;
}

.contact-form-section.cWso2WebinarRegisterForm .form-control {
  width: 100%;
  color: #494848 !important;
  border: 1px solid #c2c3cb !important;
  height: 46px !important;
  border-radius: 0.25rem !important;
  background: #fff;
  box-shadow: none;
}

.contact-form-section.cWso2WebinarRegisterForm .form-control:focus,
.contact-form-section.cWso2WebinarRegisterForm select.form-control:focus {
  outline: none;
  border-color: #ff7300 !important;
  box-shadow: 0 0 0 3px rgba(255, 115, 0, 0.15) !important;
}

.contact-form-section.cWso2WebinarRegisterForm .has-float-label {
  white-space: nowrap;
}

.contact-form-section.cWso2WebinarRegisterForm .has-float-label label:not(.error) {
  position: absolute;
  cursor: text;
  font-size: 85%;
  opacity: 1;
  transition: all 0.2s;
  top: 0;
  transform: translateY(-50%);
  left: 0.75rem;
  z-index: 3;
  line-height: 1;
  padding: 4px 1px 1px 1px;
  color: #999999;
  background-color: #ffffff !important;
  white-space: nowrap;
}

.contact-form-section.cWso2WebinarRegisterForm .has-float-label .form-control:placeholder-shown:not(:focus) ~ label:not(.error) {
  font-size: 1rem;
  color: #494848;
  top: 50%;
  transform: translateY(-50%);
}

.contact-form-section.cWso2WebinarRegisterForm input.cFilledCTA {
  background-color: #ff6700 !important;
  color: #000 !important;
  padding: 12px 45px !important;
  border-radius: 320px !important;
  text-decoration: none !important;
  width: auto;
  border: 0;
  margin-top: 2rem;
  display: inline-block;
  font-size: 1rem !important;
  font-weight: 400 !important;
}

.contact-form-section.cWso2WebinarRegisterForm input.cFilledCTA:hover {
  color: #fff !important;
  transition: all 0.3s ease;
}

.contact-form-section.cWso2WebinarRegisterForm {
  margin-top: 0;
}