.menu-bar {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}
.main-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}
.main-menu > li {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
}
.main-menu > li:hover{
    background-color: rgba(0, 0, 0, .15);
}
.submenu-container {
    position: absolute;
    left: 0;
    top: 100%;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* width: 950px; */
    display: flex;
    display: none;
}
.submenu-container.wide {
    width: 1100px;
}

.submenu-container.narrow {
    width: 650px;
}
.main-menu > li:hover .submenu-container {
    display: flex;
}
.submenu-sidebar {
    width: 220px;
    background-color: #f5f5f5;
    color: black;
    padding: 10px;
}
.submenu-sidebar a {
    color: black;
}
.submenu-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.submenu-sidebar li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}
.submenu-sidebar li:hover {
    background-color: #ddd;
}
.submenu-content ul {
   padding: 0px 0px 0px 1rem;
}
.submenu-content {
    color: black;
    flex: 1;
    padding: 15px 20px;
    display: none;
}
.submenu-content a{
    color: black;
}
.submenu-content li a {
    color: black;
}
.submenu-content li ul li a {
    color: rgb(108, 117, 125);
}
.submenu-content a:hover,
.submenu-content li a:hover {
    color: #222f42;
}
.submenu-content li {
    list-style: none;
}
.submenu-content.show {
    display: block;
}
.tamanio-img-navbar{
    width: 49px;
    height: 40px;
}