/*

 * @name   Sistema de Información Academico (SIA)
 *
 * @author Sebastian F. Mena  <sfmenas@ufpso.edu.co>
 * @date   14/12/2016


* -- PC - TABLET -- *
* ============================================================================================================= */
@media  screen and (max-height: 600px){
    footer{
        position: relative;
        width: auto;
    }
    section{
        max-height: none;
        min-height: none;
    }
}

@media  screen and (max-width: 1150px )   {
    .cardNombre {
        padding-top: 9%;
    }
}

@media  screen and (max-width: 1000px )   {
    .flex_aside{
        flex:0;

    }
    .user_identi{
        left: -10em;
    }
    .user_identi,.user_identi>div{
        width: 3em;
        height: 3em;
    }
    .texto_ufpso {
        margin-right: 1em;
        -moz-margin-end: auto;
    }
    .logo_sia{
        margin-left: -15px;
    }
    .logo_sia .sia-text{
        font-size: 2.5em !important;
    }
    #notificacion {
        right: 30px;
        top: 45px;
    }
    .content-notificar{
        left: -8em;
        /*top:7px;*/
    }
    .content-notificar.active{
        left: 0;
        /*top:7px;*/
    }
    section{
        padding-left: 0;
        padding-bottom: 9em;
    }
    /** -- HAMBURGUESA -- **/
    /** ============================================================================================================= **/


    #hambur {
        display: block;
        visibility: visible;
        opacity: 1;
    }

    /** -- LATERAL ASIDE -- **/
    /** ============================================================================================================= **/

    #lateral{
        right: -22em;
    }

    /* -- Logo UFPSO -- *
    /* ============================================================================================================= */

    #logo{
        width: 19em;
        padding: .75em 0 .75em  .75em;
    }

    /*    .logo_ufpso {
            width: 22%;
        }*/

    .texto_ufpso span:nth-child(1){
        font-size: 2.2em;
    }


    .texto_ufpso span:nth-child(2){
        font-size: 1em;
    }


    .texto_ufpso span:nth-child(3){
        font-size: 1.2em;
    }

    /* -- Maqueta -- *
    * ============================================================================================================= */



    nav {
        height: 4em;
    }



    /** -- Divisis -- **/
    /** ============================================================================================================= **/


    #divisis {
        margin-left: .8em;
        height: 2.6em;
    }

    #divisis .icon-display{
        font-size: 1.8em;
    }

    #divisis .by{
        font-size: .7em;
    }

    #divisis .division {
        font-size: .9em;
    }

    #divisis  .date {
        font-size: .9em;
    }

    /** -- Logo SIA -- **/
    /** ============================================================================================================= **/

    #SIA,
    #SIA_RESPONSIVE {
        left: -5.5em;
    }

    #SIA span,
    #SIA_RESPONSIVE span{
        font-size: 4em;
    }

    /** -- FOOTER -- **/
    /** ============================================================================================================= **/


    footer .sia {
        font-size: .9em;
    }

    footer .ufpso {
        font-size: .85em;
    }

    footer span{
        padding-left: .8em;
    }

    /*    footer hr {
            margin-bottom: .5em;
        }*/

}

/** ============================================================================================================= **/


@media  screen and (max-width: 750px )   {
    .cardNombre {
        padding-top: 10%;
    }
    .Fgrande {
        right: 6%;
        left: 6%;
    }
    .Fmediano {
        right: 10%;
        left: 10%;
    }
}
/** -- PHONE -- **/
/** ============================================================================================================= **/


