/** ************************************* **

	TABLE CONTENTS
	---------------------------
		01. Resets
		02. Selection
		03. Globals
		04. Environments
		05. Site Brand / Login Button / Login Indicator
		06. Top Nav
		07. Role Based Menu
		08. Footer
		09. Common Utilities
		10. Headings
		11. Paragraphs
		12. Links
		13. Lists
		14. Callouts
		15. Progress Bar
		16. Tables
		17. Buttons
		18. Filter 
		19. Dividers
		20. Forms
		21. Tabs
		22. Toggle
		23. Modal
		24. Right Column
		25. Misc Components
		
		--. Printable Div
	---------------------------

 ** ************************************* **/

@font-face {
	font-family: 'Myriad-Pro';
	src: url('../fonts/MyriadWebPro.ttf');
	/*src: url('http://www2.gov.bc.ca/StaticWebResources/static/shared/fonts/MyriadWebPro.ttf');*/
}




/**	HTML Demo Environment Only - Remove from ...
*************************************************** **/
.switcher { position: absolute; top: 10px; right: 10px; z-index: 999; }

/**	01. Resets
*************************************************** **/
button::-moz-focus-inner, 
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

button {
	background: none;
	border: 0; margin: 0; padding: 0;
	cursor: pointer;
}

img {
	border: 0;
	vertical-align: top;
}

input:-webkit-autofill {
	color: #ffffff !important;
}

textarea {
	resize: none;
}

textarea, input, button, *:focus {
	 outline:none !important;
}

textarea {
	resize: vertical;
}


select {
	font-family: Calibri, Arial, sans-serif;
}

input[type="radio"],
input[type="checkbox"] {
	display:inline-block;
	cursor:pointer;
	width:15px;
	height:15px;
	border:0;
}

iframe,
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

audio, canvas, img, video {
	vertical-align: middle;
}

p {
	display: block;
	-webkit-margin-before: 1em;
	-webkit-margin-after: 1em;
	-webkit-margin-start: 0px;
	-webkit-margin-end: 0px;
}

a, a:focus, a:hover, a:active {
  outline: 0;
  cursor:pointer;
}


/**	02. Selection
*************************************************** **/
::selection {
	color:#000;
	background:#ccc;
	text-shadow:none;
}

::-moz-selection {
	color:#000;
	background:#ccc;
	text-shadow:none;
}





/** 03. Globals
 **************************************************************** **/
html {
	overflow-x: hidden;
	overflow-y: auto;
}

html, body {
	min-height: 100%;
}

body {	
	margin:0; 
	padding:0 !important;
    font-family: Myriad-Pro, Calibri, Arial, sans serif;   
	font-size:15px;
	line-height:23px;
}

#wrapper {
    width: 100%;
}

@media (max-width: 479px) {
    .page-wrapper {
        padding-top: 0px !important;
    }
    .page-wrapper-with-sidebar {
        padding-top: 0px !important;
    }
}

.page-wrapper {
	padding:90px 0; 	/* top nav height */
	z-index:98;			/* under top nav */
	position:relative;
}

.page-wrapper-without-top-menu {
	padding:90px 0; 	/* top nav height */
	z-index:98;			/* under top nav */
	position:relative;
}

.page-wrapper-with-sidebar {
	padding: 100px 3px; 	/* top nav height */
	z-index:98;			/* under top nav */	
	position:relative;
}

.page-wrapper-with-env {
    margin-top: 26px; /* height of env banner */
}


/** 04. Environments
 **************************************************************** */
.environment { 	
	padding-top: 3px;
	text-align:center;
	font-size: 11px;
	width: 100%;
	font-weight:bold;
}


/** 05. Site Brand / Login Button / Login Indicator
 **************************************************************** **/

@media (max-width: 479px) {
    header {
        position: static !important;
    }
}

header {
	position:fixed; 
	top: 0; 
	left:0; 
	right:0; 
	z-index:101;
}

header #bcGov {
	background-color: transparent;
	border-bottom: 2px solid transparent;	
	margin-top: 0px!important;
	padding-bottom: 5px;	
	text-align: center;
	min-height: 50px; 
	display:table;
	width: 100%;	
	padding: 10px 0px 10px 0px;	
		
}
header #bcGov a.govlogo { 
	text-indent: -9999px;	
	background: url('../images/BCID_Rev_100.png'); 
	background-repeat:no-repeat;
	width: 100px;
	height: 35px;
	background-size: 100px;	
	background-position: center;		
}

header #bcGov a.logo { 
	text-indent: -9999px;	
	background: url('../images/bceid_rev.png'); 
	background-repeat: no-repeat;
	width: 110px;
	height: 35px;
	background-size: 100px;
	background-position: center;
}

header #bcGov .seperator { 
	width: 1px; 
	height: 35px; 
	vertical-align:top; 
}


header #bcGov a.govlogo,
header #bcGov a.logo,
header #bcGov .seperator,
header #bcGov button.btn-mobile {
	float:left;
}


	
	

