amp-input-error {
    color: red;
}

/* These are applied to generic radio / checkbox elements and labels to provide a means to style them */
div[name="frequency-choices"] {
    display: flex;
    flex-direction: column;
}
.choice-label {
    display: inline-flex;
    align-items: center;
    margin: 0 1.5rem 0.25rem 0;
    padding: 0 0 0 0.3rem;
}
.choice-element {
    flex: 0 0 auto;
    height: 1rem;
    margin: 0.25rem 0.5rem;
    width: 1rem;
}
@media screen and (min-width: 768px) {
    div[name="frequency-choices"] {
        display: flex;
        flex-direction: row;
        margin: 0.5rem 0;
    }
    div[name="frequency-choices"] .choice-label {
        align-items: center;
        border-color: var(--amplify-light-30);
        border-style: solid;
        border-width: 1px 0;
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
        padding: 1rem;
        margin: 0;
    }
    div[name="frequency-choices"] .choice-label:first-child {
        border-radius: 0.25rem 0 0 0.25rem;
        border-width: 1px;
    }
    div[name="frequency-choices"] .choice-label:last-child {
        border-radius: 0 0.25rem 0.25rem 0;
        border-width: 1px;
    }
    div[name="frequency-choices"] .choice-label.is-active {
        background: var(--amplify-dark-70);
        border-color: var(--amplify-dark-90);
        color: white;
    }
    div[name="frequency-choices"] .choice-element {
        display: none;
    }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    div[name="frequency-choices"] .choice-label {
        border-color: #9da9b4;
    }
    div[name="frequency-choices"] .choice-label.is-active {
        background: #3f4850;
        border-color: #171a1e;
        color: white;
    }
}

/* Issue with datepicker display on IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    amp-datepicker amp-input {
        width: 100%;
    }
    amp-datepicker amp-input input {
        height: 3rem;
    }
}

amp-datalist[for="data-list-switch-isp"] {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 100%;
    z-index: 99;
    flex: 0 1 100%;
}

amp-datalist datalist-body {
    background: white;
}

datalist-body datalist-item {
    display: block;
    background: var(--datalist__datalist-item__background);
    color: var(--datalist__datalist-item__color);
    padding: 0.75em 1.5em;
    padding: var(--datalist__datalist-item__padding);
    flex: 1 1 auto;
}

/* Program Menu Data List */
.switch-isp-menu-item {
    --menu-item-padding: 0;
    flex-direction: column;
}

.switch-isp-menu-item amp-data-list {
    display: flex;
    flex: 1 0 auto;
    height: 3.5rem;
    margin: -1rem -1.5rem;
}

.switch-isp-menu-item input {
    background: var(--isp-css-navigation-link-hover-bgcolor);
    border: 0;
    color: var(--isp-css-navigation-link-hover-font-color);
    width: 100% !important;
    height: 100% !important;
    outline: none;
    padding: 0.75rem 1.5rem;
}

@media screen and (min-width: 768px) {
    .switch-isp-toggle-menu-item {
        --menu-item-icon-padding: 0;
        --menu-item-icon-margin: 0;
    }

    .switch-isp-menu-item amp-data-list {
        flex: 1 0 400px;
    }
}

/* Charity Search */

amp-page-template section[form-section] amp-input-alt,
amp-page-template section[form-section] amp-input-currency {
    width: 100%;
}

amp-input-alt[name="search"] amp-icon[icon="clear"],
amp-input-alt[name="searchText"] amp-icon[icon="clear"],
amp-input-alt[name="searchLocation"] amp-icon[icon="clear"] {
    right: 2rem;
}

/* Grant Form */
#formButtons .button-cancel {
    padding: 0;
    margin: auto 0;
}

/* Grant Review page */

/* Have no way of controlling the alignment of the checkbox to the associated text in the span */
#agreements amp-label label {
    align-items: flex-start;
}

/* Have no control of the margin for the ckecbox or the span */
#agreements amp-label input[type="checkbox"] {
    align-self: flex-start;
    margin: 0.2rem 0.5rem 0.2rem 0;
}

section#charityHeading au-system-message,
section#searchCharity au-system-message,
amp-section#charityHeading au-system-message {
    width: 100%;
}

amp-panel[layout="page-headline"] {
    width: 100%;
}

.disclaimerContainer {
    margin-bottom: 1.5rem;
}

.is-mobile [hidden-for*="mobile"],
.is-tablet [hidden-for*="tablet"],
.is-desktop [hidden-for*="desktop"] {
    display: none;
}

/* Work around for when in some circumstances click events in the components are block by content */
.no-pointer-events {
    pointer-events: none;
}

amp-content[name="help-utility"] amp-button {
    --button-hover-background: transparent;
    --button-hover-color: var(--button-color);
}

amp-button[button-type="back"] {
    --button-hover-background: transparent;
    --button-hover-color: var(--button-color);
}

amp-button amp-loader {
    border-radius: 0.25rem;
}

/* Have no way to control the font/typeface of the chip component. In this circumstance we want to use overline */
amp-content[name*="details-chip-"] amp-chip {
    font-size: var(--typeface-overline-font-size);
    font-weight: normal;
    letter-spacing: var(--typeface-overline-letter-spacing);
    line-height: var(--typeface-overline-line-height);
    text-transform: var(--typeface-overline-text-transform);
}

/* amp-columns doesn't override stretch on align-items. This needs to be added to the component */
amp-columns {
    align-items: flex-start;
}

/* amp-columns colspans aren't setting the box-sizing, so any padding on the colspans blows out the grid columns */
amp-columns [colspan] {
    box-sizing: border-box !important;
}

/* Icons within buttons don't automatically inherit color and hover color */
amp-button amp-icon.button-icon {
    --icon-color: var(--button-color);
}
amp-button:hover amp-icon.button-icon {
    --icon-color: var(--button-hover-color);
}

/* Button for charity history view /hide toggle */
amp-button.show-history-button {
    display: inline-flex;
    flex: 0;
    margin: -2rem 0 2rem;
    position: absolute;
    right: 0;
}

/* Buttons are too strict in mobile by setting width: 100% and flex: 1 1 auto; */
@media screen and (max-width: 1023px) {
    div[name="detail-actions"] amp-button {
        width: auto;
        flex: 0 0 auto;
        --button-gap: 0;
    }
    div[name="detail-footer"] amp-button {
        width: auto;
        flex: 0 0 auto;
        --button-gap: 0;
    }

    /* 
    If button gap above doesn't work for IE11, try something like below.    
    amp-button + amp-button {
        margin:0;
    } */
}

.ie-flex-accordion {
    width: 100% !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
}

amp-modal[layout*="drawer"] amp-section.width-fix {
    width: calc(100% + 5rem);
}

/* Not all components have box-shadow css variable at its host-level. This allows us to code it into the UI as necessary */
.cast-shadow {
    box-shadow: 0.225rem 0.225rem 0.18rem rgba(0, 0, 0, 0.02);
}

.inherit-color {
    color: inherit !important;
}

.no-pointer-events {
    pointer-events: none !important;
}

amp-tabs.content-background amp-tab-content {
    background: var(--tabs-content-background);
}
amp-tabs[layout="accordion"].content-background amp-tab-content {
    background: var(--accordion-content-background);
}

.grantAdvisorColumns {
    align-items: center;
}

.acknowledgementColumns {
    margin-top: 0;
}