/*
    Note that this file is not actually being referenced in the public site.  To include this file, upload it as the CSS file at SV > Marketing > Public View > Configuration.

/* START OF DEFAULT THEME */

/*
  A customized version of the Bootswatch Spacelab theme (http://bootswatch.com).
*/

@import url("/restricted/3rdPartyTools/deployed/bootstrap/themes/bootswatch.spacelab.custom.css");

/*!
  You can change the theme to a non-customized version by replacing the above import statement
  with the following statement.

@import url("/restricted/3rdPartyTools/deployed/bootstrap/themes/bootswatch.spacelab.min.css");
*/

/* END OF THEME */

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

SFU BRAND COLORS
#CC0633 RED 
#A6192E DARK RED

HEADERS TEXT LINKS
#CC0633 RED (text hover)
#A6192E DARK RED
#414042 BLACK (text)
#6D6F71 GREY (links)

BORDERS & RULES
#A7A9AC GREY (input borders)
#E6E7E8 LIGHT GREY (rules, outline border)

BACKGROUND
#FFFFFF WHITE
#F5F5F5 LIGHT GREY
#CC0633 RED
#A6192E DARK RED

FOOTER
#414042 GREY
#49484a LIGHT GREY
DARK GREY
*/

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

CODE TABLE OUTLINE

- HTML
- HEADER
-- Header1
-- Top Ribbon
-- Cart
-- Login Dropdown
-- LoginInfo / LoginName / Logout
-- Header2
-- Header3
--- Global Nav
--- Mobile Navigation Toggle
- BODY
-- Headings
-- Glyphicons
-- a links
-- Button
--- Custom Button
-- Sidebar Nav
--- Nav-link sublink
-- Panel
-- Card
-- Table
-- PV Home
-- Application Profile
-- Enrollment Academic History
- INSTRUCTOR VIEW
-- Instructor Navigation
-- Course Page
- FOOTER
-- Footer 1
-- Footer 2
-- FooterNav
-- Copyright
- SECTION PROFILE
- MEDIA QUERIES
-- Breakpoints
-- Mobile Cars - 991 table to card conversion
- MODERN CAMPUS LOGO
- HOT FIXES

--------------------------------------------------------------------------------------------------------------------------

/* Get Started Styles.  These styles are intended for helping users to get started for branding their public sites.
   Users may want to override one or more of the following css styles. */


/*==========================================================*/

/* PROD PUBLIC VIEW - Hide student account creation */

/* #newStudentDiv {
    display: none;
} */

/*==========================================================*/

/* HEADER START */

/* Language bar
   Default Position on definitionsConfig.jsp: Header0
   Corresponding jsp file - languageBar.jsp */

/* Set container for header and main content */
#header1ContentWrapper, #topRibbonContainer, #header3Container, #mainContentContainer.container, #footer1Wrapper .container {
    max-width: 1820px;
}


#header0Wrapper {
    /* background-color: <Insert Color Code> !important; */
}

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

/* Header1 */

/* Top Header
   Default Position on definitionsConfig.jsp: Header1
   Corresponding jsp file - topHeader.jsp

   Header 1 - center (logo, cart icon, login link) */


#header1Container {
    max-width: 100% !important;
}

#header1 {
    padding-top: 0px !important;
}

/* Top Ribbon */
#topRibbon {
    position: absolute;
    left: 0px;
    background-color: #f5f5f5;
    color: #cc0633;
    height: 35px;
    margin: 0px 0px 15px 0px;
    padding-top: 5px;
    text-transform: uppercase !important;
    width: 100%;
}

#topRibbon ul {
    display: block;
    list-style-type: disc;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    unicode-bidi: isolate;
}

#topRibbon ul li {
    display: inline-block;
    float: right;
    list-style: none;
    margin-left: 2rem;
}

#topRibbon a {
    color: #CC0633 !important;
    font-family: "Barlow Condensed", Arial, sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

