/* Header */
header {height: 55px}
header .app-toggle {margin-left: 5px; margin-right: 5px; min-height: 40px; min-width: 40px; padding: .50rem .60rem; text-align: center; text-shadow: 0 0 1px #000}
header .app-toggle.account {margin-right: 10px; padding-bottom: .45rem; padding-top: .55rem; text-shadow: 0 0 1px #000}
header .app-toggle.account:focus {box-shadow: none; outline: none}
header .navbar-brand {margin-right: 0}
header .navbar-brand#toggle-sidebar {margin-right: 0; padding-left: 1rem; padding-right: 1rem}
header .navbar-brand:not(#toggle-sidebar) {padding-left: 5px; padding-right: 5px; text-transform: uppercase}
header .navbar-brand:focus,
header #headerNavbar .nav-item > .nav-link:focus {box-shadow: none; outline: none}
header #headerNavbar .nav-item > div a.dropdown-toggle:focus {box-shadow: none; outline: none}
header #headerNavbar .nav-item.notification .badge.counter-0,
header .debug-production {display: none}

/* Overlay */
.page-wrapper .page-content .overlay-header {background: #000; bottom: 0; display: none;left: 0; opacity: .5; position: fixed; right: 0; top: 0; z-index: 998}

/* Desktop */
@media (min-width: 768px) {
header #headerNavbar .nav-item {margin-right: 15px}
header #headerNavbar .nav-item > a > i {text-shadow: 0 0 1px #000}
header #headerNavbar .nav-item > a,
header #headerNavbar .nav-item > div a.dropdown-toggle {font-size: 1.5em;min-height: 40px;min-width: 40px;padding: 3px 8px;text-align: center}
header #headerNavbar .nav-item > div a.dropdown-toggle#account {padding-top: 2px}
header #headerNavbar .nav-item > div a.dropdown-toggle::after {content: none}
header #headerNavbar .nav-item > div .dropdown-menu {min-width: 200px}
header #headerNavbar .nav-item > div .dropdown-menu i {min-width: 20px}
header #headerNavbar .nav-item > div a.dropdown-item {font-size: .9rem; padding: .5rem 1rem}
header #headerNavbar .nav-item > div a.dropdown-item:hover,
header #headerNavbar .nav-item > div a.dropdown-item:focus,
header #headerNavbar .nav-item > div a.dropdown-item:active {box-shadow: none; outline: none}
header #headerNavbar .nav-item.notification > a {position: relative}
header #headerNavbar .nav-item.notification .badge {font-size: 0.5em; position: absolute; right: -4px; top: 0}
}

/* Mobile */
@media (max-width: 767.98px) {
header #headerNavbar {border-radius: 5px}
header #headerNavbar > ul {margin-top: .5rem}
header #headerNavbar .nav-item > div a.dropdown-toggle {display: none;text-align: left}
header #headerNavbar .nav-item > div .dropdown-menu {border: none; display: block; margin-top: 0; padding-top: 0}
header #headerNavbar .nav-item > a,
header #headerNavbar .nav-item > div a.dropdown-toggle,
header #headerNavbar .nav-item > div a.dropdown-item {border: 1px solid transparent; font-size: .9rem; padding: .5rem 1rem}
header #headerNavbar .nav-item > a:hover,
header #headerNavbar .nav-item > a:focus,
header #headerNavbar .nav-item > a:active,
header #headerNavbar .nav-item > div a.dropdown-toggle:hover,
header #headerNavbar .nav-item > div a.dropdown-item:hover,
header #headerNavbar .nav-item > div a.dropdown-item:focus,
header #headerNavbar .nav-item > div a.dropdown-item:active {box-shadow: none;outline: none}
header #headerNavbar i {min-width: 20px}
/* Header overlay */
.page-wrapper .page-content .overlay-header-show {display: block}
}