/* set default values */

:root {
    --bg_img:none;
    /* --bg_position:right top; */
    --logo_width:301px;
    --form_bg:#ffffff; 
    --form_border:4px solid rgb(85, 85, 85);
    /* --form_justify:end;  */
    --btn_color:#000; 
    --btn_bg:#dae7e9;
    --btn_bg_checked:#005c6f;
    --btn_bg_hover:#0c9cbb;
    --btn_border:;
    --btn_border_radius:0;
    --heading_color: #394d19;
    --heading_font_family:inherit;
    --body_color: #39454c;
    --body_font_family: inherit;
    --form_width:540px;
    --container_width:;
    --accent_color:#005c6f;
    --card_btn_bg:var(--accent_color);
    --card_btn_bg_hover:var(--btn_bg_hover);
    --card_btn_border:none;
    --card_btn_border_radius:var(--btn_border_radius);
    --payments_hr_border:1px solid #dddddd;
    --footer_color:#404040;
    --footer_bg_color:#f5f5f5;
    --footer_border:1px solid rgb(101, 114, 135); 
}

/* establish body as full viewport height and spread content from top to bottom */ 
body {
    height: 100vh;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* set and pad page container */

div.ak-page-container {
    width: 100%;
    background: none;
    padding:0;
}

/* set form as width container */

form.ngpvan-payments {
    width: 940px;
    max-width: 100%;
    margin: 0 auto;

}


.ak-page-footer {
    text-align: center;
    padding: 1.25rem 0.75rem;
    text-align: center;
    position: relative;
    border: none;
    margin:0;
}

/* typography */

body {
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;

} 

h1 {
    font-family: var(--heading_font_family);
    font-weight: bold;
    font-size: 1.75rem;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
    padding: 0;
    margin:0;
}

.ngpvan-payments h2, .ak-pagetype-thanks h2 {
    color: var(--heading_color);
    padding: 0;
    text-decoration: none;
    display: block;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    font-weight: bold;
    line-height: 1.4;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}


body p {
    color: var(--body_color);
    font-family: var(--body_font_family);
    font-weight: normal;
    font-size: 1rem;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0;
}



body {
    background: white; 
    color:var(--body_color);
}


a.ak-highlight-on-hover {
    color: var(--heading_color);
}
.ak-btn {
    color: var(--btn_color);
}

h1 {
    color: var(--heading_color);
}

#payments-content h2 {display:none}

h2 {
    color: var(--heading_color);
}

h3 { 
    font-family: var(--heading_font_family);
    font-weight:bold;
    font-size: 0.875rem 
}



form#act {
    accent-color: var(--accent_color);
}


.ak-page-footer {
    background-color:  var(--footer_bg_color);
    color: var(--footer_color);
}

.ak-page-footer::after {
    content: "";
    display: block;
    position: absolute;
    inset: 6px;
    height: calc(100% - 12px);
    width: calc(100% - 12px);
    border: var(--footer_border);
}

.ak-page-footer-contents {
    font-size: 1rem;
    margin:0;
}
.inner-container, #payments-content {
    width: 540px;
    max-width: 100%;
    min-width: min-content;
    background: var(--form_bg);
    display: flex;
    flex-direction: column;
    border:var(--form_border);
    padding: 1.25rem 0.625rem 0;
    justify-self: var(--form_justify, start);
    -webkit-box-pack: var(--form_justify, start);
}

div#payments-content {
    display: grid;
}


.content-container, #payments-content > div {
    display:grid;
    padding:0 1rem;
    width: 100%;
    align-content: baseline;
}
/* control logo image */
img.logo-image, #payments-content > div > img.ak-featured-img {
    margin: 0 auto;
    width: auto;
    height: auto;
    max-width:100%;
    max-height: 4.6875rem;
}



.ngpvan-payments .ak-field-box {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    width: 100%;
}

.ak-grid-col.ak-grid-col-8-of-12 {
    margin: 0;
    width: 100%;
}

.ngpvan-payments .centered-content {
    width: 100%;
    margin: 0;
    &:first-of-type{
        padding-top:0;
    }
}


