.visualizer-settings {
  background-color: #f8f9f9;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
  font-size: 13px;
  position: relative; }
  .visualizer-settings .visualizer-settings__title {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    border-bottom: 1px solid #e6eaee; }
    .visualizer-settings .visualizer-settings__title .dashicon {
      vertical-align: top;
      margin-right: .25em; }
  .visualizer-settings .visualizer-settings__content {
    padding: 2.5em 0; }
    .visualizer-settings .visualizer-settings__content .visualizer-settings__content-description {
      margin: 0 0 1.5em 0;
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
      font-size: 18px;
      text-align: center; }
    .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option {
      display: -webkit-box;
      display: flex;
      -webkit-box-align: start;
      align-items: flex-start;
      flex-wrap: wrap;
      margin: 0 auto;
      padding: 1.25em 1.5em;
      max-width: 80%;
      background: #fff;
      border-width: 1px 1px 0;
      border-style: solid;
      border-color: #e6eaee;
      cursor: pointer; }
      .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option.locked {
        cursor: default; }
        .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option.locked:hover {
          background: #ffffff; }
      .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option:hover {
        background: #f5f5f5; }
      .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option:last-of-type {
        border-bottom-width: 1px; }
      .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option .visualizer-settings__content-option-title {
        max-width: 80%;
        display: block;
        font-size: 1.25em; }
      .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option .visualizer-settings__content-option-icon {
        align-self: center;
        margin-left: auto;
        color: #b9bcc2; }
        .visualizer-settings .visualizer-settings__content .visualizer-settings__content-option .visualizer-settings__content-option-icon .dashicon {
          height: 25px;
          width: 25px; }
  .visualizer-settings .visualizer-settings__charts {
    text-align: center;
    padding-bottom: 25px; }
    .visualizer-settings .visualizer-settings__charts .visualizer-settings__charts-grid {
      display: grid;
      grid-template-columns: 50% 50%; }
      .visualizer-settings .visualizer-settings__charts .visualizer-settings__charts-grid .visualizer-settings__charts-single {
        margin: 25px;
        padding-bottom: 50px;
        background-color: #efefef;
        position: relative; }
        .visualizer-settings .visualizer-settings__charts .visualizer-settings__charts-grid .visualizer-settings__charts-single .visualizer-settings__charts-title {
          padding: 10px;
          font-weight: bold;
          text-align: center; }
        .visualizer-settings .visualizer-settings__charts .visualizer-settings__charts-grid .visualizer-settings__charts-single .visualizer-settings__charts-footer {
          font-size: small; }
        .visualizer-settings .visualizer-settings__charts .visualizer-settings__charts-grid .visualizer-settings__charts-single .visualizer-settings__charts-controls {
          width: 100%;
          position: absolute;
          bottom: 0;
          padding: 10px;
          font-weight: bold;
          text-align: center;
          cursor: pointer; }
    .visualizer-settings .visualizer-settings__charts .dataTables_wrapper {
      background: #fff;
      padding: 10px; }
    .visualizer-settings .visualizer-settings__charts .visualizer-no-charts {
      padding-top: 25px; }
  .visualizer-settings .visualizer-settings__chart {
    text-align: center; }
    .visualizer-settings .visualizer-settings__chart .dataTables_wrapper {
      background: #fff;
      padding: 10px; }
  .visualizer-settings .visualizer-settings__controls {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    border-top: 1px solid #e6eaee; }

.visualizer-advanced-panel.components-panel__body.is-opened > .components-panel__body-title {
  margin-bottom: 0; }

.visualizer-inner-sections {
  background: #f8f9f9; }
  .visualizer-inner-sections .components-panel__body-toggle:hover {
    background: #EEEEEE; }
  .visualizer-inner-sections ul.visualizer-list {
    list-style: disc;
    margin-left: 15px; }

.components-panel__body-button .components-panel__body-toggle.components-button .dashicons-admin-tools {
  margin: -2px 6px -2px 0; }

.components-panel__body-button .components-panel__body-toggle.components-button .dashicons-admin-users {
  margin: -2px 6px -2px 0; }

.components-panel__body-button .components-panel__body-toggle.components-button .components-panel__arrow {
  width: 48px;
  height: 48px;
  right: 0;
  border-top: 1px solid #ddd;
  -webkit-transform: translateY(-50%) rotate(270deg);
          transform: translateY(-50%) rotate(270deg); }

.components-panel__body-button.visualizer-panel-back .components-panel__body-title {
  background: #f3f3f3; }
  .components-panel__body-button.visualizer-panel-back .components-panel__body-title:hover {
    background: #f3f3f3; }
  .components-panel__body-button.visualizer-panel-back .components-panel__body-title .components-panel__body-toggle {
    margin: 10px 0;
    background: #fff; }
    .components-panel__body-button.visualizer-panel-back .components-panel__body-title .components-panel__body-toggle.components-button {
      padding-left: 60px; }
      .components-panel__body-button.visualizer-panel-back .components-panel__body-title .components-panel__body-toggle.components-button:hover .components-panel__arrow {
        background: #f3f3f3;
        border-width: 1px 1px 0 1px;
        border-color: #ddd;
        border-style: solid; }
      .components-panel__body-button.visualizer-panel-back .components-panel__body-title .components-panel__body-toggle.components-button .components-panel__arrow {
        left: 0;
        -webkit-transform: translateY(-50%) rotate(90deg);
                transform: translateY(-50%) rotate(90deg); }

.visualizer-chart-editor {
  max-width: 100%;
  margin: 25px 25px 0; }
  .visualizer-chart-editor .htEditor {
    margin-bottom: 20px; }
    .visualizer-chart-editor .htEditor .htRowHeaders {
      height: auto !important;
      width: auto !important; }
    .visualizer-chart-editor .htEditor .ht_master .wtHolder {
      height: auto !important;
      width: auto !important; }

.visualizer-json-query-modal .components-modal__content {
  padding-left: 0;
  padding-right: 0; }
  .visualizer-json-query-modal .components-modal__content .components-modal__header {
    margin: 0; }

.visualizer-json-query-modal .components-icon-button {
  margin: 10px 0; }

.visualizer-json-query-modal .visualizer-json-query-modal-headers-panel {
  padding: 0 0 1em 2.2em; }
  .visualizer-json-query-modal .visualizer-json-query-modal-headers-panel .components-base-control {
    display: inline-block; }
  .visualizer-json-query-modal .visualizer-json-query-modal-headers-panel .visualizer-json-query-modal-field-separator {
    padding: 0 10px; }

.visualizer-json-query-modal .viz-editor-table tbody tr:first-child {
  background-color: #ececec !important; }

.visualizer-json-query-modal .viz-editor-table tr th {
  background-color: #cccccc; }

.visualizer-json-query-modal .viz-editor-table thead tr th:nth-child(n+1) {
  cursor: move !important; }

.visualizer-json-query-modal #visualizer-json-query-table {
  margin-bottom: 10px; }

.visualizer-json-query-modal ul {
  list-style: disc;
  margin-left: 10px; }

.visualizer-db-query-modal .CodeMirror-scroll {
  overflow: hidden !important;
  height: 50%;
  margin: 0;
  padding: 0; }

.visualizer-db-query-modal .CodeMirror-wrap {
  height: 200px;
  padding: 15px;
  color: #fff;
  background: #282923;
  font-size: 15px;
  margin-bottom: 20px; }
  .visualizer-db-query-modal .CodeMirror-wrap .CodeMirror-cursor {
    border-left: 1px solid #fff !important; }
  .visualizer-db-query-modal .CodeMirror-wrap .CodeMirror-placeholder {
    color: #fff; }
  .visualizer-db-query-modal .CodeMirror-wrap pre {
    color: #fff !important; }
  .visualizer-db-query-modal .CodeMirror-wrap .cm-keyword {
    color: #f92472 !important; }
  .visualizer-db-query-modal .CodeMirror-wrap .cm-comment {
    color: #74705d !important; }
  .visualizer-db-query-modal .CodeMirror-wrap .cm-number {
    color: #fff !important; }
  .visualizer-db-query-modal .CodeMirror-wrap .cm-string {
    color: #fff !important; }

.visualizer-db-query-modal ul {
  list-style: disc;
  margin-left: 10px; }

.visualizer-db-query-modal .db-wizard-error {
  color: #f00; }

.visualizer-db-query-modal .visualizer-db-query-actions .components-button:first-child {
  margin-right: 10px; }

.htContextMenu:not(.htGhostTable) {
  z-index: 999999; }

.htDatepickerHolder,
.CodeMirror-hints,
.DTCR_clonedTable,
.DTCR_pointer {
  z-index: 999999 !important; }

@media (min-width: 768px) {
  .visualizer-json-query-modal {
    width: 668px; }
  .visualizer-db-query-modal .CodeMirror-wrap {
    min-width: 550px; } }

@media (max-width: 768px) {
  .visualizer-settings .visualizer-settings__charts .visualizer-settings__charts-grid {
    display: grid;
    grid-template-columns: 100%; } }