/***********************************************************************
                      GRIDS CSS
***************************************************************************/

/* Grid-container principal  */

  /* -->  |   25%   |           AUTO             |

/*--------------------------------------*/

  .grid-container {
      /*display: grid;*/
       background: white;
      margin-top: 100px;
      grid-template-columns: 20% auto;
      grid-gap: 10px;
    /*padding: 10px;*/
  }
  .grid-container > div {
      background-color: white;
     /* margin-left: 15%;*/
  }
.titulo{
text-align: center;

background-color: aliceblue;

border-radius: 20px;
}
.grid-1 {
 display: grid;
 background: white;
    padding: 15px;
 grid-row-gap: 100px;
 grid-template-areas:    "header header header"
                         "sidebar main main"                                   
                         "footer footer footer";
}

/*--------------------------------------*/

/*--------------------------------------*/
/* Divide en filas el contenido, separando en cuadros las categorias de los formularios*/

  .grid-2 {
  display: grid;
      grid-row-gap: 20px;
  background-color: white;


  
      margin-top: 5%;



  }
  /* Items*/
  .grid-2>div {
     /* background-color:   #e9e9e9;*/
   
   padding: 20px;
     border-radius: 20px;border: solid #f7f7f9;margin-left: 0;margin-right: 0;padding: 2.5rem;
      margin-left: 15%; width: 75%;
  }
  .grid-3 {
      display: grid;
      grid-gap: 50px;
      background-color: white;
      padding: 50px;
  }
  /* Items*/
  .grid-3>div {
      padding:20px 0;

  }

  .item-grid-3-border{ /*Define el margen entre el texto y el contenedor de informacion*/
      padding: 50px;
      margin-top: 0px;
  }
/*--------------------------------------*/

/*--------------------------------------*/
/*grid para definir columnas*/
.grid-columns {
  display: grid;
  grid-row-gap: 20px;
  grid-column-gap: 0px;
  grid-template-columns: auto auto auto;
  }

.item-span-two{
    grid-column: span 2;
}

.item-span-three{
    grid-column: span 3;
}
/*--------------------------------------*/

  /*--------------------------------------*/
  /*grid para definir filas*/
  .grid-rows {
      display: grid;
      grid-row-gap: 10px;
  }

  .item-span-two-row{
      grid-row: span 2;
  }

  .item-span-three-row{
      grid-row: span 3;
  }
  /*--------------------------------------*/

  /***********************************************************************
                      Estilos de los forms
***************************************************************************/

  /* Estilos para los grids de columnas de 3*/
.form-area {
  width  : 280px;
}

.form-area-number {
    width  : 280px;
    height: 35px;
  }

