.app-nav {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(var(--white-color));
    z-index: 11111 !important;
}

.app-nav.mud-button-group-filled {
    box-shadow: 0 4px 10px rgba(var(--black-color), .1) !important;
}

.app-nav .mud-nav-item {
    min-width: 150px;
    min-height: 88px;
}

.app-nav .mud-nav-item:first-child .mud-nav-link {
    border-top-left-radius: var(--raduis-sm);
    border-bottom-left-radius: var(--raduis-sm);
}

.app-nav .mud-nav-item:last-child .mud-nav-link {
    border-top-right-radius: var(--raduis-sm);
    border-bottom-right-radius: var(--raduis-sm)
}

.app-nav .mud-nav-link {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.app-nav .mud-nav-link:hover {
    background-color: #3370ab !important;
    color: rgb(var(--white-color)) !important;
}

.app-nav .mud-nav-link:focus,
.app-nav .mud-nav-link.active {
    background-color: rgb(var(--primary-color)) !important;
    color: rgb(var(--white-color)) !important;
}

.app-nav .mud-nav-link:hover .mud-icon-root,
.app-nav .mud-nav-link:focus .mud-icon-root,
.app-nav .mud-nav-link.active .mud-icon-root {
    color: rgb(var(--white-color)) !important;
}

.app-nav .mud-icon-root {
    margin-bottom: .25rem;
}

.app-nav .mud-nav-link-text {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    text-align: center !important;
}

.app-nav.mud-button-group-root .mud-button-root,
.app-nav.mud-button-group-filled {
    border-radius: var(--raduis-sm);
}