:root {
   --s-primary: #776bb2;
   --s-secondary: #3d75a1;
   --s-secondary-light: #78a9d0;
   --background: #f0f7fc;
   --s-grey-text: #767676;
   --error: #d41f1f;
   --subtle: #eee;
   --selected: #5eb43b;
   --selected-light: rgb(118 200 85 / 8%);
   --cancel: #aaa;
   --s-purple-light: #f7f6fd;
}

body.scxx {
   background: var(--background);
   background: linear-gradient(180deg, rgba(240, 247, 252, 1) 35%, rgba(230, 242, 250, 1) 100%);
   min-height: 100vh;
}

.scxx fieldset {
   border: 0px;
   padding: 0;
   margin: 0;
}

.scxx .pathway-container {
   display: flex;
   width: 100vw;
   max-width: 100%;
   min-height: 100vh;
   justify-content: center;
   align-items: center;
   font-family: "Outfit";
}

.scxx .pathway-canvass {
   min-width: 40vw;
}

.scxx .pathway-step {
   position: relative;
   padding: 70px 0 120px 0;
}

.scxx .pathway-question {
   position: relative;
   padding: 20px;
   z-index: 1;
}

.scxx .question-component-container {
   text-align: center;
   opacity: 0;
   animation: scxx-fade-in 0.7s forwards 1.1s ease-out;
}

.scxx .question-component-container.visible {
   opacity: 1;
   animation: none;
}

.scxx .question-component-container.inline {
   flex-wrap: wrap;
   display: flex;
   justify-content: center;
}

.scxx .question-text {
   font-weight: 700;
   color: var(--s-primary);
   font-size: 1.5rem;
   font-family: "CeraRound";
   /* letter-spacing: 0.03rem; */
   margin-bottom: 12px;
}

.scxx .question-text.small-text {
   font-size: 1.3rem;
}

.scxx .question-header-container {
   display: flex;
   max-width: 600px;
   flex-wrap: wrap;
}

.scxx .question-text-container {
   display: flex;
   justify-content: space-between;
}

.scxx .question-help-text-button {
   font-size: 1.2rem;
   background: none;
   height: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 2px solid #3d75a100;
   color: var(--s-secondary);
   transform: translate(0px, -14px);
   border-radius: 20px;
   padding: 0px;
}

.scxx .question-help-text-button.clicked {
   color: var(--s-blue);
}

.scxx .question-help-text-button:before {
   content: "\e825";
   font-family: "icons";
}

.scxx .question-help-text-button:hover {
   color: var(--s-primary);
   border: 2px solid #776bb200;
   background: none;
}

.scxx .question-help-text-content {
   position: absolute;
   bottom: 100%;
   font-family: "ceraRound";
   font-size: 1.25rem;
   color: var(--s-primary);
   transform: translate(0px, 26px);
   opacity: 0;
   transition: all 0.4s;
   pointer-events: none;
   z-index: 1;
}

.scxx .question-help-text-content.show {
   transform: translate(0px, 20px);
   opacity: 1;
}

.scxx .question-help-text-content-content {
   position: relative;
   color: #fff;
   background: var(--s-primary);
   border-radius: 4px;
   padding: 3px 10px;
   font-size: 1rem;
}

.scxx .question-help-text-content-content {
   position: relative;
}

.scxx .question-help-text-content-content:after {
   content: "";
   position: absolute;
   top: 100%;
   left: 10%;
   width: 0;
   height: 0;
   border-top: solid 6px var(--s-primary);
   border-left: solid 6px transparent;
   border-right: solid 6px transparent;
}

.scxx input[type="radio"],
.scxx input[type="checkbox"] {
   display: none;
}

/* Hide spinners on numerical input */
.scxx input::-webkit-outer-spin-button,
.scxx input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}

.scxx input[type="number"] {
   -moz-appearance: textfield;
}

.scxx fieldset label {
   min-width: 100px;
   display: inline-block;
   cursor: pointer;
   border: 2px solid var(--s-secondary-light);
   border-radius: 4px;
   transition: color 0.3s, background-color 0.3s;
   font-weight: 500;
   text-align: center;
   font-size: 1.15rem;
   padding: 10px 10px;
   margin: 10px;
   color: var(--s-secondary);
   position: relative;
}

.scxx .question-component-container.inline label {
   display: flex;
   justify-content: center;
}

.scxx fieldset label:hover {
   border-color: var(--selected);
}

.scxx fieldset .vertical label:hover,
.scxx .tiles label:hover {
   color: #428326;
   box-shadow: 2px 1px 4px #a0b8df;
}

.scxx fieldset input:checked + label {
   color: var(--selected);
   border-color: var(--selected);
}

.scxx fieldset input:checked + label:after {
   content: "\e80e";
   font-family: "icons";
   position: absolute;
   right: 3px;
   top: 2px;
   background: var(--selected);
   color: #fff;
   font-weight: 400;
   font-size: 0.8rem;
   border-radius: 33px;
   width: 18px;
   height: 17px;
   line-height: 18px;
}

.scxx .pathway-inline-label {
   font-family: "CeraRound";
   color: var(--s-primary);
   font-size: 1.2rem;
   margin-right: 10px;
}

.scxx label:focus,
.scxx button:focus {
   outline: 0;
   border: 2px dashed var(--s-primary);
}

.scxx .result .option-selection-label:focus {
   outline: 0;
   border: 0;
}

.scxx .result .option-selection-label:focus .option-selection-text {
   display: block;
   border-radius: 30px;
   border: dashed 2px;
}

.scxx input:checked + .option-selection-label:focus .option-selection-text {
   display: block;
   border-radius: 30px;
}

.scxx fieldset label:focus,
.scxx fieldset label:hover:focus {
   border: 1px solid var(--s-blue);
}

.scxx fieldset input:checked + label:focus {
   outline-color: var(--selected);
   border-color: var(--selected);
}

.scxx .pathway-consent {
   max-width: 500px;
   background: #fff;
   border-radius: 5px;
   padding: 12px;
   letter-spacing: 0.02rem;
   font-size: 1.1rem;
   color: var(--s-grey-text);
   text-align: center;
   margin: 10px auto;
}

.scxx .form-icon {
   position: absolute;
   pointer-events: none;
   opacity: 0;
   transition: all 1.2s;
   color: #92bfdc;
   font-size: 7rem;
   transform: translate(-3vw, -40px) scale(0.5, 0.5);
   animation: question-icons 2s forwards;
}

.scxx .form-icon::before {
   opacity: 0.15;
}

.scxx .pathway-step-nav-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: end;
}

.scxx .pathway-step-nav {
   background: var(--subtle);
   transition: all 0.3s;
   font-family: "CeraRound";
   color: #555;
   padding: 8px 20px;
   font-size: 1.1rem;
   border-radius: 30px;
}

.scxx .pathway-step-nav:hover {
   color: #fff;
   background: var(--s-primary);
}
.scxx .pathway-step-nav:focus {
   border: 2px dashed var(--s-primary);
}

@keyframes scxx-fade-in {
   0% {
      opacity: 0;
   }
   100% {
      opacity: 1;
   }
}

@keyframes scxx-fade-in-from-right {
   0% {
      opacity: 0;
      transform: translate(50px, 0);
   }
   100% {
      opacity: 1;
      transform: translate(0, 0);
   }
}

