ol.breadcrumb {
  display: none;
}
h1.page-header {
  display: none;
}
#mayfirst-pay-credit-card-details {
  padding-bottom: 20px;
}
#mayfirst-pay-payment-status {
  background-color: #dff0d8; 
  color: #3c763d;
  border-color: #d6e9c6;
  padding-top: 15px;
  padding-left: 20px;
  padding-bottom: 15px;
}
#mayfirst-pay-no-token {
  padding-top: 20px;
  padding-left: 20px;

}

.mayfirst-pay-footnote-confirm-contacts {
  font-weight: 900;
}

.mayfirst-pay-footnote {
  font-size: 1.2em;
}
.mayfirst-pay-instructions {
  padding-bottom: 10px;
  padding-top: 10px;

}

#mayfirst-pay-token-present {
  padding-left: 20px;
  padding-bottom: 20px;
}

.mayfirst-pay-table {
  width: 75% !important;
}

.mayfirst-pay-table th {
  color: rgba(95, 88, 73, 1) !important;
}

#mayfirst-pay-automatic-renewal-section {
  padding-top: 20px;
  padding-bottom: 20px;
}

.mayfirst-pay-payment-method-choice {
  font-size: 1.4em;
}
#mayfirst-pay-by-check {
  padding-top: 20px;
  border-top: 1px solid #d3dee2;
}

#mayfirst-pay-stripe-cc-field {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid #000;
  height: 30px;
  padding-top: 5px;
  padding-left: 20px;
  margin-right: 20px;
}

/*
 * Thanks: https://martinwolf.org/before-2018/blog/2015/01/pure-css-savingloading-dots-animation/
 */
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.dots span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.dots span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.dots span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}


#mayfirst-pay-by-check {
  font-size: .9em;
}

.page-civicrm #crm-main-content-wrapper {
}

#mayfirst-paypal-form {
  margin-top: 20px;
  margin-bottom: 20px;
}

#mayfirst-pay-choose-payment-method {
  margin-top: 20px;
}

#mayfirst-stripe-checkout-submit {
  margin-top: 10px;

}
#mayfirst-pay-paypal-submit {
  margin-top: 10px;
  background-color: #ffc439;
  border-radius: 6.25rem;
  min-height: 3.000rem;
  box-shadow: inset 0 2px 0 0 hsla(0,0%,100%,.41);
  border: 1px solid #d9a630;
  color: #000;
  font-family: Helvetica;
  font-weight: 700;
  padding: 0 1rem;
  min-width: 11.5rem;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 10px;
  padding-left: 10px;
}

.mayfirst-pay-upload-receipt {
  margin-bottom: 15px;
}

.mayfirst-pay-renewal-section > h2 {
  font-size: 1.8em;
  color: #56260c;
}

div.mayfirst-save-confirm-summary table th, div#mayfirst-pay table th {
  border-bottom: none;
}

.crm-container th, .crm-container table.display thead th, .crm-container table thead.sticky th, .crm-container table.caseSelector tr.columnheader th {
  font-size: 1.2em;
  border-bottom: none;
}

.crm-container table {
  font-size: 1.2em;
}

.mayfirst-save-header-text, .mayfirst-calculate-header-text {
  margin-top: 20px !important;
  font-size: 26px !important;
  line-height: normal !important;
}
.mayfirst-calculate-header-text {
  margin-top: 20px;
}
.mayfirst-save-field-label, .mayfirst-review-field-label {
  font-weight: 700;
  font-size: 21px;
  margin-bottom: 10px;
  margin-top: 0px;
  padding-top: 10px;
}
.mayfirst-review-field-label {
  font-size: 18px !important;
  font-weight: bold !important;
  color: #464354 !important;
}

/** override civicrm styles to get bootstrap style*/
.crm-container input.ng-valid, .crm-container input.ng-pristine, .crm-container textarea.ng-valid, .crm-container textarea.ng-pristine, .crm-container select.ng-valid, .crm-container select.ng-pristine {
  border: 1px solid #c2cfd8;   
}

.mayfirst-save-legend, .mayfirst-calculate-legend {
  background-color: #ECEEEE;
  border: 1px solid  #56260C !important;
  font-size: 27px !important;
  font-weight: 600;
  padding: 15px 10px 20px 10px !important;
}

.mayfirst-save-panel-body, .mayfirst-calculate-panel-body {
  padding-left: 10px;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  border-bottom: 1px solid #ddd !important;
  padding-bottom: 15px;
}

legend.mayfirst-save-legend, legend.mayfirst-calculate-legend {
  margin-top: 15px;
  margin-bottom: 0px !important;
}

input.form-text {
  width:97% !important;
}

.mayfirst-save-field-wrapper, .mayfirst-review-field-wrapper, .mayfirst-calculate-field-wrapper {
  padding-top: 15px;
}

textarea {
  width: 97%;
}

