.dataTable-row > th,
.dataTable-row > td,
.dataTable-table input,
.dataTable-table textarea,
.dataTable-table select {
	-webkit-box-sizing : border-box;
	-moz-box-sizing    : border-box;
	box-sizing         : border-box;
 }

/* Temporarily contains the DOM structure to be converted to a dataTable
*******************************************************************************/
.dataTable {
	display: none;
}

/* Contains the dataTable
*******************************************************************************/
.dataTable-container {
	max-width: 100%;
	margin: 10px 20px;
	font-size: 12px;
}

.section > .dataTable-container {
	margin: 10px 0;
}

.dataTable-center {
	text-align: center;
}

.dataTable-container.dataTable-loading {
	position : relative;
	z-index  : 0;
}

.dataTable-container.dataTable-loading:before,
.dataTable-container.dataTable-loading:after {
	content: '';
	position: absolute;
	z-index: 9999;
	display: block;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	background: url(img/loading_bar.gif) center no-repeat;
}

.dataTable-container.dataTable-loading:before {
	background-color: #000;
	opacity: 0.25;
}

/* Wraps the entire dataTable and its Controls
*******************************************************************************/
.dataTable-wrapper {
	position: relative;
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	text-align: left;
}

/* Controls
*******************************************************************************/
.dataTable-controls {
	display: block;
	margin: 0 0 5px
}

.dataTable-controls.bottom {
	margin: 5px 0 0;
}

/* Pagination
*******************************************************************************/
.dataTable-paginationButtons,
.dataTable-recordCount {
	display: none;
	vertical-align: middle;
	padding: 0;
	margin-right: 20px;
}

.dataTable-paginationButtons.active,
.dataTable-recordCount {
	display: inline-block;
}

.dataTable-recordCount {
	margin-left:-10px;
}

.dataTable-recordCount.margin {
	margin-left:10px !important;
}

.dataTable-nextPage,
.dataTable-previousPage {
	display: inline-block;
	vertical-align: middle;
	width: 70px;
	line-height: 14px;
	padding: 0;
	margin: 0 10px;
}

.dataTable-pageNumberContainer,
.dataTable-pageNumber,
.dataTable-pageTotal,
.dataTable-recordCount {
	display: inline-block;
	vertical-align: middle;
}

.dataTable-pageNumber {
	width: 35px;
	height: 18px;
	text-align: center;
}

.dataTable-pageTotal:before {
	content: '/';
	display: inline-block;
	margin: 0 4px;
}

/* Export buttons
*******************************************************************************/
.dataTable-exportButtons {
	display: none;
	vertical-align: middle;
	margin-right: 20px;
	height: 20px;
	line-height: 18px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #FFF;
	color: #000;
	overflow: hidden;
}

.dataTable-export > .dataTable-wrapper > .dataTable-controls .dataTable-exportButtons {
	display: inline-block;
}

.dataTable-exportButton, .dataTable-pageSizeControlButton, .dataTable-filterToggleButton {
	display: inline-block;
	vertical-align: middle;
	padding: 0 5px;
	height: 100%;
	font-weight: bold;
	background-color: #6AD;
	color: #FFF;
}

.dataTable-exportButtons button {
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px;
	width: 16px;
	height: 16px;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	overflow: hidden;
}

.dataTable-csvButton {
	background-image: url(img/csv.png);
}

.dataTable-printButton {
	background-image: url(img/print.png);
}

/* Toggle Columns
*******************************************************************************/
.dataTable-toggleColumnsButton,
.dataTable-clearFiltersButton {
	vertical-align: middle;
	margin-right: 20px;
	height: 22px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #6AD;
	color: #FFF;
	overflow: hidden;
	font-weight: bold;
}

.dataTable-toggleColumnsButton {
	display: none;
}

.dataTable-toggleColumns .dataTable-toggleColumnsButton {
	display: inline-block;
}

.dataTable-toggleColumnsPopup {
	display: block;
	padding: 1rem;
	background-color: #FFF;
	white-space: nowrap;
}

.dataTable-toggleColumnsHeader {
	margin: 0 0 1rem 0;
	font-size: 1.5rem;
	font-weight: bold;
}

