/**************************************************************************************/
/*1.0 Site Logo Styling changes*/
/*The following changes are made to fit the site logo and appropriate text as intended*/

/*Styling for 'Southern Regional' portion of the website*/
.usa-logo .usa-logo__text .logo_content .logo_content--site_slogan {
    font-size: 1.25rem;
}

/*Styling for 'Southern Regional' portion of the website on reduced screens*/
@media all and (max-width: 63.99em) {
    .usa-logo .usa-logo__text .logo_content .logo_content--site_slogan {
        font-size: 14px
    }
}

/*Styling for 'Drug Data Research Center' portion of the website*/
.usa-logo .usa-logo__text .logo_content .logo_content--site_name {
    font-size: 1.875rem;
}

/*Styling for 'Drug Data Research Center' portion of the website on reduced screens*/
@media all and (max-width: 63.99em) {
    .usa-logo .usa-logo__text .logo_content .logo_content--site_name {
        font-size: 18px
    }
}

/*Styling for line heights on reduced screens*/
@media all and (min-width: 64em) {
    .usa-logo .usa-logo__text .logo_content {
        line-height: 2rem
    }
}

/*Styling to reduce the size of the site logo when the screen size drops*/
@media all and (max-width: 63.99em) {
    .usa-logo img {
        max-height: 3.5rem
    }
}

/**************************************************************************************/
/*2.0 Site Header Styling changes*/
/*The following changes are made to fit the site header and adjust spacing */

/*Styling for the website logo to allow it to take up a larger portion of the header*/
@media all and (min-width: 64em) {
    .usa-header--extended .usa-logo {
        max-width: 50%;
        margin: 0.75rem 0 0.75rem;
    }
}

/*Styling to allow the header to take up more space horizontally*/
.usa-header--extended .usa-navbar {
    max-width: 75rem;
}

/*Styling to allow the navbar to take up more space horizontally*/
.usa-header--extended .usa-nav__inner {
    max-width: 75rem;
}

/*Styling for header region of the website*/
@media all and (max-width: 63.99em) {
    .usa-header .region-header-top, .usa-header .usa-menu-btn {
        height: 4rem;
    }

    .usa-header .usa-menu-btn {
        background-color: transparent;
    }
}


/**************************************************************************************/
/*3.0 Site Navbar Styling changes*/
/*The following changes are made to fit the site header and adjust spacing */

.usa-nav__secondary {
    bottom: 5rem;
}

/*Applies styling to the large screen navbar and sets the background color to the lighter blue and the text color to white*/
@media all and (min-width: 64em) {
    .usa-nav {
        background-color: var(--color-ddrc-primary-200);
    }

    .usa-nav__primary span {
        color: white;
        font-size: 1rem;
    }

    .usa-nav__submenu {
        background-color: var(--color-ddrc-dark);
    }

    .usa-nav__primary-item .usa-nav__link:hover::after {
        background-color: white !important;
    }

    .usa-nav__primary-item button[aria-expanded=false]:hover span::after {
        background-color: white;
    }

    .usa-nav__primary-item button[aria-expanded=true] {
        background-color: var(--color-ddrc-dark);
    }
}

@media (max-width: 63.99em) {
    .usa-nav__primary {
        margin-top: 1rem;
    }
}

/*Controls the styling for the plus sign for the navbar when the site is on a smaller screen*/
.usa-nav__primary button[aria-expanded=false] span::after {
    background-image: url(/lib/uswds/assets/uswds/images/usa-icons/add.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 1.25rem 1.25rem;
    display: inline-block;
    height: 1.25rem;
    width: 1.25rem;
    content: "";
    vertical-align: middle;
    margin-left: auto
}

/*Controls the styling for the plus sign for the navbar when the site is on a smaller screen*/
@supports ((-webkit-mask: url()) or (mask:url())) {
    .usa-nav__primary button[aria-expanded=false] span::after {
        background: 0 0;
        background-color: ButtonText;
        -webkit-mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/add.svg),linear-gradient(transparent,transparent);
        mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/add.svg),linear-gradient(transparent,transparent);
        -webkit-mask-position: center center;
        mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 1.25rem 1.25rem;
        mask-size: 1.25rem 1.25rem
    }
}

