/* ==========================================================
   KEELE SU RESPONSIVE TABLES
   Add this to kpa-theme.css after the theme variables.

   Styles tables wrapped in:
   <div class="table-responsive">...</div>

   core.css must load before kpa-theme.css.
   ========================================================== */


/* ----------------------------------------------------------
   1. TABLE THEME VARIABLES
   ---------------------------------------------------------- */

:root {
	/* Main table colours */
	--table-header-background: var(--primary-color, #2b0e48);
	--table-header-text: #ffffff;

	/* Cell and row colours */
	--table-background: #ffffff;
	--table-text: var(--body-text-color, #27272a);
	--table-border: #d8d2dd;
	--table-striped-background: #f7f5f8;
	--table-row-heading-background: #f0ebf3;
	--table-row-heading-striped-background: #e8e1ec;
	--table-hover-background: #eef6e9;

	/* Accent and interaction colours */
	--table-link: var(--primary-color, #2b0e48);
	--table-focus: var(--secondary-color, #65b22e);

	/* Spacing and shape */
	--table-cell-padding-block: 0.875rem;
	--table-cell-padding-inline: 1rem;
	--table-border-radius: 0.5rem;

	/* Minimum width before horizontal scrolling */
	--table-mobile-min-width: 36rem;
}


/* ----------------------------------------------------------
   2. RESPONSIVE TABLE WRAPPER
   ---------------------------------------------------------- */

table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin-block: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--table-border);
	border-radius: var(--table-border-radius);
	background: var(--table-background);
}

/*
 * Shows keyboard users when the responsive wrapper has focus.
 * Add tabindex="0" to the HTML wrapper to enable this.
 */
table:focus {
	outline: none;
}

table:focus-visible {
	outline: 3px solid var(--table-focus);
	outline-offset: 3px;
}


/* ----------------------------------------------------------
   3. BASE TABLE
   ---------------------------------------------------------- */

table table {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
	background: var(--table-background);
	color: var(--table-text);
	font-size: 1rem;
	line-height: 1.5;
}


/* ----------------------------------------------------------
   4. TABLE CAPTIONS
   ---------------------------------------------------------- */

table caption {
	padding: 1rem;
	color: var(--table-header-background);
	background: var(--table-background);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	caption-side: top;
}

/*
 * Keeps an accessible caption available to screen readers
 * without displaying it visually.
 */
table caption.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ----------------------------------------------------------
   5. TABLE HEADER
   ---------------------------------------------------------- */

table thead {
	background: var(--table-header-background);
	color: var(--table-header-text);
}

table thead tr {
	background: var(--table-header-background);
}

table thead th {
	padding:
		var(--table-cell-padding-block)
		var(--table-cell-padding-inline);
	border: 0;
	border-right: 1px solid rgb(255 255 255 / 25%);
	background: var(--table-header-background);
	color: var(--table-header-text);
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	vertical-align: bottom;
}

table thead th:last-child {
	border-right: 0;
}


/* ----------------------------------------------------------
   6. TABLE BODY CELLS
   ---------------------------------------------------------- */

table tbody th,
table tbody td {
	padding:
		var(--table-cell-padding-block)
		var(--table-cell-padding-inline);
	border: 0;
	border-bottom: 1px solid var(--table-border);
	background: var(--table-background);
	color: var(--table-text);
	text-align: left;
	vertical-align: top;
}


/* ----------------------------------------------------------
   7. ROW HEADINGS
   ---------------------------------------------------------- */

table tbody th[scope="row"] {
	background: var(--table-row-heading-background);
	color: var(--table-header-background);
	font-weight: 700;
}


/* ----------------------------------------------------------
   8. STRIPED ROWS
   ---------------------------------------------------------- */

table tbody tr:nth-child(even) td {
	background: var(--table-striped-background);
}

table tbody tr:nth-child(even) th[scope="row"] {
	background: var(--table-row-heading-striped-background);
}


/* ----------------------------------------------------------
   9. FINAL ROW
   ---------------------------------------------------------- */

table tbody tr:last-child th,
table tbody tr:last-child td {
	border-bottom: 0;
}


/* ----------------------------------------------------------
   10. ROW HOVER AND KEYBOARD FOCUS
   ---------------------------------------------------------- */

table tbody tr:hover th,
table tbody tr:hover td {
	background: var(--table-hover-background);
}

table tbody tr:focus-within th,
table tbody tr:focus-within td {
	background: var(--table-hover-background);
}


/* ----------------------------------------------------------
   11. LINKS INSIDE TABLES
   ---------------------------------------------------------- */

table a {
	color: var(--table-link);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.15em;
}

table a:hover {
	color: var(--table-link);
	text-decoration-thickness: 0.2em;
}

table a:focus {
	outline: none;
}

table a:focus-visible {
	border-radius: 0.125rem;
	outline: 3px solid var(--table-focus);
	outline-offset: 3px;
}


/* ----------------------------------------------------------
   12. DATES, NUMBERS AND STATUS CONTENT
   ---------------------------------------------------------- */

/* Stops short dates from breaking over multiple lines */
table time {
	white-space: nowrap;
}

/*
 * Apply class="table-number" to numeric cells that should
 * align consistently.
 */
table .table-number {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/*
 * Apply class="table-centre" when content should be centred.
 */
table .table-centre {
	text-align: center;
}

/*
 * Apply class="table-nowrap" to prevent selected content
 * from wrapping.
 */
table .table-nowrap {
	white-space: nowrap;
}


/* ----------------------------------------------------------
   13. TABLE FOOTER
   ---------------------------------------------------------- */

table tfoot th,
table tfoot td {
	padding:
		var(--table-cell-padding-block)
		var(--table-cell-padding-inline);
	border: 0;
	border-top: 2px solid var(--table-header-background);
	background: var(--table-row-heading-background);
	color: var(--table-header-background);
	font-weight: 700;
	text-align: left;
	vertical-align: top;
}


/* ----------------------------------------------------------
   14. COMPACT TABLE VARIANT
   Use:
   <div class="table-responsive table-compact">
   ---------------------------------------------------------- */

table.table-compact {
	--table-cell-padding-block: 0.5rem;
	--table-cell-padding-inline: 0.75rem;
}

table.table-compact table {
	font-size: 0.9375rem;
}


/* ----------------------------------------------------------
   15. ACCENT TABLE VARIANT
   Use:
   <div class="table-responsive table-accent">
   ---------------------------------------------------------- */

table.table-accent tbody th[scope="row"] {
	border-left: 0.375rem solid var(--table-accent);
}


/* ----------------------------------------------------------
   16. BORDERED TABLE VARIANT
   Use:
   <div class="table-responsive table-bordered">
   ---------------------------------------------------------- */

table.table-bordered thead th,
table.table-bordered tbody th,
table.table-bordered tbody td,
table.table-bordered tfoot th,
table.table-bordered tfoot td {
	border-right: 1px solid var(--table-border);
}

table.table-bordered thead th {
	border-right-color: rgb(255 255 255 / 25%);
}

table.table-bordered tr > :last-child {
	border-right: 0;
}


/* ----------------------------------------------------------
   17. NON-STRIPED TABLE VARIANT
   Use:
   <div class="table-responsive table-plain">
   ---------------------------------------------------------- */

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

table.table-plain tbody tr:nth-child(even) th[scope="row"] {
	background: var(--table-row-heading-background);
}


/* ----------------------------------------------------------
   18. EQUAL-WIDTH COLUMN VARIANT
   Use:
   <div class="table-responsive table-fixed">
   ---------------------------------------------------------- */

table.table-fixed table {
	table-layout: fixed;
}


/* ----------------------------------------------------------
   19. TABLES INSIDE CONTENT CARDS
   ---------------------------------------------------------- */

.content-card-content > table:first-child {
	margin-top: 0;
}

.content-card-content > table:last-child {
	margin-bottom: 0;
}


/* ----------------------------------------------------------
   20. MOBILE AND SMALL SCREENS
   ---------------------------------------------------------- */

@media (max-width: 40rem) {
	table table {
		min-width: var(--table-mobile-min-width);
		font-size: 0.9375rem;
	}

	table thead th,
	table tbody th,
	table tbody td,
	table tfoot th,
	table tfoot td {
		padding: 0.75rem;
	}

	table caption {
		padding: 0.75rem;
		font-size: 1rem;
	}
}


/* ----------------------------------------------------------
   21. REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	table {
		scroll-behavior: auto;
	}
}


#aspnetForm > div.container-fluid > div > div > section > div > div > div:nth-child(2) > div:nth-child(1) {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    overflow: hidden;
    transition: all .25s ease;
    height: 100%;
}

.table th {
    background: #2b0e48!important;
    color: white;
}