html, body, form {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

html {
    position: relative;
}

body {
    margin-top: 30px; /*Margen superior de la página de contenido del Master page*/
    min-width: 0px; /*Tenia un valor de 300*/
}

#navbar {
    background: #FFF;
    -webkit-box-shadow: 0px 0px 62px -5px rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 62px -5px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 62px -5px rgba(0,0,0,0.15);
    height: 40px; /*Alto del NavBar donde está el botón*/
    border: 0;
    padding: 0;
}

    #navbar .navbar-brand > * {
        vertical-align: top;
        display: inline-block;
    }

    #navbar .navbar-brand {
        padding: 0;
    }

    #navbar .navbar-toggler {
        width: 40px; /*Tamaño del botón activador de menú*/
        height: 40px;
        background: #d51d5b; /*Color del botón que expande menú sidebar*/
        border-radius: 0;
        cursor: pointer;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        margin-right: 24px;
    }

        #navbar .navbar-toggler:before,
        #navbar .navbar-toggler .navbar-toggler-icon,
        #navbar .navbar-toggler:after {
            content: '';
            background: #fff;
            height: 4px;
            width: 18px;
            display: block;
            margin: 0 auto;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
        }

        #navbar .navbar-toggler .navbar-toggler-icon,
        #navbar .navbar-toggler:after {
            margin-top: 5px;
        }

.show-nav #navbar .navbar-toggler:before {
    transform: translateY(9px) rotate(135deg);
    -webkit-transform: translateY(9px) rotate(135deg);
    -moz-transform: translateY(9px) rotate(135deg);
}

.show-nav #navbar .navbar-toggler-icon {
    transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
}

.show-nav #navbar .navbar-toggler:after {
    transform: translateY(-9px) rotate(-135deg);
    -moz-transform: translateY(-9px) rotate(-135deg);
    -webkit-transform: translateY(-9px) rotate(-135deg);
}

#navbar .logo h3 {
    margin-top: 16px;
    margin-bottom: 0;
    line-height: 1.1;
    font-weight: bold;
    font-size: 29px;
}

    #navbar .logo h3 .badge {
        font-size: 0.4em;
        vertical-align: top;
    }

#navbar .logo h4 {
    margin-top: 5px;
    line-height: 1.1;
    font-weight: 400;
    font-size: 15px;
}

#navbar .logo h3 a {
    color: #666666;
    text-decoration: none;
}

#navbar .logo h4 a {
    color: #bababa;
    text-decoration: none;
}

#navbar .nav-header .nav-item {
    margin: 0;
    height: 20px;
    overflow: hidden;
    border-radius: 0;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 20px;
    padding: 15px 10px 20px 10px;
    border: 0;
    background-image: none;
    vertical-align: middle;
    line-height: 28px !important;
}

    #navbar .nav-header .nav-item:hover {
        background: transparent;
    }


#sidebar {
    position: fixed;
    top: 41px; /*Padding del menú en side Bar*/
    bottom: 0;
    left: 0px;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: auto; /* Agregado para permitir el scroll si el contenido es mayor que la altura del sidebar */
    padding-top: 0px /*Separa la ventana del SIDEBAR del renglón del NAVBAR en la parte superior*/;
    background: #fff;
    display: block;
    width: 320px; /*Ancho del SideBar tenia originalmente 253*/
    transition: width 100ms; /* Tiempo de transición del sidebar */
    height: calc(100vh - 25px); /* Llena el SIDEBAR en la ventana que lo contiene */
}

    #sidebar .sidebar-body {
        padding-top: 25px;
        padding-bottom: 15px;
        position: relative;
        top: 0;
        right: 0;
        left: 0px;
        bottom: 0;
        border-right: 2px solid #d5be98;
        border-top: 2px solid #d5be98;
        background: rgba(0, 128, 128, 0.3); /* Color de fondo del sidebar */
        height: 100%; /* Add this line to fill sidebar */
        overflow-y: auto; /* Add this for scrolling if content overflows */
        overflow-x: hidden;
    }

    #sidebar .nav {
        text-transform: none;
        text-indent: 0px;
    }

