@font-face{font-family: OpenSans-Light; src:url('../fonts/OpenSans-Light.ttf')}
@font-face{font-family: OpenSans-Regular; src:url('../fonts/OpenSans-Regular.ttf')}
@font-face{font-family: OpenSans-Bold; src:url('../fonts/OpenSans-Bold.ttf')}

@font-face{font-family: Lato-Light; src:url('../fonts/lato/Lato-Light.ttf')}
@font-face{font-family: Lato-Regular; src:url('../fonts/lato/Lato-Regular.ttf')}
@font-face{font-family: Lato-Bold; src:url('../fonts/lato/Lato-Bold.ttf')}

button:active, a:active, a:active * { outline: none !important; -moz-outline-style: none !important; }
button:focus, a:focus, a:focus * { outline: none !important; -moz-outline-style: none !important; }
input[type="radio"]:focus {border:0;}
input[type="radio"]:-moz-focusring {outline:none;}

html, body {
    height: 100%;
    margin-bottom: 1px;
}
body{
    font-family: "Lato-Regular", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    font-size: 15px;
    color: #2E2E2E;
    background: #EFEFEF;
}
#mobilecheck,
#emailcheck{
    color: gainsboro;
}

#mobilecheck.valid,
#emailcheck.valid{
    color: green;
}
#main-nav a.el{
    display: block;padding: 14px 10px;color: white;text-align: center;
}
.alert{
    position: absolute;
    top: 20px;
    right: 40px;
    min-width: 100px;
    max-width: 300px;
    padding: 10px 12px;
    cursor: pointer;
}
.alert.error{
    background-color: rgba(189, 11, 11, 0.82);
    color: white;
}
.alert.remove{
    display: none;
}
.area_login{
    text-align: center;
}
.area_login img{
    width: 140px;
    margin: 15px 0px 10px;
}
.area_login .btn{
    margin: 15px 0px;
    width: 100%;
}
.area_login h1{
    font-size: 25px;
    margin: 24px 0px 12px;
}
.area_login .gray{
    margin: 15px 0px 4px;
    display: block;
}
.area_footer{
    margin-top: 50px;
}
.area_principal{
    background: #EFEFEF;
    margin-left: 260px;
    width: calc(100% - 275px);
    padding: 0 30px 0 40px;
    height: auto;
}
.background_celeste{
    background: #3DA6F5 !important;
    color: white;
}
.box{
    background-color: white;
    padding: 10px;
    width: 100%;
}
.box .header{
    color: #f5f6fa;
    background-color: #989898;
    padding: 9px 12px;
}
.box .item{
    background-color:#f5f6fa;
    padding: 9px 12px;
}
.btn{
    border-radius: 4px;
}
.btn1{
    color: #fff !important;
    background: #43425D !important;
}
.btn2{
    color: #1a1a1a !important;
    background: #c4c4c4 !important;
}
.btn-control{
    background: #f0f0f0;
    padding: 4px 15px;
    border-radius: 3px;
    border: none;
    font-size: 88%;
    margin-top: 4px;
    margin-bottom: 15px;
    cursor: pointer;
    color: #4D4F5C !important;
    text-decoration: none !important;
}
.btn-control:disabled {
    opacity: 0.2;
}
.btnEncuestas{
    background-color: rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 16px !important;
}
.btnEncuestas img{
    width: 62px;
    margin: 0 auto;
    display: block;
}
.clase{
    margin: 10px 0px;
}
.clase span{
    color: #3DA6F5 !important;
}
.cuadro_pregunta {
    background: white;
    padding: 10px;
    color: #4D4F5C;
    margin: 0px !important;
}
.cuadro_pregunta ul li .btn-outline-secondary.focus,
.cuadro_pregunta ul li .btn-outline-secondary:focus{
    box-shadow: none;
}
.cuadro_pregunta ul li .btn{
    border: 1px solid #f3f3f3
}
.cuadro_pregunta .texto {
    background: #f5f6fa;
    padding: 14px;
}
.cuadro_pregunta .texto .form-check-inline{
    margin-right: 32px;
    margin-bottom: 6px;
}
.cuadro_pregunta .texto.superior{
    color: #f5f6fa;
    background: #989898;
}
.cuadro_pregunta ul {
    list-style: none;
    padding: 0;
    margin: 10px 0px 9px;
}
.cuadro_pregunta ul li {
    padding: 5px 25px;
    font-size: 92%;
}
.cuadro_pregunta ul li .btn{
    width: 100%;
}
.cuadro_pregunta ul li label{
    margin-left: 6px;
}
.cabecera_unach{
    padding-top: 3em;
}

