@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins/Poppins-Regular.ttf");
}

#content-body {
  position: relative;
  z-index: 1000;
}

/*para el boton de menu collapsado*/
.logo {
  display: flex;
  align-items: center;
}

.logo img:first-child {
  width: 30px;
}

/*loader page*/
.loader-page {
  background-color: var(--bg-navegacion);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-content: center;
  z-index: 100000;
  color: white;
  font-size: 18px;
  font-family: "Poppins", sans-serif;

}

.loader-page-image {
  width: 230px;
  height: 270px;
}

.section-loading {
  display: flex;
  justify-content: center;
}

.loader-page-span {
  display: block;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: girar 1s linear infinite;
  margin-right: 10px;
}

@keyframes girar {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

:root {
  /* Colores principales */
  --color-rojo-logo: #FF0000;
  --color-blanco: #FFFFFF;
  --color-gris-oscuro: #2B2B2B;

  /* Colores de acento */
  --color-oro: #F7C948;
  --color-azul-oscuro: #003366;
  --color-verde-oliva: #88A23C;

  --bg-header: #7f1511;
  --bg-navegacion: #282a2c;
  --color-link: rgb(195, 194, 194);


}

body,
html {
  background-color: red !important;
  background: #f0f0f0 !important;
  font-family: "Poppins" !important;

}


.body {
  background-color: #ebe9e999;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Montserrat,Open Sans";
  font-family: sans-serif;
  font-family: "Poppins", sans-serif;
  background-color: #efefefb7;
  background-color: #f0f0f0;
}




/*encabezado de pagina*/
.header {
  background-color: var(--bg-header);
  color: white;
  padding: 3px 0;
  /*background-color:#008080;*/
  height: 68px;
}


.header .btn-collapse {
  height: 25px;
}

/*para el nombre de usuario*/
.header .nombre-usuario {
  font-size: 14px;
}

.titulo-header {
  font-weight: bold;
}




/*contenido principal*/
.main {
  /*height: 100vh;*/
}


/*ul de menu de navegacion*/
.lista-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/*imagen de usuario*/
.imagen-usuario {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 0 1px 0px #ccc;
  vertical-align: middle;
}

/*contenedor de la imagen de usuario y su nombre */
.usuario {
  align-items: center;
  align-content: center;
}



.container-navigation {
  height: 100vh;
  /*position: absolute;*/

}

/*menu de navegacion*/
.navigation {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(--color-gris-oscuro);
  color: white;
  font-family: "Montserrat";
  font-family: sans-serif;
  font-family: "Poppins", sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 16.6666%;
}



/*imagen de menu de navegacion*/
.logo-navegacion-minerva {
  width: 70%;
  height: 70%;
}

/*Item de menu de navegacion*/
.link {
  text-decoration: none;
  color: rgb(174, 171, 171);

  /*
    color:rgb(178, 176, 176);
    color:rgb(191, 190, 190);*/

}


.btnCerrarNav {
  /*background-color: #D4A017 ;
    background-color: #CC5500;*/
  justify-content: right;
}

.cerrar {
  cursor: pointer;
  text-align: center;
}

/*SUBMENU PARA MOSTRAR ITEMS */
.submenu {
  padding-left: 30px !important;
}


.tituloNavegacion {
  font-size: 13px;
  font-weight: bold;
}


.submenu span {
  align-content: center;
  align-items: center;
  font-size: 14px;
}

.item-link {
  color: var(--color-link);
  background-color: transparent;
  transition: all ease 0.7s;
}

.item-link:hover {
  cursor: pointer;
  background-color: #505252;
  transition: all ease 0.7s;
}


.hide {
  display: none !important;
}


.menu-informacion {
  align-items: center;
  align-content: center;
}

.formulario {
  font-family: "Poppins", sans-serif;
}


/*niveles*/
.nivel {
  font-size: 14px;
  display: flex;
  justify-content: left;
  align-items: center;
  align-content: center;
}

.nivel span,
.nivel a {
  margin: 3px;
  color: #0e4ac2;
}

kbd {
  background-color: var(--bg-navegacion);
  background: var(--bg-navegacion);
  font-family: "Poppins" !important;
}

.pointer {
  cursor: pointer;
  text-decoration: none;
}



.notificaciones {
  display: flex;
  flex-direction: row !important;
}

/*barra de informacion*/
.item-informacion {
  position: relative;
  margin: 0 10px;
  text-align: right;
}

.informacion {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: red;
  color: white;
  font-size: 8px;
  position: absolute;
  right: -5px;
  top: 0;
  padding: 7px;
  border-radius: 50%;
  width: 1.3em;
  height: 1.3em;
  margin-top: -3px;
  /*box-shadow: 0 0 1px 0 #ccc;
    box-shadow: 0 0 1px 1px #ccc;*/
}



/*contenido principal - tabla resumen*/
.tabla-resumen,
.graficos,
.eventos {
  box-shadow: 0 0 5px 0px #ccc,
    0 0 1px 0px #ccc;
  background-color: white;
  height: 475px;
  border-radius: 2px;
  align-content: start;
}

.tabla-resumen {
  background-color: #f0f0f0
}

.header-resumen {
  display: flex;
  align-items: center;
  align-content: center;
  color: rgb(245, 207, 207);
  color: white;
  background-color: var(--bg-header);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  flex-direction: row;
  justify-content: center;
  overflow-x: auto;
  height: 39px;
  max-height: 40px;
  font-size: 15px;

}

.resumen-item {
  display: flex;
  align-items: center;
  align-items: center;
  margin-right: 15px;
  padding: 3px 0;
  border-bottom: 2px transparent dashed;
}

.resumen-item.excel {
  color: #217346;
}

.resumen-item.pdf {
  color: #D32F2F;
}

.resumen-item span,
.resumen-item kbd {
  margin-left: 4px;
}




/*PARA ELEMENTO ACTIVO DE LA TABLA DE INFORMACION*/
.active {
  border-bottom: #F7C948 2px solid;
}


/*PARA LA SECCION DE INFORMACION GENERAL DE LA SICUES*/
.contenido-informacion {
  /*overflow-y: auto;*/
  /*height: 425px;*/
}


.title-general {
  font-weight: bold;
  margin-top: 10px !important;
}

.item-general {
  border-bottom: 1px solid #ccc;
  padding: 20px;
}

.item-general i {
  font-size: 20px;
  color: #88A23C;
}

.item-general kbd {
  padding-left: 0;
  padding-right: 0;
}



/*para los graficos mensuales*/
.section-graficos {
  justify-content: right;
}


.graficos {
  /*height: 300px;*/
  height: auto;
}

.contenido-grafico {
  justify-content: center;
  align-items: center;
  align-content: center;
  padding-left: 5px;
  padding-right: 5px;
}

.graficos span {
  font-weight: bold;
}

.graficos>span {
  justify-content: center;
}

.tituloTrimestre {
  font-size: 12px;
  position: relative;
}

.tituloTrimestre i {
  color: var(--bg-header);
  position: absolute;
  top: 5px;
  right: 3px;
  font-size: 18px;
  cursor: pointer;
}

.control {
  color: var(--bg-header);
  text-align: center;
  cursor: pointer;

}

/*PARA EL MODULO DE EVENTOS*/
.eventos {
  /*height: 170px;*/
  height: 220px;
}



.header-eventos {
  background-color: var(--bg-header);
  color: white;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}

.operacione-eventos {
  justify-content: right;
}

.operacione-eventos i {
  display: flex;
  cursor: pointer;
}

.operaciones-eventos span {
  font-weight: bold;
  font-size: 13px;
  text-align: left;
  padding-left: 10px;
}

.evento-header {
  font-weight: bold;
  font-size: 14px;
  text-align: left;
}

.evento-item {
  font-size: 14px;
}

.evento-item span,
.evento-header span {
  padding: 0;
  text-align: left;
  align-content: center;
}

.evento-item span:first-child {
  text-align: left;
}

.evento-item kbd {
  text-align: center;
  align-items: center;
  align-content: center;

}

.active-vista-evento {
  color: var(--bg-header)
}

.container-lista-eventos {
  height: 150px;
  overflow-y: auto;
  /*scrollbar-width: 20px !important;*/

}

/*.container-lista-eventos::-webkit-slider-runnable-track {
  width: 3px;
}*/

.container-lista-eventos {
  width: 3px;
}



/*vista de calendario*/
.calendario-eventos {
  overflow-y: scroll;
  height: 150px;
}

.dias {
  display: flex;
  justify-content: center;
  text-align: center;
  align-content: center;
  align-items: center;
}

.dias span {
  width: 30px;
  height: 30px;
  color: white;
  background-color: var(--bg-navegacion);
}

.dias:first-child span:first-child {
  border-top-left-radius: 3px;
}

.dias:first-child span:last-child {
  border-top-right-radius: 3px;
}

.semana:last-child span:first-child {
  border-bottom-left-radius: 3px;
}

.semana:last-child span:last-child {
  border-bottom-right-radius: 3px;
}

.semana {
  display: flex;
  justify-content: center;
  text-align: center;

}

.semana span {
  width: 30px;
  height: 30px;
  /*background-color: #d4bebea8;*/

  border-collapse: collapse;
}

.evento-dia {
  background-color: var(--bg-header);
  color: white;
}



/*ancho de banda de scroll*/

/*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

/*::-webkit-scrollbar-track {
  background: #888;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 25px;
}*/

::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/*Para seccion de errores*/
.msg-section-error {
  font-size: 16px;
  color: black;
  font-weight: bold;
}


.table-error-cuerpo tr td {
  text-align: center;
}


.table-error-cuerpo tr td:last-child {
  text-align: justify;
}


.alerta-errores {
  height: auto !important;
}



/*para cargar la imagen en el formulario*/
.imagen-cargar .imagen-cargada {
  width: 160px;
  height: 120px;
  border-radius: 4px;
  box-shadow: 0 0 1px 1px #ccc;
}



/*barra de scroll*/
::-webkit-scrollbar {
  width: 5px;
  /* Para scroll vertical */
  height: 5px;
  /* Para scroll horizontal */
}

::-webkit-scrollbar-track {
  background: #ccc;
  border-radius: 2px;
}

/* Color del "thumb" (la parte que se mueve) */
::-webkit-scrollbar-thumb {
  background-color: #6f6d6d;
  border-radius: 2px;
}

/* Opcional: color al pasar el mouse */
::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: #6f6d6d;
}



