body {
    margin-top: 40px; 
}

.offcanvas.bg-dark a,
.offcanvas.bg-dark a:active,
.offcanvas.bg-dark a:hover, 
.offcanvas.bg-dark a:visited {
    color: rgba(255, 255, 255, 0.55);
}

.offcanvas.bg-dark .dropdown-menu {
    background: #353b41 !important;
    color: rgba(255, 255, 255, 0.55);
}

.offcanvas.bg-dark .dropdown-menu a:hover {
    color: #22262a;
}

.offcanvas.bg-dark .btn-close {
    background-color: #fff;
}

.dropdown-menu li {
  position: relative;
}
.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
}



.badge-notification {
    position: absolute;
    font-size: .6rem;
    margin-top: -.1rem;
    margin-left: -.5rem;
    padding: .2em .45em;
}


.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}


.offcanvas .dropdown-menu {
    background-color: none !important;
    border:none  !important;   
}



.brand-logo img {
    max-width: 50px;
}


/***
MENU FOOTER 
*/

/* Prevent content behind footer */
body {
    padding-bottom: 60px;
}

/* Fixed footer */
.nav-footer-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1050;

    background: #222;
    border-top: 1px solid #444;
    box-shadow: 0 -2px 6px rgba(0,0,0,.25);
}

/* Horizontal menu */
.nav-footer-menu .mod-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;

    margin: 0;
    padding: 0;
    list-style: none;
}

/* Equal width items */
.nav-footer-menu .metismenu-item {
    flex: 1 1 0;
    min-width: 0;

    border-right: 1px solid #444;
}

.nav-footer-menu .metismenu-item:last-child {
    border-right: 0;
}

/* Full-width clickable area */
.nav-footer-menu .metismenu-item > a {
    display: flex !important;
    flex-direction: column !important; /* force vertical */
    align-items: center !important;
    justify-content: center !important;

    width: 100%;
    min-height: 58px;

    padding: .35rem .2rem;

    color: #d0d0d0;
    background: #222;

    text-align: center;
    text-decoration: none;

    font-size: .62rem; /* smaller text */
    line-height: 1.1;

    white-space: normal;

    transition: background .2s ease,
                color .2s ease;
}

/* Force icon above text */
.nav-footer-menu .metismenu-item > a .fa-solid,
.nav-footer-menu .metismenu-item > a i {
    display: block !important;

    font-size: 1.15rem;
    line-height: 1;

    margin: 0 0 .2rem 0 !important;
    padding: 0 !important;
}

/* Prevent Joomla/bootstrap inline layouts */
.nav-footer-menu .metismenu-item > a span {
    display: block;
    width: 100%;
}

/* Hover / active affects whole section */
.nav-footer-menu .metismenu-item:hover > a,
.nav-footer-menu .metismenu-item.active > a,
.nav-footer-menu .metismenu-item.current > a {
    background: #3a3a3a;
    color: #fff;
}

.nav-footer-menu .metismenu.mod-menu .metismenu-item.active > a, 
.nav-footer-menu .metismenu.mod-menu .metismenu-item.active > button, 
.nav-footer-menu .metismenu.mod-menu .metismenu-item > a:hover, 
.nav-footer-menu .metismenu.mod-menu .metismenu-item > button:hover {
    text-decoration: none;
}

/* Desktop container width */
@media (min-width: 768px) {

    .nav-footer-menu .mod-menu {
        max-width: 720px;
        margin: 0 auto;
    }

    .nav-footer-menu .metismenu-item {
        flex: 0 1 180px;
    }
}

.nav-footer-menu .mod-list li {
    padding: 0; 
}

.nav-footer-menu .metismenu.mod-menu .metismenu-item {
    padding: 0;
}

/**
IPHONE fix 
*/
input,
textarea,
select,
button {
    font-size: 16px;
    max-width: 100%;
}