/*
 * Datawise Grid Framework
 * UI Stylesheet v1.5.0-dev2
 *
 * v1.5.0-dev2:
 * - conditional row-state styling for server-side RowClassRule matches
 * - keeps the existing Grid DOM and responsive-grid.css contracts
 */

/* =========================================================
   GRID CONTAINER
   ========================================================= */

div.gridcontainer {
	position: relative;
	margin: 10px 0;
}

div.grid {
	max-height: 650px;
	min-height: 0;
	overflow: auto;
	margin: 0;
	background: #fff;
	border: 1px solid #e2e6ea;
	border-radius: 8px;
	box-sizing: border-box;
}

div.gridtitle {
	border: 1px solid #e2e6ea;
	border-bottom: 0;
	border-radius: 8px 8px 0 0;
	background: #f7f8fa;
	font-size: 12px !important;
	font-weight: 600;
	color: #46515c;
	text-shadow: none;
	padding: 6px 8px;
	line-height: 18px;
}


/* =========================================================
   DWGRID TOOLS
   ========================================================= */

/*
 * Optional host placed immediately before the Grid:
 *
 * <div class="dw-grid-tools"
 *      data-grid="#GRID_WEBPAGES"
 *      data-page-sizes="20,50,100,200"></div>
 *
 * Current rows-per-page comes from Grid/PHP metadata.
 *
 * The zero-height host keeps the Grid in its original position.
 */
.dw-grid-tools {
	position: relative;
	height: 0;
	margin: 0;
	padding: 0;
	z-index: 20;
}

.dw-grid-tools .dw-grid-tools-inner {
	position: absolute;
	right: 4px;
	bottom: 4px;
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.dw-grid-tools .dw-grid-tool {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 8px;
	margin: 0;
	border: 1px solid #d8dde2;
	border-radius: 5px;
	background: #f3f4f6;
	box-shadow: none;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 24px;
	color: #3f4852;
	cursor: pointer;
}

.dw-grid-tools .dw-grid-tool:hover {
	background: #f7fbfb;
	border-color: #9fc2c5;
	color: #2f7478;
}

.dw-grid-tools .dw-grid-tool:hover i {
	color: #358388;
}

.dw-grid-tools .dw-grid-tool:focus {
	outline: none;
	border-color: #9fc2c5;
	box-shadow: 0 0 0 2px rgba(53,131,136,.08);
}

.dw-grid-tools .dw-grid-tool i {
	font-size: 11px;
	color: inherit;
}

.dw-grid-tools .dw-grid-tool-active {
	border-color: #aac8ca;
	color: #2f7478;
}

.dw-grid-tools .dw-grid-tool-active i {
	color: #358388;
}

.dw-grid-tools .dw-grid-tool-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: #358388;
	box-sizing: border-box;
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	color: #fff;
}

.dw-grid-tools .dw-grid-tool-count[hidden] {
	display: none !important;
}


/* Saved Views */
.dw-grid-tools .dw-grid-tool-views-wrap {
	position: relative;
	display: inline-flex;
}

.dw-grid-tools .dw-grid-views-panel {
	position: absolute;
	top: 31px;
	right: 0;
	width: 290px;
	max-width: calc(100vw - 30px);
	padding: 0;
	background: #fff;
	border: 1px solid #d9dde1;
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(20,35,45,.14), 0 2px 6px rgba(20,35,45,.06);
	box-sizing: border-box;
	color: #4b5660;
	white-space: normal;
}

.dw-grid-tools .dw-grid-views-panel[hidden] {
	display: none !important;
}

.dw-grid-tools .dw-grid-views-panel-header {
	display: flex;
	align-items: center;
	min-height: 31px;
	padding: 7px 9px;
	border-bottom: 1px solid #edf0f2;
	box-sizing: border-box;
	font-weight: 600;
	color: #46515c;
}

.dw-grid-tools .dw-grid-views-list {
	display: block;
	max-height: 260px;
	overflow: auto;
	padding: 4px;
	scrollbar-width: thin;
	scrollbar-color: #bfc4c9 #f5f6f7;
}

.dw-grid-tools .dw-grid-views-list::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.dw-grid-tools .dw-grid-views-list::-webkit-scrollbar-track {
	background: #f5f6f7;
}