#topRibbon a:hover {
    color: #A6192E !important;
}

/* Header 1 full length */
.navbar-dark {
    background-color: #FFFFFF !important;
    border: none !important;
  }  


  .glyphicon-shopping-cart {
      color: grey;
  }

  #cartCount, .badge-warning {
    background-color: #CC0633;
}

#header1ContentWrapper {
    margin: 34px auto 8px auto !important;
}

#topRibbonContainer {
    margin: auto !important;
}

#schoolLogoContainer a#header-cs {
    text-decoration: none !important;
    color: #414042 !important;
}
#schoolLogoContainer a#header-cs:hover {
    text-decoration: none !important;
    color: #CC0633 !important;
}

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

/* Cart */

/* Cart properties */
.glyphicon-shopping-cart {
    /* color: <Insert Color Code>; */
}

/* Cart counter properties */
#cartCount {
    /* background-color: <Insert Color Code>; */
}

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

/* Login Drowpdown */

/* Login dropdown properties */
.headerStudentLoginContainer .headerStudentLoginDropdownLink {
    color: #CC0633 !important;
    font-family: "Barlow Condensed", Arial, sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.headerStudentLoginContainer .headerStudentLoginDropdownLink:hover {
    color: #A6192E !important;
}

.headerStudentLoginContainer .dropdown-menu {
    /* Login dropdown menu square border radius */
    border-radius: 0px !important;
}

.headerStudentLoginContainer .dropdown-item {
    /* Login Dropdown item color override to all caps, no underline, no text-shadow */
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.headerStudentLoginContainer .dropdown-item:hover {
    /* Login Dropdown item overrid background color override to dark red */
    background-color: #A6192E !important;
    /* Login Dropdown item overrid link:hover to white */
    color: #FFF !important;
}

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

/* LoginInfo / LoginName / Logout */

.loginInfo {
    /* "Welcome" override color to red */
    color: #6D6F71 !important;
    font-family: "Barlow Condensed", Arial, sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    text-shadow: none !important;

}

#loginNameWrapper {
    width: 80% !important;
    text-align: right !important;
}

#logoutLinkWrapper {
    float: right !important;
    width: 100% !important; 
    min-width: 100px !important;
    max-width: 20% !important;
}

#loginNameWrapper a, #logoutLinkWrapper a {
    /* Name and Logout link override color */
    color: #CC0633 !important;
    font-family: "Barlow Condensed", Arial, sans-serif !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
}

#loginNameWrapper a:hover, #logoutLinkWrapper a:hover {
    color:#A6192E !important;
}

.headerProfileLink, .headerStudentLoginLogoutLink {
    /* Adds margin-left-right to name and logout links */
    margin: 0px 10px !important;
}

#logoutLinkWrapper:before, .conferenceLogoutButtonWrapper:before {
    color: #E6E7E8 !important;
    content: "| ";
    font-family: "Barlow", Arial, sans-serif !important;
    font-weight: 400 !important;
}

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

/* Header2 */

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

/* Header3 */

#header3Wrapper {
    background-color: #CC0633 !important;
}

#header3Container {
    border: none !important;
}

/* Global Nav
   Default Position on definitionsConfig.jsp: header3Sub1
   Corresponding jsp file - globalNavigationEmbeddable.jsp and globalNavigation.jsp */

/* Global nav center properties */
#globalNavigationBar {
    /* background-color: <Insert Color Code> !important; */
}

/* MainNavbar properties */

.mainNavBar .navbar-nav {
    /* Main navbar text align left */
    margin-left: 0px !important;
}

.mainNavBar .nav-link:hover, .mainNavBar .nav-link:active, .mainNavBar .nav-link:focus  {
    background-color: #A6192E;
    color: #FFF;
}

.navbar-light.bg-light, .navbar-light.bg-light .navbar-collapse {
    background-image: none !important;
    background-color: #CC0633 !important;
    border: none !important;
}

/* Nav-item properties */

