/* #region Base new look styles */
/* update 2021-07 no hyphen and heading sizing */
body {
    overflow-wrap: initial;
    overflow-wrap: initial;
    word-wrap: initial;
    -ms-word-break: initial;
    word-break: initial;
    word-break: initial;
    -ms-hyphens: initial;
    -moz-hyphens: initial;
    -webkit-hyphens: initial;
    hyphens: initial;
    line-height: 1.5;
}

table {
    overflow-wrap: initial;
    word-wrap: initial;
    -ms-word-break: initial;
    word-break: initial;
    word-break: initial;
    -ms-hyphens: initial;
    -moz-hyphens: initial;
    -webkit-hyphens: initial;
    hyphens: initial;
}

@media (max-width: 1023px) {
    html,
    body {
        background-image: none;
        background-color: #ffffff;
    }
}

main {
    overflow: auto;
}

h1,
.h1 {
    font-size: 36px;
    line-height: 40.5px;
    font-weight: bold;
}

@media (min-width: 768px) {
    h1,
    .h1 {
        font-size: 48px;
        line-height: 54px;
    }
}

h2,
.h2 {
    font-size: 28px;
    line-height: 32px;
    font-weight: bold;
}

@media (min-width: 768px) {
    h2,
    .h2 {
        font-size: 36px;
        line-height: 40.5px;
    }
}

h3,
.h3 {
    font-size: 24px;
    line-height: 27px;
    font-weight: bold;
}

h4,
.h4 {
    font-size: 20px;
    line-height: 22.5px;
    font-weight: bold;
}

h5,
.h5 {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}

h6,
.h6 {
    font-size: 12.8px;
    line-height: 16px;
    font-weight: bold;
}

@media (min-width: 1024px) {
    .nav-topbar.desktop-only {
        min-height: 1.4rem;
    }
}

.collapse-h2 .paragraph--section {
    padding: 0;
}

.collapse-h2 .paragraph--section + .paragraph--section .hcollapse {
    border-top: 0;
}

.card {
    background-color: #ffffff;
}

p.button {
    margin-bottom: 0;
}

p.button:last-child {
    margin-right: 0;
    margin-bottom: 1rem;
}

p.button + *:not(section.columns) {
    display: inherit;
}

p.button + p.button {
    display: inline-block;
}

.table-hide-col-1 table tr > *:nth-child(1) {
    display: none;
}

.table-hide-col-2 table tr > *:nth-child(2) {
    display: none;
}

.table-hide-col-3 table tr > *:nth-child(3) {
    display: none;
}

.table-hide-col-4 table tr > *:nth-child(4) {
    display: none;
}

.table-hide-col-5 table tr > *:nth-child(5) {
    display: none;
}

.table-hide-col-6 table tr > *:nth-child(6) {
    display: none;
}

@media (max-width: 767px) {
    [data-custom-embed-id] {
        overflow-x: inherit;
    }
}

/* update 2021-07 end */
/* Main Navigation */
form.site-search.mobile-only input[type='search']::-webkit-search-cancel-button,
.navbar-wrapper
    form.site-search
    input[type='search']::-webkit-search-cancel-button {
    position: relative;
    -webkit-appearance: none;
    height: 1.5rem;
    width: 2rem;
    background-image: url('../img/clear-search-icon.svg');
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: center left 0.5rem;
}

h1 {
    padding-top: 1rem;
    margin-top: 10px;
}

@media (min-width: 768px) {
    .navbar-wrapper form.site-search .container {
        display: grid;
        grid-template-columns: auto min-content;
    }

    button[aria-controls='desktop-search'] {
        border: 0px;
        background-color: #fff;
        width: 48px;
        height: 48px;
        padding: 0rem;
        background-image: url('../img/search-icon.svg');
        background-size: 1.5rem;
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    button[aria-controls='desktop-search'][aria-expanded='true'] {
        background-color: var(--ucla-blue);
        background-image: url('../img/close-search-icon.svg');
    }

    .js #desktop-search {
        display: none;
    }

    .js #desktop-search.control-aria-expanded {
        width: 100%;
        display: block;
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        z-index: 1;
    }

    #desktop-search {
        grid-area: desktop-search;
    }
}

