/*
    note:
    rem scales according to the root font size; px does not
    that's why we're chaning fontsize of breacrumbs from px to rem for accessibilty.
*/

.ttb-topbar {
    --ttb-color-topbar-bg: #3EACDD;
    --ttb-color-text: #183f82;
    --ttb-color-breadcrumb-bg: #bfe9f4;
    --ttb-color-breadcrumb-current-bg: #ffffff;
    --ttb-color-user-bg: #ffffff;
    --ttb-color-avatar-fallback-bg: #cceff5;
    --ttb-color-hamburger-bar: #ffffff;
    --ttb-topbar-min-height: 54px;
    --ttb-topbar-padding-block: 0px;
    --ttb-topbar-padding-inline: 12px;
    --ttb-topbar-gap: 10px;
    --ttb-breadcrumb-height: 62px;
    --ttb-breadcrumb-inner-height: 52px;
    --ttb-breadcrumb-overlap: 36px;
    --ttb-breadcrumb-icon-overlap: 18px;
    --ttb-breadcrumb-shell-padding: 5px;
    --ttb-breadcrumb-item-min-width: 214px;
    --ttb-breadcrumb-icon-only-width: 70px;
    --ttb-breadcrumb-compact-current-min-width: 150px;
    --ttb-breadcrumb-icon-size: 38px;
    --ttb-breadcrumb-text-size: 1.125em;
    --ttb-radius-covered: 4px;
    --ttb-radius-exposed: 999px;
    --ttb-radius-user-tile: 4px;
    --ttb-radius-avatar: 999px;
    --ttb-radius-hamburger: 14px;
    --ttb-user-height: 48px;
    --ttb-user-max-width: 220px;
    --ttb-user-avatar-size: 36px;
    --ttb-user-avatar-only-size: 48px;
    --ttb-hamburger-size: 48px;
    --ttb-hamburger-bar-width: 24px;
    --ttb-hamburger-bar-height: 3px;
    --ttb-hamburger-bar-gap: 5px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: var(--ttb-topbar-gap);
    width: 100%;
    min-height: var(--ttb-topbar-min-height);
    padding-block: var(--ttb-topbar-padding-block);
    padding-inline: var(--ttb-topbar-padding-inline);
    box-sizing: border-box;
    background: var(--ttb-color-topbar-bg);
    color: var(--ttb-color-text);
}
/*
.ttb-breadcrumb-zone {
    flex: 1 1 auto;
    min-width: 0;
}*/

.ttb-breadcrumb {
    display: flex;
    /*
     * All breadcrumb items receive the height of the tallest item.
     */
    align-items: stretch;
    min-width: 0;
    width: 100%;
    /*
     * Keep the normal height, but allow enlargement when the
     * accessibility font creates additional lines.
     */
    min-height: var(--ttb-breadcrumb-height);
    height: auto;
    /*
     * Horizontal overflow is still hidden. Because the height is now
     * automatic, the text is no longer clipped vertically.
     */
    overflow: hidden;
    isolation: isolate;
}

    .ttb-breadcrumb.ttb-breadcrumb-scrollable {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scroll-behavior: smooth;
    }

    .ttb-breadcrumb > .talking-host {
        flex: 0 0 auto;
        display: flex;
        align-self: stretch;
        margin-inline-start: calc(var(--ttb-breadcrumb-overlap) * -1);
        font: inherit;
        color: inherit;
    }
        .ttb-breadcrumb > .talking-host:first-child {
            margin-inline-start: 0;
        }

        .ttb-breadcrumb > .talking-host:has(.ttb-breadcrumb-shell.ttb-icon-only) {
            margin-inline-start: calc(var(--ttb-breadcrumb-icon-overlap) * -1);
        }

        .ttb-breadcrumb > .talking-host:first-child:has(.ttb-breadcrumb-shell.ttb-icon-only) {
            margin-inline-start: 0;
        }

    .ttb-breadcrumb.ttb-breadcrumb-scrollable > .talking-host {
        flex: 0 0 auto;
    }

