/********* CUSTOM CSS BEGIN **********/

body {
  background-color: #fff;
  font-size: 15px;
}

body,
p,
.dc-chart,
.AnyTime-win,
.AnyTime-pkr .AnyTime-btn,
.AnyTime-pkr th.AnyTime-dow {
  color: #333;
  font-family: "Akkurat Pro Regular", Arial, Helvetica;
}

p {
  font-size: 1em;
}

.main-body > .row {
  background-color: #fff;
}

.quickfile .button-group-w-arrow.expanded .button.dropdown {
  border-left-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Akkurat Pro Bold", Arial, Helvetica;
}


.public-page.panel {
  border: none;
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  padding: 0;
}

.ui-widget textarea,
button,
.button,
.label,
.ui-tabs,
ul.menu li > a,
.menu li.active > a:first-child:not(.button),
.menu, body,
.tabs li > a, .tabs .tab-title > a {
  font-family: "Akkurat Pro Regular", Arial, Helvetica;
}

.button,
button {
  background: rgb(78, 42, 132);
}

.button.secondary,
button.secondary {
  color: rgb(78, 42, 132);
  border: 1px solid rgb(78, 42, 132);
}

/*.top-bar,*/
body > header > .masthead {
  background-color: rgb(78, 42, 132);
}

#admin-footer {
  background-color: rgb(78, 42, 132);
  color: #fff;
}

/* admin forms */
.admin-side i.fa-arrows {
  color: rgb(78, 42, 132);
}

.admin-side .admin-actions .primary.toggle-button,
.admin-side .admin-actions .primary.toggle-button-large {
  background-color: rgb(78, 42, 132);
  color: white;
}

.admin-side .admin-actions .secondary.toggle-button,
.admin-side .admin-actions .secondary.toggle-button-large,
.admin-side form.new_saved_email .selectize-input {
  background-color: transparent;
  border: 1px solid rgb(78, 42, 132);
  color: rgb(78, 42, 132);
}
/* admin forms end */

ul.menu li {
  background-color: transparent;
}

/* Header Nav */

#site-top-bar .menu-icon a span::after {
  box-shadow: 0 0px 0 1px #fff, 0 7px 0 1px #fff, 0 14px 0 1px #fff;
}

.main-nav,
.main-nav.top-bar,
.main-nav.top-bar ul,
.main-nav .top-bar,
.main-nav .top-bar ul,
#site-top-bar a,
#site-top-bar .menu-icon a,
#site-top-bar ul.menu .dropdown li:not(.active) > a:not(.button) {
  background-color: rgb(78, 42, 132);
  color: #fff;
}

#site-top-bar li.is-dropdown-submenu-parent.is-active > a {
  background-color: #401f68;
  color: #fff;
}

#site-top-bar {
  background-color: transparent;
}

#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #fff transparent transparent;
}

#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after,
#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a:focus::after,
#site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent.is-active > a::after {
  border-color: #fff transparent transparent;
}

#site-top-bar ul.menu .dropdown li:not(.active):hover > a:not(.button)
#site-top-bar ul.menu ul li:hover > a,
#site-top-bar ul.menu li a:not(.button):hover,
#site-top-bar ul.menu li.active a:not(.button):hover,
#site-top-bar ul.menu li.active a:not(.button) {
  background-color: #401f68;
  color: #fff;
}
/* User Top Nav */

.user-side #site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: #fff transparent transparent;
}

.user-side #site-top-bar .dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after {
  border-color: #fff transparent transparent;
}

.user-side .main-nav,
.user-side .main-nav .top-bar,
.user-side .main-nav .top-bar ul,
.user-side #site-top-bar a {
  background-color: rgb(78, 42, 132);
  color: #fff;
}

.user-side #site-top-bar ul.menu .dropdown li:not(.active):hover > a:not(.button)
.user-side #site-top-bar ul.menu ul li:hover > a,
.user-side #site-top-bar ul.menu li a:not(.button):hover,
.user-side #site-top-bar ul.menu li.active a:not(.button):hover,
.user-side #site-top-bar ul.menu li.active a:not(.button) {
  background-color: #401f68;
  color: #fff;
}

