/*------------------------------------*\
    #Apollo: advanced styles for browsers selected by mustard cut
\*------------------------------------*/
/*------------------------------------*\
    #Settings
\*------------------------------------*/
/*------------------------------------*\
    #Breakpoints

    The measurements presented here are for guidance only
    and should be updated to reflect the design/content needs.
\*------------------------------------*/
/*------------------------------------*\
    #Colors
\*------------------------------------*/
/**
Base colors that can be used when prototyping. Taken from http://clrs.cc/

1. We ideally avoid using pure white on pure black, because the contrast is
so great that it creates the illusion that text is vibrating on screen.
 */
/* 1 */
/* 1 */
/**
Theme colors.
 */
/**
Sass variables.
 */
/**
Social media colours that might be useful.
See: https://brandcolors.net/
 */
/*------------------------------------*\
    #Typesetting
\*------------------------------------*/
/**
Use https://www.cssfontstack.com/ and https://meowni.ca/font-style-matcher/ to pick
system fonts that are reasonably close to any web fonts needed for the project.

This improves performance, avoids Flash Of Invisible Text (FOIT) and minimises
Flash of Unstyled Content (FOUC) - see https://helenvholmes.com/writing/type-is-your-right/

Be sure to include fonts for both Mac OS and Windows. Use quote marks around
fonts with white space in their name.

When Font Face Observer has detected that the @font-face files are loaded, then we
can safely use the web fonts instead of the system fonts.
 */
/*------------------------------------*\
    #Functions
\*------------------------------------*/
/*------------------------------------*\
    #Maths functions
\*------------------------------------*/
/**
 #Random number
 http://xkcd.com/221/
 */
/**
 #Power function
 https://css-tricks.com/snippets/sass/power-function/
 */
/**
 #Square root function
 */
/*------------------------------------*\
    #CSS unit functions
\*------------------------------------*/
/**
 #em
 */
/**
 #rem
 */
/**
 #px
 */
/**
 #Return a number without a unit
 */
/**
 #Remove any unit present to return a unitless number
 */
/*------------------------------------*\
    #Mixins
\*------------------------------------*/
/*------------------------------------*\
    #Font sizes
\*------------------------------------*/
/*------------------------------------*\
    #Media query
\*------------------------------------*/
/*------------------------------------*\
    #Stack
\*------------------------------------*/
/**
This mixin allows us to add vertical spacing between a container's direct children,
much like the 'axiomatic owl' technique but limited to specific use cases.

By applying Flexbox to the parent container, we can use auto margin on a specific
child element. This way, we can choose to group elements inside the stack to the
top/bottom of the vertical space, which is useful for card-like components.

Use with a specific measure, or without for the default measure, e.g.

main {
	@include stack(4rem);
}

article {
	@include stack;
}
 */
/*------------------------------------*\
    #Base

    Repeated to allow for extending placeholders
\*------------------------------------*/
/*------------------------------------*\
    #Hide and show items inclusively

    See https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
\*------------------------------------*/
/*
 * Hide from everybody and remove from the document flow, using the hidden
 * attribute.
 *
 * Use if a component should remain hidden regardless of CSS being
 * available or not (the style below provides support for legacy browsers).
 */
[hidden] {
  display: none !important;
}

/*
 * Hide from everybody and remove from the document flow, using the %hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a component requires a basic show and hide interaction, and the
 * content should become available were CSS to fail.
 */
/*
 * Hide from everybody while maintaining layout, using the %invisible
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 *
 * Use if a more complex transition is required, like when transitioning an
 * off-screen navigation into the viewport. Best paired with other CSS
 * properties that negate its position in the DOM e.g. `position: absolute;`
 */
/*
 * Hide visually only - remains available to Assistive Technology -
 * using the %visually-hidden placeholder (extend the placeholder with
 * Sass to avoid it appearing repeatedly in your markup).
 */
