.context-menu { display: flex; flex-direction: column; position: absolute; background-color: #FFFFFF; box-sizing: border-box; box-shadow: 1px 1px 3px rgba(0,0,0,0.5),0 0 0 1px #ccc; border-radius: 2px; white-space: nowrap; vertical-align: top; overflow: hidden; user-select: none; animation: 0.1s context-popup; }
.context-menu-title { padding: 8px 30px 8px 14px; font-size: 12pt; color: #616161; text-align: center; background-color: #ededed; border-bottom: 1px solid #e0e0e0; }
.context-menu-search { padding: 6px 6px; border-bottom: 1px solid #EEEEEE; }
.context-menu-search > input { display: block; min-width: 250px; width: 100%; height: 30px; padding: 10px 6px; box-sizing: border-box; border: 1px solid #EEEEEE; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); font-size: 10.5pt; color: #616161; transition: 0.1s border-color; }
.context-menu-search > input:focus { border-color: #64B5F6; }
.context-menu-search > input::-webkit-input-placeholder { color: #9E9E9E; }
.context-menu-search > input:-moz-placeholder { color: #9E9E9E; }
.context-menu-search > input::-moz-placeholder { color: #9E9E9E; }
.context-menu-search > input:-ms-input-placeholder { color: #9E9E9E; }
.context-menu-options { padding: 6px 0; overflow-x: hidden; overflow-y: auto; }
.context-menu-options::-webkit-scrollbar { width: 5px; background-color: transparent; }
.context-menu-options::-webkit-scrollbar-thumb { width: 5px; background-color: rgba(0,144,209,0.5); border-radius: 5px; }
.context-menu-options::-webkit-scrollbar-thumb:hover, .context-menu-options::-webkit-scrollbar-thumb:active { background-color: #0090d1; }
.context-menu-option, .context-menu-submenu, .context-menu-disabled { position: relative; padding: 6px 30px 6px 14px; font-size: 11pt; font-weight: 300; color: #616161; }
.context-menu-option, .context-menu-submenu { cursor: pointer; }
.context-menu-option.active, .active.context-menu-submenu, .context-menu-option.active-submenu, .active-submenu.context-menu-submenu { background-color: #009688; color: white; }
.context-menu-submenu { padding-right: 30px; }
.context-menu-submenu:after { content: "\25B6"; font-size: 8pt; display: block; position: absolute; top: 50%; transform: translate(0, -50%) scaleX(0.8); right: 8px; }
.context-menu-separator { padding: 1px 0; }
.context-menu-disabled { opacity: 0.5; cursor: default; }
.option-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; user-select: none; }
.option-text, .option-arrow { display: inline-flex; align-items: center; user-select: none; }
.option-separator { height: 1px; border: none; margin:3px 0; }

@keyframes context-popup {
    0% { opacity: 0; }
    100% { opacity: 1; }
}