@import "variable.less";  //Include all variables

@import "mixin.less";  //Include all mixins

@import "function.less";  //Include all functions

/* ---- helper class ---- */

/* ----color---- */


.instruction_for_extension{
	margin-top: 1%;
}


.wk_bg_color
{
	.bgcolor(@bg_color);
}
.color-red
{
	.color(@red);
}

.color-green
{
	.color(@green);
}

/* ----color---- */

.no_margin
{
	.margin(0px, 0px, 0px, 0px);
}

.margin-top-20
{
	margin-top:20px;
}

.margin-top-10
{
	margin-top:10px;
}
.margin-top-40
{
	margin-top:40px;
}

.margin-btm-20
{
	.margin(0px, 0px, 20px, 0px);
}

.margin-btm-5
{
	.margin(0px, 0px, 5px, 0px);
}

.margin-left-5
{
	margin-left: 5px;
}

.margin-topbtm-10
{
	.margin(10px, 0px, 10px, 0px);
}
.margin-right-10
{
	.margin(0px, 10px, 0px, 0px) !important;
}
.padding-10
{
	.padding(10px, 10px, 10px, 10px) !important;
}
.pad-20
{
	.padding(20px, 20px, 20px, 20px) !important;
}
.padding-15
{
	.padding(15px, 15px, 15px, 15px) !important;
}
.padding-tb-15
{
	padding-top: 15px;
	padding-bottom: 15px;
}
.margin-top-52 
{
	margin-top: 52px;
}
.bdr-top-gray 
{
    border-top: 1px solid #DFDFDF;
}

.vertical_center
{
	vertical-align: middle !important;
}

.curser-pointer
{
	cursor: pointer;
}
.clear-both
{
	clear: both;
}
.create_block
{
	.make_block;
}
.display_on
{
	display: block;
}


