div.wc_gutter { position: relative; min-width: 44px; height: 100%; background-color: white; overflow-x: visible; }

div.wc_gutter.left { border-right: 1px solid #ddd; }

div.wc_gutter.right { border-left: 1px solid #ddd; }

div.wc_gutter.collapsed { width: 44px; }
div.wc_gutter.large.collapsed { width: 64px; }
 
/**********************************************************************************************************************
 * Gutter list styles
 **********************************************************************************************************************/

div.wc_gutter > ul.items { width: 100%; height: 100%; position: relative; z-index: 501; margin: 0px; padding: 0px; list-style-type: none; }
div.wc_gutter > ul.items li { width: 100%; color: #555; position: relative; cursor: pointer; transition: height .2s; }
div.wc_gutter > ul.items li:not(.separator) { height: 44px; }
div.wc_gutter > ul.items li.separator { height: 1px; box-sizing: border-box; }
div.wc_gutter > ul.items li.hidden { height: 0; overflow: hidden; }
div.wc_gutter > ul.items.pinned li { z-index: 0; }

div.wc_gutter > ul.items a { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; position: relative; font-size: 20px; width: auto; height: 100%; text-align: center; text-decoration: none; color: #555; line-height: 44px; align-items: center; justify-content: left; }
div.wc_gutter.right > ul.items a { flex-direction: row-reverse; }
div.wc_gutter > ul.items a i { flex: 0; flex-basis: 44px; width: 44px; min-width: 44px; }
div.wc_gutter > ul.items a img { flex: 0; flex-basis: 32px; width: 32px; min-width: 32px; margin: 0 6px 0 6px; }
/* div.wc_gutter.large.collapsed > ul.items a { justify-content: center; } */
div.wc_gutter.large > ul.items a i { flex-basis: 64px; width: 64px; min-width: 64px; }
div.wc_gutter.large > ul.items a img { margin: 0 16px 0 16px; } 

div.wc_gutter > ul.items hr { margin: 5px; border-top: 1px solid #555; border-bottom: none; }

div.wc_gutter > ul.items li.toggle { display: flex; align-items: center; justify-content: center; }
div.wc_gutter > ul.items li.toggle a { height: 40px; width: 40px; min-width: 40px; border-radius: 20px; }
div.wc_gutter > ul.items li.toggle i { position: relative; top: 0px; }
div.wc_gutter > ul.items li.toggle a i { flex-basis: 40px; width: 40px; min-width: 40px; }

div.wc_gutter > ul.items > li a span.title { display: none; white-space: nowrap; padding: 0 10px 0 10px; font-size: 16px; }
div.wc_gutter.right > ul.items > li a span.title { padding: 0 0 0 20px; }
div.wc_gutter.collapsed > ul.items > li a:not(.hover) span.title { display: none; }

div.wc_gutter > ul.items li.active { z-index: 5000; }
div.wc_gutter > ul.items li.active:not(.toggle) > a { background-color: #def; color: #08c; }
div.wc_gutter > ul.items li.active:not(.toggle) > a:not(.hover)::before { content: ''; width: calc(100% - 2px); height: 100%; position: absolute; display: block; }

div.wc_gutter.left > ul.items li.active:not(.toggle) > a::before { border-right: 3px solid #08c; }
div.wc_gutter.right > ul.items li.active:not(.toggle) > a::before { border-left: 3px solid #08c; }

div.wc_gutter > ul.items li.active.toggle > a { background-color: #09d; color: white; }

div.wc_gutter.titles > ul.items span.title { display: inline; }

/**********************************************************************************************************************
 * Gutter actions
 **********************************************************************************************************************/

div.wc_gutter > ul.items > li div.actions { height: 44px; display: flex; flex-direction: row-reverse; background-color: transparent; }
div.wc_gutter > ul.items > li div.actions div.action { height: 44px; width: 44px; line-height: 44px; font-size: 20px; cursor: pointer; }

/**********************************************************************************************************************
 * Gutter orderability
 **********************************************************************************************************************/

div.wc_gutter > ul.items a i.order { display: none; width: 5px; flex-basis: 5px; min-width: 5px; position: relative; left: -7px; font-size: 16px; color: #555; }
div.wc_gutter.orderable > ul.items li.sortable a i.order { display: block; } 

/**********************************************************************************************************************
 * Gutter hover states and reveal when collapsed
 **********************************************************************************************************************/

div.wc_gutter > ul.items > li:hover:not(.separator) { background-color: #def; color: #09d; }
div.wc_gutter > ul.items > li a.hover { display: none; position: absolute; top: 0; box-shadow: 0 0 8px rgba(0,0,0,0.3); background-color: #def; border-radius: 0 5px 5px 0; }
div.wc_gutter.right > ul.items > li a.hover { border-radius: 5px 0 0 5px; }
div.wc_gutter.left > ul.items > li a.hover { left: 0; }
div.wc_gutter.right > ul.items > li a.hover { right: 0; }

div.wc_gutter.collapsed.hover > ul.items > li:hover a.hover { display: flex; }

/**********************************************************************************************************************
 * Gray mode
 **********************************************************************************************************************/

div.wc_gutter.gray { background-color: #f4f4f4; }
div.wc_gutter.lightgray { background-color: #f8f8f8; }

/**********************************************************************************************************************
 * Dark mode
 **********************************************************************************************************************/

div.wc_gutter.dark { background-color: #666; border-color: #444; }
div.wc_gutter.dark > ul.items a { color: white; } 
div.wc_gutter.dark > ul.items hr { border-top-color: #ddd; } 

div.wc_gutter.dark > ul.items li.active > a { background-color: #444; color: white; }
div.wc_gutter.dark > ul.items li.active:not(.toggle) > a::before { border-left: 3px solid white; }

div.wc_gutter.dark > ul.items > li:hover:not(.separator) { background-color: #444; color: white; }