/*********************************************************************************************************************
 * Main styles and sliding
 *********************************************************************************************************************/
 
div.wc_menu { position: absolute; overflow: hidden; z-index: 30000; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s; overflow: hidden; align-content: end; align-items: end; background-color: white; }
div.wc_menu.bottom { align-content: start; align-items: start; }
div.wc_menu.show { grid-template-rows: 1fr; }

div.wc_menu > div.inner { min-height: 0; max-height: 275px; min-width: 125px; max-width: 200px; overflow: auto; display: flex; flex-direction: row; }

div.wc_menu:after { content: ''; border-top: 3px solid transparent; position: absolute; top: 0; bottom: auto; left: 0; width: 100%; }
div.wc_menu.bottom:after { border-top: none; border-bottom: 3px solid transparent; top: auto; bottom: 0; }

div.wc_menu.submenu { display: block; width: 0px; height: 100%; transition: width 0.2s; top: 0; right: 0; }
div.wc_menu.submenu > div.inner { width: 100%; height: 100%; position: relative; left: 0; background-color: white; flex-direction: column; }

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: #555; 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; }

div.wc_menu.up { align-content: start; align-items: start; }
div.wc_menu.up:after { border-bottom: 3px solid transparent; border-top: none; top: auto; bottom: 0; }

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

div.wc_menu > div.inner > ul { padding: 3px 0 0 0; margin: 0; 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: #555; 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: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
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:hover { background-color: #d0e0f0; }
div.wc_menu > div.inner > ul.stateful > li.item.active a { color: #08c; }
div.wc_menu > div.inner > ul > li.separator { line-height: 1px; }
div.wc_menu > div.inner > ul > li.separator hr { margin: 1px 5px; border-top: 1px solid #ddd; border-bottom: none; }

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

/*********************************************************************************************************************
 * Dark Mode
 *********************************************************************************************************************/

div.wc_menu.dark > div.inner > ul { background-color: #777; }
div.wc_menu.dark > div.inner > ul > li.item,
div.wc_menu.dark > div.inner > ul > li.item > a { color: white; }
div.wc_menu.dark > div.inner > ul > li.item:hover { background-color: #666; }
div.wc_menu.dark > div.inner > ul > li.item.disabled:hover { background-color: inherit; }
div.wc_menu.dark > div.inner > ul > li.item.disabled > a:hover { background-color: #666; }