/*
  @author Eric Permuy

*/

/***** CONTAINER PRINCIPAL */
.basic-graph__container {
    margin-top: 1rem;
    margin-right: 1rem;
    padding-right: 1rem;
    /* background-color: white; */
    /* grid */
    display:grid;
    grid-template-columns: 35% auto;
    grid-column-gap: 1rem;
 }

/* ************************************************************************************* */
 /**** Parte de la gráfica  */
   .basic-graph__graph-container {
     /* aspecto */
      padding: .5rem;
      background-color: white;
    /* border */
      border-radius: .5rem;

   }
   /* **************************************************** */
  /* zona de botones de descargas, carga... */
      .basic-graph__graph-files {
         /* despigue */
          display: flex;
          /* aspecto */
          justify-content: flex-end;
          padding-right: .5rem;
          /* fuente */
           color: #91caed;
          /* background-image: linear-gradient(to bottom, white, #73ddff); */
      }
      .basic-graph__graph-files * {
           margin-left: 1rem;
      }
      .basic-graph__graph-files i:hover {
           cursor: pointer;
      }
         /* especificaciones */
           .download_timevalueserie_button {
              color: #91caed;
           }
           .upload_timevalueserie_button {
              color: #77dd77;
           }
           .delete_timevalueserie_button{
              color: #c93c20;
           }
     /* **************************************************** */
    /* div para la gráfica 
      .basic-graph__graph{

      }*/

/* ************************************************************************************* */
 /**** Parte de la filterbox. */
  .basic-graph__filter-box-container {
      padding: 1rem;
      width: 100%;
  }
   /* titulo de la filterbox */
    .basic-graph__filter-box_title {
      /* aspecto */
      height: 1.4rem;
      margin-bottom: .8rem;
      /* borde */
      /* border-bottom: solid thin #1097e8; */
      /* fuente */
      text-align: center;
      color: #91caed;
      font-size: .6rem;
    }
   /* Contenedor campo */
    .basic-graph__filter-box__field-container {
           width: 100%;
           margin-bottom: 1rem;
          /* Subred */
           display: grid;
           grid-template-columns: 30% 50%;
    }
      /* LABEL */
       .basic-graph__filter-box__field-label {
            color: #4995c4;
       }
      /* input div 
       .basic-graph__filter-box__input-div{

       }
       */

/* ******************************************************************************************************************************* */
/* ******************************************************************************************************************************* */
/* ZONA DE GRÁFICO OCUPANDO TODO EL ESPACIO HORIZONTAL */
/* Container principal */
 .horiz_graph__container {
   /* aspecto */
    padding-top: 1%;
   /* subred */
    display: grid;
    grid-template-areas: "hor_graph_filterbox"
                         "hor_graph_graph__container";
 }
 /* Zona de filtrado */
    .hor_graph_filterbox  {
      /* aspecto */
       padding-right: 1.2%;
      /* grid item */
        grid-area: "hor_graph_filterbox";
    }
    .hor_graph_filterbox  form {
      /* fuente */
         font-size: .8rem;
      /* aspecto */
         padding: .5%;
         padding-bottom: 0;
      /* subgrid */
          display: grid;
          grid-template-areas: "hor_graph_filterbox_items hor_graph_filterbox_button";
          grid-template-columns: 1fr minmax(2rem, 6rem);
    }
     /* Zona filtros  */
      .hor_graph_filterbox_items {
        /* grid item */
          grid-area: "hor_graph_filterbox_items";
        /* Subred */
          display: flex;
      }
           .hor_graph_filterbox_item {
                width: 30%;
           }
     /* zona boton lanzamiento busqueda */
     .hor_graph_filterbox_button {
       /* grid item */
         grid-area: "hor_graph_filterbox_button";
     }

/* Zona de gráfico  */
    .hor_graph_graph__container {
      /* aspecto */
        margin-right: 1.2% !important;

      /* grid items */
        grid-area: "hor_graph_graph__container";
    }

/*  INPUTS PARA FILTERBOX DE GRÁFICO HORIZONTTAL. */
  .hor_graph_filterbox_item {
     /* subred */
       display: grid;
  }
     .hor_graph_filterbox_item__label {
       /* fuente */
        color: #25a9fa;
        font-weight: bold;
     }
     .hor_graph_filterbox_datetime__input{

       justify-self: center;
     }

/*  Casos especiales */
  /* Periodo  */
     .hor_graph_filterbox_period {
        /* aspecto  */
          padding-left: .5rem;
     }
  /* Datetime */
     .hor_graph_filterbox_datetime{
       /* subred */
         display: grid;
         grid-template-columns: 3rem 1rem;
     }

       .hor_graph_filterbox_datetime__label{
         /* specto  */

           margin-right: .7rem;
         /* fuente */
           color: #79b0d1;
           font-size: .7rem;
           font-weight: bolder;
        /* item */
           align-self: center;
       }
      .hor_graph_filterbox_datetime__inputcointainer
       {
            display: flex;
       }
           .hor_graph_filterbox_datetime input{
             padding: .2rem;
             width: minmax(4rem, auto);
           /*Borde*/
             border: solid thin #b2c6d4;;
             border-radius: .2rem;
           /*Fuente*/
              color: rgb(36, 143, 237);
              font-size: .8rem;
           }

          .hor_graph_filterbox_datetime input:hover {
             background-color: #cbdff2;
             cursor:text;
           }