.dw-grid-tools .dw-grid-views-list::-webkit-scrollbar-thumb {
	background: #bfc4c9;
	border-radius: 10px;
}

.dw-grid-tools .dw-grid-views-section-title {
	padding: 7px 8px 3px;
	font-size: 10px;
	font-weight: 600;
	line-height: 14px;
	color: #8a949d;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.dw-grid-tools .dw-grid-view-row {
	display: flex;
	align-items: center;
	gap: 3px;
	border-radius: 5px;
}

.dw-grid-tools .dw-grid-view-row:hover {
	background: #f5f7f8;
}

.dw-grid-tools .dw-grid-view-item {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	min-height: 29px;
	padding: 5px 8px;
	margin: 0;
	border: 0;
	border-radius: 5px;
	background: transparent;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 11px;
	font-weight: 400;
	line-height: 17px;
	text-align: left;
	color: #4b5660;
	cursor: pointer;
}

.dw-grid-tools .dw-grid-view-row .dw-grid-view-item {
	width: auto;
}

.dw-grid-tools .dw-grid-view-item:hover,
.dw-grid-tools .dw-grid-view-item:focus {
	background: #f5f7f8;
	color: #2f7478;
	outline: none;
}

.dw-grid-tools .dw-grid-view-row:hover .dw-grid-view-item {
	background: transparent;
}

.dw-grid-tools .dw-grid-view-item i {
	flex: 0 0 14px;
	width: 14px;
	font-size: 12px;
	text-align: center;
	color: #7a858f;
}

.dw-grid-tools .dw-grid-view-item:hover i,
.dw-grid-tools .dw-grid-view-item:focus i {
	color: #358388;
}

.dw-grid-tools .dw-grid-view-item span {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dw-grid-tools .dw-grid-view-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0 4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	font-size: 15px;
	line-height: 20px;
	color: #8a949d;
	cursor: pointer;
}

.dw-grid-tools .dw-grid-view-delete:hover,
.dw-grid-tools .dw-grid-view-delete:focus {
	background: #fbeff1;
	color: #b4233d;
	outline: none;
}

.dw-grid-tools .dw-grid-views-empty {
	padding: 8px;
	font-size: 11px;
	line-height: 16px;
	color: #8a949d;
}

.dw-grid-tools .dw-grid-view-save {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px;
	border-top: 1px solid #edf0f2;
	background: #fafbfc;
	border-radius: 0 0 7px 7px;
}

.dw-grid-tools .dw-grid-view-name {
	flex: 1 1 auto;
	min-width: 0;
	height: 25px;
	padding: 3px 7px;
	margin: 0;
	border: 1px solid #d8dde2;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 11px;
	line-height: normal;
	color: #46515c;
	outline: none;
}

.dw-grid-tools .dw-grid-view-name:focus {
	border-color: #9fc2c5;
	box-shadow: 0 0 0 2px rgba(53,131,136,.08);
}

.dw-grid-tools .dw-grid-view-save-button {
	flex: 0 0 auto;
	height: 25px;
	padding: 0 8px;
	margin: 0;
	border: 1px solid #aac8ca;
	border-radius: 4px;
	background: #fff;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 23px;
	color: #2f7478;
	cursor: pointer;
}

.dw-grid-tools .dw-grid-view-save-button:hover,
.dw-grid-tools .dw-grid-view-save-button:focus {
	background: #f1f8f8;
	border-color: #8bb5b8;
	outline: none;
}


/* Export */
.dw-grid-tools .dw-grid-tool-export-wrap {
	position: relative;
	display: inline-flex;
}

.dw-grid-tools .dw-grid-export-panel {
	position: absolute;
	top: 31px;
	right: 0;
	width: 180px;
	max-width: calc(100vw - 30px);
	padding: 0;
	background: #fff;
	border: 1px solid #d9dde1;
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(20,35,45,.14), 0 2px 6px rgba(20,35,45,.06);
	box-sizing: border-box;
	color: #4b5660;
	white-space: normal;
}

.dw-grid-tools .dw-grid-export-panel[hidden] {
	display: none !important;
}