[data-trigger=account-menu] .sr-only, .visuallyhidden:not(:focus):not(:active) {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/*
 *The :not portions of the following selector allow a means for any
 * focusable element to become visible when focused/active by a user.
 */
/*
 * Make sure that the siblings of hidden components do not cause the hidden
 * component to take up any vertical space.
 */
.visuallyhidden + * {
  margin-top: 0 !important;
}

br {
  margin-top: 0;
}

/*
 * Restore an element that has been visually hidden, using the %visually-hidden
 * placeholder (extend the placeholder with Sass to avoid it appearing
 * repeatedly in your markup).
 */
/*------------------------------------*\
    #Advanced components

    For JS enhancements
\*------------------------------------*/
/*------------------------------------*\
    #Global header advanced
\*------------------------------------*/
[data-trigger=account-menu] {
  border-radius: 0;
  margin-left: auto;
  padding: 0.4375rem;
  position: relative;
}
[data-trigger=account-menu]::before {
  background-color: #005a9c;
  bottom: -0.125rem;
  content: "";
  display: none;
  height: 0.1875rem;
  left: 0;
  position: absolute;
  width: 100%;
}
[data-trigger=account-menu].js-has-msg::after {
  background-color: #e93737;
  border: solid 3px #fff;
  border-radius: 50%;
  content: "";
  height: 15px;
  position: absolute;
  right: 3px;
  top: 3px;
  width: 15px;
}
@media screen and (min-width: 70em) {
  [data-trigger=account-menu] {
    margin-inline-start: auto;
    padding: 0.5rem 0.1875rem 0.3125rem 0.1875rem;
  }
  [data-trigger=account-menu]:hover::before {
    display: block;
  }
  [data-trigger=account-menu]:focus {
    background-color: #f9dc4a;
    border-color: #000;
  }
  [data-trigger=account-menu]:focus:hover::before {
    display: none;
  }
}
[data-trigger=account-menu][aria-expanded=false] + .account-menu {
  display: none;
}
[data-trigger=account-menu] * {
  pointer-events: none;
}
[data-trigger=account-menu] .sr-only {
  font-size: 0.875rem;
}
@media screen and (min-width: 70em) {
  [data-trigger=account-menu] .sr-only {
    border: initial;
    clip: auto;
    clip-path: none;
    height: auto;
    margin: initial;
    overflow: initial;
    padding: initial;
    position: static;
    white-space: nowrap;
    width: auto;
  }
}
@media screen and (min-width: 70em) {
  [data-trigger=account-menu] .avatar {
    margin-inline-start: 0.5rem;
  }
}

[dir=rtl] [data-trigger=account-menu] {
  margin-left: 0;
  margin-right: auto;
}
[dir=rtl] [data-trigger=account-menu].js-has-msg::after {
  left: 3px;
  right: auto;
}

.account-menu {
  background-color: #fff;
  border: solid 1px #bdbdbd;
  box-shadow: 0 8px 16px 0 rgba(55, 70, 95, 0.07);
  position: absolute;
  right: 5vw;
  top: 100%;
  max-width: calc(100% - 10vw);
  min-width: 15.625rem;
  z-index: 10;
}

[dir=rtl] .account-menu {
  left: 5vw;
  right: auto;
}

.account-menu ul {
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}
.account-menu ul li {
  padding: 0.625rem 1.25rem;
}

.account-menu li:first-of-type {
  font-weight: 600;
}

.account-menu li:nth-child(3) {
  padding-top: 0;
}

.account-menu li:last-of-type {
  padding-bottom: 0;
}

.account-menu a {
  display: block;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}

/*------------------------------------*\
    #Navigation advanced

    N.B. aria-expanded attribute is managed by JS
\*------------------------------------*/
.no-js [data-trigger=mobile-nav],
.no-js .global-nav__inner .nav__submenu {
  display: none;
}
.no-js .global-nav__inner > ul {
  border-bottom: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
  position: static;
}

[data-trigger=mobile-nav] {
  display: inline-flex;
  font-size: 0.875rem;
  padding: 0.4375rem 0;
}
[data-trigger=mobile-nav]:focus {
  background-color: #f9dc4a;
  border-color: #000;
}
[data-trigger=mobile-nav][aria-expanded=false] .close-icon {
  display: none;
}
[data-trigger=mobile-nav][aria-expanded=true] .menu-icon {
  display: none;
}
[data-trigger=mobile-nav][aria-expanded=false] ~ .account-login {
  display: none;
}
[data-trigger=mobile-nav][aria-expanded=false] + * {
  display: none;
}
[data-trigger=mobile-nav][aria-expanded=true] ~ .account-login {
  display: flex;
}
@media screen and (min-width: 70em) {
  [data-trigger=mobile-nav] {
    display: none;
  }
}

[data-trigger=mobile-nav] {
  margin-left: auto;
}

[dir=rtl] [data-trigger=mobile-nav] {
  margin-left: 0;
  margin-right: auto;
}

[data-trigger=account-menu] ~ [data-trigger=mobile-nav] {
  margin-left: 0.625rem;
}

[dir=rtl] [data-trigger=account-menu] ~ [data-trigger=mobile-nav] {
  margin-left: 0;
  margin-right: 0.625rem;
}

#global-nav {
  position: relative;
  z-index: 2;
}

