/* #region Base CSS */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
   */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
    position: relative;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* end CSS reset */
* {
    box-sizing: border-box;
}

body,
html {
    min-height: 100vh;
    display: grid;
    grid-template-rows: min-content 1fr min-content;
    margin: 0;
    padding: 0;
    /* background: #d1e8f8 url('../img/background.jpg') repeat; */
}

:root {
    --darkest-blue: #003b5c;
    --darker-blue: #005587;
    /* #003d6e */
    --ucla-blue: #2774ae;
    /* #1d6092 */
    --lighter-blue: #8bb8e8;
    --lightest-blue: #daebfe;
    --darkest-gold: #ffb81c;
    --darker-gold: #ffc72c;
    --ucla-gold: #ffd100;
    --yellow: #ffff00;
    --green: #00ff87;
    --magenta: #ff00a5;
    --cyan: #00ffff;
    --purple: #8237ff;
    --black: #000000;
    --border-color: #ddd;
    --default-line-height: 1.5;
    --default-font-size: 16px;
    --alert-error: #d60000;
    --alert-success: #007339;
    --alert-warning: #f57f17;
    --alert-info: #8bb8e8;
    --alert-debug: #999999;
    --brand-blue: #00598c;
    --brand-light-blue: #0079bf;
}

/* Text Styles */
body {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-size: var(--default-font-size);
    line-height: 20px;
    line-height: var(--default-line-height);
    color: #333;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: block;
    color: #333;
    font-weight: bold;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    font-weight: inherit;
}

h1 {
    font-size: 38px;
    line-height: 54px;
    letter-spacing: normal;
    margin-top: 8px;
    margin-bottom: 10px;
}

h2 {
    font-size: 32px;
    line-height: 36px;
    letter-spacing: normal;
    margin-top: 8px;
    margin-bottom: 10px;
}

h3 {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: normal;
    margin-top: 24px;
    /* this is bruin life had 8px */
    margin-bottom: 10px;
}

h4 {
    font-size: 22px;
    line-height: 36px;
    letter-spacing: normal;
}

h5 {
    font-size: 16px;
    line-height: 18px;
    letter-spacing: normal;
}

h6 {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: normal;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: bold;
}

h1,
.h1 {
    font-size: 3rem;
    line-height: 3.375rem;
}

h2,
.h2 {
    font-size: 2.25rem;
    line-height: 2.53125rem;
}

h3,
.h3 {
    font-size: 1.5rem;
    line-height: 1.6875rem;
}

h4,
.h4 {
    font-size: 1.125rem;
    line-height: 1.265625rem;
}

h5,
.h5 {
    font-size: 1rem;
    line-height: 1.25rem;
}

h6,
.h6 {
    font-size: 0.8rem;
    line-height: 1rem;
}

h5,
h6 {
    margin-bottom: 0;
}

h5 + *,
h6 + * {
    margin-top: 0;
}

h1 + h2 {
    margin-top: 2rem;
}

/*
h1, h2, h3, h4, h5, h6, p, li {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}
*/
p {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.body--page > .container > div,
.body--page > .container > img,
.body--page > .container > section {
    margin-bottom: 1rem;
}

/* WCAG 2.5.8 AA (target-size): inline anchors inside table cells, list
   items, and table-of-contents links render at ~16-17px tall, below the
   24px minimum. inline-block + line-height: 1.5rem gives each link a 24px
   bounding box at default font size, scaling with user preferences.
   vertical-align: top on cells prevents inline-block from shifting
   baseline alignment of adjacent non-link cells. */
.body--page td,
.body--page th {
    vertical-align: top;
}
.body--page td a,
.body--page th a,
.body--page li a,
.table-of-contents-container li a {
    display: inline-block;
    line-height: 1.5rem;
}

/* text styles */
/* Side Section Nav */
.page-has-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1.5rem 0.4fr;
    padding-left: 0rem;
    padding-right: 0rem;
}

.page-header {
    /* outline: 2px solid purple; */
    grid-column: 1 / end;
}

.page-menu {
    grid-column: 3/4;
    /* outline: 2px solid red; */
}

.page-content {
    grid-column: 1/2;
    /* outline: 2px solid yellow; */
}

/* side section nav */
/* Paragraph Sections */
.paragraph--section {
    padding: 1rem 0;
}

.cards.paragraph--section {
    /* padding-bottom: 2rem; */
}

/* paragraph sections */
/* Lead */
.lead {
    color: #333;
    font-size: 1.2rem;
    line-height: 1.875rem;
}

/* lead */
/* Legal */
.legal {
    font-size: 0.75rem;
    line-height: 1.125rem;
}

/* legal */
/* Links and Defaults */
a,
a.h1,
a.h2,
a.h3,
a.h4,
a.h5 {
    color: var(--darker-blue);
}

a:hover {
    background-color: var(--darker-blue);
    color: #fff;
    text-decoration: none;
}

body > footer a:focus {
    background-color: transparent;
    outline: 2px dotted var(--yellow);
}

ul {
    padding-left: 1rem;
}

ol {
    padding-left: 1rem;
}

/* Links and Defaults */
/* Container from Newsroom — responsive max-widths match layout.css */
.container,
.views-element-container,
.table-of-contents-container {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 600px) {
    .container,
    .views-element-container,
    .table-of-contents-container {
        max-width: 768px;
    }
}
@media (min-width: 768px) {
    .container,
    .views-element-container,
    .table-of-contents-container {
        max-width: 990px;
    }
}
@media (min-width: 1024px) {
    .container,
    .views-element-container,
    .table-of-contents-container {
        max-width: 1023px;
    }
}

.table-of-contents-container {
    padding-right: 0rem;
    padding-left: 0rem;
}

.section-menu {
    padding-right: 1.5rem;
}

@media (min-width: 1440px) {
    .container,
    .views-element-container,
    .page:not(.page-has-menu) .table-of-contents-container {
        max-width: 1170px;
    }
}

@media (max-width: 766px) {
    .section-menu {
        padding-left: 1.5rem;
    }
}

/* container from newsroom */
/* Nav List */
/*
nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1fr);
}
*/
/* nav list */
/* Footer */
footer {
    margin-top: 2rem;
    padding: 1rem 0;
}

footer.bg-blue {
    background-color: var(--ucla-blue);
}

footer .container {
    display: flex;
    flex-direction: row;
}

footer a {
    /*padding-top: 1rem;*/
    font-size: 1rem;
    line-height: 1rem;
    /*padding-left: 1rem;*/
    text-decoration: none;
}

.footer-content a:hover,
.social-links-container a:hover {
    background: #ffe500;
    color: #000;
}

/*footer .ucla-reslife-logo {
  flex: 1;
  font-size: 1.6rem;
  line-height: 1.6rem;
  text-indent: -1000em;
  display: inline-block;
  background-image: url('/media/55');
  background-repeat: no-repeat;
  background-size: auto 1.6rem;
  min-width: 6rem;
  background-position: cover;
  color: rgba(0, 0, 0, 0);
  background-position: center left;
  padding-top: 32px;
  padding-bottom: 32px;

}*/

footer .footer-logo {
    margin-top: 32px;
    margin-bottom: 32px;
}

footer .ucla-logo {
    flex: 1;
    font-size: 1.6rem;
    line-height: 1.6rem;
    text-indent: -1000em;
    display: inline-block;
    background-image: url('data:image/svg+xml;base64,PHN2ZyBpZD0idWNsYSIgZGF0YS1uYW1lPSJ1Y2xhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2OS4xMSAyMi43NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNGRkZGRkY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5VQ0xBPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0uMDYsMTYuMDlBMTkuNTUsMTkuNTUsMCwwLDEsMCwxMy43MkwxLjEzLDFINS4zMUw0LjE3LDEzLjg0Yy0uMjUsMi43OC44NSw0Ljc3LDMuNjIsNC43N3M0LjM0LTIsNC41OS00LjQ5TDEzLjU2LDFoNC4xN0wxNi41OCwxNGMtLjQ2LDUtMy43OCw4Ljc0LTkuMTQsOC43NEE3LjExLDcuMTEsMCwwLDEsLjA2LDE2LjA5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTguNTUsMTEuNzdDMTkuMDksNS42NSwyMy4yMi41NywzMC4zNS41N2E5Ljc4LDkuNzgsMCwwLDEsNS40OCwxLjU5bC0uNDgsNS4wNkE2LjE3LDYuMTcsMCwwLDAsMzAsNC43Yy00LjQ0LDAtNi44NywzLjA4LTcuMjIsN3MxLjYyLDYuODksNS45Miw2Ljg5YTgsOCwwLDAsMCw2LTIuNjNsLS40Niw1LjE5YTEyLDEyLDAsMCwxLTUuODIsMS42Yy03LjA2LDAtMTAuMjktNS4yNC05Ljc4LTExIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzguNTcsMWg0LjE2TDQxLjIyLDE4LjI5aDZjLjQyLDAsMS44NCwwLDIuMjMsMCwwLC4yMS0uMzgsNC0uMzgsNEgzNi42OFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02MC4yNiw4LjkyQTUuMyw1LjMsMCwwLDAsNjAuNTcsOGguMDdhNSw1LDAsMCwwLC4xNi45Yy4yMywxLDEuODUsNi4zNSwxLjg1LDYuMzVINTcuMzlzMi44Mi02LjIyLDIuODctNi4zNk02MS4zMywwSDYxTDQ5LjY0LDIyLjI1aDQuNDJsMS42LTMuMzdoOGwxLDMuMzhoNC40MUw2MS4zMywwIi8+PC9zdmc+');
    background-repeat: no-repeat;
    background-size: auto 1.6rem;
    min-width: 6rem;
    background-position: cover;
    color: rgba(0, 0, 0, 0);
    background-position: center left;
}

footer ul {
    padding: 0rem;
    margin-right: 64px;
}

@media (max-width: 767px) {
    footer ul {
        padding-top: 2rem;
    }
}

footer ul li:first-child {
    color: #fff;
    font-weight: bold;
}

footer li {
    margin-bottom: 0.75rem;
    font-weight: normal;
    line-height: 1.5rem;
}

footer .footer-contact {
    line-height: 1.5rem;
}

footer .footer-contact a {
    display: inline-block;
}

/* Footer <address> links render white on a dark-blue footer, the same color as the surrounding address text — underline is required for SIA-R62 distinguishability. Scoped to <address> rather than .footer-contact because some site themes (e.g. bewellbruin) reuse the .footer-contact class on non-address elements where an auto-underline would be visually inconsistent with sibling .footer-about / .footer-links items. */
footer address a {
    text-decoration: underline;
}

footer .footer-links {
    margin-bottom: 32px;
}

/* footer */
/* Links */
a {
    color: #00598c;
}

a:visited {
    color: #5223b0;
}

.card:visited {
    color: var(--black);
}

footer a,
footer a:visited {
    color: #fff;
}