.dw-grid-tools .dw-grid-export-panel-header {
	display: flex;
	align-items: center;
	min-height: 31px;
	padding: 7px 9px;
	border-bottom: 1px solid #edf0f2;
	box-sizing: border-box;
	font-weight: 600;
	color: #46515c;
}

.dw-grid-tools .dw-grid-export-list {
	display: block;
	padding: 4px;
}

.dw-grid-tools .dw-grid-export-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: 30px;
	padding: 5px 8px;
	margin: 0;
	border-radius: 5px;
	box-sizing: border-box;
	color: #4b5660;
	font-size: 11px;
	font-weight: 400;
	line-height: 18px;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

.dw-grid-tools .dw-grid-export-item:hover,
.dw-grid-tools .dw-grid-export-item:focus {
	background: #f5f7f8;
	color: #2f7478;
	text-decoration: none;
	outline: none;
}

.dw-grid-tools .dw-grid-export-item i {
	flex: 0 0 15px;
	width: 15px;
	font-size: 13px;
	line-height: 18px;
	text-align: center;
	color: #77828b;
}

.dw-grid-tools .dw-grid-export-item:hover i,
.dw-grid-tools .dw-grid-export-item:focus i {
	color: #358388;
}

.dw-grid-tools .dw-grid-export-empty {
	padding: 8px;
	font-size: 11px;
	line-height: 16px;
	color: #8a949d;
}


/* Column Manager */
.dw-grid-tools .dw-grid-tool-columns-wrap {
	position: relative;
	display: inline-flex;
}

.dw-grid-tools .dw-grid-columns-panel {
	position: absolute;
	top: 31px;
	right: 0;
	width: 240px;
	max-width: calc(100vw - 30px);
	padding: 0;
	background: #fff;
	border: 1px solid #d9dde1;
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(20,35,45,.14), 0 2px 6px rgba(20,35,45,.06);
	box-sizing: border-box;
	color: #4b5660;
	white-space: normal;
}

.dw-grid-tools .dw-grid-columns-panel[hidden] {
	display: none !important;
}

.dw-grid-tools .dw-grid-columns-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 9px;
	border-bottom: 1px solid #edf0f2;
	font-weight: 600;
	color: #46515c;
}

.dw-grid-tools .dw-grid-columns-list {
	display: block;
	max-height: 280px;
	overflow: auto;
	padding: 4px;
}

.dw-grid-tools .dw-grid-column-item {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	padding: 4px 8px;
	margin: 0;
	border-radius: 5px;
	box-sizing: border-box;
	font-weight: 400;
	color: #4b5660;
	cursor: pointer;
}

.dw-grid-tools .dw-grid-column-item:hover {
	background: #f5f7f8;
}

.dw-grid-tools .dw-grid-column-drag-handle {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 14px;
	width: 14px;
	height: 20px;

	margin: 0 1px 0 -2px;

	color: #98a1a8;

	font-size: 11px;
	line-height: 20px;
	text-align: center;

	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.dw-grid-tools .dw-grid-column-drag-handle:hover {
	color: #59646d;
}

.dw-grid-tools .dw-grid-column-drag-handle:active {
	cursor: grabbing;
}

.dw-grid-tools .dw-grid-column-item.is-dragging {
	opacity: .42;
	background: #f1f6f6;
}

.dw-grid-tools .dw-grid-column-item.dw-grid-column-drop-before {
	box-shadow: inset 0 2px 0 #358388;
}

.dw-grid-tools .dw-grid-column-item.dw-grid-column-drop-after {
	box-shadow: inset 0 -2px 0 #358388;
}

.dw-grid-tools .dw-grid-column-item input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 0;
}

