:root {
   --s-primary: #1a73c1;
   --s-primary-light: #5dc2e6;
   --s-secondary: #573877;
   --s-secondary-light: #8a68ac;
   --s-purple-text: #423d59;
   --s-grey: #666;
   --s-grey-text: #767676;
   --s-grey-light: #f9f9f9;
   --s-blue: #57a6e9;
   --s-blue-dark: #1572ba;
   --s-blue-dark-hover: #2084d2;
   --s-blue-light: #ecf7fb;
   --s-blue-grey-light: #eff6fb;
   --s-blue-light-hover: #e4f0ff;
   --s-link: #1b70b1;
   --s-link-hover: #57a6e9;
   --s-button-secondary: #896bb5;
   --s-button: #056fcc;
   --s-button-secondary-hover: #9474c3;
   --s-button-hover: #5daff5;

   --s-purple: #573877;
   --s-purple-hover: #7347b2;
   --s-purple-bright: #7351a5;
   --s-purple-light: #f7f6fd;
   --s-green: #89c835;
   --s-green-hover: #9cda49;
   --s-green-text: #557d21;
   --s-red: #d01717;
   --s-orange: #faae3e;
   --s-orange-hover: #efa73c;
   --s-orange-text: #b35f00;

   --focus-border: #94c4ed;
   --focus-shadow: rgb(46 115 157 / 47%);
}

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

body.scxx,
.scxx {
   font-family: "Outfit", "Helvetica", "Arial";
   color: #444;
   margin: 0;
   font-size: 17px;
   background: var(--background);
   background: linear-gradient(180deg, rgba(240, 247, 252, 1) 35%, rgba(230, 242, 250, 1) 100%);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
}

.scxx .page-wrapper {
   display: flex;
   height: 100vh;
}

.scxx .page-side-bar-container {
   flex: 0 0 325px;
   height: 100%;
   box-sizing: border-box;
   background: #fff;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   padding: 20px;
   z-index: 1;
}

.scxx .page-container {
   flex: 1;
   overflow-y: auto;
}

.scxx input {
   font-family: "Outfit";
   font-size: 1.1rem;
}

.scxx input:-webkit-autofill,
.scxx input:-webkit-autofill:hover,
.scxx input:-webkit-autofill:focus,
.scxx input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.scxx .centre {
   text-align: center;
}

.scxx .block.top-align {
   height: 100%;
   padding-top: 50px;
}

.scxx .block-notice {
   background: #e4f1ff;
   font-family: "CeraRound";
   font-size: 1.5rem;
   padding: 20px;
   color: #0a608f;
   min-height: 30vh;
}

.scxx .text-block {
   padding: 10px 10vw;
}

.scxx .lead-text {
   font-family: "CeraRound";
   font-size: 1.3rem;
   padding: 20px;
   color: #0a608f;
}

.scxx a {
   color: var(--s-link);
}

.scxx a.underline-hover {
   text-decoration: none;
   cursor: pointer;
}
.scxx a.underline-hover:hover {
   text-decoration: underline;
}

.scxx a.underline-hover:hover:before {
   text-decoration: none;
}

.scxx a:hover {
   color: var(--s-link-hover);
}

.scxx a.button {
   text-decoration: none;
   font-size: 14pt;
}

.scxx .block {
   padding: 20px;
   justify-content: center;
   display: flex;
   flex-direction: column;
}

.scxx h2 {
   font-family: "Outfit";
   font-weight: 500;
   font-size: 1.15rem;
}

.scxx .jq-toast-heading h2 {
   color: #fff;
}

.scxx .text-center {
   text-align: center;
}

.scxx .text-left {
   text-align: left;
}

.scxx .text-right {
   text-align: right;
}

.scxx .panel {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   overflow: hidden;
   flex-grow: 1;
}

.scxx .panel.full-height {
   min-height: 80vh;
   display: flex;
   flex-direction: column;
   justify-content: start;
}

.scxx .panel > .full-width {
   width: 100vw;
}

.scxx .panel.vertical {
   flex-direction: column;
}

.scxx .bg-blue {
   background: var(--s-blue-light);
   background: linear-gradient(180deg, rgba(240, 247, 252, 1) 35%, rgba(230, 242, 250, 1) 100%);
}

.scxx .bg-blue-grey {
   background: var(--s-blue-grey-light);
}

