html body {
  padding: 10px !important;
  background-color: white;
  overflow-x: hidden;
}

.login_imagen {
  background-image: url("../img/login_page.png");
  background-position: center;
  background-size: cover;
  height: 100%;
  min-width: 400px;
}

.recupero_imagen {
  background-image: url("../img/logocolor-salag.png");
  background-position: center;
  background-size: cover;
  height: 100%;
}

.login-page .card-inicio {
  max-width: 458px;
  background-color: transparent;
}
.login-page .card-cuerpo {
  background-color: transparent;
}
.login-page .card-title {
  background: #E7B09C;
  padding: 10px;
  border-radius: 25px;
  min-width: 125px;
  text-align: center;
  margin-bottom: 10px !important;
}
.login-page .card-title h4 {
  color: #36c776;
}
.login-page .login_inicio {
  font-family: "Montserrat", sans-serif;
  min-width: 360px;
  font-size: 30px;
  line-height: 38px;
  font-weight: 800;
  margin-bottom: 30px;
  color: black !important;
  letter-spacing: -2px !important;
}
@media (max-width: 320px) {
  .login-page .login_inicio {
    min-width: 300px;
  }
}
.login-page form .form-label-group label {
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 16px;
  font-weight: 700;
}
.login-page form .label {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 16px;
  font-weight: 700;
  padding-left: 5px;
}
.login-page form .form-control {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 22px;
  border: 1px solid #030303;
  background: transparent !important;
  height: 64px;
}
.login-page form .form-control::-moz-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1;
  /* Firefox */
}
.login-page form .form-control:-ms-input-placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1;
  /* Firefox */
}
.login-page form .form-control::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1;
  /* Firefox */
}
.login-page form button {
  background-color: white;
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  height: 64px;
  max-height: 64px;
  padding: 0;
}
.login-page form button:hover {
  background-color: white;
}
.login-page form .recordarme {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
}

.bg-login {
  background-image: url("../img/admin/bg-login.jpg") !important;
  background-position: center;
  background-size: cover;
}

.faq-bg {
  background-image: url("../img/faqs_bg.png") !important;
  background-position: center;
  background-size: cover;
}

.bg-tablero {
  background-color: #f5f5f5;
  background-image: url(../img/grilla_fondo.png);
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.45);
  padding-bottom: 90px;
}

.bg-transparente {
  background-color: transparent;
}

.bg-gradiente {
  background: #ff9f43 !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e7b09c",endColorstr="#36c776",GradientType=1) !important;
}

.btn {
  border-radius: 50px;
  margin: 5px;
}

.boton_custom_cursos {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 19px;
  font-size: 12px;
  font-family: "Montserrat", sans-serif;
  background-color: #62A17E;
  border: 1px solid #62A17E;
  color: white;
 width: 100%;
 margin: 0 !important;
}
@media (max-width: 1440px) {
  .boton_custom_cursos {
    font-size: 11px;
    padding: 10px 14px;
  }
}
.boton_custom_cursos:hover{
  /*background-color: white;*/
  color: white;
}
.boton_custom_manifiesto {
  display: flex;
  align-items: center;
  line-height: 19px;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  background-color: #62A17E;
  color: white;
  border: 1px solid #62A17E;
  /* width: 170px;*/
  width: 100%;
  margin: 0 !important;
}
@media (max-width: 1440px) {
  .boton_custom_manifiesto {
    font-size: 12px;
    padding: 10px 14px;
  }
}
.boton_custom_manifiesto.active {
  background-color: white;
  color: #62A17E;
}
.boton_custom_manifiesto.active i {
  margin-right: 7px;
}

