.navbar {
    background-color: #000a02ff; /* Темний фон для навігаційної панелі */
}

.nav-link {
    border-bottom: 2px solid transparent; /* Підкреслення при наведенні */
    transition: all 0.3s ease; /* Анімація при наведенні */
}

.nav-link:hover {
    color: #3ed5b2; /* Колір при наведенні на посилання */
    border-bottom-color: #3ed5b2;
}

.nav-link.active {
    color: #3ed5b2;
    border-bottom-color: #247e69c4; /* Підкреслення для активного посилання */
}

.btn-logout {
    background-color: rgb(75, 55, 55);
    border: rgb(75, 55, 55) 1px solid;
    color: #a7ffeb;
}

.scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #a7ffeb; /* Акцентний зелений */
    color: #121212; /* Темний колір іконки */
    border-radius: 50%;
    text-align: center;
    font-size: 2rem; /* Розмір іконки */
    line-height: 50px;
    z-index: 1000;
    cursor: pointer;
    opacity: 0; /* Схована за замовчуванням */
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.scroll-to-top-btn.show {
    opacity: 1;
    visibility: visible;
}

.username-navbar {
    color: #00bb8f; /* Колір імені користувача */
    font-weight: bold;
    /* Removed the redundant border declaration here */
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.username-navbar::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #00bb8f;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.username-navbar:hover::after {
    transform: scaleX(1);
}