/* #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: 20px;
  --default-font-size: 16px;
  --alert-error: #d60000;
  --alert-success: #007339;
  --alert-warning: #f57f17;
  --alert-info: #8bb8e8;
  --alert-debug: #999999;
}

main > .container {
  background-color: #fff;
  /* padding-top: 1.5rem; */ /* 1.2rem would mirrors negative margin on main container */
  padding-bottom: 2rem;
  z-index: 100;
}
#block-ucla-sa-page-title,
#block-breadcrumbs {
  padding-top: 1.5rem;
}
#block-breadcrumbs + #block-ucla-sa-page-title {
  padding-top: 0;
}
/* text styles */
body {
  font-family: ProximaNova, Verdana, sans-serif;
  font-size: 16px;
  font-size: var(--default-font-size);
  line-height: 20px;
  line-height: var(--default-line-height);
  color: #333;
  /* margin: 0; */
  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: 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,
h2,
h3,
h4,
h5,
h6 {
  color: #000;
}
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;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  /* line-height: 2.53125rem; */
}
h5,
h6 {
  margin-bottom: 0;
}
h5 + *,
h6 + * {
  margin-top: 0;
}
h1 + h2 {
  margin-top: 2rem;
}
.page-has-menu {
  display: grid;
  grid-template-columns: 1fr 1.5rem 0.4fr;
}
.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; */
}
.section-menu-title {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 16px;
  padding: 12px 0 12px 0;
}
.section-menu-title a {
  margin: -12px 0;
  padding: 12px 0;
  color: #000;
  text-decoration: none;
  width: 100%;
  display: block;
}
.section-menu-item {
  position: relative;
  display: block;
  margin-bottom: -1px;
  background-color: #2f7cb3;
  border: 1px solid #fff;
  padding: 0;
}
.section-menu-item a {
  padding: 0.5rem 1rem;
  color: #fff;
  text-transform: uppercase;
  display: block;
  text-decoration: none;
}
.section-menu-item-active {
  background-color: #005587;
}
.section-menu-item-active a {
  color: #ffe800;
}

.hcollapse + h2 {
  margin-top: 3rem;
}
.paragraph--section {
  padding: 1rem 0;
}
.cards.paragraph--section {
  padding-bottom: 0;
}
/*
h1, h2, h3, h4, h5, h6, p, li {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}
*/
.lead {
  color: #000;
  font-size: 1.2rem;
  line-height: 1.875rem;
}

.legal {
  font-size: 0.75rem;
  line-height: 1.125rem;
}

a,
a.h1,
a.h2,
a.h3,
a.h4,
a.h5 {
  color: #005587;
}

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

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

body > header .nav-topbar a:focus {
  outline: 2px dotted var(--pink);
}

body > header .nav-topbar a:hover {
  color: var(--darkest-blue);
  background-color: #fff;
}

body > header .nav-secondary a:focus {
  background-color: #fff;
  border-color: var(--magenta);
}
body > header .nav-secondary a:hover {
  background-color: var(--darker-blue);
  color: #fff;
}
body > footer a:focus {
  background-color: transparent;
  outline: 2px dotted var(--yellow);
}

ul {
  list-style: disc;
  padding-left: 1rem;
}
ol {
  list-style-type: decimal;
  padding-left: 1rem;
}
/* container from newsroom */
.container {
  width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin-right: auto;
  margin-left: auto;
  max-width: 1023px;
}
nav.container {
  padding-left: 0;
  padding-right: 0;
}
.nav-secondary.container {
  padding-right: 0.5rem;
}
@media (min-width: 1440px) {
  .container {
    max-width: 1170px;
  }
}

/*
nav ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, 1fr);
}
*/
nav ul {
  list-style: none;
  padding-left: 0;
}

/* nav */
.header .skip-to-main {
  position: fixed;
  top: 0;
  left: 0;
}

.header .skip-to-main a {
  opacity: 0;
}

