.data-explorer .datastore-query-builder .App {
    text-align: left;
    margin: 10px 0;
}

.data-explorer .total-rows {
    background: #f7f7f7;
    width: 200px;
    border-left: 4px solid var(--cdmx-secondary);
    padding: 4px 8px;
    margin-bottom: 20px;
    color: var(--cdmx-text);
}

.dq-rule-submit .btn {
    background-color: var(--cdmx-primary);
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    padding: 6px 12px;
    margin: 0 5px 0 0;
}

.dq-rule-add {
    background-color: var(--cdmx-primary);
    border-radius: 4px;
    display: inline-block;
    margin: 0 5px 0 0;
    color: transparent !important;
    content: "" !important;
    font-size: 0;
    padding: 6px 12px;
}

.dq-body {
    display: inline-block;
}

.dq-rule-add:before {
    color: #fff !important;
    content: "Add a filter" !important;
    width: 10000em;
    font-size: 16px;
}

.dq-rule-submit {
    display: inline-block;
}

.datastore-query-builder .dq-body .dq-rule-item .dq-btn-add {
    background-color: var(--color-success) !important;
    color: #fff !important;
    font-size: 20px;
    border-color: var(--color-success) !important;
    padding: 1px 12px !important;
    border-radius: 3px;
}

/* filter rule */
.datastore-query-builder .dq-body .dq-rule-item {
    margin-bottom: 10px !important;
}

.data-explorer .datastore-query-builder .dq-date-picker {
    padding-bottom: 10px;
}

.data-explorer .datastore-query-builder .dq-date-picker select {
    border: 1px solid var(--cdmx-secondary);
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 10px;
    color: var(--cdmx-text);
}

.data-explorer .datastore-query-builder .dq-date-picker .react-date-picker {
    margin-right: 10px;
}

.datastore-query-builder .dq-body .dq-rule-item select,
.datastore-query-builder .dq-body .dq-rule-item input {
    border: 1px solid var(--cdmx-secondary);
    border-radius: 3px;
    padding: 5px 10px;
    color: var(--cdmx-text);
}

.datastore-query-builder .dq-body .dq-rule-item .form-control,
.datastore-query-builder .dq-body .dq-rule-item .btn {
    margin-right: 10px;
}

.datastore-query-builder .dq-body .dq-rule-item .dq-btn-remove {
    background-color: #f7f7f7 !important;
    color: var(--cdmx-text) !important;
    font-size: 20px;
    border-color: var(--cdmx-border) !important;
    padding: 1px 12px !important;
    border-radius: 3px;
}

.datastore-query-builder .dq-body .dq-rule-item .dq-btn-add {
    background-color: var(--cdmx-green-2) !important;
    border-color: var(--cdmx-green-2) !important;
    color: #fff !important;
    font-size: 20px;
    padding: 1px 12px !important;
    border-radius: 3px;
}

/* view tab panel */
.data-explorer-content {
    margin-top: 30px;
}

.data-explorer-content [id^="tab-"][aria-selected="true"] {
    border-top: 0 solid var(--cdmx-primary);
    background: var(--cdmx-primary);
    color: #fff;
}

.data-explorer-content [id^="tab-"] {
    font-size: 16px;
    outline: none;
    padding: 8px 15px;
    color: var(--cdmx-text);
}

.data-explorer-content [id^="tabpanel-"] {
    margin-top: -2px;
    border-top: 1px solid var(--cdmx-border);
    padding-top: 30px;
    margin-right: 0;
}

@media (min-width: 1024px) {
    .data-explorer-content [id^="tabpanel-"] .container {
        max-width: 100%;
        padding: 0;
    }
}

/* table pagination */
.data-explorer .pagination {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
}

.data-explorer .pagination li {
    border: 1px solid var(--cdmx-primary);
    color: var(--cdmx-primary) !important;
    padding: 6px 12px;
}