.dataTable-toggleColumnsCheckboxContainer {
	display: block;
}

.dataTable-toggleColumnsCheckbox {
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5rem;
}

.dataTable-toggleColumnsCheckboxText {
	display: inline-block;
	vertical-align: middle;
}

/* Communication message buttons
*******************************************************************************/
.dataTable-messageLabel {
	background-color : #6AD;
	color            : #FFF;
	display          : inline-block;
	font-weight      : bold;
	padding          : 0 5px;
}

.dataTable-communicationButtons .chat-icon {
	height : 15px;
	width  : 15px;
}

.dataTable-communicationButtons {
	border         : 1px solid #457;
	border-radius  : 3px;
	display        : none;
	height         : 20px;
	line-height    : 18px;
	margin-right   : 20px;
	overflow       : hidden;
	padding-top    : 1px;
	vertical-align : middle;
}

.dataTable-messageStudentsButton,
.dataTable-messageStaffButton,
.dataTable-messageUsersButton {
	background     : transparent;
	border         : none;
	display        : none;
	margin         : 0 5px;
	padding        : 0;
	vertical-align : middle;
}

.dataTable-messageStudents .dataTable-communicationButtons,
.dataTable-messageStaff .dataTable-communicationButtons,
.dataTable-messageUsers .dataTable-communicationButtons,
.dataTable-messageStudents .dataTable-messageStudentsButton,
.dataTable-messageStaff .dataTable-messageStaffButton,
.dataTable-messageUsers .dataTable-messageUsersButton {
	display : inline-block;
}

/* Create Record buttong
*******************************************************************************/
.dataTable-createRecordButton {
	display: none;
	vertical-align: middle;
	margin-right: 20px;
	height: 22px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #21ba45;
	color: #FFF;
	overflow: hidden;
	font-weight: bold;
}

.dataTable-showCreateRecord .dataTable-createRecordButton {
	display: inline-block;
}

.dataTable-showCreateRecord .dataTable-insertRow:not(.dataTable-viewRecordActive) {
	display: none;
}

/* Import Button
*******************************************************************************/
.dataTable-importButton {
	display: none;
	vertical-align: middle;
	margin-right: 20px;
	height: 22px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #6AD;
	color: #FFF;
	overflow: hidden;
	font-weight: bold;
}

.dataTable-import > .dataTable-wrapper > .dataTable-controls .dataTable-importButton {
	display: inline-block;
}

.dataTable-importInput {
	display: none;
	opacity: 0;
}

.dataTable-importPopup {
	display: block;
	margin: 0px !important;
	white-space: nowrap;
	width: 800px;
	max-height: 600px;
	overflow: auto;
}

.dataTable-importHeader {
	margin: 0 0 1rem 0;
	font-size: 1.5rem;
	font-weight: bold;
}

.dataTable-importPopup .section-buttons {
	text-align: right;
}

.dataTable-importPopup .section-options > label > span {
	padding-left: 5px;
}

.dataTable-importError {
	color: #8B1820;
	overflow: auto;
}

/* Mass Update
*******************************************************************************/
.dataTable-massUpdateButtons {
	display: none;
	float: right;
}

.dataTable-massUpdate .dataTable-massUpdateButtons {
	display: block;
}

.dataTable-massUpdateButton,
.dataTable-massUpdateSaveButton {
	vertical-align: middle;
	height: 20px;
	line-height: 18px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #6AD;
	color: #FFF;
	overflow: hidden;
	font-weight: bold;
}

.dataTable-massUpdateSaveButton {
	display: none;
	background-color: #FF3A3A;
	border-color: #BB0000;
	margin-left: 20px;
}

.dataTable-massUpdateButton,
.dataTable-massUpdatePending .dataTable-massUpdateSaveButton {
	display: inline-block;
}

.dataTable-massUpdatePopup {
	display: block;
	padding: 1rem;
	background-color: #FFF;
	white-space: nowrap;
}

.dataTable-massUpdateHeader {
	margin: 0 0 1rem 0;
	font-size: 1.5rem;
	font-weight: bold;
}