.scxx .bg-grey {
   background: var(--s-grey-light);
}

.scxx .bg-white {
   background: #fff;
}

.scxx .app-margin {
   margin-top: 65px;
}

.scxx #mapwm-large-m {
   position: absolute;
   height: 70vh;
   right: -8vh;
   top: -5vw;
   max-width: 50%;
   pointer-events: none;
}

.scxx .button.pill.large.circle-icon.dual-language {
   padding: 4px 26px 8px 54px;
   background: none;
   color: var(--s-primary);
   border: 2px solid var(--s-primary);
   font-size: 14pt;
}

.scxx .button.pill.large.circle-icon.dual-language:hover {
   border-color: var(--s-secondary);
   color: var(--s-secondary);
}

.scxx button.link {
   background: none;
   color: var(--s-link);
   text-decoration: underline;
   padding: 2px 0px;
   margin: 1px 6px;
}

.scxx button.link:hover {
   color: var(--s-link-hover);
   background: none;
}

.scxx button.link:before {
   text-decoration: none;
}

.scxx .notice-bar {
   background: #fff;
   border-radius: 6px;
   color: #69a21c;
   position: relative;
   padding: 4px 4px 4px 28px;
   text-align: left;
}

.scxx .notice-bar:before {
   content: "\e84a";
   font-family: "icons";
   font-size: 1.5rem;
   color: #fff;
   position: absolute;
   left: -9px;
   top: -1px;
   border-radius: 20px;
}

.scxx .notice-bar.success {
   background: #f5ffeb;
}

.scxx .notice-bar.success:before {
   content: "\e80e";
   background: var(--s-green);
   width: 28px;
   height: 28px;
   line-height: 30px;
   text-align: center;
   font-size: 1.2rem;
}

.scxx .notice-bar.error {
   background: #ffdada70;
   color: var(--s-red);
}

.scxx .notice-bar.error:before {
   content: "\f12a";
   color: var(--s-red);
   font-size: 1.9rem;
}

.scxx .notice-bar.error button.link {
   color: var(--s-red);
}

.scxx img.button-circle {
   height: 40px;
   width: 40px;
   position: absolute;
   left: 5px;
   top: 5px;
   border-radius: 50px;
}

.scxx .dual-language-item {
   line-height: 19px;
}

.scxx .dual-language-item.small {
   font-size: 1rem;
}

.scxx p {
   padding: 8px;
}

.scxx .feature {
   font-family: "Outfit";
   font-size: 3.5rem;
   font-weight: 600;
   color: var(--s-primary);
}

.scxx #page-container {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 100vh;
}

.scxx .page-header,
.scxx .page-header-left {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   font-family: "Outfit";
   font-weight: 600;
   background: #fff;
}

.scxx .page-header {
   padding: 0px;
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
   z-index: 21;
}

.scxx .page-header-left {
   justify-content: start;
}

.scxx .header-right {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   padding: 0 4px 0 10px;
   flex-grow: 1;
}

.scxx #site-logo {
   font-family: "Outfit";
   font-weight: 700;
   font-style: normal;
   color: #2f3242;
   font-size: 22px;
   padding: 8px 40px 8px 15px;
}

.scxx .header-logo-large {
   width: 220px;
   margin-left: 20px;
   margin-top: 10px;
}

.scxx #main-nav {
   flex-grow: 1;
   display: flex;
   justify-content: end;
}

.scxx footer {
   padding: 5px;
   font-family: "Outfit";
   color: #666;
   margin: 40px 0 0 0;
   display: block;
   box-sizing: border-box;
   background-color: #f6f6f6;
   clip-path: ellipse(168% 100% at 40.56% 100%);
}

.scxx footer.no-margin {
   margin: 0;
}

.scxx .content-meta {
   display: flex;
   justify-content: end;
   color: var(--s-grey-light);
}

.scxx .content-meta-item {
   margin: 0 15px;
}

/* --------------------------------------------------- Buttons -------------------------------------------- */

.scxx button,
.scxx .button {
   font-family: "Outfit";
   font-size: 1rem;
   font-weight: 500;
   margin: 5px 5px;
   position: relative;
   padding: 5px 8px;
   border-radius: 5px;
   border: 0px;
   white-space: nowrap;
   display: inline-block;
   cursor: pointer;
   background: var(--s-button);
   color: #fff;
}

