/* DEBUG. add this class to see the div's confines */
.bgc{
	background-color: rgba(14, 128, 128, 0.1);
}


/* FONTS / body */
@font-face {
	font-family: produkt;
	src: url(/fonts/produkt3/Produkt/Produkt-Regular.otf);
	font-weight: normal;
}
@font-face {
	font-family: produkt;
	src: url(/fonts/produkt3/Produkt/Produkt-Semibold.otf);
	font-weight: bold;
}
@font-face {
	font-family: produkt;
	src: url(/fonts/produkt3/Produkt/Produkt-Bold.otf);
	font-weight: bolder;
}
@font-face {
	font-family: classicGrotesquePro;
	src: url(/fonts/ClassicGrotesquePro/ClassicGrotesquePro-Book.woff);
	src: url(/fonts/ClassicGrotesquePro/ClassicGrotesquePro-Book.woff2);
	font-weight: normal;
}
html{
	--black: #414A51;
	--blue:  #003767;
	--cyan: #00B2CE;
	--lime: #C6D931;
	--rhodamine: #D92880;
	--lightGrey: #F7F7F7;
	--mediumGrey: #D4D4D4;
	--mediumDarkGrey: #737682;
	--darkGrey: #414A51;
	--white: #ffffff;
	color:var(--black);
	-webkit-text-size-adjust: 100%;
	align-items: center;
	/*
	width: 100% !important;
	padding: 0;
	margin: 0 auto;*/
}
body{
	font-family: 'classicGrotesquePro';
	color:var(--black);
	font-size: 18px;
	line-height: 1.8;
	background: var(--white);
	font-weight:400;
	width: 100%;
	margin: 0;
	display: block;
	/*
	padding: 0;
	position: absolute;
	left: 0;*/
}


/* PAGE BODY MAIN WRAPPER */
/* container pseudo is for the header and footer,
that need the same width alignment as the container but none of the decorative formatting */
.container-pseudo, .container{
	max-width:1000px; /*old: 1440px*/
	margin:0 auto;
	padding: 0;
	align-items: center; 
}
.container{
	padding-bottom: 170px; 
}
#appendMainNavBarHere .container{
	padding-bottom: 0;
}
@media all and (max-width:1020px){
.container-pseudo, .container{margin: 0 14px}
}


/* HEADER AND FOOTER */
.navbar-logo{
	width: 100%;
	max-width:1140px;
	margin:0 auto;
	display: flex; 
	align-items: center; 
	padding: 20px 0 40px 0;
}
.logo{
	height: 70px;
	width: auto;
	padding: 20px;
}
@media all and (max-width: 320px){
	.logo{
		padding: 5px 15px;
		box-sizing: border-box;
		flex-shrink: 1;
	}
}
header{
	display: flex;
	flex-direction: row;
	gap: 40px;
	background-color: var(--lightGrey);
	color: var(--black);
	align-items: center;
	align-content: center;
	justify-content: center;
	padding: 12px 14px;
}
@media all and (max-width: 767px){header{flex-direction: column; gap: 12px;}}
header a{
	text-decoration: none;
	font-weight: 600;
	color: var(--black);
}
header a:hover{
	text-decoration: underline;
}
footer{
	width: 100%;
	padding: 50px 0 0 0 !important;
	background-color: #222222;
	color: var(--white);
}
footer hr{
	border-color: var(--mediumDarkGrey);
	margin-bottom: 40px;
}
footer img{
	border: 0 !important;
}
.accessibility-tool{
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.accessibility-tool div{
	display: flex;
	align-content: center;
	gap: 5px;
}
.accessibility-tool div p{
	margin: 0;
	padding: 0;
	margin-right: 15px;
}
.footer-branding{
	margin-bottom: 80px;
	height: auto;
}
@media all and (min-width:410px){
	.footer-branding{max-width: 380px;}
}

/* tags and related*/
img{
	max-width:100%;
}
.container img{
	margin: 10px;
	border: 1px solid var(--mediumGrey);
	max-height: 500px;
}

/* headers */
h1{
	font-size: 40px;
	line-height: 1.2;
	width: 100%;
	color: var(--blue);
	font-family: 'produkt';
	font-weight: bold;
}
h2{
	font-size: 32px;
	margin:0; 
	line-height: 1.2;
	padding: 40px 0 30px 0;
	color: var(--blue);
	font-family: 'produkt';
	font-weight: bold;
}
h3{
	font-family: 'classicGrotesquePro';
	font-size: 26px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--cyan);
	margin-bottom: 15px;
	margin-top: 40px;
}
@media all and (max-width: 767px){
h1{font-size:32px;}
h2{font-size:26px;}
h3{font-size:22px;}
body{font-size: 16px;}
}
@media all and (min-width:971px){}

