/**
* DevExtreme (dx.common.css)
* Version: 20.2.3
* Build date: Tue Oct 20 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
/*** INI CUSTOM WM ***/

/*config for theme*/
.light {
  --bg-color: #fff;
  --text-color: rgba(0, 0, 0, 0.87);
}
.dark {
  --bg-color: #363640;
  --text-color: #fff;
}
/* Enable text seleccion in dashboards datagrids */
.dx-data-row {
  user-select: text !important;
}
/* Dasboard title height */
.dx-dashboard-title-toolbar > .dx-toolbar-items-container {
  height: 20px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
/* DataGrid bold cells */
.dx-datagrid-rowsview .dx-datagrid-content td.gridBoldCell {
  font-weight: bold !important;
}
.dx-datagrid-rowsview .dx-datagrid-content td.gridBlackCell {
  color: Black !important;
}
/* DataGrid row height */
.dx-datagrid .dx-row > td {
  padding: 3px 4px !important;
  font-size: 12px !important;
  line-height: 12px !important;
}
/* DataGrid panel toolbar height */
div.dx-datagrid-header-panel > div > div {
  height: 32px !important;
}
/* Pager height */
.dx-pager {
  padding: 2px 2px !important;
}
/* List items padding height (System settings menu) */
.dx-list-group-header {
  padding: 5px 6px !important;
  font-size: 12px !important;
}
.dx-list-item-content {
  font-size: 11px !important;
  padding: 3px 4px 1px !important
}
/* Contextual menus padding height (device and field) */
.dx-context-menu .dx-menu-item .dx-menu-item-content {
  padding: 0px 4px 0px 2px !important;
}
/* TreeView item height */
.dx-treeview-toggle-item-visibility {
  height: 16px !important;
}
/* Toolbar content bold */
.dx-toolbar-item-content {
  font-weight: bold !important;
}
/* Center notify messages */
.dx-overlay-content.dx-toast-info.dx-toast-content.dx-resizable {
  justify-content: center !important;
}
.dx-overlay-content.dx-toast-warning.dx-toast-content.dx-resizable {
  justify-content: center !important;
}
.dx-overlay-content.dx-toast-error.dx-toast-content.dx-resizable {
  justify-content: center !important;
}
.dx-overlay-content.dx-toast-success.dx-toast-content.dx-resizable {
  justify-content: center !important;
}
/* Form editors vertical spacing */
.dx-layout-manager .dx-field-item {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}
/* Hide unused options on dashboard menus */
.dx-dashboard-form-new-content {
  display: none !important;
}
/*change bg tooltip info map*/
.gm-style .gm-style-iw-t::after {
  background-color: var(--bg-color) !important;
}
.gm-style .gm-style-iw-c {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  top: 0;
  left: 0;
  transform: translate3d(-50%, -100%, 0);
  background-color: var(--bg-color) !important;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.3);
}
/*theme plot*/
.color-theme {
  background-color: var(--bg-color);
}
/*IPR*/
.color-text {
  color: var(--text-color) !important;
}
table.theme_plot {
  background-color: var(--bg-color);
}
/*ESP*/
.TR-B div {
  background-color: var(--bg-color) !important;
}
/*plot*/
.highcharts-background {
  fill: var(--bg-color) !important;
}
.highcharts-legend-item text {
  fill: var(--text-color) !important;
  transition: fill 250ms;
}
.highcharts-title {
  fill: var(--text-color) !important;
}
.highcharts-axis-title tspan {
  fill: var(--text-color) !important;
}
.highcharts-axis-labels text {
  fill: var(--text-color) !important;
}
/*control div left*/
.color-control-left {
  background-color: var(--bg-color);
  color: var(--text-color);
}
/*bg modals dashboard menu*/
.dx-dashboard-settings-form .dx-dashboard-settings-form-content {
  background-color: var(--bg-color) !important;
}
.dx-dashboard-form-row-caption {
  color: var(--text-color) !important;
}
.dx-dashboard-form-open.dx-list {
  background: var(--bg-color) !important;
}
.dx-dashboard-form-open.dx-list .dx-item .dx-list-item {
  color: var(--text-color) !important;
}
.dx-dashboard-widget-container .dx-dashboard-confirm .dx-popup-content {
  color: var(--text-color) !important;
}
/* hide item day into roller datebox */
.dx-dateviewroller-day {
  display: none !important;
}
/*state filter*/
.filed-state-on {
  border: 1.5px solid black;
  background: #2c8109;
  color: rgb(237 230 230 / 87%);
  width: 30px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.filed-state-off {
 border: 1.5px solid black;
  background: #f53333;
  color: rgb(237 230 230 / 87%);
  width: 30px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.filed-state-alert {
border: 1.5px solid black;
  background: #ef740b;
  color: rgb(237 230 230 / 87%);
  width: 30px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.filed-state-link-error {
border: 1.5px solid black;
  background: #7e01a7;
  color: rgb(237 230 230 / 87%);
  width: 30px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.filed-state-link-halted {
  border: 1.5px solid black;
  background: #2480f1;
  color: rgb(237 230 230 / 87%);
  width: 30px;
  border-radius: 6px;
  text-align: center;
  font-weight: bold;
  font-size: 13px;
}
.dx-header-stats-as-text-color {
  color: #f2ea12 !important;
}
.input-border{
  border:3px solid !important ;
}
.content-buttons-form{
  width: 50% !important;
}
.forms-config-ramp div.dx-field-item-help-text {
  position: relative;
  margin-left: 38px !important;
  margin-top: -29px;
}
.forms-config-ramp {
  scrollbar-width: thin;  /* Para Firefox */
  scrollbar-color: #888 #f1f1f1; /* Color del scroll y del fondo */
}

.forms-config-ramp::-webkit-scrollbar {
  width: 8px; /* Ancho del scroll */
}

.forms-config-ramp::-webkit-scrollbar-track {
  background: #f1f1f1;  /* Fondo del track del scroll */
}

.forms-config-ramp::-webkit-scrollbar-thumb {
  background-color: #888;    /* Color del scroll */
  border-radius: 10px;       /* Redondea el borde del scroll */
  border: 2px solid #f1f1f1; /* Añade un borde alrededor del scroll */
}

.forms-config-ramp::-webkit-scrollbar-thumb:hover {
  background: #555;  /* Color del scroll cuando se pasa el mouse por encima */
}

.div-ramp-control {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.container-control {
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  flex-wrap: wrap !important;
  background-color:#80808029 !important;


}

.control-chart {
  flex: 1 1 45% !important; /* Los divs se ajustan al 45% del ancho */
  min-width: 400px !important; /* Tamaño mínimo antes de que se apilen */
  max-width: 900px !important;
  margin: 8px !important;
  box-sizing: border-box !important; /* Incluye padding y borde en el cálculo del ancho */

  display: flex !important; /* Para aplicar flexbox dentro del div */
  justify-content: center !important; /* Centra el contenido horizontalmente */
  align-items: center !important; /* Centra el contenido verticalmente */
} 
.control-form {
  flex: 1 1 45% !important; /* Los divs se ajustan al 45% del ancho */
  min-width: 500px !important; /* Tamaño mínimo antes de que se apilen */
  margin: 8px !important;
  box-sizing: border-box !important; /* Incluye padding y borde en el cálculo del ancho */
}

/* Responsivo: ajusta los divs en pantallas pequeñas */
@media (max-width: 768px) {
  .control-chart, 
  .control-form {
      flex: 1 1 100% !important; /* Los divs ocupan el 100% cuando la pantalla es pequeña */
  }
}
.grid-item-user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.item-content-user {
  padding: 5px;
  border-radius: 4px;
  text-align: left;
  background-color: #f9f9f9;
  border: 1px solid #fff;
  width: 100%;
}
.info-div {
  overflow-y: scroll;
  height: 150px;
}

.content-info {
  display: inline-flex;
  flex-direction: column;
  pointer-events: none !important;
 
}
.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
  height: 20px !important;
  overflow: visible;
}
.dx-popup-title.dx-toolbar .dx-toolbar-label
{
    font-size: 13px !important;
    font-weight: 400 !important;
}
.dx-toolbar-label > div {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 7px -6px !important;
    padding: 0 5px !important;
}
.dx-popover-wrapper .dx-popup-content {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
/*** FIN CUSTOM WM ***/
/* PLOT LABELING */