/* ################################################## */
/* ############### AMP-PAGE-TEMPLATE ################ */
/* ################################################## */

html[is-locked] {
    overflow: hidden;
}
body {
    margin: 0px;
    background: var(--body-background);
    font-family: var(--typeface-regular-font-family);
    font-size: var(--typeface-regular-font-size);
}

.section {
    background: white;
}

.grid {
    background-color: #444;
    color: #fff;
}

.navigation {
    display: flex;
    align-items: center;
    background-color: #000;
    color: #fff;
    min-height: 3em;
    padding-left: 1em;
}

.content {
    min-height: 500px;
    /* padding: 20px; */
    display: grid;
}

.content.router-provider-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: center;
}

/* ################################################## */
/* ############### AMP-PAGE-TEMPLATE ################ */
/* ################################################## */

/* ################################################## */
/* ################### AMP-PANEL #################### */
/* ################################################## */

amp-panel {
    --panel-max-width: 1140px;
}

amp-panel[layout*="utilities"] {
    --panel-margin: 1rem 0 2rem;
    --section-justify-content: space-between;
    --section-padding: 1.5rem 0;
    --button-background: transparent;
    --button-hover-background: transparent;
    --button-color: var(--amplify-dark-90);
    --button-hover-color: var(--amplify-dark-90);
    --button-padding: 0;
    --a-color: var(--amplify-dark-90);
    --back-utility-margin: 0 auto 0 0;
    --back-utility-width: auto;
    --help-utility-margin: 0 0 0 auto;
    --help-utility-width: auto;
}

amp-panel[layout*="headline"] {
    --panel-margin: 0 0 2.5rem;
    --section-flex-direction: column;
    --section-align-items: center;
    --section-text-align: center;
    --typeface-title-text-align: center;
    --typeface-subhead-text-align: center;
    --typeface-subhead-margin: 0 0 0.65rem;
}

amp-panel[layout*="notifications"] {
    --section-flex-direction: row;
    --section-justify-content: space-between;
    --section-padding: 2rem 0;
    --section-border-color: var(--amplify-light-10);
    --section-border-style: solid;
    --section-border-width: 0 0 1px;
    --typeface-regular-color: var(--amplify-dark-50);
}

amp-panel[layout*="widget"] {
    --panel-background: var(--amplify-white);
    --panel-border-radius: 0.25rem;
    --panel-box-shadow: 0 0.275rem 0.275rem rgba(0, 0, 0, 0.01), 0 0.45rem 0.45rem rgba(0, 0, 0, 0.019), 0 0.725rem 0.725rem rgba(0, 0, 0, 0.03);
    --panel-display: flex;
    --panel-flex-direction: column;
    --panel-margin: 0 0 1.5rem;
    --panel-position: relative;
    --section-flex-direction: column;
}

amp-panel[layout*="partial"] {
    --panel-border-color: var(--amplify-light-10);
    --panel-border-radius: 0;
    --panel-border-style: solid;
    --panel-border-width: 1px 0 0;
    --panel-margin: 0;
    --panel-padding: 3rem 0 0;
    --section-padding: 0 3rem 0;
    --typeface-subhead-margin: 0 0 2rem;
}

amp-panel[layout*="partial"][layout*="first"] {
    --panel-border-radius: 0.25rem 0.25rem 0 0;
}

amp-panel[layout*="partial"][layout*="last"] {
    --panel-border-radius: 0 0 0.25rem 0.25rem;
}

amp-panel[layout*="borderless"] {
    --panel-border-color: transparent;
    --panel-border-width: 0;
}

amp-panel[layout*="highlighted"] {
    --panel-border-color: var(--panel-highlighted-border-color, var(--amplify-blue-60));
    --panel-border-style: solid;
    --panel-border-width: 0.25rem 0 0;
}

amp-panel[layout*="shaded"] {
    --panel-background: var(--amplify-light-0);
}

/* ################################################## */
/* ################## AMP-SECTION ################### */
/* ################################################## */

amp-section[layout="related-section"] {
    --section-background: var(--amplify-light-0);
    --section-border-color: var(--amplify-light-10);
    --section-border-style: solid;
    --section-border-width: 1px 0;
    --section-margin: 0 0 3rem;
    --section-padding: 3rem 3rem 0;
    --section-width: 100%;
}

amp-section[layout="related-section"]:before,
amp-section[layout="related-section"]:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 16px);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 16px solid var(--amplify-light-0);
    font-size: 0;
    line-height: 0;
    z-index: 10;
    transform: translateY(-0.925rem);
}

amp-section[layout="related-section"]:after {
    border-bottom: 16px solid var(--amplify-light-10);
    transform: translateY(-1rem);
    z-index: 1;
}

@media screen and (min-width: 1024px) {
    amp-section[layout="related-section"]:before,
    amp-section[layout="related-section"]:after {
        left: calc(38.2% - 0.75rem);
    }
}

amp-section [layout*="section-heading"] {
    --typeface-z-index: 199;
}

/* ################################################## */
/* ################## AMP-CONTENT ################### */
/* ################################################## */
amp-content[layout*="borderless"] {
    --content-border-color: transparent;
    --content-border-width: 0;
}

