/*********************************************************************************************************************
 * Main styles and sliding
 *********************************************************************************************************************/
 
div.wc_menu { max-width: 200px; max-height: 275px; position: absolute; overflow: hidden; z-index: 30000; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
div.wc_menu:after { content: ''; border-top: 3px solid transparent; position: absolute; top: 0; bottom: auto; left: 0; width: 100%; }
div.wc_menu.right { right: 0; }

div.wc_menu > div.inner { overflow-x: hidden; overflow-y: auto; position: absolute; }

div.wc_menu { height: 0px; transition: height 0.2s; }
div.wc_menu > div.inner { height: 100%; top: auto; bottom: 0; }

div.wc_menu.bottom:after { border-top: none; border-bottom: 3px solid transparent; top: auto; bottom: 0; }
div.wc_menu.bottom > div.inner { top: 0; bottom: auto; }

div.wc_menu.submenu { width: 0px; transition: width 0.2s; top: 0; right: 0; }
div.wc_menu.submenu > div.inner { width: 100%;  left: 0; }

div.wc_menu.submenu > div.inner > div.back { background-color: white; display: flex; align-items: center; height: 36px; padding-top: 3px; border-bottom: 1px solid #ddd; }
div.wc_menu.submenu > div.inner > div.back a { color: #444; padding: 0 15px; width: 100%; height: 36px; display: flex; align-items: center; font-size: 14px; }
div.wc_menu.submenu > div.inner > div.back i { margin-right: 5px; }

/*********************************************************************************************************************
 * List item styles
 *********************************************************************************************************************/

div.wc_menu > div.inner > ul { padding: 3px 0 0 0; margin: 0; background-color: white; box-sizing: border-box; }
div.wc_menu.bottom > div.inner > ul { padding: 0 0 3px 0; }
div.wc_menu.submenu > div.inner > ul { padding: 0; }

div.wc_menu > div.inner > ul > li.item { overflow: hidden; height: 36px; display: flex; text-align: left; align-items: center; color: #444; white-space: nowrap; font-weight: normal; font-size: 14px; }
div.wc_menu > div.inner > ul > li.item:hover { background-color: #def; }
div.wc_menu > div.inner > ul > li.item > a { display: block; width: 100%; padding: 6px 15px; line-height: 20px; color: #444; }
div.wc_menu > div.inner > ul > li.item > a i { margin-right: 5px; }
div.wc_menu > div.inner > ul > li.item > a img { width: 16px; min-width: 16px; margin-right: 5px; }

div.wc_menu > div.inner > ul > li.item.disabled:hover { background-color: white; }
div.wc_menu > div.inner > ul > li.item.disabled > a { cursor: inherit; opacity: 0.5; }
div.wc_menu > div.inner > ul > li.item.disabled > a:hover { background-color: white; }

div.wc_menu > div.inner > ul.stateful > li.item.active { background-color: #def; }
div.wc_menu > div.inner > ul.stateful > li.item.active a { color: #08c; }
div.wc_menu > div.inner > ul > li.separator { height: 1px; overflow: hidden; background-color: #ddd; }

div.wc_menu > div.inner > ul > li.item.menu:after { display: inline-block; visibility: hidden; font-family: 'webcomand-icons'; font-style: normal; speak: none; content: "\35"; position: relative; right: 10px; }
div.wc_menu > div.inner > ul > li.item.menu:hover:after { visibility: visible; }