.dataTable {
}

.dataTable thead tr:first-child {
	background-color: #1D4164;	/*blue*/
	border-top: 1px solid #1D4164;
	border-left: 1px solid #1D4164;
	border-right: 1px solid #1D4164;
	color: #DEE5EC;
	font-weight: bold;
	font-size: 100%;
	text-transform: capitalize;
	text-align: left;
}
.dataTable thead tr:first-child th {
	padding: 5px; 
}		
.dataTable thead tr:nth-child(2) th {				/* the second row of all theads */
	background-color: #E4E4E4;	/*gray*/
	border-top: 2px solid #39bf3c;;	/*green*/
	/*border-left: 1px solid #E4E4E4;;	gray*/
	/*border-right: 1px solid #E4E4E4;;	gray*/			
	color: #676767;				/*dark gray*/
	font-weight: bold;
	font-size: 75%;
	text-transform: uppercase;
	white-space: nowrap;
	/*padding-left: 5px;*/
	/*padding-right: 5px;*/
	padding-top: 4px;
	padding-bottom: 2px;
	/*text-align: left;*/
}
.dataTable thead tr:nth-child(2) th:first-child {	/* the second row of all theads, first col */
	border-left: 1px solid #CDD7E5;
}
.dataTable thead tr:nth-child(2) th:last-child {	/* the second row of all theads, last col */
	border-right: 1px solid #CDD7E5;
}

.dataTable thead tr:nth-child(2) th {
	padding-left: 5px;
	padding-right: 5px;
}
.dataTable thead tr:nth-child(2) th:hover {				
	cursor: pointer;
	color: white;
	background-color: #829DB8;
	/*border: 1px solid #829DB8;*/
}

.dataTable tbody td {
	border-top: 1px solid #CDD7E5;	/*light blue*/
	border-left: 1px solid #CDD7E5;	/*light blue*/
	background-color: white;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 3px;
	padding-right: 3px;	
}
.dataTable tbody td:last-child {
	border-right: 1px solid #CDD7E5;	/*light blue*/
}
.dataTable tbody tr:last-child td {
	border-bottom: 1px solid #CDD7E5;	/*light blue*/
}

.dataTable a {
	text-decoration: none;
	color: #008AFF;
}

.dataTable .alignLeft {
	text-align: left;
}

.dataTable .alignRight {
	text-align: right;
}

.dataTable th {
	vertical-align: middle;
	/*display: flex;*/
	/*align-items: center;*/
	/*align-content: center;*/
}

.dataTable th div {
	display: inline-block;
	/*vertical-align: middle;*/	
	/*margin: auto;*/ 
}

.dataTable .sortAsc {	
	padding-right: 20px !important;
	background: url("../resources/sortAsc.png") no-repeat;
	background-position: right 5px center;
	cursor: pointer;
}

.dataTable .sortDesc {
	padding-right: 20px !important;
	background: url("../resources/sortDesc.png") no-repeat;
	background-position: right 5px center;
	cursor: pointer;
}

.dataTable .sortAvail {
	cursor: pointer;
}

.selectedRow td {
    background-color: #CDD7E5 !important;
}

.disableActiveSorting thead tr:nth-child(2) th:hover {
	cursor: default;
	color: #676767;				/*dark gray*/
	background-color: #E4E4E4;	/*gray*/
}

.enableRowHover tbody tr:hover td {
	background-color: #f0f1f2 ;
}

.enableRowShading tbody tr:nth-child(even) td {
	background-color: #F2F2F2 ;
}

/* use this class to make the first column a 'label' column, first column then looks
   like the table header row */
.enableFirstRowLabel tbody tr td:first-child {
	background-color: #EFEFEF;	/*gray*/
	/*border-top: 2px solid #39bf3c;;	green*/
	/*border-left: 1px solid #E4E4E4;;	gray*/
	/*border-right: 1px solid #E4E4E4;;	gray*/			
	color: #676767;				/*dark gray*/
	font-weight: bold;
	font-size: 75%;
	text-transform: uppercase;
	/*padding-left: 5px;*/
	/*padding-right: 5px;*/
	padding-top: 4px;
	padding-bottom: 2px;
	text-align: right;
	
	padding-left: 4px;
	padding-right: 4px;
	width: 1%;
}