.dw-grid-tools .dw-grid-column-label {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dw-grid-tools .dw-grid-columns-reset {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 500;
	color: #2f7478;
	cursor: pointer;
	white-space: nowrap;
}

.dw-grid-tools .dw-grid-columns-reset:hover,
.dw-grid-tools .dw-grid-columns-reset:focus {
	color: #245f63;
	text-decoration: underline;
	outline: none;
}



/* Column Manager scrollbar */
.dw-grid-tools .dw-grid-columns-list {
	scrollbar-width: thin;
	scrollbar-color: #bfc4c9 #f5f6f7;
}

.dw-grid-tools .dw-grid-columns-list::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.dw-grid-tools .dw-grid-columns-list::-webkit-scrollbar-track {
	background: #f5f6f7;
}

.dw-grid-tools .dw-grid-columns-list::-webkit-scrollbar-thumb {
	background: #bfc4c9;
	border-radius: 10px;
}

.dw-grid-tools .dw-grid-columns-list::-webkit-scrollbar-thumb:hover {
	background: #9fa6ad;
}

.dw-grid-tools .dw-grid-columns-list::-webkit-scrollbar-corner {
	background: #f5f6f7;
}


/* Client-side column visibility */
div.grid .dw-grid-col-hidden {
	display: none !important;
}


/* Rows per page */
.dw-grid-tools .dw-grid-tool-pagesize {
	padding: 0;
	cursor: default;
}

.dw-grid-tools .dw-grid-tool-pagesize select {
	height: 24px;
	padding: 0 22px 0 7px;
	margin: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 24px;
	color: #3f4852;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
}

.dw-grid-tools .dw-grid-tool-pagesize:hover {
	background: #f7fbfb;
	border-color: #9fc2c5;
}

.dw-grid-tools .dw-grid-tool-pagesize:hover select {
	color: #2f7478;
}


/* Active Filters panel */
.dw-grid-tools .dw-grid-tool-filter-wrap {
	position: relative;
	display: inline-flex;
}

.dw-grid-tools .dw-grid-filter-panel {
	position: absolute;
	top: 31px;
	right: 0;
	width: 300px;
	max-width: calc(100vw - 30px);
	padding: 0;
	background: #fff;
	border: 1px solid #d9dde1;
	border-radius: 7px;
	box-shadow: 0 8px 24px rgba(20,35,45,.14), 0 2px 6px rgba(20,35,45,.06);
	box-sizing: border-box;
	color: #4b5660;
	white-space: normal;
}

.dw-grid-tools .dw-grid-filter-panel[hidden] {
	display: none !important;
}

.dw-grid-tools .dw-grid-filter-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 9px;
	border-bottom: 1px solid #edf0f2;
	font-weight: 600;
	color: #46515c;
}

.dw-grid-tools .dw-grid-active-filter-list {
	display: block;
	max-height: 240px;
	overflow: auto;
	padding: 4px;
}

.dw-grid-tools .dw-grid-active-filter-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 28px;
	padding: 4px 5px 4px 8px;
	border-radius: 5px;
	box-sizing: border-box;
}

.dw-grid-tools .dw-grid-active-filter-item:hover {
	background: #f5f7f8;
}

.dw-grid-tools .dw-grid-active-filter-text {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #4b5660;
}

.dw-grid-tools .dw-grid-remove-filter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 20px;
	color: #7b858e;
	cursor: pointer;
}

.dw-grid-tools .dw-grid-remove-filter:hover,
.dw-grid-tools .dw-grid-remove-filter:focus {
	background: #e8f2f2;
	color: #2f7478;
	outline: none;
}

.dw-grid-tools .dw-grid-clear-filters {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 500;
	color: #2f7478;
	cursor: pointer;
	white-space: nowrap;
}

.dw-grid-tools .dw-grid-clear-filters:hover,
.dw-grid-tools .dw-grid-clear-filters:focus {
	color: #245f63;
	text-decoration: underline;
	outline: none;
}


/* =========================================================
   GRID TABLE
   ========================================================= */

div.grid table {
	width: 100%;
	padding: 0;
	margin: 0;
	color: #3f4852 !important;
	border-spacing: 0;
	border: 0;
	table-layout: auto;
	background: #fff;
}

div.grid tr {
	font-size: 12px;
}

div.grid tbody tr {
	transition: background-color .12s ease;
}

div.grid tbody tr:hover {
	background: #f6f8fa;
}

/* Conditional row state: unread/unchecked-style visual attention. */
div.grid tbody tr.dw-grid-row-unchecked {
	background: #f3f7fb;
	font-weight: 500;
}

div.grid tbody tr.dw-grid-row-unchecked:hover {
	background: #eaf1f7;
}

div.grid tbody tr.dw-grid-row-unchecked td:first-child {
	box-shadow: inset 3px 0 #7f9db3;
}