.dataTable-massUpdateContainer {
	display: inline-block;
	vertical-align: top;
}

.dataTable-massUpdateContainer + .dataTable-massUpdateContainer {
	margin-left: 1rem;
}

.dataTable-massUpdateContainer:last-child {
	vertical-align: bottom;
}

.dataTable-massUpdateContainer .label {
	font-weight:bold;
	margin-bottom: 0.1rem;
}

/* Page Size
*******************************************************************************/
.dataTable-pageSizeControl {
	display: none;
	vertical-align: middle;
	margin-right: 20px;
	height: 20px;
	line-height: 18px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #FFF;
	text-align: left;
	font-weight: normal;
	color: #000;
	overflow: hidden;
}

.dataTable-filters > .dataTable-wrapper > .dataTable-controls .dataTable-pageSizeControl {
	display: inline-block;
}

.dataTable-pageSize {
	display: inline-block;
	vertical-align: middle;
	width: 35px;
	height: 18px;
	text-align: center;
	border: none;
}

.dataTable-pageSizeControl:before,
.dataTable-pageSizeControl:after {
	display: inline-block;
	vertical-align: middle;
	padding: 0 5px;
	height: 100%;
	font-weight: bold;
}

/* Filters
*******************************************************************************/
.dataTable-filterToggle {
	display: none;
	vertical-align: middle;
	margin-right: 20px;
	height: 20px;
	line-height: 18px;
	border: 1px solid #457;
	border-radius: 3px;
	background-color: #FFF;
	text-align: left;
	font-weight: normal;
	color: #000;
	cursor: pointer;
	overflow: hidden;
}

.dataTable-filters > .dataTable-wrapper > .dataTable-controls .dataTable-filterToggle {
	display: inline-block;
}

.dataTable-filterToggleButtons {
	display: inline-block;
	vertical-align: middle;
	padding: 0 5px;
	height: 100%;
	font-weight: bold;
}

.dataTable-filterToggle.dataTable-filtering > .dataTable-filterOnToggle,
.dataTable-filterToggle:not(.dataTable-filtering) > .dataTable-filterOffToggle {
	display: inline-block;
}
.dataTable-filterToggle.dataTable-filtering > .dataTable-filterOffToggle,
.dataTable-filterToggle:not(.dataTable-filtering) > .dataTable-filterOnToggle {
	display: none;
}

.dataTable-filterRow {
	display: none;
	background-color: transparent;
}

.dataTable-thead.dataTable-filtering .dataTable-filterRow {
	display: table-row;
}

.dataTable .dataTable-filterRow th,
.dataTable .dataTable-filterRow td {
	min-width: 60px;
	border-left-color: transparent !important;
	background-color: #CDE;
	vertical-align: top !important;
	box-shadow: 0 -8px 2px -6px rgba(0, 0, 0, 0.2) inset !important;
}

.dataTable-filterWrapper {
	position: relative;
	padding-left: 18px;
	margin-bottom: 2px;
	text-align: center;
}

.dataTable-filterWrapper.dataTable-filterWrapperCheckbox {
	padding: 0;
}

.dataTable-filter {
	width: 50px !important;
	padding-right: 20px !important;
}

.dataTable-addFilter,
.dataTable-deleteFilter,
.dataTable-changeFilterType {
	position: absolute;
	display: block;
	top: 50%;
	left: 0;
	width: 16px;
	height: 16px;
	line-height: 16px;
	margin-top: -7px;
	cursor: pointer;
}

.dataTable-addFilter {
	background: url(img/tiny_plus.png);
}
.dataTable-deleteFilter {
	background: url(img/tiny_minus.png);
}
.dataTable-changeFilterType {
	left: auto;
	right: 0;
	margin-top: -8px;
	width: 20px;
	text-align: center;
}

.dataTable-changeFilterType:before {
	content: '\25BC';
	color: #666;
}

.dataTable-filterList {
	display: none;
	position: absolute;
	z-index: 99999;
	border: 1px solid #AAA;
	border-radius: 4px;
	background-color: #FEFEFE;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
	min-width: 100px;
}

