html {
    scroll-behavior: smooth;
}

* {
    /* Overwrite any Angular Material font-family with USWDS font-family  */
    font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif
}

body {
    /* //overflow-x: auto; Overwrite USWDS hiding horizontal scrollbar  */
    color: black;
}

.page-container {
    position: relative;
    min-height: 100vh;
}

.content-wrap {
    padding-bottom: 20rem;
    /* Footer height */
}

.usa-banner__inner {
    margin-left: 0 !important;
}

.banner-text-size {
    font-size: .75rem !important;
}

main {
    padding: 0;
}

.content {
    width: 100%;
    max-width: 1380px;
    margin: 0px auto;
}

.top-margin {
    margin-top: 30px;
}

img {
    vertical-align: bottom;
}

.h1-text {
    font-size: 30px;
    line-height: 40px;
    margin: 1em 0 0.5em !important;
    font-weight: normal;
    color: #112F4E;
}

.title-tag-line {
    margin-bottom: 2em;
    font-size: 15px;
}

.collection-type {
    display: inline-block;
    margin-right: 0.5em;
}

.collection-type img {
    width: 20px;
    vertical-align: text-bottom;
    margin-right: 0.5em;
}

.divider {
    color: #adadad;
    font-size: 1em;
    position: relative;
    margin: 0 1em 0 0.5em;
}

.label {
    font-weight: 600;
    font-family: Helvetica Neue, Helvetica, Roboto, sans-serif !important;
}

.open-help-link {
    color: #4773AA;
    text-decoration: none;
}

.open-help-link:hover {
    color: #205493;
    text-decoration: underline;
}

.cols {
    display: grid;
    grid-template-columns: auto min-content;
}

.h4-text {
    margin: 1em 0 0.5em !important;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    font-family: Roboto, sans-serif;
    letter-spacing: .03125em;
}

.abstract-container {
    position: relative;
    overflow: hidden;

    p.retrieving {
        min-height: 4em;
    }

    .long-text div {
        &:last-child p {
            min-height: 3em;
        }

        p {
            line-height: 1.6;
            margin-bottom: 1.25em;
        }
    }

    &[open="true"] {
        max-height: none;

        &.long-text::after {
            background: none;
        }

    }

    &[open="false"] {
        max-height: 5em;
    }

    &:not([open="true"]) .long-text::after {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 70px;
        width: 100%;
        content: "";
        background: linear-gradient(to top,
                rgba(255, 255, 255, 1) 10%,
                rgba(255, 255, 255, 0) 80%);
        pointer-events: none;
    }
}

.fulltext-container {
    position: relative;
    overflow: hidden;

    p.retrieving {
        min-height: 4em;
    }

    .long-text div {
        &:last-child p {
            min-height: 3em;
        }

        p {
            line-height: 1.6;
            margin-bottom: 1.25em;
        }
    }

    &[open="true"] {
        max-height: none;

        &.long-text::after {
            background: none;
        }

    }

    &[open="false"] {
        max-height: 5em;
    }

    &:not([open="true"]) .long-text::after {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 70px;
        width: 100%;
        content: "";
        background: linear-gradient(to top,
                rgba(255, 255, 255, 1) 10%,
                rgba(255, 255, 255, 0) 80%);
        pointer-events: none;
    }
}

.paragraph {
    line-height: 1.6;
    margin: 0 0 0;
    font-size: medium;
}

.btn {
    color: #4773AA;
    font-size: 16px;
    padding: 0;
    margin-top: 1em;
    margin-bottom: 1em;

    &.read-more-abstract {
        font-size: 15px;
        vertical-align: middle;

        &[aria-hidden="true"] {
            display: none;
        }
    }

    &.read-less-abstract {
        font-size: 15px;
        vertical-align: middle;

        &[aria-hidden="true"] {
            display: none;
        }
    }

    &.read-more-fulltext {
        font-size: 15px;
        vertical-align: middle;

        &[aria-hidden="true"] {
            display: none;
        }
    }

    &.read-less-fulltext {
        font-size: 15px;
        vertical-align: middle;

        &[aria-hidden="true"] {
            display: none;
        }
    }

    &:hover {
        color: #205493;
        text-decoration: none;
        background: none;
    }
}

.metadata {
    letter-spacing: normal;
    font-size: 15px;
    margin-bottom: 1em;
}

.row-label {
    font-family: Helvetica Neue, Helvetica, Roboto, sans-serif !important;
    font-size: 15px;
    color: #000;
    font-weight: 600;
}

.expansion-grid-container {
    display: grid;
    grid-template-columns: 180px 100%;
    margin-left: 0px !important;
    padding: 0 !important;
    width: 75em;
    margin-top: 10px;
    margin-bottom: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: 210px 100%;
    margin-left: 0px !important;
    padding: 0 !important;
    width: 760px;
}

.grid-item {
    font-size: 15px;
    text-align: left;
}

.security-label-spacing {
    margin-right: 10px;
}

.row-content {
    font-size: 15px;
    color: #565C65;
    font-weight: normal;
}

.aside {
    min-width: 360px;
    height: fit-content !important;
    margin-left: 60px;
    border: 1px solid #D6D7D9;
    padding-bottom: 0.5em;
}

h3 {
    font-family: Helvetica Neue, Helvetica, Roboto, sans-serif !important;
    padding: 0.5em 15px;
    background: #D6D7D9;
    line-height: 1.5;
    font-size: 18px;
    margin: 0 0 16px;
    text-transform: uppercase;
}

.one-col {
    margin: 0.75em 1em;
    width: 92%;
}

.marking-label {
    font-family: Helvetica Neue, Helvetica, Roboto, sans-serif !important;
    font-size: 15px;
    color: #000;
    font-weight: 600;
}

.marking-content {
    font-size: 15px;
    text-align: left;
    margin-right: 0.5em;
    margin-top: 5px;
    color: #565C65;
    font-weight: normal;
}