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

body{
    background-color: #F4F5FF;
}

.pageContainer{
    display: grid;
    grid-template-areas:
    "header header header"
    "aside main main"
    "aside footer footer";
}

header{
    position: fixed;
    grid-area: header;
    padding: 1vh;
    border-bottom: solid 1px #E5E2E2;
    z-index: 30;
    background-color: #FFFFFF;
    height: 10vh;
    width: 100vw;
}

.headerContentContainer{
    display: flex;
}

.logoContainer{
    margin: auto 1vw;
    height: 8vh;
    width: 15vw;
    display: flex;
}

.logoContainer img{
    width: 100%;
    height: 6.5vh;
    object-fit: contain;
    cursor: pointer;
    margin: auto;
}

.mainMenuContainer{
    margin: auto 1vw;
    width: 65vw;
}

.mainMenu{
    display: flex;
    list-style: none;
}

.elementoMenu{
    margin: auto;
    padding: 1vh;
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    font-size: 2vh;
    color: #323030;
    cursor: pointer;
}

.barraContainer{
    position: relative;
}

.barraContainer input{
    cursor: auto !important;
    cursor: copy;
    height: 4vh;
    width: 20vw;
    border-radius: 2vh;
    border: hidden;
    background-color: #efefef;
    padding-left: 2vw;
    font-family: 'Montserrat',sans-serif;
    font-size: 2vh;
    color: #747474;
    box-shadow: inset 0px 4px 5px #aaa;
}

.barraContainer input:focus{
    outline: none;
    color: #323030;
}

.sLogContainer{
    display: flex;
    position: absolute;
    height: 4vh;
    width: 3vw;
    background-color: #39BAD0;
    right: 0;
    top: 0;
    border-top-right-radius: 2vh;
    border-bottom-right-radius: 2vh;
    transition: .5s;

}

.sLogContainer i{
    margin: auto;
    color: #fff;
}

.sugContainer{
    display: none;
    position: absolute;
    width: 16vw;
    left: 2vh;
    background-color: #EEEEEE;
    border: solid 1px #dddd;
}

.sugBusList{
    list-style: none;
    display: flex;
    flex-direction: column;
}
.sugB{
    width: 100%;
    color: #747474;
    overflow: hidden;
    padding: 1vh;
}



.userContnainer{
    width: 13vw;
    margin: auto 1vh;
    display: flex;
}

.usserNameContainer{
    margin: auto;
    height: 4vh;
    background-image: linear-gradient(45deg,#2ECC71,#787FF6);
    background-size: 200% 200%;
    animation-name: animate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    display: flex;
    width: 7vw;
    border-radius: 2vh;
    overflow: hidden;
    padding: .5vh;
    cursor: pointer;
    transition: .5s;
}


@keyframes animate{
    0%{
        background-position: 0 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0 50%;
    }
}

.infoContainer h4{
    color: #fff  !important;
}

.infoContainer h6{
    color: #eee !important;
}

.lefM , .rigM{
    background-color: #fff !important;
    outline: solid 1px #aaa;
    transition: .5s;
}

.lefM:hover , .rigM:hover{
    background-color: #eee !important;
}

.usserNameContainer h3{
    margin: auto;
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    font-size: 1.7vh;
    color: #fff;
}

.notContainer{
    margin: auto;
    height: 4vh;
    width: 4vh;
    background-color: #D9D9D9;
    border-radius: 2vh;
    cursor: pointer;
    display: flex;
    position: relative;
}

.notContainer i{
    margin: auto;
    font-size: 2vh;
    color: #5E5C5C;
}

.notContainer span{
    position: absolute;
    top: .5vh;
    font-size: 1.5vh;
    background-color: #39BAD0;
    padding: .3vh;
    color: #fff;
    border-radius: 50%;
}

.userContainer{
    display: none;
    background-color: #fff;
    position: fixed;
    height: 28vh;
    width: 35vh;
    right: 0;
    top: 10vh;
    border: solid 1px #E3E3E3 ;
    border-top: 0;
    border-right: 0;
    border-left: none;
    box-shadow: 0cap 4px 4px #E3E3E3;
}

.fondoContainerUsser{
    height: 8vh;
    width: 100%;
    background-color: #000;
}

.fondoContainerUsser img{
    width: 100%;
    height: 8vh;
    object-fit: cover;
    opacity: 50%;
}

.fondoContainerUsser i{
    position: absolute;
    right: 3vh;
    top: 2vh;
    font-size: 3vh;
    color: #fff;
    cursor: pointer;
}

.userFotoCOntainer{
    position: absolute;
    height: 10vh;
    width: 10vh;
    background-color: #EEEEEE;
    left: 4vh;
    border-radius: 5vh;
    top: 2vh;
    border: solid .5vh #fff;
}

.userFotoCOntainer img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
}

