/* {outputFileName:alp-form} */
/* We declare colors in a map as key: value
with the color name as the key and the hex
as the value

And we are goint to use it in _utils.scss */
/*
  This mixin will build the prefix values for the property and value passed in.
  It will also add the property and value without the prefix.
  Example:
    @include build-prefix-values('transition', 'all 1s linear');
*/
/* 
  Example usage:
    .my-class {
      // Default usage
      @include transition();
      // Custom usage
      @include transition('all', 1s, linear);
    }
*/
.alp-form__form-container--hidden {
  display: none;
}
.alp-form__form-container--show {
  display: block;
}
.results-graph {
  gap: 2rem;
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
}
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .results-graph > * {
    margin: calc(2rem / 2);
  }
}
.results-graph__bar {
  display: flex;
  align-items: center;
  width: 100%;
}
.results-graph__label {
  width: 30%;
  margin-right: 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: #041655;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.32px;
}
.results-graph__line {
  --line-width: 0;
  position: relative;
  clear: both;
  width: var(--line-width);
  max-width: 100%;
  height: 1.75rem;
  background-color: #3d43bf;
  border-top-right-radius: 3rem;
  border-bottom-right-radius: 3rem;
  transition: width 4s, background 0.2s;
}
.results-graph__line--normal {
  --line-width: 0;
  background-color: #e1e3f3;
}
@media screen and (max-width: 400px) {
  .results-graph__line--normal {
    max-width: 35% !important;
  }
}
@media screen and (max-width: 768px) {
  .results-graph__line {
    max-width: 40%;
  }
}
.results-graph__count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(110%);
  display: flex;
  flex-direction: row;
  font-weight: 700;
  color: #041655;
  white-space: nowrap;
}
.results-graph__count::after {
  content: " U/L";
  position: relative;
  right: -5px;
  color: #041655;
}
.results-graph__count span {
  font-weight: 700;
  color: #041655;
}
.results-graph__range {
  font-weight: 800;
}
.results-graph__range span {
  font-weight: 800;
}
.results-graph__legend {
  margin-top: 2rem;
  font-weight: 800;
  color: #041655;
  text-align: center;
}
.results-graph__legend span {
  font-weight: 600;
  color: #041655;
}
.results-graph__result-text {
  margin-top: 3rem;
  margin-bottom: 3rem;
  font-size: 1.875rem;
  font-weight: 500;
  line-height: 2.375rem;
  color: #3d43bf;
  text-align: center;
  letter-spacing: 0.0656rem;
}
@media screen and (min-width: 768px) {
  .results-graph__result-text {
    max-width: 53ch;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.5625rem;
    line-height: 2.1875rem;
    letter-spacing: 0.4px;
  }
}
@media screen and (min-width: 768px) {
  .results-graph {
    max-width: 87%;
    margin-left: auto;
  }
}
.form {
  gap: 1rem;
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  margin-right: auto;
  margin-bottom: 3rem;
  margin-left: auto;
}
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .form > * {
    margin: calc(1rem / 2);
  }
}
.form__input {
  border-radius: 0;
}
.form__input-label {
  font-size: 1.1rem;
  font-weight: 500;
  color: #041655;
}
.form__input-label:hover {
  cursor: pointer;
}
.form__input-input {
  font-size: 1rem;
  border-radius: 0;
}
.form__input-input[type=radio] {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid currentcolor;
  border-color: #041655;
}
.form__input-input[type=radio]::before {
  width: 75%;
  height: 75%;
  background-color: #3d43bf;
  box-shadow: none;
}
.form__input-input[type=radio]:first-of-type {
  margin-left: 0;
}
.form__input-input[type=radio]:hover {
  cursor: pointer;
}
.form__input-input[type=number] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  border-bottom: 1px solid #383838;
  border-radius: 0;
}
.form__input-input[type=number]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}
.form__input-input[type=number]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
          appearance: none;
}
.form__input-input[type=number]:focus {
  outline: none;
}
.form__input-input[type=email] {
  border-bottom: 1px solid #041655;
}
.form__input-input[type=email]:focus {
  outline: none;
}
.form__input-input[type=text],
.form__input-input [type=number],
.form__input-input [type=email] {
  border-bottom: 1px solid #041655;
}
.form__input-input[type=text]:focus,
.form__input-input [type=number]:focus,
.form__input-input [type=email]:focus {
  outline: none;
}
.form__input-input-submit {
  margin: auto;
}
.form__input-icon-success {
  width: 20px;
  height: 20px;
  padding-bottom: 5px;
}
.form__input-icon-error {
  width: 16px;
  height: 16px;
}
.form__input-icon-error, .form__input-icon-success {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  -o-object-fit: fill;
     object-fit: fill;
}
.form__input-error .form__input-input {
  border-color: transparent;
}
.form__input-error .form__input-label {
  border-bottom: 3px solid #CE4646 !important;
}
.form__input-error .form__input-icon-error {
  display: block;
}
.form__input-valid .form__input-icon-success {
  display: block;
}
.form__input-error-msg {
  position: absolute;
  font-size: 1rem;
  color: red;
}
.form__input-radios {
  gap: 1rem;
  display: flex;
  align-items: center;
  margin-top: 1rem;
}
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .form__input-radios > * {
    margin: calc(1rem / 2);
  }
}
.form__input-title {
  margin-bottom: 0;
  font-size: 1.5rem;
  color: #041655;
}
.form__input-group {
  position: relative;
  width: 100%;
}
.form__input-group--sex {
  margin-bottom: 2rem;
}
.form__input-group--sex .form__input-title {
  margin-bottom: 1rem;
}
.form__input-group--ages {
  margin-bottom: 3.6rem;
}
.form__input-group--ages .form__input-group {
  margin-top: 2.5rem;
}
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  @media screen and (max-width: 767px) {
    .form__input-group--ages .form__input-group:last-of-type {
      margin-top: 3rem;
    }
  }
}
.form__input-group--custom-short {
  width: 55%;
}
.form__input-group--custom .form__input-label {
  position: absolute;
  left: 0;
  width: 100%;
}
.form__input-group--custom .form__input-label span {
  position: absolute;
  bottom: 10px;
  font-weight: 600;
  color: #878787;
  transition: 0.3s ease;
}
.form__input-group--custom .form__input-input:not(:-moz-placeholder-shown) ~ .form__input-label span {
  transform: translateY(-60%);
  color: #383838;
}
.form__input-group--custom .form__input-input:focus ~ .form__input-label span,
.form__input-group--custom .form__input-input:not(:placeholder-shown) ~ .form__input-label span {
  transform: translateY(-60%);
  color: #383838;
}
.form__input-group--custom .form__input-input:not(:-moz-placeholder-shown) ~ .form__input-label {
  border-bottom: 3px solid #3d43bf;
}
.form__input-group--custom .form__input-input:focus ~ .form__input-label,
.form__input-group--custom .form__input-input:not(:placeholder-shown) ~ .form__input-label {
  border-bottom: 3px solid #3d43bf;
}
@media screen and (min-width: 768px) {
  .form__input-group--alp-ul {
    margin-top: 0;
  }
}
.form__input-groups {
  gap: 2rem;
  display: flex;
  flex-direction: column;
}
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .form__input-groups > * {
    margin: calc(2rem / 2);
  }
}
.form__input-groups > div {
  margin-right: 0;
  margin-left: 0;
}
@media screen and (min-width: 768px) {
  .form__input-groups > div {
    margin-right: 2rem;
  }
}
@media screen and (min-width: 768px) {
  .form__input-groups {
    flex-direction: row;
    width: 100%;
  }
}
.form__disclaimer {
  margin-top: 2rem;
  margin-bottom: 2rem;
  font-size: 1.25rem;
  line-height: 2rem;
  text-align: center;
  letter-spacing: 0.02rem;
}
@media screen and (min-width: 768px) {
  .form {
    max-width: 75%;
  }
}
@media screen and (min-width: 992px) {
  .form {
    max-width: 71ch;
  }
}
#alp-submit-btn {
  justify-content: center;
  width: 100%;
  padding-top: 1.25rem;
  padding-right: 3rem;
  padding-bottom: 1.5rem;
  padding-left: 3rem;
}
@media screen and (min-width: 768px) {
  #alp-submit-btn {
    width: 70%;
  }
}
@media screen and (min-width: 992px) {
  #alp-submit-btn {
    width: 70%;
  }
}
.alp-form-results__sex-pill {
  width: 100%;
  max-width: 330px;
  margin-top: 5rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  color: #fff;
  text-align: center;
  background-color: #041655;
  border-radius: 3rem;
}
.alp-form-results__sex-pill p {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
}
.alp-form-results__submit {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: auto;
  padding-top: 1.3rem;
  padding-bottom: 1.3rem;
}
.alp-form-results__submit:hover {
  background-color: #fff;
  border: 3px solid #041655;
}
@media screen and (min-width: 700px) {
  .alp-form-results__submit {
    width: 45%;
  }
}
@media screen and (max-width: 700px) {
  .alp-form-results__form-container {
    width: 95%;
    margin: auto;
  }
}