/*Controls the dropdown arrow control for the navber when the site is fullscreen*/
@media all and (min-width: 64em) {
    .usa-nav__primary button[aria-expanded=false] span::after {
        background-image: url(/lib/uswds/assets/uswds/img/usa-icons/expand_more.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1rem 1rem;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        content: "";
        vertical-align: middle;
        margin-left: auto
    }

    @supports ((-webkit-mask: url()) or (mask:url())) {
        .usa-nav__primary button[aria-expanded=false] span::after {
            background: 0 0;
            background-color: white;
            -webkit-mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);
            mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/expand_more.svg),linear-gradient(transparent,transparent);
            -webkit-mask-position: center center;
            mask-position: center center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 1.25rem 1.25rem;
            mask-size: 1.25rem 1.25rem
        }
    }
}

/*Controls the minus sign control that the user will use for the smaller screen menu*/
@supports ((-webkit-mask: url()) or (mask:url())) {
    .usa-nav__primary button[aria-expanded=true] span::after {
        background: 0 0;
        background-color: ButtonText;
        -webkit-mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/remove.svg),linear-gradient(transparent,transparent);
        mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/remove.svg),linear-gradient(transparent,transparent);
        -webkit-mask-position: center center;
        mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 1.25rem 1.25rem;
        mask-size: 1.25rem 1.25rem
    }
}

/*Controls the dropdown up arrow control for the navber when the site is fullscreen*/
@media all and (min-width: 64em) and (min-width:64em) {
    .usa-nav__primary button[aria-expanded=true] span::after {
        background-image: url(/themes/custom/ua_ddrc/assets/uswds/images/usa-icons/expand_less.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 1rem 1rem;
        display: inline-block;
        height: 1rem;
        width: 1rem;
        content: "";
        vertical-align: middle;
        margin-left: auto
    }

    @supports ((-webkit-mask: url()) or (mask:url())) {
        .usa-nav__primary button[aria-expanded=true] span::after {
            background: 0 0;
            background-color: white;
            -webkit-mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/expand_less.svg),linear-gradient(transparent,transparent);
            mask-image: url(/lib/uswds/assets/uswds/img/usa-icons/expand_less.svg),linear-gradient(transparent,transparent);
            -webkit-mask-position: center center;
            mask-position: center center;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-size: 1rem 1rem;
            mask-size: 1rem 1rem
        }
    }

    .usa-nav__primary button[aria-expanded=true] span::after {
        right: .75rem;
        background-color: #fff
    }
}


/**************************************************************************************/
/*4.0 Site Grid Styling changes*/
/*The following changes are made to fit display grid to fit the site's changed size */

.grid-container {
    max-width: 75rem;
}

.usa-footer__primary-section .grid-container {
    max-width: 75rem;
}

/**************************************************************************************/
/*5.0 Site Hero Styling changes*/
/*The following changes are made to the built in hero classes to adjust our hero display*/

/*.usa-hero {
    background-image: none;
}*/

.usa-hero__callout {
    max-width: unset;
    background-color: transparent;
}

.usa-hero__heading--alt {
    font-size: var(--font-ddrc-h3);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: normal;
}

.usa-hero__heading {
    font-size: var(--font-ddrc-h1);
    font-weight: 800;
    line-height: 55.2px;
    letter-spacing: normal;
    color: white;
    font-family: 'Microsoft Sans Serif';
}

.usa-hero__heading--sub-text {
    font-size: var(--font-ddrc-h5);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
}

/**************************************************************************************/
/*6.0 Card Styling changes*/
/*The following classes add additional functionality the built-in usa-card styles*/

/*.usa-card a:hover:not(:has(*:hover)) {
    transform: translateY(-5px) translateX(-5px);
    transition: all 0.2s ease-in-out;
}*/

.usa-card__container {
    font-family: 'Microsoft Sans Serif';
}

    /*    .usa-card__container.ddrc-dataset-card:hover {
        transform: translateY(-5px) translateX(-5px);
        transition: all 0.2s ease-in-out;
    }*/

    .usa-card__container.ddrc-dataset-card:hover {
        text-decoration: underline;
    }

    .usa-card__container.ddrc-update-card:hover {
        text-decoration: underline;
    }

    .usa-card__container.ddrc-publication-card:hover {
        text-decoration: underline;
    }

    .usa-card__container a {
        padding: 0 !important;
    }

