/* =====================================================================
   e2mp form-page treatment — the medium "label left / controls right"
   pages that share the legacy  #contact > .col-lg-10 > .form-row  shape:
   CreateShortReel, ViewListofPotentialInvestors, CreateiInvestorPitchDeck,
   PrepareforInvestorPitchDay, ServicestoInvestor, ViewInvestorPitchbyFounders.

   Presentation only. Many of these inputs carry inline
   style="width:170px;height:35px" from the legacy markup, so the field
   rules need !important to win. Scoped to .w3l-news so the dashboard and
   public marketing pages are untouched.
   ===================================================================== */
:root{ --fp-navy:#0d2447; --fp-teal:#0d7c86; --fp-gold:#f1b12b;
       --fp-line:#e7ebf4; --fp-muted:#6c7a96; }

/* ---------- page header (title + subtitle + help card) ---------- */
.fp-pagehead{ max-width:1000px; margin:0 auto; padding:14px 24px 4px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.fp-pagehead h1{ font-family:'Inter',sans-serif; font-size:26px !important; font-weight:800 !important;
  color:var(--fp-navy) !important; margin:0 0 4px !important; line-height:1.25; text-align:left !important; }
.fp-pagehead p{ margin:0 !important; color:var(--fp-muted) !important; font-size:14.5px; }
.fp-help{ background:#fff; border:1px solid var(--fp-line); border-radius:12px; padding:10px 16px;
  font-size:13px; color:var(--fp-muted); white-space:nowrap; box-shadow:0 6px 18px rgba(28,42,74,.06); }
.fp-help strong{ display:block; color:var(--fp-navy); font-weight:700; margin-bottom:2px; }
.fp-help a{ color:var(--fp-teal) !important; font-weight:600; text-decoration:none; }

/* ---------- question/field rows -> clean divided blocks ---------- */
.w3l-news #contact .form-row{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 24px;
  padding:18px 4px; margin:0 !important; border-bottom:1px solid var(--fp-line); }
.w3l-news #contact .form-row:last-of-type{ border-bottom:none; }
.w3l-news #contact .form-row > .col-md-4{ flex:0 0 300px; max-width:300px; padding:0 !important; }
.w3l-news #contact .form-row > .col-md-8{ flex:1 1 320px; padding:0 !important; }
.w3l-news #contact .form-row > .col-md-6{ flex:1 1 300px; padding:0 !important; }
.w3l-news #contact .form-row > .col-12{ flex:1 1 100%; padding:0 !important; }
.w3l-news #contact .form-row label{
  font-family:'Inter',sans-serif !important; font-weight:600 !important; color:var(--fp-navy) !important;
  font-size:14px !important; line-height:1.5; margin:0 !important; display:block; }

/* ---------- controls: beat the legacy inline width/height ---------- */
.w3l-news #contact input[type="text"],
.w3l-news #contact input[type="email"],
.w3l-news #contact input[type="number"],
.w3l-news #contact input[type="tel"],
.w3l-news #contact input[type="url"],
.w3l-news #contact input[type="date"],
.w3l-news #contact input:not([type]),
.w3l-news #contact select,
.w3l-news #contact textarea{
  height:44px !important; min-width:0 !important; width:100% !important; max-width:340px !important;
  padding:10px 13px !important; border:1px solid var(--fp-line) !important; border-radius:10px !important;
  background:#fbfdff !important; font-family:'Inter',sans-serif !important; font-size:14px !important;
  color:#17233c !important; box-shadow:none !important; margin:0 6px 8px 0 !important; }
.w3l-news #contact textarea{ height:auto !important; min-height:92px !important; max-width:560px !important; }
.w3l-news #contact input:focus,.w3l-news #contact select:focus,.w3l-news #contact textarea:focus{
  border-color:var(--fp-teal) !important; background:#fff !important;
  box-shadow:0 0 0 3px rgba(13,124,134,.12) !important; outline:none !important; }
/* groups of small inputs (e.g. Name1/2/3 + Designation1/2/3) wrap neatly */
.w3l-news #contact .col-md-8 > input{ max-width:210px !important; }

/* file upload -> dashed drop zone */
.w3l-news #contact input[type="file"]{
  border:1.5px dashed var(--fp-line) !important; border-radius:10px !important; padding:12px 14px !important;
  background:#f7f9fc !important; width:100% !important; max-width:420px !important; height:auto !important;
  font-family:'Inter',sans-serif !important; font-size:13.5px !important; color:var(--fp-muted) !important; cursor:pointer; }
.w3l-news #contact input[type="file"]:hover{ border-color:var(--fp-teal) !important; background:#f2f7fc !important; }
.w3l-news #contact input[type="file"][disabled]{ opacity:.65; cursor:not-allowed; }