/* Nav-link properties */
.navbar-light .navbar-nav .nav-link {
    color: #FFF !important;
    font-family: "Barlow Condensed", Arial, sans-serif !important;
    font-weight: 700 !important;
    padding: 0.3rem 1.5rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

/* Hide Special Request Link */
#studentMenu > ul.nav > li:last-child {
    display: none;
  }

/* Nav-link sublink */
#studentMenu ul.subMenu .nav-link {
    text-transform:none !important;
}

/* Header 3 global navigation drop down menu */

.navbar-nav>li>.dropdown-menu a {
    text-transform: uppercase;
    text-decoration: none;
}

.navbar-nav>li>.dropdown-menu > .active > a {
    background-color: #A6192E !important;
}
.navbar-nav>li>.dropdown-menu:hover {
    /* background-color: <insert color code> */
}

/* Header 3 global navigation drop down menu label */
.dropdown-menu > li > a:hover, .dropdown-menu .subMenu > li > a:hover {
    background-color: #A6192E !important;
    color: #FFF !important;
}


/* Mobile Navigation Toggle */

.navbar-light .navbar-toggler {
    border: none !important;
    margin-right: 10px !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("/images/SFUpublicView/navigation/menu-collapsed.png");
    width: 4em;
    height: 1.8em;
    /* background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") */
}   

.navbar-toggler.m-2[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("/images/SFUpublicView/navigation/menu-open.png");
}

.navbar-light.bg-light .navbar-toggler:hover, .navbar-light.bg-light .navbar-toggler:focus {
    /* Removes grey mobile nav toggle background color */
    background-color: #CC0633 !important;
}

/* Mobile Collapsable Nav Dropdown */


#mainNavBarCollapsable #nav1, #mainNavBarCollapsable #nav2  {
    /* Student and instructor login link */
    z-index: 10 !important;
}


#mainNavBarCollapsable li a.dropdown-toggle {
    /* Post login Student Account, Instructor Account dropdown-toggle
    Makes dropdown toggle list iten clickable */
    z-index: 10 !important;
}

/* Custom mobile nav-items  contact us and canvas link */
.mobile-nav-item {
    display: none !important;
}


/* HEADER END */

/*==========================================================*/

/* BODY START */

body {
    color: #414042 !important;
    font-family: "Barlow", Arial, sans-serif !important;
    font-size: 1.1rem !important;
    font-style: normal !important;
    font-weight: 400 !important;
}

/* Main page background */
#pageContainer {
    background-color: #FFFFFF !important;
}

#mainContentContainer.container {
    /* Remove left-right border of content container */
    border: none !important;
    padding-top: 30px !important;
}


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

/* Headings */

h1, h2, h3, h4, h5, h6 {
    color: #414042;
    font-family: "Barlow Condensed", Arial, sans-serif !important;
    font-weight: 700 !important;
}

h1 {
    font-size: 2.9rem !important;
    margin-bottom: 35px !important;
    text-transform: uppercase !important;
}

h2.modal-title {
    margin: 0px 0px !important;
}

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

/* Glyphicon */

.glyphicon.glyphicon-info-sign, .glyphicon.glyphicon-question-sign {
    color: #A6192E !important;
}

/* Glyphicon overrides */ 
.glyphicon-plus:before {
    color: #cc0633 !important;
  }
  
  .glyphicon-minus:before {
    color: #cc0633 !important;
  }

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

/* a Links */

a {
    color:#6d6f71;
    text-decoration: underline;
}

a:hover {
   color: #CC0633 !important; 
}

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

/* Button */

.btn {
    font-family: "Barlow Condensed", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 1.1em !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    text-align: center !important;
    appearance: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    background-image: none !important;
    text-shadow: none!important;
    margin-bottom: 10px !important;
}
.btn-primary {
    background-color: #cc0633 !important;
    border: 1px solid #cc0633 !important;
    color: #FFF !important;
}
.btn-primary:hover {
    background-color: #A6192E !important;
    border: 1px solid #A6192E !important;
    color: white !important;
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 100) !important;
    border: 1px solid #cc0633 !important;
    color: #cc0633 !important;
}

