html { 
    scroll-behavior: smooth; 
}

:focus {
	box-shadow: 0 0 0 6px rgba(64,180,229,0.5),0 0 0 1px rgba(0,33,69,1) !important;
}

/*** Make footer stick to the bottom ***/
html, body {
    height: 100% !important;
}

@media (min-width: 768px) {
    body {
        display: grid;
    }
}

footer {
    position: sticky !important;
    top: 100vh !important;
}
   

/*** Helper page instructions ***/
body[id='How to Create an Account'] hr,
body[id='How to Create a Family Account'] hr,
body[id='How to Register a Family Account'] hr,
body[id='Tuition tax receipts'] hr {
    border-top: 1px solid rgba(0, 0, 0, 0.4);
}

body[id='How to Create an Account'] .screenshot,
body[id='How to Create a Family Account'] .screenshot,
body[id='How to Register a Family Account'] .screenshot,
body[id='Tuition tax receipts'] .screenshot {
	width: 100%;
	max-width: 650px;
	margin-bottom: 20px;

	-webkit-box-shadow: 4px 4px 4px 0px rgba(102,102,102,0.35);
	-moz-box-shadow: 4px 4px 4px 0px rgba(102,102,102,0.35);
	box-shadow: 4px 4px 4px 0px rgba(102,102,102,0.35);
	border: solid 1px rgba(0,0,0,0.5);
	padding: 10px;
}

body[id='How to Create an Account'] .screenshot.left-side,
body[id='How to Create a Family Account'] .screenshot.left-side,
body[id='How to Register a Family Account'] .screenshot.left-side,
body[id='Tuition tax receipts'] .screenshot.left-side { 
	max-width: 380px;
    float: left;
    margin-right: 40px; 
}

body[id='How to Create an Account'] .screenshot.right-side,
body[id='How to Create a Family Account'] .screenshot.right-side,
body[id='How to Register a Family Account'] .screenshot.right-side,
body[id='Tuition tax receipts'] .screenshot.right-side {
	max-width: 380px;
    float: left;
}

body[id='How to Create an Account'] a#back-top,
body[id='How to Create a Family Account'] a#back-top,
body[id='How to Register a Family Account'] a#back-top,
body[id='Tuition tax receipts'] a#back-top {
	text-decoration: none;
	border: 0;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Arial;
	font-size: 13px;
	line-height: 1.0;
	background: #002145;
	color: #fff !important;
	text-decoration: none !important;
	padding: 8px 18px;
	display: inline-block;
	cursor: pointer;
	border-radius: 50px;

	bottom: 0;
	margin: 1.5rem;
	position: fixed;
	right: 0;
	z-index: 50;
}

body[id='How to Create an Account'] a#back-top .the-arrow,
body[id='How to Create a Family Account'] a#back-top .the-arrow,
body[id='How to Register a Family Account'] a#back-top .the-arrow,
body[id='Tuition tax receipts'] a#back-top .the-arrow {
	display: inline-block;
	margin-top: -1px;
	padding-left: 1px;
	vertical-align: text-top;
}

body[id='How to Create an Account'] a#back-top:focus-visible,
body[id='How to Create an Account'] a#back-top:focus,
body[id='How to Create an Account'] a#back-top:hover,
body[id='How to Create a Family Account'] a#back-top:focus-visible,
body[id='How to Create a Family Account'] a#back-top:focus,
body[id='How to Create a Family Account'] a#back-top:hover,
body[id='How to Register a Family Account'] a#back-top:focus-visible,
body[id='How to Register a Family Account'] a#back-top:focus,
body[id='How to Register a Family Account'] a#back-top:hover,
body[id='Tuition tax receipts'] a#back-top:focus-visible,
body[id='Tuition tax receipts'] a#back-top:focus,
body[id='Tuition tax receipts'] a#back-top:hover {
	color: #002145 !important;
  	text-decoration: none;
  	background: #fff;
	box-shadow: 0px 0px 0px 2px #002145 inset;  
}

body[id='How to Create an Account'] p,
body[id='How to Create a Family Account'] p,
body[id='How to Register a Family Account'] p,
body[id='Tuition tax receipts'] p { 
	line-height: 1.7; 
}
/*** END Helper page instructions ***/



/*** Login page boxes ***/
#pageCheckoutLogin .card.card-body.sectionHeader { 
    border: 0 
}
  
#pageCheckoutLogin #newStudentDiv h2,
#pageStudentLogin #newStudentDiv h2,
#pageCLPCheckoutLogin #newStudentDiv h2 {
    font-weight: 600 !important;
}

body#pageCheckoutLogin div.col-md-4 .card-body.sectionHeader h2 {
	font-weight: bold !important;
}

