.navLayout {
    padding: 0px !important;
}

.navLayout #contentPanel {
    padding: 0px;
    width: 70%;
}

.navLayout #menuContextPanel {
    padding: 0px;
    color: #064568;
}

.navLayout #menuContextPanel a {
    text-decoration: none;
    color: #064568;
}

.navLayout #menuContextPanel a:hover {
    text-decoration: underline;
    color: #064568;
}

.navLayout #menuContextPanel .panelTitle {
    background-color: transparent;
}

.navLayout #menuContextPanel .panelElement,
.navLayout #menuContextPanel .panelElements {
    background-color: transparent;
}

.navLayout #menuContextPanel .panelElements .panelElement .elementChildren {
    display: none;
}

.navLayout #menuContextPanel .panelElements .panelElement .elementChildren .elementSelected {
    background-color: #064568;
    color: #ffffff;

}

.navLayout #menuContextPanel .panelElements .panelElement .elementChildren .elementChild {

    border-bottom: 1px dotted #064568;

}

.navLayout #menuContextPanel .panelElements .panelElement .showElement {
    display: flex;
    animation: expandir 1s forwards;
}

.navLayout #menuContextPanel .panelElements .panelElement .act {
    color: rgb(217, 152, 50);
    text-decoration: underline;
}

.navLayout #menuContextPanel .toogleBox {
    display: none;
}


.navLayout #menuContextPanel .contextPanelBg {
    display: none;

}

@media screen and (max-width: 1440px) {
    .navLayout #contentPanel {
        width: 80%;
    }

    .navLayout #menuContextPanel .contextPanelbg {
        display: flex;
    }
}

@media screen and (max-width: 1024px) {
    .navLayout #contentPanel {
        width: 70%;
    }

    .navLayout #menuContextPanel .contextPanelbg {
        display: flex;
    }
}

@media screen and (max-width: 900px) {
    .navLayout #contentPanel {
        width: 100%;
    }

    .navLayout #menuContextPanel {

        position: fixed;
        left: 0px;
        top: 25%;
        z-index: 99999;
        max-height: 75%;

    }

    .navLayout .menuExpandido {
        height: 75% !important;

    }

    .navLayout #menuContextPanel .contextPanel {
        background-color: #eceff2;
        overflow: scroll;
        padding-bottom: 3rem;
        height: 100%;
    }

    .navLayout #menuContextPanel .contextPanelbg {
        display: none;
    }

    .navLayout #menuContextPanel .toggler {
        position: relative;
        top: 30%;
        border-radius: 0px 30px 30px 0px;
        height: 50px;
        background-color: #eceff2;
    }

    .navLayout #menuContextPanel .toogleBox {
        display: flex;
        background-color: #064568;
        color: white;
    }

    .navLayout #menuContextPanel .toogleBox .spacer {
        background-color: #eceff2;
    }

}


@media screen and (max-width: 575px) {
    .navLayout #menuContextPanel .toogleBox {
        background-color: #064568;
        color: white;
    }

    .navLayout #menuContextPanel .contextPanelbg {
        display: none;
    }
}

@keyframes expandir {
    from {
        height: 0%
    }

    to {
        height: 100%
    }
}