/* radio / checkbox option pills */
.w3l-news #contact .form-check-inline{
  display:inline-flex !important; align-items:center; gap:8px; margin:0 10px 8px 0 !important;
  padding:8px 14px; border:1px solid var(--fp-line); border-radius:999px; background:#fbfdff; cursor:pointer; }
.w3l-news #contact .form-check-inline:hover{ border-color:var(--fp-teal); background:#f3fafb; }
.w3l-news #contact .form-check-label{ margin:0 !important; font-size:13.5px !important; color:#28415b !important; font-weight:500; }
.w3l-news #contact input[type=radio],.w3l-news #contact input[type=checkbox]{
  accent-color:var(--fp-teal); width:15px; height:15px; margin:0; height:15px !important; }

/* helper/note text under fields */
.w3l-news #contact .note,.w3l-news #contact small,.w3l-news #contact .validate{ font-size:12.5px; color:var(--fp-muted); }

/* ---------- primary actions ---------- */
.w3l-news #contact .btn:not(.multiselect),
.w3l-news #contact button[type="submit"],
.w3l-news #contact input[type="submit"],
.w3l-news .grid-view .btn-primary2{
  background:linear-gradient(135deg,var(--fp-teal),var(--fp-navy)) !important; color:#fff !important;
  border:none !important; border-radius:12px !important; padding:12px 30px !important; height:auto !important;
  font-family:'Inter',sans-serif !important; font-weight:700 !important; font-size:14.5px !important;
  width:auto !important; max-width:none !important; cursor:pointer;
  box-shadow:0 10px 22px rgba(13,124,134,.18) !important; }
.w3l-news #contact .btn:hover,.w3l-news .grid-view .btn-primary2:hover{ filter:brightness(1.07); }

