/* 
 * -----------------------
 * Styles for the Xml-Grid 
 * -----------------------
 */

.xhoverRow td.xdataCell { 
    background-color: #D2DCE6; 
    cursor: pointer; 
}

.xgrid {
	padding: 0;
	border-collapse: collapse;
	text-align: left;
}

.xgrid tr.disable {
    pointer-events: none;
    background-color: #eee;
}

.xgrid tr.disable .GroupEditMode_i, .xgrid tr.disable .GroupEditMode_a {
	background-color: #eee;
	border: 1px solid #ddd;
}

.xgridGroupEditMode {
	background-color: #d6e0e9;
	border: 1px solid #97a4be;
}
 
.xscroll_div
{
  scrollbar-base-color:#D2DCE6; 
  scrollbar-arrow-color:#000000;
  scrollbar-shadow-color:#666666;
  scrollbar-highlight-color:#003366; 
  scrollbar-track-color:#DCDCDC;
  display : block;
  width : 100%;
  overflow : auto;
  /* position : relative; */
  /* above code enables dropdowns with absolute positioning to be fixed to an anchor when scrolling */
  /* but that does not work inside several interlaced scrolling areas */
}

.xheadingTable, .xcontentTable
{
    border: 0;
	border-collapse: collapse;
    padding: 0;

	/* 
	we need "table-layout: auto" for calculating the default column- widths 
	on clientside by the browser, at least if the XmlGrid is in DISPLAY Mode.
	*/
	table-layout: auto;
}

.xfooterTable {
	border: 0;
	border-collapse: collapse;
	padding: 0;
	background-color: #eaeaea;
	width: 100%;
}

.xfooterPageButton {
    height: 25px !important;
    width: 25px !important;
    background-color: #fff;
    border: 1px solid #ccc !important;
    border-radius: 2px;
    padding: 2px;
    margin: 1px;
}

.xfooterPageButton_h {
	height: 25px !important;
	width: 25px !important;
	background-color: #ddd;
	border: 1px solid #ccc !important;
	border-radius: 2px;
	padding: 2px;
	margin: 1px;
	cursor: pointer;
}

.xfooterPageButton[selected="true"] {
	height: 25px !important;
	width: 25px !important;
	background-color: #829bb4;
	color: #fff;
	border: 1px solid #ccc !important;
	border-radius: 2px;
	padding: 2px;
	margin: 1px;
}

.xfooterPageButton_disabled {
    height: 25px !important;
    width: 25px !important;
    color: #333;
    background-color: #999;
    border: 1px solid #ccc !important;
    border-radius: 2px;
    padding: 2px;
    margin: 1px;
}


.xfooter-ellipsis-button {
	background-color: transparent;
	border-color: transparent;
	color: #000;
	height: 25px;
	width: 25px;
	padding: 2px;
	cursor: pointer;
    font-weight: bold;
}


.gridToolbar .xradio label {
	padding-left: 4px;
	padding-right: 4px;
	margin-bottom: 1.5px;
	display: table-caption;
}

/* xhcc stands for: XmlGrid-heading-cell-content */
.xhcc {
  font-weight: bold; 
  text-align: left;
  white-space: nowrap;
}

.xheadingSortable
{
  cursor: pointer;
}

.xheadingSortIndicator
{
}

.xfooterCell {
  border: 0;
  padding: 2px 5.8px 2px 5px;
  margin: 0;
  white-space: nowrap;
}

.xcellBase {
    padding: 3px 5.8px 3px 5px;
    margin-left: 0;
    margin-right: 0;
    white-space: nowrap;
}

/* see: .xdataCell - expected: has the same border-width and padding defined */
	.xcellBase.xheadingCell {
		background-color: #eaeaea;
		width: 41.6528px;
	}

/* see: .xheadingCell - expected: has the same border-width and padding defined */
.xcellBase.xdataCell
{
  background-color: #FFFFFF;
  cursor: default;
}

.xheadingCell.xheadingCellSelector, xdataCell.xdataCellSelector {
    width: 6px;
}

.xdataCell.xdataCellExpander {
    width: 12px;
}

.xdataCellExpanderContainer {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

td.xdataCell.xdataCellExpander {
    vertical-align: top;
}

.xfilterCell, .xfilterImg 
{	
	width:18px;
	height:14px;
}

.xselectorCell, .xexpanderCell {
    width: 12px;
    color: rgb(110,106,90)
}

.xselectorCell {
    font-size: 10px;
    height: 10px;
}

.xexpanderCell {
    font-size: 20px;
    height: 20px;
}

.xexpanderCell:hover {
    color: white;
}

.xselectorNotAllowed
{
	width:10px;
	height:20px;
}


.xactionsCell
{
	padding: 0px;
	overflow: visible;
	text-align: left;	
	white-space: nowrap;
}
.xactionCell
{
	PADDING: 0px;
	display: inline; 
	overflow: visible;	/* never set it on hidden */
	WHITE-SPACE: nowrap; 
	TEXT-ALIGN: center;
}

div.xapply
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/apply.gif); 
	background-repeat: no-repeat;
}
div.xapply_h
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/apply_h.gif); 
	background-repeat: no-repeat;
}

div.xedit
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/edit.gif); 
	background-repeat: no-repeat;
}

div.xedit_h
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/edit_h.gif); 
	background-repeat: no-repeat;
}

div.xremove
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/remove.gif); 
	background-repeat: no-repeat;
}
div.xremove_h
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/remove_h.gif); 
	background-repeat: no-repeat;
}

div.xcancel
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/cancel.gif); 
	background-repeat: no-repeat;
}
div.xcancel_h
{
	width: 18px;
	height:14px;
	background-image: url(Images/Grid/cancel_h.gif); 
	background-repeat: no-repeat;
}

img[src*="up.gif"], img[src*="up_h.gif"], img[src*="down.gif"], img[src*="down_h.gif"] {
	width: 15px;
	height: 15px;
}

.xrow {
}

.xalternatingRow td.xdataCell
{ 
  /*padding:3px;*/
  background-color: #F2f2f2; 
  /* border-right: 1px solid #cccccc; */
} 

.xselectedRow td.xdataCell
{ 
    cursor: pointer; 
    background-color: #D6E0E9; 
    border-bottom: 1px solid #E6E6E6; 
    border-right: 0px; 
    /* padding-left:2px; */
    color:#000;
}

.xeditingRow td.xdataCell 
{ 
    cursor: default; 
    background-color: #D6E0E9; 
    border-bottom: 1px solid #E6E6E6; 
    border-right: 0px; 
    /* padding-left:2px; */
    color:#000;
}

div[id*=ValidFrom] .cal, div[id*=ValidTo] .cal {
	height: 18px !important;
	width: 18px !important;
	padding: 1.5px;
	margin-left: -2px;
}