amp-content[layout*="buttons"] {
    --content-display: flex;
    --button-gap: 0 0 0 1rem;
    --content-flex-direction: row;
    --content-justify-content: flex-end;
    --content-margin: 0;
    --content-padding: 1.5rem 0 2rem;
}

amp-content[layout*="card"] {
    --button-background: var(--amplify-white);
    --button-hover-background: var(--button-background);
    --button-color: var(--isp-css-button-bgcolor);
    --button-hover-color: var(--button-color);
    --button-border-color: var(--amplify-light-10);
    --button-border-style: solid;
    --button-border-width: 1px 0 0;
    --button-border-radius: 0 0 0.25rem 0.25rem;
    --button-margin: 0;
    --button-width: calc(100% + 4rem);

    --content-background: var(--amplify-white);
    --content-border-radius: 0.25rem;
    --content-box-shadow: 0 0.225rem 0.18rem rgba(0, 0, 0, 0.006), 0 0.364rem 0.291rem rgba(0, 0, 0, 0.01), 0 0.59rem 0.472rem rgba(0, 0, 0, 0.019);
    --content-justify-content: center;
    --content-min-height: 8rem;
    --content-padding: 0 2rem;
    --content-position: relative;

    --img-margin: auto;
    --img-max-height: 4rem;
    --img-max-width: 8rem;

    --typeface-margin: 0 0 0.5rem;

    transition: all 0.1s ease-in-out;
    top: 0;
}

amp-content[layout*="center"] {
    --content-align-items: center;
    --typeface-title-text-align: center;
    --typeface-headline-text-align: center;
    --typeface-subhead-text-align: center;
    --typeface-large-text-align: center;
    --typeface-regular-text-align: center;
    --typeface-small-text-align: center;
    --typeface-overline-text-align: center;
}

amp-content[layout*="dim"] {
    --button-color: var(--amplify-dark-50);
    --img-backface-visibility: hidden;
    --img-filter: grayscale(100%);
    --img-opacity: 0.8;
    --img-transition: all 0.2s;

    opacity: 0.8;
}

amp-content[layout*="hover"]:hover {
    --button-color: var(--isp-css-button-bgcolor);
    --button-padding: 0.9rem 1.5rem;
    opacity: 1;
    top: -0.25rem;

    --content-box-shadow: 0 0.225rem 0.18rem rgba(0, 0, 0, 0.006), 0 0.364rem 0.291rem rgba(0, 0, 0, 0.01), 0 0.59rem 0.472rem rgba(0, 0, 0, 0.019),
        0 0.954rem 0.764rem rgba(0, 0, 0, 0.03), 0 1.545rem 1.236rem rgba(0, 0, 0, 0.049), 0 2.5rem 2rem rgba(0, 0, 0, 0.08);
}

amp-content[layout*="dim"] amp-button {
    height: 0.5rem;
    opacity: 0;
    transition:
        height 0.1s ease-in-out,
        opacity 0.1s ease-in-out 0;
}

amp-content[layout*="hover"]:hover amp-button {
    height: 2.8rem;
    opacity: 1;
    transition:
        height 0.1s ease-in-out,
        opacity 0.1s ease-in-out 0.15s;
}

amp-content[layout*="hover"]:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transition: all 0.1s ease-in-out;
}

/* ################################################## */
/* ################### AMP-MODAL #################### */
/* ################################################## */

amp-modal {
    --modal-padding: 1.5rem 2.5rem 0;

    --modal-title-align-items: center;

    --content-align-items: flex-start;
    --content-border-width: 1px 0 0;
    --content-border-style: solid;
    --content-border-color: var(--amplify-light-10);
    --content-margin: 0;
    --content-padding: 1.5rem 2.5rem 2rem;

    --loader-background: var(--amplify-white);

    --no-bullet-list-icon-color: var(--button-background);

    --section-flex-direction: column;
    --section-margin: 0 -2.5rem;
    --section-padding: 0;
    --section-width: calc(100% + 5rem);

    --select-item-list-icon-color: var(--button-background);
    --select-item-list-width: calc(100% + 5rem);
    --select-item-list-margin: 0 -2.5rem 1.5rem;

    --typeface-large-margin: 0 0 0.5rem;

    --typeface-overline-margin: 0;
    --typeface-overline-max-width: 100%;
    --typeface-overline-padding: 1rem 2.5rem;
    --typeface-overline-position: sticky;
    --typeface-overline-top: -1.5rem;
    --typeface-overline-background: var(--amplify-light-5);

    --typeface-subhead-margin: 0 0 0.5rem;
}
amp-modal amp-loader {
    z-index: 299;
}

/* ################################################## */
/* ################### AMP-ALERT #################### */
/* ################################################## */
amp-alert[layout="related-alert"] {
    --alert-margin: -1.5rem 0 2.5rem;
}

/* ################################################## */
/* ################## AMP-BUTTON #################### */
/* ################################################## */

