.v-application .e-grid .e-rowcell {
  padding: 2px 5px;
}

/*
  Syncfusions selection box has no built in disable feature
  So they suggest forcing a CSS class to 'disable' the boxes
*/
.disable-checkbox {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

/* add a check to syncfusions disabled checkbox */
.checkbox-disabled::before {
  content: '\e933';
  line-height: 1px !important;
}

.v-application .e-chip-list.e-chip,
.v-application .e-chip-list.e-chip:hover,
.v-application .e-chip-list .e-chip:hover .v-application .e-chip-list .e-chip {
  padding: 4px 12px;
  background-color: #eeeeee;
  display: inline;
  font-size: 10px;
  color: #333 !important;
}

.v-application.theme--dark .e-grid.e-gridhover tr[role='row']:not(.e-editedrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.v-application.theme--dark .e-grid.e-gridhover tr[role='row']:hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.v-application.theme--dark .e-grid.e-gridhover tr[role='row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.v-application.theme--dark .e-grid.e-rtl .e-gridhover tr[role='row']:hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.v-application.theme--dark .e-grid.e-gridhover tr[role='row']:hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell) {
  background-color: #222;
  color: #fff;
}

.v-application.theme--dark .e-chip-list .e-chip {
  background-color: #222;
  color: #ccc !important;
}

.v-application.theme--dark .e-dropdownbase,
.v-application.theme--dark .e-delim-view,
.v-application.theme--dark .e-delim-values,
.v-application.theme--dark .e-dropdownbase::placeholder,
.v-application.theme--dark .e-pivotview .e-stackedheadercelldiv,
.v-application.theme--dark .e-pivotview .e-headertext,
.v-application.theme--dark .e-pivotview .e-rowsheader .e-cellvalue,
.v-application.theme--dark .e-pivotview .e-expand.e-icons,
.v-application.theme--dark .e-pivotview .e-grid .e-icons,
.v-application.theme--dark .e-input-group .e-input-group-icon,
.v-application.theme--dark .e-input-group.e-control-wrapper .e-input-group-icon,
.v-application.theme--dark .e-input-group input.e-input::placeholder,
.v-application.theme--dark .e-input-group.e-control-wrapper input.e-input::placeholder,
.v-application.theme--dark .e-input-group textarea.e-input::placeholder,
.v-application.theme--dark .e-input-group.e-control-wrapper textarea.e-input::placeholder {
  color: #eee;
}

.v-application.theme--dark .e-pivotview .e-valuescontent {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.v-application.theme--dark .e-pivotview .e-rowcell.e-rowsheader {
  border-color: rgba(255, 255, 255, 0.12) !important;
  background-color: #222 !important;
}

.v-application .e-grid .e-headercell,
.v-application .e-grid .e-detailheadercell {
  border-style: solid;
  border-width: 0;
  font-size: 2px;
  font-weight: 100;
  height: 32px;
  overflow: hidden;
  padding: 0px 7px 0px;
  position: relative;
  text-align: left;
}

.v-application .e-avatar.e-avatar-circle {
  border-radius: 2px;
}

.v-application .e-input-group {
  padding: 2px 5px;
  background: #fff !important;
  border-radius: 5px !important;
  border-color: transparent !important;
  opacity: 0.8;
  text-align: left;
  padding-left: 10px;
}

.v-application .e-daterangepicker {
  margin-top: 4px !important;
  padding-left: 4px !important;
}

.v-application .e-date-range-wrapper.e-input-group {
  padding: 2px 6px;
  line-height: normal !important;
  padding: 0px 5px 0 5px;
}

.v-application.theme--dark .e-dialog,
.v-application.theme--dark .e-dlg-header-content,
.v-application.theme--dark .e-dlg-header,
.v-application.theme--dark .e-dlg-content,
.v-application.theme--dark .e-footer-content,
.v-application.theme--dark .e-input-group {
  background: #000 !important;
  color: white;
}

.v-application.theme--dark .e-dlg-header,
.v-application.theme--dark .e-treeview .e-list-text {
  color: #ccc
}

.v-application.theme--dark .e-grid .e-content,
.v-application.theme--dark .e-grid .e-gridheader,
.v-application.theme--dark .e-pivotview .e-group-row .e-group-rows {
  background-color: #000;
}


.v-application.theme--dark .e-grid .e-rowcell:not(.e-editedbatchcell),
.v-application.theme--dark .e-toolbar .e-toolbar-items,
.v-application.theme--dark .e-grid .e-detailrowcollapse:not(.e-editedbatchcell),
.v-application.theme--dark .e-grid .e-detailrowexpand:not(.e-editedbatchcell),
.v-application.theme--dark .e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell),
.v-application.theme--dark .e-grid,
.v-application.theme--dark .e-emptyrow:not(.e-editedbatchcell),
.v-application.theme--dark .e-grid.e-default,
.v-application.theme--dark .e-toolbar-items .e-tbar-pos,
.v-application.theme--dark .e-grid .e-headercell,
.v-application.theme--dark .e-grid .e-detailheadercell,
.v-application.theme--dark .e-pager,
.v-application.theme--dark .e-pager .e-pagercontainer,
.v-application.theme--dark .e-grid .e-table {
  background-color: #000;
  color: white;
  border-color: #000;
}

.v-application .e-parentmsgbar,
.v-application .e-pager .e-pagerconstant {
  display: none;
}

.v-application.theme--dark .e-pager .e-numericitem,
.v-application.theme--dark .e-pager .e-pager-default,
.v-application.theme--dark .e-pager div.e-icons {
  background-color: #111;
  color: #ccc;
}

.v-application.theme--dark .e-pager .e-numericitem:hover {
  background-color: #222;
}

/* Pagination active item: light theme */
.v-application.theme--light .e-pager .e-currentitem,
.v-application.theme--light .e-pager .e-currentitem:hover,
.v-application.theme--light .e-pager .e-currentitem.e-numericitem.e-focused {
  background-color: var(--v-ttPrimary-base);
}

/* Pagination active item: dark theme */
.v-application.theme--dark .e-pager .e-currentitem,
.v-application.theme--dark .e-pager .e-currentitem:hover,
.v-application.theme--dark .e-pager .e-currentitem.e-numericitem.e-focused {
  background-color: var(--v-ttPrimary-base);
  color: white;
}

.v-application.theme--dark .e-pivotfieldlist-wrapper.e-static,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values {
  background-color: #000 !important;
  border-color: #222;
}

.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-field-table .e-field-header-wrapper,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-field-table .e-field-header,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-wrapper,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-wrapper,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-wrapper,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-wrapper {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #ccc !important;
}

.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-content .e-pvt-btn-div .e-pivot-button,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-content .e-pvt-btn-div .e-pivot-button,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-content .e-pvt-btn-div .e-pivot-button,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-content .e-pvt-btn-div .e-pivot-button {
  background-color: #222 !important;
  border-color: #333;
  color: #ccc !important;
}

.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-content .e-pvt-btn-div .e-pivot-button:hover,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-content .e-pvt-btn-div .e-pivot-button:hover,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-content .e-pvt-btn-div .e-pivot-button:hover,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-content .e-pvt-btn-div .e-pivot-button:hover {
  background-color: #333 !important;
}

.v-application.theme--dark .e-treeview .e-list-item.e-hover>.e-fullrow {
  background-color: #333 !important;
  border-color: #333;
}

.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-content .e-pvt-btn-div .e-pivot-button .e-sort,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filter,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filtered,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-content .e-pvt-btn-div .e-pivot-button .e-dropdown-icon,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-content .e-pvt-btn-div .e-pivot-button .e-edit,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-content .e-pvt-btn-div .e-pivot-button .e-sort,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filter,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filtered,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-content .e-pvt-btn-div .e-pivot-button .e-dropdown-icon,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-content .e-pvt-btn-div .e-pivot-button .e-edit,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-content .e-pvt-btn-div .e-pivot-button .e-sort,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filter,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filtered,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-content .e-pvt-btn-div .e-pivot-button .e-dropdown-icon,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-content .e-pvt-btn-div .e-pivot-button .e-edit,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-content .e-pvt-btn-div .e-pivot-button .e-sort,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filter,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-content .e-pvt-btn-div .e-pivot-button .e-pv-filtered,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-content .e-pvt-btn-div .e-pivot-button .e-dropdown-icon,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-content .e-pvt-btn-div .e-pivot-button .e-edit {
  color: #777 !important;
}

.v-application.theme--dark .e-btn.e-flat,
.e-css.e-btn.e-flat,
.v-application.theme--dark .e-treeview .e-list-item.e-hover>.e-text-content .e-list-text,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-field-table .e-field-list ul li .e-selected-node,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-field-table .e-field-header-wrapper .e-sort-none,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-field-table .e-field-header-wrapper .e-sort-ascend,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-field-table .e-field-header-wrapper .e-sort-descend,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-wrapper .e-axis-icon-wrapper .e-axis-rows,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-wrapper .e-axis-icon-wrapper .e-axis-columns,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-wrapper .e-axis-icon-wrapper .e-axis-values,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-axis-wrapper .e-axis-icon-wrapper .e-axis-filters,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-wrapper .e-axis-icon-wrapper .e-axis-rows,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-wrapper .e-axis-icon-wrapper .e-axis-columns,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-wrapper .e-axis-icon-wrapper .e-axis-values,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-axis-wrapper .e-axis-icon-wrapper .e-axis-filters,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-wrapper .e-axis-icon-wrapper .e-axis-rows,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-wrapper .e-axis-icon-wrapper .e-axis-columns,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-wrapper .e-axis-icon-wrapper .e-axis-values,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-axis-wrapper .e-axis-icon-wrapper .e-axis-filters,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-wrapper .e-axis-icon-wrapper .e-axis-rows,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-wrapper .e-axis-icon-wrapper .e-axis-columns,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-wrapper .e-axis-icon-wrapper .e-axis-values,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-axis-wrapper .e-axis-icon-wrapper .e-axis-filters {
  color: #ccc !important;
}

.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-filters .e-draggable-prompt,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-left-axis-fields .e-field-list-rows .e-draggable-prompt,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-columns .e-draggable-prompt,
.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-axis-table .e-right-axis-fields .e-field-list-values .e-draggable-prompt {
  color: #333 !important;
}

.v-application.theme--dark .e-pivotfieldlist-wrapper .e-field-list-container .e-field-table {
  border-color: #222 !important;
}

.v-application.theme--dark .e-pivotview .e-grouping-bar .e-pivot-button,
.v-application.theme--dark .e-pivotview .e-group-rows .e-pivot-button {
  background-color: #222 !important;
  border-color: #222 !important;
  color: #ccc !important;
}

.v-application.theme--dark .e-pivotview .e-grouping-bar .e-pivot-button:hover,
.v-application.theme--dark .e-pivotview .e-group-rows .e-pivot-button:hover {
  background-color: #333 !important;
  border-color: #333 !important;
  color: #ccc !important;
}