/* #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;
}

/* 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 */
.container,
.views-element-container,
.table-of-contents-container {
    width: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    margin-right: auto;
    margin-left: auto;
    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;
    padding-right: 1rem;
}

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

footer a:last-child {
    padding-right: 0;
}

/*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;
}

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

/* footer */
/* Links */
a {
    color: var(--brand-blue);
}

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'] {
    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;
}

form.site-search input[type='search']:placeholder-shown {
    background-image: url('../img/search-icon.svg');
    background-repeat: no-repeat;
    background-position: center left 0.5rem;
    background-size: 1.5rem;
}

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[aria-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[aria-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'] {
    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 {
    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;
    line-height: 1.9rem;
    height: 3.8rem;
    margin-bottom: 0.4rem;
}

.column .event-card-summary {
    height: auto;
}

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

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

@media (max-width: 1023px) {
    .event-card-summary {
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 1.9rem;
        height: 5.7rem;
    }

    .column .event-card-summary {
        height: auto;
    }
}

@media (max-width: 768px) {
    .event-card-summary {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.9rem;
        margin-bottom: 0.4rem;
    }

    .column .event-card-summary {
        height: auto;
    }
}

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

.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,
.event-card-location {
    margin-top: 0;
}

@media (min-width: 601px) {
    .event-card-time,
    .event-card-location,
    .event-card-category {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

.event-card-time {
    background-image: url(../img/calendar/icon-clock.svg);
    background-repeat: no-repeat;
    padding-left: 1.2rem;
    background-size: 0.8rem;
    background-position-y: 0.2rem;
    margin-bottom: 0.2rem;
}

.event-card-location {
    background-image: url(../img/calendar/icon-location.svg);
    background-repeat: no-repeat;
    padding-left: 1.2rem;
    background-size: 0.8rem;
    background-position-y: 0.2rem;
    margin-bottom: 0.2rem;
}

.event-card-virtuallocation {
    background-image: url(../img/calendar/icon-play.svg);
}

.event-card-category {
    background-image: url(../img/calendar/icon-cal.svg);
    background-repeat: no-repeat;
    padding-left: 1.2rem;
    background-size: 0.8rem;
    background-position-y: 0.2rem;
    margin-bottom: 0.2rem;
}

.event-card a {
    text-decoration: none;
}

.event-card-website {
    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 */
/* Non-bold Same Sizing has h3 */
.sub-page h2 {
    font-weight: normal;
    font-size: 1.5rem;
    line-height: 1.6875rem;
}

.sub-page {
    border-top: 1px solid #eee;
}

/* 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);
}

p + h2,
ul + h2,
ol + h2,
div + h2 {
    margin-top: 3rem;
}

.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;
}

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'] {
    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;
}

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 */
.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 */