@import "lib/bootstrap.scss"; //Core styles
@import "qsf.scss";
@import "main.scss"; //Styles shared among user end and admin section
////////////////////////////////////////////////////////////////////
//															      //
//		User-End Styles											  //
//																  //
////////////////////////////////////////////////////////////////////
html, body {height: 100%;}
body { min-width: 320px;}

.bottom {background-color: #ececec;}

.insurance-companies-title {
	background-color: #30516d;
	padding:10px;
	position: relative;
	h3 {
		font-size: 24px; 
		color:$white; 
		font-weight: 300;
		margin:0;
		display: inline-block;
		text-align: center;
		margin: 0 auto;
		$width: 100px; 
		&:before, &:after {
			display: inline-block;
			width: $width;
			height: 1px;
			background-color: #FFF;
			position: absolute;
			content:"";
		}
		&:before {top: 50%; margin-left: -($width + 20px);}
		&:after {top: 50%; margin-left: 20px; }
	}
}
.insurance-companies-logos {
	padding: 20px 0;
	text-align: center;
	img {margin:10px 0;}
	// .row-fluid .span3 { border-right: 1px solid #d6d6d6;}
	// .row-fluid .span3:last-child { border-right: none;}
}

// Header
// -----------------------------------------------------------------
.brand-tel {
	font-weight: 300;
	font-size: 24px;
	color: $blue !important;
	text-decoration: none;
	margin-top: 20px;
	font-family: 'Comfortaa';
	letter-spacing: 1px;
}

// Modernizr
.touch {
	select {
		outline-style: none;
	}
}

// Wizard
.wizard_form {
  /*progressbar*/
  #progress {
  	width: 70%;
  	margin-top: 10px;
    margin-bottom: 30px;
    display: inline-block;
  }
  #progressbar {
  	margin: 0;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
    display: block;
  }
  #progressbar li {
    list-style-type: none;
    color: $accent;
    font-size: 12px;
    font-family: Arial, Helvetica;
    text-transform: uppercase;
    // width: 12.5%;
    width: 16.66666666666667%;
    float: left;
    position: relative;
    span {font-size: 0;}
  }
  #progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 10px;
	height:10px;
    line-height: 10px;
    display: block;
    font-size: 0px;
    color: #333;
    background: #d6d6d6;
    border-radius: 50%;
    border:5px solid #fff;
    margin: 0 auto 5px auto;
  }
  /*progressbar connectors*/
  #progressbar li:after {
    content: '';
    width: 100%;
    height: 8px;
    background: #d6d6d6;
    position: absolute;
    left: -50%;
    top: 6px;
    z-index: -1; /*put it behind the numbers*/
  }
  #progressbar li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
  }
  /*marking active/completed steps green*/
  /*The number of the step and the connector before it = green*/
  #progressbar li.superactive span {
	font-size: 12px;
  }
  #progressbar li.active:before {
    background: $accent;
    color: white;
  }
  #progressbar li.active:after {
    background: $accent-sec;
    color: white;
  }
  #spouseFirstRow-element, 
  [id^="dependentFirstRow_"], 
  [id^="childFirstRow_"], 
  [id^="filersDependentFirstRow_"], 
  [id^="filerFirstRow_"],
  [id^="siblingFirstRow_"],
  [id^="parentFirstRow_"] {
	margin-bottom: 0;
  }
  .inline-fields 
  {
  	@include clearfix();
  	margin-bottom: 0;
  	padding: 10px;
  	background-color: #eee;
  	dt, dd {float:left;}
  	dt {line-height: 34px; margin-right: 10px; margin-bottom: 0;}
  	dd { margin-right: 10px; margin-bottom: 0;}
  }
  select option {
	border-right: 1px solid #000; 
  }
  span.required {color:red}
}
 