@media (max-width: 767px) {
    form.site-search.mobile-only {
        display: grid;
        grid-template-columns: auto min-content;
    }

    .menu-icon-wrap {
        width: 1.5rem;
        height: 12px;
        display: inline-block;
        position: relative;
    }

    .menu-icon {
        transition-duration: 0.075s;
        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        transition-property: transform;
        width: 1.5rem;
        height: 3.5px;
        background: var(--ucla-blue);
        border-radius: 0;
        position: absolute;
        display: block;
        top: 50%;
    }

    button[aria-controls='menus']:hover {
        opacity: 1;
        background: var(--ucla-blue);
    }

    button[aria-controls='menus']:active {
        background-color: var(--darkest-blue);
    }

    button[aria-controls='menus']:focus {
        outline-offset: -0.25rem;
        outline: 1px dotted var(--brand-light-blue);
    }

    .menu-icon::before {
        transition: top 0.075s 0.12s ease, opacity 0.075s ease;
        top: -6px;
    }

    .menu-icon::after {
        transition: bottom 0.075s 0.12s ease,
            transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
        bottom: -4px;
    }

    .menu-icon::before,
    .menu-icon::after {
        content: '';
        position: relative;
        display: block;
        width: 1.5rem;
        height: 3px;
        background: var(--ucla-blue);
        border-radius: 0;
    }

    button[aria-controls='menus']:hover .menu-icon,
    button[aria-controls='menus']:hover .menu-icon::before,
    button[aria-controls='menus']:hover .menu-icon::after {
        background-color: #fff;
    }

    button[aria-controls='menus'][aria-expanded='true'] .menu-icon {
        transform: rotate(45deg);
        transition-delay: 0.12s;
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    button[aria-controls='menus'][aria-expanded='true'] .menu-icon::before {
        top: 0;
        opacity: 0;
        transition: top 0.075s ease, opacity 0.075s 0.12s ease;
    }

    button[aria-controls='menus'][aria-expanded='true'] .menu-icon::after {
        bottom: 2px;
        transform: rotate(-90deg);
        transition: bottom 0.075s ease,
            transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
    }
}

/* main navigation */
/* Dialogs */
.dialog-fullscreen {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

.dialog {
    display: none;
}

.dialog.opened {
    display: grid;
    justify-content: center;
    align-content: center;
}

.dialog-mask {
    background-color: rgba(0, 0, 0, 0.6);
    -moz-backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 201;
}

.dialog-container {
    display: grid;
    grid-template-columns: 1fr min-content;
    background: #ffffff;
    padding: 2rem;
    z-index: 202;
    border-radius: 1rem;
}

.dialog-content {
    grid-row: 2/3;
    grid-column: 1/3;
}

.dialog-title {
    grid-row: 1/2;
    grid-column: 1/2;
}

.dialog-close {
    grid-row: 1/2;
    grid-column: 2/3;
}

.dialog-content iframe {
    border-radius: 0.9rem;
}

.dialog-content iframe[src*='youtube'] {
    width: 80vw;
    height: 56.25vw;
    max-height: 70vh;
}

.dialog-content *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.dialog-title {
    margin-top: 0;
}

/* dialogs */
/* YouTube */
.card-youtube .card-image {
    position: relative;
}

/* youtube */
/* People */
.person {
    grid-template-rows: min-content 32px min-content 1fr 32px;
}

.person-image {
    padding-left: 0;
}

.person-image img {
    width: 100%;
    height: auto;
}

.js .person-link {
    text-decoration: none;
}

/*
Res Life site gets specific customizations for how these cards display on
certain pages, for example on /on-campus/{community} pages, we don't
list the building by default and instead show the person's details to
show their title
*/
[data-ucla-path^='/on-campus/'].js .person .person-summary-buildings,
[data-ucla-path^='/off-campus/'].js .person .person-summary-buildings {
    display: none;
}
[data-ucla-path^='/on-campus/'].js .person .person-summary .summary,
[data-ucla-path^='/off-campus/'].js .person .person-summary .summary {
    display: block;
    color: #333;
}

.js .person .person-summary .person-summary-department strong,
.js .person .person-summary .person-summary-buildings strong {
    font-weight: normal;
    color: #333;
}

.js .person .person-summary .person-summary-department strong:hover,
.js .person .person-summary .person-summary-buildings strong:hover {
    color: #333;
}

.js .person {
    transition: transform 0.2s, box-shadow 0.2s;
}

.js .person-link:hover {
    transform: scale(1.02, 1.02);
    background-color: #f8f8f8;
    color: var(--black);
    box-shadow: 3px 3px 3px rgb(0 0 0 / 20%);
}

.js .person .person-summary {
    padding-bottom: 1rem;
}

.person-summary-email,
.person-summary-department,
.person-summary-buildings {
    margin-bottom: 0;
    margin-top: 0;
}

.js .person {
    grid-template-rows: min-content 32px min-content 1fr;
}

.person-dialog {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
    width: 80vw;
    max-width: calc(800px + 1rem);
    max-height: 80vh;
    overflow-y: scroll;
}

.person-dialog .person-image {
    grid-row: 1/2;
    grid-column: 2/3;
}

.person-dialog .person-image {
    grid-row: 1/2;
    grid-column: 2/3;
}

.person-dialog .person-summary {
    grid-row: 1/2;
    grid-column: 1/2;
    padding: 0;
}

.js .person-dialog .person-summary .person-summary-email,
.js .person-dialog .person-summary .summary {
    display: block;
}

/* people */
/* Service Cards */
.cards-theme-services .card {
    border-radius: 0;
}

.cards-theme-services .card-image img {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

/* service cards */
/* Social */
.social-cta {
    min-width: 280px;
    margin-top: 1rem;
    text-align: right;
    display: flex;
    justify-content: right;
}

.social-cta > * {
    display: inline-block;
}

.social-cta h2 {
    font-size: 1.2rem;
    margin-right: 1rem;
    margin-left: auto;
}

.social-cta .social-links-container {
    margin-right: 0;
    padding-right: 0;
}

/* social */
/* Footer */
@media (max-width: 767px) {
    footer .container {
        margin: 0;
        padding: 1rem;
        display: inline-block;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1rem;
    }

    footer .container .ucla-logo {
        grid-column: 1/3;
        grid-row: 1/2;
        margin-bottom: 1rem;
    }
}
.footer-contact {
    color: white;
    font-weight: bold;
    font-size: 0.875rem;
}
.footer-contact a {
    font-size: 0.875rem;
    padding-right: 0;
}
.site-footer .footer-content li,
.site-footer .footer-content li a {
    font-size: 0.875rem;
}
@media (min-width: 768px) {
    .site-footer .footer-content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 1rem;
    }
}

/* footer */

/* Header Image */
#block-ucla-campus-headerimageblock img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

/* header image */
/* Links */
.lead a,
.table-of-contents-links a {
    color: var(--brand-blue);
}

.lead a:hover,
.table-of-contents-links a:hover,
.cards-theme-buttons .card:hover {
    color: #fff;
}

/* links */
/* Side Section Nav */
.section-menu ul {
    padding-left: 0rem;
}

.section-menu-title a {
    color: #333;
    text-decoration: none;
}

.section-menu-title a:hover {
    color: #fff;
}

.section-menu-item {
    position: relative;
    border-top: 1px solid #ccc;
}

.section-menu-item:last-child {
    border-bottom: 1px solid #ccc;
}

.section-menu-item a {
    --horizontal-padding: 0.5rem;
    padding: var(--horizontal-padding) 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: block;
    color: var(--brand-blue);
    text-decoration: none;
}

.section-menu-item a:hover {
    color: #fff;
}

.section-menu-item-active a {
    --border-left-width: 4px;
    border-left: var(--border-left-width) solid var(--ucla-gold);
    padding-left: calc(var(--horizontal-padding) + var(--border-left-width));
}

/* side section nav */
/* Fullscreen */
.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.8);
    text-align: center;
}

