/* ====================== Control Treeview ======================*/
.treeview-animated {
    font-size: 16px;
    font-weight: 400;
    background: #F57848;
    height: auto;
}
    .treeview-animated hr {
        border: 2px solid #FFFFFF;
        background-color:white;
    }
    .treeview-animated h6 {
        font-size: 1.3em;
        font-weight: 800;
        color: whitesmoke;
        margin: 0px;
    }
    .treeview-animated ul {
        position: relative;
        list-style: none;
    }
.treeview-animated-list ul {
    margin-top: 0.1em;
    background: #ff8c3f;
}
/* ====================== Elementos (Dashboards) ======================*/
.treeview-animated-element {
    padding-left: 10px;
    cursor: pointer;
    transition: all .1s linear;
    border: 2px solid transparent;
    border-right: 0px solid transparent;
    color: white;
}
    .treeview-animated-element:hover {
        background-color: #ff8c3f;
    }
    .treeview-animated-element.opened {
        color: white;
        border: 0px solid transparent;
        border-bottom: 2px solid #FFFFFF;
        background-color: #e67226;
    }
        .treeview-animated-element.opened:hover {
            color: white;
            background-color: #ff8c3f;
        }

@media screen and (max-width:957px) {
    .treeview-animated-element {
        cursor: pointer;
        transition: all .1s linear;
        border: 2px solid transparent;
        border-right: 0px solid transparent;
        color: white;
    }
    ul {
        padding: 0;
        list-style-type: none;
    }
    #VistaDesdeEscritorio {
        display: none;
    }
    #VistaDesdeMovil{
        display:normal;
        max-height: 200px;
        overflow-y: auto;
    }

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

@media screen and (min-width:958px) {
    #VistaDesdeEscritorio {
        display: normal;
    }

    #VistaDesdeMovil {
        display: none;
    }
}
/* ====================== Encabezados de Elementos (Folders) ======================*/
.treeview-animated-items-header {
    display: block;
    padding: 0.4em;
    margin-right: 0;
    border-bottom: 2px solid transparent;
    color: white;
}
.treeview-animated-items-header span {
    color: white;
}

    .treeview-animated-items-header:hover {
        background-color: #ff8c3f;
    }

    .treeview-animated-items-header.open {
        transition: all .1s linear;
        background-color: #ff8c3f;
        border-bottom: 2px solid #FFFFFF;
    }

        .treeview-animated-items-header.open span {
            color: white;
            font-weight: 800;
        }

        .treeview-animated-items-header.open:hover {
            color: white;
            background-color: #ff8c3f;
        }

        .treeview-animated-items-header.open div:hover {
            background-color: #ff8c3f;
        }