datavis-glide 4.0.0-PRE.0

package/wcdatavis.css

@@ -0,0 +1,1601 @@
+/* WC DATAVIS STYLES */
+
+.wcdv_button {
+	cursor: pointer;
+	vertical-align: middle;
+}
+
+button.wcdv_icon_button {
+	cursor: pointer;
+	border: none;
+	background-color: transparent;
+	padding: 0;
+	padding-top: 2px;
+	vertical-align: middle;
+}
+
+button.wcdv_icon_button > svg.wcdv_icon {
+	height: 16px;
+	width: 16px;
+}
+
+button.wcdv_icon_button_nolabel svg.wcdv_icon {
+	margin-right: 0px !important;
+}
+
+button.wcdv_button_left {
+	margin-left: 0.5em;
+}
+
+button.wcdv_button_right {
+	margin-right: 0.5em;
+}
+
+/*
+ * In-cell buttons like the one used to show the full value of a cell when the maxHeight is set in
+ * column config.
+ */
+
+td button.wcdv_icon_button_incell {
+	/*
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	*/
+	float: right;
+	border: none;
+	margin-left: 4px; /* to keep left-aligned data (like numbers) from running into it */
+	padding: 2px;
+	border-radius: 2px;
+	background-color: #E0E0E080;
+	color: #80808080;
+}
+
+td:hover button.wcdv_icon_button_incell {
+	background-color: #C0C0C080;
+}
+
+td button.wcdv_icon_button_incell:hover {
+	color: #404040;
+}
+
+/* Icon sizing. */
+
+td button.wcdv_icon_button_incell svg.wcdv_icon {
+	width: 12px;
+	height: 12px;
+}
+
+/*
+ * Styles for checkboxes which are displayed using icons.
+ */
+
+button.wcdv_icon_button > svg.wcdv_icon.wcdv_icon_checkbox_off {
+	color: #000;
+	padding: 0.2em;
+	border-radius: 0.2em;
+}
+button.wcdv_icon_button > svg.wcdv_icon.wcdv_icon_checkbox_on {
+	background-color: #0095D6;
+	color: #FFF;
+	padding: 0.2em;
+	border-radius: 0.2em;
+}
+
+.wcdv_grid button > svg.wcdv_icon,
+.wcdv_graph button > svg.wcdv_icon,
+.wcdv_spinner > svg.wcdv_icon {
+	margin-right: 0.25em;
+}
+
+li.wcdv_aggregate_field:first-child {
+	padding-top: 0.5ex;
+}
+
+li.wcdv_aggregate_field {
+	padding-top: 0.25ex;
+	padding-bottom: 0.25ex;
+}
+
+button.wcdv_expand_button > svg.wcdv_icon {
+	width: 15px;
+	height: 15px;
+	cursor: pointer;
+	margin-right: inherit;
+	color: #737373;
+}
+
+/*
+ * Icon animation and rotation utility classes.
+ */
+
+@keyframes wcdv-spin {
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+.wcdv_icon_spin {
+	animation: wcdv-spin 1.5s linear infinite;
+}
+
+.wcdv_icon_pulse {
+	animation: wcdv-spin 1s steps(8) infinite;
+}
+
+.wcdv_icon_rotate_180 {
+	transform: rotate(180deg);
+}
+
+.wcdv_icon_rotate_270 {
+	transform: rotate(270deg);
+}
+
+.wcdv_grid, .wcdv_graph {
+	background-color: white;
+	margin-top: 1em;
+	display: flex;
+	flex-direction: column;
+}
+
+.wcdv_grid:first-of-type {
+	margin-top: 0;
+}
+
+.wcdv_dlg_warning_banner {
+	border-left: solid 8px #bf311a;
+    padding: 4px;
+    margin-bottom: 4px;
+    background-color: #fadfdb;
+}
+
+.wcdv_dlg_info_banner {
+	border: solid 2px #2196F3;
+	background-color: #E3F2FD;
+	color: #0D47A1;
+    padding: 1ex;
+	margin-top: 1ex;
+}
+
+.wcdv_bottom_border_teal {
+	border-bottom: solid 2px #009688;
+}
+
+hr.wcdv_hr_gradient {
+	border: 0;
+	height: 2px;
+	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+}
+
+/******************************************************************************/
+
+.wcdv_omnifilter {
+	display: inline-flex;
+	align-items: center;
+	height: 30px;
+	padding: 0 4px;
+	vertical-align: top;
+}
+
+.wcdv_omnifilter_input_wrap {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+}
+
+.wcdv_omnifilter_input {
+	border: 1px solid #ddd;
+	border-radius: 3px;
+	padding: 2px 22px 2px 6px;
+	font-size: 0.85em;
+	outline: none;
+	width: 150px;
+}
+
+.wcdv_omnifilter_input:focus {
+	border-color: #66afe9;
+	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
+}
+
+.wcdv_omnifilter_clear {
+	position: absolute;
+	right: 2px;
+	top: 50%;
+	transform: translateY(-50%);
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	color: #999;
+	padding: 0 3px;
+	font-size: 0.8em;
+	line-height: 1;
+}
+
+.wcdv_omnifilter_clear:hover {
+	color: #333;
+}
+
+.wcdv_omnifilter_toggle.wcdv_omnifilter_active {
+	filter: drop-shadow(0 0 4px rgba(102, 175, 233, 0.8)) drop-shadow(0 0 8px rgba(102, 175, 233, 0.5));
+}
+
+/******************************************************************************/
+
+.wcdv_grid_titlebar {
+	border: 1px solid #c7c7c7;
+	padding: 0 0 0 8px;
+        cursor: pointer;
+	color: #737373;
+	flex: 0 0 auto;
+}
+
+.wcdv_grid_titlebar strong {
+	font-size: 1em;
+	line-height: 30px;
+}
+
+.wcdv_grid_titlebar .headingInfo {
+	cursor: default;
+	font-size: 0.9em;
+	line-height: 30px;
+	padding-right: 8px;
+}
+
+div.wcdv_grid_titlebar div.wcdv_loading_spinner {
+	display: inline-block;
+	margin-left: -4px;
+	margin-right: 4px;
+	vertical-align: middle;
+}
+
+.wcdv_grid_titlebar .link {
+	cursor: pointer;
+}
+
+.wcdv_grid_titlebar .link:hover {
+	text-decoration: underline;
+}
+
+/*
+ * Controls in the top-right of the titlebar:
+ *
+ *   - omnifilter
+ *   - download
+ *   - refresh
+ *   - config
+ *   - show/hide
+ */
+
+div.wcdv_titlebar_controls {
+	float: right;
+	height: 30px;
+}
+
+div.wcdv_titlebar_controls button.wcdv_icon_button {
+	height: 30px;
+}
+
+div.wcdv_titlebar_controls button.wcdv_icon_button > svg.wcdv_icon {
+    cursor: pointer;
+    text-align: center;
+    user-select: none;
+    width: 24px;
+    height: 18px;
+    vertical-align: middle;
+    margin-top: -4px;
+}
+
+/******************************************************************************/
+
+.wcdv_grid_content {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+	border: 1px solid #c7c7c7;
+    border-top: none;
+}
+
+/******************************************************************************/
+
+.wcdv_grid_toolbar {
+	border-bottom: 1px solid #c7c7c7;
+	padding: 0 4px;
+	flex: 0 0 auto;
+	font-size: 0.85em;
+	padding: 0 8px;
+}
+
+.wcdv_grid_toolbar .wcdv_button.pull-right {
+	padding-right: 0.5em;
+}
+
+/******************************************************************************/
+
+.wcdv_toolbar_section button,
+.wcdv_toolbar_section label,
+.wcdv_toolbar_section .wcdv_button,
+.wcdv_toolbar_section input {
+	margin-left: 0.5em;
+}
+
+.wcdv_toolbar_section button:first-child,
+.wcdv_toolbar_section label:first-child,
+.wcdv_toolbar_section .wcdv_button:first-child,
+.wcdv_toolbar_section input:first-child {
+	margin-left: 0;
+}
+
+.wcdv_toolbar_section > svg.wcdv_icon {
+	width: 18px;
+	height: 18px;
+	color: #888;
+}
+.wcdv_toolbar_section > svg.wcdv_icon:hover {
+	color: #444;
+}
+
+.wcdv_toolbar_section button svg.wcdv_icon {
+	width: 1.15em;
+	height: 1.15em;
+	padding-right: 3px;
+	vertical-align: middle;
+	margin-top: -2px;
+}
+.wcdv_toolbar_section button[disabled=disabled] svg.wcdv_icon {
+	color: #c7c7c77a;
+	cursor: not-allowed;
+}
+
+.wcdv_toolbar_section:first-child {
+	padding-left: 0px;
+	border-left: none;
+}
+
+.wcdv_toolbar_section {
+	display: inline-block;
+	margin-right: 8px;
+	vertical-align: middle;
+	border-left: 1px solid #c7c7c7;
+	padding: 4px 4px 4px 12px;
+}
+
+.wcdv_toolbar_section input{
+	vertical-align: middle;
+}
+
+.wcdv_toolbar_section input[type="radio"] {
+	margin-top: -1px;
+}
+
+.wcdv_toolbar_view select{
+	margin-left: 0.5em;
+}
+
+.wcdv_toolbar_view .wcdv_icon_button span{
+	margin: 0 !important;
+	padding: 0;
+}
+
+.wcdv_grid_toolbar svg.wcdv_icon.wcdv_info_icon {
+	color: #737373;
+	margin-left: 0.5em;
+}
+
+/******************************************************************************/
+
+.wcdv_warning_banner {
+	padding: 0.5em;
+	font-weight: bold;
+	background-color: #FFEB3B;
+	font-size: small;
+	cursor: pointer;
+}
+
+/******************************************************************************/
+
+.wcdv_grid_control {
+	background-color: #FFF;
+	border-bottom: 1px solid #c7c7c7;
+	font-size: 0.85em;
+
+	/*
+	 * Flexible display of group/filter/pivot controls.
+	 */
+
+	display: flex;
+    flex-shrink: 0;
+	flex-wrap: wrap;
+	justify-content: space-between;
+}
+
+.wcdv_control_title_bar {
+	display: flex;
+	border-bottom: 1px solid #737373;
+	align-items: baseline;
+}
+
+.wcdv_control_title {
+	color: #737373;
+	text-transform: uppercase;
+	font-weight: bold;
+	display: inline-block;
+	flex: 1 1 auto;
+}
+
+button.wcdv_control_clear_button {
+	margin-left: 10px;
+	/* so the clear icon doesn't increase the height of the control pane title */
+	margin-top: -2px;
+	flex: none;
+	height: 14px;
+}
+
+button.wcdv_control_clear_button > svg.wcdv_icon {
+	height: 14px;
+	/* so the clear icon doesn't increase the height of the control pane title */
+	margin-top: -2px;
+	margin-right: 0px;
+	stroke-width: 2.5px;
+}
+
+.wcdv_control_pane {
+	flex-grow: 1;
+	background-color: #FFF;
+	padding: 8px;
+	display: inline-block;
+	vertical-align: top;
+	border: solid 1px #c7c7c7;
+	border-radius: 8px;
+	margin: 8px;
+}
+
+.wcdv_control_pane > div {
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+}
+
+.wcdv_control_pane > div > ul {
+	list-style-type: none;
+	padding: 0px;
+	margin-top: 1ex;
+	margin-bottom: 1ex;
+	width: 100%;
+}
+
+.wcdv_control_pane > div select.wcdv_control_addField {
+	width: 100%;
+}
+
+/* HORIZONTAL CONTROLS */
+
+.wcdv_control_pane ul.wcdv_control_horizontal li {
+	display: inline-block;
+}
+
+/*
+ * These are the little arrows that show the relationship between group & pivot fields like this:
+ * [field] → [field] → [field].  Since these are horizontal lists, the arrows are actually placed at
+ * the beginning of every <LI>, we just use CSS to hide the first one so they appear to be between
+ * field elements.
+ */
+
+.wcdv_control_pane ul.wcdv_control_horizontal > li:first-child > svg.wcdv_icon {
+	display: none;
+}
+
+.wcdv_control_pane ul.wcdv_control_horizontal li > svg.wcdv_icon {
+	margin-right: 4px;
+}
+
+/*
+ * These are the fields themselves.
+ */
+
+.wcdv_control_pane ul.wcdv_control_horizontal li .wcdv_field {
+	display: inline-block;
+	border-radius: 4px;
+	padding: 4px;
+	margin-right: 4px;
+	cursor: pointer;
+	white-space: nowrap;
+	border: 1px solid #c7c7c7;
+	border-radius: 4px;
+	background-color: #FFF;
+}
+
+.wcdv_control_pane ul.wcdv_control_horizontal li.ui-sortable-helper .wcdv_field button {
+	display: none;
+}
+
+/* VERTICAL CONTROLS */
+
+.wcdv_control_pane > div > ul.wcdv_control_vertical {
+	flex-grow: 1;
+}
+
+.wcdv_control_pane > div > ul.wcdv_control_vertical.ui-sortable > li span.wcdv_field_name {
+	cursor: pointer;
+}
+
+/*
+.wcdv_control_pane .wcdv_control_vertical li:first-child .wcdv_field {
+	border-top: none;
+}
+*/
+
+.wcdv_control_pane .wcdv_control_vertical li .wcdv_field {
+	display: flex;
+	align-items: center;
+	/* border-top: dashed 1px #c7c7c7; */
+	padding: 4px;
+}
+
+.wcdv_sortable_helper {
+	border-radius: 8px;
+	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1),
+		0 2px 4px rgba(0, 0, 0, 0.06);
+	background: white; /* Ensures shadow is visible */
+}
+
+.ui-state-highlight {
+	box-sizing: border-box;
+}
+
+/*
+ * These are the fields themselves.
+ */
+
+.wcdv_control_pane .wcdv_control_vertical .wcdv_field .wcdv_field_name {
+	flex-grow: 1;
+	flex-shrink: 0;
+	/*
+	max-width: 10em;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	*/
+}
+
+/* AGGREGATE CONTROL */
+
+.wcdv_aggregate_control_error {
+	margin-left: 4px;
+	color: #FF9800;
+	cursor: help;
+}
+
+.ui-widget.ui-widget-content.wcdv_aggregate_control_error_tooltip {
+	border: solid 2px #FF9800;
+	border-top-width: 10px;
+	font-size: 0.85em;
+	padding: 4px 6px 4px 6px;
+}
+
+.ui-widget.ui-widget-content.wcdv_info_tooltip {
+	border: solid 2px #737373;
+	border-top-width: 10px;
+	font-size: 0.85em;
+	padding: 4px 6px 4px 6px;
+}
+
+/* FILTER CONTROL */
+
+.wcdv_filter_control ul li .wcdv_field {
+	display: flex;
+	align-items: center;
+}
+
+.wcdv_filter_control ul li .wcdv_field > * {
+	flex: none;
+}
+
+.wcdv_filter_control ul li .wcdv_field .wcdv_field_name {
+	flex-grow: 0 !important;
+}
+
+.wcdv_filter_control ul li .wcdv_field > .wcdv_filter_control_filter_container {
+	margin-left: 1ex;
+	flex: 1 1 auto;
+}
+
+.wcdv_filter_control ul li .wcdv_field > .wcdv_filter_control_filter_container > div {
+	align-items: center;
+	display: flex;
+	white-space: nowrap;
+	padding-top: 2px;
+	padding-bottom: 2px;
+}
+
+/* WARNING - MAY NEED TUNED IN THE FUTURE */
+
+.wcdv_filter_control ul li .wcdv_field > .wcdv_filter_control_filter_container > div > input,
+.wcdv_filter_control ul li .wcdv_field > .wcdv_filter_control_filter_container > div > div.SumoSelect {
+	flex: 1 1 auto;
+}
+
+/*
+ * If we don't set this here, then floatThead will cover up the Sumo Select dropdown.  The
+ * floatThead z-index is 1001.
+ */
+
+div.SumoSelect > div.optWrapper {
+	z-index: 1002;
+}
+
+.wcdv_filter_control_filter_container {
+	display: inline-block;
+}
+
+/* AGGREGATE CONTROL */
+
+ul.wcdv_aggregate_control_fieldlist {
+	padding-left: 0.5em;
+	list-style-type: none;
+	text-align: right;
+}
+
+ul.wcdv_aggregate_control_fieldlist > li > label {
+	padding-right: 0.5em;
+}
+
+/* OPERATIONS PALETTE */
+
+div.wcdv_operations_category {
+	display: inline-block;
+	border: solid 1px #c7c7c7;
+	border-radius: 4px;
+	padding: 6px;
+	margin-top: 8px;
+	margin-left: 0.5em;
+}
+
+div.wcdv_operations_category:first-child {
+	margin-left: 0;
+}
+
+div.wcdv_operations_category > button.wcdv_operation {
+	margin-left: 0.5em;
+}
+
+div.wcdv_operations_category > button.wcdv_operation:first-child {
+	margin-left: 0;
+}
+
+button.wcdv_operation.no_label > svg.wcdv_icon {
+	margin-right: 0;
+}
+
+/* ROW OPERATIONS */
+
+div.wcdv_grid_table td.wcdv_row_operations {
+	text-align: left;
+}
+
+
+div.wcdv_grid_table td.wcdv_row_operations > button.wcdv_operation {
+	margin-left: 0.25em;
+}
+
+div.wcdv_grid_table td.wcdv_row_operations > button.wcdv_operation:first-child {
+	margin-left: 0;
+}
+
+/* CELL OPERATIONS */
+
+button.wcdv_operation[data-operation-type="cell"]:disabled:hover {
+	color: #80808080;
+	cursor: default;
+}
+
+button.wcdv_operation[data-operation-type="cell"]:disabled > svg.wcdv_icon {
+	cursor: default;
+}
+
+/******************************************************************************/
+
+.wcdv_grid_table,
+.wcdv_graph_render {
+	flex: 1 1 auto;
+}
+
+.wcdv_grid_table th {
+	white-space: nowrap;
+}
+
+.wcdv_grid_table .wcdv_group_col_spacer {
+	width: 18px;
+	min-width: 18px;
+	text-align: center;
+	/*padding-right: 0px;*/
+}
+
+.wcdv_filter_icon {
+	cursor: pointer;
+    width: 1.5em;
+    padding: 0;
+    text-align: center;
+    margin: -.333em -0.26667em -.333em 0;
+    height: 1.86667em;
+    line-height: 1.86667em;
+}
+
+.wcdv_sort_icon {
+	cursor: pointer;
+    margin: -0.3333em 0 -0.3333em 0;
+}
+
+/*
+td.wcdv_group_col_spacer,
+td.wcdv_group_value {
+	background-color: #EEE;
+}
+*/
+
+/*
+td.wcdv_group_value > span.wcdv_group_value {
+	font-weight: bold;
+}
+*/
+
+tr.wcdv_grid_filterrow th.wcdv_grid_filtercol {
+	text-transform: none;
+}
+
+/******************************************************************************/
+
+.wcdv_drop_target_hover {
+	background-color: rgba(0, 149, 214, 0.11) !important;
+}
+
+.wcdv_drag_handle.ui-draggable {
+	cursor: pointer;
+}
+
+.wcdv_drag_handle.ui-draggable-dragging {
+	visibility: visible;
+	border: solid 1px #888;
+	background-color: #EEE;
+	padding: 4px;
+	border-radius: 4px;
+	z-index: 1;
+
+	/*
+	 * Without negative margin, the extra space in the span causes the table column sizes to be
+	 * recalculated, making everything shift around when you start dragging.  Feels like a hack.
+	 * The exact number was determined by just playing around to find what works.
+	 */
+
+	margin: -10px;
+}
+
+.wcdv_control_vertical.ui-sortable.wcdv_sortable_sender {
+	min-height: 3ex;
+}
+
+.wcdv_sortable_helper {
+}
+
+/******************************************************************************/
+
+.wcdvgrid_textLeft {
+    text-align: left;
+}
+
+.wcdvgrid_textRight {
+    text-align: right;
+}
+
+.wcdvgrid_textCenter {
+    text-align: center;
+}
+
+.wcdvgrid_textJustify {
+    text-align: justify;
+}
+
+.wcdv_centered {
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.wcdv_nowrap {
+	white-space: nowrap !important;
+}
+
+/******************************************************************************/
+/* COLUMN RESIZING                                                            */
+/******************************************************************************/
+
+.wcdv_resizable_column {
+	position: relative;
+}
+
+.wcdv_column_resize_handle {
+	position: absolute;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	width: 5px;
+	cursor: col-resize;
+	background-color: transparent;
+	z-index: 10;
+}
+
+.wcdv_column_resize_handle:hover {
+	background-color: #0095D6;
+}
+
+.wcdv_resizing {
+	cursor: col-resize !important;
+	user-select: none;
+}
+
+.wcdv_resizing * {
+	cursor: col-resize !important;
+}
+
+/* Use table-layout: fixed for proper column width control */
+.wcdv_grid_table table.wcdv-resizable-cols {
+	table-layout: fixed;
+}
+
+/******************************************************************************/
+/* COLUMN REORDERING                                                          */
+/******************************************************************************/
+
+.wcdv_reorderable_column {
+	cursor: grab;
+}
+
+.wcdv_reorderable_column:active {
+	cursor: grabbing;
+}
+
+.wcdv_column_dragging {
+	background-color: #E3F2FD !important;
+}
+
+.wcdv_column_drop_target {
+	background-color: #BBDEFB !important;
+	box-shadow: inset 0 0 0 2px #0095D6;
+}
+
+.wcdv_column_drop_indicator {
+    position: absolute;
+    width: 3px;
+    border-left: 3px dashed #4CAF50;
+    pointer-events: none;
+    z-index: 1000;
+    display: none;
+}
+
+/******************************************************************************/
+/* ROW MODE (CLIPPED vs WRAPPED)                                              */
+/******************************************************************************/
+
+/* Wrapped mode (default) - cells can wrap to multiple lines */
+.wcdv_grid_table.wcdv_row_mode_wrapped td {
+	white-space: normal;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+/* Clipped mode - single line cells with text truncated */
+.wcdv_grid_table.wcdv_row_mode_clipped td {
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 300px;
+}
+
+.wcdv_grid_table.wcdv_row_mode_clipped th {
+	white-space: nowrap;
+}
+
+/* Allow overflow visible on headers for resize handles */
+.wcdv_grid_table.wcdv_row_mode_clipped th.wcdv_resizable_column {
+	overflow: visible;
+}
+
+/*
+ * The "show more rows" button, shown when using the "more" limit method.
+ */
+
+tr.wcdvgrid_more td {
+	background-color: #F6F6F9;
+	border-top: 3px double #808080;
+	font-weight: normal;
+	color: #646464;
+	font-size: .85em;
+	font-weight: normal;
+	padding-bottom: 3px;
+	padding-top: 3px;
+	text-transform: uppercase;
+	cursor: pointer;
+}
+
+/*
+ * Pagination controls, shown below the table when the pagination feature is enabled.
+ */
+
+.wcdv_pagination {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 4px;
+	padding: 8px 0;
+	user-select: none;
+}
+
+.wcdv_pagination_btn {
+	min-width: 32px;
+	height: 32px;
+	padding: 0 8px;
+	border: 1px solid #CCCCCC;
+	border-radius: 4px;
+	background-color: #FFFFFF;
+	color: #333333;
+	font-size: 0.85em;
+	cursor: pointer;
+	line-height: 30px;
+	text-align: center;
+}
+
+.wcdv_pagination_btn:hover:not(:disabled) {
+	background-color: #E8E8E8;
+}
+
+.wcdv_pagination_btn:disabled {
+	cursor: default;
+}
+
+.wcdv_pagination_btn.wcdv_pagination_current {
+	background-color: #337AB7;
+	border-color: #337AB7;
+	color: #FFFFFF;
+	font-weight: bold;
+}
+
+.wcdv_pagination_ellipsis {
+	min-width: 24px;
+	text-align: center;
+	color: #999999;
+	font-size: 0.85em;
+	line-height: 32px;
+}
+
+/*
+.wcdv_grid .tabletool .thead {
+	overflow: initial;
+}
+
+.wcdv_grid .tabletool .outer.thead {
+	overflow: initial;
+}
+
+.wcdv_grid .tabletool.ttsticky .outer.thead .inner {
+	overflow: initial;
+}
+*/
+
+.ui-progressbar.wcdvgrid_progressbar {
+	height: 32px;
+	padding: 8px;
+}
+
+.ui-progressbar .ui-progressbar-value.wcdvgrid_progressbar {
+	background: #80A0C0;
+}
+
+.ui-resizable-helper {
+	border: solid 2px dotted;
+}
+
+/*
+ * =============================================================================
+ *  BASIC TABLE STYLES
+ * =============================================================================
+ */
+
+.wcdv_grid_table table {
+	/*
+	 * If we use border-collapse then the border of the sticky header <th> elements will scroll with
+	 * the table body, rather than being stuck with the <th> elements. Using border-spacing instead.
+	 */
+	/* border-collapse: collapse; */
+	border-spacing: 0;
+	background-color: #FFFFFF;
+	font-size: 1em;
+	width: 100%;
+}
+
+.wcdv_grid_table table th {
+	background-color: #FFF;
+    color: #737373;
+	font-weight: normal;
+	line-height: 16px;
+	text-align: left;
+}
+
+.wcdv_grid_table table thead th {
+	background-color: #737373;
+	color: #FFF;
+}
+
+.wcdv_grid_table table thead th button.wcdv_icon_button > svg.wcdv_icon {
+	color: #FFF;
+	stroke-width: 2.5px;
+}
+
+.wcdv_sort_column_active.wcdv_bg-primary{
+	color: #FFF;
+}
+
+/*
+.wcdv_grid_table table th.wcdv_sort_column_active {
+	background-color: rgba(255, 152, 0, 0.2);
+}
+*/
+
+.wcdv_grid_table table > thead > tr:first-child > th:first-child {
+	border-bottom: none;
+}
+
+.wcdv_grid_table table > thead > tr > th {
+	padding: 5px 4px;
+}
+
+.wcdv_grid_table table > thead > tr + tr > th{
+	background-color: #f0f0f5;
+    color: #000;
+    border-bottom: 1px solid #000;
+}
+
+/*
+.wcdv_grid_table table > thead > tr:last-child > th {
+	border-bottom: none !important;
+}
+*/
+
+.wcdv_grid_table table > tfoot {
+	background-color: #F6F6F9;
+	border-top: 3px double #808080;
+}
+
+.wcdv_grid_table table > tfoot > tr {
+	border-bottom: solid 1px #c7c7c7;
+}
+
+.wcdv_grid_table table > tfoot > tr:last-child {
+	border-bottom: none;
+}
+
+.wcdv_grid_table table > tbody > tr.even {
+	/* blue: background-color: #e3f2fd; */
+	background-color: #e8f5e9;
+}
+
+.wcdv_grid_table table.zebra > tbody > tr.odd {
+	background-color: white;
+}
+
+.wcdv_grid_table table td.wcdv_selected_row {
+	background-color: rgba(255, 235, 59, .4);
+}
+
+.wcdv_grid_table table td.wcdv_focus {
+	background-color: rgba(76, 175, 80, .3);
+}
+
+/*
+.wcdv_grid_table table > tbody > tr:first-child > td,
+.wcdv_grid_table table > tbody > tr:first-child > th {
+	padding-top: 4px;
+}
+*/
+
+.wcdv_grid_table table td,
+.wcdv_grid_table table th {
+	padding: 4px;
+	vertical-align: top;
+}
+
+.wcdv_grid_table table .wcdv_divider {
+	border-left: solid 1px #c7c7c7;
+	padding-left: 4px !important;
+}
+
+.wcdv_grid_table table .wcdv_pivot_colval_boundary {
+	border-left: solid 1px #c7c7c7;
+	padding-left: 4px !important;
+}
+
+.wcdv_grid_table table .wcdv_pivot_colval_boundary:first-child{
+	border-left: none;
+}
+
+.wcdv_grid_table table .wcdv_pivot_colval_boundary ~ td {
+	padding-left: 16px;
+}
+
+.wcdv_grid_table table .wcdv_pivot_aggregate_boundary {
+	border-left: double #c7c7c7;
+	padding-left: 4px !important;
+}
+
+.wcdv_grid_table table .wcdv_gridtable_agg_pivot td,
+.wcdv_grid_table table .wcdv_gridtable_agg_pivot th {
+	border-top: double #c7c7c7;
+	padding-top: 4px;
+}
+
+.wcdv_heading_container{
+	display: flex;
+}
+
+.wcdv_heading_container .wcdv_heading_title{
+	flex-grow: 1;
+	margin-right: 25px;
+	line-height: 18px;
+}
+
+.wcdv_heading_container div{
+	display: inline-block;
+}
+
+.wcdv_grid_table table .wcdv_bld {
+	border-left: double #c7c7c7;
+}
+
+.wcdv_grid_table table .wcdv_brd {
+	border-right: double #c7c7c7;
+}
+
+.wcdv_grid_table table .wcdv_btd {
+	border-top: double #c7c7c7;
+}
+
+.wcdv_graph_message {
+    font-size: 30px;
+    font-weight: bold;
+    color: #C0C0C0;
+    text-align: center;
+    position: relative;
+	padding: 10px 0;
+}
+
+/*
+ * ROW SELECTION CELLS
+ */
+
+.wcdv-row-select-col {
+    width: 1em;
+}
+
+/*
+ * CELLS YOU CAN "DRILL DOWN" INTO
+ */
+
+.wcdv_grid_table table td.wcdv_drill_down {
+	cursor: zoom-in;
+}
+.wcdv_grid_table table td.wcdv_drill_down:active {
+	background-color: #fff9c4;
+}
+
+.wcdv_maxheight_wrapper {
+	position: relative;
+	overflow: hidden;
+}
+
+.wcdv_maxheight_wrapper_withwidth {
+	text-overflow: ellipsis;
+}
+
+/*
+ * EMPTY CELL
+ */
+
+html:not(.ie11) .wcdv_grid_table table td.wcdv_cell_empty,
+html:not(.ie11) .wcdv_grid_table table th.wcdv_cell_empty {
+	position: relative;
+}
+
+html:not(.ie11) .wcdv_grid_table table td.wcdv_cell_empty div,
+html:not(.ie11) .wcdv_grid_table table th.wcdv_cell_empty div {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	margin: 4px;
+}
+
+.wcdv_grid_table table td.wcdv_cell_empty div,
+.wcdv_grid_table table th.wcdv_cell_empty div {
+	background: repeating-linear-gradient(-45deg, rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 8px, rgba(0, 0, 0, 0) 8px, rgba(0, 0, 0, 0) 16px);
+}
+
+/*
+* Icon Tweaks
+*/
+
+.wcdv_grid svg.wcdv_icon, .wcdv_graph svg.wcdv_icon {
+	width: 18px;
+	height: 18px;
+}
+
+.wcdv_grid th svg.wcdv_icon {
+	width: 15px;
+	height: 15px;
+	opacity: 0.8;
+}
+
+.wcdv_grid th svg.wcdv_icon:hover {
+	opacity: 1;
+}
+
+/*
+* Various Overrides
+*/
+
+.wcdv_grid select{
+	padding: 2px;
+	border-color: #c7c7c7;
+}
+
+.wcdv_grid select + svg.wcdv_icon {
+	vertical-align: middle;
+}
+
+/*
+* Main Theme Colors
+*/
+
+.wcdv_bg-primary{
+	background-color: #0095D6 !important;
+}
+
+.wcdv_text-primary{
+	color: #0095D6;
+}
+
+.wcdv_border-primary{
+	border-color: #0095D6 !important;
+}
+
+.wcdv_grid_table table > tbody > tr.even{
+	background-color: #f0f0f5;
+}
+
+.wcdv_grid_table table td.wcdv_selected_row{
+	background-color: #0095d642;
+}
+
+.SumoSelect .select-all.selected>span i, .SumoSelect>.optWrapper.multiple>.options li.opt.selected span i{
+	background-color: #0095D6;
+}
+
+.SumoSelect .select-all.partial>span i{
+	background-color: #c7c7c77a;
+}
+
+/*
+ * GRID COLUMN CONFIGURATION WINDOW
+ */
+
+.wcdv_colconfigwin_table {
+	width: 100%;
+	border-collapse: collapse;
+}
+
+.wcdv_colconfigwin_table tr {
+	background-color: white;
+}
+
+.wcdv_colconfigwin_table thead tr th {
+	text-align: left;
+	color: #808080;
+}
+
+.wcdv_colconfigwin_table tbody tr td:first-child,
+.wcdv_colconfigwin_table thead tr th:first-child {
+    padding-left: 0.5em;
+}
+
+.wcdv_colconfigwin_table tbody tr td,
+.wcdv_colconfigwin_table thead tr th {
+    padding-top: 0.5ex;
+    padding-bottom: 0.5ex;
+}
+
+.wcdv_colconfigwin_table tbody tr td:last-child,
+.wcdv_colconfigwin_table thead tr th:last-child {
+    padding-right: 0.5em;
+}
+
+.wcdv_colconfigwin_table tbody tr:hover {
+    background-color: #E0F2F1;
+}
+
+#wcdv_debugwin dt {
+	font-weight: bold;
+}
+
+#wcdv_debugwin dt::after {
+	content: ":";
+}
+
+#wcdv_debugwin dd {
+	margin-inline-start: 1.5em;
+}
+
+#wcdv_debugwin .json-formatter-row {
+	font-family: unset;
+}
+
+.wcdv_minimal_width {
+	width: 1px;
+}
+
+.wcdv_width_1em {
+	text-align: center;
+	width: 1em;
+}
+
+div.wcdv_button_bar {
+	text-align: right;
+}
+
+div.wcdv_button_bar button {
+	margin-left: 0.5em;
+}
+
+div.wcdv_button_bar button:first-child {
+	margin-left: 0em;
+}
+
+div.wcdv_button_bar button > svg.wcdv_icon {
+	width: 1.15em;
+	height: 1.15em;
+	padding-right: 3px;
+	vertical-align: middle;
+	stroke-width: 2.5px;
+}
+
+div.wcdv_button_bar button[disabled=disabled] > svg.wcdv_icon {
+	color: #c7c7c77a;
+	cursor: not-allowed;
+}
+
+div.wcdv_button_bar button[data-role="ok"] > svg.wcdv_icon {
+	color: #2e7d32;
+}
+
+div.wcdv_button_bar button[data-role="cancel"] > svg.wcdv_icon {
+	color: #c62828;
+}
+
+/*
+ * GROUP FUNCTION WINDOW
+ */
+
+h1.wcdv_groupfun_header {
+	font-weight: normal;
+	font-size: inherit;
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+	padding-bottom: 0.5ex;
+	margin: 0px;
+	white-space: nowrap;
+}
+
+div.wcdv_groupfun_buttons {
+	border-top: solid 1px black;
+	padding: 0.5ex;
+}
+
+button.wcdv_option {
+	width: 100%;
+	padding-top: 1ex;
+	padding-bottom: 1ex;
+	margin-top: 0.5ex;
+	margin-bottom: 0.5ex;
+	white-space: nowrap;
+	text-align: left;
+}
+
+/******************************************************************************/
+
+.wcdv_group_value > .spinner,
+.wcdvgrid_more .spinner {
+  display: inline-block;
+  margin: auto 0.5em;
+}
+
+.wcdv_group_value > .spinner > div,
+.wcdvgrid_more .spinner > div {
+  width: 10px;
+  height: 10px;
+  background-color: #737373;
+  margin: auto 0.1em;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.wcdv_group_value > .spinner .bounce1,
+.wcdvgrid_more .spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.wcdv_group_value > .spinner .bounce2,
+.wcdvgrid_more .spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+
+/* STICKY TABLE HEADER/FOOTER */
+
+table thead.sticky,
+table tfoot.sticky {
+  position: sticky;
+}
+table thead.sticky {
+  inset-block-start: 0; /* "top" */
+	/*
+	 * If we fail to do this, then the "expand" button in group details output will show through the
+	 * header cell in the same column.
+	 */
+  z-index: 1;
+}
+table tfoot.sticky {
+  inset-block-end: 0; /* "bottom" */
+  z-index: 1;
+}
+
+/* ACTIVE ROW */
+
+.wcdv_grid .wcdv_grid_table tbody tr.wcdv-active-row {
+	background-color: #FFF9C4 !important; /* override zebra striping */
+	box-shadow: inset 0 0 0 2px #FFEB3B;
+}
+
+/* SLIDER */
+
+.wcdv-slider {
+	position: fixed;
+	top: 0;
+	right: -400px;
+	width: 400px;
+	height: 100vh;
+	background: white;
+	box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+	transition: right 0.3s ease;
+	z-index: 1000;
+	padding: 20px;
+	box-sizing: border-box;
+	overflow-y: auto;
+}
+
+.wcdv-slider.show {
+	right: 0;
+}
+
+.wcdv-slider-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	border-bottom: 1px solid #ccc;
+	padding-bottom: 10px;
+}
+
+.wcdv-slider-header h1 {
+	margin: 0px;
+}
+
+.wcdv-slider-close {
+	background: none;
+	border: none;
+	font-size: 24px;
+	cursor: pointer;
+	color: #666;
+}
+
+.wcdv-slider-close:hover {
+	color: #000;
+}
+
+.wcdv-slider-body {
+	margin: 0;
+}
+
+.wcdv-slider-body dt {
+	font-weight: bold;
+	color: #0095D6;
+	margin-top: 15px;
+	margin-bottom: 5px;
+}
+
+.wcdv-slider-body dt:first-child {
+	margin-top: 0;
+}
+
+.wcdv-slider-body dd {
+	margin: 0 0 10px 0;
+	padding: 8px;
+	background: #eee;
+	border-radius: 4px;
+	border-left: 3px solid #0095D6;
+}
+
+/* FOCUS */
+
+.wcdv-focus {
+	animation: wcdv-pulse 0.5s 2;
+}
+
+@keyframes wcdv-pulse {
+	0% {
+		box-shadow: 0 0 4px 4px #0095D6FF;
+	}
+	100% {
+		box-shadow: 0 0 4px 4px #0095D600;
+	}
+}
+
+/* TOOLTIPS */
+
+[data-tooltip] {
+	position: relative;
+	/*border-bottom: 1px dashed #000;*/
+	cursor: help
+}
+
+[data-tooltip]::after {
+	position: absolute;
+	opacity: 0;
+	pointer-events: none;
+	content: attr(data-tooltip);
+	left: 0;
+	top: calc(100% + 10px);
+	min-width: 20em;
+	line-height: initial;
+	border-radius: 4px;
+	box-shadow: 0px 0px 8px 2px rgb(0 0 0 / 60%);
+	background-color: white;
+	z-index: 10;
+	padding: 6px;
+	color: black;
+	text-align: left;
+	border-left: solid 6px #0095D6;
+	transform: translateY(-20px);
+	transition: all 150ms cubic-bezier(.25, .8, .25, 1);
+}
+
+[data-tooltip]:hover::after {
+	opacity: 1;
+	transform: translateY(0);
+	transition-duration: 300ms;
+}
+
+/* vim:set noet sw=4 ts=4: */