/*@media (max-height: 420px) {
    #navbar .nav-header {
        display: flex !important;
    }

    body #navbar .nav-header .nav-item {
        display: block !important;
    }

    body #sidebar .sidebar-body {
        bottom: 0;
    }
}*/


#sidebar #navTreeView {
    font-size: 14px;
}

    #sidebar #navTreeView ul {
        overflow: hidden;
        font-weight: 600;
        font-size: 1.5em;
    }

    #sidebar #navTreeView li > a {
        border-radius: 0;
        padding-left: 15px; /*Padding izquierdo del TreeView*/
        font-size: 14px; /*Tamaño del texto del TreeView*/
        border: 0;
        background-image: none;
        text-shadow: none;
        padding-top: 6px;
        padding-bottom: 4px;
        color: Teal; /*Color texto de items en Treeview */
    }

    #sidebar #navTreeView li:not(.active) > a:hover {
        background: rgb(0, 21, 77); /*Color del highlight en el menú sidebar*/
    }

    /*#sidebar #navTreeView li.active > a {
        color: darkgreen !important;*/ /*Color del elemento activo en el TreeView*/
        /*background: rgb(0, 21, 77) !important;*/ /*Color del highlight en el menú sidebar*/
    /*}*/



    #sidebar #navTreeView ul > li ul > li > a {
        font-size: 14px;
        padding-left: 45px; /*Pading de los Child nodes*/
    }

    #sidebar #navTreeView > ul.nav ul.nav {
        margin: 0;
    }

    #sidebar #navTreeView .image {
        font-size: 30px;
        margin: 0px;
        padding: 0px;
    }

    #sidebar #navTreeView .badge {
        float: right;
        text-transform: uppercase;
    }

    #sidebar #navTreeView .text { /*Agregué esta clase para marcar una indención entre la imagen de icono y el texto menu del Treeview*/
        padding-left: 10px;
    }

#sidebar .dxbs-tree > ul.nav li {
    margin-left: 0;
}

#navbar .nav-header > .nav-item + .nav-item,
#navbar .nav-header > .nav-item + .nav-item:hover {
    color: #ffffff;
}

    #navbar .nav-header > .nav-item + .nav-item + .nav-item,
    #navbar .nav-header > .nav-item + .nav-item + .nav-item:hover {
        color: #ffffff;
    }

    #navbar .nav-header > .nav-item + .nav-item + .nav-item {
        width: 80px;
        text-align: center;
    }

/*@media (min-width: 767px) and (max-width:991) { 

    #navbar .navbar-toggler {
        margin-right: 18px;
    }

    #navbar .nav-header > .nav-item + .nav-item + .nav-item {
        width: auto;                                                
    }
}*/

.main {
    min-height: 100% !important;
    padding: 0 !important;
}

#content {
    margin-left: 0px; /*tenia 253px*/
    padding-right: 0px; /*tenia 25*/
    transition: margin-left 500ms, width 500ms;
}

/*CSS MIOS*/
@media (min-width: 1200px) {

    #content {
        padding-left: 0px; /* decia 42*/
        padding-right: 0px; /* decia 42*/
    }

    #sidebar .dxbs-tree .image { /*Esto está bloqueando que se desplegue el ICONO*/
        /*        display: none; */
        padding-left: 10px;
    }

    body.collapse-nav #sidebar {
        width: 0px; /*Tenia 80 Representa el Treeview colapsado*/
    }

    body.collapse-nav #content {
        margin-left: 40px; /*Representa colapso total de la columna del treeView*/
        width: calc(100% - 80px);
    }

    body.collapse-nav #sidebar #navTreeView {
        margin-top: 0;
    }

        body.collapse-nav #sidebar #navTreeView li > a {
            padding-left: 10px; /*Tenían valor 0*/
            padding-right: 10px;
            text-align: center;
        }

        body.collapse-nav #sidebar #navTreeView li.active > a,
        body.collapse-nav #sidebar #navTreeView li.active-parent > a {
            background: transparent;
        }

        body.collapse-nav #sidebar #navTreeView .image {
            display: inline-block;
        }

            body.collapse-nav #sidebar #navTreeView .image + span,
            body.collapse-nav #sidebar #navTreeView .badge {
                display: none;
            }

        body.collapse-nav #sidebar #navTreeView li ul {
            display: none;
        }
}