header #bcGov button.btn-mobile {
	/*	display:block;*/
		float:right;

	color:#003366;
	background:#fff;
	background: #bcbec5;
	padding:6px 10px 2px 10px;
	/*margin-top:15px;*/

	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
			border-radius: 2px;
}	
header #bcGov button.btn-mobile i {
	padding:0; 
	margin:0;
	font-size:21px;
}


header .loggedInUser,
header .loginOrRegister { display: none; }


header .loggedInUser { display:none; }
header .loggedInUser a { text-decoration:none; }
header .loggedInUser a:hover { text-decoration:underline; }
header #bcGov .login-seperator { display:inline-block; width: 1px;height: 15px; background-color: #eaeaea; vertical-align:middle; margin: 0px 5px; }


header #bcGov ul.user-menu {

	margin: 0;
	padding: 10px 20px 20px 20px;



	border-radius: 0px;
	-webkit-border-radius: 0px;
	   -moz-border-radius: 0px;

	-webkit-box-shadow: 0 0 0;
	   -moz-box-shadow: 0 0 0;
	/**/
	min-width: 150px;
	max-width: 350px;
	width: 100%;
	
    left:auto;
    /*
    right:68px;
    */
    right: 0px;
    margin-right: 5px;
	
	top: 30px;
	
	
	background-color: #ffffff; 		/* dropdown background color */
	background-color:#fff;
	border-left: solid 1px #748bad;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #748bad;
	
	
	box-shadow: 0 4px 4px -4px #eee;
	
}

header #bcGov ul.user-menu  li { line-height: 20px; }
header #bcGov ul.user-menu  li a {  text-decoration: underline; }

.loggedInUser > #dLabel {

}
.loggedInUser h4 { line-height: 18px; margin-bottom: 8px; }

/** 06. Top Nav
 **************************************************************** **/
.login-register-options-mobile { 
	width: 100%; 
	text-align:center;
	padding: 5px;
	margin: 10px 0px;
	display:none;
}

header #topNav .loggedInUserMobile  {
	padding: 5px;
}
header #topNav .loggedInUserMobile a { text-decoration: none; font-size: 14px; font-weight: normal; }
header #topNav .loggedInUserMobile a:hover { text-decoration: underline; }

header #topNav .logged-in-menu {
	
	width: 100%;
	margin-top:10px;
	display:none;
}

header #topNav {
	margin-top: 0px; 
	padding:0px;
	border-bottom: solid 1px transparent;
	box-shadow: 0 4px 4px -4px #eee;	
}	

header #topNav .nav-main { margin-left: -15px; }


header #topNav div.nav-main-collapse {
	margin-top:10px;
	z-index:300;
}

header #topNav div.nav-main-collapse,
header #topNav div.nav-main-collapse.in {
	overflow-y: visible;
}

header #topNav div.nav-main-collapse.in {
	overflow-y: visible;
	float: none;
	margin: 0;
}


header #topNav nav ul.nav-main {
	margin: -7px 0 0px 0;
	z-index:300;
}

header #topNav nav ul.nav-main li a {
	background: none;
	font-style: normal;
	line-height: 20px;
	font-weight: 100;
	position: relative;
	text-decoration:none;
	font-size: 15px;
}

header #topNav nav ul.nav-main li:nth-child(n+2) a:after {
    content: "";
    background: #748bad;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}





header #topNav nav ul.nav-main li a:hover { 
	text-decoration:underline;  
}


header #topNav nav ul.nav-main li.mobile-only {
	display:none;
}


header #topNav nav ul.nav-pills > li > a,
header #topNav nav ul.nav-pills > li > a:hover,
header #topNav nav ul.nav-pills > li > a:focus,
header #topNav nav ul.nav-pills > li.active > a,
header #topNav nav ul.nav-pills > li.active > a:hover,
header #topNav nav ul.nav-pills > li.active > a:focus {
	-webkit-border-radius: 0;
	   -moz-border-radius: 0;
			border-radius: 0;

	border: 0;
	background: none;
	
}
header #topNav nav ul.nav-pills > li.active > a,
header #topNav nav ul.nav-pills > li.active > a:hover,
header #topNav nav ul.nav-pills > li.active > a:focus {
	background-image: url("../images/nav-ribbon-arrow.png");
	background-size: 25px;
    background-position: center bottom;
    background-repeat: no-repeat;
	text-decoration:underline;
}



header #topNav li.divider {
	border:0;
	border-bottom:#465260 1px solid;
	border-top:#1B1F23 1px solid;
	padding:0;
}

	
	



/** 07. Role Based Menu
 **************************************************************** **/
.roleBasedMenu { 
	display: none; 
	z-index: 1; 
	position: fixed;
	width: 200px;
	margin-top: 2px; 
	overflow-y: auto;
	height: 100%;  
	left: 0;
}

.sidebar .sidebar-nav.navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}
.sidebar .sidebar-search {
    padding: 25px 15px 5px 15px;
}
.sidebar ul li {
    border-bottom: 1px solid transparent;
}
.sidebar ul li a {
	text-decoration: none;
	font-size: 14px;
}
.sidebar ul li a:hover { text-decoration: underline; }





/** 08. Footer
 **************************************************************** **/
