#sideContent {
    display: flex;
    margin-top: 59px;
    margin-left: auto;
    justify-content: end;
}

.monad-icon-button {
    float: right;
    padding: .4em 0.6em;
    text-align: center;
    min-width: 2.5em;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
    color: var(--monad-nav-color);
    background: var(--monad-nav-background);
    border: var(--monad-nav-border);
    border-radius: 0;
}

    .monad-icon-button:hover {
        color: var(--monad-nav-color-hover);
        background: var(--monad-nav-background-hover);
        border: var(--monad-nav-border-hover);
    }

    .monad-icon-button .fa, .monad-icon-button .fab, .monad-icon-button .fas, .monad-nav-login-info .fa, .monad-user-profile-link:before, .monad-login-link:before, .monad-basket-link:before, .monad-search-button:before, .monad-search-icon:before {
        font-size: 1.2em;
    }

.monad-nav-icons {
    display: none;
}

.monad-nav-icons-links {
    white-space: nowrap;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

.monad-nav {
    width: auto;
    background: var(--monad-nav-background);
}

    .monad-nav > ul {
        width: 100%;
    }

        .monad-nav > ul > li {
            white-space: nowrap;
            float: left;
            text-align: left;
        }

            .monad-nav > ul > li > ul, .monad-nav > ul > li > a, .monad-nav > ul > li > span {
                float: left;
                text-transform: uppercase;
                font-weight: 700;
                padding: 9px 1em 10px 1em;
                color: var(--monad-nav-color);
                background: var(--monad-nav-background);
                border: var(--monad-nav-border);
                width: 100%;
                -webkit-transition: border .3s ease, color .3s ease, background .3s ease; /* Saf3.2+, Chrome */
                -moz-transition: border .3s ease, color .3s ease, background .3s ease; /* FF4+ */
                -o-transition: border .3s ease, color .3s ease, background .3s ease; /* Opera 10.5+ */
                transition: border .3s ease, color .3s ease, background .3s ease;
                border-radius: 0;
            }

                .monad-nav > ul > li > a:hover, .monad-nav > ul > li > ul:hover {
                    color: var(--monad-nav-color-hover);
                    background: var(--monad-nav-background-hover);
                    border: var(--monad-nav-border-hover);
                }

            .monad-nav > ul > li > a.ui-state-active {
                color: var(--monad-nav-color-selected);
                background: var(--monad-nav-background-selected);
                border: var(--monad-nav-border-selected);
            }

    .monad-nav.monad-nav-browse {
        margin-left: var(--monad-nav-browse-margin, auto);
    }

        .monad-nav.monad-nav-browse ul {
            float: right;
        }

.monad-nav-browse {
    background: #79746F;
}
        .monad-nav-browse > ul > li a {
            color: #FFFFFF;
            background: #79746F;
            border: #79746F;
        }
    .monad-nav-browse > ul > li a:hover {
        color: #FFFFFF;
        background: #79746F;
        border: #79746F;
    }

.monad-nav-browse > ul > li > a.ui-state-active {
    color: #FFFFFF;
    background: #79746F;
    border: #79746F;
}

.monad-nav-login-info {
    border: none;
}



.monad-nav-login-info-item:not(:first-child)::before, .monad-nav-customer-service-info-item:not(:first-child)::before {
    content: none;
}

#liWorkstationLink a.notset {
    background-color: var(--monad-highlight-background);
    border: var(--monad-highlight-border);
    color: var(--monad-highlight-color);
}

    #liWorkstationLink a.notset:hover {
        background-color: var(--monad-highlight-background);
        border: var(--monad-highlight-border);
        color: var(--monad-highlight-color);
    }

#liContextUser {
    position: relative;
}

#liContextUserNotSet a {
    background-color: var(--monad-highlight-background);
    border: var(--monad-highlight-border);
    color: var(--monad-highlight-color);
}

    #liContextUserNotSet a:hover {
        background-color: var(--monad-highlight-background);
        border: var(--monad-highlight-border);
        color: var(--monad-highlight-color);
    }