@keyframes scxx-fade-in-up {
   0% {
      opacity: 0;
      transform: translate(0, 15px);
   }

   100% {
      opacity: 1;
      transform: translate(0, 0px);
   }
}

@keyframes scxx-fade-in-down {
   0% {
      opacity: 0;
      transform: translate(0, -15px);
   }

   100% {
      opacity: 1;
      transform: translate(0, 0px);
   }
}

@keyframes scxx-fade-out-up {
   0% {
      opacity: 1;
      transform: translate(0, 0);
   }

   100% {
      opacity: 0;
      transform: translate(0, -15px);
   }
}

@keyframes scxx-fade-out-down {
   0% {
      opacity: 1;
      transform: translate(0, 0px);
   }

   100% {
      opacity: 0;
      transform: translate(0, 15px);
   }
}

@keyframes slide-up {
   0% {
      transform: translate(0, 100px);
   }

   100% {
      transform: translate(0, 0px);
   }
}

@keyframes slide-down {
   0% {
      transform: translate(0, 0);
   }

   100% {
      transform: translate(0, 100px);
   }
}

@keyframes scxx-fade-in-from-top {
   0% {
      opacity: 0;
      transform: translate(0, -30vh);
   }
   100% {
      opacity: 1;
      transform: translate(0, 0px);
   }
}

@keyframes scxx-fade-in-from-bottom {
   0% {
      opacity: 0;
      transform: translate(0, 30vh);
   }

   80% {
      opacity: 10%;
   }

   100% {
      opacity: 1;
      transform: translate(0, 0px);
   }
}

@keyframes scxx-fade-out-to-top {
   0% {
      opacity: 1;
      transform: translate(0, 0px);
   }
   100% {
      opacity: 0;
      transform: translate(0, -30vh);
   }
}

@keyframes scxx-fade-out-to-bottom {
   0% {
      opacity: 1;
      transform: translate(0, 0px);
   }
   100% {
      opacity: 0;
      transform: translate(0, 30vh);
   }
}

.scxx .fade-in {
   animation: scxx-fade-in 0.6s forwards ease-out;
}

.scxx .slide-up {
   animation: slide-up 0.8s forwards ease-out;
}

.scxx .slide-down {
   animation: slide-down 0.6s forwards ease-out;
}

.scxx .fade-in-up {
   animation: scxx-fade-in-up 0.6s forwards ease-out;
}

.scxx .fade-in-down {
   animation: scxx-fade-in-down 0.6s forwards ease-out;
}

.scxx .fade-out-up {
   animation: scxx-fade-out-up 0.6s forwards ease-out;
}

.scxx .fade-out-down {
   animation: scxx-fade-out-down 0.6s forwards ease-out;
}

.scxx .fade-in-from-bottom {
   animation: scxx-fade-in-from-bottom 0.6s forwards ease-out;
}
.scxx .fade-in-from-top {
   animation: scxx-fade-in-from-top 0.6s forwards ease-out;
}
.scxx .fade-out-to-bottom {
   animation: scxx-fade-out-to-bottom 0.6s forwards ease-out;
}
.scxx .fade-out-to-top {
   animation: scxx-fade-out-to-top 0.6s forwards ease-out;
}

@keyframes question-icons {
   0% {
      transform: translate(-3vw, -80px) scale(0.7, 0.7);
      opacity: 0;
   }
   100% {
      opacity: 1;
      transform: translate(2.5vw, -125px) scale(1, 1);
   }
}

.scxx .question-validation-notice {
   color: var(--error);
   font-size: 1.1rem;
   display: none;
}

.scxx .invalid .question-validation-notice {
   display: block;
}

.scxx .pathway-text-input,
.scxx .pathway-date,
.scxx .pathway-dropdown {
   border-radius: 4px;
   padding: 11px 10px;
   width: calc(100% - 20px);
   margin: 20px auto;
   border: 1px solid #d0dbec;
   font-family: "Outfit";
   font-size: 1.3rem;
   color: var(--s-primary);
   box-shadow: 2px 1px 5px #b3d0fc;
   text-align: center;
   transition: all 0.3s;
}

.scxx textarea.pathway-text-input {
   text-align: left;
   font-size: 1rem;
   min-height: 100px;
}

.scxx .pathway-date {
   padding: 6px 10px;
   font-size: 1.4rem;
}

.scxx .pathway-dropdown {
   width: auto;
   padding: 4px 12px;
   font-size: 1.3rem;
   text-align: center;
}

.scxx .pathway-text-input.postcode {
   text-transform: uppercase;
}

.scxx .pathway-text-input::placeholder {
   text-align: left;
   font-size: 1.2rem;
   color: #c4c4c4;
   text-transform: none;
   font-weight: 300;
   font-family: "Outfit", sans-serif;
}

.scxx .error .pathway-text-input {
   border-bottom: 3px solid var(--error);
}

.scxx .pathway-text-input:focus,
.scxx .autosuggest-component-input:focus {
   border-bottom-width: 3px;
   border-bottom-color: var(--s-primary);
   border-radius: 4px 4px 0px 0px;
   outline: none;
}

.scxx .invalid .pathway-text-input,
.scxx .invalid .pathway-text-input:focus {
   border-bottom-color: var(--error);
}

.scxx .pathway-step-navigate {
   text-align: center;
   margin-top: 20px;
   position: relative;
   z-index: 0;
}

.scxx .pathway-step-navigate-skip,
.scxx .pathway-step-navigate-submit {
   background: rgba(255, 255, 255, 0.6);
   color: var(--s-primary);
   border-radius: 7px;
   padding: 8px 18px 8px 22px;
   box-shadow: 1px 1px 6px rgb(0 0 0 / 5%);
   font-size: 1.1rem;
   font-family: "CeraRound";
   font-weight: 700;
}

.scxx .pathway-step-navigate-skip:hover,
.scxx .pathway-step-navigate-submit:hover,
.scxx .pathway-step-navigate-skip:focus,
.scxx .pathway-step-navigate-submit:focus {
   background: rgba(255, 255, 255, 1);
   color: var(--s-primary);
}

.scxx .pathway-step-navigate-skip:after,
.scxx .pathway-step-navigate-submit:after {
   content: "\e824";
   font-family: "icons";
   margin-left: 8px;
   opacity: 0.7;
}

.scxx .pathway-step-navigate-submit:after {
   content: "\e80e";
}

.scxx .pathway-content {
   font-size: 1.3rem;
   max-width: 500px;
   text-align: center;
   margin: 15px auto 0;
   border-radius: 7px;
   padding: 10px;
   color: var(--s-primary);
   font-family: "CeraRound";
}

/* Cera round pro */
@font-face {
   font-family: "CeraRound";
   font-style: normal;
   font-weight: 700;
   src: url("/font/ceraroundpro-bold-webfont.woff2");
}

.scxx .question-text-input-container {
   position: relative;
}

.scxx .text-field-spinner:after {
   content: "";
   border: 4px solid rgb(92 50 188 / 12%);
   border-right-color: rgb(99 45 156 / 48%);
   border-radius: 100%;
   width: 26px;
   height: 26px;
   position: absolute;
   right: 30px;
   top: 50%;
   transform: translateY(-50%);
   animation: rotate 1s linear infinite;
}