/* links */
/* Page-Footer */
.page-footer-2-column,
.page-footer-3-column {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.page-footer-3-column {
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 600px) {
    .page-footer-2-column,
    .page-footer-3-column {
        grid-template-columns: 1fr;
    }
}

.page-footer-box {
    outline: 1px solid #cccccc;
    padding: 0 1rem 1rem 1rem;
}

.page-footer-container img {
    max-height: 100px;
}

.page-footer-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* page-footer */
/* Main */
.main .nav-right {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 2rem;
}

.nav-directory {
    text-transform: uppercase;
    font-size: 0.8rem;
    color: var(--darker-blue);
}

.nav-directory a {
    font-size: 1rem;
    text-transform: none;
    display: block;
    background-color: var(--darker-blue);
    color: #fff;
    margin-bottom: 1px;
    padding: 0.2rem 0.5rem;
    text-decoration: none;
}
@media (max-width: 767px) {
    [data-custom-embed-id] {
        max-width: calc(100% + 1.5rem);
        width: calc(100% + 1.5rem);
        padding-right: 1.5rem;
        overflow-x: auto;
    }
}

/* todo: Test word wrapping on tables and determine if needed */
table {
    width: 100%;
    max-width: 100%;
    overflow-wrap: normal;
    /* These are technically the same, but use both */
    word-wrap: normal;
    -ms-word-break: normal;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: normal;
    /* Instead use this non-standard one: */
    word-break: normal;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

table,
td,
th {
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

table {
    margin: 1rem 0;
}

table td,
table th {
    padding: 0.4rem 0.4rem;
}

th:focus {
    background-color: var(--darker-blue);
    color: #ffe800;
}

/*
tr td,
tr th {
  text-align: right;
}
tr td:first-child,
tr th:first-child {
  text-align: left;
}
*/
table tr[id],
table .thead,
table thead {
    background-color: var(--darker-blue);
    color: #fff;
}

tbody th {
    background-color: inherit;
    color: #333;
    text-align: left;
}

tbody th[scope='colgroup'],
tbody th[scope='rowgroup'] {
    background-color: var(--ucla-blue);
    color: #fff;
}

[data-ucla-ref^='registrar/'] .main .media-list .media-list-item:first-child {
    display: none;
}

[data-ucla-ref^='registrar/'] .main .media-list a {
    font-size: 1.8rem;
    text-decoration: none;
    font-weight: normal;
    color: var(--brand-blue);
}

[data-ucla-ref^='registrar/'] .main .media-list h2 {
    margin-bottom: 0;
}

[data-ucla-ref^='registrar/'] .main .media-list h2 + p {
    margin-top: 0;
}

.hero-image {
    margin: 0 -1.5rem 0 -1.5rem;
    width: calc(100% + 3rem);
    box-sizing: border-box;
}

.hero-image + h1 {
    background-color: #2773ae;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    padding: 0.75rem;
    margin-left: -0.75rem;
}

/* main */
/* Alignment */
.text-align-center {
    text-align: center;
}

.text-align-left {
    text-align: left;
}

.text-align-right {
    text-align: right;
}

/* alignment */
/* Accordion */
.accordion {
    background-color: #ccc;
}

.accordion::after {
    content: '^';
}

/* accordion */
/* Site */
.site-name {
    font-size: 2rem;
    line-height: 3rem;
}

/* site */
/* Data Replace */
[data-ucla-sa='replace'] {
    display: none;
}

.template-same-origin [data-ucla-sa='replace'] {
    display: block;
    border: 1px solid black;
    font-family: monospace;
    padding: 2rem;
    text-align: center;
}

/* data replace */
/**
 * From Core
 */
/**
 * Hide elements from all users.
 *
 * Used for elements which should not be immediately displayed to any user. An
 * example would be collapsible details that will be expanded with a click
 * from a user. The effect of this class can be toggled with the jQuery show()
 * and hide() functions.
 */
.hidden {
    display: none;
}

/**
 * Hide elements visually, but keep them available for screen readers.
 *
 * Used for information required for screen reader users to understand and use
 * the site where visual display is undesirable. Information provided in this
 * manner should be kept concise, to avoid unnecessary burden on the user.
 * "!important" is used to prevent unintentional overrides.
 */
.visually-hidden {
    position: absolute !important;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    word-wrap: normal;
}

/**
 * The .focusable class extends the .visually-hidden class to allow
 * the element to be focusable when navigated to via the keyboard.
 */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
    position: static !important;
    overflow: visible;
    clip: auto;
    width: auto;
    height: auto;
}

/**
 * Hide visually and from screen readers, but maintain layout.
 */
.invisible {
    visibility: hidden;
}

/* end of Core */
/* Header */
#block-headerimageblock {
    margin: 0 -24px -4px -24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#block-headerimageblock img {
    width: 100%;
}

#block-headerimageblock a {
    display: block;
    width: 100%;
    font-size: 0;
    line-height: 0;
    border-bottom: 4px solid transparent;
}

#block-headerimageblock a:hover,
#block-headerimageblock a:focus {
    border-color: var(--magenta);
}

#block-headercarouselblock {
    margin: 0 -24px 0 -24px;
}

.header-carousel figcaption {
    display: block;
    z-index: 100;
    width: 280px;
    height: 100px;
    float: right;
    background-color: yellow;
    font-weight: bold;
}

.header-carousel .small {
    font-weight: normal;
    display: block;
    font-size: 80%;
}

/* header */
/* Border / Space */
.border-bottom-ucla-gold {
    border-bottom: 2px solid var(--ucla-gold);
}

.space-above {
    margin-top: 2rem;
}

/* border / space */
/* Media */
.media-block {
    display: flex;
    margin-bottom: 1rem;
}

.media-image {
    margin: 0;
    padding: 0;
    line-height: 1rem;
    height: auto;
}

.media-details {
    padding-left: 0.5rem;
    flex: 1;
}

.media-details *:last-child {
    margin-bottom: 0;
}

/* media */
/* Leadership Letterhead */
.letterhead {
    line-height: 2rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--yellow);
    margin-top: 3rem;
}

.letterhead p {
    padding: 0;
    margin: 0;
}

.border-bottom-ucla-gold {
    border-bottom: 2px solid var(--ucla-gold);
}

/* leadership letterhead */
/* Strong */
strong {
    font-weight: bold;
}

/* Strong */
/* Buttons */
.button a,
.form-submit,
.uclaform button,
.ucla-button,
.ucla-button:visited {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 0.15rem;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
    color: var(--brand-blue);
    line-height: inherit;
    font-family: inherit;
    text-decoration: none;
}

.ucla-button-xl {
    font-size: 3rem;
    line-height: 3rem;
    padding: 0.5rem 1rem;
}

.button a,
.form-submit,
.uclaform button,
.ucla-button-primary,
.ucla-button-primary:visited {
    border-color: var(--brand-blue);
    background-color: var(--brand-blue);
    color: #fff;
}

.ucla-button-secondary,
.ucla-button-secondary:visited {
    border-color: var(--brand-blue);
    background-color: #fff;
    color: var(--brand-blue);
}

.button a:hover,
.ucla-button:hover {
    background-color: var(--brand-light-blue);
    border-color: var(--brand-light-blue);
    color: #fff;
}

.button a:active,
.ucla-button:active {
    background-color: var(--darkest-blue);
    border-color: var(--darkest-blue);
    color: #fff;
}

.button a:disabled,
.ucla-button:disabled {
    background-color: #757575;
    border-color: #757575;
    color: #fff;
}

.ucla-button-primary:focus {
    background-color: #0179bf;
    border-color: #0179bf;
    color: #fff;
}

.ucla-button-secondary:focus {
    background-color: var(--brand-light-blue);
    border-color: var(--brand-light-blue);
    color: #ffffff;
}

.ucla-button + .ucla-button {
    margin-left: 0.5rem;
}

.manage-buttons {
    text-align: right;
    z-index: 100;
    position: absolute;
    width: 100%;
    /* padding: 0.5rem 0 0 0; */
    box-sizing: border-box;
}

.manage-buttons > * {
    box-sizing: border-box;
}

/* buttons */
/* Sidebar */
.sidebar {
    min-height: 90px;
    max-width: 400px;
    text-align: center;
    padding: 1rem;
    border-top: 3px solid var(--ucla-blue);
    background-color: var(--lightest-blue);
}

.article-with-asides {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-gap: 2rem;
}

.asides {
    padding-top: calc(3.375rem + 16px + 16px);
}

.asides > * {
    margin-bottom: 3rem;
}

.sidebar-nav h2 {
    color: var(--ucla-blue);
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}

.sidebar-nav ul {
    margin: 0;
    padding: 0;
}

.sidebar-nav li {
    margin: 0 0 1px 0;
    padding: 0;
}

.sidebar-nav a {
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    display: block;
    background-color: var(--ucla-blue);
    margin: 0;
    padding: 0.4rem 0.7rem;
}

