:root {
  /* Primary Brand Colors */
  --color-maroon: #612141;
  --color-red: #9D2235;
  --color-orange: #FF6105;
  --color-yellow: #EEDC00;
  --color-green: #77AB00;
  --color-blue: #00A2C7;
  --color-dark-grey: #717075;
  --color-black: #000;

  /* Text Colors */
  --text-color-body: #111;
  --text-color-dark: #333;
  --text-color-light: #f2f2f2;
  --text-color-white: #fff;
  --text-color-grey: #706f70;
  --text-color-light-grey: #bebebe;
  --text-color-darker-blue: #009EC2;
  --text-color-alert-yellow: #000; /* Specific for alert yellow background */
  --text-color-alert-green: #fff;
  --text-color-alert-red: #fff;
  --text-color-alert-info: #fff;

  /* Background Colors */
  --bg-color-light: #f5f5f5;
  --bg-color-dark-grey: #292929;
  --bg-color-navbar-hover: #92060b;
  --bg-color-navbar-darkgrey-hover: #919191;
  --bg-color-navbar-active: #430103;
  --bg-color-navbar-darkgrey-active: #3e3e3e;
  --bg-color-view-all-link: #e8e8e8;
  --bg-color-view-all-link-hover: #dedfdf;
  --bg-color-alert-green: #389e3d;
  --bg-color-alert-yellow: #eed300;
  --bg-color-alert-red: #9D2235;
  --bg-color-alert-type: #000;
  --bg-color-banner-footer: #292929;
  --bg-color-banner-mega: #6e0408;
  --bg-color-table-striped: #f5f5f5;
  --bg-color-table-bordered-th: #dfdfdf;
  --bg-color-table-alternating: #f2f2f2;
  --bg-color-table-alternating-th: #d0d0d0;
  --bg-color-top-btn: #eee;
  --bg-color-top-btn-hover: #ddd;
  --bg-color-list-button-shadow: #f5f5f5;
  --bg-color-sidenav-active: #f0f2f4;
  --bg-color-sidenav-current-branch: #f5f5f5;
  --bg-color-sidenav-hover: #f0f2f4;
  --bg-color-accordion-hover: #0000000d; /* Bootstrap default hover for light cards */
  --bg-color-accordion-active: #fff;
  --bg-color-twitter-facebook-feed: #ccc;
  --bg-color-searchbox: #f0f0f0;
  --bg-color-tint: #3a3a3987;
  --bg-color-carousel-overlay: #3a3a391a;
  --bg-color-edit-page: #9d2235;
  --bg-color-link-block-sobey: #00a9ce;
  --bg-color-link-block-sobey-hover: #00a9ce;
  --bg-color-link-block-sobey-link: #fff;
  --bg-color-dropdown-menu: #f5f5f5;


  /* Border Colors */
  --border-color-body: #dedede;
  --border-color-home-events: #ff6a14;
  --border-color-row: #eaeaea;
  --border-color-light: #bcbcbc59;
  --border-color-grey: #bfbfbf91;
  --border-color-navbar-toggler: #fff6;
  --border-color-breadcrumb: #dedede;
  --border-color-searchbox: #dcdcdc;
  --border-color-list-button: #ececec;
  --border-color-table: #999;
  --border-color-profile-image: #ccc;
  --border-color-sobey-navline: #00A2C7;
  --border-color-skipnav: #00a2c7;
  --border-color-card-focus: #00a2c7;

  /* Button Colors */
  --button-color-blue: var(--color-blue);
  --button-color-red: var(--color-red);
  --button-color-grey: var(--color-dark-grey);
  --button-color-purple: var(--color-maroon);
  --button-color-green: var(--color-green);
  --button-color-yellow: var(--color-yellow);
  --button-color-orange: var(--color-orange);
  --button-color-text-light: #fff;
  --button-color-text-dark: #292929;

  /* Button Hover Colors */
  --button-hover-color-red: #54121c;
  --button-hover-color-grey: #3f3e41;
  --button-hover-color-purple: #260d1a;
  --button-hover-color-green: #a1e600;
  --button-hover-color-blue: #1ad5ff;
  --button-hover-color-orange: #ff9e66;
  --button-hover-color-yellow: #fff04d;

  /* Focus Outline Colors */
  --focus-outline-color: var(--color-blue);
  --focus-outline-color-footer: #75E6FF;

  /* Specific color overrides for accessibility */
  --green-text-contrast: #6F9E00;
  --blue-text-contrast: #009ABD;
  --orange-text-contrast: #FA5C00;
  --grey-text-contrast: #6B737B;

  /* Gradients */
  --gradient-blue-purple: linear-gradient(to right, var(--color-blue), var(--color-maroon));
  --gradient-blue-grey: linear-gradient(to right, var(--color-blue), var(--color-dark-grey));
  --gradient-purple-grey: linear-gradient(to right, var(--color-maroon), var(--color-dark-grey));
  --gradient-red-purple: linear-gradient(to right, var(--color-red), var(--color-maroon));
  --gradient-green-grey: linear-gradient(to right, var(--color-green), var(--color-dark-grey));
  --gradient-green-blue: linear-gradient(to right, var(--color-green), var(--color-blue));
  --gradient-blue-green: linear-gradient(to right, var(--color-blue), var(--color-green));
  --gradient-red-grey: linear-gradient(to right, var(--color-red), var(--color-dark-grey));
  --gradient-orange-red: linear-gradient(to right, var(--color-orange), var(--color-red));
  --gradient-grey-black: linear-gradient(to right, var(--color-green), var(--color-black)); /* Note: original had green, then black */
  --gradient-black-grey: linear-gradient(to right, var(--color-black), var(--color-dark-grey));
  --gradient-black-blue: linear-gradient(to right, var(--color-black), var(--color-blue));
  --gradient-maroon-red: linear-gradient(90deg, var(--color-maroon), var(--color-red));
  --gradient-maroon-red-card: linear-gradient(45deg, var(--color-red) 25%, var(--color-maroon) 75%);
  --gradient-bg-main: linear-gradient(45deg, var(--color-maroon) 25%, var(--color-red) 75%);
  --gradient-text-main: -webkit-linear-gradient(45deg, var(--color-red) 25%, var(--color-maroon) 75%);

  /* Line Backgrounds */
  --line-blue: url(https://keycdn.smu.ca/images/brandassets/blue-line-bg-h.png);
  --line-orange: url(https://keycdn.smu.ca/images/brandassets/orange-line-bg-h.png);
  --line-white: url(https://keycdn.smu.ca/images/brandassets/white-line-bg-h.png);

  /* Font Awesome Icon Colors */
  --icon-color-pdf: var(--color-red);
  --icon-color-bodynav: #a39f9f;

  /* Text Shadow */
  --text-shadow-dark: 0 0 20px #2125298a;

  /* Text Stroke */
  --text-stroke-color: #4d4d4d;
}

/* ============= These styles override Bootstrap styles or set specific rules for original styles ============= */

body {
  font-size: 1rem;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--text-color-body);
  line-height: 1.5em;
}

#main-content p, #main-content ul, #main-content ol {
  margin-top: 1rem !important;
  margin-bottom: 1.5rem !important;

}



.card p, nav p {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

a {
  color: var(--color-maroon);
  text-decoration: none;
}

a:hover {
  color: var(--color-red);
}


/* Width of text limited for accessibility  */

p, li, .max-width-text {
  max-width: 80ch !important;
  text-wrap: pretty;
}

p:has(> img.img-fluid),
li:has(> img.img-fluid),
.max-width-text:has(> img.img-fluid) {
  max-width: none !important;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  max-width: 60rem !important;
  text-wrap: pretty;
}

table h1, table h2, table p {
  max-width: none !important;
}

.text-wrap-balance {
  text-wrap: balance;
}

.text-wrap-pretty {
  text-wrap: pretty;
}

::selection {
  color: var(--text-color-light);
  background: var(--color-blue);
}

.small, small {
  font-size: .85rem !important;
}

.x-small, x-small {
  font-size: .75rem !important;
}

.xx-small, xx-small {
  font-size: .6rem !important;
}

#main-content p a, #main-content li a, .main p a, #main-content ul a, .main li a {
  color: var(--color-maroon);
  text-decoration: underline solid 1px;
  text-underline-offset: .3em;
}

.multilinks .card-body a {
  color: var(--color-maroon) !important;
  text-decoration: none !important;
}

.multilinks .card-body a:hover {
  color: var(--color-red) !important;
  text-decoration: underline solid 2px !important;
  text-underline-offset: .3em;
}

#main-content p a:hover, #main-content li a:hover, .main p a:hover, .main li a:hover, .main p a:active, .main li a:active, #main-content table a:hover, .highlight-box a:hover, .quote-box a:hover {
  color: var(--color-red);
  text-decoration: underline solid 2px;
  text-underline-offset: .3em;
}