.user-side #site-top-bar li.is-dropdown-submenu-parent.is-active > a {
  background-color: #401f68;
  color: #fff;
}

/* Admin Nav */
/*#admin-nav-bar li.is-submenu-item.is-dropdown-submenu-item.is-dropdown-submenu-parent > a:after {
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgb(78, 42, 132);
}

#admin-nav-bar li.is-submenu-item.is-dropdown-submenu-item.is-dropdown-submenu-parent > a:hover::after {
  border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) rgb(85, 85, 85);
}*/

/* User Nav */
/*.icon-bar a,
.icon-bar a i,
.icon-bar a span.label,
.nav-wrapper.user,
.user > .menu,
.user > .menu a,
.user > .menu .menu-icon a,
.user > .menu li a:not(.button),
.user.expanded .menu .title-area,
.program-dropdown-selector .dropdown.menu .is-active > a,
.user.menu {
  background-color: rgb(255, 255, 255);
  color: rgb(78, 42, 132);
}
*/
/* Use top nav color if there is no public nav on user home */
.nav-wrapper.user.no-public-nav,
.nav-wrapper.user.no-public-nav .menu.cell,
.nav-wrapper.user.no-public-nav .user ul.menu li,
.nav-wrapper.user.no-public-nav .user ul.menu li.is-submenu-item.is-active,
.nav-wrapper.user.no-public-nav .user ul.menu li.is-submenu-item.is-active > a[role="menuitem"] {
  background-color: rgb(78, 42, 132);
  color: #fff;
}

.nav-wrapper.user.no-public-nav .user ul.menu li.menu-text,
.nav-wrapper.user.no-public-nav .user ul.menu li > a {
  color: #fff;
}

.top-bar.user .menu-icon a span::after {
  box-shadow: 0 0px 0 1px rgb(78, 42, 132), 0 7px 0 1px rgb(78, 42, 132), 0 14px 0 1px rgb(78, 42, 132);
}

.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a:hover::after, /* when hovering */
.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-right.is-active > a::after /* when clicked */ {
  border-color: transparent transparent transparent #fff;
}

.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a:hover::after, /* when hovering */
.nav-wrapper.user.no-public-nav .user .is-dropdown-submenu .is-dropdown-submenu-parent.opens-left.is-active > a::after /* when clicked */ {
  border-color: transparent #fff transparent transparent;
}

/*.user .menu .icon-bar a:hover,
.user .menu .icon-bar a:hover span.label,
.user .menu .icon-bar a.active,
.user .menu .icon-bar a.active i,
.user .menu .icon-bar a.active span.label,
.user .menu ul li:hover > a,
.user .menu ul li:hover > a i,
.user .menu li a:not(.button):hover,
.user .menu li.active a:not(.button):hover,
.user .menu li.active a:not(.button) {
  background-color: rgb(255, 255, 255);
  color: rgb(131, 110, 170);
}
*/

.top-bar .is-dropdown-submenu > .is-dropdown-submenu-parent.opens-left > a::after {
  border-color: transparent #fff transparent transparent;
}

.top-bar .is-dropdown-submenu > .is-dropdown-submenu-parent.opens-right > a::after {
  border-color: transparent transparent transparent #fff;
}

.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a::after,
#public-nav ul.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
/*  border-color: rgb(78, 42, 132) transparent transparent;*/
  border-top-style: none;
}

/* remove the dropdown arrows for admin icon bar */
.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a.active::after,
.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a:hover::after,
.icon-bar.dropdown.menu > li.is-dropdown-submenu-parent > a:focus::after {
/*  border-color: rgb(131, 110, 170) transparent transparent;*/
  border-top-style: none;
}



/* Public Nav */

#public-nav .menu li a:not(.button),
#public-nav .menu li > a,
#public-nav {
  background-color: transparent;
  color: rgb(78, 42, 132);
}

#public-nav {
  background-color: rgb(255, 255, 255);
}

#public-nav ul.menu li:hover,
#public-nav ul.menu li:hover > a,
#public-nav ul.menu li a:not(.button):hover,
#public-nav ul.menu li.active,
#public-nav ul.menu li.active a:not(.button):hover,
#public-nav ul.menu li.active a:not(.button) {
  background-color: rgb(255, 255, 255);
  color: rgb(131, 110, 170);
}

