@include media-breakpoint-down(md) {
    // Layout Contents: Adjusting the content to fit perfectly on mobile devices
    #layout-content {
        .panel-profile .panel-profile-header .img-profile-header-background {
            min-height: 65px !important;
        }
    }

    .topbar {
        &, > .container {
            padding-left: 0;
            padding-right: 0;
        }
    }

    #topbar {
        > .container {

            .topbar-brand {
                text-overflow: ellipsis;
                flex-grow: 1;

                a.navbar-brand {
                    display: flex !important;
                    justify-content: center; // To center the logo if truncated
                    margin-left: 10px !important;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 16px;
                }

                a.navbar-brand-text {
                    justify-content: start;
                }
            }

            // Right space for the Sign up/in button with the screen border
            .topbar-actions {
                padding-right: 13px;
            }
        }
    }
}

// Size for the bottom menu
@include media-breakpoint-down(sm) {
    #topbar {
        > .container {
            > .nav > li > a {
                padding: 7px 8px 0;
            }

            // Bottom menu on small screens
            #top-menu-nav {
                position: fixed;
                bottom: 0;
                height: calc(var(--hh-ct-top-bar-height) + var(--hh-mobile-app-safe-area-inset-bottom, env(safe-area-inset-bottom))); // for the web view space (safe area) on mobile devices
                background-color: var(--hh-ct-bottom-menu-background-color);
                width: auto;
                min-width: 100%;
                justify-content: space-between !important;

                // Hide if no menu entries
                &:not(:has(li)) {
                    display: none;
                }

                > li > a {
                    padding: 0 5px 5px 5px;
                    min-width: 65px;
                    max-width: 20ch;
                    line-height: 12px !important;
                    font-size: 10px;
                    background-color: var(--hh-ct-bottom-menu-background-color);
                    color: var(--hh-ct-bottom-menu-text-color);

                    &.active,
                    &:hover,
                    &:active,
                    &:focus {
                        border-bottom: none !important;
                    }

                    &#space-menu {
                        padding-bottom: 0; // If the current space image is displayed

                        .no-space {
                            padding-bottom: 5px; // If "My Spaces" is displayed
                            display: flex;
                            flex-direction: column;
                        }

                        .space-acronym {
                            line-height: 20px;
                        }
                    }

                    i {
                        line-height: 35px;
                        font-size: 20px;
                        margin-bottom: 0;
                    }

                    > div > br {
                        display: none;
                    }
                }

                &.hide-menu-item-texts {
                    > li > a {
                        width: 50px;
                        padding: 0;
                        line-height: 0 !important;
                        font-size: 0;

                        i {
                            line-height: 50px;
                        }
                    }
                }
            }

            .notifications .dropdown-menu {
                position: fixed !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                top: 50px !important;
            }

            // Space browser
            .open #space-menu-dropdown {
                display: flex;
                flex-direction: column-reverse; // Display the search input at the bottom

                #space-menu-spaces {
                    max-height: calc(100vh - 250px) !important; // When filtering spaces, limit the results height
                }
            }
        }
    }


    body.hh-ct-menu-style-background {
        #topbar > .container > #top-menu-nav {
            border-top: solid 2px var(--hh-background4);

            > li > a {
                &.active,
                &:hover,
                &:active,
                &:focus {
                    background-color: var(--hh-ct-bottom-menu-text-color);
                    color: var(--hh-ct-bottom-menu-background-color);
                }
            }
        }
    }

    body.hh-ct-menu-style-bordered {
        #topbar > .container > #top-menu-nav {
            border-top: solid 3px var(--hh-background3);

            > li > a {
                margin-top: -3px;
                border-top: solid 3px var(--hh-background3);

                &.active,
                &:hover,
                &:active,
                &:focus {
                    border-top-color: var(--bs-accent);
                }
            }
        }
    }

    // Hide the search menu item on mobile for guests because of the Sign in/up button next to it
    body.hh-ct-is-guest #topbar #search-menu-nav {
        display: none;
    }
}