#main-content table p a {
  color: var(--color-maroon);
  border-bottom: none;
  text-decoration: none !important;
}

#main-content table p {
  margin-top: 0 !important;
  Margin-bottom: 1rem !important;
}

#main-content .listnav .list-group a {
  border-bottom: none;
  text-decoration: none;
}

/* Code for Future Students Navigation */
#main-content #sidebar ul li ul li {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  list-style-type: none !important;
}

#main-content #sidebar ul li ul {
  margin-left: 0;
  list-style-type: none !important;
}

#main-content #sidebar ul li {
  list-style-type: none !important;
}

#main-content .bodynav .list-group-item {
  margin-bottom: 0;
  border-bottom: none;
}

#main-content .jumbotron h1, #main-content .jumbotron h2, #main-content .jumbotron h3, #main-content .jumbotron h4 {
  max-width: 60em !important;
  font-variant-ligatures: no-common-ligatures;
}

.jumbotron h1, .large-text-responsive {
  font-size: calc(1.75rem + 1.25vw);
  font-weight: 700;
}

.jumbotron h2 {
  font-size: calc(1.25rem + .75vw);
}

/* positions an element accross the botom of a jumbotron banner  */
.image-bottom-alignment {
  position: absolute;
  bottom: 0;
  z-index: 0;
  left: 0;
  right: 0;
  object-fit: cover;
}

#main-content ul li {
  list-style: square;
  margin-bottom: .75rem;
}

#main-content ul li li {
  list-style: circle;
}

#main-content ol li, ul ol li {
  margin-top: .75rem;
  margin-bottom: .75rem;
}

#main-content ul li::marker {
  color: var(--color-maroon);
}

.multilinks .card-body ul li {
  list-style: square;
  margin-bottom: .3rem;
}

.multilinks .card-body ul {
  margin-left: 1rem;
  padding-left: .3rem;
}

.multilinks .card-body ul li::marker {
  color: var(--color-maroon);
}

#main-content .ss360-list li {
  list-style: none;
}

#main-content .ss360-list {
  list-style: none;
}

/* ======================== Main site navbar settings ======================== */


@media only screen and (min-width: 1200px) {
  nav .dropdown .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0s 0.25s;
  }

  nav .dropdown:hover .dropdown-menu, nav .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s 0.25s, visibility 0s 0s;
  }
}

@media only screen and (max-width: 1199px) {
  nav .dropdown .dropdown-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0s 0.25s;
  }

  nav .dropdown:hover .dropdown-menu, nav .dropdown-menu.show {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s 0.25s, visibility 0s 0s;
  }
}

.navbar-light .navbar-nav .nav-link {
  color: #757575 !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--text-color-white);
  white-space: nowrap;
}

.navbar .input-group {
  min-width: 125px !important;
  max-width: 170px !important;
}

.navbar {
  padding: 1rem;
}

.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
  color: var(--text-color-white);
  background-color: var(--bg-color-navbar-hover);
}

.navbar-darkgrey .navbar-nav .nav-link:hover, .navbar-darkgrey .navbar-nav .nav-link:focus {
  color: var(--text-color-white);
  background-color: var(--bg-color-navbar-darkgrey-hover);
}

.navbar-dark .navbar-nav .nav-link:active {
  color: var(--text-color-white);
  background-color: var(--bg-color-navbar-active);
}

.navbar-darkgrey .navbar-nav .nav-link:active {
  color: var(--text-color-white);
  background-color: var(--bg-color-navbar-darkgrey-active);
}

.navbar .view-all-link {
  background-color: var(--bg-color-view-all-link);
}

.navbar .view-all-link:hover {
  background-color: var(--bg-color-view-all-link-hover);
}

.navbar .down-triangle:after {
  color: #b5b5b5;
  font: var(--fa-font-solid);
  content: '\00A0\f0d7';
  white-space: nowrap;
}

@media only screen and (min-width: 991px) {
  .navbar .col-minwidth {
    min-width: 175px;
  }
}

.search-form {
  white-space: nowrap;
}

.dropdown-item:hover, .dropdown-item:focus {
  color: var(--color-red);
  text-decoration: none;
  background-color: transparent;
}

li.dropdown a.dropdown-toggle::after {
  display: none;
}

.topnav .dropdown-item {
  font-size: .85em;
}

.site-nav .dropdown-toggle:hover {
  color: var(--color-black) !important;
}


div.alert-box {
  padding: 0;
  margin-bottom: 28px;
  display: inline-table;
  width: 100%;
}

div.alert-green {
  background-color: var(--bg-color-alert-green);
  color: var(--text-color-alert-green);
}

div.alert-yellow {
  background-color: var(--bg-color-alert-yellow);
  color: var(--text-color-alert-yellow);
}

div.alert-red {
  background-color: var(--bg-color-alert-red);
  color: var(--text-color-alert-red);
}

div.alert-icon {
  padding: 4px 6px;
  float: left;
}

svg.alert-green {
  fill: var(--text-color-white);
}

svg.alert-yellow {
  fill: var(--color-black);
}

svg.alert-red {
  fill: var(--text-color-white);
}

div.alert-text {
  padding: 6px 12px;
}

div.alert-type {
  background-color: var(--bg-color-alert-type);
  color: var(--text-color-white);
  float: left;
  text-transform: uppercase;
}

div.alert-message {
  float: left;
}

div.alert-info {
  background-color: var(--color-black);
  color: var(--text-color-white);
  float: right;
}

.home-events {
  font-size: 1.2rem;
}

.home-events .event-item:first-of-type {
  border-left: 1px solid var(--border-color-home-events);
}

.home-events .event-item {
  border-right: 1px solid var(--border-color-home-events);
}

.home-news {
  font-size: 1.2rem;
}

div.fpcards .card {
  padding-bottom: 30px;
}

.card-title {
  margin-bottom: .75rem;
  margin-top: 0;
  font-size: 1.2rem !important;
  font-weight: 500;
}

