.filter-title {
  background-color: $color-primary;
  padding: 2px;
  color: $color-primary-fg;
  font-size: 13px;
}

.sql-icon-lg {
  font-size: 0.875rem;
  line-height: 1.3;
}

.sql_textarea {
  height: 100%;
}

.sql_textarea .CodeMirror-scroll {
  z-index: 0;
}


.editor-title {
  padding: $sql-title-padding;
  background: $sql-title-bg;
  color: $sql-title-fg;
}


#editor-panel {
  z-index: 0;
  position: absolute;
  top: $sql-editor-panel-top;
  bottom: 0;
  left: 0;
  right: 0;
}

#editor-panel .CodeMirror-activeline-background {
  background: $color-primary-light;
}

.connection_status {
  width: 40px;
}


.ajs-body .warn-icon {
  color: $color-warning;
  font-size: 2em;
  margin-right: 20px;
  padding-top: 10px;
}

.connection_status_wrapper {
  width: 100%;
  border-top: $panel-border;
  border-bottom: $panel-border;
}

.connection_status .fa-clock-o,
.connection_status .fa-hourglass-half {
  color: $color-warning;
}

.connection_status .fa-exclamation-circle,
.connection_status .fa-exclamation-triangle {
  color: $color-danger;
}

li.CodeMirror-hint-active {
  background: $color-primary-light;
  color: $color-primary-fg;
}

.filter-container {
  position: relative;
  background-color: $color-bg;
  border: 1px solid $border-color;
  padding-bottom: 30px;
  top: 10px;
  z-index: 1;
  margin: auto;
  width: 60%;
}

.limit-enabled {
  background-color: $color-bg;
}



.CodeMirror-hint {
  margin: 0;
  padding: 0 4px;
  border-radius: 2px;
  overflow: hidden;
  white-space: pre;
  color: $color-fg;
  cursor: pointer;
}

.grid-header .ui-icon.ui-state-hover {
  background-color: $color-bg;
}

.slick-cell.selected span[data-cell-type="row-header-selector"] {
  color: $color-primary-fg;
}

.slick-cell.cell-move-handle {
  font-weight: bold;
  text-align: right;
  border-right: solid  $color-gray;
  background: $color-gray-lighter;
  cursor: move;
}

.cell-move-handle:hover {
  background: $color-gray-light;
}

.slick-row.selected .cell-move-handle {
  background: $color-warning-light;
}

.slick-row.complete {
  background-color: $color-success-light;
  color:  $color-gray-dark;
}

.cell-selection {
  border-right-color: $color-gray-light;
  border-right-style: solid;
  background: $color-gray-lighter;
  color:  $color-gray;
  text-align: right;
  font-size: 10px;
}

#datagrid .slick-header .slick-header-columns {
  background: $color-bg;
  height: 40px;
  border-bottom: $panel-border;
}

#datagrid .slick-header .slick-header-column.ui-state-default {
  padding: 4px 0 3px 6px;
  border-bottom: $panel-border;
  border-right: $panel-border;
}

.slick-row:hover .slick-cell{
  border-top: $table-hover-border;
  border-bottom: $table-hover-border;
  background-color: $table-hover-bg-color;
}

#datagrid .slick-header .slick-header-column.selected {
  background-color: $color-primary;
  color: $color-primary-fg;
}
.slick-row .slick-cell {
  border-bottom: $panel-border;
  border-right: $panel-border;
  z-index: 0;
}

#datagrid {
  background: none;
  background-color: $datagrid-bg;
}

.ui-widget-content.slick-row {
  &.even,  &.odd {
    background: none;
    background-color: $table-bg;
  }
}

/* Remove active cell border */
.slick-cell.active {
  border: 1px solid transparent;
  border-right: 1px solid $color-gray-light;
  border-bottom-color: $color-gray-light;
}

/* To highlight all newly inserted rows */
.grid-canvas .new_row {
  background: $color-success-light !important;
}

/* To highlight all the updated rows */
.grid-canvas .updated_row {
  background: $color-gray-lighter;
}

/* To highlight row at fault */
.grid-canvas .new_row.error, .grid-canvas .updated_row.error {
  background: $color-danger-light !important;
}

/* Disabled row */
.grid-canvas .disabled_row {
  background: $color-gray-lighter;
}

/* Disabled cell */
.grid-canvas .disabled_cell {
  color: $text-muted;
}

/* Highlighted (modified or new) cell */
.grid-canvas .highlighted_grid_cells {
  background: $color-gray-lighter;
  font-weight: bold;
}


/* Override selected row color */
#datagrid .slick-row .slick-cell.selected {
    background-color: $table-bg-selected;
}

/* color the first column */
#datagrid .slick-row .slick-cell.l0.r0.selected {
  background-color: $color-primary;
  color: $color-primary-fg;
}

#datagrid .slick-row > .slick-cell:not(.l0):not(.r0).selected {
  background-color: $table-hover-bg-color;
  border-top: $table-hover-border;
  border-bottom: $table-hover-border;
}

#datagrid div.slick-header.ui-state-default {
  background: $color-bg;
  border-bottom: none;
  border-right: none;
  border-top: none;
}

.pg-text-editor {
  z-index:10000;
  position:absolute;
  background: $color-bg-theme;
  padding: 0.25rem;
  border: $panel-border;
  box-shadow: $dropdown-box-shadow;


  & .pg-textarea {
    width:250px;
    height:80px;
    border:0;
    outline:0;
    resize: both;
  }

  & .pg-text-invalid {
    background: $color-danger-lighter;
  }
}

.sql-editor-message {
  white-space:pre-wrap;
  font-family: $font-family-editor;
  padding-top: 5px;
  padding-left: 10px;
  overflow: auto;
  height: 100%;
  font-size: 0.925em;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.view-geometry-property-table .td-disabled{
  color: $color-gray-lighter;
}

/* For leaflet map background */
.geometry-viewer-container-plain-background {
  background: $color-bg;
}


div.strikeout:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  border-top: 1px solid $color-danger;
  width: 100%;
}

div.strikeout:after {
  content: "\00B7";
  font-size: 1px;
}