.global-nav__inner > ul {
  border-bottom: solid 1px #bdbdbd;
  box-shadow: 0 8px 16px -5px rgba(55, 70, 95, 0.07);
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  left: 0;
  padding-bottom: 2.8125rem;
  padding-left: 5vw;
  padding-right: 5vw;
  position: absolute;
  top: 100%;
  width: 100%;
}
@media screen and (min-width: 70em) {
  .global-nav__inner > ul {
    border: none;
    box-shadow: none;
    flex-basis: auto;
    flex-wrap: nowrap;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    position: static;
  }
}

.signed-in .global-nav__inner > ul > li:last-child {
  display: none;
}

.js .global-nav__inner .top-nav-item > .nav-link::after {
  visibility: visible;
}

.global-nav__inner [data-trigger=sub-nav] {
  align-items: center;
  background-color: transparent;
  border-color: transparent;
  border-radius: 0;
  color: #111;
  display: flex;
  font-size: 1rem;
  line-height: inherit;
  outline: solid 1px transparent;
  outline-offset: -1px;
  padding: 0.75rem 0;
  width: 100%;
}
@media screen and (min-width: 70em) {
  .global-nav__inner [data-trigger=sub-nav] {
    display: inline-flex;
  }
}
.global-nav__inner [data-trigger=sub-nav]::after {
  margin-inline-start: auto !important;
  transform: rotate(-45deg);
}
@media screen and (min-width: 70em) {
  .global-nav__inner [data-trigger=sub-nav]::after {
    margin-block-start: -0.1875rem;
    margin-inline-start: 0.5rem !important;
    transform: rotate(45deg);
  }
}
.global-nav__inner [data-trigger=sub-nav]:focus {
  background-color: #f9dc4a;
  background-image: none !important;
  border-color: #000;
}
.global-nav__inner [data-trigger=sub-nav][aria-expanded=false] + * {
  display: none;
}
@media screen and (min-width: 70em) {
  .global-nav__inner [data-trigger=sub-nav][aria-expanded=true]::after {
    margin-block-start: 0;
    scale: -1;
  }
}

[dir=rtl] .global-nav__inner [data-trigger=sub-nav]::after {
  transform: rotate(135deg);
}
@media screen and (min-width: 70em) {
  [dir=rtl] .global-nav__inner [data-trigger=sub-nav]::after {
    margin-inline-start: 0.25rem;
    transform: rotate(45deg);
  }
}

