+.help-wrap svg.icon.pre-text.add-note,
+button.add-note svg.icon {
+ height: 15px;
+ width: 15px;
+ color: rgba(0,0,0,0.25);
+ stroke: #333;
+ stroke-width: 60px;
+ margin-top: 3px;
+}
+button.add-note svg.icon {
+ margin-left: unset;
+ margin-right: 4px;
+}
+[dir='rtl'] button.add-note svg.icon {
+ margin-left: 4px;
+ margin-right: unset;
+}
+.help-wrap svg.icon.pre-text.add-note {
+ margin-left: 3px;
+ margin-right: 3px;
+}
+
+.spinner {
+ opacity: .5;
+ position: absolute;
+ right: 4px;
+ bottom: 26px;
+}
+.spinner img {
+ height: 20px;
+ width: 20px;
+ background: transparent;
+ border-radius: 100%;
+}
+[dir='rtl'] .spinner img {
+ -moz-transform: scaleX(-1);
+ -o-transform: scaleX(-1);
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ filter: FlipH;
+ -ms-filter: "FlipH";
+}
+
+
+#bar.narrow .spinner,
+#bar.narrow button.bar-button .label {
+ display: none;
+}
+#bar.narrow button .count {
+ border-left-width: 0;
+ border-right-width: 0;
+}
+
+[dir='ltr'] .undo-redo button:first-of-type {
+ margin-right: 1px;
+}
+[dir='rtl'] .undo-redo button:first-of-type {
+ margin-left: 1px;
+}
+
+/* Add a feature search bar
+------------------------------------------------------- */
+
+.search-add {
+ width: 200%;
+ justify-content: center;
+ position: relative;
+ min-width: 150px;
+ max-width: 325px;
+}
+.search-add .search-wrap {
+ position: relative;
+ width: 100%;
+}
+[dir='ltr'] .search-add .search-wrap {
+ border-radius: 20px 4px 4px 20px;
+}
+[dir='rtl'] .search-add .search-wrap {
+ border-radius: 4px 20px 20px 4px;
+}
+.search-add .search-wrap.focused .tooltip {
+ display: none;
+}
+.search-add .search-wrap:last-child {
+ border-radius: 20px;
+}
+.search-add input[type='search'] {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border: none;
+ font-size: 14px;
+ text-indent: 25px;
+ padding: 5px 10px;
+ border-radius: inherit;
+}
+.search-add input[type='search'][disabled] {
+ opacity: 0.25;
+ cursor: not-allowed;
+}
+.search-add .search-icon {
+ color: #333;
+ display: block;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ pointer-events: none;
+}
+[dir='rtl'] .search-add .search-icon {
+ left: auto;
+ right: 10px;
+}
+.search-add .popover {
+ border: none;
+ border-radius: 6px;
+ position: absolute;
+ max-height: 600px;
+ top: 44px;
+ width: 200%;
+ max-width: 325px;
+ margin: auto;
+ left: auto;
+ right: auto;
+ z-index: 300;
+}
+.search-add .popover .popover-content {
+ overflow-y: auto;
+ height: 100%;
+ max-height: 60vh;
+}
+.search-add .popover,
+.search-add .popover .popover-content {
+ /* ensure corners are rounded in Chrome */
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
+}
+.search-add .popover .popover-footer {
+ padding: 5px 10px 5px 10px;
+ background: #f6f6f6;
+ border-top: 1px solid #DCDCDC;
+ display: flex;
+}
+.search-add .popover .popover-footer .message {
+ color:Â #666666;
+ flex-grow: 1;
+}
+.search-add .popover .popover-footer button.filter {
+ height: 20px;
+ background: transparent;
+ color: #666;
+}
+.search-add .popover .popover-footer button.filter.active {
+ color: #7092ff;
+}
+.search-add .popover .popover-footer button.filter:hover {
+ color: #333;
+}
+.search-add .popover .popover-footer button.filter.active:hover {
+ color: #597be7;
+}
+.search-add .popover::-webkit-scrollbar {
+ /* don't overlap rounded corners */
+ background: transparent;
+}
+.search-add .popover .list {
+ height: 100%;
+}
+.search-add .list-item > .row {
+ display: flex;
+ position: relative;
+ padding: 2px;
+}
+.search-add .list-item:not(:last-of-type) .row,
+.search-add .subsection.subitems .list-item .row,
+.search-add .subsection > .tag-reference-body {
+ border-bottom: 1px solid #DCDCDC;
+}
+.search-add .list-item .label {
+ font-weight: bold;
+ font-size: 12px;
+ padding-left: 2px;
+ top: 0;
+ bottom: 0;
+ position: relative;
+ display: flex;
+ align-items: center;
+ line-height: 1.3em;
+ width: 100%;
+}
+.search-add .list-item .label .namepart:nth-child(2) {
+ font-weight: normal;
+}
+.search-add .list-item.disabled .preset-icon-container,
+.search-add .list-item.disabled .label {
+ opacity: 0.55;
+}
+[dir='ltr'] .search-add .list-item .label .icon.inline {
+ margin-left: 0;
+}
+[dir='rtl'] .search-add .list-item .label .icon.inline {
+ margin-right: 0;
+}
+.search-add .list-item .row > *:not(button) {
+ pointer-events: none;
+}
+.search-add .list-item button.choose {
+ position: absolute;
+ border-radius: 0;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+}
+.search-add .list-item button.choose:hover,
+.search-add .list-item button.choose:focus {
+ background: #fff;
+}
+.search-add .list-item.focused:not(.disabled) button.choose {
+ background: #e8ebff;
+}
+.search-add .list-item button.choose.disabled {
+ background-color: #ececec;
+}
+.search-add .subsection .list-item button.choose {
+ opacity: 0.85;
+}
+.search-add .subsection .tag-reference-body {
+ background: rgba(255, 255, 255, 0.85);
+ padding: 10px;
+}
+.search-add .list-item button.accessory {
+ position: relative;
+ flex: 0 0 auto;
+ color: #808080;
+ background: transparent;
+ padding-right: 3px;
+ padding-left: 3px;
+}
+.search-add .list-item button.accessory:hover {
+ color: #666;
+}
+.search-add .list-item button.tag-reference-open path {
+ fill: #000;
+}
+.search-add .subsection {
+ background-color: #CBCBCB;
+}
+[dir='ltr'] .search-add .subitems {
+ padding-left: 6px;
+}
+[dir='rtl'] .search-add .subitems {
+ padding-right: 6px;
+}
+
+/* Add a preset mode buttons