body {

  text-align: -webkit-center;
  color: #dddddd;
  overflow-y: scroll;

}

div.numero{
font-size: 11px;
position: relative;
top: -8px;
left: -13px;
/* background-color: red; */
display: table-header-group;
width: 27px;
display: block;}


a.link_graph {
    /* Estilos para el enlace */
    text-decoration: none; /* Elimina la subrayado predeterminado del enlace */
   

    /* Otros estilos que desees aplicar al enlace */
  
    /* Fondo de imagen para el enlace */
/*     background-image: url('https://lookerstudio.vip/wp-content/uploads/2022/03/Google-Analytics-e1647294207497.png'); 
    background-size: 23px 23px; 
    background-repeat: no-repeat; 
    padding-left: 30px;  */
    cursor: pointer;
  }


  a.link_pending {
   
    text-decoration: none; /* Elimina la subrayado predeterminado del enlace */

    cursor: not-allowed;
  }


  a.link_title {
    /* Estilos para el enlace */
    text-decoration: none; /* Elimina la subrayado predeterminado del enlace */

    top: 2px;
    left:8px;
    position: relative;
    background-image: url('../img/link_alt_icon.png'); /* Reemplaza 'URL_DE_TU_IMAGEN' con la URL de tu imagen */
    background-size: 16px 16px; /* Tamaño de la imagen de fondo */
    background-repeat: no-repeat; /* Evita la repetición de la imagen de fondo */
    padding-left: 16px; /* Espacio a la izquierda de la imagen */
    
  }

  path {
    stroke: #ffffff !important;
  }

  #cuadroElegir{
    position: fixed;
    background-color: white;
    z-index: 999;
    width: auto;
    min-width: 200px;
    max-width: 300px; 
    top:20%;
    left:  calc(50% - 200px);
    color:#575757;
  }

  div.col-header {
    position: relative;
    /* Establece un valor de altura y ancho para el div */
    

}


input[aria-controls="example"] {
  width: 250px;
}



    select[multiple] {
    background-color: #f2f2f2; /* Cambia el color de fondo */
    color: #333; /* Cambia el color de texto */
    border: 1px solid #ccc; /* Cambia el borde */
    margin: 10px; /* Cambia los márgenes */
    font-size: 16px; /* Cambia el tamaño de fuente */
    line-height: 1.5; /* Cambia el espaciado entre opciones */
    cursor: pointer; /* Cambia el estilo del cursor */
    border-color: #007bff; /* Cambia el color del borde al enfocar */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Cambia el sombreado al enfocar */
    width: 150px;
    text-align: center;
}

select {
    overflow-y: auto;
}


div.message {
  font-weight: 500!important;
  
  font-size: var(--messages-text-size);
  padding: 7px  12px 7px 12px;
  max-width: 100%;
  color: var(--primary-text-color);
  line-height: var(--line-height);
  word-break: break-word;
  white-space: pre-wrap;
  position: relative;
  font-family: "Roboto",-apple-system,apple color emoji,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

div.bubble {
  margin-bottom: -10px;
 
  position: relative;
  z-index: 1;
  /* margin: 10px auto -10px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  box-shadow: 3px 1px 6px rgba(0, 0, 0, 0.5);
    background-color: var(--bubble-bg);
    width: max-content;
    border-radius: 12px 12px 12px 0px;
}



tbody .child  {
  
  padding: 10px 10px 10px 10px;

    display: grid;

    flex-direction: column;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    /* background-image: url('../img/money-bg.svg');  */
    background-size: 10%;  
    background-repeat:repeat; /* Evita la repetición de la imagen de fondo */
    background-color: rgba(82, 82, 82, 0.2);
    background-color: rgb(12 103 236);
   
}



 .bubble-tail {
  position: relative;
  width: 10px;
  height: 10px;
   z-index: 1; 
  display: block;
  fill: var(--bubble-bg);
  background-color: transparent;
  transform: translate(-10px,0px);
}

div.message_date {

  text-align-last: right;
  font-size: 13px;
  color: var(--secondary-text-color);
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
}

div.message_title {

  padding-bottom: 0px;
}

/* Variables */
 :root {
  --messages-text-size: 14px;
--primary-text-color: #cdcdcd;
--line-height: 22px;
--message-background-color:red;
--secondary-text-color: #aaaaaa;
--message-time-color: var(--secondary-text-color);
--bs-body-font-size: 14px;
--bs-body-line-height: 1.5;
--bs-body-bg: rgb(40, 40, 40);
--table-content-bg:rgb(6 41 84);
--bubble-bg: #10195d;
--row-focused: #0b5bbd;

}

:root {
  --dt-row-selected: 13, 110, 253;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 9, 10, 11;
  --dt-row-stripe: 0, 0, 0;
  --dt-row-hover: 0, 0, 0;
  --dt-column-ordering: 0, 0, 0;
  --dt-html-background: white
}

:root.dark {
  --dt-html-background: rgba(255, 255, 255, 0.2)
}

.openDialog > button {
  padding: 0.25rem 0.5rem; /* Ajusta estos valores según tus preferencias */
  font-size: 0.875rem; /* Ajusta el tamaño de fuente según tus preferencias */
}

tr:hover {
  cursor: default;
  user-select: none;
}

th:hover {
  cursor: default;
  user-select: none;
  background-color: rgb(34, 34, 34);
}

.bar_porcent {


 
  transition: width 1s; /* Animación de transición del ancho */
  background: linear-gradient(to right, #054609, #258b25);
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
  /* transform: translate(-23px, 0px); */
}

.bar_porcent.green {
  background: linear-gradient(to right, #054609, #258b25);
  
}

.bar_porcent.red {
  background: hsl(120, 100%, 50%);

}
.content_porcent {
    display: flex;
    white-space: nowrap;
    /* justify-content: center; */
    /* justify-content: space-between;
    margin-right: 10px; */
  
}

.data_porcent {
  flex: auto;
  margin-left: 6px;
}


.display.dataTable tfoot td {
  background-color : #001351;
padding-left:11px;
color:white;
  }


  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-grafica {
    background-color: #fff;
    padding: 0px;
    width: 90%;
    max-width: 100%;
    position: relative;
    margin: 10% auto;
    border-radius: 5px;
}

.cerrar {
    position: absolute;
    top: 4px;
    right: 4px;
    cursor: pointer;
  width: 20px;
  height:20px;
}

.cerrar:hover {

  background-color: #e4f2ff;
}

.bokeh{
  height: 500px; 
  padding: 30px 0px 10px 10px;
  width:100%;
}

.bk-Toolbar{
  margin-top:10px;
  background-color: red;
}



input.date-style{
                 
  min-width: 125px;
  max-width: 155px;
  text-align: center;

  background-color: transparent;
  border: 2px solid #6c757d;
  color: #6c757d;

 
}



input.date-style:focus{
  background-color: transparent;
  border: 2px solid #6c757d;
  color: #6c757d;
 
 
}

input[type="date"]::-webkit-calendar-picker-indicator {

  border-radius: 15px;
  position:absolute;
  fill:black;
  background: #c2daff;
  opacity: 1;
  width:9px;
  height:9px;
  left:120px;
  top:9px;
  
  color: black;

cursor: pointer;
}

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  flex-direction: row-reverse;
  justify-content: center;
}




#table_content {
  margin-left: 15px;
  margin-right: 25px;
  padding: 20px;
  background-color: var(--table-content-bg);
  box-shadow: 12px 10px 9px 0px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to bottom, #212529, var(--table-content-bg)300px);
  padding-top: 26px;
    padding-left: 33px;
    min-width: 900px;
    max-width: 1500px;
}

#logo{
  margin-bottom: 15px;
  width:270px;
}


