/* Basic */

.XFTable {
    /* border: 1px solid #f3e8e8;*/
    background-color: #efeef3;
    border-spacing: 0;
    width: 100%;
    cellpadding: 0;
    cellspacing: 0;
}

/* Header */

.XFTable th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #98765470;
    color: white;
    user-select: none;
    text-align: left;
    }

.XFTable thead tr th div.HeaderCell {
    padding: 5px 10px 5px 10px;
    width: 100%;
}

.XFTable thead tr th div.HeaderCell .Icon {
    float: right;
    margin-right: 18px;
}


.XFTable thead tr th div.HeaderCell .Clickable {
    cursor: pointer;
}

.XFTable thead tr th div.HeaderCell div.Label {
    float: left;
}

/* DataRow */

.XFTable.Selectable tr.XFTableDataRow {
    cursor: pointer;
}

.XFTableDataRow {
    height: 20px;
    background-color: #d9c9b970;
}

.XFTableDataRow.Selected td {
    background-color: lightgreen;
}

.XFTableDataRow:nth-child(even) {
    background-color: white;
}

.XFTableDataRow:hover {
    background-color: #fff2cf !important;
    border-spacing: 0;
}

/* DataCell */

.XFTable td{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 5px;
    padding-right: 5px;
}

/* PaginationComponent */

.PaginationButton{
    width: 28px; 
    height: 28px; 
    line-height: 28px; 
    border: 1px solid gray; 
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
}
.PaginationButton:hover{
    background-color: #d9bdbd;
    transition: background-color 0.05s;
}
.PaginationButton:active{
    background-color: #efefef;
    transition: background-color 0.05s;
}
.PaginationButtonSelected{
    background-color: #d8d7e9;
    transition: background-color 0.05s;
}