/* Selected row: subtle visual confirmation for checkbox selection. */
div.grid tbody tr.dw-grid-row-selected {
	background: #f2f7f7;
}

div.grid tbody tr.dw-grid-row-selected:hover {
	background: #eaf3f3;
}

div.grid tr.grouprow {
	background: #eef0f2;
	cursor: pointer;
	font-weight: 600;
	color: #39434c;
}

div.grid tr.grouprow td {
	background: #eef0f2;
	color: #39434c;
	border-top: 1px solid #d6dbe0;
	border-bottom: 1px solid #d6dbe0;
	padding: 5px 8px;
	line-height: 18px;
	box-shadow: inset 3px 0 0 #358388;
}

div.grid tr.grouprow:hover td {
	background: #e7eaed;
}

div.grid tr.grouprow .group-counter {
	color: #7a858f;
	font-weight: 500;
}

div.grid tr > th {
	font-size: 12px;
	font-weight: 600;
	color: #39434c;
	text-align: left;
	background: #f3f4f6;
	border: 0;
	border-bottom: 1px solid #d9dde2;
	padding: 6px 8px;
	white-space: nowrap;
	border-collapse: collapse;
	line-height: 18px;
}

div.grid thead tr:first-child th {
	position: sticky;
	top: 0;
	z-index: 3;
}

div.grid thead tr th > a {
	display: block;
	width: auto;
	height: auto;
	color: inherit;
	text-decoration: none;
}

div.grid thead tr th > a:hover {
	color: #358388;
}

div.grid td {
	font-size: 12px;
	color: #3f4852;
	border: 0;
	border-bottom: 1px solid #edf0f2;
	padding: 4px 8px;
	white-space: normal;
	border-collapse: collapse;
	line-height: 20px;
	vertical-align: middle;
}

/* DWGrid adds the density class to the TABLE identified by data-grid.
   Normal mode retains the application's baseline, including style_compact.css.
   More specific than that optional override, regardless of load order.
   Fonts, line-height, SearchRow, nested tables and toolbar stay unchanged. */
div.grid > table.dw-grid-compact > tbody > tr:not(#SearchRow) > td,
div.grid > table.dw-grid-compact > tfoot > tr > td {
	padding-top: 1px;
	padding-bottom: 1px;
}

div.grid > table.dw-grid-compact > thead > tr:not(#SearchRow) > th,
div.grid > table.dw-grid-compact > tbody > tr.summaryrow > th,
div.grid > table.dw-grid-compact > tfoot > tr > th {
	padding-top: 2px;
	padding-bottom: 2px;
}

div.grid tbody tr:last-child td {
	border-bottom: 0;
}

div.grid td.center,
div.grid th.center {
	text-align: center;
	vertical-align: middle;
}

div.grid td.right,
div.grid th.right {
	text-align: right;
	vertical-align: middle;
}

div.grid th.number-align,
div.grid td.number-align {
	text-align: right;
	padding-right: 8px !important;
}

div.grid th.strong,
div.grid td.strong {
	font-weight: 700;
}


/* =========================================================
   DWGRID SVG ICONS
   ========================================================= */

.dw-grid-icon {
	display: inline-block;
	width: 17px;
	height: 17px;
	fill: none;
	vertical-align: middle;
	flex: 0 0 17px;
}

.dw-grid-button-icon {
	margin-right: 5px;
}

.dw-grid-icon .dw-grid-icon-fill {
	fill: currentColor;
	stroke: none;
}

div.grid .dw-grid-action-control {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	color: #4f5962;
	vertical-align: middle;
	box-sizing: border-box;
	transition: color .12s ease, background .12s ease;
}

div.grid tbody td a:hover .dw-grid-action-control,
div.grid tbody td a:focus .dw-grid-action-control {
	color: #358388;
	background: #f3f8f8;
}

/* =========================================================
   GRID LINKS
   ========================================================= */

div.grid tbody td a:not(.optionlistrow) {
	color: #2f7478;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: #a9c7c9;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color .12s ease, text-decoration-color .12s ease;
}

div.grid tbody td a:not(.optionlistrow):hover {
	color: #245f63;
	text-decoration-color: #245f63;
}

div.grid tbody td a:not(.optionlistrow):focus {
	color: #245f63;
	outline: 2px solid rgba(53,131,136,.18);
	outline-offset: 2px;
}


/* =========================================================
   SEMANTIC AMOUNTS
   ========================================================= */

div.grid .amount-positive {
	color: #2f7d5b;
	font-weight: 600;
}

div.grid .amount-negative {
	color: #b84c4c;
	font-weight: 600;
}

div.grid .amount-zero {
	color: #6f7a84;
	font-weight: 600;
}


/* =========================================================
   GRID FILTERING / SEARCH ROW
   ========================================================= */

div.grid #SearchRow td {
	background: #fafbfc;
	border-bottom: 1px solid #e0e3e6;
	padding: 3px 8px;
	border-collapse: collapse;
	vertical-align: middle;
}

div.grid #SearchRow input[type='text'][class^="filter"],
div.grid #SearchRow select {
	height: 24px;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #d8dde2;
	border-radius: 4px;
	color: #3f4852;
	font-size: 11px !important;
	line-height: normal;
	padding: 2px 6px;
	margin: 0;
	box-shadow: none;
	transition: border-color .12s ease, box-shadow .12s ease;
}

