:root{
    --color1: rgb(0,168,89); 
    --colorazul: rgb(26,98,185);
}

::-webkit-scrollbar-track {
    background-color: transparent; }

::-webkit-scrollbar {
    height: 0px;
    width: 5px;
    background-color: transparent; }

::-webkit-scrollbar-thumb {
    box-shadow: inset 0px 0px 0px white;
    border-radius: 3px;
    background-color: rgba(0,0,0,0.1); }

@font-face{
    font-family:'freescpt';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/freescpt.TTF');
}

@font-face{
    font-family:'comic';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/comic.ttf');
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

#contenedorloader {
    visibility: visible;
    opacity: 1;
    margin-top: 0px;
    top: 0px;
    z-index: 900000;
    position: fixed;
    text-align: center;
    height: 100vh;
    width: 100%;
    background: rgb(255,255,255);    
    transition: all 1s ease-in-out;  
}

#contenedorlogoloader{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh - 200px);
}


#imglogoloader{
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
    margin: auto;
    width: auto;
    height: 200px;
    box-sizing: border-box; 
    animation: animarinsignia 1.5s infinite;
}

@keyframes animarinsignia{
    0%{height: 200px;}
    50%{height: 250px;}    
    100%{height: 200px;}    
}

#contenedortextoloader{
    padding: 0px 10px;
    display: flex;
    justify-content: center;
    align-items:   center;
    width: 100%;
    height: 150px;
}

#textoloader{
    font-style: italic;
    font-family: 'comic';
    font-size: 18px;
    margin: auto;
    color: rgb(0,168,89);
}


#headerid{ 
    user-select: none;
    z-index: 4;
    transition: ease-in-out all 0.3s;
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: rgb(255,255,255);
    height: 80px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.contenedor{
    margin: auto;
    height: 100%;
    width: 100%;
    max-width: 1200px;
}

.headerlogo{
    float: left;
    height: 100%;
    width: 180px;  
    user-select: none;
}

.headerlogoleft{
    float: left;
    height: 100%;
    width: 80px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#imglogoheader{
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    height: 70px;
    width: auto;
    margin: auto;
}

.headerlogoright{
    float: left;
    height: 100%;
    width: calc(100% - 80px);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#textologoheader{
    font-style: italic;
    text-align: center;
    margin: auto;
    font-family: sans-serif;
    font-size: 9px;
    color: rgb(237,50,55);   
}

.realselogoheader{
    color: rgb(0,168,89); 
    font-family: 'freescpt';
    font-size: 23px;    
    font-style: normal;
}

.headermenu{
    user-select: none;
    float: left;
    height: 100%;
    width: calc(100% - 180px);    
}

.itemnav{
    user-select: none;
    margin-right: 5px;
    float: right;
    height: 80px;
    width: 120px;
    font-family: sans-serif;
    color: rgb(237,50,55);
    transition: ease-in-out all 0.3s;
}

.itemnav:hover{
    cursor: pointer;   
    color: rgb(0,168,89);
}

.itemnav:hover>.itembottom{
    background-color: rgb(0,168,89);
    width: 120px;
}

.itemnavtop{
    transition: ease-in-out all 0.3s;
    float: left;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 20px; 
    font-family: 'comic';
}

.fontsize15{
    font-size: 15px; 
}

.itembottom{
    background-color: rgba(255,255,255,0.7);
    border-radius: 2px;
    margin: auto;
    bottom: 0px;
    position: absolute;
    height: 4px;
    width: 0px;    
    transition:  ease-in-out all 0.3s;
}


#modalemergente{
    pointer-events: auto;
    opacity: 1;
    top: 0px;
    transition: ease-in-out all 1s;    
    z-index: 5;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(90,159,34,0.97);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#modalcontenido{
    pointer-events: none;
    opacity: 0;
    top: 0px;
    transition: ease-in-out all 1s;    
    z-index: 5;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0,168,89,0.97); 
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}


#modalintranet{    
    pointer-events: none;
    opacity: 0;
    top: 0px;
    transition: ease-in-out all 1s;    
    z-index: 5;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0,168,89,0.97);    
}

.modalintranetfloat{
    box-shadow: 0 0 7px rgba(0,0,0,0.5);
    background-color: white;
    border-radius: 50%;
    font-size: 17px;
    color: rgb(237,50,55);
    top: 5px;
    right: 5px;
    position: absolute;
    float: right;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.3s;
}

.modalintranetfloat:hover{
    background-color: rgb(237,50,55);
    color: white;
    cursor: pointer;
    transform: rotate(180deg);
}

.modalintranetpantalla{ 
    overflow-y: scroll;
    height: auto;
    min-height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px 50px;
}

.intranetopcion{
    pointer-events: none;
    user-select:none;
    color: rgba(255,255,255,0.8);
    height: 120px;
    width: 120px;    
    cursor: pointer;
    transition: ease-in-out all 0.2s;
}

.intranetopcion:hover{    
    color: rgb(255,255,255);
}


.intranetopcionicono{
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(0,0,0,0.5);
    margin: 5px auto;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 30px;
    transition: ease-in-out all 0.1s;
}

.intranetopcion:hover>.intranetopcionicono{
    margin: 0px auto;
    width: 90px;
    height: 90px;
    background-color: white;
    color: rgb(237,50,55);    
    font-size: 35px;
}

.intranetopciontexto{
    text-align: center;
    font-family: 'comic';
    user-select:none;
    font-size: 14px;
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedorloginintranet{
    opacity: 0;
    pointer-events: none; 
    display: none;
    border-radius: 5px;
    width: 250px;
    height: 260px;
    background-color: white;
    box-shadow: 0 0 7px rgba(0,0,0,0.5);  
    transition: ease-in-out all 0.3s;
}

#encabezadofrmlogin{
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-top: 10px;
    margin-left: 5px;
    margin-bottom: 5px;
    width: 240px;
    height: 30px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: rgb(237,50,55);
}

#contenedorlogofrm{
    color: rgb(237,50,55);
    font-size: 15px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
}

#contenedorcerrarfrm{
    border-radius: 50%;
    color: rgb(237,50,55);
    font-size: 15px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    transition: ease-in-out all 0.3s;
}

#contenedorcerrarfrm:hover{    
    cursor: pointer;
    background-color: rgb(237,50,55);
    color: white;
    transform: rotate(360deg);
}

#contenedortextologofrm{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    height: 30px;
    width: calc(100% - 60px);
}

#textologofrm{
    margin: auto;
    color: rgb(237,50,55);
    font-size: 25px;
    font-family: 'freescpt';
}

.selectlogin{
    border-radius: 3px;
    box-sizing: border-box;
    color: white;
    margin: 10px auto 0px 25px;
    font-family: sans-serif;
    font-size: 15px;
    padding-left: 5px;
    outline: none;
    border-width: 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.3);
    background-color: rgb(237,50,55);
    height: 25px;
    width: 200px; 
}

.optionnuevo{
    background-color: rgb(255,255,255);
    color: rgba(0,168,89,0.8);
}

.inputlogin{
    box-sizing: border-box;
    color: rgb(237,50,55);
    margin: 15px auto 0px 25px;
    font-family: sans-serif;
    font-size: 14px;
    padding-left: 5px;
    outline: none;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
    border-color: rgb(237,50,55);
    background-color: transparent;
    height: 25px;
    width: 200px;    
}

.inputlogin::placeholder{
    color: rgba(237,50,55,0.5);
    font-style: italic;
}

.contenedorpassword{
    margin: 20px auto 0px auto;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    outline: none;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
    border-color: rgb(237,50,55);
    background-color: transparent;
    height: 25px;
    width: 200px;
}

#passlogin{
    margin-left: 0px;
    margin-top: 0px;
    box-sizing: border-box;
    float: left;
    width: 170px;
    border-width: 0px;
}

.contenedorojologin{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    font-size: 20px;
    cursor: pointer;
    transition: ease-in-out all 0.3s;
    color: rgba(237,50,55,0.7);
}

.contenedorojologin:hover{
   cursor: pointer;
   color: rgba(237,50,55,1);
}

.btnlogin{
    border-radius: 3px;
    margin-left: 25px;
    margin-top: 15px;
    color: rgba(255,255,255,0.7);
    height: 28px;
    width: 200px;   
    outline: none;
    border-width: 0px;
    border-style: solid;
    background-color: rgb(237,50,55);
    border-color: rgba(255,255,255,0.3);
    transition:  ease-in-out all 0.3s;
}

.btnlogin:hover{
    color: rgba(255,255,255,1);
    background-color:  rgb(0,168,89);
    cursor: pointer;
}

.contenedormergente{    
    position: relative;
    border-radius: 5px;
    max-width:820px;
    margin: auto;
    width: calc(100% - 20px);
    height: calc(100% - 40px);
    background-color: white;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.contenedormergentefloat{
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
    background-color: white;
    position: absolute;
    top: -7px;
    right: -7px;
    height: 25px;
    width: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 15px;
    color: rgb(237,50,55);
    transition: ease-in-out all 0.3s;
    user-select: none;
}

.contenedormergentefloat:hover{
    cursor: pointer;
    color: white;
    background-color: rgb(237,50,55);
    transform: rotate(180deg);
}

.contenedormergentecontenido{
    padding: 15px;
    overflow-y: scroll;
    margin-top: 15px;
    height: calc(100% - 20px);
    width: 100%;
}

.contenedormergentecontenidoseccion{
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    width: 100%;
    height: auto;
    padding: 0px 10px;
    margin-bottom: 25px;
}

.contenedormergentecontenidoseccionencabezado{
    color: rgba(0,168,89,0.8);
    width: 100%;
    height: 30px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgba(0,168,89,0.8);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 17px;
    font-family: 'comic';
}

.contenedormergentecontenidoseccioncontenido{
    padding-bottom: 10px;
    position: relative;
    width: 100%;
    height: auto;    
    min-height: 180px;
}

.contenedormergentecontenidoseccioncontenidoimagen{
    right: 0;
    bottom: 0;
    padding: 15px;
    position: absolute;
    opacity: 0.3;
    width: 50%;
    height: 70%; 
    text-align: right;
}

#contenedormergentecontenidoseccioncontenidoimagen1{
    opacity: 0.25;
}

.imgseccionnosotros{
    margin: auto;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.contenedormergentecontenidoseccioncontenidotexto{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: justify;
    font-family: 'comic';
    font-size: 15px;
    padding: 10px;
    background-color: transparent;
    width: 100%;
    height: auto;
    overflow-y: scroll;
}

.pantalla{    
    position: relative;
    width: 100%;   
}

.menuenlaces{
    padding: 20px;
    width: 100%;
    height: auto;
    background-color: white;
}

.contenedorslider{  
    padding: 0px;
    overflow: hidden;
    position: relative;
    margin-top: 80px;
    width: 100%;
    background-color: rgb(0,168,89);
}


ul ol{
    list-style: none;
    transition: ease-in-out all 0.5s;
}

.imgslider{
    background-color: white;
    width: 100%;
}

.pagination{
    list-style: none;
    position: absolute;
    top: 90%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.pagination li{
    font-size: 18px;
    color: rgba(255,255,255,0.6);
    margin: 2px 5px;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

.arrowleft{
    top: 0;
    height: 100%;
    position: absolute;
    color: rgba(0,168,89,0.6);
    font-size: 40px;
    display: flex;
    align-items: center;
    left: 10px;    
}

.arrowleft i{
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

.arrowleft i:hover{
    color: rgb(237,50,55);   
}

.arrowright{
    top: 0;
    height: 100%;
    position: absolute;
    color: rgba(0,168,89,0.6);
    font-size: 40px;
    display: flex;
    align-items: center;
    right: 10px;    
}

.arrowright i{
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

.arrowright i:hover{
    color: rgb(237,50,55);   
}


.divseccion{   
    background-color: white;    
    margin: auto;
    width: 100%;
    height: auto;
}

#divseccionitems{   
    background-color: rgb(0,168,89);
}

.contenedor2{
    padding: 15px;    
    margin: auto;
    height: auto;
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
}

.itemopciones{
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255,255,255,0.7);
    color: rgb(0,168,89);
    box-sizing:  content-box;
    margin: 10px auto;
    width: 150px;
    height: 150px;
    border-style: solid;
    border-width: 0px;
    border-color: rgb(237,50,55);
    transition: ease-in-out all 0.5s;
}

.itemopcionesicon{
    font-size: 60px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 100px;
}

.itemopcionestexto{    
    font-family: 'comic';
    text-align: center;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 50px;
    padding-left: 5px;
    padding-right: 5px;
}

.itemopciones:hover{
    color: rgb(237,50,55);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.btnslidernuevo{  
    z-index: 2; 
    left: 7px;
    user-select:none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;    
    bottom: 10px;
    background-color: rgba(255,242,18,1);
    width: 45px;
    height: 45px;
    border-radius: 50%;  
    color: rgba(255,255,255,1);
    font-size: 20px;
    transition: ease-in-out all 0.05s;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

.btnslidernuevo:hover{
    font-size: 25px;
    cursor: pointer;
    color: rgba(255,255,255,1);
}

.btnslidernuevo2{  
    z-index: 2; 
    left: 7px;
    user-select:none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;    
    bottom: 10px;
    background-color: rgba(0,189,68,1);
    width: 45px;
    height: 45px;
    border-radius: 50%;  
    color: rgba(255,255,255,1);
    font-size: 20px;
    transition: ease-in-out all 0.05s;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
}

.btnslidernuevo2:hover{
    font-size: 25px;
    cursor: pointer;
    color: rgba(255,255,255,1);
}

#btnmenuredessociales{
    position: fixed;
    left: 7px;
    z-index: 2; 
}

#btnradioyarowilca{
    left: auto;
    position: fixed;
    right: 5px;
    z-index: 2;
    background-color: rgba(255,96,5,0.8);
}

#contenedorcajaredesosciales{
    opacity:0;
    transform: rotate(90deg);
    position: fixed;
    left: -110px;
    bottom: -110px;
    height: 220px;
    width: 220px;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.5s;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    border-radius: 50%;
    overflow: hidden;
}

.contenedorcajaseccionredesosciales{ 
    position: relative;
    height: 50%;
    width: 50%;
    background-color: transparent;
}

.contenedoritemredessociales{
    height: 220px;
    width: 30px;
    position: absolute;
}

#contenedoritemredessociales1{
    transform: rotate(12deg);
}

#contenedoritemredessociales2{
    transform: rotate(34deg);
}

#contenedoritemredessociales3{
    transform: rotate(56deg);
}

#contenedoritemredessociales4{
    transform: rotate(78deg);
}

.itemredessociales{
    border-radius: 50%;
    margin-top: 3px;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgba(0,168,89,1);
    font-size: 25px;
    transition: ease-in-out all 0.5s;
}

.itemredessociales:hover{
    cursor: pointer;
    color: rgba(237,50,55,1);
}

footer{
    position: relative;
    width: 100%;
    height: 190px;
}

.footerimg{
    opacity: 0.8;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footercovercontenedor{
    text-align: center;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(237,50,55,0.85);
}

.footercoverlimitadortop{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    width: 100%;
    height: 130px;
    max-width: 1200px;
}

.footerparrafo{
    width: 100%;
    padding: 5px 10px;
    font-family: 'comic';
    color: rgba(255,255,255,0.9);
    font-size: 15px;
}

.footerparrafofinal{
    width: 100%;
    padding: 5px 10px;
    font-family: sans-serif;
    font-style: italic;
    color: rgba(255,255,255,0.9);
    font-size: 12px;
}

.footercoverlimitadorbottom{
    margin: auto;
    width: 100%;
    height: 50px;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#contadorvistas{
    background-color: rgb(0,168,89);
    box-shadow: 0 0 8px rgba(255,255,255,0.9);
    border-radius: 5px;
    font-family: 'comic';
    font-size: 14px;
    padding: 5px 8px;
    width: auto;
    height: auto;
    color: rgba(255,255,255,0.9);
}

.divseccionheader{
    height: 40px;
    width: 100%;
    padding-left: 10px;
    font-family: sans-serif;
    font-size: 15px;
    font-weight: bold;
    font-style: italic;    
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.parrafolink1{
    transition: ease-in-out all 0.5s;
    color: rgb(255,96,5);
}

.parrafolink1:hover{
    cursor: pointer;
    color: rgb(90,159,34);
}

#parrafolink2id{
    color: rgb(255,255,255);
}

#parrafolink2id:hover{
    color: rgb(255,96,5);
}