body#pageStudentLogin #newStudentDiv .sectionHeader,
body#pageCheckoutLogin .card.card-body.sectionHeader,
body#pageCLPCheckoutLogin .card.card-body.sectionHeader,
body#pageStudentLogin form[name='portalLogonForm'] > div.col-md-12,
body#pageCheckoutLogin form[name='publicPersonalLogonForm'] > div.col-md-12,
body#pageCLPCheckoutLogin form[name='publicPersonalLogonForm'] > div.col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {
    #pageCheckoutLogin div#contentModule1 .col-md-8, 
    #pageStudentLogin div#existingStudentDiv.userForm.col-md-8,
    #pageCLPCheckoutLogin div#existingStudentDiv.col-md-8
    {
          max-width: 100%;
          flex: auto;
    }
  
   #pageCheckoutLogin div#contentModule1 .col-md-4,   
   #pageStudentLogin div#newStudentDiv.userForm.col-md-4,
   #pageCLPCheckoutLogin div#newStudentDiv.col-md-4 {
          flex: auto;
          max-width: 100%;
          border-width: 30px 30px 0 15px;
    }
}
/*** END Login page boxes ***/


/*** Override Whitney font styles based on UBC branding guidelines ***/
h1 { 
    font-weight: 400 !important;
    line-height: 1.3;
}

h2 {
    font-weight: 400 !important;
}

  
/*** Make mobile menu align to the left ***/
@media (max-width: 767px) {
    div#pageContainer div#header3Container {
        display: block;
        max-width: none;
    }
    
    nav#globalNavigationBar {
        padding: 0;
    }
    
    nav#globalNavigationBar ul.nav.navbar-nav {
        padding: 0 0 20px 0;
    }
}
  
  
/*** Fixes to colours for accessibility ***/
form .has-float-label label {
    opacity: 1 !important;
    color: #666;
}

.form-control {
    border: 1px solid #757575;
    border-radius: 0;
    box-sizing: border-box;
    color: #222 !important;
    max-width: 100%;
}
  
.btn-secondary { 
    background-color: #fff !important;
    border-color: #002145 !important;
    color: #002145 !important;
    border-width: 2px;
    border-radius: 0;
    padding: 12px 17px !important;
}	

.btn-secondary:focus,
.btn-secondary:hover { 
    background-color: #002145 !important;
    border-color: #002145 !important;
    color: #fff !important;
    border-radius: 0;
    padding: 12px 17px !important;
    border-width: 2px;
}
  
.btn-primary { 
    background-color: #002145 !important;
    border-color: #002145 !important;
    color: #fff !important;
    border-radius: 0;
    padding: 12px 17px !important;
    border-width: 2px;
}

.btn-primary:focus,
.btn-primary:hover { 
    background-color: #fff !important;
    border-color: #002145 !important;
    color: #002145 !important;
    border-width: 2px;
    border-radius: 0;
    padding: 12px 17px !important;
}	
  
.cartCheckoutButton:focus span:before,
.cartCheckoutButton:hover span:before { 
    color: #002145 !important;
}

.negativeAmount { 
    color: #dd0000 !important;
}
  
div#ubc7-wordmark > a,
div#ubc7-wordmark span.ubc7-campus,
div#ubc7-logo > a {
    color: #002145;
}

a[id*='Popup'] span.sr-only {
    color: #002145;
}

.modal-body a,
main#mainContent a { 
    color: #002145;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.modal-body a:focus,
.modal-body a:hover,
main#mainContent a:focus,
main#mainContent a:hover {
    color: #2f5d7c;
    text-decoration: underline;
}
  
#dropdownMenu1.sr-only {
    color: #fff;
    background: #002145;
}
  
@media (min-width: 768px) {
    #mainNavBarCollapsable {
        overflow: inherit;
    }
}

@media (min-width: 768px) and (max-width:991px) {
    #mainNavBarCollapsable .nav-item {
        margin-left: 9px;
    }
}
  
@media (max-width: 767px) {
    #mainNavBarCollapsable {
        overflow: hidden;        
    }

    #mainNavBarCollapsable li.nav-item {
        margin-left: 0.5rem;
        width: 100%;
    }

    #mainNavBarCollapsable li.nav-item a.nav-link {
        width: 100%;
        max-width: 95%;
        padding-left: 15px;
    }

    #mainNavBarCollapsable li.nav-item a.nav-link#nav1 {
        margin-top: 7px;
    }

    div#headerWrapper { /* hide the annoying tiny horizontal scroll */
        overflow-x: hidden;
    }
}
  
nav#globalNavigationBar button.navbar-toggler {
    border: solid 1px #002145;
}

div.custom-skip-to-content-area {
    position: fixed;
    width: 100%;
    top: -200px;
    left: 20px;
    z-index: 9999;
}
  
div.custom-skip-to-content-area a { 
    position: absolute;
    top: -9999px;
    font-size: 16px;
    border: 0 !important;
    background-color: #002145;
    padding: 10px;
    text-align: center;
    color: #fff;
    left: 0;
}
  
div.custom-skip-to-content-area a:focus,
div.custom-skip-to-content-area a:focus-visible {
    display: block;
    top: 212px !important;
    z-index: 9999;
    text-align: center;
    width: 185px;
    text-decoration: none;
}