.btn-secondary:hover {
    background-color: #A6192E !important;
    color: white !important;
}

.btn-sm { 
    font-size: 0.9em !important;
    padding: 10px 20px !important;
}

.radio.custom-control.custom-radio button.btn {
    /* inline Edit and Delete buttons are smaller than default button */
    font-size: 0.9em !important;
    margin-bottom: 0px !important;
    padding: 2px 16px !important;
}

.radio.custom-control.custom-radio button.btn:first-of-type {
    /* Adds a margin-left to Edit button only to allow extra space between line entry and buttons */
    margin-left: 20px !important;
}

#pageStudentForgotPassword #buttonCancel, #pageStudentForgotUserName #buttonCancel {
    /* hides second cancel button on password recovery page */
    display: none !important;
}

/* Custom Buttons */

.modal-footer btn-secondary:hover {
    /* modal footer button */
    background-color: #cc0633 !important;
    border: 1px solid #cc0633 !important;
    color: #FFF !important;
}

.modal-footer btn-secondary {
    /* modal footer button hover*/
    background-color: rgba(255, 255, 255, 0) !important;
    border: 1px solid #cc0633 !important;
    color: #cc0633 !important;
    font-size: 0.9em !important;
    margin-bottom: 0px !important;
    padding: 10px 20px !important;
}

.modal-footer btn-primary {
    font-size: 0.9em !important;
}

#pageApplicationInstanceList .btn {
    /* reduces button left-right padding for My Applications page only to correct misalignment*/
    padding: 10px 30px !important;
}

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

/* Sidebar Nav */

.sidebarScrollSpy .nav-link {
    color: #414042 !important;
    font-size: 0.85rem !important;
    padding-top: .6rem !important;
    padding-bottom: 0.6rem !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}

.sidebarScrollSpy .nav-link:hover {
    background-color: #A6192E !important;
    color: #FFF !important;
}

.sidebarScrollSpy .nav-item.active {
    background-color: #F5F5F5 !important;
}

.sidebarScrollSpy .nav-item.active> a, .sidebarScrollSpy .nav-link.active {
    /* sidebar nav active state */
    background-color: #F5F5F5 !important;
    color: #cc0633 !important;
}

.sidebarScrollSpy .nav-item.active> a, .sidebarScrollSpy .nav-link.active {
    /* Removes border-left from nav-item active state */
    border: none !important;
}

.sidebarScrollSpy .nav-pills .nav-link {
    /* Remove curved borders form Sidebar nav-pill */
    border-radius: 0px !important;
}



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

/* Panel */

.panel-default {
    border-color: #F5F5F5 !important;
}

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

/* Cards */

.card {
    /* remove background gradient */
    background-image: none !important;
    /* Add 15px vertical space between cards */
    margin-bottom: 15px !important;
}

.card.sectionHeader h2 {
    color: #414042 !important;
}

.card .table-striped tbody tr:nth-of-type(odd) {
    /* alternate table background color light grey */
    background-color: #EDEDED;
}

.card .table > tbody > tr > td {
    /* Adjust padding of card table (courses) */
    padding: 1rem !important;
}


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

/* Table */

#academicHistoryEnrolledCourses .form-group {
    /* minimizes vertical gap between buttons on student course page */
    margin-bottom: 0px !important;
} 

#academicHistoryEnrolledCourses .form-group button.btn {
    /* forces full width button in column */
    width: 100% !important;
} 


/*==========================================================*/

/* PV HOME */

#pagePublicHome #mainContentContainer {
    display: none !important;
}

#pageHeader h1 {
    font-size: 2.3rem !important;
}

/*==========================================================*/

/* APPLICATION PROFILE */

