/*---- Fonts ----*/
@font-face {
  font-family: 'fontello';
  src: url("../fonts/fontello.eot");
  src: 	local("#"),
		url("../fonts/fontello.eot?#iefix") format('embedded-opentype'),
		url("../fonts/fontello.woff") format('woff'),
		url("../fonts/fontello.ttf") format('truetype'),
		url("../fonts/fontello.svg#fontello") format('svg');
  font-weight: normal;
  font-style: normal;
}

@import "http://fonts.googleapis.com/css?family=Open+Sans:400,700";

/*---- Includes ----*/

/* master/reset */ @import "reset.less";
/* master/html5 */ @import "html5.less";

/*---- Variables ----*/
@color-text-active: #001458;
@color-text-subactive: #ff8a00;
@color-text-normal: #222;
@color-text-pri: #666;
@color-text-sec: #777;
@color-border-dark: #c1c1c1;
@color-border-light: #e1e1e1;
@color-border-thin: #ebebeb;
@color-border-highlight: #4d90fe;

/*---- Mixins ----*/
.rounded-corners(@radius: 5px) {
	border-radius: @radius;
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
}
.text-shadow(@width: 1px, @blur: 0, @color: #222) {
	text-shadow: @width @width @blur @color;
}
.box-shadow(@width: 1px, @blur: 0, @color: #222) {
	box-shadow: @width @width @blur @color;
	-webkit-box-shadow: @width @width @blur @color;
	-moz-box-shadow: @width @width @blur @color;
}

/*---- CSS ----*/

* {
	box-sizing: border-box;
}

body {
	background: #fafafa;
}

#wrap {
	width: 96%;
	margin: 0 auto;
}

#wrap-header {
	background: url(../images/bg-header.png);
}

.icon {font-family: 'fontello'; font-weight: normal;}

header {
	width: 96%;
	margin: 0 auto 10px;
	height: 61px;
	.logo {
		width: 50%;
		float: left;
		h1 a {
			display: block;
			float: left;
			width: 130px;
			height: 60px;
			background: url(../images/logo-cloudx.png) left center no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
	}
	.btn-sync {
		float: left;
		margin: 20px 10px;
		font-size: 1em;
		color: #75a7f3;
		&:hover, &:focus {
			color: #fff;
		}
	}
	.nav-settings {
		width: 50%;
		float: left;
		ul {
			float: right;
			li {
				float: left;
				a {
					display: block;
					float: left;
					line-height: 60px;
					color: #fff;
					font-size: 0.85em;
					color: #bbd6ff;
					.text-shadow();
					&:hover, &:focus {
						color: #fff;
					}
				}
			}
		}
	}
}

#notification {
	.message-notification {
		min-height: 24px;
		padding: 4px 10px;
		margin-bottom: 10px;
		overflow: hidden;
		p {
			float: left;
			font-size: 0.825em;
			.icon-symbol {
				font-size: 1.2em;
			}
		}
	}
	.message-warning {
		background: #fffcd5 url(../images/bg-notify-warning.png) left bottom repeat-x;
		.rounded-corners();
		p {
			color: #ff8400;
			line-height: 24px;
		}
	}
	.message-success {
		background: url(../images/bg-notify-warning.png);
		.rounded-corners();
		p {
			color: #28ac18;
			line-height: 24px;
		}
	}
	.btn-close {
		color: red;
		float: right;
	}
}