.header .skip-to-main a:focus {
  opacity: 1;
  display: block;
  background-color: #fff;
  color: #204e91;
  padding: 0 1rem;
}

/* nav-topbar */
/* Global Header */
.nav-topbar {
  background: #ceedfa;
  /* Old browsers */
  background: -moz-linear-gradient(left, #89d2eb 0%, #ceedfa 50%, #89d2eb 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#89d2eb), color-stop(50%,#ceedfa), color-stop(100%,#89d2eb));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #89d2eb 0%,#ceedfa 50%,#89d2eb 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #89d2eb 0%,#ceedfa 50%,#89d2eb 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #89d2eb 0%,#ceedfa 50%,#89d2eb 100%);
  /* IE10+ */
  background: linear-gradient(to right, #89d2eb 0%,#ceedfa 50%,#89d2eb 100%);
  /* W3C */
}

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

.header {
  background: #005587;
  /* Old browsers */
  background: -moz-linear-gradient(top, var(--darker-blue) 0%, var(--ucla-blue) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--darker-blue)), color-stop(100%,var(--ucla-blue)));
  /* Chrome, Safari4+ */
  background: -webkit-linear-gradient(top, var(--darker-blue) 0%,var(--ucla-blue) 100%);
  /* Chrome10+, Safari5.1+ */
  background: -o-linear-gradient(top, var(--darker-blue) 0%,var(--ucla-blue) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, var(--darker-blue) 0%,var(--ucla-blue) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, var(--darker-blue) 0%,var(--ucla-blue) 100%);
  /* W3C */
  border-radius: 0;
  border: none;
}

body > header {
  padding-bottom: 1.4rem;
}

body > header + main {
  margin-top: -1.2rem;
  z-index: 1;
}

.header a {
  color: #fff;
  text-decoration: none;
}

/* topbbar start */
.topbar-user-links {
  background-color: #000000;
}
.topbar-user-links p {
  margin: 0 -1rem;
  padding: 0.3rem;
  text-align: right;
  color: #bbb;
}
.topbar-user-links a {
  text-decoration: underline;
}
.nav-topbar a {
  color: var(--darkest-blue);
}

.nav-topbar {
  font-size: 0.9rem;
  text-decoration: none;
}

.nav-topbar ul {
  height: 1.8243rem;
  width: 100%;
  text-align: right;
  font-size: 0; /* remove space between inline blocks */
  display: block;
  box-sizing: border-box;
}

.nav-topbar a {
  border-top: 0.2rem solid transparent;
  display: inline-block;
  font-size: 1rem;
  margin: 0;
  padding: 0.3rem 0.2rem 0 0.2rem;  /* height: 2.5rem; */
}

.nav-topbar ul li {
  display: inline-block;
}

.nav-topbar ul li::before {
  font-size: 0.8rem;
  margin: 0 0.5rem;
  content: '|';
  color: #204e91;
}

.nav-topbar ul li:first-child:before {
  display: none;
}
.nav-topbar ul li.topbar-yellow-button::before {
  display: none;
}
.nav-topbar ul li.topbar-yellow-button {
  margin-left: 1rem;
}
.nav-topbar ul li.topbar-yellow-button + li.topbar-yellow-button {
  margin: 0;
  padding: 0;
}
.nav-topbar ul li.topbar-yellow-button + li.topbar-yellow-button {
  margin-left: 1px;
}