footer { 
	position: relative;
	height: auto!important;
}
footer #AccessMessage {
	z-index: 0;
}

footer a { text-decoration:none; }
footer a:hover { text-decoration:underline; }

footer p {
	margin:0px; 
	padding: 10px 0px; 
}

footer .pageid {
	padding: 3px 10px 0px 10px;
	font-size: 13px;
}

footer #footerWrapper {
	width: 100%;
	bottom: 0;
	background-color: transparent;
	border-top: 2px solid transparent;
	position: relative;
	z-index: 999;
}

footer #footerWrapper ul {
	clear: both;
	padding: 10px 0;
}

ul.inline {
	list-style-type: none;
	margin: 0;
	overflow: hidden;
	padding: 0;
}

ul.inline li {
	float:none;
	border-bottom: solid 1px #4b5e73;
	padding: 4px 0px;
}

ul.inline li a:link, nav ul.inline li a:visited {
	display: block;
	text-align:left;
	
}

ul.inline li:last-child { border-bottom-width: 0px; }



	
	
/* Footer Sticky Footer
		Used by JS to use either of 
		these styles depending on the height
		of the browser
-------------------------------------------------- */
.footer,
.footer-stick-to-bottom { 
	width: 100%; 
	margin-top: 30px;
}
.footer {
  position:relative;
}
.footer-stick-to-bottom {
  position: absolute;
  bottom: 0;  
}


img.back-to-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
 	opacity: 0.75;
    filter: alpha(opacity=75); /* For IE8 and earlier */	
    z-index: 1100;
    cursor: pointer;
    display: none;
}

/* img.back-to-top.footer-overlap, */
/* #footer.expanded img.back-to-top { */
img.back-to-top.footer-overlap {
	position: absolute;
	top: -63px;
	bottom: auto;
}

img.back-to-top:hover {
 	opacity: 0.90;
    filter: alpha(opacity=90); /* For IE8 and earlier */
}










/** 09. Common Utilities
 **************************************************************** **/

ul.list-vertical, ul.list-vertical li {
	margin-left: 10px;
	padding: 0px;
}

.padding3 	{ padding:3px 0 !important; 	}
.padding6 	{ padding:6px 0 !important; 	}
.padding8 	{ padding:8px 0 !important; 	}
.padding10 	{ padding:10px 0 !important; 	}
.padding20 	{ padding:20px 0 !important; 	}
.padding30 	{ padding:30px 0 !important; 	}		
.padding40 	{ padding:40px 0 !important; 	}
.padding50 	{ padding:50px 0 !important; 	}
.padding60 	{ padding:50px 0 !important; 	}
.padding70 	{ padding:70px 0 !important; 	}
.padding80 	{ padding:80px 0 !important; 	}
.padding90 	{ padding:90px 0 !important; 	}
.padding100 	{ padding:100px 0 !important; 	}

.padding-bottom5 { padding-bottom: 5px; }
.padding-top10 	 { padding-top: 10px!important; }

.margin-top10		{ margin-top:10px; }
.margin-top20		{ margin-top:20px; }
.margin-top30		{ margin-top:30px; }
.margin-top40		{ margin-top:40px; }
.margin-top50		{ margin-top:50px; }
.margin-top60		{ margin-top:60px; }
.margin-top80		{ margin-top:80px; }
.margin-top100		{ margin-top:100px; }
.margin-top130		{ margin-top:130px; }
.margin-top150		{ margin-top:150px; }
.margin-top180		{ margin-top:180px; }
.margin-top200		{ margin-top:200px; }

.margin-bottom10	{ margin-bottom:10px; }
.margin-bottom20	{ margin-bottom:20px; }
.margin-bottom30	{ margin-bottom:30px; }
.margin-bottom40	{ margin-bottom:40px; }
.margin-bottom50	{ margin-bottom:50px; }
.margin-bottom60	{ margin-bottom:60px; }
.margin-bottom80	{ margin-bottom:80px; }
.margin-bottom100	{ margin-bottom:100px; }
.margin-bottom130	{ margin-bottom:130px; }
.margin-bottom150	{ margin-bottom:150px; }
.margin-bottom180	{ margin-bottom:180px; }
.margin-bottom200	{ margin-bottom:200px; }

.margin-left20 { margin-left: 20px; }


.radius3 {
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
}
.radius6 {
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;
}
.radius8 {
	-webkit-border-radius: 8px;
	   -moz-border-radius: 8px;
			border-radius: 8px;
}

