/**********************************************************************************************************************
 * Container styles and transitions
 **********************************************************************************************************************/

div.wc_slideout { height: 100%; position: relative; overflow: visible; }
div.wc_slideout > div.content { position: absolute; background-color: #fff; height: 100%; width: 0; transition: width 0.2s; overflow: hidden; }

div.wc_slideout.show > div.content { box-shadow: 0 20px 20px rgba(0,0,0,0.2); }

div.wc_slideout.pinned { display: flex; flex-direction: row; }
div.wc_slideout.pinned > div.content { position: relative; box-shadow: none; margin-right: 0 !important; }

div.wc_slideout.left > div.content { left: 0; right: auto; }
div.wc_slideout.right > div.content { left: auto; right: 0; }
div.wc_slideout.right.pinned > div.content { margin-right: 0 !important; }
div.wc_slideout.right:not(.show) > div.content { margin-right: 0 !important; }
div.wc_slideout.left.pinned > div.content { margin-left: 0 !important; }
div.wc_slideout.left:not(.show) > div.content { margin-left: 0 !important; }

div.wc_slideout.left > div.content > div.panel { right: 0; }

/**********************************************************************************************************************
 * Gutter list styles
 **********************************************************************************************************************/

div.wc_slideout > ul.items { height: 100%; position: relative; z-index: 501; margin: 0px; padding: 0px; background-color: #f4f4f4; list-style-type: none; }
div.wc_slideout > ul.items li { min-width: 44px; height: 44px; }
div.wc_slideout > ul.items li.active { z-index: 5000; }
div.wc_slideout > ul.items li.active > a { background-color: #09d; color: white; }
div.wc_slideout > ul.items.pinned li { z-index: 0; }
div.wc_slideout > ul.items a { display: block; position: relative; min-width: 44px; height: 44px; font-size: 20px; line-height: 44px; text-align: center; text-decoration: none; color: #555; }
div.wc_slideout > ul.items a div.img { display: inline-block; width: 44px; position: relative; }
div.wc_slideout > ul.items a:hover { background-color: #09d; color: white; }

div.wc_slideout > ul.items a i.icon { position: relative; top: 8px; left: 8px; }
div.wc_slideout > ul.items a img { position: relative; top: 1px; display: inline; text-align: center; width: 24px; height: 24px; }

div.wc_slideout > ul.items li.separator { height: auto; }
div.wc_slideout > ul.items hr { margin: 5px; border-top: 1px solid #555; border-bottom: none; }

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

/**********************************************************************************************************************
 * Slideout panels and headers
 **********************************************************************************************************************/

div.wc_slideout > div.content > div.panel { width: 100%; height: 100%; background-color: white; position: absolute; top: 0; flex-direction: column; flex-wrap: nowrap; }
div.wc_slideout > div.content > div.panel > div.header { flex-grow: 0; flex-shrink: 0; }
div.wc_slideout > div.content > div.panel > div.body { flex-grow: 1; height: 100%; overflow: auto; }

div.wc_slideout > div.content > div.panel:not(.form) > div.header { background-color: #f4f4f4; border: 1px solid #ddd; height: 44px; box-sizing: border-box; display: flex; }
div.wc_slideout > div.content > div.panel:not(.form) > div.header > i { line-height: 44px; display: inline-block; text-align: center; padding: 0px 10px; }
div.wc_slideout > div.content > div.panel:not(.form) > div.header > div.title { flex-grow: 1; display: block; font-size: 14px; line-height: 32px; padding: 5px; }
div.wc_slideout > div.content > div.panel:not(.form) > div.header > a { display: block; text-decoration: none; color: #555; min-width: 44px; height: 44px; opacity: 0.8; font-size: 14px; line-height: 44px; text-align: center; }
div.wc_slideout > div.content > div.panel:not(.form) > div.header > a.pushpin:not(.disabled):hover { text-decoration: none; opacity: 1; }

div.wc_slideout.pinned > div.content > div.panel div.tb-btn.item[data-id="pin"] > a > i::before { transform: rotate(45deg); }

div.wc_slideout > div.content > div.panel > div.header > a.pushpin.disabled { opacity: 0.5; cursor: inherit; }

/**********************************************************************************************************************
 * Resizer
 **********************************************************************************************************************/

div.wc_slideout .resizer { position: absolute; top: 0; bottom: 0; width: 7px;  z-index: 2000; display: block; cursor: ew-resize; }
div.wc_slideout .resizer:hover { background-color: rgba(0,0,0,0.05); }
div.wc_slideout .resizer.left { left: -3px; }
div.wc_slideout .resizer.right { right: -3px; }