// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@import "compass/css3";

$gray-dark: #e5e5e5;
$gray-light: #fafafa;
$dark: #333;
$blue: #3498db;
$green: #7cb342;
$orange: #ffa726;
$red: #f06748;

.table-wrapper {
  width: 600px; 
}

.table {
	@include box-shadow(none);
	font-family: Arial, Helvetica, sans-serif;
	border: none;
	border-bottom: 1px solid $gray-dark;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;

	tr {
		position: relative;
		white-space:nowrap;

		th, td {
			width: auto;
			margin: 0;
			text-align: center;
			height: 100%;
			font-size: 13px;
			line-height: normal;
			vertical-align: top;

			&.l-align-left {
				text-align: left;
			}

			&.l-align-right {
				text-align: right;
			}

			&.l-multiline {
				white-space: normal;
			}
		}

		td.item-options,
		th.item-options {
			float: none;
			min-height: none;

			a {
				@include transition(color .1s ease-in-out);
				color: #aaa;
				cursor: pointer;
				display: inline-block;
				margin-left: 2px;
				text-decoration: none;

				&:first-child {
					margin-left: 0;
				}

				&:hover {
					color: #666;
				}

				&:active {
					color: #333;
				}
			}
		}

		td.item-title,
		th.item-title {
			float: none;
			min-height: initial;
			min-width: 300px;
			text-align: left;
		}

		th {
			@include transition(background-color .1s ease-in-out);
			background-color: darken($gray-light, 4%);
			border-bottom: 1px solid $gray-dark;
			font-weight: 500;
			color: #333;
			line-height: 12px;
			vertical-align: middle;
			padding: 10px;

			&:hover {
				cursor: default;
			}

			.th-subtitle {
				font-size: 10px;
				font-weight: 400;
				display: block;
				margin-top: 2px;
			}

			&.is-sortable {
				.sort-by {
					@include transition(transform .2s ease);
					display: none;
					text-align: center;
					cursor: pointer;

					.ty-icon {
						line-height: 6px;
						float: left;
					}
				}

				&.asc,
				&.desc {
					background-color: darken($gray-light, 7%);

					.sort-by {
						display: inline-block;
					}
				}

				&:hover {
					background-color: darken($gray-light, 7%);
					cursor: pointer;
				}

				&:active {
					background-color: darken($gray-light, 10%);
					cursor: pointer;
				}
			}
		}

		td {
			@include transition(background-color .05s ease-in-out);
			background-color: white;
			border-top: 1px dashed $gray-dark;
			padding: 7px 10px;
			color: #333;

			.bar-chart {
				display: inline-block;
				min-width: 80px;
				height: 12px;
				margin: 0 3px -2px 0;
			}

			.trend {
				vertical-align: middle;
				color: #666;
				width: 20px;
				min-height: 1px;
				display: inline-block;
			}
		}

		td.is-disabled,
		&.is-disabled td {
			color: #bbb;
			cursor: default;
		}

		/* --------------- Nested table --------------- */

		@at-root {
			.table tr {

				// apply background image to first column

				&[class*="lvl-"] td:first-child {
					background-image: url(../../img/sprite-table.png);
					background-repeat: no-repeat;
				}
				// no background image for level 0

				&.lvl-0 td:first-child {
					background-image: none;
				}

				// any row on level 1

				&.lvl-1 td:first-child {
					padding-left: 25px;
					background-position: 15px 0;
				}

				// last row on level 1

				&.lvl-1.is-last td:first-child {
					background-position: 15px -100px;
				}

				// any row on level 2

				&.lvl-2 td:first-child {
					padding-left: 50px;
					background-position: 30px 0;
				}

				// last row on level 2

				&.lvl-2.is-last td:first-child {
					background-position: 30px -100px;
				}

				// any row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1 td:first-child {
					padding-left: 50px;
					background-position: 15px -200px;
				}

				// last row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1.is-last td:first-child {
					background-position: 15px -300px;
				}
			}

			.table.table-selectable tr {

				// apply background image to second column

				&[class*="lvl-"] td:first-child + td {
					background-image: url(../../img/sprite-table.png);
					background-repeat: no-repeat;
				}

				// no background image for checkbox column and for level-0

				&.lvl-0 td:first-child,
				&.lvl-0 td:first-child + td,
				&[class*="lvl-"] td:first-child {
					background-image: none;
				}

				// original padding for checkbox column

				&.lvl-1 td:first-child,
				&.lvl-2 td:first-child {
					padding-left: 10px;
				}

				// any row on level 1

				&.lvl-1 td:first-child + td {
					padding-left: 25px;
					background-position: 15px 0;
				}

				// last row on level 1

				&.lvl-1.is-last td:first-child + td {
					background-position: 15px -100px;
				}

				// any row on level 2

				&.lvl-2 td:first-child + td {
					padding-left: 50px;
					background-position: 30px 0;
				}

				// last row on level 2

				&.lvl-2.is-last td:first-child + td {
					background-position: 30px -100px;
				}

				// any row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1 td:first-child + td {
					padding-left: 50px;
					background-position: 15px -200px;
				}

				// last row on level 2, if there is level 1 after

				&.lvl-2.lvl-2-1.is-last td:first-child + td {
					background-position: 15px -300px;
				}
			}
		}

		.toggle-expand {
			float: left;
			margin-left: -4px;
			padding: 0px;

			.ty-icon {
				@include transition(all .1s ease-in-out);
				color: #999;
				padding: 2px 3px;
				text-align: center;
				display: block;

				&:hover {
					color: #666;
				}

				&:active {
					color: $dark;
				}
			}
		}
	}

	tbody {
		tr:first-child {
			td {
				border: none;
			}
		}
	}

	tfoot {
		td,
		td:hover {
			@include transition(background-color .1s ease-in-out);
			background-color: darken($gray-light, 4%);
			border-top: 1px solid $gray-dark;
			font-weight: 500;
		}
	}

	/* -------------- Striped table --------------- */

	&.table-striped {
		tr:nth-child(even) {
			td {
				background-color: $gray-light;
			}
		}
	}

	/* -------------- Bordered table -------------- */

	&.table-bordered {
		@include border-radius (3px);
		border: 1px solid $gray-dark;
	}

	&, &.table-striped {
		tr:hover {
			td {
				background-color: lighten($blue, 43%);
			}
		}

		tr.is-selected {
			td {
				background-color: lighten($blue, 40%);
			}
		}
	}

	/* ------------- Selectable table ------------- */

	&.table-selectable {
		th:first-child,
		td:first-child {
			width: 25px;
			min-width: 25px;
			padding-right: 0;

			input[type="checkbox"] {
				@include box-shadow(none);
				@include border-radius(0);
				float: left;
				margin-top: 1px;
				background: none;
				padding: 0;
				min-height: initial;
			}
		}
	}
}

html {
  background: #fff;
  text-align: center;
}

/*
* ---------------------------------------------
* 			  Content positioning
* ---------------------------------------------
*/

.l-left {
	float: left;
}

.l-right {
	float: right;
}

/*
* ---------------------------------------------
* 				Content aligning
* ---------------------------------------------
*/

.l-align-left {
	text-align: left;
}

.l-align-center {
	text-align: center;
}

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

/*
* ---------------------------------------------
* 				    Visibility
* ---------------------------------------------
*/

.is-hidden {
    display: none !important;
}

.is-visible {
    display: initial !important;
}