div.custom-skip-to-content-area a:hover {
    text-decoration: underline;
}

body.llis-exl :focus {
    box-shadow: 0 0 0 6px #40b4e580,0 0 0 1px #002145 !important;
    outline: none;
}

body.llis-ubco nav#globalNavigationBar button.navbar-toggler {
    border: solid 1px #fff;
    filter: brightness(0);
}

span#cartCount { 
	background-color: #f5ce3e;
	color: #002145;
    display: inline-block;
    min-width: 20px;
    min-height: 20px;
}

body.llis-lfs span#cartCount {
    background-color: #002145;
    color: #fff;
}

body.llis-ubco span#cartCount {
    background-color: #ffb200;
    color: #002145;
}

/*** new and improved alert banner with session cookie ***/
#variableContentBlockCM000004 p {
    font-weight: 400;
    line-height: 1.5;
}

#variableContentBlockCM000004 p:last-of-type {
    margin-bottom: 0;
}

#variableContentBlockCM000004 a {
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

#variableContentBlockCM000004 a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

#variableContentBlockCM000004 a:focus,
#variableContentBlockCM000004 a:focus-visible { 
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1) !important;
    outline: none;
}

button#custom-close-alert-button {
    border: 0;
    display: inline-block;
    background: none;
    color: #fff;
    position: absolute;
    top: 10px;
    right: 10px;
    flex: none;
    margin: 0;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 300px;
    line-height: 0;
}

button#custom-close-alert-button em {
    font-size: 25px;
    -webkit-text-stroke: 1.4px #0680a6;
    line-height: 1.2;
}

button#custom-close-alert-button:focus-visible {
    background: #fff;
    color: #0680a6;
    box-shadow: 0 0 0 2px #0680a6,0 0 0 5px #fff !important;
    outline: none;
}

button#custom-close-alert-button:hover {
    background: #fff;
    color: #0680a6;
}

button#custom-close-alert-button:focus-visible em,
button#custom-close-alert-button:hover em {
    -webkit-text-stroke: 1.4px #fff;
}

#variableContentBlockCM000004 { /* We need to set alert to display none. The alert will show based on jQuery session cookie. */
    /* display: none; */
    position: relative;
    background-color: #0680a6;
    color: #fff;
    padding: 25px 55px 25px 25px;
}

@media (min-width: 1200px) {  
    #variableContentBlockCM000004 { /* put some extra padding on the right to fix orphaned word on banner */
        padding-right: 70px;
    }

body.llis-default #header1ContentWrapper, 
body.llis-exl #header1ContentWrapper, 
body.llis-ubco #header1ContentWrapper, 
body.llis-lfs #header1ContentWrapper,
body.llis-brimm #header1ContentWrapper {
height: 115px;
}
}
/*** END new and improved alert banner with session cookie ***/

body.llis-default #header1Container, 
body.llis-exl #header1Container, 
body.llis-ubco #header1Container, 
body.llis-lfs #header1Container,
body.llis-brimm #header1Container {
  border-left: 1px solid #d7e0e7;
  border-right: 1px solid #d7e0e7;
}


body.llis-default #header1ContentWrapper, 
body.llis-exl #header1ContentWrapper, 
body.llis-ubco #header1ContentWrapper, 
body.llis-lfs #header1ContentWrapper,
body.llis-brimm #header1ContentWrapper {
height: 95px;
}
/*** HEADER BANNER FOR EXL ***/
body.llis-exl #header3Wrapper,
body.llis-exl #header3Container,
body.llis-exl #header3Wrapper .mainNavBar {
	background-color: #f5ce3e !important;
}

body.llis-exl .navbar-light .navbar-nav .nav-link {
	color: #002145 !important;
}

body.llis-exl #header2Wrapper {
	background-color: #002145 !important;
	padding: 1.2rem 0;
	font-size: 1.2rem;
}

body.llis-exl #cartInfo .glyphicon-shopping-cart {
	color: #fff !important;
}

body.llis-exl .header2nav {
	justify-content: space-between;
	margin-right: 0.5rem;
	align-items: center;
}

body.llis-exl .header2nav .brand-slogan {
	display: block;
	text-decoration: none !important;
	color: #fff;
	line-height: 20px;
	letter-spacing: 1px;
	line-height: 20px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

body.llis-exl .header2nav_right {
	display: flex;
}

body.llis-exl #header3Wrapper .mainNavBar .navbar-nav a:focus-visible,
body.llis-exl #header3Wrapper .mainNavBar .navbar-nav a:hover {
	background: #fff;
}

body.llis-exl #header2Wrapper a:focus {
    box-shadow: 0 0 0 4px #fff,0 0 0 1px #002145 !important;
    outline: none;
}
/*** END HEADER BANNER FOR EXL ***/




/*** HEADER BANNER FOR LFS ***/
body.llis-lfs #header3Wrapper,
body.llis-lfs #header3Container,
body.llis-lfs #header3Wrapper .mainNavBar {
	background-color: #E6E6E6 !important;
}

