QGiv Advanced Custom Styling Code

If for some reason the QGiv Donation Form gets modified in some way that causes the styling of the form to look different than what was originally designed, then copy and paste the custom css code, included below, into the QGiv Form Builder, under the Advanced tab.

.qgiv-form {
  color: #555555;
}

.heading-alpha, 
.form-section-title, 
.container-title {
  color: #555555;
  font-weight: 600;
  font-style: normal;
  font-size: 23px;
}

.ui-option .option-small-label {
  text-shadow: none;
}

.ui-button,
.ui-option,
.option-label,
.has-description .donation-amount-item {
  border-radius: 0px;
}

.highlight-alt .ui-option.is-active .option-label {
  background-color: #f47b20;
  color: #ffffff !important;
}

.highlight-alt .ui-option.is-active label.option-label[for="option-845411-2"]  {
  background-color: #b48cc0;
  color: #ffffff !important;
}

label[for="option-845411-2"] {
  background-color: #e4e8ea; !important;
}

.option-label:hover {
  color: rgba(123,106,92,0.5) !important;
}

.has-description .donation-amount-item {
  background-color: rgba(244,123,32,0.25) !important;
}

/*
.is-light-theme .ui-option.ui-option-inline.is-active .option-label,
label.option-label,
.ui-option.ui-option-inline.is-active .option-label { 
  color: #ffffff !important;
}
*/

.is-light-theme .donation-amount-description-item.is-active .donation-amount-button {
  background-color: #f45a00;
  border-color: #f45a00;
}

.is-light-theme .donation-amount-description-item.is-active {
  border-color: #f45a00;
}

/*
ul.pledges .option-label {
  background-color: rgba(180,140,192,0.5) !important;
}
*/


/*
ul.pledges .option-label:hover {
  background-color: rgba(180,140,192,0.5) !important;
}
*/

/*
.pledge-option .is-active {
  background-color:  #b48cc0 !important;
  border-color: #b48cc0 !important;
  border-size: 4px !important;
}
*/

.pledge-option .label.option-label, .pledge-option .ui-option.ui-option-inline.is-active .option-label {
  color: #555555 !important;
}

.ui-option-list .input-list .pledges label.option-label {
  color: #555555 !important;
}

.ui-option {
  margin-bottom: 0.5em !important;
}

.pledge-option span.option-description {
  color: #555555 !important;
}

.pledge-option .highlight-green,
.pledge-option .highlight-blue {
  color: #555555 !important;
}

.qgiv-form input[type="radio"] {
  visibility: hidden;
  margin-left: -21px;
}

.ui-option.vertical-align-middle.pledge-option.is-active {
  border: 2px solid;
  border-color: #b48cc0;
  /*background: rgba(180,140,192,0.5);*/
  background-color: transparent;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out
  transition: all .2s ease-in-out;
}

.donation-frequency-label .option-label {
  color: rgba(85,85,85,1) !important;
  background: rgba(85,85,85,0.5) !important;
}

.ui-option.ui-option-inline.is-active .option-label { 
  color: #ffffff !important;
}

.pledge-option .option-label {
  background-color: rgba(180,140,192,0.5) !important;
}

.pledge-option.is-active,
.pledge-option.is-active span.option-description {
  color: #555555 !important;
}

.footer-logo {
  display: none;
}

.pledge-option .option-label {
  padding: 0.5em !important;
}

#donation-type-pledge .width-90-hard {
  width:  110px;
}

.option-description {
  display: table;
}

.option-description .option-title,
.option-description .description {
  display: table-cell;
  vertical-align: middle;
}

.option-description .option-title {
  font-size: 0.875em;
  line-height: 1.05em !important;
  padding: 0.75em 0;
  width: 90px;
  height: 60.625px;
  color: #ffffff;
  text-align: center;
  background-color: #b48cc0;
}

.option-description .description {
  padding-left: 1em;
}