/* UK subject directory pages (/english.asp and the other 516 /<subject>.asp pages,
   served from /rewrites/subjects/). Loaded only there, by the UK block in
   includes/code-css.inc.

   This file restyles the page's existing markup only. The text, links, headings
   and their order are unchanged, because these pages matter for search. The old
   rules come from tutorhunt.css, components.css, previewpanels.css (linked after
   this file) and inline styles, so rules here start from an id and some need
   !important to win. */

#searchpanelhome2, #maincontentouter, body > #siterating, .mm-page > #siterating
{
  --sd-navy: #1f3350;
  --sd-ink: #2a3a52;
  --sd-slate: #56657b;
  --sd-blue: #3a68ae;
  --sd-tint: #f0f4fb;
  --sd-line: #dbe4f1;
  --sd-lime: #a9d622;
  --sd-lime-dark: #98c31a;
  /* Hero and banner colours: the brand blue chosen by the owner on 2026-11-08. */
  --sd-hero-bg: radial-gradient(760px 380px at 92% 0%, rgba(160, 195, 245, .45), transparent 62%), linear-gradient(110deg, #3f6eb6 0%, #4a7bc6 55%, #6b97dd 100%);
  --sd-hero-ink: #fff;
  --sd-crumb: #fff;
  --sd-crumb-sep: rgba(255, 255, 255, .6);
  --sd-search-shadow: 0 22px 50px rgba(20, 45, 90, .25);
  --sd-search-border: transparent;
  --sd-banner-bg: radial-gradient(420px 200px at 100% 0%, rgba(160, 195, 245, .45), transparent 65%), linear-gradient(110deg, #3f6eb6 0%, #4a7bc6 100%);
  --sd-banner-ink: #fff;
  font-family: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Hero: breadcrumb, H1 and the search box ---------- */
body #searchpanelhome2
{
  top: 0;
  padding: 0 0 44px;
  border-bottom: 0;
  background: var(--sd-hero-bg);
}

#searchpanelhome2 #searchpanelcontent
{
  box-sizing: border-box;
  width: auto;
  max-width: 1170px;
  padding: 18px 15px 0;
}

#searchpanelhome2 #searchpanelcontent p#location
{
  top: 0;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px;
}

#searchpanelhome2 #searchpanelcontent p#location a
{
  display: inline;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--sd-crumb);
  text-decoration: none;
}

#searchpanelhome2 #searchpanelcontent p#location a:hover
{
  color: var(--sd-crumb);
  text-decoration: underline;
}

#searchpanelhome2 #searchpanelcontent p#location a + a:before
{
  content: "/";
  display: inline-block;
  margin: 0 9px;
  color: var(--sd-crumb-sep);
}

body #searchpanelhome2 h1
{
  margin: 14px 0 24px;
  padding: 0;
  color: var(--sd-hero-ink);
  font-family: inherit;
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.08;
}

#searchpanelhome2 .thesearch
{
  margin: 0;
  padding: 24px 26px 26px;
  border: 1px solid var(--sd-search-border);
  border-radius: 22px;
  box-shadow: var(--sd-search-shadow);
}

#searchpanelhome2 .thesearch form
{
  margin: 0;
  padding: 0;
}

#searchpanelhome2 .thesearch form > p:empty
{
  display: none;
}

/* The four points with their emoji */
#searchpanelhome2 #directoryintro
{
  display: grid;
  gap: 8px 28px;
  margin: 0 0 20px !important;
}

#searchpanelhome2 #directoryintro li
{
  padding: 0;
  color: var(--sd-ink);
  font-size: 16px;
  line-height: 1.45;
}

#searchpanelhome2 #directoryintro h2
{
  color: var(--sd-ink);
  font-family: inherit;
  font-weight: 400;
}

#searchpanelhome2 #directoryintro li strong
{
  color: var(--sd-navy);
  font-weight: 800;
}

/* Subject, level and the button */
#searchpanelhome2 .thesearch .searchrow
{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

#searchpanelhome2 .thesearch .searchcol2
{
  flex: 1 1 100% !important;
  width: auto;
  margin: 0;
  padding: 0;
}

#searchpanelhome2 .thesearch .input, #searchpanelhome2 .thesearch .select
{
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid #c6d3e5;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: none;
  color: var(--sd-ink);
  font-family: inherit;
  font-size: 17px;
}

#searchpanelhome2 .thesearch .select
{
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f3350' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  background-size: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#searchpanelhome2 .thesearch .input:focus, #searchpanelhome2 .thesearch .select:focus
{
  border-color: var(--sd-blue);
  outline: none;
  box-shadow: 0 0 0 4px rgba(58, 104, 174, .16);
}

#searchpanelhome2 .thesearch .btnsuccess
{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 54px;
  margin: 0 !important;
  padding: 0 28px !important;
  border-radius: 999px;
  background-color: var(--sd-lime) !important;
  color: var(--sd-navy);
  font-size: 17px;
  text-transform: none;
  cursor: pointer;
  transition: background-color .15s;
}

#searchpanelhome2 .thesearch .btnsuccess:hover
{
  background-color: var(--sd-lime-dark) !important;
}

#searchpanelhome2 .thesearch .btnsuccess strong
{
  color: var(--sd-navy);
  font-weight: 800;
}

#searchpanelhome2 .thesearch .btnsuccess .icon
{
  width: 18px;
  height: 18px;
  fill: var(--sd-navy);
}

body #maincontentouter
{
  padding: 0 0 64px;
  background: var(--sd-tint);
}

/* ---------- Stats strip ---------- */
#maincontentouter #reviewsbanner
{
  top: 0;
  height: auto;
  padding: 0;
  border-bottom: 1px solid var(--sd-line);
  background: #fff;
  color: var(--sd-navy);
  font-size: 20px;
  font-weight: 700;
}

#maincontentouter #reviewsbannerinner
{
  box-sizing: border-box;
  max-width: 1170px;
  min-height: 104px;
  padding: 12px 15px;
  justify-content: space-between;
}

#maincontentouter #reviewsbanner .reviewssnippet, #maincontentouter #reviewsbanner .reviewssnippettrust
{
  text-align: center;
}

/* Stars, count and caption share one centre line, in the middle of the page.
   - the stars are a block image, so text-align does not reach them;
   - the count's box is narrower than the one around it, so that one centres it;
   - the two side notes get equal room, or the middle sits off-centre by half their
     difference (the first has an inline width, hence the !important). */
#maincontentouter #reviewsbanner .reviewssnippet
{
  justify-content: center;
}

#maincontentouter #reviewsbanner .reviewssnippetstars
{
  margin-right: auto;
  margin-left: auto;
}

#maincontentouter #reviewsbannerinner > .mobno
{
  flex: 1 1 0;
  width: auto !important;
}

#maincontentouter #reviewsbannerinner > .reviewssnippet ~ .mobno
{
  text-align: right;
}

#maincontentouter #reviewsbanner .reviewsstarrating
{
  font-size: 22px;
  font-weight: 700;
}

#maincontentouter #reviewsbanner small
{
  color: var(--sd-slate);
  font-size: 13px;
  font-weight: 400;
}

/* ---------- Four reasons ---------- */
#maincontentouter .how.section
{
  padding: 48px 0;
  background: var(--sd-tint);
}

#maincontentouter .how .howitems
{
  display: grid;
  gap: 18px;
  margin: 0;
}

#maincontentouter .how .howitem
{
  width: auto;
  max-width: none;
  margin: 0;
  padding: 24px 22px;
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  background: #fff;
  text-align: left;
}

#maincontentouter .how .howitem .icon
{
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
}

#maincontentouter .how .howitem h3
{
  margin: 0 0 6px;
  color: var(--sd-navy);
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

#maincontentouter .how .howitem p
{
  margin: 0;
  color: var(--sd-slate);
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- "Find your perfect tutor" banner ---------- */
#maincontentouter .searchbanner
{
  margin: 0;
  padding: 0 0 8px;
  background: var(--sd-tint);
  font-size: 18px;
}

#maincontentouter .searchbanner .container > div
{
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  box-sizing: border-box;
  margin-top: 0 !important;
  padding: 26px 30px !important;
  border-radius: 20px !important;
  background: var(--sd-banner-bg) !important;
  color: var(--sd-banner-ink) !important;
  font-weight: 600;
  line-height: 1.5 !important;
}

#maincontentouter .searchbanner .container > div > div
{
  flex: 1 1 320px;
  width: auto !important;
}

#maincontentouter .searchbanner .container > div > div + div
{
  flex: 0 0 auto;
}

#maincontentouter .searchbanner .btnsuccess
{
  padding: 14px 28px;
  border-radius: 999px;
  color: var(--sd-navy);
  font-size: 16px;
  font-weight: 800;
  text-transform: none;
}

#maincontentouter .searchbanner .btnsuccess:hover
{
  color: var(--sd-navy) !important;
}

/* ---------- Results ---------- */
#maincontentouter #maincontent
{
  box-sizing: border-box;
  max-width: 1170px;
  margin: 0 auto;
  border-top: 0;
  padding: 28px 15px 0;
  color: var(--sd-ink);
}

#maincontentouter #maincontent > p:first-child
{
  max-width: 900px;
  color: var(--sd-slate);
  font-size: 16px;
  line-height: 1.65;
}

#maincontentouter #membertotal
{
  margin: 22px 0 14px;
  padding: 0;
  color: var(--sd-navy);
  font-family: inherit;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: none;
}

#maincontentouter #membertotal strong
{
  color: var(--sd-navy);
  font-weight: 800;
}

/* Tutor cards */
#maincontent .usercard2
{
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  column-gap: 24px;
  overflow: visible;
  box-sizing: border-box;
  height: auto;
  margin: 0 0 16px;
  padding: 22px;
  border: 1px solid var(--sd-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(31, 51, 80, .05);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

#maincontent .usercard2:hover
{
  border-color: #b9cbe6;
  box-shadow: 0 14px 30px rgba(31, 51, 80, .12);
  transform: translateY(-2px);
}

#maincontent .usercard2 .usercard2img
{
  width: auto;
  margin: 0;
  float: none;
}

#maincontent .usercard2 .usercard2img img
{
  display: block;
  width: 132px;
  max-width: none;
  height: 132px;
  border-radius: 16px;
  object-fit: cover;
}

#maincontent .usercard2 .usercardmaincontentcontainer
{
  min-width: 0;
}

#maincontent .usercard2 .usercardmaincontent
{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  width: auto;
  margin: 0;
  float: none;
}

#maincontent .usercard2 .usercard2container
{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  grid-column: 1;
  grid-row: 1;
}

#maincontent .usercard2 .usercard2name
{
  font-size: 22px;
}

#maincontent .usercard2 .usercardname a
{
  color: var(--sd-navy) !important;
  font-weight: 800;
  text-decoration: none;
}

#maincontent .usercard2 .usercard2rating
{
  top: 0;
  margin: 0;
  color: var(--sd-slate);
  font-size: 14px;
}

#maincontent .usercard2 .usercard2rating strong
{
  color: var(--sd-navy);
}

#maincontent .usercard2 .usercard2rating span
{
  color: var(--sd-slate) !important;
}

#maincontent .usercard2 .usercard2title
{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 6px;
  color: var(--sd-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

#maincontent .usercard2 .usercard2rate
{
  grid-column: 2;
  grid-row: 1;
  top: 0;
  margin: 0;
  float: none;
  white-space: nowrap;
}

#maincontent .usercard2 .usercard2rate .usercard2ratevalue
{
  color: var(--sd-navy);
  font-size: 22px;
  font-weight: 800;
}

#maincontent .usercard2 .usercard2rate .usercard2ratelabel
{
  color: var(--sd-slate);
}

#maincontent .usercard2 .usercard2break
{
  display: none;
}

#maincontent .usercard2 .usercardmaincontent2
{
  float: none;
}

#maincontent .usercard2 .usercard2desc
{
  margin-top: 10px;
  color: var(--sd-slate);
  font-size: 15px;
  line-height: 1.55;
}

#maincontent .usercard2 .usercard2location
{
  margin-top: 10px;
  color: var(--sd-slate);
  font-size: 14px;
}

#maincontent .usercard2 .usercard2location a
{
  color: var(--sd-blue);
}

#maincontent .usercard2 .usercard2location svg
{
  top: -1px;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  fill: var(--sd-slate);
}

#maincontent .usercard2 .usercard2meta
{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

#maincontent .usercard2 .usercard2metaitem
{
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px 12px;
  float: none;
  border-radius: 999px;
  background: var(--sd-tint);
  color: var(--sd-ink);
  font-size: 13px;
  font-weight: 600;
}

#maincontent .usercard2 .usercard2metaitem .usercard2metalabel, #maincontent .usercard2 .usercard2metaitem .usercard2metavalue
{
  top: 0;
}

#maincontent .usercard2 .usercard2metaitem .usercard2metavalue
{
  margin-left: 4px;
}

#maincontent .usercard2 .usercard2metaitem svg
{
  top: -1px;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  fill: var(--sd-blue);
}

#maincontent .usercard2 .metaitemhighlight
{
  background: #edf6db;
  color: #3d5c0a;
}

#maincontent .usercard2 .metaitemhighlight svg
{
  fill: #4d7a00;
}

/* ---------- Feedback from previous students ---------- */
#maincontent > .card
{
  margin: 40px 0 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#maincontent > .card .cardheader
{
  height: auto;
  margin: 0 0 16px;
  padding: 0;
}

#maincontent > .card h2, #maincontent > .card h4
{
  margin: 0;
  color: var(--sd-navy);
  font-family: inherit;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

#maincontent > .card .cardcontent
{
  overflow: visible;
  padding: 0;
  column-gap: 16px;
}

#maincontent > .card .cardcontent > div
{
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 16px !important;
  break-inside: avoid;
  padding: 20px 22px 16px;
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  background: #fff;
  color: var(--sd-ink);
  font-size: 15px;
  line-height: 1.6 !important;
}

#maincontent > .card .cardcontent > div > div
{
  margin: 12px 0 0 !important;
  color: var(--sd-slate);
  font-size: 13px !important;
  font-style: normal !important;
}

#maincontent > .card .cardcontent > div > div strong
{
  color: var(--sd-navy);
}

#maincontent > .card .cardcontent > div > div img
{
  width: 14px !important;
  margin-right: 1px;
  vertical-align: -1px;
}

/* ---------- By location and by level ---------- */
#maincontent #nearbys, #maincontent #nearbystop2
{
  margin: 40px 0 0;
  color: var(--sd-navy);
  font-size: 15px !important;
  line-height: 1.5;
}

#maincontent #nearbys #nearbys
{
  margin-top: 22px;
}

#maincontent #nearbys h2, #maincontent #nearbystop2 h2
{
  margin: 0 0 4px;
  padding: 0;
  color: var(--sd-navy);
  font-family: inherit;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.25;
  text-transform: none;
}

#maincontent #nearbys strong
{
  margin-right: 2px;
  color: var(--sd-navy);
  font-size: 17px;
  font-weight: 800;
}

#maincontent #nearbys a, #maincontent #nearbystop2 a
{
  margin: 8px 8px 0 0;
  padding: 7px 14px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sd-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}

#maincontent #nearbys a:hover, #maincontent #nearbystop2 a:hover
{
  border-color: var(--sd-blue);
  background: #fff;
  color: var(--sd-blue);
}

/* Subject-location pages (/subjects/<s>/locations/<area>/): the results start with
   the "Filter by Subject" links, then the intro and a page-number bar */
#maincontent > #nearbys:first-child
{
  margin: 0 0 28px;
}

#maincontentouter #maincontent > #nearbys:first-child + p
{
  max-width: 900px;
  margin: 0 0 4px !important;
  color: var(--sd-slate);
  font-size: 16px;
  line-height: 1.65;
}

#maincontent > #nearbys:first-child + p strong
{
  color: var(--sd-ink);
}

#maincontent .pagenums
{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  float: none;
  background: none;
  list-style: none;
  text-align: left;
}

#maincontent .pagenums li, #maincontent .pagenums li:hover, #maincontent .pagenums li.currentpage:hover
{
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  float: none;
  background: none;
  list-style: none;
}

#maincontent .pagenums a
{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: #fff;
  color: var(--sd-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

#maincontent .pagenums .currentpage a
{
  border-color: var(--sd-blue);
  background: var(--sd-blue);
  color: #fff;
}

/* Subject text from the database (directorypagetext), after the links */
#maincontent #nearbys ~ p
{
  max-width: 900px;
  margin: 14px 0 0;
  color: var(--sd-ink);
  font-size: 16px;
  line-height: 1.7;
}

#maincontent #nearbys + p
{
  margin-top: 36px;
}

/* ---------- Feefo strip and the subject's own text ---------- */
#maincontentouter #siterating, body > #siterating, .mm-page > #siterating
{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 28px;
  box-sizing: border-box;
  width: auto;
  max-width: 1140px;
  margin: 40px 15px 0;
  padding: 22px 24px;
  border: 1px solid var(--sd-line);
  border-radius: 20px;
  background: #fff;
  color: var(--sd-ink);
}

#maincontentouter #siterating .aggregaterating, body > #siterating .aggregaterating, .mm-page > #siterating .aggregaterating
{
  width: auto;
  float: none;
}

#maincontentouter #siterating .latestreview, body > #siterating .latestreview, .mm-page > #siterating .latestreview
{
  margin: 0;
  color: var(--sd-ink);
  font-size: 17px;
}

#maincontentouter #siterating .latestreviewby, body > #siterating .latestreviewby, .mm-page > #siterating .latestreviewby
{
  color: var(--sd-navy);
  font-weight: 700;
}

#maincontentouter #siterating .latestreviewby small, body > #siterating .latestreviewby small, .mm-page > #siterating .latestreviewby small
{
  color: var(--sd-slate);
  font-weight: 400;
}

#maincontentouter #siterating .allotherreviews a, body > #siterating .allotherreviews a, .mm-page > #siterating .allotherreviews a
{
  color: var(--sd-blue);
  font-weight: 700;
}

#maincontentouter #subjectintro
{
  box-sizing: border-box;
  max-width: 1140px;
  margin: 20px 15px 0;
  padding: 26px 28px;
  border: 1px solid var(--sd-line);
  border-radius: 20px;
  background: #fff;
  color: var(--sd-ink);
  font-size: 17px;
  line-height: 1.7;
}

#maincontentouter #subjectintro strong
{
  color: var(--sd-navy);
}

/* ---------- Wider screens ---------- */
@media (min-width: 600px)
{
  #searchpanelhome2 #directoryintro
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #maincontentouter .how .howitems
  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #maincontent > .card .cardcontent
  {
    column-count: 2;
  }
}

@media (min-width: 768px)
{
  #searchpanelhome2 .thesearch .searchcol2
  {
    flex: 0 0 auto !important;
  }

  #searchpanelhome2 .thesearch .searchcol2:first-child
  {
    flex: 1 1 280px !important;
  }

  #searchpanelhome2 .thesearch .searchcol2:nth-child(2)
  {
    flex: 0 0 200px !important;
  }

  #maincontentouter #siterating, body > #siterating, .mm-page > #siterating
  {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  #maincontentouter #siterating > div:first-child, body > #siterating > div:first-child, .mm-page > #siterating > div:first-child
  {
    grid-row: 1 / span 4;
    align-self: center;
  }
}

@media (min-width: 1000px)
{
  #maincontentouter .how .howitems
  {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1170px)
{
  #maincontentouter #siterating, #maincontentouter #subjectintro
  {
    margin-right: auto;
    margin-left: auto;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 767px)
{
  #searchpanelhome2
  {
    padding-bottom: 28px;
  }

  #searchpanelhome2 .thesearch
  {
    padding: 18px 16px 18px;
    border-radius: 18px;
  }

  #searchpanelhome2 #directoryintro li
  {
    font-size: 15px;
  }

  #maincontentouter #reviewsbanner
  {
    font-size: 17px;
  }

  #maincontentouter #reviewsbannerinner
  {
    justify-content: center;
    min-height: 0;
    padding: 18px 15px;
  }

  #maincontentouter .how.section
  {
    padding: 28px 0;
  }

  #maincontentouter .how .howitem
  {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 14px;
    padding: 18px;
  }

  #maincontentouter .how .howitem .icon
  {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    margin: 0;
  }

  #maincontentouter .searchbanner .container > div
  {
    padding: 22px !important;
    font-size: 16px;
  }

  #maincontentouter .searchbanner .container > div > div + div
  {
    flex: 1 1 100%;
    text-align: left !important;
  }

  /* Card: photo beside the name and price, the rest full width below */
  #maincontent .usercard2
  {
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px;
  }

  #maincontent .usercard2 .usercardmaincontentcontainer
  {
    display: contents;
  }

  #maincontent .usercard2 .usercard2img img
  {
    width: 76px;
    height: 76px;
    border-radius: 14px;
  }

  #maincontent .usercard2 .usercardmaincontent
  {
    grid-template-columns: minmax(0, 1fr);
  }

  #maincontent .usercard2 .usercard2name
  {
    font-size: 19px;
  }

  #maincontent .usercard2 .usercard2rate
  {
    grid-column: 1;
    grid-row: 3;
    margin-top: 6px;
  }

  #maincontent .usercard2 .usercard2rate .usercard2ratevalue
  {
    font-size: 19px;
  }

  #maincontent .usercard2 .usercardmaincontent2
  {
    grid-column: 1 / -1;
  }

  #maincontent > .card h2, #maincontent > .card h4, #maincontentouter #membertotal, #maincontent #nearbys h2
  {
    font-size: 22px;
  }

  #maincontentouter #subjectintro
  {
    padding: 20px;
    font-size: 16px;
  }
}

/* ---------- Area pages (/locations/<area>/, locations/pick-location.asp) ---------- */
/* "Filter by Subject" sits in the hero, under the search box: white on the blue */
#searchpanelhome2 #nearbystop
{
  margin: 22px 0 0;
  color: var(--sd-hero-ink);
  font-size: 14px !important;
  line-height: 1.5;
}

#searchpanelhome2 #nearbystop h2
{
  margin: 0 0 2px;
  padding: 0;
  color: var(--sd-hero-ink);
  font-family: inherit;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  text-transform: none;
}

#searchpanelhome2 #nearbystop a
{
  display: inline-block;
  margin: 8px 8px 0 0;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: var(--sd-hero-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}

#searchpanelhome2 #nearbystop a:hover
{
  border-color: #fff;
  background: #fff;
  color: var(--sd-blue);
}

#searchpanelhome2 #nearbystop a:focus-visible
{
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* The Feefo strip: here it is outside the page column, so it centres itself */
body > #siterating, .mm-page > #siterating
{
  width: calc(100% - 30px);
  margin: 40px auto 48px;
  font-family: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

@media (max-width: 767px)
{
  #searchpanelhome2 #nearbystop a
  {
    margin: 6px 6px 0 0;
    padding: 5px 10px;
    font-size: 13px;
  }
}