body.llis-lfs .navbar-light .navbar-nav .nav-link {
	color: #002145 !important;
    font-family: 'Whitney SSm A', 'Whitney SSm B', Arial;
}

body.llis-lfs #header2Wrapper {
	background-color: #00A74A !important;
	padding: 1.2rem 0;
	font-size: 1.2rem;
}

body.llis-lfs #cartInfo .glyphicon-shopping-cart {
	color: #fff !important;
}

body.llis-lfs .header2nav {
	justify-content: space-between;
	margin-right: 0.5rem;
	align-items: center;
}

body.llis-lfs .header2nav_right {
	display: flex;
} 

body.llis-lfs .header2nav_left {
	display: block;
	text-decoration: none!important; 
	color: #fff!important;
	line-height: 20px; 
	text-shadow: 1px 1px #222;		
}

body.llis-lfs #header3Wrapper .mainNavBar .navbar-nav a:focus-visible,
body.llis-lfs #header3Wrapper .mainNavBar .navbar-nav a:hover {
	background: #002145;
    color: #fff !important;
}                
/*** END HEADER BANNER FOR LFS ***/



/*** HEADER BANNER FOR UBCO ***/
body.llis-ubco #header3Wrapper,
body.llis-ubco #header3Container,
body.llis-ubco #header3Wrapper .mainNavBar {
  background-color: #e6e6e6 !important;
}

body.llis-ubco #globalNavigationBarUBCO {
  background-color: #002145 !important;
  padding: 0 1rem;
}

body.llis-ubco .navbar-light .navbar-nav .nav-link {
  color: #002145 !important;
  font-family: 'Whitney SSm A', 'Whitney SSm B', Arial;
}

body.llis-ubco #header2Wrapper {
  background-color: #002145 !important;
  padding: 1.2rem 0;
  font-size: 1.2rem;
}

body.llis-ubco #cartInfo .glyphicon-shopping-cart,
body.llis-ubco #loginInfo {
  color: #fff !important;
}

body.llis-ubco .header2nav {
  justify-content: space-between;
  margin-right: 0.5rem;
  align-items: center;
}

body.llis-ubco .header2nav .brand-slogan {
  display: block;
  text-decoration: none !important;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 20px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

body.llis-ubco .header2nav_right {
  display: flex;
}

body.llis-ubco #loginDropdownMenuLink {
  color: #fff !important;
}

body.llis-ubco .navbar-light .navbar-toggler-icon {
  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, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

body.llis-ubco .navbar-light .navbar-toggler {
  color: white;
  border-color: white;
}

body.llis-ubco #header3Wrapper .mainNavBar .navbar-nav a:focus-visible,
body.llis-ubco #header3Wrapper .mainNavBar .navbar-nav a:hover {
  background: #0055b7;
  color: #fff !important;
}

body.llis-ubco #loginInfo #loginNameWrapper,
body.llis-ubco #loginNameWrapper .headerProfileLink, 
body.llis-ubco #loginInfo #logoutLinkWrapper, 
body.llis-ubco #loginInfo .headerStudentLoginLogoutLink {
  color: #fff !important;
}
/*** END HEADER BANNER FOR UBCO ***/

/*** HEADER BANNER FOR BRIMM ***/
body.llis-brimm #header3Wrapper,
body.llis-brimm #header3Container,
body.llis-brimm #header3Wrapper .mainNavBar {
	background-color: #CA5C30 !important;
}

body.llis-brimm .navbar-light .navbar-nav .nav-link {
	color: #FFF !important;
}

body.llis-brimm #header2Wrapper {
	background-color: #002145 !important;
	padding: 1.2rem 0;
	font-size: 1.2rem;
}

body.llis-brimm #cartInfo .glyphicon-shopping-cart {
	color: #fff !important;
}

body.llis-brimm .header2nav {
	justify-content: space-between;
	margin-right: 0.5rem;
	align-items: center;
}

body.llis-brimm .header2nav .brand-slogan {
	display: block;
	text-decoration: none !important;
	color: #fff;
	line-height: 20px;
	letter-spacing: 1px;
	line-height: 20px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}

body.llis-brimm .header2nav_right {
	display: flex;
}

body.llis-brimm #header3Wrapper .mainNavBar .navbar-nav a:focus-visible,
body.llis-brimm #header3Wrapper .mainNavBar .navbar-nav a:hover {
	background: #f2F2F2;
    color: #002145!important;
}

body.llis-brimm #header2Wrapper a:focus {
    box-shadow: 0 0 0 4px #fff,0 0 0 1px #002145 !important;
    outline: none;
}
/*** END HEADER BANNER FOR BRIMM ***/




/*** HEADER BANNER FOR DEFAULT ***/
body.llis-default #header3Wrapper,
body.llis-default #header3Container,
body.llis-default #globalNavigationBar {
  background-color: #e6e6e6 !important;
}

body.llis-default .navbar-light .navbar-nav .nav-link {
  color: #002145 !important;
}