#public-nav ul.dropdown.menu li.is-submenu-item a {
  background-color: #fff;
  color: rgb(78, 42, 132);
}

#public-nav ul.dropdown.menu li.is-submenu-item a:hover {
  color: rgb(85, 85, 85);
}

/* Side Nav */
.icon-bar .submenu a,
.icon-bar .submenu a i,
.is-dropdown-submenu {
/*  background-color: #fff; */
  color: rgb(78, 42, 132);
}


.sidenav .menu li a {
  color: black;
}

.sidenav .menu li.active a {
  color: rgb(78, 42, 132);
  font-weight: bold;
}

.sidenav .menu li:hover a,
.sidenav .menu li:focus a,
.sidenav .menu li a:hover,
.sidenav .menu li a:not(.button):hover {
  font-weight: bold;
  color: rgb(78, 42, 132);
}

.sidenav .menu li.active:hover a,
.sidenav .menu li.active:focus a,
.sidenav .menu li.active a:hover,
.sidenav .menu li.active a:not(.button):hover {
  /*background-color: rgb(85, 85, 85);*/
  color: rgb(85, 85, 85);
}


ul.dropdown.menu li ul.submenu button:hover,
ul.dropdown.menu li ul.submenu a:hover,
#admin-nav-bar ul.dropdown.menu li ul.submenu li.active a,
#admin-nav-bar ul.dropdown.menu li ul.submenu li a:hover {
  background-color: rgb(78, 42, 132);
  color: #fff;
}

.items-toolbar ul.dropdown.menu li ul.submenu button:hover,
.items-toolbar ul.dropdown.menu li ul.submenu a:hover,
.items-toolbar ul.dropdown.menu li ul.submenu li a:hover {
  background-color: rgb(78, 42, 132);
  color: white;
}

.items-toolbar .actions .submenu .fa,
.items-toolbar .actions .submenu .far,
.items-toolbar .actions .submenu .fas,
.items-toolbar .actions .submenu .fal,
.items-toolbar .actions .submenu .fab {
  color: rgb(78, 42, 132);
}

.items-toolbar ul.dropdown.menu li ul.submenu button:hover i,
.items-toolbar ul.dropdown.menu li ul.submenu a:hover i {
  color: white;
}

/* User side nav submenu triangle */
.sidenav .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a::after {
  border-color: black transparent transparent;
  /*color: black;*/
}

.sidenav .accordion-menu .is-accordion-submenu-parent:not(.has-submenu-toggle) > a:hover::after {
  border-color: rgb(78, 42, 132) transparent transparent;
}

.thredded--post .thredded--post--content a,
.thredded--preview-area--post.thredded--post--content a {
  color: rgb(78, 42, 132);
}

.thredded--pending-moderation .thredded--moderation-navigation--pending a, .thredded--moderation-history .thredded--moderation-navigation--history a, .thredded--moderation-users .thredded--moderation-navigation--users a, .thredded--moderation-user .thredded--moderation-navigation--users a, .thredded--moderation-activity .thredded--moderation-navigation--activity a, .thredded--moderation-navigation--item a:active, .thredded--navigation-breadcrumbs a:active, .thredded--user-navigation--item a:focus, .thredded--moderation-navigation--item a:focus, .thredded--navigation-breadcrumbs a:focus, .thredded--moderation-navigation--item a:hover, .thredded--topics--title, .thredded--topics--updated-by a, .thredded--navigation-breadcrumbs a, .thredded--post--user a, .thredded--topic-header--started-by a {
  color: rgb(78, 42, 132) ;
  background-color: rgb(255, 255, 255);
}

.thredded--user-navigation--item a:hover, .thredded--user-navigation--item a:focus {
  background-color: transparent;
  color: rgb(85, 85, 85);
}

.thredded--user-navigation--item a, .thredded--user-navigation--item.thredded--is-current a {
  color: rgb(78, 42, 132) ;
}

header.thredded--messageboard--header .thredded--messageboard--title-no-image,
.community-topic-header-no-image {
  background-color: rgb(78, 42, 132);
  color: #fff;
}