.ttb-breadcrumb-shell {
    position: relative;
    z-index: var(--ttb-breadcrumb-layer);
    min-height: var(--ttb-breadcrumb-height);
    height: auto;
    display: flex;
    width: var(--ttb-breadcrumb-item-min-width);
    min-width: var(--ttb-breadcrumb-item-min-width);
    max-width: var(--ttb-breadcrumb-item-min-width);
    padding: var(--ttb-breadcrumb-shell-padding);
    border-start-start-radius: var(--ttb-radius-covered);
    border-end-start-radius: var(--ttb-radius-covered);
    border-start-end-radius: var(--ttb-radius-exposed);
    border-end-end-radius: var(--ttb-radius-exposed);
    background: var(--ttb-color-topbar-bg);
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}
    .ttb-breadcrumb-shell.ttb-icon-only {
        width: var(--ttb-breadcrumb-icon-only-width);
        min-width: var(--ttb-breadcrumb-icon-only-width);
        max-width: var(--ttb-breadcrumb-icon-only-width);
    }

.ttb-breadcrumb-item {
    flex: 1 1 auto;
    min-height: var(--ttb-breadcrumb-inner-height);
    height: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    padding-block: 1px;
    padding-inline: 36px 16px;
    border-start-start-radius: var(--ttb-radius-covered);
    border-end-start-radius: var(--ttb-radius-covered);
    border-start-end-radius: var(--ttb-radius-exposed);
    border-end-end-radius: var(--ttb-radius-exposed);
    background: var(--ttb-color-breadcrumb-bg);
    box-sizing: border-box;
    overflow: hidden;
}

.ttb-breadcrumb-shell.ttb-current .ttb-breadcrumb-item {
    background: var(--ttb-color-breadcrumb-current-bg);
    font-weight: 700;
}

.ttb-breadcrumb-shell.ttb-icon-only .ttb-breadcrumb-item {
    padding-inline: 10px;
}

.ttb-breadcrumb-shell.ttb-two-lines .ttb-breadcrumb-text {
    white-space: normal;
    line-height: 0.9;
}

.ttb-breadcrumb-shell.ttb-single .ttb-breadcrumb-item {
    justify-content: center;
}

.ttb-mode-compact .ttb-breadcrumb > .talking-host:has(.ttb-breadcrumb-shell.ttb-current),
.ttb-mode-compact .ttb-breadcrumb > .talking-host:has(.ttb-breadcrumb-shell.ttb-single) {
    flex: 1 1 auto;
    min-width: 0;
}

.ttb-mode-compact .ttb-breadcrumb > .talking-host:has(.ttb-breadcrumb-shell.ttb-current) .ttb-breadcrumb-shell,
.ttb-mode-compact .ttb-breadcrumb > .talking-host:has(.ttb-breadcrumb-shell.ttb-single) .ttb-breadcrumb-shell {
    width: 100%;
    min-width: var(--ttb-breadcrumb-compact-current-min-width);
    max-width: none;
}

.ttb-breadcrumb-icon {
    width: var(--ttb-breadcrumb-icon-size);
    height: var(--ttb-breadcrumb-icon-size);
    object-fit: contain;
    flex: 0 0 auto;
}

.ttb-breadcrumb-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: center;
    font-family: inherit;
    font-size: var(--ttb-breadcrumb-text-size);
    line-height: 1;
    color: var(--ttb-color-text);
}

.ttb-user {
    position: relative;
    z-index: 20;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--ttb-user-height);
    max-width: var(--ttb-user-max-width);
    padding: 6px 12px;
    border-radius: var(--ttb-radius-user-tile);
    background: var(--ttb-color-user-bg);
    color: inherit;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    pointer-events: auto;
}

.ttb-breadcrumb-zone {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-width: 0;
}

    .ttb-user * {
        pointer-events: none;
    }
    /* additions: */
    .ttb-user:hover:not(:disabled) {
        background: #f5fbff;
    }

    .ttb-user:active:not(:disabled) {
        background: #eaf7fc;
    }

    .ttb-user:focus-visible {
        outline: 3px solid rgba(24, 63, 130, 0.28);
        outline-offset: 2px;
    }

    .ttb-user:disabled {
        cursor: default;
    }


.ttb-user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: start;
    color: #164891;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.15;
    font-family: 'Abraham', Arial, sans-serif;
}