body.llis-default #header2Wrapper {
  background-color: #002145 !important;
  padding: 1.2rem 0;
  font-size: 1.2rem;
}

body.llis-default #cartInfo .glyphicon-shopping-cart,
body.llis-default #loginInfo {
  color: #FFF !important;
}

body.llis-default .header2nav {
  justify-content: space-between;
  margin-right: 0.5rem;
  align-items: center;
}

body.llis-default .navbar-light .navbar-nav .nav-link:focus {
	background: #d8d8d8;
}

body.llis-default .header2nav_left a {
  display: block;
  text-decoration: none !important;
  color: #fff;
  line-height: 20px;
}

body.llis-default .header2nav .brand-slogan {
  display: block;
  text-decoration: none !important;
  font-size: 20px;
  letter-spacing: 1px;
  line-height: 20px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}

body.llis-default .header2nav_right {
  display: flex;
}

body.llis-default #loginDropdownMenuLink {
  color: #fff !important;
}

body.llis-default #header3Wrapper .mainNavBar .navbar-nav a:hover {
  background: #d8d8d8;
  color: #002145;
}
/*** END HEADER BANNER FOR DEFAULT ***/


/*** FOOTER NAVIGATION FOR EXL ***/
body.llis-exl #footer1Wrapper {
    background: #f5ce3e;
    padding-bottom: 3rem;
    color: #002145;
}

body.llis-exl #footer1Wrapper h5 {
    font-size: 1.1rem;
    text-transform: none;
    margin-top: 1.75rem;
}

body.llis-exl #footer1Wrapper .musquem-info {
    margin-top: 1.75rem;
}

body.llis-exl #footer1Wrapper a:hover {
    color: #2f5d7c;
}

body.llis-exl #footer1Wrapper a, 
body.llis-exl #footer1Wrapper p {
    color: #222;
    font-size: 14px;
}

body.llis-exl #footer1Wrapper ul {
    padding-left: 0;
}

body.llis-exl #footer1Wrapper li {
    display: inline-block;
    padding-left: 0;
}

body.llis-exl #footer1Wrapper .visually-hidden {
    height: 1px;
    left: -300%;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

body.llis-exl .social-icon-exl {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
}

body.llis-exl #ubc7-footer-menu-1 {
   display: none;
}

body.llis-exl #footer2Wrapper a {
    display: inline-block;
}

body.llis-exl #footer2Wrapper a:focus,
body.llis-exl #footerEXL a:focus {
    box-shadow: 0 0 0 3px #fff, 0 0 0 6px #002145 !important;
    outline: none;
}

body.llis-exl #footerEXL #unit-social-icons a:focus {
    box-shadow: 0 0 0 6px #fff, 0 0 0 6px #002145 !important;
    outline: none;
}
/*** END FOOTER NAVIGATION FOR EXL ***/



/*** FOOTER NAVIGATION FOR LFS ***/
body.llis-lfs #footer1Wrapper {
    background: #fff;
    padding-bottom: 3rem;
    color: #002145;
    border-top: 1px solid #D7E0E7;
}

body.llis-lfs #footer1Wrapper h5 {
    font-size: 1.1rem;
    text-transform: none;
    margin-top: 1.75rem;
    line-height: 1.5;
}

body.llis-lfs #footer1Wrapper .musquem-info {
    margin-top: 1.75rem;
}

body.llis-lfs #footer1Wrapper a:hover {
    color: #2f5d7c;
}

body.llis-lfs #footer1Wrapper a, #footer1Wrapper p {
    color: #222;
    font-size: 14px;
}

body.llis-lfs #footer1Wrapper ul {
    padding-left: 0;
}

body.llis-lfs #footer1Wrapper li {
    display: inline-block;
    padding-left: 0;
}

body.llis-lfs #footer1Wrapper .visually-hidden {
    height: 1px;
    left: -300%;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

body.llis-lfs .social-icon-exl {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
}

body.llis-lfs #ubc7-footer-menu-1 {
   display: none;
}
/*** END FOOTER NAVIGATION FOR LFS ***/

/*** FOOTER NAVIGATION FOR BRIMM ***/
body.llis-brimm #footer1Wrapper {
    background: #CA5C30;
    padding-bottom: 3rem;
    color: #fff;
    border-top: 1px solid #D7E0E7;
}

body.llis-brimm #footer1Wrapper h5 {
    font-size: 1.1rem;
    text-transform: none;
    margin-top: 1.75rem;
    line-height: 1.5;
    color: #fff;
}

body.llis-brimm #footer1Wrapper .musquem-info {
    margin-top: 1.75rem;
}

body.llis-brimm #footer1Wrapper a:hover {
    color: #fff;
}

body.llis-brimm #footer1Wrapper a, #footer1Wrapper p {
    color: #002145;
    font-size: 14px;
}

body.llis-brimm #footer1Wrapper ul {
    padding-left: 0;
}

body.llis-brimm #footer1Wrapper li {
    display: inline-block;
    padding-left: 0;
}