.fixed 				{ position:fixed !important; 	}
.relative 			{ position:relative !important;	}
.absolute 			{ position:absolute !important; }
.nopadding 			{ padding:0 !important; 		}
.nopadding-left 		{ padding-left:0 !important; 	}
.nopadding-right 	{ padding-right:0 !important; 	}
.nopadding-top 		{ padding-top:0 !important; 	}
.nopadding-bottom	{ padding-bottom:0 !important; 	}
.nomargin 			{ margin:0 !important; 			}
.nomargin-left 		{ margin-left:0 !important; 	}
.nomargin-right 		{ margin-right:0 !important; 	}
.nomargin-top		{ margin-top:0 !important; 	}
.nomargin-bottom	{ margin-bottom:0 !important; 	}
.noborder 			{ border:0 !important; 			}
.noradius			{ -webkit-border-radius:0 !important; -moz-border-radius:0 !important; border-radius:0 !important; }
.italic 				{ font-style:italic; 			}
.block 				{ display:block !important; 	}
.fullwidth 			{ width:100% !important; 		}
.halfwidth 			{ width:50% !important; 		}
.container			{ position:relative; 			}
i.fa 				{ text-decoration:none !important;}
.btn i.fa			{ padding-right:10px; 			}
.nowrap				{ white-space: nowrap !important;	}
.wrap				{ white-space: normal !important;	}
.transparent		{ background:transparent !important;}


/* image rounded */
.rounded {
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}














/** 10. Headings
 **************************************************************** **/
h1 {
	font-size: 1.8em;
	line-height: 30px;
	margin: 0 0 12px 0;
}

h2 {
	font-size: 1.5em;
	font-weight: 300;
	line-height: 30px;
	margin: 15px 0px 10px 0px;
}

h3 {
	font-size: 1.2em;
	font-weight: 300;
	letter-spacing: normal;
	line-height: 24px;
	margin: 0 0 8px 0;
}


h4 {
	font-size: 1.1em;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 27px;
	margin: 10px 0 2px 0;
}

header#page-title {	
	position:relative;
	margin-bottom:20px; 

	background-repeat: no-repeat;
	background-position: 50% 50%;

	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;
}











/** 11. Paragraphs
 **************************************************************** **/
p {
	line-height: 22px;
	margin: 0 0 20px;
}

/*
 Some concerns around people not liking a leading paragraph 
.lead {
  font-size: 18px;
  font-weight: 10;
}*/
p.lead {
	line-height: 22px;
	margin: 0 0 20px;
	font-size: 15px;
}







/** 12. Links
 **************************************************************** **/

a { text-decoration:underline; }
header#topNav a, h1 a, h2 a, h3 a { text-decoration:none; }


.label a,
.label a:hover,
a.label,
a.label:hover {
	color:#fff;
}

a.btn { text-decoration: none; } 









/** 13. Lists
 **************************************************************** **/

ul.list-icon {
	margin:0 0 10px 25px; padding:0;
}
ul.list-icon li {
	list-style:none;
}
ul.list-icon li:before {
	display: inline-block;
	height: 18px;
	width: 18px;
	line-height:18px;
	font-family: FontAwesome;
	content: ' ';
	float: left;
	margin:3px 0 0 -25px;
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	text-align: center;

	-webkit-border-radius: 18px;
	   -moz-border-radius: 18px;
			border-radius: 18px;
}
ul.list-icon.angle-right li:before {
	content:'\f105';
}
ul.list-icon li.phone:before {
	content: "\f095";
}		
ul.list-icon li.email:before {
	content: "\f0e0";
}
ul.list-icon li.mail:before {
	content: "\f041";
}	
ul.list-icon li.web:before { 
	content: "\f0ac";
}
	
	
	
	
/** 14. Callouts
 **************************************************************** **/
.bs-callout {
	clear:both;
	position:relative;
	overflow:hidden;
	margin:60px 0;
	padding:36px 0;
}
.bs-callout h1, .bs-callout h2, .bs-callout h3 {
	margin:0;
	text-transform:none;
	line-height:30px;
}
.bs-callout.margin-top {
	margin:60px 0 0 0;
}

.bs-callout .btn {
	margin:0 20px;
}




/** 15. Progress Bar
 **************************************************************** **/
nav.progress-steps a {
  text-decoration: none;
}
ol.cd-multi-steps {  
    -webkit-padding-start: 0px;
}
.cd-multi-steps {
	width: 100%;
	max-width: 768px;
	min-width: 290px;
	margin: 1em auto;
	border-radius: .25em;
	font-size: 14px;
	line-height: 15px;
	background-color: transparent;
	text-align: center;
}
.cd-multi-steps:after {
	content: "";
	display: table;
	clear: both;
}
.cd-multi-steps li {
	display: inline-block;
	margin: 0.3em 20px 0.3em 0;	
	position: relative;
    float: none;
	text-align: center;
}
.cd-multi-steps li::after {
    /* this is the separator between items */
	display: inline-block;
	/* this is the line connecting 2 adjacent items */
    position: absolute;
    content: '';
    height: 4px;
	margin: 0 .6em;
	left: 50%;
    /* 40px is the <li> right margin value */
	width: calc(100% + 20px);	
}
.cd-multi-steps li:last-of-type {
    margin-right: 0;
}
.cd-multi-steps li:last-of-type::after {
	/* hide separator after the last item */
	display: none;
}
.cd-multi-steps li > * {
  /* single step */
  display: inline-block;
}
.cd-multi-steps li > *, .cd-multi-steps li.current > * {
	position: relative;
}
.cd-multi-steps.text-top li > *::before {
	/* this is the spot indicator */
	content: '';
	position: absolute;
	z-index: 1;
	left: 50%;
	right: auto;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	height: 12px;
	width: 12px;
	border-radius: 50%;
	bottom: 0;
}