.dataTable-filterList.active {
	display: block;
}

.dataTable-filterType {
	position: relative;
	padding-right: 40px;
	height: 20px;
	line-height: 20px;
	background: transparent;
	color: #000;
	cursor: pointer;
	white-space: nowrap;
}

.dataTable-filterType:hover {
	background-color: #34F;
	color: #FFF;
}

.dataTable-filterTypeText {
	padding: 0 10px;
	height: inherit;
	line-height: inherit;
}

.dataTable-filterTypeNegate {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	line-height: 20px;
	border-left: 1px solid #AAA;
	background: #DDD;
	color: #000;
	text-align: center;
}

.dataTable-filterType + .dataTable-filterType .dataTable-filterTypeNegate {
	border-top: 1px solid #AAA;
}

.dataTable-filterTypeNegate:hover {
	background: #EEE;
}

.dataTable-row.filtered {
	display: none;
}

/* Contains the table
*******************************************************************************/
.dataTable-scroll,
.dataTable-table {
	border: 1px solid #AAA;
	border-top: 0;
}

.dataTable-scroll {
	display: inline-block;
	vertical-align: top;
	max-width: 100%;
	outline: 0;
	overflow: auto;
	overflow-x: scroll;
	scrollbar-width: thin;
}

.dataTable-stretch > .dataTable-wrapper,
.dataTable-stretch > .dataTable-wrapper > .dataTable-scroll {
	width: 100%;
}

.dataTable-scroll::-webkit-scrollbar {
	-webkit-appearance: none;
	height: 10px;
	width: 7px;
}

.dataTable-scroll::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Handle empty tables
*******************************************************************************/
.dataTable-noRecords {
	display: none;
}

.dataTable-empty:not(.dataTable-loading) .dataTable-noRecords {
	display: block;
	padding: 5px;
	text-align: center;
	font-weight: bold;
}

.dataTable-loadingMessage {
	display: none;
}

.dataTable-empty.dataTable-loading .dataTable-loadingMessage {
	display: inline-block;
}

.dataTable-empty > .dataTable-wrapper .dataTable-scroll,
.dataTable-empty > .dataTable-wrapper .dataTable-controls {
	display: none !important;
}

/* The actual dataTable - A lot of these styles use relative selectors so
 * regular tables can be styled to look like dataTables
*******************************************************************************/
.dataTable-table {
	display: table;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	empty-cells: show;
	overflow: hidden;
}

.dataTable-scroll .dataTable-table {
	border: 0;
}

.dataTable-table th,
.dataTable-table td {
	position: relative;
	z-index: 0;
	padding: 2px 5px;
	min-width: 50px;
	border: 1px solid #CCC;
	border-width: 1px 0 0 1px;
	background-color: inherit;
	white-space: nowrap;
	font-size: 12px;
	overflow: hidden;
	font-family: inherit;
	line-height: 1;
}

.dataTable-table th.dataTable-pending,
.dataTable-table td.dataTable-pending {
	background-color: rgb(243, 228, 123) !important;
}

/* you can add this class to pretend a td containing additonal info is part of the neighboring input td */
.dataTable-table .field-info {
	/* pretend field-info is part of the left neighboring td */
	border-left: none !important;
	min-width: 10px !important;
}

.dataTable-table .tacky-top:not(.tacky-top-origin) {
	box-shadow: 1px 1px 0 0 #AAA,
				0 4px 3px -1px rgba(0, 0, 0, 0.2);
}

.dataTable-table .tacky-left:not(.tacky-left-origin) {
	box-shadow: 1px 1px 0 0 #AAA,
				4px 0px 3px -1px rgba(0, 0, 0, 0.2);
}

.dataTable-table th:first-child,
.dataTable-table td:first-child {
	border-left: 0 !important;
}

.dataTable-table > thead > tr,
.dataTable-table > tfoot > tr,
.dataTable-table > thead > tr:hover,
.dataTable-table > tfoot > tr:hover {
	background-color: #F6F6F6;
}

