@import 'colors.scss';
@import 'variables.scss';
@import 'checkbox.scss';
/*table*/

.table {
	@include flex-column;
	flex: 1 1 auto;
	line-height: 1.5;
	.tr, .thead {
		width: 100%;
		@include flex-row;
		height: 60px;
		box-sizing: $box-sizing-borderbox;
		.td, .th {
			@include flex-row-center;
			flex-grow: 1;
			flex-basis: auto;
			padding: 1rem;
			word-break: break-word;
			min-width: 20px;
			width: 100px;
			border-bottom: 1px solid $table-border-color;			
			box-sizing: border-box;			
			.card-avatar{
				width: 1.75rem;
				height: 1.75rem;
				margin-bottom: 0;
				border:none;
			}
			&.thumbnail{
				margin: 0 !important; 
				max-width: 55px;  
				flex-shrink: 0;     
				img{
					width: auto;
					height: auto;
					max-width: 29px;
					max-height: 22px;
				}
        	}
		}
		.th{
			font-size: $font-size-regular;
			&:first-child{
				flex: 0 0 100px;
			}
			&:last-child{
				flex: 0 0 auto;
			}
		}
		.td{
			color:$col_gray_8;
			.data{
				@include text-ellipsis;				
				font-size: $font-size-regular;
			}
		}
	}
	.tr{
		background: $table-row-background;
					cursor: pointer;
		&:hover {
			background-color: $table-row-hover-bg;
			.td{
				color:$col_white;
			}				
		}
	}
	.thead {
		//width: 99%;
		font-weight: 600;
		background: $table-head-background;
	}
}
.width0 {
	max-width: 60px;
	flex-shrink: 0;
}

.width1 {
	flex-grow: 1;
}
.width2 {
	flex-grow: 2;
}
.width3 {
	flex-grow: 3;
}