.container-cauge {
  width: 80px;
  height: 40px;
  position: absolute;
  overflow: hidden;
  text-align: center;
  margin-top: 10px;
  bottom: 8px;
  left: 15px;
}
.gauge-a {
  z-index: 1;
  position: absolute;
  background-color: rgba(160, 157, 157, 0.2);
  width: 80px;
  height: 40px;
  top: 0%;
  border-radius: 60px 60px 0px 0px;
}
.gauge-a.red{
    background-color: red;
}
.gauge-b {
  z-index: 3;
  position: absolute;
  background-color: #fff;
  width: 50px;
  height: 25px;
  top: 15px;
  margin-left: 15px;
  margin-right: auto;
  border-radius: 50px 50px 0px 0px;
}

.gauge-c {
  z-index: 2;
  position: absolute;
  background-color: #1EBF10;
  width: 80px;
  height: 40px;
  top: 40px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0px 0px 40px 40px;
  transform-origin: center top;
  transition: all 1.3s ease-in-out;
}
.gauge-c.orange{
    background-color: orange;
}
.gauge-data {
  z-index: 4;
  color: rgb(185, 183, 183);
  font-size: 12px;
  line-height: 23px;
  position: absolute;
  width: 80px;
  height: 20px;
  top: 20px;
  margin-left: auto;
  margin-right: auto;
  transition: all 1s ease-out;
}
.gauge-data.red{
    color: red;
}
.lista_facultades a,
.lista_docentes a{
    display: block;
    background: white;
    padding: 7px 9px;
    margin-bottom: 3px;
    border-radius: 2px;
    color: black !important;
    text-decoration: none !important;
}
.lista_facultades a:hover,
.lista_docentes a:hover{
    background: gainsboro;
}
.detalle-titulo{
    font-size: 16px;
    color: #636363;
    letter-spacing: 0.6px;
}
.detalles-visor{
    border-radius: 7px;
    max-height: 455px;
    max-width: 900px;
}

.detalles-visor table{
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
}

.detalles-visor table thead tr{
    background-color: #F5F6FA;
    color: #A3A6B4;
    font-size: 12px;
}

.detalles-visor table thead tr th{
    border: 1px solid #f000 !important;
}

.detalles-visor table tbody th{
    color: #636363;
    font-weight: initial;
    text-align: left;
}

.detalles-visor table tbody td{
    font-size: 12px;
}
.estadisticas{
    margin-top: 20px;
}
.final-titulo{
    color: #6E6E6E;
    font-size: 38px;
}

.final-titulo-completado{
    font-size: 26px;
}
.final-subtitulo-completado{
    font-size: 19px;
}
.final-img-completado{
    width: 44%;
    margin: 18px 0px 20px;
}
.footer{
    color: #707070;
    margin: 38px 0px;
}

.footer_hr{
    border-top: 2px solid #adadad;
}

.footer_nombre_unach{
    color: #878787;
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    font-size: 18px;
    margin-bottom: 82px;
}

.header_facultad{
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    font-size: 13px;
}

.header_hr{
    border-top: 1px solid #adadad;
}

.header_licenciatura{
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    font-size: 22px;
    letter-spacing: 0.2px;
}

.g-academico-visor{
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    font-size: 16px;
    color: #ADADAD;
}