.nav-topbar .topbar-yellow-button {
  font-size: 0;
  background-color: yellow;
  background: #fef200;
  /* Old browsers */
  background: -moz-linear-gradient(top, #fef200 0%, #ffce03 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef200), color-stop(100%,#ffce03));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #fef200 0%,#ffce03 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #fef200 0%,#ffce03 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #fef200 0%,#ffce03 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #fef200 0%,#ffce03 100%);
  /* W3C */
  margin: 0;
  padding: 0;
  border: none;
}
.nav-topbar .topbar-yellow-button strong {
  font-weight: normal;
}
.nav-topbar .topbar-yellow-button a::after {
  content: ' <strong> WRAPPER MISSING OUTSIDE LINK';
  color: red;
}
.nav-topbar .topbar-yellow-button strong a::after {
  display: none;
  content: '';
  color: transparent;
}
.nav-topbar .topbar-yellow-button a {
  border-top: 0.2rem solid #f0b400;
  font-size: 0.9rem;
  text-transform: uppercase;
  height: 2.3rem;
  padding: .3rem 1rem 0 1rem;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.nav-searchlinks ul li {
  display: inline-block;
  padding: 1.5rem 0.5rem 0 0.5rem;
}

/* main nav */

.nav-main {
  color: #eee;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 2rem;
}

.nav-main ul {
  text-align: right;
}

.nav-main ul li {
  display: inline-block;
  padding: 0;
}

.nav-main ul li a {
  padding: 0.5rem;
}

/* default is collapsed */
.nav-main 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;
}
.nav-main ul ul {
  display: none;
  color: inherit;
  font-weight: normal;
  text-transform: none;
  /* margin: 2rem 0; */
}

.nav-main ul ul li {
  display: block;
  margin: 0;
  padding: 0;
}
.nav-main ul ul a {
  display: block;
  margin: 0;
  padding: 0 0.5rem;
  width: 100%;
  color: var(--darkest-blue);
}

body > header .nav-main ul ul a:hover {
  background-color: #e9f6ff;
  outline: none;
}
body > header .nav-main ul ul a:focus {
  border-color: var(--magenta);
  outline-color: var(--magenta);
}

.nav-main ul [aria-expanded=true] + ul {
  z-index: 100;
  display: block;
  position: absolute;
  max-width: 240px;
  width: fit-content;
}
.nav-main ul [aria-expanded=true] + ul li {
  background-color: #ffffff;
  display: block;
  width: 100%;
  text-align: left;
}
.nav-main ul [aria-expanded=true] + ul a {
  line-height: 1.4rem; /* total of 2rem for one line */
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
@media (min-width: 1024px) {
  /* right align nav in large modes to prevent right viewport overflow */
  .nav-main ul li:last-child [aria-expanded=true] + ul {
    right: 0;
  }
}
/* end main nav */

.headerbar {
  display: flex;
  flex-direction: row;
  padding: 0;
}

.headerbar > *:first-child {
  flex: 1;
}
.headerbar button[aria-controls="menus"] {
  border: 0px;
  background-color: transparent;
  width: 48px;
  height: 48px;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  background-image: url('../img/menu-icon.svg');
  background-size: 1.5rem;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
}

.headerbar img {
  margin-top: 1rem;
}

[aria-label=Breadcrumb] {
  padding-top: 0.5rem;
  font-size: 0;
}

[aria-label=Breadcrumb] li {
  font-size: 0.8rem;
  display: inline;
}

[aria-label=Breadcrumb] li::after {
  content: '/';
  margin: 0 0.5rem;
}

[aria-label=Breadcrumb] li:last-child:after {
  content: '';
}

/* footer */
footer {
  margin-top: 2rem;
  background: #003d6e;
  /* Old browsers */
  background: -moz-linear-gradient(top, var(--ucla-blue) 0%, var(--darker-blue) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,var(--ucla-blue)), color-stop(100%,var(--darker-blue)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, var(--ucla-blue) 0%,var(--darker-blue) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, var(--ucla-blue) 0%,var(--darker-blue) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, var(--ucla-blue) 0%,var(--darker-blue) 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, var(--ucla-blue) 0%,var(--darker-blue) 100%);
  /* W3C */
  border-radius: 0;
  border: none;
}

footer a,
footer a:visited {
  color: #fff;
  text-decoration: none;
}

.nav-topbar a,
.nav-secondary a {
  color: var(--darkest-blue);
}

.nav-topbar a:hover {
  color: #fff;
}

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

.nav-footer {
  font-size: 0.8rem;
  font-size: 11px;
  line-height: 28px;
  font-size: 0;
  text-decoration: none;
}

.nav-footer ul {
  text-align: left;
}

.nav-footer a {
  font-size: 0.8rem;
  padding: 0 0.2rem;
}

.nav-footer ul li {
  display: inline-block;
}

.nav-footer ul li::after {
  font-size: 0.8rem;
  margin: 0 0.5rem;
  content: '|';
  color: #bbb;
}

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

.nav-footer-left ul {
  text-align: left;
}

.nav-footer .icon-ada {
  background-image: url('../img/adalogo.svg');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 1.2rem;
  background-size: contain;
}

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

.nav-directory a {
  font-size: 1rem;
  text-transform: none;
  display: block;
  background-color: #005587;
  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: #005587;
  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: #005587;
  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: #00598c;
}

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

/* ada */
.text-align-center {
  text-align: center;
}

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

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

.accordion {
  background-color: #ccc;
}

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

.site-name {
  font-size: 2rem;
  line-height: 3rem;
}

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

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

#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%;
}

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

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

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

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

strong {
  font-weight: bold;
}

.button a,
.form-submit,
.uclaform button,
.ucla-button,
.ucla-button:visited {
  font-size: 1rem;
  padding: .5rem 1rem;
  display: inline-block;
  border-radius: 0.15rem;
  border-width: 2px;
  border-style: solid;
  border-color: transparent;
  color: #00598c;
  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: #00598c;
  background-color: #00598c;
  color: #fff;
}

.ucla-button-secondary,
.ucla-button-secondary:visited {
  border-color: #00598c;
  background-color: #fff;
  color: #00598c;
}

.button a:hover,
.ucla-button:hover {
  background-color: #0079bf;
  border-color: #0079bf;
  color: #fff;
}

.button a:active,
.ucla-button:active {
  background-color: #003b5c;
  border-color: #003b5c;
  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: #0079bf;
  border-color: #0079bf;
  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;
}

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

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

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

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 #2774ae;
  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 #2774ae;
  padding-left: 1rem;
  font-size: 1.2rem;
  line-height: 1.5rem;
  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: #00598c;
  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);
}
.js .hcollapse .hdetails {
  display: none;/* outline: 1px solid red; */
}
.js .hcollapse {
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.js .hcollapse + .hcollapse {
  border-top-width: 0px;
}
.js .hcollapse .hdetails[aria-expanded=false] {
  display: none;
}
.js .hcollapse .hdetails[aria-expanded=true] {
  display: block;
}
.js .hcollapse .hdetails[aria-expanded=true] > *:last-child {
  margin-bottom: 1rem;
}
.js .hcollapse .hsummary h2,
.js .hcollapse .hsummary h3 {
  color: var(--darker-blue);
}
.js .hcollapse .hsummary h2,
.js .hcollapse .hsummary h3 {
  color: var(--darker-blue);
}
.js .hcollapse-loaded .hsummary {
  display: grid;
  grid-template-columns: 1fr min-content;
  grid-gap: 2rem;
  cursor: pointer;
}
.hsummary button {
  background-image: url('../img/arrow-down.svg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  height: 1.5rem;
  width: 1.5rem;
  cursor: pointer;
}
.hsummary button:focus,
.hsummary button:hover {
  background-image: url('../img/arrow-down-light.svg');
  background-color: #0179bf;
  outline: -webkit-focus-ring-color auto 1px;
}
.h2summary p {
  line-height: 2.53125rem;
}
.hcollapse-open .hsummary button {
  background-image: url('../img/arrow-up.svg');
}
.hcollapse-open .hsummary button:focus,
.hcollapse-open .hsummary button:hover {
  background-image: url('../img/arrow-up-light.svg');
  background-color: #0179bf;
  outline: -webkit-focus-ring-color auto 1px;
}
iframe {
  margin: 0 auto;
  max-width: 100%;
  /* height: auto; */
  width: 100%;
}
.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-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: 2rem;
}
form.site-search.mobile-only {
  margin-bottom: 0;
  padding: 0 1rem;
}
.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.15rem 0.5rem;
  display: inline-block;
  border-radius: 0.15rem;
  border-width: 4px;
  width: 100%;
  max-width: 20rem;
  border-style: solid;
  border-color: #757575;
  color: #00598c;
  line-height: inherit;
  font-family: inherit;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
form.site-search input[type=search]:placeholder-shown {
  background-image: url('../img/search-icon.svg');
  background-repeat: no-repeat;
  background-position: center right 0.2rem;
}
form.site-search.mobile-only input[type=text],
form.site-search.mobile-only input[type=search] {
  max-width: 100%;
  border-color: #fff;
}
.header-right form.site-search input[type=search] {
  border-color: #fff;
}
form.site-search.mobile-only input[type=search]:focus,
.header-right form.site-search input[type=search]:focus {
  background-color: #fff;
  outline: none;
  border-color: var(--magenta);
}
form.site-search button[type="submit"] {
  display: none;
}
[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;
}
@media (max-width: 1023px) {
  .desktop-only {
    display: none;
  }

  .nav-secondary {
    background-color: #ceedfa;
  }

  .nav-main.container,
  .nav-secondary.container,
  .nav-footer.container {
    padding: 0;
    font-weight: bold;
    text-transform: none;
    line-height: inherit;
  }

  .nav-main.container,
  .nav-secondary.container {
    border-bottom: 1px solid #fff;
  }

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

  .nav-main ul {
    text-align: left;
  }

  .nav-main ul li,
  .nav-secondary ul li,
  .nav-footer ul li {
    display: block;
    padding: 0;
    border-top: 1px solid #fff;
  }
  .nav-secondary ul li.topbar-yellow-button {
    background-color: var(--yellow);
  }

  .nav-main ul li a,
  .nav-secondary ul li a,
  .nav-footer ul li a {
    padding: 0.3rem 1rem;
    line-height: 1.4rem;
    display: block;
  }

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

  body > header {
    padding-bottom: 0;
  }

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

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

  .header-slides {
    margin: 0;
  }
  .js #menus {
    display: none;
  }
  .js #menus.control-aria-expanded {
    display: block;
    padding-top: 0.5rem;
  }
  .headerbar img {
    margin-top: 0;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
  }

}
@media (min-width: 1024px) {
  .mobile-only {
    display: none;
  }
}
.article-header {
  margin-bottom: 1rem;
}
a.youtube-embed {
  display: block;
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
}
.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;
    }
  }
}
.card {
  display: block;
  max-width: 240px;
  margin: 0 0 1rem 0;
  color: #000;
  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;
}
.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);
}
.people-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1rem;
}
@media (min-width: 768px) {
  .people-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1440px) {
  .people-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .page:not(.page-has-menu) .table-of-contents-container .people-container,
  .page-has-menu .people-container {
    grid-template-columns: repeat(2, 1fr);
  }

}
.person {
  display: grid;
  grid-template-columns: 1fr 160px;
  grid-template-rows: 1rem min-content 1fr 1rem;
}
@media (max-width: 400px) {
  .person {
    grid-template-columns: 1fr 120px;
  }
}
.person-background-node {
  grid-row: 2/5;
  grid-column: 1/3;
  background-color: #ebebeb;
}
.person-title {
  grid-row: 2/3;
  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: 3/4;
  grid-column: 1/2;
  padding: 0 1rem 0 1rem;
  overflow-wrap: anywhere;
}
.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/4;
  grid-column: 2/3;
  padding-right: 1rem;
}
.person-image img {
  margin: 0 1rem 0 0;
  padding: 0;
  font-size: 0;
}
.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;
}
.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: #000;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
.cards-theme-resources .card-title {
  border-top: 6px solid #00598c;
  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: #000;
}
.cards-theme-resources .card:hover .card-title {
  border-color: var(--darker-gold);
}
.cards-theme-buttons .card {
  border: 3px solid #00598c;
  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: #000;
}
.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;
}
.list-items {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.list-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-gap: 1rem;
}
#block-ucla-sa-local-tasks {
  margin: 0 -1.5rem 0 -1.5rem;
}
.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #000000;
  padding: 0.5rem 1.5rem;
}
.tabs li {
  display: inline-block;
  padding: 0;
  margin: 0;
  margin: 0 0.1rem 0 0;
}
.tabs a {
  background-color: #ffd100;
  color: #000;
  text-decoration: none;
  padding: 0 0.4rem;
}
.tabs a:hover {
  background-color: #00598c;
  color: #ffffff;
}
h1 {
  padding-bottom: 1rem;
}
@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 #ffd100;
    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;
  }
}
.broadcast-message {
  text-align: center;
  background-color: var(--yellow);
  color: #000000;
  text-align: center;
  padding: 5px 14px;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  margin: 0 auto;
  font-weight: bold;
}
.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;
}


