@import "lib/bootstrap.scss"; //Core styles
@import "qsf.scss";
@import "main.scss"; //Styles shared among user end and admin section

//	Project depending modules
@import "_cart.scss";
@import "lib/bootstrap-responsive.scss";
@import "_qsf-responsive.scss";
@import "includes/_license-application-form.scss";
@import "includes/_taxation-user.scss";
@import "includes/_premium-user.scss";
@import "_print.scss"; // Print styles

////////////////////////////////////////////////////////////////////
//															      //
//		User-End Styles											  //
//																  //
////////////////////////////////////////////////////////////////////

body { min-width: 320px;}

// Header
// -----------------------------------------------------------------
.account-login {
	text-shadow: 0.5px 0.9px 3px rgba(0, 1, 1, 0.25);
	color: white;
	font-size: 12px;
	font-weight: 400;
	line-height: 24px;
	text-transform: uppercase;
	margin-top: 15px;
	@include transition(.3s);
	&:hover {
		color: $yellow;
	}
}
#nav-main {
	margin-top: 0;
	> li > a {
		font-weight: bold;
		font-size: 14px;
		color: white;
		line-height: 24px;
		text-transform: uppercase;
		padding: 5px 0;
		letter-spacing: -0.02em;
		margin: 0 10px;
		position: relative;
		overflow: hidden;
		text-shadow: none;
		@include border-radius(0);
		&::after {
			content: "";
			height: 2px;
			width: 100%;
			position: absolute;
			top: auto;
			bottom: 3px;
			left: -100%;
			background: $yellow;
			@include transition(.3s);
		}
	}
	> li {
		&:hover,
		&.open,
		&.active {
			> a {
				background: transparent;
				&::after {
					left: 0;
				}
			}
		}
	}
	li:last-child > a {
		margin-right: 0;
	}
}

// Header Banner
// -----------------------------------------------------------------
#header-image {
	background-color: $black;
	background-position: 50% 50%;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
	> .container-fluid {
		padding: 0 55px;
	}
	&::before {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		@include gradient-horizontal(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
	}
	h1 {
		height: 200px;
		color: #fff;
		margin-top: 0;
		margin-bottom: 0;
		display: table;
		width: 100%;
		position: relative;
		z-index: 5;
		//color: #ffc423;
		font-size: 36px;
		font-weight: 300;
		line-height: 30px;
		text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
		span {
			display: table-cell;
			vertical-align: middle;
		}
	}
}

// Side Blocks
// -----------------------------------------------------------------
.side_block {
	@include  clearfix();
	@include border-radius(3px);
	//@include box-shadow (0.5px 0.9px 5px rgba(0, 1, 1, 0.33));
	position: relative;
	z-index: 1;
	+ .side_block {
		margin-top: $baseLineHeight;
	}
	&.color-1 {
		background: $sideColor1;
		padding: 30px;
		p, span, div, ul, ol, li, table, h1, h2, h3, h4, h5, h6, label {
			color: #ffffff;
		}
	}
	&.color-2 {
		background: $sideColor2;
		padding: 30px;
		p, p > span, div, ul, ol, li, table, h1, h2, h3, h4, h5, h6, label {
			color: #5d4631;
		}
	}
	p:last-child {
		margin-bottom: 0;
	}
	.date-square {
		margin:5px 15px 0 0;
		@include square(43px);
		font-size: 11px;
		line-height: 11px;
		strong {
			font-size: 18px;
			line-height: 26px;
		}
	}
	.last-newsletter {
		padding-left:28px;
		background: url('../images/icon-pdf.gif') no-repeat 0 50%;
	}
	#submitGroup-element dl { text-align: left;}
	a.view-all {
		font-size: $baseFontSize - 2;
		display: inline-block;
		margin-top: 5px;
	}
	.fa-ul {
		li { margin-bottom: 5px;}
	}
	img.bottom {
		position:absolute;
		z-index:2;
		right:20px;
		bottom:0px;
		max-width:80px;
		height:auto;
	}
	&.sb-html {
		.eagle {
			width: 100px;
			height: 100px;
			background-color: #e6b01c;
			display: inline-block;
			@include border-radius(50%);
			position: relative;
			margin-top: -38px;
			img {
				position: absolute;
				top: 50%;
				left: 50%;
				@include translate(-50%, -50%);
			}
		}
	}
}