.estadoUsser{
    position: absolute;
    height: 3.5vh;
    width: 3.5vh;
    border-radius: 17.5vh;
    border:  solid .5vh #fff;
    background-color: #39BAD0;
    right: -1vh;
    top: 6.5vh;
}

.infoUserContainer{
    margin-top: 5vh;
    margin-left: 2vh;
    font-family: 'Montserrat',sans-serif;
}

.usserName{
    font-size: 2vh;
    font-weight: 600;
    color: #323030;
}


.usserID{
    margin-top: 1vh;
    font-size: 1.7vh;
    font-weight: 500;
}


.buttonCloseSession{
    width: 100%;
    margin-top: 2vh;
    display: flex;
}

.buttonCloseSession button{
    margin: auto;
    height: 3vh;
    width: 15vh;
    border-radius: 1.5vh;
    border: hidden;
    background-color: #39BAD0;
    color: #fff;
    font-family: 'Montserrat',sans-serif;
    font-size: 1.7vh;
    cursor: pointer;
    transition: .5s;
}

.buttonCloseSession button:hover{
    background-color: #000;
}

.notiContainer{
    display: none;
    position: absolute;
    background-color: #fff;
    border-left: solid 1px #eee;
    border-bottom: solid 1px #eee;
    right: 5px;
    top: 10vh;
    width:15vw;
}

.notiContainer i{
    position: absolute;
    right: 2vw;
}

.notificacion{
    display: flex;
    padding: 1vh;
    border-bottom: solid 1px #eee;
    border-top: solid 1px #eee;
    cursor: pointer;
    position: relative;
}

.progresnoti{
    position: absolute;
    bottom: 0;
    left: 0;
    height: 10%;
    width: 10%;
    background-color: #afa;
}

.notificacion:hover{
    background-color: #1F1B6F;
    color: #fff;
}

.notiContainer h6{
    font-size: 1.8vh;
    font-family: 'Montserrat',sans-serif;
    font-weight: 400;
    margin: auto 1vh;
}

.noNot{
    padding: 1vh;
    font-family: 'Montserrat',sans-serif;
    font-weight: 400;
    margin-left: 1vh;
}

.tittleContainerM{
    margin-top: 1vh ;
    margin-bottom: 1vh ;
    font-family: 'Montserrat',sans-serif;
    font-size: 2vh;
    margin-left: 1vw;
    font-weight: 500;
}


aside{
    grid-area: aside;
    position: fixed;
    z-index: 30;
    background-color: #fff;
    height: 90vh;
    width: 15vw;
    margin-top: 10vh;
    border-right: solid 1px #E5E2E2;
}

.contentNavContaier{
    height: 100%;
    width: 100%;
    padding:1vh;
    display: flex;
    flex-direction: column;
}

.listAside{
    margin: 2vh auto;
    list-style: none;
    height: 40vh;
    width: 80%;
    display: flex;
    flex-direction: column;
}

.asideE{
    margin: auto 20%;
    font-family: 'Montserrat',sans-serif;
    font-size: 1.8vh;
    font-weight: 500;
    color: #323030;
    cursor: pointer;
}

.asideE i{
    margin-right: .5vw;
    color: #39BAD0;
    font-size: 2.2vh;
    transition: .5s;
}

.nvContainer{
    margin: auto;
    margin-bottom: 5vh;
    display: flex;
    flex-direction: column;
}

.nvContainer a{
    margin: auto;
    height: 12vh;
    width: 18vh;
}

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

.nvContainer h4{
    margin: .2vh auto;
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    letter-spacing: .1vw;
    color: #5E5C5C;
    font-size: 1.5vh;
}

main{
    grid-area: main;
    width: 84vw;
    margin-left:15vw;
    margin-top:10vh;
    background-color: #F4F5FF;
}

.rec{
    cursor: pointer  !important;
}

footer{
    grid-area: footer;
    display: flex;
    left: 0;
    width: 100vw;
    padding: 10px;
    background-color: #F4F5FF;
}

.footerContentContainer{
    margin: auto;
    margin-left: 50%;
}

.footerContentContainer h4{
    font-family: 'Montserrat',sans-serif;
    font-weight: 500;
    font-size: 1.7vh;
    color: #5E5C5C;
}

.footerContentContainer a{
    text-decoration: none;
    color: #5E5C5C;
}

/* Animaciones y eventos */