.monad-nav-customer-service-info .monad-context-user-alert {
    text-align: left;
    display: inline-block;
    background-color: var(--monad-highlight-background);
    border: var(--monad-highlight-border);
    color: var(--monad-highlight-color);
    cursor: default;
}


.monad-nav-title {
    display: none;
}

.monad-nav-search {
    float: none;
    clear: none;
    padding: 0;
    white-space: nowrap; 
}
#liLoginUserName span {
    max-width: 15em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.monad-icon-button.monad-whats-on-icon {
    padding: 0.4em 1em;
}

.monad-search-box {
    margin-bottom: .15em;
    display: flex;
}
    .monad-search-box label {
        margin: 0;
    }

    .monad-search-box input {
        margin: 0;
        width: 170px;
        font-size: 14px;
    }

    .monad-nav-search.fa {
        font-size: 1.4em;
        vertical-align: middle;
    }

.monad-search-button {
    padding: .5em 1em;
    display: inline-block;
    color: #fff;
}




@media screen and (max-width: 976px) {
    .monad-nav-icons {
        display: flex;
        width: 100%;
    }

    #sideContent {
        display: inline-block;
        overflow: visible;
        float: left;
        width: 100%;
        margin-top: -39px;
    }

    #liLoginUserName span {
        max-width: none;
        overflow: hidden;
        white-space: normal;
        text-overflow:unset;
    }
    .monad-nav, .monad-nav ul li {
        width: 100%;
    }
    .monad-change-context-user-text {
        display: inline;
    }

    .monad-nav-login-info {
    }

        .monad-nav-login-info > ul > li > a {
            background: inherit;
        }


    .monad-nav-login-info, .monad-nav-customer-service-info, .monad-nav-customer-service-menu, .monad-nav-search {
        display: none
    }

  
        .monad-login-info-visible .monad-nav-login-info,.monad-customer-service-menu-visible .monad-nav-customer-service-info,.monad-customer-service-menu-visible .monad-nav-customer-service-menu, .monad-search-visible .monad-nav-search {
            display: flex;
            position: relative;
            height: auto;
            width: 100%;
            background: var(--monad-nav-background);
            font-size: 0.9em;
        }

    .monad-search{
        margin: 0 1em;
    }

        .monad-login-info-visible #loginInfoIcon,.monad-customer-service-menu-visible #customerServiceIcon, .monad-browse-menu-visible #sideContentIcon, .monad-search-visible #searchIcon {
            background: var(--monad-nav-background-selected);
            color: var(--monad-nav-color-selected);
            border: var(--monad-nav-border-selected);
        }


    .monad-nav.monad-nav-browse {
        width: 100%;
        margin: 0;
    }
        .monad-nav.monad-nav-browse > ul {
            float: none;
        }

    .monad-nav-browse .monad-nav-title {
        display: inline-block;
        width: 100%;
    }

        .monad-nav-browse .monad-nav-title a {
            display: inline-block;
            width: 100%;
            padding: .4em 1em;
            color: var(--monad-nav-color);
        }

            .monad-nav-browse .monad-nav-title a .fa {
                padding-left: 0.5em;
            }

    .monad-nav-browse ul {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: max-height 0.3s ease-in-out;
        -moz-transition: max-height 0.3s ease-in-out;
        -o-transition: max-height 0.3s ease-in-out;
        transition: max-height 0.3s ease-in-out;
    }

    .monad-nav-browse.open ul {
        max-height: 700px;
    }

    #liBasket {
        display: none;
    }

    #customerServiceIcon.monad-context-user-has-alert  {
        background-color: var(--monad-highlight-background);
        color: var(--monad-highlight-color);
        border: var(--monad-highlight-border);
    }

    .monad-nav-customer-service-info .monad-context-user-alert {
        width: 100%;
        display: block;
    }
}
