.datatable {
	width: 100%;
	border-spacing: 0;
	text-align: left;
	font-size: 13pt;

	caption {
		text-align: left;
		font-size: 16pt;
		margin: 12px 0;
		color: $dark;
		font-weight: 600;
	}

	thead {
		tr {
			th {
				font-weight: 600;
				padding: 4px 12px;
				text-transform: uppercase;
				letter-spacing: 2px;
				border-bottom: 1px solid $dark;
				color: $dark;
			}
		}
	}

	tbody {
		tr {
			th,
			td {
				font-weight: 400;
				padding: 24px 12px;

				.hidden-colname {
					display: inline-block;
					clip: rect(1px 1px 1px 1px);
					clip: rect(1px, 1px, 1px, 1px);
					width: 1px;
					height: 1px;
					overflow: hidden;
				}
			}

			&:nth-child(even) {
				background-color: $light;
			}
		}
	}
}

@media (max-width: 892px) {
	.datatable {
		thead {
			position: absolute;
			clip: rect(1px 1px 1px 1px);
			clip: rect(1px, 1px, 1px, 1px);
			width: 1px;
			height: 1px;
			overflow: hidden;
		}
		tbody {
			tr {
				th,
				td {
					display: block;
					padding: 5px 0 5px 12px;
			
					.hidden-colname {
						display: inline-block;
						clip: auto;
						width: 150px;
						height: auto;
						line-height: 1;
					}
				}
			}
		}
	}
}
