@font-face {
	font-family: 'HNforTELUS';
	src: url(/resource/HNforTelusFont/HNforTelus/HNforTELUS.ttf) format('truetype');
}

label, p, a{
	font-family: "HNforTELUS";
}

.left{
	float: left !important;
}

.right{
	float: right !important;
}

.container{
	width: 100% !important;
	height: 100% !important;
}

.panel {
	margin-bottom: 0 !important;
	border-radius: 0 !important;
	-webkit-box-shadow: 0 0px 0px 0px rgba(0,0,0,0) !important;
	box-shadow: 0 0px 0px 0px rgba(0,0,0,0) !important;
	border-color: #d0d0d0 !important;	
}

.form-control {
	border-radius: 0px !important;
}

.form-group {
	margin-left: 0px !important;
}

.form-error {
	display: none;
	position: relative;
	margin-top: 10px;
	margin-bottom: 15px;
	padding: 4px 10px 4px 10px;
	color: #333333;
	background-color: #fde9ed;
	font-size: 13px;
	line-height: 17px;
}

.text-bubble {
	display: none;
	position: relative;
	margin:10px 0;
	padding: 8px 10px 8px 10px;
	color: #333333;
	background-color: #d8b0f4;
	font-size: 13px;
	line-height: 17px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;	
}

.text-bubble p{
	text-align: center;
	font-size: 16px; 
}

.text-bubble-close{
	float: right; 
	font-size: 24px; 
	color: #7d668e !important;
}

.form-error p{
	color: #222222;
	font-size: 13px;
}

.form-field-error {
	display: none;
	position: relative;
	margin-top: -5px;
	margin-bottom: 0;
	padding: 4px 10px 4px 10px;
	color: #333333;
	background-color: #fde9ed;
	font-size: 13px;
	line-height: 17px;
}


.form-field-error p{
	color: #222222;
	font-size: 13px;
}

.form-field-error:before {
	content: "";
	display: block;
	position: absolute;
	top: -5px;
	left: 95%;
	width: 0;
	border-width: 0 7px 7px;
	border-style: solid;
	border-color: #fde9ed transparent;
}

.block {
	display: block !important;
}

.inline {
	display: inline !important;
}

.input-field-icon{
	position: relative !important;
	left: 95% !important;
	top: -22px !important;
	display: none !important;
}

.form-group label{
	line-height: 1.42857143 !important;
}

.form-group input[type="checkbox"] + label, .form-group input[type="radio"] + label {
	display:inline-block;
}

.form-select{
	padding: 8px 1% 8px 1% !important;
}

.select-field-icon{
	position: relative !important;
	left: 93% !important;
	top: -32px !important;
	display: none !important;
	font-size: 28px !important;
	width: 6% !important;
}

.error-red{
	color: #bd0000 !important;
}

.success-green{
	color: #66cc00 !important;
}

.form-field-info-panel{
	float: left !important;
	width: 100% !important;
	padding: 2%;
	margin-bottom: 15px;
    background: #f3f3f3 !important;
	border: 1px solid #e0e0e0 !important;	
}

.password-strength-panel{
	float: left !important;
	width: 100% !important;
	padding: 2%;
	margin-bottom: 15px;
    background: #f3f3f3 !important;
	border: 1px solid #e0e0e0 !important;	
}

.password-strength-detail-panel{
	float: left;
	width: 100%;
	padding: 2% 0 2% 0;
}


.input-error{
	box-shadow: inset 0 1px 1px rgba(255,0,0,.075) !important;
	border-color: #bd0000 !important;
}
/*
.grid {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
*/

.row{
	width: 100% !important;
	margin-right: 0px !important;
	margin-left: 0px !important;
}
		
.panel-header  {
	font-family: "HNforTELUS" !important;
	font-size: 28px !important;
	margin-bottom: 1em !important;
	font-family: "HNforTELUS" !important;
	line-height: 1 !important;
	margin-bottom: 20px  !important;
}
	
.panel-header-medium {
	font-family: "HNforTELUS" !important;
	font-size: 28px !important;
	margin-bottom: 1em !important;
	font-family: "HNforTELUS" !important;
	line-height: 1!important;
	margin-bottom: 20px  !important;
}
	
.panel-right {
	width: 100% !important;
}

.content-grid {
	padding-left: 0px !important;
	padding-right: 0px !important;
}	
	
