diff --git a/.eslintrc.yaml b/.eslintrc.yaml
index 5fd0a245f222..3e4c6ea50b72 100644
--- a/.eslintrc.yaml
+++ b/.eslintrc.yaml
@@ -318,7 +318,7 @@ rules:
   jquery/no-serialize: [2]
   jquery/no-show: [2]
   jquery/no-size: [2]
-  jquery/no-sizzle: [0]
+  jquery/no-sizzle: [2]
   jquery/no-slide: [0]
   jquery/no-submit: [0]
   jquery/no-text: [0]
@@ -470,7 +470,7 @@ rules:
   no-jquery/no-selector-prop: [2]
   no-jquery/no-serialize: [2]
   no-jquery/no-size: [2]
-  no-jquery/no-sizzle: [0]
+  no-jquery/no-sizzle: [2]
   no-jquery/no-slide: [2]
   no-jquery/no-sub: [2]
   no-jquery/no-support: [2]
diff --git a/.gitattributes b/.gitattributes
index 467b8a47b5d6..9fb4a4e83dd7 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,5 +1,6 @@
 * text=auto eol=lf
 *.tmpl linguist-language=Handlebars
+*.pb.go linguist-generated
 /assets/*.json linguist-generated
 /public/assets/img/svg/*.svg linguist-generated
 /templates/swagger/v1_json.tmpl linguist-generated
diff --git a/Makefile b/Makefile
index f1acfbc81e3c..594f13ead8ac 100644
--- a/Makefile
+++ b/Makefile
@@ -295,7 +295,7 @@ clean:
 
 .PHONY: fmt
 fmt:
-	GOFUMPT_PACKAGE=$(GOFUMPT_PACKAGE) $(GO) run build/code-batch-process.go gitea-fmt -w '{file-list}'
+	@GOFUMPT_PACKAGE=$(GOFUMPT_PACKAGE) $(GO) run build/code-batch-process.go gitea-fmt -w '{file-list}'
 	$(eval TEMPLATES := $(shell find templates -type f -name '*.tmpl'))
 	@# strip whitespace after '{{' or '(' and before '}}' or ')' unless there is only
 	@# whitespace before it
diff --git a/build/code-batch-process.go b/build/code-batch-process.go
index b3ee3994207d..cc2ab680268c 100644
--- a/build/code-batch-process.go
+++ b/build/code-batch-process.go
@@ -69,6 +69,7 @@ func newFileCollector(fileFilter string, batchSize int) (*fileCollector, error)
 		co.includePatterns = append(co.includePatterns, regexp.MustCompile(`.*\.go$`))
 
 		co.excludePatterns = append(co.excludePatterns, regexp.MustCompile(`.*\bbindata\.go$`))
+		co.excludePatterns = append(co.excludePatterns, regexp.MustCompile(`\.pb\.go$`))
 		co.excludePatterns = append(co.excludePatterns, regexp.MustCompile(`tests/gitea-repositories-meta`))
 		co.excludePatterns = append(co.excludePatterns, regexp.MustCompile(`tests/integration/migration-test`))
 		co.excludePatterns = append(co.excludePatterns, regexp.MustCompile(`modules/git/tests`))
@@ -203,17 +204,6 @@ Example:
 `, "file-batch-exec")
 }
 
-func getGoVersion() string {
-	goModFile, err := os.ReadFile("go.mod")
-	if err != nil {
-		log.Fatalf(`Faild to read "go.mod": %v`, err)
-		os.Exit(1)
-	}
-	goModVersionRegex := regexp.MustCompile(`go \d+\.\d+`)
-	goModVersionLine := goModVersionRegex.Find(goModFile)
-	return string(goModVersionLine[3:])
-}
-
 func newFileCollectorFromMainOptions(mainOptions map[string]string) (fc *fileCollector, err error) {
 	fileFilter := mainOptions["file-filter"]
 	if fileFilter == "" {
@@ -278,7 +268,8 @@ func main() {
 				log.Print("the -d option is not supported by gitea-fmt")
 			}
 			cmdErrors = append(cmdErrors, giteaFormatGoImports(files, containsString(subArgs, "-w")))
-			cmdErrors = append(cmdErrors, passThroughCmd("go", append([]string{"run", os.Getenv("GOFUMPT_PACKAGE"), "-extra", "-lang", getGoVersion()}, substArgs...)))
+			cmdErrors = append(cmdErrors, passThroughCmd("gofmt", append([]string{"-w", "-r", "interface{} -> any"}, substArgs...)))
+			cmdErrors = append(cmdErrors, passThroughCmd("go", append([]string{"run", os.Getenv("GOFUMPT_PACKAGE"), "-extra"}, substArgs...)))
 		default:
 			log.Fatalf("unknown cmd: %s %v", subCmd, subArgs)
 		}
diff --git a/cmd/admin_user_change_password.go b/cmd/admin_user_change_password.go
index 824d66d11259..bd9063a8e4b8 100644
--- a/cmd/admin_user_change_password.go
+++ b/cmd/admin_user_change_password.go
@@ -36,6 +36,7 @@ var microcmdUserChangePassword = &cli.Command{
 		&cli.BoolFlag{
 			Name:  "must-change-password",
 			Usage: "User must change password",
+			Value: true,
 		},
 	},
 }
@@ -57,23 +58,18 @@ func runChangePassword(c *cli.Context) error {
 		return err
 	}
 
-	var mustChangePassword optional.Option[bool]
-	if c.IsSet("must-change-password") {
-		mustChangePassword = optional.Some(c.Bool("must-change-password"))
-	}
-
 	opts := &user_service.UpdateAuthOptions{
 		Password:           optional.Some(c.String("password")),
-		MustChangePassword: mustChangePassword,
+		MustChangePassword: optional.Some(c.Bool("must-change-password")),
 	}
 	if err := user_service.UpdateAuth(ctx, user, opts); err != nil {
 		switch {
 		case errors.Is(err, password.ErrMinLength):
-			return fmt.Errorf("Password is not long enough. Needs to be at least %d", setting.MinPasswordLength)
+			return fmt.Errorf("password is not long enough, needs to be at least %d characters", setting.MinPasswordLength)
 		case errors.Is(err, password.ErrComplexity):
-			return errors.New("Password does not meet complexity requirements")
+			return errors.New("password does not meet complexity requirements")
 		case errors.Is(err, password.ErrIsPwned):
-			return errors.New("The password you chose is on a list of stolen passwords previously exposed in public data breaches. Please try again with a different password.\nFor more details, see https://haveibeenpwned.com/Passwords")
+			return errors.New("the password is in a list of stolen passwords previously exposed in public data breaches, please try again with a different password, to see more details: https://haveibeenpwned.com/Passwords")
 		default:
 			return err
 		}
diff --git a/cmd/admin_user_create.go b/cmd/admin_user_create.go
index a257ce21c8df..403e3ee8d82d 100644
--- a/cmd/admin_user_create.go
+++ b/cmd/admin_user_create.go
@@ -8,6 +8,7 @@ import (
 	"fmt"
 
 	auth_model "code.gitea.io/gitea/models/auth"
+	"code.gitea.io/gitea/models/db"
 	user_model "code.gitea.io/gitea/models/user"
 	pwd "code.gitea.io/gitea/modules/auth/password"
 	"code.gitea.io/gitea/modules/optional"
@@ -46,8 +47,9 @@ var microcmdUserCreate = &cli.Command{
 			Usage: "Generate a random password for the user",
 		},
 		&cli.BoolFlag{
-			Name:  "must-change-password",
-			Usage: "Set this option to false to prevent forcing the user to change their password after initial login, (Default: true)",
+			Name:               "must-change-password",
+			Usage:              "Set to false to prevent forcing the user to change their password after initial login",
+			DisableDefaultText: true,
 		},
 		&cli.IntFlag{
 			Name:  "random-password-length",
@@ -71,10 +73,10 @@ func runCreateUser(c *cli.Context) error {
 	}
 
 	if c.IsSet("name") && c.IsSet("username") {
-		return errors.New("Cannot set both --name and --username flags")
+		return errors.New("cannot set both --name and --username flags")
 	}
 	if !c.IsSet("name") && !c.IsSet("username") {
-		return errors.New("One of --name or --username flags must be set")
+		return errors.New("one of --name or --username flags must be set")
 	}
 
 	if c.IsSet("password") && c.IsSet("random-password") {
@@ -110,17 +112,21 @@ func runCreateUser(c *cli.Context) error {
 		return errors.New("must set either password or random-password flag")
 	}
 
-	// always default to true
-	changePassword := true
-
-	// If this is the first user being created.
-	// Take it as the admin and don't force a password update.
-	if n := user_model.CountUsers(ctx, nil); n == 0 {
-		changePassword = false
-	}
-
+	isAdmin := c.Bool("admin")
+	mustChangePassword := true // always default to true
 	if c.IsSet("must-change-password") {
-		changePassword = c.Bool("must-change-password")
+		// if the flag is set, use the value provided by the user
+		mustChangePassword = c.Bool("must-change-password")
+	} else {
+		// check whether there are users in the database
+		hasUserRecord, err := db.IsTableNotEmpty(&user_model.User{})
+		if err != nil {
+			return fmt.Errorf("IsTableNotEmpty: %w", err)
+		}
+		if !hasUserRecord && isAdmin {
+			// if this is the first admin being created, don't force to change password (keep the old behavior)
+			mustChangePassword = false
+		}
 	}
 
 	restricted := optional.None[bool]()
@@ -136,8 +142,8 @@ func runCreateUser(c *cli.Context) error {
 		Name:               username,
 		Email:              c.String("email"),
 		Passwd:             password,
-		IsAdmin:            c.Bool("admin"),
-		MustChangePassword: changePassword,
+		IsAdmin:            isAdmin,
+		MustChangePassword: mustChangePassword,
 		Visibility:         visibility,
 	}
 
diff --git a/docs/content/administration/command-line.en-us.md b/docs/content/administration/command-line.en-us.md
index 5049df35e050..752a8d4c6fd3 100644
--- a/docs/content/administration/command-line.en-us.md
+++ b/docs/content/administration/command-line.en-us.md
@@ -83,8 +83,7 @@ Admin operations:
         - `--email value`: Email. Required.
         - `--admin`: If provided, this makes the user an admin. Optional.
         - `--access-token`: If provided, an access token will be created for the user. Optional. (default: false).
-        - `--must-change-password`: If provided, the created user will be required to choose a newer password after the
-          initial login. Optional. (default: true).
+        - `--must-change-password`: The created user will be required to set a new password after the initial login, default: true. It could be disabled by `--must-change-password=false`.
         - `--random-password`: If provided, a randomly generated password will be used as the password of the created
           user. The value of `--password` will be discarded. Optional.
         - `--random-password-length`: If provided, it will be used to configure the length of the randomly generated
@@ -95,7 +94,7 @@ Admin operations:
       - Options:
         - `--username value`, `-u value`: Username. Required.
         - `--password value`, `-p value`: New password. Required.
-        - `--must-change-password`: If provided, the user is required to choose a new password after the login. Optional.
+        - `--must-change-password`: The user is required to set a new password after the login, default: true. It could be disabled by `--must-change-password=false`.
       - Examples:
         - `gitea admin user change-password --username myname --password asecurepassword`
     - `must-change-password`:
diff --git a/models/db/engine.go b/models/db/engine.go
index 8684c4e2f162..26abf0b96c21 100755
--- a/models/db/engine.go
+++ b/models/db/engine.go
@@ -284,8 +284,8 @@ func MaxBatchInsertSize(bean any) int {
 }
 
 // IsTableNotEmpty returns true if table has at least one record
-func IsTableNotEmpty(tableName string) (bool, error) {
-	return x.Table(tableName).Exist()
+func IsTableNotEmpty(beanOrTableName any) (bool, error) {
+	return x.Table(beanOrTableName).Exist()
 }
 
 // DeleteAllRecords will delete all the records of this table
diff --git a/models/git/commit_status_summary.go b/models/git/commit_status_summary.go
index 01674e943d04..7603e7aa6541 100644
--- a/models/git/commit_status_summary.go
+++ b/models/git/commit_status_summary.go
@@ -15,10 +15,11 @@ import (
 
 // CommitStatusSummary holds the latest commit Status of a single Commit
 type CommitStatusSummary struct {
-	ID     int64                 `xorm:"pk autoincr"`
-	RepoID int64                 `xorm:"INDEX UNIQUE(repo_id_sha)"`
-	SHA    string                `xorm:"VARCHAR(64) NOT NULL INDEX UNIQUE(repo_id_sha)"`
-	State  api.CommitStatusState `xorm:"VARCHAR(7) NOT NULL"`
+	ID        int64                 `xorm:"pk autoincr"`
+	RepoID    int64                 `xorm:"INDEX UNIQUE(repo_id_sha)"`
+	SHA       string                `xorm:"VARCHAR(64) NOT NULL INDEX UNIQUE(repo_id_sha)"`
+	State     api.CommitStatusState `xorm:"VARCHAR(7) NOT NULL"`
+	TargetURL string                `xorm:"TEXT"`
 }
 
 func init() {
@@ -44,9 +45,10 @@ func GetLatestCommitStatusForRepoAndSHAs(ctx context.Context, repoSHAs []RepoSHA
 	commitStatuses := make([]*CommitStatus, 0, len(repoSHAs))
 	for _, summary := range summaries {
 		commitStatuses = append(commitStatuses, &CommitStatus{
-			RepoID: summary.RepoID,
-			SHA:    summary.SHA,
-			State:  summary.State,
+			RepoID:    summary.RepoID,
+			SHA:       summary.SHA,
+			State:     summary.State,
+			TargetURL: summary.TargetURL,
 		})
 	}
 	return commitStatuses, nil
@@ -61,22 +63,24 @@ func UpdateCommitStatusSummary(ctx context.Context, repoID int64, sha string) er
 	// mysql will return 0 when update a record which state hasn't been changed which behaviour is different from other database,
 	// so we need to use insert in on duplicate
 	if setting.Database.Type.IsMySQL() {
-		_, err := db.GetEngine(ctx).Exec("INSERT INTO commit_status_summary (repo_id,sha,state) VALUES (?,?,?) ON DUPLICATE KEY UPDATE state=?",
-			repoID, sha, state.State, state.State)
+		_, err := db.GetEngine(ctx).Exec("INSERT INTO commit_status_summary (repo_id,sha,state,target_url) VALUES (?,?,?,?) ON DUPLICATE KEY UPDATE state=?",
+			repoID, sha, state.State, state.TargetURL, state.State)
 		return err
 	}
 
 	if cnt, err := db.GetEngine(ctx).Where("repo_id=? AND sha=?", repoID, sha).
-		Cols("state").
+		Cols("state, target_url").
 		Update(&CommitStatusSummary{
-			State: state.State,
+			State:     state.State,
+			TargetURL: state.TargetURL,
 		}); err != nil {
 		return err
 	} else if cnt == 0 {
 		_, err = db.GetEngine(ctx).Insert(&CommitStatusSummary{
-			RepoID: repoID,
-			SHA:    sha,
-			State:  state.State,
+			RepoID:    repoID,
+			SHA:       sha,
+			State:     state.State,
+			TargetURL: state.TargetURL,
 		})
 		return err
 	}
diff --git a/models/migrations/migrations.go b/models/migrations/migrations.go
index 3ea8f2acbf26..5326d48f901b 100644
--- a/models/migrations/migrations.go
+++ b/models/migrations/migrations.go
@@ -580,6 +580,8 @@ var migrations = []Migration{
 	NewMigration("Add unique index for project issue table", v1_23.AddUniqueIndexForProjectIssue),
 	// v295 -> v296
 	NewMigration("Add commit status summary table", v1_23.AddCommitStatusSummary),
+	// v296 -> v297
+	NewMigration("Add missing field of commit status summary table", v1_23.AddCommitStatusSummary2),
 }
 
 // GetCurrentDBVersion returns the current db version
diff --git a/models/migrations/v1_23/v296.go b/models/migrations/v1_23/v296.go
new file mode 100644
index 000000000000..495ae2ab23d1
--- /dev/null
+++ b/models/migrations/v1_23/v296.go
@@ -0,0 +1,16 @@
+// Copyright 2024 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package v1_23 //nolint
+
+import "xorm.io/xorm"
+
+func AddCommitStatusSummary2(x *xorm.Engine) error {
+	type CommitStatusSummary struct {
+		ID        int64  `xorm:"pk autoincr"`
+		TargetURL string `xorm:"TEXT"`
+	}
+	// there is no migrations because if there is no data on this table, it will fall back to get data
+	// from commit status
+	return x.Sync(new(CommitStatusSummary))
+}
diff --git a/modules/optional/serialization.go b/modules/optional/serialization.go
index 6688e78cd181..b120a0edf6b9 100644
--- a/modules/optional/serialization.go
+++ b/modules/optional/serialization.go
@@ -35,7 +35,7 @@ func (o *Option[T]) UnmarshalYAML(value *yaml.Node) error {
 	return nil
 }
 
-func (o Option[T]) MarshalYAML() (interface{}, error) {
+func (o Option[T]) MarshalYAML() (any, error) {
 	if !o.Has() {
 		return nil, nil
 	}
diff --git a/modules/session/store.go b/modules/session/store.go
index 4fa4d2848f1b..2f7ab7760b59 100644
--- a/modules/session/store.go
+++ b/modules/session/store.go
@@ -6,6 +6,9 @@ package session
 import (
 	"net/http"
 
+	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/web/middleware"
+
 	"gitea.com/go-chi/session"
 )
 
@@ -18,6 +21,10 @@ type Store interface {
 
 // RegenerateSession regenerates the underlying session and returns the new store
 func RegenerateSession(resp http.ResponseWriter, req *http.Request) (Store, error) {
+	// Ensure that a cookie with a trailing slash does not take precedence over
+	// the cookie written by the middleware.
+	middleware.DeleteLegacySiteCookie(resp, setting.SessionConfig.CookieName)
+
 	s, err := session.RegenerateSession(resp, req)
 	return s, err
 }
diff --git a/modules/templates/util_misc.go b/modules/templates/util_misc.go
index 6c1b4ab240e3..774385483b4c 100644
--- a/modules/templates/util_misc.go
+++ b/modules/templates/util_misc.go
@@ -142,35 +142,39 @@ type remoteAddress struct {
 	Password string
 }
 
-func mirrorRemoteAddress(ctx context.Context, m *repo_model.Repository, remoteName string, ignoreOriginalURL bool) remoteAddress {
-	a := remoteAddress{}
-
-	remoteURL := m.OriginalURL
-	if ignoreOriginalURL || remoteURL == "" {
-		var err error
-		remoteURL, err = git.GetRemoteAddress(ctx, m.RepoPath(), remoteName)
-		if err != nil {
-			log.Error("GetRemoteURL %v", err)
-			return a
-		}
+func mirrorRemoteAddress(ctx context.Context, m *repo_model.Repository, remoteName string) remoteAddress {
+	ret := remoteAddress{}
+	remoteURL, err := git.GetRemoteAddress(ctx, m.RepoPath(), remoteName)
+	if err != nil {
+		log.Error("GetRemoteURL %v", err)
+		return ret
 	}
 
 	u, err := giturl.Parse(remoteURL)
 	if err != nil {
 		log.Error("giturl.Parse %v", err)
-		return a
+		return ret
 	}
 
 	if u.Scheme != "ssh" && u.Scheme != "file" {
 		if u.User != nil {
-			a.Username = u.User.Username()
-			a.Password, _ = u.User.Password()
+			ret.Username = u.User.Username()
+			ret.Password, _ = u.User.Password()
 		}
-		u.User = nil
 	}
-	a.Address = u.String()
 
-	return a
+	// The URL stored in the git repo could contain authentication,
+	// erase it, or it will be shown in the UI.
+	u.User = nil
+	ret.Address = u.String()
+	// Why not use m.OriginalURL to set ret.Address?
+	// It should be OK to use it, since m.OriginalURL should be the same as the authentication-erased URL from the Git repository.
+	// However, the old code has already stored authentication in m.OriginalURL when updating mirror settings.
+	// That means we need to use "giturl.Parse" for m.OriginalURL again to ensure authentication is erased.
+	// Instead of doing this, why not directly use the authentication-erased URL from the Git repository?
+	// It should be the same as long as there are no bugs.
+
+	return ret
 }
 
 func FilenameIsImage(filename string) bool {
diff --git a/modules/web/middleware/cookie.go b/modules/web/middleware/cookie.go
index 621640895b95..0bed7267930c 100644
--- a/modules/web/middleware/cookie.go
+++ b/modules/web/middleware/cookie.go
@@ -45,10 +45,32 @@ func SetSiteCookie(resp http.ResponseWriter, name, value string, maxAge int) {
 		SameSite: setting.SessionConfig.SameSite,
 	}
 	resp.Header().Add("Set-Cookie", cookie.String())
-	if maxAge < 0 {
-		// There was a bug in "setting.SessionConfig.CookiePath" code, the old default value of it was empty "".
-		// So we have to delete the cookie on path="" again, because some old code leaves cookies on path="".
-		cookie.Path = strings.TrimSuffix(setting.SessionConfig.CookiePath, "/")
-		resp.Header().Add("Set-Cookie", cookie.String())
+	// Previous versions would use a cookie path with a trailing /.
+	// These are more specific than cookies without a trailing /, so
+	// we need to delete these if they exist.
+	DeleteLegacySiteCookie(resp, name)
+}
+
+// DeleteLegacySiteCookie deletes the cookie with the given name at the cookie
+// path with a trailing /, which would unintentionally override the cookie.
+func DeleteLegacySiteCookie(resp http.ResponseWriter, name string) {
+	if setting.SessionConfig.CookiePath == "" || strings.HasSuffix(setting.SessionConfig.CookiePath, "/") {
+		// If the cookie path ends with /, no legacy cookies will take
+		// precedence, so do nothing.  The exception is that cookies with no
+		// path could override other cookies, but it's complicated and we don't
+		// currently handle that.
+		return
 	}
+
+	cookie := &http.Cookie{
+		Name:     name,
+		Value:    "",
+		MaxAge:   -1,
+		Path:     setting.SessionConfig.CookiePath + "/",
+		Domain:   setting.SessionConfig.Domain,
+		Secure:   setting.SessionConfig.Secure,
+		HttpOnly: true,
+		SameSite: setting.SessionConfig.SameSite,
+	}
+	resp.Header().Add("Set-Cookie", cookie.String())
 }
diff --git a/routers/web/org/projects.go b/routers/web/org/projects.go
index 596a370d2e55..d439b11cf926 100644
--- a/routers/web/org/projects.go
+++ b/routers/web/org/projects.go
@@ -7,7 +7,6 @@ import (
 	"errors"
 	"fmt"
 	"net/http"
-	"net/url"
 	"strconv"
 	"strings"
 
@@ -195,14 +194,15 @@ func NewProjectPost(ctx *context.Context) {
 
 // ChangeProjectStatus updates the status of a project between "open" and "close"
 func ChangeProjectStatus(ctx *context.Context) {
-	toClose := false
+	var toClose bool
 	switch ctx.Params(":action") {
 	case "open":
 		toClose = false
 	case "close":
 		toClose = true
 	default:
-		ctx.Redirect(ctx.ContextUser.HomeLink() + "/-/projects")
+		ctx.JSONRedirect(ctx.ContextUser.HomeLink() + "/-/projects")
+		return
 	}
 	id := ctx.ParamsInt64(":id")
 
@@ -210,7 +210,7 @@ func ChangeProjectStatus(ctx *context.Context) {
 		ctx.NotFoundOrServerError("ChangeProjectStatusByRepoIDAndID", project_model.IsErrProjectNotExist, err)
 		return
 	}
-	ctx.Redirect(ctx.ContextUser.HomeLink() + "/-/projects?state=" + url.QueryEscape(ctx.Params(":action")))
+	ctx.JSONRedirect(fmt.Sprintf("%s/-/projects/%d", ctx.ContextUser.HomeLink(), id))
 }
 
 // DeleteProject delete a project
diff --git a/routers/web/repo/issue.go b/routers/web/repo/issue.go
index e4f2e9a2bc24..1364d7567661 100644
--- a/routers/web/repo/issue.go
+++ b/routers/web/repo/issue.go
@@ -3318,7 +3318,6 @@ func ChangeIssueReaction(ctx *context.Context) {
 	}
 
 	html, err := ctx.RenderToHTML(tplReactions, map[string]any{
-		"ctxData":   ctx.Data,
 		"ActionURL": fmt.Sprintf("%s/issues/%d/reactions", ctx.Repo.RepoLink, issue.Index),
 		"Reactions": issue.Reactions.GroupByType(),
 	})
@@ -3425,7 +3424,6 @@ func ChangeCommentReaction(ctx *context.Context) {
 	}
 
 	html, err := ctx.RenderToHTML(tplReactions, map[string]any{
-		"ctxData":   ctx.Data,
 		"ActionURL": fmt.Sprintf("%s/comments/%d/reactions", ctx.Repo.RepoLink, comment.ID),
 		"Reactions": comment.Reactions.GroupByType(),
 	})
diff --git a/routers/web/repo/projects.go b/routers/web/repo/projects.go
index a2db1fc770a5..9b765e89e877 100644
--- a/routers/web/repo/projects.go
+++ b/routers/web/repo/projects.go
@@ -7,7 +7,6 @@ import (
 	"errors"
 	"fmt"
 	"net/http"
-	"net/url"
 	"strings"
 
 	"code.gitea.io/gitea/models/db"
@@ -181,14 +180,10 @@ func ChangeProjectStatus(ctx *context.Context) {
 	id := ctx.ParamsInt64(":id")
 
 	if err := project_model.ChangeProjectStatusByRepoIDAndID(ctx, ctx.Repo.Repository.ID, id, toClose); err != nil {
-		if project_model.IsErrProjectNotExist(err) {
-			ctx.NotFound("", err)
-		} else {
-			ctx.ServerError("ChangeProjectStatusByIDAndRepoID", err)
-		}
+		ctx.NotFoundOrServerError("ChangeProjectStatusByRepoIDAndID", project_model.IsErrProjectNotExist, err)
 		return
 	}
-	ctx.JSONRedirect(ctx.Repo.RepoLink + "/projects?state=" + url.QueryEscape(ctx.Params(":action")))
+	ctx.JSONRedirect(fmt.Sprintf("%s/projects/%d", ctx.Repo.RepoLink, id))
 }
 
 // DeleteProject delete a project
diff --git a/services/actions/auth_test.go b/services/actions/auth_test.go
index f73ae8ae4c36..12db2bae565d 100644
--- a/services/actions/auth_test.go
+++ b/services/actions/auth_test.go
@@ -20,7 +20,7 @@ func TestCreateAuthorizationToken(t *testing.T) {
 	assert.Nil(t, err)
 	assert.NotEqual(t, "", token)
 	claims := jwt.MapClaims{}
-	_, err = jwt.ParseWithClaims(token, claims, func(t *jwt.Token) (interface{}, error) {
+	_, err = jwt.ParseWithClaims(token, claims, func(t *jwt.Token) (any, error) {
 		return setting.GetGeneralTokenSigningSecret(), nil
 	})
 	assert.Nil(t, err)
diff --git a/services/auth/source/oauth2/store.go b/services/auth/source/oauth2/store.go
index 394bf9946359..90fa965602a7 100644
--- a/services/auth/source/oauth2/store.go
+++ b/services/auth/source/oauth2/store.go
@@ -9,6 +9,7 @@ import (
 	"net/http"
 
 	"code.gitea.io/gitea/modules/log"
+	session_module "code.gitea.io/gitea/modules/session"
 
 	chiSession "gitea.com/go-chi/session"
 	"github.com/gorilla/sessions"
@@ -65,7 +66,7 @@ func (st *SessionsStore) Save(r *http.Request, w http.ResponseWriter, session *s
 	chiStore := chiSession.GetSession(r)
 
 	if session.IsNew {
-		_, _ = chiSession.RegenerateSession(w, r)
+		_, _ = session_module.RegenerateSession(w, r)
 		session.IsNew = false
 	}
 
diff --git a/services/context/context.go b/services/context/context.go
index 7ab48afb73de..9d7787bf4b41 100644
--- a/services/context/context.go
+++ b/services/context/context.go
@@ -101,6 +101,7 @@ func NewTemplateContextForWeb(ctx *Context) TemplateContext {
 	tmplCtx := NewTemplateContext(ctx)
 	tmplCtx["Locale"] = ctx.Base.Locale
 	tmplCtx["AvatarUtils"] = templates.NewAvatarUtils(ctx)
+	tmplCtx["RootData"] = ctx.Data
 	return tmplCtx
 }
 
diff --git a/services/mirror/mirror_pull.go b/services/mirror/mirror_pull.go
index 21d5f08205de..fa23986c54ea 100644
--- a/services/mirror/mirror_pull.go
+++ b/services/mirror/mirror_pull.go
@@ -13,6 +13,7 @@ import (
 	system_model "code.gitea.io/gitea/models/system"
 	"code.gitea.io/gitea/modules/cache"
 	"code.gitea.io/gitea/modules/git"
+	giturl "code.gitea.io/gitea/modules/git/url"
 	"code.gitea.io/gitea/modules/gitrepo"
 	"code.gitea.io/gitea/modules/lfs"
 	"code.gitea.io/gitea/modules/log"
@@ -30,10 +31,15 @@ const gitShortEmptySha = "0000000"
 
 // UpdateAddress writes new address to Git repository and database
 func UpdateAddress(ctx context.Context, m *repo_model.Mirror, addr string) error {
+	u, err := giturl.Parse(addr)
+	if err != nil {
+		return fmt.Errorf("invalid addr: %v", err)
+	}
+
 	remoteName := m.GetRemoteName()
 	repoPath := m.GetRepository(ctx).RepoPath()
 	// Remove old remote
-	_, _, err := git.NewCommand(ctx, "remote", "rm").AddDynamicArguments(remoteName).RunStdString(&git.RunOpts{Dir: repoPath})
+	_, _, err = git.NewCommand(ctx, "remote", "rm").AddDynamicArguments(remoteName).RunStdString(&git.RunOpts{Dir: repoPath})
 	if err != nil && !strings.HasPrefix(err.Error(), "exit status 128 - fatal: No such remote ") {
 		return err
 	}
@@ -70,7 +76,9 @@ func UpdateAddress(ctx context.Context, m *repo_model.Mirror, addr string) error
 		}
 	}
 
-	m.Repo.OriginalURL = addr
+	// erase authentication before storing in database
+	u.User = nil
+	m.Repo.OriginalURL = u.String()
 	return repo_model.UpdateRepositoryCols(ctx, m.Repo, "original_url")
 }
 
diff --git a/templates/admin/notice.tmpl b/templates/admin/notice.tmpl
index 33d8a2f9632d..68703cc88442 100644
--- a/templates/admin/notice.tmpl
+++ b/templates/admin/notice.tmpl
@@ -49,7 +49,7 @@
 										</div>
 									</div>
 								</div>
-								<button class="ui small teal button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="?page={{.Page.Paginater.Current}}">
+								<button class="ui small button" id="delete-selection" data-link="{{.Link}}/delete" data-redirect="?page={{.Page.Paginater.Current}}">
 									<span class="text">{{ctx.Locale.Tr "admin.notices.delete_selected"}}</span>
 								</button>
 							</th>
diff --git a/templates/admin/repo/unadopted.tmpl b/templates/admin/repo/unadopted.tmpl
index 6a8e203694ab..a95f6b5120e2 100644
--- a/templates/admin/repo/unadopted.tmpl
+++ b/templates/admin/repo/unadopted.tmpl
@@ -54,7 +54,7 @@
 											<input type="hidden" name="action" value="delete">
 											<input type="hidden" name="q" value="{{$.Keyword}}">
 											<input type="hidden" name="page" value="{{$.CurrentPage}}">
-											{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
+											{{template "base/modal_actions_confirm"}}
 										</form>
 									</div>
 								</div>
diff --git a/templates/base/modal_actions_confirm.tmpl b/templates/base/modal_actions_confirm.tmpl
index c44320deffbb..9f7eb4adf2d9 100644
--- a/templates/base/modal_actions_confirm.tmpl
+++ b/templates/base/modal_actions_confirm.tmpl
@@ -1,7 +1,6 @@
 {{/*
 Two buttons (negative, positive):
 * ModalButtonTypes: "yes" (default) or "confirm"
-* ModalButtonColors: "primary" (default) / "blue" / "yellow"
 * ModalButtonCancelText
 * ModalButtonOkText
 
@@ -22,14 +21,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal
 		{{end}}
 		{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
 		{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
-
-		{{$stylePositive := "primary"}}
-		{{if eq .ModalButtonColors "blue"}}
-			{{$stylePositive = "blue"}}
-		{{else if eq .ModalButtonColors "yellow"}}
-			{{$stylePositive = "yellow"}}
-		{{end}}
 		<button class="ui cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
-		<button class="ui {{$stylePositive}} ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
+		<button class="ui primary ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
 	{{end}}
 </div>
diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
index 5cd36721a717..f31cdc1983e6 100644
--- a/templates/devtest/fomantic-modal.tmpl
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -1,6 +1,15 @@
 {{template "base/head" .}}
 <div class="page-content devtest ui container">
 	{{template "base/alert" .}}
+	<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
+	<script type="module">
+		for (const el of $('.ui.modal')) {
+			const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
+				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
+			});
+			$('.modal-buttons').append($btn);
+		}
+	</script>
 
 	<div id="test-modal-form-1" class="ui mini modal">
 		<div class="header">Form dialog (layout 1)</div>
@@ -54,33 +63,11 @@
 		{{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
 	</div>
 
-	<div class="ui g-modal-confirm modal" id="test-modal-blue">
-		<div class="header">Blue dialog</div>
-		<div class="content">hello, this is the modal dialog content</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "blue")}}
-	</div>
-
-	<div class="ui g-modal-confirm modal" id="test-modal-yellow">
-		<div class="header">yellow dialog</div>
-		<div class="content">hello, this is the modal dialog content</div>
-		{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
-	</div>
-
 	<div class="ui g-modal-confirm modal" id="test-modal-danger">
 		{{svg "octicon-x" 16 "inside close"}}
 		<div class="header">dangerous action dialog</div>
 		<div class="content">hello, this is the modal dialog content, this is a dangerous operation</div>
 		{{template "base/modal_actions_confirm" (dict "ModalButtonDangerText" "I know and must do  this is dangerous operation")}}
 	</div>
-
-	<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
-	<script type="module">
-		for (const el of $('.ui.modal')) {
-			const $btn = $('<button>').text(`${el.id}`).on('click', () => {
-				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
-			});
-			$('.modal-buttons').append($btn);
-		}
-	</script>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index bb4fc77a74a8..3b13c13be840 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -29,41 +29,13 @@
 					<button class="ui basic button">Basic Unclassed</button>
 					<button class="ui primary button">Primary</button>
 					<button class="ui basic primary button">Basic Primary</button>
-					<button class="ui negative button">Negative</button>
-					<button class="ui basic negative button">Basic Negative</button>
-					<button class="ui positive button">Positive</button>
-					<button class="ui basic positive button">Basic Positive</button>
 				</li>
 				<li class="sample-group">
 					<h2>Recommended colors:</h2>
 					<button class="ui red button">Red</button>
 					<button class="ui basic red button">Basic Red</button>
-					<button class="ui primary button">Green</button>
-					<button class="ui basic primary button">Basic Green</button>
-					<button class="ui blue button">Blue</button>
-					<button class="ui basic blue button">Basic Blue</button>
-					<button class="ui orange button">Orange</button>
-					<button class="ui basic orange button">Basic Orange</button>
-					<button class="ui yellow button">Yellow</button>
-					<button class="ui basic yellow button">Basic Yellow</button>
-				</li>
-				<li class="sample-group">
-					<h2>Supported but not recommended:</h2>
-					<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
-					<button class="ui secondary button">Secondary</button>
-					<button class="ui basic secondary button">Basic Secondary</button>
-					<button class="ui olive button">Olive</button>
-					<button class="ui basic olive button">Basic Olive</button>
-					<button class="ui teal button">Teal</button>
-					<button class="ui basic teal button">Basic Teal</button>
-					<button class="ui violet button">Violet</button>
-					<button class="ui basic violet button">Basic Violet</button>
-					<button class="ui purple button">Purple</button>
-					<button class="ui basic purple button">Basic Purple</button>
-					<button class="ui pink button">Pink</button>
-					<button class="ui basic pink button">Basic Pink</button>
-					<button class="ui brown button">Brown</button>
-					<button class="ui basic brown button">Basic Brown</button>
+					<button class="ui green button">Green</button>
+					<button class="ui basic green button">Basic Green</button>
 				</li>
 				<li class="sample-group">
 					<h2>Inline / Plain:</h2>
@@ -198,7 +170,7 @@
 				<button class="ui basic button">labeled button</button>
 				<a class="ui basic label">123</a>
 			</div>
-			<button class="ui yellow button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
+			<button class="ui button">{{svg "octicon-x" 16}} button with very very very very very very very very long text</button>
 		</div>
 
 		<h2>Input with SVG</h2>
@@ -271,10 +243,6 @@
 				<span class="text">button dropdown</span>
 				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			</div>
-			<div class="ui dropdown large button">
-				<span class="text">large dropdown</span>
-				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-			</div>
 		</div>
 
 		<div>
@@ -290,10 +258,6 @@
 				<span class="text">button compact</span>
 				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 			</div>
-			<div class="ui dropdown large compact button">
-				<span class="text">large compact</span>
-				{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-			</div>
 		</div>
 
 		<div>
diff --git a/templates/devtest/label.tmpl b/templates/devtest/label.tmpl
new file mode 100644
index 000000000000..77590715a11c
--- /dev/null
+++ b/templates/devtest/label.tmpl
@@ -0,0 +1,27 @@
+{{template "base/head" .}}
+<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
+<div class="page-content devtest ui container">
+	<div>
+		<h1>Label</h1>
+		<div class="flex-text-block tw-my-2">
+			<span class="ui label">simple label</span>
+			<span class="ui red label">red label</span>
+			<span class="ui green label">green label</span>
+		</div>
+		<div class="flex-text-block tw-my-2">
+			<span class="ui basic label">basic label</span>
+			<span class="ui basic red label">basic red label</span>
+			<span class="ui basic green label">basic green label</span>
+		</div>
+		<div class="flex-text-block tw-my-2">
+			<span class="ui label">long content must be in a non-flex "gt-ellipsis" element, otherwise it won't get ellipsis. very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span>
+		</div>
+		<div class="flex-text-block tw-my-2">
+			<span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span>
+		</div>
+		<div class="tw-my-2">
+			<span class="ui label"><span class="gt-ellipsis">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong label</span></span>
+		</div>
+	</div>
+</div>
+{{template "base/footer" .}}
diff --git a/templates/org/team/sidebar.tmpl b/templates/org/team/sidebar.tmpl
index 9311a46e38f7..b9e55dd587d1 100644
--- a/templates/org/team/sidebar.tmpl
+++ b/templates/org/team/sidebar.tmpl
@@ -79,7 +79,7 @@
 	</div>
 	{{if .IsOrganizationOwner}}
 		<div class="ui bottom attached segment">
-			<a class="ui teal small button" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/edit">{{svg "octicon-gear"}} {{ctx.Locale.Tr "org.teams.settings"}}</a>
+			<a class="ui small button" href="{{.OrgLink}}/teams/{{.Team.LowerName | PathEscape}}/edit">{{svg "octicon-gear"}} {{ctx.Locale.Tr "org.teams.settings"}}</a>
 		</div>
 	{{end}}
 </div>
diff --git a/templates/repo/code/recently_pushed_new_branches.tmpl b/templates/repo/code/recently_pushed_new_branches.tmpl
index 17ae7d119d18..b808f413d352 100644
--- a/templates/repo/code/recently_pushed_new_branches.tmpl
+++ b/templates/repo/code/recently_pushed_new_branches.tmpl
@@ -5,7 +5,7 @@
 			{{$branchLink := HTMLFormat `<a href="%s/src/branch/%s">%s</a>` $.RepoLink (PathEscapeSegments .Name) .Name}}
 			{{ctx.Locale.Tr "repo.pulls.recently_pushed_new_branches" $branchLink $timeSince}}
 		</div>
-		<a role="button" class="ui compact positive button tw-m-0" href="{{$.Repository.ComposeBranchCompareURL $.Repository.BaseRepo .Name}}">
+		<a role="button" class="ui compact green button tw-m-0" href="{{$.Repository.ComposeBranchCompareURL $.Repository.BaseRepo .Name}}">
 			{{ctx.Locale.Tr "repo.pulls.compare_changes"}}
 		</a>
 	</div>
diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index a9120465bdc4..c7f433718241 100644
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -48,7 +48,7 @@
 						</div>
 					{{end}}
 				{{end}}
-				{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}
+				{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID)}}
 				{{template "repo/issue/view_content/context_menu" dict "ctxData" $.root "item" . "delete" true "issue" false "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
 			</div>
 		</div>
@@ -68,7 +68,7 @@
 		</div>
 		{{$reactions := .Reactions.GroupByType}}
 		{{if $reactions}}
-			{{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
+			{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
 		{{end}}
 	</div>
 </div>
diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl
index d0472577d0ab..f92750119719 100644
--- a/templates/repo/diff/compare.tmpl
+++ b/templates/repo/diff/compare.tmpl
@@ -184,23 +184,15 @@
 		{{end}}
 	{{else if and .PageIsComparePull (gt .CommitCount 0)}}
 		{{if .HasPullRequest}}
-			<div class="ui segment grid title">
-				<div class="twelve wide column issue-title">
-					{{ctx.Locale.Tr "repo.pulls.has_pull_request" (print $.RepoLink "/pulls/" .PullRequest.Issue.Index) $.RepoRelPath .PullRequest.Index}}
-					<h1>
-						<span id="issue-title">{{RenderIssueTitle $.Context .PullRequest.Issue.Title ($.Repository.ComposeMetas ctx)}}</span>
-						<span class="index">#{{.PullRequest.Issue.Index}}</span>
-					</h1>
-				</div>
-				<div class="four wide column middle aligned text right">
-				{{- if .PullRequest.HasMerged -}}
-				<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui button purple show-form">{{svg "octicon-git-merge" 16}} {{ctx.Locale.Tr "repo.pulls.view"}}</a>
-				{{else if .Issue.IsClosed}}
-				<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui button red show-form">{{svg "octicon-issue-closed" 16}} {{ctx.Locale.Tr "repo.pulls.view"}}</a>
-				{{else}}
-				<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui button primary show-form">{{svg "octicon-git-pull-request" 16}} {{ctx.Locale.Tr "repo.pulls.view"}}</a>
-				{{end}}
+			<div class="ui segment flex-text-block tw-gap-4">
+				{{template "shared/issueicon" .}}
+				<div class="issue-title tw-break-anywhere">
+					{{RenderIssueTitle $.Context .PullRequest.Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}}
+					<span class="index">#{{.PullRequest.Issue.Index}}</span>
 				</div>
+				<a href="{{$.RepoLink}}/pulls/{{.PullRequest.Issue.Index}}" class="ui compact button primary">
+					{{ctx.Locale.Tr "repo.pulls.view"}}
+				</a>
 			</div>
 		{{else}}
 			{{if and $.IsSigned (not .Repository.IsArchived)}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index c65b79dea70b..06d0586683be 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -46,7 +46,7 @@
 						<div class="comment-header-right actions tw-flex tw-items-center">
 							{{template "repo/issue/view_content/show_role" dict "ShowRole" .Issue.ShowRole "IgnorePoster" true}}
 							{{if not $.Repository.IsArchived}}
-								{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
+								{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
 							{{end}}
 							{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" .Issue "delete" false "issue" true "diff" false "IsCommentPoster" $.IsIssuePoster}}
 						</div>
@@ -67,7 +67,7 @@
 					</div>
 					{{$reactions := .Issue.Reactions.GroupByType}}
 					{{if $reactions}}
-						{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
+						{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
 					{{end}}
 				</div>
 			</div>
diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl
index 37931f287e3d..6baded8fe946 100644
--- a/templates/repo/issue/view_content/add_reaction.tmpl
+++ b/templates/repo/issue/view_content/add_reaction.tmpl
@@ -1,11 +1,9 @@
-{{if .ctxData.IsSigned}}
+{{if ctx.RootData.IsSigned}}
 <div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
-	<a class="add-reaction muted">
-		{{svg "octicon-smiley"}}
-	</a>
-	<div class="menu reactions-menu">
+	<a class="muted">{{svg "octicon-smiley"}}</a>
+	<div class="menu">
 		{{range $value := AllowedReactions}}
-			<a class="item reaction" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
+		<a class="item emoji comment-reaction-button" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
 		{{end}}
 	</div>
 </div>
diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index d900d23c4711..acc04e4c6151 100644
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -53,7 +53,7 @@
 						<div class="comment-header-right actions tw-flex tw-items-center">
 							{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 							{{if not $.Repository.IsArchived}}
-								{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+								{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
 							{{end}}
 							{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 						</div>
@@ -74,7 +74,7 @@
 					</div>
 					{{$reactions := .Reactions.GroupByType}}
 					{{if $reactions}}
-						{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+						{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 					{{end}}
 				</div>
 			</div>
@@ -427,7 +427,7 @@
 							<div class="comment-header-right actions tw-flex tw-items-center">
 								{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 								{{if not $.Repository.IsArchived}}
-									{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+									{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
 									{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" false "issue" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 								{{end}}
 							</div>
@@ -448,7 +448,7 @@
 						</div>
 						{{$reactions := .Reactions.GroupByType}}
 						{{if $reactions}}
-							{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+							{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 						{{end}}
 					</div>
 				</div>
diff --git a/templates/repo/issue/view_content/conversation.tmpl b/templates/repo/issue/view_content/conversation.tmpl
index 79e7cb498bca..ac32a2db5d2a 100644
--- a/templates/repo/issue/view_content/conversation.tmpl
+++ b/templates/repo/issue/view_content/conversation.tmpl
@@ -55,8 +55,8 @@
 			<div class="ui comments tw-mb-0">
 				{{range .comments}}
 					{{$createdSubStr:= TimeSinceUnix .CreatedUnix ctx.Locale}}
-					<div class="comment code-comment tw-pb-4" id="{{.HashTag}}">
-						<div class="content">
+					<div class="comment code-comment" id="{{.HashTag}}">
+						<div class="content comment-container">
 							<div class="header comment-header">
 								<div class="comment-header-left tw-flex tw-items-center">
 									{{if not .OriginalAuthor}}
@@ -82,7 +82,7 @@
 								<div class="comment-header-right actions tw-flex tw-items-center">
 									{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 									{{if not $.Repository.IsArchived}}
-										{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
+										{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
 										{{template "repo/issue/view_content/context_menu" dict "ctxData" $ "item" . "delete" true "issue" true "diff" true "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
 									{{end}}
 								</div>
@@ -103,7 +103,7 @@
 							</div>
 							{{$reactions := .Reactions.GroupByType}}
 							{{if $reactions}}
-								{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
+								{{template "repo/issue/view_content/reactions" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
 							{{end}}
 						</div>
 					</div>
diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl
index da6319667bf7..0011efe8b286 100644
--- a/templates/repo/issue/view_content/reactions.tmpl
+++ b/templates/repo/issue/view_content/reactions.tmpl
@@ -1,7 +1,7 @@
-<div class="ui attached segment reactions" data-action-url="{{$.ActionURL}}">
+<div class="bottom-reactions" data-action-url="{{$.ActionURL}}">
 {{range $key, $value := .Reactions}}
-	{{$hasReacted := $value.HasUser $.ctxData.SignedUserID}}
-	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not $.ctxData.IsSigned}} disabled{{end}} comment-reaction-button"
+	{{$hasReacted := $value.HasUser ctx.RootData.SignedUserID}}
+	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not ctx.RootData.IsSigned}} disabled{{end}} comment-reaction-button"
 		data-tooltip-content
 		title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
 		aria-label="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{ctx.Locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
@@ -12,6 +12,6 @@
 	</a>
 {{end}}
 {{if AllowedReactions}}
-	{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}}
+	{{template "repo/issue/view_content/add_reaction" dict "ActionURL" .ActionURL}}
 {{end}}
 </div>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 7040c2849a2b..bb0bb2cff360 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -572,7 +572,7 @@
 			</form>
 		{{end}}
 
-		<button class="tw-mt-1 fluid ui show-modal button {{if .Issue.IsLocked}} negative {{end}}" data-modal="#lock">
+		<button class="tw-mt-1 fluid ui show-modal button{{if .Issue.IsLocked}} red{{end}}" data-modal="#lock">
 			{{if .Issue.IsLocked}}
 				{{svg "octicon-key"}}
 				{{ctx.Locale.Tr "repo.issues.unlock"}}
diff --git a/templates/repo/pulse.tmpl b/templates/repo/pulse.tmpl
index cfb3ec1d3d1e..bc25563d488b 100644
--- a/templates/repo/pulse.tmpl
+++ b/templates/repo/pulse.tmpl
@@ -25,12 +25,14 @@
 		<div class="column">
 			{{if gt .Activity.ActivePRCount 0}}
 			<div class="stats-table">
-				<a href="#merged-pull-requests" class="table-cell tiny background purple" style="width: {{.Activity.MergedPRPerc}}{{if ne .Activity.MergedPRPerc 0}}%{{end}}"></a>
-				<a href="#proposed-pull-requests" class="table-cell tiny background green"></a>
+				{{if gt .Activity.MergedPRPerc 0}}
+					<a href="#merged-pull-requests" class="table-cell tiny tw-bg-purple" style="width: {{.Activity.MergedPRPerc}}%"></a>
+				{{end}}
+				<a href="#proposed-pull-requests" class="table-cell tiny tw-bg-green"></a>
 			</div>
 			{{else}}
 			<div class="stats-table">
-				<a class="table-cell tiny background light grey"></a>
+				<a class="table-cell tiny tw-bg-grey"></a>
 			</div>
 			{{end}}
 			{{ctx.Locale.TrN .Activity.ActivePRCount "repo.activity.active_prs_count_1" "repo.activity.active_prs_count_n" .Activity.ActivePRCount}}
@@ -40,8 +42,10 @@
 		<div class="column">
 			{{if gt .Activity.ActiveIssueCount 0}}
 			<div class="stats-table">
-				<a href="#closed-issues" class="table-cell tiny background red" style="width: {{.Activity.ClosedIssuePerc}}{{if ne .Activity.ClosedIssuePerc 0}}%{{end}}"></a>
-				<a href="#new-issues" class="table-cell tiny background green"></a>
+				{{if gt .Activity.ClosedIssuePerc 0}}
+					<a href="#closed-issues" class="table-cell tiny tw-bg-red" style="width: {{.Activity.ClosedIssuePerc}}%"></a>
+				{{end}}
+				<a href="#new-issues" class="table-cell tiny tw-bg-green"></a>
 			</div>
 			{{else}}
 			<div class="stats-table">
@@ -108,7 +112,7 @@
 {{end}}
 
 {{if gt .Activity.PublishedReleaseCount 0}}
-	<h4 class="divider divider-text tw-normal-case" id="published-releases">
+	<h4 class="divider divider-text" id="published-releases">
 		{{svg "octicon-tag" 16 "tw-mr-2"}}
 		{{ctx.Locale.Tr "repo.activity.title.releases_published_by"
 			(ctx.Locale.TrN .Activity.PublishedReleaseCount "repo.activity.title.releases_1" "repo.activity.title.releases_n" .Activity.PublishedReleaseCount)
@@ -130,7 +134,7 @@
 {{end}}
 
 {{if gt .Activity.MergedPRCount 0}}
-	<h4 class="divider divider-text tw-normal-case" id="merged-pull-requests">
+	<h4 class="divider divider-text" id="merged-pull-requests">
 		{{svg "octicon-git-pull-request" 16 "tw-mr-2"}}
 		{{ctx.Locale.Tr "repo.activity.title.prs_merged_by"
 			(ctx.Locale.TrN .Activity.MergedPRCount "repo.activity.title.prs_1" "repo.activity.title.prs_n" .Activity.MergedPRCount)
@@ -149,7 +153,7 @@
 {{end}}
 
 {{if gt .Activity.OpenedPRCount 0}}
-	<h4 class="divider divider-text tw-normal-case" id="proposed-pull-requests">
+	<h4 class="divider divider-text" id="proposed-pull-requests">
 		{{svg "octicon-git-branch" 16 "tw-mr-2"}}
 		{{ctx.Locale.Tr "repo.activity.title.prs_opened_by"
 			(ctx.Locale.TrN .Activity.OpenedPRCount "repo.activity.title.prs_1" "repo.activity.title.prs_n" .Activity.OpenedPRCount)
@@ -168,7 +172,7 @@
 {{end}}
 
 {{if gt .Activity.ClosedIssueCount 0}}
-	<h4 class="divider divider-text tw-normal-case" id="closed-issues">
+	<h4 class="divider divider-text" id="closed-issues">
 		{{svg "octicon-issue-closed" 16 "tw-mr-2"}}
 		{{ctx.Locale.Tr "repo.activity.title.issues_closed_from"
 			(ctx.Locale.TrN .Activity.ClosedIssueCount "repo.activity.title.issues_1" "repo.activity.title.issues_n" .Activity.ClosedIssueCount)
@@ -187,7 +191,7 @@
 {{end}}
 
 {{if gt .Activity.OpenedIssueCount 0}}
-	<h4 class="divider divider-text tw-normal-case" id="new-issues">
+	<h4 class="divider divider-text" id="new-issues">
 		{{svg "octicon-issue-opened" 16 "tw-mr-2"}}
 		{{ctx.Locale.Tr "repo.activity.title.issues_created_by"
 			(ctx.Locale.TrN .Activity.OpenedIssueCount "repo.activity.title.issues_1" "repo.activity.title.issues_n" .Activity.OpenedIssueCount)
@@ -206,7 +210,7 @@
 {{end}}
 
 {{if gt .Activity.UnresolvedIssueCount 0}}
-	<h4 class="divider divider-text tw-normal-case" id="unresolved-conversations" data-tooltip-content="{{ctx.Locale.Tr "repo.activity.unresolved_conv_desc"}}">
+	<h4 class="divider divider-text" id="unresolved-conversations" data-tooltip-content="{{ctx.Locale.Tr "repo.activity.unresolved_conv_desc"}}">
 		{{svg "octicon-comment-discussion" 16 "tw-mr-2"}}
 		{{ctx.Locale.TrN .Activity.UnresolvedIssueCount "repo.activity.title.unresolved_conv_1" "repo.activity.title.unresolved_conv_n" .Activity.UnresolvedIssueCount}}
 	</h4>
diff --git a/templates/repo/settings/lfs.tmpl b/templates/repo/settings/lfs.tmpl
index e0864ff22131..bc92b4828b3d 100644
--- a/templates/repo/settings/lfs.tmpl
+++ b/templates/repo/settings/lfs.tmpl
@@ -44,7 +44,7 @@
 					</p>
 					<form class="ui form" action="{{$.Link}}/delete/{{.Oid}}" method="post">
 						{{$.CsrfTokenHtml}}
-						{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
+						{{template "base/modal_actions_confirm"}}
 					</form>
 				</div>
 			</div>
diff --git a/templates/repo/settings/lfs_pointers.tmpl b/templates/repo/settings/lfs_pointers.tmpl
index a0bb8c46f0d9..758aec6bb031 100644
--- a/templates/repo/settings/lfs_pointers.tmpl
+++ b/templates/repo/settings/lfs_pointers.tmpl
@@ -37,7 +37,7 @@
 								</a>
 							</td>
 							<td>
-								<a {{if and .Exists .InRepo}}href="{{$.LFSFilesLink}}/show/{{.Oid}}" rel="nofollow" target="_blank"{{end}} title="{{.Oid}}" class="ui brown button tw-font-mono">
+								<a {{if and .Exists .InRepo}}href="{{$.LFSFilesLink}}/show/{{.Oid}}" rel="nofollow" target="_blank"{{end}} title="{{.Oid}}" class="ui button tw-font-mono">
 									{{ShortSha .Oid}}
 								</a>
 							</td>
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index b8fa4759b132..df6ccbf6bc2f 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -156,7 +156,7 @@
 											<label for="interval">{{ctx.Locale.Tr "repo.mirror_interval" .MinimumMirrorInterval}}</label>
 											<input id="interval" name="interval" value="{{.PullMirror.Interval}}">
 										</div>
-										{{$address := MirrorRemoteAddress $.Context .Repository .PullMirror.GetRemoteName false}}
+										{{$address := MirrorRemoteAddress $.Context .Repository .PullMirror.GetRemoteName}}
 										<div class="field {{if .Err_MirrorAddress}}error{{end}}">
 											<label for="mirror_address">{{ctx.Locale.Tr "repo.mirror_address"}}</label>
 											<input id="mirror_address" name="mirror_address" value="{{$address.Address}}" required>
diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl
index 8ee1446a16f8..149840b0deac 100644
--- a/templates/repo/settings/webhook/history.tmpl
+++ b/templates/repo/settings/webhook/history.tmpl
@@ -6,7 +6,7 @@
 			<div class="ui right">
 				<!-- the button is wrapped with a span because the tooltip doesn't show on hover if we put data-tooltip-content directly on the button -->
 				<span data-tooltip-content="{{if or $isNew .Webhook.IsActive}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc"}}{{else}}{{ctx.Locale.Tr "repo.settings.webhook.test_delivery_desc_disabled"}}{{end}}">
-					<button class="ui teal tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}">
+					<button class="ui tiny button{{if not (or $isNew .Webhook.IsActive)}} disabled{{end}}" id="test-delivery" data-link="{{.Link}}/test" data-redirect="{{.Link}}">
 						<span class="text">{{ctx.Locale.Tr "repo.settings.webhook.test_delivery"}}</span>
 					</button>
 			</span>
diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
index d4553ea61ba2..030fd4994065 100644
--- a/templates/user/dashboard/dashboard.tmpl
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -1,15 +1,13 @@
 {{template "base/head" .}}
 <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds">
 	{{template "user/dashboard/navbar" .}}
-	<div class="ui container">
+	<div class="ui container flex-container">
 		{{template "base/alert" .}}
-		<div class="ui mobile reversed stackable grid">
-			<div class="ui container ten wide column">
-				{{template "user/heatmap" .}}
-				{{template "user/dashboard/feeds" .}}
-			</div>
-			{{template "user/dashboard/repolist" .}}
+		<div class="flex-container-main">
+			{{template "user/heatmap" .}}
+			{{template "user/dashboard/feeds" .}}
 		</div>
+		{{template "user/dashboard/repolist" .}}
 	</div>
 </div>
 {{template "base/footer" .}}
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index a879f1fb9d87..be710675d560 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -56,4 +56,4 @@ data.organizationId = {{.ContextUser.ID}};
 window.config.pageData.dashboardRepoList = data;
 </script>
 
-<div id="dashboard-repo-list" class="six wide column"></div>
+<div id="dashboard-repo-list" class="flex-container-sidebar"></div>
diff --git a/templates/user/settings/applications.tmpl b/templates/user/settings/applications.tmpl
index 5e2ffc3bb3ef..8baa07c90b0e 100644
--- a/templates/user/settings/applications.tmpl
+++ b/templates/user/settings/applications.tmpl
@@ -109,7 +109,7 @@
 	<div class="content">
 		<p>{{ctx.Locale.Tr "settings.access_token_deletion_desc"}}</p>
 	</div>
-	{{template "base/modal_actions_confirm" (dict "ModalButtonColors" "yellow")}}
+	{{template "base/modal_actions_confirm"}}
 </div>
 
 {{template "user/settings/layout_footer" .}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index c6a22a5dc4bc..8ded4aa88342 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -319,27 +319,6 @@ a.label,
   background-color: var(--color-label-bg);
 }
 
-.ui.menu {
-  display: flex;
-}
-
-.ui.menu,
-.ui.vertical.menu {
-  background: var(--color-menu);
-  border-color: var(--color-secondary);
-  box-shadow: none;
-}
-
-.ui.menu .item {
-  color: var(--color-text);
-  user-select: auto;
-  line-height: var(--line-height-default); /* fomantic uses "1" which causes overflow problems because "1" doesn't consider the descent part */
-}
-
-.ui.menu .item > .svg {
-  margin-right: 0.35em;
-}
-
 .ui.menu .dropdown.item:hover,
 .ui.menu a.item:hover,
 .ui.menu details.item summary:hover {
@@ -347,42 +326,6 @@ a.label,
   background: var(--color-hover);
 }
 
-.ui.menu .active.item,
-.ui.menu .active.item:hover,
-.ui.vertical.menu .active.item,
-.ui.vertical.menu .active.item:hover {
-  color: var(--color-text);
-  background: var(--color-active);
-}
-
-.ui.menu a.item:active {
-  color: var(--color-text);
-  background: none;
-}
-
-.ui.ui.menu .item.disabled {
-  color: var(--color-text-light-3);
-}
-
-.ui.menu .item::before, .ui.vertical.menu .item::before {
-  background: var(--color-secondary);
-}
-
-/* sub menu of vertical menu */
-.ui.vertical.menu .item .menu .item {
-  color: var(--color-text-light-2);
-  text-indent: 16px;
-}
-
-.ui.vertical.menu .item .menu .item:hover,
-.ui.vertical.menu .item .menu a.item:hover {
-  color: var(--color-text-light-1);
-}
-
-.ui.vertical.menu .item .menu .active.item {
-  color: var(--color-text);
-}
-
 /* slightly more contrast for filters on issue list */
 .ui.ui.menu .dropdown.item.disabled {
   color: var(--color-text-light-2);
@@ -441,11 +384,6 @@ a.label,
   background: var(--color-hover);
 }
 
-.ui.menu .ui.dropdown .menu > .selected.item {
-  color: var(--color-text) !important;
-  background: var(--color-hover) !important;
-}
-
 .ui.dropdown .menu > .message:not(.ui) {
   color: var(--color-text-light-2);
 }
@@ -462,58 +400,6 @@ a.label,
   color: var(--color-text-light-2);
 }
 
-/* replace item margin on secondary menu items with gap and remove both the
-   negative margins on the menu as well as margin on the items */
-.ui.secondary.menu {
-  margin-left: 0;
-  margin-right: 0;
-  gap: .35714286em;
-}
-.ui.secondary.menu .item {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.ui.secondary.menu .dropdown.item:hover,
-.ui.secondary.menu a.item:hover {
-  color: var(--color-text);
-  background: var(--color-hover);
-}
-
-.ui.secondary.menu .active.item,
-.ui.secondary.menu .active.item:hover {
-  color: var(--color-text);
-  background: var(--color-active);
-}
-
-.ui.secondary.menu.tight .item {
-  padding-left: 0.85714286em;
-  padding-right: 0.85714286em;
-}
-
-/* remove the menu clearfix so that it won't add undesired gaps when using "gap" */
-.ui.menu::after {
-  content: normal;
-}
-
-.ui.menu .dropdown.item .menu {
-  background: var(--color-body);
-}
-
-.ui.menu .ui.dropdown .menu > .item {
-  color: var(--color-text) !important;
-}
-
-.ui.menu .ui.dropdown .menu > .item:hover {
-  color: var(--color-text) !important;
-  background: var(--color-hover) !important;
-}
-
-.ui.menu .ui.dropdown .menu > .active.item {
-  color: var(--color-text) !important;
-  background: var(--color-active) !important;
-}
-
 .ui.form textarea:not([rows]) {
   height: var(--min-height-textarea); /* override fomantic default 12em */
   min-height: var(--min-height-textarea); /* override fomantic default 8em */
@@ -606,11 +492,6 @@ img.ui.avatar,
   margin-top: calc(var(--page-spacing) - 1rem);
 }
 
-.ui.pagination.menu .active.item {
-  color: var(--color-text);
-  background: var(--color-active);
-}
-
 .ui.form .fields.error .field textarea,
 .ui.form .fields.error .field select,
 .ui.form .fields.error .field input:not([type]),
@@ -782,11 +663,7 @@ input:-webkit-autofill:active,
   font-size: 0.75em;
 }
 
-.ui.form .ui.button {
-  font-weight: var(--font-weight-normal);
-}
-
-/* replace fomantic popover box shadows */
+/* popover box shadows */
 .ui.dropdown .menu,
 .ui.upward.dropdown > .menu,
 .ui.menu .dropdown.item .menu,
@@ -804,22 +681,6 @@ input:-webkit-autofill:active,
   background: var(--color-overlay-backdrop);
 }
 
-/* Override semantic selector '.ui.menu:not(.vertical) .item > .button' */
-/* This fixes the commit graph button on the commits page */
-/* modal svg icons, copied from fomantic except width and height */
-/* center text in fomantic modal dialogs */
-.ui .menu:not(.vertical) .item > .button.compact {
-  padding: 0.58928571em 1.125em;
-}
-
-.ui .menu:not(.vertical) .item > .button.small {
-  font-size: 0.92857143rem;
-}
-
-.ui.menu .ui.dropdown.item .menu .item {
-  width: 100%;
-}
-
 .ui.dropdown .menu > .header {
   font-size: 0.8em;
 }
@@ -1010,24 +871,6 @@ input:-webkit-autofill:active,
   border-color: var(--color-gold) !important;
 }
 
-@media (max-width: 767.98px) {
-  .ui.pagination.menu .item:not(.active,.navigation),
-  .ui.pagination.menu .item.navigation span.navigation_label {
-    display: none;
-  }
-}
-
-.ui.pagination.menu.narrow .item {
-  padding-left: 8px;
-  padding-right: 8px;
-  min-width: 1em;
-  text-align: center;
-}
-
-.ui.pagination.menu.narrow .item .icon {
-  margin-right: 0;
-}
-
 .ui.floating.dropdown .overflow.menu .scrolling.menu.items {
   border-radius: 0 !important;
   box-shadow: none !important;
@@ -1149,11 +992,6 @@ overflow-menu .ui.label {
   margin-top: 1px;
 }
 
-.ui.menu .item > .label {
-  background: var(--color-label-bg);
-  color: var(--color-label-text);
-}
-
 .lines-blame-btn {
   padding: 0 0 0 5px;
   display: flex;
@@ -1366,8 +1204,7 @@ table th[data-sortt-desc] .svg {
   box-shadow: 0 0 0 1px var(--color-secondary) inset;
 }
 
-.emoji,
-.reaction {
+.emoji {
   font-size: 1.25em;
   line-height: var(--line-height-default);
   font-style: normal !important;
@@ -1375,8 +1212,7 @@ table th[data-sortt-desc] .svg {
   vertical-align: -0.075em;
 }
 
-.emoji img,
-.reaction img {
+.emoji img {
   border-width: 0 !important;
   margin: 0 !important;
   width: 1em !important;
@@ -1384,26 +1220,6 @@ table th[data-sortt-desc] .svg {
   vertical-align: -0.15em;
 }
 
-.ui.tabular.menu {
-  border-color: var(--color-secondary);
-}
-
-.ui.tabular.menu .active.item,
-.ui.tabular.menu .active.item:hover {
-  background: var(--color-body);
-  border-color: var(--color-secondary);
-  color: var(--color-text);
-}
-
-.ui.segment .ui.tabular.menu .active.item,
-.ui.segment .ui.tabular.menu .active.item:hover {
-  background: var(--color-box-body);
-}
-
-.ui.secondary.pointing.menu {
-  border-color: var(--color-secondary);
-}
-
 .ui.tabular.menu .item,
 .ui.secondary.pointing.menu .item {
   padding: 11.55px 12px !important; /* match .dashboard-navbar in height */
@@ -1415,12 +1231,6 @@ table th[data-sortt-desc] .svg {
   color: var(--color-text);
 }
 
-.ui.secondary.pointing.menu .active.item,
-.ui.secondary.pointing.menu .active.item:hover,
-.ui.secondary.pointing.menu .dropdown.item:hover {
-  color: var(--color-text-dark);
-}
-
 .ui.tabular.menu .active.item,
 .ui.secondary.pointing.menu .active.item,
 .resize-for-semibold::before {
@@ -1531,10 +1341,7 @@ table th[data-sortt-desc] .svg {
   align-items: center;
   gap: .25rem;
   vertical-align: middle;
-}
-
-.ui.ui.button {
-  justify-content: center;
+  min-width: 0;
 }
 
 .ui.dropdown .ui.label .svg {
@@ -1551,6 +1358,7 @@ table th[data-sortt-desc] .svg {
   display: flex;
   align-items: center;
   gap: .25rem;
+  min-width: 0;
 }
 
 /* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content */
@@ -1558,4 +1366,5 @@ table th[data-sortt-desc] .svg {
   display: flex !important;
   align-items: center;
   gap: .5rem;
+  min-width: 0;
 }
diff --git a/web_src/css/dashboard.css b/web_src/css/dashboard.css
index d61e0c1cf290..0962215ac6ad 100644
--- a/web_src/css/dashboard.css
+++ b/web_src/css/dashboard.css
@@ -7,7 +7,6 @@
 .dashboard.feeds .context.user.menu .ui.header,
 .dashboard.issues .context.user.menu .ui.header {
   font-size: 1rem;
-  text-transform: none;
 }
 
 .dashboard.feeds .filter.menu,
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 118c058b19a8..cf2e73572c31 100644
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -52,6 +52,9 @@ only use:
 */
 .tw-hidden.tw-hidden { display: none !important; }
 
+/* proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 */
+.tw-break-anywhere { overflow-wrap: anywhere !important; }
+
 @media (max-width: 767.98px) {
   /* double selector so it wins over .tw-flex (old .gt-df) etc */
   .not-mobile.not-mobile {
diff --git a/web_src/css/index.css b/web_src/css/index.css
index ad59f32636a2..edd6cdca8bd5 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -11,6 +11,7 @@
 @import "./modules/list.css";
 @import "./modules/segment.css";
 @import "./modules/grid.css";
+@import "./modules/menu.css";
 @import "./modules/message.css";
 @import "./modules/table.css";
 @import "./modules/card.css";
@@ -62,6 +63,7 @@
 @import "./repo/linebutton.css";
 @import "./repo/wiki.css";
 @import "./repo/header.css";
+@import "./repo/reactions.css";
 
 @import "./editor/fileeditor.css";
 @import "./editor/combomarkdowneditor.css";
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index faeed8c9a1b5..47f55df7fa1d 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -1,11 +1,33 @@
-/* this contains override styles for buttons and related elements */
-
-/* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
-.ui.button,
-.ui.button:focus {
+/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
+   unused rules here after refactoring, please remove them. */
+
+.ui.button {
+  cursor: pointer;
+  display: inline-block;
+  min-height: 1em;
+  outline: none;
+  vertical-align: baseline;
+  font-family: var(--fonts-regular);
+  margin: 0 0.25em 0 0;
+  padding: 0.78571429em 1.5em;
+  font-weight: var(--font-weight-normal);
+  text-align: center;
+  text-decoration: none;
+  line-height: 1;
+  border-radius: 0.28571429rem;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  justify-content: center;
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text);
+  white-space: nowrap;
+}
+
+@media (max-width: 767.98px) {
+  .ui.button {
+    white-space: normal;
+  }
 }
 
 .ui.button:hover {
@@ -13,10 +35,6 @@
   color: var(--color-text);
 }
 
-.page-content .ui.button {
-  box-shadow: none !important;
-}
-
 .ui.active.button,
 .ui.button:active,
 .ui.active.button:active,
@@ -25,89 +43,116 @@
   color: var(--color-text);
 }
 
-.delete-button,
-.delete-button:hover {
-  color: var(--color-red);
+.ui.buttons .disabled.button:not(.basic),
+.ui.disabled.button,
+.ui.button:disabled,
+.ui.disabled.button:hover,
+.ui.disabled.active.button {
+  cursor: default;
+  opacity: var(--opacity-disabled) !important;
+  background-image: none;
+  pointer-events: none !important;
 }
 
-/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
-
-.btn {
-  background: transparent;
-  border-radius: var(--border-radius);
+.ui.labeled.button:not(.icon) {
+  display: inline-flex;
+  flex-direction: row;
+  background: none;
+  padding: 0 !important;
   border: none;
-  color: inherit;
+}
+.ui.labeled.button > .button {
   margin: 0;
-  padding: 0;
 }
-
-.btn:hover,
-.btn:active,
-.btn:focus {
-  background: none;
-  border: none;
+.ui.labeled.button > .label {
+  display: flex;
+  align-items: center;
+  margin: 0 0 0 -1px !important;
+  font-size: 1em;
+  border-color: var(--color-light-border);
 }
 
-a.btn,
-a.btn:hover {
-  color: inherit;
+.ui.button > .icon:not(.button) {
+  height: auto;
+  opacity: 0.8;
 }
-
-/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
-And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
-It needs some tricks to tweak the left/right borders with active state */
-
-.ui.buttons .button {
-  border-right: none;
+.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
+.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
+  margin: 0 0.42857143em 0 -0.21428571em;
+  vertical-align: baseline;
 }
-
-.ui.buttons .button:hover {
-  border-color: var(--color-secondary-dark-2);
+.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
+  vertical-align: baseline;
 }
-
-.ui.buttons .button:hover + .button {
-  border-left: 1px solid var(--color-secondary-dark-2);
+.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
+  margin: 0 -0.21428571em 0 0.42857143em;
 }
 
-/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
-.ui.buttons .button:first-child,
-.ui.buttons .button.tw-hidden:first-child + .button {
-  border-left: 1px solid var(--color-light-border);
+.ui.compact.buttons .button,
+.ui.compact.button {
+  padding: 0.58928571em 1.125em;
 }
-
-.ui.buttons .button:last-child,
-.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
-  border-right: 1px solid var(--color-light-border);
+.ui.compact.icon.buttons .button,
+.ui.compact.icon.button {
+  padding: 0.58928571em;
+}
+.ui.compact.labeled.icon.button {
+  padding: 0.58928571em 3.69642857em;
+}
+.ui.compact.labeled.icon.button > .icon {
+  padding: 0.58928571em 0;
 }
 
-.ui.buttons .button.active {
-  border-left: 1px solid var(--color-light-border);
-  border-right: 1px solid var(--color-light-border);
+.ui.buttons .button,
+.ui.button {
+  font-size: 1rem;
+}
+.ui.mini.buttons .dropdown,
+.ui.mini.buttons .dropdown .menu > .item,
+.ui.mini.buttons .button,
+.ui.ui.ui.ui.mini.button {
+  font-size: 0.78571429rem;
+}
+.ui.tiny.buttons .dropdown,
+.ui.tiny.buttons .dropdown .menu > .item,
+.ui.tiny.buttons .button,
+.ui.ui.ui.ui.tiny.button {
+  font-size: 0.85714286rem;
+}
+.ui.small.buttons .dropdown,
+.ui.small.buttons .dropdown .menu > .item,
+.ui.small.buttons .button,
+.ui.ui.ui.ui.small.button {
+  font-size: 0.92857143rem;
 }
 
-.ui.buttons .button.active + .button {
-  border-left: none;
+.ui.icon.buttons .button,
+.ui.icon.button:not(.compact) {
+  padding: 0.78571429em;
+}
+.ui.icon.buttons .button > .icon,
+.ui.icon.button > .icon {
+  margin: 0 !important;
+  vertical-align: top;
 }
 
 .ui.basic.buttons .button,
-.ui.basic.button,
-.ui.basic.buttons .button:hover,
-.ui.basic.button:hover {
-  box-shadow: none;
+.ui.basic.button {
+  border-radius: 0.28571429rem;
+  background: none;
 }
-
-/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
-   would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
-.ui.small.button:not(.compact):has(.svg) {
-  padding-top: 0.58928571em;
-  padding-bottom: 0.58928571em;
+.ui.basic.buttons {
+  border: 1px solid var(--color-secondary);
+  border-radius: 0.28571429rem;
+}
+.ui.basic.buttons .button {
+  border-radius: 0;
+  border-left: 1px solid var(--color-secondary);
 }
 
 .ui.labeled.button.disabled > .button,
 .ui.basic.buttons .button,
-.ui.basic.button,
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus {
+.ui.basic.button {
   color: var(--color-text-light);
   background: var(--color-button);
 }
@@ -129,23 +174,45 @@ It needs some tricks to tweak the left/right borders with active state */
   background: var(--color-active);
 }
 
-.ui.labeled.button > .label {
-  border-color: var(--color-light-border);
+.ui.labeled.icon.button {
+  position: relative;
+  padding-left: 4.07142857em !important;
+  padding-right: 1.5em !important;
 }
 
-.ui.labeled.icon.buttons > .button > .icon,
 .ui.labeled.icon.button > .icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  line-height: 1;
+  border-radius: 0;
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+  text-align: center;
+  animation: none;
+  padding: 0.78571429em 0;
+  margin: 0;
+  width: 2.57142857em;
   background: var(--color-hover);
 }
 
-/* primary */
+.ui.button.toggle.active {
+  background-color: var(--color-green);
+  color: var(--color-white);
+}
+.ui.button.toggle.active:hover {
+  background-color: var(--color-green-dark-1);
+  color: var(--color-white);
+}
+
+.ui.fluid.button {
+  width: 100%;
+  display: block;
+}
 
-.ui.primary.labels .label,
-.ui.ui.ui.primary.label,
 .ui.primary.button,
-.ui.primary.buttons .button,
-.ui.primary.button:focus,
-.ui.primary.buttons .button:focus {
+.ui.primary.buttons .button {
   background: var(--color-primary);
   color: var(--color-primary-contrast);
 }
@@ -162,11 +229,10 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.primary.buttons .button,
-.ui.basic.primary.button,
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
+.ui.basic.primary.button {
   color: var(--color-primary);
   border-color: var(--color-primary);
+  background: none;
 }
 
 .ui.basic.primary.buttons .button:hover,
@@ -181,55 +247,8 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-primary-active);
 }
 
-/* secondary */
-
-.ui.secondary.labels .label,
-.ui.ui.ui.secondary.label,
-.ui.secondary.button,
-.ui.secondary.buttons .button,
-.ui.secondary.button:focus,
-.ui.secondary.buttons .button:focus {
-  background: var(--color-secondary-button);
-}
-
-.ui.secondary.button:hover,
-.ui.secondary.buttons .button:hover {
-  background: var(--color-secondary-hover);
-}
-
-.ui.secondary.button:active,
-.ui.secondary.buttons .button:active {
-  background: var(--color-secondary-active);
-}
-
-.ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button,
-.ui.basic.secondary.button:focus,
-.ui.basic.secondary.buttons .button:focus {
-  color: var(--color-secondary-button);
-  border-color: var(--color-secondary-button);
-}
-
-.ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover {
-  color: var(--color-secondary-hover);
-  border-color: var(--color-secondary-hover);
-}
-
-.ui.basic.secondary.buttons .button:active,
-.ui.basic.secondary.button:active {
-  color: var(--color-secondary-active);
-  border-color: var(--color-secondary-active);
-}
-
-/* red */
-
-.ui.red.labels .label,
-.ui.ui.ui.red.label,
 .ui.red.button,
-.ui.red.buttons .button,
-.ui.red.button:focus,
-.ui.red.buttons .button:focus {
+.ui.red.buttons .button {
   background: var(--color-red);
 }
 
@@ -244,11 +263,10 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.red.buttons .button,
-.ui.basic.red.button,
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
+.ui.basic.red.button {
   color: var(--color-red);
   border-color: var(--color-red);
+  background: none;
 }
 
 .ui.basic.red.buttons .button:hover,
@@ -263,137 +281,8 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-red-dark-2);
 }
 
-/* orange */
-
-.ui.orange.labels .label,
-.ui.ui.ui.orange.label,
-.ui.orange.button,
-.ui.orange.buttons .button,
-.ui.orange.button:focus,
-.ui.orange.buttons .button:focus {
-  background: var(--color-orange);
-}
-
-.ui.orange.button:hover,
-.ui.orange.buttons .button:hover {
-  background: var(--color-orange-dark-1);
-}
-
-.ui.orange.button:active,
-.ui.orange.buttons .button:active {
-  background: var(--color-orange-dark-2);
-}
-
-.ui.basic.orange.buttons .button,
-.ui.basic.orange.button,
-.ui.basic.orange.buttons .button:focus,
-.ui.basic.orange.button:focus {
-  color: var(--color-orange);
-  border-color: var(--color-orange);
-}
-
-.ui.basic.orange.buttons .button:hover,
-.ui.basic.orange.button:hover {
-  color: var(--color-orange-dark-1);
-  border-color: var(--color-orange-dark-1);
-}
-
-.ui.basic.orange.buttons .button:active,
-.ui.basic.orange.button:active {
-  color: var(--color-orange-dark-2);
-  border-color: var(--color-orange-dark-2);
-}
-
-/* yellow */
-
-.ui.yellow.labels .label,
-.ui.ui.ui.yellow.label,
-.ui.yellow.button,
-.ui.yellow.buttons .button,
-.ui.yellow.button:focus,
-.ui.yellow.buttons .button:focus {
-  background: var(--color-yellow);
-}
-
-.ui.yellow.button:hover,
-.ui.yellow.buttons .button:hover {
-  background: var(--color-yellow-dark-1);
-}
-
-.ui.yellow.button:active,
-.ui.yellow.buttons .button:active {
-  background: var(--color-yellow-dark-2);
-}
-
-.ui.basic.yellow.buttons .button,
-.ui.basic.yellow.button,
-.ui.basic.yellow.buttons .button:focus,
-.ui.basic.yellow.button:focus {
-  color: var(--color-yellow);
-  border-color: var(--color-yellow);
-}
-
-.ui.basic.yellow.buttons .button:hover,
-.ui.basic.yellow.button:hover {
-  color: var(--color-yellow-dark-1);
-  border-color: var(--color-yellow-dark-1);
-}
-
-.ui.basic.yellow.buttons .button:active,
-.ui.basic.yellow.button:active {
-  color: var(--color-yellow-dark-2);
-  border-color: var(--color-yellow-dark-2);
-}
-
-/* olive */
-
-.ui.olive.labels .label,
-.ui.ui.ui.olive.label,
-.ui.olive.button,
-.ui.olive.buttons .button,
-.ui.olive.button:focus,
-.ui.olive.buttons .button:focus {
-  background: var(--color-olive);
-}
-
-.ui.olive.button:hover,
-.ui.olive.buttons .button:hover {
-  background: var(--color-olive-dark-1);
-}
-
-.ui.olive.button:active,
-.ui.olive.buttons .button:active {
-  background: var(--color-olive-dark-2);
-}
-
-.ui.basic.olive.buttons .button,
-.ui.basic.olive.button,
-.ui.basic.olive.buttons .button:focus,
-.ui.basic.olive.button:focus {
-  color: var(--color-olive);
-  border-color: var(--color-olive);
-}
-
-.ui.basic.olive.buttons .button:hover,
-.ui.basic.olive.button:hover {
-  color: var(--color-olive-dark-1);
-  border-color: var(--color-olive-dark-1);
-}
-
-.ui.basic.olive.buttons .button:active,
-.ui.basic.olive.button:active {
-  color: var(--color-olive-dark-2);
-  border-color: var(--color-olive-dark-2);
-}
-
-/* green */
-
-.ui.green.labels .label,
-.ui.ui.ui.green.label,
 .ui.green.button,
-.ui.green.buttons .button,
-.ui.green.button:focus,
-.ui.green.buttons .button:focus {
+.ui.green.buttons .button {
   background: var(--color-green);
 }
 
@@ -408,11 +297,10 @@ It needs some tricks to tweak the left/right borders with active state */
 }
 
 .ui.basic.green.buttons .button,
-.ui.basic.green.button,
-.ui.basic.green.buttons .button:focus,
-.ui.basic.green.button:focus {
+.ui.basic.green.button {
   color: var(--color-green);
   border-color: var(--color-green);
+  background: none;
 }
 
 .ui.basic.green.buttons .button:hover,
@@ -427,326 +315,93 @@ It needs some tricks to tweak the left/right borders with active state */
   border-color: var(--color-green-dark-2);
 }
 
-/* teal */
-
-.ui.teal.labels .label,
-.ui.ui.ui.teal.label,
-.ui.teal.button,
-.ui.teal.buttons .button,
-.ui.teal.button:focus,
-.ui.teal.buttons .button:focus {
-  background: var(--color-teal);
-}
-
-.ui.teal.button:hover,
-.ui.teal.buttons .button:hover {
-  background: var(--color-teal-dark-1);
+.ui.buttons {
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 0;
+  vertical-align: baseline;
+  margin: 0 0.25em 0 0;
 }
 
-.ui.teal.button:active,
-.ui.teal.buttons .button:active {
-  background: var(--color-teal-dark-2);
-}
-
-.ui.basic.teal.buttons .button,
-.ui.basic.teal.button,
-.ui.basic.teal.buttons .button:focus,
-.ui.basic.teal.button:focus {
-  color: var(--color-teal);
-  border-color: var(--color-teal);
-}
-
-.ui.basic.teal.buttons .button:hover,
-.ui.basic.teal.button:hover {
-  color: var(--color-teal-dark-1);
-  border-color: var(--color-teal-dark-1);
-}
-
-.ui.basic.teal.buttons .button:active,
-.ui.basic.teal.button:active {
-  color: var(--color-teal-dark-2);
-  border-color: var(--color-teal-dark-2);
-}
-
-/* blue */
-
-.ui.blue.labels .label,
-.ui.ui.ui.blue.label,
-.ui.blue.button,
-.ui.blue.buttons .button,
-.ui.blue.button:focus,
-.ui.blue.buttons .button:focus {
-  background: var(--color-blue);
-}
-
-.ui.blue.button:hover,
-.ui.blue.buttons .button:hover {
-  background: var(--color-blue-dark-1);
-}
-
-.ui.blue.button:active,
-.ui.blue.buttons .button:active {
-  background: var(--color-blue-dark-2);
-}
-
-.ui.basic.blue.buttons .button,
-.ui.basic.blue.button,
-.ui.basic.blue.buttons .button:focus,
-.ui.basic.blue.button:focus {
-  color: var(--color-blue);
-  border-color: var(--color-blue);
-}
-
-.ui.basic.blue.buttons .button:hover,
-.ui.basic.blue.button:hover {
-  color: var(--color-blue-dark-1);
-  border-color: var(--color-blue-dark-1);
-}
-
-.ui.basic.blue.buttons .button:active,
-.ui.basic.blue.button:active {
-  color: var(--color-blue-dark-2);
-  border-color: var(--color-blue-dark-2);
-}
-
-/* violet */
-
-.ui.violet.labels .label,
-.ui.ui.ui.violet.label,
-.ui.violet.button,
-.ui.violet.buttons .button,
-.ui.violet.button:focus,
-.ui.violet.buttons .button:focus {
-  background: var(--color-violet);
-}
-
-.ui.violet.button:hover,
-.ui.violet.buttons .button:hover {
-  background: var(--color-violet-dark-1);
-}
-
-.ui.violet.button:active,
-.ui.violet.buttons .button:active {
-  background: var(--color-violet-dark-2);
-}
-
-.ui.basic.violet.buttons .button,
-.ui.basic.violet.button,
-.ui.basic.violet.buttons .button:focus,
-.ui.basic.violet.button:focus {
-  color: var(--color-violet);
-  border-color: var(--color-violet);
-}
-
-.ui.basic.violet.buttons .button:hover,
-.ui.basic.violet.button:hover {
-  color: var(--color-violet-dark-1);
-  border-color: var(--color-violet-dark-1);
-}
-
-.ui.basic.violet.buttons .button:active,
-.ui.basic.violet.button:active {
-  color: var(--color-violet-dark-2);
-  border-color: var(--color-violet-dark-2);
-}
-
-/* purple */
-
-.ui.purple.labels .label,
-.ui.ui.ui.purple.label,
-.ui.purple.button,
-.ui.purple.buttons .button,
-.ui.purple.button:focus,
-.ui.purple.buttons .button:focus {
-  background: var(--color-purple);
-}
-
-.ui.purple.button:hover,
-.ui.purple.buttons .button:hover {
-  background: var(--color-purple-dark-1);
-}
-
-.ui.purple.button:active,
-.ui.purple.buttons .button:active {
-  background: var(--color-purple-dark-2);
-}
-
-.ui.basic.purple.buttons .button,
-.ui.basic.purple.button,
-.ui.basic.purple.buttons .button:focus,
-.ui.basic.purple.button:focus {
-  color: var(--color-purple);
-  border-color: var(--color-purple);
-}
-
-.ui.basic.purple.buttons .button:hover,
-.ui.basic.purple.button:hover {
-  color: var(--color-purple-dark-1);
-  border-color: var(--color-purple-dark-1);
-}
-
-.ui.basic.purple.buttons .button:active,
-.ui.basic.purple.button:active {
-  color: var(--color-purple-dark-2);
-  border-color: var(--color-purple-dark-2);
-}
-
-/* pink */
-
-.ui.pink.labels .label,
-.ui.ui.ui.pink.label,
-.ui.pink.button,
-.ui.pink.buttons .button,
-.ui.pink.button:focus,
-.ui.pink.buttons .button:focus {
-  background: var(--color-pink);
-}
-
-.ui.pink.button:hover,
-.ui.pink.buttons .button:hover {
-  background: var(--color-pink-dark-1);
-}
-
-.ui.pink.button:active,
-.ui.pink.buttons .button:active {
-  background: var(--color-pink-dark-2);
-}
-
-.ui.basic.pink.buttons .button,
-.ui.basic.pink.button,
-.ui.basic.pink.buttons .button:focus,
-.ui.basic.pink.button:focus {
-  color: var(--color-pink);
-  border-color: var(--color-pink);
-}
-
-.ui.basic.pink.buttons .button:hover,
-.ui.basic.pink.button:hover {
-  color: var(--color-pink-dark-1);
-  border-color: var(--color-pink-dark-1);
-}
-
-.ui.basic.pink.buttons .button:active,
-.ui.basic.pink.button:active {
-  color: var(--color-pink-dark-2);
-  border-color: var(--color-pink-dark-2);
-}
-
-/* brown */
-
-.ui.brown.labels .label,
-.ui.ui.ui.brown.label,
-.ui.brown.button,
-.ui.brown.buttons .button,
-.ui.brown.button:focus,
-.ui.brown.buttons .button:focus {
-  background: var(--color-brown);
-}
-
-.ui.brown.button:hover,
-.ui.brown.buttons .button:hover {
-  background: var(--color-brown-dark-1);
-}
-
-.ui.brown.button:active,
-.ui.brown.buttons .button:active {
-  background: var(--color-brown-dark-2);
+.delete-button,
+.delete-button:hover {
+  color: var(--color-red);
 }
 
-.ui.basic.brown.buttons .button,
-.ui.basic.brown.button,
-.ui.basic.brown.buttons .button:focus,
-.ui.basic.brown.button:focus {
-  color: var(--color-brown);
-  border-color: var(--color-brown);
-}
+/* btn is a plain button without any opinionated styling, it only uses flex for vertical alignment like ".ui.button" in base.css */
 
-.ui.basic.brown.buttons .button:hover,
-.ui.basic.brown.button:hover {
-  color: var(--color-brown-dark-1);
-  border-color: var(--color-brown-dark-1);
+.btn {
+  background: transparent;
+  border-radius: var(--border-radius);
+  border: none;
+  color: inherit;
+  margin: 0;
+  padding: 0;
 }
 
-.ui.basic.brown.buttons .button:active,
-.ui.basic.brown.button:active {
-  color: var(--color-brown-dark-2);
-  border-color: var(--color-brown-dark-2);
+.btn:hover,
+.btn:active {
+  background: none;
+  border: none;
 }
 
-/* negative */
-
-.ui.negative.buttons .button,
-.ui.negative.button,
-.ui.negative.buttons .button:focus,
-.ui.negative.button:focus {
-  background: var(--color-red);
+a.btn,
+a.btn:hover {
+  color: inherit;
 }
 
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover {
-  background: var(--color-red-dark-1);
-}
+/* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
+And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
+It needs some tricks to tweak the left/right borders with active state */
 
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
-  background: var(--color-red-dark-2);
+.ui.buttons .button {
+  border-right: none;
+  flex: 1 0 auto;
+  border-radius: 0;
+  margin: 0;
 }
-
-.ui.basic.negative.buttons .button,
-.ui.basic.negative.button,
-.ui.basic.negative.buttons .button:focus,
-.ui.basic.negative.button:focus {
-  color: var(--color-red);
-  border-color: var(--color-red);
+.ui.buttons .button:first-child {
+  border-left: none;
+  margin-left: 0;
+  border-top-left-radius: 0.28571429rem;
+  border-bottom-left-radius: 0.28571429rem;
 }
-
-.ui.basic.negative.buttons .button:hover,
-.ui.basic.negative.button:hover {
-  color: var(--color-red-dark-1);
-  border-color: var(--color-red-dark-1);
+.ui.buttons .button:last-child {
+  border-top-right-radius: 0.28571429rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 
-.ui.basic.negative.buttons .button:active,
-.ui.basic.negative.button:active {
-  color: var(--color-red-dark-2);
-  border-color: var(--color-red-dark-2);
+.ui.buttons .button:hover {
+  border-color: var(--color-secondary-dark-2);
 }
 
-/* positive */
-
-.ui.positive.buttons .button,
-.ui.positive.button,
-.ui.positive.buttons .button:focus,
-.ui.positive.button:focus {
-  background: var(--color-green);
+.ui.buttons .button:hover + .button {
+  border-left: 1px solid var(--color-secondary-dark-2);
 }
 
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover {
-  background: var(--color-green-dark-1);
+/* TODO: these "tw-hidden" selectors are only used by "blame.tmpl" buttons: Raw/Normal View/History/Unescape, need to be refactored to a clear solution later */
+.ui.buttons .button:first-child,
+.ui.buttons .button.tw-hidden:first-child + .button {
+  border-left: 1px solid var(--color-light-border);
 }
 
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
-  background: var(--color-green-dark-2);
+.ui.buttons .button:last-child,
+.ui.buttons .button:nth-last-child(2):has(+ .button.tw-hidden) {
+  border-right: 1px solid var(--color-light-border);
 }
 
-.ui.basic.positive.buttons .button,
-.ui.basic.positive.button,
-.ui.basic.positive.buttons .button:focus,
-.ui.basic.positive.button:focus {
-  color: var(--color-green);
-  border-color: var(--color-green);
+.ui.buttons .button.active {
+  border-left: 1px solid var(--color-light-border);
+  border-right: 1px solid var(--color-light-border);
 }
 
-.ui.basic.positive.buttons .button:hover,
-.ui.basic.positive.button:hover {
-  color: var(--color-green-dark-1);
-  border-color: var(--color-green-dark-1);
+.ui.buttons .button.active + .button {
+  border-left: none;
 }
 
-.ui.basic.positive.buttons .button:active,
-.ui.basic.positive.button:active {
-  color: var(--color-green-dark-2);
-  border-color: var(--color-green-dark-2);
+/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
+   would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
+.ui.small.button:not(.compact):has(.svg) {
+  padding-top: 0.58928571em;
+  padding-bottom: 0.58928571em;
 }
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 799eeb8574d2..cf080db22553 100644
--- a/web_src/css/modules/comment.css
+++ b/web_src/css/modules/comment.css
@@ -16,7 +16,7 @@
 .ui.comments .comment {
   position: relative;
   background: none;
-  margin: 0.5em 0 0;
+  margin: 3px 0 0;
   padding: 0.5em 0 0;
   border: none;
   border-top: none;
diff --git a/web_src/css/modules/divider.css b/web_src/css/modules/divider.css
index 48560bd3d908..acc8408f3760 100644
--- a/web_src/css/modules/divider.css
+++ b/web_src/css/modules/divider.css
@@ -2,12 +2,16 @@
   margin: 10px 0;
   height: 0;
   font-weight: var(--font-weight-medium);
-  text-transform: uppercase;
   color: var(--color-text);
   font-size: 1rem;
   width: 100%;
 }
 
+h4.divider {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
 .divider:not(.divider-text) {
   border-top: 1px solid var(--color-secondary);
 }
diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css
index 1ca513687ffc..5d4e12cc129b 100644
--- a/web_src/css/modules/flexcontainer.css
+++ b/web_src/css/modules/flexcontainer.css
@@ -6,10 +6,16 @@
   margin-top: var(--page-spacing);
 }
 
+/* small options menu on the left, used in settings/admin pages */
 .flex-container-nav {
   width: 240px;
 }
 
+/* wide sidebar on the right, used in frontpage */
+.flex-container-sidebar {
+  width: 35%;
+}
+
 .flex-container-main {
   flex: 1;
   min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
@@ -19,7 +25,9 @@
   .flex-container {
     flex-direction: column;
   }
-  .flex-container-nav {
+  .flex-container-nav,
+  .flex-container-sidebar {
+    order: -1;
     width: auto;
   }
 }
diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css
index 05381e1185e8..9cec5fcbe632 100644
--- a/web_src/css/modules/header.css
+++ b/web_src/css/modules/header.css
@@ -9,7 +9,6 @@
   font-family: var(--fonts-regular);
   font-weight: var(--font-weight-medium);
   line-height: 1.28571429;
-  text-transform: none;
 }
 
 .ui.header:first-child {
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 0512c5fddbb0..696080b66704 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -5,12 +5,13 @@
   display: inline-flex;
   align-items: center;
   gap: .25rem;
+  min-width: 0;
+  max-width: 100%; /* since we are using "flex" to align label contents, we also need to limit the x-axis, a label shouldn't be wider than 100% */
   vertical-align: middle;
   line-height: 1;
   background: var(--color-label-bg);
   color: var(--color-label-text);
   padding: 0.3em 0.5em;
-  text-transform: none;
   font-size: 0.85714286rem;
   font-weight: var(--font-weight-medium);
   border: 0 solid transparent;
diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css
new file mode 100644
index 000000000000..2581d8fab2ae
--- /dev/null
+++ b/web_src/css/modules/menu.css
@@ -0,0 +1,802 @@
+.ui.menu {
+  display: flex;
+  margin: 1rem 0;
+  font-family: var(--fonts-regular);
+  font-weight: var(--font-weight-normal);
+  background: var(--color-menu);
+  border: 1px solid var(--color-secondary);
+  border-radius: 0.28571429rem;
+  min-height: 2.85714286em;
+  font-size: 1rem;
+}
+.ui.menu:first-child {
+  margin-top: 0;
+}
+.ui.menu:last-child {
+  margin-bottom: 0;
+}
+
+.ui.menu .menu {
+  margin: 0;
+}
+.ui.menu:not(.vertical) > .menu {
+  display: flex;
+}
+
+.ui.menu:not(.vertical) .item {
+  display: flex;
+  align-items: center;
+}
+
+.ui.menu .item {
+  position: relative;
+  vertical-align: middle;
+  line-height: var(--line-height-default);
+  text-decoration: none;
+  flex: 0 0 auto;
+  background: none;
+  padding: 0.92857143em 1.14285714em;
+  color: var(--color-text);
+  font-weight: var(--font-weight-normal);
+}
+.ui.menu > .item:first-child {
+  border-radius: 0.28571429rem 0 0 0.28571429rem;
+}
+
+.ui.menu .item::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  right: 0;
+  height: 100%;
+  width: 1px;
+  background: var(--color-secondary);
+}
+
+.ui.menu .item > .svg {
+  margin-right: 0.35em;
+}
+
+.ui.menu .item > a:not(.ui),
+.ui.menu .item > p:only-child {
+  line-height: 1.3;
+}
+.ui.menu .item > p:first-child {
+  margin-top: 0;
+}
+.ui.menu .item > p:last-child {
+  margin-bottom: 0;
+}
+
+.ui.menu .item > i.icon {
+  opacity: 0.9;
+  float: none;
+  margin: 0 0.35714286em 0 0;
+}
+
+.ui.menu:not(.vertical) .item > .button {
+  position: relative;
+  top: 0;
+  margin: -0.5em 0;
+  padding: 0.58928571em 1.125em;
+  font-size: 1em;
+}
+
+.ui.menu > .grid,
+.ui.menu > .container {
+  display: flex;
+  align-items: inherit;
+  flex-direction: inherit;
+}
+
+.ui.menu .item > .input {
+  width: 100%;
+}
+.ui.menu:not(.vertical) .item > .input {
+  position: relative;
+  top: 0;
+  margin: -0.5em 0;
+}
+.ui.menu .item > .input input {
+  font-size: 1em;
+  padding-top: 0.57142857em;
+  padding-bottom: 0.57142857em;
+}
+
+.ui.menu .header.item,
+.ui.vertical.menu .header.item {
+  margin: 0;
+  font-size: 1.1em;
+  background: var(--color-box-header);
+  font-weight: var(--font-weight-medium);
+}
+.ui.vertical.menu .item > .header:not(.ui) {
+  margin: 0 0 0.5em;
+  font-size: 1em;
+  font-weight: var(--font-weight-medium);
+}
+
+.ui.menu .item > i.dropdown.icon {
+  padding: 0;
+  float: right;
+  margin: 0 0 0 1em;
+}
+
+.ui.menu .dropdown.item .menu {
+  min-width: calc(100% - 1px);
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+  background: var(--color-body);
+  margin: 0;
+  flex-direction: column !important;
+}
+
+.ui.menu .ui.dropdown .menu > .item {
+  margin: 0;
+  text-align: left;
+  font-size: 1em !important;
+  padding: 0.78571429em 1.14285714em !important;
+  background: transparent !important;
+  color: var(--color-text) !important;
+  font-weight: var(--font-weight-normal) !important;
+}
+.ui.menu .ui.dropdown .menu > .item:hover {
+  color: var(--color-text) !important;
+  background: var(--color-hover) !important;
+}
+.ui.menu .ui.dropdown .menu > .selected.item {
+  color: var(--color-text) !important;
+  background: var(--color-hover) !important;
+}
+.ui.menu .ui.dropdown .menu > .active.item {
+  color: var(--color-text) !important;
+  background: var(--color-active) !important;
+  font-weight: var(--font-weight-medium) !important;
+}
+
+.ui.menu .ui.dropdown.item .menu .item {
+  width: 100%;
+}
+
+.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
+  display: block;
+}
+.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
+  display: inline-block;
+  font-size: 1em !important;
+  float: none;
+  margin: 0 0.75em 0 0 !important;
+}
+
+.ui.secondary.menu .dropdown.item > .menu {
+  border-radius: 0.28571429rem;
+  margin-top: 0.35714286em;
+}
+
+.ui.menu .pointing.dropdown.item .menu {
+  margin-top: 0.75em;
+}
+
+.ui.menu .item > .label:not(.floating) {
+  margin-left: 1em;
+  padding: 0.3em 0.78571429em;
+}
+.ui.vertical.menu .item > .label {
+  margin-top: -0.15em;
+  margin-bottom: -0.15em;
+  padding: 0.3em 0.78571429em;
+  float: right;
+  text-align: center;
+}
+.ui.menu .item > .floating.label {
+  padding: 0.3em 0.78571429em;
+}
+.ui.menu .item > .label {
+  background: var(--color-label-bg);
+  color: var(--color-label-text);
+}
+.ui.menu .item > .image.label img {
+  margin: -0.2833em 0.8em -0.2833em -0.8em;
+  height: 1.5666em;
+}
+
+.ui.menu .item > img:not(.ui) {
+  display: inline-block;
+  vertical-align: middle;
+  margin: -0.3em 0;
+  width: 2.5em;
+}
+.ui.vertical.menu .item > img:not(.ui):only-child {
+  display: block;
+  max-width: 100%;
+  width: auto;
+}
+
+.ui.menu .list .item::before {
+  background: none !important;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.menu > .ui.container {
+    width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+.ui.menu .dropdown.item:hover,
+.ui.menu a.item:hover {
+  cursor: pointer;
+}
+
+.ui.menu a.item:active {
+  color: var(--color-text);
+  background: none;
+}
+
+.ui.menu .active.item {
+  color: var(--color-text);
+  background: var(--color-active);
+  font-weight: var(--font-weight-normal);
+}
+.ui.menu .active.item > i.icon {
+  opacity: 1;
+}
+
+.ui.ui.menu .item.disabled {
+  cursor: default;
+  background-color: transparent;
+  pointer-events: none;
+  opacity: var(--opacity-disabled);
+}
+
+.ui.menu:not(.vertical) .left.item,
+.ui.menu:not(.vertical) .left.menu {
+  display: flex;
+  margin-right: auto !important;
+}
+
+.ui.menu:not(.vertical) .right.item,
+.ui.menu:not(.vertical) .right.menu {
+  display: flex;
+  margin-left: auto !important;
+}
+.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
+.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
+  display: inherit;
+}
+
+.ui.menu:not(.vertical) .center.item {
+  display: flex;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.ui.menu .right.item::before,
+.ui.menu .right.menu > .item::before {
+  right: auto;
+  left: 0;
+}
+
+.ui.menu .center.item:last-child::before {
+  display: none;
+}
+
+.ui.vertical.menu {
+  display: block;
+  flex-direction: column;
+  background: var(--color-menu);
+  width: 15rem;
+}
+
+.ui.vertical.menu .item {
+  display: block;
+  background: none;
+  border-top: none;
+  border-right: none;
+}
+.ui.vertical.menu > .item:first-child {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.vertical.menu > .item:last-child {
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+
+.ui.vertical.menu .item > i.icon {
+  width: 1.18em;
+  float: right;
+  margin: 0 0 0 0.5em;
+}
+.ui.vertical.menu .item > .label + i.icon {
+  float: none;
+  margin: 0 0.5em 0 0;
+}
+
+.ui.vertical.menu .item::before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--color-secondary);
+}
+.ui.vertical.menu .item:first-child::before {
+  display: none !important;
+}
+
+.ui.vertical.menu .item > .menu {
+  margin: 0.5em -1.14285714em 0;
+}
+.ui.vertical.menu .menu .item {
+  background: none;
+  padding: 0.5em 1.33333333em;
+  font-size: 0.85714286em;
+  color: var(--color-text-light-2);
+}
+
+.ui.vertical.menu .item .menu .item {
+  color: var(--color-text-light-2);
+  text-indent: 16px;
+}
+
+.ui.vertical.menu .item .menu .item:hover,
+.ui.vertical.menu .item .menu a.item:hover {
+  color: var(--color-text-light-1);
+}
+
+.ui.vertical.menu .item .menu .active.item {
+  background-color: transparent;
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+.ui.vertical.menu .item .menu a.item:hover {
+  color: var(--color-text);
+}
+.ui.vertical.menu .menu .item::before {
+  display: none;
+}
+
+.ui.vertical.menu .active.item {
+  border-radius: 0;
+}
+.ui.vertical.menu > .active.item:first-child {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.vertical.menu > .active.item:last-child {
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+}
+.ui.vertical.menu > .active.item:only-child {
+  border-radius: 0.28571429rem;
+}
+.ui.vertical.menu .active.item .menu .active.item {
+  border-left: none;
+}
+
+.ui.tabular.menu {
+  border-radius: 0;
+  border: none;
+  background: none transparent;
+  border-bottom: 1px solid var(--color-secondary);
+}
+.ui.tabular.fluid.menu {
+  width: calc(100% + 2px) !important;
+}
+.ui.tabular.menu .item {
+  background: transparent;
+  border-bottom: none;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
+  color: var(--color-text-light-2);
+}
+.ui.tabular.menu .item::before {
+  display: none;
+}
+
+.ui.tabular.menu .item:hover {
+  background-color: transparent;
+}
+
+.ui.tabular.menu .active.item,
+.ui.tabular.menu .active.item:hover {
+  background: var(--color-body);
+  border-top-width: 1px;
+  border-color: var(--color-secondary);
+  font-weight: var(--font-weight-medium);
+  margin-bottom: -1px;
+  border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
+}
+
+.ui.tabular.menu + .attached:not(.top).segment,
+.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
+  border-top: none;
+  margin-left: 0;
+  margin-top: 0;
+  margin-right: 0;
+  width: 100%;
+}
+
+.ui.tabular.menu .active.dropdown.item {
+  margin-bottom: 0;
+  border-left: 1px solid transparent;
+  border-right: 1px solid transparent;
+  border-top: 2px solid transparent;
+  border-bottom: none;
+}
+
+.ui.pagination.menu {
+  margin: 0;
+  display: inline-flex;
+  vertical-align: middle;
+}
+.ui.pagination.menu .item:last-child {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
+.ui.compact.menu .item:last-child {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
+.ui.pagination.menu .item:last-child::before {
+  display: none;
+}
+.ui.pagination.menu .item {
+  min-width: 3em;
+  text-align: center;
+}
+.ui.pagination.menu .icon.item i.icon {
+  vertical-align: top;
+}
+
+.ui.pagination.menu .active.item,
+.ui.pagination.menu .active.item:hover {
+  border-top: none;
+  padding-top: 0.92857143em;
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
+@media (max-width: 767.98px) {
+  .ui.pagination.menu .item:not(.active,.navigation),
+  .ui.pagination.menu .item.navigation span.navigation_label {
+    display: none;
+  }
+}
+
+.ui.pagination.menu.narrow .item {
+  padding-left: 8px;
+  padding-right: 8px;
+  min-width: 1em;
+  text-align: center;
+}
+
+.ui.pagination.menu.narrow .item .icon {
+  margin-right: 0;
+}
+
+.ui.secondary.menu {
+  background: none;
+  margin-left: 0;
+  margin-right: 0;
+  gap: .35714286em;
+  border-radius: 0;
+  border: none;
+}
+
+.ui.secondary.menu .item {
+  align-self: center;
+  border: none;
+  padding: 0.78571429em 0.92857143em;
+  margin: 0;
+  background: none;
+  border-radius: 0.28571429rem;
+}
+
+.ui.secondary.menu .item::before {
+  display: none !important;
+}
+
+.ui.secondary.menu .header.item {
+  border-radius: 0;
+  border-right: none;
+  background: none transparent;
+}
+
+.ui.secondary.menu .item > img:not(.ui) {
+  margin: 0;
+}
+
+.ui.secondary.menu .dropdown.item:hover,
+.ui.secondary.menu a.item:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
+.ui.secondary.menu .active.item,
+.ui.secondary.menu .active.item:hover {
+  color: var(--color-text-dark);
+  background: var(--color-active);
+  border-radius: 0.28571429rem;
+}
+
+.ui.secondary.item.menu {
+  margin-left: 0;
+  margin-right: 0;
+}
+.ui.secondary.item.menu .item:last-child {
+  margin-right: 0;
+}
+
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
+  margin: 0 -0.92857143em;
+}
+.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
+  margin: 0;
+  padding: 0.5em 1.33333333em;
+}
+.ui.secondary.vertical.menu > .item {
+  border: none;
+  margin: 0 0 0.35714286em;
+  border-radius: 0.28571429rem !important;
+}
+.ui.secondary.vertical.menu > .header.item {
+  border-radius: 0;
+}
+
+.ui.vertical.secondary.menu .item > .menu .item {
+  background-color: transparent;
+}
+
+.ui.secondary.pointing.menu {
+  margin-left: 0;
+  margin-right: 0;
+  border-bottom: 2px solid var(--color-secondary);
+}
+.ui.secondary.pointing.menu .item {
+  border-bottom-color: transparent;
+  border-bottom-style: solid;
+  border-radius: 0;
+  align-self: flex-end;
+  margin: 0 0 -2px;
+  padding: 0.85714286em 1.14285714em;
+  border-bottom-width: 2px;
+}
+.ui.secondary.pointing.menu .ui.dropdown .menu .item {
+  border-bottom-width: 0;
+}
+.ui.secondary.pointing.menu .item > .label:not(.floating) {
+  margin-top: -0.3em;
+  margin-bottom: -0.3em;
+}
+.ui.secondary.pointing.menu .item > .circular.label {
+  margin-top: -0.5em;
+  margin-bottom: -0.5em;
+}
+
+.ui.secondary.pointing.menu .header.item {
+  color: var(--color-text) !important;
+}
+.ui.secondary.pointing.menu .item::after {
+  display: none;
+}
+
+.ui.secondary.pointing.menu .dropdown.item:hover,
+.ui.secondary.pointing.menu a.item:hover {
+  background-color: transparent;
+  color: var(--color-text);
+}
+
+.ui.secondary.pointing.menu .dropdown.item:active,
+.ui.secondary.pointing.menu a.item:active {
+  background-color: transparent;
+  border-color: var(--color-secondary);
+}
+
+.ui.secondary.pointing.menu .active.item {
+  background-color: transparent;
+  border-color: currentcolor;
+  font-weight: var(--font-weight-medium);
+}
+
+.ui.secondary.pointing.menu .active.item,
+.ui.secondary.pointing.menu .active.item:hover,
+.ui.secondary.pointing.menu .dropdown.item:hover {
+  color: var(--color-text-dark);
+}
+
+.ui.secondary.pointing.menu .active.dropdown.item {
+  border-color: transparent;
+}
+
+@media only screen and (max-width: 767.98px) {
+  .ui.stackable.menu {
+    flex-direction: column;
+  }
+  .ui.stackable.menu .item {
+    width: 100% !important;
+  }
+  .ui.stackable.menu .left.menu,
+  .ui.stackable.menu .left.item {
+    margin-right: 0 !important;
+  }
+  .ui.stackable.menu .right.menu,
+  .ui.stackable.menu .right.item {
+    margin-left: 0 !important;
+  }
+  .ui.stackable.menu .center.item {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+  .ui.stackable.menu .right.menu,
+  .ui.stackable.menu .left.menu {
+    flex-direction: column;
+  }
+}
+
+.ui.floated.menu {
+  float: left;
+  margin: 0 0.5rem 0 0;
+}
+.ui.floated.menu .item:last-child::before {
+  display: none;
+}
+.ui.right.floated.menu {
+  float: right;
+  margin: 0 0 0 0.5rem;
+}
+
+.ui.borderless.menu .item::before,
+.ui.borderless.menu .item .menu .item::before,
+.ui.menu .borderless.item::before {
+  background: none !important;
+}
+
+.ui.compact.menu {
+  display: inline-flex;
+  margin: 0;
+  vertical-align: middle;
+}
+.ui.compact.vertical.menu {
+  display: inline-block;
+  width: auto !important;
+}
+.ui.compact.menu:not(.secondary) .item:last-child {
+  border-radius: 0 0.28571429rem 0.28571429rem 0;
+}
+.ui.compact.menu .item:last-child::before {
+  display: none;
+}
+.ui.compact.vertical.menu .item:last-child::before {
+  display: block;
+}
+
+.ui.menu.fluid,
+.ui.vertical.menu.fluid {
+  width: 100% !important;
+}
+
+.ui.item.menu,
+.ui.item.menu .item {
+  width: 100%;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  text-align: center;
+  justify-content: center;
+}
+.ui.attached.item.menu:not(.tabular) {
+  margin: 0 -1px !important;
+}
+.ui.item.menu .item:last-child::before {
+  display: none;
+}
+.ui.menu.two.item .item {
+  width: 50%;
+}
+
+.ui.pointing.menu .item::after {
+  visibility: hidden;
+  position: absolute;
+  content: "";
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  background: none;
+  margin: 0.5px 0 0;
+  width: 0.57142857em;
+  height: 0.57142857em;
+  border: none;
+  border-bottom: 1px solid var(--color-secondary);
+  border-right: 1px solid var(--color-secondary);
+  z-index: 2;
+}
+.ui.pointing.menu .ui.dropdown .menu .item::after {
+  display: none;
+}
+
+.ui.pointing.menu .active.item::after {
+  visibility: visible;
+}
+.ui.pointing.menu .active.dropdown.item::after {
+  visibility: hidden;
+}
+
+.ui.pointing.menu .dropdown.active.item::after,
+.ui.pointing.menu .active.item .menu .active.item::after {
+  display: none;
+}
+
+.ui.pointing.menu .active.item::after,
+.ui.pointing.menu .active.item:hover::after {
+  background-color: var(--color-active);
+}
+
+.ui.attached.menu {
+  top: 0;
+  bottom: 0;
+  border-radius: 0;
+  margin: 0 -1px;
+  width: calc(100% + 2px);
+  max-width: calc(100% + 2px);
+}
+.ui.attached + .ui.attached.menu:not(.top) {
+  border-top: none;
+}
+
+.ui[class*="top attached"].menu {
+  bottom: 0;
+  margin-bottom: 0;
+  top: 0;
+  margin-top: 1rem;
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
+}
+.ui.menu[class*="top attached"]:first-child {
+  margin-top: 0;
+}
+
+.ui.top.attached.menu > .item:first-child {
+  border-radius: 0.28571429rem 0 0;
+}
+
+.ui.attached.menu:not(.tabular) {
+  border: 1px solid var(--color-secondary);
+}
+.ui.attached.tabular.menu {
+  margin-left: 0;
+  margin-right: 0;
+  width: 100%;
+}
+
+.ui.mini.menu,
+.ui.mini.menu .dropdown,
+.ui.mini.menu .dropdown .menu > .item {
+  font-size: 0.78571429rem;
+}
+.ui.mini.vertical.menu:not(.icon) {
+  width: 9rem;
+}
+.ui.tiny.menu,
+.ui.tiny.menu .dropdown,
+.ui.tiny.menu .dropdown .menu > .item {
+  font-size: 0.85714286rem;
+}
+.ui.tiny.vertical.menu:not(.icon) {
+  width: 11rem;
+}
+.ui.small.menu,
+.ui.small.menu .dropdown,
+.ui.small.menu .dropdown .menu > .item {
+  font-size: 0.92857143rem;
+}
+.ui.small.vertical.menu:not(.icon) {
+  width: 13rem;
+}
+
+.ui .menu:not(.vertical) .item > .button.small {
+  font-size: 0.92857143rem;
+}
+
+.ui.segment .ui.tabular.menu .active.item,
+.ui.segment .ui.tabular.menu .active.item:hover {
+  background: var(--color-box-body);
+}
diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index 54a4ef81ca19..a2acfeaa150e 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -10,6 +10,10 @@
   top: 1.2em;
 }
 
+.ui.modal > .close.inside {
+  color: inherit;
+}
+
 .ui.modal > .close.icon[height="16"] {
   top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
   color: var(--color-text-dark);
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index d42b7358668e..c9d486c51d43 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -654,15 +654,15 @@ td .commit-summary {
   padding: 2px .5rem;
 }
 
-.repository.view.issue .issue-title .index {
+.issue-title .index {
   color: var(--color-text-light-2);
 }
 
-.repository.view.issue .issue-title .label {
+.issue-title .label {
   margin-right: 10px;
 }
 
-.repository.view.issue .issue-title .edit-zone {
+.issue-title .edit-zone {
   margin-top: 10px;
 }
 
@@ -913,6 +913,9 @@ td .commit-summary {
 
 .repository.view.issue .comment-list .ui.comments {
   max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
 
 .repository.view.issue .comment-list .comment > .content > div:first-child {
@@ -928,6 +931,11 @@ td .commit-summary {
 .repository.view.issue .comment-list .comment .comment-container {
   border: 1px solid var(--color-secondary);
   border-radius: var(--border-radius);
+  background: var(--color-box-body);
+}
+
+.repository.view.issue .comment-list .conversation-holder .comment .comment-container {
+  border: none;
 }
 
 @media (max-width: 767.98px) {
@@ -1042,30 +1050,6 @@ td .commit-summary {
   margin-left: 42px;
 }
 
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
-  margin-top: 16px !important;
-  margin-bottom: -8px !important;
-  border-top: none !important;
-}
-
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
-  border: 1px solid;
-  padding: 5px 8px !important;
-  margin: 0 2px;
-  border-radius: var(--border-radius);
-  border-color: var(--color-secondary-dark-1) !important;
-}
-
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary {
-  background-color: var(--color-reaction-active-bg) !important;
-  border-color: var(--color-primary-alpha-80) !important;
-}
-
-.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
-  background-color: var(--color-reaction-hover-bg) !important;
-  border-color: var(--color-primary-alpha-80) !important;
-}
-
 .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
   margin: 0;
 }
@@ -1180,6 +1164,14 @@ td .commit-summary {
   font-size: 14px;
 }
 
+<<<<<<< HEAD
+.repository.compare.pull .title .issue-title {
+  margin-bottom: 0.5rem;
+}
+
+.repository.compare.pull .title .issue-title .index {
+  color: var(--color-text-light-2);
+||||||| 18dd9f9a3f
 .repository.compare.pull .title .issue-title {
   margin-bottom: 0.5rem;
 }
@@ -1188,6 +1180,10 @@ td .commit-summary {
   color: var(--color-text-light-2);
 }
 
+.repository .ui.dropdown.filter > .menu {
+  margin-top: 1px;
+}
+
 .repository.branches .commit-divergence .bar-group {
   position: relative;
   float: left;
@@ -1898,98 +1894,6 @@ td .commit-summary {
   border-bottom: 1px solid var(--color-warning-border);
 }
 
-.repository .segment.reactions.dropdown .menu,
-.repository .select-reaction.dropdown .menu {
-  right: 0 !important;
-  left: auto !important;
-  min-width: 170px;
-}
-
-.repository .segment.reactions.dropdown .menu > .header,
-.repository .select-reaction.dropdown .menu > .header {
-  margin: 0.75rem 0 0.5rem;
-}
-
-.repository .segment.reactions.dropdown .menu > .item,
-.repository .select-reaction.dropdown .menu > .item {
-  float: left;
-  margin: 4px;
-  font-size: 20px;
-  width: 34px;
-  height: 34px;
-  min-height: 0 !important;
-  border-radius: var(--border-radius);
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-}
-
-.repository .segment.reactions {
-  padding: 0;
-  display: flex;
-  border: none !important;
-  border-top: 1px solid var(--color-secondary) !important;
-  width: 100% !important;
-  max-width: 100% !important;
-  margin: 0 !important;
-  border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
-.repository .segment.reactions .ui.label {
-  max-height: 40px;
-  padding: 8px 16px !important;
-  display: flex !important;
-  align-items: center;
-  border: 0;
-  border-right: 1px solid;
-  border-radius: 0;
-  margin: 0;
-  font-size: 12px;
-  font-weight: var(--font-weight-normal);
-  border-color: var(--color-secondary) !important;
-  background: var(--color-reaction-bg);
-}
-
-.repository .segment.reactions .ui.label:first-of-type {
-  border-bottom-left-radius: 3px;
-}
-
-.repository .segment.reactions .ui.label.disabled {
-  cursor: default;
-  opacity: 1;
-}
-
-.repository .segment.reactions .ui.label.basic.primary {
-  color: var(--color-primary) !important;
-  background-color: var(--color-reaction-active-bg) !important;
-  border-color: var(--color-secondary-dark-1) !important;
-}
-
-.repository .segment.reactions .ui.label.basic:hover {
-  background-color: var(--color-reaction-hover-bg) !important;
-}
-
-.repository .segment.reactions .reaction-count {
-  margin-left: 0.5rem;
-}
-
-.repository .segment.reactions .select-reaction {
-  display: flex;
-  align-items: center;
-}
-
-.repository .segment.reactions .select-reaction a {
-  padding: 0 14px;
-}
-
-.repository .segment.reactions .select-reaction:not(.active) a {
-  display: none;
-}
-
-.repository .segment.reactions:hover .select-reaction a {
-  display: block;
-}
-
 .repository .ui.fluid.action.input .ui.search.action.input {
   flex: auto;
 }
@@ -2183,11 +2087,6 @@ td .commit-summary {
   padding: 10px 0 0;
 }
 
-.ui.vertical.menu .header.item {
-  font-size: 1.1em;
-  background: var(--color-box-header);
-}
-
 .comment:target .comment-container {
   border-color: var(--color-primary) !important;
   box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
@@ -2300,6 +2199,8 @@ td .commit-summary {
 .stats-table {
   display: table;
   width: 100%;
+  margin: 6px 0;
+  border-spacing: 2px;
 }
 
 .stats-table .table-cell {
@@ -2307,7 +2208,17 @@ td .commit-summary {
 }
 
 .stats-table .table-cell.tiny {
-  height: 0.5em;
+  height: 8px;
+}
+
+.stats-table .table-cell:first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+.stats-table .table-cell:last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
 }
 
 .labels-list {
diff --git a/web_src/css/repo/reactions.css b/web_src/css/repo/reactions.css
new file mode 100644
index 000000000000..8fe01af4f067
--- /dev/null
+++ b/web_src/css/repo/reactions.css
@@ -0,0 +1,70 @@
+.bottom-reactions {
+  display: flex;
+  gap: 6px;
+  margin: 0 1em 1em;
+}
+
+.timeline-item .conversation-holder .bottom-reactions {
+  margin: 1em 0 0 36px;
+  padding-bottom: 8px;
+}
+
+.bottom-reactions .ui.label {
+  padding: 5px 8px;
+  font-weight: var(--font-weight-normal);
+}
+
+.bottom-reactions .ui.label.primary {
+  background-color: var(--color-reaction-active-bg) !important;
+}
+
+.bottom-reactions .ui.label:hover {
+  background-color: var(--color-reaction-hover-bg) !important;
+}
+
+.bottom-reactions .ui.label.disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.bottom-reactions .ui.label .reaction {
+  font-size: 16px;
+  display: flex;
+}
+
+.bottom-reactions .ui.label .reaction img {
+  height: 16px;
+  aspect-ratio: 1;
+}
+
+.bottom-reactions .reaction-count {
+  margin-left: 4px;
+}
+
+.ui.dropdown.select-reaction .menu {
+  min-width: 170px; /* item-outer-width * 4 */
+}
+
+.ui.dropdown.select-reaction .menu > .item {
+  float: left;
+  margin: 4px;
+  font-size: 20px;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--border-radius);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bottom-reactions .select-reaction {
+  padding: 0 10px;
+}
+
+.bottom-reactions .select-reaction:not(.active) {
+  visibility: hidden;
+}
+
+.bottom-reactions:hover .select-reaction {
+  visibility: visible;
+}
diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css
index 49c00c4dad7a..7c404bdb30a0 100644
--- a/web_src/fomantic/build/semantic.css
+++ b/web_src/fomantic/build/semantic.css
@@ -9,7 +9,7 @@
  *
  */
 /*!
- * # Fomantic-UI - Button
+ * # Fomantic-UI - Dimmer
  * http://github.com/fomantic/Fomantic-UI/
  *
  *
@@ -19,6454 +19,2246 @@
  */
 
 /*******************************
-            Button
+            Dimmer
 *******************************/
 
-.ui.button {
-  cursor: pointer;
-  display: inline-block;
-  min-height: 1em;
-  outline: none;
-  border: none;
-  vertical-align: baseline;
-  background: #E0E1E2 none;
-  color: rgba(0, 0, 0, 0.6);
-  font-family: var(--fonts-regular);
-  margin: 0 0.25em 0 0;
-  padding: 0.78571429em 1.5em 0.78571429em;
-  text-transform: none;
-  text-shadow: none;
-  font-weight: 500;
-  line-height: 1em;
-  font-style: normal;
+.dimmable:not(body) {
+  position: relative;
+}
+
+.ui.dimmer {
+  display: none;
+  position: absolute;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100%;
+  height: 100%;
   text-align: center;
-  text-decoration: none;
-  border-radius: 0.28571429rem;
-  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+  vertical-align: middle;
+  padding: 1em;
+  background: rgba(0, 0, 0, 0.85);
+  opacity: 0;
+  line-height: 1;
+  animation-fill-mode: both;
+  animation-duration: 0.5s;
+  transition: background-color 0.5s linear;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
-  will-change: auto;
-  -webkit-tap-highlight-color: transparent;
+  will-change: opacity;
+  z-index: 1000;
+}
+
+/* Dimmer Content */
+
+.ui.dimmer > .content {
+  -webkit-user-select: text;
+  -moz-user-select: text;
+  user-select: text;
+  color: #FFFFFF;
+}
+
+/* Loose Coupling */
+
+.ui.segment > .ui.dimmer:not(.page) {
+  border-radius: inherit;
 }
 
+/* Scrollbars */
+
 /*******************************
             States
 *******************************/
 
-/*--------------
-      Hover
----------------*/
+/* Animating */
 
-.ui.button:hover {
-  background-color: #CACBCD;
-  background-image: none;
-  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-  color: rgba(0, 0, 0, 0.8);
+.animating.dimmable:not(body),
+.dimmed.dimmable:not(body) {
+  overflow: hidden;
 }
 
-.ui.button:hover .icon {
-  opacity: 0.85;
+/* Animating / Active / Visible */
+
+.dimmed.dimmable > .ui.animating.dimmer,
+.dimmed.dimmable > .ui.visible.dimmer,
+.ui.active.dimmer {
+  display: flex;
+  opacity: 1;
 }
 
-/*--------------
-      Focus
----------------*/
+/* Disabled */
 
-.ui.button:focus {
-  background-color: #CACBCD;
-  color: rgba(0, 0, 0, 0.8);
-  background-image: none;
-  box-shadow: '';
+.ui.disabled.dimmer {
+  width: 0 !important;
+  height: 0 !important;
 }
 
-.ui.button:focus .icon {
-  opacity: 0.85;
-}
+/*******************************
+           Variations
+*******************************/
 
 /*--------------
-      Down
----------------*/
+      Legacy
+  ---------------*/
 
-.ui.button:active,
-.ui.active.button:active {
-  background-color: #BABBBC;
-  background-image: '';
-  color: rgba(0, 0, 0, 0.9);
-  box-shadow: 0 0 0 1px transparent inset, none;
+/* Animating / Active / Visible */
+
+.dimmed.dimmable > .ui.animating.legacy.dimmer,
+.dimmed.dimmable > .ui.visible.legacy.dimmer,
+.ui.active.legacy.dimmer {
+  display: block;
 }
 
 /*--------------
-     Active
----------------*/
-
-.ui.active.button {
-  background-color: #C0C1C2;
-  background-image: none;
-  box-shadow: 0 0 0 1px transparent inset;
-  color: rgba(0, 0, 0, 0.95);
-}
+      Alignment
+  ---------------*/
 
-.ui.active.button:hover {
-  background-color: #C0C1C2;
-  background-image: none;
-  color: rgba(0, 0, 0, 0.95);
+.ui[class*="top aligned"].dimmer {
+  justify-content: flex-start;
 }
 
-.ui.active.button:active {
-  background-color: #C0C1C2;
-  background-image: none;
+.ui[class*="bottom aligned"].dimmer {
+  justify-content: flex-end;
 }
 
 /*--------------
-    Loading
----------------*/
-
-/* Specificity hack */
+        Page
+  ---------------*/
 
-.ui.loading.loading.loading.loading.loading.loading.button {
-  position: relative;
-  cursor: default;
-  text-shadow: none !important;
-  color: transparent;
-  opacity: 1;
-  pointer-events: auto;
-  transition: all 0s linear, opacity 0.1s ease;
+.ui.page.dimmer {
+  position: fixed;
+  transform-style: '';
+  perspective: 2000px;
+  transform-origin: center center;
 }
 
-.ui.loading.button:before {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  border-radius: 500rem;
-  border: 0.2em solid rgba(0, 0, 0, 0.15);
+.ui.page.dimmer.modals {
+  -moz-perspective: none;
 }
 
-.ui.loading.button:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  border-radius: 500rem;
-  animation: loader 0.6s infinite linear;
-  border: 0.2em solid currentColor;
-  color: #FFFFFF;
-  box-shadow: 0 0 0 1px transparent;
+body.animating.in.dimmable,
+body.dimmed.dimmable {
+  overflow: hidden;
 }
 
-.ui.labeled.icon.loading.button .icon {
-  background-color: transparent;
-  box-shadow: none;
+body.dimmable > .dimmer {
+  position: fixed;
 }
 
-.ui.basic.loading.button:not(.inverted):before {
-  border-color: rgba(0, 0, 0, 0.1);
-}
+/*--------------
+      Blurring
+  ---------------*/
 
-.ui.basic.loading.button:not(.inverted):after {
-  border-color: #767676;
+.blurring.dimmable > :not(.dimmer) {
+  filter: initial;
+  transition: 800ms filter ease;
 }
 
-/*-------------------
-        Disabled
-  --------------------*/
-
-.ui.buttons .disabled.button:not(.basic),
-.ui.disabled.button,
-.ui.button:disabled,
-.ui.disabled.button:hover,
-.ui.disabled.active.button {
-  cursor: default;
-  opacity: var(--opacity-disabled) !important;
-  background-image: none;
-  box-shadow: none;
-  pointer-events: none !important;
+.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
+  filter: blur(5px) grayscale(0.7);
 }
 
-/* Basic Group With Disabled */
+/* Dimmer Color */
 
-.ui.basic.buttons .ui.disabled.button {
-  border-color: rgba(34, 36, 38, 0.5);
+.blurring.dimmable > .dimmer {
+  background: rgba(0, 0, 0, 0.6);
 }
 
-/*******************************
-             Types
-*******************************/
+.blurring.dimmable > .inverted.dimmer {
+  background: rgba(255, 255, 255, 0.6);
+}
 
-/*-------------------
-      Labeled Button
-  --------------------*/
+/*--------------
+      Aligned
+  ---------------*/
 
-.ui.labeled.button:not(.icon) {
-  display: inline-flex;
-  flex-direction: row;
-  background: none;
-  padding: 0 !important;
-  border: none;
-  box-shadow: none;
+.ui.dimmer > .top.aligned.content > * {
+  vertical-align: top;
 }
 
-.ui.labeled.button > .button {
-  margin: 0;
+.ui.dimmer > .bottom.aligned.content > * {
+  vertical-align: bottom;
 }
 
-.ui.labeled.button > .label {
-  display: flex;
-  align-items: center;
-  margin: 0 0 0 -1px !important;
-  font-size: 1em;
-  padding: '';
-  border-color: rgba(34, 36, 38, 0.15);
+/*--------------
+      Shades
+  ---------------*/
+
+.medium.medium.medium.medium.medium.dimmer {
+  background: rgba(0, 0, 0, 0.65);
 }
 
-/* Tag */
+.light.light.light.light.light.dimmer {
+  background: rgba(0, 0, 0, 0.45);
+}
 
-.ui.labeled.button > .tag.label:before {
-  width: 1.85em;
-  height: 1.85em;
+.very.light.light.light.light.dimmer {
+  background: rgba(0, 0, 0, 0.25);
 }
 
-/* Right */
+/*--------------
+       Simple
+  ---------------*/
 
-.ui.labeled.button:not([class*="left labeled"]) > .button {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
+/* Displays without javascript */
 
-.ui.labeled.button:not([class*="left labeled"]) > .label {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.ui.simple.dimmer {
+  display: block;
+  overflow: hidden;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  z-index: -100;
+  background: rgba(0, 0, 0, 0);
 }
 
-/* Left Side */
+.dimmed.dimmable > .ui.simple.dimmer {
+  overflow: visible;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  z-index: 1;
+}
 
-.ui[class*="left labeled"].button > .button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.ui.simple.inverted.dimmer {
+  background: rgba(255, 255, 255, 0);
 }
 
-.ui[class*="left labeled"].button > .label {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.dimmed.dimmable > .ui.simple.inverted.dimmer {
+  background: rgba(255, 255, 255, 0.85);
 }
 
 /*--------------
-     Icon
----------------*/
+       Partially
+  ----------------*/
 
-.ui.button > .icon:not(.button) {
+.ui[class*="top dimmer"],
+.ui[class*="center dimmer"],
+.ui[class*="bottom dimmer"] {
   height: auto;
-  opacity: 0.8;
-  transition: opacity 0.1s ease;
-  color: '';
 }
 
-.ui.button:not(.icon) > .icon:not(.button):not(.dropdown),
-.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) {
-  margin: 0 0.42857143em 0 -0.21428571em;
-  vertical-align: baseline;
+.ui[class*="bottom dimmer"] {
+  top: auto !important;
+  bottom: 0;
 }
 
-.ui.button:not(.icon) > .icons:not(.button):not(.dropdown) > .icon {
-  vertical-align: baseline;
+.ui[class*="center dimmer"] {
+  top: 50% !important;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(calc(-50% - 0.5px));
 }
 
-.ui.button:not(.icon) > .right.icon:not(.button):not(.dropdown) {
-  margin: 0 -0.21428571em 0 0.42857143em;
+.ui.segment > .ui.ui[class*="top dimmer"] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-/*******************************
-           Variations
-*******************************/
+.ui.segment > .ui.ui[class*="center dimmer"] {
+  border-radius: 0;
+}
 
-/*-------------------
-         Floated
-  --------------------*/
-
-.ui[class*="left floated"].buttons,
-.ui[class*="left floated"].button {
-  float: left;
-  margin-left: 0;
-  margin-right: 0.25em;
+.ui.segment > .ui.ui[class*="bottom dimmer"] {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
-.ui[class*="right floated"].buttons,
-.ui[class*="right floated"].button {
-  float: right;
-  margin-right: 0;
-  margin-left: 0.25em;
+.ui[class*="center dimmer"].transition[class*="fade up"].in {
+  animation-name: fadeInUpCenter;
 }
 
-/*-------------------
-         Compact
-  --------------------*/
-
-.ui.compact.buttons .button,
-.ui.compact.button {
-  padding: 0.58928571em 1.125em 0.58928571em;
+.ui[class*="center dimmer"].transition[class*="fade down"].in {
+  animation-name: fadeInDownCenter;
 }
 
-.ui.compact.icon.buttons .button,
-.ui.compact.icon.button {
-  padding: 0.58928571em 0.58928571em 0.58928571em;
+.ui[class*="center dimmer"].transition[class*="fade up"].out {
+  animation-name: fadeOutUpCenter;
 }
 
-.ui.compact.labeled.icon.buttons .button,
-.ui.compact.labeled.icon.button {
-  padding: 0.58928571em 3.69642857em 0.58928571em;
+.ui[class*="center dimmer"].transition[class*="fade down"].out {
+  animation-name: fadeOutDownCenter;
 }
 
-.ui.compact.labeled.icon.buttons .button > .icon,
-.ui.compact.labeled.icon.button > .icon {
-  padding: 0.58928571em 0 0.58928571em 0;
+.ui[class*="center dimmer"].bounce.transition {
+  animation-name: bounceCenter;
 }
 
-/*-------------------
-        Sizes
---------------------*/
+@keyframes fadeInUpCenter {
+  0% {
+    opacity: 0;
+    transform: translateY(-40%);
+    -webkit-transform: translateY(calc(-40% - 0.5px));
+  }
 
-.ui.buttons .button,
-.ui.buttons .or,
-.ui.button {
-  font-size: 1rem;
+  100% {
+    opacity: 1;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(calc(-50% - 0.5px));
+  }
 }
 
-.ui.mini.buttons .dropdown,
-.ui.mini.buttons .dropdown .menu > .item,
-.ui.mini.buttons .button,
-.ui.mini.buttons .or,
-.ui.ui.ui.ui.mini.button {
-  font-size: 0.78571429rem;
-}
+@keyframes fadeInDownCenter {
+  0% {
+    opacity: 0;
+    transform: translateY(-60%);
+    -webkit-transform: translateY(calc(-60% - 0.5px));
+  }
 
-.ui.tiny.buttons .dropdown,
-.ui.tiny.buttons .dropdown .menu > .item,
-.ui.tiny.buttons .button,
-.ui.tiny.buttons .or,
-.ui.ui.ui.ui.tiny.button {
-  font-size: 0.85714286rem;
+  100% {
+    opacity: 1;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(calc(-50% - 0.5px));
+  }
 }
 
-.ui.small.buttons .dropdown,
-.ui.small.buttons .dropdown .menu > .item,
-.ui.small.buttons .button,
-.ui.small.buttons .or,
-.ui.ui.ui.ui.small.button {
-  font-size: 0.92857143rem;
-}
+@keyframes fadeOutUpCenter {
+  0% {
+    opacity: 1;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(calc(-50% - 0.5px));
+  }
 
-.ui.large.buttons .dropdown,
-.ui.large.buttons .dropdown .menu > .item,
-.ui.large.buttons .button,
-.ui.large.buttons .or,
-.ui.ui.ui.ui.large.button {
-  font-size: 1.14285714rem;
+  100% {
+    opacity: 0;
+    transform: translateY(-45%);
+    -webkit-transform: translateY(calc(-45% - 0.5px));
+  }
 }
 
-.ui.big.buttons .dropdown,
-.ui.big.buttons .dropdown .menu > .item,
-.ui.big.buttons .button,
-.ui.big.buttons .or,
-.ui.ui.ui.ui.big.button {
-  font-size: 1.28571429rem;
-}
+@keyframes fadeOutDownCenter {
+  0% {
+    opacity: 1;
+    transform: translateY(-50%);
+    -webkit-transform: translateY(calc(-50% - 0.5px));
+  }
 
-.ui.huge.buttons .dropdown,
-.ui.huge.buttons .dropdown .menu > .item,
-.ui.huge.buttons .button,
-.ui.huge.buttons .or,
-.ui.ui.ui.ui.huge.button {
-  font-size: 1.42857143rem;
+  100% {
+    opacity: 0;
+    transform: translateY(-55%);
+    -webkit-transform: translateY(calc(-55% - 0.5px));
+  }
 }
 
-.ui.massive.buttons .dropdown,
-.ui.massive.buttons .dropdown .menu > .item,
-.ui.massive.buttons .button,
-.ui.massive.buttons .or,
-.ui.ui.ui.ui.massive.button {
-  font-size: 1.71428571rem;
-}
+@keyframes bounceCenter {
+  0%, 20%, 50%, 80%, 100% {
+    transform: translateY(-50%);
+    -webkit-transform: translateY(calc(-50% - 0.5px));
+  }
 
-/*--------------
-    Icon Only
----------------*/
+  40% {
+    transform: translateY(calc(-50% - 30px));
+  }
 
-.ui.icon.buttons .button,
-.ui.icon.button:not(.animated):not(.compact) {
-  padding: 0.78571429em 0.78571429em 0.78571429em;
+  60% {
+    transform: translateY(calc(-50% - 15px));
+  }
 }
 
-.ui.animated.icon.button > .content > .icon,
-.ui.icon.buttons .button > .icon,
-.ui.icon.button > .icon {
-  opacity: 0.9;
-  margin: 0 !important;
-  vertical-align: top;
-}
+/*******************************
+         Theme Overrides
+*******************************/
 
-.ui.animated.button > .content > .icon {
-  vertical-align: top;
-}
+/*******************************
+        User Overrides
+*******************************/
+/*!
+ * # Fomantic-UI - Dropdown
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
 
-/*-------------------
-          Basic
-  --------------------*/
+/*******************************
+            Dropdown
+*******************************/
 
-.ui.basic.buttons .button,
-.ui.basic.button {
-  background: transparent none;
-  color: rgba(0, 0, 0, 0.6);
-  font-weight: normal;
-  border-radius: 0.28571429rem;
-  text-transform: none;
-  text-shadow: none !important;
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
+.ui.dropdown {
+  cursor: pointer;
+  position: relative;
+  display: inline-block;
+  outline: none;
+  text-align: left;
+  transition: box-shadow 0.1s ease, width 0.1s ease;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.ui.basic.buttons {
-  box-shadow: none;
+/*******************************
+            Content
+*******************************/
+
+/*--------------
+      Menu
+---------------*/
+
+.ui.dropdown .menu {
+  cursor: auto;
+  position: absolute;
+  display: none;
+  outline: none;
+  top: 100%;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  margin: 0;
+  padding: 0 0;
+  background: #FFFFFF;
+  font-size: 1em;
+  text-shadow: none;
+  text-align: left;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
   border: 1px solid rgba(34, 36, 38, 0.15);
   border-radius: 0.28571429rem;
+  transition: opacity 0.1s ease;
+  z-index: 11;
+  will-change: transform, opacity;
 }
 
-.ui.basic.buttons .button {
-  border-radius: 0;
+.ui.dropdown .menu > * {
+  white-space: nowrap;
 }
 
-.ui.basic.buttons .button:hover,
-.ui.basic.button:hover {
-  background: #FFFFFF;
-  color: rgba(0, 0, 0, 0.8);
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+/*--------------
+  Hidden Input
+---------------*/
+
+.ui.dropdown > input:not(.search):first-child,
+.ui.dropdown > select {
+  display: none !important;
 }
 
-.ui.basic.buttons .button:focus,
-.ui.basic.button:focus {
-  background: #FFFFFF;
-  color: rgba(0, 0, 0, 0.8);
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+/*--------------
+ Dropdown Icon
+---------------*/
+
+.ui.dropdown:not(.labeled) > .dropdown.icon {
+  position: relative;
+  width: auto;
+  font-size: 0.85714286em;
+  margin: 0 0 0 1em;
 }
 
-.ui.basic.buttons .button:active,
-.ui.basic.button:active {
-  background: #F8F8F8;
-  color: rgba(0, 0, 0, 0.9);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset;
+.ui.dropdown .menu > .item .dropdown.icon {
+  width: auto;
+  float: right;
+  margin: 0em 0 0 1em;
 }
 
-.ui.basic.buttons .active.button,
-.ui.basic.active.button {
-  background: rgba(0, 0, 0, 0.05);
-  box-shadow: '';
-  color: rgba(0, 0, 0, 0.95);
+.ui.dropdown .menu > .item .dropdown.icon + .text {
+  margin-right: 1em;
 }
 
-.ui.basic.buttons .active.button:hover,
-.ui.basic.active.button:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+/*--------------
+      Text
+---------------*/
+
+.ui.dropdown > .text {
+  display: inline-block;
+  transition: none;
 }
 
-/* Vertical */
+/*--------------
+    Menu Item
+---------------*/
 
-.ui.basic.buttons .button:hover {
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.35) inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset inset;
+.ui.dropdown .menu > .item {
+  position: relative;
+  cursor: pointer;
+  display: block;
+  border: none;
+  height: auto;
+  min-height: 2.57142857rem;
+  text-align: left;
+  border-top: none;
+  line-height: 1em;
+  font-size: 1rem;
+  color: rgba(0, 0, 0, 0.87);
+  padding: 0.78571429rem 1.14285714rem !important;
+  text-transform: none;
+  font-weight: normal;
+  box-shadow: none;
+  -webkit-touch-callout: none;
 }
 
-.ui.basic.buttons .button:active {
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px 0 rgba(34, 36, 38, 0.15) inset inset;
+.ui.dropdown .menu > .item:first-child {
+  border-top-width: 0;
 }
 
-.ui.basic.buttons .active.button {
-  box-shadow: '';
+.ui.dropdown .menu > .item.vertical {
+  display: flex;
+  flex-direction: column-reverse;
 }
 
-/* Basic Group */
+/*--------------
+  Floated Content
+---------------*/
 
-.ui.basic.buttons .button {
-  border-left: 1px solid rgba(34, 36, 38, 0.15);
-  box-shadow: none;
+.ui.dropdown > .text > [class*="right floated"],
+.ui.dropdown .menu .item > [class*="right floated"] {
+  float: right !important;
+  margin-right: 0 !important;
+  margin-left: 1em !important;
 }
 
-.ui.basic.vertical.buttons .button {
-  border-left: none;
-  border-left-width: 0;
-  border-top: 1px solid rgba(34, 36, 38, 0.15);
+.ui.dropdown > .text > [class*="left floated"],
+.ui.dropdown .menu .item > [class*="left floated"] {
+  float: left !important;
+  margin-left: 0 !important;
+  margin-right: 1em !important;
 }
 
-.ui.basic.vertical.buttons .button:first-child {
-  border-top-width: 0;
+.ui.dropdown .menu .item > i.icon.floated,
+.ui.dropdown .menu .item > .flag.floated,
+.ui.dropdown .menu .item > .image.floated,
+.ui.dropdown .menu .item > img.floated {
+  margin-top: 0em;
 }
 
 /*--------------
-    Labeled Icon
-  ---------------*/
+  Menu Divider
+---------------*/
 
-.ui.labeled.icon.buttons .button,
-.ui.labeled.icon.button {
-  position: relative;
-  padding-left: 4.07142857em !important;
-  padding-right: 1.5em !important;
+.ui.dropdown .menu > .header {
+  margin: 1rem 0 0.75rem;
+  padding: 0 1.14285714rem;
+  font-weight: 500;
+  text-transform: uppercase;
 }
 
-/* Left Labeled */
-
-.ui.labeled.icon.buttons > .button > .icon,
-.ui.labeled.icon.button > .icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  line-height: 1;
-  border-radius: 0;
-  border-top-left-radius: inherit;
-  border-bottom-left-radius: inherit;
-  text-align: center;
-  animation: none;
-  padding: 0.78571429em 0 0.78571429em 0;
-  margin: 0;
-  width: 2.57142857em;
-  background-color: rgba(0, 0, 0, 0.05);
-  color: '';
-  box-shadow: -1px 0 0 0 transparent inset;
+.ui.dropdown .menu > .header:not(.ui) {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 0.78571429em;
 }
 
-/* Right Labeled */
-
-.ui[class*="right labeled"].icon.button {
-  padding-right: 4.07142857em !important;
-  padding-left: 1.5em !important;
+.ui.dropdown .menu > .divider {
+  border-top: 1px solid rgba(34, 36, 38, 0.1);
+  height: 0;
+  margin: 0.5em 0;
 }
 
-.ui[class*="right labeled"].icon.button > .icon {
-  left: auto;
-  right: 0;
-  border-radius: 0;
-  border-top-right-radius: inherit;
-  border-bottom-right-radius: inherit;
-  box-shadow: 1px 0 0 0 transparent inset;
+.ui.dropdown .menu > .horizontal.divider {
+  border-top: none;
 }
 
-.ui.labeled.icon.buttons > .button > .icon:before,
-.ui.labeled.icon.button > .icon:before,
-.ui.labeled.icon.buttons > .button > .icon:after,
-.ui.labeled.icon.button > .icon:after {
-  display: block;
-  position: relative;
-  width: 100%;
-  top: 0;
-  text-align: center;
+.ui.dropdown.dropdown .menu > .input {
+  width: auto;
+  display: flex;
+  margin: 1.14285714rem 0.78571429rem;
+  min-width: 10rem;
 }
 
-.ui.labeled.icon.buttons .button > .icon {
-  border-radius: 0;
+.ui.dropdown .menu > .header + .input {
+  margin-top: 0;
 }
 
-.ui.labeled.icon.buttons .button:first-child > .icon {
-  border-top-left-radius: 0.28571429rem;
-  border-bottom-left-radius: 0.28571429rem;
+.ui.dropdown .menu > .input:not(.transparent) input {
+  padding: 0.5em 1em;
 }
 
-.ui.labeled.icon.buttons .button:last-child > .icon {
-  border-top-right-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.28571429rem;
+.ui.dropdown .menu > .input:not(.transparent) .button,
+.ui.dropdown .menu > .input:not(.transparent) i.icon,
+.ui.dropdown .menu > .input:not(.transparent) .label {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
 }
 
-.ui.vertical.labeled.icon.buttons .button:first-child > .icon {
-  border-radius: 0;
-  border-top-left-radius: 0.28571429rem;
+/*-----------------
+  Item Description
+-------------------*/
+
+.ui.dropdown > .text > .description,
+.ui.dropdown .menu > .item > .description {
+  float: right;
+  margin: 0 0 0 1em;
+  color: rgba(0, 0, 0, 0.4);
 }
 
-.ui.vertical.labeled.icon.buttons .button:last-child > .icon {
-  border-radius: 0;
-  border-bottom-left-radius: 0.28571429rem;
+.ui.dropdown .menu > .item.vertical > .description {
+  margin: 0;
 }
 
-/* Loading Icon in Labeled Button */
+/*-----------------
+      Item Text
+-------------------*/
 
-.ui.labeled.icon.button > .loading.icon:before {
-  animation: loader 2s linear infinite;
+.ui.dropdown .menu > .item.vertical > .text {
+  margin-bottom: 0.25em;
 }
 
-/*--------------
-       Toggle
-  ---------------*/
-
-/* Toggle (Modifies active state to give affordances) */
+/*-----------------
+       Message
+-------------------*/
 
-.ui.toggle.buttons .active.button,
-.ui.buttons .button.toggle.active,
-.ui.button.toggle.active {
-  background-color: #21BA45;
-  box-shadow: none;
-  text-shadow: none;
-  color: #FFFFFF;
+.ui.dropdown .menu > .message {
+  padding: 0.78571429rem 1.14285714rem;
+  font-weight: normal;
 }
 
-.ui.button.toggle.active:hover {
-  background-color: #16ab39;
-  text-shadow: none;
-  color: #FFFFFF;
+.ui.dropdown .menu > .message:not(.ui) {
+  color: rgba(0, 0, 0, 0.4);
 }
 
 /*--------------
-      Circular
-  ---------------*/
-
-.ui.circular.button {
-  border-radius: 10em;
-}
+    Sub Menu
+---------------*/
 
-.ui.circular.button > .icon {
-  width: 1em;
-  vertical-align: baseline;
+.ui.dropdown .menu .menu {
+  top: 0;
+  left: 100%;
+  right: auto;
+  margin: 0 -0.5em !important;
+  border-radius: 0.28571429rem !important;
+  z-index: 21 !important;
 }
 
-/*-------------------
-        Or Buttons
-  --------------------*/
+/* Hide Arrow */
 
-.ui.buttons .or {
-  position: relative;
-  width: 0.3em;
-  height: 2.57142857em;
-  z-index: 3;
+.ui.dropdown .menu .menu:after {
+  display: none;
 }
 
-.ui.buttons .or:before {
-  position: absolute;
-  text-align: center;
-  border-radius: 500rem;
-  content: 'or';
-  top: 50%;
-  left: 50%;
-  background-color: #FFFFFF;
-  text-shadow: none;
-  margin-top: -0.89285714em;
-  margin-left: -0.89285714em;
-  width: 1.78571429em;
-  height: 1.78571429em;
-  line-height: 1.78571429em;
-  color: rgba(0, 0, 0, 0.4);
-  font-style: normal;
-  font-weight: 500;
-  box-shadow: 0 0 0 1px transparent inset;
-}
+/*--------------
+   Sub Elements
+---------------*/
 
-.ui.buttons .or[data-text]:before {
-  content: attr(data-text);
-}
+/* Icons / Flags / Labels / Image */
 
-/* Fluid Or */
+.ui.dropdown > .text > i.icon,
+.ui.dropdown > .text > .label,
+.ui.dropdown > .text > .flag,
+.ui.dropdown > .text > img,
+.ui.dropdown > .text > .image {
+  margin-top: 0em;
+}
 
-.ui.fluid.buttons .or {
-  width: 0 !important;
+.ui.dropdown .menu > .item > i.icon,
+.ui.dropdown .menu > .item > .label,
+.ui.dropdown .menu > .item > .flag,
+.ui.dropdown .menu > .item > .image,
+.ui.dropdown .menu > .item > img {
+  margin-top: 0em;
 }
 
-.ui.fluid.buttons .or:after {
-  display: none;
+.ui.dropdown > .text > i.icon,
+.ui.dropdown > .text > .label,
+.ui.dropdown > .text > .flag,
+.ui.dropdown > .text > img,
+.ui.dropdown > .text > .image,
+.ui.dropdown .menu > .item > i.icon,
+.ui.dropdown .menu > .item > .label,
+.ui.dropdown .menu > .item > .flag,
+.ui.dropdown .menu > .item > .image,
+.ui.dropdown .menu > .item > img {
+  margin-left: 0;
+  float: none;
+  margin-right: 0.78571429rem;
 }
 
-/*-------------------
-          Fluid
-  --------------------*/
+/*--------------
+     Image
+---------------*/
 
-.ui.fluid.buttons,
-.ui.fluid.button {
-  width: 100%;
+.ui.dropdown > .text > img,
+.ui.dropdown > .text > .image:not(.icon),
+.ui.dropdown .menu > .item > .image:not(.icon),
+.ui.dropdown .menu > .item > img {
+  display: inline-block;
+  vertical-align: top;
+  width: auto;
+  margin-top: -0.5em;
+  margin-bottom: -0.5em;
+  max-height: 2em;
 }
 
-.ui.fluid.button {
-  display: block;
-}
+/*******************************
+            Coupling
+*******************************/
 
-.ui.two.buttons {
-  width: 100%;
-}
+/*--------------
+      Menu
+---------------*/
 
-.ui.two.buttons > .button {
-  width: 50%;
-}
+/* Remove Menu Item Divider */
 
-.ui.three.buttons {
-  width: 100%;
+.ui.dropdown .ui.menu > .item:before,
+.ui.menu .ui.dropdown .menu > .item:before {
+  display: none;
 }
 
-.ui.three.buttons > .button {
-  width: 33.333%;
-}
+/* Prevent Menu Item Border */
 
-.ui.four.buttons {
-  width: 100%;
+.ui.menu .ui.dropdown .menu .active.item {
+  border-left: none;
 }
 
-.ui.four.buttons > .button {
-  width: 25%;
-}
+/* Automatically float dropdown menu right on last menu item */
 
-.ui.five.buttons {
-  width: 100%;
+.ui.menu .right.menu .dropdown:last-child > .menu:not(.left),
+.ui.menu .right.dropdown.item > .menu:not(.left),
+.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
+  left: auto;
+  right: 0;
 }
 
-.ui.five.buttons > .button {
-  width: 20%;
-}
+/*--------------
+        Label
+  ---------------*/
 
-.ui.six.buttons {
-  width: 100%;
-}
+/* Dropdown Menu */
 
-.ui.six.buttons > .button {
-  width: 16.666%;
+.ui.label.dropdown .menu {
+  min-width: 100%;
 }
 
-.ui.seven.buttons {
-  width: 100%;
-}
+/*--------------
+       Button
+  ---------------*/
 
-.ui.seven.buttons > .button {
-  width: 14.285%;
-}
+/* No Margin On Icon Button */
 
-.ui.eight.buttons {
-  width: 100%;
+.ui.dropdown.icon.button > .dropdown.icon {
+  margin: 0;
 }
 
-.ui.eight.buttons > .button {
-  width: 12.5%;
+.ui.button.dropdown .menu {
+  min-width: 100%;
 }
 
-.ui.nine.buttons {
-  width: 100%;
-}
+/*******************************
+              Types
+*******************************/
 
-.ui.nine.buttons > .button {
-  width: 11.11%;
+select.ui.dropdown {
+  height: 38px;
+  padding: 0.5em;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  visibility: visible;
 }
 
-.ui.ten.buttons {
-  width: 100%;
-}
+/*--------------
+      Selection
+  ---------------*/
 
-.ui.ten.buttons > .button {
-  width: 10%;
-}
+/* Displays like a select box */
 
-.ui.eleven.buttons {
-  width: 100%;
+.ui.selection.dropdown {
+  cursor: pointer;
+  word-wrap: break-word;
+  line-height: 1em;
+  white-space: normal;
+  outline: 0;
+  transform: rotateZ(0deg);
+  min-width: 14em;
+  min-height: 2.71428571em;
+  background: #FFFFFF;
+  display: inline-block;
+  padding: 0.78571429em 3.2em 0.78571429em 1em;
+  color: rgba(0, 0, 0, 0.87);
+  box-shadow: none;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 0.28571429rem;
+  transition: box-shadow 0.1s ease, width 0.1s ease;
 }
 
-.ui.eleven.buttons > .button {
-  width: 9.09%;
+.ui.selection.dropdown.visible,
+.ui.selection.dropdown.active {
+  z-index: 10;
 }
 
-.ui.twelve.buttons {
-  width: 100%;
-}
-
-.ui.twelve.buttons > .button {
-  width: 8.3333%;
-}
-
-/* Fluid Vertical Buttons */
-
-.ui.fluid.vertical.buttons,
-.ui.fluid.vertical.buttons > .button {
-  display: flex;
+.ui.selection.dropdown > .search.icon,
+.ui.selection.dropdown > .delete.icon,
+.ui.selection.dropdown > .dropdown.icon {
+  cursor: pointer;
+  position: absolute;
   width: auto;
-  justify-content: center;
-}
-
-.ui.two.vertical.buttons > .button {
-  height: 50%;
+  height: auto;
+  line-height: 1.21428571em;
+  top: 0.78571429em;
+  right: 1em;
+  z-index: 3;
+  margin: -0.78571429em;
+  padding: 0.91666667em;
+  opacity: 0.8;
+  transition: opacity 0.1s ease;
 }
 
-.ui.three.vertical.buttons > .button {
-  height: 33.333%;
-}
+/* Compact */
 
-.ui.four.vertical.buttons > .button {
-  height: 25%;
+.ui.compact.selection.dropdown {
+  min-width: 0;
 }
 
-.ui.five.vertical.buttons > .button {
-  height: 20%;
-}
+/*  Selection Menu */
 
-.ui.six.vertical.buttons > .button {
-  height: 16.666%;
+.ui.selection.dropdown .menu {
+  overflow-x: hidden;
+  overflow-y: auto;
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
+  border-top-width: 0 !important;
+  width: auto;
+  outline: none;
+  margin: 0 -1px;
+  min-width: calc(100% + 2px);
+  width: calc(100% + 2px);
+  border-radius: 0 0 0.28571429rem 0.28571429rem;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
+  transition: opacity 0.1s ease;
 }
 
-.ui.seven.vertical.buttons > .button {
-  height: 14.285%;
+.ui.selection.dropdown .menu:after,
+.ui.selection.dropdown .menu:before {
+  display: none;
 }
 
-.ui.eight.vertical.buttons > .button {
-  height: 12.5%;
-}
+/*--------------
+      Message
+  ---------------*/
 
-.ui.nine.vertical.buttons > .button {
-  height: 11.11%;
+.ui.selection.dropdown .menu > .message {
+  padding: 0.78571429rem 1.14285714rem;
 }
 
-.ui.ten.vertical.buttons > .button {
-  height: 10%;
-}
+@media only screen and (max-width: 767.98px) {
+  .ui.selection.dropdown.short .menu {
+    max-height: 6.01071429rem;
+  }
 
-.ui.eleven.vertical.buttons > .button {
-  height: 9.09%;
-}
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 4.00714286rem;
+  }
 
-.ui.twelve.vertical.buttons > .button {
-  height: 8.3333%;
-}
+  .ui.selection.dropdown .menu {
+    max-height: 8.01428571rem;
+  }
 
-/*-------------------
-       Colors
---------------------*/
+  .ui.selection.dropdown.long .menu {
+    max-height: 16.02857143rem;
+  }
 
-.ui.primary.buttons .button,
-.ui.primary.button {
-  background-color: #2185D0;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+  .ui.selection.dropdown[class*="very long"] .menu {
+    max-height: 24.04285714rem;
+  }
 }
 
-.ui.primary.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+@media only screen and (min-width: 768px) {
+  .ui.selection.dropdown.short .menu {
+    max-height: 8.01428571rem;
+  }
 
-.ui.primary.buttons .button:hover,
-.ui.primary.button:hover {
-  background-color: #1678c2;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 5.34285714rem;
+  }
 
-.ui.primary.buttons .button:focus,
-.ui.primary.button:focus {
-  background-color: #0d71bb;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+  .ui.selection.dropdown .menu {
+    max-height: 10.68571429rem;
+  }
 
-.ui.primary.buttons .button:active,
-.ui.primary.button:active {
-  background-color: #1a69a4;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+  .ui.selection.dropdown.long .menu {
+    max-height: 21.37142857rem;
+  }
 
-.ui.primary.buttons .active.button,
-.ui.primary.buttons .active.button:active,
-.ui.primary.active.button,
-.ui.primary.button .active.button:active {
-  background-color: #1279c6;
-  color: #FFFFFF;
-  text-shadow: none;
+  .ui.selection.dropdown[class*="very long"] .menu {
+    max-height: 32.05714286rem;
+  }
 }
 
-/* Basic */
-
-.ui.basic.primary.buttons .button,
-.ui.basic.primary.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #2185D0 inset;
-  color: #2185D0;
-}
+@media only screen and (min-width: 992px) {
+  .ui.selection.dropdown.short .menu {
+    max-height: 12.02142857rem;
+  }
 
-.ui.basic.primary.buttons .button:hover,
-.ui.basic.primary.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #1678c2 inset;
-  color: #1678c2;
-}
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 8.01428571rem;
+  }
 
-.ui.basic.primary.buttons .button:focus,
-.ui.basic.primary.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #0d71bb inset;
-  color: #1678c2;
-}
+  .ui.selection.dropdown .menu {
+    max-height: 16.02857143rem;
+  }
 
-.ui.basic.primary.buttons .active.button,
-.ui.basic.primary.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #1279c6 inset;
-  color: #1a69a4;
-}
+  .ui.selection.dropdown.long .menu {
+    max-height: 32.05714286rem;
+  }
 
-.ui.basic.primary.buttons .button:active,
-.ui.basic.primary.button:active {
-  box-shadow: 0 0 0 1px #1a69a4 inset;
-  color: #1a69a4;
+  .ui.selection.dropdown[class*="very long"] .menu {
+    max-height: 48.08571429rem;
+  }
 }
 
-.ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) {
-  margin-left: -1px;
-}
+@media only screen and (min-width: 1920px) {
+  .ui.selection.dropdown.short .menu {
+    max-height: 16.02857143rem;
+  }
 
-.ui.secondary.buttons .button,
-.ui.secondary.button {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
+  .ui.selection.dropdown[class*="very short"] .menu {
+    max-height: 10.68571429rem;
+  }
 
-.ui.secondary.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+  .ui.selection.dropdown .menu {
+    max-height: 21.37142857rem;
+  }
 
-.ui.secondary.buttons .button:hover,
-.ui.secondary.button:hover {
-  background-color: #27292a;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+  .ui.selection.dropdown.long .menu {
+    max-height: 42.74285714rem;
+  }
 
-.ui.secondary.buttons .button:focus,
-.ui.secondary.button:focus {
-  background-color: #2e3032;
-  color: #FFFFFF;
-  text-shadow: none;
+  .ui.selection.dropdown[class*="very long"] .menu {
+    max-height: 64.11428571rem;
+  }
 }
 
-.ui.secondary.buttons .button:active,
-.ui.secondary.button:active {
-  background-color: #343637;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Menu Item */
 
-.ui.secondary.buttons .active.button,
-.ui.secondary.buttons .active.button:active,
-.ui.secondary.active.button,
-.ui.secondary.button .active.button:active {
-  background-color: #27292a;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.selection.dropdown .menu > .item {
+  border-top: 1px solid #FAFAFA;
+  padding: 0.78571429rem 1.14285714rem !important;
+  white-space: normal;
+  word-wrap: normal;
 }
 
-/* Basic */
-
-.ui.basic.secondary.buttons .button,
-.ui.basic.secondary.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #1B1C1D inset;
-  color: #1B1C1D;
-}
+/* User Item */
 
-.ui.basic.secondary.buttons .button:hover,
-.ui.basic.secondary.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #27292a inset;
-  color: #27292a;
+.ui.selection.dropdown .menu > .hidden.addition.item {
+  display: none;
 }
 
-.ui.basic.secondary.buttons .button:focus,
-.ui.basic.secondary.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #2e3032 inset;
-  color: #27292a;
-}
+/* Hover */
 
-.ui.basic.secondary.buttons .active.button,
-.ui.basic.secondary.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #27292a inset;
-  color: #343637;
+.ui.selection.dropdown:hover {
+  border-color: rgba(34, 36, 38, 0.35);
+  box-shadow: none;
 }
 
-.ui.basic.secondary.buttons .button:active,
-.ui.basic.secondary.button:active {
-  box-shadow: 0 0 0 1px #343637 inset;
-  color: #343637;
-}
+/* Active */
 
-.ui.buttons:not(.vertical) > .basic.secondary.button:not(:first-child) {
-  margin-left: -1px;
+.ui.selection.active.dropdown {
+  border-color: #96C8DA;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
 
-.ui.red.buttons .button,
-.ui.red.button {
-  background-color: #DB2828;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.selection.active.dropdown .menu {
+  border-color: #96C8DA;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
 
-.ui.red.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+/* Focus */
 
-.ui.red.buttons .button:hover,
-.ui.red.button:hover {
-  background-color: #d01919;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.selection.dropdown:focus {
+  border-color: #96C8DA;
+  box-shadow: none;
 }
 
-.ui.red.buttons .button:focus,
-.ui.red.button:focus {
-  background-color: #ca1010;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.selection.dropdown:focus .menu {
+  border-color: #96C8DA;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
 
-.ui.red.buttons .button:active,
-.ui.red.button:active {
-  background-color: #b21e1e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Visible */
 
-.ui.red.buttons .active.button,
-.ui.red.buttons .active.button:active,
-.ui.red.active.button,
-.ui.red.button .active.button:active {
-  background-color: #d41515;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.selection.visible.dropdown > .text:not(.default) {
+  font-weight: normal;
+  color: rgba(0, 0, 0, 0.8);
 }
 
-/* Basic */
-
-.ui.basic.red.buttons .button,
-.ui.basic.red.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #DB2828 inset;
-  color: #DB2828;
-}
+/* Visible Hover */
 
-.ui.basic.red.buttons .button:hover,
-.ui.basic.red.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #d01919 inset;
-  color: #d01919;
+.ui.selection.active.dropdown:hover {
+  border-color: #96C8DA;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
 
-.ui.basic.red.buttons .button:focus,
-.ui.basic.red.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #ca1010 inset;
-  color: #d01919;
+.ui.selection.active.dropdown:hover .menu {
+  border-color: #96C8DA;
+  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
 }
 
-.ui.basic.red.buttons .active.button,
-.ui.basic.red.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #d41515 inset;
-  color: #b21e1e;
-}
+/* Dropdown Icon */
 
-.ui.basic.red.buttons .button:active,
-.ui.basic.red.button:active {
-  box-shadow: 0 0 0 1px #b21e1e inset;
-  color: #b21e1e;
+.ui.active.selection.dropdown > .dropdown.icon,
+.ui.visible.selection.dropdown > .dropdown.icon {
+  opacity: '';
+  z-index: 3;
 }
 
-.ui.buttons:not(.vertical) > .basic.red.button:not(:first-child) {
-  margin-left: -1px;
-}
+/* Connecting Border */
 
-.ui.orange.buttons .button,
-.ui.orange.button {
-  background-color: #F2711C;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.active.selection.dropdown {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 
-.ui.orange.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+/* Empty Connecting Border */
 
-.ui.orange.buttons .button:hover,
-.ui.orange.button:hover {
-  background-color: #f26202;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.active.empty.selection.dropdown {
+  border-radius: 0.28571429rem !important;
+  box-shadow: none !important;
 }
 
-.ui.orange.buttons .button:focus,
-.ui.orange.button:focus {
-  background-color: #e55b00;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.active.empty.selection.dropdown .menu {
+  border: none !important;
+  box-shadow: none !important;
 }
 
-.ui.orange.buttons .button:active,
-.ui.orange.button:active {
-  background-color: #cf590c;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* CSS specific to iOS devices or firefox mobile only  */
 
-.ui.orange.buttons .active.button,
-.ui.orange.buttons .active.button:active,
-.ui.orange.active.button,
-.ui.orange.button .active.button:active {
-  background-color: #f56100;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+@supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
+@media (-moz-touch-enabled), (pointer: coarse) {
+    .ui.dropdown .scrollhint.menu:not(.hidden):before {
+      animation: scrollhint 2s ease 2;
+      content: '';
+      z-index: 15;
+      display: block;
+      position: absolute;
+      opacity: 0;
+      right: 0.25em;
+      top: 0;
+      height: 100%;
+      border-right: 0.25em solid;
+      border-left: 0;
+      -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
+      border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
+    }
 
-/* Basic */
+    .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
+      -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
+      border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
+    }
 
-.ui.basic.orange.buttons .button,
-.ui.basic.orange.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #F2711C inset;
-  color: #F2711C;
-}
+@keyframes scrollhint {
+      0% {
+        opacity: 1;
+        top: 100%;
+      }
 
-.ui.basic.orange.buttons .button:hover,
-.ui.basic.orange.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #f26202 inset;
-  color: #f26202;
+      100% {
+        opacity: 0;
+        top: 0;
+      }
 }
-
-.ui.basic.orange.buttons .button:focus,
-.ui.basic.orange.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #e55b00 inset;
-  color: #f26202;
 }
-
-.ui.basic.orange.buttons .active.button,
-.ui.basic.orange.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #f56100 inset;
-  color: #cf590c;
 }
 
-.ui.basic.orange.buttons .button:active,
-.ui.basic.orange.button:active {
-  box-shadow: 0 0 0 1px #cf590c inset;
-  color: #cf590c;
-}
+/*--------------
+     Searchable
+  ---------------*/
 
-.ui.buttons:not(.vertical) > .basic.orange.button:not(:first-child) {
-  margin-left: -1px;
-}
+/* Search Selection */
 
-.ui.yellow.buttons .button,
-.ui.yellow.button {
-  background-color: #FBBD08;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.search.dropdown {
+  min-width: '';
 }
 
-.ui.yellow.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+/* Search Dropdown */
 
-.ui.yellow.buttons .button:hover,
-.ui.yellow.button:hover {
-  background-color: #eaae00;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.search.dropdown > input.search {
+  background: none transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  cursor: text;
+  top: 0;
+  left: 1px;
+  width: 100%;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  padding: inherit;
 }
 
-.ui.yellow.buttons .button:focus,
-.ui.yellow.button:focus {
-  background-color: #daa300;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Text Layering */
 
-.ui.yellow.buttons .button:active,
-.ui.yellow.button:active {
-  background-color: #cd9903;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.search.dropdown > input.search {
+  position: absolute;
+  z-index: 2;
 }
 
-.ui.yellow.buttons .active.button,
-.ui.yellow.buttons .active.button:active,
-.ui.yellow.active.button,
-.ui.yellow.button .active.button:active {
-  background-color: #eaae00;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.search.dropdown > .text {
+  cursor: text;
+  position: relative;
+  left: 1px;
+  z-index: auto;
 }
 
-/* Basic */
+/* Search Selection */
 
-.ui.basic.yellow.buttons .button,
-.ui.basic.yellow.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #FBBD08 inset;
-  color: #FBBD08;
+.ui.search.selection.dropdown > input.search {
+  line-height: 1.21428571em;
+  padding: 0.67857143em 3.2em 0.67857143em 1em;
 }
 
-.ui.basic.yellow.buttons .button:hover,
-.ui.basic.yellow.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #eaae00 inset;
-  color: #eaae00;
-}
+/* Used to size multi select input to character width */
 
-.ui.basic.yellow.buttons .button:focus,
-.ui.basic.yellow.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #daa300 inset;
-  color: #eaae00;
+.ui.search.selection.dropdown > span.sizer {
+  line-height: 1.21428571em;
+  padding: 0.67857143em 3.2em 0.67857143em 1em;
+  display: none;
+  white-space: pre;
 }
 
-.ui.basic.yellow.buttons .active.button,
-.ui.basic.yellow.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #eaae00 inset;
-  color: #cd9903;
-}
+/* Active/Visible Search */
 
-.ui.basic.yellow.buttons .button:active,
-.ui.basic.yellow.button:active {
-  box-shadow: 0 0 0 1px #cd9903 inset;
-  color: #cd9903;
+.ui.search.dropdown.active > input.search,
+.ui.search.dropdown.visible > input.search {
+  cursor: auto;
 }
 
-.ui.buttons:not(.vertical) > .basic.yellow.button:not(:first-child) {
-  margin-left: -1px;
+.ui.search.dropdown.active > .text,
+.ui.search.dropdown.visible > .text {
+  pointer-events: none;
 }
 
-.ui.olive.buttons .button,
-.ui.olive.button {
-  background-color: #B5CC18;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
+/* Filtered Text */
 
-.ui.olive.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.active.search.dropdown input.search:focus + .text i.icon,
+.ui.active.search.dropdown input.search:focus + .text .flag {
+  opacity: var(--opacity-disabled);
 }
 
-.ui.olive.buttons .button:hover,
-.ui.olive.button:hover {
-  background-color: #a7bd0d;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.active.search.dropdown input.search:focus + .text {
+  color: rgba(115, 115, 115, 0.87) !important;
 }
 
-.ui.olive.buttons .button:focus,
-.ui.olive.button:focus {
-  background-color: #a0b605;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.search.dropdown.button > span.sizer {
+  display: none;
 }
 
-.ui.olive.buttons .button:active,
-.ui.olive.button:active {
-  background-color: #8d9e13;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Search Menu */
 
-.ui.olive.buttons .active.button,
-.ui.olive.buttons .active.button:active,
-.ui.olive.active.button,
-.ui.olive.button .active.button:active {
-  background-color: #aac109;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.search.dropdown .menu {
+  overflow-x: hidden;
+  overflow-y: auto;
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
 }
 
-/* Basic */
-
-.ui.basic.olive.buttons .button,
-.ui.basic.olive.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #B5CC18 inset;
-  color: #B5CC18;
+@media only screen and (max-width: 767.98px) {
+  .ui.search.dropdown .menu {
+    max-height: 8.01428571rem;
+  }
 }
 
-.ui.basic.olive.buttons .button:hover,
-.ui.basic.olive.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #a7bd0d inset;
-  color: #a7bd0d;
+@media only screen and (min-width: 768px) {
+  .ui.search.dropdown .menu {
+    max-height: 10.68571429rem;
+  }
 }
 
-.ui.basic.olive.buttons .button:focus,
-.ui.basic.olive.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #a0b605 inset;
-  color: #a7bd0d;
+@media only screen and (min-width: 992px) {
+  .ui.search.dropdown .menu {
+    max-height: 16.02857143rem;
+  }
 }
 
-.ui.basic.olive.buttons .active.button,
-.ui.basic.olive.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #aac109 inset;
-  color: #8d9e13;
+@media only screen and (min-width: 1920px) {
+  .ui.search.dropdown .menu {
+    max-height: 21.37142857rem;
+  }
 }
 
-.ui.basic.olive.buttons .button:active,
-.ui.basic.olive.button:active {
-  box-shadow: 0 0 0 1px #8d9e13 inset;
-  color: #8d9e13;
-}
+/* Clearable Selection */
 
-.ui.buttons:not(.vertical) > .basic.olive.button:not(:first-child) {
-  margin-left: -1px;
+.ui.dropdown > .remove.icon {
+  cursor: pointer;
+  font-size: 0.85714286em;
+  margin: -0.78571429em;
+  padding: 0.91666667em;
+  right: 3em;
+  top: 0.78571429em;
+  position: absolute;
+  opacity: 0.6;
+  z-index: 3;
 }
 
-.ui.green.buttons .button,
-.ui.green.button {
-  background-color: #21BA45;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.clearable.dropdown .text,
+.ui.clearable.dropdown a:last-of-type {
+  margin-right: 1.5em;
 }
 
-.ui.green.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.dropdown select.noselection ~ .remove.icon,
+.ui.dropdown input[value=''] ~ .remove.icon,
+.ui.dropdown input:not([value]) ~ .remove.icon,
+.ui.dropdown.loading > .remove.icon {
+  display: none;
 }
 
-.ui.green.buttons .button:hover,
-.ui.green.button:hover {
-  background-color: #16ab39;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/*--------------
+      Multiple
+  ---------------*/
 
-.ui.green.buttons .button:focus,
-.ui.green.button:focus {
-  background-color: #0ea432;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Multiple Selection */
 
-.ui.green.buttons .button:active,
-.ui.green.button:active {
-  background-color: #198f35;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.ui.multiple.dropdown {
+  padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
 }
 
-.ui.green.buttons .active.button,
-.ui.green.buttons .active.button:active,
-.ui.green.active.button,
-.ui.green.button .active.button:active {
-  background-color: #13ae38;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.multiple.dropdown .menu {
+  cursor: auto;
 }
 
-/* Basic */
-
-.ui.basic.green.buttons .button,
-.ui.basic.green.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #21BA45 inset;
-  color: #21BA45;
-}
+/* Selection Label */
 
-.ui.basic.green.buttons .button:hover,
-.ui.basic.green.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #16ab39 inset;
-  color: #16ab39;
+.ui.multiple.dropdown > .label {
+  display: inline-block;
+  white-space: normal;
+  font-size: 1em;
+  padding: 0.35714286em 0.78571429em;
+  margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
+  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
 }
 
-.ui.basic.green.buttons .button:focus,
-.ui.basic.green.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #0ea432 inset;
-  color: #16ab39;
-}
+/* Dropdown Icon */
 
-.ui.basic.green.buttons .active.button,
-.ui.basic.green.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #13ae38 inset;
-  color: #198f35;
+.ui.multiple.dropdown .dropdown.icon {
+  margin: '';
+  padding: '';
 }
 
-.ui.basic.green.buttons .button:active,
-.ui.basic.green.button:active {
-  box-shadow: 0 0 0 1px #198f35 inset;
-  color: #198f35;
-}
+/* Text */
 
-.ui.buttons:not(.vertical) > .basic.green.button:not(:first-child) {
-  margin-left: -1px;
+.ui.multiple.dropdown > .text {
+  position: static;
+  padding: 0;
+  max-width: 100%;
+  margin: 0.45238095em 0 0.45238095em 0.64285714em;
+  line-height: 1.21428571em;
 }
 
-.ui.teal.buttons .button,
-.ui.teal.button {
-  background-color: #00B5AD;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.multiple.dropdown > .text.default {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.ui.teal.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.multiple.dropdown > .label ~ input.search {
+  margin-left: 0.14285714em !important;
 }
 
-.ui.teal.buttons .button:hover,
-.ui.teal.button:hover {
-  background-color: #009c95;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.multiple.dropdown > .label ~ .text {
+  display: none;
 }
 
-.ui.teal.buttons .button:focus,
-.ui.teal.button:focus {
-  background-color: #008c86;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.multiple.dropdown > .label:not(.image) > img:not(.centered) {
+  margin-right: 0.78571429rem;
 }
 
-.ui.teal.buttons .button:active,
-.ui.teal.button:active {
-  background-color: #00827c;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) {
+  margin-bottom: 0.39285714rem;
 }
 
-.ui.teal.buttons .active.button,
-.ui.teal.buttons .active.button:active,
-.ui.teal.active.button,
-.ui.teal.button .active.button:active {
-  background-color: #009c95;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.multiple.dropdown > .image.label img {
+  margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em;
+  height: 1.71428571em;
 }
 
-/* Basic */
+/*-----------------
+      Multiple Search
+    -----------------*/
 
-.ui.basic.teal.buttons .button,
-.ui.basic.teal.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #00B5AD inset;
-  color: #00B5AD;
-}
+/* Multiple Search Selection */
 
-.ui.basic.teal.buttons .button:hover,
-.ui.basic.teal.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #009c95 inset;
-  color: #009c95;
+.ui.multiple.search.dropdown,
+.ui.multiple.search.dropdown > input.search {
+  cursor: text;
 }
 
-.ui.basic.teal.buttons .button:focus,
-.ui.basic.teal.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #008c86 inset;
-  color: #009c95;
-}
+/* Prompt Text */
 
-.ui.basic.teal.buttons .active.button,
-.ui.basic.teal.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #009c95 inset;
-  color: #00827c;
-}
-
-.ui.basic.teal.buttons .button:active,
-.ui.basic.teal.button:active {
-  box-shadow: 0 0 0 1px #00827c inset;
-  color: #00827c;
+.ui.multiple.search.dropdown > .text {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: inherit;
+  margin: 0.45238095em 0 0.45238095em 0.64285714em;
+  line-height: 1.21428571em;
 }
 
-.ui.buttons:not(.vertical) > .basic.teal.button:not(:first-child) {
-  margin-left: -1px;
+.ui.multiple.search.dropdown > .label ~ .text {
+  display: none;
 }
 
-.ui.blue.buttons .button,
-.ui.blue.button {
-  background-color: #2185D0;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+/* Search */
+
+.ui.multiple.search.dropdown > input.search {
+  position: static;
+  padding: 0;
+  max-width: 100%;
+  margin: 0.45238095em 0 0.45238095em 0.64285714em;
+  width: 2.2em;
+  line-height: 1.21428571em;
 }
 
-.ui.blue.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.multiple.search.dropdown.button {
+  min-width: 14em;
 }
 
-.ui.blue.buttons .button:hover,
-.ui.blue.button:hover {
-  background-color: #1678c2;
-  color: #FFFFFF;
-  text-shadow: none;
+/*--------------
+       Inline
+  ---------------*/
+
+.ui.inline.dropdown {
+  cursor: pointer;
+  display: inline-block;
+  color: inherit;
 }
 
-.ui.blue.buttons .button:focus,
-.ui.blue.button:focus {
-  background-color: #0d71bb;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.inline.dropdown .dropdown.icon {
+  margin: 0 0.21428571em 0 0.21428571em;
+  vertical-align: baseline;
 }
 
-.ui.blue.buttons .button:active,
-.ui.blue.button:active {
-  background-color: #1a69a4;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.inline.dropdown > .text {
+  font-weight: 500;
 }
 
-.ui.blue.buttons .active.button,
-.ui.blue.buttons .active.button:active,
-.ui.blue.active.button,
-.ui.blue.button .active.button:active {
-  background-color: #1279c6;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.inline.dropdown .menu {
+  cursor: auto;
+  margin-top: 0.21428571em;
+  border-radius: 0.28571429rem;
 }
 
-/* Basic */
+/*******************************
+            States
+*******************************/
 
-.ui.basic.blue.buttons .button,
-.ui.basic.blue.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #2185D0 inset;
-  color: #2185D0;
-}
+/*--------------------
+        Active
+----------------------*/
 
-.ui.basic.blue.buttons .button:hover,
-.ui.basic.blue.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #1678c2 inset;
-  color: #1678c2;
-}
+/* Menu Item Active */
 
-.ui.basic.blue.buttons .button:focus,
-.ui.basic.blue.button:focus {
+.ui.dropdown .menu .active.item {
   background: transparent;
-  box-shadow: 0 0 0 1px #0d71bb inset;
-  color: #1678c2;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.95);
+  box-shadow: none;
+  z-index: 12;
 }
 
-.ui.basic.blue.buttons .active.button,
-.ui.basic.blue.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #1279c6 inset;
-  color: #1a69a4;
-}
+/*--------------------
+        Hover
+----------------------*/
 
-.ui.basic.blue.buttons .button:active,
-.ui.basic.blue.button:active {
-  box-shadow: 0 0 0 1px #1a69a4 inset;
-  color: #1a69a4;
-}
+/* Menu Item Hover */
 
-.ui.buttons:not(.vertical) > .basic.blue.button:not(:first-child) {
-  margin-left: -1px;
+.ui.dropdown .menu > .item:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: rgba(0, 0, 0, 0.95);
+  z-index: 13;
 }
 
-.ui.violet.buttons .button,
-.ui.violet.button {
-  background-color: #6435C9;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
+/*--------------------
+     Default Text
+----------------------*/
 
-.ui.violet.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.dropdown:not(.button) > .default.text,
+.ui.default.dropdown:not(.button) > .text {
+  color: rgba(191, 191, 191, 0.87);
 }
 
-.ui.violet.buttons .button:hover,
-.ui.violet.button:hover {
-  background-color: #5829bb;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown:not(.button) > input:focus ~ .default.text,
+.ui.default.dropdown:not(.button) > input:focus ~ .text {
+  color: rgba(115, 115, 115, 0.87);
 }
 
-.ui.violet.buttons .button:focus,
-.ui.violet.button:focus {
-  background-color: #4f20b5;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/*--------------------
+         Loading
+  ---------------------*/
 
-.ui.violet.buttons .button:active,
-.ui.violet.button:active {
-  background-color: #502aa1;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.loading.dropdown > i.icon {
+  height: 1em !important;
 }
 
-.ui.violet.buttons .active.button,
-.ui.violet.buttons .active.button:active,
-.ui.violet.active.button,
-.ui.violet.button .active.button:active {
-  background-color: #5626bf;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.loading.selection.dropdown > i.icon {
+  padding: 1.5em 1.28571429em !important;
 }
 
-/* Basic */
-
-.ui.basic.violet.buttons .button,
-.ui.basic.violet.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #6435C9 inset;
-  color: #6435C9;
+.ui.loading.dropdown > i.icon:before {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -0.64285714em 0 0 -0.64285714em;
+  width: 1.28571429em;
+  height: 1.28571429em;
+  border-radius: 500rem;
+  border: 0.2em solid rgba(0, 0, 0, 0.1);
 }
 
-.ui.basic.violet.buttons .button:hover,
-.ui.basic.violet.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #5829bb inset;
-  color: #5829bb;
+.ui.loading.dropdown > i.icon:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  box-shadow: 0 0 0 1px transparent;
+  margin: -0.64285714em 0 0 -0.64285714em;
+  width: 1.28571429em;
+  height: 1.28571429em;
+  animation: loader 0.6s infinite linear;
+  border: 0.2em solid #767676;
+  border-radius: 500rem;
 }
 
-.ui.basic.violet.buttons .button:focus,
-.ui.basic.violet.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #4f20b5 inset;
-  color: #5829bb;
-}
+/* Coupling */
 
-.ui.basic.violet.buttons .active.button,
-.ui.basic.violet.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #5626bf inset;
-  color: #502aa1;
+.ui.loading.dropdown.button > i.icon:before,
+.ui.loading.dropdown.button > i.icon:after {
+  display: none;
 }
 
-.ui.basic.violet.buttons .button:active,
-.ui.basic.violet.button:active {
-  box-shadow: 0 0 0 1px #502aa1 inset;
-  color: #502aa1;
+.ui.loading.dropdown > .text {
+  transition: none;
 }
 
-.ui.buttons:not(.vertical) > .basic.violet.button:not(:first-child) {
-  margin-left: -1px;
-}
+/* Used To Check Position */
 
-.ui.purple.buttons .button,
-.ui.purple.button {
-  background-color: #A333C8;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.dropdown .loading.menu {
+  display: block;
+  visibility: hidden;
+  z-index: -1;
 }
 
-.ui.purple.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.dropdown > .loading.menu {
+  left: 0 !important;
+  right: auto !important;
 }
 
-.ui.purple.buttons .button:hover,
-.ui.purple.button:hover {
-  background-color: #9627ba;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown > .menu .loading.menu {
+  left: 100% !important;
+  right: auto !important;
 }
 
-.ui.purple.buttons .button:focus,
-.ui.purple.button:focus {
-  background-color: #8f1eb4;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/*--------------------
+    Keyboard Select
+----------------------*/
 
-.ui.purple.buttons .button:active,
-.ui.purple.button:active {
-  background-color: #82299f;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Selected Item */
 
-.ui.purple.buttons .active.button,
-.ui.purple.buttons .active.button:active,
-.ui.purple.active.button,
-.ui.purple.button .active.button:active {
-  background-color: #9724be;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.selected,
+.ui.dropdown .menu .selected.item {
+  background: rgba(0, 0, 0, 0.03);
+  color: rgba(0, 0, 0, 0.95);
 }
 
-/* Basic */
+/*--------------------
+    Search Filtered
+----------------------*/
 
-.ui.basic.purple.buttons .button,
-.ui.basic.purple.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #A333C8 inset;
-  color: #A333C8;
-}
+/* Filtered Item */
 
-.ui.basic.purple.buttons .button:hover,
-.ui.basic.purple.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #9627ba inset;
-  color: #9627ba;
+.ui.dropdown > .filtered.text {
+  visibility: hidden;
 }
 
-.ui.basic.purple.buttons .button:focus,
-.ui.basic.purple.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #8f1eb4 inset;
-  color: #9627ba;
+.ui.dropdown .filtered.item {
+  display: none !important;
 }
 
-.ui.basic.purple.buttons .active.button,
-.ui.basic.purple.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #9724be inset;
-  color: #82299f;
-}
+/*--------------------
+          States
+  ----------------------*/
 
-.ui.basic.purple.buttons .button:active,
-.ui.basic.purple.button:active {
-  box-shadow: 0 0 0 1px #82299f inset;
-  color: #82299f;
+.ui.dropdown.error,
+.ui.dropdown.error > .text,
+.ui.dropdown.error > .default.text {
+  color: #9F3A38;
 }
 
-.ui.buttons:not(.vertical) > .basic.purple.button:not(:first-child) {
-  margin-left: -1px;
+.ui.selection.dropdown.error {
+  background: #FFF6F6;
+  border-color: #E0B4B4;
 }
 
-.ui.pink.buttons .button,
-.ui.pink.button {
-  background-color: #E03997;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.selection.dropdown.error:hover {
+  border-color: #E0B4B4;
 }
 
-.ui.pink.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.multiple.selection.error.dropdown > .label {
+  border-color: #E0B4B4;
 }
 
-.ui.pink.buttons .button:hover,
-.ui.pink.button:hover {
-  background-color: #e61a8d;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.error > .menu,
+.ui.dropdown.error > .menu .menu {
+  border-color: #E0B4B4;
 }
 
-.ui.pink.buttons .button:focus,
-.ui.pink.button:focus {
-  background-color: #e10f85;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.error > .menu > .item {
+  color: #9F3A38;
 }
 
-.ui.pink.buttons .button:active,
-.ui.pink.button:active {
-  background-color: #c71f7e;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Item Hover */
 
-.ui.pink.buttons .active.button,
-.ui.pink.buttons .active.button:active,
-.ui.pink.active.button,
-.ui.pink.button .active.button:active {
-  background-color: #ea158d;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.error > .menu > .item:hover {
+  background-color: #FBE7E7;
 }
 
-/* Basic */
+/* Item Active */
 
-.ui.basic.pink.buttons .button,
-.ui.basic.pink.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #E03997 inset;
-  color: #E03997;
+.ui.dropdown.error > .menu .active.item {
+  background-color: #FDCFCF;
 }
 
-.ui.basic.pink.buttons .button:hover,
-.ui.basic.pink.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #e61a8d inset;
-  color: #e61a8d;
+.ui.dropdown.info,
+.ui.dropdown.info > .text,
+.ui.dropdown.info > .default.text {
+  color: #276F86;
 }
 
-.ui.basic.pink.buttons .button:focus,
-.ui.basic.pink.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #e10f85 inset;
-  color: #e61a8d;
+.ui.selection.dropdown.info {
+  background: #F8FFFF;
+  border-color: #A9D5DE;
 }
 
-.ui.basic.pink.buttons .active.button,
-.ui.basic.pink.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #ea158d inset;
-  color: #c71f7e;
+.ui.selection.dropdown.info:hover {
+  border-color: #A9D5DE;
 }
 
-.ui.basic.pink.buttons .button:active,
-.ui.basic.pink.button:active {
-  box-shadow: 0 0 0 1px #c71f7e inset;
-  color: #c71f7e;
+.ui.multiple.selection.info.dropdown > .label {
+  border-color: #A9D5DE;
 }
 
-.ui.buttons:not(.vertical) > .basic.pink.button:not(:first-child) {
-  margin-left: -1px;
+.ui.dropdown.info > .menu,
+.ui.dropdown.info > .menu .menu {
+  border-color: #A9D5DE;
 }
 
-.ui.brown.buttons .button,
-.ui.brown.button {
-  background-color: #A5673F;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.dropdown.info > .menu > .item {
+  color: #276F86;
 }
 
-.ui.brown.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+/* Item Hover */
 
-.ui.brown.buttons .button:hover,
-.ui.brown.button:hover {
-  background-color: #975b33;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.info > .menu > .item:hover {
+  background-color: #e9f2fb;
 }
 
-.ui.brown.buttons .button:focus,
-.ui.brown.button:focus {
-  background-color: #90532b;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Item Active */
 
-.ui.brown.buttons .button:active,
-.ui.brown.button:active {
-  background-color: #805031;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.info > .menu .active.item {
+  background-color: #cef1fd;
 }
 
-.ui.brown.buttons .active.button,
-.ui.brown.buttons .active.button:active,
-.ui.brown.active.button,
-.ui.brown.button .active.button:active {
-  background-color: #995a31;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.success,
+.ui.dropdown.success > .text,
+.ui.dropdown.success > .default.text {
+  color: #2C662D;
 }
 
-/* Basic */
+.ui.selection.dropdown.success {
+  background: #FCFFF5;
+  border-color: #A3C293;
+}
 
-.ui.basic.brown.buttons .button,
-.ui.basic.brown.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #A5673F inset;
-  color: #A5673F;
+.ui.selection.dropdown.success:hover {
+  border-color: #A3C293;
 }
 
-.ui.basic.brown.buttons .button:hover,
-.ui.basic.brown.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #975b33 inset;
-  color: #975b33;
+.ui.multiple.selection.success.dropdown > .label {
+  border-color: #A3C293;
 }
 
-.ui.basic.brown.buttons .button:focus,
-.ui.basic.brown.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #90532b inset;
-  color: #975b33;
+.ui.dropdown.success > .menu,
+.ui.dropdown.success > .menu .menu {
+  border-color: #A3C293;
 }
 
-.ui.basic.brown.buttons .active.button,
-.ui.basic.brown.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #995a31 inset;
-  color: #805031;
+.ui.dropdown.success > .menu > .item {
+  color: #2C662D;
 }
 
-.ui.basic.brown.buttons .button:active,
-.ui.basic.brown.button:active {
-  box-shadow: 0 0 0 1px #805031 inset;
-  color: #805031;
+/* Item Hover */
+
+.ui.dropdown.success > .menu > .item:hover {
+  background-color: #e9fbe9;
 }
 
-.ui.buttons:not(.vertical) > .basic.brown.button:not(:first-child) {
-  margin-left: -1px;
+/* Item Active */
+
+.ui.dropdown.success > .menu .active.item {
+  background-color: #dafdce;
 }
 
-.ui.grey.buttons .button,
-.ui.grey.button {
-  background-color: #767676;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.dropdown.warning,
+.ui.dropdown.warning > .text,
+.ui.dropdown.warning > .default.text {
+  color: #573A08;
 }
 
-.ui.grey.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.selection.dropdown.warning {
+  background: #FFFAF3;
+  border-color: #C9BA9B;
 }
 
-.ui.grey.buttons .button:hover,
-.ui.grey.button:hover {
-  background-color: #838383;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.selection.dropdown.warning:hover {
+  border-color: #C9BA9B;
 }
 
-.ui.grey.buttons .button:focus,
-.ui.grey.button:focus {
-  background-color: #8a8a8a;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.multiple.selection.warning.dropdown > .label {
+  border-color: #C9BA9B;
 }
 
-.ui.grey.buttons .button:active,
-.ui.grey.button:active {
-  background-color: #909090;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.warning > .menu,
+.ui.dropdown.warning > .menu .menu {
+  border-color: #C9BA9B;
 }
 
-.ui.grey.buttons .active.button,
-.ui.grey.buttons .active.button:active,
-.ui.grey.active.button,
-.ui.grey.button .active.button:active {
-  background-color: #696969;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown.warning > .menu > .item {
+  color: #573A08;
 }
 
-/* Basic */
+/* Item Hover */
 
-.ui.basic.grey.buttons .button,
-.ui.basic.grey.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #767676 inset;
-  color: #767676;
+.ui.dropdown.warning > .menu > .item:hover {
+  background-color: #fbfbe9;
 }
 
-.ui.basic.grey.buttons .button:hover,
-.ui.basic.grey.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #838383 inset;
-  color: #838383;
-}
+/* Item Active */
 
-.ui.basic.grey.buttons .button:focus,
-.ui.basic.grey.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #8a8a8a inset;
-  color: #838383;
+.ui.dropdown.warning > .menu .active.item {
+  background-color: #fdfdce;
 }
 
-.ui.basic.grey.buttons .active.button,
-.ui.basic.grey.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #696969 inset;
-  color: #909090;
-}
+/*--------------------
+        Clear
+----------------------*/
 
-.ui.basic.grey.buttons .button:active,
-.ui.basic.grey.button:active {
-  box-shadow: 0 0 0 1px #909090 inset;
-  color: #909090;
+.ui.dropdown > .clear.dropdown.icon {
+  opacity: 0.8;
+  transition: opacity 0.1s ease;
 }
 
-.ui.buttons:not(.vertical) > .basic.grey.button:not(:first-child) {
-  margin-left: -1px;
+.ui.dropdown > .clear.dropdown.icon:hover {
+  opacity: 1;
 }
 
-.ui.black.buttons .button,
-.ui.black.button {
-  background-color: #1B1C1D;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
-}
+/*--------------------
+          Disabled
+  ----------------------*/
 
-.ui.black.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+/* Disabled */
 
-.ui.black.buttons .button:hover,
-.ui.black.button:hover {
-  background-color: #27292a;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.disabled.dropdown,
+.ui.dropdown .menu > .disabled.item {
+  cursor: default;
+  pointer-events: none;
+  opacity: var(--opacity-disabled);
 }
 
-.ui.black.buttons .button:focus,
-.ui.black.button:focus {
-  background-color: #2f3032;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/*******************************
+           Variations
+*******************************/
 
-.ui.black.buttons .button:active,
-.ui.black.button:active {
-  background-color: #343637;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/*--------------
+    Direction
+---------------*/
 
-.ui.black.buttons .active.button,
-.ui.black.buttons .active.button:active,
-.ui.black.active.button,
-.ui.black.button .active.button:active {
-  background-color: #0f0f10;
-  color: #FFFFFF;
-  text-shadow: none;
+/* Flyout Direction */
+
+.ui.dropdown .menu {
+  left: 0;
 }
 
-/* Basic */
+/* Default Side (Right) */
 
-.ui.basic.black.buttons .button,
-.ui.basic.black.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #1B1C1D inset;
-  color: #1B1C1D;
+.ui.dropdown .right.menu > .menu,
+.ui.dropdown .menu .right.menu {
+  left: 100% !important;
+  right: auto !important;
+  border-radius: 0.28571429rem !important;
 }
 
-.ui.basic.black.buttons .button:hover,
-.ui.basic.black.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #27292a inset;
-  color: #27292a;
+/* Leftward Opening Menu */
+
+.ui.dropdown > .left.menu {
+  left: auto !important;
+  right: 0 !important;
 }
 
-.ui.basic.black.buttons .button:focus,
-.ui.basic.black.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #2f3032 inset;
-  color: #27292a;
+.ui.dropdown > .left.menu .menu,
+.ui.dropdown .menu .left.menu {
+  left: auto;
+  right: 100%;
+  margin: 0 -0.5em 0 0 !important;
+  border-radius: 0.28571429rem !important;
 }
 
-.ui.basic.black.buttons .active.button,
-.ui.basic.black.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #0f0f10 inset;
-  color: #343637;
+.ui.dropdown .item .left.dropdown.icon,
+.ui.dropdown .left.menu .item .dropdown.icon {
+  width: auto;
+  float: left;
+  margin: 0em 0 0 0;
 }
 
-.ui.basic.black.buttons .button:active,
-.ui.basic.black.button:active {
-  box-shadow: 0 0 0 1px #343637 inset;
-  color: #343637;
+.ui.dropdown .item .left.dropdown.icon,
+.ui.dropdown .left.menu .item .dropdown.icon {
+  width: auto;
+  float: left;
+  margin: 0em 0 0 0;
 }
 
-.ui.buttons:not(.vertical) > .basic.black.button:not(:first-child) {
-  margin-left: -1px;
+.ui.dropdown .item .left.dropdown.icon + .text,
+.ui.dropdown .left.menu .item .dropdown.icon + .text {
+  margin-left: 1em;
+  margin-right: 0;
 }
 
-/*---------------
-    Positive
-----------------*/
+/*--------------
+       Upward
+  ---------------*/
 
-/* Standard */
+/* Upward Main Menu */
 
-.ui.positive.buttons .button,
-.ui.positive.button {
-  background-color: #21BA45;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.upward.dropdown > .menu {
+  top: auto;
+  bottom: 100%;
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 
-.ui.positive.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
-}
+/* Upward Sub Menu */
 
-.ui.positive.buttons .button:hover,
-.ui.positive.button:hover {
-  background-color: #16ab39;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.dropdown .upward.menu {
+  top: auto !important;
+  bottom: 0 !important;
 }
 
-.ui.positive.buttons .button:focus,
-.ui.positive.button:focus {
-  background-color: #0ea432;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/* Active Upward */
 
-.ui.positive.buttons .button:active,
-.ui.positive.button:active {
-  background-color: #198f35;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.simple.upward.active.dropdown,
+.ui.simple.upward.dropdown:hover {
+  border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
 }
 
-.ui.positive.buttons .active.button,
-.ui.positive.buttons .active.button:active,
-.ui.positive.active.button,
-.ui.positive.button .active.button:active {
-  background-color: #13ae38;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.upward.dropdown.button:not(.pointing):not(.floating).active {
+  border-radius: 0.28571429rem 0.28571429rem 0 0;
 }
 
-/* Basic */
+/* Selection */
 
-.ui.basic.positive.buttons .button,
-.ui.basic.positive.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #21BA45 inset;
-  color: #21BA45;
+.ui.upward.selection.dropdown .menu {
+  border-top-width: 1px !important;
+  border-bottom-width: 0 !important;
+  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
 }
 
-.ui.basic.positive.buttons .button:hover,
-.ui.basic.positive.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #16ab39 inset;
-  color: #16ab39;
+.ui.upward.selection.dropdown:hover {
+  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
 }
 
-.ui.basic.positive.buttons .button:focus,
-.ui.basic.positive.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #0ea432 inset;
-  color: #16ab39;
-}
+/* Active Upward */
 
-.ui.basic.positive.buttons .active.button,
-.ui.basic.positive.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #13ae38 inset;
-  color: #198f35;
+.ui.active.upward.selection.dropdown {
+  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
 }
 
-.ui.basic.positive.buttons .button:active,
-.ui.basic.positive.button:active {
-  box-shadow: 0 0 0 1px #198f35 inset;
-  color: #198f35;
-}
+/* Visible Upward */
 
-.ui.buttons:not(.vertical) > .basic.positive.button:not(:first-child) {
-  margin-left: -1px;
+.ui.upward.selection.dropdown.visible {
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
 }
 
-/*---------------
-     Negative
-----------------*/
-
-/* Standard */
+/* Visible Hover Upward */
 
-.ui.negative.buttons .button,
-.ui.negative.button {
-  background-color: #DB2828;
-  color: #FFFFFF;
-  text-shadow: none;
-  background-image: none;
+.ui.upward.active.selection.dropdown:hover {
+  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
 }
 
-.ui.negative.button {
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+.ui.upward.active.selection.dropdown:hover .menu {
+  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
 }
 
-.ui.negative.buttons .button:hover,
-.ui.negative.button:hover {
-  background-color: #d01919;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/*--------------
+       Scrolling
+  ---------------*/
 
-.ui.negative.buttons .button:focus,
-.ui.negative.button:focus {
-  background-color: #ca1010;
-  color: #FFFFFF;
-  text-shadow: none;
-}
+/*  Selection Menu */
 
-.ui.negative.buttons .button:active,
-.ui.negative.button:active {
-  background-color: #b21e1e;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.scrolling.dropdown .menu,
+.ui.dropdown .scrolling.menu {
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-.ui.negative.buttons .active.button,
-.ui.negative.buttons .active.button:active,
-.ui.negative.active.button,
-.ui.negative.button .active.button:active {
-  background-color: #d41515;
-  color: #FFFFFF;
-  text-shadow: none;
+.ui.scrolling.dropdown .menu {
+  overflow-x: hidden;
+  overflow-y: auto;
+  backface-visibility: hidden;
+  -webkit-overflow-scrolling: touch;
+  min-width: 100% !important;
+  width: auto !important;
 }
 
-/* Basic */
-
-.ui.basic.negative.buttons .button,
-.ui.basic.negative.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #DB2828 inset;
-  color: #DB2828;
+.ui.dropdown .scrolling.menu {
+  position: static;
+  overflow-y: auto;
+  border: none;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+  margin: 0 !important;
+  min-width: 100% !important;
+  width: auto !important;
+  border-top: 1px solid rgba(34, 36, 38, 0.15);
 }
 
-.ui.basic.negative.buttons .button:hover,
-.ui.basic.negative.button:hover {
-  background: transparent;
-  box-shadow: 0 0 0 1px #d01919 inset;
-  color: #d01919;
+.ui.scrolling.dropdown .menu .item.item.item,
+.ui.dropdown .scrolling.menu > .item.item.item {
+  border-top: none;
 }
 
-.ui.basic.negative.buttons .button:focus,
-.ui.basic.negative.button:focus {
-  background: transparent;
-  box-shadow: 0 0 0 1px #ca1010 inset;
-  color: #d01919;
+.ui.scrolling.dropdown .menu .item:first-child,
+.ui.dropdown .scrolling.menu .item:first-child {
+  border-top: none;
 }
 
-.ui.basic.negative.buttons .active.button,
-.ui.basic.negative.active.button {
-  background: transparent;
-  box-shadow: 0 0 0 1px #d41515 inset;
-  color: #b21e1e;
+.ui.dropdown > .animating.menu .scrolling.menu,
+.ui.dropdown > .visible.menu .scrolling.menu {
+  display: block;
 }
 
-.ui.basic.negative.buttons .button:active,
-.ui.basic.negative.button:active {
-  box-shadow: 0 0 0 1px #b21e1e inset;
-  color: #b21e1e;
-}
-
-.ui.buttons:not(.vertical) > .basic.negative.button:not(:first-child) {
-  margin-left: -1px;
-}
-
-/*******************************
-              Groups
-  *******************************/
-
-.ui.buttons {
-  display: inline-flex;
-  flex-direction: row;
-  font-size: 0;
-  vertical-align: baseline;
-  margin: 0 0.25em 0 0;
-}
-
-.ui.buttons:not(.basic):not(.inverted) {
-  box-shadow: none;
-}
-
-/* Clearfix */
+/* Scrollbar in IE */
 
-.ui.buttons:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
+@media all and (-ms-high-contrast: none) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    min-width: calc(100% - 17px);
+  }
 }
 
-/* Standard Group */
-
-.ui.buttons .button {
-  flex: 1 0 auto;
-  border-radius: 0;
-  margin: 0 0 0 0;
+@media only screen and (max-width: 767.98px) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: 10.28571429rem;
+  }
 }
 
-.ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) {
-  box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
+@media only screen and (min-width: 768px) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: 15.42857143rem;
+  }
 }
 
-.ui.buttons .button:first-child {
-  border-left: none;
-  margin-left: 0;
-  border-top-left-radius: 0.28571429rem;
-  border-bottom-left-radius: 0.28571429rem;
+@media only screen and (min-width: 992px) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: 20.57142857rem;
+  }
 }
 
-.ui.buttons .button:last-child {
-  border-top-right-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.28571429rem;
+@media only screen and (min-width: 1920px) {
+  .ui.scrolling.dropdown .menu,
+  .ui.dropdown .scrolling.menu {
+    max-height: 20.57142857rem;
+  }
 }
 
-/* Vertical  Style */
+/*--------------
+     Columnar
+---------------*/
 
-.ui.vertical.buttons {
-  display: inline-flex;
-  flex-direction: column;
+.ui.column.dropdown > .menu {
+  flex-wrap: wrap;
 }
 
-.ui.vertical.buttons .button {
-  display: block;
-  float: none;
-  width: 100%;
-  margin: 0 0 0 0;
-  box-shadow: none;
-  border-radius: 0;
+.ui.dropdown[class*="two column"] > .menu > .item {
+  width: 50%;
 }
 
-.ui.vertical.buttons .button:first-child {
-  border-top-left-radius: 0.28571429rem;
-  border-top-right-radius: 0.28571429rem;
+.ui.dropdown[class*="three column"] > .menu > .item {
+  width: 33%;
 }
 
-.ui.vertical.buttons .button:last-child {
-  margin-bottom: 0;
-  border-bottom-left-radius: 0.28571429rem;
-  border-bottom-right-radius: 0.28571429rem;
+.ui.dropdown[class*="four column"] > .menu > .item {
+  width: 25%;
 }
 
-.ui.vertical.buttons .button:only-child {
-  border-radius: 0.28571429rem;
+.ui.dropdown[class*="five column"] > .menu > .item {
+  width: 20%;
 }
 
-/*******************************
-         Theme Overrides
-*******************************/
-
-/*******************************
-         Site Overrides
-*******************************/
-/*!
- * # Fomantic-UI - Dimmer
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
+/*--------------
+       Simple
+  ---------------*/
 
-/*******************************
-            Dimmer
-*******************************/
+/* Displays without javascript */
 
-.dimmable:not(body) {
-  position: relative;
+.ui.simple.dropdown .menu:before,
+.ui.simple.dropdown .menu:after {
+  display: none;
 }
 
-.ui.dimmer {
-  display: none;
+.ui.simple.dropdown .menu {
   position: absolute;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  vertical-align: middle;
-  padding: 1em;
-  background: rgba(0, 0, 0, 0.85);
+  /* IE hack to make dropdown icons appear inline */
+  display: -ms-inline-flexbox !important;
+  display: block;
+  overflow: hidden;
+  top: -9999px;
   opacity: 0;
-  line-height: 1;
-  animation-fill-mode: both;
-  animation-duration: 0.5s;
-  transition: background-color 0.5s linear;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  will-change: opacity;
-  z-index: 1000;
+  width: 0;
+  height: 0;
+  transition: opacity 0.1s ease;
+  margin-top: 0 !important;
 }
 
-/* Dimmer Content */
-
-.ui.dimmer > .content {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  color: #FFFFFF;
+.ui.simple.active.dropdown,
+.ui.simple.dropdown:hover {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
 
-/* Loose Coupling */
-
-.ui.segment > .ui.dimmer:not(.page) {
-  border-radius: inherit;
+.ui.simple.active.dropdown > .menu,
+.ui.simple.dropdown:hover > .menu {
+  overflow: visible;
+  width: auto;
+  height: auto;
+  top: 100%;
+  opacity: 1;
 }
 
-/* Scrollbars */
-
-/*******************************
-            States
-*******************************/
+.ui.simple.dropdown > .menu > .item:active > .menu,
+.ui.simple.dropdown .menu .item:hover > .menu {
+  overflow: visible;
+  width: auto;
+  height: auto;
+  top: 0 !important;
+  left: 100%;
+  opacity: 1;
+}
 
-/* Animating */
+.ui.simple.dropdown > .menu > .item:active > .left.menu,
+.ui.simple.dropdown .menu .item:hover > .left.menu,
+.right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
+.right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
+  left: auto;
+  right: 100%;
+}
 
-.animating.dimmable:not(body),
-.dimmed.dimmable:not(body) {
+.ui.simple.disabled.dropdown:hover .menu {
+  display: none;
+  height: 0;
+  width: 0;
   overflow: hidden;
 }
 
-/* Animating / Active / Visible */
+/* Visible */
 
-.dimmed.dimmable > .ui.animating.dimmer,
-.dimmed.dimmable > .ui.visible.dimmer,
-.ui.active.dimmer {
-  display: flex;
-  opacity: 1;
+.ui.simple.visible.dropdown > .menu {
+  display: block;
 }
 
-/* Disabled */
+/* Scrolling */
 
-.ui.disabled.dimmer {
-  width: 0 !important;
-  height: 0 !important;
+.ui.simple.scrolling.active.dropdown > .menu,
+.ui.simple.scrolling.dropdown:hover > .menu {
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
-/*******************************
-           Variations
-*******************************/
-
 /*--------------
-      Legacy
+        Fluid
   ---------------*/
 
-/* Animating / Active / Visible */
-
-.dimmed.dimmable > .ui.animating.legacy.dimmer,
-.dimmed.dimmable > .ui.visible.legacy.dimmer,
-.ui.active.legacy.dimmer {
+.ui.fluid.dropdown {
   display: block;
+  width: 100% !important;
+  min-width: 0;
+}
+
+.ui.fluid.dropdown > .dropdown.icon {
+  float: right;
 }
 
 /*--------------
-      Alignment
+      Floating
   ---------------*/
 
-.ui[class*="top aligned"].dimmer {
-  justify-content: flex-start;
+.ui.floating.dropdown .menu {
+  left: 0;
+  right: auto;
+  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
+  border-radius: 0.28571429rem !important;
 }
 
-.ui[class*="bottom aligned"].dimmer {
-  justify-content: flex-end;
+.ui.floating.dropdown > .menu {
+  border-radius: 0.28571429rem !important;
+}
+
+.ui:not(.upward).floating.dropdown > .menu {
+  margin-top: 0.5em;
+}
+
+.ui.upward.floating.dropdown > .menu {
+  margin-bottom: 0.5em;
 }
 
 /*--------------
-        Page
+       Pointing
   ---------------*/
 
-.ui.page.dimmer {
-  position: fixed;
-  transform-style: '';
-  perspective: 2000px;
-  transform-origin: center center;
+.ui.pointing.dropdown > .menu {
+  top: 100%;
+  margin-top: 0.78571429rem;
+  border-radius: 0.28571429rem;
 }
 
-.ui.page.dimmer.modals {
-  -moz-perspective: none;
-}
-
-body.animating.in.dimmable,
-body.dimmed.dimmable {
-  overflow: hidden;
-}
-
-body.dimmable > .dimmer {
-  position: fixed;
-}
-
-/*--------------
-      Blurring
-  ---------------*/
-
-.blurring.dimmable > :not(.dimmer) {
-  filter: initial;
-  transition: 800ms filter ease;
-}
-
-.blurring.dimmed.dimmable > :not(.dimmer):not(.popup) {
-  filter: blur(5px) grayscale(0.7);
-}
-
-/* Dimmer Color */
-
-.blurring.dimmable > .dimmer {
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.blurring.dimmable > .inverted.dimmer {
-  background: rgba(255, 255, 255, 0.6);
-}
-
-/*--------------
-      Aligned
-  ---------------*/
-
-.ui.dimmer > .top.aligned.content > * {
-  vertical-align: top;
-}
-
-.ui.dimmer > .bottom.aligned.content > * {
-  vertical-align: bottom;
-}
-
-/*--------------
-      Shades
-  ---------------*/
-
-.medium.medium.medium.medium.medium.dimmer {
-  background: rgba(0, 0, 0, 0.65);
-}
-
-.light.light.light.light.light.dimmer {
-  background: rgba(0, 0, 0, 0.45);
-}
-
-.very.light.light.light.light.dimmer {
-  background: rgba(0, 0, 0, 0.25);
-}
-
-/*--------------
-       Simple
-  ---------------*/
-
-/* Displays without javascript */
-
-.ui.simple.dimmer {
-  display: block;
-  overflow: hidden;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  z-index: -100;
-  background: rgba(0, 0, 0, 0);
-}
-
-.dimmed.dimmable > .ui.simple.dimmer {
-  overflow: visible;
-  opacity: 1;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.85);
-  z-index: 1;
-}
-
-.ui.simple.inverted.dimmer {
-  background: rgba(255, 255, 255, 0);
-}
-
-.dimmed.dimmable > .ui.simple.inverted.dimmer {
-  background: rgba(255, 255, 255, 0.85);
-}
-
-/*--------------
-       Partially
-  ----------------*/
-
-.ui[class*="top dimmer"],
-.ui[class*="center dimmer"],
-.ui[class*="bottom dimmer"] {
-  height: auto;
-}
-
-.ui[class*="bottom dimmer"] {
-  top: auto !important;
-  bottom: 0;
-}
-
-.ui[class*="center dimmer"] {
-  top: 50% !important;
-  transform: translateY(-50%);
-  -webkit-transform: translateY(calc(-50% - 0.5px));
-}
-
-.ui.segment > .ui.ui[class*="top dimmer"] {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ui.segment > .ui.ui[class*="center dimmer"] {
-  border-radius: 0;
-}
-
-.ui.segment > .ui.ui[class*="bottom dimmer"] {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade up"].in {
-  animation-name: fadeInUpCenter;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade down"].in {
-  animation-name: fadeInDownCenter;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade up"].out {
-  animation-name: fadeOutUpCenter;
-}
-
-.ui[class*="center dimmer"].transition[class*="fade down"].out {
-  animation-name: fadeOutDownCenter;
-}
-
-.ui[class*="center dimmer"].bounce.transition {
-  animation-name: bounceCenter;
-}
-
-@keyframes fadeInUpCenter {
-  0% {
-    opacity: 0;
-    transform: translateY(-40%);
-    -webkit-transform: translateY(calc(-40% - 0.5px));
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-}
-
-@keyframes fadeInDownCenter {
-  0% {
-    opacity: 0;
-    transform: translateY(-60%);
-    -webkit-transform: translateY(calc(-60% - 0.5px));
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-}
-
-@keyframes fadeOutUpCenter {
-  0% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-45%);
-    -webkit-transform: translateY(calc(-45% - 0.5px));
-  }
-}
-
-@keyframes fadeOutDownCenter {
-  0% {
-    opacity: 1;
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-55%);
-    -webkit-transform: translateY(calc(-55% - 0.5px));
-  }
-}
-
-@keyframes bounceCenter {
-  0%, 20%, 50%, 80%, 100% {
-    transform: translateY(-50%);
-    -webkit-transform: translateY(calc(-50% - 0.5px));
-  }
-
-  40% {
-    transform: translateY(calc(-50% - 30px));
-  }
-
-  60% {
-    transform: translateY(calc(-50% - 15px));
-  }
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-/*******************************
-        User Overrides
-*******************************/
-/*!
- * # Fomantic-UI - Dropdown
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Dropdown
-*******************************/
-
-.ui.dropdown {
-  cursor: pointer;
-  position: relative;
-  display: inline-block;
-  outline: none;
-  text-align: left;
-  transition: box-shadow 0.1s ease, width 0.1s ease;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-/*******************************
-            Content
-*******************************/
-
-/*--------------
-      Menu
----------------*/
-
-.ui.dropdown .menu {
-  cursor: auto;
-  position: absolute;
-  display: none;
-  outline: none;
-  top: 100%;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  margin: 0;
-  padding: 0 0;
-  background: #FFFFFF;
-  font-size: 1em;
-  text-shadow: none;
-  text-align: left;
-  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.28571429rem;
-  transition: opacity 0.1s ease;
-  z-index: 11;
-  will-change: transform, opacity;
-}
-
-.ui.dropdown .menu > * {
-  white-space: nowrap;
-}
-
-/*--------------
-  Hidden Input
----------------*/
-
-.ui.dropdown > input:not(.search):first-child,
-.ui.dropdown > select {
-  display: none !important;
-}
-
-/*--------------
- Dropdown Icon
----------------*/
-
-.ui.dropdown:not(.labeled) > .dropdown.icon {
-  position: relative;
-  width: auto;
-  font-size: 0.85714286em;
-  margin: 0 0 0 1em;
-}
-
-.ui.dropdown .menu > .item .dropdown.icon {
-  width: auto;
-  float: right;
-  margin: 0em 0 0 1em;
-}
-
-.ui.dropdown .menu > .item .dropdown.icon + .text {
-  margin-right: 1em;
-}
-
-/*--------------
-      Text
----------------*/
-
-.ui.dropdown > .text {
-  display: inline-block;
-  transition: none;
-}
-
-/*--------------
-    Menu Item
----------------*/
-
-.ui.dropdown .menu > .item {
-  position: relative;
-  cursor: pointer;
-  display: block;
-  border: none;
-  height: auto;
-  min-height: 2.57142857rem;
-  text-align: left;
-  border-top: none;
-  line-height: 1em;
-  font-size: 1rem;
-  color: rgba(0, 0, 0, 0.87);
-  padding: 0.78571429rem 1.14285714rem !important;
-  text-transform: none;
-  font-weight: normal;
-  box-shadow: none;
-  -webkit-touch-callout: none;
-}
-
-.ui.dropdown .menu > .item:first-child {
-  border-top-width: 0;
-}
-
-.ui.dropdown .menu > .item.vertical {
-  display: flex;
-  flex-direction: column-reverse;
-}
-
-/*--------------
-  Floated Content
----------------*/
-
-.ui.dropdown > .text > [class*="right floated"],
-.ui.dropdown .menu .item > [class*="right floated"] {
-  float: right !important;
-  margin-right: 0 !important;
-  margin-left: 1em !important;
-}
-
-.ui.dropdown > .text > [class*="left floated"],
-.ui.dropdown .menu .item > [class*="left floated"] {
-  float: left !important;
-  margin-left: 0 !important;
-  margin-right: 1em !important;
-}
-
-.ui.dropdown .menu .item > i.icon.floated,
-.ui.dropdown .menu .item > .flag.floated,
-.ui.dropdown .menu .item > .image.floated,
-.ui.dropdown .menu .item > img.floated {
-  margin-top: 0em;
-}
-
-/*--------------
-  Menu Divider
----------------*/
-
-.ui.dropdown .menu > .header {
-  margin: 1rem 0 0.75rem;
-  padding: 0 1.14285714rem;
-  font-weight: 500;
-  text-transform: uppercase;
-}
-
-.ui.dropdown .menu > .header:not(.ui) {
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 0.78571429em;
-}
-
-.ui.dropdown .menu > .divider {
-  border-top: 1px solid rgba(34, 36, 38, 0.1);
-  height: 0;
-  margin: 0.5em 0;
-}
-
-.ui.dropdown .menu > .horizontal.divider {
-  border-top: none;
-}
-
-.ui.dropdown.dropdown .menu > .input {
-  width: auto;
-  display: flex;
-  margin: 1.14285714rem 0.78571429rem;
-  min-width: 10rem;
-}
-
-.ui.dropdown .menu > .header + .input {
-  margin-top: 0;
-}
-
-.ui.dropdown .menu > .input:not(.transparent) input {
-  padding: 0.5em 1em;
-}
-
-.ui.dropdown .menu > .input:not(.transparent) .button,
-.ui.dropdown .menu > .input:not(.transparent) i.icon,
-.ui.dropdown .menu > .input:not(.transparent) .label {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}
-
-/*-----------------
-  Item Description
--------------------*/
-
-.ui.dropdown > .text > .description,
-.ui.dropdown .menu > .item > .description {
-  float: right;
-  margin: 0 0 0 1em;
-  color: rgba(0, 0, 0, 0.4);
-}
-
-.ui.dropdown .menu > .item.vertical > .description {
-  margin: 0;
-}
-
-/*-----------------
-      Item Text
--------------------*/
-
-.ui.dropdown .menu > .item.vertical > .text {
-  margin-bottom: 0.25em;
-}
-
-/*-----------------
-       Message
--------------------*/
-
-.ui.dropdown .menu > .message {
-  padding: 0.78571429rem 1.14285714rem;
-  font-weight: normal;
-}
-
-.ui.dropdown .menu > .message:not(.ui) {
-  color: rgba(0, 0, 0, 0.4);
-}
-
-/*--------------
-    Sub Menu
----------------*/
-
-.ui.dropdown .menu .menu {
-  top: 0;
-  left: 100%;
-  right: auto;
-  margin: 0 -0.5em !important;
-  border-radius: 0.28571429rem !important;
-  z-index: 21 !important;
-}
-
-/* Hide Arrow */
-
-.ui.dropdown .menu .menu:after {
-  display: none;
-}
-
-/*--------------
-   Sub Elements
----------------*/
-
-/* Icons / Flags / Labels / Image */
-
-.ui.dropdown > .text > i.icon,
-.ui.dropdown > .text > .label,
-.ui.dropdown > .text > .flag,
-.ui.dropdown > .text > img,
-.ui.dropdown > .text > .image {
-  margin-top: 0em;
-}
-
-.ui.dropdown .menu > .item > i.icon,
-.ui.dropdown .menu > .item > .label,
-.ui.dropdown .menu > .item > .flag,
-.ui.dropdown .menu > .item > .image,
-.ui.dropdown .menu > .item > img {
-  margin-top: 0em;
-}
-
-.ui.dropdown > .text > i.icon,
-.ui.dropdown > .text > .label,
-.ui.dropdown > .text > .flag,
-.ui.dropdown > .text > img,
-.ui.dropdown > .text > .image,
-.ui.dropdown .menu > .item > i.icon,
-.ui.dropdown .menu > .item > .label,
-.ui.dropdown .menu > .item > .flag,
-.ui.dropdown .menu > .item > .image,
-.ui.dropdown .menu > .item > img {
-  margin-left: 0;
-  float: none;
-  margin-right: 0.78571429rem;
-}
-
-/*--------------
-     Image
----------------*/
-
-.ui.dropdown > .text > img,
-.ui.dropdown > .text > .image:not(.icon),
-.ui.dropdown .menu > .item > .image:not(.icon),
-.ui.dropdown .menu > .item > img {
-  display: inline-block;
-  vertical-align: top;
-  width: auto;
-  margin-top: -0.5em;
-  margin-bottom: -0.5em;
-  max-height: 2em;
-}
-
-/*******************************
-            Coupling
-*******************************/
-
-/*--------------
-      Menu
----------------*/
-
-/* Remove Menu Item Divider */
-
-.ui.dropdown .ui.menu > .item:before,
-.ui.menu .ui.dropdown .menu > .item:before {
-  display: none;
-}
-
-/* Prevent Menu Item Border */
-
-.ui.menu .ui.dropdown .menu .active.item {
-  border-left: none;
-}
-
-/* Automatically float dropdown menu right on last menu item */
-
-.ui.menu .right.menu .dropdown:last-child > .menu:not(.left),
-.ui.menu .right.dropdown.item > .menu:not(.left),
-.ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
-  left: auto;
-  right: 0;
-}
-
-/*--------------
-        Label
-  ---------------*/
-
-/* Dropdown Menu */
-
-.ui.label.dropdown .menu {
-  min-width: 100%;
-}
-
-/*--------------
-       Button
-  ---------------*/
-
-/* No Margin On Icon Button */
-
-.ui.dropdown.icon.button > .dropdown.icon {
-  margin: 0;
-}
-
-.ui.button.dropdown .menu {
-  min-width: 100%;
-}
-
-/*******************************
-              Types
-*******************************/
-
-select.ui.dropdown {
-  height: 38px;
-  padding: 0.5em;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  visibility: visible;
-}
-
-/*--------------
-      Selection
-  ---------------*/
-
-/* Displays like a select box */
-
-.ui.selection.dropdown {
-  cursor: pointer;
-  word-wrap: break-word;
-  line-height: 1em;
-  white-space: normal;
-  outline: 0;
-  transform: rotateZ(0deg);
-  min-width: 14em;
-  min-height: 2.71428571em;
-  background: #FFFFFF;
-  display: inline-block;
-  padding: 0.78571429em 3.2em 0.78571429em 1em;
-  color: rgba(0, 0, 0, 0.87);
-  box-shadow: none;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.28571429rem;
-  transition: box-shadow 0.1s ease, width 0.1s ease;
-}
-
-.ui.selection.dropdown.visible,
-.ui.selection.dropdown.active {
-  z-index: 10;
-}
-
-.ui.selection.dropdown > .search.icon,
-.ui.selection.dropdown > .delete.icon,
-.ui.selection.dropdown > .dropdown.icon {
-  cursor: pointer;
-  position: absolute;
-  width: auto;
-  height: auto;
-  line-height: 1.21428571em;
-  top: 0.78571429em;
-  right: 1em;
-  z-index: 3;
-  margin: -0.78571429em;
-  padding: 0.91666667em;
-  opacity: 0.8;
-  transition: opacity 0.1s ease;
-}
-
-/* Compact */
-
-.ui.compact.selection.dropdown {
-  min-width: 0;
-}
-
-/*  Selection Menu */
-
-.ui.selection.dropdown .menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-  backface-visibility: hidden;
-  -webkit-overflow-scrolling: touch;
-  border-top-width: 0 !important;
-  width: auto;
-  outline: none;
-  margin: 0 -1px;
-  min-width: calc(100% + 2px);
-  width: calc(100% + 2px);
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-  transition: opacity 0.1s ease;
-}
-
-.ui.selection.dropdown .menu:after,
-.ui.selection.dropdown .menu:before {
-  display: none;
-}
-
-/*--------------
-      Message
-  ---------------*/
-
-.ui.selection.dropdown .menu > .message {
-  padding: 0.78571429rem 1.14285714rem;
-}
-
-@media only screen and (max-width: 767.98px) {
-  .ui.selection.dropdown.short .menu {
-    max-height: 6.01071429rem;
-  }
-
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 4.00714286rem;
-  }
-
-  .ui.selection.dropdown .menu {
-    max-height: 8.01428571rem;
-  }
-
-  .ui.selection.dropdown.long .menu {
-    max-height: 16.02857143rem;
-  }
-
-  .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 24.04285714rem;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .ui.selection.dropdown.short .menu {
-    max-height: 8.01428571rem;
-  }
-
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 5.34285714rem;
-  }
-
-  .ui.selection.dropdown .menu {
-    max-height: 10.68571429rem;
-  }
-
-  .ui.selection.dropdown.long .menu {
-    max-height: 21.37142857rem;
-  }
-
-  .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 32.05714286rem;
-  }
-}
-
-@media only screen and (min-width: 992px) {
-  .ui.selection.dropdown.short .menu {
-    max-height: 12.02142857rem;
-  }
-
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 8.01428571rem;
-  }
-
-  .ui.selection.dropdown .menu {
-    max-height: 16.02857143rem;
-  }
-
-  .ui.selection.dropdown.long .menu {
-    max-height: 32.05714286rem;
-  }
-
-  .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 48.08571429rem;
-  }
-}
-
-@media only screen and (min-width: 1920px) {
-  .ui.selection.dropdown.short .menu {
-    max-height: 16.02857143rem;
-  }
-
-  .ui.selection.dropdown[class*="very short"] .menu {
-    max-height: 10.68571429rem;
-  }
-
-  .ui.selection.dropdown .menu {
-    max-height: 21.37142857rem;
-  }
-
-  .ui.selection.dropdown.long .menu {
-    max-height: 42.74285714rem;
-  }
-
-  .ui.selection.dropdown[class*="very long"] .menu {
-    max-height: 64.11428571rem;
-  }
-}
-
-/* Menu Item */
-
-.ui.selection.dropdown .menu > .item {
-  border-top: 1px solid #FAFAFA;
-  padding: 0.78571429rem 1.14285714rem !important;
-  white-space: normal;
-  word-wrap: normal;
-}
-
-/* User Item */
-
-.ui.selection.dropdown .menu > .hidden.addition.item {
-  display: none;
-}
-
-/* Hover */
-
-.ui.selection.dropdown:hover {
-  border-color: rgba(34, 36, 38, 0.35);
-  box-shadow: none;
-}
-
-/* Active */
-
-.ui.selection.active.dropdown {
-  border-color: #96C8DA;
-  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-}
-
-.ui.selection.active.dropdown .menu {
-  border-color: #96C8DA;
-  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-}
-
-/* Focus */
-
-.ui.selection.dropdown:focus {
-  border-color: #96C8DA;
-  box-shadow: none;
-}
-
-.ui.selection.dropdown:focus .menu {
-  border-color: #96C8DA;
-  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-}
-
-/* Visible */
-
-.ui.selection.visible.dropdown > .text:not(.default) {
-  font-weight: normal;
-  color: rgba(0, 0, 0, 0.8);
-}
-
-/* Visible Hover */
-
-.ui.selection.active.dropdown:hover {
-  border-color: #96C8DA;
-  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-}
-
-.ui.selection.active.dropdown:hover .menu {
-  border-color: #96C8DA;
-  box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
-}
-
-/* Dropdown Icon */
-
-.ui.active.selection.dropdown > .dropdown.icon,
-.ui.visible.selection.dropdown > .dropdown.icon {
-  opacity: '';
-  z-index: 3;
-}
-
-/* Connecting Border */
-
-.ui.active.selection.dropdown {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-/* Empty Connecting Border */
-
-.ui.active.empty.selection.dropdown {
-  border-radius: 0.28571429rem !important;
-  box-shadow: none !important;
-}
-
-.ui.active.empty.selection.dropdown .menu {
-  border: none !important;
-  box-shadow: none !important;
-}
-
-/* CSS specific to iOS devices or firefox mobile only  */
-
-@supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
-@media (-moz-touch-enabled), (pointer: coarse) {
-    .ui.dropdown .scrollhint.menu:not(.hidden):before {
-      animation: scrollhint 2s ease 2;
-      content: '';
-      z-index: 15;
-      display: block;
-      position: absolute;
-      opacity: 0;
-      right: 0.25em;
-      top: 0;
-      height: 100%;
-      border-right: 0.25em solid;
-      border-left: 0;
-      -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
-      border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
-    }
-
-    .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
-      -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
-      border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
-    }
-
-@keyframes scrollhint {
-      0% {
-        opacity: 1;
-        top: 100%;
-      }
-
-      100% {
-        opacity: 0;
-        top: 0;
-      }
-}
-}
-}
-
-/*--------------
-     Searchable
-  ---------------*/
-
-/* Search Selection */
-
-.ui.search.dropdown {
-  min-width: '';
-}
-
-/* Search Dropdown */
-
-.ui.search.dropdown > input.search {
-  background: none transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  cursor: text;
-  top: 0;
-  left: 1px;
-  width: 100%;
-  outline: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  padding: inherit;
-}
-
-/* Text Layering */
-
-.ui.search.dropdown > input.search {
-  position: absolute;
-  z-index: 2;
-}
-
-.ui.search.dropdown > .text {
-  cursor: text;
-  position: relative;
-  left: 1px;
-  z-index: auto;
-}
-
-/* Search Selection */
-
-.ui.search.selection.dropdown > input.search {
-  line-height: 1.21428571em;
-  padding: 0.67857143em 3.2em 0.67857143em 1em;
-}
-
-/* Used to size multi select input to character width */
-
-.ui.search.selection.dropdown > span.sizer {
-  line-height: 1.21428571em;
-  padding: 0.67857143em 3.2em 0.67857143em 1em;
-  display: none;
-  white-space: pre;
-}
-
-/* Active/Visible Search */
-
-.ui.search.dropdown.active > input.search,
-.ui.search.dropdown.visible > input.search {
-  cursor: auto;
-}
-
-.ui.search.dropdown.active > .text,
-.ui.search.dropdown.visible > .text {
-  pointer-events: none;
-}
-
-/* Filtered Text */
-
-.ui.active.search.dropdown input.search:focus + .text i.icon,
-.ui.active.search.dropdown input.search:focus + .text .flag {
-  opacity: var(--opacity-disabled);
-}
-
-.ui.active.search.dropdown input.search:focus + .text {
-  color: rgba(115, 115, 115, 0.87) !important;
-}
-
-.ui.search.dropdown.button > span.sizer {
-  display: none;
-}
-
-/* Search Menu */
-
-.ui.search.dropdown .menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-  backface-visibility: hidden;
-  -webkit-overflow-scrolling: touch;
-}
-
-@media only screen and (max-width: 767.98px) {
-  .ui.search.dropdown .menu {
-    max-height: 8.01428571rem;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .ui.search.dropdown .menu {
-    max-height: 10.68571429rem;
-  }
-}
-
-@media only screen and (min-width: 992px) {
-  .ui.search.dropdown .menu {
-    max-height: 16.02857143rem;
-  }
-}
-
-@media only screen and (min-width: 1920px) {
-  .ui.search.dropdown .menu {
-    max-height: 21.37142857rem;
-  }
-}
-
-/* Clearable Selection */
-
-.ui.dropdown > .remove.icon {
-  cursor: pointer;
-  font-size: 0.85714286em;
-  margin: -0.78571429em;
-  padding: 0.91666667em;
-  right: 3em;
-  top: 0.78571429em;
-  position: absolute;
-  opacity: 0.6;
-  z-index: 3;
-}
-
-.ui.clearable.dropdown .text,
-.ui.clearable.dropdown a:last-of-type {
-  margin-right: 1.5em;
-}
-
-.ui.dropdown select.noselection ~ .remove.icon,
-.ui.dropdown input[value=''] ~ .remove.icon,
-.ui.dropdown input:not([value]) ~ .remove.icon,
-.ui.dropdown.loading > .remove.icon {
-  display: none;
-}
-
-/*--------------
-      Multiple
-  ---------------*/
-
-/* Multiple Selection */
-
-.ui.ui.multiple.dropdown {
-  padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
-}
-
-.ui.multiple.dropdown .menu {
-  cursor: auto;
-}
-
-/* Selection Label */
-
-.ui.multiple.dropdown > .label {
-  display: inline-block;
-  white-space: normal;
-  font-size: 1em;
-  padding: 0.35714286em 0.78571429em;
-  margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
-  box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
-}
-
-/* Dropdown Icon */
-
-.ui.multiple.dropdown .dropdown.icon {
-  margin: '';
-  padding: '';
-}
-
-/* Text */
-
-.ui.multiple.dropdown > .text {
-  position: static;
-  padding: 0;
-  max-width: 100%;
-  margin: 0.45238095em 0 0.45238095em 0.64285714em;
-  line-height: 1.21428571em;
-}
-
-.ui.multiple.dropdown > .text.default {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ui.multiple.dropdown > .label ~ input.search {
-  margin-left: 0.14285714em !important;
-}
-
-.ui.multiple.dropdown > .label ~ .text {
-  display: none;
-}
-
-.ui.multiple.dropdown > .label:not(.image) > img:not(.centered) {
-  margin-right: 0.78571429rem;
-}
-
-.ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) {
-  margin-bottom: 0.39285714rem;
-}
-
-.ui.multiple.dropdown > .image.label img {
-  margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em;
-  height: 1.71428571em;
-}
-
-/*-----------------
-      Multiple Search
-    -----------------*/
-
-/* Multiple Search Selection */
-
-.ui.multiple.search.dropdown,
-.ui.multiple.search.dropdown > input.search {
-  cursor: text;
-}
-
-/* Prompt Text */
-
-.ui.multiple.search.dropdown > .text {
-  display: inline-block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: inherit;
-  margin: 0.45238095em 0 0.45238095em 0.64285714em;
-  line-height: 1.21428571em;
-}
-
-.ui.multiple.search.dropdown > .label ~ .text {
-  display: none;
-}
-
-/* Search */
-
-.ui.multiple.search.dropdown > input.search {
-  position: static;
-  padding: 0;
-  max-width: 100%;
-  margin: 0.45238095em 0 0.45238095em 0.64285714em;
-  width: 2.2em;
-  line-height: 1.21428571em;
-}
-
-.ui.multiple.search.dropdown.button {
-  min-width: 14em;
-}
-
-/*--------------
-       Inline
-  ---------------*/
-
-.ui.inline.dropdown {
-  cursor: pointer;
-  display: inline-block;
-  color: inherit;
-}
-
-.ui.inline.dropdown .dropdown.icon {
-  margin: 0 0.21428571em 0 0.21428571em;
-  vertical-align: baseline;
-}
-
-.ui.inline.dropdown > .text {
-  font-weight: 500;
-}
-
-.ui.inline.dropdown .menu {
-  cursor: auto;
-  margin-top: 0.21428571em;
-  border-radius: 0.28571429rem;
-}
-
-/*******************************
-            States
-*******************************/
-
-/*--------------------
-        Active
-----------------------*/
-
-/* Menu Item Active */
-
-.ui.dropdown .menu .active.item {
-  background: transparent;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.95);
-  box-shadow: none;
-  z-index: 12;
-}
-
-/*--------------------
-        Hover
-----------------------*/
-
-/* Menu Item Hover */
-
-.ui.dropdown .menu > .item:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-  z-index: 13;
-}
-
-/*--------------------
-     Default Text
-----------------------*/
-
-.ui.dropdown:not(.button) > .default.text,
-.ui.default.dropdown:not(.button) > .text {
-  color: rgba(191, 191, 191, 0.87);
-}
-
-.ui.dropdown:not(.button) > input:focus ~ .default.text,
-.ui.default.dropdown:not(.button) > input:focus ~ .text {
-  color: rgba(115, 115, 115, 0.87);
-}
-
-/*--------------------
-         Loading
-  ---------------------*/
-
-.ui.loading.dropdown > i.icon {
-  height: 1em !important;
-}
-
-.ui.loading.selection.dropdown > i.icon {
-  padding: 1.5em 1.28571429em !important;
-}
-
-.ui.loading.dropdown > i.icon:before {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  border-radius: 500rem;
-  border: 0.2em solid rgba(0, 0, 0, 0.1);
-}
-
-.ui.loading.dropdown > i.icon:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  box-shadow: 0 0 0 1px transparent;
-  margin: -0.64285714em 0 0 -0.64285714em;
-  width: 1.28571429em;
-  height: 1.28571429em;
-  animation: loader 0.6s infinite linear;
-  border: 0.2em solid #767676;
-  border-radius: 500rem;
-}
-
-/* Coupling */
-
-.ui.loading.dropdown.button > i.icon:before,
-.ui.loading.dropdown.button > i.icon:after {
-  display: none;
-}
-
-.ui.loading.dropdown > .text {
-  transition: none;
-}
-
-/* Used To Check Position */
-
-.ui.dropdown .loading.menu {
-  display: block;
-  visibility: hidden;
-  z-index: -1;
-}
-
-.ui.dropdown > .loading.menu {
-  left: 0 !important;
-  right: auto !important;
-}
-
-.ui.dropdown > .menu .loading.menu {
-  left: 100% !important;
-  right: auto !important;
-}
-
-/*--------------------
-    Keyboard Select
-----------------------*/
-
-/* Selected Item */
-
-.ui.dropdown.selected,
-.ui.dropdown .menu .selected.item {
-  background: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/*--------------------
-    Search Filtered
-----------------------*/
-
-/* Filtered Item */
-
-.ui.dropdown > .filtered.text {
-  visibility: hidden;
-}
-
-.ui.dropdown .filtered.item {
-  display: none !important;
-}
-
-/*--------------------
-          States
-  ----------------------*/
-
-.ui.dropdown.error,
-.ui.dropdown.error > .text,
-.ui.dropdown.error > .default.text {
-  color: #9F3A38;
-}
-
-.ui.selection.dropdown.error {
-  background: #FFF6F6;
-  border-color: #E0B4B4;
-}
-
-.ui.selection.dropdown.error:hover {
-  border-color: #E0B4B4;
-}
-
-.ui.multiple.selection.error.dropdown > .label {
-  border-color: #E0B4B4;
-}
-
-.ui.dropdown.error > .menu,
-.ui.dropdown.error > .menu .menu {
-  border-color: #E0B4B4;
-}
-
-.ui.dropdown.error > .menu > .item {
-  color: #9F3A38;
-}
-
-/* Item Hover */
-
-.ui.dropdown.error > .menu > .item:hover {
-  background-color: #FBE7E7;
-}
-
-/* Item Active */
-
-.ui.dropdown.error > .menu .active.item {
-  background-color: #FDCFCF;
-}
-
-.ui.dropdown.info,
-.ui.dropdown.info > .text,
-.ui.dropdown.info > .default.text {
-  color: #276F86;
-}
-
-.ui.selection.dropdown.info {
-  background: #F8FFFF;
-  border-color: #A9D5DE;
-}
-
-.ui.selection.dropdown.info:hover {
-  border-color: #A9D5DE;
-}
-
-.ui.multiple.selection.info.dropdown > .label {
-  border-color: #A9D5DE;
-}
-
-.ui.dropdown.info > .menu,
-.ui.dropdown.info > .menu .menu {
-  border-color: #A9D5DE;
-}
-
-.ui.dropdown.info > .menu > .item {
-  color: #276F86;
-}
-
-/* Item Hover */
-
-.ui.dropdown.info > .menu > .item:hover {
-  background-color: #e9f2fb;
-}
-
-/* Item Active */
-
-.ui.dropdown.info > .menu .active.item {
-  background-color: #cef1fd;
-}
-
-.ui.dropdown.success,
-.ui.dropdown.success > .text,
-.ui.dropdown.success > .default.text {
-  color: #2C662D;
-}
-
-.ui.selection.dropdown.success {
-  background: #FCFFF5;
-  border-color: #A3C293;
-}
-
-.ui.selection.dropdown.success:hover {
-  border-color: #A3C293;
-}
-
-.ui.multiple.selection.success.dropdown > .label {
-  border-color: #A3C293;
-}
-
-.ui.dropdown.success > .menu,
-.ui.dropdown.success > .menu .menu {
-  border-color: #A3C293;
-}
-
-.ui.dropdown.success > .menu > .item {
-  color: #2C662D;
-}
-
-/* Item Hover */
-
-.ui.dropdown.success > .menu > .item:hover {
-  background-color: #e9fbe9;
-}
-
-/* Item Active */
-
-.ui.dropdown.success > .menu .active.item {
-  background-color: #dafdce;
-}
-
-.ui.dropdown.warning,
-.ui.dropdown.warning > .text,
-.ui.dropdown.warning > .default.text {
-  color: #573A08;
-}
-
-.ui.selection.dropdown.warning {
-  background: #FFFAF3;
-  border-color: #C9BA9B;
-}
-
-.ui.selection.dropdown.warning:hover {
-  border-color: #C9BA9B;
-}
-
-.ui.multiple.selection.warning.dropdown > .label {
-  border-color: #C9BA9B;
-}
-
-.ui.dropdown.warning > .menu,
-.ui.dropdown.warning > .menu .menu {
-  border-color: #C9BA9B;
-}
-
-.ui.dropdown.warning > .menu > .item {
-  color: #573A08;
-}
-
-/* Item Hover */
-
-.ui.dropdown.warning > .menu > .item:hover {
-  background-color: #fbfbe9;
-}
-
-/* Item Active */
-
-.ui.dropdown.warning > .menu .active.item {
-  background-color: #fdfdce;
-}
-
-/*--------------------
-        Clear
-----------------------*/
-
-.ui.dropdown > .clear.dropdown.icon {
-  opacity: 0.8;
-  transition: opacity 0.1s ease;
-}
-
-.ui.dropdown > .clear.dropdown.icon:hover {
-  opacity: 1;
-}
-
-/*--------------------
-          Disabled
-  ----------------------*/
-
-/* Disabled */
-
-.ui.disabled.dropdown,
-.ui.dropdown .menu > .disabled.item {
-  cursor: default;
-  pointer-events: none;
-  opacity: var(--opacity-disabled);
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*--------------
-    Direction
----------------*/
-
-/* Flyout Direction */
-
-.ui.dropdown .menu {
-  left: 0;
-}
-
-/* Default Side (Right) */
-
-.ui.dropdown .right.menu > .menu,
-.ui.dropdown .menu .right.menu {
-  left: 100% !important;
-  right: auto !important;
-  border-radius: 0.28571429rem !important;
-}
-
-/* Leftward Opening Menu */
-
-.ui.dropdown > .left.menu {
-  left: auto !important;
-  right: 0 !important;
-}
-
-.ui.dropdown > .left.menu .menu,
-.ui.dropdown .menu .left.menu {
-  left: auto;
-  right: 100%;
-  margin: 0 -0.5em 0 0 !important;
-  border-radius: 0.28571429rem !important;
-}
-
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
-  width: auto;
-  float: left;
-  margin: 0em 0 0 0;
-}
-
-.ui.dropdown .item .left.dropdown.icon,
-.ui.dropdown .left.menu .item .dropdown.icon {
-  width: auto;
-  float: left;
-  margin: 0em 0 0 0;
-}
-
-.ui.dropdown .item .left.dropdown.icon + .text,
-.ui.dropdown .left.menu .item .dropdown.icon + .text {
-  margin-left: 1em;
-  margin-right: 0;
-}
-
-/*--------------
-       Upward
-  ---------------*/
-
-/* Upward Main Menu */
-
-.ui.upward.dropdown > .menu {
-  top: auto;
-  bottom: 100%;
-  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-}
-
-/* Upward Sub Menu */
-
-.ui.dropdown .upward.menu {
-  top: auto !important;
-  bottom: 0 !important;
-}
-
-/* Active Upward */
-
-.ui.simple.upward.active.dropdown,
-.ui.simple.upward.dropdown:hover {
-  border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
-}
-
-.ui.upward.dropdown.button:not(.pointing):not(.floating).active {
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
-}
-
-/* Selection */
-
-.ui.upward.selection.dropdown .menu {
-  border-top-width: 1px !important;
-  border-bottom-width: 0 !important;
-  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
-}
-
-.ui.upward.selection.dropdown:hover {
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
-}
-
-/* Active Upward */
-
-.ui.active.upward.selection.dropdown {
-  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
-}
-
-/* Visible Upward */
-
-.ui.upward.selection.dropdown.visible {
-  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
-}
-
-/* Visible Hover Upward */
-
-.ui.upward.active.selection.dropdown:hover {
-  box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
-}
-
-.ui.upward.active.selection.dropdown:hover .menu {
-  box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
-}
-
-/*--------------
-       Scrolling
-  ---------------*/
-
-/*  Selection Menu */
-
-.ui.scrolling.dropdown .menu,
-.ui.dropdown .scrolling.menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.ui.scrolling.dropdown .menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-  backface-visibility: hidden;
-  -webkit-overflow-scrolling: touch;
-  min-width: 100% !important;
-  width: auto !important;
-}
-
-.ui.dropdown .scrolling.menu {
-  position: static;
-  overflow-y: auto;
-  border: none;
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  margin: 0 !important;
-  min-width: 100% !important;
-  width: auto !important;
-  border-top: 1px solid rgba(34, 36, 38, 0.15);
-}
-
-.ui.scrolling.dropdown .menu .item.item.item,
-.ui.dropdown .scrolling.menu > .item.item.item {
-  border-top: none;
-}
-
-.ui.scrolling.dropdown .menu .item:first-child,
-.ui.dropdown .scrolling.menu .item:first-child {
-  border-top: none;
-}
-
-.ui.dropdown > .animating.menu .scrolling.menu,
-.ui.dropdown > .visible.menu .scrolling.menu {
-  display: block;
-}
-
-/* Scrollbar in IE */
-
-@media all and (-ms-high-contrast: none) {
-  .ui.scrolling.dropdown .menu,
-  .ui.dropdown .scrolling.menu {
-    min-width: calc(100% - 17px);
-  }
-}
-
-@media only screen and (max-width: 767.98px) {
-  .ui.scrolling.dropdown .menu,
-  .ui.dropdown .scrolling.menu {
-    max-height: 10.28571429rem;
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .ui.scrolling.dropdown .menu,
-  .ui.dropdown .scrolling.menu {
-    max-height: 15.42857143rem;
-  }
-}
-
-@media only screen and (min-width: 992px) {
-  .ui.scrolling.dropdown .menu,
-  .ui.dropdown .scrolling.menu {
-    max-height: 20.57142857rem;
-  }
-}
-
-@media only screen and (min-width: 1920px) {
-  .ui.scrolling.dropdown .menu,
-  .ui.dropdown .scrolling.menu {
-    max-height: 20.57142857rem;
-  }
-}
-
-/*--------------
-     Columnar
----------------*/
-
-.ui.column.dropdown > .menu {
-  flex-wrap: wrap;
-}
-
-.ui.dropdown[class*="two column"] > .menu > .item {
-  width: 50%;
-}
-
-.ui.dropdown[class*="three column"] > .menu > .item {
-  width: 33%;
-}
-
-.ui.dropdown[class*="four column"] > .menu > .item {
-  width: 25%;
-}
-
-.ui.dropdown[class*="five column"] > .menu > .item {
-  width: 20%;
-}
-
-/*--------------
-       Simple
-  ---------------*/
-
-/* Displays without javascript */
-
-.ui.simple.dropdown .menu:before,
-.ui.simple.dropdown .menu:after {
-  display: none;
-}
-
-.ui.simple.dropdown .menu {
-  position: absolute;
-  /* IE hack to make dropdown icons appear inline */
-  display: -ms-inline-flexbox !important;
-  display: block;
-  overflow: hidden;
-  top: -9999px;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  transition: opacity 0.1s ease;
-  margin-top: 0 !important;
-}
-
-.ui.simple.active.dropdown,
-.ui.simple.dropdown:hover {
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.ui.simple.active.dropdown > .menu,
-.ui.simple.dropdown:hover > .menu {
-  overflow: visible;
-  width: auto;
-  height: auto;
-  top: 100%;
-  opacity: 1;
-}
-
-.ui.simple.dropdown > .menu > .item:active > .menu,
-.ui.simple.dropdown .menu .item:hover > .menu {
-  overflow: visible;
-  width: auto;
-  height: auto;
-  top: 0 !important;
-  left: 100%;
-  opacity: 1;
-}
-
-.ui.simple.dropdown > .menu > .item:active > .left.menu,
-.ui.simple.dropdown .menu .item:hover > .left.menu,
-.right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
-.right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
-  left: auto;
-  right: 100%;
-}
-
-.ui.simple.disabled.dropdown:hover .menu {
-  display: none;
-  height: 0;
-  width: 0;
-  overflow: hidden;
-}
-
-/* Visible */
-
-.ui.simple.visible.dropdown > .menu {
-  display: block;
-}
-
-/* Scrolling */
-
-.ui.simple.scrolling.active.dropdown > .menu,
-.ui.simple.scrolling.dropdown:hover > .menu {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-/*--------------
-        Fluid
-  ---------------*/
-
-.ui.fluid.dropdown {
-  display: block;
-  width: 100% !important;
-  min-width: 0;
-}
-
-.ui.fluid.dropdown > .dropdown.icon {
-  float: right;
-}
-
-/*--------------
-      Floating
-  ---------------*/
-
-.ui.floating.dropdown .menu {
-  left: 0;
-  right: auto;
-  box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
-  border-radius: 0.28571429rem !important;
-}
-
-.ui.floating.dropdown > .menu {
-  border-radius: 0.28571429rem !important;
-}
-
-.ui:not(.upward).floating.dropdown > .menu {
-  margin-top: 0.5em;
-}
-
-.ui.upward.floating.dropdown > .menu {
-  margin-bottom: 0.5em;
-}
-
-/*--------------
-       Pointing
-  ---------------*/
-
-.ui.pointing.dropdown > .menu {
-  top: 100%;
-  margin-top: 0.78571429rem;
-  border-radius: 0.28571429rem;
-}
-
-.ui.pointing.dropdown > .menu:not(.hidden):after {
-  display: block;
-  position: absolute;
-  pointer-events: none;
-  content: '';
-  visibility: visible;
-  transform: rotate(45deg);
-  width: 0.5em;
-  height: 0.5em;
-  box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
-  background: #FFFFFF;
-  z-index: 2;
-}
-
-.ui.pointing.dropdown > .menu:not(.hidden):after {
-  top: -0.25em;
-  left: 50%;
-  margin: 0 0 0 -0.25em;
-}
-
-/* Top Left Pointing */
-
-.ui.top.left.pointing.dropdown > .menu {
-  top: 100%;
-  bottom: auto;
-  left: 0;
-  right: auto;
-  margin: 1em 0 0;
-}
-
-.ui.top.left.pointing.dropdown > .menu {
-  top: 100%;
-  bottom: auto;
-  left: 0;
-  right: auto;
-  margin: 1em 0 0;
-}
-
-.ui.top.left.pointing.dropdown > .menu:after {
-  top: -0.25em;
-  left: 1em;
-  right: auto;
-  margin: 0;
-  transform: rotate(45deg);
-}
-
-/* Top Right Pointing */
-
-.ui.top.right.pointing.dropdown > .menu {
-  top: 100%;
-  bottom: auto;
-  right: 0;
-  left: auto;
-  margin: 1em 0 0;
-}
-
-.ui.top.pointing.dropdown > .left.menu:after,
-.ui.top.right.pointing.dropdown > .menu:after {
-  top: -0.25em;
-  left: auto !important;
-  right: 1em !important;
-  margin: 0;
-  transform: rotate(45deg);
-}
-
-/* Left Pointing */
-
-.ui.left.pointing.dropdown > .menu {
-  top: 0;
-  left: 100%;
-  right: auto;
-  margin: 0 0 0 1em;
-}
-
-.ui.left.pointing.dropdown > .menu:after {
-  top: 1em;
-  left: -0.25em;
-  margin: 0 0 0 0;
-  transform: rotate(-45deg);
-}
-
-.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu {
-  left: auto !important;
-  right: 100% !important;
-  margin: 0 1em 0 0;
-}
-
-.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
-  top: 1em;
-  left: auto;
-  right: -0.25em;
-  margin: 0 0 0 0;
-  transform: rotate(135deg);
-}
-
-/* Right Pointing */
-
-.ui.right.pointing.dropdown > .menu {
-  top: 0;
-  left: auto;
-  right: 100%;
-  margin: 0 1em 0 0;
-}
-
-.ui.right.pointing.dropdown > .menu:after {
-  top: 1em;
-  left: auto;
-  right: -0.25em;
-  margin: 0 0 0 0;
-  transform: rotate(135deg);
-}
-
-/* Bottom Pointing */
-
-.ui.bottom.pointing.dropdown > .menu {
-  top: auto;
-  bottom: 100%;
-  left: 0;
-  right: auto;
-  margin: 0 0 1em;
-}
-
-.ui.bottom.pointing.dropdown > .menu:after {
-  top: auto;
-  bottom: -0.25em;
-  right: auto;
-  margin: 0;
-  transform: rotate(-135deg);
-}
-
-/* Reverse Sub-Menu Direction */
-
-.ui.bottom.pointing.dropdown > .menu .menu {
-  top: auto !important;
-  bottom: 0 !important;
-}
-
-/* Bottom Left */
-
-.ui.bottom.left.pointing.dropdown > .menu {
-  left: 0;
-  right: auto;
-}
-
-.ui.bottom.left.pointing.dropdown > .menu:after {
-  left: 1em;
-  right: auto;
-}
-
-/* Bottom Right */
-
-.ui.bottom.right.pointing.dropdown > .menu {
-  right: 0;
-  left: auto;
-}
-
-.ui.bottom.right.pointing.dropdown > .menu:after {
-  left: auto;
-  right: 1em;
-}
-
-/* Upward pointing */
-
-.ui.pointing.upward.dropdown .menu,
-.ui.top.pointing.upward.dropdown .menu {
-  top: auto !important;
-  bottom: 100% !important;
-  margin: 0 0 0.78571429rem;
-  border-radius: 0.28571429rem;
-}
-
-.ui.pointing.upward.dropdown .menu:after,
-.ui.top.pointing.upward.dropdown .menu:after {
-  top: 100% !important;
-  bottom: auto !important;
-  box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15);
-  margin: -0.25em 0 0;
-}
-
-/* Right Pointing Upward */
-
-.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
-  top: auto !important;
-  bottom: 0 !important;
-  margin: 0 1em 0 0;
-}
-
-.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
-  top: auto !important;
-  bottom: 0 !important;
-  margin: 0 0 1em 0;
-  box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
-}
-
-/* Left Pointing Upward */
-
-.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
-  top: auto !important;
-  bottom: 0 !important;
-  margin: 0 0 0 1em;
-}
-
-.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
-  top: auto !important;
-  bottom: 0 !important;
-  margin: 0 0 1em 0;
-  box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
-}
-
-/*--------------------
-        Sizes
----------------------*/
-
-.ui.dropdown,
-.ui.dropdown .menu > .item {
-  font-size: 1rem;
-}
-
-.ui.mini.dropdown,
-.ui.mini.dropdown .menu > .item {
-  font-size: 0.78571429rem;
-}
-
-.ui.tiny.dropdown,
-.ui.tiny.dropdown .menu > .item {
-  font-size: 0.85714286rem;
-}
-
-.ui.small.dropdown,
-.ui.small.dropdown .menu > .item {
-  font-size: 0.92857143rem;
-}
-
-.ui.large.dropdown,
-.ui.large.dropdown .menu > .item {
-  font-size: 1.14285714rem;
-}
-
-.ui.big.dropdown,
-.ui.big.dropdown .menu > .item {
-  font-size: 1.28571429rem;
-}
-
-.ui.huge.dropdown,
-.ui.huge.dropdown .menu > .item {
-  font-size: 1.42857143rem;
-}
-
-.ui.massive.dropdown,
-.ui.massive.dropdown .menu > .item {
-  font-size: 1.71428571rem;
-}
-
-/*******************************
-         Theme Overrides
-*******************************/
-
-/* Dropdown Carets */
-
-@font-face {
-  font-family: 'Dropdown';
-  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
-  font-weight: normal;
-  font-style: normal;
-}
-
-.ui.dropdown > .dropdown.icon {
-  font-family: 'Dropdown';
-  line-height: 1;
-  height: 1em;
-  width: 1.23em;
-  backface-visibility: hidden;
-  font-weight: normal;
-  font-style: normal;
-  text-align: center;
-}
-
-.ui.dropdown > .dropdown.icon {
-  width: auto;
-}
-
-.ui.dropdown > .dropdown.icon:before {
-  content: '\f0d7';
-}
-
-/* Sub Menu */
-
-.ui.dropdown .menu .item .dropdown.icon:before {
-  content: '\f0da' ;
-}
-
-.ui.dropdown .item .left.dropdown.icon:before,
-.ui.dropdown .left.menu .item .dropdown.icon:before {
-  content: "\f0d9" ;
-}
-
-/* Vertical Menu Dropdown */
-
-.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
-  content: "\f0da" ;
-}
-
-/* Icons for Reference
-.dropdown.down.icon {
-  content: "\f0d7";
-}
-.dropdown.up.icon {
-  content: "\f0d8";
-}
-.dropdown.left.icon {
-  content: "\f0d9";
-}
-.dropdown.icon.icon {
-  content: "\f0da";
-}
-*/
-
-/*******************************
-        User Overrides
-*******************************/
-/*!
- * # Fomantic-UI - Form
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Elements
-*******************************/
-
-/*--------------------
-        Form
----------------------*/
-
-.ui.form {
-  position: relative;
-  max-width: 100%;
-}
-
-/*--------------------
-        Content
----------------------*/
-
-.ui.form > p {
-  margin: 1em 0;
-}
-
-/*--------------------
-        Field
----------------------*/
-
-.ui.form .field {
-  clear: both;
-  margin: 0 0 1em;
-}
-
-.ui.form .fields .fields,
-.ui.form .field:last-child,
-.ui.form .fields:last-child .field {
-  margin-bottom: 0;
-}
-
-.ui.form .fields .field {
-  clear: both;
-  margin: 0;
-}
-
-/*--------------------
-        Labels
----------------------*/
-
-.ui.form .field > label {
-  display: block;
-  margin: 0 0 0.28571429rem 0;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 0.92857143em;
-  font-weight: 500;
-  text-transform: none;
-}
-
-/*--------------------
-    Standard Inputs
----------------------*/
-
-.ui.form textarea,
-.ui.form input:not([type]),
-.ui.form input[type="date"],
-.ui.form input[type="datetime-local"],
-.ui.form input[type="email"],
-.ui.form input[type="number"],
-.ui.form input[type="password"],
-.ui.form input[type="search"],
-.ui.form input[type="tel"],
-.ui.form input[type="time"],
-.ui.form input[type="text"],
-.ui.form input[type="file"],
-.ui.form input[type="url"] {
-  width: 100%;
-  vertical-align: top;
-}
-
-/* Set max height on unusual input */
-
-.ui.form ::-webkit-datetime-edit,
-.ui.form ::-webkit-inner-spin-button {
-  height: 1.21428571em;
-}
-
-.ui.form input:not([type]),
-.ui.form input[type="date"],
-.ui.form input[type="datetime-local"],
-.ui.form input[type="email"],
-.ui.form input[type="number"],
-.ui.form input[type="password"],
-.ui.form input[type="search"],
-.ui.form input[type="tel"],
-.ui.form input[type="time"],
-.ui.form input[type="text"],
-.ui.form input[type="file"],
-.ui.form input[type="url"] {
-  font-family: var(--fonts-regular);
-  margin: 0;
-  outline: none;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  line-height: 1.21428571em;
-  padding: 0.67857143em 1em;
-  font-size: 1em;
-  background: #FFFFFF;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.28571429rem;
-  box-shadow: 0 0 0 0 transparent inset;
-  transition: color 0.1s ease, border-color 0.1s ease;
-}
-
-/* Text Area */
-
-.ui.input textarea,
-.ui.form textarea {
-  margin: 0;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  padding: 0.78571429em 1em;
-  background: #FFFFFF;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  outline: none;
-  color: rgba(0, 0, 0, 0.87);
-  border-radius: 0.28571429rem;
-  box-shadow: 0 0 0 0 transparent inset;
-  transition: color 0.1s ease, border-color 0.1s ease;
-  font-size: 1em;
-  font-family: var(--fonts-regular);
-  line-height: 1.2857;
-  resize: vertical;
-}
-
-.ui.form textarea:not([rows]) {
-  height: 12em;
-  min-height: 8em;
-  max-height: 24em;
-}
-
-.ui.form textarea,
-.ui.form input[type="checkbox"] {
-  vertical-align: top;
-}
-
-/*--------------------
-    Checkbox margin
----------------------*/
-
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
-  margin-top: 0.7em;
-}
-
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
-  margin-top: 2.41428571em;
-}
-
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
-  margin-top: 2.21428571em;
-}
-
-.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
-  margin-top: 2.61428571em;
-}
-
-.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
-  margin-top: 0.6em;
-}
-
-.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
-  margin-top: 0.5em;
-}
-
-.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
-  margin-top: 0.7em;
-}
-
-/*--------------------------
-  Input w/ attached Button
----------------------------*/
-
-.ui.form input.attached {
-  width: auto;
-}
-
-/*--------------------
-     Basic Select
----------------------*/
-
-.ui.form select {
-  display: block;
-  height: auto;
-  width: 100%;
-  background: #FFFFFF;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  border-radius: 0.28571429rem;
-  box-shadow: 0 0 0 0 transparent inset;
-  padding: 0.62em 1em;
-  color: rgba(0, 0, 0, 0.87);
-  transition: color 0.1s ease, border-color 0.1s ease;
-}
-
-/*--------------------
-       Dropdown
----------------------*/
-
-/* Block */
-
-.ui.form .field > .selection.dropdown {
-  min-width: auto;
-  width: 100%;
-}
-
-.ui.form .field > .selection.dropdown > .dropdown.icon {
-  float: right;
-}
-
-/* Inline */
-
-.ui.form .inline.fields .field > .selection.dropdown,
-.ui.form .inline.field > .selection.dropdown {
-  width: auto;
-}
-
-.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
-.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
-  float: none;
-}
-
-/*--------------------
-       UI Input
----------------------*/
-
-/* Block */
-
-.ui.form .field .ui.input,
-.ui.form .fields .field .ui.input,
-.ui.form .wide.field .ui.input {
-  width: 100%;
-}
-
-/* Inline  */
-
-.ui.form .inline.fields .field:not(.wide) .ui.input,
-.ui.form .inline.field:not(.wide) .ui.input {
-  width: auto;
-  vertical-align: middle;
-}
-
-/* Auto Input */
-
-.ui.form .fields .field .ui.input input,
-.ui.form .field .ui.input input {
-  width: auto;
-}
-
-/* Full Width Input */
-
-.ui.form .ten.fields .ui.input input,
-.ui.form .nine.fields .ui.input input,
-.ui.form .eight.fields .ui.input input,
-.ui.form .seven.fields .ui.input input,
-.ui.form .six.fields .ui.input input,
-.ui.form .five.fields .ui.input input,
-.ui.form .four.fields .ui.input input,
-.ui.form .three.fields .ui.input input,
-.ui.form .two.fields .ui.input input,
-.ui.form .wide.field .ui.input input {
-  flex: 1 0 auto;
-  width: 0;
-}
-
-/*--------------------
-   Types of Messages
----------------------*/
-
-.ui.form .error.message,
-.ui.form .error.message:empty {
-  display: none;
-}
-
-.ui.form .info.message,
-.ui.form .info.message:empty {
-  display: none;
-}
-
-.ui.form .success.message,
-.ui.form .success.message:empty {
-  display: none;
-}
-
-.ui.form .warning.message,
-.ui.form .warning.message:empty {
-  display: none;
-}
-
-/* Assumptions */
-
-.ui.form .message:first-child {
-  margin-top: 0;
-}
-
-/*--------------------
-   Validation Prompt
----------------------*/
-
-.ui.form .field .prompt.label {
-  white-space: normal;
-  background: #FFFFFF !important;
-  border: 1px solid #E0B4B4 !important;
-  color: #9F3A38 !important;
-}
-
-.ui.form .inline.fields .field .prompt,
-.ui.form .inline.field .prompt {
-  vertical-align: top;
-  margin: -0.25em 0 -0.5em 0.5em;
-}
-
-.ui.form .inline.fields .field .prompt:before,
-.ui.form .inline.field .prompt:before {
-  border-width: 0 0 1px 1px;
-  bottom: auto;
-  right: auto;
-  top: 50%;
-  left: 0;
-}
-
-/*******************************
-            States
-*******************************/
-
-/*--------------------
-      Autofilled
----------------------*/
-
-.ui.form .field.field input:-webkit-autofill {
-  box-shadow: 0 0 0 100px #FFFFF0 inset !important;
-  border-color: #E5DFA1 !important;
-}
-
-/* Focus */
-
-.ui.form .field.field input:-webkit-autofill:focus {
-  box-shadow: 0 0 0 100px #FFFFF0 inset !important;
-  border-color: #D5C315 !important;
-}
-
-/*--------------------
-      Placeholder
----------------------*/
-
-/* browsers require these rules separate */
-
-.ui.form ::-webkit-input-placeholder {
-  color: rgba(191, 191, 191, 0.87);
-}
-
-.ui.form :-ms-input-placeholder {
-  color: rgba(191, 191, 191, 0.87) !important;
-}
-
-.ui.form ::-moz-placeholder {
-  color: rgba(191, 191, 191, 0.87);
-}
-
-.ui.form :focus::-webkit-input-placeholder {
-  color: rgba(115, 115, 115, 0.87);
-}
-
-.ui.form :focus:-ms-input-placeholder {
-  color: rgba(115, 115, 115, 0.87) !important;
-}
-
-.ui.form :focus::-moz-placeholder {
-  color: rgba(115, 115, 115, 0.87);
-}
-
-/*--------------------
-        Focus
----------------------*/
-
-.ui.form input:not([type]):focus,
-.ui.form input[type="date"]:focus,
-.ui.form input[type="datetime-local"]:focus,
-.ui.form input[type="email"]:focus,
-.ui.form input[type="number"]:focus,
-.ui.form input[type="password"]:focus,
-.ui.form input[type="search"]:focus,
-.ui.form input[type="tel"]:focus,
-.ui.form input[type="time"]:focus,
-.ui.form input[type="text"]:focus,
-.ui.form input[type="file"]:focus,
-.ui.form input[type="url"]:focus {
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #85B7D9;
-  border-radius: 0.28571429rem;
-  background: #FFFFFF;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
-}
-
-.ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="datetime-local"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="tel"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus,
-.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.ui.form .ui[class*="left action"].input input:not([type]),
-.ui.form .ui[class*="left action"].input input[type="date"],
-.ui.form .ui[class*="left action"].input input[type="datetime-local"],
-.ui.form .ui[class*="left action"].input input[type="email"],
-.ui.form .ui[class*="left action"].input input[type="number"],
-.ui.form .ui[class*="left action"].input input[type="password"],
-.ui.form .ui[class*="left action"].input input[type="search"],
-.ui.form .ui[class*="left action"].input input[type="tel"],
-.ui.form .ui[class*="left action"].input input[type="time"],
-.ui.form .ui[class*="left action"].input input[type="text"],
-.ui.form .ui[class*="left action"].input input[type="file"],
-.ui.form .ui[class*="left action"].input input[type="url"] {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-
-.ui.form textarea:focus {
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #85B7D9;
-  border-radius: 0.28571429rem;
-  background: #FFFFFF;
-  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
-  -webkit-appearance: none;
-}
-
-/*--------------------
-          States
-  ---------------------*/
-
-/* On Form */
-
-.ui.form.error .error.message:not(:empty) {
-  display: block;
-}
-
-.ui.form.error .compact.error.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form.error .icon.error.message:not(:empty) {
-  display: flex;
-}
-
-/* On Field(s) */
-
-.ui.form .fields.error .error.message:not(:empty),
-.ui.form .field.error .error.message:not(:empty) {
-  display: block;
-}
-
-.ui.form .fields.error .compact.error.message:not(:empty),
-.ui.form .field.error .compact.error.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form .fields.error .icon.error.message:not(:empty),
-.ui.form .field.error .icon.error.message:not(:empty) {
-  display: flex;
-}
-
-.ui.ui.form .fields.error .field label,
-.ui.ui.form .field.error label,
-.ui.ui.form .fields.error .field .input,
-.ui.ui.form .field.error .input {
-  color: #9F3A38;
-}
-
-.ui.form .fields.error .field .corner.label,
-.ui.form .field.error .corner.label {
-  border-color: #9F3A38;
-  color: #FFFFFF;
-}
-
-.ui.form .fields.error .field textarea,
-.ui.form .fields.error .field select,
-.ui.form .fields.error .field input:not([type]),
-.ui.form .fields.error .field input[type="date"],
-.ui.form .fields.error .field input[type="datetime-local"],
-.ui.form .fields.error .field input[type="email"],
-.ui.form .fields.error .field input[type="number"],
-.ui.form .fields.error .field input[type="password"],
-.ui.form .fields.error .field input[type="search"],
-.ui.form .fields.error .field input[type="tel"],
-.ui.form .fields.error .field input[type="time"],
-.ui.form .fields.error .field input[type="text"],
-.ui.form .fields.error .field input[type="file"],
-.ui.form .fields.error .field input[type="url"],
-.ui.form .field.error textarea,
-.ui.form .field.error select,
-.ui.form .field.error input:not([type]),
-.ui.form .field.error input[type="date"],
-.ui.form .field.error input[type="datetime-local"],
-.ui.form .field.error input[type="email"],
-.ui.form .field.error input[type="number"],
-.ui.form .field.error input[type="password"],
-.ui.form .field.error input[type="search"],
-.ui.form .field.error input[type="tel"],
-.ui.form .field.error input[type="time"],
-.ui.form .field.error input[type="text"],
-.ui.form .field.error input[type="file"],
-.ui.form .field.error input[type="url"] {
-  color: #9F3A38;
-  background: #FFF6F6;
-  border-color: #E0B4B4;
-  border-radius: '';
-  box-shadow: none;
-}
-
-.ui.form .field.error textarea:focus,
-.ui.form .field.error select:focus,
-.ui.form .field.error input:not([type]):focus,
-.ui.form .field.error input[type="date"]:focus,
-.ui.form .field.error input[type="datetime-local"]:focus,
-.ui.form .field.error input[type="email"]:focus,
-.ui.form .field.error input[type="number"]:focus,
-.ui.form .field.error input[type="password"]:focus,
-.ui.form .field.error input[type="search"]:focus,
-.ui.form .field.error input[type="tel"]:focus,
-.ui.form .field.error input[type="time"]:focus,
-.ui.form .field.error input[type="text"]:focus,
-.ui.form .field.error input[type="file"]:focus,
-.ui.form .field.error input[type="url"]:focus {
-  background: #FFF6F6;
-  border-color: #E0B4B4;
-  color: #9F3A38;
-  box-shadow: none;
-}
-
-/* Preserve Native Select Stylings */
-
-.ui.form .field.error select {
-  -webkit-appearance: menulist-button;
-}
-
-/*------------------
-        Input State
-    --------------------*/
-
-/* Transparent */
-
-.ui.form .field.error .transparent.input input,
-.ui.form .field.error .transparent.input textarea,
-.ui.form .field.error input.transparent,
-.ui.form .field.error textarea.transparent {
-  background-color: #FFF6F6 !important;
-  color: #9F3A38 !important;
-}
-
-/* Autofilled */
-
-.ui.form .error.error input:-webkit-autofill {
-  box-shadow: 0 0 0 100px #FFFAF0 inset !important;
-  border-color: #E0B4B4 !important;
-}
-
-/* Placeholder */
-
-.ui.form .error ::-webkit-input-placeholder {
-  color: #e7bdbc;
-}
-
-.ui.form .error :-ms-input-placeholder {
-  color: #e7bdbc !important;
-}
-
-.ui.form .error ::-moz-placeholder {
-  color: #e7bdbc;
-}
-
-.ui.form .error :focus::-webkit-input-placeholder {
-  color: #da9796;
-}
-
-.ui.form .error :focus:-ms-input-placeholder {
-  color: #da9796 !important;
-}
-
-.ui.form .error :focus::-moz-placeholder {
-  color: #da9796;
-}
-
-/*------------------
-        Dropdown State
-    --------------------*/
-
-.ui.form .fields.error .field .ui.dropdown,
-.ui.form .fields.error .field .ui.dropdown .item,
-.ui.form .field.error .ui.dropdown,
-.ui.form .field.error .ui.dropdown .text,
-.ui.form .field.error .ui.dropdown .item {
-  background: #FFF6F6;
-  color: #9F3A38;
-}
-
-.ui.form .fields.error .field .ui.dropdown,
-.ui.form .field.error .ui.dropdown {
-  border-color: #E0B4B4 !important;
-}
-
-.ui.form .fields.error .field .ui.dropdown:hover,
-.ui.form .field.error .ui.dropdown:hover {
-  border-color: #E0B4B4 !important;
-}
-
-.ui.form .fields.error .field .ui.dropdown:hover .menu,
-.ui.form .field.error .ui.dropdown:hover .menu {
-  border-color: #E0B4B4;
-}
-
-.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
-.ui.form .field.error .ui.multiple.selection.dropdown > .label {
-  background-color: #EACBCB;
-  color: #9F3A38;
-}
-
-/* Hover */
-
-.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
-.ui.form .field.error .ui.dropdown .menu .item:hover {
-  background-color: #FBE7E7;
-}
-
-/* Selected */
-
-.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
-.ui.form .field.error .ui.dropdown .menu .selected.item {
-  background-color: #FBE7E7;
-}
-
-/* Active */
-
-.ui.form .fields.error .field .ui.dropdown .menu .active.item,
-.ui.form .field.error .ui.dropdown .menu .active.item {
-  background-color: #FDCFCF !important;
-}
-
-/*--------------------
-        Checkbox State
-    ---------------------*/
-
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
-  color: #9F3A38;
-}
-
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
-  background: #FFF6F6;
-  border-color: #E0B4B4;
-}
-
-.ui.form .fields.error .field .checkbox label:after,
-.ui.form .field.error .checkbox label:after,
-.ui.form .fields.error .field .checkbox .box:after,
-.ui.form .field.error .checkbox .box:after {
-  color: #9F3A38;
-}
-
-/* On Form */
-
-.ui.form.info .info.message:not(:empty) {
-  display: block;
-}
-
-.ui.form.info .compact.info.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form.info .icon.info.message:not(:empty) {
-  display: flex;
-}
-
-/* On Field(s) */
-
-.ui.form .fields.info .info.message:not(:empty),
-.ui.form .field.info .info.message:not(:empty) {
-  display: block;
-}
-
-.ui.form .fields.info .compact.info.message:not(:empty),
-.ui.form .field.info .compact.info.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form .fields.info .icon.info.message:not(:empty),
-.ui.form .field.info .icon.info.message:not(:empty) {
-  display: flex;
-}
-
-.ui.ui.form .fields.info .field label,
-.ui.ui.form .field.info label,
-.ui.ui.form .fields.info .field .input,
-.ui.ui.form .field.info .input {
-  color: #276F86;
-}
-
-.ui.form .fields.info .field .corner.label,
-.ui.form .field.info .corner.label {
-  border-color: #276F86;
-  color: #FFFFFF;
-}
-
-.ui.form .fields.info .field textarea,
-.ui.form .fields.info .field select,
-.ui.form .fields.info .field input:not([type]),
-.ui.form .fields.info .field input[type="date"],
-.ui.form .fields.info .field input[type="datetime-local"],
-.ui.form .fields.info .field input[type="email"],
-.ui.form .fields.info .field input[type="number"],
-.ui.form .fields.info .field input[type="password"],
-.ui.form .fields.info .field input[type="search"],
-.ui.form .fields.info .field input[type="tel"],
-.ui.form .fields.info .field input[type="time"],
-.ui.form .fields.info .field input[type="text"],
-.ui.form .fields.info .field input[type="file"],
-.ui.form .fields.info .field input[type="url"],
-.ui.form .field.info textarea,
-.ui.form .field.info select,
-.ui.form .field.info input:not([type]),
-.ui.form .field.info input[type="date"],
-.ui.form .field.info input[type="datetime-local"],
-.ui.form .field.info input[type="email"],
-.ui.form .field.info input[type="number"],
-.ui.form .field.info input[type="password"],
-.ui.form .field.info input[type="search"],
-.ui.form .field.info input[type="tel"],
-.ui.form .field.info input[type="time"],
-.ui.form .field.info input[type="text"],
-.ui.form .field.info input[type="file"],
-.ui.form .field.info input[type="url"] {
-  color: #276F86;
-  background: #F8FFFF;
-  border-color: #A9D5DE;
-  border-radius: '';
-  box-shadow: none;
-}
-
-.ui.form .field.info textarea:focus,
-.ui.form .field.info select:focus,
-.ui.form .field.info input:not([type]):focus,
-.ui.form .field.info input[type="date"]:focus,
-.ui.form .field.info input[type="datetime-local"]:focus,
-.ui.form .field.info input[type="email"]:focus,
-.ui.form .field.info input[type="number"]:focus,
-.ui.form .field.info input[type="password"]:focus,
-.ui.form .field.info input[type="search"]:focus,
-.ui.form .field.info input[type="tel"]:focus,
-.ui.form .field.info input[type="time"]:focus,
-.ui.form .field.info input[type="text"]:focus,
-.ui.form .field.info input[type="file"]:focus,
-.ui.form .field.info input[type="url"]:focus {
-  background: #F8FFFF;
-  border-color: #A9D5DE;
-  color: #276F86;
-  box-shadow: none;
-}
-
-/* Preserve Native Select Stylings */
-
-.ui.form .field.info select {
-  -webkit-appearance: menulist-button;
-}
-
-/*------------------
-        Input State
-    --------------------*/
-
-/* Transparent */
-
-.ui.form .field.info .transparent.input input,
-.ui.form .field.info .transparent.input textarea,
-.ui.form .field.info input.transparent,
-.ui.form .field.info textarea.transparent {
-  background-color: #F8FFFF !important;
-  color: #276F86 !important;
-}
-
-/* Autofilled */
-
-.ui.form .info.info input:-webkit-autofill {
-  box-shadow: 0 0 0 100px #F0FAFF inset !important;
-  border-color: #b3e0e0 !important;
-}
-
-/* Placeholder */
-
-.ui.form .info ::-webkit-input-placeholder {
-  color: #98cfe1;
-}
-
-.ui.form .info :-ms-input-placeholder {
-  color: #98cfe1 !important;
-}
-
-.ui.form .info ::-moz-placeholder {
-  color: #98cfe1;
-}
-
-.ui.form .info :focus::-webkit-input-placeholder {
-  color: #70bdd6;
-}
-
-.ui.form .info :focus:-ms-input-placeholder {
-  color: #70bdd6 !important;
-}
-
-.ui.form .info :focus::-moz-placeholder {
-  color: #70bdd6;
-}
-
-/*------------------
-        Dropdown State
-    --------------------*/
-
-.ui.form .fields.info .field .ui.dropdown,
-.ui.form .fields.info .field .ui.dropdown .item,
-.ui.form .field.info .ui.dropdown,
-.ui.form .field.info .ui.dropdown .text,
-.ui.form .field.info .ui.dropdown .item {
-  background: #F8FFFF;
-  color: #276F86;
-}
-
-.ui.form .fields.info .field .ui.dropdown,
-.ui.form .field.info .ui.dropdown {
-  border-color: #A9D5DE !important;
-}
-
-.ui.form .fields.info .field .ui.dropdown:hover,
-.ui.form .field.info .ui.dropdown:hover {
-  border-color: #A9D5DE !important;
-}
-
-.ui.form .fields.info .field .ui.dropdown:hover .menu,
-.ui.form .field.info .ui.dropdown:hover .menu {
-  border-color: #A9D5DE;
-}
-
-.ui.form .fields.info .field .ui.multiple.selection.dropdown > .label,
-.ui.form .field.info .ui.multiple.selection.dropdown > .label {
-  background-color: #cce3ea;
-  color: #276F86;
-}
-
-/* Hover */
-
-.ui.form .fields.info .field .ui.dropdown .menu .item:hover,
-.ui.form .field.info .ui.dropdown .menu .item:hover {
-  background-color: #e9f2fb;
-}
-
-/* Selected */
-
-.ui.form .fields.info .field .ui.dropdown .menu .selected.item,
-.ui.form .field.info .ui.dropdown .menu .selected.item {
-  background-color: #e9f2fb;
-}
-
-/* Active */
-
-.ui.form .fields.info .field .ui.dropdown .menu .active.item,
-.ui.form .field.info .ui.dropdown .menu .active.item {
-  background-color: #cef1fd !important;
-}
-
-/*--------------------
-        Checkbox State
-    ---------------------*/
-
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box {
-  color: #276F86;
-}
-
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before {
-  background: #F8FFFF;
-  border-color: #A9D5DE;
-}
-
-.ui.form .fields.info .field .checkbox label:after,
-.ui.form .field.info .checkbox label:after,
-.ui.form .fields.info .field .checkbox .box:after,
-.ui.form .field.info .checkbox .box:after {
-  color: #276F86;
-}
-
-/* On Form */
-
-.ui.form.success .success.message:not(:empty) {
-  display: block;
-}
-
-.ui.form.success .compact.success.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form.success .icon.success.message:not(:empty) {
-  display: flex;
-}
-
-/* On Field(s) */
-
-.ui.form .fields.success .success.message:not(:empty),
-.ui.form .field.success .success.message:not(:empty) {
-  display: block;
-}
-
-.ui.form .fields.success .compact.success.message:not(:empty),
-.ui.form .field.success .compact.success.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form .fields.success .icon.success.message:not(:empty),
-.ui.form .field.success .icon.success.message:not(:empty) {
-  display: flex;
-}
-
-.ui.ui.form .fields.success .field label,
-.ui.ui.form .field.success label,
-.ui.ui.form .fields.success .field .input,
-.ui.ui.form .field.success .input {
-  color: #2C662D;
-}
-
-.ui.form .fields.success .field .corner.label,
-.ui.form .field.success .corner.label {
-  border-color: #2C662D;
-  color: #FFFFFF;
-}
-
-.ui.form .fields.success .field textarea,
-.ui.form .fields.success .field select,
-.ui.form .fields.success .field input:not([type]),
-.ui.form .fields.success .field input[type="date"],
-.ui.form .fields.success .field input[type="datetime-local"],
-.ui.form .fields.success .field input[type="email"],
-.ui.form .fields.success .field input[type="number"],
-.ui.form .fields.success .field input[type="password"],
-.ui.form .fields.success .field input[type="search"],
-.ui.form .fields.success .field input[type="tel"],
-.ui.form .fields.success .field input[type="time"],
-.ui.form .fields.success .field input[type="text"],
-.ui.form .fields.success .field input[type="file"],
-.ui.form .fields.success .field input[type="url"],
-.ui.form .field.success textarea,
-.ui.form .field.success select,
-.ui.form .field.success input:not([type]),
-.ui.form .field.success input[type="date"],
-.ui.form .field.success input[type="datetime-local"],
-.ui.form .field.success input[type="email"],
-.ui.form .field.success input[type="number"],
-.ui.form .field.success input[type="password"],
-.ui.form .field.success input[type="search"],
-.ui.form .field.success input[type="tel"],
-.ui.form .field.success input[type="time"],
-.ui.form .field.success input[type="text"],
-.ui.form .field.success input[type="file"],
-.ui.form .field.success input[type="url"] {
-  color: #2C662D;
-  background: #FCFFF5;
-  border-color: #A3C293;
-  border-radius: '';
-  box-shadow: none;
-}
-
-.ui.form .field.success textarea:focus,
-.ui.form .field.success select:focus,
-.ui.form .field.success input:not([type]):focus,
-.ui.form .field.success input[type="date"]:focus,
-.ui.form .field.success input[type="datetime-local"]:focus,
-.ui.form .field.success input[type="email"]:focus,
-.ui.form .field.success input[type="number"]:focus,
-.ui.form .field.success input[type="password"]:focus,
-.ui.form .field.success input[type="search"]:focus,
-.ui.form .field.success input[type="tel"]:focus,
-.ui.form .field.success input[type="time"]:focus,
-.ui.form .field.success input[type="text"]:focus,
-.ui.form .field.success input[type="file"]:focus,
-.ui.form .field.success input[type="url"]:focus {
-  background: #FCFFF5;
-  border-color: #A3C293;
-  color: #2C662D;
-  box-shadow: none;
-}
-
-/* Preserve Native Select Stylings */
-
-.ui.form .field.success select {
-  -webkit-appearance: menulist-button;
-}
-
-/*------------------
-        Input State
-    --------------------*/
-
-/* Transparent */
-
-.ui.form .field.success .transparent.input input,
-.ui.form .field.success .transparent.input textarea,
-.ui.form .field.success input.transparent,
-.ui.form .field.success textarea.transparent {
-  background-color: #FCFFF5 !important;
-  color: #2C662D !important;
-}
-
-/* Autofilled */
-
-.ui.form .success.success input:-webkit-autofill {
-  box-shadow: 0 0 0 100px #F0FFF0 inset !important;
-  border-color: #bee0b3 !important;
-}
-
-/* Placeholder */
-
-.ui.form .success ::-webkit-input-placeholder {
-  color: #8fcf90;
-}
-
-.ui.form .success :-ms-input-placeholder {
-  color: #8fcf90 !important;
-}
-
-.ui.form .success ::-moz-placeholder {
-  color: #8fcf90;
-}
-
-.ui.form .success :focus::-webkit-input-placeholder {
-  color: #6cbf6d;
-}
-
-.ui.form .success :focus:-ms-input-placeholder {
-  color: #6cbf6d !important;
-}
-
-.ui.form .success :focus::-moz-placeholder {
-  color: #6cbf6d;
-}
-
-/*------------------
-        Dropdown State
-    --------------------*/
-
-.ui.form .fields.success .field .ui.dropdown,
-.ui.form .fields.success .field .ui.dropdown .item,
-.ui.form .field.success .ui.dropdown,
-.ui.form .field.success .ui.dropdown .text,
-.ui.form .field.success .ui.dropdown .item {
-  background: #FCFFF5;
-  color: #2C662D;
-}
-
-.ui.form .fields.success .field .ui.dropdown,
-.ui.form .field.success .ui.dropdown {
-  border-color: #A3C293 !important;
-}
-
-.ui.form .fields.success .field .ui.dropdown:hover,
-.ui.form .field.success .ui.dropdown:hover {
-  border-color: #A3C293 !important;
-}
-
-.ui.form .fields.success .field .ui.dropdown:hover .menu,
-.ui.form .field.success .ui.dropdown:hover .menu {
-  border-color: #A3C293;
-}
-
-.ui.form .fields.success .field .ui.multiple.selection.dropdown > .label,
-.ui.form .field.success .ui.multiple.selection.dropdown > .label {
-  background-color: #cceacc;
-  color: #2C662D;
-}
-
-/* Hover */
-
-.ui.form .fields.success .field .ui.dropdown .menu .item:hover,
-.ui.form .field.success .ui.dropdown .menu .item:hover {
-  background-color: #e9fbe9;
-}
-
-/* Selected */
-
-.ui.form .fields.success .field .ui.dropdown .menu .selected.item,
-.ui.form .field.success .ui.dropdown .menu .selected.item {
-  background-color: #e9fbe9;
-}
-
-/* Active */
-
-.ui.form .fields.success .field .ui.dropdown .menu .active.item,
-.ui.form .field.success .ui.dropdown .menu .active.item {
-  background-color: #dafdce !important;
-}
-
-/*--------------------
-        Checkbox State
-    ---------------------*/
-
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box {
-  color: #2C662D;
-}
-
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before {
-  background: #FCFFF5;
-  border-color: #A3C293;
-}
-
-.ui.form .fields.success .field .checkbox label:after,
-.ui.form .field.success .checkbox label:after,
-.ui.form .fields.success .field .checkbox .box:after,
-.ui.form .field.success .checkbox .box:after {
-  color: #2C662D;
-}
-
-/* On Form */
-
-.ui.form.warning .warning.message:not(:empty) {
-  display: block;
-}
-
-.ui.form.warning .compact.warning.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form.warning .icon.warning.message:not(:empty) {
-  display: flex;
-}
-
-/* On Field(s) */
-
-.ui.form .fields.warning .warning.message:not(:empty),
-.ui.form .field.warning .warning.message:not(:empty) {
-  display: block;
-}
-
-.ui.form .fields.warning .compact.warning.message:not(:empty),
-.ui.form .field.warning .compact.warning.message:not(:empty) {
-  display: inline-block;
-}
-
-.ui.form .fields.warning .icon.warning.message:not(:empty),
-.ui.form .field.warning .icon.warning.message:not(:empty) {
-  display: flex;
-}
-
-.ui.ui.form .fields.warning .field label,
-.ui.ui.form .field.warning label,
-.ui.ui.form .fields.warning .field .input,
-.ui.ui.form .field.warning .input {
-  color: #573A08;
-}
-
-.ui.form .fields.warning .field .corner.label,
-.ui.form .field.warning .corner.label {
-  border-color: #573A08;
-  color: #FFFFFF;
-}
-
-.ui.form .fields.warning .field textarea,
-.ui.form .fields.warning .field select,
-.ui.form .fields.warning .field input:not([type]),
-.ui.form .fields.warning .field input[type="date"],
-.ui.form .fields.warning .field input[type="datetime-local"],
-.ui.form .fields.warning .field input[type="email"],
-.ui.form .fields.warning .field input[type="number"],
-.ui.form .fields.warning .field input[type="password"],
-.ui.form .fields.warning .field input[type="search"],
-.ui.form .fields.warning .field input[type="tel"],
-.ui.form .fields.warning .field input[type="time"],
-.ui.form .fields.warning .field input[type="text"],
-.ui.form .fields.warning .field input[type="file"],
-.ui.form .fields.warning .field input[type="url"],
-.ui.form .field.warning textarea,
-.ui.form .field.warning select,
-.ui.form .field.warning input:not([type]),
-.ui.form .field.warning input[type="date"],
-.ui.form .field.warning input[type="datetime-local"],
-.ui.form .field.warning input[type="email"],
-.ui.form .field.warning input[type="number"],
-.ui.form .field.warning input[type="password"],
-.ui.form .field.warning input[type="search"],
-.ui.form .field.warning input[type="tel"],
-.ui.form .field.warning input[type="time"],
-.ui.form .field.warning input[type="text"],
-.ui.form .field.warning input[type="file"],
-.ui.form .field.warning input[type="url"] {
-  color: #573A08;
-  background: #FFFAF3;
-  border-color: #C9BA9B;
-  border-radius: '';
-  box-shadow: none;
-}
-
-.ui.form .field.warning textarea:focus,
-.ui.form .field.warning select:focus,
-.ui.form .field.warning input:not([type]):focus,
-.ui.form .field.warning input[type="date"]:focus,
-.ui.form .field.warning input[type="datetime-local"]:focus,
-.ui.form .field.warning input[type="email"]:focus,
-.ui.form .field.warning input[type="number"]:focus,
-.ui.form .field.warning input[type="password"]:focus,
-.ui.form .field.warning input[type="search"]:focus,
-.ui.form .field.warning input[type="tel"]:focus,
-.ui.form .field.warning input[type="time"]:focus,
-.ui.form .field.warning input[type="text"]:focus,
-.ui.form .field.warning input[type="file"]:focus,
-.ui.form .field.warning input[type="url"]:focus {
-  background: #FFFAF3;
-  border-color: #C9BA9B;
-  color: #573A08;
-  box-shadow: none;
-}
-
-/* Preserve Native Select Stylings */
-
-.ui.form .field.warning select {
-  -webkit-appearance: menulist-button;
-}
-
-/*------------------
-        Input State
-    --------------------*/
-
-/* Transparent */
-
-.ui.form .field.warning .transparent.input input,
-.ui.form .field.warning .transparent.input textarea,
-.ui.form .field.warning input.transparent,
-.ui.form .field.warning textarea.transparent {
-  background-color: #FFFAF3 !important;
-  color: #573A08 !important;
-}
-
-/* Autofilled */
-
-.ui.form .warning.warning input:-webkit-autofill {
-  box-shadow: 0 0 0 100px #FFFFe0 inset !important;
-  border-color: #e0e0b3 !important;
-}
-
-/* Placeholder */
-
-.ui.form .warning ::-webkit-input-placeholder {
-  color: #edad3e;
-}
-
-.ui.form .warning :-ms-input-placeholder {
-  color: #edad3e !important;
-}
-
-.ui.form .warning ::-moz-placeholder {
-  color: #edad3e;
-}
-
-.ui.form .warning :focus::-webkit-input-placeholder {
-  color: #e39715;
-}
-
-.ui.form .warning :focus:-ms-input-placeholder {
-  color: #e39715 !important;
-}
-
-.ui.form .warning :focus::-moz-placeholder {
-  color: #e39715;
-}
-
-/*------------------
-        Dropdown State
-    --------------------*/
-
-.ui.form .fields.warning .field .ui.dropdown,
-.ui.form .fields.warning .field .ui.dropdown .item,
-.ui.form .field.warning .ui.dropdown,
-.ui.form .field.warning .ui.dropdown .text,
-.ui.form .field.warning .ui.dropdown .item {
-  background: #FFFAF3;
-  color: #573A08;
-}
-
-.ui.form .fields.warning .field .ui.dropdown,
-.ui.form .field.warning .ui.dropdown {
-  border-color: #C9BA9B !important;
-}
-
-.ui.form .fields.warning .field .ui.dropdown:hover,
-.ui.form .field.warning .ui.dropdown:hover {
-  border-color: #C9BA9B !important;
-}
-
-.ui.form .fields.warning .field .ui.dropdown:hover .menu,
-.ui.form .field.warning .ui.dropdown:hover .menu {
-  border-color: #C9BA9B;
-}
-
-.ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label,
-.ui.form .field.warning .ui.multiple.selection.dropdown > .label {
-  background-color: #eaeacc;
-  color: #573A08;
-}
-
-/* Hover */
-
-.ui.form .fields.warning .field .ui.dropdown .menu .item:hover,
-.ui.form .field.warning .ui.dropdown .menu .item:hover {
-  background-color: #fbfbe9;
-}
-
-/* Selected */
-
-.ui.form .fields.warning .field .ui.dropdown .menu .selected.item,
-.ui.form .field.warning .ui.dropdown .menu .selected.item {
-  background-color: #fbfbe9;
-}
-
-/* Active */
-
-.ui.form .fields.warning .field .ui.dropdown .menu .active.item,
-.ui.form .field.warning .ui.dropdown .menu .active.item {
-  background-color: #fdfdce !important;
-}
-
-/*--------------------
-        Checkbox State
-    ---------------------*/
-
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label,
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box {
-  color: #573A08;
-}
-
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before,
-.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before,
-.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before {
-  background: #FFFAF3;
-  border-color: #C9BA9B;
-}
-
-.ui.form .fields.warning .field .checkbox label:after,
-.ui.form .field.warning .checkbox label:after,
-.ui.form .fields.warning .field .checkbox .box:after,
-.ui.form .field.warning .checkbox .box:after {
-  color: #573A08;
-}
-
-/*--------------------
-         Disabled
-  ---------------------*/
-
-.ui.form .disabled.fields .field,
-.ui.form .disabled.field,
-.ui.form .field :disabled {
-  pointer-events: none;
-  opacity: var(--opacity-disabled);
-}
-
-.ui.form .field.disabled > label,
-.ui.form .fields.disabled > label {
-  opacity: var(--opacity-disabled);
-}
-
-.ui.form .field.disabled :disabled {
-  opacity: 1;
-}
-
-/*--------------
-      Loading
-  ---------------*/
-
-.ui.loading.form {
-  position: relative;
-  cursor: default;
-  pointer-events: none;
-}
-
-.ui.loading.form:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 0;
-  background: rgba(255, 255, 255, 0.8);
-  width: 100%;
-  height: 100%;
-  z-index: 100;
-}
-
-.ui.loading.form.segments:before {
-  border-radius: 0.28571429rem;
-}
-
-.ui.loading.form:after {
-  position: absolute;
-  content: '';
-  top: 50%;
-  left: 50%;
-  margin: -1.5em 0 0 -1.5em;
-  width: 3em;
-  height: 3em;
-  animation: loader 0.6s infinite linear;
-  border: 0.2em solid #767676;
-  border-radius: 500rem;
-  box-shadow: 0 0 0 1px transparent;
-  visibility: visible;
-  z-index: 101;
-}
-
-/*******************************
-         Element Types
-*******************************/
-
-/*--------------------
-       Required Field
-  ---------------------*/
-
-.ui.form .required.fields:not(.grouped) > .field > label:after,
-.ui.form .required.fields.grouped > label:after,
-.ui.form .required.field > label:after,
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-.ui.form .required.field > .checkbox:after,
-.ui.form label.required:after {
-  margin: -0.2em 0 0 0.2em;
-  content: '*';
-  color: #DB2828;
-}
-
-.ui.form .required.fields:not(.grouped) > .field > label:after,
-.ui.form .required.fields.grouped > label:after,
-.ui.form .required.field > label:after,
-.ui.form label.required:after {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
-.ui.form .required.field > .checkbox:after {
-  position: absolute;
-  top: 0;
-  left: 100%;
-}
-
-/*******************************
-           Variations
-*******************************/
-
-/*--------------------
-       Field Groups
-  ---------------------*/
-
-/* Grouped Vertically */
-
-.ui.form .grouped.fields {
-  display: block;
-  margin: 0 0 1em;
-}
-
-.ui.form .grouped.fields:last-child {
-  margin-bottom: 0;
-}
-
-.ui.form .grouped.fields > label {
-  margin: 0 0 0.28571429rem 0;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 0.92857143em;
-  font-weight: 500;
-  text-transform: none;
-}
-
-.ui.form .grouped.fields .field,
-.ui.form .grouped.inline.fields .field {
-  display: block;
-  margin: 0.5em 0;
-  padding: 0;
-}
-
-.ui.form .grouped.inline.fields .ui.checkbox {
-  margin-bottom: 0.4em;
-}
-
-/*--------------------
-        Fields
----------------------*/
-
-/* Split fields */
-
-.ui.form .fields {
-  display: flex;
-  flex-direction: row;
-  margin: 0 -0.5em 1em;
-}
-
-.ui.form .fields > .field {
-  flex: 0 1 auto;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-}
-
-.ui.form .fields > .field:first-child {
-  border-left: none;
-  box-shadow: none;
-}
-
-/* Other Combinations */
-
-.ui.form .two.fields > .fields,
-.ui.form .two.fields > .field {
-  width: 50%;
-}
-
-.ui.form .three.fields > .fields,
-.ui.form .three.fields > .field {
-  width: 33.33333333%;
-}
-
-.ui.form .four.fields > .fields,
-.ui.form .four.fields > .field {
-  width: 25%;
-}
-
-.ui.form .five.fields > .fields,
-.ui.form .five.fields > .field {
-  width: 20%;
-}
-
-.ui.form .six.fields > .fields,
-.ui.form .six.fields > .field {
-  width: 16.66666667%;
-}
-
-.ui.form .seven.fields > .fields,
-.ui.form .seven.fields > .field {
-  width: 14.28571429%;
-}
-
-.ui.form .eight.fields > .fields,
-.ui.form .eight.fields > .field {
-  width: 12.5%;
-}
-
-.ui.form .nine.fields > .fields,
-.ui.form .nine.fields > .field {
-  width: 11.11111111%;
-}
-
-.ui.form .ten.fields > .fields,
-.ui.form .ten.fields > .field {
-  width: 10%;
+.ui.pointing.dropdown > .menu:not(.hidden):after {
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: '';
+  visibility: visible;
+  transform: rotate(45deg);
+  width: 0.5em;
+  height: 0.5em;
+  box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
+  background: #FFFFFF;
+  z-index: 2;
 }
 
-/* Swap to full width on mobile */
-
-@media only screen and (max-width: 767.98px) {
-  .ui.form .fields {
-    flex-wrap: wrap;
-    margin-bottom: 0;
-  }
-
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
-  .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
-    width: 100%;
-    margin: 0 0 1em;
-  }
+.ui.pointing.dropdown > .menu:not(.hidden):after {
+  top: -0.25em;
+  left: 50%;
+  margin: 0 0 0 -0.25em;
 }
 
-/* Sizing Combinations */
+/* Top Left Pointing */
 
-.ui.form .fields .wide.field {
-  width: 6.25%;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
+.ui.top.left.pointing.dropdown > .menu {
+  top: 100%;
+  bottom: auto;
+  left: 0;
+  right: auto;
+  margin: 1em 0 0;
 }
 
-.ui.form .one.wide.field {
-  width: 6.25%;
+.ui.top.left.pointing.dropdown > .menu {
+  top: 100%;
+  bottom: auto;
+  left: 0;
+  right: auto;
+  margin: 1em 0 0;
 }
 
-.ui.form .two.wide.field {
-  width: 12.5%;
+.ui.top.left.pointing.dropdown > .menu:after {
+  top: -0.25em;
+  left: 1em;
+  right: auto;
+  margin: 0;
+  transform: rotate(45deg);
 }
 
-.ui.form .three.wide.field {
-  width: 18.75%;
-}
+/* Top Right Pointing */
 
-.ui.form .four.wide.field {
-  width: 25%;
+.ui.top.right.pointing.dropdown > .menu {
+  top: 100%;
+  bottom: auto;
+  right: 0;
+  left: auto;
+  margin: 1em 0 0;
 }
 
-.ui.form .five.wide.field {
-  width: 31.25%;
+.ui.top.pointing.dropdown > .left.menu:after,
+.ui.top.right.pointing.dropdown > .menu:after {
+  top: -0.25em;
+  left: auto !important;
+  right: 1em !important;
+  margin: 0;
+  transform: rotate(45deg);
 }
 
-.ui.form .six.wide.field {
-  width: 37.5%;
-}
+/* Left Pointing */
 
-.ui.form .seven.wide.field {
-  width: 43.75%;
+.ui.left.pointing.dropdown > .menu {
+  top: 0;
+  left: 100%;
+  right: auto;
+  margin: 0 0 0 1em;
 }
 
-.ui.form .eight.wide.field {
-  width: 50%;
+.ui.left.pointing.dropdown > .menu:after {
+  top: 1em;
+  left: -0.25em;
+  margin: 0 0 0 0;
+  transform: rotate(-45deg);
 }
 
-.ui.form .nine.wide.field {
-  width: 56.25%;
+.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu {
+  left: auto !important;
+  right: 100% !important;
+  margin: 0 1em 0 0;
 }
 
-.ui.form .ten.wide.field {
-  width: 62.5%;
+.ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
+  top: 1em;
+  left: auto;
+  right: -0.25em;
+  margin: 0 0 0 0;
+  transform: rotate(135deg);
 }
 
-.ui.form .eleven.wide.field {
-  width: 68.75%;
-}
+/* Right Pointing */
 
-.ui.form .twelve.wide.field {
-  width: 75%;
+.ui.right.pointing.dropdown > .menu {
+  top: 0;
+  left: auto;
+  right: 100%;
+  margin: 0 1em 0 0;
 }
 
-.ui.form .thirteen.wide.field {
-  width: 81.25%;
+.ui.right.pointing.dropdown > .menu:after {
+  top: 1em;
+  left: auto;
+  right: -0.25em;
+  margin: 0 0 0 0;
+  transform: rotate(135deg);
 }
 
-.ui.form .fourteen.wide.field {
-  width: 87.5%;
-}
+/* Bottom Pointing */
 
-.ui.form .fifteen.wide.field {
-  width: 93.75%;
+.ui.bottom.pointing.dropdown > .menu {
+  top: auto;
+  bottom: 100%;
+  left: 0;
+  right: auto;
+  margin: 0 0 1em;
 }
 
-.ui.form .sixteen.wide.field {
-  width: 100%;
+.ui.bottom.pointing.dropdown > .menu:after {
+  top: auto;
+  bottom: -0.25em;
+  right: auto;
+  margin: 0;
+  transform: rotate(-135deg);
 }
 
-/*--------------------
-     Equal Width
----------------------*/
+/* Reverse Sub-Menu Direction */
 
-.ui[class*="equal width"].form .fields > .field,
-.ui.form [class*="equal width"].fields > .field {
-  width: 100%;
-  flex: 1 1 auto;
+.ui.bottom.pointing.dropdown > .menu .menu {
+  top: auto !important;
+  bottom: 0 !important;
 }
 
-/*--------------------
-      Inline Fields
-  ---------------------*/
+/* Bottom Left */
 
-.ui.form .inline.fields {
-  margin: 0 0 1em;
-  align-items: center;
+.ui.bottom.left.pointing.dropdown > .menu {
+  left: 0;
+  right: auto;
 }
 
-.ui.form .inline.fields .field {
-  margin: 0;
-  padding: 0 1em 0 0;
+.ui.bottom.left.pointing.dropdown > .menu:after {
+  left: 1em;
+  right: auto;
 }
 
-/* Inline Label */
+/* Bottom Right */
 
-.ui.form .inline.fields > label,
-.ui.form .inline.fields .field > label,
-.ui.form .inline.fields .field > p,
-.ui.form .inline.field > label,
-.ui.form .inline.field > p {
-  display: inline-block;
-  width: auto;
-  margin-top: 0;
-  margin-bottom: 0;
-  vertical-align: baseline;
-  font-size: 0.92857143em;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.87);
-  text-transform: none;
+.ui.bottom.right.pointing.dropdown > .menu {
+  right: 0;
+  left: auto;
 }
 
-/* Grouped Inline Label */
-
-.ui.form .inline.fields > label {
-  margin: 0.035714em 1em 0 0;
+.ui.bottom.right.pointing.dropdown > .menu:after {
+  left: auto;
+  right: 1em;
 }
 
-/* Inline Input */
-
-.ui.form .inline.fields .field > input,
-.ui.form .inline.fields .field > select,
-.ui.form .inline.field > input,
-.ui.form .inline.field > select {
-  display: inline-block;
-  width: auto;
-  margin-top: 0;
-  margin-bottom: 0;
-  vertical-align: middle;
-  font-size: 1em;
-}
+/* Upward pointing */
 
-.ui.form .inline.fields .field .calendar:not(.popup),
-.ui.form .inline.field .calendar:not(.popup) {
-  display: inline-block;
+.ui.pointing.upward.dropdown .menu,
+.ui.top.pointing.upward.dropdown .menu {
+  top: auto !important;
+  bottom: 100% !important;
+  margin: 0 0 0.78571429rem;
+  border-radius: 0.28571429rem;
 }
 
-.ui.form .inline.fields .field .calendar:not(.popup) > .input > input,
-.ui.form .inline.field .calendar:not(.popup) > .input > input {
-  width: 13.11em;
+.ui.pointing.upward.dropdown .menu:after,
+.ui.top.pointing.upward.dropdown .menu:after {
+  top: 100% !important;
+  bottom: auto !important;
+  box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15);
+  margin: -0.25em 0 0;
 }
 
-/* Label */
+/* Right Pointing Upward */
 
-.ui.form .inline.fields .field > :first-child,
-.ui.form .inline.field > :first-child {
-  margin: 0 0.85714286em 0 0;
+.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
+  top: auto !important;
+  bottom: 0 !important;
+  margin: 0 1em 0 0;
 }
 
-.ui.form .inline.fields .field > :only-child,
-.ui.form .inline.field > :only-child {
-  margin: 0;
+.ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+  top: auto !important;
+  bottom: 0 !important;
+  margin: 0 0 1em 0;
+  box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
 }
 
-/* Wide */
+/* Left Pointing Upward */
 
-.ui.form .inline.fields .wide.field {
-  display: flex;
-  align-items: center;
+.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
+  top: auto !important;
+  bottom: 0 !important;
+  margin: 0 0 0 1em;
 }
 
-.ui.form .inline.fields .wide.field > input,
-.ui.form .inline.fields .wide.field > select {
-  width: 100%;
+.ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
+  top: auto !important;
+  bottom: 0 !important;
+  margin: 0 0 1em 0;
+  box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
 }
 
 /*--------------------
         Sizes
 ---------------------*/
 
-.ui.form,
-.ui.form .field .dropdown,
-.ui.form .field .dropdown .menu > .item {
+.ui.dropdown,
+.ui.dropdown .menu > .item {
   font-size: 1rem;
 }
 
-.ui.mini.form,
-.ui.mini.form .field .dropdown,
-.ui.mini.form .field .dropdown .menu > .item {
+.ui.mini.dropdown,
+.ui.mini.dropdown .menu > .item {
   font-size: 0.78571429rem;
 }
 
-.ui.tiny.form,
-.ui.tiny.form .field .dropdown,
-.ui.tiny.form .field .dropdown .menu > .item {
+.ui.tiny.dropdown,
+.ui.tiny.dropdown .menu > .item {
   font-size: 0.85714286rem;
 }
 
-.ui.small.form,
-.ui.small.form .field .dropdown,
-.ui.small.form .field .dropdown .menu > .item {
+.ui.small.dropdown,
+.ui.small.dropdown .menu > .item {
   font-size: 0.92857143rem;
 }
 
-.ui.large.form,
-.ui.large.form .field .dropdown,
-.ui.large.form .field .dropdown .menu > .item {
+.ui.large.dropdown,
+.ui.large.dropdown .menu > .item {
   font-size: 1.14285714rem;
 }
 
-.ui.big.form,
-.ui.big.form .field .dropdown,
-.ui.big.form .field .dropdown .menu > .item {
+.ui.big.dropdown,
+.ui.big.dropdown .menu > .item {
   font-size: 1.28571429rem;
 }
 
-.ui.huge.form,
-.ui.huge.form .field .dropdown,
-.ui.huge.form .field .dropdown .menu > .item {
+.ui.huge.dropdown,
+.ui.huge.dropdown .menu > .item {
   font-size: 1.42857143rem;
 }
 
-.ui.massive.form,
-.ui.massive.form .field .dropdown,
-.ui.massive.form .field .dropdown .menu > .item {
+.ui.massive.dropdown,
+.ui.massive.dropdown .menu > .item {
   font-size: 1.71428571rem;
 }
 
@@ -6474,2010 +2266,1890 @@ select.ui.dropdown {
          Theme Overrides
 *******************************/
 
-/*******************************
-         Site Overrides
-*******************************/
-/*
- * # Fomantic - Menu
- * http://github.com/fomantic/Fomantic-UI/
- *
- *
- * Copyright 2015 Contributor
- * Released under the MIT license
- * http://opensource.org/licenses/MIT
- *
- */
-
-/*******************************
-            Standard
-*******************************/
-
-/*--------------
-      Menu
----------------*/
+/* Dropdown Carets */
 
-.ui.menu {
-  display: flex;
-  margin: 1rem 0;
-  font-family: var(--fonts-regular);
-  background: #FFFFFF;
+@font-face {
+  font-family: 'Dropdown';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
   font-weight: normal;
-  border: 1px solid rgba(34, 36, 38, 0.15);
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
-  border-radius: 0.28571429rem;
-  min-height: 2.85714286em;
-}
-
-.ui.menu:after {
-  content: '';
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.ui.menu:first-child {
-  margin-top: 0;
-}
-
-.ui.menu:last-child {
-  margin-bottom: 0;
-}
-
-/*--------------
-    Sub-Menu
----------------*/
-
-.ui.menu .menu {
-  margin: 0;
-}
-
-.ui.menu:not(.vertical) > .menu {
-  display: flex;
-}
-
-/*--------------
-      Item
----------------*/
-
-.ui.menu:not(.vertical) .item {
-  display: flex;
-  align-items: center;
+  font-style: normal;
 }
 
-.ui.menu .item {
-  position: relative;
-  vertical-align: middle;
+.ui.dropdown > .dropdown.icon {
+  font-family: 'Dropdown';
   line-height: 1;
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
-  flex: 0 0 auto;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  background: none;
-  padding: 0.92857143em 1.14285714em;
-  text-transform: none;
-  color: rgba(0, 0, 0, 0.87);
+  height: 1em;
+  width: 1.23em;
+  backface-visibility: hidden;
   font-weight: normal;
-  transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
-}
-
-.ui.menu > .item:first-child {
-  border-radius: 0.28571429rem 0 0 0.28571429rem;
-}
-
-/* Border */
-
-.ui.menu .item:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  right: 0;
-  height: 100%;
-  width: 1px;
-  background: rgba(34, 36, 38, 0.1);
-}
-
-/*--------------
-  Text Content
----------------*/
-
-.ui.menu .text.item > *,
-.ui.menu .item > a:not(.ui),
-.ui.menu .item > p:only-child {
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  user-select: text;
-  line-height: 1.3;
-}
-
-.ui.menu .item > p:first-child {
-  margin-top: 0;
+  font-style: normal;
+  text-align: center;
 }
 
-.ui.menu .item > p:last-child {
-  margin-bottom: 0;
+.ui.dropdown > .dropdown.icon {
+  width: auto;
 }
 
-/*--------------
-      Icons
----------------*/
-
-.ui.menu .item > i.icon {
-  opacity: 0.9;
-  float: none;
-  margin: 0 0.35714286em 0 0;
+.ui.dropdown > .dropdown.icon:before {
+  content: '\f0d7';
 }
 
-/*--------------
-     Button
----------------*/
+/* Sub Menu */
 
-.ui.menu:not(.vertical) .item > .button {
-  position: relative;
-  top: 0;
-  margin: -0.5em 0;
-  padding-bottom: 0.78571429em;
-  padding-top: 0.78571429em;
-  font-size: 1em;
+.ui.dropdown .menu .item .dropdown.icon:before {
+  content: '\f0da' ;
 }
 
-/*----------------
- Grid / Container
------------------*/
-
-.ui.menu > .grid,
-.ui.menu > .container {
-  display: flex;
-  align-items: inherit;
-  flex-direction: inherit;
+.ui.dropdown .item .left.dropdown.icon:before,
+.ui.dropdown .left.menu .item .dropdown.icon:before {
+  content: "\f0d9" ;
 }
 
-/*--------------
-     Inputs
----------------*/
-
-.ui.menu .item > .input {
-  width: 100%;
-}
+/* Vertical Menu Dropdown */
 
-.ui.menu:not(.vertical) .item > .input {
-  position: relative;
-  top: 0;
-  margin: -0.5em 0;
+.ui.vertical.menu .dropdown.item > .dropdown.icon:before {
+  content: "\f0da" ;
 }
 
-.ui.menu .item > .input input {
-  font-size: 1em;
-  padding-top: 0.57142857em;
-  padding-bottom: 0.57142857em;
+/* Icons for Reference
+.dropdown.down.icon {
+  content: "\f0d7";
 }
-
-/*--------------
-     Header
----------------*/
-
-.ui.menu .header.item,
-.ui.vertical.menu .header.item {
-  margin: 0;
-  background: '';
-  text-transform: normal;
-  font-weight: 500;
+.dropdown.up.icon {
+  content: "\f0d8";
 }
-
-.ui.vertical.menu .item > .header:not(.ui) {
-  margin: 0 0 0.5em;
-  font-size: 1em;
-  font-weight: 500;
+.dropdown.left.icon {
+  content: "\f0d9";
 }
-
-/*--------------
-    Dropdowns
----------------*/
-
-/* Dropdown Icon */
-
-.ui.menu .item > i.dropdown.icon {
-  padding: 0;
-  float: right;
-  margin: 0 0 0 1em;
+.dropdown.icon.icon {
+  content: "\f0da";
 }
+*/
 
-/* Menu */
+/*******************************
+        User Overrides
+*******************************/
+/*!
+ * # Fomantic-UI - Form
+ * http://github.com/fomantic/Fomantic-UI/
+ *
+ *
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
 
-.ui.menu .dropdown.item .menu {
-  min-width: calc(100% - 1px);
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
-  background: #FFFFFF;
-  margin: 0 0 0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-  flex-direction: column !important;
-}
+/*******************************
+            Elements
+*******************************/
 
-/* Menu Items */
+/*--------------------
+        Form
+---------------------*/
 
-.ui.menu .ui.dropdown .menu > .item {
-  margin: 0;
-  text-align: left;
-  font-size: 1em !important;
-  padding: 0.78571429em 1.14285714em !important;
-  background: transparent !important;
-  color: rgba(0, 0, 0, 0.87) !important;
-  text-transform: none !important;
-  font-weight: normal !important;
-  box-shadow: none !important;
-  transition: none !important;
+.ui.form {
+  position: relative;
+  max-width: 100%;
 }
 
-.ui.menu .ui.dropdown .menu > .item:hover {
-  background: rgba(0, 0, 0, 0.05) !important;
-  color: rgba(0, 0, 0, 0.95) !important;
-}
+/*--------------------
+        Content
+---------------------*/
 
-.ui.menu .ui.dropdown .menu > .selected.item {
-  background: rgba(0, 0, 0, 0.05) !important;
-  color: rgba(0, 0, 0, 0.95) !important;
+.ui.form > p {
+  margin: 1em 0;
 }
 
-.ui.menu .ui.dropdown .menu > .active.item {
-  background: rgba(0, 0, 0, 0.03) !important;
-  font-weight: 500 !important;
-  color: rgba(0, 0, 0, 0.95) !important;
+/*--------------------
+        Field
+---------------------*/
+
+.ui.form .field {
+  clear: both;
+  margin: 0 0 1em;
 }
 
-.ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
-  display: block;
+.ui.form .fields .fields,
+.ui.form .field:last-child,
+.ui.form .fields:last-child .field {
+  margin-bottom: 0;
 }
 
-.ui.menu .ui.dropdown .menu > .item > .icons,
-.ui.menu .ui.dropdown .menu > .item > i.icon:not(.dropdown) {
-  display: inline-block;
-  font-size: 1em !important;
-  float: none;
-  margin: 0 0.75em 0 0 !important;
+.ui.form .fields .field {
+  clear: both;
+  margin: 0;
 }
 
-/* Secondary */
+/*--------------------
+        Labels
+---------------------*/
 
-.ui.secondary.menu .dropdown.item > .menu,
-.ui.text.menu .dropdown.item > .menu {
-  border-radius: 0.28571429rem;
-  margin-top: 0.35714286em;
+.ui.form .field > label {
+  display: block;
+  margin: 0 0 0.28571429rem 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 0.92857143em;
+  font-weight: 500;
+  text-transform: none;
 }
 
-/* Pointing */
+/*--------------------
+    Standard Inputs
+---------------------*/
 
-.ui.menu .pointing.dropdown.item .menu {
-  margin-top: 0.75em;
+.ui.form textarea,
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="file"],
+.ui.form input[type="url"] {
+  width: 100%;
+  vertical-align: top;
 }
 
-/* Vertical */
+/* Set max height on unusual input */
 
-.ui.vertical.menu .dropdown.item > i.icon {
-  float: right;
-  content: "\f0da";
-  margin-left: 1em;
+.ui.form ::-webkit-datetime-edit,
+.ui.form ::-webkit-inner-spin-button {
+  height: 1.21428571em;
 }
 
-.ui.vertical.menu .dropdown.item .menu {
-  left: 100%;
-  /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
-  min-width: 0;
-  min-width: -moz-max-content;
-  min-width: max-content;
-  margin: 0 0 0 0;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
-  border-radius: 0 0.28571429rem 0.28571429rem 0.28571429rem;
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="file"],
+.ui.form input[type="url"] {
+  font-family: var(--fonts-regular);
+  margin: 0;
+  outline: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  line-height: 1.21428571em;
+  padding: 0.67857143em 1em;
+  font-size: 1em;
+  background: #FFFFFF;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 0.28571429rem;
+  box-shadow: 0 0 0 0 transparent inset;
+  transition: color 0.1s ease, border-color 0.1s ease;
 }
 
-.ui.vertical.menu .dropdown.item.upward .menu {
-  bottom: 0;
-}
+/* Text Area */
 
-.ui.vertical.menu .dropdown.item:not(.upward) .menu {
-  top: 0;
+.ui.input textarea,
+.ui.form textarea {
+  margin: 0;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  padding: 0.78571429em 1em;
+  background: #FFFFFF;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  outline: none;
+  color: rgba(0, 0, 0, 0.87);
+  border-radius: 0.28571429rem;
+  box-shadow: 0 0 0 0 transparent inset;
+  transition: color 0.1s ease, border-color 0.1s ease;
+  font-size: 1em;
+  font-family: var(--fonts-regular);
+  line-height: 1.2857;
+  resize: vertical;
 }
 
-.ui.vertical.menu .active.dropdown.item {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.ui.form textarea:not([rows]) {
+  height: 12em;
+  min-height: 8em;
+  max-height: 24em;
 }
 
-.ui.vertical.menu .dropdown.active.item {
-  box-shadow: none;
+.ui.form textarea,
+.ui.form input[type="checkbox"] {
+  vertical-align: top;
 }
 
-/* Evenly Divided */
+/*--------------------
+    Checkbox margin
+---------------------*/
 
-.ui.item.menu .dropdown .menu .item {
-  width: 100%;
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) label + .ui.ui.checkbox {
+  margin-top: 0.7em;
 }
 
-/*--------------
-     Labels
----------------*/
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.checkbox {
+  margin-top: 2.41428571em;
+}
 
-.ui.menu .item > .label:not(.floating) {
-  margin-left: 1em;
-  padding: 0.3em 0.78571429em;
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.toggle.checkbox {
+  margin-top: 2.21428571em;
 }
 
-.ui.vertical.menu .item > .label {
-  margin-top: -0.15em;
-  margin-bottom: -0.15em;
-  padding: 0.3em 0.78571429em;
+.ui.form .fields:not(.grouped):not(.inline) .field:not(:only-child) .ui.slider.checkbox {
+  margin-top: 2.61428571em;
 }
 
-.ui.menu .item > .floating.label {
-  padding: 0.3em 0.78571429em;
+.ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox {
+  margin-top: 0.6em;
 }
 
-.ui.menu .item > .label {
-  background: #999999;
-  color: #FFFFFF;
+.ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox {
+  margin-top: 0.5em;
 }
 
-.ui.menu .item > .image.label img {
-  margin: -0.2833em 0.8em -0.2833em -0.8em;
-  height: 1.5666em;
+.ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox {
+  margin-top: 0.7em;
 }
 
-/*--------------
-     Images
----------------*/
+/*--------------------------
+  Input w/ attached Button
+---------------------------*/
 
-.ui.menu .item > img:not(.ui) {
-  display: inline-block;
-  vertical-align: middle;
-  margin: -0.3em 0;
-  width: 2.5em;
+.ui.form input.attached {
+  width: auto;
 }
 
-.ui.vertical.menu .item > img:not(.ui):only-child {
+/*--------------------
+     Basic Select
+---------------------*/
+
+.ui.form select {
   display: block;
-  max-width: 100%;
-  width: auto;
+  height: auto;
+  width: 100%;
+  background: #FFFFFF;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 0.28571429rem;
+  box-shadow: 0 0 0 0 transparent inset;
+  padding: 0.62em 1em;
+  color: rgba(0, 0, 0, 0.87);
+  transition: color 0.1s ease, border-color 0.1s ease;
 }
 
-/*******************************
-          Coupling
-*******************************/
-
-/*--------------
-     List
----------------*/
+/*--------------------
+       Dropdown
+---------------------*/
 
-/* Menu divider shouldnt apply */
+/* Block */
 
-.ui.menu .list .item:before {
-  background: none !important;
+.ui.form .field > .selection.dropdown {
+  min-width: auto;
+  width: 100%;
 }
 
-/*--------------
-       Sidebar
-  ---------------*/
+.ui.form .field > .selection.dropdown > .dropdown.icon {
+  float: right;
+}
 
-/* Show vertical dividers below last */
+/* Inline */
 
-.ui.vertical.sidebar.menu > .item:first-child:before {
-  display: block !important;
+.ui.form .inline.fields .field > .selection.dropdown,
+.ui.form .inline.field > .selection.dropdown {
+  width: auto;
 }
 
-.ui.vertical.sidebar.menu > .item::before {
-  top: auto;
-  bottom: 0;
+.ui.form .inline.fields .field > .selection.dropdown > .dropdown.icon,
+.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
+  float: none;
 }
 
-/*--------------
-    Container
----------------*/
+/*--------------------
+       UI Input
+---------------------*/
 
-@media only screen and (max-width: 767.98px) {
-  .ui.menu > .ui.container {
-    width: 100% !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
+/* Block */
+
+.ui.form .field .ui.input,
+.ui.form .fields .field .ui.input,
+.ui.form .wide.field .ui.input {
+  width: 100%;
 }
 
-@media only screen and (min-width: 768px) {
-  .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
-    border-left: 1px solid rgba(34, 36, 38, 0.1);
-  }
+/* Inline  */
 
-  .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child,
-  .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child {
-    border-right: 1px solid rgba(34, 36, 38, 0.1);
-  }
+.ui.form .inline.fields .field:not(.wide) .ui.input,
+.ui.form .inline.field:not(.wide) .ui.input {
+  width: auto;
+  vertical-align: middle;
 }
 
-/*******************************
-             States
-*******************************/
-
-/*--------------
-      Hover
----------------*/
+/* Auto Input */
 
-.ui.link.menu .item:hover,
-.ui.menu .dropdown.item:hover,
-.ui.menu .link.item:hover,
-.ui.menu a.item:hover {
-  cursor: pointer;
-  background: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .fields .field .ui.input input,
+.ui.form .field .ui.input input {
+  width: auto;
 }
 
-/*--------------
-     Pressed
----------------*/
+/* Full Width Input */
 
-.ui.link.menu .item:active,
-.ui.menu .link.item:active,
-.ui.menu a.item:active {
-  background: rgba(0, 0, 0, 0.03);
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .ten.fields .ui.input input,
+.ui.form .nine.fields .ui.input input,
+.ui.form .eight.fields .ui.input input,
+.ui.form .seven.fields .ui.input input,
+.ui.form .six.fields .ui.input input,
+.ui.form .five.fields .ui.input input,
+.ui.form .four.fields .ui.input input,
+.ui.form .three.fields .ui.input input,
+.ui.form .two.fields .ui.input input,
+.ui.form .wide.field .ui.input input {
+  flex: 1 0 auto;
+  width: 0;
 }
 
-/*--------------
-     Active
----------------*/
+/*--------------------
+   Types of Messages
+---------------------*/
 
-.ui.menu .active.item {
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-  font-weight: normal;
-  box-shadow: none;
+.ui.form .error.message,
+.ui.form .error.message:empty {
+  display: none;
 }
 
-.ui.menu .active.item > i.icon {
-  opacity: 1;
+.ui.form .info.message,
+.ui.form .info.message:empty {
+  display: none;
 }
 
-/*--------------
-  Active Hover
----------------*/
-
-.ui.menu .active.item:hover,
-.ui.vertical.menu .active.item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .success.message,
+.ui.form .success.message:empty {
+  display: none;
 }
 
-/*--------------
-     Disabled
----------------*/
-
-.ui.ui.menu .item.disabled {
-  cursor: default;
-  background-color: transparent;
-  color: rgba(40, 40, 40, 0.3);
-  pointer-events: none;
+.ui.form .warning.message,
+.ui.form .warning.message:empty {
+  display: none;
 }
 
-/*******************************
-             Types
-*******************************/
-
-/*------------------
-Floated Menu / Item
--------------------*/
-
-/* Left Floated */
+/* Assumptions */
 
-.ui.menu:not(.vertical) .left.item,
-.ui.menu:not(.vertical) .left.menu {
-  display: flex;
-  margin-right: auto !important;
+.ui.form .message:first-child {
+  margin-top: 0;
 }
 
-/* Right Floated */
-
-.ui.menu:not(.vertical) .right.item,
-.ui.menu:not(.vertical) .right.menu {
-  display: flex;
-  margin-left: auto !important;
-}
+/*--------------------
+   Validation Prompt
+---------------------*/
 
-.ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
-.ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
-  display: inherit;
+.ui.form .field .prompt.label {
+  white-space: normal;
+  background: #FFFFFF !important;
+  border: 1px solid #E0B4B4 !important;
+  color: #9F3A38 !important;
 }
 
-/* Center */
-
-.ui.menu:not(.vertical) .center.item,
-.ui.menu:not(.vertical) .center.menu {
-  display: flex;
-  margin-left: auto !important;
-  margin-right: auto !important;
+.ui.form .inline.fields .field .prompt,
+.ui.form .inline.field .prompt {
+  vertical-align: top;
+  margin: -0.25em 0 -0.5em 0.5em;
 }
 
-/* Swapped Borders */
-
-.ui.menu .right.item::before,
-.ui.menu .right.menu > .item::before {
+.ui.form .inline.fields .field .prompt:before,
+.ui.form .inline.field .prompt:before {
+  border-width: 0 0 1px 1px;
+  bottom: auto;
   right: auto;
+  top: 50%;
   left: 0;
 }
 
-/* Remove Outer Borders */
+/*******************************
+            States
+*******************************/
+
+/*--------------------
+      Autofilled
+---------------------*/
 
-.ui.menu .center.item:last-child::before,
-.ui.menu .center.menu > .item:last-child::before {
-  display: none;
+.ui.form .field.field input:-webkit-autofill {
+  box-shadow: 0 0 0 100px #FFFFF0 inset !important;
+  border-color: #E5DFA1 !important;
 }
 
-/*--------------
-      Vertical
-  ---------------*/
+/* Focus */
 
-.ui.vertical.menu {
-  display: block;
-  flex-direction: column;
-  background: #FFFFFF;
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
+.ui.form .field.field input:-webkit-autofill:focus {
+  box-shadow: 0 0 0 100px #FFFFF0 inset !important;
+  border-color: #D5C315 !important;
 }
 
-/*--- Item ---*/
+/*--------------------
+      Placeholder
+---------------------*/
 
-.ui.vertical.menu .item {
-  display: block;
-  background: none;
-  border-top: none;
-  border-right: none;
-}
+/* browsers require these rules separate */
 
-.ui.vertical.menu > .item:first-child {
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
+.ui.form ::-webkit-input-placeholder {
+  color: rgba(191, 191, 191, 0.87);
 }
 
-.ui.vertical.menu > .item:last-child {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
+.ui.form :-ms-input-placeholder {
+  color: rgba(191, 191, 191, 0.87) !important;
 }
 
-/*--- Label ---*/
-
-.ui.vertical.menu .item > .label {
-  float: right;
-  text-align: center;
+.ui.form ::-moz-placeholder {
+  color: rgba(191, 191, 191, 0.87);
 }
 
-/*--- Icon ---*/
+.ui.form :focus::-webkit-input-placeholder {
+  color: rgba(115, 115, 115, 0.87);
+}
 
-.ui.vertical.menu .item > i.icon,
-.ui.vertical.menu .item > i.icons {
-  width: 1.18em;
-  float: right;
-  margin: 0 0 0 0.5em;
+.ui.form :focus:-ms-input-placeholder {
+  color: rgba(115, 115, 115, 0.87) !important;
 }
 
-.ui.vertical.menu .item > .label + i.icon {
-  float: none;
-  margin: 0 0.5em 0 0;
+.ui.form :focus::-moz-placeholder {
+  color: rgba(115, 115, 115, 0.87);
 }
 
-/*--- Border ---*/
+/*--------------------
+        Focus
+---------------------*/
 
-.ui.vertical.menu .item:before {
-  position: absolute;
-  content: '';
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: rgba(34, 36, 38, 0.1);
+.ui.form input:not([type]):focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="file"]:focus,
+.ui.form input[type="url"]:focus {
+  color: rgba(0, 0, 0, 0.95);
+  border-color: #85B7D9;
+  border-radius: 0.28571429rem;
+  background: #FFFFFF;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
 }
 
-.ui.vertical.menu .item:first-child:before {
-  display: none !important;
+.ui.form .ui.action.input:not([class*="left action"]) input:not([type]):focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="date"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="datetime-local"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="email"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="number"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="password"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="search"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="tel"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="time"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="text"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="file"]:focus,
+.ui.form .ui.action.input:not([class*="left action"]) input[type="url"]:focus {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-/*--- Sub Menu ---*/
+.ui.form .ui[class*="left action"].input input:not([type]),
+.ui.form .ui[class*="left action"].input input[type="date"],
+.ui.form .ui[class*="left action"].input input[type="datetime-local"],
+.ui.form .ui[class*="left action"].input input[type="email"],
+.ui.form .ui[class*="left action"].input input[type="number"],
+.ui.form .ui[class*="left action"].input input[type="password"],
+.ui.form .ui[class*="left action"].input input[type="search"],
+.ui.form .ui[class*="left action"].input input[type="tel"],
+.ui.form .ui[class*="left action"].input input[type="time"],
+.ui.form .ui[class*="left action"].input input[type="text"],
+.ui.form .ui[class*="left action"].input input[type="file"],
+.ui.form .ui[class*="left action"].input input[type="url"] {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
 
-.ui.vertical.menu .item > .menu {
-  margin: 0.5em -1.14285714em 0;
+.ui.form textarea:focus {
+  color: rgba(0, 0, 0, 0.95);
+  border-color: #85B7D9;
+  border-radius: 0.28571429rem;
+  background: #FFFFFF;
+  box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.35) inset;
+  -webkit-appearance: none;
 }
 
-.ui.vertical.menu .menu .item {
-  background: none;
-  padding: 0.5em 1.33333333em;
-  font-size: 0.85714286em;
-  color: rgba(0, 0, 0, 0.5);
+/*--------------------
+          States
+  ---------------------*/
+
+/* On Form */
+
+.ui.form.error .error.message:not(:empty) {
+  display: block;
 }
 
-.ui.vertical.menu .item .menu a.item:hover,
-.ui.vertical.menu .item .menu .link.item:hover {
-  color: rgba(0, 0, 0, 0.85);
+.ui.form.error .compact.error.message:not(:empty) {
+  display: inline-block;
 }
 
-.ui.vertical.menu .menu .item:before {
-  display: none;
+.ui.form.error .icon.error.message:not(:empty) {
+  display: flex;
 }
 
-/* Vertical Active */
+/* On Field(s) */
 
-.ui.vertical.menu .active.item {
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 0;
-  box-shadow: none;
+.ui.form .fields.error .error.message:not(:empty),
+.ui.form .field.error .error.message:not(:empty) {
+  display: block;
 }
 
-.ui.vertical.menu > .active.item:first-child {
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
+.ui.form .fields.error .compact.error.message:not(:empty),
+.ui.form .field.error .compact.error.message:not(:empty) {
+  display: inline-block;
 }
 
-.ui.vertical.menu > .active.item:last-child {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
+.ui.form .fields.error .icon.error.message:not(:empty),
+.ui.form .field.error .icon.error.message:not(:empty) {
+  display: flex;
 }
 
-.ui.vertical.menu > .active.item:only-child {
-  border-radius: 0.28571429rem;
+.ui.ui.form .fields.error .field label,
+.ui.ui.form .field.error label,
+.ui.ui.form .fields.error .field .input,
+.ui.ui.form .field.error .input {
+  color: #9F3A38;
 }
 
-.ui.vertical.menu .active.item .menu .active.item {
-  border-left: none;
+.ui.form .fields.error .field .corner.label,
+.ui.form .field.error .corner.label {
+  border-color: #9F3A38;
+  color: #FFFFFF;
+}
+
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type="date"],
+.ui.form .fields.error .field input[type="datetime-local"],
+.ui.form .fields.error .field input[type="email"],
+.ui.form .fields.error .field input[type="number"],
+.ui.form .fields.error .field input[type="password"],
+.ui.form .fields.error .field input[type="search"],
+.ui.form .fields.error .field input[type="tel"],
+.ui.form .fields.error .field input[type="time"],
+.ui.form .fields.error .field input[type="text"],
+.ui.form .fields.error .field input[type="file"],
+.ui.form .fields.error .field input[type="url"],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type="date"],
+.ui.form .field.error input[type="datetime-local"],
+.ui.form .field.error input[type="email"],
+.ui.form .field.error input[type="number"],
+.ui.form .field.error input[type="password"],
+.ui.form .field.error input[type="search"],
+.ui.form .field.error input[type="tel"],
+.ui.form .field.error input[type="time"],
+.ui.form .field.error input[type="text"],
+.ui.form .field.error input[type="file"],
+.ui.form .field.error input[type="url"] {
+  color: #9F3A38;
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  border-radius: '';
+  box-shadow: none;
 }
 
-.ui.vertical.menu .item .menu .active.item {
-  background-color: transparent;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .field.error textarea:focus,
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type="date"]:focus,
+.ui.form .field.error input[type="datetime-local"]:focus,
+.ui.form .field.error input[type="email"]:focus,
+.ui.form .field.error input[type="number"]:focus,
+.ui.form .field.error input[type="password"]:focus,
+.ui.form .field.error input[type="search"]:focus,
+.ui.form .field.error input[type="tel"]:focus,
+.ui.form .field.error input[type="time"]:focus,
+.ui.form .field.error input[type="text"]:focus,
+.ui.form .field.error input[type="file"]:focus,
+.ui.form .field.error input[type="url"]:focus {
+  background: #FFF6F6;
+  border-color: #E0B4B4;
+  color: #9F3A38;
+  box-shadow: none;
 }
 
-/*--------------
-       Tabular
-  ---------------*/
+/* Preserve Native Select Stylings */
 
-.ui.tabular.menu {
-  border-radius: 0;
-  box-shadow: none !important;
-  border: none;
-  background: none transparent;
-  border-bottom: 1px solid #D4D4D5;
+.ui.form .field.error select {
+  -webkit-appearance: menulist-button;
 }
 
-.ui.tabular.fluid.menu {
-  width: calc(100% + 2px) !important;
-}
+/*------------------
+        Input State
+    --------------------*/
 
-.ui.tabular.menu .item {
-  background: transparent;
-  border-bottom: none;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-top: 2px solid transparent;
-  padding: 0.92857143em 1.42857143em;
-  color: rgba(0, 0, 0, 0.87);
-}
+/* Transparent */
 
-.ui.tabular.menu .item:before {
-  display: none;
+.ui.form .field.error .transparent.input input,
+.ui.form .field.error .transparent.input textarea,
+.ui.form .field.error input.transparent,
+.ui.form .field.error textarea.transparent {
+  background-color: #FFF6F6 !important;
+  color: #9F3A38 !important;
 }
 
-/* Hover */
+/* Autofilled */
 
-.ui.tabular.menu .item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.8);
+.ui.form .error.error input:-webkit-autofill {
+  box-shadow: 0 0 0 100px #FFFAF0 inset !important;
+  border-color: #E0B4B4 !important;
 }
 
-/* Active */
+/* Placeholder */
 
-.ui.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-top-width: 1px;
-  border-color: #D4D4D5;
-  font-weight: 500;
-  margin-bottom: -1px;
-  box-shadow: none;
-  border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
+.ui.form .error ::-webkit-input-placeholder {
+  color: #e7bdbc;
 }
 
-/* Coupling with segment for attachment */
-
-.ui.tabular.menu + .attached:not(.top).segment,
-.ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
-  border-top: none;
-  margin-left: 0;
-  margin-top: 0;
-  margin-right: 0;
-  width: 100%;
+.ui.form .error :-ms-input-placeholder {
+  color: #e7bdbc !important;
 }
 
-.top.attached.segment + .ui.bottom.tabular.menu {
-  position: relative;
-  width: calc(100% + 2px);
-  left: -1px;
+.ui.form .error ::-moz-placeholder {
+  color: #e7bdbc;
 }
 
-/* Bottom Vertical Tabular */
-
-.ui.bottom.tabular.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none !important;
-  border-bottom: none;
-  border-top: 1px solid #D4D4D5;
+.ui.form .error :focus::-webkit-input-placeholder {
+  color: #da9796;
 }
 
-.ui.bottom.tabular.menu .item {
-  background: none;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-top: none;
+.ui.form .error :focus:-ms-input-placeholder {
+  color: #da9796 !important;
 }
 
-.ui.bottom.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #D4D4D5;
-  margin: -1px 0 0 0;
-  border-radius: 0 0 0.28571429rem 0.28571429rem !important;
+.ui.form .error :focus::-moz-placeholder {
+  color: #da9796;
 }
 
-/* Vertical Tabular (Left) */
-
-.ui.vertical.tabular.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none !important;
-  border-bottom: none;
-  border-right: 1px solid #D4D4D5;
-}
+/*------------------
+        Dropdown State
+    --------------------*/
 
-.ui.vertical.tabular.menu .item {
-  background: none;
-  border-left: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-right: none;
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .fields.error .field .ui.dropdown .item,
+.ui.form .field.error .ui.dropdown,
+.ui.form .field.error .ui.dropdown .text,
+.ui.form .field.error .ui.dropdown .item {
+  background: #FFF6F6;
+  color: #9F3A38;
 }
 
-.ui.vertical.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #D4D4D5;
-  margin: 0 -1px 0 0;
-  border-radius: 0.28571429rem 0 0 0.28571429rem !important;
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .field.error .ui.dropdown {
+  border-color: #E0B4B4 !important;
 }
 
-/* Vertical Right Tabular */
-
-.ui.vertical.right.tabular.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none !important;
-  border-bottom: none;
-  border-right: none;
-  border-left: 1px solid #D4D4D5;
+.ui.form .fields.error .field .ui.dropdown:hover,
+.ui.form .field.error .ui.dropdown:hover {
+  border-color: #E0B4B4 !important;
 }
 
-.ui.vertical.right.tabular.menu .item {
-  background: none;
-  border-right: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  border-top: 1px solid transparent;
-  border-left: none;
+.ui.form .fields.error .field .ui.dropdown:hover .menu,
+.ui.form .field.error .ui.dropdown:hover .menu {
+  border-color: #E0B4B4;
 }
 
-.ui.vertical.right.tabular.menu .active.item {
-  background: none #FFFFFF;
-  color: rgba(0, 0, 0, 0.95);
-  border-color: #D4D4D5;
-  margin: 0 0 0 -1px;
-  border-radius: 0 0.28571429rem 0.28571429rem 0 !important;
+.ui.form .fields.error .field .ui.multiple.selection.dropdown > .label,
+.ui.form .field.error .ui.multiple.selection.dropdown > .label {
+  background-color: #EACBCB;
+  color: #9F3A38;
 }
 
-/* Dropdown */
+/* Hover */
 
-.ui.tabular.menu .active.dropdown.item {
-  margin-bottom: 0;
-  border-left: 1px solid transparent;
-  border-right: 1px solid transparent;
-  border-top: 2px solid transparent;
-  border-bottom: none;
+.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
+.ui.form .field.error .ui.dropdown .menu .item:hover {
+  background-color: #FBE7E7;
 }
 
-/*--------------
-     Pagination
-  ---------------*/
+/* Selected */
 
-.ui.pagination.menu {
-  margin: 0;
-  display: inline-flex;
-  vertical-align: middle;
+.ui.form .fields.error .field .ui.dropdown .menu .selected.item,
+.ui.form .field.error .ui.dropdown .menu .selected.item {
+  background-color: #FBE7E7;
 }
 
-.ui.pagination.menu .item:last-child {
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-}
+/* Active */
 
-.ui.compact.menu .item:last-child {
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
+.ui.form .fields.error .field .ui.dropdown .menu .active.item,
+.ui.form .field.error .ui.dropdown .menu .active.item {
+  background-color: #FDCFCF !important;
 }
 
-.ui.pagination.menu .item:last-child:before {
-  display: none;
-}
+/*--------------------
+        Checkbox State
+    ---------------------*/
 
-.ui.pagination.menu .item {
-  min-width: 3em;
-  text-align: center;
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
+  color: #9F3A38;
 }
 
-.ui.pagination.menu .icon.item i.icon {
-  vertical-align: top;
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
+  background: #FFF6F6;
+  border-color: #E0B4B4;
 }
 
-/* Active */
-
-.ui.pagination.menu .active.item {
-  border-top: none;
-  padding-top: 0.92857143em;
-  background-color: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-  box-shadow: none;
+.ui.form .fields.error .field .checkbox label:after,
+.ui.form .field.error .checkbox label:after,
+.ui.form .fields.error .field .checkbox .box:after,
+.ui.form .field.error .checkbox .box:after {
+  color: #9F3A38;
 }
 
-/*--------------
-     Secondary
-  ---------------*/
+/* On Form */
 
-.ui.secondary.menu {
-  background: none;
-  margin-left: -0.35714286em;
-  margin-right: -0.35714286em;
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
+.ui.form.info .info.message:not(:empty) {
+  display: block;
 }
 
-/* Item */
-
-.ui.secondary.menu .item {
-  align-self: center;
-  box-shadow: none;
-  border: none;
-  padding: 0.78571429em 0.92857143em;
-  margin: 0 0.35714286em;
-  background: none;
-  transition: color 0.1s ease;
-  border-radius: 0.28571429rem;
+.ui.form.info .compact.info.message:not(:empty) {
+  display: inline-block;
 }
 
-/* No Divider */
-
-.ui.secondary.menu .item:before {
-  display: none !important;
+.ui.form.info .icon.info.message:not(:empty) {
+  display: flex;
 }
 
-/* Header */
+/* On Field(s) */
 
-.ui.secondary.menu .header.item {
-  border-radius: 0;
-  border-right: none;
-  background: none transparent;
+.ui.form .fields.info .info.message:not(:empty),
+.ui.form .field.info .info.message:not(:empty) {
+  display: block;
 }
 
-/* Image */
-
-.ui.secondary.menu .item > img:not(.ui) {
-  margin: 0;
+.ui.form .fields.info .compact.info.message:not(:empty),
+.ui.form .field.info .compact.info.message:not(:empty) {
+  display: inline-block;
 }
 
-/* Hover */
-
-.ui.secondary.menu .dropdown.item:hover,
-.ui.secondary.menu .link.item:hover,
-.ui.secondary.menu a.item:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .fields.info .icon.info.message:not(:empty),
+.ui.form .field.info .icon.info.message:not(:empty) {
+  display: flex;
 }
 
-/* Active */
-
-.ui.secondary.menu .active.item {
-  box-shadow: none;
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-  border-radius: 0.28571429rem;
+.ui.ui.form .fields.info .field label,
+.ui.ui.form .field.info label,
+.ui.ui.form .fields.info .field .input,
+.ui.ui.form .field.info .input {
+  color: #276F86;
 }
 
-/* Active Hover */
+.ui.form .fields.info .field .corner.label,
+.ui.form .field.info .corner.label {
+  border-color: #276F86;
+  color: #FFFFFF;
+}
 
-.ui.secondary.menu .active.item:hover {
+.ui.form .fields.info .field textarea,
+.ui.form .fields.info .field select,
+.ui.form .fields.info .field input:not([type]),
+.ui.form .fields.info .field input[type="date"],
+.ui.form .fields.info .field input[type="datetime-local"],
+.ui.form .fields.info .field input[type="email"],
+.ui.form .fields.info .field input[type="number"],
+.ui.form .fields.info .field input[type="password"],
+.ui.form .fields.info .field input[type="search"],
+.ui.form .fields.info .field input[type="tel"],
+.ui.form .fields.info .field input[type="time"],
+.ui.form .fields.info .field input[type="text"],
+.ui.form .fields.info .field input[type="file"],
+.ui.form .fields.info .field input[type="url"],
+.ui.form .field.info textarea,
+.ui.form .field.info select,
+.ui.form .field.info input:not([type]),
+.ui.form .field.info input[type="date"],
+.ui.form .field.info input[type="datetime-local"],
+.ui.form .field.info input[type="email"],
+.ui.form .field.info input[type="number"],
+.ui.form .field.info input[type="password"],
+.ui.form .field.info input[type="search"],
+.ui.form .field.info input[type="tel"],
+.ui.form .field.info input[type="time"],
+.ui.form .field.info input[type="text"],
+.ui.form .field.info input[type="file"],
+.ui.form .field.info input[type="url"] {
+  color: #276F86;
+  background: #F8FFFF;
+  border-color: #A9D5DE;
+  border-radius: '';
   box-shadow: none;
-  background: rgba(0, 0, 0, 0.05);
-  color: rgba(0, 0, 0, 0.95);
-}
-
-/* Fix item margins */
-
-.ui.secondary.item.menu {
-  margin-left: 0;
-  margin-right: 0;
 }
 
-.ui.secondary.item.menu .item:last-child {
-  margin-right: 0;
-}
-
-.ui.secondary.attached.menu {
+.ui.form .field.info textarea:focus,
+.ui.form .field.info select:focus,
+.ui.form .field.info input:not([type]):focus,
+.ui.form .field.info input[type="date"]:focus,
+.ui.form .field.info input[type="datetime-local"]:focus,
+.ui.form .field.info input[type="email"]:focus,
+.ui.form .field.info input[type="number"]:focus,
+.ui.form .field.info input[type="password"]:focus,
+.ui.form .field.info input[type="search"]:focus,
+.ui.form .field.info input[type="tel"]:focus,
+.ui.form .field.info input[type="time"]:focus,
+.ui.form .field.info input[type="text"]:focus,
+.ui.form .field.info input[type="file"]:focus,
+.ui.form .field.info input[type="url"]:focus {
+  background: #F8FFFF;
+  border-color: #A9D5DE;
+  color: #276F86;
   box-shadow: none;
 }
 
-/*---------------------
-       Secondary Vertical
-    -----------------------*/
-
-/* Sub Menu */
+/* Preserve Native Select Stylings */
 
-.ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
-  margin: 0 -0.92857143em;
+.ui.form .field.info select {
+  -webkit-appearance: menulist-button;
 }
 
-.ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
-  margin: 0;
-  padding: 0.5em 1.33333333em;
-}
+/*------------------
+        Input State
+    --------------------*/
 
-.ui.secondary.vertical.menu > .item {
-  border: none;
-  margin: 0 0 0.35714286em;
-  border-radius: 0.28571429rem !important;
-}
+/* Transparent */
 
-.ui.secondary.vertical.menu > .header.item {
-  border-radius: 0;
+.ui.form .field.info .transparent.input input,
+.ui.form .field.info .transparent.input textarea,
+.ui.form .field.info input.transparent,
+.ui.form .field.info textarea.transparent {
+  background-color: #F8FFFF !important;
+  color: #276F86 !important;
 }
 
-/* Sub Menu */
+/* Autofilled */
 
-.ui.vertical.secondary.menu .item > .menu .item {
-  background-color: transparent;
+.ui.form .info.info input:-webkit-autofill {
+  box-shadow: 0 0 0 100px #F0FAFF inset !important;
+  border-color: #b3e0e0 !important;
 }
 
-/* Inverted */
+/* Placeholder */
 
-.ui.secondary.inverted.menu {
-  background-color: transparent;
+.ui.form .info ::-webkit-input-placeholder {
+  color: #98cfe1;
 }
 
-/*---------------------
-       Secondary Pointing
-    -----------------------*/
-
-.ui.secondary.pointing.menu {
-  margin-left: 0;
-  margin-right: 0;
-  border-bottom: 2px solid rgba(34, 36, 38, 0.15);
+.ui.form .info :-ms-input-placeholder {
+  color: #98cfe1 !important;
 }
 
-.ui.secondary.pointing.menu .item {
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
-  border-radius: 0;
-  align-self: flex-end;
-  margin: 0 0 -2px;
-  padding: 0.85714286em 1.14285714em;
-  border-bottom-width: 2px;
-  transition: color 0.1s ease;
+.ui.form .info ::-moz-placeholder {
+  color: #98cfe1;
 }
 
-.ui.secondary.pointing.menu .ui.dropdown .menu .item {
-  border-bottom-width: 0;
+.ui.form .info :focus::-webkit-input-placeholder {
+  color: #70bdd6;
 }
 
-.ui.secondary.pointing.menu .item > .label:not(.floating) {
-  margin-top: -0.3em;
-  margin-bottom: -0.3em;
+.ui.form .info :focus:-ms-input-placeholder {
+  color: #70bdd6 !important;
 }
 
-.ui.secondary.pointing.menu .item > .circular.label {
-  margin-top: -0.5em;
-  margin-bottom: -0.5em;
+.ui.form .info :focus::-moz-placeholder {
+  color: #70bdd6;
 }
 
-/* Item Types */
-
-.ui.secondary.pointing.menu .header.item {
-  color: rgba(0, 0, 0, 0.85) !important;
-}
+/*------------------
+        Dropdown State
+    --------------------*/
 
-.ui.secondary.pointing.menu .text.item {
-  box-shadow: none !important;
+.ui.form .fields.info .field .ui.dropdown,
+.ui.form .fields.info .field .ui.dropdown .item,
+.ui.form .field.info .ui.dropdown,
+.ui.form .field.info .ui.dropdown .text,
+.ui.form .field.info .ui.dropdown .item {
+  background: #F8FFFF;
+  color: #276F86;
 }
 
-.ui.secondary.pointing.menu .item:after {
-  display: none;
+.ui.form .fields.info .field .ui.dropdown,
+.ui.form .field.info .ui.dropdown {
+  border-color: #A9D5DE !important;
 }
 
-/* Hover */
-
-.ui.secondary.pointing.menu .dropdown.item:hover,
-.ui.secondary.pointing.menu .link.item:hover,
-.ui.secondary.pointing.menu a.item:hover {
-  background-color: transparent;
-  color: rgba(0, 0, 0, 0.87);
+.ui.form .fields.info .field .ui.dropdown:hover,
+.ui.form .field.info .ui.dropdown:hover {
+  border-color: #A9D5DE !important;
 }
 
-/* Pressed */
-
-.ui.secondary.pointing.menu .dropdown.item:active,
-.ui.secondary.pointing.menu .link.item:active,
-.ui.secondary.pointing.menu a.item:active {
-  background-color: transparent;
-  border-color: rgba(34, 36, 38, 0.15);
+.ui.form .fields.info .field .ui.dropdown:hover .menu,
+.ui.form .field.info .ui.dropdown:hover .menu {
+  border-color: #A9D5DE;
 }
 
-/* Active */
-
-.ui.secondary.pointing.menu .active.item {
-  background-color: transparent;
-  box-shadow: none;
-  border-color: currentColor;
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .fields.info .field .ui.multiple.selection.dropdown > .label,
+.ui.form .field.info .ui.multiple.selection.dropdown > .label {
+  background-color: #cce3ea;
+  color: #276F86;
 }
 
-/* Active Hover */
+/* Hover */
 
-.ui.secondary.pointing.menu .active.item:hover {
-  border-color: currentColor;
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .fields.info .field .ui.dropdown .menu .item:hover,
+.ui.form .field.info .ui.dropdown .menu .item:hover {
+  background-color: #e9f2fb;
 }
 
-/* Active Dropdown */
+/* Selected */
 
-.ui.secondary.pointing.menu .active.dropdown.item {
-  border-color: transparent;
+.ui.form .fields.info .field .ui.dropdown .menu .selected.item,
+.ui.form .field.info .ui.dropdown .menu .selected.item {
+  background-color: #e9f2fb;
 }
 
-/* Vertical Pointing */
-
-.ui.secondary.vertical.pointing.menu {
-  border-bottom-width: 0;
-  border-right-width: 2px;
-  border-right-style: solid;
-  border-right-color: rgba(34, 36, 38, 0.15);
-}
+/* Active */
 
-.ui.secondary.vertical.pointing.menu .item {
-  border-bottom: none;
-  border-right-style: solid;
-  border-right-color: transparent;
-  border-radius: 0 !important;
-  margin: 0 -2px 0 0;
-  border-right-width: 2px;
+.ui.form .fields.info .field .ui.dropdown .menu .active.item,
+.ui.form .field.info .ui.dropdown .menu .active.item {
+  background-color: #cef1fd !important;
 }
 
-/* Vertical Active */
+/*--------------------
+        Checkbox State
+    ---------------------*/
 
-.ui.secondary.vertical.pointing.menu .active.item {
-  border-color: currentColor;
+.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) label,
+.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box,
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box {
+  color: #276F86;
 }
 
-/*--------------
-      Text Menu
-  ---------------*/
-
-.ui.text.menu {
-  background: none transparent;
-  border-radius: 0;
-  box-shadow: none;
-  border: none;
-  margin: 1em -0.5em;
+.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.info .field .checkbox:not(.toggle):not(.slider) .box:before,
+.ui.form .field.info .checkbox:not(.toggle):not(.slider) .box:before {
+  background: #F8FFFF;
+  border-color: #A9D5DE;
 }
 
-.ui.text.menu .item {
-  border-radius: 0;
-  box-shadow: none;
-  align-self: center;
-  margin: 0 0;
-  padding: 0.35714286em 0.5em;
-  font-weight: normal;
-  color: rgba(0, 0, 0, 0.6);
-  transition: opacity 0.1s ease;
+.ui.form .fields.info .field .checkbox label:after,
+.ui.form .field.info .checkbox label:after,
+.ui.form .fields.info .field .checkbox .box:after,
+.ui.form .field.info .checkbox .box:after {
+  color: #276F86;
 }
 
-/* Border */
+/* On Form */
 
-.ui.text.menu .item:before,
-.ui.text.menu .menu .item:before {
-  display: none !important;
+.ui.form.success .success.message:not(:empty) {
+  display: block;
 }
 
-/* Header */
-
-.ui.text.menu .header.item {
-  background-color: transparent;
-  opacity: 1;
-  color: rgba(0, 0, 0, 0.85);
-  font-size: 0.92857143em;
-  text-transform: uppercase;
-  font-weight: 500;
+.ui.form.success .compact.success.message:not(:empty) {
+  display: inline-block;
 }
 
-/* Image */
-
-.ui.text.menu .item > img:not(.ui) {
-  margin: 0;
+.ui.form.success .icon.success.message:not(:empty) {
+  display: flex;
 }
 
-/*--- fluid text ---*/
+/* On Field(s) */
 
-.ui.text.item.menu .item {
-  margin: 0;
+.ui.form .fields.success .success.message:not(:empty),
+.ui.form .field.success .success.message:not(:empty) {
+  display: block;
 }
 
-/*--- vertical text ---*/
-
-.ui.vertical.text.menu {
-  margin: 1em 0;
+.ui.form .fields.success .compact.success.message:not(:empty),
+.ui.form .field.success .compact.success.message:not(:empty) {
+  display: inline-block;
 }
 
-.ui.vertical.text.menu:first-child {
-  margin-top: 0;
+.ui.form .fields.success .icon.success.message:not(:empty),
+.ui.form .field.success .icon.success.message:not(:empty) {
+  display: flex;
 }
 
-.ui.vertical.text.menu:last-child {
-  margin-bottom: 0;
+.ui.ui.form .fields.success .field label,
+.ui.ui.form .field.success label,
+.ui.ui.form .fields.success .field .input,
+.ui.ui.form .field.success .input {
+  color: #2C662D;
 }
 
-.ui.vertical.text.menu .item {
-  margin: 0.57142857em 0;
-  padding-left: 0;
-  padding-right: 0;
+.ui.form .fields.success .field .corner.label,
+.ui.form .field.success .corner.label {
+  border-color: #2C662D;
+  color: #FFFFFF;
 }
 
-.ui.vertical.text.menu .item > i.icon {
-  float: none;
-  margin: 0 0.35714286em 0 0;
+.ui.form .fields.success .field textarea,
+.ui.form .fields.success .field select,
+.ui.form .fields.success .field input:not([type]),
+.ui.form .fields.success .field input[type="date"],
+.ui.form .fields.success .field input[type="datetime-local"],
+.ui.form .fields.success .field input[type="email"],
+.ui.form .fields.success .field input[type="number"],
+.ui.form .fields.success .field input[type="password"],
+.ui.form .fields.success .field input[type="search"],
+.ui.form .fields.success .field input[type="tel"],
+.ui.form .fields.success .field input[type="time"],
+.ui.form .fields.success .field input[type="text"],
+.ui.form .fields.success .field input[type="file"],
+.ui.form .fields.success .field input[type="url"],
+.ui.form .field.success textarea,
+.ui.form .field.success select,
+.ui.form .field.success input:not([type]),
+.ui.form .field.success input[type="date"],
+.ui.form .field.success input[type="datetime-local"],
+.ui.form .field.success input[type="email"],
+.ui.form .field.success input[type="number"],
+.ui.form .field.success input[type="password"],
+.ui.form .field.success input[type="search"],
+.ui.form .field.success input[type="tel"],
+.ui.form .field.success input[type="time"],
+.ui.form .field.success input[type="text"],
+.ui.form .field.success input[type="file"],
+.ui.form .field.success input[type="url"] {
+  color: #2C662D;
+  background: #FCFFF5;
+  border-color: #A3C293;
+  border-radius: '';
+  box-shadow: none;
 }
 
-.ui.vertical.text.menu .header.item {
-  margin: 0.57142857em 0 0.71428571em;
+.ui.form .field.success textarea:focus,
+.ui.form .field.success select:focus,
+.ui.form .field.success input:not([type]):focus,
+.ui.form .field.success input[type="date"]:focus,
+.ui.form .field.success input[type="datetime-local"]:focus,
+.ui.form .field.success input[type="email"]:focus,
+.ui.form .field.success input[type="number"]:focus,
+.ui.form .field.success input[type="password"]:focus,
+.ui.form .field.success input[type="search"]:focus,
+.ui.form .field.success input[type="tel"]:focus,
+.ui.form .field.success input[type="time"]:focus,
+.ui.form .field.success input[type="text"]:focus,
+.ui.form .field.success input[type="file"]:focus,
+.ui.form .field.success input[type="url"]:focus {
+  background: #FCFFF5;
+  border-color: #A3C293;
+  color: #2C662D;
+  box-shadow: none;
 }
 
-/* Vertical Sub Menu */
+/* Preserve Native Select Stylings */
 
-.ui.vertical.text.menu .item:not(.dropdown) > .menu {
-  margin: 0;
+.ui.form .field.success select {
+  -webkit-appearance: menulist-button;
 }
 
-.ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
-  margin: 0;
-  padding: 0.5em 0;
-}
+/*------------------
+        Input State
+    --------------------*/
 
-/*--- hover ---*/
+/* Transparent */
 
-.ui.text.menu .item:hover {
-  opacity: 1;
-  background-color: transparent;
+.ui.form .field.success .transparent.input input,
+.ui.form .field.success .transparent.input textarea,
+.ui.form .field.success input.transparent,
+.ui.form .field.success textarea.transparent {
+  background-color: #FCFFF5 !important;
+  color: #2C662D !important;
 }
 
-/*--- active ---*/
+/* Autofilled */
 
-.ui.text.menu .active.item {
-  background-color: transparent;
-  border: none;
-  box-shadow: none;
-  font-weight: normal;
-  color: rgba(0, 0, 0, 0.95);
+.ui.form .success.success input:-webkit-autofill {
+  box-shadow: 0 0 0 100px #F0FFF0 inset !important;
+  border-color: #bee0b3 !important;
 }
 
-/*--- active hover ---*/
+/* Placeholder */
 
-.ui.text.menu .active.item:hover {
-  background-color: transparent;
+.ui.form .success ::-webkit-input-placeholder {
+  color: #8fcf90;
 }
 
-/* Disable Bariations */
-
-.ui.text.pointing.menu .active.item:after {
-  box-shadow: none;
+.ui.form .success :-ms-input-placeholder {
+  color: #8fcf90 !important;
 }
 
-.ui.text.attached.menu {
-  box-shadow: none;
+.ui.form .success ::-moz-placeholder {
+  color: #8fcf90;
 }
 
-/* Fluid */
-
-.ui.fluid.text.menu {
-  margin-left: 0;
-  margin-right: 0;
+.ui.form .success :focus::-webkit-input-placeholder {
+  color: #6cbf6d;
 }
 
-/*--------------
-    Icon Only
----------------*/
-
-/* Vertical Menu */
-
-.ui.vertical.icon.menu {
-  display: inline-block;
-  width: auto;
+.ui.form .success :focus:-ms-input-placeholder {
+  color: #6cbf6d !important;
 }
 
-/* Item */
-
-.ui.icon.menu .item {
-  height: auto;
-  text-align: center;
-  color: #1B1C1D;
+.ui.form .success :focus::-moz-placeholder {
+  color: #6cbf6d;
 }
 
-/* Icon */
+/*------------------
+        Dropdown State
+    --------------------*/
 
-.ui.icon.menu .item > i.icon:not(.dropdown) {
-  margin: 0;
-  opacity: 1;
+.ui.form .fields.success .field .ui.dropdown,
+.ui.form .fields.success .field .ui.dropdown .item,
+.ui.form .field.success .ui.dropdown,
+.ui.form .field.success .ui.dropdown .text,
+.ui.form .field.success .ui.dropdown .item {
+  background: #FCFFF5;
+  color: #2C662D;
 }
 
-/* Icon Gylph */
-
-.ui.icon.menu i.icon:before {
-  opacity: 1;
+.ui.form .fields.success .field .ui.dropdown,
+.ui.form .field.success .ui.dropdown {
+  border-color: #A3C293 !important;
 }
 
-/* (x) Item Icon */
-
-.ui.menu .icon.item > i.icon {
-  width: auto;
-  margin: 0 auto;
+.ui.form .fields.success .field .ui.dropdown:hover,
+.ui.form .field.success .ui.dropdown:hover {
+  border-color: #A3C293 !important;
 }
 
-/* Vertical Icon */
-
-.ui.vertical.icon.menu .item > i.icon:not(.dropdown) {
-  display: block;
-  opacity: 1;
-  margin: 0 auto;
-  float: none;
+.ui.form .fields.success .field .ui.dropdown:hover .menu,
+.ui.form .field.success .ui.dropdown:hover .menu {
+  border-color: #A3C293;
 }
 
-/* Inverted */
-
-.ui.inverted.icon.menu .item {
-  color: #FFFFFF;
+.ui.form .fields.success .field .ui.multiple.selection.dropdown > .label,
+.ui.form .field.success .ui.multiple.selection.dropdown > .label {
+  background-color: #cceacc;
+  color: #2C662D;
 }
 
-/*--------------
-     Labeled Icon
-  ---------------*/
-
-/* Menu */
+/* Hover */
 
-.ui.labeled.icon.menu {
-  text-align: center;
+.ui.form .fields.success .field .ui.dropdown .menu .item:hover,
+.ui.form .field.success .ui.dropdown .menu .item:hover {
+  background-color: #e9fbe9;
 }
 
-/* Item */
+/* Selected */
 
-.ui.labeled.icon.menu .item {
-  min-width: 6em;
-  flex-direction: column;
+.ui.form .fields.success .field .ui.dropdown .menu .selected.item,
+.ui.form .field.success .ui.dropdown .menu .selected.item {
+  background-color: #e9fbe9;
 }
 
-/* Icon */
+/* Active */
 
-.ui.labeled.icon.menu > .item > i.icon:not(.dropdown) {
-  height: 1em;
-  display: block;
-  font-size: 1.71428571em !important;
-  margin: 0 auto 0.5rem !important;
+.ui.form .fields.success .field .ui.dropdown .menu .active.item,
+.ui.form .field.success .ui.dropdown .menu .active.item {
+  background-color: #dafdce !important;
 }
 
-/* Fluid */
+/*--------------------
+        Checkbox State
+    ---------------------*/
 
-.ui.fluid.labeled.icon.menu > .item {
-  min-width: 0;
+.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) label,
+.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box,
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box {
+  color: #2C662D;
 }
 
-/*******************************
-           Variations
-*******************************/
-
-/*--------------
-      Stackable
-  ---------------*/
-
-@media only screen and (max-width: 767.98px) {
-  .ui.stackable.menu {
-    flex-direction: column;
-  }
-
-  .ui.stackable.menu .item {
-    width: 100% !important;
-  }
-
-  .ui.stackable.menu .item:before {
-    position: absolute;
-    content: '';
-    top: auto;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 1px;
-    background: rgba(34, 36, 38, 0.1);
-  }
-
-  .ui.stackable.menu .left.menu,
-  .ui.stackable.menu .left.item {
-    margin-right: 0 !important;
-  }
-
-  .ui.stackable.menu .right.menu,
-  .ui.stackable.menu .right.item {
-    margin-left: 0 !important;
-  }
-
-  .ui.stackable.menu .center.menu,
-  .ui.stackable.menu .center.item {
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-  }
+.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.success .field .checkbox:not(.toggle):not(.slider) .box:before,
+.ui.form .field.success .checkbox:not(.toggle):not(.slider) .box:before {
+  background: #FCFFF5;
+  border-color: #A3C293;
+}
 
-  .ui.stackable.menu .right.menu,
-  .ui.stackable.menu .center.menu,
-  .ui.stackable.menu .left.menu {
-    flex-direction: column;
-  }
+.ui.form .fields.success .field .checkbox label:after,
+.ui.form .field.success .checkbox label:after,
+.ui.form .fields.success .field .checkbox .box:after,
+.ui.form .field.success .checkbox .box:after {
+  color: #2C662D;
 }
 
-/*--------------
-     Colors
----------------*/
+/* On Form */
 
-.ui.ui.ui.menu .primary.active.item,
-.ui.ui.primary.menu .active.item:hover,
-.ui.ui.primary.menu .active.item {
-  color: #2185D0;
+.ui.form.warning .warning.message:not(:empty) {
+  display: block;
 }
 
-.ui.ui.ui.menu .red.active.item,
-.ui.ui.red.menu .active.item:hover,
-.ui.ui.red.menu .active.item {
-  color: #DB2828;
+.ui.form.warning .compact.warning.message:not(:empty) {
+  display: inline-block;
 }
 
-.ui.ui.ui.menu .orange.active.item,
-.ui.ui.orange.menu .active.item:hover,
-.ui.ui.orange.menu .active.item {
-  color: #F2711C;
+.ui.form.warning .icon.warning.message:not(:empty) {
+  display: flex;
 }
 
-.ui.ui.ui.menu .yellow.active.item,
-.ui.ui.yellow.menu .active.item:hover,
-.ui.ui.yellow.menu .active.item {
-  color: #FBBD08;
-}
+/* On Field(s) */
 
-.ui.ui.ui.menu .olive.active.item,
-.ui.ui.olive.menu .active.item:hover,
-.ui.ui.olive.menu .active.item {
-  color: #B5CC18;
+.ui.form .fields.warning .warning.message:not(:empty),
+.ui.form .field.warning .warning.message:not(:empty) {
+  display: block;
 }
 
-.ui.ui.ui.menu .green.active.item,
-.ui.ui.green.menu .active.item:hover,
-.ui.ui.green.menu .active.item {
-  color: #21BA45;
+.ui.form .fields.warning .compact.warning.message:not(:empty),
+.ui.form .field.warning .compact.warning.message:not(:empty) {
+  display: inline-block;
 }
 
-.ui.ui.ui.menu .teal.active.item,
-.ui.ui.teal.menu .active.item:hover,
-.ui.ui.teal.menu .active.item {
-  color: #00B5AD;
+.ui.form .fields.warning .icon.warning.message:not(:empty),
+.ui.form .field.warning .icon.warning.message:not(:empty) {
+  display: flex;
 }
 
-.ui.ui.ui.menu .blue.active.item,
-.ui.ui.blue.menu .active.item:hover,
-.ui.ui.blue.menu .active.item {
-  color: #2185D0;
+.ui.ui.form .fields.warning .field label,
+.ui.ui.form .field.warning label,
+.ui.ui.form .fields.warning .field .input,
+.ui.ui.form .field.warning .input {
+  color: #573A08;
 }
 
-.ui.ui.ui.menu .violet.active.item,
-.ui.ui.violet.menu .active.item:hover,
-.ui.ui.violet.menu .active.item {
-  color: #6435C9;
+.ui.form .fields.warning .field .corner.label,
+.ui.form .field.warning .corner.label {
+  border-color: #573A08;
+  color: #FFFFFF;
 }
 
-.ui.ui.ui.menu .purple.active.item,
-.ui.ui.purple.menu .active.item:hover,
-.ui.ui.purple.menu .active.item {
-  color: #A333C8;
+.ui.form .fields.warning .field textarea,
+.ui.form .fields.warning .field select,
+.ui.form .fields.warning .field input:not([type]),
+.ui.form .fields.warning .field input[type="date"],
+.ui.form .fields.warning .field input[type="datetime-local"],
+.ui.form .fields.warning .field input[type="email"],
+.ui.form .fields.warning .field input[type="number"],
+.ui.form .fields.warning .field input[type="password"],
+.ui.form .fields.warning .field input[type="search"],
+.ui.form .fields.warning .field input[type="tel"],
+.ui.form .fields.warning .field input[type="time"],
+.ui.form .fields.warning .field input[type="text"],
+.ui.form .fields.warning .field input[type="file"],
+.ui.form .fields.warning .field input[type="url"],
+.ui.form .field.warning textarea,
+.ui.form .field.warning select,
+.ui.form .field.warning input:not([type]),
+.ui.form .field.warning input[type="date"],
+.ui.form .field.warning input[type="datetime-local"],
+.ui.form .field.warning input[type="email"],
+.ui.form .field.warning input[type="number"],
+.ui.form .field.warning input[type="password"],
+.ui.form .field.warning input[type="search"],
+.ui.form .field.warning input[type="tel"],
+.ui.form .field.warning input[type="time"],
+.ui.form .field.warning input[type="text"],
+.ui.form .field.warning input[type="file"],
+.ui.form .field.warning input[type="url"] {
+  color: #573A08;
+  background: #FFFAF3;
+  border-color: #C9BA9B;
+  border-radius: '';
+  box-shadow: none;
 }
 
-.ui.ui.ui.menu .pink.active.item,
-.ui.ui.pink.menu .active.item:hover,
-.ui.ui.pink.menu .active.item {
-  color: #E03997;
+.ui.form .field.warning textarea:focus,
+.ui.form .field.warning select:focus,
+.ui.form .field.warning input:not([type]):focus,
+.ui.form .field.warning input[type="date"]:focus,
+.ui.form .field.warning input[type="datetime-local"]:focus,
+.ui.form .field.warning input[type="email"]:focus,
+.ui.form .field.warning input[type="number"]:focus,
+.ui.form .field.warning input[type="password"]:focus,
+.ui.form .field.warning input[type="search"]:focus,
+.ui.form .field.warning input[type="tel"]:focus,
+.ui.form .field.warning input[type="time"]:focus,
+.ui.form .field.warning input[type="text"]:focus,
+.ui.form .field.warning input[type="file"]:focus,
+.ui.form .field.warning input[type="url"]:focus {
+  background: #FFFAF3;
+  border-color: #C9BA9B;
+  color: #573A08;
+  box-shadow: none;
 }
 
-.ui.ui.ui.menu .brown.active.item,
-.ui.ui.brown.menu .active.item:hover,
-.ui.ui.brown.menu .active.item {
-  color: #A5673F;
-}
+/* Preserve Native Select Stylings */
 
-.ui.ui.ui.menu .grey.active.item,
-.ui.ui.grey.menu .active.item:hover,
-.ui.ui.grey.menu .active.item {
-  color: #767676;
+.ui.form .field.warning select {
+  -webkit-appearance: menulist-button;
 }
 
-.ui.ui.ui.menu .black.active.item,
-.ui.ui.black.menu .active.item:hover,
-.ui.ui.black.menu .active.item {
-  color: #1B1C1D;
-}
+/*------------------
+        Input State
+    --------------------*/
 
-/*--------------
-       Floated
-  ---------------*/
+/* Transparent */
 
-.ui.floated.menu {
-  float: left;
-  margin: 0 0.5rem 0 0;
+.ui.form .field.warning .transparent.input input,
+.ui.form .field.warning .transparent.input textarea,
+.ui.form .field.warning input.transparent,
+.ui.form .field.warning textarea.transparent {
+  background-color: #FFFAF3 !important;
+  color: #573A08 !important;
 }
 
-.ui.floated.menu .item:last-child:before {
-  display: none;
-}
+/* Autofilled */
 
-.ui.right.floated.menu {
-  float: right;
-  margin: 0 0 0 0.5rem;
+.ui.form .warning.warning input:-webkit-autofill {
+  box-shadow: 0 0 0 100px #FFFFe0 inset !important;
+  border-color: #e0e0b3 !important;
 }
 
-/*--------------
-       Fitted
-  ---------------*/
+/* Placeholder */
 
-.ui.fitted.menu .item,
-.ui.fitted.menu .item .menu .item,
-.ui.menu .fitted.item {
-  padding: 0;
+.ui.form .warning ::-webkit-input-placeholder {
+  color: #edad3e;
 }
 
-.ui.horizontally.fitted.menu .item,
-.ui.horizontally.fitted.menu .item .menu .item,
-.ui.menu .horizontally.fitted.item {
-  padding-top: 0.92857143em;
-  padding-bottom: 0.92857143em;
+.ui.form .warning :-ms-input-placeholder {
+  color: #edad3e !important;
 }
 
-.ui.vertically.fitted.menu .item,
-.ui.vertically.fitted.menu .item .menu .item,
-.ui.menu .vertically.fitted.item {
-  padding-left: 1.14285714em;
-  padding-right: 1.14285714em;
+.ui.form .warning ::-moz-placeholder {
+  color: #edad3e;
 }
 
-/*--------------
-     Borderless
-  ---------------*/
-
-.ui.borderless.menu .item:before,
-.ui.borderless.menu .item .menu .item:before,
-.ui.menu .borderless.item:before {
-  background: none !important;
+.ui.form .warning :focus::-webkit-input-placeholder {
+  color: #e39715;
 }
 
-/*-------------------
-         Compact
-  --------------------*/
-
-.ui.compact.menu {
-  display: inline-flex;
-  margin: 0;
-  vertical-align: middle;
+.ui.form .warning :focus:-ms-input-placeholder {
+  color: #e39715 !important;
 }
 
-.ui.compact.vertical.menu {
-  /* IE hack to make dropdown icons appear inline */
-  display: -ms-inline-flexbox !important;
-  display: inline-block;
+.ui.form .warning :focus::-moz-placeholder {
+  color: #e39715;
 }
 
-.ui.compact.menu:not(.secondary) .item:last-child {
-  border-radius: 0 0.28571429rem 0.28571429rem 0;
-}
+/*------------------
+        Dropdown State
+    --------------------*/
 
-.ui.compact.menu .item:last-child:before {
-  display: none;
+.ui.form .fields.warning .field .ui.dropdown,
+.ui.form .fields.warning .field .ui.dropdown .item,
+.ui.form .field.warning .ui.dropdown,
+.ui.form .field.warning .ui.dropdown .text,
+.ui.form .field.warning .ui.dropdown .item {
+  background: #FFFAF3;
+  color: #573A08;
 }
 
-.ui.compact.vertical.menu {
-  width: auto !important;
+.ui.form .fields.warning .field .ui.dropdown,
+.ui.form .field.warning .ui.dropdown {
+  border-color: #C9BA9B !important;
 }
 
-.ui.compact.vertical.menu .item:last-child::before {
-  display: block;
+.ui.form .fields.warning .field .ui.dropdown:hover,
+.ui.form .field.warning .ui.dropdown:hover {
+  border-color: #C9BA9B !important;
 }
 
-/*-------------------
-          Fluid
-  --------------------*/
-
-.ui.menu.fluid,
-.ui.vertical.menu.fluid {
-  width: 100% !important;
+.ui.form .fields.warning .field .ui.dropdown:hover .menu,
+.ui.form .field.warning .ui.dropdown:hover .menu {
+  border-color: #C9BA9B;
 }
 
-/*-------------------
-      Evenly Sized
---------------------*/
-
-.ui.item.menu,
-.ui.item.menu .item {
-  width: 100%;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  text-align: center;
-  justify-content: center;
+.ui.form .fields.warning .field .ui.multiple.selection.dropdown > .label,
+.ui.form .field.warning .ui.multiple.selection.dropdown > .label {
+  background-color: #eaeacc;
+  color: #573A08;
 }
 
-.ui.attached.item.menu:not(.tabular) {
-  margin: 0 -1px !important;
-}
+/* Hover */
 
-.ui.item.menu .item:last-child:before {
-  display: none;
+.ui.form .fields.warning .field .ui.dropdown .menu .item:hover,
+.ui.form .field.warning .ui.dropdown .menu .item:hover {
+  background-color: #fbfbe9;
 }
 
-.ui.menu.two.item .item {
-  width: 50%;
-}
+/* Selected */
 
-.ui.menu.three.item .item {
-  width: 33.333%;
+.ui.form .fields.warning .field .ui.dropdown .menu .selected.item,
+.ui.form .field.warning .ui.dropdown .menu .selected.item {
+  background-color: #fbfbe9;
 }
 
-.ui.menu.four.item .item {
-  width: 25%;
-}
+/* Active */
 
-.ui.menu.five.item .item {
-  width: 20%;
+.ui.form .fields.warning .field .ui.dropdown .menu .active.item,
+.ui.form .field.warning .ui.dropdown .menu .active.item {
+  background-color: #fdfdce !important;
 }
 
-.ui.menu.six.item .item {
-  width: 16.666%;
-}
+/*--------------------
+        Checkbox State
+    ---------------------*/
 
-.ui.menu.seven.item .item {
-  width: 14.285%;
+.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label,
+.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box,
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box {
+  color: #573A08;
 }
 
-.ui.menu.eight.item .item {
-  width: 12.5%;
+.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.warning .field .checkbox:not(.toggle):not(.slider) .box:before,
+.ui.form .field.warning .checkbox:not(.toggle):not(.slider) .box:before {
+  background: #FFFAF3;
+  border-color: #C9BA9B;
 }
 
-.ui.menu.nine.item .item {
-  width: 11.11%;
+.ui.form .fields.warning .field .checkbox label:after,
+.ui.form .field.warning .checkbox label:after,
+.ui.form .fields.warning .field .checkbox .box:after,
+.ui.form .field.warning .checkbox .box:after {
+  color: #573A08;
 }
 
-.ui.menu.ten.item .item {
-  width: 10%;
+/*--------------------
+         Disabled
+  ---------------------*/
+
+.ui.form .disabled.fields .field,
+.ui.form .disabled.field,
+.ui.form .field :disabled {
+  pointer-events: none;
+  opacity: var(--opacity-disabled);
 }
 
-.ui.menu.eleven.item .item {
-  width: 9.09%;
+.ui.form .field.disabled > label,
+.ui.form .fields.disabled > label {
+  opacity: var(--opacity-disabled);
 }
 
-.ui.menu.twelve.item .item {
-  width: 8.333%;
+.ui.form .field.disabled :disabled {
+  opacity: 1;
 }
 
 /*--------------
-       Fixed
+      Loading
   ---------------*/
 
-.ui.menu.fixed {
-  position: fixed;
-  z-index: 101;
-  margin: 0;
-  width: 100%;
-}
-
-.ui.menu.fixed,
-.ui.menu.fixed .item:first-child,
-.ui.menu.fixed .item:last-child {
-  border-radius: 0 !important;
+.ui.loading.form {
+  position: relative;
+  cursor: default;
+  pointer-events: none;
 }
 
-.ui.fixed.menu,
-.ui[class*="top fixed"].menu {
+.ui.loading.form:before {
+  position: absolute;
+  content: '';
   top: 0;
   left: 0;
-  right: auto;
-  bottom: auto;
+  background: rgba(255, 255, 255, 0.8);
+  width: 100%;
+  height: 100%;
+  z-index: 100;
 }
 
-.ui[class*="top fixed"].menu {
-  border-top: none;
-  border-left: none;
-  border-right: none;
+.ui.loading.form.segments:before {
+  border-radius: 0.28571429rem;
 }
 
-.ui[class*="right fixed"].menu {
-  border-top: none;
-  border-bottom: none;
-  border-right: none;
-  top: 0;
-  right: 0;
-  left: auto;
-  bottom: auto;
-  width: auto;
-  height: 100%;
+.ui.loading.form:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -1.5em 0 0 -1.5em;
+  width: 3em;
+  height: 3em;
+  animation: loader 0.6s infinite linear;
+  border: 0.2em solid #767676;
+  border-radius: 500rem;
+  box-shadow: 0 0 0 1px transparent;
+  visibility: visible;
+  z-index: 101;
 }
 
-.ui[class*="bottom fixed"].menu {
-  border-bottom: none;
-  border-left: none;
-  border-right: none;
-  bottom: 0;
-  left: 0;
-  top: auto;
-  right: auto;
+/*******************************
+         Element Types
+*******************************/
+
+/*--------------------
+       Required Field
+  ---------------------*/
+
+.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields.grouped > label:after,
+.ui.form .required.field > label:after,
+.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after,
+.ui.form label.required:after {
+  margin: -0.2em 0 0 0.2em;
+  content: '*';
+  color: #DB2828;
 }
 
-.ui[class*="left fixed"].menu {
-  border-top: none;
-  border-bottom: none;
-  border-left: none;
+.ui.form .required.fields:not(.grouped) > .field > label:after,
+.ui.form .required.fields.grouped > label:after,
+.ui.form .required.field > label:after,
+.ui.form label.required:after {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.ui.form .required.fields:not(.grouped) > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after {
+  position: absolute;
   top: 0;
-  left: 0;
-  right: auto;
-  bottom: auto;
-  width: auto;
-  height: 100%;
+  left: 100%;
 }
 
-/* Coupling with Grid */
+/*******************************
+           Variations
+*******************************/
+
+/*--------------------
+       Field Groups
+  ---------------------*/
+
+/* Grouped Vertically */
 
-.ui.fixed.menu + .ui.grid {
-  padding-top: 2.75rem;
+.ui.form .grouped.fields {
+  display: block;
+  margin: 0 0 1em;
 }
 
-/*-------------------
-         Pointing
-  --------------------*/
+.ui.form .grouped.fields:last-child {
+  margin-bottom: 0;
+}
 
-.ui.pointing.menu .item:after {
-  visibility: hidden;
-  position: absolute;
-  content: '';
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  background: none;
-  margin: 0.5px 0 0;
-  width: 0.57142857em;
-  height: 0.57142857em;
-  border: none;
-  border-bottom: 1px solid #D4D4D5;
-  border-right: 1px solid #D4D4D5;
-  z-index: 2;
-  transition: background 0.1s ease;
+.ui.form .grouped.fields > label {
+  margin: 0 0 0.28571429rem 0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 0.92857143em;
+  font-weight: 500;
+  text-transform: none;
 }
 
-.ui.vertical.pointing.menu .item:after {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  bottom: auto;
-  left: auto;
-  transform: translateX(50%) translateY(-50%) rotate(45deg);
-  margin: 0 -0.5px 0 0;
-  border: none;
-  border-top: 1px solid #D4D4D5;
-  border-right: 1px solid #D4D4D5;
+.ui.form .grouped.fields .field,
+.ui.form .grouped.inline.fields .field {
+  display: block;
+  margin: 0.5em 0;
+  padding: 0;
 }
 
-.ui.pointing.menu .ui.dropdown .menu .item:after,
-.ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
-  display: none;
+.ui.form .grouped.inline.fields .ui.checkbox {
+  margin-bottom: 0.4em;
 }
 
-/* Active */
+/*--------------------
+        Fields
+---------------------*/
 
-.ui.pointing.menu .active.item:after {
-  visibility: visible;
-}
+/* Split fields */
 
-.ui.pointing.menu .active.dropdown.item:after {
-  visibility: hidden;
+.ui.form .fields {
+  display: flex;
+  flex-direction: row;
+  margin: 0 -0.5em 1em;
 }
 
-/* Don't double up pointers */
+.ui.form .fields > .field {
+  flex: 0 1 auto;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
 
-.ui.pointing.menu .dropdown.active.item:after,
-.ui.pointing.menu .active.item .menu .active.item:after {
-  display: none;
+.ui.form .fields > .field:first-child {
+  border-left: none;
+  box-shadow: none;
 }
 
-/* Colors */
+/* Other Combinations */
 
-.ui.pointing.menu .active.item:hover:after {
-  background-color: #F2F2F2;
+.ui.form .two.fields > .fields,
+.ui.form .two.fields > .field {
+  width: 50%;
 }
 
-.ui.pointing.menu .active.item:after {
-  background-color: #F2F2F2;
+.ui.form .three.fields > .fields,
+.ui.form .three.fields > .field {
+  width: 33.33333333%;
 }
 
-.ui.pointing.menu .active.item:hover:after {
-  background-color: #F2F2F2;
+.ui.form .four.fields > .fields,
+.ui.form .four.fields > .field {
+  width: 25%;
 }
 
-.ui.vertical.pointing.menu .active.item:hover:after {
-  background-color: #F2F2F2;
+.ui.form .five.fields > .fields,
+.ui.form .five.fields > .field {
+  width: 20%;
 }
 
-.ui.vertical.pointing.menu .active.item:after {
-  background-color: #F2F2F2;
+.ui.form .six.fields > .fields,
+.ui.form .six.fields > .field {
+  width: 16.66666667%;
 }
 
-.ui.vertical.pointing.menu .menu .active.item:after {
-  background-color: #FFFFFF;
+.ui.form .seven.fields > .fields,
+.ui.form .seven.fields > .field {
+  width: 14.28571429%;
 }
 
-.ui.inverted.pointing.menu .primary.active.item:after {
-  background-color: #2185D0;
+.ui.form .eight.fields > .fields,
+.ui.form .eight.fields > .field {
+  width: 12.5%;
 }
 
-.ui.inverted.pointing.menu .secondary.active.item:after {
-  background-color: #1B1C1D;
+.ui.form .nine.fields > .fields,
+.ui.form .nine.fields > .field {
+  width: 11.11111111%;
 }
 
-.ui.inverted.pointing.menu .red.active.item:after {
-  background-color: #DB2828;
+.ui.form .ten.fields > .fields,
+.ui.form .ten.fields > .field {
+  width: 10%;
 }
 
-.ui.inverted.pointing.menu .orange.active.item:after {
-  background-color: #F2711C;
-}
+/* Swap to full width on mobile */
 
-.ui.inverted.pointing.menu .yellow.active.item:after {
-  background-color: #FBBD08;
-}
+@media only screen and (max-width: 767.98px) {
+  .ui.form .fields {
+    flex-wrap: wrap;
+    margin-bottom: 0;
+  }
 
-.ui.inverted.pointing.menu .olive.active.item:after {
-  background-color: #B5CC18;
+  .ui.form:not(.unstackable) .fields:not(.unstackable) > .fields,
+  .ui.form:not(.unstackable) .fields:not(.unstackable) > .field {
+    width: 100%;
+    margin: 0 0 1em;
+  }
 }
 
-.ui.inverted.pointing.menu .green.active.item:after {
-  background-color: #21BA45;
-}
+/* Sizing Combinations */
 
-.ui.inverted.pointing.menu .teal.active.item:after {
-  background-color: #00B5AD;
+.ui.form .fields .wide.field {
+  width: 6.25%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
 }
 
-.ui.inverted.pointing.menu .blue.active.item:after {
-  background-color: #2185D0;
+.ui.form .one.wide.field {
+  width: 6.25%;
 }
 
-.ui.inverted.pointing.menu .violet.active.item:after {
-  background-color: #6435C9;
+.ui.form .two.wide.field {
+  width: 12.5%;
 }
 
-.ui.inverted.pointing.menu .purple.active.item:after {
-  background-color: #A333C8;
+.ui.form .three.wide.field {
+  width: 18.75%;
 }
 
-.ui.inverted.pointing.menu .pink.active.item:after {
-  background-color: #E03997;
+.ui.form .four.wide.field {
+  width: 25%;
 }
 
-.ui.inverted.pointing.menu .brown.active.item:after {
-  background-color: #A5673F;
+.ui.form .five.wide.field {
+  width: 31.25%;
 }
 
-.ui.inverted.pointing.menu .grey.active.item:after {
-  background-color: #767676;
+.ui.form .six.wide.field {
+  width: 37.5%;
 }
 
-.ui.inverted.pointing.menu .black.active.item:after {
-  background-color: #1B1C1D;
+.ui.form .seven.wide.field {
+  width: 43.75%;
 }
 
-/*--------------
-      Attached
-  ---------------*/
-
-/* Middle */
-
-.ui.attached.menu {
-  top: 0;
-  bottom: 0;
-  border-radius: 0;
-  margin: 0 -1px;
-  width: calc(100% + 2px);
-  max-width: calc(100% + 2px);
-  box-shadow: none;
+.ui.form .eight.wide.field {
+  width: 50%;
 }
 
-.ui.attached + .ui.attached.menu:not(.top) {
-  border-top: none;
+.ui.form .nine.wide.field {
+  width: 56.25%;
 }
 
-/* Top */
-
-.ui[class*="top attached"].menu {
-  bottom: 0;
-  margin-bottom: 0;
-  top: 0;
-  margin-top: 1rem;
-  border-radius: 0.28571429rem 0.28571429rem 0 0;
+.ui.form .ten.wide.field {
+  width: 62.5%;
 }
 
-.ui.menu[class*="top attached"]:first-child {
-  margin-top: 0;
+.ui.form .eleven.wide.field {
+  width: 68.75%;
 }
 
-/* Bottom */
-
-.ui[class*="bottom attached"].menu {
-  bottom: 0;
-  margin-top: 0;
-  top: 0;
-  margin-bottom: 1rem;
-  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15), none;
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
+.ui.form .twelve.wide.field {
+  width: 75%;
 }
 
-.ui[class*="bottom attached"].menu:last-child {
-  margin-bottom: 0;
+.ui.form .thirteen.wide.field {
+  width: 81.25%;
 }
 
-/* Attached Menu Item */
-
-.ui.top.attached.menu > .item:first-child {
-  border-radius: 0.28571429rem 0 0 0;
+.ui.form .fourteen.wide.field {
+  width: 87.5%;
 }
 
-.ui.bottom.attached.menu > .item:first-child {
-  border-radius: 0 0 0 0.28571429rem;
+.ui.form .fifteen.wide.field {
+  width: 93.75%;
 }
 
-/* Tabular Attached */
-
-.ui.attached.menu:not(.tabular) {
-  border: 1px solid #D4D4D5;
+.ui.form .sixteen.wide.field {
+  width: 100%;
 }
 
-.ui.attached.tabular.menu {
-  margin-left: 0;
-  margin-right: 0;
+/*--------------------
+     Equal Width
+---------------------*/
+
+.ui[class*="equal width"].form .fields > .field,
+.ui.form [class*="equal width"].fields > .field {
   width: 100%;
+  flex: 1 1 auto;
 }
 
-/*--------------
-     Sizes
----------------*/
+/*--------------------
+      Inline Fields
+  ---------------------*/
 
-.ui.menu {
-  font-size: 1rem;
+.ui.form .inline.fields {
+  margin: 0 0 1em;
+  align-items: center;
 }
 
-.ui.vertical.menu {
-  width: 15rem;
+.ui.form .inline.fields .field {
+  margin: 0;
+  padding: 0 1em 0 0;
 }
 
-.ui.mini.menu,
-.ui.mini.menu .dropdown,
-.ui.mini.menu .dropdown .menu > .item {
-  font-size: 0.78571429rem;
-}
+/* Inline Label */
 
-.ui.mini.vertical.menu:not(.icon) {
-  width: 9rem;
+.ui.form .inline.fields > label,
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.field > label,
+.ui.form .inline.field > p {
+  display: inline-block;
+  width: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  vertical-align: baseline;
+  font-size: 0.92857143em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+  text-transform: none;
 }
 
-.ui.tiny.menu,
-.ui.tiny.menu .dropdown,
-.ui.tiny.menu .dropdown .menu > .item {
-  font-size: 0.85714286rem;
-}
+/* Grouped Inline Label */
 
-.ui.tiny.vertical.menu:not(.icon) {
-  width: 11rem;
+.ui.form .inline.fields > label {
+  margin: 0.035714em 1em 0 0;
 }
 
-.ui.small.menu,
-.ui.small.menu .dropdown,
-.ui.small.menu .dropdown .menu > .item {
-  font-size: 0.92857143rem;
-}
+/* Inline Input */
 
-.ui.small.vertical.menu:not(.icon) {
-  width: 13rem;
+.ui.form .inline.fields .field > input,
+.ui.form .inline.fields .field > select,
+.ui.form .inline.field > input,
+.ui.form .inline.field > select {
+  display: inline-block;
+  width: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  vertical-align: middle;
+  font-size: 1em;
 }
 
-.ui.large.menu,
-.ui.large.menu .dropdown,
-.ui.large.menu .dropdown .menu > .item {
-  font-size: 1.07142857rem;
+.ui.form .inline.fields .field .calendar:not(.popup),
+.ui.form .inline.field .calendar:not(.popup) {
+  display: inline-block;
 }
 
-.ui.large.vertical.menu:not(.icon) {
-  width: 18rem;
+.ui.form .inline.fields .field .calendar:not(.popup) > .input > input,
+.ui.form .inline.field .calendar:not(.popup) > .input > input {
+  width: 13.11em;
 }
 
-.ui.big.menu,
-.ui.big.menu .dropdown,
-.ui.big.menu .dropdown .menu > .item {
-  font-size: 1.14285714rem;
-}
+/* Label */
 
-.ui.big.vertical.menu:not(.icon) {
-  width: 20rem;
+.ui.form .inline.fields .field > :first-child,
+.ui.form .inline.field > :first-child {
+  margin: 0 0.85714286em 0 0;
 }
 
-.ui.huge.menu,
-.ui.huge.menu .dropdown,
-.ui.huge.menu .dropdown .menu > .item {
-  font-size: 1.21428571rem;
+.ui.form .inline.fields .field > :only-child,
+.ui.form .inline.field > :only-child {
+  margin: 0;
 }
 
-.ui.huge.vertical.menu:not(.icon) {
-  width: 22rem;
-}
+/* Wide */
 
-.ui.massive.menu,
-.ui.massive.menu .dropdown,
-.ui.massive.menu .dropdown .menu > .item {
-  font-size: 1.28571429rem;
+.ui.form .inline.fields .wide.field {
+  display: flex;
+  align-items: center;
 }
 
-.ui.massive.vertical.menu:not(.icon) {
-  width: 25rem;
+.ui.form .inline.fields .wide.field > input,
+.ui.form .inline.fields .wide.field > select {
+  width: 100%;
 }
 
-/*-------------------
-  Inverted dropdowns
---------------------*/
+/*--------------------
+        Sizes
+---------------------*/
 
-.ui.menu .ui.inverted.inverted.dropdown.item .menu {
-  background: #1B1C1D;
-  box-shadow: none;
+.ui.form,
+.ui.form .field .dropdown,
+.ui.form .field .dropdown .menu > .item {
+  font-size: 1rem;
 }
 
-.ui.menu .ui.inverted.dropdown .menu > .item {
-  color: rgba(255, 255, 255, 0.8) !important;
+.ui.mini.form,
+.ui.mini.form .field .dropdown,
+.ui.mini.form .field .dropdown .menu > .item {
+  font-size: 0.78571429rem;
+}
+
+.ui.tiny.form,
+.ui.tiny.form .field .dropdown,
+.ui.tiny.form .field .dropdown .menu > .item {
+  font-size: 0.85714286rem;
 }
 
-.ui.menu .ui.inverted.dropdown .menu > .active.item {
-  background: transparent !important;
-  color: rgba(255, 255, 255, 0.8) !important;
+.ui.small.form,
+.ui.small.form .field .dropdown,
+.ui.small.form .field .dropdown .menu > .item {
+  font-size: 0.92857143rem;
 }
 
-.ui.menu .ui.inverted.dropdown .menu > .item:hover {
-  background: rgba(255, 255, 255, 0.08) !important;
-  color: rgba(255, 255, 255, 0.8) !important;
+.ui.large.form,
+.ui.large.form .field .dropdown,
+.ui.large.form .field .dropdown .menu > .item {
+  font-size: 1.14285714rem;
 }
 
-.ui.menu .ui.inverted.dropdown .menu > .selected.item {
-  background: rgba(255, 255, 255, 0.15) !important;
-  color: rgba(255, 255, 255, 0.8) !important;
+.ui.big.form,
+.ui.big.form .field .dropdown,
+.ui.big.form .field .dropdown .menu > .item {
+  font-size: 1.28571429rem;
 }
 
-/* Vertical */
+.ui.huge.form,
+.ui.huge.form .field .dropdown,
+.ui.huge.form .field .dropdown .menu > .item {
+  font-size: 1.42857143rem;
+}
 
-.ui.vertical.menu .inverted.dropdown.item .menu {
-  box-shadow: none;
+.ui.massive.form,
+.ui.massive.form .field .dropdown,
+.ui.massive.form .field .dropdown .menu > .item {
+  font-size: 1.71428571rem;
 }
 
 /*******************************
diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json
index 5db57bc8d40e..489ca7b9b79c 100644
--- a/web_src/fomantic/semantic.json
+++ b/web_src/fomantic/semantic.json
@@ -22,11 +22,9 @@
   "admin": false,
   "components": [
     "api",
-    "button",
     "dimmer",
     "dropdown",
     "form",
-    "menu",
     "modal",
     "search",
     "tab"
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index bd0901a7b595..9efa8840ac47 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -138,7 +138,7 @@ export default {
 
     <div v-if="!showActionForm" class="tw-flex">
       <!-- the merge button -->
-      <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
+      <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? '' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
         <button class="ui button">
           <svg-icon name="octicon-git-merge"/>
           <span class="button-text">
diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js
index 2def3db51a7b..e507b89632af 100644
--- a/web_src/js/features/comp/ReactionSelector.js
+++ b/web_src/js/features/comp/ReactionSelector.js
@@ -1,38 +1,36 @@
 import $ from 'jquery';
 import {POST} from '../../modules/fetch.js';
 
-export function initCompReactionSelector($parent) {
-  $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
-    e.preventDefault();
+export function initCompReactionSelector() {
+  for (const container of document.querySelectorAll('.issue-content, .diff-file-body')) {
+    container.addEventListener('click', async (e) => {
+      // there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
+      const target = e.target.closest('.comment-reaction-button');
+      if (!target) return;
+      e.preventDefault();
 
-    if (this.classList.contains('disabled')) return;
+      if (target.classList.contains('disabled')) return;
 
-    const actionUrl = this.closest('[data-action-url]')?.getAttribute('data-action-url');
-    const reactionContent = this.getAttribute('data-reaction-content');
-    const hasReacted = this.closest('.ui.segment.reactions')?.querySelector(`a[data-reaction-content="${reactionContent}"]`)?.getAttribute('data-has-reacted') === 'true';
+      const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
+      const reactionContent = target.getAttribute('data-reaction-content');
 
-    const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-      data: new URLSearchParams({content: reactionContent}),
-    });
+      const commentContainer = target.closest('.comment-container');
 
-    const data = await res.json();
-    if (data && (data.html || data.empty)) {
-      const $content = $(this).closest('.content');
-      let $react = $content.find('.segment.reactions');
-      if ((!data.empty || data.html === '') && $react.length > 0) {
-        $react.remove();
-      }
-      if (!data.empty) {
-        const $attachments = $content.find('.segment.bottom:first');
-        $react = $(data.html);
-        if ($attachments.length > 0) {
-          $react.insertBefore($attachments);
-        } else {
-          $react.appendTo($content);
-        }
-        $react.find('.dropdown').dropdown();
-        initCompReactionSelector($react);
+      const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
+      const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
+      const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
+
+      const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
+        data: new URLSearchParams({content: reactionContent}),
+      });
+
+      const data = await res.json();
+      bottomReactions?.remove();
+      if (data.html) {
+        commentContainer.insertAdjacentHTML('beforeend', data.html);
+        const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
+        $(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
       }
-    }
-  });
+    });
+  }
 }
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index b2e8ec4866f9..00f74515df6a 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -87,7 +87,6 @@ function initRepoDiffConversationForm() {
         el.classList.add('tw-invisible');
       }
       $newConversationHolder.find('.dropdown').dropdown();
-      initCompReactionSelector($newConversationHolder);
     } catch (error) {
       console.error('Error:', error);
       showErrorToast(i18n.network_error);
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 0d326aae581f..2b2eed58bbfb 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -449,12 +449,10 @@ export function initRepoPullRequestReview() {
           offset += $('.diff-detail-box').outerHeight() + $(diffHeader).outerHeight();
         }
 
-        document.getElementById(`show-outdated-${id}`).classList.add('tw-hidden');
-        document.getElementById(`code-comments-${id}`).classList.remove('tw-hidden');
-        document.getElementById(`code-preview-${id}`).classList.remove('tw-hidden');
-        document.getElementById(`hide-outdated-${id}`).classList.remove('tw-hidden');
+        hideElem(`#show-outdated-${id}`);
+        showElem(`#code-comments-${id}, #code-preview-${id}, #hide-outdated-${id}`);
         // if the comment box is folded, expand it
-        if (ancestorDiffBox.getAttribute('data-folded') === 'true') {
+        if (ancestorDiffBox?.getAttribute('data-folded') === 'true') {
           setFileFolding(ancestorDiffBox, ancestorDiffBox.querySelector('.fold-file'), false);
         }
 
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index e83de27e4cf4..18d98c891d06 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -393,7 +393,7 @@ export function initRepository() {
     initRepoIssueDependencyDelete();
     initRepoIssueCodeCommentCancel();
     initRepoPullRequestUpdate();
-    initCompReactionSelector($(document));
+    initCompReactionSelector();
 
     initRepoPullRequestMergeForm();
     initRepoPullRequestCommitStatus();