.scxx button.slim,
.scxx .button.slim {
   padding: 3px 6px;
   margin: 4px;
   font-size: 12pt;
}

.scxx button.pill,
.scxx .button.pill {
   background: var(--s-button);
   color: #fff;
   border-radius: 50px;
   font-family: "Outfit";
   font-weight: 500;
   font-size: 1.1rem;
   padding: 4px 15px;
   margin: 8px;
   -webkit-transition: 0.3s all;
   -o-transition: 0.3s all;
   transition: 0.3s all;
}

.scxx button.pill.large,
.scxx .button.pill.large {
   padding: 10px 20px;
   font-size: 14pt;
}

.scxx button:hover,
.scxx .button:hover {
   background: var(--s-button-hover);
   color: #fff;
}

.scxx button.round {
   border-radius: 30px;
}

.scxx button.round:before {
   margin-right: 0;
}

.scxx button.blue,
.scxx .button.blue {
   background: var(--s-blue-light);
   color: var(--s-blue-dark);
}

.scxx button.blue:hover,
.scxx .button.blue:hover {
   background: var(--s-blue-light-hover);
   color: var(--s-blue-dark-hover);
}

.scxx button.blue-light,
.scxx .button.blue-light {
   background: #ebf3ff;
   color: #1969a7;
   font-weight: 400;
   font-size: 1.1rem;
}

.scxx button.blue-light:hover,
.scxx .button.blue-light:hover {
   background: var(--s-blue-light-hover);
   color: var(--s-blue-dark-hover);
}

.scxx button.green,
.scxx .button.green {
   background: var(--s-green);
   color: #fff;
}

.scxx button.green:hover,
.scxx .button.green:hover {
   background: var(--s-green-hover);
}

.scxx button.purple,
.scxx .button.purple {
   background: var(--s-purple-bright);
   color: #fff;
}

.scxx button.purple:hover,
.scxx .button.purple:hover {
   background: var(--s-button-secondary-hover);
}

.scxx button.grey,
.scxx .button.grey {
   background: #f6f6f6;
   color: #707070;
   box-shadow: 1px 1px 2px rgb(0 0 0 / 12%);
}

.scxx button.grey:hover,
.scxx .button.grey:hover {
   background: #eeeeee;
   color: #666;
}

.scxx .button.outline {
   background: none;
   border: 2px solid var(--s-secondary);
   color: var(--s-secondary);
}

.scxx button.fullwidth,
.scxx .button.fullwidth {
   width: 100%;
   margin: 10px 5px;
   box-sizing: border-box;
}

.scxx .instruction {
   margin: 45px 0px;
   font-weight: bold;
   color: var(--s-blue-dark);
}

.scxx .loading:before,
.scxx .loading:before {
   content: "\f110" !important;
   font-family: "icons";
   animation: scxx-spin 2.2s infinite linear;
   display: inline-block;
   height: 22px;
   font-size: 21px;
}

.scxx .feature-search {
   display: flex;
}

.scxx .feature-search input {
   background: #f6f6f6;
   border: 0px;
   padding: 10px 20px;
   border-radius: 30px 0 0 30px;
   min-width: 40%;
   font-family: "Outfit";
   font-size: 1.1rem;
}

.scxx .feature-search input::placeholder {
   color: #bbb;
}

.scxx button.feature-search-submit {
   margin: 0;
   border: 0px;
   padding: 0px;
   font-size: 1.1rem;
   background: none;
   color: #777;
}

.scxx .feature-search-submit:before {
   background: #f6f6f6;
   padding: 14px;
   border-radius: 0 30px 30px 0;
   font-family: "icons";
   content: "\e800";
}

.scxx .primary-logo {
   height: 60px;
}

.scxx img.primary-logo.primary-logo-small {
   margin: 10px 5px 5px 20px;
   height: 40px;
}

.scxx .h1-logo-small {
   width: 100px;
   margin-left: 30px;
   margin-top: 10px;
   height: auto;
}

.scxx .partner-logo {
   width: 180px;
}

.scxx .partner-logo.eu {
   width: 110px;
}

.scxx .partner-logo-container {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
}

.scxx .partner-logo-item {
   margin: 0 30px;
   display: flex;
   align-items: center;
}

