/****home video links****/

#splashCardTiles{
	margin-bottom:20px;
	margin-top:20px;
}

#dvdetailSection .form-select{
	border-radius:30px;
	background-color:var(--bs-gray-400)
}

/****home video links****/
.video-responsive{
	margin-bottom:15px
}
.videoLinks .btn{
	margin-bottom:6px;
	display:block;
	border-radius:30px
}
.videoLinks{
	margin-bottom:30px
}
/*********FAQ webpart***********/
#priorities .question + .initiatives{
	padding:12px 0px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
	height:auto;
}
#priorities .question + .initiatives ul li{
	padding-bottom:10px
}

#priorities .question.collapsed + .initiatives{
	height:0px;
	overflow:hidden;
	padding:0px;
	border-bottom:none;
}

/**************footer***********/
#customFooter{
	background-color:#000;
	color:#fff;
	background-image:url('/EN/City-Hall/Council-Priorities/PublishingImages/TOCP-2040Vision-small.jpg');
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center bottom;
	padding-top: 30px;
    padding-bottom: 120px;	
}

#customFooter h2{
font-size:120%;
}

#customFooter a{color:#fff}
#customFooter p{margin-top:20px}

#customFooter .linkwrap{
	color:#fff;
	display: inline-block;
	border:3px solid #fff;
	/* font-size: 115%; */
	font-weight:400;
	background-color:rgba(0, 0, 0, 0.29);
	padding:6px 25px 8px 25px;
	transition: all 0.3s;
	text-align:center;
}
#customFooter .linkwrap:hover{
	background-color:rgba(0, 0, 0, 0.59);
}

#customFooter .linkText{
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.80);
}


@media(min-width:576px){
	#customFooter{
    padding-top: 30px;
    padding-bottom: 100px;
    padding-left: calc((100% - 1014px)/2);
    padding-right: calc((100% - 1014px)/2);
 }
	#customFooter{
		background-image:url('/EN/City-Hall/Council-Priorities/PublishingImages/TOCP-2040Vision.jpg');
	}
}

.downloadPDF{
	margin:30px 0;
}
.download {
    background-color: #000;
    background-image: url(/Style%20Library/BramptonImages/Generic/branding/icon-download.png);
    background-repeat: no-repeat;
    background-position: right -4px;
    padding: 16px 45px 16px 12px;
    display: block;
    color: #fff;
    font-size: 75%;
}

@media print { 
	#priorities .question + .initiatives{
		padding:12px 0px!important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.125)!important;
		height:auto!important;
	}
}

/**************related links***********/
#relatedLinks ul
{
	list-style-type:none;
} 

@media (min-width: 576px)
{	
	#relatedLinks ul
	{
	    columns: 2;
		-webkit-columns: 2;
		-moz-columns: 2;
		column-gap: 60px; /* IE fix */
	}
	
	#relatedLinks
	{
		margin-left: 25px;
	}
}

#relatedLinks ul li
{
	font-size: 1.1em;
	font-weight: 500;
	margin-left: 2.5em;
	break-inside: avoid-column;
}

#relatedLinks ul li i
{
	color: #000;
	font-weight: 600;
	transition: 0.2s ease;
}

#relatedLinks ul li:hover i
{
	color: #0056ac;
}

/*********directory styles**********/

#searchPanel{
	background-color: var(--bs-gray-200);
	padding: 35px 15px;
	text-align: left;
	height: 110px;
}
#searchPanel .searchWrapper{
	width: calc(100% - 200px);
	float:left;
	margin-right:5px
}
#searchPanel .searchWrapper input{
	width:100%;
	border-radius:80px;
	height:42px;
	font-size: 100%;
	border-color: var(--bs-gray-400);
}
#searchPanel .searchButton {
	width: 195px;
	height:42px;
	border-radius:80px;
	font-size: 100%;
	line-height:38px;
	padding:0;
	float:left
}
#searchPanel .searchButton .fa-magnifying-glass{
	margin-left:20px
}
@media (max-width: 599px){
    #searchPanel .searchWrapper{
	width: 100%;
	float:none;
	margin-bottom: 10px;
	}
	#searchPanel .searchButton {float:right; width:130px}
	#searchPanel{
	height: 135px;
	padding-top:20px;
	}
}
#searchFilters{
	background-color:var(--bs-gray-200);
	padding: 20px 15px 15px 15px;
	margin-top: 4px;
	text-align:right;
	min-height: 135px;
}
#searchFilters .restart{
		float: right;
	}
#searchFilters .btn-primary:hover{
	background-color: #003c79;
	border-color: #002b55;
	color: #fff!important;
	text-decoration: none;
}


#dvdetailSection a.btn{
	border-radius:40px;
	padding-right:20px;
	padding-left:20px;
	margin-bottom: 6px;
}

