/* # Design Token Implementation Log

## Token Registry
See `common.scss` for the full list of Primitive and Semantic tokens.

## Implementation Status
- Typography: Completed (Primitive and Semantic tokens implemented)
- Spacing: Partially completed

### Spacing Tokens Added
Primitive tokens were implemented for:
    - space-text-table-title-top
    - space-table-padding-right
    - space-table-padding-left
    - space-table-padding-bottom
    - space-table-padding-top
	- space-text-table-description-top

### TODO
- Complete implementation of remaining spacing tokens
- Implement semantic tokens for spacing where applicable
- Review and update color tokens
- Ensure consistent usage across all table components

## Notes
- These new spacing tokens should be used for all table-related padding and margins
- Refer to the design system documentation for proper usage guidelines
- When implementing, replace pixel values with corresponding token variables

Example usage:
.table-title {
    margin-top: var(--space-text-table-title-top);
}

.table-cell {
    padding: var(--space-table-padding-top) var(--space-table-padding-right) var(--space-table-padding-bottom) var(--space-table-padding-left);
}
*/
:root {
	--table-selected-fill: var(--azure);
	--accent-color: var(--btn-color);
	--checkbox-display: grid;
	--checkbox-columns:  var(--checkbox-height) auto;
	--checkbox-height: 16px;
	--space-2xsmall: 4px;
	--input-2col: auto max-content max-content;
	--columns-horizontal: min-content min-content;
	--asterisk-1col: 0fr 2fr max-content;
	--checkbox-columns:  var(--checkbox-height) auto;
	--checkbox-rows: none; /* default value */
	--align-items: center;
	--input-margin: unset;
	--checkbox-border-radius: var(--space-2xsmall);
	--lg-checkbox-icon-width: 10px;
	--lg-checkbox-icon-height: 10px;
	--checkbox-icon-width: var(--lg-checkbox-icon-width);
	--checkbox-icon-height: var(--lg-checkbox-icon-height);
	--input-space-mdheight: 8px 12px;
	--top-bottom: 8px 0;
	--margin-right-sm: 0px 20px 0px 3px;
	--label-width: 171px;
	--left-sidebar-input-left-margin: 14px;
}

table,
table th,
table td {
	box-sizing: border-box;
}

table td {
	overflow-wrap: anywhere;
}

table thead .tableRowHeader .sorting,
table thead .tableRowHeader .sorting_asc,
table thead .tableRowHeader .sorting_desc {
	background-image: none;
}

table thead th,
.ui-state-default,
.dataTables_wrapper table.dataTable thead th {
	text-transform: uppercase;
	background-color: var(--table-column-header-fill);
  color: var(--lightest);
  text-align: left;
}
table thead th,
.dataTables_wrapper table.dataTable thead th {
	border-right: var(--base-unit) solid var(--lightest);
	font: var(--text-table-header);
}
table thead th:last-child,
.dataTables_wrapper table.dataTable thead th:last-child {
	border-right: 2px solid var(--table-column-header-fill);
}
table thead th.sorting_asc,
table thead th.sorting_desc {
	--table-column-header-fill: var(--darkest);
}
table tbody tr.row_selected,
table tbody tr.selected,
table tr.selected,
table.dataTable tr.even.selected {
	background-color: var(--table-selected-fill);
}

table tr.odd { background-color: var(--light-gray); }
table tr.even { background-color: var(--lightest); }

table.dataTable tr td, table.dataTable tr th {
	padding: var(--space-xsmall) var(--space-xsmall);
}

table tr.odd.selected td.sorting_1,
table tr.even.selected td.sorting_1,
table tr.odd td.sorting_1  {
	background-color: var(--table-selected-fill);
}
table tbody tr.selected,
table tbody tr.row_selected {
	border: 1px solid var(--mid-gray);
}
table tr.odd td.sorting_1 {
	--table-selected-fill: var(--azure-gray);
}
table tr.even td.sorting_1 {
	background-color: var(--table-selected-fill);
	--table-selected-fill: var(--azure);
}
table thead .sorting_desc,
table thead .sorting_asc  {
	background-color: var(--darkest);
	color: var(--lightest);
}
table tr.even.selected td.sorting_1 {
	background-color: var(--bright-azure);
}
table, table.dataTable th, table.dataTable td {
	box-sizing: border-box;
}

table.dataTable,
table.dataTable th,
table.dataTable td {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}
table.dataTable td {
	font: var(--text-table-data);
}
.dataTables_wrapper {
	position: relative;
	clear: both;
	zoom: 1
}
table.dataTable thead .sorting {
	background-image: url("../images/sort_both.png")
}

table.dataTable thead .sorting_asc {
	background-image: url("../images/sort_asc.png")
}

table.dataTable thead .sorting_desc {
	background-image: url("../images/sort_desc.png")
}

table.dataTable thead .sorting_asc_disabled {
	background-image: url("../images/sort_asc_disabled.png")
}

table.dataTable thead .sorting_desc_disabled {
	background-image: url("../images/sort_desc_disabled.png")
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
	background-repeat: no-repeat;
	background-position: center right
}

.dataTables_wrapper table,
table.dataTable.no-footer {
	border: 1px solid var(--light-gray);
}
.dataTables_wrapper .dataTables_scrollHeadInner table {
	margin-top: var(--space-small);
}
.dataTables_wrapper .dataTables_length {
	float: left
}