.enableFirstRowLabelNoWrap tbody tr td:first-child {
	white-space: nowrap;
}

.enableCellEllipsis {
	white-space: nowrap; 
	text-overflow:ellipsis; 
	overflow: hidden; 
	max-width:1px;
}


/* disable the hover effect on a specific row (apply to the 'tr' element) */
.disabledRowHover:hover td{
	background-color: white !important;
}

.enableFirstRowLabel .disabledRowHover:hover td:first-child{
	background-color: #E4E4E4 !important;	/*gray*/
}

.enableLargePadding tbody td {
	border-top: 1px solid #CDD7E5;	/*light blue*/
	border-left: 1px solid #CDD7E5;	/*light blue*/
	background-color: white;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	padding-right: 8px;	
}


.dataTable.noWrap td{
	white-space: nowrap;
}

.dataTable.maxWidth200 td {
	max-width: 200px;
	overflow: hidden;
}
.dataTable.maxWidth300 td {
	max-width: 300px;
	overflow: hidden;
}
.dataTable.maxWidth400 td {
	max-width: 400px;
	overflow: hidden;
}
.dataTable.maxWidth500 td {
	max-width: 500px;
	overflow: hidden;
}
/* use this class when putting a table directly under a popup panel header, 
   so the table merges with the panel header instead of providing its own table header */
.dataTablePopup thead tr:first-child th {
	background-color: #E4E4E4;	/*gray*/
	border-top: 1px solid #39bf3c;;	/*green*/
	/*border-left: 1px solid #E4E4E4;;	gray*/
	/*border-right: 1px solid #E4E4E4;;	gray*/			
	color: #676767;				/*dark gray*/
	font-weight: bold;
	font-size: 75%;
	text-transform: uppercase;
	white-space: nowrap;
	/*padding-left: 5px;*/
	/*padding-right: 5px;*/
	padding-top: 4px;
	padding-bottom: 2px;
	/*text-align: left;*/
}

.dataTablePopup tbody tr td:first-child{
	border-left: none;
}
.dataTablePopup tbody tr td:last-child{
	border-right: none;
}
.dataTablePopup tbody tr td {
	border-top: 1px solid #CDD7E5;	/*light blue*/
	border-bottom: none;
}
.dataTablePopup tbody tr:first-child td {
	border-top: none;
}

.dataTablePopup tbody tr:last-child td {
	border-bottom: 1px solid #CDD7E5;	/* light blue */
}

.disableBottomBorder tbody tr:last-child td {
	border-bottom: none;	/*disable the bottom border */
}

.dataTablePopup thead tr:nth-child(2) th {
	border-top: none;	/*disable the green line */
}


/* use this class when wanting a smaller version with no main table header */
.dataTableSmall thead tr:first-child th {
	background-color: #E4E4E4;	/*gray*/
	color: #676767;				/*dark gray*/
	border-left: 1px solid #CDD7E5;
	border-top: 1px solid #CDD7E5;
	font-weight: bold;
	font-size: 75%;
	text-transform: uppercase;
	white-space: nowrap;
	padding-top: 4px;
	padding-bottom: 2px;
}
.dataTableSmall thead tr:first-child th:last-child {
	border-right: 1px solid #CDD7E5;
}



.dataTable2 thead tr:first-child {
	background-color: #4a151e;	/* cherry red */
}
.dataTable2 thead tr:nth-child(2) th {
	border-top: 2px solid #ed960b; /* peach orange */
}

.dataTable3 thead tr:first-child {
	background-color: #676767;	/* dark gray*/
	color: white;
}
.dataTable3 thead tr:nth-child(2) th {
	border-top: 2px solid #ed960b; /* peach orange */
}



@media (max-width: 760px) {
	.enableFirstRowLabel tbody tr td:first-child {
		overflow-wrap: break-word !important;
		max-width: 150px;
		white-space: normal;
	}			
}