.card-header a, .card-title a, .nav-tabs .nav-link {
  text-decoration: none !important;
  color: var(--color-maroon) !important;
}

.card-header a:hover, .card-title a, .card-title a:hover, a .card-title:hover, .nav-tabs .nav-link:hover {
  text-decoration: none !important;
  color: var(--color-red) !important;
}

.highlight-cards .card {
  background-color: transparent !important;
}

/* #home-programcards .card {background-color:transparent!important} */

/* #home-programcards .card .card-body { background-color:#ffffff!important; } */
/* Fixes issue if editors add cards that aren't 500x250 ratio */
.force-img-ratio {
  aspect-ratio: 2/1;
  object-fit: cover;
}

.main {
  padding: 0;
}

.main ul, .main ol, main ul ul, .main ol ol, .main ol ul, .main ul ol, #main-content ul, #main-content ol {
  margin-left: 1.5rem;
  padding-left: .25rem;
}

.main .breadcrumb ul, #main-content .breadcrumb ul {
  margin-left: 0;
  padding-left: 0;
}

.main .list-group-flush a {
  border-bottom: 0;
}

#banner-footer {
  padding: 1rem;
  margin-bottom: 2rem;
  border-radius: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--bg-color-banner-footer);
  color: var(--text-color-white);
  border-top: solid 1px #696969;
}

#banner-footer a:link, #banner-footer a:active, #banner-footer a:visited {
  color: var(--text-color-light);
}

#banner-mega {
  padding: 1rem;
  border-radius: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--bg-color-banner-mega);
  color: var(--text-color-white);
}

#banner-mega a:link, #banner-mega a:active, #banner-mega a:visited {
  color: #e6e6e6;
}

#banner-mega a:hover, footer a:hover {
  color: var(--text-color-white);
  text-decoration: underline solid 1px;
  text-underline-offset: .3em;
}

.megafooter h4 {
  font-weight: 500;
}

.megafooter h5 {
  color: var(--text-color-white);
}

.megafooter ol {
  list-style: none;
  padding-inline-start: 0;
}


img {
  max-width: 100%;
  height: auto;
  width: auto\9;
}

.img-fluid {
  max-width: 100%;
  height: auto !important;
  content-visibility: auto;
}

.row-border {
  border: 1px solid var(--border-color-row);
}

/* use standard Bootstrap 5 responsive fonts until screen is large */

@media only screen and (min-width: 992px) {
  h1, .h1 {
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 2rem;
    font-size: 3rem;
  }

  h2, .h2 {
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
  }

  h3, .h3 {
    font-weight: 400;
    margin-top: 2rem;
    margin-bottom: 1.25rem;
  }

  h4, .h4 {
    font-weight: 400;
    margin-bottom: 1rem;
    margin-top: .5rem;
  }

  h5, .h5 {
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: .5rem;
  }

  h6, .h6 {
    font-weight: 600;
    margin-bottom: 1rem;
    margin-top: .5rem;
  }
}


/* Forces proper weight on H elements that users may bold or italicize */
#main-content strong h2, #main-content h2 strong, #main-content b h2, #main-content h2 b, #main-content em h2, #main-content h2 em, #main-content i h2, h2 i {
  font-weight: 600 !important;
  font-style: normal !important;
}

#main-content strong h3, #main-content h3 strong, #main-content b h3, #main-content h3 b, #main-content em h3, #main-content h3 em, #main-content i h3, #main-content h3 i {
  font-weight: 400 !important;
  font-style: normal !important;
}

.border-light {
  border-color: var(--border-color-light) !important;
}

.border-grey {
  border-color: var(--border-color-grey) !important;
}

.background-light {
  color: var(--bg-color-light);
}

.home-events a, .home-events a:visited {
  color: var(--text-color-white) !important;
}

.home-events a:hover {
  text-decoration: none !important;
}

.material-icons {
  vertical-align: -.25em;
}

.navbar-fixed-top {
  background-color: var(--bg-color-banner-mega);
  height: 90px;
  z-index: 1;
}

.bg-drkgrey {
  background-color: var(--bg-color-dark-grey) !important;
}

.bg-light {
  background-color: var(--bg-color-light) !important;
}

.bg-offwhite {
  background-color: rgba(245, 245, 245, 0.15) !important; /* #F5F5F5 with 15% opacity */
}


.list-button.bg-light:hover, .accordion-item .card-header.bg-light:hover {
  background-color: #e6e6e6 !important;
}

.bg-light > a:hover {
  color: var(--color-maroon) !important;
}


a.navbar-brand {
  margin-right: 20px;
}

.navbar-dark .navbar-toggler {
  color: #ffffffb3;
  border-color: var(--border-color-navbar-toggler);
}

.navbar-toggler {
  font-size: 1rem;
}

.navbar-expand-lg {
  width: 100% !important;
}

.nopad {
  padding: 0;
}

nav.breadcrumb {
  padding-left: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}

nav.breadcrumb ol {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

nav.breadcrumb li {
  display: inline;
}

nav.breadcrumb li + li::before {
  display: inline-block;
  margin: 0 .5em;
  transform: rotate(25deg);
  border-right: 1px solid #888;
  height: .75rem;
  content: '';
}

nav.breadcrumb [aria-current="page"] {
  color: #888;
  text-decoration: none;
}

nav.breadcrumb li {
  white-space: nowrap;
}

nav.breadcrumb li a {
  color: var(--text-color-grey) !important;
  text-decoration: underline solid 1px var(--border-color-breadcrumb);
  text-underline-offset: .3em;
}

nav.breadcrumb li a:hover {
  color: var(--color-red) !important;
  text-decoration: underline solid 2px var(--color-red);
  text-underline-offset: .3em;
}

/* ensures the proper breadcrump appears beneath jumbotron banners*/

.landing-page .standard-breadcrumb, .microsite-landing-page .microsite-breadcrumb {
  display: block;
  padding-left: 15px;
}

.landing-page .microsite-breadcrumb, .microsite-landing-page .standard-breadcrumb {
  display: none;
  padding-left: 15px;
}

#searchBox {
  color: #1a1a1a;
  font-size: 1rem;
  border: 1px var(--border-color-searchbox) solid;
  padding: 3px 3px 3px 5px;
  height: 36px;
  width: 72px;
  background: var(--bg-color-searchbox);
  margin-top: -1px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
}

#searchBox:focus {
  width: 230px;
}

#ss360SearchButton {
  color: var(--border-color-searchbox);
  font-size: 1rem;
  border: 1px var(--border-color-searchbox) solid;
  cursor: pointer;
  background-color: #0000;
  margin-left: -5px;
  height: 36px;
  width: 36px;
}

.subtitle {
  color: var(--text-color-dark);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.2rem;
  margin-bottom: 1rem;
  margin-top: .5rem;
  border-bottom: 1px #bbb solid;
}

/* =========== Turns list items into button-like boxes =========== */
.list-button {
  padding: 8px 10px;
  margin: 5px 0;
  height: 65px;
  border: 1px solid var(--border-color-list-button);
  text-decoration: none !important;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  box-shadow: 2px 2px var(--bg-color-list-button-shadow);
}

#main-content .list-button a {
  color: var(--color-maroon);
  text-decoration: none !important;
  display: block;
  width: 100%;
  max-width: 100% !important;
}

@media only screen and (max-width: 767px) {
  .list-button {
    width: 100%;
    max-width: 100% !important;
  }
}

