.c-xref {
	display          : flex;
	flex-direction   : column;
	background-image : linear-gradient(var(--color-cardbox) 3px, transparent 0px);
	padding          : 12px 10px;
	margin           : 0;
	border           : 1px solid var(--color-fld-bdr);
	border-radius    : 5px;
	background-clip  : padding-box;
	background-color : var(--color-fld-bg);
	position         : relative;
}
.c-xref-header {
	display         : flex;
	flex-direction  : row;
	justify-content : space-between;
	align-items     : center;
}
/* .c-xref-header:hover {
	background-color: black;
} */
.c-xref-title {
	font-weight : 100;
	color       : var(--color-cb-hdr-txt) !important;
	margin      : 0;
	font-size   : 12px;
    font-family : Helvetica;
}
.c-xref-xc {
	cursor       : pointer;
	transition   : transform 0.5s;
	color        : var(--color-c2);
	font-size    : 16px;
	margin-right : -2px;
}
.c-xref-xc.active {
	transform : rotate(180deg);
}
.c-xref-content {
	display : none;
}
.c-xref-content .table > tbody > tr > td {
	border-color : var(--color-c6);
}
.c-xref-content .table > thead > tr > th {
	border-color : var(--color-c4);
}
.c-xref-grid {
	margin : 0 0 10px 0;
	min-height : 296px;
}
.c-xref-footer {
	display         : flex;
	flex-direction  : row;
	justify-content : space-between;
	align-items     : center;
}
.c-xref-footer .left {
	display        : flex;
	flex-direction : row;
	align-items    : center;
	column-gap     : 5px;
}
.c-xref select, .c-xref input {
	background-color : var(--color-fld-bg);
	border           : 1px solid var(--color-fld-bdr);
	color            : var(--color-fld-txt);
}
.c-xref select:hover {
	background-color : var(--color-btn-whit-hvr-bg);
	border           : 1px solid var(--color-btn-whit-hvr-bdr);
	color            : var(--color-btn-whit-hvr-txt);
}

.c-xref select:active {
	background-color : var(--color-btn-whit-hvr-bg);
	border           : 1px solid var(--color-btn-whit-hvr-bdr);
	color            : var(--color-btn-whit-hvr-txt);
}
.c-xref select:visited {
	background-color : var(--color-btn-whit-hvr-bg);
	border           : 1px solid var(--color-btn-whit-hvr-bdr);
	color            : var(--color-btn-whit-hvr-txt);
}

.c-xref select:focus, .c-xref input:focus {
	background-color : var(--color-fld-focus-bg);
	border           : 1px solid var(--color-fld-focus-bdr);
	color            : var(--color-fld-focus-txt);
}
.c-grid-dnd {
	height          : 24px;
	display         : flex;
	align-items     : center;
	justify-content : center;
}
/* .c-grid-dnd > div {
	width          : 24px;
	font-size      : 18px;
	cursor         : move;
	letter-spacing : -10px;
	margin-right   : 5px;
	padding-top    : 5px;
	opacity        : 0.5;
} */
.c-grid-dnd > div {
	width          : 16px;
	font-size      : 18px;
	cursor         : move;
	letter-spacing : -10px;
	opacity        : 0.5;
	padding-left : 3px;
}
.c-grid-dragover-up:not(.centiva-datatable-selected-row), .c-grid-dragover-dn:not(.centiva-datatable-selected-row) {
	background-color : #ddf1ff;
}
.c-xref-valid-err {
	border-color : var(--color-errors) !important;
}
.c-xref-title-container {
	display     : flex;
	align-items : center;
	column-gap  : 8px;
}
.c-xref-recnmr {
	color            : var(--color-grey);
	height           : 24px;
	width            : 24px;
	display          : flex;
	border-radius    : 50%;
	background-color : var(--color-c4);
	justify-content  : center;
	align-items      : center;
	font-weight      : bold;
}
.c-xref-details {
    height: 14px;
    position: absolute;
    top: 2px;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 2px;
    z-index: 3;
}