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

div.wc_slideout { height: 100%; position: relative; overflow: visible; display: flex; min-width: 0; }
div.wc_slideout > div.content { top:0; background-color: #fff; height: 100%; width: 0; transition: width 0.2s; position: absolute; overflow: clip; }
div.wc_slideout > div.content.resizing { transition: unset; }

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; left: 0 !important; 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; } */

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

div.wc_slideout > div.content > div.panels { position: relative; top: 0; width: unset; }
div.wc_slideout > div.content.resizing > div.panels { transition: unset; }

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

div.wc_slideout.left:not(.show) > div.content { direction: rtl; }
div.wc_slideout > div.content > * { direction: ltr; }

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

div.wc_slideout > div.content > div.panels > 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.panels > 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.panels > 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.panels > 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.panels > div.panel:not(.form) > div.header > a.pushpin:not(.disabled):hover { text-decoration: none; opacity: 1; }

div.wc_slideout.left > div.content > div.panels > div.panel:not(.form) > div.header { border-left: none; }
div.wc_slideout.left > div.content > div.panels > div.panel:not(.form) > div.body { border-left: none; }
div.wc_slideout.right > div.content > div.panels > div.panel:not(.form) > div.header { border-right: none; }
div.wc_slideout.right > div.content > div.panels > div.panel:not(.form) > div.body { border-right: none; }

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

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

/**********************************************************************************************************************
 * Dark Mode
 **********************************************************************************************************************/
div.wc_slideout.dark > div.content > div.panels > div.panel:not(.form) > div.header { background-color: #666; border-bottom-color: #444; color: white; }
div.wc_slideout.dark > div.content > div.panels > div.panel:not(.form) > div.header > a { color: white; }
div.wc_slideout.dark > div.content > div.panels > div.panel:not(.form) > div.body { background-color: #666; }