@media (min-width: 40em) {
    .fsCreditcardExpirationDateField input[type='tel'].fsCreditcardExpirationDateField-input {
      border-right: 0 !important;
      border-left: 0 !important;
      border-radius: 0 !important;
    }

      .fsCreditcardExpirationDateField input[type='tel'].fsCreditcardExpirationDateField-input:focus {
        box-shadow: unset;
      }
}

@media (max-width: 40em) {
  .fsCreditcardExpirationDateField {
    -ms-flex-preferred-size: 49%;
        flex-basis: 49%;
  }
}

@keyframes fsCreditcard {
  from {
    transform: scale(0.75);

    opacity: 0;
  }

  to {
    transform: scale(1);

    opacity: 1;
  }
}

@media (min-width: 40em) {
    .fsCreditcardNumberField input[type='tel'].fsCreditcardNumberField-input {
      border-top-right-radius: 0 !important;
      border-right: 0 !important;
      border-bottom-right-radius: 0 !important;
    }

      .fsCreditcardNumberField input[type='tel'].fsCreditcardNumberField-input:focus {
        box-shadow: unset;
      }
}

@media (max-width: 40em) {
  .fsCreditcardNumberField {
    margin-bottom: 0.5em;
  }
}

.fsCreditcardNumberField {
  position: relative;
  -ms-flex-align: baseline;
      align-items: baseline;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  display: -ms-flexbox;
  display: flex;
}

.fsCreditcardNumberField .fsCreditcardNumberField-input {
    padding-left: 39px !important;
  }

.fsCreditcardNumberField .fsCreditcardNumberField-iconFadeIn {
    animation: fsCreditcard 300ms;
  }

.fsCreditcardNumberField .fsCreditcardNumberField-icon {
    position: absolute;
    top: calc(50% - 8px);
    left: 7px;
    width: 25px;
    height: 15px;
  }

@media (min-width: 40em) {
    .fsCreditcardSecurityCodeField input[type='tel'].fsCreditcardSecurityCodeField-input {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
      border-left: 0 !important;
    }

      .fsCreditcardSecurityCodeField input[type='tel'].fsCreditcardSecurityCodeField-input:focus {
        box-shadow: unset;
      }
}

@media (max-width: 40em) {
  .fsCreditcardSecurityCodeField {
    -ms-flex-preferred-size: 49%;
        flex-basis: 49%;
  }
}

.fsCreditcardFieldContainer {
  position: relative;
  -ms-flex-align: baseline;
      align-items: baseline;
  display: -ms-flexbox;
  display: flex;
}

  .fsCreditcardFieldContainer .fsCreditCardNumber {
    padding-left: 39px !important;
  }

  .fsCreditcardFieldContainer .fsCreditcardVendorIcon {
    position: absolute;
    top: calc(50% - 8px);
    left: 7px;
    width: 25px;
    height: 15px;
  }

@media (max-width: 40em) {
  .fsCreditcardFieldContainer {
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.phx-Icon {
  width: 1em;
  height: 1em;

  fill: currentColor;

  vertical-align: bottom;
}

.fsRatingPipButton {
  margin-right: 5px;
  padding: 0;

  border: none;
  background-color: transparent;
}

  .fsRatingPipButton:focus {
    outline: none;
    opacity: 0.5;
  }

  .fsRatingPipButton:last-of-type {
    margin-right: 12px;
  }

.fsRatingFieldContainer {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: baseline;
      align-items: baseline;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 12px;
}

  .fsRatingFieldContainer.fsReadOnlyRating .fsRatingShape,
    .fsRatingFieldContainer.fsReadOnlyRating .fsRatingNaOption {
      opacity: 0.45;
    }

.fsImageOptionButton {
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: -ms-flexbox;
  display: flex;
  margin-right: 12px;
  margin-bottom: 12px;
  padding: 0;

  border: none;
  border-radius: 4px;
  background-color: transparent;
  transition: 200ms box-shadow ease-in-out, 200ms transform ease-in-out;
}

  .fsImageOptionButton:hover {
    transform: scale(1.05);

    box-shadow: 0 0 5px rgba(89, 93, 100, 0.75);
  }

  .fsImageOptionButton:focus {
    box-shadow: 0 0 5px rgba(89, 93, 100, 0.75);
    outline: 0;
  }

  .fsImageOptionButton .fsOptionLabel {
    margin: 5px;
  }

.fsImageOptionImageSelected {
  position: relative;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;

  min-width: 1px;
  min-height: 1px;

  box-shadow: 0 0 0 2px #21b573;
  border-radius: 4px;

  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  transition: 200ms box-shadow ease-in-out, 200ms border ease-in-out;
}

.fsImageOptionImage {
  position: relative;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;

  min-width: 1px;
  min-height: 1px;

  border-radius: 4px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  transition: 200ms box-shadow ease-in-out, 200ms border ease-in-out;
}

.fsImageIconSelected {
  position: absolute;
  display: -ms-flexbox;
  display: flex;

  box-shadow: 0 2px 4px rgba(0,0,0, 0.75);
  border-radius: 25px;
  background: #FFFFFF;
}

.fsImageIcon {
  position: absolute;
}

.fsImageOptionFieldContainer {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 12px;
}