/* Last Updated: 2026/01/09 @ 10:30am  - OK - line 118*/
:root {
  --baseSansFont: "gotham", Arial, sans-serif;
  --baseSerifFont: "sentinel", Georgia, serif;
  --ung-blue: #1f3d7c;
  --ung-gold: #ffc62f;
  --lt-blue: #abb9d4e6;
  --lt-gray: #f5f5f5;
}

.screen-width {
  width: 100%; /* Fallback */
  width: calc(
    100vw - 8px
  ); /* 8px accommodates a typical scrollbar. Likely needs further research into new `scrollbar-gutter: stable`. */
  margin-left: calc((100vw - 100%) / -2);
  max-height: 50vh;
}

H1 {
  color: var(--ung-blue);
  font-weight: bold;
}

/* START: "Sticky Footer" Rules */
HTML {
  height: 100%; /* Fallback for: `vh`. Likely an unnecessary precaution these days. */
  height: 100vh;
  scroll-behavior: smooth; /* Good visual indicator for most people that the screen has scrolled */
  @media (prefers-reduced-motion) {
    scroll-behavior: auto;
  } /* But honor anyone who prefers-reduced-motion */
}

BODY,
DIV#pageContainer {
  min-height: 100%;
  min-height: 100vh;
}

DIV#pageContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

DIV#mainContentWrapper {
  flex: 1 0 auto; /* Expand MAIN/content area to fill excess space and keep FOOTER at the bottom. */
}

DIV#mainContentWrapper A:any-link {
  color: var(--ung-blue);
}
/* ENDS: "Sticky Footer" Rules */
/* ** *** ** */
/* START: "Header" Section */
/** Background Colors **/
DIV#header1Wrapper {
  background-color: var(--ung-blue) !important;
} /* Only using `!important` to override Bootstrap's ".bg-dark" */
NAV.mainNavBar {
  background-color: transparent !important; /* Only using `!important` to override Bootstrap's ".bg-light" */

  & UL.navbar-nav {
    margin: 0;
  } /* Override centering */
}
DIV#header3Wrapper {
  background-color: var(--lt-blue);
}

/** Reorder Cart and Account **/
/* #header1ContentWrapper > DIV:nth-of-type(2){order:3} */
#header1ContentWrapper > DIV:has(A[href*="publicCourseBasket.do"]) {
  order: 2;
}

/** Resize Cotnent **/
#header1ContentWrapper {
  align-items: center;
}
#schoolHeaderLogoWrapper {
  flex: 1 0 auto;
  width: auto;
  max-width: none;
}
#schoolHeaderLogoWrapper IMG.img-fluid {
  max-height: 60px;
}
#header1ContentWrapper > DIV.offset-lg-0 {
  flex: 0 1 auto;
  width: auto;
}
#header1ContentWrapper > DIV.offset-md-2 {
  margin-left: 0;
}
#loginInfo,
#cartInfo {
  text-align: right;
  line-height: unset;
}

/** Hyperlink Style and Behavior **/
.navbar-light .navbar-nav A.nav-link:any-link {
  color: var(--ung-blue);
  font-weight: bold;
}
.navbar-light .navbar-nav A.nav-link:hover {
  color: var(--ung-blue);
  text-decoration: underline;
}
.navbar-expand-md .navbar-nav .nav-link {
  padding-left: unset;
  padding-right: unset;
  padding: 0 1rem;
}

/* Commented out - Unit said this was causing other issues - Just unhiding from menu - OK - 20260109
  NAV.mainNavBar A[href*="publicCourseAdvancedSearch.do"]{ display:none }
/*

/* ENDS: "Header" Section */
/* ** *** ** */
/* START: "Main" Section */
DIV#searchBreadcrumb {
  padding: 1.1rem 0 0.6rem;
}
/* ENDS: "Main" Section */
/* ** *** ** */
/* START: "Footer" Section */
FOOTER#footer {
  background-color: var(--ung-blue);
  color: #fff;
  padding: 1.5em 1rem 1rem;

  & A:any-link {
    color: #fff;
  }

  & .variable-content,
  UL[role="navigation"] {
    margin-bottom: 0;
  }
}