.display_none
{
	display: none !important;
}
.no_display
{
	display: none;
}
.padding_0
{
	padding:0;
}
.padding_left_0
{
	padding-left:0;
}
.padding_right_0
{
	padding-right:0;
}
.padding_top_15
{
	padding-top:15px;
}
.padding_right_10
{
	padding-right:10px;
}
.padding_left_20
{
	padding-left: 20px !important;
}
.banner_extra_padding
{
	padding-left:66px;
	padding-right:66px;
}
.border_right
{
	border-right:1px solid @black;
}
.border_top_none
{
	border-top:0 none !important;
}
.font-15
{
	.font_size(15px);
}
.border_radius_0
{
	border-radius: 0;
}
/* ---- helper class ---- */
.ui-autocomplete 
{
    z-index: 5000 !important;
    max-height: 100px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
body
{
	.roboto-family;
	.bgcolor(#F2F2F2);
}
.header_container
{
	.roboto-family;
	.bgcolor(@mod_theme_color);
	.padding(10px, 10px, 10px, 10px);
	.make_block;
	box-shadow: 0 0 10px 0 @black;
	margin-bottom: 40px;
	a
	{
		.padding(5px, 25px, 5px, 25px);
		.border_radius(4px, 4px, 4px, 4px);
		border:1px solid @white;
		.font_bold;
		.font_size(17px);
		.a_form(@white);
		outline: 0 none;
		text-decoration:none;
	}
}
.tabs_container
{	
	.roboto-family;
	.nav-tabs > li > a
	{
		border:0 none;
	}
	.sub_tabs
	{
		margin-top:40px;
		.nav > li > a:hover, .nav > li > a:focus
		{
			.bgcolor(@white) !important;
			border-color: @white @white @gray !important;
		}
		.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
		{
			.bgcolor(@white) !important;
		}
	}
	.listing_tab
	{
		.nav-tabs
		{
			border-bottom: 0 none;
		}
		.nav > li > a:hover, .nav > li > a:focus
		{
			.bgcolor(@white) !important;
			border-color: @white @white @gray !important;
		}
		.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
		{
			.bgcolor(@white) !important;
		}
	}
  	a
	{
		.color(@form_grey);
		.font_size(18px);
		.font_semibold;
		position:relative;
		cursor: pointer;
	}
	.nav-tabs
	{
		border-bottom: 1px solid @gray;
	}
	.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
	{
		border-bottom: 3px solid @mod_theme_color !important;
		border-top: none !important;
		border-right: none !important;
		border-left: none !important;
		.bgcolor(#f2f2f2) !important;
		.color(@black);
		outline: 0 none;
		.home_icon
		{
			background-position: -25px 0;
			margin-left:0px;
		}
		.config_icon
		{
			background-position: -23px -24px;
			margin-left:0px;
		}
		.country_icon
		{
			background-position: -22px -44px;
			margin-left:0px;
		}
		.assign_icon
		{
			background-position: -22px -67px;
			margin-left:0px;
		}
		.addon_icon
		{
			background-position: -24px -89px;
			margin-left:0px;
		}
		.shipping_icon
		{
			background-position: -23px -111px;
			margin-left:0px;
		}
	}
	.nav > li > a:hover, .nav > li > a:focus
	{
		.bgcolor(#f2f2f2) !important;
		outline: 0 none;
		.color(@black);
		border:0 none;
		.home_icon
		{
			background-position: -25px 0;
			margin-left:0px;
		}
		.config_icon
		{
			background-position: -23px -24px;
			margin-left:0px;
		}
		.country_icon
		{
			background-position: -22px -44px;
			margin-left:0px;
		}
		.assign_icon
		{
			background-position: -22px -67px;
			margin-left:0px;
		}
		.addon_icon
		{
			background-position: -24px -89px;
			margin-left:0px;
		}
		.shipping_icon
		{
			background-position: -23px -111px;
			margin-left:0px;
		}
	}
	.home_icon
	{
		background-image:url("../img/sprite.png");
		background-repeat:no-repeat;
		background-position: 0 0;
		height:20px;
		width:25px;
	}
	.config_icon
	{
		background-image:url("../img/sprite.png");
		background-repeat:no-repeat;
		background-position: 0 -24px;
		height:20px;
		width:25px;
		margin-right:10px;
	}
	.country_icon
	{
		background-image:url("../img/sprite.png");
		background-repeat:no-repeat;
		background-position: -2px -44px;
		height:20px;
		width:22px;
		margin-right:10px;
	}
	.assign_icon
	{
		background-image:url("../img/sprite.png");
		background-repeat:no-repeat;
		background-position: 1px -67px;
		height:20px;
		width:24px;
		margin-right:10px;
	}
	.addon_icon
	{
		background-image:url("../img/sprite.png");
		background-repeat:no-repeat;
		background-position: -1px -89px;
		height:21px;
		width:22px;
		margin-right:10px;
	}
	.shipping_icon
	{
		background-image:url("../img/sprite.png");
		background-repeat:no-repeat;
		background-position: -1px -111px;
		height:20px;
		width:22px;
		margin-right:10px;
	}
}
.page_head_block
{
	margin-top: 20px;
	.font_size(33px);
	.font_semibold;
	.color(@black);
	border-bottom: 3px solid @mod_theme_color;
}
.page_desc_block
{
	.border-grey;
	margin-top: 30px;
	margin-bottom: 40px;
	padding:20px;
	border-bottom: 3px solid @mod_theme_color;
	.desc_pin
	{
		border-right:1px solid @feature_desc_grey;
		height:80px;
		width:45px;
		img
		{
			margin-top:25px;
		}
	}
	.desc
	{
		.font_semibold;
		.font_size(16px);
		.color(@feature_desc_grey);
		padding-right: 0;
	}
}

.menu-xs
{
	  border: 0;
	  left: 0;
	  position: fixed;
	  right: 0;
	  transform: translate3d(0px, 0px, 0px);
	  z-index: 1030;
	  top:0;
}
#wk_nav
{
	margin:0 !important;
}
#wk_nav.affix
{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index: 1030;
	height:100%;
}
.menu-xs-header
{
  /*background-color: #46A2E0;*/
  padding: 0 5px;
  min-height: 50px;
}

.menu-xs-list li > a
{
  line-height: 12px;
}
.navbar_toggle_btn
{
	margin-right: 28px;
}
.row-offcanvas 
{
   position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
}

.row-offcanvas-right 
{
    right: 0;
}

.row-offcanvas-left 
{
	left: 0;
}

.row-offcanvas-left
.sidebar-offcanvas 
{
	left: -79%; /* 6 columns */
}

.row-offcanvas-left.active
.sidebar-offcanvas
{
	left: 0; /* 6 columns */
}

.sidebar-offcanvas 
{
	position: fixed;
	z-index: 1030;
	left:0px;
	top: 0px;
	bottom: 0px;
	overflow-y: auto;
	border-radius: 0px;
	padding:0px;
	min-height:100%;
	width:79%;
	.bgcolor(#232323);
	font-family: PT Sans;
	ul li.active a
	{
		.color(#0889c9);
	}
	a
	{
		.font_size(18px);
		.font_bold;
		.color(#cccccc);
	}
	a:hover,a:focus
	{
		.color(#0889c9);
		 .bgcolor(#232323) !important;
	}
}

.add_btn_container
{
	.margin(20px, 0px, 0px, 0px);
	a
	{
		.bgcolor(@btn_color);
		.border_radius(4px, 4px, 4px, 4px);
		.font_bold;
		.font_size(18px);
		.a_form(@white);
		.padding(8px, 12px, 8px, 12px);
		font-family:PT Sans;
		outline: 0 none;
		text-decoration:none;
	}
}
.primary_container
{
	.roboto-family;
	margin-bottom:50px;
	.border-grey;
	border-top: none;
	.bgcolor(@white);
	a
	{
		outline: 0 none !important;
	}
	.breadcrumb
	{
		.bgcolor(@white);
		margin-top: 20px;
		margin-bottom: 0 !important;
	}
	.btn
	{
		.bgcolor(@btn_color);
		outline: 0 none !important;
		.font_size(18px);
		.font_semibold;
		.color(@white);
		.padding(8px, 20px, 8px, 20px);
		/*width:100px;*/
		border-radius: 0 !important;
	}
	.action_btn
	{
		width:100%;
	}
	.wk_dropdown_btn
	{
		.roboto-family;
		.font_size(15px);
		.color(#6f6f6f);
		.bgcolor(@white);
		.padding(7px, 20px, 7px, 20px);
		/*height:50p;*/
		//width:100%;
	}
	.dropdown-menu > li > a
	{
		.roboto-family;
		.font_size(15px);
		.color(#6f6f6f);
	}
	.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus
	{
		.bgcolor(#6855A6);
		.color(@white);
	}
	.filter_btn
	{
		.margin(0, 0, -25px, 10px);
		.padding(2px, 25px, 2px, 25px);
		/*height:25px;
		width:90px;*/
		.color(#7a96cf);
		border:1px solid #8AA6DD;
		.bgcolor(#eff4ff);
		.font_size(15px);
		.font_semibold;
	}
	.bg-warning
	{
		padding-left:10px;
	}
	.form-control:focus 
	{
	    -webkit-box-shadow: none; 
	            box-shadow: none;
	    border-color:#cccccc; 
	}
	.switch_checkbox
	{
		input
		{
			display:none;
		}
		span
		{
			display:block;
			background-image:url("../img/check-box.png");
			background-repeat:no-repeat;
			background-position: -18px 0;
			height:16px;
			width:18px;
			margin-right:10px;
			float:left;
			margin-top: 5px;
		}
	}
	input, select
	{
		.color(@black);
		.font_semibold;
		.font_size(16px);
	}
	.wk_page_option
	{
		.font_size(15px);
		.font_semibold;
		.color(#777777);
		.roboto-family;
		margin-bottom: 20px;
		.wk_result
		{
			margin-top:8px;	
		}
		select
		{
			.color(#777777) !important;
		}
	}
	.assignement_rules
	{
		.make_block;
		.margin(0, 0, 40px, 0);
		.border-grey;
		border-bottom: 3px solid @mod_theme_color;
		border-top:0 none;
		.rule_no
		{
			.padding(10px, 10px, 10px, 10px);
			.font_size(17px);
			.font_bold;
			font-style: italic;
			.color(#7663b4);
		}
		label
		{
			.font_semibold !important;
			margin-bottom: 0 !important;
		}
		.rule
		{
			padding-left:40px;
			.font_size(16px);
			.font_semibold;
			.color(@black);
		}
		.rule_info
		{
			padding-left: 80px;
			padding-bottom: 10px;
			.font_size(15px);
			font-style: italic;
			.color(#808080);
			.font_semibold;
		}
		.separator
		{
			.margin(5px, 0, 5px, 0);
		}
	}
	.all_assigned_msg
	{
		.padding(10px, 10px, 10px, 10px);
		.color(@btn_color);
		.font_size(16px);
		.font_semibold;
	}
	//shipping feature css
	
	.action-btn 
	{
		border-radius: 3px;
		padding: 2px 5px;
		.bgcolor(@btn_color);
		border: 1px solid @btn_color;
		.color(@white);
	}
	.action-btn-disabled, .action-btn-disabled:hover, .action-btn-disabled:active, .action-btn-disabled:focus{
		border-radius: 3px;
		padding: 2px 5px;
		background-color: #ccc;
		border: 1px solid #ccc;
		color: #fff;
		cursor: not-allowed;
	}
	.radio-btn
	{
		display: inline-block;
		border: 1px solid #ccc;
		border-radius: 50%;
		padding: 2px;
		margin-right: 5px;
		vertical-align: bottom;
	}

	.radio-btn span
	{
	   display: block;
	   border-radius: 50%;
	   width: 9px;
	   height: 9px;
	}

	.radio-btn .selected
	{
	   background-color: #ccc;
	}
	.range_block
	{
		.label_head
		{
			.font_bold !important;
		}
		.grey-box
		{
		    background-color: #F2F2F2;
		    border: 1px solid #CCC;
		    color: #585858;
		    padding: 15px;
		}
	}
	.scroll-400 
	{
	    max-height: 400px;
	    overflow: auto;
	    overflow-x: hidden;
	}
	.btn-disabled
	{
		background-color: #ccc;
		border: 1px solid #ccc;
		color: #fff;
		cursor: not-allowed;
	}
	.switch-sm
	{
		display:block;
		background-image:url("../img/switch.png");
		background-repeat:no-repeat;
		height:25px;
		width:54px;
		margin-right:10px;
	}
	.switch-sm-on
	{
		background-position:-54px 0;
	}
	.switch-sm-off
	{
		background-position: 0 0;
	}
	.status-box
	{
		background-color: #777;
    	border: 1px solid #777;
    	box-shadow: 0 0 2px 0 #ccc inset;
	    color: #fff;
	    padding: 3px;
	}
	.po_listing
	{
		.make_block;
		.margin(0, 0, 40px, 0);
		.border-grey;
		padding-top: 20px;
		.switch
		{
			input
			{
				display:none;
			}
			span
			{
				display:block;
				background-image:url("../img/switch.png");
				background-repeat:no-repeat;
				background-position: 0 0;
				height:25px;
				width:54px;
				margin-right:10px;
			}
		}
		th
		{
			.font_size(16px);
			.color(@black);
			.font_bold;
		}
		.filter_row
		{
			.bgcolor(#EFF4FF);
			.filter
			{
				border-radius: 0 !important;
				height:50px;
			}
		}
		td
		{
			.font_size(16px);
			.color(@feature_desc_grey);
			.font_semibold;
			span, a
			{
				margin-right:10px;
				cursor: pointer;
			}
		}
		#view_assign_details
		{
			width:100px;
			/*padding-left:30px;
			padding-right:30px;*/
			button
			{
				width:100%;
				padding-left:0 !important;
				padding-right:0 !important;
			}
		}
		.switch_zipcode
		{
			input
			{
				display:none;
			}
			span
			{
				display:block;
				background-image:url("../img/check-box.png");
				background-repeat:no-repeat;
				background-position: -18px 0;
				height:16px;
				width:18px;
				margin-right:10px;
				float:left;
				margin-top: 5px;
			}
		}
		.bulk_action
		{
			padding:0;
			/*margin-bottom: 20px;
			button
			{
				width:20%;
			}*/
			.roboto-family;
			.font_size(15px);
			.color(#6f6f6f);
		}
		.config_tabs
		{
			box-shadow: none !important;
			padding-left: 0;
			.color(@black);
			.font_size(18px);
    		.font_semibold;
    		li
    		{
    			border-bottom: 1px solid @gray;
    			:hover
    			{
    				.bgcolor(@mod_theme_color);
					border-bottom: 0;
					cursor: pointer;
					a
					{
						.color(@white) !important;
						border-bottom: none;
						cursor: pointer;
					}

					&:before
					{
						background-color: #fff;
					    border-color: #cccccc -moz-use-text-color -moz-use-text-color #cccccc;
					    border-style: solid none none solid;
					    border-width: 0 0 0 1px;
					    content: " ";
					    height: 12px;
					    position: absolute;
					    right: -6px;
					    top: 16px;
					    transform: rotate(45deg);
					    width: 12px;
					    cursor: pointer;
					}
    			}
    		}
			.active
			{
				.bgcolor(@mod_theme_color);
				border-bottom: 0;
				a
				{
					.color(@white);
					border-bottom: none;
					//cursor: none;
				}

				&:before
				{
					background-color: #fff;
				    border-color: #cccccc -moz-use-text-color -moz-use-text-color #cccccc;
				    border-style: solid none none solid;
				    border-width: 0 0 0 1px;
				    content: " ";
				    height: 12px;
				    position: absolute;
				    right: -6px;
				    top: 16px;
				    transform: rotate(45deg);
				    width: 12px;
				}
			}
			a
			{
				.color(@black);
				border-bottom: none;
			}
		}
		.feature_head
		{
			border-bottom: 3px solid @mod_theme_color !important;
			.color(@black);
			.font_size(18px);
    		.font_semibold;
    		margin-bottom: 15px;
		}
		.feature_desc
		{
			.color(@feature_desc_grey);
			.font_size(16px);
    		.font_semibold;
    		margin-bottom: 15px;
		}
		.feature_opt
		{
			.color(@feature_desc_grey);
			.font_bold;
			.font_size(18px);
		}
	}

	.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus
	{
		.color(@mod_theme_color) !important;
	}
	.pagination > li > a, .pagination > li > span
	{
		.color(@mod_theme_color) !important;
	}
	.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus
	{
		.color(@black) !important;
		.bgcolor(@white);
		border-color:#ddd;
	}

	/* ---- Remove Select Box Outline ---- */
	select 
	{
		color: #000;
		text-shadow: 0 0 0 #000;
	}
	/* ---- End ---- */

	.separator
	{
		border-bottom: 1px solid @form_input_grey;
		.margin(0, 0, 40px, 0);
	}
	.add_form_container
	{
		.make_block;
		.margin(0, 0, 40px, 0);
		.border-grey;
		padding-bottom: 20px;
		padding-top: 20px;
		.placeholder-color;
		label
		{
			.color(@black);
			.font_semibold;
			.font_size(18px);
		}
		.input-lg, .form-horizontal .form-group-lg .form-control
		{
			border-radius: 0 !important;
		}
		.form-control
		{
			border-radius: 0 !important;
		}
		.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td
		{
			border: @primcb_width @border_solid @black;
			.color(@black);
		}
		.wk_select {
		   background: transparent;
		   border: none;
		   font-size: 14px;
		   height: 29px;
		   padding: 5px; /* If you add too much padding here, the options won't show in IE */
		   width: 268px;
		}

		/*.wk_select.slate {
		   background: url(http://i62.tinypic.com/2e3ybe1.jpg) no-repeat right center;
		   height: 34px;
		   width: 240px;
		}*/

		.wk_select {
		   border: 1px solid #ccc;
		   font-size: 16px;
		   height: 34px;
		   width: 268px;
		}

		.wk_select option:hover
		{
			background-color: blue;
		}

		.view_all
		{
			button
			{
				.padding(8px, 15px, 8px, 15px);
				margin-bottom: 20px;
			}
		}

		.zipcode_block
		{
			border:1px solid @form_input_grey;
			padding:20px;
			.switch_zipcode
			{
				input
				{
					display:none;
				}
				span
				{
					display:block;
					background-image:url("../img/check-box.png");
					background-repeat:no-repeat;
					background-position: -18px 0;
					height:16px;
					width:18px;
					margin-right:10px;
					float:left;
					margin-top: 5px;
				}
			}
		}
		.zipcode_msg
		{
			.font_size(14px);
			a
			{
				.font_size(14px);
				.color(@btn_color);
			}
		}
	}
	.sub_tab_form
	{
		margin:0 !important;
		border-top: 0 none;
	}
	.assign_supplier_link
	{
	    .padding(10px, 0, 0, 5px);
	    vertical-align: middle;
	    a
	    {
	    	vertical-align: middle;
	    	.color(@btn_color);
	    	text-decoration: none;
	    }
	}
	.order_history
	{
		margin-bottom: 40px;
		th,td
		{
			border:0 none;
		}
	}
	.view_detail
	{
		.padding(10px, 0, 10px, 0);
		border: @primcb_width @border_solid #cccccc;
		border-top:0 none;
		margin-bottom: 40px;
		.bgcolor(#f2f2f2);
		.view_title
		{
			.color(@black);
			.font_semibold;
   			.font_size(18px);
   			padding-bottom: 10px;
   			padding-top: 5px;
		}
		.view_value
		{
			.color(@feature_desc_grey);
			.font_size(18px);
			.font_semibold;
			padding-bottom: 10px;
			padding-top: 5px;
		}
		.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td
		{
			border: @primcb_width @border_solid @black;
			.color(@black);
		}
		.view_change_status
		{
			margin-top:20px;
			.next_action
			{
				padding:20px;
				span
				{
					.font_size(18px);
					.font_bold;
					.color(@btn_color);
				}
			}
			.status_change_btn, .received_item
			{
				.bgcolor(#dedede);
				outline: 0 none;
				.font_size(17px);
				.font_normal;
				.color(@black);
				.padding(5px, 0, 5px, 0);
				width:50%;
				border:0 none;
				margin-bottom:10px;
			}
		}
	}
}
#blacklist_csv_upload
{
	.modal-body
	{
		height:400px !important;
	}
}
.modal.wk_modal
{
	.roboto-family;
	.font_size(18px);
	.font_bold;
	label
	{
		.color(@black);
		.font_semibold !important;
	}
	input, select
	{
		.color(@form_grey);
	}
	th
	{
		.font_size(18px);
		.color(@black);
		.font_bold;
	}
	td
	{
		.font_size(16px);
		.color(#747474);
		.font_normal;
		span, a
		{
			margin-right:10px;
			cursor: pointer;
		}
	}
	.btn
	{
		.bgcolor(@btn_color);
		outline: 0 none;
		.font_size(18px);
		.font_bold;
		.color(@white);
		.padding(5px, 50px, 5px, 50px);
	}
	.modal-dialog
	{
		//margin:165px auto;
		width:800px;
	}
	.modal-header
	{
		border-radius: 5px 5px 0 0 !important;
		h4
		{
			font-size: 20px !important;
			font-weight: 700 !important;
		}
		.close
		{
			opacity: none !important;
		}
	}
	.wk_modal_form_container
	{
		padding:40px;
		.switch_zipcode
		{
			input
			{
				display:none;
			}
			span
			{
				display:block;
				background-image:url("../img/check-box.png");
				background-repeat:no-repeat;
				background-position: -18px 0;
				height:16px;
				width:18px;
				margin-right:10px;
				float:left;
				margin-top: 5px;
			}
		}
		.separator
		{
			border-bottom: 1px solid @form_input_grey;
			.margin(0, 0, 40px, 0);
		}
	}
}
#prod_err_alert
{
	float:left;
	width:100%;
	margin-top:20px;
	display: none;
}
.download_file
{
	.padding(5px, 0, 5px, 0);
	i
	{
		.color(@form_grey);
	}
	span
	{
		.color(#7663b4);
		.font_bold;
		.font_size(16px);
		.padding(10px, 10px, 10px, 10px);
	}
}

.warning_div
{
	border-left: @warning_div_width @border_solid @goldern;
	.margin(10px, 0px, 40px, 0px);
	.padding(10px, 10px, 20px, 15px);
	ul
	{
		.ptserif-family;
		li
		{
			.font_size(17px);
			.font_normal;
		}
		span
		{
			.font_size(15px);
		}
	}
}
.csv_notice
{
	.ptserif-family;
	padding-bottom: 10px;
	.margin(10px, 0px, 0px, 0px);
	strong
	{

	}
	span
	{

	}
}

/* ---- Model Header BG ---- */
.modal-header
{
	.bgcolor(@mod_theme_color);
	.color(@white);
}
/* ---- Model Header BG ---- */

.form_error
{
	.no_display;
	.color-red;
	.font_size(12px);
	.margin(10px, 0px, 0px, 0px);
}

.sp-notice
{
	z-index: 500;
	display: none;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.88);
	.color(@white);
	position: fixed;
	bottom: 0;
	height: 80px;
	line-height: 50px;
	font-size: 1.4em;
	text-align: center;
	.padding(15px, 0px, 0px, 0px);
	.roboto-family;
}

.sp-error
{
  z-index: 600;
  display: none;
  width: 100%;
  background-color: rgba(191,16,16,0.87);
  .color(@white);
  position: fixed;
  bottom: 0;
  height: 80px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  padding-top: 15px;
  .roboto-family
}

.sp-error button
{
  position: relative;
  top: 15px;
  right: 30px;
}
.sp-error button:hover
{
  .color(@white);
  text-shadow: none;
  opacity: 1;
  cursor: pointer;
}

/*----------------------CSS For Home Page Start---------------------------*/

.home_page_container
{
	.roboto-family;
	margin-bottom:50px;
	.border-grey;
	border-top: none;
	.bgcolor(@white);
	.menu_main_block
	{
		position:relative;
		.make_block;
		.margin(40px, 0, 40px, 0);
		.border-grey;
		padding-bottom: 20px;
		 a:hover,a:focus
		 {
		 	.menu_block
			{
				border:1px solid @mod_theme_color;
				border-left-width: 3px;
				.bgcolor(@white);
			}
			.assign_zipcode_icon
			{
				background-position: -55px 0;
			}
		 }
		.menu_block
		{
			.bgcolor(#f2f2f2);
			border:1px solid @gray;
			height:170px;
			padding-top: 20px;
			padding-bottom: 20px;
			#menu_title
			{
				.font_semibold;
				.font_size(24px);
				.color(@feature_desc_grey);
			}
			#menu_content
			{
				.font_semibold;
				.font_size(17px);
				.color(#929292);
			}
			.assign_zipcode_icon
			{
				background-image:url("../img/icon-assign-zipcode.png");
				background-repeat:no-repeat;
				background-position: 0 0;
				width:55px;
				height:47px;
			}
		}
	}
}
/*---------------------CSS For Home Page End------------------------------*/

/*----------------CSS For FAQ Page Start-----------------------*/
.sub-container
{
	border: @primcb_width @border_solid @dark_gray;
	.border_radius(3px, 3px, 3px, 3px);
	box-shadow: 4px 5px 5px -2px @dark_gray;
	.margin(50px, 0, 50px, 0);
	.padding(0, 28px, 50px, 28px);
	min-height: 52em;
	position:relative;
	h1, .main_heading 
	{
	    border-bottom: 2px solid @mod_theme_color;
	   	.font_size(1.8em);
	   	.font_semibold;
	   	.margin(10px, 0, 10px, 0);
	    .padding(12px, 0, 10px, 0);
	}
	th
	{
	    .color(@white) !important;
	    .font_size(0.9em);
	   	.font_semibold;
	   	background-color: @mod_theme_color;
	}
	td a
	{
		text-decoration:none;
		outline:medium none;
		.color(@mod_theme_color);
	}
	.faq_li
	{
		list-style: inside none disc;
    	.margin(0, 0, 6px, 0);
    	.padding(20px, 0, 20px, 0);
	}
	.faq_title
	{
		 .color(@mod_theme_color);
    	 .font_size(17px);
    	 .font_semibold;
	}
	.faq_content
	{
		line-height: 25px;
		.margin(0, 0, 0, 18px);
    	.padding(5px, 0, 0, 0);
    	text-align: justify;
    	word-wrap: break-word;
	}
}
.scrollToTop
{
  display:none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: url(../img/arrow.png);
  background-color: #FF9800;
  background-repeat:  no-repeat ;
  background-position: center top;
  position: fixed;
  bottom: 100px;
  right: 34px;
  text-decoration: none;
  -webkit-transition-duration: .3s;
  -moz-transition-duration: .3s;
  -ms-transition-duration: .3s;
  transition-duration: .3s;
}
.scrollToTop:hover{
  background-color: #03A9F4;
  background-position: center bottom;
}

/*----------------CSS For FAQ PAge Ends-------------------*/


/****** Start - Loader/Spinner Css ********/
.pa-loader {
	display: none;
    position: fixed;
    background:rgba(255,255,255,0.4);
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index: 1100;

	.pa-spinner {
		width: 52px;
		height: 52px;
		border: 4px solid rgb(204,204,204);
		border-radius: 50%;
		animation: pa-spin 460ms infinite linear;
			-o-animation: pa-spin 460ms infinite linear;
			-ms-animation: pa-spin 460ms infinite linear;
			-webkit-animation: pa-spin 460ms infinite linear;
			-moz-animation: pa-spin 460ms infinite linear;
		border-color: @mod_theme_color #cccccc;
	    position:absolute;
	    left:50%;
	    top:50%;
	    margin-left:-26px;
	    margin-top:-26px;
	}
	.title-text
	{
	    position: absolute;
	    text-align: center !important;
	    top: 56%;
	    width: 100%;
	    color:#888888;
	}
}

@keyframes pa-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@-o-keyframes pa-spin {
	from {
		-o-transform: rotate(0deg);
	}
	to {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes pa-spin {
	from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes pa-spin {
	from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes pa-spin {
	from {
		-moz-transform: rotate(0deg);
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
/****** Start - Loader/Spinner Css ********/
/*----------------CSS For Landing Page Start-----------------------*/

.wk_header_image
{
	background-image: url("../img/banner.jpg");
	background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	height:757px;
	.roboto-family;
	border-bottom: 5px solid #40467A;
	.wk_navigation
	{
		.font_size(18px);
		#wk_header
		{
			.font_size(28px);
			.color(@white);
			.font_semibold;
		}
		.navbar
		{
			margin:0;
			border:0 none;
			padding:10px;
			transition: all 0.25s ease;
			.pr-logo
			{
				background-image: url("../img/logosprite.png");
				background-repeat: no-repeat;
				background-position: 0 0;
				height:56px;
				width:286px;
				display:block;
			}
		}
		.navbar-nav > li > a
		{
			.color(@white);
			.font_size(18px);
			.font_normal !important;
			outline: 0 none;
			border-radius:0;
		}
		.nav > li > a:hover, .nav > li > a:focus,.nav > .active > a
		{
			.bgcolor(transparent) !important;
			.font_semibold !important;
			outline: 0 none;
			.font_size(18px);
			//border-bottom: 3px solid @white;
		}
		.navbar-default .navbar-nav > li > a:hover
		{
			.color(@black) !important;
			/*.bgcolor(@white) !important;*/
			.font_semibold !important;
		}
		.wk_menu_img
		{
			margin:0 !important;
			padding:0 !important;
			background-image: url(../img/icon-toggle-menu.png);
			background-repeat: no-repeat;
			background-position: 0 -19px;
			height:24px;
			width:30px;
		}
		#xs_navbar
		{
		    position: absolute;
		    z-index: 1030;
		    top: 0;
		    right:0;
		    overflow-y: hidden !important;
		    overflow-x: hidden !important;
		    border-radius: 0px;
		    padding:0px;
		    .bgcolor(@black);
		    .roboto-family;
		    width:75%;
		    #close-canvas
		    {
		    	background:url(../img/icon-close.png) no-repeat 0 0;
		    }
		    ul
		    {
		    	padding-left: 40px;
		    	padding-right: 40px;
		    }
		    ul li.active a
		    {
		    	.color(#9895ff);
		    	outline: 0 none;
		    }
		    a
		    {
		    	.font_size(15px);
		    	.font_normal;
		    	.color(@white);
		    	outline: 0 none;
		    	padding-left:0;
		    }
		    a:hover,a:focus
		    {
		    	 .color(#9895ff);
		    	 .bgcolor(@black) !important;
		    	 outline: 0 none;
		    }
		    .border-top
		    {
		    	border-top:1px solid #000000;
		    }
		    .border-bottom
		    {
		    	border-bottom:1px solid #3e3e3e;
		    }
		 }
	}
	.wk_xs_nav
	{
		position:fixed;
		 z-index: 1030;
		// .bgcolor(@white);
		 width:100%;
	}
	.banner
	{
	    padding: 200px 0 20px;
	    width: auto;
	    .container
	    {
	    	.top_heading
		    {
		    	.color(@white);
		    	.font_size(34px);
				.font_bold;
		    }
		    .top_sub_heading
		    {
		    	.color(@white);
		    	.font_size(18px);
				.font_normal;
		    }
		     .enter_text
		    {
		    	.color(@white);
		    	.font_size(17px);
				.font_bold;
				.margin(10px, 0, 5px, 0);
		    }
		    form
		    {
		    	.placeholder-color;
		    	margin-top:20px;
		    	.input-group-lg > .form-control {
				.color(#cccccc);
				.font_size(17px);
				.font_bold;
				}
				.input-group
				{
					background-color: rgb(255, 255, 255);
					border: 10px solid rgb(100, 100, 100); 
					border: 10px solid rgba(0, 0, 0, 0.15); 
					-moz-background-clip: padding; 
					-webkit-background-clip: padding; 
					background-clip: padding-box; 
				}
				.input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn 
				{
				    height: 60px;
				    outline: 0 none;
				    border-radius: 0;

				}
				.input-group-btn button
				{
					.bg_gradient(0deg, #629222 0%, @green 100%);
					.color(@white);
					.font_size(18px);
					.font_bold;
					.padding(10px, 35px, 10px, 35px);
					border-radius: 0;
					border:0 none;
				}
		    }
		    .scroll_bottom
		    {
		    	margin-top: 100px;
		    }
	    }
	    
	}
}
.wk_more_feature
{
	height:350px !important;
	 background-attachment: scroll !important;
	.banner
	{
		padding: 140px 0 20px !important;
	}
}
.feature_div
{
	box-shadow: 0px 0px 5px 1px #CCCCCC;
	border-radius: 2px;
	border-bottom: 2px solid @mod_theme_color;
}
.af-heading 
{
	.color(@black);
    .font_size(18px);
    font-weight: 500;
    padding: 15px 20px;
    border-bottom: 1px solid #DFDFDF;
}
.af-sub-heading 
{
	color: #252525;
    font-size: 16px;
    font-weight: 500;
    line-height: 32px;
}

.af-text 
{
	color: #252525;
    font-size: 14px;
    font-weight: 500;
    margin-top: 24px;
}
.am-mark 
{
	background-color: @mod_theme_color;
    border-radius: 3px;
    color: #ffffff;
    padding: 4px 8px;
}
#am-accordion 
{
	.accordion-title 
	{
		cursor: pointer;
    	border-bottom: 1px solid #DFDFDF;
    	padding: 8px 15px;
	}
	.accordion-desc 
	{
    	border-bottom: 1px solid @mod_theme_color;
    	padding: 15px 15px 15px 32px;
    	display: none;
	}
}
.plus-minus-icon 
{
	background-image:url("../img/plus-minus-icon.svg");
	background-repeat:no-repeat;
	background-position: 0 0;
	width: 15px;
	height: 15px;
	display: inline-block;

	&.open 
	{
		background-position: -15px 0;
	}
}

.wk_btn
{
	.padding(10px, 38px, 10px, 38px);
	border:1px solid #629222;
	.bgcolor(@landing_theme_color);
	.color(@white);
	.font_size(17px);
	.font_bold;
	.bg_gradient(0deg, #629222 0%, @green 100%);
	box-shadow: inset 0px 1px 0px 0px #c4f49e;
	.roboto-family;
}
.wk_btn:hover
{
	.bg_gradient(0deg, #497913, @green);
}

.features
{
	 .padding(50px, 0, 10px, 0);
	 .roboto-family;
	 .container
    {
		.section-heading 
		{
	    	.block-heading;
		}
		.feature-text
		{
			.block-subheading;
		}
		.feature-listing
		{
			.margin(40px, 0, 0, 0);
			.color(@black);
			.feature_margin
			{
				margin-bottom: 50px;
			}
			#feature_title
			{
		    	.font_size(19px);
				.font_semibold;
			}
			#feature_content
			{
		    	.font_size(17px);
				.font_normal;
				.ptserif-family;
			}

		}
		.wk_mockup
		{
			/*background-image: url(../img/mock-up.png);*/
		}
    }
}
.document
{
	background-image: url("../img/how-it-works.png");
	background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	.roboto-family;
	 .padding(50px, 0, 50px, 0);
/*	 margin-bottom:30px;
*/	 height:530px;
	.container
    {
    	.section-heading 
		{
	    	.block-heading;
	    	.color(@white);
		}
		.wk_video
		{
			height:300px;
			.embed-container 
			{ 
			   /* position: relative; 
			    padding-bottom: 56.25%;
			    height: 0; 
			    overflow: hidden; 
			    max-width: 100%; 
			    height: auto; */
			    float:left;
			    height:100%;
			    width:100%;
			} 
			.embed-container iframe, .embed-container object, .embed-container embed 
			{ 
			   /* position: absolute;*/
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			}
		}
    }
}
.pricing
{
	border-bottom: 1px solid #D9D9D9;
	.roboto-family;
	 .padding(50px, 0, 50px, 0);
	.container
    {
    	.section-heading 
		{
	    	.block-heading;
		}
		.feature-text
		{
			.block-subheading;
		}
    }
}
.contact
{
	.padding(50px, 0, 50px, 0);
	.roboto-family;
	.container
    {
    	.section-heading 
		{
	    	.block-heading;
		}
		.feature-text
		{
			.block-subheading;
		}
		.contact-form
		{
			margin-top:20px;
			margin-bottom:40px;
		}
		#contact_form
		{
			.placeholder-color;
			.form-group
			{
				.roboto-family;
	    		.color(@form_input_grey) !important;
	    		.font_size(18px) !important;
				.font_semibold !important;

				.input-group-addon, input, textarea
				{
					border-radius: 0;
					.bgcolor(@white);
				}
			}
		}
    }
}
.footer 
{
    bottom: 0;
    float: left;
    height: 60px;
    left: 0;
    padding-top: 25px;
    position: relative;
    width: 100%;
    z-index: 10;
    .roboto-family;
    .footer-text 
    {
	    font-size: 17px;
	    .color(@black);
	    .padding(20px, 0, 15px, 0);
	    border-top: 2px solid @landing_theme_color;
	    .font_normal;
	    a
	    {
	    	 .color(@landing_theme_color);
    		text-decoration: none;
    		.font_semibold;
	    }
	}
}
@media screen and (min-width:300px) and (max-width:1024px)
{
	.wk_header_image
	{
		/*background-image: url("../img/banner-xs.png") !important;*/
		height:600px !important;
		#wk_header
		{
			.font_size(18px) !important;
		}
		#wk_sub_header
		{
			.font_size(14px) !important;
			.color(@white) !important;
		}
		.banner
		{
		    padding:120px 0 20px !important;
		    .container
		    {
		    	margin-top:0 !important;
		    	.top_heading
			    {
			    	.font_size(20px) !important;
			    	.font_bold !important;
			    }
			    .top_sub_heading
			    {
			    	.font_size(16px) !important;
			    }
			    .enter_text
			    {
			    	.font_size(15px) !important;
			    }
			    form
			    {
					.font_size(13px) !important;
					
					.input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn 
					{
					    height: 60px;
					    outline: 0 none;
					    border-radius: 0;

					}
					.input-group-btn button
					{
						.padding(0, 10px, 0, 10px) !important;
						.font_size(14px) !important;
					}
				}

			}
		}	    
	}
	.features
	{
		 .padding(20px, 0, 20px, 0) !important;
		 .container
	    {
			.section-heading 
			{
		    	.font_size(24px) !important;
			}
			.feature-text
			{
		    	.font_size(15px) !important;
			}
			.feature-listing
			{
				.margin(20px, 0, 0, 0) !important;
				.feature_margin
				{
					margin-bottom: 25px !important;
				}
				#feature_title
				{
			    	.font_size(17px) !important;
				}
				#feature_content
				{
			    	.font_size(15px) !important;
				}

			}
	    }
	}
	.document
	{
		 .padding(20px, 0, 20px, 0);
		.container
	    {
	    	.section-heading 
			{
		    	.font_size(24px) !important;
			}
			.wk_video
			{
				height:200px;
				margin-left:0 !important;
				width:100%;
			}
	    }
	}
	.pricing
	{
		 .padding(20px, 0, 20px, 0);
		.container
	    {
	    	.section-heading 
			{
		    	.font_size(24px) !important;
			}
			.feature-text
			{
		    	.font_size(15px) !important;
			}
	    }
	}
	.contact
	{
		 .padding(20px, 0, 20px, 0) !important;
		.container
	    {
	    	.section-heading 
			{
		    	.font_size(24px) !important;
			}
			.feature-text
			{
				.font_size(15px) !important;
			}
			.contact-form
			{
				margin-bottom:0px !important;
			}
	    }
	}
	.footer-text 
    {
	    font-size: 14px !important;
	}	
}
.table-condensed{
	width: 100% !important;
}
@media screen and (min-width:480px)
{
	background-image: url("../img/banner.png") !important;
	height:732px !important;
}