.document-card-view header.document-card-header div.document-card-header-no-image {
  background-color: rgb(78, 42, 132);
  color: white;
}

.document-card-view header.document-card-header .title-text a {
    color: #fff;
  }
}

.thredded--topics--title a {
  color: rgb(78, 42, 132) ;
}

.thredded--topics--title a:hover,
.thredded--topics--updated-by a:hover, .thredded--navigation-breadcrumbs .active a, .thredded--navigation-breadcrumbs a:hover, .thredded--user-navigation--item a:hover, .thredded--post--user a:hover, .thredded--topic-header--started-by a:hover, #thredded--container a:hover {
  color: rgb(85, 85, 85);
}

#thredded--container a.button:hover {
  color: rgb(78, 42, 132);
}

/* Regular buttons */
.AnyTime-pkr th.AnyTime-dow,
.ui-widget-content a.button.secondary,
button.secondary:not(.hollow),
.button.secondary:not(.hollow) {
  color: rgb(78, 42, 132);
  border: 1px solid rgb(78, 42, 132);
  /*background-color: #ddd;*/
  background-color: transparent;
}

.submenu button.secondary:not(.hollow),
.submenu .button.secondary:not(.hollow),
.submenu .button.alert {
  border: none;
}

button.arrow-only.secondary:not(.hollow)::after,
.button.arrow-only.secondary:not(.hollow)::after {
  border-top-color: rgb(85, 85, 85);
}

.dropdown.menu .is-active > a.button.secondary,
.ui-widget-content a.button.secondary:hover,
ul.pagination li.current a:hover, ul.pagination li.current button:hover,
.sub-nav dt.active a:hover, .sub-nav dd.active a:hover, .sub-nav li.active a:hover,
.grid-cell .actions a:hover,
.button.secondary:not(.hollow):hover,
.button.secondary:not(.hollow):focus {
  color: white;
  background-color: rgb(78, 42, 132);
}

/* For secondary dropdown menu buttons */
.dropdown.menu > li.is-dropdown-submenu-parent > a.secondary::after {
  border-color: rgb(85, 85, 85) transparent transparent;
}

.dropdown.menu .is-active > a.button.secondary::after,
.dropdown.menu > li.is-dropdown-submenu-parent.is-active > a.secondary::after,
.dropdown.menu > li.is-dropdown-submenu-parent > a.secondary:not(.hollow):focus::after,
.dropdown.menu > li.is-dropdown-submenu-parent > a.secondary:not(.hollow):hover::after {
  border-color: rgb(78, 42, 132) transparent transparent;
}

/* Inverted buttons */
button.inverted,
.button.inverted {
  background-color: rgb(85, 85, 85);
  color: #ddd;
}

button.inverted:hover,
.button.inverted:hover {
  background-color: rgb(85, 85, 85);
  color: #ddd;
}

/* Transparent buttons */
.ui-widget-content a.button.transparent,
button.transparent,
.button.transparent,
button.transparent:focus {
  color: rgb(85, 85, 85);
}

.ui-widget-content a.button.transparent:hover,
button.transparent:hover,
.button.transparent:hover {
  color: rgb(78, 42, 132);
}

/* Trash icon to remove fields */
.button.transparent.remove_fields,
.button.transparent.delete-row {
  color: rgb(78, 42, 132);
}

button.arrow-only.transparent:not(.hollow)::after,
.button.arrow-only.transparent:not(.hollow)::after {
  border-top-color: rgb(85, 85, 85);
}

.ui-widget-content a.button.transparent:hover,
.button.transparent:not(.hollow):hover,
.button.transparent:not(.hollow):focus {
  color: rgb(85, 85, 85);
}

.sort-links .button.active,
.pagination .current,
ul.pagination li.current a,
ul.pagination li.current button {
  color: rgb(78, 42, 132);
  background-color: #ccc;
}

a.button.disabled {
  color: black;
}


button.menu-icon,
button.menu-icon:not(.hollow):not(.transparent):hover,
button.menu-icon:not(.hollow):not(.transparent):focus {
  background: transparent;
}


.button.secondary:not(.hollow):hover p,
.button.secondary:not(.hollow):focus p {
  color: rgb(78, 42, 132);
}