/**/
.w-90 {
  width: 90% !important;
}

.font-archivo {
  margin-top: 10px !important;
  color: var(--bg-header);
  font-weight: 700;
  text-align: center;
}

.img-pdf {
  margin-top: 20px !important;
  width: 100px !important;
}

.img-evento {
  width: 120px !important;
}

.img-form-evento {
  width: 200px !important;
  margin-top: 20px !important;
}

.textarea-centrado {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 150px;
  resize: none;
  margin: 20px auto;
  width: 90% !important;
}




.loader-run {
  color: black;
  font-size: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 16px;
  position: relative;
  animation: mulShdSpin 1.3s infinite linear;
  transform: translateZ(0);
}

@keyframes mulShdSpin {

  0%,
  100% {
    box-shadow: 0 -15px 0 1px,
      10px -10px 0 0em, 15px 0 0 -5px,
      10px 10px 0 -5px, 0 15px 0 -5px,
      -10px 10px 0 -5px, -15px 0 0 -5px,
      -10px -10px 0 0;
  }

  12.5% {
    box-shadow: 0 -15px 0 0, 10px -10px 0 1px,
      15px 0 0 0, 10px 10px 0 -5px, 0 15px 0 -5px,
      -10px 10px 0 -5px, -15px 0 0 -5px,
      -10px -10px 0 -5px;
  }

  25% {
    box-shadow: 0 -15px 0 -0.5em,
      10px -10px 0 0, 15px 0 0 1px,
      10px 10px 0 0, 0 15px 0 -5px,
      -10px 10px 0 -5px, -15px 0 0 -5px,
      -10px -10px 0 -5px;
  }

  37.5% {
    box-shadow: 0 -15px 0 -5px, 10px -10px 0 -5px,
      15px 0em 0 0, 10px 10px 0 1px, 0 15px 0 0em,
      -10px 10px 0 -5px, -15px 0em 0 -5px, -10px -10px 0 -5px;
  }

  50% {
    box-shadow: 0 -15px 0 -5px, 10px -10px 0 -5px,
      15px 0 0 -5px, 10px 10px 0 0em, 0 15px 0 1px,
      -10px 10px 0 0, -15px 0em 0 -5px, -10px -10px 0 -5px;
  }

  62.5% {
    box-shadow: 0 -15px 0 -5px, 10px -10px 0 -5px,
      15px 0 0 -5px, 10px 10px 0 -5px, 0 15px 0 0,
      -10px 10px 0 1px, -15px 0 0 0, -10px -10px 0 -5px;
  }

  75% {
    box-shadow: 0em -15px 0 -5px, 10px -10px 0 -5px,
      15px 0em 0 -5px, 10px 10px 0 -5px, 0 15px 0 -5px,
      -10px 10px 0 0, -15px 0em 0 1px, -10px -10px 0 0;
  }

  87.5% {
    box-shadow: 0em -15px 0 0, 10px -10px 0 -5px,
      15px 0 0 -5px, 10px 10px 0 -5px, 0 15px 0 -5px,
      -10px 10px 0 0, -15px 0em 0 0, -10px -10px 0 1px;
  }
}