.dataTable-table > thead th,
.dataTable-table > thead td,
.dataTable-table > tfoot th,
.dataTable-table > tfoot td {
	padding: 4px 5px;
	border-top-color: #AAA;
	color: #444;
	font-weight: bold;
	line-height: 1;
}

.dataTable-table .dataTable-insertRow th,
.dataTable-table .dataTable-insertRow td {
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-color: #999;
	background-color: #F0F0F0;
}

.dataTable-table .dataTable-detailRow > .dataTable-recordColumn,
.dataTable-table .dataTable-detailRow > .dataTable-deleteButton,
.dataTable-table .dataTable-detailRow > .dataTable-customDeleteButton,
.dataTable-emptyCell {
	background-color: #E6E6E6 !important;
}

.dataTable-recordRow + .dataTable-detailRow > .dataTable-recordColumn,
.dataTable-recordRow + .dataTable-detailRow > .dataTable-deleteButton,
.dataTable-recordRow + .dataTable-detailRow > .dataTable-customDeleteButton,
.dataTable-emptyCellShadow {
	box-shadow: inset 0 5px 6px -6px #000;
}

.dataTable-table .dataTable-hideDelete .dataTable-deleteButton,
.dataTable-table .dataTable-hideDelete .dataTable-customDeleteButton {
	display: none !important;
}

.dataTable-row:hover {
	background: rgb(202, 217, 247);
}

.dataTable-table[data-focus-highlight] .dataTable-row:focus-within {
	background: rgb(170, 191, 251);
}

/* Add/delete row columns
******************************************************************************/
.dataTable-table .hiddenColumn,
.dataTable-table tr:not(.dataTable-viewRecordActive) .toggledColumn {
	padding: 0 !important;
	min-width: 0 !important;
	width: 0 !important;
	max-width: 0 !important;
	border-left: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	overflow: hidden !important;
}

.dataTable-table .hiddenColumn > *,
.dataTable-table tr:not(.dataTable-viewRecordActive) .toggledColumn > * {
	display: none !important;
}

.dataTable-table .dataTable-iconColumn {
	min-width: 16px !important;
	width: 16px !important;
	max-width: 26px !important;
	text-align: center;
	box-sizing: content-box;
}

.dataTable-table .dataTable-addButton,
.dataTable-table .dataTable-deleteButton,
.dataTable-table .dataTable-customDeleteButton {
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
}

.dataTable-locked .dataTable-addButton,
.dataTable-locked .dataTable-deleteButton,
.dataTable-locked .dataTable-customDeleteButton {
	visibility: hidden !important;
}

.dataTable-detailDelete .dataTable-recordRow .dataTable-deleteButton div
.dataTable-detailDelete .dataTable-recordRow .dataTable-customDeleteButton div{
	display: none;
}

.dataTable-deleteButton,
.dataTable-customDeleteButton {
	background-image: url(img/delete.png);
}

.dataTable-addButton {
	background-image: url(img/add.png);
}

/* View Record
*******************************************************************************/
.dataTable-row.dataTable-viewRecordActive {
	position              : fixed;
	top                   : 50%;
	left                  : 50%;
	z-index               : 99999;
	display               : grid;
	grid-template-columns : 1fr 1fr;
	column-gap            : 1rem;
	padding               : 0.75rem 0.75rem 0;
	width                 : calc(100vw - 150px);
	max-width             : 1000px;
	max-height            : calc(100vh - 150px);
	background            : #FFF !important;
	box-shadow            : 0 5px 15px rgba(0, 0, 0, 0.2);
	overflow              : auto;
	transform             : translate(-50%, calc(-50% + 100px + 20px));
	opacity               : 0;
}

.dataTable-row.dataTable-viewRecordActive.animating {
	transition : transform 0.2s ease-out, opacity 0.2s ease-out;
}

.dataTable-row.dataTable-viewRecordActive.show {
	transform : translate(-50%, calc(-50% + 20px));
	opacity   : 1;
}

.site-menu-sidebar .dataTable-row.dataTable-viewRecordActive {
	transform : translate(-50%, calc(-50% + 100px));
}