.usa-card__container {
    border-radius: 0;
}

.usa-card__decorator {
    padding: 1rem 1rem .5rem;
    font-weight: 700;
    font-size: 1rem;
}

.usa-card__header {
    padding: .25rem 1rem 1rem;
}

.usa-card__heading {
    font-family: 'Microsoft Sans Serif';
}

.usa-card__body {
    padding: .5rem 1rem;
    min-height: 6rem;
}

.usa-card__footer {
    padding: .5rem 1rem 1rem;
}

.usa-button--outline--black {
    color: black;
    box-shadow: inset 0 0 0 2px black;
}

/**************************************************************************************/
/*7.0 Footer Styling changes*/
/*The following classes adjust the styles for the footer*/

.usa-footer__primary-content * {
    color: white !important;
    text-decoration: none;
}

.usa-footer__secondary-link a {
    text-decoration: none;
}

    .usa-footer__secondary-link a:hover {
        text-decoration: underline;
    }

.usa-footer__logo-img {
    max-width: 5rem;
}

.usa-social-link--linkedin {
    height: 24px;
    width: 24px;
    padding: 0;
}

    .usa-social-link--linkedin:hover {
        background-color: transparent;
    }

.usa-footer__nav {
    max-width: 75rem;
}

.usa-footer .grid-container {
    max-width: 75rem;
}

/**************************************************************************************/
/*8.0 Breadcrumb Styling changes*/
/*The following classes adjust the styles for breadcrumbs across the site*/

.usa-breadcrumb__list-item:not(:last-child)::after {
    mask-image: url(../lib/uswds/assets/uswds/img/usa-icons/navigate_next.svg),linear-gradient(transparent,transparent);
}

.usa-breadcrumb__list-item a {
    color: white !important;
}

.usa-breadcrumb__list-item {
    color: white;
}

/**************************************************************************************/
/*9.0 Accordion Styling changes*/
/*The following classes adjust the styles for accordion layouts*/

/*.usa-accordion__heading {
    font-size: 1.5rem;
}

    .usa-accordion__heading button {
        color: white;
        background-color: var(--color-ddrc-primary-100);
    }

        .usa-accordion__heading button:hover {
            background-color: var(--color-ddrc-primary);
            color:white;
        }
*/

/**************************************************************************************/
/*10.0 Aside Styling changes*/
/*The following classes adjust the styles for Aside navigation menu used across the site*/

aside.usa-in-page-nav {
    margin: 0;
    min-width: 16rem;
}

    aside.usa-in-page-nav .usa-in-page-nav__item:not(.usa-in-page-nav__item--primary) {
        padding-left: 0.5rem;
    }

    aside.usa-in-page-nav .usa-in-page-nav__nav {
        padding: 0;
    }

    aside.usa-in-page-nav .usa-in-page-nav__heading {
        margin: 0;
    }

    aside.usa-in-page-nav ul li a {
        font-size: 1rem;
    }


/**************************************************************************************/
/*11.0 Date Picker Calendar Button */
/*Slightly adjusting the margin on the calendar date picker button */

.usa-date-picker__button {
    margin-top: 0.48rem;
}

/**************************************************************************************/
/*12.0 Pagination Button Changes */
/*Adjusting color for pagination buttons*/

.usa-pagination .usa-current {
    background-color: var(--color-ddrc-primary-100);
}


/**************************************************************************************/
/*13.0 Search Nav Changes */
/*Change the Nav search width so it takes up moire of the screen*/

@media (min-width: 64em) {
    .usa-nav__secondary {
        min-width: calc(27ch + 8rem);
    }
}

/**************************************************************************************/
/*13.0 Datepicker Size change */
/*Change the font size of the components on the date picker to allow a better fit*/
.usa-date-picker__calendar__month-selection,
.usa-date-picker__calendar__date,
.usa-date-picker__calendar__year-selection,
.usa-date-picker__calendar__day-of-week {
    font-size: 80%;
}

/**************************************************************************************/
/*14.0 Return to top Link Color */
/*Change the color of the return to top link*/
.usa-footer__return-to-top a {
    color: var(--color-ddrc-primary);
}