@keyframes rotate {
   0% {
      transform: translateY(-50%) rotate(0deg);
   }
   to {
      transform: translateY(-50%) rotate(359deg);
   }
}

.scxx .question-component-container.vertical {
   max-width: 450px;
   margin: auto;
}

.scxx .question-component-container.tiles {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   max-width: 1000px;
}

.scxx .question-multi-select-notice {
   margin: 10px 0 15px;
   color: var(--s-primary);
   font-family: ceraRound;
}

.scxx .question-multi-select-notice:before {
   content: "\e84a";
   font-family: "icons";
   margin-right: 7px;
   font-size: 1rem;
   background: var(--s-primary);
   border-radius: 10px;
   width: 16px;
   display: inline-block;
   height: 16px;
   color: #fff;
   line-height: 18px;
}

.scxx .tiles label,
.scxx .vertical label {
   display: flex;
   flex-direction: column;
   background: #fff;
   border: 0px solid #d0dbec;
   box-shadow: 2px 1px 4px #d2e3ff;
}

.scxx .tiles label {
   width: 240px;
   padding: 6px 10px 6px 15px;
   justify-content: center;
   min-height: 50px;
   align-items: center;
}

.scxx .tiles .has-content .option-label {
   transform: translateY(calc(100% / 3 + 3px));
   height: 100%;
}

.scxx .tiles .has-content .option-label {
   transition: all 0.5s;
   padding: 2px 8px 6px 8px;
}

.scxx .tiles .has-content:focus .option-label,
.scxx .tiles .has-content:hover .option-label {
   transform: translateY(8px);
}

.scxx .pathway-question-pinned-buttons {
   flex: 0 0 100%;
   text-align: center;
   margin: 15px 0 35px;
}

.scxx .pathway-question-pinned-buttons .pinned-button .option-icon {
   font-size: 1.9rem;
}

.scxx .pinned-button.has-icon .option-label {
   padding-left: 33px;
}

.scxx .pathway-select-button.pinned-button {
   border: 3px solid var(--s-primary);
   color: #fff;
   border-radius: 40px;
   margin: 25px 0;
   background: var(--s-primary);
   display: inline-block;
}

.scxx .pathway-select-button.pinned-button:hover .option-label {
   color: #fff;
}

.scxx .pathway-select-button.pinned-button:hover .option-icon {
   color: #fff;
   opacity: 0.1;
   transform: translate(2px, -5px);
}

.scxx .pathway-select-button.pinned-button:before {
   margin-right: 15px;
}

.scxx .pathway-select-button.pinned-button:focus {
   border-color: var(--s-primary);
}

.scxx fieldset input:checked + label.pinned-button:hover .option-icon,
.scxx fieldset input:checked + label.pinned-button:focus .option-icon,
.scxx fieldset .vertical label.pinned-button:hover,
.scxx .tiles label.pinned-button:hover {
   color: #fff;
}

.scxx .option-icon {
   position: absolute;
   top: 2px;
   left: 3px;
   font-size: 2.4rem;
   opacity: 0.15;
   transition: all 0.4s;
}

.scxx label:hover .option-icon,
.scxx label:focus .option-icon {
   font-size: 2.2rem;
   color: var(--s-primary);
   opacity: 0.5;
}

.scxx fieldset input:checked + label:hover .option-icon,
.scxx fieldset input:checked + label:focus .option-icon {
   color: var(--selected);
}

.scxx .vertical .option-icon {
   font-size: 1.8rem;
   left: 6px;
   width: 40px;
   text-align: center;
   opacity: 0.3;
}

.scxx .vertical label:hover .option-icon,
.scxx .vertical label:focus .option-icon {
   font-size: 2rem;
}

.scxx .option-label {
   display: flex;
}

.scxx label:hover .option-label {
   color: #6e5098;
}

.scxx fieldset input:checked + label:hover .option-label {
   color: var(--selected);
}

.scxx .has-icon .option-label {
   padding-left: 15px;
}

.scxx .tiles .has-icon .option-label {
   max-width: 215px;
}

.scxx .vertical .option-label {
   justify-content: center;
}

.scxx .vertical .has-icon .option-label {
   padding-left: 28px;
}

.scxx label.none-of-these {
   color: var(--s-grey-text);
   background: #fafafa;
   border-color: var(--s-grey-text);
   border: 1px dashed var(--s-grey-text);
}

.scxx .option-content {
   font-weight: 300;
   font-size: 1rem;
   margin-top: 6px;
   color: #63759c;
   flex-grow: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   opacity: 0;
   transform: translateY(5px);
   transition: 0.5s all;
}

.scxx .question-component-container.vertical .option-content {
   opacity: 0.95;
   color: #3b526e;
   transform: translateY(0px);
}

.scxx label:hover .option-content,
.scxx label:focus .option-content {
   transform: translateY(0px);
   opacity: 1;
}

.scxx .inline .option-icon {
   font-size: 1.6rem;
   opacity: 0.8;
   left: 12px;
   top: 5px;
}

.scxx .inline label:hover .option-icon,
.scxx .inline label:focus .option-icon {
   font-size: 1.6rem;
}

.scxx .inline .has-icon .option-label {
   padding-left: 30px;
}

.scxx .age-picker-container {
   display: flex;
   max-width: 250px;
   flex-wrap: wrap;
   justify-content: center;
   margin: auto;
}

.scxx .age-picker-button {
   font-family: "ceraRound";
   font-size: 1.3rem;
   width: 39px;
   background: #fff;
   border-radius: 4px;
   margin: 3px;
   height: 35px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
}

.scxx .age-picker-button:hover {
   outline: 2px dashed var(--s-primary);
   border-width: 0px;
}

.scxx input:checked + .age-picker-button {
   background: var(--selected);
   border-color: var(--selected);
   color: #fff;
   outline: none;
}

.scxx .pathway-spinner,
.scxx .pathway-spinner:after {
   border-radius: 50%;
   width: 10em;
   height: 10em;
}
.scxx .pathway-spinner {
   margin: 100px auto;
   font-size: 10px;
   position: relative;
   z-index: 10;
   text-indent: -9999em;
   border: 0.8em solid rgb(207 220 244);
   border-left: 0.8em solid #9d8fe4;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
   -webkit-animation: scxx-spin 2s infinite linear;
   animation: scxx-spin 2s infinite linear;
}