@media (min-width: 768px) {
  .list-button {
    width: 49%;
    max-width: 100% !important;
  }

  .list-button:nth-child(even) {
    float: right;
  }
}


/* turns long lists into multiple columns */

.split-list li {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  .split-list li {
    flex-basis: 48%;
  }
}

@media (min-width: 1200px) {
  .split-list li {
    flex-basis: 30%;
  }
}

.column-split {
  list-style: none;
  padding: 0;
  margin: 0;
  column-count: 1;
  column-gap: 20px;
}

/* Large screens (e.g., desktops) */
@media (min-width: 992px) {
  .column-split {
    column-count: 2;
  }
}

/* Extra large screens (e.g., large desktops) */
@media (min-width: 1200px) {
  .column-split {
    column-count: 3;
  }
}


/* =========== Custom sidenav settings =========== */
.sidenav .nav-item a {
  text-decoration: none;
  color: #4f4f4f;
}

.sidenav .department a:hover {
  color: var(--color-red);
}

@media only screen and (max-width: 992px) {
  .department {
    font-size: 2rem;
  }
}

.sidenav a:hover {
  text-decoration: none;
  color: var(--color-red);
}

.sidenav .nav-item a:hover {
  color: var(--color-black);
}

.sidenav {
  background-color: transparent;
  overflow-x: hidden;
  padding-left: 0;
  padding-right: 0;
}

.sidenav .multilevel-linkul-0:has(.multilevel-linkul-1) {
  background-color: var(--text-color-white) !important;
}

.sidenav ul li a.activepage {
  border-left: .3rem solid var(--color-maroon) !important;
  background-color: var(--bg-color-sidenav-active) !important;
}

.currentbranch0 {
  font-weight: 600
  /*     background-color:#f8f9fa!important; */
}

.multilevel-linkul-0, .multilevel-linkul-1, .currentbranch0 a, .currentbranch1 a {
  background-color: var(--bg-color-sidenav-current-branch) !important;
}

.multilevel-linkul-0:has(.multilevel-linkul-1), ul:has(.multilevel-linkul-1) .currentbranch0 a {
  background-color: var(--text-color-white) !important;
}

.sidenav ul li a.activepage:hover {
  border-left: .3rem solid var(--color-maroon);
}

.sidenav ul {
  border-top: 1px var(--border-color-body) solid;
  background-color: var(--text-color-white);
}

.sidenav ul ul {
  padding-left: 0;
  border-top: 0;
  list-style-type: none;
}

.sidenav ul ul li a {
  padding-left: 1.75em;
  font-weight: 400;
}

.sidenav ul ul ul li a {
  padding-left: 2.75em;
}

.sidenav ul ul ul ul li a {
  padding-left: 3.75rem;
}

.sidenav nav ul li a {
  border-left: .2rem transparent solid;
  text-decoration: none;
  color: var(--text-color-body);
  display: block;
  padding: .75rem .5rem;
  border-bottom: 1px var(--border-color-body) solid;
  font-weight: 500;
  line-height: 1.5em;
}

.sidenav ul li a:hover {
  border-left-color: var(--bg-color-sidenav-hover);
  background-color: var(--bg-color-sidenav-hover);
}

.socialblock a {
  margin-left: 12px;
}

.socialblock a:hover {
  color: maroon;
  text-decoration: none;
}

/* =========== Custom accordion settings =========== */
.accordion {
  width: 100%;
  border: 0;
  text-align: left;
  outline: 0;
  transition: .2s;
}

.accordion .card {
  margin-bottom: 1em;
  /* border:1px solid #00000020!important; */
  color: #444;
}

.accordion .card-header:hover {
  background-color: var(--bg-color-accordion-hover);
}

.accordion .card-header a {
  text-decoration: none;
  border-bottom: none;
}

.accordion > .card .card-header {
  margin-bottom: 0;
  border-bottom: none;
}

.accordion h3 {
  font-size: 1.5em !important;
  margin-top: 1rem !important;
}

.accordion-item .fa-arrow-down, .accordion .fa-chevron-up {
  display: block;
}

.accordion .collapsed .fa-arrow-down, .accordion-item .collapsed .fa-chevron-up {
  display: none;
}

.accordion-item .fa-plus, .accordion-item .fa-chevron-down {
  display: none;
}

.accordion-item .collapsed .fa-plus, .accordion-item .collapsed .fa-chevron-down {
  display: block;
}

.away-arrow {
  color: gray;
  background-color: #E8E8E8;
  padding: 2px 4px;
  font-size: .6rem;
  font-weight: 800;
  border-radius: 3px;
  margin-bottom: 5px;
}

.active, .accordion:hover {
  background-color: var(--bg-color-accordion-active);
}

.twitter-feed {
  border: 1px solid var(--bg-color-twitter-facebook-feed);
  width: 100%;
}

.facebook-feed {
  border: 1px solid var(--bg-color-twitter-facebook-feed);
  width: 100%;
}

table {
  width: 100%;
  margin-bottom: 14px;
  border: 0;
  background: 0;
}

th, td {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 6px;
  padding-right: 12px;
  text-align: left;
  background: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--bg-color-table-striped) !important;
}

#bordered {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 14px;
  background: 0;
}

#bordered td, #bordered th {
  border: 1px solid var(--border-color-table);
  padding: 8px;
  background: 0;
}

#bordered th {
  background-color: var(--bg-color-table-bordered-th);
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
}

#alternating {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 14px;
}

#alternating td, #alternating th {
  border: 1px solid var(--border-color-table);
  padding: 8px;
}

#alternating tr:nth-child(even) {
  background-color: var(--bg-color-table-alternating);
}

#alternating th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: var(--bg-color-table-alternating-th);
  color: var(--color-black);
}

pre {
  white-space: pre-wrap;
}

.panel {
  margin: 0;
  padding: 0;
  background-color: var(--text-color-white);
  max-height: 0;
  overflow: hidden;
  transition: max-height .2s ease-out;
}

.panel p {
  padding: 10px 20px;
}

.modal-footer {
  background-color: var(--text-color-dark);
  color: var(--text-color-white);
}

.modal-footer div {
  text-align: left;
}

div.fac-staff-list {
  display: inline-block;
  padding-bottom: 1rem;
  width: 100%;
}

.ctr-crop {
  width: 100%;
  padding-top: 100%;
  background-position: top center;
  background-size: 100%;
  background-repeat: no-repeat;
  border-top: solid 1px var(--border-color-profile-image);
  border-left: solid 1px var(--border-color-profile-image);
  border-right: solid 1px var(--border-color-profile-image);
}

#TopBtn {
  display: none;
  position: fixed;
  bottom: 5px;
  right: 200px;
  z-index: 99;
  border: 0;
  outline: 0;
  background-color: var(--bg-color-top-btn);
  color: var(--color-black);
  cursor: pointer;
  padding: .8rem;
  border-radius: .25rem !important;
}

#TopBtn:hover {
  background-color: var(--bg-color-top-btn-hover);
}


#banner-footer {
  width: 100% !important;
  margin-bottom: 0;
}

.text-responsive {
  font-size: calc(100% + 1vw + 1vh);
}

#virtualcampusbar a:hover {
  text-decoration: none;
  color: #2a5786;
}

@media all and (max-width: 767px) {
  .display-1, .display-2, .display-3, .display-4 {
    line-height: 1.25em;
  }
}

/* ====================== Color specifics ====================== */
.brand-red, .solidRed {
  background-color: var(--color-red);
  color: var(--text-color-white) !important;
}

