:root {
  /*
    --theme-color:white;
    --primary-color:#D5137F;
    --secundary-color:#610B21;
    --text-color-inverse:white;
    --text-color:rgb(29, 28, 28);
    --navbar-shallow-color:rgb(122, 111, 111);
    --navbar-shadowmenu-color:#f8f9fa;
    --menu-mobile-background-color:#610B38;

    --profile-suave-color:#F2F2F2;
    --profile-border-color:#E6E6E6;

    --fondo-azul-color: #2d2d4b;
    --letra-colorside: #ddd;

     --cafe-claro:#EEEBDD;*/

  --theme-color: white;
  --primary-color: #9C0F48;
  --secundary-color: #610B21;
  --text-color-inverse: white;
  --text-color: rgb(29, 28, 28);
  --navbar-shallow-color: rgb(122, 111, 111);
  --navbar-shadowmenu-color: #f8f9fa;
  --menu-mobile-background-color: #610B38;

  --profile-suave-color: #F2F2F2;
  --profile-border-color: #E6E6E6;

  --fondo-azul-color: #470D21;
  --letra-colorside: #ddd;

  --cafe-claro: #EEEBDD;
  --primary-verde: #757363;
  --primary-cafe: #CA9E96;
}

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

html {
  height: 100%;
}

body {
  font-family: "Public Sans", sans-serif;
  font-size: 1.2rem;
  min-height: 100%;
}

.title-row th {
  position: sticky;
  top: 0px;
  background-color: black;
  z-index: 1;
  color: white;
  font-size: 12px;
}

.graldiv_3 tr:nth-child(odd) {
  /*  background-color: black; */
  /* color: white; */
}

.graldiv_3 tr:nth-child(even) {
  background-color: #EEEEEE;
  /*    color: white; */
}

.estiloBtnDip {
  display: flex;
}

.estiloBtnDip>button:hover {
  background-color: var(--primary-cafe);
  color: white;
}

.estiloBtnDip>button {
  /*   width: 240px;
     */
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 5%;
  padding: 8px 28px;
  border-radius: 20px;
  line-height: 24px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  border: none;
 
}

.btnActive {
  background-color: var(--primary-color);
  color: white;
}

.letraBlanca {
  color: white;
}

.fondoVerde {
  background-color: var(--primary-verde);
}

.fondoCafe {
  background-color: var(--primary-cafe);
}

.btnsinestilosa {
  text-decoration: none;
  text-align: center;
}

.grid-container>* {
  /* box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);*/
  /*border-radius: 4px;*/
  padding: 10px;
  text-align: center;
}

.header {
  grid-area: header;
  /*background-color: #85aedd;*/

}

.navbar {
  grid-area: navbar;
  /*background-color: #afd6af;*/
}

.sidebar {
  grid-area: sidebar;
  /*  background-color: var(--fondo-azul-color); */
  /*background-color: #D5137F;*/
  color: var(--letra-colorside);
  overflow-y: auto;
  grid-gap: 21px 82%;

  /* position: relative;*/

}

.side-tempicon {
  display: none;
}


.main {
  grid-area: main;
  background-color: var(--navbar-shadowmenu-color);

  /*************/
  /*width: 70%;
    height: 100%;
    background-color: #ccc;
    transition: 1s ease;*/
  /***********/
}



.footer {
  grid-area: footer;
  /* background-color: var(--fondo-azul-color); */
  color: var(--text-color-inverse);



}


.footer-text {
  font-size: 12px;
  max-width: 900px;
  margin: 0 auto;
  /* top-bottom izq-der */


}

/*******/
.horizontal-padding {
  padding-left: 25px;
  padding-right: 25px;

}

.vertical-padding {
  padding-top: 25px;
  padding-right: 25px;
}

/*******/

.grid-container {
  display: grid;
  /*gap: 10px;*/
  gap: 0px;
  grid-template:
    "header" 0px
    "navbar" 50px
    "sidebar" 100px
    "main" auto "footer" 80px;
}


.elmenu {
  display: none;
}


@media (min-width: 600px) {
  .grid-container {
    /* grid-template-columns: 200px auto;
      grid-template-rows: 100px 50px auto 100px;
      grid-template-areas: 
      "header  header"
      "navbar  navbar"
      "sidebar main"
      "footer  footer"; */

    grid-template:
      "header  header" 0px
      "navbar  navbar" 50px
      "sidebar main" auto
      "footer  footer" 80px /
      20% auto;
  }

  .horizontal-padding {
    padding-left: 70;
    padding-right: 70;

  }

  .vertical-padding {
    padding-top: 70;
    padding-right: 70;

  }


  .side_chec {
    display: none;
  }


}

@media (min-width: 900px) {

  .grid-container {
    grid-template:
      "header  header" 100px
      "navbar  navbar" 50px
      "sidebar main" auto
      "sidebar  footer" 80px /
      20% auto;

  }


  /*************************/
  .elmenu {
    display: block;
  }

  .gridContrae {
    grid-template:
      "header  header" 100px
      "navbar  navbar" 50px
      "sidebar main" auto
      "sidebar  footer" 80px /
      90px auto;

    transition: 0.2s;
  }

  .sidebar-contenido-quita {
    /*display: block;*/
    /* max-width: 90%;*/
    /* background-color: green;*/
    display: none;
  }




  .side-tempicon-pone {
    display: block;
  }

  .rotate {
    transform: rotate(180deg);
    transition: .5s;

  }

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


  .navbar {
    display: flex;
    justify-content: space-between;

  }



  .horizontal-padding {
    padding-left: 70;
    padding-right: 70;

  }

  .vertical-padding {
    padding-top: 70;
    padding-right: 70;

  }




}