body.llis-brimm #footer1Wrapper .visually-hidden {
    height: 1px;
    left: -300%;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}

body.llis-brimm .social-icon-exl {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
}

body.llis-brimm #ubc7-footer-menu-1 {
   display: none;
}
/*** END FOOTER NAVIGATION FOR LFS ***/



/*** FOOTER NAVIGATION FOR UBCO ***/
body.llis-ubco #footer1Wrapper {
    background: #fff;
    padding: 20px 0;
    border-top: 1px solid #D7E0E7;
    color: #002145;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
}

body.llis-ubco #ubc7-address-unit-name {
    font-weight: 700;
}

body.llis-ubco #ubc7-address-email a {
    color: #0055b7;
}

body.llis-ubco #footer1Wrapper p i {
    font-size: 14px;
}

body.llis-ubco #footer1Wrapper a:hover {
    color: #0055b7;
}

body.llis-ubco #ubc7-footer-menu-1 {
    display: none;
}
/*** END FOOTER NAVIGATION FOR UBCO ***/

#collapseLoginMenuOptions .dropdown-item {
    color: #222 !important;
}

#collapseLoginMenuOptions .dropdown-item:focus-visible,
#collapseLoginMenuOptions .dropdown-item:hover {
    color: #fff !important;
    background: #002145;
}


div#footer2Wrapper #footer2 a {
    display: inline-block;
}


/*** CONTACT US page ***/
body[id='Contact Us'] .contact-us-content a { /* wrap long links to prevent horizontal scroll bars on mobile screens */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

body[id='Contact Us'] .contact-us {
    margin-bottom: 2rem;
}

body[id='Contact Us'] .vertical-divider {
    background: rgba(0, 0, 0, .1);
    margin: 2em 0;
    height: 2px;
    /* Default for mobile */  
}

@media (min-width: 992px) { /* we need to increase min-width to 992px to prevent horizontal scroll bars */
    body[id='Contact Us'] .contact-us-content {
        display: flex;
    }

    body[id='Contact Us'] .row-fluid {
        width: 500px;      
    }

    body[id='Contact Us'] .vertical-divider {
        margin: 0em 2em;
        width: 2px;
        height: auto;
        /* For screens larger than 768px */
    }
}
/*** END CONTACT US page ***/



/*** HOME PAGE (the page with the slider) ***/
body#pagePublicHome  #pagePublicHome #contentModule5 {
    text-align: center;
    padding-top: 15px;
  }
  
body#pagePublicHome .flex-container {
    display: flex;
    flex-direction: row;
    padding-top: 60px;
    padding-bottom: 70px;
    align-items: flex-end !important;
}
  
body#pagePublicHome .flex-child {
    flex: 1;
}
  
body#pagePublicHome .flex-child:first-child {
    margin-right: 20px;
}
  
body#pagePublicHome #FindCoursesBtn {  
    background-color: #343a40 !important;
    border: none;
    color: white;
    padding: 15px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
}
  
body#pagePublicHome .card-deck {
    padding-top: 15px !important;
    padding-bottom: 60px;
}
  
body#pagePublicHome .view-course {
    background-color: #343a40 !important;
    padding: 5px 10px;
    text-align: center;
    color: white;
    font-size: 14px;
    border: none;
    text-decoration: none;
}
  
body#pagePublicHome .trending-course-title {
    text-align: center;
    font-size: 1.875rem;
    padding-top: 15px;
}
  
body#pagePublicHome #contentModule5 {
    padding-bottom: 80px;
}

body#pagePublicHome .card-title {
    flex-grow: 1;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

body#pagePublicHome .card-deck {
    justify-content: space-around;
}

/* body#pagePublicHome .card-deck .card {
    max-width: 450px;
} */

body#pagePublicHome .view-course {
    min-width: 150px;
}
  
body#pagePublicHome #contentModule5 {
    display: none;
}

body#pagePublicHome .intro-text {
    font-size: 16px;
}
  
@media only screen and (max-width: 1000px) {
    body#pagePublicHome .flex-container {
      display: flex;
      flex-direction: column;
      padding-top: 40px;
      padding-bottom: 40px;
      align-items: center;
      width: 450px;
    }
  
    body#pagePublicHome .flex-child {
      padding-top: 20px;
    }
}


body#pagePublicHome .card-deck .view-course {
    background-color: #002145 !important;
    border: solid 2px #002145 !important;
    color: #fff !important;
    border-radius: 0;
    padding: 12px 17px !important;
    font-size: 16px;
    transition: 200ms linear;
    margin-top: 10px;
}

body#pagePublicHome .card-deck .view-course:focus-visible,
body#pagePublicHome .card-deck .view-course:hover {
    background-color: #fff !important;;
    color: #002145 !important;
    border: solid 2px #002145 !important;
}