/* paragraphs and related */
p{
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
}
b{
	font-weight:600;
}
strong{
	font-weight: 700;
}

/* links */
.container a{
	text-decoration: none;
	color: var(--blue);
	text-decoration-line: underline;
	text-decoration-color: var(--cyan);
}
.container a:hover{
	background-color: #D4DEF0;
}

ul{
	margin: 0;
	padding: 0;
}
.container ul, .container ol{
	margin: 12px;
	margin-left: 25px;
	text-indent: 5px;
}
li{
}
li p{
	margin: 0;
	padding: 0;
}

li img{
	display: block;
	max-width: 600px;
}
li a img{
	display: block;
	max-width: 100%;
	border-color: var(--cyan) !important;
}

hr{
	width: 100%;
	border-color: var(--lime);
	margin: 1em 0;
}

table{
	border: 2px solid var(--black);
	width: 98%;
	margin: 20px auto;
	border-collapse: collapse;
	flex: 1 1 0;
}
td{
	border: 1.5px solid var(--black);
	column-span: 3;
	border-collapse: collapse;
	padding: 15px;
	align-content: center;
}
.table-header{
	background-color: var(--black);
	font-weight: 600;
	color: white;
}


/* website functions */
/* wrapper div for a scrollable table*/
.scrollable-table{
	max-height: 400px;
	width: 100%; 
	padding: 0;
	overflow: auto;
	border-top: 2px solid var(--black);
	border-bottom: 2px solid var(--black);
}
.scrollable-table table{
	width: 100%;
	margin: 0;
	padding: 0;
}


/*text highlights, banners, "stickytones", notes */

.breadcrumb{
	color: var(--cyan);
	display: inline-block;
	margin-bottom: 0;
	font-weight: 600;
	cursor:default;
	padding: 0;
}
.please-note{
	background-color: #eaf6ff;
	padding: 15px;
	margin: 25px 10px;
	color: var(--black);
}
.banner{
	color: var(--white) !important; 
	background-color: var(--blue); 
	padding: 18px;
	margin-bottom: 55px;
}
.banner h2, .banner h1, .banner h3{
	color: var(--white);
	padding: 10px 0 20px 0;
}
.banner p{
	margin-left: 5px;
}
.banner a{
	color: white;
}
.banner a:hover{
	background: none;
}


/* MISC / technical */

/*this will affect all css labels, this code exists to add padding to checkboxes when they otherwise have none*/
input[type="checkbox"],label{
	margin-bottom: 10px;
}



/* W3 Tabs */
/* Tabs code from w3schools.com
https://www.w3schools.com/w3css/w3css_tabulators.asp */
.navtab-button-container{
	display: flex;
	margin-bottom: 10px;
}
.navtab-button{
	border: none;
	border-radius: 0;
	flex: 1 0 0;
	text-align: left;
	color: inherit;
	font-size: inherit;
	background-color: var(--white);
	border-bottom: 1px solid var(--white);
	padding: 15px;
	padding-bottom: 15px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
.navtab-button ul{
	padding-inline-start: 1.5em;
	margin-block-start: 0;
	margin-block-end: 0;
}
.navtab-button:hover{
	border-bottom: 1px solid #576c7c99;
	background: #F4FAFF;
}
.navtab{
	padding: 0;
	align-items: flex-start;
	align-self: stretch;

	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 12px;
	border: 1px solid #576c7c99;
}


/* ACCORDIONS*/
#accordion, #accordion1, #accordion2, #accordion3, #accordion4, #accordion5, #accordion6, #accordion7, #accordion8, #accordion8, #accordion10, #accordion11, #accordion12, #accordion13, #accordion14, #accordion15, #accordion16, #accordion17, #accordion18, #accordion19, #accordion20{
	margin: 30px 0;
}