#dvdetailSection a.btn:hover{text-decoration:none}

/********select styles******/
#searchFilters .category{width:100%;margin-bottom:10px; position:relative}
#searchFilters .sorting{
	width: calc(100% - 185px);
	position:relative;
	display: block;
	float: left;
}
@media(min-width:576px){
	#searchFilters{min-height: 85px;}
	#searchFilters .category{
		width: auto;
		min-width: 120px;
		display:inline-block;
	}
	#searchFilters .sorting{width: 130px; display:inline-block; float:none}
	#searchFilters .restart{margin-left:6px}
}

#searchFilters .select-selected {
  background-color: var(--bs-gray-400);;
  display:block;
}



/*style the arrow inside the select element:*/
#searchFilters .select-selected:after {
  position: absolute;
  content: "";
  top: 18px;
  right: 10px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #004993 transparent transparent transparent;
}
#searchFilters .select-selected:hover:after{
    border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
#searchFilters .select-selected.select-arrow-active{background-color:#0056ac; color:#fff}
#searchFilters .select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 9px;
}

/*style the items (options), including the selected item:*/
#searchFilters a.select-selected {
  color: #000;
  padding: 0px 30px 0px 10px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  line-height: 38px;
  height: 42px;
  border-radius: 40px;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#searchFilters a.select-selected:hover{
	background-color: #003c79;
    border-color: #002b55;
    color: #fff!important;
	text-decoration:none;
}
/*style items (options):*/
#searchFilters .select-items {
  position: absolute;
  background-color: white;
  top: calc(100% + 4px);
  left: 50%;
  transform: translate(-50%);
  right: 0;
  z-index: 99;
  border: 1px solid #AEAEAE;
  padding: 4px 4px 0 4px;
  width: 115px;
}
#searchFilters .category .select-items {
  width: 300px;
}
#searchFilters .select-items:after, #searchFilters .select-items:before {
	bottom: 100%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
}

#searchFilters .select-items:after {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #ffffff;
	border-width: 9px;
	left: 50%;
	margin-left: -9px;
}
#searchFilters .select-items:before {
	border-color: rgba(161, 103, 45, 0);
	border-bottom-color: #b8b8b8;
	border-width: 10px;
	left: 50%;
	margin-left: -10px;
}


/*hide the items when the select box is closed:*/
#searchFilters .select-hide {
  display: none;
}
#searchFilters .select-items .select-option{
  display:block;
  color: #000;
  padding: 6px;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  background-color: #F0F0F0;
  margin-bottom: 4px;
  font-size: 90%;
  text-align: left;
  width: auto;
}
#searchFilters .select-items .select-option:hover{
	background-color: var(--bs-gray-200);
}
#searchFilters a.select-option.same-as-selected{
  display:block;
  color: #fff;
  padding: 6px;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
  border-radius: 3px;
  background-color: #0056ac;
  margin-bottom: 4px;
  font-size: 90%;
  text-align: left;
  width: auto;
}
#searchFilters a.select-option.same-as-selected:hover{
	color:#fff;
	background-color:#003c79
}

#searchResultsHeader{
	border-bottom:1px solid #0056ac;
	position: relative;
	margin-top: 4px;
	height: 80px;
}
#searchResultsHeader .searchIcon{
	width: 80px;
	height: 80px;
	background-color:#0056ac;
	color:#fff;
	position:relative;
	display: block;
	float: left;
}

#searchResultsHeader .fa-magnifying-glass{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	font-size:42px
}
.searchSelection {
	width: calc(100% - 100px);
	position: relative;
	display: block;
	float: left;
	margin-left: 6px;
	height: 80px;
}
.searchSelection span{
	display:block;
	line-height:1.15
}

.searchSelection .searchingFor + span{
	font-weight:500;
	font-size:100%;
}
.searchSelection .searchingFor + span:before{
	content:'"';
}
.searchSelection .searchingFor + span:after{
	content:'"';
}
#searchResultsHeader h2{font-size:110%;margin:0;color:#0056ac;position: absolute;bottom: 3px;}

@media(min-width:576px){
	#searchResultsHeader h2{font-size:150%}
}

