.cpath_view { flex-direction: column; height: 100%; overflow: hidden; }
.cpath_view > * { flex-grow: 0; flex-shrink: 0; }
.cpath_view > .cpath_body { flex-grow: 1; }

.cpath_view > .cpath_body { display: flex; flex-direction: row; flex-wrap: nowrap; height: calc(100% - 44px - 45px); overflow: hidden; }
.cpath_view.tb-wrap > .cpath_body { height: calc(100% - 44px - 89px); }
.cpath_view > .cpath_body > .cpath_ui { flex-grow: 1; height: 100%; overflow: auto; background-color: white; }

.resizable-left > .cpath_view > .cpath_body { position: relative; box-sizing: border-box; border-left: 1px solid #ddd; }
.resizable-right > .cpath_view > .cpath_body { position: relative; box-sizing: border-box; border-right: 1px solid #ddd; }
.resizable-left > .cpath_view > .toolbar { border-left: 1px solid #ddd; }
.resizable-right > .cpath_view > .toolbar { border-right: 1px solid #ddd; }
.resizable-left.wc_slideout > div.content > div.panel > div.body > .cpath_view > .cpath_body { border-left: 1px solid #ddd; }
.resizable-right.wc_slideout > div.content > div.panel > div.body > .cpath_view > .cpath_body { border-right: 1px solid #ddd; }
.resizable-left.wc_slideout > div.content > div.panel > div.body > .cpath_view > .toolbar { border-left: 1px solid #ddd; }
.resizable-right.wc_slideout > div.content > div.panel > div.body > .cpath_view > .toolbar { border-right: 1px solid #ddd; }

.cpath_view > .cpath_body > .cpath_ui.empty { background-color: #fff; }
.cpath_view > .cpath_body > .cpath_ui > div.loading { padding: 5px; font-style: italic; color: #555; }

/** OTHER STYLES BELOW - DO WE NEED THESE? IS THIS THE RIGHT PLACE FOR THEM? */

.cpath_view .ct-label { padding: 0px 5px; display: flex; flex-wrap: wrap; line-height: 25px; cursor: pointer; font-size: 16px; }
.cpath_view .ct-label img { width: 24px; margin: 10px 5px 10px 5px; top: 0 !important; }
.cpath_view .ct-label span { font-weight: bold; position: relative; top: 2px; }
.cpath_view .ct-label div.action { padding: 0px 5px; color: #aaa; }
.cpath_view .ct-label div.action:hover,
.cpath_view .ct-label div.action.default.hover { color: #08c; }
.cpath_view .ct-label div.action i { position: relative; top: 9px; }

div.wc_editor_side_toolbar { position: absolute; overflow: hidden; width: 0; transition: width 0.2s; right: 43px; height: 44px; border-bottom: none; z-index: 30000; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); clip-path: inset(0px 0px -13px -6px); border-radius: 22px 0 0 22px; }
div.wc_editor_side_toolbar > div.wc_toolbar { position: absolute; left: 0; padding-right: 2px; align-items: center; }
div.wc_editor_side_toolbar > div.wc_toolbar div.group[data-id="label"] { padding-right: 10px; }
div.wc_toolbar.edit_type { background-color: #666; color: white; }
div.wc_toolbar.edit_type div.group[data-id="modes"] { background-color: #444; border-radius: 20px; height: 40px; padding: 0 4px 0 4px; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn { margin-left: 4px; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn:first-child { margin-left: 0; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn,
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn > a { height: 36px; width: 36px; flex-basis: 36px; min-width: auto; border-radius: 18px; line-height: 36px; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn > a { margin: 0; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn > a i { position: relative; top: -2px; left: 0px; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.default > a { background-color: #777; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn:hover > a,
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.active > a { background-color: #f4f4f4; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn:hover > a i,
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.active > a i { color: #444; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.shrunk { margin-left: 0; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.more:hover > a,
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.more.active > a { background-color: #09d; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.more:hover > a i,
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.more.active > a i { color: white; }
div.wc_toolbar.edit_type div.group[data-id="modes"] .tb-btn.more { margin-left: 0; }
div.wc_toolbar.edit_type div.group[data-id="modes"].shrunk .tb-btn.more { margin-left: 4px; flex-basis: 36px; }

div.wc_toolbar.edit_type div.group[data-id="gear"] { margin-left: 4px; }
div.wc_toolbar.edit_type .tb-btn > a { color: white; border-radius: 20px; height: 40px; width: 40px; font-size: 20px; line-height: 40px; margin: 0 2px; }
div.wc_toolbar.edit_type .tb-btn > a:hover { background-color: #09d; }

.cpath_body > .wc_slideout ul.items li[data-id="edit_type"].open,
.cpath_body > .wc_slideout ul.items li[data-id="edit_type"]:hover { background-color: #666; border-radius: 0 22px 22px 0; color: white; }
.cpath_body > .wc_slideout ul.items li[data-id="edit_type"].open a,
.cpath_body > .wc_slideout ul.items li[data-id="edit_type"]:hover a { color: white; }
/* .cpath_body > .wc_slideout ul.items li[data-id="edit_type"] > a:hover { background-color: #666; }  */
.cpath_body > .wc_slideout ul.items li[data-id="edit_type"]:hover > a { background-color: #09d; }
/* .cpath_body > .wc_slideout ul.items li[data-id="edit_type"] .tb-btn a:hover { background-color: #09d; } */


/* div.panel > div.cpath_body { position: relative; display: flex; flex-direction: row; flex-wrap: none; }
div.panel > div.cpath_body > div.cpath_ui { flex-grow: 1; position: relative; }
/*  */
/* div.panel.noresize { display: flex; flex-direction: column; }
div.panel.noresize > div.cpath_body { display: flex; flex: 1; }
div.panel.noresize > div.cpath_body > div.cpath_ui { display: flex; flex-direction: column; flex: 1; } */ */

/* 20x20 icons */
.actions.horizontal > button.btn { width: auto; }
.actions.horizontal label { display: inline; padding-left: 2px; }
.actions.horizontal .icon { width: 20px; }
.actions.horizontal .btn-group button.btn.dropdown-toggle { height: 32px; padding: 0 8px; }
.actions.horizontal .btn { padding-left: 6px; }
.actions button.btn > img.icon { padding-top: 2px; width: 20px; }

.actions .search-query { border-radius: 4px; }

.actions button { text-shadow: none; }

div.item-actions { display: none; flex-direction: row; position: absolute; top: 0px; right: 0px; background-color: #def; }
div.item-actions a.action { cursor: pointer; display: block; width: 44px; height: 44px; font-size: 20px; line-height: 44px; text-align: center; text-decoration: none; }
div.item-actions a.action.disabled { cursor: auto; opacity: 0.3; }
div.item-actions a.action.disabled:hover i { color: #555 !important; }
div.item-actions:hover a.hover-active:not(:hover) i { color: #555; }

/* .panel { position: relative; display: none; flex-direction: column; height: 100%; }
.panel > .pathbar, .panel > .toolbar { flex-grow: 0; flex-shrink: 0; }
.panel > .cpath_body { flex-grow: 1; } */
/* .panel .container { padding: 12px; } */

/* .panel .search { background-color: #f4f4f4; } */

.panel .item { position: relative; }
.panel .item:hover div.item-actions,
.panel .item.active div.item-actions { display: flex; }
.panel .cpath_ui.selectable .item div.item-actions a.action.hover-active:not(:hover) i { color: #555; }

.panel .dot { border-radius: 10px; width: 0px; height: 0px;}
.panel .dot.unsaved { width: 10px; height: 10px; background-color: #08c; }
.panel .dot.unapproved { width: 10px; height: 10px; background-color: #FAA732; }
.panel .dot.approved { width: 10px; height: 10px; background-color: #51a351; }
.panel .dot.other { opacity: 30%; }

.panel .user-bubble { border-radius: 16px; color: #fff; display: inline-block; font-size: 12px; height: 28px; line-height: 28px; margin: 2px; padding: 0px; position: relative; text-align: center; width: 28px; }
.panel .user-bubble .lock { background-color: #fff; border: 1px solid #ddd; border-radius: 6px; color: #ddd; font-size: 10px; height: 10px; left: 18px; line-height: 1px; margin: 0px; padding: 0px; position: absolute; top: 18px; width: 10px; }

.panel .user-bubble.small { font-size: 11px; height: 24px; line-height: 24px; position: relative; width: 24px; }
.panel .user-bubble.small .lock { left: 15px; top: 15px; }

.panel .user-bubble.tiny { font-size: 7.5px; height: 14px; line-height: 14px; position: relative; width: 14px; }
.panel .user-bubble.tiny a { width: 14px; }

.panel .user-bubble.self { background-color: #08c; }
.panel .user-bubble.self .lock { border-color: #08c; color: #08c; }

.panel .user-bubble.other { background-color: rgb(136, 136, 136); }

.panel .user-bubble a { text-decoration: none; color: inherit; }



/* div.wc_slideout div.panel.lazy { height: 100%; }
div.wc_slideout div.panel.lazy > div.cpath_body { height: 100%; } */
/* 
div.slideout.resizable-left .panel .toolbar { border-left: 1px solid #ddd; }
div.slideout.resizable-right .panel .toolbar { border-right: 1px solid #ddd; } 
div.slideout.resizable-left .cpath_body { border-left: 1px solid #ddd; }
div.slideout.resizable-right .cpath_body { border-right: 1px solid #ddd; }  */