DIV.poweredByDestinyOneWrapper {
  text-align: right;
  min-height: unset;
  padding-top: 0.5rem;
}
DIV.poweredByDestinyOne {
  position: unset;
  display: inline-block;
  opacity: 0.5;
  transition: opacity 0.2s;
}
DIV.poweredByDestinyOne:hover {
  opacity: 1;
}
/* ENDS: "Footer" Section */
/* ** *** ** */
/* START: Cards Adjustments */
DIV.card {
  --cardBorderStyle: 1px solid rgba(0, 0, 0, 0.125);
  border: 0; /* Moving border handling to the individual parts: `DIV.card-body` and `DIV.card-header` (not to be confused with "DIV,H3{.card-title}".) */
  /* Reason: More granular control of [border-radius] on "drop-down" elements. */
}
DIV.panelHeadingToggle {
  cursor: unset;
} /* @ModernCampus: Don't show a "Pointer" cursor on a non-interactive container. Add the pointer directly to the element which has the event/listener attached. */
DIV.card-header,
DIV.card-body {
  border: var(--cardBorderStyle);
}
DIV.card-body {
  border-top: 0;
}
DIV.card-body.sectionHeader {
  /* Because... *of course* they fused "body" and "header" rules together. *sigh* */
  border: 0;
  text-align: center;
}

SPAN.programArea A,
TD.programStream A,
DIV[data-toggle="collapse"] > A {
  /* Configurable Rules */
  text-align: center;
  font-weight: bold;
  transition: background-color 0.2s;

  /* Nesting these `:hover` and `:focus` rules for brevity, and general "relational grouping" */
  &:hover,
  &:focus {
    background-color: #dde;
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff,
      0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff; /* For subtly Crisper-Edges/Higher-Contrast b/t font and bg. */
    /* text-shadow: 1px 1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,-1px -1px 0 #fff, 1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,-1px 0 0 #fff; /* Style B: A sharper, louder [but little off-center] "stroke". Foregone Alternative: `-webkit-text-stroke` is still "expiremental" in 2025 and [annoyingly] uses align-center rather than [the more useful] align-outer. */
  } /* Ends *Nested* Rules for: ..A{ &:hover, &:focus{} }. Note: still in A{} parent: */

  /* Required Rules */
  display: block; /* The A-tags in this [missed opportunity of an OL/UL] "list" are NOT being used as inline-text, but rather dressed as pseudo-buttons. */
  /* &::BEFORE{content:'';position:absolute;top:0;right:0;bottom:0;left:0;} /* If there are additional elements beyond just the link text/label within the clickable region, spread the clickable region of the A element across the entire parent container. Otherwise, this rule is redundant. */
}

DIV.card-header,
SPAN.programArea A,
TD.programStream A,
DIV[data-toggle="collapse"] > A {
  padding: 0.75rem 15px; /* Original had way too much padding. M.C. had used negative margins on the children, for some reason. The [padding] should match across these disparate Elements performing the same function. */
}

BODY#pageProgramAreasList DIV.card-header {
  padding: 0; /* Because Modern Campus is inconsistent with their container nesting and utilization. */
}

DIV.card-title > DIV.row {
  margin: 0; /* @ModernCampus: If you are using negative margin/padding, you're doing something wrong. Just remove the offending padding! */
  align-items: stretch;

  > DIV {
    padding: 0;
    margin: 0;
  } /* Move the padding into the A-tag. Why? This puts the ":focus" outline in the correct position (when users keyboard-navigate["Tab"] to the link). */

  > DIV:only-of-type {
    flex: 0 0 auto;
    max-width: 100%;
  }

  /* Dropdown "indicator-button" */
  > DIV[data-toggle="collapse"] {
    border-left: 1px solid rgba(0, 0, 0, 0.125);
    display: table;

    > A:any-link {
      display: table-cell;
      vertical-align: middle;
      padding: 0;
      float: none !important; /* Override Native/Bootstrap's `.float-right{float:right !important}`*/
    }
    > A:hover {
      text-decoration: none;
    } /* By hoisting the glyphicon, we need to undo the underline behavior */
    & .panelHeaderIcon {
      display: contents;
    } /* Strangeness with the parent container, this will hoist it's contents into the grandparent */
  } /* End of: Dropdown "indicator-button" */
}
/* ENDS: Cards Adjustments */
/* ** *** ** */
/* START: `listProgramAreas.do` */
DIV#mainContentWrapper A.btn-secondary {
  background-color: #cef;
}
DIV#mainContentWrapper A.btn-secondary:hover {
  background-color: #7ac;
  color: #fff;
}
DIV#mainContentWrapper A.btn-secondary:active {
  background-color: #89a;
  color: #fff;
}