.no-touch .cd-multi-steps.text-top a:hover::before {
	box-shadow: 0 0 0 3px rgba(150, 192, 61, 0.3);
}

.cd-multi-steps.text-top li::after {
	/* this is the line connecting 2 adjacent items */
	bottom: 4px;
}
.cd-multi-steps.text-top li > * {
	padding-bottom: 20px;
}




/* Add a counter to the multi-steps indicator  */
.cd-multi-steps.count li {
  counter-increment: steps;
}
.cd-multi-steps.count li > *::before {
  content: counter(steps) " - ";
}
.cd-multi-steps.text-top.count li > *::before {
	content: counter(steps);
	height: 30px;
	width: 30px;
	line-height: 32px;
	font-size: 18px;
}
.cd-multi-steps.text-top.count li::after {
	bottom: 11px;
}
.cd-multi-steps.text-top.count li > * {
	padding-bottom: 34px;
}
.cd-multi-steps li span { font-size:0px;line-height: 0px; }
.cd-multi-steps.text-top li  {
	width: 35px;
}














/** 16. Tables
 **************************************************************** **/

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background: 0 0;
}

table.dataTable thead .sorting_asc:after {
    content: "\f0de";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting_desc:after {
    content: "\f0dd";
    float: right;
    font-family: fontawesome;
}

table.dataTable thead .sorting:after {
    content: "\f0dc";
    float: right;
    font-family: fontawesome;
    color: rgba(50,50,50,.5);
}

.dataTables_length label {
		float:right;
	}




.table-types th, .table-types td { 
	width: 33.33333%;  
	vertical-align:top; 
	border-left: solid 4px #fff; 
	border-right: solid 4px #fff;
}

.table-types th h2 { margin: 15px 25px 0px 25px; padding: 0px; }
.table-types td .detail-top { border-top: solid 2px transparent; padding-top: 5px; margin: 5px 25px 10px 25px; }
.table-types td .detail, .detail { border-top: dashed 1px transparent; padding-top: 5px; margin: 5px 25px 10px 25px; }


.table-row-select tbody > tr > :hover {
	cursor:pointer;
}


#dataTables-example {
	  width: 100%!important;
}






/** 17. Buttons
 **************************************************************** **/
.btn {	
	font-size: 16px;
	padding: 8px 12px 6px 12px; /* to deal with different fonts...*/
}

.btn-sm, .btn-sm:hover {
	padding: 6px 12px 4px 12px; /* to deal with different fonts...*/
}
.btn-lg {
	font-size: 18px;
	padding: 10px 14px 8px 14px; /* to deal with different fonts...*/
	text-align:center;
	min-width: 200px;
}


.btn-default { font-weight: bold; }

.btn-register {  
	border-width: 2px;
}
.btn-login-header {
	border-width: 2px;
}










/** 18. Filter 
 **************************************************************** **/
.filter {
	display:none;
	padding: 10px;
	background-color: #f1f1f1;
	border:#ddd 2px solid;margin-top:-2px;
}
.filter h3 { display:none; }
.btn-show-filter {
	display:inline-block;
	background:none !important;
	border:#ccc 2px solid;
	padding:8px 18px;
	text-decoration:none;
}
.btn-filter-list {
	width: inherit;
}
.filter-panel {
}




@media (min-width: 992px) {
	
	.filter h3 { display:inline-block; width: 100%; }
	.filter {
		display:inline-block;
		background-color: #fff;
		padding: 0px;
		border-width:0px;margin-top:0px;
	}
	.btn-show-filter {
		display:none;
	}
	.btn-filter-list {
		width: 100%;
	}
	
}



/** 19. Dividers
 **************************************************************** **/
hr {
	border:0;
	margin:60px 0;
	border-top:#ddd 1px solid;
	border-bottom:#fff 1px solid;
}
hr.half-margins {
	margin:30px 0;
}
	
hr.quarter-margins {
	margin:20px 0;
}
hr.no-lines {
	border:transparent 0px solid;
}





/** 20. Forms
 **************************************************************** **/

label.optional:after { content: ' (optional)'; font-weight:normal; }

.instruction { margin-bottom: 2px; }
.label-with-instruction { margin-bottom: 0px; }


form .input-group-btn .btn i.fa { 
	padding-right:0;
}

.search-panel { padding: 20px; }

.radio-condensed { margin-bottom: 5px; }

.form-group:after {
	display:block; content:".";
	height:0; line-height:0;
	clear:both; visibility:hidden;
}
/*
.form-control {
	height: 46px; 
	padding: 12px;
	border:#e6e6e6 2px solid;

	-webkit-border-radius:6px;
	   -moz-border-radius:6px;
			border-radius:6px;

	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
			box-shadow:none;
}

.form-control:focus {
	border-color:#c6c6c6;

	-webkit-box-shadow:none;
	   -moz-box-shadow:none;
			box-shadow:none;
}
*/
/*
form label {
	font-weight:300;
}
*/
/* bootstrap validate icon */
.form-control-feedback {
	margin-top:8px;
}

