/**
 * CSS spécifique
 * Responsive Table Evaluateurs
 */
@media ( max-width: 480px ) {
	.table.evaluators, .table.affected-evaluator {
		tr, thead, tbody, tfoot, td:not(.hidden), th {
			display: block;
			width: 100%;
			height: auto;
		}
	}

	// Header
	.table.evaluators thead {
		> tr {
			padding: 1em 6em !important;
			background: #fff !important;
			color: rgba(0,0,0,0.8);
		}
		th {
			display: none;
		}
		th:nth-of-type(6) {
			display: block;
			&:before {
				font-family: $font__icon;
				font-weight: 400;
				display: inline-block;
				content: fa-content($fa-var-clock);
				font-size: 20px;
				padding-right: 0.4em;
			}
			input {
				display: inline-block;
				max-width: 60px;
			}
		}
	}
	.table.affected-evaluator thead {
		th {
			display: none;
		}
	}

	// Content
	.table.evaluators tbody, .table.affected-evaluator tbody {
		> tr {
			display: flex;
			flex-wrap: wrap;
			padding: 1em;
			position: relative;
			padding: 1em 6em !important;
		}
		> tr:nth-child( even ) {
			background: #fff;
		}
		td:nth-of-type(1) {
			width: 50px;
			min-width: 50px;
			margin-right: 0.6em;
			position: absolute;
			left: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
		td:nth-of-type(2), td:nth-of-type(3), td:nth-of-type(4) {
			width: auto;
			padding: 0 0.2em !important;
			font-size: 14px;
		}
		td:nth-of-type(5) {
			&:before {
				font-family: $font__icon;
				font-weight: 400;
				content: fa-content($fa-var-clock);
				display: inline-block;
				font-size: 20px;
				padding-right: 0.4em;
			}
			input {
				display: inline-block;
				max-width: 60px;
			}
		}
	}
	.table.evaluators tbody {
		td:nth-of-type(6) {
			width: auto;
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	.table.affected-evaluator tbody {
		tr {
			background: rgba(0,0,0,0.1) !important;
		}
		td:nth-of-type(5) {
			width: 100%;

			&:before {
				display: inline-block;
				font-family: $font__icon;
				font-weight: 400;
				content: fa-content($fa-var-calendar-alt);
				font-size: 20px;
				padding-right: 0.4em;
			}
		}
		td:nth-of-type(6) {
			&:before {
				font-family: $font__icon;
				font-weight: 400;
				content: fa-content($fa-var-clock);
				display: inline-block;
				font-size: 20px;
				padding-right: 0.4em;
			}
			input {
				display: inline-block;
				max-width: 60px;
			}
		}
		td:nth-of-type(7) {
			width: auto;
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}