DIV#programAreasAccordion.panel-group {
  --gap-width: 1rem;

  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  row-gap: var(--gap-width);

  & DIV.panel-default,
  DIV.card-info {
    width: calc(
      100% / var(--colCnt) - var(--gap-width) +
        (var(--gap-width) / var(--colCnt))
    ); /* Removes and distributes the "margin-right" of the last element in ea row back into the widths of all elements in the row */
    margin-right: var(--gap-width);
    border: 0; /* Moving border rules down to `DIV.card-header` */
  }

  @media (width <= 768px) {
    --colCnt: 1;
    DIV.card {
      margin-right: 0;
    }
  }
  @media (width > 768px) and (width <= 992px) {
    --colCnt: 2;
    DIV.card:nth-of-type(2n) {
      margin-right: 0;
    }
  }
  @media (width > 992px) /* and (width < 1200px) */ {
    --colCnt: 3;
    DIV.card:nth-of-type(3n) {
      margin-right: 0;
    }
  }
  @media (width >= 1200px) {
    /* Removing "quarter-width" cards because program titles got too long for anything narrower than a "third-width".
      --colCnt:4;
      DIV.card:nth-of-type(4n){margin-right:0} */
  }

  /* Expandable/Dropdown Positioning */
  & DIV.panel-collapse {
    position: absolute;
    top: 100%;
    width: 83.3333%;
    z-index: 1;
    border-radius: 0 0 4px 4px;
    overflow: hidden;
    box-shadow: 0 3px 3px #0000aa26;
    scroll-margin-top: 66px;

    & TABLE.table {
      border-collapse: initial;
      border-spacing: 0;
    } /* Need to uncollapse Bootstrap'd TABLE for following "TD{border-radius}" rule to work. */
    & TABLE.table TR {
      background-color: #ddd;
    } /* Additional visual cue that this is a dropdown, not a top-level header */
    & TR:last-of-type TD.programStream {
      border-radius: 0 0 4px 4px;
    }
    & TD.programStream {
      border: 1px solid rgba(0, 0, 0, 0.125);
      padding: 0;
      border-top: 0;
    }
  }
}
/* ENDS: Module for #programAreasAccordion for page `listProgramAreas.do` */

/* START: `/search/publicCourseSearchDetails.do` */
BODY#pageCourseProfile,
BODY#pageCertificateProfile {
  DIV.card-header {
    cursor: pointer;
  } /* @MC: If it's clickable, show it. */
}
DIV.sectionHeaderChevronContainer.float-right {
  &,
  & .float-right {
    float: none !important;
  } /* Modern Campus *REALLY* likes their floats. */
}

DIV.courseSection .panel-collapse {
  scroll-margin-top: 75px;
}
/* ENDS: `/search/publicCourseSearchDetails.do` */

/* START: "Modern Campus" CSS
I don't think we need it. But they tell me there are other views I can't see... 
so I'll leave them in for those "things I cannot see."" */
/*-----------Header1, topheader.jsp, ((logo, cart, login))-----------------*/
#header1Container {
  background-color: var(--ung-blue);
  width: 100%;
  color: #eaeaea !important;
} /* Middle of the languagebar.jsp ((logo, cart, login))*/

