/**
 * @file: collection-renderer.table-view.css
 * @description: Collection renderer: table view
 */

.cr-table-view-wrapper {
	max-width: 100%;
	overflow: auto;
	clear: both;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
    -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
    -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
    -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-repeat: no-repeat;
	background-color: #fff;
	background-size: 1em 100%, 1em 100%, .25em 100%, .25em 100%;
	background-attachment: local, local, scroll, scroll; /** Opera doesn't support this in the shorthand */
}

.cr-table-view-hasGreyBackground {
    background-image: -webkit-linear-gradient(left, rgba(242, 242, 242, 1), rgba(242, 242, 242, 0)),
    -webkit-linear-gradient(right, rgba(242, 242, 242, 1), rgba(242, 242, 242, 0)),
    -webkit-linear-gradient(left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
    -webkit-linear-gradient(right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(to right, rgba(242, 242, 242, 1), rgba(242, 242, 242, 0)),
    linear-gradient(to left, rgba(242, 242, 242, 1), rgba(242, 242, 242, 0)),
    linear-gradient(to right, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
    background-color: #f2f2f2;
}

/**
 * Table view defaults
 */

.cr-table-view {
	min-width: 100%; /** Fill up the empty space next to the table */
	table-layout: fixed; /** Table renders faster in browser when layout is fixed. Column with is set by content in first row */
	border-collapse: collapse;
	border-spacing: 0;
}

.cr-table-view caption {
	padding-left: 10px;
}

.cr-table-view--hasDataSummary caption {
	font-size: 20px;
	font-weight: normal;
}

.cr-table-view__row .exception-icon{
    margin-left: 2px;
}

.cr-table-view__row--inactive,
.cr-table-view__row--inactive a {
	font-style: italic;
	color: #afafaf;
}

.cr-table-view__row--inactive a:hover {
	color: #4091bf;
}

.cr-table-view__row--selected {
	background-color: #fff3c2;
}

.cr-table-view th, .cr-table-view td {
	padding: 0.75em 10px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.cr-table-view td {
	overflow: hidden; /** In case of nonbreakable/wrappable content, the content must not overlap the next cell */
}

@media screen and (max-height: 700px) {
	body:not(#empty) .cr-table-view th,
    body:not(#empty) .cr-table-view tbody td {
		padding-top: .5em;
		padding-bottom: .5em;
	}
}

/**
 * Table head
 * Contains table columns and many optional controls (fe. filters, search bar).
 * The controls have their own section in this file.
 */

.cr-table-view thead td,
.cr-table-view thead th {
	background-color: rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.cr-table-view thead th {
    font-size: 12px;
    text-align: left;
}

.cr-table-view thead td {
    min-height: 16px;
    border-bottom: 0;
}

.cr-table-view .tv-title,
.cr-table-view .tv-title-link {
    color: #595959;
	text-decoration: none;
}

.cr-table-view .tv-title-link:hover,
.cr-table-view thead .tv-col-sorted .tv-title-link {
    color: #222;
    text-decoration: none;
}

.cr-table-view thead .tv-data-summary-container td {
	padding: .5em 10px .25em;
	background-color: transparent;
}

/** Column sorting */
.cr-table-view .tv-title-link {
    margin: -0.75em -10px -0.75em 0;
    padding: 0.75em 10px 0.75em 0;
}

.tv-title-sort {
    width: 10px;
    height: 10px;
    margin-top: -0.1em;
    vertical-align: middle;
    opacity: .7;
    transition: transform .3s;
    transform: rotateX(180deg);
}

.tv-title-link:hover .tv-title-sort {
    opacity: 1;
}

.tv-col-sorted:hover .tv-title-sort {
    transform: rotateX(0deg);
    transition: transform 1s;
}

/** Column alignment */
.tv-text-align-left {
	text-align: left;
}

.tv-text-align-right,
.cr-table-view thead .tv-text-align-right,
.cr-table-view thead .tv-text-align-right .tv-title-link {
	text-align: right;
}

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

.tv-text--strike {
    text-decoration: line-through;
    color: #afafaf;
}

.tv-title {
	display: block;
	width: 100%;
	white-space: nowrap;
}

/**
 * Table body
 */

.cr-table-view tbody .cr-table-view__row--clickable:hover td {
    background-color: #edf4f9;
    cursor: pointer;
}

/**
 * Table footer
 * Contains amount of items (per page) and - optionally - the Pager component
 */

.cr-table-view tfoot td {
	line-height: 1;
	text-align: center;
}

.tv-footer-container {
	position: relative;
}

.tv-row-amount {
	left: 0;
	top: 6px;
	margin: 0;
	color: #666;
	text-align: left;
}

.tv-fc-hasPager .tv-row-amount {
	position: absolute;
	display: inline;
}

.cr-table-view ul.pbuic-pager {
	margin: 0;
}

/**
 * Table body Actions
 */

.tv-actions {
	float: right;
	white-space: nowrap;
}

.tv-actions .icon {
	height: 14px;
	width: auto !important;
	max-width: none;
	vertical-align: text-bottom;
	opacity: .7
}

.tv-action:hover .icon {
	opacity: 1;
}

.tv-action {
    display: inline-block;
    width: 18px;
    margin: -3px 0 -3px 4px;
    padding: 2px;
    border-radius: 2px;
    text-align: center;
}

.tv-action:last-child {
    margin-right: -3px;
}

.tv-action:hover:not(.tv-action-disabled) {
    background-color: #fff;
}

.tv-action-disabled img.icon,
.tv-action-disabled:hover img.icon {
	opacity: .3;
}

/**
 * .cr-no-results - Paragraph with notice that no results are shown
 * Case 1: there are no items yet
 * Case 2: searched or filtered set contains 0 items
 */

.cr-no-results {
	background: #f8f8f8;
}

.cr-no-results h2 {
	line-height: 3em;
	text-align: center;
	font-size: 1.2em;
	font-weight: normal;
	color: #6B6B6B;
}

div#content .cr-no-results h2 { /** @todo: remove with Extranet2 UI */
	color: #6B6B6B;
}