/* 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 */
#block-mainnavigation ul ul ul {
  margin-left: 1rem;
}
/*
#block-breadcrumbs ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

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

#block-breadcrumbs li + li::before {
  content: '>'
}
*/
#block-breadcrumbs h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
#block-breadcrumbs ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
#block-breadcrumbs li {
  display: inline;
}
#block-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-breadcrumbs [aria-current="page"] {
  color: #000000;
  text-decoration: none;
}
#block-breadcrumbs [aria-current="page"]:hover {
  color: #ffffff;
}

.social-links-container {
  width: 100%;
  font-size: 0;
  margin: 0;
  padding: 0;
  line-height: 0;
  margin-bottom: 1rem;
  margin-left: -6px;
}
.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-darkerblue.svg');
}
.social-links-container a[href*="twitter.com"] {
  background-image: url('../img/social/twitter-darkerblue.svg');
}
.social-links-container a[href*="instagram.com"] {
  background-image: url('../img/social/instagram-darkerblue.svg');
}
.social-links-container a[href*="snapchat.com"] {
  background-image: url('../img/social/snapchat-darkerblue.svg');
}
.social-links-container a[href*="linkedin.com"] {
  background-image: url('../img/social/linkedin-darkerblue.svg');
}
.social-links-container a[href*="youtube.com"] {
  background-image: url('../img/social/youtube-darkerblue.svg');
}
.social-links-container a[href*="tiktok.com"] {
  background-image: url('../img/social/tiktok-darkerblue.svg');
}
.social-links-container a[href*="facebook.com"]:hover {
  background-image: url('../img/social/facebook-white.svg');
}
.social-links-container a[href*="twitter.com"]:hover {
  background-image: url('../img/social/twitter-white.svg');
}
.social-links-container a[href*="instagram.com"]:hover {
  background-image: url('../img/social/instagram-white.svg');
}
.social-links-container a[href*="snapchat.com"]:hover {
  background-image: url('../img/social/snapchat-white.svg');
}
.social-links-container a[href*="linkedin.com"]:hover {
  background-image: url('../img/social/linkedin-white.svg');
}
.social-links-container a[href*="youtube.com"]:hover {
  background-image: url('../img/social/youtube-white.svg');
}
.social-links-container a[href*="tiktok.com"]:hover {
  background-image: url('../img/social/tiktok-white.svg');
}
/* 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;
}
.event-card-summary a {
  color: #00598c;
}

.event-card-summary a:hover {
  color: white;
}
.column .event-card-summary {
  height: auto;
}
@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: #000;
  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;
}

.event-card {
  --category-color: #00ff87;
  /* 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 #005587 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 */
