.titlebar {
    order: 0;
    flex: 0 1 40px;
    align-self: auto;
    display: flex;
    align-items: center;
    position: relative;
    background: var(--primary-bg-color);
    width: 100%;
    padding: 0;
    z-index: 99;
    font-weight: 200;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.titlebar.sidebarOpen {
    box-shadow: 202px 0 2px 1px #000;
}

.titlebar.sidebarOpen.editActive {
    box-shadow: none;
}

.titlebar.editActive {
    background: var(--secondary-fg-color);
}

.titlebar button {
    width: 40px;
    height: 40px;
    font-size: 19px;
    padding: 4px 6px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--primary-fg-color);
}

.titlebar.editActive button {
    color: var(--primary-bg-color);
}

.titlebarViewMode {
    flex-shrink: 0;
}

.titlebarViewMode.hidden {
    display: none;
}

.titlebar.editActive .titlebarViewMode.hidden {
    display: block;
}

 .titlebarViewMode button {
    float: left;
    position: relative;
    opacity: .7;
}

.titlebar .titlebarViewMode button[data-viewmode="video"] {
    margin-left: 20px;
}

.titlebar .titlebarViewMode button[data-viewmode="video"]:after {
    content: ">";
    position: absolute;
    top: 8px;
    left: -13px;
    color: var(--primary-fg-color);
    font-weight: normal;
    font-size: 13px;
}

.titlebar.editActive .titlebarViewMode button[data-viewmode="video"]:after {
    color: var(--primary-bg-color);
}

.titlebarViewMode button.unsavedChanges:before {
    content: "*";
    position: absolute;
    top: -4px;
    right: -5px;
    color: #FF9900;
    font-weight: bold;
    font-size: 20px;
}

.titlebarViewMode button:hover {
    opacity: 1;
}


.titlebarViewMode button.active {
    background-color: transparent;
    /*color: var(--primary-fg-color);*/
    opacity: 1;
    pointer-events: none;
}

.titlebar.editActive .titlebarViewMode button.active {
    opacity: 1;
    pointer-events: none;
}

.titlebar .hypervideoActionButtonContainer {
    position: absolute;
    top: 0px;
    left: 160px;
}

.titlebar .titlebarTitle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-left: 10px;
    color: var(--primary-fg-color);
}

.titlebar .titlebarTitle > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.titlebar.editActive .titlebarTitle {
    color: var(--primary-bg-color);
}

.titlebar .titlebarTitle .hypervideoEditButton {
    margin-left: 10px;
}

.titlebar .titlebarTitle .hypervideoEditButton,
.titlebar .titlebarTitle .hypervideoDeleteButton {
    flex-shrink: 0;
    opacity: 0.7;
    display: none;
}

.titlebar .titlebarTitle .hypervideoEditButton:hover,
.titlebar .titlebarTitle .hypervideoDeleteButton:hover {
    opacity: 1;
}

.titlebar .titlebarTitle .hypervideoEditButton.active,
.titlebar .titlebarTitle .hypervideoDeleteButton.active {
    display: flex;
}

.titlebar .titlebarTitle .localFolderIndicator {
    font-size: 12px;
    opacity: 0.6;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 8px;
    display: none;
}

.titlebar.editActive .titlebarTitle .localFolderIndicator {
    display: inline;
}

.titlebar.editActive .titlebarTitle .localFolderIndicator:hover {
    opacity: 1;
}

.titlebar .titlebarActionButtonContainer {
    flex-shrink: 0;
}

/* Logging out mid-fullscreen drops you onto a page you cannot see, so it is
   withheld there. In the player that is now a menu entry rather than a button —
   on the entry, not on the menu, or My Settings and Manage Users would go with
   it. The standalone resource manager still builds a plain button. */
.frametrail-body.inFullscreen .titlebar .userMenuLogout,
.frametrail-body.inFullscreen .titlebar .logoutButton {
    display: none !important;
}

/* .logoutButton is still the resource manager's own titlebar (it builds one of
   its own and loads this stylesheet); the player's logout moved into the menu. */
.titlebar .titlebarActionButtonContainer .manageResourcesButton,
.titlebar .titlebarActionButtonContainer .adminSettingsButton,
.titlebar .titlebarActionButtonContainer .startEditButton,
.titlebar .titlebarActionButtonContainer .leaveEditModeButton,
.titlebar .titlebarActionButtonContainer .logoutButton,
.titlebar .titlebarActionButtonContainer .userSettingsMenu {
    float: left;
}

/* User menu
   The chip reuses .collaborationChip so "you" and "everyone else" read as one
   set, but that class is styled for a passive avatar — as a button it needs to
   look pressable and to sit on the 40px title bar baseline. */
.titlebar .titlebarActionButtonContainer .userSettingsMenu {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

/* The chip's own metrics have to be restated here, not just inherited from
   .collaborationChip: `.titlebar button` sizes every title-bar icon button at
   40px with 19px glyphs, and being one class plus one element it outranks the
   single class .collaborationChip. Without this the avatar renders at title-bar
   button size while the presence avatars beside it stay at 26px. */
.titlebar .userSettingsMenu .userSettingsButton {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    font-size: 11px;
    line-height: 1;
    /* Same reason: the transparent background of a title-bar button would win
       over the chip's. The inline colour set per user overrides both. */
    background-color: var(--secondary-bg-color);
    cursor: pointer;
}

.titlebar .userSettingsMenu .userSettingsButton:hover,
.titlebar .userSettingsMenu.active .userSettingsButton {
    box-shadow: 0 0 0 2px var(--primary-bg-color);
}

/* The shared .contextSelectList is positioned for a small inline button inside
   a panel (top: 20px, left: -2px). Under a 40px button pinned to the right edge
   of the title bar it would overlap the chip and run off screen. */
.titlebar .userSettingsMenu .contextSelectList {
    top: 40px;
    left: auto;
    right: 0;
    max-height: none;
    white-space: nowrap;
}

/* The first row names the logged-in user (this replaced the chip's tooltip).
   It is a label, not a command, so it opts out of the list's hover affordance. */
.titlebar .userSettingsMenu .contextSelectList .userMenuName {
    font-weight: bold;
    border-bottom: 1px solid var(--primary-bg-color);
}

.titlebar .userSettingsMenu .contextSelectList .userMenuName:hover {
    color: var(--primary-bg-color);
    background: var(--primary-fg-color);
    cursor: default;
}

.titlebar .titlebarActionButtonContainer .leaveEditModeButton {
    border-left: 1px solid #bbb;
}

/* Collaboration presence
   The siblings in this container are laid out by an explicit float rule above,
   so this needs its own — and it is only relevant while editing, like the
   resource manager and admin buttons. :not(:empty) keeps it out of the layout
   entirely when nobody else is here, which is the usual case. */
.titlebar .titlebarActionButtonContainer .collaborationPresence {
    display: none;
}

.titlebar.editActive .titlebarActionButtonContainer .collaborationPresence:not(:empty) {
    display: flex;
    float: left;
    align-items: center;
    height: 40px;
    max-width: 240px;
    padding: 0 8px 0 4px;
    border-right: 1px solid #bbb;
    overflow: hidden;
}

.newHypervideoDialog .message.error {
    position: absolute;
}

.videoSourceTabs .uploadNewVideoResource {
    position: absolute;
    right: 0px;
    top: -35px;
}

.shareDialog input[type="text"], .shareDialog textarea {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin-bottom: 20px;
}