@-webkit-keyframes scxx-spin {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}
@keyframes scxx-spin {
   0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

.scxx .pathway-spinner-notice {
   font-family: "CeraRound";
   text-align: center;
   font-weight: 700;
   font-size: 1.3rem;
   color: var(--s-primary);
   transform: translateY(-50px);
   height: 40px;
}

.scxx .pathway-spinner-notice-text {
   height: 40px;
   opacity: 0;
}

.scxx .spinner-notice-in {
   animation: scxx-spinner-notice-in 0.6s forwards 1.1s ease-out;
}

.scxx .spinner-notice-out {
   opacity: 1;
   animation: scxx-spinner-notice-out 0.6s forwards 1.1s ease-in;
}

@keyframes scxx-spinner-notice-in {
   0% {
      opacity: 0;
      transform: translate(0, 40px);
   }

   100% {
      opacity: 1;
      transform: translate(0, 0px);
   }
}

@keyframes scxx-spinner-notice-out {
   0% {
      opacity: 1;
      transform: translate(0, 0px);
   }

   100% {
      opacity: 0;
      transform: translate(0, -30px);
   }
}

.scxx .result-container {
   font-size: 1.05rem;
}

.scxx .pathway-message {
   font-size: 1.1rem;
}

.scxx .result.disabled .result-container {
   opacity: 0.4;
}

.scxx .results-progress-container {
   text-align: center;
   text-align: center;
   margin-top: 50px;
}

.scxx .results-picker-alternative-pools-select {
   display: flex;
}

.scxx .results-picker,
.scxx .help-plan-container {
   max-width: 85%;
   min-width: 65vw;
   margin: auto;
   padding-top: 80px;
   padding-bottom: 100px;
}

.scxx .results-picker {
   padding-top: 0px;
}

.scxx .results-continue-nav .selected-items {
   display: none;
}

.scxx .results-continue-nav.selected-items-exist .selected-items {
   display: inline;
}

.scxx .results-continue-nav.selected-items-exist .no-items {
   display: none;
}

.scxx .pool-header-text {
   flex-grow: 1;
}

.scxx .pool-explanation {
   margin: 10px 10px 10px 10px;
   font-family: "CeraRound";
   color: var(--s-primary);
   font-size: 1.1rem;
}

.scxx .pool-explanation.small-text {
   font-size: 1rem;
}

.scxx .pool-explanation.slim {
   margin-top: 30px;
}

.scxx .pool-explanation:before {
   font-size: 1.5rem;
   min-width: 26px;
}

.scxx .pool-header {
   position: relative;
}

.scxx .pool-header-expand {
   display: none;
}

.scxx .pool-help-text {
   max-width: calc(100% - 170px);
   display: none;
   color: var(--s-grey-text);
   margin: 4px 6px 9px 12px;
}

/* Minimized pool view  */

.scxx .smart-pool {
   border-radius: 4px;
   transition: background, border 0.3s;
   position: relative;
}

.scxx .smart-pool,
.scxx .alt-pools-container {
   margin-top: 45px;
}

.scxx .alt-pools-container.hidden {
   display: none;
}

.scxx .smart-pool {
   box-shadow: 1px 1px 1px rgb(30 107 155 / 16%);
   background: rgb(255 255 255 / 70%);
   border: 1px solid rgb(255 255 255 / 70%);
}

.scxx .smart-pool.otherIssues {
   background: none;
}

.scxx .smart-pool.expanded {
   background: rgb(255 255 255 / 25%);
   box-shadow: 1px 1px 1px rgb(30 107 155 / 22%);
   width: 100%;
}

.scxx .smart-pool .pool-explanation.slim {
   margin-top: 10px;
}

.scxx .smart-pool .options-show-similar-container button {
   margin-bottom: 15px;
}

.scxx .smart-pool .pool-header {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   flex-grow: 1;
}

.scxx .smart-pool.minimized {
   cursor: pointer;
}

.scxx .smart-pool.minimized .pool-header-text {
   width: calc(100% - 172px);
}

.scxx .smart-pool.minimized .result,
.scxx .smart-pool.minimized .options-show-similar-container,
.scxx .smart-pool.minimized .preference-container {
   display: none;
}

.scxx .smart-pool.minimized .pool-header-expand {
   display: flex;
   flex-direction: column;
   justify-content: center;
   flex-grow: 1;
}

.scxx .smart-pool.minimized .pool-help-text {
   display: block;
}

.scxx .smart-pool.minimized:hover {
   border: 1px solid var(--s-primary);
   background: rgb(255 255 255 / 100%);
}

.scxx .smart-pool.minimized:hover .pool-header-expand-button,
.scxx .smart-pool .options-show-similar:hover,
.scxx .results-progress-none:hover,
.scxx .rounded-button:hover {
   background-color: var(--s-primary);
   color: #fff;
}

.scxx .smart-pool.minimized .pool-explanation,
.scxx .smart-pool.minimized .pool-help-text {
   padding-left: 65px;
}

.scxx .smart-pool.minimized.has-help-text .pool-explanation {
   margin-bottom: 0;
}

.scxx .smart-pool.minimized .pool-explanation:before {
   font-size: 2rem;
   position: absolute;
   left: 8px;
   top: 6px;
   opacity: 0.3;
   width: 55px;
   text-align: center;
}

.scxx .smart-pool.minimized.has-help-text .pool-explanation:before {
   font-size: 3rem;
}

.scxx .pool-panel-expand {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.scxx .smart-pool.hidden {
   display: none;
}

.scxx .pool-panel-label {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   margin-top: 45px;
}

.scxx .pathway-navigation-container {
   pointer-events: none;
}

.scxx .pathway-navigation-container.enable {
   pointer-events: all;
}

.scxx .pathway-navigation-panel {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   height: 75px;
   text-align: center;
   color: #fff;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   font-family: "CeraRound";
   font-size: 1.2rem;
   overflow: hidden;
}

.scxx .pathway-navigation-panel-container {
   position: relative;
   width: 100%;
   height: 100%;
   transform: translate(0, 100px);
}

.scxx .pathway-navigation-panel-background {
   fill: var(--s-primary);
   height: 100%;
   width: 100%;
}

.scxx .pathway-navigation-panel-content {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 1;
   top: 0;
   bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
}

.scxx .pathway-navigation-panel-content {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.scxx .result-inappropriate,
.scxx .add-service-feedback {
   display: inline-block;
   margin: 0 0 0 8px;
   background: #f5f5f5;
   padding: 3px 10px;
   border-radius: 4px;
   color: #aaa;
   cursor: pointer;
}

.scxx .result-inappropriate:before,
.scxx .add-service-feedback:before {
   content: "\e810";
   font-family: "icons";
   margin-right: 8px;
   font-size: 1.2rem;
   color: #ccc;
}

.scxx .add-service-feedback:before {
   content: "\f10e";
}

.scxx .result-inappropriate:hover,
.scxx .add-service-feedback:hover {
   background: #eee;
   color: #777;
}

.scxx .result-inappropriate:hover:before,
.scxx .add-service-feedback:hover:before {
   color: #888;
}

.scxx .service-feedback-problems,
.scxx .service-feedback-comment {
   margin-top: 20px;
}

.scxx #service-feedback-comment {
   margin: 4px 0 20px;
   width: 100%;
   border-radius: 4px;
   border: 1px solid var(--s-primary);
   padding: 4px;
   box-sizing: border-box;
}

.scxx #service-feedback-comment:focus {
   outline: 0px;
   border-width: 2px;
}

.scxx .service-feedback {
   padding: 6px 8px;
   margin: 4px 0;
   background: #f2f2f2;
   font-family: "ceraRound";
   display: flex;
   font-weight: 500;
   color: #999;
   border-radius: 4px;
   cursor: pointer;
}

.scxx .service-feedback.selected {
   background-color: var(--s-green);
   color: #fff;
}

.scxx .service-feedback:hover {
   background-color: var(--s-purple);
   color: #fff;
}

.scxx .service-feedback:hover.selected {
   background-color: var(--s-green);
   color: #fff;
}

.scxx .service-feedback:before {
   font-size: 1.3rem;
   width: 25px;
}

.scxx .bad-result-label {
   padding-bottom: 5px;
   font-family: "ceraRound";
   font-weight: 500;
   color: var(--s-primary);
}

.scxx #bad-result-reason-other {
   width: 100%;
   border: 1px solid #ddd;
   border-radius: 4px;
   min-height: 70px;
   font-size: 1.1rem;
   color: var(--s-purple-text);
   font-family: "Outfit";
   font-size: 1.2rem;
   color: #444;
}