#form_contact-form,
#form_question-form {
	dl > dd {margin: 0 0 5px;}
	select {width: 100%;}
	textarea {
		min-height: 120px;
	}
	.captcha_refresh {margin-top: 10px;}
	#form_contact-form-captcha-label {display: none;}
	#form_contact-form-submitGroup-element,
	#form_contact-form-btnSubmit-element {margin: 5px 0 0;}
	input, select, textarea, img {
		width: 100%;
		@include border-radius (0);
		border-color: #342a22;
	}
	input.btn {
		width: auto;
		@include border-radius (3px);
		border: 0;
		padding: 8px 30px;
		font-size: 15px;
		font-weight: 700;
		text-shadow: none;
	}
	label {
		font-size: 14px;
		font-weight: 400;
	}
	.contact-btn {
		width: auto;
		min-width: 120px;
		color: #fff;
		border: #bc0023;
		@include border-radius (3px);
		padding: 5px 30px 6px;
	}
	.defaultHint_element {
		color: #999;
		top: 3px !important;
		.asterisk {
			color: #e4c77b;
		}
	}
}

.contact-p {
	ul {
		margin: 0 0 28px;
		li {
			left: 0;
		}
	}
}

// FAQ
// -----------------------------------------------------------------
.faq-questions, .faq-answer {
	margin:0 0 $baseLineHeight 0;
}
.faq-questions {
	border-bottom:1px solid $grayLight;
	padding-bottom: 20px;
	list-style-position: inside;
}
.faq-answer {
	position: relative;
	z-index: 1;
	.gotop {
		color: $grayLight;
		text-align:right;
		position: absolute;
		z-index: 2;
		right: 0;
		bottom: 0;
		&:hover {
			text-decoration: none;
			color: $linkColor;
		}
	}
}

// Site Map
// -----------------------------------------------------------------
#table-sitemap {
	width:100%;
	td { width:50%; vertical-align:top;}
}
.site_map_div {
	font-weight:bold; padding:6px 20px 6px 15px;
	a, a:visited {text-transform:uppercase;}
	.site_map_div a, .site_map_div a:visited {text-transform:none; font-weight:normal;}
	.site_map_div {
		padding:3px 0 3px 20px; font-weight:normal;
		.site_map_div {padding:0 0 0 20px;}
	}
}

// Modernizr
.touch {
	select {
		outline-style: none;
	}
	.fb_iframe_widget span {border:1px solid $tableBorder;}
}

