.object-table-module {

	.back-cover{
		background-color: white;
	}

	.count{
		font-size: 15px;
		float: right;
		margin-top: 20px;
		color: rgb(33, 101, 163);
		background-color: rgba(188, 188, 188, 0.35);
		.records{
			color: rgb(136, 136, 136);
			font-weight: normal;
		}
	}

	/*## Search */
	.search{
		max-width:250px;
		padding-right: 25px;
		&.separate{
			width: 100%;
			max-width: 100%;
			padding-left: 22px;
		}
	}
	.search_icon{
		position: absolute;
		right: 8px;
		top: 10px;
		color: gray;
		&.separate{
			left: 15px;
			top: 20px;
			font-size: 10px;
			width: 10px;
		}
	}

	/*## Sorting */
	.sorting-badge{
		background-color: white;
		position: relative;
		font-weight: 600;
		font-size: 10px;
		padding: 5px 5px 5px 10px;
		display: inline-block;
		border-radius: 4px;
		margin-left: 5px;
		color: rgb(51, 122, 183);
		border: 1px solid rgba(12, 75, 140, 0.43);
		margin-bottom: 3px;
	}

	.sorting-container{
		margin: 10px 0;

		.sorting-badge{
			&:hover{
				background-color: rgb(51, 122, 183);
				color: white;
				.close{
					opacity:1;
					cursor: pointer;
					color: rgb(0, 38, 85);
					text-shadow:none;
				}
			}
			.close{
				margin-left: 5px;
				float: right;
				font-size: 12px;
				line-height: 1;
				color: #000;
				filter: alpha(opacity=20);
				opacity: .2;
			}
			/*.up,.down{
				&:extend(.object-table-module .object-table  thead>tr>th.sortable:after)
				}*/
			}
		}

		.object-table{
			margin-bottom: 0px;
			color: gray;

			thead{
				>tr{
					background-color: #e6f1f6;
					color: rgb(33, 101, 163);
					cursor: pointer;
					-webkit-touch-callout: none;
					-webkit-user-select: none;
					-khtml-user-select: none;
					-moz-user-select: none;
					-ms-user-select: none;
					user-select: none;
					th{
						border-bottom: 0;
						padding-right: 25px;
						position: relative;
						will-change:width;
						-webkit-touch-callout: none;
						-webkit-user-select: none;
						-khtml-user-select: none;
						-moz-user-select: none;
						-ms-user-select: none;
						user-select: none;
						&[draggable]{
							a{
								width: 100%;
								display: block;
							}
						}
						&.dragged{
							background-color: rgba(255, 255, 255, 0.64);
							border: 2px dashed rgb(66, 121, 152);
							div.resize{
								display: none;
							}
						}
						&.draggedOver{
							background-color: rgba(128, 128, 128, 0.16);
							border: 1px solid rgb(147, 153, 156);
							div.resize{
								display: none;
							}
						}
						&.sortable{
							position: relative;
							&:before {
								margin-top: 2px;
								content: "\e113";
								font-size: 9px;
								font-family: 'Glyphicons Halflings';
								visibility: visible;
								right: 8px;
								top: 40%;
								position: absolute;
								opacity: .25;
								margin-top: -4px;
							}
							&:after {
								&:extend(.object-table-module .object-table thead > tr th.sortable:before);
								content: "\e114";
								margin-top: 5px;
							}
							&:hover:not(.table-sort-up):not(.table-sort-down):after,
							&:hover:not(.table-sort-up):not(.table-sort-down):before{
								opacity: 1;
							}
							&.table-sort-up:before,&.table-sort-down:after{
								opacity: 1;
							}
						}

						&.separate{
							position: relative;
							padding-right: 7px;
							text-shadow: none !important;
							outline: none;
							&:focus{
								outline: none;
							}
						}
						div.resize{
							width: 5px;
							border-right: 2px dotted rgb(148, 148, 148);
							position: absolute;
							right: -2px;
							visibility: hidden;
							top: 0;
							z-index: 999;
							height: 100%;
							cursor: ew-resize;
						}
						&:hover{
							div.resize{
								visibility: visible;
							}
						}
					}
				}

			}

			tfoot{
				tr{
					&:extend(.object-table-module .object-table thead>tr);
					cursor: auto;
				}
			}
			tbody{
				tr{
					&.selected-row td{
						background-color: rgb(215, 241, 160);
					}
					&:hover{
						background-color:rgba(103, 103, 103, 0.08);
						color: black;
					}
				}
				td{
					//will-change:width;
					&:hover{
						cursor: pointer;
					}
					&[editable]{
						div[contenteditable]{
							padding: 3px;
							&:focus{
								margin: -3px;
								border: 2px dotted #738395;
								background-color: #F5F5F5;
								vertical-align: middle;
								color: rgb(12, 75, 140);
								display: block;
								outline: none;
							}
						}
					}
				}

			}
		/*&.resize{
			width: auto;
			}*/
		}

		&.hover-column table{
			overflow: hidden !important;

			thead{
				tr{
					th{
						z-index: 3;
						position: relative;
					}
				}
			}
			tbody{
				tr{
					td{
						position: relative;
						outline: 0;
						z-index: 2;
						&:hover{
							z-index: 1;
							&::before{
								content: '';
								height: 10000px;
								left: 0;
								position: absolute;
								top: -5000px;
								width: 100%;
								z-index: -1;
								background-color: rgba(103, 103, 103, 0.08);
							}
						}

					}
				}
			}
		}

	}
	/* global loading */
	.loading{
		padding: 5px;
		text-align: center;
		color: rgb(51, 122, 185);
	}

	.loading .glyphicon-refresh-animate {
		-animation: spin .7s infinite linear;
		-webkit-animation: spin2 .7s infinite linear;
	}


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

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