.table,
.table--dynamic {
	margin: 1rem 0;
	width: 100%;

	th {
		background: rgba($color--seashell, 0.2);
		padding: 0.6rem;
		border: 1px solid rgba($color--seashell, 0.4);
		&.sortable {
			position: relative;
			cursor: pointer;
			&:hover { background: rgba($color--seashell, 0.3); }
			.sortable__up {
				display:block;
				font-size: 1.5rem;
				height: 1.5rem;
				width: 1.5rem;
				position: absolute;
				right: 3px;
				top: 3px;
				&:before {
					position: absolute;
					top: calc(50% - 0.2rem);
					left: calc(50% - 0.6rem);
					display: block;
					content: '';
					width: 1.2rem;
					height: 0.7rem;
					border-bottom: 0.7rem solid $color--seashell;
					border-left: 0.6rem solid transparent;
					border-right: 0.6rem solid transparent;
				}
			}
			.sortable__down {
				display:block;
				font-size: 1.5rem;
				height: 1.5rem;
				width: 1.5rem;
				position: absolute;
				right: 3px;
				bottom: 3px;
				&:before {
					position: absolute;
					top: calc(50% - 0.4rem);
					left: calc(50% - 0.6rem);
					display: block;
					content: '';
					width: 1.2rem;
					height: 0.7rem;
					border-top: 0.7rem solid $color--seashell;
					border-left: 0.6rem solid transparent;
					border-right: 0.6rem solid transparent;
				}
			}
			&.sorted--up .sortable__down:before { border-top-color: $color--mint; }
			&.sorted--down .sortable__up:before { border-bottom-color: $color--mint; }
		}
	}
	td {
		padding: 0.2rem 0.6rem;
		border: 1px solid rgba($color--seashell, 0.4);
	}
	tr {
		td:first-child { 
			text-align: center; 
		}

		&:hover {
			td {
				background: rgba($color--mint, 0.03);
			}
		}
	}

	a {
		color: darken($color--mint, 8%);
		text-decoration: underline;

		&:hover {
			text-decoration: none;
		}

	}

	svg {
		color: $color--mint;
		text-decoration: none;
		width: 2rem;
		height: 1.8rem;
		margin-top: 0.2rem;
		margin-bottom: -0.2rem;
		margin-left: 0.7rem;
		margin-tight: 0.7rem;

		&:hover {
			color: darken($color--mint, 10%);
		}
	}

	

	.flag {
		text-decoration: none;
		height: 2rem;
		width: 2rem;
		border: 1px solid $color--seashell;
		display: inline-block;
		float: left;
		margin-right: 0.5rem;
		background-position: center center;
		background-size: cover;
		background-repeat: no-repeat;
		opacity: 0.7;
		border-radius: 100%;
		transition: opacity 0.2s linear;
		cursor: pointer;
		&:hover {
			opacity: 1;
		}
	}
/*
	*[class*="icon--"] {
		text-decoration: none;
		height: 2rem;
		text-align: center;
		display: inline-block;
		margin: 0.1rem 0.6rem -0.3rem 0.2rem;
		&:before {
			transition: all 0.2s linear;
			font-size: 1.8rem;
		}
		&:hover {
			&:before {
				display: inline-block;
				transform: scale(1.3);
				color: darken($color--mint, 15%);
			}
		}
		&:last-child {
			margin-right: 0;
		}
	}
*/
	svg.true {
		color: $color--green;
		cursor: pointer;
		&:hover {
			color: darken($color--green, 10%);
		}
	}
	svg.false {
		color: $color--red;
		cursor: pointer;
		&:hover {
			color: darken($color--red, 10%);
		}
	}

	.informative {
		pointer-events: none;
	}
}
.table__note {
	font-weight: 200;
	padding: 3rem;
	font-size: 2rem;
	text-align: center;
	line-height: 3rem;
	display: inline-block;
	margin: auto;
	svg {
		color: $color--seashell;
		font-size: 6rem;
		height: 3rem;
		margin: 0rem 1.4rem 0rem 0;
		&:hover {
			color: $color--seashell;
		}
	}
}
.table__note--searching {
	@extend .table__note;
	svg {
		color: $color--mint;
		&:hover {
			color: $color--mint;
		}
	}
}