/* sidebar */
/* Data Attributes */
[data-ucla-style='list'] {
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

[data-ucla-style='list'] .node-embed {
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}

[data-ucla-style='cards'] {
    display: grid;
    margin-top: 1rem;
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

[data-ucla-style='cards'] > * {
    border: 1px solid #eee;
    padding: 1rem;
}

/* data attributes */
/* Main Section */
main section {
    border-top: 1px solid var(--border-color);
}

main section > section {
    border-top: 0;
}

.columns {
    border-top-width: 0;
}

@media (min-width: 768px) {
    .columns {
        display: grid;
        grid-gap: 2rem;
        margin-bottom: 2rem;
    }

    .columns-2 {
        grid-template-columns: 1fr 1fr;
    }

    .columns-2-5050 {
        grid-template-columns: 1fr 1fr;
    }

    .columns-2-7030 {
        grid-template-columns: 70fr 30fr;
    }

    .columns-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

img {
    max-width: 100%;
    height: auto;
    margin: 0;
}

.card-image img {
    background-color: #ffffff;
}

.youtube-embed {
    position: relative;
}

.youtube-embed img {
    width: 100%;
    z-index: 1;
}

.youtube-play {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    text-indent: -1000rem;
    overflow: hidden;
    background: url('../img/play-icon.svg') no-repeat;
    background-position: 50% 50%;
    background-size: 7rem;
    background-color: transparent;
}

.callout {
    border: 4px solid var(--alert-info);
    padding: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.callout > *:first-child {
    margin-top: 0;
    padding-top: 0;
}

.callout > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

blockquote {
    border-left: 4px solid var(--ucla-gold);
    padding-left: 1rem;
    font-size: 1.2rem;
    line-height: 1.5rem;
    /*
    No longer using italics here because SiteImprove will (justifiably) complain
    about excessive use of italics if we do
    */
    /* font-style: italic; */
}

blockquote footer {
    padding: 0;
    margin: 0;
    font-size: 1rem;
    background-color: #fff;
    background-image: none;
}

.no-js .htab-nav {
    display: none;
}

.js .htab-group {
    margin: 1rem 0;
}

.ucla-tab {
    display: inline-block;
    font-size: 1rem;
    padding: 0.3rem 1rem;
    display: inline-block;
    border-width: 2px;
    border-style: solid;
    border-color: var(--border-color);
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    color: var(--brand-blue);
    line-height: inherit;
    font-family: inherit;
    text-decoration: none;
    margin-bottom: -2px;
}

.ucla-tab + .ucla-tab {
    margin-left: -2px;
}

.ucla-tab[aria-selected='false'] {
    background-color: #fafafa;
    color: #333;
}

.ucla-tab[aria-selected='true'] {
    border-bottom-color: #fff;
}

.js .htab-nav {
    height: 3rem;
    height: var(--default-line-height) + 0.6rem;
    /* padding of ucla-tab */
}

.js .htab {
    display: none;
}

.js .htab-group .htab {
    display: none;
}

.js .htab-group .htab:nth-child(2) {
    display: block;
}

.js .htab-group .htab[aria-hidden='true'] {
    display: none;
}

.js .htab-group .htab[aria-hidden='false'] {
    display: block;
}

.htab {
    border: 2px solid var(--border-color);
    border-top-right-radius: 0.3rem;
    /*
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
*/
    padding: 0 1rem 1rem 1rem;
}

.js .htab-group-invalid .htab-nav {
    display: none;
}

.js .htab-group-loading .htab-nav {
    opacity: 0;
}

.js .htab-group-invalid .htab {
    display: block;
    padding: 0;
    border: 0;
    border-bottom: 2px solid var(--border-color);
}

iframe {
    margin: 0 auto;
    max-width: 100%;
    /* height: auto; */
    /* width: 300px; */
}

.content-moderation-entity-moderation-form {
    margin: 0 -1.5rem 16px -1.5rem;
}

.entity-moderation-form {
    background: var(--darker-gold);
    background: #dddddd;
    list-style-type: none;
    padding: 1rem 1.5rem;
}

.entity-moderation-form input[type='text'] {
    width: 100%;
}

.form-item {
    padding-bottom: 1rem;
}

.header-slides {
    margin: -16px -24px 16px -24px;
}

.header-slides-carousel {
    margin-bottom: 0;
}

.header-slides-carousel + h1 {
    margin-bottom: 0;
}

#block-ucla-campus-local-tasks + .header-slides,
#block-ucla-sa-local-tasks + .header-slides {
    /* margin-top: -1.5rem; */
}

.slide {
    display: block;
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: 1fr 4rem minmax(2rem, max-content);
    margin: 0;
    padding: 0;
}

a.slide {
    text-decoration: none;
}

a.slide:hover {
    background-color: transparent;
}

a.slide:hover .slide-caption {
    background-color: var(--darker-blue);
    color: #fff;
}

.slide img {
    grid-row: 1/3;
    grid-column: 1/3;
    margin: 0;
    padding: 0;
    width: 100%;
}

.slide-caption {
    grid-row: 2/4;
    grid-column: 2/3;
    background-color: var(--yellow);
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    margin: 0;
    padding: 1rem;
    margin-right: -2rem;
}

.slide-cta {
    font-size: 1rem;
    display: block;
    font-weight: normal;
}

.slide-cta *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

em {
    font-style: italic;
}

.search-results ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.search-result-title {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: normal;
    margin-bottom: 4px;
}

form.site-search {
    margin-bottom: 0.2rem;
}

form.site-search.mobile-only {
    margin-bottom: 0;
}

.header-right form.site-search {
    margin-bottom: 1rem;
    margin-right: 0.5rem;
}

form.site-search .form-item,
form.site-search .form-actions {
    display: inline;
}

form.site-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

form.site-search input[type='text'],
form.site-search input[type='search'] {
    /* mimic button */
    font-size: 1rem;
    padding: 0.5rem 0.5rem 0.5rem 2.75rem;
    display: inline-block;
    border-radius: 0.15rem;
    border-width: 2px;
    width: 100%;
    border-style: solid;
    border-color: #757575;
    color: var(--brand-blue);
    line-height: inherit;
    font-family: inherit;
    text-decoration: none;
}

/* The decorative magnifier icon in search inputs historically sat on
   the input as a `background-image`. axe-core's color-contrast rule
   refuses to compute contrast against any element with a
   `background-image` (messageKey `bgImage`), flagging such inputs as
   needs-review even when the underlying `background-color` is solid
   and contrast passes (7.47:1: #00598c on #fff).

   Which forms axe actually flags depends on visibility at scan time.
   The two header-search forms (`.desktop-only` and `.mobile-only`)
   are `display: none` in one viewport range or the other, so the
   inactive one is skipped by axe. The volunteer-database-embedded
   search is always visible, so its bg-image does get flagged — that
   was the 15 rows in the a11y-crawler report.

   Approach:

   - Restore the original `background-image` on the input for
     header-search forms (`.desktop-only`, `.mobile-only`) only. They
     work exactly as they did before; one of the two is hidden in any
     given viewport, so there's nothing for axe to flag.
   - Rebuild the volunteer-database-embedded search as a grid with
     the icon in a dedicated ::before column, matching the pattern
     used by `.event-card-time` / `.event-card-category` et al. The
     input keeps a plain solid background axe can evaluate.

   Scope matters: the old `form.site-search input[type='search']`
   selector was broad enough that at least one site
   (bewellbruin.ucla.edu `/resources`) explicitly unset the icon on
   an in-page search input with `background-image: unset`. Do not
   re-add an icon to those in-page forms — their content teams
   removed it deliberately. This is why the new rules only target the
   three specific form classes (`.desktop-only`, `.mobile-only`,
   `.volunteer-database-header-search`) rather than the bare
   `form.site-search`. */
form.site-search.desktop-only input[type='search']:placeholder-shown,
form.site-search.mobile-only input[type='search']:placeholder-shown {
    background-image: url('../img/search-icon.svg');
    background-repeat: no-repeat;
    background-position: left 0.5rem center;
    background-size: 1.5rem;
}

/* Volunteer-database-embedded search: always-visible, so we can't
   rely on axe skipping it. Use grid + ::before to keep the input's
   background flat. Icon visually sits inside the input's existing
   2.75rem padding-left via negative margin-right on the ::before,
   matching the original `background-position: left 0.5rem center`. */
/* Include #volunteer-search in the selector so this rule's specificity
   exceeds `.js #volunteer-search.volunteer-database-header-search`
   over in ucla_campus.css which sets `display: block`. */
form#volunteer-search.site-search.volunteer-database-header-search:has(> input[type='search']) {
    display: grid;
    grid-template-columns: min-content 1fr;
    align-items: center;
}
form#volunteer-search.site-search.volunteer-database-header-search:has(> input[type='search'])::before {
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.5rem;
    margin-right: -2.25rem;
    background-image: url('../img/search-icon.svg');
    background-repeat: no-repeat;
    background-size: 1.5rem;
    position: relative;
    z-index: 1;
    pointer-events: none;
}
/* Hide the icon once the input has content. Use `background-image: none`
   rather than `display: none` — the ::before is a grid item, so removing
   it from layout triggers a grid recompute that shrinks the input
   column (observed 457px → 401px when typing). Clearing just the
   background-image keeps the ::before as a zero-width grid participant
   and the input width stable. */
form#volunteer-search.site-search.volunteer-database-header-search:has(> input[type='search']:not(:placeholder-shown))::before {
    background-image: none;
}

form.site-search.mobile-only input[type='search']:focus,
.navbar-wrapper form.site-search input[type='search']:focus {
    background-color: #fff;
    outline: none;
    border-color: var(--magenta);
}

[data-ucla-path='/search'] .header-right form.site-search {
    display: none;
}

[data-ucla-path='/search'] main article strong {
    background-color: var(--yellow);
}

.header-right {
    display: flex;
    align-items: flex-end;
}

/* main section */
/* Menu */
.navbar-position {
    grid-area: nav-main;
}

button[data-controls='menus'] {
    grid-area: hamburger;
}

.site-search button:hover {
    cursor: pointer;
}

@media (max-width: 767px) {
    .desktop-only {
        display: none;
    }

    .navbar-position {
        margin-right: -1.5rem;
        margin-left: -1.5rem;
    }

    .navbar li,
    .navtop li {
        border-top: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

    .navbar-grid {
        display: grid;
        grid-template-areas:
            'logo hamburger'
            'nav-main nav-main';
        align-items: center;
    }

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

    .navtop li a:hover {
        background-color: var(--ucla-blue);
        color: #fff;
    }

    .navtop li a:active {
        background: var(--darkest-blue);
        color: #fff;
    }

    footer .container {
        margin: 0;
        padding: 1rem;
    }

    .nav-topbar .container {
        display: flex;
        flex-direction: row;
        align-content: flex-end;
    }

    .navtop ul li.topbar-yellow-button {
        background-color: var(--darker-blue);
    }

    .nav-footer ul li a {
        padding-left: 0;
        padding-right: 0;
    }

    .nav-footer ul li::after {
        display: none;
    }

    .nav-footer .icon-ada {
        background-size: 1rem auto;
        padding-left: 1.4rem;
    }

    .nav-footer a {
        font-size: 1rem;
    }

    .nav-footer ul {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 0.5;
    }

    .nav-footer ul li {
        border-top-width: 0;
    }

    .nav-footer a {
        white-space: nowrap;
    }

    /* menu */
    /* Header */
    body > header {
        padding-bottom: 0;
    }

    body > header + main {
        margin-top: 0;
    }

    .slide-caption {
        margin-right: 0;
    }

    .header-slides {
        margin: 0;
    }

    .headerbar img {
        margin-top: 0;
        padding-left: 0.5rem;
        padding-top: 0.5rem;
    }

    /* header */
    /* Menus */
    button[data-controls='menus'] {
        border: 0px;
        background-color: transparent;
        width: 48px;
        height: 48px;
        margin-bottom: 0.5rem;
        background-size: 1.5rem;
        background-position: center center;
        background-repeat: no-repeat;
        color: #fff;
        justify-self: end;
        transition-property: opacity, filter;
        transition-duration: 0.15s;
        transition-timing-function: linear;
    }

    .js #menus {
        display: none;
    }

    .js #menus.control-aria-expanded {
        display: block;
        padding-top: 0.5rem;
    }
}

@media (min-width: 768px) {
    .navbar-position {
        display: grid;
        grid-template-columns: auto max-content;
        justify-items: end;
        align-items: end;
    }

    .navtop {
        grid-area: nav-top;
        justify-self: end;
    }

    .mobile-only {
        display: none;
    }

    .navtop ul {
        display: flex;
    }

    .navtop li a {
        margin-left: 2px;
        border-radius: 2px;
        font-size: 0.875rem;
        font-weight: bold;
    }
}

.navtop li {
    list-style-type: none;
}

.navtop li a {
    text-decoration: none;
    color: var(--brand-blue);
    padding: 0.5rem 1rem;
}

.navtop li strong a {
    color: #fff;
    background-color: var(--brand-blue);
}

.navtop li strong a:hover {
    color: #fff;
    background-color: var(--brand-light-blue);
}

.navtop li a:hover,
.navtop li a:focus {
    color: #fff;
    background-color: var(--brand-light-blue);
}

.navtop li a:active,
.navtop li strong a:active {
    color: #fff;
    background-color: var(--darkest-blue);
}

/* menus */
/* YouTube */
a.youtube-embed {
    display: block;
    box-sizing: border-box;
    padding: 0;
    line-height: 0;
}

/* youtube */
/* Article */
.article-header {
    margin-bottom: 1rem;
}

.article-header-figure img {
    width: 100%;
    height: auto;
    line-height: 0;
}

@media (min-width: 768px) {
    @supports (display: grid) {
        .article-header-title h1 {
            font-size: 1.125rem;
            line-height: 1.265625rem;
            text-transform: uppercase;
            margin: 0;
            padding: 0;
        }

        .article-header {
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            grid-template-rows: minmax(2rem, 1fr) min-content minmax(2rem, 1fr);
            grid-gap: 1rem;
            box-sizing: border-box;
        }

        .article-header > * {
            box-sizing: border-box;
        }

        .article-header-figure {
            box-sizing: border-box;
            grid-row: 1/4;
            grid-column: 8/21;
            z-index: 0;
        }

        .article-header-body {
            box-sizing: border-box;
            padding: 1rem 0.5rem 1rem 0;
            background-color: #fff;
            grid-row: 2/3;
            grid-column: 1/9;
            z-index: 1;
        }

        .article-header-body > *:last-child {
            margin-bottom: 0;
        }

        .article-header-with-video .article-header-body {
            padding: 0 0 0 0;
            grid-row: 1/4;
            grid-column: 1/8;
        }
    }
}

/* article */
/* Cards */
.card {
    display: block;
    max-width: 240px;
    margin: 0 0 1rem 0;
    color: #333;
    background-color: #ffffff;
    text-decoration: none;
    font-size: 0;
    margin: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

.card span {
    display: block;
    margin: 0;
}

.card-title,
.card-summary {
    padding: 1rem 1rem 0 1rem;
    font-size: 1rem;
    line-height: 1.1;
}

.card-summary {
    padding-top: 0;
}

.card-summary *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.card-title {
    font-weight: bold;
    font-size: 1.125rem;
    line-height: 1.265625rem;
}

.card-image {
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(1rem + 240px), 1fr));
    grid-gap: 1rem;
}

/* cards */
/* Logos */
.logos-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, 6rem);
    grid-template-rows: repeat(auto-fit, 6rem);
    grid-gap: 2rem;
}

.logo {
    font-size: 0;
    line-height: 0;
}

a.logo {
    transition: transform 0.2s;
}

a.logo:hover {
    background-color: transparent;
    transform: scale(1.04, 1.04);
}

/* logos */
/* People */
.people-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
}