.dataTables_wrapper .dataTables_filter {
	float: right;
	text-align: right
}

.dataTables_wrapper .dataTables_filter input {
	margin-left: 0.5em
}

.dataTables_wrapper .dataTables_info {
	clear: both;
	float: left
}

#publicDataStructuresContainer .dataTables_wrapper .dataTables_info {
	float: right;
	padding: var(--space-small);
}

.dataTables_wrapper .dataTables_paginate {
	float: right;
	text-align: right;
	padding-top: 0.25em
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	box-sizing: border-box;
	display: inline-block;
	min-width: 1.5em;
	padding: 0.5em 1em;
	margin-left: 2px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 2px
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border: 1px solid #979797;
	background-color: white;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
	background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	cursor: default;
	color: #666 !important;
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: white !important;
	border: 1px solid #111;
	background-color: #585858;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
	background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
	background: -moz-linear-gradient(top, #585858 0%, #111 100%);
	background: -ms-linear-gradient(top, #585858 0%, #111 100%);
	background: -o-linear-gradient(top, #585858 0%, #111 100%);
	background: linear-gradient(to bottom, #585858 0%, #111 100%)
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
	outline: none;
	background-color: #2b2b2b;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
	background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
	box-shadow: inset 0 0 3px #111
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
	padding: 0 1em
}

.dataTables_wrapper .dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 40px;
	margin-left: -50%;
	margin-top: -25px;
	padding-top: 20px;
	text-align: center;
	font-size: 1.2em;
	background-color: white;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%)
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
	color: var(--medium-gray);
}

.dataTables_wrapper .dataTables_scroll {
	clear: both;
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td {
	vertical-align: middle
}

.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>th>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>thead>tr>td>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>th>div.dataTables_sizing,
.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody>table>tbody>tr>td>div.dataTables_sizing {
	height: 0;
	overflow: hidden;
	margin: 0 !important;
	padding: 0 !important
}

.dataTables_wrapper.no-footer .dataTables_scrollBody {
	border: 1px solid var(--light-gray);
	overflow-x: hidden;
}

.dataTables_wrapper:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0
}

@media screen and (max-width: 767px) {
	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		float: none;
		text-align: center
	}

	.dataTables_wrapper .dataTables_paginate {
		margin-top: 0.5em
	}
}

@media screen and (max-width: 640px) {
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter {
		float: none;
		text-align: center
	}

	.dataTables_wrapper .dataTables_filter {
		margin-top: 0.5em
	}
}

@keyframes dtb-spinner {
	100% {
		transform: rotate(360deg)
	}
}

@-o-keyframes dtb-spinner {
	100% {
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-ms-keyframes dtb-spinner {
	100% {
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes dtb-spinner {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-moz-keyframes dtb-spinner {
	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

div.dt-button-info>div {
	padding: 1em
}

button.dt-button,
div.dt-button,
a.dt-button {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	margin-right: 0.333em;
	padding: 0.5em 1em;
	border: 1px solid #999;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.88em;
	color: black;
	white-space: nowrap;
	overflow: hidden;
	background-color: #e9e9e9;
	background-image: -webkit-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='white', EndColorStr='#e9e9e9');
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	outline: none
}

button.dt-button.disabled,
div.dt-button.disabled,
a.dt-button.disabled {
	color: #999;
	border: 1px solid #d0d0d0;
	cursor: default;
	background-color: #f9f9f9;
	background-image: -webkit-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: -moz-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: -ms-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: -o-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#f9f9f9')
}

button.dt-button:active:not(.disabled),
button.dt-button.active:not(.disabled),
div.dt-button:active:not(.disabled),
div.dt-button.active:not(.disabled),
a.dt-button:active:not(.disabled),
a.dt-button.active:not(.disabled) {
	background-color: #e2e2e2;
	background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: -moz-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: -ms-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: -o-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: linear-gradient(to bottom, #f3f3f3 0%, #e2e2e2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f3f3f3', EndColorStr='#e2e2e2');
	box-shadow: inset 1px 1px 3px #999999
}

button.dt-button:active:not(.disabled):hover:not(.disabled),
button.dt-button.active:not(.disabled):hover:not(.disabled),
div.dt-button:active:not(.disabled):hover:not(.disabled),
div.dt-button.active:not(.disabled):hover:not(.disabled),
a.dt-button:active:not(.disabled):hover:not(.disabled),
a.dt-button.active:not(.disabled):hover:not(.disabled) {
	box-shadow: inset 1px 1px 3px #999999;
	background-color: #cccccc;
	background-image: -webkit-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: -moz-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: -ms-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: -o-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: linear-gradient(to bottom, #eaeaea 0%, #ccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#eaeaea', EndColorStr='#cccccc')
}

button.dt-button:hover,
div.dt-button:hover,
a.dt-button:hover {
	text-decoration: none
}

button.dt-button:hover:not(.disabled),
div.dt-button:hover:not(.disabled),
a.dt-button:hover:not(.disabled) {
	border: 1px solid #666;
	background-color: #e0e0e0;
	background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: -ms-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: -o-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: linear-gradient(to bottom, #f9f9f9 0%, #e0e0e0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f9f9f9', EndColorStr='#e0e0e0')
}

button.dt-button:focus:not(.disabled),
div.dt-button:focus:not(.disabled),
a.dt-button:focus:not(.disabled) {
	border: 1px solid #426c9e;
	text-shadow: 0 1px 0 #c4def1;
	outline: none;
	background-color: #79ace9;
	background-image: -webkit-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: -moz-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: -ms-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: -o-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: linear-gradient(to bottom, #bddef4 0%, #79ace9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#bddef4', EndColorStr='#79ace9')
}

.dt-button embed {
	outline: none
}

.hasDatepicker + button.dt-button.buttons-collection {
    margin: var(--space-2xsmall);
}

div.dt-buttons {
	position: relative;
	float: left;
	margin-bottom: var(--space-small);
}

div.dt-buttons.buttons-right {
	float: right
}

div.dt-button-collection {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	margin-top: 3px;
	padding: 8px 8px 4px 8px;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.4);
	background-color: white;
	overflow: hidden;
	z-index: 2002;
	border-radius: 5px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
	z-index: 2002;
	-webkit-column-gap: 8px;
	-moz-column-gap: 8px;
	-ms-column-gap: 8px;
	-o-column-gap: 8px;
	column-gap: 8px
}

div.dt-button-collection button.dt-button,
div.dt-button-collection div.dt-button,
div.dt-button-collection a.dt-button {
	position: relative;
	left: 0;
	right: 0;
	display: block;
	float: none;
	margin-bottom: 4px;
	margin-right: 0;
	height: 15px;
}

div.dt-button-collection button.dt-button:active:not(.disabled),
div.dt-button-collection button.dt-button.active:not(.disabled),
div.dt-button-collection div.dt-button:active:not(.disabled),
div.dt-button-collection div.dt-button.active:not(.disabled),
div.dt-button-collection a.dt-button:active:not(.disabled),
div.dt-button-collection a.dt-button.active:not(.disabled) {
	background-color: #dadada;
	background-image: -webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	background-image: -moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	background-image: -ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	background-image: -o-linear-gradient(top, #f0f0f0 0%, #dadada 100%);
	background-image: linear-gradient(to bottom, #f0f0f0 0%, #dadada 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f0f0f0', EndColorStr='#dadada');
	box-shadow: inset 1px 1px 3px #666
}

div.dt-button-collection.fixed {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -75px;
	border-radius: 0
}

div.dt-button-collection.fixed.two-column {
	margin-left: -150px
}

div.dt-button-collection.fixed.three-column {
	margin-left: -225px
}

div.dt-button-collection.fixed.four-column {
	margin-left: -300px
}

div.dt-button-collection>* {
	-webkit-column-break-inside: avoid;
	break-inside: avoid
}

div.dt-button-collection.two-column {
	width: 300px;
	padding-bottom: 1px;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	-ms-column-count: 2;
	-o-column-count: 2;
	column-count: 2
}

div.dt-button-collection.three-column {
	width: 450px;
	padding-bottom: 1px;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	-ms-column-count: 3;
	-o-column-count: 3;
	column-count: 3
}

div.dt-button-collection.four-column {
	width: 600px;
	padding-bottom: 1px;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	-ms-column-count: 4;
	-o-column-count: 4;
	column-count: 4
}

div.dt-button-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
	background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 2001
}

@media screen and (max-width: 640px) {
	div.dt-buttons {
		float: none !important;
		text-align: center
	}
}
div.dt-buttons {
    position: relative;
    float: left;
}

button.dt-button.processing,
div.dt-button.processing,
a.dt-button.processing {
	color: rgba(0, 0, 0, 0.2)
}

button.dt-button.processing:after,
div.dt-button.processing:after,
a.dt-button.processing:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	box-sizing: border-box;
	display: block;
	content: ' ';
	border: 2px solid #282828;
	border-radius: 50%;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: dtb-spinner 1500ms infinite linear;
	-o-animation: dtb-spinner 1500ms infinite linear;
	-ms-animation: dtb-spinner 1500ms infinite linear;
	-webkit-animation: dtb-spinner 1500ms infinite linear;
	-moz-animation: dtb-spinner 1500ms infinite linear
}

/* because JP needed to change this and couldnt in our local css because the order is wrong */
.dataTables_wrapper .dataTables_processing {
	top: 18px;
	margin-top: 0px;
	height: 200px;
	font-size: 16px;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(left, #fff0 0%, #ffffffe6 25%, #ffffffe6 75%, #fff0 100%);
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(to right, #fff0 0%, #ffffffe6 25%, #ffffffe6 75%, #fff0 100%);
	/* the combination of pdfmake and datatables caused there to be BOTH gradient background AND opacity */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

table.dataTable,
table.dataTable th,
table.dataTable td {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

.dataTables_wrapper {
	position: relative;
	clear: both;
	zoom: 1
}
table.dataTable thead .sorting {
	background-image: url("../images/sort_both.png")
}

table.dataTable thead .sorting_asc {
	background-image: url("../images/sort_asc.png")
}

table.dataTable thead .sorting_desc {
	background-image: url("../images/sort_desc.png")
}

table.dataTable thead .sorting_asc_disabled {
	background-image: url("../images/sort_asc_disabled.png")
}

table.dataTable thead .sorting_desc_disabled {
	background-image: url("../images/sort_desc_disabled.png")
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
	background-repeat: no-repeat;
	background-position: center right
}

.dataTables_wrapper .dataTables_length {
	float: left
}

.dataTables_wrapper .dataTables_filter {
	float: right;
	text-align: right
}

.dataTables_wrapper .dataTables_filter input {
	margin-left: 0.5em
}

.dataTables_wrapper .dataTables_paginate {
	float: right;
	text-align: right;
	padding-top: 0.25em
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	box-sizing: border-box;
	display: inline-block;
	min-width: 1.5em;
	padding: 0.5em 1em;
	margin-left: 2px;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 2px
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border: 1px solid #979797;
	background-color: white;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));
	background: -webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: -moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: -ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: -o-linear-gradient(top, #fff 0%, #dcdcdc 100%);
	background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
	cursor: default;
	color: #666 !important;
	border: 1px solid transparent;
	background: transparent;
	box-shadow: none
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	color: white !important;
	border: 1px solid #111;
	background-color: #585858;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));
	background: -webkit-linear-gradient(top, #585858 0%, #111 100%);
	background: -moz-linear-gradient(top, #585858 0%, #111 100%);
	background: -ms-linear-gradient(top, #585858 0%, #111 100%);
	background: -o-linear-gradient(top, #585858 0%, #111 100%);
	background: linear-gradient(to bottom, #585858 0%, #111 100%)
}

.dataTables_wrapper .dataTables_paginate .paginate_button:active {
	outline: none;
	background-color: #2b2b2b;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
	background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
	background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
	box-shadow: inset 0 0 3px #111
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
	padding: 0 1em
}

.dataTables_wrapper .dataTables_processing {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 40px;
	margin-left: -50%;
	margin-top: -25px;
	padding-top: 20px;
	text-align: center;
	font-size: 1.2em;
	background-color: white;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%)
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
	color: var(--medium-gray);
}

.dataTables_wrapper:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0
}

@media screen and (max-width: 767px) {

	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		float: none;
		text-align: center
	}

	.dataTables_wrapper .dataTables_paginate {
		margin-top: 0.5em
	}
}

@media screen and (max-width: 640px) {

	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_filter {
		float: none;
		text-align: center
	}

	.dataTables_wrapper .dataTables_filter {
		margin-top: 0.5em
	}
}

@keyframes dtb-spinner {
	100% {
		transform: rotate(360deg)
	}
}

@-o-keyframes dtb-spinner {
	100% {
		-o-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-ms-keyframes dtb-spinner {
	100% {
		-ms-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes dtb-spinner {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-moz-keyframes dtb-spinner {
	100% {
		-moz-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

div.dt-button-info {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	margin-top: -100px;
	margin-left: -200px;
	background-color: white;
	border: 2px solid #111;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	text-align: center;
	z-index: 21
}

div.dt-button-info h2 {
	padding: 0.5em;
	margin: 0;
	font-weight: normal;
	border-bottom: 1px solid #ddd;
	background-color: #f3f3f3
}

div.dt-button-info>div {
	padding: 1em
}

button.dt-button,
div.dt-button,
a.dt-button {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	margin-right: 0.333em;
	padding: var(--space-xsmall);
	border: 1px solid #999;
	border-radius: 2px;
	cursor: pointer;
	font-size: 0.88em;
	color: black;
	white-space: nowrap;
	overflow: hidden;
	background-color: #e9e9e9;
	background-image: -webkit-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: -moz-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: -ms-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: -o-linear-gradient(top, #fff 0%, #e9e9e9 100%);
	background-image: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='white', EndColorStr='#e9e9e9');
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-decoration: none;
	outline: none
}

button.dt-button.disabled,
div.dt-button.disabled,
a.dt-button.disabled {
	color: #999;
	border: 1px solid #d0d0d0;
	cursor: default;
	background-color: #f9f9f9;
	background-image: -webkit-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: -moz-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: -ms-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: -o-linear-gradient(top, #fff 0%, #f9f9f9 100%);
	background-image: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#f9f9f9')
}

button.dt-button:active:not(.disabled),
button.dt-button.active:not(.disabled),
div.dt-button:active:not(.disabled),
div.dt-button.active:not(.disabled),
a.dt-button:active:not(.disabled),
a.dt-button.active:not(.disabled) {
	background-color: #e2e2e2;
	background-image: -webkit-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: -moz-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: -ms-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: -o-linear-gradient(top, #f3f3f3 0%, #e2e2e2 100%);
	background-image: linear-gradient(to bottom, #f3f3f3 0%, #e2e2e2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f3f3f3', EndColorStr='#e2e2e2');
	box-shadow: inset 1px 1px 3px #999999
}

button.dt-button:active:not(.disabled):hover:not(.disabled),
button.dt-button.active:not(.disabled):hover:not(.disabled),
div.dt-button:active:not(.disabled):hover:not(.disabled),
div.dt-button.active:not(.disabled):hover:not(.disabled),
a.dt-button:active:not(.disabled):hover:not(.disabled),
a.dt-button.active:not(.disabled):hover:not(.disabled) {
	box-shadow: inset 1px 1px 3px #999999;
	background-color: #cccccc;
	background-image: -webkit-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: -moz-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: -ms-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: -o-linear-gradient(top, #eaeaea 0%, #ccc 100%);
	background-image: linear-gradient(to bottom, #eaeaea 0%, #ccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#eaeaea', EndColorStr='#cccccc')
}

button.dt-button:hover,
div.dt-button:hover,
a.dt-button:hover {
	text-decoration: none
}

button.dt-button:hover:not(.disabled),
div.dt-button:hover:not(.disabled),
a.dt-button:hover:not(.disabled) {
	border: 1px solid #666;
	background-color: #e0e0e0;
	background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: -moz-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: -ms-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: -o-linear-gradient(top, #f9f9f9 0%, #e0e0e0 100%);
	background-image: linear-gradient(to bottom, #f9f9f9 0%, #e0e0e0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#f9f9f9', EndColorStr='#e0e0e0')
}

button.dt-button:focus:not(.disabled),
div.dt-button:focus:not(.disabled),
a.dt-button:focus:not(.disabled) {
	border: 1px solid #426c9e;
	text-shadow: 0 1px 0 #c4def1;
	outline: none;
	background-color: #79ace9;
	background-image: -webkit-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: -moz-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: -ms-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: -o-linear-gradient(top, #bddef4 0%, #79ace9 100%);
	background-image: linear-gradient(to bottom, #bddef4 0%, #79ace9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#bddef4', EndColorStr='#79ace9')
}

.dt-button embed {
	outline: none
}

div.dt-buttons {
	position: relative;
	float: left
}

div.dt-buttons.buttons-right {
	float: right
}


div.dt-button-collection.fixed {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -75px;
	border-radius: 0
}

div.dt-button-collection.fixed.two-column {
	margin-left: -150px
}

div.dt-button-collection.fixed.three-column {
	margin-left: -225px
}

div.dt-button-collection.fixed.four-column {
	margin-left: -300px
}

div.dt-button-collection>* {
	-webkit-column-break-inside: avoid;
	break-inside: avoid
}

div.dt-button-collection.two-column {
	width: 300px;
	padding-bottom: 1px;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	-ms-column-count: 2;
	-o-column-count: 2;
	column-count: 2
}

div.dt-button-collection.three-column {
	width: 450px;
	padding-bottom: 1px;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	-ms-column-count: 3;
	-o-column-count: 3;
	column-count: 3
}

div.dt-button-collection.four-column {
	width: 600px;
	padding-bottom: 1px;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	-ms-column-count: 4;
	-o-column-count: 4;
	column-count: 4
}

div.dt-button-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
	background: -ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: -webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));
	background: -webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	background: radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);
	z-index: 2001
}

@media screen and (max-width: 640px) {
	div.dt-buttons {
		float: none !important;
		text-align: center
	}
}
div.dt-buttons {
    position: relative;
    float: left;
}

button.dt-button.processing,
div.dt-button.processing,
a.dt-button.processing {
	color: rgba(0, 0, 0, 0.2)
}

button.dt-button.processing:after,
div.dt-button.processing:after,
a.dt-button.processing:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	box-sizing: border-box;
	display: block;
	content: ' ';
	border: 2px solid #282828;
	border-radius: 50%;
	border-left-color: transparent;
	border-right-color: transparent;
	animation: dtb-spinner 1500ms infinite linear;
	-o-animation: dtb-spinner 1500ms infinite linear;
	-ms-animation: dtb-spinner 1500ms infinite linear;
	-webkit-animation: dtb-spinner 1500ms infinite linear;
	-moz-animation: dtb-spinner 1500ms infinite linear
}

/* because JP needed to change this and couldnt in our local css because the order is wrong */
.dataTables_wrapper .dataTables_processing {
	top: 18px;
	margin-top: 0px;
	height: 200px;
	font-size: 16px;
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(25%, rgba(255, 255, 255, 0.9)), color-stop(75%, rgba(255, 255, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -moz-linear-gradient(left, #fff0 0%, #ffffffe6 25%, #ffffffe6 75%, #fff0 100%);
	background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 25%, rgba(255, 255, 255, 0.9) 75%, rgba(255, 255, 255, 0) 100%);
	background: linear-gradient(to right, #fff0 0%, #ffffffe6 25%, #ffffffe6 75%, #fff0 100%);
	/* the combination of pdfmake and datatables caused there to be BOTH gradient background AND opacity */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}

.dataTables_paginate .ui-button {
	margin-right: 0;
	background-color: transparent;
  color: var(--mid-gray);
  border: none;
}

.morecontent span {
	display: none;
	word-break: break-all;
	word-wrap: break-word;
	white-space: normal;
}

.showMoreContainer {
	width: 300px;
}

.nowrap {
	white-space: nowrap;
}

.showItem {
	display: inline-block;
	white-space: pre-wrap;
	/* css-3 */
	white-space: -moz-pre-wrap;
	/* Mozilla, since 1999 */
	white-space: -pre-wrap;
	/* Opera 4-6 */
	white-space: -o-pre-wrap;
	/* Opera 7 */
	word-wrap: break-word;
	/* Internet Explorer 5.5+ */
	width: 200px;
}

table tr td:first-child span.fa {
	font-size: 17px;
}

table tr.selected td:first-child span.fa.fa-square-o:before {
	content: "\f046";
}

table tr.selected td:first-child span.fa.fa-circle-o:before {
	content: "\f192";
}

.dialog-wrapper .ui-dialog-titlebar {
	color: var(--lightest);
	padding: .5em 1em;
	position: relative;
}

.dialog-wrapper .ui-dialog-title {
	text-align: left;
}

.dialog-wrapper.ui-widget-content {
	z-index: 3000 !important;
	border: 1.5px solid #0d4063;
}

.dialog-wrapper .ui-dialog-titlebar-close {
	min-width: 20px;
}

.dialog-wrapper .dialog-btn-row,
.dialog-wrapper .dialog-btn-addRow {
	background: #fb7923;
	color: whitesmoke;
	text-shadow: none;
	border: 1px solid #0d4063;
}

.dialog-wrapper .dialog-btn-all,
.dialog-wrapper .dialog-btn-cancel {
	text-shadow: none;
	background: var(--lightest);
	color: #0d4063;
	border: 1px solid #0d4063;
}

.dialog-wrapper .ui-dialog-buttonpane button {
	margin: .4em .4em .5em 0;
}

.dialog-wrapper form input[type=text] {
	width: 100%;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.dialog-wrapper form label {
	float: left;
	font-weight: bold;
}

.paging_full_numbers {
	height: auto;
}

.dataTables_wrapper {
	overflow: visible;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
	margin: 0px;
	background: none;
	min-width: 0;
	padding: 1px 5px;
}

a.dt-button,
a.dt-button:link,
a.dt-button:visited {
	font-weight: bold;
	color: var(--darkest);
}

/* the selection checkbox or radio button, but disabled */
tr.idtSelectionDisabled span.fa {
	cursor: not-allowed;
	color: #BBB;
}

select.select_filter {
	font-size: 12px;
	margin: var(--space-2xsmall);
	height: 30px;
	width: intrinsic;
	/* Safari/WebKit uses a non-standard name */
	width: -moz-max-content;
	/* Firefox */
	width: -webkit-max-content;
	text-transform: capitalize;
}

.idtDateFilter {
	margin: var(--space-2xsmall);
	width: 140px;
	height: 28px;
	background: url(../images/datepicker-icon.svg) no-repeat right center;
	background-size: 30px 18px;
	position: relative;
	border: 1px solid var(--darkest);
	border-radius: 2px;
}

.idtDateRangeLabel {
	margin: var(--space-2xsmall);
	font-size: var(--sans-bold-2xs-font-size);
	font-weight: bold;
}

.dt-button-collection button {
	width: 100%;
}

.dt-filter-group {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}


.dt-filter-group label {
	width: auto;
	font-weight: normal;
	text-align: left;
	margin-top: 0;
	--label-alignment: baseline;
}

input[type="radio"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--lightest);
	width: 16px;
	height: 16px;
	border: 1px solid var(--darkest);
	border-radius: 50%;
	transform: translateY(-0.075em);
	display: inline-grid;
	place-content: center;
	margin: var(--input-margin);
}

input[type="radio"]::before, 
.dataTable tr.selected td:first-child input[type="radio"]::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	transform: scale(0);
	box-shadow: inset 1em 1em var(--primary-brand);
}

input[type="radio"]:checked::before,
.dataTable tr.selected td:first-child input[type="radio"]::before {
	transform: scale(1);
}

.filterForm,
.filterContainer {
	min-width: 194px;
}

.table-filter .filterShowMoreLess {
	float: right;
	font-size: 10px;
}

.table-filter > input[type="text"].dt-filter-text-input {
	width: 140px;
}

#dataElementResultsTable_wrapper > .dataTables_length {
	width: 100%;
}
#dataElementResultsTable_wrapper > .dataTables_length > label {
	align-items: center; /* for flexbox layout on label */
}
#dataElementResultsTable_wrapper > .dt-buttons {
	float: left;
	margin: var(--space-small) 0;
}
#dataElementResultsTable_wrapper > .dt-buttons > .downloadResultsBtn {
	margin: 0;
}
#dataElementResultsTable_wrapper > .dt-buttons > #downloadLinks > p {
	margin: var(--space-2xsmall);
}
legend.filterFieldName:has(> a#selectedDiseases) {
	gap: var(--space-2xsmall);
	justify-content: normal; /* reset to initial value to override filterFieldName style.scss style */
}

.resetLink {
	float: left;
}

#dataElementResultsTable tr td:first-child {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
#dataElementResultsTable tr td.sorting_1:first-child {
	display: table-cell;
}

#dataElementResultsTable tr td.dataTables_empty:first-child {
	display: table-cell;
}

.showMoreContainer {
	width: auto;
}

.dataTableLineEllipsis {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.filterContainer {
	overflow-y: scroll;
	overflow-x: hidden;
	max-height: 700px;
}

.filterWrapper {
	padding: 0px 0px 0px 0px;
	margin-left: 23px;
	border: 1px solid blue;
	display: none;
}

.filterHeader {
	padding: var(--space-xsmall);
}

.facetButtons {
	padding-left: 12px;
	display: flex;
	flex-flow: wrap;
	align-items: center;
	justify-content: space-between;
}

fieldset legend {
	font-size: 12px;
	font-weight: bold;
	padding: 9px 0px 9px 0px;
	border-top: 1px solid #A8A8A8;
	width: 100%;
	line-height: 1.5;
}

fieldset {
	padding-bottom: 0px;
	border-bottom: none;
	width: 155px;
	margin-left: 23px;
}

fieldset ul {
	max-height: 155px;
	width: 155px;
	list-style-type: none;
	margin-left: 23px;
	padding-bottom: 15px;
}

.facet-form-field {
	overflow-x: hidden;
}

.qt-element-filter {
	overflow-x: inherit;
}

.qt-disease-filter {
	overflow-y: auto;
}

.qt-population-filter {
	margin-bottom: 0px;
	overflow-x: inherit;
}


.tableFilterChevron {
	position: relative;
	margin-top: 5%;
	transform: rotate(90deg);
}

#selectedDiseasesOptions {
	overflow-y: hidden;
	max-height: none;
}

#diseaseSelections {
	max-height: none;
}

#left-sidebar #Ownership  li,
#left-sidebar #Resource  li,
#left-sidebar #dataStructureOwnerOptions li,
#left-sidebar #dataElementOwnerShipOptions li,
#left-sidebar #dataStructureOwnerOptions li,
#left-sidebar #eformOwnerOptions li {
	float: left;
	padding-right: 12px;
	margin-bottom: 10px!important;
}

#mainFilterContainer .date-filter-field {
	height: 32px !important;
	border-radius: 4px !important;
}

/*add the checkbox to each column in column visibility dropdown*/

.dt-button-collection button.buttons-columnVisibility:hover {
	border: none !important;
}

.dt-button-collection button.buttons-columnVisibility.active:not(.disabled),
.dt-button-collection button.buttons-columnVisibility,
.dt-button-collection button.buttons-columnVisibility.active {
	background-color: var(--lightest) !important;
	border: none;
	box-shadow: none !important;
	background-image: none !important;
	padding: 0px 1em 0px;
}
.dt-button-collection button.buttons-columnVisibility.active:before {
	background-color: var(--primary-brand);
}
.dt-button-collection button.buttons-columnVisibility:before,
.dt-button-collection button.buttons-columnVisibility.active span:before {
	background-color: var(--lightest);
	display: block;
	position: absolute;
	top: 1px;
	left: 0;
}

.dt-button-collection button.buttons-columnVisibility:before {
	--checkbox-icon-width: var(--space-small);
	--checkbox-icon-height: var(--space-small);
	content: ' ';
	margin-top: 0;
	margin-left: 0;
	border: 1.5px solid var(--primary-brand);
	border-radius: 2px;
	width: var(--checkbox-icon-width);
	height: var(--checkbox-icon-height);

}

.dt-button-collection button.buttons-columnVisibility.active span:before {
	content: ' ';
	text-align: center;
	background-color: var(--primary-brand);
  box-shadow: inset 1em 1em var(--lightest);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(1);
	width: 7px;
  height: 7px;
	left: -8px;
  top: 10px;
}

.dt-button-collection button.buttons-columnVisibility span {
	background-color: var(--lightest);
	margin-top: 0px;
	margin-left: 8px;
	float: left;
	font-size: 10px;
}


.checkbox_group {
	margin-left: var(--left-sidebar-input-left-margin);
	font-size: 12px;
	margin-bottom: 4px;
}

#left-sidebar {
	--input-margin: 0 0 var(--space-2xsmall);
	--align-items: stretch;
}

input[type="checkbox"],
.vt-body .card input[type="checkbox"] {
	box-sizing: border-box;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--lightest);
	border: 1px solid var(--primary-brand);
	display: var(--checkbox-display);
	place-content: center;
	margin: var(--input-margin);
	border-radius: var(--checkbox-border-radius);
	height: var(--checkbox-height);
	width: var(--checkbox-height);
}

input[type="checkbox"]::before {
	content: "";
	width: var(--checkbox-icon-width);
	height: var(--checkbox-icon-height);
	transform: scale(0);
	transform-origin: bottom left;
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked,
.vt-body .card input[type="checkbox"]:checked,
.dataTable .selected td input[type="checkbox"]{
	background: var(--primary-brand);
}

input[type="checkbox"]:checked::before,
.vt-body .card input[type="checkbox"]:checked::before,
.dataTable .selected td input[type="checkbox"]::before {
	box-shadow: inset 1em 1em var(--lightest);
	clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
	transform: scale(1);
}

input[disabled],
.idtSelectionDisabled input[type="checkbox"] {
	border: 1px solid var(--checkbox-disabled-stroke);
}

input[disabled]:checked,
.idtSelectionDisabled input[type="checkbox"]  {
	background: var(--disabled);
}

input[disabled]:checked:before,
.idtSelectionDisabled input[type="checkbox"]:checked::before  {
	box-shadow: inset 1em 1em var(--checkbox-disabled-stroke);
}

.checkbox-grid,
.checkbox_group div {
	display: grid;
	grid-template-columns: var(--checkbox-columns);
	grid-template-rows: var(--checkbox-rows);
	gap: var(--space-2xsmall);
	align-items: var(--align-items);
	font: var(--text-checkbox-label-regular);
}

.checkboxgroup-horizontal,
.checkboxgroup {
	display: var(--checkbox-display);
	grid-template-columns: var(--columns-horizontal);
	gap: var(--space-2xsmall);
}
#mainFilterContainer .checkbox_group div {
	--align-items: baseline;
}

.checkboxgroup.required .checkbox-grid {
	--checkbox-columns: 16px max-content 16px max-content;
	overflow: visible;
}
.dmr-checkbox-wrapper {
	--checkbox-columns: var(--asterisk-1col);
}

.dmr-checkbox-label{
	--checkbox-columns:var(--input-2col);
	--align-items: end;
	--input-margin: unset;
}
.certify {
	--align-items: center;
}
.vt-exportDetails-container {
	--checkbox-columns: max-content 14px auto;
    --checkbox-height: 14px;
    --align-items: baseline;
	
}

.idt_selectColumnDrop input[type="checkbox"]{
    --checkbox-height: 10px;
    --checkbox-border-radius: 2px;
	--checkbox-icon-width: 6.7px;
	--checkbox-icon-height: 5.29px;
	--input-margin: 0 0 4px;
}

.idt_selectColumnRow input[type="checkbox"]{
    --input-margin: 1.5px var(--space-2xsmall) 1.5px 0;
}
.formcreator_dialog input[type="checkbox"] {
    width: var(--checkbox-height);
}
.dataTableContainer tbody input[type="checkbox"] {
	margin-left: 0;
}
.vt-body .idt_selectColumnRow {
	text-transform: capitalize;
}
.secondResultPaneSearch {
	--checkbox-columns: min-content auto;
	--checkbox-rows: var(--checkbox-height);
	padding: 5px 5px 0 5px;
}

.filterLogicBeforeContainer, .filterLogicAfterContainer {
	--checkbox-display: inline-grid;
}
.idt_selectAllSelector {
	left: 3px;
}

.queryFilter .enumeratedList > div,
.queryFilter .showBlanks {
	--checkbox-rows: var(--checkbox-height);
	--checkbox-columns: 16px max-content auto;
    margin: 0px 0px 4px 4px;
}
.queryFilter .enumeratedList > div:first-child {
	margin: 4px;
}
.queryFilter .showBlanks {
    margin-left: 4px;
}
#accountGuidanceEmailsForm .radio-btn-group,
#accountGuidanceEmailsFormAR .radio-btn-group {
	width: 425px;
}
#accountGuidanceEmailsForm .radio-button-label,
#accountGuidanceEmailsFormAR .radio-button-label {
	width: min-content;
}

.multiselect-container.dropdown-menu .checkbox {
	gap: var(--space-2xsmall);
}

#siteName + div.flex-inline {
	height: 23px; /* = adjacent textfield (#siteName) height */
}
input[type="checkbox"]#isPrimarySite {
	margin-left: 15px;
}
label[for="isPrimarySite"] {
	font-weight: normal;
	width: fit-content;
}

#memberApprovalTable .checkboxgroup-horizontal {
	--checkbox-display: inline-grid;
	--columns-horizontal: repeat(3, max-content);
}

#accGenomicsOption {
	margin-left: 3em;
}
#accPrivilegeChecklist > .accPrivilege {
	float: left;
	margin-bottom: var(--space-xsmall);
	padding-right: var(--space-small);
}
#accPrivilegeChecklist input[name="roleRadioGroup"],
#accGenomicsOption input[name="genomicsRadioGroup"] {
	--input-margin: 0 var(--space-2xsmall) 0 0;
}

#accGenomicsOption .genomicsRadioGroup {
	float: left;
	margin: var(--space-xsmall) 0 var(--space-xsmall) 45px; /* refactor margin-left from inline style */
}
#accGenomicsOption .genomicsRadioGroup.flex-inline {
	gap: var(--space-small);
}
#accGenomicsOption .genomicsRadioGroup > div {
	float: left;
}
#accGenomicsOption label[for="genomicsRadioGroupYes"],
#accGenomicsOption label[for="genomicsRadioGroupNo"] {
	font-size: 12px;
	width: auto;
}

.eSignatureForm .form-field.flex-inline {
	align-items: flex-start;
}

div[id="Study Overview"] .checkboxgroup-vertical li.radio-button-alignment:nth-child(2) {
	margin-bottom: var(--space-xsmall) !important;
}
div[id="Study Overview"] .checkboxgroup-vertical li.radio-button-alignment > label {
	width: auto;
}
#metaStudyDialog .formrow_1 input[type="radio"] + label {
	/*TODO: check if able to remove extra specificity */
	margin: 0 var(--space-small) 0 var(--space-2xsmall);
}
#mst-closeMatchCheckContainer {
	--label-width: none;
	--input-margin: 0 0 0 4px;
}
#temporaryRejectionLightboxDiv {
	--input-margin: 0 4px;
	--display-flexcheckbox: inline;
}
.ui-dialog {
    --input-margin: 0 4px;
}
.flex-checkbox label {
    display: var(--display-flexcheckbox);
}

.idtTableContainer .select2-container--default .select2-selection--single {
	height: 31px;
}
#mainFilterContainer > div[id='Modified Date'] > span.select2-container {
	float: none; /* reset to initial value to override common.scss style */
	width: 90% !important;
}

.idtHeader h3 { margin-bottom: var(--space-xsmall); }
.idtHeader p, .idtHeader .idt_searchContainer { margin: 0; }
.idtHeader .idtHeaderActions .dt-buttons, .idtHeader .idtHeaderActions .dt-buttons button { margin-bottom: 0; }

.idtHeader > div { width: 100%; }
.idtHeader > .idtHeaderActions { flex-shrink: 3; }

/* flexbox layout */
.idtHeader {
	align-items: flex-end;
	margin-bottom: var(--space-small);
}

#metaStudyAccessReportsWrapper .dt-buttons > button { margin: 0 var(--space-xsmall); }