:root {
  --dark: #16191C;
  --dark-x: #1E2126;
  --light: #ffffff;
  --text1: #9090A 8;
  --error: #FE616F;
  --correct: #8EEC00;
  --good: #6699FF;
}

body {
  font-family: "Segoe UI";
  font-weight: 400;
  src: local("Segoe UI Semilight"), local("Segoe UI");
  color: var(--dark);
}

.bg {
  background-image: url(../img/bg-img/mandarina.jpg);
  background-position: center center;
  background-size: cover;
}

.bg-overlay {
  position: relative;
  z-index: 2;
  background-position: center center;
  background-size: cover; }
  .bg-overlay::after {
    background-color: rgba(17, 17, 17, 0.5);
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: ""; }

.text-light {
  color: var(--dark) !important;
}

.bg-dark {
  background-color: var(--light) !important;
}

.bg-dark-x {
  background-color: var(--dark-x);
}

#formulario {
  padding-left: 12%;
  padding-right: 12%;
}

#formulario input:focus {
  border: 3px solid var(--dark-x);
  outline: none;
  box-shadow: 3px 0px 20px rgba(38, 38, 38, 0.4);
}

.input-error {
  display: none;
}

.input-error-activo {
  display: block;
}

.validar {
  position: absolute;
  right: 10px;
  opacity: 0;
}

.form-error {
  background: var(--error);
  height: 25px;
  font-size: 12px;
  border-radius: 3px;
}

.form-error-activo {
  display: block;
}

.formulario-correcto .validar {
  color: var(--correct);
  opacity: 1;
}

.formulario-incorrecto .validar {
  color: var(--error);
  opacity: 1;
}

.formulario-incorrecto input, .select-incorrecto select {
  border: 3px solid var(--error);
}

#formulario h1, label, a u, select, select option {
  color: var(--text1) !important;
}

#formulario a u {
  font-weight: 200;
}

#formulario select option {
  font-family: "Segoe UI";
  font-weight: 200;
  src: local("Segoe UI Semilight"), local("Segoe UI");
}

.btn {
  min-height: 3.125rem;
  font-weight: 600;
}

.scroll::-webkit-scrollbar {
  width: 5px;
}

.scroll::-webkit-scrollbar-thumb {
  background: #283E9B;
  border-radius: 5px;
}

.scroll2::-webkit-scrollbar {
  width: 0px;
}

.form-control {
  min-height: 3.125rem;
  line-height: initial;
  border: 1px solid #707070;
  color: var(--dark);
}

.nav a {
  color: #707070;
  font-size: 1rem;
}

.nav a i {
  color: #707070;
  font-size: 1.5rem;
}

#menu-nav i:hover {
  color: #5E81F4;
}

#menu-nav a:hover {
  color: #5E81F4;
}

.fondo {
  background: #4F82E8;
}

.fondo2 {
  background: #F5F5FB;
}

.fondo3 {
  background: #E5E9FA;
  border: #E5E9FA;
}

.borde {
  border-radius: 20px;
}

.margen {
  margin-top: 2rem;
}

.welc-color {
  background: #F7E5E9;
}

.card-body h2 {
  color: #FE616F;
}

.foto {
  border: 6px solid #ECECF2;
  width: 100%;
}

.info-estudiante {
  font-size: 12px;
}

.info-estudiante2 {
  font-size: 14px;
}

.contenido-h {
  height: 55px;
}

.bajo {
  background: var(--error);
}

.bajos {
  color: var(--error);
}

.bueno {
  background: var(--good);
}

.buenos {
  color: var(--good);
}

.por-text {
  font-size: 14px;
}

.card-title span {
  font-size: 12px;
}

.eventos-icon {
  height: fit-content;
  padding: 10px;
  background: #E5E9FA;
  color: #5E81F4;
  border-radius: 15%;
}

#modulos {
  font-size: 0.7em;
  padding: 0;
  color: #fff;
}

#text-evento {
  font-size: 10px;
}

.img-mod {
  height: 160px;
}

.card-evento {
  background-color: #F5F5FB;
  border: transparent;
}

.materiales .card-title {
  font-size: 18px;
}