.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;
}
code,
pre {
  font-family: Hack,Consolas,Monaco,"Andale Mono",monospace;
  background: #f2f2f2;
  font-size: .875rem;
  line-height: 1.71429;
  white-space: pre-wrap;
}
pre {
  padding: 1rem;
  margin-bottom: 1rem;
}
/* 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;
}

[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);
  }
  .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: 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;
  }
}
@media (max-width: 767px) {
  .page-has-menu {
    display: block;
  }
  .page-menu {
    margin-top: 2rem;
  }
}
.custom-embed::before {
  content: 'Variable Width Custom Embed';
  background-color: #000;
  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';
}

.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: .5rem 1rem;
  display: inline-block;
  border-radius: 0.15rem;
  border-style: solid;
  border-width: 2px;
}

#block-system-messages {
  color: #000;
}
#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;
}

[data-ucla-node-id] > p:first-child {
  margin-top: 0;
}

/* 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"] [id^="block-ucla-registrar-sidebar"] {
  margin: 1rem 0;
  padding: 1rem;
  background-color: #ebebeb;
  color: #000;
}
[data-ucla-ref^="registrar"] [data-section-title^="Related "]:last-child {
  margin: 2rem 0 1rem 0;
  padding: 1rem;
  background-color: #ebebeb;
  color: #000;
}
[data-ucla-ref^="registrar"] [id^="block-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-registrar-sidebar"] h2,
[data-ucla-ref^="registrar"] [id^="block-ucla-registrar-sidebar"] h3 {
  font-size: 1.2rem;
  line-height: 1.4rem;
  margin-top: 1rem;
}
[data-ucla-ref^="registrar"] [id^="block-ucla-registrar-sidebar"] h2:first-child,
[data-ucla-ref^="registrar"] [id^="block-ucla-registrar-sidebar"] h3:first-child {
  margin-top: 0;
}
[data-ucla-ref^="registrar"] [data-section-title^="Related "]:last-child h2 + ul {
  margin-top: 1rem;
}
[data-ucla-ref^="registrar"] [id^="block-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;
}
[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--section {
    grid-row: 1/2;
    grid-column: 1/3;
  }
  [data-ucla-ref^="registrar"] [data-ucla-node-id="1"] .body--section + .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);
  }
  [data-ucla-ref^="registrar"] [data-ucla-node-id="1"] .body--section {
    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-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-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;
}
p.button {
  display: inline-block;
  margin-top: 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
.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;
}
.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;
}


/* 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: #005587;
  color: #ffe800;
}
table tr[id],
table .thead,
table thead {
  background-color: #005587;
  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 */


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

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