@media (min-width: 600px) {
    .people-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .people-container {
        grid-template-columns: repeat(3, 1fr);
    }

    /* .table-of-contents-container .people-container,
  .page-has-menu .people-container {
    grid-template-columns: repeat(3, 1fr);
  } */
}

.person {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: calc(160px - 32px) 32px min-content 1fr 32px;
}

.person-background-node {
    grid-row: 2/6;
    grid-column: 1/2;
    background-color: #ebebeb;
}

.person-title {
    grid-row: 3/4;
    grid-column: 1/2;
    margin: 0;
    padding: 1rem 1rem 1rem 1rem;
    font-size: 1.125rem;
    /* mirrors h4 */
    line-height: 1.265625rem;
}

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

.person-summary > *:first-child {
    margin-top: 0;
    padding-top: 0;
}

.person-summary > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

.person-image {
    grid-row: 1/3;
    grid-column: 1/2;
    padding-left: 1rem;
}

.person-image img {
    height: 160px;
    width: 160px;
    padding: 0;
    font-size: 0;
}

/* people */
/* Photos */
.photos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(1rem + 240px), 1fr));
    grid-gap: 1rem;
}

@media (min-width: 768px) {
    .photos-container {
        grid-template-columns: repeat(
            auto-fit,
            minmax(calc(1rem + 300px), 1fr)
        );
    }
}

.photo {
    display: block;
}

.photo figcaption {
    text-align: center;
}

/* photos */
/* Cards */
.cards {
    margin-bottom: 1rem;
}

.cards + h2,
.cards + h3 {
    margin-top: 2rem;
}

.cards-theme-services .card {
    padding-bottom: 1rem;
    background-color: #eee;
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 0.4rem;
}

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

.cards-theme-services .card:hover {
    transform: scale(1.02, 1.02);
    background-color: #f8f8f8;
    color: var(--black);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

.cards-theme-resources .card-title {
    border-top: 6px solid var(--darker-blue);
    padding: 1rem 0;
}

.cards-theme-resources .card-summary {
    padding: 0 0 1rem 0;
}

.cards-theme-resources .card-image {
    display: none;
}

.cards-theme-resources .card:hover {
    background-color: transparent;
    color: var(--black);
}

.cards-theme-resources .card:hover .card-title {
    border-color: var(--darker-gold);
}

.cards-theme-buttons .card {
    border: 3px solid var(--brand-blue);
    padding-bottom: 0;
}

.cards-theme-buttons .card:focus {
    border-color: var(--yellow);
}

.cards-theme-buttons .card-title {
    padding-bottom: 1rem;
    border-radius: 0.4rem;
}

.cards-theme-buttons .card {
    border-radius: 0.4rem;
}

.cards-theme-buttons .card-image,
.cards-theme-buttons .card-summary {
    display: none;
}

.cards-theme-list .cards-container {
    grid-template-columns: 1fr;
}

.cards-theme-list .card {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eee;
}

.cards-theme-list .card:hover {
    background-color: transparent;
    outline: 2px solid var(--darker-gold);
    color: var(--black);
}

.cards-theme-list .card:last-child {
    border-bottom: none;
}

.cards-theme-list .card-title,
.cards-theme-list .card-summary {
    margin: 0;
    padding: 0;
}

.cards-theme-list .card-title {
    color: var(--darker-blue);
}

.cards-theme-list .card-summary {
    margin-top: 1rem;
    padding-bottom: 1rem;
}

.cards-theme-list .card-image {
    display: none;
}

.card-with-image-and-button .card-title,
.card-with-button .card-title {
    margin: 0;
}

.card-with-image-and-button .card-text,
.card-with-button {
    background-color: #f2f2f2;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.card-with-image-and-button {
    background-color: #f2f2f2;
    display: grid;
    grid-template-rows: min-content 1fr;
}

@media (max-width: 600px) {
    .cards-with-buttons .cards-container,
    .cards-with-images-and-buttons .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 600px) {
    .cards-with-buttons .cards-container,
    .cards-with-images-and-buttons .cards-container {
        grid-template-columns: 1fr 1fr;
    }

    .cards-with-buttons .cards-container-count-odd > *:first-child,
    .cards-with-images-and-buttons .cards-container-count-odd > *:first-child {
        grid-row: 1/2;
        grid-column: 1/3;
    }

    .cards-with-images-and-buttons .cards-container-count-odd > *:first-child {
        grid-template-columns: 1.618fr 1fr auto;
    }

    .cards-with-images-and-buttons
        .cards-container-count-odd
        > *:first-child
        .card-image {
        margin: 1rem 0 1rem 1rem;
    }
}

@media (max-width: 767px) {
    .cards-with-images-and-buttons .cards-container-count-odd > *:first-child {
        grid-template-columns: 1fr;
    }

    .cards-with-images-and-buttons
        .cards-container-count-odd
        > *:first-child
        .card-image {
        margin: 0;
    }
}

.card-with-image-and-button .card-footer,
.card-with-button .card-footer {
    padding: 1rem 1rem 1rem 1rem;
    font-size: 1rem;
    line-height: 1.1;
    margin: 0;
}

/* cards */
/* List Items */
.list-items {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.list-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 1rem;
}

/* list items */
/* Campus Tasks */
#block-ucla-campus-local-tasks,
#block-ucla-sa-local-tasks {
    margin: 0;
}

#block-ucla-campus-local-tasks {
    background-color: var(--black);
}

/* campus tasks */
/* Tabs */
.tabs {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 0.5rem 0;
}

.tabs li {
    display: inline-block;
    padding: 0;
    margin: 0;
    margin: 0 0.1rem 0 0;
}

.tabs a {
    background-color: var(--ucla-gold);
    color: var(--black);
    text-decoration: none;
    padding: 0 0.4rem;
}

.tabs a:hover {
    background-color: var(--brand-blue);
    color: #ffffff;
}

/* tabs */
/* H1 */
h1 {
    padding-bottom: 1rem;
}

/* h1 */
/* Table of Contents */
@media (min-width: 768px) {
    .js .page:not(.page-has-menu) .table-of-contents-container {
        display: grid;
        grid-template-columns: 1.61803398875fr 1fr;
        grid-template-columns: 70fr 30fr;
        grid-gap: 2rem;
    }

    .js .page:not(.page-has-menu) .table-of-contents {
        border-top: 3px solid var(--ucla-gold);
        padding-top: 1rem;
        padding-top: calc(calc(20px - 3px));
        /* line height minus border height minus margin top */
        grid-row: 1/2;
        grid-column: 2/3;
    }

    .js .page:not(.page-has-menu) .table-of-contents-content > *:first-child {
        margin-top: 0;
        padding-top: 0;
    }

    .js .page:not(.page-has-menu) .table-of-contents-links {
        /* position: sticky; to enable this we need to dyanmically detect if there is enough screen space to render the full nav */
        top: 0;
    }
}

/* table of contents */
/* Broadcast */
.broadcast-message {
    border: solid 0.25rem var(--alert-warning);
    color: #333;
    padding: 1rem;
    line-height: 1.5;
    font-size: 1rem;
    margin: 0 auto;
    text-align: center;
    /*background-image: url(../img/important-alert.svg);
  background-repeat: no-repeat;
  background-size: 3rem;
  background-position-y: center;*/
}

.broadcast-message p {
    margin: 0 auto;
    padding: 0;
}

.broadcast-message a {
    color: var(--darker-blue);
    text-decoration: underline;
}

.broadcast-message a:hover {
    background-color: var(--darker-blue);
    outline-color: var(--darker-blue);
    color: #ffffff;
    text-decoration: none;
}

.broadcast-message a:focus {
    outline-color: var(--darker-blue);
    text-decoration: none;
}

/* broadcast */
/* Start Form Embeds */
[data-ucla='form'] {
    padding: unset;
    text-align: unset;
    background-color: unset;
    font-weight: unset;
    font-size: unset;
}

.uclaform.uclaform-error {
    color: maroon;
}

.uclaform-question__input > input,
.uclaform textarea,
.uclaform select {
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
    padding: 8px 10px;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
    box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.8),
        inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}

.uclaform-question__input > input,
.uclaform select {
    max-width: 100%;
    width: 240px;
    background: white;
}

.uclaform textarea {
    max-width: 480px !important;
    width: 100% !important;
    height: 160px;
    resize: auto;
}

.uclaform input:disabled,
.uclaform textarea:disabled,
.uclaform button:disabled {
    cursor: not-allowed;
}

.uclaform label:focus,
.uclaform legend:focus {
    outline: none;
    border: none;
}

.uclaform input:focus {
    border: 1px solid #c9c9c9;
}

.uclaform input:invalid,
.uclaform textarea:invalid,
.uclaform select:invalid {
    background: white;
    padding-left: 10px;
}

.uclaform-submit-attempted input:invalid,
.uclaform-submit-attempted textarea:invalid,
.uclaform-submit-attempted select:invalid {
    background: #ffecec;
    border-left: 4px solid #d70000;
    padding-left: 7px;
    /* 3px less than it normally is since border-left increases by 3 */
}

/*
.uclaform button {
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  width: 100px;
  border: 1px solid #c2c2c2;
  border-radius: 3px;
  padding: 0.75em;
  font-size: 12px;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.4), inset 0px 1px 0px 0px rgba(255, 255, 255, 1);
  text-shadow: 0px 1px 0px #ffffff;
  color: #333;
  background: linear-gradient(#f5f5f5, #dfdfdf);
}
.uclaform button:hover {
  background: linear-gradient(#fefefe, #e8e8e8);
}
.uclaform button:active {
  background: linear-gradient(#c6c6c6, #f3f3f3);
}
.uclaform button:disabled {
  background: #eaeaea;
  border: 1px solid #eaeaea;
  box-shadow: unset;
  font-weight: unset;
}
.uclaform .uclaform-submit button {
  border: 1px solid #0d569e;
  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.6), inset 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
  text-shadow: 0px -1px 0px #185b93;
  color: #efefef;
  background: linear-gradient(#358eea, #2170cd);
}
.uclaform .uclaform-submit button:hover {
  background: linear-gradient(#6cb6f3, #4387d2);
}
.uclaform .uclaform-submit button:active {
  background: linear-gradient(#1f66be, #3085e0);
}
*/
.uclaform .uclaform-question__label {
    color: #585858;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    display: block;
    width: 100%;
    /* needed to fix IE/Edge by default not line wrapping for legend tags */
}

.uclaform .uclaform-question__helptext {
    padding: 0;
    outline: none;
}

.uclaform .uclaform-question__input {
    padding: 0;
    overflow-y: hidden;
    /* clearfix for date/time fallbacks */
}

.uclaform .uclaform-input__option {
    padding: 0 0 0 1px;
}

.uclaform .uclaform-input__option label {
    margin-left: 7px;
    vertical-align: middle;
}

.uclaform .uclaform-input__month,
.uclaform .uclaform-input__day,
.uclaform .uclaform-input__year,
.uclaform-input__hour,
.uclaform-input__minute,
.uclaform-input__ampm {
    float: left;
}

.uclaform .uclaform-input__month select,
.uclaform .uclaform-input__day select,
.uclaform .uclaform-input__year select,
.uclaform-input__hour select,
.uclaform-input__minute select,
.uclaform-input__ampm select {
    margin-top: 2px;
    width: auto;
}

.uclaform .uclaform-input__day,
.uclaform-input__minute {
    margin: 0 1em;
}

.uclaform .uclaform-filelist__file {
    margin-top: 1em;
    padding: 7px;
    overflow: auto;
    /* clearfix */
}

.uclaform .uclaform-filelist__file--error {
    color: #902d2d;
    border-left: 4px solid #d70000;
    background: #ffecec;
}

.uclaform .uclaform-file__status::before {
    content: '...';
}

.uclaform .uclaform-file__status,
.uclaform .uclaform-file__action {
    float: left;
}

.uclaform .uclaform-file__status {
    width: 125px;
}