.materiales .card-text {
  font-size: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

.materiales .clase {
  font-size: 15px;
  margin-bottom: 0;
}

.materiales i {
  font-size: 22px;
}

.sborde {
  border: 0;
}

.titulo-canvas {
  height: 37px;
  border-bottom: 1px solid gray;
}
.btn-admin{
  background-color: #283E9B;
  border-color: #283E9B;
  color: white;
}
.tabla input{
  min-height: auto;
  height: 34px;
}

/* ESTILO TABLAS*/

table thead{
  background: rgba(21,94,178,1);
  color: white;
}

/*Botones*/

.btn-rounded{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 1px 7px -1px rgb(40,62,155,1);
}
.btn-rounded:hover{
  box-shadow: 0px 1px 7px 1px rgb(40,62,171,1);
  background: #283EAB;
}
.btn-roundedaux{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 1px 7px -1px rgb(25,135,84,1);
}
.btn-roundedaux:hover{
  box-shadow: 0px 1px 7px 1px rgb(25,135,26,1);
  background: #19871A;
}

.btn-roundedblue{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 1px 7px -1px rgb(13,110,253,1);
}
.btn-roundedblue:hover{
  box-shadow: 0px 1px 7px 1px rgb(11,94,215,1);
}
.btn-roundedred{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 1px 7px -1px rgb(220,53,69,1);
}
.btn-roundedred:hover{
  box-shadow: 0px 1px 7px -1px rgb(181,40,54,1);
}

.sombra{
      box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
}

.examn-nav ul a{
  font-size:10px;
}


@media screen and (min-width: 420px) and (max-width: 1920px) {
  .examen-docente, .examen-fecha {
    font-size: 12px;
  }

  .modulo-card {
    height: 300px;
  }

  .titulo-modulo {
    font-size: 15px;
  }

  .text-modulo {
    font-size: 10px;
  }

  .docente-modulo {
    font-size: 12px;
  }

  .borde-nav {
    border-right: 3px solid #283E9B;
    height: 45px;
    margin-top: 22px;
    margin-left: auto;
  }
}

@media screen and (max-width: 420px) {
  .fecha {
    font-size: 10px;
  }

  .examen-unidad {
    font-size: 12px;
  }

  .examen-docente {
    font-size: 9px;
  }

  .examen-curso {
    font-size: 15px;
  }

  .examen-fecha {
    font-size: 10px;
  }

  .btn-desarrollar {
    width: 64px;
    font-size: 9px;
  }

  .margen-card {
    margin-right: 10px;
  }

  .nav-ul {
    margin-left: 0;
  }

  .lista-modulo {
    margin-right: 10px
  }

  .titulo-modulo {
    font-size: 20px;
  }

  .text-modulo {
    font-size: 17px;
  }

  .docente-modulo {
    font-size: 15px;
  }
  .sombra{
        box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;
        margin-right: 10px;
  }

}


/* CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
*{margin:0;padding:0}
body{width:100%;height:100%;font:12px "Open Sans",sans-serif}
#wrapper{width:50%;height:560px;overflow:hidden;margin:20px auto;background:#fff;border:1px solid #c6c6c6}
div.screen{height:560px;overflow:hidden;background:transparent;margin:15px}
.list{margin-top:36px;text-align:left}
.item{height:115px;margin-left:115px;clear:both}
.item .img,.item span{background:#f0f0f0}
.item .img{float:left;width:96px;height:81px;margin-left:-113px}
.item span{height:11px;width:320px;margin-bottom:19px;float:left}
.item span:nth-of-type(3){width:95px;margin-bottom:0}
a:link{color:#93e766;text-decoration:none;outline:none;transition:all 0.25s}
a:visited{color:#666;text-decoration:none}
a:link:hover{color:#666;text-decoration:none}
a:visited:hover{color:#79e766;text-decoration:none}


.container {
  position: absolute;
  width: 100vw;
  height: 120vh;
  max-width: 120vmin;
  max-height: 120vmin;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -40%);
          transform: translate(-50%, -40%);
}

.container p{
  text-align:center;
  font-size:30px;
}

.particles-js-canvas-el {
  position: absolute;
  top: 0%;
  left: 0%;
  bottom: 100%;
  right: 100%;
}