.scxx #bad-result-reason-other:focus {
   outline: 1px solid #cee5fe;
   box-shadow: 2px 1px 5px #b3d0fc;
   border: 0px;
}

.scxx span.eligibility-badge {
   float: right;
   font-weight: 400;
   font-size: 1rem;
   border: 1px solid #888;
   border-radius: 6px;
   padding: 0px 5px;
}

.scxx span.eligibility-badge:before {
   font-family: "icons";
   margin-right: 5px;
}

.scxx span.eligibility-badge.gender:before {
   content: "\f228";
}

.scxx span.eligibility-badge.gender.female {
   color: var(--s-purple);
   border-color: var(--s-purple);
}

.scxx span.eligibility-badge.youth {
   border: 1px solid #91caf3;
   color: #91caf3;
}

.scxx span.eligibility-badge.age:before {
   content: "\e025";
   font-size: 18px;
}

.scxx span.eligibility-badge.elderly {
   border: 1px solid #bbb;
   color: #bbb;
}

.scxx .content-text-read-more {
   background: var(--s-secondary);
}

.scxx .result-availability-title {
   text-transform: uppercase;
   font-weight: bold;
}

.scxx .result-container {
   font-size: 1rem;
}

.scxx .result-more,
.scxx .result-inappropriate {
   font-family: "CeraRound";
   font-size: 1rem;
}

.scxx .option-selection-text {
   font-family: "CeraRound";
   font-size: 1.1rem;
   color: var(--s-primary);
   border: 2px solid var(--s-primary);
   border-radius: 22px;
   padding: 5px 8px;
   transition: all 0.3s;
}

.scxx .option-selection-label {
   cursor: pointer;
}

.scxx .option-selection-label:hover .option-selection-text {
   border-color: var(--selected);
   color: var(--selected);
}

.scxx .tiles .option-selection-label:hover .option-selection-text {
   color: var(--s-secondary);
}

.scxx input:checked + .option-selection-label .option-selection-text {
   background: var(--selected);
   border-color: var(--selected);
   color: #fff;
}

.scxx input:checked + .option-selection-label .option-selection-text:hover {
   background: #73c551;
}

.scxx .option-selection-text .select-on {
   display: none;
}

.scxx input:checked + .option-selection-label .option-selection-text .select-on {
   display: block;
}

.scxx input:checked + .option-selection-label .option-selection-text .select-off {
   display: none;
}

.scxx .option-select-tick {
   color: #f2f2f2;
   border: 4px solid #f2f2f2;
   -webkit-border-radius: 50px;
   border-radius: 50px;
   font-size: 1.5rem;
   height: 30px;
   width: 30px;
   margin: 10px auto;
   -webkit-transition: all 0.3s;
   -o-transition: all 0.3s;
   transition: all 0.3s;
}

.scxx .option-select-tick:before {
   font-family: "icons";
   content: "\e80e";
}

.scxx input:checked + .option-selection-label .option-select-tick {
   color: var(--selected);
   border-color: var(--selected);
}

.scxx .pathway-navigation-panel-continue {
   background: #fff;
   color: var(--s-primary);
   margin: 0 25px;
   font-size: 1.2rem;
   border-radius: 30px;
   padding: 7px 20px;
}

.scxx .pathway-navigation-panel-continue:after {
   content: "\e854";
   font-family: "icons";
   margin-left: 10px;
}

.scxx .pathway-navigation-panel-continue:hover {
   background: #fff;
   color: var(--s-primary);
}

.scxx .pulse {
   box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
   animation: pulse 2s infinite;
}
.scxx .pulse:hover {
   animation: none;
}

@-webkit-keyframes pulse {
   0% {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
   }
   70% {
      -webkit-box-shadow: 0 0 0 9px rgba(204, 169, 44, 0);
   }
   100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
   }
}
@keyframes pulse {
   0% {
      -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
   }
   70% {
      -moz-box-shadow: 0 0 0 9px rgba(204, 169, 44, 0);
      box-shadow: 0 0 0 9px rgba(204, 169, 44, 0);
   }
   100% {
      -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
      box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
   }
}

.scxx .options-show-similar,
.scxx .results-progress-none,
.scxx .pool-header-expand-button,
.scxx .rounded-button {
   background: #fff;
   border-radius: 20px;
   padding: 6px 15px;
   font-size: 1rem;
   font-family: "CeraRound";
   color: var(--s-primary);
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   transition: all 0.3s;
   max-width: 80vw;
   white-space: normal;
}

.scxx .options-show-similar {
   margin: 0px;
}

.scxx .results-progress-none {
   color: var(--s-grey-text);
   background: none;
   box-shadow: none;
   text-decoration: underline;
}

.scxx .results-progress-none:before {
   text-decoration: none;
}

.scxx .results-progress-none:hover {
   text-decoration: none;
}

.scxx .options-show-similar.inline {
   padding: 3px 8px;
   border-radius: 4px;
   margin-left: 10px;
}

.scxx .pools-more-container {
   margin-top: 50px;
}

.scxx .pathway-search-component {
   position: relative;
}

.scxx .pathway-search-component-input {
   width: 100%;
   max-width: 380px;
   padding: 4px 10px 4px 38px;
   border-radius: 23px;
   margin: 0;
   text-align: left;
   border: 1px solid #d0dbec;
   font-size: 1.3rem;
   color: var(--s-primary);
   box-shadow: 2px 1px 5px #b3d0fc;
   transition: all 0.3s;
}

.scxx .pathway-search-component-input:focus {
   border-bottom-width: 3px;
   border-bottom-color: var(--s-primary);
   border-radius: 4px 4px 0px 0px;
   outline: none;
}

.scxx .pathway-search-component-icon {
   position: absolute;
   left: 13px;
   top: 5px;
   font-size: 1.4rem;
   color: #a7cad6;
}

.scxx .pathway-search-component-icon:before {
   font-family: "icons";
   content: "\e800";
}

.scxx .pathway-component.issue-search {
   max-width: 400px;
   margin: auto;
   opacity: 0;
   animation: scxx-fade-in 1.7s forwards 1.1s ease-out;
   position: relative;
   z-index: 1;
}

.scxx span.preferred-service {
   font-weight: 400;
   font-size: 0.9rem;
   color: var(--selected);
   border: var(--selected) 1px solid;
   border-radius: 6px;
   padding: 1px 6px;
   margin-left: 30px;
   float: right;
   position: relative;
   cursor: pointer;
}

.scxx span.preferred-service:before {
   content: "\f2b5";
   font-family: "icons";
   margin-right: 6px;
}