/**************list Items***********/
.searchResults{margin-bottom: 15px;}
.listItemdatasource{
	display: inline-block;
	margin-bottom: 0;
	font-weight: normal;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	background-image: none;
	border: 1px solid transparent;
	white-space: nowrap;
	padding: 7px 12px;
	line-height: 1.42857143;
	border-radius: 40px;
	padding-right: 20px;
	padding-left: 20px;
	background-color: var(--bs-gray-100);
	margin-bottom: 6px;
}
.listItem{border-bottom:1px solid #0056ac; padding-left:15px; padding-right:15px}
.listItemTitle{margin-bottom: 12px;padding-top: 20px;}
.listItemDescription{padding-bottom:15px;}
.listItemDescription:after{content:" ..."}
.listItemDescription *{display:inline;  margin:0}
.listItemDescription br{display:none}
.listItemFooter{padding: 10px 0px 30px 0px;}
.listItemWebSite {padding-botom:15px}
.listItemAddress {padding-botom:5px}
.listItemAddress .address,
.listItemWebSite .website{font-weight:600;}
.listItemAddress .address{margin-left:-5px}
.listItemAddress i,
.listItemWebSite i{display:inline-block; width:30px; text-align:center; margin-left:-5px}

#pagination .pagination,
#pagination .dvstatus{margin-bottom:5px;padding-left: 0;padding-right: 0;float: none;}
#pagination .dvstatus{font-size:90%;margin-top: -8px;}
#pagination .dvfirstprev a,
#pagination .dvnextlast a{
	display:inline-block;
	height:40px;
	text-align:center;
	line-height:40px;
	background-color:#f0f0f0;
	border-radius:3px;
	padding-right:10px;
	padding-left:10px;
	color:#000
}
#pagination .dvfirstprev a{margin-right:6px;}
#pagination .dvnextlast a:first-child{margin-right:6px;}
#pagination a:hover{
	color:#fff;
	background-color: #003c79;
	text-decoration: none;
}
#pagination .pagebtn{
	width:40px;
	display: block;
	float:left;
	margin-right:6px;
	margin-bottom: 8px;
	height:40px;
	text-align:center;
	line-height:40px;
	background-color:#f0f0f0;
	border-radius:3px;
	color:#000
}
#pagination .pagebtn b{
    display: block;
    width: 40px;
    height: 40px;
    background-color: #0056ac;
    color: #fff;
    border-radius: 3px;
}
@media(min-width: 560px){
	#pagination {width: 100%;padding: 0 0 20px 0;text-align: center;display: block;}
	#pagination .pagination {width: auto;margin: auto;float: none;}
	#pagination .pagination div{width:auto;margin:0;padding-bottom:0;float: left;}
	#pagination .dvfirstprev a,
	#pagination .dvnextlast a{padding-left:10px; padding-right:10px; height:30px; line-height:30px; border-radius:3px; width:55px}
	#pagination .dvfirstprev a{margin-right:6px;}
	#pagination .dvnextlast a:first-child{margin-right:6px;}
	#pagination .pagebtn,
	#pagination .pagebtn b{
		width: 30px;
	    height: 30px;
		line-height:30px
	}
}

/*****item details page****/
#mainDetails {
	background-color:var(--bs-gray-200);
}
#mainDetails .detailsPanel div{
	padding-bottom:8px
}
#mainDetails i{
	color:#000
}
#mainDetails a{color:#000}
#navPanel {text-align:right}
#mainDetails h2{
	background-color:#fff;
	margin:0 -15px 0 -15px;
	padding:15px
}
#navPanel .btn{
	border-radius:40px;
	width: 48px;
	text-align: center;
}
#navPanel .btn:first-child{ display:none }
#navPanel .btn span{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border-width: 0;	
}
.col-sm-7.googleMap {
	border-bottom:1px solid var(--bs-gray-500);
	padding-right: 0;
	padding-left:0;
}
@media(min-width:576px){
	#mainDetails {font-size:90%}
	#navPanel .btn{width:auto}
	#navPanel .btn span {position:inherit; padding-left:6px}
	.col-sm-7.googleMap {
		border-right:1px solid var(--bs-gray-500); 
		border-bottom:none}
}
@media(min-width:1200px){
	#mainDetails {
		margin-left: 0;
		margin-right: 0;
	}
	#mainDetails h2{
		padding:15px 0
	}
}
#mapEmbed {position: relative; padding-bottom: 60%; height: 0; overflow: hidden;}
#mapEmbed iframe{width:100%;height:100%;position: absolute;top: 0;}
.col-sm-12 + .detailsPanel{width:100%; float:none}
.detailsPanel{
	padding-top:20px;
	padding-bottom:20px;
	overflow:auto;
}
.detailsPanel i {
	display:block;
	float:left;
	width:25px;
	padding-top:5px
}

.detailsPanel #addresslink,
.website a{
	display: inline-block;
	width:calc(100% - 25px);
	text-decoration:underline
	}

