/**
* Shows how you can use CSS to style your Element's container.
*/

.element{
  height: 40px;
    
    width: 70%;
    color: pink;
    position: relative;
    
    border: 0px solid black;
    margin-bottom: 20px;
    border-radius: 4px;
    
  
    padding-left: 60px;

    
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.credit-card-number {
  
  }

  .credit-card-number::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background:  url('/images/credit_card-24px.svg');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
    left: 10px;
  }

  .expiry-date {

  }

  .expiry-date::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    background-size: 30px 30px;
    height: 100%;
    background:  url('/images/today-24px.svg');
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
    left: 10px;
  }

  .cvc {

  }

  .cvc::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background:  url('/images/lock-24px.svg');
    background-size: 30px 30px;
    background-repeat: no-repeat;
    opacity: 0.2;
    z-index: -1;
    left: 10px;
  }




  .MyCardElement2 {
    background-color: blueviolet;
  }
  
  .MyCardElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
  }
  
  .MyCardElement--invalid {
    border-color: #fa755a;
  }
  
  .MyCardElement--webkit-autofill {
    background-color: #fefde5 !important;
  }