:root {
  --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: #757575;
  /*470D21*/
  --letra-colorside: #ddd;

  --cafe-claro: #EEEBDD;
  /* COLORES PARA LA REVOCACIÓN DE MANDATO */
  --revocacion-background-jornada: #F5F7FA;
  --revocacion-background-computo: #F0DCDC;
  --revocacion-primary1: #8B015B;
  --revocacion-primary2: #B00082;
  --revocacion-primary3: #B3B3B3;
  --revocacion-dark: #000000;
  --revocacion-white: #FFFFFF;
  --revocacion-background-header: #FCFCFC;
  --revocacion-text-header: #667085;
  --revocacion-background-header2: #A72D54;
  --revocacion-header-border: #EAECF0;
  --revocacion-avance-completo-background: #ECFDF3;
  --revocacion-avance-completo-text: #037847;
  --revocacion-avance-completo-bottom: #14BA6D;
  --revocacion-avance-parcial-background: #E57009;
  --revocacion-avance-parcial-text: #FFFFFF;
  --revocacion-avance-parcial-bottom: #EAECF0;
  --revocacion-avance-nulo-background: #F2F4F7;
  --revocacion-avance-nulo-text: #6C778B;
  --revocacion-avance-nulo-bottom: #364254;
}

* {
  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%;


}



.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(--revocacion-background-jornada);
  /*background-color: #D5137F;*/
  color: var(--text-color);
  overflow-y: auto;
  grid-gap: 21px 82%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  /* position: relative;*/

}

.side-tempicon {
  display: none;
}


.main {
  grid-area: main;
  /* background-color: var(--navbar-shadowmenu-color); */
  /*
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='250px' width='200px'><text transform='translate(50, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20'>SIMULACRO</text></svg>");
	*/
  /*************/
  /*width: 70%;
    height: 100%;
    background-color: #ccc;
    transition: 1s ease;*/
  /***********/
}

/* REVOCACION PREGUNTA */
.pregunta-revocacion {
  border: 1px solid var(--revocacion-dark);
  display: flex;
  flex-flow: wrap column;
  gap: 1em;
  margin-top: 2em;
  margin-bottom: 2em;
  margin-left: 15px;
  margin-right: 15px;
  background-color: var(--theme-color);
}

.pregunta-revocacion-title {
  padding-bottom: 0.5em;
  padding-top: 0.5em;
}

.background-pregunta {
  background-color: var(--revocacion-primary2);
  color: var(--revocacion-white);
  padding: 1em;
}

/** HEADER REVOCACION TITLE **/
.header-title {
  display: flex;
  gap: 0.2em;
  align-items: center;
  padding: 1em;
  margin-top: 2em;
  margin-bottom: 2em;
}

.header-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 30px;
  background-color: var(--revocacion-primary2);
}

/* BACKGROUND PARTICIPACION CIUDADANA */
.participacion-ciudadana {
  background-color: var(--theme-color);
  display: flex;
  flex-flow: wrap column;
  align-items: self-start;
  margin: 15px;
  border-radius: 10px;
}

/* OPCIONES PREGUNTA REVOCACION */
.preguntas-revocacion {
  display: flex;
  flex-flow: wrap column;
  align-items: flex-start;
  gap: 1em;
  padding: 2em;
}

.preguntas-revocacion-questions {
  font-size: 0.8em;
  display: flex;
  flex-flow: wrap column;
  gap: 1em;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.preguntas-revocacion-questions .circle-question {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  display: inline-block;
}

.preguntas-revocacion-questions:nth-last-of-type(1) .circle-question {
  background-color: var(--revocacion-primary3);
}

.preguntas-revocacion-questions:nth-last-of-type(2) .circle-question {
  background-color: var(--revocacion-primary1);
}

.preguntas-revocacion-questions:nth-last-of-type(3) .circle-question {
  background-color: var(--revocacion-primary2);
}

/* PARTICIPACION CIUDADANA LISTA NOMINAL */
.participacion-ciudadana-lista-nominal {
  text-align: end;
  padding: 1em;
  width: 100%;
  padding-right: 3em;
}

.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: 70px;
    padding-right: 70px;

  }

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

  }


  .preguntas-revocacion-questions {
    flex-flow: nowrap row;
    justify-content: flex-start;
  }

}