div#filter_info {
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: 15pt;
  left: 63px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  background-color: #23579c;
  height: 34px;
  border-radius: 15px;
  padding-left: 18px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  top: 49px;
  border: 2px solid #2ec5ba;
  margin-right: 242px;
}


.info-icon >img {

  width: 18px;
  height:18px; 
  margin-top: -2px;
}

.view  {
color: gainsboro; 
/* #8d8d8d; */
margin-left:10px;
/* color:#a9b9e6; */
cursor: default;

}


.view.v2  {
font-size: 12pt;
cursor: default;

/* color: #9caeff; */
/* #8d8d8d; */
}


.view.v3  {
  font-size: 8pt;
  cursor: default;
  margin-top: 2px;
  /* color: #9caeff; */
  /* #8d8d8d; */
  }

.view.elapsed {
  color: #bbbbbb;
  position: absolute;
  right: 19px;
  font-size: 9pt;
  margin-bottom: 0px;

}
.elapsed  {
font-size: 9pt;

color: #a5a5a5;
/* #8d8d8d; */
}
/* 
.input_info {
  color: #bbbbbb;
  position: absolute;
  right: 50px;
  font-size: 9pt;
  margin-bottom: 0px;
  background-color: #29992e;
  height: 3px;
  border-radius: 15px;
 
  width: 90%;
  top: 246px;
} */

.pivot_title{
 font-size: 12px; 
}

#visual_menu {
  display: block;
  position: fixed;
  top: 50%;
  margin-left: 2px;
  
}

th.stats.cell-style{
 background-color:  #243772;
 font-weight: 500;
}



 /* Estilo del tooltip (inicialmente oculto) */
 .alt_text .altip {
  display: none;
  padding: 8px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  background-color: #1e252d;
  color: white;
  font-size: 13px;
  text-wrap: nowrap;
  border: 1px solid #737373;
  border-radius: 9px;
}

/* Mostrar el tooltip cuando el div es hover */
.alt_text:hover .altip {
  display: block;
  
}


.btn_style {
  margin-top: 5px;
  font-family: sans-serif;
  color: black;
  font-size: 9pt;
  width: 100%;
  height: 18px;
  margin-bottom: 4px;
  display: flex;
  justify-content: center;
  align-content: space-around;
  /* flex-wrap: nowrap; */
  flex-direction: column;
}

.no_wrap{
text-wrap: nowrap;
}




/* styles.css */


.modal-ayuda {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color:#0d6efd40;
  padding: 11px;
  border: 2px solid #ffffff8a;
  width: 50%;
  height: 60%;
  padding-top: 39px;
  min-width: 700px;
  max-width: 900px;
}


.cerrar-ayuda {
  position: absolute;
  top: 0px;
  right: 9px;
  cursor: pointer;
  width: 20px;
  height: 20px;
  font-size: 25px;
  color: white;
}

span.title {
  cursor: help;
}

.info-title {
  position: absolute;
  /* display: contents; */
  color:white;
  top: 7px;
  left: 50%;
  transform: translate(-50%, 0%);
  font-size: 18px;
}

.main_help {
  position: absolute;
  top: 44px;
  right: 5%;
  font-size: 20px;
  color: #a1a3a6;
}