.scxx .partner-logo-text {
   max-width: 300px;
   padding: 0 30px;
   display: inline-block;
   font-size: 0.95rem;
}

.scxx .panel-centre-content-title {
   margin: 20px auto;
   width: 100%;
   text-align: center;
   font-family: "CeraRound";
   font-size: 1.3rem;
   color: var(--s-secondary);
}

.scxx .panel-centre-content-title.left {
   text-align: left;
   padding: 0 20px;
}

.scxx .panel-centre-content {
   margin: 10px auto 60px;
   padding: 20px;
   border-radius: 6px;
   background: #fff;
   min-width: 45vw;
   max-width: 93vw;
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
}

.scxx .panel-centre-content.transparent {
   background: none;
   box-shadow: none;
}

.scxx .panel-centre-content.wide {
   min-width: 95vw;
   flex-grow: 1;
   box-sizing: border-box;
}

.scxx .cms-page-container {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
}

.scxx h1 {
   font-family: "Poppins";
   font-size: 1.3rem;
   color: var(--s-secondary);
}

.scxx h3 {
   font-family: "Poppins";
   font-size: 1.1rem;
   color: var(--s-secondary);
}

.scxx .badge,
.scxx .menu-badge {
   color: #fff;
   border-radius: 30px;
   background: var(--s-purple);
   padding: 0 4px;
   margin: 0 3px;
   font-size: 0.9rem;
   display: inline-block;
   position: absolute;
   font-family: "Poppins";
   font-weight: "bold";
   height: 16px;
   line-height: 15px;
   min-width: 8px;
   text-align: center;
}

.scxx .button-badge {
   transform: translate(-2px, -11px);
}

.scxx .badge.pink {
   background: #ff8585;
}

.scxx .page-section-header {
   font-family: "Poppins";
   font-weight: "bold";
   font-size: 1.3rem;
   padding: 10px 23px;
   border-bottom: 3px solid var(--s-purple);
   color: var(--s-purple);
   margin-bottom: 0px;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.scxx .explainer-text {
   color: var(--s-grey-text);
   margin: 10px 5px;
}

/* Page menu */

.scxx #page-menu {
   display: flex;
   justify-content: space-between;
   margin: 20px 20px 20px 10px;
}

.scxx #page-menu-title {
   font-size: 1.3rem;
   color: var(--s-secondary);
   font-family: "CeraRound";
   margin: 0 0 0 20px;
}

.scxx #page-menu-actions {
   display: flex;
   flex-wrap: wrap;
}

.scxx #page-menu-actions > * {
   display: block;
   box-sizing: border-box;
   margin: 4px;
}

.scxx a.page-menu-button {
   text-decoration: none;
}

.scxx .page-menu-button,
.scxx .page-menu-dropdown-parent {
   color: var(--s-primary);
   padding: 5px 12px;
   border: 2px solid var(--s-primary);
   border-radius: 25px;
   margin: 0 5px;
   transition: all 0.3s;
   background-color: rgba(255, 255, 255, 0);
   font-family: "Poppins";
   font-weight: 500;
   font-size: 1rem;
   text-decoration: none;
}

.scxx .page-menu-button:hover {
   background: none;
   color: var(--s-secondary);
   border-color: var(--s-secondary);
}

.scxx .page-menu-dropdown {
   list-style: none;
   display: inline-block;
   position: relative;
   min-width: 238px;
}

.scxx .page-menu-dropdown ul {
   position: absolute;
   top: 100%;
   left: 5px;
   list-style: none;
   background: #fff;
   color: var(--s-blue-transparent);
   margin: 0;
   padding: 0 0 8px 8px;
   box-sizing: border-box;
   width: calc(100% - 10px);
   z-index: 1;
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.1);
   border-radius: 0 0 15px 15px;
   opacity: 0;
   pointer-events: none;
   transition: all 0.3s;
   transition-delay: 0.2s;
}

.scxx .page-menu-dropdown:hover ul {
   opacity: 1;
   pointer-events: all;
}

.scxx .page-menu-dropdown-parent {
   display: inline-block;
   transition: all 0.3s;
   min-width: 100px;
}

.scxx .page-menu-dropdown:hover .page-menu-dropdown-parent {
   background: #fff;
   color: #ccc;
   border-radius: 18px 18px 0px 0px;
   min-width: 200px;
}

