.jsoneditor-menu a.jsoneditor-poweredBy {
  visibility: hidden;
}

.jsoneditor {
    border-color: $border-color;
}

/* Menu Bar*/
.jsoneditor-menu {
    background: $color-gray-light;
    border-bottom: 1px solid $border-color;
}

/* Menu Bar buttons*/
.jsoneditor-menu>button {
    font-family: $font-family-icon !important;
    font-size: $navbar-font-size !important;
    line-height: $line-height-base !important;
    background-image:none !important;
    border-radius: $border-radius;
    border-color:$color-gray;
    opacity: 1;
    background-color:$btn-primary-icon-bg;
    color: $color-fg;
    font-weight: normal !important;
}

/* Navigation Bar */
.jsoneditor-navigation-bar{
   font-family: $font-family-primary !important;
   background-color: $color-bg;
   color: $color-fg;
   border-bottom: 1px solid $color-gray;
}

/* Over rides icons */
.jsoneditor-menu>button.jsoneditor-expand-all::before{
    content: "\f424";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-collapse-all::before{
    content: "\f422";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-redo::before {
    content: "\f01e";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-undo::before {
    content: "\f0e2";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-format::before {
    content: "\f03c";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-compact::before {
    content: "\f066";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-sort::before {
    content: "\f160";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-repair::before {
    content: "\f0ad";
    font-weight: 600 !important;
}

.jsoneditor-menu>button.jsoneditor-transform::before {
    content: "\f0b0";
    font-weight: 600 !important;
}

/* Undo redo buttons */
.jsoneditor-menu>.jsoneditor-modes>button:disabled,
.jsoneditor-menu>button:disabled {
    color:$color-fg  !important;
    opacity: $btn-disabled-opacity;
    border: thin solid;
    border-color:$color-gray;
    border-radius: $border-radius;
    background-color:$btn-primary-icon-bg !important;
}

/* Mode drop-down */
.jsoneditor-menu>.jsoneditor-modes>button:active,
.jsoneditor-menu>.jsoneditor-modes>button:focus,
.jsoneditor-menu>.jsoneditor-modes>button,{
    font-family: $font-family-primary !important;
    font-size: $font-size-base !important;
    line-height: $line-height-base !important;
    background-image:none !important;
    border-radius: $border-radius;
    border-color:$color-gray;
    opacity: 1;
    background-color:$btn-primary-icon-bg;
    color: $color-fg;
    font-weight: normal !important;
}

/* Mode drop-down options */
.jsoneditor-contextmenu .jsoneditor-menu button,
.jsoneditor-contextmenu .jsoneditor-separator {
  font-family: $font-family-primary !important;
  font-size: $font-size-base !important;
  background-color: $color-bg !important;
  color: $color-fg !important;
  border: none;
}

/* Drop-down hovered*/
.jsoneditor-contextmenu .jsoneditor-menu li button:hover {
    background-color: $btn-primary-hover-bg !important;
    border-color: $btn-primary-border-hover-bg !important;
    color: $btn-primary-color !important;
}

/* Drop-down selected*/
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:focus,
.jsoneditor-contextmenu .jsoneditor-menu li button.jsoneditor-selected:hover {
    background-color: $btn-primary-hover-bg !important;
    border-color: $btn-primary-border-hover-bg !important;
    color: $btn-primary-color !important;
}

/* Search Box*/
.jsoneditor-frame,
.jsoneditor-search input{
    color: $input-color;
    background-color: $input-bg;
}

/* Set expand icon to none*/
div.jsoneditor-tree button.jsoneditor-button:focus {
    background-color: $color-bg !important  ;
    outline: none;
}

/* Search Box results */
.jsoneditor-results {
  color: $color-fg;
}

/* Ace editor Setting */
/* Ace editor numbers */
.ace-jsoneditor .ace_gutter {
    background-color:$color-gray-light;
    color:$color-fg;
}
/* Ace editor code background */
.ace-jsoneditor .ace_scroller {
    background-color: $color-bg;
}

/* Ace editor code background readonly*/
#pg-json-editor[readonly] .ace-jsoneditor .ace_scroller{
    background-color: $color-gray-light;
    opacity: $btn-disabled-opacity;
}

/* Ace editor hide indent guide */
.ace-jsoneditor .ace_indent-guide {
    background: none;
}
/* Ace editor Key names */
.ace-jsoneditor .ace_variable {
    color: $color-fg !important;
}

/* Ace editorfonts */
.ace_editor,
.ace-jsoneditor *{
    font-family: $font-family-editor !important;
    font-size: $font-size-base !important;
    line-height: $line-height-base !important;
    color: $color-fg;
}
.ace-jsoneditor.ace_editor {
    font-family: $font-family-editor !important;
    font-size: $font-size-base !important;
    line-height: $line-height-base !important;
    color: $color-fg;
    background-color:$color-bg !important;
}

/* /* font setting all other mode */
/* form, tree, code, preview, schema-error  */
div.jsoneditor-default,
div.jsoneditor-field,
div.jsoneditor-value,
div.jsoneditor textarea,
div.jsoneditor td,
div.jsoneditor-readonly,
.jsoneditor-popover,
div.jsoneditor-tree{
    font-family: $font-family-primary !important;
    font-size: $font-size-base !important;
    line-height: $line-height-base !important;
    color: $color-fg;
    background-color:$color-bg;
}

/* read only mode */
#pg-json-editor[readonly] {
  & div.jsoneditor-tree,
  & div.jsoneditor td,
  & div.jsoneditor-readonly,
  & div.jsoneditor-value,
  & div.jsoneditor-field,
  & div.jsoneditor-tree button.jsoneditor-button:focus {
    background-color: $color-gray-light !important;
    opacity: 0.85;
  }
}

div.jsoneditor td.jsoneditor-tree {
    vertical-align: middle;
}

pre.jsoneditor-preview{
  background-color: $color-gray-lighter !important;
  opacity: 0.8;
  color: $color-fg;
}


/* Hilight selected values in tree/form modes  */
div.jsoneditor-field.jsoneditor-highlight,
div.jsoneditor-field[contenteditable=true]:focus,
div.jsoneditor-field[contenteditable=true]:hover,
div.jsoneditor-value.jsoneditor-highlight,
div.jsoneditor-value[contenteditable=true]:focus,
div.jsoneditor-value[contenteditable=true]:hover
{
  background-color: $sql-editor-selection-bg;
  border: 1px solid $sql-editor-selection-bg;
  border-radius: $border-radius;
}

/* Hi-light line in code */
.ace-jsoneditor .ace_marker-layer .ace_active-line {
    background-color: $sql-editor-selection-bg;
    border: 0;
    border-radius: $border-radius;
}

.ace-jsoneditor .ace_gutter-active-line {
    background-color:$color-gray-light;
}

.ace-jsoneditor .ace_marker-layer .ace_selected-word {
    border: 1px solid $color-primary-light;
}


.ace-jsoneditor .ace_marker-layer .ace_selection {
    background: $color-primary-light;
}

/* Nested DD*/
.jsoneditor-contextmenu .jsoneditor-icon {
  background-image:none;
}

.jsoneditor-contextmenu .jsoneditor-text {
  padding:4px 4px 4px 5px;
}


.jsoneditor-contextmenu .jsoneditor-menu{
    border: 1px solid $border-color;
    background: $color-bg !important;
    color: $color-fg !important;
}


.jsoneditor-contextmenu .jsoneditor-menu button.jsoneditor-expand, {
  height:0px;
  background-color: $color-gray-light !important;
}

.jsoneditor-contextmenu .jsoneditor-menu li ul {
    padding: 0;
    border: 1px solid $border-color;
}

.jsoneditor-contextmenu .jsoneditor-separator {
    height: 0;
    border-top: 1px solid $border-color;
    padding-top: 5px;
    margin-top: 5px;
}

/* Status Bar */
.jsoneditor-statusbar {
    background-color: $color-gray-light !important;
    color: $color-primary-light-fg !important;
    border-top: 1px solid $border-color;
}

/* Validation Bar */
.jsoneditor .jsoneditor-validation-errors {
    background-color:$sql-history-error-bg !important;
    color:$color-fg;
    border: 1px solid $color-danger;
}

.jsoneditor .jsoneditor-text-errors {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid $color-gray;
}


.jsoneditor .jsoneditor-text-errors tr,
.jsoneditor .jsoneditor-text-errors td,
.jsoneditor .jsoneditor-text-errors td pre,
.jsoneditor .jsoneditor-text-errors tr.parse-error {
  background-color: $color-danger-lighter !important;
  color:$color-fg;
}


/* Transform & sort */
/* Header */
.jsoneditor-modal .pico-modal-header {
  font-family: $font-family-primary !important;
  font-size: $font-size-base !important;
  font-weight: bold;
  background-color: $alert-header-bg !important;
  color: $alert-header-fg;
}

/* Body */
.pico-content{
    background-color: $color-gray-light !important;
}

/* Disable links */
.jsoneditor-modal a {
    color: $color-fg !important;
}

/* Replace help text */
.pico-modal-contents p{
  visibility: hidden;
  display: flex;
  margin-bottom: -1rem;
}

.pico-modal-contents p::after{
  visibility: visible;
  position: absolute;
  content: "Enter a JMESPath query to filter, sort, or transform the JSON data.";
  display: block;
}

/* Fields */
.jsoneditor-modal,
.jsoneditor-modal #query,
.jsoneditor-modal input,
.jsoneditor-modal input[type=text],
.jsoneditor-modal input[type=text]:focus,
.jsoneditor-modal option,
.jsoneditor-modal select,
.jsoneditor-modal table td,
.jsoneditor-modal table th,
.jsoneditor-modal textarea, {
    color: $color-fg !important;
    background-color: $color-bg !important;
    font-size: $font-size-base !important;
    font-family: $font-family-primary !important;
    padding: 4px;
}

.jsoneditor-modal option{
  background-color: $color-primary-light !important;
  border: 1px solid $color-primary-light !important;
  border-radius: $border-radius !important;
  color:$color-fg !important;
}

/* Ascending descending buttons */
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc,
.jsoneditor-modal .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc {
    //color: $color-bg !important;
    background-color: $color-primary !important;
    //border-color: $color-primary !important;
    border-color: $color-primary;
    color: $btn-primary-color !important;
}


.jsoneditor-modal input[type=button]{
    color: $color-fg;
    background-color: $color-bg;
}

/* OK Button */
.jsoneditor-modal input[type=submit] {
  color: $btn-primary-color !important;
  border-color: $color-primary !important;
  background-color: $color-primary !important;
  text-transform: uppercase;
}

.jsoneditor-modal .jsoneditor-jmespath-label {
  color: $color-fg;
  font-weight: bold;
}
.selectr-option,
.selectr-options-container {
  color: $color-fg;
  background-color: $color-bg;
}

.selectr-option.active,
.selectr-option.selected{
    color: $btn-primary-color !important;
    background-color: $color-primary !important;
    border-color: $color-primary;
}

.jsoneditor-modal .selectr-selected{
    color: $color-fg;
    background-color: $color-bg;
}

.jsoneditor-modal .selectr-selected .selectr-tag {
    border: 1px solid $color-primary;
    color: $btn-primary-color !important;
    background-color: $color-primary !important;
    border-color: $color-primary;
}

.jsoneditor-modal .selectr-selected .selectr-tag-remove::before{
    color: $color-primary !important;
}

/* Update String. Key colors code mode */
.ace_variable {color: $color-editor-variable !important;}

.ace_string {color: $color-editor-string !important;}

.ace_constant.ace_numeric {color:$color-editor-number !important;}

/* Update String. Key colors tree/form mode*/
div.jsoneditor-value.jsoneditor-string {
  color: $color-editor-string !important;
}

div.jsoneditor-value.jsoneditor-number {
  color:$color-editor-number !important;
}