// Wizard
.wizard-subtitle {
	padding:10px;
	background-color: #f5f5f5;
	margin-bottom: $baseLineHeight;
	h2 {
		font-size: 30px;
		line-height: 36px;
		font-weight: normal;
		color: $accent;
		text-align: center;
		margin:0;
	}
}
.wizard-header {
	background-color: $accent;
	padding:15px 0;
	font-size: 18px;
	line-height: 20px;
	font-weight: 300;
	color: #fff;
	.row-fluid [class*="span"] { min-height: 1px;}
}
.container-fluid.wizard {
	max-width: 100%;
	padding: 0;
	margin: 0;
	form {
		> dl {
			> dt, > dd { width: 50%; margin-left: auto; margin-right: auto;}
		}
		label, legend {border-bottom: 0; font-size: 16px; line-height: $baseLineHeight - 4; margin-bottom: 4px;}
	 	max-width: 1140px;
	 	margin: 0 auto;
	 	padding: 0 15px;
	 	#submitGroup-element {
	 		clear:both;
	 		width: 100%;
	 		margin-top: $baseLineHeight * 2;
	 		padding-top: $baseLineHeight;
	 		border-top: 1px solid #d6d6d6;
	 	}
	 	#btnSubmit-element {
	 		float:right;
	 	}
	 	#btnCancel-element {
	 		float:left;
	 		.btn { min-width: 115px;}
	 	}
	 	dd { min-height: $inputHeight;}
	 	a {
	 		// color: inherit;
	 		text-decoration: underline;
	 		// display: inline-block;
	 		//margin-left: 4px;
	 		span {
	 			margin-left: 5px;
	 		}
	 		&:hover {
	 			color: $linkColorHover;
	 		}
	 	}
	 	#calc_link { 
	 		font-size: $baseFontSize; display: block; font-weight: normal; line-height: 1.2; margin-bottom: 5px;
		 	img { margin-right: 5px; margin-top: -2px;}
	 	}
	}
	.radio {margin-top: -2px;}
	.radiolabel {margin-right: $baseLineHeight;}
	input.autoNumeric { width:100px;}
	.del:hover { color: #F00;}
	#applicants {
		width:100%;
		max-width: 290px;
		td { 
			padding-bottom: 10px;
			padding-right: 10px;
			input.text { width:300px;}
		}
	}
	.btn.disabled {
		background-color: #eee;
		color: #aaa;
	}
	.result-record {
		margin-bottom: $baseLineHeight;
		border-bottom: 1px solid #DDD;
		td { 
			height: 80px;
			&.record-eligibility a {
				text-decoration: underline;
			} 		
		}
		.price { font-size: 18px; padding:5px 10px; background-color: $accent-sec; display: inline-block; @include border-radius(2px);}
	}
	.result-buttons {
		.span3 {float:left; margin: 0;}
		.span9 {float:right;}
		.btn { margin-bottom: 10px;}
	}
	.input-group.bootstrap-touchspin {
		input { display: inline-block !important; margin-right: 5px; width: 50px; text-align: center;}
		.btn { 
			padding: 5px 15px; margin-right: 5px;
			strong {display: inline-block; width:0px; height:0px; overflow:hidden; text-indent: -9999em;}
		}
	}
	#leftColumn-element {
		float:left; width:50%; margin-left: 0%; padding-right: 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#rightColumn-element {
		float:right; width:50%; margin-right: 0%; padding-left: 10px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	#annualIncome-label { clear: both;}
	#insuranceSituation { width:100%;}
	.popover-content {
		letter-spacing: 0.02em;
		p { margin-bottom: 0;}
		a { color: $linkColor; &:hover { color:$linkColorHover;} }
	}
	#pregnancyStatus-element {
 		> .radiolabel { display: block;}
	}
	#fieldset-pregnancyStatus {
		.radiolabel { display:block; width:100%;}
	}
}

.circle-services {
    display: block;
    width: 70px;
    height: 70px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid #30516D;
    border-radius: 50%;
    text-align: center;
}
.who-is-eligible {
    display: inline-block;
    font-size: 33px;
}
.who-is-eligible-span {
    position: relative;
    top: 18px;
    color: #30516D;
}

#income-calculator-form {
	legend { line-height: 28px; margin-bottom: 12px; border-bottom: 2px solid $accent; font-size: 20px; color: $accent;}
	dt, dd {width:100%;}
	#income-calculator-form-enterIncome-element,
	#income-calculator-form-enterDeductions-element,
	#income-calculator-form-fieldset-notesAndTotal {
		dt, dd {border-bottom: 1px solid #ddd; min-height: 40px;}
		dt {clear:both; width:70%; float:left;  margin: 0 0 5px 0;}
		dd {float:right; width:25%; margin:0 0 5px 0; padding-right:5%;}	
	}
	#income-calculator-form-totalIncome-label { clear: both;}
	dt {
		label {
			font-size: $baseFontSize; line-height: $baseFontSize + 4;
			.label-description {display: block; font-size: $baseFontSize - 1; line-height: $baseFontSize; font-weight: normal;}
		}
	}
	.input-prepend {
		input { width:150px;}
	}
	#income-calculator-form-fieldset-submitGroup { 
		text-align: center;
		// @include clearfix();
		dt, dd { display: inline-block; width: auto; float:none;}
		// #income-calculator-form-btnSubmit-element { float:right;}
		// #income-calculator-form-btnCancel-element { float:left;}
	}
	#income-calculator-form-fieldset-notesAndTotal {
		> dl > div {
			margin-bottom: 12px; border-bottom: 2px solid $accent;
			@include clearfix();
			> div { float: left; width:45%; margin-right: 5%;}
		}
		h3 { font-size: $baseFontSize;}
		li { line-height: 1.2; margin-bottom: 5px; color: #333;}
	}
}
.ui-button-icon-only .ui-icon { margin-left: -9px !important;}

.dd-no-margin { margin-bottom: 0 !important;}

.email-to-success-msg {padding:30px; text-align:center; font-weight:bold;}

.for-print { display: none;}
.page-break { display: none;}

.for-show {
	a {
		text-decoration: underline;
	}
}
.debug-title {color: #ff0000; font-size: 16px;  font-weight: bold;}
#dependentsCount-label .description {font-weight: bold; font-size: 14px;}


[id$="_same-element"] {
	label {font-size: 12px !important; color:#000;}
 	margin-top: -10px;
}

[id*="FirstRow_"] {
	select, input {
		width: 100% !important;
	}
	[id*="Id"] {
		width: 44%;
		margin-right: 1% !important;
	}
	dt[id^="new"] {
		width: 14%;
		margin-right: 1% !important;
		text-align: right;
	}
	dd[id^="new"] {
		width: 40%;
		margin-right: 0 !important;
	}
}

//	Project depending modules
@import "lib/bootstrap-responsive.scss";
@import "_cart.scss"; // E-commerce styles
@import "_qsf-responsive.scss";
@import "_print.scss"; // Print styles