.scxx .page-menu-dropdown ul a {
   color: var(--s-blue-transparent);
   text-decoration: none;
   padding: 6px 13px;
   display: block;
}

.scxx .page-menu-dropdown ul a:hover {
   color: var(--s-blue);
}

.scxx .page-menu-dropdown ul a:last-child {
   border-radius: 0 0 15px 15px;
}

.scxx .image-content-block {
   display: flex;
   padding: 0 5vw;
   margin: 20px 0 40px;
   box-sizing: border-box;
}

.scxx .image-content-block-container-image {
   min-width: 25vw;
   text-align: center;
}

.scxx .image-content-block-container-image img {
   max-width: 98%;
}

.scxx .image-content-block-container-text {
   flex-grow: 1;
}

.scxx .bullet-points li {
   margin: 10px 0;
}

/*
.dropdown:hover ul {
   display: block;
}
*/

.scxx .big-icon-container {
   background: #e6e8fb;
   background: linear-gradient(178deg, #f0f1ff 0%, #e3e5f6 100%);
   border-radius: 200px;
   width: 200px;
   height: 200px;
   margin: 50px auto !important;
   display: flex;
   align-items: center;
   justify-content: center;
}

.scxx .big-icon {
   font-size: 5rem;
   opacity: 0.9;
   color: var(--s-secondary);
}

.scxx .big-icon.light {
   opacity: 0.3;
}

.scxx .loading-overlay {
   position: relative;
}

.scxx .loading-overlay:before {
   content: " ";
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   display: flex;
   background: rgb(246 250 252 / 76%);
   z-index: 10;
   border-radius: 40px;
}

.scxx .loading-overlay:after {
   font-family: "icons";
   display: inline-block;
   animation: scxx-spin 2.5s infinite linear;
   color: #42a4fc;
   content: "\e845";
   margin-right: 6px;
   position: absolute;
   top: calc(50% - 47px);
   left: calc(50% - 47px);
   font-size: 7rem;
   display: block;
   width: 105px;
   height: 105px;
   text-align: center;
   padding: 0 0 3px 0px;
}

.scxx .circular-loading-parent {
   position: relative;
}

.scxx .circular-loading-overlay-container {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   background: rgb(240 247 252 / 80%);
   display: flex;
}

.scxx .circular-loading-overlay,
.scxx .circular-loading-overlay:after {
   border-radius: 50%;
   width: 8em;
   height: 8em;
}

.scxx .circular-loading-overlay {
   margin: 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;
}

.scxx .spinner-scale-in.circular-loading-overlay,
.scxx .spinner-scale-in.circular-loading-overlay:after {
   animation: scxx-spinner-animate-in 0.2s forwards ease-out;
}

.scxx .spinner-scale-out.circular-loading-overlay,
.scxx .spinner-scale-out.circular-loading-overlay:after {
   animation: scxx-spinner-animate-out 0.8s forwards ease-out;
}

.scxx .circular-loading-overlay-messages {
   position: absolute;
   left: 0;
   top: calc(50% + 70px);
   text-align: center;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   font-family: "CeraRound";
   color: var(--s-purple);
   font-size: 1.3rem;
}

@keyframes scxx-spinner-animate-in {
   0% {
      width: 5em;
      height: 5em;
      opacity: 0;
      -webkit-transform: rotate(-60deg);
      transform: rotate(-60deg);
   }
   80% {
      width: 8.3em;
      height: 8.3em;
      opacity: 0.8;
      -webkit-transform: rotate(-8deg);
      transform: rotate(-8deg);
   }
   100% {
      width: 8em;
      height: 8em;
      opacity: 1;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
}

@keyframes scxx-spinner-animate-out {
   0% {
      width: 8em;
      height: 8em;
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   20% {
      width: 8.3em;
      height: 8.3em;
      opacity: 1;
      transform: rotate(20deg);
   }
   100% {
      width: 5em;
      height: 5em;
      opacity: 0;
      -webkit-transform: rotate(40deg);
      transform: rotate(40deg);
   }
}

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

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

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

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

@-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);
   }
}

@media screen and (max-width: 480px) {
   .scxx .block {
      padding: 5px;
   }

   .scxx .primary-logo {
      max-width: 150px;
   }

   .scxx .panel-centre-content {
      margin: 0;
      padding: 5px;
      max-width: none;
   }

   .scxx .reflection-item-responses {
      text-align: center;
   }
}