.site-menu-sidebar .dataTable-row.dataTable-viewRecordActive.show {
	transform : translate(-50%, -50%);
}

.dataTable-row.dataTable-viewRecordActive th,
.dataTable-row.dataTable-viewRecordActive td {
	display    : flex;
	margin     : 0;
	padding    : 0;
	width      : auto !important;
	max-width  : none !important;
	border     : none;
	background : #FFF;
}

.dataTable-viewRecordColumnWrapper {
	display    : flex;
	flex-grow  : 1;
	text-align : left;
}

.dataTable-viewRecordHeaderContainer {
	display     : flex;
	align-items : center;
	flex-shrink : 0;
	padding     : 0.5rem 0.75rem;
	width       : 125px;
	border      : 1px solid rgba(0, 0, 0, 0.2);
	background  : #26689A;
	color       : #FFF;
}

.dataTable-viewRecordHeaderContent {
	line-height : 1.2;
	white-space : normal;
}

.dataTable-viewRecordColumnContainer {
	display     : flex;
	align-items : center;
	flex-grow   : 1;
	padding     : 0.5rem 0.75rem;
	border      : 1px solid rgba(0, 0, 0, 0.2);
}

.dataTable-viewRecordColumnContent {
	flex-grow   : 1;
	white-space : normal;
}

.dataTable-row.dataTable-viewRecordActive .dataTable-viewRecordFooter {
	position        : sticky;
	bottom          : -1px;
	display         : flex;
	align-items     : center;
	justify-content : flex-end;
	grid-column     : 1 / -1;
	margin          : 1rem -0.75rem -1px;
	padding         : 0.75rem;
	border-top      : 1px solid #AAA;
	background      : #EAEAEA;
}

.dataTable-viewRecordFooter button.focus-button {
	margin-left : 0.75rem;
	padding     : 0.5rem 0.75rem;
	font-size   : 1.1rem;
	color       : #FFF;
}

.dataTable-viewRecordFooter button.focus-button:disabled {
	opacity : 0.3;
}

.dataTable-viewRecordFooter button.sibling-button {
	background : rgb(110, 156, 191);
}

.dataTable-viewRecordFooter button.close-button {
	background : rgb(140, 140, 140);
}

.dataTable-viewRecordFooter button.create-button {
	background : rgb(0, 170, 0);
}

.dataTable-row:not(.dataTable-insertRow) .dataTable-viewRecordFooter button.create-button,
.dataTable-row.dataTable-insertRow .dataTable-viewRecordFooter button.sibling-button {
	display : none;
}

.dataTable-viewRecordFooter .saving-message {
	display      : inline-flex;
	visibility   : hidden;
	align-items  : center;
	margin-right : 1.75rem;
	opacity      : 0;
	transition   : opacity 0.2s;
}

tr.dataTable-loading .dataTable-viewRecordFooter .saving-message {
	visibility : visible;
	opacity    : 1;
}

.dataTable-viewRecordFooter .saving-spinner {
	margin-right     : 0.5rem;
	width            : 15px;
	height           : 15px;
	border           : 4px solid rgb(38, 104, 154);
	border-top-color : rgba(38, 104, 154, 0.5);
	border-radius    : 50%;
	animation        : view-record-saving-spinner 0.6s infinite linear;
}

.dataTable-row.dataTable-viewRecordActive .dataTable-viewRecordHidden,
.dataTable-row.dataTable-viewRecordActive .dataTable-iconColumn {
	display : none !important;
}

.dataTable-row.dataTable-viewRecordActive .tacky-top,
.dataTable-row.dataTable-viewRecordActive .tacky-left {
	transform  : none !important;
	box-shadow : none !important;
}

.dataTable-row.dataTable-viewRecordActive textarea {
	resize      : vertical;
	height      : 4rem;
	max-width   : 100%;
	border      : 1px solid rgba(0, 0, 0, 0.2);
	white-space : normal;
}

.dataTable-row.dataTable-viewRecordPlaceholder th,
.dataTable-row.dataTable-viewRecordPlaceholder td {
	background : #DDD !important;
	box-sizing : border-box !important;
}