.global-nav__inner .nav__submenu {
  background-color: #fff;
  border-bottom: solid 1px #bdbdbd;
  box-shadow: 0 8px 16px -5px rgba(55, 70, 95, 0.07);
  display: block;
  left: 0;
  min-height: calc(100% + 1px);
  padding-bottom: 2.8125rem;
  position: absolute;
  top: 0;
  width: 100vw;
  z-index: 5;
}
@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu {
    border-bottom: solid 1px #bdbdbd;
    border-top: solid 1px #bdbdbd;
    left: 50%;
    min-height: auto;
    padding: 3.125rem 1.25rem;
    top: 100%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu .l-center {
    display: flex;
    justify-content: space-between;
  }
}

@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu__intro {
    width: 30%;
  }
}
.global-nav__inner .nav__submenu__intro > h2 {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #111;
  font-weight: 600;
  margin-top: 1.5625rem;
  padding-bottom: 0.375rem;
  padding-top: 0.375rem;
}
@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu__intro > h2 {
    font-size: 2.125rem;
    line-height: 1.2647058824;
    margin-bottom: 1.5625rem;
    margin-top: 0;
  }
}

.global-nav__inner .nav__submenu__intro__text {
  font-size: 1.125rem;
  line-height: 1.5;
}
.global-nav__inner .nav__submenu__intro__text *:not(a) {
  display: none;
}
@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu__intro__text *:not(a) {
    display: block;
  }
}
.global-nav__inner .nav__submenu__intro__text > a {
  color: #005797;
  display: inline-block;
  margin-bottom: 1rem;
  margin-top: 0;
  padding-bottom: 0.5625rem;
  padding-top: 0;
}
@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu__intro__text > a {
    margin-bottom: 0;
    margin-top: 1rem;
    padding-top: 0.5625rem;
  }
}
.global-nav__inner .nav__submenu__intro__text > a:hover {
  color: #024488;
}
.global-nav__inner .nav__submenu__intro__text > a:focus {
  color: #000;
}

.global-nav__inner [data-button=mobile-back] {
  font-size: 1.25rem;
  line-height: 1.6;
  align-items: center;
  border-bottom: solid 1px #bdbdbd;
  border-radius: 0;
  display: flex;
  padding: 0.75rem 5vw;
}
@media screen and (min-width: 70em) {
  .global-nav__inner [data-button=mobile-back] {
    display: none;
  }
}
.global-nav__inner [data-button=mobile-back]::before {
  block-size: 1rem;
  border-color: #000;
  border-style: solid;
  border-width: 0 0.25rem 0.25rem 0;
  content: "";
  inline-size: 1rem;
  flex: 0 0 auto;
  margin-inline-end: 0.75rem;
  margin-inline-start: 0.375rem;
  transform: rotate(135deg);
}

[dir=rtl] .global-nav__inner [data-button=mobile-back]::before {
  transform: rotate(-45deg);
}

@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu ul {
    -moz-columns: 2;
         columns: 2;
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    width: 65%;
  }
}

.global-nav__inner .nav__submenu li {
  border-bottom: solid 1px #bdbdbd;
  padding-bottom: 0.1875rem;
  padding-top: 0.1875rem;
}
@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu li {
    border-bottom: 0;
    padding-bottom: 0;
    padding-top: 0;
  }
}