#content {
	margin-bottom: 10px;
	overflow: hidden;
	.nav-main {
		background: #fafafa url(../images/bg-nav.png);
		overflow: hidden;
		border: 1px solid #ccc;
		margin-bottom: 10px;
		> ul > li > a {
			display: block;
			float: left;
			width: 10%;
			background: #fafafa url(../images/bg-nav.png);
			border-right: 1px solid #ccc;
			border-collapse: collapse;
			padding: 4px 12px 4px 6px;
			font-size: 0.825em;
			color: #001a42;
			font-weight: bold;
			text-align: center;
			.text-shadow(#fff);

			span {
				display: inline-block;
				width: 16px;
				margin: 0 5px;
				text-align: center;
				font-weight: normal;
			}
			&:hover, &:focus {
				color: #004095;
			}
		}
		.nav-main-sub {
			display: none;
		}
	}
	.main-content {
		padding: 1% 1% 1% 1%;
		background: #fafafa;
		h1, h2, h3, h4, h5, h6, p, li, strong, em, th, td, a, legend, label, input, textarea, select, dfn {font-family: 'Open Sans', sans-serif;}
		h1, h2, h3, h4, h5, h6, p, ul, ol {margin-bottom: 10px;}
		h1, h2, h3 {color: #004095;}
		h4, h5, h6 {color: #777;}
		h1 {font-size: 2em;}
		h2 {font-size: 1.75em;}
		h3 {font-size: 1.50em;}
		h4 {font-size: 1.25em;}
		h5 {font-size: 1em;}
		h6 {font-size: 0.825em;}
		p, li {font-size: 0.825em; color: #222;}
		dfn {font-style: normal; color: #777;}
		legend {font-size: 1.25em; font-weight: bold; margin-bottom: 10px;}
		.page-heading {
			margin-bottom: 10px;
			position: relative;
			h1 {font-size: 1.25em; margin-bottom: 0!important;}
			p {margin-bottom: 0!important;}
			.action-items {
				position: absolute;
				top: 20px;
				right: 20px;
			}
		}
		.page-subheading {
			padding: 10px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			margin-bottom: 10px;
			background: #fff;
			width: 101%;
			position: relative;
			left: -19px;
			top: 0;
			h4 {margin-bottom: 0;}
			.action-items {
				position: absolute;
				top: 9px;
				right: 20px;
			}
		}
		&.full-width {
			width: 94%;
			padding: 1% 2% 1% 2%!important;
		}
	}
	.login-content {
		width: 320px;
		margin: 100px auto 0;
		.logo {
			text-align: center;
			margin-bottom: 10px;
		}
		.login-textbox {
			position: relative;
			margin-bottom: 10px;
			label {
				position: absolute;
				top: 6px;
				left: 3%;
				font-size: 0.825em;
				color: #a1a1a1;
			}
			input#user_email {
				background: #fafafa;
				width: 96%;
				height: 30px;
				padding: 2px 2%;
				border: 1px solid #fff;
				.rounded-corners();
				.box-shadow(2px, 2px, #222);
			}
			input#user_password {
				background: #fafafa;
				width: 59%;
				height: 30px;
				padding: 2px 2%;
				border: 1px solid #fff;
				.rounded-corners();
				.box-shadow(2px, 2px, #222);
			}
			input#login-submit {
				background: url(../images/btn-login.png) no-repeat;
				width: 102px;
				height: 38px;
				border: none;
				margin-left: 10px;
				cursor: pointer;
			}
		}
	}
}

.page-table {
	margin-bottom: 10px;
	overflow: auto;
	.large-width {
		width: 3000px;
		height: 400px;
	}
	table {
		width: 100%;
		border: 1px solid #ccc;
		border-collapse: collapse;
	}
	tr {
		background: #fcfcfc url(../images/bg-block.png) left bottom repeat-x;
	}
	td, th {
		padding: 5px;
		font-size: 0.75em;
		border: 1px solid #ccc;
		h1, h2, h3, h4, h5, h6, p {
			margin: 0!important;
		}
	}
	th {
		background-color: #004095;
		color: #fff;
	}
}

.page-smarttable {
	margin-bottom: 10px;
	table {
		width: 100%;
		border-collapse: collapse;
	}
	td, th {
		padding: 5px;
		font-size: 0.75em;
		border-bottom: 1px solid #ccc;
		h1, h2, h3, h4, h5, h6, p {
			margin: 0!important;
		}
	}
	.data-filter-container {
		background: #fff;
		overflow: hidden;
		margin-bottom: 10px;
		border: 1px solid #ccc;
		border-bottom-width: 2px;
		.rounded-corners();
		.data-filter-field {
			float: left;
			width: 23%;
			padding: 1%;
			label {
				display: block;
			}
			input, select {
				width: 97%;
				padding: 1%;
				border: 1px solid #ccc;
			}
		}
		.data-filter-submit {
			width: 14%;
			padding: 1%;
		}
	}
}

.page-smartbox {
	margin-bottom: 10px;
	.box-block {
		margin-bottom: 10px;
		background: #fff;
		border: 1px solid #ccc;
		.rounded-corners();
	}
	hgroup {
		padding: 10px;
		border-bottom: 1px solid #ccc;
		overflow: hidden;
		position: relative;
		h2 {
			float: left;
			margin-bottom: 0!important;
			span {color: #777; font-size: 0.50em; text-style: italic; margin-left: 10px; font-weight: normal;}
		}
		.action-items {
			position: absolute;
			top: 10px;
			right: 20px;
		}
	}
	.box-columns {
		padding: 10px;
		overflow: hidden;
		.box-col {
			float: left;
			width: 24%;
		}
	}
}

.page-billtable {
	margin-bottom: 10px;
	table {
		width: 100%;
		border: 1px solid #222;
		border-collapse: collapse;
	}
	td, th {
		background: #fff;
		font-size: 0.90em;
		border: 1px solid #ccc;
		h1, h2, h3, h4, h5, h6, p {
			margin: 0!important;
		}
	}
	th {
		background-color: #004095;
		color: #fff;
	}
	.sub-table td {padding: 5px;}
}

.page-form {
	margin-bottom: 10px;
	fieldset {
		margin-bottom: 10px;
	}
	.list-products {
		.block-product {
			background: #fff;
			padding: 20px 20px 0 20px;
			border: 1px solid #ccc;
			margin-bottom: 10px;
		}
	}
	.list-add-action {
		padding: 10px;
		a {
			display: block;
			text-align: center;
			font-size: 0.75em;
			color: #777;
			text-transform: uppercase;
			&.remove-block {
				color: red;
			}
		}
	}
	.form-textbox {
		float: left;
		width: 50%;
		position: relative;
		padding: 0 2% 10px 0;
		input {
			width: 100%;
			height: 30px;
			border: 1px solid @color-border-light;
			padding: 2px 3%;
			font-size: 0.80em;
			color: @color-text-sec;
			.rounded-corners(4px);
			&:focus {
				border-color: @color-border-highlight;
			}
			&[readonly] {
				background: #fafafa;
				border-color: #f1f1f1;
			}
		}
		label {
			color: fade(@color-text-normal, 60%);
			font-size: 0.80em;
			cursor: text;
			margin-bottom: 5px;
			font-weight: bold;
			display: block;
		}
		.delete-btn {position: absolute; top: 22px; right: 10px;}
		.icon-loading {position: absolute; top: 35px; right: 20px;}
	}
	.form-textbox-full {
		width: 100%!important;
		input {
			width: 100%;
			padding: 2px 2%;
		}
	}
	.form-textbox-half {
		width: 25%;
		input {
			width: 100%;
			padding: 2px 2%;
		}
	}
	.form-dynablock {
		position: relative;
		margin: 10px;
		background: url(../images/bg-block.png) left bottom repeat-x;
		overflow: hidden;
		padding: 2px 2px 2px 10px;
		border: 1px solid #ccc;
		width: 20%;
		float: left;
		input {
			height: 30px;
			float: left;
			border: 1px solid @color-border-light;
			padding: 6px 3%;
			font-size: 0.80em;
			color: @color-text-sec;
			margin: 0 10px 0 0;
		}
		label {
			display: block;
			float: left;
			color: fade(@color-text-normal, 60%);
			font-size: 1em;
			cursor: text;
			margin-bottom: 5px;
			margin-top: 4px;
			text-align: center;
			cursor: pointer;
			font-weight: bold;
		}
		.dyna-action {
			overflow: hidden;
			a {
				display: block;
				float: left;
				width: 16px;
				height: 16px;
				margin: 7px 10px 0 10px;
				overflow: hidden;
				text-indent: -9999px;
			}
			.dyna-action-add {
				background: url(../images/icon-add.png) no-repeat;
			}
			.dyna-action-delete {
				background: url(../images/icon-delete.png) no-repeat;
			}
		}
	}
	.form-textarea {
		float: left;
		width: 47%;
		position: relative;
		margin: 0 2% 10px 0;
		textarea {
			width: 93%;
			height: 200px;
			border: 1px solid @color-border-light;
			padding: 2px 3%;
			font-size: 0.80em;
			color: @color-text-sec;
			&:focus {
				border-color: @color-border-highlight;
			}
		}
		label {
			color: fade(@color-text-normal, 60%);
			font-size: 0.80em;
			cursor: text;
			margin-bottom: 5px;
			font-weight: bold;
		}
	}
	.form-dropdown {
		float: left;
		width: 50%;
		position: relative;
		padding: 0 2% 10px 0;
		min-height: 69px;
		select {
			width: 99%;
			height: 36px;
			border: 1px solid @color-border-light;
			padding: 0 0 0 2%;
			font-size: 0.80em;
			color: @color-text-sec;
			&:focus {
				border-color: @color-border-highlight;
			}
		}
		label {
			color: fade(@color-text-normal, 60%);
			font-size: 0.80em;
			cursor: text;
			margin-bottom: 5px;
			font-weight: bold;
		}
		.LV_validation_message {
			margin-top: 0;
		}
	}
	.form-dropdown-raw {
		float: left;
		width: 50%;
		position: relative;
		padding: 0 2% 10px 0;
		select {
			width: 99%;
			height: 36px;
			border: 1px solid @color-border-light;
			padding: 0 0 0 2%;
			font-size: 0.80em;
			color: @color-text-sec;
			&:focus {
				border-color: @color-border-highlight;
			}
		}
		label {
			color: fade(@color-text-normal, 60%);
			font-size: 0.80em;
			cursor: text;
			margin-bottom: 5px;
			font-weight: bold;
		}
		.LV_validation_message {
			margin-top: 0;
		}
	}
	.form-action {
		text-align: center;
	}
}

/* Live Validation */
.LV_validation_message{display:block;font-weight:normal;font-size:0.75em;text-align:right;margin:-31px 5px 0 0;padding:2px 4px;float:right;position:relative;z-index:999;}
.LV_valid {color:#00CC00;display:none!important;background:#0c0;}
.LV_invalid {color:#c00;}
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active {border: 1px solid #00CC00!important;}
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active {border: 1px solid #CC0000!important;}

.act-btn {
	display: inline-block;
	padding: 7px 11px;
	background: #004095 repeat-x;
	border: 1px solid #001A42;
	color: #fff;
	font-size: 0.875em;
	line-height: 1em;
	font-weight: bold;
	cursor: pointer;
	.rounded-corners(4px);
	&:hover, &:focus, &:active {
		background-color: lighten(#004095, 10%);
	}
	&:active {
		position: relative;
		left: 1px;
		top: 1px;
	}
}

.sec-btn {
	display: inline-block;
	padding: 7px 11px;
	background: #f1f1f1 repeat-x;
	border: 1px solid #ccc;
	color: #777;
	font-size: 0.875em;
	line-height: 1em;
	cursor: pointer;
	.rounded-corners(4px);
	.text-shadow(1px, 0, #fff);
	&:hover, &:focus, &:active {
		border: 1px solid #222;
	}
	&:active {
		position: relative;
		left: 1px;
		top: 1px;
	}
}

.align-center {text-align: center;}
.align-right {text-align: right;}
.no-visibility {display: none;}
.filter-form-block {float: left; margin: 0 10px 0 0;}
.icon-loading {display: none;}

/* jQuery UI Hack */
.ui-widget {font-size: 0.75em!important;}


.list-transactions {
	* { box-sizing: border-box; }
	.item-transaction {
		overflow: hidden;
		background: #fff;
		border: 1px solid #e1e1e1;
		margin: 20px 0;
		.row {
			border-bottom: 1px solid #efefef;
			overflow: hidden;
			> div {
				float: left;
				border-right: 1px solid #efefef;
				padding: 5px 10px;
				min-height: 82px;
				&:last-child, &:last-child { border: none; }
			}
			.block-section-fifth {
				width: 20%;
			}
			.block-section-fourth {
				width: 25%;
			}
			.block-section-third {
				width: 33%;
			}
			.block-section-half {
				width: 50%;
			}
			.block-section-threefourth {
				width: 75%;
			}
			.block-section-full {
				width: 100%;
			}
			.heading {
				font-size: 12px!important;
				color: #ccc!important;
				text-transform: uppercase;
				font-weight: normal;
				margin-bottom: 0!important;
			}
			.content {
				margin-bottom: 0!important;
			}
			.supertable {
				th {
					font-size: 12px!important;
					color: #ccc!important;
					text-transform: uppercase;
					font-weight: normal;
					margin-bottom: 0!important;
					border-bottom: 1px solid #efefef!important;
				}
				td {
					border-bottom: 1px solid #efefef;
				}
				tr:last-child td {
					border-bottom: none;
				}
			}
			.sec-btn {
				display: block;
				text-align: center;
				margin: 21px;
				text-transform: uppercase;
				background: transparent;
				&:hover {border-color: #c1c1c1;}
			}
		}
	}
}