.styleProvider-filter, .styleProvider-audio, .styleProvider-paint, .styleProvider-paint-selected, .styleProvider-lock { z-index: 2; // has to be above title which is z-index 1 font-size: 10; width: 15; height: 15; position: absolute; right: -15; top: 0; background: black; pointer-events: all; opacity: 0.3; display: flex; flex-direction: column; color: red; border-radius: 3px; justify-content: center; cursor: default; } .styleProvider-filter { right: 15; .styleProvider-filterShift { left: 0; top: 0; position: absolute; } } .styleProvider-audio { right: 30; } .styleProvider-paint-selected, .styleProvider-paint { top: 15; } .styleProvider-paint-selected { right: -30; } .styleProvider-lock:hover, .styleProvider-audio:hover, .styleProvider-filter:hover { opacity: 1; } .styleProvider-treeView-icon, .styleProvider-treeView-icon-active { margin-left: 0; margin-right: 0; } .styleProvider-treeView-icon { opacity: 0; } .keywords-container { display: flex; flex-wrap: wrap; flex-direction: column; border: 1px solid; border-radius: 4px; } .keywords-list { display: flex; flex-wrap: wrap; } .keyword { padding: 5px 5px; background-color: lightblue; border: 1px solid black; border-radius: 5px; white-space: nowrap; display: flex; align-items: center; } .keyword-suggestions-box { display: flex; flex-wrap: wrap; margin: auto; align-self: center; width: 90%; border: 1px solid black; border-radius: 2px; margin-top: 8px; } .keyword-suggestion { cursor: pointer; padding: 1px 1px; margin: 2px 2px; background-color: lightblue; border: 1px solid black; border-radius: 5px; white-space: nowrap; display: flex; align-items: center; } .keyword-editing-box { margin-top: 8px; } .keyword-input-box { margin: auto; align-self: center; width: 90%; } .keyword-buttons { margin-left: auto; width: 10%; }