@media (min-width: 992px) and (max-width: 1199px) {

    #content {
        padding-left: 0px; /* decia 42*/
        padding-right: 0px; /* decia 42*/
    }

    #sidebar .dxbs-tree .image { /*Esto está bloqueando que se desplegue el ICONO*/
        /*        display: none; */
        padding-left: 10px;
    }

    body.collapse-nav #sidebar {
        width: 0px; /*Tenia 80 Representa el Treeview colapsado*/
    }

    body.collapse-nav #content {
        margin-left: 40px; /*Representa colapso total de la columna del treeView*/
        width: calc(100% - 80px);
    }

    body.collapse-nav #sidebar #navTreeView {
        margin-top: 0;
    }

        body.collapse-nav #sidebar #navTreeView li > a {
            padding-left: 10px; /*Tenían valor 0*/
            padding-right: 10px;
            text-align: center;
        }

        body.collapse-nav #sidebar #navTreeView li.active > a,
        body.collapse-nav #sidebar #navTreeView li.active-parent > a {
            background: transparent;
        }

        body.collapse-nav #sidebar #navTreeView .image {
            display: inline-block;
        }

            body.collapse-nav #sidebar #navTreeView .image + span,
            body.collapse-nav #sidebar #navTreeView .badge {
                display: none;
            }

        body.collapse-nav #sidebar #navTreeView li ul {
            display: none;
        }
}

@media (min-width: 768px) and (max-width: 991px) {

    #content {
        padding-left: 0px; /* decia 42*/
        padding-right: 0px; /* decia 42*/
    }

    #sidebar .dxbs-tree .image { /*Esto está bloqueando que se desplegue el ICONO*/
/*                display: none; 
*/        padding-left: 10px;
    }

    body.collapse-nav #sidebar {
        width: 0px; /*Tenia 80 Representa el Treeview colapsado*/
    }

    body.collapse-nav #content {
        margin-left: 40px; /* Tenia 40 Representa colapso total de la columna del treeView*/
        width: calc(100% - 80px);  /*Tenia 80*/
    }

    body.collapse-nav #sidebar #navTreeView {
        margin-top: 0;
    }

        body.collapse-nav #sidebar #navTreeView li > a {
            padding-left: 10px; /*Tenían valor 0*/
            padding-right: 10px;
            text-align: center;
        }

        body.collapse-nav #sidebar #navTreeView li.active > a,
        body.collapse-nav #sidebar #navTreeView li.active-parent > a {
            background: transparent;
        }

        body.collapse-nav #sidebar #navTreeView .image {
            display: inline-block;
        }

            body.collapse-nav #sidebar #navTreeView .image + span,
            body.collapse-nav #sidebar #navTreeView .badge {
                display: none;
            }

        body.collapse-nav #sidebar #navTreeView li ul {
            display: none;
        }

}

@media (min-width: 576px) and (max-width: 767px) {

    #content {
        padding-left: 0px; /* decia 42*/
        padding-right: 0px; /* decia 42*/
    }

    #sidebar .dxbs-tree .image { /*Esto está bloqueando que se desplegue el ICONO*/
        /*                display: none; 
*/ padding-left: 10px;
    }

    body.collapse-nav #sidebar {
        width: 0px; /*Tenia 80 Representa el Treeview colapsado*/
    }

    body.collapse-nav #content {
        margin-left: 40px; /*Representa colapso total de la columna del treeView*/
        width: calc(100% - 80px);
    }

    body.collapse-nav #sidebar #navTreeView {
        margin-top: 0;
    }

        body.collapse-nav #sidebar #navTreeView li > a {
            padding-left: 10px; /*Tenían valor 0*/
            padding-right: 10px;
            text-align: center;
        }

        body.collapse-nav #sidebar #navTreeView li.active > a,
        body.collapse-nav #sidebar #navTreeView li.active-parent > a {
            background: transparent;
        }

        body.collapse-nav #sidebar #navTreeView .image {
            display: inline-block;
        }

            body.collapse-nav #sidebar #navTreeView .image + span,
            body.collapse-nav #sidebar #navTreeView .badge {
                                display: none;

            }

        body.collapse-nav #sidebar #navTreeView li ul {
                        display: none;

        }
}

