.state-selector-section .autocomplete-wrapper {
  padding: 1.75rem .5rem .25rem 0
}
.state-selector-section .autocomplete-wrapper .stateLabel {
  margin: 0 0 1.5rem .25rem
}
.state-selector-section .autocomplete-wrapper .stateLabel.heading-small {
  font-size: 1.25rem
}
.state-selector-section .autocomplete-wrapper .stateLabel.heading-medium {
  font-size: 1.5rem
}
.state-selector-section .autocomplete-wrapper .stateLabel.heading-large {
  font-size: 1.75rem
}
.state-selector-section .autocomplete-wrapper .autocomplete {
  position: relative;
  width: 27.5rem
}
.state-selector-section .autocomplete-wrapper .autocomplete input#stateName {
  font-size: 1rem;
  border-bottom: .0625rem solid #6e6e6e;
  background-color: #fff;
  width: 100%;
  margin: 0;
  border-radius: inherit
}
.state-selector-section .autocomplete-wrapper .autocomplete input#stateName::-ms-clear {
  display: none
}
.state-selector-section .autocomplete-wrapper .autocomplete input {
  padding: .75rem .5rem .75rem .25rem;
  border: none
}
.state-selector-section .autocomplete-wrapper .autocomplete input:focus {
  outline: 0
}
.state-selector-section .autocomplete-wrapper .autocomplete input.stateNameError~.bar:after,
.state-selector-section .autocomplete-wrapper .autocomplete input.stateNameError~.bar:before {
  background-color: #cf2a36;
  width: 50%
}
.state-selector-section .autocomplete-wrapper .autocomplete label {
  position: absolute;
  pointer-events: none;
  font-size: .75rem;
  left: .25rem;
  top: .5rem;
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  color: #63637f
}
.state-selector-section .autocomplete-wrapper .autocomplete .autocomplete-items {
  position: absolute;
  border: .0625rem solid #63637f;
  margin-top: 0;
  z-index: 999;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  padding: 0;
  box-shadow: 0 15px 10px -6px rgba(0,0,0,.15);
  border-top: .125rem solid #235ae4
}
.state-selector-section .autocomplete-wrapper .autocomplete .autocomplete-items li {
  padding: .5rem;
  cursor: pointer;
  font-size: 1rem;
  color: #484861;
  background-color: #fff;
  border-bottom: .0625rem solid #cdd1e2
}
.state-selector-section .autocomplete-wrapper .autocomplete .autocomplete-items li:focus,
.state-selector-section .autocomplete-wrapper .autocomplete .autocomplete-items li:hover,
.state-selector-section .autocomplete-wrapper .autocomplete-active {
  background-color: #ebeff6
}
.state-selector-section .autocomplete-wrapper .autocomplete .bar {
  position: relative;
  display: block
}
.state-selector-section .autocomplete-wrapper .autocomplete .bar:before {
  content: "";
  height: .125rem;
  position: absolute;
  background: #235ae4;
  left: 50%
}
.state-selector-section .autocomplete-wrapper .autocomplete .bar:after {
  right: 50%;
  content: "";
  height: .125rem;
  width: 0;
  position: absolute;
  background: #235ae4;
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s
}
.state-selector-section .autocomplete-wrapper .autocomplete .autocomplete-stateerror {
  padding: .5rem;
  font-size: .875rem;
  background-color: #fff
}
.state-selector-section .autocomplete-wrapper .autocomplete .error-icon {
  display: none;
  background-image: url(../../../../../../../content/dam/usbank/images/svg1/icon-warning-red.svg);
  background-repeat: no-repeat;
  width: 1.25rem;
  height: 1.25rem;
  position: absolute;
  top: .75rem;
  right: 0
}
.state-selector-section .autocomplete-wrapper .autocomplete .location-image {
  position: absolute;
  top: .75rem;
  right: 0;
  border: none;
  padding: .0625rem 0;
  width: auto
}
.state-selector-section .autocomplete-wrapper .autocomplete .location-image img {
  width: 1.5rem;
  height: 1.25rem;
  cursor: pointer
}
.state-selector-section .autocomplete-wrapper input:focus ~ label {
  top: -.5rem;
  color: #235ae4
}
.state-selector-section .autocomplete-wrapper input:focus~.bar:after,
.state-selector-section .autocomplete-wrapper input:focus~.bar:before {
  width: 50%
}
.state-selector-section .autocomplete-wrapper input:valid ~ label {
  top: -.5rem;
  color: #235ae4
}
.state-selector-section .autocomplete-wrapper form .autocomplete .group .state-error-msg {
  color: #cf2a36
}
.state-selector-section .autocomplete-wrapper .nonEmptyStateErrorMsg,
.state-selector-section .autocomplete-wrapper .serviceErroMsg,
.state-selector-section .autocomplete-wrapper .validStateErrorMsg {
  color: #cf2a36;
  font-size: .75rem;
  margin-top: .5rem;
  display: block;
  font-weight: 700;
  font-family: Circular,Arial,Helvetica,sans-serif
}
.state-selector-section .autocomplete-wrapper .nonEmptyStateErrorMsg,
.state-selector-section .autocomplete-wrapper .validStateErrorMsg {
  display: none
}
.state-selector-section .autocomplete-wrapper #mortgageSingleRateHeadingDesktop,
.state-selector-section .autocomplete-wrapper #mortgageSingleRateHeadingMobile {
  font-size: 1.5rem;
  font-weight: 500;
  color: #001e79;
  margin: 1.25rem 0 0
}
.state-selector-section .button-group {
  margin-left: .75rem
}
.state-selector-section .button-group .state-selector-rates-btn {
  margin-top: .25rem
}
.state-selector-section .show-rates-reader {
  height: .0625rem
}
@media only screen and (max-width:41.9375rem) {
  .state-selector-section .autocomplete-wrapper .button-group {
    margin-left: 0
  }
  .state-selector-section .autocomplete-wrapper .autocomplete {
    width: 100%
  }
  .state-selector-section .autocomplete-wrapper .autocomplete .location-image img {
    float: right
  }
  .state-selector-section .autocomplete-wrapper #mortgageSingleRateHeadingDesktop {
    display: none
  }
}
@media only screen and (min-width:42rem) {
  .state-selector-section .autocomplete-wrapper #mortgageSingleRateHeadingMobile {
    display: none
  }
}