@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400..900;1,400..900&family=Roboto+Serif:ital,opsz,wght@0,8..144,400..900;1,8..144,400..900&family=Roboto+Slab:wght@400..900&family=Roboto:ital,wght@0,400..900;1,400..900&display=swap");
:root {
  --dark: #051946;
  --bs-dark: var(--dark);
  --bs-dark-rgb: 5, 25, 70;
  --bs-body-bg: var(--bs-light);
  --light: var(--bs-light);
  --160-red: #d83b18;
  --danger: #d83b18;
  --red: #d83b18;
  --bs-danger: #d83b18;
  --medium-blue: #00458d;
  --160-dark-blue: #101833;
  --160-penn-college-blue: #214a9f;
  --lion-blue: #214a9f;
  --mid-blue: #214a9f;
  --160-medium-blue: #0072ce;
  --blue: #0072ce;
  --blue: #214a9f;
  --primary: --blue;
  --160-light-blue: #e3f2fa;
  --lion-light-blue: #93bfe6;
  --light-blue: color-mix(in srgb, var(--lion-light-blue), #fff 75%);
  --160-green: #48b85c;
  --success: #48b85c;
  --green: #48b85c;
  --dark-gray: #5c5c5c;
  --medium-gray: #e0dfdf;
  --light-gray: #f7f7f7;
  --white: #ffffff;
  --black: #000000;
  --bs-body-color-rgb: 6, 12, 35;
  --bs-body-color: rgba(6, 12, 36, 1) !important;
  --navbar-height: 6.5rem;
  --bs-grid-item-min: 18rem;
}
/* 
1.Typography
2.Buttons 
3.Navbar 
4.CSS Grid
99.Misc
*/
/* 1.Typography */
/*h2,h3 { font-family: 'Roboto Slab'; color:var(--medium-blue);}*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-weight: 900;
}
h1, .h1 {
  font-size: 4rem;
}
h2, .h2 {
  font-size: 3rem;
}
h3, .h3 {
  font-size: 2.01rem;
  text-transform: none;
  letter-spacing: normal;
}
h4, .h4 {
  font-size: 1.99rem;
}
h5, .h5 {
  font-size: 1.5rem;
}
h6, .h6 {
  font-size: 1rem;
}
.smaller {
  font-size: .875em;
}
.small, small {
  font-size: .75em;
}
p, li {
   /* max-width: 65rem;*/
}
/* 2.Buttons */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: 0.5rem;
  display: inline-flex;
}
.btn-group-lg > .btn, .btn-lg {
  --bs-btn-padding-y: 0.8rem;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 0.35rem;
}
.btn-link.btn-icon-right-arrow {
  text-decoration: none;
  --bs-btn-bg: rgba(0, 0, 0, .0375);
  --bs-btn-hover-bg: rgb(0, 0, 0, .075)
}
.btn-icon-right-arrow::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Pro';
  margin: 0 0 0 .75em;
  transition: transform .35s
}
.btn-icon-right-arrow:empty {
    border-radius: 1.5rem;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
}
.btn-icon-right-arrow:empty::after {
    margin:0;
}
.btn-icon-right-arrow:hover::after {
    transform: translateX(.375em)
}
/*.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}*/
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--lion-blue);
    --bs-btn-border-color: var(--lion-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(var(--lion-blue), var(--black) 20%);
    --bs-btn-hover-border-color: color-mix(var(--lion-blue), var(--black) 20%);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(var(--lion-blue), var(--black) 20%);
    --bs-btn-active-border-color: color-mix(var(--lion-blue), var(--black) 20%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: color-mix(var(--lion-blue), var(--white) 20%);
    --bs-btn-disabled-border-color: color-mix(var(--lion-blue), var(--white) 20%);
}
.btn-dark {
  --bs-btn-bg: var(--dark);
  --bs-btn-hover-bg: color-mix(in srgb, var(--dark), black 50%);
  --bs-btn-active-bg: color-mix(in srgb, var(--dark), black 75%)
}
.btn-outline-dark {
    --bs-btn-color: var(--dark);
    --bs-btn-border-color: var(--dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dark);
    --bs-btn-hover-border-color: var(--dark);
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dark);
    --bs-btn-active-border-color: var(--dark);
}
.btn-action {
    --bs-btn-color: rgba(0, 0, 0, .55);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: rgba(0, 0, 0, .7);
    --bs-btn-hover-bg: rgba(0, 0, 0, .1);
    --bs-btn-hover-border-color: rgba(0, 0, 0, .1);
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: rgba(0, 0, 0, .8);
    --bs-btn-active-bg: rgba(0, 0, 0, .1);
    --bs-btn-active-border-color: rgba(0, 0, 0, .1);
    --bs-btn-border-radius: 1rem;
    --bs-btn-bg: rgba(0, 0, 0, .05);
    padding: .35rem .75rem;
    transition: all .25s;
}
.accordion {
  --bs-accordion-btn-color: var(--blue);
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-active-bg: rgba(0, 1, 2, .025);
  & .accordion-button {
    font-weight: 600;
    font-family: 'Roboto';
    font-size: 1.15rem;
  }
  & .accordion-item.show {
    background-color: var(--bs-accordion-active-bg);
    border: var(--bs-accordion-border-width)
  }
}
div#table_of_contents {
    text-align: right;
    display: block;
    height: 0;
    z-index: 1;
    position: sticky;
    top:  var(--navbar-height);
    padding: 0 1rem;
  & .btn-icon-right-arrow {
    /*transform: translateY(-50%);*/
  }
  & .btn-icon-right-arrow::after {
    content: '\f078';
    border:0; 
  }
  & .btn-icon-right-arrow:hover::after {
    transform: translate(0,.25em) 
  }
}
#main-content{ display: inline-block;}
.xxpage-anchor{ position:relative; margin-top: calc(var(--navbar-height) * -1);}
.xxpage-anchor:before/*, #main-content:before*/{ content:''; width:1rem; bottom:0; height: var(--navbar-height); display: block;}
/* 3.Navbar */
header {
  position: sticky;
  top: -4.5rem;
  z-index: 502;
  & .navbar-brand {
    width: 15rem;
  }
  & #navbar-main {
    padding: 0;
    height: var(--navbar-height);
    transition: all .7s ease-out !important;
  }
}
header { transition: top .2s;}
body.scrolldown  header { top: calc(-4.5rem - var(--navbar-height));}
@media (max-width: 88rem) {
  .main-menu > .nav-item:nth-child(7) {
    display: none
  }
}
@media (max-width: 80rem) {
  .main-menu > .nav-item:nth-child(6) {
    display: none
  }
}
@media (max-width: 70rem) {
  .main-menu > .nav-item:nth-child(5) {
    display: none
  }
}
@media (max-width: 60rem) {
  .main-menu > .nav-item:nth-child(4) {
    display: none
  }
}
.offcanvas .action-menu {
  justify-content: center !important;
}
.offcanvas .action-menu li {
  padding: 0 !important;
}
.offcanvas .action-menu .btn.btn-sm.btn-action {
  padding: .5rem .75rem !important;
  font-size: .9rem;
}
.inner-action-menu .btn.btn-action {
  --bs-btn-border-radius: 1.5rem;
  padding: .5rem 1rem;
}
.inner-action-menu a::before {
    content: "";
    font-family: "Font Awesome 6 Pro";
    color: inherit;
    font-weight: 300;
    color: var(--danger);
    margin-right:.5rem;
}
.inner-action-menu li:nth-child(1) a::before {
    content: "\f304";
}
.inner-action-menu li:nth-child(2) a::before {
    content: "\f041";
}
.inner-action-menu li:nth-child(3) a::before {
    content: "\f05a";
}
.main-menu > .nav-item > .nav-link {
  padding: .5rem 1rem 0;
  background: rgba(0, 0, 0, .0005);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.main-menu > .nav-item > .nav-link:after {
  content: '';
  background: var(--red);
  display: block;
  width: 0;
  height: .25rem;
  margin: .25rem auto 0;
  transition: all .35s;
  transition-timing-function: ease-out;
}
.main-menu > .nav-item > .nav-link:hover::after {
  width: 100%;
}
.offcanvas.offcanvas-end { overflow-y: auto;}
.offcanvas ul {
  list-style: none;
  padding: 0;
}
.offcanvas ul li {
  list-style: none;
  font-size: 1rem;
  padding: 0;
}
.offcanvas ul li ul {
  display: block;
  position: absolute;
  top: 0;
  width: calc(100% - 4rem);
  right: 0;
  bottom: 0;
  background: var(--bs-white);
  z-index: 1;
  box-shadow: 0 0 4rem rgba(0, 0, 0, .85);
}
.offcanvas ul li ul li {
  
  min-width: calc(var(--bs-offcanvas-width) - 5rem);
  padding-left: 2.75rem;
}
.offcanvas ul li ul li.offcanvas-header a {
  font-size: 1.2rem;
  font-weight: 600;
}
.offcanvas ul li ul li.offcanvas-header a:before {
    content: "";
    display: block;
    position: absolute;
    top: -1rem;
    height: 100vh;
    width: 4rem;
    left: -5rem;
    cursor: pointer;
}
.offcanvas span.border-bottom {
  margin: 1rem 0 .5rem .5rem;
  display: block;
  font-size: .85rem;
}
.offcanvas a {
  text-decoration: none;
  /*color: var(--bs-nav-link-color);*/
  background: var(--bs-white);
  border-radius: var(--bs-btn-border-radius);
  display: flex;
  align-items: center;
  padding: .75rem 1rem;
  font-weight: 600;
  font-size: 1.1rem;
}
.offcanvas a:hover {
  background: var(--bs-light);
}
.tab-wrapper.bg-light .nav-tabs{ --bs-nav-tabs-link-active-bg:var(--light);border-bottom-color: var(--light);}
/* 4.CSS Grid */
.container-fluid:has(.grid) {
  padding: 0;
}
.grid {
  /** User input values ex: <div class="grid" style="--bs-gap:3rem; --bs-columns:3; --bs-grid-item-min: 200px;"*/
  --bs-gap: 1rem;
  --bs-columns: 12;
  --bs-grid-item-min: 18rem;
  /** Calculated values */
  --gap-count: calc(var(--bs-columns) - 1);
  --total-gap-width: calc(var(--gap-count) * var(--bs-gap));
  --grid-item--max-width: calc((100% - var(--total-gap-width)) / var(--bs-columns));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--bs-grid-item-min), var(--grid-item--max-width)), 1fr));
  grid-gap: var(--bs-gap);
  padding: var(--bs-gap) 0;
  grid-auto-flow: dense;
}
.row > .col-extend:last-child {
  flex-grow: 1;
  margin: 0 max(calc(((100vw - 100%) / -2) + (var(--bs-gutter-x) * 1.5)), -18rem) 0 0;
}
.row > .col-extend:first-child {
  flex-grow: 1;
  margin: 0 0 0 max(calc(((100vw - 100%) / -2) + (var(--bs-gutter-x) * 1.5)), -18rem);
}
.grid-item {
  min-width: var(--bs-grid-item-min); position:relative !important;
}
.grid-item-2, .grid-col-2 {
  grid-column: span 2;
  max-width: calc(100vw - (2 * var(--bs-gap)))
}
.grid-item-3, .grid-col-3 {
  grid-column: span 3;
}
.grid-row-2 {
  grid-row: span 2;
}
.grid-row-3 {
  grid-row: span 3;
}
.grid-row-4 {
  grid-row: span 4;
}
@media (min-width: 1600px) {
  .grid-col-xl-2 {
    grid-column: span 2;
  }
  .grid-row-xl-2 {
    grid-row: span 2;
  }
}
@media (min-width: 1400px) {
  .grid-col-lg-2 {
    grid-column: span 2;
  }
  .grid-row-lg-2 {
    grid-row: span 2;
  }
}
@media (max-width:calc(54rem + 11rem)) {
  .grid-item-3, .grid-col-3 , .grid-col-4 {
    grid-column: span 2;
  }
}
@media (max-width:calc(36rem + 8rem)) {
  .grid-item-2, .grid-item-3, .grid-col-2 , .grid-col-3 , .grid-col-4 {
    grid-column: span 1;
  }
  .grid {
    grid-template-columns: 100%;
  }
}
/* 99.Misc */
a {
  --bs-link-color: var(--blue);
  --bs-link-hover-color: var(--mid-blue);
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  transition: all .35s;
}
a:hover {
  text-decoration-color: var(--mid-blue);
  text-underline-offset: .15em;
}
}
html > body {
  --bs-body-color: rgba(0, 0, 0, .9);
}
.node__content {
  margin-top: 0;
  /*overflow-x: hidden;*/
}
.order--1 {
  order: -1;
}
.site-footer {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  background: color-mix(in srgb, var(--dark), black 50%);
  position:relative;
  & .block {
    margin: 0;
    border: none;
    padding: 0;
  }
  & .bg-dark {
    background: transparent !important;
    padding:0;
  }
}
table tr th, table tr th a, table tr th a:hover, table tr th a:focus {
  color: unset;
}
tr {
  background: unset;
}
tr td, tr th {
  border: unset;
}
.alert-primary {
  --bs-alert-color: #084298;
  --bs-alert-bg: var(--light-blue);
  --bs-alert-border-color: color-mix(in srgb, var(--light-blue), #000 2.5%);
}
.bg-white > .deck-wrapper .card.bg-white,
.bg-white .staff.bg-white,
.bg-white .staff.bg-white .bg-white {
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
.bg-light .accordion-button:not(.collapsed),.bg-light .accordion-collapse {
    background-color: var(--white);
}
.bg-white .accordion-collapse {
    background-color: var(--bs-accordion-active-bg);
}
.bg-dark > .deck-wrapper .card.bg-white {
  background-color: color-mix(in srgb, var(--dark), var(--black)) !important;
}
.deck-wrapper .row {
  align-items: center;
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  --bs-gutter-x: 4rem;
}
.text-condensed {
    font-family: 'Roboto Condensed';
}
#main-wrapper div[aria-label="Status message"]{ position:fixed;}

.font-serif, .font-serif > * {font-family:'Roboto Slab';}
img {max-width: 100%; }
blockquote, blockquote p{ font-family:'Roboto Slab'; font-size:1.75rem; font-weight:bolder; color:var(--lion-blue); position:relative }
.deck-wrapper {
  position: relative;}
body{
    overflow-x: hidden;
}
.deck-wrapper .card.bg-white.penn-college-blue-white-text { background-color: var(--lion-blue) !important; color:var(--light) !important;}
.deck-wrapper .card.bg-white.penn-college-blue-white-text .btn-link.btn-icon-right-arrow{--bs-btn-color: inherit; --bs-btn-hover-color: inherit; --bs-btn-bg: rgba(0,0,0,.35); --bs-btn-hover-bg: rgba(0,0,0,.5);}
time { display: inline-block; text-transform: uppercase; font-size: .9em; text-align: center;}
time strong{font-size: 2.25em; border-top: 1px solid; display: block; width: 2em; aspect-ratio: 1.5;}
.ratio > img {object-fit:cover; height:100%;}
h2#message-status-title { display: none; }
ul.slick-dots:has(:only-child) {display: none;}
.slick-dots li button:before {font-size: 1.5rem;}
[data-aos=fade-up] {
    transform: none !important;
    opacity: 1 !important;
}
.content > div[class*='content-']{ position: relative;}
.content > div[class*='content-']:hover .trigger.visually-hidden{ display:block;}
.card div:empty {
    /*display: none;*/
  
}
div:has(.contextual) { position: relative; }
.accordion-button:not(.collapsed) .text-truncate {
    display: none !important;
}
img.w-100 { height: auto; }
..ui-autocomplete{background: var(--white);}