#AdditionalInfo{padding-top:10px; padding-bottom:30px}
#AdditionalInfo h3{border-bottom:1px solid #0056ac; margin:0; position:relative}
#AdditionalInfo h3 span{display:block; left:70px; bottom:5px; position:absolute}
#AdditionalInfo h3 i{
	display: inline-block;
	background-color: #0056ac;
	height:60px;
	width:60px;
	line-height:60px;
	font-size:34px;
	color:#fff;
	text-align:center
}
#AdditionalInfo h4{margin-top:25px;}
#AdditionalInfo .description,
#AdditionalInfo .elegibility,
#AdditionalInfo .hours{
	font-size:100%;
	font-family: inherit;
}
#AdditionalInfo .hours{border-bottom:none}

@media(min-width:576px){
	#AdditionalInfo{padding-top:80px; padding-bottom:0px; display:flex; position:relative}
	#AdditionalInfo .col-sm-12:first-child{position:absolute; top:10px; width:100%;}
	#AdditionalInfo .col-sm-4{display:table-cell;flex: 1; padding-bottom:30px}
	#AdditionalInfo .description,
	#AdditionalInfo .elegibility,
	#AdditionalInfo .hours{
		border-right:1px solid var(--bs-gray-200);
		border-bottom:none;
		padding-bottom:30px
	}
	#AdditionalInfo .description.col-sm-12{border-right:none}
	#AdditionalInfo .hours{border-right:none}
}

.OntarioData,
.CoBData{
	background: var(--bs-gray-200);
	padding:15px;
	margin-bottom: -17px;
	margin-left: -15px;
	margin-right: -15px;
	padding-bottom:30px
}
.OntarioData .btn.btn-default{
	background-color: var(--bs-gray-400);
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; */
	color: #000!important; 
	font-size: 100%;
	line-height: 38px;
	padding:3px 15px;
	border-radius:40px;
	margin-bottom:6px;
}
.OntarioData .btn.btn-default:hover{
	background-color: #003c79;
	border-color: #002b55;
	color: #fff!important;
}
@media(min-width:1200px){
	.OntarioData,
	.CoBData{
		margin-bottom: 40px;
		margin-left: -15px;
		margin-right: -15px;
	}
}

@media print{
	body #s4-workspace {
	    overflow-x: visible!important;
	    overflow-y: visible!important;
	    position: relative!important;
	}
    #openLeftnav .Left-toggle,
    #alertBanner,
	#searchPanel,
	#searchFilters,
	#searchResultsHeader .searchIcon,
	#pagination{display:none}   
	#openLeftnav{position:initial!important}
	.contentArea.container{padding:0;margin:0;width: auto;}
	#main.row,
	#mainContent .row{margin:0!important}
	article header h1#pageTitle {
    color: #000!important;
    margin: 0!important;
	padding:0!important; position:initial!important;
	font-size:200%!important}
	#openLeftnav #siteName{
		position: initial!important;
		font-weight:bold!important;
		font-size:18pt!important;
	}
	#TopRow .bodyWebparts{padding:0}
	.searchResults.row{margin:0}
	#searchResultsHeader,
	.searchSelection{height:auto;position: initial;display: block;width: 100%;float: none;margin: 0;}
	#searchResultsHeader h2{font-size:200%;position:initial;margin:0;padding:0;display: block;}
	.listItem{padding-left:0; padding-right:0}

	a[href]:after {
    content: " (link: "attr(href) ")";
    color: #1b1b1b;
    font-size: 16px!important;
    background-color: #f6f6f6;
    padding: 2px;
	display:inline!important;
	white-space: pre-line;
	}
	#searchResults .websitelink:after{display:none!important}
	#dvdetailSection a.btn{border:none; background:transparent; text-align:left; font-size:110%; font-weight:bold; padding-left:0px; padding:0px}
	#dvdetailSection a.btn:after{font-weight:normal}
	.listItemdatasource{padding:0;font-style: italic;}
	.listItemFooter{padding-bottom:15px}
	#navPanel{display:none}
	#AdditionalInfo{display:block; padding:0; page-break-before: always;}
	#AdditionalInfo .col-sm-12:first-child{position:initial; padding:0}	
	#AdditionalInfo .description, #AdditionalInfo .elegibility, #AdditionalInfo .hours{padding:0}
	#AdditionalInfo h3 i{display:none}
	#AdditionalInfo h3 span{position:initial}
	#mainDetails a.websitelink:after{display:none!Important}
	#mainDetails .detailsPanel{padding:0}
	#mainDetails div{padding-left:0}
	.OntarioData{border-top:1px solid #0056ac}
	.OntarioData .btn{background:transparent; border:none; padding:0}
	.CoBData a:after{display:none!important}
	#splashCardTiles {width: 100%; display: table;}
	#splashCardTiles .cardWrap {
    width: 50%!important;
    display: table-cell;
 	}
	#splashCardTiles .btn-primary{display:none}
}
/** Last edited - ML - 2024/02/15 5:32pm **/