.scxx .preferred-service-tooltip {
   opacity: 0;
   pointer-events: none;
   position: absolute;
   width: 200px;
   bottom: 100%;
   left: 0;
   background: var(--s-primary);
   color: #fff;
   padding: 6px;
   border-radius: 6px;
   transform: translate(0px, -6px);
   transition: all 0.4s;
   box-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

.scxx .preferred-service:hover .preferred-service-tooltip {
   transform: translate(0px, -12px);
   opacity: 1;
}

.scxx .preferred-service-tooltip:before {
   font-family: "icons";
   content: "\f0dd";
   position: absolute;
   bottom: -10px;
   color: var(--s-primary);
   left: 8px;
   font-size: 22px;
   text-shadow: 2px 2px 4px rgb(0 0 0 / 10%);
}

.scxx h1 {
   font-weight: 700;
   color: var(--s-primary);
   font-size: 1.5rem;
   font-family: "CeraRound";
}

.scxx h2 {
   font-weight: 700;
   color: var(--s-secondary);
   font-size: 1.15rem;
   font-family: "CeraRound";
   margin: 5px 5px 12px 0;
}

.scxx .screen-reader-only {
   position: absolute;
   left: -10000px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.scxx .pathway-flash-message {
   font-size: 1.1rem;
   margin: 10px auto;
   padding: 4px 10px;
   border-radius: 4px;
   color: var(--s-primary);
   background: #fff;
   max-width: 800px;
   box-shadow: 1px 1px 5px 1px rgb(61 112 170 / 12%);
   max-width: 800px;
   display: flex;
   justify-content: space-between;
   min-height: 32px;
   position: relative;
   z-index: 2;
}

.scxx .pathway-flash-message-icon {
   display: flex;
   align-items: center;
}

.scxx .pathway-flash-message-icon:before {
   content: " ";
   display: block;
   background: var(--s-primary);
   width: 5px;
   height: 100%;
   border-radius: 10px;
   margin-right: 13px;
}

.scxx .pathway-flash-message-icon:after {
   content: "\e84a";
   font-family: "icons";
   margin-right: 18px;
   background: var(--s-primary);
   color: #fff;
   border-radius: 20px;
   font-size: 0.9rem;
   transform: translate(0px, -1px);
   display: inline-block;
   height: 20px;
   width: 20px;
   box-sizing: border-box;
   text-align: center;
   line-height: 21px;
}

.scxx .pathway-flash-message.success .pathway-flash-message-icon:before {
   background: var(--s-green);
}

.scxx .pathway-flash-message.success .pathway-flash-message-icon:after {
   content: "\e80e";
   background: var(--s-green);
}

.scxx .pathway-flash-message.failure .pathway-flash-message-icon:before {
   background: var(--error);
}

.scxx .pathway-flash-message.failure .pathway-flash-message-icon:after {
   color: var(--error);
   content: "\f12a";
   background: none;
   font-size: 1.2rem;
   transform: translate(0px, 3px);
}

.scxx .pathway-flash-message.failure .pathway-flash-message-text {
   color: var(--error);
}

.scxx .pathway-flash-message-text {
   align-items: center;
   display: flex;
   flex-grow: 1;
   font-size: 1rem;
   font-family: "CeraRound";
}

.scxx .pathway-flash-message-delete {
   display: flex;
   align-items: center;
   cursor: pointer;
   color: #ccc;
}

.scxx .pathway-flash-message-delete:hover {
   color: #aaa;
}

.scxx .pathway-flash-message-delete:before {
   content: "\e80f";
   font-family: "icons";
}

.scxx .pathway-error-container,
.scxx .pathway-no-results-container,
.scxx .pathway-message-container {
   max-width: 700px;
   padding: 15px;
   margin: auto;
}

.scxx .pathway-error-container:before,
.scxx .pathway-no-results-container:before {
   content: "\f12a";
   font-family: "icons";
   font-size: 6.5rem;
   opacity: 0.1;
   text-align: center;
   width: 100%;
   display: block;
   color: var(--s-secondary);
}

.scxx .pathway-no-results-container:before {
   content: "\e800";
}

.scxx .pathway-panel .question-text {
   font-size: 1.4rem;
}

.scxx .pathway-panel fieldset label {
   font-size: 1.2rem;
}

.scxx .pathway-panel button {
   color: #555;
}

.scxx .pathway-panel .pathway-navigation-panel-continue {
   color: var(--s-primary);
   border-radius: 30px;
   padding: 7px 20px;
   font-size: 1.2rem;
}

.scxx .pathway-panel .pathway-navigation-panel-continue:hover {
   background: #fff;
}

.scxx .pathway-panel .pathway-step-nav {
   font-size: 1.2rem;
   padding: 7px 23px;
   border-radius: 30px;
}

.scxx .pathway-panel .pathway-step-nav:hover {
   color: #fff;
}

.scxx .form .question-text {
   font-size: 1.2rem;
   margin-bottom: 0px;
}

.scxx .form .pathway-text-input {
   padding: 5px 15px;
   text-align: left;
   margin: 4px 0 10px 0;
}

.scxx .form .form-icon {
   font-size: 3rem;
   transform: translate(-60px, -26px);
   animation: none;
   opacity: 1;
}

.scxx .file-upload {
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1;
}

.scxx .file-upload-button {
   background: var(--s-primary);
   color: #fff;
   padding: 4px 8px;
   margin: 20px 0;
   display: inline-block;
   border-radius: 5px;
   cursor: pointer;
}

.scxx .file-upload-button:focus + label {
   outline: 2px dotted var(--s-primary);
}

.scxx .file-upload-selection {
   background: #fff;
   padding: 4px 8px;
   border-radius: 20px;
   margin: 2px 5px;
   cursor: pointer;
   border: 1px solid #fff;
   color: var(--s-grey-text);
}

.scxx .file-upload-selection:hover {
   border: 1px solid var(--s-primary);
}

.scxx .file-upload-selection-delete {
   background: #f3f1f1;
   padding: 3px 5px;
   border-radius: 20px;
   text-align: center;
   line-height: 15px;
}

.scxx .file-upload-selection-delete:before {
   content: "\e80f";
   font-family: "icons";
}

.scxx .file-upload-selection-delete:hover {
   color: #fff;
}

/* Mobile */
.scxx .mobile {
   display: none !important;
}

.scxx .desktop {
   display: block;
}

@media screen and (max-width: 800px) {
   .scxx .result-details-container {
      display: block;
   }
}

@media screen and (max-width: 520px) {
   .scxx .pool-header-text {
      width: calc(100%);
   }

   .scxx .pool-header-expand {
      flex-direction: row;
   }
}

@media screen and (max-width: 480px) {
   .scxx .mobile {
      display: block !important;
   }

   .scxx .desktop {
      display: none !important;
   }

   .scxx .large-screen {
      display: none !important;
   }

   .scxx .results-picker,
   .scxx .help-plan-container {
      max-width: 95%;
   }

   .scxx .pathway-navigation-panel-content-text {
      display: none;
   }

   .scxx .result {
      margin: 15px 0;
   }

   .scxx .result-further-info {
      align-items: center;
      justify-content: space-between;
   }

   .scxx .result-inappropriate {
      margin: 0;
   }

   .scxx .tiles label {
      width: 100%;
   }

   .scxx .option-content {
      opacity: 1;
      transform: translateY(0px);
   }

   .scxx .tiles .has-content .option-label,
   .scxx .tiles .has-content:focus .option-label,
   .scxx .tiles .has-content:hover .option-label {
      transform: translateY(0px);
   }

   .scxx .result-contact {
      padding: 0 3px 0;
   }

   .scxx .pathway-contact-group-item {
      font-size: 1rem;
   }

   .scxx .pathway-contact-group-item.phone {
      font-size: 1.2rem;
   }

   .scxx .pathway-contact-group-item.email {
      font-size: 1rem;
      word-break: break-all;
   }

   .scxx .option-select-tick {
      display: none;
   }

   .scxx .question-text,
   .scxx h1 {
      font-size: 1.5rem;
   }

   .scxx .form-icon {
      font-size: 5rem;
   }

   .scxx .results-picker,
   .scxx .help-plan-container {
      padding-top: 0;
   }

   .scxx .question-header-container {
      flex-wrap: wrap;
   }

   .scxx .question-help-text-content.show {
      position: initial;
      transform: initial;
   }
}

.scxx .rich-text-editor {
   background: #fff;
   min-width: 65vw;
}

.scxx .financial-benefit-question {
   display: flex;
   flex-wrap: wrap;
   margin: 20px 0;
}

.scxx .financial-benefit-question input,
.scxx .financial-benefit-question select {
   margin: 0 5px;
   border-radius: 4px;
   padding: 4px 8px;
   width: 100px;
   border: 1px solid #d0dbec;
   font-family: "Outfit";
   font-size: 1.2rem;
   color: var(--s-primary);
   box-shadow: 2px 1px 5px #b3d0fc;
   text-align: center;
   transition: all 0.3s;
}

.scxx .financial-benefit-question input:focus,
.scxx .financial-benefit-question select:focus {
   outline: 0;
   border-bottom: 3px solid var(--s-primary);
}

.scxx .financial-benefit-question label {
   display: flex;
   align-items: center;
   color: var(--s-primary);
   font-size: 1.2rem;
}

.scxx .financial-benefit-question label:first-child {
   width: 220px;
}

.scxx .financial-benefit-input-container {
   margin: 0 20px;
}

.scxx .financial-benefit-input-container:before {
   content: "\f154";
   font-family: "icons";
   color: var(--s-primary);
}

.scxx .last-question-small-text .pathway-question:last-child .question-text {
   font-size: 1.2rem;
   margin-bottom: 0px;
}

.scxx .pathway-content-heading {
   font-size: 1.5rem;
   margin-bottom: 15px;
}

.scxx .pathway-content-text {
   font-size: 1.1rem;
}

.scxx .pathway-content.whiteBlock {
   background: #fff;
}

.scxx .content-link {
   font-size: 1.1rem;
}

.scxx .service-accreditations {
   display: flex;
   flex-wrap: wrap;
   margin-top: 15px;
}

.scxx .accreditation-item {
   margin: 8px 4px 8px;
   display: flex;
   padding: 8px;
   border-radius: 6px;
   background: #fafafa;
   box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.15);
   color: var(--s-grey-text);
}

.scxx .accreditation-item img {
   height: 25px;
   margin-right: 12px;
}

.scxx .accreditation-item-name {
   color: #222;
}

.scxx .service-accreditation-icons {
   display: inline-block;
}

.scxx .accreditation-mini-icon {
   position: relative;
   cursor: pointer;
   margin-left: 15px;
   display: inline-block;
}

.scxx .service-accreditation-icons-inner-container {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
}

.scxx .accreditation-mini-icon img {
   max-width: 30px;
   max-height: 22px;
}

.scxx .accreditation-mini-icon-tooltip {
   position: absolute;
   width: 170px;
   background: var(--s-primary);
   padding: 2px 8px;
   border-radius: 5px;
   color: #fff;
   bottom: calc(100% + 0px);
   opacity: 0;
   pointer-events: none;
   transition: all 0.3s;
}

.scxx .accreditation-mini-icon:hover .accreditation-mini-icon-tooltip {
   opacity: 1;
   bottom: calc(100% + 5px);
}

.scxx .service-accreditation-activity {
   margin: 0 5px 2px 0;
}

.scxx #emergency-exit-container {
   position: fixed;
   right: 30px;
   top: 50vh;
   transform: rotate(270deg);
   height: 0px;
   transform-origin: right bottom;
}

