/* styles-main-FR.css */

/* ////////////////////////////// */
/* /////// Header Styles //////// */
/* ////////////////////////////// */
.header-container svg {
  width: 139px;
}

@media only screen and (min-width: 450px) {
  .header-container svg {
    height: 45px;
    max-width: 165px;
    width: 165px;
  }
}

/*FRENCH - dollar sign goes to the right of the amount. */
.custom-radio-buttons .en__field--withOther .en__field__element--radio .en__field__item--other::before {
  left: auto;
  top: 17px;
  right: 17px;
}

/* Form Field Select Option Styles */
.en__field__element--select::after {
  top: 38px;
}

@media(min-width:768px) {
  .en__field__element--select::after {
    top: 36px;
  }
}

/* ////////////////////////////// */
/* // Credit Card Icon Styles /// */
/* ////////////////////////////// */
.payment-type-wrapper.no-buttons + .credit-card-icons-wrapper {
  top: 155px;
}

@media only screen and (max-width: 767px) {
  .payment-type-wrapper.show-buttons .custom-radio-buttons input[type="radio"] + .en__field__label {
    font-size: 1rem;
  }
}

@media only screen and (min-width: 768px) {
  .payment-type-wrapper.no-buttons + .credit-card-icons-wrapper {
    top: 150px;
  }
  .payment-type-wrapper.show-buttons + .credit-card-icons-wrapper  {
    font-size: 1rem;
  }

}

@media only screen and (min-width: 1024px) {
  .payment-type-wrapper.no-buttons + .credit-card-icons-wrapper {
    top: 150px;
  }
}

.credit-card-container {
  padding-left: 0;
}

@media only screen and (max-width: 449px) {
  .en__component--formblock .en__field.en__field--ccnumber {
    padding-bottom: 80px;
  }

  /* NO BUTTONS , two lines on mobile */
  .payment-type-wrapper.no-buttons + .credit-card-icons-wrapper + .en__component--formblock .en__field.en__field--ccnumber  {
    padding-bottom: 100px;
  }

  .credit-card-container {
    padding: 20px 0;
  }
  .credit-card-container h3 { 
    top: -2px; 
  }
}

@media only screen and (min-width: 450px) {
  .en__component--formblock .en__field.en__field--ccnumber {
    padding-bottom: 60px;
  }

  .credit-card-container {
    padding: 5px 0 0 120px;
  }
  .credit-card-container h3 { 
    top: 12px; 
  }
}

/* Split CC Expiry Fields*/
.en__field.en__field--ccexpire {
  padding-bottom: 33px;
  margin-bottom: 10px;
}

/* ////////////////////////////// */
/* ///// Form Button Styles ///// */
/* ////////////////////////////// */
@media(min-width:450px) {
  .step-2 .en__submit {
    padding-top: 20px;
  }
}

@media(min-width:768px) {
  .step-2 .en__submit {
    padding-bottom: 50px;
    padding-top: 0;
  }
}

.en__submit button {
  height: 75px;
}

@media(max-width:450px) {
  .step-2 .en__submit button,
  .step-3 .en__submit button {
    font-size: 14px;
  }
}

.en__submit button::after {
  top: 37px;
}

/* Donation Summary */
.en__component.donation-summary-wrapper {
  bottom: 30px;
}

@media only screen and (min-width: 450px) {
  .en__component.donation-summary-wrapper {
    bottom: 50px;
  }
}

@media only screen and (min-width: 768px) {
  .en__component.donation-summary-wrapper {
    bottom: 18px;
  }
}

@media only screen and (min-width: 1024px) {
  .en__component.donation-summary-wrapper {
    bottom: 34px;
  }
}

.en__field--ccvv label::after {
  content: 'Le code de 3-4 chiffres au dos de votre carte' !important;
}

/* ////////////////////////////// */
/* /////// Back link //////////// */
/* ////////////////////////////// */
@media only screen and (min-width: 768px) {
  .step-2 .back-link {
    bottom: 92px;
  }
  .step-3 .back-link {
    bottom: 43px;
  }
}

@media only screen and (min-width: 1024px) {
  .step-2 .back-link {
    bottom: 108px;
  }
  .step-3 .back-link {
    bottom: 58px;
  }
}

/* styles-main-FR.css */
/* As of Feb.27/2020 */