.input-field {
  position: relative;
}

.select-field select[required] ~ label::before,
.input-field input[required] ~ label::before,
.input-field select[required] ~ label::before {
    content: "*";
}

/* privacy button padding */
.input-field.with-icon select,
.input-field.form-privacy select,
.input-field.with-icon input,
.input-field.form-privacy input {
  padding-left: 0.75rem;
  padding-right: 3.5rem;
}

/* input field base style */
.input-field textarea,
.input-field select,
.input-field input {
  display: block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;

  width: 100%;

  border: solid 1px;
  border-radius: 0;
  --border-opacity: 1;
  border-color: #cccccc;
  border-color: rgba(204, 204, 204, var(--border-opacity));

  --text-opacity: 1;
  color: #404040;
  color: rgba(64, 64, 64, var(--text-opacity));
}

/* hide default aria focus */
.input-field .focused,
.input-field .not-empty {
  outline: none;
}

/* collapsed label definition */
.input-field label {
  position: absolute;
  pointer-events: none;

  --text-opacity: 1;
  color: #404040;
  color: rgba(64, 64, 64, var(--text-opacity));

  left: 0.625rem;
  top: 0.625rem;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* inset label when focused or not empty */
.input-field label.raised {
  font-size: 0.875rem;
  margin-left: 0.25rem;
  margin-top: -1.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  background-image: linear-gradient(0deg, #fff 0.675rem, transparent 0.675rem);
}

/* blue border when focused */
.input-field .focused {

  --border-opacity: 1;
  border-color: #0071ba;
  border-color: rgba(0, 113, 186, var(--border-opacity));
}

/* not used: select drop-down label */
.input-field select ~ label {
  --text-opacity: 1;
  color: #404040;
  color: rgba(64, 64, 64, var(--text-opacity));
}

/* non-focused label */
.input-field .not-empty:required:valid ~ label,
.input-field .not-empty:optional ~ label {
  --text-opacity: 1;
  color: #868686;
  color: rgba(134, 134, 134, var(--text-opacity));
}

/* focused label */
.input-field .focused ~ label,
.input-field .focused.not-empty:required:valid ~ label,
.input-field .focused.not-empty ~ label {
  --text-opacity: 1;
  color: #0071ba;
  color: rgba(0, 113, 186, var(--text-opacity));
}

/* invalid input border */
.input-field textarea:required:not(.empty):invalid,
.input-field input:required:not(.empty):invalid,
.input-field input:optional:invalid {
  --text-opacity: 1;
  border-color: #ea5e5f;
  border-color: rgba(234, 94, 95, var(--border-opacity));
}

/* hide label */
.input-field .no-label ~ label {
  display: none;
}

/* disabled input state */
.input-field input:disabled {
  cursor: not-allowed;

  --text-opacity: 1;
  color: #868686;
  color: rgba(134, 134, 134, var(--text-opacity));

  --bg-opacity: 1;
    background-color: #e7e7e7;
    background-color: rgba(231, 231, 231, var(--bg-opacity));
}

/* disabled label state */
.input-field input:disabled ~ label {
  --text-opacity: 1;
  color: #868686;
  color: rgba(134, 134, 134, var(--text-opacity));
}

.large input ~ label {
  left: 0;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.large input ~ label.raised {
  margin-top: -2rem;
  margin-left: 0.75rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.large input {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.large .autocomplete-options {
  margin-top: 0;
}

.icon {
  display: none;
}

input[checked] ~ .icon {
  display: flex;
}

.select-field {
  position:relative
}
.select-field select {
  width: 100%;
  display:block;
  --bg-opacity:1;
  background-color:#fff;
  background-color:rgba(255,255,255,var(--bg-opacity));
  padding-left:.75rem;
  padding-right:2.5rem;
  border-width:1px;
  border-radius:0;
  --border-opacity:1;
  border-color:#ccc;
  border-color:rgba(204,204,204,var(--border-opacity));
  outline:2px solid transparent;
  outline-offset:2px;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  height:50px;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgLjU4QzAgLjQzMy4wNjMuMjg0LjE4OC4xN2EuNjkyLjY5MiAwIDAxLjkxIDBMNiA0LjU5OCAxMC45MDMuMTdhLjY5Mi42OTIgMCAwMS45MDkgMCAuNTQxLjU0MSAwIDAxMCAuODIxTDYuNDU1IDUuODNhLjY5Mi42OTIgMCAwMS0uOTEgMEwuMTg4Ljk5QS41NTEuNTUxIDAgMDEwIC41ODF6IiBmaWxsPSIjMUQyMjI1Ii8+PG1hc2sgaWQ9ImEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMiIgaGVpZ2h0PSI2Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgLjU4QzAgLjQzMy4wNjMuMjg0LjE4OC4xN2EuNjkyLjY5MiAwIDAxLjkxIDBMNiA0LjU5OCAxMC45MDMuMTdhLjY5Mi42OTIgMCAwMS45MDkgMCAuNTQxLjU0MSAwIDAxMCAuODIxTDYuNDU1IDUuODNhLjY5Mi42OTIgMCAwMS0uOTEgMEwuMTg4Ljk5QS41NTEuNTUxIDAgMDEwIC41ODF6IiBmaWxsPSIjZmZmIi8+PC9tYXNrPjxnIG1hc2s9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwRDEyM0QiIGQ9Ik0tMS00aDE0djE0SC0xeiIvPjwvZz48L3N2Zz4=");
  background-repeat:no-repeat;
  background-position:right .7em top 50%,0 0;
  background-size:.65em auto,100%
}
.select-field label,
.select-field select {
  --text-opacity:1;
  color:#404040;
  color:rgba(64,64,64,var(--text-opacity))
}
.select-field label {
  position:absolute;
  pointer-events:none;
  left:.625rem;
  top:.625rem;
  transition:all .2s ease;
  -moz-transition:.2s ease all;
  -webkit-transition:all .2s ease
}
.select-field label.raised {
  font-size:.875rem;
  margin-left:.25rem;
  margin-top:-1.25rem;
  padding-left:.5rem;
  padding-right:.5rem;
  background-image:linear-gradient(0deg,#fff .675rem,transparent 0)
}
.select-field .focused {
  --border-opacity:1;
  border-color:#0071ba;
  border-color:rgba(0,113,186,var(--border-opacity))
}
.select-field select~label {
  --text-opacity:1;
  color:#404040;
  color:rgba(64,64,64,var(--text-opacity))
}
.select-field .not-empty:optional~label,
.select-field .not-empty:required:valid~label {
  --text-opacity:1;
  color:#868686;
  color:rgba(134,134,134,var(--text-opacity))
}
.select-field .focused~label,
.select-field .focused~label.raised {
  --text-opacity:1;
  color:#0071ba;
  color:rgba(0,113,186,var(--text-opacity))
}
.select-field .no-label~label {
  display:none
}
.select-field input:disabled {
  cursor:not-allowed;
  --bg-opacity:1;
  background-color:#e7e7e7;
  background-color:rgba(231,231,231,var(--bg-opacity))
}
.select-field input:disabled,
.select-field input:disabled~label {
  --text-opacity:1;
  color:#868686;
  color:rgba(134,134,134,var(--text-opacity))
}

.cursor-pointer {
    cursor: pointer;
}
.radio-container {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */

.radio-container input[type='radio'] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */

.unchecked, .checked {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    margin-right: 40px;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.checked {
    display: none;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.unchecked {
    display: block;
}

/* Show the indicator (dot/circle) when checked */

.radio-container input:checked ~ .checked {
    display: block;
}

/* Show the indicator (dot/circle) when checked */

.radio-container input:checked ~ .unchecked {
    display: none;
}

.description textarea {
    border-color: #CECECE;
}

.description textarea::-moz-placeholder {
    color: black;
}

.description textarea:-ms-input-placeholder {
    color: black;
}

.description textarea::-ms-input-placeholder {
    color: black;
}

.description textarea::placeholder {
    color: black;
}

.powershare-heading::after {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  display: block;
  --tw-bg-opacity: 1;
  background-color: rgb(138 215 74 / var(--tw-bg-opacity, 1));
  content: '';
  height: 0.188rem;
  width: 2.5rem;
}

/* Currency prefix inside inputs */
.currency-field { position: relative; }

.currency-field .currency-symbol {
  position: absolute;
  left: 0.75rem;          /* align with site input padding */
  top: 50%;
  transform: translateY(-50%);
  color: #868686;
  pointer-events: none;   /* don’t block clicks/focus */
}

/* Make room for the prefix so typed digits don’t overlap the $ */
.currency-field input[type="text"],
.currency-field input[type="number"],
.currency-field input {
  padding-left: 1.75rem;  /* adjust to 2rem if symbol is too close */
}