.sLogContainer:hover, .usserNameContainer:hover{
    background-color: #1F1B6F;
}

.asideE:hover >i{
    color: #1F1B6F;
}

.asideE:hover{
    text-decoration: underline;
}

.sugB:hover{
    background-color: #1F1B6F;
    color: #fff;
    border-left: solid 1vh #2E86C1;
}


.ciM{
    display: none;
}

.cMenuCon{
    display: none;
}


.loaderContainer,.errCotainer{
    position: absolute;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    background-color:rgba(0, 0, 0, 0.3);
}

.errCotainer{
    display: none;
}


.contentE{
    background-color: #fff;
    height: 40vh;
    width: 30vw;
    margin: auto;
    border-radius: 2vh;
    box-shadow: 0px 4px 10px #aaa;
    display: flex;
    flex-direction: column;
}

.contentE img{
    height: 25vh;
    width: 30vh;
    margin: 1vh auto;
}

.contentE h6{
    margin: 0 auto;
    font-family: 'Montserrat',sans-serif;
    font-size: 2vh;
}

.contentE button{
    margin: auto;
    width: 8vw;
    height: 3.5vh;
    border-radius: 2vh;
    border: hidden;
    font-family: 'Montserrat',sans-serif;
    font-size: 1.7vh;
    font-weight: 500;
    background-color: #2E86C1;
    color: #fff;
    cursor: pointer;
    transition: .5s;
}

.contentE button:hover{
    background-color: #000;
}

.loaderContainer i{
    margin: auto !important;
    font-size: 5vh;
    color: #fff;
}


@media screen and (max-width:600px) {
    .cMenuCon{display: block;}

    footer{
        display: none;
    }

    main{
        grid-area: main;
        width: 100vw;
        margin-left:0;
        margin-top:10vh;
        height: 78vh;
        overflow: auto;
        overflow-x: hidden;
    }

    aside{
        position: fixed;
        z-index: 30;
        background-color: #fff;
        height: 82.5vh;
        width: 60vw;
        margin-top: 10vh;
        border-right: solid 1px #E5E2E2;
    }
    

    .headerContentContainer{
        width: 95vw;
        padding: 0 2vw;
    }
    
    .mainMenuContainer{
        margin: 0;
        width: 100vw;
        position: absolute;
        bottom: -82vh;
        left: 0;
        height: 8vh;
        background-color: #FFF;
        overflow-x: auto;
        border-top: solid 1px #E3E3E3;
        padding: 0 2vh;
    }

    .mainMenu{
        width: 150vw;
        position: sticky;
        padding-top: 1vh;
    }

    .logoContainer{
        margin: auto 0;
        height: 8vh;
        width: 20vw;
    }

    .liM{
        display: none;
    }

    .ciM{
        display:block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .userContnainer{
        display: none;
    }

    .cMenuCon{
        margin: auto 1vw;
    }

    .cMenuCon i{
        font-size: 3vh;
        color: #7A7171;
    }

    .elementoMenu:nth-child(3){
        display: none;
    }

    .barraContainer{
        margin: auto;
    }

    .barraContainer input{
        width: 50vw;
        padding-left: 2vh;
    }

    .sLogContainer{
        width: 8vw;
        color: #2E86C1;
    }

    aside{
        display: none;
        width: 70vw;
    }

    .listAside{
        margin: 2vh auto;
        margin-top: 26vh;
        list-style: none;
        height: 40vh;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .asideE{
        width: 100%;
        margin: auto 20%;
        z-index: 2;
    }

    .asideE i{
        margin-right: 5vw;
    }

    .nvContainer{
        margin: auto;
        margin-bottom: 1vh;
        display: flex;
        flex-direction: column;
    }

    .nvContainer a{
        margin: auto;
        height: 8vh;
        width: 14vh;
    }


    .userContainer{
        display: block;
        width: 70vw;
        left: 0;
        top: 10vh;
        border: none;
        box-shadow: none;
        text-align: center;
    }

    .sugContainer{
        font-family: 'montserrat',sans-serif;
        width: 38vw;
    }

    .userContainer i{
        display: none;
    }
    
    .userFotoCOntainer{
        position: absolute;
        height: 10vh;
        width: 10vh;
        background-color: #EEEEEE;
        left: 10vh;
        border-radius: 5vh;
        top: 2vh;
        border: solid .5vh #fff;
    }

    .infoUserContainer{
        margin-left: 0;
    }

    @keyframes apareceIz{
        0%{opacity: 0;left: -10vh;}
        100%{opacity: 100%;left: 0;}
    }
    
}