.brand-maroon, .solidMaroon, .brand-purple, .solidPurple {
  background-color: var(--color-maroon);
  color: var(--text-color-white) !important;
}

.brand-orange, .solidOrange {
  color: var(--color-black) !important;
  background-color: var(--color-orange);
}

.brand-yellow, .solidYellow {
  color: var(--color-black) !important;
  background-color: var(--color-yellow);
}

.brand-green, .solidGreen {
  color: var(--color-black) !important;
  background-color: var(--color-green);
}

.brand-blue, .solidBlue {
  background-color: var(--color-blue);
  color: var(--color-black) !important;
}

.brand-grey {
  color: var(--text-color-white) !important;
  background-color: var(--color-dark-grey);
}

.solidBlack {
  background-color: var(--color-black);
  color: var(--text-color-white);
}

.microsite-banner {
  font-weight: 700;
  padding: 10px;
  font-size: 1.8em;
}

.microsite .navbar-nav a {
  color: var(--text-color-light);
  text-decoration: none;
}

.microsite .navbar-nav a:hover {
  color: #e9ecef;
}

/* === colors tweaked for adequate contrast on light grey backgrounds === */
.green-text {
  color: var(--green-text-contrast) !important;
}

.maroon-text {
  color: var(--color-maroon) !important;
}

a.maroon-text:hover {
  color: var(--color-red) !important;
}

.red-text {
  color: var(--color-red) !important;
}

a.red-text:hover {
  color: var(--color-maroon) !important;
}

.blue-text {
  color: var(--blue-text-contrast) !important;
}

.orange-text {
  color: var(--orange-text-contrast) !important;
}

.grey-text {
  color: var(--grey-text-contrast) !important;
}

.light-grey-text {
  color: var(--text-color-light-grey);
}

a:hover .light-grey-text {
  color: #16181b !important;
}

/* ===== CSS for button background and hover colors, as well as reassigning bootstrap button colors ===== */
.btn, .btn > a {
  font-family: Arial, sans-serif !important;
  text-decoration: none !important;
}

#main-content .btn, #main-content .btn > a {
  min-width: 8rem;
}

.bluebutton, .bluebutton > a, .sobeybluebutton, .sobeybluebutton > a, .btn-info, .btn-info > a {
  background-color: var(--button-color-blue);
}

.redbutton, .redbutton > a, .btn-danger, .btn-danger > a {
  background-color: var(--button-color-red);
}

.greybutton, .greybutton > a, .btn-secondary, .btn-secondary > a {
  background-color: var(--button-color-grey);
}

.purplebutton, .maroonbutton, .purplebutton > a, .maroonbutton > a, .btn-primary, .btn-primary > a {
  background-color: var(--button-color-purple);
}

.greenbutton, .greenbutton > a, .btn-success, .btn-success > a {
  background-color: var(--button-color-green);
}

.redbutton, .greybutton, .purplebutton, .maroonbutton, .btn-primary, .redbutton > a, .greybutton > a, .purplebutton > a, .maroonbutton > a, .greenbutton > a, .btn-primary > a {
  color: var(--button-color-text-light) !important;
}

.yellowbutton, .yellowbutton > a, .btn-warning, .btn-warning > a {
  background-color: var(--button-color-yellow);
}

.orangebutton, .orangebutton > a {
  background-color: var(--button-color-orange);
}

.yellowbutton, .orangebutton, .yellowbutton > a, .orangebutton > a, .btn-warning, .btn-warning > a {
  color: var(--button-color-text-dark) !important;
}


.redbutton:hover, .redbutton > a:hover {
  background-color: var(--button-hover-color-red);
}

.greybutton:hover, .greybutton > a:hover {
  background-color: var(--button-hover-color-grey);
}

.btn-primary:hover, .btn-primary > a:hover,
.purplebutton:hover, .purplebutton > a:hover,
.maroonbutton:hover, .maroonbutton > a:hover {
  background-color: var(--button-hover-color-purple);
}

.greenbutton:hover, .greenbutton > a:hover {
  background-color: var(--button-hover-color-green);
}

.bluebutton:hover, .bluebutton > a:hover {
  background-color: var(--button-hover-color-blue);
}

.orangebutton:hover, .orangebutton > a:hover {
  background-color: var(--button-hover-color-orange);
}

.yellowbutton:hover, .yellowbutton > a:hover {
  background-color: var(--button-hover-color-yellow);
}


.btn-info:hover, .btn-info > a:hover,
.btn-danger:hover,
.btn-danger > a:hover,
.btn-secondary:hover,
.btn-secondary > a:hover,
.btn-primary:hover,
.btn-primary > a:hover,
.btn-success:hover,
.btn-success > a:hover {
  filter: brightness(95%) !important;
  color: var(--text-color-white) !important;
  transition: .25s;
  text-decoration: none !important;
}

.btn-warning:hover, .btn-warning > a:hover {
  filter: brightness(110%) !important;
  color: var(--color-black) !important;
  transition: .25s;
  text-decoration: none !important;
}

.btn:active, .btn:focus {
  background-color: var(--button-hover-color-red) !important;
  color: var(--text-color-white) !important;
}


.text-white a {
  color: var(--text-color-white);
}

/* ============== Gradient backgrounds ================== */
.gradientBluePurple {
  background-image: var(--gradient-blue-purple);
  color: var(--text-color-white);
}

.gradientBlueGrey {
  background-image: var(--gradient-blue-grey);
  color: var(--text-color-white);
}

.gradientPurpleGrey {
  background-image: var(--gradient-purple-grey);
  color: var(--text-color-white);
}

.gradientRedPurple {
  background-image: var(--gradient-red-purple);
  color: var(--text-color-white);
}

.gradientGreenGrey {
  background-image: var(--gradient-green-grey);
  color: var(--text-color-white);
}

.gradientGreenBlue {
  background-image: var(--gradient-green-blue);
  color: var(--text-color-white);
}

.gradientBlueGreen {
  background-image: var(--gradient-blue-green);
  color: var(--text-color-white);
}

.gradientRedGrey {
  background-image: var(--gradient-red-grey);
  color: var(--text-color-white);
}

.gradientOrangeRed {
  background-image: var(--gradient-orange-red);
  color: var(--text-color-white);
}

.gradientGreyBlack {
  background-image: var(--gradient-grey-black);
  color: var(--text-color-white);
}

.gradientBlackGrey {
  background-image: var(--gradient-black-grey);
  color: var(--text-color-white);
}

.gradientBlackBlue {
  background-image: var(--gradient-black-blue);
  color: var(--text-color-white);
}

/* ============= Title for gradient backgrounds ==================== */
.gradientTitle h2 {
  color: var(--text-color-white);
  padding: 15px;
  font-weight: 200;
  font-size: 22px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
}

.gradientTitle h2 a:link {
  color: var(--text-color-white);
}

.gradientTitle h2 a:visited {
  color: var(--text-color-white);
}

.gradientTitle h2 a:hover {
  color: var(--color-yellow);
}

.gradientTitle h2 a:active {
  color: #ff6a14;
}

.micrositev1 #banner-mega {
  display: none;
}

.micrositev1 .navbar-nav {
  Visibility: hidden;
}

/* ======= Styles for Content type "SMU5 Left image with right side text" and "Faculty Staff Bio Listings" =========== */
.profile-container {
  width: 100%;
  height: 100%;
  margin: auto;
}

