@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-solid-900.ttf) format("truetype");
}
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-brands-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-brands-400.ttf) format("truetype");
}
@font-face {
  font-family: "FontAwesome";
  unicode-range: u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-regular-400.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-regular-400.ttf) format("truetype");
}
@font-face {
  font-family: "FontAwesome";
  unicode-range: u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a;
  font-display: block;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-v4compatibility.woff2) format("woff2"), url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/webfonts/fa-v4compatibility.ttf) format("truetype");
}
html {
  scroll-padding-top: 10vw;
}
body {
  --col-primary: #21b14c;
  --col-primary-hover: #269f49;
  --col-secondary: #821854;
  --col-tertiary: #eca30c;
  --col-background: #ffffff;
  --col-foreground: #000000;
  --col-border: #dddddd;
  --border-radius: 10px;
  --tag-bg: var(--col-primary);
  --tag-fg: black;
  --page-width: min(1300px, calc(100vw - 480px));
}
body .carer-portal {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  --e-global-color-text: black;
  color: var(--e-global-color-text);
  position: relative;
  /** No, Elementor. Leave my stuff alone. */
}
body .carer-portal .tag-Type {
  --tag-bg: var(--col-secondary);
  --tag-fg: white;
}
body .carer-portal .tag-Category {
  --tag-bg: var(--col-tertiary);
  --tag-fg: white;
}
body .carer-portal .tag-Location {
  --tag-bg: var(--col-primary);
  --tag-fg: white;
}
body .carer-portal::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url(https://cib.dev.silvertoad.co.uk/wp-content/plugins/carer-self-service-plugin/hex-bg.svg);
  background-size: 1000px auto;
  filter: blur(1px);
  opacity: 0.1;
}
body .carer-portal main {
  z-index: 1;
  padding: 1em min(10%, 10em);
}
body .carer-portal > aside .nav-container {
  position: sticky;
  top: 5em;
}
body .carer-portal > aside.right nav {
  background: var(--col-primary);
  color: white;
}
body .carer-portal > aside nav {
  background: var(--col-secondary);
  color: white;
  margin: 1em;
  margin-top: 5em;
  padding: 1em;
  border-radius: 1em;
  box-shadow: 5px 5px 5px 0 #00000020;
}
body .carer-portal > aside nav + nav {
  background: var(--col-tertiary);
  margin-top: 1em;
}
body .carer-portal > aside nav > h3 {
  color: inherit;
  font-size: 1.2em;
}
body .carer-portal > aside nav a {
  color: inherit;
}
body .carer-portal > aside nav ul {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}
body .carer-portal > aside nav ul ul {
  padding: 0 0 0 1em;
}
body .carer-portal > aside nav li {
  border-top: 2px solid #ffffff20;
}
body .carer-portal > aside nav li.has-children > a::before {
  content: "\f0fe";
  font-family: 'FontAwesome';
  font-weight: 900;
  font-weight: 400;
  margin-right: 1em;
}
body .carer-portal > aside nav li.active > a {
  font-weight: bold;
}
body .carer-portal > aside nav li.collapsed ul {
  display: none;
}
body .carer-portal > aside nav li.hidden {
  display: none;
}
body .carer-portal > aside nav li > a {
  display: block;
  padding: 0.5em 0;
}
body .carer-portal > aside nav li > label {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  padding: 0.5em 0;
}
body .carer-portal > aside nav li.collapsible-group {
  border-top: none;
  position: relative;
  --collapsed-height: 20px;
}
body .carer-portal > aside nav li.collapsible-group > ul {
  padding-left: 0;
  overflow: hidden;
  height: var(--collapsed-height);
  opacity: 0;
  transition: height 0.5s 0.5s, opacity 0.5s 0s;
  --expanded-height: auto;
}
body .carer-portal > aside nav li.collapsible-group::before {
  display: flex;
  align-items: center;
  justify-content: center;
  content: '...';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--collapsed-height);
  transition: opacity 0.5s;
}
body .carer-portal > aside nav li.collapsible-group.slides-before::before {
  content: "\f0d8";
  font-family: 'FontAwesome';
  font-weight: 900;
}
body .carer-portal > aside nav li.collapsible-group.slides-after::before {
  content: "\f0d7";
  font-family: 'FontAwesome';
  font-weight: 900;
}
body .carer-portal > aside nav li.collapsible-group:hover::before {
  opacity: 0;
}
body .carer-portal > aside nav li.collapsible-group:hover > ul {
  transition: height 0.5s 0s, opacity 0.5s 0.5s;
  height: var(--expanded-height);
  opacity: 1;
}
body .carer-portal h1,
body .carer-portal h2,
body .carer-portal h3 {
  color: #213430;
}
body .carer-portal > header {
  margin-top: -110px;
  padding-top: 110px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
  color: white;
}
body .carer-portal > header h1,
body .carer-portal > header h2,
body .carer-portal > header h3 {
  color: inherit;
}
body .carer-portal > header > div {
  padding: 2em 1em 0 1em;
}
body .carer-portal > header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url(https://cib.dev.silvertoad.co.uk/wp-content/uploads/2024/11/raised-hands-holding-balloons-2024-10-16-14-24-40-utc-scaled.jpg);
  background-size: cover;
  filter: brightness(0.5);
  mask-size: 100% 100%, 1920px 50px;
  mask-position: 0% -49px, 50% 100%;
  mask-image: linear-gradient(to bottom, black, black), url('https://cib.dev.silvertoad.co.uk/wp-content/plugins/carer-self-service-plugin/wave-border.svg');
  mask-repeat: repeat-x;
}
body .carer-portal > header h2 {
  font-size: 2em;
}
body .carer-portal ul.profile-tags {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  margin-bottom: 2em;
}
body .carer-portal ul.profile-tags li {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal ul.profile-tags li > label {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  flex: 1 0 auto;
}
body .carer-portal ul.profile-tags li > label input {
  display: none;
}
body .carer-portal ul.profile-tags li > label > div {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  background: var(--col-background);
  color: var(--col-foreground);
  box-shadow: 0px 10px 25px 0px rgba(33, 52, 48, 0.08);
  transition: box-shadow 0.5s;
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  border: 1px solid #eee;
  transition: all 0.5s;
  overflow: visible;
  margin-top: 1em;
  position: relative;
  flex: 1 0 auto;
}
body .carer-portal ul.profile-tags li > label > div img {
  transition: filter 0.5s;
  object-fit: cover;
}
body .carer-portal ul.profile-tags li > label > div:hover {
  box-shadow: 0px 10px 30px 0px rgba(33, 52, 48, 0.15);
}
body .carer-portal ul.profile-tags li > label > div:hover img {
  filter: brightness(0.8);
}
body .carer-portal ul.profile-tags li > label > div > img {
  display: none;
}
body .carer-portal ul.profile-tags li > label > div div {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
body .carer-portal ul.profile-tags li > label > div div > span {
  align-self: center;
  margin-top: -1em;
  text-align: center;
  background: var(--tag-bg);
  color: var(--tag-fg);
  padding: 0.5em 1em;
  border-radius: 6em;
  max-width: 80%;
}
body .carer-portal ul.profile-tags li > label > div div > p {
  position: relative;
  padding: 1em 2em 2em 4em;
  margin: 0;
  flex: 1 0 auto;
  line-height: 1.3;
}
body .carer-portal ul.profile-tags li > label > div div > p::before {
  content: "\f05a";
  font-family: 'FontAwesome';
  font-weight: 900;
  position: absolute;
  opacity: 0.2;
  top: 0.25em;
  left: 0.5em;
  font-size: 2em;
}
body .carer-portal ul.profile-tags li > label div > div > span {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}
body .carer-portal ul.profile-tags li > label div > div > span::before {
  content: "\f00c";
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-right: 0;
  width: 0;
  opacity: 0;
  transition: all 0.5s 0.5s, opacity 0.5s 0s;
}
body .carer-portal ul.profile-tags li > label input:checked + div {
  background-color: color-mix(in srgb, var(--tag-bg) 20%, white 80%);
}
body .carer-portal ul.profile-tags li > label input:checked + div > div > span::before {
  width: 1em;
  margin-right: 1em;
  opacity: 1;
  transition: all 0.5s, opacity 0.5s 0.5s;
}
body .carer-portal ul.profile-tags ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal ul.profile-tags ul.main-opts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, max-content));
  gap: 2em;
  align-items: stretch;
  justify-content: center;
}
body .carer-portal ul.profile-tags ul.main-opts > * {
  max-width: 426px;
}
body .carer-portal ul.profile-tags ul.sub-opts > li {
  position: relative;
  padding-left: 5em;
  margin-top: 1em;
  gap: 0;
}
body .carer-portal ul.profile-tags ul.sub-opts > li > span {
  align-self: flex-start;
  font-size: 0.8em;
  background: var(--tag-bg);
  color: var(--tag-fg);
  padding: 0.5em 1em;
  border-radius: 6em;
}
body .carer-portal ul.profile-tags ul.sub-opts > li > h4 {
  font-size: 1.2em;
  padding-bottom: 0.8em;
}
body .carer-portal ul.profile-tags ul.sub-opts > li::before {
  content: "\f3bf";
  font-family: 'FontAwesome';
  font-weight: 900;
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  font-size: 2em;
  rotate: 90deg;
}
body .carer-portal ul.profile-tags ul.sub-opts > li:not(.expanded) {
  display: none;
}
body .carer-portal ul.resource-type-list h3 {
  padding-top: 1em;
  border-bottom: 3px solid var(--col-primary);
}
body .carer-portal ul.resource-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, max-content));
  gap: 1em;
  padding: 0;
  margin-top: 2em;
}
body .carer-portal ul.resource-list > li {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal ul.resource-list > li.hidden {
  display: none;
}
body .carer-portal ul.resource-list > li > a,
body .carer-portal ul.resource-list > li > div {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  background: var(--col-background);
  color: var(--col-foreground);
  box-shadow: 0px 10px 25px 0px rgba(33, 52, 48, 0.08);
  transition: box-shadow 0.5s;
  flex: 1 0 auto;
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal ul.resource-list > li > a img,
body .carer-portal ul.resource-list > li > div img {
  transition: filter 0.5s;
  object-fit: cover;
}
body .carer-portal ul.resource-list > li > a:hover,
body .carer-portal ul.resource-list > li > div:hover {
  box-shadow: 0px 10px 30px 0px rgba(33, 52, 48, 0.15);
}
body .carer-portal ul.resource-list > li > a:hover img,
body .carer-portal ul.resource-list > li > div:hover img {
  filter: brightness(0.8);
}
body .carer-portal ul.resource-list > li > a > a,
body .carer-portal ul.resource-list > li > div > a {
  position: relative;
  padding: 1em;
  overflow: hidden;
}
body .carer-portal ul.resource-list > li > a > a::before,
body .carer-portal ul.resource-list > li > div > a::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--image-url);
  background-size: cover;
  filter: blur(10px) saturate(0.5);
  overflow: hidden;
  opacity: 0.3;
}
body .carer-portal ul.resource-list > li > a > a img,
body .carer-portal ul.resource-list > li > div > a img {
  position: relative;
  aspect-ratio: 4 / 3;
  object-fit: contain !important;
}
body .carer-portal ul.resource-list > li > a > .info,
body .carer-portal ul.resource-list > li > div > .info {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 0;
  padding: 1em;
  position: relative;
}
body .carer-portal ul.resource-list > li > a > .info .button,
body .carer-portal ul.resource-list > li > div > .info .button {
  align-self: flex-end;
}
body .carer-portal ul.resource-list > li > a > .info .meta .tags,
body .carer-portal ul.resource-list > li > div > .info .meta .tags {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: -2em !important;
}
body .carer-portal ul.resource-list > li > a > .info .meta .tags > li,
body .carer-portal ul.resource-list > li > div > .info .meta .tags > li {
  padding: 0.25em 1em;
  font-size: 0.75em !important;
  border-radius: 2em;
  background: var(--tag-bg);
  color: var(--tag-fg);
  white-space: nowrap;
}
body .carer-portal ul.resource-list > li > a > .info .name,
body .carer-portal ul.resource-list > li > div > .info .name {
  font-size: 1.2em;
  margin-top: 0em;
  color: inherit;
  transition: color 0.5s;
}
body .carer-portal ul.resource-list > li > a > .info .name:hover,
body .carer-portal ul.resource-list > li > div > .info .name:hover {
  color: var(--col-primary);
}
body .carer-portal ul.resource-list > li > a > .info .description,
body .carer-portal ul.resource-list > li > div > .info .description {
  flex-grow: 1;
  font-size: 0.8em;
  line-height: 1.2;
}
body .carer-portal ul.resource-list > li > a > .info .venue,
body .carer-portal ul.resource-list > li > div > .info .venue {
  display: block;
  position: relative;
  padding-left: 2em;
  color: var(--col-secondary);
}
body .carer-portal ul.resource-list > li > a > .info .venue::before,
body .carer-portal ul.resource-list > li > div > .info .venue::before {
  content: "\f3c5";
  font-family: 'FontAwesome';
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
}
body .carer-portal ul.resource-list > li > a > .info .time,
body .carer-portal ul.resource-list > li > div > .info .time {
  display: block;
  position: relative;
  padding-left: 2em;
  color: var(--col-primary);
}
body .carer-portal ul.resource-list > li > a > .info .time::before,
body .carer-portal ul.resource-list > li > div > .info .time::before {
  content: "\f017";
  font-family: 'FontAwesome';
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
}
body .carer-portal ul.resource-list > li > a > .info .series-info header,
body .carer-portal ul.resource-list > li > div > .info .series-info header {
  position: relative;
  padding-left: 2em;
}
body .carer-portal ul.resource-list > li > a > .info .series-info header::before,
body .carer-portal ul.resource-list > li > div > .info .series-info header::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "\f0c0";
  font-family: 'FontAwesome';
  font-weight: 900;
}
body .carer-portal ul.resource-list > li > a > .info .series-info header .series-name,
body .carer-portal ul.resource-list > li > div > .info .series-info header .series-name {
  font-weight: bold;
}
body .carer-portal ul.resource-list > li > a > .info .series-info ul,
body .carer-portal ul.resource-list > li > div > .info .series-info ul {
  margin-top: 1em;
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal ul.resource-list > li > a > .info .series-info:not(.expanded) ul,
body .carer-portal ul.resource-list > li > div > .info .series-info:not(.expanded) ul {
  display: none;
}
body .carer-portal button,
body .carer-portal .button {
  background: var(--col-primary);
  color: white;
  transition: all 0.5s;
  border-radius: 2em;
  padding: 1em 2em;
}
body .carer-portal button:hover,
body .carer-portal .button:hover {
  background: var(--col-primary-hover);
}
body .carer-portal .field-group {
  display: flex;
  gap: 1.5em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal .field-group label {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal .field-group .optional-field {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal .field-group .optional-field .inner {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
  padding-left: 2em;
}
body .carer-portal .field-group .optional-field .inner::before {
  content: "\f05a";
  font-family: 'FontAwesome';
  font-weight: 900;
  position: absolute;
  top: 0;
  left: 0;
}
body .carer-portal .field-group .optional-field .toggle:has(input[type="checkbox"]:not(:checked)) + .inner {
  display: none;
}
body .carer-portal .field-group .toggle {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  justify-content: space-between;
}
body .carer-portal .field-group .toggle input[type="checkbox"] {
  display: none;
}
body .carer-portal .field-group .toggle .indicator {
  display: block;
  background: var(--col-secondary);
  width: 4em;
  height: 2em;
  border-radius: 2em;
  position: relative;
  transition: all 0.5s;
}
body .carer-portal .field-group .toggle .indicator::before {
  content: '';
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  width: 1.5em;
  height: 1.5em;
  background: white;
  border-radius: 1.5em;
  translate: 0 0;
  transition: all 0.5s;
}
body .carer-portal .field-group .toggle input[type="checkbox"]:checked + .indicator {
  background: var(--col-primary);
}
body .carer-portal .field-group .toggle input[type="checkbox"]:checked + .indicator::before {
  translate: 2em 0;
}
body .carer-portal .field-group .demographics-fields ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1em;
}
body .carer-portal .field-group .demographics-fields ul > li {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
body .carer-portal .field-group .demographics-fields ul > li > label {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: center;
}
body .carer-portal .field-group .demographics-fields ul > li > label > .field-name {
  min-width: 10em;
}
body .carer-portal .list-field .inner {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
body .carer-portal .list-field .inner li {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}
body .carer-portal .list-field .inner .field-group {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
}
body .carer-portal .list-field [data-action] {
  font-size: smaller;
}
body .carer-portal .list-field [data-action="list-remove"] {
  background: var(--col-secondary);
}
body .carer-portal .list-field [data-action="list-remove"]::before {
  content: "\f00d";
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-right: 1em;
}
body .carer-portal .list-field [data-action="list-add"] {
  background: var(--col-primary);
}
body .carer-portal .list-field [data-action="list-add"]::before {
  content: "\f067";
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-right: 1em;
}
body .carer-portal .download-link {
  display: inline-block;
  border: 1px solid var(--col-primary);
  border-radius: 2em;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  transition: all 0.5s;
}
body .carer-portal .download-link::before {
  content: "\f019";
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-right: 1em;
}
body .carer-portal .download-link:hover {
  background: var(--col-primary);
  color: white;
}
body .carer-portal iframe {
  aspect-ratio: 16 / 9;
}
body .carer-portal .resource-download {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  max-width: min(100%, 20em);
  text-align: center;
}
body .carer-portal .resource-download figure {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
body .carer-portal form button {
  float: right;
}
@media (min-width: 1024px) {
  body .carer-portal {
    display: grid;
    grid-template-columns: 1fr var(--page-width) 1fr;
    grid-template-rows: fit-content fit-content;
  }
  body .carer-portal main {
    grid-column: 2;
    grid-row: 2;
  }
  body .carer-portal > header {
    display: grid;
    grid-row: 1;
    grid-column: 1 / span 3;
    grid-template-columns: subgrid;
  }
  body .carer-portal > header > div {
    grid-column: 2;
    padding: 0;
  }
  body .carer-portal > aside {
    display: grid;
    grid-column: 1;
    grid-row: 1 / span 2;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;
  }
  body .carer-portal > aside > div {
    grid-row: 2;
  }
  body .carer-portal > aside.right {
    grid-column: 3;
  }
}
body .carer-portal ul.rooms {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr max-content max-content max-content;
  list-style-type: none;
  padding: 0;
  margin: 0;
  align-items: center;
  justify-content: center;
}
body .carer-portal ul.rooms h4 {
  margin: 0;
}
body .carer-portal ul.rooms > header,
body .carer-portal ul.rooms > li {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
body .carer-portal ul.rooms > header > a,
body .carer-portal ul.rooms > li > a {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
body .carer-portal ul.rooms > header > a > *,
body .carer-portal ul.rooms > li > a > * {
  border: 1px solid var(--col-secondary);
  padding: 0.5em;
}
body .carer-portal ul.rooms > header > a > *:not(:first-child),
body .carer-portal ul.rooms > li > a > *:not(:first-child) {
  text-align: center;
}
body .carer-portal ul.rooms > header > *:not(a),
body .carer-portal ul.rooms > li > *:not(a) {
  border: 1px solid var(--col-secondary);
  padding: 0.5em;
}
body .carer-portal ul.rooms > header > *:not(a):not(:first-child),
body .carer-portal ul.rooms > li > *:not(a):not(:first-child) {
  text-align: center;
}
body .carer-portal ul.posts {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
body .carer-portal ul.posts > li > * {
  padding: 0.5em;
  border: 1px solid var(--col-secondary);
}
body .carer-portal ul.posts > li > header {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  justify-content: space-between;
  background: #eee;
}
body .carer-portal nav.breadcrumb {
  margin-bottom: 1em;
}
body .carer-portal nav.breadcrumb > ol {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
}
body .carer-portal nav.breadcrumb > ol > li:not(:last-child)::after {
  content: '>';
  padding: 0 0.5em;
}
.feedback-widget {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  transition: translate 0.5s;
  translate: calc(100% - 4em + 20px) 0;
}
.feedback-widget:has(.toggle input:checked) {
  translate: 0 0;
}
.feedback-widget .toggle {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  width: 4em;
  height: 10em;
  background: var(--col-primary);
  padding: 1em;
  border-radius: 1em 0 0 1em;
  color: white;
  transition: all 0.5s;
}
.feedback-widget .toggle input {
  display: none;
}
.feedback-widget .toggle span {
  display: inline-block;
  white-space: nowrap;
  rotate: -90deg;
}
.feedback-widget .toggle:hover {
  height: 20em;
}
.feedback-widget form {
  background: white;
  padding: 1em;
  display: flex;
  flex-direction: column;
  border-radius: 0 1em 1em 0;
  gap: 1em;
  box-shadow: 0 0 5px 0 #00000020;
}
.feedback-widget form ol.rating {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: space-between;
}
.feedback-widget form ol.rating > li label {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  height: 6em;
}
.feedback-widget form ol.rating > li label input {
  display: none;
}
.feedback-widget form ol.rating > li label img {
  max-height: 100%;
  overflow: hidden;
  flex: 0 1 auto;
}
.feedback-widget form ol.rating > li label:has(input:checked) span {
  font-weight: bold;
}
.feedback-widget form ol.rating > li label:has(input:checked) img {
  animation: select-bounce 3s infinite;
}
.feedback-widget form button[type="submit"] {
  align-self: flex-end;
}
.feedback-widget form.submitted button[type="submit"] {
  background: var(--col-tertiary);
}
@keyframes select-bounce {
  0% {
    translate: 0 0;
  }
  10% {
    translate: 0 -10px;
  }
  20% {
    translate: 0 0;
  }
  30% {
    translate: 0 -5px;
  }
  40% {
    translate: 0 0;
  }
  100% {
    translate: 0 0;
  }
}
form.new-post,
form.new-thread {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
form.new-post label,
form.new-thread label {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
form.new-post > button,
form.new-thread > button {
  align-self: flex-end;
}
form.new-post markdown-editor,
form.new-thread markdown-editor {
  border: 1px solid var(--col-border);
  border-radius: 5px;
}
.question-list {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
.question {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
.question > div {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  background: var(--col-background);
  color: var(--col-foreground);
  box-shadow: 0px 10px 25px 0px rgba(33, 52, 48, 0.08);
  transition: box-shadow 0.5s;
  padding: 1em;
}
.question > div img {
  transition: filter 0.5s;
  object-fit: cover;
}
.question > div:hover {
  box-shadow: 0px 10px 30px 0px rgba(33, 52, 48, 0.15);
}
.question > div:hover img {
  filter: brightness(0.8);
}
.question > div > h3 {
  color: var(--col-primary);
  font-size: 1em;
  text-align: center;
}
.question > div > .question {
  display: block;
  text-align: center;
  color: var(--col-secondary);
  font-weight: bold;
  font-size: 1.5em;
}
.question > div > .extra {
  display: block;
  text-align: center;
  font-size: small;
}
.question .answers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1em;
  margin: 0;
  padding: 0;
}
.question .answers > li {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
.question .answers > li > label {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  flex: 1 0 auto;
}
.question .answers > li > label input {
  display: none;
}
.question .answers > li > label > div {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  overflow: hidden;
  background: var(--col-background);
  color: var(--col-foreground);
  box-shadow: 0px 10px 25px 0px rgba(33, 52, 48, 0.08);
  transition: box-shadow 0.5s;
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  border: 1px solid #eee;
  transition: all 0.5s;
  overflow: visible;
  margin-top: 1em;
  position: relative;
  flex: 1 0 auto;
}
.question .answers > li > label > div img {
  transition: filter 0.5s;
  object-fit: cover;
}
.question .answers > li > label > div:hover {
  box-shadow: 0px 10px 30px 0px rgba(33, 52, 48, 0.15);
}
.question .answers > li > label > div:hover img {
  filter: brightness(0.8);
}
.question .answers > li > label > div > img {
  display: none;
}
.question .answers > li > label > div div {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.question .answers > li > label > div div > span {
  align-self: center;
  margin-top: -1em;
  text-align: center;
  background: var(--col-primary);
  color: white;
  padding: 0.5em 1em;
  border-radius: 6em;
  max-width: 80%;
}
.question .answers > li > label > div div > p {
  position: relative;
  padding: 1em 2em 2em 4em;
  margin: 0;
  flex: 1 0 auto;
  line-height: 1.3;
}
.question .answers > li > label > div div > p::before {
  content: "\f05a";
  font-family: 'FontAwesome';
  font-weight: 900;
  position: absolute;
  opacity: 0.2;
  top: 0.25em;
  left: 0.5em;
  font-size: 2em;
}
.question .answers > li > label div > div > span {
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  align-items: center;
}
.question .answers > li > label div > div > span::before {
  content: "\f00c";
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-right: 0;
  width: 0;
  opacity: 0;
  transition: all 0.5s 0.5s, opacity 0.5s 0s;
}
.question .answers > li > label input:checked + div {
  background-color: color-mix(in srgb, var(--col-primary) 20%, white 80%);
}
.question .answers > li > label input:checked + div > div > span::before {
  width: 1em;
  margin-right: 1em;
  opacity: 1;
  transition: all 0.5s, opacity 0.5s 0.5s;
}
.question .answers > li > h3 {
  color: var(--col-primary);
  margin-top: 0;
}
.question .answers > li > p {
  flex-grow: 1;
  margin-bottom: 0;
}
.question .answers > li > button {
  align-self: flex-end;
  margin-top: auto;
}
.question .answers > li .answer-content {
  flex: 1 0 auto;
}
.question .answers > li .selected-text {
  flex: 0 0 auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s 0.5s;
  background: #ddd;
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: column;
}
.question .answers > li .selected-text > p {
  background: color-mix(in srgb, var(--col-tertiary) 20%, white 80%);
  color: var(--col-tertiary);
  opacity: 0;
  transition: opacity 0.5s 0s;
}
.question .answers > li .selected-text > p::before {
  content: "\f057";
  font-family: 'FontAwesome';
  font-weight: 900;
}
.question .answers > li.correct .selected-text > p {
  background: color-mix(in srgb, var(--col-primary) 20%, white 80%);
  color: var(--col-primary);
}
.question .answers > li.correct .selected-text > p::before {
  content: "\f058";
  font-family: 'FontAwesome';
  font-weight: 900;
}
.course-nav {
  display: flex;
  gap: 1em;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1em;
}
.course-nav .slide-nav-prev::before {
  content: '\f0d9';
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-right: 0.5em;
}
.course-nav .slide-nav-next::after {
  content: '\f0da';
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-left: 0.5em;
}
.show-answers .question[data-status] .score {
  align-self: flex-end;
  color: red;
  font-weight: bold;
}
.show-answers .question[data-status] .score::before {
  content: "\f057";
  font-family: 'FontAwesome';
  font-weight: 900;
  margin-right: 0.5em;
}
.show-answers .question[data-status][data-status="correct"] .score {
  color: var(--col-primary);
}
.show-answers .question[data-status][data-status="correct"] .score::before {
  content: "\f058";
  font-family: 'FontAwesome';
  font-weight: 900;
}
.show-answers .answers li input:checked + div .selected-text {
  border-top: 1px solid #888;
  transition: max-height 0.5s 0s;
  max-height: 20em;
}
.show-answers .answers li input:checked + div .selected-text > p {
  opacity: 1;
  transition: opacity 0.5s 0.5s;
}
.vector-slide svg {
  max-width: 100%;
}
[data-action="check-answers"]:not(.all-correct) .when-correct {
  display: none;
}
[data-action="check-answers"].all-correct .check {
  display: none;
}