#pageApplicationProfile button#buttonBack {
    /* Hides back button on page because we do not want students pulled deeper into portal */
    display: none !important;
}

#pageApplicationProfile #pageHeader h1::after {
    /* Append the word 'Application' to the h1 */
    content: " Application";
  }

/*==========================================================*/

/* COURSE PROFILE */

#pageCourseProfile #searchBreadcrumb {
    /* Hides search results breadcrumbs */
    display: none !important;
}

#pageCourseProfile #courseProfileActions {
    /* Hides course profile action bar with icons */
    display: none !important;
}

#pageCourseProfile button.buttonReqInfo {
    /* Hides Request Info button */
    display: none !important;
}

/*==========================================================*/

/* COURSES ACADEMIC HISTORY */

#pageStudentWithdrawalRequest form p.pageHelpText {
    font-weight: 700 !important;
}


/*==========================================================*/

/* INSTRUCTOR VIEW */

/* Instructor Navigation */

#instructorMenu ul.nav li:nth-child(5), #instructorMenu ul.nav li:nth-child(6) {
/* hide in navigation: 5, Forms and Policies, 6,Announcements */
/* Can not target specific navigation item, done using nth-child.*/
    display: none;
}

/* Login Drowpdown */

#pageInstructorClassList button#buttonEmailAll, #pageInstructorClassList button#buttonEmailSelected {
    /* Removed Email all button from Instructor Course list */
    /* Removed Email selected students button from Instructor Course list */
    display: none !important;
}

/* Instructor Home */

#pageInstructorHome #instructorHomeAnnouncements {
    /* Hide Announcements card on Instructor home */
    display: none !important;
}

/* Instructor Profile */

div.instructorProfileUsernamePasswordContainer, div.instructorProfileUsernamePasswordPanel {
    display: none !important;
}

/* Instructor Course Schedule */

#pageInstructorTimetable .studentCourseSchedule th:last-child,
#pageInstructorTimetable.studentCourseSchedule td:last-child  {
    display: none;
}

/* BODY END */

/*==========================================================*/

/* FOOTER START */

/* Footer
   Default Position on definitionsConfig.jsp: footer1Sub1
   Corresponding jsp file- bottomNavigation.jsp */

footer {
    background-color: #414042 !important;
    color: #FFFFFF !important;
    margin-top: 35px !important;
}

footer p {
    margin-bottom: 10px !important;
}

footer a {
    text-decoration: none !important;
}

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

/* Copyright
   Default Position on definitionsConfig.jsp: footer2Sub2
   Corresponding jsp file- copyright.jsp */

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

/* Footer 1 */
#footer1Wrapper .container {
    /* Remove left-right border */
    border: none !important;
}

#footer1Container {
    background-color: #414042 !important;
    padding-top: 30px !important;
}

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

/* Footer 2 */

/* Footer2Sub2 full length */
#footer2Wrapper {
    background-color: #333333 !important;
}

#footer2Wrapper .container {
    /* Remove left-right border */
    border: none !important;
}

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

/* FooterNav */

#footerNav h5, #footerNav h6, #footerNav p  {
    /* font color: white */
    color: #d7d7d7 !important;
}

#footerNav h5 {
    color: #FFFFFF !important;
    font-family: "Barlow Condensed", Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    font-size: 1.3rem !important;
    line-height: 1.8em;
}

#footer p {
    font-size: .9rem !important;
}

#footer1 a {
    color: #FFFFFF !important;
    font-family: "Barlow Condensed", Arial, sans-serif;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
}

#footerNav .col-lg-3:first-of-type, #footerNav .col-lg-3:nth-child(2) {
    /* Footer background: light grey, col 1 and col 2 */
    background-color: #49484a !important;
    padding: 30px 30px !important;
}

.footerConnect p {
    /* bc-sans indigenous custom font */
    font-family: "BC-Sans Regular", "Barlow Condensed", Arial, sans-serif !important;
}