.divseccionbody{
    height: 100%;
    width: 100%;
    padding: 10px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.contenedornoticiaindex{
    background-color: white;
    position: relative;
    box-shadow: 0 0 10px rgba(180,180,180,0.5);
    margin: auto;
    width: 250px;
    height: 280px;
    overflow: hidden;
    border-radius: 5px;
    border-style: solid;
    border-width: 0px;
    border-color: rgb(180,180,180); 
    transition: ease-in all 0.3s;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedornoticiaemergente{
    margin: 20px auto;
    background-color: white;
    position: relative;
    box-shadow: 0 0 5px rgba(180,180,180,0.7);    
    width: calc(100% - 20px);
    max-width: 750px;
    height: auto;
    overflow: hidden;
    border-radius: 5px;    
    transition: ease-in all 0.3s;    
}

.contenedornoticiaindex:hover{
    cursor: pointer;    
}

#contenedornoticiacomunicadoindex{    
    box-shadow: 0 0 10px rgba(255,255,255,0.7);
    transition: ease-in all 0.3s;
    width: 300px;
    height: 280px;
}

#contenedornoticiacomunicadoindex:hover{
   box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.contenedornoticiaindex:hover>.noticiacover{    
    opacity: 1;   
    height:200%;
    width: 200%;
}

.contenedornoticiaindextop{
    width: 100%;
    height: 120px;    
}

.contenedornoticiaindividualimagen{
    margin: 10px;
    width: calc(100% - 20px);
    height: 350px; 
}

.imgnoticiaindex{    
    width: 100%;
    height: 100%;
    object-fit:  cover;
}

.imgnoticiaindividual{    
    width: 100%;
    height: 100%;
    object-fit:  contain;
}

.contenedornoticiaindexbottom{
    font-family: sans-serif;
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.titulonoticia{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: justify;
    padding: 10px;
    width: 100%;
    height: 120px;
    overflow-y: scroll;
    font-size: 14px;
    color: rgb(13,64,21); 
    font-style: italic;
    
}

.fechanoticia{
    font-size: 14.5px;
    color: rgb(90,159,34);
    font-weight: bold;
    text-align: right;
    padding: 10px;
    width: 100%;
    height: 40px;
}

.imgcomunicadoencabezadoindex{ 
    margin: auto;
    width: 100%;
    height: auto;   
}

.contenedorcomunicadotopindex{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 40px;
}

.contenedorcomunicadotopemergente{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
}

.contenedorcomunicadocenterindex{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 180px;
}

.contenedorcomunicadocenteremergente{
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
}

.contenedorcomunicadocenterfondoindex{
    height: 180px;
    width: 100%;
    position: relative;
}

.contenedorcomunicadocenterfondoemergente{    
    height: auto;
    width: 100%;    
}

.imgcomunicadofondoindex{
    opacity: 0.8;
    position: absolute;
    bottom: 0px;
    right: 20px;
    height: 40px;
    width: auto;
}

.imgcomunicadofondoemergente{
    opacity: 0.1;
    position: absolute;
    bottom: 0px;
    right: 20px;
    height: 70px;
    width: auto;
}

.contenedorcomunicadocentercontenidoindex{
    font-family: sans-serif;
    height: 180px;
    width: 100%;
    position: absolute;
    background-color: rgba(255,255,255,0.9);
    overflow-y: scroll;
}

.contenedorcomunicadocentercontenidoemergente{
    font-family: sans-serif;
    min-height: 250px;
    max-height: 450px;
    height: auto;
    width: 100%;
    background-color: rgba(255,255,255,1);
    overflow-y: scroll;
}

.contenedorcomunicadoindexfecha{
    font-size: 13px;
    color: rgb(90,159,34);
    font-weight: bold;
    text-align: left;
    padding: 10px;
    width: 100%;
    height: 30px;
}

.contenedorcomunicadoemergentefecha{
    font-family: sans-serif;
    margin-top: 5px;
    font-size: 15px;
    color: rgb(90,159,34);;
    font-weight: bold;
    text-align: left;
    padding: 10px;
    width: 100%;
    height: auto;
}

.contenedorcomunicadoemergentetiutloarchivo{
    margin-top: 5px;
    font-size: 14px;
    color: rgba(12,158,114,0.9);
    text-align: left;
    padding: 10px;
    width: 100%;
    height: auto;
    font-style: italic;
    text-decoration: underline;
    font-weight: bold;
}

.contenedorcomunicadoindextitulo{
    font-family: 'freescpt';
    font-size: 30px;
    color: rgb(255,96,5);
    text-align: center;
    width: 100%;
    height: 35px;
}

.contenedorcomunicadoemergentetitulo{
    font-family: 'freescpt';
    font-size: 40px;
    color: rgb(255,96,5);
    text-align: center;
    width: 100%;
    height: auto;
    padding: 5px;
}

.contenedornoticiaindividualtitulo{
    font-family: sans-serif;
    font-size: 20px;
    color: rgb(255,96,5);
    text-align: center;
    width: 100%;
    height: auto;
    padding: 5px;
}

.contenedorcomunicadoindexparrafo{
    width: 100%;
    height: auto;
    padding: 5px 10px;
    text-align: justify;
    font-size: 13px;
    font-style: italic;
    color: rgb(127,127,127);
}

.contenedorcomunicadoemergenteparrafo{
    width: 100%;
    height: auto;
    padding: 5px 10px;
    text-align: justify;
    font-size: 15px;
    font-style: italic;
    color: rgb(127,127,127);
}

.contenedornoticiaindividualparrafo{
    font-family: sans-serif;
    width: 100%;
    height: auto;
    padding: 5px 10px;
    text-align: justify;
    font-size: 15px;
    font-style: italic;
    color: rgb(127,127,127);
}

.contenedorcomunicadobottomindex{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 60px;
}

.contenedorcomunicadobottomemergente{
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
}

.noticiacover{
    border-radius: 50%;
    bottom: -50%;
    right: -50%; 
    margin: auto;
    transition: ease-in-out all 0.5s;
    opacity: 0;    
    z-index: 1;
    position: absolute;
    height: 0;
    width: 0;
    background-color: rgba(255,96,5,0.9);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.8);
    font-size: 70px;
    overflow: hidden;
}

.headersistema{
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    width: 100%;
    height: 60px;
    background-color: rgb(255,255,255);
    position: fixed;
    z-index: 3;
}

#imglogoheadersistemaweb{
    filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.5));
    height: 55px;
    width: auto;
    margin: auto;
}

.headersandwichsistemaweb{
    user-select: none;
    float: right;
    margin: auto;
    width: 50px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-content: center;
}

#sandwichsis{
    width: 40px;
    height: 40px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: all 0.2s ease-in-out;
}

#sandwichsis:hover{    
    cursor: pointer;
}

.sandwichhijos{
    background-color: rgb(237,50,55);
    width: 25px;
    height: 2px;
    border-radius: 2px;
    margin: 3px auto;
    transition: all 0.2s ease-in-out;
}

#sandwichsis:hover>.sandwichhijos{    
    background-color: rgb(0,168,89);
}

.menuverticalsistemaweb{
    user-select: none;
    opacity: 0;
    top: 60px;
    transition: ease-in-out all 0.5s;
    right: -250px;
    z-index: 3;
    position: fixed;
    height: calc(100% - 60px);
    width: 250px;
    background-color: rgba(237,50,55,0.9);
    overflow-y: scroll;
}

#contenedorlogouser{
    border-color: rgba(255,255,255,0.7);
    border-style: solid;
    border-width: 2px;
    margin: 10px 95px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 60px;
    height: 60px;
    border-radius: 50%; 
    color: rgba(255,255,255,0.7);
    font-size: 35px;
}

.itemnavvertical{
    font-family: sans-serif;
    color: rgba(255,255,255,0.8);
    margin: auto;
    width: calc(100% - 15px);
    height: 50px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.3);
    transition: ease-in-out all 0.2s;
}

#contenedoritemmenusalir{
    border-width: 0px;
}

.itemnavvertical:hover{
    padding-left: 20px;
    color: rgba(255,255,255,1);
    cursor: pointer;
}

.itemnavleft{
    transition: ease-in-out all 0.3s;
    float: left;
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 20px;    
}

.itemnavright{
    transition: ease-in-out all 0.3s;
    padding-left: 3px;
    padding-right: 10px;
    float: left;
    height: 100%;
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 15px;    
}

.sis_admin_masmenu{
    box-shadow: 0 0 7px rgba(0,0,0,0.6);
    background-color: rgba(0,168,89,0.9);
    margin-left: -80px;
    position: fixed;
    z-index: 14;
    margin-top: 80px;
    float: left;
    height: calc(100% - 160px);
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
    transition: ease-in-out all 0.3s;
    border-radius: 0px 10px 10px 0px;
}

#sis_admin_usuariosmenuid{
    margin-top: 75px;    
    height: 250px;
}

.item_sis_admin_masmenu{     
    margin-top: 3px;
    margin-bottom: 3px;
    width: 45px;
    height: 45px;
    color: white;
    border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
    font-size: 20px;
    transition: ease-in-out all 0.1s;
}

.item_sis_admin_masmenu:hover{
    color: rgb(237,50,55);
    cursor: pointer;  
    font-size: 28px;
}

.texto_item_sis_admin_masmenu{
    transition: ease-in-out all 0.1s;
    font-size: 10px;
}

.item_sis_admin_masmenu:hover>.texto_item_sis_admin_masmenu{
    opacity: 0;
}

.pantallasistema{
    width: 100%;
    position: fixed;
    height: calc(100% - 60px);
    top: 60px;
    background-color: white;
}

.pantallasliderleft{
    margin-top: 10px;
    float: left;      
    width: 250px;
    height: calc(100% - 20px);
    overflow-y: scroll;
    border-width: 0px 1px 0px 0px;
    border-style: dotted;
    border-color: rgb(0,168,89);
}

.pantallasliderleftcontenedorimg{
    border-style: solid;
    border-width: 3px;
    border-color: rgb(0,168,19);
    border-radius: 5px;
    overflow: hidden;
    opacity: 0.7;
    text-align: center;
    width: calc(100% - 20px);
    height: auto;
    margin: 20px 10px;
    transition: ease-in-out all 0.3s;
}

.pantallasliderleftcontenedorimg:hover{
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
    cursor: pointer;
}

.pantallasliderleftimg{
    width: 100%;
    height: auto;
}

.pantallasliderleftimgtexto{
    margin: auto;
    padding-bottom: 3px;
    color: rgb(0,168,19);
    font-family: sans-serif;
    font-size: 12px;    
}

.pantallasliderrigth{
    margin-top: 10px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;  
    width: calc(100% - 250px);
    height: calc(100% - 20px);
    overflow-y: scroll;
}

.pantallasliderrigthcontenedorimg{
    text-align: center;
    margin: auto;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
}

.pantallasliderrigthcontenedorimgleft{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;  
    float: left;
    height: 100%;
    width: calc(100% - 40px);
}

.pantallasliderrigthimg{
    width: calc(100% - 30px);
    height: auto;
    border-style: solid;
    border-width: 0px;
    border-color: rgb(0,168,89);
    box-shadow: 0 0 10px rgba(0,0,0,0.7);
}

.contenedorimgvacio{
    text-align: center;
    margin: auto;
    color: rgba(0,168,89,0.5);
    font-size: 100px;
}

.imgvaciotexto{
    margin-top: -5px;
    font-size: 15px;
    font-family: sans-serif;
    font-style: italic;
}

.pantallasliderrigthcontenedorimgrigth{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;  
    float: left;
    height: 100%;
    width: 40px;
}

.pantallasliderrigthcontenedorimgrigthoptions{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    height: auto;
    width: 30px;
    color: rgb(0,168,89);
    font-size: 25px;    
}

.contenedoroptionsimgslider{
    margin-top: 15px;
    transition: ease-in-out all 0.3s;
}

.contenedoroptionsimgslider:hover{
    cursor: pointer;
    color: rgb(237,50,55);
}

#contenedorloading{
    opacity:0;
    visibility: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    top: 0;
    left: 0;
    position: absolute;
    background-color: white;
    height: 100%;
    width: 100%;
}

#imgloading{
    width: 120px;
    height: auto;
}

.contenedorslidernuevo{
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    top: 100%;
    left: calc(100% - 230px);
    background-color: rgb(0,168,89);
    width: 225px;
    height: 135px;  
    color: rgba(255,255,255,0.8);
    font-size: 20px;
    transition: ease-in-out all 0.3s;
    font-family: sans-serif;    
}

#contenedorfile{
    width: 205px;
    height: 135px;
    overflow: hidden;
}

.imgnuevanota{
    padding: 5px;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgba(255,255,255,0.7);
    width: 205px;
    height: 35px;
    text-align: justify;   
    font-size: 13px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.3);
    font-style: italic;
}

.imgnueva{
    margin-top: 20px;
    margin-left: -103px;
    outline: none; 
    pointer-events: none;
}

.fileclick{
    z-index: 2;
    top: 55px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    background-color: white;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    color: rgb(0,168,89);
    font-size: 20px;
    transition: ease-out all 0.3s;
}

.fileclick:hover{
    color: rgb(237,50,55);
    cursor: pointer;  
}

#enviarimagennueva{
    margin-left: 0px;
    margin-top: 15px;
    color: rgba(0,168,89,0.8);
    height: 30px;
    width: 205px;   
    outline: none;
    border-width: 1px;
    border-style: solid;
    background-color: rgb(255,255,255);
    border-color: rgba(255,255,255,0.3);
    transition: all 0.3s ease-in-out;
}

#enviarimagennueva:hover{
    color: rgba(255,255,255,1);
    background-color: rgb(237,50,55);
    cursor: pointer;
}

.bienvenido{    
    height: 100%;
    width: 100%;
    color: rgba(0,168,89,0.7);
}

#contenedorimgbienvenido{    
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;   
    width: 100%;
    height: calc(100% - 200px);
    font-size: 200px;
}

#contenedortextobienvenido{
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    font-size: 22px;
    font-family: 'comic';
}

.patallaprincipaltop{
    position: fixed;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedorbuscador{
    position: relative;
    overflow: hidden;
    height: 30px;
    width: calc(100% - 20px);
    max-width: 400px;
    border-radius: 15px;
    border-color: var(--color1);
    border-style: solid;
    border-width: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: content-box;
}

.imgbuscador{    
    width: 30px;
    height: 30px;
    color: rgba(0,168,89,0.7);
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    transition: ease-in-out all 0.3s;
}

.buscadorinput{
    text-align: center;
    background-color: transparent;
    padding-left: 5px;
    font-family: sans-serif;
    color: rgba(0,168,89,0.7);
    font-style: italic;
    font-size: 15px;
    outline: none;
    border-width: 0px;
    height: 25px;
    width: calc(100% - 60px);
}

.buscadorinput::placeholder{
    color: rgba(0,168,89,0.5);
}

.imgrefresh{
    width: 30px;
    height: 30px;
    color: rgba(0,168,89,0.7);
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    transition: ease-in-out all 0.3s;
    
}

.imgrefresh:hover{
    cursor: pointer;
    color: rgba(0,168,89,1);
    transform: rotate(360deg);
}

.patallaprincipalbottom{
    position: fixed;
    margin-top: 50px;
    width: 100%;
    height: calc(100% - 100px);
}

#patallaprincipalbottomestudiante{  
    width: 200%;
}

.patallaprincipalbottomleft{    
    text-align: center;
    overflow: scroll;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
    height: calc(100% - 10px);
    width: calc(50% - 20px);
    transition: ease-in-out all 1s;
}

.patallaprincipalbottomright{
    overflow-y: scroll;
    float: left;
    height: calc(100% - 10px); 
    width: 50%;
    background-color: transparent;
    transition: ease-in-out all 1s;
}

.patallaprincipalbottomindividual{
    overflow-y: scroll;
    float: right;
    width: 50%;
    height: calc(100% - 10px);
    border-style: dotted;
    border-color: var(--color1);
    border-width: 0px 0px 0px 1px;
    text-align: center;
}

.patallaprincipalbottomgeneral{
    text-align: center;
    float: right;
    width: 50%;
    height: calc(100% - 10px);
    overflow: scroll;
}

.noresultado{
    width: 100%;
    margin: 30px auto;
    color: rgba(0,168,89,0.7);
    font-style: italic;
    font-family: sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

.tabla{
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 13px;
    margin: 15px auto;
    color: rgba(255,255,255,0.9);
    border-width: 10px;
    border-style: solid;
    border-color: rgb(0,168,89);
    background-color: rgb(0,168,89);
}

.tablatrh{
    color: rgba(255,255,255,1);
    font-size: 14px;
}

.tablath{
    padding: 5px 10px;
    cursor: pointer;
}

.tablatrb{
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.2);
    transition: ease-in-out all 0.3s;
    cursor: pointer;
}

.tablatrb:hover{
    background-color: rgba(0,0,0,0.2);    
}

.tablatdleft{    
    padding: 5px 5px 5px 10px;
    text-align: left;
}

.tablatdcenter{
    padding: 5px 10px;
    text-align: center;
}

#tablatdoption{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;    
}

.tablatdright{
    padding: 5px 10px 5px 5px;
    text-align: right;
}

.divtdoptiontd{
    padding: 5px 10px;
    text-align: left; 
}