.dataTable-viewRecordButton {
	position       : relative;
	width          : 16px;
	height         : 16px;
	border         : 2px solid #000;
	vertical-align : middle;
	cursor         : pointer;
	background     : inherit;
	box-sizing     : border-box;
	margin         : auto;
}

.dataTable-viewRecordButton::before {
	content    : '';
	position   : absolute;
	top        : -2px;
	bottom     : -2px;
	left       : 50%;
	width      : 50%;
	transform  : translateX(-50%);
	background : inherit;
}

.dataTable-viewRecordButton::after {
	content    : '';
	position   : absolute;
	top        : 50%;
	right      : -2px;
	left       : -2px;
	height     : 50%;
	transform  : translateY(-50%);
	background : inherit;
}

.dataTable-viewRecordDimmer {
	position   : fixed;
	z-index    : 99998;
	top        : 0;
	right      : 0;
	bottom     : 0;
	left       : 0;
	background : rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 900px) {
	.dataTable-row.dataTable-viewRecordActive {
		grid-template-columns : 1fr;
	}
}

@keyframes view-record-saving-spinner {
	0% {
		transform : rotate(0deg);
	}
	100% {
		transform : rotate(360deg);
	}
}

/* Zebra stripes
*******************************************************************************/
.dataTable-row {
	background-color: #FFF;
}

.dataTable-oddRow,
.dataTable-customTable > tbody > tr:nth-child(odd) {
	background-color: #DEF;
}

/* Row highlighting
*******************************************************************************/

.dataTable[data-highlight-rows] > tbody > .dataTable-highlightRow {
	background-color: #FE9;
}

.dataTable[data-highlight-rows] > tbody > .dataTable-highlightRow:hover {
	background-color: #FD7;
}

/* Inputs
******************************************************************************/
.dataTable-table input:not([type="file"]),
.dataTable-table textarea,
.dataTable-table select {
	padding: 1px;
	min-width: 100%;
	width: 1px;
	height: 18px;
	border: 1px solid #999;
	background-color: #FFF;
	font-size: 12px;
	font-family: "Myriad Pro Semi Bold", Verdana, Tahoma, sans-serif;
}

.dataTable-table input[disabled]:not([type="file"]),
.dataTable-table textarea[disabled],
.dataTable-table select[disabled] {
	border: 1px solid #999;
	background-color: #DDD;
	color: #777;
}

.dataTable-table thead input:not([type="file"]),
.dataTable-table thead textarea,
.dataTable-table thead select,
.dataTable-table tfoot input:not([type="file"]),
.dataTable-table tfoot textarea,
.dataTable-table tfoot select,
.dataTable-table tbody input:focus:not([type="file"]),
.dataTable-table tbody textarea:focus,
.dataTable-table tbody select:focus {
	border: 1px solid #999;
	background-color: #FFF;
}

.dataTable-table tbody input:not([type="file"]),
.dataTable-table tbody textarea,
.dataTable-table tbody select {
	border: 1px dotted #00F;
	border-width: 0 0 1px 0;
	background-color: transparent;
}

.dataTable textarea {
	white-space: nowrap;
	overflow: hidden;
	resize: none;
}

.dataTable-table input[type="checkbox"],
.dataTable-table input[type="radio"] {
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	vertical-align: middle;
}

.dataTable-table .highlight {
	background-color: #FDD !important;
	color: #900 !important;
}

.dataTable-table swift-box {
	min-width: 100%;
}

.dataTable-table swift-box:not(.auto-width) {
	width: 0 !important;
}

.dataTable-table thead swift-box,
.dataTable-table tfoot swift-box,
.dataTable-table tbody swift-box.focus {
	background: #FFF;
}

.dataTable-table tbody swift-box {
	background: transparent;
}

/* Sorting
******************************************************************************/
.dataTable-sortElement:after {
	content: '\25B2\A\25BC';
	display: inline-block;
	vertical-align: middle;
	margin-left: 3px;
	white-space: pre;
	font-size: 0.7em;
}

.dataTable-sortElement {
	cursor: pointer;
}

