@finsemble/finsemble-ui 6.3.0 → 6.4.0-beta.2

package/react/assets/css/advancedAppLauncher.css

@@ -1,636 +1,636 @@
-/*!
- * advancedAppLauncher.css
- * Copyright 2017 - 2020 by ChartIQ, Inc.
- * All rights reserved.
- */
-
-body.advancedAppLauncher {
-	font-style: normal;
-	font-stretch: normal;
-	line-height: normal;
-	letter-spacing: normal;
-	background-color: var(--appMenu-background-color) !important;
-}
-
-.advancedAppLauncher img {
-	user-drag: none;
-	user-select: none;
-	-moz-user-select: none;
-	-webkit-user-drag: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-}
-
-.pointer {
-	cursor: pointer;
-}
-
-#wrapper {
-	height: 100%;
-}
-
-.folder-list div {
-	outline: none;
-	user-select: none;
-}
-
-.folder-list {
-	margin-top: 10px;
-	max-height: 305px;
-	overflow-y: auto;
-	overflow-x: hidden;
-	padding-right: 5px;
-}
-.bottom {
-	padding-top: 4px;
-	width: 195px;
-	border-top: 4px solid var(--appMenu-separator-color);
-	background-color: var(--appMenu-leftNav-background-color);
-	margin-bottom: 6px;
-}
-
-.bottom .complex-menu-section-toggle {
-	display: flex;
-	justify-content: flex-start;
-}
-
-.complex-menu-section-toggle #rename.error {
-	border-bottom: solid 1px var(--appMenu-search-input-error-color);
-	animation-name: animate_error;
-	animation-duration: 900ms;
-	animation-iteration-count: 2;
-	animation-timing-function: linear;
-}
-
-@keyframes animate_error {
-	0% {
-		/* border-bottom: solid 1px var(--appMenu-search-input-active-color); */
-		border-bottom: solid 1px var(--appMenu-search-input-error-color);
-	}
-	50% {
-		border-bottom: solid 1px var(--appMenu-search-input-active-color);
-	}
-	100% {
-		border-bottom: 1px solid var(--appMenu-search-input-error-color);
-	}
-}
-
-.complex-menu-wrapper {
-	display: flex;
-	height: 100%;
-	overflow: hidden;
-	justify-content: flex-start;
-}
-
-.advancedAppLauncher .complex-menu-left-nav-header-img {
-	width: 29px;
-	height: 31px;
-	margin-right: 15px;
-	padding-left: 13px;
-	padding-top: 11px;
-	padding-bottom: 7px;
-}
-
-.advancedAppLauncher .complex-menu-content-section,
-.complex-menu-left-nav {
-	display: flex;
-}
-
-.advancedAppLauncher .complex-menu-left-nav {
-	width: 195px;
-	font-size: var(--appMenu-font-size);
-	flex-direction: column;
-	background-color: var(--appMenu-leftNav-background-color);
-	display: flex;
-	justify-content: space-between;
-}
-
-.complex-menu-header-wrapper {
-	display: flex;
-	justify-content: space-between;
-}
-
-.content-section-wrapper {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-}
-
-.advanced-app-launcher {
-	height: 400px;
-	display: flex;
-	flex-direction: column;
-}
-
-.ff-adp-hamburger {
-	cursor: grab;
-}
-
-.ff-close {
-	cursor: pointer;
-}
-
-.ff-close:hover {
-	color: var(--appMenu-close-hover-color);
-}
-
-.tags-list .app-tag .ff-close {
-	margin-top: 2px;
-}
-
-.left-nav-label {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.left-nav-label i {
-	padding-right: 8px;
-	padding-top: 4px;
-	font-size: 13px;
-	color: var(--appMenu-leftNav-icon-color);
-}
-
-.folder-action-icons {
-	color: var(--appMenu-icon-color);
-	display: flex;
-	justify-content: space-between;
-	align-self: center;
-	align-items: center;
-	width: 45px;
-}
-
-.folder-action-icons .ff-check-mark-2 {
-	transition: 0.2s all;
-	color: var(--accent-positive);
-}
-
-.folder-action-icons .ff-close {
-	padding-top: 2px;
-	padding-right: 4px;
-	transition: 0.2s all;
-	color: var(--accent-negative);
-}
-
-.folder-action-icons .ff-close:hover {
-	color: var(--accent-negative-1);
-}
-
-.folder-action-icons .ff-adp-edit {
-	transition: 0.2s all;
-}
-
-.folder-action-icons .ff-adp-trash-outline {
-	padding-top: 2px;
-	padding-right: 4px;
-	transition: 0.2s all;
-}
-
-.folder-action-icons .ff-adp-trash-outline:hover {
-	color: var(--menu-delete-background-hover-color);
-}
-
-.folder-name {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	width: 105px;
-}
-
-.left-nav-label .folder-action-icons {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
-	align-items: center;
-}
-
-.left-nav-label input {
-	font-family: var(--font-family);
-	font-weight: var(--font-weight);
-	color: var(--appMenu-font-color);
-	width: 100%;
-	font-weight: var(--appMenu-font-weight);
-	background: var(--appMenu-leftNav-highlighter-hover);
-	border: 0;
-	border-bottom: solid 1px var(--appMenu-search-input-inactive-color);
-	font-size: var(--appMenu-font-size);
-	transition: 0.2s ease-in;
-	position: relative;
-	left: 14px;
-}
-
-.left-nav-label input:focus {
-	border-bottom: solid 1px var(--appMenu-search-input-active-color);
-	outline: none;
-}
-
-.complex-menu-section-toggle {
-	padding: 5px 5px 5px 28px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	position: relative;
-	border-radius: 0 20px 20px 0;
-	height: 24px;
-}
-
-.complex-menu-section-toggle.folder-with-icon {
-	padding: 5px 5px 5px 7px;
-}
-
-.complex-menu-action {
-	padding: 5px 5px 5px 8px;
-	display: flex;
-	align-items: center;
-	justify-content: flex-start;
-	position: relative;
-	border-radius: 0 20px 20px 0;
-	height: 24px;
-	margin-right: 5px;
-	user-select: none;
-}
-
-.complex-menu-action:before {
-	color: var(--appMenu-leftNav-icon-color);
-	padding: 1px 7px 0px 0px;
-	font-size: 13px;
-}
-
-.complex-menu-action i {
-	color: var(--appMenu-leftNav-icon-color);
-	padding-right: 4px;
-	font-size: 13px;
-}
-
-.complex-menu-section-toggle .ff-dots-vert {
-	color: var(--appMenu-font-color);
-	display: flex;
-	justify-self: flex-end;
-}
-
-.complex-menu-section-toggle:hover {
-	cursor: pointer;
-	background-color: var(--appMenu-leftNav-highlighter-hover);
-}
-
-.complex-menu-action:hover {
-	cursor: pointer;
-	background-color: var(--appMenu-leftNav-highlighter-hover);
-}
-
-.active-section-toggle {
-	background-color: var(--appMenu-leftNav-highlighter);
-}
-
-.complex-menu-content-row {
-	flex: 1;
-	align-content: flex-start;
-	background-color: var(--appMenu-background-color);
-	overflow-y: auto;
-	padding: 0px 5px 5px 5px;
-}
-
-.folder-actions-menu-wrapper {
-	height: 17px;
-	display: table;
-	position: absolute;
-	right: 10px;
-}
-
-.folder-actions-menu-wrapper span {
-	line-height: 17px;
-	font-size: var(--appMenu-font-size);
-	cursor: pointer;
-}
-
-.folder-actions-menu {
-	z-index: 11;
-	top: 5px;
-	position: absolute;
-	width: 70px;
-	max-height: 200px;
-	overflow-y: auto;
-	border-radius: 3px;
-	background-color: var(--appMenu-leftNav-contextMenu-background-color);
-	padding: 5px 10px;
-}
-
-.folder-actions-menu ul {
-	padding: 0px;
-	margin: 0px;
-}
-
-.folder-actions-menu li {
-	cursor: pointer;
-	line-height: 19px;
-	font-size: var(--appMenu-font-size);
-	list-style: none;
-	color: var(--appMenu-font-color);
-}
-
-.no-top-border {
-	border-top: 1px solid transparent;
-}
-
-.advancedAppLauncher ::-webkit-scrollbar-track {
-	border-radius: 3px;
-	background-color: transparent;
-}
-
-.advancedAppLauncher ::-webkit-scrollbar-track-piece {
-	display: none;
-}
-
-.advancedAppLauncher ::-webkit-scrollbar {
-	width: 5px;
-	background-color: transparent;
-	border-radius: 3px;
-}
-
-.folder-action-icons .ff-adp-edit:hover {
-	color: var(--appMenu-edit-icon-hover-color);
-}
-
-::-webkit-scrollbar-thumb {
-	cursor: pointer;
-	border-radius: 3px;
-	background-color: var(--scrollbar-color);
-}
-
-select:focus,
-option:focus {
-	outline: none;
-	background-color: transparent;
-}
-
-.actions-menu-wrapper {
-	border-radius: 40px;
-	display: table;
-	position: absolute;
-	top: 9px;
-	right: 25px;
-	color: var(--appMenu-icon-color);
-	transition: 0.2s all;
-}
-
-.actions-menu-wrapper:hover {
-	color: var(--appMenu-edit-icon-hover-color);
-}
-
-.actions-menu-wrapper li {
-	color: var(--appMenu-font-color);
-}
-
-.actions-menu-wrapper span {
-	line-height: 17px;
-	font-size: var(--appMenu-font-size);
-	cursor: pointer;
-}
-.actions-menu-wrapper span i {
-	margin-right: 5px;
-	font-size: 14px;
-}
-.actions-menu {
-	background: var(--appMenu-actions-menu-background-color);
-	z-index: 10;
-	top: 22px;
-	position: absolute;
-	width: 140px;
-	max-height: 214px;
-	overflow-y: auto;
-}
-.actions-menu ul {
-	padding: 0px;
-	margin: 4px 0px;
-}
-.actions-menu li {
-	font-size: var(--appMenu-font-size);
-	cursor: pointer;
-	padding: 5px 8px;
-}
-
-.app-item {
-	position: relative;
-	padding: 6px 15px;
-	border-radius: 40px;
-}
-
-.app-item,
-.app-item-title,
-.app-item-tags {
-	display: block;
-	font-weight: var(--tag-font-weight);
-	font-size: var(--tag-font-size);
-}
-
-.app-item-tags {
-	display: flex;
-	align-items: center;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	width: 390px;
-	margin-left: 30px;
-	font-weight: var(--appMenu-tag-font-weight);
-}
-
-.app-item-tags i {
-	padding-right: 6px;
-	padding-top: 3px;
-	color: var(--core-primary-5);
-}
-
-.app-item:hover {
-	background-color: var(--appMenu-app-item-hover-background-color);
-}
-
-.app-item-title {
-	display: flex;
-	align-items: center;
-	font-size: 12px;
-	margin: 3px 0px;
-	line-height: 1.1;
-	width: 370px;
-	height: 15px;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.app-item .app-name {
-	text-overflow: ellipsis;
-	overflow: hidden;
-	height: 14px;
-	font-weight: var(--font-weight);
-}
-
-.app-item-title .ff-favorite {
-	padding-top: 1px;
-	padding-right: 7px;
-	font-size: var(--appMenu-font-size);
-}
-
-.filter-sort {
-	width: 100%;
-	margin-bottom: 10px;
-	padding-top: 10px;
-	position: sticky;
-	top: 0;
-	background-color: var(--appMenu-background-color);
-	z-index: 2147483646;
-}
-
-.sort {
-	font-size: var(--appMenu-font-size);
-	padding-left: 10px;
-	user-select: none;
-}
-
-.sort-option.first {
-	margin-left: 10px;
-}
-
-.sort-option {
-	font-size: var(--appMenu-font-size);
-	border-radius: 15px;
-	font-weight: var(--appMenu-tag-font-weight);
-	border: solid 1px var(--appMenu-sort-inactive-border-color);
-	height: 18px;
-	line-height: 17px;
-	padding: 2px 7px;
-	display: inline-block;
-	margin: 0px 5px;
-	user-select: none;
-}
-
-.sort-option.active {
-	border: 1px solid var(--appMenu-sort-active-color);
-	background-color: var(--appMenu-sort-active-color);
-}
-
-.search-box {
-	margin-bottom: 6px;
-	padding-left: 10px;
-	display: flex;
-	width: 96%;
-	align-items: flex-start;
-}
-
-.search-box input {
-	font-family: var(--font-family);
-	font-weight: var(--font-weight);
-	color: var(--appMenu-font-color);
-	width: calc(100% - 72px);
-	height: 24px;
-	background: none;
-	border: 0;
-	border-bottom: solid 1px var(--appMenu-search-input-inactive-color);
-	font-size: var(--appMenu-font-size);
-	transition: 0.2s ease-in;
-}
-
-.search-box input:focus {
-	border-bottom: solid 1px var(--appMenu-search-input-active-color);
-	outline: none;
-}
-
-.search-box i {
-	padding-right: 8px;
-	margin-top: 7px;
-}
-
-.tags-list {
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	padding-left: 10px;
-	margin-bottom: 2px;
-	flex-wrap: wrap;
-}
-
-.tag-item {
-	cursor: default;
-	margin-bottom: 5px;
-	display: inline-block;
-	font-size: var(--tag-font-size);
-	padding: 3px 5px;
-	margin-right: 5px;
-	border-radius: 2px;
-	background-color: var(--tag-background-color);
-}
-
-.no-results {
-	line-height: 22px;
-	margin-top: 20px;
-	user-select: none;
-	text-align: center;
-}
-
-.ff-plus-circle,
-.ff-dashboard-new {
-	padding-top: 2px;
-}
-
-.tag-name.highlight {
-	text-decoration: underline;
-	cursor: pointer;
-}
-
-.add-app-form {
-	background: var(--appMenu-background-color);
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 2147483647;
-}
-
-.add-app-form form {
-	padding: 20px;
-}
-
-.link {
-	cursor: pointer;
-}
-
-.input-error {
-	color: var(--accent-negative);
-	margin: 0.5em;
-}
-
-.close-icon {
-	border: 1px solid transparent;
-	background-color: transparent;
-	display: inline-block;
-	vertical-align: middle;
-	outline: 0;
-	cursor: pointer;
-	margin-top: 4px;
-}
-
-.close-icon::after {
-	content: "\70";
-	font-family: font-finance;
-	width: 15px;
-	height: 15px;
-	/* Terry, these styles now mess up the location of the close-icon in the advanced app launcher's search box, but it's not clear what changed to make this so
-	position: absolute;
-	right: 68px;
-	top: 13px;
-	bottom: 0;
-	*/
-	z-index: 1;
-	color: var(--appMenu-icon-color);
-	font-size: 8px;
-	cursor: pointer;
-}
-
-.close-icon:hover::after {
-	color: var(--appMenu-close-hover-color);
-}
-
-.input-box:not(:valid) ~ .close-icon {
-	display: none;
-}
+/*!
+ * advancedAppLauncher.css
+ * Copyright 2017 - 2020 by ChartIQ, Inc.
+ * All rights reserved.
+ */
+
+body.advancedAppLauncher {
+	font-style: normal;
+	font-stretch: normal;
+	line-height: normal;
+	letter-spacing: normal;
+	background-color: var(--appMenu-background-color) !important;
+}
+
+.advancedAppLauncher img {
+	user-drag: none;
+	user-select: none;
+	-moz-user-select: none;
+	-webkit-user-drag: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+.pointer {
+	cursor: pointer;
+}
+
+#wrapper {
+	height: 100%;
+}
+
+.folder-list div {
+	outline: none;
+	user-select: none;
+}
+
+.folder-list {
+	margin-top: 10px;
+	max-height: 305px;
+	overflow-y: auto;
+	overflow-x: hidden;
+	padding-right: 5px;
+}
+.bottom {
+	padding-top: 4px;
+	width: 195px;
+	border-top: 4px solid var(--appMenu-separator-color);
+	background-color: var(--appMenu-leftNav-background-color);
+	margin-bottom: 6px;
+}
+
+.bottom .complex-menu-section-toggle {
+	display: flex;
+	justify-content: flex-start;
+}
+
+.complex-menu-section-toggle #rename.error {
+	border-bottom: solid 1px var(--appMenu-search-input-error-color);
+	animation-name: animate_error;
+	animation-duration: 900ms;
+	animation-iteration-count: 2;
+	animation-timing-function: linear;
+}
+
+@keyframes animate_error {
+	0% {
+		/* border-bottom: solid 1px var(--appMenu-search-input-active-color); */
+		border-bottom: solid 1px var(--appMenu-search-input-error-color);
+	}
+	50% {
+		border-bottom: solid 1px var(--appMenu-search-input-active-color);
+	}
+	100% {
+		border-bottom: 1px solid var(--appMenu-search-input-error-color);
+	}
+}
+
+.complex-menu-wrapper {
+	display: flex;
+	height: 100%;
+	overflow: hidden;
+	justify-content: flex-start;
+}
+
+.advancedAppLauncher .complex-menu-left-nav-header-img {
+	width: 29px;
+	height: 31px;
+	margin-right: 15px;
+	padding-left: 13px;
+	padding-top: 11px;
+	padding-bottom: 7px;
+}
+
+.advancedAppLauncher .complex-menu-content-section,
+.complex-menu-left-nav {
+	display: flex;
+}
+
+.advancedAppLauncher .complex-menu-left-nav {
+	width: 195px;
+	font-size: var(--appMenu-font-size);
+	flex-direction: column;
+	background-color: var(--appMenu-leftNav-background-color);
+	display: flex;
+	justify-content: space-between;
+}
+
+.complex-menu-header-wrapper {
+	display: flex;
+	justify-content: space-between;
+}
+
+.content-section-wrapper {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.advanced-app-launcher {
+	height: 400px;
+	display: flex;
+	flex-direction: column;
+}
+
+.ff-adp-hamburger {
+	cursor: grab;
+}
+
+.ff-close {
+	cursor: pointer;
+}
+
+.ff-close:hover {
+	color: var(--appMenu-close-hover-color);
+}
+
+.tags-list .app-tag .ff-close {
+	margin-top: 2px;
+}
+
+.left-nav-label {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.left-nav-label i {
+	padding-right: 8px;
+	padding-top: 4px;
+	font-size: 13px;
+	color: var(--appMenu-leftNav-icon-color);
+}
+
+.folder-action-icons {
+	color: var(--appMenu-icon-color);
+	display: flex;
+	justify-content: space-between;
+	align-self: center;
+	align-items: center;
+	width: 45px;
+}
+
+.folder-action-icons .ff-check-mark-2 {
+	transition: 0.2s all;
+	color: var(--accent-positive);
+}
+
+.folder-action-icons .ff-close {
+	padding-top: 2px;
+	padding-right: 4px;
+	transition: 0.2s all;
+	color: var(--accent-negative);
+}
+
+.folder-action-icons .ff-close:hover {
+	color: var(--accent-negative-1);
+}
+
+.folder-action-icons .ff-adp-edit {
+	transition: 0.2s all;
+}
+
+.folder-action-icons .ff-adp-trash-outline {
+	padding-top: 2px;
+	padding-right: 4px;
+	transition: 0.2s all;
+}
+
+.folder-action-icons .ff-adp-trash-outline:hover {
+	color: var(--menu-delete-background-hover-color);
+}
+
+.folder-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	width: 105px;
+}
+
+.left-nav-label .folder-action-icons {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: center;
+}
+
+.left-nav-label input {
+	font-family: var(--font-family);
+	font-weight: var(--font-weight);
+	color: var(--appMenu-font-color);
+	width: 100%;
+	font-weight: var(--appMenu-font-weight);
+	background: var(--appMenu-leftNav-highlighter-hover);
+	border: 0;
+	border-bottom: solid 1px var(--appMenu-search-input-inactive-color);
+	font-size: var(--appMenu-font-size);
+	transition: 0.2s ease-in;
+	position: relative;
+	left: 14px;
+}
+
+.left-nav-label input:focus {
+	border-bottom: solid 1px var(--appMenu-search-input-active-color);
+	outline: none;
+}
+
+.complex-menu-section-toggle {
+	padding: 5px 5px 5px 28px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	border-radius: 0 20px 20px 0;
+	height: 24px;
+}
+
+.complex-menu-section-toggle.folder-with-icon {
+	padding: 5px 5px 5px 7px;
+}
+
+.complex-menu-action {
+	padding: 5px 5px 5px 8px;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	position: relative;
+	border-radius: 0 20px 20px 0;
+	height: 24px;
+	margin-right: 5px;
+	user-select: none;
+}
+
+.complex-menu-action:before {
+	color: var(--appMenu-leftNav-icon-color);
+	padding: 1px 7px 0px 0px;
+	font-size: 13px;
+}
+
+.complex-menu-action i {
+	color: var(--appMenu-leftNav-icon-color);
+	padding-right: 4px;
+	font-size: 13px;
+}
+
+.complex-menu-section-toggle .ff-dots-vert {
+	color: var(--appMenu-font-color);
+	display: flex;
+	justify-self: flex-end;
+}
+
+.complex-menu-section-toggle:hover {
+	cursor: pointer;
+	background-color: var(--appMenu-leftNav-highlighter-hover);
+}
+
+.complex-menu-action:hover {
+	cursor: pointer;
+	background-color: var(--appMenu-leftNav-highlighter-hover);
+}
+
+.active-section-toggle {
+	background-color: var(--appMenu-leftNav-highlighter);
+}
+
+.complex-menu-content-row {
+	flex: 1;
+	align-content: flex-start;
+	background-color: var(--appMenu-background-color);
+	overflow-y: auto;
+	padding: 0px 5px 5px 5px;
+}
+
+.folder-actions-menu-wrapper {
+	height: 17px;
+	display: table;
+	position: absolute;
+	right: 10px;
+}
+
+.folder-actions-menu-wrapper span {
+	line-height: 17px;
+	font-size: var(--appMenu-font-size);
+	cursor: pointer;
+}
+
+.folder-actions-menu {
+	z-index: 11;
+	top: 5px;
+	position: absolute;
+	width: 70px;
+	max-height: 200px;
+	overflow-y: auto;
+	border-radius: 3px;
+	background-color: var(--appMenu-leftNav-contextMenu-background-color);
+	padding: 5px 10px;
+}
+
+.folder-actions-menu ul {
+	padding: 0px;
+	margin: 0px;
+}
+
+.folder-actions-menu li {
+	cursor: pointer;
+	line-height: 19px;
+	font-size: var(--appMenu-font-size);
+	list-style: none;
+	color: var(--appMenu-font-color);
+}
+
+.no-top-border {
+	border-top: 1px solid transparent;
+}
+
+.advancedAppLauncher ::-webkit-scrollbar-track {
+	border-radius: 3px;
+	background-color: transparent;
+}
+
+.advancedAppLauncher ::-webkit-scrollbar-track-piece {
+	display: none;
+}
+
+.advancedAppLauncher ::-webkit-scrollbar {
+	width: 5px;
+	background-color: transparent;
+	border-radius: 3px;
+}
+
+.folder-action-icons .ff-adp-edit:hover {
+	color: var(--appMenu-edit-icon-hover-color);
+}
+
+::-webkit-scrollbar-thumb {
+	cursor: pointer;
+	border-radius: 3px;
+	background-color: var(--scrollbar-color);
+}
+
+select:focus,
+option:focus {
+	outline: none;
+	background-color: transparent;
+}
+
+.actions-menu-wrapper {
+	border-radius: 40px;
+	display: table;
+	position: absolute;
+	top: 9px;
+	right: 25px;
+	color: var(--appMenu-icon-color);
+	transition: 0.2s all;
+}
+
+.actions-menu-wrapper:hover {
+	color: var(--appMenu-edit-icon-hover-color);
+}
+
+.actions-menu-wrapper li {
+	color: var(--appMenu-font-color);
+}
+
+.actions-menu-wrapper span {
+	line-height: 17px;
+	font-size: var(--appMenu-font-size);
+	cursor: pointer;
+}
+.actions-menu-wrapper span i {
+	margin-right: 5px;
+	font-size: 14px;
+}
+.actions-menu {
+	background: var(--appMenu-actions-menu-background-color);
+	z-index: 10;
+	top: 22px;
+	position: absolute;
+	width: 140px;
+	max-height: 214px;
+	overflow-y: auto;
+}
+.actions-menu ul {
+	padding: 0px;
+	margin: 4px 0px;
+}
+.actions-menu li {
+	font-size: var(--appMenu-font-size);
+	cursor: pointer;
+	padding: 5px 8px;
+}
+
+.app-item {
+	position: relative;
+	padding: 6px 15px;
+	border-radius: 40px;
+}
+
+.app-item,
+.app-item-title,
+.app-item-tags {
+	display: block;
+	font-weight: var(--tag-font-weight);
+	font-size: var(--tag-font-size);
+}
+
+.app-item-tags {
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	width: 390px;
+	margin-left: 30px;
+	font-weight: var(--appMenu-tag-font-weight);
+}
+
+.app-item-tags i {
+	padding-right: 6px;
+	padding-top: 3px;
+	color: var(--core-primary-5);
+}
+
+.app-item:hover {
+	background-color: var(--appMenu-app-item-hover-background-color);
+}
+
+.app-item-title {
+	display: flex;
+	align-items: center;
+	font-size: 12px;
+	margin: 3px 0px;
+	line-height: 1.1;
+	width: 370px;
+	height: 15px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.app-item .app-name {
+	text-overflow: ellipsis;
+	overflow: hidden;
+	height: 14px;
+	font-weight: var(--font-weight);
+}
+
+.app-item-title .ff-favorite {
+	padding-top: 1px;
+	padding-right: 7px;
+	font-size: var(--appMenu-font-size);
+}
+
+.filter-sort {
+	width: 100%;
+	margin-bottom: 10px;
+	padding-top: 10px;
+	position: sticky;
+	top: 0;
+	background-color: var(--appMenu-background-color);
+	z-index: 2147483646;
+}
+
+.sort {
+	font-size: var(--appMenu-font-size);
+	padding-left: 10px;
+	user-select: none;
+}
+
+.sort-option.first {
+	margin-left: 10px;
+}
+
+.sort-option {
+	font-size: var(--appMenu-font-size);
+	border-radius: 15px;
+	font-weight: var(--appMenu-tag-font-weight);
+	border: solid 1px var(--appMenu-sort-inactive-border-color);
+	height: 18px;
+	line-height: 17px;
+	padding: 2px 7px;
+	display: inline-block;
+	margin: 0px 5px;
+	user-select: none;
+}
+
+.sort-option.active {
+	border: 1px solid var(--appMenu-sort-active-color);
+	background-color: var(--appMenu-sort-active-color);
+}
+
+.search-box {
+	margin-bottom: 6px;
+	padding-left: 10px;
+	display: flex;
+	width: 96%;
+	align-items: flex-start;
+}
+
+.search-box input {
+	font-family: var(--font-family);
+	font-weight: var(--font-weight);
+	color: var(--appMenu-font-color);
+	width: calc(100% - 72px);
+	height: 24px;
+	background: none;
+	border: 0;
+	border-bottom: solid 1px var(--appMenu-search-input-inactive-color);
+	font-size: var(--appMenu-font-size);
+	transition: 0.2s ease-in;
+}
+
+.search-box input:focus {
+	border-bottom: solid 1px var(--appMenu-search-input-active-color);
+	outline: none;
+}
+
+.search-box i {
+	padding-right: 8px;
+	margin-top: 7px;
+}
+
+.tags-list {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	padding-left: 10px;
+	margin-bottom: 2px;
+	flex-wrap: wrap;
+}
+
+.tag-item {
+	cursor: default;
+	margin-bottom: 5px;
+	display: inline-block;
+	font-size: var(--tag-font-size);
+	padding: 3px 5px;
+	margin-right: 5px;
+	border-radius: 2px;
+	background-color: var(--tag-background-color);
+}
+
+.no-results {
+	line-height: 22px;
+	margin-top: 20px;
+	user-select: none;
+	text-align: center;
+}
+
+.ff-plus-circle,
+.ff-dashboard-new {
+	padding-top: 2px;
+}
+
+.tag-name.highlight {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.add-app-form {
+	background: var(--appMenu-background-color);
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 2147483647;
+}
+
+.add-app-form form {
+	padding: 20px;
+}
+
+.link {
+	cursor: pointer;
+}
+
+.input-error {
+	color: var(--accent-negative);
+	margin: 0.5em;
+}
+
+.close-icon {
+	border: 1px solid transparent;
+	background-color: transparent;
+	display: inline-block;
+	vertical-align: middle;
+	outline: 0;
+	cursor: pointer;
+	margin-top: 4px;
+}
+
+.close-icon::after {
+	content: "\70";
+	font-family: font-finance;
+	width: 15px;
+	height: 15px;
+	/* Terry, these styles now mess up the location of the close-icon in the advanced app launcher's search box, but it's not clear what changed to make this so
+	position: absolute;
+	right: 68px;
+	top: 13px;
+	bottom: 0;
+	*/
+	z-index: 1;
+	color: var(--appMenu-icon-color);
+	font-size: 8px;
+	cursor: pointer;
+}
+
+.close-icon:hover::after {
+	color: var(--appMenu-close-hover-color);
+}
+
+.input-box:not(:valid) ~ .close-icon {
+	display: none;
+}