@media only screen and (min-width: 576px) and (max-width: 767px)  {
    body#pagePublicHome .card-deck {
        justify-content: normal;      
    }

    body#pagePublicHome .card-deck .card {
        flex: none;
        display: block;
        margin-bottom: 15px;
    }
}
/*** END HOME PAGE ***/

/*** COMMON LOOK AND FEEL (CLF) FOOTER ***/
#footer2 {
    font-size: 14px;
    line-height: 22px;
}

#footer2 ul {
    padding: 0;
    margin: 0;
}

#footer2 li {
    display: inline-block;
}

#footer2 a {
    color: white;
}

#footer2 li>a {
    font-size: 12px;
}

#footer2 .span12 {
    border-top: 1px solid #1f385f;
    float: none;
    padding: 22px 0;
}

#footer2 .divider {
    color: #ccc;
    padding: 0 5px 0 3px;
}

#ubc7-signature {
    height: 60px;
}

#ubc7-signature a {
    background-position: 0 -387px;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
}

#ubc7-footer-menu-1 {
    padding-bottom: 20px;
}

#ubc7-footer-menu-1 h3 {
    color: #fff;
    font-size: 110%;
    font-weight: 700;
    margin: 0px 0 5px 0;
}

#ubc7-footer-menu-1 h4 {
    color: #fff;
    font-size: 100%;
    font-weight: 700;
    margin: 2px 0;
}

#ubc7-footer-menu-1 h3,
#ubc7-footer-menu-1 h4 {
    font-family: Arial, Sans-Serif !important;
}

#ubc7-signature,
.ubc-footer-menu-1 {
    padding-top: 20px;
}

.footer__bottom__contact ul li::after {
    content: '|';
    display: inline;
    position: absolute;
    right: -2px;
    top: 5px;
}
.footer__bottom__contact ul li {
    padding: 5px 0.5rem;
    position: relative;
}

.footer_bottom_ul {
    display: flex;
    list-style: none;
    flex-flow: row wrap;
    align-items: center;
}

.footer__bottom__contact {
    display: flex;
    flex-wrap: wrap;
}

.footer__bottom__logo {
    min-width: 1.75rem;
    margin-right: 1rem;
}

.footer__bottom__logo svg {
    fill: white;
}

#footer2 .flex {
    display: flex;
}

address {
    margin: 0;
}

.footer__bottom__title {
    margin: 0;
    font-weight: bold;
}

.footer__bottom__contact ul li:last-child::after {
    content: '';
}

.noImage {
    visibility: hidden;
}

#courseSearchResult_grid .courseName, #courseSearchResult_grid .courseCode {
    margin-left: 10px;
}

.tableGridTabPaneGrid ul {
    padding-left: 1rem !important;
}

.tableGridTabPaneGrid ul li {
    border: 1px solid #e0e0e0;
    margin-right: 3rem;
}

.cartItemFeaturedImageParentContainer {
    visibility: hidden;
}

#pageStudentLogin #newStudentDiv .sectionHeader h2, 
#pageCheckoutLogin .sectionHeader h2,
#pageCLPCheckoutLogin .sectionHeader h2 {
    line-height: 30px !important;
}

@media only screen and (min-width: 960px) {
    .flex\@md-up {
        display:flex
    }

    .flex--align-c\@md-up {
        align-items: center;
    }
}
/*** END COMMON LOOK AND FEEL (CLF) FOOTER ***/

@media (max-width: 767px) {
    body.llis-ubco nav#globalNavigationBar button.navbar-toggler { 
        border: solid 1px #002145;
    }
}
  
@media (max-width: 510px) {          
    body.llis-ubco div#header2Container a.brand-slogan { 
        width: 100%;
        max-width: 195px;
        line-height: 1.5;
        font-size: 16px;
    }
}

@media (max-width: 490px) {  
     body.llis-lfs div#header2Container a.brand-slogan {
        width: 100%;
        max-width: 195px;
        line-height: 1.5;
        font-size: 16px;
    }
}

@media (max-width: 400px) {  
    body.llis-exl div#header2Container a.brand-slogan {      
        line-height: 1.5;
        font-size: 16px;
    }

    body.llis-default div#header2Container a.brand-slogan {
        width: 100%;
        max-width: 190px;
        line-height: 1.5;
        font-size: 16px;
    }
}

body#pageFamilyCheckoutOptions button#buttonRegularCheckout {
    display: none!important;
}

body#pageFamilyLogin a#forgotUserNameLink {
    display: none;
}


body#pageCapBasketPage .cartItemDesktopLink, body#pageCLPPayment .cartItemDesktopLink {
    font-size: 150%;
}

body#pageCapMemberSearchResults #inviteMemberForm label[for=loginId] {
    display: none;
}

body#pageCapBasketPage  #header1Wrapper #cartInfo, 
body#pageCLPPayment #header1Wrapper #cartInfo {
    padding: 4rem 0!important;
    margin: 0!important;
    text-align: right!important;
}

#pageCertificateSearch #certificateSearchStreamAndArea {
    display: none;
}

