/* ===== quote-members-flat =====
   The cover-type choice and the member selectors used to sit inside a grey
   bordered wrapper. The wrapper said nothing the fields did not already say,
   so the selectors now sit straight on the form. */
#quote-form .family-row.family-overview.sub-container,
#quote-form #individualFamilyDetails .family-overview.sub-container,
#quote-form #individualFamilyDetails .family-overview.sub-container.children-only-layout,
#quote-form .quote-step-cover .family-row.sub-container,
#quote-form .quote-step-cover .cover-type-card{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
/* The fields keep their own white fill, so they still read as inputs. */
#quote-form .family-row.family-overview.sub-container .family-item,
#quote-form .family-row.family-overview.sub-container .children-count-item,
#quote-form .family-row.family-overview.sub-container select{
  background:#fff!important;
}
/* ===== members to the edges =====
   The member selectors now fill their columns, so the row's outer edges line up
   with the cover-type selectors above them instead of stopping short. */
#quote-form #individualFamilyDetails .family-overview.sub-container .family-item,
#quote-form #individualFamilyDetails .family-overview.sub-container .children-count-item,
#quote-form #individualFamilyDetails .family-overview.sub-container .family-age-pair,
#quote-form #individualFamilyDetails .family-overview.sub-container .family-item.extra-spouse-item{
  padding:0!important;
  margin:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}
#quote-form #individualFamilyDetails .family-overview.sub-container .family-item select,
#quote-form #individualFamilyDetails .family-overview.sub-container .children-count-item select,
#quote-form #individualFamilyDetails .family-overview.sub-container select{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  flex:1 1 auto!important;
  box-sizing:border-box!important;
}
/* Equal columns, so the four member selectors read as one row of four. */
@media (min-width: 1025px){
  #quote-form #individualFamilyDetails .family-overview:not(.children-only-layout){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:.6rem!important;
  }
}
@media (max-width: 1024px){
  #quote-form #individualFamilyDetails .family-overview:not(.children-only-layout){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:.5rem!important;
    row-gap:.5rem!important;
  }
}

/* ===== a chosen member selector wears the light green =====
   The ages and the two children counts are the first fields the client fills
   in, so once a real number sits in one of them it takes the same light-green
   fill as the chosen cover limits and the green text of every other chosen
   field. The white fill above is the resting state and is set at a heavier
   weight than the shared .has-selection rule, so the chosen fill has to be
   spelled out here with matching weight - otherwise the field stays white.
   The engine only adds .has-selection once the field holds a real value, so
   an untouched selector keeps its white fill and its golden "next step" cue. */
/* The wide-screen layout pins the row's border with a three-class selector, so
   the chosen fill states the form root twice to outrank it on every breakpoint. */
#quote-form#quote-form #individualFamilyDetails select.has-selection,
#quote-form#quote-form #individualFamilyDetails .family-item select.has-selection,
#quote-form#quote-form #individualFamilyDetails .children-count-item select.has-selection,
#quote-form#quote-form #childAgesContainer select.has-selection,
#quote-form#quote-form #childAgesContainer .family-item select.has-selection{
  background:#e4f4f3!important;
  border-color:#a5d4d6!important;
  color:#01545f!important;
  font-weight:800!important;
}
/* Focus keeps the green rather than flashing back to the resting white. */
#quote-form#quote-form #individualFamilyDetails select.has-selection:focus,
#quote-form#quote-form #individualFamilyDetails .family-item select.has-selection:focus,
#quote-form#quote-form #individualFamilyDetails .children-count-item select.has-selection:focus,
#quote-form#quote-form #childAgesContainer select.has-selection:focus{
  background:#e4f4f3!important;
  border-color:#7cc0c4!important;
  box-shadow:0 0 0 3px rgba(1,122,120,.14)!important;
}