@media  screen and (max-width: 730px )   {
    .texto_ufpso {
        -moz-margin-end: calc(1em);
    }
    section{
        padding-top: 4em;
        padding-bottom: 2em;
        height: auto;
        max-height: inherit;

    }
    /** -- HAMBURGUESA -- **/
    /** ============================================================================================================= **/

    /*    #hambur {
            display: block;
            visibility: hidden;
            opacity: 0;
        }*/


    /** -- LATERAL ASIDE -- **/
    /** ============================================================================================================= **/

    /*    #lateral{
            position: relative;
            width: 100%;
            height: -webkit-calc(100vh - 11em);
            height: -moz-calc(100vh - 11em);
            height: calc(100vh - 11em);
            right: 0;
            z-index: 1;
            box-shadow: none;
            margin-top: 4.8em;
            float: none;
        }

        #lateral .ini_ses {
            font-size: 1.7em;
            height: 1.8em;
        }*/


    /* -- Logo UFPSO -- *
    /* ============================================================================================================= */

    #logo{
        width: 11em;
        padding: 0.5em 0em .7em .5em;
    }
    header{
        left: 0em;
        height: 4em;
        /*position: relative;*/
    }

    /*    .logo_ufpso {
            width: 22%;
        }*/
    /*
        .texto_ufpso {
            margin-left: 1em;
        }*/

    .texto_ufpso span:nth-child(1){
        font-size: 1.5em;
    }


    .texto_ufpso span:nth-child(2){
        font-size: .7em;
        height: .9em;
    }


    .texto_ufpso span:nth-child(3){
        font-size: .9em;
        height: .9em;
    }



    /* -- Maqueta -- *
    * ============================================================================================================= */

    /*    section{
            display: none;
            visibility: hidden;
            opacity: 0;
        }*/


    /** -- Logo SIA -- **/
    /** ============================================================================================================= **/

    /*


    #SIA_RESPONSIVE {
        right: .5em;
        left: initial;
    }

    #SIA_RESPONSIVE span{
        font-size: 4em;
    }

}
@media  screen and (max-width: 730px )   and (max-height: 650px )  {

    /** -- LATERAL ASIDE -- **/
    /** ============================================================================================================= **/

    /*    #lateral{
            height: auto;
            min-height: 29.1em;
        }*/


    /* -- Maqueta -- *
    * ============================================================================================================= */

    footer {
        position: relative;
        flex-direction: column;
        height: auto;
        padding-top: .6em;
        position: relative;
        width: 100%;

    }
    footer hr{
        height: 3px;
        background: #B1B1B1;
        border: none;
        margin-bottom: 1em;
        margin-top: .3em;
        width: 100%;
    }






}
@media (max-width: 700px) {
    /**** estilos para evaluacion, modulo Profesor ****/
    .Evaluacion thead tr th:nth-child(5),
    .Evaluacion thead tr th:nth-child(6){
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70px;
    }
    .tab-links a > .nomTabs{
        display: none;
    }
    .tab-links li{
        position: relative;
    }
    .tab-links li a .iconTabs {
        position: absolute;
        top: 25%;
        left: 0;
        right: 0;
        margin: 0 auto;

    }
}
@media  (min-width: 651px )and (max-width:725px){
    .cardGrupo {
        margin-left: 12px;

    }

}
@media screen and (max-width: 650px){

    .cardNombre{
        padding-top: 12%;
    }
    /*    .cardFoto {
            width: 100%;
            max-height: 120px;
            min-height: 70px;
            position: absolute;
            top: calc(1% - 5px);
        }*/
    #ui-datepicker-div thead{
        display: table-header-group !important;
    }
    #ui-datepicker-div tbody{
        display: table-row-group !important;
    }

    #ui-datepicker-div tr{
        display: table-row !important;
    }
    #ui-datepicker-div tr td:nth-of-type(1n+3):before{
        content:"";
    }
    #ui-datepicker-div tr:after{
        content:"";
        background: none;
    }
    #ui-datepicker-div thead tr th{
        display:table-cell !important;
    }

    #ui-datepicker-div tbody tr td{
        display: table-cell !important;
        padding: 0;
        background: none;
    }
    #ui-datepicker-div tbody tr td:first-of-type{
        background: none;
    }
    #ui-datepicker-div tbody tr td:nth-last-child(2){
        background: none;
    }
    #ui-datepicker-div tbody tr td{
        display: table-cell !important;
        padding: 0;
        background: none;
        width: 15%;
        height: 100%;
    }
    #ui-datepicker-div{
        /*display: table;*/
    }
    #ui-datepicker-div tbody tr td:nth-of-type(2):after,#tabla-horarioActual tbody tr td:nth-child(2):after{
        display: none;
    }

    /** -- TABLAS -- **/
    /** ============================================================================================================= **/
    .tablaDefault{
        display: table !important;
    }
    .tablaDefault thead,#ui-datepicker-div thead{
        display: table-header-group !important;
    }
    .tablaDefault tbody,#ui-datepicker-div tbody{
        display: table-row-group !important;
    }

    .tablaDefault tr, #ui-datepicker-div tr{
        display: table-row !important;
    }
    .tablaDefault tr td:nth-of-type(1n+3):before,#ui-datepicker-div tr td:nth-of-type(1n+3):before{
        content:"";
        border: none;
    }
    .tablaDefault tr:after,#ui-datepicker-div tr:after{
        content:"";
        background: none;
        border:none;
    }

    .tablaDefault tbody tr td:nth-of-type(2):after {
        border:none;

    }
    .tablaDefault tr.closed td:nth-of-type(2):after{
        border: none;
    }

    .tablaDefault thead tr th,#ui-datepicker-div thead tr th{
        display:table-cell !important;
    }

    .tablaDefault tbody tr td,#ui-datepicker-div tbody tr td{
        display: table-cell !important;
        padding: 0;
        background: none;
    }
    .tablaDefault tbody tr td:first-of-type,#ui-datepicker-div tbody tr td:first-of-type{
        background: none;
    }
    .tablaDefault tbody tr td:nth-child(2),#ui-datepicker-div tbody tr td:nth-last-child(2){
        background: none;
    }
    #ui-datepicker-div tbody tr td{
        display: table-cell !important;
        padding: 0;
        background: none;
        width: 14.5%;
        height: 100%;
    }
    /*    #ui-datepicker-div{
            display: table;
        }*/
    #ui-datepicker-div tbody tr td:nth-of-type(2):after{
        display: none;
    }




    .texto_sia {
        display: block;
        visibility: visible;
        opacity: 1;
    }
    #hambur {
        display: block;
        visibility: hidden;
        opacity: 0;
    }

    #SIA {
        display: none;
        visibility: hidden;
        opacity: 0;
    }
    .hamburMobil,  #hamburMobil {
        color: white;
        visibility: visible !important;
        display: inline-block;
        text-align: center;
        background: transparent;
        border-radius: 100%;
        font-size: 3em;
        font-family: 'Myriad Pro Bold Cond';
        color: #FFFFFF;
        text-shadow: 0px 0.01em 0.05em #505050;
        letter-spacing: .05em;
        cursor: pointer;
    }
    #lateral.activo {
        /*        visibility:visible;
                right: -40px;
                top: -67px;*/
        transform: translateX(0px);

    }
    #lateral.activo .hamburMobil{
        display: none;

    }

    /***************** lateral *****************/
    #lateral {
        width: 19em;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -22em;
        background-color: #F7F7F7;
        z-index: 4;
        -webkit-box-shadow: 0 0.03em 0.2em 0.05em rgba(72, 72, 72, 0.75);
        -moz-box-shadow: 0 .03em .2em .05em rgba(72, 72, 72, 0.75);
        box-shadow: 0 0.03em 0.2em 0.05em rgba(72, 72, 72, 0.75);
        transition: right ease-out 300ms;
    }
    #lateral {
        right: -21em;
    }

    .cardGrupo{
        margin-left: 0px;
        width: 100%;
    }

    #cardInfoBasica{
        width:100%;

    }
    /*======GENERAL======*/

    table, thead, tfoot, tbody, tr {
        display:block;
    }

    /*    table {
            position: relative;
        }*/

    /* ======THEAD======    */
    thead tr th {
        display:none;
    }
    thead tr th:nth-child(2) {
        display: block;
        width: inherit;
        padding: 2% 5%;
        text-align: center;
    }
    /*    ======TBODY======    */
    tbody tr {
        position: relative;
        border: 1px solid #b5b5b5;
    }
    tr * {
        padding-top: 1.5% !important;
        padding-bottom: 1.5% !important;
    }

    tr td, tr td:nth-of-type(2n+2) {
        display:block;
    }
    tbody .closed {
        border:none;
    }
    tbody .closed td {
        display: none;
        background: none !important;
    }
    tbody td:nth-of-type(1n+3):before {
        content: attr(class)" : ";
        font-weight: bold;
        position: absolute;
        left: 8px;
    }
    td:nth-of-type(1n+3) {
        border-bottom: solid 1px #ccc;
    }
    td:nth-child(4),td:nth-child(3){
        display:block;
    }
    .dataTable tbody td{
        height: 40px;
        text-align: center;
        border: none;
        border-bottom: 1px solid #b5b5b5;
        /*position: relative;*/
    }

    tbody tr td:nth-of-type(2):after {
        /*        content: "-";
                position: absolute;
                right: 8px;
                top: 3px;
                width: 1.3em;
                height: 1.3em;
                opacity: 0.7;
                cursor: pointer;
                background: black;
                border-radius: 50%;
                font-size: 1.5em;
                color: white;*/
        content: "";
        position: absolute;
        top: 1em;
        right: 1em;
        width: 0.75em;
        height: 0.75em;
        border: 0.25em solid #6c6a6d;
        transform: rotate(225deg);
        transform-origin: 50% 50%;
        transition: opacity 0.2s;
        border-left: none;
        border-top: none;
        top: 1.1em;
        /*background: transparent url(10.png) no-repeat center center; background-size: 2rem;*/

    }
    tr.closed td:nth-of-type(2):after{
        /*content: "+";*/
        content: "";
        position: absolute;
        top: 1em;
        right: 1em;
        width: 0.75em;
        height: 0.75em;
        border: 0.25em solid #6c6a6d;
        transform: rotate(45deg);
        transform-origin: 50% 50%;
        transition: opacity 0.2s;
        border-left: none;
        border-top: none;
        top: 1.1em;

        /*background: transparent url(11.png) no-repeat center center; background-size: 2rem*/
    }


    #tabla-horarioActual tbody tr td:nth-of-type(1n+3):before {
        content:"";
    }
    #tabla-horarioActual tbody tr:after{
        content:"";
        background: none;
    }
    .tablePensum tr td:nth-child(1){
        width: 30% !important;;
    }
    .tablePensum tr td:nth-child(2){
        width: 70% !important;;
    }
    .tablePensum tr td{
        width: 100% !important;
    }

    #tabla-horarioActual tbody tr td:nth-child(2){
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 2;
        background: none;
    }

    .puntos>div>span {
        width: 15px;
        height: 15px;
        margin: 5px;
    }
    ul.puntos{
        padding: 0;
    }
    .nom-sof img {
        left: 1em;
    }

}


@media  screen and (max-width: 600px )     {
    /* -- Maqueta -- *
* ============================================================================================================= */

    footer {
        position: relative;
        width: 100%;
    }
}

@media screen and (max-width: 550px){

    .cardNombre{
        padding-top: 14%;
        padding-bottom: 3%;
    }
}
@media screen and (max-width: 450px){

    .cardNombre{
        padding-top: 17%;
    }
}
@media screen and (max-width: 400px){

    .cardNombre{
        padding-top: 21%;
    }
    .astrodivider{
        width: 280px !important;
    }
}
@media  screen and (max-width: 310px )     {

    /** -- Logo SIA -- **/
    /** ============================================================================================================= **/

    #SIA_RESPONSIVE {
        display: none;
        visibility: hidden;
        opacity: 0;
    }
    .cardNombre{
        padding-top: 23%;
    }

}