/* Primary buttons */
a.button,
#skip-links a,
#ui-datepicker-div .ui-datepicker-current-day a,
.AnyTime-pkr .AnyTime-cur-btn,
.label,
.selectize-dropdown .active,
.selectize-dropdown .active.create,
button,
.button,
button.primary,
.button.primary,
.pagination-container .current,
.thredded--button, .thredded--form--submit {
  color: white;
  background-color: rgb(78, 42, 132);
}

ul.dropdown a.button.primary::after {
  border-color: #fff transparent transparent;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a::after {
  border-color: white transparent transparent;
}

.dropdown.menu > li.is-dropdown-submenu-parent > a.disabled::after {
  border-color: black transparent transparent;
}

.dropdown.menu > li.is-dropdown-submenu-parent.is-active > a::after {
  border-color: rgb(78, 42, 132) transparent transparent;
}

.button.primary .fa, button.primary .far, button.primary .fas, button.primary .fal, button.primary .fab,
button.primary .fa, button.primary .far, button.primary .fas, button.primary .fal, button.primary .fab {
  color: #fff;
}

.ui-widget-content a.button:hover,
#ui-datepicker-div .ui-datepicker-current-day,
#ui-datepicker-div button,
.AnyTime-pkr .AnyTime-cur-btn.ui-state-focus,
.sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a,
button:hover,
button:focus,
.button:hover,
.button:focus,
button.primary:hover,
.button.primary:hover,
/*button:not(.hollow):not(.transparent):hover,
button:not(.hollow):not(.transparent):focus,
.button:not(.hollow):not(.transparent):hover,
.button:not(.hollow):not(.transparent):focus,*/
button.primary:focus,
.button.primary:focus,
.thredded--button:hover, .thredded--form--submit:hover, .thredded--button:focus, .thredded--form--submit:focus {
  color: white;
  background-color: rgb(85, 85, 85);
}

.slick-dots .button:not(.hollow):not(.transparent):hover,
.slick-dots button:not(.hollow):not(.transparent):hover,
.slick-dots .button:not(.hollow):not(.transparent):focus,
.slick-dots button:not(.hollow):not(.transparent):focus {
  background-color: transparent;
}

.date-badge,
a,
a.remove_fields,
ul.pagination li a,
ul.pagination li button,
.sp-cancel {
  color: rgb(78, 42, 132);
}

#ui-datepicker-div .ui-datepicker-current-day,
.menu li a:not(.button):hover,
a:hover, a:focus {
  color: rgb(85, 85, 85);
}

.criterion-data .read-more,
.criterion-data .read-less {
  color: white;
  background-color: rgb(78, 42, 132);
}

button[disabled], .button[disabled], button.disabled, .button.disabled {
  background: #aaa;
  border-color: #bbb;
}

button[disabled]:hover, .button[disabled]:hover, button.disabled:hover, .button.disabled:hover,
button[disabled]:focus, .button[disabled]:focus, button.disabled:focus, .button.disabled:focus {
  background: #999;
  border-color: #aaa;
}

.tabs-title > a:focus, .tabs-title > a[aria-selected='true'],
.tabs-title > a, tabs-title-alt > a:focus, .tabs-title-alt > a[aria-selected='true'], .tabs-title-alt > a,
.match {
  color: #333;
}

.toggle-button {
  border: 1px solid rgb(78, 42, 132);
}


.fc-state-default {
  color: #333 !important;
}

.fc-state-default:hover {
  background: inherit;
}

.slick-slide:focus {
  outline: none;
  background: #181818;
}

/*********************************
 * Banner
 *********************************/

.flex-video { padding-top: 0; padding-bottom: 56.25%; }



/*********************************
 * Hopscotch
 *********************************/

.hopscotch-content {
  color: #333;
  font-family: "Akkurat Pro Regular", Arial, Helvetica;
}

div.hopscotch-bubble .hopscotch-nav-button.next,
div.hopscotch-bubble .hopscotch-nav-button.prev {
  color: #fff;
  background: rgb(78, 42, 132);
  border: none;
}

div.hopscotch-bubble .hopscotch-nav-button.next:hover,
div.hopscotch-bubble .hopscotch-nav-button.prev:hover {
  color: rgb(211, 204, 204);
  background: rgb(85, 85, 85);
}