.divtdoption{
    width: 23px;
    height: 23px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap; 
}

.divtdoption:hover{    
    color: rgb(0,168,89);
}

.divtdoptionsave{
    font-size: 15px;
    width: 23px;
    height: 23px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap; 
}

.divtdoptionsave:hover{    
    color: white;
}

.divtdoptioncumpleall{
    width: 23px;
    height: 23px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap; 
    transition: ease-in-out all 0.3s;
}

.divtdoptioncumpleall:hover{
    cursor: pointer;
    color: rgb(237,50,55);
}

.contenedorfrmnuevo{
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    position: absolute;
    top: 15px;
    right: -360px;
    height: auto;
    width: calc(100% - 18px);
    max-width: 350px;
    background-color: rgba(0,168,89,0.9);
    text-align: center;    
    transition: ease-in-out all 0.5s;
}

.encabezadofrmnuevo{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: content-box;
    margin: auto;
    width: calc(100% - 10px);
    height: 30px;
    color: rgba(255,255,255,0.8);
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: rgba(255,255,255,0.8);      
}

.encabezadofrmnuevoicono{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 30px;
    height: 30px;
    font-size: 15px;
}

.encabezadofrmnuevotitulo{
    text-align: left;
    padding-top: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100% - 50px);
    height: 30px;
    font-family: sans-serif;
    font-style: italic;
    font-size: 14px;
}

.encabezadofrmnuevocerrar{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 20px;
    height: 30px;
    font-size: 15px;
    transition: ease-in-out all 0.3s;
}

.encabezadofrmnuevocerrar:hover{
    cursor: pointer;
    color: rgb(237,50,55);
}

.frmpadrenuevo{    
    width: calc(100% - 20px);
    height: auto;
    margin: 10px auto;
    text-align: left;
}

.txtnuevo{
    box-sizing: border-box;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: 10px;
    width: 100%;
    height: 25px;
    background-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.8);
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.txtnuevo::placeholder{
    color: rgba(255,255,255,0.5);
}

.btnenviarnuevo{
    margin-top: 17px;
    float: right;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 30px;
    color: rgba(255,255,255,0.8);
    transition: ease-in-out all 0.3s; 
    margin-bottom: 10px;
}

#btnescale{
    float: left;
}

.btnenviarnuevo:hover{
    cursor: pointer;
    color: rgb(237,50,55);
}

.contenedorfrmeditar{ 
    background-color: rgba(0,168,89,0.05);
    margin: 10px auto;
    width: calc(100% - 30px);
    height: auto;
    color: var(--color1);
    font-family: sans-serif;
}

.encabezadofrmeditar{
    background-color: var(--color1);
    color: white;
    width: 100%;
    height: 30px;
    display: flex;
    font-weight: bold;
    font-size: 14px;
}

.encabezadofrmeditaricono{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.encabezadofrmeditartitulo{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height: 30px;
    width: calc(100% - 60px);
    padding-left: 5px;
}

.encabezadofrmeditartitulo2{
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height: 30px;
    width: calc(100% - 90px);
    padding-left: 5px;
}

.encabezadofrmeditartitulo3{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height: 30px;
    width: calc(100% - 30px);
    padding-left: 5px;
}

.contenedorfrmeditartxt{
    padding-top: 10px;    
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    width: calc(100% - 30px);
    height: 50px; 
}

#contenedorfrmeditartxtsubmit{
    display: block;
    width: 100%;
    padding-top: 0px;
    height: 50px;
    margin-top: 0px;
}

.labeltxteditar{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 15px;
    font-size: 13px;
    font-weight: bold;
}

.txteditar{
    outline: none;
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: var(--color1);
    max-width: 500px;
    width: 100%;
    height: 25px;
    padding-left: 3px;
    background-color: transparent;
    font-size: 13px;
    color: var(--color1);
    font-style: italic;
    font-family: sans-serif;
    padding-top: 10px;
}

.txteditar::placeholder{
    color: rgba(0,168,89,0.5);
}

.btnenviareditar{
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 50px;
    height: 50px;
    font-size: 35px;
    transition: ease-in-out all 0.3s;
}

.btnenviareditar:hover{
    cursor: pointer;
    color: rgb(237,50,55);
}

#contenedorfrmeditartxtdoc{    
    height: 50px;
}

.selecteditar{
    border-width: 0px;
    outline: none;
    background-color: var(--color1);
    height: 25px;
    width: 140px;
    color: rgba(255,255,255,0.8);
}

#selectpaisadministrativoeditardni{
    pointer-events: none;
    opacity: 0.6;
}

.optioneditar{
    background-color: white;
    color: var(--color1);
}

.contenedorfrmeditartxt2{
    padding-top: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin: auto;
    width: calc(100% - 30px);
    height: 50px;
}

#txtnumdocadministrativoeditar{
    width: calc(100% - 150px);
    margin-left: 10px;
    max-width: 100px;
}

.labeltxteditar2{
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 20px;
    font-size: 13px;
    font-weight: bold;
}

.datenuevo{
    padding-left: 5px;
    float: right;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: 17px;
    width: calc(45% - 10px);
    height: 25px;
    outline: none;
    background-color: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.8);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

#dateeditarnacadministrativo{
    margin-top: 0px;
    padding-left: 3px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    width: 140px;
    height: 25px;
    outline: none;
    background-color: rgba(0,168,89,1);
    color: rgba(255,255,255,0.8);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

#contenedorfrmeditartxttelef{
    margin-top: 10px;
}

.selecteditar4{
    border-width: 0px;
    outline: none;
    background-color: var(--color1);
    height: 25px;
    width: 230px;
    color: rgba(255,255,255,0.8);
}

.txteditarnoselect{
    pointer-events: none;
    padding-top: 0px;
    margin-top: 5px;
    background-color: var(--color1);
    color: white;    
}

.txteditarnoselectlast{
    max-width: 170px;
    margin-bottom: 10px;
}

.mostrarpasswordusuario{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height: 25px;
    width: 30px;
    background-color: var(--color1);
    color: white;
    transition: ease-in-out all 0.3s;
    cursor: pointer;
    font-size: 18px;
    margin-top: -5px;
}

.mostrarpasswordusuario:hover{
    color: rgb(237,50,55);
}

.selectnuevo{
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: 17px;
    height: 25px;
    width: 55%;
    outline: none;
    background-color: rgba(0,0,0,0.2);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.8);
}

.txtnuevo2{
    margin-top: 0px;
    float: right;
    box-sizing: border-box;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: 17px;
    width: calc(45% - 10px);
    height: 25px;
    background-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.8);
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.txtnuevo2::placeholder{
    color: rgba(255,255,255,0.5);
}

.txtnuevo3{
    box-sizing: border-box;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: 10px;
    width: 55%;
    height: 25px;
    background-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.8);
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.txtnuevo3::placeholder{
    color: rgba(255,255,255,0.5);
}

.cumpletop{
    width: 100%;
    height: 50px;
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#txtnumdocdocenteeditar{
    width: calc(100% - 150px);
    margin-left: 10px;
    max-width: 100px;
}

#txtnumdocestudianteeditar{
    width: calc(100% - 150px);
    margin-left: 10px;
    max-width: 100px;
}

#txttelefpadreditar{
    width: 100px;
}

#dateeditarnacdocente{
    margin-top: 0px;
    padding-left: 3px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    width: 140px;
    height: 25px;
    outline: none;
    background-color: rgba(0,168,89,1);
    color: rgba(255,255,255,0.8);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.txteditarnonormal{    
    padding-top: 0px;
    margin-top: 5px;
    background-color: var(--color1);
    color: white;    
}

#txtnumdocpadreeditar{
    width: calc(100% - 150px);
    margin-left: 10px;
    max-width: 100px;
}

#dateeditarnacpadre{
    margin-top: 0px;
    padding-left: 3px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    width: 140px;
    height: 25px;
    outline: none;
    background-color: rgba(0,168,89,1);
    color: rgba(255,255,255,0.8);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.selectnuevo2{
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: 17px;
    height: 25px;
    width: 100%;
    outline: none;
    background-color: rgba(0,0,0,0.2);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.8);
}

.encabezadofrmeditarvacante{
    margin-top: 2px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 26px;
    height: 26px;
    font-size: 15px;
    border-radius: 50%;
    transition: ease-in-out all 0.5s;
    color: var(--color1);
}

.encabezadofrmeditarvacante:hover{
    background-color: rgb(237,50,55);
    cursor: pointer;
    color: white;
    box-shadow: 0 0 5px rgba(255,255,255,0.5)
}

#dateeditarnacestudiante{
    margin-top: 0px;
    padding-left: 3px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    width: 140px;
    height: 25px;
    outline: none;
    background-color: rgba(0,168,89,1);
    color: rgba(255,255,255,0.8);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.selecteditar2{
    border-width: 0px;
    outline: none;
    background-color: var(--color1);
    height: 25px;
    max-width: 500px;
    width: 100%;
    color: rgba(255,255,255,0.8);
}

.selecteditar3{
    border-width: 0px;
    outline: none;
    background-color: var(--color1);
    height: 25px;
    width: calc(100% - 25px);
    max-width: 475px;
    color: rgba(255,255,255,0.8);
}

.selecteditar4{
    border-width: 0px;
    outline: none;
    background-color: var(--color1);
    height: 25px;
    width: calc(100% - 25px);
    max-width: 150px;
    color: rgba(255,255,255,0.8);
}

.selecteditarseccion{
    margin-left: 10px;
    border-width: 0px;
    outline: none;
    background-color: var(--color1);
    height: 25px;
    width: 140px;
    color: rgba(255,255,255,0.8);
}

#selectaniomatriculaestudiante{
    margin-top: 2.5px;
    font-size: 15px;
    float: right;
    padding-left: 2px;
    height: 25px;
    width: 70px;
    background-color: rgba(0,0,0,0.2);
}

.seccionencabezadonivel{
    border-radius: 5px;
    background-color: var(--color1);
    width: 330px;
    height: 30px;
    margin: 30px auto -10px auto;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.seccionencabezadoprematricula{
    transition: ease-in-out all 0.3s;
    border-radius: 5px;
    background-color: var(--color1);
    width: 330px;
    height: 30px;
    margin: 10px auto -10px auto;
    color: white;
    font-family: 'comic';
    font-size: 14px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 10px;
}

.seccionencabezadoprematricula:hover{
    cursor: pointer;
    background-color: rgb(125,84,181);
}

.nivelseccionencabezadonivel{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 110px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.masculinoseccionencabezadonivel{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 55px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.masculinoseccionencabezadonivel2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 65px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.femeninoseccionencabezadonivel{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 55px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.femeninoseccionencabezadonivel2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 65px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.alumnosseccionencabezadonivel{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 80px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.alumnosseccionencabezadonivel2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    width: 90px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.optionnuevoselectseccion{
    background-color: white;
    color: rgba(0,168,89,0.7);
}

.optionnuevoselectseccionedit{
    background-color: white;
    color: rgba(0,168,89,0.7);
}

.optionnuevoselectseccioneditar{
    background-color: white;
    color: rgba(0,168,89,0.7);
}

#btnsecciongenerarexcel2{
    margin-top: 4px;
    margin-left: 4px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 22px;
    height: 22px;
    font-size: 15px;
    border-radius: 50%;
    transition: ease-in-out all 0.5s;
    color: var(--color1);
}

#btnsecciongenerarexcel2:hover{    
    cursor: pointer;
    color: white;
    background-color: rgb(237,50,55);
    box-shadow: 0 0 5px rgba(255,255,255,0.5)
}

.excelseccionencabezadonivel{    
    float: left;
    width: 30px;
    height: 30px;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
}

.tabla2{
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 13px;
    margin: 15px auto;
    color: rgba(255,255,255,0.8);
    border-width: 10px;
    border-style: solid;
    border-color: rgba(0,168,89,1);
    background-color: rgba(0,168,89,1);
}

.tabla3{
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 13px;
    margin: 15px auto;
    color: rgba(255,255,255,0.8);
    border-width: 10px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    background-color: rgb(74, 83 ,136);
}

.tablatrb2{
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.2);
    transition: ease-in-out all 0.3s;
    cursor: pointer;
}

.tablatrb2:hover{
    background-color: rgba(255,255,255,0.1);
    color: rgb(194,176,218);
}

#contenedorpantallaemergente{
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(45,54,76,0.8);
    top: 0;
    right: 0;
    transition: ease-in-out all 1s;
}

#examcontenedorpantallaemergente{
    pointer-events: none;
    opacity: 0;
    z-index: 16;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(45,54,76,0.8);
    top: 0;
    right: 0;
    transition: ease-in-out all 1s;
}

#examcontenedorpantallaemergente2{
    pointer-events: none;
    opacity: 0;
    z-index: 17;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    top: 0;
    right: 0;
    transition: ease-in-out all 1s;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#contenedorpantallaemergente2{
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(45,54,76,0.8);
    top: 0;
    right: 0;
    transition: ease-in-out all 1s;
}

#btnsecciongenerarexcelpagos{
    margin-top: 2px;
    margin-left: 0px;
    margin-right: 4px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 26px;
    height: 26px;
    font-size: 15px;
    border-radius: 50%;
    transition: ease-in-out all 0.5s;
    color: var(--color1);
}

#btnsecciongenerarexcelpagos:hover{    
    cursor: pointer;
    color: white;
    background-color: rgb(237,50,55);
    box-shadow: 0 0 5px rgba(255,255,255,0.5)
}

.optioneditar2{
    background-color: white;
    color: var(--color1);
}

#btneditarsecciontutor{
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 25px;
    height: 25px;
    font-size: 20px;
    transition: ease-in-out all 0.3s;
}

#btneditarseccionauxiliar{
    float: right;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 25px;
    height: 25px;
    font-size: 20px;
    transition: ease-in-out all 0.3s;
}
    
#contenedorfrmmatricularnuevoestudiante{  
    overflow-y: scroll;
    top: 99px;
    right: -360px;
    height: 450px;
    width: calc(100% - 18px);
    max-width: 350px;
    background-color: rgba(0,168,89,0.9);
    text-align: center;    
    transition: ease-in-out all 0.5s;
}
    
.contenedorbuscadornuevamat{
    margin-top: 10px;
    margin-left: 10px;
    background-color: white;
    position: relative;
    overflow: hidden;
    height: 25px;
    width: calc(100% - 20px);
    max-width: 400px;
    border-radius: 12.5px;
    border-color: rgba(255,255,255,0.8);
    border-style: solid;
    border-width: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: content-box;
}

.contenedorpantallanuevamat{
    overflow-y: scroll;
    margin-top: 10px;
    margin-left: 10px;
    background-color: white;
    width: calc(100% - 20px);
    height: 150px;
    border-radius: 7px;
}

#contenedorpantallamatseccionest{
    margin-left: 0px;
    width: 100%;
     height: 180px;
}

.imgbuscadornuevamat{    
    width: 25px;
    height: 25px;
    color: rgba(0,168,89,0.6);
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    transition: ease-in-out all 0.3s;
}

.buscadorinputnuevamat{
    text-align: center;
    background-color: transparent;
    padding-left: 5px;
    font-family: sans-serif;
    color: rgba(26,98,185,0.6);
    font-style: italic;
    font-size: 13px;
    outline: none;
    border-width: 0px;
    height: 25px;
    width: calc(100% - 25px);
}

.buscadorinputnuevamat::placeholder{
    color: rgba(0,168,89,0.6);
}

.noresultadonuevamat{
    width: 100%;
    margin: 10px auto;
    color: rgba(0,168,89,0.6);
    font-style: italic;
    font-family: sans-serif;
    font-size: 13px;
    text-align: center;
}

.txtnuevamat{
    pointer-events: none;
    box-sizing: border-box;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 13px;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    background-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.8);
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.txtnuevamat::placeholder{
    color: rgba(255,255,255,0.5);
}

.txtnuevamat2{
    box-sizing: border-box;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 13px;
    margin-top: 10px;
    width: 51%;
    height: 20px;
    background-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.8);
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.txtnuevamat2::placeholder{
    color: rgba(255,255,255,0.5);
}

.txtnuevamat3{
    box-sizing: border-box;
    padding-left: 5px;
    font-family: sans-serif;
    font-size: 13px;
    margin-top: 0px;
    width: 51%;
    height: 20px;
    background-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.8);
    border-width: 0px 0px 1px 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

.txtnuevamat3::placeholder{
    color: rgba(255,255,255,0.5);
}

.cumplebtn{
    font-size: 18px;
    margin: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--color1);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.3s;
}

.contenedorlabelmat{
    font-style: italic;
    margin-top: 7px;
    width: 100%;
    height: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
}

.contenedorlabelnomcurso{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-style: italic;
    margin-top: 7px;
    width: 100%;
    height: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
    background-color: rgba(0,0,0,0.2);
}

.contenedorlabelmat2{
    margin-top: 20px;
    width: 100%;
    height: 20px;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
}