.uclaform .uclaform-file__action button {
    border: none;
    background: unset;
    box-shadow: unset;
    padding: 0;
    width: unset;
    font-size: inherit;
    display: block;
    margin-left: 1em;
    float: left;
}

/* font-sizes & margins */
.uclaform,
.uclaform .uclaform-question,
.uclaform form h1,
.uclaform form h2,
.uclaform form h3,
.uclaform form h4,
.uclaform form h5,
.uclaform form h6 {
    margin: 28px 0;
}

.uclaform .uclaform-question__label {
    font-size: 14px;
    margin: 14px 0 0;
}

.uclaform .uclaform-question__helptext {
    font-size: 14px;
    margin: 8px 0 0;
}

.uclaform .uclaform-question__input {
    font-size: 14px;
    margin: 14px 0 0;
}

.uclaform-question--checkboxes .uclaform-question__input,
.uclaform-question--single-checkbox .uclaform-question__input,
.uclaform-question--radios .uclaform-question__input {
    margin: 10px 0 0;
}

.uclaform-question--checkboxes input,
.uclaform-question--single-checkbox input,
.uclaform-question--radios input {
    width: auto;
    height: auto;
}

.uclaform .uclaform-input__option {
    font-size: 14px;
    margin: 8px 0 0;
}

.uclaform .uclaform-status {
    padding: 1em 0;
    font-size: 14px;
    font-style: italic;
}

.uclaform .uclaform-collapsed {
    display: none;
}

.uclaform .uclaform-collapse {
    width: 100%;
}

.uclaform .uclaform-status__error {
    color: #902d2d;
    border-left: 4px solid #d70000;
    background: #ffecec;
    padding: 0.5em;
    animation: uclaformerror 1s forwards ease-in-out;
    opacity: 0;
}

@keyframes uclaformerror {
    from {
        opacity: 0;
        transform: translateY(3em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* End Form Embeds */
/* Breadcrumbs */
#block-mainnavigation ul ul ul {
    margin-left: 1rem;
}

#block-ucla-campus-breadcrumbs,
#block-pagetitle-2 {
    padding-top: 1.5rem;
}

#block-ucla-campus-breadcrumbs + #block-ucla-sa-page-title {
    padding-top: 0;
}

#block-ucla-campus-breadcrumbs h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#block-ucla-campus-breadcrumbs ol {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

#block-ucla-campus-breadcrumbs li {
    display: inline;
}

#block-ucla-campus-breadcrumbs li + li::before {
    display: inline-block;
    margin: 0 0.25em;
    transform: rotate(15deg);
    border-right: 0.1em solid currentColor;
    height: 0.8em;
    content: '';
}

#block-ucla-campus-breadcrumbs a {
    color: var(--darker-blue);
}

#block-ucla-campus-breadcrumbs [aria-current='page'] {
    color: var(--black);
    text-decoration: none;
}

#block-ucla-campus-breadcrumbs a:hover,
#block-ucla-campus-breadcrumbs [aria-current='page']:hover {
    color: #ffffff;
}

/* breadcrumbs */
/* Social Links */
.social-links-container {
    /* width: 100%; 
  font-size: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  margin-bottom: 1rem; 
  margin-left: -6px;*/

    margin-top: 32px;
    margin-bottom: 32px;
}

.social-links-container a {
    display: inline-block;
    width: 48px;
    height: 48px;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    border-radius: 4px;
}

.social-links-container a:hover {
    transform: scale(1.05, 1.05);
}

.social-links-container .social-link-label {
    position: absolute;
    top: -1000rem;
    left: -1000rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* social links */
/* Event Cards */
.event-card-summary {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.25em;
    margin-bottom: 0.4rem;
}

.event-card-summary a {
    color: #00598c;
}

.event-card-summary a:hover {
    color: white;
}

@media (max-width: 1023px) {
    .event-card-summary {
        -webkit-line-clamp: 3;
        min-height: 3.375em;
    }
}

@media (max-width: 768px) {
    .event-card-summary {
        -webkit-line-clamp: 2;
        min-height: 2.25em;
    }
}

@media (max-width: 600px) {
    .event-card-summary {
        -webkit-line-clamp: 3;
        min-height: 0;
    }
}

.event-card {
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    border-width: 0 1px 1px 1px;
}

.event-card .event-card-body,
.event-card .event-card-footer {
    transition: transform 0.2s ease-in-out;
    background-color: rgba(255, 255, 255, 0.95);
}

.event-card .event-card-body,
.event-card .event-card-footer {
    transition: transform 0.2s ease-in-out;
    background-color: rgba(255, 255, 255, 0.95);
}

.event-card-body {
    flex: 1;
    padding: 1rem;
    color: #333;
}

.event-card-summary {
    margin-top: 0;
    font-weight: bold;
    color: var(--black);
    margin-bottom: 1rem;
}

.event-card-time:not(:empty),
.event-card-category:not(:empty),
.event-card-location:not(:empty),
.event-card-virtuallocation:not(:empty) {
    display: grid;
    background: #FFF;
    padding: 0;
    grid-template-columns: 0.8rem 1fr;
    gap: 0;
    margin: 0 0 0.2rem 0;
    /* axe-core's color-contrast geometric check flags these meta rows
       with `bgOverlap` on iac and recreation event cards because the
       ::before icon column sits adjacent to the content column and
       axe can't resolve which is on top. Own stacking context clears
       it. Zero visual effect. */
    isolation: isolate;
}
.event-card-category > :last-child, .event-card-location > :last-child, .event-card-virtuallocation > :last-child, .event-card-time > :last-child {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: #FFF;
    padding-left: 0.4rem;
}
.event-card-time::before,
.event-card-category::before,
.event-card-location::before,
.event-card-virtuallocation::before {
    content: '';
    width: 1.2rem;
    display: block;
    background-repeat: no-repeat;
    background-size: 0.8rem;
    background-position-y: center;
}
.event-card-time::before {
   background-image: url(../img/calendar/icon-clock.svg);
}
.event-card-category::before {
    background-image: url(../img/calendar/icon-cal.svg);
}
.event-card-location::before {
    background-image: url(../img/calendar/icon-location.svg);

}
.event-card-virtuallocation::before {
    background-image: url(../img/calendar/icon-play.svg);
}
/* WCAG 2.5.8 AA (target-size): event card info-row links (virtuallocation,
   location, etc.) are inline with a 17px bounding rect, below the 24px
   minimum. inline-block + line-height: 1.5rem gives a 24px clickable
   target that scales with user font preferences. */
.event-card-time a,
.event-card-category a,
.event-card-location a,
.event-card-virtuallocation a {
    display: inline-block;
    line-height: 1.5rem;
}
.event-card a {
    color: #00598c;
    background: #FFF;
    text-decoration: underline;
}
.event-card a:hover {
    text-decoration: none;
    background: #005587;
    color: #FFF;
}
.event-card .event-card-summary a {
    text-decoration: none;
}

.event-card .event-card-website,
.event-card-website {
    text-decoration: none;
    display: inline-block;
    margin-top: 0.15rem;
    padding: 0.15rem 0.5rem;
    border-radius: 0.15rem;
    background: #00598c;
    color: white;
}
a.event-card-website:visited {
    color: white;
}

.event-card {
    --category-color: var(--green);
    /* clear */
}

@media (min-width: 601px) {
    .event-card-time + .event-card-flex {
        margin-top: 1.7rem;
    }
}

.event-card-cancelled {
    background-color: #aaa;
    border-style: dotted;
}

.event-card-cancelled a {
    color: #666;
    border-style: dotted;
}

.event-cards-home .event-card-cancelled .event-card-body {
    border-color: #666;
}

.event-card-cancelled:not(.event-card-cancelled-hide) .event-card-time::before {
    content: 'Canceled';
    background-color: var(--purple);
    color: #ffffff;
    white-space: nowrap;
    margin-right: 0.5rem;
    padding: 0 0.3rem;
    border-radius: 0.2rem;
}

.event-time-cancelled::before {
    content: 'Canceled';
    background-color: var(--purple);
    color: #ffffff;
    white-space: nowrap;
    margin-right: 0.5rem;
    padding: 0 0.3rem;
    border-radius: 0.2rem;
}

.event-card-category {
    color: #333;
    /*
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  */
    display: block;
}

.event-card-category {
    display: flex;
}

.event-card-category > * {
    max-width: 50%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.event-card-category > *:not(:first-child):not(:last-child) {
    max-width: 30%;
}

.event-card-category > *:first-child:last-child {
    max-width: 100%;
}

.event-cards-home {
    display: grid;
    grid-gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

/* when inside a column display as one column */
.column .event-cards-home {
    grid-template-columns: 1fr;
}

.event-cards-home .event-card-fixed {
    height: auto;
    text-decoration: none;
}

.event-cards-home .event-card-body {
    border-top: solid var(--darker-blue) 0.375rem;
    /* border-top: solid var(--category-color) 0.375rem; */
    transform: none;
    height: auto;
}

.event-cards-home .event-card:hover .event-card-body {
    transform: none;
}

.event-cards-home .event-card-flex {
    flex: 1;
}

.event-cards-home .event-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.event-cards-home .event-card-flex {
    flex: 1;
}

@media (max-width: 768px) {
    .event-cards,
    .event-cards-home {
        grid-template-columns: repeat(2, 1fr);
    }

    /* when inside a column display as one column */
    .column .event-cards-home {
        grid-template-columns: 1fr;
    }

    .event-cards-home .event-card-fixed {
        max-width: 100% !important;
    }

    .event-cards-home .event-card-fixed .event-card-body {
        height: 200px;
        transform: none;
    }
}

@media (max-width: 600px) {
    .events-cards,
    .event-cards-home {
        grid-template-columns: 1fr;
    }
}

/* end event cards */
/* Group of Buttons */
.ucla-buttongroup {
    margin: 0 -0.5rem 1rem 0;
    padding: 0;
    /* display: flex; */
    /* flex-wrap: wrap; */
}

.ucla-buttongroup .ucla-button {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
}

.ucla-buttongroup .ucla-button:last-child {
    margin-right: 0;
}

.ucla-buttongroup + .ucla-buttongroup {
    margin-top: -0.5rem;
}

/* group of buttons */
/* Code */
code,
pre {
    font-family: Hack, Consolas, Monaco, 'Andale Mono', monospace;
    background: #f2f2f2;
    font-size: 0.875rem;
    line-height: 1.71429;
    white-space: pre-wrap;
}

pre {
    padding: 1rem;
    margin-bottom: 1rem;
}

/* code */
/* Sub-pages are rendered as a native <ul class="sub-pages-list"> of <li
   class="sub-page"> items; the title is a link, not a heading, so
   .sub-page-title carries the h2-equivalent type. The selectors below
   intentionally chain the wrapper class + element type so they beat the
   generic `.paragraph--section ul { list-style: disc; padding-left: 1.5rem }`
   rule in ucla_campus.css that would otherwise re-apply bullets + indent
   because the sub-pages wrapper carries the .paragraph--section class. */
.paragraph--section ul.sub-pages-list,
ul.sub-pages-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-page .sub-page-title {
    display: block;
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 1.6875rem;
    /* WCAG 2.5.8 (target-size, AA): guarantee the tap-target bounding box
       axe measures is at least 24×24px even when font metrics, partial
       overlap with siblings, or viewport-dependent rounding shave the
       measured line-box below 24px. Padding on the <a> itself (rather than
       only on the parent <li>) is what axe sees via getBoundingClientRect(). */
    min-height: 24px;
    padding: 4px 0;
    margin: 0;
}

.sub-page {
    border-top: 1px solid #eee;
    padding: 0.5rem 0;
}

/* Override `.paragraph--section li + li { margin-top: 0.75rem }` so card
   spacing is uniform (first card flush to the top, rest separated only by
   the border + 0.5rem padding above). */
.sub-page + .sub-page {
    margin: 0;
}

/* non-bold same sizing has h3 */
/* Card Container */
[data-repeat-cards-max-count] .paragraph--type--cards .cards-container {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) and (max-width: 767px) {
    .paragraph--type--cards .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    [data-repeat-cards-max-count='1'] .paragraph--type--cards .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    [data-repeat-cards-max-count] .paragraph--type--cards .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count]
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count]
        .paragraph--type--cards
        .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count='2']
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count='2']
        .paragraph--type--cards
        .cards-container,
    [data-repeat-cards-max-count='2'] .paragraph--type--cards .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    [data-repeat-cards-max-count='1'] .paragraph--type--cards .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    [data-repeat-cards-max-count] .paragraph--type--cards .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count]
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count]
        .paragraph--type--cards
        .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count='2']
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count='2']
        .paragraph--type--cards
        .cards-container,
    [data-repeat-cards-max-count='2'] .paragraph--type--cards .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    [data-repeat-cards-max-count='1'] .paragraph--type--cards .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1440px) {
    [data-repeat-cards-max-count] .paragraph--type--cards .cards-container {
        grid-template-columns: repeat(4, 1fr);
    }

    [data-repeat-cards-max-count='3'] .paragraph--type--cards .cards-container,
    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count]
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count]
        .paragraph--type--cards
        .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count='2']
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count='2']
        .paragraph--type--cards
        .cards-container,
    [data-repeat-cards-max-count='2'] .paragraph--type--cards .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    .page-has-menu
        [data-repeat-cards-max-count='1']
        .paragraph--type--cards
        .cards-container,
    [data-repeat-cards-max-count='1'] .paragraph--type--cards .cards-container {
        grid-template-columns: 1fr;
    }
}

