.scxx .autosuggest-component-container {
   position: relative;
}

.scxx .autosuggest-component-input-container {
   position: relative;
   padding: 10px 10px 0 10px;
   box-sizing: border-box;
}

.scxx .autosuggest-component-icon {
   position: absolute;
   left: 19px;
   top: 22px;
}

.scxx .autosuggest-component-icon:before {
   font-family: "icons";
   content: "\e800";
   font-size: 1.6rem;
   color: #b3d0fc;
}

.scxx .autosuggest-component-input {
   width: 100%;
   border-radius: 4px;
   padding: 8px 10px 8px 45px;
   border: 1px solid #d0dbec;
   font-family: "Outfit";
   font-size: 1.3rem;
   color: var(--s-primary);
   box-shadow: 2px 1px 5px #b3d0fc;
   text-align: left;
   transition: all 0.3s;
   box-sizing: border-box;
}

.scxx .autosuggest-component-input::placeholder {
   text-align: left;
   color: #bbb;
   font-size: 1.1rem;
}

.scxx .autosuggest-component-results,
.scxx .placename-lookup-suggestions {
   border: 0px solid #999;
   background: #fff;
   max-height: 300px;
   overflow-x: hidden;
   overflow-y: auto;
   cursor: pointer;
   border-radius: 0 0 4px 4px;
   -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.07);
   box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.07);
   -webkit-transition: all 0.3;
   -o-transition: all 0.3;
   transition: all 0.3;
   opacity: 0;
   display: none;
   position: absolute;
   width: calc(100% - 20px);
   box-sizing: border-box;
   margin: 0 10px;
}

.scxx .placename-lookup-suggestions {
   width: 100%;
}

.scxx .placename-lookup-suggestions {
   top: 46px;
   left: 0;
   padding: 0;
   margin: 0px;
   border-top: 2px solid var(--s-primary);
}

.scxx .postcode-place-lookup {
   margin-top: 20px;
}

.scxx .postcode-place-lookup .pathway-text-input {
   margin: 0;
}

.scxx .autosuggest-component-fail-notice {
   display: none;
   padding: 12px;
   font-size: 1.1rem;
   color: var(--error);
}

.scxx .autosuggest-component-fail-notice:before {
   content: "\f12a";
   font-family: "icons";
   margin-right: 8px;
}

.scxx .error > .autosuggest-component-fail-notice {
   display: block;
}

.scxx .open > .autosuggest-component-results,
.scxx .open > .placename-lookup-suggestions {
   opacity: 1;
   display: block;
}

.scxx .placename-lookup-suggestion-name {
   font-weight: 500;
   color: #222;
   font-size: 1.1rem;
}

.scxx .placename-lookup-suggestion-county {
   font-weight: 400;
   color: #888;
   font-size: 0.9rem;
}

.scxx .placename-lookup-no-suggestion {
   color: #bbb;
   font-size: 1rem;
   padding: 9px;
}

.scxx .placename-lookup-no-suggestion:before {
   content: "\f12a";
   font-family: "icons";
   font-size: 1.4rem;
   padding: 0px 13px;
}

.scxx .autosuggest-component-option,
.scxx .placename-lookup-suggestion {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   text-align: left;
   padding: 7px 7px 7px 12px;
   font-size: 1.1rem;
   font-family: "Outfit";
   user-select: none;
   color: var(--s-grey-text);
}

.scxx .placename-lookup-suggestion {
   display: flex;
}

.scxx .placename-lookup-suggestion:before {
   content: " ";
   width: 23px;
}

.scxx .uppercase {
   text-transform: uppercase;
}

.scxx .postcodePlaceSelect {
   position: absolute;
   right: 22px;
   top: 5px;
   padding: 2px 13px;
   color: #c1c5e0;
   background: var(--background);
   border-radius: 30px;
}

.scxx .postcodePlaceSelect:before {
   content: "\e80e";
   font-family: "icons";
}

.scxx .postcodePlaceSelect:hover {
   background: var(--background);
   color: var(--s-primary);
}

.scxx .postcode-place-no-postcode {
   padding: 0 8px;
   background: none;
   font-size: 1rem;
   text-decoration: underline;
   color: var(--s-primary);
   margin-top: 10px;
   font-weight: 300;
}

.scxx .postcode-place-no-postcode:hover {
   background: none;
   color: var(--s-primary);
}

.scxx .postcode-place-lookup .text-field-spinner {
   position: absolute;
   right: 0px;
   top: 25px;
}

.scxx .autosuggest-component-option.selected,
.scxx .autosuggest-component-option:hover,
.scxx .placename-lookup-suggestion.selected,
.scxx .placename-lookup-suggestion:hover {
   background: var(--selected-light);
   color: var(--selected);
}

.scxx .autosuggest-component-option.selected:before,
.scxx .autosuggest-component-option:hover:before,
.scxx .placename-lookup-suggestion.selected:before,
.scxx .placename-lookup-suggestion:hover:before {
   content: "\e80e";
   font-family: "icons";
}

.scxx .autosuggest-component-selected-container {
   display: flex;
   flex-wrap: wrap;
   margin: 0 0 6px 0;
}

.scxx .autosuggest-component-selected-item {
   background: #fff;
   padding: 2px 2px 2px 8px;
   margin: 5px;
   border-radius: 5px;
   font-size: 1.1rem;
   box-shadow: 2px 2px 2px rgb(0 0 0 / 7%);
   display: flex;
   align-items: center;
}

.scxx .active-selection .autosuggest-component-selected-item {
   transform: translate(50px, 61px);
   z-index: 1;
}

.scxx .autosuggest-component-selected-item-remove {
   padding: 0 6px;
   background: #fff;
   border-radius: 4px;
   color: #999;
   margin: 2px;
}

.scxx .autosuggest-component-selected-item-remove:hover {
   color: #000;
   background: #f1f1f1;
}

.scxx .autosuggest-component-selected-item-remove:before {
   font-family: "icons";
   content: "\e80f";
}

.scxx .autosuggest-component-no-results {
   color: var(--s-grey-text);
   padding: 9px 10px;
   font-size: 1rem;
}

.scxx .autosuggest-component-no-results:before {
   font-family: "icons";
   content: "\e825";
   margin-right: 8px;
   color: #aaa;
   font-size: 1.2rem;
}

.scxx .issue-search .autosuggest-component-selected-container {
   position: absolute;
   z-index: 1;
   left: 50px;
   top: 13px;
}