/* ---------- informational pages (.grid-view / .col-md-8) ---------- */
.w3l-news .grid-view .col-md-8,
.w3l-news .grid-view .col-md-12{ float:none !important; margin:0 auto !important; }
.w3l-news .grid-view p{ color:#3c4b58; font-size:15px; line-height:1.75; }
.w3l-news .grid-view h3,.w3l-news .grid-view h4{
  font-family:'Inter',sans-serif !important; font-weight:800 !important; color:var(--fp-navy) !important;
  font-size:1.15rem !important; margin:16px 0 10px !important; }

@media (max-width:820px){
  .w3l-news #contact .form-row > .col-md-4{ flex:1 1 100%; max-width:none; }
  .w3l-news #contact input,.w3l-news #contact select{ max-width:none !important; }
}

/* ---------- bootstrap-multiselect criteria widgets
     (ViewListofPotentialInvestors: "None selected" dropdowns whose options
     live in a popup panel of checkboxes) ---------- */
.w3l-news .btn-group{ display:inline-block; width:100%; max-width:340px; margin:0 0 6px; }
.w3l-news #contact button.multiselect.dropdown-toggle,
.w3l-news button.multiselect.dropdown-toggle,
.w3l-news #contact .multiselect.dropdown-toggle.btn,
.w3l-news .multiselect.dropdown-toggle.btn{
  background:#fbfdff !important; background-image:none !important;
  border:1px solid var(--fp-line) !important; border-radius:10px !important;
  color:#17233c !important; font-family:'Inter',sans-serif !important; font-weight:500 !important;
  font-size:14px !important; height:44px !important; width:100% !important; max-width:340px !important;
  text-align:left !important; padding:10px 34px 10px 13px !important; position:relative;
  box-shadow:none !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.w3l-news #contact button.multiselect.dropdown-toggle:hover,
.w3l-news button.multiselect.dropdown-toggle:hover{ border-color:var(--fp-teal) !important; background:#fff !important; }
.w3l-news button.multiselect.dropdown-toggle .caret{
  position:absolute; right:14px; top:50%; transform:translateY(-50%); border-top-color:var(--fp-muted); }
/* the popup panel */
.w3l-news .multiselect-container.dropdown-menu{
  border:1px solid var(--fp-line) !important; border-radius:12px !important; padding:8px !important;
  box-shadow:0 18px 44px rgba(13,36,71,.16) !important; max-height:320px; overflow-y:auto; min-width:280px; }
.w3l-news .multiselect-container li a{ border-radius:8px; padding:8px 10px !important; }
.w3l-news .multiselect-container li a:hover{ background:#f3fafb !important; }
.w3l-news .multiselect-container li a label{
  font-family:'Inter',sans-serif !important; font-size:13.5px !important; color:#28415b !important;
  font-weight:500 !important; margin:0 !important; display:flex; align-items:center; gap:9px; cursor:pointer; }
.w3l-news .multiselect-container input[type=checkbox]{ accent-color:var(--fp-teal); width:15px; height:15px; height:15px !important; margin:0 !important; }
.w3l-news .multiselect-container li.active a,
.w3l-news .multiselect-container li a.active{ background:rgba(13,124,134,.08) !important; }
/* criteria label above each widget */
.w3l-news .form-group > label,
.w3l-news #contact > .container label{ font-family:'Inter',sans-serif !important; font-weight:600 !important;
  color:var(--fp-navy) !important; font-size:14px !important; margin-bottom:7px !important; display:block; }

/* =====================================================================
   jQuery-Steps wizard (question_form_new / question_form_investor ->
   form/new_index.php). Markup: .wizard > .steps ul li(.current/.done/
   .disabled) > a > .title > .step-number + .step-text, then .content,
   then .actions ul li a (Previous / Next / Finish).
   The plugin ships flat 140x50 square buttons — this makes the stepper a
   real progress rail and the actions proper buttons.
   ===================================================================== */
.wizard{ position:relative; }

/* ---- step rail ---- */
.wizard > .steps{ padding:0 0 6px; margin-bottom:22px; border-bottom:1px solid var(--fp-line); }
.wizard > .steps ul{ display:flex; flex-direction:row !important; flex-wrap:wrap; gap:6px; margin:0 !important; padding:0 !important; list-style:none; }
.wizard > .steps li{ flex:1 1 180px; min-width:150px; margin:0 !important; }
.wizard > .steps li a{ display:block !important; padding:10px 6px 14px !important; margin:0 !important;
  background:transparent !important; border:none !important; text-decoration:none; position:relative; }
.wizard > .steps li a:hover{ background:transparent !important; }
/* connector rail under each step */
.wizard > .steps li a::after{ content:""; position:absolute; left:0; right:0; bottom:0;
  height:3px; border-radius:3px; background:#e7ebf4; transition:background .2s; }
.wizard > .steps li.current a::after{ background:var(--fp-teal); }
.wizard > .steps li.done a::after{ background:var(--fp-teal); opacity:.55; }

.wizard .title{ display:flex !important; align-items:center; gap:10px; }
.wizard .step-number{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  display:flex !important; align-items:center; justify-content:center;
  background:#eef2f8 !important; color:var(--fp-muted) !important;
  font-family:'Inter',sans-serif !important; font-weight:700 !important; font-size:13px !important;
  line-height:1 !important; margin:0 !important; transition:.18s; }
.wizard li.current .step-number{ background:var(--fp-teal) !important; color:#fff !important;
  box-shadow:0 0 0 4px rgba(13,124,134,.14); }
.wizard li.done .step-number{ background:var(--fp-teal) !important; color:#fff !important; opacity:.75; }
.wizard .step-text{
  font-family:'Inter',sans-serif !important; font-size:13.5px !important; font-weight:600 !important;
  color:var(--fp-muted) !important; line-height:1.3; }
.wizard li.current .step-text{ color:var(--fp-navy) !important; }
.wizard li.done .step-text{ color:#4a5a70 !important; }

/* ---- step body ---- */
.wizard > .content{ background:transparent !important; border:none !important; margin:0 !important;
  min-height:auto !important; overflow:visible !important; }
.wizard > .content > .body{ position:static !important; width:100% !important; height:auto !important;
  padding:0 !important; float:none !important; }
.wizard > .content > .body > h3,
.wizard .content .title.current{ font-family:'Inter',sans-serif !important; font-weight:800 !important;
  color:var(--fp-navy) !important; font-size:1.2rem !important; margin:0 0 4px !important; }
.wizard .desc{ color:var(--fp-muted) !important; font-size:14px; margin:0 0 20px !important; }

/* ---- action buttons ---- */
.wizard > .actions{ margin-top:26px; padding-top:20px; border-top:1px solid var(--fp-line); }
.wizard > .actions ul{ display:flex; justify-content:flex-end; gap:12px; margin:0 !important; padding:0 !important; list-style:none; }
.wizard > .actions li{ margin:0 !important; float:none !important; }
.wizard > .actions li a{
  display:inline-flex !important; align-items:center; justify-content:center; gap:8px;
  width:auto !important; height:auto !important; min-width:132px;
  padding:12px 26px !important; border-radius:12px !important;
  background:linear-gradient(135deg,var(--fp-teal),var(--fp-navy)) !important; color:#fff !important;
  font-family:'Inter',sans-serif !important; font-weight:700 !important; font-size:14.5px !important;
  text-decoration:none; border:none !important; cursor:pointer; transition:.16s;
  box-shadow:0 10px 22px rgba(13,124,134,.18) !important; }
.wizard > .actions li a:hover{ filter:brightness(1.08); }
/* Previous = secondary */
.wizard > .actions li:first-child a{
  background:#fff !important; background-image:none !important; color:var(--fp-navy) !important;
  border:1.5px solid var(--fp-line) !important; box-shadow:none !important; }
.wizard > .actions li:first-child a:hover{ border-color:var(--fp-teal) !important; color:var(--fp-teal) !important; }
.wizard > .actions li.disabled a{ opacity:.45; cursor:not-allowed; pointer-events:none; }

@media (max-width:640px){
  .wizard > .steps li{ flex:1 1 100%; }
  .wizard > .actions ul{ justify-content:stretch; }
  .wizard > .actions li{ flex:1; }
  .wizard > .actions li a{ width:100% !important; }
}

/* ---- wizard inline validation messages (jQuery Validate) ---- */
.wizard label.error{
  display:block !important; margin:6px 0 0 !important; padding:0 !important;
  font-family:'Inter',sans-serif !important; font-size:12.5px !important; font-weight:600 !important;
  color:#c0392b !important; background:none !important; border:none !important; }
.wizard input.error,.wizard select.error,.wizard textarea.error{
  border-color:#e6b3b3 !important; background:#fdf7f7 !important; }
.wizard input.error:focus,.wizard select.error:focus{
  border-color:#c0392b !important; box-shadow:0 0 0 3px rgba(192,57,43,.12) !important; }

/* =====================================================================
   Steps ON TOP for the .vertical wizard. jQuery Steps floats the rail as
   a left sidebar; this lays it out as a full-width horizontal step bar
   above the content, with a connector rail that fills as you progress.
   ===================================================================== */
.wizard.vertical{ display:block !important; overflow:visible !important; }
.wizard.vertical > .steps{
  float:none !important; display:block !important; width:100% !important;
  margin:0 0 24px !important; padding:0 0 6px !important;
  background:transparent !important; border:none !important;
  border-bottom:1px solid var(--fp-line) !important; border-radius:0 !important;
  box-shadow:none !important; position:static !important; }
.wizard.vertical > .steps ul{ display:flex !important; flex-direction:row !important; flex-wrap:wrap; gap:6px !important; align-items:stretch !important; }
.wizard.vertical > .steps li{
  flex:1 1 180px !important; min-width:150px !important; width:auto !important;
  height:auto !important; padding:0 !important; display:block !important; }
.wizard.vertical > .steps li a{
  padding:10px 6px 14px !important; margin:0 !important;
  background:transparent !important; border-radius:0 !important; }
.wizard.vertical > .steps li a:hover,
.wizard.vertical > .steps li.current a{ background:transparent !important; }
.wizard.vertical > .steps li a::after{ display:block !important; }   /* connector rail */
.wizard.vertical > .content{
  float:none !important; width:100% !important; margin:0 !important; }
.wizard.vertical > .actions{
  float:none !important; width:100% !important; margin:0 !important; }
@media (max-width:640px){
  .wizard.vertical > .steps li{ flex:1 1 100% !important; }
}

/* ---- neutralise jQuery-Steps' own spacing that inflates the rail/actions:
     li gets padding-bottom:40px (for its vertical connector) and .actions
     gets padding-bottom:90px; the flex <li> also stretches to the row height. ---- */
.wizard.vertical > .steps li{ padding:0 !important; }
.wizard > .actions{ padding:20px 0 0 !important; }
.wizard > .actions ul{ align-items:center !important; }
.wizard > .actions li{ height:auto !important; min-height:0 !important; align-self:center !important; }
.wizard > .actions li a{ height:auto !important; min-height:0 !important; line-height:1.2 !important; }
/* form/css/style.css puts margin-top:100px on the action links (it spaced the
   old full-width bar); that inflated the row to ~141px. */
.wizard > .actions ul li a{ margin:0 !important; }

/* the step connector is painted inline by e2mp-questionnaire.js (border-bottom
   on the step link), so suppress the ::after rail to avoid a double line */
.wizard > .steps li a::after{ display:none !important; }

/* =====================================================================
   QA fixes on "Create Your One Pager Profile" (question_form_new /
   question_form_investor). Scoped to the wizard card only.
   ===================================================================== */

/* 1) Remove the leftover VERTICAL divider line. form/css/style.css draws a
      2px x 180px rail via .steps ul::after for the old vertical stepper;
      with the steps now on top it is orphaned and reads as a standing
      divider between the fields and the notes column. */
.wizard > .steps ul::after,
.wizard > .steps ul::before{ display:none !important; content:none !important; }

/* 2+3) Keep the horizontal step line INSIDE the card and aligned with the
      step indicators. A Bootstrap .container nested in the card was pinned
      to width/max-width 1140px with margin-right:-160px, pushing the form
      (and therefore the steps rule) ~128px past the card's padding box.
      Constrain it to the card so the rule spans exactly the step row. */
.w3l-news .grid-view .container{
  width:100% !important; max-width:100% !important;
  margin-left:0 !important; margin-right:0 !important;
  padding-left:0 !important; padding-right:0 !important; }
.w3l-news .grid-view form.signup-form,
.w3l-news .grid-view .wizard{ width:100% !important; max-width:100% !important; }