.form-area-two {
    width  : 100%;
  }

  .form-area-three {
    width  : 100%;
  }

  /* Estilos para los grids filas*/
  .form-area-row {
      width  : 550px;
  }

  .form-area-number-row {
      width  : 100%;
      height: 40px;
  }

  /******************************************************************

                  SELECT / COMBOBOX


************************************************************* */
  .select {
      border: 1px solid #ccc;
      overflow: hidden;
      width: 550px;
      background: #fff url("http://www.csslab.cl/ejemplos/select/arrowdown.gif") no-repeat 98% center;
  }
  .select select {
      border: none;
      width: 550px;
      box-shadow: none;
      background-color: transparent;
      background-image: none;
      /*-webkit-appearance: none;*/
	-webkit-appearance: text !important;
      -moz-appearance: none;
      appearance: none;
  }

  .select-area {
      border: 1px solid #ccc;
      overflow: hidden;
      width: 280px;
      background: #fff url("http://www.csslab.cl/ejemplos/select/arrowdown.gif") no-repeat 98% center;
  }
  .select-area select {
      border: none;
      width: 280px;
      box-shadow: none;
      background-color: transparent;
      background-image: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }

  .select-area-two {
      border: 1px solid #ccc;
      overflow: hidden;
      width: 100%;
      background: #fff url("http://www.csslab.cl/ejemplos/select/arrowdown.gif") no-repeat 98% center;
  }
  .select-area-two select {
      border: none;
      width: 600px;
      box-shadow: none;
      background-color: transparent;
      background-image: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }

  .select-area-three {
      border: 1px solid #ccc;
      overflow: hidden;
      width: 900px;
      background: #fff url("http://www.csslab.cl/ejemplos/select/arrowdown.gif") no-repeat 98% center;
  }
  .select-area-three select {
      border: none;
      width: 900px;
      box-shadow: none;
      background-color: transparent;
      background-image: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  }


  /***********************************************************************
                              Mensajes
***************************************************************************/
  .required{
      color: #fd9927;
      font-weight: bold;
  }

  .error{
      color: red;
  }

  .estiloError {
    color: red;
    animation: estiloError 7s linear forwards;
      -webkit-animation: estiloError 7s linear forwards;      
  }
  
  @keyframes estiloError {
    0% { opacity: 0; }
    2% { opacity: 1; }
    98% { opacity: 1; }
    100% { opacity: 0; }
  }
  
    @-webkit-keyframes estiloError {
  
    0% { opacity: 0; }
    2% { opacity: 1; }
    98% { opacity: 1; }
    100% { opacity: 0; }
  
  }

  /***********************************************************************

                            Botones

  *********************************************************************** */

  .button-just{
      background: white;
      color:  #43a952;
      font-weight: bold;
      width  : 280px;
      height: 60px;
  }

  .button-comp{
      background: #43a952;
      color:  white;
      font-weight: bold;
      width  : 280px;
      height: 60px;
  }

  .button-search{
      margin-top: 0px;
      background: dodgerblue;
      color:  white;
      font-weight: bold;
      width  : 180px;
      height: 35px;
  }

  .accordion {
      background-color: #b6e1e0;
      color: #444;
      cursor: pointer;
      cursor: pointer;
      border: 0;
      padding: 18px;
      outline:none;
      text-align: left;
      font-size: 15px;
      height: 150px;
      weight: 250px;
  }

  .input-file{
      border: darkgray;
      background-color: #b6e1e0;
      weight: 250px;
  }


  .search {
      font-family:Verdana,Helvetica;
      font-size:12pt;
      width: 500px;
      color:#696969;
      padding: 5px 7px 5px 7px;
      border:1px solid darkgray;
      background:#FFF;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 15px;
  }

  .button-edit{
      background:#F39C12 ;
      width: 120px;
      margin-left: 0px;
      height: 50px;
  }

  .button-deshabilitar-edit{
      background: #3498DB ;
      margin-left: 0px;
      width: 280px;
      height: 50px;
  }

  .button-delete{
      background-color: #e6413e;
      width: 130px;
      margin-left: 0px;
      height: 50px;

  }


  /************************************************************************

                        Alineaciones

  ********************************************************************** */

  .right{
      text-align: right;
      background-color: white;
      margin-right: 80px;
  }


  /******************************************************************

                        type = "number"

  **************************************************************** */

  /* For Firefox */
  input[type='number'] {
      -moz-appearance:textfield;
  }
  /* Webkit browsers like Safari and Chrome */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }


  /******************************************************************

                  MENU


************************************************************* */

  * {
      margin: 0;
      padding: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }

  body {
      font-family: 'Roboto', sans-serif;
      line-height: 18px;
  }

  a {
      text-decoration: none;
      color:#fff;
  }

  .btn-menu {
      display: none;
      padding: 20px;
      background: #0d2c44;
      color:#fff;
  }

  .btn-menu .icono {
      float: right;
  }

  .contenedor-menu {
      width: 20%;
      min-width: 100%;
      display: inline-block;
      font-family: 'Roboto', sans-serif;
      line-height: 18px;
  }

  .contenedor-menu .menu {
      width: 100%;
  }

  .contenedor-menu ul {
      list-style: none;
  }

  .contenedor-menu .menu li a {
      color:#494949;
      display: block;
      padding: 15px 20px;
      background: #e9e9e9;
  }

  .contenedor-menu .menu li a:hover {
      background: #1a95d5;
      color:#fff;
  }

  .contenedor-menu .menu .icono {
      font-size: 12px;
      line-height: 18px;
  }

  .contenedor-menu .menu .icono.izquierda {
      float: left;
      margin-right: 10px;
  }

  .contenedor-menu .menu .icono.derecha {
      float: right;
      margin-left: 10px;
  }

  .contenedor-menu .menu ul {
      display: none;
  }

  .contenedor-menu .menu ul li a {
      background: #424242;
      color:#e9e9e9;
  }

  .contenedor-menu .menu .activado > a {
      background: #1a95d5;
      color:#fff;
  }

  @media screen and (max-width: 450px) {
      body {
          padding-top: 80px;
      }

      .contenedor-menu {
          margin: 0;
          width: 100%;
          position: fixed;
          top:0;
          z-index: 1000;
      }

      .btn-menu {
          display: block;
      }

      .contenedor-menu .menu {
          display: none;
      }
  }
  /***********************************************

                        ACORDEON

  ***********************************************/
  .accordion {
      background-color: #AED6F1  ;
      color: #444;
      height: 20%;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
  }

  .active, .accordion:hover {
      background-color: #ccc;
  }

  .panel {
      padding: 0 18px;
      display: none;
      overflow: hidden;
  }