.fullscreen iframe {
    margin: auto;
    height: auto;
    width: auto;
}

/* fullscreen */
/* Topbbar */
.topbar-user-links {
    background-color: var(--black);
}

.topbar-user-links p {
    margin: 0 -1rem;
    padding: 0.3rem;
    text-align: right;
    color: #bbb;
}

.topbar-user-links a {
    text-decoration: underline;
    color: #fff;
}

/* topbbar */
/* Accordions */
.js .hcollapse .hdetails {
    display: none;
    /* outline: 1px solid red; */
}

.js .hcollapse {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.js .hcollapse + .hcollapse {
    border-top-width: 0px;
}

.hcollapse + h2 {
    margin-top: 3rem;
}

.js .hcollapse .hdetails[aria-expanded='false'] {
    display: none;
}

.js .hcollapse .hdetails[aria-expanded='true'] {
    display: block;
    padding: 0rem 1rem;
}

.js .hcollapse .hdetails[aria-expanded='true'] > *:last-child {
    margin-bottom: 1rem;
}

.js .hcollapse .hsummary h2,
.js .hcollapse .hsummary h3 {
    color: var(--darker-blue);
    margin: 1rem 0;
}

.js .hcollapse-loaded .hsummary {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-gap: 2rem;
    cursor: pointer;
    padding: 0rem 1rem;
}

.ucla-button-toggle {
    background-image: url('../img/arrow-down.svg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    height: 1.5rem;
    width: 1.5rem;
    cursor: pointer;
    border: none;
    background-color: #fff;
    color: var(--brand-blue);
    padding: 0.5rem 1rem;
    outline: none;
}

.hcollapse:active {
    outline: 1px dotted var(--brand-light-blue);
}

.hsummary:hover,
.hsummary:focus,
.hsummary-active {
    background-color: var(--brand-light-blue);
}

.hsummary:hover .ucla-button-toggle,
.hsummary:focus .ucla-button-toggle {
    color: #fff;
    background-color: #0179bf;
}

.ucla-button-toggle:hover,
.hsummary:hover .ucla-button-toggle,
.hsummary:focus .ucla-button-toggle,
.hsummary-active .ucla-button-toggle {
    background-image: url('../img/down-light.svg');
    background-color: #0179bf;
}

.h2summary p {
    line-height: 2.53125rem;
}

.hcollapse-open .hsummary .ucla-button-toggle {
    background-image: url('../img/arrow-up.svg');
}

.hcollapse-open .hsummary .ucla-button-toggle:hover,
.hcollapse-open .hsummary:hover .ucla-button-toggle,
.hcollapse-open .hsummary:focus .ucla-button-toggle,
.hcollapse-open .hsummary-active .ucla-button-toggle {
    background-image: url('../img/up-light.svg');
    background-color: #0179bf;
}

.js .hsummary:hover h2,
.js .hsummary:hover h3,
.js .hsummary:focus h2,
.js .hsummary:focus h3,
.js .hcollapse .hsummary-active h2,
.js .hcollapse .hsummary-active h3,
.js .hsummary-active h2,
.js .hsummary-active h3 {
    color: #fff;
}

/* Global Footer */
.site-footer .footer-logo .site-name {
    display: block;
    margin-left: -1rem;
    margin-right: 1rem;
    /* this probably needs to be defined site specific */
    transform: translateX(-3px);
}

.site-footer .footer-logo {
    margin-bottom: 0;
}

.global-footer {
    color: #333;
    margin-top: 0rem;
}

.global-footer a:focus {
    outline-color: #2774ae;
}

.global-footer .container {
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 1024px) {
    .global-footer .container {
        display: grid;
        grid-template-areas:
            'global-social'
            'copyright'
            'global-links';
        grid-gap: 1rem;
        grid-template-columns: auto;
    }
}

.global-footer-links a {
    text-decoration: none;
    color: #2774ae;
    font-weight: bold;
    padding: 0rem;
    font-size: 0.8125rem;
    margin-right: 1rem;
}

.global-footer-links a:visited {
    color: #2774ae;
}

.global-footer .regents a {
    padding-left: 0rem;
    font-size: 0.8125rem;
    color: #2774ae;
    font-weight: bold;
    padding: 0rem;
}

.regents {
    margin: 0rem;
    font-size: 0.8125rem;
    grid-area: copyright;
}

.global-footer-links {
    grid-area: global-links;
}

.global-footer a:hover {
    color: #fff;
    background: #0079bf;
}

.global-footer a:active {
    color: #fff;
    background: #003b5c;
}

.global-footer .social-links-container {
    display: flex;
    flex-direction: row;
    grid-area: global-social;
    margin: 0;
}

.global-footer .social-links-container a {
    width: 40px;
    height: 40px;
    background-size: cover;
}

.global-footer .social-links-container a[href*='facebook.com'] {
    background-image: url('../img/social/facebook-color.svg');
}

.global-footer .social-links-container a[href*='twitter.com'],
.global-footer .social-links-container a[href*='x.com'] {
    background-image: url('../img/social/twitter-color.svg');
}

.global-footer .social-links-container a[href*='instagram.com'] {
    background-image: url('../img/social/instagram-color.svg');
}

.global-footer .social-links-container a[href*='snapchat.com'] {
    background-image: url('../img/social/snapchat-color.svg');
}

.global-footer .social-links-container a[href*='linkedin.com'] {
    background-image: url('../img/social/linkedin-color.svg');
}

.global-footer .social-links-container a[href*='youtube.com'] {
    background-image: url('../img/social/youtube-color.svg');
}

.global-footer .social-links-container a[href*='tiktok.com'] {
    background-image: url('../img/social/tiktok-color.svg');
}

.global-footer .social-links-container a[href*='facebook.com']:hover,
.global-footer .social-links-container a[href*='facebook.com']:active {
    background-image: url('../img/social/facebook-white.svg');
}

.global-footer .social-links-container a[href*='twitter.com']:hover,
.global-footer .social-links-container a[href*='twitter.com']:active,
.global-footer .social-links-container a[href*='x.com']:hover,
.global-footer .social-links-container a[href*='x.com']:active {
    background-image: url('../img/social/twitter-white.svg');
}

.global-footer .social-links-container a[href*='instagram.com']:hover,
.global-footer .social-links-container a[href*='instagram.com']:active {
    background-image: url('../img/social/instagram-white.svg');
}

.global-footer .social-links-container a[href*='snapchat.com']:hover,
.global-footer .social-links-container a[href*='snapchat.com']:active {
    background-image: url('../img/social/snapchat-white.svg');
}

.global-footer .social-links-container a[href*='linkedin.com']:hover,
.global-footer .social-links-container a[href*='linkedin.com']:active {
    background-image: url('../img/social/linkedin-white.svg');
}

.global-footer .social-links-container a[href*='youtube.com']:hover,
.global-footer .social-links-container a[href*='youtube.com']:active {
    background-image: url('../img/social/youtube-white.svg');
}

.global-footer .social-links-container a[href*='tiktok.com']:hover,
.global-footer .social-links-container a[href*='tiktok.com']:active {
    background-image: url('../img/social/tiktok-white.svg');
}

.global-footer .social-links-container a:hover {
    background-color: #0079bf;
}

.global-footer .social-links-container a:active {
    background-color: #003b5c;
}

/* global footer */
.person-page {
    display: grid;
    grid-template-columns: 2fr 3fr;
    column-gap: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.person-page header {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.person-page h1 {
    font-size: 2.4rem;
    line-height: 3rem;
    margin: 0;
    padding: 0;
    margin-top: calc(-0.3rem - 3px);
}
.person-page h1 + .lead {
    padding-top: 0;
    margin-top: 0;
    font-size: 1.4rem;
    line-height: 1.8rem;
}
.person-page-image {
    text-align: right;
    font-size: 0; /* remove whitespace */
}
.person-page img,
.person-page .image-placeholder {
    border: 1px solid #ccc;
    max-width: 300px;
}
.person-page .person-page-image {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.person-page dl {
    display: grid;
    grid-template-columns: 1fr;
}
.person-page dd *:first-child {
    margin-top: 0;
    padding-top: 0;
}
.person-page dt,
.person-page dd *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}
.field-entities[data-entity-bundle='resource'],
.field-entities[data-entity-bundle='resource_cards'],
.field-entities[data-entity-bundle='people_advanced'] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
    gap: 2rem;
    width: 100%;
}
.person-card {
    border: 1px solid #ccc;
}

.resource-page {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 1rem;
}
.resource-page header,
.resource-page .resource-image,
.resource-page .resource-content {
    grid-column: 1 / 2;
}

.resource-page .resource-aside {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    background-color: #eee;
    padding: 1rem;
}
.resource-page .resource-facilitators {
    grid-column: span 2;
}
.resource-tags a {
    display: inline-block;
    background: #daebfe;
    line-height: 1.6rem;
    padding: 0.2rem 1rem;
    border-radius: 1rem;
    color: #000;
    text-decoration: none;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    line-height: 1.2rem;
    padding: 0.2rem 0.8rem 0 0.8rem;
    border-radius: 0.8rem;
}
.resource-tags a:hover {
    outline: 2px solid #daebfe;
    color: #000 !important;
    background: #fff;
}
.taxonomy-view {
    padding: 2rem 0;
}
.taxonomy-view + .taxonomy-view {
    border-top: 1px solid #666;
}
.resource-summaries .resource-teaser {
    padding-bottom: 1.5rem;
}
.resource-summaries .resource-teaser + .resource-teaser {
    border-top: 1px solid #ccc;
    padding-top: 1.5rem;
}

.resource-teaser {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr min-content;
    row-gap: 1rem;
    column-gap: 1.5rem;
}
.resource-teaser h2 {
    margin-top: 0;
}

.image-placeholder {
    background-color: #dddddd;
    outline: 2px solid #aaaaaa;
    outline-offset: -2px;
    width: 100%;
    aspect-ratio: auto 800 / 600;
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
}
.person-page-image .image-placeholder {
    display: block;
    aspect-ratio: auto 800 / 800;
    background-image: url('../img/placeholder-person.svg');
}
.resource-image .image-placeholder {
    display: block;
    aspect-ratio: auto 800 / 600;
    background-image: url('../img/placeholder-image.svg');
}
.resource-teaser .links,
.resource-teaser .links li {
    display: flex;
    margin: 0;
    padding: 0;
    text-align: right;
    flex-direction: column;
    align-items: end;
}
.field-entities[data-entity-bundle='resource_cards'] {
    margin: 0 0 2rem 0;
    grid-template-columns: repeat(3, 1fr);
}
/* todo: typo? this probably wasn't being used on BWB */
/* @media (max-width 767px) {
  .field-entities[data-entity-bundle="resource_cards"] {
    margin: 0 0 2rem 0;
    grid-template-columns: repeat(2, 1fr)
  }
} */

.resource-card {
    border: 1px solid #ccc;
    background: #fff;
    display: block;
    text-decoration: none !important;
}
.resource-card .resource-image {
    font-size: 0;
}
.resource-card-header {
    display: block;
    padding: 1rem;
    font-size: 16px;
    text-decoration: none !important;
}

.resource-card-category {
    font-size: 1rem;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    font-weight: bold;
    color: #296bbd;
}
.resource-card-title {
    display: block;
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1.4rem;
    color: #333;
}
.resource-card:hover .resource-card-category,
.resource-card:hover .resource-card-title {
    color: #fff;
}

.resource-category a,
.resource-category a:hover {
    background-color: transparent;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    color: #296bbd;
}
.resource-category a:hover {
    background-color: #296bbd !important;
}
.resource-links a:first-of-type {
    display: block;
    overflow: hidden;
    background-color: var(--ucla-gold);
    color: #000;
    text-indent: -1000px;
    text-align: left;
    height: 2.4rem;
    width: 2.4rem;
    border-radius: 1.2rem;
    background-image: url(../img/arrow-forward.svg);
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
}

/* Pages with side nav */
.page-has-menu .page-content .container {
    padding-right: 0rem;
    padding-left: 0rem;
}
.page-has-menu .section-menu {
    padding-right: 0rem;
}
@media (max-width: 766px) {
    .page-has-menu .section-menu {
        padding-left: 0rem;
    }
}
.page-menu .container {
    padding-left: 0;
    padding-right: 0;
}
/* spacing between side navbars */
.page-menu {
    padding-top: 1rem;
}
/* spacing between navbar and its heading */
.page-menu nav:not(:first-of-type) h2 {
    padding-top: 1.75rem;
}
.page-menu h2 {
    font-size: 1.125rem;
    line-height: 1.5;
    padding-top: 0.5rem;
    margin-bottom: 0;
}
.page-menu ul {
    padding-top: 0.5rem;
}
/* pages with side nav */

/* Subpage */
.sub-page a {
    color: var(--brand-blue);
}
.sub-page a:hover {
    color: #fff;
}
/* subpage */

/* Service Cards */
.card-services a[href*='facebook.com'] {
    background-image: url(/themes/custom/ucla_campus/img/social/facebook-darkerblue.svg);
}
.card-services a[href*='facebook.com']:hover,
.card-services a[href*='facebook.com']:active {
    background-image: url(/themes/custom/ucla_campus/img/social/facebook-white.svg);
    background-color: #0079bf;
}
.card-services a[href*='instagram.com'] {
    background-image: url(/themes/custom/ucla_campus/img/social/instagram-darkerblue.svg);
}
.card-services a[href*='instagram.com']:hover,
.card-services a[href*='instagram.com']:active {
    background-image: url(/themes/custom/ucla_campus/img/social/instagram-white.svg);
    background-color: #0079bf;
}
.card-services a[href*='linkedin.com'] {
    background-image: url(/themes/custom/ucla_campus/img/social/linkedin-darkerblue.svg);
}
.card-services a[href*='linkedin.com']:hover,
.card-services a[href*='linkedin.com']:active {
    background-image: url(/themes/custom/ucla_campus/img/social/linkedin-white.svg);
    background-color: #0079bf;
}
.card-services a[href*='twitter.com'],
.card-services a[href*='x.com'] {
    background-image: url(/themes/custom/ucla_campus/img/social/twitter-darkerblue.svg);
}
.card-services a[href*='twitter.com']:hover,
.card-services a[href*='twitter.com']:active,
.card-services a[href*='x.com']:hover,
.card-services a[href*='x.com']:active {
    background-image: url(/themes/custom/ucla_campus/img/social/twitter-white.svg);
    background-color: #0079bf;
}
.card-services a[href*='youtube.com'] {
    background-image: url(/themes/custom/ucla_campus/img/social/youtube-darkerblue.svg);
}
.card-services a[href*='youtube.com']:hover,
.card-services a[href*='youtube.com']:active {
    background-image: url(/themes/custom/ucla_campus/img/social/youtube-white.svg);
    background-color: #0079bf;
}
.card-service-label [data-label]::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.services-categories {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.services-categories li {
    display: inline-block;
    margin: 0 2rem 0 0;
    padding: 0;
}
.services-categories li::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin-right: 0.5rem;
    background: #000000;
}

.services-categories li:nth-child(1):before,
.card-service-label [data-label^='Category 1']::before {
    background: #005587;
}
.services-categories li:nth-child(2):before,
.card-service-label [data-label^='Category 2']::before {
    background: #00ff87;
}
.services-categories li:nth-child(3):before,
.card-service-label [data-label^='Category 3']::before {
    background: #ff00a5;
}
/*.card-service-label [data-label]::before {
    display: none;
}*/
.card-services {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 1023px;
}
@media (min-width: 1440px) {
    .card-services {
        max-width: 1170px;
    }
}
.card-services .social-links-container {
    margin: 0;
}
.page-content a:hover {
    color: #fff;
}
/* service cards */

/* Events */
.event-cards-home {
    margin-top: 1rem;
}
/* events */

/* Custom Embed */
.custom-embed {
    margin-bottom: 3rem;
}

/* custom embed */
.navbar > ul .has-submenu > a {
    background-image: url('../img/arrow-down.svg');
    background-size: 1.7rem 1.7rem;
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 1.7rem;
}
.navbar > ul .has-submenu > a:focus,
.navbar > ul .has-submenu > a:hover {
    background-image: url('../img/arrow-down-light.svg');
    background-size: 1.7rem 1.7rem;
    background-position: center right;
    background-repeat: no-repeat;
    padding-right: 1.7rem;
}

/* Broadcast alert */
:root {
    --success: #007339;
    --info: #8bb8e8;
    --warning: #f57f17;
    --danger: #d60000;
}
.alert {
    border: 0.25rem solid var(--info);
    color: #333;
    font-size: 1rem;
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
}
.alert--success {
    border-color: var(--success);
}
.alert--warning {
    border-color: var(--warning);
}
.alert--danger,
.alert--error {
    border-color: var(--danger);
}
.alert :last-child {
    margin-bottom: 0;
}
.alert-with-icon {
    display: grid;
    gap: 1rem;
    grid-template-columns: 24px 1fr;
    text-align: left;
}
.alert-with-icon img {
    height: auto;
    width: 24px;
}
.alert-with-icon .alert-message p:first-child {
    margin-top: 0;
}
.alert a {
    color: var(--darker-blue);
    text-decoration: underline;
}
.alert a:focus,
.alert a:hover {
    background-color: var(--darker-blue);
    color: #fff;
    text-decoration: none;
}

/* #region Footer refactor */
.site-footer {
    background: var(--ucla-blue);
    display: grid;
    grid-template-areas:
        'logo         logo'
        'content      content'
        'social-links covid19';
    padding-left: calc(1.5rem + 50% - 0.5 * 1170px);
    padding-right: calc(1.5rem + 50% - 0.5 * 1170px);
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.site-footer .footer-logo {
    grid-area: logo;
    margin-top: 0;
}
.site-footer .footer-content {
    grid-area: content;
}
.site-footer .social-links-container {
    grid-area: social-links;
    position: relative;
    left: -0.5rem;
    margin-bottom: 0;
}
.site-footer .footer-covid19 {
    grid-area: covid19;
    align-self: center;
    justify-self: end;
}
.site-footer .footer-covid19 a {
    background: #ffe500;
    color: #333;
    font-weight: bold;
    padding: 0.75rem;
    border-radius: 0.15rem;
    display: block;
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition-property: transform;
}
.site-footer .footer-covid19 a:hover {
    transform: scale(1.02, 1.02);
}
@media (max-width: 1440px) {
    .site-footer {
        padding-left: calc(1.5rem + 50% - 0.5 * 1023px);
        padding-right: calc(1.5rem + 50% - 0.5 * 1023px);
    }
}
@media (max-width: 1036px) {
    .site-footer {
        padding-left: calc(1.5rem);
        padding-right: calc(1.5rem);
    }
}
@media (max-width: 767px) {
    .site-footer {
        background: var(--ucla-blue);
        display: grid;
        grid-template-areas:
            'logo'
            'content'
            'social-links'
            'covid19';
    }
    .site-footer .social-links-container {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    .site-footer .footer-covid19 {
        justify-self: start;
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
}
/* #endregion */

/* #region Newlook migration CSS */
.oldlook-only {
    display: none;
}
/* #endregion */

/* #region Make footer sit flush with bottom of page */
#main {
    display: flex;
    flex-direction: column;
}
#main .page {
    flex: 1;
}
/* #endregion */

/* #region Fix sites without department logos in footer */
.footer-logo--global img {
    height: 70px;
    position: relative;
    margin-left: -29px;
}
/* #endregion */

/* #region Fix list appearance after BWB merge */
.body--page ul,
.paragraph--section ul {
    list-style: disc;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}
.body--page ol,
.paragraph--section ol {
    list-style: decimal;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
}
.body--page ul > li > ul,
.body--page ul > li > ol,
.body--page ol > li > ul,
.body--page ol > li > ol,
.body--page li + li,
.paragraph--section ul > li > ul,
.paragraph--section ul > li > ol,
.paragraph--section ol > li > ul,
.paragraph--section ol > li > ol,
.paragraph--section li + li {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
/* #endregion */

/* #region Hide certain elements for Autopilot visual-regression tests */
/* Hiding breadcrumbs is a temporary fix for a larger caching issue they have */
[data-ucla-env='dev'] #block-ucla-campus-breadcrumbs,
[data-ucla-env='autopilot'] #block-ucla-campus-breadcrumbs,
[data-ucla-env='dev'] [data-ucla='calendar'],
[data-ucla-env='autopilot'] [data-ucla='calendar'],
[data-ucla-env='dev'] [data-ucla='faq'],
[data-ucla-env='autopilot'] [data-ucla='faq'],
[data-ucla-env='dev'] [data-ucla='form'],
[data-ucla-env='autopilot'] [data-ucla='form'] {
    display: none;
}
/* #endregion */

/* #region Allow site names to be two-lined */
@media (max-width: 767px) {
    /* .site-name {
        margin-bottom: 0.5rem;
    } */
}
.site-name {
    line-height: 1.125;
}
.site-slogan {
    font-size: 1.25rem;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}
/* #endregion */

/* #region Don't collapse heading image when option is enabled for page */
#block-ucla-campus-headerimageblock.headerimageblock--no_crop img {
    max-height: unset;
}
/* #endregion */

/* #region Volunteer site customizations */
.volunteer-opportunity-container {
    display: flex;
    background-color: #2774ae;
}

.volunteer-opportunity {
    display: flex;
    width: 100%;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 1218px;
    color: #ffffff;
}

.volunteer-opportunity-information {
    flex: 2;
    display: flex;
    flex-direction: column;

    justify-content: center;
    width: 100%;
}

.volunteer-opportunity-image-container {
    flex: 2;
    margin-right: 40px;

    overflow: hidden;
    max-height: 600px;
    max-width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.volunteer-opportunity-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.volunteer-opportunity-information > * {
    margin-bottom: 20px;
}

.volunteer-opportunity h3 {
    font-size: 24px;
    margin-top: 5px;
    margin-bottom: 0px;
    color: #ffffff;
}
.volunteer-opportunity h5 {
    font-size: 16px;
    margin-bottom: 20px;
    color: #ffffff;
}

.volunteer-opportunity-register-button {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 40px;
    margin-top: 10px;
    background-color: #ffd100;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    max-width: 150px;
}

.volunteer-opportunity-register-button:hover {
    color: #000000;
    font-weight: bold;
    background-color: #ffffff;
}

.volunteer-opportunity-value-tags {
    color: #ffffff;
}

.volunteer-opportunity-description-container {
    width: 100%;

    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

    display: flex;
    flex-direction: row;
}

@media (max-width: 780px) {
    .volunteer-opportunity {
        flex-direction: column;
        align-items: center;
    }
    .volunteer-opportunity-image-container {
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .volunteer-opportunity-description-container {
        flex-direction: column;
    }
    .volunteer-opportunity-teaser-image-container {
        display: none;
    }
}

.volunteer-opportunity-description {
    flex: 3;

    background-color: #ffffff;
    color: #000000;

    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1),
        4px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}
.volunteer-opportunity-description h5 {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.volunteer-opportunity-description-details {
    margin-top: 10px;
}

.volunteer-opportunity-contact-info {
    flex: 1;

    background-color: #ffffff;
    color: #000000;

    display: flex;
    flex-direction: column;

    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

[data-ucla-ref^='volunteer/opportunity/'] .volunteer-opportunity-information a {
    color: black;
}

[data-ucla-ref^='volunteer/opportunity/'] .h5 a {
    color: white;
}

.volunteer-opportunity-teaser-container {
    border-top: 1px solid #dddddd;
    padding-top: 20px;
    padding-bottom: 20px;
    justify-content: start;
    align-items: flex-start;
}

.volunteer-opportunity-teaser {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: flex-start;
}

.volunteer-opportunity-teaser-information {
    flex: 4;
    display: flex;
    flex-direction: column;
}

.volunteer-opportunity-teaser h3 {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #000000;
}
.volunteer-opportunity-teaser .h5 {
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: normal;
    color: #000000;
}
.volunteer-opportunity-teaser .h6 {
    font-size: 14px;
    margin-top: 5px;
    color: #666666;
}

.volunteer-opportunity-teaser-image-container {
    flex: 1;
    margin-right: 20px;
    overflow: hidden;
    height: 200px;
    width: 300px;
    /* display: flex; */
    justify-content: flex-start;
    align-items: flex-start;
}

.volunteer-opportunity-teaser-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

.volunteer-database-full-bleed-top {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    background-color: #2774ae;
}
.volunteer-database-full-bleed-bottom {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    background-color: #d0e5ff;
}

.volunteer-database-header {
    display: flex;
    flex-direction: row;

    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 1023px;
}

.volunteer-database-info-container {
    flex: 2;
    padding-right: 20px;
    margin-top: 150px;
    padding-bottom: 100px;
}

.volunteer-database-image-container {
    flex: 2;

    padding: 40px 40px 40px 0px;

    overflow: hidden;
    max-height: 800px;
    width: 400px;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* .volunteer-database-header-search {
    position: relative;
} */

.js #desktop-search.volunteer-database-header-search {
    width: 100%;
    display: block;
    position: relative;
    margin-top: 20px;
    margin-bottom: 30px;
}

.volunteer-database-header h2 {
    font-size: 34px;
    margin-bottom: 10px;
    color: #ffffff;
}

.volunteer-database-header h3 {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
    color: #ffffff;
}

[data-ucla-ref^='volunteer/volunteer-database']
    div
    .volunteer-database-category-buttons {
    color: #ffffff;
    text-decoration: none;
}
[data-ucla-ref^='volunteer/volunteer-database']
    .volunteer-database-form-container
    a {
    color: #000000;
    text-decoration: none;
}

[data-ucla-ref^='volunteer/volunteer-database']
    .volunteer-database-form-container
    a:hover {
    color: #ffffff;
    text-decoration: none;
}

.volunteer-database-category-buttons {
    display: inline-block;
    padding: 10px 20px;
    /* margin-bottom: 40px; */
    /* margin-top: 10px; */
    background-color: #005587;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    max-width: 150px;
    margin-top: 5px;
    margin-bottom: 8px;
    margin-right: 8px;
}

.volunteer-database-category-change {
    display: inline-block;
    padding: 10px 20px;
    border-right: 20px solid transparent;
    color: white;
    background-color: #005587;
    font-weight: bold;
    border-radius: 5px;
    font-size: 16px;
    width: auto;
    margin-top: 15px;
}

.volunteer-database-form-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;

    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    max-width: 1023px;

    margin-bottom: 20px;
}

.volunteer-database-form-container h3 {
    font-size: 20px;
    margin: 15px;
    color: #274263;
}

.volunteer-database-form-button {
    display: inline-block;
    padding: 10px 20px;
    /* margin-bottom: 40px; */
    /* margin-top: 10px; */
    margin: 10px;
    background-color: #ffd100;
    font-weight: bold;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    max-width: 200px;
}
/* #endregion */

/* #region Fix a11y errors with click target sizing in footer and breadcrumbs */
footer a {
    padding: 4px;
}
footer a:last-child {
    padding-right: 4px;
}
#block-ucla-campus-breadcrumbs a {
    padding: 4px;
}
.person-title a {
    padding: 4px;
}
/* #endregion */

/* #region Fix keyboard focus indicator on collapsible headings */
.ucla-button-toggle:focus {
    outline: 2px solid #2774ae;
    outline-offset: 2px;
    border-radius: 3px;
}

.hsummary-active .ucla-button-toggle,
.hsummary-active .ucla-button-toggle:focus {
    outline-color: #ffffff;
}
/* #endregion */

/* #region Fix background color detection by SiteImprove on main nav */
.navbar li a {
    background-color: #fff;
}
/* #endregion */