.global-nav__inner .nav__submenu li a {
  color: #111;
  display: block;
  font-size: 1.1875rem;
  line-height: 1.5;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  text-decoration: none;
}
@media screen and (min-width: 70em) {
  .global-nav__inner .nav__submenu li a {
    align-items: flex-start;
    display: inline-flex;
    padding-inline: 0.125rem;
    width: auto;
  }
  .global-nav__inner .nav__submenu li a::before {
    block-size: 1rem;
    border-color: #005a9c;
    border-style: solid;
    border-width: 0 0.25rem 0.25rem 0;
    content: "";
    flex: 0 0 auto;
    inline-size: 1rem;
    margin-block-start: 0.375rem;
    margin-inline-end: 1rem;
    transform: rotate(-45deg);
  }
}
.global-nav__inner .nav__submenu li a:hover {
  color: #024488;
}
.global-nav__inner .nav__submenu li a:hover::before {
  border-color: #024488;
}
.global-nav__inner .nav__submenu li a:focus {
  background-color: #f9dc4a;
  background-image: linear-gradient(to top, #000 3px, #f9dc4a 3px, #f9dc4a);
  color: #000;
}
.global-nav__inner .nav__submenu li a:focus::before {
  border-color: #000;
}

[dir=rtl] .global-nav__inner .nav__submenu li a::before {
  transform: rotate(135deg);
}

/*------------------------------------*\
    #Collapsible sections advanced
\*------------------------------------*/
.js .component--collapsibles [data-heading=collapsibles] button {
  align-items: flex-start;
  border-radius: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 1.125rem;
  font-weight: bold;
  line-height: 1.5;
  justify-content: space-between;
  margin-top: 0;
  padding: 0.1875rem;
  width: 100%;
}
.js .component--collapsibles [data-heading=collapsibles] button > span {
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 1.5;
  color: #333;
  order: 2;
  width: 100%;
}
.js .component--collapsibles [data-heading=collapsibles] button::after {
  block-size: 0.875rem;
  border-color: black;
  border-style: solid;
  border-width: 0 0.25rem 0.25rem 0;
  content: "";
  inline-size: 0.875rem;
  margin-block-start: 0.25rem;
  margin-inline-end: 0.125rem;
  transform: rotate(45deg);
}
.js .component--collapsibles [data-heading=collapsibles] button:hover {
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.js .component--collapsibles [data-heading=collapsibles] button:focus {
  border-color: inherit;
  background-color: #f9dc4a;
  text-decoration: none;
}
.js .component--collapsibles [data-heading=collapsibles] button[aria-expanded=true]::after {
  margin-block-start: 0.625rem;
  scale: -1;
}
.js .component--collapsibles [data-heading=collapsibles] + *[aria-hidden=true] {
  display: none;
}

/*------------------------------------*\
    #Cards advanced
\*------------------------------------*/
.js [data-component=card] {
  cursor: pointer;
}
.js [data-component=card]:hover .card__link {
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}

.js [data-component=card] .card__text {
  /**
  Minimum spacing between the penultimate and last child elements.
  Matches the measure used for the stack mixin on `.card__text`
   */
}
.js [data-component=card] .card__text > :nth-last-child(2) {
  margin-bottom: 1rem;
}
.js [data-component=card] .card__text > :last-child {
  margin-bottom: 0;
  margin-top: auto;
}

/*------------------------------------*\
    #Hero advanced
\*------------------------------------*/
.js .hero--listing .browse h2 {
  display: none;
}

/*------------------------------------*\
    #Slider advanced

    N.B. `.js-slider` is added by JS
\*------------------------------------*/
.js [data-component=slider] .js-slider {
  overflow: hidden;
}
.js [data-component=slider] .js-slider:focus-within {
  box-shadow: 0 0 0 3px #f9dc4a;
  outline: 0.125rem solid #111;
  outline-offset: -0.125rem;
}
.js [data-component=slider] .js-slider > ul {
  display: flex;
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
  position: relative;
}
.js [data-component=slider] .js-slider > ul > li {
  flex: 0 0 100%;
}
.js [data-component=slider] .js-slider > ul > li.js-current {
  visibility: visible;
}
.js [data-component=slider] .js-slider > ul > li.js-hidden {
  visibility: hidden;
}
.js [data-component=slider] .js-slider > ul > li + li {
  margin-top: 0;
}

.slider-controls .js-previous svg,
.slider-controls .js-next svg {
  pointer-events: none;
}

.slider-controls .js-previous .chevron-right {
  display: none;
}

.slider-controls .js-next .chevron-left {
  display: none;
}

[dir=rtl] .slider-controls .js-previous .chevron-left {
  display: none;
}
[dir=rtl] .slider-controls .js-previous .chevron-right {
  display: block;
}
[dir=rtl] .slider-controls .js-next .chevron-left {
  display: block;
}
[dir=rtl] .slider-controls .js-next .chevron-right {
  display: none;
}

.slider-controls .js-previous,
.slider-controls .js-next {
  color: #111;
}
.slider-controls .js-previous:hover,
.slider-controls .js-next:hover {
  box-shadow: 0 0 4px 2px rgba(84, 84, 84, 0.25);
}
.slider-controls .js-previous:focus,
.slider-controls .js-next:focus {
  background-color: #fff;
  border-color: #000;
  box-shadow: 0 0 0 3px #f9dc4a;
}
.slider-controls button[disabled] {
  background-color: transparent;
  border-color: transparent;
  color: #545454;
}
.slider-controls button[disabled]:hover {
  background-color: transparent;
  box-shadow: none;
  color: #545454;
}

/*------------------------------------*\
    #Disclosure widget
\*------------------------------------*/
.no-js [data-toggle=true] {
  display: none;
}
.no-js [data-toggle=true] + * {
  display: initial;
}

[data-toggle=true] {
  font-size: 0.9375rem;
  line-height: 1.5;
  align-items: center;
  display: inline-flex;
  font-weight: bold;
}
[data-toggle=true]::after {
  block-size: 0.4375rem;
  border-color: black;
  border-style: solid;
  border-width: 0 0.125rem 0.125rem 0;
  content: "";
  inline-size: 0.4375rem;
  margin-block-start: -0.1875rem;
  margin-inline-end: 0.1875rem;
  margin-inline-start: 0.75rem;
  transform: rotate(45deg);
}
[data-toggle=true]:hover {
  box-shadow: 0 0 4px 2px rgba(84, 84, 84, 0.25);
}
[data-toggle=true]:focus {
  background-color: #f9dc4a;
  border-color: #000;
  box-shadow: none;
}

[data-toggle=true][aria-expanded=false] + * {
  display: none;
}

[data-toggle=true][aria-expanded=true]::after {
  margin-block-start: 0.25rem;
  scale: -1;
}
[data-toggle=true][aria-expanded=true] + * {
  display: block;
}

/*------------------------------------*\
    #Comments advanced
\*------------------------------------*/
.button[data-replylink],
#js-cancel-reply {
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: underline; /* 1 */
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-underline-offset: 0.25em;
}
.button[data-replylink]:hover,
#js-cancel-reply:hover {
  box-shadow: 0 0 4px 2px rgba(84, 84, 84, 0.25);
}
.button[data-replylink]:focus,
#js-cancel-reply:focus {
  background-color: #f9dc4a;
  border-color: #000;
  box-shadow: none;
  text-decoration: none;
}

