.wc_title_bar { position: relative; background-color: #07b; color: #fff; text-shadow: none; text-transform: none; font-size: 14px; font-weight: normal; white-space: nowrap; /*overflow: hidden;*/ display: flex; }
.resizable-right .wc_title_bar { border-right: 1px solid #07b; }
.resizable-left .wc_title_bar { border-left: 1px solid #07b; }

.panel.noresize > .wc_title_bar { width: 100%; }

.wc_title_bar.text_only { background-color: #08c; }
.wc_title_bar a { color: #fff; text-decoration: none; }

.wc_title_bar ul.bar.dropdown-menu { padding: 5px 0px; border-radius: 0px; border-top: none; border-bottom: none; margin: 0px; text-align: left; z-index: 30000; }
.wc_title_bar ul.bar.dropdown-menu.left { border-left: #0ae solid 4px; }
.wc_title_bar ul.bar.dropdown-menu.right { border-right: #0ae solid 4px; }
.wc_title_bar ul.bar.dropdown-menu li.active a,
.wc_title_bar ul.bar.dropdown-menu li.dropdown-submenu:hover > a { background-image: none; background-color: #08c; color: white }

.wc_title_bar > .nav { position: absolute; display: block; background-color: #08c; height: 44px; box-sizing: border-box; margin: 0; text-align: center; line-height: 44px; }
.wc_title_bar a.nav > i { opacity: 0.75; }
.wc_title_bar .open a > i,
.wc_title_bar a.nav:hover > i,
.wc_title_bar a.nav.open > i { opacity: 1; }

.wc_title_bar > .nav.back {}
.wc_title_bar > .nav.back > a { position: relative; display: inline-block; outline: 0; line-height: 44px; vertical-align: top; opacity: 0.75; }
.wc_title_bar > .nav.back > a:focus { background-color: #09d; opacity: 1; }
.wc_title_bar > .nav.back > a:hover,
.wc_title_bar > .nav.back.open > a.more { background-color: #0ae; opacity: 1; }
.wc_title_bar > .nav.back > a.button { width: 44px; }
.wc_title_bar > .nav.back > a.more { width: 32px; }
.wc_title_bar > .nav.back > a.more::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -1px; width: 0; border-left: 1px solid #07b; border-right: 1px solid #49d; cursor: pointer; }
.wc_title_bar > .nav.back > a.more i { margin: 14px 3px; }
.wc_title_bar > .nav.back:hover > a.more::before,
.wc_title_bar > .nav.back.open  > a.more::before { display: none;}
.wc_title_bar > .nav.back.open  > a.more i { background-position: -48px -32px; }

.wc_title_bar > .nav.back.open ul.dropdown-menu { display: block; }
.wc_title_bar ul.dropdown-menu.nav.more { max-height: 300px; overflow-y: auto; }
.wc_title_bar ul.dropdown-menu.nav.more i { margin-right: 5px; color: #555; }
.wc_title_bar ul.dropdown-menu.nav.more li.active.on i { color: white; }
.wc_title_bar ul.dropdown-menu.nav.more a.disabled,
.wc_title_bar ul.dropdown-menu.nav.more a.disabled i { color: #888; }
.wc_title_bar ul.dropdown-menu.nav.more > li > a.disabled:hover { background-color: inherit; cursor: inherit; }

.wc_title_bar a.bookmark { padding: 6px 20px; font: bold 11px/22px Verdana; }
.wc_title_bar a.bookmark img.icon { width: 16px; margin: 0; }

.wc_title_bar .cpath { position: relative; /*margin: 0 44px 0 65px;*/ height: 44px; width: 100%; /*overflow: hidden;*/ }
.wc_title_bar .cpath.root { /*margin-left: 0;*/ }
.wc_title_bar .cpath .editor { display: none; box-sizing: border-box; height: 44px; background-color: #08c; padding: 8px 140px 8px 8px; position: relative; }
.wc_title_bar .cpath.root .editor { padding-right: 140px; }
.wc_title_bar .cpath .PathEditor { display: block; box-sizing: border-box; margin: 0px; width: 100%; height: 28px; border: none; border-radius: 2px; background: #bdf; padding: 4px 6px 6px 28px; font: bold 11px Verdana; color: #444; box-shadow: none; }
.wc_title_bar .cpath .editor > i { position: absolute; left: 15px; top: 14px; color: #444; font-size: 16px; }
.wc_title_bar .cpath .PathEditor.error { background-color: #fee; }
.wc_title_bar .cpath .edit_trigger { display: none; }

.wc_title_bar .cpath .editor .message { position: absolute; left: 32px; z-index: 100; margin: 0 0 0 4px; border-radius: 3px; background-color: #f00; padding: 2px 4px; font-family: Verdana, sans-serif; line-height: 14px; white-space: normal; font-size: 10px; color: #fff; }
.wc_title_bar .cpath .editor .message::after { bottom: 100%; left: 8px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0,0,0,0); border-bottom-color: #f00; border-width: 3px; margin-left: -3px; }

/* pathbar path element breadcrumbs */
.wc_title_bar .title { display: block; background-color: #08c; overflow: hidden; line-height: 0px; }
.wc_title_bar .title a { display: inline-block; position: relative; box-sizing: border-box; height: 44px; outline: 0; padding-left: 16px; color: #fff; vertical-align: top; white-space: nowrap; text-decoration: none; text-overflow: ellipsis; transition: max-width .5s; }
.wc_title_bar .title a span.object i { font-size: 16px; font-weight: normal; position: relative; top: 1px; margin-right: 3px; }
.wc_title_bar .title a:first-child { padding-left: 12px; }
.wc_title_bar .title a:focus { background-color: #09d; }
.wc_title_bar .title a:focus > .object { opacity: 1; }
.wc_title_bar .title a:focus > i::after { border-left-color: #09d; }
.wc_title_bar .title a:hover { background-color: #0ae; color: #fff; text-decoration: none; max-width: 400px !important; /* need !important to override inline max-width style */ }
.wc_title_bar .title a:last-child:hover { max-width: none !important; }
.wc_title_bar .title a.expander { margin-left: 0; padding: 0 8px; font: 16px/41.5px Verdana; z-index: 3; opacity: 0.5; }
.wc_title_bar .title a.expander:hover { opacity: 1; }
.wc_title_bar .root .title { margin-left: 0; }
.wc_title_bar .title img { width: 16px; }
.wc_title_bar .title img.icon { margin-top: 0; }

.wc_title_bar .title > a > .object { display: block; position: relative; max-width: 400px; padding-right: 8px; font: bold 11px/44px Verdana; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.wc_title_bar .title > a.LastElement > .object { max-width: none; }
.wc_title_bar .title > a:hover > .object { opacity: 1; }
.wc_title_bar .title > a > i { position:absolute; top: -4px; bottom: -4px; right: -1px; z-index: 3; }
.wc_title_bar .title > a.Element > i::before { content: ""; position:absolute; top: 0; right: -8px; border-left: 9px solid #07b; border-top: 26px solid transparent; border-bottom: 24px solid transparent; z-index: 2; }
.wc_title_bar .title > a > i::after { content: ""; position:absolute; top: 0; right: -7px; border-left: 9px solid #08c; border-top: 26px solid transparent; border-bottom: 24px solid transparent; z-index: 3; }

.wc_title_bar .title > a:hover > i::after { border-left-color: #0ae; }
.wc_title_bar .title > a.cutoff > span::after { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 24px; background: linear-gradient(to right, rgba(0,136,204,0),rgba(0,136,204,1) 90%); pointer-events: none; }
.wc_title_bar .title a.cutoff:hover > span::after { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 24px; background: transparent; }

.wc_title_bar.style-summary .cpath { margin: 0px; }

.wc_title_bar.style-dashboard,
.wc_title_bar.style-slideout { background-color: #09d; }
.wc_title_bar.style-dashboard > .nav,
.wc_title_bar.style-slideout > .nav { background-color: #0ae; }
.wc_title_bar.style-dashboard > .nav.back > a:hover,
.wc_title_bar.style-slideout > .nav.back > a:hover,
.wc_title_bar.style-dashboard > .nav.back.open > a.more,
.wc_title_bar.style-slideout > .nav.back.open > a.more { background-color: #0bf; }
.wc_title_bar.style-dashboard > a,
.wc_title_bar.style-slideout > a { background-color: #0ae; }
.wc_title_bar.style-dashboard .title, 
.wc_title_bar.style-slideout .title { background-color: #0ae; }
.wc_title_bar.style-dashboard .title > a,
.wc_title_bar.style-slideout .title > a { width: 100%; }

.wc_title_bar.style-slideout-form { height: auto; background-color: #f4f4f4; border: none; border-bottom: 1px solid #ddd; border-top: none; }
.wc_title_bar.style-slideout-form  .title { background-color: #f4f4f4; }
.wc_title_bar.style-slideout-form  .title > a { color: #555; }
div.slideout .wc_title_bar.style-slideout-form .title > a:hover,
div.slideout .wc_title_bar.style-slideout-form .title > a:focus,
.wc_title_bar.style-slideout-form  .title > a:hover,
.wc_title_bar.style-slideout-form  .title > a:focus,
.wc_title_bar.style-slideout-form .options > li > a:focus { background-color: #f4f4f4; }
.wc_title_bar.style-slideout-form  > .nav { background-color: #f4f4f4; }
.wc_title_bar.style-slideout-form  .options  > li > a { background-color: #f4f4f4; color: #555; }
.wc_title_bar.style-slideout-form  .options  > li > a:hover { background-color: #f4f4f4; }
.wc_title_bar.style-slideout-form div.nav.back > a { color: #555; background-color: #f4f4f4; }
.wc_title_bar.style-slideout-form div.nav.back > a:hover { background-color: #f4f4f4; }


.wc_title_bar.style-dashboard .title > a img,
.wc_title_bar.style-slideout .title > a img { width: 24px; }
.wc_title_bar.style-dashboard .title a:hover,
.wc_title_bar.style-slideout .title a:hover { background-color: #0ae; }

/* z-index:2 is needed for path bar option icon/fade to overlap path links (1 would be enough for that), and grid and other view elements that have a z-index of 1 (2 required for that). */
.wc_title_bar .options { display: block; position: absolute; z-index: 1001; top: 0; right: 0; margin: 0; }
.wc_title_bar .options > li > a { display: block; box-sizing: border-box; width: 44px; outline: 0; background-color: #08c; font-size: 16px; line-height: 44px; color: #fff; text-align: center; }
.wc_title_bar .options > li > a:focus { background-color: #09d; }
.wc_title_bar .options > li > a:focus > i { opacity: 1; }
.wc_title_bar .options > li > a:hover,
.wc_title_bar .options > li.open > a { background-color: #0ae; }
.wc_title_bar .options > li > a i { opacity: 0.85; }
.wc_title_bar .options > li > a:hover i,
.wc_title_bar .options > li.open > a > i { opacity: 1; }
.wc_title_bar .options > li.open i.view,
.wc_title_bar .options > li { float: left; }

.wc_title_bar.style-dashboard .options > li > a,
.wc_title_bar.style-slideout .options > li > a { display: block; background-color: #0ae; color: #fff; }
.wc_title_bar.style-dashboard .options > li > a:hover,
.wc_title_bar.style-slideout .options > li > a:hover { background-color: #0ae; }

div.slideout .wc_title_bar > .nav:hover,
div.slideout .wc_title_bar > .nav.open,
div.slideout .wc_title_bar li.navbar-dropdown.open > a { background-color: #0bf; }
div.slideout .wc_title_bar .title > a:hover { background-color: #0bf; }
div.slideout .wc_title_bar.style-dashboard .options > li > a:hover,
.wc_title_bar.style-slideout .options > li > a:hover { background-color: #0bf; }

#LeftViewContainer .wc_title_bar .nav.options ul.dropdown-menu { position: absolute; }
#LeftViewContainer .wc_title_bar .nav.options ul.dropdown-menu ul.dropdown-menu { position: absolute; left: 100%; border-radius: 0; }

#TopViewContainer .wc_title_bar .nav.options ul.dropdown-menu,
#BottomViewContainer .wc_title_bar .nav.options ul.dropdown-menu,
#CenterViewContainer .wc_title_bar .nav.options ul.dropdown-menu,
#RightViewContainer .wc_title_bar .nav.options ul.dropdown-menu { position: absolute; left: auto; right: 0; }

#TopViewContainer .wc_title_bar .nav.options ul.dropdown-menu ul.dropdown-menu,
#BottomViewContainer .wc_title_bar .nav.options ul.dropdown-menu ul.dropdown-menu,
#CenterViewContainer .wc_title_bar .nav.options ul.dropdown-menu ul.dropdown-menu,
#RightViewContainer .wc_title_bar .nav.options ul.dropdown-menu ul.dropdown-menu { position: absolute; left: -100%; right: auto; }