// Progress
$lineColor: #ddd;
.license-app-steps-bar {
  margin: 30px 0 10px;
  width: 100%;
  .unstyled.inline {
    overflow: hidden;
    margin: 0;
    padding: 0;
    /*CSS counters to number the steps*/
    counter-reset: step;
    display: block;
    li {
      left: 0;
      padding: 0;
      display: block;
      list-style-type: none;
      color: $accent;
      width: calc(100% / 7);
      font-family: 'Open Sans', Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
      float: left;
      position: relative;
      text-align: center;
      @include box-sizing (border-box);
      span {
        font-size: 12px;
        line-height: 14px;
        font-weight: 400;
        height: 45px;
        display: block;
        width: 100%;
        color: $gray;
        padding-bottom: 10px;
      }
      &.selected {
        a, span {
          font-size: 12px;
          line-height: 14px;
          height: 45px;
          display: block;
          width: 100%;
          color: $darkYellow;
          position: relative;
          z-index: 5;
          padding-bottom: 10px;
        }
        a:hover {
          color: $linkColorHover;
        }
        &:after {
          position: relative;
          bottom: 20px;
          z-index: 1;
        }
        &:before {
          bottom: 31px !important;
        }
      }
      &:after {
        content: counter(step);
        counter-increment: step;
        width: 12px;
        height:12px;
        line-height: 12px;
        display: block;
        font-size: 0px;
        color: #333;
        background: #fff;
        border-radius: 50%;
        border: 2px solid #777;
        margin: 0 auto 5px auto;
        position: relative;
        bottom: 20px;
        z-index: 1;
      }
      &:before {
        content: '';
        width: 100%;
        height: 2px;
        background: $lineColor;
        position: absolute;
        left: -50%;
        bottom: 32px;
        z-index: 0; /*put it behind the numbers*/
      }
      &:first-child:before {
        /*connector not needed before the first step*/
        width: 50%;
        left: 0%;
      }
      &:last-child:before {
        /*connector not needed before the first step*/
        width: 150%;
      }
      /*marking active/completed steps green*/
      /*The number of the step and the connector before it = green*/
      &.superactive span {
        font-size: 12px;
      }
      &.active:before, &.selected:before {
        border: 2px solid $accent;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        background: $accent;
        bottom: 15px;
      }
      &.active:after, &.selected:after {
        background: $accent;
        border-color: $accent;
        color: white;
      }
      &.done a,
      &.done span {
          color: #6f9e37 !important;
      }
      &.done::before {
        border: 2px solid #8bc34a !important;
        background: #8bc34a !important;
        bottom: 15px;
      }
      &.done::after {
        background: #8bc34a !important;
        border-color: #8bc34a !important;
        color: white !important;
        font-family: FontAwesome !important;
        content: '\f00c' !important;
        font-size: 10px !important;
      }
    }
  }
}

// step header
.step-header {
	h3 {
		@include clearfix();
		@include border-radius(2px);
		background: $darkYellow;
		color: #fff;
		font-size: 18px;
		font-weight: 600;
		line-height: 24px;
		padding: 8px 14px;
		margin-bottom: 30px;
		span {
			float: right;
			font-size: 15px;
			font-weight: 400;
			line-height: 24px;
		}
		br { display: none;}
	}
}

// Step Form
.license-app-steps-bar .unstyled.inline li.selected {
	&:before{
		border: 2px solid #8bc34a;
    	background: #8bc34a;
	}
	&:after{
		background: #8bc34a;
	    border-color: #8bc34a;
	    color: white;
	    font-family: FontAwesome;
	    content: '\f00c';
	    font-size: 10px;
	}
	a, span{
		color: #6f9e37;
	}
}

.license-app-steps-bar .unstyled.inline li.active{
	&:before{
		border: 2px solid $darkYellow;
    	background: $darkYellow;
	}
	&:after{
	    content: '';
		background: $white;
	    border-color: $darkYellow;
	    color: white;
	}
	a, span{
		color: $darkYellow;
	}
}


@media all and (max-width: 767px) {
	#license-form {
		#submitGroup-element {
			position: relative;
			padding-bottom: 50px;
			margin-top: 30px;
			> div {
				&:first-child, &:last-child {
					position: absolute;
					bottom: 0;
					width: auto;
				}
				&:first-child {
					left: 0;
				}
				&:last-child {
					right: 0;
				}
			}
		}
	}
	#payment-information-form, #payment-verification-form_elements {
		#submitGroup-element {
			position: relative;
			padding-bottom: 50px;
			margin-top: 30px;
			> div {
				&:first-child, &:last-child {
					position: absolute;
					bottom: 0;
					width: auto;
				}
				&:first-child {
					left: 0;
				}
				&:last-child {
					right: 0;
				}
			}
		}
	}
}

@media all and (max-width: 580px) {
	.modal.fade.in{
		top: 10px;
		height: calc(100% - 20px);

		.modal-body {
			max-height: 100%;
			height: calc(100% - 90px);
		}
		.modal-header + .modal-body {
			height: calc(100% - 140px);
		}
	}
}
@media all and (max-height: 580px) {
	.modal.fade.in{
		top: 10px;
		left: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
		margin-left: 0;

		.modal-body {
			max-height: 100%;
			height: calc(100% - 90px);
		}
		.modal-header + .modal-body {
			height: calc(100% - 140px);
		}
	}
}

