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

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; display: flex; flex-direction: column; }
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.collapsed:not(.titles) > ul.items a { justify-content: center; }
div.wc_gutter.right > ul.items a { flex-direction: row-reverse; }
div.wc_gutter > ul.items a div.img { flex: 0; flex-basis: 44px; min-width: 44px; transition: flex-basis 0.2s, min-width 0.2s; }
div.wc_gutter > ul.items a div.img img { height: 24px; }
div.wc_gutter > ul.items a div.img i { line-height: 44px; }
/* div.wc_gutter.large.collapsed > ul.items a { justify-content: center; } */

div.wc_gutter.large > ul.items a div.img { flex-basis: 44px; min-width: 44px; }
div.wc_gutter.large.collapsed > ul.items a div.img { flex-basis: 64px; min-width: 64px; } 

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

div.wc_gutter > ul.items > div.fill { flex: 1; }

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 { white-space: nowrap; padding: 0; font-size: 15px; overflow: hidden; opacity: 1; transition: opacity 0.2s; }
div.wc_gutter:not(.titles) > ul.items > li a span.title { display: none; }
/* 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 { opacity: 0; }

/* div.wc_gutter > ul.items li.active { z-index: 5000; } */
div.wc_gutter > ul.items li.active:not(.toggle):not(.disabled) > a { background-color: #def; color: #08c; }
div.wc_gutter > ul.items li.active:not(.toggle):not(.disabled) > a:not(.hover)::before { content: ''; box-sizing: border-box; height: 100%; position: absolute; display: block; }

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

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

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

div.wc_gutter > ul.items li.disabled { opacity: 0.3; }
div.wc_gutter > ul.items li.disabled a { cursor: auto; }


/**********************************************************************************************************************
 * 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):not(.disabled) { 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 > ul.items > li a.hover i:not(.order) { width: 44px; }
div.wc_gutter > ul.items > li a.hover div.img { width: 44px; }
div.wc_gutter > ul.items > li a.hover span.title { padding: 0 20px 0 0; }
div.wc_gutter.large > ul.items a.hover i { min-width: 64px; }
div.wc_gutter.large > ul.items a.hover div.img { min-width: 64px; }

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; }