.ttb-user-avatar {
    width: var(--ttb-user-avatar-size);
    height: var(--ttb-user-avatar-size);
    border-radius: var(--ttb-radius-avatar);
    object-fit: cover;
    flex: 0 0 auto;
}

.ttb-user-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ttb-color-avatar-fallback-bg);
    font-weight: 700;
}

.ttb-user-avatar-only {
    width: var(--ttb-user-avatar-only-size);
    height: var(--ttb-user-avatar-only-size);
    padding: 6px;
    justify-content: center;
    border-radius: var(--ttb-radius-avatar);
}

    .ttb-user-avatar-only .ttb-user-name {
        display: none;
    }

.ttb-hamburger {
    flex: 0 0 auto;
    width: var(--ttb-hamburger-size);
    height: var(--ttb-hamburger-size);
    border-radius: var(--ttb-radius-hamburger);
    background: rgba(255, 255, 255, .01);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ttb-hamburger-bar-gap);
    cursor: pointer;
}

    .ttb-hamburger span {
        display: block;
        width: var(--ttb-hamburger-bar-width);
        height: var(--ttb-hamburger-bar-height);
        border-radius: var(--ttb-hamburger-bar-height);
        background: var(--ttb-color-hamburger-bar);
    }

    .ttb-hamburger:hover {
        background: rgba(255, 255, 255, .08);
    }

    .ttb-hamburger:active {
        background: rgba(255, 255, 255, .14);
    }

.ttb-mode-reduced-user {
    --ttb-user-max-width: var(--ttb-user-avatar-only-size);
}

.ttb-mode-compact {
    --ttb-topbar-gap: 8px;
    --ttb-breadcrumb-overlap: 34px;
}

    .ttb-mode-compact .ttb-breadcrumb-shell.ttb-current {
        min-width: var(--ttb-breadcrumb-compact-current-min-width);
        max-width: none;
    }

    .ttb-mode-compact .ttb-breadcrumb-shell.ttb-icon-only {
        width: var(--ttb-breadcrumb-icon-only-width);
        min-width: var(--ttb-breadcrumb-icon-only-width);
        max-width: var(--ttb-breadcrumb-icon-only-width);
    }

@media (max-width: 600px) {
    .ttb-topbar {
        --ttb-topbar-gap: 8px;
        --ttb-topbar-padding-block: 0px;
        --ttb-topbar-padding-inline: 8px;
        --ttb-breadcrumb-overlap: 38px;
        --ttb-breadcrumb-icon-overlap: 16px;
        /*
         * Same size as the top-bar base on phone,
         * but still reacts to font enlargement.
         */
        --ttb-breadcrumb-text-size: 1em;
    }
}

.ttb-user,
.ttb-hamburger {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ttb-user:hover,
.ttb-user:focus,
.ttb-user:focus-visible,
.ttb-user:active,
.ttb-hamburger:hover,
.ttb-hamburger:focus,
.ttb-hamburger:focus-visible,
.ttb-hamburger:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ttb-user,
.ttb-hamburger {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ttb-user:hover,
.ttb-user:focus,
.ttb-user:focus-visible,
.ttb-user:active,
.ttb-hamburger:hover,
.ttb-hamburger:focus,
.ttb-hamburger:focus-visible,
.ttb-hamburger:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.ttb-hamburger:disabled {
    cursor: default;
}

.ttb-hamburger:disabled:hover,
.ttb-hamburger:disabled:active {
    background: rgba(255, 255, 255, 0.01);
}

.ttb-user-full {
    width: var(--ttb-standard-tile-width, 180px);
    min-width: var(--ttb-standard-tile-width, 180px);
    max-width: var(--ttb-standard-tile-width, 180px);
    box-sizing: border-box;
    overflow: hidden;
    white-space: normal;
}

.ttb-user-full .ttb-user-name {
    flex: 1;
    min-width: 0;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.ttb-user-full .ttb-user-avatar {
    flex: 0 0 auto;
}

/*
 * While waiting for the first responsive measurement, hide only
 * the user tile. Never hide the hamburger and breadcrumbs.
 */
.ttb-topbar.ttb-measuring .ttb-user {
    visibility: hidden;
}

.ttb-user-full .ttb-user-name {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    direction: rtl;
    text-align: right !important;
}