.wialus-header.wialus-header {
    grid-template-rows: 28px 1fr 0;

    background-color: #ffffff;
    padding: 0;
    height: 118px;

    font-style: normal;

    /* remove 1px white gap on top, left & right */
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;

    /* take full page width & keep in normal document flow */
    width: 100vw;
    position: relative;
    left: calc(-50vw + 50%);
}

div.wialus-header__header-left {
    height: 100%;
    padding-left: 20px;
    padding-top: 0.25rem;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

div.wialus-header__header-right {
    height: 100%;
    padding-right: 20px;
    padding-top: 0.25rem;
    margin-left: 0.25rem;
}

div.wialus-header__header-right-item {
    margin-left: 0.5rem;

    /* same height as user menu button */
    height: 40px;
}

.wialus-header > div.wialus-header__header-left > img {
    content: url("/static/assets/img/spark-logo-green-v1.svg");
    padding-left: 0;
    padding-right: 0;
    width: 120px;
}

span.wialus-header__app-title {
    display: inline-block;
    padding-left: 40px;
    margin-left: 0;
    vertical-align: middle;
    margin-top: 0;
    border-left: none;
    width: 100%;
}

div.wialus-header__header-top {
    background: rgb(0, 175, 85);
    height: 28px;
}

div.wialus-header__header-bottom {
}

.wialus-header__nav-dropdown.wialus-header__nav-dropdown {
    margin-right: 10px;
    /* nav dropdown icon is quite narrow so moving it slightly more left to make spacing look similar to the right side */
    margin-left: -5px;
}

.wialus-header__nav-dropdown__icon.wialus-header__nav-dropdown__icon {
    display: inline-block;
    vertical-align: text-top;
    overflow: visible;
    padding-right: 0;

    /* make icon not so black */
    filter: contrast(25%);
    height: 30px;

    /* move icon a little higher on smaller views */
    margin-top: -2px;
}

.wialus-header__user-circle.wialus-header__user-circle.wialus-header__user-circle,
.wialus-header__user-circle.wialus-header__user-circle.wialus-header__user-circle:hover,
.wialus-header__user-circle.wialus-header__user-circle.wialus-header__user-circle:active {
    background-color: rgb(255, 155, 0);
    font-weight: 500;
}

/* user dropdown */
.wialus-header__header-right-item.wialus-header__dropdown {
    /* add a small margin to vertically align with logo & icon on the left side */
    margin-top: 5px;
}

.wialus-header__header-right-item.wialus-header__toolbar {
    /* add a small margin to vertically align with logo & icon on the left side */
    margin-top: 5px;
}

.wialus-header__toolbar {
    display: flex;
    align-items: center;
}

/* TODO: remove once https://gitlab.org.wialus.co.nz/libs/js/wialus-header-with-menu/-/work_items/8 has been resolved and all apps updated to that version */
.wialus-header__dropdown-menu.wialus-header__dropdown-menu {
    width: max-content;
}

.wialus-header__dropdown-item.wialus-header__dropdown-item:active,
.wialus-header__dropdown-item.wialus-header__dropdown-item a:active {
    background-color: rgb(0, 175, 85);
    color: #FFFFFF;
}

@media (min-width: 576px) {
    .wialus-header.wialus-header {
        height: 88px;
        justify-content: space-between
    }

    div.wialus-header__header-left {
        padding-left: 40px;
        flex-wrap: nowrap;
        padding-top: 0;
        padding-bottom: 0;
        height: auto;
    }

    div.wialus-header__header-right {
        padding-right: 40px;
        padding-top: 0;
        padding-bottom: 0;
        height: auto;
    }

    div.wialus-header__header-right-item {
        margin-left: 1rem;
    }

    span.wialus-header__app-title {
        border-left: solid 1px grey;
        width: auto;

        /* more specific px values to center the "border-left" */
        padding-left: 12px;
        /* more specific px values to center the "border-left" */
        margin-left: 14px;

        /* force app-title text to be centered next to chorus logo */
        height: 24px;
        /* force app-title text to be centered next to chorus logo */
        line-height: 24px;
    }

    /* user dropdown */
    .wialus-header__header-right-item.wialus-header__dropdown {
        margin-top: 0;
    }

    .wialus-header__nav-dropdown__icon.wialus-header__nav-dropdown__icon {
        margin-top: 0;
    }

    .wialus-header__header-right-item.wialus-header__toolbar {
        margin-top: 0;
    }
}