.element-paymentRequest {
  //max-width: 500px;
  width: 100%;
  margin-bottom: 10px;
}
.ds-element {
  &.in-form {
    background-color: #9169d8;
    padding: 15px 0;
    color: #fff;

    * {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
    }

    hr {
      background-color: #fff;
      border: 0;
      height: 1px;
      margin-top: 1rem;
      max-width: 50%;
      text-align: center;
    }

    form {
      margin: 0 auto;

      img {
        height: 100px;
        width: 100px;
        border-radius: 50%;
        margin: 0 auto;
        border: solid 2px #fff;
      }
      .ds-company-name {
        width: 100%;
        text-align: center;

        p {
          width: 100%;
          text-align: center;
          font-size: 130%;
          color: #fff;
        }  
      }
      .ds-product-description {
        width: 100%;
        text-align: center;

        p {
          width: 100%;
          text-align: center;
          font-size: 110%;
          color: #fff;
        }
      }
    }

    fieldset {
      border: 1px solid #fff;
      padding: 15px;
      border-radius: 6px;

      legend {
        margin: 0 auto;
        padding: 0 10px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        color: #fff;
        background-color: #9169d8;

        & + * {
          clear: both;
        }
      }
    }
    
    .card-only {
      display: block;
    }
    .payment-request-available {
      display: none;
    }
    .row {
      display: -ms-flexbox;
      display: flex;
      margin: 0 0 10px;

      &.ds_form_title {
        margin-top: 1em;
        color: #fff;
        text-align: center;
        justify-content: center;
        font-size: 110%;
      }
    }
    .field {
      position: relative;
      width: 100%;
      margin-bottom: 1em;

      &.dsCardField {
        margin-top: 1em;
      }

      & + .field {
        margin-left: 10px;
      }
    }

    label {
      width: 100%;
      color: #fff;
      font-size: 14px;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      position:absolute;
      pointer-events: none;
      left: 5px;
      top: 10px;
      transition: 0.2s ease all; 
      -moz-transition: 0.2s ease all; 
      -webkit-transition: 0.2s ease all;

      &.dsCardElement {
        top: -1.5em;
      }
    }
    
    .shippingData {
      margin-top: 1.5em;
      -webkit-animation: 1ms void-animation-out;
      -webkit-appearance: checkbox;
      -moz-appearance: checkbox;
      appearance: checkbox;
      outline: initial;
      border-style: initial;
      border-radius: initial;

      ~ .dsShippingDetails {
        display: block;
        transition: all 5ms;
      }
      &:checked {
        ~ .dsShippingDetails {
          display: none;
        }
      }
    }

    input:focus ~ label, input:valid ~ label,
    select:focus ~ label, select:valid ~ label {
      top:-1em;
      color:#fff;
      font-size: 10px;

      &.shippingDataLabel {
        position: relative;
        font-size: 14px;
        top: -0.1em;
      }
    }

    .input {
      width: 100%;
      color: #fff;
      background: transparent;
      padding: 5px;
      border-bottom: 1px solid #eee;

      &::-webkit-input-placeholder {
        color: #777;
      }

      &::-moz-placeholder {
        color: #777;
      }

      &:-ms-input-placeholder {
        color: #777;
      }
      &.StripeElement--focus,
      &:focus {
        border-color: #fff;
      }

      &.StripeElement--invalid {
        border-color: #fff;
      }
      &:-webkit-autofill {
        -webkit-text-fill-color: #fff;
        transition: background-color 100000000s;
        -webkit-animation: 1ms void-animation-out;
      }

    }

    select {
      &:-webkit-autofill {
      -webkit-text-fill-color: #fff;
        transition: background-color 100000000s;
        -webkit-animation: 1ms void-animation-out;
      }
      &.input,
      &:-webkit-autofill {
        background-image: url('data:image/svg+xml;utf8,<svg width="10px" height="5px" viewBox="0 0 10 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="#fff" d="M5.35355339,4.64644661 L9.14644661,0.853553391 L9.14644661,0.853553391 C9.34170876,0.658291245 9.34170876,0.341708755 9.14644661,0.146446609 C9.05267842,0.0526784202 8.92550146,-2.43597394e-17 8.79289322,0 L1.20710678,0 L1.20710678,0 C0.930964406,5.07265313e-17 0.707106781,0.223857625 0.707106781,0.5 C0.707106781,0.632608245 0.759785201,0.759785201 0.853553391,0.853553391 L4.64644661,4.64644661 L4.64644661,4.64644661 C4.84170876,4.84170876 5.15829124,4.84170876 5.35355339,4.64644661 Z" id="shape"></path></svg>');
        background-position: 100%;
        background-size: 10px 5px;
        background-repeat: no-repeat;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 20px;
      }
    }

    option {
      background-color: #9169d8;
      border-bottom: thin solid #fff;
    }

    .StripeElement--webkit-autofill {
      background: transparent !important;
    }
    
    input,
    button,
    select {
      -webkit-animation: 1ms void-animation-out;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: none;
      border-style: none;
      border-radius: 0;
    }
    
    button {
      display: block;
      width: 100%;
      height: 40px;
      margin: 20px 0 0;
      background-color: #fff;
      border-radius: 6px;
      color: #9169d8;
      font-weight: 500;
      border: solid thin #fff;
      cursor: pointer;

      &:active, &:hover {
        background-color: #9169d8;
        color: #fff;
      }
    }

    .error {
      svg {
        .base {
          fill: #fff;
        }
        .glyph {
          fill: #9169d8;
        }
      }

      .message {
        color: #fff;
      }
    }

    .success {
      .icon {
        .border {
          stroke: #fff;
        }
        .checkmark {
          stroke: #fff;
        }
      }

      .title {
        color: #fff;
      }

      .message {
        color: #fff;
      }

      .reset {
        path {
          fill: #fff;
        }
      }
    }

  }
}
.entry {
  .entry-content {
    .ds-element {
      &.in-form {
        hr {
          background-color: #fff;
          border: 0;
          height: 1px;
          max-width: 50%;
          text-align: center;
          margin: 1rem auto 0px;
        }
      }
    }
  }
}