.scxx .jq-icon-success {
   color: #fff;
   background-color: var(--s-green);
}

.scxx .result-more,
.scxx .help-plan-read-more {
   cursor: pointer;
   background: none;
   color: var(--s-link);
   padding: 2px 2px;
   border-radius: 0;
   margin: 2px 10px;
   display: inline-block;
   border: 2px solid #fff;
   line-height: 12px;
   text-decoration: underline;
}

.scxx .result-more:after,
.scxx .help-plan-read-more:after {
   content: "\f0dd";
   font-family: "icons";
   display: inline-block;
   margin-left: 4px;
}

.scxx .result-more.open:after,
.scxx .help-plan-read-more.open:after {
   content: "\f0de";
}

.scxx .result-more:hover,
.scxx .help-plan-read-more:hover {
   background-color: #fff;
   color: var(--s-primary);
}

.scxx .result-more:focus,
.scxx .help-plan-read-more:focus {
   color: var(--s-primary);
   text-decoration: none;
}

@media screen and (max-width: 450px) {
   .scxx footer {
      padding: 30px 0px 0 0;
   }

   .scxx #mapwm-large-m {
      max-width: 70%;
      opacity: 0.1;
   }

   .scxx .partner-logo-item {
      margin: 0 10px;
   }

   .scxx .partner-logo {
      width: 110px;
   }

   .scxx .partner-logo-text {
      max-width: unset;
      padding: 5px 15px;
   }
}

.scxx .spacer-small {
   height: 50px;
}

.scxx .spacer-medium {
   height: 100px;
}

.scxx .spacer-large {
   height: 150px;
}

.scxx .error-notice,
.scxx .success-notice {
   display: inline-block;
   color: #d01717;
   margin: 10px 0;
   background: #fff;
   border-radius: 5px;
   padding: 12px 25px;
}

.scxx .success-notice {
   color: #62cf62;
}

.scxx .test-bar {
   border: 1px solid var(--s-secondary);
   color: var(--s-secondary);
   padding: 4px 8px;
   border-radius: 4px;
   font-size: 1rem;
}

.scxx .org-avatar,
.scxx .user-avatar {
   width: 40px;
   height: 40px;
   overflow: hidden;
   border-radius: 20px;
   display: inline-block;
   box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 5%);
   margin-right: 15px;
}

.scxx .org-avatar img {
   height: 40px;
}

.scxx .user-avatar {
   background: #d57a52;
   color: #fff;
   text-align: center;
   font-size: 1.5rem;
   line-height: 40px;
}

.scxx .help-badge {
   color: var(--s-blue);
   cursor: pointer;
}

.scxx .help-badge:after {
   content: "\e825";
   font-family: "icons";
   font-size: 1.2rem;
   margin-left: 6px;
}

.scxx .help-badge:hover {
   color: var(--s-purple);
}

.scxx .cms-attachments-container h2 {
   margin: 10px;
}

.scxx .cms-attachments-container .file-downloads {
   margin: 10px 0 40px 0;
}

.scxx .file-downloads {
   display: flex;
   margin-top: 50px;
}

.scxx .file-download-container {
   display: flex;
   border-radius: 6px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
   padding: 10px 12px;
   text-decoration: none;
   border: 1px solid #fff;
   transition: all 0.3s;
   margin: 2px 10px;
}

.scxx .file-download-container:hover {
   border: 1px solid var(--s-blue);
}

.scxx .file-download-icon {
   display: flex;
   align-items: center;
   color: #dedada;
   margin: 0 8px;
   font-size: 1.3rem;
}

.scxx .file-download-container:hover .file-download-icon {
   color: var(--s-blue);
}

.scxx .file-download-name {
   display: flex;
   align-items: center;
   font-weight: 600;
   font-size: 0.95rem;
   color: #456ba3;
}

.scxx .file-download {
   background: #dff0ff;
   display: block;
   width: 40px;
   height: 40px;
   border-radius: 40px;
   font-size: 1.7rem;
   text-align: center;
   line-height: 38px;
   font-weight: 600;
   margin-left: 20px;
}

.scxx .file-download:before {
   content: "\019A";
   font-family: "icons";
}

.scxx .breadcrumbs {
   margin-bottom: 12px;
}

