.form-input__field {
  padding-right: 15px;
  padding-left: 15px;
}

.form-input {
  display: block;
  position: relative;
}
.form-input__field {
  border: 1px solid #999;
  min-height: 40px;
  min-width: 30px;
  width: 100%;
  font-size: 1.4rem;
  color: #333;
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.form-input__field:focus {
  border: 1px solid #333;
  border-bottom: 3px solid #333;
  color: #333;
}
.form-input__field:focus + .form-input__label {
  color: #333;
  font-weight: bold;
}
.form-input__label {
  display: block;
  color: #666;
  padding: 0;
  margin-bottom: 10px;
  width: 100%;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
.form-input__label.form-input__label--success {
  color: #00873C;
}
.form-input--error .form-input__field {
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #CCC;
  border-bottom: 4px solid #D81118;
  color: #D81118;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg width=%2717%27 height=%2717%27 viewBox=%270 0 17 17%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ctitle%3Eerror%3C/title%3E%3Cg fill=%27none%27 fill-rule=%27evenodd%27%3E%3Cpath fill=%27%23ED1C24%27 d=%27M0 0h17v17H0z%27/%3E%3Cpath d=%27M7 3h2.5v3.343L9.198 9.77H7.273L7 6.342V3zm0 11h2.5v-2.538H7V14z%27 fill=%27%23FFF%27/%3E%3C/g%3E%3C/svg%3E") no-repeat calc(100% - 12px) center border-box;
  padding-right: 40px;
}
.form-input--error .form-input__field + .form-input__label {
  color: #D81118;
}
.form-input--error .form-input__field:focus {
  border: 1px solid #333;
  border-bottom: 4px solid #333;
  color: #333;
  background: none;
  padding-right: 12px;
}
.form-input--error .form-input__field:focus + .form-input__label {
  color: #333;
}
.form-input--error.form-input__label {
  color: #D81118;
}
.form-input--error .form-input-error__message {
  color: #D81118;
}
.form-input--error .form-input__field {
  margin-bottom: 8px;
}
.form-input--error .form-input__field:focus {
  border: 1px solid #D81118;
  border-bottom: 3px solid #D81118;
}
.form-input--success .form-input__field {
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #CCC;
  border-bottom: 4px solid #00873C;
  color: #00873C;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg width=%2717%27 height=%2714%27 viewBox=%270 0 17 14%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Ctitle%3Esuccess%3C/title%3E%3Cpath d=%27M0 7.035L2.707 4.1 6.46 8.013 14.015 0l2.816 2.935L6.506 13.837 0 7.035%27 fill=%27%2302A44A%27 fill-rule=%27evenodd%27/%3E%3C/svg%3E") no-repeat calc(100% - 12px) center border-box;
  padding-right: 40px;
}
.form-input--success .form-input__field + .form-input__label {
  color: #00873C;
}
.form-input--success .form-input__field:focus {
  border: 1px solid #333;
  border-bottom: 4px solid #333;
  color: #333;
  background: none;
  padding-right: 12px;
}
.form-input--success .form-input__field:focus + .form-input__label {
  color: #333;
}
.form-input--success.form-input__label {
  color: #00873C;
}
.form-input--success .form-input-error__message {
  color: #00873C;
}
.form-input--success .form-input__field {
  margin-bottom: 8px;
}
.form-input--success .form-input__field:focus {
  border: 1px solid #00873C;
  border-bottom: 3px solid #00873C;
}
.form-input--warning .form-input__field {
  -webkit-appearance: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: 1px solid #CCC;
  border-bottom: 4px solid #FFC206;
  color: #FFC206;
  background: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2223px%22%20height%3D%2223px%22%20viewBox%3D%220%200%2023%2023%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Ctitle%3Ealert%20warning%20yellow%3C/title%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Artboard-1%22%20fill%3D%22%23FFC206%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M11%2C3%20L20%2C20%20L3%2C20%20L11%2C3%20Z%20M10%2C8%20L12.5%2C8%20L12.5%2C11.3432585%20L12.1982975%2C14.7692308%20L10.2731485%2C14.7692308%20L10%2C11.3432585%20L10%2C8%20Z%20M10%2C19%20L12.5%2C19%20L12.5%2C16.4615385%20L10%2C16.4615385%20L10%2C19%20Z%22%20id%3D%22warning-yellow%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E") no-repeat calc(100% - 12px) center border-box;
  padding-right: 40px;
}
.form-input--warning .form-input__field + .form-input__label {
  color: #FFC206;
}
.form-input--warning .form-input__field:focus {
  border: 1px solid #333;
  border-bottom: 4px solid #333;
  color: #333;
  background: none;
  padding-right: 12px;
}
.form-input--warning .form-input__field:focus + .form-input__label {
  color: #333;
}
.form-input--warning.form-input__label {
  color: #FFC206;
}
.form-input--warning .form-input-error__message {
  color: #FFC206;
}
.form-input--warning .form-input__field {
  margin-bottom: 8px;
}
.form-input--warning .form-input__field:focus {
  border: 1px solid #FFC206;
  border-bottom: 3px solid #FFC206;
}
.form-input--info .form-input__field {
  padding-right: 40px;
}
.form-input--info .form-input__field:focus {
  border: 1px solid #CCC;
  border-bottom: 3px solid #333;
}
.form-input__icon {
  position: absolute;
  right: 12px;
  top: 40px;
}

.form-input--error .form-input__icon {
  display: none;
}

::-webkit-input-placeholder {
  color: #CCC;
  opacity: 1 !important;
}

::-moz-placeholder {
  color: #CCC;
  opacity: 1 !important;
}

:-ms-input-placeholder {
  color: #CCC;
  opacity: 1 !important;
}

:-moz-placeholder {
  color: #CCC;
  opacity: 1 !important;
}

.form-input--error .form-input__field:-ms-input-placeholder {
  color: #CCC;
}

.drop-down__select {
  margin: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  z-index: 1;
  border: none;
  height: auto;
  top: 1px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background-color: #FFF;
  padding-right: 35px;
}
.drop-down__select::-ms-expand {
  display: none;
}
.drop-down__select:focus {
  outline: none;
}
.drop-down__label {
  display: block;
  padding-bottom: 10px;
}
.drop-down__content-wrapper {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  float: left;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 32px;
  visibility: hidden;
  z-index: 100;
  background-color: #FFF;
  border: 1px solid #CCC;
  border-top: 0;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  -webkit-box-shadow: 0 3px 3px rgba(51, 51, 51, 0.2);
          box-shadow: 0 3px 3px rgba(51, 51, 51, 0.2);
}
.drop-down__content-wrapper--alt {
  left: 0;
  width: 250px;
  border-top: 1px;
}
.drop-down__list {
  -webkit-font-smoothing: antialiased;
  margin: 0 0 5px 0;
  list-style: none;
  padding: 0;
  float: left;
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.drop-down__list--scroll {
  max-height: 192px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.drop-down__header {
  margin: 0;
  float: left;
  padding: 0;
  position: relative;
  min-width: 25%;
  width: 100%;
  cursor: pointer;
}
.drop-down__header--alt {
  min-width: 0;
  width: auto;
}
.drop-down__item {
  margin: 0;
  padding: 0;
  position: relative;
  float: none;
  width: 100%;
}
.drop-down__hover-effect {
  display: block;
  background: #FFF;
  border-radius: 0;
  border: 0;
  color: #666;
  padding: 5px 10px;
  text-decoration: none;
  position: relative;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.drop-down__hover-effect:hover {
  margin: 0 5px;
  background: #EEE;
  padding-left: 5px;
  color: #333;
}
.drop-down__link {
  display: block;
  width: 100%;
  height: 100%;
}
.drop-down__title {
  display: block;
  background: #FFF;
  border-radius: 0;
  border: 1px solid #CCC;
  border-bottom: 3px solid #CCC;
  color: #444;
  padding: 10px;
  text-decoration: none;
  position: relative;
  line-height: 16px;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.drop-down__title:before {
  content: "|";
  position: absolute;
  right: 25px;
  color: #666;
}
.drop-down__title:after {
  background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748px%27 height=%2748px%27%3E%3Cpath fill=%27%23f96302%27 d=%27M14.83,16.42L24,25.59l9.17-9.17L36,19.25l-12,12l-12-12L14.83,16.42z%27/%3E%3C/svg%3E") no-repeat;
  top: 0;
  right: 4px;
  background-size: 20px;
  background-position: 0;
  content: "";
  height: 40px;
  width: 0;
  padding: 0 0 0 20px;
  position: absolute;
  pointer-events: none;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.drop-down__title--select {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 40px;
  line-height: normal;
  padding: 6px 10px;
}
.drop-down__title--select:before {
  content: "|";
  position: absolute;
  right: 25px;
  color: #666;
  top: 9px;
}
.drop-down__title--alt {
  padding: 10px 40px 10px 10px;
}

.drop-down__header:hover .drop-down__title {
  padding-bottom: 11px;
}

.drop-down__header:hover .drop-down__title:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.drop-down__header:hover .drop-down__content-wrapper {
  opacity: 1;
  top: 38px;
  visibility: visible;
}

.drop-down__header:hover .drop-down__content-wrapper--alt {
  opacity: 1;
  top: 38px;
  visibility: visible;
}

html {
  font-size: 62.5%;
  height: 100%;
  overflow-y: hidden;
}

body {
  background-color: #fff;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h2 {
  max-width: 70rem;
  color: #444;
  margin: 0 0 7rem;
  font-weight: 700;
}

.form-input--error .form-input__field {
  margin-bottom: 4px;
}

.flex-container {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  min-width: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  row-gap: 8px;
  padding: 15px;
}
.flex-container input,
.flex-container select {
  font-size: 16px !important;
}
.flex-container .form-input__label {
  margin-bottom: 4px;
}
.flex-container .form-input__field {
  height: 40px;
  padding-left: 8px;
}
.flex-container .form-input__field:focus {
  outline: none;
}
.flex-container .cc-expdate-cvv-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  row-gap: 8px;
}
.flex-container .cc-expdate-cvv-wrapper .drop-down__title--select {
  margin-bottom: 4px;
}
.flex-container .cc-expdate-cvv-wrapper .drop-down__title--select::before {
  font-size: 24px;
  top: 3px;
}
.flex-container .cc-expdate-cvv-wrapper .drop-down__select {
  margin-left: 2px;
  margin-top: 3px;
}
.flex-container .content-input {
  position: relative;
}
.flex-container .content-image {
  width: 44px;
  height: 30px;
  position: absolute;
  top: 0.28em;
  right: 0.7em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-container .content-image img {
  width: 100%;
}
.flex-container .icons-left .form-input__field {
  padding-left: 60px;
}
.flex-container .icons-left .content-image {
  left: 0.7em;
}

/* styles for fiserv fields and common */
.form-input__field.focus, .form-input__error .form-input__field.focus {
  border: 1px solid #333;
  border-bottom: 3px solid #333;
}
.form-input .small-font {
  font-size: 10px;
  line-height: normal;
}

.hidden {
  display: none !important;
}

input:focus:not([readonly]) {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}

label {
  color: #444 !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

:global .text-input-container {
  height: 78px;
}
:global .text-input-container label {
  color: #000 !important;
}
:global .text-input-container input[type=date],
:global .text-input-container input[type=datetime],
:global .text-input-container input[type=email],
:global .text-input-container input[type=number],
:global .text-input-container input[type=password],
:global .text-input-container input[type=search],
:global .text-input-container input[type=tel],
:global .text-input-container input[type=text],
:global .text-input-container input[type=time],
:global .text-input-container input[type=url],
:global .text-input-container input:not([type]) {
  background-color: #fff;
}
:global .text-input-container .icon_lock {
  position: absolute;
  font-size: 24px;
  right: 10px;
  top: 32px;
  opacity: 0.4;
}
:global .text-input-container.error input {
  background-color: #fef2f2;
}
:global .text-input-container.error .error-msg {
  line-height: 24px;
  text-align: left;
}

.radioButtonGroup {
  text-align: left;
  margin-bottom: 2.5rem;
}
.radioButtonGroup span {
  display: block;
  padding-bottom: 1rem;
  color: #000;
  font-weight: 600;
}
.radioButtonGroup div[role=radiogroup] {
  margin-left: 0.3rem;
}

:global .card.modal {
  padding: 20px;
}
:global .card.modal .card-toolbar {
  margin-bottom: 10px;
}
:global .card.modal .card-actions {
  margin-bottom: 0;
}
:global .card.modal .card-actions.right .button {
  margin: 10px 0 0 20px;
}

.grecaptcha-badge {
  visibility: hidden;
}

.saq-a-enabled .expiration-date {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.form-input.form-input__cc {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}
.form-input__buyer-id {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.expiration-date {
  -webkit-box-flex: 2;
      -ms-flex: 2;
          flex: 2;
}
.expiration-date .selectors {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-column-gap: 8px;
     -moz-column-gap: 8px;
          column-gap: 8px;
  row-gap: 8px;
}
.expiration-date .selectors .drop-down__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
}
.expiration-date .selectors .drop-down__select {
  padding-right: 30px;
}
.expiration-date .drop-down-error__message {
  color: #d81118;
  word-break: break-word;
}
.form-input__security-code {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.loading-screen {
  height: 100vh;
  width: 100%;
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: white;
}
.loading-screen * {
  margin-bottom: 0.5em;
}
.loading-screen *:last-child {
  margin-bottom: 0;
}