/*** Student portal ***/
/** Student login / Checkout login **/
#pageStudentLogin #existingStudentDiv .sectionHeader,
#pageCLPCheckoutLogin #existingStudentDiv .sectionHeader,
#pageCheckoutLogin #contentModule1 .col-md-8 .sectionHeader {display: none;}

#pageStudentLogin #newStudentDiv .sectionHeader,
#pageCLPCheckoutLogin #newStudentDiv .sectionHeader,
#pageCheckoutLogin .sectionHeader { 
  padding: 0 1rem; 
  background-color: #e9eef2;
}
#pageStudentLogin #newStudentDiv .sectionHeader h2,
#pageCLPCheckoutLogin #newStudentDiv .sectionHeader h2,
#pageCheckoutLogin .sectionHeader h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0px;
}

#pageStudentLogin #portalNativeLoginPanel > div:first-child p:empty,
#pageCLPCheckoutLogin #portalNativeLoginPanel > div:first-child p:empty,
#pageCheckoutLogin #portalNativeLoginPanel > div:first-child p:empty { display: none; }

#pageStudentLogin #existingStudentDiv > .row,
#pageCLPCheckoutLogin #existingStudentDiv > .row,
#pageCheckoutLogin #portalExternalLogonLinkPanel,
#pageCheckoutLogin #contentModule1 form { height: 100%!important; }

#pageStudentLogin #existingStudentDiv div[class^="col-"],
#pageStudentLogin #newStudentDiv,
#pageCLPCheckoutLogin #existingStudentDiv div[class^="col-"],
#pageCLPCheckoutLogin #newStudentDiv,
#pageCheckoutLogin #contentModule1 div[class^="col-md-6"],
#pageCheckoutLogin #contentModule1 .col-md-4 { 
  background-color: #e9eef2;
  padding: 15px 30px;
  border: 0 solid #fff;
}

#pageStudentLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(1),
#pageCLPCheckoutLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(1),
#pageCheckoutLogin #contentModule1 div[class^="col-md-6"]:nth-child(1)  { border-width: 0 30px 0 15px; }

#pageStudentLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(2),
#pageCLPCheckoutLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(2),
#pageCheckoutLogin #contentModule1 div[class^="col-md-6"]:nth-child(2) { border-width: 0 30px 0 30px; }
#pageStudentLogin #newStudentDiv,
#pageCLPCheckoutLogin #newStudentDiv,
#pageCheckoutLogin #contentModule1 .col-md-4 { border-width: 0 15px 0 30px; }

#pageStudentLogin #variableContentBlockPG0015,
#pageCLPCheckoutLogin #variableContentBlockPG0015,
#pageCheckoutLogin #variableContentBlockPG0015 { margin-bottom: 1.5rem; }
#newStudentDiv .sectionHeader {
  margin-top: -6px;
}
#newStudentDiv .sectionHeader {
  border: 0;
}
#existingStudentDiv h3 {
  font-size: 22px;
  min-height: 3rem;
}

@media ( max-width: 768px ){
 #pageStudentLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(1), 
 #pageCLPCheckoutLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(1), 
 #pageCheckoutLogin #contentModule1 div[class^="col-md-6"]:nth-child(1),
 #pageStudentLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(2), 
 #pageCLPCheckoutLogin #existingStudentDiv > .row > div[class^="col-"]:nth-child(2), 
 #pageCheckoutLogin #contentModule1 div[class^="col-md-6"]:nth-child(2),
 #pageStudentLogin #newStudentDiv, 
 #pageCLPCheckoutLogin #newStudentDiv, 
 #pageCheckoutLogin #contentModule1 .col-md-4 { border-width:0 0 15px 0; }
}

/*** Course Search ***/

#courseSearchStreamAndArea {
  display: none!important;
}

body#pageCapBasketPage  #header1Wrapper #cartInfo {
  padding: 1rem 1rem 0 0 !important;
  margin: 0!important;
  text-align: right!important;
}


body.llis-default #loginInfo
 {
    color: white !important;
    font-size: 15px !important;
    font-weight: 400;
}

#quickMemberSearchSubmitButton {
    background-color: #002145 !important;
    border-color: #002145 !important;
    color: #002145 !important;
    border-width: 2px;
    border-radius: 0;
    padding: 5px 10px !important;
}

#pageCapLogin #loginInfo{
    display: none !important;
}

#studentInfoGenderPanel #studentInfoGenderContainer .form-row {
    display: block!important;
}

#studentInfoGenderPanel #studentInfoGenderContainer .form-row .col-lg-6 {
    max-width: 100%!important;
}

#set_1758661708205 {
    padding-left: 0!important;
}
 
body.corporateAdminPortal  #adminPortalMenu #nav2, 
body.corporateAdminPortal  #adminPortalMenu #nav3,
body.corporateAdminPortal  #buttonAddCapMember{
   display: none;
}

body.family-portal #adminPortalMenu #nav2, 
body.family-portal #adminPortalMenu #nav3,
body.family-portal #buttonAddCapMember {
   display: block!important;
}