#contenedorlabelmatestudiante{
    padding-left: 5px;
    padding-top: 3px;
    margin-top: 15px;  
    background-color: rgba(0,0,0,0.2);
}

#contenedorlabeleditpensionestudiante{
    padding-left: 5px;
    padding-top: 3px;
    margin-top: 15px;  
    background-color: rgba(0,0,0,0.2);
}

#contenedorlabelexamsemanalnuevo{
    text-align: center;
    padding-left: 5px;
    padding-top: 3px;
    margin-top: 15px;  
    background-color: rgba(0,0,0,0.2);
}

.checkboxmat{
    float: left;
    margin-top: 2.5px;
    width: 15px;
    height: 15px;
    background-color: rgba(255,255,255,0.8);
    margin-right: 5px;
}

.checkboxmatinactive{
    float: left;
    margin-top: 2.5px;
    width: 15px;
    height: 15px;
    background-color: rgba(255,255,255,0.8);
    margin-right: 5px;
    pointer-events: none;
    opacity: 0.6;
}

.spancheckboxmat{
    float: left;
    width: 200px;
    padding-top: 2.5px;
    height: 20px;
}

.spancheckboxmatinactive{
    float: left;
    width: 200px;
    padding-top: 2.5px;
    height: 20px;
    pointer-events: none;
    opacity: 0.6;
}

#spancheckboxmat4{   
    width: 100px;
}

#spancheckboxmat8{   
    width: 160px;
}

#editspancheckboxmat4{   
    width: 100px;
}

#editspancheckboxmat8{   
    width: 160px;
}

.activarlabel{
    transition: ease-in-out all 0.3s;
    font-size: 16px;
    float: left;
    width: 17px;
    height: 16px;
    margin-top: 1.5px;
}

.activarlabel:hover{
    cursor: pointer;
    color: rgb(237,55,50);
}

#txtoculto{
    float: left;
    margin-top: 0px;
    opacity: 0;
    pointer-events: none;
    font-size: 0px;
    width: 100%;
    height: 1px;
    background-color: transparent;
    outline: none;
    color: rgba(255,255,255,0.8);
    border-width: 0px 0px 0px 0px;
}

.datepension{
    padding-left: 5px;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 14px;
    margin-top: 0px;
    width: calc(45% - 10px);
    height: 25px;
    outline: none;
    background-color: rgba(0,0,0,0.2);
    color: rgba(255,255,255,0.8);
    border-width: 0px;
    border-style: dotted;
    border-color: rgba(255,255,255,0.5);
}

#datecm{
    float: left;
    margin-top: 5px;
}

.contenedorregistroseccionestudiantes{
    margin-top: 15px;
    width: 100%;
    height: auto;
    overflow-x: scroll;
}

.contendorseccioncursos{
    width: 100%;
    min-height: 100px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: scroll;
}

.divseccioncurso{
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
    padding-bottom: 3px;
    border-radius: 5px;
    margin: 10px;
    height: auto;
    min-width: 300px;
    width: 300px;
    background-color: var(--color1);
    text-align: center;
}

.divseccioncursotop{
    font-family: sans-serif;
    color: white;
    font-size: 13px;
    margin: auto;
    height: 35px;
    width: 294px;
}

.divseccioncursotopleft{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    height: 35px;
    width: 25px;
}

.numseccioncurso{
    font-weight: bold;
    text-align: center;
    margin: auto;
    background-color: white;
    color: var(--color1);
    border-radius: 50%;
    height: 22px;
    width: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.divseccioncursotopcenter{    
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    height: 35px;
    width: 244px;
}

.divseccioncursotopright{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    height: 35px;
    width: 25px;
    font-size: 17px;
    transition: ease-in-out all 0.3s;
}

.divseccioncursotopright:hover{
    cursor: pointer;
    color: rgb(237,50,55);
}

.divseccioncursocenter{
    padding-top: 5px;
    overflow: none;
    margin: auto;
    background-color: white;
    height: auto;
    width: 294px; 
}

.divseccioncursoleft{
    float: left;
    height: 50px;
    width: 264px;    
}

.divseccioncursolabeldocente{
    padding-left: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 20px;
    font-size: 13px;
    font-weight: bold;
}

.divseccioncursoselectdocente{
    padding-left: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 30px;
    font-size: 13px;
}

.selectseccioncursodocente{
    font-size: 12px;
    color: rgba(45,54,76,1);
    height: 20px;
    width: calc(100% - 10px);
    outline: none;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color1);
    background-color: rgba(0,168,89,0.3);
}

.divseccioncursoright{
    margin-top: 20px;
    float: left;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.divseccioncursobtndocente{
    width: 25px;
    height: 25px;
    background-color: var(--color1);
    color: white;
    border-radius: 4px;
    transition: ease-in-out all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 21px;
}

.divseccioncursobtndocente:hover{
    background-color: rgb(237,50,55);
    cursor: pointer
}

.divseccioncursobottom{
    padding-bottom: 5px;
    height: auto;
    width: 294px;
    margin-left: 3px;
    background-color: white;
    border-radius: 0px 0px 3px 3px;
}

.divseccioncursolabelhorario{
    padding-top: 10px;
    padding-left: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    height: 25px;
    font-size: 13px;
    font-weight: bold;
}

.divbtnagregarcursohorario{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--color1);
    margin-left: auto;
    margin-right: 2.5px;
    height: 25px;
    width: 25px;
    font-size: 18px;
    border-radius: 3px;
    color: white;
    transition: ease-in-out all 0.3s;
}

.divbtnagregarcursohorario:hover{
    background-color: var(--color3);
    cursor: pointer
}

.contendorseccionhorario{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px 5px 5px 0px;
    margin-top: 20px;
    width: 100%;
    height: auto; 
}

#contendorestudianteseccionhorarioid{
    margin-top: 0px;
    padding: 0px;
    width: auto;
}

.noresultadoseccioncursohorario{
    width: 100%;
    margin: 30px auto;
    color: rgba(45,54,76,0.8);
    font-style: italic;
    font-family: sans-serif;
    font-size: 13px;
    text-align: center;
}

.divbtnagregarcursohorario{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: var(--color1);
    margin-left: auto;
    margin-right: 2.5px;
    height: 25px;
    width: 25px;
    font-size: 18px;
    border-radius: 3px;
    color: white;
    transition: ease-in-out all 0.3s;
}

.divbtnagregarcursohorario:hover{
    background-color: rgb(237,50,55);
    cursor: pointer;
}

.seccionhorariodia{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: rgb(74, 83 ,136);
    margin: 3px 0px 0px 3px;
    border-radius: 5px;
    width: 150px;
    height: auto;
    font-family: sans-serif;
    padding: 0px 5px 5px 5px;
}

.seccionhorariodiaest{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;;   
    width: 200px;
    height: auto;
    font-family: sans-serif;
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
    margin: 7px;
    overflow: hidden;
}

.seccionhorariodiatitulo{
    padding-top: 10px;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: white;
    font-size: 14px;
    font-weight: bold;
    border-color: rgba(255,255,255,0.4);
    border-width: 0px 0px 1px 0px;
    border-style: solid;
}

.seccionhorariodiatituloest{
    background-color: rgb(240, 98, 146);
    padding: 10px 5px 0px 5px;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: white;
    font-size: 14px;    
}

.seccionhorariodiacuerpo{
    width: 100%;
    height: auto;
}

.seccionhorariodiacuerpoest{
    padding: 0px 5px 5px 5px;
    width: 100%;
    height: auto;
}

.seccionhorariodiacurso{
    background-color: rgba(0,0,0,0.2);
    width:100%;
    height: 50px;
    margin-top: 5px;
    font-size: 12px;
    color:rgba(255,255,255,0.8);
}

.seccionhorariodiacursoest{
    border-style: solid;
    border-color: rgb(240, 98, 146); 
    border-width: 1px 0px 0px 0px;
    width:100%;
    height: 50px;
    margin-top: 5px;
    font-size: 12px;
    color: rgb(74,83,136);
}

#seccionhorariodiacursoest1{   
    border-width: 0px;    
    margin-top: 0px;
}

.seccionhorariodiacursonombre{    
    font-style: italic;
    margin-top: 1px;
    text-align: center;
    padding: 0px 3px;
    width:100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.seccionhorariodiacursonombreest{    
    font-style: italic;
    margin-top: 1px;
    text-align: center;
    padding: 0px 3px;
    width:100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(240, 98, 146); 
}

.seccionhorariodiacursohora{
    margin-top: 2px;
    padding: 0px 3px;
    width:100%;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.pantallaestudianteaulavirtualleft{
    padding-bottom: 20px;
    padding-top: 5px;
    padding-left: 5px;
    overflow-y: scroll;
    position: absolute;
    float: left;
    height: 100%;
    width: 200px;
    background-color: rgb(74, 83 ,136);
    transition: ease-in-out all 0.5s;
}

.btndocentemenu{
    user-select: none;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: fixed;
    left: 10px;
    bottom:10px;
    background-color: rgba(26,98,185,0.9);
    width: 45px;
    height: 45px;
    border-radius: 50%;  
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: ease-in-out all 1s;
}


.btndocentemenu:hover{
    cursor: pointer;
    background-color: rgba(26,98,185,1);
    color: rgba(255,255,255,1);
}

#btnmenuaulavirtual{
    background-color: rgba(241, 196, 15,0.8);
}

#btnmenuaulavirtual:hover{
    background-color: rgba(241, 196, 15,1);
}

#btnmenucalificaciones{
    background-color: rgba(194,176,218,0.8);
}

#btnmenucalificaciones:hover{
    background-color: rgba(194,176,218,1);
}

.contenedorseccionexamsemanal{
    background-color: transparent;
    margin: 0px auto;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    color: var(--color1);
    font-family: sans-serif;
}