div.grid #SearchRow input[type='text'][class^="filter"]:focus,
div.grid #SearchRow select:focus {
	border-color: #6fa4a8;
	outline: none;
	box-shadow: 0 0 0 2px rgba(53,131,136,.10);
}


/* SearchRow Select2 - same geometry as native Grid filters */
div.grid #SearchRow .select2-container {
	display: block;
	vertical-align: middle;
	max-width: 100%;
	font-size: 11px;
	line-height: normal;
	box-sizing: border-box;
	position: relative;
	top: 1px;
	height: 24px;
}

div.grid #SearchRow .select2-container .select2-selection--single {
	height: 24px;
	min-height: 24px;
	background: #fff;
	border: 1px solid #d8dde2;
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
}

div.grid #SearchRow .select2-container .select2-selection--single .select2-selection__rendered {
	height: 22px;
	line-height: 22px;
	padding-left: 6px;
	padding-right: 22px;
	font-size: 11px;
	font-weight: normal;
	color: #3f4852;
}

div.grid #SearchRow .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 2px;
	width: 18px;
	height: 22px;
}

div.grid #SearchRow .select2-container .select2-selection--single .select2-selection__arrow b {
	margin-top: -2px;
}

div.grid #SearchRow .select2-container--default.select2-container--focus .select2-selection--single,
div.grid #SearchRow .select2-container--default.select2-container--open .select2-selection--single {
	border-color: #6fa4a8;
	outline: none;
	box-shadow: 0 0 0 2px rgba(53,131,136,.10);
}

div.grid #SearchRow .filter_text {
	padding-right: 20px !important;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M2 3h12L9.25 8.1v4.15l-2.5 1.25V8.1L2 3Z' stroke='%235f6972' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 16px 16px;
}

div.grid #SearchRow input.filter_currency {
	width: 45px;
}

div.grid #SearchRow input.filter_date {
	width: 72px;
}

div.grid #SearchRow input.filter_text {
	width: 55px;
}

div.grid #SearchRow input.small_search {
	cursor: pointer;
	height: 16px;
	width: 16px;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.25' stroke='%235f6972' stroke-width='1.5'/%3E%3Cpath d='m10.2 10.2 3.3 3.3' stroke='%235f6972' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	border: none;
	text-indent: -5000px;
	text-transform: uppercase;
	_display: block;
	_font-size: 0;
}

div.grid input.gridstyle {
	font-size: 11px !important;
	margin: 0 !important;
	padding: 2px 4px !important;
	height: 23px;
	box-sizing: border-box;
	border: 1px solid #d8dde2;
	border-radius: 4px;
	background: #fff;
}


/* =========================================================
   DATE RANGE FILTER
   ========================================================= */

div.grid .dw-grid-date-filter {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	position: relative;
	vertical-align: middle;
}

div.grid .dw-grid-date-filter input.filter_date {
	flex: 1 1 72px;
	min-width: 54px;
}