/* Disables a button if a sibling form-control is disabled */
.form-control[disabled] ~ .hideIfSiblingIsDisabled {
    pointer-events: none;
    cursor: not-allowed; 
    opacity: .65;
}

/*
TRINITY
.input-group-btn>button {
	height: 46px;
}
*/

.input-200 {
	max-width: 200px;
}
.input-300 {
	max-width: 300px;
}
.input-400 {
	max-width: 400px;
}

.input-inline {
    display: inline-block;
}

.input-nofloat {
    float: none !important;
}

/*.input-select-margin {
    margin-right: 10px;
}*/

.btn-same-width { 
	min-width: 225px;
}

.btn-same-width-md { 
	min-width: 260px;
}
.btn-same-width-sm { 
	min-width: 175px;
}

.register-nav > .btn:first-child {
	margin-right: 10%;
}
.register-nav > .btn { 
	width: 44%;
}


@media only screen and (max-width: 479px) {

	.on-xs-block { width: 100%; }

}


.form-error-summary .text-danger { padding: 10px; }
.form-error-summary { margin-bottom: 20px; }

/* Labels */
label { font-weight: bold; }

label.optional, 
label.optional-nolbl { font-weight:normal!important; }
label.optional:after { content: ' (optional)'; }
label.required:after { }


.field-help-block {
    color: #d89c1d;
    text-align:left;/**/
    padding-right: 15px;
}
.field-help-block-radio {
	text-align:left!important;
}

.help-block {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 10px;
  color: #737373;
}

.form-help {
    margin: 0 0 5px 0;
}

.textfield-form {
	margin-bottom: 10px;
}

.form-field {
	clear: both;
}
/*.form-field select {
    margin-right: 7px;
}*/

.form-field:after {
	content: '';
	display: block;
	clear:both;
}
.form-field input, .form-field select, form-field .help-block {
	float:left;	
}
.form-field input, .form-field select {
	margin-right: 10px;
}









/** 21. Tabs
 **************************************************************** **/
div.tabs {
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;

	margin:20px 0;
}

div.tabs div.tab-content {
	border: solid 1px #ccc;
	padding: 17px;
	background-color: #FFF;

			 -webkit-border-radius: 6px;
	-webkit-border-top-left-radius: 0;
				-moz-border-radius: 6px;

		-moz-border-radius-topleft: 0;
					 border-radius: 6px;
			border-top-left-radius: 0;
}

div.tabs ul.nav-tabs {
	margin: 0;
	border: 0;
}

div.tabs ul.nav-tabs li.active a {
	border: 0;
	border-top: solid 1px #ccc;
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #fff;
	color: #333;
	background: #fff;
	padding-top:10px;
}

div.tabs ul.nav-tabs a {
	color: #666;
	margin-right: 1px;
	padding: 10px 20px;
	background: #eaeaea;
	/*border:0 !important;*/
border: solid 1px #ccc;
	-webkit-border-radius: 6px 6px 0 0;
	   -moz-border-radius: 6px 6px 0 0;
			border-radius: 6px 6px 0 0;
}

div.tabs ul.nav-tabs a i.fa {
	padding-right:6px;
}

















/** 22. Toggle
 **************************************************************** **/
div.toggle {
	margin: 10px 0 0;
	position: relative;
	clear: both;
}

div.toggle > label {
	cursor: pointer;
	font-size: 16px;
	font-weight:normal;
	padding: 10px 20px 10px 40px;
	position: relative;
	display: block;

	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;

	-webkit-transition: all .10s ease-out;
	   -moz-transition: all .10s ease-out;
		 -o-transition: all .10s ease-out;
			transition: all .10s ease-out;

	-webkit-touch-callout: none; 
	  -webkit-user-select: none; 
	   -khtml-user-select: none; 
		 -moz-user-select: none; 
		  -ms-user-select: none; 
			  user-select: none;
}

div.toggle div.toggle-content {
	border: 0;
	display: none;
	margin-top: -5px;
	padding: 15px 20px;
	
	-webkit-border-radius: 0 0 6px 6px;
	   -moz-border-radius: 0 0 6px 6px;
			border-radius: 0 0 6px 6px;
}

div.toggle > label:before {
	content: '';
	border: 6px solid transparent;
	border-top-color: inherit;

	position: absolute;
	top: 50%; left: 14px;
	margin-top: -3px;
}

div.toggle > label + p {
	color: #888;
	height: 25px;
	display: block;
	overflow: hidden;
	padding-left: 10px;
}

div.toggle.active > label:before {
	border: 6px solid transparent;
	border-bottom-color: #fff;
	left: 14px; margin-top: -10px;
}




/** 23. Modal
 **************************************************************** **/
 /* modal page-wrapper bugfix */
.modal {
	padding-top:130px;
	background:rgba(0,0,0,0.3);
}
.modal-backdrop {
		z-index: 1 !important; /* because of #wrapper */
}

.modal-content {
	overflow:hidden;

	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;
}
.modal-header {
	/*background-color:#333;*/
}
.modal-header  button,
h4.modal-title {
	opacity:1;
}
.modal-header  button {
	font-size:30px;
}
.modal.fade .modal-dialog {
	z-index:9999;
}