.card-service {
  border: 1px solid #eee;
  border-top: 6px solid #00598c;
  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: .75rem;
  height: .75rem;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-right: .5rem;
  background: #000000;
}
.card-service-summary {
  flex: 1;
}
.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-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 #00598c;
  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 {
  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;
  }
}


#node-preview-form-select {
  padding: 1rem 0;
  border-bottom: 1px solid #000;
}
#node-preview-form-select > * {
  display: none;
}
#node-preview-form-select .node-preview-backlink {
  display: inline-block;
  background-color: #000;
  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 #00598c;
  border-radius: 2px;
  margin: 2px;
}
.pager__item [aria-current="page"] {
  color: #757575;
  border-color: #757575;
}
.pager__item a:hover {
  background-color: #0079bf;
  border-color: #0079bf;
  color: #fff;
}
.pager__item a:active {
  background-color: #003b5c;
  border-color: #003b5c;
  color: #fff;
}
.pager__item--first,
.pager__item--last {
  display: none;
}

.js-pushstate-loading [data-ucla="registrar-courses"]>* {
  display: none;
}

.js-pushstate-loading [data-ucla="registrar-courses"]>.js-pushstate-loading-show {
  display: inherit;
}

.js-pushstate-loading [data-ucla="registrar-courses"]>.course-descriptions-search {
  display: grid;
}
/* #endregion */

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

/* #region Newlook migration CSS */
.newlook-only {
  display: none;
}
/* #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 */