.scxx .breadcrumbs a,
.scxx .breadcrumbs span {
   margin: 0 10px 0 0;
}

.scxx .breadcrumbs a:before {
   text-decoration: none;
}

.scxx .gc-ref:before {
   content: "\e825";
   font-family: "icons";
   color: var(--s-purple);
   transform: translate(1px, -4px);
   display: inline-block;
   padding-right: 3px;
   cursor: pointer;
}

.scxx .gc-ref:before:hover {
   color: var(--s-blue);
}

.scxx .glossary-heading {
   font-size: 1.1rem;
   font-weight: bold;
   color: var(--s-secondary);
   width: 100%;
   padding: 5px 10px 0;
}

.scxx button.glossary-listen {
   color: var(--s-blue);
   background: #fff;
   border: 2px solid var(--s-blue);
   margin: 12px 0 0 20px;
}

.scxx button.glossary-listen:hover {
   color: #fff;
   background: var(--s-blue);
}

.scxx .glossary-listen:before {
   content: "\e837";
   font-family: "icons";
   margin-right: 5px;
   font-size: 1.2rem;
}

@media print {
   .scxx .gc-ref {
      display: none;
   }
}

.scxx .translation-component {
   padding: 2px 6px 2px 4px;
   display: flex;
   background: #f7f7f7;
   color: #206bab;
   margin: 4px 0;
}

.scxx .translation-component:hover {
   background: var(--s-blue);
   color: #fff;
}

.scxx .translation-component:before {
   content: "\e085";
   font-family: "icons";
   font-size: 1.6rem;
   display: block;
   margin: auto 6px auto 4px;
   transform: translateY(3px);
}

.scxx .translation-component-label:first-child {
   height: 16px;
   text-align: left;
}

.scxx .invalid-message-float {
   position: relative;
   padding-top: 20px;
}

.scxx .invalid-message-float .form-element-invalid-message {
   position: absolute;
   top: 1px;
   z-index: 1;
}

.scxx .form-element-invalid-message {
   color: var(--s-red);
   font-size: 1rem;
   display: none;
}

.scxx .invalid .form-element-invalid-message {
   display: block;
}

.scxx .form-element-invalid-message:before {
   content: "\f12a";
   font-family: "icons";
   margin-right: 5px;
}

.scxx .light-container {
   background: #f8fafc;
   padding: 12px 10px;
   border-radius: 6px;
   display: flex;
   flex-direction: column;
}

.scxx .light-item {
   display: flex;
   justify-content: space-between;
   position: relative;
   padding: 6px 10px 6px 10px;
   background: #fff;
   margin: 6px 0;
   border-radius: 0 6px 6px 0;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
   border-left: 3px solid #ddd;
}

.scxx .light-item-has-icon {
   padding-left: 65px;
}

.scxx .light-item.pending {
   color: #6f6e6e;
   border: 2px dashed #ddd;
   box-shadow: none;
   border-radius: 5px;
   margin: 6px 0 5px 9px;
}

.scxx .light-item-icon {
   position: absolute;
   left: 15px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.5rem;
   color: #fff;
   background: #ddd;
   border-radius: 50px;
   width: 32px;
   height: 32px;
   text-align: center;
   padding: 2px;
}

.scxx .item-color-1.light-item {
   border-color: #b2cf47;
}

.scxx .item-color-1 .light-item-icon {
   background: #b2cf47;
}

.scxx .item-color-2.light-item {
   border-color: #8ddfdb;
}

.scxx .item-color-2 .light-item-icon {
   background: #8ddfdb;
}

.scxx .item-color-3.light-item {
   border-color: #9077b5;
}

.scxx .item-color-3 .light-item-icon {
   background: #9077b5;
}

.scxx .item-color-4.light-item {
   border-color: #e5ac6b;
}

.scxx .item-color-4 .light-item-icon {
   background: #e5ac6b;
}

.scxx .item-color-5.light-item {
   border-color: #ce76ae;
}

.scxx .item-color-5 .light-item-icon {
   background: #ce76ae;
}

.scxx .item-color-6.light-item {
   border-color: #7fd28d;
}

.scxx .item-color-6 .light-item-icon {
   background: #7fd28d;
}

.scxx .item-color-7.light-item {
   border-color: #6d87c8;
}

.scxx .item-color-7 .light-item-icon {
   background: #6d87c8;
}