div.grid .dropdownrange {
	display: none;
	text-align: left;
	list-style: none;
	background: #fff;
	border: 1px solid #d9dde1;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(20,35,45,.14), 0 2px 6px rgba(20,35,45,.06);
	cursor: default;
	outline: none;
	padding: 8px 10px;
	max-height: 360px;
	overflow: auto;
	z-index: 5000;
	white-space: nowrap;
	margin: 2px 0 0;
	min-width: 184px;
	position: fixed;
	box-sizing: border-box;
}

div.grid .drop-buttons {
	width: 100%;
	float: none;
	padding: 6px 0 0 !important;
	text-align: right;
}

div.grid .dropdownrange p {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	margin: 5px 0;
}

div.grid .dropdownrange p label {
	display: block;
	flex: 0 0 44px;
	width: 44px;
	text-align: right;
	font-size: 11px;
	font-weight: 600;
	color: #56616b;
	line-height: 26px;
}

div.grid .dropdownrange input.s2 {
	width: 106px !important;
	height: 26px;
	box-sizing: border-box;
	padding: 3px 7px !important;
	margin: 0 !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	line-height: normal !important;
	color: #36414a;
	border: 1px solid #d5dbe0;
	border-radius: 5px;
	background: #fff;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.02);
}

div.grid .dropdownrange input.s2:focus {
	border-color: #7aa8ab;
	outline: none;
	box-shadow: 0 0 0 2px rgba(53,131,136,.10);
}

div.grid .dropdownrange a {
	padding: 4px 6px !important;
	margin-left: 0 !important;
}

div.grid .filterbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	font: inherit;
	cursor: pointer;
	opacity: 1;
	box-sizing: border-box;
}

div.grid .filterbutton:before {
	content: "\f0b0";
	font-family: FontAwesome;
	font-size: 14px;
	line-height: 18px;
	color: #7b848c;
	display: block;
	text-align: center;
	transition: color .12s ease;
}

div.grid .filterbutton:hover:before {
	color: #358388;
}


div.grid .filterbutton.is-active {
	background: #358388;
	border-radius: 4px;
}

div.grid .filterbutton.is-active:before {
	color: #fff;
}

div.grid .filterbutton.is-active:hover {
	background: #2f7478;
}

div.grid .dropdownrange .dw-range-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid #eef0f2;
}

div.grid .dropdownrange .dw-range-clear {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	padding: 2px 3px;
	margin: 0;
	font-family: inherit;
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	color: #2f7478;
	cursor: pointer;
}

div.grid .dropdownrange .dw-range-clear:hover {
	color: #245f63;
	text-decoration: underline;
}



/* =========================================================
   SUMMARY ROWS
   ========================================================= */

div.grid tr.summaryrow th,
div.grid tr.summaryrow td {
	background: #f8f9fa;
	font-weight: 600;
	color: #37414a;
	border-top: 1px solid #e0e3e6;
	border-bottom: 1px solid #eceff1;
}





/* =========================================================
   DWGRID CHECKBOX
   Font Awesome visual, 16x16px control area
   ========================================================= */

div.grid label.dw-grid-check {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 16px;
	height: 16px;

	margin: 0;
	padding: 0;

	font-size: 0;
	line-height: 16px;
	vertical-align: middle;

	cursor: pointer;
	box-sizing: border-box;
}

div.grid label.dw-grid-check input[type="checkbox"] {
	position: absolute;
	inset: 0;
	z-index: 2;

	width: 16px;
	height: 16px;

	margin: 0;
	padding: 0;

	opacity: 0;
	cursor: pointer;
}

/* Visual icon */
div.grid label.dw-grid-check .dw-grid-check-icon {
	display: block;
	width: 16px;
	height: 16px;

	font-size: 16px;
	line-height: 16px;
	text-align: center;

	color: #4f5962;

	transition: color .12s ease, text-shadow .12s ease;
}

/* Unchecked */
div.grid label.dw-grid-check input[type="checkbox"] + .dw-grid-check-icon:before {
	content: "\f096"; /* fa-square-o */
}

/* Checked */
div.grid label.dw-grid-check input[type="checkbox"]:checked + .dw-grid-check-icon:before {
	content: "\f046"; /* fa-check-square-o */
}

div.grid label.dw-grid-check input[type="checkbox"]:checked + .dw-grid-check-icon {
	color: #358388;
}