div.hopscotch-bubble {
  border-radius: $global-radius;
  border-color: rgb(78, 42, 132);
}

div.hopscotch-bubble .hopscotch-bubble-number {
  background: rgb(78, 42, 132);
  color: $white;
  border-radius: 1000px;
  padding-right: 0px;
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
  border-top-color: rgb(78, 42, 132);
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
  border-bottom-color: rgb(78, 42, 132);
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
  border-left-color: rgb(78, 42, 132);
}

div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
  border-right-color: rgb(78, 42, 132);
}

#thredded--container p,
#thredded--container a,
#thredded--container label,
#thredded--container time,
#thredded--container input,
#thredded--container {
  font-family: "Akkurat Pro Regular", Arial, Helvetica !important;
}

/********* CUSTOM CSS END **********/

@font-face {
  font-family: "Poppins Light";
  src: url("https://common.northwestern.edu/v8/css/fonts/Poppins-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal; }
@font-face {
  font-family: "Poppins Bold";
  src: url("https://common.northwestern.edu/v8/css/fonts/Poppins-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal; }
@font-face {
  font-family: "Poppins Extra Bold";
  src: url("https://common.northwestern.edu/v8/css/fonts/Poppins-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal; }
@font-face {
  font-family: "Poppins Extra Light";
  src: url("https://common.northwestern.edu/v8/css/fonts/Poppins-ExtraLight.woff") format("woff");
  font-weight: 100;
  font-style: normal; }
body.public-side .button {
  border-radius: 0;
  box-sizing: border-box;
  border: 2px solid #4e2a84;
  padding-top: 9.2px;
  padding-bottom: 9.2px;
  font: 16px "Akkurat Pro Bold";
  color: #fff;
  background: #4e2a84;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 0.5em;
  padding: 0.8em 1em 0.7em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  min-width: 165px;
}
body.public-side .button:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #b6acd1;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
body.public-side .button:active:before,
body.public-side .button:focus:before,
body.public-side .button:hover:before,
body.public-side .button:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

.close-button {
  color: white;
}
body.public-side.nnmp h2, body.public-side.global h2, body.public-side.next h2, body.public-side.dinnerwithtwelve h2, body.public-side.affinity h2 {
    font-family: "Poppins Extra Light", Tahoma, sans-serif;
}
body.public-side.nnmp h3, body.public-side.global h3, body.public-side.next h3, body.public-side.dinnerwithtwelve h3, body.public-side.affinity h3 {
    font: 34px/1.2em "Poppins Bold", Impact, sans-serif;
    color: #4e2a84;
    margin-bottom: .5rem;
    font-weight: 700 !important;
}
body.public-side.nnmp h4, body.public-side.global h4, body.public-side.next h4, body.public-side.dinnerwithtwelve h4, body.public-side.affinity h4 {
    font: 26px/1.2em "Akkurat Pro Regular", Arial, sans-serif;
    color: #716c6b;
    margin-bottom: 1rem;
}
body.public-side.nnmp h5, body.public-side.global h5, body.public-side.next h5, body.public-side.dinnerwithtwelve h5, body.public-side.affinity h5 {
    font: 21px/1.3em "Akkurat Pro Regular", Arial, sans-serif;
    color: #4e2a84;
    margin-bottom: 1rem;
}
body.public-side.nnmp h6, body.public-side.global h6, body.public-side.next h6, body.public-side.dinnerwithtwelve h6, body.public-side.affinity h6 {
    font: 18px/1.3em "Poppins Bold", Impact, sans-serif;
    color: #716c6b;
    margin-bottom: 1rem;
}
body.public-side a, body.public-side button, body.public-side .button,
body.public-side h1, body.public-side h2, body.public-side h3, body.public-side h4, body.public-side h5, body.public-side h6 {
  font-weight: normal !important;
}
#user-sidenav .menu>li>a {
padding-left: 0;
padding-right: 0;
}
body.public-side.nnmp nav#public-nav, body.public-side.global nav#public-nav, body.public-side.next nav#public-nav, body.public-side.dinnerwithtwelve nav#public-nav, body.public-side.affinity nav#public-nav {
    background-color: #4e2a84
}
body.public-side.nnmp #public-nav ul, body.public-side.global #public-nav ul, body.public-side.next #public-nav ul, body.public-side.dinnerwithtwelve #public-nav ul, body.public-side.affinity #public-nav ul {
    background-color: white;
    margin: 0 auto;
min-height: 60px;
}
body.public-side.nnmp #public-nav ul li a, body.public-side.global #public-nav ul li a, body.public-side.next #public-nav ul li a, body.public-side.dinnerwithtwelve #public-nav ul li a, body.public-side.affinity #public-nav ul li a {
    color: #4e2a84 !important;
    font-weight: 400;
}
body.public-side.nnmp #public-nav ul li a:hover, body.public-side.global #public-nav ul li a:hover, body.public-side.next #public-nav ul li a:hover, body.public-side.dinnerwithtwelve #public-nav ul li a:hover, body.public-side.affinity #public-nav ul li a:hover {
    background-color: #836eaa !important;
    color: white !important;
}
body.public-side.nnmp #public-nav ul li:hover, body.public-side.global #public-nav ul li:hover, body.public-side.next #public-nav ul li:hover, body.public-side.dinnerwithtwelve #public-nav ul li:hover, body.public-side.affinity #public-nav ul li:hover {
    background-color: #836eaa !important;
}
body.public-side.nnmp #public-nav ul li:hover a, body.public-side.global #public-nav ul li:hover a, body.public-side.next #public-nav ul li:hover a, body.public-side.dinnerwithtwelve #public-nav ul li:hover a, body.public-side.affinity #public-nav ul li:hover a {
    background-color: #836eaa !important;
    color: white !important;
}
body.public-side.nnmp #public-nav ul li.active, body.public-side.global #public-nav ul li.active, body.public-side.next #public-nav ul li.active, body.public-side.dinnerwithtwelve #public-nav ul li.active, body.public-side.affinity #public-nav ul li.active {
    background-color: #836eaa !important;
}
body.public-side.nnmp #public-nav ul li.active a, body.public-side.global #public-nav ul li.active a, body.public-side.next #public-nav ul li.active a, body.public-side.dinnerwithtwelve #public-nav ul li.active a, body.public-side.affinity #public-nav ul li.active a {
    background-color: #836eaa !important;
    color: white !important;
}
body.public-side .masthead .grid-container {
    margin: 0 auto; 
}
.global .main-body .banner,
.nnmp .main-body .banner,
.next .main-body .banner,
.dinnerwithtwelve .main-body .banner {
    display: none;
}
.main-body .grid-container{
    max-width: 1120px;
}
#public-nav .grid-container, .grid-container .top-bar, body>header>.masthead .grid-container {
    max-width: 1152px;
}
body.public-side .hero {
    width: 100%;
    display: table;
    margin-bottom: 60px;
}
body.public-side .hero.news-item .hero-img{
    vertical-align: bottom!important;
    padding-bottom: 2.5rem;
}
body.public-side .hero-img .contain-1120 {
    margin: 0 auto;
    max-width: 1120px;
    box-sizing: border-box;
    position: relative;
}
body.public-side .hero .hero-img {
    height: 600px;
    text-align: center;
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    position: relative;
    padding: 0 1rem;
}
body.public-side .hero p {
    font: 60px/1.2em "Poppins Bold", Impact, sans-serif;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    margin: 0 0 1rem;
    position: relative;
    box-sizing: border-box;
}
body.public-side .hero p.heroProse {
    font: 24px "Akkurat Pro Regular",Arial,sans-serif;
    color: #fff;
    text-shadow: 1px 1px 0px #000;
}
body.public-side .hero .hero-img:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: -moz-linear-gradient(top, transparent 0, rgba(0, 0, 0, .45) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, .45)));
    background: -webkit-linear-gradient(top, transparent 0, rgba(0, 0, 0, .45) 100%);
    background: -o-linear-gradient(top, transparent 0, rgba(0, 0, 0, .45) 100%);
    background: -ms-linear-gradient(top, transparent 0, rgba(0, 0, 0, .45) 100%);
    background: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .45) 100%);
}
body.public-side .hero .mobile-hero-txt {
    display: none;
}
@media screen and (max-width: 1440px){
body.public-side .hero{
    width: 100vw;
    margin-left: -16px;
}
body.public-side .grid-x{
    overflow-x: hidden;
}
}
@media (max-width: 1100px) and (min-width: 769px){
body.public-side .hero .hero-img {
    height: 400px;
}
}
@media screen and (max-width: 768px){
body.public-side .hero .mobile-hero-txt{
    display: block;
    text-align: center;
    background: #342f2e;
    padding: 2rem 1em;
}
body.public-side .hero .mobile-hero-txt p{
    font-size: 48px;
}
body.public-side .hero .mobile-hero-txt p.heroProse{
    font-size: 26px;
}
body.public-side .hero-img .contain-1120 {
    display: none;
}
body.public-side .hero .hero-img{
    display: block;
    height: 300px;
}
body.public-side .hero .hero-img:before {
    display: none;
}
}
body.public-side .main-body .content-block ul {
padding-left: 16px;
margin-top: 16px;
margin-bottom: 16px;
}
body.public-side .main-body .content-block ul li {
    list-style: none;
    background: url(https://common.northwestern.edu/v8/css/images/icons/bullet.png) 0 .5em no-repeat;
    padding: 0 0 .5em 1em;
}
section.stories ul {
padding-left: 16px;
margin-top: 16px;
margin-bottom: 16px;
}
section.stories ul li {
    list-style: none;
    background: url(https://common.northwestern.edu/v8/css/images/icons/bullet.png) 0 .5em no-repeat;
    padding: 0 0 .5em 1em;
}
.public-side .medium-3.large-2.cell.show-for-medium {
  margin: 0px;
  padding: 0px;
  width: 23%;
}

.public-side .grid-x.grid-margin-x {
  display: block;
}

.public-side .cell.medium-8.large-9 {
  width: 100%;
}

.public-side .cell.medium-4.large-3 {
  display: none;
}

.public-side .sidenav .menu.vertical li {
  margin: 0px;
  padding: 0px;
  background: none;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f0f0f0;
}

.public-side .sidenav .menu.vertical li:last-of-type {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: none;
}

.public-side .sidenav .menu.vertical li a {
  margin: 0px;
  padding: 0px;
  background: none;
}

.public-side .header-wrapper h1 {
  font-family: "Poppins Extra Light", Tahoma, sans-serif;
  font-size: 46px;
  line-height: 1.2em;
  color: #4e2a84;
  margin-bottom: 1rem;
}

.public-side section.stories .header-wrapper {
  display: none;
}

.public-side section.stories .description.story-description h2 {
  font-family: "Poppins Extra Light", Tahoma, sans-serif;
  font-size: 46px;
  line-height: 1.2em;
  color: #4e2a84;
  margin-bottom: 1rem;
}

.public-side .large-centered.cell.main-section.off-canvas-content.medium-9.large-10 {
  width: 77%;
  box-sizing: border-box;
  padding: 0px;
  padding-left: 2rem;
}

.public-side .cell.medium-8 {
  width: 100%;
}

.public-side .cell.medium-8.large-9 {
    margin: 0px;
}

.public-side .grid-x.grid-margin-x {
    margin: 0px;
}

.public-side .q-and-a ol li {
    font-family: "Akkurat Pro Bold";
    color: #4e2a84;
    margin: 0px;
    padding: 0px;
    font-size: 18px;
}

.public-side .q-and-a ol {
    font-family: "Akkurat Pro Bold";
    color: #4e2a84;
}
a.button.secondary, .button.secondary, button.secondary, input[type="submit"].secondary{
  background-color: #dddddd;
  color: #555555;
}

a.button.secondary:hover, .button.secondary:hover, button.secondary:hover, input[type="submit"].secondary:hover {
  background-color: #cccccc;
  color: #4E2A84;
}

.button, .button.primary, button, input[type="submit"] {
  background-color: #4E2A84;
  color: #ffffff;
}

.button:hover, .button.primary:hover, button:hover, input[type="submit"]:hover {
  background-color: #555555;
  color: #D3CCCC;
}



.content-block .event-card {
  font-size: 0.8em;
}