.scxx .item-color-8.light-item {
   border-color: #f5b8a0;
}

.scxx .item-color-8 .light-item-icon {
   background: #f5b8a0;
}

.scxx .item-color-9.light-item {
   border-color: #79cee4;
}

.scxx .item-color-9 .light-item-icon {
   background: #79cee4;
}

.scxx .icon-color-1:before {
   background: #8cc3da !important;
}

.scxx .icon-color-2:before {
   background: #8ddfdb !important;
}

.scxx .icon-color-3:before {
   background: #a996c5 !important;
}

.scxx .icon-color-4:before {
   background: #99d2ae !important;
}

.scxx .icon-color-5:before {
   background: #f0baa3 !important;
}

.scxx .icon-color-6:before {
   background: #dfd277 !important;
}

.scxx .icon-color-7:before {
   background: #a2aecb !important;
}

.scxx .icon-color-8:before {
   background: #b9dc62 !important;
}

.scxx .icon-color-9:before {
   background: #e8a9a9 !important;
}

.scxx .icon-color-0:before {
   background: #d6add8 !important;
}

/* ----- Toast ----- */
.scxx .toastify {
   padding: 5px 6px 5px 40px;
   color: #fff;
   display: flex;
   min-height: 40px;
   align-items: center;
   box-shadow: 1px 1px 6px rgb(0 0 0 / 20%);
   background: #fff;
   position: fixed;
   opacity: 0;
   transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
   border-radius: 6px;
   cursor: pointer;
   text-decoration: none;
   z-index: 2147483647;
}
.scxx .toastify.on {
   opacity: 1;
}
.scxx .toast-close {
   position: absolute;
   top: 0;
   right: 2px;
   background: 0 0;
   border: 0;
   color: #fff;
   cursor: pointer;
   font-family: inherit;
   font-size: 1em;
   opacity: 0.6;
   padding: 0 5px;
}
.scxx .toastify-right {
   right: 15px;
}
.scxx .toastify-left {
   left: 15px;
}
.scxx .toastify-top {
   top: -150px;
}
.scxx .toastify-bottom {
   bottom: -150px;
}
.scxx .toastify-rounded {
   border-radius: 25px;
}
.scxx .toastify-avatar {
   width: 1.5em;
   height: 1.5em;
   margin: -7px 5px;
   border-radius: 2px;
}
.scxx .toastify-center {
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   max-width: fit-content;
   max-width: -moz-fit-content;
}

.scxx .toastify-container {
   text-align: left;
   width: 230px;
   margin: 0 0 0px 5px;
}

.scxx .toastify-heading {
   font-size: 1.05rem;
   padding: 0 25px 0 0;
}

.scxx .toastify-message {
   font-size: 1rem;
   border-left: 2px solid #ffffff85;
   padding-left: 6px;
   margin-top: 8px;
}

.scxx .toastify:before {
   font-family: "icons";
   font-size: 1.8rem;
   position: absolute;
   left: 5px;
   top: 50%;
   transform: translateY(-50%);
   text-align: center;
   width: 35px;
}

.scxx .toastify.success {
   background: #84bb3a;
}

.scxx .toastify.success:before {
   color: #84bb3a;
   content: "\e80e";
   font-size: 1.1rem;
   background: #fff;
   border-radius: 20px;
   width: 28px;
   height: 28px;
   line-height: 29px;
   margin-left: 4px;
}

.scxx .toastify.error {
   background: #ba3737;
}

.scxx .toastify.error:before {
   content: "\f12a";
}

.scxx .toastify.access {
   background: #b53838;
}

.scxx .toastify.access:before {
   content: "\e817";
}

.scxx .toastify.info {
   background: #fff;
   color: #1e68c9;
}

.scxx .toastify.info:before {
   content: "\f0f3";
}

@media only screen and (max-width: 360px) {
   .scxx .toastify-left,
   .scxx .toastify-right {
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      max-width: fit-content;
   }
}

.scxx .app-store-badge {
   width: 160px;
}

.scxx .center {
   text-align: center;
}

.scxx .flex {
   display: flex;
}

.scxx .flex.center {
   justify-content: center;
}

.scxx .space-between {
   justify-content: space-between;
}

.scxx .grow {
   flex-grow: 1;
}

.scxx .vertical-center {
   align-items: center;
}