/*
 * Font Awesome 4's fa-check-square-o has slightly different side bearings
 * from fa-square-o. Shift only the checked glyph 1px to the right so the
 * visual box stays in the same place when toggling state.
 */
div.grid label.dw-grid-check input[type="checkbox"]:checked + .dw-grid-check-icon:before {
	position: relative;
	left: 1px;
}

/* Partial selection */
div.grid label.dw-grid-check input[type="checkbox"]:indeterminate + .dw-grid-check-icon:before {
	content: "\f147"; /* fa-minus-square-o */
}

div.grid label.dw-grid-check input[type="checkbox"]:indeterminate + .dw-grid-check-icon {
	color: #358388;
}

/* Hover */
div.grid label.dw-grid-check:hover .dw-grid-check-icon {
	color: #358388;
}

/* Keyboard focus */
div.grid label.dw-grid-check input[type="checkbox"]:focus + .dw-grid-check-icon {
	color: #358388;
	text-shadow: 0 0 4px rgba(53,131,136,.28);
}

/* Disabled */
div.grid label.dw-grid-check input[type="checkbox"]:disabled {
	cursor: default;
}

div.grid label.dw-grid-check input[type="checkbox"]:disabled + .dw-grid-check-icon {
	color: #7f8b94;
}

div.grid label.dw-grid-check input[type="checkbox"]:disabled:checked + .dw-grid-check-icon {
	color: #66717a;
}


/* =========================================================
   GRID LOADER
   ========================================================= */

.dw-grid-loader {
	position: absolute;
	z-index: 6000;
	height: 0;
	pointer-events: none;
	text-align: center;
}

.dw-grid-loader-message {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;

	min-width: 142px;
	height: 28px;
	padding: 0 11px;

	background: #f7fbfb;
	border: 1px solid #9fc2c5;
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(20,35,45,.08);

	box-sizing: border-box;

	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 26px;

	color: #2f7478;
	white-space: nowrap;
}

.dw-grid-loader-spinner {
	display: inline-block;
	flex: 0 0 13px;
	width: 13px;
	height: 13px;

	border: 2px solid rgba(53,131,136,.22);
	border-top-color: #358388;
	border-radius: 50%;

	box-sizing: border-box;

	-webkit-animation: dw-grid-spin .75s linear infinite;
	animation: dw-grid-spin .75s linear infinite;
}

@-webkit-keyframes dw-grid-spin {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@keyframes dw-grid-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}


/* =========================================================
   GRID PAGINATION
   ========================================================= */

div.gridcontainer .paggination {
	font-size: 11px;
	font-weight: 600;
	padding: 12px 0 4px;
	border: 0;
	color: #5d6770;
}

div.gridcontainer .paggination.steps {
	padding-top: 0;
	border: 0;
	float: right;
}

div.gridcontainer .paggination.right {
	float: right;
	text-align: right;
	padding-top: 0;
	border: 0;
	width: 500px;
	overflow: hidden;
}

div.gridcontainer .paggination a {
	display: inline-block;
	min-width: 28px;
	box-sizing: border-box;
	border: 1px solid #d8dde2;
	border-radius: 5px;
	padding: 4px 8px;
	margin: 0 1px;
	background: #fff;
	color: #4a5560;
	text-align: center;
	text-decoration: none;
	line-height: 18px;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

div.gridcontainer .paggination a.active {
	background: #358388;
	border-color: #358388;
	color: #fff;
}

div.gridcontainer .paggination a:hover {
	background: #eef6f6;
	border-color: #9fc2c5;
	color: #2f7478;
}

div.gridcontainer .paggination a.active:hover {
	background: #2f7478;
	border-color: #2f7478;
	color: #fff;
}


/* =========================================================
   THIN SCROLLBAR
   ========================================================= */

div.grid {
	scrollbar-width: thin;
	scrollbar-color: #bfc4c9 #f5f6f7;
}

div.grid::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

div.grid::-webkit-scrollbar-track {
	background: #f5f6f7;
}

div.grid::-webkit-scrollbar-thumb {
	background: #bfc4c9;
	border-radius: 10px;
}

div.grid::-webkit-scrollbar-thumb:hover {
	background: #9fa6ad;
}

div.grid::-webkit-scrollbar-corner {
	background: #f5f6f7;
}