/*------------------------------------*\
    
    WebFX Ninja Tables Customizations - Global Styling for Responsive Tables

    Add custom Ninka tables styling to this file if it should be applied to all Ninja tables on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/

/* Ninja Tables Wrapper */
.ninja_table_wrapper,
.footable_parent.ninja_table_wrapper {
	margin: 12px -22px 12px 0;
	position: relative;
	width: 100%;
	overflow: auto;
	padding-bottom: 0;
	background: transparent;
}

/* Scrollbar Styling */
.ninja_table_wrapper::-webkit-scrollbar,
.footable_parent.ninja_table_wrapper::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

.ninja_table_wrapper::-webkit-scrollbar-track,
.footable_parent.ninja_table_wrapper::-webkit-scrollbar-track {
	background-color: var(--border-color);
	border-radius: 0;
}

.ninja_table_wrapper::-webkit-scrollbar-thumb,
.footable_parent.ninja_table_wrapper::-webkit-scrollbar-thumb {
	background-color: var(--primary-color);
	border: 2px solid var(--primary-color);
	border-radius: 0;
}
thead .footable-filtering {
	display: none !important;
}

/* Table Structure */
.ninja_table_wrapper table,
.ninja_table_wrapper table.ninja_table,
.ninja_table_wrapper table.foo-table,
.ninja_table_wrapper.semantic_ui .ui.table {
	border-collapse: collapse;
	background: var(--white);
	font-family: var(--font-primary);
	width: 100%;
	min-width: 664px;
}

/* Table Header */
.ninja_table_wrapper table thead,
.ninja_table_wrapper table.ninja_table thead,
.ninja_table_wrapper table.foo-table thead,
.ninja_table_wrapper.semantic_ui .ui.table thead {
	color: var(--white);
	background: var(--secondary-color);
}

.bg-darkest .ninja_table_wrapper table thead,
.bg-darkest .ninja_table_wrapper table.ninja_table thead,
.bg-darkest .ninja_table_wrapper table.foo-table thead,
.bg-darkest .ninja_table_wrapper.semantic_ui .ui.table thead {
	color: var(--light);
	background: var(--dark);
}

.ninja_table_wrapper table thead tr th,
.ninja_table_wrapper table thead tr td,
.ninja_table_wrapper.semantic_ui .ui.table thead tr th,
.ninja_table_wrapper.semantic_ui .ui.table thead tr td {
	padding: 16px !important;
	text-align: left;
	font-size: 15px;
	line-height: 1em;
	font-weight: bold;
	border: none !important;
	vertical-align: middle;
	text-transform: uppercase;
}

.ninja_table_wrapper table.foo-table thead th,
.ninja_table_wrapper table.ninja_table thead th {
	background: var(--secondary-color) !important;
	color: var(--white) !important;
}

.bg-darkest .ninja_table_wrapper table.foo-table thead th,
.bg-darkest .ninja_table_wrapper table.ninja_table thead th {
	background: var(--dark) !important;
	color: var(--light) !important;
}

/* Table Body - Alternating Rows */
.ninja_table_wrapper table tbody tr:nth-child(even),
.ninja_table_wrapper.semantic_ui .ui.striped.table tbody tr:nth-child(2n) {
	background: var(--medium) !important;
}

.ninja_table_wrapper table tbody tr td,
.ninja_table_wrapper table tbody tr th,
.ninja_table_wrapper.semantic_ui .ui.table tbody tr td,
.ninja_table_wrapper.semantic_ui .ui.table tbody tr th {
	padding: 16px !important;
	text-align: left;
	font-size: 14px;
	font-weight: normal;
	color: var(--black);
	line-height: 1.45em;
	vertical-align: middle;
	border: none !important;
}

/* Responsive Styles */
@media (min-width: 768px) {
	.ninja_table_wrapper,
	.footable_parent.ninja_table_wrapper {
		margin: 16px 0;
		overflow: visible;
	}

	.ninja_table_wrapper table,
	.ninja_table_wrapper table.ninja_table,
	.ninja_table_wrapper table.foo-table,
	.ninja_table_wrapper.semantic_ui .ui.table {
		width: 100%;
		min-width: 100%;
	}

	.ninja_table_wrapper table thead tr th,
	.ninja_table_wrapper table thead tr td,
	.ninja_table_wrapper.semantic_ui .ui.table thead tr th,
	.ninja_table_wrapper.semantic_ui .ui.table thead tr td {
		font-size: 18px;
	}

	.ninja_table_wrapper table tbody tr td,
	.ninja_table_wrapper table tbody tr th,
	.ninja_table_wrapper.semantic_ui .ui.table tbody tr td,
	.ninja_table_wrapper.semantic_ui .ui.table tbody tr th {
		font-size: 15px;
	}
}

@media (min-width: 1200px) {
	.ninja_table_wrapper table thead tr th,
	.ninja_table_wrapper table thead tr td,
	.ninja_table_wrapper.semantic_ui .ui.table thead tr th,
	.ninja_table_wrapper.semantic_ui .ui.table thead tr td {
		font-size: 20px;
	}

	.ninja_table_wrapper table tbody tr td,
	.ninja_table_wrapper table tbody tr th,
	.ninja_table_wrapper.semantic_ui .ui.table tbody tr td,
	.ninja_table_wrapper.semantic_ui .ui.table tbody tr th {
		font-size: 17px;
	}
}