.scxx #emergency-exit {
   background: var(--s-primary);
   color: #fff;
   text-decoration: none;
   padding: 5px 15px 5px 8px;
   display: block;
}

.scxx #emergency-exit:before {
   content: "\e80f";
   font-family: "icons";
   margin-right: 8px;
}

.scxx .letter {
   background: #fff;
   padding: 30px;
   width: 500px;
   border-radius: 8px;
   box-shadow: 1px 2px 8px 4px #d4e7ffab;
   position: relative;
   overflow: hidden;
   margin: 40px;
}

.scxx .letter:before {
   content: "\019C";
   font-family: "icons";
   font-size: 5rem;
   position: absolute;
   top: -3px;
   left: 0px;
   opacity: 0.1;
   color: var(--s-primary);
}

.scxx .letter-to {
   display: flex;
   justify-content: end;
}

.scxx .letter-date {
   margin-top: 8px;
}

.scxx .letter-body {
   margin-top: 20px;
}

.scxx .letter-body p {
   margin: 2px 0 0 0px;
}

.scxx .result-details-container {
   display: flex;
   margin-top: 25px;
}

.scxx .service-description-panel {
   width: calc(95% - 30vw);
}

.scxx .service-info-panel {
   min-width: 30vw;
   background: #f7fcff;
   padding: 10px 10px;
   margin: 2px 20px 10px 0;
   box-sizing: border-box;
}

.scxx .service-info-feature {
   margin: 5px 0px;
   padding: 2px 6px;
   color: var(--s-green-text);
}

.scxx .service-info-feature:before {
   content: "\e80e";
   background: var(--s-green);
   color: #fff;
   border-radius: 20px;
   font-size: 0.7rem;
   width: 19px;
   height: 19px;
   line-height: 22px;
   font-family: "icons";
   display: inline-block;
   margin-right: 7px;
   text-align: center;
}

.scxx .service-info-feature-group {
   margin: 5px 4px;
   white-space: nowrap;
   display: inline-block;
   border: 1px solid var(--selected);
   border-radius: 21px;
   padding: 1px 8px;
}

.scxx .result-details h2.service-info-panel-title {
   margin: 25px 0 12px 0;
   color: var(--s-primary);
   font-size: 1.1rem;
   border-bottom: 2px dashed #dae7eb;
   padding-bottom: 4px;
}

.scxx .result-details h2.service-info-panel-title:first-child {
   margin: 0 0 12px 0;
}

.scxx a.service-info-website:before {
   content: "\01A1";
   font-family: "icons";
   margin-right: 8px;
   text-decoration: none;
   display: inline-block;
}

.scxx .service-info-panel .result-inappropriate {
   float: right;
}

.scxx .service-info-panel .delivery-tag {
   background: #fff;
   font-size: 0.95rem;
   box-shadow: 1px 1px 1px rgb(30 107 155 / 22%);
   border-radius: 2px;
   font-family: "CeraRound";
   color: var(--s-primary);
}

.scxx .service-info-panel .delivery-tag:before {
   font-size: 0.95rem;
   transform: translateY(1px);
}

.scxx .service-info-item {
   margin-top: 25px;
   display: flex;
   justify-content: space-between;
}