.modal {
	background: rgba(255,255,255,0.8);
}
.modal-header {
	background-color:inherit;
	
}
.modal-title, h4.modal-title {
	font-size:1.4em;
	
}
.modal-backdrop {
	background-color: #ffffff;
}
.modal-backdrop.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.modal-content {
	-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .5);
          box-shadow: 0 0px 0px rgba(0, 0, 0, .5);
}




/** 24. Right Column
 **************************************************************** **/	
	
.related-content-box { }	
.related-content-box h2 { 
	margin: 0; 
    font-size: 18px;
	line-height: 22px;
	font-weight: 600;
    padding: 8px 15px 7px 15px;
}
.related-content-box-content {
    padding: 15px;
    margin-bottom: 15px;
    word-wrap: break-word;   
}







/** 25. Misc Components
 **************************************************************** **/
 
 


/* On Types */
.grey-row { 
	padding:20px; 
	margin-bottom:20px;
	-webkit-border-radius:6px;
	   -moz-border-radius:6px;
			border-radius:6px;
}
.grey-row .detail-top { border-top: solid 2px transparent; padding-top: 5px; margin: 5px 0px 10px 0px; }
.grey-row .detail { border-top: dashed 1px transparent; padding-top: 5px; margin: 5px 0px 10px 0px; }



/* On Business/Personal Registration Steps */
.registration-step { 
	display:table;
	border-bottom: solid 1px #f1f1f2;
	margin-bottom: 20px;
}
.registration-step > .step-nbr-col { 
	display:none;
}
.registration-step > .step-info { 
	display:table-cell;	
}
.registration-step > .step-nbr-col > .step-nbr {
	width: 30px;
	height: 30px;
	background-color: #003366;
	background-color:transparent;
	border: solid 2px #494949;
	color: #494949;
	font-weight: bold;
	text-align:center;
	line-height: 30px;
}






/* Service Details  */
.login-option { 
	background-color: #f5f5f5;
	border: 1px solid #e3e3e3;
	margin-bottom: 30px;
}

.login-option-info { 

	min-height: 20px;
  padding: 5px 19px 0px 19px;
  
  
  
  /*border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
	*/
  
}

.register-fixed-bottom {
	padding: 15px 15px 15px 19px;
}
	

/* Login */

div.login-box {
	display:inline-block;
	vertical-align:top;
}





 /* On homepage */
.feature-block { display:table; }
.feature-block-icon { display:table-cell; vertical-align:middle; padding-right:15px; } 
.feature-block-text { display:table-cell; vertical-align:middle; padding-right: 25px; }

@media ( max-width : 767px) {
	.feature-block-text { padding-right: 0px; }
}


div.featured-box {
	padding: 10px 0px;
	text-align:left;
	background:none;
}


div.featured-box i.fa {
	padding: 0;
		margin: 20px 0; 
	margin-right:10px;
	margin-top:0;

	text-align:center;
	position: relative;
	display: inline-block;
	
	font-size:20px;
	width:50px; height:50px;
	line-height:50px;
	
	background:none !important;
	border:#333 1px solid;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
			border-radius: 50%;
}



	/* featured icons - alone */
	i.featured-icon {
		color: #333;
		margin: 5px 0;
		padding: 0;
		display: inline-block;
		font-size: 25px;
		width: 50px; height: 50px;
		line-height: 50px;
		position: relative;
		background-color:#fff;
		border:#333 1px solid;
		text-align:center;

		-webkit-border-radius: 50%;
		   -moz-border-radius: 50%;
				border-radius: 50%;

		-webkit-transition: all 0.2s;
		   -moz-transition: all 0.2s;
			 -o-transition: all 0.2s;
				transition: all 0.2s;
	}
	
	i.featured-icon:after {
		background: transparent;
		pointer-events: none;
		content: '';
		display: block;
		border-radius: 50%;
		border: 1px solid #333;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
		margin-top: -100px;
		filter: alpha(opacity=0);
		opacity: 0;
	
		-webkit-transition: all 0.2s;
		   -moz-transition: all 0.2s;
			 -o-transition: all 0.2s;
				transition: all 0.2s;
	}
	
	
	i.featured-icon.pull-left {
		margin-right:20px;
	}
	i.featured-icon.pull-right {
		margin-left:20px;
	}


	i.featured-icon,
	i.featured-icon:after {
		border:#333 1px solid;
	}
	

	/* box-icon line separator */
	.featured-box.left-separator {
		border-left:#e6e6e6 0px solid;
		margin-left: 0px;

	}
	