.profile-image {
  float: left;
  /* width:250px;
       */
  /* height:100%;
       */
  padding: 20px;
  vertical-align: top;
}

.photo {
  max-width: 200px;
}

.profile-content {
  padding: 20px;
  vertical-align: top;
}

/* Table cells with red background */
.table-redBG {
  background-color: #6e0408;
  color: var(--text-color-white);
}

.table-redBG a:link, .table-redBG a:active, .table-redBG a:visited {
  color: var(--text-color-white);
}

@media only screen and (max-width: 1599px) {
  .max-width {
    max-width: 1200px !important;
  }
}

@media (min-width: 1600px) {
  .max-width {
    max-width: 1400px !important;
  }
}

/*
@media (min-width: 1920px) {
.max-width {
max-width:1600px!important
}
*/
}

.max-width-500 {
  width: 100%;
  max-width: 500px !important;
  height: auto;
}

/* ====================== S21 Overrides ================================== */
/* creates classes for the brand colors */
.bg-maroon {
  background-color: var(--color-maroon) !important;
}

.bg-blue {
  background-color: var(--color-blue) !important;
}

.bg-red {
  background-color: var(--color-red) !important;
}

.bg-orange {
  background-color: var(--color-orange) !important;
}

.bg-green {
  background-color: #84BD00 !important;
}

.bg-yellow {
  background-color: var(--color-yellow) !important;
}

.bg-darkgrey {
  background-color: #707070 !important;
}

.text-light a {
  color: var(--bg-color-light) !important;
}

.text-light a:hover {
  color: var(--text-color-white) !important;
}

.maroon, .purple {
  color: var(--color-maroon) !important;
}

.red {
  color: var(--color-red) !important;
}

.darkgrey {
  color: #303030 !important;
}

/* makes nav links darker than standard */
a.dropdown-toggle {
  font-weight: 500 !important;
}

.topnav .dropdown-item:hover, .topnav .dropdown-item:focus {
  background-color: #9d22354d;
}

/* ===== top nav saizes varies depending on screen ======== */
@media (max-width: 1199px) {
  .topnav .dropdown-toggle {
    font-size: .85em !important;
  }
}

/* ===== puts various versions of the h tag into the proper brand font and color, lnum makes sure Raleway numbers line up ======== */
h1, h2, h3, h4, .h1, .h2, .h3, .h4, h5, .h5, #home-main h3, #home-main .h3, #home-main h2, #home-main .h2, .home-news h2, .home-events h2, .card-title, .feature-stats, .mainfont, .brandfont, .sidenav .department a, .brag-points strong {
  font-family: "Raleway", Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--color-maroon);
  -webkit-font-feature-settings: lnum;
  -moz-font-feature-settings: lnum;
  font-feature-settings: lnum;
  line-height: 1.2em;
}

.h1, .h2, .h3, .h4, .h5 {
  display: block;
}

.feature-stats {
  font-size: 3.25rem;
}

/* defines the base font for all non header text */
p, ul, table {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

/* forces a header link hover colour */
a h1:hover, a h2:hover, a h3:hover, a h4:hover, a .card-title:hover {
  color: var(--color-red) !important;
  text-decoration: none !important;
}

/* ensures the card header is moderately bolded */
.feature-card h2, #home-topcards h2 {
  font-weight: 800;
  font-size: 1.5rem;
}

/* creates a grey/black background wave */
.wave::before, .wave-flipped::before {
  content: ' ';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .025;
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: contain;
}