/*------------------------------------------------------------------------------------------
                                      INICIO DE SESION
--------------------------------------------------------------------------------------------
*/

.section-formulario-sesion {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  height: 100vh;
}

.formulario-sesion {
  box-shadow: 0 0 1px 1px #ccc;
  border-radius: 1px solid #ccc;
  border-radius: 5px;
  padding-bottom: 6px;
  background: white;

}


.formulario-sesion .titulo {
  display: flex;
  font-size: 18px;
  text-align: center;
  color: #5b5656;
  font-weight: bold;
  justify-content: center;
}

.section-logosicues {
  display: flex;
  align-items: center;
  align-content: center;
  height: 200px;
  justify-content: center;
}

.section-recuperar-clave {
  text-align: right;
  font-size: 14px;
}

.section-recuperar-clave>span:last-child {
  color: #0e4ac2;
  cursor: pointer;
}

.btn-iniciar-sesion {
  padding: 10px;
  background-color: var(--bg-header);
  color: white;
  border-radius: 3px;
  font-size: 14px;
  box-shadow: 0 0 1px 1px #751310;
  cursor: pointer;
}


/*
  -----------------------------------------------------------------------------------------
    TITULO GENERAL DE MODULO DE PROYECTOS
  -----------------------------------------------------------------------------------------
*/

