/*

CODED BY
Document Services
documentservices.org

UPDATED BY
United Nations Foundation
Digital Services
Aaron Pompei
08/2022

CSS DIRECTORY
1. NGP API Forms

*/


/* --- NGP FORMS --- */

body .at form .label-amount,
body .at form .label-amount input,
body .ngp-form .btn-at-primary,
body .ngp-form .at-text,
body .ngp-form .at-date,
body .ngp-form .at-select,
body .ngp-form .at-step,
body .npg-form form .label-amount input+.label-otheramount-prefix {
  text-transform: uppercase;
  font-family: "DM Sans";
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 28px;
  color: #4D4D4F;
}

.step-title {

}

body .ngp-form  {
  opacity: 0.95;
  background: #FFFFFF;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
  border-radius: 4px;
  font: 16px/1.5em 'Noto Sans', sans-serif;
}

body footer .ngp-form {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  opacity: 1;
}

body .ngp-form .at-inner {
  background: transparent
}


.ngp-form section {
  padding: 0 0 !important;
}

.ngp-form h1,
.ngp-form header {
  display: none;
}

body .step-title {
  font-weight: 700;
}

body .ngp-form .at-steps {
  text-align: center;
}

body .at .at-step.active>*:before,
body .at .at-step>*:before {
  text-align: left;
  left: 5px;
  background: transparent;
  color: #4D4D4F;
  font-weight: 700;
  height: auto;
  font-size: 16px;
}

body .at .at-step.valid>*:before,
body .at .at-step.invalid>*:before {
  background: transparent !important;
}

body .at .at-step.valid>*:before,
body .at .at-step.active>*:before {
  color: #59BF8E;
}

body .at .at-step.invalid>*:before {
  color: red;
}

body .ngp-form .at-steps a {
  display: inline;
  padding: 0 0;
}

body .ngp-form .at-step.active {
  border-bottom-color: #4D4D4F;
}

body .ngp-form form .label-amount {
  color: #4D4D4F;
  line-height: 1em;
}

body .at form .label-amount input {
  border: none;
}

body .at .error small.error {
  white-space: normal;
}

body .ngp-form form .label-amount input::placeholder {
  line-height: 2em;
}

body .at form .label-amount input+.label-otheramount-prefix {
  line-height: 2em;
  font-size: 16px;
  top: -.5em;
}

body .ngp-form .multistep-layout fieldset {
  padding-top: 0;
}

body .ngp-form form label {
  font: 16px/1.5em 'Noto Sans', sans-serif;
  background: #FFF;
}

body .ngp-form form .label-amount>a,
body .ngp-form form .label-amount input {
  background-color: #E6E7E8;
  height: 2em;
}

body .ngp-form .at-text,
body .ngp-form .at-date,
body .ngp-form .at-select {
  font-size: 14px;
  line-height: 1.2em;
}

body .ngp-form .at-text input,
body .ngp-form .at-select select {
  text-transform: none;
  font: normal 16px/16px 'Noto Sans', sans-serif;
  letter-spacing: 0;
  margin-top: .5em !important;
  height: 2rem;
}

body .ngp-form .at-text iframe {
  margin-top: .5em;
}

body .ngp-form form .label-amount input[type="radio"]:checked+a,
body .ngp-form form .label-amount:hover a,
body .ngp-form form .label-amount:focus a {
  background-color: #50B8BB !important;
}

body .ngp-form .btn-at-primary {
  background-color: #A6378F;
  color: #FFF;
  font-size: 14px;
  padding: 2px 15px;
}

body .ngp-form .btn-at-link {
  padding: 2px 15px;
  line-height: 28px;
}

body .ngp-form .btn-at-primary:hover {
  background-color: #DA4A9A;
}

body .at-recurring {
  margin-top: 1em;
}

body .css-kaihww {
  font-size: 16px;
}

body .at label.error {
  color: inherit;
}

body .at .error small.error {
  display: none;
}

body .at .error input {
  margin: .5em 0 1rem 0 !important;
}

body .at .error select {
  margin: 0 0 1rem 0 ;
}

body .step-prevNext {
  padding: 0 0;
}


/* --- IN THE FOOTER --- */

body footer .ngp-form {
  margin-top: -2em;
}

body footer .at.ngp-form .at-form header.HeaderHtml {
  display: block;
  height: auto;
  padding: 0;
  color: #fff;
  font-size: 12px;
  font-weight: normal;
}

body footer .ngp-form form label {
  background: transparent;
}

body footer .ngp-form .at-text,
body footer .ngp-form .at-date,
body footer .ngp-form .at-select {
  color: #FFF;
}

body footer .ngp-form .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #7291CA;
}

body footer .EmailAddress {
  text-indent: -100em;
}

body footer .at.ngp-form .at-form label.EmailAddress {
  font-size: 0;
} 

body footer .EmailAddress input {
  margin-bottom: 0;
}

body footer .ngp-form legend,
body footer .ngp-form .updateMyProfileSection {
  display: none;
}

body footer .ngp-form .at-fieldset {
  padding: 0;
}

body #donate .at.ngp-form input[type="checkbox"]:checked+span:before,
body footer .at.ngp-form input[type="checkbox"]:checked+span:before {
  background-color: #A6378F;
  border-color: #A6378F;
}

body footer .at.ngp-form input[type="checkbox"]:hover+span:before {
  border-color: #A6378F;
}

body footer .at.ngp-form input[type="checkbox"]:focus+span:before {
  box-shadow: 0 0 4px 0 #A6378F;
  border-color: #A6378F;
}

body footer .at.ngp-form .at-fields .at-checkbox-title {
  color: #fff;
}

body footer .at-row>[class^="at-"] {
  margin: 0 0;
}

body footer .ngp-form .btn-at-primary {
  background: #A6378F;
  transition: background .5s;
}

body footer .at-form-submit {
  padding: 0;
}

footer .at-form-submit .at-submit {
  float: none;
  margin-left: 0;
}

footer .at.ngp-form .at-form .thankYou {
  margin-top: .50em;
  font-size: 16px;
  line-height: 24px;
}

footer .at.ngp-form .at-form .thankYou .contributions button {
  margin-top: 1em;
}

footer .at.ngp-form .at-form .thankYou .contributions button#fbShareBtn {
  margin-right: 2em;
}

/* Custom Styles for Subscribe To Our Mailing List page */
.page-subscribe-to-our-mailing-list .ngp-form {
  box-shadow: 0 0 0 0 transparent;
}

.page-subscribe-to-our-mailing-list footer {
  box-shadow: 0 0 0 0 transparent;
}