@media (min-width: 380px) and (max-width: 575px) {

/*    #sidebar {
        width: 0px;
    }

        #sidebar .sidebar-body {
            bottom: 114px;
        }

    #content {
        width: 100%;
        margin-left: 0;
    }

    #sidebar #navTreeView .image {
                display: none;

    }

    #sidebar #bottomNav a .image {
                display: none;

    }

        #sidebar #bottomNav a .image + span {
            display: inline;
            line-height: 36px;
        }*/
    #content {
        padding-left: 0px; /* decia 42*/
        padding-right: 0px; /* decia 42*/
    }

    #sidebar .dxbs-tree .image { /*Esto está bloqueando que se desplegue el ICONO*/
        /*                display: none; 
*/ padding-left: 10px;
    }

    body.collapse-nav #sidebar {
        width: 0px; /*Tenia 80 Representa el Treeview colapsado*/
    }

    body.collapse-nav #content {
        margin-left: 40px; /*Representa colapso total de la columna del treeView*/
        width: calc(100% - 80px);
    }

    body.collapse-nav #sidebar #navTreeView {
        margin-top: 0;
    }

        body.collapse-nav #sidebar #navTreeView li > a {
            padding-left: 10px; /*Tenían valor 0*/
            padding-right: 10px;
            text-align: center;
        }

        body.collapse-nav #sidebar #navTreeView li.active > a,
        body.collapse-nav #sidebar #navTreeView li.active-parent > a {
            background: transparent;
        }

        body.collapse-nav #sidebar #navTreeView .image {
            display: inline-block;
        }

            body.collapse-nav #sidebar #navTreeView .image + span,
            body.collapse-nav #sidebar #navTreeView .badge {
                display: none;
            }

        body.collapse-nav #sidebar #navTreeView li ul {
            display: none;
        }

}
.sidebar-hidden {
    display: none !important;  
}


#sidebar #navTreeView .dxbs-treeview-node-selected > .dxbs-treeview-node-content,
#sidebar #navTreeView .dxbs-treeview-node-selected > .dxbs-treeview-node-content *,
#sidebar #navTreeView .dxbs-treeview-node-selected a,
#sidebar #navTreeView .dxbs-treeview-node-selected {
    color: red !important;
    background: transparent !important;
    border-color: transparent !important;
}


/*Esto es importante para los nodos seleccionados, ya que el estilo por defecto de DevExpress
para los nodos seleccionados es un fondo azul oscuro con texto blanco, lo cual no se alinea 
con el diseño que estás buscando. Al establecer el color del texto a rojo y el fondo a transparente,
puedes mantener la apariencia limpia y profesional que deseas para tu aplicación, mientras que
el nodo seleccionado sigue siendo claramente visible para los usuarios. Además, al eliminar 
cualquier borde, aseguras que el nodo seleccionado no tenga elementos 
visuales adicionales que puedan distraer o desentonar con el diseño general de tu interfaz.*/

/* Solo resalta el enlace del nodo individual en hover, sin afectar subnodos */
.nav-item > .nav-link:hover {
    background-color: teal !important;
    color: #fff !important;
}

/* Nodo seleccionado: fondo blanco, texto teal */
.nav-item > .nav-link.active,
.nav-item.active > .nav-link,
.nav-item > .nav-link[aria-current="page"] {
    background-color: #fff !important;
    color: teal !important;
    font-weight: bold;
}