.wave::before {
  background-image: url(https://keycdn.smu.ca/images/brandassets/wave/SMUwave_BLK.png);
}

.wave-flipped::before {
  background-image: url(https://keycdn.smu.ca/images/brandassets/wave/SMUwave_BLK_flipped.png);
}

.wave-footer::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .75;
  background-image: url(https://keycdn.smu.ca/webfiles/double-wave-green.png);
  background-repeat: no-repeat;
  background-position: right;
}

.wave-feature::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 50%;
  height: 50%;
  z-index: 0;
  opacity: .15;
  background-image: url(https://keycdn.smu.ca/images/brandassets/wave/SMUwave_WHT.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/* creates a white background wave in the features section */
.wave-feature::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 5%;
  bottom: 0;
  width: 50%;
  height: 50%;
  z-index: 0;
  opacity: .15;
  background-image: url(https://keycdn.smu.ca/images/brandassets/wave/SMUwave_WHT.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

/* creates a white background wave in the features section */
.wave-pattern {
  background: url(https://keycdn.smu.ca/images/brandassets/waves-bg-xsm.png) top center;
}

.simple-wave-bg {
  background-image: url(https://www.smu.ca/webfiles/SMU_White_Transparent.png);
  /* Set background image */
  background-size: cover;
  /* Make the background image cover the entire element */
  background-repeat: no-repeat;
  /* Prevent the background image from repeating */
  background-position: center
  /* Center the background image */
}

/* forces items above or below other elements on page. May need adjusting */
.footer-links {
  z-index: 10 !important;
}

#banner-footer, #banner-mega {
  z-index: 100;
}

/* lines for header areas where hr won't work due to text on either side */
.blue-line, .orange-line, .white-line {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 3px;
}

.blue-line {
  background-image: var(--line-blue);
}

.orange-line {
  background-image: var(--line-orange);
}

.white-line {
  background-image: var(--line-white);
}

/* gradient for footer card headers etc.*/
.gradient-m-r {
  background: var(--color-maroon);
  background: var(--gradient-maroon-red);
}

/* 45 degree gradient for card banner */
.gradient-m-r-card {
  background: var(--color-maroon);
  background: var(--gradient-maroon-red-card);
}

/* 80 degree gradient for bars */
.gradient-bg {
  background: var(--color-maroon);
  background: var(--gradient-bg-main);
}

/* feature cards have some features removed that regular cards have */
.feature-card .card-body:hover {
  background-color: var(--text-color-white) !important;
  background-image: none !important;
  opacity: 1 !important;
}

/* navigation menu tweaks */
.dropdown-menu {
  background-color: var(--bg-color-dropdown-menu);
}

/* reduces FontAwesome CLS */
nav i.fa-solid {
  min-width: 8px;
}

/* adjustment for recruitment buttoms below jumbotron */
a .recruitment-card:hover {
  background-color: var(--bg-color-light) !important;
}

/* simple tweaks */
.vertical-centre {
  top: 50%;
}

.transparent-bg {
  background-color: transparent !important;
}

a.hover-gray:hover {
  background-color: var(--bg-color-light);
}

.darker-blue {
  color: var(--text-color-darker-blue);
}


@media only screen and (max-width: 576px) {
  #main-content .jumbotron .jumbotron-btn {
    min-width: 75%;
  }
}

/* ============= Styles for brag points box ============== */
.brag-points strong {
  color: var(--color-red);
  text-transform: uppercase;
  display: block;
  line-height: 1.25rem;
}

/* ============= Rounded Styles ============== */
.rounded-corners {
  border-radius: 1.5rem !important;
}

.rounded-card-top {
  border-radius: 1.5rem 1.5rem 0 0 !important;
}

.roundedtopcard, .roundedtop {
  border-radius: .5rem .5rem 0 0 !important;
}

.roundedbottomcard, .roundedbottom {
  border-radius: 0 0 .5rem .5rem !important;
}

.roundedcard {
  border-radius: .5rem !important;
}

.roundedsm {
  border-radius: .25rem !important;
}

.roundedmd {
  border-radius: .5rem !important;
}

.roundedlg {
  border-radius: 1.5rem !important;
}

.landing-page .lead, .landing-page .general-content, .landing-page .accordion, .landing-page-no-cards .lead, .landing-page-no-cards .general-content, .landing-page-no-cardss .accordion, .microsite-landing-page .lead, .microsite-landing-page .general-content, .microsite-landing-page .accordion, .microsite-landing-page-no-cards .lead, .microsite-landing-page-no-cards .general-content, .microsite-landing-page-no-cardss .accordion {
  padding-left: 15px;
  padding-right: 15px;
}

.general-content p,
.general-content ul, 
.general-content ol {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.general-content .lead p {
  font-weight: 400;
  font-size: clamp(1.25rem, 2.00vw, 1.75rem);
}

.general-content .card p,
.general-content .card ul,
.general-content .card ol,
.general-content .accordion-item,
.general-content .btn,
.general-content .list-button,
.general-content .highlight-box p, .general-content .highlight-box ul , .general-content .highlight-box ol,
.general-content table p, .general-content table ul, .general-content table li {
  font-size: 1rem;
}

.clearboth {
  clear: both;
}

/* ========== Sobey Landing Page Link Blocks Styles ============ */
.cnt_block2 {
  margin-bottom: 16px;
  -webkit-transition: background-color 200ms ease-in;
  -webkit-transition-delay: 0;
  -moz-transition: background-color 200ms ease-in 0;
  -o-transition: background-color 200ms ease-in 0;
  transition: background-color 200ms ease-in 200ms;
  border-top: 5px solid var(--bg-color-link-block-sobey);
}

.cnt_block2 a {
  display: block;
  margin: -4px 0 0 5px;
  padding: 16px 22px 16px 17px;
  color: var(--color-black);
  background-color: var(--bg-color-link-block-sobey-link);
  -webkit-transition: background-color 200ms ease-in, color 200ms ease-in;
  -webkit-transition-delay: 0, 0;
  -moz-transition: background-color 200ms ease-in 0, color 200ms ease-in 0;
  -o-transition: background-color 200ms ease-in 0, color 200ms ease-in 0;
  transition: background-color 200ms ease-in 100ms, color 200ms ease-in 200ms;
}

.cnt_block2 a:hover {
  color: var(--text-color-white);
  background-color: var(--bg-color-link-block-sobey-hover);
  text-decoration: none;
}

.cnt_block2 a:hover h3 {
  color: var(--text-color-white);
  text-decoration: none;
}

.cnt_block2 a:hover p {
  color: var(--text-color-white);
}

.cnt_block2:hover {
  background-color: var(--bg-color-link-block-sobey-hover);
}

/* forces a header link hover colour */
.cnt_block2 a h3:hover {
  color: var(--text-color-white) !important;
  text-decoration: none !important;
}

/* End code for Sobey Landing Page Link Blocks Styles */
/* slight line branding forsobey pages */
.sobey-navline {
  border-bottom: 3px solid var(--border-color-sobey-navline) !important;
}

/* for the navigation box inside the sobey jumbotron header */
.header-nav-box {
  position: absolute;
  width: 350px;
  bottom: 0;
  right: 12.5%
}

/* Sobey partner icons styles*/
.partnerhover img {
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  margin-right: 15px;
  padding: 0;
}

.partnerhover a:hover img {
  opacity: .5;
}

/* Related Links Box Styles */
.related-links a:hover {
  color: var(--bg-color-link-block-sobey);
  text-decoration: underline;
}

/* If the screen size is less than 992px (l in Bootstrap 5), remove the wave pattern */
@media screen and (max-width: 991px) {
  .wave-pattern {
    background: none !important;
  }
}

/* ======== Responsive headline and nav link settings ============== */
.feature-headline {
  font-weight: 800 !important;
}

/* If the screen size is 1600px or more, set the nav font size to 2.25em */
@media screen and (min-width: 1600px) {
  .feature-headline {
    font-size: 1.75em !important;
  }
}

/* If the screen size is less than 1600px, set the nav font size to 1.65 */
@media screen and (max-width: 1599px) {
  .feature-headline {
    font-size: 1.65em !important;
  }
}

/* ======== Microsite settings ============== */
.microsite-title a {
  color: var(--bg-color-light);
  text-decoration: none;
}

.microsite-title a:hover {
  color: var(--text-color-white);
}

.microsite-nav a {
  border-bottom: none !important;
  text-decoration: none;
  font-size: 1em;
  color: var(--color-black);
  font-weight: 500;
  line-height: 1em;
}

/* ======== Edit link ============== */
.t4Edit-page {
  color: var(--text-color-white);
  font-size: x-large;
  background-color: var(--bg-color-edit-page);
  position: absolute;
  bottom: 10px;
  right: 5px;
  width: 50px;
  z-index: 101;
}

.edit-link a:hover, #banner-footer a:hover {
  color: var(--text-color-white);
}

/* =============== This adds a tint layer to jumbotrons and carousels ======================= */
.bg-tint {
  background-color: var(--bg-color-tint) !important;
  background-blend-mode: multiply;
}

.carousel-item:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-color-carousel-overlay) !important;
  background-blend-mode: multiply;
}

.bg-tint h1, .bg-tint .h1, .bg-tint h2, .bg-tint .h2, .bg-tint a, .bg-tint h1, .carousel .h1, .carousel h2, .carousel .h2, .carousel a, .small-banner-text, .small-banner-text a {
  color: var(--text-color-white);
  text-shadow: var(--text-shadow-dark);
}

.bg-tint a:hover, .carousel a:hover {
  color: var(--text-color-light);
}

.bg-no-tint h1, .bg-no-tint .h1, .bg-no-tint h2, .bg-no-tint .h2, .bg-no-tint a, .bg-no-tint h1, .carousel .h1, .carousel h2, .carousel .h2, .carousel a {
  color: var(--text-color-white);
  text-shadow: var(--text-shadow-dark);
}

.bg-no-tint a:hover, .carousel a:hover {
  color: var(--text-color-light);
}

@media screen and (min-width: 768px) {
  .two-col {
    -moz-column-count: 2 !important;
    -moz-column-gap: 5rem !important;
    -webkit-column-count: 2 !important;
    -webkit-column-gap: 5rem !important;
    column-count: 2 !important;
    column-gap: 20px !important;
  }
}


/* ===== adds an arrow to links that open new windows or tabs ====== */
/* #main-content p a[target="_blank"]::after, #main-content ul a[target="_blank"]::after, #main-content ol a[target="_blank"]::after {
content: "\000A0\000A0\f08e";
font-family: 'Font Awesome 5 Pro';
font-size: x-small;
text-decoration: none !important;
display: inline;
}
*/

/* ====================== These styles add icons after specific media links ===================== */
a[href$=".pdf"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  color: var(--icon-color-pdf);
  content: "\00a0\f1c1" !important;
}

.jumbotron a[href$=".pdf"]::after, #banner-footer a[href$=".pdf"]:after, .ind-microsite-nav a[href$=".pdf"]:after {
  color: var(--text-color-white) !important;
}

a[href$=".docx"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  content: "\00a0\f1c2" !important;
}

a[href$=".pptx"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  content: "\00a0\f1c4" !important;
}

/* Add lock icon after SharePoint links */
a[href*="sharepoint"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  vertical-align: top;
  content: "\00a0\f023" !important;
}

/* Add arrow icon after eventbrite links */
a[href*="eventbrite"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  vertical-align: top;
  content: "\00a0\f08e" !important;
}

/* Add profile icon after uniweb links */
a[href*="uniweb"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  vertical-align: top;
  content: "\00a0\f406" !important;
}

/* Add open book icon after courseleaf links */
a[href*="courseleaf"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  vertical-align: top;
  content: "\00a0\f133" !important;
}

/* Add book icon after Flipbook links */
a[href*="/flips/"]::after {
  font-family: "Font Awesome 6 Pro";
  font-size: small !important;
  font-weight: 400;
  vertical-align: top;
  content: "\00a0\f518" !important;
}

.card a[href$=".docx"]::after, .card a[href*="eventbrite"]::after, .card a[href*="sharepoint"]::after, .card a[href$=".pdf"]::after, .ss360-list a[href$=".pdf"]::after, .jumbotron a[href*="eventbrite"]::after, .button-block a[href*="eventbrite"]::after {
  content: "" !important;
}

.card a::after, .ss360-list a::after, .jumbotron a::after, .button-block a::after {
  content: "" !important;
}


/* stops any icon appearing beside a linked image */
a:has(> img)::after {
  content: "" !important;
}


.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/*=================== These styles define the print layout ==================== */
@media print {
  @page {
    size: 8.5in 11in;
    margin: 3cm 2cm;
  }

  #main-content {
    width: 100%;
  }

  p, ul, ol, table {
    font-size: 12pt;
  }

  .list-button {
    justify-content: left !important;
  }
}