#header1Wrapper {
  background-color: var(--ung-blue);
  color: #eaeaea !important;
} /* sides of languagebar.jsp ((logo, cart, login))*/

#cartInfo .glyphicon-shopping-cart {
  color: #eaeaea !important; /* cart color/**/
}

#loginDropdownMenuLink {
  color: #eaeaea !important; /*Login link color*/
  font-size: 15px !important;
  font-weight: 400;
}

#logoutLinkWrapper {
  color: #eaeaea !important;
  font-size: 15px !important;
  font-weight: 400;
}

.headerProfileLink {
  color: #eaeaea !important;
  font-size: 15px !important;
  font-weight: 400;
}

#loginNameWrapper {
  color: #eaeaea !important;
  font-size: 15px !important;
  font-weight: 400;
}

.headerStudentLoginLogoutLink {
  color: #eaeaea !important;
  font-size: 15px !important;
  font-weight: 400;
}

/*----------------------------------------------------------------------------*/

/*-------------------------Global nav, globalNavigationEmbeddable.jsp ------------------------------*/
/* #header3Container{
    display: flex;
    justify-content: left;
    background-color: #ffc62f !important;
  }

  #header3Wrapper{
    padding-bottom: 10px;
    background-color: #ffc62f  !important;
  }

  #globalNavigationBar{
      background-color: #ffc62f !important;
      } /**/

.nav-item {
  font-size: 17px !important; /* global nav item font size /**/
  font-weight: 400;
  font-family: "Artegra Slab", sans-serif;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--ung-blue);
  font-family: "Artegra Slab", sans-serif;
} /* Color of navbar items/links /**/

/*----------------------------------------------------------------------------------*/

/*----------------------Footer, bottomNavigation.jsp------------------------------------------------------*/
footer {
  background-color: var(--ung-blue);
  color: #eaeaea !important;
  padding: 20px;
}
#footer-info {
  line-height: 18px;
}
#footer2Sub2 {
  height: auto; /*footer 1 sub 1 height. Orig. `65px` /**/
}
#footer1Wrapper {
  height: auto; /*Whole footer height. Orig. `280px` /**/
}
/*----------------------------------------------------------------------------------*/
#sidebar1Module1 {
  color: #eaeaea !important;
}
#sidebar1Wrapper {
  background-color: var(--ung-blue);
}
.nav-pills {
  color: #eaeaea !important;
}
/*
  footer a {color: #eaeaea !important}
  footer > a {color: #eaeaea !important}
  /**/
#variableContentBlockPG0156 {
  color: #eaeaea !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  padding-top: 35px !important;
  padding-bottom: 20px !important;
  display: flex;
  -ms-flex-align: center;
}

.conferencePreviewHeaderWrapper,
.conferencePreviewHeaderWrapper .form-text {
  color: #000000 !important;
}

.conferenceModule #header1 .headerConfPreviewMenuDropdownLink {
  color: #000000 !important;
}

/*--------------------- Student and Instructor Portal Menu ------------------------------------------------------*/
/* #studentMenu a:link {color:white}
  #studentMenu a:visited {color:white}
  #studentMenu a:hover {color:gray}
  #instructorMenu a:link {color:white}
  #instructorMenu a:visited {color:white}
  #instructorMenu a:hover {color:gray}
  #studentMenu .menuLink.nav-link {background-color: var(--ung-blue)}
  #studentMenu a.nav-link.active {background-color: var(--ung-blue)}
  #instructorMenu .menuLink.nav-link {background-color: var(--ung-blue)}
  #instructorMenu a.nav-link.active {background-color: var(--ung-blue)} /* Let's at least tighten this up for them. -EN */
#studentMenu A:any-link,
#instructorMenu A:any-link {
  color: white;
}
#studentMenu A:hover,
#instructorMenu A:hover {
  color: gray;
}
#studentMenu .menuLink.nav-link,
#studentMenu a.nav-link.active,
#instructorMenu .menuLink.nav-link,
#instructorMenu a.nav-link.active {
  background-color: var(--ung-blue);
}
/* ENDS: "Their" CSS */