.table--simple {
	width: 100%;
	background: rgba($color--seashell, 0.2);
	th {
		padding: 0.2rem 0.6rem;
		border: 1px solid $color--white;
		font-weight: 700;
		text-align: left;
	}
	td {
		padding: 0.2rem 0.6rem;
		border: 1px solid $color--white;
	}
}
/*
table {
	margin: 0.2rem;
	width: 100%;
	border: 1px solid $color--graymiddle;
	@media(max-width: 900px) { font-size: 12px; }

	tr { 
		border: 1px solid $color--graymiddle; 
		&.highlighted {
			background: rgba($color--additional, 0.05);
		}
		&:hover {
			background-color: rgba($color--graymiddle,0.2);
		}
	}
	th {
		background-color: $color--graylight;
		font-weight: 600;
		font-size: 1.4rem;
		padding: 10px 33px 8px 12px;
		position: relative;
		text-align: left;
		min-width: 60px;
		text-wrap: none;
		@media(max-width: 1000px) { 
			font-size: 12px; 
			padding: 10px 10px 8px 8px; 
		}

		&:nth-child(1){
			min-width: 20px;
		}

		&.sortable {
			padding-right: 18px;
			transition: all 0.2s linear;
			&:hover {
					background-color: $color--graylight--darker;
			}
			.sortable__up,
			.sortable__down {
				position: absolute;
				top: 12px;
				right: 10px;
				display: block;
				width: 10px;
				height: 8px;
				line-height: 8px;
				cursor: pointer;
				font-family: 'FontAwesome';
				font-size: 10px;
				color: $color--grayicon;
				&:hover {
					color: $color--main;
				}
				&:before {
					content: $fa-var-caret-up;
				}
			}
			.sortable__down {
				top: auto;
				bottom: 9px;
				&:before {
					content: $fa-var-caret-down;
				}
			}

			&.sorted--up {
				.sortable__down { display: none; }
				.sortable__up { top: 15px; }
			}

			&.sorted--down {
				.sortable__up { display: none; }
				.sortable__down { bottom: 12px;  }
			}
		}

		&.checkbox {
			width: 30px;
		}

		&.filterable {

			.filterable__btn {
				cursor: pointer;
				position: relative;
				margin: 2px 10px 0 10px;
				display: inline-block;
				float: right;
				width: 13px;
				height: 13px;
				color: $color--grayicon;
				@media(max-width: 1000px) { 
					margin: 2px 5px 0 10px;
				}

				&:hover { color: $color--main; }

				&:before {
					content: $fa-var-filter;
					font-family: 'FontAwesome';
					display: block;
					font-size: 13px;
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
			}

			input {
				position: absolute;
				width: calc(100% - 18px);
				z-index: -1;
				height: 24px;
				line-height: 24px;
				top: 0px;
				left: 0;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
				border: 1px solid $color--grayforms-border;
				padding: 2px 8px;
				font-weight: 100;
				transition: z-index 0s step-start, top 0.2s ease-in-out;
			}
			select {
				position: absolute;
				z-index: -1;
				line-height: 24px;
				top: 0px;
				left: 0;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
				border: 1px solid $color--grayforms-border;
				padding: 2px 8px 2px 4px;
				font-weight: 100;
				transition: z-index 0s step-start, top 0.2s ease-in-out;
				width: 100%;
				height: 30px;
			}

			&.filtering {
				input { 
					top: -30px; 
					z-index: 0;
					transition: z-index 0.2s step-end, top 0.2s ease-in-out;
				}
				.filterable__btn { color: $color--main; }
			}
		}
	}
	td {
		font-size: 1.4rem;
		line-height: 1.6rem;
		padding: 0.6rem 1rem;
		form {
			display: inline;
		}
		a {
			color: $color--additional-light;
		}
		&.checkbox {
			width: 30px;
		}
		.true {
			width: 13px;
			display: block;
			&:before {
				content: $fa-var-check;
				color: $color--green;
				font-family: 'FontAwesome';
				display: block;
				transition: all 0.1s linear;
			}
		}
		a.true { 
			cursor: pointer; 
			text-decoration: none;
			&:hover {
				&:before { 
					transform: scale(1.1); 
				}
				text-decoration: none;
			}
		}
		.false {
			width: 13px;
			display: block;
			&:before {
				content: $fa-var-remove;
				color: $color--red;
				font-family: 'FontAwesome';
				display: block;
				font-size: 12px;
				transition: all 0.1s linear;
			}
		}
		a.false { 
			cursor: pointer; 
			&:hover {
				&:before { 
					transform: scale(1.1); 
				}
				text-decoration: none;
			}
		}
		.nothing {
			width: 13px;
			display: block;
			&:before {
				//content: '\e0e1';
				content: '';
				color: $color--grayicon;
				font-family: 'FontAwesome';
				display: block;
				font-size: 12px;
				width: 8px;
				height: 8px;
				border: 3px solid $color--grayicon;
				border-radius: 10px;
				transition: all 0.1s linear;
			}
		}
		a.nothing { 
			cursor: pointer; 
			&:hover:before { 
				transform: scale(1.1); 
				text-decoration: none;
			}
		}
	}
}

table.margin-top-0 {
	margin-top: 30px;
}

td.more {
	text-align: center;
	border-bottom: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
}

.table--filtered {
	table {
		margin-top: 0;
	}
}

.table-functions {
	display: inline-block;
	width: auto;
	float: left;
	margin: 10px 0;

	label {
		display: block;
		width: 100%;
	}

	select {
		width: auto;
		display: inline-block;
		float: left;
		min-width: 120px;
	}

	button {
		float: right;
		margin: 0 0 0 10px;
		padding: 6px 18px;
	}
}

table td.checkbox {
	@extend .form__item;
	width: 30px;
	margin: 0;
	min-height: 30px;
	height: 30px;
	padding: 0;
	label[for^=checkbox] {
		margin-top: 9px;  
	}
}

.table--simple {
	border: none;
	margin-top: 0.5rem;
	background-color: rgba($color--graymiddle,0.3);
	tr {
		border: 0.2rem solid $color--white;
	}
	td {
		padding: 0.2rem 0.5rem;
		line-height: 2rem;
	}
}
.table__caption {
	font-weight: 600;
}

.table__footer {
	background-color: $color--graylight;
}

.table--form {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	border: none;
	tr:first-child {
		border-top: none;
		border-left: none;
		border-right: none;
		th,td {
			border-top: none;
			border-left: 1px solid $color--grayforms-border;
			text-align: center;
			&:first-child {
				border-left: none;
			}
			&:last-child {
				border-right: none;
			}
		}
	}
	tr {
		border-left: none;
		border-right: none;
		th,td {
			border-left: 1px solid $color--grayforms-border;
			&:first-child {
				border-left: none;
			}
			&:last-child {
				border-right: none;
			}
			padding: 0.3rem 0.6rem;
		}
	}
	th {
		font-size: 1.2rem;
	}
	font-size: 1.6rem;
}

*/