.bodynav .li::marker {
  content: "\f04d";
  font-family: "FontAwesome";
  color: var(--icon-color-bodynav);
  padding-right: 1em !important;
}

/* ===== Blur effect for tutorial site ===== */
#blur {
  filter: blur(3px);
  -webkit-filter: blur(2px);
}

/* ===== Styles built into Bootstrap 5 - to help with transition ====== */
.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-none {
  text-decoration: none;
}

.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

/* ===== stops gallery images from being vertically oversize ====== */

@media (max-width: 1399px) {
  .fancybox__content:has(.gallery-image) {
    max-width: 500px;
  }
}

@media (min-width: 1400px) {
  .fancybox__content:has(.gallery-image) {
    max-width: 700px;
  }
}

/* ===== add context to previous and next links navigation item ====== */
.section-iterator a:first-child:before {
  content: previous:" ";
}

.section-iterator a:second-child:before {
  content: next:" ";
}

/* ===== Used with publications content type ====== */
.publish-image {
  float: left;
  vertical-align: top;
  padding-top: 3px;
  margin: 0 10px 15px;
}

.publish-image img {
  max-width: 175px;
  /* you can use % */
  height: auto !important;
}

/* ===== button-block spacing ====== */
.button-block {
  margin-left: auto;
  margin-right: auto;
}

.landing-page .button-block {
  padding-left: 1rem !important;
}

/* ===== ensures content after floated button is cleared ====== */
.button-block.float-md-left:last-of-type + ::after, .button-block.float-md-left:only-of-type + ::after {
  content: "";
  clear: both;
  display: table;
}

.gradient-text {
  font-weight: 800;
  background: var(--gradient-text-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header-bg-wave {
  background-position: bottom right;
  background-repeat: no-repeat;
  background-image: url(https://keycdn.smu.ca/webfiles/header-wave-transparent.png);
}

.bottom-right-corner-pattern-white, .bottom-right-corner-pattern-black, .bottom-right-corner-pattern-trans {
  background-position: bottom right;
  background-repeat: no-repeat;
}

.bottom-right-corner-pattern-white {
  background-image: url(https://www.smu.ca/webfiles/bottom-right-corner-pattern-white.png);
}

.bottom-right-corner-pattern-black {
  background-image: url(https://www.smu.ca/webfiles/bottom-right-corner-pattern-black.png);
}

.bottom-right-corner-pattern-trans {
  background-image: url(https://www.smu.ca/webfiles/bottom-right-corner-pattern-trans.png);
}

/* ===== simple motion effects ====== */
.hover-lighter:hover {
  filter: brightness(105%);
  transition: .25s;
}

.hover-darker:hover {
  filter: brightness(98%);
  transition: .25s;
}

.hover-shadow:hover {
  box-shadow: 0 5px 5px #21252940 !important;
  transition-duration: 250ms;
}

/* Default fade-in effect using keyframes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0; /* Ensure the element is initially hidden */
  animation: fadeIn 1s ease-in-out forwards;
}

/* Disable fade-in for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
    opacity: 1 !important;
  }
}

/* Disable fade-in for mobile devices */
@media (max-width: 768px) {
  .fade-in {
    animation: none;
    opacity: 1 !important;
  }
}

.hover-zoom {
  transition: all .1s ease-in-out;
}

.hover-zoom:hover {
  transform: scale(1.01);
}

.hover-rise {
  transition: .25s ease-in-out;
}

.hover-rise:hover {
  transform: translate(0, -3px);
}

.move-up {
  animation: moveUp 1.25s ease forwards;
  animation-iteration-count: 1;
}

@keyframes moveUp {

}


.playbutton {
  position: relative;
}

.playbutton::before {
  content: "\f144"; /* Font Awesome play icon */
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: calc(5rem + 5vw); /* adjust icon size as needed */
  color: var(--text-color-white); /* adjust icon color as needed */
  opacity: 0.7;
}

.playbutton:hover::before {
  opacity: 0.9; /* maintain opacity on hover */
}


/* ===== removes arrow to links in nav areas ====== */
#main-content nav a[target="_blank"]::after {
  content: "" !important;
}


/* ===== an effect that casues a div to rise into place when it enters the viewport ====== */
.delay-rise {
  opacity: 0;
  transform: translateY(200px);
  animation: rise 1s ease-out forwards;
  animation-fill-mode: forwards; /* Keep final animation state */
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* fixes a Bootstrap 5 issue where form errors casue alignment issues */
.form-group {
  vertical-align: top !important;
}


/* ACCESSIBILITY FIXES and ENHANCEMENTS */


/* No-motion preference */
@media (prefers-reduced-motion: reduce) {
  .delay-rise {
    transform: none;
  }
}

/* ===== turn off simple motion effects to respect no-motion preference ====== */
@media (prefers-reduced-motion) {
  .move-up, .fade-in, .hover-zoom, .visible, .hidden {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
    animation: none !important;
  }
}

a:focus-visible {
  outline: 3px solid var(--focus-outline-color) !important;
  outline-offset: 2px;
}

footer a:focus-visible {
  outline: 3px solid var(--focus-outline-color-footer) !important;
  outline-offset: 2px;
}


/* ===== make the skipnav link visible on focus ====== */

.skipnav:focus, .skipnav:focus-visible {
  position: absolute; /* Use absolute positioning */
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
  left: 50%;
  transform: translateX(-50%);
  top: 5px; /* Position from top */
  padding: 5px;
  z-index: 1000; /* Ensure it's on top */
  margin: 0;
  border: 2px solid var(--border-color-skipnav);
  outline: none !important;
}


/* ===== makes card activation visible on focus ====== */

.card.onelink:has(.stretched-link:focus-visible) {
  outline: 2px solid var(--border-color-card-focus);
  outline-offset: -5px;
}

.card.onelink a:focus-visible {
  outline: 0 !important;
}

/* ===== adds stroke to text ====== */
.stroke {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--text-stroke-color);
  paint-order: stroke fill;
}