.scxx .service-info-label {
   color: var(--s-primary);
   margin-bottom: 5px;
   font-family: "Outfit";
}

.scxx .service-info-faq {
   margin: 20px 0;
}

.scxx .service-info-accordion-content {
   display: none;
   padding: 8px 12px;
   margin-bottom: 20px;
}

.scxx .service-info-accordion-toggle.open + .service-info-accordion-content {
   display: block;
}

.scxx .service-info-accordion-toggle {
   position: relative;
   margin: 10px 8px 0 0px;
   padding: 11px 25px 11px 38px;
   display: block;
   width: 100%;
   text-align: left;
   background: none;
   color: var(--s-primary);
   border-radius: 0px;
   box-sizing: border-box;
   box-shadow: none;
   transition: all 0.2s;
}

.scxx .service-info-accordion-toggle.open,
.scxx .service-info-accordion-toggle.open:focus {
   border-bottom: none;
}

.scxx .service-info-accordion-toggle:focus {
   border-style: solid;
   border-top: none;
   border-right: none;
   border-bottom: 1px solid #dce8f3;
}

.scxx .service-info-accordion-toggle,
.scxx .service-info-accordion-content {
   border-bottom: 1px solid #dce8f3;
   border-left: 0px solid var(--s-link);
}

.scxx .service-info-accordion-toggle:before {
   position: absolute;
   left: 4px;
   top: 14px;
   width: 25px;
   text-align: center;
}

.scxx .service-info-accordion-toggle:after,
.scxx .preferences-panel-set-toggle-title:after {
   content: "\e811";
   font-family: "icons";
   position: absolute;
   right: 10px;
   font-size: 0.8rem;
   border: 2px solid var(--s-primary);
   border-radius: 30px;
   width: 17px;
   height: 17px;
   text-align: center;
   line-height: 19px;
   opacity: 0.8;
}

.scxx .service-info-accordion-toggle.open:after,
.scxx .preferences-panel-set.expanded .preferences-panel-set-toggle-title:after {
   content: "\e812";
}

.scxx .service-info-accordion-toggle:hover {
   background: none;
   color: var(--s-link);
}

.scxx .service-info-accordion-toggle:hover,
.scxx .service-info-accordion-toggle.open,
.scxx .service-info-accordion-content {
   border-left: 3px solid var(--s-link);
}

.scxx .service-info-accordion-toggle:hover:after,
.scxx .preferences-panel-set-toggle:hover .preferences-panel-set-toggle-title:after {
   opacity: 1;
   border: 2px solid var(--s-link);
}

.scxx .service-info-accordion-toggle.open:after {
   content: "\e812";
}

.scxx .service-info-accordion-content .pathway-contact-instructions {
   font-size: 1rem;
}

.scxx .service-info-accordion-toggle:focus:hover {
   border-width: 0 0 0 3px;
   border-left: 3px solid var(--s-link);
}

.scxx .smart-pools .results-picker-alternative-pool:hover {
   border: 1px solid var(--s-primary);
}

.scxx #qrcode img {
   border: 10px solid #fff;
   border-radius: 2px;
   margin: 25px auto;
}

.scxx .results-picker-pool {
   margin-top: 45px;
}

@media screen and (max-width: 800px) {
   .scxx .result-details-container {
      display: block;
   }

   .scxx .service-description-panel {
      width: 100%;
   }
}

@media screen and (max-width: 700px) {
   .scxx .smart-pool .pool-header {
      display: block;
   }

   .scxx .smart-pool.minimized .pool-header-text {
      width: 100%;
   }

   .scxx .smart-pool.minimized .pool-header-expand {
      display: block;
      text-align: center;
   }

   .scxx .pool-help-text {
      max-width: none;
   }

   .scxx .options-show-similar-container {
      margin-top: 45px;
   }

   .scxx .smart-pool.minimized.has-help-text .pool-explanation:before {
      font-size: 2rem;
      width: 30px;
   }

   .scxx .smart-pool.minimized .pool-explanation,
   .scxx .smart-pool.minimized .pool-help-text {
      padding-left: 45px;
   }
}

.scxx .mini-pools-container {
   display: flex;
   flex-wrap: wrap;
   margin-top: 45px;
}

.scxx .mini-pools-container:empty {
   display: none;
}

.scxx .mini-pools-container .smart-pool:first-child {
   margin-top: 0px;
}

.scxx .smart-pool.minimized.alternative {
   display: flex;
   align-items: center;
   width: 180px;
   text-align: center;
   margin: 4px 10px 4px 4px;
}

.scxx .smart-pool.minimized.alternative .pool-header {
   width: 100%;
}

.scxx .smart-pool.alternative.minimized .pool-header-text {
   width: 100%;
}

.scxx .smart-pool.minimized.alternative .pool-explanation {
   margin: 4px 8px;
}

.scxx .smart-pool.minimized.alternative .pool-explanation:before {
   text-align: left;
   font-size: 1.4rem;
}

.scxx .smart-pool.minimized.alternative .pool-explanation {
   padding-left: 28px;
   font-size: 1rem;
   min-height: 40px;
}

.scxx .smart-pool.alternative .pool-help-text,
.scxx .smart-pool.alternative .pool-header-expand {
   display: none;
}

.scxx .smart-pool.alternative.expanded .pool-help-text {
   display: block;
   background: #fff;
   padding: 2px 8px;
   border-radius: 6px;
}

.scxx .smart-pool.alternative.expanded .pool-help-text:before {
   content: "\e825";
   font-family: "icons";
   color: var(--s-primary);
   opacity: 0.5;
   margin-right: 10px;
}

.scxx .pool-help-text-badge {
   position: absolute;
   right: -15px;
   top: -15px;
   background: var(--s-blue);
   cursor: pointer;
   color: #fff;
   border-radius: 30px;
   width: 18px;
   display: inline-block;
   height: 18px;
   line-height: 18px;
   text-align: center;
   padding: 0px;
}

.scxx .pool-help-text-badge:before {
   content: "\019B";
   font-family: "icons";
   font-size: 0.9rem;
   font-weight: 400;
   margin: 0;
   padding: 0;
}

.scxx .service-info-seasonal {
   margin-bottom: 6px;
}

.scxx .service-tag {
   font-size: 0.95rem !important;
   font-weight: 400 !important;
   background: #eff7fc;
   border-radius: 4px;
   margin: 2px 8px;
   padding: 0 4px;
   font-family: outfit !important;
   color: #4988ba !important;
}

.scxx .service-tag:before {
   font-size: 1.05rem;
}

.scxx .star-container {
   display: flex;
   justify-content: center;
}

.scxx .star-question label {
   width: 27px;
   background: #fff;
   display: inline-block;
   text-align: center;
   border-radius: 4px;
   font-family: "CeraRound";
   color: var(--s-primary);
   font-size: 1.1rem;
   margin: 5px 2px 25px 2px;
   cursor: pointer;
}

.scxx .star-question .label {
   font-family: "CeraRound";
   color: var(--s-primary);
   font-size: 1.3rem;
}

.scxx .star-question input:checked + label {
   background: var(--selected);
   color: #fff;
}

.scxx .star-container-chart {
   width: 600px;
}

.scxx .star-container-questions {
   width: 350px;
}