/* @import "lib.less"; */

// lib.less

/***** Variable *****/
@lessCssVersion: "1.0.4";
@textColor: #333333;
@baseFontSize-value: 12;
@baseFontSize: 12px;
@baseEmValue: 12em;
@baseRoundedRadius: 5;
@brandColor: #006595;
@path: "resources";


/***** Namespaces *****/
#defaults {
	.color { color: @brandColor; }
	.format {
		.textColor;
		font: @baseFontSize Arial, Helvetica, sans-serif;
		margin: 0;
		padding: 0;
	}
	.container {
		.paddingPxToEm(0,0,0,0);
		//min-width:1136px;
		//min-height:100%;
		/* overflow: none; */
	}
}

/***** Mixins functions *****/
/* Formating */
.fontPxToEm ( @size: @baseEmValue ) {
	font-size: @size  / @baseEmValue;
}

.heightPxToEm ( @size: @baseEmValue) {
	height: @size  / @baseEmValue;
}

.paddingPxToEm ( @top: 10, @right: 10, @buttom: 0, @left: 10) {
	padding: (@top / @baseEmValue) (@right / @baseEmValue) (@buttom / @baseEmValue) (@left / @baseEmValue);
}

.marginPxToEm ( @top: 10, @right: 10, @buttom: 0, @left: 10) {
	margin: (@top / @baseEmValue) (@right / @baseEmValue) (@buttom / @baseEmValue) (@left / @baseEmValue);
}

.textColor (@color: @textColor) {
	color: @color;
}



.textFormat (@size: @baseFontSize-value, @color: @textColor, @weight: normal) {
	.fontPxToEm(@size);
	color: @color;
	font-weight:@weight;
}

.border (@color: #C3CBD3, @thickness: 1, @type: solid) {
	border: @type (@thickness / @baseEmValue) @color;
}

.underline {
	text-decoration: underline;
}

/* Css3 fancy */
.roundedCorner (@radiusTopLeft: @baseRoundedRadius, @radiusTopRight: @baseRoundedRadius, @radiusBottomRight: @baseRoundedRadius, @radiusBottomLeft: @baseRoundedRadius) {
	border-radius: (@radiusTopLeft / @baseEmValue) (@radiusTopRight / @baseEmValue) (@radiusBottomRight / @baseEmValue) (@radiusBottomLeft / @baseEmValue);
	-moz-border-radius: (@radiusTopLeft / @baseEmValue) (@radiusTopRight / @baseEmValue) (@radiusBottomRight / @baseEmValue) (@radiusBottomLeft / @baseEmValue);
	-webkit-border-radius: (@radiusTopLeft / @baseEmValue) (@radiusTopRight / @baseEmValue) (@radiusBottomRight / @baseEmValue) (@radiusBottomLeft / @baseEmValue);
}

.dropShadow (@shadowX: -1, @shadowY: -1, @shadowThickness:1, @shadowColor: #6c6c6c, @innerGlowX:0, @innerGlowY:0, @innerGlowThickness:1, @innerGlowColor:#fff) {
	-webkit-box-shadow:(@shadowX / @baseEmValue) (@shadowY / @baseEmValue) (@shadowThickness / @baseEmValue) @shadowColor, inset (@innerGlowX / @baseEmValue) (@innerGlowY / @baseEmValue) (@innerGlowThickness / @baseEmValue) @innerGlowColor;
	-moz-box-shadow:(@shadowX / @baseEmValue) (@shadowY / @baseEmValue) (@shadowThickness / @baseEmValue) @shadowColor, inset (@innerGlowX / @baseEmValue) (@innerGlowY / @baseEmValue) (@innerGlowThickness  / @baseEmValue) @innerGlowColor;
	box-shadow:(@shadowX / @baseEmValue) (@shadowY / @baseEmValue) (@shadowThickness / @baseEmValue) @shadowColor, inset (@innerGlowX / @baseEmValue) (@innerGlowY / @baseEmValue) (@innerGlowThickness / @baseEmValue) @innerGlowColor;
}

.textShadow (@shadowX: -1, @shadowY: -1, @shadowThickness:1, @shadowColor: #6c6c6c) {
	text-shadow: (@shadowX / @baseEmValue) (@shadowY / @baseEmValue) (@shadowThickness / @baseEmValue) @shadowColor;
}

.linearGradient (@stop1:0, @color1: #D8DBDC, @stop2:100%, @color2: #EFF1F2, @stop3:100%, @color3:#ccc) {
	background:-webkit-gradient(linear, left bottom, left top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3)) ;
	background:-moz-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3) ;
	background:-o-linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3) ;
	background:linear-gradient(center bottom, @color1 @stop1, @color2 @stop2, @color3 @stop3) ;
	filter: e("progid:DXImageTransform.Microsoft.gradient(startColorStr=") @color2 e(",EndColorStr=") @color1 e(",GradientType=0)");

}

.linearGradientHorizontal (@stop1:0, @color1: #D8DBDC, @stop2:100%, @color2: #EFF1F2, @stop3:100%, @color3:#ccc) {
	background:-webkit-gradient(linear, left top, right top, color-stop(@stop1, @color1), color-stop(@stop2, @color2), color-stop(@stop3, @color3)) ;
	background:-moz-linear-gradient(left center, @color1 @stop1, @color2 @stop2, @color3 @stop3) ;
	background:-o-linear-gradient(left center, @color1 @stop1, @color2 @stop2, @color3 @stop3) ;
	background:linear-gradient(left center, @color1 @stop1, @color2 @stop2, @color3 @stop3) ;
	filter: e("progid:DXImageTransform.Microsoft.gradient(startColorStr=") @color1 e(",EndColorStr=") @color2 e(",GradientType=1)");
}


/* Widget styles */
.heading (@size: 12, @margin-bottom: 0.2, @color: @brandColor) {
	font-weight: bold;
	.fontPxToEm(@size);
	color: @color;
	margin-bottom: (1em * @margin-bottom);
}

