div.wc_toolbar { box-sizing: border-box; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; border-bottom: 1px solid #ddd; }

/*********************************************************************************************************************
 * Themes and positions
 *********************************************************************************************************************/
div.wc_toolbar.sticky { position: sticky; top: 0; left: 0; right: 0; z-index: 102; }
div.wc_toolbar-sticky-shadow { position: sticky; height: 10px; margin-top: -10px; top: 34px; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); z-index: 100; }
div.wc_toolbar-sticky-shadow-cover { position: relative; top: -3px; height: 13px; z-index: 101; }

div.wc_toolbar.relative { position: relative; }
div.wc_toolbar.relative div.callout { z-index: 10; }

div.wc_toolbar.white,
div.wc_toolbar-sticky-shadow-cover.white { background-color: white; }

div.wc_toolbar.gray,
div.wc_toolbar-sticky-shadow-cover.gray { background-color: #f4f4f4; }

div.wc_toolbar.light-gray,
div.wc_toolbar-sticky-shadow-cover.light-gray { background-color: #f8f8f8; }

div.wc_toolbar.dark-gray,
div.wc_toolbar-sticky-shadow-cover.dark-gray { background-color: #aaa; }

div.wc_toolbar.darkest-gray,
div.wc_toolbar-sticky-shadow-cover.dark-gray { background-color: #444; border-color: #333; }
div.wc_toolbar.darkest-gray .tb-btn > a > i,
div.wc_toolbar.darkest-gray .btn-group > a > i,
div.wc_toolbar.darkest-gray a.expander i { color: white; }
div.wc_toolbar.darkest-gray .tb-btn:hover:not(.open) > a,
div.wc_toolbar.darkest-gray div.group:not(.noexpand) a.expander:hover { background-color: #333; }

/*********************************************************************************************************************
 * Toolbar wrapping
 *********************************************************************************************************************/

div.wc_toolbar div.group.break { display: none; }

div.wc_toolbar.wrap { flex-wrap: wrap; }
div.wc_toolbar.wrap div.group.break { display: block; }

div.wc_toolbar.wrap > div.group[data-wrap="1"] { order: 1 }
div.wc_toolbar.wrap > div.group[data-wrap="2"] { order: 2 }
div.wc_toolbar.wrap > div.group[data-wrap="3"] { order: 3 }
div.wc_toolbar.wrap > div.group[data-wrap="4"] { order: 4 }
div.wc_toolbar.wrap > div.group[data-wrap="5"] { order: 5 }
div.wc_toolbar.wrap > div.group[data-wrap="6"] { order: 6 }
div.wc_toolbar.wrap > div.group[data-wrap="7"] { order: 7 }
div.wc_toolbar.wrap > div.group[data-wrap="8"] { order: 8 }
div.wc_toolbar.wrap > div.group[data-wrap="9"] { order: 9 }
div.wc_toolbar.wrap > div.group[data-wrap="10"] { order: 10 }
div.wc_toolbar.wrap > div.group[data-wrap="11"] { order: 11 }
div.wc_toolbar.wrap > div.group[data-wrap="12"] { order: 12 }
/* add more of these if you need them... */

/*********************************************************************************************************************
 * Group styles
 *********************************************************************************************************************/

div.wc_toolbar > div.group { padding: 0; display: flex; align-items: center; flex-grow: 0; flex-shrink: 0; height: 44px; }
div.wc_toolbar > div.group.fill { flex-grow: 1; }
div.wc_toolbar > div.group.padding { padding: 0 5px; } 

div.wc_toolbar > div.group.break { display: none; flex-basis: 100%; height: 0px; }

div.wc_toolbar > div.group.collapsible.left ul.dropdown-menu { right: auto; left: 0px; float: left; }
div.wc_toolbar > div.group.collapsible.right div.item.more ul.dropdown-menu { left: auto; right: 0px; float: right; }

div.wc_toolbar > div.group.collapsible:not(.collapsed) > div.item.more { width: 0; flex-basis: 0; transition: all 0.2s; }
div.wc_toolbar > div.group.collapsible.collapsed > div.item.more { width: 44px; transition: width 0.2s; }
div.wc_toolbar > div.group.collapsible.collapsed > div.item:not(.more) { width: 0; flex-basis: 0; transition: all 0.2s; }

div.wc_toolbar > div.group.shrinkable:not(.shrunk):not(.collapsed) > div.item.more { width: 0; flex-basis: 0; transition: all 0.2s; }
div.wc_toolbar > div.group.shrinkable.shrunk > div.item.more { width: 44px; transition: width 0.2s; flex-basis: 44px; }
div.wc_toolbar > div.group.shrinkable.right div.item.more ul.dropdown-menu { left: auto; right: 0px; }

div.wc_toolbar > div.group.shrinkable div.item.shrunk { width: 0 !important; flex-basis: 0; transition: all 0.2s; }
div.wc_toolbar > div.group.shrinkable:not(.collapsed) > div.item.more li.item:not(.shrunk) { height: 0 !important; transition: height 0.2s; }

div.wc_toolbar > div.group.shrinkable > div.item.more { overflow: hidden; }
div.wc_toolbar > div.group.shrinkable.shrunk > div.item.more { overflow: visible; }

div.wc_toolbar > div.group > div.item.more > a.menu i.drop { display: none; }

/*********************************************************************************************************************
 * General widget styles
 *********************************************************************************************************************/

div.wc_toolbar > div.group > div.item.disabled * { opacity: 0.5; background-color: inherit; cursor: inherit; }
div.wc_toolbar > div.group > div.item.disabled:hover i { color: #555; }
/* div.wc_toolbar .tb-btn.disabled > a i { color: #555; } */

div.wc_toolbar > div.group > div.item.hidden { width: 0px; flex-basis: 0; transition: all 0.2s; overflow: hidden; }

div.wc_toolbar a.expander { visibility: hidden; display: block; line-height: 43px; width: 22px; text-decoration: none; color: #444; text-align: center; }
div.wc_toolbar div.group:not(.noexpand) a.expander:hover { background-color: #def; }
div.wc_toolbar:hover div.group:not(.noexpand) a.expander { visibility: visible; }
div.wc_toolbar a.expander i:before { display: inline-block; font-family: 'webcomand-icons'; font-style: normal; speak: none; }
div.wc_toolbar a.expander.left i:before { content: "\a9"; }
div.wc_toolbar a.expander.right i:before { content: "\aa"; }

/*********************************************************************************************************************
 * Specific widget styles
 *********************************************************************************************************************/

div.wc_toolbar .tb-btn { overflow: hidden; width: 44px; transition: width 0.2s, flex-basis 0.2s; flex-basis: 44px; } /*align-self: flex-start; }*/
div.wc_toolbar .tb-btn.btn-drop { overflow-y: visible; }
div.wc_toolbar .tb-btn > a,
div.wc_toolbar .tb-btn > .btn-group > a{ display: block; height: 44px; width: 44px; font-size: 16px; line-height: 43px; text-align: center; text-decoration: none; color: #555; cursor: pointer; }
div.wc_toolbar .tb-btn a:hover,
div.wc_toolbar .tb-btn > .btn-group > a:hover { background-color: #def; }

div.wc_toolbar .tb-btn.active > a,
div.wc_toolbar .tb-btn.open > a,
div.wc_toolbar .tb-btn.active > .btn-group a,
div.wc_toolbar .tb-btn.open > .btn-group a { background-color: #09d; color: #fff; }
/* div.wc_toolbar .tb-btn.open,
div.wc_toolbar .tb-btn.active { overflow: visible; } */

div.wc_toolbar .tb-btn.btn-group { width: 44px; flex-basis: 44px; transition: width 0.2s, flex-basis 0.2s; }
div.wc_toolbar .tb-btn.btn-group.active { width: 76px; flex-basis: 76px; }

div.wc_toolbar .tb-btn .wc_menu:after { border-color: #09d; }

div.wc_toolbar .tb-btn.btn-drop i.drop { display: none; font-family: 'webcomand-icons'; font-style: normal; speak: none; font-size: 12px; position: absolute; top: 16px; right: 2px; }
div.wc_toolbar .tb-btn.btn-drop.open i.drop,
div.wc_toolbar .tb-btn.btn-drop:hover i.drop { display: block; }
div.wc_toolbar .tb-btn.btn-drop i.drop:before { content: "\26"; }
div.wc_toolbar .tb-btn.btn-drop.open i.drop:before { content: "\27"; }

div.wc_toolbar .tb-toggle { display: flex; flex-direction: row; flex-wrap: nowrap; }
div.wc_toolbar .tb-toggle div.toggle-item { width: 44px; height: 44px; flex-grow: 0; flex-shrink: 0; }
div.wc_toolbar .tb-toggle div.toggle-item a { color: #555; font-size: 16px; display: block; height: 32px; width: 32px; border-radius: 16px; position: relative; top: 6px; left: 6px; line-height: 31px; text-align: center; }
div.wc_toolbar .tb-toggle div.toggle-item a.active { color: white; background-color: #08c; }

div.wc_toolbar div.search { position: relative; flex-grow: 1; padding-right: 0px; min-width: 90px; }
div.wc_toolbar div.search div.search-icon { position: absolute; left: 8px; top: 0px; }
div.wc_toolbar div.search div.search-icon i { color: #888;}
div.wc_toolbar div.search div.search-icon.open i { color: #09d;}
div.wc_toolbar div.search div.search-input { display: flex; box-sizing: border-box; background-color: white; width: 100%; height: 26px; border: 1px solid #ddd; border-radius: 15px; padding: 0 25px 0; line-height: 24px; }
div.wc_toolbar div.search div.search-input:focus { border-color: rgba(0,119,187,0.5); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
div.wc_toolbar div.search div.search-input input { background-color: white; flex-grow: 1; display: inline-block; line-height: 24px; height: 24px; border: none; padding: 0px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius: 0px; }
div.wc_toolbar div.search div.search-input input { width: 0; } /* allows it to shrink below browser implicit min width */
div.wc_toolbar div.search div.search-input input:focus { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
div.wc_toolbar div.search div.search-icon div.wc_menu:after { border-color: #09d; }
/* div.wc_toolbar div.search div.search-icon ul { top: 25px; }
div.wc_toolbar div.search div.search-icon ul li { padding: 0px; }
div.wc_toolbar div.search div.search-icon ul li a { line-height: 20px; padding: 5px 10px 5px 20px; }
div.wc_toolbar div.search div.search-icon ul li.active a { color: white; }
div.wc_toolbar div.search div.search-icon ul li.active:hover a { color: #444; } */
div.wc_toolbar div.search div.search-pill { padding: 0px 5px; border-radius: 5px; color: white; background-color: #aaa; display: inline; margin: 2px 5px 2px 0px; line-height: 20px; font-size: 12px; white-space: nowrap; }
div.wc_toolbar .collection-bar-placeholder { width: 100%; }
div.wc_toolbar .search a { text-decoration: none; color: #000; }
div.wc_toolbar .search i.search,
div.wc_toolbar .search i.search-drop { position: absolute; top: 5px; left: 8px; }
div.wc_toolbar .search i.search-drop { cursor: pointer; }
div.wc_toolbar .search a.remove { position: absolute; right: 8px; color: #555; opacity: 0.85; line-height: 25px; }
div.wc_toolbar .search a.remove:hover { opacity: 1; }
div.wc_toolbar .search a.remove i { position: relative; top: -1px; }

div.wc_toolbar .tb-label { padding: 0 10px; }
div.wc_toolbar .tb-label img { width: 24px; position: relative; top: -2px; margin-left: 5px; }
div.wc_toolbar .tb-label img:first-child { margin-left: 0; }

div.wc_toolbar .pill { margin-top: 1px;  vertical-align: middle; text-align: center; cursor: pointer; padding-left: 5px; padding-right: 0px; }
div.wc_toolbar .pill .count { background-color: #08c; color: #fff; font-style: italic; font-weight: bold; border-radius: 15px; line-height: 24px; padding: 0 10px 0 10px; float: left; }

div.wc_toolbar .tb-btn > .btn-group { display: flex; width: 44px; transition: width 0.2s; overflow: hidden; }
div.wc_toolbar .tb-btn.active > .btn-group { overflow: visible; width: 76px; transition: width 0.2s; }
div.wc_toolbar .btn-group.btn-drop > a i.drop { display: none; }
div.wc_toolbar .btn-group.btn-drop:hover > a i.drop,
div.wc_toolbar .btn-group.btn-drop.open > a i.drop { display: block; position: absolute; top: 15px; right: 2px; font-size: 12px; }
div.wc_toolbar .btn-group > div.btn-group > a.dropdown-toggle { width: 32px; border-radius: 0px; position: relative; transition: width 0.2s; }
div.wc_toolbar .btn-group.active > div.btn-group > a.dropdown-toggle::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -1px; width: 0; border-left: 1px solid rgba(0,0,0,0.05); border-right: 1px solid rgba(255,255,255,0.15); cursor: pointer; }
div.wc_toolbar .btn-group > a { flex-grow: 0; flex-shrink: 0; }
div.wc_toolbar .btn-group > a.menu { width: 44px; }

/*********************************************************************************************************************
 * Selection states
 *********************************************************************************************************************/

div.wc_toolbar.select div.item[mode-show="select"] { width: 44px; transition: width 0.2s; }
div.wc_toolbar:not(.select) div.item[mode-show="select"] { width: 0; flex-basis: 0; transition: all 0.2s; }
div.wc_toolbar:not(.select) div.item[mode-hide="select"] { width: 44px; transition: width 0.2s; }
div.wc_toolbar.select div.item[mode-hide="select"] { width: 0; flex-basis: 0; transition: all 0.2s; }

div.wc_toolbar.select div.wc_menu li.item[mode-show="select"] { height: 36px; transition: height 0.2s; }
div.wc_toolbar:not(.select) div.wc_menu li.item[mode-show="select"] { height: 0; transition: height 0.2s; }
div.wc_toolbar:not(.select) div.wc_menu li.item[mode-hide="select"] { height: 36px; transition: height 0.2s; }
div.wc_toolbar.select div.wc_menu li.item[mode-hide="select"] { height: 0; transition: height 0.2s; }