/* Jumbo Nav from main.js - header dropdown menu - Copied and adjusted from old css */
.header-primary{}
.header-primary a{
	color: white;
	text-decoration: none;
}
/* Main blue bar menu */
.nav-primary-container{
	background-color: var(--blue);
	position:relative;
	z-index: 1000;
	margin-bottom: 70px;
}
.nav-primary-container li{
	list-style-type: none;
}
/* nav option decor at rest */
.nav-primary li a{
	display:block;
	border-left:1px solid #174B76;
	color: white;
	font-weight:700;
	padding: 20px;
	text-align:center;
	word-break: break-word;
}
@media all and (max-width: 980px){
	.nav-primary li a{border: none;}
}
/* nav option decor on hover */
.nav-primary li a:hover{color:var(--white);background-color:#174B76}

/* expanded menu overlay */
.nav-sub-jumbo{
	background: var(--blue);
	padding: 30px 0;
	width: 100%;
	position: absolute;
	top: 145px;
	z-index: 700;
}

/*transform into mobile verticle menu on mobile screen*/
@media all and (min-width:981px){
.nav-primary{display:table;width:100%}
.nav-primary>li{display:table-cell}
}

/* When the screen is mobile, create a dropshadow on the popup and adjust every popup to align with its original button*/
@media all and (max-width: 767px){
	.nav-primary-container>.container-pseudo{margin: 0;}
	.nav-sub-jumbo{box-shadow: 0px 9px 13px rgba(0, 0, 0, 0.35);}
	#admissions.nav-sub-jumbo{top: 425px;}
	#sot.nav-sub-jumbo{top:490px;}
	#financial.nav-sub-jumbo{top:560px}
	#requests.nav-sub-jumbo{top:630px}
	#requirements.nav-sub-jumbo{top: 700px;}
	#apprenticeships.nav-sub-jumbo{top: 765px;}
	#convocation.nav-sub-jumbo{top: 835px;}
	#information.nav-sub-jumbo{top: 905px;}
	#help.nav-sub-jumbo{top: 975px;}
}
/* the fiv within the expanded menu overlay, the links */
.nav-sub-jumbo div{
	margin: auto;
	width: 330px;
}
.nav-sub-jumbo div a{
	text-decoration: none;
	color: white;
	text-decoration-color: #008EA5;
	display: block;
	margin-bottom: 5px;
}
.nav-sub-jumbo div a:hover{
	text-decoration-line: underline;
}
.nav-sub-jumbo h3{
	color: white;
}

/* Decorative boarders on the edges of the menu */
.nav-primary li:first-child>a{border-left:0px solid #174B76}
.nav-primary li:last-child>a{border-right:0px solid #174B76}

/* expanded menu link decor
.nav-column a:hover{background-color: #174B76;}
.nav-sub-jumbo li{border-top:1px solid #174B76;}
.nav-sub-jumbo li:first-child{border:0} */



@media all and (min-width:768px) and (max-width:970px){
.header-secondary a{padding:.9em 1.2em}}
@media all and (max-width:767px){
a.nav-mobile-link{display:block;position:absolute;top:18%;right:15px;z-index:600;height:90px}}
@media all and (max-width:767px){
.nav-primary-container{position:static;border:0}}





@media all and (min-width:971px) and (max-width:1140px){
.nav-primary li:first-child>a,.nav-primary li:first-child+li>a{border-left:0}
.nav-primary li:last-child>a{border-right:0}}





/*
.ie7 .nav-primary,.ie8 .nav-primary{*zoom:1;float:left;border-right:1px solid #f0f0f0}
.ie7 .nav-primary:before,.ie8 .nav-primary:before,.ie7 .nav-primary:after,.ie8 .nav-primary:after{content:"";display:table}
.ie7 .nav-primary:after,.ie8 .nav-primary:after{clear:both}
.nav-primary .current{color:#00b2ce}
.nav-primary a.active-tab{background:#414a51;color:#fff}
.ie7 .nav-primary>li,.ie8 .nav-primary>li{display:block;float:left}
*/

/* TEST
.sticky .nav-primary li:first-child{min-width:2em} */







@media all and (min-width:768px) and (max-width:970px){
.nav-sub-jumbo{
	top: 42px
}}


.nav-placeholder{display:inline;float:left;width:23.4375%;margin:0 .78125%;min-height:50px}
.nav-aside--image-story .nav-aside--image-story-title:hover{background-image:url(/SheridanCollege/img/chevron-right-hover-bg.png);background-position:right center;background-repeat:no-repeat}





/* MARGARET END ------------------------------------------------------------------------------------------------------------- */
/* CHATBOT BUTTON */
.csm-link-container {
		    position: fixed;
		    right: 15px;
		    bottom: 15px;
		        z-index: 1000;
		}
		.csm-link-btn {
			background-color: #d92880;
		    padding: 0;
		    height: 60px;
		    width: 60px;
		    float: right;
		    border-radius: 100%;
		    position: relative;
		    color: white!important;
		    line-height: 1;
		    text-align: center;
		    text-decoration: none;
		    display: flex;
		    align-items: center;
		    padding: 0 5px;
		    font-size: 16px;
		    box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.10);
		}
		.csm-link-btn img {
			height: 40px;
			width: 40px;
			margin: 10px;
		}
		.csm-link-btn:hover {
			background-color: #ae2066;
		}
		.csm-link-btn:focus,
		.csm-link-btn:focus-visible {
			background-color: #ae2066;
		}

		[type=button].no-btn-style,
		button.no-btn-style {
		  padding: 0;
		  border: 0;
		  outline: 0;
		  -webkit-appearance: none;
		  -moz-appearance: none;
		  appearance: none;
		  cursor: pointer;
		}













/* OLD --------------------------------------------------------------------------------------------------------------------------------------------------- */
















/*
.ie7 .nav-primary,.ie8 .nav-primary{float:left;border-right:1px solid white}
.ie7 .nav-primary:before,.ie8 .nav-primary:before,.ie7 .nav-primary:after,.ie8 .nav-primary:after{content:"";display:table}
.ie7 .nav-primary:after,.ie8 .nav-primary:after{clear:both}
.nav-primary .current{color:#00b2ce}
.nav-primary a.active-tab{background:#414a51;color:#fff}
.ie7 .nav-primary>li,.ie8 .nav-primary>li{display:block;float:left}*/



.filters-fail-message{float:left;opacity:0;-ms-filter:"alpha(opacity=0)";filter:alpha(opacity=0);font-style:normal;font-weight:400;font-size:1.4em;line-height:1.2em;line-height:normal;/*font-size:1.6em;*/padding:1em 0 3em .5em;}
.filters-fail .filters-fail-message{opacity:1;-ms-filter:"alpha(opacity=100)";filter:alpha(opacity=100)}
.list-filters{display:inline-block;font-weight:700}
.ie7 .list-filters{display:inline;vertical-align:middle}
.list-filters a{color:#414a51;padding:.5em 1.25em 1em;border-top:5px solid transparent;display:inline-block;text-decoration:none}
.ie7 .list-filters a{display:inline;vertical-align:middle}
.list-filters a:hover,.list-filters a:focus{background:#d9dbdc}
.list-filters a.active-tab{background:#414a51;border-top-color:#2a3035;color:var(--white)}




.filters{padding:15px;background:var(--white);clear:both;line-height:1em}
.filters ul{padding:0;margin:0;list-style-type:none}
.filters li{display:inline-block;list-style-type:none}
.ie7 .filters li{display:inline}
.filters a{background:#00b2ce;color:var(--white);text-decoration:none;display:inline-block;padding:.5em 1em;margin:0 2px 3px 0}
.ie7 .filters a{display:inline}
.filters a:after{content:"x";display:inline-block;text-align:right;color:var(--white);width:30px;font-size:1.2em;vertical-align:top;font-weight:700}
.filters .selected-filters{font-size:1em;margin-top:0}






/*
@media all and (min-width:768px) and (max-width:970px),all and (min-width:971px){
.bxslider-content-container{display:inline;float:left;width:98.4375%;margin:0 .78125%;margin-bottom:15px}}
.bxslider-content-container .bx-wrapper{margin-bottom:0}.bxslider-content-container .bx-wrapper .bx-pager{bottom:7.5px;left:15px;text-align:left}
@media all and (max-width:767px),all and (min-width:768px) and (max-width:970px){
.bxslider-content-container .bx-wrapper .bx-pager{text-align:center}}
@media all and (min-width:768px) and (max-width:970px),all and (min-width:971px){
.bxslider-content-container.block .bx-wrapper .bx-controls-direction a.bx-prev{left:23.7%}}
.bxslider-content .column,.bxslider-content img{display:block}
.bxslider-content .column{width:23.7%;float:left}
@media all and (max-width:767px){
.bxslider-content .column{width:100%}}
.bxslider-content img,.bxslider-content .responsive-video{width:76.3%;float:right}
@media all and (max-width:767px){
.bxslider-content img,.bxslider-content .responsive-video{float:left;width:100%}}
.bxslider-content-alt .slider-item{padding:15px 0 30px 0}
.bxslider-content-alt img{float:right;max-width:30%;margin-left:15px}*/




body.high-contrast .title-block-wrapper{background-color:#000}
body.high-contrast .block a{color:#013766; font-weight:700;}
body.high-contrast .btn-message{ background-color:#4B4B4B;}
body.high-contrast .btn-message2{background-color:#4B4B4B;}