.tab (@color1: #007c8d, @color2: #00b5cb, @textColor:#fff, @textGradient:#6c6c6c){
	//.roundedCorner(5,5,0,0);

	.linearGradient(0, @color1 , 100%, @color2, 100%, #ccc );
	//.paddingPxToEm(5, 12, 5, 12);
	//.marginPxToEm(0, 2, 0, 2);
	.textFormat(13, @textColor, bold);
	.textShadow(0, 1, 0, @textGradient);
	.dropShadow(0, 0, 0, #fff);
	.roundedCorner(5,5,5,5);
	display:inline-block;
	//.marginPxToEm(2, 2, 0, 2);
	a{ .paddingPxToEm(5, 12, 5, 33); display:block; .textFormat(13,#fff,bold); .textShadow(0,1,0,#6c6c6c); &:hover{ text-decoration: none;}}
}

.buttonFormat (@textColor: #FFF, @textColorHover: #FFF, @gradientColor1: #007c8d, @gradientColor2: #00b5cb, @borderColor: #4290e4, @gradientColorHover1: #008c9f, @gradientColorHover2: #02c3db)  {
 	.textFormat(12, @textColor, bold);
	.linearGradient(0, @gradientColor1 , 100%,  @gradientColor2);
	.roundedCorner();
	.border( @borderColor );
	.dropShadow(0, 0, 1, #6c6c6c);
	.paddingPxToEm(5, 12, 5, 12);
	cursor:pointer; cursor:hand;
	text-decoration: none;
	display: inline-block;
	margin-right:5px;

	&:hover {
		.textColor(@textColorHover);
		.linearGradient(0, @gradientColorHover1, 100%, @gradientColorHover2);
		text-decoration: none;
	}
}


.buttonFormatWithImage( @img: "insert-circuit-btn.png", @w:107px, @h:51px ){
background:transparent e(%("url(%s/images/%s)", @path, @img)) no-repeat 0px 0px;
.roundedCorner(0,0,0,0); .dropShadow(0, 0, 0, #fff,0,0,0,#fff); width:@w; height:@h; padding:0; border:0;


}

.notificationFormat (@bgColor: #e7f7cf, @img: "notification-success-mark.png", @imgClose: "notification-success-close.png", @borderColor: #8bc90d, @textColor: #416115) {
	margin:0 auto;
	text-align:center;
	background: @bgColor e(%("url(%s/images/%s)", @path, @img)) no-repeat 11px 9px;
	.paddingPxToEm(3, 25, 3, 25);
	.marginPxToEm(5,0,5,0);
	.border(@borderColor);
	.textFormat(16, @textColor);

	a { .underline; .textColor(@textColor) }

	.title { .textFormat(16, @textColor, bold); }

	.close {
		background: @bgColor e(%("url(%s/images/%s)", @path, @imgClose)) no-repeat 0 0;
		width:22px;
		height: 22px;
		float:right;
		.marginPxToEm(2,-26,0,2);

		span { display: none; }
	}
}

/* TODO */
.tooltipFormat (@gradientColor1: #007c8d, @gradientColor2: #00b5cb, @borderTopColor: #007c8d ) {
	position: relative;
	cursor: help;
	display: inline-block;
	text-decoration: none;
	color: #222;
	outline: none;

	span {
		visibility: hidden;
		position: absolute;
		bottom: 30px;
		left: 50%;
		z-index: 999;
		width: 180px;
		margin-left: -100px;
		text-decoration: none;
		.paddingPxToEm(10, 10, 10, 10);
		.border(#ccc);
		opacity: .9;
		.roundedCorner();
		.dropShadow(0, 1, 2, rgba(0,0,0,.4));
		.textShadow(0,1,0,#666);
		.textColor(#fff);
		.linearGradient(0, @gradientColor1, 100%, @gradientColor2);
	}

	&:hover {
		visibility: visible;
		text-decoration: none;

		span { visibility: visible; }
	}

	&span:before, span:after {
		content: "";
		position: absolute;
		z-index: 1000;
		bottom: -7px;
		left: 50%;
		margin-left: -8px;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 0;

		border-top: 8px solid @borderTopColor;
	}

	&span:before {
		border-top-color: #ccc;
		bottom: -8px;
	}
}

// end lib

* { #defaults > .format; }
b { font-weight: bold; }

.container { #defaults > .container; margin-top:-125px; margin-left: auto; margin-right: auto; width: 97%; }

strong { font-weight:bold; }
p { margin-bottom: 0.8em; }

a {
	color: @brandColor;
	text-decoration: none;

	&:hover { .underline; }
	&:active { .underline; }
	&:visited { text-decoration: none; }
}

.title { .heading(28, 0); }

html { height:100%;}
body { height:100%;}

h1 { .heading(20, 1, #1B1B1B); }
h2 { .heading(18, 0.8); .textFormat(16,#666,bold); }
h3 { .heading(16, 0.6); margin:20px 0px 10px;}
h3 { .heading(16, 0.6); color: lighten(@brandColor, 5%); }
h4 { .heading(14, 0.4, #000); }
h5 { .heading(12, 0.2); }
h6 { .heading(12, 0.2, #333); }




table {
	width:100%;
	border-collapse: collapse;
	.dropShadow(0, 0, 5, #f2f2f2, 0, 0 ,0);
	.roundedCorner(5,5,5,5);
	.border();




	thead {
	//display:block;
		.roundedCorner(5,5,0,0);
		.linearGradient();
		//.border();


		border-bottom: #929597 2px solid;
		tr {
		width:100%;
			.roundedCorner(5,5,0,0);


			th{
			 font-weight: bold;

			 .paddingPxToEm(10, 5, 10, 5);
			.textShadow(0,1,1,#fff);
		   	&.first{ .roundedCorner(5,0,0,0); }
			&.last{ .roundedCorner(0,5,0,0);  }

				&.actions-col{
					width:13%;text-align:center;
				}
			}

		}
	}

	tbody {



		tr {
			background-color: #fff;
		 	border-top: #C3CBD3 1px solid;

			&.alternate {  background-color: #f7fafb; }

			&.last { .roundedCorner(0,0,5,5); .roundedCorner(0,0,5,5);
				td {
					&.first { .roundedCorner(0,0,0,5); }
					&.last { .roundedCorner(0,0,5,0); border-right: 0; }
				}
			}

			td {

				vertical-align: top;
				border-right: #C3CBD3 1px solid;
				font-size: 11px;
				.paddingPxToEm(5, 5, 5, 5);

				&.label {
					width: 25%;
					font-weight: bold;
					background-color: #eee;
				}

				&.number{ text-align:right;}

				&.value {
					width: 25%;
					.groupLabel{
						font-size:11px;
						a{ font-size:11px;margin-left:10px;
						}
					}
					label.error{
						font-size:11px;color:red;display:block;margin-top:5px;
					}
				}

				&.actions {
					white-space: nowrap;
				}

				a{font-size:11px;text-decoration:underline;}
				* { font-size: 11px; }

			}

		}
	}

	&.sortable{
			th {
			cursor: pointer;
			&.UP {
				&:after{
					content:" ";
					display:inline-block;
					width:11px;
					height:8px;
					background: url("../images/asc-icon.png") no-repeat 0 0 transparent;
					margin-left:5px;
				}

			}
			&.DOWN {
				&:after{
					content:" ";
					display:inline-block;
					width:11px;
					height:8px;
					background: url("../images/desc-icon.png") no-repeat 0 0 transparent;
					margin-left:5px;
				}
			}
		}
	}
}


ul {
margin-left:13px;margin-top:2px;
	&.list {
		list-style-position: inside;
		list-style-type: none;

		li {
			.textFormat(13, #666);
			span {
				.textColor(#333);
			}
			&:before {
			   content: "\00BB \0020";
			}
		}

		&.indent {
			margin-left:13px;margin-top:5px;
			li{
				&:before {
					content:"|_";color:#999;display:inline-block;*display:inline;zoom:1;vertical-align:top;margin-right:7px;margin-top:-2px;padding-top:5px;position:relative;top:-9px;
				}
			}
		}
	}

	&.pagination { display:inline-block;

		li {
			list-style:none;
			display:inline-block;
			.roundedCorner();
			.linearGradient(0, #007c8d, 100%, #00b5cb);

			.paddingPxToEm(5, 5, 5, 5);
			.marginPxToEm(0, 2, 0, 2);

			cursor:pointer; cursor:hand;
			&:hover { .linearGradient(0, #0197ab , 100%, #02d4ed); text-decoration: none; }
			&.active { .linearGradient(0, #006595 , 100%, #00304e); }

			span {
				.textFormat(12,#fff);
				display:inline-block;
				min-width:12px;
				height:12px;
				text-align:center;
			}

			a {
				display:inline-block;
				min-width:12px;
				height:12px;

				&:hover { text-decoration: none; }
			}

			&.first { .marginPxToEm(0, 2, 0, 0);
				a {
					background: url("../images/pagination-first.png") no-repeat 1px 4px transparent;
					display: inline-block;

					span { display:none; }
				}
			}

			&.previous {
				a {
					background:url("../images/pagination-previous.png") no-repeat 2px 4px transparent;
					display: inline-block;
					span{ display:none; }
				}
			}

			&.next {
				a {
					background:url("../images/pagination-next.png") no-repeat 2px 4px transparent;

					display:inline-block;
					span{ display:none;}
				}
			}

			&.last { .marginPxToEm(0, 0, 0, 2);
				a {
					background: url("../images/pagination-last.png") no-repeat 1px 4px transparent;
					display: inline-block;
					span{ display:none;}
				}
			}
		}
	}
}

ul.checkbox-list {
	list-style-type: none;

	li {
		div.checkbox { display: inline-block; vertical-align: top; }
		div.label { display: inline-block; width: 95%; }
		margin-bottom: 3px;
	}
}

.button {
	.buttonFormat();

	&.secondary {
		.buttonFormat(#444, #666, #999999, #EEEEEE, #999999, #B8B8B8, #FBFBFB);
		/*padding:3px;*/
	}

	&.insert { .buttonFormatWithImage();
		&.first {
			background-position:0px 0px;
				&:hover{
					background-position:-109px 0px;
				}
		}
		&.last {
			background-position:0px -51px;
				&:hover{
					background-position:-109px -51px;
				}
		}
	 }

	 &.deleteGroup{ padding:3px; }

	 &.delete{ .buttonFormatWithImage("delete-circuit-btn.png",49px,49px);
		 	&:hover{background-position:-49px -0; }
	 }

	 &.icon{ padding:4px 7px 0px;  }

	 span{ display:none;}

}

.text {
	.roundedCorner();
	.dropShadow(0, 0, 3, #6c6c6c);
	.border();
	.paddingPxToEm(2, 3, 2, 3);

	&:focus { .dropShadow(0, 0, 4, @brandColor); }

	&.error{
		.roundedCorner();
		.border(#ffb4b4);
		.dropShadow(0, 0, 3, #ffb4b4);

		&:focus { .dropShadow(0, 0, 4, #fe6d6d); }
	}
}

.notification {
	&.success {
		.notificationFormat(#e7f7cf, "notification-success-mark.png", "notification-success-close.png", #8bc90d, #416115);
	}

	&.failed {
		.notificationFormat(#f6e0e0, "notification-failed-mark.png", "notification-failed-close.png", #dd0b0b, #901313);
	}

	&.warning {
		.notificationFormat(#f7f3c6, "notification-warning-mark.png", "notification-warning-close.png", #d2af0c, #8c791e);
	}

	&.info {
		.notificationFormat(#d0ecfb, "notification-info-mark.png", "notification-info-close.png", #16a4e8, #416374);
	}

	&.plain {
		.title { font-size: 1em; }
	}
}


.tooltip {
	&.error {
		background:url("../images/validaion-exclaimation-mark.png") no-repeat 0 0;
		width:16px;
		height: 16px;
		display: inline-block;
		.marginPxToEm(0,0,0,3);
		.tooltipFormat(#e84c32, #fd705d, #e84c32);
	}

	&.info {
		.tooltipFormat();
	}
}

.modal {
	text-align:center;
	display:inline-block;
	width:310px;
	.linearGradient(0, #ebeaea, 100%, #fff);
	.paddingPxToEm(7, 0, 20, 0);
	.dropShadow(0, 1, 4, rgba(0,0,0,.4));
	background:url("../images/modal-mark.png") no-repeat 20px 8px;

	.title {
		.textFormat(16,#3c404b,bold);
		.marginPxToEm(0,0,5,0);
	}

	.content {
		color:#fff;
		.linearGradient(0, #00557f, 100%, #005f8d);
		.dropShadow(0, 1, 4, rgba(0,0,0,.4));
		.paddingPxToEm(20, 20, 20, 20);




		.emphasis {
			color:#fff;
			font-weight:bold;
		}

		.action{ .marginPxToEm(10,0,0,0); }
	}
}


#main-navigation { padding-left: 10px; padding-bottom: 5px; }

.navigation {
	width: 99%;
	.linearGradient(0, #002c53 , 100%, #006595);
	//.paddingPxToEm(0,0,0,0);
	padding: 0 0 0 5px;

	ul {
		margin:0;
		display:inline-block;

		li {
			list-style:none;
			display:inline-block;
			//height:30px;
			.tab();
			margin: 5px 3px 0 0;

			a { padding: 5px 10px !important; }

			/*
			a{
				&.dashboard{ background:url("../images/dashboard-tab-icon.png") no-repeat 12px 6px; }
				&.quotation{ background:url("../images/quotation-tab-icon.png") no-repeat 12px 6px; }
				&.purchase-request{ background:url("../images/purchase-request-icon.png") no-repeat 12px 6px; }
				&.purchase-order{ background:url("../images/purchase-order-tab.png") no-repeat 12px 6px; }
				&.order{ background:url("../images/order-tab-icon.png") no-repeat 14px 5px; }
				&.services{ background:url("../images/services-tab-icon.png") no-repeat 11px 6px; }
				&.product{ background:url("../images/product-tab-icon.png") no-repeat 13px 6px; }
				&.customer{ background:url("../images/customer-tab-icon.png") no-repeat 10px 7px; }
				&.users{ background:url("../images/user-tab-icon.png") no-repeat 9px 7px; }
				&.billing{ background:url("../images/billing-tab-icon.png") no-repeat 11px 6px; }
				&.invoices{ background:url("../images/invoice-tab-icon.png") no-repeat 14px 5px; }
				&.reports{ background:url("../images/report-tab-icon.png") no-repeat 10px 7px; }
				&.system{ background:url("../images/system-tab-icon.png") no-repeat 11px 6px; }
				&.log { background:url("../images/logs-tab-icon.png") no-repeat 11px 6px; }
				&.circuits{ background:url("../images/circuit-tab-icon.png") no-repeat 10px 7px; }
				&.termination{ background:url("../images/termination-tab-icon.png") no-repeat 11px 6px; }
				&.provisioning{ background:url("../images/provisioning-tab-icon.png") no-repeat 8px 5px; }

			} */

			&:hover { .tab(#0197ab,#02d4ed); }

			&.active {
				.tab(#fff,#e8e8e8,#333,#fff);
				a {

					.textFormat(13,#333,bold);
					//border-bottom:1px solid #fff;
					.textShadow(0,1,0,#fff);
					/*
					&.dashboard{ background:url("../images/dashboard-active-tab-icon.png") no-repeat 12px 6px; }
					&.quotation{ background:url("../images/quotation-active-tab-icon.png") no-repeat 12px 6px; }
					&.purchase-request{ background:url("../images/purchase-request-icon-active.png") no-repeat 12px 6px; }
					&.purchase-order{ background:url("../images/purchase-order-tab-active.png") no-repeat 12px 6px; }
					&.order{ background:url("../images/order-active-tab-icon.png") no-repeat 14px 5px; }
					&.services{ background:url("../images/services-active-tab-icon.png") no-repeat 11px 6px; }
					&.product{ background:url("../images/product-active-tab-icon.png") no-repeat 13px 6px; }
					&.customer{ background:url("../images/customer-active-tab-icon.png") no-repeat 10px 7px; }
					&.users{ background:url("../images/user-active-tab-icon.png") no-repeat 9px 7px; }
					&.billing{ background:url("../images/billing-active-tab-icon.png") no-repeat 11px 6px; }
					&.invoices{ background:url("../images/invoice-active-tab-icon.png") no-repeat 14px 5px; }
					&.reports{ background:url("../images/report-active-tab-icon.png") no-repeat 10px 7px; }
					&.system{ background:url("../images/system-active-tab-icon.png") no-repeat 11px 6px; }
					&.log{ background:url("../images/logs-active-tab-icon.png") no-repeat 11px 6px; }
					&.circuits{ background:url("../images/circuit-active-tab-icon.png") no-repeat 10px 7px; }
					&.termination{ background:url("../images/termination-active-tab-icon.png") no-repeat 11px 6px; }
					&.provisioning{ background:url("../images/provisioning-active-tab-icon.png") no-repeat 8px 5px; }
					*/
				}
			}


		}
	}

	&.actions {
		width: 650px;
		float: right;
		background: none;
		padding: 0;
		ul {
			float: right;
			li {
				a {
					background: none;
					padding: 0;
				}
			}
		}
	}
}

.temp-header {
	.linearGradient(0, #002c53 , 100%, #006595);
	.paddingPxToEm(10, 5, 10, 5);
	.textFormat(13, #fff, bold);
	margin-bottom: 0;
}

.temp-field { margin-bottom: 10px; clear:both; }
.temp-label { display: inline-block; width: 20%; font-weight: bold; vertical-align: top; margin-top: 6px; &.field{margin:0;} }
.temp-hint { font-size: smaller; color: gray; }
#context-area .temp-label { width: 25%; margin-right: 10px; }
.temp-control {
	vertical-align: bottom;
	display: inline-block;
	width: 70%;

	.number-quotation{
		margin-top:5px;display:inline-block;*display:inline;zoom:1;vertical-align:top;
	}

	input[type='text'], input[type='password'], select, textarea {
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		//&.error { border: red solid 1px; }
   	}

	label.error { color: red; margin-top: 5px; display: block; }
	&.just-text { margin-top: 7px; }
}

.js-date {
	width: 50% !important;
	+img { cursor: pointer; }
}

.center-screen {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.h1-login {
	width: 408px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;

	h1 {
		.textFormat(12,#666666,bold);
		span{ .textFormat(12,@brandColor,bold);  }
	}
}

.login{
	//background:url("../images/login-box.png") no-repeat 0px 13px;

	background: -webkit-linear-gradient(#FDFDFD, #E5E5E5); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#FDFDFD, #E5E5E5); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#FDFDFD, #E5E5E5); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#FDFDFD, #E5E5E5); /* Standard syntax */

	border-radius: 5px;
	border: solid 1px #A3A3A3;

	box-shadow:2px 2px 20px 1px #ccc;

	width:408px;
	//height:226px;
	margin:10px auto;

	form{
		// width:295px;
		width:320px;

		height:130px;
		.paddingPxToEm(12, 42, 0, 42);
		.temp-label{ width:80px;}
		.temp-control{ width:195px;}
		.button { float:right;}
		.notification.error {
			.title{ .textFormat(12,#F00,bold);  }
		}
	}

	.copyright { .textFormat(11,#aaaaaa);  float:right; margin-right:30px; }
	.padlock { float: left; margin-top: -15px; margin-left: 5px; }
	.logo { margin-top: 20px; margin-left: 25px; }
	.temp-label {
		width: 110px !important;
	}
	.temp-field {
		margin-left: 0;
		overflow: hidden;
	}
}

#header{
	/*min-width:1136px;*/
	.clearfix{
		.paddingPxToEm(12, 45, 0, 45);
		.linearGradient(0, #eaeaea , 100%, #f9f9f9);
		height:75px;
		border-bottom: #bcbcbc 1px solid;
		z-index: 999;
		position:relative;
	}
}

#user-menu {
	float: right;
	margin-top:6px;
	ul {
		margin:0 ;
		display:inline-block;

		li {
			vertical-align: top;
			list-style:none;
			display:inline-block;
			height:17px;
			background:url("../images/header-spliter.gif") no-repeat 0 0;
			padding:18px 15px;
			.textFormat(11,#666,bold);

				&.first{ background: none;}
				a{ .textFormat(11,#666,bold);
					 padding:1px 0 2px 17px;
					&#settings { background:url("../images/settings-icon.png") no-repeat 0 0;  	}
					&#logout { background:url("../images/logout-icon.png") no-repeat 0 0;   	}
				}
			}

		}
}

.wrapper {	padding: 150px 0px 54px; min-height:100%;   }

#content{

	.border();
	.roundedCorner();
	/*overflow:hidden;*/


	&.dashboard{
		#context-area { padding:0; color:000;  //min-width:331px;
			ul { padding:0}

		}
		#main { padding:0; width: 75%; //min-width:713px;
		}
	}


	#header {
		.roundedCorner(5,5,0,0);
		height:35px;
		.linearGradient(0, #006595 , 100%, #002c53);
		border-bottom:1px #494949 solid;
		.dropShadow(0, 0, 0, #fff);
		padding:10px 14px 0;
		h1{ margin:0; color:#fff;  text-shadow: 0px 1px 0px #000; padding-left:10px; height:30px; padding-top:2px;

			/*
				&.dashboard{ background:url("../images/dashboard-title-icon.png") no-repeat 7px 0px; }
				&.quotation{ background:url("../images/quotation-title-icon.png") no-repeat 7px 0px; }
				&.purchase-request { background:url("../images/purchase-request-title-icon.png") no-repeat 7px 0px; }
				&.order{ background:url("../images/order-title-icon.png") no-repeat 10px 0px; }
				&.services{ background:url("../images/services-title-icon.png") no-repeat 5px 0; }
				&.log { background:url("../images/logs-title-icon.png") no-repeat 5px 0; }
				&.product{ background:url("../images/product-title-icon.png") no-repeat 6px 0; }
				&.customer{ background:url("../images/customer-title-icon.png") no-repeat 0 0; }
				&.users{ background:url("../images/user-title-icon.png") no-repeat 1px 0; }
				&.billing{ background:url("../images/billing-title-icon.png") no-repeat 7px 0; }
				&.invoices{ background:url("../images/invoice-title-icon.png") no-repeat 8px 0; }
				&.reports{ background:url("../images/report-title-icon.png") no-repeat 3px 0; }
				&.system{ background:url("../images/system-title-icon.png") no-repeat 7px 0; }
				&.circuits{ background:url("../images/circuit-title-icon.png") no-repeat 2px 0; }
				&.termination{ background:url("../images/termination-title-icon.png") no-repeat 5px 0; }
				&.provisioning{ background:url("../images/provisioning-title-icon.png") no-repeat 3px 0; }
			*/

		}
		position:relative;
		z-index:99;
	}

	#container2 {
		clear:left;
		float: left;
		width: 100%;
		/*overflow: hidden;*/
	}

	#container1 {
		float: left;
		width: 100%;
		position: relative;
		/*right: 75%;*/
		//background:url("../images/border-bg.jpg") repeat-y right 0 #f1f4f7;
	}

	#context-area {
		background:url("../images/border-bg.jpg") repeat-y right 0 #f1f4f7;
		width: 25%;
		/*left: 75%;*/

		float: left;
		position:relative;
		/*overflow: hidden;*/

		padding: 0 0 40px;
		z-index:99;
		.roundedCorner(0,0,0,5);


		h2 { .textFormat(16,#666,bold);  padding:10px 20px 0px; margin-bottom:5px; /*border-top:solid 1px #c3cbd3;*/  }


		form { padding:0 20px}
		//.dropShadow(0, 0, 0, #C3CBD3,0,0,1,#000);
		#update-Form{
			padding:0;
		}

		.hint{display:inline-block;margin-bottom:10px;}

		input[type="submit"]{
			&.secondary{ padding:3px; }
		}

		.info {
			h2 { border:0; padding:0; color:@brandColor;}
			&.view{ h2{color:#666; }}
			ul{ margin-bottom:5px; }
		}
	}

	#main {
		width: 75%;
		/*left: 75%;*/
		border-left:1px solid #ccc;
		margin-left:-1px;
		background:#fff;

		float: left;
		position: relative;
		//overflow: hidden;
		//overflow-x: auto;

		min-height: 320px;

		// float: right;
		//padding:20px 1%;
	   .roundedCorner(0,0,5,0);

		h2 { .textFormat(18,#666,bold); margin: 15px;}
		h3 { .textFormat(14,#333,bold); border-bottom:solid 1px #c3cbd3; padding:0 0 5px 15px; }
		h4, .vpnConnection { .textFormat(12,#444,bold);  margin:15px 0 5px; padding-left: 15px; }

		a{text-decoration:underline;}
		.button{
			text-decoration:none;
			&.secondary{padding:3px; &.default{ .paddingPxToEm(5, 12, 5, 12); }  }

		}
		.call_actions{
			a{
				text-decoration:none;
				&:hover {text-decoration:underline;}
			}
			.button {
				&:hover{text-decoration:none;}
			}
		}
		.button a{
			&:hover{text-decoration:none;}
		}
		#cancelGroup{
			padding:3px;
		}
	}
}

#footer {
	border-top: solid gray 1px;
	//min-width:1102px;
	.linearGradient(0, #004a6c , 100%, #00304e);
	//height:21px;
	//margin-top:-30px;
	padding: 3px 0 0 10px;
	p { .textFormat(10,#fff,bold); font-size: 9px; }
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 100;
}

.temp-label { .textFormat(12,#777,bold); }

ul.tab{
	display:inline-block;
	width:100%;
	margin-top:25px;
	li {
		list-style:none;
		display:inline-block;
		a {
			margin-right:5px; background-color:#c3c3c3; padding:10px 15px; .roundedCorner(5,5,0,0); .textFormat(14,#888,bold); margin-bottom:-5px;
			&.selected { background-color:#e3e3e3;.textFormat(14,#666,bold);  }
		}
	}
}

.two-col-left, .two-col-right {
	width:45%; display:inline-block; vertical-align:top;
	.temp-field {
		margin-bottom:15px;
		.temp-label { display:block; width:100%; margin-bottom:5px; }
		.temp-control { display:block; width:100%;  }
	}
}
.two-col-left{ margin-left:20px;}
.two-col-right{ float: right; margin-right:20px;}

.tab-content{
	background-color:#e3e3e3;
	.roundedCorner(0,5,5,5);
	padding:20px;
	margin:10px 0 40px;
	.two-col-left{ margin-left:0px; }
	.two-col-right{ margin-right:0px;}
	h3{ margin:20px 0px 10px;}
}

.call_actions {
	border-top:1px #C3CBD3 solid;
	background-color:#d8e8f6;
	padding: 17px 0 17px;
	.roundedCorner(0,0,5,0);
	//margin:10px -1.5% 0;
	//width:103%;
	margin: 10px 0;
	clear:both;
	position:relative;
	bottom:-20px;
	.two-col-left{ .textFormat(14,#000,bold); width:20%; }
	.two-col-right{ text-align:right; width:75%}
	.button{ margin:0 5px 5px;}
	a{font-weight:bold;margin:0 5px;}
 }

.nowrap { white-space:nowrap; }

.content{
	background-color:#f2f2f2;
	.roundedCorner();
	padding:20px;
	margin:10px;
	.dropShadow(0,0,1,#6c6c6c,0,0,1,#fff);
	&.product { margin-bottom:25px; }
	.third-party {
		padding:10px;
		background-color:#dbdbdb;
		.roundedCorner();
		width:70%;
		margin:0 0 20px 20%;
		.dropShadow(0,0,1,#6c6c6c,0,0,2,#fff);
		&.view{ width:98%; margin:20px auto; }
	}

	.alt-container{
		.third-party{
			width:auto;border-top:0;margin:0;
		}
	}
}


#circuit {
	background:url("../images/port-pipe.jpg") repeat-y center 0;
	.dropShadow(0,0,0,#fff,0,0,0,#fff);

	.content {
		padding:0; clear:both; margin: 30px 10px; text-align: center;background:#ddd;

		&.first, &.last{
			.dropShadow(0,0,1,#6c6c6c,0,0,0,#fff);
			.linearGradient(0, #002e53 , 100%, #005c88);
			.textFormat(12,#fff,bold);
			padding:5px;
			text-align:center;
			z-index:666;
			position:relative;
			&:after { background:0; }
		}
		.call_actions{
			background:0;
			border:0;
			width:107px;
			display:inline-block;
			margin:0;
			padding:0;
			&.first{
				float:left;
				margin-left:20px;
				.insert.first{ position:relative; top:-104px; }
				.insert.last{ position:relative; bottom:-73px;}
			}
			&.last {
				//float:right;
				.delete{ position:relative; top:0px; }
			}
			.button{ visibility:hidden;}
		}
		&:hover { .call_actions{ .button{visibility:visible;} } }

		.two-col-left, .two-col-right {  width:32%; float:none; margin:20px auto; text-align: left; }
	}
}

.port {
	.dropShadow(0,0,2,#6c6c6c,0,0,0,#fff);
	.linearGradient(0, #009db0 , 100%, #00b5cb);

	width:600px;
	padding:5px 0 0;
	height:60px;
	margin:0 auto;
	text-align:center;

	&.empty { width:110px;  .button {  position:relative; top:13px; } }

	&.first{ .roundedCorner(0,0,5,5); }

	&.last { .roundedCorner(5,5,0,0); clear:both;  }

	.button {  position:relative; top:-15px;}

	.temp-control{ color:#fff; .textFormat(12,#fff,bold); position:relative; top:11px;}
	.temp-field {
		width:40px;
		display:inline-block;
		vertical-align: top;
		margin:0 5px 0;
		.temp-label, .temp-control{ .textFormat(12,#fff,bold); display:block; width:100%; text-align:left; }
		.temp-label{ margin:0; color:#006595; }
		.temp-control{ top:0;}
		&.first,&.second, &.last{ width:120px; background:none;}
	}
}

.template{ display:none;}


.nyroModalCont{
	.nyroModalDom {
		padding:0;

		.temp-control input[type='text'], .temp-control input[type='password'], .temp-control select, .temp-control textarea {
			display: block !important;
		}
	}

	.linearGradient(0%,#ddd,10%,#fff,0,#fff);

	.title{
		.linearGradient(0%,#ddd,100%,#fff,0,#fff);
		text-align:center;
		h3{ margin:0; color:#3c404b; font-size: 16pt; padding:15px}

		&.find {
			h3 {background:url("../images/modal-find.png") no-repeat 20px 14px;
			display:block;   }
		}

	}
	.content {
		min-height:370px;
		margin-botom:28px;
		.linearGradient(0%,#004c72,50%,#005f8d,100%,#004c72);

		.roundedCorner(0,0,0,0);
		margin:0;
		fieldset{
			border:0;
			color:#fff;
			#legend-box {

				td{ background:0;
					padding:5px;
					 &.legend-label{.linearGradient(0%,#999,100%,#ccc);strong{color:#fff;}}
					 &.port-active{ div{ background-color: #90EE90} }
					 &.port-used{ div{ background-color: lightBlue} }
					 &.port-reserved{ div{ background-color: #FFE4C4} }
					 &.port-unavailable{ div{ background-color: gray} }
				}
				margin:20px 0 10px;
			 }
			label { color:#fff; }
			table { background:#fff; }
		}
	}
	.dropShadow(0,0,20,#000,0,0,0,#fff);
	border:0;

	z-index:8888;
}

.nyroModalCloseButton{
	width:25px;
	height:25px;
	.dropShadow(0,0,5,#000,0,0,0,#fff);
	.roundedCorner(25,25,25,25);
	background: url("../images/close.png") #000;

	z-index:9999;

}

.nyroModalBg{
	z-index:7777;
}


input[type=text],input[type=password] {   overflow:hidden;
	.roundedCorner(3,3,3,3);
	.linearGradient(0%,#eaecee,100%,#fff,100%,#fff);
	.dropShadow(0,0,1,#eee,0,0,0,#fff);
	&:focus{
		outline: 4px solid #b4fbff;
		//outline: 4px solid #b4fbff;
	}
	&:disabled{
	color:#aaa;
	.linearGradient(0%,#f6f6f6,100%,#fff,100%,#fff);
	}
}

textarea{
	height:100px;

	.roundedCorner(3,3,3,3);
	.linearGradient(0%,#eaecee,100%,#fff,100%,#fff);
	&:focus{
		outline: 4px solid #b4fbff;
		//outline: 4px solid #b4fbff;
	}
	&:disabled{
	color:#aaa;
	.linearGradient(0%,#f6f6f6,100%,#fff,100%,#fff);
	}
}

select {
	//-webkit-appearance: none;
	.roundedCorner(3,3,3,3);
	//background:#eaecee;
	.linearGradient(0%,#eaecee,100%,#fff,100%,#fff);

	color:#585f63;
	font-weight:bold;

	&:focus{
		outline: 4px solid #b4fbff;
		//outline: 4px solid #b4fbff;
	}

	&:disabled{
	color:#aaa;
	background:#f6f6f6;
	.linearGradient(0%,#f6f6f6,100%,#fff,100%,#fff);
	}
}

.subHeader{
height:40px;
	.dropShadow(0,1,0,#fff,0,0,0,#fff);

	background-color:#d6dbe1; border-bottom:1px solid #c2cbd4;

		h2{ .textShadow(0,1,0,#fff); color:#333; display:inline-block; padding:10px 20px 0; font-size: 13pt; }
		.actions{
			float:right; margin:9px 7px 0 0;
			select{ position:relative; bottom:2px; margin-right:3px; min-width:75px; }
		}
}

ul.activity{
	list-style:none;
	margin:0;
	overflow-y:scroll;

	li{
		background-color:#f1f4f7; border-bottom:#C3CBD3 solid 1px;
		.dropShadow(0,1,0,#fff,0,0,0,#fff);
		&.alt{ background-color:#f8fafb;}

		&.customer { .content{ background: url("../images/useractivity-customer-icon.png") 11px 17px no-repeat transparent;   } }
		&.circuit { .content{ background: url("../images/useractivity-circuit-icon.png") 11px 14px no-repeat transparent;   } }
		&.orderForm { .content{ background: url("../images/useractivity-oderform-icon.png") 11px 17px no-repeat transparent;   } }

		.content{
			background: url("../images/useractivity-quotation-icon.png") 11px 12px no-repeat transparent;
			border:0;
			margin:0;
			padding:15px 15px 15px 35px;
			.dropShadow(0,0,0,#fff,0,0,0,#fff);
		}

		span{ display:block;}
	}
}

#graph{
	background-color:transparent;
	outline: 1px solid #C3CBD3;
	overflow-y:hidden;
	height:596px;
	.dropShadow(0, 2, 0, #fff, 0, 0 ,0);
	.two-col-left, .two-col-right{ margin:0;  height:300px; background-color:#fff}
	.two-col-left{ width:40%; }
	.two-col-right{width:59.79%; }
	select{  min-width:120px;}

}


#systemAlert{
	list-style:none;
	padding:0 0 0 0;
	overflow-y:scroll;
	margin-left: 0;
	margin-top: 0;
	li{
		margin-right: 5px;
		padding:15px 0px 15px 10px;
		border-bottom:1px solid #C3CBD3;
		font-size:10pt;
		.bold{ font-weight:bold; float:right; font-size:11pt; margin-right: 5px; }
		&.alt{ background-color:#f8fafb;}
	}
}

#userActions{
	background-color:#f1f4f7;
	height:293px;
	.center{ width:68%; text-align:center;}
	.pagination{ display:inline-block;  margin:10px auto 0;}
}

#chart_div{
	height:292px;
}

ol.number{
	list-style-position:inside;
	color:#fff;
	margin:15px 0 0 15px;
	display:inline-block;
	width:68%;

	li{ background: url("../images/list_image.png") 3px 6px no-repeat transparent; .textFormat(12,#fff,bold); padding:10px;
		.item{ display:inline-block; color:#333; margin-left:5px; cursor:pointer; cursor:hand;  }
		&.active{
			.item{ .textFormat(12,#333,bold); a{ font-weight:bold;} }
			color:#000;
			.linearGradientHorizontal(90%,#fff, 100%,#ccc);
			.dropShadow(0, 0, 5, #eee, 0, 0 ,0);
			.border();
			.roundedCorner();

			/*&:before {
			position:relative;
			display:inline-block;
			left:-21px;
			width:21px;
			height:21px;
			content:"";

			  background: url("../images/list_image.png") 0px 0px no-repeat transparent;
			}*/
		}
	}
}

.informationBox{
	min-width:284px;
	width:30%;
	display:inline-block;
	background:#fff;
	.border();
	.roundedCorner();
	.dropShadow(0, 0, 5, #eee, 0, 0 ,0);
	margin:15px 15px -225px 0;
	top:-232px;
	position:relative;

	.title{
	.textFormat(12,#fff,bold);
		border-bottom:1px solid #C3CBD3;
		h4{ padding-left:10px; color:#999}
		margin-bottom:10px;
	}

	.temp-label { min-width: 100px; margin:0 0 0px 10px; width:30%}
	.temp-control { min-width:140px; width:60%;

	}
	.call_actions{
	background-color:#d5dbe1;
		width:100%;
		margin:0;
		padding:10px 0 0;
		bottom:0;
	}
}

.align-right{ text-align: right; }
.align-justify{ text-align: justify; }

.right{ float:right}
.option-list{width: 45%; display:inline-block; padding: 2px 0;}
.single-option-list{width: 100%; display:inline-block; padding: 2px 0;}
.three-list{width: 33%; display:inline-block; padding: 2px 0;}

.info{
	.linearGradient(0%,#fff,100%,#eee);
	border-bottom:1px solid #C3CBD3;
	border-right:1px solid #C3CBD3;
	display:block;
	padding:20px 20px 10px;
		h3{ color:@brandColor; padding:0; margin:0 0 10px; border:0; font-size:14pt; }
		h2{ color:@brandColor; }
		.temp-label{ color:#333; font-weight:bold; margin:0;}
	&.view{background:none; h2{ color:#666; } }
}


.menu{
	ul{ list-style:none;
		margin:0;
		li{ border-bottom:1px solid #C3CBD3;
			a{
				display:block;
				padding:20px 20px 20px 20px;
				color:#656565;
				font-weight:bold;
				font-size:12pt;

				/*
				&#services, &#expenseBillingSummary { background: url("../images/services-icon.png") 30px 17px no-repeat transparent; }
				&#order { background: url("../images/order-icon.png") 27px 17px no-repeat transparent; }
				&#duplicates { background: url("../images/duplicate-icon.png") 27px 17px no-repeat transparent; }
				&#billing, &#revenueBillingSummary { background: url("../images/billing-icon.png") 27px 17px no-repeat transparent; }
				&#product, &#mutationSummary { background: url("../images/product-icon.png") 27px 17px no-repeat transparent; }
				&#payment, &#taxSummary { background: url("../images/payment-icon.png") 20px 17px no-repeat transparent; }
				&#handover { background: url("../images/handover-icon.png") 27px 17px no-repeat transparent; }
				&#termination { background: url("../images/termination-icon.png") 30px 17px no-repeat transparent; }
				&#log { background: url("../images/log-icon.png") 30px 17px no-repeat transparent; }
				&#quotation { background: url("../images/quotation-icon.png") 30px 17px no-repeat transparent; }
				&#price { background: url("../images/billing-icon.png") 27px 17px no-repeat transparent; }
				&#customer { background: url("../images/customer-icon.png") 27px 17px no-repeat transparent; }
				&#invoice { background: url("../images/billing-icon.png") 27px 17px no-repeat transparent; }
				&#certificates { background: url("../images/certificates-icon.png") 27px 17px no-repeat transparent; }
				&#revenueOutstandingBalance { background: url("../images/balance-icon.png") 27px 17px no-repeat transparent; }
				&#expenseOutstandingBalance { background: url("../images/balance-icon.png") 27px 17px no-repeat transparent; }
				&#sap { background: url("../images/sap-icon.png") 24px 22px no-repeat transparent; }
				&#salesTarget { background: url("../images/sales-icon.png") 27px 17px no-repeat transparent; }
				&#bandwidthTarget { background: url("../images/bandwidth-icon.png") 27px 17px no-repeat transparent; }
				&#dimensions { background: url("../images/dimensions-icon.png") 27px 17px no-repeat transparent; }
				&#dimension-groups { background: url("../images/handover-icon.png") 27px 17px no-repeat transparent; }
				&#bandwidth-aliases { background: url("../images/dimensions-bandwidth-aliases.png") 27px 17px no-repeat transparent; }
				*/

				&:hover{
					text-decoration:none;
					background-color:#f4f7fa;
					color:#888;
					border-right:1px solid #C3CBD3;
				}
			}

			&.active{
				a{
				color:@brandColor;
				background:#fff;
				positions:relative;
				&:hover{border-right:none;}
				z-index:1;

				/*
					&#services, &#expenseSummary, &#purchase-request { background: url("../images/services-active-icon.png") 30px 17px no-repeat #fff; }
					&#order { background: url("../images/order-active-icon.png") 27px 17px no-repeat #fff; }
					&#duplicates { background: url("../images/duplicate-icon-active.png") 27px 17px no-repeat #fff; }
					&#billing, &#billingSummary { background: url("../images/billing-active-icon.png") 27px 17px no-repeat #fff; }
					&#product, &#mutationSummary { background: url("../images/product-active-icon.png") 27px 17px no-repeat #fff; }
					&#payment, &#taxSummary { background: url("../images/payment-active-icon.png") 20px 17px no-repeat #fff; }
					&#handover { background: url("../images/handover-active-icon.png") 27px 17px no-repeat #fff; }
					&#termination { background: url("../images/termination-active-icon.png") 30px 17px no-repeat #fff; }
					&#log { background: url("../images/log-active-icon.png") 30px 17px no-repeat #fff; }
					&#quotation { background: url("../images/quotation-active-icon.png") 30px 17px no-repeat #fff; }
					&#price { background: url("../images/billing-active-icon.png") 27px 17px no-repeat #fff; }
					&#customer { background: url("../images/customer-active-icon.png") 27px 17px no-repeat #fff; }
					&#invoice { background: url("../images/billing-active-icon.png") 27px 17px no-repeat #fff; }
					&#certificates{ background: url("../images/certificates-active-icon.png") 27px 17px no-repeat #fff; }
					&#outstandingBalance { background: url("../images/balance-active-icon.png") 27px 17px no-repeat #fff; }
					&#sap { background: url("../images/sap-active-icon.png") 24px 22px no-repeat #fff; }
					&#salesTarget { background: url("../images/sales-active-icon.png") 27px 17px no-repeat #fff; }
					&#bandwidthTarget { background: url("../images/bandwidth-active-icon.png") 27px 17px no-repeat #fff; }
					&#dimensions { background: url("../images/dimensions-active-icon.png") 27px 17px no-repeat #fff; }
					&#dimension-groups { background: url("../images/handover-active-icon.png") 27px 17px no-repeat #fff; }
					&#bandwidth-aliases { background: url("../images/dimensions-active-bandwidth-aliases.png") 27px 17px no-repeat transparent; }
					*/

				}
			}
		}

	}
 }

.hint{font-size:11px;color:#999;font-style:italic;}


.comment{
	padding:25px 20px 0;
	.temp-control{width:77%}

}

ol.end-customer-collection {
	margin-left: 20px;
	li {
		font-size: 11px;
		margin-bottom: 5px;
		u {
			font-size: 11px;
		}
	}
}

table.plain {
	border: none;
	border-collapse: collapse;
	width: auto;

	tr { border: none; }
	td {
		border: none; vertical-align: middle; font-size: 12px;
		span, div, input, select, textarea { font-size: 12px; }
	}
}

.thicker { padding: 5px !important; }

.minimize { float: right; margin-right: 5px; margin-top: 5px; img { width: 16px; height: 16px; } }
.maximize { }
.red { color: red; }
.yellow-back { background-color: yellow; }

.feed-alert {
	right: 0;
	bottom: 0;
	position: fixed;
	width: 250px;
    z-index: 1000;
	padding: 5px 0 5px 25px;
	color: white; background: #C50102 url(../images/alert.png) no-repeat 3px 3px;
}

.dismiss-btn { float: right; margin-right: 5px; margin-top: 10px; }
#systemAlert .dismiss-btn { float: right; margin-right: 5px; margin-top: 0; }

.hidden {display: none}

.pagerForm {
	width: 65%;
	.page-selector { text-decoration: none !important; }
	.page-selector.selected { color: #333; }
	.page-size-container { float: right; margin-top: 5px; }
}

input[type='submit'] { padding: 5px !important; }
// #context-area input[type='submit'] { padding: 5px !important; }

a.secondary { padding: 5px !important; }

#console {
	font-family: 'Lucida Console', 'Courier New', Courier;
	color: white;
	background-color: black;
	margin: 20px;
	padding: 10px;
	height: 400px;
	overflow-y: auto;
}
#console div {
	font-family: inherit !important;
	color: inherit !important;
}

.listing { margin-bottom: 3px; }
.new-window { cursor: pointer; }
.temp-field { margin-left: 15px; }
.pl { padding-left: 15px; }
.ml { margin-left: 10px; }

table tr:hover td { background-color: #eee; }

.autocomplete { background: url(../images/autocomplete.png) right no-repeat !important; }

.link {
	background: transparent;
	border: none;
	color: rgb(0, 101, 149);
}
.link:hover {
	cursor: pointer;
	text-decoration: underline;
}
.errorContainer {
	background: #ffb2ae;
	padding: 5px 5px 5px 5px;
	border-radius: 0.5em;
	font-weight: 600;
	width: 100%;
}

.flex {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
}
.flex-middle {
	justify-content: center;
}
.flex-center {
	justify-content: center;
	align-items: center;
}

.feedback-count-con {
	overflow: hidden;
	padding: 0 10px;
	margin-bottom:20px;
}
.feedback-cols-3-box,
.feedback-cols-2-box,
.feedback-cols-1-panel{
	width:33.33%;
	float:left;
	padding:5px;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.feedback-cols-3-box-content,
.feedback-cols-2-box-content{
	background:#4AA1AD;
	padding:12px;
}
.box-shadow{
	-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow:1px 1px 3px rgba(0, 0, 0, 0.2);
}
#content #main .feedback-count-con h4,
#content #main .feedback-count-con h2,
#content #main .feedback-count-con h2 span{
	color: #ffffff;
	padding:0;
}
#content #main .feedback-count-con h4{
	margin: 0 0 10px;
}
#content #main .feedback-count-con h2,
.count-complaint{
	margin: 0 0 7px;
}
#content #main .feedback-count-con h4{
	font-size: 14px;
	font-weight:normal;
}
#content #main .feedback-count-con h2,
.count-complaint{
	font-size: 38px;
	font-weight:bold;
}
#content #main .feedback-count-con h2 span,
.count-complaint span{
	font-size: 24px;
	margin-left: 5px;
}
.red-bg{
	background:#d86463;
}
.orange-bg{
	background:#F49D31;
}
.feedback-cols-2-box{
	width:50%;
}
.feedback-cols-2-box-content{
	background:#f0f0f0;
}
#content #main .feedback-count-con h3{
	margin:0 0 10px;
	font-size:19px;
	border:none;
	padding:0;
}
#content #main .feedback-count-con .feedback-cols-2-box h3{
	color: #D86463;
}
#content #main .feedback-count-con .feedback-cols-2-box:last-child h3{
	color: #4AA1AD;
}
#content #main .feedback-count-con .feedback-cols-2-box .feedback-cols-2-box-content{
	border-top: 4px solid #d86463;
}
#content #main .feedback-count-con .feedback-cols-2-box:last-child .feedback-cols-2-box-content{
	border-color:#4AA1AD;
}
.feedback-count-con ol{
	padding-left:20px;
}
.feedback-count-con ol li{
	font-weight:bold;
	padding-left:3px;
	font-size:14px;
	margin-bottom:4px;
}
.feedback-count-con ol li span{
	font-weight:normal;
}
.clearfix:after{
	content:"";
	display:table;
	clear:both;
}
#content #main .feedback-count-con .feedback-cols-1 h3{
	background:#8357AB;
	text-align:center;
	color:#ffffff;
	padding:12px;
	margin:0;
}
#content #main .feedback-count-con .feedback-cols-1.feedback-partners-count h3{
	background: #8d4dc6;
}
.feedback-cols-1-box{
	padding:5px;
}
#content #main .feedback-count-con .feedback-cols-1-panel h4{
	color: #333333;
	font-weight:bold;
}
#content #main .feedback-count-con .feedback-cols-1-panel{
	background:#f0f0f0;
	padding:15px 12px;
}
#content #main .feedback-count-con .feedback-cols-1-panel + .feedback-cols-1-panel{
	border-left:1px solid #cccccc;
}

.star-box{
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 20px;
	cursor: pointer;
}

.star-box::before{
	content: "\f006";
}
.star-box.active::before{
	content: "\f005";
	color: #FFA500;
}
.form-feedback ol{
	margin-bottom: 20px;
}
.form-feedback ol li{
	color: #505458;
	font-size: 13px;
	margin-bottom: 5px;
}
.checkbox-con{
	margin-bottom: 10px;
}
.checkbox-con label{
	font-weight: normal;
	font-size: 13px;
}
.checkbox-con input{
	margin: 0 3px 0 0;
}
.form-feedback button.btn{
	border-color: #cccccc !important;
}
.inline_checkboxs > .option-list {
	margin: 0 5px;
	width: auto;
}