/** 29. Nav List (aside)
 **************************************************************** *
aside ul.nav-list {
	padding:0; 
	margin:0;
	background-color:lime;
}
aside h3,
aside h4 {
	font-size:16px;
	line-height:20px;
	margin-bottom:20px;
}
aside h4 {
	margin-top:60px;
}
aside ul.nav-list li{
	padding:0;
	border-bottom:#ccc 1px dotted;
}
aside ul.nav-list li a {
	padding-left:0;

	-webkit-transition: all 0.2s;
	   -moz-transition: all 0.2s;
		 -o-transition: all 0.2s;
			transition: all 0.2s;
}
aside ul.nav-list li.active>a,
aside ul.nav-list li a:hover {
	padding-left:10px;
}
aside ul.nav-list li a i {
	padding-right:6px;
	color:#ddd;
}
*/





	





















  
  
 
/**	--. Print Rules
*************************************************** **/
@media print {
	/* 
		@CUSTOM RULES 
	*/
	
	/* print resets */
	body * {
		margin:0; padding:0;
	}
	#wrapper {
		margin:0 !important;
		padding:20px 0 0 0 !important;
	}
	.page-wrapper { margin-top: 0px!important; padding-top: 0px!important; }
    .page-wrapper-with-sidebar { margin-top: 0px!important; padding-top: 0px!important; }
	#page-title { margin-top: 0px; padding-top: 0px; }
	
	/* print logo version */
	#print-logo img { height: 55px; }
	#print-logo { border-bottom: solid 1px #ddd;padding-bottom: 5px; }

	/* display none for all other elements - remove whitespaces */
	#topNav, footer, .btn, topNav { display:none; }
    #hiddenScreenNumber {display: block !important;}

	/* override bootstrap default - do not display url as text after urls  */
	a[href]:after {
		content: "";
	}
 
}




/** 19. Alerts
 **************************************************************** **/
.alert {
	border: 0;
}
.alert i.fa {
	font-size:20px;
	margin-right:10px;
}
.alert.alert-success {
	background-color:#d2ebb8;
	border-left:#3C763D 3px solid;
}
.alert.alert-info {
	background-color:#aae1f5;
	border-left:#31708F 3px solid;
}
.alert.alert-warning {
	background-color:#fce3a3;
	border-left:#8A6D3B 3px solid;
}
.alert.alert-danger {
	background-color:#f8bac0;
	border-left:#A94442 3px solid;
}



/** 22. Accordion
 **************************************************************** **/
.panel-group {
	padding: 3px;
	background: #fff;
	border: 0;

	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;
}

.panel {
	border: 0;
	background: transparent;

	-webkit-box-shadow: none;
	   -moz-box-shadow: none;
			box-shadow: none;
}

.panel-default > .panel-heading {
    background: #F5F7F7;
	padding: 11px 15px;

	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;
}

.panel-heading .fa {
    display: inline-block;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    height: 25px;
    margin-right: 2px;
    padding: 5px;
    position: relative;
    text-align: right;
    top: -1px;
    width: 25px;
}

.panel-title a {
	text-decoration:none;
	display:block;
	color:#333;
}

.panel-body {
	padding: 21px;
}




/**	--. Retina display
*************************************************** **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	
	header #bcGov a.logo { 
		background-image: url("../images/bceid_rev@2x.png");
	}

    header #bcGov a.govlogo {
        background-image: url('../images/BCID_Rev_100@2x.png');
    }

	header #topNav nav ul.nav-pills > li.active > a,
	header #topNav nav ul.nav-pills > li.active > a:hover,
	header #topNav nav ul.nav-pills > li.active > a:focus {
		background-image: url("../images/nav-ribbon-arrow@2x.png");
	}
}


/** --. Printable Div
    If want to dismiss these rules, 
    add to body: class="printable"
    Or simply delete custom rules!
*************************************************** **/
@media print {
    /* 
        @CUSTOM RULES 
    */

    #wrapper {
        margin: 0 !important;
        padding: 20px 0 0 0 !important;
    }

    .page-wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: unset !important;
    }

    /* Need a bit of padding because were missing the contact info bar */
    #page-title {
        margin-top: 0;
        padding-top: 24px;
    }

    /* Change home link logo to the non-inverted one because its a white background
        Make default image size larger
        Had to make a seperate image because IE can't change the src of the img tag via CSS
    */
    #bcGovHomeLinkImgPrint {
        height: 64px !important;
    }

    /* display none for all other elements - remove whitespaces */
    #topNav, .btn {
        display: none;
    }
    /* override bootstrap default - do not display url as text after urls */
    a[href]:after {
        content: "";
    }

    /* In print mode we don't want the floating header, and unconstrain its height for logo 
       Small bit of padding on the bottom because if they save as PDF the logo overlaps all
        so slightly.  
        
        And IE print has trouble with auto heights, but firefox can't use fixed the height.
        So, we fill the height 100%.
    */
    header {
        position: relative !important;
        height: 100% !important;
        padding-bottom: 1px;
    }
    
    footer {
        margin-top: 30px !important;
    }

    /* Headings in print mode look too close to previous text
        Adding some margin on the top
    */
    h2 {
        margin-top:16px !important;
    }

    /* Reduce margin for page titles */
    h1 {
        margin-bottom: 0 !important;
    }

    /* Force visible print is for toggling hide/show divs, use this if you want to
        force visible print regardless of previous statae
    */
    .force-visible-print {
        display: unset !important;
    }

    ul:not([class]), ul:not([class]) li, ol:not([class]), ol:not([class]) li {
        margin-left: 20px;
    }
}


.alertBoxFooter {
    margin-top: 10px;
}