﻿nav.navbar {
    padding: 0;
    margin: 0 var(--nav-menu-marging);
    border-bottom: 1px solid var(--dark-color);
    background-color: rgb(256,256,256, 0.8) !important;
}
nav .navbar-brand {
    padding: 0;
    border: none;
}
nav .navbar-brand img {
    height: 45px;
}
nav .navbar-toggler {
    padding: 0;
    border: none;
}
nav .navbar-toggler:focus {
    box-shadow: none;
}
nav .navbar-toggler img {
    height: var(--nav-menu-height);
}
nav #offcanvasNavbar {
    width: 330px;
}
nav #offcanvasNavbar .offcanvas-title {
    font-weight: bold;
}
nav #offcanvasNavbar .offcanvas-header {
    padding: var(--nav-menu-padding) 0;
    margin: 0 var(--nav-menu-marging);
    border-bottom: var(--nav-menu-border-width) solid var(--dark-color);
}
nav #offcanvasNavbar .btn-close-hidden {
    border: none;
    padding: 0;
    background: none;
}
nav #offcanvasNavbar .btn-close-hidden img {
    height: var(--nav-menu-height);
}
nav .offcanvas-body {
    padding: var(--nav-menu-marging);
}
nav .offcanvas-body .navbar-nav {
    height: fit-content;
}
nav .nav-item {
    font-weight: bold;
    padding: 8px;
}
nav .nav-item:has(.active) {
    background-color: var(--light-turquoise);
}
nav .nav-item:has(br) {
    padding: 0;
    height: 24px;
}
nav .nav-item .nav-link {
    padding: 0;
    text-decoration: none;
}
nav .nav-item .nav-link.lang {
    display: inline-block;
}
nav .nav-item .nav-link.lang svg {
    height: 21px;
    width: 28px;
}
nav .nav-item .nav-link.lang:not(:last-child) svg {
    margin-right: 7px;
}
nav .offcanvas-bottom {
    text-align: center;
    border-top: var(--nav-menu-border-width) solid var(--dark-color);
    margin: 0 var(--nav-menu-marging);
}
nav .offcanvas-bottom {
    text-align: center;
    border-top: var(--nav-menu-border-width) solid var(--dark-color);
    margin: 0 var(--nav-menu-marging);
}
nav .offcanvas-bottom > div {
    padding: 10px;
}

nav .admin-menu .nav-item {
    height: 30px;
    padding: 4px 8px;
}

@media (max-width: 520px) {
    .navbar .navbar-brand {
        display: none;
    }
    .navbar .middle-text {
        font-size: 1em;
    }
    .navbar .slogan {
        max-width: calc(100% - var(--nav-menu-marging) * 2 - 35px);
        text-align: center;
        font-size: 0.8em;
    }
}