.pantalladocente{
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

.pantalladocenteaulavirtualleft{
    overflow-y: scroll;
    position: absolute;
    float: left;
    height: 100%;
    width: 200px;
    background-color: rgb(74, 83 ,136);
    transition: ease-in-out all 0.5s;
}

.pantalladocenteaulavirtualright{  
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    margin-left: 200px;
    height: 100%;
    width: calc(100% - 200px);
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.5s;
}

.estudianteaulavirtualcursomenu{ 
    margin-top: 5px;
    color: rgba(255,255,255,0.8);
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: 30px;
    transition: ease-in-out all 0.5s;
}

.estudianteaulavirtualcursomenu:hover{    
    box-shadow: 0 0 8px rgba(241, 196, 15,0.7);
    cursor: pointer;   
}

.seccioncalificacionescursomenu{ 
    margin-top: 5px;
    color: rgba(255,255,255,0.8);
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: 30px;
    transition: ease-in-out all 0.5s;
}

.seccioncalificacionescursomenu:hover{    
    box-shadow: 0 0 8px rgba(194,176,218,0.7);
    cursor: pointer;   
}

.estudianteaulavirtualcursomenu2{ 
    margin-top: 5px;
    color: rgba(255,255,255,0.8);
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: 30px;
    transition: ease-in-out all 0.5s;
}

.estudianteaulavirtualcursomenu2:hover{    
    box-shadow: 0 0 8px rgba(255,255,255,0.7);
    cursor: pointer;   
}

.docenteaulavirtualcursomenuicono{
    float: left;
    width: 25px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 12px;
}

.estudianteaulavirtualactvidadpendienteleft{
    float: left;
    width: 25px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 20px;
}

.docenteaulavirtualcursomenutexto{
    font-size: 12px;
    float: left;
    width: calc(100% - 25px);
    height: 30px;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.estudianteaulavirtualactvidadpendienteright{
    font-size: 12px;
    float: left;
    width: calc(100% - 25px);
    height: 100%;
    display: flex;
    justify-content: center;
    text-align: left;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.pantallaestudianteaulavirtualright{  
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    margin-left: 200px;
    height: 100%;
    width: calc(100% - 200px);
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.5s;
}

.pantalladocenteaulavirtualrighticono{
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 100px;
    color: rgba(74, 83 ,136,0.6);
}

.pantalladocenteaulavirtualrighttexto{
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
    font-style: italic;
    color: rgba(74, 83 ,136,0.6);
}

.seccionaulavirtualpantalla{
    padding: 0px 0px 0px 5px;
    height: 100%;
    width: 100%;
}

.docenteaulavirtualpantallaencabezado{
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
    color: rgb(74, 83 ,136);
    width: 100%;
    height: 35px;
    background-color: rgb(241, 196, 15);    
}

.seccioncalificacionespantallaencabezado{
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
    color: rgb(74, 83 ,136);
    width: 100%;
    height: 35px;
    background-color: rgb(194,176,218);    
}

.docenteaulavirtualpantallaencabezado7{
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
    color: rgb(255,255,255);
    width: 100%;
    height: 35px;
    background-color: var(--color1);    
}

.docentecalificacionespantallaencabezado{
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
    color: rgb(255,255,255);
    width: 100%;
    height: 35px;
    background-color: rgb(194,176,218);    
}

.docenteaulavirtualpantallaencabezado8{
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
    color: var(--color1);
    width: 100%;
    height: 30px;        
}

.floatestudianteaulavirtual{
    border-radius: 3px;
    overflow-y: scroll;
    padding: 5px 0px 5px 5px;
    opacity: 0;
    pointer-events: none;
    transition: ease-in-out all 0.5s;
    position: absolute;
    top: 45px;
    right: 12px;
    height: auto;
    max-height: 350px;
    width: 270px;
    background-color: rgb(241, 196, 15);
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.6);
}

.floatestudianteaulavirtual2{
    border-radius: 3px;
    overflow-y: scroll;
    padding: 5px 0px 5px 5px;
    opacity: 0;
    pointer-events: none;
    transition: ease-in-out all 0.5s;
    position: absolute;
    top: 45px;
    right: 12px;
    height: auto;
    max-height: 350px;
    width: 270px;
    background-color: rgb(74, 83 ,136);
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.6);
}

.docenteaulavirtualpantallaencabezadoicono{
    float: left;
    height: 35px;
    width: 35px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallaencabezadoicono8{
    float: left;
    height: 30px;
    width: 30px;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallaencabezadotitulo{
    overflow: hidden;
    font-weight: bold;
    font-style: italic;
    float: left;
    height: 35px;
    width: calc(100% - 70px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallaencabezadotitulo2{
    overflow: hidden;
    font-weight: bold;
    font-style: italic;
    float: left;
    height: 35px;
    width: calc(100% - 35px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallaencabezadotitulo8{
    overflow: hidden;    
    float: left;
    height: 30px;
    width: calc(100% - 30px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallaencabezadotitulo2{
    overflow: hidden;
    font-weight: bold;
    font-style: italic;
    float: left;
    height: 35px;
    width: calc(100% - 105px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallaencabezadobtn{
    float: left;
    height: 35px;
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallabtncursos{
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 17px;
    border-radius: 50%;
    transition: ease-in-out all 0.5s;
}

.docenteaulavirtualpantallabtncursos:hover{
    box-shadow: 0 0 10px rgba(255,255,255,1);
    cursor: pointer;
    background-color: rgb(74, 83 ,136);
    color: white;  
}

.resultadoaulavirtual0{
    box-shadow: 0 0 5px rgba(255,255,255,0.3);
    background-color: rgba(0,0,0,0.2);
    height: auto;
    width: calc(100% - 5px);
    margin-left: 5px;
    margin-top: 5px;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 13px;
    font-family: sans-serif;
    font-style: italic;
    color: rgba(255,255,255,0.8);
}

.docenteaulavirtualpantallacuerpo{ 
    overflow-y: scroll;
    padding: 5px 0px 5px 5px;
    border-width: 0px 2px 2px 2px;
    border-style: solid;
    border-color: rgb(241, 196, 15);
    width: 100%;
    height: calc(100% - 35px);
}

.seccioncalificaionespantallacuerpo{ 
    overflow-y: scroll;
    padding: 5px 0px 5px 5px;
    border-width: 0px 2px 2px 2px;
    border-style: solid;
    border-color: rgb(194,176,218);
    width: 100%;
    height: calc(100% - 35px);
}

.docenteaulavirtualpantallacuerpo2{ 
    overflow-y: scroll;
    padding: 5px 0px 5px 5px;
    border-width: 0px 2px 2px 2px;
    border-style: solid;
    border-color: var(--color1);
    width: 100%;
    height: calc(100% - 35px);
}

.docentecalificacionespantallacuerpo{ 
    overflow-y: scroll;
    padding: 5px 0px 5px 5px;
    border-width: 0px 2px 2px 2px;
    border-style: solid;
    border-color: rgb(194,176,218); 
    width: 100%;
    height: calc(100% - 35px);
}

.centrarbox{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.header2{    
    top: 0px;
    position: fixed;
    z-index: 12;
    width: 100%;
    height: 50px;
    box-shadow: 0 0 7px rgba(0,0,0,0.5);
}

.contenedornombreie2{
    float: right;
    height: 50px;
    width: 100%;
    background-color: rgb(0,168,89);
}

.slogan1{
    float: left;
    font-family: 'freescpt';
    font-size: 30px;
    color: rgba(255,255,255,0.9);
    margin-left: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 105px);
    height: 50px;
}

.slogan2{
    float: left;
    font-family: 'freescpt';
    font-size: 30px;
    color: rgba(255,255,255,0.9);
    margin-left: 55px;
    display: none;
    justify-content: center;
    align-items: center;
    display: none;
    width: calc(100% - 105px);
    height: 50px;
}

.headersandwich{
    float: left;
    margin: auto;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-content: center;
}

#sandwich{
    width: 40px;
    height: 40px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: all 0.3s ease-in-out;
}

.btnsalirsistema{    
    border-radius: 50%;
    font-size: 16px;
    color: rgba(255,255,255,0.9);
    transition: all 0.3s ease-in-out;
}

#sandwich:hover{
    color: white;
    cursor: pointer;
}

.contenedorinsignia2{
    margin-top: -50px;
    float: left; 
    height: 50px;
    width: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    
}

.imginsignia{
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
    height: 45px;
    width: auto;
}

#contenedorloadingestudiante{
    z-index: 11;
    opacity:0;
    visibility: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    top: 0;
    left: 0;
    position: absolute;
    background-color: white;
    height: 100%;
    width: 100%;
}

#imgloading{
    width: 120px;
    height: auto;
}

#pantallaestudiante{    
    position: fixed;
    width: 200%;
    height: calc(100% - 50px);
    margin-top: 50px;
    transition: ease-in-out all 1s;
}

.docenteaulavirtualcontenedordatoscurso{
    overflow: hidden;
    width: 100%;
    height: 30px;
    border-width: 0px 0px 2px 0px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
}

.docenteaulavirtualcontenedornomcurso{
    float: left;
    height: 100%;
    width: 220px;
    background-color: rgb(74, 83 ,136);
    color: white;
    border-radius: 10px 10px 0px 0px;
}

.docenteaulavirtualcontenedornomcurso2{
    float: left;
    height: 100%;
    width: 280px;
    background-color: rgb(74, 83 ,136);
    color: white;
    border-radius: 10px 10px 0px 0px;
}


.docenteaulavirtualicononomcurso{
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height: 30px;
    width: 35px;
}

.docenteaulavirtualtextonomcurso{
    float: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;   
    padding-right: 5px;
    height: 30px;
    width: 185px;
    font-family: sans-serif;
    font-size: 12px;
    font-style: italic;
}

.docenteaulavirtualtextonomcurso2{
    float: left;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;   
    padding-right: 5px;
    height: 30px;
    width: 245px;
    font-family: sans-serif;
    font-size: 12px;
    font-style: italic;
}

.docenteaulavirtualcontenedorcursoclaseinsertar{
    overflow: hidden;
    margin-top: 5px;
    height: 25px;
    width: 100%;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodo{
    overflow: hidden;
    float: right;
    height: 100%;
    width: 115px;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodo2{    
    overflow: hidden;
    float: right;
    height: 30px;
    width: 115px;
    margin-right: 20px;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodo3{
    overflow: hidden;
    float: right;
    height: 30px;
    width: 130px;
    margin-right: 20px;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodo4{
    overflow: hidden;
    float: right;
    height: 30px;
    width: 180px;
    margin-right: 20px;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodo5{   
    overflow: hidden;
    float: right;
    height: 30px;
    width: 150px;
    margin-right: 20px;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodo6{    
    overflow: hidden;
    float: right;
    height: 30px;
    width: 135px;
    margin-right: 20px;
}

.docenteaulavirtualcontenedorcursoclaseinsertarbtn{
    color: white;
    border-radius: 3px;
    margin-right: 5px;
    margin-left: 5px;
    overflow: hidden;
    float: right;
    height: 100%;
    width: 25px;
    background-color: rgb(74, 83 ,136);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.3s;
    font-size: 15px;
}

.docenteaulavirtualcontenedorcursoclaseinsertarbtn:hover{
    cursor: pointer;
    color: rgb(74, 83 ,136);
    background-color: rgb(241, 196, 15); 
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodolabel{
    float: left;
    height: 100%;
    width: 65px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodolabel2{
    float: left;
    height: 100%;
    width: 65px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodolabel3{    
    float: left;
    height: 100%;
    width: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodolabel4{   
    float: left;
    height: 100%;
    width: 45px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodolabel5{   
    float: left;
    height: 100%;
    width: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodolabel6{   
    float: left;
    height: 100%;
    width: 25px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodoselect{    
    float: left;
    height: 100%;
    width: 45px;    
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodoselect2{
    margin-left: 5px;
    float: left;
    height: 100%;
    width: 45px;    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodoselect3{
    margin-left: 5px;
    float: left;
    height: 100%;
    width: 90px;    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodoselect4{
    margin-left: 5px;
    float: left;
    height: 100%;
    width: 130px;    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualcontenedorcursoclaseinsertarperiodoselect5{
    margin-left: 5px;
    float: left;
    height: 100%;
    width: 105px;    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.selectdocenteclasevirtualperiodo{ 
    margin-top: 2.5px;
    height: 20px;
    width: 45px;
    background-color: rgba(74, 83 ,136,0.1);
    border-radius: 3px;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
    outline: none;   
    text-align: center;
    border-width: 1px;
    border-color:rgb(74, 83 ,136); 
    border-style: solid;
    padding-left: 5px;
}

.optiondocenteclasevirtualperiodo{
    background-color: white;
    color: rgb(74, 83 ,136);
}

.docenteaulavirtualcontenedorclases{
    width: 100%;
    height: auto;
    padding: 5px 0px;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.candclases0{
    margin-top: 5px;
    width: 100%;
    text-align: center;
    font-family: sans-serif;
    font-size: 13px;
    font-style: italic;
    font-weight: bold;
    color: rgb(74, 83 ,136);
}

.examsemanalperiodotitulo2{
    font-family: sans-serif;
    padding-bottom: 0px;
    padding-top: 5px;
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    width: 100%;
    height: auto;
    text-decoration: underline;
    color: rgb(74, 83 ,136);
}


.docenteaulavirtualclase{
    margin: 5px;
    transition: ease-in-out all 0.3s;
    height: 50px;
    width: 50px;
    background-color: rgb(74, 83 ,136);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 25px;
    color: white;
    border-radius: 3px;
    font-family: sans-serif;
}

.docenteaulavirtualclase:hover{
    cursor: pointer;
    color: rgb(74, 83 ,136);
    background-color: rgb(241, 196, 15);
}

.docenteexamenexam{
    margin: 5px;
    transition: ease-in-out all 0.3s;
    height: 50px;
    width: 50px;
    background-color: rgb(74, 83 ,136);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 25px;
    color: white;
    border-radius: 3px;
    font-family: sans-serif;
}

.docenteexamenexam:hover{
    cursor: pointer;
    color: white;
    background-color: var(--color1);
}

.docenteaulavirtualclaseicono{  
    padding-top: 5px;
    height: 30px;
    width: 50px;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docentecalificacionesperiodoicono{  
    padding-top: 5px;
    height: 30px;
    width: 100%;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualclasenum{
    height: 20px;
    width: 50px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-weight: bold;
}

.aulavirtualclasedatostitulo{
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    width: 100%;
    height: 15px;
    background-color: rgb(74, 83 ,136);
}

.aulavirtualclasedatostitulo2{
    margin-top: 10px;
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    width: 100%;
    height: 15px;
    background-color: rgb(74, 83 ,136);
}

.aulavirtualclasedatostituloleft{
    border-bottom-right-radius: 8px;
    float: left;
    width: 120px;
    height: 28px;
    background-color: rgb(74, 83 ,136);
    color: rgb(241, 196, 15);
}

.aulavirtualclasedatostituloicono{
    padding-left: 5px;
    float: left;
    height: 25px;
    width: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 14px;    
}

.aulavirtualclasedatostitulotexto{
    padding-left: 5px;
    font-family: sans-serif;
    float: left;
    height: 25px;
    width: calc(100% - 25px);   
    font-size: 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap; 
    font-weight: bold;
}

.aulavirtualclasedatostituloright{   
    border-top-left-radius: 8px;
    float: left;
    width: calc(100% - 120px);
    height: 28px;
    background-color: white;
}

.aulavirtualclasedatosbtneliminar{
    float: left;
    border-radius: 5px;
    margin-top: 3px;
    margin-left: 3px;
    width: 25px;
    height: 25px;
    background-color: rgb(74, 83 ,136);
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.3s;
}

.aulavirtualclasedatosbtneliminar:hover{
    cursor: pointer;
    color: rgb(74, 83 ,136);
    background-color: rgb(241, 196, 15);    
}

.docenteaulavirtualclasearchivos{    
    overflow: hidden;
    margin: 20px auto auto auto;
    width: 100%;
    padding: 5px;
    max-width: 400px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border-radius: 5px;
}

.docenteaulavirtualclaselabel{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 5px;
    padding-top: 5px;
    padding-left: 5px;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: rgb(74, 83 ,136);
}

#docenteaulavirtualclasetema{
    height: auto;
    margin-top: 30px;
}

#docenteaulavirtualclasevideo{
}

.docenteaulavirtualclasearchivostxt{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    height: 40px;
    width: calc(100% - 40px);
    max-width: 400px;
}

#estudianteulavirtualclasearchivosmaterialfile{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    float: left;
    height: 40px;
    width: calc(100% - 40px);
}

.contenedordatesaulavirtualclasematerial{
    padding-left: 5px;
    float: left;
    width: 100%;
    height: auto;
}

.txtclasetema{
    margin-left: 5px;
    outline: none;
    width: calc(100% - 5px);
    height: 30px;
    padding-left: 3px;
    padding-right: 3px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    border-color: rgb(74, 83 ,136);
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    font-family: sans-serif;
    font-size: 13px;
}

.txtclasetema::placeholder{
    color: rgba(74, 83 ,136,0.6);
}

.txtclasetema:focus{
    box-shadow: 0 0 5px rgba(241, 196, 15,0.7);
}

.docenteaulavirtualclasearchivosbtn{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
    height: 30px;
    width: 30px;
    max-width: 400px;
    background-color: rgb(74, 83 ,136);
    border-radius: 3px;
    transition: ease-in-out all 0.3s;
}

.docenteaulavirtualclasearchivosbtn:hover{
    cursor: pointer;
    color: rgb(74, 83 ,136);
    background-color: rgb(241, 196, 15);
}

.estudianteaulavirtualclasetoolsbtn{
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-left: 5px;
    float: left;
    height: 30px;
    width: 30px;
    max-width: 400px;
    background-color: rgb(74, 83 ,136);
    border-radius: 3px;
    transition: ease-in-out all 0.3s;
}

.estudianteaulavirtualclasetoolsbtn:hover{
    cursor: pointer;
    color: rgb(74, 83 ,136);
    background-color: rgb(241, 196, 15);
}

.docenteaulavirtualclasecontenedorvideo{
    padding: 5px 0px;
    width: 100%;
    margin-top: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualclasecontenedorvideo2{
    padding: 5px 0px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualclaseiframevideo{
    float: left;
    margin-left: 5px;
    max-width: 395px;
    width: calc(100% - 45px);
    height: 270px;    
    box-shadow: 0 0 10px rgba(74, 83 ,136,0.7);
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    border-width: 5px;
}

.contenedoraulavirtualclasecontenido3{
    margin: auto;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    background-color: rgb(74, 83 ,136);
    border-width: 2px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    margin-top: 10px;
    max-width: 100%;
    width: 400px;
    height: 94px; 
    border-radius: 5px;
    overflow: hidden;
}

.contenedoraulavirtualclasecontenido4{
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    background-color: rgb(74, 83 ,136);
    border-width: 2px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    margin: 20px auto auto auto;
    width: 100%;
    max-width: 400px;
    height: 74px; 
    border-radius: 5px;
    overflow: hidden;
}

#contenedoraulavirtualclasecontenidoactividadplazo{
    background-color: rgb(74, 83 ,136);
    border-width: 2px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    margin-top: 10px;
    max-width: 100%;
    width: 400px;
    height: 102px; 
    border-radius: 5px;
    overflow: hidden;
}

.contenedoraulavirtualclasecontenido3titulo{
    width: 100%;
    height: 30px;    
    color: white;
}

.contenedoraulavirtualclasecontenido3icono{
    padding-left: 2px;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedoraulavirtualclasecontenido3texto{
    padding-left: 5px;
    float: left;
    width: calc(100% - 30px);
    height: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
    font-size: 13px;
}

.contenedoraulavirtualclasecontenido4cuerpo{
    width: 100%;
    height: 40px;    
    background-color: white;
    border-radius: 0px 0px 3px 3px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#contenedoraulavirtualclasecontenido3cuerpoplazo{
    width: 100%;
    height: calc(100% - 30px);    
    background-color: white;
    border-radius: 0px 0px 3px 3px;
}

.contenedoraulavirtualclasecontenido3cuerpoleft{
    float: left;
    height: 100%;
    width: calc(100% - 36px);
}

.contenedoraulavirtualclasecontenido3cuerpolefttop{
    height: 30px;
    width: 100%;
}

.contenedoraulavirtualclasecontenido3cuerpohorario{
    color: rgb(74, 83 ,136);
    overflow: hidden;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
}

#contenedoraulavirtualclasecontenido3cuerpohorarioactividadfecha{
    float: left;
    color: rgb(74, 83 ,136);
    overflow: hidden;
    width: 50%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
}

#contenedoraulavirtualclasecontenido3cuerpohorarioactividadhora{
    float: left;
    color: rgb(74, 83 ,136);
    overflow: hidden;
    width: 50%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
}

.contenedoraulavirtualclasecontenido3cuerpohorarioicono{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
    font-size: 15px;
    width: 25px;
    height: 25px;
}

.contenedoraulavirtualclasecontenido3cuerpohorarioicono2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
    font-size: 13px;
    width: 25px;
    height: 25px;
    font-weight: bolder;
}

.contenedoraulavirtualclasecontenido3cuerpohorariodatetime{
    padding-left: 0px;
    width: calc(100% - 25px);
    height: 25px;
    font-family: sans-serif;
    font-size: 13px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
}

.fontsizeless{
    font-size: 13px;
    font-weight: bold;
}

.actividadplazoarchivo{
    width: 30px;
    height: calc(100% - 6px);
    margin-top: 3px;
    margin-left: 3px;
    color: rgba(74, 83 ,136,0.6);
    background-color: rgba(74, 83 ,136,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    font-weight: bold;
    border-bottom-right-radius: 3px;
}


.actividadplazoarchivo2{
    margin-top: 3px;
    margin-left: 3px;
    width: 30px;
    height: calc(100% - 6px);
    color: white;
    background-color: rgb(74, 83 ,136);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    font-weight: bold;
    border-bottom-right-radius: 3px;
    transition: ease-in-out all 0.3s;
}

.actividadplazoarchivo2:hover{
    cursor: pointer;
    background-color: rgb(241, 196, 15);
    color: rgb(74, 83 ,136);
}

.contenedoraulavirtualclasecontenido3cuerpoleftbottom{
    height: calc(100% - 30px);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedoraulavirtualclasecontenido3cuerporight{
    position: relative;
    float: left;
    height: 100%;
    width:36px;
}

.estudianteaulavirtualclasebtnzoom{
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom-right-radius: 3px;
    margin-left: 3px;    
    float: left;
    height: calc(100% - 6px);
    width: 30px;    
    background-color: rgb(74, 83 ,136);
    overflow: hidden;
    transition: ease-in-out all 0.3s;
}

.estudianteaulavirtualclasebtnzoom:hover{
    cursor: pointer;
    background-color: rgb(241, 196, 15);
    color: rgb(74, 83 ,136);
}

.estudianteaulavirtualclasebtnzoomiconoplazo{
    font-family: sans-serif;
    margin: auto;
    font-size: 25px;
}

.estudianteaulavirtualclasebtnzoomicono{
    margin: auto;
    font-size: 20px;
}

.estudianteaulavirtualclasebtnzoomtexto{
    margin: auto;
    font-size: 10px;
    font-family: sans-serif;
}

.examsempreguntaimggifloading{
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: absolute;
    background-color: white;
}

#estudianarchivoimggifloadingid{
    width: 35px;
    margin-top: -65px;    
    position: absolute;
}

#imgloadingexamsempreguntaimg{
    height: 50px;
    width: auto;    
}

#imgloadingactividadplazoimg{
    height: 30px;
    width: auto;    
}

.contenedoraulavirtualclasecontenido3cuerpodiv{
    padding-right: 3px; 
    float: left;
    width: 50%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    font-family: sans-serif;
    font-size: 13px;
}

.estudianteaulavirtualclaseinfozoom{
    overflow: hidden;
    float: left;
    height: 100%;
    width: calc(100% - 33px);
}

.estudianteaulavirtualclasebtnzoom{
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom-right-radius: 3px;
    margin-left: 3px;    
    float: left;
    height: calc(100% - 6px);
    width: 30px;    
    background-color: rgb(74, 83 ,136);
    overflow: hidden;
    transition: ease-in-out all 0.3s;
}

.estudianteaulavirtualclasebtnzoom:hover{
    cursor: pointer;
    background-color: rgb(241, 196, 15);
    color: rgb(74, 83 ,136);
}

#fileclasematerialid{
    margin-left: 5px;
    color: rgb(74, 83 ,136);
    overflow: hidden;
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    height: 30px;
    width: 100%;
    border-width: 1px;
    border-color: rgb(74, 83 ,136);
    border-style: solid;
    background-color: white;
    outline: none;
}

#fileclaseactividadid{
    margin-left: 5px;
    color: rgb(74, 83 ,136);
    overflow: hidden;
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    height: 30px;
    width: 100%;
    border-width: 1px;
    border-color: rgb(74, 83 ,136);
    border-style: solid;
    background-color: white;
    outline: none;
}

#fileclaseactividadestudianteid{
    margin-left: 5px;
    color: rgb(74, 83 ,136);
    overflow: hidden;
    padding-top: 3px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 3px;
    height: 30px;
    width: 100%;
    border-width: 1px;
    border-color: rgb(74, 83 ,136);
    border-style: solid;
    background-color: white;
    outline: none;
}

#docenteaulavirtualclasearchivosmaterialbarra{
    margin-top: 0px;
    width: 100%;
}

.barra_inicial{
    display: none;
    overflow: hidden;
    width: 100%;
    max-width: 395px;
    height: 30px;
    text-align: center;
    transition: ease-in-out all 0.5s;
    pointer-events: none;
    opacity: 0;
}

#imgloadingupload{
    width: auto;
    height: 30px;
}

.docenteaulavirtualclaseiframepdf{
    float: left;
    margin-left: 5px;
    max-width: 210px;
    width: calc(100% - 45px);
    height: 290px;    
    box-shadow: 0 0 10px rgba(74, 83 ,136,0.7);
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    border-width: 5px;
}

.docenteaulavirtualclaseiframepdf:hover{
    cursor: pointer;    
    box-shadow: 0 0 10px rgba(241, 196, 15,0.7);
}

.contenedordatesaulavirtualclasematerial{
    padding-left: 5px;
    float: left;
    width: 100%;
    height: auto;
}

#docenteaulavirtualclasearchivostxttemaidedit{
    width: calc(100% - 75px);
}

#docenteaulavirtualclasearchivostxtvideoidedit{
    width: calc(100% - 75px);
}

#docenteaulavirtualclasearchivosmaterialfileedit{
    width: calc(100% - 75px);
}

#formestudianteaulavirtualclaseactividad{
    height: 40px;
    width: 100%
}

.timedocenteaulavirtualclasevivo{
    margin-top: 5px;
    margin-bottom: 7px;
    width: 100%;
    max-width: 150px;
    outline: none;
    height: 30px;
    padding-left: 3px;
    padding-right: 3px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: white;
    border-radius: 3px; 
    border-width: 0px;
    font-family: sans-serif;
    font-size: 13px;
    background-color: rgb(74, 83 ,136);
}

.contenedordocenteaulavirtualclaseclasevivoright{
    float: left;
    width: 40px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedordocenteaulavirtualclaseclasevivo{
    width: 100%;
    max-width: 440px;
    height: 190px;
}

.contenedordocenteaulavirtualclaseclasevivoleft{
    padding-left: 5px;
    padding-top: 5px;
    float: left;
    width: calc(100% - 40px);
    height: 100%;
}

.txtdocenteaulavirtualclasevivo{
    margin-top: 5px;
    margin-bottom: 7px;
    width: 100%;
    max-width: 250px;
    outline: none;
    height: 30px;
    padding-left: 3px;
    padding-right: 3px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: rgb(74, 83 ,136);
    border-color: rgb(74, 83 ,136);
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    font-family: sans-serif;
    font-size: 13px;
}

.txtdocenteaulavirtualclasevivo::placeholder{
    color: rgba(74, 83 ,136,0.6);
}

.txtdocenteaulavirtualclasevivo:focus{
    box-shadow: 0 0 5px rgba(241, 196, 15,0.7);
}

#btnmenuhorariocursos{
   background-color: rgba(240, 98, 146,0.8);
}

#btnmenuhorariocursos:hover{
    background-color: rgba(240, 98, 146,1);
}

.contenedorestudiantecurso{
    position: relative;
    overflow: hidden;
    width: 220px;
    height: auto;    
    border-radius: 5px;
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
    margin: 7px;
}

.contenedorestudiantecursotop{
    padding: 5px;
    background-color: rgb(240, 98, 146);
    width: 100%;
    height: 80px;    
}

.contenedorestudiantecursonombre{
    text-align: center;
    height: 35px;
    width: 100%;
    font-family: sans-serif;
    font-size: 14px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedorestudiantecursobottom{
    padding: 5px;
    width: 100%;
    height: auto;
    background-color: white;    
}

.vacacionalgrupobottom{
    padding: 5px;
    width: 100%;
    height: auto;
    min-height: 50px;
    background-color: white;    
}

.contenedorestudiantecursocirculo{
    box-shadow: 0 0 3px rgba(0,0,0,0.6);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    margin-left: 70px;
    margin-top: 40px;
    position: absolute;
    background-color: rgb(253,239,244);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 35px;
    color: rgb(240, 98, 146);
}

.contenedorestudiantecursodocente{   
    min-height: 30px;
    height: auto;
    width: 100%;
    color: rgb(74,83,136);
}

#contenedorestudiantecursodocentefirst{    
    margin-top: 35px;
    height: 35px;
}

#contenedorestudiantecursodocentehorario{
    height: 30px;
    color: rgb(240, 98, 146);
}    

#contenedorestudiantecursodocentelast{
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgb(240, 98, 146);
}

.contenedorestudiantecursodocenteicono{ 
    float: left;
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 15px;    
}

.contenedorestudiantecursodocentenombre{
    height: 100%;
    width: calc(100% - 30px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 12px;    
    font-family: sans-serif;
    font-style: italic;
}

.contenedorestudiantecursodocenteleft{
    float: left;
    height: 25px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 15px;    
}

#contenedorestudiantecursodocenteleftdia{
    width: 40px;
    font-family: sans-serif;
    font-size: 12px;
    color: rgb(240, 98, 146);
}

.contenedorestudiantecursodocenteright{
    float: left;
    height: 25px;
    width: calc(100% - 30px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 12px;    
    font-family: sans-serif;
    font-style: italic;
}

#contenedorestudiantecursodocenterighthora{
    width: calc(100% - 40px);
    font-family: sans-serif;
    font-size: 12px;
}

.resultadoaulavirtualactividad0{        
    height: auto;
    width: 100%;    
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 13px;
    font-family: sans-serif;
    font-style: italic;
    color: rgb(74, 83 ,136);
}

.resultadoaulavirtualactividad01{        
    height: auto;
    width: 100%;    
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 13px;
    font-family: sans-serif;
    font-style: italic;
    color: white;
}

.estudianteaulavirtualactvidadpendiente{ 
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    color: rgb(74, 83 ,136);
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: 40px;
    transition: ease-in-out all 0.5s;
}

.estudianteaulavirtualactvidadpendiente:hover{    
    color: white;
    cursor: pointer;
    background-color: rgb(74, 83 ,136);
}

#estudianteaulavirtualactvidadpendienteid{    
    border-width: 0px;
}

.estudianteaulavirtualactvidadpendienterighttop{
    padding-left: 5px;
    padding-top: 4px;
    font-weight: bold;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.estudianteaulavirtualactvidadpendienterighttop2{
    padding-left: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.estudianteaulavirtualactvidadpendienterightbottom{
    padding-bottom: 4px;
    padding-right: 5px;
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: flex-end;
    text-align: left;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.estudianteaulavirtualclaseenvivodia{ 
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: 40px;
    transition: ease-in-out all 0.3s;
}

.estudianteaulavirtualclaseenvivodia:hover{   
    cursor: pointer;
    color: rgb(241, 196, 15);
}

#estudianteaulavirtualclaseenvivodiaid{    
    border-width: 0px;
}

.estudianteaulavirtualclaseenvivodia2{ 
    border-width: 1px 0px 0px 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.3);
    color: white;
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: auto;
    transition: ease-in-out all 0.5s;
}

.estudianteaulavirtualclaseenvivodia2:hover{   
    cursor: pointer;
    background-color: rgb(194,176,218);
}

#aulavirtualclasedatostitulorightidestudiante{
    font-weight: bold;    
    padding-left: 5px;
    padding-top: 5px;
    font-family: 'comic';
    font-size: 12px;
    color: rgb(74, 83 ,136);
}

.contenedoraulavirtualclasecontenido{
    margin-top: 25px;
    width: 100%;
    height: auto;  
    text-align: center;
}

.contenedoraulavirtualclasecontenido1{
    margin: auto;
    border-radius: 5px;
    overflow: hidden;
    max-width: 100%;
    width: 400px;
    height: 200px;   
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.estudianteiframevideo{
    float: left;
    height: 200px;
    width: calc(100% - 40px);
}

.estudianteyoutubevideo{
    float: left;
    height: 200px;
    width: 40px;
    background-color: rgb(74, 83 ,136);
    color: white;
    transition: ease-in-out all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 25px;
}

.estudianteyoutubevideo:hover{
    cursor: pointer;
    background-color: rgb(241, 196, 15);
    color: rgb(74, 83 ,136);    
}

.contenedoraulavirtualclasecontenido2{
    margin: auto;
    margin-top: 10px;
    max-width: 100%;
    width: 400px;
    height: 80px;  
}

.contenedoraulavirtualclasecontenido2material{
    border-radius: 5px;
    overflow: hidden;
    color: white;
    float: left;
    height: 100%;
    width: calc(50% - 5px);
    background-color: rgb(74, 83 ,136); 
    transition: ease-in-out all 0.3s;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.contenedoraulavirtualclasecontenido2material:hover{
    cursor: pointer;
    background-color: rgb(241, 196, 15);
    color: rgb(74, 83 ,136);
}

.contenedoraulavirtualclasecontenido2vacio{    
    float: left;
    height: 100%;
    width: 10px;
}

.contenedoraulavirtualclasecontenido2actividad{
    border-radius: 5px;
    overflow: hidden;
    color: white;
    float: left;
    height: 100%;
    width: calc(50% - 5px);
    background-color: rgb(74, 83 ,136); 
    transition: ease-in-out all 0.3s;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.contenedoraulavirtualclasecontenido2actividad:hover{
    cursor: pointer;
    background-color: rgb(241, 196, 15);
    color: rgb(74, 83 ,136);
}

.contenedoraulavirtualclasecontenido2materialicono{    
    padding-top: 5px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 35px;    
}

.contenedoraulavirtualclasecontenido3cuerpo{
    width: 100%;
    height: 60px;    
    background-color: white;
    border-radius: 0px 0px 3px 3px;
}

.contenedoraulavirtualclasecontenido4cuerpo{
    width: 100%;
    height: 40px;    
    background-color: white;
    border-radius: 0px 0px 3px 3px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedoraulavirtualclasecontenido2materialtexto{    
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;  
    font-family: sans-serif;
    font-size: 13px;
}

#contenedorpantallaemergente{
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(45,54,76,0.8);
    top: 0;
    right: 0;
    transition: ease-in-out all 1s;
}

#contenedorventanaemergenteestudiante{
    z-index: 10;
    position: fixed;
    height: calc(100% - 95px);
    width: calc(100% - 30px);
    background-color: rgb(45,54,76);    
    top: 0;
    right: 0;
    margin-right: 15px;
    margin-top: 75px;
    border-width: 5px;
    border-style: solid;
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
    border-radius: 15px;
    border-color: var(--color1);
    transition: ease-in-out all 1s;
    padding: 15px;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#btncerrarventanaemergenteestudiante{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    z-index: 11;
    position: fixed;
    height: 30px;
    width: 30px;
    background-color: var(--color1);
    top: 0;
    right: 0;
    margin-right: 5px;
    margin-top: 65px;
    box-shadow: 0 0 15px rgba(255,255,255,0.3);
    border-radius: 50%;
    border-color: rgb(179,164,238);
    transition: ease-in-out all 1s;
    font-size: 16px;
}

#btncerrarventanaemergenteestudiante:hover{
    color: var(--color3);
    cursor: pointer;
}

#btncerrarventanaemergenteestudiante2{
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255,255,255,0.8);
    z-index: 11;
    position: fixed;
    height: 30px;
    width: 30px;    
    top: 0;
    right: 0;
    margin-right: 30px;
    margin-top: 90px;    
    border-radius: 50%;
    border-color: rgb(179,164,238);
    transition: ease-in-out all 0.5s;
    font-size: 20px;
}

#btncerrarventanaemergenteestudiante2:hover{
    color: var(--color3);
    cursor: pointer;
    transform: rotate(360deg);  
    box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.examsempreguntaimgdiv{
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: scroll;
}

.examsempreguntaimgdiv2{
    text-align: center;
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    overflow-y: scroll;        
}

.imgminexamsempreguntaimgfull{ 
    margin: auto;
    width: auto;
    max-width: 1200px;
    height: auto;
}

.estudianteactividadiframepdf{
    width: 100%;
    height: 100%;
    border-width: 0px;
    border-radius: 10px;
}

.cumplebtn:hover{
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.7); 
    background-color: rgb(237,50,55);
}

.cumplebottom{    
    margin-top: 50px;
    width: 100%;
    height: calc(100% - 55px);
}

#contenedorloadingprincipal{
    opacity:0;
    visibility: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    top: 0;
    left: 0;
    position: absolute;
    background-color: white;
    height: 100%;
    width: 100%;
}

.seccionasistenciaclaseseleccionar{
    margin: 5px;
    transition: ease-in-out all 0.3s;
    height: 50px;
    width: 100px;
    background-color: rgb(74, 83 ,136);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 25px;
    color: white;
    border-radius: 3px;
    font-family: 'comic';
}

.seccionasistenciaclaseseleccionar:hover{
    cursor: pointer;
    color: rgb(74, 83 ,136);
    background-color: rgb(241, 196, 15);
}

.seccionasistenciaclaseseleccionaricono{
    padding-top: 5px;
    height: 30px;
    width: 22px;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.seccionasistenciaclaseseleccionarnum{
    padding-top: 3px;
    height: 30px;
    width: 30px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.seccionasistenciaclaseseleccionarfecha{
    height: 20px;
    width: 100px;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualcursomenu2{    
    color: white;
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: 30px;
    margin-top: 0px;
    transition: ease-in-out all 0.5s;
}

.docenteaulavirtualcursomenu2:hover{   
    cursor: pointer;
    background-color: rgb(74, 83 ,136);
    box-shadow: 0 0 5px rgba(255,255,255,0.6)
}

.docentecalificacionesperiodo{
    margin: 5px;
    transition: ease-in-out all 0.3s;
    height: 50px;
    width: 100px;
    background-color: rgb(74, 83 ,136);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 25px;
    color: white;
    border-radius: 3px;
    font-family: sans-serif;
}

.docentecalificacionesperiodo:hover{
    cursor: pointer;
    box-shadow: 0 0 7px rgba(74, 83 ,136,0.7);
}

.docentecalificacionesperiodoicono{  
    padding-top: 5px;
    height: 30px;
    width: 100%;
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docentecalificacionesperiodonom{
    height: 20px;
    width: 100%;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

@media screen and (max-width: 900px){   
    
    .pagination{        
        display: none;       
    } 
    
    .pantallasliderleftcontenedorimg{        
        border-width: 2px;
    }
    
    .pantallasliderleft{
        width: 140px;
    }
    
    .pantallasliderrigth{        
        width: calc(100% - 140px);
    }
    
    .pantallasliderrigthimg{        
        border-width: 4px;        
    }
}

@media screen and (max-width: 602px){
    .pantallasliderleft{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        margin-left: 10px;
        float: none;
        width: calc(100% - 20px);
        height: 110px;
        overflow-x: scroll;
        border-width: 0px 0px 1px 0px;
    }
    
    .pantallasliderleftcontenedorimg{        
        width: 120px; 
        margin: 10px;
    }
       
    
    .pantallasliderrigth{
        margin: 0px;
        float: none;
        width: 100%;
        height: calc(100% - 110px);
    }   
    
    .pantallasliderrigthcontenedorimg{
        text-align: center;
        margin: auto;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    .pantallasliderrigthcontenedorimgleft{ 
        margin-top: 20px;
        float: none;
        height: auto;
        width: 100%;
    }

    .pantallasliderrigthimg{
        width: 100%;        
    }

    .pantallasliderrigthcontenedorimgrigth{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;  
        float: left;
        height: 40px;
        width: 100%;
    }

    .pantallasliderrigthcontenedorimgrigthoptions{    
        width: 100%; 
    }

    .contenedoroptionsimgslider{
        margin: 15px 10px;
    }
}

.docenteaulavirtualpantalla{
    padding: 0px 0px 0px 5px;
    height: 100%;
    width: 100%;
}

.floatdocenteaulavirtual{
    padding: 5px;
    opacity: 0;
    pointer-events: none;
    transition: ease-in-out all 0.5s;
    position: absolute;
    top: 45px;
    right: 12px;
    height: auto;
    width: 210px;
    background-color: rgb(241, 196, 15);
    z-index: 10;
}

.floatdocenteaulavirtual2{
    padding: 5px;
    opacity: 0;
    pointer-events: none;
    transition: ease-in-out all 0.5s;
    position: absolute;
    top: 45px;
    right: 12px;
    height: auto;
    width: 210px;
    background-color: var(--color1);
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.6);
}

.floatdocentecalificaciones{
    padding: 5px;
    opacity: 0;
    pointer-events: none;
    transition: ease-in-out all 0.5s;
    position: absolute;
    top: 45px;
    right: 12px;
    height: auto;
    width: 210px;
    background-color: rgb(194,176,218); 
    z-index: 10;
    box-shadow: 0 0 5px rgba(0,0,0,0.6);
}

.docenteaulavirtualcursomenu{    
    color: rgb(74, 83 ,136);
    width: 100%;
    font-family: sans-serif;
    font-style: italic;
    font-size: 13px;
    height: 30px;
    margin-top: 0px;
    transition: ease-in-out all 0.5s;
}

.docenteaulavirtualcursomenu:hover{    
    color: white;
    cursor: pointer;
    background-color: rgb(74, 83 ,136);
}

@media screen and (max-width: 450px){
    
    .headermenu{        
        width: calc(100% - 180px);   
    }       
    
    .arrowleft{
        display: none;
    }

    .arrowright{
        display: none;
    }
    
    .contenedornoticiaindividualimagen{
        height: 300px; 
    }
}


@media screen and (max-width: 390px){   
    #headerid{        
        height: 70px;
    }
    
    .headerlogo{        
        width: 150px; 
    }

    .headerlogoleft{       
        width: 70px;        
    }

    #imglogoheader{
        height: 60px;
    }

    .headerlogoright{        
        width: calc(100% - 70px);        
    }   
    
    .headermenu{        
        width: calc(100% - 150px);    
    }
    
    .realselogoheader{
        font-size: 18px;
    }
    
    .itemnav{
        width: 40px;
    }
    
    .fontsize15{
        display: none;
    }
    
    .itembottom{
        display: none;
    }
        
    .contenedorslider{
        margin-top: 70px;
    }
    
    .contenedorcomunicadoemergentefecha{
        font-size: 13px;
    }
    
    .contenedorcomunicadoemergentetitulo{
        font-size: 30px;
    }
    
    .imgcomunicadofondoemergente{        
        height: 50px;
    }
    
    .contenedorcomunicadoemergenteparrafo{
        font-size: 13px;
    }
    
    .contenedorcomunicadoemergentetiutloarchivo{
        font-size: 12px;        
    }
    
    .contenedornoticiaindividualimagen{
        height: 250px; 
    }
}

#pantallaestudianteleft{
    position: relative;
    transition: ease-in-out all 1s;
    padding: 15px;
    overflow-y: scroll;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-auto-rows: 150px;
    grid-gap: 15px;
    float: left;
    width: 50%;
    height: calc(100% - 25px);
    margin-top: 10px;
    margin-left: 0;
}

.boxitempantallaestudianteleft{
    display: grid;
    gap:5px;
    grid-templates-rows: repeat(5,1fr);
    border-radius: 5px;
    padding: 10px;
    background-color: blueviolet;
    text-align: center;
    color: white;
    cursor: pointer;
    transition: ease-in-out all 0.4s;
}

.boxitempantallaestudianteleft:hover{
    box-shadow: 0 0 10px rgba(0,0,0,0.6);    
}

#boxitempantallaestudianteleft1{
    grid-row: 1/3;    
    grid-template-rows: repeat(2,1fr);
    gap:10px;    
    background-color: rgb(74, 83 ,136);    
}

#boxitempantallaestudianteleft2{ 
    background-color: rgb(237,50,55);
}

#boxitempantallaestudianteleft2:hover>.textoboxitempantallaestudianteleft{
   background-color: rgba(0,0,0,0.1);   
}

#boxitempantallaestudianteleft9{ 
    background-color: rgb(52, 152, 219);
}

#boxitempantallaestudianteleft9:hover>.textoboxitempantallaestudianteleft{
   background-color: rgba(0,0,0,0.1);   
}

#boxitempantallaestudianteleft3{ 
    background-color: rgb(240, 98, 146);
}

#boxitempantallaestudianteleft3:hover>.textoboxitempantallaestudianteleft{
    background-color: rgba(0,0,0,0.1);    
}

#boxitempantallaestudianteleft4{ 
    background-color: rgb(194,176,218);
}

#boxitempantallaestudianteleft4:hover>.textoboxitempantallaestudianteleft{
    background-color: rgba(0,0,0,0.1);
}