.contenido-tabla-modulo .title-general {
  font-size: 16px;
  font-weight: normal;
}


/*
  -----------------------------------------------------------------------------------------
    PERMISOS - TITULO: USUARIO NO ENCONTRADO
  -----------------------------------------------------------------------------------------
*/

.error-usuario {
  color: red;

}


/*
---------------------------------------------------------------------------------------------
                        SELECT2
---------------------------------------------------------------------------------------------
*/

.select2.select2-container {
  width: 100% !important;
}

.form-publicaciones .select2.select2-container {
  width: 90% !important;
}

.select2-container .select2-selection--single {
  display: flex;
  width: 475px;
}

.proyecto-investigacion .select2-container .select2-selection--single {
  display: flex;
  width: 620px;
  color: rgb(189, 12, 12)
}



/*loader para permisos (section)*/
#sectionLoader {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

#sectionLoader .loader-permisos {
  background-color: white;
  width: 45%;
  height: 200px;
  border-radius: 3px;
  box-shadow: 1px 0px 1px 0px #ccc;
  display: flex;
  justify-content: top;
  flex-direction: column;
  align-items: center;
  align-content: center;
}

#sectionLoader .loader-permisos .logo {
  display: inline-block;
  width: 110px;
  height: 150px;
}

#sectionLoader .loader-permisos .logo .loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}


@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.section-loader-run {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}



.botonera-formulario .loader-boton {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.botonera-formulario .loader {
  width: 20px;
  height: 20px;
  border: 3px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}



/*para animacion completa del loader*/
.check-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkmark {
  width: 20px;
  height: 20px;
  stroke: #fff;
  /* Blanco */
  stroke-width: 3;
  stroke-miterlimit: 10;
  animation: scale .3s ease-in-out .9s both;
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke: #fff;
  /* Blanco */
  stroke-width: 3;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  stroke: #fff;
  /* Blanco */
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {

  0%,
  100% {
    transform: none;
  }

  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

/* jadez */

/* ancho de 80% */
.w-80 {
  width: 80% !important;
}

/* contenido para cerrar sesión en la barra */
.contenido-username {
  display: flex;
  justify-content: center;
  align-items: center;
}

.seccion-cerrar {
  margin-left: 10px !important;
  margin-bottom: 15px;
}

/* panel principal */
.dashboard {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.dashboard img {
  margin-right: 40px;
}

.dragging {
  border: 2px dashed #007bff;
  background-color: #f0f8ff;
}

.dragover {
  border: 2px dashed #007bff;
  background-color: #f0f8ff;
}

.btn-download {
  color: #343A40 !important;
}

.flex {
  display: flex;
  justify-content: space-between;
}