.mayfirst-save-journey, .mayfirst-calculate-journey {
  border: 1px #56260c solid;
  text-align: center;
  padding: 5px 5px 5px 5px;
  background-color: #fcf8f2;
}
.mayfirst-save-journey-active, .mayfirst-calculate-journey-active {
  font-weight: bold;
}

.mayfirst-save-payment-details, .mayfirst-calculate-payment-details {
  border: 1px #ddd solid;
  text-align: center;
  padding: 5px 5px 5px 5px;
  margin-top: 10px;

}
.mayfirst-save-payment-details-label, .mayfirst-calculate-payment-details-label {
  font-weight: bold;
}

label.mayfirst-review-field-label {
  display: block !important;
}
span.mayfirst-save-label-description, span.mayfirst-calculate-label-description {
  font-size: 18px;
}

.mayfirst-save-field-wrapper input[type=number] {
  width: 70px !important;
}

.mayfirst-save-summary-label, .mayfirst-calculate-summary-label {
  color: #444 !important;
}

.mayfirst-review-request {
  display: grid;
  grid-template-columns: auto auto;
}

.mayfirst-review-request-summary {
  grid-row: 1 / span 2;
}

#mayfirst-review {
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  border: 1px solid #ddd;
}

table.mayfirst-review-form-table th, table.mayfirst-review-form-table td {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

table.mayfirst-review-form-table th > label, table.mayfirst-review-display-table th {
  color: #aaa !important;
}
table.mayfirst-review-form-table th {
  width: 25% !important;
}
.mayfirst-review-request-control-panel {
  padding-bottom: 20px;
}

button.mayfirst-review-button {
  margin-top: 15px !important;
}

div.mayfirst-review-request {
  margin-top: 20px;
}

div.mayfirst-review-step {
  box-shadow: none;
  background: #f3faa7;
  padding: 7px 7px 7px 7px;
}

div.mayfirst-review-step-label {
  font-weight: bold;
}
div.mayfirst-review-step-description {
  font-style: italic;
}

#mayfirst-review h1 {
  font-size: 30px !important;
}

.mayfirst-review-status-processed, .mayfirst-review-welcome-email-sent, .mayfirst-review-control-panel-complete {
  text-decoration:line-through;
}

.mayfirst-pay-footnote-emphasis {
  font-style: italic;
}

.mayfirst-save-buttons, .mayfirst-calculate-buttons {
  margin-top: 10px;
  margin-bottom: 10px;
}

.mayfirst-save-radio-label, .mayfirst-calculate-radio-label {
  font-weight: normal !important;
  font-size: 18px;
}

.mayfirst-save-modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.mayfirst-save-modal-content {
  background-color: #fefefe;
  margin: 10% auto; /* 15% from the top and centered */
  padding-top: 5px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

#mayfirst-save-error-message, #mayfirst-save-success-message, #mayfirst-calculate-error-message, #mayfirst-calculate-success-message {
  display: none;
}

#mayfirst-save-success-message {
  margin-top: 20px;
}

/**
 * We have to hide CiviCRM status messages or else users will be confused by
 * receiving messages that relationships are being deleted when they edit
 * a related contact.
 */
#crm-main-content-wrapper .messages {
  display: none
}

#mayfirst-language-switcher {
  text-align: right;
  margin-bottom: 5px;
}

.mayfirst-save-optional {
  padding-top: 10px;
  padding-bottom: 5px;
  font-style: italic;
}

.crm-container .help-block {
  /* a little lighter, little smaller. */
  padding-top: 10px;
  font-size: .8em;
}

input.mayfirst-save-unit-follows-input, input.mayfirst-calculate-unit-follows-input {
  display: inline !important; 
}

td.mayfirst-problem-value {
  color: red !important;
}

div#mayfirst-problem {
  padding-top: 15px;
  padding-left: 15px;
}

table.mayfirst-problem-table {
  margin-top: 20px;
}

div.mayfirst-manual-title {
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 5px;
}

select.mayfirst-manual-form-control, input.mayfirst-manual-form-control {
  width: auto !important;
  margin-bottom: 10px !important;
}

div#mayfirst-manual {
  padding: 20px;
}

input#mayfirst-manual-receipt {
  display: block;
}

button#mayfirst-manual-save {
  margin-top: 30px;
}

input#mayfirst-manual-total-amount, select#mayfirst-manual-currency {
  display: inline-block;
  margin-right: 5px;
}

div.mayfirst-manual-error {
  margin-top: 10px;
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  border-width: 2px;
  padding: 15px 15px 15px 15px;
}
div.mayfirst-manual-success {
  margin-top: 10px;
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
  border-width: 2px;
  padding: 15px 15px 15px 15px;
}

img.mayfirst-manual-transfer-receipt {
  margin-top: 20px;
  margin-left: 20px;
  max-width: 1000px;
}