#boxitempantallaestudianteleft5{ 
    background-color: rgb(22, 160, 133);
}

#boxitempantallaestudianteleft5:hover>.textoboxitempantallaestudianteleft{
    background-color: rgba(0,0,0,0.1);
}

#boxitempantallaestudianteleft6{ 
    background-color: rgb(241, 196, 15);
}

#boxitempantallaestudianteleft6:hover>.textoboxitempantallaestudianteleft{
    background-color: rgba(0,0,0,0.1);
}

#boxitempantallaestudianteleft7{ 
    background-color: rgb(26,98,185);
}

#boxitempantallaestudianteleft7:hover>.textoboxitempantallaestudianteleft{
    background-color: rgba(0,0,0,0.1);
}

#boxitempantallaestudianteleft8{ 
    background-color: rgb(125,84,181);
}

#boxitempantallaestudianteleft8:hover>.textoboxitempantallaestudianteleft{
    background-color: rgba(0,0,0,0.1);
}

#itempantallaestudianteleft1id1{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.contenedorimagenestudiante{
    background-color: white;
    margin: auto;
    height: 130px;
    width: 130px;
    border-radius: 50%;
    overflow: hidden;    
}

.imgestudiante{
    width: 100%;
    height: auto;
}

#itempantallaestudianteleft1id2{
    overflow: hidden;
    text-align: left; 
    font-family: sans-serif;
    font-size: 13px;
    display: grid;
    grid-auto-rows: 1fr;
}