#js-cancel-reply {
  margin-inline-start: 0.625rem;
}

/*------------------------------------*\
	#Multiselect
\*------------------------------------*/
.combo {
  display: block;
  position: relative;
}

.combo-menu {
  background-color: #f5f5f5;
  display: none;
  left: 0;
  max-height: 18.75rem;
  overflow-y: scroll;
  position: absolute;
  top: 100%;
  width: 100%;
  z-index: 100;
}

.combo-menu:not(:empty) {
  border: 1px solid rgba(0, 0, 0, 0.42);
  border-radius: 0 0 4px 4px;
}

.open .combo-menu {
  display: block;
}

.combo-option {
  padding: 0.625rem 0.75rem 0.75rem;
}

.combo-option.option-current,
.combo-option:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.combo-option.option-selected {
  padding-right: 1.875rem;
  position: relative;
}

.combo-option.option-selected::after {
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  content: "";
  height: 1rem;
  position: absolute;
  right: 0.9375rem;
  top: 50%;
  transform: translate(0, -50%) rotate(45deg);
  width: 0.5rem;
}

.selected-options {
  list-style-type: none;
  margin: 0;
  max-width: 25rem;
  padding: 0;
}

.selected-options li {
  display: inline-block;
  margin-bottom: 0.3125rem;
}

