/* # Roxbury Degrees & Programs project */
:root {
  --blue-0078BF: #0078bf;
  --orange-ee8722: #ee8722;
}

h1.catalog-heading {
  margin-bottom: 0.5em;
}

h2.course-heading {
  font-size: 2rem;
  margin-top: 0.5em;
}

.btn:hover {
  color: #fff;
}

.hero-inner:has(.container.relative .catalog-quicklinks) {
  margin-bottom: 2.5em;
}

.tab-content {
  padding: 2em;
}

ul.single-column {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.single-column li.heading {
  background-color: var(--blue-0078BF);
  color: #fff;
  font-size: 1.5em;
  font-weight: 900;
  padding: 0 0.5em;
}

ul.single-column li.item {
}

p.course-title {
  margin-top: 2em;
  font-weight: 900;
}

.catalog-quicklinks {
  position: absolute;
  bottom: -4.75em;
  padding: 0.75em 0 0.75em 0;
  width: 100%;
}

.catalog-quicklinks ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.catalog-quicklinks ul li {
  display: inline-flex;
  margin-right: 2em;
  margin-bottom: 0;
}

.catalog-quicklinks ul li a {
  padding: 7px;
  position: relative;
  transition: all 0.4s;
  display: block;
}

.catalog-quicklinks ul li a:hover:after {
  transform: translateX(0);
  opacity: 1;
}

.catalog-quicklinks ul li a:after {
  content: "";
  display: inline-block;
  background: url(/_resources/images/arr-white-right.png) no-repeat center center / 12px
    auto;
  filter: invert(31%) sepia(64%) saturate(2004%) hue-rotate(180deg)
    brightness(92%) contrast(101%);
  width: 12px;
  height: 12px;
  margin: 0 0 0 10px;
  opacity: 0;
  transition: all 0.4s;
  position: absolute;
  bottom: 13px;
  transform: translateX(-10px);
}

.container.relative {
  padding-bottom: 0;
}

ul.course-sidenav {
  list-style: none;
  padding-left: 0;
}

ul.course-sidenav li {
  margin-bottom: 0;
  position: relative;
}

ul.course-sidenav li a {
  display: block;
  padding: 0.5em;
}

ul.course-sidenav li a:hover::after {
  transform: translateX(0);
  opacity: 1;
}

ul.course-sidenav li a::after {
  content: "";
  display: inline-block;
  background: url(/_resources/images/arr-white-right.png) no-repeat center center / 12px
    auto;
  filter: invert(31%) sepia(64%) saturate(2004%) hue-rotate(180deg)
    brightness(92%) contrast(101%);
  width: 12px;
  height: 12px;
  margin: 0 0 0 10px;
  opacity: 0;
  transition: all 0.4s;
  position: absolute;
  bottom: 17px;
  transform: translateX(-10px);
}

ul.course-sidenav li a.active {
  background-color: var(--blue-0078BF);
  color: #fff;
}

ul.course-sidenav li a.active::after {
  opacity: 0;
}

ul.course-sidenav li a.active:hover {
  text-decoration: none;
  cursor: default;
}

/* course description navigation  */

ul.course-description-navigation {
  list-style: none;
  font-size: 0;
  margin: 0;
}

ul.course-description-navigation li {
  display: inline-flex;
  font-size: 20px;
}

ul.course-description-navigation li a {
  padding: 0 0.5em;
}

ul.course-description-navigation li:first-child a {
  padding: 0 0.5em 0 0;
}

ul.course-description-navigation li:not(:last-of-type):after {
  content: "|";
  position: relative;
  margin-top: -1px;
}
/*  */

table.degrees-table {
  width: 100%;
}

table.degrees-table thead {
  text-transform: uppercase;
  font-weight: 600;
}

table.degrees-table thead tr td,
table.degrees-table tbody tr td {
  padding: 0.5em 0 1em 0;
}

table.degrees-table tbody tr td {
  border-bottom: 2px solid #ccc;
}

table.degrees-table tbody a {
  font-weight: 600;
}

/*  */

.tabs .nav-tabs {
  border-bottom-color: transparent;
}

.tabs .nav-tabs .nav-link {
  display: block;
  width: 100%;
  border-radius: 0.375em;
}

.tabs .nav-tabs .nav-link.active {
  border-bottom: 1px solid rgb(222, 226, 230);
}

/*  */

@media screen and (min-width: 768px) {
  .catalog-quicklinks {
    bottom: -3.75em;
  }
  .catalog-quicklinks ul li a {
    padding: 7px 0;
  }
}
@media screen and (min-width: 992px) {
  .catalog-quicklinks {
    width: 66%;
  }

  .tabs .nav-tabs {
    border-bottom: 1px solid rgb(222, 226, 230);
  }

  .tabs .nav-tabs .nav-link {
    display: unset;
    width: unset;
    border-radius: 0.375em 0.375em 0 0;
  }

  .tabs .nav-tabs .nav-link.active {
    border-bottom: 1px solid transparent;
  }
}

table.faculty tr td,
table.faculty tr th{
  border: 1px solid #000;
  padding: .25em
}