@media (min-width: 768px){
	.content-grid {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	
	.row{
		margin-left: auto !important; 
		margin-right: auto !important; 
		margin-top: 1% !important;
		margin-bottom: 1% !important;		
		width: 66% !important;
	}
	
	.panel-body{
		margin: 0 !important;
		padding-left: 14% !important;
		padding-right: 14% !important;
	}
	
	.panel-header  {
		font-family: "HNforTELUS" !important;
		font-size: 36px !important;
		margin-bottom: 1em !important;
		font-family: "HNforTELUS" !important;
		line-height: 1!important;
		margin-bottom: 20px  !important;
    }
	
	.panel-header-medium {
		font-family: "HNforTELUS" !important;
		font-size: 28px !important;
		margin-bottom: 1em !important;
		font-family: "HNforTELUS" !important;
		line-height: 1!important;
		margin-bottom: 20px  !important;
	}
	
	
	.panel-right  {
		width: 50% !important;
    }
}	

.hidden{
	display: none;
}

.col-centered{
    float: none !important;
    margin: 0 auto;
}

.container {
    padding-left:0px !important;
    padding-right:0px !important;
}

.container-xs-height {
    display:table !important;
    padding-left:0px !important;
    padding-right:0px !important;
}
.row-xs-height {
    display:table-row !important;
}
.col-xs-height {
    display:table-cell !important;
    float:none !important;
}
@media (min-width: 768px){
    .container-sm-height {
        display:table !important;
        padding-left:0px !important;
        padding-right:0px !important;
    }
    .row-sm-height {
        display:table-row !important;
    }
    .col-sm-height {
        display:table-cell !important;
        float:none !important;
    }
}

@media (min-width: 992px) {
    .container-md-height {
        display:table !important;
        padding-left:0px !important;
        padding-right:0px !important;
    }
    .row-md-height {
        display:table-row !important;
    }
    .col-md-height {
        display:table-cell !important;
        float:none !important;
    }
}
@media (min-width: 1200px) {
    .container-lg-height {
        display:table !important;
        padding-left:0px !important;
        padding-right:0px !important;
    }
    .row-lg-height {
        display:table-row !important;
    }
    .col-lg-height {
        display:table-cell !important;
        float:none !important;
    }
}

/* vertical alignment styles */
.col-top {
    vertical-align:top;
}
.col-middle {
    vertical-align:middle;
}
.col-bottom {
    vertical-align:bottom;
}

/* fix firefox responsive images */
.img-responsive {
    width: 100%
}




.panel-last{
	border-left: 0px solid #ffffff !important;
}

.no-padding{
	padding: 0 !important;
}

.no-padding-v{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.no-padding-h{
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.color-white{
	color: #ffffff !important;
}

.color-light-grey{
	color: #f0f0f0 !important;
}

.color-grey{
	color: #e0e0e0 !important;
}

.color-dark-grey{
	color: #a0a0a0 !important;
}

.color-light-black{
	color: #707070 !important;
}

.color-black{
	color: #303030 !important;
}

.color-purple{
	color: #49166d !important;
}
.color-dark-purple{
	color: #651f97 !important;
}

.background-white{
	background: #ffffff !important;
}

.background-very-light-grey{
	background: #fcfcfc !important;
}

.background-light-grey{
	background: #f0f0f0 !important;
}

.background-dark-grey{
	background: #e0e0e0 !important;
}

.background-light-purple{
	background: #e0d2ea !important;
}

.background-dark-purple{
	background: #651f97 !important;
}

.background-green{
	color: #7DD117 !important;
}

.border-none{
	border-left: 0px none #ffffff !important;
	border-top: 0px none #ffffff !important;
	border-right: 0px none #ffffff !important;
	border-bottom: 0px none #ffffff !important;
}

.border-no-radius{
	border-radius: 0 !important;
}

.border-grey{
	border-color: #d0d0d0 !important;
}

.border-left{
	border-left: 1px solid #e0e0e0 !important;
}

.border-bottom{
	border-bottom: 1px solid #e0e0e0 !important;
}

.border-right{
	border-right: 1px solid #e0e0e0 !important;
}

.border-dark-purple{
	border-top-color: #651f97 !important;
	border-left-color: #651f97 !important;
	border-right-color: #651f97 !important;
	border-bottom-color: #651f97 !important;
}















*
{
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

h2{
	text-align: left !important;
}

.box{ 
	float: left;
	min-height: 100px;
    text-align: center;
}

.box-small{
	width: 33%;
}

.box-medium{
	width: 48%;
}

.box-large{
	width: 98%;
}

.box-header{
    font-family: inherit;
	height: 48px;
	border-bottom: 1px solid #dddddd;
	padding: 8px 8px 8px 8px;
}

.box-header-label{
    font-size: 12px;
	margin: 0 0 2px 0 !important;
}

.box-body{
	width: 100%;
	height: 100%;
	padding: 16px 16px 16px 16px;
}

.box-body-paragraph{
    text-align: left !important;
	margin: 0 0 0 0 !important;
}

.button-box-small{
	width: 25%;
	min-height: 20px !important;
	height: auto;
	vertical-align:middle;
}

.h-spacer-small{
	float: left;
	width: 100%;
	height: 10px;
}

.h-spacer-medium{
	float: left;
	width: 100%;
	height: 25px;
}

.h-spacer-large{
	float: left;
	width: 100%;
	height: 50px;
}

.v-rule{
	width: 1px;
	height: 100%;
}

.full-width{
	width: 100% !important;
	max-width: none !important;
}

.one-qtr-width{
	width: 25% !important;
}

.one-third-width{
	width: 33% !important;
}

.two-thirds-width{
	width: 66% !important;
}

.three-qtr-width{
	width: 75% !important;
}

.half-width{
	width: 50% !important;
}

.full-height{
	height: 100% !important;
}

.left-align{
	text-align: left !important;
}

.center-text{
	text-align: center !important;
}

.auto-center{
    float: none !important;
	display: inline-block;
	margin: 0 auto;
}

.auto-height{
	min-height: 0 !important;
	height: auto;
}

.auto-margin-h{
	margin-left: auto !important; 
	margin-right: auto !important; 
}

.auto-margin-v{
	margin-top: auto !important; 
	margin-bottom: auto !important; 
}

.no-margin{
	margin: 0 0 0 0 !important; 
}

.small-margin-v{
	margin-top: 1% !important;
	margin-bottom: 1% !important;
}

.small-margin-h{
	margin-left: 1% !important;
	margin-right: 1% !important;
}

.medium-margin-h{
	margin-left: 4% !important;
	margin-right: 4% !important;
}

.medium-margin-v{
	margin-top: 4% !important;
	margin-bottom: 4% !important;
}

.large-margin-v{
	margin-top: 10% !important;
	margin-bottom: 10% !important;
}

.small-margin{
	margin: 1% 1% 1% 1% !important;
}

.small-padding-h{
	padding-left: 1% !important;
	padding-right: 1% !important;
}

.small-padding-v{
	padding-top: 1% !important;
	padding-bottom: 1% !important;
}

.small-padding{
	padding: 1% 1% 1% 1% !important;
}

.medium-padding-v{
	padding-top: 2% !important;
	padding-bottom: 2% !important;
}

.medium-padding-h{
	padding-left: 2% !important;
	padding-right: 2% !important;
}

.medium-padding{
	padding: 4% 4% 4% 4% !important;
}

.large-padding-h{
	padding-left: 14% !important;
	padding-right: 14% !important;
}

.large-padding-v{
	padding-top: 10% !important;
	padding-bottom: 10% !important;
}

.large-padding{
	padding: 14% 14% 14% 14%;
}

.x-large-padding-h{
	padding-left: 20% !important;
	padding-right: 20% !important;
}



.box-shadow-none{
	box-shadow: 0 0px 0px 0px rgba(0,0,0,0) !important;
}	

.box-shadow-small{
	box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1) !important;
}	

.box-shadow{
	box-shadow: 0 1px 3px 3px rgba(0,0,0,0.1) !important;
}	

.small-font{
	font-size: 12px !important;
}

.bold-font{
	font-weight: bold !important;
}

.bulleted-list{
    text-align: left;
    list-style-type: circle;
}

/*.color-green{
	color: #7DD117 !important;
}*/

.button-small{
	width: 100px !important;
}

.button-medium{
	width: 200px !important;
}

.button-large{
	width: 200px !important;
}

.button-font-tiny{
	font-size: 12px !important;
}

.button-font-small{
	font-size: 16px !important;
}

.button-font-medium{
	font-size: 20px !important;
}

.button-font-large{
	font-size: 24px !important;
}	