.remove-option {
  background-color: #024488;
  border: 1px solid #024488;
  border-radius: 3px;
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  margin-bottom: 0.375rem;
  margin-right: 0.375rem;
  padding: 0.25em 1.75em 0.25em 0.25em;
  position: relative;
}

.remove-option:focus {
  border-color: #baa1dd;
  box-shadow: 0 0 3px 1px #6200ee;
  outline: 3px solid transparent;
}

.remove-option::before,
.remove-option::after {
  border-right: 2px solid #fff;
  content: "";
  height: 1em;
  right: 0.75em;
  position: absolute;
  top: 50%;
  width: 0;
}

.remove-option::before {
  transform: translate(0, -50%) rotate(45deg);
}

.remove-option::after {
  transform: translate(0, -50%) rotate(-45deg);
}

/*------------------------------------*\
    #Plugins

    Add third-party plugins here.
\*------------------------------------*/
/*
 * Accessible Autocomplete
 * MIT license | https://github.com/alphagov/accessible-autocomplete
 * Modified to fit Apollo
 */
.autocomplete__wrapper {
  position: relative;
}

.autocomplete__hint,
.autocomplete__input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 2px solid;
  border-radius: 0; /* Safari 10 on iOS adds implicit border rounding. */
  margin-bottom: 0; /* BUG: Safari 10 on macOS seems to add an implicit margin. */
  width: 100%;
}

.autocomplete__input {
  background-color: transparent;
  position: relative;
}

.autocomplete__hint {
  color: #bdbdbd;
  position: absolute;
}

.autocomplete__input--default {
  padding: 5px;
}

.autocomplete__input--focused {
  background-color: #fff;
  outline: 3px solid #f9dc4a;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px;
}

.autocomplete__input--show-all-values {
  padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
  cursor: pointer;
}

[dir=rtl] .autocomplete__input--show-all-values {
  padding-left: 34px;
  padding-right: 5px;
}

.autocomplete__dropdown-arrow-down {
  display: inline-block;
  position: absolute;
  right: 8px;
  width: 24px;
  height: 24px;
  top: 12px;
  pointer-events: none;
}

[dir=rtl] .autocomplete__dropdown-arrow-down {
  right: auto;
  left: 8px;
}

.autocomplete__menu {
  background-color: #fff;
  border: 2px solid;
  border-top: 0;
  color: #111;
  margin: 0;
  max-height: 342px;
  overflow-x: hidden;
  padding: 0;
  width: 100%;
  width: calc(100% - 4px);
}

.autocomplete__menu--visible {
  display: block;
}

.autocomplete__menu--hidden {
  display: none;
}

.autocomplete__menu--overlay {
  box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
  left: 0;
  position: absolute;
  top: 100%;
  z-index: 100;
}

.autocomplete__menu--inline {
  position: relative;
}

.autocomplete__option {
  border-bottom: solid #bdbdbd;
  border-width: 1px 0;
  cursor: pointer;
  display: block;
  position: relative;
}

.autocomplete__option > * {
  pointer-events: none;
}

.autocomplete__option:first-of-type {
  border-top-width: 0;
}

.autocomplete__option:last-of-type {
  border-bottom-width: 0;
}

.autocomplete__option--odd {
  background-color: #f8f8fb;
}

.autocomplete__option--focused,
.autocomplete__option:hover {
  background-color: #005797;
  border-color: #005797;
  color: white;
  outline: none;
}

.autocomplete__option--no-results {
  background-color: #f8f8fb;
  color: #545454;
  cursor: not-allowed;
}

.autocomplete__hint,
.autocomplete__input,
.autocomplete__option {
  line-height: 1.25;
}

.autocomplete__hint,
.autocomplete__option {
  padding: 5px;
}