@media all and (max-width: 500px){
	#license-form {
		&.stepVendorInformation{
			dt{width: 100% !important;}
		}
	}
}

#license-form {
	select {width: 100%;}
	.table {
		margin-bottom: 0;
	}
	ul.errors > li{
		left: 0;
	}
	.form_header{
		font-weight: bold !important;
	    font-size: 18px;
	    line-height: 30px;
	    color: #a93f24;
	    margin-bottom: 15px;
		margin-top: 20px;
	}
	#partners-element {
		margin-bottom: 20px;
	}
	#submitGroup-element {
		margin-top: 30px;

		div:nth-child(2){
			font-size: 16px;
			line-height: 1;
			padding-bottom: 10px;
		}
		.btn-prev, .btn-next{
			input{
				padding-left: 40px;
				padding-right: 40px;
			}
		}
	}
	&.stepUserAccount {	
		#license-form_elements{
			> dt, > dd {
				max-width: 360px;
				margin-left: auto;
				margin-right: auto;
			}
			> #submitGroup-element {
				max-width: none;
				margin-top: 30px;
				.span8 {
					padding-top: 5px;
				}
				.btn {
					min-width: 120px;
					text-align: center;
				}
			}
			#applicationFile-element{
				width: 25%;
				float: left;
			}
		}
		#captcha-element {
			position: relative;
			#captcha-input-wrapper {
				position: absolute !important;
				top: 20px;
				left: 140px;
				width: 100px;
			}
			#captcha-input-hint {
				display: none !important;
			}
			#captcha-input {
				width: 100px;
			}
		}
	}
	&.stepVendorInformation{
		.span6{
			height: 100%;
			display: block;
			dt{
				display: inline-block;
			    width: 50%;
			    float: left;
			    clear: both;
			}
			dd{
				@extend dt;
				float: right;
				font-weight: normal;
				clear: right;
				&#billingAddress-element, 
				&#mailingAddress-element,
				&#mailingAddress-sameAs-element,
				&#preferredVendor-element{
					width: 100%;
				}
			}
			.form_header {
				width: 100%;
			}
		}
		#partners-element{overflow: auto;}
		label {
			&.required {
				background: none;
				&::before {
					display: none;
				}
				&::after {
					content: '*';
					color: #e4c77b;
					font-size: 1em;
				}
			}
		}
		#applicationFile-label{
			width: 30%;
			float: left;
			padding-right: 10px;
		}
		#partners-label{
			clear: both;
		}
	}
	&.stepBackgroundQuestionnaire{
		dl {
			& > dt{
				padding: 5px 10px;
				background-color: #ddd;
				border-radius: 3px;
				font-weight: bold;
			}
			& > dd{
				padding: 0 10px 0;
				margin-bottom: 5px;
			}
		}
		label{
			margin: 5px 0;
			color: #000;
		}
	}
	&.stepVendorNaics{
		#naicsCodes-choose{
			ul.unstyled:last-child{
				margin: auto;
			}
		}
		#naicsCodes-element {
			.chosen-codes ol{
				margin: 10px 0;
				padding: 10px 0;
				border-top: 1px solid #d4d4d4;
				border-bottom: 1px solid #d4d4d4;
				list-style: none;
				li a{float: right;}
			}

			label{
				&[for="naicsCodes-category"],
				&[for="naicsCodes-query"],
				&[for="naicsCodes-choose"]{
					font-weight: 700;
					padding: 10px 0;
				}
				&[for="naicsCodes-category"]:after{
					content: '*';
					color: $red;
					font-size: 1em;
				}
			}

		}
	}
}
#payment-information-form{
	&.stepPayment{
		#billingAddressHeader-element{
			font-weight: normal;
			font-size: 18px;
			line-height: 30px;
			padding-top: 15px;
			color: #a93f24;
			margin-bottom: 15px;
		}
		#paymentMethodHeader-element{
			@extend #billingAddressHeader-element;
		}
		#ccNumber-label{
			position: relative;
			top: 30px;
		}
		#ccNumber-element:before {
			content: '';
			position: relative;
			top: -25px;
			display: block;
			background-image: url(../images/cards.png);
			background-repeat: no-repeat;
			background-size: contain;
			height: 21px;
			margin-bottom: 10px;
		}
		.span6{
			height: 100%;
			display: block;
			dt{
				display: inline-block;
				width: 50%;
				float: left;
				clear: both;
			}
			dd{
				@extend dt;
				float: right;
				font-weight: normal;
				clear: right;
				&#billingAddress-element,
				&#mailingAddress-element,
				&#mailingAddress-sameAs-element,
				&#preferredVendor-element{
					width: 100%;
				}
			}
			.form_header{
				width: 100%;
			}
		}
		#ccExpirationDate-element select{
			width: 48%;
			&:last-child{
				float: right;
			}
		}
		.btn-prev, .btn-next{
			input{
				padding-left: 40px;
				padding-right: 40px;
			}
		}
	}
}