.ngpvan-payments #ak-amount-list ul.ak-unstyled {
    justify-content: center;
    gap: 0.625rem;
    align-items: stretch;
    align-content: center;
}

div#ak-amount-list .ak-amount-wrapper li {
    margin: 0;
    width: 100%;
}

.ngpvan-payments #ak-amount-list ul.ak-unstyled li label {
    width: 100%;
    margin: 0;
    font-size: 1rem;
    font-weight: bold;
    border-radius: var(--btn_border_radius);
    border:var(--btn_border);
    min-height: 3.25rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.ngpvan-payments #ak-amount-list ul.ak-unstyled li label:not(.ak-radio-checked) {
    background-color: var(--btn_bg);
}
.ngpvan-payments #ak-amount-list ul.ak-unstyled li label:not(.ak-radio-checked):hover {
    background-color: var(--btn_bg_hover);
}

input#ak-other-amount-field {
    border: var(--input_other_border, 1px solid rgb(136, 148, 168));
    max-width: 4rem;
    width: 100%;
    justify-self: stretch;
    border-radius: var(--btn_border_radius);
    top: 0 !important;
}

.ngpvan-payments #ak-amount-list li label.ak-radio-checked {
    background-color: var(--accent_color);
    color: white;
}


.ngpvan-payments .checkbox-large label {
    font-size: inherit;
    font-weight: bold;
}

button#ak-ngp-card-button {
    background-color:  var(--card_btn_bg);
    border-radius: var(--card_btn_border_radius);
    font-weight:bold;
    font-size:1rem
}

button#ak-ngp-card-button:hover,button#ak-ngp-card-button:focus-visible {
   background-color: var(--card_btn_bg_hover);

}

button#ak-ngp-paypal-button {
    border-radius: var(--card_btn_border_radius);
}

button#ak-ngp-card-button:focus-visible {
    outline-offset: 0.25ch;
}

.ngpvan-payments .payments-hr {
    margin-top:0;
    border-bottom: var(--payments_hr_border);
}

div:has(div.payments-hr) > p {
    font-size: 1rem;
    color:inherit;
}




.donation-header {
    padding-block-start: 1rem;
}

/* breakpoints */ 

@media only screen and (min-width: 768px) {
  body {
    background-image: var(--bg_img, none);
    background-size: cover;
    background-attachment: fixed;
    background-position:var(--bg_position);
}

.inner-container, #payments-content {
    width:100%;
}

img.logo-image, #payments-content > div > img.ak-featured-img {
    max-height: 7.8125rem;
}

div#payments-content {
  grid-template-columns: 1fr 1fr;
}
.donation-header {
    padding-block-start: 0;
}

div:has(#ak-section-header):has(img:not(.ak-featured-img)) > p:last-of-type {
    margin-block-end: 1lh;
}
}

@media only screen and (max-width: 950px) {
    .ngpvan-payments #ak-amount-list ul.ak-unstyled {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 951px) {
    .ngpvan-payments #ak-amount-list ul.ak-unstyled {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* overrides */


.ak-page-header {
    display: none;
    visibility: hidden;
}

#payments-secured {
    display: none;
    visibility: hidden;
}

/* deal with thanks page default icons */ 

img.checkmark-icon {
    display: none;
}

/* specific to side-by-side layout */ 


.ak-featured-img {
    /* display and opacity must be set with script, this reduces FOUC jank */
    display:none;
    opacity: 0;
    grid-column:1/-1;
    max-width: var(--logo_width, 300px);
    height:auto;
    justify-self: center;
    padding-bottom: 2rem;
    padding-inline:1rem;
}

.ak-grid-row:before, .ak-grid-row:after{
    display:none;
}

.ak-grid-col.ak-grid-col-4-of-12, .ak-grid-col.ak-grid-col-8-of-12 {width: 100%;margin: 0;float: none;}

div:has(.payments-hr) {
    grid-column: 1/-1;
}


h1#ak-section-header {
    padding: 0;
}

h2#choose-an-amount {
    display: block;
}

.monthly-checkbox {
    color: var(--heading_color);
}
.payments-content img {
    width:100%;
}


div#donation-form {
    padding-top: 0.5rem;
}