.footerNav #footer-sfu-logo-top { 
    display: block;
    margin-bottom: 15px;

}
.footerNav #footer-sfu-logo-bottom { 
    display: none;
    margin-top: 15px;
}

/* FOOTER END */

/*==========================================================*/

/* SECTION PROFILE START */

/* Section Header */
.sectionHeader {
  /* background-image: none; */
  /* background-color: <Insert Color Code>; */
  /* border-color: <Insert Color Code>; */
}

/* Secondary Section Header */
.sectionHeaderSecondary {
  /* background-image: none; */
  /* background-color: <Insert Color Code>; */
  /* border-color: <Insert Color Code>; */
}

#buttonChangeCredentials {
    /* Add vertical space top to Change my Credential Button  */
    margin-top: 15px !important;
}

/* HIDE Contact Method */
fieldset#contactMethod div.radio:nth-last-of-type(2), fieldset#contactMethodOptions{
    /* Hides contact method options radio and checkbox*/
    display: none;
}

/* HIDE salutation */
div#studentInfoSalutation {
    display: none;
}

/* Profile checkout */
#studentProfilePreferredContactMethodPanel {
    /* hides preferred contant method dropdown */
    display: none !important;
}

/* SECTION PROFILE END */

/*==========================================================*/

/* MEDIA QUERIES */

@media (max-width: 767px) {
    /* xs */

    #topRibbon {
        /* hides the tipRibbon for sm+md*/
        display: none;
    }
    h1 {
        font-size: 1.6rem !important;
    }
    h2 {
        font-size: 1.3rem !important;
    }
    h3 {
        font-size: 1.1rem !important;
    }

    #header1ContentWrapper {
        /* absolute position of header1wrapper over navigation*/
        position: absolute;
        left: -15px;
        width: calc(100% - 75px) !important;
        margin: unset !important;
    }

    #schoolLogoContainer {
        /* hides default header1 branding for sm. Mobile version displayed */
        display: none;
    }

    #schoolLogoContainerMobile h1 {
        /* styles the page h1 mobile heading for*/
        margin: 0px 0px 0px 15px;
        line-height: .7em !important;
        text-shadow: none;
    }

    #schoolLogoContainerMobile h1 a {
        /* styles the page h1 mobile heading for*/
        font-size: 1.2rem !important;
        color: #414042 !important;
        text-decoration: none !important;
        margin-top: 0px !important;
    }

    /* Navbar items */
    #sfuMobileLogo {
        position: fixed;
        z-index: 100;
        top: 0px;
    }
    #sfuMobileHeading {
        margin-top: 60px;
    }

    #cartInfo {
        position: fixed !important;
        z-index: 100;
        top: 15px;
        text-align: left !important;
    }

    #header3Wrapper {
        position:absolute;
        z-index: 99 !important;
    }

    #header3 {
        position: fixed !important;
        width: 100%;
        z-index: 1;
        top: 0px;
    }

    #navBackgroundMobileContainer {
        position: absolute;
        left: 0px;
        z-index: 1;
    }
    #navBackgroundMobileRed{
        width: 100vw;
        height: 51px; 
        background-color: #CC0633;
    }
    #navBackgroundMobileWhite{
        width: 100vw;
        height: 50px; 
        background-color: #FFF;
    }

    #mainNavBarCollapsable {
        height: 100vh;
    }

    /* nav-items edit font-size padding */
    .mobile-nav-item {
        /* Custom mobile nav-items  contact us and canvas link */
        display: block !important;
        background-color: #FFFFFF !important;
    }

    #nav-link-cs a{
        /* Custom mobile nav-items  First nav-item Continuing Studies */
        color:#414042 !important;
        font-size: 22px !important;
    }
    .navbar-light .navbar-nav .mobile-nav-item .nav-link{
        /* Custom mobile nav-items  contact us and canvas link */
        color:#CC0633 !important;
    }

    .navbar-light .navbar-nav .nav-link {
        /* controls font-size and padding of mobile list-item links */
        font-size: 18px !important;
        padding: .3rem .7rem !important;
    }

    .glyphicon-shopping-cart {
        color: white;
    }
    #cartCount, .badge-warning {
        background-color: grey;
    }

    button.navbar-toggler {
        /* moves toggle menu button to the very front*/
        z-index: 10;
    }

    .btn {
        font-size: .8rem !important;
    }

    #mainContent {
        /*load page content lower to clear mobile page h1 */
        margin-top: 80px;
    }

    .footerNav #footer-sfu-acknowledgement {
        margin-top: 15px 0px !important;
    }

    .footerNav #footer-sfu-logo-top { display: none;}
    .footerNav #footer-sfu-logo-bottom { display: block;}

    label {
        /* push behind mobile menu nav-items */
        z-index: 0 !important;
    }

}