dl dd .form_header {
	margin-top: 30px;
}
dl > dt:first-child + dd.form_header {
	margin-top: 0;
}


.table th{text-transform: capitalize;}

h4.form_header{
	font-weight: normal !important;
    font-size: 18px;
    line-height: 30px;
    color: #a93f24;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;
}


//edit user style
[class*="span"] > #user-form,
[class*="span"] > #user-forgot-form{
	max-width: 500px;
}
#user-form{
	margin: auto;
	width: auto;
}

#user-forgot-form{
	#btnSubmit{
		padding: 6px 15px;
		@include border-radius(4px);
		margin-bottom: 0px;
	}
}

//licensing style
#app-license-user-links > li > a{
	background: #a93f24;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	border-color: #a93f24;
	text-shadow: none;
	font-weight: 700;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	-moz-transition: 0.3s;
	transition: 0.3s;
	padding: 6px 16px;
	color: #ffffff;
	line-height: inherit;
}

.blocks .mobile{
	display: none;
}

//#btnCancel{margin-bottom: 5px;}

#user-filter-form {
	#status-label {
		clear: both;
	}
}

.app-user-vendor-vendorlist {
	.grid_date {
	    width: 100px;
	}
}

@media all and (max-width: 768px) {
	// Responsive tables
	table#partners,
	table#businessReferences {
		table, thead, tbody, tfoot, th, td, tr {
			display: block;
		}
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		td {
			border: none;
			border-bottom: 1px solid #ddd;
			border-left: 1px solid #ddd;
			position: relative;
			padding-left: 35%;
			text-align: left !important;
			width: 100% !important;
			height: $baseLineHeight * 2.2 ;
			@include box-sizing(border-box);
			&.empty {
				padding: 10px;
				text-align: center;
			}
		}
		td:before {
			position: absolute;
			top: 8px;
			left: 6px;
			width: 30%;
			padding-right: 10px;
			white-space: normal;
		}
		tbody {
			tr {
				border-bottom: 1px solid #ddd;
				&:last-child {
					border-bottom: 0;
				}
			}
			td.bottom-row {
				text-align: left;
				padding-left: 10px;
				border: 1px solid #ddd;
			}
			td.bottom-row:before { content: "" !important; }
		}
	}

	table#partners {
		tbody {
			td:nth-of-type(1):before { content: "Name"; }
			td:nth-of-type(2):before { content: "Title"; }
			td:nth-of-type(3):before { content: "Ownership %"; }
			td:nth-of-type(4):before { content: "Bussiness Phone"; }
			td:nth-of-type(5):before { content: "Home Phone"; }
			td:nth-of-type(6):before { content: "Options"; }
		}
	}
	table#businessReferences {
		tbody {
			td:nth-of-type(1):before { content: "Name of Business"; }
			td:nth-of-type(2):before { content: "Address"; }
			td:nth-of-type(3):before { content: "City"; }
			td:nth-of-type(4):before { content: "State"; }
			td:nth-of-type(5):before { content: "Zip"; }
			td:nth-of-type(6):before { content: "Telephone"; }
			td:nth-of-type(7):before { content: "Options"; }
		}
	}
}