.boton_custom_rosales {
  display: flex;
  align-items: center;
  line-height: 19px;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  background: #62A17E;
  color: white;
  padding-left: 10px;
  font-weight: 600;
  width: 100%;
  margin: 0 !important;
  border-color: #62A17E;
}
@media (max-width: 1440px) {
  .boton_custom_rosales {
    font-size: 12px;
    padding: 10px 14px;
  }
}
.boton_custom_rosales .feather {
  margin-right: 10px;
}
.boton_custom_rosales i {
  margin-left: -10px;
}
.boton_custom_rosales:hover {
  color: white;
}
.boton_custom_rosales.active {
  background-color: white;
  color: #62A17E;
}
.boton_custom_rosales.active i {
  margin-right: 10px;
}

.parpadea {
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  -webkit-animation-name: parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes parpadeo {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes parpadeo {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.estrella {
  color: #ccc;
}
.estrella i:hover {
  color: #36c776;
}
.estrella.active {
  color: #36c776;
}

.card {
  border-radius: 30px;
}
.card .text-muted {
  color: #999999 !important;
  font-size: 10px;
}
.card .card-image {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-color: #e7b09c !important;
  background-color: -moz-linear-gradient(0deg, #e7b09c 0%, #36c776 100%) !important;
  background-color: -webkit-linear-gradient(0deg, #e7b09c 0%, #36c776 100%) !important;
  background-color: linear-gradient(0deg, #e7b09c 0%, #36c776 100%) !important;
}

.tarjeta {
  border-radius: 5px;
  background-color: #fff;
  padding: 30px 0;
  width: 100%;
}
.tarjeta .card-header {
  background: transparent;
  border: 0;
}

.card_capitulo {

}
.card_capitulo .card-title {
  font-size: 16px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #469974;
    margin-bottom: 6px;
    text-align: left;
    width: auto;
    padding: 5px 0;
}
.card_capitulo .card-title2 {
  line-height: 28px;
  margin-bottom: 0;
  font-size: 26px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #999999;
      min-height: 60px;
}
.card_capitulo .card-body {
  min-height: 140px;
}
.card_capitulo .footer_card {
  border-top: 1px solid #999999;
  margin-top: 20px;
}

.imagen_card {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center;
}

.capitulo_estado {
 line-height: 19px;
    font-size: 16px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    color: white;
    margin: 15px 0;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 30px;

    width: 100%;
    max-width: 260px;

    display: inline-block;
    padding: 0.55rem 1.5rem;
    
    width: auto;
}
.capitulo_estado.enproceso {
  background: #fff;
  color:#4AA37B;
  border: solid 2px #4AA37B;

}
.capitulo_estado.completado {
  background: #AAD1C0;
  border: solid 2px #4F986F;
  color: #4F986F;
}
.capitulo_estado.incompleto {
  border: solid 2px #906f8c;
  background: #DCB7D7;
  color:#906f8c;
}
.capitulo_estado .icon-panel {
  width: 25px;
  height: auto;
}

.tarjeta_curso .card-title {
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-weight: 700;
  color: #36c776;
}

.hoja_manifiesto {
  max-width: 879px;
  margin: auto;
  background-color: white;
  padding: 60px 25px;
  margin-bottom: 20px;
}

.titulo_manifiesto {
  text-align: center;
  color: #7467F0;
  font-family: "Montserrat", sans-serif;
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
  width: 100%;
  margin: 50px 0;
}

.text_manifiesto {
  font-size: 10px;
  font-weight: 500;
  color: #000000;
  max-width: 759px;
  text-align: justify;
  margin: 40px auto;
}

.search_faqs {
  max-width: 100%;
  margin: auto;
  text-align: center;
  color: white;
}
.search_faqs h1 {
  color: white;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  line-height: 47px;
  font-weight: 700;
}
.search_faqs .card-text {
  color: white;
  text-align: left;
  font-family: "Montserrat", sans-serif;
  font-size: 25px;
  line-height: 30px;
  font-weight: 500;
}
.search_faqs .form-control {
  max-width: 600px;
  background-color: transparent;
}
.search_faqs .input-group {
  border: 1px solid #E7B09C;
  border-radius: 10px;
}
.search_faqs .input-group .input-group-text {
  background: transparent;
  color: #E7B09C;
  border: 0;
  font-size: 21px;
}

.listado_preguntas .collapse-title {
  font-family: "Montserrat", sans-serif;
    font-size: 15px;
    line-height: 24px;

    color: #49a17b;
}
.listado_preguntas .card-body {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    color: #636363;
    padding-top: 15px !important;
}

.main-menu .main-menu-content {
  top: 20px;
  /*height: auto !important;*/
  min-height: 400px;
}

.main-menu.menu-light .navigation .navigation-header {
  color: white !important;
}

.logo-panel {
  margin: auto;
}
@media (max-width: 768px) {
  .logo-panel {
    max-width: 50%;
  }
}
.logo-panel .navbar-brand {
  margin-right: 0;
}

.main-menu .navbar-header {
  height: 100%;
  width: 100%;
  height: 4.45rem;
  position: relative;
  padding: 0.35rem 0;
  transition: 300ms ease all, background 0s;
}

.vertical-layout.vertical-menu-modern.menu-expanded .main-menu {
  width: 230px;
  border-radius: 20px;
  max-height: 98%;
}

.main-menu.menu-light .navigation {
  background: transparent !important;
}

.main-menu.menu-light .navigation li a {
  color: #fff;
  padding: 10px 15px 10px 15px;
  line-height: 1.45;
}

.main-menu .shadow-bottom {
  height: 0 !important;
}

.header-navbar.navbar-shadow {
  border-radius: 30px;
  margin-top: 0;
}

.content_trailer {
  padding-top: 46.25%;
}
.content_trailer .video {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.caja_amarilla {
  /*background-color: #FDFBE7;*/
  background: #fdfbe7;
  background: linear-gradient(45deg, #fdfbe7 0%, #fdf4b3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdfbe7",endColorstr="#fdf4b3",GradientType=1);
  padding: 80px 30px 40px;
  border-radius: 0px;
  margin: 30px auto;
  border-top: 0px solid #faea8f;
  width: 100%;
  position: relative;
  text-align: center;
  /*font-family: 'Acumin Pro Bold';*/
}
.caja_amarilla .borde {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  background: #fdffe0;
  background: linear-gradient(45deg, #fdffe0 0%, #fbf2ad 50%, #faea8f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdffe0",endColorstr="#faea8f",GradientType=1);
}
.caja_amarilla .texto {
  text-align: center;
  color: #333333;
  font-size: 30px;
  /*font-weight: 700;
  font-family: "Titillium Web", sans-serif;*/
  font-family: "Acumin Pro Bold";
}
.caja_amarilla h2 {
  font-family: "Acumin Pro";
  font-size: 1.4rem;
  line-height: 1.8rem;
}
.caja_amarilla .logo_tarjetas {
  width: 500px;
  position: relative;
  display: inline-block;
}
@media (max-width: 768px) {
  .caja_amarilla .logo_tarjetas {
    width: 90%;
  }
}
@media (max-width: 320px) {
  .caja_amarilla .logo_tarjetas {
    width: 100%;
  }
}
.caja_amarilla .logo_tarjetas.dos {
  width: 118px;
}
.caja_amarilla .logo_tarjetas img {
  width: 100%;
}

.caja_violeta {
  background: #dbd9ef;
  background: linear-gradient(45deg, #dbd9ef 0%, #c3bef9 50%, #e3e2ed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dbd9ef",endColorstr="#e3e2ed",GradientType=1);
  padding: 80px 30px 40px;
  border-radius: 0px;
  margin: 30px auto;
  width: 100%;
  position: relative;
}
.caja_violeta .borde {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  background: #36c776;
  background: linear-gradient(45deg, #36c776 0%, #c2bbfc 50%, #a299ed 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#36c776",endColorstr="#a299ed",GradientType=1);
}
.caja_violeta .texto {
  text-align: center;
  color: #36c776;
  font-size: 30px;
  font-weight: 700;
  font-family: "Titillium Web", sans-serif;
}

.caja_materiales {
  width: 100%;
  margin: 140px auto;
}
@media (max-width: 425px) {
  .caja_materiales .col-12 {
    margin-bottom: 30px;
  }
}

.caja_informacion {
  border: 1px solid #707070;
  border-radius: 3px;
  max-width: 450px;
}

.caja_observaciones {
  background-color: #fff7ac;
  width: 90%;
  border-radius: 10px;
  padding: 55px;
  position: relative;
  margin: auto;
  background-repeat: no-repeat;
  background-position: left top;
  min-height: 500px;
}
.caja_observaciones:before {
  content: "";
  background-image: url(../img/badge.png);
  width: 50px;
  height: 50px;
  position: absolute;
  top: -27px;
  right: 55px;
  background-size: cover;
}

.caja_transparente {
  text-align: center;
  padding: 50px 0;
}

.caja_preguntas {
  max-height: 800px;
}
.caja_preguntas .formulario {
  padding: 45px 70px;
  position: relative;
}
.caja_preguntas .background {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}
.caja_preguntas .primera_pregunta .formulario::after {
  content: "";
  background-image: url("../img/bg-preguntas-1.png");
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  left: -50%;
  z-index: 1;
}
.caja_preguntas .primera_pregunta .background::after {
  content: "";
  background-image: url("../img/bg-foto-1.png");
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.1;
}
.caja_preguntas .segunda_pregunta {
  position: relative;
}
.caja_preguntas .segunda_pregunta::after {
  content: "";
  background-image: url("../img/bg-preguntas-1.png");
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  left: auto;
  z-index: 1;
}
.caja_preguntas .tercera_pregunta {
  position: relative;
}
.caja_preguntas .tercera_pregunta .background::after {
  content: "";
  background-image: url("../img/bg-fotos-3.png");
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}

.table-responsive {
  overflow: hidden;
}

footer {
  background-color: #F5F5F5;
  margin-left: -15px;
  margin-right: -15px;
  padding: 50px 15px;
}
@media (max-width: 425px) {
  footer {
    padding: 25px 15px;
  }
}
footer .redes {
  text-align: left;
  margin-top: 0px;
  display: flex;
  align-content: center;
  align-items: center;
}
@media (max-width: 425px) {
  footer .redes {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
  }
}
footer .redes i {
  color: #4ebb4a;
  background: #FFFFFF;
  width: 60px;
  height: 60px;
  font-size: 20px;
  text-align: center;
  line-height: 60px;
  border-radius: 100%;
}
@media (max-width: 425px) {
  footer .redes i {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}
footer .redes i:hover {
  color: #101010;
  background: #4abb5c;
}
footer .imagen-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-control {
  border: 1px solid #36c776;
  border-radius: 50px;
}

textarea.form-control {
  height: auto;
  border-radius: 10px;
}

.informacion {
  margin-bottom: 30px;
}
.informacion__titulo {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  line-height: 30px;
  font-weight: 700;
  color: #333333;
}
.informacion__texto {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 600;
  color: #36c776;
}
.informacion__aviso {
  font-family: "Montserrat", sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: #333333;
}

.icon-panel {
  width: 20px;
  height: 20px;
  margin-right: 5px;

}

.calificar {
  padding: 0 15px;
  margin-bottom: 40px;
}
.calificar .titulos {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 33px;
  font-weight: 700;
  color: #333333;
}
.calificar .botonera {
  width: 100%;
  justify-content: space-between;
  display: flex;
  position: relative;
  margin-bottom: 40px;
}
.calificar .botonera::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
}
.calificar .botonera .botones {
  cursor: pointer;
  border: 3px solid #CCCCCC;
  border-radius: 100px;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 26px;
  font-weight: 500;
  color: #36c776;
  width: 236px;
  display: inline-block;
  text-align: center;
  padding: 14px;
  max-height: 60px;
}
.calificar .botonera .botones:hover {
  border: 3px solid #36c776;
}
.calificar .botonera .botones.active {
  border: 3px solid #36c776;
}
.calificar .mostrar_capitulo {
  width: 100%;
}
.calificar .caja_preguntas {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: #cccccc;
  box-shadow: 0px 3px 5px 0px rgba(204, 204, 204, 0.5);
  -webkit-box-shadow: 0px 3px 5px 0px rgba(204, 204, 204, 0.5);
  -moz-box-shadow: 0px 3px 5px 0px rgba(204, 204, 204, 0.5);
  height: 100%;
}
.calificar .caja_preguntas .linea_titulo {
  padding: 40px 40px;
}
.calificar .caja_preguntas .listado {
  padding: 0;
  list-style: none;
}
.calificar .caja_preguntas .listado li {
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 27px;
  font-weight: 500;
  color: #36c776;
  margin-bottom: 60px;
  padding-left: 20px;
  position: relative;
}
.calificar .caja_preguntas .listado li::after {
  content: "";
  width: 80%;
  height: 1px;
  background-color: #edebeb;
  position: absolute;
  bottom: -20px;
  left: 10%;
}
.calificar .caja_preguntas .listado li::before {
  content: "";
  width: 5px;
  height: 100%;
  background-color: white;
  position: absolute;
  left: 0;
}
.calificar .caja_preguntas .listado li:hover::before {
  background-color: #36c776;
}
.calificar .caja_preguntas .listado li.active::before {
  background-color: #36c776;
}
.calificar .caja_respuesta {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: #cccccc;
  box-shadow: 0px 3px 5px 0px rgba(204, 204, 204, 0.5);
  -webkit-box-shadow: 0px 3px 5px 0px rgba(204, 204, 204, 0.5);
  -moz-box-shadow: 0px 3px 5px 0px rgba(204, 204, 204, 0.5);
  padding: 40px;
}
.calificar .caja_respuesta .titulos {
  margin-bottom: 40px;
}
.calificar .caja_respuesta .respuesta {
  border-radius: 20px;
  border: 1px solid #36c776;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  color: #333333;
  padding: 40px;
}
.calificar .indicadores {
  margin-bottom: 40px;
  /* Radio button */
  /* Estas reglas se aplicarán a todos las elementos i después de cualquier input*/
  /* Estas reglas se aplicarán a todos los i despues de un input de tipo radio*/
}
.calificar .indicadores .indicador {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 36px;
  font-weight: 300;
  color: #333333;
}
.calificar .indicadores .content-input input,
.calificar .indicadores .content-select select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.calificar .indicadores .content-input input {
  visibility: hidden;
  position: absolute;
  right: 0;
}
.calificar .indicadores .content-input {
  position: relative;
  margin-bottom: 30px;
  padding: 5px 0 5px 60px;
  /* Damos un padding de 60px para posicionar el elemento <i> en este espacio*/
  display: block;
  margin-top: 10px;
}
.calificar .indicadores .content-input input + i {
  background: #f0f0f0;
  border: 2px solid rgba(92, 79, 204, 0.2);
  position: absolute;
  left: 0;
  top: 0;
}
.calificar .indicadores .content-input input[type=radio] + i {
  height: 16px;
  width: 16px;
  border-radius: 100%;
  left: 15px;
}
.calificar .indicadores .content-input input[type=radio] + i:before {
  content: "";
  display: block;
  height: 8px;
  width: 8px;
  background: red;
  border-radius: 100%;
  position: absolute;
  z-index: 1;
  top: 2px;
  left: 2px;
  background: #36c776;
  transition: all 0.25s ease;
  /* Todas las propiedades | tiempo | tipo movimiento */
  transform: scale(0);
  opacity: 0;
  /* Lo ocultamos*/
}
.calificar .indicadores .content-input input[type=radio]:checked + i:before {
  transform: scale(1);
  opacity: 1;
}
.calificar .indicadores .content-input:hover input[type=radio]:not(:checked) + i {
  background: #5b4fcc8a;
}
.calificar .linea_boton {
  text-align: right;
  width: 100%;
}