.ats-wrapper {
	--ats-header-bg: #4F46E5;
	--ats-header-color: #ffffff;
	--ats-header-transform: none;
	--ats-text-color: #1f2937;
	--ats-row-bg: #ffffff;
	--ats-stripe-bg: #f5f6fb;
	--ats-border-color: #e5e7eb;
	--ats-border-width: 1px;
	--ats-radius: 10px;
	--ats-font-size: 14px;
	--ats-cell-padding: 12px 16px;
	--ats-hover-bg: #eef1fd;
	--ats-full-width: 100%;
	--ats-font-family: inherit;

	background: var( --ats-row-bg );
	border-radius: var( --ats-radius );
	max-width: 100%;
	box-sizing: border-box;
}

.ats-wrapper * {
	box-sizing: border-box;
}

.ats-wrapper.ats-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.ats-wrapper.ats-shadow {
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .06 ), 0 8px 24px rgba( 0, 0, 0, .06 );
}

.ats-table {
	width: var( --ats-full-width );
	border-collapse: separate;
	border-spacing: 0;
	font-family: var( --ats-font-family );
	font-size: var( --ats-font-size );
	line-height: 1.5;
}

.ats-table thead th {
	background: var( --ats-header-bg );
	color: var( --ats-header-color );
	text-transform: var( --ats-header-transform );
	text-align: left;
	padding: var( --ats-cell-padding );
	font-weight: 600;
	letter-spacing: .01em;
	white-space: nowrap;
}

.ats-table thead th:first-child {
	border-top-left-radius: var( --ats-radius );
}

.ats-table thead th:last-child {
	border-top-right-radius: var( --ats-radius );
}

.ats-table tbody td {
	padding: var( --ats-cell-padding );
	border-bottom: var( --ats-border-width ) solid var( --ats-border-color );
	color: var( --ats-text-color );
	vertical-align: top;
}

.ats-table tbody tr:last-child td {
	border-bottom: none;
}

.ats-table tbody tr:nth-child(even) td {
	background: var( --ats-stripe-bg );
}

.ats-table tbody tr:hover td {
	background: var( --ats-hover-bg );
	transition: background .15s ease;
}

.ats-table tbody td code,
.ats-table thead th code {
	background: rgba( 0, 0, 0, .06 );
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .9em;
}

.ats-table thead th code {
	background: rgba( 255, 255, 255, .18 );
}

.ats-empty-note {
	padding: 16px;
	color: #6b7280;
	font-style: italic;
}

@media ( max-width: 600px ) {
	.ats-table {
		font-size: calc( var( --ats-font-size ) - 1px );
	}
}