amp-button[layout="secondary"] {
    --button-background: var(--button-secondary-background);
    --button-hover-background: var(--button-secondary-hover-background, var(--button-secondary-background));
    --button-border-color: var(--button-secondary-border-color);
    --button-hover-border-color: var(--button-secondary-hover-border-color);
    --button-border-style: var(--button-secondary-border-style);
    --button-border-width: var(--button-secondary-border-width);
    --button-color: var(--button-secondary-color);
    --button-hover-color: var(--button-secondary-hover-color, var(--button-secondary-color));
}

amp-button[layout="tertiary"] {
    --button-background: var(--button-tertiary-background);
    --button-color: var(--button-tertiary-color);
    --button-hover-background: var(--button-tertiary-hover-background);
    --button-hover-color: var(--button-tertiary-hover-color);
}

Button > span > amp-loader {
    --loader-background: var(--amplify-blue-60);
    --loader-color: rgba(255, 255, 255, 0.925);
}

amp-button + amp-button {
    --button-margin: var(--button-gap);
}

/* ################################################## */
/* ################# UNORDERED LIST ################# */
/* ################################################## */

ul[layout="no-bullet"] {
    --ul-display: var(--no-bullet-list-display, flex);
    --ul-flex-wrap: var(--no-bullet-flex-wrap, wrap);
    --ul-list-style: var(--no-bullet-list-style, none);
    --ul-margin: var(--no-bullet-list-margin, 0 0 1.5rem 0);
    --ul-width: var(--no-bullet-list-width, 100%);

    --li-align-items: var(--no-bullet-list-item-align-items, center);
    --li-display: var(--no-bullet-list-item-display, flex);
    --li-flex: var(--no-bullet-list-item-flex, 1 0 100%);
    --li-padding: var(--no-bullet-list-item-padding, 0.25rem 0);
    --li-width: var(--no-bullet-list-item-width, 100%);

    --icon-color: var(--no-bullet-list-icon-color);
}

ul[layout="no-bullet"] li amp-icon:first-child {
    --icon-margin: 0 0.5rem 0 0;
}

ul[layout="select-item"] {
    --ul-border-width: var(--select-item-list-border-width, 0 0 1px);
    --ul-border-color: var(--select-item-list-border-color, var(--amplify-light-10));
    --ul-border-style: var(--select-item-list-border-style, solid);
    --ul-display: var(--select-item-list-display, flex);
    --ul-flex-wrap: var(--select-item-list-flex-wrap, wrap);
    --ul-list-style: var(--select-item-list-style, none);
    --ul-margin: var(--select-item-list-margin, 0 0 1.5rem 0);
    --ul-width: var(--select-item-list-width, 100%);

    --li-align-items: var(--select-item-list-item-align-items, center);
    --li-border-width: var(--select-item-list-item-border-width, 1px 0 0);
    --li-border-color: var(--select-item-list-item-border-color, var(--amplify-light-10));
    --li-border-style: var(--select-item-list-item-border-style, solid);
    --li-cursor: var(--select-item-list-item-cursor, pointer);
    --li-display: var(--select-item-list-item-display, flex);
    --li-flex: var(--select-item-list-item-flex, 1 0 100%);
    --li-justify-content: var(--select-item-list-item-justify-content, space-between);
    --li-margin: var(--select-item-list-item-margin, 0);
    --li-padding: var(--select-item-list-item-padding, 1rem 2.5rem);
    --li-width: var(--select-item-list-item-width, 100%);

    --icon-color: var(--no-bullet-list-icon-color);
    --icon-margin: var(--select-item-list-icon-margin, 0);
}
ul[layout="select-item"] li {
    --icon-content: "arrow_forward";
}
ul[layout="select-item"] li.active {
    --icon-color: var(--amplify-green-60);
    --icon-content: "check";

    --li-background: var(--amplify-green-0);
    --li-border-color: var(--amplify-green-20);
    --li-border-width: 1px 0;
    --li-margin: -1px 0 0;

    --typeface-regular-color: var(--amplify-green-60);
}

/* ################################################## */
/* #################### COLUMNS ##################### */
/* ################################################## */
amp-columns [colspan] {
    align-items: var(--colspan-align-items);
    background: var(--colspan-background);
    border-color: var(--colspan-border-color);
    border-radius: var(--colspan-border-radius);
    border-style: var(--colspan-border-style);
    border-width: var(--colspan-border-width);
    box-shadow: var(--colspan-box-shadow);
    flex-direction: var(--colspan-flex-direction, column);
    justify-content: var(--colspan-justify-content);
    padding: var(--colspan-padding);
}

/* ################################################## */
/* ##################### ANCHORS #################### */
/* ################################################## */
/* a[href*=".pdf"]:after,
a[href*=".pdf"]:hover:after {
    border: 1px solid var(--a-color);
    border-radius: 0.25rem;
    color: var(--a-color);
    content: "PDF";
    display: inline-block;
    font-size: var(--typeface-overline-font-size);
    font-weight: bold;
    line-height: 1rem;
    margin: 0 0 0 0.5rem;
    padding: 0.1rem 0.25rem;
    text-transform: uppercase;
} */