.textorowitempantallaestudianteleft1id2_1{
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#rowitempantallaestudianteleft1id2_1{
    grid-row: 1/3;
}

.itemboxitempantallaestudianteleft{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    font-family: sans-serif;
    font-size: 15px;
}

.iconoboxitempantallaestudianteleft{
    transition: ease-in-out all 0.5s;
    font-size: 50px;
    grid-row: 1/5;
}

.textoboxitempantallaestudianteleft{
    border-radius: 3px;
    transition: ease-in-out all 0.4s;
    font-family: 'comic';
}

#pantallaestudianteright{
    padding: 15px 6px;
    background-color: transparent;
    position: relative;
    transition: ease-in-out all 1s;
    float: left;
    width: 50%;
    height: calc(100% - 25px);
    margin-top: 10px;
    overflow-y: scroll;
}

#contenedorsistemaestudianteasistencia{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(30,1fr);
    grid-template-rows: 1fr;
    grid-gap: 15px;
}

#contenedorsistemaestudiantepagos{    
    height: 100%;
    width: 100%;    
}

#contenedorseccionprematricula{  
    padding: 0px 10px 10px 10px;
    height: 100%;
    width: 100%;    
}

#contenedormostrarestudiantepagos{
    width: 100%;
    height: calc(100% - 40px); 
    display: flex;
    align-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
}

#contenedormostrarestudiantematricula{
    padding: 10px;
    width: 100%;
    height: calc(100% - 40px); 
    display: flex;
    align-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: scroll;
}

.pantallaestudiantehorario{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
}

.contendorseccionhorario{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0px 5px 5px 0px;
    margin-top: 20px;
    width: 100%;
    height: auto; 
}

.btnestudiantemenu{
    user-select: none;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: fixed;
    right: 10px;
    bottom:10px;
    background-color: rgba(26,98,185,0.9);
    width: 45px;
    height: 45px;
    border-radius: 50%;  
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: ease-in-out all 1s;
}

.btnestudiantemenuvisible{    
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

.btnestudiantemenu:hover{
    cursor: pointer;
    background-color: rgba(26,98,185,1);
    color: rgba(255,255,255,1);
}

.btndocentemenu{
    user-select: none;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    position: fixed;
    left: 10px;
    bottom:10px;
    background-color: rgba(26,98,185,0.9);
    width: 45px;
    height: 45px;
    border-radius: 50%;  
    color: rgba(255,255,255,0.7);
    font-size: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.7);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: ease-in-out all 1s;
}

.btndocentemenu:hover{
    cursor: pointer;
    background-color: rgba(26,98,185,1);
    color: rgba(255,255,255,1);
}

#btniniciosistema_estudiante2{
    background-color: rgba(52, 152, 219,0.8);
}

#btniniciosistema_estudiante2:hover{
    background-color: rgba(52, 152, 219,1);
}

#btniniciosistema_estudiante3{
    background-color: rgba(240, 98, 146,0.8);
}

#btniniciosistema_estudiante3:hover{
    background-color: rgba(240, 98, 146,1);
}

#btniniciosistema_estudiante4{
    background-color: rgba(194,176,218,0.8);
}

#btniniciosistema_estudiante4:hover{
    background-color:  rgba(194,176,218,1);
}

#btniniciosistema_estudiante5{
    background-color: rgba(22, 160, 133,0.8);
}

#btniniciosistema_estudiante5:hover{
    background-color: rgba(22, 160, 133,1);
}

#btniniciosistema_estudiante6{
    background-color: rgba(241, 196, 15,0.8);
}

#btniniciosistema_estudiante6:hover{
    background-color: rgba(241, 196, 15,1);
}

#btniniciosistema_estudiante7{
    background-color: rgba(26,98,185,0.8);
}

#btniniciosistema_estudiante7:hover{
    background-color: rgba(26,98,185,1);
}

#btniniciosistema_estudiante8{
    background-color: rgba(125,84,181,0.8);
}

#btniniciosistema_estudiante8:hover{
    background-color: rgba(125,84,181,1);
}

.menuaulavirtualseccioncontenedornivel{
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255,255,255,0.4);
    background-color: rgba(0,0,0,0.1);
    height: auto;
    width: calc(100% - 5px);
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-family: sans-serif;
    font-style: italic;
    color: rgba(255,255,255,0.8);
}