[data-repeat-buttons-max-count] .paragraph--type--buttons .cards-container {
    grid-template-columns: 1fr;
}

@media (min-width: 600px) and (max-width: 767px) {
    [data-repeat-buttons-max-count] .paragraph--type--buttons .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-of-contents-container
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    [data-repeat-buttons-max-count] .paragraph--type--buttons .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count]
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count]
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container,
    [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    [data-repeat-buttons-max-count] .paragraph--type--buttons .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count]
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count]
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container,
    [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1440px) {
    [data-repeat-buttons-max-count] .paragraph--type--buttons .cards-container {
        grid-template-columns: repeat(4, 1fr);
    }

    [data-repeat-buttons-max-count='3']
        .paragraph--type--buttons
        .cards-container,
    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count]
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count]
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container,
    [data-repeat-buttons-max-count='2']
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .page:not(.page-has-menu)
        .table-of-contents-container
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    .page-has-menu
        [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container,
    [data-repeat-buttons-max-count='1']
        .paragraph--type--buttons
        .cards-container {
        grid-template-columns: 1fr;
    }
}

/* card container */
/* Side Section Nav */
@media (max-width: 767px) {
    .page-has-menu,
    .page-has-menu-grid {
        display: block;
    }

    .page-menu {
        margin-top: 2rem;
    }
}

/* side section nav */
/* Custom Embed */
.custom-embed::before {
    content: 'Variable Width Custom Embed';
    background-color: var(--black);
    color: #fff;
    width: calc(100% + 4px);
    display: block;
    margin: -2px -2px 0 -2px;
    padding: 0.5rem 0;
    text-align: center;
}

.custom-embed {
    padding: 2px;
    outline: 5px solid black;
}

.custom-embed + .custom-embed {
    margin-top: 2rem;
}

.custom-embed-mobile {
    width: calc(320px - 3rem + 2px);
}

.custom-embed-tablet {
    width: calc(768px - 3rem + 2px);
}

.custom-embed-desktop {
    width: calc(1024px - 3rem + 2px);
}

.custom-embed-mobile::before {
    content: 'Mobile Custom Embed';
}

.custom-embed-tablet::before {
    content: 'Tablet Custom Embed';
}

.custom-embed-desktop::before {
    content: 'Desktop Custom Embed';
}

/* custom embed */
/* Course Description */
.course-description-nav ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.course-description-nav li {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    font-size: 0;
    line-height: 0;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

.course-description-nav a {
    font-size: 1rem;
    line-height: 2rem;
    font-weight: bold;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: inline-block;
    outline: 1px solid #eee;
    text-align: center;
}

.course-description-nav a:hover {
    outline: 1px solid var(--yellow);
}

.course-descriptions-search {
    background-color: #eee;
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr max-content;
    grid-gap: 1rem;
}

.course-descriptions-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.course-descriptions-search input {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    display: inline-block;
    border-radius: 0.15rem;
    border-style: solid;
    border-width: 2px;
}

#block-system-messages {
    color: var(--black);
}

#block-system-messages [aria-label] {
    border: 6px solid black;
    padding: 1rem;
    /* margin-top: 1rem; */
}

#block-system-messages [aria-label='Error message'] {
    border-color: var(--alert-error);
}

#block-system-messages [aria-label='Status message'] {
    border-color: var(--alert-info);
}

#block-system-messages [aria-label='Warning message'] {
    border-color: var(--alert-warning);
}

.body--page > .container > h2,
.body--page > .container > .columns .column > h2 {
    margin-top: 3rem;
}

.body--page > .container > h2:first-child {
    margin-top: 0.5rem;
}

.body--page > .container > .columns:first-child > .column > h2:first-child {
    margin-top: 0;
}

.body--page > .container > h1 + h2,
.body--page > .container > .columns .column > h1 + h2 {
    margin-top: 0.5rem;
}

/* A lead image's bottom margin and inline descender space stack onto the
   following h2's 3rem instead of collapsing, making the first section gap
   larger than all others. Let the h2 margin provide the entire gap. */
.body--page > .container > img:first-child:has(+ h2) {
    display: block;
    margin-bottom: 0;
}

/* Side-by-side columns: a top-of-column heading must not carry the
   inter-section gap itself, or it pushes only its own column down.
   Move the gap to the .columns wrapper when either column leads with an h2. */
@media (min-width: 768px) {
    .body--page > .container > .columns:has(> .column > h2:first-child) {
        margin-top: 3rem;
    }

    .body--page > .container > .columns:first-child:has(> .column > h2:first-child) {
        margin-top: 0;
    }

    .body--page > .container > h1 + .columns:has(> .column > h2:first-child) {
        margin-top: 0.5rem;
    }

    .body--page > .container > .columns .column > :first-child {
        margin-top: 0;
    }
}

.body--page > .container > h3,
.body--page > .container > .columns .column > h3 {
    margin-top: 1.5rem;
}

.body--page > .container > h4,
.body--page > .container > h5,
.body--page > .container > h6,
.body--page > .container > .columns .column > h4,
.body--page > .container > .columns .column > h5,
.body--page > .container > .columns .column > h6 {
    margin-top: 1rem;
}

.course-record + h3 {
    margin-top: 2rem;
    border-top: 1px solid #eee;
    padding-top: 2rem;
}