.gray{
    color: #B9B9BA;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  color: #3DA6F5;
  font-size: 6px;
  margin: 8px 38px;
  position: absolute;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.logotxt{
    text-align: center;
    display: none;
    font-size: 20px;
}
.logologin{
    width: 70%;
}
.logo-unach-header{
    margin-top: -12px;
}
.logo-unach-header img{
    width: 75px;
}

.max-width-71{
    max-width: 71px;
}

.max-width-100{
    max-width: 100px;
}

.max-width-1500{
    max-width: 1500px !important;
}

.max-height-60{
    max-height: 100px;
}

.nav-materias{
    font-size: 24px;
    margin-top: -5px;
    margin-left: 0.8em;
    margin-bottom: 0.65em;
    letter-spacing: 0.5px;
}

.nav-right{
    width: 260px;
    background: #43425D;
    border-style: hidden;
    height: 100%;
}

.nav-right a:hover{
    text-decoration: none;
}
 
.nav-lista{
    border: 0px solid rgba(0,0,0,.125);
    background-color: transparent;
    font-size: 13.5px;
    letter-spacing: 0.3px;
}

.nav-lista:first-child{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav-lista:last-child{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.nav-lista:hover{
    background-color: rgba(0, 0, 0, 0.1);
}

.nav-lista-materias{
    font-size: 13px;
}

.nav-lista-materias:hover{
    border-left-style: solid;
    border-left-color: rgb(77, 161, 255);
    border-left-width: thick;
}

.nav-footer{
    bottom: 1em;
    width: 85%;
}

.nombre-visor{
    font-size: 22px;
}

.hr_tarjeta{
    border-top: 1px solid #adadad;
    width: 90%
}

.hr-nav-footer{
    border-top: 2px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 0.5em;
    width: 85%;
}

.hr-visor{
    border-top: 1px solid #adadad;
    width: 90%
}

.nombrePersona {
    font-size: 16px;
    text-transform: capitalize;
}
.t1color{
    color: #43425D;
}
.t1background{
    background: #43425D;
}

.principal{
    background: #EFEFEF;
}

.barra_superior{
    height: 85px;
    background: #43425D;
    margin-bottom: 75px;
}
.opmenu a{
    color: white;
    text-align: center;
    width: 100%;
    display: block;
    padding: 15px 0px;
}
.opmenu a:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.page_login{
    background: #EFEFEF;
    background-image: url('../img/puntos.png');
}
.page_login .titulo{
    font-size: 35px;
    line-height: 50px;
    display: block;
    margin-bottom: 6px;
}
.porcentaje {
    color: #A4A4A4;
    font-size: 13px;
    margin: 4px 1px;
    position: absolute;
}
.puntaje-titulo{
    color: white;
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    font-size: 11px;
}

.pie_unach{
    bottom: 1em;
}

.puntaje-text{
    font-size: 48px;
}

.lugar-text {
    font-size: 35px;
}
.sonidos{
    font-size: 21px;
    width: 50px;
    padding: 5px 10px;
    cursor: pointer;
    position: absolute;
    right: 40px;
    z-index: 999;
}
.titulo_bienvenida_v1{
    font-size: 24px;
    margin-top: 0.5em;
    letter-spacing: 0.2px;
}

.titulo_animos_v1{
    color: #7e7e7e;
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    letter-spacing: 0.3px;
}

.titulo_recordatorio_v1{
    margin-top: 0.5em;
    letter-spacing: 0.3px;
}

.titulo_materias_v1{
    font-size: 33px;
    margin-top: 1.8em;
    margin-bottom: 0.4em;
    letter-spacing: 0.35px;
}

.tarjeta{
    background-color: white;
    display: grid;
    flex: content;
    margin: 10px;
    padding: 20px 15px 0;
    height: 175px;
    position: relative;
}

.page_inicio .tarjeta{
    background-color: white;
    border-radius: 3px;
    display: grid;
    flex: content;
    min-height: 180px;
    max-height: 180px;
    margin: 8px;
    max-width: 300px;
    padding: 20px 15px 0;
    cursor: pointer;
    width: 300px;
}
.page_inicio .tarjeta .nombre_profesor{
    display: block;
    min-height: 32px;
    line-height: 20px;
    font-size: 14px;
}
.page_inicio .tarjeta.completado{
    background: #43425D;
}
.page_inicio .tarjeta.completado .tarjeta-titulo{
    color: #fff;
}
.page_inicio .tarjeta.completado .gauge-b{
    background-color: #43425D;
}
a.mat{
    text-decoration: none;
}
.tarjeta-materia{
    border-radius: 3px;
    min-height: 180px;
    max-height: 180px;
    max-width: 300px;
    text-transform: capitalize;
    cursor: pointer;
}

.tarjeta .logo{
    max-width: 60px !important;
}

.tarjeta .modalidad{
    padding: 1px 5px;
    font-size: 11px;
    border-radius: 5px;
}

.tarjeta-logros{
    background-color: white;
    border-radius: 3px;
    flex: content;
    margin-top: 8px;
    text-transform: capitalize;
    padding: 20px 15px 0;
    padding-bottom: 0px;
    min-height: auto !important;
    max-height: 198px !important;
}
.tarjeta-logros table{
    margin-bottom: 0px;
}
.t-logros-titulo{
    font-size: 24px;
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    color: black;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.t-logros-text{
    font-size: 12px;
    color: #b0b0b0;
    line-height: 36px;
}

.t-logros-numero{
    font-size: 20px;
}

.tarjeta-titulo{
    color: #4b4b4b;
    font-size: 15px;
    margin-left: -0.5em;
    letter-spacing: 0.2px;
    line-height: 1;
    text-transform: uppercase;
}

.tarjeta-puntaje{
    background-color: #333045 !important;
    color: white;
}

.tarjeta-visor{
    border-radius: 7px;
    min-height: 258px;
    max-height: 258px;
    max-width: 210px;
}
.progress b{
    font-size:14px;
    display: inline-block;
    margin: 3px auto;
    position:relative;
}
.progress-bar-text{
    color: #BABABA;
    font-size: 10px;
    font-family: "Lato-Light", "Helvetica Neue","Lucida Grande",Arial,sans-serif;
    letter-spacing: 1px;
}

.thinner-bar{
    height: 0.25rem;
    margin-top: 6px;
    margin-bottom: 3px;
}

.titulo{
    color: #4DA1FF !important;
}

.titulo-blanco{
    color: white;
}

.visor-foto-perfil{
    width: 85px;
    height: 85px;
    border-radius: 50%;
}

.color_celeste{
    color: #3DA6F5 !important;
}

.bar-color-1{
    background-color: #A3A1FB !important;
}
.bar-color-2{
    background-color: #5EE2A0 !important;
}
.bar-color-3{
    background-color: #FF6565 !important;
}
.bar-color-4{
    background-color: #FEC163 !important;
}
.bar-color-5{
    background-color: #FFA177 !important;
}

/* XL */
@media (max-width: 1200px) { 
	
}
/* LG */
@media (max-width: 1199px) {
    
}

/* MD */
@media (max-width: 991px) {
    img.estadisticas{
        display: none;
    }
    .area_principal {
        width: calc(100% - 60px);
        margin-left: 50px;
        padding: 0px 0px 0px 15px;
    }
    .btnEncuestas{
        padding: 1.5rem 0px !important;
    }
    .btnEncuestas span.logotxt{
        display: block !important;
    }
    .cabecera_unach {
        padding-top: 26px;
    }

    .header_licenciatura {
        font-size: 18px;
    }
    .header_facultad {
        font-size: 11px;
    }
    .hr-nav-footer { 
        width: 100%;
        margin: 8px 0px !important;
    }
    .logo-unach-header {
        margin-top: 3px;
    }
    .logo-unach-header img {
        width: 50px;
    }
    .nombrePersona, .btnEncuestas span, .nav-footer li span{
        display: none !important;
    }
    .nav-footer li {
        text-align: center;
    }
    .nav-footer li i{
        margin: 0 !important;
    }
    .nav-right {
        width: 50px;
    }
    .tarjeta-logros {
        max-width: auto !important;
    }
    
    .img-form{
        display: none;
    }
    #main-nav a.el span{
        display: none;
    }
}

/* SM */
@media (max-width: 767px) { 
    .page_login .titulo{
        font-size: 22px;
        line-height: 30px;
    }
    .logologin {
        display: none;
    }
    .area_login img {
        width: 85px;
        margin: 0px 0px 0px;
    }
    .page_login .barra_superior {
        height: 25px;
        margin-bottom: 18px;
    }
    .area_login h1 {
        font-size: 15px;
    }
    .tarjeta-titulo {
        font-size: 13px;
    }
    .page_inicio .tarjeta .nombre_profesor {
        font-size: 13px;
    }
    .logo-unach-header {
        position: absolute;
        right: 12px;
        top: 15px;
    }
    .cabecera_unach {
        padding-top: 18px;
    }
    .header_facultad{
        font-size: 10px;
    }
    .logo-unach-header img {
        width: 40px;
    }
    .page_inicio .tarjeta{
        width: 100%;
    }
    .input-file{
        width: 147px;
    }
    .area_principal {
        padding: 0px 0px 0px 10px;
    }
}

/* XS */
@media (max-width: 575px) {

}