.menuaulavirtualseccionnivel{
    font-weight: bold;
    margin-left: 5px;
    padding: 5px;
    height: auto;
    width: calc(100% - 10px);
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: rgba(255,255,255,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.menuaulavirtualseccioncontenedorsecciones{
    font-weight: bold;
    margin-left: 5px;
    padding-bottom: 10px;
    height: auto;
    width: calc(100% - 10px);    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.menuaulavirtualseccionseccion{
    user-select: none;
    font-size: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    color: white;
    border-radius: 3px;
    transition: ease-in-out all 0.3s;
    margin: 10px 13px 0px 13px;
    background-color: rgba(0,0,0,0.2);
    height: 60px;
    width: 60px;
}

.menuaulavirtualseccionseccion:hover{  
    box-shadow: 0 0 8px rgba(255,255,255,0.7);
    cursor: pointer;
}

.aulavirtualsecciongrado{
    text-align: center;
    width: 100%;
}

.aulavirtualseccioncompseccion{
    width: 100%;
    text-align: center;
    font-weight: normal;
    font-size: 12px;
}

.aulavirtualseccionseccion{
    font-size: 9px;
}

.pantalladocenteaulavirtualright{  
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    margin-left: 200px;
    height: 100%;
    width: calc(100% - 200px);
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.5s;
}

.docenteaulavirtualcontenedordatosclase{
    width: 100%;
    height: auto;
    padding: 0px 0px;
    border-width: 0px 0px 0px 0px;
    border-style: solid;
    border-color: rgb(74, 83 ,136);
    text-align: center;
}

#docenteaulavirtualclaseclasevivo{
    margin-bottom: 10px;
}

.docentecalificacionesdatostituloleft{
    border-bottom-right-radius: 8px;
    float: left;
    width: 120px;
    height: 28px;
    background-color: rgb(74, 83 ,136);
    color: white;
}

.docentecalificacionesdatostituloright{   
    border-top-left-radius: 8px;
    float: left;
    width: calc(100% - 120px);
    height: 28px;
    background-color: white;
}

.docentecalificacionesbtn{
    font-family: sans-serif;
    float: left;
    border-radius: 3px;
    margin-top: 3px;
    margin-left: 3px;
    width: 35px;
    height: 25px;
    background-color: rgb(74, 83 ,136);
    color: white;
    font-size: 13px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: ease-in-out all 0.3s;
}

.docentecalificacionesbtn:hover{
    cursor: pointer;    
    box-shadow: 0 0 7px rgba(74, 83 ,136,0.7);    
}

#BtnDocenteCalificacionesRegistros1{
    background-color: rgb(194,176,218);
}

.docenteaulavirtualpantallaencabezado9{
    text-align: left;
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
    color: rgb(74, 83 ,136);
    width: 100%;
    height: 30px;        
}

.examsemanalperiodotitulocalificaciones{
    font-family: sans-serif;
    padding-left: 7px;
    padding-top: 5px;
    font-size: 13px;
    font-weight: bold;
    width: 100%;
    height: auto;
    text-decoration: underline;
    color: rgb(74, 83 ,136);
}

.inputcompetenciaestudiante{
    line-height: 13px;
    padding-top: 1px;
    text-align: center;
    height: 20px;
    width: 30px;
    outline: none;
    border-width: 0px;
    background-color: transparent;
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
    font-size: 13px;
    transition: ease-in-out all 0.3s;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
    border-color: rgba(255,255,255,0.8);
}

.inputcompetenciaestudiante:hover{
    color: rgb(194,176,218); 
    border-color: rgb(194,176,218); 
}

.inputcompetenciaestudiante:focus{
    color: rgb(194,176,218);    
    border-color: rgb(194,176,218);
}

.inputactividadestudiante{
    line-height: 13px;
    padding-top: 1px;
    text-align: center;
    height: 20px;
    width: 30px;
    outline: none;
    border-width: 0px;
    background-color: transparent;
    color: rgba(255,255,255,0.8);
    font-family: sans-serif;
    font-size: 13px;
    transition: ease-in-out all 0.3s;
    border-width: 1px;
    border-radius: 3px;
    border-style: solid;
    border-color: rgba(255,255,255,0.8);
}

.inputactividadestudiante:hover{
    color: white; 
}

.inputactividadestudiante:focus{
    color: white;
}

.periodopromedio1{
    background-color:rgb(231,86,72);
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.anualpromedio1{
    background-color:white;
    box-shadow: 0 0 4px rgba(231,86,72,0.6);
    color: rgb(231,86,72);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.periodopromedio2{
    background-color:rgb(241, 196, 15);
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.anualpromedio2{
    background-color:white;
    box-shadow: 0 0 4px rgba(241, 196, 15,0.6);
    color: rgb(241, 196, 15);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.periodopromedio3{
    background-color: var(--colorazul);
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.anualpromedio3{
    background-color: white;
    box-shadow: 0 0 4px rgba(26,98,185,0.6);
    color: var(--colorazul);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.periodopromedio4{
    background-color: rgb(22, 160, 133);
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.anualpromedio4{
    background-color: white;
    box-shadow: 0 0 4px rgba(22, 160, 133,0.6);
    color: rgb(22, 160, 133);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    border-radius: 50%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 14px;
    width: 25px;
    height: 25px;
}

.docentecalificacionespantallaencabezado{
    overflow: hidden;
    font-family: sans-serif;
    font-size: 13px;
    color: rgb(255,255,255);
    width: 100%;
    height: 35px;
    background-color: rgb(194,176,218);    
}

.docenteaulavirtualpantallaencabezadoicono{
    float: left;
    height: 35px;
    width: 35px;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.docenteaulavirtualpantallaencabezadotitulo{
    overflow: hidden;
    font-weight: bold;
    font-style: italic;
    float: left;
    height: 35px;
    width: calc(100% - 70px);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#boxsistemaestudiantecalificacionestitulo{ 
    width: 100%;
    height: 40px;
    background-color: rgb(194,176,218);   
}

.itemsistemaestudiantepagostitulo{    
    float: left;    
    padding: 5px;
    height: 100%;
    width: 140px;
    color: white;
    font-family: sans-serif;
    font-size: 25px;
    display: flex;
    align-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;    
}

#aniosistemaestudiantepagostitulo{
    float: left;
    height: 100%;
    width: calc(100% - 140px);
    
}

#aniosistemaestudiantepagostitulo{
    display: block;
}

.spantitulo{
    padding-left: 5px;
    font-size: 15px;
}

#contenedormostrarestudiantecalificaciones{
    margin-top: 5px;
    width: 100%;
    height: calc(100% - 45px); 
    display: flex;    
}

@media screen and (max-width: 320px){     
    
    .contenedornoticiaindividualimagen{
        height: 200px; 
    }
} 

@media print{
    .bodyimprimir{
       background-color: white;
    }
    
    .hojaimp{
        margin: 0px auto;
        padding-bottom: 0px;
    }
    
    .contenedorbtnimp{
        display: none;
    }
}

@media screen and (max-width: 1280px){
    
    .slidersesgo{        
        border-width: 0px 0px 120px 100vw;        
    }
    .contenedorimgskwedsesgotop{        
        border-width: 120px 100vw 0px 0px;
    }
    
    .contenedorimgskwedsesgobottom{        
        border-width: 0px 0px 120px 100vw;        
    }
    
    .contenedorinfoprincipalsesgo{        
        border-width: 0px 0px 120px 100vw;        
    }        
    
    #pantallaestudianteleft{        
        grid-template-columns: repeat(3,1fr);
    }
    
    .itemestudianteasistencia2{        
        font-size: 15px;
    }
    
    .diasemana{        
        font-size: 30px;
    }
    
    #itemestudianteasistenciacontrol{        
        font-size: 27px;
    }    
}

@media screen and (max-width: 1100px){
    .docentecursoexameninsertar{  
        height: 72px;            
    } 
    
    .docentecursoexameninsertar2{  
        height: 72px;            
    }  
}

@media screen and (max-width: 1024px){
    
    .slidersesgo{        
        border-width: 0px 0px 90px 100vw;        
    }
    
    .pantallasliderleft{
        width: 180px;
    }
    
    .pantallasliderrigth{        
        width: calc(100% - 180px);
    }
    
    .pantallasliderrigthimg{        
        border-width: 6px;        
    }
    
    .contenedorimgskwedsesgobottom{        
        border-width: 0px 0px 90px 100vw;        
    }
    
    .contenedorimgskwedsesgotop{        
        border-width: 90px 100vw 0px 0px;
    }
    
    .imginfoprincipal{    
        height: auto;
        width: calc(100% - 20px);
    }
    
    .contenedorinfoprincipalsesgo{        
        border-width: 0px 0px 90px 100vw;        
    }
    
    #boxitemestudianteasistenciaid1{ 
       grid-column: 1/7;
    }
    
    #boxitemestudianteasistenciaid2{
        grid-column: 7/31;
    }
    
}

@media screen and (max-width: 900px){
    .contendornosostrosimg{       
        width: 157px;        
    }
    
    .contendornosostrostexto{ 
        width: calc(100% - 157px);
    }
}

@media screen and (max-width: 800px){
    ::-webkit-scrollbar {
        width: 0px; }
    
    #imglogoloader{
        height: 150px;
        animation: animarinsignia 1.5s infinite;
    }

    @keyframes animarinsignia{
        0%{height: 150px;}
        50%{height: 200px;}    
        100%{height: 150px;}    
    }
    
    .slidersesgo{        
        border-width: 0px 0px 70px 100vw;        
    }
    
    .pagination{        
        top: 87%;       
    }
    
    .pantallasliderleftcontenedorimg{        
        border-width: 2px;
    }
    
    .pantallasliderleft{
        width: 140px;
    }
    
    .pantallasliderrigth{        
        width: calc(100% - 140px);
    }
    
    .pantallasliderrigthimg{        
        border-width: 4px;        
    }
    
    .contenedorimgskwedsesgobottom{        
        border-width: 0px 0px 70px 100vw;        
    }
    
    .contenedorimgskwedsesgotop{        
        border-width: 70px 100vw 0px 0px;
    }
    
    .contenedorimginfoprincipal{        
        width: 100%;
        height: auto;
        float:  none;
        padding-bottom: 10px;
    }
    
    .contenedortextoinfoprincipal{        
        width: 100%;
        height: auto;
        float:  none;
        font-size: 15px;
    }
    
    .imginfoprincipal{    
        width: auto;
        height: 180px;
    }
    
    .contenedorinfoprincipalsesgo{        
        border-width: 0px 0px 70px 100vw;        
    }
    
    .patallaprincipalbottomindividual{
        margin-left: 5px;
        float: none;
        width: calc(100% - 10px);
        height: 50%;        
        border-width: 0px 0px 1px 0px;
    }

    .patallaprincipalbottomgeneral{  
        margin-left: 5px;
        margin-top: 5px;
        float: none;
        width: calc(100% - 10px);
        height: calc(50% - 10px);
    }
    
    .tabla{       
        margin: 5px auto;        
    }
    .contendornosostrostitle{
        font-size: 25px;
    }
    
    .contendornosostrosparrafo{
        font-size: 18px;
    }
    
    #pantallaestudianteleft{        
        grid-template-columns: repeat(2,1fr);
        transition: ease-in-out all 0.5s;        
    }
    
    .btnestudiantemenu{
        transition: ease-in-out all 0.5s;
    }
    
    #contenedorsistemaestudianteasistencia{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8,1fr)
    }
    
    #boxitemestudianteasistenciaid1{
        padding: 5px;
        grid-column: 1/2;
        grid-row: 1/3;
        display: grid;
        grid-template-columns: repeat(7,1fr);
        grid-template-rows: repeat(2,fr);
        grid-gap: 5px;
    }
    
    #boxitemestudianteasistenciaid2{
        grid-column: 1/2;
        grid-row: 3/9;
        display: grid;
        grid-gap: 5px;
        padding: 5px;
    }
    
    #itemestudianteasistenciaid1{
        grid-row: 1/3;
        grid-column: 1/3;
        display: grid;    
        grid-template-rows: repeat(3,fr);
        grid-gap: 5px;
    }
    
    #itemestudianteasistencia1icono{
        font-size: 50px;
    }
    
    .itemestudianteasistencia2{        
        font-size: 13px;
    }
    
    .diasemana{        
        font-size: 25px;
    }
    
    #itemestudianteasistenciacontrol{        
        font-size: 22px;
    }
    
    #boxsistemaestudiantepagospensionmar{
        grid-row: 3/6;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    }   

    #montosistemaestudiantepagospension{
        grid-column: 1/5;
    }

    #fechasistemaestudiantepagospension{
        grid-column: 1/5;
    }

    #horasistemaestudiantepagospension{
        grid-column: 1/5;
    }

    #iconosistemaestudiantepagospension{
        grid-column: 5/6;
        grid-row: 1/4;
        padding-top: 18px;
    }
    
    #boxsistemaestudiantepagospensionabr{
        grid-row: 6/9;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensionmay{
        grid-row: 9/12;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensionjun{
        grid-row: 12/15;       
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensionjul{
        grid-row: 15/18;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensionago{
        grid-row: 18/21;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensionsep{
        grid-row: 21/24;         
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensionoct{
        grid-row: 24/27;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensionnov{
        grid-row: 27/30;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    #boxsistemaestudiantepagospensiondic{
        grid-row: 30/33;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr) 
    } 
    
    .cumplepantallatop1{ 
        width: 34%;
    }
    
    .cumplepantallatop2{ 
        width: 66%;
    }
    
    .resultadoaulavirtual0{        
        width: calc(100% - 10px);        
    }
    
    .menuaulavirtualseccioncontenedornivel{
        width: calc(100% - 10px);
    }    
    
    .docenteaulavirtualpantallacuerpo{
        padding: 5px;
    }  
    
    .docenteaulavirtualpantallacuerpo2{
        padding: 5px;
    } 
   
    .pantallaestudianteaulavirtualleft{
        padding-right: 5px;
    }
    
    .contenedormenuexamsemanal{        
        width: calc(100% - 10px);
    }

    .contenedordatosexamsemanal{
        width: calc(100% - 10px);
    }  
    
    .floatestudianteaulavirtual{        
        padding: 5px;
    }
    
    .docentecursoexameninsertar{  
        height: 102px;            
    }
    
    .docentecursoexameninsertar2{  
        height: 102px;            
    }
}

@media screen and (max-width: 602px){  
    #imglogoloader{
        height: 100px;
        animation: animarinsignia 1.5s infinite;
    }

    @keyframes animarinsignia{
        0%{height: 100px;}
        50%{height: 150px;}    
        100%{height: 100px;}    
    }
    
    .slogan1{
       display: none;
    }

    .slogan2{       
        display:  flex;
    }    
    
       
    .slidersesgo{        
        border-width: 0px 0px 70px 600px;        
    }
    
    .pagination{        
        display: none;       
    }    
    
    .arrowleft{
        display: none;
    }

    .arrowright{
        display: none;
    }
    
    .pantallasliderleft{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        flex-wrap: wrap;
        margin-left: 10px;
        float: none;
        width: calc(100% - 20px);
        height: 110px;
        overflow-x: scroll;
        border-width: 0px 0px 1px 0px;
    }
    
    .pantallasliderleftcontenedorimg{        
        width: 120px; 
        margin: 10px;
    }
       
    
    .pantallasliderrigth{
        margin: 0px;
        float: none;
        width: 100%;
        height: calc(100% - 110px);
    }   
    
    .pantallasliderrigthcontenedorimg{
        text-align: center;
        margin: auto;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
    }

    .pantallasliderrigthcontenedorimgleft{ 
        margin-top: 20px;
        float: none;
        height: auto;
        width: 100%;
    }

    .pantallasliderrigthimg{
        width: 100%;        
    }

    .pantallasliderrigthcontenedorimgrigth{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;  
        float: left;
        height: 40px;
        width: 100%;
    }

    .pantallasliderrigthcontenedorimgrigthoptions{    
        width: 100%; 
    }

    .contenedoroptionsimgslider{
        margin: 15px 10px;
    }
    
    .itemopciones{        
        width: 120px;
        height: 120px;
    }

    .itemopcionesicon{
        font-size: 50px;        
        height: 80px;
    }

    .itemopcionestexto{       
        font-size: 14px;
        height: 40px;
    }  
    
    .contenedorimgskwedsesgobottom{        
        border-width: 0px 0px 70px 600px;        
    }
        
    .contenedorimgskwedsesgotop{        
        border-width: 70px 600px 0px 0px;
    }
    
    .contenedorimgskwed{
        height: 300px;    
    }
    
    .contenedorinfoprincipalsesgo{        
        border-width: 0px 0px 70px 600px;        
    }
    
    .footerleft{    
        width: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }   

    .fontfooterleft{
        float: none;
    }

    .pfooterleft{
        float: none;
    }
    
    .footerrigth{    
        width: 100%;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
        
    .pfooterrigth{        
        float: none;
        margin: 0px;
    }

    .fontfooterrigth{ 
        float: none;
        display: none;
    }
    
    .fontfooterrigthhidden{
        display:  block;
        margin: auto 10px auto 0px;
    }
    
    #contenedorimgbienvenido{
        font-size: 120px;
    }

    #contenedortextobienvenido{
        font-size: 18px;
    }
    
    .contendornosostrosimg{       
        width: 110px;        
    }
    
    .contendornosostrostexto{ 
        width: calc(100% - 110px);
    }
    
    #contendornosostros3{        
        height: 450px;
    }
    
    .imgnosotros{
        height: 65%;
    }
    
    #imgnosotros3{
        height: 95%;
    }    
    
    #boxitemestudianteasistenciaid1{ 
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(3,1fr);
    }
    
    #itemestudianteasistenciaid1{
        grid-column: 1/6;
        grid-row: 1/2;
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(1,1fr);
    }
    
    #itemestudianteasistencia1icono{
        font-size: 30px;
        grid-column: 1/2;
        grid-row:1/2;
    }

    #itemestudianteasistencia1texto{
        grid-row: 1/2;
        grid-column: 2/6;
    }
    
    .cumplepantallatop{        
        height: 70px;
    }
    
    .cumplepantallabottom{        
        height: calc(100% - 70px);
        
    }
    .cumplepantallatop1{ 
        width: 100%;
    }
    
    .cumplepantallatop2{ 
        width: 100%;
        justify-content:  center;
    }
    
    .docentecursoexameninsertar{  
        height: 162px;            
    }
    
    .docentecursoexameninsertar2{  
        height: 162px;            
    }
}

@media screen and (max-width: 500px){        
    .coverimgskiwed{        
        font-size: 16px;        
    }
    
    .contendornosostrosimg{       
        width: 85px;        
    }
    
    .imgnosotros{
        height: 48%;
    }
    
    .contendornosostrostexto{ 
        width: calc(100% - 85px);
    }
    
    .contendornosostrostitle{
        font-size: 20px;
    }
    
    .contendornosostrosparrafo{
        font-size: 15px;
    }
    
    #contendornosostros3{
        height: 400px;
    }
    
    #imgnosotros3{
        height: 85%;
    }
    
    .imgmatricula{
        margin: 20px 20px;
        width: calc(100% - 40px);
        height: auto;
        padding-bottom: 20px;
    }    
    
    #boxitempantallaestudianteleft1{
        grid-column: 1/3;    
    }
    
    .itemestudianteasistencia2{  
        padding: 3;
        grid-gap:3;
        font-size: 13px;
    }
    
    .diasemana{        
        font-size: 20px;
    }
    
    #itemestudianteasistenciacontrol{        
        font-size: 20px;
        grid-column: 1/2;
        grid-row: 2/4;
    }
    
    #itemestudianteasistenciafecha{
        grid-column: 1/2;
        grid-row: 1/2;
    }
        
    .itemestudianteasistencia2grid{
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(3,1fr);
        grid-gap:3;
    }
    
    
    #boxitemestudianteasistenciaid1{ 
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(4,1fr);
    }
    
    #boxitemestudianteasistenciaid2{
        grid-column: 1/2;
        grid-row: 3/10;
        display: grid;
        grid-gap: 3px;
        padding: 3px;
    }
    
    #itemestudianteasistenciaid1{
        grid-row: 1/2;
        grid-column: 1/5;        
    }
    
    .itemestudianteasistencia1{
        font-size: 13px;
    }
    
    #boxsistemaestudiantepagosmatmod{
        grid-row: 1/3;        
        grid-template-columns: repeat(5,1fr);
        grid-template-rows: repeat(2,1fr);    
    }

    #montosistemaestudiantepagosmatmod{
        grid-column: 1/5;
    }

    #fechasistemaestudiantepagosmatmod{
        grid-column: 1/5;
    }

    #iconosistemaestudiantepagosmatmod{
        grid-column: 5/6;
        grid-row: 1/3;
    }
    
    .cumplepantallatop2left{
        font-size: 12px;
        width: 165px;
    }
    
    .cumplepantallatop2right{        
        font-size: 12px;
        width: 165px;
    }

    .cumplepantallatop2texto{
        width: 30px;    
    }
    
    .contenedorfilepagomat{
        width: 180px;   
    }
    
}

@media screen and (max-width: 400px){        
    .coverimgskiwed{        
        font-size: 16px;        
    }
    
    .contendornosostrosparrafo{
        max-height: 320px;
        overflow-y: scroll;
    }
    
    #imgnosotros3{
        height: auto;
        width: 95%;
    }  
    
    #boxitemestudianteasistenciaid2{      
        grid-gap:3px;
        padding: 3px;
    }
    
    .cumplepantallatop{        
        height: 105px;
    }
    
    .cumplepantallabottom{        
        height: calc(100% - 105px);
        
    }
    
    .cumplepantallatop2{ 
        height: 70px;
        display: grid;
        grid-gap:5px;
        padding: 5px;
        grid-template-columns: 1fr 1fr 60px;
        grid-template-rows: repeat(2,1fr);
    }
    
    .cumplepantallatop2left{
        width: 100%;
        grid-column:1/3;
        grid-row:1/2;
    }
    
    .cumplepantallatop2right{ 
        width: 100%;
        grid-column:1/3;
        grid-row:2/3;
    }
    
    .cumplepantallatop2btn{
        border-radius: 0px;
        background-color: rgba(0,0,0,0.2);
        font-size: 25px;
        width: 100%;
        height: 100%;
        grid-column:3/4;
        grid-row:1/3;
    }
    
    .docenteaulavirtualclaseiframevideo{
        height: 200px;  
    }
    
    .contenedortextoinfoprincipal{ 
        font-size: 13px;
    }

@media screen and (max-width: 300px){        
    .slogan2{       
        opacity: 0;
    }
    
    .docenteaulavirtualclaseiframevideo{
        height: 150px;  
    }
}