.course-descriptions-letter {
    display: grid;
    width: 100%;
    grid-template-columns: 4rem 1fr;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.course-descriptions-letter ol {
    margin-top: 1rem;
    list-style-type: none;
    padding: 0;
}

@media (min-width: 600px) {
    .course-descriptions-letter ol {
        columns: 2;
        -webkit-columns: 2;
        -moz-columns: 2;
    }
}

.course-descriptions-letter li {
    display: block;
    font-size: 1.2rem;
    line-height: 1.8rem;
    padding-left: 1rem;
    text-indent: -1rem;
}

/* course description */
/* Defaults */
[data-ucla-node-id] > p:first-child {
    margin-top: 0;
}

/* defaults */
/* Registrar Only */
[data-ucla-ref^='registrar'] [data-ucla-path^='/fees-residence'] th:last-child,
[data-ucla-ref^='registrar'] [data-ucla-path^='/fees-residence'] td:last-child {
    text-align: right;
}

[data-ucla-ref^='registrar'] [data-ucla-path^='/fees-residence'] th[colspan],
[data-ucla-ref^='registrar'] [data-ucla-path^='/fees-residence'] td[colspan] {
    text-align: left;
}

[data-ucla-ref^='registrar']
    nav
    ~ [id^='block-ucla-campus-ucla-registrar-sidebar'] {
    margin-top: 1.75rem;
}
[data-ucla-ref^='registrar'] [id^='block-ucla-campus-ucla-registrar-sidebar'] {
    margin: 1rem 0;
    padding: 1rem;
    background-color: #f5f5f5;
    color: var(--black);
}
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    a:hover {
    color: white;
}
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    h2 {
    margin-bottom: 0.75rem;
}
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    ul {
    list-style: disc;
}

[data-ucla-ref^='registrar'] [data-section-title^='Related ']:last-child {
    margin: 2rem 0 1rem 0;
    padding: 1rem;
    background-color: #f5f5f5;
    color: var(--black);
}

[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']:first-child {
    margin-top: 0;
}

[data-ucla-ref^='registrar'] [data-section-title^='Related ']:last-child h2,
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    h2,
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    h3 {
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin-top: 1rem;
}

[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    h2:first-child,
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    h3:first-child {
    margin-top: 0;
    padding-top: 0;
}

[data-ucla-ref^='registrar']
    [data-section-title^='Related ']:last-child
    h2
    + ul {
    margin-top: 1rem;
}

[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    .related
    + .related {
    margin-top: 2rem;
}

[data-ucla-ref^='registrar'] [data-ucla-node-id='1'] {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 2rem;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

[data-ucla-ref^='registrar'] [data-ucla-node-id='1'] .paragraph--section {
    padding-top: 0;
    margin-top: 0;
}

[data-ucla-ref='registrar/'] [data-ucla-node-id='1'] h1 {
    margin: 0;
    padding: 0;
}

[data-ucla-ref^='registrar'] [data-ucla-node-id='1'] h2 {
    margin-top: 0;
    font-size: 1.5rem;
}

[data-ucla-ref^='registrar']
    [data-ucla-node-id='1']
    [data-section-title='Announcements']
    h3 {
    font-weight: normal;
    font-size: 1.2rem;
    line-height: 1.4rem;
    margin-bottom: 0;
    padding-bottom: 0.2rem;
}

[data-ucla-ref^='registrar']
    [data-ucla-node-id='1']
    [data-section-title='Announcements']
    h3
    + * {
    margin-top: 0;
}

[data-ucla-ref^='registrar']
    [data-ucla-node-id='1']
    [data-section-title='Top Destinations']
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

[data-ucla-ref^='registrar']
    [data-ucla-node-id='1']
    [data-section-title='Top Destinations']
    li {
    margin-bottom: 1rem;
}

[data-ucla-ref^='registrar']
    [data-ucla-node-id='1']
    [data-section-title='Top Destinations']
    li {
    color: var(--magenta);
    font-size: 0.8rem;
    line-height: 1.4rem;
}

[data-ucla-ref^='registrar']
    [data-ucla-node-id='1']
    [data-section-title='Top Destinations']
    li
    a {
    font-size: 1.2rem;
    line-height: 1.4rem;
}

@media (min-width: 600px) {
    [data-ucla-ref^='registrar'] [data-ucla-node-id='1'] {
        grid-template-columns: repeat(2, 1fr);
    }

    [data-ucla-ref^='registrar'] [data-ucla-node-id='1'] .body--page {
        grid-row: 1/2;
        grid-column: 1/3;
    }

    [data-ucla-ref^='registrar']
        [data-ucla-node-id='1']
        .body--page
        + .paragraph--section {
        grid-row: 2/5;
        grid-column: 1/2;
    }
}

@media (min-width: 1024px) {
    [data-ucla-ref^='registrar'] [data-ucla-node-id='1'] {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1023px;
    }

    [data-ucla-ref^='registrar'] [data-ucla-node-id='1'] .body--page {
        grid-row: 1/2;
        grid-column: 1/4;
    }
}

[data-ucla-ref^='registrar']
    [data-section-title^='Related ']:last-child
    p.button,
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    p.button {
    margin-top: 0;
}

[data-ucla-ref^='registrar']
    [data-section-title^='Related ']:last-child
    p.button:last-child,
[data-ucla-ref^='registrar']
    [id^='block-ucla-campus-ucla-registrar-sidebar']
    p.button:last-child {
    margin-bottom: 0;
}

[data-ucla-ref^='registrar']
    [data-section-title^='Related ']:last-child
    p.button:last-child,
[data-ucla-ref^='registrar']
    [id^='block-ucla-registrar-sidebar']
    p.button:last-child {
    margin-bottom: 0;
}

[data-ucla-ref^='registrar']
    [data-section-title^='Related ']:last-child
    h2:first-child {
    margin-top: 0;
}

[data-ucla-ref^='registrar']
    [data-ucla-node-id='1']
    [data-section-title='Top Destinations']
    li {
    color: inherit;
}

.registrar-dates {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.registrar-date {
    font-size: 1.2rem;
    line-height: 1.4rem;
    display: grid;
    grid-template-columns: 2rem 1fr;
    margin-bottom: 1rem;
    grid-column-gap: 1rem;
}

.registrar-date-month {
    grid-row: 1/2;
    grid-column: 1/2;
    font-size: 0.8rem;
    line-height: 1rem;
    text-transform: uppercase;
    text-align: center;
}

.registrar-date-day {
    font-size: 1.4rem;
    text-align: center;
    grid-row: 2/3;
    grid-column: 1/2;
}

.registrar-date-summary {
    grid-row: 1/4;
    grid-column: 2/3;
    padding-top: 0.2rem;
}

/* Registrar Only */
/* Defaults */
p.button {
    display: inline-block;
    margin-top: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* defaults */
/* Body Sections */
.body--section > p:nth-child(1),
.body--section > section:nth-child(1),
.body--section > h2:nth-child(1),
.body--section > ul:nth-child(1),
.body--section > ol:nth-child(1),
.body--section > div:nth-child(1),
.body--section > blockquote:nth-child(1),
.body--section > blockquote:nth-child(1) > p:first-child,
.page-content > [data-ucla-node-id] > .paragraph--section:nth-child(1) h2 {
    margin-top: 0;
    padding-top: 0;
}

.body--section > section.callout:nth-child(1) {
    padding-top: 1rem;
}

/* body sections */
/* Card Media */
.card-with-media-and-buttons p.youtube-embed-container {
    margin: 0 !important;
}

.card-with-media-and-buttons {
    background-color: #eee;
}

.card-with-media-and-buttons .card-title {
    margin-top: 0;
}

.card-with-media-and-buttons .ucla-buttongroup {
    padding: 1rem;
    margin: 0;
}

.card-with-media-and-buttons .card-footer {
    padding: 0 1rem 0 1rem;
}

.card-with-media-and-buttons .card-footer .ucla-button {
    margin: 0 0.5rem 0.5rem 0;
}

/* Card Media */
/* Tables Start */
/* todo: Test word wrapping on tables and determine if needed */
table {
    width: 100%;
    max-width: 100%;
    overflow-wrap: normal;
    /* These are technically the same, but use both */
    word-wrap: normal;
    -ms-word-break: normal;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: normal;
    /* Instead use this non-standard one: */
    word-break: normal;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

table,
td,
th {
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

table {
    margin: 1rem 0;
}

table td,
table th {
    padding: 0.4rem 0.4rem;
}

/* axe-core's color-contrast rule flags rowspan cells with "needs
   review" (messageKey `bgOverlap`): the geometric analyzer sees the
   adjacent <tr>'s bounding rect overlapping the rowspan cell's rect
   (the <tr> of each row being spanned into is a sibling whose rect
   coincides with the spanning cell) and can't determine which is
   visually in front. Giving the rowspan cell its own stacking context
   via `isolation: isolate` tells axe (and browsers, consistently) it
   is self-contained. Zero visual effect — tables already paint cells
   in DOM order. Clears `bgOverlap` on the self-supporting-degree-fees
   and campuswide-ge-requirements tables on registrar.ucla.edu.
   Does not clear the related `elmPartiallyObscuring`, which is
   triggered by long wrapping link text extending past a single row's
   rect — that case needs content changes (shorter link text or
   restructured tables), not CSS. */
td[rowspan] {
    isolation: isolate;
}

th:focus {
    background-color: var(--darker-blue);
    color: #ffe800;
}

table tr[id],
table .thead,
table thead {
    background-color: var(--darker-blue);
    color: #fff;
}

tbody th {
    background-color: inherit;
    color: #333;
    text-align: left;
}

tbody th[scope='colgroup'],
tbody th[scope='rowgroup'] {
    background-color: var(--ucla-blue);
    color: #fff;
}

table caption {
    /* mirrors h3 */
    font-size: 28px;
    line-height: 36px;
    letter-spacing: normal;
    margin-top: 8px;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
}

th,
thead td {
    background-color: var(--ucla-blue);
    color: #fff;
    text-align: left;
}

/* ------------------------------------------------------------------
 * Registrar-only table overrides (legacy blue-banner styling).
 *
 * Scoped via body[data-ucla-ref^='registrar/'] — set by
 * ucla_sa_preprocess_html() using UCLA_SITE_NAME. Keep these rules
 * in sync with the equivalent block in
 * web/themes/custom/ucla_campus/css/text-styles.css (which is the
 * CKEditor stylesheet, so the editor preview matches publish).
 * ------------------------------------------------------------------ */

[data-ucla-ref^='registrar/'] table caption {
    background-color: #2774ae;
    color: #fff;
    text-align: left;
    padding: 6.4px;
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: normal;
    margin: 0;
    caption-side: top;
    font-weight: normal;
    box-sizing: border-box;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    background-clip: padding-box;
}

[data-ucla-ref^='registrar/'] tbody th[scope='rowgroup'] {
    background-color: #2774ae;
    color: #fff;
}

tr.blue-total {
    background-color: var(--lightest-blue);
    font-weight: bold;
}

tr.yellow-total {
    background-color: var(--ucla-gold);
    font-weight: bold;
}

.col-1-50wide tr td:nth-child(1),
.col-1-50wide tr th:nth-child(1) {
    width: 50%;
}

.col-1-40wide tr td:nth-child(1),
.col-1-40wide tr th:nth-child(1) {
    width: 40%;
}

table.col-right {
    text-align: right;
}

table.col-left {
    text-align: left;
}

table.col-1-nowrap tr td:nth-child(1),
table.col-1-nowrap tr th:nth-child(1) {
    white-space: nowrap;
}

table.col-2-nowrap tr td:nth-child(2),
table.col-2-nowrap tr th:nth-child(2) {
    white-space: nowrap;
}

table.col-3-nowrap tr td:nth-child(3),
table.col-3-nowrap tr th:nth-child(3) {
    white-space: nowrap;
}

table.col-4-nowrap tr td:nth-child(4),
table.col-4-nowrap tr th:nth-child(4) {
    white-space: nowrap;
}

table.col-5-nowrap tr td:nth-child(5),
table.col-5-nowrap tr th:nth-child(5) {
    white-space: nowrap;
}

table.col-6-nowrap tr td:nth-child(6),
table.col-6-nowrap tr th:nth-child(6) {
    white-space: nowrap;
}

table.col-1-left tr td:nth-child(1),
table.col-1-left tr th:nth-child(1) {
    text-align: left;
}

table.col-2-left tr td:nth-child(2),
table.col-2-left tr th:nth-child(2) {
    text-align: left;
}

table.col-3-left tr td:nth-child(3),
table.col-3-left tr th:nth-child(3) {
    text-align: left;
}

table.col-4-left tr td:nth-child(4),
table.col-4-left tr th:nth-child(4) {
    text-align: left;
}

table.col-5-left tr td:nth-child(5),
table.col-5-left tr th:nth-child(5) {
    text-align: left;
}

table.col-6-left tr td:nth-child(6),
table.col-6-left tr th:nth-child(6) {
    text-align: left;
}

table.col-last-left tr td:last-child,
table.col-last-left tr th:last-child {
    text-align: left;
}

table.col-1-right tr td:nth-child(1),
table.col-1-right tr th:nth-child(1) {
    text-align: right;
}

table.col-2-right tr td:nth-child(2),
table.col-2-right tr th:nth-child(2) {
    text-align: right;
}

table.col-3-right tr td:nth-child(3),
table.col-3-right tr th:nth-child(3) {
    text-align: right;
}

table.col-4-right tr td:nth-child(4),
table.col-4-right tr th:nth-child(4) {
    text-align: right;
}

table.col-5-right tr td:nth-child(5),
table.col-5-right tr th:nth-child(5) {
    text-align: right;
}

table.col-6-right tr td:nth-child(6),
table.col-6-right tr th:nth-child(6) {
    text-align: right;
}

table.col-1-center tr td:nth-child(1),
table.col-1-center tr th:nth-child(1) {
    text-align: center;
}

table.col-2-center tr td:nth-child(2),
table.col-2-center tr th:nth-child(2) {
    text-align: center;
}

table.col-3-center tr td:nth-child(3),
table.col-3-center tr th:nth-child(3) {
    text-align: center;
}

table.col-4-center tr td:nth-child(4),
table.col-4-center tr th:nth-child(4) {
    text-align: center;
}

table.col-5-center tr td:nth-child(5),
table.col-5-center tr th:nth-child(5) {
    text-align: center;
}

table.col-6-center tr td:nth-child(6),
table.col-6-center tr th:nth-child(6) {
    text-align: center;
}

table.col-last-right tr td:last-child,
table.col-last-right tr th:last-child {
    text-align: right;
}

table.col-last-left tr td:last-child,
table.col-last-left tr th:last-child {
    text-align: left;
}

table.col-last-center tr td:last-child,
table.col-last-center tr th:last-child {
    text-align: center;
}

table.col-last-nowrap tr td:last-child,
table.col-last-nowrap tr th:last-child {
    white-space: nowrap;
}

/* tables end */
/* Files */
.paragraph--type--files ul {
    border-bottom: 1px solid #e5e5e5;
    list-style: none;
    margin: 0;
    padding: 0;
}

.paragraph--type--files li {
    border-top: 1px solid #e5e5e5;
    padding: 0.5rem 1rem;
}

/* files */
/* Ribbon */
.ribbon nobr {
    display: inline-block;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
    background-color: var(--ucla-blue);
    color: #fff;
    font-size: 2.8rem;
    line-height: 3.2rem;
    font-weight: bold;
    padding: 0 0.3rem;
}

@media (max-width: 1000px) {
    .ribbon nobr {
        font-size: 2.52rem;
        line-height: 2.88rem;
        padding: 0 0.27rem;
    }
}

@media (max-width: 900px) {
    .ribbon span {
        font-size: 2.24rem;
        line-height: 2.56rem;
        padding: 0 0.24rem;
    }
}

@media (max-width: 767px) {
    .ribbon nobr {
        font-size: 2.1rem;
        line-height: 2.4rem;
        padding: 0 0.225rem;
    }
}

@media (max-width: 350px) {
    .ribbon nobr {
        font-size: 1.68rem;
        line-height: 1.92rem;
        padding: 0 0.18rem;
    }
}

/* ribbon */
/* Service Cards */
.card-service {
    border: 1px solid #eee;
    border-top: 6px solid var(--brand-blue);
    padding: 1rem;
    display: flex;
    flex-direction: column;
}

.card-service-title {
    margin-top: 0;
    font-size: 1.5rem;
    line-height: 1.6875rem;
    min-height: calc(1.6875rem * 2);
}

.card-labeled-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.card-labeled-section + .card-labeled-section {
    margin-top: 1rem;
}

.card-labeled-label {
    margin: 0;
    padding: 0;
    font-size: 1rem;
}

.card-labeled-value {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.card-labeled-value .social-links-container a {
    width: 36px;
    height: 36px;
    background-size: 36px 36px;
}

.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;
    background: var(--black);
}

.card-service-summary {
    flex: 1;
}

/* service cards */
/* Dashew Event List */
.ucla-dashew-events-list {
    list-style-type: none;
    margin: 1rem 0 1rem 0;
    padding: 0;
}

.ucla-dashew-events-item {
    padding: 0 0 1rem 0;
}

.ucla-dashew-events-item + .ucla-dashew-events-item {
    border-top: 1px solid #eee;
    padding: 1rem 0 1rem 0;
}

.ucla-dashew-events-link {
    font-weight: bold;
    font-size: 1.125rem;
    line-height: 1.265625rem;
}

/* dashew event list */
/* Dashew-Ambassador Start */
@media (min-width: 600px) {
    .dashew-ambassadors .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .dashew-ambassadors .cards-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dashew-ambassador {
    border: 1px solid #eee;
    border-top: 6px solid var(--brand-blue);
    padding: 1rem;
}

.dashew-ambassador-title {
    font-size: 1.5rem;
    line-height: 1.6875rem;
    font-weight: bold;
    display: grid;
    grid-template-columns: 3rem 1fr;
    grid-row-gap: 1rem;
    grid-column-gap: 0.5rem;
    margin-top: 0;
    padding-top: 0;
}

.dashew-ambassador-country-flag {
    display: inline-block;
    height: 2rem;
    grid-row: 1/2;
    grid-column: 1/2;
}

.dashew-ambassador-country-flag[alt='Indonesia Flag'],
.dashew-ambassador-country-flag[alt='Japan Flag'] {
    outline: 1px solid #eee;
}

.dashew-ambassador-country-name {
    grid-row: 1/2;
    grid-column: 2/3;
    padding-top: calc(calc(2rem - 1.6875rem) / 2);
    padding-bottom: calc(calc(2rem - 1.6875rem) / 2);
}

.dashew-ambassador-name {
    grid-row: 2/3;
    grid-column: 1/3;
}

.no-css-spacer {
    display: none;
}

.dashew-ambassador-bio {
    display: block;
}

.dashew-ambassador-bio .card-labeled-label {
    display: inline-block;
    float: left;
    padding-right: 0.5rem;
}

.dashew-ambassador-name {
    margin-top: 0;
}

/* dashew-ambassador end */
/* DL Lists */
dl {
    margin: 1rem 0;
    padding: 0;
    width: auto;
}

dt {
    font-weight: bold;
    margin-bottom: 1rem;
}

dd {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    dl {
        display: grid;
        grid-template-columns: max-content auto;
        grid-column-gap: 1rem;
    }
}

/* dl lists */
/* Node Preview */
#node-preview-form-select {
    padding: 1rem 0;
    border-bottom: 1px solid var(--black);
}

#node-preview-form-select > * {
    display: none;
}

#node-preview-form-select .node-preview-backlink {
    display: inline-block;
    background-color: var(--black);
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.node-preview-backlink::before {
    content: '←';
    display: inline-block;
    padding: 0 0.5rem 0 0;
}

.pager__items {
    display: block;
    text-align: center;
    margin-top: 3rem;
    font-size: 0;
}

.pager__item {
    display: inline;
    font-size: 0;
}

.pager__item a {
    line-height: 1.25;
    font-size: 1rem;
    font-weight: bold;
    padding: 6px 12px 4px 12px;
    text-decoration: none;
    display: inline-block;
    border: 2px solid var(--brand-blue);
    border-radius: 2px;
    margin: 2px;
}

.pager__item [aria-current='page'] {
    color: #757575;
    border-color: #757575;
}

.pager__item a:hover {
    background-color: var(--brand-light-blue);
    border-color: var(--brand-light-blue);
    color: #fff;
}

.pager__item a:active {
    background-color: var(--darkest-blue);
    border-color: var(--darkest-blue);
    color: #fff;
}

.pager__item--first,
.pager__item--last {
    display: none;
}

/* node preview */
/* Skip Link */
.skiplink {
    position: fixed;
    display: block;
    z-index: 100;
}

.skiplink a {
    display: block;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin-left: -1px;
}

.skiplink a:focus {
    margin-left: 0;
    background-color: #ffffff;
    border: 2px solid var(--gold);
    width: auto;
    height: auto;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.5rem 1rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: bold;
}

@media print {
    .skiplink {
        display: none;
    }

    .molecule {
        display: none;
    }
}

/* skip link */
/* Header */

/* Explicitly layer the site header above page content. Previously
   relied on `main { overflow: auto }` to keep main's contents (a
   first-block hero image on bewellbruin.ucla.edu) from painting
   over the header; that rule was removed in #1134 to satisfy WCAG
   2.1.1 (scrollable-region-focusable), which re-exposed the paint
   order issue. Because the header is earlier in DOM than main but
   has z-index:auto, any statically-positioned element in main whose
   bounding rect extends above main's start — e.g. a full-bleed hero
   <img> — paints on top, blocking clicks and hover on header nav
   links. Setting `position: relative; z-index: 1` raises the whole
   siteheader subtree above main in the stacking order. */
.siteheader {
    position: relative;
    z-index: 1;
}

.siteheader a:focus {
    outline: 1px dotted var(--brand-light-blue);
}

.navbar-wrapper {
    border-bottom: 1px solid #bbbbbb;
}

.topbar {
    background-color: var(--ucla-blue);
    margin-bottom: 2rem;
}

[aria-label='UCLA'] {
    display: inline-block;
    height: 2.8rem;
    font-size: 1rem;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0idWNsYSIgZGF0YS1uYW1lPSJ1Y2xhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2OS4xMSAyMi43NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNGRkZGRkY7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5VQ0xBPC90aXRsZT48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0uMDYsMTYuMDlBMTkuNTUsMTkuNTUsMCwwLDEsMCwxMy43MkwxLjEzLDFINS4zMUw0LjE3LDEzLjg0Yy0uMjUsMi43OC44NSw0Ljc3LDMuNjIsNC43N3M0LjM0LTIsNC41OS00LjQ5TDEzLjU2LDFoNC4xN0wxNi41OCwxNGMtLjQ2LDUtMy43OCw4Ljc0LTkuMTQsOC43NEE3LjExLDcuMTEsMCwwLDEsLjA2LDE2LjA5Ii8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTguNTUsMTEuNzdDMTkuMDksNS42NSwyMy4yMi41NywzMC4zNS41N2E5Ljc4LDkuNzgsMCwwLDEsNS40OCwxLjU5bC0uNDgsNS4wNkE2LjE3LDYuMTcsMCwwLDAsMzAsNC43Yy00LjQ0LDAtNi44NywzLjA4LTcuMjIsN3MxLjYyLDYuODksNS45Miw2Ljg5YTgsOCwwLDAsMCw2LTIuNjNsLS40Niw1LjE5YTEyLDEyLDAsMCwxLTUuODIsMS42Yy03LjA2LDAtMTAuMjktNS4yNC05Ljc4LTExIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMzguNTcsMWg0LjE2TDQxLjIyLDE4LjI5aDZjLjQyLDAsMS44NCwwLDIuMjMsMCwwLC4yMS0uMzgsNC0uMzgsNEgzNi42OFoiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02MC4yNiw4LjkyQTUuMyw1LjMsMCwwLDAsNjAuNTcsOGguMDdhNSw1LDAsMCwwLC4xNi45Yy4yMywxLDEuODUsNi4zNSwxLjg1LDYuMzVINTcuMzlzMi44Mi02LjIyLDIuODctNi4zNk02MS4zMywwSDYxTDQ5LjY0LDIyLjI1aDQuNDJsMS42LTMuMzdoOGwxLDMuMzhoNC40MUw2MS4zMywwIi8+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: auto 1.6rem;
    min-width: 6rem;
    color: rgba(0, 0, 0, 0);
    text-indent: -1000rem;
    background-position: center left;
    grid-area: logo;
}

.siteheader .h2 {
    color: #333;
    color: var(--body-text-color);
}

.siteheader .h2:hover {
    background-color: #fff;
}

@media (min-width: 768px) {
    .navbar-grid {
        display: grid;
        grid-template-areas:
            'logo nav-top'
            'nav-main nav-main';
        grid-row-gap: 1rem;
        position: relative;
    }

    .navbar {
        display: grid;
    }

    .navbar ul {
        display: flex;
    }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    /* disabled to accomodate multi-line logos */
    /* .navbar-wrapper [role='heading'] {
        max-width: min-content;
    } */

    .navtop li a {
        padding: 0.5rem;
    }
}

.navbar-wrapper [role='heading'] a {
    text-decoration: none;
}

.navbar ul,
.navtop ul {
    list-style-type: none;
    height: 100%;
    margin: 0;
    padding: 0;
}

.navbar li {
    height: 100%;
    position: relative;
}

.navbar li a {
    padding: 0.5rem 1rem;
    vertical-align: bottom;
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: block;
    color: var(--brand-blue);
    text-decoration: none;
}

.navbar li a:focus {
    background-color: var(--brand-light-blue);
    color: #fff;
}

.search svg {
    fill: var(--brand-blue);
    transform: translateY(0.2rem);
    height: 1.2rem;
    width: 1.2rem;
}

.search:hover svg {
    fill: #ffffff;
}

.button-search:hover,
.navbar li a:hover {
    background-color: var(--blue);
    color: #fff;
}

.button-search:hover svg {
    fill: #fff;
}

@media (max-width: 600px) {
    .navbar-wrapper {
        display: block;
    }

    .navbar li a {
        top: 2px;
        border-bottom: 0;
    }

    .search {
        text-align: right;
    }

    .search svg {
        transform: none;
    }
}

.button-search:hover,
.navbar li a:hover {
    background-color: var(--brand-light-blue);
    color: #fff;
}

.navbar li a:active {
    background: var(--darkest-blue);
    color: #fff;
}

/* default is collapsed */
.navbar ul ul {
    display: none;
    color: inherit;
    font-weight: normal;
    text-transform: none;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
    margin: 0;
    padding: 0;
}

.navbar ul ul li {
    display: block;
    margin: 0;
    padding: 0;
}

.navbar ul ul a {
    display: block;
    margin: 0;
    padding: 0 0.5rem;
    width: 100%;
}

body > header .navbar ul ul a:hover {
    background-color: var(--brand-light-blue);
    outline: none;
}

body > header .navbar ul ul a:focus {
    border-color: var(--magenta);
    outline-color: var(--magenta);
}

.navbar ul [aria-expanded='true'] + ul {
    z-index: 100;
    display: grid;
    grid-template-columns: auto;
    position: absolute;
    width: 20rem;
}

.navbar ul [aria-expanded='true'] + ul li {
    background-color: #ffffff;
    display: block;
    text-align: left;
    border: 1px solid #e5e5e5;
    border-top: 0;
}

.navbar ul [aria-expanded='true'] + ul li:first-child {
    border-top: 1px solid #e5e5e5;
}

.navbar ul [aria-expanded='true'] + ul a {
    line-height: 1.4rem;
    /* total of 2rem for one line */
    padding: 0.5rem 1rem;
}

@media (min-width: 768px) {
    /* right align nav in large modes to prevent right viewport overflow */
    .navbar ul li:last-child [aria-expanded='true'] + ul {
        right: 0;
    }
}

/* header */

/* #endregion */

/* #region Table of contents improvements */
@media (max-width: 767px) {
    .table-of-contents-content .body-content img:first-child {
        margin-top: 1rem;
    }
}
:not(.page-has-menu) .table-of-contents-content .body-content img:first-child {
    margin-top: 1rem;
}
.page-has-menu .table-of-contents ul {
    list-style: circle;
}
/* #endregion */

/* #region Debugging sidebars */
.page-menu .debug {
    color: red;
}
.page-menu .debug a {
    color: red;
}
.page-menu .debug a:hover {
    background: yellow;
    text-decoration: underline;
}
.page-menu p.debug {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}
.page-menu nav ~ p.debug {
    margin-top: 1.5rem;
}
.page-menu p.debug small {
    font-weight: normal;
}
/* #endregion */