@media (min-width: 768px) {
    /* sm */
    #schoolLogoContainerMobile, #navBackgroundMobileContainer {
        /* hides header1 mobile branding for all all except */
        display: none;
    }
    #cartInfo {
        margin-top: 15px !important;
    }
}

@media (max-width: 991px) {

}
@media (min-width: 992px) {
    /* md */
}

@media (min-width: 1200px) {
    /* lg */
}

@media (min-width: 1880px) {
    /* xl */

}

/*==========================================================*/

/* MOBILE CARDS */

@media (max-width: 991px) {

    /* My Courses: Completed -------------------------------------------------*/
    .card .table#academicHistoryCompletedCourses > tbody > tr > td {
        padding: 0.5rem !important;
        padding-left: 0.8rem !important;
        padding-top: 2rem !important;
    }
    
    #academicHistoryCompletedCourses,
    #academicHistoryCompletedCourses thead,
    #academicHistoryCompletedCourses tbody,
    #academicHistoryCompletedCourses th,
    #academicHistoryCompletedCourses td,
    #academicHistoryCompletedCourses tr {
      display: block;
      width: 100%;
    }
  
    #academicHistoryCompletedCourses thead {
      display: none;
    }
  
    #academicHistoryCompletedCourses tr {
      margin-bottom: 1rem;
      padding: 1rem;
      border: 1px solid #ddd;
      border-radius: 6px;
      background: #f9f9f9;
    }
  
    #academicHistoryCompletedCourses td {
      box-sizing: border-box;
      padding: 8px;
      border: none;
      position: relative;
      padding-left: 50%;
    }
  
    #academicHistoryCompletedCourses td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      top: 8px;
      font-weight: bold;
      white-space: nowrap;
      width: 45%;
    }
  
    #academicHistoryCompletedCourses td.courseTitleImage {
      width: 100%;
      padding-left: 0;
    }
  
    #academicHistoryCompletedCourses td.enrolled,
    #academicHistoryCompletedCourses td.grade {
      display: inline-block;
      width: 50%;
      vertical-align: top;
    }
  
    #academicHistoryCompletedCourses td.d-none.d-lg-table-cell {
      display: block;
      width: 100%;
      margin-top: 10px;
    }

    #academicHistoryCompletedCourses td.courseTitleImage .form-group {
        margin-top: 20px !important;
        margin-bottom: 0px !important;
    }

    td.courseTitleImage .form-group.reviews {
        display: none;
    }


    /* My Courses: Enrolled -------------------------------------------------*/

    .card .table#academicHistoryEnrolledCourses > tbody > tr > td {
        padding: 0.5rem !important;
        padding-left: 0.8rem !important;
        padding-top: 2rem !important;
    }
    
    #academicHistoryEnrolledCourses {
        width: 100%;
        border-collapse: collapse;
      }
    
      #academicHistoryEnrolledCourses thead {
        display: none;
      }
    
      #academicHistoryEnrolledCourses tbody tr {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        background: #f9f9f9;
      }
    
      #academicHistoryEnrolledCourses td {
        position: relative;
        box-sizing: border-box;
        border: none;
        padding: 8px 8px 8px 50%;
        width: 100%; /* fallback */
      }
    
      #academicHistoryEnrolledCourses td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 8px;
        font-weight: bold;
        width: 45%;
        white-space: nowrap;
      }
    
      /* After reorder: First td (original col 1) - 80% */
      #academicHistoryEnrolledCourses td:nth-child(1) {
        order: 1;
        width: 90%;
      }
    
      /* After reorder: Second td (was col 5) - 20% */
      #academicHistoryEnrolledCourses td:nth-child(2) {
        order: 2;
        width: 10%;
      }
    
      /* After reorder: Third and fourth td (original col 2 and 3) - 50% */
      #academicHistoryEnrolledCourses td:nth-child(3),
      #academicHistoryEnrolledCourses td:nth-child(4) {
        order: 3;
        width: 50%;
      }
    
      /* After reorder: Fifth td (original col 4) - 100% */
      #academicHistoryEnrolledCourses td:nth-child(5) {
        order: 4;
        width: 100%;
        margin-top: 10px;
      }

      #academicHistoryEnrolledCourses a.courseName {
          margin-bottom: 15px !important;
      }

      #academicHistoryEnrolledCourses td.courseTitleImage .form-group {
        margin: 0px 0px !important;
    }

    /* My Courses: Transfered -------------------------------------------------*/

    .card .table#academicHistoryTransferredCourses > tbody > tr > td {
        padding: 0.5rem !important;
        padding-left: 0.8rem !important;
        padding-top: 2rem !important;
    }
    
    #academicHistoryTransferredCourses {
        width: 100%;
        border-collapse: collapse;
      }
    
      #academicHistoryTransferredCourses thead {
        display: none;
      }
    
      #academicHistoryTransferredCourses tbody tr {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        background: #f9f9f9;
      }
    
      #academicHistoryTransferredCourses td {
        position: relative;
        box-sizing: border-box;
        border: none;
        padding: 8px 8px 8px 50%;
        width: 100%; /* fallback */
      }
    
      #academicHistoryTransferredCourses td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 8px;
        font-weight: bold;
        width: 45%;
        white-space: nowrap;
      }

      #academicHistoryTransferredCourses td.enrolled,
      #academicHistoryTransferredCourses td.actions {
      display: inline-block;
      width: 100%;
      vertical-align: top;
    }

    /* My Courses: Dropped -------------------------------------------------*/

    .card .table#academicHistoryWithdrawnCourses > tbody > tr > td {
        padding: 0.5rem !important;
        padding-left: 0.8rem !important;
        padding-top: 2rem !important;
    }
    
    #academicHistoryWithdrawnCourses {
        width: 100%;
        border-collapse: collapse;
      }
    
      #academicHistoryWithdrawnCourses thead {
        display: none;
      }
    
      #academicHistoryWithdrawnCourses tbody tr {
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #ccc;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        background: #f9f9f9;
      }
    
      #academicHistoryWithdrawnCourses td {
        position: relative;
        box-sizing: border-box;
        border: none;
        padding: 8px 8px 8px 50%;
        width: 100%; /* fallback */
      }
    
      #academicHistoryWithdrawnCourses td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 8px;
        font-weight: bold;
        width: 45%;
        white-space: nowrap;
      }

      #academicHistoryWithdrawnCourses td.dropped,
      #academicHistoryWithdrawnCourses td.actions {
      display: inline-block;
      width: 100%;
      vertical-align: top;
    }


  }

/*==========================================================*/

  /* HOTFIX */

.table-responsive > .table > thead > tr > th, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tfoot > tr > td {
    /* Enables text-wrapping */
    white-space: wrap !important;
}

.cartHeader, .cartItemName {
    font-size: 1.2rem !important;
}

/*==========================================================*/

/* Modern Campus Logo */

.poweredByDestinyOne { 
    position: unset !important;
    padding: 20px 0px !important
}