/* Loading bars and warning icon
******************************************************************************/
@-webkit-keyframes datatable-row-loading-animation {
	0%   { background-color: #fff; }
	50%  { background-color: #ccc; }
	100% { background-color: #fff; }
}
@-moz-keyframes datatable-row-loading-animation {
	0%   { background-color: #fff; }
	50%  { background-color: #ccc; }
	100% { background-color: #fff; }
}
@-o-keyframes datatable-row-loading-animation {
	0%   { background-color: #fff; }
	50%  { background-color: #ccc; }
	100% { background-color: #fff; }
}
@keyframes datatable-row-loading-animation {
	0%   { background-color: #fff; }
	50%  { background-color: #ccc; }
	100% { background-color: #fff; }
}
@-webkit-keyframes datatable-oddRow-loading-animation {
	0%   { background-color: #def; }
	50%  { background-color: #ccc; }
	100% { background-color: #def; }
}
@-moz-keyframes datatable-oddRow-loading-animation {
	0%   { background-color: #def; }
	50%  { background-color: #ccc; }
	100% { background-color: #def; }
}
@-o-keyframes datatable-oddRow-loading-animation {
	0%   { background-color: #def; }
	50%  { background-color: #ccc; }
	100% { background-color: #def; }
}
@keyframes datatable-oddRow-loading-animation {
	0%   { background-color: #def; }
	50%  { background-color: #ccc; }
	100% { background-color: #def; }
}

tr.dataTable-loading:not(.dataTable-viewRecordActive) > th,
tr.dataTable-loading:not(.dataTable-viewRecordActive) > td {
	-webkit-animation: datatable-row-loading-animation 0.75s infinite;
	-moz-animation:    datatable-row-loading-animation 0.75s infinite;
	-o-animation:      datatable-row-loading-animation 0.75s infinite;
	animation:         datatable-row-loading-animation 0.75s infinite;

	-webkit-animation-direction: alternate;
	-moz-animation-direction:    alternate;
	-o-animation-direction:      alternate;
	animation-direction:         alternate;
}

tr.dataTable-oddRow.dataTable-loading:not(.dataTable-viewRecordActive) > th,
tr.dataTable-oddRow.dataTable-loading:not(.dataTable-viewRecordActive) > td {
	-webkit-animation: datatable-oddRow-loading-animation 0.75s infinite;
	-moz-animation:    datatable-oddRow-loading-animation 0.75s infinite;
	-o-animation:      datatable-oddRow-loading-animation 0.75s infinite;
	animation:         datatable-oddRow-loading-animation 0.75s infinite;
}

.dataTable-row.warning {
	background-color: #FDD !important;
}

.dataTable-warnings {
	list-style: square;
	padding-left: 15px;
}

.dataTable-warning-text {
	white-space : normal;
}

.dataTable-buttonPending {
	background-color: rgb(255, 0, 0) !important;
	color: rgb(255, 255, 255) !important;
}

.hide-delete .dataTable-deleteColumn,
.hide-delete.dataTable-deleteColumn {
	display : none !important;
}

/* Textarea popup
******************************************************************************/
.dataTable-textareaContainer {
	position: static !important;
	z-index: auto !important;
}

.dataTable-textareaContainer > textarea {
	position: absolute !important;
	z-index: 9999999 !important;
	margin: -0.8em -1px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	resize: both !important;
	white-space: pre-wrap !important;
}

.datatable-drilldown {
	text-decoration : underline;
	color           : blue;
	cursor          : pointer;
}

/* Printing
******************************************************************************/
/* Displayed ONLY in printouts */
.dataTable-table .printVisible {
	display : none;
}

@media print {
	/* NOT displayed in printouts*/
	.dataTable-table .printHidden {
		display: none;
	}

	.dataTable-table,
	.dataTable-table .printStretch {
		min-width: 100%;
		width: auto;
		max-width: 100%;
		overflow: visible;
		padding: 0;
		margin: 0;
		font-size: 9px;
	}

	.dataTable-table > * > th,
	.dataTable-table > * > td {
		white-space: normal;
		overflow: visible;
		font-size: 9px;
		padding: 0 2px;
	}
}