raf-input ion-item {
  display: block;
  width: 100%;
  min-height: 44px;
  --padding-top: 5px;
  --padding-bottom: 5px;
  --ion-color-primary: #ffffff; }

raf-input ion-input {
  --placeholder-color: #b8c4cc;
  font-family: var(--theme-font-secondary);
  font-size: 18px;
  --padding-top: 10px;
  --padding-bottom: 10px;
  color: #ffffff; }

raf-input ion-icon {
  color: var(--theme-green); }

raf-input .boxed {
  border: 1px solid var(--theme-light-grey);
  border-radius: 3px;
  margin: 15px 0;
  padding-bottom: 15px; }
  raf-input .boxed ion-item {
    border-bottom: none;
    --padding-top: 0;
    --padding-bottom: 0; }
  raf-input .boxed ion-input {
    font-size: 14px;
    color: #ffffff;
    --padding-bottom: 0;
    --padding-top: 0;
    --placeholder-color: #b8c4cc;
    font: var(--theme-font-secondary); }
  raf-input .boxed ion-label {
    margin: 6px 0 0 0;
    color: #fff;
    letter-spacing: 2px; }

raf-input ion-icon.left-icon {
  font-size: 28px; }

raf-input .color-dark {
  --ion-color-primary: var(--theme-darker-grey); }
  raf-input .color-dark.boxed {
    border-color: var(--theme-darker-grey); }
  raf-input .color-dark .left-icon {
    color: var(--theme-darker-grey); }
  raf-input .color-dark ion-label {
    color: var(--theme-darker-grey); }
  raf-input .color-dark ion-input {
    color: var(--theme-black);
    --placeholder-color: var(--theme-grey); }

raf-input .color-primary {
  border-bottom: 1px solid var(--theme-light-text); }
  raf-input .color-primary ion-input {
    color: var(--theme-black);
    --placeholder-color: var(--theme-darkest-grey);
    --padding-bottom: 4px; }
  raf-input .color-primary ion-icon {
    color: var(--theme-secondary) !important; }

raf-input ion-select {
  color: white;
  font-size: 16px;
  letter-spacing: 2px;
  --padding-top: 0;
  --padding-bottom: 0;
  margin-left: 0 !important; }

raf-input .invalid .input-wrapper {
  border-bottom-color: var(--theme-red) !important; }

raf-input .invalid .label {
  color: var(--theme-red) !important; }

raf-input .input-icon ion-icon {
  display: block;
  position: absolute;
  right: 15px;
  top: 38px;
  height: 35px;
  width: 35px; }
  raf-input .input-icon ion-icon svg {
    height: 30px;
    width: 30px; }
  raf-input .input-icon ion-icon:hover {
    cursor: pointer; }

raf-input .geo-location {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #a1abb1; }
  raf-input .geo-location:hover {
    cursor: pointer;
    color: var(--theme-primary); }

raf-input .left-icon {
  position: absolute;
  top: 0; }

raf-input .left-icon-parent ion-label {
  margin-left: 35px !important; }

raf-input .left-icon {
  font-size: 28px;
  position: absolute;
  top: 0; }

raf-input .left-icon-parent ion-label {
  margin-left: 35px !important; }

raf-input #card-number {
  display: block;
  width: 100%;
  border-bottom: 1px solid #ffffff;
  padding: 10px 0; }