.data-explorer .pagination .active {
    background-color: var(--cdmx-primary);
    color: white !important;
}

.data-explorer .pagination .active a:hover {
    background-color: var(--cdmx-secondary);
    cursor: pointer;
}

/* chart/map builder */
form.map-builder,
form.chart-builder {
    background-color: var(--color-info);
}

[id^="tabpanel"] .container .w-1\/4 .text-xs {
    color: #fff;
    text-transform: capitalize;
    font-size: 12px;
}

/* share/embed/copy */
.dx-share-container {
    display: none;
}

/* table styling */
.ReactTable .rt-thead.-header {
    box-shadow: none !important;
    border-bottom: 1px solid var(--cdmx-border);
    background-color: #f7f7f7 !important;
}

.ReactTable .rt-tbody .rt-td:last-child {
    padding-right: 30px !important;
}

.ReactTable .rt-tbody .rt-td {
    color: var(--cdmx-text);
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ReactTable .rt-tbody .rt-td div {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ReactTable .rt-tbody .rt-td .any,
.ReactTable .rt-tbody .rt-td .string,
.ReactTable .rt-tbody .rt-td .date,
.ReactTable .rt-tbody .rt-td .datetime {
    text-align: left;
}

.ReactTable .rt-tbody .rt-td .number,
.ReactTable .rt-tbody .rt-td .integer {
    text-align: right;
}

.ReactTable .rt-th {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--cdmx-text);
}

.ReactTable .rt-tr.-odd {
    background-color: #faf8f5 !important;
}

.ReactTable .rt-tr.-even {
    background-color: #fff !important;
}

.ReactTable .rt-thead .rt-th.-sort-asc {
    box-shadow: inset 0 3px 0 0 var(--cdmx-secondary);
}

.ReactTable .rt-thead .rt-th.-sort-desc {
    box-shadow: inset 0 -3px 0 0 var(--cdmx-secondary);
}

.dx-guiding-text p {
    background: #f7f7f7;
    border-left: 3px solid var(--color-warning);
    padding: 0 4px;
    font-style: italic;
    color: var(--cdmx-text);
}

.ReactTable .rt-table {
    overflow-x: scroll;
    overflow-y: scroll;
}

.ReactTable .rt-table .rt-thead,
.ReactTable .rt-table .rt-tbody {
    overflow: visible;
}

.ReactTable .rt-table .rt-thead {
    top: 0;
    position: -webkit-sticky;
    position: sticky;
    background: #fff;
}
/* ==========================================
   CDMX - Variables Globales
========================================== */

:root {

  /* Tipografía */
  --cdmx-font-family: 'Roboto', sans-serif;

  /* Colores principales */
  --cdmx-primary: #9F2241;          /* Guinda */
  --cdmx-primary-hover: #7f1b34;

  --cdmx-secondary: #BC955C;        /* Dorado */

  /* Texto */
  --cdmx-text: #55585a;
  --cdmx-text-secondary: #55585a;

  /* Colores complementarios */
  --cdmx-pink-1: #f5aeb8;
  --cdmx-pink-2: #de7aaf;
  --cdmx-pink-3: #d72f89;
  --cdmx-purple: #a27ab5;
  --cdmx-beige: #ac6d14;
  --cdmx-green-1: #799b48;
  --cdmx-blue-1: #73cae6;
  

  /* Bordes */
  --cdmx-border: #e5e5e5;

  --color-success: #027a35;
  --color-warning: #f08217;
  --color-danger: #e5074c;
  --color-info: #266cb4;

  /* Sombras */
  --cdmx-shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
  --cdmx-shadow-md: 0 8px 24px rgba(0, 0, 0, .12);

  /* Radios */
  --cdmx-radius-sm: 10px;
  --cdmx-radius-md: 14px;
  --cdmx-radius-lg: 18px;

  /* Espaciado */
  --cdmx-section-space: 48px;
}